/* ============================================================
   限界エンジニア商店 — style.css v3「町の文房具屋さん×テプラ」
   目的: 買う前に「この人使ってないかな」と来た人が、持ち物を見比べて納得して Amazon に進む。
         買わない人も、ご近所さんのように覗いて笑って帰れる。
   温度: オシャンにしない。ちょっと古くて、ちょっとダサい（本人指定 2026-09-27）。
   配色の根拠（measure.js 実測）:
     地   = fujita-foods #f7f2eb 47%（本人◎・生成り）→ #f5f2ea
     面   = 同系の濃淡（fujita は4段）→ クラフト紙 #e4dac8
     濃面 = r-toolbox.jp の濃い帯 #313132 25% の役割を「黒板の深緑」で
     文字 = fujita #4d3d26（焦げ茶）より少し濃く #3a342c
     差し = vvstore #fccc35（黄は小面積）→ テプラの黄 #f5c400（ボタン・ラベルだけ）
   図形族: 直線とテープ。角丸は丸い物（シール・ハンコ・画鋲）だけ。影はボタンの下影1種。
   手作り感の技法: ①テプラ ②黒板 の2か所。
   ============================================================ */
:root {
  --color-base: #f5f2ea;
  --color-kraft: #e4dac8;
  --color-kraft-deep: #d3c5aa;
  --color-face: #2f3b33;
  --color-face-deep: #242d27;
  --color-wood: #7a5c3e;
  --color-card: #fffdf6;
  --color-text: #3a342c;
  --color-text-weak: #5f574e;
  --color-on-face: #f3f1e8;
  --color-on-face-weak: #c9cdbf;
  --color-accent: #f5c400;
  --color-accent-deep: #dcae00;
  --color-on-accent: #2b2620;
  --color-link: #2a4f9a;
  --color-line: #c7bba4;
  --color-grid: #e7e0d1;
  --color-tape: #fbfbf8;
  --color-tape-ink: #222222;
  --color-tape-edge: #d4d1c8;
  --color-tape-clear: rgba(255, 255, 255, 0.62);

  --font-heading: "Mochiy Pop One", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", sans-serif;
  --font-body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-num: "BIZ UDGothic", "BIZ UDPGothic", ui-monospace, Menlo, monospace;

  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px;
  --fs-h3: 20px; --fs-h2: 26px; --fs-h1: 36px; --fs-display: 48px;
  --lh-body: 1.9; --lh-tight: 1.5; --lh-heading: 1.4;
  --ls-body: 0.04em; --ls-heading: 0.04em; --ls-tape: 0.12em;
  --fw-regular: 400; --fw-bold: 700;

  --space-half: 4px;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px;
  --space-section: 80px;
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 32px;
  --measure: 40em;
  --header-h: 72px;
  --bar-h: 72px;
  --thumb: 88px;
  --rank-w: 56px;
  --control-lg: 56px;
  --control-md: 48px;
  --control-sm: 32px;
  --search-w: 640px;
  --notice-w: 640px;
  --sticker: 88px;
  --sticker-lg: 104px;
  --sticker-sm: 64px;
  --stamp: 40px;
  --knob: 24px;
  --pin: 16px;

  --radius-round: 50%;
  --line: 1px;
  --line-strong: 2px;
  --line-frame: 8px;
  --line-double: 6px;

  --shadow-press: 0 4px 0 var(--color-text);
  --shadow-tape: 0 2px 2px rgba(0, 0, 0, 0.14);
  --radius-tape: 2px;
  --grid-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M16 0H0V16' fill='none' stroke='%23e7e0d1' stroke-width='1'/%3E%3C/svg%3E");
  --ease: ease;
  --dur: 150ms;
}
@media (max-width: 767px) {
  :root { --space-section: 56px; --gutter: 16px; --fs-h1: 26px; --fs-h2: 22px; --fs-h3: 18px; --fs-display: 36px; --header-h: 56px; --thumb: 72px; --rank-w: 40px; }
}

/* ---------- 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; line-break: strict; overflow-wrap: anywhere; scroll-padding-top: var(--header-h); }
body { margin: 0; background: var(--color-base); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-feature-settings: "palt"; }
h1, h2, h3 { margin: 0; word-break: auto-phrase; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; }
.inner { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.inner--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.link { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; }
.sec { padding-block: var(--space-section); }
.sec--kraft { background: var(--color-kraft); }
.sec--grid { background: var(--color-card) var(--grid-bg); }
.sec-note { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text-weak); margin-block: var(--space-1) var(--space-4); }

/* ---------- 見出し（3種類だけ：二重下線／木札／テプラ） ---------- */
.band { display: block; font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); padding-block-end: var(--space-half); border-block-end: var(--line-double) double var(--color-text); }
.band--sm { font-size: var(--fs-h3); }
.band--wood { display: inline-block; position: relative; background: var(--color-wood); color: var(--color-on-face); border: 0; padding: var(--space-1) var(--space-5); }
.band--wood::before, .band--wood::after { content: ""; position: absolute; top: 50%; width: var(--space-1); height: var(--space-1); transform: translateY(-50%); border-radius: var(--radius-round); background: var(--color-kraft); }
.band--wood::before { left: var(--space-2); }
.band--wood::after { right: var(--space-2); }
.page-title { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: var(--fs-h1); line-height: var(--lh-heading); }

