/* =========================================================
   かどや（大宮・手作り和菓子）見本HP — 19件目
   顔: 墨#201B17(ink) × 紙#F3E9E3(paper) × あずき#6A2A2C(azuki) × 朱#BF3B30(shu・面積10%未満) × 米#F4EFE8(rice)
   タイポ: Kiwi Maru(見出し・和文) / Noto Sans JP(本文) / Prata(数字・欧文)
   モーション: R16 縦→横ピン(主役・お品書き) / R17 積み重ねカード(三代目物語) / R18 弱パララックス / R1 リビール / R9/R10標準
   安全弁: html.no-js→js / 2.5秒js-fallbackタイマー / reduced-motionで全transform停止でも読める
   ========================================================= */
:root{
  --ink:#201B17;
  --ink-line:#3A312B;
  --paper:#F3E9E3;
  --paper-deep:#EADCD3;
  --card:#FBF6EF;
  --line:#E4D6CC;
  --azuki:#6A2A2C;
  --azuki-deep:#551F21;
  --shu:#BF3B30;
  --shu-deep:#9E2E25;
  --rice:#F4EFE8;
  --rice-mute:#B7A69B;
  --ink-soft:#5E5344;
  --gold:#E9C7A0;
  --mincho:"Kiwi Maru",serif;
  --gothic:"Noto Sans JP",sans-serif;
  --euro:"Prata",serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--gothic);background:var(--paper);color:var(--ink);
  line-height:1.9;font-size:15.5px;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;
  padding-bottom:0;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azuki-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--shu);outline-offset:3px;border-radius:2px}
