@charset "utf-8";
/* =====================================================================
   なるほ堂 — style.css
   デザイン案（なるほ堂/*.html）のインラインスタイルを集約したもの。
   色・寸法はすべて :root のトークンを参照する。
   ===================================================================== */

/* =====================================================================
   1. Design Tokens
   ===================================================================== */
:root {
  /* ---- 面と地 ---- */
  --bg:            #F7F2EB;   /* ページ地色 */
  --band:          #EFE8DE;   /* 帯セクション背景・表のヘッダー帯 */
  --surface:       #FFFFFF;   /* カード */
  --navy:          #3A4256;   /* CTA帯・SPECIALブロック・ヘッダーピル */

  /* ---- 文字 ---- */
  --ink:           #3C3733;   /* 本文 */
  --ink-muted:     #6B6157;   /* 補足テキスト */
  --on-navy:       #E8E3DA;   /* ネイビー上の本文 */
  --on-navy-muted: #C8C2B6;   /* ネイビー上の補足 */
  --on-gold:       #151A28;   /* ゴールドボタン上の文字 */

  /* ---- ゴールド ----
     面・枠には --gold を、文字には --gold-text / --gold-text-inv を使う。
     #B08D62 を文字色にすると地色 #F7F2EB に対し 2.8:1、ネイビーに対し 3.3:1 で
     WCAG AA（4.5:1）に届かないため、文字用だけ明度を振っている。
     見た目を厳密にデザイン案へ戻す場合は下の2行を #B08D62 にすれば元に戻る。 */
  --gold:          #B08D62;
  --gold-text:     #7F5F3C;   /* 明るい地の上の文字（5.2:1） */
  --gold-text-inv: #D0B085;   /* ネイビー上の文字（4.9:1） */

  /* ---- 線 ---- */
  --border:        #C9BEB0;   /* アウトラインボタン枠・テキストリンクの下線 */
  --rule:          #DED7CE;   /* 表・FAQ・記事h2の横罫 */
  --rule-inv:      rgba(232, 227, 218, 0.30); /* ネイビー上の枠 */
  --border-inv:    rgba(232, 227, 218, 0.40); /* ネイビー上のボタン枠 */
  --hover:         #9C8272;   /* リンクホバー */

  /* ---- 影（純黒を使わない） ---- */
  --shadow-1:      0 1px 3px rgba(60, 55, 51, 0.06);
  --shadow-2:      0 8px 24px rgba(60, 55, 51, 0.08);

  /* ---- 画像プレースホルダ（実ファイル未配置時の45°ストライプ） ---- */
  --ph: repeating-linear-gradient(45deg,
          #E4DACB, #E4DACB 14px, #DCD0BF 14px, #DCD0BF 28px);
  --ph-soft: repeating-linear-gradient(45deg,
          #EFE8DE, #EFE8DE 10px, #E4DACB 10px, #E4DACB 20px);

  /* ---- 書体 ---- */
  --font-mincho: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-gothic: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-latin:  'Cormorant Garamond', 'Times New Roman', Georgia, serif;

  /* ---- 寸法 ---- */
  --maxw:      1040px;
  --maxw-mid:   880px;
  --maxw-prose: 720px;
  --gutter:      48px;
  --rhythm:     100px;  /* セクション縦リズム */
  --rhythm-lg:  120px;
  --radius-btn:   2px;
}

/* =====================================================================
   2. Reset & Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  font-feature-settings: "kern" 1;
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--hover); }

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

h1, h2, h3, h4 {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-feature-settings: "palt" 1, "kern" 1;
  margin: 0;
  /* 見出しの最終行に1〜2文字だけ残る折り返しを避ける */
  text-wrap: pretty;
}

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

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
}

.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;
}

.skip-link {
  position: absolute; left: 0; top: -60px; z-index: 100;
  background: var(--navy); color: var(--on-navy);
  padding: 12px 24px; font-size: 13px;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: var(--on-navy); }

/* =====================================================================
   3. Layout primitives
   ===================================================================== */
