/* ==============================================================================
   このファイルは build.sh が自動生成する。直接編集しないこと。
   base.css および assets/css/sections/*.css を編集したうえで
   site/build.sh を再実行し、このファイルを再生成すること。
   ============================================================================== */

/* ===== base.css ===== */
/* ==========================================================================
   行政書士たけなか法務事務所 TOPページ
   Base Stylesheet（基盤層）

   このファイルはサイト全体の土台（リセット / トークン / タイポグラフィ /
   レイアウトユーティリティ / 共通コンポーネント / アクセシビリティ）のみを
   定義する。各セクション固有のスタイルは assets/css/sections/*.css に実装し、
   本番ビルド時に base.css → sections/*.css の順で結合して style.css を生成する
   想定のため、詳細度は極力低く保ち、後続の上書きを妨げないようにしている。

   目次
   (a) モダンCSSリセット
   (b) :root カスタムプロパティ
   (c) ベースタイポグラフィ
   (d) レイアウトユーティリティ（.l-container / .l-section）
   (e) 共通コンポーネント（.c-section-head / .c-btn）
   (f) 見出しの可変化（h1 / h2）
   (g) アクセシビリティ
   (h) スクロールリベール基底スタイル
   (i) ヘッダー分の scroll-margin
   ========================================================================== */

/* ==========================================================================
   (a) モダンCSSリセット
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
dl, dd,
figure,
blockquote {
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
}

/* 見出し要素はブラウザ既定のサイズ/太さを外し、(f) およびセクション側の
   スタイルに委ねる */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* リストの正規化 */
ul, ol {
  list-style: none;
}

/* 画像・メディアの正規化 */
img,
svg,
video,
canvas {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

/* リンクの正規化 */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

/* ボタン・フォーム要素の正規化 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  appearance: button;
  background-color: transparent;
  background-image: none;
  border: none;
  cursor: pointer;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

textarea {
  resize: vertical;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   (b) :root カスタムプロパティ
   ========================================================================== */

:root {
  /* ---- カラー: スタイルガイド定義（正式トークン） ---- */
  --brand-base: #87C34B; /* メインの黄緑 */
  --brand-base-50: rgba(135, 195, 75, .5);
  --brand-light: #D6EFC8; /* 淡い黄緑（ヘッダー電話欄など） */
  --brand-deep: #437E55; /* 深緑（カード・フッター背景） */
  --accent-base: #F7931E; /* オレンジ（CTA・強調） */
  --bg: #FFFFFF;
  --bg-light: #FBFCEE; /* クリーム（セクション背景） */
  --text: #33331E; /* 基本文字色 */
  --text-medium: #6B6B6B; /* 補足文字色 */
  --border-light: #CCCCCC;

  /* ---- カラー: スタイルガイド外だが実使用されている色 ---- */
  --text-dark: #363636; /* 本文で頻出使用 */
  --logo-text: #202020; /* ロゴ文字 */
  --logo-sub: #BCBCBC; /* ロゴ英字サブ */
  --phone-green: #075607; /* ヘッダー電話番号 */
  --border-green: #C5E2A8; /* 事務所概要テーブルの外枠線など */
  --creed-green: #40824C;
  --line-green: #06C755; /* LINE公式カラー */
  --marker-yellow: #EFDF50; /* 見出しのマーカー線 */
  --header-shadow: rgba(50, 84, 45, .1);
  --footer-bg: #386645; /* Footer背景。--brand-deep(#437E55)とは別の濃い緑 */

  /* ---- 影 ---- */
  --shadow-card: 0 3px 5px rgba(0, 0, 0, .1); /* 最頻出 */
  --shadow-soft: 4px 4px 4px rgba(0, 0, 0, .1);
  --shadow-header: 0 3px 20px var(--header-shadow);

  /* ---- 角丸 ---- */
  --radius: 10px;
  --radius-sm: 5px;
  --radius-pill: 999px;

  /* ---- レイアウト ---- */
  --container: 1100px;
  --section-pad: 120px;
}

/* ==========================================================================
   (c) ベースタイポグラフィ
   ========================================================================== */

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  background-color: var(--bg);
  font-feature-settings: "palt"; /* 日本語の字詰めを整える */
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   (d) レイアウトユーティリティ
   ========================================================================== */

.l-container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .l-container {
    width: min(var(--container), 100% - 40px);
  }
}

.l-section {
  padding-block: var(--section-pad);
}

@media (max-width: 1023px) {
  .l-section {
    padding-block: 80px;
  }
}

@media (max-width: 767px) {
  .l-section {
    padding-block: 60px;
  }
}

/* ==========================================================================
   (e) 共通コンポーネント — セクション見出し（5-1）
   構成: 英字ラベル + 日本語見出し + リード文（中央揃えが標準）
   ========================================================================== */

.c-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.c-section-head__label {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 3.2px;
  color: var(--brand-base);
}

.c-section-head__title {
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.6;
  letter-spacing: 1.6px;
  color: var(--text);
}

.c-section-head__lead {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

/* Office / Access など左揃え2行構成のセクション向け */
.c-section-head--left {
  align-items: flex-start;
  text-align: left;
}

/* CTA など背景が濃色のセクション向け（白文字化） */
.c-section-head--light .c-section-head__label,
.c-section-head--light .c-section-head__title,
.c-section-head--light .c-section-head__lead {
  color: var(--bg);
}

/* ==========================================================================
   (e) 共通コンポーネント — ボタン（5-2）
   ピル型・右端に矢印アイコンを置くフレックス構成。
   バリエーション: primary(オレンジ) / line(LINE緑) / secondary(ブランド緑) / deep(深緑)
   ========================================================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  color: var(--bg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: filter .25s ease, transform .25s ease;
}

.c-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* 右端に置く矢印アイコン用スロット（<img> / インラインSVG どちらでも可） */
.c-btn__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.c-btn__icon svg,
.c-btn__icon img {
  width: 100%;
  height: 100%;
}

.c-btn--primary {
  background-color: var(--accent-base);
}

.c-btn--line {
  background-color: var(--line-green);
}

.c-btn--secondary {
  background-color: var(--brand-base);
}

.c-btn--deep {
  background-color: var(--brand-deep);
}

/* ==========================================================================
   (f) 見出しの可変化
   ========================================================================== */

h1 {
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.6px;
}

/* ==========================================================================
   (g) アクセシビリティ
   ========================================================================== */

/* フォーカスリングは二重リング（白 + var(--text)の濃色）にする。
   var(--accent-base)単色だと白(#FFFFFF)で2.30:1、--bg-light(#FBFCEE)で
   2.21:1、--brand-light(#D6EFC8)で1.86:1、--brand-deep(#437E55)で2.10:1
   しかなく、WCAG 1.4.11（非テキストコントラスト3:1）を満たせない実測結果が
   あったため、白と濃色を組み合わせてどの背景色の上でも一方が3:1以上を
   確保できるようにした */
:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--text);
}

/* <main>（スキップリンク#mainの着地点。tabindex="-1"でフォーカス可能にして
   いる）はヘッダー直下からページ最下部まで広がる特殊な要素のため、上記の
   外側リングをそのまま適用すると上端がposition:sticky・z-index:100の
   ヘッダーの背後に隠れてしまう（実機検証で確認済み）。リングを内側
   （outline-offsetを負値に）に描き直す案も検証したが、その場合は今度は
   セクション自身の不透明な背景（.p-heroなど、mainの直接の子要素）に
   隠れてしまい逆効果だった（子要素は親であるmainの装飾より必ず手前に
   描画されるため、z-indexで解決できない）。そのためmain:focus{outline:
   none}のようにリングそのものをキーボード利用者から奪うのではなく、
   フォーカス時のみposition:relative+z-index（ヘッダーの100より大きい値。
   スキップリンク自体が使っている1000に合わせた）を与えてヘッダーより
   前面に出し、外側リングの上端が隠れないようにした（他の絶対配置要素は
   すべて自分のセクション内にposition:relativeな祖先を持つため、mainが
   positionedになってもcontaining blockの解決には影響しないことを
   確認済み）。なお左右端はmainの幅がビューポート幅と一致するため外側
   リングが画面外に出て見えなくなる制約は残るが、windowの外に描画される
   だけで見た目が崩れるわけではなく、上端のリングは可視化されるため、
   キーボード利用者への視覚的フィードバックそのものは確保できている */
main:focus-visible {
  position: relative;
  z-index: 1000;
}

/* スクリーンリーダー専用テキスト（視覚的には非表示） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* スキップリンク（index.html 冒頭の #main へのリンク）。
   フォーカスされるまで画面外に退避させる */
.u-skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 12px 24px;
  background-color: var(--accent-base);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  transition: top .25s ease;
}

.u-skip-link:focus {
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   (h) スクロールリベール基底スタイル
   JS（IntersectionObserver）が対象要素に .is-visible を付与する
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   (i) ヘッダー分の scroll-margin
   アンカーリンク遷移時に固定/スティッキーヘッダーで隠れないようにする
   ========================================================================== */

section[id] {
  scroll-margin-top: 100px;
}

/* ===== 00-header.css ===== */
/* ==========================================================================
   Header (00-header)

   PC(1024px以上): ロゴ / ナビ5項目 / 電話ブロック / CTAブロック を横並び表示
   Tablet・SP(1023px以下): ロゴ + 電話アイコン + ハンバーガーのみを表示し、
   ナビ・電話ブロック・CTAブロックはオフキャンバスメニュー（.p-header__menu）に格納する

   目次
   (a) ヘッダー本体・ロゴ
   (b) メニュー（PCでは横並び行、Tablet/SPでオフキャンバスに変化する共通部分）
   (c) ナビゲーション
   (d) 電話ブロック・CTAブロック
   (e) PC範囲内（1024px〜1366px）での可変化: 1024pxでのはみ出し解消
   (f) モバイル用アクション（電話アイコン + ハンバーガートグル）
   (g) body スクロールロック
   (h) Tablet・SP（1023px以下）: オフキャンバス化
   (i) SP（767px以下）
   ========================================================================== */

/* ==========================================================================
   (a) ヘッダー本体・ロゴ
   ========================================================================== */

.p-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 80px;
  background-color: var(--bg);
}

/* スクロール時にJSが付与する影（デザイン上は常時影ありだが、本実装では
   スクロール検知に連動させる仕様のため待機状態では影を出さない） */
