@charset "utf-8";
/* ノトルアトリエ v4
   見立て = notre（私たちの）。もの と 人 が静かに出会って、それぞれの手に渡っていく場所。
   動作は3つ: ①手に取る(前後) ②渡す(水平) ③静かに置かれている(静止)
   v3のベージュ一色をやめ、地を白に寄せて写真（多肉の緑と赤紫、古道具の錆）を持ち上げる。 */

:root{
  --bg:#FAF8F4;        /* 地。写真を持ち上げる白寄り */
  --bg2:#F2EEE6;       /* 一段沈めた地 */
  --paper:#F6F1E7;     /* 紙の地（aboutの物語） */
  --ink:#2B2620;       /* 本文 */
  --ink2:#5C544A;      /* 補助 */
  --line:#D8D0C4;
  --deep:#3A3128;      /* 沈める区間・フッター。ベージュではなく濃い茶で締める */
  --accent:#8C4A5A;    /* 多肉の赤紫。写真の中にある色から採るので浮かない */
  --leaf:#6E7A5E;      /* 葉の色。草・罫に少しだけ */
  --wrap:1120px;
  --pad:clamp(20px,5vw,48px);
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
/* 画面外に逃がしたメニューが横スクロールを作るのを止める。
   ★overflow:hidden ではなく clip。hidden はスクロールコンテナを作って sticky ヘッダを殺す。 */
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-weight:400; font-size:16px; line-height:1.95;
  letter-spacing:.02em; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:"Zen Old Mincho",serif; font-weight:500; line-height:1.5; letter-spacing:.04em; margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* 改行は句読点でだけ（feedback-kuten-line-break）。日本語は既定でどこでも折れるので明示的に抑える */
h1,h2,h3,.lead,.fv-l,.ph-lead,.mark{word-break:keep-all; overflow-wrap:break-word; line-break:strict}

.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---- 器 ---- */
.wrap{width:min(var(--wrap),100%); margin-inline:auto; padding-left:var(--pad); padding-right:var(--pad)}
.sec{padding-block:clamp(56px,9vw,112px); position:relative}
.sec.tone-dark{background:var(--deep); color:#EFE9DE}
.sec.tone-dark .kicker{color:#B9A98F}
.sec.tone-dark a{color:#EFE9DE}
.sec.paper{background:var(--paper)}
.sec + .sec.tone-dark{margin-top:0}

.sec-head{margin-bottom:clamp(28px,4vw,52px); max-width:34em}
.kicker{font-family:"Zen Old Mincho",serif; font-size:13px; letter-spacing:.22em; color:var(--ink2); margin:0 0 .7em}
h1{font-size:clamp(30px,5.2vw,50px)}          /* h1とh2に明確な差をつける（v3は32/29でほぼ同大だった） */
.sec-head h2{font-size:clamp(22px,3vw,32px)}
.lead{margin-top:1em; color:var(--ink2); font-size:15px}
.small{font-size:13.5px; color:var(--ink2); line-height:1.85}
.page-head{padding-block:clamp(56px,8vw,96px) clamp(24px,3vw,40px)}
.page-head h1{margin-top:.1em}
.ph-lead{margin-top:1.2em; max-width:34em; color:var(--ink2)}

.more{display:inline-block; margin-top:.6em; font-size:14.5px; text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .3s}
.more::after{content:"　→"; letter-spacing:0}
.more:hover{border-color:var(--accent)}
.textlink{color:inherit; text-underline-offset:3px}
.btn{display:inline-block; margin-top:.4em; padding:14px 28px; background:var(--deep); color:#F6F1E7;
  text-decoration:none; font-size:15px; letter-spacing:.06em; border-radius:var(--r); transition:background .3s}
.btn:hover{background:#4B4034}
.tone-dark .btn{background:#F0E9DC; color:var(--deep)}
.tone-dark .btn:hover{background:#fff}

/* ---- ヘッダ ---- */
header.site{position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px var(--pad); background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.brand{text-decoration:none; display:flex; flex-direction:column; line-height:1.25}
.brand-en{font-family:"Zen Old Mincho",serif; font-size:19px; letter-spacing:.1em; font-style:italic}
.brand-ja{font-size:10.5px; letter-spacing:.24em; color:var(--ink2)}
.nav ul{display:flex; gap:clamp(12px,1.8vw,26px); list-style:none; margin:0; padding:0}
.nav a{text-decoration:none; font-size:14px; letter-spacing:.05em; padding:4px 0; border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--accent)}
.navbtn{display:none}

/* ---- FV : LAB82 はじめの一瞬だけ写真が三枚流れて止まる（外・中・手元） ---- */
.fv{position:relative; padding:clamp(20px,3vw,34px) var(--pad) clamp(64px,8vw,104px)}
.fv-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(6px,1vw,14px);
  width:min(1320px,100%); margin-inline:auto}
.fv-sh{position:relative; overflow:hidden; border-radius:var(--r);
  transform:translateX(calc(var(--n) * -6%)); opacity:0;
  animation:fvIn .9s cubic-bezier(.22,.7,.25,1) forwards; animation-delay:calc(var(--n) * .16s + .1s)}
@keyframes fvIn{to{transform:translateX(0); opacity:1}}
.fv-sh .ph{margin:0}
.fv-sh img{width:100%; aspect-ratio:3/4; object-fit:cover}
.fv-tag{position:absolute; left:10px; bottom:8px; font-family:"Zen Old Mincho",serif; font-size:12px;
  letter-spacing:.2em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55)}
.fv-txt{width:min(var(--wrap),100%); margin:clamp(28px,4vw,46px) auto 0; max-width:30em}
.fv-k{font-family:"Zen Old Mincho",serif; font-size:12.5px; letter-spacing:.24em; color:var(--ink2); margin:0 0 .9em}
.fv h1{display:flex; flex-direction:column; gap:.35em}
.fv-en{font-style:italic; font-size:clamp(30px,5.6vw,54px); letter-spacing:.06em}
.fv-ja{font-size:clamp(15px,2vw,19px); letter-spacing:.12em; color:var(--ink2); font-weight:400}
.fv-l{margin-top:1.4em; font-size:15.5px; color:var(--ink2)}

/* LAB95 画面の下辺に、草が生える（画像を足さずCSSだけ） */
.grass{position:absolute; left:0; right:0; bottom:0; height:26px; pointer-events:none;
  background-repeat:repeat-x; background-size:44px 26px; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Cg fill='none' stroke='%236E7A5E' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4 26 C4 16 2 12 1 8'/%3E%3Cpath d='M11 26 C11 14 13 10 16 6'/%3E%3Cpath d='M19 26 C19 18 18 14 17 11'/%3E%3Cpath d='M27 26 C27 15 29 11 32 8'/%3E%3Cpath d='M36 26 C36 17 35 13 34 10'/%3E%3C/g%3E%3C/svg%3E")}

/* ---- 2カラム ---- */
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,60px); align-items:center}
.two.rev .two-t{order:2}
.two-p{margin:0}
.two-p img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r)}
.two-t p{max-width:26em}

/* LAB22 大事な言葉に、手書きの丸がつく（1ページ1箇所まで） */
.mark{position:relative; display:inline-block; width:fit-content; max-width:100%;
  font-family:"Zen Old Mincho",serif; font-size:17px; padding:.25em .7em}
.mark::before{content:""; position:absolute; inset:-4px -12px; border-radius:50% 48% 52% 50%/50% 52% 48% 50%;
  border:1.6px solid var(--accent); opacity:.55;
  clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.3,.7,.3,1) .15s}
.is-in .mark::before{clip-path:inset(0 0 0 0)}

/* ---- N7 棚から手前に出る（透明度は触らない。位置と大きさだけ） ---- */
.shelf{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.6vw,34px)}
.scard{transform:translateY(26px) scale(.955); transition:transform .8s cubic-bezier(.22,.7,.25,1);
  transition-delay:calc(var(--i) * .11s)}
