@charset "UTF-8";
/*
 * My Style Design LP — 実装CSS
 *
 * 🔴 色・余白・書体は tokens.css の変数のみを使う（HP化5原則⑤）。生の値を書かない
 * 🔴 CSS規約：最小フォント 14px／px は偶数のみ／コントラストAA（新規制作で担保）
 * 🔴 SPファースト：375px で組み、768px 以上（--breakpoint-switch）で展開する
 */

/* ── リセット（最小限） ───────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--font-body-tracking);
}

img,
picture,
svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--font-heading-tracking);
  line-height: var(--line-height-tight);
}

p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* 🔴🔴 **遅延も止める**（2026-09-14 追加）。⚠ **`duration` だけでは足りない**＝
       `transition-delay` / `animation-delay` は別プロパティなので残り、
       **動きは消えたのに「順番に遅れて出てくる」だけが残る**（2026-09-14 に 07 のタブ切り替えで実測＝
       3枚目が 0.16s 待たされていた）。
       ⚠ **影響はページ全体**＝FVのマスク表示の段差（`.c-mask:nth-child(n)` の 150ms/360ms）も同時に無効になる。
          それが `prefers-reduced-motion` の正しい振る舞い（段差も「動き」の一部）。 */
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
}

/* ── レイアウト ───────────────────────────────── */
.l-main { display: block; }

.l-container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-gutter-sp) * 2);
  margin-inline: auto;
  padding-inline: var(--container-gutter-sp);
}

@media (min-width: 768px) {
  .l-container {
    max-width: calc(var(--container-max) + var(--container-gutter-pc) * 2);
    padding-inline: var(--container-gutter-pc);
  }
}

/* ── ユーティリティ ────────────────────────────── */
.u-skip {
  position: absolute;
  left: -9999px; /* px-ok: 画面外退避の定型 */
  top: 0;
  z-index: var(--z-drawer);
  background: var(--color-bg);
  padding: var(--space-sm) var(--space-md);
}
.u-skip:focus { left: 0; }

.u-visually-hidden {
  position: absolute;
  width: 1px; /* px-ok: visually-hidden の定型 */
  height: 1px; /* px-ok */
  margin: -1px; /* px-ok */
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);   /* 2026-09-26 旧 clip: rect(0 0 0 0)＝非推奨・区切りが空白（W3C 警告）→ 現行の書き方 */
  white-space: nowrap;
  border: 0;
}

/* [sp-br] ショートコードが出す改行＝SPだけ効かせる（inc/blocks.php）。
   🔴 PC で消すのは display:none。<br> は属性を持たない前提で組まない＝クラスは出力時に付く */
@media (min-width: 768px) {
  .u-br-sp { display: none; }
}

/* 仮素材（グレー枠）と分かるようにしておく＝差し替え漏れを画面でも気づける */
.is-placeholder { outline: 1px dashed var(--color-line); }

/* ── コンポーネント: CTAボタン（SPEC §5.3＝黒ベタ×白文字・LINE緑は使わない） ── */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-xl);
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: opacity var(--motion-dur-fast) var(--motion-ease);
}

/* 副ボタン＝白面＋黒の輪郭線（SPEC §5.3 の「副ボタン＝輪郭線」の非反転版）。
   🔴 背景を透明にしない＝FVの写真が透けて文字が濁る */
.c-btn--ghost {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-text);
}
/* 🔵 副ボタンの三角（2026-09-19 ユーザー指示）。**向きはリンク先で決まる**＝ページ内（#…）は下・別ページは右。
   色は currentColor＝ホバーで白黒が反転しても三角も一緒に反転する。
   ⚠ FV「料金表を見る」は文字の「▾」だったのをこれに置き換えた（sec-fv.php）＝二重にしない */
.c-btn--ghost::after {
  content: "";
  flex: none;
  width: 6px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.c-btn--ghost[href^="#"]::after {
  width: 10px;
  height: 6px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.c-btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.c-btn__icon { flex: none; }
/* 🔵 「LINEで無料相談する」の右の三角（2026-09-19 ユーザー指示）＝FV の主ボタン・SPドロワーの2つ。
   🔄 同日 細い矢印（→）から **副ボタンの右向き三角（.c-btn--ghost::after）と同じ形**に変更（ユーザー指示）。色は currentColor
   🔄 同日 ヘッダー／サイドバーの LINE・帯（06b・08b）の LINE とメール・14 の LINE にも追加（ユーザー指示）＝ブロックのボタンは ::before が LINE アイコン、::after が三角 */
.p-fv__cta::after,
.l-drawer__cta::after,
.l-header__cta::after,
.p-entry-side__line::after,   /* 2026-09-19 記事の右サイドバーの CTA＝左サイドバーと同じ三角 */
.p-band__actions .wp-block-button__link::after,
.p-cta__line .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 6px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ── 演出: テキストのフェード表示（IO＋CSS。🔴 JS無効時は最初から見える側に倒す） ── */
.js .js-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-dur-slow) var(--motion-ease),
              transform var(--motion-dur-slow) var(--motion-ease);
}
.js .js-reveal.is-visible { opacity: 1; transform: none; }

/* ── 演出: テキストがマスクで開く（下から立ち上がる） ──
   泊さんが imayo.co.jp で挙げた「テキスト表示のアニメーション」に対応（ヒアリング Q23④）。
   🔴 親はフェードさせない＝子の行が上がるだけにする（2つ重ねると狙いがぼやける） */
.js .js-reveal--mask { opacity: 1; transform: none; }

.c-mask {
  display: block;
  overflow: hidden;
  /* 明朝の字面が上下で切れないための逃げ（相殺するので見た目の位置は変わらない） */
  padding-block: 2px;
  margin-block: -2px;
}
.js .js-reveal--mask .c-mask__inner {
  display: block;
  transform: translateY(110%);
  transition: transform var(--motion-dur-slow) var(--motion-ease);
}
.js .js-reveal--mask.is-visible .c-mask__inner { transform: none; }
.js .js-reveal--mask .c-mask:nth-child(1) .c-mask__inner { transition-delay: 150ms; }
.js .js-reveal--mask .c-mask:nth-child(2) .c-mask__inner { transition-delay: 360ms; }

/* ── ローディング（ロゴの筆跡・inc/loader.php／流れは main.js runLoader） ──
   🔴 幕は <html class="is-loading"> のときだけ出す＝JSが動かない・2回目以降・reduced-motion では最初から出ない。
   🔴 ヘッダーのロゴは幕のあいだ隠す＝最後に幕のロゴがちょうど重なる位置へ移ってから入れ替える
   z＝モーダル（drawer+10）より前 */
.p-loader { display: none; }
/* 🔴 幕のあいだも overflow は触らない＝スクロールバーを出したままにする（スクロール操作は main.js が止める）。
   2026-09-19 ユーザー指摘「定位置に戻った後、挙動がバグる」＝旧実装は body に overflow:hidden →
   幕が外れた瞬間にスクロールバーが現れて **幅 1200→1185px**、FV の文字・写真・ボタンが一斉に横へずれて組み直されていた（実測）。
   ⚠ `html { overflow:hidden; scrollbar-gutter:stable }` でも幅は確保されなかった（Chrome・実測）＝CSS では止めない。
   ⚠ ヘッドレス Chrome は既定でスクロールバーを出さない＝**`--hide-scrollbars` を外して撮らないと再現しない** */
.is-loading .p-loader,
.p-loader.is-leaving {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;  /* 押すと飛ばせる */
}
.p-loader.is-leaving { opacity: 0; transition: opacity var(--motion-dur-base) var(--motion-ease); }
.p-loader.is-gone { display: none; }

.p-loader__bg {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  transition: opacity var(--motion-dur-slow) var(--motion-ease);
}
.p-loader.is-move .p-loader__bg { opacity: 0; }

/* 🔴 正方形（左 279.5 / 405.23）を画面の中央に置く＝全体を右へ 15.5% ずらす（弧は右へはみ出す）。
   移動時は JS が translate＋scale を足す（transform-origin は左上＝ヘッダーのロゴと左上で合わせる） */
.p-loader__logo {
  position: relative;
  width: auto;
  height: 40vw;              /* SP：正方形の一辺＝画面幅の約4割 */
  overflow: visible;
  fill: var(--color-text);
  transform: translateX(15.5%);
  transform-origin: 0 0;
  transition: transform var(--motion-dur-slow) var(--motion-ease);
}
@media (min-width: 768px) {
  .p-loader__logo { height: clamp(160px, 30vh, 280px); }  /* PC：一辺＝画面の高さの約3割 */
}

/* ① 筆跡＝中心線のマスクを 0→1 へ。線形に近い曲線＝ペンの速さを一定に見せる */
.p-loader__pen { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.p-loader.is-draw .p-loader__pen {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2100ms cubic-bezier(0.4, 0, 0.6, 1);  /* 2026-09-19 900→1400→2100ms（ユーザー指示「少しゆっくり」→「完了を5.0秒に」） */
}
/* ② 三角形が黒で満ちる（白い三角形の上に本物のロゴ＝重なった「my」が白へ抜ける） */
.p-loader__fill { opacity: 0; transition: opacity var(--motion-dur-mid) var(--motion-ease); }
.p-loader.is-fill .p-loader__fill { opacity: 1; }
/* ③ MY STYLE / DESIGN */
.p-loader__text {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--motion-dur-mid) var(--motion-ease),
              transform var(--motion-dur-mid) var(--motion-ease);
}
.p-loader.is-text .p-loader__text { opacity: 1; transform: none; }

.l-header__logo { transition: opacity var(--motion-dur-fast) var(--motion-ease); }
.is-loading .l-header__logo { opacity: 0; }

/* ── 02 ファーストビュー（WF §02＝7要素・全面背景・ベールでAA担保） ── */
/* FVの高さ（2026-09-25）＝既定は画面の高さ。main.js が開いたときの実測 px で上書きする（下の .p-fv__inner の注記）。
   ⚠ var() の中で未対応の単位を使うと宣言ごと無効＝min-height が消える＝**既定値は @supports で分ける** */
:root { --fv-h: 100vh; }
@supports (height: 100svh) { :root { --fv-h: 100svh; } }
.p-fv { position: relative; overflow: hidden; }

.p-fv__bg,
.p-fv__veil { position: absolute; inset: 0; }

.p-fv__bg img {
  position: absolute;
  top: -48px;                       /* パララックス移動ぶんの余寸（main.js の MAX と対） */
  left: 0;
  width: 100%;
  height: calc(100% + 48px);
  object-fit: cover;
}

/* ベールの濃淡は --color-veil から導出する（生の色値を書かない） */
.p-fv__veil {
  --veil-dense: var(--color-veil);
  --veil-mid: color-mix(in srgb, var(--color-veil) 55%, transparent);
  --veil-thin: color-mix(in srgb, var(--color-veil) 28%, transparent);
  /* SP: 上下を濃く・中央の帯を薄く＝名刺そのものを見せる（WF §02） */
  background: linear-gradient(
    to bottom,
    var(--veil-dense) 0%, var(--veil-dense) 36%,
    var(--veil-thin) 52%, var(--veil-thin) 68%,
    var(--veil-dense) 84%, var(--veil-dense) 100%
  );
}

.p-fv__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 🔄 2026-09-25 SPも高さ 100svh（泊さんご依頼）。⚠ 伸びた分は**下に溜める**＝中身は上寄せのまま・帯（__window）は24px固定のまま。
     旧＝自然高（09-06 実機確認「背の高い画面で中央の帯が間延びする」）。比較（390×844）＝中央寄せはヘッダー下に約130pxの空きと
     名刺が文字の下に隠れる／帯を伸ばすとサブとチップの間が空き名刺がチップの下に入る／下に溜めるとCTAの下に名刺が見える＝採用。
     iPhone SE（375×667）は中身（679px）が画面より高い＝変化なし。svh＝ツールバー表示時の高さ＝スクロールで高さが跳ねない
     🔄 2026-09-25（2回目の修正依頼）**高さは `--fv-h`＝開いたときに main.js が測った px で固定**。
     ⚠ **LINE内ブラウザ（iOS・Android とも）では svh が固定されない**＝LINE のバーが隠れると画面の高さに追従して FV が伸び、
        背景写真（cover）も拡大していた（泊さん実機。ローカルでは高さだけ 700→800 に変えて再現＝FV 700→800・写真 748→848）。
        Safari／Chrome は svh を固定するので起きない。原因は WebView を載せたアプリ側（WWDC22＝アプリが最小／最大の範囲を WebKit に伝える必要）。
     🔵 JSが無い・動く前は `--fv-h` の既定値（100svh、非対応なら 100vh）＝従来どおり */
  min-height: var(--fv-h);
  padding: calc(var(--header-h-sp) + var(--space-xl)) var(--container-gutter-sp) var(--space-2xl);
}

.p-fv__label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--font-heading-tracking);
}

.p-fv__title {
  margin-top: var(--space-md);
  /* ⚠ WFの階段は「SP 28px」だが、確定H1の2行目12字は 28px×字間0.1emで366px＞版面335px（375px実測）。
     見切れる事故を優先して1段下げる＝24px。PCは指定どおり40px */
  font-size: var(--font-size-xl);
}
/* 🔄 2026-09-25 SPを少し大きく（泊さんご依頼）＝26px。ただし2行目12字は 26px×1.1＝343px で、
   375px（版面335）では「私のスタイ／ル。」と折れる（実測）＝入る幅（343＋ガター40＝384px〜）だけ上げる。
   384px未満は24pxのまま。可変値（clamp）は半端なpxになる＝偶数px規約に反するので使わない */
@media (min-width: 384px) {
  .p-fv__title { font-size: 26px; }
}

.p-fv__sub {
  margin-top: var(--space-xl);       /* メインと近接させない（「私が選ぶ」×「各種デザインから」の誤読を切る） */
  /* 🔄 2026-09-25 SPは16→14px（ユーザー判断）＝H1との比を 1.5→約1.9 にしてタイトルを大きく見せる。PCは16pxのまま（下の768px〜） */
  font-size: var(--font-size-xs);
  /* 句読点（、。・）の後でだけ折る＝14pxだと「お届けま／で」「ご相／談」と語の途中で折れていた（360〜430px実測）。
     カスタマイザーの自由入力なので <br> で決め打ちできない。anywhere＝句読点のない長文に書き換えられても溢れさせない保険 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-fv__window { flex: 0 0 auto; height: 24px; }  /* 2026-09-06 ユーザー指定＝200pxは広すぎた */

.p-fv__chips {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--font-size-xs);
}
.p-fv__chips li { display: flex; align-items: center; padding: var(--space-sm) var(--space-2xs); }
/* 🔴 文言がカスタマイザーの自由入力になったため、マークアップ（u-nowrap）では折り返しを守れない。
   auto-phrase＝文節で折る／pretty＝最終行の孤立を避ける。どちらも非対応ブラウザでは通常の折り返しに戻るだけ */
.p-fv__chips li span {
  word-break: auto-phrase;
  text-wrap: pretty;
}
.p-fv__chips li + li { border-top: 1px solid var(--color-line); }

.p-fv__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.p-fv__cta { width: 100%; }
.p-fv__more { font-size: var(--font-size-sm); }

/* 上から順の段差フェード */
/* 上から順に開く。H1のマスク（150ms・360ms）の後ろに続ける */
.p-fv__sub.js-reveal     { transition-delay: 560ms; }
.p-fv__chips.js-reveal   { transition-delay: 720ms; }
.p-fv__actions.js-reveal { transition-delay: 880ms; }

@media (min-width: 768px) {
  .p-fv__veil {
    /* PC: 左が濃く右へ薄く＝名刺は右3割に見せる（WF §02） */
    background: linear-gradient(
      to right,
      var(--veil-dense) 0%, var(--veil-dense) 46%,
      var(--veil-mid) 64%, var(--veil-thin) 78%,
      transparent 100%
    );
  }
  /* 名刺を右寄りに見せる（WF §02「右3割」）。2400_04 の名刺は画中央＝クロップを全て右側から
     取ると名刺中心が画面の約56%に来る（1200px時・実測）。100%指定は逆に左へ寄る＝使わない */
  .p-fv__bg img { object-position: 0 50%; }
  .p-fv__inner {
    min-height: var(--fv-h);   /* 🔄 2026-09-25 SP と同じ＝main.js が固定した高さ（LINE内ブラウザ対策） */
    justify-content: center;
    /* テキスト左寄せ＝左余白 120px・コンテンツ幅 820px（WF §02 の指定値） */
    padding: calc(var(--header-h-pc) + var(--space-2xl)) var(--container-gutter-pc) var(--space-3xl);
  }
  .p-fv__inner > * { max-width: var(--container-fv-text); }
  .p-fv__title { font-size: var(--font-size-4xl); }
  .p-fv__sub { margin-top: var(--space-2xl); font-size: var(--font-size-base); }
  .p-fv__window { flex: 0 0 auto; min-height: var(--space-2xl); }
  /* 主CTA・副CTAは横並び（2026-09-06 ユーザー指定。WFは「主CTAの直下」だった） */
  .p-fv__actions {
    flex-direction: row;
    align-items: center;
    margin-top: var(--space-xl);
  }
  .p-fv__cta,
  .p-fv__more { width: auto; min-width: 280px; }
}

/* 🔄 2026-09-19 768〜1023 はヘッダーがSPと同じ高さ（56px）になった＝FVの上余白もSPの高さで取る */
@media (min-width: 768px) and (max-width: 1023px) {
  .p-fv__inner { padding-top: calc(var(--header-h-sp) + var(--space-2xl)); }
}

/* 中間幅（1024px〜）＝WFのPC指定（左120px余白・チップ3カラム）はここから効かせる。
   768px で3カラムにすると1カラム189pxとなり「歌舞伎町なら直接お届／け」と1文字だけ折れる（実測） */
@media (min-width: 1024px) {
  .p-fv__inner { padding-left: 120px; }
  .p-fv__chips { display: flex; }
  .p-fv__chips li { flex: 1 1 0; padding: var(--space-md) var(--space-lg); }
  .p-fv__chips li + li { border-top: 0; border-left: 1px solid var(--color-line); }
}

.u-nowrap { white-space: nowrap; }

/* ── 01 ヘッダー（固定・WF §01） ─────────────────── */
.l-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  /* 🔴 ロゴが載る面は常に白〜ごく淡いグレー。FVが濃くても被せない */
  background: var(--color-bg);
  transition: background var(--motion-dur-fast) var(--motion-ease),
              box-shadow var(--motion-dur-fast) var(--motion-ease);
}
/* スクロール時＝白の半透明＋背景ぼかし（WFには描かない静止外の状態） */
.l-header.is-scrolled {
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--color-line);
}

.l-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h-sp);
  padding-inline: var(--container-gutter-sp);
}

/* SP: ロゴ中央（左は空けたまま余白に）／PC: 左 */
.l-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  line-height: 0;
}
/* 🔄 2026-09-25 SPもPCと同じ弧あり版（泊さんご依頼）＝高さ32のまま＝枠の大きさは弧なし版の頃と同じで、弧が右へ約14px伸びる */
.l-header__logo-img { height: 32px; width: auto; }

.l-header__nav,
.l-header__cta { display: none; }

.l-header__burger {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.l-header__burger-bar {
  display: block;
  width: 24px;
  height: 1px; /* px-ok: ハンバーガーの罫線＝1px（tokens.css の罫線と同じ扱い） */
  margin-inline: auto;
  background: var(--color-text);
  transition: transform var(--motion-dur-base) var(--motion-ease),   /* 🔄 2026-09-19 0.2→0.4s＝ドロワーの開閉と揃えた */
              opacity var(--motion-dur-base) var(--motion-ease);
}
.l-header__burger[aria-expanded="true"] .l-header__burger-bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.l-header__burger[aria-expanded="true"] .l-header__burger-bar:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
.l-header__burger:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* ── SPドロワー ───────────────────────────────── */
.l-drawer {
  position: fixed;
  inset: var(--header-h-sp) 0 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-3xl) var(--container-gutter-sp) var(--space-2xl);
  background: var(--color-bg);
  overflow-y: auto;
}
.l-drawer[hidden] { display: none; }
/* 🔄 2026-09-19 開閉に transition（ユーザー指示）＝フェード＋上から 8px 沈む・0.4s（--motion-dur-base）。
   ボタンのホバー（0.8s）より速い＝押してすぐ使うものは待たせない。開閉の状態クラスは main.js が付け外しする */
.l-drawer {
  transition: opacity var(--motion-dur-base) var(--motion-ease),
              transform var(--motion-dur-base) var(--motion-ease);
}
.l-drawer.is-opening,
.l-drawer.is-closing { opacity: 0; transform: translateY(-8px); }
.l-drawer__menu { display: flex; flex-direction: column; }
.l-drawer__menu li + li { border-top: 1px solid var(--color-line); }
.l-drawer__menu a {
  display: block;
  padding: var(--space-md) 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  letter-spacing: var(--font-heading-tracking);
  text-decoration: none;
}
.is-drawer-open { overflow: hidden; }

/* 🔄 2026-09-19 **768px → 1024px から**（ユーザー指示「768px でヘッダーが崩れている→ハンバーガーに」）。
   旧＝768〜1023 は横帯（ロゴ・ナビ5項目・CTA）で、ナビとCTAが1字ずつ縦に折れていた（iPad mini 768px 実測）。
   ➡️ **1023px まではSPと同じ＝ロゴ中央・ハンバーガー右・ドロワー**。1024px〜は下の左サイドバー。
   ⚠ 横帯の指定は 1024px〜ではサイドバーの土台として残っている（ナビ・CTA・PCロゴの表示切り替え）＝消さない */
@media (min-width: 1024px) {
  .l-header__inner {
    height: var(--header-h-pc);
    padding-inline: var(--container-gutter-pc);
  }
  .l-header__logo { position: static; transform: none; }
  .l-header__logo-img { height: 40px; }

  /* ナビは右寄せ＝CTAの手前に寄せる（2026-09-06 ユーザー指定。中央振り分けから変更） */
  .l-header__nav { display: block; margin-left: auto; margin-right: var(--space-xl); }
  .l-header__menu { display: flex; gap: var(--space-xl); }
  .l-header__menu a {
    font-size: var(--font-size-xs);
    letter-spacing: var(--font-heading-tracking);  /* ロゴの字間に合わせて広めに置く */
    text-decoration: none;
    padding-block: var(--space-xs);
    border-bottom: 1px solid transparent;
    transition: border-color var(--motion-dur-fast) var(--motion-ease);
  }

  .l-header__cta {
    display: inline-flex;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-xs);
  }
  .l-header__burger,
  .l-drawer { display: none; }
}

/* 🔴 ナビとCTAを 16px にするのは 1024px から（2026-09-06 ユーザー指定）。
   768〜1023 で 16px にすると **ナビ4項目とCTAが1行に収まらず、項目の内側で折り返す**
   （「料金」が 料/金、CTAが LINEで相談す/る に割れ、CTAが右端からはみ出す。実測）。
   ⚠ このとき **要素の top は全部同じまま**＝行数を数える機械検証では合格に見える。必ずスクショで見る。
   BUILD.md §3.1 の「WFのPC指定は 1024px から効かせる」と同じ切り分け。 */
@media (min-width: 1024px) {
  .l-header__menu a { font-size: var(--font-size-base); }
  .l-header__cta { font-size: var(--font-size-base); }
}

/* ── 01 ヘッダー → 左サイドバー（1024px〜） ─────────────
   🔴 2026-09-19 ユーザー判断＝「ロゴが四角なので横帯のヘッダーでは目立たない」。
      ロゴ 40→64px の拡大では「あまり変わらない」→ ChatGPT で3案（サイドバー／中央2段／エンブレム）を描き、
      **A 左サイドバー**を採用（`03_moodboard/_logo-layout/`）。WF §01 からの構造変更＝9/21 のご確認で伝える。
   🔴 **1024px から**＝BUILD §3.1「WFのPC指定は 1024px から効かせる」と同じ切り分け。
      768〜1023 は上の横帯のまま・SP は一切変えない。
   🔴 取り入れたのはサイドバーだけ（生成画像のピル型ボタン・特長3点の文字組み・写真は採らない＝ユーザー判断）。
   🔵 欧文ラベルはメニュー項目の「説明」欄（inc/setup.php）。サイドバー以外では出さない */
:root { --sidebar-w: 240px; }
.c-nav-en { display: none; }

@media (min-width: 1024px) {
  body { padding-left: var(--sidebar-w); }

  /* スクロール時の半透明＋ぼかしは横帯のためのもの＝サイドバーは常に白のまま */
  .l-header,
  .l-header.is-scrolled {
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--color-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 1px 0 0 var(--color-line);
  }
  .l-header__inner {
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: var(--space-3xl) var(--space-lg) var(--space-2xl) 40px; /* px-ok: 左40＝PCガターと同じ線 */
    overflow-y: auto;  /* 背の低い画面でCTAが切れないように */
  }
  /* 弧（y の払い）が右へ伸びるので、正方形は幅の約7割＝約110px */
  .l-header__logo-img { width: 160px; height: auto; }

  /* 🔄 2026-09-19 クリック範囲を広げた（ユーザー指示）＝ナビをサイドバーの幅いっぱいに伸ばし、a を display:block に。
     旧＝inline-flex で文字の幅だけ（「料金」は 59px 幅）。行間は gap 32 → gap 16＋上下 8 で同じリズムのまま */
  .l-header__nav { align-self: stretch; margin: var(--space-3xl) 0 0; }
  .l-header__menu { flex-direction: column; gap: var(--space-md); }
  .l-header__menu a {
    display: block;
    padding-block: var(--space-xs);
    border-bottom: 0;
  }
  .l-header__menu .c-nav-ja { margin-top: var(--space-2xs); }
  .c-nav-en {
    display: block;
    font-family: var(--font-heading-latin);
    font-size: var(--font-size-base);
    letter-spacing: 0.24em;  /* 06b の欧文ラベル CONTACT と同じ字間 */
    line-height: 1.2;
  }
  .c-nav-ja {
    display: block;
    font-size: var(--font-size-xs);
    letter-spacing: var(--font-body-tracking);
    color: var(--color-text-muted);
    line-height: 1.4;
  }

  /* 🔴 「LINEで相談する」を1行で収める＝16px だと2行に折れた（2026-09-19 実測）。
     🔄 同日 **ボタンだけ l-header__inner の左余白（40px）から外し、サイドバーの端から左右とも 24px**（ユーザー指示「大きく見せたい」）
        ＝左へ 16px はみ出させて幅 176 → 192px。ロゴ・ナビの左端（40px）は変えない */
  .l-header__cta {
    justify-content: center;
    width: calc(100% + var(--space-md));
    margin-left: calc(var(--space-md) * -1);
    margin-top: auto;
    padding-inline: var(--space-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  /* 上の横帯がなくなったぶん、FVの上余白からヘッダーの高さを外す。
     🔴 左の120px（WF §02）は「画面の左端から」の値＝サイドバーの外に120px足すと
        サイドバー240＋120で文字が画面の3割から始まる（実測 360px）。サイドバーからは64pxに詰める */
  .p-fv__inner { padding-top: var(--space-2xl); padding-left: var(--space-3xl); }
}

/* ── 01b 追従CTA（WF §01b / SPEC §5.2） ─────────────────
   SP＝下部の全幅固定バー（64px相当）／PC＝右下の固定バナー。
   🔴 高さは token から導出する（生の寸法を置かない）＝ --space-3xl の 64px。
   ⚠ 56px（48+8）から引き上げた（2026-09-06）。padding 8px×2 を引いたボタンの高さが
      40px → 48px になり、タップ目標の目安 44px を下回らなくなる。
      body の padding-bottom も同じ変数を見ているので追従する。 */
:root {
  --sticky-bar-h: var(--space-3xl);
  /* 🔄 2026-09-25 iPhone の安全領域（ホームバーの帯・横向きのノッチ）。header.php の viewport-fit=cover とセット＝無いと常に0。
     ⚠ 実機（泊さん確認）でバーのボタンが画面の角に欠け、ホームバーがボタンに重なっていた */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

.p-sticky-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-sticky-cta);
  /* 白い面はホームバーの下まで敷き、ボタンだけ安全領域の上に置く＝ボタンの高さは48pxのまま */
  height: calc(var(--sticky-bar-h) + var(--safe-b));
  padding: var(--space-xs) max(var(--space-xs), var(--safe-r)) calc(var(--space-xs) + var(--safe-b)) max(var(--space-xs), var(--safe-l));
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
}
.p-sticky-bar__btn {
  display: flex;
  width: 100%;
  height: 100%;
  padding-block: 0;
  font-size: var(--font-size-xs);
}

/* 🔴 JS無効時は出たまま（.js が付かない＝下の隠す指定が当たらない）。
   導線が消える側に倒さない（SPEC §5.2）。 */
.js .p-sticky-bar {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--motion-dur-base) var(--motion-ease),
              visibility var(--motion-dur-base) var(--motion-ease);
}
.js .p-sticky-bar.is-visible { transform: none; visibility: visible; }

