/* ================================================================
   {OFFICE_NAME}税理士事務所 — サイト共通スタイル
   ----------------------------------------------------------------
   ◆ 色・フォントの調整はこのファイル冒頭の :root ブロック
     「だけ」を変更してください（Sonnet セッション向け）。
   ◆ :root 以外の場所に色コードを直書きすることは禁止です。
     （直書きがあると変数を変えても反映されないため）
   ================================================================ */

:root {
  /* ============================================================
     カラーパレット
     各変数の「使われる場所」をコメントに明記しています。
     ============================================================ */

  /* ※2026-11 配色を「A案：スレートブルー＋ティール」に変更。
     変数名（gold / ivory / apricot）は旧配色のまま残しているが、
     実際の色は下記コメントのとおり。 */

  /* 基調のスレートブルー。見出し文字・ヘッダー・主ボタンに使用。
     明るく／柔らかく → #2E4256 程度、より重厚に → #1A2530 程度 */
  --c-navy: #22313F;

  /* 深いスレート。ヒーローとフッターの背景。--c-navy より必ず一段暗く */
  --c-navy-deep: #17222C;

  /* ティール（青緑）。罫線・アイコン・フェーズ番号・リンク hover。
     落ち着かせる → #2A6F75、明るく → #3A9AA0 */
  --c-gold: #2F7F86;

  /* 淡いティール。濃い背景の上の罫線・eyebrow 文字 */
  --c-gold-soft: #A9D3D6;

  /* 淡い青みグレー。セクションの交互背景。
     白 #FFFFFF に変えるとサイト全体が急に「硬く」なるので注意 */
  --c-ivory: #F1F5F7;

  /* 明るめのティール。ヒーローのキーフレーズ下線・お悩みカードの
     アイコンなど、1画面 1〜2 箇所限定で使用。 */
  --c-apricot: #3A9AA0;

  /* テキスト。真っ黒でなく、わずかに青みのあるダークグレー */
  --c-text: #22282E;
  --c-text-muted: #5F6B75;  /* 補足文・キャプション */
  --c-white: #FFFFFF;

  /* ============================================================
     タイポグラフィ
     フォントを差し替える場合は index.html <head> の
     Google Fonts <link> も併せて変更すること
     ============================================================ */
  --font-display-ja: "Shippori Mincho", "Yu Mincho", serif;       /* 日本語見出し */
  --font-body-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif; /* 日本語本文 */
  --font-display-en: "Cormorant Garamond", Georgia, serif;        /* 英語見出し・eyebrow */
  --font-body-en: "Source Sans 3", "Helvetica Neue", sans-serif;  /* 英語本文 */
  /* ロゴ（事務所名）専用。日英どちらの表示でも同じ書体・同じ大きさに見せるため固定 */
  --font-logo: "Shippori Mincho", "Yu Mincho", serif;

  /* ============================================================
     サイズ・余白
     ============================================================ */
  --fs-hero: clamp(1.9rem, 4.5vw, 3.1rem);
  --fs-h2:   clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3:   1.2rem;
  --fs-body: 1rem;
  --lh-body: 1.9;                               /* 日本語本文の行間 */
  --space-section: clamp(4rem, 9vw, 7.5rem);    /* セクション間の縦余白 */
  --width-content: 1080px;                      /* コンテンツ最大幅 */
  --radius: 6px;      /* 角丸。「硬い」と感じたら 8〜10px に */
  --shadow-card: 0 6px 22px rgba(23, 34, 44, 0.08);
}

/* ================================================================
   言語切替（main.js が <body> のクラスを lang-ja ⇄ lang-en に切替）
   ================================================================ */
body.lang-ja .en { display: none; }
body.lang-en .ja { display: none; }
body.lang-en {
  /* EN モードでは英字向けフォントに置き換わる */
  --font-display-ja: var(--font-display-en);
  --font-body-ja: var(--font-body-en);
}

