/* スマホ：冒頭のロゴ(プロジェクトタイトル)をもう少し大きく、
   その分カルーセルのスライドは少し小さくしてバランスを取る。
   メディアクエリを付け忘れるとPC版(min-width:768pxの上書きルール)より
   後読みになり、PC側まで縮んでしまうので必ずmax-width:767pxで絞る */
@media screen and (max-width: 767px) {
  .fv__title--project img {
    max-width: 340px;
    width: 85%;
  }
}

/* FVカルーセル：カード全体のサイズを従来比+20%に拡大 */
.fv .fv__item {
  max-width: 276px; /* 230px * 1.2 */
}
@media screen and (max-width: 767px) {
  .fv .fv__item {
    max-width: 250px; /* スマホはロゴ拡大とのバランスで少し縮小 */
  }
}
@media screen and (min-width: 768px) {
  .fv .fv__item {
    max-width: min(37.5988286969vw, 513.6px); /* min(31.3323572474vw, 428px) * 1.2 */
  }
}

/* FVカルーセル：常に3枚表示にした際、コンテナが画面幅いっぱいのままだと
   スロット幅がカード幅より大きくなり間延びするため、幅を制限する */
@media screen and (min-width: 1280px) {
  /* 4枚しかないため、コンテナに余裕を持たせると4枚目まで入ってしまう。
     「小2枚(239px)+中央大1枚(260px)+間隔24px×2」にちょうど収まる幅に絞る（+20%拡大後） */
  .fv__swiper-content {
    max-width: 972px; /* 810px * 1.2 */
    margin-left: auto;
    margin-right: auto;
  }
  /* カードを一回り小さくして、KV全体の高さを抑え下のコンテンツが見えるように（+20%拡大後） */
  .fv .fv__item {
    max-width: 312px; /* 260px * 1.2 */
  }
  .fv .js-fv-swiper {
    padding: 0;
  }
}

/* チケット画像：枠にきちんと収まるよう拡大。
   また.tamanaction_couse_textがalign-items:flex-endで下揃えになっており、
   左の見出し（対象コース詳細）に対して画像の開始位置が下にずれていたため上揃えに変更 */
@media screen and (min-width: 768px) {
  .tamanaction_couse_text {
    align-items: flex-start;
  }
  .tamanaction_course_img img {
    width: 100%;
    max-width: none;
  }
}
/* スマホでは.tamanaction_course_img自体が幅50%だったため、画像も横100%に */
@media screen and (max-width: 767px) {
  .tamanaction_course_img {
    width: 100%;
  }
}

/* キャンペーン見出しの背景：SVG画像（固定アスペクト比）だと
   幅100%にすると高さも比例して伸びてしまうため、
   CSSグラデーション＋clip-pathに置き換えて幅と高さを独立に制御する。
   .tamanaction_topは.common_inner（max-width制限あり）の中にあるため、
   left:50%+width:100vwで画面幅いっぱいまで突き抜ける */