/* 🔴 バーに最終行が隠れないよう、SPでは常に1本ぶんの余白を確保する。
   出たり消えたりする側で余白を足すとページが飛ぶので、表示条件に関係なく置く。
   ⚠ 15フッター実装時にこの指定と重ねない（SPEC §5.2 は「フッター下部に余白」と書いている）。 */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--sticky-bar-h) + var(--safe-b)); }
}

/* 🔄 2026-09-25 viewport-fit=cover の副作用対策＝横向きの iPhone で本文・ヘッダー・ドロワーがノッチの下へ入らないように。
   縦向きは左右の安全領域が0＝何も変わらない。⚠ 1023px まで＝1024px〜は body の左余白がサイドバー（--sidebar-w）の持ち物で、
   ここで上書きすると消える（横向き iPhone は最大 932px＝サイドバーにはならない） */
@media (max-width: 1023px) {
  body { padding-left: var(--safe-l); padding-right: var(--safe-r); }
  .l-header__inner,
  .l-drawer {
    padding-left: max(var(--container-gutter-sp), var(--safe-l));
    padding-right: max(var(--container-gutter-sp), var(--safe-r));
  }
}

/* PC右下の固定バナー。🔴 SPバーの表示条件の対象外＝×で閉じるまで出したまま */
.p-sticky-banner { display: none; }

@media (min-width: 768px) {
  .p-sticky-bar { display: none; }

  .p-sticky-banner {
    position: fixed;
    right: calc(var(--space-lg) + var(--safe-r));   /* 横向き iPhone のノッチ・ホームバーを避ける（2026-09-25） */
    bottom: calc(var(--space-lg) + var(--safe-b));
    z-index: var(--z-sticky-cta);
    display: block;
    width: 240px;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    /* 閉じるときだけ動く＝スクロール演出ではなく操作へのフィードバック。
       ⚠ --motion-ease は前半で一気に進む曲線で、200ms だと 90ms で opacity 0.04＝動きが見えない（実測）。
          400ms（追従バーと同じ --motion-dur-base）にして、消える過程が読める長さにする */
    transition: opacity var(--motion-dur-base) var(--motion-ease),
                transform var(--motion-dur-base) var(--motion-ease);
  }
  .p-sticky-banner.is-closing { opacity: 0; transform: translateY(8px); }
  .p-sticky-banner[hidden] { display: none; }

  .p-sticky-banner__close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-xl);
    height: var(--space-xl);
    padding: 0;
    color: var(--color-text);
    background: var(--color-bg);
    border: 0;
    cursor: pointer;
  }
  .p-sticky-banner__close:focus-visible { outline: 2px solid var(--color-text); outline-offset: -2px; }

  .p-sticky-banner__link {
    display: block;
    padding: var(--space-md);
    color: var(--color-text);
    text-decoration: none;
  }
  .p-sticky-banner__link:hover .p-sticky-banner__title { text-decoration: underline; }

  .p-sticky-banner__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: var(--space-sm);
  }
  /* 🔄 2026-09-19 画像だけのバナー＝余白なし・**切り取らず元の比率で全体を見せる**（画像の中の文字が欠けないように） */
  .p-sticky-banner__link--image { padding: 0; }
  .p-sticky-banner__link--image .p-sticky-banner__img {
    aspect-ratio: auto;
    object-fit: initial;
    margin-bottom: 0;
  }
  /* 🔄 2026-09-22 リンク先が空欄＝モーダルを開く <button>。見た目は <a> のときと同じにする（ボタンの既定装飾を外す） */
  .p-sticky-banner__link--button {
    width: 100%;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .p-sticky-banner__link--button:focus-visible { outline: 2px solid var(--color-text); outline-offset: -2px; }
  .p-sticky-banner__title {
    display: block;
    padding-right: var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    letter-spacing: var(--font-heading-tracking);
  }
  .p-sticky-banner__text {
    display: block;
    margin-top: var(--space-2xs);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
    color: var(--color-text-muted);
  }
}

/* ── セクション共通（ブロックで組む 03〜14 の器） ──────────
   🔴 ブロックの constrained レイアウトは contentSize（=880px）で最大幅を絞るだけで
      左右のガターを持たない。SPで端まで貼り付くので、セクション側で余白を持つ */
.p-sec { padding-inline: var(--container-gutter-sp); }

/* 🔴 **2026-09-11＝`.p-sec--surface`（#f5f5f5 の交互敷き）を廃止＝全セクション純白へ戻した**（ユーザー判断）。
   09-06 に「どのセクションも同じ顔に見える」ためリズム目的で入れたが、**判断の根拠が2つ間違っていた**：

   ⑴ **先方が見ていない色だった。**案B は 09-04 に「**純白 #ffffff × #111111**」で確定していて、
      `#f5f5f5` は 09-06 に実装側が足した**3色目**。ムードボードに無い面を本番に入れていた。
   ⑵ **参照サイトの実測と逆だった。**j-cat は `body` 純白で、リズムは「**暗い全面写真セクション**」で作っている
      （`03_moodboard/_reference/2026-08-30_j-cat_実測.md`）。**灰の交互敷きではない。**
      本LPは同じ仕掛けを既に持っている＝FV全面写真／ブリッジ帯（暗い写真・パララックス）／黒帯 06b・08b／
      写真の多い 05・07・09・10。**区切りの手段は足りていた。**

   🔴 **実害も出ていた**＝罫線 `#e6e6e6` が surface の上で沈み（白地との差 25→15／256階調）、
      06 だけ `color-mix` で罫線を暗くする**セクション固有の例外**を作っていた。面を1つ足すと
      罫線・箱の階層を全部作り直すことになる。**灰は当時2本だが、残りセクションを同じ規則で組むと6本**だった。
   🔴 **生成り・クリームも採らない**＝案A（生成り）は 09-04 に不採用が確定。加えて**商品が白い紙**（梅＝白名刺）で、
      背景に色みを載せると**白名刺が濁って見える**（09-11 に #faf9f7 で流し込んで実測）。

   ⚠ **これは寸法変更ではなく構造変更**＝§4.5 の分類どおり **9/21 のご確認でお伝えする**側。
   🔵 `--color-surface` トークンは `tokens.css`（生成物）に残るが**実装から参照しない**。手で消さない。 */

/* 🔴 **04⑥「透明性・誠実さ」の箱は罫線で持たせる。**
   `.p-reason__trust` は元から `border: 1px solid var(--color-line)` を持っていて、
   surface 時代はこの指定で**罫線を消して純白の面に置き換えていた**（灰の上では #e6e6e6 が沈むため）。
   🔴 **その上書きを外すと罫線が戻る**＝白地では箱が線で立つ。
   ⚠ 外さずに白地へ移すと **箱の境界が完全に消える**（09-11 に実測＝`_dev/_shots/cmp-trust.png` の中段）。
      WF §04 が指定した「⑥は全幅の箱」という構造そのものが無くなる。 */
@media (min-width: 768px) {
  .p-sec { padding-inline: var(--container-gutter-pc); }
}

/* 🔴 見出しは1文字だけ次行に落とさない（375pxで「…ありません／か」と割れた実測）。
   FVのチップと同じ受け方＝auto-phrase で文節、pretty で最終行の孤立を避ける。
   非対応ブラウザでは通常の折り返しに戻るだけ（壊れない） */
.p-sec__title,
.p-sec__subtitle {
  word-break: auto-phrase;
  text-wrap: pretty;
}

.p-sec__title {
  margin-bottom: var(--space-2xl);
  font-size: var(--font-size-xl);
}

/* 🔵 h2 の上の欧文ラベル（inc/section-en.php・2026-09-19 ユーザー指示）。
   型は 06b の `CONTACT`（.p-band__en）とサイドバーのナビ欧文に揃える＝Crimson Pro・字間 .24em */
.c-sec-en {
  margin-bottom: var(--space-sm);
  text-align: center;
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.24em;
  line-height: 1.2;
  color: var(--color-text-muted);
}
.p-cta .c-sec-en { color: var(--color-band-text-muted); }  /* 14 は黒面 */
@media (min-width: 768px) {
  .c-sec-en { margin-bottom: var(--space-md); font-size: var(--font-size-sm); }
}
.p-sec__subtitle {
  margin-block: var(--space-3xl) var(--space-lg);
  font-size: var(--font-size-lg);
}

/* ── 03 こんなお悩み／こんな方におすすめ（WF §03） ────────
   ⚠ 背景は白面（FVが写真全面のため、ここで一度静けさに戻す）
   🔴 アイコン・イラストは置かない */
.p-problem {
  padding-block: var(--space-4xl);
  background: var(--color-bg);
}

.p-problem__list { display: grid; gap: var(--space-md); }
.p-problem__list li {
  position: relative;
  padding-left: var(--space-xl);
  /* SP 14px / PC 16px（2026-09-06 ユーザー判断）。
     PC は1項目の幅が 416px あり、この器に14pxだと「注記」の見え方になるため 16px に上げる。
     SP は幅335px・実機で確認して 14px で可。
     ⚠ おすすめ側（.p-problem__recommend）は幅293pxのセル内ラベルなので全幅で 14px＝役割が違う */
  font-size: var(--font-size-xs);
}
/* □つきリスト（WF指定）。装飾アイコンではなくチェックボックスの記号として置く */
.p-problem__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-text);
}
/* 🔄 2026-09-25 **セクションに入ったら□にチェックが入る**（ユーザー指示）。
   🔵 □（::before）はそのまま＝チェックは ::after に描く（L字を45度回した線）。
   🔄 同日「大きく・目立つように」（ユーザー指示）＝6×10・2px（□の中に収まる）→ **10×22・4px で□の右上へはみ出す**
      （手でチェックを入れた形）。5案を SP・PC で撮って比較して決定。
   🔵 **書くように出す**＝clip-path で「短い払い → 長い払い」の順に見せる（前半40%で短い線・残りで長い線）。
   🔵 1項目ずつ 240ms ずらす＝`--i` は main.js が項目の順番を入れる（項目数は編集画面で変わりうる＝nth-child で固定しない）。
   🔴 本文（DB）は触っていない＝`.is-checked` は main.js が IntersectionObserver で付ける。**JSが無ければ□のまま**（従来どおり）。
   ⚠ `prefers-reduced-motion: reduce` は冒頭の一括指定で尺0・遅延0＝**チェックは付くが動かない**。 */
.p-problem__list li::after {
  content: "";
  position: absolute;
  left: 6px;                   /* 払いの起点が□の左下寄り・長い線が□の右上へ抜ける位置 */
  top: calc(0.5em - 10px);     /* □の上端（0.5em）から上へはみ出させる */
  width: 10px;
  height: 22px;
  border-right: 4px solid var(--color-text);
  border-bottom: 4px solid var(--color-text);
  transform: rotate(45deg);
  clip-path: polygon(0 70%, 0 70%, 0 100%, 0 100%);
}
.p-problem__list.is-checked li::after {
  animation: p-problem-check var(--motion-dur-base) linear forwards;
  animation-delay: calc(var(--i, 0) * 240ms);
}
@keyframes p-problem-check {
  0%   { clip-path: polygon(0 70%, 0 70%, 0 100%, 0 100%); }
  40%  { clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* 折り返しの1文は SPだけ「1つでも当てはまる方に、／読んでいただきたいページです」で割る。
   改行は本文中の `[sp-br]` が出す（PC では .u-br-sp が消える）。 */
.p-problem__bridge {
  margin-top: var(--space-2xl);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  letter-spacing: var(--font-heading-tracking);
}

/* SPは左揃え（□つきのお悩みリストと軸を合わせる）。768px 以上で中央へ */
.p-problem__recommend { display: grid; text-align: left; }
.p-problem__recommend li {
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-line);
  font-size: var(--font-size-xs);
}
.p-problem__recommend li:last-child { border-bottom: 1px solid var(--color-line); }

@media (min-width: 768px) {
  .p-problem__recommend { text-align: center; }
  .p-problem__list li { font-size: var(--font-size-base); }
  /* 受け止めから提案へ向きを変える1行＝18→24px（2026-09-06 ユーザー指定）。
     h2 40px と本文14px の間に置いて、白場を「間」として読ませる */
  .p-problem__bridge { font-size: var(--font-size-xl); }
  /* 上の1行が24pxに上がり、h3（20px）との差が4pxしかなくなった＝階層が読めない。
     PCだけ小見出しの上を 64→96px に広げ、余白で段を切る（2026-09-06 ユーザー指定） */
  /* さらに 20→28px（同日）。20px は 04 のカード見出しと同寸で、
     セクション内の第2階層として立っていなかった。**28px＝04 の⑥見出しと同じ段**に揃える
     ＝ h2 40 > 第2階層 28 > 転換の1行 24 > カード見出し 20 の4段になる */
  /* 🔄 2026-09-19 上を 96→128px（--space-5xl）＝ユーザー指示 */
  .p-sec__subtitle {
    margin-top: var(--space-5xl);
    font-size: var(--font-size-2xl);
  }
  /* 🔴 32px → 40px（2026-09-06）。880pxの版面に対して見出しが小さく、本文16pxと差が付かず
     全体が中間トーンになっていた。案B（純白×黒・明朝）は階調差で持たせる配色なので、
     ここを詰めると「シンプル」ではなく「のっぺり」に見える */
  .p-sec__title { font-size: var(--font-size-4xl); }
  .p-problem { padding-block: var(--space-4xl); }
  /* お悩みは2列×2行（WF §03） */
  .p-problem__list { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-2xl); }
}

@media (min-width: 1024px) {
  /* おすすめは横並び。🔴 5項目なので4カラムにしない（SPEC §5.6＝「3+2 か 5等分」）。
     🔄 5等分 → **3+2**（2026-09-06）。5等分は1列176pxで、最長の「予算は抑えたいが、既製の
     デザインでは物足りない方」が4行・隣は2行と落差が出ていた（実測）。3+2 なら1列約293pxで
     全項目2行以内に収まる。6カラムを敷き、各項目を2つぶん占めて2段目は中央に寄せる */
  /* 列の隙間は0＝縦罫線を詰めて格子に見せる／段の間だけ空ける（2026-09-06 ユーザー指定） */
  .p-problem__recommend { grid-template-columns: repeat(6, 1fr); row-gap: var(--space-lg); }
  .p-problem__recommend li {
    grid-column: span 2;
    border-top: 0;
    border-left: 1px solid var(--color-line);
    padding: var(--space-md) var(--space-lg);
  }
  /* 2段目は2等分で全幅に伸ばす。⚠ 中央寄せ（2/span2・4/span2）にすると
     1段目の右端1040pxに対し2段目が890pxで終わり、**外枠の右が閉じずに未完成に見えた**（実測） */
  .p-problem__recommend li:nth-child(4),
  .p-problem__recommend li:nth-child(5) { grid-column: span 3; }
  /* 各段の右端に閉じの罫線を入れる（1段目＝3つ目、2段目＝5つ目＝last-child） */
  .p-problem__recommend li:nth-child(3),
  .p-problem__recommend li:last-child { border-bottom: 0; border-right: 1px solid var(--color-line); }
}

/* ── ブリッジ帯（写真だけ・WF §04） ─────────────────────
   🔴 文字を乗せない。乗せると「見出しの型」になり、13セクションぶん写真が要る（WF §04）。
   🔴 ページ全体で **2本まで**。素材は黒基調＝白面を重ねる演出は帯が濃くないと見えない。
   ⚠ SPは 200px（浅い帯に白面を重ねると写真が細く潰れる・WF §04） */
.p-bridge { position: relative; height: 200px; overflow: hidden; }
/* パララックスの移動ぶん（±24px）の余寸を上下に持たせる。
   🔴 main.js の BRIDGE_MAX と対の値＝片方だけ変えると帯の端に地が出る（FVの -48px と同じ作り） */
.p-bridge__img {
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: calc(100% + 48px);
  object-fit: cover;
}

/* ── 04 選ばれる理由（WF §04） ─────────────────────────
   白面をブリッジに重ねる＝SP 左右12px内側・24px重ね／PC 左右80px内側・64px重ね（WF §04）。
   🔴 重ねるのはブリッジ直後のセクションだけ（ページ内で最大2箇所）。 */
.p-reason {
  position: relative;
  z-index: 1;
  margin-top: -24px;
  margin-inline: 12px;
  padding-block: var(--space-4xl);
  /* 🔴 **この背景は「地の色」ではなく「パネルの実体」＝省略できない。**
     このセクションは `margin-top: -24px` でブリッジ帯の写真に**重なる**ので、
     **不透明でないと重なった部分に写真が透ける**＝WF §04「白面をブリッジに重ねる」が成立しない。
     ⚠ 2026-09-11 に実際に踏んだ＝`.p-sec--surface` を廃止したとき、
       **このセクションの背景指定は surface の1行しか無かった**ため一緒に消え、
       computed が `rgba(0, 0, 0, 0)`（透明）になっていた（実測）。
     ⚠ さらに 09-06〜09-11 は **surface（#f5f5f5）の灰パネル**で、WF 指定の「**白**面」ですらなかった。
     ➡️ **`--color-bg` で明示する。**白地の上では見えないが、**写真に重なる24px/64pxでだけ効く**のがこの指定の役目。
     🔵 白パネル×暗い写真は灰パネルより明暗差が大きい＝**案Bの純白のほうがこの重ねには合っている。** */
  background: var(--color-bg);
}

/* ⚠ ブロックの flow レイアウトが子に付ける既定マージンを止める（gap で持つため） */
.p-reason__list > * { margin-block-start: 0; }

.p-reason__list { display: grid; }

/* カードの区切りは細い罫線のみ＝🔴 アイコン・番号飾りは置かない（WF §04） */
.p-reason__item {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-line);
}
.p-reason__item:last-child { border-bottom: 1px solid var(--color-line); }
/* ⚠ 3列（1列293px）だと「LINEで、すぐ返ってきま／す」と1文字落ちる（実測）。
   ⚠ Safari は auto-phrase 未対応＝**保険であって保証ではない**。確定文言（9/10着）が来たら
      375/1200 で必ず目視し、割れる行は `[sp-br]` で切る */
.p-reason__title,
.p-reason__trust-title {
  word-break: auto-phrase;
  text-wrap: pretty;
}
.p-reason__title {
  font-size: var(--font-size-md);
  /* ⚠ 見出しの既定字送り 0.10em は **h2（40px）用**。20px の小見出しに当てると
     1文字あたり2px増え、261pxのカードで 11字/行 まで落ちる（実測）。本文と同じ 0.04em にする */
  letter-spacing: var(--font-body-tracking);
}
.p-reason__text {
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
}

/* ⑥ だけ形が違う＝「①〜⑤を隠さず出していること」自体が中身。裏づけ5点とセットで置く（WF §04） */
/* ⑥ だけ形が違う＝「①〜⑤を隠さず出していること」自体が中身。
   🔴 WF §04 の指定は「**他より大きく・全幅**」で役割の違いを示す、というもの。
      2026-09-06 の初回実装は **見出し20px＝①〜⑤と同一**で、格が付いていなかった（→ PC 28px / SP 24px）。
   ⚠ 「全幅」は**コンテンツ幅880pxいっぱい**の意味（①〜⑤が3列に割れるのに対して）＝すでに満たしている。
      パネル端（1040px）まで伸ばすことではない。伸ばそうとしても、ブロックの constrained レイアウトが
      直下の子に `margin-left/right: auto !important` を当てるため**負のマージンは効かない**（実測）。
   🔴 黒ベタにはしない＝帯は 06b・08b の2本まで（SPEC §5.4）。ここを黒にすると3本目になる。 */
.p-reason__trust {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
}
.p-reason__trust > * { margin-block-start: 0; }
/* ①〜⑤（PC 20px）より1段上に置く＝h2 40 > ⑥ 28 > カード 20 の3段にする */
.p-reason__trust-title { font-size: var(--font-size-xl); }
.p-reason__trust-text { margin-top: var(--space-sm); font-size: var(--font-size-xs); }
.p-reason__proof { margin-top: var(--space-lg); }
.p-reason__proof li {
  padding-block: var(--space-sm);
  border-top: 1px solid var(--color-line);
  font-size: var(--font-size-xs);
}

@media (min-width: 768px) {
  .p-bridge { height: 320px; }   /* 2026-09-06 ユーザー指定（WF §04 の240pxから変更） */
  .p-reason {
    margin-top: -64px;
    margin-inline: 80px;
    padding-block: var(--space-4xl);
  }
  /* ⚠ カードの一文（.p-reason__text）は PC でも 14px のまま＝器が299pxで、
     16px だと17字/行。見出し20pxとの比も1.25でほぼ同格になり、カード内の主従が消える。
     ⑥側は器が384px／576pxあり、面の主張そのものなので 16px（2026-09-06 ユーザー判断）。 */
  .p-reason__trust-text,
  .p-reason__proof li { font-size: var(--font-size-base); }
  .p-reason__title { font-size: var(--font-size-lg); }
  .p-reason__trust { padding: var(--space-xl); }
  .p-reason__trust-title { font-size: var(--font-size-2xl); }
}

@media (min-width: 1024px) {
  /* ①〜⑤は3列。🔴 下段2枚は**中央寄せ**（WF §04）＝2列×2行で5枚にすると最後の1枚が取り残される。
     ⚠ 03 は罫線が全高で通る格子だったので中央寄せだと外枠が閉じず全幅に伸ばしたが、
        ここは1枚ずつが独立した罫線つきカードなので、中央寄せでも欠けに見えない */
  .p-reason__list {
    grid-template-columns: repeat(6, 1fr);
    /* 48px×2 のギャップは 880px から 96px を奪う＝1カラム 261px。40px に詰めて幅を戻す */
    column-gap: var(--space-xl);
    /* 🔴 0 だと上下の段が接する（実測 0px）。段の間を空ける */
    row-gap: var(--space-2xl);
  }
  .p-reason__item { grid-column: span 2; }
  .p-reason__item:nth-child(4) { grid-column: 2 / span 2; }
  .p-reason__item:nth-child(5) { grid-column: 4 / span 2; }
  .p-reason__item:last-child { border-bottom: 0; }

  /* ⑥は全幅の帯＝左に見出し／右に裏づけ5点（WF §04） */
  .p-reason__trust {
    display: grid;
    /* 左＝見出し＋1文／右＝5行。等分だと左が余り右が詰まる＝内容量に合わせて 2:3 に振る */
    grid-template-columns: 2fr 3fr;
    gap: var(--space-3xl);
    padding-block: var(--space-3xl);
  }
  /* ⚠ 左は見出し＋1文、右は5行＝箱の高さは右で決まる。左を上寄せにすると
     箱の左下に 200px 以上の空白が溜まる（実測）。縦中央に置いて釣り合わせる */
  .p-reason__trust-head { align-self: center; }
  .p-reason__proof { margin-top: 0; }
}

/* ── 05 料金プラン（WF §05） ─────────────────────────
   🔴 面は白（04＝surface の次＝交互に敷く・BUILD §4.5）。
   🔴 帯＝紹介／表＝比較 で役割を分ける（WF §05）。ジグザグにすると料金の位置が左右にブレて
      目が縦に走らないため、比較は表に寄せる。
   🔴 枠線は作らない＝罫線1本だけで区切る（WF §05「枠線なし・罫線1本」）。 */
.p-price {
  padding-block: var(--space-4xl);
  background: var(--color-bg);
}
/* ブロックの flow レイアウトが子に付ける既定マージンを止める（04 と同じ扱い） */
.p-price__plans > *,
.p-price__plan > *,
.p-price__body > *,
.p-price__kako > *,
.p-price__kako-list > *,
.p-price__kako-item > * { margin-block-start: 0; }

/* 条件（100枚・税込）はここで1回言い切る。WF §05＝条件を書くこと自体が差別化。
   ⚠ 負のマージンは `.p-sec__title` の下余白 48px を打ち消して h2 の直下（8px）に付けるため
      ＝この1行は独立した段落ではなく**見出しの添え書き**。h2 の下余白を変えたらここも見る */
.p-price__lead {
  margin-top: calc(var(--space-2xl) * -1 + var(--space-xs));
  /* 🔄 2026-09-19 SPの margin-bottom（--space-2xl）を削除（ユーザー指示）。PCは下の 768px〜 の指定（--space-3xl）のまま */
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ── プランの帯3本（梅→竹→松・安い順） ── */
.p-price__plan { padding-block: var(--space-xl); }   /* 🔄 2026-09-19 SP 48→32px（ユーザー指示）。PCは 768px〜 の指定（64px） */
.p-price__plan + .p-price__plan { border-top: 1px solid var(--color-line); }

/* 🔴 写真は `wp:image` ブロック（2026-09-06）＝出力は figure.wp-block-image。
   core の block-library が `.wp-block-image { margin: 0 0 1em }` を当てるので打ち消す。
   ⚠ `.p-figure` は [msd_bridge] 以外で使わなくなったが、ブリッジ用に残す。 */
.p-figure,
.p-price figure.wp-block-image { margin: 0; }
.p-price__photo img { width: 100%; }

.p-price__body { margin-top: var(--space-md); }

/* 🔴 プラン名は **英字が見出し**（⑤A82「名前は変えたい／文章にならずに分かりやすい感じが良い」
   ＋最終行「SIMPLE・TEMPLATE・CUSTOM」）。
   ⚠ 和文を見出しにすると「テンプレートからお選びいただく（竹）」＝**文章**になり、
     ご回答をそのまま裏切る。和文の内容は下段の一文に落とす（SPEC §3.1 候補A）。
   🟢 案Bの欧文セリフ Crimson Pro をここで初めて使う（BUILD §10「Crimson Pro が0か所」の解消）。 */
.p-price__name {
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xl);
  letter-spacing: var(--font-heading-tracking);
  line-height: var(--line-height-tight);
}
/* 内容の一文＝プラン名の従。和名（松竹梅）は括弧内に残す（SPEC §3.1） */
.p-price__desc {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-xs);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.p-price__fee {
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  letter-spacing: var(--font-heading-tracking);
  line-height: var(--line-height-tight);
}
/* 🔴 ⑤A83「価格を細身のフォントで配置すると…チープに見えない」＝**数字だけ Crimson Pro 400**。
   和文（円・〜）は Shippori Mincho B1 のまま＝欧文セリフに CJK グリフが無く、
   まとめて当てると「円」が未指定のセリフに落ちて制御できなくなる。
   ⚠ 読み込んでいるウェイトは Shippori 500 / Crimson 400・500（inc/setup.php）＝
     和文側を細くする手は無い。**細身は欧文側で作る**のがこの構成での唯一の解。 */
.p-price__amount {
  font-family: var(--font-heading-latin);
  font-weight: 400;
}
/* 条件は金額と同じ視界に置くが、同じ大きさでは出さない（金額を読ませる） */
.p-price__unit {
  margin-left: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  letter-spacing: var(--font-body-tracking);
  color: var(--color-text-muted);
}

/* 🔴 写真対応の有無はプランごとに必ず明記する（2026-08-24 決着＝白名刺のみ非対応） */
.p-price__note {
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  /* 🔴 CJK は既定でどの文字間でも折り返すため「…ご用意いた／だきます」と語の途中で割れる
     （2026-09-06 に PC 実測）。文節で折る＝セクション内の他要素（見出し・プラン名・内容）と同じ受け方。
     ⚠ Safari は auto-phrase 未対応＝**保険であって保証ではない**。文言側を短くするのが本筋（SPEC 参照） */
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ── 表（オプション・お支払い）＝罫線のみ・面や枠は作らない（WF §05） ──
   🔵 早見表（3プランの比較）は 2026-09-06 に廃止＝帯が同じ数字を出していて重複するため
      （🔴 寸法でなく**構造**の変更＝承認済みワイヤーからの逸脱・BUILD §4.5）。
   🔴 core/table の既定は td/th すべてに `border: 1px solid`＝**格子の枠が出る**。
      セレクタの詳細度が `.wp-block-table td`（0,1,1）と同じでは勝てないので、
      `.p-price table td`（0,1,2）で当てて**横罫線1本だけ**に戻す。 */
/* ⚠ 960px 幅いっぱいの表にすると、行の左端と右端が 700px 離れて「どの行の値か」を目で追えない。
   読ませる器（720px）に絞る。SPでは版面 335px のほうが狭いので効かない（実質PCだけの指定）。
   🔴 **オプション表は対象外**＝2カラムの中に入るので、カラム幅いっぱいに使う（下で戻す）。 */
.p-price figure.wp-block-table {
  margin: 0;
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.p-price__terms figure.wp-block-table { max-width: none; margin-inline: 0; }
/* ⚠ 2カラムに並べると、左（リスト）は見出し直下に罫線が来るのに、右（表）は罫線が無く
   1行目が 30px 下がって始まっていた（実測）。表にも上罫線を付けて**両列の1行目の高さを揃える**。 */
.p-price__terms .p-price__option tr:first-child th,
.p-price__terms .p-price__option tr:first-child td { border-top: 1px solid var(--color-line); }
/* ⚠ セルの左paddingぶん（8px）、右列だけ本文が見出しより内側に入っていた（実測 640 vs 632）。
   ⚠ 上下も、リストは 12px・表は PC で 16px＝**1行目のテキストが4pxずれる**（実測 4644 vs 4648）。
   🔴 詳細度を `.p-price .p-price__terms …`（0,2,2）まで上げる＝768px のメディアクエリにある
      `.p-price table th { padding: 16px 8px }`（0,1,2）が**後ろに書かれていて勝ってしまう**ため。
   列の左端と1行目の高さを、見出し・リスト・表・注記のすべてで1本に揃える */
.p-price .p-price__terms table th,
.p-price .p-price__terms table td { padding-block: var(--space-sm); }
.p-price .p-price__terms table th { padding-left: 0; }
.p-price table {
  width: 100%;
  border-collapse: collapse;
}
.p-price table th,
.p-price table td {
  padding: var(--space-sm) var(--space-2xs);
  border: 0;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--font-size-xs);
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}
/* 見出し列（オプション・お支払い）は幅を決めて折り返しを固定する */
.p-price__option th,
.p-price__pay th { width: 40%; }

/* ── 含まれるもの ── */
.p-price__included li {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--font-size-xs);
}
.p-price__included li:first-child { border-top: 1px solid var(--color-line); }