main:focus{outline:none}
[id]{scroll-margin-top:78px}
h1,h2,h3{text-wrap:balance;font-weight:400}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--rice);padding:.7em 1.3em;font-size:.9rem}
.skip-link:focus{left:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
/* ヘッダーは常時 濃色地（全ページ最上部がink地のヒーロー/page-headなので白ナビが常に読める。
   透過にすると最上部でbody(紙色)が透けて白ナビが消えるバグになるため常時ink） */
.site-header{position:sticky;top:0;z-index:80;background:rgba(32,27,23,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(32,27,23,.97);box-shadow:0 2px 14px rgba(0,0,0,.16)}
.header-in{max-width:1180px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--rice);line-height:1.3}
.brand .b-main{font-family:var(--mincho);font-size:1.5rem;letter-spacing:.06em}
.brand .b-small{font-size:.63rem;letter-spacing:.1em;color:var(--rice-mute)}
.gnav ul{display:flex;gap:2px;list-style:none;flex-wrap:wrap}
.gnav a{display:block;padding:.5em .7em;text-decoration:none;color:var(--rice);font-size:.82rem;letter-spacing:.03em;border-radius:3px;position:relative;white-space:nowrap}
.gnav a::after{content:"";position:absolute;left:.7em;right:.7em;bottom:.32em;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .gnav a::after{transition:none}
  .gnav a:hover,.gnav a[aria-current="page"]{color:var(--gold)}
}
@media (max-width:820px){
  .header-in{flex-wrap:wrap;padding:10px 16px}
  .gnav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gnav ul{flex-wrap:nowrap}
  .brand .b-main{font-size:1.22rem}
}

/* ---------- section common ---------- */
.section{padding:88px 22px}
.section.tight{padding:56px 22px}
.section.ink{background:var(--ink);color:var(--rice)}
.section.ink a{color:var(--rice)}
.section.paper{background:var(--paper)}
.section.deep{background:var(--paper-deep)}
.section-in{max-width:1180px;margin:0 auto}
.sec-label{font-family:var(--gothic);font-weight:700;font-size:.95rem;letter-spacing:.13em;color:var(--shu);display:block;margin-bottom:.8em}
.section.ink .sec-label{color:var(--gold)}
/* rail-introは.section.inkでなく独自にink地なので、ラベル・見出し・リードを個別に濃地用へ差し替える
   （あずき#6A2A2C×墨#201B17=約1.4:1でほぼ読めない/ホラー感。朱#BF3B30=3.16:1もNG。金/米/米mでコントラスト確保） */
.rail-intro .sec-label{color:var(--gold)}
.rail-intro .sec-title{color:var(--rice)}
.rail-intro .sec-lead{color:var(--rice-mute)}

/* ---------- visually-hidden（見出し階層維持用） ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sec-title{font-family:var(--mincho);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.03em;line-height:1.6;color:var(--azuki);margin-bottom:.7em}
.section.ink .sec-title{color:var(--rice)}
.sec-lead{max-width:36em;color:var(--ink-soft)}
.section.ink .sec-lead{color:var(--rice-mute)}
.prose{max-width:36em}
.prose p+p{margin-top:1.1em}
.note{font-size:.86rem;color:var(--ink-soft)}
.section.ink .note{color:var(--rice-mute)}
.page-head{background:var(--ink);color:var(--rice);padding:64px 22px 46px}
.page-head-in{max-width:1180px;margin:0 auto}
.page-head .sec-label{color:var(--gold)}
.page-head h1{font-family:var(--mincho);font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:.03em;margin-bottom:.5em}
.page-head p{color:var(--rice-mute);max-width:38em;font-size:.96rem}

/* ---------- ボタン(R9) ---------- */
.btn{display:inline-block;padding:.85em 1.9em;border-radius:3px;font-size:.9rem;letter-spacing:.05em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;font:inherit;
  transition:transform .12s ease-out,background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){
  .btn{transition:background .01ms linear,color .01ms linear,border-color .01ms linear}
  .btn:active{transform:none;filter:brightness(.9)}
}
.btn-primary{background:var(--shu);color:#fff}
.btn-primary:hover{background:var(--shu-deep)}
.btn-ghost{background:transparent;color:var(--rice);border-color:rgba(244,239,232,.55)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-line{background:transparent;color:var(--azuki);border-color:var(--azuki)}
.btn-line:hover{background:var(--azuki);color:var(--rice)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:1.7em}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--rice);position:relative;overflow:hidden;padding-top:min(14vh,110px)}
.hero-in{max-width:1180px;margin:0 auto;padding:0 22px 46px}
.hero .eyebrow{font-family:var(--euro);letter-spacing:.28em;font-size:.78rem;color:var(--gold);text-transform:uppercase;display:inline-block;margin-bottom:1em}
.hero h1{font-family:var(--mincho);font-weight:400;font-size:clamp(1.85rem,5.4vw,3.2rem);line-height:1.5;letter-spacing:.02em;max-width:23em}
.hero h1 b{color:var(--gold);font-weight:400}
.hero .h-sub{max-width:32em;color:var(--rice-mute);margin-top:1.1em;font-size:.98rem}

/* 商品が横に流れる帯（マーキー・R18弱パララックス相当の"帯"演出） */
.hero-strip{margin-top:44px;overflow:hidden;position:relative}
.hero-strip::before,.hero-strip::after{content:"";position:absolute;top:0;bottom:0;width:44px;z-index:2;pointer-events:none}
.hero-strip::before{left:0;background:linear-gradient(to right,var(--ink),rgba(32,27,23,0))}
.hero-strip::after{right:0;background:linear-gradient(to left,var(--ink),rgba(32,27,23,0))}
.strip-track{display:flex;gap:16px;width:max-content;padding-bottom:6px}
html.js .strip-track{animation:strip-flow 34s linear infinite}
.hero-strip:hover .strip-track,.hero-strip:focus-within .strip-track{animation-play-state:paused}
@keyframes strip-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip-item{flex:0 0 auto;width:200px}
.strip-item img{width:200px;height:133px;object-fit:cover;border-radius:2px}
.strip-item figcaption{margin-top:.5em;font-size:.76rem;color:var(--rice-mute);letter-spacing:.02em;display:flex;justify-content:space-between;gap:.6em}
.strip-item figcaption .p{font-family:var(--euro);color:var(--gold)}
html.no-js .hero-strip,html.js-fallback .hero-strip{overflow-x:auto}
html.no-js .strip-track,html.js-fallback .strip-track{animation:none;width:max-content}
@media (prefers-reduced-motion:reduce){
  .hero-strip{overflow-x:auto}
  html.js .strip-track{animation:none}
}
@media (max-width:600px){.strip-item,.strip-item img{width:150px}.strip-item img{height:100px}}

/* ---------- 事実カード ---------- */
.facts{background:var(--ink);color:var(--rice);border-top:1px solid var(--ink-line)}
.facts-in{max-width:1180px;margin:0 auto;padding:34px 22px 50px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.facts .f b{font-family:var(--euro);font-size:clamp(1.5rem,3vw,2rem);color:var(--gold);display:block;line-height:1.1;margin-bottom:.3em}
.facts .f span{font-size:.8rem;color:var(--rice-mute);letter-spacing:.02em}
@media (max-width:760px){.facts-in{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   R16 縦→横ピン留めスクロール（お品書き陳列・主役）
   モバイルファースト: デフォルトは「横スクロール帯」の通常フロー。
   position:sticky主体の縦→横ピン演出は681px以上・prefers-reduced-motion:no-preference・
   JS初期化完了時(html.js かつ html.js-fallbackでない)だけ有効化する。
   JS側もwindow.matchMedia('(min-width:681px)')で同じ境界を管理し、resize/changeで着脱する。
   ============================================================ */
.rail-intro{background:var(--ink);color:var(--rice);padding:70px 22px 0}
.rail-intro .section-in{max-width:1180px;margin:0 auto}
.pin-track{position:relative;height:auto;background:var(--ink)}
.pin-vp{position:static;height:auto;overflow-x:auto;padding:40px 0;display:flex;align-items:stretch;-webkit-overflow-scrolling:touch}
.pin-rail{display:flex;gap:18px;padding:0 6vw;transform:none}
.pin-intro{flex:0 0 min(64vw,360px);display:flex;flex-direction:column;justify-content:center;padding-right:2vw;color:var(--rice)}
.pin-intro .sec-label{color:var(--gold)}
.pin-intro h2{font-family:var(--mincho);font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.6}
.pin-intro p{margin-top:1em;color:var(--rice-mute);max-width:22em;font-size:.92rem}
.pin-panel{
  flex:0 0 min(64vw,320px);height:min(64vh,460px);border-radius:6px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;color:var(--rice);background:var(--ink-line)
}
.pin-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pin-panel .pin-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,15,12,.92) 0%,rgba(20,15,12,.35) 46%,rgba(20,15,12,.05) 68%)}
.pin-panel .pin-body{position:relative;z-index:2;padding:22px}
.pin-panel .n{font-family:var(--euro);font-size:.78rem;letter-spacing:.14em;color:var(--gold)}
.pin-panel h3{font-family:var(--mincho);font-size:1.28rem;margin-top:.4em}
.pin-panel p{font-size:.83rem;color:var(--rice-mute);margin-top:.45em;max-width:22em}
.pin-panel .price{display:inline-block;margin-top:.7em;font-family:var(--euro);font-size:.86rem;background:var(--shu);color:#fff;padding:.32em .8em;border-radius:2px}
.pin-cta{flex:0 0 min(64vw,300px);height:min(64vh,460px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.2em}
.pin-progress{display:none;position:absolute;left:6vw;right:6vw;bottom:6vh;height:2px;background:var(--ink-line);border-radius:2px}
/* 幅依存のカクつき対策: widthではなくtransform:scaleXで進捗を表現（レイアウト再計算を避ける） */
.pin-progress i{display:block;height:100%;width:100%;background:var(--shu);border-radius:2px;transform:scaleX(0);transform-origin:left}

/* ---- 681px以上・motion可・JSが実測を終えた(.pin-ready)時だけ、縦スクロールにピン留めして横に流す ----
   JSが未実行/未到達の間は上のデフォルト（横スクロール帯）のまま表示され続けるので、
   読み込みの遅延やJS失敗時に空白スティッキーが残ることはない */
@media (min-width:681px) and (prefers-reduced-motion:no-preference){
  html.js.pin-ready:not(.js-fallback) .pin-track{height:var(--pin-h,520vh)}
  html.js.pin-ready:not(.js-fallback) .pin-vp{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;padding:0}
  html.js.pin-ready:not(.js-fallback) .pin-progress{display:block}
  html.js.pin-ready:not(.js-fallback) .pin-rail.pin-will-change{will-change:transform}
}

/* ============================================================
   R17 積み重ねカード（三代目の物語）
   ============================================================ */
.story-lead{max-width:38em}
.stack{max-width:880px;margin:56px auto 0;padding:0 22px 8vh}
.stack-card{
  position:sticky;border-radius:10px;padding:clamp(28px,4vw,48px);
  min-height:52vh;display:flex;flex-direction:column;justify-content:center;
  color:var(--rice);background:linear-gradient(155deg,var(--azuki),var(--azuki-deep));
  box-shadow:0 -10px 36px rgba(30,20,16,.18);transform-origin:center top;overflow:hidden
}
.stack-card:nth-child(1){top:10vh}
.stack-card:nth-child(2){top:13vh}
.stack-card:nth-child(3){top:16vh}
.stack-card:nth-child(4){top:19vh}
.stack-card.photo{background:none;position:relative}
.stack-card.photo .stack-photo{position:absolute;inset:0}
.stack-card.photo .stack-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.stack-card.photo .stack-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(32,27,23,.93),rgba(74,26,28,.85))}
/* 写真背景カードは明部でもコントラストを確保するため本文もrice(F4EFE8=あずき地9.27:1)に上げる */
.stack-card.photo p{color:var(--rice)}
.stack-card .stack-body{position:relative;z-index:2}
.stack-card .n{font-family:var(--euro);font-size:.82rem;letter-spacing:.18em;color:var(--gold)}
.stack-card h3{font-family:var(--mincho);font-size:clamp(1.3rem,3vw,1.7rem);margin:.5em 0 .55em;line-height:1.6}
.stack-card p{font-size:.94rem;color:var(--rice-mute);max-width:32em}
.stack-end{max-width:880px;margin:0 auto;padding:0 22px;text-align:center}

html.no-js .stack-card,html.js-fallback .stack-card{position:relative;top:auto!important;margin-bottom:16px;transform:none!important}
@media (prefers-reduced-motion:reduce){
  /* transform:noneだけではpositionがsticky/topのままで積層状態が残るため、通常フローに戻す */
  .stack-card{position:relative;top:auto!important;margin-bottom:16px;transform:none!important;opacity:1!important}
}

/* ---------- craft (手作りへのこだわり) ---------- */
.craft{position:relative;overflow:hidden}
.craft-bg{position:absolute;inset:-8% 0;opacity:.24;z-index:0}
.craft-bg img{width:100%;height:100%;object-fit:cover}
.craft .section-in{position:relative;z-index:1}
.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.craft-grid figure{margin:0}
.craft-grid figcaption{margin-top:.6em;font-size:.82rem;color:var(--ink-soft)}
.clip-reveal{border-radius:4px;overflow:hidden}
.clip-reveal img{transition:none}
html.js .clip-reveal{clip-path:inset(0 0 100% 0)}
html.js .clip-reveal.on{clip-path:inset(0 0 0% 0);transition:clip-path 1s var(--ease)}
html.no-js .clip-reveal,html.js-fallback .clip-reveal{clip-path:none}
@media (prefers-reduced-motion:reduce){html.js .clip-reveal{clip-path:none!important;transition:none}}
@media (max-width:820px){.craft-grid{grid-template-columns:1fr;gap:22px}}

/* ---------- 2店舗カード（R10ホバー） ---------- */
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.shop-card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:28px 26px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){html.js .shop-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(90,60,40,.14)}}
@media (prefers-reduced-motion:reduce){html.js .shop-card:hover{transform:none}}
.shop-card .tag{display:inline-block;font-family:var(--euro);font-size:.72rem;letter-spacing:.1em;color:var(--shu);border:1px solid var(--shu);border-radius:20px;padding:.25em .9em;margin-bottom:.9em}
.shop-card h3{font-family:var(--mincho);font-size:1.2rem;color:var(--azuki);margin-bottom:.5em}
.shop-card address{font-style:normal;font-size:.9rem;margin-bottom:.7em;line-height:1.85}
.shop-card p{font-size:.9rem}
@media (max-width:760px){.shop-grid{grid-template-columns:1fr}}