.p-header.is-scrolled {
  box-shadow: var(--shadow-header);
}

.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-left: 40px;
}

.p-header__logo {
  display: flex;
  flex-direction: column;
}

.p-header__logo-name {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.45;
  color: var(--logo-text);
  white-space: nowrap;
}

.p-header__logo-sub {
  font-weight: 600;
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: 4.5px;
  color: var(--logo-sub);
  white-space: nowrap;
}

/* ==========================================================================
   (b) メニュー（ナビ + 電話 + CTA をまとめた塊。JSフック .js-nav が付く）
   ========================================================================== */

.p-header__menu {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   (c) ナビゲーション
   ========================================================================== */

.p-header__nav-list {
  display: flex;
  align-items: center;
  /* 実測値は30px/20px。ブレークポイントが1023px以下に変更されたことで
     PC範囲が1024pxまで拡張されたため、1024px〜1366pxでの縮小は下記(e)で
     まとめて可変化する（ここには1366px基準の値をそのまま書いておき、(e)の
     `@media (min-width: 1024px)`が上書きする。1023px以下はさらに下記(h)が
     上書きする） */
  gap: 30px;
  padding-inline: 20px;
}

.p-header__nav-list a {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  white-space: nowrap;
  transition: color .2s ease;
}

.p-header__nav-list a:hover {
  color: var(--brand-deep);
}

/* ==========================================================================
   (d) 電話ブロック・CTAブロック
   ========================================================================== */

.p-header__cta-group {
  display: flex;
  align-items: stretch;
  height: 80px;
}

.p-header__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 243px;
  padding-inline: 20px;
  background-color: var(--brand-light);
}

.p-header__phone-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.p-header__phone-icon {
  width: 22px;
  height: 22px;
}

.p-header__phone-number {
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 1.2px;
  color: var(--phone-green);
  white-space: nowrap;
}

.p-header__phone-hours {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

.p-header__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 実測ではアイコンのバウンディングボックス(30x30)内に実寸24x19のベクターが
     余白付きで収まっており、フレーム自体のgapは0だが視覚的には約5.5pxの余白が
     生じている。その見た目を再現する近似値としてgap:6pxを採用した */
  gap: 6px;
  width: 168px;
  height: 100%;
  padding-inline: 24px;
  background-color: var(--brand-base);
  transition: filter .2s ease;
}

.p-header__cta:hover {
  filter: brightness(1.06);
}

.p-header__cta-icon {
  width: 24px;
  height: 19px;
}

.p-header__cta-text {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  color: var(--bg);
}

/* ==========================================================================
   (e) PC範囲内（1024px〜1366px）での可変化: 1024pxでのはみ出し解消

   ブレークポイントが1199px以下→1023px以下に変更されたことで、PC表示
   （横並びのロゴ/ナビ5項目/電話ブロック/CTAブロック）を維持する幅の下限が
   1200pxから1024pxまで拡張された。実機検証の結果、1024px幅ではこの4ブロック
   の合計必要幅が1183px（ロゴ263px+ナビ880px+左パディング40px）となり、
   ビューポート幅1024pxを159px超過して「無料相談はこちら」ボタンが画面外に
   押し出されることを確認した。
   固定値を一律に縮小すると1366px時点の見た目まで変わってしまうため、以下の
   8項目を「1366pxでは現状の固定値と完全に一致し、1024pxに向けて滑らかに
   縮む」clamp()に置き換える。各clamp()の中間項（vw）は、1366px時点で
   ちょうど（またはわずかに超過して）3引数目の上限に張り付くよう逆算して
   あるため、1366pxでの実測値は本変更の前後で1px単位も変化しない
   （1024px側の値も同様にclampの下限へ収まるよう逆算してある）。
   このメディアクエリを`min-width`で1024px以上に限定しているのは、1023px
   以下の範囲（下記(h)/(i)）の見た目を一切変えないためである（(h)/(i)は
   本メディアクエリと排他的な範囲のため、カスケードの競合は発生しない）。
   ========================================================================== */

@media (min-width: 1024px) {
  /* 左パディング 40px(1366) → 24px(1024)。24pxは1023px以下（下記(h)）の
     オフキャンバス時パディングと同値のため、境界(1023/1024px)で見た目が
     連続する */
  .p-header__inner {
    padding-left: clamp(24px, calc(-24.192px + 4.7vw), 40px);
  }

  /* gap 30px(1366) → 14px(1024)。padding-inline 20px(1366) → 8px(1024) */
  .p-header__nav-list {
    gap: clamp(14px, calc(-34.192px + 4.7vw), 30px);
    padding-inline: clamp(8px, calc(-28.21px + 3.53vw), 20px);
  }

  /* ナビ項目のフォントサイズ 14px(1366) → 13px(1024) */
  .p-header__nav-list a {
    font-size: clamp(13px, calc(10.049px + .29vw), 14px);
  }

  /* ロゴ事務所名 20px(1366) → 17px(1024)。
     .p-header__logoはflex-direction:columnでalign-items既定がstretchのため、
     事務所名(1行目)と英字サブ(2行目)は互いに同じ幅までstretchされる。
     英字サブ側（SOUZOKU & SHUKATSU SUPPORT、letter-spacing4.5px）の方が
     実測で常に事務所名より横幅が大きく、ロゴブロック全体の占有幅は事実上
     英字サブ側の幅で決まっている。そのため事務所名のfont-sizeだけを縮めても
     ブロック全体の占有幅は一切縮まないことを実機検証で確認した（1024px
     での実測で判明）。英字サブも合わせてfont-size・letter-spacingの両方を
     縮小することで、ロゴブロック全体の占有幅を実際に縮小させる */
  .p-header__logo-name {
    font-size: clamp(17px, calc(7.989px + .88vw), 20px);
  }

  .p-header__logo-sub {
    font-size: clamp(8px, calc(5.049px + .29vw), 9px);
    letter-spacing: clamp(3px, calc(-1.5px + .44vw), 4.5px);
  }

  /* 電話ブロック幅 243px(1366) → 213px(1024)、左右パディング 20px → 12px。
     幅とパディングを同時に縮めることで、電話番号・受付時間のフォント
     縮小に合わせて実際に占有幅を減らす（パディングだけを縮めても
     width:243px固定のままでは占有幅は変わらないため）。電話番号は視認性の
     ため24px→20px（20px未満にはしない）、受付時間は12px→11pxに留める */
  .p-header__phone {
    width: clamp(213px, calc(122.529px + 8.82vw), 243px);
    padding-inline: clamp(12px, calc(-12.091px + 2.35vw), 20px);
  }

  .p-header__phone-number {
    font-size: clamp(20px, calc(7.891px + 1.18vw), 24px);
  }

  .p-header__phone-hours {
    font-size: clamp(11px, calc(8.049px + .29vw), 12px);
  }

  /* CTAブロック幅 168px(1366) → 152px(1024)、左右パディング 24px → 16px。
     幅とパディングを同じ量（片側8px = 両側16px）だけ縮めるため、内側の
     コンテンツ幅（アイコン24px + gap6px + テキスト「無料相談はこちら」）は
     168-48=120pxのまま変わらず、ボタン文言の折り返しが発生しない */
  .p-header__cta {
    width: clamp(152px, calc(103.808px + 4.7vw), 168px);
    padding-inline: clamp(16px, calc(-8.091px + 2.35vw), 24px);
  }
}

/* ==========================================================================
   (f) モバイル用アクション（電話アイコン + ハンバーガートグル）
   PCでは非表示。1023px以下でのみ表示する
   ========================================================================== */

.p-header__mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
}

.p-header__mobile-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.p-header__mobile-phone img {
  width: 20px;
  height: 20px;
}

.p-header__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 20;
}

.p-header__burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--text);
  transition: transform .25s ease, opacity .25s ease;
}

.p-header__toggle[aria-expanded="true"] .p-header__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.p-header__toggle[aria-expanded="true"] .p-header__burger-line:nth-child(2) {
  opacity: 0;
}

.p-header__toggle[aria-expanded="true"] .p-header__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.p-header__toggle-label--open,
.p-header__toggle-label--close {
  white-space: nowrap;
}

.p-header__toggle[aria-expanded="true"] .p-header__toggle-label--open {
  display: none;
}

.p-header__toggle:not([aria-expanded="true"]) .p-header__toggle-label--close {
  display: none;
}

/* ==========================================================================
   (g) メニュー展開中のスクロールロック
   ========================================================================== */

body.is-nav-open {
  overflow: hidden;
}

/* ==========================================================================
   (h) Tablet・SP（1023px以下）: ハンバーガーメニューに切り替え
   ========================================================================== */

@media (max-width: 1023px) {
  .p-header__inner {
    padding-inline: 24px;
  }

  .p-header__menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 15;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    width: min(320px, 85vw);
    height: 100vh;
    height: 100dvh;
    padding: 104px 24px 32px;
    background-color: var(--bg);
    box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }

  .p-header__menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .3s ease, visibility 0s linear 0s;
  }

  .p-header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-inline: 0;
  }

  .p-header__nav-list a {
    font-size: 16px;
  }

  .p-header__cta-group {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 16px;
  }

  .p-header__phone {
    width: 100%;
    padding-block: 16px;
    padding-inline: 16px;
    border-radius: var(--radius-sm);
  }

  /* オフキャンバスパネルは overflow-y:auto を持つため、CSSの仕様上
     overflow-x も暗黙的に auto 化され、幅からはみ出た内容はスクロールなしでは
     見えなくなる。ヘッドレスブラウザでの検証環境の制約上375px幅そのものでの
     直接確認はできなかったが、実測した電話番号のレンダリング幅(24px時に
     約174px)とパネル内の実際の余幅から計算したところ、320px前後の狭い
     スマートフォン幅ではこの余白に収まりきらずわずかに見切れる可能性が
     あると判断したため、念のためオフキャンバス表示時のみ電話番号の
     フォントサイズを可変にして防止する（320px幅での実機・実ブラウザでの
     最終確認は未実施） */
  .p-header__phone-number {
    font-size: clamp(18px, 5vw, 24px);
  }

  .p-header__cta {
    width: 100%;
    height: auto;
    padding-block: 16px;
    border-radius: var(--radius-sm);
  }

  .p-header__mobile-actions {
    display: flex;
  }

  .p-header__toggle {
    display: flex;
  }
}

/* ==========================================================================
   (i) SP（767px以下）
   ========================================================================== */