.tamanaction_top__bg {
  position: absolute;
  /* 上端を斜めにする分だけ上に余分に伸ばしておき、
     斜めにへこんだ部分がセクションの外に出ないようにして隙間を防ぐ */
  top: -30px;
  left: 50%;
  right: auto;
  bottom: 0;
  width: 100vw;
  height: calc(100% + 30px);
  transform: translateX(-50%);
  z-index: -1;
  background: linear-gradient(180deg, #5ba7d9 0%, #338bc7 30%, #bd41a1 75%, #e25496 100%);
  clip-path: polygon(0 0, 100% 5%, 100% 96%, 0 100%);
}
.tamanaction_top__bg picture,
.tamanaction_top__bg img {
  display: none;
}

/* .tamanaction_top の margin-bottom が200px(!important)あり、
   画像背景時代の名残でコンテンツに対して間隔が大きすぎるため縮める */
.tamanaction_top {
  margin-bottom: 30px !important;
}
@media screen and (min-width: 768px) {
  .tamanaction_top {
    margin-bottom: 40px !important;
  }
}

/* PCのみ、KVを画面いっぱいの高さにして、次のセクション(青いキャンペーンエリア)が
   スクロールしないと見えないようにする */
@media screen and (min-width: 768px) {
  .fv {
    height: 100vh;
    min-height: 0;
    padding-bottom: 0;
  }
  .fv::before {
    top: 0;
    bottom: 0;
    height: auto;
  }
  .fv__inner {
    height: 100%;
  }
}
/* スマホもKVが100vh固定で高さを取りすぎて次のセクションが見えないため、
   コンテンツに応じた高さにして少し次のセクションが見えるようにする */
@media screen and (max-width: 767px) {
  .fv {
    height: auto;
    min-height: 0;
    padding-bottom: 30px;
  }
  .fv::before {
    top: 0;
    bottom: 0;
    height: auto;
  }
  .fv__inner {
    height: auto;
  }
}

/* .facility の波形装飾：background-size:coverだと波の形が大きく切り取られて
   ほぼ見えなくなっていたため、100% 100%で波形全体が必ず見えるようにする。
   前後は.bg__image（クリーム色のテクスチャ）なので、白（facility自身の色）の
   波がそこに染み出すイメージにする。下側（teiju側）はもっと大きく見せる */
.facility::before,
.facility::after {
  background-size: 100% 100% !important;
}
@media screen and (min-width: 768px) {
  .facility::before,
  .facility::after {
    height: min(28vw, 260px);
  }
  .facility::before {
    /* 上に伸ばしすぎると前セクションの「もっと見る」ボタンに重なるため、
       上方向はほぼ元の位置のまま、高さ拡大分は下（facility側）に伸ばす */
    top: min(-10.2489019034vw, -90px);
  }
  .facility::after {
    bottom: -160px;
  }
}

/* .bg__image::before（クリーム色テクスチャの上端マスク）：
   PC版はmask-sizeの指定漏れでmask画像が原寸のまま適用され、
   ほとんど何も見えず前セクション(.tamanaction)との間に隙間が空いていたため追加 */
@media screen and (min-width: 768px) {
  .bg__image::before {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* .bg__image::before は .bg__image 本体より上に(top:負の値で)ずらして重ねているうえ、
   本体は background-size:auto（原寸タイル）なのに::before側だけcoverで
   縮小表示していたため、テクスチャの拡大率も位置も合っていなかった。
   サイズをautoに揃え、ずらした分だけbackground-position-yを下げて
   本体側と同じ位置のテクスチャが繋がるようにする。
   ※ top: min(-5.12vw, -70px) は画面が広いほど負に大きくなるため、
     相殺する側は max(5.12vw, 70px) が正しい（min/maxの符号が反転する） */
@media screen and (min-width: 768px) {
  .bg__image::before {
    background-size: auto;
    background-position-x: center;
    /* さらに、PC版は継承元の transform:translateY(-50%) が
       topの負値(-max(5.12vw,70px))とheight(min(13.18vw,180px))の
       半分とズレていて、波の下端と.bg__image本体の間に地の色(#fff8fc)の
       帯が挟まって見えていた。ズレがちょうど0になるtranslateYを計算し直す
       （+6pxぶん.bg__image本体側に食い込ませ、隙間なく重ねる。
       マイナスにすると逆に隙間が開いたまま残るので符号に注意） */
    /* 継承元の scaleX(-1) は::beforeのテクスチャを左右反転させていて、
       .bg__image本体側（反転なし）とは横方向の絵柄が鏡像になり、
       縦位置を合わせても継ぎ目の模様がズレて見えていた。反転をやめる */
    transform: translateY(calc(max(5.1244509517vw, 70px) - min(13.17715959vw, 180px) + 6px));
    /* background-position-yは0のまま(=このboxの上端がそのまま画像のtop)にする。
       画像(background_color2.webp)は5000px丈で、上端と下端の絵柄がつながる
       ようなタイル画像ではないため、ずらす量を大きくして「継ぎ目の行を0に近づける」
       ようにすると、逆にbackground-repeatが画像の反対側の端(下端付近)まで
       ラップしてしまい、色味が全く違う場所を持ってきてしまっていた。
       0のままにしておけば常に画像の先頭(0〜height px)だけを使うので、
       .bg__image本体が表示する先頭付近の絵柄と大きくは変わらず、
       継ぎ目が目立ちにくい */
    background-position-y: 0;
  }
}
@media screen and (max-width: 767px) {
  .bg__image::before {
    background-size: auto;
    background-position-x: center;
    /* PCと同じ理由でbackground-position-yも0のままにする */
    background-position-y: 0;
    /* PCと同じ理由で左右反転をやめる（translateYの縦位置はそのまま維持） */
    transform: translateY(-50%);
  }
}

/* 「対象コース詳細」バッジ下の余白(20px)が「SCHEDULE」バッジ下の余白(15px)と
   揃っていなかったため、SCHEDULE側(15px)に合わせたうえで、
   指示により+10px、さらに+5px追加(合計30px) */
.tamanaction_title_lead {
  margin-bottom: 30px;
}

/* KVカルーセルの再生モーダル：継承元CSSは横長16:9(800×450固定)前提だが、
   実際はYouTubeショート(縦型9:16)を流すため、縦長サイズに調整する */
.js-video-modal .modal__content {
  max-width: 360px;
}
.js-video-modal .modal__video iframe,
.js-video-modal .modal__video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
}

/* これまでのキャンペーン モーダル：対象コース詳細(店舗一覧含む)を流し込むと
   縦に長くなり画面からはみ出すため、モーダル自体を縦スクロールできるようにする。
   また継承元の .modal__body{text-align:center} だと店舗説明文なども中央寄せに
   なってしまうため、左寄せに戻す */
.js-history-modal .modal__content {
  max-height: 85vh;
  overflow-y: auto;
}
.js-history-modal .modal__body {
  text-align: left;
}
.js-history-modal .tamanaction_title_lead {
  margin-left: 0;
}
/* .tamanaction_couse_shop_wrap は本来もっと横幅の広いカラム(本編の対象コース詳細)
   前提でデザインされており、店舗名オーバーレイの高さや住所のinline-block margin-bottomが
   「1行に収まる」ことを前提に組まれている。モーダル内は横幅が狭い2カラムグリッドになって
   しまい、店舗名が3行に折り返して画像上端からはみ出して見切れたり(玉名市の店舗など)、
   住所の郵便番号が単独行になってmargin-bottomの余白がそのまま隙間として見えてしまう
   不具合が出ていた。モーダル内だけは本編と同じ1カラムに戻して幅を確保する */
@media screen and (min-width: 768px) {
  .js-history-modal .tamanaction_couse_shop_wrap {
    grid-template-columns: 1fr;
  }
}

/* 「玉名圏域人図鑑」のカルーセル：KVカルーセルと同じ動画・同じUI(白枠カード+
   白枠キャプションのページネーション)で表示する。既存の.fv配下スタイルは
   ヒーローセクション専用の.fvクラス(高さ100vh等)に依存しているため、
   ここでは.about__list配下に同じ見た目のスタイルを複製する */
.about__list .item__video-thumb {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 30px;
}
@media screen and (min-width: 768px) {
  .about__list .item__video-thumb {
    border-radius: min(2.196193265vw, 30px);
  }
}
.about__list .swiper-wrapper {
  position: relative;
}
@media screen and (min-width: 1280px) {
  .about__list .swiper-wrapper {
    align-items: flex-end;
  }
}
.about__list .fv__item {
  position: relative;
  max-width: 230px;
  width: 73%;
  transform: scale(0.75);
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.8;
}
@media screen and (min-width: 768px) {
  .about__list .fv__item {
    max-width: min(31.3323572474vw, 428px);
    width: 100%;
  }
}
@media screen and (min-width: 1280px) {
  .about__list .fv__item {
    transform: scale(0.92);
    transform-origin: center bottom;
    opacity: 0.9;
  }
}
.about__list .swiper-slide-active,
.about__list .swiper-slide-duplicate-active {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}
.about__list .swiper-slide-active::before,
.about__list .swiper-slide-duplicate-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.4);
  mix-blend-mode: multiply;
  transform: translate(4px, 7px);
}
@media screen and (min-width: 768px) {
  .about__list .swiper-slide-active::before,
  .about__list .swiper-slide-duplicate-active::before {
    inset: min(1.4641288433vw, 20px) min(2.3426061493vw, 32px) min(0.7320644217vw, 10px);
  }
}
/* .about__inner が幅85%(モバイル)で左右に余白を取っているため、その内側にある
   カルーセルは実質かなり狭い幅の中で左右のスライドを見切れさせる形になり、
   KV(.fv__inner は幅100%で余白が無い)に比べて左右のスライドがほぼ見えなかった。
   TOPと同じく、カルーセル部分だけ画面幅いっぱいに広げて余白の影響を受けないようにする */