/* ---------- ギャラリー（祝い餅・お品書き詳細共通） ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.gallery figure{margin:0;background:var(--card);border-radius:4px;overflow:hidden;border:1px solid var(--line);transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){html.js .gallery figure:hover{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){html.js .gallery figure:hover{transform:none}}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{padding:.6em .8em .8em;font-size:.8rem;color:var(--ink-soft)}
.gallery figcaption .p{display:block;margin-top:.25em;font-family:var(--euro);color:var(--shu);font-size:.86rem}

/* ---------- voice(声・抑制的) ---------- */
.voice{text-align:center}
.voice p{font-family:var(--mincho);font-size:clamp(1.05rem,2vw,1.3rem);color:var(--azuki);max-width:26em;margin:0 auto;line-height:2.1}

/* ---------- FAQ（details排他アコーディオン） ---------- */
.faq{max-width:46em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:1.1em 2.3em 1.1em .1em;font-family:var(--mincho);font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4em;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--shu);border-bottom:1.5px solid var(--shu);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq-a{padding:0 2.3em 1.3em .1em;font-size:.92rem;color:var(--ink-soft);max-width:38em}
@media (prefers-reduced-motion:reduce){
  .faq summary::after{transition:none}
  .faq details[open] summary::after{border-color:var(--shu-deep)}
}

