/*
Theme Name: 宮古島クリアマリン LP
Theme URI: https://example.com
Author: helloworld-inc.
Author URI: https://example.com
Description: 宮古島クリアマリン(クリアSUP・クリアカヤック・トーイングチューブ・シュノーケリング 1時間遊び放題)のランディングページ専用テーマ。Figmaデザインを忠実にコーディング。Bootstrap 5.3使用。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: miyako-clearmarine
*/
:root{
  --main:#38D1FF;
  --main-dark:#1EB8E8;
  --sub:#0095EB;
  --sub-dark:#0072B8;
  --accent:#DC5658;
  --accent-dark:#C13E40;
  --accent-light:#E16F71; /* CTAボタン用グラデーション明部（黒文字コントラスト確保） */
  --text:#101718;
  --base:#F4FCFF;      /* ベースカラー 70%：明るいシアン寄りの白 */
  --white:#FFFFFF;
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:32px; --sp-5:64px;
  --radius-card:20px;
  --radius-pill:999px;
  --shadow-soft:0 2px 8px rgba(0,0,0,0.08);
}
* { box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Noto Sans JP", sans-serif;
  color:var(--text);
  background:var(--base);
  font-size:16px;
  line-height:1.6;
  letter-spacing:0;
}
h1,h2,h3,h4{ font-family:"Noto Sans JP", sans-serif; font-weight:700; color:var(--text); }
h1{ font-size:clamp(2rem,5vw,3.25rem); font-weight:900; line-height:1.35; }
h2{ font-size:clamp(1.5rem,3.6vw,2.25rem); line-height:1.45; }
h3{ font-size:clamp(1.15rem,2.4vw,1.4rem); }
p{ margin-bottom:0; }
.section-pad{ padding-top:var(--sp-5); padding-bottom:var(--sp-5); }
@media (max-width:767px){ .section-pad{ padding-top:var(--sp-4); padding-bottom:var(--sp-4);} }
/* =========================================================
   FV以外のコンテンツ幅を、Bootstrapデフォルトの.containerより
   約15%狭める（対象: FV以外の各セクション内の .container のみ。
   ナビゲーションバーの.containerとFVは対象外）
   Bootstrap既定値 × 0.85
   sm:540→459 / md:720→612 / lg:960→816 / xl:1140→969 / xxl:1320→1122
========================================================= */
#usp .container,
#activities .container,
#freeplay .container,
#gallery .container,
#safety .container,
#flow .container,
#pricing .container,
#testimonials .container,
#faq .container{
  max-width:459px;
}
/* 実機スマホ幅（〜767px）は459pxの上限が効かないことが多いため、
   画面幅に対する割合(85%)で狭める。767px超はこれまで通りpx指定。 */