.is-in .scard{transform:translateY(0) scale(1)}
.scard-ph{margin:0}
.scard-ph img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r)}
.scard-b{padding-top:18px}
.scard-b h3{font-size:18px; margin-bottom:.5em}
.scard-b p{font-size:14.5px; color:var(--ink2)}

/* ---- LAB06 写真がスクロールで画面いっぱいに育つ ---- */
.grow{padding-block:clamp(20px,4vw,48px) clamp(28px,4vw,56px)}
.grow-in{width:min(1400px,100%); margin-inline:auto; padding-inline:var(--pad)}
.grow-ph{margin:0; overflow:hidden; border-radius:var(--r);
  transform:scale(var(--g,.86)); transform-origin:center; will-change:transform}
.grow-ph img{width:100%; aspect-ratio:16/10; object-fit:cover}
.grow-cap{margin:16px auto 0; width:min(var(--wrap),100%); padding-inline:var(--pad);
  font-size:13.5px; color:var(--ink2)}

/* ---- LAB66 雑誌のように、大小で組む ---- */
.mag{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2.4vw,30px); margin-top:clamp(24px,3vw,40px)}
.mag-i{margin:0}
.mag-i .ph{margin:0}
.mag-i img{width:100%; object-fit:cover; border-radius:var(--r)}
.mag-lg{grid-row:span 2}
.mag-lg img{aspect-ratio:4/5}
.mag-sm img{aspect-ratio:4/3}
.mag-i figcaption{margin-top:8px; font-size:13px; color:var(--ink2)}

