/* REDUX × — 海のレジャーサイト：動的デザイン プロトタイプ
   動きの方針：スクロール＝潜水。深くなるほど背景が暗くなり、泡・視差・数字が連動する。
   「動き：オフ」またはOSの"視差効果を減らす"で、すべての動きを止めて同じ内容を表示する。 */

:root{
  color-scheme:dark;        /* 暗い海のデザインなので、スクロールバーやフォーム部品も暗い色に */
  --ink:#fff;
  --glass:rgba(5,40,60,.5);
  --glass-line:rgba(255,255,255,.3);
  --coral:#ff8a6b;
  --abyss-top:#106284;
  --abyss-bot:#0d5678;
  --frame:clamp(8px,1.4vw,18px);
  --frame-r:clamp(20px,2.6vw,36px);
  --sun:1;                  /* 水面から差し込む光の残り（main.js が水深に合わせて 1 → 0.5 に下げる。深くても消えない） */
  --ff-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;   /* 見出し：丸みのあるやわらかい文字（以前は明朝体の Shippori Mincho） */
  --ff-ui:"Outfit","Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  --pad:clamp(20px,5vw,72px);

  /* ── 動きの調整盤：数値を変えると、サイト全体にまとめて反映されます ── */
  --caustics-strength:.42;  /* A 背景の光のゆらぎの濃さ（0 で消える／1 でいちばん濃い）。深くなるほど自動で薄くなる */
  --wave-opacity:.45;       /* G セクションの境目の、光の波の線の濃さ */
  --creature-opacity:.72;   /* E 深さで現れる生き物の濃さ（背景なので文字より目立たない程度に） */
  --sunlight:1;             /* 水面から差し込む光の全体の強さ（トップの写真・背景の光。0〜1 で弱める） */
  --sunbeam:1.6;            /* トップの写真の上側の、まぶしさと光の筋の強さ。1 が以前の明るさ、1.3 で約1トーン・1.6 で約2トーン明るい（筋は 1.6 で最大） */

  /* 水面から差し込む光の筋（太さ・明るさの違う筋を、斜め上の1点から扇形に並べる）。トップの写真と、潜った後の背景で共通 */
  --shafts:conic-gradient(from 112deg at 44% 0%,
    transparent 6deg,rgba(225,250,255,.15) 8.5deg,transparent 11deg,
    transparent 16deg,rgba(225,250,255,.42) 16.8deg,transparent 17.6deg,
    transparent 24deg,rgba(225,250,255,.21) 26deg,transparent 28deg,
    transparent 33deg,rgba(225,250,255,.5) 33.7deg,transparent 34.4deg,
    transparent 39deg,rgba(225,250,255,.3) 40.5deg,transparent 42deg,
    transparent 46deg,rgba(225,250,255,.45) 46.6deg,transparent 47.2deg,
    transparent 52deg,rgba(225,250,255,.18) 55deg,transparent 58deg,
    transparent 61deg,rgba(225,250,255,.54) 61.75deg,transparent 62.5deg,
    transparent 67deg,rgba(225,250,255,.27) 68.75deg,transparent 70.5deg,
    transparent 74deg,rgba(225,250,255,.45) 74.6deg,transparent 75.2deg,
    transparent 80deg,rgba(225,250,255,.18) 82.5deg,transparent 85deg,
    transparent 89deg,rgba(225,250,255,.45) 89.8deg,transparent 90.6deg,
    transparent 95deg,rgba(225,250,255,.24) 96.5deg,transparent 98deg,
    transparent 103deg,rgba(225,250,255,.4) 103.65deg,transparent 104.3deg,
    transparent 110deg,rgba(225,250,255,.15) 113deg,transparent 116deg,
    transparent 120deg,rgba(225,250,255,.3) 121deg,transparent 122deg);
  --shafts2:conic-gradient(from 118deg at 44% 0%,
    transparent 10deg,rgba(200,240,255,.22) 13deg,transparent 16deg,
    transparent 27deg,rgba(200,240,255,.3) 28.5deg,transparent 30deg,
    transparent 42deg,rgba(200,240,255,.2) 45deg,transparent 48deg,
    transparent 56deg,rgba(200,240,255,.34) 57.5deg,transparent 59deg,
    transparent 70deg,rgba(200,240,255,.22) 73deg,transparent 76deg,
    transparent 85deg,rgba(200,240,255,.3) 86.5deg,transparent 88deg,
    transparent 99deg,rgba(200,240,255,.2) 102deg,transparent 105deg);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;min-height:100vh;background:#06304f;color:var(--ink);font:400 16px/1.8 var(--ff-ui);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

.skip{position:fixed;left:16px;top:-64px;z-index:100;padding:10px 18px;border-radius:999px;background:#fff;color:#08354f;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}

/* ---------- 固定レイヤー ---------- */
.abyss{position:fixed;inset:0;z-index:-4;background:linear-gradient(180deg,var(--abyss-top),var(--abyss-bot))}
/* A 光のゆらぎ：海の色の上に、光だけを「スクリーン」で重ねる（暗い所は変えず、光の筋だけ明るくなる） */
#caustics{position:fixed;inset:0;width:100vw;height:100vh;z-index:-3;pointer-events:none;mix-blend-mode:screen;opacity:calc(var(--caustics-strength) * var(--sun))}
/* 背景の陽の光：水面（画面の上）からの明るさ。光だけを「スクリーン」で重ねるので、上ほど明るく、下は海の色のまま */
.sunglow{position:fixed;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:calc(var(--sun) * var(--sunlight));
  background:radial-gradient(120% 55% at 38% -12%,rgba(190,240,255,.36),rgba(120,205,235,.14) 45%,transparent 75%),linear-gradient(180deg,rgba(120,210,240,.1),transparent 55%)}
/* 光の筋（潜った後の背景）：トップの写真と同じ形の筋を、画面の上側から差し込ませる。深くなるほど弱まる */
.rays{
  position:fixed;inset:-30% -20% 30%;z-index:-2;pointer-events:none;mix-blend-mode:screen;
  opacity:calc(var(--sun) * var(--sunlight) * .75);
  background:var(--shafts);
  -webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 95%);mask-image:linear-gradient(180deg,#000 20%,transparent 95%);
  filter:blur(6px);transform-origin:44% 0;animation:raysway 16s ease-in-out infinite alternate;
}
/* 水面の揺れに合わせて、光の筋がゆっくり首を振る */
@keyframes raysway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
#bubbles{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}

/* ---------- ピル（MIPOGG型：丸い小さなUIを画面の角に固定） ---------- */
.pill{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.42);
  background:rgba(4,38,58,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font:500 14px/1 var(--ff-ui);letter-spacing:.04em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .3s,transform .4s var(--ease),box-shadow .4s;
}
.pill:hover{background:rgba(255,255,255,.22)}
.pill--static{cursor:default}
.pill--static:hover{background:rgba(4,38,58,.45)}
.pill--solid{background:#fff;color:#08354f;border-color:#fff}
.pill--solid:hover{background:#e3faff;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(0,20,40,.6)}
.pill--lg{height:54px;padding:0 30px;font-size:16px}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);pointer-events:none;animation:rip .85s ease-out forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---------- 固定ヘッダー ---------- */
.top{position:fixed;inset:16px var(--pad) auto;z-index:50;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
.top>*{pointer-events:auto}
/* スクロールした本文とロゴ・ピルが重なって読めなくならないよう、ヘッダーの背後に薄い暗幕を敷く */
.top::before{content:"";position:fixed;left:0;right:0;top:0;height:124px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(2,26,44,.7),rgba(2,26,44,.38) 55%,rgba(2,26,44,0));transition:opacity .5s}
/* トップのいちばん上にいる間は、差し込む光をさえぎらないよう暗幕を薄くする（スクロールしたら戻る。main.js が at-top を付け外し） */
.at-top .top::before{opacity:.25}
/* ロゴ：白いピルだと浮いて見えるため、ほかのピルと同じすりガラスの枠に入れ、白抜きのロゴ（紺の部分だけ白にし、波の青緑はそのまま）を置いて海になじませる */
/* 横幅が足りないときも、ロゴは縮めない（縮むと文字が横につぶれるため。右のボタンが折り返して譲る） */
.logo{flex:none;display:flex;align-items:center;height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.42);
  background:rgba(4,38,58,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-decoration:none;transition:background .3s,transform .4s var(--ease)}
.logo:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.logo img{display:block;width:auto;max-width:none;height:28px}
.cluster{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

.menu{position:relative}
.menu .pill svg{transition:transform .35s var(--ease)}
.menu.open .pill svg{transform:rotate(180deg)}
.menu__list{
  position:absolute;right:0;top:calc(100% + 8px);min-width:210px;padding:8px;border-radius:22px;
  background:rgba(4,34,54,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.25);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s;
}
.menu.open .menu__list{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu__list a{display:block;padding:10px 16px;border-radius:14px;text-decoration:none;font-size:15px}
.menu__list a:hover,.menu__list a:focus-visible{background:rgba(255,255,255,.16)}

/* ---------- 言語の切り替え（js/i18n.js）：地球のマーク＋言語の記号のボタン。押すと9言語の一覧が開く ---------- */
.langmenu .globe{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.langmenu__list{min-width:196px}
.langmenu__list button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:10px 16px;border-radius:14px;font-size:15px;line-height:1.3;cursor:pointer}
.langmenu__list button:hover,.langmenu__list button:focus-visible{background:rgba(255,255,255,.16)}
.langmenu__list button[aria-current="true"]{background:rgba(255,255,255,.12)}
.langmenu__list .code{font:500 11px/1 var(--ff-ui);letter-spacing:.12em;opacity:.6}
.langmenu__list button[aria-current="true"] .code::before{content:"✓ ";opacity:1}
/* 言語ごとの書体：中国語・韓国語は端末の標準の文字、ネパール語は丸みのある Baloo 2（選んだときだけ読み込む） */
html[lang="zh-Hans"]{--ff-jp:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;--ff-ui:"Outfit","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
html[lang="ko"]{--ff-jp:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;--ff-ui:"Outfit","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif}
html[lang="ko"] body{word-break:keep-all}                                   /* 韓国語は、単語の途中で折り返さない */
html[lang="ne"]{--ff-jp:"Baloo 2","Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari",sans-serif;--ff-ui:"Outfit","Baloo 2","Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari",system-ui,sans-serif}
html[lang="de"] body,html[lang="fr"] body,html[lang="es"] body{hyphens:auto}   /* 長い単語は、行の端でハイフンを入れて折り返す */
/* アラビア語：ネパール語と同じ一族の、丸みのある Baloo Bhaijaan 2（選んだときだけ読み込む） */
html[lang="ar"]{--ff-jp:"Baloo Bhaijaan 2","Segoe UI","Geeza Pro","Noto Sans Arabic",sans-serif;--ff-ui:"Outfit","Baloo Bhaijaan 2","Segoe UI","Geeza Pro","Noto Sans Arabic",system-ui,sans-serif}
/* アラビア語は右から左に書く（js/i18n.js が html に dir="rtl" を付ける）。並びは自動で左右が入れ替わるので、
   ここでは「左・右」を決め打ちしている所だけを入れ替える（dir="rtl" のときだけ効く。ほかの言語の見た目は変わらない） */
html[dir="rtl"] .skip{left:auto;right:16px}
html[dir="rtl"] .menu__list{right:auto;left:0}                               /* 一覧は、ボタンの左端から右へ開く */
html[dir="rtl"] .num:has(>small:not([data-en])){flex-direction:row-reverse;justify-content:flex-end}   /* 「98%」は、数字の右に % のまま */
html[dir="rtl"] .group{padding-right:0;padding-left:20px}
html[dir="rtl"] .marquee__track{animation-name:marq-rtl}                    /* お客様の声は、右へ流れる */
@keyframes marq-rtl{to{transform:translateX(50%)}}
html[dir="rtl"] .faq__a p{padding:0 calc(clamp(24px,3vw,34px) + clamp(14px,3vw,28px) + 6px) 28px 56px}
@media (max-width:640px){html[dir="rtl"] .faq__a p{padding-left:8px}}

.fab{position:fixed;right:var(--pad);bottom:24px;z-index:50;height:56px;padding:0 28px;font-size:16px;box-shadow:0 14px 30px -14px rgba(0,20,40,.7)}
.cue{position:fixed;left:50%;bottom:28px;z-index:40;transform:translateX(-50%);transition:opacity .5s}
.cue.hide{opacity:0;pointer-events:none}

/* ---------- 共通 ---------- */
.sec{position:relative;padding:clamp(88px,15vh,170px) var(--pad)}
.eyebrow{font:500 12px/1.4 var(--ff-ui);letter-spacing:.34em;text-transform:uppercase;opacity:.9}
.h2{font:500 clamp(32px,5.4vw,68px)/1.25 var(--ff-jp);letter-spacing:.03em;margin-top:.4em}
.h1{font:500 clamp(38px,6.4vw,84px)/1.18 var(--ff-jp);letter-spacing:.03em;margin:.35em 0 .5em}
/* 見出しが折り返すときは、言葉の切れ目で折り返す（「大切」と「に」のように、1文字だけが次の行に残らないように。対応ブラウザのみ） */
.h1,.h2,.cta__t{word-break:auto-phrase}

/* 見出しは1行ずつ下から出す（マスクリビール） */
.line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.line>span{display:block}
.js .line>span{transform:translateY(112%);transition:transform 1.15s var(--ease);transition-delay:calc(var(--i,0) * .14s + var(--d,0s))}
.js .is-in .line>span{transform:none}

/* スクロールで浮かび上がる */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;justify-items:start;padding:clamp(110px,16vh,160px) var(--pad) clamp(90px,12vh,140px);isolation:isolate;overflow:clip}
/* 写真の枠：上と左右に少し余白をとった角丸の「窓」。枠は動かさず、下側で深い海の色へ溶け込ませる。
   （以前は写真ごとぼかしていたため、視差で写真が下がるとぼかしが切れ、境目がくっきり線になっていた） */
.hero__media{
  position:absolute;inset:var(--frame) var(--frame) 0;z-index:-1;overflow:hidden;border-radius:var(--frame-r) var(--frame-r) 0 0;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.18) 92%,transparent);
  mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.18) 92%,transparent);
}
.hero__media::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.24);border-bottom:0;border-radius:inherit;pointer-events:none}
.hero__bg{
  position:absolute;inset:-8% 0 -2%;will-change:translate,transform;background:#0b3a55;
  animation:drift 22s ease-in-out infinite alternate;
}
/* 写真は <img>。文字を読みやすくする薄暗い膜は、写真と波紋（B）の上に重ねる */
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;-webkit-user-drag:none;user-select:none}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,24,40,0),rgba(2,24,40,.06) 40%,rgba(2,24,40,.3));pointer-events:none}   /* 上は暗くしない。下も暗くしすぎない */
.hero__bg{filter:brightness(1.12) saturate(1.06)}   /* 写真全体を、陽の光が入った明るさに */
/* 水面から差し込む光：写真の上側をまぶしく明るくし、斜め上から光の筋を差し込ませる（2枚の筋がゆっくり別々に揺れる）。
   「スクリーン」で重ねるので、暗い所の色は変えず、光の当たる所だけが明るくなる。下へいくほど消える */
