@charset "UTF-8";
/* クランプ関数 */
/* html */
html {
  font-family: "Noto Sans JP", sans-serif;
  scroll-behavior: smooth;
  height: auto;
  min-height: 100%;
  /* 横へのはみ出しを防止しつつ、縦スクロールは自由にする */
  overflow-y: visible; 
  overflow-x: hidden;
}
body {
  /* background-color: #8ADDE5; */
  background-image: url("../images/bg.jpg");
  background-size: cover;
  margin-top: 0;
}

/* スライダー全体のサイズ制限 */
.swiper {
  width: 100%;
  height: auto;
  max-width: 750px; /* バナーに合わせた最大幅 */
  margin: auto ;
  padding-bottom: clamp(10px, 5vh, 25px) !important;
}

/* 画像が枠からはみ出さないように */
.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* 左右共通の設定 */
.swiper-button-next,
.swiper-button-prev {
  color: #fff; /* 矢印の色（白にする場合） */
}

/* 矢印のサイズを変える */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px !important; /* デフォルトは44pxくらいなので、お好みで調整 */
  font-weight: bold;         /* 太くしたい場合 */
}
  
/* --- ページネーション全体のコンテナ --- */
.swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* ドット間の距離 */
  bottom: 10px !important; /* 画像との距離を詰める */
}

/* --- 通常のドット（非アクティブ） --- */
.swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  background-color: #ccc !important; /* 非アクティブ時の色 */
  opacity: 0.6 !important;
  border-radius: 4px; /* 少し角丸 */
  
  /* 【ここが重要】ぬるっと動かすための設定 */
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1.0), 
              background-color 0.4s ease, 
              opacity 0.4s ease !important;
  
  /* 以前の疑似要素を完全に消去 */
  position: relative;
}
.swiper-pagination-bullet::before,
.swiper-pagination-bullet::after {
  content: none !important;
  display: none !important;
}

/* --- アクティブなドット（ぬるっと伸びる横長） --- */
.swiper-pagination-bullet-active {
  width: 20px !important;    /* 横長の長さ */
  background-color: #ec4d76 !important; /* アクティブ時の色 */
  opacity: 1 !important;
  border-radius: 10px !important; /* カプセル型を維持 */
}



/* PCのデフォルト設定 */
.swiper-slide.is-stacked .overlay-copy {
  position: absolute;
  top: 5%;
  left: 10%;
  z-index: 3;
  width: auto;
  max-width: 100%; /* PCでは少し控えめなサイズに */
  height: auto;
  pointer-events: none;
  filter: url(#copy-ripple);
  opacity: 0;
  animation: rippleFadeInOnly 0.5s ease-out forwards;
}



/* --- 透明度（フェードイン）だけを制御するアニメーション --- */
@keyframes rippleFadeInOnly {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2; /* 早めに少し見せ始める */
  }
  100% {
    opacity: 1; /* 静かに不透明に */
  }
}

/* 既存の z-index の関係性を整理 */
.swiper-slide.is-stacked .overlay-video { z-index: 1; }
.swiper-slide.is-stacked .fade-in-image  { z-index: 2; }
.swiper-slide.is-stacked .overlay-copy   { z-index: 3; }
/* 動画の設定 */
.swiper-slide.is-stacked .overlay-video-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}

/* 画像の設定：シンプルなフェードイン */
.swiper-slide.is-stacked img.fade-in-image {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 100%;
  height: auto;
  
  opacity: 0;
  /* 2.5秒かけて、ふわっと表示 */
  animation: simpleFadeIn 2.5s ease-out forwards;
  animation-delay: 0.3s; /* 動画が始まってから一呼吸おいて開始 */
}

@keyframes simpleFadeIn {
  0% {
    opacity: 0;
    /* ほんの少しだけ大きくしておく（ズームアウト効果） */
    transform: translateX(-50%) scale(1.05);
  }
  100% {
    opacity: 1;
    /* 元のサイズに戻る */
    transform: translateX(-50%) scale(1);
  }
}

/* --- スワイプナビ --- */
/* 指アイコンの初期位置とスタイル */
/* --- スワイプナビ全体のコンテナ --- */
.swipe-guide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;         /* 確実に一番手前に */
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;      /* 光のはみ出し防止 */
}

