/* =====================================================
   学校歯科健診ガイド — Colorful, Family-Friendly Design
   For: parents of school-age children
   Inspired by Claude design + 暮しの手帖 + Pediatric clinic warmth
   ===================================================== */

:root {
  /* Modern Minimal — Dark Teal × Gold × Off-White
     Sophisticated, urban, mature. Suited for adult-focused clinics. */
  --paper:        #F8F5EE;       /* warm off-white */
  --paper-soft:   #F0EBE0;       /* deeper off-white */
  --paper-mint:   #EAEFEF;       /* misty teal wash */
  --paper-blue:   #E8EEF0;       /* cool wash */
  --paper-coral:  #F2EFE7;       /* neutral cream */
  --paper-yellow: #F4EEDC;       /* soft champagne */
  --paper-green:  #EAEEE7;       /* sage wash */

  --ink:          #1F2424;       /* deep teal-ink */
  --ink-strong:   #0F1414;       /* near-black */
  --ink-sub:      #4A5252;       /* mid teal-grey */
  --ink-muted:    #8A8B85;       /* muted */

  /* PRIMARY: Dark Teal — main brand color */
  --coral:        #2D5C5C;       /* dark teal (replaces coral) */
  --coral-soft:   #5A8585;       /* lighter teal */
  --coral-deep:   #1A4040;       /* deeper teal */

  /* SECONDARY: Gold accent — used sparingly */
  --mint:         #C9A75A;       /* warm gold (replaces mint) */
  --mint-soft:    #E2C88A;       /* lighter gold */
  --mint-deep:    #9A7E3F;       /* deeper gold */

  /* Cool subtle blue (for variety) */
  --sky:          #4A7585;       /* dusty blue */
  --sky-soft:     #8AABBB;
  --sky-deep:     #2D5666;

  /* Champagne (warm gold variant) */
  --sun:          #C9A75A;       /* gold */
  --sun-soft:     #E5CD8E;
  --sun-deep:     #9A7E3F;

  /* Sage (subtle green variant) */
  --grass:        #6B8268;       /* sage green */
  --grass-soft:   #99AC93;
  --grass-deep:   #4A5C48;

  /* Rose (subdued) */
  --rose:         #A87A7A;
  --rose-soft:    #C9A5A5;
  --rose-deep:    #7C5252;

  /* Status colors — refined for editorial palette */
  --warn:         #A24234;       /* deep brick (replaces red-orange) */
  --warn-soft:    #E8D8D2;
  --caution:      #B58E1E;       /* aged gold */
  --caution-soft: #EFE3C8;
  --safe:         #5A7E5A;       /* deep sage */
  --safe-soft:    #DDE5D8;

  --line:         #DAD4C5;
  --line-soft:    #E8E2D5;
  --shadow-sm:    0 4px 14px rgba(20, 30, 30, 0.06);
  --shadow-md:    0 16px 40px rgba(20, 30, 30, 0.10);
  --shadow-lg:    0 24px 60px rgba(20, 30, 30, 0.14);

  /* Typography */
  --font-jp-serif:  'Noto Serif JP', 'Yu Mincho', '游明朝', serif;
  --font-jp-sans:   'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-en-deco:   'Cormorant Garamond', serif;
  --font-en-sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-rounded:   'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; }

body {
  margin: 0;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.95;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.sp-only { display: none; }
@media (max-width: 768px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .wrap { padding: 0 20px; } }
section { padding: 100px 0; }
@media (max-width: 768px) { section { padding: 64px 0; } }

/* =====================================================
   NAV
   ===================================================== */
.nav-wrap {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 250, 241, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nav-brand {
  display: flex; align-items: center;
}
.nav-brand__logo {
  height: 56px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex; gap: 24px;
  font-size: 13.5px; letter-spacing: 0.06em;
}
.nav-links a {
  padding: 6px 0; transition: color 0.25s ease;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--coral-deep); border-bottom-color: var(--coral-soft); }
.nav-cta {
  font-family: var(--font-jp-sans); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.10em;
  padding: 11px 22px;
  background: var(--coral);
  color: #fff;
  border-radius: 999px;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
}
.nav-cta:hover { background: var(--coral-deep); transform: translateY(-1px); }

@media (max-width: 1024px) { .nav-links { display: none; } }
@media (max-width: 768px) {
  .nav { height: 62px; }
  .nav-brand__logo { height: 42px; }
  .nav-cta { font-size: 11px; padding: 9px 16px; }
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  background: var(--paper);
  padding: 100px 0 120px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
/* Subtle radial light from top — replaces polka dots */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(201, 167, 90, 0.08), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(45, 92, 92, 0.05), transparent 65%);
  pointer-events: none;
}
/* Hide polka dots — replaced by subtle gradient above */
.hero__deco { display: none; }

.hero__inner {
  position: relative; z-index: 2;
  max-width: 920px; margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.hero__badge {
  display: inline-block;
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 13px; letter-spacing: 0.18em;
  color: var(--coral-deep);
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 22px;
  border-radius: 999px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
}
.hero__h1 {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.55; letter-spacing: 0.04em;
  color: var(--ink-strong);
  margin: 0 0 24px;
}
.hero__h1 .em {
  background: linear-gradient(180deg, transparent 60%, var(--sun-soft) 60%);
  padding: 0 6px;
}
.hero__sub {
  font-family: var(--font-jp-sans);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 2.0; color: var(--ink-sub);
  letter-spacing: 0.04em;
  margin: 0 0 36px;
}
.hero__sub strong { color: var(--coral-deep); font-weight: 600; }
.hero__cta {
  display: inline-block;
  font-family: var(--font-jp-sans); font-weight: 600;
  font-size: 15px; letter-spacing: 0.10em;
  padding: 18px 44px;
  background: var(--ink-strong);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}
.hero__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* =====================================================
   SECTION HEADERS (editorial-with-color)
   ===================================================== */
.section-head { text-align: center; margin: 0 auto 56px; max-width: 720px; }
.section-num {
  display: inline-block;
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 13px; letter-spacing: 0.20em;
  color: var(--coral);
  margin-bottom: 12px;
}
.section-num::before, .section-num::after {
  content: '—'; margin: 0 14px; opacity: 0.5;
}
.section-title {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.55; letter-spacing: 0.06em;
  color: var(--ink-strong);
  margin: 0 0 18px;
}
.section-lead {
  font-size: 14.5px; line-height: 2.05;
  color: var(--ink-sub); letter-spacing: 0.04em;
  margin: 0;
}

/* =====================================================
   INDEX CARDS (homepage chapter index)
   ===================================================== */
.chapters {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 1080px; margin: 0 auto;
}
.chapter-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 36px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.chapter-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--coral);
}
.chapter-card:nth-child(2)::before { background: var(--mint); }
.chapter-card:nth-child(3)::before { background: var(--sun); }
.chapter-card:nth-child(4)::before { background: var(--sky); }
.chapter-card:nth-child(5)::before { background: var(--rose); }
.chapter-card:nth-child(6)::before { background: var(--grass); }
.chapter-card:nth-child(7)::before { background: var(--coral-deep); }
.chapter-card:nth-child(8)::before { background: var(--mint-deep); }