@media (max-width: 767px) {
  .p-header__inner {
    padding-inline: 20px;
  }

  /* 260px幅を前提に設計されたロゴが狭幅端末で折返し/はみ出しを起こさないよう
     可変フォントサイズに調整（デザインカンプにSP版が無いための独自判断） */
  .p-header__logo-name {
    font-size: clamp(13px, 4.6vw, 18px);
  }

  .p-header__logo-sub {
    font-size: 7px;
    letter-spacing: 3px;
  }

  .p-header__menu {
    width: 85vw;
  }
}

/* ===== 01-mainview.css ===== */
/* ==========================================================================
   Main View / Hero (01-mainview)

   フルブリードの人物写真の上に、左寄せのコピー＋CTA、写真との境目に重なる
   円形バッジを配置する。Hilight(02)との-53pxの重なりは02側のCSSで処理する。

   目次
   (a) セクション本体・背景画像・グラデーション
   (b) コンテンツ全体のラッパー
   (c) 見出しブロック（H1・リード文）
   (d) 本文・チェック付きチップ
   (e) ボタン
   (f) 丸投げパックバッジ
   (g) Tablet（1023px以下）: テキスト列幅を可変化しバッジとの衝突・はみ出しを防止
   (h) SP（767px以下）: 画像を上・テキストを下に縦積み
   ========================================================================== */

/* ==========================================================================
   (a) セクション本体・背景画像・グラデーション
   ========================================================================== */

.p-hero {
  /* このセクション内で使い回す値をカスタムプロパティ化し、
     (b)の内側パディング・テキスト列幅・(f)バッジの位置計算で同じ値を共有する */
  --hero-pad-x: clamp(24px, 4vw, 47px);
  --hero-content-w: 608px; /* 実測値。Tablet(1023px以下)では下記メディアクエリで縮小する */
  position: relative;
  overflow: hidden;
  min-height: 722px;
  background-color: var(--bg-light);
}

.p-hero__media {
  position: absolute;
  inset: 0;
}

.p-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.p-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-hero__gradient {
  position: absolute;
  inset: 0 auto 0 0;
  /* 実測: グラデーション矩形の幅は756px（セクション全幅1367pxに対して55.3%）。
     矩形自体がセクション全幅ではないため、右側の残り約45%は写真がそのまま
     露出する（グラデーションを掛けない）。 */
  width: 55.3%;
  background-image: linear-gradient(
    to left,
    rgba(254, 254, 250, 0) 0%,
    rgba(251, 252, 242, .3) 13%,
    rgba(251, 252, 239, .7) 25%,
    #FBFCEE 41%
  );
}

/* ==========================================================================
   (b) コンテンツ全体のラッパー
   ========================================================================== */

.p-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1366px;
  margin-inline: auto;
  /* 106px/47pxはデザイン基準幅1366pxでの実測値。Tabletでは詰まりすぎないよう
     clampで緩やかに縮小する（デザインカンプがPC/1366px基準のみのための独自判断） */
  padding: clamp(60px, 9vw, 106px) var(--hero-pad-x);
}

.p-hero__content {
  max-width: var(--hero-content-w);
  display: flex;
  flex-direction: column;
  /* 実測値の入れ子構造（_ref/specs/01_mainview.md）ではFrame246（この列全体）の
     gapは40px（見出し→本文、本文＋チップ→ボタンの両方で共通の1つの値）。
     以前は.p-hero__text（本文）に本来3行のところ誤って<br>を1つ多く入れて
     4行でレンダリングしており、その余分な1行（約28px）の高さ増加を隠すために
     この共有gapを40pxから35pxへ縮小する対症療法が行われていた。本文側の
     <br>を削除して正しい3行に直したことで本文の高さがスペックどおり約87px
     （3行×28.8=86.4px）に戻ったため、gapも実測値どおり40pxに戻す */
  gap: 40px;
}

/* ==========================================================================
   (c) 見出しブロック（H1・リード文）
   ========================================================================== */

.p-hero__headline {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* H1自体のサイズ・太さ・行間はbase.cssのh1既定（clamp(28px,4.2vw,56px)/700/1.4）を
   そのまま使用し、ここでは「安心」部分の強調色のみを定義する */
.p-hero__title {
  /* base.cssのfont-feature-settings:"palt"（プロポーショナル字詰め）を掛けると、
     字間が詰まって1行目「「想い」を、」の字送り幅がデザインより32px短くなり
     （実測231px、デザインは263px）、かつ1行目冒頭の鉤括弧「の左サイド
     ベアリングも詰まってインクが本文・リード文の左端（実測x=78前後）より
     約27px左（実測x=56）にはみ出す。text-indentでインク位置の見た目だけを
     補正する案も検証したが、字間そのものは詰まったままで字送り幅がデザインと
     一致しないため不採用とし、ここではpaltそのものを打ち消してデザイン通りの
     字形・字送りを再現する（base.css側のグローバル指定は他セクションに
     影響するため変更せず、本セレクタでの上書きに留める） */
  font-feature-settings: normal;
  /* デザイン実測ではH1テキストノードの幅は672px（@(47,106) 672x156、右端x=719）
     で、親の.p-hero__content（--hero-content-w=608px）より64px広い。リード文
     （右端641px）・本文（右端584px）・チップは608pxの列幅内に収まっているが、
     デザイン上H1だけがその列幅より外側（右）へ張り出す構造になっている。
     paltを外すと素の字送りが広がるため、608px固定のままだと2行目
     「「安心」というカタチに。」が収まらず3行に折り返ってしまう。672pxの幅を
     明示的に与えて解決する。
     .p-hero__titleは.p-hero__headline（flex縦積み・align-items:stretch既定）の
     flexアイテムのため、widthをmin(672px, 100%)のように親基準の%で逃がそうと
     しても、100%の算出基準となる.p-hero__headlineの実効幅自体が
     --hero-content-w（608px、またはTabletではmin(608px,56%)）で頭打ちに
     なっており、100%は常に608px以下にしかならず672pxへ広がらない
     （実機検証で確認済み）。そのため、ここでは672px固定を明示し、
     Tablet/SP（1023px以下）では下記(g)のメディアクエリでwidth:autoに戻し、
     672px固定を解除して元の可変列幅（--hero-content-w）に追従させる。
     672pxという絶対値はpx固定のため、ブレークポイントが1024pxまで拡張された
     PC範囲（1024px〜1023pxの境界直前まで）では--hero-content-wが608px固定の
     ままなのに対しH1だけが672px固定のままとなり、実機検証で.p-hero__content
     （608px）よりH1が64pxはみ出すことを確認した。h1のfont-sizeはbase.cssの
     clamp(28px,4.2vw,56px)により1366pxでちょうど上限56pxに張り付き（4.2vw=
     57.4pxで56pxにクランプされる）、1024pxでは4.2vw=43px相当まで滑らかに
     縮む。672÷56=12であることを利用し、width自体をこのh1フォントサイズに
     連動するem単位（12em）に変更する。1366pxではfont-sizeが56pxに固定される
     ため12em=672.000pxとなり従来のpx固定値と完全に一致し、1024pxではfont-size
     が43.008pxまで縮むのに連動してwidthも516.096pxまで縮小し、608pxの列幅に
     収まってはみ出しが解消される。2行目に必要な字送り幅もfont-sizeと同じ比率で
     縮むため、この12em幅であれば1024pxでも2行構成を維持できることを実機検証で
     確認済み（Tablet/SP範囲は引き続き下記(g)/(h)がwidth:autoや専用paltで
     上書きするため本値の影響を受けない） */
  width: 12em;
}

.p-hero__title-accent {
  color: var(--accent-base);
}

.p-hero__lead {
  display: inline-block;
  margin-left: 30px;
  padding-bottom: 13px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: 1px;
  color: var(--text);
  border-bottom: 2px solid var(--text);
  /* 実測スペックは対象フレームに stroke=['#33331E']@1 とあるのみで、
     4辺共通の線かどの辺のみかは判別できなかった。pad=0/0/8/0（下方向のみ）
     という実測値と、参照画像を拡大確認した結果、下線のみが視覚的に存在する
     ことを確認できたため、border-bottomのみで実装した */
}

/* ==========================================================================
   (d) 本文・チェック付きチップ
   ========================================================================== */

.p-hero__body {
  display: flex;
  flex-direction: column;
  /* 実測スペックはgap=16（Frame230）。以前は本文の余分な<br>（4行化）による
     高さ増加を隠すため2pxへ縮小する対症療法が行われていたが、本文側の<br>を
     削除して正しい3行に直したことで本文の高さがスペックどおりに戻ったため、
     gapも実測値どおり16pxに戻す */
  gap: 16px;
  padding-left: 30px;
}

.p-hero__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

.p-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.p-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 10px;
  border: 1px solid rgba(51, 51, 30, .3); /* var(--text)相当の色を30%透過。トークンに無い透過値のため直値 */
  border-radius: var(--radius-sm);
  background-color: var(--bg);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}

/* ==========================================================================
   (e) ボタン
   共通コンポーネント .c-btn / .c-btn--primary / .c-btn--line（base.css）を
   そのまま使用。矢印アイコンも .c-btn__icon スロットにそのまま差し込む
   ========================================================================== */

.p-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding-left: 30px;
}

/* 実測スペックのボタンはpad=18/30/20/40・高さ61px。base.cssの.c-btnは
   padding:18px 32px（上下対称=18/18）で高さが約59.2pxにしかならず、design値
   より約2px低い。base.cssは共通コンポーネントのため変更せず、本セクション内で
   縦方向（下側）のみをスコープして上書きする。左右のpadding（32px）は幅に
   影響するため変更しない（横方向は変更しない制約のため） */
.p-hero__actions .c-btn {
  padding-bottom: 20px;
}

/* ==========================================================================
   (f) 丸投げパックバッジ
   写真とテキストゾーンの境目に重ねる円形バッジ。絶対配置。
   ========================================================================== */