/* 写真は押すと大きく（LAB80） */
.ph img{cursor:zoom-in}
.lb{position:fixed; inset:0; z-index:90; background:rgba(24,20,16,.92); display:grid; place-items:center;
  padding:24px; opacity:0; pointer-events:none; transition:opacity .28s}
.lb.on{opacity:1; pointer-events:auto}
.lb img{max-width:min(1100px,92vw); max-height:88vh; width:auto; border-radius:var(--r)}
.lb button{position:absolute; top:16px; right:16px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:20px; cursor:pointer}

/* ---- 引用 ---- */
.pull{margin:2.2em 0; padding-left:clamp(16px,2.4vw,28px); border-left:2px solid var(--accent)}
.pull p{font-family:"Zen Old Mincho",serif; font-size:clamp(17px,2.3vw,22px); line-height:1.85; margin:0}
.pull cite{display:block; margin-top:.8em; font-size:13px; font-style:normal; color:var(--ink2)}


/* ---- 一覧・帯 ---- */
.tl{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.tone-dark .tl{border-color:rgba(239,233,222,.24)}
.tl li{display:grid; grid-template-columns:11em minmax(0,1fr); gap:8px 20px; padding:16px 0; border-bottom:1px solid var(--line)}
.tone-dark .tl li{border-color:rgba(239,233,222,.24)}
.tl-d{font-family:"Zen Old Mincho",serif; font-size:14px; letter-spacing:.08em; color:var(--ink2)}
.tone-dark .tl-d{color:#C4B49A}
.tl-t{font-size:14.5px}

.wlist{list-style:none; margin:0 0 1.6em; padding:0; border-top:1px solid var(--line)}
.wlist li{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line)}
.wlist b{font-family:"Zen Old Mincho",serif; font-weight:500; font-size:16px}
.wlist span{font-size:13.5px; color:var(--ink2)}

/* LAB69 通り過ぎた分だけ、色が戻る（ホバーではなく通過なのでスマホでも効く） */
.mklist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,56px)}
.mk{padding:18px 0; border-bottom:1px solid var(--line); color:var(--ink2);
  transition:color .5s ease, border-color .5s ease}