/* ---------- テプラ（フック①） ---------- */
.tape { display: inline-block; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: var(--lh-tight); letter-spacing: 0.02em; padding: 2px var(--space-1); background: var(--color-tape); color: var(--color-tape-ink); border: var(--line) solid var(--color-tape-edge); border-radius: var(--radius-tape); box-shadow: var(--shadow-tape); white-space: nowrap; }
.tape--white { background: var(--color-tape); color: var(--color-tape-ink); }
.tape--clear { background: var(--color-tape-clear); color: var(--color-tape-ink); border-color: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.tape--dark { background: var(--color-tape-ink); color: var(--color-tape); border-color: var(--color-tape-ink); }
.tape--sm { font-size: var(--fs-xs); }
.figure { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.figure > * { grid-area: 1 / 1; }
.tape--on-photo { position: relative; z-index: 1; align-self: end; justify-self: start; margin: var(--space-2); max-width: calc(100% - var(--space-4)); white-space: normal; transform: rotate(-1.5deg); }
.item-card:nth-child(3n+2) .tape--on-photo { transform: rotate(1deg); }
.item-card:nth-child(3n) .tape--on-photo { transform: rotate(-0.5deg); }
.tape--corner { position: relative; z-index: 1; align-self: start; justify-self: start; margin: var(--space-1); }
.tape--sm.tape--on-photo { margin: var(--space-1); max-width: calc(100% - var(--space-2)); }

/* リピート中シール（フック⑦・丸い物だけ角丸） */
.sticker { position: relative; z-index: 1; align-self: start; justify-self: end; margin: var(--space-1); width: var(--sticker); height: var(--sticker); border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-on-accent); border: var(--line-strong) solid var(--color-text); display: grid; place-items: center; text-align: center; font-family: var(--font-heading); font-size: var(--fs-xs); line-height: 1.2; padding: var(--space-half); white-space: nowrap; }
.sticker--lg { width: var(--sticker-lg); height: var(--sticker-lg); font-size: var(--fs-sm); margin: var(--space-2); }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--control-lg); padding: var(--space-1) var(--space-4); background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--fw-bold); font-size: var(--fs-lg); line-height: var(--lh-tight); text-decoration: none; border: var(--line-strong) solid var(--color-text); box-shadow: var(--shadow-press); cursor: pointer; transition: background var(--dur) var(--ease); }
.btn:hover { background: var(--color-accent-deep); }
.btn:focus-visible, .search__input:focus-visible, .ask__body:focus-visible { outline: var(--line-strong) solid var(--color-link); outline-offset: var(--line-strong); }
.btn--wide { width: 100%; }
.btn--sub { font-size: var(--fs-md); min-height: var(--control-md); }
.btn__note { display: block; margin-block-start: var(--space-1); font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-text-weak); text-align: start; }

/* ---------- PR・看板 ---------- */
.pr { background: var(--color-kraft); font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-text); padding-block: var(--space-1); }
.pr__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-half) var(--space-3); }
.pr__text { display: flex; align-items: center; gap: var(--space-1); }
.pr__tag { flex-shrink: 0; font-size: var(--fs-xs); padding: 0 var(--space-half); }
.header { position: sticky; top: 0; z-index: 30; background: var(--color-base); border-block-end: var(--line-frame) double var(--color-text); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--header-h); }
.sign { display: flex; flex-direction: column; text-decoration: none; }
.sign__name { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-heading); }
.sign__sub { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-text-weak); }
.header__nav { display: flex; gap: var(--space-3); }
.header__nav a { color: var(--color-link); font-size: var(--fs-sm); line-height: var(--lh-tight); font-weight: var(--fw-bold); white-space: nowrap; text-underline-offset: 0.2em; }
@media (max-width: 767px) { .sign__name { font-size: var(--fs-md); white-space: nowrap; } .sign__sub { display: none; } .header__nav { gap: var(--space-2); } .header__nav-sub { display: none; } }
.mock { background: var(--color-accent); font-size: var(--fs-xs); line-height: var(--lh-tight); padding: var(--space-1) var(--gutter); }

/* ---------- トップ: 店先（7:5） ---------- */
.front { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; padding-block: var(--space-6) var(--space-8); }
.front__main { display: grid; gap: var(--space-3); }
.front__title { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: var(--fs-h1); line-height: var(--lh-heading); }
.front__lead { font-size: var(--fs-lg); line-height: var(--lh-body); }
.front__stock { display: flex; gap: var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--color-text-weak); }
.front__stock b { font-family: var(--font-num); color: var(--color-text); }
.front__side { display: grid; gap: var(--space-3); }
@media (max-width: 1023px) { .front { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4) var(--space-6); } }

/* 黒板（フック②・店主の近況） */
.board { position: relative; background: var(--color-face); color: var(--color-on-face); border: var(--line-frame) solid var(--color-wood); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-1); }
.board::after { content: ""; position: absolute; bottom: calc(var(--line-frame) * -1); left: var(--space-6); width: var(--space-5); height: 6px; background: var(--color-on-face); }
.board__text { text-shadow: 0 0 1px var(--color-on-face); }
.board__date { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-on-face-weak); }
.board__text { font-family: var(--font-heading); font-size: var(--fs-xl); line-height: var(--lh-body); }
@media (max-width: 767px) { .board { padding: var(--space-2); } .board__text { font-size: var(--fs-lg); } }