.about__list .js-people-swiper {
  box-sizing: border-box;
  padding: 24px 0;
}
/* 画面幅いっぱいに広げるのはSPだけ。min-width指定を付け忘れてPCにも適用され、
   PC側の3枚センター表示(.fv__swiper-content側で幅を絞る設計)が崩れていた */
@media screen and (max-width: 767px) {
  .about__list .js-people-swiper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
@media screen and (min-width: 768px) {
  .about__list .js-people-swiper {
    padding: 0;
  }
}
.about__list .people-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  .about__list .people-pagination {
    margin-top: min(1.756954612vw, 24px);
    gap: min(0.7320644217vw, 10px) min(1.0248901903vw, 14px);
  }
}
.about__list .people-pagination__bullet {
  display: inline-block;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: #745747;
  margin: 0;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
@media screen and (min-width: 768px) {
  .about__list .people-pagination__bullet {
    padding: min(0.439238653vw, 6px) min(1.317715959vw, 18px);
    font-size: min(1.0248901903vw, 14px);
  }
}
.about__list .people-pagination__bullet.is-active {
  box-shadow: 0 0 0 2px #da0148;
}
/* 「第1回カップル体験コース」の見出し(.tamanction_course_name)は、
   本文用の"Noto Sans JP"を継承していて他の丸ゴシック系見出しと字体が違って見えるため、
   フォントを統一する(対象コース詳細側・モーダル内のコピーにも同じ効果が及ぶ) */
.tamanction_course_name {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic Std", sans-serif;
}

/* SCHEDULEセクションの見出し直後に「第1回カップル体験コース」を横100%・中央寄せで追加。
   .tamanction_course_nameは元々左寄せ+flexの行内配置用なので、この場所専用に中央寄せへ上書き。
   周りが数字中心の細かい情報ばかりで埋もれて見えるため、少し大きめ・太字にして目立たせる */
.tamanaction_schedule .schedule_course_name {
  width: 100%;
  justify-content: center;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 800;
}
@media screen and (min-width: 768px) {
  .tamanaction_schedule .schedule_course_name {
    margin-bottom: min(1.0980966325vw, 15px);
    font-size: min(1.9738574041vw, 27px);
  }
}

/* PRESENT欄：画像ではなくテキストで組む。囲み枠・背景色は無し、
   右側(PC)/下側(SP)にチケット画像を添える */
.tamanaction_present_ticket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.tamanaction_present_ticket__text {
  font-family: "Noto Sans JP";
  text-align: center;
}
.tamanaction_present_ticket__label {
  margin: 0;
  color: #172934;
  font-size: 20px;
  font-weight: 800;
}
.tamanaction_present_ticket__sub {
  margin: 4px 0 0;
  color: #172934;
  font-size: 16px;
  font-weight: 700;
}
.tamanaction_present_ticket__sub-note {
  font-size: 12px;
  font-weight: 500;
}
.tamanaction_present_ticket__amount {
  margin: 8px 0 0;
  color: #da0148;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.tamanaction_present_ticket__note {
  margin: 8px 0 0;
  color: #172934;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01rem;
}
.tamanaction_present_ticket__image {
  width: 88%;
  max-width: 352px;
  height: auto;
}
@media screen and (min-width: 768px) {
  .tamanaction_present_ticket {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
  }
  .tamanaction_present_ticket__text {
    text-align: left;
  }
  .tamanaction_present_ticket__label {
    font-size: min(1.756954612vw, 24px);
  }
  .tamanaction_present_ticket__sub {
    font-size: min(1.317715959vw, 18px);
  }
  .tamanaction_present_ticket__sub-note {
    font-size: min(0.9516837482vw, 13px);
  }
  .tamanaction_present_ticket__amount {
    font-size: min(3.5138387485vw, 48px);
  }
  .tamanaction_present_ticket__note {
    font-size: min(1.756954612vw, 24px);
  }
  .tamanaction_present_ticket__image {
    width: min(26.5739385066vw, 242px);
    max-width: none;
  }
}

/* 「これまでのキャンペーン」を非表示にしたことで、直前の.tamanaction_ouboの
   すぐ下に.bg__imageの波の装飾(::beforeが上に最大98px程度食い込む)が来るようになり、
   LINEで応募するボタンに重なって隠れてしまっていた。
   ここで余白を確保して回避している。
   ※「これまでのキャンペーン」を再表示する際は、このルールも不要になるので削除すること */
.tamanaction {
  /* .bg__image::after(オレンジの装飾)がSPで-125px食い込むため、それより
     十分大きい余白を確保する(以前は30pxで不足していてLINEボタンに重なっていた) */
  margin-bottom: 150px;
}
@media screen and (min-width: 768px) {
  .tamanaction {
    /* PC側も::afterの食い込みが最大-130pxのため、120pxでは僅かに足りていなかった */
    margin-bottom: 150px;
  }
}

/* PRESENT欄：バッジ(PRESENT)からチケットまでの上の間隔(15px)と、
   チケットから次のSCHEDULEバッジまでの下の間隔(.tamanaction_present自体の
   margin-bottomにより20px/45px)がズレていて不揃いに見えていたため、
   上側もチケット下と同じ間隔に揃える */
.tamanaction_present .tamanaction_text_label {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .tamanaction_present .tamanaction_text_label {
    margin-bottom: 45px;
  }
}

/* TOPへ戻るボタンをもう少し下に */
#back-to-top {
  bottom: 190px;
}
@media screen and (min-width: 768px) {
  #back-to-top {
    bottom: min(10.9809663255vw, 150px);
  }
}