.hero__light{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;opacity:var(--sunlight);
  background:radial-gradient(85% 50% at 36% -8%,rgba(215,248,255,calc(.45 * var(--sunbeam))),rgba(150,225,255,calc(.18 * var(--sunbeam))) 42%,transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.85) 35%,rgba(0,0,0,.45) 65%,transparent 92%);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.85) 35%,rgba(0,0,0,.45) 65%,transparent 92%)}
/* 筋は同じ模様を2枚重ねて明るさの余地を作り、--sunbeam で濃さを決める（--sunbeam:1 で以前と同じ明るさ） */
.hero__light i{position:absolute;inset:-45% -35% 0;background:var(--shafts),var(--shafts);opacity:calc(var(--sunbeam) * .62);filter:blur(4.5px);transform-origin:44% 0;animation:raysway 15s ease-in-out infinite alternate}
.hero__light i+i{background:var(--shafts2),var(--shafts2);opacity:calc(var(--sunbeam) * .62);filter:blur(9px);animation-duration:21s;animation-direction:alternate-reverse}
@keyframes drift{from{scale:1.04}to{scale:1.12}}
/* 写真の視差：対応ブラウザでは、スクロールそのものに連動させる（描画側で動くので本文とずれず、止めた後も流れない）。
   スクロール 0→150vh で写真を 0→48vh 下げる＝本文の約0.32倍の速さで奥に見える。未対応のブラウザは main.js で同じ動きをする */