@media (max-width:767px){
  #usp .container,#activities .container,#freeplay .container,#gallery .container,
  #safety .container,#flow .container,#pricing .container,#testimonials .container,#faq .container{
    max-width:85%;
  }
}
@media (min-width:768px){
  #usp .container,#activities .container,#freeplay .container,#gallery .container,
  #safety .container,#flow .container,#pricing .container,#testimonials .container,#faq .container{
    max-width:612px;
  }
}
@media (min-width:992px){
  #usp .container,#activities .container,#freeplay .container,#gallery .container,
  #safety .container,#flow .container,#pricing .container,#testimonials .container,#faq .container{
    max-width:816px;
  }
}
@media (min-width:1200px){
  #usp .container,#activities .container,#freeplay .container,#gallery .container,
  #safety .container,#flow .container,#pricing .container,#testimonials .container,#faq .container{
    max-width:969px;
  }
}
@media (min-width:1400px){
  #usp .container,#activities .container,#freeplay .container,#gallery .container,
  #safety .container,#flow .container,#pricing .container,#testimonials .container,#faq .container{
    max-width:1122px;
  }
}
.eyebrow{
  display:inline-block;
  color:var(--sub-dark);
  background:rgba(56,209,255,0.14);
  padding:6px 18px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.04em;
  margin-bottom:var(--sp-3);
}
.section-title{ text-align:center; margin-bottom:var(--sp-5); }
.section-title p.lead-sub{ color:#3A4547; font-size:1rem; margin-top:var(--sp-2); }
/* ===== ボタン ===== */
.btn-cta{
  background:linear-gradient(135deg,var(--accent) 0%, var(--accent-light) 100%);
  color:#FFFFFF;
  border:none;
  border-radius:var(--radius-pill);
  padding:16px 40px;
  font-weight:700;
  font-size:1.05rem;
  box-shadow:0 6px 18px rgba(220,86,88,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{ color:#FFFFFF; transform:translateY(-2px); box-shadow:0 10px 24px rgba(220,86,88,0.45); }
.btn-cta-sm{ padding:10px 26px; font-size:0.95rem; }
.btn-outline-brand{
  border:2px solid rgba(16,23,24,0.55);
  color:var(--text);
  border-radius:var(--radius-pill);
  padding:14px 36px;
  font-weight:700;
  background:rgba(255,255,255,0.4);
}
.btn-outline-brand:hover{ background:var(--text); color:var(--white); border-color:var(--text); }
/* ===== ナビ ===== */
.navbar-brand-custom{ font-weight:900; color:var(--text)!important; font-size:1.15rem; }
.navbar-brand-custom .bi{ color:var(--sub); margin-right:6px; }
.navbar{ box-shadow:var(--shadow-soft); background:rgba(255,255,255,0.92)!important; backdrop-filter:blur(6px); }
.nav-link-custom{ font-weight:500; color:var(--text)!important; }

/* ===== ヘッダー追従：PCのみ ===== */
@media screen and (min-width: 768px) {
  .navbar {
    position: sticky;
    top: 0;
    z-index: 1050;
  }
}

/* スマホは追従しない */
@media screen and (max-width: 767px) {
  .navbar {
    position: static;
  }
}

/* ===== 画像プレースホルダー共通 ===== */
.img-placeholder{
  border-radius:var(--radius-card);
  background:linear-gradient(135deg, rgba(56,209,255,0.18), rgba(0,149,235,0.18));
  border:1.5px dashed var(--sub);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--sub-dark);
  text-align:center;
  padding:var(--sp-4);
  min-height:220px;
}
.img-placeholder .bi{ font-size:2.4rem; margin-bottom:var(--sp-2); }
.img-placeholder small{ display:block; margin-top:4px; color:#3A4547; }
.activity-photo{
  width:100%; height:220px; object-fit:cover;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
}
.gallery-photo{
  width:100%; height:180px; object-fit:cover;
  border-radius:var(--radius-card);
}
/* ===== USP ===== */
.usp-card{
  background:var(--white);
  border-radius:10px;
  padding:var(--sp-4);
  box-shadow:var(--shadow-soft);
  height:100%;
  border:2px solid var(--main);
  transition:transform .2s ease;
}
.usp-card:hover{ transform:translateY(-4px); }
.usp-icon{
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--main),var(--sub));
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  margin-bottom:var(--sp-3);
}
.usp-icon i{
  color: #fff;
  font-size: 28px;
}
.usp-number{
  position:absolute; top:-14px; left:16px;
  background:#38D1FF; color:#FFFFFF;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.9rem;
  box-shadow:var(--shadow-soft);
}
/* ===== アクティビティ詳細 ===== */
.activity-row{ align-items:center; }
.activity-tag{
  display:inline-block; background:var(--sub); color:#FFFFFF;
  border-radius:var(--radius-pill); padding:4px 16px; font-size:0.8rem; font-weight:700;
  margin-bottom:var(--sp-2);
}
/* ===== 1時間遊び放題の楽しみ方 / 安心ポイント 共通グリッド ===== */
.two-col-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-4) var(--sp-5);
}
@media (max-width:767px){
  .two-col-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
}
.icon-row-item{ display:flex; gap:var(--sp-3); align-items:flex-start; }
.icon-row-item .icon-circle{
  flex:0 0 56px; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.icon-circle.tone-accent{ background:rgba(220,86,88,0.12); color:var(--accent); }
.icon-circle.tone-sub{ background:rgba(0,149,235,0.12); color:var(--sub-dark); }
/* ===== 撮影ギャラリー ===== */
.gallery-section{
  background:linear-gradient(160deg,var(--sub) 0%, var(--main) 100%);
  color:var(--text);
}
.gallery-section .section-title h2{ color:#FFFFFF; background:none; }
.gallery-section .eyebrow{ color:var(--text); background:rgba(255,255,255,100); }
.gallery-section .lead-sub{ color:rgba(16,23,24,0.75)!important; }
.gallery-item .img-placeholder{ background:rgba(255,255,255,0.25); border-color:rgba(16,23,24,0.35); color:var(--text); min-height:180px; }
.gallery-item .img-placeholder small{ color:rgba(16,23,24,0.7); }
.lead-sub-2 {
	color:#fff;
}
/* ===== ご参加にあたって（条件リスト） ===== */
.fact-list{ list-style:none; padding:0; margin:0 auto; max-width:640px; }
.fact-list li{ display:flex; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px dashed #E0EEF3; }
.fact-list li:last-child{ border-bottom:none; }
.fact-list .bi-check-circle-fill{ color:var(--sub-dark); font-size:1.1rem; }
.fact-list .bi-x-circle-fill{ color:var(--accent); font-size:1.1rem; }
/* ===== お客様の声 ===== */
.voice-card{
  background:var(--white); border-radius:var(--radius-card);
  padding:var(--sp-4); box-shadow:var(--shadow-soft); height:100%;
}
.voice-stars{ color:#FFB400; letter-spacing:2px; }
.voice-avatar{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--main),var(--sub));
  display:flex; align-items:center; justify-content:center; color:var(--text); font-weight:700;
}
.stat-box{ text-align:center; }
.stat-box .num{ font-size:clamp(2rem,4vw,2.75rem); font-weight:900; color:var(--sub-dark); }
/* ===== 料金 ===== */
.price-card{
  background:var(--white); border-radius:var(--radius-card);
  padding:var(--sp-4); box-shadow:var(--shadow-soft); height:100%;
  border:2px solid transparent;
  position:relative;
}
.price-card.recommended{ border-color:var(--accent); }
.price-badge{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:var(--text); padding:6px 20px;
  border-radius:var(--radius-pill); font-weight:700; font-size:0.85rem; white-space:nowrap;
}
.price-amount{ font-size:2.4rem; font-weight:900; color:var(--sub-dark); }
.price-amount span{ font-size:1rem; font-weight:500; color:var(--text); }
.price-list li{ padding:6px 0; border-bottom:1px dashed #E0EEF3; }
.price-list li:last-child{ border-bottom:none; }
.price-list .bi-check-circle-fill{ color:var(--sub-dark); margin-right:8px; }
/* ===== 当日の流れ(縦一列タイムライン・カード仕立て) ===== */
.timeline{
  max-width:920px;
  margin:0 auto;
  background:var(--white);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:var(--sp-5);
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  top:calc(var(--sp-5) + 22px);
  bottom:calc(var(--sp-5) + 22px);
  left:calc(var(--sp-5) + 22px);
  border-left:2px dashed var(--main);
}
.timeline-item{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-4);
  padding-bottom:var(--sp-5);
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-marker{
  flex-shrink:0;
  position:relative;
  z-index:1;
}
.timeline-num{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--main),var(--sub));
  color:#FFFFFF; font-weight:900; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-soft);
}
.timeline-body{ display:flex; align-items:flex-start; flex:1; }
.timeline-content{ padding-top:8px; }
.timeline-content h3{ margin-bottom:4px; font-size:1.15rem; }
.timeline-content p{ font-size:0.95rem; }
@media (max-width:767px){
  .timeline{ padding:var(--sp-4); }
  .timeline::before{
    top:calc(var(--sp-4) + 20px);
    bottom:calc(var(--sp-4) + 20px);
    left:calc(var(--sp-4) + 20px);
  }
  .timeline-num{ width:40px; height:40px; font-size:1rem; }
  .timeline-item{ gap:var(--sp-3); padding-bottom:var(--sp-4); }
  .timeline-content h3{ font-size:1rem; }
}
/* ===== FAQ ===== */
.accordion-button:not(.collapsed){ background:rgba(56,209,255,0.12); color:var(--sub-dark); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 0.2rem rgba(56,209,255,0.25); }
.accordion-item{ border-radius:var(--radius-card)!important; overflow:hidden; margin-bottom:var(--sp-3); border:1px solid #E0EEF3; }
.accordion-button{ font-weight:700; }
/* ===== フッター ===== */
footer{ background:var(--text); color:rgba(255,255,255,0.85); }
footer a{ color:rgba(255,255,255,0.85); text-decoration:none; }
footer a:hover{ color:var(--main); }
footer h5{ color:var(--white); font-size:1rem; }
/* ===== フローティングCTA(モバイル) ===== */
.floating-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:1050;
  background:var(--white); box-shadow:0 -4px 16px rgba(0,0,0,0.12);
  padding:10px 16px; display:none;
}
@media (max-width:767px){
  .floating-cta{
    display:block;
    /* FV表示中は隠しておき、FVをスクロールし終えたら出す */
    transform:translateY(120%);
    transition:transform .25s ease;
    pointer-events:none;
  }
  .floating-cta.is-visible{
    transform:translateY(0);
    pointer-events:auto;
  }
  body{ padding-bottom:76px; }
}
section[id]{ scroll-margin-top:76px; }
/* ===== 汎用ページ(page.php / single.php / 404.php)用 ===== */
.generic-page{ padding-top:calc(var(--sp-5) + 40px); padding-bottom:var(--sp-5); }
.generic-page .entry-title{ margin-bottom:var(--sp-4); }
.generic-page .entry-meta{ color:#3A4547; font-size:0.9rem; margin-bottom:var(--sp-4); }
.generic-page .entry-content{ line-height:1.9; }
.generic-page .entry-content img{ max-width:100%; height:auto; border-radius:var(--radius-card); }
.blog-card{ background:var(--white); border-radius:var(--radius-card); box-shadow:var(--shadow-soft); overflow:hidden; height:100%; }
.blog-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.blog-card .blog-card-body{ padding:var(--sp-4); }
.error-404-wrap{ text-align:center; padding:calc(var(--sp-5) + 60px) var(--sp-3); }
.error-404-wrap .code{ font-size:clamp(3.5rem,10vw,7rem); font-weight:900; color:var(--main); line-height:1; }
/* =========================================================
   宮古島 FV
========================================================= */
.marine-fv {
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.marine-fv *,
.marine-fv *::before,
.marine-fv *::after {
  box-sizing: border-box;
}
/* =========================================================
   FV本体
========================================================= */
.marine-fv__inner {
  position: relative;
  /*
    元デザイン
    1440 × 700px
    ※画面いっぱいに広げるため max-width は付けず、
    aspect-ratio と vw単位のサイズ指定で常に画面幅に追従させる。
    中の要素は全て position:absolute で配置しているため、
    grid-template-rows（固定700px相当）は使わない。
    ※固定px値のgrid行を残していると、1440px以外の画面幅で
    aspect-ratioと競合してコンテナの高さが700px相当に
    引っ張られてしまい、写真の下に大きな空白ができるバグの原因になる。
  */
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 700;
  margin: 0 auto;
 background:
  url("/wp-content/uploads/2026/08/fv_bg.jpg")
  top center / 100% auto
  no-repeat;
  isolation: isolate;
}
/* =========================================================
   FV下部の白背景
========================================================= */
.marine-fv__inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 21.2%;
  background: #fff;
}
/* =========================================================
   キャッチコピー
========================================================= */
.marine-fv__copy {
  position: absolute;
  z-index: 5;
  /* 固定ナビ(高さ約76px)の下に来るよう、その分オフセット */
  top: calc(4.86vw + 76px);
  left: 1.67vw;
  color: #fff;
  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-weight: 400;
  letter-spacing: 0.07em;
}
.marine-fv__copy-line {
  position: relative;
  width: max-content;
  padding-bottom: 0.76vw;
  margin-bottom: 0.76vw;
  font-size: 3.26vw;
  line-height: 1.25;
}
/* 下線（テキストの実際の幅にそのまま揃う） */
.marine-fv__copy-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.95);
}
/* 宮古島の */
.marine-fv__copy-line--01 {
}
/* 透明な海を、 */
.marine-fv__copy-line--02 {
  margin-left: 0;
}
/* まるごと。 */
.marine-fv__copy-line--03 {
  margin-left: 0;
}
/* =========================================================
   USPポイント
========================================================= */
.marine-fv__points {
  position: absolute;
  z-index: 6;
  left: 4.1vw;
  top: 28.26vw;
  display: grid;
  grid-template-columns: 16.11vw 16.11vw 16.11vw;
  column-gap: 1.25vw;
}
/* 共通 */
.marine-fv__point {
  display: grid;
  grid-template-columns: 1.39vw 1fr;
  align-items: center;
  gap: 0.56vw;
  height: 4.44vw;
  padding: 0 1.39vw;
  border-radius: 9999px;
  color: #fff;
  font-family:
    "ads-route7",
    "Noto Sans JP",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  font-size: 1.39vw;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.12em;
  white-space: nowrap;
  box-shadow:
    0 4px 8px
    rgba(0, 0, 0, 0.08);
}
/* アイコン（文字サイズと揃える） */
.marine-fv__point-icon {
  display: block;
  width: 1.39vw;
  height: 1.39vw;
  object-fit: contain;
}
/* 色 */
.marine-fv__point--red {
  background: #e9605e;
}
.marine-fv__point--yellow {
  background: #f3d500;
}
.marine-fv__point--blue {
  background: #2797cb;
}
/* =========================================================
   アクティビティ
   ※ PC/タブレット(768px以上)：4枚連結の1枚画像＋ラベル。
   　 SP(767px以下)：写真+キャプションの4ブロック、自動スライド。
   　 画面幅で表示を出し分ける（両方とも同じ position:absolute の
   　 左/下/幅を使い、写真下の同じ位置に表示される）。
========================================================= */
.marine-fv__activities-strip {
  position: absolute;
  z-index: 7;
  left: 2.36vw;
  bottom: 1.94vw;
  width: 74.31vw;
}
.marine-fv__activities-strip img {
  display: block;
  width: 100%;
  height: auto;
}
.marine-fv__activity-labels {
  position: absolute;
  inset: 0;
}
.marine-fv__activity-label {
  position: absolute;
  bottom: 6%;
  transform: translateX(-50%);
  display: block;
  width: max-content;
  text-align: center;
  background: #fff;
  color: #218acb;
  font-family:
    "ads-route7",
    "Noto Sans JP",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.7vw;
  line-height: 1.3;
  padding: 0.3vw 0.7vw;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* leftは各写真の中央位置。translateX(-50%)で中心を基準に配置し、
   widthはmax-content（テキスト幅に自動フィット）+max-widthで安全に収める */
.marine-fv__activity-label:nth-child(1) {
  left: 12.5%;
  max-width: 20%;
}
.marine-fv__activity-label:nth-child(2) {
  left: 37.5%;
  max-width: 20%;
}
.marine-fv__activity-label:nth-child(3) {
  left: 62.5%;
  max-width: 24%;
}
.marine-fv__activity-label:nth-child(4) {
  left: 87.5%;
  max-width: 20%;
}
/* SPでは連結画像を隠し、スライダー版を表示する */
@media (max-width: 767px) {
  .marine-fv__activities-strip {
    display: none;
  }
}
/* PC/タブレットではスライダー版を隠し、連結画像を表示する */
.marine-fv__activities-slider {
  display: none;
}
/* =========================================================
   アクティビティカード（SP専用スライダー内のカード）
========================================================= */
.marine-fv__activities-slider {
  position: absolute;
  z-index: 7;
  left: 2.36vw;
  bottom: 1.94vw;
  width: 74.31vw;
  overflow: hidden;
}
.marine-fv__activities-track {
  display: flex;
  align-items: stretch;
  gap: 1.25vw;
  width: 100%;
}
.marine-fv__activity-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
/* ループ用の複製カードは、スライドしないPC/タブレットでは不要 */
.marine-fv__activity-card[aria-hidden="true"] {
  display: none;
}
.marine-fv__activity-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.6vw;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.marine-fv__activity-caption {
  position: absolute;
  left: 50%;
  bottom: 0.6vw;
  transform: translateX(-50%);
  display: block;
  max-width: calc(100% - 1vw);
  background: #fff;
  color: #218acb;
  text-align: center;
  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  font-weight: 700;
  font-size: 0.9vw;
  line-height: 1.3;
  padding: 0.3vw 0.7vw;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 「トーイングチューブ」だけ文字数が多いので、文字サイズと余白を
   両方絞ってカードの幅に収める */
.marine-fv__activity-caption--towing {
  font-size: 0.62vw;
  padding: 0.3vw 0.4vw;
}
/* =========================================================
   料金
========================================================= */
.marine-fv__price {
  position: absolute;
  z-index: 8;
  right: 4.58vw;
  bottom: 1.88vw;
  color: #2797c7;
  font-family:
    "ads-route7",
    "Noto Sans JP",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
}
/* お一人様 */
.marine-fv__price-label {
  margin-left: 0.21vw;
  margin-bottom: 0.07vw;
  font-size: 1.67vw;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
/* 金額 */
.marine-fv__price-main {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  line-height: 1;
}
/* 8,000 */
.marine-fv__price-number {
  font-size: 5.69vw;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.01em;
}
/* 円 */
.marine-fv__price-yen {
  padding-bottom: 0.56vw;
  margin-left: 0.42vw;
  font-size: 2.22vw;
  font-weight: 700;
}
/* =========================================================
   SP
========================================================= */
@media screen and (max-width: 767px) {
  .marine-fv {
    background: #fff;
  }
  .marine-fv__inner {
    display: grid;
    grid-template-columns:
      16px
      repeat(6, 1fr)
      16px;
    /*
      1行目(画像エリア)は SP専用画像(375×389)の
      縦横比に合わせて vw で可変。
      背景の background-size と必ず同じ値にすること。
    */
    grid-template-rows:
      118.67vw
      auto
      auto
      auto;
    width: 100%;
    min-height: auto;
    aspect-ratio: auto;
    /* SP専用背景（添付写真） */
    background-image: url("/wp-content/uploads/2026/08/fv_sp.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 118.67vw;
  }
  .marine-fv__inner::after {
    display: none;
  }
  /* =====================================================
     コピー
  ===================================================== */
  .marine-fv__copy {
    position: absolute;
    /* 固定ナビ(高さ約76px)の下に来るよう、その分オフセット */
    top: 84px;
    left: 18px;
  }
  .marine-fv__copy-line {
    padding-bottom: 6px;
    margin-bottom: 7px;
    font-size: 28px;
    line-height: 1.35;
    text-shadow:
      0 1px 8px
      rgba(0, 60, 90, 0.18);
  }
  .marine-fv__copy-line--01 {
    margin-left: 0;
  }
  .marine-fv__copy-line--02 {
    margin-left: 0;
  }
  .marine-fv__copy-line--03 {
    margin-left: 0;
  }
  /* =====================================================
     USP
  ===================================================== */
  .marine-fv__points {
    /*
      添付デザインに合わせ、写真の上（下寄り）に重ねて配置。
      実測値: 写真高さ118.67vwのうち、上から99.47vwの位置。
      grid-row/grid-columnは使わず、.marine-fv__inner基準の絶対配置にする
    */
    position: absolute;
    z-index: 10;
    top: 99.47vw;
    left: 16px;
    right: 16px;
    display: grid;
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: auto;
  }
  .marine-fv__point {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 46px;
    padding: 0 6px;
    font-size: 14px;
    letter-spacing: 0.02em;
  }
  .marine-fv__point-icon {
    width: 10px;
    height: 10px;
  }
  /* =====================================================
     アクティビティ（SP専用・自動スライド）
     ここだけ、写真ブロックを横に自動スクロールさせる
  ===================================================== */
  .marine-fv__activities-slider {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: auto;
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: 10px;
    margin-left: -16px;
    margin-right: -16px;
    overflow: hidden;
  }
  .marine-fv__activities-track {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: max-content;
    padding-left: 16px;
    animation: mcm-fv-activities-slide 16s linear infinite;
  }
  .marine-fv__activity-card {
    position: relative;
    flex: 0 0 auto;
    width: 110px;
  }
  /* ループ用の複製カードを、SPでは再度表示する */
  .marine-fv__activity-card[aria-hidden="true"] {
    display: block;
  }
  .marine-fv__activity-card img {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  }
  /* キャプションは写真の上に重ねて配置 */
  .marine-fv__activity-caption {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    display: block;
    max-width: calc(100% - 12px);
    background: #fff;
    color: #218acb;
    font-family:
      "ads-route7",
      "Noto Sans JP",
      "Yu Gothic",
      "Hiragino Kaku Gothic ProN",
      sans-serif;
    font-weight: 400;
    font-size: 7px;
    line-height: 1.3;
    padding: 4px 10px;
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 「トーイングチューブ」だけ文字数が多いので少し小さく */
  .marine-fv__activity-caption--towing {
    font-size: 7px;
    padding: 4px 5px;
  }
  /* カード4枚＋複製4枚で、ちょうど半分（-50%）動かすと
     途切れなくループする */
  @keyframes mcm-fv-activities-slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .marine-fv__activities-track {
      animation: none;
    }
  }
  /* =====================================================
     料金
  ===================================================== */
  .marine-fv__price {
    position: relative;
    right: auto;
    bottom: auto;
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    margin-top: 15px;
    padding-bottom: 25px;
    text-align: center;
  }
  .marine-fv__price-label {
    margin: 0 0 3px;
    font-size: 18px;
  }
  .marine-fv__price-main {
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .marine-fv__price-number {
    font-size: 64px;
  }
  .marine-fv__price-yen {
    padding-bottom: 6px;
    font-size: 24px;
  }
}
/* =========================================================
   390px以下
========================================================= */
@media screen and (max-width: 390px) {
  .marine-fv__copy-line {
    font-size: 25px;
  }
  .marine-fv__points {
    gap: 4px;
  }
  .marine-fv__point {
    height: 42px;
    padding: 0 4px;
    font-size: 9px;
  }
  .marine-fv__point-icon {
    width: 9px;
    height: 9px;
  }
  .marine-fv__activity-card {
    width: 96px;
  }
  .marine-fv__activity-card img {
    width: 96px;
    height: 96px;
  }
  .marine-fv__activity-caption {
    font-size: 6px;
    padding: 3px 10px;
  }
  .marine-fv__activity-caption--towing {
    font-size: 6px;
    padding: 3px 5px;
  }
  .marine-fv__price-number {
    font-size: 58px;
  }
}

/* PC：アクティビティ4枚個別表示・斜めあり */
@media screen and (min-width:768px){
  .marine-fv__activities-strip{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:1.25vw !important;
  }
  .marine-fv__activities-strip > .marine-fv__activity-item{
    position:relative !important;
    width:auto !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .marine-fv__activities-strip > .marine-fv__activity-item > img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1.6 / 1 !important;
    object-fit:cover !important;
    border-radius:0 !important;
    clip-path:polygon(8% 0,100% 0,92% 100%,0 100%) !important;
  }
  .marine-fv__activities-strip > .marine-fv__activity-item > .marine-fv__activity-label{
    position:absolute !important;
    left:50% !important;
    bottom:0.6vw !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:90% !important;
  }
}