/* BRANMAKE 公開サイト
 *
 * Claude Design のカンプ（プロジェクト「画面スコープと英語版の見せ方」の
 * `BRANMAKE 商品詳細.dc.html`）を実装に落としたもの。
 *
 * ★これ以前の公開サイトの CSS は base.html.twig への直書き64行の仮組みだった。★
 * 「カンプが来たら丸ごと置き換える」前提で作り込まずに置いていたもので、
 * カンプが届いたのでここへ移した。管理画面（public/css/admin.css）と同じ流儀。
 *
 * 目次
 *   1. トークン
 *   2. 土台
 *   3. 共通の部品（ボタン・見出し・注記）
 *   4. ヘッダとフッタ
 *   5. 商品一覧のカード
 *   6. 商品詳細
 *   7. 既存画面から使われている部品（フラッシュ・進捗帯・ラベルプレビュー）
 *   8. ページ見出しの帯（静的ページ共通）
 *   9. お問い合わせ
 *   9b. 作業中の画面の枠（細ヘッダ・進行帯）とお申し込み3画面
 *  10. ご注文について
 *  11. 会社概要
 *  12. トップ（冒頭とカテゴリの見出し）
 *  13. 狭い画面（★このブロックは必ずファイル末尾に置く★）
 */

/* ---- 1. トークン ------------------------------------------------------ */

:root {
    /* 文字 */
    --ink: #111111;
    --ink-soft: #3f3f42;
    --muted: #74747a;
    --muted-2: #8b8b91;

    /* 面 */
    --surface: #ffffff;
    --surface-soft: #faf8f5;
    --wash: #f5f3f0;

    /* 罫線。--line は白地の中、--line-strong は生成り地との境。 */
    --line: #ece9e4;
    --line-soft: #f2efeb;
    --line-strong: #d7d3cc;

    /* 暗部（上部の帯とフッタ） */
    --dark: #111111;
    --dark-ink: #e8e6e2;
    --dark-muted: #8b8b91;
    --dark-line: #2b2b2e;
    --dark-off: #a3a3a8;

    /* 差し色。--accent は主ボタンとナビの現在地、--gold は小見出しの前置き。 */
    --accent: #e4003a;
    --accent-dark: #c1002f;
    --gold: #b98a58;
    /* 飾り罫（トップの冒頭の ✦ の左右）。--gold より薄い。 */
    --gold-line: #dcc4a8;

    /* 書体 */
    --serif: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
    --sans: 'Noto Sans JP', system-ui, sans-serif;
    --mono: 'Roboto Mono', ui-monospace, monospace;

    /* 寸法 */
    --container: 1160px;
    --radius: 3px;
    --radius-lg: 4px;
}

/* ---- 2. 土台 ---------------------------------------------------------- */

* { box-sizing: border-box; }

/* ★フッタの下に白地を残さないための土台。★
 *
 * 本文が画面より短いページ（送信完了・トップ・ログイン）は、文書の高さが
 * viewport より低くなり、黒いフッタの下に body の背景（白）が残っていた。
 * 画面ごとに `min-height` を当てて背を伸ばすのは対症療法で、当てた値より
 * 背の高い画面では必ず再発する（実測: 1280×900 で 56px、1280×1200 で
 * 356px、390×844 で 22px）。**画面の高さは無数にあるので、値では追えない。**
 *
 * body を縦の flex にして最低でも画面いっぱいの高さを持たせ、フッタに
 * `margin-top: auto`（下の `.site-footer`）を与えて余った縦の隙間を
 * すべてフッタの上に寄せる。これなら画面の高さに関係なく、
 * 「本文が短ければフッタが画面の底」「本文が長ければ文書の末尾」になる。 */
body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ★flex 化で既存ページの見た目を1pxも変えないための2点。★
 *
 *  - `width: 100%` … flex アイテムは cross 方向（ここでは横）のマージンが
 *    auto だと stretch されない。`main` / `.breadcrumb` / `.detail` は
 *    どれも `max-width` ＋ `margin: 0 auto` を持つので、これが無いと
 *    横幅が中身なりに縮む。ブロックだったときと同じ「段いっぱい →
 *    max-width で頭打ち → 中央寄せ」に戻す指定である。
 *  - `flex: none` … 縦に縮まないようにする。本文が画面より高いページで
 *    flex-shrink が効くと、意図しない圧縮が起きうる。 */
body > * { width: 100%; flex: none; }

a { color: inherit; }
a:hover { color: var(--accent-dark); }

img { max-width: 100%; }

main {
    max-width: var(--container);
    margin: 0 auto;
    padding: 24px 24px 64px;
}

/* 商品詳細のように自前で段組みする画面は、main の内側の余白を殺す。 */
main.main--flush { max-width: none; padding: 0; }

h1 { font-family: var(--serif); font-weight: 600; font-size: 31px; line-height: 1.35; letter-spacing: .01em; margin: 0 0 16px; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: .02em; margin: 0; }

/* ---- 3. 共通の部品 ---------------------------------------------------- */

.eyebrow {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .12em;
    color: var(--gold);
}

.note {
    font-size: 11.5px;
    line-height: 1.75;
    color: var(--muted-2);
    text-wrap: pretty;
}

/* 主ボタン。★英語で約2倍に伸びるので1行に詰めない。★
 * 文字は左、矢印は右端。折り返しても崩れない。 */
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 18px 24px;
    border-radius: var(--radius);
    background: var(--accent);
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    text-wrap: pretty;
}

.btn-primary:hover { background: var(--accent-dark); color: #ffffff; }
.btn-primary__arrow { font-family: var(--mono); }

.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
}

.btn-secondary:hover { border-color: var(--ink); }

/* ---- 4. ヘッダとフッタ ------------------------------------------------ */

/* 上部の黒帯。標語・言語切替・アカウント。 */
.utility {
    background: var(--dark);
    color: #ffffff;
}

.utility__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.utility__tagline {
    font-family: var(--serif);
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--dark-ink);
    white-space: nowrap;
}