.chapter-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--coral-soft);
}
.chapter-card__num {
  font-family: var(--font-en-deco); font-style: italic;
  font-weight: 400; font-size: 28px;
  color: var(--coral);
  letter-spacing: 0.04em; line-height: 1;
}
.chapter-card:nth-child(2) .chapter-card__num { color: var(--mint-deep); }
.chapter-card:nth-child(3) .chapter-card__num { color: var(--sun-deep); }
.chapter-card:nth-child(4) .chapter-card__num { color: var(--sky-deep); }
.chapter-card:nth-child(5) .chapter-card__num { color: var(--rose-deep); }
.chapter-card:nth-child(6) .chapter-card__num { color: var(--grass-deep); }
.chapter-card:nth-child(7) .chapter-card__num { color: var(--coral-deep); }
.chapter-card:nth-child(8) .chapter-card__num { color: var(--mint-deep); }
.chapter-card__title {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: 18px; letter-spacing: 0.06em;
  color: var(--ink-strong); margin: 0;
}
.chapter-card__desc {
  font-size: 13.5px; line-height: 1.95;
  color: var(--ink-sub); letter-spacing: 0.04em;
  margin: 0; flex: 1;
}
.chapter-card__more {
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 12.5px; letter-spacing: 0.10em;
  color: var(--coral-deep);
  margin-top: 8px;
}
@media (max-width: 768px) {
  .chapters { grid-template-columns: 1fr; gap: 16px; }
  .chapter-card { padding: 28px 22px; }
}

