/* TOP（ミックス）：ヒーローは案C・新着の在庫艇は案A の舞台・シリーズは案B の横に流れる形。ほかは案A
   10/13 決定。動きは位置・大きさ・切り抜き（clip-path）だけ */

/* ── ヒーロー（案C）：動画が画面いっぱいから、額縁の大きさへ縮む ── */
.c-hero{position:relative;height:200svh;background:var(--bg)}
.c-hero-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.c-frame{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0;will-change:transform} /* 縮むときは上の真ん中を起点に */
.c-open{position:absolute;inset:0;clip-path:inset(50% 0 50% 0);transition:clip-path 1.6s var(--ease)}
.c-open.on{clip-path:inset(0)}
.c-open video{width:100%;height:100%;object-fit:cover}
.c-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--scrim),.38),transparent 46%),linear-gradient(180deg,rgba(var(--scrim),.3),transparent 22%)}
.c-h1{position:absolute;left:0;right:0;top:43%;transform:translateY(-50%);text-align:center;color:#fff;font-size:clamp(28px,3.4vw,52px);font-weight:var(--w-mid);letter-spacing:.12em;margin-right:-.12em;line-height:1.4;padding:0 var(--gutter)}
.c-hero-ft{position:absolute;left:0;right:0;bottom:0;height:27%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);text-align:center;padding:0 var(--gutter);overflow:hidden}
.c-hero-ft{container-type:size}
.c-hero-ft>*{transform:translateY(calc((1 - var(--p,0)) * 100cqh))} /* 枠の高さぶん下から、せり上がる（最初は完全に隠れる） */
.c-lead{font-size:var(--fs-m);color:var(--text)}
.c-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.c-btns .btn{min-width:220px}
.c-cue{position:absolute;left:50%;bottom:28px;margin-left:-3em;width:6em;text-align:center;color:#fff;font-size:var(--fs-xs);letter-spacing:.2em}
.c-cue::after{content:"";display:block;width:1px;height:36px;background:currentColor;margin:10px auto 0}

/* ── 以下、案A ── */
/* 文字を下から持ち上げる枠（下を切り抜いておき、中の文字だけを動かす） */
.mask{display:block;overflow:hidden;padding-bottom:.08em}
.mask>*,.mask>span{display:block;transform:translate3d(0,110%,0);transition:transform .9s var(--ease)}

/* 舞台：画面に止まり、艇が右から入って左へ抜ける */
.stage{position:relative;height:calc(var(--n) * 100svh)}
.stage-pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#F6F7FA 0%,#E4E5E6 100%)}
.stage-hd{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--hd) + var(--s5));display:flex;justify-content:space-between;align-items:baseline;z-index:3}
.stage-hd h2{font-size:var(--fs-s);font-weight:var(--w-mid);letter-spacing:var(--track)}
.stage-cnt{font-size:var(--fs-s);color:var(--sub)}
.stage-cnt b{color:var(--text);font-weight:var(--w-mid)}
.stage-list{list-style:none;margin:0;padding:0}
.slide{position:absolute;inset:0;pointer-events:none}
.slide.cur{pointer-events:auto}
.slide-img{position:absolute;left:50%;top:44%;width:min(56vw,880px);aspect-ratio:2/1;transform:translate3d(calc(-50% + var(--d,0) * 80vw),-50%,0) scale(calc(1 - var(--a,0) * .18));will-change:transform}
.slide-img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 22px rgba(var(--scrim),.18))}
.slide-txt{position:absolute;left:0;right:0;bottom:clamp(64px,12vh,128px);display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--gutter)}
.slide-txt h3{font-size:clamp(28px,3.4vw,52px);font-weight:var(--w-reg);letter-spacing:.04em;line-height:1.2}
.slide-txt h3 a:hover{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
.slide-k{font-size:var(--fs-s);color:var(--sub);margin-top:6px}
.slide-k em{font-style:normal;color:var(--accent);font-weight:var(--w-mid)}
.slide-spec{display:flex;gap:clamp(24px,4vw,56px);margin-top:var(--s4);clip-path:inset(0 0 100% 0);transform:translateY(10px);transition:clip-path .8s var(--ease),transform .8s var(--ease)}
.slide-spec dt{font-size:var(--fs-xs);color:var(--sub)}
.slide-spec dd{font-size:var(--fs-num);font-weight:300;line-height:1.1}
.slide-spec small{font-size:var(--fs-s);color:var(--sub);margin-left:4px}
.slide.cur .mask>*{transform:none}
.slide.cur .slide-k .mask>span{transition-delay:.08s}
.slide.cur .slide-spec{clip-path:inset(0 0 0 0);transform:none;transition-delay:.12s}
.stage-bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,5vh,48px);height:1px;background:var(--line-hi)}
.stage-bar i{display:block;height:100%;background:var(--text);transform-origin:left;transform:scaleX(.25)}
.stage-end{position:absolute;right:var(--gutter);bottom:clamp(44px,7vh,72px);z-index:3;clip-path:inset(0 0 100% 0);transform:translateY(10px);transition:clip-path .7s var(--ease),transform .7s var(--ease);visibility:hidden}
.stage.end .stage-end{clip-path:inset(0);transform:none;visibility:visible}

