@charset "utf-8";
/* ============================================================
   薪窯ピッツァとワイン酒場 NADESHICO — 写経元 https://bit2013.com/（Tsubamesanjo Bit）
   数値は _bench/source/{measure.json,structure.json} の 1440px 実測に基づく。
   - 地色 rgb(247,233,225) / 文字 #000・#1A1A1A / アクセント rgb(129,51,60)
   - 本文 p = 14.4px / line-height 25.2px(=1.75) / letter-spacing normal（structure.json 実測）
   - 字間 0.06em はベンチでも「見出し・ラベル・リンク」に付く。本文には付けない
   - 外周 padding 61.71px @1440（= 4.28vw）／内側 82.29px・131.66px
   - ベンチの装飾欧文は section.shop の h3 = 123.43px（12rem）。DESIGN_RULES §3-1
     【唯一のデザインハーネス】が写経より優先するので 4rem で頭打ちにする。
     ベンチ section.mv の h1 は 16.46px と小さく、こちらは実装のほうが大きい（和文の主見出しのため）。
   ※ ルート font-size は 16px のまま（Tailwind の text-* が編集バーで効くため変更しない）
   ============================================================ */

:root{
  --bg:#f7e9e1;          /* rgb(247,233,225) 実測 */
  --wash:#fff1e8;        /* rgb(255,241,232) 実測 */
  --ink:#000;
  --ink-2:#1a1a1a;       /* rgb(26,26,26) 実測 */
  --accent:#81333c;      /* rgb(129,51,60) 実測（フッター全面地色） */
  --line:#ccc1ba;        /* rgb(204,193,186) 実測 */
  --brown:#704b2c;       /* rgb(112,75,44) 実測 */
  --gutter:clamp(20px,4.28vw,62px);   /* .wrap padding 61.71px @1440 */
  --gutter-in:clamp(16px,5.71vw,82px);/* 内側 wrap 82.29px @1440 */
  --ls:.06em;                          /* letter-spacing 実測 */
  --serif:"Shippori Mincho B1","Shippori Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  --display:"Cormorant Garamond",Garamond,"Times New Roman",var(--serif);
  --sans:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --ease:cubic-bezier(.22,.7,.2,1);
}

/* ── 基本 ───────────────────────────────────────────── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(13.5px,1vw,14.4px); /* ベンチ実測 p=14.4px @1440（structure.json）*/
  line-height:1.75;                   /* ベンチ実測 25.2/14.4 */
  letter-spacing:normal;              /* ベンチの本文 p は ls:normal。字間は見出し・ラベル・リンクに限る */
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--wash)}

.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap-in{padding-left:var(--gutter-in);padding-right:var(--gutter-in)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{position:fixed;left:12px;top:12px;z-index:100000;background:var(--ink-2);color:var(--wash);padding:10px 16px}

/* ── 型階層（ベンチの比を保ち、ハーネスの上限で頭打ちにする）──── */
.en{font-family:var(--display);letter-spacing:.14em;font-weight:400;text-transform:none}
.en-display{                      /* ベンチ h3 123.43px（12rem）に相当する装飾欧文 */
  font-family:var(--display);
  font-size:clamp(2.2rem,5.2vw,4rem);
  line-height:.82; letter-spacing:.04em; font-weight:400; color:var(--ink-2);
}
.en-display span{display:block}
.label-ja{                        /* 欧文に添える和文小ラベル（ベンチの型） */
  font-size:clamp(12px,.85vw,13px); letter-spacing:.32em; color:var(--brown);
}
h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.35;font-weight:400;letter-spacing:.1em}
h2,h3{font-size:clamp(1.3rem,3vw,2rem);line-height:1.7;font-weight:400;letter-spacing:.1em}
h4{font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.8;font-weight:500;letter-spacing:.08em}
/* 和文の折り返し。既定では「定/休日」「注いで/いる」のように語の途中で割れる。
   auto-phrase は文節境界で改行する（Chrome 119+。非対応環境は従来動作のまま）。 */
body{word-break:auto-phrase;line-break:strict}
p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(14.5px,1.2vw,17px);line-height:2.0;letter-spacing:.02em}
.note{font-size:clamp(12px,.8vw,12.5px);color:#5c5048;line-height:1.9}

/* ── 節の間合い（ベンチ: 各節 888〜1210px）──────────────── */
/* 節の間合い。ベンチの節高は 888〜1210px で、実装は 129.6px の上下パディングを積んだ結果
   全高の 20.5% が空白になっていた（1440px 実測）。ベンチのリズムに寄せて詰める。 */
/* padding の一括指定は使わない。`padding: X 0` は左右を 0 にするので、
   .section と .wrap を併せ持つ要素（.page-hero 等）で .wrap のガターが消える。
   縦だけを指定し、左右は .wrap に任せる。 */
.section{padding-block:clamp(58px,7vw,104px);position:relative}
/* 中身の薄い節（100字あたりの縦px が大きい節）はさらに詰める。
   instagram 2345px/100字・journal 851・reviews 699・news 691・stats 650 が実測の外れ値。 */
.section--tight{padding-block:clamp(40px,4.8vw,72px)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(12px,1.6vw,22px);margin-bottom:clamp(26px,3.2vw,46px)}
.section-head .label-ja{padding-bottom:.5em;white-space:nowrap}
/* ベンチ（燕三条Bit / section.news）を _bench/source/bench-full.png で実測した結果:
   大欧文1行目「News」と和文ラベル「お知らせ」の左端が揃い（x≈175）、2行目「Release」だけが
   字下げされ（x≈295）、その字下げ分にラベルが収まっている。実装は両行が同じ左端で、
   ラベルが宙に浮いていた。**2行組のときだけ**この型を再現する
   （1行組はベンチに手本が無いので触らない＝独自に設計しない）。 */
@media(min-width:861px){
  /* position:relative だけを足す。.wrap の padding は絶対に潰さない
     （padding-left:0 にすると大欧文ごと画面左端に張り付く）。 */
  .section-head:has(.en-display span + span){position:relative}
  .section-head:has(.en-display span + span) .en-display span + span{margin-left:2.6em}
  .section-head:has(.en-display span + span) .label-ja{
    position:absolute; left:var(--gutter); bottom:.35em; padding-bottom:0;
  }
}
/* 見出し帯の右側。ベンチ（section.news）は大欧文の右に「各店舗の営業日は…」の和文2行を
   右寄せで置いており、右側を空けたままにしていない。ここを空にすると節が作りかけに見える。 */
.section-head .head-aside{
  margin-left:auto; text-align:right; max-width:46ch; padding-bottom:.4em;
  font-size:clamp(12px,.85vw,13px); line-height:1.95; color:#5c5048; letter-spacing:.04em;
  text-wrap:pretty;   /* 「す。」が1文字だけ次行に残る組版を避ける */
}
@media(max-width:860px){
  /* 狭幅では右寄せだと大欧文とぶつかって読みにくい。回り込ませて左寄せに戻す。 */
  .section-head .head-aside{margin-left:0;text-align:left;max-width:none;flex-basis:100%;padding-bottom:0}
}
/* 狭幅では字間の広いラベルが折り返せず横はみ出しになる（320px で実測）→ 折り返しを許す */
@media(max-width:420px){
  .section-head .label-ja{white-space:normal;overflow-wrap:anywhere;letter-spacing:.2em}
  .en-display,.mv-word{overflow-wrap:anywhere}
}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ── ボタン（ベンチ: View More ＋ 丸矢印）──────────────── */
.more{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);
  font-size:clamp(14px,1.1vw,17px);letter-spacing:.12em;color:var(--accent)}