/* ── 含まれるもの ／ 別料金になるもの（対で読ませる） ──
   🔴 2026-09-06 に組み直し。直した実害は好みではなく**実測のズレ**：
      ⑴ リスト（wp:list＝960px）とオプション表（720px）で**左端も右端も合っていなかった**
      ⑵ 注記「特急と下記の加工は…」が x=120、説明対象の表が x=240＝**説明文と対象の左端が違う**
      ⑶ 10字の項目に 960px の罫線が付き、余白が「間」でなく「空き」に見えていた
   ➡️ 2つを1つの器に入れて**同じ幅・同じ左端**にし、PC では左右に並べて罫線の長さを内容に釣り合わせる。 */
.p-price__terms { margin-top: var(--space-4xl); }
@media (max-width: 767px) {
  .p-price__terms { margin-top: var(--space-2xl); }   /* 🔄 2026-09-19 SP 96→48px（ユーザー指示）。PCは96pxのまま */
}
.p-price__terms > * { margin-block-start: 0; }
.p-price__terms-col > * { margin-block-start: 0; }
.p-price__terms-col + .p-price__terms-col { margin-top: var(--space-4xl); }
@media (max-width: 767px) {
  .p-price__terms-col + .p-price__terms-col { margin-top: var(--space-2xl); }   /* 🔄 2026-09-19 SP 96→48px（ユーザー指示）。⚠ 元の指定より後ろに置く（同じ詳細度＝後勝ち） */
}
/* SPは中央揃え（他セクションの小見出しと揃える）。PCの2カラムでは左へ寄せる＝下の 1024 で上書き */
.p-price__terms-title {
  margin-block: 0 var(--space-lg);
  text-align: center;
}

/* 🔴 併用不可は「追加料金がかかる条件を明記する」（④A51）と同じ扱い＝見えるところに置く */
.p-price__caution {
  margin-top: var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ── 加工の紹介（⑤の下の階・独立セクションにしない） ──
   🔴 質感が商品なので写真を主役にする。金額のある3種だけを絵で出し、
      要相談の3種は末尾の一行に畳む（③お悩み「料金が分からない」と逆を向かせない）。 */
.p-price__kako { margin-top: var(--space-4xl); }
@media (max-width: 767px) {
  .p-price__kako { margin-top: var(--space-2xl); }   /* 🔄 2026-09-19 SP 96→48px（ユーザー指示）。PCは96pxのまま */
}
.p-price__kako-title {
  font-size: var(--font-size-lg);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.p-price__kako-lead {
  margin-top: var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.p-price__kako-list {
  display: grid;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}
.p-price__kako-photo img { width: 100%; }
.p-price__kako-name {
  margin-top: var(--space-sm);
  font-size: var(--font-size-md);
  letter-spacing: var(--font-body-tracking);
}
.p-price__kako-fee {
  margin-top: var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  letter-spacing: var(--font-heading-tracking);
}
.p-price__kako-more {
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .p-price { padding-block: var(--space-4xl); }
  /* 🔴 PC は h2 とリードの間を空ける（2026-09-06 ユーザー指示）。
     SP は 8px のまま＝版面が狭く、離すと見出しとリードが別のものに見える。
     ⚠ 間隔は `.p-sec__title` の下余白 48px との合算＝ここの負マージンを浅くして作る
     （h2 側を触ると 03・04 の見出しまで動く）。48 - 24 = **24px** */
  .p-price__lead {
    margin-top: calc(var(--space-lg) * -1);
    margin-bottom: var(--space-3xl);
    font-size: var(--font-size-base);
  }
  .p-price__fee { font-size: var(--font-size-2xl); }
  .p-price__unit,
  .p-price__note,
  .p-price__included li { font-size: var(--font-size-base); }
  .p-price__name { font-size: var(--font-size-2xl); }
  .p-price__desc { font-size: var(--font-size-base); }
  /* ⚠ core/table の既定（padding 0.5em）に勝つため、ここも `.p-price table` で当てる */
  .p-price table th,
  .p-price table td {
    padding: var(--space-md) var(--space-xs);
    font-size: var(--font-size-base);
  }
  /* ⚠ 768〜1023 は縦積みのまま。ただし写真を版面いっぱい（688px）に伸ばさない
     ＝帯1本が 668px 高くなり、セクション全体が SP より長くなる（実測 4349px）。
     PC の設計寸法 440px で止めて、テキストと同じ左の軸に置く */
  .p-price__photo { max-width: 440px; }
  .p-price__kako-title { font-size: var(--font-size-2xl); }
  .p-price__kako-lead { font-size: var(--font-size-base); }
  .p-price__kako-fee { font-size: var(--font-size-lg); }
  /* 加工3点は 768px から横並び（1列 216px＝質感が読める下限。縦積み3枚は帯が長くなりすぎる） */
  .p-price__kako-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}

/* 🔴 WF の「PC」指定＝1200px 前提（写真440px＋テキスト）。768〜1023 に当てると
   写真440＋余り200px でテキストが潰れるため、帯の2カラム化は 1024px から効かせる
   （BUILD §3.1 の全体規則と同じ扱い） */
@media (min-width: 1024px) {
  .p-price__plan {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: var(--space-2xl);
    align-items: center;
    padding-block: var(--space-3xl);
  }
  .p-price__body { margin-top: 0; }
  /* 🔵 竹（2本目）だけ左右を反転してリズムを出す（WF §05・PCのみ） */
  .p-price__plan:nth-child(2) { grid-template-columns: 1fr 440px; }
  .p-price__plan:nth-child(2) .p-price__photo { order: 2; }

  /* 「含まれるもの」と「別料金になるもの」を左右に並べる。
     ⚠ 2カラムにすると罫線が 448px＝項目の長さと釣り合う（960pxでは空きに見えた）。
     ⚠ 見出しは左揃えへ＝中央揃えのままだと列の中で浮く。
     ⚠ 各注記はそれぞれの列の中にあるので、説明対象と左端が自動で揃う（ズレの再発を構造で防ぐ） */
  .p-price__terms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
  }
  .p-price__terms-col + .p-price__terms-col { margin-top: 0; }
  .p-price__terms-title { text-align: left; }
  /* 列内では見出し列を広く取らない＝器が448pxで 40% だと値側が 269px になり
     「各プラン料金の2倍（素材はお任せいただきます）」が3行に割れる */
  .p-price__terms .p-price__option th { width: 38%; }
  .p-price__kako-list { gap: var(--space-2xl); }
}

/* ── 06 納期表（WF §06） ─────────────────────────────
   🔴 このセクションの成立条件＝**「当日／5営業日／1週間〜」の3段階が一目で入ること**。
      数字を主役にし、区分名と条件は本文サイズ（WF §06）。
   🔴 **面（カード・枠・箱）を作らない＝罫線だけ。** 直前の05が全体で最も重いブロックのため、
      ここでリズムを戻す。装飾アイコン（時計・カレンダー）も足さない。
   🔴 **2026-09-11＝地を純白に戻した**（`.p-sec--surface` 廃止）。これに伴い
      **このセクションだけ罫線を暗くしていた `color-mix` も撤去**し、素の `--color-line` に戻した。
      ⚠ あの混色は「#e6e6e6 が #f5f5f5 の上で沈む（差 25→15／256階調）」ための**灰の面が前提の例外**で、
        白地では差が 25 に戻るため**存在理由が消える**。残すと**このセクションだけ罫線が濃い**状態になり、
        03・04・05 と罫線の太さが揃わない。**面をやめたら、面のために作った例外も一緒に畳む。** */
.p-delivery {
  padding-block: var(--space-4xl);
}

.p-delivery__lead {
  margin-top: calc(var(--space-lg) * -1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* 🔴 SPは縦積み＝**表を横スクロールさせない**（閲覧3場面すべてスマホ）。
   行の区切りは罫線1本のみ（FVの即答チップと同じ受け方）。 */
.p-delivery__list { border-top: 1px solid var(--color-line); }
/* ブロックの flow レイアウトが子に付ける既定マージンを止める（04・05 と同じ扱い） */
.p-delivery__list > *,
.p-delivery__row > * { margin-block: 0; }
.p-delivery__row {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-line);
}

.p-delivery__k {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
/* 🔴 数字（＝日数）が主役。SP 28px／PC 40px（WF §06）。
   明朝で組む＝h2 と同じ系統にして「見出し級の情報」だと分かるようにする。
   ⚠ 05 の金額だけ Crimson Pro（細身）なのは ⑤A83 のご要望によるもので、ここには当たらない。 */
.p-delivery__d {
  margin-top: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}
/* 「1週間〜」の〜は同じ級数だと重い＝1段落として添える */
.p-delivery__tilde { font-size: var(--font-size-md); }

/* 🔴 条件の一文は**日数の真下**。別行・別ブロックへ逃がすと読み飛ばされ、
      条件なしで「当日」だけが伝わる（WF §06）。 */
.p-delivery__c {
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  /* 🔴 2026-09-11＝⑥A62 の3点を足して**条件の一文が2倍の長さになった**（2列目は4行）。
     CJK は既定でどの文字間でも折るため「…お日／にち」「…いただき／ます」と語中で割れた（375・1200 で実測）。
     05 `.p-price__note`・04 `.p-reason__title` と同じ受け方＝文節で折る。
     ⚠ **Safari は auto-phrase 未対応＝保険であって保証ではない。**閲覧3場面はすべてスマホ＝iOS が主戦場なので、
       割れて困る行は文言を短くするか `[sp-br]` で切る（本筋は文言側）。 */
  word-break: auto-phrase;
}

.p-delivery__note {
  margin-top: var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  /* ①の注記は⑥A62「ご依頼〜デザインご確認は3営業日以内」を足して3文になった＝`__c` と同じ扱い */
  word-break: auto-phrase;
}

/* ── 06b / 08b LINEのご案内帯（WF §06b・§08b） ──────────
   🔴 全幅の黒ベタ×白文字。ショートコードで本文へ差し込むため、
      constrained レイアウトの外＝`.l-main` の直下に出る（`.p-bridge` と同じ置かれ方）。
      横幅はここで自前に絞る。
   ⚠ **黒ベタの上なので罫線は白の透過**（WF §06b）。グレーの罫線をそのまま乗せない。
      `--color-band-line` はこの帯の中だけのローカル変数＝**`tokens.css` は手で編集しない**
      （生成物・BUILD §4.5）。 */
/* 🔄 2026-09-18＝14（`.p-cta`）も黒面にしたので、罫線と薄い文字の2変数だけ共有する（値を2か所に書かない） */
.p-cta {
  --color-band-line: color-mix(in srgb, var(--color-band-text) 28%, transparent);
  --color-band-text-muted: color-mix(in srgb, var(--color-band-text) 75%, transparent);
}
.p-band {
  /* 🔴 生の rgba を書かない＝案Bのパレット内の色（`--color-band-text`）を透過させて作る。
     `tokens.css` は build_design.py の生成物なので手で足せない（BUILD §4.5）。
     WF §06b の指定値は rgba(255,255,255,.28) で、下の color-mix はそれと同値。 */
  --color-band-line: color-mix(in srgb, var(--color-band-text) 28%, transparent);
  --color-band-text-muted: color-mix(in srgb, var(--color-band-text) 75%, transparent);
  background: var(--color-band-bg);
  color: var(--color-band-text);
  /* 🔴 2026-09-11＝2xl → 4xl（PC 5xl）。**ホテルライクは余白で格を作る**文法なのに、
     ページで唯一のCTAだけが他セクション（4xl〜5xl）より詰まっていた。 */
  padding-block: var(--space-4xl);
  padding-inline: var(--container-gutter-sp);
}
.p-band__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}
/* 🔴 06b はブロック（`wp:group`）になったので、**flow レイアウトが子に付ける既定マージン**を止める
   （03・04・05 と同じ受け方）。余白は下の各要素が自分で持つ。 */
.p-band__inner > * { margin-block: 0; }
/* 🔴 **CTAに見出しの階層が1つも無かった**（2026-09-11 実測）＝リードが 16px のゴシックで、
   下の即答3点（14px）とほぼ同寸だった。**明朝で見出し級に上げる**＝
   h2(PC40px) の一段下・04⑥(PC28px) の一段上に置き、「帯」ではなく「締めの階」にする。 */
.p-band__lead {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  line-height: var(--line-height-tight);
}

/* 🔵 欧文セリフのラベル（2026-09-11・`full` のみ）。案Bは「和文明朝＋**欧文セリフ**」だが
   Crimson Pro は 05 の金額でしか使っていなかった＝CTAで回収する。
   🔴 **構成案・WFに無い要素**＝BUILD §10 の「独断で入れない（要ご判断）」を入れる側で判断した。 */
.p-band__en {
  display: block;
  text-align: center;
  margin-bottom: var(--space-md);
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.24em;
  color: var(--color-band-text-muted);
}

/* 🔵 即答3点は **FVの即答チップと同じ型**＝罫線1本で挟んだ帯・カードにしない（WF §06b）。
   FVが「納期・金額・場所」なのに対し、ここは「無料・手間なし・速い」＝対になる。 */
.p-band__facts {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-band-line);
  border-bottom: 1px solid var(--color-band-line);
  font-size: var(--font-size-xs);
}
.p-band__facts li { display: flex; align-items: center; padding: var(--space-sm) var(--space-2xs); }
.p-band__facts li + li { border-top: 1px solid var(--color-band-line); }
/* 🔴 **2か所に当てる**＝06b はブロック（`wp:list` → `<li>` に直接テキスト）、
   08b は `band-line.php`（`<li><span>`）で**マークアップが違う**（2026-09-11 の06bブロック化以降）。
   ⚠ 片方だけに書くと、**もう片方で折り返しが語中で割れる**（Chrome/Edge）。 */
.p-band__facts li,
.p-band__facts li span { word-break: auto-phrase; text-wrap: pretty; }

/* 🔴 SPは全幅ボタンが2つ縦に並ぶ＝**塗りと輪郭の差と、順番でしか主従を示せない**（WF §06b）。
      LINE が必ず先。 */
/* 🔵 上下の間合いはリードを上げたぶん広げる（lg → 2xl）。 */
.p-band__facts { margin-top: var(--space-2xl); }

/* 🔴 余白は `__contact`（ボタン＋QRの外枠）が持つ＝`__actions` に margin を残すと
   PC で QR と縦位置がずれる（flex の行の中で子だけが下がる）。 */
.p-band__contact { margin-top: var(--space-2xl); }
.p-band__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* 🔴 **QRは PC（1024px〜）だけ**（2026-09-11 ユーザー判断）＝PC閲覧者はその場でLINEを開けない。
   768〜1023 で出さないのは内寸が足りないため（下の 1024 のブロックに実測を記載）。 */
.p-band__qr { display: none; }
/* 🔵 アドレスはテキストでも見せる＝コピーして使う方がいるため（WF §06b） */
.p-band__address {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-band-text-muted);
}

/* 黒ベタの上のボタン2種（SPEC §5.3 の反転）。🔴 LINEブランドの緑は使わない＝アイコンは白抜き */
.c-btn--invert { background: var(--color-band-text); color: var(--color-band-bg); }
.c-btn--outline {
  background: transparent;
  color: var(--color-band-text);
  border: 1px solid var(--color-band-text);
}
.p-band .c-btn:focus-visible { outline: 2px solid var(--color-band-text); outline-offset: 2px; }

/* ── 07 制作事例（WF §07・2026-09-11） ─────────────────────
   🔴 **枠線を付けない**＝画像とラベルだけ（05 で枠線を外して罫線1本にしたのと同じ文法）。
   🔴 **比率は 91:55 に固定**＝名刺の実寸。縦横比が揃わないとグリッドが崩れて安っぽく見える（WF §07）。
   🔴 **列数は件数で決める**＝3で割り切れるときだけ PC 3列。WF §07「3列でも2列でも割り切れる数しか選ばない」
      （9点だと SP の2列で最後の1枚が取り残される、という失敗を避ける）。 */
.p-works { padding-block: var(--space-4xl); }
/* 🔴 **見出しは中央揃え**＝他セクションはブロック側が `has-text-align-center` を持っているが、
   07 はPHPパーツなので自分で持つ（2026-09-11 実測＝左に寄っていた）。 */
.p-works .p-sec__title { text-align: center; }
.p-works__lead {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
/* ── タブ（2026-09-14 ユーザー指示） ───────────────────────────
   🔴 **面も枠も作らない＝罫線1本で現在地を示す**（WF §07「面や枠は作らない」／04⑥の箱と同じ文法）。
      ボタンに背景や角丸を付けると、純白×黒（案B）の中で**そこだけUI部品の顔**になる。
   🔵 **書体は明朝**＝h2・枠のタイトルと同じ `--font-heading`。字送りは `--font-body-tracking`
      （見出しの既定 0.10em は h2(40px) 用・§4.5）。
   🔵 **非選択は `--color-text-muted`／選択は本文色＋下線**＝色を足さずに階層を作る。
   ⚠ **`is-ready` が付くまで出さない**＝JSが動かない環境では全件が並ぶのでタブ自体が不要。
      `display: none` で持っておき、JSが付けたときだけ `flex` にする。
   ⚠ **横スクロールさせない**＝`flex-wrap: wrap` で折り返す。カテゴリーが増えたときに
      SPで隠れるタブを作らない（06 の「横スクロールさせない」と同じ判断）。 */
.p-works__tabs {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  /* 🔴 **近接を直す**（2026-09-14）＝旧は リード→タブ 32px／タブ→グリッド 48px で**逆転していた**。
     タブは**操作対象（グリッド）より上の説明文に近い**位置にあり、「説明文の一部」に見えていた。
     ➡️ 上を 48px に広げ、下（`+ .p-works__grid`）を 24px に詰めて**タブとグリッドを1つの塊にする**。 */
  margin-top: var(--space-2xl);
}
.p-works__tabs.is-ready { display: flex; }
/* ⚠ **タブが出ているときだけグリッドの上を詰める**＝JS無効・1カテゴリーのときは
   グリッドがリードの直下に来るので、既定の 48px のままでよい。 */
/* 🔄 2026-09-26 タブがあるときグリッドは `.p-works__panel`（role="tabpanel"）の中＝隣接の指定をパネル経由にした */
.p-works__tabs.is-ready + .p-works__panel > .p-works__grid { margin-top: var(--space-lg); }

.p-works__tab {
  /* 🔴 **タップ領域を 44px 以上にする**（2026-09-14）＝旧 `--space-2xs`(4px) で**高さ31px**しかなく、
     Apple(44px)・Google(48px) の最小値を下回っていた。SPが主戦場なので基準割れは実害。
     ⚠ **下線は文字から離れる**が、タブの下線は「タブの底」に出るものなので読み替えに問題はない。 */
  padding: var(--space-sm) 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  /* 🔴 **非選択の色をリード文と変える**（2026-09-14）＝旧は両方とも `--color-text-muted`（90,90,90）で
     **「押せるもの」と「説明文」が同じ色**だった。`color-mix` で一段濃くして
     **リード90 → 非選択タブ65 → 選択17** の3段にする。
     🔵 **新しい色トークンは足さない**（`tokens.css` は生成物）＝既存の2色から混ぜる。
     🔵 白地とのコントラストは **10.2:1**（リード 6.9:1 → 非選択 10.2:1 → 選択 18.9:1 の3段）＝AA(4.5) を満たす。 */
  color: color-mix(in srgb, var(--color-text) 80%, var(--color-bg));
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-body-tracking);
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--motion-dur-fast) var(--motion-ease),
              border-color var(--motion-dur-fast) var(--motion-ease);
}
/* 🔴 **ホバーを足す**（2026-09-14）＝**指定が1件も無く、PCで押せるかを判断する手がかりがゼロ**だった。
   🔵 **薄い罫線**にする＝選択中（本文色の実線）と紛れない強さに留める。
   ⚠ `@media (hover: hover)` で囲う＝タッチ端末で**タップ後にホバー状態が残る**のを避ける。 */
@media (hover: hover) {
  .p-works__tab:hover {
    color: var(--color-text);
    border-bottom-color: var(--color-line);
  }
  .p-works__tab.is-current:hover { border-bottom-color: var(--color-text); }
}
.p-works__tab.is-current {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}
.p-works__tab:focus-visible { outline: 2px solid var(--color-text); outline-offset: 4px; }

/* 🔴🔴 **「チラシ・ポスター」だけ別の版面**（2026-09-14 ユーザー指示）。
   ⑴ **グリッドを 880px に絞る**（他は 1440px）＝縦長が3枚並ぶと 1440px では横に間延びする。
      880px なら1枠 261px で、紙面の文字が読める側に寄る。
   ⑵ **4:3 の枠を外して素材の比のまま出す**＝レターボックスの余白が消え、**枠幅いっぱいに縦長が立つ**。
      ⚠ **他のカテゴリーは 4:3 のまま**＝名刺（横長）と縦長を**同じ行に混ぜないから**成立する。
        「すべて」タブを廃止して**1タブ＝1カテゴリー**になったので、行の中で比がばらけない。
   🔵 **カテゴリー名でなくスラッグで当てる**＝`data-cat`（投稿側）と `data-active-cat`（JSが付ける）。
      表示名を管理画面で変えても壊れない。
   ⚠ **SPでは 880px は効かない**（1列で枠幅は約335px）＝実質 768px 以上の指定。 */
/* 🔄 **2026-10-11 廃止＝全カテゴリー同じ版面（1440px・4:3 の枠）に戻した**（泊さんの修正依頼
      「ポスター・フライヤーの表示を合わせたい／コンテナサイズを名刺・ロゴと統一」）。
   ⚠ 代償＝縦長は 4:3 の枠に `contain` で入るので、左右に余白が出て旧版より小さく描かれる（下の `.p-works__thumb` の実測）。
   🔵 JS の `data-active-cat` は残す＝`data-count`（SPスライド）と同じ場所で書いており、版面の切り替えに戻すときのフックになる。
   旧（2026-09-14〜10-11）＝`.p-works__grid[data-active-cat="flyer"] { max-width: 880px; }`／
   `.p-works__item[data-cat~="flyer"] .p-works__thumb { aspect-ratio: auto; }`／max-width の transition。
   控え＝`_dev/_backup/2026-10-11_main.css_before-works-unify`。 */

.p-works__grid {
  display: grid;
  /* 🔴🔴 **SPは1列**（2026-09-14 ユーザー指示）。
     ⚠ **WF §07 は「SPは2列」**＝根拠は「名刺は横長なので2列でも形が保てる／**1列は縦に伸びすぎる**」だった。
        1列にすると1枚が版面いっぱい（375pxで335px幅＝高さ約202px）になり、**名刺の細部まで読める**側に寄る。
        ⚠ **代償は縦の長さ**＝枠1つあたり約250px（画像＋タイトル＋段ギャップ）。
          2件なら約500pxだが、**目標の6件では約1,500px＝スマホ4画面分**になる。
          ➡️ **点数が増えたら「2列に戻す」か「表示件数を絞る」かを判断する**（WF §07 の調整カード「実績点数絞り」の対象）。
     🔵 §4.5 の分類では**寸法変更**（要素は消していない）＝黙って直す側。9/21 の構造変更リストには載せない。 */
  grid-template-columns: 1fr;
  gap: var(--space-xl) var(--space-md);
  margin-top: var(--space-2xl);
  list-style: none;
  padding: 0;
}
/* 🔴 **タブ切り替えで新しく出る枠のアニメーション**（2026-09-14 ユーザー指示）。
   尺は `--motion-dur-mid`（800ms）＝**モーダルと同じ**。ページ内で動きの速さを2つ作らない。
   🔵 **出る側だけ**が対象（`main.js` の注記を参照）＝消える枠は即 `hidden`。
   ⚠ `prefers-reduced-motion: reduce` では実質0ms（§冒頭の一括指定）＝動きだけ消える。 */
.p-works__item {
  margin: 0;
  transition: opacity var(--motion-dur-mid) var(--motion-ease),
              transform var(--motion-dur-mid) var(--motion-ease);
}
.p-works__item.is-entering { opacity: 0; transform: translateY(8px); }

/* 🔄 2026-09-25 **SPは横スライド**＝07 制作事例（泊さんご依頼）→ 同日 **09 名刺以外のメニュー・05 加工3種にも**（ユーザー指示「スマホのスクロール量を減らす」）。
   767px まで。上の「SPは1列」（07）・下の「SPは縦3枚」（09）・「加工は縦積み」（05）を置き換える。
   🔵 **ライブラリを使わず scroll-snap**＝指で横に送る・1枚ずつ止まる。前へ／次へのボタンは main.js が**トラックの直後に作る**
      （09・05 の中身はブロック本文＝DB なので、ボタンのマークアップを置けない）。
   🔵 **1枚の幅は 84%**（基準＝画面幅−左ガター20px＝390px で 311px）＝次の1枚が右に約40px のぞく＝「横に続く」を飾りなしで示す。
      ⚠ `parts/sec-works.php` の `sizes`（SP＝`(100vw - 20px) * 0.84`）と対＝片方だけ変えない。
   🔵 **画面の端まで流す**＝左右のガター（20px）を打ち消し、内側に同じ余白を戻す。止まる位置もガターに揃える（scroll-padding）。
      ⚠ **09 の一覧は constrained レイアウトの直下**＝WP が `margin-left/right: auto !important` を当てる＝**詳しいセレクタ＋!important で打ち消す**。
   ⚠ **右端の余白は疑似要素で作る**＝スクロール容器の padding-right は Safari の旧版で無視される。4px＋gap 16px＝ガター 20px。
   🔵 **1件だけのタブ（07 のロゴ）はのぞかせない＝版面いっぱい**（`data-count` は main.js が付ける）。
   🔵 1枠の中身・見た目は変えていない（07＝4:3・タイトル・モーダル／09＝1:1 写真と本文／05＝写真・加工名・料金）。 */
@media (max-width: 767px) {
  .p-works__grid,
  .p-menu .p-menu__list,
  .p-price .p-price__kako-list {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-inline: calc(-1 * var(--container-gutter-sp)) !important;
    padding-inline: var(--container-gutter-sp) 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-gutter-sp);
    scrollbar-width: none;
  }
  .p-works__grid::-webkit-scrollbar,
  .p-menu .p-menu__list::-webkit-scrollbar,
  .p-price .p-price__kako-list::-webkit-scrollbar { display: none; }
  .p-works__grid::after,
  .p-menu .p-menu__list::after,
  .p-price .p-price__kako-list::after {
    content: "";
    flex: 0 0 calc(var(--container-gutter-sp) - var(--space-md));
  }
  .p-works__item,
  .p-menu__list > .p-menu__item,
  .p-price__kako-list > .p-price__kako-item {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  /* 09 の縦積み用の段間（`+ .p-menu__item`）を横では消す */
  .p-menu .p-menu__item + .p-menu__item { margin-top: 0; }
  /* 1件＝版面いっぱい（右にもガター20px）＝横に動かない */
  .p-works__grid[data-count="1"] .p-works__item { flex-basis: calc(100% - var(--container-gutter-sp)); }
}