/* =====================================================
   PAGE HERO (sub-pages)
   ===================================================== */
.page-hero {
  padding: 80px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.page-hero--coral { background: linear-gradient(135deg, var(--paper-coral) 0%, var(--paper-yellow) 100%); }
.page-hero--mint  { background: linear-gradient(135deg, var(--paper-mint) 0%, var(--paper-blue) 100%); }
.page-hero--warn  { background: linear-gradient(135deg, var(--warn-soft) 0%, var(--paper-coral) 100%); }
.page-hero--caution { background: linear-gradient(135deg, var(--caution-soft) 0%, var(--paper-yellow) 100%); }
.page-hero--safe  { background: linear-gradient(135deg, var(--safe-soft) 0%, var(--paper-green) 100%); }
.page-hero--sun   { background: linear-gradient(135deg, var(--paper-yellow) 0%, var(--paper-coral) 100%); }
.page-hero--sky   { background: linear-gradient(135deg, var(--paper-blue) 0%, var(--paper-mint) 100%); }
.page-hero__num {
  display: inline-block;
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 14px; letter-spacing: 0.16em;
  color: var(--ink-sub);
  margin-bottom: 14px;
}
.page-hero__title {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.55; letter-spacing: 0.06em;
  color: var(--ink-strong);
  margin: 0 0 16px;
}
.page-hero__lead {
  max-width: 620px; margin: 0 auto;
  font-size: 14.5px; line-height: 2.0;
  color: var(--ink-sub); letter-spacing: 0.04em;
}
.page-hero__icon {
  font-size: 56px; margin-bottom: 14px;
  display: block;
}

/* =====================================================
   ARTICLE BODY
   ===================================================== */
.article {
  max-width: 740px; margin: 0 auto;
  padding: 0 32px;
}
.article p {
  font-size: 15.5px; line-height: 2.10;
  color: var(--ink); letter-spacing: 0.05em;
  margin: 0 0 24px;
}
.article h2 {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5; letter-spacing: 0.06em;
  color: var(--ink-strong);
  margin: 56px 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--coral);
}
.article h2.h--mint { border-bottom-color: var(--mint); }
.article h2.h--sun  { border-bottom-color: var(--sun); }
.article h2.h--sky  { border-bottom-color: var(--sky); }
.article h2.h--warn { border-bottom-color: var(--warn); color: var(--warn); }
.article h2.h--safe { border-bottom-color: var(--safe); color: var(--safe); }
.article h3 {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: 17.5px; letter-spacing: 0.06em;
  color: var(--ink-strong);
  margin: 32px 0 14px;
}
@media (max-width: 768px) { .article { padding: 0 22px; } }

/* =====================================================
   CONDITION CARDS (受け口・出っ歯・開咬)
   ===================================================== */