/* ================================================================
   ベース
   ================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  font-family: var(--font-body-ja);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-white);
}
img { max-width: 100%; display: block; }
a { color: var(--c-navy); }
a:hover { color: var(--c-gold); }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

.wrap { max-width: var(--width-content); margin: 0 auto; padding: 0 24px; }
section { padding: var(--space-section) 0; }
.bg-ivory { background: var(--c-ivory); }
.bg-navy  { background: var(--c-navy-deep); color: var(--c-white); }

/* ================================================================
   見出しまわり
   ================================================================ */
h2 {
  font-family: var(--font-display-ja);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--c-navy);
  line-height: 1.5;
}
.bg-navy h2 { color: var(--c-white); }
.goldline { width: 32px; height: 2px; background: var(--c-gold); margin: 14px 0 28px; }
.eyebrow {
  font-family: var(--font-display-en);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 14px;
}
.bg-navy .eyebrow { color: var(--c-gold-soft); }

/* ================================================================
   ボタン
   ルール: 金のベタ塗りボタンは禁止（§5 配色ルール）
   ================================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body-ja);
  font-weight: 500;
  font-size: .95rem;
  padding: 14px 34px;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-primary {
  background: var(--c-navy);
  color: var(--c-white);
  border: 1px solid transparent;
}
.btn-primary:hover { border-color: var(--c-gold); background: #2E4256; color: var(--c-white); }
.bg-navy .btn-primary { background: rgba(255,255,255,.06); border-color: rgba(169,211,214,.55); }
.btn-light {
  background: var(--c-white);
  color: var(--c-navy);
  border: 1px solid var(--c-navy);
}
.btn-light:hover { border-color: var(--c-gold); color: var(--c-gold); }

/* ================================================================
   カード
   ================================================================ */
.card {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
  border-top: 2px solid var(--c-gold);
}
.card h3 {
  font-family: var(--font-display-ja);
  font-size: var(--fs-h3);
  color: var(--c-navy);
  margin-bottom: 10px;
}

/* ================================================================
   航路ライン（シグネチャ要素・支援メニュー用）
   PC: 横一直線 / モバイル(〜720px): 縦
   ================================================================ */
.route { display: flex; align-items: center; }
.route .node {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--font-display-en);
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white);
}
.route .leg { flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--c-gold), var(--c-gold-soft)); }
@media (max-width: 720px) {
  .route { flex-direction: column; }
  .route .leg { width: 1.5px; height: 40px; flex: none;
    background: linear-gradient(180deg, var(--c-gold), var(--c-gold-soft)); }
}

/* ================================================================
   M2: ヘッダー・ナビ・フッター
   ※色は必ず :root の変数を参照（直書き禁止）
   ================================================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-white);
  box-shadow: 0 1px 0 rgba(23, 34, 44, 0.08);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 68px;
}
.logo {
  font-family: var(--font-logo);
  font-weight: 600; font-size: 1.05rem;
  color: var(--c-navy); text-decoration: none;
  letter-spacing: .02em;
}
.logo:hover { color: var(--c-navy); }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav > a {
  font-size: .9rem; text-decoration: none;
  color: var(--c-text); padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.site-nav > a:hover { color: var(--c-navy); border-bottom-color: var(--c-gold); }
.site-nav .nav-cta { padding: 9px 22px; font-size: .88rem; border-bottom: none; color: var(--c-white); }
.site-nav .nav-cta:hover { color: var(--c-white); }

.lang-toggle {
  font-family: var(--font-body-ja);
  font-size: .82rem; font-weight: 500;
  color: var(--c-navy);
  background: transparent;
  border: 1px solid var(--c-gold);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lang-toggle:hover { background: var(--c-gold); color: var(--c-white); }

/* ハンバーガー（モバイルのみ表示） */
#nav-burger {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 10px; margin: -10px;
}
.burger-bar {
  display: block; width: 22px; height: 2px;
  background: var(--c-navy); margin: 5px 0;
  transition: transform .2s, opacity .2s;
}
#nav-burger[aria-expanded="true"] .burger-bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
#nav-burger[aria-expanded="true"] .burger-bar:nth-child(3) { opacity: 0; }
#nav-burger[aria-expanded="true"] .burger-bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  #nav-burger { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-white);
    box-shadow: 0 12px 24px rgba(23, 34, 44, 0.12);
    padding: 8px 24px 20px;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav > a { padding: 14px 0; border-bottom: 1px solid var(--c-ivory); }
  .site-nav .nav-cta { margin-top: 14px; text-align: center; }
  .lang-toggle { margin-top: 12px; align-self: flex-start; }
}