/* 🔄 2026-09-25 SPスライドの「前へ／次へ」（07 でユーザー指示 → 同日 09・05 にも）。要素は main.js が作る。
   出す・出さないも main.js（`hidden`）＝PCでは常に出さない。
   🔵 **既存の語彙だけ**＝副ボタン（`.c-btn--ghost`）の白面＋1px 黒の輪郭線／三角は `c-btn--ghost::after` と同じ 6×10。
   🔵 48px 角＝タップ目標 44px を下回らない（追従バーのボタンと同じ高さ）。
   🔵 端では押せない見た目に＝`aria-disabled`（disabled にすると押した直後にフォーカスが外れる） */
.c-slider-nav { display: none; }
@media (max-width: 767px) {
  .c-slider-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }
  .c-slider-nav[hidden] { display: none; }
}
.c-slider-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: opacity var(--motion-dur-fast) var(--motion-ease);
}
.c-slider-nav__btn::after {
  content: "";
  width: 6px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.c-slider-nav__btn--prev::after { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.c-slider-nav__btn[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.c-slider-nav__btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* 🔵 押せる枠はボタン＝キーボードでも開ける。見た目はボタンに見せない（枠線・背景を持たせない） */
.p-works__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* 🔴🔴 **枠は 4:3・`object-fit: contain`**（2026-09-14＝07 に名刺以外の実績も1つにまとめる判断に伴う）。
   ⚠ **旧＝`aspect-ratio: 91/55`（名刺の比 1.65）＋ `cover`**＝**名刺しか入らない枠**だった。
   🔵 **受領素材の実測**＝名刺 1.59（横長）／オリシャン 0.71・チラシ 0.72・看板 0.71（いずれも縦長）／ロゴ 0.96（ほぼ正方）。
      **1.65 の枠に 0.71 を `cover` で入れると高さの約57%が切り落ちる**＝ポスターや瓶が横帯になる。
   ➡️ **枠を 4:3 に広げ、`contain` で全体を見せる。** 実測（PC 341px 列）＝
      名刺 341×214（**幅いっぱい＝欠けない**）／縦長 182×256（左右に約80pxの余白）／ロゴ 246×256。
      **どのカテゴリも切り取られない**のが `contain` を選んだ理由。
   🔵 **余白が出るのは欠点ではない**＝案B（純白×黒）・「余白・ホテルライク」の文法に沿う。**面や枠線は足さない**（WF §07）。
   ⚠ **代案＝素材ごとの自然比で並べる**（画像は最大になる）が、3列の同じ行に 214px と 480px が混ざり
      **行がガタつく**。枠線の無いグリッドではガタつきが「崩れ」に見えるため採らなかった。
      ➡️ **並び順（`menu_order`）で「名刺の行」「縦長の行」を揃えると、余白がさらに目立たなくなる。** */
/* 🔴🔴 **枠は 4:3 のまま、`<img>` は「実際に描かれる大きさ」にする**（2026-09-14 最適化）。
   ⚠ **`object-fit: contain` の落とし穴**＝img 要素は枠いっぱい（341px）のままで、
      **中の絵だけが縮んで 181px で描かれる**。ブラウザは `srcset` を**要素の幅**で選ぶので、
      **描かれる2倍の幅の画像を落としてくる**＝縦長素材で**面積にして約4倍**の無駄になっていた
      （実測＝181×256 の位置に **724×1024** を取得）。
   ➡️ **flex で中央に置き、img に `max-width/max-height` だけ掛ける**＝
      要素の幅 = 描かれる幅 になり、**`sizes="auto"` がそのまま正しい値になる**。
      🔵 これでアスペクト比・ブレークポイントが増えても**手で `sizes` を直す必要がなくなる**。
   ⚠ `width/height` 属性は残したまま（CLS 対策）＝`auto` 指定でも属性から比が効く。 */
.p-works__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.p-works__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* 🔵 「裏面もある」ことを言う最小限の印。ホバー／フォーカスで出す＝平時はWF通り画像とラベルだけ。
   ⚠ タッチ端末にはホバーが無いので**常時うっすら出す**（SPが主戦場） */
.p-works__more {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-2xs) var(--space-xs);
  background: color-mix(in srgb, var(--color-text) 72%, transparent);
  color: var(--color-bg);
  font-size: var(--font-size-xs);
  text-align: center;
}
@media (hover: hover) {
  /* 🔄 2026-09-19 ホバーに transition（ユーザー指示）＝**画像を 0.8 に薄く・帯と一緒に 0.8s**。
     ボタンのホバー（opacity 0.8・--motion-dur-mid）と同じ作法。押せる枠（is-ready）のときだけ */
  .p-works__img { transition: opacity var(--motion-dur-mid) var(--motion-ease); }
  .p-works__open.is-ready:hover .p-works__img { opacity: 0.8; }
  .p-works__more { opacity: 0; transition: opacity var(--motion-dur-mid) var(--motion-ease); }
  .p-works__open:hover .p-works__more,
  .p-works__open:focus-visible .p-works__more { opacity: 1; }
}
/* 🔴 **JSが動いたときだけ押せる見た目にする**（main.js が `is-ready` を付ける）＝
   動かない環境で「押せそうなのに何も起きない」枠を出さない。 */
.p-works__open { cursor: default; }
.p-works__open.is-ready { cursor: pointer; }
.p-works__open:not(.is-ready) .p-works__more { display: none; }
.p-works__open:focus-visible { outline: 2px solid var(--color-text); outline-offset: 4px; }

/* ⚠ **2026-09-14＝07 の枠から文字が全部無くなった**＝`.p-works__meta` / `.p-works__badge` /
   `.p-works__type` / `.p-works__item.is-pending` はすべて廃止。
   ⑴ ラベル（制作実績／デザインサンプル）・業種＝**3項目の廃止**（同日ユーザー判断）。
      旧注記＝「実績とサンプルは必ずラベルで分ける（WF §07 ②／SPEC §6.2）。混ぜて並べると
      点数を水増ししたことになり、04⑥『透明性・誠実さ』の逆を行く」。
   ⑵ 「準備中」＝**manifest の固定画像を廃止**したため仕組みごと消えた（同日ユーザー指示）。 */

/* 🔴 **枠にタイトルを出す**（2026-09-14 ユーザー指示）＝クラスはモーダルと共用の `p-works__modal-title`。
   ⚠ **寸法はグリッド側だけに当てる**（`.p-works__item` で絞る）＝モーダル側の見え方を変えない。
   ⚠ ボタンの中では `span`、押せない枠では `p` になるので、**両方を block に揃えて `p` の既定マージンを消す**。
   🔵 `word-break: auto-phrase`＝SPは2列で1枠160px前後。「BLOOM Free Style Bar 様」のような長い名前が
      語中で割れるのを防ぐ（05・06 と同じ扱い・⚠ Safari未対応＝保険）。 */
/* 🔴 **明朝にする**（2026-09-14 ユーザー指摘）。⚠ **これは好みの問題ではなく不整合だった**＝
      モーダル側の `.p-works__modal-title` は **`h3`** なので `h1,h2,h3,h4` の一括指定で
      `--font-heading`（Shippori Mincho B1）が当たっている。枠側は `span` / `p` で作ったため
      `--font-body`（Noto Sans JP）のままで、**同じクラスが2か所で別の書体**になっていた。
   🔴 **字送りは `--font-body-tracking`（0.04em）**＝見出しの既定 0.10em は **h2(40px) 用**で、
      20px に当てると1文字あたり+2pxで11字/行まで落ちる（§4.5 カード見出しの既定・04 で実測済み）。
   🔴 **級数は §4.5「カード見出し」の SP18 / PC20 に合わせた**＝モーダルと同じ 20px 固定だと、
      375px で枠幅が約160pxしかなく、セクションのリード（16px）より大きい文字が2行に折り返す。
      **セクションごとに決め直さない**（§4.5）＝表の値をそのまま使う。 */
/* 🔄 2026-10-11 **中央寄せ**（泊さんの修正依頼「タイトルを中央寄せ」）＝見出し・リード・タブと揃う。
   ⚠ グリッドの枠だけ＝モーダルの見出し行（×ボタンと横並び）は左寄せのまま。 */
.p-works__item .p-works__modal-title {
  display: block;
  margin: var(--space-xs) 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-md);
  letter-spacing: var(--font-body-tracking);
  line-height: 1.4;
  word-break: auto-phrase;
}

.p-works__note {
  margin-top: var(--space-2xl);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ── 07 制作事例の一覧ページ（`/works/`・2026-10-16 追加発注） ─────────────
   🔴 **新しい部品を作らない**＝見出し・タブ・枠・ポップアップはトップの 07 のまま、
      ページ送りはブログ一覧（`.p-archive__pager`）、入口のボタンはブログの「一覧を見る」（`.p-blog__more`）と同じ型。
   🔴 **SPは1列の縦並び**（🔄 2026-10-16 ユーザー指示＝当初の2列から変更）＝トップの横スライドにはしない
      （横スライドは「数枚をのぞかせる」ための形で、24件を送るには向かない）。
      1列＝2026-09-14 の「SPは1列」（名刺の細部まで読める）と同じ考え方。
   ⚠ **上の横スライドの指定（767px まで）より後ろに置く**＝同じ詳細度で打ち消すため（margin-inline は !important 同士）。 */
.p-works__all { margin-top: var(--space-2xl); text-align: center; }
.p-works__all .c-btn { width: 100%; }

/* SP・〜1023px はヘッダーが上に固定（56px）＝記事ページ（.p-entry）と同じ足し方 */
.p-works.p-works--list { padding-top: calc(var(--header-h-sp) + var(--space-2xl)); }   /* ⚠ `.p-works.` を付ける＝後ろの PC 指定 `.p-works { padding-block }` に負けない */
/* 一覧のカテゴリーはリンク＝JSを待たずに出す（トップのタブは JS が is-ready を付けてから） */
.p-works__tabs--links { display: flex; }
a.p-works__tab { display: inline-block; text-decoration: none; }
.p-works__tabs--links + .p-works__grid { margin-top: var(--space-lg); }

/* パンくず＝本文より一段弱く（muted・14px）。区切りは罫線色の「/」 */
.c-breadcrumb {
  max-width: 1440px;
  margin: 0 auto var(--space-2xl);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.c-breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); margin: 0; padding: 0; list-style: none; }
.c-breadcrumb__item + .c-breadcrumb__item::before { content: "/"; margin-right: var(--space-xs); color: var(--color-line); }
.c-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.c-breadcrumb a:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
/* 記事・ブログ一覧・固定ページ＝本文の列（760px）に揃える。見出しの日付・欧文との間は一段詰める */
.p-entry .c-breadcrumb { max-width: var(--entry-max); margin-bottom: var(--space-xl); }

@media (max-width: 767px) {
  .p-works__grid--list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-inline: 0 !important;
    padding-inline: 0;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .p-works__grid--list::after { content: none; }
  .p-works__grid--list .p-works__item { flex: none; }
}
@media (min-width: 768px) {
  .p-works.p-works--list { padding-top: calc(var(--header-h-sp) + var(--space-4xl)); }
  .p-works__all .c-btn { width: auto; min-width: 280px; }
}
@media (min-width: 1024px) {
  .p-works.p-works--list { padding-top: var(--space-4xl); }   /* 上にヘッダーが無い（左サイドバー） */
}

/* ── モーダル（表裏を1件として見せる・2026-09-11 ユーザー指示） ──
   🔴 **拡大鏡にしない**（WF §07 が「ライトボックスは付けない」とした意図は守る）＝
      原寸より大きくせず、細部を見せる装置にしない。目的は**表裏がそろっていることを示す**こと。 */
.p-works__modal {
  position: fixed;
  inset: 0;
  /* 🔴 **ヘッダー（--z-header: 100）とドロワー（110）より前に出す。**
     100 のままだとヘッダーが**モーダルの上に残り**、背景を暗くしたのに帯だけ明るいままになる
     （2026-09-11 実測）。⚠ トークンは生成物なので足さず、**既存の最大値から計算**する。 */
  z-index: calc(var(--z-drawer) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) max(var(--space-lg), var(--safe-r)) max(var(--space-lg), var(--safe-b)) max(var(--space-lg), var(--safe-l));  /* 安全領域（2026-09-25） */
  /* 🔴 **2026-09-16＝82%のベタ塗り → 72%＋ぼかし**（ユーザー指示「リッチに」）。
     ⚠ **82% は実質「黒い壁」**で、背面が消えるぶん**パネルが紙ではなく板に見えていた**。
     🔵 **ぼかし 8px はヘッダー（`is-scrolled`）と同じ値**＝ページ内でぼかしの作法を2つ作らない。
        背面が「奥にある」ものとして残る＝**奥行きで前後を作る**のがホテルライクの文法。
     ⚠ **`backdrop-filter` 非対応でも壊れない**＝その場合は 72% のベタ塗りに落ちるだけ。 */
  background: color-mix(in srgb, var(--color-text) 72%, transparent);
  backdrop-filter: blur(8px);
}
.p-works__modal[hidden] { display: none; }

/* 🔴 **開閉にアニメーションを付ける**（2026-09-14 ユーザー指示）。
   **暗幕は透明度・パネルは 8px 沈む**＝原寸より大きくしない原則（拡大鏡にしない）に触れない。

   🔴 **開始状態と終了状態は同じ値**＝`is-opening`（開く直前）と `is-closing`（閉じ終わり）を
      1つのルールにまとめる。**別々に書くと片方だけ直して非対称になる。**
   🔴 **`display` は補間されない**＝`hidden` を外した同じフレームで `is-opening` も外すと、
      ブラウザには「最初から opacity:1」としか見えず**開きだけ動かない**。
      ➡️ JS 側で**一度レイアウトを確定させてから**外す（`main.js` の強制リフロー）。
      🔵 `@starting-style` / `transition-behavior: allow-discrete` は使わない＝**対応ブラウザが限られる**。
   🔵 **閉じる型は 01b 追従バナーの「×」と同じ**（`is-closing` を足して transitionend で `hidden`）＝
      ページ内で閉じ方の作法を2つ作らない。
   ⚠ **`prefers-reduced-motion: reduce` では実質0ms**（§冒頭の一括指定）＝
      動きだけが消えて開閉の動作そのものは変わらない。 */
/* 🔴 **`--motion-dur-mid`（800ms）**（2026-09-14・4回の調整で着地）。
   ⚠ **経緯＝200ms「適用されていないように見える」→ 400ms「もっと遅くていい」→ 1200ms「少し早く」→ 800ms。**
   🔴 **800ms は既存の3段（200/400/1200）に無かったので、`DESIGN.md` に `dur-mid` を足して
      `build_design.py --emit tokens` で再生成した**＝**`tokens.css` を手で編集しない**（BUILD §4.5）。
      ⚠ 再生成の前に「DESIGN.md と tokens.css が同期しているか」を差分ゼロで確認してから実行している。
   🔵 **演出（`.js-reveal` / `.c-mask__inner` の 1200ms）よりは一段速い**＝
      スクロールで「現れる」演出と、押して「開く」操作は応答の期待が違う。
      それでも **`--motion-dur-base`（400ms・追従CTA と同じ操作系の尺）より遅い**側に置いて、
      **ホテルライク・凛とした**の動きの言葉から外れないようにする。
   ⚠ **原因は尺だけではない**＝`--motion-ease` は `cubic-bezier(0.22, 1, 0.36, 1)`＝**強い ease-out** で、
      変化が頭に集中する。200ms のとき実測は **25ms で 0.60／75ms で 0.93** ＝
      **名目200msでも体感は80msで終わっていた**（`_dev` で25ms刻みに計測）。
   ⚠ **イージングは変えない**＝`--motion-ease` はページ全体（FV・ブリッジ・追従CTA・演出）で共有していて、
      ここだけ別の曲線を使うと動きの作法が2つになる。**触るのは尺だけ**。
   🔴🔴 **`main.js` の保険タイマーは尺より必ず長くする**＝タイマーが先に `hidden` を付けると
      **アニメーションが途中で打ち切られる**（700ms のまま 1200ms にしたときに実際に起きる関係）。
      **1800ms のまま据え置き**＝800ms に対して十分長い。⚠ **尺を変えるときは必ずタイマーと対で見る。** */
.p-works__modal { transition: opacity var(--motion-dur-mid) var(--motion-ease); }
.p-works__modal-inner { transition: transform var(--motion-dur-mid) var(--motion-ease); }

.p-works__modal.is-opening,
.p-works__modal.is-closing { opacity: 0; }
.p-works__modal.is-opening .p-works__modal-inner,
.p-works__modal.is-closing .p-works__modal-inner { transform: translateY(8px); }
.p-works__modal-inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--space-xl);
  /* 🔵 **対角線モチーフ＝06b と同じロゴ由来の45°**（DESIGN §4 が展開を許可している資産）。
     🔴 **角度も作り方も `.p-band--full::before` と同一**＝勾配は 135deg（帯の向きと直交）。
        ⚠ **見た目で角度を決めない**＝ロゴと数度ずれると「似ているのに合っていない」側になる。
     🔴🔴 **濃度 2%・幅も 44-56% → 48-52% に絞った**（2026-09-16 実測でのやり直し）。
        ⚠ **06b と同じ 5%・44-56% をそのまま持ってきたら、白地では「大きな灰色の楔」になった**
          （帯は横長で面積が小さいが、こちらは縦長のパネル＝**同じ比率でも面積がまるで違う**）。
          しかも**境界線が作品の上を横切って見えた**＝主役が作品でなくなる。
     🔴🔴 **擬似要素ではなく背景で持つ**＝このパネルは `overflow-y: auto` で**内側がスクロールする**。
        絶対配置の擬似要素は**内容と一緒に流れて、下までスクロールすると消える**。
        背景（`background-attachment: scroll` の既定）は**器に貼り付いたまま**動かない。 */
  background:
    linear-gradient(
      135deg,
      transparent 0 48%,
      color-mix(in srgb, var(--color-text) 2%, transparent) 48% 52%,
      transparent 52%
    ),
    var(--color-bg);
  /* 🔵 **角丸は 2px（`--radius-sm`）まで**＝丸めると角の立った印象（凛とした）が抜ける。
     🔵 **影は「広く・薄く」**＝距離を出すための影で、カードの縁取りではない。
        ⚠ 近くて濃い影（`0 2px 8px` 系）はUIパーツの見え方＝紙に見えない。 */
  border-radius: var(--radius-sm);
  box-shadow: 0 40px 80px color-mix(in srgb, var(--color-text) 28%, transparent);
}


/* ── 見出し行＝欧文ラベル＋和文明朝＋罫線1本（2026-09-16） ──
   🔵 **05・06b と同じ「罫線1本で受ける」文法**＝枠で囲わない・面を敷かない。 */
.p-works__modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-line);
}
.p-works__modal-en {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.24em;
  color: var(--color-text-muted);
}
.p-works__modal-title { font-size: var(--font-size-lg); }

/* ── 見出し行の「×」（2026-09-16） ──
   🔴 **罫線2本を回した形**＝アイコン画像を足さない。`border-top` で引くので
      **`check.sh` の奇数px検査（width/height が対象）にも触れない**＝1px の線が引ける。
   🔵 **タップ領域は 44px 角**＝線そのものは 16px。 */
.p-works__dismiss {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) 0 0;  /* 線の位置を角に寄せる */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.p-works__dismiss::before,
.p-works__dismiss::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  border-top: 1px solid var(--color-text);
  opacity: 0.56;
  transition: opacity var(--motion-dur-fast) var(--motion-ease);
}
.p-works__dismiss::before { transform: translate(-50%, -50%) rotate(45deg); }
.p-works__dismiss::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.p-works__dismiss:hover::before,
.p-works__dismiss:hover::after,
.p-works__dismiss:focus-visible::before,
.p-works__dismiss:focus-visible::after { opacity: 1; }
.p-works__dismiss:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.p-works__modal-figs { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.p-works__modal-figs figure { margin: 0; }
/* 🔵 **影で紙を浮かせる**（2026-09-16）＝**枠線は付けない**（WF §07 の文法）。
   🔴 **実害の解消でもある**＝白地の素材（Ace様の白名刺・eiNs のロゴ＝白地760×760）は
      純白のパネルに溶けて**輪郭が消えていた**。面を敷くのではなく影で持ち上げる
      （面の追加は 09-11 に `.p-sec--surface` ごと廃止した判断と一貫させる）。 */
.p-works__modal-figs img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--color-text) 12%, transparent);
}
/* 🔵 キャプションは**画像の中央下**＝字間を開けて小さく置く（ラベルの作法を 06b の欧文ラベルと揃える） */
.p-works__modal-figs figcaption {
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  text-align: center;
  color: var(--color-text-muted);
}
/* ── 1枚もの（裏面が無い実績）のモーダル（2026-09-16 ユーザー判断＝全件を開く） ──
   🔴 **PC でも1列＝器いっぱい**。`1fr 1fr` のままだと1枚だけのとき左半分にしか出ず、
      **サムネイルとほとんど変わらない＝「拡大して見る」にならない**。
   🔴🔴 **高さを画面に収める**＝ポスターは縦長で、幅816pxで出すと**1000px超**になる。
      そのままだと**「閉じる」ボタンが画面外へ落ちて、閉じるのにスクロールが要る**。
      ➡️ `max-height` で頭打ちにし、**高さが先に決まったぶん幅は `width: auto` で縮める**。
   🔵 **原寸より大きくはしない**（WF §07 の意図のうち維持する側）＝`max-width` は素材幅どまり。 */
.p-works__modal-figs.is-single { grid-template-columns: 1fr; justify-items: center; }
.p-works__modal-figs.is-single img { width: auto; max-width: 100%; max-height: 60vh; }

/* ── モーダルの本文（2026-09-16 ユーザー指示）＝図の下・閉じるボタンの上 ──
   🔵 **段は §4.5「読ませる本文」**（SP 14px／PC 16px）＝器が560/880pxあり、注記ではなく読ませる文。
   🔴 **先頭と末尾の余白は殺す**＝`wpautop` が起こす `<p>` の既定マージンで、
      図との間隔（`--space-lg`）と閉じるボタンの間隔が**二重になる**。 */
.p-works__modal-body {
  /* 🔴 **器いっぱいに使う**（2026-09-16 ユーザー指示）＝図と同じ幅で、左右とも図の縁に揃う。
     ⚠ **旧＝PCで `max-width: 640px`**（行長を約40字に詰める意図）。**右端だけが図より内側で止まり、
        本文だけが別の幅を持っている状態**になっていた。**幅の基準はページ内で1つにする。** */
  width: 100%;
  margin-top: var(--space-xl);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
}
.p-works__modal-body > :first-child { margin-top: 0; }
.p-works__modal-body > :last-child { margin-bottom: 0; }
.p-works__modal-body p { margin: 0 0 var(--space-md); }
/* 🔴 本文の器は `hidden` で消える＝`display: none` を効かせるため属性セレクタで上書きしない */

/* ── 末尾の「閉じる」（2026-09-16 作り直し） ──
   🔴🔴 **旧＝全幅の枠線ボタン。これが「チープに見える」最大の原因だった**＝
      入力フォームの送信ボタンの見え方で、**画面の主役級の面積**を占めていた。
      モーダルの中で一番強く見えるべきは**作品**であって、閉じる操作ではない。
   🔵 **罫線1本で受けた控えめなテキストへ**＝05・06b と同じ「枠で囲わない」文法。
      **ホバーは黒面への反転**（DESIGN §4 が許可するホバー反転）＝押せることは保つ。
   🔵 **見出し行の「×」と二段構え**＝内側スクロールで「×」が上へ流れても、
      読み終えた位置にこちらがある。 */
.p-works__close {
  display: block;
  width: 100%;
  margin-top: var(--space-2xl);
  padding: var(--space-md) var(--space-sm);
  border: 0;
  border-top: 1px solid var(--color-line);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  cursor: pointer;
  /* 🔄 2026-09-19 ホバーを黒面への反転 → **他のボタンと同じ opacity 0.8・0.8s**（ユーザー指示）。
     キーボードのフォーカスは他のボタンと同じ輪郭線で示す */
  transition: opacity var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  .p-works__close:hover { opacity: 0.8; }
}
.p-works__close:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
/* モーダルを開いているあいだ背面を動かさない */
body.is-modal-open { overflow: hidden; }

/* ── 01b 追従バナーの画像モーダル（2026-09-22 ユーザー指示＝リンク先が空欄のとき画面中央に出す） ──
   🔵 **暗幕・尺は 07 制作事例のモーダルと同じ値**＝暗幕 72%＋ぼかし 8px／`--motion-dur-mid`（800ms）。
   🔄 **動きだけ 07 と違う＝右下バナーの位置・大きさから中央へ拡大する**（2026-09-22 ユーザー指示）。
      開始位置はバナーの実寸から JS が計算して `transform` に直書きする（CSS には最終位置だけを書く）。
   🔴🔴 **尺を変えたら `main.js` の保険タイマー（1800ms）と対で見る**＝タイマーが短いと閉じる途中で打ち切られる。
   🔴 **画像は切り取らず全体を見せる**＝告知画像の中の文字が欠けないように。画面より大きい画像は縦横とも縮めて収める */
.p-banner-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) max(var(--space-lg), var(--safe-r)) max(var(--space-lg), var(--safe-b)) max(var(--space-lg), var(--safe-l));  /* 安全領域（2026-09-25） */
  background: color-mix(in srgb, var(--color-text) 72%, transparent);
  backdrop-filter: blur(8px);
  transition: opacity var(--motion-dur-mid) var(--motion-ease);
}
.p-banner-modal[hidden] { display: none; }
.p-banner-modal__inner {
  position: relative;
  max-width: min(960px, 100%);
  box-shadow: 0 40px 80px color-mix(in srgb, var(--color-text) 28%, transparent);
  transform-origin: 0 0;
  transition: transform var(--motion-dur-mid) var(--motion-ease);
}
.p-banner-modal.is-opening,
.p-banner-modal.is-closing { opacity: 0; }
/* 拡大の開始位置を置く一瞬だけ動きを止める＝置いた位置から動き出す（置く動作そのものを見せない） */
.p-banner-modal.is-placing,
.p-banner-modal.is-placing .p-banner-modal__inner,
.p-banner-modal.is-placing .p-banner-modal__close { transition: none; }
/* 「×」は拡大しきってから出す（`is-open` は JS が拡大の transitionend で付ける）＝小さな×が一緒に膨らんで見えないように。
   閉じるときは先に `is-open` を外す＝×が消えてから縮む */
.p-banner-modal__close { opacity: 0; }
.p-banner-modal.is-open .p-banner-modal__close { opacity: 1; }
.p-banner-modal__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - var(--space-lg) * 2);
  width: auto;
  height: auto;
}
.p-banner-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-2xl);
  height: var(--space-2xl);
  padding: 0;
  color: var(--color-text);
  background: var(--color-bg);
  border: 0;
  cursor: pointer;
  /* ⚠ 他のボタンのホバー（0.8s）より速い 200ms＝拡大しきった後に出るので、遅いと「×が無い」時間が長くなる */
  transition: opacity var(--motion-dur-fast) var(--motion-ease);
}
@media (hover: hover) {
  .p-banner-modal.is-open .p-banner-modal__close:hover { opacity: 0.8; }
}
.p-banner-modal__close:focus-visible { outline: 2px solid var(--color-text); outline-offset: -2px; }

@media (min-width: 768px) {
  .p-works__item .p-works__modal-title { font-size: var(--font-size-lg); }  /* §4.5 カード見出し PC 20px */
  /* 🔴 **このグリッドだけ 1440px**（2026-09-14 ユーザー指示・旧 880px）。
     ⚠ **ページの他のセクションは 960px**（`--container-max`）＝**07 だけ左右に広がる**。
        §4.5 は「1200px で FV のテキスト左端（120px 固定）とセクションの左端が1本に揃う」ことを
        960px の根拠にしているので、**07 の左端だけがその線から外れる**（下の実測参照）。
        ➡️ **意図した例外**として残す。揃え直すときは 960px へ戻す側で判断する。
     🔵 `.p-sec` は全幅（`max-width: none`）でガター（`--container-gutter-pc`）だけを持つので、
        幅を決めているのは**このグリッド自身の max-width だけ**＝ここを変えれば効く（実測で確認済み）。 */
  .p-works__grid { max-width: 1440px; margin-inline: auto; gap: var(--space-2xl) var(--space-2xl); }
  .p-works__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
}
/* 🔄 2026-09-19 **タブレットは2列**（ユーザー指示）＝3列は 1280px から。
   旧＝768px から3列（1枠 約197px）で名刺が小さかった。
   🔄 同日 1023px まで → **1279px まで**に拡大（ユーザー指示・iPad Air 横 1180×820 で3列になっていた）。
      1024px〜はサイドバー（240px）が出て本文が狭い＝1180px で3列だと1枠 約259px。
      ⚠ iPad Pro 12.9 の横（1366px）は3列 */
