/* SOUBI FOOD ブランドサイト（本番）の、どのページにも使う部品。
   値はガイドラインの tokens.css の変数だけを使う（DESIGN.md §3）。tokens.css は HTML の <link> で先に読む。
   部品の決まりは 02_visual ⑫、作り方は DESIGN.md §4〜§7。土台は試作の base.css（2026-09-27〜28）。
   切り替えの幅 1023px / 1024px は --layout-breakpoint-lg（@media の中では変数が使えないので数字で書く） */

:root {
  --ico-fill: var(--color-bg-base); /* 線のアイコンの中の塗り */
  --bar-h: 64px;                    /* スマホの下の帯の高さ（02_visual ⑫ 64px以上） */
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--color-bg-base); color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-weight: var(--font-weight-regular); font-size: var(--font-size-body);
  line-height: var(--line-height-body); letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-primary); background: var(--color-bg-base);
  line-break: strict; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-weight-bold); word-break: auto-phrase; text-wrap: balance; }
p { text-wrap: pretty; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spbr { display: none; }
@media (max-width: 1023px) { .spbr { display: inline; } .pcbr { display: none; } }

/* フォーカス：墨の線の枠、外側に3pxあける（02_visual ③）。どの部品でも消さない */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: var(--border-width-line) solid var(--color-focus-ring); outline-offset: var(--layout-focus-offset);
}

/* 本文へ移るリンク（キーボードで最初に止まる。ふだんは見えない） */
.skip {
  position: absolute; z-index: 50; left: var(--space-16); top: var(--space-16);
  display: inline-flex; align-items: center; min-height: var(--layout-target-main); padding: 0 var(--space-24);
  background: var(--color-bg-base); border: var(--border-width-line) solid var(--color-border-line);
  border-radius: var(--radius-button); font-weight: var(--font-weight-bold);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- ヘッダー：生成りの地、ロゴは左、PCのメニューは右、下の線はハザードの細線（02_visual ⑦） ---------- */
.hd {
  position: relative; z-index: 20; height: 88px; padding: 0 var(--space-40);
  display: flex; align-items: center; justify-content: space-between; background: var(--color-bg-base);
}
.hd::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--border-width-line);
  background: repeating-linear-gradient(45deg, var(--color-border-line) 0 10px, var(--color-bg-plane) 10px 20px);
}
.hd .logo { height: 30px; width: auto; }
.hd nav { display: flex; align-items: center; gap: var(--space-32); font-weight: var(--font-weight-bold); }
.hd nav a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--layout-target-main); text-underline-offset: 10px; text-decoration-thickness: var(--border-width-line); }
.hd nav [aria-current="page"] { text-decoration-line: underline; }
.hd .btn { min-height: 48px; padding: 0 var(--space-24); }
@media (hover: hover) { .hd nav a:not(.btn):hover { text-decoration-line: underline; } }
@media (max-width: 1023px) {
  .hd { height: 60px; padding: 0 var(--space-16); }
  .hd .logo { height: 24px; } /* シンボルの最小 24px（02_visual ②） */
  .hd nav { display: none; }
}

/* ---------- ボタン：両端が半円（D27）。高さ56px（PC）・52px（スマホ）、本文と同じ書体の700（02_visual ⑫） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 56px; padding: 0 var(--space-32); border-radius: var(--radius-button);
  border: var(--border-width-line) solid var(--color-border-line);
  font-size: var(--font-size-body); font-weight: var(--font-weight-bold); line-height: 1.2; white-space: nowrap;
  color: var(--color-text-primary);
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.btn.yellow { background: var(--color-accent-brand); }        /* 生成りの上の主ボタン */
.btn.sumi { background: var(--color-action-strong); color: var(--color-bg-base); } /* 黄の面の上の主ボタン */
.btn.sub { background: var(--color-bg-base); }                /* 副ボタン */
@media (hover: hover) {
  .btn.yellow:hover { background: var(--color-accent-brand-hover); }
  .btn.sumi:hover { background: var(--color-action-strong-hover); }
  .btn.sub:hover { background: var(--color-surface-card); }
}
@media (max-width: 1023px) { .btn { min-height: 52px; padding: 0 var(--space-24); } }
/* カードの中でボタンを並べる箱（トップとそなえの棚のラインナップ。2026-10-29 にそなえの棚の CSS から移した） */
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24); margin-top: var(--space-8); }
@media (max-width: 1023px) { .acts { gap: var(--space-16); } }