.p-hero__badge {
  position: absolute;
  /* 実測値では left=619px（テキスト列の右端=--hero-pad-x+608pxより手前で、
     バッジの円がテキスト列の枠に食い込む配置）。しかし実装上そのまま
     45.3%という%指定やcalc(--hero-pad-x + 572px)のような固定オフセットで
     再現すると、ヘッドレスブラウザでの実座標計測でどの幅でも一定量
     チップ行と重なり、チップの文字が隠れる不具合が判明した。
     また608px固定のテキスト列のままTabletで単純に右へオフセットすると、
     今度は768px付近の狭い幅でバッジ自体が画面右端からはみ出す問題も発生した。
     そのため、テキスト列の幅を --hero-content-w としてカスタムプロパティ化し
     （Tabletでは下記メディアクエリで可変化）、バッジの位置もその変数を
     参照する calc(--hero-pad-x + --hero-content-w + 20px)
     （＝テキスト列の右端から常に20pxの余白を空ける）という相対式に変更した。
     デザインの厳密な619pxという値そのものより、どの幅でもチップ・本文と
     重ならず、かつ画面外にはみ出さないことを優先した実装上の判断である。
     top はセクション高さが722px固定のため実測値そのまま350pxを採用 */
  left: calc(var(--hero-pad-x) + var(--hero-content-w) + 20px);
  top: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 円の直径をカスタムプロパティ化し、内側の文字サイズ・余白を全てこの変数からの
     calc()で算出する相対指定に変更した（以前は円のサイズだけがclampで可変な
     一方、文字サイズがpx固定だったため、円が縮小するTablet/SPで文字が
     追随せず、はみ出し・語中改行を起こしていた）。
     PC実測値（円200px時: gap/padding-top=8px、line1/line3=16px、num=28px、
     line2=24px）を円直径200pxに対する比率に変換し（8/200=.04, 16/200=.08,
     28/200=.14, 24/200=.12）、各calc()に直接埋め込んでいる。この直接埋め込み
     方式は、後述の.p-hero__badge-numのように親のfont-sizeを基準にemを重ねる
     入れ子構造でも比率がズレない（--badge-sizeはfont-sizeと違い、参照する
     子孫要素のfont-size階層に関係なく同じ値を継承するカスタムプロパティの
     ため）。 --badge-size自体は現行のwidth/heightの値をそのまま踏襲するため
     PC/Tabletの見た目は変わらない。SP（767px以下）では(h)でこの--badge-sizeと
     各calc()の係数の両方を上書きし、独自の円サイズ・文字比率に切り替える */
  --badge-size: clamp(150px, 16vw, 200px);
  width: var(--badge-size);
  height: var(--badge-size);
  gap: calc(var(--badge-size) * .04);
  padding-top: calc(var(--badge-size) * .04);
  border-radius: 50%;
  background-color: #FFFEE1; /* トークン外の色。丸投げパックバッジ専用のクリーム色で他箇所での使用実績が無いため直値 */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, .1);
  text-align: center;
  /* <div>から<a>化した際の見た目維持・リンクとしての装飾。
     text-decoration/colorはbase.cssの`a`既定（reset）で既に
     none/inheritになっているが、リンク化に伴う意図を明示するため
     本セクションでも明記しておく */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* base.cssの.c-btn:hoverはfilter+transformを.25sで変化させているが、
     このバッジは背景がクリーム色（#FFFEE1）でfilter:brightnessを掛けても
     変化が視認しづらいため、影を強め・わずかに拡大する（scale）ことで
     クリック可能であることを伝える。transform-originは既定の中央のため
     拡大してもleft/top基準の表示位置は変わらない */
  transition: box-shadow .25s ease, transform .25s ease;
}

.p-hero__badge:hover {
  box-shadow: 6px 6px 16px rgba(0, 0, 0, .2);
  transform: scale(1.03);
}

/* <a>化に伴うフォーカスリングの実機検証結果への対応。
   base.cssの:focus-visibleが持つ二重リング（白いoutline + var(--text)の
   box-shadow）のうち、白いoutlineはborder-radius:50%に追随して円形に
   描画されることを実機検証で確認できたが、box-shadow側は build.sh の
   結合順（base.css → 本ファイルの順）により、同じ詳細度のまま常にこの
   .p-hero__badge自身の既定box-shadow（4px 4px 10px rgba(0,0,0,.1)）に
   上書きされてしまい、フォーカス時も表示されないことが判明した。
   本バッジの背景色（#FFFEE1、白に極めて近いクリーム）は白いoutlineとの
   コントラストが実測で約1.02:1しかなく、二重リングのうち濃色側
   （var(--text)）が唯一の実効的なコントラスト確保手段のため、この
   box-shadowが消えることはアクセシビリティ上看過できない。
   詳細度をクラス+疑似クラスに上げて確実にこちらを勝たせ、二重リングを
   復元する（形状はbox-shadowが常にborder-radiusへ追随する仕様のため
   丸いまま） */
.p-hero__badge:focus-visible {
  box-shadow: 0 0 0 4px var(--text);
}

.p-hero__badge-line1 {
  font-weight: 600;
  font-size: calc(var(--badge-size) * .08);
  line-height: 1;
  letter-spacing: .8px;
  color: var(--text);
}

.p-hero__badge-num {
  /* 実測スペックでは行全体が16px単一のテキストランとして抽出されているが、
     参照画像では「9割」の部分のみ明確に大きく・オレンジ色で強調されている。
     Figma側の部分装飾（1つのテキスト内での混在スタイル）が抽出時に潰れた
     ものと判断し、タスク指示「9割が大きく強調される」と参照画像の目視確認に
     基づき、28px・accent-base色で実装した（実測できないため近似値）。
     このfont-sizeは親の.p-hero__badge-line1のfont-sizeに対するem（28/16=
     1.75em）ではなく、line1と同様に--badge-sizeから直接算出している。
     numはline1の子（入れ子）のため、1.167em（28/24）のようにバッジ全体の
     基準比率をそのままemで書くと、line1で既に.08倍された上にさらに
     1.167倍されてしまい（.08×1.167=.0934倍相当）、意図した28px比率
     （.14倍）からズレるため、直接算出方式で回避している */
  font-weight: 700;
  font-size: calc(var(--badge-size) * .14);
  color: var(--accent-base);
}

.p-hero__badge-line2 {
  font-weight: 700;
  font-size: calc(var(--badge-size) * .12);
  line-height: 1.1;
  color: var(--text);
  padding-bottom: calc(var(--badge-size) * .04);
  border-bottom: 1px solid var(--text);
  /* .p-hero__lead と同様、strokeがどの辺かスペックから判別できないため
     pad=0/0/8/0 + 参照画像の目視確認から下線のみと判断した */
}

.p-hero__badge-line3 {
  font-weight: 700;
  font-size: calc(var(--badge-size) * .08);
  line-height: 1;
  letter-spacing: .8px;
  color: var(--text);
}

/* ==========================================================================
   (g) Tablet（1023px以下）: テキスト列幅を可変化しバッジとの衝突・はみ出しを防止
   実機検証の結果、テキスト列を608px固定のままにすると、768px付近の狭い幅で
   バッジがチップ行と衝突するか、逆に画面右端からはみ出すかのどちらかが
   発生することが分かったため、Tabletに限りテキスト列の最大幅を
   可変（min(608px, 56%)）にして両立させる
   ========================================================================== */

@media (max-width: 1023px) {
  .p-hero {
    --hero-content-w: min(608px, 56%);
  }

  .p-hero__title {
    /* (c)で指定した672px固定はPC（1024px以上、--hero-content-wが608px固定の
       範囲）でのみ有効とし、Tablet以下ではここでautoに戻して.p-hero__headline
       のflexアイテムとして可変のテキスト列幅（--hero-content-w）に再び
       追従させる。実機検証の結果、1023px～768pxの範囲ではこのautoへの復帰
       だけで2行に収まることを確認済み（SP領域は下記(h)で別途対応） */
    width: auto;
  }
}

/* ==========================================================================
   (h) SP（767px以下）: 画像を上・テキストを下に縦積み
   デザインカンプにSP版が無いため、DESIGN-SPEC.md §7の方針に沿って独自に設計
   ========================================================================== */

@media (max-width: 767px) {
  .p-hero {
    min-height: auto;
    overflow: visible;
  }

  .p-hero__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .p-hero__gradient {
    display: none; /* テキストと写真が重ならないため不要 */
  }

  .p-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: none;
    /* バッジを(f)のPC/Tablet用の通常フロー配置から絶対配置に変える（下記
       .p-hero__badge参照）ことで、このコンテナの通常フローの子は
       .p-hero__contentのみになり、見出しが自動的に写真の直下まで詰まる。
       上パディングが0のままだと見出しが写真に接してしまうため、28px確保する
       （デザインカンプにSP版が無いための独自判断。実機目視で詰まりすぎず
       空きすぎない値として採用） */
    padding: 28px 20px 60px;
  }

  .p-hero__content {
    max-width: none;
  }

  .p-hero__body,
  .p-hero__actions {
    padding-left: 0;
  }

  .p-hero__lead {
    margin-left: 0;
  }

  .p-hero__title {
    /* (c)でpaltを打ち消したのはPC/Tablet（デザインとのインク位置・字送り幅の
       一致が必要な領域）向けの対応。SPはデザインカンプ自体が無く独自設計の
       ため厳密な一致対象が無い一方、SPではh1のfont-sizeがclamp(28px,4.2vw,
       56px)の下限28pxで頭打ちになるため、幅がそれ以上縮んでもpaltを外した
       ままだと2行目「「安心」というカタチに。」の必要幅（実測336px）が
       375px幅時点の実効幅（335px）を上回り3行に折り返ってしまう
       （320px幅ではさらに56px不足）。SPに限りpaltを再度掛けて必要幅を
       約277pxまで縮め、320/375px幅を含むSP全域で2行に収まることを
       実機検証済み */
    font-feature-settings: "palt";
  }

  .p-hero__badge {
    /* 通常フロー配置（static/order/margin相殺による写真下部との重なり）だと
       円が120x120pxに縮んだ際に文字サイズがPC用のまま追随せず、「相続丸投げ
       パック」が語中で改行される・下線がはみ出す不具合が発生していたため、
       (a)で文字サイズを円のサイズに追随する相対指定に直したうえで、円自体を
       絶対配置にして写真の左側に重ねる配置へ変更する。
       .p-hero__badgeの直近の位置指定祖先は.p-hero__inner（position:relativeは
       このタスクの変更範囲外のため維持したまま）。.p-hero__innerの上端は
       写真（.p-hero__media、全幅×aspect-ratio 16/9 = 56.25vw高さ）の下端と
       ちょうど一致する（.p-hero__innerの上パディングは上記の28pxのみで、
       ボーダーボックス自体の開始位置には影響しない）ため、写真の中に円を
       重ねるには.p-hero__inner基準で負のtopを与える必要がある。 */
    position: absolute;
    z-index: 1;
    /* 円のサイズはPCの比率（円直径の.12倍=line2の24px相当）のままだと、
       円が縮小した際に文字同士の余白が窮屈になるため、一回り小さい比率
       （line2を円直径の9分の1=.111倍とする）にして余裕を持たせる。
       比率は現行PCの各要素比率（line1/line3=line2の2/3、num=line2の7/6、
       gap/padding-top=line2の1/3）をそのまま維持し、基準のline2比率だけを
       .12→.111（8.333分の1→9分の1）に縮小したもの。
       --badge-size自体はclamp(150px, 40vw, 190px)を採用（375px幅で40vw=
       150pxとちょうどclamp下限に一致し、475px以上でclamp上限190pxに達する）。
       実機検証の結果、375〜767px幅のいずれでも「相続丸投げパック」が
       1行に収まり、下線を含めすべての文字が円の内側に収まることを確認済み */
    --badge-size: clamp(150px, 40vw, 190px);
    width: var(--badge-size);
    height: var(--badge-size);
    gap: calc(var(--badge-size) * .037);
    padding-top: calc(var(--badge-size) * .037);
    /* 写真の縦中央に円の中心を置く場合の式:
       円上端(.p-hero起点) = (56.25vw - badge-size) / 2
       → .p-hero__inner起点に変換（.p-hero__innerの上端はhero起点で56.25vwの
         ため、その分を差し引く）
       = (56.25vw - badge-size) / 2 - 56.25vw = -28.125vw - badge-size / 2
       実機検証の結果、375〜767px幅の範囲でこの中央配置のままヘッダー
       （高さ80px, sticky）にも写真下端にも接触しないことを確認済み。
       左右方向は.p-hero__innerの左端が.p-heroの左端（＝写真の左端）と
       一致するため、viewport幅の5%を写真の左側の目安として採用した */
    left: 5%;
    top: calc(-28.125vw - (var(--badge-size) / 2));
  }

  .p-hero__badge-line1,
  .p-hero__badge-line3 {
    font-size: calc(var(--badge-size) * .0741);
  }

  .p-hero__badge-num {
    font-size: calc(var(--badge-size) * .1296);
  }

  .p-hero__badge-line2 {
    font-size: calc(var(--badge-size) * .1111);
    padding-bottom: calc(var(--badge-size) * .037);
  }

  .p-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .p-hero__actions .c-btn {
    width: 100%;
  }

  .p-hero__chips {
    gap: 8px;
  }
}