.container {
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}
.container--mid   { max-width: calc(var(--maxw-mid)   + var(--gutter) * 2); }
.container--prose { max-width: calc(var(--maxw-prose) + var(--gutter) * 2); }

.section      { padding-block: var(--rhythm); }
.section--lg  { padding-block: var(--rhythm-lg); }
.section--top { padding-block: var(--rhythm) 0; }
.section--btm { padding-block: 0 var(--rhythm); }

/* 帯：フルブリードで地色を一段沈める */
.band { background: var(--band); }

.grid    { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* 見出しを左に固定し、右に本文を流すレイアウト（トップのFAQ） */
.grid--sidebar { grid-template-columns: 280px 1fr; gap: 64px; }

.grid--gap-32 { gap: 32px; }
.grid--gap-48 { gap: 48px; align-items: center; }
.grid--split  { gap: 64px; }

.text-center { text-align: center; }
.mt-32 { margin-top: 32px; }
.mt-64 { margin-top: 64px; }
.mt-lg { margin-top: var(--rhythm-lg); }
.pt-lg { padding-top: var(--rhythm-lg); }
.pb-lg { padding-bottom: var(--rhythm-lg); }

/* 帯の中央寄せリード文 */
.intro-text {
  font-size: 14px;
  line-height: 2;
  color: var(--ink-muted);
  max-width: 620px;
  margin: 0 auto;
}

/* =====================================================================
   4. Typography roles
   ===================================================================== */

/* 英字ラベル（SHIBITOSU / MENU / CONTACT …） */
.eyebrow {
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--gold-text);
  margin: 0 0 16px;
}
.eyebrow--wide { letter-spacing: 0.30em; }
.eyebrow--sm   { font-size: 11px; letter-spacing: 0.20em; }

/* 下層ページの見出し（Menu / FAQ / Access / Blog） */
.page-head {
  font-family: var(--font-latin);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: 0.10em;
  line-height: 1.2;
}
/* 英字タイトルは装飾。日本語サブタイトル側を h1 にする */
.page-head__sub {
  font-family: var(--font-gothic);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 8px 0 0;
}
.page-head__lead {
  font-size: 14px;
  line-height: 2;
  color: var(--ink-muted);
  max-width: 620px;
  margin-top: 40px;
}

/* セクション見出し直下の説明文 */
.section-lead {
  font-size: 14px;
  line-height: 2;
  color: var(--ink-muted);
  max-width: 620px;
  margin: 0;
}

/* セクション見出し */
.section-title {
  font-size: 22px;
  letter-spacing: 0.18em;
  line-height: 1.8;
  margin: 0 0 48px;
}
.section-title--tight { margin-bottom: 32px; }
.section-title--lead  { margin-bottom: 12px; }
.section-title--near  { margin-bottom: 24px; }
.section-title--flush { margin-bottom: 0; }
.section-title--intro { margin-bottom: 28px; }

.lead {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-muted);
  margin: 0 0 48px;
}

/* 長文（ストーリー・メッセージ・記事本文） */
.prose > p {
  font-size: 15px;
  line-height: 2.2;
  margin: 0 0 32px;
}
.prose > p:last-child { margin-bottom: 0; }

.note {
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin-top: 16px;
}

.num {
  font-family: var(--font-latin);
  font-size: 16px;
  color: var(--gold-text);
  margin-bottom: 16px;
}

.tabular { font-variant-numeric: tabular-nums; }
.nowrap  { white-space: nowrap; }

/* =====================================================================
   5. Buttons & links
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 17px 36px;
  font-family: var(--font-gothic);
  font-size: 13px;
  letter-spacing: 0.10em;
  line-height: 1;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
  text-align: center;
}
.btn:hover { background: #2F3646; color: #fff; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 16px 36px;
}
.btn--outline:hover { background: var(--band); color: var(--ink); }

.btn--gold {
  background: var(--gold);
  color: var(--on-gold);
  padding: 18px 40px;
}
.btn--gold:hover { background: var(--hover); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--on-navy);
  border: 1px solid var(--border-inv);
  padding: 17px 40px;
}
.btn--ghost:hover { background: rgba(232, 227, 218, 0.12); color: var(--on-navy); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.btn-row--center { justify-content: center; }

/* 矢印付きテキストリンク */
.link-arrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  transition: border-color .3s ease;
}
.link-arrow:hover { border-bottom-color: var(--gold); }
.link-arrow--lg { font-size: 13px; }
.link-arrow--inv { color: var(--gold-text-inv); border-bottom-color: var(--border-inv); }
.link-arrow--inv:hover { color: var(--gold-text-inv); border-bottom-color: var(--on-navy); }