@media (min-width: 768px) and (max-width: 1279px) {
  .p-works__grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
  .p-works__modal-figs { grid-template-columns: 1fr 1fr; }
  .p-works__modal-figs.is-single { grid-template-columns: 1fr; }  /* 🔴 1枚ものは PC でも1列（上の指定を打ち消さない） */
  /* 🔴 **70vh → 52vh**（2026-09-16 実測で確定）＝**縦長の1枚ものが画面に収まる上限**。
     ⚠ **見た目で決めない**＝1200×800 でポスターを開き、`scrollHeight - clientHeight` を測って出した値
       （70vh だと 165px はみ出す／52vh で 11px の余り）。⚠ **パネルの余白を変えたらこの値も測り直す。** */
  .p-works__modal-figs.is-single img { max-height: 52vh; }
  /* 🔵 **PCは余白を一段広げる**（2026-09-16）＝32px は「詰まって見える」側。§4.5 の余白の言葉に寄せる。
     🔴 **48px で止める（64px にはしない）**＝**余白と画像の大きさは同じ高さを取り合う**。
        64px にしたら1枚ものの縦位置（ポスター）で **165px はみ出して「閉じる」が画面外**に落ちた（実測）。 */
  .p-works__modal-inner { padding: var(--space-2xl); }
  /* 🔵 見出しは §4.5「セクション内の第2階層」の段（SP 20px／PC 28px）。
     ⚠ **モーダルの中だけに効かせる**＝`.p-works__modal-title` はグリッドの枠でも使っている
        （枠側は下の `.p-works__item` の指定で 20px のまま）。 */
  #works-modal .p-works__modal-title { font-size: var(--font-size-2xl); }
  .p-works__modal-body { font-size: var(--font-size-sm); }  /* §4.5 読ませる本文 PC 16px */
  .p-works__modal-inner { max-width: 880px; }
}

/* ══ 08 ご依頼の流れ（WF §08・2026-09-16） ══════════════════════════
   🔴 **SP・PCとも縦積み**（WF v1.15 で横並び5カラムから変更）。
      🔵 **縦にした最大の利点＝1枠176pxという幅の制約が外れること。** 横並びでは一文20字前後が上限だったが、
         縦なら40字前後まで書ける ➡️ **各ステップの本文を厚くして、コンテンツ量をここで取り戻す。**
      ⚠ **引き換えに失ったもの＝「5つで終わる」ことの一目での分かりやすさ。**
         縦積みは長さで「多い」印象になり得る ➡️ **番号を大きく出して補う**（締めの1行も同じ役割）。
   🔴 **区切りは罫線1本だけ**＝06 納期表・FVの即答チップと同じ受け方。**枠で囲わない・面を敷かない。**
   ⚠ **矢印・アイコンは置かない**（WF §08）＝番号 01〜05 があれば順序は伝わる。 */
/* 🔴 **上下の余白はセクション側が持つ**（2026-09-16 ユーザー指摘で追加）。
   ⚠ **`.p-sec` は `padding-inline` しか持っていない**＝上下は 03〜06 が各自 `padding-block` を書いている作法で、
      **08 はこれが抜けていた**（`p-flow` の指定を `__list` から書き始めたため）。
   🔵 値は 03・04・05・06 と同じ **SP・PC とも 96px（`--space-4xl`）**（🔄 2026-09-19 PC 128→96px・全セクション一括＝ユーザー指示）＝
      セクションの間隔をここだけ変えない。 */
.p-flow { padding-block: var(--space-4xl); }

.p-flow__list { border-top: 1px solid var(--color-line); }
/* ブロックの flow レイアウトが子に付ける既定マージンを止める（04・05・06 と同じ扱い） */
.p-flow__list > *,
.p-flow__step > *,
.p-flow__body > * { margin-block: 0; }
.p-flow__step {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-line);
}

/* 🔴 **番号は §4.5「セクション内の第2階層」の段**（SP 20px／PC 28px＝WF §08 の指定値）。
   明朝で組む＝06 の日数と同じ扱いにして「見出し級の情報」だと分かるようにする。
   ⚠ **Crimson Pro にはしない**＝05 の金額が Crimson なのは ⑤A83 のご要望によるもので、ここには当たらない。
   🔵 **`--font-heading-tracking`（0.10em）は当てない**＝2文字しかないので字間だけが目立つ。 */
.p-flow__num {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
}
/* §4.5 カード見出し（SP 18px／PC 20px・字送りは本文側） */
.p-flow__title {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-md);
  letter-spacing: var(--font-body-tracking);
}
/* §4.5 読ませる本文（SP 14px／PC 16px）＝器が広いので注記の級には落とさない */
.p-flow__text {
  /* 🔵 **見出しとの間は 12px（PC 16px）**（2026-09-16 ユーザー指摘で 8px から広げた）。
     ⚠ **見出しの `line-height` は 1.3（tight）で、本文は 1.8**＝**本文側にしか半行分の余裕がない**ため、
        数値の 8px がそのまま詰まって見えていた。
     🔵 **ステップ間（`__step` の padding 24／32px ×2）より明らかに狭い値に留める**＝
        内側の余白が外側に近づくと、5つの塊の切れ目が曖昧になる。 */
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  /* 05 `.p-price__note`・06 `.p-delivery__c` と同じ受け方＝文節で折る。
     ⚠ **Safari は auto-phrase 未対応＝保険であって保証ではない。** */
  word-break: auto-phrase;
}
/* 🔴 03 の追加料金の注記＝**本文より一段落として添える**が、色は落とさない。
   薄い灰にすると「小さく書いてある条件」に見え、04⑥「透明性・誠実さ」と逆を向く。 */
.p-flow__note {
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  word-break: auto-phrase;
}

/* 🔴 **お支払いのタイミング＝WF §08 の指定どおり 5ステップの下に1行。**
   `TBD_PAY_TIMING` が部分回答のままなので**行ごとプレースホルダ**（2026-09-16 ユーザー判断）。
   ⚠ 確定したら `<span class="is-tbd">` を外し、className の `is-tbd--PAY_TIMING` も外す。 */
.p-flow__pay {
  margin-top: var(--space-xl);
  font-size: var(--font-size-xs);
  /* 🔵 2026-09-16＝プレースホルダ1語から**2文**になった。05 `.p-price__note`・06 `.p-delivery__c`・
     08 `.p-flow__text` と同じ受け方＝文節で折る。⚠ **Safari は auto-phrase 未対応＝保険であって保証ではない。** */
  word-break: auto-phrase;
}
/* 🔵 締めの1行＝「これだけで済む」を最後に言い切る（⑧A54 で言い切ってよいことが確定している）。
   ⚠ **他社と比べない**（Q24⑥）＝当社の事実だけ。 */
.p-flow__close {
  /* 🔴 **セクションの締めのキャッチ＝手前より明らかに離す**（2026-09-16 ユーザー指摘で 16px から広げた）。
     ⚠ **16px では、直前の支払いの行（上に 32px）より狭かった**＝
        **締めの1行が「支払いの注記の続き」に見えていた**。役割が違うので、間隔の大小を役割どおりにする。
     🔵 **SP 32px／PC 48px**＝支払いの行の上（32px）より広い側に置く。
        ⚠ セクション下の余白（96／128px）は超えない＝独立した塊には見せない。 */
  margin-top: var(--space-xl);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
}

/* ── 06b をブロックで組んだぶんの受け（2026-09-11・ユーザー指示） ──────────
   🔴 **ボタン・アドレス・QRもブロックにした**＝エディタで文言を直せるようにするため。
      その結果 `c-btn`（`<a class="c-btn c-btn--invert">`）ではなく
      **core/button の `<div class="wp-block-button"><a class="wp-block-button__link">`** が来る。
      ⚠ **`c-btn` は消していない**＝ヘッダー・FV・追従CTA・08b がまだ使っている。
        ここは **06b のブロック版だけ**に当てる（`.p-band__actions` の下で絞る）。
   🔴 **アイコンは inline SVG をやめて `mask-image`**＝core/button の中に SVG を置けないため。
      色は `background` が持つ＝`currentColor` と同じ振る舞いになり、**新しい色を足さない**。
      絵は `assets/img/icon/line.svg`（PHP版と同一パスであることを確認済み）。 */
.p-band__actions.wp-block-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
/* 🔴 **高さを揃える**＝`c-btn` 版は `.p-band__actions` が flex で `<a>` が stretch し、
   主副どちらも同じ高さ（PC 64px）だった。`wp-block-buttons` は `.wp-block-button` が伸びないため、
   そのままだと**副ボタンだけ低くなり縦位置が中央に浮く**（2026-09-11 実測＝360x64 に対し 240x53）。
   ➡️ ラッパを flex にして `<a>` を伸ばす。 */
.p-band__actions.wp-block-buttons { align-items: stretch; }
.p-band__actions .wp-block-button { display: flex; width: 100%; }
.p-band__actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 0;
  transition: opacity var(--motion-dur-fast) var(--motion-ease);
}
/* 主＝白ベタ×黒文字／副＝背景なし・白の輪郭線（SPEC §5.3 の反転・`c-btn--invert/--outline` と同値） */
.p-band__cta .wp-block-button__link {
  background: var(--color-band-text);
  color: var(--color-band-bg);
}
.p-band__mail .wp-block-button__link {
  background: transparent;
  color: var(--color-band-text);
  box-shadow: inset 0 0 0 1px var(--color-band-text);
}
/* 🔵 アイコンは擬似要素＝ブロックの文言を先方が書き換えても消えない */
.p-band__cta .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  /* 🔄 2026-09-26 QA（W3C CSS）＝`mask` の一括指定は検査で解析できない＝個別の指定に分けた（表示は同じ） */
  -webkit-mask-image: url("../img/icon/line.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../img/icon/line.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* QRもブロック（`wp:image` ＋ `wp:paragraph`）。
   🔵 **`srcset` は使わない**＝添付IDの無い `wp:image` は srcset を出せないため、
      **528px の画像を120pxで表示**して高DPRまで一息に賄う（264w/528w の出し分けをやめた）。 */
.p-band__qr .wp-block-image { margin: 0; }
.p-band__qr .wp-block-image img { display: block; width: 120px; height: 120px; }

/* ── 06b の対角線モチーフ（2026-09-11・ユーザー判断） ──────────
   🔴 **ロゴ由来のブランド資産**＝DESIGN §4 が「対角線モチーフをセクション区切り・切り抜き・
      ホバー反転に展開してよい」と明示的に許可している。**ページ内でここが初使用。**
   🔴 **角度は 45deg＝ロゴの実測。** `assets/img/logo/logo-full.svg` に
      `l107.81-107.81`（dx と −dy が同値＝**厳密な45°の上がり対角**）のストロークがある。
      ⚠ **見た目で角度を決めない**＝ロゴと数度ずれると「似ているのに合っていない」側になる。
      CSS は帯の向きでなく**勾配の向き**で指定するので、45°の帯を作る勾配は **135deg**（直交）。
   🔴 **色を足さない**＝`--color-band-text`（白）の5%透過。`tokens.css` は生成物なので触らない。
   🔵 **`full`（06b）だけ。** 08b は文言が仮置きなので **08 実装時に判断**する
      （欧文ラベル・QR と同じ切り分け）。
   ⚠ **背景写真は採らなかった**（2026-09-11）＝候補の3枚はどれも**名刺そのものを見せる構図**で、
      敷くと即答3点の罫線とボタンが商品を横切る。AA は 72%のベールで 7.69:1 と足りていた＝
      **止めた理由はコントラストではなく構図**（実測は `_shots/bg-band-cmp.png` と `bgonly-*.png`）。
      専用に撮るなら FV と同じ条件（被写体が片側・明度がおとなしい・文字が乗る面が空いている）。 */
.p-band--full { position: relative; overflow: hidden; }
.p-band--full::before {
  content: "";
  position: absolute;
  /* 斜めの帯なので、要素より外まで伸ばさないと角が切れる */
  inset: -20% -10%;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 0 44%,
    color-mix(in srgb, var(--color-band-text) 5%, transparent) 44% 56%,
    transparent 56%
  );
}
/* 🔴 擬似要素より前に出す＝重ね順を `z-index` でなく生成順＋position で決める（新しい層を作らない） */
.p-band--full .p-band__inner { position: relative; }

/* ── 06b のQRコード（PC 1024px〜・2026-09-11） ──────────
   🔴 **768〜1023 では出さない。** 内寸が足りない＝768px の内寸 688px に対し
      LINE360＋メール240＋gap16×2＋QR120 で **752px 必要**（実測）。
      閲覧3場面はすべてスマホのため、タブレット幅を優先して主CTAを縮める理由がない。
   🔴 **白地・黒モジュールのまま置く。** 反転QR（黒地に白）は読み取れない端末がある。
      ⚠ 黒帯の上に白い正方形が出るが、これは装飾の「面」ではなく**読み取りに必要なクワイエットゾーン**
        ＝「カードにしない」「面を作らない」に反していない。
   🔵 区切りは**縦罫線1本**（即答3点・06の表と同じ受け方）＝枠で囲わない。 */
@media (min-width: 1024px) {
  .p-band__contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
  }
  /* ⚠ QRは**ボタンの行に揃える**＝`__main` はアドレス行のぶん背が高く、
     単純な center だとQRがボタンより下がる。上端をボタンの上端に合わせる。 */
  .p-band__contact { align-items: flex-start; }
  .p-band__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding-left: var(--space-2xl);
    border-left: 1px solid var(--color-band-line);
  }
  .p-band__qr img { display: block; width: 120px; height: 120px; }
  .p-band__qr-cap { font-size: var(--font-size-xs); color: var(--color-band-text-muted); }
}

@media (min-width: 768px) {
  /* 🔴 PCで初めて横に並べる＝①②とも3カラム（子の数で自動的に決まる）。
     ⚠ 2026-09-11 に②を2行→**3行**へ組み直した（⑥D52 の原文どおりの書き分け）。
     旧コメントの「②は2カラム」はその前の姿。
     **カラム間は縦罫線1本のみ**＝カードにしない（WF §06）。 */
  .p-delivery__list { display: flex; border-top: 0; }
  .p-delivery__row {
    flex: 1 1 0;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 0;
  }
  .p-delivery__row:first-child { padding-left: 0; }
  .p-delivery__row:last-child { padding-right: 0; }
  .p-delivery__row + .p-delivery__row { border-left: 1px solid var(--color-line); }

  .p-band { padding-block: var(--space-4xl); padding-inline: var(--container-gutter-pc); }
  .p-band__lead { font-size: 32px; }
  .p-band__facts { display: flex; }
  /* 🔵 **PCだけ中央寄せ**（2026-09-11 ユーザー指示）。SPは全幅の1行なので左揃えのまま
     ＝中央寄せにすると行頭が揃わず読みにくい。03「おすすめ」と同じ切り分け（SP左揃え／768〜中央揃え）。
     ⚠ **`justify-content` だけでは足りない。**li は flex なので**箱**は中央に来るが、
       2行になったとき**行そのものは左揃えのまま**で右側がばらつく（768pxで実測＝
       「枚数とご希望だけで／お見積もりします」）。**`text-align` とセットで当てる。** */
  .p-band__facts li {
    flex: 1 1 0;
    padding: var(--space-md) var(--space-lg);
    justify-content: center;
    text-align: center;
  }
  .p-band__facts li + li { border-top: 0; border-left: 1px solid var(--color-band-line); }
  /* ⚠ PCは2段（中央寄せ）＝コピーとボタン2つを横一列に詰めるとコピーが折れて窮屈になる（WF §08b） */
  .p-band__actions { flex-direction: row; justify-content: center; }
  /* 🔴 **主従は面積で作る。** 黒ベタの上では**白の輪郭線ボタンが「白い箱」に見えて**
     塗り／輪郭の差だけでは主従が立たなかった（2026-09-11 実測・同寸280pxで並んでいた）。
     ⚠ 副CTAを輪郭線ボタンにしたのは 2026-09-06 のユーザー判断（FVと揃える）＝**線種は変えず寸法で差を付ける**。 */
  /* ⚠ **`padding` はリンクにだけ当てる。**ラッパ（`.wp-block-button`）にも当たると
     箱が padding ぶん高くなり（実測 64 → 104px）、行全体が伸びて**副ボタンだけ縦に間延びする**。
     `c-btn` 版は `<a>` 自身が `.p-band__cta` を持っていたので同じ書き方で問題が無かった。 */
  .p-band__cta,
  .p-band__cta .wp-block-button__link { min-width: 360px; }
  .p-band__cta .wp-block-button__link { padding-block: 20px; }
  .p-band__mail,
  .p-band__mail .wp-block-button__link { min-width: 240px; }
  .p-band__mail .wp-block-button__link { font-size: var(--font-size-xs); }
  /* ブロック版は `.wp-block-button` が幅を持つので、横並びでは内容幅に戻す */
  .p-band__actions .wp-block-button { width: auto; }
  .p-band__actions.wp-block-buttons { flex-direction: row; justify-content: center; }
}

@media (min-width: 1024px) {
  /* 🔴🔴 **08 の PC 指定はここ（基準指定より後ろのメディアクエリ）に置く**（2026-09-16 修正）。
     ⚠ **実際に踏んだ**＝最初はモーダルと同じ `@media` に書いたが、そこは **08 の基準指定より前**にあり、
        **同じ詳細度なら後に書いたほうが勝つ**ので `padding-block`・`__title`・`__num` などが
        **基準値に戻されていた**（1200px で padding が 96px のまま＝実測で発覚）。
     ⚠ **メディアクエリの中に書けば効く、ではない。** 順番が先なら負ける。 */
  .p-flow { padding-block: var(--space-4xl); }

  /* ── 08 ご依頼の流れ（PC・WF §08） ──
     🔴 **番号を左に大きく・本文を右**の2カラム。**最大幅880px**（WF の指定値）。
     ⚠ **ページの他のセクションは 960px**（`--container-max`）＝ここだけ内側に寄る。
        読ませる行が長くなりすぎないための WF の指定なので、そのまま採る。
     🔵 番号の欄は 56px 固定＝28px の2桁がちょうど収まり、本文の左端が5行とも1本に揃う。 */
  .p-flow__list { max-width: 880px; margin-inline: auto; }
  .p-flow__step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-xl);
    align-items: start;
    padding-block: var(--space-xl);
  }
  .p-flow__num { font-size: var(--font-size-2xl); }
  .p-flow__text { margin-top: var(--space-md); }   /* 見出し20px・本文16pxに対して 16px（SPは12px） */
  .p-flow__title { margin-top: 0; font-size: var(--font-size-lg); }   /* §4.5 カード見出し PC 20px */
  .p-flow__text,
  .p-flow__note { font-size: var(--font-size-sm); }                   /* §4.5 読ませる本文 PC 16px */
  .p-flow__close {
    margin-top: var(--space-2xl);
    font-size: var(--font-size-xl);                                   /* §4.5 転換の1行 PC 24px */
  }

  /* 🔴 **07 だけ PC の上書きが無く 96px のままだった**（2026-09-16 に発見・ユーザー判断で是正）＝
     03・04・05・06・08 は PC 128px。**07 の前後だけセクション間が詰まって見えていた。**
     ⚠ **08 の余白を入れたときに、隣のセクションと並べて初めて気づいた**＝
       1セクション単体では「詰まっている」と分からない（`.p-works` の基準指定は `padding-block: var(--space-4xl)` の1行だけ）。 */
  .p-works { padding-block: var(--space-4xl); }

  .p-delivery { padding-block: var(--space-4xl); }

  /* 🔴 **数字の40pxは 1024px から。** 768〜1023 は SP と同じ 28px に据え置く。
     2026-09-11 実測＝768px では1カラムの数字枠が **186px** しかなく、
     40px だと「5営業日以内」（6字＝240px）が **2行に割れる**（通常・歌舞伎町外の2か所で発生）。
     🔴 **2行に割れた時点でこのセクションは成立しない**＝WF §06 の条件は
     「当日／5営業日以内／1週間〜の3段階が**一目で**入ること」で、行数が揃わないと3段階に見えない。
     ⚠ 32px でも 192px で**6pxしか余らない**＝書体のレンダリング差で割れうるため採らない。
     🔵 SPとタブレットで級数が同じでも段差は付く＝**縦積み→3カラムというレイアウト側が段差を持つ**。
     閲覧3場面はすべてスマホのため、768〜1023 を優先して 40px を守る理由もない。 */
  .p-delivery__d { font-size: var(--font-size-4xl); }
  .p-delivery__tilde { font-size: var(--font-size-xl); }
}

/* 「プラス1日」の「プラス」は数字より一段落として添える（「1週間〜」の〜と同じ扱い）。
   🔴 WF §06 は歌舞伎町外を `＋◯日` と数字の位置に置いていた＝**加算も日数の顔で見せる**のが元の書式。 */
.p-delivery__plus { font-size: var(--font-size-md); }
@media (min-width: 1024px) {
  .p-delivery__plus { font-size: var(--font-size-xl); }
}

/* ══════════════════════════════════════════════════════════════════
   09 名刺以外のメニュー（WF §09・2026-09-16 実装）

   🔴 **05 料金プランと形を変える**＝05 は「帯3本＋写真＋早見表」でページ最重量。
      09 で同じ密度をもう一度出すと**料金の話が2回来たように見える**（WF §09）。
      ➡️ **05 が持っていて 09 が持たないもの**＝欧文セリフの見出し（`p-price__name`）／
        Crimson Pro の金額／横罫の表。**09 は明朝の和文見出し＋本文級の金額**だけで組む。
   ⚠ **枠線は付けない**（07 と同じ文法。画像・名称・料金・条件だけ・WF §09）。
   ⚠ **08b の帯の直後**に来るセクションなので軽く保つ（WF §09）。
   ══════════════════════════════════════════════════════════════════ */

.p-menu { padding-block: var(--space-4xl); }   /* §3.1＝SP96／PC128 は各セクションが持つ */

/* 🔄 **リード1行**（2026-09-16 にユーザーご指摘で追加）。
   🔵 **ページの作法どおり**＝リードがあるのは 05・06・07（読み方の前提を運ぶ必要があるセクション）で、
     無いのは 03・04・08（見出しだけで自明なもの）。**09 は前者**。
   ⚠ **`.p-sec__title` の `margin-bottom: 48px` を負のマージンで詰める**＝05・06 と同じ受け方。
     見出しとリードは1つの塊で、48px 離すと別の要素に見える（05 で決めた形）。 */
.p-menu__lead {
  margin-top: calc(var(--space-2xl) * -1 + var(--space-xs));
  margin-bottom: 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ブロックの flow レイアウトが子に付ける既定マージンを止める（04・05・06・08 と同じ扱い） */
.p-menu__list > *,
.p-menu__item > *,
.p-menu__body > * { margin-block: 0; }

.p-menu__list { margin-top: var(--space-2xl); }
/* SPは縦3枚（WF §09）。罫線もカードも使わず**余白だけ**で切る＝05 との密度差はここで付く */
.p-menu__item + .p-menu__item { margin-top: var(--space-3xl); }

/* 🔴 **画像は正方形（1:1）に統一**（WF §09）＝07 のギャラリーは 4:3 なので、
   **比率を変えることで「別の話」だと構造で伝わる**。
   ⚠ `object-fit: cover` を当てる＝素材が 1:1 でない差し替えが来ても枠が崩れない
     （`menu-banner`/`menu-goods` は元ファイル未受領＝**先方が何を入れるか分からない**）。 */
/* 🔴 **SPは写真の幅を 240px に絞る**（2026-09-16 実測を受けて）。
   ⚠ 全幅335pxで組んだ初版は **1枠542px・セクション2,152px＝05 に次ぐページ2番目の重さ**になっていた
     （07 の1枠284px の約2倍）。WF §09 は「**08b の帯の直後なので軽く保つ**」「**05 と密度を変える**」を
     このセクションの条件に挙げており、**全幅の正方形はその条件を満たさない**。
   🔵 **PCの1枠は272px**（実測）＝全幅335pxだと **SPのほうがPCより写真が大きい**という逆転も起きていた。
   ⚠ これは**寸法の変更**（WF は画像の幅を指定していない・順序と1:1だけを指定）＝先方への確認事項には載せない。 */
/* 🔄 **2026-09-17＝240px → 100%（ユーザー指示）**。
   ⚠ **2026-09-16 の「SPは写真を240pxに絞る」を戻す判断。**
     絞った理由は ⑴全幅だと1枠542px・セクション2,152px＝05 に次ぐ重さ ⑵PCの1枠より SP の写真が
     大きくなる逆転、の2点だった。
   🔴 **戻した理由＝写真240px に対して本文が版面335px で、SPで幅が2種類に割れていた**（ユーザー指摘「spが崩れている」）。
     **枠の左右が揃わないことのほうが、セクションの重さより目に付く。** */
.p-menu__photo { margin: 0; max-width: 100%; }
.p-menu__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.p-menu__body { margin-top: var(--space-md); }

/* §4.5「カード見出し」＝SP 18px／PC 20px・字送りは本文側
   ⚠ 見出しの既定 0.10em は h2(40px) 用。20px に当てると 11字/行まで落ちる（§4.5） */
.p-menu__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  letter-spacing: var(--font-body-tracking);
  line-height: var(--line-height-snug);
  /* ⚠ **2026-09-16 実測＝PCで「…などのグラ／フィックデザイン」と語中で割れていた。**
     `[sp-br]` は SP 専用なので PC は素の折り返しになる＝文節で折る指定が要る。
     ⚠ Safari は `auto-phrase` 未対応＝保険であって保証ではない（05・08 と同じ扱い）。 */
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 🔴 **数字は明朝**（2026-09-16 修正）。
   ⚠ **初版はゴシック（既定の Noto Sans JP）で、ページで唯一の例外になっていた**＝実測で
     **05 金額・06 日数・08 番号はすべて Shippori Mincho B1**。
   ⚠ **外した理由が事実誤認だった**＝「05 の Crimson Pro 金額と張り合わせない」と書いていたが、
     **05 の金額は Crimson Pro ではなく Shippori Mincho B1**。Crimson Pro は**プラン名（SIMPLE）**のほう。
   🔵 **級数は上げない**＝05（28px）より小さい 24px のままにして、**書体だけ揃える**。
     WF §09「05 と同じ密度をもう一度出さない」は級数と余白の話なので、ここは壊れない。 */
.p-menu__price {
  font-family: var(--font-heading);
  margin-top: var(--space-xs);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}
/* 🔴 **`.is-tbd` の破線は文字の幅だけに出す。**
   `tokens.css` の `.is-tbd` は `msd_tbd()` が出す **`<span>` 向け**の指定で、
   ブロック本文の `<p>` に付けると **border-bottom が枠の全幅に伸びて「区切り線」に見える**（実測）。
   ⚠ 05 の `p-price__caution` は本文が実文なので `.is-tbd` を外して逃げたが、
     **09 のロゴ価格は「確定するまで確定形で組まない」対象**（SPEC §3.3）＝印は残す必要がある。 */
.p-menu__price.is-tbd { width: fit-content; }

/* 条件＝§4.5「カード内の一文」14px。行頭記号は置かない（07 と同じ＝飾りを足さない） */
.p-menu__terms {
  margin-top: var(--space-md);
  padding-left: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
}
.p-menu__terms li + li { margin-top: var(--space-2xs); }
/* 「うちわ・コースター・…」の長い列挙が語中で割れないようにする
   ⚠ Safari は `auto-phrase` 未対応＝保険であって保証ではない（05・08 と同じ扱い） */
.p-menu__terms li { word-break: auto-phrase; text-wrap: pretty; }

/* 🔴 **ノーコードLP は一行テキストのみ**（2026-09-05 決定・SPEC §3.3）＝
   **4枚目のカードにしない**。カードの格を与えないことが判断の中身なので、
   **`p-menu__item` と同じ見た目に近づけない**（罫線で切って注記の段に落とす）。 */
.p-menu__note {
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* 🔴🔴 **09 の PC 指定は基準指定より後ろに置く**（BUILD §3.1・08 で踏んだ実例のため） */
@media (min-width: 768px) {
  .p-menu { padding-block: var(--space-4xl); }

  /* 🔴 **PCは h2 とリードの間を 8 → 24px**（BUILD §4.5 v1.12 の決定＝05 と同じ受け方）。
     **SPは 8px のまま**＝版面335pxで離すと見出しとリードが別物に見える。
     ⚠ **実測（2026-09-16）＝この間隔はセクションごとにバラバラだった**（SP/PC の順で 05＝8/24・06＝24/24・07＝48/48）。
       **09 は決定のある 05 に合わせた。** 06・07 を揃えるかは別途（BUILD §10）。 */
  .p-menu__lead { margin-top: calc(var(--space-2xl) * -1 + var(--space-lg)); }

  /* 🔴 **PCは3カラム。幅はセクションの版面（960px）に任せる**（2026-09-16 修正）。
     ⚠ **初版は WF §09 の「最大幅880px」をそのまま入れていたが、窮屈だった**（ユーザー指摘）。
       880px の出どころは **WF を書いた時点の版面が 880px だったから**で、
       **版面はその後 960px に広げてある**（BUILD §4.5 の寸法変更 ⑴）。
       ➡️ **880 は「09 を狭くする指定」ではなく、当時の版面の写し**＝**追随していなかっただけ。**
     🔵 1枠 272px → **299px**（+27px）。**写真も同じだけ大きくなる**のがこのセクションでは効く。
     ⚠ **`max-width` を書かない**＝`.p-sec` の constrained レイアウトが版面を持つので、
       版面を変えたときに**ここだけ古い値で取り残されない**（今回の 880 がまさにそれ）。 */
  .p-menu__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 🔴 **列間はページ標準の 48px**（2026-09-16 修正。ユーザー指摘「圧迫感がある」）。
       ⚠ **初版の 32px はこのページで唯一の狭い値だった**（実測＝07 制作事例 48／05 加工 48／03 お悩み 48）。
         しかも **09 の画像は 299px でページ最大**＝「画像は一番大きく・間は一番狭い」という
         圧迫感がいちばん出る組み合わせになっていた。**ほぼ同型の 05 加工（288px×3・48px）と揃える。** */
    gap: var(--space-2xl);
  }
  /* ⚠ SPの縦マージンはグリッドでは効かないが、**明示的に0へ戻す**
     （`+ .p-menu__item` の指定が残ると1列目以外の上に余白が乗る） */
  .p-menu__item + .p-menu__item { margin-top: 0; }

  /* PCは1枠272pxなので幅制限を外して枠いっぱいに戻す */
  .p-menu__photo { max-width: none; }

  /* 🔴 **名称の高さを2行分で固定する**（2026-09-16 実測）。
     ⚠ 「バナー・ポスターなどのグラフィックデザイン」だけが2行で、**他2枚の料金と条件が1行ぶん上にずれていた**
       ＝05 で踏んだ「1行目の高さのズレ」（BUILD v1.10）と同じ型。
     🔵 **px ではなく `3em` で持つ**＝`line-height: 1.5` なので **3em がちょうど2行**。
       級数が 18px でも 20px でも2行分になり、**級数を変えるたびに px を計算し直さなくて済む**
       （かつ 54px / 60px とどちらも偶数に落ちる）。 */
  /* 🔄 **2026-09-17＝3em → 1.5em（1行ぶん）**。
     ⚠ **3em は「バナー・ポスターなどのグラフィックデザイン」（21字）が2行になるための確保**だったが、
       **同日に見出しを名詞1語へ短縮した**（ロゴ／グラフィックデザイン／グッズ・ノベルティ＝2・9・9字）ため
       **3列とも1行に収まる**＝**2列で空行が1行ぶん見えていた**のを閉じる。
     🔵 **`em` で持つ方針は変えない**（級数 18px／20px のどちらでも1行分・27px/30px とも偶数）。 */
  .p-menu__name { min-height: 1.5em; }
  .p-menu__price { font-size: var(--font-size-xl); }
  /* 注記も版面いっぱい＝上の罫線がカードの列と同じ幅で引ける（880 のままだと罫線だけ内側に寄る） */
}

/* 🔴 **名称の 20px は 1024px から**（06 の日数40pxと同じ考え方）。
   ⚠ **2026-09-16 実測＝768px では1枠208pxしかなく、20px だと
     「バナー・ポスターなどのグラフィックデザイン」が3行に割れて `min-height: 3em`（2行）を超え、
     この枠だけ料金が30px下がる**（priceTop 571 / 601 / 571 を実測）。
   🔵 18px なら 11字/行＝21字が2行に収まり、3枚の料金の高さが揃う。
   🔵 **閲覧3場面はすべてスマホ**なので、768〜1023 に級数を上げる理由がない（BUILD §5・06 と同じ判断）。 */
@media (min-width: 1024px) {
  .p-menu__name { font-size: var(--font-size-lg); }     /* §4.5 カード見出し PC 20px */
}

/* ═══════════════════════════════════════════════════════════════════
   10 プロフィール（WF brief §10・2026-09-17 実装）
   🔴 **ページ唯一の「読ませる」ブロック**＝⑪お客様の声が公開時非表示のため、
      **ここだけが「人の証明」**（WF §10）。他セクションより行間を広く取る。
   ═══════════════════════════════════════════════════════════════════ */
.p-profile { padding-block: var(--space-4xl); }   /* §3.1＝SP96／PC128 は各セクションが持つ */

/* ブロックの flow レイアウトが子に付ける既定マージンを止める（04〜09 と同じ扱い） */
.p-profile__inner > *,
.p-profile__body > *,
.p-profile__greeting > *,
.p-profile__meta > * { margin-block: 0; }

.p-profile__inner { margin-top: var(--space-2xl); }

/* 🔴 **SPは写真180px幅を中央**（WF §10 v1.29）。
   ⚠ **09 で 240px → 100% にしたのと同じ判断をここへ持ち込まない。**
     09 は**本文が写真の下に版面いっぱいで続く**ため幅が2種類に割れて見えたが、
     10 は **写真が単独で中央に置かれ、本文との間に余白がある**＝別の組み方（WF の指定どおり）。
   🔵 **3:4 は WF の指定**＝portrait であることを比率で持つ。 */
/* 🔄 **2026-09-17＝SPの写真を 180px → 100%（ユーザー指示）。**
   ⚠ **WF §10 v1.29 の「顔写真 180px幅を中央」を戻す判断**（09 で 240px → 100% にしたのと同じ向き）。
   🔵 **PCは影響を受けない**＝メディアクエリ側が `max-width: none` を別に持つ。 */
.p-profile__photo {
  margin: 0 auto;
  max-width: 100%;
}
.p-profile__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.p-profile__greeting { margin-top: var(--space-xl); }
/* 🔵 **本文はページで唯一「読ませる」ため行間を広げる**（他セクションの `--line-height-base` より上） */
.p-profile__greeting p {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-loose);          /* 2.0＝既存トークン（--line-height-base 1.8 より広い） */
  text-align: left;
}
.p-profile__greeting p + p { margin-top: var(--space-lg); }