/* ---------- お品書き目録(menu.html) ---------- */
.roster{max-width:52em}
.roster-row{display:flex;justify-content:space-between;gap:1.2em;align-items:baseline;padding:.85em .1em;border-bottom:1px solid var(--line)}
.roster-row .n{font-size:.96rem}
.roster-row .n small{display:block;color:var(--ink-soft);font-size:.8rem;margin-top:.2em}
.roster-row .p{font-family:var(--euro);font-size:.98rem;white-space:nowrap;color:var(--shu)}
.cat-block+.cat-block{margin-top:64px;padding-top:64px;border-top:1px solid var(--line)}
.cat-head{display:flex;align-items:baseline;gap:.8em;flex-wrap:wrap;margin-bottom:.6em}
.cat-head h2{font-family:var(--mincho);font-size:1.5rem;color:var(--azuki)}
.cat-head .cat-no{font-family:var(--euro);color:var(--shu);font-size:1rem}
.cat-lead{max-width:38em;color:var(--ink-soft);margin-bottom:1.6em}
.cat-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:start}
@media (max-width:860px){.cat-body{grid-template-columns:1fr}}

/* ---------- 事実/信頼帯まとめ（下層ページの数字カードなど・facts流用可） ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:26px 24px}
.card h3{font-family:var(--mincho);font-size:1.05rem;color:var(--azuki);margin-bottom:.5em}
.card p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- form ---------- */
.form{max-width:600px}
.form .field{margin-bottom:22px}
.form label{display:block;font-size:.9rem;font-weight:500;margin-bottom:.4em}
.form .req{color:var(--shu);font-size:.75rem;margin-left:.4em}
.form input[type="text"],.form input[type="tel"],.form input[type="email"],.form textarea,.form select{
  width:100%;padding:.75em .9em;border:1px solid var(--ink-soft);border-radius:3px;background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.form textarea{min-height:170px;resize:vertical}
.hp-field{position:absolute;left:-9999px;height:0;overflow:hidden}

/* ---------- 地図(簡易埋め込み枠) ---------- */
.map-frame{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
.map-frame iframe{width:100%;height:320px;border:0;display:block}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--rice-mute);padding:60px 22px 42px}
.footer-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr auto;gap:36px}
.site-footer .f-brand{font-family:var(--mincho);font-size:1.5rem;color:var(--rice)}
.site-footer .f-name{font-size:.83rem;margin-top:.3em}
.site-footer address{font-style:normal;font-size:.86rem;margin-top:1.2em;line-height:1.95}
.site-footer address b{color:var(--rice);font-weight:400;font-family:var(--mincho)}
.site-footer a{color:var(--rice-mute)}
.site-footer a:hover{color:var(--gold)}
.f-sns{margin-top:1em;display:flex;gap:14px}
.f-note{font-size:.78rem;opacity:.85;margin-top:1.2em;max-width:34em}
.f-nav ul{list-style:none}
.f-nav a{display:block;padding:.28em 0;text-decoration:none;font-size:.86rem}
.copyright{max-width:1180px;margin:40px auto 0;font-size:.74rem;opacity:.85}
@media (max-width:900px){.footer-in{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-in{grid-template-columns:1fr}}

/* ---------- スマホ sticky CTA ---------- */
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:1px;
    background:var(--ink-line);border-top:1px solid var(--ink-line);padding-bottom:env(safe-area-inset-bottom)}
  .sticky-cta a{flex:1;text-align:center;padding:.95em .5em;text-decoration:none;font-size:.85rem;letter-spacing:.02em}
  .sticky-cta .s1{background:var(--shu);color:#fff}
  .sticky-cta .s2{background:var(--ink);color:var(--rice)}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  input,textarea,select,button{scroll-margin-bottom:80px}
}

