@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; /* カプセル型を維持 */
}



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

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

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

/* --- スワイプナビ --- */
/* 指アイコンの初期位置とスタイル */
.swipe-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;         /* スライダー画像より手前に */
  pointer-events: none; /* アイコン自体はクリック不可にする */
  opacity: 0;           /* 最初は隠しておく */
  display: flex;
  justify-content: center;
  align-items: center;
}

.hand {
  font-size: 60px; /* アイコンの大きさ */
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.2));
}

/* JavaScriptで付与されるアニメーション用クラス */
.is-animating {
  animation: swipe-fade-move 1.5s ease-in-out forwards;
}

/* 右から左へスワイプする動き */
@keyframes swipe-fade-move {
  0% {
    opacity: 0;
    transform: translate(100%, -50%); /* 右側に配置 */
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    transform: translate(-120%, -50%); /* 左側へ移動 */
  }
  100% {
    opacity: 0;
    transform: translate(-120%, -50%);
  }
}


/* --- CV --- */
.floating-cv {
  text-align: center;
  /* position: fixed;
  bottom: 2%;
  left: 0; */
  z-index: 1000;
  justify-content: center;
  box-sizing: border-box;
  width: 100vw;
}
.floating-cv img {
  width: clamp(280px, 85vw, 500px);
}
.floating-cv a {
  pointer-events: auto; /* リンク部分だけはクリック可能にする */
}
.floating-cv h2 {
  font-size: 1.2rem;
  color: #a1935f;
}