.search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1); max-width: var(--search-w); }
.search__input { min-height: var(--control-lg); padding-inline: var(--space-2); background: var(--color-card); border: var(--line-strong) solid var(--color-text); font-size: var(--fs-md); line-height: var(--lh-tight); }
@media (max-width: 767px) { .search { grid-template-columns: minmax(0, 1fr); } }

/* 名札（フック⑤） */
.nametag { transform: rotate(1deg); background: var(--color-card); border: var(--line-strong) solid var(--color-text); padding: var(--space-2) var(--space-3); display: grid; gap: var(--space-half); }
.nametag__role { font-size: var(--fs-xs); line-height: var(--lh-tight); font-weight: var(--fw-bold); border-block-end: var(--line) solid var(--color-line); padding-block-end: var(--space-half); }
.nametag__name { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-heading); }
.nametag__licenses { display: flex; flex-wrap: wrap; gap: var(--space-half) var(--space-1); }
.nametag__licenses li { font-size: var(--fs-xs); line-height: var(--lh-tight); padding: 0 var(--space-half); border: var(--line) solid var(--color-line); background: var(--color-base); }

/* ---------- 写真・写真待ち ---------- */
.photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-kraft); border: var(--line) solid var(--color-line); }
.photo--retired { filter: grayscale(1); opacity: 0.7; }
.photo-todo { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: var(--color-kraft) var(--grid-bg); border: var(--line) dashed var(--color-line); color: var(--color-text-weak); font-size: var(--fs-sm); line-height: var(--lh-tight); padding: var(--space-3); }

/* ---------- 引き出し棚（売り場のご案内＝カテゴリ） ---------- */
.drawers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); background: var(--color-wood); padding: var(--space-2); }
.drawer { display: grid; gap: var(--space-1); justify-items: center; text-align: center; padding: var(--space-3) var(--space-2) var(--space-2); background: var(--color-kraft-deep); border: var(--line-strong) solid var(--color-text); text-decoration: none; }
.drawer:hover { background: var(--color-kraft); }
.drawer__label { font-size: var(--fs-sm); padding-inline: var(--space-half); }
.drawer__count { font-size: var(--fs-sm); line-height: var(--lh-tight); }
.drawer__count b { font-family: var(--font-num); font-size: var(--fs-lg); }
.drawer__knob { width: var(--knob); height: var(--knob); border-radius: var(--radius-round); background: var(--color-text); }
@media (max-width: 767px) { .drawers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); } }

/* ---------- 店主イチオシ ---------- */
.rank { display: grid; margin-block-start: var(--space-3); }
.rank__item { display: grid; grid-template-columns: var(--rank-w) calc(var(--thumb) * 2) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding-block: var(--space-2); border-block-end: var(--line) dashed var(--color-line); }
.rank__photo { display: block; }
.rank__num { font-family: var(--font-heading); font-size: var(--fs-display); line-height: 1; text-align: center; }
.rank__text { display: grid; gap: var(--space-half); }
.rank__name { font-size: var(--fs-xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; }
.rank__catch { font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--color-text-weak); }
.rank__go { display: grid; gap: var(--space-half); justify-items: end; font-size: var(--fs-sm); line-height: var(--lh-tight); white-space: nowrap; }
.rank__amazon { font-weight: var(--fw-bold); }
@media (max-width: 767px) { .rank__item { grid-template-columns: var(--rank-w) var(--thumb) minmax(0, 1fr); gap: var(--space-2); } .rank__go { grid-column: 3; justify-items: start; } .rank__num { font-size: var(--fs-h1); } .rank__name { font-size: var(--fs-md); } }