.more .circle{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--wash);
  display:grid;place-items:center;font-size:14px;transition:transform .5s var(--ease)}
.more:hover .circle{transform:translateX(6px)}
.more--light{color:var(--wash)}
.more--light .circle{background:var(--wash);color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid currentColor;padding:.95em 2.2em;font-size:clamp(12px,.95vw,14px);
  letter-spacing:.16em;transition:background .4s var(--ease),color .4s var(--ease)}
.btn:hover{background:var(--ink-2);color:var(--bg)}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--wash)}
.btn--accent:hover{background:var(--ink-2);border-color:var(--ink-2)}

/* ── ローダー（クラス名は preloader＝検査対象語）────────── */
/* JS が1行も動かなくても必ず消える。JS 側の remove() は「早く消す」だけの役割で、
   解除そのものは CSS が持つ（assets/site.js が404/CSPで落ちても白画面にしない）。 */
#preloader{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
  background:var(--bg);transition:opacity .8s var(--ease);pointer-events:none;
  animation:plout .8s var(--ease) 2.6s forwards}
@keyframes plout{to{opacity:0;visibility:hidden}}
#preloader.is-done{opacity:0}
/* ローダーは店のロゴ。文字ではなく実体のある印を出す。
   <img> で持つ（JS で差し込むと Stem 配信でパスが書き換わらず404になる）。 */
#preloader .mark{display:grid;place-items:center}
#preloader .mark img{width:clamp(58px,7vw,96px);height:auto;
  animation:plmark 2.6s var(--ease) infinite}
@keyframes plmark{0%,100%{opacity:.32;transform:translateY(4px) scale(.985)}
  50%{opacity:1;transform:none}}
/* ヘッダーはロゴマーク＋文字。バーの高さ(58〜72px)を超えないよう、
   マークはバー高に収まる寸法に固定する。 */
.brand .bmark{width:auto;height:clamp(30px,3vw,40px);flex:none}
.brand .btext{display:flex;flex-direction:column;line-height:1.1}

/* ── ヘッダー（ベンチ: position:fixed）──────────────────── */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:900;
  background:rgba(247,233,225,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;
  height:clamp(58px,4.6vw,72px);padding:0 var(--gutter)}
.brand{display:flex;flex-direction:row;align-items:center;gap:10px;line-height:1.1}
.brand .word{font-family:var(--display);font-size:clamp(17px,1.5vw,22px);letter-spacing:.2em;color:var(--ink-2)}
.brand .sub{font-size:12px;letter-spacing:.28em;color:var(--brown);margin-top:3px}
.nav{display:none;gap:clamp(14px,1.7vw,26px);font-size:clamp(12px,.85vw,13px);letter-spacing:.1em}
.nav a{position:relative;padding-bottom:3px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav a:hover::after{width:100%}
.header-cta{display:flex;align-items:center;gap:10px}
.navbtn{width:40px;height:40px;display:grid;place-items:center;gap:5px;border:1px solid var(--line);background:none}
.navbtn span{display:block;width:16px;height:1px;background:var(--ink-2)}
@media(min-width:1080px){.nav{display:flex}.navbtn{display:none}}
#drawer{position:fixed;inset:0;z-index:950;background:var(--bg);padding:calc(var(--gutter) + 60px) var(--gutter);
  display:none;overflow-y:auto}
#drawer[open]{display:block}
#drawer .dnav{display:grid;gap:1.6em;font-size:clamp(15px,2.6vw,19px);letter-spacing:.12em}
#drawer .close{position:absolute;top:18px;right:var(--gutter);font-size:24px;background:none;border:0;line-height:1}

/* ── タップ領域の確保（指で押せる大きさ。文字サイズは変えない）──── */
.site-header .brand{padding:6px 0;min-height:44px;justify-content:center}
.header-cta .note{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.navbtn{width:44px;height:44px}
.nav a{padding:12px 0}
/* フッターナビと、アクセス欄・フッターの tel: リンク。32px では指で押せない（実測 35px）。
   文字サイズは変えず、padding だけで 44px を確保する。 */
.site-footer .fnav a{display:inline-block;padding:11px 0;min-height:44px}
.site-footer .note a,.dl dd a,[data-stem-citations] .note a{display:inline-flex;align-items:center;padding:11px 0;min-height:44px}
#drawer .dnav a{padding:8px 0;min-height:44px;display:flex;align-items:center}
.faq-list summary{min-height:44px}
.slider-nav button{width:44px;height:44px}
.more{padding:8px 0;min-height:44px}
.cat span{padding:4px 0}

/* ── FV（ベンチ mv: 分割ビジュアル＋中央ワードマーク）──────── */
.mv{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.mv-visual{position:absolute;inset:0;display:grid;grid-template-columns:1fr}
.mv-visual .pane{position:relative;overflow:hidden}
.mv-visual .pane img{width:100%;height:100%;object-fit:cover}
/* 旧FVは不透明ボタンが CTA の可読性を担保していた。ボタンを外した以上、
   文字の可読性はスクリムの仕事になる。実ピクセル測定で .5 では SP の CTA が
   3.31:1、ラベルが 2.61:1 まで落ちたため濃くする（数値は §検証で実測して決めた）。 */
.mv-visual .pane::after{content:"";position:absolute;inset:0;background:rgba(20,14,12,.54)}
/* さらに、文字が集まる側だけ局所的に落とす。PC は中央帯、SP は下端。 */
.mv-visual::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,9,7,0) 0%,rgba(14,9,7,.34) 46%,rgba(14,9,7,.5) 100%)}
@media(min-width:840px){
  .mv-visual::after{background:linear-gradient(to bottom,rgba(14,9,7,0) 0%,rgba(14,9,7,.35) 50%,rgba(14,9,7,.05) 100%)}
}
/* 中央に見出し→リード→ボタン2つを積む型は「いかにもテンプレート」に見えるため撤去した
   （2026-08-07 ユーザー判断）。代わりに写経元が concept 節で使っている
   「縦組みの見出しを分割線の脇に立て、反対側に和文を置く」型を FV に持ってくる。
   ※ 縦組みは和文の型。EN と狭幅では必ず横組みに戻す（下の解除ブロック）。 */
