body {
  font: 14px/2 "Open sans", sans-serif;
  letter-spacing: 0.05em;
  overflow: hidden;
}

.btn {
  display: inline-block;
  padding: 10px 16px;
  color: #fff;
  text-decoration: none;
  position: relative;
  background: #373737;;
  border: 1px solid #e1e1e1;
  font: 18px/1.2 "Oswald", sans-serif;
  letter-spacing: 0.4em;
  text-align: center;
  text-indent: 2px;
  text-transform: uppercase;
  transition: color 0.1s linear 0.05s;
  font-weight: bold;
}
.btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
  z-index: 1;
  opacity: 0;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn::after {
  transition: border 0.1s linear 0.05s;
}
.btn .btn-inner {
  position: relative;
  z-index: 2;
}
.btn:hover {
  color: #373737;
  transition: color 0.1s linear 0s;
}
.btn:hover::before {
  top: 0;
  height: 100%;
  opacity: 1;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn:hover::after {
  border-color: #373737;
  transition: border 0.1s linear 0s;
}

.slideshow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 1;
}
.slideshow .slideshow-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slideshow .slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slideshow .slide {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slideshow .slide.is-active {
  display: block;
}
.slideshow .slide.is-loaded {
  opacity: 1;
}
.slideshow .slide .caption {
  padding: 0 100px;
}
.slideshow .slide .image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  z-index: 1;
  background-size: cover;
  image-rendering: optimizeQuality;
}
.slideshow .slide .image-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(0, 0, 0, 0);*/
}
.slideshow .slide .image {
  width: 100%;
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.slideshow .slide-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slideshow .slide .title {
  margin: 0 auto 15px;
  max-width: 1000px;
  font: 300 50px/1.2 "Oswald", sans-serif;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.slideshow .slide .text {
  margin: 0 auto;
  max-width: 1000px;
  font-size: 18px;
  line-height: 1.4;
}
.slideshow .slide .btn {
  margin: 15px 0 0;
  border-color: #1a1a1a;
}
.slideshow .slide .btn::before {
  background: #fff;
}
.slideshow .pagination {
  position: absolute;
  bottom: 35px;
  left: 0;
  width: 100%;
  height: 12px;
  cursor: default;
  z-index: 2;
  text-align: center;
}
.slideshow .pagination .item {
  display: inline-block;
  padding: 15px 5px;
  position: relative;
  width: 46px;
  height: 32px;
  cursor: pointer;
  text-indent: -999em;
  z-index: 1;
}
.slideshow .pagination .item + .page {
  margin-left: -2px;
}
.slideshow .pagination .item::before {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
  left: 5px;
  width: 36px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.2s ease;
}
.slideshow .pagination .item::after {
  width: 0;
  background: #fff;
  z-index: 2;
  transition: width 0.2s ease;
}
.slideshow .pagination .item:hover::before, .slideshow .pagination .item.is-active::before {
  background-color: #fff;
}
.slideshow .arrows .arrow {
  margin: -33px 0 0;
  padding: 20px;
  position: absolute;
  top: 55%;
  cursor: pointer;
  z-index: 3;
  background: transparent; /* 背景を透明に保つ */
}
.slideshow .arrows .prev {
  left: 30px;
  animation: sway-left 1.5s ease-in-out infinite;
}
.slideshow .arrows .prev:hover .svg {
  left: -10px;
}
.slideshow .arrows .next {
  right: 30px;
  animation: sway-right 1.5s ease-in-out infinite;
}
.slideshow .arrows .next:hover .svg {
  left: 10px;
}
.slideshow .arrows .svg {
  position: relative;
  left: 0;
  width: 14px;
  height: 26px;
  fill: #fff;
  transition: left 0.2s ease;
}

/* @keyframes: 左右の矢印を別々の方向に動かす */
@keyframes sway-left {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px); /* 左に10px移動 */
  }
}

@keyframes sway-right {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px); /* 右に10px移動 */
  }
}

/* slideshow.data('wait')がtrueの際のスタイル */
.arrow.disabled {
  animation: none; /* 動きを停止 */
  opacity: 0.2; /* 半透明 */
  background-color: #ccc; /* 背景をグレーに変更 */
  cursor: not-allowed; /* カーソルを無効状態に */
}

/* スライドにスワイプする際のアニメーション */
.slideshow .slide {
  transition: transform 0.3s ease; /* 変形のアニメーションを追加 */
}

/* スワイプしたスライドの位置 */
.slideshow .slide.swiped {
  transform: translateX(-100%); /* 左へスワイプ */
}
.slideshow .slide.swiped-back {
  transform: translateX(100%); /* 右へスワイプ */
}
/* 動画のラッパー要素 */
.video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 他のコンテンツより背面に配置 */
}

/* 動画を画面全体に広げる */
.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を保ちながら画面いっぱいに広げる */
}

/* 中央に表示する画像 */
.image-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5); /* 初期状態で小さくする */
  opacity: 0; /* 初期状態で透明にする */
  z-index: 0; /* 動画より上、コンテンツより下 */
  animation: fadeInScale 3s ease-out forwards; /* フェードインとスケールインアニメーション */
}

/* 画像にアニメーションを適用 */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5); /* 初期位置、初期サイズ */
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* 最終位置、最終サイズ */
  }
}

.image-wrap img {
  width: 300px; /* 画像のサイズを調整 */
  height: auto;
}

/*----禁則対応---*/
* {
  user-select: none;  /* すべての要素でテキスト選択を無効化 */
}