/* ---------- スマホの下の帯：メニューと「贈る・買う」を固定、上に墨の線（02_visual ⑫） ---------- */
.bar, .spmenu { display: none; }
@media (max-width: 1023px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  .bar {
    display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    min-height: calc(var(--bar-h) + env(safe-area-inset-bottom));
    padding: var(--space-8) var(--space-12) calc(var(--space-8) + env(safe-area-inset-bottom)) var(--space-8);
    align-items: center; justify-content: space-between;
    background: var(--color-bg-base); border-top: var(--border-width-line) solid var(--color-border-line);
  }
  .bar .btn { min-height: 48px; }
  .bar .menu {
    display: inline-flex; align-items: center; gap: var(--space-12); min-height: var(--layout-target-main);
    padding: 0 var(--space-12); font-size: var(--font-size-small); font-weight: var(--font-weight-bold);
  }
  /* 3本線。開いているあいだは×にする */
  .bar .menu i { position: relative; width: 20px; height: 12px; border-block: var(--border-width-line) solid var(--color-border-line); transition: border-color var(--duration-fast); }
  .bar .menu i::before, .bar .menu i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; margin-top: -1px; border-top: var(--border-width-line) solid var(--color-border-line); transition: transform var(--duration-fast) var(--easing-standard); }
  .bar .menu[aria-expanded="true"] i { border-color: transparent; }
  .bar .menu[aria-expanded="true"] i::before { transform: rotate(45deg); }
  .bar .menu[aria-expanded="true"] i::after { transform: rotate(-45deg); }

  /* 開いたメニュー：下の帯のすぐ上に出す */
  .spmenu {
    display: grid; position: fixed; z-index: 29; left: 0; right: 0;
    bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
    padding: var(--space-16) var(--layout-gutter-sp) var(--space-24);
    background: var(--color-bg-base); border-top: var(--border-width-line) solid var(--color-border-line);
  }
  .spmenu[hidden] { display: none; }
  .spmenu a {
    display: flex; align-items: center; min-height: 52px;
    font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-heading);
    text-underline-offset: 8px; text-decoration-thickness: var(--border-width-line);
  }
  .spmenu [aria-current="page"] { text-decoration-line: underline; }
}

/* ---------- 章と、中身の幅（02_visual ⑥） ---------- */
.sec { position: relative; padding-block: var(--space-96); }
.wrap { position: relative; max-width: calc(var(--layout-content-max) + var(--layout-gutter-pc) * 2); margin-inline: auto; padding-inline: var(--layout-gutter-pc); }
.yel { background: var(--color-bg-plane); } /* 画面の幅いっぱいの黄の章。生成りの章と交互に置く */
@media (max-width: 1023px) {
  .sec { padding-block: var(--space-64); }
  .wrap { padding-inline: var(--layout-gutter-sp); }
}

/* ---------- 文字（02_visual ⑤）。黄の面の上では、補足の文字も墨にし、本文は500 ---------- */
.kicker { display: block; margin-bottom: var(--space-12); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-label); color: var(--color-text-secondary); }
.h1 { font-size: var(--font-size-h1); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); }
.h2 { font-size: var(--font-size-h2); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); }
.h3 { font-size: var(--font-size-h3); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); }
.body { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.small { font-size: var(--font-size-small); line-height: var(--line-height-small); }
.soft { color: var(--color-text-secondary); }
.latin { font-family: var(--font-latin); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-latin); line-height: var(--line-height-latin); }
.yel .kicker, .yel .soft { color: var(--color-text-primary); }
.yel .body { font-weight: var(--font-weight-medium); }

/* リンク：濃いティールの文字に下線。黄の面の上では墨の文字に下線。ホバーで下線を太く */
.link {
  color: var(--color-text-link); font-weight: var(--font-weight-bold);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.yel .link { color: var(--color-text-primary); }
@media (hover: hover) { .link:hover { text-decoration-thickness: var(--border-width-line); } }

/* 表示だけの札 */
.tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-12);
  border: var(--border-width-line) solid var(--color-border-line); border-radius: var(--radius-pill);
  background: var(--color-bg-base); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); line-height: 1; white-space: nowrap;
}

/* ---------- カード：白か生成りの面に墨の線、角丸32。黄の面の上のカードは生成りの面（02_visual ⑫） ---------- */
.card { border: var(--border-width-line) solid var(--color-border-line); border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface-card); }
.yel .card { background: var(--color-bg-base); }
/* カードの中は生成りの面なので、文字とリンクは生成りの上の決まりに戻す */
.yel .card .body { font-weight: var(--font-weight-regular); }
.yel .card .link { color: var(--color-text-link); }

/* ---------- 丘の曲線（D28）。墨の線は引かず、面の塗りだけ。高さは PC 140px・スマホ 64px まで（02_visual ⑥） ---------- */
.hill { display: block; width: 100%; height: 140px; }
.hill path { fill: var(--color-bg-plane); }
.hill.on-yel { background: var(--color-bg-plane); }
.hill.on-yel path { fill: var(--color-bg-base); }
@media (max-width: 1023px) { .hill { height: 64px; } }

