/* ============================================================
   TOBIRA studio — theme v2  (concept demo 共通テーマ)
   方針：2026年の潮流＝restraint / performance / clarity。
   ・奇抜な表示書体を使わない（Cormorant Garamond 全廃）
   ・日本語本文はゴシック 17px / line-height 1.85（明朝300をやめる）
   ・モーションは「誘導のため」だけ。全部切ってもFVが成立する
   ・コントラストは本文・補助テキストとも 4.5:1 以上
   見出し書体は body の .type-mincho / .type-gothic で切替える。
   ============================================================ */

:root{
  /* 面 */
  --paper:#FCFBF9;
  --paper2:#F4F1EC;
  --card:#FFFFFF;

  /* 文字（すべて --paper 上で 4.5:1 以上を実測して選定） */
  --ink:#1A1815;        /* 本文        16.4:1 */
  --ink-soft:#6E675E;   /* 補助         5.5:1 */
  --ink-faint:#7A736A;  /* 注釈         4.5:1 */

  /* 罫 */
  --line:rgba(26,24,21,.14);
  --line-soft:rgba(26,24,21,.07);

  /* 店ごとに差し替わる（build_maker_site.py が置換） */
  --accent:#8A6A3A;      /* 面として使う（上に白文字を乗せる） */
  --accent-ink:#6F5429;  /* 文字として使う（paper上で4.5:1以上） */
  --accent-wash:rgba(138,106,58,.08);

  /* 書体 */
  --font-body:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --font-head:var(--font-body);
  --font-num:'Inter',var(--font-body);

  --maxw:1120px;
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* 見出し書体の2モード */
body.type-mincho{ --font-head:'Zen Old Mincho','Yu Mincho','Hiragino Mincho ProN',serif; }
body.type-gothic{ --font-head:var(--font-body); }
body.type-mincho h1,body.type-mincho h2,body.type-mincho h3,body.type-mincho h4{font-weight:600}
body.type-gothic h1,body.type-gothic h2,body.type-gothic h3,body.type-gothic h4{font-weight:700}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-weight:400;
  font-size:17px;line-height:1.85;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:0;
}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.42;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* キーボード操作の可視化（a11y） */
:focus-visible{outline:2.5px solid var(--accent-ink);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:12px 20px;border-radius:0 0 8px 0;font-size:15px}
.skip:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12.5px;letter-spacing:.12em;color:var(--accent-ink);font-weight:500}
.muted{color:var(--ink-soft)}
.jp{font-family:var(--font-body)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(252,251,249,.92);
  backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--line-soft)}
.nav .row{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;flex-direction:column;line-height:1.25;min-height:44px;justify-content:center}
.brand b{font-family:var(--font-head);font-size:19px;font-weight:inherit;letter-spacing:.02em}
.brand small{font-family:var(--font-num);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.links{display:flex;align-items:center;gap:26px}
.links a{font-size:14.5px;color:var(--ink-soft);position:relative;padding:10px 0;transition:color .25s var(--ease)}
.links a:hover,.links a.active{color:var(--ink)}
.links a.active::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent)}
.links .shop{color:#fff;background:var(--accent);padding:11px 20px;border-radius:8px;font-weight:500;
  min-height:44px;display:flex;align-items:center;transition:filter .25s var(--ease)}
.links .shop:hover{filter:brightness(.92);color:#fff}
.navtoggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.navtoggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.navtoggle span:nth-child(1){top:16px}.navtoggle span:nth-child(2){top:21px}.navtoggle span:nth-child(3){top:26px}
body.navopen .navtoggle span:nth-child(1){top:21px;transform:rotate(45deg)}
body.navopen .navtoggle span:nth-child(2){opacity:0}
body.navopen .navtoggle span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;padding:96px 0 76px;overflow:hidden;background:var(--paper)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(90% 70% at 78% 12%,var(--accent-wash),transparent 68%)}
.hero .inner{position:relative;z-index:1;max-width:800px}
.hero .pre{font-family:var(--font-num);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;margin-bottom:18px}
.hero h1{font-size:clamp(28px,4.6vw,52px);line-height:1.38;letter-spacing:.005em}
.hero h1 .em{color:var(--accent-ink)}
.hero .sub{margin-top:22px;font-size:17px;color:var(--ink-soft);max-width:36em}
.hero .ctas{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero .meta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft)}
.hero .meta span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 15px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;padding:14px 28px;border-radius:9px;
  font-size:15.5px;font-weight:500;min-height:48px;
  transition:filter .25s var(--ease),transform .25s var(--ease)}