/* =====================================================================
   6. Header / Global nav
   ===================================================================== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px var(--gutter);
}

.brand {
  font-family: var(--font-mincho);
  font-size: 22px;
  letter-spacing: 0.20em;
  white-space: nowrap;
}

.global-nav > ul {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.global-nav a { color: var(--ink-muted); white-space: nowrap; }
.global-nav a:hover { color: var(--hover); }
.global-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}

/* ヘッダー右端の公式LINEピル */
.nav-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--navy);
  color: #fff !important;
  border-radius: 999px;
  padding: 12px 26px;
  letter-spacing: 0.10em;
  transition: background .3s ease;
}
.nav-pill:hover { background: #2F3646; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* =====================================================================
   7. Hero（トップ）
   ===================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--gutter) 80px;
}
.hero__copy .eyebrow { margin-bottom: 32px; }

.hero__title {
  font-size: 42px;
  letter-spacing: 0.14em;
  line-height: 1.8;
  margin: 0 0 32px;
}

.hero__lead {
  font-size: 14px;
  line-height: 2.1;
  color: var(--ink-muted);
  max-width: 440px;
  margin: 0 0 40px;
}

.hero__media {
  position: relative;
  background: var(--ph);
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 紫微斗数 特別鑑定のフローティングカード */
.hero__badge {
  position: absolute;
  left: -28px;
  bottom: 56px;
  background: var(--navy);
  color: var(--on-navy);
  padding: 24px 32px;
  box-shadow: var(--shadow-2);
}
.hero__badge .eyebrow { color: var(--gold-text-inv); margin-bottom: 8px; }
.hero__badge-title {
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: 0.10em;
  line-height: 1.8;
}
.hero__badge-price {
  display: block;
  font-family: var(--font-gothic);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   8. Cards
   ===================================================================== */
.card {
  background: var(--surface);
  padding: 36px 32px;
  box-shadow: var(--shadow-1);
}
.card--roomy { padding: 40px 32px; }
.card--wide  { padding: 44px 40px; }

.card__title {
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  margin: 0 0 12px;
}
.card__text {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-muted);
  margin: 0;
}

/* ネイビーのカード */
.card--navy {
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: none;
  position: relative;
}
.card--navy .num { color: var(--gold-text-inv); }
.card--navy .card__text { color: var(--on-navy-muted); }
.card--navy .card__title { color: var(--on-navy); }

/* トップの鑑定メニュー要約カード */
.card--menu .card__title { font-size: 17px; letter-spacing: 0.10em; margin-bottom: 16px; }
.card--menu .card__text  { line-height: 2; }
.card__title--tight { margin-bottom: 8px !important; }
.card__price {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--gold-text-inv);
  font-variant-numeric: tabular-nums;
  margin: 0 0 16px;
}
.card__flag { position: absolute; top: 24px; right: 24px; margin: 0; }

/* トップ「二人の鑑定士が、あなたを待っています」の誘導カード */
.card--cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.card--cta .card__title {
  font-size: 16px;
  letter-spacing: 0.10em;
  line-height: 1.9;
  margin: 0;
}

/* 鑑定士カード（写真＋テキスト横並び） */
.reader-card {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--surface);
  padding: 32px;
  box-shadow: var(--shadow-1);
}
.reader-card__photo {
  width: 120px;
  height: 150px;
  flex: none;
  background: var(--ph);
  object-fit: cover;
}
.reader-card__name {
  font-size: 17px;
  letter-spacing: 0.10em;
  margin: 0 0 6px;
}
.reader-card__tag {
  font-size: 11px;
  color: var(--gold-text);
  margin-bottom: 12px;
}
.reader-card__text {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-muted);
  margin: 0 0 16px;
}