/* 新艇モデル：小さな額縁から画面いっぱいへ */
.grow{position:relative;height:240svh;margin-top:var(--sec)}
.grow-pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden}
.grow-img{position:absolute;inset:0;clip-path:inset(22% 30% 22% 30%);will-change:clip-path;background:var(--ink)}
.grow-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);will-change:transform}
.grow-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--scrim),.62) 0%,rgba(var(--scrim),.18) 40%,transparent 62%)}
.grow-txt{position:absolute;left:0;right:0;bottom:clamp(56px,10vh,112px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#fff;padding:0 var(--gutter);pointer-events:none}
.grow-txt.in{pointer-events:auto}
.grow-txt.in .mask>*{transform:none}
.grow-txt .mask:nth-child(2)>*{transition-delay:.06s}
.grow-txt .mask:nth-child(3)>*{transition-delay:.12s}
.grow-txt .mask:nth-child(4)>*{transition-delay:.18s}
.grow-k{font-size:var(--fs-xs);opacity:.85}
.grow-txt b{display:block;font-size:var(--fs-h1);font-weight:var(--w-mid);letter-spacing:.08em;line-height:1.4}
.grow-t{font-size:var(--fs-m)}
.grow-go{margin-top:var(--s3);font-size:var(--fs-s);font-weight:var(--w-mid);text-decoration:underline;text-underline-offset:6px}

/* 船を探す：静かな一覧（よく見られる条件と件数） */
.q-list{list-style:none;margin:0 auto;padding:0;max-width:880px;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s7);border-top:1px solid var(--line)}
.q-list li{border-bottom:1px solid var(--line);overflow:hidden}
.q-list a{display:grid;grid-template-columns:1fr auto 14px;gap:var(--s4);align-items:center;padding:16px 0;font-size:var(--fs-m);transform:translate3d(0,100%,0);transition:transform .8s var(--ease)}
.q-list li.in a{transform:none}
.q-list a .num{font-size:var(--fs-s);color:var(--sub)}
.q-list a svg{width:12px;height:12px;color:var(--sub);transition:transform var(--t-fast)}
@media (hover:hover){.q-list a:hover span:first-child{text-decoration:underline;text-underline-offset:5px}.q-list a:hover svg{transform:translateX(4px);color:var(--text)}}
.q-go{display:flex;justify-content:center;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s6)}