.utility__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.utility__sep { width: 1px; height: 14px; background: #3a3a3d; }
.utility__account { font-size: 12px; color: var(--dark-ink); text-decoration: none; }
.utility__account:hover { color: #ffffff; }

/* 言語切替。現在地は白抜き。 */
.lang { display: flex; gap: 2px; }

.lang__item {
    font-family: var(--sans);
    font-size: 11.5px;
    padding: 4px 9px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--dark-off);
    text-decoration: none;
    white-space: nowrap;
}

.lang__item:hover { color: #ffffff; }
.lang__item--current { background: #ffffff; color: var(--ink); font-weight: 500; }
.lang__item--current:hover { color: var(--ink); }

.site-header { border-bottom: 1px solid var(--line); }

.site-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-header__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.site-header__logo img { display: block; height: 46px; width: auto; flex: none; }

.site-nav { display: flex; gap: 24px; flex-wrap: wrap; min-width: 0; }

.site-nav__item {
    font-size: 13.5px;
    line-height: 1.4;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav__item:hover { border-color: var(--accent); color: var(--ink); }

/* 現在地。★判定は PHP 側（AdminNavigationBuilder と同じ流儀で、
 * テンプレートには真偽値だけを渡す）。★ */
.site-nav__item--current { color: var(--ink); border-color: var(--accent); }

.site-header__cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius);
    background: var(--accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.site-header__cta:hover { background: var(--accent-dark); color: #ffffff; }

/* スマホのメニューボタン。★JS を足していないので、いまは
 * ナビをその場で開閉するだけの details/summary で作っている。★ */
.site-header__menu { display: none; }

/* ★`margin-top: auto` が「フッタの下に白地を残さない」の実体。★
 * body（縦 flex・min-height: 100dvh）の余った縦の隙間を、すべてフッタの
 * 上へ寄せる。本文が短いページではフッタが画面の底に着き、長いページでは
 * 隙間が0なので何も起こらない。**画面ごとの min-height は要らなくなる。** */
.site-footer { background: var(--dark); color: var(--dark-ink); margin-top: auto; }

.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 44px 24px 36px;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.site-footer__brand { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.site-footer__brand img { display: block; height: 52px; width: auto; align-self: flex-start; flex: none; object-fit: contain; }

.site-footer__nav { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.site-footer__nav a { font-size: 13px; color: var(--dark-ink); text-decoration: none; }
.site-footer__nav a:hover { color: #ffffff; }

.site-footer__corp {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    text-align: right;
    max-width: 420px;
}

.site-footer__corp-name { font-family: var(--serif); font-size: 15px; letter-spacing: .03em; color: #ffffff; }
.site-footer__corp dl { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.site-footer__corp-row { display: flex; gap: 10px; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; }
.site-footer__corp dt { font-size: 11px; color: var(--muted); white-space: nowrap; }
.site-footer__corp dd { margin: 0; font-size: 12px; line-height: 1.7; color: var(--dark-ink); text-align: right; text-wrap: pretty; }
.site-footer__corp-link { font-size: 12px; color: var(--dark-ink); }

.site-footer__bottom { border-top: 1px solid var(--dark-line); }

.site-footer__bottom-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.site-footer__bottom span { font-size: 11.5px; color: var(--dark-muted); }
.site-footer__bottom span + span { margin-left: auto; }

/* ---- 5. 商品一覧のカード ---------------------------------------------- */

.catalog-group { margin-bottom: 40px; }
.catalog-group__title { font-family: var(--serif); font-weight: 600; font-size: 21px; margin: 0 0 16px; letter-spacing: .02em; }

.catalog-group__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.catalog-group__grid > li { display: flex; }
.catalog-group__grid .product-card { width: 100%; }

/* カード。★トップと商品一覧が同じ1枚（templates/site/product/_card.html.twig）。★
 * 画像はカードの縁いっぱいまで敷くので、角丸は外側で切る（overflow: hidden）。 */
.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    text-decoration: none;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.product-card:hover { border-color: #dcd8d2; box-shadow: 0 6px 20px rgba(17, 17, 17, .08); color: inherit; }

.product-card__image,
.product-card__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--wash);
}

.product-card__placeholder {
    display: grid;
    place-items: center;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--muted-2);
}

.product-card__body { display: flex; flex-direction: column; padding: 14px 14px 16px; }
.product-card__name { display: block; font-size: 14px; font-weight: 500; line-height: 1.55; text-wrap: pretty; }

/* 単価。★ロットと金額を上下に分ける。★「12袋〜」と「¥2,040〜」を1行に
 * 詰めると、単位が長い商品や英語（Phase 3）で折り返し位置が読めなくなる。 */
.product-card__price { display: flex; flex-direction: column; align-items: flex-start; row-gap: 1px; margin-top: 10px; }
.product-card__lot { font-size: 11px; letter-spacing: .02em; color: var(--muted); }
.product-card__amount-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; }
.product-card__amount { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.product-card__tax { font-size: 11px; color: var(--muted); }

/* ---- 6. 商品詳細 ------------------------------------------------------ */

.breadcrumb {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px 24px 0;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}

.breadcrumb a { text-decoration: none; color: var(--muted); }
.breadcrumb__sep { color: #c9c5bf; }

.detail {
    max-width: var(--container);
    margin: 0 auto;
    padding: 24px 24px 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 56px;
    align-items: start;
}

/* ★左右の並びは grid-column で決める。DOM は右列（h1 と主ボタン）が先。★
 * カンプは絵であってマークアップの指定ではない。本文を先に置くと `<h1>` が
 * ページ最後の見出しになり、狭い画面では `order: -1` で見た目だけ入れ替える
 * ことになって、キーボード・支援技術の順序と食い違う（WCAG 2.4.3）。
 * 自動配置に任せると aside が左に来るので、両方に明示する。 */
.detail__main { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.detail__section { display: flex; flex-direction: column; gap: 14px; }
.detail__section p { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }

/* 主画像。★4:3。カンプの指定どおり拡大は等倍まで、引き伸ばさない。★
 * 画像は保存時に長辺600pxへ再エンコードされているので、これ以上は伸ばせない。 */
.detail__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--wash);
    border-radius: var(--radius-lg);
}

/* 未設定のときも同じ枠を出す。歯抜けにしない。 */
.detail__image-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background-color: var(--wash);
    background-image: repeating-linear-gradient(135deg, rgba(17, 17, 17, .05) 0 8px, transparent 8px 16px);
}

.detail__image-placeholder span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--muted);
    background: var(--surface);
    padding: 5px 9px;
    border-radius: 2px;
}

.spec-table { border-collapse: collapse; width: 100%; }
.spec-table th { text-align: left; vertical-align: top; width: 34%; padding: 12px 16px 12px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.7; }
.spec-table td { padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.8; text-wrap: pretty; }

/* 構成を選ぶ画面で聞かれること。★質問の数は商品ごとに1つ〜5つと変わるので、
 * 何個でも同じ横並びのチップで表現する。★ */
.steps { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 2px 0 0; padding: 0; }

.steps__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.steps__no { font-family: var(--mono); font-size: 11px; color: var(--gold); }
.steps__label { font-size: 13.5px; }
.steps__count { font-size: 11px; color: var(--muted-2); }

/* 右列。★カンプ 4b PRIMARY の決め: 主ボタンは常に見える位置に置き、
 * スクロールしても視界から外さない。★
 *
 * 静止したままだと、主ボタンの下端は実測 797px にあり、viewport 高 720 /
 * 650（1366×768 のノートPCはブラウザの枠を引くと実効約640px）では fold の
 * 下に沈む。sticky にして、少しスクロールすれば必ず視界に入り、そのあとは
 * 出ていかないようにする。
 *
 * top の 20px は「上に少し余白を残す」以上の意味を持たない見た目の値で、
 * 何かの実測値に合わせているわけではない（合わせると寸法が変わったときに
 * 静かにずれる）。 */
.detail__aside {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 26px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(17, 17, 17, .05);
}

.detail__head { display: flex; flex-direction: column; gap: 8px; }
.detail__head h1 { margin: 0; text-wrap: pretty; }
.detail__sub { font-size: 13px; color: var(--muted); }

.price-lede {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.price-lede__label { font-size: 11.5px; color: var(--muted); }
.price-lede__figure { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.price-lede__amount { font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
.price-lede__tax { font-size: 12px; color: var(--muted); }
/* 参考通貨（Phase 4）。円の金額より弱く見せる。 */
.price-lede__reference { font-size: 12px; color: var(--muted); }
/* 全成分表示。長い1行になるので行間を広めに取る。 */
.ingredient-list__names { margin: 0 0 8px; font-size: 13px; line-height: 1.9; text-wrap: pretty; }
.tier-table__reference { display: block; font-size: 11px; color: var(--muted); }
.price-lede__note { font-size: 12px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }

/* ロット別の単価。★サーバーが返した行を並べるだけ。★
 * ブラウザでは掛け算をしない（CLAUDE.md §3-5）。 */
.tier-table { border-collapse: collapse; width: 100%; }
.tier-table th { padding: 0 0 8px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.tier-table th:first-child { text-align: left; }
.tier-table th:last-child { text-align: right; }
.tier-table td { padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.tier-table td:last-child { font-size: 14px; font-weight: 500; text-align: right; }

/* スマホで下端に固定する主ボタン。広い画面では出さない。 */
.sticky-cta { display: none; }

/* ---- 7. 既存画面から使われている部品 ---------------------------------- */

.flash { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-soft); }
.flash--error { border-color: var(--accent-dark); background: #fef2f2; color: #991b1b; }

.label-preview { margin: 16px 0; }
.label-preview__svg { max-width: 200px; }
.label-preview__svg svg { width: 100%; height: auto; display: block; }

.status-bar { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0; padding: 0; }
.status-bar__step { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--muted); }
.status-bar__step--current { border-color: var(--ink); background: var(--ink); color: #ffffff; font-weight: 700; }
.status-bar--closed { color: var(--muted); }

/* マイページの見出し行。右端にログアウト（出口）を置く。
 * ★上部の黒帯には出さない。★理由は SiteChromeBuilder::account() の docblock。 */

/* ---- 8. ページ見出しの帯（静的ページ共通） ------------------------------
 * カンプ『BRANMAKE お問い合わせ・静的ページ.dc.html』の3画面が共有する帯。
 * 生成り地に、パンくず・見出し・リード。★横幅いっぱいに敷くので、
 * main の外（templates/site/_page_head.html.twig）に置く。★
 */

.page-head {
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}

.page-head__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 26px 24px 30px;
}

/* 帯の中のパンくずは、帯側が余白を持つので自分では持たない。 */
.breadcrumb--flush { max-width: none; margin: 0; padding: 0; }

.page-head h1 { font-size: 38px; letter-spacing: .02em; margin: 12px 0 0; text-wrap: pretty; }

.page-head__lede {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ink-soft);
    max-width: 50em;
    text-wrap: pretty;
}

/* ---- 9. お問い合わせ --------------------------------------------------- */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 52px;
    align-items: start;
    padding-top: 20px;
}

.contact-layout__main { min-width: 0; }
.contact-layout__aside { display: flex; flex-direction: column; gap: 18px; }

.form-block { display: flex; flex-direction: column; gap: 22px; }

/* Symfony の form_row が出す <div> を並べる。クラスは row_attr で付けている
 * （テンプレート側）。★項目名と name 属性は変えない。★
 *
 * ★すべて `.form-block` の中に閉じること。★`.field` は
 * `templates/site/account/login.html.twig` も使っている。閉じずに書くと
 * ログイン画面の見た目が巻き添えで変わる（あの画面のカンプ
 * 『BRANMAKE マイページ・ログイン.dc.html』はまだ実装していない）。
 *
 * ★`.form-block` はお問い合わせと申し込みが共有する。★当初は
 * `.contact-form` に閉じていたが、申し込みフォーム（`site/order/new.html.twig`）
 * にも同じ意匠が要るようになったので、入力欄の規則だけを共有の名前へ移した。
 * 使う側は `class="contact-form form-block"` のように両方付ける。 */
.form-block .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.form-block .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-block .field--full { grid-column: 1 / -1; }
.form-block .field label { font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ★必須／任意のバッジ。★値はフォームテーマが data 属性で渡す
   （項目ごとの真偽値をテンプレートに書き写さないため）。 */
.form-block .field label[data-requirement]::after {
    content: attr(data-requirement);
    font-size: 10.5px;
    line-height: 1.6;
    padding: 2px 7px;
    border-radius: 2px;
}

.form-block .field label[data-requirement='必須']::after {
    background: var(--accent);
    color: var(--surface);
}

.form-block .field label[data-requirement='任意']::after {
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--line);
}

/* ★<select> も同じ枠に揃える。★申し込みの都道府県が ChoiceType なので、
   input と textarea だけを整えると1つだけブラウザ既定のまま浮く。
   ★ラジオとチェックは外す。★`width: 100%` が当たると、丸が行いっぱいに
   広がって隣の文字が下へ折り返す（お問い合わせの種類のピルで実測）。 */
.form-block .field input:not([type='radio']):not([type='checkbox']),
.form-block .field textarea,
.form-block .field select {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.85;
    padding: 13px 14px;
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.form-block .field textarea { resize: vertical; }
.form-block .field select { appearance: none; background-image: none; }
.form-block .field :is(input, textarea, select):focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* 選択欄であることが分かるよう、右端に印を置く。appearance:none で
   ブラウザ既定の三角が消えるため、枠側で持つ。 */
.form-block .field--select { position: relative; }

.form-block .field--select::after {
    content: '▾';
    position: absolute;
    right: 14px;
    bottom: 15px;
    font-size: 11px;
    color: var(--muted);
    pointer-events: none;
}

/* 項目の補足（ContactType の help）とエラー。
 * ★ここも `.form-block` に閉じる。★`.form-errors` はログイン画面も
 * 使いうるので、素の `.form-errors` に書かない。 */
.form-block .field .help-text { font-size: 11.5px; color: var(--muted-2); }
.form-block .form-error-list { margin: 0; padding-left: 1.2em; font-size: 12.5px; color: var(--accent-dark); }

.form-block .form-errors {
    padding: 14px 16px;
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius);
    background: #fef2f2;
    color: #991b1b;
}

.form-block .form-errors p { margin: 0 0 6px; font-size: 13.5px; }

/* お問い合わせの種類。ラジオをピルに見せる。★ラジオ自体は隠さない。★
   隠すとキーボードでたどれなくなるので、丸はそのまま見せたまま、
   囲みの塗りで選択状態を示す。 */
.form-block .field--pills > div { display: flex; gap: 10px; flex-wrap: wrap; }

/* ★.pill だけを対象にする。★まとまりのラベル（「お問い合わせの種類」）は
   素のラベルのままにする。 */
.form-block .field--pills .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

.form-block .field--pills .pill input { accent-color: var(--accent); margin: 0; }
.form-block .field--pills .pill:has(input:checked) { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* ★輪郭はピル側だけに出す。★ラジオ自身にも出ると二重の枠になる。 */
.form-block .field--pills .pill:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-block .field--pills .pill input:focus-visible { outline: none; }

/* 同意のチェック。 */
.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    font-size: 13px;
    line-height: 1.8;
    cursor: pointer;
}

.consent input { width: 17px; height: 17px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }

.form-block__submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* 送信ボタン。★矢印は ::after で足す。★DOM に入れると DomCrawler の
 * selectButton('送信する') が外れる（テンプレート側のコメント参照）。 */
.btn-primary--submit {
    flex: none;
    border: 0;
    font-family: var(--sans);
    cursor: pointer;
    padding: 17px 30px;
}

.btn-primary--submit::after { content: '→'; font-family: var(--mono); }
.form-block__submit .note { flex: 1 1 14em; margin: 0; }

/* 右列のカード。「その前に」と「直接のご連絡」。 */
.side-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.side-card--soft { background: var(--surface-soft); }
.side-card h2 { font-size: 17px; }
.side-card p { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--ink-soft); text-wrap: pretty; }
.side-card > a { font-size: 13px; }

.side-card__rows { margin: 0; display: flex; flex-direction: column; }
.side-card__rows > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.side-card__rows dt { font-size: 11.5px; color: var(--muted); }
.side-card__rows dd { margin: 0; font-size: 13.5px; line-height: 1.7; text-wrap: pretty; }

/* 送信完了。ボタン2つを横に並べるだけ。
 *
 * ★ここに `min-height` を当てないこと。★以前は 220px を当てて背の高い画面の
 * 白地を隠していたが、220px より背の高い画面では必ず再発する対症療法だった。
 * フッタが画面の底に着くことは body 側（§2 と `.site-footer`）が引き受ける。 */
.sent { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 20px 0 40px; }
.sent .btn-primary { flex: none; }
.sent .btn-secondary { padding: 15px 22px; }

/* ---- 9b. 作業中の画面の枠とお申し込み3画面 ----------------------------
 * ★細ヘッダはコンフィギュレータ・再注文・お申し込み3画面が共有する。★
 * もとは configurator.css にあったが、Vite が束ねるあのファイルは
 * コンフィギュレータの画面でしか読み込まれない。共有する枠なので
 * ここ（全ページに効く site.css）へ移した。
 */

.flow-head { border-bottom: 1px solid var(--line); background: var(--surface); }

.flow-head__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.flow-head__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.flow-head__logo img { display: block; height: 40px; width: auto; }
.flow-head__rule { width: 1px; height: 26px; background: var(--line); flex: none; }
.flow-head__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.flow-head__product {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-head__sub { font-size: 11px; color: var(--muted-2); }

.flow-head__back {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.flow-head__back:hover { color: var(--accent-dark); }

/* 再注文の案内文（落ちた軸・価格改定）。 */
.flow-notices {
    max-width: var(--container);
    margin: 0 auto;
    padding: 16px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flow-notices p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); }
.flow-notices .reorder__notice { color: var(--accent-dark); }

/* 進行帯（申し込み › 確認 › 完了）。コンフィギュレータの STEP インジケータと
 * 同じ意匠だが、あちらは押して戻れるボタン、こちらは現在地を示すだけの
 * 表示である（フォームの途中で任意の段へ飛べるわけではない）。 */
.flow-status { border-bottom: 1px solid var(--line); background: var(--surface-soft); }

.flow-status__list {
    max-width: var(--container);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    list-style: none;
}

.flow-status__item { display: flex; align-items: center; gap: 10px; }

.flow-status__item:not(:last-child)::after {
    content: '\203a';
    color: var(--line-strong);
    font-size: 12px;
}

.flow-status__chip {
    font-family: var(--sans);
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    white-space: nowrap;
    background: transparent;
    color: var(--dark-off);
    border: 1px dashed var(--line-strong);
}

.flow-status__no { font-family: var(--mono); font-size: 10.5px; opacity: .75; }
.flow-status__chip--done { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.flow-status__chip--current { background: var(--ink); color: var(--surface); border: 1px solid var(--ink); font-weight: 500; }

/* --- お申し込み（入力） --- */

.order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
    align-items: start;
}

/* 見出しは左の列。要約は右の列で2段ぶんの高さを取る。
   ★見出しを .order-layout__main の中に入れない。★入れると、狭い画面で
   要約を見出しの下・入力欄の上へ回せなくなる（別の並び替え文脈になる）。 */
.order-intro { grid-column: 1; }
.order-layout__main { grid-column: 1; display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.order-summary { grid-column: 2; grid-row: 1 / span 2; }

.order-intro { display: flex; flex-direction: column; gap: 8px; }
.order-intro h1 { font-size: 32px; margin: 0; }
.order-intro p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); text-wrap: pretty; }

/* 区画の見出し。カンプの legend（明朝・下罫線）。 */
.order-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.order-form legend {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: .02em;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
    width: 100%;
}

.order-form__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.order-form__actions .btn-primary { flex: none; border: 0; font-family: var(--sans); cursor: pointer; padding: 17px 30px; }
.order-form__actions .note { flex: 1 1 14em; margin: 0; }

/* 右の要約。★金額はサーバーが返した値をそのまま出す（CLAUDE.md §3-5）。★ */
.order-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(17, 17, 17, .05);
    position: sticky;
    top: 16px;
}

.order-summary__label { font-size: 12px; color: var(--muted); }
.order-summary__product { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.4; text-wrap: pretty; }

/* 内訳表。★E2E 3本が `.breakdown` の文字列を見ている。★クラス名は変えない。
 *
 * ★お申し込みの中に閉じること。★`_breakdown.html.twig` は
 * `site/account/order_show.html.twig`（マイページの注文詳細）からも
 * include されている。あの画面のカンプ『マイページ・ログイン.dc.html』は
 * まだ実装していないので、素の `.breakdown` に書くと巻き添えで
 * 内訳表だけが新意匠になり、周りの素のままの要素から浮く（実測）。 */
.order-summary .breakdown,
.order-card .breakdown { width: 100%; border-collapse: collapse; }

.order-summary .breakdown :is(th, td),
.order-card .breakdown :is(th, td) {
    padding: 9px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    line-height: 1.7;
    text-align: left;
    vertical-align: top;
}

.order-summary .breakdown th,
.order-card .breakdown th { font-weight: 400; color: var(--muted); white-space: nowrap; padding-right: 12px; }
.order-summary .breakdown td,
.order-card .breakdown td { text-align: right; color: var(--ink); text-wrap: pretty; }
.order-summary .breakdown tr:last-child td,
.order-card .breakdown tr:last-child td { font-weight: 500; }

.order-summary__total { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.order-summary__amount { display: flex; align-items: baseline; gap: 7px; }
.order-summary__amount strong { font-size: 28px; font-weight: 700; }
.order-summary__amount span { font-size: 11.5px; color: var(--muted); }

/* --- 確認・完了で使うカード --- */

.order-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }

.order-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}

.order-card__head h2 { font-size: 17px; }
.order-card__body { padding: 4px 20px 12px; }

.order-confirm { max-width: 820px; display: flex; flex-direction: column; gap: 30px; }
.order-confirm__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.order-confirm__actions .btn-primary { flex: none; border: 0; font-family: var(--sans); cursor: pointer; padding: 17px 30px; }
.order-confirm__actions .btn-secondary { border: 1px solid var(--line-strong); background: var(--surface); font-family: var(--sans); font-size: 14px; cursor: pointer; padding: 16px 22px; }
.order-confirm__actions .note { flex: 1 1 14em; margin: 0; }

/* 差し戻し・注意の帯。★お申し込みの中に閉じる。★`.notice` は素の名前で、
 * 他の未着手の画面が使い始めたときに巻き添えにしない。 */
.order-confirm .notice {
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: var(--surface-soft);
    font-size: 13px;
    line-height: 1.8;
}

.order-confirm .notice p { margin: 0; }
.order-confirm .notice p + p { margin-top: 6px; }
.order-confirm .notice--warning { border-color: var(--accent-dark); background: #fef2f2; color: #991b1b; }

/* --- 完了 --- */

.order-done { max-width: 720px; display: flex; flex-direction: column; gap: 28px; }
.order-done__intro { display: flex; flex-direction: column; gap: 14px; }

.order-done__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    font-size: 12px;
    color: #ffffff;
    background: var(--ink);
    padding: 6px 12px;
    border-radius: 999px;
}

.order-done__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.order-done__intro h1 { font-size: 34px; margin: 0; }
.order-done__intro p { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }

/* 控え。★等幅で並べる（カンプの DONE の決め）。★ */
.order-receipt {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    margin: 0;
}

.order-receipt div { display: flex; flex-direction: column; gap: 4px; }
.order-receipt dt { font-size: 11.5px; color: var(--muted); }
.order-receipt dd { margin: 0; font-family: var(--mono); font-size: 17px; font-weight: 500; }

.order-next { display: flex; flex-direction: column; gap: 12px; }
.order-next ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }

.order-next li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.order-next li::before {
    counter-increment: order-next;
    content: counter(order-next, decimal-leading-zero);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--gold);
    flex: none;
}

.order-next ol { counter-reset: order-next; }
.order-done__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.order-done__actions .btn-primary { flex: none; }

/* ---- 10. ご注文について ------------------------------------------------ */

.guide-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 52px;
    align-items: start;
    padding-top: 20px;
}

.guide-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }

.guide-nav a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: none;
}

.guide-nav a:hover { background: var(--surface-soft); color: var(--ink); }

.guide-body { display: flex; flex-direction: column; gap: 44px; min-width: 0; max-width: 760px; }
.guide-section { display: flex; flex-direction: column; gap: 16px; }
.guide-section h2 { font-size: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* 見出しへ飛んだとき、追従ヘッダではなく帯の下に着地させるための余白。 */
.guide-section { scroll-margin-top: 16px; }

.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.flow__item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.flow__no { font-family: var(--mono); font-size: 11px; color: var(--gold); flex: none; padding-top: 3px; }
.flow__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.flow__title { font-size: 15px; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.flow__body { font-size: 13px; color: var(--ink-soft); line-height: 1.85; text-wrap: pretty; }

/* 右端の小さな添え書き。★全段に置く。★01〜03 はお客様の操作にかかる目安、
 * 04〜05 は弊社の手番であることを示す。社内での確認や製造の期間は約束
 * できないので、カンプが出していた「2〜5営業日」「4〜8週間」は載せていない。
 * 一部の段だけ空欄にすると未完成に見えるため、日数の代わりに手番を置いた。 */
.flow__when { margin-left: auto; font-size: 11.5px; color: var(--muted-2); white-space: nowrap; padding-top: 4px; }

.faq { margin: 0; display: flex; flex-direction: column; gap: 16px; }

.faq__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}

.faq__item dt { font-size: 14.5px; font-weight: 500; line-height: 1.6; text-wrap: pretty; }
.faq__item dd { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); text-wrap: pretty; }