/* スワイプアイコン画像 */
.swipe-img {
  opacity: 0;
  width: 80px; /* 必要に応じてサイズ調整 */
}

/* 光の筋の設定 */
.light-sweep {
  position: absolute;
  bottom: 5%;    /* 下半分に配置 */
  left: 40%;   /* 画面外 */
  width: 40%;
  height: 400px;   /* 太さを少し調整 */
  background: linear-gradient(to right, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(5px);
  opacity: 0;
  z-index: 1001;
}

/* アニメーション発火 */
.is-animating .swipe-img {
  animation: swipe-fade-move 2.5s ease-in-out forwards;
}

/* JavaScriptで付与されるクラス */
.is-animating .light-sweep {
  animation: sweep-move-once 0.3s ease-in-out forwards;
}

/* 4秒周期の繰り返しアニメーション */
@keyframes sweep-move-once {
  0% {
    left: 20%;
    opacity: 0;
  }
  20% {
    /* 序盤でパッと明るく */
    opacity: 1;
  }
  80% {
    /* 終盤まで明るさを維持しつつ移動 */
    opacity: 1;
    left: 60%;
  }
  100% {
    /* 最後にスッと消える */
    left: 70%; /* 終着点を少し伸ばすとより勢いが出ます */
    opacity: 0;
  }
}

/* スワイプアイコン用アニメーション（既存のものを流用） */
@keyframes swipe-fade-move {
  0% { opacity: 0; transform: translateX(50px); }
  20% { opacity: 1; }
  80% { opacity: 1; transform: translateX(-50px); }
  100% { opacity: 0; transform: translateX(-50px); }
}


/* スライドを基準位置に設定 */
.video-slide {
  position: relative;
  width: 100%;
}

/* 画像のサイズを整える */
.video-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* 動画を画像の上に配置 */
.overlay-video {
  position: absolute;
  /* 表示したい位置を調整（例：中央に配置） */
  top: 35.2%;
  left: 50.1%;
  transform: translate(-50%, -50%);
  
  /* 動画のサイズ（画像に対しての比率やpxで指定） */
  width: 92.8%; 
  z-index: 10;
  pointer-events: none; /* 動画背後のクリックを邪魔したくない場合 */
}



.floating-cv {
  text-align: center;
  /* position: fixed;
  bottom: 2%;
  left: 0; */
  z-index: 1000;
  justify-content: center;
  box-sizing: border-box;
  width: 100vw;
  /* margin-top: -1%; */
  margin-bottom: 2%;
}
.floating-cv p {
  font-size: clamp(1.5rem, 4vw + 0.5rem, 2rem);
  font-weight: 600;
  color: #011f45;
  margin-bottom: 1%;
}
.floating-cv img {
  width: clamp(280px, 85vw, 500px);
}
.floating-cv a {
  pointer-events: auto; /* リンク部分だけはクリック可能にする */
}




/* --- CV --- */
/* .floating-cv {
  display: flex;
  justify-content: space-between;
  max-width: 750px;
  width: 100%;
  margin: 2% auto;
  padding: 0 10px; 
  box-sizing: border-box;
}
.floating-cv img {
  width: 100%; 
  height: auto;
  display: block;
  margin: 0 auto;
}
.floating-cv a {
  pointer-events: auto; 
}
.floating-cv h2 {
  font-size: clamp(0.8rem, 2.2vw, 1.2rem);
  font-weight: bold;
  color: #908043;
  white-space: nowrap;
}
.flex-btn {
  flex: 1;         
  max-width: 49.5%;  
  text-align: center;
} */



/* スマホ用の設定（画面幅767px以下） */
@media screen and (max-width: 767px) {
  .swiper-slide.is-stacked .overlay-copy {
    /* スマホ用の控えめな波紋に切り替え */
    filter: url(#copy-ripple-sp);
    
    /* 画像自体のサイズをスマホに最適化 */
    width: 30%; /* 画面幅に対して半分くらいに */
    top: 6%;    /* 位置も少し上に調整 */
    left: 7%;
  }
  .light-sweep {
    height: 27vh;
    
  }
}