/* 体験一覧・体験詳細・予約申込で共通に使う部品。
   内容は Figma Make「海っぽいレジャーサイト」の各ページに合わせ、見た目はこのサイトのデザイン（深い海＋ガラス）にしている。
   style.css（ピル・ヘッダー・見出し・動きの停止ルール）を前提にする。 */

[hidden]{display:none!important}
.sub{background:#062f4a}
.deep{position:fixed;inset:0;z-index:-4}   /* 上に A 光のゆらぎ（#caustics）を重ねる */

/* ---------- ヘッダー：左に戻るリンク、右にページ名（Figma Make と同じ構成） ---------- */
.subbar .cluster{align-items:center}
.subbar__label{margin-right:6px;font:500 12px/1 var(--ff-ui);letter-spacing:.3em;opacity:.88;white-space:nowrap;text-shadow:0 1px 10px rgba(0,30,50,.5)}
@media (max-width:640px){.subbar__label{display:none}}

/* ---------- 見出し ---------- */
.subwrap{width:min(100% - var(--pad) * 2,920px);margin:0 auto;padding:clamp(110px,16vh,150px) 0 96px}
.intro{display:grid;justify-items:center;gap:14px;text-align:center}
.sub-h1{margin:0;font:500 clamp(34px,5vw,56px)/1.3 var(--ff-jp);letter-spacing:.06em}
.sub-h2{margin:.3em 0 0;font:500 clamp(26px,3.4vw,36px)/1.4 var(--ff-jp);letter-spacing:.05em}
.rule{display:block;width:56px;height:1px;background:rgba(255,255,255,.55)}
.lead2{font-size:15px;opacity:.88}
.xcta{width:100%;margin-top:26px}

/* ---------- 体験一覧のカード ---------- */
.xlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(20px,3vw,32px);margin-top:clamp(36px,6vw,64px)}
/* カードは同じ高さにそろい、時間・料金の行（区切り線）はカードの下端にそろえる（説明文の長さが違っても位置がずれない） */
.xcard{
  display:flex;flex-direction:column;overflow:hidden;border-radius:24px;color:#fff;text-decoration:none;
  background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -22px rgba(0,20,40,.6);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s;
}
.xcard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.48);box-shadow:0 30px 56px -22px rgba(0,20,40,.75)}
.xcard:focus-visible{outline:2px solid #fff;outline-offset:4px}
.xcard__img{position:relative;aspect-ratio:4/3;overflow:hidden}
.xcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.xcard:hover .xcard__img img{transform:scale(1.06)}
.xcard__tag{position:absolute;left:0;top:0;padding:9px 16px;background:rgba(9,104,148,.88);font:600 12px/1 var(--ff-ui);letter-spacing:.14em}
.xcard__body{flex:1;display:flex;flex-direction:column;padding:22px clamp(20px,3vw,30px) 24px}
.xcard__sub{font-size:13px;letter-spacing:.14em;color:#9fe3f0}
.xcard__title{margin:6px 0 10px;font:500 clamp(24px,3vw,30px)/1.4 var(--ff-jp);letter-spacing:.06em}
.xcard__desc{font-size:15px;opacity:.9;margin-bottom:18px}
.xcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);font-size:13px}
.xcard__meta .m{display:inline-flex;align-items:center;gap:6px;opacity:.9}
.price{margin-left:auto;font:500 clamp(18px,2.4vw,22px)/1 var(--ff-jp);letter-spacing:.02em}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 体験詳細 ---------- */
.xhero{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:24px;border:1px solid var(--glass-line);box-shadow:0 24px 50px -26px rgba(0,16,32,.75)}
.xhero img{width:100%;height:100%;object-fit:cover}
.xhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(2,24,40,.72))}
.xhero__cap{position:absolute;left:clamp(20px,4vw,40px);bottom:clamp(18px,4vw,36px);z-index:1}
.xhero__en{font:500 13px/1 var(--ff-ui);letter-spacing:.24em;opacity:.92}
.xhero__title{margin:10px 0 0;font:500 clamp(30px,5vw,48px)/1.3 var(--ff-jp);letter-spacing:.06em}
.xdetail{width:100%;margin-top:clamp(20px,3vw,28px)}
.xdetail__desc{margin-top:16px;opacity:.92}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.tiles li{display:grid;justify-items:center;gap:4px;padding:16px 8px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);text-align:center}
.tiles .ico{color:#9fe3f0}
.tiles .k{font-size:12px;opacity:.82}
.tiles b{font:600 17px/1.3 var(--ff-ui)}
.points__h{margin-top:26px;font:600 16px/1.4 var(--ff-ui);letter-spacing:.04em}
.points{display:grid;gap:10px;margin-top:12px}
.points li{display:flex;align-items:flex-start;gap:10px;opacity:.94}
.points .ico{flex:none;margin-top:3px;color:#9fe3f0}

/* ---------- B 水面の波紋（共通の見た目は style.css）：カードに乗せたとき、写真と一緒に少し大きくする ---------- */
.xcard:hover .xcard__img .rip{transform:scale(1.06)}

/* ---------- 登場：押した位置から波紋が広がり、見出しやカードが順に浮かび上がる ---------- */
.sub.arrived .top>*{animation:topIn .9s var(--ease) .45s both}
@keyframes topIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.js .sub:not(.arrived) .rise{opacity:0}
.sub.arrived .rise{animation:riseIn .9s var(--ease) calc(var(--i,0) * .08s + .25s) both}
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
html[data-motion="off"] .rise{opacity:1!important}

/* ---------- アラビア語（右から左に書く）：「左・右」を決め打ちしている所だけを入れ替える（style.css と同じ考え方） ---------- */
html[dir="rtl"] .subbar__label{margin-right:0;margin-left:6px}
html[dir="rtl"] .xcard__tag{left:auto;right:0}
html[dir="rtl"] .price{margin-left:0;margin-right:auto}
html[dir="rtl"] .xhero__cap{left:auto;right:clamp(20px,4vw,40px)}

@media (max-width:640px){
  .tiles{gap:8px}
  .tiles li{padding:12px 4px}
  .tiles b{font-size:15px}
}