/* ⛔ **`.p-profile__subhead` は 2026-09-17 に削除**＝「【ご依頼について】」の小見出しと
   その下の2段落を外したため（ユーザー判断・588字→405字）。**使う要素が無くなったので規則ごと落とす。**
   ⚠ 戻す場合は「和文明朝・本文より1段上の級数・字間だけで立てる」＝**欧文セリフの小ラベルは使わない**
     （06b `CONTACT`・07 `WORKS` が持つ語彙なので、ここで重ねない）。 */

/* 罫線1本で①想いと②プロフィールを仕切る＝構成案「想いと自己紹介は同じ帯にまとめる」（WF §10） */
.p-profile__meta {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
  text-align: center;
}
.p-profile__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  letter-spacing: 0.06em;
  line-height: var(--line-height-tight);
}
.p-profile__role {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
}

/* 🔴🔴 **PC指定は基準指定より後ろに置く**（BUILD §3.1） */
@media (min-width: 768px) {
  .p-profile { padding-block: var(--space-4xl); }

  /* 🔴 **PCは 写真280px ＋ 本文 の2カラム**（WF §10 v1.26・`column-gap:56px`・最大880px）。
     🔵 **顔と言葉が並ぶことで「この人がそう言っている」形になる**（旧版は写真だけが下に置かれていた）。
     ⚠ **`--space-2xl`(48) と `--space-3xl`(64) の中間＝56px はトークンに無い**ため
       ここだけ実数で持つ（WF が寸法で指定している箇所・偶数）。 */
  .p-profile__inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    column-gap: 56px;
    align-items: start;
    max-width: 880px;
    margin-inline: auto;
  }
  /* PCは写真が左カラムいっぱい＝280px（SPの中央寄せを解除する） */
  .p-profile__photo { margin: 0; max-width: none; }

  /* 🔵 **本文の幅は 544px（880 − 280 − 56）＝1行あたり約34字。**
     **読ませる文章はコンテンツ幅を狭めたほうが読みやすい**（WF §10）。 */
  .p-profile__greeting { margin-top: 0; }

  /* ⚠ 罫線下のお名前は、PCでは**本文と同じ左揃え**にする
     （中央寄せだと 544px の本文ブロックの中で署名だけ浮く） */
  .p-profile__meta { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════
   11 お客様の声（WF brief §11・2026-09-17 実装）
   🔴🔴 **公開時は非表示**（SPEC §5.5）＝既定OFF ＋ 3件そろわないと出ない（`inc/blocks.php`）。
      **ここに「非表示だから手を抜く」理由はない**＝出る日には 10 の直後に並ぶ面になる。
   🔴 **装飾を置かない**（WF §11）＝引用符・アイコン・枠線なし。**罫線1本だけで仕切る。**
   🔵 **09 と同じ3カラムでも単調にならない**＝09は画像あり／11はテキストのみで面の性質が違う（WF §11）。
   ═══════════════════════════════════════════════════════════════════ */
.p-voice { padding-block: var(--space-4xl); }   /* §3.1＝SP96／PC128 は各セクションが持つ */

/* ブロックの flow レイアウトが子に付ける既定マージンを止める（04〜10 と同じ扱い） */
.p-voice__list > *,
.p-voice__item > * { margin-block: 0; }

.p-voice__list { margin-top: var(--space-2xl); }
@media (max-width: 767px) {
  /* 🔄 2026-09-19 SP 48→32px（ユーザー指示）。
     ⚠ 直前の h2（.p-sec__title）の margin-bottom 48px と**相殺して大きい方が勝つ**＝list だけ 32px にしても画面上は 48px のまま（実測）。
        ➡️ この節の h2 の下余白を 0 にして、間隔を list の margin-top だけで決める */
  .p-voice .p-sec__title { margin-bottom: 0; }
  .p-voice__list { margin-top: var(--space-xl); }
}

/* 🔴 **SPは縦積み・区切りは罫線1本**（WF §11）。
   ⚠ **1件目の上には引かない**＝見出しとの間に線が入ると「表の始まり」に見える。 */
.p-voice__item { padding-block: var(--space-lg); }
.p-voice__item + .p-voice__item { border-top: 1px solid var(--color-line); }

/* 🔵 **コメント16px → お名前14pxグレー**（WF §11 の表記指定をそのまま）。
   ⚠ **§4.5「カード内の一文＝14px」は当てない**＝あちらは**カード見出しと同居する**ときの規則で、
     11 は見出しを持たない＝**コメント自体がこの面の主役**。WF の指定が優先する。 */
.p-voice__comment {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  text-align: left;
}
.p-voice__meta {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
}

/* 🔴🔴 **PC指定は基準指定より後ろに置く**（BUILD §3.1） */
@media (min-width: 768px) {
  .p-voice { padding-block: var(--space-4xl); }

  /* 🔴 **PCは3カラム・最大880px・中央寄せ**（WF §11）。1枠あたり約270px。 */
  /* 🔴 **2026-09-17＝`row-gap` を追加**（ユーザーご指摘「4件目からの上に余白を追加」）。
     ⚠ **4件以上でしか起きない不具合**＝3件のときは1行で終わるので行間が要らなかった。
       6件にした瞬間、**2行目の上罫線が1行目の出典行に接して「前の行の区切り」に見える**
       （罫線の役割＝枠の起点、見え方＝行の区切り。10 の「出典の罫線が全幅だと区切りに読まれる」と同じ型）。
     🔴 **`:nth-child(n+4)` で4件目以降に margin を当てない**＝**3列という前提を数字に焼き込む書き方**で、
       列数が変われば当たる枠がずれる。`row-gap` なら**行が折り返すたびに効く**＝9件・12件でも直さなくていい。
     🔵 **48px は列間（`column-gap`）と同じ値**＝縦横で余白の格が揃う。 */
  .p-voice__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-2xl);
    row-gap: var(--space-2xl);
    max-width: 880px;
    margin-inline: auto;
  }

  /* 🔴 **当方判断（2026-09-17）＝PCでは3枠とも上に罫線を引く。**
     ⚠ **WF が指定しているのは「SPの区切り＝罫線1本」だけ**で、PCの罫線は書かれていない。
     🔵 **新しい飾りは足していない**＝**このセクションが持っている唯一の device（罫線1本）**を、
       縦の区切りから**横並びの起点**へ置き換えただけ。**枠線は付けない**（WF §11）方針は守っている。
     🔵 引かないと、長さの違う3つの文が宙に浮いて**列として揃って見えない**。
     ⚠ 不要なら `border-top` の2行を削るだけで戻せる。 */
  .p-voice__item {
    display: flex;
    flex-direction: column;
    padding-block: var(--space-lg) 0;
    border-top: 1px solid var(--color-line);
  }
  /* SPの「1件目だけ線なし」をPCでは解除する（3枠とも同じ高さから始める） */
  .p-voice__item + .p-voice__item { border-top: 1px solid var(--color-line); }

  /* 🔵 **お名前を枠の下端へ揃える**＝コメントの行数が1行・2行と違っても**署名の行が横一直線**になる
     （09 で料金の高さを揃えたのと同じ考え方）。 */
  .p-voice__meta { margin-top: auto; padding-top: var(--space-lg); }
}

/* ═══════════════════════════════════════════════════════════════════
   12 よくある質問（WF brief §12・2026-09-18 実装）
   🔴 **SP・PCとも縦1列**（WF §12）＝PCでも2カラムにしない（読み順が左右に飛ぶ）。
   🔴 **区切りは罫線1本だけ**＝08 と同じ受け方。**枠で囲わない・面を敷かない。**
   🔵 **Q./A. は擬似要素の文字ラベル**＝先方が質問文を書き換えても消えない。アイコンは使わない。
   🔄 **2026-09-18（同日）＝コアの details ブロックでアコーディオン化**（ユーザー指示）。1〜3問目は開いた状態・4問目以降は閉じた状態。
   ═══════════════════════════════════════════════════════════════════ */
.p-faq { padding-block: var(--space-4xl); }   /* §3.1＝SP96／PC128 は各セクションが持つ */

/* ブロックの flow レイアウトが子に付ける既定マージンを止める（04〜11 と同じ扱い） */
.p-faq__list > *,
.p-faq__item > *,
.p-faq__a > * { margin-block: 0; }

.p-faq__list {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-line);
}
/* 🔄 2026-09-19 **上下の余白を details → summary へ移した**（ユーザー指示「summary のクリック範囲が狭い」）。
   旧＝details が padding を持ち、押せる summary は文字の高さだけ（PC 30px）。➡️ 閉じた問いは**行全体（上下の余白込み）**が押せる。
   開いたときは summary の下余白を 0 に＝質問→答えの間（12／PC 16px）と、答えの下の余白（24／PC 32px）は旧と同じ見た目 */
.p-faq__item {
  border-bottom: 1px solid var(--color-line);
}
.p-faq__item > summary { padding-block: var(--space-lg); }
.p-faq__item[open] > summary { padding-bottom: 0; }
.p-faq__item[open] { padding-bottom: var(--space-lg); }

/* 🔵 **ラベルの欄は 32px 固定**（PC 48px）＝質問と答えの左端が8問とも1本に揃う（08 の番号欄と同じ考え方）
   🔄 2026-09-25（2回目の修正依頼）「Q. と ＋ を少し内側に」＝**Q.（と同じ欄の A.）を左から 8px 内へ**・欄も 8px 広げて 40px（PC 56px）。
      ⚠ A. も一緒に動かす＝Q. だけ動かすと質問と答えのラベルが縦に揃わなくなる。＋／− は下の ::after で右から 8px 内へ */
.p-faq__item > summary,
.p-faq__a {
  position: relative;
  padding-left: calc(var(--space-xl) + var(--space-xs));
}
.p-faq__item > summary::before,
.p-faq__a::before {
  position: absolute;
  top: 0;
  left: var(--space-xs);
  font-family: var(--font-heading-latin);
  font-weight: 500;
}

/* §4.5 カード見出し（SP 18px／PC 20px）。書体は h3 だったときと同じにする（summary は本文扱いのため明示する） */
.p-faq__item > summary {
  --faq-icon: 16px;                 /* ＋／−の一辺（PC 20px） */
  /* 右端の＋／−の欄＝内側への寄せ 8px＋記号＋文字との間 16px */
  padding-right: calc(var(--space-xs) + var(--faq-icon) + var(--space-md));
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
  letter-spacing: var(--font-body-tracking);
  list-style: none;                 /* ブラウザ既定の三角を消す＝左端は Q. のラベルが持つ */
  word-break: auto-phrase;          /* SPで「くださ／い。」と語中で折れていた（2026-09-18 実測）。⚠ Safari は未対応＝保険 */
  cursor: pointer;
}
.p-faq__item > summary::-webkit-details-marker { display: none; }   /* Safari の三角 */
.p-faq__item > summary::before { content: "Q."; }

/* 🔵 **開閉の手がかり＝右端に細い「＋／−」**（アイコン画像は使わない＝WF §12）。
   閉じた問いに手がかりが無いと、押せることが伝わらない。
   🔄 2026-09-25（2回目の修正依頼）「＋を大きく」＝**文字の「+」（18px で実寸約9px）→ 線2本で描く 16px（PC 20px）**。
      線は 2px・色は従来どおり muted。文字だと級数を上げても行の高さと中心がずれるため、線で描いて1行目の中央に置く。
      開くと縦線が縮んで「−」になる（0.4s）。閉じるアニメーション中は押した時点で「＋」に戻る（`is-closing`＝main.js）。
   ⚠ 右から 8px 内側（「少し内側に」）。 */
.p-faq__item > summary::after {
  content: "";
  position: absolute;
  right: var(--space-xs);
  width: var(--faq-icon);
  height: var(--faq-icon);
  color: var(--color-text-muted);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: background-size var(--motion-dur-base) var(--motion-ease);
}
.p-faq__item[open] > summary::after { background-size: 100% 2px, 2px 0; }   /* − */
.p-faq__item.is-closing > summary::after { background-size: 100% 2px, 2px 100%; }   /* 閉じる途中＝押した時点で＋ */
/* summary に上余白が付いた分、Q. も同じだけ下げる（旧＝top:0 で文字の1行目に揃っていた）。
   ＋／−は1行目（級数×行間）の縦の中央に置く */
.p-faq__item > summary::before { top: var(--space-lg); }
.p-faq__item > summary::after {
  top: calc(var(--space-lg) + (var(--font-size-md) * var(--line-height-snug) - var(--faq-icon)) / 2);
}
.p-faq__item > summary:focus-visible { outline: 1px solid var(--color-text); outline-offset: 4px; }

/* 🔵 **質問との間は 12px（PC 16px）**＝08 の見出し→本文と同じ値。項目間（24／32px ×2）より明らかに狭く */
.p-faq__a { margin-top: var(--space-sm); }
.p-faq__a::before {
  content: "A.";
  font-size: var(--font-size-md);
  /* 🔴 **A. のラベルは本文1行目の行の高さに揃える**＝ラベルは質問と同じ18pxだが、行の箱は本文（14px×行間）と同じにする */
  line-height: calc(var(--font-size-xs) * var(--line-height-base));
  color: var(--color-text-muted);
}

/* §4.5 読ませる本文（SP 14px／PC 16px） */
.p-faq__text,
.p-faq__note {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  /* 05・06・08 と同じ受け方＝文節で折る。⚠ **Safari は auto-phrase 未対応＝保険であって保証ではない。** */
  word-break: auto-phrase;
}
.p-faq__text + .p-faq__text,
.p-faq__note { margin-top: var(--space-xs); }
/* 🔴 注記は 08 `.p-flow__note` と同じ扱い＝色は落とさない（薄くすると「小さく書いた条件」に見える） */

.p-faq__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 🔴🔴 **PC指定は基準指定より後ろに置く**（BUILD §3.1） */
@media (min-width: 768px) {
  .p-faq { padding-block: var(--space-4xl); }

  /* 🔴 **最大880px・中央寄せ**（WF §12）＝08・11 と同じ幅 */
  .p-faq__list { max-width: 880px; margin-inline: auto; }
  .p-faq__item > summary { padding-block: var(--space-xl); }
  .p-faq__item[open] > summary { padding-bottom: 0; }
  .p-faq__item[open] { padding-bottom: var(--space-xl); }
  .p-faq__item > summary::before { top: var(--space-xl); }
  .p-faq__item > summary::after {
    top: calc(var(--space-xl) + (var(--font-size-lg) * var(--line-height-snug) - var(--faq-icon)) / 2);
  }
  .p-faq__item > summary,
  .p-faq__a { padding-left: calc(var(--space-2xl) + var(--space-xs)); }
  .p-faq__item > summary { --faq-icon: 20px; font-size: var(--font-size-lg); }
  .p-faq__a { margin-top: var(--space-md); }
  .p-faq__a::before {
    font-size: var(--font-size-lg);
    line-height: calc(var(--font-size-sm) * var(--line-height-base));
  }
  .p-faq__text,
  .p-faq__note { font-size: var(--font-size-sm); }
}

/* ═══════════════════════════════════════════════════════════════════
   13 ブログ最新3件（WF brief §13・2026-09-18 実装）
   🔴🔴 **公開時は非表示**（記事0件・SPEC §5.5）＝`parts/sec-blog.php` が何も出さない。
   🔴 **SPは縦積み／PCは3カラム・最大880px**（WF §13）。サムネイル16:9 → 日付 → タイトル。
   ⚠ **カテゴリのラベル・枠線・面は置かない**。「一覧を見る」は🔄 2026-09-19 副ボタン（c-btn--ghost）に変更（旧＝テキストリンク）。
   ═══════════════════════════════════════════════════════════════════ */
.p-blog { padding-block: var(--space-4xl); }   /* §3.1＝SP96／PC128 は各セクションが持つ */

.p-blog__list {
  display: grid;
  gap: var(--space-2xl);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}
.p-blog__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* 🔴 **比率は枠が持つ**＝アイキャッチの元の比率がばらついても揃う。画像が無い記事でも欄の高さを保つ。
   🔄 2026-09-19 16:9 → **1024:643＝07 名刺のサムネイルと同じ比率**（ユーザー指示「名刺のサムネイルとサイズを統一」）。
      横幅は元から同じ（どちらも最大1440pxの3列・SP1列）＝比率を揃えれば寸法も一致する。
      ⚠ 07 の枠そのものは 4:3（名刺はその中に余白付きで収まる）＝**合わせたのは見えている名刺の画像**。画像サイズ msd-blog も同比率（inc/setup.php） */
.p-blog__thumb {
  display: block;
  aspect-ratio: 1024 / 643;
  overflow: hidden;
  background: var(--color-surface);
}
.p-blog__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 🔄 2026-09-19 ホバー＝薄くする（0.2s）→ **少し拡大（1.05倍）・0.8s**（ユーザー指示）。
     はみ出しは .p-blog__thumb の overflow:hidden が切る＝枠の大きさは変わらない */
  transition: transform var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  .p-blog__link:hover .p-blog__img { transform: scale(1.05); }
}

/* 日付は欧文セリフ＝06b `CONTACT`・07 `WORKS` と同じ書体（新しい書式は作らない） */
.p-blog__date {
  display: block;
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
}
/* §4.5 カード見出し（SP 18px）。PCは3列で1枠約260pxのため 16px に落とす */
.p-blog__title {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
  word-break: auto-phrase;
}
/* 🔄 2026-09-19 下線にも transition（ユーザー指示）＝下線は常に引いておき、色だけを透明→文字色へ 0.8s（画像の拡大と同じ尺）。
   ⚠ text-decoration の付け外しは補間されない＝色で出す */
.p-blog__title {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  .p-blog__link:hover .p-blog__title { text-decoration-color: currentColor; }
}

/* 🔄 2026-09-19 テキストリンク → **副ボタン（c-btn--ghost）**＝FV「料金表を見る」と同じ型（ユーザー指示「他のボタンと統一」）。
   旧方針「14 のボタンと競合させない」は**塗りの主ボタンにしない**ことで守る（白面＋輪郭線＝LINE の黒ベタより一段下）。
   幅も FV と同じ＝SP は版面いっぱい／PC は最小 280px */
.p-blog__more {
  margin-top: var(--space-2xl);
  text-align: center;
}
.p-blog__more .c-btn { width: 100%; }

/* 🔴🔴 **PC指定は基準指定より後ろに置く**（BUILD §3.1） */
@media (min-width: 768px) {
  .p-blog { padding-block: var(--space-4xl); }
  /* 🔄 2026-09-18 ユーザー指示＝最大幅 880px → 1440px（WF §13 の 880px から変更） */
  .p-blog__list {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1440px;
    margin-inline: auto;
  }
  .p-blog__title { font-size: var(--font-size-sm); }
  .p-blog__more .c-btn { width: auto; min-width: 280px; }
}

/* ═══════════════════════════════════════════════════════════════════
   14 LINEへのご案内（締めCTA・WF brief §14・2026-09-18 実装）
   🔄🔄 **2026-09-18（同日）ユーザー判断で黒面に変更**（WF §14 の「白面で締めて、ボタンだけ黒」から）。
      色は 06b・08b と同じ `--color-band-*`＝新しい色を足さない。ボタンは反転（白ベタ×黒文字）。
      ⚠ **9/21 のご確認で伝える構造変更**。白へ戻すなら、この下の「黒面」と書いた指定を消すだけ。
   🔴 **上下の余白を他セクションより広く取る**＝終わりであることを余白で示す（SP 128／PC 160px）。
   ⚠ **メールボタンは置かない**（⑭A28）＝アドレスは文字の表記のみ。
   ═══════════════════════════════════════════════════════════════════ */
.p-cta {
  padding-block: var(--space-4xl);
  background: var(--color-band-bg);   /* 黒面（2026-09-18） */
  color: var(--color-band-text);
}
.p-cta .p-sec__title { color: inherit; }   /* 黒面 */

.p-cta__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
/* ブロックの flow レイアウトが子に付ける既定マージンを止める（04〜13 と同じ扱い） */
.p-cta__inner > * { margin-block: 0; }

/* 🔵 ページの最後の1行＝明朝で大きく（08 締めの1行と同じ書体・一段大きく） */
.p-cta__copy {
  margin-top: var(--space-xl);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  word-break: auto-phrase;
}
/* 🔵 リードは 06b・08b に無い要素＝締めなので一段ていねいに（WF §14） */
.p-cta__lead {
  margin-top: var(--space-md);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  word-break: auto-phrase;
}

/* 🔵 即答3点は 06b と同じ型（罫線で挟む・カードにしない）を白面の色で */
.p-cta__facts {
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-band-line);      /* 黒面 */
  border-bottom: 1px solid var(--color-band-line);
  font-size: var(--font-size-xs);
}
.p-cta__facts li {
  padding: var(--space-sm) var(--space-2xs);
  word-break: auto-phrase;
}
.p-cta__facts li + li { border-top: 1px solid var(--color-band-line); }

/* 🔴 **黒ベタ×白文字の主ボタン1つ**（SPEC §5.3）。SPは全幅（WF §14） */
.p-cta__actions.wp-block-buttons {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}
.p-cta__line { display: flex; width: 100%; }
.p-cta__line .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-band-text);   /* 黒面＝反転（06b の主ボタンと同値） */
  color: var(--color-band-bg);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: opacity var(--motion-dur-fast) var(--motion-ease);
}
.p-cta__line .wp-block-button__link:focus-visible { outline: 2px solid var(--color-band-text); outline-offset: 2px; }
/* アイコンは 06b と同じ擬似要素＋mask（文言を書き換えても消えない） */
.p-cta__line .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  /* 🔄 2026-09-26 QA（W3C CSS）＝`mask` の一括指定は検査で解析できない＝個別の指定に分けた（表示は同じ） */
  -webkit-mask-image: url("../img/icon/line.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../img/icon/line.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.p-cta__address {
  margin-top: var(--space-md);
  color: var(--color-band-text-muted);   /* 黒面 */
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
}