.mv-inner{position:relative;z-index:2;width:100%;padding:0 var(--gutter);text-align:left;color:var(--wash)}
/* 旧FVの主CTAは不透明ボタン（地色 #81333c）で、写真によらず 7.7:1 を保証していた。
   ボタンを外した以上、文字の可読性は写真次第になる。実ピクセル測定で SP の CTA が
   最悪 3.31:1 まで落ちたため、写真上に乗る文字だけ影を敷いて底上げする
   （地色を敷き直すとボタンに戻ってしまい、ユーザー要件に反する）。 */
.mv-inner .label-ja,.mv h1,.mv .mv-copy,.mv-cta,.mv-word,.mv .scroll-cue{
  text-shadow:0 1px 3px rgba(12,8,6,.72),0 0 14px rgba(12,8,6,.45);
}
.mv-inner .label-ja{color:#e6d6c8;margin:0}
.mv-word{font-family:var(--display);letter-spacing:.22em;line-height:1;color:#fff}
.mv h1{color:#fff;letter-spacing:.24em;margin:0}
.mv .mv-copy{color:#eadfd4;margin:0 0 1.5em}
.mv-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start}
/* 丸矢印は CSS の ::after で作る。span で作ると data-en / data-stem-ab の
   テキスト差し替えで矢印ごと消える（mirror_en も Stem の B面も内側を丸ごと置換するため）。 */
.mv-cta{display:inline-flex;align-items:center;gap:14px;min-height:44px;
  font-size:clamp(13px,1.05vw,15px);letter-spacing:.14em;color:var(--wash)}
.mv-cta::after{content:"→";flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--wash);color:var(--accent);display:grid;place-items:center;font-size:14px;
  transition:transform .5s var(--ease)}
.mv-cta:hover::after{transform:translateX(6px)}
.mv .scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  color:#e6d6c8;font-family:var(--display);font-size:12px;letter-spacing:.3em;display:grid;justify-items:center;gap:8px}
.mv .scroll-cue i{display:block;width:1px;height:44px;background:rgba(230,214,200,.5);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(min-width:840px){.mv-visual{grid-template-columns:1fr 1fr}}

/* ── FV 広幅: 分割線を軸に、左＝縦組み見出し／右＝和文リード＋導線 ── */
@media(min-width:840px){
  .mv{align-items:center}
  .mv-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0;
    align-self:stretch;align-content:center}
  /* セル幅いっぱいに広げて右詰めにする。内容幅（justify-self:end）にすると、
     Stem の B面で見出しを長くしたとき縦組みが**右へ**膨らみ、25字で分割線を越え、
     40字でリード文を貫通する（実測）。A-10 は「中身だけ差し替え＝レイアウト不変」が契約。
     セル幅に固定すれば、伸びる方向は左（写真側の余白）になる。 */
  .mv-left{display:flex;align-items:center;justify-content:flex-end;min-width:0;
    gap:clamp(14px,1.7vw,28px);padding-right:clamp(28px,3.4vw,56px)}
  /* text-orientation:upright は数字も正立させる＝「徒歩2分」の 2 が倒れない。
     concept 節の縦組みと同じ指定にそろえている。 */
  .mv h1{writing-mode:vertical-rl;text-orientation:upright;
    font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:2;height:min(58svh,460px)}
  /* ラベルは和欧混在（「薪窯ピッツァとワイン酒場 NADESHICO ／ 滋賀・草津」）。upright にすると
     nadeshico が1文字ずつ縦積みになって読めない。mixed なら和文は正立・欧文は
     90°回転した一続きの語として組まれる＝縦組み和文の正しい作法。 */
  .mv-inner .label-ja{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.24em}
  /* padding-right は必須。.mv-inner の padding を 0 にしているので、これが無いと
     840〜900px でリード文が画面右端に密着して文字が切れる（実測: 840/860px で右余白 0px）。 */
  .mv-right{padding-left:clamp(28px,3.4vw,56px);padding-right:var(--gutter);max-width:32em}
  .mv-word{position:absolute;left:var(--gutter);bottom:clamp(24px,3.2vw,48px);margin:0;
    font-size:clamp(1.05rem,1.6vw,1.4rem)}
}

/* ── FV 狭幅: 縦組みをやめて下寄せの横組みに（SP で縦組みは読めない）── */
@media(max-width:839px){
  .mv{align-items:flex-end}
  /* DOM は 左(ラベル・見出し) → 右(リード・CTA) → ワードマーク の順。
     そのまま縦に積むとワードマークが CTA の下＝最下部に落ちて SCROLL と重なる。
     flex にして order で先頭へ戻す（DOM順は Stem の差し替え単位なので変えない）。 */
  .mv-inner{display:flex;flex-direction:column;padding-bottom:clamp(76px,13vw,104px)}
  /* SCROLL は中央下。SP では左寄せの CTA と重なるので右端へ逃がす（装飾なので位置は自由）。 */
  .mv .scroll-cue{left:auto;right:var(--gutter);transform:none}
  .mv-word{order:-1;font-size:clamp(1.5rem,6.4vw,2.1rem);margin:0 0 .15em;display:block}
  .mv h1{font-size:clamp(1.22rem,5.2vw,1.65rem);line-height:1.8;letter-spacing:.12em;margin:.55em 0 .9em}
  .mv .mv-copy{font-size:clamp(12.5px,3.4vw,13.5px)}
}

/* ── 縦組みの解除（英語）─────────────────────────────
   縦組みは和文の組版。英文に vertical-rl + text-orientation:upright を掛けると
   1文字ずつ縦に積まれて読めなくなる。EN では必ず横組みに戻す。
   ※ FV だけでなく concept 節にも掛ける（EN の concept 見出しが実際に
      "A bar where Omi's flavors gather." を1文字ずつ縦積みにしていた／2026-08-07 実測）。 */
html[lang="en"] .mv h1,
html[lang="en"] .mv-inner .label-ja,
html[lang="en"] .concept-vertical h2,
html[lang="en"] .concept-vertical .en{
  writing-mode:horizontal-tb;text-orientation:mixed;height:auto;
}
html[lang="en"] .concept-vertical{writing-mode:horizontal-tb;flex-direction:column;
  align-items:flex-start;text-align:left;gap:.6em}
@media(min-width:840px){
  html[lang="en"] .mv-left{display:block;justify-self:start;padding-left:var(--gutter);padding-right:0}
  html[lang="en"] .mv h1{font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.65;letter-spacing:.06em;
    max-width:16em;margin-top:.5em}
  html[lang="en"] .mv-inner .label-ja{letter-spacing:.24em}
  /* .mv-inner を全高にしたので、EN でもワードマークは FV の左下に落ち着く（JA と同位置）。 */
}

/* ── コンセプト（ベンチ concept: 縦書き h2）────────────── */
.concept{padding-block:clamp(64px,7.8vw,112px)}
.concept-grid{display:grid;gap:clamp(30px,4vw,64px);align-items:center}
.concept-vertical{display:flex;justify-content:center;gap:clamp(16px,2vw,30px)}
.concept-vertical h2{
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:clamp(1.35rem,3vw,2rem); line-height:2; letter-spacing:.22em;
  height:min(56vh,420px); margin:0;
}
.concept-vertical .en{writing-mode:vertical-rl;font-size:clamp(12px,1vw,14px);letter-spacing:.28em;color:var(--brown);height:min(30vh,220px)}
.concept-figure{position:relative}
.concept-figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.concept-figure .sub{position:absolute;right:-8%;bottom:-8%;width:44%;border:8px solid var(--bg);display:none}
.concept-figure .sub img{aspect-ratio:1/1}
@media(min-width:840px){
  .concept-grid{grid-template-columns:auto 1.1fr 1fr}
  .concept-figure .sub{display:block}
}
@media(max-width:839px){
  .concept-vertical{writing-mode:horizontal-tb}
  .concept-vertical h2,.concept-vertical .en{writing-mode:horizontal-tb;height:auto;text-orientation:mixed}
  .concept-vertical{flex-direction:column;align-items:center;text-align:center}
}

/* ── 数字（stats）──────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stats > div{background:var(--bg);padding:clamp(20px,2.4vw,32px) clamp(14px,1.6vw,22px);text-align:center}
.stats .num{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;color:var(--accent);letter-spacing:.03em}
.stats .cap{font-size:clamp(12px,.85vw,13px);letter-spacing:.14em;margin-top:.7em;color:#4a3f39}
@media(min-width:840px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ── スライダー（ベンチ shop: フルブリード写真＋ラベル＋進捗）── */
.slider{position:relative}
.slider-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.slider-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;position:relative;min-height:clamp(360px,54vw,620px)}
.slide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,11,9,.72),rgba(16,11,9,.18))}
.slide .cap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,4vw,54px) var(--gutter);color:var(--wash);min-height:inherit}
.slide .cap .en-display{color:#fff}
.slide .cap .label-ja{color:#e6d6c8}
.slide .cap p{color:#e9ded4;max-width:44ch;margin-top:.9em}
.slider-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--gutter) 0}
.slider-nav{display:flex;gap:10px}
/* 44px。上の「タップ領域の確保」ブロック(:142)より後段なのでこちらが勝つ。
   ここを 40px に戻すと、あちらのルールは無言で無効になる。 */
.slider-nav button{width:44px;height:44px;border:1px solid var(--line);background:none;color:var(--ink-2);
  display:grid;place-items:center;font-size:13px}
.slider-nav button:hover{background:var(--ink-2);color:var(--bg)}
.progress{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:13px;letter-spacing:.1em;color:var(--brown)}
.progress .bar{width:clamp(60px,10vw,140px);height:1px;background:var(--line);position:relative}
.progress .bar i{position:absolute;left:0;top:0;height:1px;background:var(--accent);transition:width .5s var(--ease)}

/* ── 2カラム（craft / space）───────────────────────── */
.duo{display:grid;gap:clamp(26px,4vw,60px);align-items:center}
/* テキストセルに上限が無いと、広幅で 60字/行 まで伸びる（1920px 実測）。
   和文は 45字前後を超えると行を追うのがつらい。他の本文と同じ 40em にそろえる。 */
.duo > div:not(.duo-media) p,.concept-grid > div:not(.concept-vertical):not(.concept-figure) p{max-width:40em}
.duo img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:840px){.duo{grid-template-columns:1fr 1fr}.duo.rev > .duo-media{order:2}}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1vw,14px)}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media(min-width:840px){.gallery{grid-template-columns:repeat(3,1fr)}
  .gallery .tall{grid-row:span 2}.gallery .tall img{aspect-ratio:3/4;height:100%}}