/* =====================================================================
   9. 表（帯ラベル + 横罫のみ。縦罫は引かない）
   ===================================================================== */
.band-label {
  background: var(--band);
  padding: 14px 24px;
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: 0.14em;
}
.band-label + .table-rows,
.band-label + .table-cols { margin-top: 0; }

.table-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.6;
}
.row > :last-child { color: var(--ink-muted); }

.row--label {
  display: grid;
  grid-template-columns: 160px 1fr;
  justify-content: initial;
}

/* 定義リスト（アクセス） */
.dl-rows { font-size: 13px; line-height: 1.8; }
.dl-rows > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.dl-rows dt { color: var(--ink); }
.dl-rows dd { margin: 0; color: var(--ink-muted); }
.dl-rows dd a { color: var(--ink-muted); }

/* トップのアクセス要約（ラベル幅が狭い版） */
.dl-inline { font-size: 13px; line-height: 2.2; color: var(--ink-muted); }
.dl-inline > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
}
.dl-inline dt { color: var(--ink); }
.dl-inline dd { margin: 0; }
.dl-inline dd a { color: var(--ink-muted); }

/* =====================================================================
   10. FAQ（details/summary。JS無しで開閉し、回答は常にDOMに存在する）
   ===================================================================== */
.faq-group { margin-bottom: 80px; }
.faq-group:last-of-type { margin-bottom: 0; }

.faq-item { border-bottom: 1px solid var(--rule); }

.faq-item > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
  content: "＋";
  color: var(--gold-text);
  flex: none;
}
.faq-item[open] > summary::after { content: "−"; }

.faq-item__answer {
  font-size: 13px;
  line-height: 2;
  color: var(--ink-muted);
  margin: 0;
  padding: 0 0 24px;
}

/* FAQページ：Q / A のラベル付き2カラム */
.faq-page .faq-item > summary { padding: 24px; }
.faq-page .faq-item__answer   { padding: 0 24px 28px; }

.qa {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.qa__mark {
  font-family: var(--font-latin);
  font-size: 15px;
  flex: none;
}
.qa__mark--q { color: var(--gold-text); }
.qa__mark--a { color: var(--ink-muted); }
.qa__body { font-size: 14px; line-height: 2.1; color: var(--ink-muted); margin: 0; }
.qa__body ul { margin: 12px 0 0; padding-left: 1.2em; list-style: disc; }
.qa__body li { margin-bottom: 4px; }

.faq-help {
  background: var(--surface);
  padding: 48px 40px;
  box-shadow: var(--shadow-1);
  text-align: center;
}
.faq-help__title {
  font-family: var(--font-mincho);
  font-size: 17px;
  letter-spacing: 0.14em;
  margin: 0 0 16px;
}
.faq-help p {
  font-size: 13px;
  line-height: 2;
  color: var(--ink-muted);
  margin: 0 0 28px;
}

/* =====================================================================
   11. 鑑定士ページ
   ===================================================================== */
.profile-hero {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 64px;
  align-items: center;
}
.profile-hero__portrait {
  width: 360px;
  height: 450px;
  background: var(--ph);
  object-fit: cover;
}
.profile-hero__title {
  font-size: 32px;
  letter-spacing: 0.14em;
  line-height: 1.9;
  margin: 0 0 32px;
}
.profile-hero__name {
  font-family: var(--font-mincho);
  font-size: 18px;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}
.profile-hero__lead {
  font-size: 14px;
  line-height: 2;
  margin: 0 0 24px;
}
.profile-hero__keywords {
  font-size: 13px;
  line-height: 2;
  color: var(--ink-muted);
  margin: 0 0 40px;
}

.quote {
  margin: 0;
  background: var(--surface);
  padding: 44px 40px;
  box-shadow: var(--shadow-1);
}
.quote__mark {
  font-family: var(--font-latin);
  font-size: 28px;
  color: var(--gold-text);
  line-height: 1;
  margin-bottom: 20px;
}
.quote__title {
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  margin: 0 0 12px !important;
}
.quote p {
  font-size: 14px;
  line-height: 2.1;
  margin: 0 0 24px;
}
.quote footer { font-size: 12px; color: var(--ink-muted); }

/* =====================================================================
   12. 鑑定メニュー
   ===================================================================== */
.special {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  background: var(--navy);
  color: var(--on-navy);
}
.special__media {
  position: relative;
  min-height: 320px;
  background: var(--ph);
}
.special__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.special__body { padding: 56px 48px; }
.special__body .eyebrow { color: var(--gold-text-inv); }

.special__price {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 24px;
}
.special__price strong {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.special__price span { font-size: 11px; color: var(--on-navy-muted); }

.special__text {
  font-size: 14px;
  line-height: 2;
  color: var(--on-navy-muted);
  margin: 0 0 24px;
}
.special__cond {
  border: 1px solid var(--rule-inv);
  padding: 20px 24px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--on-navy-muted);
}
.special__cond dt { color: var(--gold-text-inv); display: inline; }
.special__cond dd { display: inline; margin: 0; }
.special__cond a {
  color: var(--on-navy);
  border-bottom: 1px solid var(--border-inv);
}

/* =====================================================================
   13. アクセス
   ===================================================================== */
.map-frame {
  position: relative;
  background: var(--ph);
  overflow: hidden;
}
.map-frame--lg { height: 420px; }
.map-frame--sm { height: 320px; }
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-frame__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  padding: 24px;
}