/* 🔴🔴 **PC指定は基準指定より後ろに置く**（BUILD §3.1） */
@media (min-width: 768px) {
  .p-cta { padding-block: calc(var(--space-5xl) + var(--space-xl)); }   /* 160px＝他セクション（128px）より広く */
  .p-cta__copy { font-size: var(--font-size-2xl); }
  .p-cta__lead,
  .p-cta__facts { font-size: var(--font-size-sm); }
  /* 即答3点はPCで横並び（FVの即答チップと同じ）＝縦に3行積むと720pxの面で間延びする */
  .p-cta__facts { display: flex; }
  /* 2行に折れる項目があっても3つの文字が上下中央で揃う（2026-09-18 実測で中央だけ浮いていた） */
  .p-cta__facts li { flex: 1; display: flex; align-items: center; justify-content: center; }
  .p-cta__facts li + li { border-top: 0; border-left: 1px solid var(--color-band-line); }
  .p-cta__line { width: auto; }
  .p-cta__line .wp-block-button__link {
    min-width: 360px;
    padding: var(--space-lg) var(--space-2xl);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   15 フッター（WF brief §15・2026-09-18 実装）
   🔴 **終わった後の案内板**＝ロゴ／プライバシーポリシー／SNS（開設後）／コピーライトだけ。静かに終える。
   🔴 **ロゴは必ず明色面**（Q20③）＝背景は白。🔄 14 が黒面になったので境目は色の切り替わりが持つ（罫線は外した）。
   ⚠ SPの追従バーぶんの余白は `body` が持つ（上の `--sticky-bar-h`）＝ここで二重に足さない。
   ═══════════════════════════════════════════════════════════════════ */
.l-footer {
  /* 🔄 2026-09-18＝14 を黒面にしたので上の罫線は外した（黒と白の境目がそのまま区切りになる） */
  padding: var(--space-3xl) var(--container-gutter-sp) var(--space-2xl);
}
.l-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}
.l-footer__logo { display: block; line-height: 0; }
/* 🔄 2026-09-25 SPもPCと同じ弧あり版（泊さんご依頼）。旧＝弧なし版72px（Q20⑤）
   幅104＝枠の大きさは旧72pxと同じ（72×405/280）。弧ごと中央に置く＝PCと同じ */
.l-footer__logo-img { width: 104px; height: auto; }

/* 🔄 2026-09-25 SNS は文字リンク → 丸いボタン（`.c-sns`）＝下の文字リンク用の指定から `.l-footer__sns` を外した */
.l-footer__menu {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-xs);
}
/* 🔄 2026-09-19 下線に transition（ユーザー指示）＝13 ブログのタイトルと同じ方式。
   下線は常に引き、色を透明→文字色へ 0.8s（文字色の muted→本文色も同じ尺） */
.l-footer__menu a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: color var(--motion-dur-mid) var(--motion-ease),
              text-decoration-color var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  .l-footer__menu a:hover { color: var(--color-text); text-decoration-color: currentColor; }
}

.l-footer__copy {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-heading-latin);
  letter-spacing: 0.08em;
}
.l-footer__copy small { font-size: var(--font-size-xs); }

/* 🔴🔴 **PC指定は基準指定より後ろに置く**（BUILD §3.1） */
@media (min-width: 768px) {
  .l-footer { padding: var(--space-4xl) var(--container-gutter-pc) var(--space-2xl); }
  .l-footer__logo-img { width: 160px; }
}

/* ── 14 をカード型に（2026-09-18・ユーザー指示「contactをカード型に」） ──────────
   🔵 **黒の面を全幅に敷かず、白地に浮かぶ黒いカードにする**＝左右と下に白が残るので、
      PCでも黒が画面を埋めず、ページの白黒の対比が最後まで保てる（15 を黒にしなかった判断と同じ理由）。
   🔵 **本文（DB）は触っていない**＝section 自体をカードにしている。戻すならこのブロックを消すだけ。
   🔄 角丸（2px）は同日「角の意匠」に置き換えた（下のブロック）。 */
.p-cta {
  width: auto;
  /* 下の白＝この32px＋フッター上の余白（SP64）＝96px＝カードの上の白（直前セクションの下余白 96）と同量 */
  /* 🔄 2026-09-19 上に 32px を足した（ユーザー指示「ブログとの間が狭い」）＝ブログ下96＋32＝**128＝下（32＋フッター上96）と同量** */
  margin: var(--space-xl) var(--container-gutter-sp) var(--space-xl);
  padding-inline: var(--space-lg);
}
@media (min-width: 768px) {
  .p-cta {
    width: min(var(--container-max) + var(--space-5xl) * 2, 100% - var(--container-gutter-pc) * 2);
    margin: var(--space-xl) auto var(--space-xl);   /* 上＝ブログ下96＋32／下＝32＋フッター上96＝どちらも128（2026-09-19 上を追加） */
    padding-block: var(--space-4xl);
    padding-inline: var(--space-2xl);
  }
}

/* ── 14 カードの角の意匠（2026-09-18・ユーザー指示「角のデザインをリッチな感じに」） ──────────
   🔴 **語彙は 06b の対角線モチーフと同じ＝ロゴ由来の45°**（DESIGN §4「切り抜き」に展開してよいと明示）。
      新しい飾り（アイコン・模様）は足さない。**色も帯の罫線 `--color-band-line` だけ**。
   ⑴ **左上・右下を45°で切り落とす**（clip-path）＝ロゴの上がり対角と同じ向きの切り口。
      角丸（2px）はこれに置き換えた。
   ⑵ **切り口の内側に平行な細線を1本**（::after の背景）＝二重の切り口で「仕立て」を感じさせる。
   ⑶ **右上・左下に細いL字の角飾り**（::before の背景）＝⑴⑵と対角で呼応させ、4隅すべてに手を入れる。
   🔵 **DOMは増やしていない**＝擬似要素と背景だけ。戻すならこのブロックを消すだけ。 */