/* ===== 02-hilight.css ===== */
/* ==========================================================================
   Hilight (02-hilight)

   Main View(01)の下端と53px重なる、4カラムの緑カード。
   幅は標準コンテンツ幅と同じ1100pxのため .l-container をそのまま利用する。

   目次
   (a) セクション本体（Main Viewとの-53px重なり）
   (b) カード内側・4カラム
   (c) Tablet（1023px以下）: 2列×2行
   (d) SP（767px以下）: 重なり解除・文字サイズ調整
   ========================================================================== */

/* ==========================================================================
   (a) セクション本体（Main Viewとの-53px重なり）
   ========================================================================== */

.p-hilight {
  position: relative;
  z-index: 2;
  margin-top: -53px;
}

/* ==========================================================================
   (b) カード内側・4カラム
   ========================================================================== */

.p-hilight__inner {
  display: flex;
  align-items: stretch;
  padding-block: 30px;
  border-radius: var(--radius);
  background-color: var(--brand-deep);
  /* base.cssの--shadow-*トークンに一致する値が無いため直値。
     ヒーロー画像に重なる浮遊カードのため、他セクションより強めの影が必要 */
  box-shadow: 5px 5px 20px rgba(0, 0, 0, .2);
}

.p-hilight__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  /* 実測値ではカラムの実高さは160px固定だが、テキスト2行構成の最長カラム
     でも中身は133px（pad-top24 + 見出し42 + gap16 + 説明51）にしかならず、
     残り27pxが下部の余白として空く（align-items:stretchで他カラムも
     同じ高さに揃う）。これを反映しないと.p-hilight__innerの高さが
     193pxとなり、正解の220px（pad-block30×2 + カラム160）に届かない */
  padding-bottom: 27px;
  text-align: center;
}

/* カラム間の点線縦罫（画像は使わずCSSのborderで実装） */
.p-hilight__col:not(:last-child) {
  border-right: 1px dashed rgba(255, 255, 255, .8);
}

.p-hilight__heading {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: var(--bg);
}

.p-hilight__desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.p-hilight__desc-main {
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--brand-light);
}

.p-hilight__desc-sub {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--brand-light);
}

/* ==========================================================================
   (c) Tablet（1023px以下）: 2列×2行
   DESIGN-SPEC.md §7「Hilight 4列 → Tablet 2列 → SP 2列」に基づく
   ========================================================================== */

@media (max-width: 1023px) {
  .p-hilight__inner {
    flex-wrap: wrap;
  }

  .p-hilight__col {
    flex: 1 1 50%;
    max-width: 50%;
    padding: 24px 16px;
  }

  /* 2列×2行になるため、点線罫を「右側2本」から「十字」に組み替える */
  .p-hilight__col:nth-child(1),
  .p-hilight__col:nth-child(3) {
    border-right: 1px dashed rgba(255, 255, 255, .8);
  }

  .p-hilight__col:nth-child(2),
  .p-hilight__col:nth-child(4) {
    border-right: none;
  }

  .p-hilight__col:nth-child(1),
  .p-hilight__col:nth-child(2) {
    border-bottom: 1px dashed rgba(255, 255, 255, .8);
    margin-bottom: 8px;
  }
}

/* ==========================================================================
   (d) SP（767px以下）: 重なり解除・文字サイズ調整
   ========================================================================== */

@media (max-width: 767px) {
  .p-hilight {
    margin-top: 0;
  }

  .p-hilight__col {
    padding: 20px 10px;
    gap: 12px;
  }

  .p-hilight__heading {
    font-size: 22px;
  }

  .p-hilight__desc-main {
    font-size: 16px;
  }

  .p-hilight__desc-sub {
    font-size: 13px;
  }
}

/* ===== 03-worries.css ===== */
/* ==========================================================================
   行政書士たけなか法務事務所 TOPページ
   03. Worries（お悩み）セクション

   背景色は --brand-light（#D6EFC8）。_ref/specs/03_worries.md 5行目の
   実測値 fill=['#D6EFC8'] および参照画像のピクセル実測(RGB(214,239,200))と
   一致する。#C5E2A8 は同セクション内の人物イラストでのみ使われる色であり、
   背景色ではない。セクション下端は border-radius の楕円コーナーで
   大きな円弧状カーブを再現している（詳細は .p-worries のコメント参照）。
   ========================================================================== */

.p-worries {
  position: relative;
  background-color: var(--brand-light);
  /* 円弧カーブの実装:
     bottom-left / bottom-right の角丸を「水平方向は50%（左右の丸みが中央で
     ぴったり合わさる）× 垂直方向は固定150px」で作ることで、中央が最も深く、
     左右の端に向かって持ち上がる大きなドーム状カーブを表現している。
     参照画像をピクセル解析した実測（中央で高さ100%、両端で約151px短くなる）
     に基づき垂直方向を150pxに設定。真円のアーチにはならないが、
     指示書が例示する手法（border-radius: 0 0 50% 50% / 0 0 100px 100px 相当）
     に沿った近似実装。 */
  border-radius: 0 0 50% 50% / 0 0 150px 150px;
}

.p-worries__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.p-worries__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
}

/* 見出し（.c-section-head）はbase.cssの共通コンポーネントをそのまま使用する。
   width:100%を指定しているのは、親(.p-worries__top)がalign-items:centerの
   flexコンテナであるため、指定しないと見出しブロックが「内容に応じた
   縮小フィット幅」になり、日本語の見出し文が折り返されず画面外へ
   はみ出してしまうことを防ぐため（base.css自体は変更していない）。 */
.p-worries .c-section-head {
  width: 100%;
}

/* リード文のみ、実測タイポ（weight 500 / line-height 1.0 / ls 0.8）が
   共通コンポーネントの既定値（weight 400 / line-height 1.6）と異なるため、
   base.cssは変更せず本セクション内に限定したセレクタで上書きする。 */
.p-worries .c-section-head__lead {
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
}

/* ---- お悩みカード3枚 ---- */

.p-worries__cards {
  display: flex;
  gap: 24px;
  width: 100%;
}

.p-worries__card {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 198px;
  padding: 24px 20px;
  background-color: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.p-worries__card-text {
  font-weight: 600;
  font-size: 18px;
  line-height: 2;
  color: var(--text);
}

/* 各カードの後半行の強調色（スペック上のfill値は先頭行と同一だが、
   参照画像をピクセルサンプリングした結果 #437E55 = --brand-deep と判明した
   ため、これを採用する） */
.p-worries__em {
  color: var(--brand-deep);
}

/* ---- カード下に重なるイラスト ---- */

.p-worries__cards-wrap {
  position: relative;
  width: 100%;
  /* illust-worries.svg（1100x328）はカード分の高さ(198px)を超えて
     328-198=130px はみ出す構図のため、その分の表示スペースを確保する */
  padding-bottom: 130px;
}

.p-worries__illust {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ---- 「その悩み、まるごとお任せください！」 ---- */

.p-worries__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  /* .p-worries__cta-text の max-width:100% を有効にするため、このブロック
     自体も「内容に応じた縮小フィット幅」ではなく親いっぱいの幅を持たせる */
  width: 100%;
}

.p-worries__cta-arrow {
  display: block;
}

.p-worries__cta-text {
  display: inline-flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 40px;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--text);
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--brand-base);
}

/* 「まるごと」の手描き風の丸囲み装飾。
   実装当初はFigma上にSVGアセットが見当たらなかったため、::before（傾けた
   楕円ボーダー）と::after（右下に流れる手描き風の跳ね）を重ねてCSSのみで
   近似表現していた。その後Figma上に実レイヤー「まる線」
   （VECTOR @(567,745) 200x152、_ref/specs/03_worries.md 151行目）が
   存在することが判明し、支給されたPNG（assets/img/mark-circle.png、
   300x228・透過あり。デザイン表示サイズ200x152のちょうど1.5倍で
   アスペクト比1.316も完全一致）に差し替えたため、::before/::after による
   CSS近似は不要になった。以下は実素材を背景画像として表示する1枚の
   ::before のみで構成する。 */