/* ---------- 人物の絵（手持ちの絵の切り抜き。1画面に1人。人物の上に文字を載せない） ---------- */
.who img { height: 100%; width: auto; }

/* ---------- 線のアイコン（自作の SVG）。拡大しても線の太さは墨の線にそろえる ---------- */
.ico { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; color: var(--color-text-primary); }
.ico svg { width: 100%; height: 100%; overflow: visible; }
.ico svg * { vector-effect: non-scaling-stroke; stroke-width: var(--border-width-line) !important; }

/* ---------- チェックの丸：押すと墨で塗る。状態は aria-pressed で持つ ---------- */
.chk {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: var(--border-width-line) solid var(--color-border-line); border-radius: var(--radius-circle);
  background: var(--color-bg-base);
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.chk svg { width: 22px; height: 22px; opacity: 0; }
.chk svg path { stroke: var(--color-bg-base); }
.chk[aria-pressed="true"] { background: var(--color-border-line); }
.chk[aria-pressed="true"] svg { opacity: 1; }
@media (hover: hover) { .chk[aria-pressed="false"]:hover { background: var(--color-surface-card); } }

/* ---------- 開くと読める注記（<details>） ---------- */
details.memo summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: var(--layout-target-main); font-size: var(--font-size-small); font-weight: var(--font-weight-bold);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
details.memo summary::-webkit-details-marker { display: none; }
details.memo summary::after {
  content: ""; width: 8px; height: 8px; margin-top: -4px;
  border-right: var(--border-width-line) solid currentColor; border-bottom: var(--border-width-line) solid currentColor;
  transform: rotate(45deg);
}
details.memo[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
@media (hover: hover) { details.memo summary:hover { text-decoration-thickness: var(--border-width-line); } }

/* ---------- 種類で絞る札（02_visual ⑫。2026-09-28 Ayane が決めたティールの線の札） ----------
   押す前はティールの線に墨の文字。押した札は濃いティールの地に生成りの文字で700。見た目の高さ36px、
   押せる範囲は ::before で上下に広げて44px以上。札の組の前に説明の言葉を置かない */
.fchips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.fchips button {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-8);
  height: 36px; padding: 0 var(--space-16);
  border: var(--border-width-line) solid var(--color-accent-info); border-radius: var(--radius-pill);
  font-size: var(--font-size-small); font-weight: var(--font-weight-medium); white-space: nowrap;
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.fchips button::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.fchips button span { font-family: var(--font-latin); font-weight: var(--font-weight-medium); font-size: var(--font-size-body); letter-spacing: var(--letter-spacing-latin); color: var(--color-text-secondary); }
.fchips button[aria-pressed="true"] { background: var(--color-text-link); border-color: var(--color-text-link); color: var(--color-bg-base); font-weight: var(--font-weight-bold); }
.fchips button[aria-pressed="true"] span { color: var(--color-bg-base); }
@media (hover: hover) { .fchips button[aria-pressed="false"]:hover { background: var(--color-surface-card); } }

/* ---------- フッター：黄の地。丘の上を「買い足す」人が歩く ---------- */
.ftwrap { position: relative; margin-top: var(--space-40); }
.ftwrap .who { position: absolute; left: calc(21% - 70px); top: -128px; height: 184px; }
.ft { background: var(--color-bg-plane); padding: var(--space-48) 0 var(--space-40); }
.ft .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-32); align-items: start; }
.ft .logo { height: 34px; width: auto; margin-bottom: var(--space-16); }
.ft nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-24); margin-bottom: var(--space-16); font-weight: var(--font-weight-bold); }
.ft nav a { display: inline-flex; align-items: center; min-height: var(--layout-target-main); text-decoration-thickness: var(--border-width-line); text-underline-offset: 6px; }
.ft .small a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.ft .small { max-width: 40em; } /* 運営の会社の欄が横に広がりすぎないように。広い画面では所在地が2行になる */
.ft .small .nb { display: inline-block; } /* 所在地を、郵便番号・町名・建物名のまとまりで折り返す */
@media (hover: hover) { .ft nav a:hover { text-decoration-line: underline; } }
@media (max-width: 1023px) {
  .ftwrap .who { left: calc(21% - 44px); top: -90px; height: 118px; }
  .ft { padding: var(--space-40) 0 var(--space-32); }
  .ft .wrap { grid-template-columns: minmax(0, 1fr); }
  .ft nav { gap: 0 var(--space-24); }
}

/* 動きを減らす設定の人には、動きを止める（02_visual ⑪） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}