@supports (animation-timeline: scroll()){
  .hero__bg{
    animation:drift 22s ease-in-out infinite alternate,hero-par linear both;
    animation-timeline:auto,scroll(root block);
    animation-range:normal,0 150vh;
  }
}
@keyframes hero-par{to{translate:0 48vh}}
.panel{width:min(100%,660px);padding:clamp(24px,4vw,48px);border-radius:30px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 30px 60px -30px rgba(0,16,32,.7)}
.chip{display:inline-block;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.92);color:#0b4f6c;font:500 13px/1.5 var(--ff-ui)}
.panel .eyebrow{margin-top:18px}
.lead{max-width:34em;font-size:clamp(15px,1.5vw,17px);opacity:.95}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- 体験カード ---------- */
/* 2枚のカードは、説明文の長さが違っても同じ高さにそろえ、「詳しく見る」はカードの下端にそろえる。浮き沈み（視差）も2枚同じ動きにする */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(36px,6vw,72px);align-items:stretch}
.cell{display:flex;will-change:translate}
.card{
  flex:1;display:flex;flex-direction:column;
  border-radius:28px;overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 18px 40px -22px rgba(0,20,40,.6);
}
.card:hover{box-shadow:0 30px 56px -22px rgba(0,20,40,.75)}
.card__img{position:relative;aspect-ratio:4/3;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.card:hover .card__img img{transform:scale(1.08)}
/* 2枚目の写真：マウスを乗せた位置から、縁のやわらかい円で広がる。
   --r を @property で登録して半径をなめらかに変化させる（未対応のブラウザでは一瞬で切り替わる） */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.card__img .card__alt{
  position:absolute;inset:0;--r:0px;
  -webkit-mask-image:radial-gradient(circle at var(--mx,50%) var(--my,50%),#000 calc(var(--r) - 70px),transparent var(--r));
  mask-image:radial-gradient(circle at var(--mx,50%) var(--my,50%),#000 calc(var(--r) - 70px),transparent var(--r));
  transition:--r 1.1s cubic-bezier(.45,.05,.2,1),transform 1.3s var(--ease);
}
@media (hover:hover){.card:hover .card__alt{--r:900px}}
.card:focus-within .card__alt,.card.is-alt .card__alt{--r:900px}
.card__body{flex:1;padding:22px 22px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.card__body .pill{margin-top:auto}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:3px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.45);font-size:12px;letter-spacing:.06em;line-height:1.7}
.card h3{font:600 22px/1.4 var(--ff-jp)}
.card p{font-size:15px;opacity:.92}

/* ---------- 数字 ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(36px,6vw,72px)}
.num{display:flex;align-items:baseline;gap:.18em;font:200 clamp(72px,12vw,168px)/1 var(--ff-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num small{font:300 clamp(14px,1.6vw,20px)/1 var(--ff-ui);letter-spacing:.06em}
.cap{margin-top:.7em;padding-top:.8em;border-top:1px solid rgba(255,255,255,.32);opacity:.92}
.note{margin-top:28px;font-size:13px;opacity:.78}

/* お客様の声：終わりなく流れる帯 */
.marquee{
  margin:clamp(56px,9vw,112px) calc(var(--pad) * -1) 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marq 60s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.group{display:flex;gap:20px;padding-right:20px}
.voice{width:min(78vw,340px);padding:24px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);display:grid;gap:16px;align-content:space-between}
.voice blockquote{font:500 17px/1.7 var(--ff-jp)}
.voice figcaption{font-size:13px;letter-spacing:.04em;opacity:.85}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 流れ：左を固定し、右の工程で番号が進む ---------- */
.flow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,96px)}
.flow__head{position:sticky;top:18vh;align-self:start}
.flow__num{margin-top:.1em;font:200 clamp(96px,17vw,240px)/1 var(--ff-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.flow__num.bump{animation:bump .7s var(--ease)}
@keyframes bump{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.step{min-height:58vh;display:flex;flex-direction:column;justify-content:center;gap:10px;opacity:.28;transition:opacity .6s var(--ease)}
.step.is-active{opacity:1}
.step h3{font:600 clamp(22px,2.6vw,32px)/1.4 var(--ff-jp)}
.step p{max-width:28em;opacity:.92}

/* ---------- FAQ（番号つきアコーディオン） ---------- */
.faq-list{margin-top:clamp(36px,6vw,72px);border-bottom:1px solid rgba(255,255,255,.3)}
.faq__item{border-top:1px solid rgba(255,255,255,.3)}
.faq__q{all:unset;box-sizing:border-box;position:relative;overflow:hidden;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,3vw,28px);align-items:center;padding:26px 6px;cursor:pointer;color:inherit}
.faq__q:focus-visible{outline:2px solid #fff;outline-offset:2px}
.faq__n{font:200 clamp(24px,3vw,34px)/1 var(--ff-ui);opacity:.75;font-variant-numeric:tabular-nums}
.faq__t{font:500 clamp(17px,2.2vw,23px)/1.5 var(--ff-jp)}
.faq__ico{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.55);transition:background .3s,transform .5s var(--ease)}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:#fff;transform:translate(-50%,-50%);transition:transform .5s var(--ease)}
.faq__ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item.open .faq__ico{background:rgba(255,255,255,.2)}
.faq__item.open .faq__ico::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq__a>div{overflow:hidden;visibility:hidden;transition:visibility 0s .55s}
.faq__a p{padding:0 56px 28px calc(clamp(24px,3vw,34px) + clamp(14px,3vw,28px) + 6px);opacity:.92}
.faq__item.open .faq__a{grid-template-rows:1fr}
.faq__item.open .faq__a>div{visibility:visible;transition-delay:0s}

/* ---------- CTA / フッター ---------- */
.cta{margin-top:clamp(80px,14vw,180px);display:grid;justify-items:center;gap:24px;text-align:center}
.cta__t{font:500 clamp(40px,8vw,112px)/1.15 var(--ff-jp);letter-spacing:.04em}
.cta .pill{height:60px;padding:0 42px;font-size:17px}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}   /* ご予約（白）とお問い合わせ（すりガラス）を並べる */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding:36px var(--pad) 110px;font-size:13px;opacity:.82}

