/* ==========================================================
     夜酒並木 — 熊本・並木坂
     店内の光をそのまま設計言語にする：
       冷たい電気の紫（壁のウォッシュ・月） ⇄ 生の炎の橙（キャンドル）
     触れる場所＝炎の側。読む場所＝紫の側。
     ========================================================== */
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, figure, table { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  img { display: block; max-inline-size: 100%; }

  :root {
    /* 地は黒ではなく「紫の光を浴びた壁」。実際の店内がそう見えている。 */
    --ground:      #1a1330;
    --ground-2:    #211936;
    --surface:     #281f44;
    --surface-2:   #2f2550;
    --line:        #413264;
    --line-soft:   #2e2449;
    --ink:         #f1ecf8;
    --ink-quiet:   #bcb0d4;
    --ink-faint:   #9489ae;
    --violet:      #9d6bff;
    --violet-soft: #c6a6ff;
    --flame:       #ff9e42;
    --flame-soft:  #ffcb8d;
    --on-flame:    #180d04;

    --font-display: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", YuMincho, "Noto Serif JP", "Songti SC", serif;
    --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", system-ui, sans-serif;

    --measure: 34rem;
    --pad-x: clamp(1.25rem, 5vw, 3.5rem);
    --band: clamp(4.5rem, 10vw, 7.5rem);

    color-scheme: dark;
  }

  /* 夜の店なので、閲覧者のOS設定に関わらず常に夜の配色で出す。
     ライトテーマは用意しない（端末ごとに見え方が変わるのを防ぐため）。 */

  /* ---------- base ---------- */
  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }
  html { scroll-behavior: smooth; }

  .wrap { max-width: 68rem; margin-inline: auto; padding-inline: var(--pad-x); }

  mark.tbd {
    background: color-mix(in srgb, var(--flame) 22%, transparent);
    color: inherit;
    padding-inline: 0.25em;
    border-radius: 1px;
    box-decoration-break: clone;
  }

  /* ---------- 共通 ---------- */
  .eyebrow {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--flame);
  }

  .band { padding-block: var(--band); border-block-start: 1px solid var(--line-soft); position: relative; }

  .band-head { display: flex; flex-direction: column; gap: 0.75rem; margin-block-end: clamp(2rem, 5vw, 3.25rem); }

  .band-head h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.6vw, 2.35rem);
    letter-spacing: 0.14em;
    line-height: 1.55;
    text-wrap: balance;
  }

  .band-head p { max-width: var(--measure); color: var(--ink-quiet); font-size: 0.9375rem; }

  /* ---------- ヘッダー ---------- */
  .site-head {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--pad-x);
  }

  .site-head .mark { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
  .site-head .mark img { block-size: 2.1rem; inline-size: auto; }
  .site-head .mark span { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.28em; }

  .site-nav { display: none; gap: 1.6rem; font-size: 0.8125rem; letter-spacing: 0.14em; }

  .site-nav a {
    text-decoration: none;
    color: var(--ink-quiet);
    padding-block: 0.35rem;
    border-block-end: 1px solid transparent;
    transition: color 0.25s, border-color 0.25s;
  }

  .site-nav a:hover { color: var(--ink); border-block-end-color: var(--flame); }

  @media (min-width: 62rem) { .site-nav { display: flex; } }

  /* ---------- ヒーロー ---------- */
  .hero {
    position: relative;
    min-height: min(84svh, 46rem);
    display: grid;
    align-items: center;
    padding: clamp(2rem, 6vw, 3.5rem) var(--pad-x) clamp(4rem, 9vw, 6rem);
    overflow: hidden;
  }

  /* 店の月あかりを、面ではなく一本の線と滲みで示す */
  .ring {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -6%;
    translate: 0 -50%;
    inline-size: min(34rem, 88vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--violet-soft) 55%, transparent);
    background: radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--violet) 30%, transparent) 0%,
      color-mix(in srgb, var(--violet) 10%, transparent) 45%,
      transparent 72%);
    pointer-events: none;
  }

  .ring::after {
    content: "";
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--violet) 14%, transparent) 0%,
      transparent 62%);
    animation: bloom 10s ease-in-out infinite;
  }

  @keyframes bloom {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
  }

  @media (max-width: 56rem) {
    .ring {
      inset-block-start: 6%;
      inset-inline-end: -32%;
      translate: 0 0;
      inline-size: min(26rem, 110vw);
    }
  }

  /* ヒーローと同じ月の意匠を、以降のセクションにも左右交互に置く。
     はみ出しで横スクロールが出ないよう、置く側に overflow:hidden が要る。 */
  .has-moon { position: relative; overflow: hidden; }
  .has-moon > .wrap { position: relative; z-index: 1; }

  .moon-deco {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--violet-soft) 32%, transparent);
    background: radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--violet) 17%, transparent) 0%,
      color-mix(in srgb, var(--violet) 6%, transparent) 45%,
      transparent 72%);
    pointer-events: none;
    z-index: 0;
  }

  .moon-deco.at-left {
    inset-inline-start: -13%;
    inset-block-start: 12%;
    inline-size: min(26rem, 72vw);
  }

  .moon-deco.at-right-low {
    inset-inline-end: -11%;
    inset-block-end: -20%;
    inline-size: min(20rem, 60vw);
  }

  .hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    max-width: 68rem;
    margin-inline: auto;
    inline-size: 100%;
  }

  .hero-title {
    writing-mode: vertical-rl;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 8vw, 4.75rem);
    letter-spacing: 0.2em;
    line-height: 1;
    flex: none;
  }

  .hero-title .kana {
    display: block;
    writing-mode: vertical-rl;
    font-size: 0.19em;
    letter-spacing: 0.44em;
    color: var(--flame);
    margin-inline-end: 1.15em;
  }

  .hero-body { display: flex; flex-direction: column; gap: 1.35rem; max-width: 27rem; }

  .hero-rule { inline-size: 3.5rem; block-size: 1px; background: var(--flame); }

  .hero-lead {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 2.6vw, 1.45rem);
    line-height: 2;
    letter-spacing: 0.09em;
    text-wrap: balance;
  }

  .hero-sub { color: var(--ink-quiet); font-size: 0.875rem; line-height: 2; }

  .hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-size: 0.8125rem;
    color: var(--ink-quiet);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }

  .hero-facts li { display: inline-flex; align-items: center; gap: 0.45rem; }
  .hero-facts li::before {
    content: "";
    inline-size: 0.3rem;
    block-size: 0.3rem;
    border-radius: 50%;
    background: var(--violet-soft);
  }

  /* ---------- ボタン ---------- */
  .actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: 1px solid var(--line);
    color: var(--ink);
    background: color-mix(in srgb, var(--ground) 55%, transparent);
    transition: background-color 0.25s, border-color 0.25s;
  }

  .btn:hover { border-color: var(--flame); background: color-mix(in srgb, var(--flame) 12%, transparent); }

  .btn-flame { background: var(--flame); border-color: var(--flame); color: var(--on-flame); font-weight: 600; }
  .btn-flame:hover { background: var(--flame-soft); border-color: var(--flame-soft); color: var(--on-flame); }

  /* ---------- カラオケ ---------- */
  .karaoke { background: var(--ground-2); }

  .k-features {
    display: grid;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    grid-template-columns: repeat(2, 1fr);
    margin-block-end: clamp(2.5rem, 6vw, 3.5rem);
  }

  @media (min-width: 52rem) { .k-features { grid-template-columns: repeat(4, 1fr); } }

  .k-feature { background: var(--ground-2); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }

  .k-feature .k-val {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.8vw, 1.55rem);
    letter-spacing: 0.08em;
    line-height: 1.4;
  }

  .k-feature .k-key { font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.1em; }

  .k-layout { display: grid; gap: clamp(2rem, 5vw, 3.25rem); }

  @media (min-width: 54rem) { .k-layout { grid-template-columns: 1fr 1fr; } }

  .rate-scroll { overflow-x: auto; }

  .rate { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; min-inline-size: 20rem; }

  .rate caption {
    text-align: start;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.28em;
    color: var(--flame);
    padding-block-end: 1rem;
  }

  .rate th, .rate td { text-align: start; padding: 0.95rem 0.75rem 0.95rem 0; border-block-end: 1px solid var(--line-soft); line-height: 1.7; }

  .rate thead th { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.14em; color: var(--ink-faint); padding-block: 0 0.7rem; }

  .rate td.num, .rate thead th.num { text-align: end; font-variant-numeric: tabular-nums; padding-inline-end: 0; white-space: nowrap; }

  .rate tbody th { font-weight: 400; color: var(--ink-quiet); }
  .rate tr.pack th, .rate tr.pack td { color: var(--flame); }

  .rate-notes { margin-block-start: 1.25rem; font-size: 0.8125rem; color: var(--ink-faint); line-height: 2; }

  .uses { display: flex; flex-direction: column; gap: 1.1rem; margin-block-start: 2.5rem; }

  .uses li { padding-inline-start: 1.1rem; border-inline-start: 1px solid var(--line); font-size: 0.875rem; line-height: 1.95; color: var(--ink-quiet); }

  .uses li strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.0625rem;
    letter-spacing: 0.12em;
    color: var(--ink);
    margin-block-end: 0.2rem;
  }

  /* ---------- 図版まわり ---------- */
  figure.plate { display: flex; flex-direction: column; gap: 0.85rem; }

  figure.plate img { inline-size: 100%; block-size: auto; }

  figure.plate figcaption { font-size: 0.75rem; color: var(--ink-faint); line-height: 1.9; letter-spacing: 0.04em; }

  .placeholder {
    aspect-ratio: 4 / 3;
    background: var(--surface);
    border: 1px dashed var(--line);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--ink-faint);
  }

  /* ---------- 熊本の酒 ---------- */
  .sake-layout { display: grid; gap: clamp(2rem, 5vw, 3.25rem); align-items: start; }

  @media (min-width: 54rem) { .sake-layout { grid-template-columns: 0.9fr 1.1fr; } }

  .kura { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); grid-template-columns: repeat(2, 1fr); }

  @media (min-width: 40rem) { .kura { grid-template-columns: repeat(2, 1fr); } }

  .kura-cell { background: var(--ground); padding: 1.25rem 1.15rem; display: flex; flex-direction: column; gap: 0.25rem; }

  .kura-cell .kura-name { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: 0.12em; }
  .kura-cell .kura-where { font-size: 0.75rem; color: var(--violet-soft); letter-spacing: 0.08em; }
  .kura-cell .kura-what { font-size: 0.75rem; color: var(--ink-faint); line-height: 1.8; }

  /* ---------- お品書き ---------- */
  .menu-grid { display: grid; gap: clamp(2.25rem, 5vw, 3.25rem); }

  @media (min-width: 46rem) { .menu-grid { grid-template-columns: 1fr 1fr; } }

  .menu-block h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.24em;
    margin-block-end: 1.1rem;
    padding-block-end: 0.7rem;
    border-block-end: 1px solid var(--line);
    color: var(--flame);
  }

  .menu-list { margin-block-end: 2.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
  .menu-list:last-child { margin-block-end: 0; }

  .menu-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 0.85rem; }

  .menu-item .name { font-size: 0.9375rem; letter-spacing: 0.03em; }
  .menu-item .maker { color: var(--ink-faint); font-size: 0.8125rem; }
  .menu-item .price { font-size: 0.875rem; color: var(--ink-quiet); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap; }

  .menu-foot { margin-block-start: 2.5rem; font-size: 0.8125rem; color: var(--ink-faint); line-height: 2; }

  .charge-note {
    margin-block-end: clamp(2rem, 5vw, 3rem);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--line);
    border-inline-start: 2px solid var(--flame);
    background: var(--surface);
    font-size: 0.875rem;
    line-height: 1.95;
    color: var(--ink-quiet);
  }

  .charge-note strong { color: var(--ink); }

  /* ---------- カウンター ---------- */
  .counter-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

  @media (min-width: 52rem) { .counter-layout { grid-template-columns: 1.05fr 0.95fr; } }

  .counter-lead { font-family: var(--font-display); font-size: clamp(1.2rem, 2.8vw, 1.5rem); line-height: 2; letter-spacing: 0.1em; margin-block-end: 1.25rem; }

  .counter-text p { margin-block-end: 1.1rem; font-size: 0.875rem; line-height: 2; color: var(--ink-quiet); }
  .counter-text p:last-child { margin-block-end: 0; }

  /* ---------- 支払い ---------- */
  .pay-layout { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; }

  @media (min-width: 52rem) { .pay-layout { grid-template-columns: 0.85fr 1.15fr; } }

  .pay-groups { display: flex; flex-direction: column; gap: 1.5rem; }

  .pay-group h3 { font-family: var(--font-display); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.24em; color: var(--flame); margin-block-end: 0.5rem; }

  .pay-group p { font-size: 0.875rem; line-height: 1.95; color: var(--ink-quiet); }

  /* ---------- 店舗情報 ---------- */
  .info-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

  @media (min-width: 52rem) { .info-layout { grid-template-columns: 1.05fr 0.95fr; } }

  .info-table { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; }

  .info-table th, .info-table td { text-align: start; vertical-align: top; padding: 1rem 0; border-block-end: 1px solid var(--line-soft); line-height: 1.9; }

  .info-table th { inline-size: 7rem; font-weight: 400; letter-spacing: 0.16em; color: var(--flame); font-family: var(--font-display); }

  .info-table td { color: var(--ink-quiet); }
  .info-table td strong { color: var(--ink); font-weight: 600; }
  .info-table td a { color: var(--violet-soft); }

  .route { counter-reset: step; display: flex; flex-direction: column; gap: 1.3rem; margin-block-end: 1.75rem; }

  .route li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; font-size: 0.875rem; line-height: 1.9; color: var(--ink-quiet); }

  .route li::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--violet-soft);
    padding-block-start: 0.25rem;
  }

  /* li直下は必ず span 1つにすること。
     <strong> などを直接置くと、それぞれが別のグリッドアイテムになり
     2remの列に流し込まれて1文字ずつ縦に折り返す。 */
  .route li > span { min-inline-size: 0; overflow-wrap: anywhere; }

  .map-embed {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--line);
    margin-block-start: 1.75rem;
  }

  .map-link { margin-block-start: 0.85rem; font-size: 0.8125rem; }
  .map-link a { color: var(--violet-soft); }

  /* ---------- FAQ ---------- */
  .faq { display: flex; flex-direction: column; border-block-start: 1px solid var(--line-soft); }
  .faq details { border-block-end: 1px solid var(--line-soft); }

  .faq summary {
    cursor: pointer;
    list-style: none;
    padding: 1.35rem 2.5rem 1.35rem 0;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    position: relative;
    transition: color 0.2s;
  }

  .faq summary::-webkit-details-marker { display: none; }

  .faq summary::after {
    content: "";
    position: absolute;
    inset-inline-end: 0.5rem;
    inset-block-start: 1.8rem;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-inline-end: 1px solid var(--flame);
    border-block-end: 1px solid var(--flame);
    rotate: 45deg;
    transition: rotate 0.25s;
  }

  .faq details[open] summary::after { rotate: -135deg; }
  .faq summary:hover { color: var(--flame); }

  .faq .answer {
    padding-block-end: 1.5rem;
    padding-inline-end: 2.5rem;
    font-size: 0.875rem;
    line-height: 2;
    color: var(--ink-quiet);
    max-width: var(--measure);
  }

  .faq .answer a { color: var(--violet-soft); }
  .faq .answer strong { color: var(--ink); }

  /* ---------- フッター ---------- */
  .site-foot { border-block-start: 1px solid var(--line-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 7rem; }

  .foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; }

  .foot-logo { inline-size: 4.5rem; margin-block-end: 1rem; }

  .foot-meta { font-size: 0.75rem; color: var(--ink-faint); line-height: 2; letter-spacing: 0.06em; }
  .foot-meta a { color: var(--flame); text-decoration: none; }
  .foot-meta a:hover { text-decoration: underline; }

  @media (min-width: 46rem) { .site-foot { padding-block-end: clamp(3rem, 6vw, 4.5rem); } }

  /* ---------- スマホ固定バー ---------- */
  .quick-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: var(--surface);
    border-block-start: 1px solid var(--line);
    padding-block-end: env(safe-area-inset-bottom);
  }

  .quick-bar a { padding: 1rem 0.25rem; text-align: center; text-decoration: none; font-size: 0.75rem; letter-spacing: 0.08em; }
  .quick-bar a + a { border-inline-start: 1px solid var(--line); }
  .quick-bar .primary { background: var(--flame); color: var(--on-flame); font-weight: 600; }

  @media (min-width: 46rem) { .quick-bar { display: none; } }

  /* ---------- 出現 ---------- */
  .reveal { opacity: 0; translate: 0 1.25rem; transition: opacity 0.9s ease, translate 0.9s ease; }
  .reveal.shown { opacity: 1; translate: 0 0; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; translate: 0 0; transition: none; }
    html { scroll-behavior: auto; }
  }

  /* ==========================================================
     下層ページ（/private-room/ ほか）
     ========================================================== */

  /* トップ #karaoke の要約ブロック */
  .k-brief { display: flex; flex-direction: column; gap: 1.1rem; align-self: start; }
  .lead-note { max-width: var(--measure); color: var(--ink-quiet); font-size: 0.9375rem; line-height: 1.95; }
  .lead-note strong { color: var(--ink); font-weight: 600; }
  .k-brief .actions { margin-block-start: 0.5rem; }

  /* パンくず */
  .crumb {
    display: flex; flex-wrap: wrap; align-items: baseline;
    font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-faint);
    padding-block-start: 1.25rem;
  }
  .crumb li + li::before { content: "／"; margin-inline: 0.55rem; color: var(--line); }
  .crumb a { color: var(--ink-quiet); text-decoration: none; }
  .crumb a:hover { color: var(--flame); }

  /* 下層ページの見出し */
  .page-head { padding-block: clamp(2.25rem, 6vw, 3.5rem) clamp(2.5rem, 6vw, 4rem); }
  .page-head h1 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.65rem, 4.2vw, 2.6rem);
    letter-spacing: 0.12em; line-height: 1.6; text-wrap: balance;
    margin-block: 0.9rem 1.4rem;
  }
  .page-head .lead { max-width: var(--measure); color: var(--ink-quiet); font-size: 0.9375rem; }
  .page-head .actions { margin-block-start: 2rem; }
  .page-head .hero-facts { margin-block-start: 1.6rem; }

  /* 用途別カード */
  .cases {
    display: grid; gap: 1px; background: var(--line-soft);
    border: 1px solid var(--line-soft); grid-template-columns: 1fr;
  }
  @media (min-width: 46rem) { .cases { grid-template-columns: repeat(2, 1fr); } }
  .case { background: var(--ground-2); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.65rem; }
  .case h3 {
    font-family: var(--font-display); font-weight: 400;
    font-size: 1.125rem; letter-spacing: 0.12em; line-height: 1.5;
  }
  .case p { font-size: 0.875rem; line-height: 1.95; color: var(--ink-quiet); }
  .case .calc {
    margin-block-start: auto; padding-block-start: 0.8rem;
    border-block-start: 1px solid var(--line-soft);
    font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--flame-soft);
    font-variant-numeric: tabular-nums;
  }

  /* 持ち込みリスト */
  .bring { display: flex; flex-direction: column; gap: 1rem; }
  .bring li {
    display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.9rem;
    font-size: 0.875rem; line-height: 1.9; color: var(--ink-quiet);
  }
  .bring .yn { font-family: var(--font-display); font-size: 1rem; color: var(--flame); padding-block-start: 0.1rem; }
  .bring strong { color: var(--ink); font-weight: 600; }

  /* ページ末の回遊 */
  .next-pages {
    display: grid; gap: 1px; background: var(--line-soft);
    border: 1px solid var(--line-soft); grid-template-columns: 1fr;
  }
  @media (min-width: 46rem) { .next-pages { grid-template-columns: repeat(2, 1fr); } }
  .next-pages a {
    background: var(--ground-2); padding: 1.6rem 1.4rem; text-decoration: none;
    display: flex; flex-direction: column; gap: 0.5rem; transition: background-color 0.25s;
  }
  .next-pages a:hover { background: var(--surface); }
  .next-pages .t { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: 0.1em; }
  .next-pages .t::after { content: " →"; color: var(--flame); }
  .next-pages .d { font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.85; }

  /* 本文＋図版の2カラム */
  .two-col { display: grid; gap: clamp(2rem, 5vw, 3.25rem); align-items: start; }
  @media (min-width: 54rem) { .two-col { grid-template-columns: 1.05fr 0.95fr; } }

  /* 出典リスト */
  .source-list { display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.8125rem; line-height: 1.9; color: var(--ink-faint); }
  .source-list li { padding-inline-start: 1.1rem; position: relative; }
  .source-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.85rem; inline-size: 0.45rem; block-size: 1px; background: var(--line); }
  .source-list a { color: var(--ink-quiet); }
  .source-list a:hover { color: var(--flame); }

  .note-after { margin-block-start: 1.75rem; }