.guide-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 24px;
    border: 1px solid var(--ink);
    border-radius: var(--radius-lg);
}

.guide-cta span { font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.guide-cta .btn-primary { margin-left: auto; flex: none; font-size: 15px; padding: 15px 26px; }

/* ---- 11. 会社概要 ------------------------------------------------------ */

/* ★段いっぱいに使う。★以前は `max-width: 760px` で読みやすい幅に絞っていたが、
 * カンプは右に 380px の aside（オフィス写真・アクセス）を置いて 1160 幅を
 * 埋めていた。実データが無くて aside を落としたので、絞ったままだと
 * 1280 の画面で右に 400px の完全な余白が残り未完成に見える。 */
.company { display: flex; flex-direction: column; gap: 36px; padding-top: 20px; }
.company__section { display: flex; flex-direction: column; gap: 14px; }
.company__section h2 { font-size: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* 見出しの列は固定幅にする。★`.spec-table` 既定の 34% のままだと、
 * 段いっぱい（1112px）では 378px になり「会社名」の右に空白が広がる。★
 * 狭い画面では末尾の @media が縦積みに置き換えるので、ここは広い画面用。 */
.company__section .spec-table th { width: 220px; }

/* ★段は grid ではなく flex で組む。★2026-08-12 に卸売（キレイコスメ）と
 * 小売（レガーロ）が加わって5枚になった。3列の grid だと2段目の右に
 * 1列ぶんの空きが残り、4列だと2段目に1枚だけが細く残る。
 * flex なら最終段の枚数に合わせて残りの幅を分け合うので、
 * **枚数が変わっても段が埋まる**（枚数は BusinessSiteCatalog が決めるので、
 * CSS 側は枚数を知らないほうがよい）。
 * `flex-basis: 300px` は「1160 幅で3枚ずつ折り返す」ための値。 */
.biz-cards { display: flex; flex-wrap: wrap; gap: 16px; }

.biz-card {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.biz-card__title { font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.biz-card__body { font-size: 12.5px; line-height: 1.85; color: var(--ink-soft); text-wrap: pretty; }
.biz-card a { margin-top: auto; padding-top: 4px; font-size: 12.5px; }

/* ---- 12. トップ -------------------------------------------------------
 * カンプ『BRANMAKE トップ.dc.html』。冒頭（生成り地）とカテゴリの見出し。
 * カードは §5 を共有する（トップ専用のカードは作らない）。
 */

/* 冒頭。★横幅いっぱいに敷くので main の外に置く。★
 * （静的ページの `.page-head` と同じ理由） */
.hero { background: var(--surface-soft); border-bottom: 1px solid var(--line); }

.hero__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 64px 24px 56px;
}

.hero__eyebrow { margin: 0; letter-spacing: .16em; text-transform: uppercase; }

/* ★トップの h1 だけは大きい（54px）。★他の画面の見出しは 31px（素の h1）
 * ・38px（`.page-head`）で、ここが最大になる。 */
.hero h1 { font-size: 54px; line-height: 1.26; margin: 20px 0 0; max-width: 22em; text-wrap: pretty; }

.hero__ornament { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; max-width: 320px; }
.hero__ornament-rule { flex: 1; height: 1px; background: var(--gold-line); }
.hero__ornament-mark { font-size: 11px; color: var(--gold); }

.hero__lead { margin: 22px 0 0; font-size: 15px; line-height: 1.95; color: var(--ink-soft); max-width: 44em; text-wrap: pretty; }

.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 32px 0 0; }

/* `.btn-primary` は幅いっぱいに広がる部品（商品詳細の右列で使っている）。
 * 冒頭では2つのボタンを横に並べるので、中身なりの幅に戻す。 */
.hero__actions .btn-primary { flex: none; font-size: 16px; padding: 16px 30px; }
.hero__actions .btn-secondary { flex: none; font-size: 14px; padding: 15px 22px; }

.hero__points { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 30px 0 0; padding: 0; }
.hero__points li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.hero__point-mark { font-size: 11px; color: var(--accent); }

/* 冒頭のすぐ下にカードが来るので、main の上の余白を少し広げる。 */
main.main--catalog { padding-top: 48px; }

/* カテゴリの見出し。トップと商品一覧が共有する。
 * **「すべて見る」を出すのはトップだけ**（一覧には全件載っているので
 * 空約束になる。判断は `CatalogGroup::hasMore()`）。 */
.catalog-group__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.catalog-group__head .catalog-group__title { margin: 0; font-size: 23px; }
.catalog-group__head + .catalog-group__grid { margin-top: 24px; }
.catalog-group__count { font-size: 12px; color: var(--muted-2); }

.catalog-group__all {
    margin-left: auto;
    padding-bottom: 2px;
    border-bottom: 1px solid #dcd8d2;
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: none;
}

.catalog-group__all:hover { color: var(--accent-dark); border-color: var(--accent); }

/* 見た目からは隠すが読み上げには残す。**display:none にしない**
 * （支援技術からも消える）。 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- 12b. 商品一覧 ----------------------------------------------------
 * ★トップと器を分ける。★トップは冒頭の生成り地があるので `main--catalog`
 * が上の余白を持たないが、一覧は見出しの帯の直下から始まる。
 */
.catalog-total {
    margin: 0 0 28px;
    font-size: 13px;
    color: var(--muted-2);
    letter-spacing: .04em;
}

.catalog-note {
    margin: 8px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--muted-2);
}

/* 参考通貨（Phase 4）。★円の金額より弱く見せる。★同じ強さで並べると、
 * どちらで請求されるのか分からなくなる（仕様 §2）。 */
.product-card__reference {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted-2);
}