/* ---------- レスポンシブ ---------- */
@media (max-width:820px){
  .flow{grid-template-columns:1fr}
  .flow__head{position:static}
  .flow__num{display:none}
  .step{min-height:auto;padding:26px 0;opacity:1}
}
@media (max-width:640px){
  .logo{height:40px;padding:0 13px}
  .logo img{height:24px}
  .pill{height:40px;padding:0 14px;font-size:13px}
  .cue{display:none}
  .fab{height:52px;padding:0 22px;bottom:18px}
  .faq__a p{padding-right:8px}
}

/* ---------- 予約ページへの遷移：押した位置から水面が広がり、予約ページの背景写真が現れる ---------- */
.warp{
  position:fixed;inset:0;z-index:300;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,26,44,.45),rgba(2,26,44,.25) 40%,rgba(2,26,44,.62)),linear-gradient(90deg,rgba(2,26,44,.5),transparent 62%),url("../assets/reserve-bg.jpg") center 32%/cover no-repeat;
  clip-path:circle(0 at var(--x) var(--y));transition:clip-path .9s cubic-bezier(.65,.02,.25,1);
}
.warp.go{clip-path:circle(150vmax at var(--x) var(--y))}
/* 体験一覧・体験詳細へ移るときは、写真ではなく、そのページの深い海の背景が広がる（.deep と同じ見た目） */
.warp--deep,.deep{background:radial-gradient(120% 70% at 50% -10%,rgba(110,215,240,.3),transparent 60%),linear-gradient(180deg,#106284 0%,#0b4d72 45%,#06324f 100%)}
/* 別ページへ移る前に、そっと消える */
body.leaving{opacity:0;transition:opacity .35s ease}
/* 波紋の輪（広がる縁・到着後の余韻に共用） */
.ring{position:fixed;left:var(--x);top:var(--y);translate:-50% -50%;width:0;height:0;border-radius:50%;border:2px solid rgba(255,255,255,.8);pointer-events:none;z-index:310}
.ring--edge{animation:edge .9s cubic-bezier(.65,.02,.25,1) both}
@keyframes edge{from{width:0;height:0;opacity:1}to{width:300vmax;height:300vmax;opacity:.5}}
.ring--settle{animation:settle 1.7s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
@keyframes settle{from{width:0;height:0;opacity:.95}to{width:2600px;height:2600px;opacity:0}}

/* ---------- G 波の境目：各セクションの上端に、光の線のような波（A と同じ色・細い光の線） ---------- */
.wavecut{position:absolute;left:0;right:0;top:0;z-index:0;height:84px;transform:translateY(-50%);overflow:hidden;pointer-events:none;opacity:var(--wave-opacity);
  background:linear-gradient(180deg,transparent,rgba(150,230,255,.07) 50%,transparent)}
.wavecut svg{position:absolute;left:0;top:0;width:200%;height:100%;fill:none;stroke:rgba(190,245,255,.8);stroke-width:1.4;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(150,230,255,.7));animation:wavecut 16s linear infinite}
.wavecut path{vector-effect:non-scaling-stroke}
.wavecut .w2{animation-duration:22s;animation-direction:reverse;opacity:.6}
.wavecut .w3{animation-duration:11s;opacity:.4}
@keyframes wavecut{to{transform:translateX(-50%)}}

/* ---------- C 魚の群れ（「数字」セクションの背景） ---------- */
.school{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
#numbers>*:not(.school):not(.wavecut){position:relative;z-index:1}

/* ---------- E 深さで現れる生き物（背景を横切って泳ぐ。js/sealife.js が毎フレーム描く。濃さは --creature-opacity） ---------- */
.creatures{position:fixed;inset:0;z-index:-2;display:block;width:100%;height:100%;pointer-events:none}   /* 光の筋より手前、泡より奥 */

/* ---------- B 水面の波紋：写真の上に重ねるキャンバス（js/fx.js）。準備ができたら写真と入れ替わる ---------- */
.rip{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y;opacity:0;transition:opacity .4s,transform 1.2s var(--ease)}
.rip.ready{opacity:1}
html[data-motion="off"] .rip{display:none}

/* ---------- H 泡のボタン：押すとはじける泡 ---------- */
.bubx{position:fixed;z-index:320;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.7) 0 18%,rgba(255,255,255,.08) 22%);pointer-events:none;animation:bubrise var(--dur,1.3s) cubic-bezier(.2,.7,.3,1) both}
@keyframes bubrise{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx,0),-130px) scale(1);opacity:0}}