.route-card {
  background: var(--surface);
  padding: 32px 36px;
  box-shadow: var(--shadow-1);
  margin-bottom: 24px;
}
.route-card:last-child { margin-bottom: 0; }
.route-card__head {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 12px;
}
.route-card__en {
  font-family: var(--font-latin);
  font-size: 13px;
  color: var(--gold-text);
  letter-spacing: 0.14em;
}
.route-card__ja {
  font-family: var(--font-mincho);
  font-size: 16px;
  letter-spacing: 0.10em;
}
.route-card p {
  font-size: 13px;
  line-height: 2;
  color: var(--ink-muted);
  margin: 0;
}

/* =====================================================================
   14. ブログ
   ===================================================================== */

/* 注目記事 */
.post-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.post-featured__media {
  position: relative;
  min-height: 380px;
  background: var(--ph);
}
.post-featured__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-featured__body {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.post-featured__title {
  font-size: 24px;
  letter-spacing: 0.12em;
  line-height: 1.8;
  margin: 0 0 20px;
}
.post-featured__excerpt {
  font-size: 13px;
  line-height: 2;
  color: var(--ink-muted);
  margin: 0 0 28px;
}

.pill-featured {
  background: var(--gold);
  color: #fff;
  font-family: var(--font-latin);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 5px 16px;
  border-radius: 999px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.post-date {
  font-family: var(--font-latin);
  font-size: 12px;
  color: var(--gold-text);
  letter-spacing: 0.10em;
  font-variant-numeric: tabular-nums;
}
.post-date--lg { font-size: 13px; }

.pill-cat {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}

/* 記事カード */
.post-card {
  background: var(--surface);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}
.post-card__media {
  height: 170px;
  background: var(--ph-soft);
  flex: none;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 28px 28px 32px; }
.post-card__title {
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 1.9;
  margin: 0 0 12px;
}
.post-card__excerpt {
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-muted);
  margin: 0;
}

.blog-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 48px;
}