.mk b{display:block; font-family:"Zen Old Mincho",serif; font-weight:500; font-size:16.5px; letter-spacing:.04em;
  color:#9A9186; transition:color .5s ease}
.mk span{font-size:13.5px}
.mk.lit{color:var(--ink)}
.mk.lit b{color:var(--accent)}
.mk.lit{border-color:var(--accent)}

.uses{list-style:none; margin:0 0 1.4em; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.uses li{border:1px solid var(--line); padding:8px 16px; font-size:14px; border-radius:var(--r)}
.rules{margin:0; padding-left:1.2em}
.rules li{font-size:14.5px; margin-bottom:.5em}

.steps{display:grid; gap:14px; margin-bottom:1.6em}
.st{display:flex; gap:16px; align-items:flex-start}
.stn{flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-family:"Zen Old Mincho",serif; font-size:14px}
.st p{margin:0; padding-top:2px; font-size:14.5px}

.qa{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px); margin-bottom:1.6em}
.qi h3{font-size:16.5px; margin-bottom:.5em; padding-left:.9em; position:relative}
.qi h3::before{content:""; position:absolute; left:0; top:.62em; width:.5em; height:1px; background:var(--accent)}
.qi p{font-size:14.5px; color:var(--ink2)}

.cts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.ct h3{font-size:16px; margin-bottom:.6em}
.ct p{font-size:14px}

/* ---- LAB56 ひらいている時間が、そのまま一本の帯になる ---- */
.hours{display:grid; gap:6px; margin-bottom:1.4em; max-width:640px}
.hrow{display:grid; grid-template-columns:2.4em minmax(0,1fr); align-items:center; gap:12px}
.hd{font-family:"Zen Old Mincho",serif; font-size:14px; color:var(--ink2)}
.hb{position:relative; height:30px; background:var(--bg2); border-radius:var(--r); overflow:hidden}
.hb::before{content:""; position:absolute; top:0; bottom:0;
  left:calc(var(--s,0) / 24 * 100%); width:calc((var(--e,0) - var(--s,0)) / 24 * 100%);
  background:var(--leaf); opacity:.85}
.hb i{position:absolute; left:calc(var(--s,0) / 24 * 100% + 10px); top:50%; transform:translateY(-50%);
  font-style:normal; font-size:12px; letter-spacing:.06em; color:#fff; z-index:1}
.hb.none{background:var(--bg2)}
.hb.none::before{display:none}
.hb.none i{left:10px; color:var(--ink2)}
.hrow.off .hd{color:var(--accent)}

/* ---- 定義リスト ---- */
.info{display:grid; grid-template-columns:7em minmax(0,1fr); gap:10px 20px; margin:0}
.info.wide{grid-template-columns:12em minmax(0,1fr)}
.info dt{font-size:13.5px; color:var(--ink2); font-family:"Zen Old Mincho",serif; letter-spacing:.08em}
.info dd{margin:0; font-size:14.5px}
.acc .info{margin-bottom:1.4em}
.mapwrap{margin-top:1.6em}

/* ---- LAB79 関わっている人の名前を、最後に流す（notre＝私たちの、の回収） ---- */
.credits{background:var(--bg2); padding-block:clamp(40px,6vw,72px); overflow:hidden}
.credits-lead{width:min(var(--wrap),100%); margin:0 auto 26px; padding-left:var(--pad); padding-right:var(--pad);
  font-family:"Zen Old Mincho",serif; font-size:15px; line-height:1.9; color:var(--ink2)}
.credits-rail{position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.credits-run{display:flex; gap:34px; width:max-content; animation:runL 46s linear infinite}
.credits-run span{font-family:"Zen Old Mincho",serif; font-size:clamp(17px,2.4vw,25px); letter-spacing:.05em;
  color:#B3A896; white-space:nowrap}
@keyframes runL{to{transform:translateX(-50%)}}
.credits-note{width:min(var(--wrap),100%); margin:26px auto 0; padding-left:var(--pad); padding-right:var(--pad); font-size:14px}

/* ---- フッタ ---- */
footer.site{background:var(--deep); color:#E7DFD2; padding-block:clamp(44px,6vw,72px) 24px}
.foot-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(28px,4vw,56px)}
footer.site .brand-en{font-size:22px; font-style:italic; display:block; margin-bottom:14px}
.fadd{font-size:13.5px; line-height:1.9; color:#BFB3A0; margin-bottom:1em}
.fsns{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13.5px}
.fsns a{text-underline-offset:3px}
.fnav{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.fg h3{font-family:"Zen Old Mincho",serif; font-size:13px; letter-spacing:.16em; color:#B49E7E; margin-bottom:12px}
.fg ul{list-style:none; margin:0; padding:0}
.fg li{margin-bottom:9px}
.fg a{font-size:13.5px; text-decoration:none; border-bottom:1px solid transparent}
.fg a:hover{border-bottom-color:#8E7B60}
.copy{margin:clamp(32px,5vw,56px) auto 0; width:min(var(--wrap),100%);
  padding-left:var(--pad); padding-right:var(--pad); font-size:12px; color:#8E8271}

/* ---- リビール（全体の既定） ---- */
.rv{transform:translateY(18px); opacity:0; transition:transform .85s cubic-bezier(.22,.7,.25,1), opacity .85s ease}
.rv.is-in{transform:none; opacity:1}

/* ================= スマホ ================= */
@media (max-width:899px){
  body{font-size:15.5px; line-height:1.9}
  .navbtn{display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:8px 2px;
    font-family:inherit; font-size:12px; letter-spacing:.14em; color:var(--ink); cursor:pointer}
  .navbtn span{width:20px; height:9px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink)}
  /* .nav は「画面ぴったりの切り抜き枠」。中の ul だけを横に滑らせる。
     ★パネル自体を画面外へ transform すると body の scrollWidth が伸びる
     （画面上は overflow-x:clip で見えないが、フルページ撮影の幅が壊れる）。枠で切るのが正解。 */
  .nav{position:fixed; inset:0; overflow:hidden; pointer-events:none; visibility:hidden;
    z-index:39; transition:visibility 0s linear .38s}
  .nav.on{pointer-events:auto; visibility:visible; transition:visibility 0s}
  .nav ul{position:absolute; top:0; right:0; bottom:0; width:min(320px,86vw);
    flex-direction:column; gap:2px; background:var(--bg); border-left:1px solid var(--line);
    padding:78px 26px 26px; overflow-y:auto; transform:translateX(100%);
    transition:transform .38s cubic-bezier(.22,.7,.25,1)}
  .nav.on ul{transform:none}
  .nav a{display:block; padding:13px 0; border-bottom:1px solid var(--line); font-size:15px}
  .nav a:hover,.nav a[aria-current]{border-bottom-color:var(--line)}
  .nav a[aria-current]{color:var(--accent)}

  .fv-strip{grid-template-columns:repeat(3,1fr); gap:5px}
  .fv-sh img{aspect-ratio:2/3}
  .fv-tag{left:6px; bottom:5px; font-size:10px; letter-spacing:.12em}
  .fv-txt{max-width:none}

  .two{grid-template-columns:minmax(0,1fr); gap:24px}
  .two.rev .two-t{order:0}
  .two-p img{aspect-ratio:4/5}
  .shelf{grid-template-columns:minmax(0,1fr); gap:34px}
  .scard{transition-delay:0s}
  .scard-ph img{aspect-ratio:4/3}
  .mag{grid-template-columns:minmax(0,1fr)}
  .mag-lg{grid-row:auto}
  .mag-lg img,.mag-sm img{aspect-ratio:4/3}
  .grow-ph img{aspect-ratio:4/3}
  .qa,.cts,.mklist{grid-template-columns:minmax(0,1fr)}
  .tl li{grid-template-columns:minmax(0,1fr)}
  .tl-d{font-size:12.5px; letter-spacing:.12em}
  .info{grid-template-columns:minmax(0,1fr); gap:2px 0}
  .info dt{margin-top:12px}
  .info.wide{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .fnav{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px}
  .credits-run{animation-duration:32s}
}
@media (max-width:420px){
  .fv-strip{gap:4px}
  .brand-en{font-size:17px}
}

/* ================= 動きを減らす設定 ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .fv-sh{opacity:1; transform:none}
  .scard{transform:none}
  .rv{transform:none; opacity:1}
  .grow-ph{transform:none}
  .mark::before{clip-path:inset(0 0 0 0)}
  .mk{color:var(--ink)} .mk b{color:var(--accent)}
}
/* JSが動かなかったときも中身は必ず見える */
.no-js .rv,.no-js .scard{transform:none; opacity:1}
.no-js .grow-ph{transform:none}
.no-js .mk{color:var(--ink)}
.no-js .mk b{color:var(--accent)}
.no-js .mark::before{clip-path:inset(0 0 0 0)}

/* ================= 追補（出荷ゲートで見つけた分） ================= */

/* 濃地の上の補助テキストが --ink2（濃いグレー）のままで読めなかった。濃地専用の色を、使う場所にスコープして当てる。 */
.sec.tone-dark{--ink2:#C9BFAE}
.sec.tone-dark .lead,
.sec.tone-dark .small,
.sec.tone-dark .scard-b p,
.sec.tone-dark .qi p,
.sec.tone-dark .ct p,
.sec.tone-dark .wlist span,
.sec.tone-dark .info dt,
.sec.tone-dark .mag-i figcaption,
.sec.tone-dark .story p{color:#C9BFAE}
.sec.tone-dark .info dd a,
.sec.tone-dark .textlink{color:#F2EADC}
.sec.tone-dark .uses li{border-color:rgba(239,233,222,.3)}
.sec.tone-dark .wlist,
.sec.tone-dark .wlist li,
.sec.tone-dark .mk,
.sec.tone-dark .more{border-color:rgba(239,233,222,.26)}
.sec.tone-dark .pull{border-left-color:#C08494}
.sec.tone-dark .mark::before{border-color:#D79AA8; opacity:.7}
.sec.tone-dark .stn{border-color:rgba(239,233,222,.34)}
.sec.tone-dark .qi h3::before{background:#D79AA8}

/* 見出しと本文を左右に置く段組。片側が空のまま残る事故を防ぐための正式な部品。
   （.two に .two-t だけ入れると右半分が丸ごと空いて「実装漏れ」に見える） */
.split{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,5vw,72px); align-items:start}
.split-h{position:sticky; top:96px}
.split-h h2{font-size:clamp(22px,3vw,32px)}
.split-h .kicker{margin-bottom:.8em}
.split-b p{max-width:32em}
@media (max-width:899px){
  .split{grid-template-columns:minmax(0,1fr); gap:20px}
  .split-h{position:static}
}

/* ---- コントラスト実測でNGだった分の修正（qa_contrast_v4.py） ---- */

/* ★濃地のボタンが読めなかった。`.sec.tone-dark a{color:#EFE9DE}` が
   `.tone-dark .btn` より詳細度で勝ち、地と文字がほぼ同色になっていた（比 1.0）。 */
.sec.tone-dark a.btn{color:var(--deep)}
.sec.tone-dark a.btn:hover{color:var(--deep)}

.copy{color:#B5A894}                       /* 3.38 → 4.5以上へ */
.credits-run span{color:#8F8574}           /* 2.03 → 3以上へ（25px＝大きい文字の基準） */
.mk b{color:#6F675C}                       /* 通過前の状態でも読める濃さにする */

/* 写真の上に置く小さなラベル。影だけでは明るい写真の上で沈むので、下辺に薄い暗幕を敷く */
.fv-sh::after{content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(to top,rgba(28,22,16,.55),rgba(28,22,16,0)); pointer-events:none}
.fv-tag{z-index:1}

/* 営業時間の帯: 文字は緑の帯の上に乗るが、帯より外に出ると読めなくなるので念のため影を敷く */
.hb:not(.none) i{text-shadow:0 1px 3px rgba(30,40,24,.5)}

/* ---- 改行は句読点でだけ（レシピ§2.12・JSが .kt/.kt2 を挿す） ----
   ①句読点で区切った塊 ②その中の中黒・スラッシュ・閉じ括弧の小片。
   max-width:100% は保険（nowrap だけだと横スクロールが出る）。
   auto-phrase は .kt2 側にだけ掛ける（.kt に掛けると文節が小片の境目を追い越す）。 */
.kt{display:inline-block; max-width:100%}
.kt2{display:inline-block; max-width:100%; word-break:auto-phrase}

/* ---- 出荷ゲート2巡目 ---- */

/* 定義リストの直後に本文が続くと、行が地続きに見えて別の段落だと分からなかった */
.info{margin-bottom:1.6em}
.info:last-child{margin-bottom:0}

/* 営業時間の帯に時刻の目盛りを立てる。
   目盛りが無いと左半分（0時〜12時）の空きが「ただの余白」に見えて、帯の意味が伝わらない */
.hours{max-width:720px}
.hscale{margin-top:2px}
.hax{position:relative; height:18px}
.hax b{position:absolute; top:0; left:calc(var(--t) / 24 * 100%); transform:translateX(-50%);
  font-family:"Zen Old Mincho",serif; font-weight:400; font-size:11px; color:var(--ink2); letter-spacing:.04em}
.hax b::before{content:""; position:absolute; left:50%; top:-4px; width:1px; height:4px; background:var(--line)}
.hax b:first-child{transform:none}
.hax b:first-child::before{left:0}
.hax b:last-child{transform:translateX(-100%)}
.hax b:last-child::before{left:100%}

/* ================= 社長FB（0818）反映 ================= */

/* ★物語の段組。1列40chの中央寄せだと、句読点で折る規則と噛み合って
   「短い行が何段も続く」状態になっていた（社長FB）。
   写真を左に固定し、文字の器を広げて、行が右まで伸びるようにする。 */
.sec.wide .wrap{width:min(1280px,100%)}
.story2{display:grid; grid-template-columns:320px minmax(0,1fr); gap:clamp(28px,4.5vw,72px); align-items:start}
.story2-ph{position:sticky; top:96px}
.story2-ph .ph{margin:0}
.story2-ph img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r)}
.story2-cap{margin-top:10px; font-size:12px; line-height:1.8; color:var(--ink2)}
.story2-b p{max-width:42em}          /* 40ch → 48ch。1行に入る塊が増えて、行末が右まで届く */
.story2-b p{font-size:15.5px}
.story2-b .pull{margin:2em 0}

@media (max-width:899px){
  .story2{grid-template-columns:minmax(0,1fr); gap:24px}
  .story2-ph{position:static}
  .story2-ph img{aspect-ratio:4/3}
  .story2-b p{max-width:none}
}

/* 「出かけた先」と「紹介いただきました」を左右に分ける。
   メディア掲載が出店の一覧に紛れていて見つけられなかった（社長FB） */
.outgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start}
.outcol h2{font-size:clamp(20px,2.4vw,26px)}
.outcol .lead{margin-bottom:clamp(20px,3vw,34px)}
.outcol .tl li{grid-template-columns:8.5em minmax(0,1fr)}
@media (max-width:899px){
  .outgrid{grid-template-columns:minmax(0,1fr); gap:44px}
  .outcol .tl li{grid-template-columns:minmax(0,1fr)}
}