/* ---------- 動きを止める（トグル or OS設定） ---------- */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="off"] [data-reveal],html[data-motion="off"] .line>span{opacity:1!important;transform:none!important}
html[data-motion="off"] .hero__bg{scale:1.04}
html[data-motion="off"] .step{opacity:1}
html[data-motion="off"] .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
html[data-motion="off"] #caustics,html[data-motion="off"] .creatures,html[data-motion="off"] .school{display:none}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion]) *,html:not([data-motion]) *::before,html:not([data-motion]) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* 試作の帯（公開デモの注意書き）：全ページの一番上に固定する。色は --coral（文字は .skip と同じ濃い青、コントラスト比 約5.7:1）
   帯の高さ --demo-h は js/demo-banner.js が測って入れる（下の値は script が動く前の目安）。その分だけ本文・ヘッダー・本文へ移動のリンクを下げる */
:root{--demo-h:34px}
@media (max-width:640px){:root{--demo-h:56px}}
.proto-bar{position:fixed;left:0;right:0;top:0;z-index:60;margin:0;padding:7px var(--pad);background:var(--coral);color:#08354f;font:600 12.5px/1.5 var(--ff-ui);letter-spacing:.04em;text-align:center;text-wrap:balance}
body{padding-top:var(--demo-h)}
.top{top:calc(16px + var(--demo-h))}
.top::before{top:var(--demo-h)}
.skip:focus{top:calc(16px + var(--demo-h))}