/* ---------- R1 リビール ----------
   入口をhtml.js(headの同期scriptが即時付与)ではなく、外部script.jsが初期化を完走した
   直前に付ける html.motion-ready にする。script.jsの404・構文エラー・読み込み遅延時は
   motion-readyが付かないため.rvは常時可視のまま(js-fallbackの2.5秒待ちで消えたままにならない)。 */
.rv{opacity:1;transform:none}
html.motion-ready .rv{opacity:0;transform:translateY(14px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.motion-ready .rv.on{opacity:1;transform:none}
html.motion-ready .rv-d1{transition-delay:.07s}html.motion-ready .rv-d2{transition-delay:.14s}html.motion-ready .rv-d3{transition-delay:.21s}
/* 恒久消失防止の保険: 万一motion-ready付与後に完走しなくても2.5秒後には必ず可視に戻す */
html.js-fallback .rv{opacity:1!important;transform:none!important;transition:opacity .4s ease}
@media (prefers-reduced-motion:reduce){html.motion-ready .rv{opacity:1;transform:none;transition:none}}

/* ---------- R18 弱パララックス（背景1点のみ） ---------- */
html.js .plx-layer{will-change:transform}
html.no-js .plx-layer,html.js-fallback .plx-layer{transform:none!important}
@media (prefers-reduced-motion:reduce){.plx-layer{transform:none!important}}

/* ============================================================
   下層ページの仕掛け強化（2026-07-21 社長FB「下層がつまらない」対応）
   ・ギャラリー画像 = 下からのクリップワイプ＋stagger
   ・目録行/カード/店舗カード/三代目の引用段落 = 順に立ち上げ
   すべて html.motion-ready 起点。no-js / js-fallback / reduced-motion では
   静止して全要素が読める（安全弁）。CSSのみでHTML無改変・低リスク。
   ============================================================ */
html.motion-ready .gallery.rv,html.motion-ready .roster.rv,
html.motion-ready .card-grid.rv,html.motion-ready .shop-grid.rv,
html.motion-ready blockquote.rv{opacity:1;transform:none}
html.motion-ready .gallery.rv figure{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
html.motion-ready .gallery.rv.on figure{clip-path:inset(0 0 0% 0)}
html.motion-ready .roster.rv .roster-row,
html.motion-ready .card-grid.rv .card,
html.motion-ready .shop-grid.rv .shop-card,
html.motion-ready blockquote.rv p{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
html.motion-ready .roster.rv.on .roster-row,
html.motion-ready .card-grid.rv.on .card,
html.motion-ready .shop-grid.rv.on .shop-card,
html.motion-ready blockquote.rv.on p{opacity:1;transform:none}
/* stagger: 子の登場を順にずらす（nth-child 2〜8） */
html.motion-ready .gallery.rv.on figure:nth-child(2),html.motion-ready .roster.rv.on .roster-row:nth-child(2),html.motion-ready .card-grid.rv.on .card:nth-child(2),html.motion-ready .shop-grid.rv.on .shop-card:nth-child(2),html.motion-ready blockquote.rv.on p:nth-child(2){transition-delay:.07s}
html.motion-ready .gallery.rv.on figure:nth-child(3),html.motion-ready .roster.rv.on .roster-row:nth-child(3),html.motion-ready .card-grid.rv.on .card:nth-child(3),html.motion-ready .shop-grid.rv.on .shop-card:nth-child(3),html.motion-ready blockquote.rv.on p:nth-child(3){transition-delay:.14s}
html.motion-ready .gallery.rv.on figure:nth-child(4),html.motion-ready .roster.rv.on .roster-row:nth-child(4),html.motion-ready blockquote.rv.on p:nth-child(4){transition-delay:.21s}
html.motion-ready .gallery.rv.on figure:nth-child(5),html.motion-ready blockquote.rv.on p:nth-child(5){transition-delay:.28s}
html.motion-ready .gallery.rv.on figure:nth-child(6),html.motion-ready blockquote.rv.on p:nth-child(6){transition-delay:.35s}
html.motion-ready .gallery.rv.on figure:nth-child(n+7),html.motion-ready blockquote.rv.on p:nth-child(n+7){transition-delay:.42s}
/* 安全弁: JS失敗・無効 */
html.no-js .gallery figure,html.js-fallback .gallery figure{clip-path:none!important}
html.no-js .roster-row,html.js-fallback .roster-row,html.no-js .card,html.js-fallback .card,
html.no-js .shop-card,html.js-fallback .shop-card,html.no-js blockquote p,html.js-fallback blockquote p{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  html.motion-ready .gallery.rv figure{clip-path:none!important;transition:none}
  html.motion-ready .roster.rv .roster-row,html.motion-ready .card-grid.rv .card,
  html.motion-ready .shop-grid.rv .shop-card,html.motion-ready blockquote.rv p{opacity:1!important;transform:none!important;transition:none}
}

/* ---------- responsive base ---------- */
@media (max-width:600px){
  body{font-size:15px}
  .section{padding:60px 16px}
  .section.tight{padding:44px 16px}
  .hero-in{padding:0 16px 40px}
  .facts-in{padding:28px 16px 40px}
  .cat-head h2{font-size:1.25rem}
}