.conditions { display: grid; gap: 32px; max-width: 1000px; margin: 0 auto; }
.condition {
  display: grid; grid-template-columns: 280px 1fr; gap: 0;
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-soft);
}
.condition__visual {
  background: linear-gradient(135deg, var(--paper-coral) 0%, var(--paper-yellow) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 36px 28px;
  text-align: center;
}
.condition--A .condition__visual { background: linear-gradient(135deg, var(--warn-soft) 0%, var(--paper-coral) 100%); }
.condition--B .condition__visual { background: linear-gradient(135deg, var(--caution-soft) 0%, var(--paper-yellow) 100%); }
.condition--C .condition__visual { background: linear-gradient(135deg, var(--paper-coral) 0%, var(--rose-soft) 100%); }
.condition__icon {
  font-size: 56px; line-height: 1; margin-bottom: 14px;
}
.condition__label {
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 26px; color: var(--ink-strong);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.condition__sub {
  font-size: 12px; letter-spacing: 0.10em;
  color: var(--ink-sub);
}
.condition__body { padding: 36px 32px; }
.condition__name {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: 22px; letter-spacing: 0.06em;
  color: var(--ink-strong); margin: 0 0 6px;
}
.condition__alias {
  font-size: 12.5px; letter-spacing: 0.08em;
  color: var(--ink-muted); margin: 0 0 18px;
}
.condition__desc {
  font-size: 14.5px; line-height: 2.0;
  color: var(--ink); letter-spacing: 0.04em;
  margin: 0;
}
@media (max-width: 768px) {
  .condition { grid-template-columns: 1fr; }
  .condition__visual { padding: 28px 22px; }
  .condition__icon { font-size: 44px; }
  .condition__body { padding: 28px 24px; }
}

/* =====================================================
   STATUS CARDS (3 categories: urgent / wait / monitor)
   ===================================================== */
.status-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1080px; margin: 0 auto;
}
.status-card {
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}
.status-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.status-card__header {
  padding: 28px 24px 20px;
  text-align: center;
  position: relative;
}
.status-card--urgent .status-card__header { background: linear-gradient(135deg, var(--warn) 0%, var(--coral) 100%); color: #fff; }
.status-card--wait .status-card__header { background: linear-gradient(135deg, var(--caution) 0%, var(--sun) 100%); color: #fff; }
.status-card--monitor .status-card__header { background: linear-gradient(135deg, var(--safe) 0%, var(--grass-soft) 100%); color: #fff; }
.status-card__num {
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 16px; letter-spacing: 0.18em;
  opacity: 0.85;
  margin-bottom: 8px;
}
.status-card__icon {
  font-size: 36px;
  margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.status-card__title {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: 17px; letter-spacing: 0.06em;
  margin: 0;
}
.status-card__body {
  padding: 24px;
  flex: 1;
  display: flex; flex-direction: column;
}
.status-card__desc {
  font-size: 13.5px; line-height: 1.95;
  color: var(--ink-sub); letter-spacing: 0.04em;
  margin: 0 0 18px;
  flex: 1;
}
.status-card__cta {
  display: inline-block;
  text-align: center;
  font-family: var(--font-jp-sans); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.10em;
  padding: 12px 18px;
  border-radius: 999px;
  transition: all 0.25s ease;
}
.status-card--urgent .status-card__cta { background: var(--warn); color: #fff; }
.status-card--wait .status-card__cta { background: var(--caution); color: #fff; }
.status-card--monitor .status-card__cta { background: var(--safe); color: #fff; }
.status-card--urgent .status-card__cta:hover { background: var(--coral-deep); }
.status-card--wait .status-card__cta:hover { background: var(--sun-deep); }
.status-card--monitor .status-card__cta:hover { background: var(--grass-deep); }
@media (max-width: 768px) {
  .status-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* =====================================================
   INFO BOX (cost, etc.)
   ===================================================== */
.info-box {
  background: var(--paper-mint);
  border-radius: 18px;
  padding: 36px 36px;
  border-left: 4px solid var(--mint);
  max-width: 720px; margin: 32px auto;
}
.info-box--coral { background: var(--paper-coral); border-left-color: var(--coral); }
.info-box--sun   { background: var(--paper-yellow); border-left-color: var(--sun); }
.info-box--warn  { background: var(--warn-soft); border-left-color: var(--warn); }
.info-box__title {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: 17px; letter-spacing: 0.06em;
  color: var(--ink-strong);
  margin: 0 0 12px;
}
.info-box p {
  font-size: 14.5px; line-height: 2.0;
  color: var(--ink); letter-spacing: 0.04em;
  margin: 0 0 14px;
}
.info-box p:last-child { margin: 0; }
@media (max-width: 768px) { .info-box { padding: 28px 24px; } }

/* =====================================================
   PREV / NEXT navigation
   ===================================================== */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 880px; margin: 80px auto 0;
  padding: 0 32px;
}
.pager a {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 4px;
  transition: all 0.25s ease;
}
.pager a:hover { border-color: var(--coral-soft); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pager__label {
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 12px; letter-spacing: 0.10em;
  color: var(--ink-muted);
}
.pager__title {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: 15px; letter-spacing: 0.04em;
  color: var(--ink-strong);
}
.pager .pager__prev { text-align: left; }
.pager .pager__next { text-align: right; }
.pager .pager__prev .pager__label::before { content: '← '; }
.pager .pager__next .pager__label::after { content: ' →'; }
@media (max-width: 768px) {
  .pager { grid-template-columns: 1fr; padding: 0 22px; gap: 10px; }
  .pager .pager__next { text-align: left; }
}

/* =====================================================
   CONSULT CTA (final CTA)
   ===================================================== */
.consult-cta {
  background: linear-gradient(135deg, var(--coral) 0%, var(--sun) 100%);
  text-align: center;
  padding: 72px 32px;
  border-radius: 24px;
  max-width: 880px; margin: 0 auto;
  color: #fff;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.consult-cta::before {
  content: ''; position: absolute;
  top: -40px; left: -40px;
  width: 180px; height: 180px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  pointer-events: none;
}
.consult-cta::after {
  content: ''; position: absolute;
  bottom: -50px; right: -50px;
  width: 220px; height: 220px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  pointer-events: none;
}
.consult-cta__inner { position: relative; z-index: 2; }
.consult-cta__overline {
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 14px; letter-spacing: 0.16em;
  margin: 0 0 14px;
  opacity: 0.9;
}
.consult-cta__heading {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: 0.08em; line-height: 1.6;
  margin: 0 0 24px;
}
.consult-cta__sub {
  font-size: 14px; line-height: 2.0;
  margin: 0 0 32px;
  opacity: 0.95;
}
.consult-cta__btn {
  display: inline-block;
  background: #fff; color: var(--coral-deep);
  font-family: var(--font-jp-sans); font-weight: 700;
  font-size: 15px; letter-spacing: 0.10em;
  padding: 18px 44px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}
.consult-cta__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* =====================================================
   FOOTER
   ===================================================== */
footer {
  background: var(--paper-soft);
  border-top: 1px solid var(--line);
  color: var(--ink-sub);
  padding: 56px 0 36px;
  margin-top: 80px;
}
.footer-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  max-width: 1080px; margin: 0 auto;
  padding: 0 32px;
}
.footer-brand {
  display: flex; align-items: center;
  margin-bottom: 10px;
}
.footer-brand__logo {
  height: 48px;
  width: auto;
  display: block;
}
.footer-addr {
  font-size: 12.5px; line-height: 1.95;
  color: var(--ink-sub); letter-spacing: 0.04em;
  margin: 12px 0 0;
}
.footer-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
  font-size: 12.5px;
}
.footer-links a {
  color: var(--ink-sub); transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--coral-deep); }
.footer-bottom {
  text-align: center;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--ink-muted);
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 0 22px; }
}

/* =====================================================
   Mobile Japanese line breaking
   ===================================================== */
@media (max-width: 768px) {
  h1, h2, h3, h4,
  .section-title, .page-hero__title, .hero__h1,
  .chapter-card__title, .condition__name, .status-card__title,
  .article h2, .article h3, .info-box__title,
  .consult-cta__heading {
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-break: strict;
  }
  .article p, .chapter-card__desc, .status-card__desc, .info-box p,
  .footer-addr {
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
  }
}

/* =====================================================
   HERO V2 — badges + dual CTAs
   ===================================================== */
.hero__badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.hero__badge-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-jp-sans);
  font-size: 13px; letter-spacing: 0.06em;
  color: var(--coral-deep);
  background: rgba(255, 255, 255, 0.8);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.hero__badge-icon {
  font-size: 14px; line-height: 1;
}
.hero__ctas {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .hero__badges { gap: 8px; margin-bottom: 22px; }
  .hero__badge-item { font-size: 11.5px; padding: 6px 12px; }
  .hero__ctas { gap: 10px; flex-direction: column; align-items: stretch; max-width: 320px; margin: 8px auto 0; }
}

/* =====================================================
   GENERIC BUTTON SYSTEM
   ===================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-jp-sans); font-weight: 600;
  font-size: 14.5px; letter-spacing: 0.10em;
  padding: 14px 32px;
  border-radius: 999px;
  transition: all 0.3s ease;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--ink-strong);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: var(--coral-deep); }
.btn--ghost {
  background: transparent;
  color: var(--ink-strong);
  border-color: var(--ink-strong);
}
.btn--ghost:hover { background: var(--ink-strong); color: #fff; transform: translateY(-2px); }
.btn--lg {
  font-size: 15.5px;
  padding: 18px 40px;
}
@media (max-width: 768px) {
  .btn--lg { padding: 16px 28px; font-size: 14.5px; }
}

/* =====================================================
   WORRY GRID (悩み別入口)
   ===================================================== */
.worry-section { background: var(--paper-soft); }
.worry-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; max-width: 1080px; margin: 0 auto;
}
.worry-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.worry-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.worry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--coral-soft); }
.worry-card:hover::before { transform: scaleX(1); }
.worry-card__icon {
  font-size: 36px; line-height: 1; margin-bottom: 4px;
}
.worry-card__title {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: 15.5px; line-height: 1.6; letter-spacing: 0.04em;
  color: var(--ink-strong); margin: 0;
}
.worry-card__desc {
  font-size: 13px; line-height: 1.85;
  color: var(--ink-sub); letter-spacing: 0.04em;
  margin: 0; flex: 1;
}
.worry-card__more {
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 12.5px; letter-spacing: 0.10em;
  color: var(--coral-deep);
  margin-top: 6px;
}
@media (max-width: 768px) {
  .worry-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .worry-card { padding: 22px 16px; }
  .worry-card__icon { font-size: 30px; }
  .worry-card__title { font-size: 13.5px; }
  .worry-card__desc { font-size: 12px; }
}
@media (max-width: 480px) {
  .worry-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   REASONS GRID (選ばれる理由)
   ===================================================== */
.reasons-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; max-width: 1080px; margin: 0 auto;
}
.reason-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: all 0.3s ease;
}
.reason-card:hover { box-shadow: var(--shadow-sm); }
.reason-card__num {
  font-family: var(--font-en-deco); font-style: italic;
  font-size: 30px; color: var(--coral);
  letter-spacing: 0.04em; line-height: 1;
}
.reason-card__title {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: 16.5px; letter-spacing: 0.04em;
  color: var(--ink-strong); margin: 0;
  line-height: 1.5;
}
.reason-card__desc {
  font-size: 13.5px; line-height: 1.95;
  color: var(--ink-sub); letter-spacing: 0.04em;
  margin: 0;
}
@media (max-width: 768px) {
  .reasons-grid { grid-template-columns: 1fr; gap: 14px; }
  .reason-card { padding: 22px 20px; }
}