/* ---------- 絞り込み ---------- */
.filters { display: grid; gap: var(--space-1); margin-block-end: var(--space-4); padding: var(--space-2); background: var(--color-base); border: var(--line) solid var(--color-line); }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.filters__label { font-size: var(--fs-xs); line-height: var(--lh-tight); font-weight: var(--fw-bold); min-width: 5em; }
.chip { min-height: var(--control-sm); padding: var(--space-half) var(--space-2); background: var(--color-card); border: var(--line) solid var(--color-text); font-size: var(--fs-sm); line-height: var(--lh-tight); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.chip.is-on { background: var(--color-text); color: var(--color-on-face); }
.select { min-height: var(--control-sm); padding: var(--space-half) var(--space-1); background: var(--color-card); color: var(--color-text); border: var(--line) solid var(--color-text); font-size: var(--fs-sm); line-height: var(--lh-tight); }
.select option { line-height: var(--lh-tight); color: var(--color-text); }

/* ---------- 商品の並び（3列まで） ---------- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-2); } }
.item-card[hidden] { display: none; }
.item-card__link { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-half); text-decoration: none; }
.item-card__cat { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-text-weak); margin-block-start: var(--space-1); }
.item-card__name { font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; }
.item-card__catch { font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--color-text-weak); }
.item-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-half) var(--space-1); font-size: var(--fs-sm); line-height: var(--lh-tight); padding-block-start: var(--space-1); border-block-start: var(--line) dashed var(--color-line); margin-block-start: var(--space-half); }
.item-card__meta b { font-family: var(--font-num); }
@media (max-width: 767px) { .item-card__name { font-size: var(--fs-md); } .item-card__meta { flex-direction: column; } }
.empty { padding-block: var(--space-6); color: var(--color-text-weak); line-height: var(--lh-body); }

/* 救われた度ゲージ */
.gauge { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; line-height: 1; }
.gauge__cell { display: block; width: var(--space-2); height: var(--space-1); background: var(--color-kraft-deep); }
.gauge__cell.is-on { background: var(--color-text); }
.gauge__num { font-family: var(--font-num); font-size: var(--fs-sm); margin-inline-start: var(--space-half); line-height: 1; }

/* ---------- 場面で探す ---------- */
.scenes__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
.scenes__link { display: flex; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-1); border-block-end: var(--line) dashed var(--color-line); text-decoration: none; line-height: var(--lh-tight); }
.scenes__name { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; font-weight: var(--fw-bold); }
.scenes__count { font-family: var(--font-num); font-size: var(--fs-sm); color: var(--color-text-weak); }
@media (max-width: 1023px) { .scenes__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 店主の返品箱（段ボール箱・フック④） ---------- */
.box { background: var(--color-kraft-deep); border: var(--line-strong) solid var(--color-text); }
.box__lid { background: var(--color-wood); color: var(--color-on-face); font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: var(--lh-tight); letter-spacing: var(--ls-tape); text-align: center; padding: var(--space-1); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); }
.box__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3); }
.box__item { display: grid; gap: var(--space-half); padding: var(--space-2); background: var(--color-kraft); border: var(--line) dashed var(--color-text-weak); text-decoration: none; height: 100%; }
.box__name { font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; }
.box__why { font-size: var(--fs-sm); line-height: var(--lh-tight); }
@media (max-width: 767px) { .box__list { grid-template-columns: minmax(0, 1fr); padding: var(--space-2); } }

/* ---------- 店主直通リクエスト箱・来店スタンプ（フック⑥） ---------- */
.ask { display: grid; gap: var(--space-2); justify-items: start; }
.ask__body { width: 100%; padding: var(--space-2); background: var(--color-card); border: var(--line-strong) solid var(--color-text); font-size: var(--fs-md); line-height: var(--lh-body); resize: vertical; }
.ask__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ask__result { padding: var(--space-1) var(--space-2); margin-block-end: var(--space-2); border: var(--line-strong) solid var(--color-text); font-weight: var(--fw-bold); line-height: var(--lh-tight); background: var(--color-card); }
.ask__result--ok { background: var(--color-accent); }
.stampcard { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); margin-block-end: var(--space-6); background: var(--color-card); border: var(--line-strong) dashed var(--color-text); }
.stampcard__title { font-family: var(--font-heading); font-size: var(--fs-md); line-height: var(--lh-tight); }
.stampcard__cells { display: flex; gap: var(--space-half); }
.stampcard__cells li { width: var(--stamp); height: var(--stamp); border-radius: var(--radius-round); border: var(--line) dashed var(--color-line); display: grid; place-items: center; }
.stampcard__no { font-family: var(--font-num); font-size: var(--fs-xs); color: var(--color-text-weak); line-height: 1; }
.stampcard__cells li.is-stamped { border: var(--line-strong) solid var(--color-face); background: var(--color-face); }
.stampcard__cells li.is-stamped .stampcard__no { color: var(--color-on-face); font-family: var(--font-heading); }
.stampcard__status { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
@media (max-width: 767px) { .stampcard { --stamp: 28px; padding: var(--space-2); } .stampcard__cells { gap: 2px; } }

/* ---------- さっき見た物 ---------- */
.recent { display: flex; gap: var(--space-2); overflow-x: auto; margin-block-start: var(--space-3); padding-block-end: var(--space-1); }
.recent li { flex: 0 0 calc(var(--thumb) * 2); }
.recent a { display: grid; gap: var(--space-1); font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--color-link); }
.recent .photo-todo { padding: var(--space-1); font-size: var(--fs-xs); }

/* ---------- 当店のきまり（店先の貼り紙） ---------- */
.notice { transform: rotate(-0.8deg); position: relative; max-width: var(--notice-w); margin-inline: auto; background: var(--color-card); border: var(--line) solid var(--color-line); padding: var(--space-5) var(--space-5) var(--space-4); display: grid; gap: var(--space-2); }
.notice::before, .notice::after { content: ""; position: absolute; top: var(--space-2); width: var(--pin); height: var(--pin); border-radius: var(--radius-round); background: var(--color-accent); border: var(--line-strong) solid var(--color-text); }
.notice::before { left: var(--space-2); }
.notice::after { right: var(--space-2); }
.notice__title { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: var(--fs-h2); line-height: var(--lh-heading); text-align: center; }
.notice__list { list-style: decimal; padding-inline-start: 1.5em; display: grid; gap: var(--space-1); font-size: var(--fs-lg); line-height: var(--lh-body); }
.notice__sign { text-align: end; font-family: var(--font-heading); line-height: var(--lh-tight); }
@media (max-width: 767px) { .notice { padding: var(--space-5) var(--space-3) var(--space-3); } .notice__list { font-size: var(--fs-md); } }