/* 割引チケット引き換え窓口：もっと目立たせるため、右側に「チケット引換方法」
   動画のサムネイルを追加。押下で既存の動画モーダル(.js-video-modal)を再生する。
   親の.tamanaction_schefule_list li は縦積み(flex-direction:column)前提だが、
   ここだけは情報+サムネイルの並びにするため上書きする。
   スマホは横並びだとサムネイルだけで画面幅を超えてしまうため縦積みにし、
   PC(768px以上)だけ情報(左)+サムネイル(右)の横並びにする */
.tamanaction_exchange {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 16px;
  width: 100%;
  /* すぐ上の「応募期間」「チケット有効期限」行との間隔を少しあける */
  margin-top: 10px;
}
@media screen and (min-width: 768px) {
  .tamanaction_exchange {
    flex-direction: row !important;
    /* 動画サムネイルが大きくなり中央揃えだと上端がズレて見えるため、
       .tamanaction_couse_text(対象コース詳細側)と同じく上揃えにする */
    align-items: flex-start;
    justify-content: space-between;
  }
}
.tamanaction_exchange__info {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .tamanaction_exchange__info {
    width: auto;
    flex: 1;
  }
}
/* 下にある「カップル体験コース詳細」(.tamanction_course_name)と同じCSSにして
   見出しとしてのトーンを揃える(囲み無し、色文字のみ)。
   継承元の.tamanaction_schefule_list li .type(枠線あり)より詳細度を上げて
   確実に上書きする必要があるため、liも含めたセレクタにしている */