/* =====================================================
   COST SUMMARY TABLE
   ===================================================== */
.cost-summary { max-width: 720px; margin: 0 auto; }
.cost-summary__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-soft);
}
.cost-summary__table thead th {
  background: var(--coral);
  color: #fff;
  padding: 14px 18px;
  font-family: var(--font-jp-sans); font-weight: 600;
  font-size: 14px; letter-spacing: 0.06em;
  text-align: left;
}
.cost-summary__table thead th:last-child { text-align: right; }
.cost-summary__table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px; letter-spacing: 0.04em;
}
.cost-summary__table tbody tr:last-child td { border-bottom: 0; }
.cost-summary__table tbody td:last-child { text-align: right; color: var(--coral-deep); font-weight: 600; }
.cost-summary__note {
  font-size: 12.5px; line-height: 1.85;
  color: var(--ink-muted); letter-spacing: 0.04em;
  margin: 14px 0 0;
}
@media (max-width: 768px) {
  .cost-summary__table thead th,
  .cost-summary__table tbody td { padding: 12px 14px; font-size: 13px; }
}

/* =====================================================
   SECTION CTA BAND (各ページ末尾の汎用CTA)
   ===================================================== */
.section-cta-band {
  padding: 60px 0;
  background: linear-gradient(135deg, var(--paper-coral) 0%, var(--paper-yellow) 100%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.section-cta {
  max-width: 760px; margin: 0 auto;
  text-align: center;
}
.section-cta__lead {
  font-family: var(--font-jp-serif); font-weight: 500;
  font-size: 17px; line-height: 1.85;
  color: var(--ink-strong); letter-spacing: 0.06em;
  margin: 0 0 24px;
}
.section-cta__btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
@media (max-width: 768px) {
  .section-cta-band { padding: 44px 0; }
  .section-cta__lead { font-size: 15px; margin-bottom: 20px; }
  .section-cta__btns { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
}

/* consult-cta dual buttons */
.consult-cta__btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.consult-cta__btn--ghost {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: none !important;
}
.consult-cta__btn--ghost:hover { background: rgba(255, 255, 255, 0.15) !important; }
@media (max-width: 768px) {
  .consult-cta__btns { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
}

/* =====================================================
   DISCLAIMER BOX (薬機法・未承認医療機器表記)
   ===================================================== */
.disclaimer-box {
  background: #FFF8E8;
  border: 1px solid #E8C8A0;
  border-left: 4px solid #B58E1E;
  border-radius: 10px;
  padding: 24px 26px;
  margin: 32px 0;
}
.disclaimer-box__title {
  font-family: var(--font-jp-sans); font-weight: 700;
  font-size: 14.5px; letter-spacing: 0.06em;
  color: #6A4F0F;
  margin: 0 0 14px;
}
.disclaimer-box p {
  font-size: 13px; line-height: 1.95;
  color: var(--ink); letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.disclaimer-box p:last-child { margin-bottom: 0; }
.disclaimer-box strong { color: #6A4F0F; }

/* =====================================================
   FOOTER DISCLAIMER
   ===================================================== */
.footer-disclaimer {
  max-width: 1080px; margin: 36px auto 0;
  padding: 24px 32px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.85;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.footer-disclaimer__title {
  font-family: var(--font-jp-sans); font-weight: 700;
  font-size: 12px; color: var(--ink-sub);
  margin: 0 0 10px;
  letter-spacing: 0.06em;
}
.footer-disclaimer p {
  margin: 0 0 8px;
}
.footer-disclaimer strong {
  color: var(--ink-sub); font-weight: 600;
}
@media (max-width: 768px) {
  .footer-disclaimer { padding: 20px 22px; font-size: 11px; }
}

/* =====================================================
   MOBILE FIXED BOTTOM CTA
   ===================================================== */
.mobile-fixed-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(253, 250, 241, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 14px rgba(20, 30, 30, 0.08);
}
.mobile-fixed-cta__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 10px 4px 8px;
  font-family: var(--font-jp-sans);
  text-decoration: none;
  transition: background 0.2s ease;
  position: relative;
}
.mobile-fixed-cta__item + .mobile-fixed-cta__item {
  border-left: 1px solid var(--line-soft);
}
.mobile-fixed-cta__icon {
  font-size: 20px; line-height: 1;
}
.mobile-fixed-cta__label {
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-strong);
  font-weight: 600;
}
.mobile-fixed-cta__item--book {
  background: var(--coral);
}
.mobile-fixed-cta__item--book .mobile-fixed-cta__label,
.mobile-fixed-cta__item--book .mobile-fixed-cta__icon {
  color: #fff;
}
.mobile-fixed-cta__item:active {
  background: rgba(45, 92, 92, 0.1);
}
.mobile-fixed-cta__item--book:active {
  background: var(--coral-deep);
}
@media (max-width: 768px) {
  .mobile-fixed-cta { display: flex; }
  body { padding-bottom: 64px; }
}

/* === Article images === */
.article-img {
  margin: 0 0 36px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.article-img picture, .article-img img {
  display: block; width: 100%; height: auto;
}
.article-img figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-align: center;
  font-style: italic;
}
.article-img--full {
  margin: 32px -32px 36px;
  border-radius: 0;
}
@media (max-width: 768px) {
  .article-img--full { margin: 24px -22px 28px; }
}

/* Hero showcase image (homepage) */
.hero-showcase {
  max-width: 920px; margin: 60px auto 0;
  padding: 0 32px;
}
.hero-showcase picture, .hero-showcase img {
  display: block; width: 100%; height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
  .hero-showcase { padding: 0 22px; margin-top: 40px; }
}