/* ---------- 商品ページ ---------- */
.crumb { display: flex; flex-wrap: wrap; gap: var(--space-1); padding-block: var(--space-2); font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-text-weak); }
.crumb a { color: var(--color-link); }
.draft { background: var(--color-text); color: var(--color-on-face); padding: var(--space-1) var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.pd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; padding-block: var(--space-1) var(--space-8); }
.pd__gallery { display: grid; gap: var(--space-1); }
.pd__caption { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-text-weak); }
.pd__thumbs { display: flex; gap: var(--space-1); overflow-x: auto; }
.pd__thumb { flex: 0 0 var(--thumb); padding: 0; background: none; border: var(--line-strong) solid transparent; cursor: pointer; }
.pd__thumb.is-on { border-color: var(--color-text); }
.pd__thumb img { aspect-ratio: 4 / 3; object-fit: cover; }
.pd__info { display: grid; gap: var(--space-3); position: sticky; top: calc(var(--header-h) + var(--space-3)); }
.pd__status { display: flex; flex-wrap: wrap; gap: var(--space-1); line-height: var(--lh-tight); }
.pd__name { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: var(--fs-h1); line-height: var(--lh-heading); margin-block-start: var(--space-2); }
.pd__catch { font-size: var(--fs-lg); line-height: var(--lh-body); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: var(--line-strong) solid var(--color-text); background: var(--color-card); }
.facts__item { padding: var(--space-2); display: grid; gap: var(--space-1); }
.facts__item + .facts__item { border-inline-start: var(--line) solid var(--color-line); }
.facts__label { font-size: var(--fs-xs); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.facts dd { margin: 0; }
.facts__value { font-family: var(--font-num); font-size: var(--fs-h2); line-height: 1.2; }
.facts__value .gauge__cell { width: var(--space-3); height: var(--space-2); }
.facts__value .gauge__num { font-size: var(--fs-lg); }
.honest { font-size: var(--fs-sm); line-height: var(--lh-body); padding: var(--space-2); background: var(--color-kraft); border-inline-start: var(--line-frame) solid var(--color-text); }
.honest b { display: block; font-size: var(--fs-xs); line-height: var(--lh-tight); }
.honest .link { white-space: nowrap; }
.instead { display: grid; gap: var(--space-half); padding: var(--space-2); background: var(--color-face); color: var(--color-on-face); text-decoration: none; border: var(--line-frame) solid var(--color-wood); }
.instead__label { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-on-face-weak); }
.instead__name { font-weight: var(--fw-bold); line-height: var(--lh-tight); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 1023px) { .pd { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-block-end: var(--space-6); } .pd__info { position: static; } }
@media (max-width: 767px) { .pd__main .photo, .pd__main .photo-todo { aspect-ratio: 2 / 1; } .pd__caption { display: none; } .pd__thumbs { --thumb: 56px; } .pd__name { font-size: var(--fs-h2); margin-block-start: var(--space-1); } .pd__catch { font-size: var(--fs-md); line-height: var(--lh-tight); } .pd__info { gap: var(--space-2); } .facts__item { padding: var(--space-1) var(--space-2); } .facts__value { font-size: var(--fs-h3); } .bar__name { display: none; } .bar { grid-template-columns: minmax(0, 1fr); } .bar .btn { width: 100%; min-height: var(--control-lg); } }

.review { display: grid; gap: var(--space-6); padding-block-end: var(--space-section); }
.review__sec { display: grid; gap: var(--space-2); }
.prose { max-width: var(--measure); display: grid; gap: 1em; }
.prose a { color: var(--color-link); text-decoration: underline; }
.review__sec--cons .prose { background: var(--color-kraft); padding: var(--space-2) var(--space-3); max-width: none; }
.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-tight); background: var(--color-card); border: var(--line-strong) solid var(--color-text); }
.spec th, .spec td { text-align: start; padding: var(--space-1) var(--space-2); border: var(--line) solid var(--color-line); vertical-align: top; }
.spec th { width: 9em; background: var(--color-kraft); font-weight: var(--fw-bold); }
.mid-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--color-card); border: var(--line-strong) dashed var(--color-text); }
.mid-cta__text { font-weight: var(--fw-bold); line-height: var(--lh-tight); }
@media (max-width: 767px) { .mid-cta { grid-template-columns: minmax(0, 1fr); } }
.updated { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-text-weak); }

