/* 一砂LP — セクションB（購入に直結する区画）: topbar / #compare / #voices / #offer / #faq / #final / 固定の小物 / footer
   持ち主=セクションB。色・書体・イージングは tokens.css の変数だけを使う（足した値には理由を書く）。
   接頭辞: tb- cmp- vc- of- fq- fn- fx- ft-（他の担当の class とぶつけない） */

/* 共通：空の見出し行は消す（title_l2 が "" の時） */
.cmp .ln:has(>span:empty),.vc .ln:has(>span:empty),.of .ln:has(>span:empty),.fq .ln:has(>span:empty),.fn .ln:has(>span:empty){display:none}
/* ※架空の注記は「読める濃さ」に：--dim はパネル上で AA を割る（4.2:1）ので、この区画では --muted に上げる */
.vc .fict,.of .fict{color:var(--muted)}
/* 締切後・300台到達後（sec-b.js が html.is-offer-over を付ける）: 文言は JS が data-over-text に替え、ここでは隠す物を隠す。
   data-over-text="" は「締切後は無い」の意味（見出しの2行目など） */
.is-offer-over [data-over-hide],.is-offer-over [data-over-text=""]{display:none!important}
.is-offer-over .of__plans{grid-template-columns:1fr}/* 2台セットを隠した後、1台のカードを半分の幅に残さない */
/* 日本語の短い文は文節で折り返す（「返/品OK」「向/かう」のような泣き別れを防ぐ。Chrome 119+、非対応は通常の折り返し） */
.cmp .h2,.vc .h2,.of .h2,.fq .h2,.fn .h2,.vc__q,.vc__rnote,.of__sealtitle,.of__psub,.fq__q,.fn .lead,.fn__note,.of__ctanote,.fx-bar__text{word-break:auto-phrase;text-wrap:pretty}
/* スマホの長いCTA：base の .roll は1行固定（高さ1.5em）なので、折り返す時は2枚重ねをやめて全文を見せる */
@media (max-width:760px){
  .of__cta,.fn__cta{width:100%;white-space:normal;padding-inline:1.4em;font-size:1rem;line-height:1.5;text-align:center}
  .of__cta .roll,.fn__cta .roll{height:auto;overflow:visible}
  .of__cta .roll-b,.fn__cta .roll-b{display:none}
  .of__cta .roll>span,.fn__cta .roll>span{transform:none!important}
}

/* ───────── 05 topbar ───────── */
.tb{position:fixed;inset:0 0 auto;z-index:50;height:var(--topbar-h);transition:background-color var(--dur-m) var(--ease-fn),border-color var(--dur-m) var(--ease-fn),backdrop-filter var(--dur-m) var(--ease-fn);border-bottom:1px solid transparent}
.tb.is-solid{background:rgba(11,9,7,.94);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}
.tb__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1320px,100% - var(--gutter)*2);margin-inline:auto}
.tb__brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--bone)}
.tb__brand .mark{color:var(--brass)}
.tb__name{font-family:var(--f-display);font-weight:900;font-size:1.3rem;letter-spacing:.12em;line-height:1}
.tb__latin{font-family:var(--f-latin);font-size:.66rem;letter-spacing:.42em;color:var(--muted);line-height:1;padding-top:.2em}
.tb__right{display:flex;align-items:center;gap:18px}
.tb__chip{font-size:.8rem;letter-spacing:.06em;color:var(--brass-hi);border:1px solid var(--line-strong);border-radius:999px;padding:.35em 1.1em;line-height:1.5;white-space:nowrap}
.tb .btn.tb__cta{min-height:44px;padding:0 1.4em;font-size:.88rem}
@media (max-width:760px){.tb__chip{display:none}.tb__latin{letter-spacing:.3em}.tb .btn.tb__cta{padding:0 1.15em}
  /* 金色のボタンを同時に2つ出さない: 下の固定バー／ヒーローのCTAが見えている間、上のバーはロゴだけ（visibility なのでタブ移動からも外れる） */
  .fx-on .tb .tb__cta{visibility:hidden}
  /* スマホは #offer の区画にいる間も隠す（上のCTAの行き先は #offer の先頭。読んでいる途中に押すと上へ戻される） */
  .offer-on .tb .tb__cta{visibility:hidden}}