.p-worries__mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-size: 36px;
  color: var(--brand-deep);
}

/* 円の実測サイズ200x152・中心オフセットx-4px/y+5px（_ref/specs/03_worries.md
   145-151行目より、「まる線」と「まるごと」テキストそれぞれの座標から算出）を、
   PC時の.p-worries__mark font-size（36px）基準でem換算している。
   幅 200/36=5.556em、高さ 152/36=4.222em、オフセット -4/36=-0.111em、
   5/36=0.139em。px固定ではなくem指定にすることで、Tablet/SPでfont-sizeが
   変わっても円とテキストのサイズ比を保ったまま追随する。 */
.p-worries__mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 5.556em;
  height: 4.222em;
  transform: translate(-50%, -50%) translate(-0.111em, 0.139em);
  background-image: url(../img/mark-circle.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (max-width: 1023px) {
  .p-worries {
    border-radius: 0 0 50% 50% / 0 0 90px 90px;
  }

  .p-worries__cards {
    flex-direction: column;
  }

  .p-worries__card {
    width: 100%;
  }

  /* illust-worries.svg は3人の人物がPC3カラムのカード位置に合わせて
     固定配置された1枚絵のため、カードが縦積みになるTablet以降は
     カードとの位置対応が崩れる。無理に位置調整するより非表示にする方が
     破綻がないと判断し、display:none とした（判断内容は完了報告にも記載）。 */
  .p-worries__cards-wrap {
    padding-bottom: 0;
  }

  .p-worries__illust {
    display: none;
  }

  .p-worries__cta-text {
    font-size: 22px;
    gap: 24px;
  }

  .p-worries__mark {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .p-worries {
    border-radius: 0 0 50% 50% / 0 0 50px 50px;
  }

  .p-worries__cta {
    gap: 40px;
  }

  .p-worries__cta-text {
    gap: 8px 16px;
    font-size: 18px;
    text-align: center;
  }

  .p-worries__mark {
    font-size: 22px;
  }
}

/* ===== 04-message.css ===== */
/* ==========================================================================
   行政書士たけなか法務事務所 TOPページ
   04. Message（代表挨拶）セクション
   ========================================================================== */

.p-message {
  background-color: var(--bg);
}

.p-message__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.p-message__row {
  display: flex;
  align-items: center;
  gap: 109px;
}

/* ---- 代表写真 ---- */

.p-message__photo {
  flex: 0 0 480px;
  width: 480px;
  aspect-ratio: 480 / 531;
  overflow: hidden;
}

.p-message__photo img {
  width: 100%;
  height: 100%;
  /* 原本680x700・表示480x531でアスペクト比が異なるため object-fit:cover で
     トリミングする */
  object-fit: cover;
}

/* ---- テキストカラム ---- */

.p-message__text {
  flex: 1 1 512px;
  max-width: 512px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.p-message__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-message__label {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 3.2px;
  color: var(--brand-base);
}

/* 見出しのフォントサイズ・行間・字間は base.css の h2 共通ルール
   （clamp(22px,2.4vw,32px) / line-height 1.6 / letter-spacing 1.6px）を
   そのまま利用し、実測値どおり weight のみ 600 に上書きする
   （このセクションだけ600指定でありbase.cssの標準700とは異なる）。 */
.p-message__title {
  font-weight: 600;
  color: var(--text);
}

/* 見出し2行目のマーカー風ハイライト。line-gradientで下線状に敷く。
   スペック実測（テキスト行の下から約35%の位置に高さ12pxの帯）に基づき、
   下から35%の位置を境目とした2色グラデーションで再現している。 */
.p-message__marker {
  background-image: linear-gradient(transparent 65%, var(--brand-base-50) 65%);
}

.p-message__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

/* スペック上、本文1・2段落目のみ align=JUSTIFIED が指定されている */
.p-message__body p:nth-of-type(1),
.p-message__body p:nth-of-type(2) {
  text-align: justify;
}

/* ---- 署名 ---- */

.p-message__sign {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.p-message__sign-label {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.8px;
  color: var(--text);
}

.p-message__sign-img {
  width: 158px;
}

/* ---- ボタン ---- */
/* 色・形状は .c-btn / .c-btn--secondary（brand-base）をそのまま使用し、
   位置のみ右寄せにする（スペックの cross=MAX に相当） */
.p-message__btn {
  align-self: flex-end;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (max-width: 1023px) {
  .p-message__row {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .p-message__photo {
    flex: none;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }

  .p-message__text {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .p-message__inner {
    gap: 40px;
  }

  .p-message__row {
    gap: 30px;
  }

  .p-message__sign {
    flex-wrap: wrap;
  }

  .p-message__btn {
    align-self: stretch;
    justify-content: center;
  }
}

/* ===== 05-creeds.css ===== */
/* ==========================================================================
   行政書士たけなか法務事務所 TOPページ
   05. Creeds（7つの社訓）セクション
   ========================================================================== */

.p-creeds {
  background-color: var(--bg-light);
}

.p-creeds__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* 見出し（.c-section-head）はbase.cssの共通コンポーネントをそのまま使用する。
   width:100%を指定しているのは、親(.p-creeds__inner)がalign-items:centerの
   flexコンテナであるため、指定しないと見出しブロックが「内容に応じた
   縮小フィット幅」になり、日本語の見出し文が折り返されず画面外へ
   はみ出してしまうことを防ぐため（base.css自体は変更していない）。 */
.p-creeds .c-section-head {
  width: 100%;
}

/* リード文のみ実測タイポ（weight 500 / line-height 1.0 / ls 0.8）が
   共通コンポーネントの既定値と異なるため、base.cssは変更せず本セクション
   内に限定したセレクタで上書きする（03-worries.cssと同じ対応）。 */
.p-creeds .c-section-head__lead {
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
}

/* ---- カード7枚（上段4・下段3） ----
   PCでは1行に4枚ぴったり収まる固定幅(257px)のflexを折り返し、
   justify-content:centerにより2行目（3枚）が自動的に中央寄せになる。
   Tablet/SP はCSS Gridに切り替え、7枚を3列/2列で単純に折り返す
   （中央寄せオフセットを解除するため。詳細は下記メディアクエリのコメント参照）。 */
.p-creeds__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.p-creeds__card {
  flex: 0 0 257px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-deep);
  border-radius: var(--radius);
}

.p-creeds__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.p-creeds__num {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: 1.1px;
  /* _ref/specs/05_creeds.md の "01"〜"07" は全て fill=['#C5E2A8']（7箇所とも
     一致）。--border-green(#C5E2A8) と同値のため同トークンを流用する */
  color: var(--border-green);
}

.p-creeds__icon {
  width: 60px;
  height: 60px;
}

.p-creeds__label {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 1.2px;
  color: var(--bg);
  text-align: center;
}

/* ---- 締めの2行テキスト ---- */

.p-creeds__closing {
  /* .c-section-head と同じ理由でwidth:100%が必要（親のalign-items:centerに
     よる縮小フィット幅を防ぎ、テキストを正しく折り返させる） */
  width: 100%;
  font-weight: 500;
  font-size: 22px;
  line-height: 2;
  color: var(--text);
  text-align: center;
}

.p-creeds__accent {
  color: var(--accent-base);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (max-width: 1023px) {
  /* 4+3の2段組み・下段中央寄せはPC専用のレイアウトのため、
     列数が変わるここからはCSS Gridに切り替えて単純な3列送りにする。
     Gridは最終行が余っても中央寄せにならず左詰めになるため、
     「列数が変わったら中央寄せオフセットは解除する」という方針に合致する。 */
  .p-creeds__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .p-creeds__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-creeds__closing {
    font-size: 18px;
  }
}

/* ===== 06-services.css ===== */
/* ==========================================================================
   Services セクション（06）
   3列×2行のカード6枚 + 全幅の横長カード1枚（その他の個別対応）
   ========================================================================== */

.p-services__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 60px;
}

/* ---- カード共通 ---- */

.p-services__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0; /* 予防的措置: グリッド内のnowrap要素がカード幅を押し広げないようにする */
  padding: 30px;
  background-color: var(--bg);
  border: 2px solid rgba(192, 207, 178, .8); /* トークン外: スペック実測値 #C0CFB2/0.8（通常カードの枠線） */
  border-radius: var(--radius);
}

/* 特別カード（相続丸投げパック） */
.p-services__item--featured {
  position: relative;
  border: 4px solid var(--accent-base);
  box-shadow: 5px 5px 15px rgba(251, 176, 59, .3); /* トークン外: スペック実測値 #FBB03B/0.3（このカードのみの特別な影） */
}

/* ヒーローの丸投げパックバッジ（01-mainview .p-hero__badge）からのリンク先。
   base.cssのsection[id]{scroll-margin-top:100px}は<section>のみが対象で
   この<li>（#service-marunage）には効かないため、ヘッダー（高さ80px・
   position:sticky）にカード上端が隠れないよう個別に指定する。実機検証の
   結果、ヘッダー高さ+20px程度の余白があるとカード上端がヘッダーに接せず
   自然に見えたため、他セクションのscroll-margin-top（100px）と同じ値を
   採用した */
#service-marunage {
  scroll-margin-top: 100px;
}

/* 全幅カード（その他の個別対応） */
.p-services__item--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.p-services__item--wide .p-services__body {
  flex: 1 1 auto;
  padding-right: 30px;
  padding-bottom: 0;
  border-right: 1px dashed var(--border-light);
  border-bottom: none;
}

/* ---- カード本文（タグ・名称・説明） ---- */

.p-services__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--border-light);
}

.p-services__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  padding: 6px 16px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--brand-deep);
  color: var(--bg);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .75px;
}

/* 2文字タグ（遺言・調査・書類・整理）はスペック実測でletter-spacingが広い */
.p-services__tag--tight {
  letter-spacing: 1.5px;
}

/* 相続丸投げパックのみタグ背景がオレンジ（--accent-base） */
.p-services__tag--accent {
  background-color: var(--accent-base);
}

.p-services__name {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 1.2px;
  color: var(--text);
}

.p-services__desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  text-align: justify;
}

/* ---- 料金 ---- */

.p-services__price {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-services__price-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 20px;
}

.p-services__price-label {
  white-space: nowrap;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-medium);
}