/* ── 罫線リスト（ベンチ news の型。お知らせ・メニュー抜粋に流用）── */
.list-grid{display:grid;gap:clamp(24px,3vw,48px)}
@media(min-width:900px){.list-grid{grid-template-columns:minmax(180px,240px) 1fr}}
.cat{display:grid;gap:1.05em;font-size:clamp(12px,.9vw,13.5px);letter-spacing:.12em;align-content:start}
.cat span{color:#5c5048}
.cat .on{color:var(--ink-2);border-bottom:1px solid var(--accent);padding-bottom:.3em;justify-self:start}
.rows{border-top:1px solid var(--line)}
.rows .row{display:block;border-bottom:1px solid var(--line);padding:clamp(16px,1.7vw,24px) 0}
.rows .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.9em;font-size:clamp(12px,.8vw,12.5px);
  letter-spacing:.12em;color:#5c5048;margin-bottom:.55em}
.rows .meta .y{font-family:var(--display)}
/* 1440px で 68字/行まで伸びていた。和文は 45字前後を超えると行を追うのがつらい。 */
.rows .ttl{font-size:clamp(13.5px,1.05vw,16px);line-height:1.85;letter-spacing:.02em;max-width:44em}
.rows a.row:hover .ttl{color:var(--accent)}
.rows .price{float:right;font-family:var(--display);color:var(--accent);letter-spacing:.06em;margin-left:1em}

/* ── 地域×コンセプトSEO ─────────────────────────────── */
/* 62ch = 32字/行しかなかった（ch は欧文 "0" 幅で和文では約半分）。 */
.local-body p{max-width:40em}
.kw-chips{display:flex;flex-wrap:wrap;gap:8px;margin:1.6em 0}
.kw-chips span{border:1px solid var(--line);padding:.42em 1em;font-size:clamp(12px,.8vw,12.5px);
  letter-spacing:.1em;color:#4a3f39;background:var(--wash)}

/* ── 口コミ ────────────────────────────────────────── */
.rating-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7em;margin-bottom:1.6em}
.rating-line .stars{color:var(--accent);letter-spacing:.18em}
.rating-line .val{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);color:var(--accent)}
.reviews{display:grid;gap:clamp(14px,1.6vw,22px)}
@media(min-width:840px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:var(--wash);border:1px solid var(--line);padding:clamp(18px,2vw,28px)}
.review .rv-stars{color:var(--accent);letter-spacing:.16em;font-size:13px;margin-bottom:.7em}
.review p{font-size:clamp(12.5px,.92vw,14px);line-height:2.05}
.review .who{margin-top:1em;font-size:12px;letter-spacing:.1em;color:#5c5048}

/* ── Instagram ─────────────────────────────────────── */
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(6px,.8vw,12px);min-height:200px}
@media(min-width:720px){.ig-grid{grid-template-columns:repeat(4,1fr)}}
.ig-grid a,.ig-grid figure{display:block;margin:0}
.ig-grid img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ── FAQ ───────────────────────────────────────────── */
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:clamp(15px,1.6vw,22px) 2.4em clamp(15px,1.6vw,22px) 0;
  position:relative;font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.8}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:.2em;top:50%;transform:translateY(-50%);
  color:var(--accent);font-family:var(--display);font-size:1.3em}