/* フッター */
.site-footer {
  background: var(--c-navy-deep);
  color: #9BA8B3;
  padding: 44px 0 32px;
  font-size: .85rem;
}
.footer-inner { text-align: center; }
.footer-name {
  font-family: var(--font-logo);
  color: var(--c-white); font-size: 1rem; margin-bottom: 10px;
}
.footer-meta { margin-bottom: 14px; }
.footer-links a { color: var(--c-gold-soft); text-decoration: none; }
.footer-links a:hover { color: var(--c-gold); text-decoration: underline; }
.footer-copy { margin-top: 18px; font-size: .78rem; opacity: .7; }

/* ================================================================
   M3: ヒーロー・お悩み・選ばれる理由
   ================================================================ */

/* --- ヒーロー --- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 12vw, 8.5rem) 0;
}
/* 背景の装飾円（淡い金の同心円。世界地図の緯線のイメージ） */
.hero::after {
  content: ""; position: absolute; right: -80px; top: -60px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(169, 211, 214, .18);
  pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; right: 40px; top: 40px;
  width: 280px; height: 280px; border-radius: 50%;
  border: 1px solid rgba(169, 211, 214, .12);
  pointer-events: none;
}
.hero-eyebrow {
  /* eyebrow の英字用スタイルを日本語向けに上書き */
  font-family: var(--font-body-ja);
  text-transform: none;
  letter-spacing: .1em;
  font-size: .85rem;
}
.hero h1 {
  font-family: var(--font-display-ja);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: 1.5;
  color: var(--c-white);
  margin-bottom: 22px;
  max-width: 720px;
}
/* キーフレーズの杏色下線（差し色の使用箇所①） */
.hero-u {
  font-style: normal;
  border-bottom: 2px solid var(--c-apricot);
  padding-bottom: 2px;
}
.hero-lead {
  max-width: 560px;
  color: #D3DCE2;
  font-size: .95rem;
  margin-bottom: 34px;
}
.hero-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-sublink {
  color: var(--c-gold-soft);
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid var(--c-gold-soft);
  padding-bottom: 2px;
}
.hero-sublink:hover { color: var(--c-gold); border-bottom-color: var(--c-gold); }

/* --- よくあるお悩み --- */
/* お悩みは縦1列（PC・スマホ共通）。PCでは横に伸びすぎないよう幅を絞る */
.challenge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.challenge-card {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
/* お悩みアイコンの杏色（差し色の使用箇所②） */
.challenge-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  color: var(--c-apricot);
  margin-top: 4px;
}
.challenge-card p { font-size: .95rem; }
.challenge-close {
  text-align: center;
  margin-top: 40px;
  font-family: var(--font-display-ja);
  font-size: 1.08rem;
  color: var(--c-navy);
}

/* --- 選ばれる理由 --- */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .reason-grid { grid-template-columns: 1fr; } }
.reason-grid .card p { font-size: .92rem; color: var(--c-text-muted); }
/* 行の左右の余白を少し詰めて、手動で入れた改行位置で、文が折り返さないようにする */
.reason-grid .card { padding-left: 20px; padding-right: 20px; }
/* 手動の改行（br.pc）は、カードが3列で十分な幅になる広い画面だけ有効。
   狭い画面・スマホでは無視して、自然な折り返しに任せる */
br.pc { display: none; }
@media (min-width: 1128px) { br.pc { display: inline; } }

/* ================================================================
   M4: 支援メニュー（航路ライン）・プロフィール
   ================================================================ */

.section-lead {
  max-width: 640px;
  margin-bottom: 44px;
  color: var(--c-text-muted);
}