/* スマホ: 画面下に固定の CTA */
.bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: none; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; min-height: var(--bar-h); padding: var(--space-1) var(--gutter); background: var(--color-base); border-block-start: var(--line-strong) solid var(--color-text); transform: translateY(100%); transition: transform var(--dur) var(--ease); }
.bar.is-on { transform: none; }
.bar__name { font-size: var(--fs-sm); line-height: var(--lh-tight); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .btn { min-height: var(--control-md); padding-inline: var(--space-3); font-size: var(--fs-md); }
@media (max-width: 1023px) { .bar { display: grid; } .has-bar .footer { padding-block-end: calc(var(--bar-h) + var(--space-4)); } }

/* ---------- カテゴリ・固定ページ ---------- */
.page-head { display: grid; gap: var(--space-2); padding-block: var(--space-4) var(--space-5); }
.page-head__count { font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--color-text-weak); }
.weak { color: var(--color-text-weak); }
.others { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; margin-block-start: var(--space-3); }
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; padding-block: var(--space-2) var(--space-section); }
@media (max-width: 1023px) { .about { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }
.policy { display: grid; gap: var(--space-2); padding-block-end: var(--space-section); }
.policy h2 { font-size: var(--fs-lg); line-height: var(--lh-tight); margin-block-start: var(--space-3); border-block-end: var(--line) solid var(--color-line); }
.policy a { color: var(--color-link); }
.err { display: grid; gap: var(--space-3); justify-items: start; padding-block: var(--space-10); }
.num { font-family: var(--font-num); font-weight: var(--fw-bold); line-height: 1; }

/* ---------- フッター・アクセスカウンター ---------- */
.footer { background: var(--color-face); color: var(--color-on-face); padding-block: var(--space-8) var(--space-4); border-block-start: var(--line-frame) solid var(--color-wood); }
.footer__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); }
.footer__name { font-family: var(--font-heading); font-size: var(--fs-lg); line-height: var(--lh-tight); }
.footer__text { max-width: var(--measure); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-on-face-weak); margin-block-start: var(--space-1); }
.footer__links { display: grid; gap: var(--space-1); align-content: start; font-size: var(--fs-sm); line-height: var(--lh-tight); }
.counter { font-size: var(--fs-xs); line-height: var(--lh-tight); display: flex; align-items: center; gap: var(--space-half); white-space: nowrap; }
.counter__num { display: inline-flex; gap: 1px; }
.counter__num span { font-family: var(--font-num); font-weight: var(--fw-bold); font-size: var(--fs-xs); line-height: 1.5; background: var(--color-text); color: var(--color-accent); padding-inline: 2px; }
.footer__legal { margin-block-start: var(--space-6); padding-block-start: var(--space-3); border-block-start: var(--line) dashed var(--color-on-face-weak); font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-on-face-weak); display: grid; gap: var(--space-half); }
@media (max-width: 767px) { .footer__inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 一覧のメリハリ（イチオシは2列ぶち抜き・途中に店主メモ） ---------- */
.grid { grid-auto-flow: dense; }
@media (min-width: 1024px) { .item-card.is-best:first-child { grid-column: span 2; } .item-card.is-best:first-child .item-card__name { font-size: var(--fs-xl); } .item-card.is-best:first-child .photo, .item-card.is-best:first-child .photo-todo { aspect-ratio: 789 / 283; } }
.item-card.is-retired .photo { filter: grayscale(1); opacity: 0.7; }
.shelf-note { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); background: var(--color-face); color: var(--color-on-face); border: var(--line-frame) solid var(--color-wood); padding: var(--space-2) var(--space-3); font-family: var(--font-heading); font-size: var(--fs-lg); line-height: var(--lh-tight); }
.shelf-note__label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-on-face-weak); }

@media (max-width: 767px) {
  .item-card .photo, .item-card .photo-todo { aspect-ratio: 1 / 1; }
  .item-card .tape--on-photo { font-size: var(--fs-xs); line-height: 1.4; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: var(--space-1); max-width: calc(100% - var(--space-2)); }
  .item-card .sticker { width: var(--sticker-sm); height: var(--sticker-sm); font-size: var(--fs-xs); padding: 0; align-self: end; justify-self: end; margin: var(--space-1) var(--space-1) var(--space-6); }
  .item-card .tape--corner { font-size: var(--fs-xs); padding: 0 var(--space-half); }
  .filters { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-1); padding: var(--space-1); }
  .filters__row { display: contents; }
  .filters__label { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 0; padding-inline-start: var(--space-1); }
  .chip, .select { flex-shrink: 0; white-space: nowrap; min-height: 44px; }
}
.shelf-note[hidden] { display: none; }