.btn:hover{filter:brightness(.92);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--paper2);filter:none;border-color:var(--ink-soft)}

/* ---------- SECTION ---------- */
section.block{padding:84px 0}
section.block.tint{background:var(--paper2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.sec-head{margin-bottom:44px;max-width:44em}
.sec-head h2{font-size:clamp(23px,3.2vw,34px);margin-top:10px;line-height:1.44}
.sec-head p{margin-top:14px;color:var(--ink-soft);font-size:16px}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}

.pagehead{padding:60px 0 8px}
.pagehead h1{font-size:clamp(26px,4vw,42px);margin-top:8px;line-height:1.4}
.pagehead p{max-width:40em;margin-top:14px;color:var(--ink-soft)}
.crumb{font-size:13px;color:var(--ink-faint)}
.crumb a:hover{color:var(--accent-ink);text-decoration:underline}

/* ---------- 商品グリッド ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.pcard:hover{border-color:var(--ink-faint);box-shadow:0 10px 30px rgba(26,24,21,.07)}
.pcard .thumb{aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;overflow:hidden;
  background:linear-gradient(155deg,var(--paper2),var(--accent-wash))}
.pcard .thumb .label{font-family:var(--font-head);font-size:clamp(18px,2.4vw,23px);color:var(--ink);
  line-height:1.5;transition:transform .45s var(--ease)}
.pcard:hover .thumb .label{transform:scale(1.03)}
.pcard .thumb .band{position:absolute;top:12px;left:12px;font-size:11px;letter-spacing:.06em;
  background:var(--card);color:var(--accent-ink);padding:5px 11px;border-radius:999px;border:1px solid var(--line-soft);font-weight:500}
.pcard .body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.pcard .origin{font-size:12px;letter-spacing:.06em;color:var(--accent-ink);font-weight:500}
.pcard h3{font-size:19px;margin:6px 0 2px;line-height:1.5}
.pcard .jp{font-size:13px;color:var(--ink-soft);margin-bottom:10px}
.pcard p{font-size:14.5px;color:var(--ink-soft);line-height:1.8;flex:1}
.pcard .foot{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px;gap:10px}
.pcard .price{font-family:var(--font-num);font-size:19px;font-weight:500;color:var(--ink)}
.pcard .more{font-size:13.5px;color:var(--accent-ink);font-weight:500;white-space:nowrap}

/* カテゴリチップ */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.chip{font-size:14px;padding:9px 17px;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-soft);background:var(--card);min-height:40px;display:inline-flex;align-items:center}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- 商品詳細 ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pdp .visual{aspect-ratio:1/1;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  padding:36px;text-align:center;background:linear-gradient(155deg,var(--paper2),var(--accent-wash));border:1px solid var(--line-soft)}
.pdp .visual .label{font-family:var(--font-head);font-size:clamp(22px,3.4vw,32px);line-height:1.5}
.pdp .info .origin{font-size:13px;letter-spacing:.06em;color:var(--accent-ink);font-weight:500}
.pdp .info h1{font-size:clamp(25px,3.6vw,38px);margin:8px 0 6px;line-height:1.42}
.pdp .info .jp{color:var(--ink-soft);margin-bottom:16px;font-size:15.5px}
.pdp .info .lead{color:var(--ink-soft);font-size:16px}
.pdp .info .price{font-family:var(--font-num);font-size:30px;font-weight:500;margin:22px 0 4px}
.pdp .info .note{font-size:13.5px;color:var(--ink-faint);margin-bottom:22px}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
.notes .n{border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;background:var(--card)}
.notes .n span{display:block;font-size:12px;letter-spacing:.06em;color:var(--accent-ink);margin-bottom:5px;font-weight:500}
.notes .n b{font-family:var(--font-head);font-size:16.5px;font-weight:inherit}