/* 凪よみ */
.nagi{background:var(--surface);padding:var(--sec) 0;text-align:center;margin-top:var(--sec)}
.nagi .wrap{display:flex;flex-direction:column;align-items:center}
.nagi h2{font-size:var(--fs-h2);letter-spacing:var(--track);line-height:1.5}
.nagi-lead{color:var(--sub);font-size:var(--fs-s);margin-top:var(--s2);max-width:32em}
.nagi-place{display:flex;align-items:baseline;gap:var(--s3);font-size:var(--fs-xs);color:var(--sub);margin-top:var(--s6)}
.nagi-place b{font-size:var(--fs-s);color:var(--text);font-weight:var(--w-mid)}
.nagi-nums{display:grid;grid-template-columns:repeat(3,minmax(0,200px));justify-content:center;margin:var(--s3) 0 var(--s6);width:100%}
.nagi-nums div{padding:var(--s4) var(--s3)}
.nagi-nums div+div{border-left:1px solid var(--line-hi)}
.nagi-nums dt{font-size:var(--fs-xs);color:var(--sub)}
.nagi-nums dd{font-size:clamp(36px,4vw,56px);font-weight:300;line-height:1.1;margin-top:var(--s1);white-space:nowrap}
.nagi-nums small{font-size:var(--fs-s);color:var(--sub);margin-left:4px}
.nagi-note{font-size:var(--fs-xs);color:var(--sub);margin-top:var(--s4)}

/* 購入後のサポート */
.support{padding-bottom:var(--sec)}
.sup{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);max-width:1200px}
.sup li{text-align:center;padding:var(--s5) var(--s3);overflow:hidden}
.sup svg{width:28px;height:28px;margin:0 auto var(--s4)}
.sup h3{font-size:var(--fs-b);margin-bottom:var(--s2)}
.sup p{font-size:var(--fs-s);color:var(--sub);line-height:1.9}
.sup li>*{transform:translate3d(0,40px,0);transition:transform 1s var(--ease)}
.sup li.in>*{transform:none}