.p-services__price-figure {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
  color: var(--brand-base);
}

.p-services__price-num {
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}

/* パーセンテージ表記（相続丸投げパック・相続財産整理）は数値が大きい */
.p-services__price-num--lg {
  font-size: 36px;
}

.p-services__price-yen {
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
}

.p-services__price-note {
  margin-left: 4px;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-medium);
}

/* 相続丸投げパックのみ料金がオレンジ（--accent-base） */
.p-services__item--featured .p-services__price-figure {
  color: var(--accent-base);
}

/* ---- 特別カードのバッジ（お客様の9割が利用） ---- */

.p-services__badge {
  position: absolute;
  top: -24px;
  /* rightは.p-services__item--featuredのpadding-edge基準の値のため、実際に
     getBoundingClientRect()で測れる「カード（border-box）から右にどれだけ
     はみ出すか」は、right(-15px)からこのカードのborder幅4px分を差し引いた
     約11pxになる（実測値と一致）。この11pxのはみ出しは円のサイズ・幅に
     関わらずrightの絶対値だけで決まるため1366px幅でも常に発生しており、
     デザイン上許容されている挙動である（1366pxでの見た目は本値のまま
     変えない）。しかし1024pxでもこのrightを-15px固定のままにすると、
     カードが3列グリッドで約309pxまで縮んだ状態でも同じ11pxのはみ出しが
     残ってしまうため、1366px→1024pxで-15px→-2px程度まで滑らかに縮む
     計算式にした（clampの中間値をvwで作り、1366px側は基準どおり-15pxに、
     1024px側は-2px-4px(border)=2px分カードの内側に収まる値になるよう
     逆算した：coefficient=(-15-(-2))/(13.66-10.24)vw分の傾きを持たせ、
     1366px側でちょうど-15pxに、1024px側でちょうど-2px相当にクランプされる）。
     1024px未満（Tablet/SP）はカードが2列以下になり十分な余白があるため
     この式のままでも問題ないことを確認済み */
  right: clamp(-15px, calc(37.171px - 3.82vw), -2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--accent-base);
  color: var(--bg);
  line-height: 1.45;
  text-align: center;
}

.p-services__badge-line1 {
  font-weight: 700;
  font-size: 15px;
}

.p-services__badge-line2 {
  font-weight: 700;
  font-size: 16px;
}

.p-services__badge-num {
  font-size: 28px;
}

/* ---- その他カードの見積り部分 ---- */

.p-services__quote {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding-left: 50px;
  text-align: right;
}

.p-services__quote-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: #808080; /* トークン外: スペック実測値。--text-medium(#6B6B6B)とは別の一回限りのグレー */
}

.p-services__quote-value {
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--brand-base);
}

/* ---- 注釈・ボタン ---- */

.p-services__note {
  margin-top: 60px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-medium);
  text-align: center;
}

.p-services__cta {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* ---- PC範囲内（1024px〜1100px）: 料金ラベル+金額の縦積み化 ----
   3列グリッドのままPC範囲の下限（1024px）に近づくとカード内側の実質幅が
   縮み、「相続財産の」（丸投げパック・相続財産整理カード、36px大の%表記）
   のようにラベルが長く金額も大きい行はnowrap同士の横並びでは収まらず、
   実機検証でカード左端から最大約50pxはみ出すことを確認した。
   このカード内側の実質幅は、featuredカード（border 4px）で
   「カード幅-68px」、通常カード（border 2px）で「カード幅-64px」となる。
   1366px（カード幅344px）はもちろん、.l-containerが1100px上限に張り付く
   1148px以上ではカード幅は常に344pxで変わらないため、最もラベルが長い行
   （実測で必要幅284.5625px）ですら実質幅276px（featuredカード）を約8.6px
   超過する。ただしこの超過分はjustify-content:flex-endにより左側の
   30pxパディング内に収まって視覚的には現れないため、1366pxを含む1148px
   以上の見た目には一切影響しない（現状のまま）。
   カード幅が1148px未満に縮み始めると超過分が徐々に広がり、実機検証の
   結果1084px付近でこの30pxパディングを使い切り、それ未満でカード外縁
   （白いカード枠）へ実際にはみ出し始める。1100pxはその1084pxに対して
   十分な安全マージンを持たせた閾値で、1366px（および1148px以上）の見た目
   には影響を与えず、1084px〜1024pxで発生する視認可能なはみ出しのみを
   確実に解消する。
   縦積みへの切り替えはSP版（767px以下）と同じgap:4pxではなく、PC〜Tablet
   の中間的な見やすさとして少し広めのgap:8pxを採用した */
@media (max-width: 1100px) {
  .p-services__price-row {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

@media (max-width: 1023px) {
  .p-services__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .p-services__list {
    grid-template-columns: 1fr;
  }

  /* SP幅では「ラベル+金額」を横並びのままにすると窮屈なため、
     縦積みにして可読性を優先する（独自判断。要素幅自体は横並びでも収まる） */
  .p-services__price-row {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .p-services__item--wide {
    flex-direction: column;
    align-items: stretch;
  }

  .p-services__item--wide .p-services__body {
    padding-right: 0;
    padding-bottom: 24px;
    border-right: none;
    border-bottom: 1px dashed var(--border-light);
  }

  .p-services__quote {
    padding-left: 0;
    text-align: left;
  }

  .p-services__badge {
    top: -16px;
    right: -10px;
    width: 92px;
    height: 92px;
  }

  .p-services__badge-line1 {
    font-size: 12px;
  }

  .p-services__badge-line2 {
    font-size: 13px;
  }

  .p-services__badge-num {
    font-size: 22px;
  }
}

/* ===== 07-reasons.css ===== */
/* ==========================================================================
   Reasons セクション（07）
   白カード3枚を縦積み。画像とテキストが左右交互（02のみ反転）
   ========================================================================== */

.p-reasons {
  background-color: var(--brand-light);
}

.p-reasons__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 60px;
}

.p-reasons__item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: var(--radius);
  overflow: hidden;
}

/* 02は画像とテキストの左右を反転 */
.p-reasons__item--reverse {
  flex-direction: row-reverse;
}

.p-reasons__figure {
  display: block;
  flex: 0 0 50%;
}

.p-reasons__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-reasons__content {
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  gap: 30px;
  padding: 50px 50px 50px 60px;
  background-color: var(--bg);
}

.p-reasons__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-reasons__number {
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--brand-base);
}

.p-reasons__heading {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: var(--text);
}

/* マーカー風ハイライト（見出し2行目のみ） */
.p-reasons__marker {
  background: linear-gradient(transparent 60%, var(--brand-base-50) 60%);
}

.p-reasons__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  text-align: justify;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (max-width: 1023px) {
  /* 左右交互を解除し、全カード「画像が上・テキストが下」に統一 */
  .p-reasons__item,
  .p-reasons__item--reverse {
    flex-direction: column;
  }

  .p-reasons__figure,
  .p-reasons__content {
    flex-basis: auto;
  }

  .p-reasons__figure {
    aspect-ratio: 550 / 386;
  }

  .p-reasons__content {
    padding: 40px;
  }
}

@media (max-width: 767px) {
  .p-reasons__content {
    padding: 30px 24px;
    gap: 24px;
  }

  .p-reasons__number {
    font-size: 28px;
  }

  .p-reasons__heading {
    font-size: 22px;
  }
}

/* ===== 08-cases.css ===== */
/* ==========================================================================
   Case studies セクション（08）
   2列×2行のカード4枚。上部が深緑ヘッダー帯、下部がクリーム色の本文
   ========================================================================== */

.p-cases__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 36px;
  margin-top: 60px;
}

.p-cases__item {
  display: flex;
  flex-direction: column;
}

/* ---- ヘッダー帯（CASE番号 + タイトル） ---- */

.p-cases__header {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 80px;
  padding: 0 40px;
  background-color: var(--brand-deep);
  border-radius: 30px 30px 0 0;
}

.p-cases__badge {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
}

.p-cases__badge-label {
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .8);
}

.p-cases__badge-num {
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 2.4px;
  color: var(--bg);
  text-align: center;
}

.p-cases__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 1.2px;
  color: var(--bg);
}

/* ---- 本文エリア（タグ + 説明文） ---- */

.p-cases__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  padding: 30px 40px 40px;
  background-color: #F2F4D9; /* トークン外: スペック実測値。--bg-light(#FBFCEE)とは別のクリーム色 */
}

.p-cases__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  padding: 6px 16px 8px;
  background-color: var(--bg);
  border: 1px solid var(--brand-deep);
  border-radius: var(--radius-sm);
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

.p-cases__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  text-align: justify;
}

/* ---- ボタン ---- */

.p-cases__cta {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (max-width: 767px) {
  .p-cases__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .p-cases__header {
    padding: 16px 24px;
    min-height: 0;
  }

  .p-cases__body {
    padding: 24px;
  }
}

/* ===== 09-flow.css ===== */
/* ==========================================================================
   09. Flow（ご相談から完了までの流れ）
   frame: 1366x772 / 背景 #D6EFC8（--brand-light と一致）
   ========================================================================== */

.p-flow {
  background-color: var(--brand-light);
}

.p-flow__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* 見出しのリード文のみスペック実測値（weight500 / lh1.0 / ls0.8）で上書き。
   base.cssの.c-section-head__lead（weight400 / lh1.6）とは異なるため */
.p-flow__lead {
  font-weight: 500;
  line-height: 1;
  letter-spacing: .8px;
}

.p-flow__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 50px 40px 0;
  background-color: var(--bg);
  border-radius: var(--radius);
}

.p-flow__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
}

.p-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 164px;
}

.p-flow__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding-bottom: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--brand-base);
  color: var(--bg);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}

.p-flow__step-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.p-flow__step-name {
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--text);
}

.p-flow__step-desc {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  color: var(--text);
}

.p-flow__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.p-flow__note {
  width: 100%;
  padding: 40px 0;
  border-top: 1px solid var(--border-light);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: var(--text);
}

/* ---- Tablet: 1023px以下（横5ステップ→縦積み、矢印を90度回転） ---- */
@media (max-width: 1023px) {
  .p-flow__steps {
    flex-direction: column;
    gap: 32px;
  }

  .p-flow__step {
    width: 100%;
    max-width: 320px;
  }

  .p-flow__arrow {
    transform: rotate(90deg);
  }

  .p-flow__card {
    padding: 40px 24px 0;
  }
}