/* ---------- 店主のイラスト（本人の手描き） ---------- */
.tencho { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.tencho > * { grid-area: 1 / 1; }
.tencho__img { width: 100%; height: auto; }
.tencho__say { position: relative; z-index: 1; align-self: start; justify-self: end; transform: rotate(2deg); white-space: normal; max-width: 60%; }
.nametag { grid-template-columns: var(--thumb) minmax(0, 1fr); column-gap: var(--space-2); }
.nametag__face { grid-row: 1 / 4; width: var(--thumb); height: auto; align-self: center; }
.err__face { width: calc(var(--thumb) * 2); height: auto; }
.nametag__role, .nametag__name, .nametag__licenses { grid-column: 2; }

/* ====== 値札＋手書きPOP（テプラから変更 2026-09-27） ====== */
/* 見出しの短冊POP：画用紙にマジック、画鋲1個 */
.band--pop { position: relative; display: inline-block; font-family: var(--font-heading); background: var(--color-card); color: var(--color-text); border: var(--line-strong) solid var(--color-text); padding: var(--space-1) var(--space-4) var(--space-1) var(--space-5); transform: rotate(-1deg); }
.band--pop::before { content: ""; position: absolute; left: var(--space-2); top: 50%; width: var(--pin); height: var(--pin); transform: translateY(-50%); border-radius: var(--radius-round); background: var(--color-accent); border: var(--line-strong) solid var(--color-text); }
.band--pop-dark { background: var(--color-text); color: var(--color-on-face); }

/* 手書きPOP（写真に貼る一言・店主の吹き出し） */
.pop { display: inline-block; font-family: var(--font-heading); font-size: var(--fs-md); line-height: var(--lh-heading); background: var(--color-card); color: var(--color-text); border: var(--line-strong) solid var(--color-text); padding: var(--space-half) var(--space-2); }
.pop--on-photo { position: relative; z-index: 1; align-self: end; justify-self: start; margin: var(--space-2); max-width: calc(100% - var(--space-4)); transform: rotate(-1.5deg); }
.item-card:nth-child(3n+2) .pop--on-photo { transform: rotate(1deg); }
.item-card:nth-child(3n) .pop--on-photo { transform: rotate(-0.5deg); }
.pop--lg { font-size: var(--fs-xl); padding: var(--space-1) var(--space-3); }
.tencho__say { position: relative; z-index: 1; align-self: start; justify-self: end; transform: rotate(2deg); max-width: 60%; }

/* 吊り下げ値札：値段の欄に「使用歴」 */
.pricetag { position: relative; z-index: 1; align-self: start; justify-self: start; margin: var(--space-2) 0 0 var(--space-3); display: grid; justify-items: center; min-width: calc(var(--thumb) + var(--space-3)); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); background: var(--color-card); color: var(--color-text); border: var(--line-strong) solid var(--color-text); clip-path: polygon(var(--space-2) 0, 100% 0, 100% 100%, var(--space-2) 100%, 0 50%); transform: rotate(-4deg); }
.pricetag::before { content: ""; position: absolute; left: var(--space-1); top: 50%; width: var(--space-1); height: var(--space-1); transform: translateY(-50%); border-radius: var(--radius-round); background: var(--color-text); }
.pricetag__label { font-size: var(--fs-xs); line-height: 1.2; font-weight: var(--fw-bold); }
.pricetag__value { font-family: var(--font-num); font-weight: var(--fw-bold); font-size: var(--fs-lg); line-height: 1.2; white-space: nowrap; }
.pricetag__note { font-size: var(--fs-xs); line-height: 1.2; border-block-start: var(--line) dashed var(--color-text); padding-block-start: 2px; margin-block-start: 2px; white-space: nowrap; }
.pricetag--out { background: var(--color-kraft-deep); }
.pricetag--out .pricetag__value { text-decoration: line-through; text-decoration-thickness: var(--line-strong); }
.item-card:nth-child(2n) .pricetag { transform: rotate(3deg); }
@media (max-width: 767px) {
  .pricetag { margin: var(--space-1) 0 0 var(--space-2); padding: var(--space-half) var(--space-1) var(--space-half) var(--space-3); min-width: 0; }
  .pricetag__value { font-size: var(--fs-sm); }
  .item-card .pop--on-photo { font-size: var(--fs-xs); margin: var(--space-1); padding: 2px var(--space-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: calc(100% - var(--space-2)); }
}
.pricetag__repeat { display: none; }
@media (max-width: 767px) { .item-card .sticker { display: none; } .pricetag__repeat { display: inline; } .rank__photo .photo-todo { padding: var(--space-half); font-size: var(--fs-xs); aspect-ratio: 4 / 3; } }
.pricetag--lg { margin: var(--space-3) 0 0 var(--space-4); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5); }
.pricetag--lg .pricetag__value { font-size: var(--fs-h3); }
@media (max-width: 767px) { .pricetag--lg { margin: var(--space-1) 0 0 var(--space-2); padding: var(--space-half) var(--space-2) var(--space-half) var(--space-4); } .pricetag--lg .pricetag__value { font-size: var(--fs-md); } }

/* 見出し書体は Mochiy Pop One（Google Fonts）。2026-10-02 表示速度のため Adobe Fonts の手書き体（約7MB）から変更 */
.band, .page-title, .sticker, .sign__name, .front__title, .board__text, .nametag__name, .rank__num, .stampcard__title, .stampcard__cells li.is-stamped .stampcard__no, .notice__title, .notice__sign, .pd__name, .footer__name, .shelf-note, .band--pop, .pop { font-weight: var(--fw-regular); } /* Mochiy Pop One は1太さのみ。太字指定すると疑似ボールドで潰れる */

/* 見出し書体は大きい見出しだけに使う（2026-09-28 本人）。小さい所・黒板は太くて読めないので本文のゴシック太字にする */
.board__text, .shelf-note, .sticker, .sign__name, .nametag__name, .stampcard__title, .stampcard__cells li.is-stamped .stampcard__no, .notice__sign, .footer__name, .pop { font-family: var(--font-body); font-weight: var(--fw-bold); text-shadow: none; }

/* 特集（使い比べ）2026-09-30 */
.feat-head { display: grid; gap: var(--space-2); }
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { min-width: 640px; }
.cmp thead th { background: var(--color-face); color: var(--color-on-face); font-weight: var(--fw-bold); white-space: nowrap; }
.cmp tbody th { width: 12em; background: var(--color-card); }
.cmp .stars { white-space: nowrap; }
.cmp__out { display: block; font-size: var(--fs-xs); color: var(--color-text-weak); font-weight: var(--fw-regular); }
.feat__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.feat__row .figure { display: block; }
.feat__body { display: grid; gap: var(--space-2); }
.feat__meta { font-size: var(--fs-sm); color: var(--color-text-weak); }
.feat__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.feat-links { display: grid; gap: var(--space-1); list-style: none; padding: 0; }
@media (max-width: 767px) { .feat__row { grid-template-columns: minmax(0, 1fr); } }