.p-cta {
  --cta-cut: 24px;                 /* 切り落とし（SP） */
  --cta-rule: 40px;                /* 平行線の位置＝切り落とし＋16px */
  --cta-corner: 32px;              /* L字の腕の長さ */
  --cta-corner-inset: 16px;        /* L字の内側への寄せ */
  position: relative;
  clip-path: polygon(
    var(--cta-cut) 0, 100% 0,
    100% calc(100% - var(--cta-cut)), calc(100% - var(--cta-cut)) 100%,
    0 100%, 0 var(--cta-cut)
  );
}
.p-cta > * { position: relative; }   /* 擬似要素より前に出す（06b と同じ受け方） */
.p-cta::before,
.p-cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
/* ⑶ L字の角飾り（右上・左下） */
.p-cta::before {
  inset: var(--cta-corner-inset);
  background:
    linear-gradient(var(--color-band-line), var(--color-band-line)) top right / var(--cta-corner) 1px no-repeat,
    linear-gradient(var(--color-band-line), var(--color-band-line)) top right / 1px var(--cta-corner) no-repeat,
    linear-gradient(var(--color-band-line), var(--color-band-line)) bottom left / var(--cta-corner) 1px no-repeat,
    linear-gradient(var(--color-band-line), var(--color-band-line)) bottom left / 1px var(--cta-corner) no-repeat;
}
/* ⑵ 切り口に平行な細線（左上・右下）＝正方形の対角に1pxの線を引いた背景を2隅に置く */
.p-cta::after {
  inset: 0;
  background:
    linear-gradient(to bottom right,
      transparent calc(50% - 1px), var(--color-band-line) calc(50% - 1px),
      var(--color-band-line) 50%, transparent 50%) top left / var(--cta-rule) var(--cta-rule) no-repeat,
    linear-gradient(to bottom right,
      transparent calc(50% - 1px), var(--color-band-line) calc(50% - 1px),
      var(--color-band-line) 50%, transparent 50%) bottom right / var(--cta-rule) var(--cta-rule) no-repeat;
}
@media (min-width: 768px) {
  .p-cta {
    --cta-cut: 48px;
    --cta-rule: 72px;
    --cta-corner: 56px;
    --cta-corner-inset: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ボタンのホバー（全種共通・2026-09-19）
   🔴 **ホバー＝不透明度 0.8 に薄くするだけ**（4種すべて同じ）。
   経緯＝同日「ホバーのアニメーションを改善」で「左から満ちて白黒反転」を実装 → 「印象が強い」で 0.8s に弱める
        → **「通常の opacity でいい」**（ユーザー判断）で戻した。
      ⚠ 旧実装では輪郭線のボタン（白地＋黒枠・黒面の白枠）だけ**瞬時に白黒反転**していた＝種類ごとに動きが違った。
        今回そちらも opacity に揃えた（反転はしない）。
   🔵 ホバーできる端末だけ（@media (hover: hover)）＝スマホでタップ後に薄いまま残らない。
   ⚠ このブロックはファイルの末尾に置く（各ボタンの transition 指定より後ろで効かせる）
   ═══════════════════════════════════════════════════════════════════ */
.c-btn,
.p-band__actions .wp-block-button__link,
.p-cta__line .wp-block-button__link {
  transition: opacity var(--motion-dur-mid) var(--motion-ease);   /* 0.8s（2026-09-19 ユーザー指示・旧 0.2s） */
}
@media (hover: hover) {
  .c-btn:hover,
  .p-band__actions .wp-block-button__link:hover,
  .p-cta__line .wp-block-button__link:hover { opacity: 0.8; }
}

/* ═══════════════════════════════════════════════════════════════════
   ナビ（サイドバー・SPドロワー）のリンク — 2026-09-19 ユーザー指示
   🔵 ホバー＝**opacity 0.6・0.8s**（ボタンと同じ尺・同じ作法。文字だけのリンクは 0.8 だと変化が見えないので一段濃く薄める）。
      旧＝下線が 0.2s で出る（横帯ヘッダー時代の指定）
   🔴 **セクションへ飛んだとき固定ヘッダーの下に見出しが潜らない**＝1023px までは上に SP ヘッダー（56px）がある。
      1024px〜はサイドバー（左）なので上の余白は要らない
   ═══════════════════════════════════════════════════════════════════ */
.l-header__menu a,
.l-drawer__menu a { transition: opacity var(--motion-dur-mid) var(--motion-ease); }
@media (hover: hover) {
  .l-header__menu a:hover,
  .l-drawer__menu a:hover { opacity: 0.6; }
}
main [id] { scroll-margin-top: var(--header-h-sp); }
@media (min-width: 1024px) {
  main [id] { scroll-margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   🔄 2026-09-19 スマホ（〜767px）はセクションの上下余白を 96 → 48px（--space-2xl）
   ユーザー指示「スマホでは各セクションの上下が広い」。PC・タブレット（768px〜）は 96px のまま。
   対象＝03〜14 の全セクション＋LINE の帯2本（06b・08b）＋14 の黒いカード。
   ⚠ 各セクションは自分で padding-block を持つ作法（.p-sec は padding-inline のみ）＝ここでまとめて上書きする。
      **このブロックはファイルの末尾に置く**（各セクションの指定より後ろで効かせる）
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .p-problem, .p-reason, .p-price, .p-delivery, .p-works, .p-flow, .p-menu,
  .p-profile, .p-voice, .p-faq, .p-blog, .p-cta, .p-band { padding-block: var(--space-2xl); }
}

/* ═══════════════════════════════════════════════════════════════════
   右向き三角のボタン：ホバーで三角が右へ 4px（2026-09-19 ユーザー指示）
   尺はボタンのホバー（opacity）と同じ 0.8s。⚠ 下向き（ページ内リンク＝#…の副ボタン）は対象外
   ═══════════════════════════════════════════════════════════════════ */
.c-btn--ghost:not([href^="#"])::after,
.p-fv__cta::after,
.l-drawer__cta::after,
.l-header__cta::after,
.p-entry-side__line::after,
.p-band__actions .wp-block-button__link::after,
.p-cta__line .wp-block-button__link::after {
  transition: transform var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  .c-btn--ghost:not([href^="#"]):hover::after,
  .p-fv__cta:hover::after,
  .l-drawer__cta:hover::after,
  .l-header__cta:hover::after,
  .p-entry-side__line:hover::after,
  .p-band__actions .wp-block-button__link:hover::after,
  .p-cta__line .wp-block-button__link:hover::after { transform: translateX(4px); }
}


/* ═══════════════════════════════════════════════════════════════════
   ブログ記事（single.php・BUILD §6）— 2026-09-19
   🔵 **標準ブロックの素直な表示**。新しい飾りは作らない＝既存の語彙（明朝の見出し・罫線 --color-line・
      欧文セリフの日付・副ボタン）だけで組む。
   🔵 **本文の列は 720px**（--container-narrow）＝1行 約40字。LP の 960px は読み物には広い。
   🔄 2026-09-19 **720 → 760px**（ユーザー指示「本文の幅をもう少し広げて」）＝1行 約45字（和文の読みやすさの上限の側）。
      --container-narrow は tokens.css（自動生成）なので変えず、記事ページ専用の --entry-max を持つ。サイドバー幅も同じ場所で持つ
   🔵 **本文は SP でも 16px**＝§4.5「読ませる本文 SP14」は LP の短文向け。記事は長文を読ませるので下げない。
   🔴 **本文の指定は編集画面にも効かせる**（2026-09-19 ユーザー指摘「管理画面の各テキスト間に余白がない」）＝
      `:is(.p-entry__body, .post-type-post .is-root-container)`。編集画面の iframe の body に `post-type-post` が付く（実測）。
      ⚠ **固定ページ（LP本文＝`post-type-page`）には当てない**＝LP のブロックはリセットの margin:0 を前提に組んである。
      ⚠ 詳細度は (0,2,0) に上がる＝本文の中の指定はすべて同じ `:is()` で書く（片方だけ素の `.p-entry__body` にすると負ける）。
   ⚠ `.p-entry` は index.php（フォールバック）とも共有＝素の固定ページが来ても崩れない指定だけにする。
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --entry-max: 760px;     /* 記事の本文の列（見出し・アイキャッチ・目次・本文・記事の下・編集画面） */
  --entry-side-w: 240px;  /* 右サイドバー（1200px〜）。旧 264px */
}
.p-entry {
  /* SP・〜1023px はヘッダーが上に固定（56px）＝その分を足して始める。1024px〜は左サイドバーなので足さない */
  padding: calc(var(--header-h-sp) + var(--space-2xl)) var(--container-gutter-sp) var(--space-3xl);
}
.p-entry__head,
.p-entry__thumb,
.p-entry__body,
.p-entry__foot {
  max-width: var(--entry-max);
  margin-inline: auto;
}

/* 日付＝13 `.p-blog__date` と同じ型（欧文セリフ・muted） */
.p-entry__date {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
}
.p-entry__title {
  margin-top: var(--space-xs);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 🔵 比率は 13 のカードと同じ 1024:643＝一覧で見た絵がそのままの切り取りで出る */
.p-entry__thumb {
  margin-top: var(--space-xl);
  aspect-ratio: 1024 / 643;
  overflow: hidden;
  background: var(--color-surface);
}
.p-entry__img { width: 100%; height: 100%; object-fit: cover; }

/* ── 本文（標準ブロック） ───────────────────── */
.p-entry__body {
  margin-top: var(--space-2xl);
  line-height: var(--line-height-base);
  word-break: auto-phrase;   /* ⚠ Safari 未対応＝保険 */
}
/* 🔴 2026-09-26 QA＝区切りのない長い英字（URL・英単語・英字だけのタイトル）が折り返されず横にはみ出した
   （記事 375px で横幅 1748px／英字タイトルが 13 のカードを広げてトップ全体が横スクロール）。
   anywhere＝ほかに折れる所が無い文字列だけを枠の端で折る＝日本語・空白のある英文の折り返しは変わらない。
   break-word ではなく anywhere＝最小幅の計算にも効き、13・一覧のカードが中身に押し広げられない */
.p-entry__title,
.p-entry__body,
.p-entry__pager,
.p-archive__title,
.p-blog__title,
.p-entry-side,
.p-works__modal-title,
.p-works__modal-body {
  overflow-wrap: anywhere;
}
/* 🔴 リセットで p・ul の margin を 0 にしている＝本文の中だけ段落の間を戻す */
:is(.p-entry__body, .post-type-post .is-root-container) > * + * { margin-top: var(--space-lg); }

:is(.p-entry__body, .post-type-post .is-root-container) a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
:is(.p-entry__body, .post-type-post .is-root-container) strong { font-weight: 700; }

/* 🔄 2026-09-19 h2＝**塗りの帯＋白抜き文字＋帯の上下に少し離した細線**（ユーザー指示・参考画像あり）。
   旧＝上に罫線1本（全幅・淡い）。
   🔴 **色は画像の緑ではなくサイトの黒（--color-band-bg）**＝⑴ 案B（純白×黒）の外の色 ⑵ 画像の淡い緑×白文字は約1.8:1 で AA 不足。
      06b・08b の黒帯と同じ色・同じ白文字＝ページ内の既存の語彙。
   🔵 上下の細線は box-shadow の重ね＝白 4px の隙間 → 1px の線（border だと帯に密着して「隙間」が作れない）。
   ⚠ 書体の太さは 500 のまま＝Shippori Mincho B1 は 500 しか読み込んでいない（太字にすると疑似ボールドで崩れる） */
:is(.p-entry__body, .post-type-post .is-root-container) > h2 {
  margin-top: var(--space-3xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-band-bg);
  color: var(--color-band-text);
  box-shadow:
    0 -4px 0 var(--color-bg), 0 -5px 0 var(--color-line),
    0 4px 0 var(--color-bg), 0 5px 0 var(--color-line);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  word-break: auto-phrase;
}
/* 🔄 2026-09-19 h3 にも罫線（ユーザー指示「h3にもh2のようにスタイルを」）。
   🔄 同日 **h2 と同じ全幅の罫線では「違いが一目でわからない」**（ユーザー指摘）➡️ **h3 は左端に短い黒線（24px）だけ**。
      h2＝全幅・淡い（--color-line）／h3＝短い・濃い（--color-text）＝**長さと濃さの両方で見分ける**。
      線は background で引く（疑似要素を増やさない）。⚠ 引用の「左の縦線 2px」とは向きが違うので混同しない */
/* 🔄 2026-09-19 さらに **参考画像の型＝下線2色**（ユーザー指示「h3はこちらに」）＝全幅の淡い線（1px）の左 30% に濃い線（2px）を重ねる。
   旧＝左上の短い黒線 24px。h2（黒の帯）とは「面か線か」で見分ける。色は既存トークン（--color-line／--color-text-muted）＝画像の灰に近い2色 */
:is(.p-entry__body, .post-type-post .is-root-container) > h3 {
  margin-top: var(--space-2xl);
  padding: 0 var(--space-xs) var(--space-sm);
  background:
    linear-gradient(var(--color-text-muted), var(--color-text-muted)) left bottom / 30% 2px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) left bottom / 100% 1px no-repeat;
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
  letter-spacing: var(--font-body-tracking);   /* §4.5＝小さい見出しに 0.10em は開きすぎる */
}
:is(.p-entry__body, .post-type-post .is-root-container) > h3 + * { margin-top: var(--space-xl); }   /* 🔄 2026-09-19 16→32px（ユーザー指示「h3も同じく」＝h2 と同じ値） */
:is(.p-entry__body, .post-type-post .is-root-container) > h2 + * { margin-top: var(--space-xl); }   /* 帯の下に線（+5px）がある＝h3 より一段空ける。🔄 2026-09-19 24→32px（ユーザー指示「h2の下に少し余白」） */

/* リスト＝リセットで消えた記号を本文の中だけ戻す */
:is(.p-entry__body, .post-type-post .is-root-container) ul { padding-left: 1.5em; list-style: disc; }
:is(.p-entry__body, .post-type-post .is-root-container) ol { padding-left: 1.5em; list-style: decimal; }
:is(.p-entry__body, .post-type-post .is-root-container) li + li { margin-top: var(--space-2xs); }
:is(.p-entry__body, .post-type-post .is-root-container) li::marker { color: var(--color-text-muted); }

:is(.p-entry__body, .post-type-post .is-root-container) figure img { width: 100%; }
:is(.p-entry__body, .post-type-post .is-root-container) figcaption {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

/* 引用＝左に罫線1本（11 お客様の声の出典と同じ語彙）。枠や背景は付けない */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-quote {
  margin-inline: 0;
  padding-left: var(--space-lg);
  border-left: 2px solid var(--color-text);
}
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-quote > * + * { margin-top: var(--space-xs); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-quote cite {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: normal;
}

/* 表＝横罫だけ（縦罫・塗りは使わない）。SP で列が多いときは横スクロール */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-table { overflow-x: auto; }
:is(.p-entry__body, .post-type-post .is-root-container) table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}
:is(.p-entry__body, .post-type-post .is-root-container) th,
:is(.p-entry__body, .post-type-post .is-root-container) td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border: 0;   /* 🔴 WP 標準の表スタイル（縦罫・外枠・thead の 3px）を消す＝横罫だけ（2026-09-19 実測で縦罫が出ていた） */
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}
:is(.p-entry__body, .post-type-post .is-root-container) thead { border: 0; }
:is(.p-entry__body, .post-type-post .is-root-container) thead th { border-bottom-color: var(--color-text); font-weight: 500; }

/* FAQ（標準の「詳細」ブロック）＝12 `.p-faq__item` と同じ見た目（Q.・右端の＋／−・罫線で区切る）。
   ⚠ 答え側に A. は付けない＝中身が段落とは限らない（リスト・画像も入る） */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details {
  border-bottom: 1px solid var(--color-line);
}
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details:not(.wp-block-details + .wp-block-details) { border-top: 1px solid var(--color-line); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details + .wp-block-details { margin-top: 0; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details[open] { padding-bottom: var(--space-lg); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details > summary {
  position: relative;
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
  letter-spacing: var(--font-body-tracking);
  list-style: none;
  cursor: pointer;
}
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details[open] > summary { padding-bottom: 0; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details > summary::-webkit-details-marker { display: none; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details > summary::before,
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details > summary::after {
  position: absolute;
  top: var(--space-lg);
  font-family: var(--font-heading-latin);
}
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details > summary::before { content: "Q."; left: 0; font-weight: 500; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details > summary::after { content: "+"; right: 0; color: var(--color-text-muted); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details[open] > summary::after { content: "\2212"; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details > summary:focus-visible { outline: 1px solid var(--color-text); outline-offset: 4px; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details > :not(summary) { margin-top: var(--space-sm); padding-left: var(--space-xl); }

/* ── 記事の下（前後の記事・一覧へ） ─────────────── */
.p-entry__foot { margin-top: var(--space-4xl); }
.p-entry__pager {
  display: grid;
  border-top: 1px solid var(--color-line);
}
.p-entry__pager-link {
  display: block;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-line);
  color: inherit;
  text-decoration: none;
}
.p-entry__pager-link--next { text-align: right; }
.p-entry__pager-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
/* タイトルのホバー＝13 と同じ（下線の色を 0.8s で出す） */
.p-entry__pager-title {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: var(--line-height-snug);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  .p-entry__pager-link:hover .p-entry__pager-title { text-decoration-color: currentColor; }
}
.p-entry__back {
  margin-top: var(--space-2xl);
  text-align: center;
}
.p-entry__back .c-btn { width: 100%; }

@media (min-width: 768px) {
  .p-entry { padding: calc(var(--header-h-sp) + var(--space-4xl)) var(--container-gutter-pc) var(--space-4xl); }
  .p-entry__title { font-size: var(--font-size-3xl); }
  :is(.p-entry__body, .post-type-post .is-root-container) > h2 { font-size: var(--font-size-xl); }
  :is(.p-entry__body, .post-type-post .is-root-container) > h3 { font-size: var(--font-size-lg); }
  :is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details > summary { font-size: var(--font-size-lg); }
  /* 前後の記事＝PCは左右に並べる（前＝左・次＝右） */
  .p-entry__pager { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); }
  .p-entry__pager-link--next { grid-column: 2; }
  .p-entry__back .c-btn { width: auto; min-width: 280px; }
}
@media (min-width: 1024px) {
  .p-entry { padding-top: var(--space-4xl); }   /* 上にヘッダーが無い（左サイドバー） */
}

/* ── 標準ブロックの網羅対応（2026-09-19 ユーザー指示「全てのブロックに対応できているか」）──
   テスト記事（全42ブロック）を PC/SP で撮って直したもの。🔴 **新しい飾りは作らない**＝色は黒・白・--color-line、
   ボタンは c-btn と同じ型、区切りは罫線1本。セレクタは本文と同じ :is(.p-entry__body, .post-type-post .is-root-container)（編集画面にも効く）。 */

/* 入れ子の器（グループ・カラム・カバー・メディアと文章・アコーディオンの中身）＝本文と同じ段落の間を戻す */
:is(.p-entry__body, .post-type-post .is-root-container) :is(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container,
       .wp-block-media-text__content, .wp-block-accordion-panel) > * + * { margin-top: var(--space-md); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-columns { gap: var(--space-xl); }

/* 回り込み（画像の左寄せ・右寄せ）＝クラシックテーマはテーマ側が持つ必要がある（未指定で float:none を実測） */
:is(.p-entry__body, .post-type-post .is-root-container) .alignleft  { float: left;  max-width: 50%; margin: var(--space-2xs) var(--space-lg) var(--space-md) 0; }
:is(.p-entry__body, .post-type-post .is-root-container) .alignright { float: right; max-width: 50%; margin: var(--space-2xs) 0 var(--space-md) var(--space-lg); }
:is(.p-entry__body, .post-type-post .is-root-container) .aligncenter { margin-inline: auto; }
:is(.p-entry__body, .post-type-post .is-root-container) > h2, :is(.p-entry__body, .post-type-post .is-root-container) > h3, :is(.p-entry__body, .post-type-post .is-root-container) > h4, :is(.p-entry__body, .post-type-post .is-root-container) > .wp-block-separator,
:is(.p-entry__body, .post-type-post .is-root-container) > .wp-block-table, :is(.p-entry__body, .post-type-post .is-root-container) > .wp-block-details, :is(.p-entry__body, .post-type-post .is-root-container) > .wp-block-accordion { clear: both; }   /* 見出しで回り込みを切る */

/* h4〜h6＝ブラウザ既定だと h5 が 13.28px（最小14px違反を実測）。本文と同じ大きさで明朝の太さで区別 */
/* 🔄 2026-09-19 h4＝**左に縦線1本**（ユーザー指示・参考画像あり）。画像の淡い緑ではなく既存の灰（--color-line より一段濃い muted は
   引用＝左 2px 黒と紛れるため、線は淡い --color-line の 2px）。h5・h6 は線なし＝h4 の型を下の階層まで広げない */
:is(.p-entry__body, .post-type-post .is-root-container) > h4 {
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-line);
}
/* 🔴 h5・h6 は reset の見出し指定（h1〜h4）から漏れていて、ブラウザ既定の太字ゴシックで **h4 より強く見えていた**（実測）。
   ➡️ 書体を見出しに揃え、h4 は 18px・h5/h6 は 16px にして階層の順を戻す */
:is(.p-entry__body, .post-type-post .is-root-container) > :is(h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}
:is(.p-entry__body, .post-type-post .is-root-container) > :is(h4, h5, h6) {
  margin-top: var(--space-xl);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  letter-spacing: var(--font-body-tracking);
}
:is(.p-entry__body, .post-type-post .is-root-container) > h4 { font-size: var(--font-size-md); margin-top: var(--space-2xl); }   /* 🔄 2026-09-19 上 32→48px（ユーザー指示「h4は上に少し余白」）＝h3 の前と同じ。h5/h6 は 32px のまま */

/* プルクオート＝上下の罫線1本ずつ・明朝。既定の上下 96px の余白と出典の斜体（和文の斜体は崩れる）を外す */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-pullquote {
  margin-inline: 0;
  padding: var(--space-xl) 0;
  border-block: 1px solid var(--color-text);
  text-align: center;
}
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-pullquote blockquote { margin: 0; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-pullquote p {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
}
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-pullquote cite {
  display: block;
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: normal;
}

/* コード・整形済み＝等幅＋淡い面。長い行は折らずに横スクロール（コードは折ると意味が変わる） */
:is(.p-entry__body, .post-type-post .is-root-container) :is(.wp-block-code, .wp-block-preformatted) {
  overflow-x: auto;
  padding: var(--space-md);
  background: var(--color-surface);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  white-space: pre;
  word-break: normal;
}
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-verse { font-family: var(--font-heading); white-space: pre-wrap; }
:is(.p-entry__body, .post-type-post .is-root-container) :not(pre) > code {
  padding: 0 var(--space-2xs);
  background: var(--color-surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
}

/* 表のフッター＝WP 標準の上 3px を 1px の黒に（thead の下と揃える） */
:is(.p-entry__body, .post-type-post .is-root-container) tfoot { border-top: 0; }
:is(.p-entry__body, .post-type-post .is-root-container) tfoot td { border-top: 1px solid var(--color-text); font-weight: 500; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-table figcaption { text-align: left; }

/* アコーディオン（WP7 の新ブロック）＝「詳細」ブロックと同じ罫線の区切り */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion { border-top: 1px solid var(--color-line); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-item { border-bottom: 1px solid var(--color-line); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-heading { margin: 0; font-size: var(--font-size-md); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-heading__toggle { padding-block: var(--space-lg); }
/* 🔴 下の余白は panel の padding ではなく中身の margin で取る＝閉じたとき高さ0で隠す（padding は0でも残る） */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-panel > :last-child { margin-bottom: var(--space-lg); }

/* ボタン（ボタン・ファイルのダウンロード・検索）＝ c-btn と同じ型＝黒ベタ・角 2px・下線なし。
   既定は灰色の丸ピル＋本文リンクの下線が乗っていた（実測） */
:is(.p-entry__body, .post-type-post .is-root-container) :is(.wp-block-button__link, .wp-block-file__button, .wp-block-search__button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  border: 1px solid var(--color-cta-bg);
  border-radius: var(--radius-sm);
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  text-decoration: none;
  transition: opacity var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  :is(.p-entry__body, .post-type-post .is-root-container) :is(.wp-block-button__link, .wp-block-file__button, .wp-block-search__button):hover { opacity: 0.8; }
}
:is(.p-entry__body, .post-type-post .is-root-container) .is-style-outline > .wp-block-button__link { background: var(--color-bg); color: var(--color-text); border-color: var(--color-text); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-file:not(.wp-element-button) { font-size: var(--font-size-base); }   /* 既定 0.8em＝12.8px（実測） */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-file > a:not(.wp-block-file__button) { font-size: inherit; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-file__button { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-xs); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-search__input { border: 1px solid var(--color-text); border-radius: var(--radius-sm); padding: var(--space-sm); font-size: var(--font-size-base); }

/* 区切り線＝1px の --color-line（既定は灰の2px） */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-separator {
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  margin-block: var(--space-2xl);
}

/* ウィジェット系＝最小 14px を守る（最新の投稿の日付 13px を実測） */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-latest-posts__post-date { color: var(--color-text-muted); font-size: var(--font-size-xs); }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-calendar th { background: none; font-weight: 500; }
/* タグクラウドは WP が文字の大きさを style 属性で直書きする（最小 8pt）＝!important でしか 14px を守れない。
   ⚠ 代わりに「大きさで多さを見せる」機能は消える（記事が少ないうちは意味がない＝カテゴリを置かないのと同じ理由） */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-tag-cloud a { font-size: var(--font-size-xs) !important; }

/* 前後の記事のタイトル＝SP で「い？」だけ落ちるのを防ぐ */
.p-entry__pager-title { text-wrap: pretty; }

/* ── アコーディオン（WP7）の開閉＝12 と同じ動き・同じ「＋／−」（2026-09-19 ユーザー指示） ──
   🔴 core は閉じると `[inert]` に display:none＝高さを動かせない。**フロントだけ**箱を残して高さ0で隠し、main.js が高さを動かす。
   ⚠ 編集画面（.is-root-container）には当てない＝編集中は中身が見えていないと直せない */
.p-entry__body .wp-block-accordion-panel,
.p-entry__body .wp-block-accordion-panel[inert] { display: flow-root; }
/* ↑ flow-root＝中身の下余白を常に高さへ含める。⚠ 無いと開いた状態（余白が外へ抜ける）と動かしている間（overflow:hidden で内側に入る）で
   高さが 29px／53px と食い違い、閉じ始めに一度跳ねた（2026-09-19 実測） */
.p-entry__body .wp-block-accordion-item:not(.is-open) > .wp-block-accordion-panel { height: 0; overflow: hidden; }
/* アイコン＝12 と同じく文字の＋／−（core の「＋を45°回して×」はやめる）。見出しのホバー下線も 12 に無いので外す */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-heading__toggle-icon { position: relative; width: 1em; font-size: 0; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-heading__toggle-icon::after {
  content: "+";
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon { transform: none; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after { content: "\2212"; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: none; }
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-accordion-heading__toggle:focus-visible { outline: 1px solid var(--color-text); outline-offset: 4px; }
/* 記事の「詳細」ブロック＝閉じるアニメーション中は押した時点で＋に（12 の .is-closing と同じ） */
:is(.p-entry__body, .post-type-post .is-root-container) .wp-block-details.is-closing > summary::after { content: "+"; }

/* ── ブログ記事の目次（inc/toc.php・2026-09-19 ユーザー承認） ──
   🔵 新しい飾りは作らない＝上下の罫線（08・12 と同じ --color-line）＋欧文ラベル（c-sec-en と同じ型を左揃えで）。
   h2＝明朝／h3＝一段下げて本文書体・14px。番号・記号は付けない（リストの記号はリセット済み） */
.p-entry__toc {
  max-width: var(--entry-max);
  margin: var(--space-2xl) auto 0;
  padding-block: var(--space-lg);
  border-block: 1px solid var(--color-line);
}
.p-entry__toc-en {
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.24em;
  line-height: 1.2;
  color: var(--color-text-muted);
}
.p-entry__toc-title {
  margin-top: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-md);
  letter-spacing: var(--font-heading-tracking);
}
/* 🔄 2026-09-19 **h2 だけ番号を振る**（ユーザー指示）＝ 08「ご依頼の流れ」の `01` と同じ型（明朝・muted・2桁）。
   番号は CSS カウンター＝HTML に書かない（読み上げは ol の順番が担う）。h3 には振らない。
   🔵 番号の欄は 2.5em 固定＝2行に折れた見出しも、下の h3 も、番号の右の文字の左端に揃う */
.p-entry__toc-list { margin-top: var(--space-md); counter-reset: msd-toc; }
.p-entry__toc-item + .p-entry__toc-item { margin-top: var(--space-sm); }   /* 🔄 2026-09-19 8→12px（ユーザー指示「少し上下に間隔を」） */
.p-entry__toc-list > .p-entry__toc-item:not(.p-entry__toc-item--h3) { counter-increment: msd-toc; }
.p-entry__toc-list > .p-entry__toc-item:not(.p-entry__toc-item--h3) > .p-entry__toc-link {
  display: grid;
  grid-template-columns: 2.5em 1fr;
}
/* ⚠ grid の子にすると下線（text-decoration）が番号へ伝わらない＝ホバーの下線は見出しの文字だけに出る */
.p-entry__toc-list > .p-entry__toc-item:not(.p-entry__toc-item--h3) > .p-entry__toc-link::before {
  content: counter(msd-toc, decimal-leading-zero);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-text-muted);
}
.p-entry__toc-sub { margin-top: var(--space-sm); padding-left: 2.5em; }   /* h2→h3 も項目の間と同じ 12px */
.p-entry__toc-item--h3 .p-entry__toc-link { font-size: var(--font-size-xs); color: var(--color-text-muted); }
/* リンクのホバー＝13・前後の記事と同じ（下線の色を 0.8s で出す） */
.p-entry__toc-link {
  display: inline-block;
  color: inherit;
  line-height: var(--line-height-snug);
  text-decoration: none;
}
/* 🔴 下線は文字（span）だけ＝番号に伝わらない（旧＝a に付けていて、番号「02」にも下線が出ていた・2026-09-19 実測） */
.p-entry__toc-text {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  .p-entry__toc-link:hover .p-entry__toc-text { text-decoration-color: currentColor; }
}
.p-entry__toc-link:focus-visible { outline: 1px solid var(--color-text); outline-offset: 2px; }
/* 目次から飛んだ先＝SP は固定ヘッダー（56px）＋少し余白を空けて止める。1024px〜はヘッダーが左なので余白だけ */
.p-entry__body :is(h2, h3)[id] { scroll-margin-top: calc(var(--header-h-sp) + var(--space-lg)); }
@media (min-width: 1024px) {
  .p-entry__body :is(h2, h3)[id] { scroll-margin-top: var(--space-2xl); }
}

/* ═══════════════════════════════════════════════════════════════════
   ブログ記事の右サイドバー（inc/sidebar.php・2026-09-19 ユーザー判断）
   🔵 **1200px〜は本文の右**（grid：本文 最大720px＋サイドバー 264px・間 48px）。**本文は左へ寄る**（ユーザー指示）＝
      1200px ではサイドバー分だけ本文が縮む（実測は下の記録）。1440px 以上は2列の組ごと中央。
   🔵 **〜1199px は記事の下に積む**（プロフィール・料金カード）。右の目次は隠す＝本文の上の目次があるため。
   🔵 飾りは既存の語彙だけ＝罫線 --color-line・欧文ラベル・副ボタン（c-btn--ghost）
   ═══════════════════════════════════════════════════════════════════ */
.p-entry-side {
  max-width: calc(var(--entry-max) + var(--container-gutter-sp) * 2);
  margin-inline: auto;
  padding: 0 var(--container-gutter-sp) var(--space-3xl);
}
.p-entry-side__block {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-line);
}
.p-entry-side__block:last-of-type { border-bottom: 1px solid var(--color-line); }
.p-entry-side__en {
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.24em;
  line-height: 1.2;
  color: var(--color-text-muted);
}
/* .p-entry-side__profile-row / 80px の写真は 2026-09-19 のプロフィールカード化で廃止（下の「プロフィールカード」） */
.p-entry-side__name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-md);
  letter-spacing: var(--font-heading-tracking);
}
.p-entry-side__role {
  margin-top: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
}
.p-entry-side__more { margin-top: var(--space-md); font-size: var(--font-size-xs); }
.p-entry-side__link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.p-entry-side__price-text {
  margin-top: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: var(--line-height-snug);
  word-break: auto-phrase;
}
.p-entry-side__btn { margin-top: var(--space-md); }
.p-entry-side__btn .c-btn { width: 100%; }
.p-entry-side__sticky { display: none; }

@media (min-width: 1200px) {
  .p-entry-layout {
    display: grid;
    /* 🔄 2026-09-19 本文を広げる（ユーザー指示）＝サイドバー 264→240・間 48→40・左右の余白 40→32px。
       実測は BUILD §6（1200px で本文 568→616px／1440px で 720→760px） */
    grid-template-columns: minmax(0, var(--entry-max)) var(--entry-side-w);
    column-gap: var(--container-gutter-pc);   /* 40px */
    justify-content: center;
    padding-inline: var(--space-xl);          /* 32px */
  }
  .p-entry { padding-inline: 0; }
  .p-entry-side {
    max-width: none;
    margin: 0;
    padding: var(--space-4xl) 0;   /* 上端を本文の日付と揃える（.p-entry の上余白と同じ） */
  }
  .p-entry-side__block:last-of-type { border-bottom: 0; }
  /* 🔵 追従する目次＝サイドバーの一番下に置き、記事の終わりまで画面に残る（aside は grid で本文と同じ高さ） */
  /* 🔄 2026-09-19 目次の下に CTA（ユーザー指示）＝枠を縦の flex にし、**目次だけがスクロール・CTA は常に見える**。
     目次が長くて画面に収まらない記事でも、CTA が枠の外へ押し出されない */
  .p-entry-side__sticky {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--space-2xl);
    max-height: calc(100vh - var(--space-2xl) * 2);
  }
  .p-entry-side__toc { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .p-entry-side__cta {
    flex: none;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-line);
  }
  .p-entry-side__toc + .p-entry-side__cta { border-top: 0; }   /* 目次の下の罫線がそのまま区切りになる（2本にしない） */
  /* 幅 240px に1行で＝左右の余白を 32→16px・折り返さない（初版「LINEで相談する（無料）」が「（無／料）」で折れた・実測）。
     🔄 同日 文言を左サイドバーと同じ「LINEで相談する」＋三角に */
  .p-entry-side__line { width: 100%; margin-top: var(--space-sm); padding-inline: var(--space-md); font-size: var(--font-size-xs); white-space: nowrap; }
  .p-entry__toc--side { max-width: none; margin: 0; }
  .p-entry__toc--side .p-entry__toc-link { font-size: var(--font-size-xs); color: var(--color-text-muted); }
  .p-entry__toc--side .p-entry__toc-item + .p-entry__toc-item,
  .p-entry__toc--side .p-entry__toc-sub { margin-top: var(--space-xs); }
  /* いま読んでいる見出し＝文字を濃く・下線（ホバーと同じ語彙）。main.js が is-current を付け替える */
  .p-entry__toc--side .p-entry__toc-link.is-current { color: var(--color-text); }
  .p-entry__toc--side .p-entry__toc-link.is-current .p-entry__toc-text { text-decoration-color: currentColor; }
}

/* ── 記事のカテゴリー（タイトルの下・2026-09-19 ユーザー指示） ──
   🔵 新しい飾りは作らない＝細い罫線の枠（--color-line）＋ muted の 14px。ホバーで枠と文字を濃く（0.8s）。
   複数あれば横に並べて折り返す */
.p-entry__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.p-entry__cat {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  text-decoration: none;
  transition: color var(--motion-dur-mid) var(--motion-ease), border-color var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  .p-entry__cat:hover { color: var(--color-text); border-color: var(--color-text); }
}
.p-entry__cat:focus-visible { outline: 1px solid var(--color-text); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   ブログ一覧・カテゴリー一覧（home.php / category.php・2026-09-19）
   🔵 枠は記事ページと同じ（.p-entry-layout＝1200px〜右サイドバー）。カードは トップ 13 と同じ型
      （サムネ 1024:643・日付＝欧文セリフ・タイトル＝明朝・ホバーで画像1.05倍＋下線）＋カテゴリー＋抜粋2行。
   🔵 2列（768px〜）・SP 1列。1ページ12件（inc/blog-list.php）
   ═══════════════════════════════════════════════════════════════════ */
.p-archive__head { max-width: var(--entry-max); margin-inline: auto; }
.p-archive__en {
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.24em;
  line-height: 1.2;
  color: var(--color-text-muted);
}
.p-archive__head .p-entry__title { margin-top: var(--space-xs); }
.p-archive__desc { margin-top: var(--space-md); color: var(--color-text-muted); font-size: var(--font-size-xs); }

.p-archive__list {
  display: grid;
  gap: var(--space-2xl) var(--space-xl);
  max-width: var(--entry-max);
  margin: var(--space-2xl) auto 0;
}
.p-archive__link { display: block; color: inherit; text-decoration: none; }
.p-archive__thumb {
  display: block;
  aspect-ratio: 1024 / 643;
  overflow: hidden;
  background: var(--color-surface);
}
.p-archive__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-dur-mid) var(--motion-ease);
}
.p-archive__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  margin-top: var(--space-sm);
}
.p-archive__date {
  color: var(--color-text-muted);
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
}
/* カテゴリー＝記事ページの .p-entry__cat と同じ枠（カードの中なのでリンクにはしない） */
.p-archive__cat {
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
}
.p-archive__title {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
  word-break: auto-phrase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--motion-dur-mid) var(--motion-ease);
}
/* 抜粋＝2行で切る（ユーザー回答） */
.p-archive__excerpt {
  display: -webkit-box;
  margin-top: var(--space-xs);
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* 2026-09-26 接頭辞なしの line-clamp は W3C で未定義＝外した（効いているのはこちら） */
}
@media (hover: hover) {
  .p-archive__link:hover .p-archive__img { transform: scale(1.05); }
  .p-archive__link:hover .p-archive__title { text-decoration-color: currentColor; }
}
.p-archive__link:focus-visible { outline: 1px solid var(--color-text); outline-offset: 4px; }

.p-archive__empty { max-width: var(--entry-max); margin: var(--space-2xl) auto 0; }

/* ページ送り＝数字は欧文セリフ・今のページは黒ベタ（c-btn と同じ黒）。前へ／次へは文字 */
.p-archive__pager { max-width: var(--entry-max); margin: var(--space-3xl) auto 0; }
.p-archive__pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
}
.p-archive__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.p-archive__pager .page-numbers.current { background: var(--color-cta-bg); border-color: var(--color-cta-bg); color: var(--color-cta-text); }
.p-archive__pager .page-numbers.dots { border: 0; }
.p-archive__pager :is(.prev, .next) { font-family: var(--font-body); font-size: var(--font-size-xs); }
@media (hover: hover) {
  .p-archive__pager a.page-numbers:hover { border-color: var(--color-text); }
}

/* 🔄 2026-09-19 **カードを横並びに**（ユーザー指示「p-archive__link は横並びに」）＝左に画像・右に日付/カテゴリー・タイトル・抜粋。
   一覧は1列にして、記事の間は罫線1本（08・12 と同じ --color-line）。旧＝縦積みのカード2列。
   画像の欄＝SP 120px／768px〜 240px（比率はトップ 13 と同じ 1024:643 のまま） */
.p-archive__list { gap: 0; border-top: 1px solid var(--color-line); }
.p-archive__item { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-line); }
.p-archive__link {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: var(--space-md);
  align-content: start;
}
.p-archive__thumb { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.p-archive__link { grid-template-rows: auto auto 1fr; }   /* 画像が文字より高いとき、余った高さは最後の行が受ける */
.p-archive__meta,
.p-archive__title,
.p-archive__excerpt { grid-column: 2; align-self: start; }
/* 🔴 align-self:start が無いと、画像（PC 151px）に合わせて抜粋の枠が縦に伸び、**2行で切ったはずの3行目が半分見えていた**（2026-09-19 実測） */
.p-archive__meta { margin-top: 0; }
.p-archive__title { font-size: var(--font-size-base); }
@media (min-width: 768px) {
  .p-archive__item { padding-block: var(--space-xl); }
  .p-archive__link { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--space-xl); }
  .p-archive__title { font-size: var(--font-size-md); }
}

/* サイドバーのカテゴリー（2026-09-19）＝記事タイトルの下と同じ枠。いま開いている一覧のカテゴリーは黒ベタ */
.p-entry-side__cats .p-entry__cats { margin-top: var(--space-sm); }
.p-entry__cat[aria-current="page"] { background: var(--color-cta-bg); border-color: var(--color-cta-bg); color: var(--color-cta-text); }

/* ── ブログ一覧：スマホ（〜767px）は画像の上に文字を重ねるカード（2026-09-19 ユーザー指示・参考画像あり） ──
   🔵 画像を全幅に敷き、下半分に黒のグラデーション → 白文字でタイトル・日付・カテゴリー。**抜粋はスマホでは出さない**（参考画像に無い）。
   🔵 色は既存の黒（--color-band-bg＝#111）と白だけ。グラデーションは下端 80%＝白文字のコントラストを確保。
   ⚠ 参考画像の日付・カテゴリー前のアイコン（時計・フォルダ）は付けていない＝サイト内に同種のアイコンが無い（要望があれば足す）。
   768px〜は従来の横並び（左に画像・右に文字） */
@media (max-width: 767px) {
  .p-archive__list { gap: var(--space-lg); border-top: 0; }
  .p-archive__item { padding-block: 0; border-bottom: 0; }
  .p-archive__link {
    display: block;
    position: relative;
    overflow: hidden;
    color: var(--color-band-text);
  }
  .p-archive__thumb { display: block; }
  .p-archive__link::after {           /* 文字の下に敷く影 */
    content: "";
    position: absolute;
    inset: 30% 0 0;
    /* 🔄 明るい画像（白い紙の写真）でタイトルが沈んだ＝タイトルの位置（上から約65%）で既に 60% の黒になるよう段を付けた */
    background: linear-gradient(to bottom,
      transparent,
      color-mix(in srgb, var(--color-band-bg) 60%, transparent) 50%,
      color-mix(in srgb, var(--color-band-bg) 85%, transparent));
    pointer-events: none;
  }
  .p-archive__meta,
  .p-archive__title {
    position: absolute;
    left: var(--space-md);
    right: var(--space-md);
    z-index: 1;
  }
  .p-archive__title {
    bottom: calc(var(--space-md) + 1.5em + var(--space-xs));   /* 日付の行の上 */
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
  }
  .p-archive__meta { bottom: var(--space-md); margin: 0; }
  .p-archive__date { color: var(--color-band-text); }
  .p-archive__cat { color: var(--color-band-text); border-color: color-mix(in srgb, var(--color-band-text) 60%, transparent); }
  .p-archive__excerpt { display: none; }
}

/* ── サイドバーの検索（2026-09-19 ユーザー指示・プロフィールの上） ──
   入力欄＝罫線1本の枠（1200px〜の本文と同じ地の色）／ボタン＝c-btn の黒ベタ。入力と送信を1行に */
.p-entry-side__search {
  display: flex;
  gap: var(--space-xs);
  padding-bottom: var(--space-lg);
}
.p-entry-side__search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;   /* 🔄 2026-09-19 高さを 48px にそろえる（旧 55px＝奇数）。ボタンは同じ 48px の正方形 */
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-base);   /* 16px 未満だと iPhone が入力時に拡大する */
}
.p-entry-side__search-input:focus-visible { outline: 1px solid var(--color-text); outline-offset: 0; border-color: var(--color-text); }
.p-entry-side__search-btn { flex: none; width: 48px; height: 48px; padding: 0; border: 0; cursor: pointer; }   /* <button> の既定の立体枠を消す（c-btn は <a> 前提で border を持たない）／虫眼鏡の正方形 */   /* <button> の既定の立体枠を消す（c-btn は <a> 前提で border を持たない） */

/* ── 一覧ページの検索の見せ分け（2026-09-19 ユーザー判断＝案B） ──
   〜1199px（サイドバーが下に回る幅）＝**一覧ページだけ見出しの下に検索**を出し、下のサイドバーの検索は隠す（二重にしない）。
   1200px〜＝見出しの下は隠し、右サイドバーの検索だけ。記事ページは従来どおり（サイドバーの検索のみ） */
.p-entry-side__search--list { margin-top: var(--space-lg); padding-bottom: 0; }
@media (max-width: 1199px) {
  :is(.blog, .category, .search) .p-entry-side__search--side { display: none; }
}
@media (min-width: 1200px) {
  .p-entry-side__search--list { display: none; }
}

/* ── サイドバーの新着記事（2026-09-19 ユーザー指示・プロフィールの上） ──
   1件＝サムネ 96px（1024:643）＋日付（欧文セリフ muted）＋タイトル（明朝・2行まで）。ホバーは一覧と同じ（画像1.05倍＋下線） */
.p-entry-side__recent-list { margin-top: var(--space-sm); }
.p-entry-side__recent-list li + li { margin-top: var(--space-md); }
/* 🔄 2026-09-19 **画像に文字を重ねるカード**（ユーザー判断＝案A・スマホの一覧 .p-archive__link と同じ型）。旧＝サムネ 96px の横並び */
.p-entry-side__recent-link {
  display: block;
  position: relative;
  overflow: hidden;
  color: var(--color-band-text);
  text-decoration: none;
}
.p-entry-side__recent-link::after {   /* 文字の下に敷く影＝スマホの一覧と同じ段の付け方 */
  content: "";
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--color-band-bg) 60%, transparent) 50%,
    color-mix(in srgb, var(--color-band-bg) 85%, transparent));
  pointer-events: none;
}
.p-entry-side__recent-body {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 1;
}
.p-entry-side__recent-thumb {
  display: block;
  aspect-ratio: 1024 / 643;
  overflow: hidden;
  background: var(--color-surface);
}
.p-entry-side__recent-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-dur-mid) var(--motion-ease); }
.p-entry-side__recent-date {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--color-band-text);
  font-family: var(--font-heading-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.p-entry-side__recent-title {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* 2026-09-26 接頭辞なしの line-clamp は W3C で未定義＝外した（効いているのはこちら） */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--motion-dur-mid) var(--motion-ease);
}
@media (hover: hover) {
  .p-entry-side__recent-link:hover .p-entry-side__recent-img { transform: scale(1.05); }
  .p-entry-side__recent-link:hover .p-entry-side__recent-title { text-decoration-color: currentColor; }
}
.p-entry-side__recent-link:focus-visible { outline: 1px solid var(--color-text); outline-offset: 2px; }

/* 新着記事のタイトル＝画像に重ねるので 14→16px（2026-09-19 案A）。サイドバー 240px で1行約13字・2行まで */
.p-entry-side__recent-title { font-size: var(--font-size-base); }

/* ── サイドバーのプロフィールカード（2026-09-19 ユーザー指示・参考画像あり） ──
   枠 1px（--color-line）／上に写真の帯（bridge-01・16:9）／顔写真 96px の丸を帯に半分重ねる（白の縁 4px）／
   名前・一文は中央・紹介文は左揃え・全文（2026-09-23）／ボタン「制作事例を見る」→SNS（2026-09-23「プロフィールを読む」を削除）。色は白黒のまま（参考の緑は使わない） */
.p-entry-side__pcard {
  margin-top: var(--space-sm);
  padding-bottom: var(--space-lg);
  border: 1px solid var(--color-line);
  text-align: center;
}
.p-entry-side__pcard-cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface); }
.p-entry-side__pcard-cover-img { width: 100%; height: 100%; object-fit: cover; }
.p-entry-side__pcard .p-entry-side__photo {
  width: 96px;
  height: 96px;
  margin: -48px auto 0;
  position: relative;
  border: 4px solid var(--color-bg);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;   /* 縦長の写真＝顔を上寄せで切る */
}
.p-entry-side__pcard .p-entry-side__name { margin-top: var(--space-sm); }
.p-entry-side__pcard .p-entry-side__role { padding-inline: var(--space-md); }
/* 🔄 2026-09-23 5行で省略 → 全文表示（ユーザー指示） */
.p-entry-side__intro {
  margin-top: var(--space-md);
  padding-inline: var(--space-md);
  font-size: 12px;   /* 🔴 規約（最小14px）の例外＝2026-09-23 ユーザー指定 */
  line-height: var(--line-height-base);
  text-align: left;
}
.p-entry-side__pcard .p-entry-side__more { padding-inline: var(--space-md); text-align: left; }
.p-entry-side__pcard-btn { margin-top: var(--space-md); padding-inline: var(--space-md); }
.p-entry-side__pcard-btn .c-btn { width: 100%; padding-inline: var(--space-md); font-size: var(--font-size-xs); white-space: nowrap; }   /* PC 240px 幅で折れない詰め方＝右サイドバーの LINE ボタンと同じ */
/* 🔄 2026-09-23 SNS＝丸いアイコンボタン（ユーザー指示）。白面＋黒の輪郭線＝c-btn--ghost と同じ白黒・ホバーで反転 */
/* ── SNS の丸いボタン（`msd_sns_buttons()`・inc/customizer.php） ──
   🔄 2026-09-25 ブログのサイドバー専用（`.p-entry-side__sns-btn`）→ **共通の `.c-sns`** に。
      置き場所＝ブログのサイドバー／スマホのメニュー／フッター（ユーザー指示）＝3か所とも同じ見た目。
   🔵 44px の円＝タップ目標の下限。白地＋1px 黒線、ホバーで反転（PC）。URL が空なら要素ごと出ない */
.c-sns {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
}
.p-entry-side__sns { margin-top: var(--space-md); }
.c-sns__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-text);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.2s, color 0.2s;
}
.c-sns__btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
@media (hover: hover) {
  .c-sns__btn:hover { background: var(--color-text); color: var(--color-bg); }
}

/* ═══════════════════════════════════════════════════════════════════
   固定ページ（page.php）＝プライバシーポリシー（2026-09-19）
   🔵 列は記事と同じ 760px・サイドバーなし。本文の見た目は本文のグループ `.p-policy` が持つ（編集画面にも効く）。
   🔵 h2＝記事の h3 と同じ「下線2色」／h3＝記事の h4 と同じ「左に縦線」＝規約は見出しが多いので黒帯を使わない。
   🔵 確認待ちの値は段落に is-tbd--XXX（inc/tbd.php・check.sh の残数に乗る）
   ═══════════════════════════════════════════════════════════════════ */
.p-page__body { max-width: var(--entry-max); margin: var(--space-2xl) auto 0; }
.p-policy { line-height: var(--line-height-base); word-break: auto-phrase; }
.p-policy > * + * { margin-top: var(--space-md); }
.p-policy > h2 {
  margin-top: var(--space-2xl);
  padding: 0 var(--space-xs) var(--space-sm);
  background:
    linear-gradient(var(--color-text-muted), var(--color-text-muted)) left bottom / 30% 2px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) left bottom / 100% 1px no-repeat;
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
  letter-spacing: var(--font-body-tracking);
}
.p-policy > h3 {
  margin-top: var(--space-xl);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-line);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  letter-spacing: var(--font-body-tracking);
}
.p-policy > :is(h2, h3) + * { margin-top: var(--space-lg); }
.p-policy ul { padding-left: 1.5em; list-style: disc; }
.p-policy ol { padding-left: 1.5em; list-style: decimal; }
.p-policy li + li { margin-top: var(--space-2xs); }
.p-policy li::marker { color: var(--color-text-muted); }
.p-policy a { text-decoration: underline; text-underline-offset: 0.2em; }
.p-policy__date { color: var(--color-text-muted); font-size: var(--font-size-xs); text-align: right; }
@media (min-width: 768px) {
  .p-policy > h2 { font-size: var(--font-size-lg); }
}

/* ── 404（2026-09-19・404.php） ──
   固定ページと同じ列。欧文ラベルは一覧の見出しと同じ型（.p-archive__en）。ボタンは副ボタン＝SP は縦に全幅・768px〜は横並び */
.p-page .p-archive__en + .p-entry__title { margin-top: var(--space-xs); }   /* 固定ページ・404 の欧文→h1（一覧の見出しと同じ 8px） */
.p-404 .p-page__body > p { word-break: auto-phrase; }   /* SP で「可／能性」「くださ／い」と語中で折れた（2026-09-19 実測）。⚠ Safari は未対応＝保険 */
.p-404__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}
@media (min-width: 768px) {
  .p-404__actions { flex-direction: row; justify-content: center; }
  .p-404__actions .c-btn { min-width: 240px; }
}