/* カテゴリ絞り込み（描画済みカードを隠すだけのプログレッシブエンハンスメント） */
.cat-filter {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background .3s ease, color .3s ease;
}
.cat-chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.post-card[hidden] { display: none; }

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 64px;
}
.pagination a,
.pagination span {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  font-family: var(--font-latin);
  font-size: 14px;
  color: var(--ink-muted);
}
.pagination [aria-current="page"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* 記事本文 */
.article__title {
  font-size: 32px;
  letter-spacing: 0.12em;
  line-height: 1.8;
  margin: 0 0 40px;
}
.article__hero {
  height: 400px;
  background: var(--ph);
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; }

.prose h2 {
  font-size: 22px;
  letter-spacing: 0.16em;
  line-height: 1.8;
  margin: 48px 0 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.prose h3 {
  font-size: 17px;
  letter-spacing: 0.12em;
  line-height: 1.8;
  margin: 40px 0 20px;
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol {
  font-size: 15px;
  line-height: 2.2;
  margin: 0 0 32px;
  padding-left: 1.4em;
  list-style: disc;
}
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 8px; }
.prose blockquote {
  background: var(--band);
  padding: 32px 36px;
  margin: 0 0 32px;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { border-bottom: 1px solid var(--border); }
.prose img { margin: 0 0 32px; }
.prose code {
  font-family: SFMono-Regular, Consolas, Menlo, monospace;
  font-size: 0.9em;
  background: var(--band);
  padding: 2px 6px;
}

.callout {
  background: var(--band);
  padding: 32px 36px;
  margin: 0 0 48px;
}
.callout__title {
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}

.article-foot {
  border-top: 1px solid var(--rule);
  padding-top: 48px;
}

.related-card {
  background: var(--surface);
  padding: 28px;
  box-shadow: var(--shadow-1);
  display: block;
}
.related-card__title {
  font-family: var(--font-mincho);
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.9;
}

/* =====================================================================
   15. パンくず（ページ下部・CTA直前）
   ===================================================================== */
.breadcrumb {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  margin-top: 80px;
}

/* =====================================================================
   16. CTA（共通）
   ===================================================================== */
.cta {
  background: var(--navy);
  color: var(--on-navy);
  padding: 80px var(--gutter);
  text-align: center;
}
.cta .eyebrow { color: var(--gold-text-inv); margin-bottom: 20px; }
.cta__title {
  font-family: var(--font-mincho);
  font-size: 22px;
  letter-spacing: 0.16em;
  margin-bottom: 16px;
}
.cta__text {
  font-size: 13px;
  line-height: 2;
  color: var(--on-navy-muted);
  margin: 0 0 36px;
}

/* =====================================================================
   17. Footer
   ===================================================================== */
.site-footer { padding: 56px var(--gutter); }

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 40px;
}
.site-footer__brand {
  font-family: var(--font-mincho);
  font-size: 18px;
  letter-spacing: 0.20em;
  margin-bottom: 16px;
}
.site-footer__nap {
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-muted);
}
.footer-nav ul {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.footer-nav a { color: var(--ink-muted); }
.site-footer__copy {
  font-size: 11px;
  color: var(--ink-muted);
  text-align: right;
}

/* =====================================================================
   18. Responsive
   ===================================================================== */

/* ---- Tablet：3カラムを2カラムへ ---- */
@media (max-width: 1024px) {
  :root { --gutter: 32px; --rhythm: 80px; --rhythm-lg: 96px; }

  .grid--3 { grid-template-columns: 1fr 1fr; }
  .profile-hero { grid-template-columns: 280px 1fr; gap: 40px; }
  .profile-hero__portrait { width: 280px; height: 350px; }
  .special { grid-template-columns: 1fr 1fr; }
  .post-featured { grid-template-columns: 1fr 1fr; }
  .hero__badge { left: -20px; }
}

/* ---- Mobile：1カラム＋ハンバーガー ---- */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --rhythm: 64px;
    --rhythm-lg: 64px;
  }

  /* --- ヘッダー --- */
  .site-header {
    position: relative;
    padding: 16px var(--gutter);
    flex-wrap: wrap;
  }
  .nav-toggle { display: block; }

  .global-nav {
    display: none;
    order: 3;
    width: 100%;
    border-top: 1px solid var(--rule);
    margin-top: 16px;
    padding-top: 8px;
  }
  .global-nav[data-open="true"] { display: block; }

  .global-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .global-nav > ul > li { border-bottom: 1px solid var(--rule); }
  .global-nav > ul > li:last-child { border-bottom: 0; padding-top: 16px; }
  .global-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
    font-size: 14px;
  }
  .global-nav a[aria-current="page"] {
    border-bottom: 0;
    padding-bottom: 4px;
    color: var(--gold-text);
  }
  .nav-pill { justify-content: center; width: 100%; }

  /* --- 見出し・余白 --- */
  .page-head { font-size: 32px; }
  .section-title { font-size: 18px; letter-spacing: 0.12em; margin-bottom: 32px; }
  .hero__title { font-size: 28px; letter-spacing: 0.10em; }
  .profile-hero__title { font-size: 24px; letter-spacing: 0.10em; }
  .article__title { font-size: 24px; letter-spacing: 0.08em; }
  .post-featured__title { font-size: 20px; letter-spacing: 0.08em; }
  .cta__title { font-size: 18px; letter-spacing: 0.12em; }
  .prose h2 { font-size: 18px; letter-spacing: 0.12em; }
  .prose > p, .prose ul, .prose ol { font-size: 15px; line-height: 2.1; }

  /* --- グリッドは全部縦積み --- */
  .grid--2, .grid--3, .grid--sidebar { grid-template-columns: 1fr; }
  .grid--sidebar, .grid--split, .grid--gap-48 { gap: 32px; }
  .card__flag { position: static; margin-bottom: 8px; }
  .table-cols { grid-template-columns: 1fr; column-gap: 0; }

  /* --- ヒーロー --- */
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 48px var(--gutter) 40px; }
  .hero__lead { max-width: none; }
  /* 写真の上に重ねたまま、絶対配置をやめて下端に寄せる */
  .hero__media {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .hero__badge {
    position: relative;
    left: auto;
    bottom: auto;
    padding: 20px var(--gutter);
    box-shadow: none;
  }

  /* --- 鑑定士カード --- */
  .reader-card { flex-direction: column; align-items: flex-start; padding: 24px; }
  .reader-card__photo { width: 100%; height: 220px; }

  /* --- 鑑定士ページ --- */
  .profile-hero { grid-template-columns: 1fr; gap: 32px; }
  .profile-hero__portrait { width: 100%; height: 380px; }

  /* --- メニュー --- */
  .special { grid-template-columns: 1fr; }
  .special__media { min-height: 220px; }
  .special__body { padding: 32px var(--gutter); }
  .row { padding: 16px 0; }
  .row--label { grid-template-columns: 1fr; gap: 4px; }
  .band-label { padding: 12px 16px; }

  /* --- アクセス --- */
  .dl-rows > div { grid-template-columns: 1fr; gap: 4px; }
  .dl-inline > div { grid-template-columns: 1fr; gap: 0; }
  .map-frame--lg { height: 280px; }
  .map-frame--sm { height: 240px; }
  .route-card { padding: 24px; }

  /* --- FAQ --- */
  .faq-group { margin-bottom: 48px; }
  .faq-page .faq-item > summary { padding: 20px 0; }
  .faq-page .faq-item__answer { padding: 0 0 24px; }
  .faq-help { padding: 32px 24px; }

  /* --- ブログ --- */
  .post-featured { grid-template-columns: 1fr; }
  .post-featured__media { min-height: 220px; }
  .post-featured__body { padding: 32px var(--gutter); }
  .article__hero { height: 220px; }
  .blog-head { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* --- タッチターゲット44px ---
     単独で行を占めるリンクだけを対象にする。文中に埋まったリンク
     （本文・注記・電話番号の案内文など）を44pxにすると行が分断されるため
     除外している（WCAG 2.5.8 のインライン例外）。 */
  .brand,
  .link-arrow,
  .dl-rows dd > a,
  .dl-inline dd > a,
  .map-frame__fallback a,
  .post-card__title a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- CTA・フッター --- */
  .cta { padding: 56px var(--gutter); }
  .btn, .btn--outline, .btn--gold, .btn--ghost { width: 100%; }
  .btn-row { flex-direction: column; }
  .site-footer__top { flex-direction: column; gap: 32px; }
  .footer-nav ul { gap: 12px 20px; }
  .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer__copy { text-align: left; }
  .breadcrumb { margin-top: 48px; }
}

/* =====================================================================
   19. Motion / Print
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .cta, .nav-toggle, .cat-filter, .pagination { display: none; }
  body { background: #fff; }
}