.faq-list details[open] summary::after{content:"–"}
.faq-list .a{padding:0 0 clamp(16px,1.8vw,24px);color:#3d342f;max-width:40em}
.faq-cat{margin-top:clamp(34px,4vw,56px)}
.faq-cat:first-of-type{margin-top:0}
.faq-cat > h2{margin-bottom:.9em;color:var(--accent)}

/* ── フルブリード（ベンチ recruit の型 → ご予約）────────── */
.bleed{position:relative;min-height:clamp(420px,60vw,700px);display:grid;place-items:center;overflow:hidden;text-align:center}
.bleed > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed::after{content:"";position:absolute;inset:0;background:rgba(16,11,9,.58)}
/* 明るい料理写真の上に小文字を置く帯は .58 では AA 未達（実測 worst 3.63）。
   文字が集まる中央を局所的に落とす。写真の印象は端で保つ。 */
.bleed .inner{text-shadow:0 1px 3px rgba(10,7,5,.7)}
.bleed::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 82% 74% at 50% 50%,rgba(10,7,5,.52) 0%,rgba(10,7,5,.34) 58%,rgba(10,7,5,.06) 100%)}
.bleed .inner{position:relative;z-index:2;color:var(--wash);padding:0 var(--gutter)}
.bleed .inner .label-ja{color:#e6d6c8}
.bleed .inner .en-display{color:#fff;margin:.25em 0 .7em}
.bleed .inner p{color:#eadfd4;max-width:32em;margin:0 auto 1.8em;text-wrap:pretty}
.bleed .actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* 枠線だけのボタンは写真が透けるため、明るい画素の上で 2.64:1 まで落ちる（実測）。
   薄い暗色を敷いて底上げする。塗りつぶすとボタンの性格が変わるので最小限に。 */
/* 枠線だけだと写真が透け、明るい画素の上で 2.6:1 まで落ちる（実測）。
   半透明で足すと写真の明るさ次第で結果が変わるため、不透明にして写真依存を断つ。
   色は既存の hover 色 --ink-2 と同じで、デザイン言語から外れない。 */
.bleed .btn:not(.btn--accent){color:var(--wash);background:var(--ink-2);border-color:var(--ink-2)}
.bleed .btn:not(.btn--accent):hover{background:var(--wash);color:var(--ink-2)}

/* ── アクセス ──────────────────────────────────────── */
.access-grid{display:grid;gap:clamp(26px,3.4vw,52px)}
@media(min-width:900px){.access-grid{grid-template-columns:1fr 1fr}}
.dl{border-top:1px solid var(--line)}
.dl > div{display:grid;grid-template-columns:6.5em 1fr;gap:1em;border-bottom:1px solid var(--line);
  padding:clamp(13px,1.4vw,18px) 0;font-size:clamp(12.5px,.95vw,14.5px);line-height:1.95}
.dl dt{color:#5c5048;letter-spacing:.12em;margin:0}
.dl dd{margin:0}
.map-frame{width:100%;aspect-ratio:4/3;border:1px solid var(--line);filter:grayscale(.25)}

/* ── 著者（EEAT）───────────────────────────────────── */
.author{display:grid;gap:clamp(14px,2vw,26px);align-items:center;background:var(--wash);
  border:1px solid var(--line);padding:clamp(20px,2.6vw,36px)}
@media(min-width:720px){.author{grid-template-columns:auto 1fr}}
.author .ph{width:74px;height:74px;border-radius:50%;background:var(--accent);color:var(--wash);
  display:grid;place-items:center;font-family:var(--display);font-size:26px;letter-spacing:.04em}

/* ── フッター（ベンチ: 地色 rgb(129,51,60) 全面）─────────── */
.site-footer{background:var(--accent);color:var(--wash);padding:clamp(52px,6vw,90px) 0 clamp(24px,2.6vw,36px)}
.site-footer a:hover{opacity:.72}
.footer-grid{display:grid;gap:clamp(26px,3vw,48px)}
@media(min-width:840px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr}}
.site-footer .fmark{display:flex;align-items:center;gap:14px;margin-bottom:1.2em}
.site-footer .fmark img{width:52px;height:auto}
.site-footer .fword{font-family:var(--display);font-size:clamp(19px,1.7vw,25px);letter-spacing:.2em}
.site-footer .fnav{display:grid;gap:.85em;font-size:clamp(12.5px,.9vw,13.5px);letter-spacing:.1em}
.site-footer .copy{margin-top:clamp(32px,4vw,56px);border-top:1px solid rgba(255,241,232,.28);
  padding-top:18px;font-size:12px;letter-spacing:.1em;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* ── パンくず ──────────────────────────────────────── */
.crumbs{padding-top:clamp(76px,6vw,96px);font-size:12px;letter-spacing:.1em;color:#5c5048}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.55em;list-style:none;margin:0;padding:0}
/* パンくずは nav 内のリスト＝WCAG 2.5.8 の「文中のリンク」例外に当たらない。
   実高 16px だったので padding で 44px を確保する（gap があるので行間は詰まらない）。 */
.crumbs a{display:inline-flex;align-items:center;min-height:44px}

/* ── 下層ページの見出し ────────────────────────────── */
/* ここも一括指定で左右を 0 にしていた（.wrap のガターが消える原因）。縦だけ指定する。 */
.page-hero{padding-block:clamp(28px,3.4vw,48px) clamp(38px,4.4vw,64px);border-bottom:1px solid var(--line)}
.page-hero .en-display{margin-bottom:.2em}
/* ch は欧文 "0" の字幅（実測 1ch = 0.52em）で、和文では意図の約半分の行長にしかならない。
   64ch = 33字/行だった。和文の快適域 36〜45字に合わせて em 基準にする。 */
.page-hero p{max-width:42em;margin-top:1.2em}

/* ── フォーム ──────────────────────────────────────── */
.form{display:grid;gap:clamp(16px,1.8vw,24px);max-width:720px}
.form label{display:grid;gap:.5em;font-size:clamp(12px,.9vw,13.5px);letter-spacing:.12em}
.form input,.form textarea,.form select{
  font:inherit;letter-spacing:var(--ls);background:var(--wash);border:1px solid var(--line);
  padding:.85em 1em;color:var(--ink);width:100%}
.form textarea{min-height:180px;resize:vertical}
.form .req{color:var(--accent);font-size:.9em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:1em 1.2em;border:1px solid var(--line);background:var(--wash);font-size:13px}

/* ── 記事本文（Stem のコラムが流し込まれる）──────────── */
.prose{max-width:40em}
.prose h2,.prose h3{margin:2em 0 .8em}
.prose p{margin-bottom:1.5em}
.prose ul,.prose ol{margin:0 0 1.5em 1.4em;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.5em}
.prose img{margin:1.6em 0}
.prose pre,.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prose pre{overflow-x:auto;max-width:100%;background:var(--wash);border:1px solid var(--line);padding:1em;font-size:12.5px}
.form-msg,.review p,.faq-list .a{font-size:clamp(12.5px,.95vw,14.5px)}
.prose code{word-break:break-word}
.prose table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse}
.prose td,.prose th{border:1px solid var(--line);padding:.6em .9em}

/* ── コラム／お知らせカード ───────────────────────── */
.cards{display:grid;gap:clamp(16px,2vw,28px)}
@media(min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line);background:var(--wash);display:block}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card .body{padding:clamp(15px,1.6vw,22px)}
.card .ttl{font-size:clamp(13.5px,1vw,15.5px);line-height:1.8}
.card .meta{font-size:12px;letter-spacing:.1em;color:#5c5048;margin-bottom:.5em}
.empty{min-height:180px;display:grid;place-items:center;color:#5c5048;font-size:13px;
  border:1px dashed var(--line);padding:2em;text-align:center}

/* ── リビール（CSSで自走。JSが死んでも本文は必ず見える）──── */
/* ══ モーション ══════════════════════════════════════════
   原則: 既定は「見えている」。.js が付いたときだけ隠して動かす。
   JS が1行も動かなければ .js は付かないので、本文は必ず見える（CLAUDE.md §8）。
   ここから下は写経元（燕三条Bit）が実際に持っている演出の再現と、その上乗せ。 */

/* スクロール方向でヘッダーを出し入れする。
   ※【逸脱】写経元にこの挙動は無い。実物の CSS を取得して確認したところ
     `header.scroll_up` は background-color / color / fill を変えるだけで、隠す挙動は持たない。
     以前ここに「写経元 HEADER.scroll_up の再現」と書いたのは誤りだった（2026-08-08 訂正）。 */
.site-header{transition:transform .55s var(--ease),background .4s var(--ease)}
.js.hd-hide .site-header{transform:translateY(-100%)}

/* 【撤去】節見出しの sticky 追従。
   ①写経元に無い（`.title_wrap` は `.page_menu` オーバーレイ内のヘッダーであって節見出しではない）
   ②`.section-head` が containing block になるため可動域が 96px しかなく、
     23サンプル中1回しか固定されていなかった（実測）＝入れても効いていない
   の2点で、2026-08-08 に撤去した。復活させるなら節全体を containing block にする設計から。 */

/* 品名・価格・写真をひとまとまりにするカード。
   写真は「その品だと確認できたものだけ」に付ける（.dish-media は任意）。 */
.dish-grid{display:grid;gap:clamp(18px,2.2vw,30px)}
@media(min-width:720px){.dish-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.dish-grid{grid-template-columns:repeat(3,1fr)}}
.dish{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:clamp(12px,1.4vw,18px)}
.dish-media{margin:0 0 clamp(10px,1.2vw,16px);overflow:hidden}
.dish-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.dish-body{display:flex;align-items:baseline;justify-content:space-between;gap:1em}
.dish-name{font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.75;max-width:26em}
.dish-price{font-family:var(--display);color:var(--accent);letter-spacing:.06em;white-space:nowrap}
/* 写真の無い品も同じ器に収める（高さは揃えず、上の罫線で列を作る） */
.dish--nomedia .dish-body{padding-top:.1em}

/* ══ 常時動く層 ══════════════════════════════════════════
   ここまでの演出は全部「視界に入ったら1回」だった。スクロールを止めると
   画面が完全に静止するのが物足りなさの正体だったので、常時動く型を足す。
   DESIGN_RULES §10.1 が居酒屋・和食（力強い/夜）トーンに grain と
   footer-watermark を推奨している。静かな明朝と両立する。 */

/* grain: フィルムの粒子。SVG のノイズを敷いてゆっくり動かす。
   pointer-events:none なので操作を一切邪魔しない。 */
.js body::after{content:"";position:fixed;inset:-120px;z-index:9998;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  animation:grain 7s steps(6) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}     16%{transform:translate(-14px,8px)}
  33%{transform:translate(9px,-12px)} 50%{transform:translate(-8px,-6px)}
  66%{transform:translate(12px,10px)} 83%{transform:translate(-6px,13px)}
  100%{transform:translate(0,0)}}

/* footer-watermark: フッターの地に巨大な店名がゆっくり流れる */
.site-footer{position:relative;overflow:hidden}
.js .site-footer::before{content:"nadeshico";position:absolute;left:0;bottom:-.22em;
  z-index:0;pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-size:clamp(5rem,17vw,15rem);line-height:.8;
  letter-spacing:.04em;color:rgba(255,241,232,.075);
  animation:wmark 46s linear infinite}
@keyframes wmark{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.site-footer > *{position:relative;z-index:1}

/* ページ遷移のカーテンワイプ（写経元 .page-enter:before の型）。
   CSS だけで完結し、JS が動かなくても遷移そのものは普通に成立する。 */
.js .curtain{position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:var(--accent);transform:translateY(-100%)}
.js.is-leaving .curtain{animation:curtain-in .5s var(--ease) forwards}
.js .curtain.is-entering{animation:curtain-out .75s var(--ease) .05s forwards}
@keyframes curtain-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes curtain-out{from{transform:translateY(0)}to{transform:translateY(100%)}}

/* カーソル追従（PC・細かいポインタのときだけ） */
@media(pointer:fine){
  .js .cursor{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;
    width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
    border:1px solid rgba(129,51,60,.55);
    transition:transform .18s var(--ease),opacity .3s var(--ease),
               width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease);
    opacity:0}
  .js.has-cursor .cursor{opacity:1}
  .js .cursor.is-hot{width:56px;height:56px;margin:-28px 0 0 -28px;
    background:rgba(129,51,60,.1);border-color:rgba(129,51,60,.8)}
}

/* ══ 横スクロール（写経元 recruit の型）══════════════════
   写経元は `.horizontal_wrap{flex-wrap:nowrap; width:calc(100vw + 3100px)}` を
   pin して、縦スクロールを横移動に変換している（実物の CSS を取得して確認）。
   ページ全高 10262px のうち pin-spacer が 5380px＝52% を占める看板演出。

   実装方針: **土台は現状の手動横スクロール（overflow-x:auto + scroll-snap）のまま**にし、
   .js が付いたときだけ節を高くして slider を sticky にし、
   スクロール進捗から scrollLeft を動かす。
   - JS が動かない → .js が付かない → 節は普通の高さ、手で横に送れる（現状どおり）
   - reduced-motion → 下のブロックで無効化
   - クリップは .slider-track 自身の overflow が持つので body{overflow-x} に依存しない
     （design-qa は body の overflow を解除して測るため、ここは重要） */
@media(min-width:861px){
  .js #signature.hs{min-height:calc(100svh + 190vh)}
  /* ピン留めは .slider ではなく .hs-view（スライダー＋導線）ごと行う。
     .slider だけを sticky にすると、その後ろの「おしながきをすべて見る」が
     通常フローのまま流れてスライダーを突き抜ける（実測で重なりを確認）。 */
  .js #signature.hs .hs-view{position:sticky;top:calc(clamp(58px,4.6vw,72px) + 12px);
    background:var(--bg);padding-bottom:clamp(14px,1.8vw,26px)}
  .js #signature.hs .slider-track{scroll-snap-type:none}
  /* 横送りがスクロールに追従する状態では ←/→ は毎フレーム打ち消されて効かない。
     押せるのに動かないボタンは事故なので隠す（.hs が付かない環境では出たまま機能する）。 */
  .js #signature.hs .slider-nav{display:none}
}

/* B-5 罫線リストの下線が、視界に入ってから左から伸びる */
.js .rows .row{position:relative;border-bottom-color:transparent}
.js .rows .row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease)}
.js .rows .row.is-in::after,.js [data-anim].is-in .rows .row::after{transform:scaleX(1)}