.reference-note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--muted-2);
}


/* ---- 12c. マイページ --------------------------------------------------
 * ★共有部品には祖先で絞って当てる。★`.breakdown` と `.label-preview` は
 * 確認画面・管理画面とも共有しているので、素の名前で書くとあちらまで動く
 * （申し送り 2026-08-12-order-design-handoff の §`.breakdown` を素の名前で
 * 書かなかった を見よ）。
 */
.account { padding-bottom: 48px; }

.account__head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.account__count { font-size: 13px; color: var(--muted-2); letter-spacing: .04em; }
.account__logout { margin-left: auto; font-size: 13px; color: var(--muted); }
.account__logout:hover { color: var(--accent-dark); }
.account__empty { margin: 28px 0 0; color: var(--muted); }
.account__back { margin: 0 0 20px; font-size: 13px; }
.account__back a { color: var(--muted); text-decoration: none; }
.account__back a:hover { color: var(--accent-dark); }
.account__actions { margin: 24px 0 32px; }

/* 履歴の表。**DOM は1つ**で、狭い画面ではカードに積み替える（末尾の @media）。 */
.account-orders {
    width: 100%;
    margin-top: 24px;
    border-collapse: collapse;
    font-size: 14px;
}

.account-orders th,
.account-orders td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.account-orders thead th {
    padding-top: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-2);
    letter-spacing: .06em;
}