/* --- 航路ライン ---
   .phase-grid::before が金の一本線。
   PC: 3 つのノード中心（左右 1/6 の位置）を横に結ぶ
   モバイル: 中央を縦に貫き、白いカード・ノードの背後を通る */
.phase-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.phase-grid::before {
  content: "";
  position: absolute;
  top: 22px;                      /* ノード(44px)の中心 */
  left: calc(100% / 4);           /* 2列：各列の中心（左右 1/4 の位置） */
  right: calc(100% / 4);
  height: 1.5px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-soft), var(--c-gold));
}
.phase-col { display: flex; flex-direction: column; }
.phase-col .node {
  position: relative; z-index: 1;   /* 線より手前・白背景で線を「くぐらせる」 */
  margin: 0 auto 20px;
}
.phase-card {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
  flex: 1;
}
.phase-label {
  font-family: var(--font-display-ja);
  font-size: 1.15rem;
  color: var(--c-navy);
  text-align: center;
  margin-bottom: 8px;
}
.phase-lead {
  font-size: .88rem;
  color: var(--c-gold);
  text-align: center;
  margin-bottom: 18px;
}
.phase-card ul { list-style: none; }
.phase-card li {
  font-size: .92rem;
  padding: 10px 0 10px 18px;
  position: relative;
  border-top: 1px solid var(--c-ivory);
}
.phase-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-gold-soft);
}
@media (max-width: 860px) {
  .phase-grid { grid-template-columns: 1fr; gap: 36px; }
  /* スマホでは縦線を表示しない（カードの文字に重なるため） */
  .phase-grid::before { display: none; }
}

/* 支援メニューの補足（上記以外のご相談） */
.services-note {
  max-width: 640px;
  margin: 36px auto 0;
  text-align: center;
  font-size: .92rem;
  color: var(--c-text-muted);
}

/* --- プロフィール --- */
.profile-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 720px) {
  .profile-grid { grid-template-columns: 1fr; gap: 28px; }
  .profile-photo { margin: 0 auto; width: 200px; }
}
/* 写真プレースホルダ（金の二重枠）。
   実写真に差し替える際は .photo-ph を <img> に置き換え、
   同じ border / outline を img に適用する */
.photo-ph {
  aspect-ratio: 3 / 4;
  background: var(--c-white);
  border: 1px solid var(--c-gold);
  outline: 1px solid var(--c-gold-soft);
  outline-offset: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  font-size: .85rem;
}
/* プロフィール写真（縦3:4の枠に、顔が入るよう上寄りで切り抜く） */
.profile-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 20%;
  border: 1px solid var(--c-gold);
  outline: 1px solid var(--c-gold-soft);
  outline-offset: 5px;
  background: var(--c-white);
}
.profile-name {
  font-family: var(--font-display-ja);
  font-size: 1.2rem;
  color: var(--c-navy);
  margin-bottom: 18px;
}
.profile-body > p { margin-bottom: 16px; font-size: .95rem; }
.career-box {
  margin-top: 24px;
  background: var(--c-white);
  border-left: 2px solid var(--c-gold);
  padding: 16px 20px;
  font-size: .85rem;
  color: var(--c-text-muted);
}

/* ================================================================
   M5: 料金・ご相談の流れ・FAQ・お問い合わせフォーム
   ================================================================ */

/* --- 料金（紺背景） --- */
.fees-body { max-width: 640px; color: #D3DCE2; }
.fees-cta { margin-top: 34px; }
/* 将来の料金目安テーブル用（コメント解除時にそのまま使える） */
.fee-caption { margin-top: 34px; font-size: .9rem; color: var(--c-gold-soft); }
.fee-table { width: 100%; max-width: 760px; margin-top: 10px; border-collapse: collapse; font-size: .92rem; }
.fee-spot { margin-top: 26px; font-size: 1rem; }
.fee-spot strong { font-weight: 600; color: var(--c-white); }
.fee-note { margin-top: 12px; max-width: 760px; font-size: .85rem; color: #D3DCE2; }
@media (max-width: 720px) {
  .fee-table { font-size: .82rem; }
  .fee-table th, .fee-table td { padding: 10px 8px; }
}
.fee-table th, .fee-table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid rgba(169, 211, 214, .3);
}
.fee-table th { color: var(--c-gold-soft); font-weight: 500; }

/* --- ご相談の流れ --- */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 720px) { .flow-grid { grid-template-columns: 1fr; } }
.flow-step { text-align: center; padding: 0 8px; }
.flow-num {
  width: 44px; height: 44px; margin: 0 auto 16px;
  border-radius: 50%;
  border: 1.5px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--font-display-en);
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.flow-step h3 {
  font-family: var(--font-display-ja);
  font-size: 1.05rem;
  color: var(--c-navy);
  margin-bottom: 8px;
}
.flow-step p { font-size: .9rem; color: var(--c-text-muted); }