/* B-2 写真は下からマスクを開く。B-3 フェードに方向を持たせる。 */
.js [data-anim="mask"]{clip-path:inset(100% 0 0 0);opacity:1;transform:none;overflow:hidden;
  transition:clip-path 1.15s var(--ease)}
.js [data-anim="mask"].is-in{clip-path:inset(0 0 0 0)}
/* 掃きに「寄りが引く」を重ねる。拡大は img 側に閉じ込める（figure を拡大すると横に溢れる）。 */
.js [data-anim="mask"] img{transform:scale(1.09);transition:transform 1.6s var(--ease)}
.js [data-anim="mask"].is-in img{transform:none}
.js [data-anim="left"]{transform:translateX(-44px)}
.js [data-anim="right"]{transform:translateX(44px)}
.js [data-anim="left"].is-in,.js [data-anim="right"].is-in{transform:none}

/* B-4 全幅写真帯は、寄りがゆっくり引く */
/* B-4 全幅写真帯はスクロールに同期して流れる（§10 parallax-band）。
   画を 132% に取り、その内側で ±16% 動かす＝帯の端に隙間を作らない。 */
.js .bleed > img{top:-16%;bottom:auto;height:132%;
  transform:translateY(calc((var(--p,.5) - .5) * -22%))}

/* B-1 FV 背景のパララックス（DESIGN_RULES:107 が hero.bg への適用を明示的に許可）。
   will-change は張らない（LCP 要素に恒久レイヤーを作るとモバイルのメモリを食う）。 */