.account-orders__no { font-family: var(--mono, monospace); white-space: nowrap; }
.account-orders__amount { text-align: right; white-space: nowrap; }
.account-orders__product { display: block; }
.account-orders__config { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted-2); }
.account-orders__link { text-align: right; white-space: nowrap; }

/* ★状況は3色で足りる。★紅は主ボタンだけに残し、状態表示には使わない
 * （カンプの決め STATE）。どの状態がどの色かは `OrderStatus::tone()`。 */
.account-status {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.account-status--active { background: var(--ink); color: #ffffff; }
.account-status--done { background: transparent; color: var(--ink); }
.account-status--cancel { border-color: #d6d2cc; background: #f2f0ed; color: var(--muted-2); }

/* 注文詳細のカード。 */
.account-card {
    margin-top: 24px;
    border: 1px solid var(--line);
    background: #ffffff;
}

.account-card__head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.account-card__head h2 { margin: 0; font-size: 15px; letter-spacing: .04em; }
.account-card__body { padding: 20px; }
.account-card__product { margin: 0; font-weight: 500; }
.account-card__code { margin: 6px 0 16px; font-size: 12.5px; color: var(--muted-2); }
.account-card .breakdown { width: 100%; font-size: 13.5px; }
.account-card .label-preview { margin-top: 20px; }

/* ログイン・パスワード設定・再送。 */
.account-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
    padding-bottom: 48px;
}

.account-auth--narrow { grid-template-columns: minmax(0, 560px); }
.account-auth__forgot { margin: 20px 0 0; font-size: 13px; }
.account-auth__rules {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--muted-2);
}

/* ---- 13. 狭い画面 -----------------------------------------------------
 * ★このブロックは必ずファイル末尾に置く。★後ろに規則を足すと、
 * 狭い画面向けの上書きを潰す（admin.css で同じ事故を踏んでいる）。
 */

@media (max-width: 959px) {
    /* 段組みをやめて1列にする。★並べ替えはしない。★DOM が
       「右列（h1 と主ボタン）→ 本文」の順なので、1列にすればそのまま
       意図した順序になる（`order: -1` が要らなくなった理由）。 */
    .detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 16px 16px 32px;
    }

    /* 広い画面向けに明示した列・行の指定を戻す。★戻さないと
       `grid-column: 2` が暗黙の2列目を作ってしまう。★ */
    .detail__main,
    .detail__aside {
        grid-column: 1;
        grid-row: auto;
    }

    .detail__aside {
        /* 1列では追従させない（本文の上に居座るだけになる）。
           狭い画面の主ボタンは下端の .sticky-cta が担う。 */
        position: static;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .detail__head h1 { font-size: 26px; line-height: 1.4; }
    .price-lede__amount { font-size: 27px; }

    /* 右列の主ボタンは下端の固定ボタンに任せる（同じ役割のボタンを
       画面に2つ置かない）。 */
    .detail__aside .btn-primary,
    .detail__aside .btn-primary + .note { display: none; }

    .breadcrumb { padding: 14px 16px 0; font-size: 11px; gap: 6px; }

    main { padding: 16px 16px 32px; }

    /* 下端の主ボタン。
     *
     * ★fixed ではなく sticky。★fixed だと文書の流れから外れるので、
     * 重なる分をどこかで底上げしなければならず、以前はフッタ最終行に
     * `padding-bottom: 96px` を足していた。**この 96px は実測 102px の
     * ボタンに対して足りず、390px 幅で「掲載金額はすべて税抜です。」の
     * 下端が6px 欠けていた。**ボタン文言が英語で2行になればさらに悪化する。
     *
     * sticky なら、この要素は文書内の実際の位置（base.html.twig でフッタの
     * 直前に置いている）に場所を取りながら、スクロール中は viewport の
     * 下端に貼り付く。ページ末尾まで来ると、着地先がフッタの直前なので
     * フッタがそのまま最後で終わる（フッタの下に白帯が残らない）。
     * **高さを数えなくてよくなるので、文言が伸びても何も隠れない。**
     * ★この要素をフッタより後ろへ置くと、着地先がフッタの下になり、
     * この背景色（白）がフッタの黒の下に帯として残る。★ */
    .sticky-cta {
        position: sticky;
        bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 16px 14px;
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--line);
        z-index: 20;
    }

    .sticky-cta .btn-primary { font-size: 15px; padding: 14px 18px; }
    .sticky-cta .note { text-align: center; font-size: 10.5px; }

    /* ヘッダ。ロゴを小さくし、ナビは開閉式にする。 */
    .site-header__inner { min-height: 60px; padding: 0 16px; gap: 12px; flex-wrap: wrap; }
    .site-header__logo img { height: 36px; }
    .site-header__cta { display: none; }

    .site-header__menu {
        display: block;
        margin-left: auto;
        border: 1px solid #e6e4e0;
        border-radius: var(--radius);
    }

    .site-header__menu summary {
        display: grid;
        gap: 4px;
        width: 44px;
        height: 44px;
        place-content: center;
        cursor: pointer;
        list-style: none;
    }

    .site-header__menu summary::-webkit-details-marker { display: none; }
    .site-header__menu summary span { display: block; width: 18px; height: 1.5px; background: var(--ink); }

    .site-header__menu .site-nav {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 10;
        flex-direction: column;
        gap: 0;
        padding: 8px 16px 16px;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
    }

    .site-header__menu .site-nav__item { padding: 12px 0; border-bottom: 0; }

    /* 開閉式の外に置いた素のナビは、狭い画面では出さない。 */
    .site-header > .site-header__inner > .site-nav { display: none; }

    .utility__inner { padding: 0 16px; gap: 10px; }
    .utility__tagline { display: none; }

    .site-footer__inner { padding: 24px 16px 28px; gap: 20px; flex-direction: column; }
    .site-footer__brand { min-width: 0; }
    .site-footer__brand img { height: 40px; }
    .site-footer__corp { margin-left: 0; align-items: flex-start; text-align: left; max-width: none; }
    .site-footer__corp dl { align-items: flex-start; }
    .site-footer__corp-row { justify-content: flex-start; }
    .site-footer__corp dd { text-align: left; }
    .site-footer__bottom-inner { padding: 14px 16px; }
    .site-footer__bottom span + span { margin-left: 0; }

    /* ページ見出しの帯。 */
    .page-head__inner { padding: 18px 16px 20px; }
    .page-head h1 { font-size: 25px; line-height: 1.35; margin: 9px 0 0; }
    .page-head__lede { font-size: 12.5px; margin: 10px 0 0; }
    .breadcrumb--flush { font-size: 11px; gap: 7px; }

    /* お問い合わせ。1列にし、入力欄は指で押せる高さにする。 */
    .contact-layout,
    .guide-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding-top: 4px;
    }

    .form-block .field-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .form-block .field :is(input:not([type='radio']):not([type='checkbox']), textarea, select) { font-size: 15px; min-height: 48px; padding: 13px 12px; }

    /* rows="8" のままだと狭い画面で画面の半分を本文欄が占める。
       高さは CSS で決める（利用者は右下の掴みで伸ばせる）。 */
    .form-block .field textarea { min-height: 0; height: 150px; }

    /* ボタンは幅いっぱい。注記はその下へ回す。 */
    .form-block__submit .btn-primary { flex: 1 1 100%; padding: 15px 18px; font-size: 15px; }
    .form-block__submit .note { flex: 1 1 100%; }

    /* 作業中の画面の枠とお申し込み3画面 */
    .flow-head__inner { height: 56px; padding: 0 14px; gap: 10px; }
    .flow-head__logo img { height: 30px; }
    .flow-head__rule { display: none; }
    .flow-head__product { font-size: 13px; white-space: normal; }
    .flow-head__sub { font-size: 10px; }
    /* ★狭い画面では戻る導線を落とす。★細ヘッダの3要素が1行に収まらない。
       戻り先はブラウザの戻るで到達できる。 */
    .flow-head__back { display: none; }

    .flow-notices { padding: 12px 14px 0; }

    .flow-status__list { padding: 11px 14px; gap: 8px; }
    .flow-status__chip { font-size: 11.5px; padding: 6px 12px; }
    /* 狭い画面では STEP 番号を落とす。3つ並べると1行に収まらない。 */
    .flow-status__no { display: none; }

    .order-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .order-intro h1 { font-size: 24px; }
    .order-form legend { font-size: 16px; padding-bottom: 9px; }
    /* 狭い画面の並びは 見出し → 要約 → 入力欄（カンプのモバイル版）。
       ★DOM は動かさない。★grid の自動配置に戻したうえで order で入れ替える。 */
    .order-intro,
    .order-layout__main,
    .order-summary { grid-column: auto; grid-row: auto; }

    .order-intro { order: 0; }
    .order-summary { order: 1; position: static; padding: 16px; box-shadow: none; background: var(--surface-soft); }
    .order-layout__main { order: 2; }
    .order-summary__product { font-size: 16px; }
    .order-summary__amount strong { font-size: 22px; }
    .order-form__actions .btn-primary,
    .order-confirm__actions .btn-primary,
    .order-confirm__actions .btn-secondary { flex: 1 1 100%; padding: 15px 18px; font-size: 15px; }
    .order-form__actions .note,
    .order-confirm__actions .note { flex: 1 1 100%; }

    .order-card__body { padding: 2px 14px 10px; }
    .order-done__intro h1 { font-size: 25px; }
    .order-receipt { flex-direction: column; gap: 12px; padding: 16px; }
    .order-receipt dd { font-size: 15px; }
    .order-done__actions .btn-primary,
    .order-done__actions .btn-secondary { flex: 1 1 100%; }

    /* `min-height: 0` の打ち消しは要らなくなった（広い画面側で当てるのをやめたため）。 */
    .sent { padding: 12px 0 24px; }
    .sent .btn-primary, .sent .btn-secondary { flex: 1 1 100%; }

    /* ご注文について。目次は追従させず、横並びのリンク列にする
       （狭い画面では左に置く場所が無い）。 */
    .guide-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .guide-nav a { padding: 8px 12px; border: 1px solid var(--line); font-size: 12px; }

    .guide-body { gap: 26px; }
    .guide-section h2, .company__section h2 { font-size: 19px; padding-bottom: 9px; }

    /* 段の中身を縦積みにする。所要時間は見出しの右端へ。 */
    .flow__item { flex-wrap: wrap; gap: 10px; padding: 14px; }
    .flow__text { flex: 1 1 60%; }
    .flow__when { padding-top: 0; }

    .faq__item { padding: 13px 14px; }
    .faq__item dt { font-size: 13.5px; }
    .faq__item dd { font-size: 12.5px; }

    .guide-cta { padding: 18px; gap: 12px; }
    .guide-cta .btn-primary { margin-left: 0; flex: 1 1 100%; }

    /* 会社概要。カードは flex なので、狭い画面では基準幅を割り込んで
       自然に1枚ずつ並ぶ（列数の指定は要らない）。 */
    .company { gap: 24px; padding-top: 4px; }

    /* 取引条件と会社概要の表は、値が長文なので 34% の見出し列だと
       日本語が1文字ずつ縦に積まれる。狭い画面では見出しと値を上下に積む。
       ★`.spec-table` 全体には効かせない。★商品詳細の仕様表も同じクラスを
       使っており、あちらは値が短くて今の見た目で成立している
       （このブランチの約束は「商品詳細の見た目を変えないこと」）。 */
    .guide-section .spec-table th,
    .guide-section .spec-table td,
    .company__section .spec-table th,
    .company__section .spec-table td { display: block; width: auto; padding: 0; border-top: 0; }

    .guide-section .spec-table tr,
    .company__section .spec-table tr { display: block; padding: 11px 0; border-top: 1px solid var(--line-soft); }

    .guide-section .spec-table th,
    .company__section .spec-table th { font-size: 11.5px; color: var(--muted); }

    .guide-section .spec-table td,
    .company__section .spec-table td { font-size: 13px; line-height: 1.8; padding-top: 2px; }

    /* トップの冒頭。字級を1段落とし、ボタンは縦積みで幅いっぱいにする。 */
    .hero__inner { padding: 32px 16px 34px; }
    .hero h1 { font-size: 31px; line-height: 1.34; margin: 14px 0 0; }

    /* 飾り罫は出さない（カンプの 390 も出していない）。狭い幅では
       見出しとリードの間に1本入るだけで、意味を持たずに縦を食う。 */
    .hero__ornament { display: none; }

    .hero__lead { margin: 16px 0 0; font-size: 14px; line-height: 1.9; }
    .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
    .hero__actions .btn-primary { font-size: 15px; padding: 15px 20px; }

    /* 指で押せる高さ（48px）に揃える。 */
    .hero__actions .btn-secondary { min-height: 48px; padding: 14px 20px; }
    .hero__points { flex-direction: column; gap: 6px; margin: 20px 0 0; }
    .hero__points li { font-size: 12.5px; }
    .hero__point-mark { font-size: 10px; }

    main.main--catalog { padding-top: 28px; }

    /* ★狭い画面でもカードは2列。★`minmax(220px, 1fr)` のままだと
       390px では1列になり、1商品でスクロール1画面ぶんを使う。 */
    .catalog-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .catalog-group__head { gap: 10px; padding-bottom: 10px; }
    .catalog-group__head .catalog-group__title { font-size: 18px; }
    .catalog-group__head + .catalog-group__grid { margin-top: 14px; }

    /* 「すべて見る」は行を改める（見出しの右に置くと折り返しで潰れる）。 */
    .catalog-group__all { margin-left: 0; flex-basis: 100%; font-size: 12px; }

    .product-card__name { font-size: 13.5px; }
    .product-card__amount { font-size: 17px; }
}

@media (max-width: 720px) {
    /* ★履歴はカードに積み替える。★DOM は変えない（`data-label` を
     * 見出しの代わりに出す）。カンプの決め HISTORY のモバイル版。 */
    .account-orders thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .account-orders,
    .account-orders tbody,
    .account-orders tr,
    .account-orders td { display: block; width: 100%; }

    .account-orders tr {
        position: relative;
        margin-bottom: 14px;
        padding: 16px;
        border: 1px solid var(--line);
    }

    .account-orders td { padding: 4px 0; border: 0; }

    .account-orders td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        color: var(--muted-2);
        letter-spacing: .06em;
    }

    /* 状況は右上（カンプの決め）。 */
    .account-orders td[data-label]:nth-last-child(2) { position: absolute; top: 12px; right: 12px; padding: 0; }
    .account-orders td[data-label]:nth-last-child(2)::before { display: none; }

    .account-orders__amount { text-align: left; }
    .account-orders__link { text-align: left; padding-top: 10px; }

    .account-auth { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}