.tamanaction_schefule_list li.tamanaction_exchange .type {
  display: block;
  border: none;
  padding: 0;
  background: none;
  font-size: 16px;
  font-weight: 700;
  color: #da0148;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}
@media screen and (min-width: 768px) {
  .tamanaction_schefule_list li.tamanaction_exchange .type {
    font-size: min(1.6105417277vw, 22px);
    margin-bottom: min(0.878477306vw, 12px);
  }
}
.tamanaction_exchange__video {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  cursor: pointer;
  text-align: center;
}
.tamanaction_exchange__video img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  /* 動画サムネイルだと分かりやすいよう、バッジと同系色の縁取りで目立たせる */
  border: 3px solid #da0148;
}
.tamanaction_exchange__video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(23, 41, 52, 0.55);
}
.tamanaction_exchange__video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 3px);
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
}
.tamanaction_exchange__caption {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #172934;
}
@media screen and (min-width: 768px) {
  .tamanaction_exchange__video {
    width: min(23.4260615004vw, 320px);
  }
  .tamanaction_exchange__caption {
    font-size: min(1.0248901903vw, 14px);
  }
}

/* 「応募期間」「チケット有効期限」の行を中央寄せに(継承元は左寄せ) */
@media screen and (min-width: 768px) {
  .tamanaction_schefule_list {
    justify-content: center;
  }
}