.cmp-hint { display: none; margin: 0 0 var(--space-half); font-size: var(--fs-xs); color: var(--color-text-weak); }
@media (max-width: 767px) { .cmp-hint { display: block; } .cmp tbody th { width: 9em; } }


/* ===== 本文ブロック（microCMS 繰り返しフィールド blocks）WF v5 09b 準拠 ===== */
.blocks { display: grid; gap: var(--space-4); max-width: none; }
.bk { margin: 0; min-width: 0; }
/* 文章（リッチエディタの HTML をそのまま） */
.bk--text { display: grid; gap: 1em; font-size: var(--fs-md); line-height: var(--lh-body); }
.bk--text > * { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bk--text h2 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-heading); padding-inline-start: var(--space-2); border-inline-start: 5px solid var(--color-text); margin-block-start: var(--space-3); }
.bk--text h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-heading); margin-block-start: var(--space-2); }
.bk--text h4, .bk--text h5 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.bk--text p:empty { display: none; }
.bk--text a { color: var(--color-link); text-decoration: underline; text-underline-offset: 4px; font-weight: var(--fw-bold); }
.bk--text ul, .bk--text ol { padding-inline-start: 1.4em; display: grid; gap: var(--space-1); }
.bk--text ul { list-style: disc; }
.bk--text ol { list-style: decimal; }
.bk--text li::marker { color: var(--color-text); font-weight: var(--fw-bold); }
.bk--text blockquote { margin: 0; padding: var(--space-2) var(--space-3); background: var(--color-kraft); border-inline-start: 4px solid var(--color-line); }
.bk--text blockquote p { margin: 0; }
.bk--text hr { border: 0; border-block-start: var(--line) solid var(--color-line); margin: var(--space-2) 0; }
.bk--text table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-tight); background: var(--color-card); border: var(--line-strong) solid var(--color-text); }
.bk--text th, .bk--text td { text-align: start; vertical-align: top; padding: var(--space-1) var(--space-2); border: var(--line) solid var(--color-line); }
.bk--text th { background: var(--color-face); color: var(--color-on-face); font-weight: var(--fw-bold); }
.bk--text th p, .bk--text td p { margin: 0; }
.bk--text figure { margin: 0; display: grid; gap: var(--space-1); }
.bk--text figure img, .bk--text > img { display: block; width: 100%; height: auto; border: var(--line) solid var(--color-line); background: var(--color-kraft); }
.bk--text figcaption { font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--color-text-weak); }
.bk--text iframe { max-width: 100%; }
.bk--text .instagram-media { margin-inline: 0 !important; max-width: 540px !important; }
/* 写真2枚・3枚 */
.bk--images { display: grid; gap: var(--space-1); }
.bk__grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk--images-3 .bk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.bk__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: var(--line) solid var(--color-line); background: var(--color-kraft); }
.bk__cap { font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--color-text-weak); }
/* 補足・注意 */
.bk--note { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--color-card); border: var(--line) solid var(--color-text); }
.bk--note .bk__title { font-size: var(--fs-md); line-height: var(--lh-tight); }
.bk--note .bk__body { display: grid; gap: 0.6em; font-size: var(--fs-sm); line-height: var(--lh-body); }
/* 強調（黒地に白） */
.bk--emphasis { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--color-face); color: var(--color-on-face); border: var(--line-frame) solid var(--color-wood); }
.bk--emphasis .bk__title { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: var(--fs-xl); line-height: var(--lh-heading); }
.bk--emphasis .bk__body { display: grid; gap: 0.6em; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-on-face-weak); }
/* ボタン（黒／白） */
.bk--button { margin: 0; }
.bk__btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-md); padding: var(--space-1) var(--space-4); background: var(--color-text); color: var(--color-base); font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: var(--lh-tight); text-decoration: none; border: var(--line-strong) solid var(--color-text); box-shadow: var(--shadow-press); }
.bk__btn--white { background: var(--color-card); color: var(--color-text); }
/* ページ案内 */
.bk--page { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "note arrow" "name arrow"; align-items: center; column-gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-card); border: var(--line) solid var(--color-line); text-decoration: none; color: inherit; }
.bk__page-note { grid-area: note; font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-text-weak); }
.bk__page-name { grid-area: name; font-size: var(--fs-lg); line-height: var(--lh-tight); }
.bk__page-arrow { grid-area: arrow; font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
@media (max-width: 767px) {
  .blocks { gap: var(--space-3); }
  .bk--emphasis { padding: var(--space-3); }
  .bk--emphasis .bk__title { font-size: var(--fs-lg); }
  .bk__grid { gap: var(--space-1); }
  .bk__btn { width: 100%; }
  .bk--text table { font-size: var(--fs-xs); }
  .bk--text th, .bk--text td { padding: var(--space-half) var(--space-1); }
}