/* B-6 丸矢印は寄るだけでなく、わずかに膨らむ */
.more .circle,.mv-cta::after{transition:transform .5s var(--ease)}
.more:hover .circle{transform:translateX(6px) scale(1.08)}

[data-anim]{opacity:1;transform:none}
.js [data-anim]{opacity:0;transform:translateY(34px) scale(.985);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-anim].is-in{opacity:1;transform:none}


/* ── 演出の強度アップ（2026-08-12・「もっと派手に」の議題化 §4）────────
   鉄則: 既定値は最終形のまま。ローダー解除で <html> に is-ready が付いたときだけ走らせる。
   → JS が死ねば演出は出ないが、内容は最初から見えている（DESIGN_RULES §10 の鉄則）。
   reduced-motion は上の * ルールで全部止まる。動かすのは transform/opacity だけ＝CLS を出さない。 */

/* C-1 FV: 左は下から、右は上から掃いて開く */
@keyframes paneUp{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes paneDown{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.js.is-ready .mv-visual .pane:first-child{animation:paneUp 1.15s var(--ease) .05s both}
.js.is-ready .mv-visual .pane:last-child{animation:paneDown 1.15s var(--ease) .18s both}

/* C-2 FV: 画は止めない。ゆっくり寄る（img は JS のパララックスが transform を握るので、
   競合しないよう .pane 側に当てる）。 */
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.085)}}
.js.is-ready .mv-visual .pane:first-child{animation:paneUp 1.15s var(--ease) .05s both,
  kenburns 19s linear 1.2s infinite alternate both}
.js.is-ready .mv-visual .pane:last-child{animation:paneDown 1.15s var(--ease) .18s both,
  kenburns 19s linear 1.35s infinite alternate both}

/* C-3 FV の文字と CTA を、順に持ち上げる。
   h1 は data-stem-ab（A-10）なので **要素ごと** 動かす。1文字分割は禁止（DESIGN_RULES:107）。 */
@keyframes mvUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.js.is-ready .mv-left>*,.js.is-ready .mv-right>*{animation:mvUp 1.05s var(--ease) both}
.js.is-ready .mv-left>*:nth-child(1){animation-delay:.55s}
.js.is-ready .mv-left>*:nth-child(2){animation-delay:.68s}
.js.is-ready .mv-right>*:nth-child(1){animation-delay:.80s}
.js.is-ready .mv-right>*:nth-child(2){animation-delay:.92s}
@keyframes mvWord{from{opacity:0;transform:translateY(16px) scale(1.04)}to{opacity:1;transform:none}}
.js.is-ready .mv-word{animation:mvWord 1.4s var(--ease) 1.05s both}
/* scroll-cue は SP で translateX(-50%) 中央寄せ。transform を終端 none にすると中央が壊れるので
   不透明度だけ動かす。 */
@keyframes cueIn{from{opacity:0}to{opacity:1}}
.js.is-ready .mv .scroll-cue{animation:cueIn 1s var(--ease) 1.3s both}