/* 試乗・見学：画面の幅いっぱいの写真 */
.visit-in{position:relative;overflow:hidden;min-height:min(86svh,860px);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.visit-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit-in::after{content:"";position:absolute;inset:0;background:rgba(var(--scrim),.36)}
.visit-txt{position:relative;z-index:1;padding:var(--s7) var(--gutter);display:flex;flex-direction:column;align-items:center}
.visit-txt h2{font-size:var(--fs-h1);letter-spacing:.08em;line-height:1.4}
.visit-txt p{margin:var(--s3) 0 var(--s5);font-size:var(--fs-m)}
.visit-txt .btn-solid{background:#fff;color:var(--ink);border-color:#fff;min-width:240px}
.visit-txt .btn-solid:hover{background:rgba(255,255,255,.86)}
.photo-note.center{text-align:center;margin:var(--s5) 0}


/* ── シリーズ（案B の横に流れる形）：画面に止まり、縦のスクロールでカードが横に流れる ── */
.bn{position:relative;border-top:1px solid var(--line)}
.bn-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(220px,22vw) minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;overflow:hidden;padding-top:var(--hd)}
.bn-hd{padding:0 var(--s6) 0 var(--gutter);align-self:center}
.bn-hd h2{font-size:var(--fs-h1);letter-spacing:var(--track);line-height:1.4}
.bn-hd p{color:var(--sub);font-size:var(--fs-s);margin-top:var(--s3)}
.bn-bar{width:100%;max-width:200px;height:2px;background:var(--line);margin-top:var(--s6);overflow:hidden}
.bn-bar i{display:block;height:100%;background:var(--text);transform-origin:0 50%;transform:scaleX(0)}
.bn-view{min-width:0;overflow:hidden}
.bn-track.cards{display:flex;gap:0;padding:0;width:max-content;will-change:transform}
.bn-track .card{flex:0 0 clamp(260px,25vw,400px)}
.bn-all{flex:0 0 clamp(220px,20vw,320px);display:flex;align-items:center;justify-content:center;gap:10px;font-size:var(--fs-s);font-weight:var(--w-mid);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;align-self:stretch;margin-bottom:72px}
.bn-all svg{width:14px;height:14px}
.bn-all:hover{background:var(--surface)}
.bn-note{grid-column:2;margin:0 0 var(--s5);padding-left:var(--s4)}
html:not(.mo) .bn-view{overflow-x:auto}

@media (max-width:1100px){
  .sup{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  /* ヒーロー（案C） */
  .c-h1{top:38.5%;font-size:clamp(26px,7.4vw,34px);letter-spacing:.08em;margin-right:-.08em}
  .c-hero-ft{height:36%;gap:var(--s3)}
  .c-btns{flex-direction:column;width:100%}
  .c-btns .btn{width:100%;min-width:0}
  /* シリーズ（案B） */
  .bn-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;align-items:start}
  .bn-hd{padding:var(--s5) var(--gutter) var(--s4)}
  .bn-hd h2{font-size:clamp(24px,7vw,30px)}
  .bn-bar{margin-top:var(--s4)}
  .bn-view{align-self:center}
  .bn-track.cards{padding:0 0 0 var(--gutter)}
  .bn-track .card{flex-basis:70vw}
  .bn-all{flex-basis:52vw;margin-bottom:60px}
  .bn-note{grid-column:1;padding:0 var(--gutter)}
  .slide-img{width:94vw;top:42%;transform:translate3d(calc(-50% + var(--d,0) * 100vw),-50%,0) scale(calc(1 - var(--a,0) * .12))}
  .slide-txt{bottom:clamp(96px,16vh,140px)}
  .slide-txt h3{font-size:clamp(24px,7vw,32px)}
  .slide-spec dd{font-size:24px}
  .stage-end{left:var(--gutter);right:var(--gutter);bottom:clamp(64px,9vh,80px)}
  .stage-end .btn{width:100%}
  .stage.end .slide-txt{transform:translateY(-64px);transition:transform .6s var(--ease)}
  .grow-img{clip-path:inset(26% 14% 26% 14%)}
  .q-list{grid-template-columns:1fr}
  .q-go{flex-direction:column;align-items:center;gap:var(--s2)}
  .nagi-nums dd{font-size:clamp(30px,9vw,44px)}
  .nagi-nums small{display:block;margin:4px 0 0}
  .sup{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .sup li{padding:var(--s4) 0}
  .visit-in{min-height:520px}
  .visit-txt{width:100%}
  .visit-txt .btn{width:100%}
}

/* 動きを減らす設定：止めずに、最後の形をそのまま見せる */
/* 動きを減らす設定：止めずに、最後の形をそのまま見せる */
.rm .ln>span,.rm .mask>*,.rm .q-list a,.rm .sup li>*{transform:none!important}
.rm .slide-spec,.rm .stage-end{clip-path:none!important;transform:none!important;visibility:visible!important}
.rm .stage{height:auto}
.rm .stage-pin{position:relative;height:auto;min-height:0;padding:calc(var(--hd) + 72px) 0 var(--s8)}
.rm .stage-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6) 0}
.rm .slide{position:relative;inset:auto;pointer-events:auto}
.rm .slide-img{position:relative;left:auto;top:auto;width:76%;margin:0 auto;transform:none;display:block}
.rm .slide-txt{position:relative;bottom:auto}
.rm .stage-bar{display:none}
.rm .stage-end{position:relative;right:auto;bottom:auto;text-align:center;margin-top:var(--s6)}
.rm .grow{height:auto}
.rm .grow-pin{position:relative;height:86svh}
.rm .grow-img{clip-path:none}
.rm .grow-img img{transform:none}
.rm .grow-txt{pointer-events:auto}
@media (max-width:860px){.rm .stage-list{grid-template-columns:1fr}}
/* 動きを減らす設定では4艇を並べて見せるので、「1 / 4」は出さない */
@media (prefers-reduced-motion:reduce){.stage-cnt{display:none}}
@media (prefers-reduced-motion:reduce){
  .c-open{transition:none}
  .c-hero{height:100svh}
  .c-cue{display:none}
}
/* シリーズの見出しを1行に（「選ぶ」だけが次の行に残らないように） */
@media (min-width:861px){.bn-pin{grid-template-columns:minmax(260px,24vw) minmax(0,1fr)}.bn-hd h2{font-size:clamp(22px,2vw,32px);white-space:nowrap}}