/* 手順（4ステップ） */
.brew{margin-top:56px}
.brew h2{font-size:clamp(21px,3vw,28px);margin-bottom:30px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps .s .num{counter-increment:s;width:40px;height:40px;border-radius:50%;background:var(--accent-wash);
  color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:13px;
  font-family:var(--font-num);font-size:16px;font-weight:500}
.steps .s .num::before{content:counter(s)}
.steps .s h4{font-size:16.5px;margin-bottom:5px}
.steps .s p{font-size:14.5px;color:var(--ink-soft);line-height:1.8}

/* ---------- ★ signature（店ごとに1つだけ入る固有ブロック） ---------- */
.sig{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.sig h3{font-size:clamp(19px,2.6vw,25px);margin-bottom:8px}
.sig .lead{color:var(--ink-soft);font-size:15.5px;margin-bottom:24px;max-width:44em}

/* 表（アレルゲン・サイズ・価格など） */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl caption{text-align:left;font-size:13.5px;color:var(--ink-faint);padding-bottom:10px}
.tbl th,.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{font-size:13.5px;letter-spacing:.04em;color:var(--ink-soft);font-weight:500;background:var(--paper2)}
.tbl tbody th{font-weight:500;white-space:nowrap}
.tbl td.no{color:var(--accent-ink);font-weight:500}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* スウォッチ（色見本） */
.swatches{display:flex;flex-wrap:wrap;gap:14px}
.sw{width:104px;text-align:center}
.sw .chipc{width:100%;aspect-ratio:1/1;border-radius:10px;border:1px solid var(--line);
  transition:transform .3s var(--ease)}
.sw:hover .chipc{transform:translateY(-3px)}
.sw span{display:block;font-size:13px;color:var(--ink-soft);margin-top:8px}

/* 2つの入口（分岐） */
.forks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fork{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;transition:border-color .3s var(--ease)}
.fork:hover{border-color:var(--accent)}
.fork .tag{font-size:12.5px;color:var(--accent-ink);font-weight:500;letter-spacing:.06em}
.fork h4{font-size:20px;margin:8px 0 10px}
.fork p{font-size:15px;color:var(--ink-soft);flex:1;line-height:1.8}
.fork .go{margin-top:16px;font-size:14.5px;color:var(--accent-ink);font-weight:500}

/* 横並びの証拠カード */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.proof .p{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.proof .p b{display:block;font-family:var(--font-num);font-size:31px;font-weight:500;color:var(--accent-ink);line-height:1.2}
.proof .p strong{display:block;font-family:var(--font-head);font-size:17px;font-weight:inherit;margin-bottom:7px}
.proof .p p{font-size:14.5px;color:var(--ink-soft);line-height:1.8;margin-top:6px}

/* ---------- お知らせ ---------- */
.newslist{max-width:820px;border-top:1px solid var(--line)}
.newsitem{display:grid;grid-template-columns:120px 1fr;gap:20px;
  padding:22px 4px;border-bottom:1px solid var(--line)}
.newsitem time{font-family:var(--font-num);font-size:14px;color:var(--ink-faint)}
.newsitem .cat{font-size:12px;color:var(--accent-ink);display:inline-block;margin-bottom:4px;font-weight:500}
.newsitem h3{font-size:17.5px;line-height:1.6}
.newsitem p{font-size:14.5px;color:var(--ink-soft);margin-top:5px}

/* ---------- 2カラム（物語） ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split .visual{aspect-ratio:4/5;border-radius:var(--radius);border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--paper2),var(--accent-wash));display:flex;align-items:center;
  justify-content:center;padding:32px;text-align:center}
.split .visual .label{font-family:var(--font-head);font-size:clamp(19px,2.6vw,26px);line-height:1.6;color:var(--ink)}
.split h2{font-size:clamp(23px,3.2vw,34px);margin-bottom:16px;line-height:1.44}
.split p{color:var(--ink-soft);font-size:16px;margin-bottom:14px}
.statline{display:flex;gap:34px;flex-wrap:wrap;margin-top:24px}
.statline .st b{font-family:var(--font-num);font-size:31px;font-weight:500;display:block;line-height:1.2;color:var(--accent-ink)}
.statline .st span{font-size:13.5px;color:var(--ink-soft)}

/* ---------- 店の情報（配送・支払い・営業時間・所在地） ---------- */
.infogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.infogrid .i{padding:22px 24px;border-bottom:1px solid var(--line-soft)}
.infogrid .i:nth-child(odd){border-right:1px solid var(--line-soft)}
.infogrid .i:nth-last-child(-n+2){border-bottom:0}
.infogrid dt{font-size:13px;color:var(--accent-ink);font-weight:500;letter-spacing:.04em;margin-bottom:6px}
.infogrid dd{font-size:15.5px;line-height:1.8}
.infogrid dd small{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:4px}

/* ---------- FAQ（details＝JS不要・スクリーンリーダー対応） ---------- */
.faq{max-width:760px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 2px;position:relative;
  font-family:var(--font-head);font-size:17px;line-height:1.6;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:12px;top:29px;width:10px;height:10px;
  border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq .a{padding:0 4px 22px;color:var(--ink-soft);font-size:15.5px}

/* ---------- CTA ---------- */
.cta-strip{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:72px 0}
.cta-strip .inner{max-width:640px}
.cta-strip h2{font-size:clamp(23px,3.4vw,34px);line-height:1.44}
.cta-strip p{margin:14px 0 28px;color:var(--ink-soft);font-size:16px}
.cta-strip .ctas{display:flex;gap:12px;flex-wrap:wrap}

/* スマホ下部固定CTA（コンバージョンの定番・タップ48px） */
.mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(252,251,249,.97);border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px}
.mobilebar a{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:9px;font-size:15.5px;font-weight:500}
.mobilebar .primary{background:var(--accent);color:#fff}
.mobilebar .second{border:1.5px solid var(--line);color:var(--ink)}

/* ---------- FOOTER ---------- */
footer{background:var(--paper2);padding:56px 0 28px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.fgrid .fm{font-family:var(--font-head);font-size:21px}
.fgrid .fj{font-size:13px;color:var(--ink-soft);margin:6px 0 12px}
.fgrid p{font-size:14.5px;color:var(--ink-soft)}
.fcol h4{font-size:13px;letter-spacing:.06em;color:var(--accent-ink);margin-bottom:12px}
.fcol a{display:block;font-size:14.5px;color:var(--ink-soft);padding:7px 0;transition:color .25s var(--ease)}
.fcol a:hover{color:var(--ink)}
.fbar{max-width:var(--maxw);margin:40px auto 0;padding:20px 24px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink-faint)}
.demo-note{max-width:var(--maxw);margin:16px auto 0;padding:0 24px;font-size:13px;color:var(--ink-faint);line-height:1.8}

/* ---------- REVEAL（抑制：14px・0.5s・stagger） ----------
   ★フェイルセーフ：隠すのは html.js-anim が付いているときだけ。
   JSが落ちた／webview等でスクリプトが止まった場合は、最初から全部見えている。 */
.js-anim .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--d,0) * 60ms)}
.js-anim .reveal.in{opacity:1;transform:none}

/* モーションを望まない人には全部止める（FVは成立したまま） */
@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}
  .js-anim .reveal,.reveal{opacity:1!important;transform:none!important}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .grid,.grid.two{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr;gap:28px}
  .split{grid-template-columns:1fr;gap:26px}
  .split .visual{aspect-ratio:16/10}
  .steps{grid-template-columns:repeat(2,1fr);gap:24px}
  .proof{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  body{font-size:16.5px;padding-bottom:74px}
  .links{position:fixed;inset:68px 0 auto 0;flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:6px 0 16px;transform:translateY(-140%);
    transition:transform .32s var(--ease);align-items:stretch;max-height:calc(100vh - 68px);overflow-y:auto}
  body.navopen .links{transform:none}
  .links a{padding:15px 24px;font-size:16px;min-height:48px;display:flex;align-items:center}
  .links a.active::after{display:none}
  .links .shop{margin:10px 24px 0;justify-content:center}
  .navtoggle{display:block}
  .grid,.grid.two{grid-template-columns:1fr}
  .notes{grid-template-columns:1fr 1fr}
  .newsitem{grid-template-columns:1fr;gap:5px}
  .forks{grid-template-columns:1fr}
  .infogrid{grid-template-columns:1fr}
  .infogrid .i:nth-child(odd){border-right:0}
  .infogrid .i:nth-last-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .infogrid .i:last-child{border-bottom:0}
  .fgrid{grid-template-columns:1fr}
  .hero{padding:64px 0 56px}
  section.block{padding:60px 0}
  .sig{padding:22px}
  .mobilebar{display:flex}
}