/* ---- SP: 767px以下 ---- */
@media (max-width: 767px) {
  .p-flow__card {
    gap: 32px;
    padding: 32px 20px 0;
  }

  .p-flow__steps {
    gap: 24px;
  }

  .p-flow__note {
    padding: 24px 0;
  }
}

/* ===== 10-office.css ===== */
/* ==========================================================================
   10. Office, Access（事務所概要とアクセス）
   frame: 1100x843（コンテンツ幅のみ、全幅背景なし）
   ========================================================================== */

.p-office__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 93px;
}

.p-office__col {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* 実測比率465:542（gap93pxを除いたコンテンツ幅の合計1007px）をflex-growの
   比率としてそのまま採用する。1366px時（.l-container=1100px、gap93pxを
   引いた残り907px…ではなく実際は1100-93=1007pxとちょうど比率の合計に一致）は
   flex-basis:0のもとで907pxではなく1007px全てが465:542で配分されるため
   465px/542pxと従来のpx固定値に完全一致する。1024px（.l-container=976px、
   残り883px）のように .l-container が1100pxを下回る幅では、余った883pxを
   同じ465:542比率で自動的に按分し（約408px/475px）、2カラムの合計が常に
   コンテナ幅に収まるようにする（従来のwidth固定+flex-shrink:0だと1024pxで
   465+542=1007pxが976pxのコンテナに収まらず124pxはみ出していた）。
   min-width:0はflexアイテムの既定min-width:autoを解除し、内部の
   .p-office__table（グリッド）やGoogle Map iframeが縮小を妨げないための
   予防的措置 */
.p-office__col--info {
  flex: 465 1 0;
  min-width: 0;
}

.p-office__col--access {
  flex: 542 1 0;
  min-width: 0;
}

/* OFFICE/ACCESSラベルはスペック実測値（15px / ls3.0）で上書き。
   base.cssの.c-section-head__label（16px / ls3.2）とは異なるため */
.p-office__label {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 3px;
}

/* ---- 事務所概要（定義リスト） ---- */

/* dl直下にdt/ddをフラットに並べ、dl自体をgridコンテナにして2カラム表を表現する
   （<table>を使わずに「行」の見た目をCSSだけで再現するため） */
.p-office__table {
  display: grid;
  grid-template-columns: 120px 1fr;
  /* _ref/specs/10_office.md 14行目 stroke=['#C5E2A8'] の実測値に基づく
     外枠線。トークン --border-green を使用 */
  border: 1px solid var(--border-green);
}

.p-office__term,
.p-office__desc {
  border-bottom: 1px solid #C1D8A9; /* トークン外の色。行区切り線としてのみ使用 */
}

.p-office__desc:last-child {
  border-bottom: none;
}

.p-office__term {
  display: flex;
  align-items: center;
  padding: 24px 20px;
  /* トークン外の色。--brand-light(#D6EFC8)に近いが、スペック実測値はこの値 */
  background-color: #D7EBC3;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

.p-office__desc {
  display: flex;
  align-items: center;
  padding: 24px 20px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

.p-office__desc a {
  text-decoration: underline;
}

/* ---- アクセス ---- */

.p-office__access {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-office__map {
  width: 100%;
  aspect-ratio: 542 / 319;
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.p-office__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.p-office__access-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-office__access-list li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

.p-office__access-list img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* ---- Tablet: 1023px以下（左右2カラム解除→縦積み） ---- */
@media (max-width: 1023px) {
  .p-office__inner {
    flex-direction: column;
    gap: 60px;
  }

  .p-office__col--info,
  .p-office__col--access {
    width: 100%;
  }
}

/* ===== 11-cta.css ===== */
/* ==========================================================================
   11. CTA（まずは、お話をお聞かせください。）
   frame: 1366x779 / 背景は「画像(opacity .2) + #82B055を乗算(multiply)」の
   2層構成（node_top.json 実データ確認: fills[0]=画像 opacity 0.2 blend NORMAL,
   fills[1]=ソリッド#82B055 opacity 1 blend MULTIPLY）。
   この構成は mix-blend-mode:multiply と opacity:.2 の組み合わせに数学的に
   等価（green×(0.2·img+0.8·white) = 0.2·multiply(green,img) + 0.8·green）。
   参照画像 _ref/ref/11_cta.png の白地部分をピクセル実測した結果も
   RGB(130,176,85)=#82B055 と完全一致し、このモデルを裏付けている。
   ========================================================================== */

.p-cta {
  position: relative;
  isolation: isolate; /* mix-blend-modeがセクション外（ページ全体）へ漏れないようにする */
  overflow: hidden;
  background-color: #82B055; /* トークン外の色。乗算合成のベースとなる緑 */
}

.p-cta__bg {
  position: absolute;
  inset: 0;
  /* z-indexは指定しない。指定すると.p-cta__bgがスタッキングコンテキストを
     生成してしまい、子imgのmix-blend-modeの合成対象がこの要素の内側
     （透明）に閉じてしまう。親.p-ctaのisolation:isolateの中でこの要素
     自身がスタッキングコンテキストを作らないことで、乗算の合成対象が
     親.p-ctaの背景色(#82B055)まで届くようにする */
  mix-blend-mode: multiply;
  opacity: .2;
}

.p-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-cta__inner {
  position: relative;
  z-index: 2;
  /* CTA固有のコンテンツ幅914px（実測値: 1366 - 226*2）。
     base.cssの.l-container(1100px)とは異なるため専用に定義 */
  width: min(914px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* ---- 見出し ---- */

.p-cta__title {
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: 1.9px;
}

.p-cta__lead {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: .9px;
}

/* ---- カード3枚 ---- */

.p-cta__cards {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 7px;
  width: 100%;
}

.p-cta__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  max-width: 290px;
  background-color: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: transform .25s ease;
}

.p-cta__card:hover {
  transform: translateY(-2px);
}

.p-cta__card--phone {
  padding: 28px 30px;
}

.p-cta__card--mail,
.p-cta__card--line {
  padding: 28px 40px 40px;
}

.p-cta__card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* --text(#33331E) の50%不透明度。トークン化されていないため直値
     （--brand-base-50 と同様の運用） */
  border-bottom: 1px solid rgba(51, 51, 30, .5);
}

.p-cta__card--phone .p-cta__card-head {
  gap: 12px;
  padding: 6px 0 10px;
}

.p-cta__card--mail .p-cta__card-head,
.p-cta__card--line .p-cta__card-head {
  gap: 16px;
  padding: 0 0 20px;
}

.p-cta__card-icon {
  display: block;
}

.p-cta__card--phone .p-cta__card-icon {
  width: 38px;
  height: 38px;
}

.p-cta__card--mail .p-cta__card-icon,
.p-cta__card--line .p-cta__card-icon {
  width: 46px;
  height: 46px;
}

.p-cta__card-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
}

.p-cta__card--phone .p-cta__card-title {
  line-height: 1.5;
}

.p-cta__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.p-cta__card--phone .p-cta__card-body {
  gap: 12px;
}

.p-cta__card--mail .p-cta__card-body,
.p-cta__card--line .p-cta__card-body {
  gap: 4px;
}

.p-cta__phone-number {
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 1.4px;
  color: var(--creed-green); /* #40824C相当。スペック実測値と一致 */
}

.p-cta__phone-hours {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text);
}

.p-cta__card-note {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

.p-cta__circle-btn {
  display: inline-flex;
  width: 48px;
  height: 48px;
}

.p-cta__circle-btn img,
.p-cta__circle-btn svg {
  width: 100%;
  height: 100%;
}

/* ---- チェック3項目 ---- */

.p-cta__checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
  color: var(--bg);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

/* ---- Tablet: 1023px以下（カード幅を可変にして3列を維持） ---- */
@media (max-width: 1023px) {
  .p-cta__cards {
    gap: 20px;
  }

  .p-cta__card {
    max-width: none;
  }
}

/* ---- SP: 767px以下（カードを1列に） ---- */
@media (max-width: 767px) {
  .p-cta__cards {
    flex-direction: column;
    align-items: stretch;
  }

  .p-cta__card {
    max-width: none;
    width: 100%;
  }

  .p-cta__checks {
    gap: 16px 32px;
  }
}

/* ===== 12-footer.css ===== */
/* ==========================================================================
   12. Footer
   frame: 1366x504 / 背景 --footer-bg(#386645)
   注意: _ref/specs/12_footer.md 4行目の実測値 fill=['#386645'] は
   --brand-deep(#437E55) とは異なる別の深緑のため、専用トークン --footer-bg
   として base.css に切り出している。
   ========================================================================== */

.p-footer {
  padding-top: 80px;
  padding-bottom: 20px;
  background-color: var(--footer-bg);
  color: var(--bg);
}

.p-footer a {
  transition: opacity .2s ease;
}

.p-footer a:hover {
  opacity: .75;
}

.p-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* ---- メインエリア（事務所情報 + ナビ3カラム） ---- */

.p-footer__main {
  display: grid;
  grid-template-columns: 256px 1fr;
  gap: 40px 60px;
}

.p-footer__info {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.p-footer__block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-footer__name {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}

.p-footer__address {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

.p-footer__rep {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-footer__rep-name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}

.p-footer__rep-affiliation {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}

.p-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.p-footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-footer__col-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 2.1px;
}

.p-footer__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-footer__list a {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

/* ---- 下部コピーライト ---- */

.p-footer__bottom {
  padding-block: 20px;
  /* 白の50%不透明度。トークン化されていないため直値（--brand-base-50と同様の運用） */
  border-top: 1px solid rgba(255, 255, 255, .5);
  text-align: center;
}

.p-footer__copyright {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  /* 白の80%不透明度。トークン化されていないため直値 */
  color: rgba(255, 255, 255, .8);
}

/* ---- Tablet: 1023px以下（4カラム相当→2列） ----
   .p-footer__nav を display:contents にして3カラムを親グリッドに合流させ、
   事務所情報+SERVICE+ABOUT+CONTACTの4ブロックを2列×2行に並べ替える */
@media (max-width: 1023px) {
  .p-footer__main {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .p-footer__nav {
    display: contents;
  }
}

/* ---- SP: 767px以下（1列） ---- */
@media (max-width: 767px) {
  .p-footer {
    padding-top: 48px;
    padding-bottom: 16px;
  }

  .p-footer__main {
    grid-template-columns: 1fr;
  }
}