/* C-4 グリッドは1枚ずつ遅れて出る（stagger） */
.js .gallery figure[data-anim]:nth-child(2){transition-delay:.09s}
.js .gallery figure[data-anim]:nth-child(3){transition-delay:.18s}
.js .gallery figure[data-anim]:nth-child(4){transition-delay:.27s}
.js .gallery figure[data-anim]:nth-child(5){transition-delay:.36s}
.js .gallery figure[data-anim]:nth-child(6){transition-delay:.45s}
.js .gallery figure[data-anim]:nth-child(7){transition-delay:.54s}
.js .gallery figure[data-anim]:nth-child(8){transition-delay:.63s}

/* C-5 全幅写真帯の引きを強める */


/* ── スクロール・スクラブ（--p は site.js が 0〜1 で書く。既定 .5＝中立）────
   JS が動かなければ --p は付かず .5 のまま＝どれも変位ゼロ＝最終形。 */
.js [data-scrub]{will-change:transform}

/* D-1 コンセプトの写真は、主が上へ・添えが下へ動いて奥行きを作る */
.js .concept-figure > img[data-scrub]{transform:translateY(calc((var(--p,.5) - .5) * -46px))}
.js .concept-figure .sub img[data-scrub]{transform:translateY(calc((var(--p,.5) - .5) * 34px))}

/* D-2 節見出しの装飾欧文が、スクロールに合わせて横に流れる。
   body に overflow-x:hidden があるので横スクロールは出ないが、その分 SP では
   文字が切れる。横流しは余白のある 861px 以上に限る。 */
@media(min-width:861px){
  .js .section-head .en-display[data-scrub]{transform:translateX(calc((var(--p,.5) - .5) * -72px))}
  .js .bleed .en-display[data-scrub]{transform:translateX(calc((var(--p,.5) - .5) * -48px))}
}
/* SP は縦に流す（切れない方向） */
@media(max-width:860px){
  .js .section-head .en-display[data-scrub]{transform:translateY(calc((var(--p,.5) - .5) * -26px))}
}

/* D-3 ギャラリーは **枠は動かさず、枠の中で画が流れる**。
   枠ごと動かすと隣のカットと重なる（gap は 8〜14px しかない）。
   図版は overflow:hidden なので、画を 1.14 に取っておけば内側で ±7% 動かせる。
   列ごとに速度を変えて、面で流れて見えるようにする。 */
.js .gallery figure[data-anim="mask"] img[data-scrub]{
  transform:scale(1.14) translateY(calc((var(--p,.5) - .5) * -9%));transition:none}
.js .gallery figure[data-anim="mask"]:nth-child(3n+2) img[data-scrub]{
  transform:scale(1.14) translateY(calc((var(--p,.5) - .5) * -15%))}
.js .gallery figure[data-anim="mask"]:nth-child(3n+3) img[data-scrub]{
  transform:scale(1.14) translateY(calc((var(--p,.5) - .5) * -5%))}

/* D-4 フッターの透かしもスクロールで流す */
.js .site-footer .fmark[data-scrub]{transform:translateY(calc((var(--p,.5) - .5) * -20px))}

/* ── モーション低減（全演出オフ・最終状態を即表示）──────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  #preloader{display:none!important}
  .js [data-anim]{opacity:1!important;transform:none!important}
  .mv .scroll-cue i{animation:none}
  #preloader .mark{animation:none}
  .slider-track{scroll-snap-type:none}
  /* 追加した演出も全部止める。装飾だけでなく sticky・parallax・マスクも戻す。 */
  .js.hd-hide .site-header{transform:none!important}
  .js .rows .row{border-bottom-color:var(--line)!important}
  .js .rows .row::after{display:none!important}
  .js [data-anim="mask"]{clip-path:none!important}
  .js .bleed > img{transform:none!important}
  .js .mv-visual .pane img{transform:none!important}
  .js.is-ready .mv-visual .pane,.js.is-ready .mv-left>*,.js.is-ready .mv-right>*,
  .js.is-ready .mv-word,.js.is-ready .mv .scroll-cue{animation:none!important;
    clip-path:none!important;transform:none!important;opacity:1!important}
  .js [data-anim="mask"] img{transform:none!important}
  .js [data-scrub]{transform:none!important;will-change:auto!important}
  .js .bleed > img{top:0!important;bottom:0!important;height:100%!important}
  .js .gallery figure[data-anim]{transition-delay:0s!important}
  .more:hover .circle{transform:none!important}
  .js body::after{display:none!important}
  .js .site-footer::before{animation:none!important;display:none!important}
  .js .curtain,.js .cursor{display:none!important}
  #preloader .mark img{animation:none!important}
  .js #signature.hs{min-height:0!important}
  .js #signature.hs .slider,.js #signature.hs .hs-view{position:static!important}
}

/* ── 記事本文の組版（色・書体・太さは指定しない＝各サイトの意匠のまま） ──
   before: 段落の間隔が無い／h2 と h3 と本文が同じ大きさ／箇条書きの中黒が消えている、という状態だった。
   見出しの実寸はこのサイト自身の見出しスケールから取っている（トンマナを揃えるため）。
   p / li は :not([class]) で絞る。絞らないと日付などのテンプレ側 p（.note 等）まで本文サイズになる。 */

.prose{font-size:16px;line-height:2}
/* 生成本文に裸URLが1本でも入ると横スクロールが出る（実測: 320px で 320→402px） */
.prose{overflow-wrap:anywhere}
.prose p:not([class]),.prose li:not([class]){font-size:1em;line-height:inherit}
.prose p:not([class]){margin:0 0 1.6em}
.prose ul,.prose ol{margin:0 0 1.6em;padding-left:1.4em;list-style:disc}
.prose ol{list-style:decimal}
.prose ul ul{list-style:circle}
.prose ol ol{list-style:lower-alpha}
.prose li+li{margin-top:.5em}
.prose h1{font-size:2.4em;line-height:1.35;margin:0 0 .7em}
.prose h2{font-size:2.0em;line-height:1.5;margin:2.4em 0 .7em}
.prose h3{font-size:1.5em;line-height:1.7;margin:2em 0 .6em}
.prose h4{font-size:1.05em;margin:1.8em 0 .5em}
.prose img{max-width:100%;height:auto;margin:1.8em 0}
/* SPで横に溢れないための保険 */
.prose table{display:block;overflow-x:auto;max-width:100%}
.prose pre{overflow-x:auto;max-width:100%}
.prose > p:last-child,.prose > ul:last-child,.prose > ol:last-child{margin-bottom:0}
@media (max-width:699px){.prose{font-size:15.5px;line-height:1.95}
  .prose h1{font-size:1.9em}.prose h2{font-size:1.65em}.prose h3{font-size:1.35em}}