/* --- FAQ（details アコーディオン） --- */
.faq-item {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 48px 18px 22px;
  font-weight: 500;
  color: var(--c-navy);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-gold);
  font-family: var(--font-display-en);
  font-size: 1.3rem;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item > p { padding: 0 22px 20px; font-size: .93rem; color: var(--c-text-muted); }

/* --- お問い合わせフォーム --- */
.contact-lead { max-width: 560px; margin-bottom: 10px; }
.contact-format { max-width: 560px; margin-bottom: 36px; font-size: .92rem; color: var(--c-text-muted); }
#contact-form { max-width: 560px; }
.form-field { margin-bottom: 22px; }
.form-field label {
  display: block; font-size: .9rem; font-weight: 500;
  color: var(--c-navy); margin-bottom: 8px;
}
.req { color: var(--c-apricot); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body-ja);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid #C3CBD1;
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-text);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--c-gold);
  outline-offset: 1px;
  border-color: var(--c-gold);
}
/* 送信を試みた後のみ未入力を赤枠表示（was-validated は main.js が付与） */
#contact-form.was-validated :invalid { border-color: #B4544A; }
.form-note { margin-top: 8px; font-size: .82rem; color: var(--c-text-muted); }
.form-privacy label { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--c-text); }
.form-privacy input { width: 18px; height: 18px; accent-color: var(--c-navy); }
.form-actions { margin-top: 8px; }
#form-submit[disabled] { opacity: .6; cursor: not-allowed; }
#form-submit.is-sending[disabled] { cursor: wait; }
.form-status { margin-top: 16px; font-size: .92rem; min-height: 1.5em; }
.form-status.is-success { color: #2F6B3A; }
.form-status.is-error { color: #B4544A; }

/* --- 送信完了のお礼表示（成功後にフォームの代わりに表示） --- */
.form-thanks {
  max-width: 560px;
  padding: 40px 28px;
  text-align: center;
  background: var(--c-ivory);
  border: 1px solid var(--c-gold);
  border-radius: var(--radius);
}
.form-thanks[hidden] { display: none; }
.form-thanks:focus { outline: none; }
.form-thanks-check {
  width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--c-gold); color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
}
.form-thanks h3 {
  font-family: var(--font-display-ja);
  font-size: 1.25rem;
  color: var(--c-navy);
  margin-bottom: 10px;
}
.form-thanks p { font-size: .95rem; color: var(--c-text); }

/* --- プライバシーポリシーページ --- */
.policy-wrap { max-width: 760px; }
.policy-wrap h3 {
  font-family: var(--font-display-ja);
  color: var(--c-navy);
  font-size: 1.05rem;
  margin: 30px 0 8px;
}
.policy-wrap p { font-size: .95rem; margin-bottom: 8px; }
.policy-date { margin-top: 28px; color: var(--c-text-muted); font-size: .85rem; }

/* ================================================================
   M6: 仕上げ（アンカー位置調整・スキップリンク）
   ================================================================ */

/* 固定ヘッダーの高さぶん、アンカー移動先の位置を下げる */
section[id] { scroll-margin-top: 84px; }

/* スキップリンク（キーボード操作時のみ表示） */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--c-navy); color: var(--c-white);
  padding: 10px 18px; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none; font-size: .85rem;
  transition: top .15s;
}
.skip-link:focus { top: 0; color: var(--c-white); }