/* 金色のボタンは同時に1つ（ページ全体・監査2周目）: #offer・#final の購入ボタンが画面にある間は、どの幅でも上のバーのCTAを隠す */
.cta-inview .tb .tb__cta{visibility:hidden}
/* ヒーローが見えている間は、どの幅でも上のバーのCTAを隠す（PCでもヒーローのCTAと金色が2つ並ばない・最終確認 medium） */
.hero-on .tb .tb__cta{visibility:hidden}

/* ───────── 60 compare ───────── */
.cmp__head{max-width:40em}
.cmp__table{width:100%;margin-top:clamp(40px,6vw,72px);border-collapse:separate;border-spacing:0;font-size:.95rem;table-layout:fixed}
.cmp__table th,.cmp__table td{padding:22px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line);line-height:1.7}
.cmp__table thead th{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:.06em;color:var(--muted);border-bottom-color:var(--line-strong);padding-top:26px}
.cmp__table tbody th{font-weight:500;color:var(--muted);font-size:.86rem;letter-spacing:.08em;width:22%}
.cmp__corner{width:22%}
.cmp__table td{color:var(--bone)}
.cmp__table tbody td:not(.is-issa){color:var(--muted)}
/* 一砂の列だけ真鍮の細枠（上端は角丸、下端で閉じる） */
.cmp__table .is-issa{background:linear-gradient(180deg,rgba(201,164,104,.07),rgba(201,164,104,.03));border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong);color:var(--bone)}
.cmp__table thead .is-issa{border-top:1px solid var(--brass);border-radius:var(--radius-lg) var(--radius-lg) 0 0;color:var(--brass-hi);position:relative}
.cmp__table tbody tr:last-child .is-issa{border-bottom:1px solid var(--brass);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.cmp__table tbody .is-issa{font-weight:700}
/* 真鍮の軸ピン（小さな円＋点）＝砂時計を留める横軸の頭 */
.cmp__pin{display:inline-block;width:12px;height:12px;border:1px solid var(--brass);border-radius:50%;margin-right:10px;vertical-align:-1px;background:radial-gradient(circle,var(--brass-hi) 0 1.6px,transparent 2.2px)}
.cmp__note{margin-top:22px;color:var(--muted)}
@media (max-width:760px){
  /* スマホも表のまま（監査1周目: 縦積みカードは約1,200pxで長すぎた）。1列目=項目、2〜4列を詰めて 12〜13px。
     横スクロールを出さないよう table-layout:fixed で幅を配り、文は文節で折り返す */
  .cmp__table{margin-top:28px;font-size:.8rem}
  .cmp__table th,.cmp__table td{padding:11px 6px;line-height:1.5;word-break:auto-phrase;overflow-wrap:anywhere}
  .cmp__table thead th{font-size:.76rem;letter-spacing:.02em;padding-top:14px;line-height:1.4}
  .cmp__table tbody th{font-size:.76rem;letter-spacing:.02em;width:21%;padding-left:0}
  .cmp__corner{width:21%}
  .cmp__table td{font-size:.8rem}
  .cmp__table .is-issa{padding-inline:8px}
  .cmp__pin{display:block;margin:0 0 4px}
  .cmp__note{margin-top:14px}
}
/* 幅320〜360: 列見出し（5文字）が1字だけ落ちないよう、横の余白と項目列を少し削る（字は12px以上のまま） */
@media (max-width:360px){
  .cmp__table th,.cmp__table td{padding-inline:3px}
  .cmp__table .is-issa{padding-inline:6px}
  .cmp__table tbody th,.cmp__corner{width:19%}
}

/* ───────── 65 voices ───────── */
.vc{background:var(--ink-2)}
.vc__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);align-items:start}
.vc__rating{--r:5;margin-top:clamp(32px,4vw,52px);display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:22px}
.vc__num{font-size:clamp(4.4rem,9vw,7rem);line-height:.9;color:var(--brass-hi);font-weight:600;letter-spacing:-.01em}
.vc__ticks{display:flex;gap:9px;align-items:flex-end;height:30px;padding-bottom:10px}
/* 目盛り1本ずつ、評価の値ぶんだけ下から真鍮が満ちる（4.8 なら5本目は8割） */
.vc__ticks i{--f:clamp(0,calc(var(--r) - var(--i)),1);display:block;width:3px;height:26px;border-radius:2px;background:linear-gradient(0deg,var(--brass) calc(var(--f)*100%),rgba(236,222,196,.16) 0)}
.vc__rnote{grid-column:1/-1;margin-top:14px;font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.vc__list{display:grid;gap:18px}
.vc__item{position:relative;padding:28px 30px 24px 58px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.vc__item::before{content:"\201C";position:absolute;left:22px;top:12px;font-family:var(--f-latin);font-size:3rem;line-height:1;color:var(--brass);opacity:.8}
.vc__q{font-family:var(--f-display);font-weight:500;font-size:clamp(1.02rem,1.6vw,1.16rem);line-height:1.85;letter-spacing:.04em;color:var(--bone)}
.vc__who{margin-top:12px;font-size:.8rem;color:var(--muted);letter-spacing:.06em}
.vc__who::before{content:"";display:inline-block;width:18px;height:1px;background:var(--brass);vertical-align:middle;margin-right:10px;opacity:.7}
.vc__fict{margin-top:6px;font-size:.78rem;line-height:1.7}
@media (max-width:900px){.vc__grid{grid-template-columns:1fr}.vc__item{padding:24px 22px 22px 50px}.vc__item::before{left:16px}}
/* スマホは詰める（監査1周目: 区画が長い）。声のカードの余白・行間と評価の数字を小さく */
@media (max-width:760px){
  .vc__grid{gap:26px}
  .vc__rating{margin-top:18px;column-gap:18px}
  .vc__num{font-size:3.6rem}
  .vc__ticks{height:24px;padding-bottom:6px}
  .vc__ticks i{height:20px}
  .vc__rnote{margin-top:10px;font-size:.8rem;line-height:1.7}
  .vc__list{gap:10px}
  .vc__item{padding:16px 16px 14px 42px}
  .vc__item::before{left:12px;top:8px;font-size:2.4rem}
  .vc__q{font-size:.98rem;line-height:1.7}
  .vc__who{margin-top:6px}
}

/* ───────── 70 offer ───────── */
.of{overflow:clip}/* hidden だと #offer がスクロール領域になり、左の商品の sticky が効かなかった（監査1周目）。clip は領域を作らない */
.of__head{text-align:center;display:grid;justify-items:center}
.of__grid{margin-top:clamp(40px,6vw,76px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.of__stage{position:sticky;top:calc(var(--topbar-h) + 24px);aspect-ratio:4/3.3;display:grid;place-items:center;border-radius:var(--radius-lg);
  background:radial-gradient(ellipse 60% 26% at 50% 76%,rgba(236,196,128,.20),transparent 70%),radial-gradient(ellipse 80% 70% at 50% 45%,var(--panel-2),var(--ink) 75%)}
.of__stage picture{position:relative;z-index:1;width:100%}
.of__img{width:108%;max-width:none;margin-left:-4%;height:auto;filter:drop-shadow(0 34px 30px rgba(0,0,0,.55))}
.of__arc{position:absolute;left:4%;right:4%;width:92%;bottom:9%;height:auto;z-index:0;overflow:visible}
.of__arc-back{fill:none;stroke:var(--brass);stroke-width:1;opacity:.18}
.of__arc-line{fill:none;stroke:var(--brass);stroke-width:1;opacity:.55}
/* 短い破線を太く引くと、弧に直交する目盛りの列になる（1本ずつ描かずに60本並ぶ） */
.of__arc-ticks{fill:none;stroke:var(--brass);stroke-width:9;stroke-dasharray:1.2 12.3;opacity:.5}
.of__arc-pin{fill:var(--ink);stroke:var(--brass-hi);stroke-width:1.2}

.of__panel{display:grid;gap:26px}
.of__price{padding-bottom:24px;border-bottom:1px solid var(--line)}
.of__later{font-size:.92rem;color:var(--muted);letter-spacing:.05em}
.of__later .numeral{font-size:1.15rem;color:var(--bone);margin-left:.2em}
.of__now{display:flex;align-items:center;flex-wrap:wrap;column-gap:14px;row-gap:6px;margin-top:10px}
.of__nowlabel{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--brass-hi);letter-spacing:.08em;border:1px solid var(--line-strong);border-radius:999px;padding:.1em .9em;align-self:center}
/* 「¥」＋数字＋「（税込）」は1つの塊で改行しない（ヒーローと同じ見せ方: 小さな¥・Bodoni の大きな数字・右下に小さく税込） */
.of__amount{--nfs:clamp(4rem,8vw,6.2rem);display:inline-flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;color:var(--brass-hi);line-height:1}
.of__yen{position:relative;top:-.3em;font-size:clamp(2rem,3.4vw,2.6rem);margin-right:.08em}/* 数字スロットの桁は下端揃えの箱なので、¥ の基準線を数字の底に合わせる */
.of__num{font-size:var(--nfs);font-weight:500;line-height:1}
.of__tax{align-self:flex-end;margin:0 0 calc(var(--nfs)*.16) .3em;/* 数字の箱の底ではなく、字の底（ベースライン）にそろえる */font-size:.9rem;color:var(--muted);white-space:nowrap}
.of__perday{margin-top:12px;font-size:.84rem;color:var(--muted)}
.of__loss{margin-top:6px;font-size:.92rem;color:var(--bone)}

.of__cd{padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.of__cdlabel{font-size:.84rem;color:var(--muted);letter-spacing:.06em}
.of__cdnums{display:flex;gap:clamp(10px,2vw,22px);margin-top:6px;align-items:baseline}
.of__cdu{display:inline-flex;align-items:baseline;gap:4px}
.of__cdu[hidden]{display:none}
.of__cdu b{font-weight:500;font-size:clamp(2rem,3.6vw,2.7rem);color:var(--bone);line-height:1.1;min-width:1.25em;text-align:right}
.of__cdu small{font-size:.76rem;color:var(--muted)}
.of__cdafter{margin-top:6px;font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--brass-hi)}
.of__cddate{margin-top:8px;font-size:.8rem;color:var(--muted);letter-spacing:.04em}
.of__cd.is-over .of__cdnums{display:none}

.of__quota{font-family:var(--f-display);font-weight:700;letter-spacing:.06em}
.of__bar{position:relative;height:6px;margin-top:10px;border-radius:999px;background:rgba(236,222,196,.1);overflow:hidden}
/* 伸びるのは区画に入った時の1回だけ（数字は固定・訪問ごとに変えない） */
.of__fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi));border-radius:inherit}
.js .of__sold:not(.is-in) .of__fill{transform:scaleX(0)}
.of__sold.is-in .of__fill{transition:transform var(--dur-l) var(--ease-sig) .2s}
.of__soldmeta{margin-top:10px;font-size:.86rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.of__soldmeta .numeral{font-size:1.1rem;color:var(--bone)}
.of__slash{margin:0 .15em;color:var(--dim)}
.of__rule{margin-top:8px;font-size:.8rem;line-height:1.7;color:var(--muted)}

.of__plans{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.of__plan{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"dot name" "dot price" "dot sub";column-gap:12px;row-gap:2px;align-content:start;padding:16px 16px 16px 14px;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);cursor:pointer;transition:border-color var(--dur-s) var(--ease-fn),background-color var(--dur-s) var(--ease-fn)}
.of__plan:hover{border-color:var(--line-strong)}
.of__plan input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
/* 選択の印は真鍮の軸ピン（丸＋中心の点） */
.of__dot{grid-area:dot;width:18px;height:18px;margin-top:4px;border:1px solid var(--line-strong);border-radius:50%;transition:border-color var(--dur-s) var(--ease-fn)}
.of__plan:has(input:checked){border-color:var(--brass);background:linear-gradient(180deg,rgba(201,164,104,.1),rgba(201,164,104,.03)),var(--panel)}
.of__plan:has(input:checked) .of__dot{border-color:var(--brass-hi);background:radial-gradient(circle,var(--brass-hi) 0 3.4px,transparent 4.2px)}
.of__plan:has(input:focus-visible){outline:2px solid var(--brass-hi);outline-offset:3px}
.of__pname{grid-area:name;font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:.05em}
.of__pbadge{position:absolute;top:-10px;right:12px;font-size:.7rem;letter-spacing:.06em;color:#1b1309;background:var(--brass);border-radius:999px;padding:.1em .8em;line-height:1.6}
.of__pbadge:empty{display:none}
.of__pprice{grid-area:price;font-size:1.4rem;color:var(--brass-hi)}
.of__psub{grid-area:sub;font-size:.76rem;color:var(--muted);line-height:1.6}

/* 並びは「緊急解除なしの注意 → 選んだ台数と金額 → ボタン → 補足」（何にいくら払うかをボタンの前に読む） */
.of__buy{display:grid;justify-items:start;gap:12px}
.of__emg{font-size:.84rem;line-height:1.75;color:var(--bone);padding-left:12px;border-left:2px solid var(--line-strong)}
.of__sel{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:.9rem;color:var(--muted)}
.of__selamt{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.of__selprice{font-size:1.4rem;color:var(--bone)}
.of__sel small{font-size:.74rem}
.of__ctanote{font-size:.8rem;color:var(--muted);line-height:1.8}

.of__terms{margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.of__incl{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.of__incl li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;line-height:1.7}
.of__incl svg{flex:none;margin-top:4px;color:var(--brass)}
.of__guard{display:flex;align-items:center;gap:22px}
.of__seal{position:relative;flex:none;width:118px;height:118px;display:grid;place-items:center;text-align:center}
.of__sealring{position:absolute;inset:0;width:100%;height:100%}
.of__sealring circle{fill:none;stroke:var(--brass)}
.of__sealring .r1{stroke-width:1;opacity:.8}
.of__sealring .r2{stroke-width:5;stroke-dasharray:.8 3.2;opacity:.55}
.of__sealring .r3{stroke-width:1;opacity:.45}
.of__sealtitle{position:relative;width:86px;font-family:var(--f-display);font-weight:700;font-size:.86rem;line-height:1.45;color:var(--brass-hi);letter-spacing:.04em}
.of__gbody{font-size:.92rem;line-height:1.85}
.of__ship{margin-top:6px;font-size:.84rem;color:var(--muted)}
.of__deliv{margin-top:2px}

.of__toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:70;max-width:min(440px,calc(100vw - 32px));padding:14px 20px;border-radius:var(--radius-lg);background:var(--panel-2);border:1px solid var(--line-strong);box-shadow:0 18px 40px -16px rgba(0,0,0,.8);font-size:.86rem;line-height:1.7;color:var(--bone);
  transform:translate(-50%,16px);opacity:0;visibility:hidden;transition:opacity var(--dur-s) var(--ease-fn),transform var(--dur-m) var(--ease-sig),visibility 0s linear var(--dur-m)}
.of__toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--dur-s) var(--ease-fn),transform var(--dur-m) var(--ease-sig),visibility 0s}
.of__toast:empty{display:none}

@media (max-width:960px){
  .of__grid{grid-template-columns:1fr}
  .of__stage{position:relative;top:auto;aspect-ratio:16/10}
  .of__terms{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* スマホは詰める（監査1周目: 約1,850px）。舞台を横長に、段の間・枠の余白を小さく、含まれるものは2列 */
  .of__grid{margin-top:24px;gap:18px}
  .of__stage{aspect-ratio:16/8.4}
  .of__img{width:94%;margin-left:3%}
  .of__panel{gap:18px}
  .of__price{padding-bottom:18px}
  .of__amount{--nfs:3.5rem}
  .of__yen{font-size:1.7rem}
  .of__now{column-gap:10px}
  .of__nowlabel{font-size:.9rem}
  .of__cd{padding:14px 16px}
  .of__cdu b{font-size:2rem}
  .of__terms{margin-top:32px;padding-top:24px;gap:24px}
  .of__incl{grid-template-columns:1fr 1fr;gap:10px 14px}
  .of__incl li{font-size:.82rem;line-height:1.6;gap:6px}
  .of__incl svg{width:16px;height:16px;margin-top:2px}
  /* 購入ボタンを区画の先頭から1画面以内へ（監査2周目: 先頭から約1,300px下だった）。
     ①商品写真は最初の画面と同じ絵のくり返しなので高さ140pxの帯に縮める
     ②並びを「価格 → プラン → 緊急解除の注意・金額・ボタン → 締切の残り → 先着」にする（締切の日付はボタンの下の補足にもある）。
       DOM の順は変えない（カウントダウン・先着にはフォーカスする物が無いので、タブ移動の順は変わらない） */
  .of{padding-top:48px}
  .of__stage{aspect-ratio:auto;height:128px}
  .of__stage picture{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}
  .of__img{width:auto;height:100%;max-width:100%;margin-left:0;object-fit:contain}
  .of__arc{bottom:4%;left:14%;right:14%;width:72%}
  .of__grid{margin-top:18px;gap:14px}
  .of__panel{gap:12px}
  .of__price{order:1;padding-bottom:14px}
  .of__now{margin-top:6px}
  .of__perday{margin-top:8px}
  .of__plans{order:2}
  .of__buy{order:3;gap:10px}
  .of__cd{order:4}
  .of__sold{order:5}
  .of__plan{padding-block:11px}
  /* 「選んだ台数と金額」の行は、スマホでは選んだカードの枠とボタンの言葉（台数と金額入り）の3重になるので見た目だけ隠す
     （読み上げには残す＝aria-live で選び直しを知らせる） */
  .of__sel{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* 幅320〜360: オファーのCTA「1台 ¥3,980で、一砂を迎える」を1行に（2行に折れるとボタンの形が崩れる・監査2周目） */
@media (max-width:360px){
  .of__cta{font-size:.92rem;letter-spacing:.04em;padding-inline:1em;gap:.6em}
}
@media (max-width:560px){
  .of__plan{padding:14px 12px 14px 10px;column-gap:8px}
  .of__pprice{font-size:1.2rem}
  .of__guard{align-items:flex-start}
  .of__seal{width:96px;height:96px}
  .of__sealtitle{width:70px;font-size:.76rem}
}

/* ───────── 80 faq ───────── */
.fq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.fq__head{position:sticky;top:calc(var(--topbar-h) + 32px)}
.fq__list{border-top:1px solid var(--line)}
.fq__item{border-bottom:1px solid var(--line)}
.fq__item summary{list-style:none;display:grid;grid-template-columns:2.6em 1fr auto;align-items:center;gap:12px;min-height:64px;padding:18px 4px;cursor:pointer;border-radius:2px}
.fq__item summary::-webkit-details-marker{display:none}
.fq__no{font-style:italic;color:var(--brass);font-size:1rem;letter-spacing:.04em}
.fq__q{font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.6;letter-spacing:.04em}
.fq__icon{color:var(--brass);transition:transform var(--dur-m) var(--ease-sig)}
.fq__item[open] .fq__icon{transform:rotate(135deg)}
.fq__item summary:hover .fq__q{color:var(--brass-hi)}
.fq__a{padding:0 4px 24px calc(2.6em + 16px);color:var(--muted);font-size:.95rem;line-height:1.95}
.fq__item[open] .fq__a{animation:fq-in var(--dur-m) var(--ease-sig)}
@keyframes fq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:900px){.fq__grid{grid-template-columns:1fr}.fq__head{position:static}.fq__a{padding-left:4px}}

/* ───────── 90 final ───────── */
.fn{background:radial-gradient(ellipse 70% 60% at 30% 50%,rgba(236,196,128,.06),transparent 70%),var(--ink)}
.fn__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.fn__photo{aspect-ratio:16/9}
.fn__text{position:relative}
.fn__title{font-size:clamp(2rem,4.8vw,3.4rem)}
/* 「おかえりなさい。」を語の途中で折らない（960〜1179pxで「おかえりなさ／い。」になっていた） */
.fn__title .ln>span{white-space:nowrap}
@media (min-width:901px) and (max-width:1180px){.fn__title{font-size:clamp(2rem,3.6vw,2.6rem)}}
.fn__buy{margin-top:clamp(28px,4vw,40px);display:grid;justify-items:start;gap:12px}
.fn__note{font-size:.8rem;color:var(--muted);line-height:1.8}
/* 砂時計のくびれ：細い真鍮の線の中を、最後の1粒が1回だけ落ちて小さな山に加わる */
.fn__neck{position:relative;width:2px;height:64px;margin:0 0 22px 2px;background:linear-gradient(180deg,transparent,var(--line-strong) 30%,var(--line-strong))}
.fn__grain{position:absolute;left:-1px;top:0;width:4px;height:4px;border-radius:50%;background:var(--sand);opacity:0}
.fn__pile{position:absolute;left:-9px;bottom:-4px;width:20px;height:6px;border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--sand);opacity:.85;transform-origin:bottom;transform:scaleY(.8)}
.fn.is-in .fn__grain{animation:fn-grain 2.4s var(--ease-fn) .6s 1 both}
.fn.is-in .fn__pile{animation:fn-pile .5s var(--ease-sig) 2.8s 1 both}
@keyframes fn-grain{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1;transform:translateY(58px)}100%{opacity:0;transform:translateY(60px)}}
@keyframes fn-pile{from{transform:scaleY(.8)}to{transform:scaleY(1)}}
@media (max-width:900px){.fn__grid{grid-template-columns:1fr}.fn__buy{justify-items:stretch}.fn__neck{height:48px}}
@media (max-width:760px){.fn__grid{gap:24px}.fn__neck{height:36px;margin-bottom:14px}.fn__buy{margin-top:22px}}

/* ───────── 95 固定の小物 ───────── */
.fx-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(17,14,11,.94);border-top:1px solid var(--line-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:translateY(110%);visibility:hidden;transition:transform var(--dur-m) var(--ease-sig),visibility 0s linear var(--dur-m)}
.fx-bar[data-show="1"]{transform:none;visibility:visible;transition:transform var(--dur-m) var(--ease-sig),visibility 0s}
.fx-bar__text{font-size:.82rem;line-height:1.5;color:var(--bone);min-width:0}
.fx-bar .btn.fx-bar__cta{flex:none;min-height:46px;padding:0 1.4em;font-size:.92rem}
@media (max-width:760px){.fx-bar{display:flex}}

.fx-gauge{position:fixed;right:14px;top:50%;z-index:40;display:none;width:28px;height:84px;margin-top:-42px;color:var(--brass);opacity:0;visibility:hidden;transition:opacity var(--dur-m) var(--ease-fn),visibility 0s linear var(--dur-m)}
.fx-gauge[data-show="1"]{opacity:1;visibility:visible;transition:opacity var(--dur-m) var(--ease-fn),visibility 0s}
.fx-gauge svg{width:100%;height:100%;overflow:visible}
/* 紙色の区画（#craft）の上でも白い砂が消えないよう、ゲージの後ろに小さな墨の台を敷く */
.fx-gauge::before{content:"";position:absolute;inset:-8px -8px;border-radius:999px;background:rgba(11,9,7,.72);z-index:-1}
.fx-g__sand{fill:var(--sand);opacity:.9}
.fx-g__stream{stroke:var(--sand);stroke-width:.9;opacity:.55}
.fx-gauge.is-empty .fx-g__stream,.fx-gauge.is-full .fx-g__stream{opacity:0}
.fx-g__glass{fill:none;stroke:rgba(236,222,196,.5);stroke-width:1.1}
.fx-g__plate{fill:none;stroke:var(--brass);stroke-width:2.2;stroke-linecap:round}
.fx-g__post{fill:none;stroke:var(--brass);stroke-width:1.6}
.fx-g__pin{fill:var(--ink);stroke:var(--brass-hi);stroke-width:1}
@media (min-width:1100px){.fx-gauge{display:block}}

/* ───────── 99 footer ───────── */
.ft{padding:clamp(56px,7vw,88px) 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--ink)}
.ft__in{display:grid;gap:10px;justify-items:start}
.ft__brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px}
.ft__brand .mark{color:var(--brass)}
.ft__name{font-family:var(--f-display);font-weight:900;font-size:1.3rem;letter-spacing:.12em}
.ft__latin{font-family:var(--f-latin);font-size:.66rem;letter-spacing:.42em;color:var(--muted)}
.ft .note{color:var(--muted)}
.ft__legal{color:var(--muted)}
.ft__fiction{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);width:100%;font-size:.82rem;color:var(--bone);letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){
  .tb,.fx-bar,.fx-gauge,.of__toast,.of__plan,.fq__icon{transition:none!important}
  .of__fill,.of__sold.is-in .of__fill,.js .of__sold:not(.is-in) .of__fill{transition:none!important;transform:scaleX(var(--p,0))!important}
  .fq__item[open] .fq__a{animation:none}
  .fn.is-in .fn__grain{animation:none}
  .fn.is-in .fn__pile,.fn__pile{animation:none;transform:none}
}