/**
 * コンポーネント - にじいろこどもクリニック
 *
 * 読み込み順: variables.css → base.css → components.css → utilities.css
 *
 * Pattern C: 「温かい・やさしい」テイスト（小児科クリニック）
 * - フルラウンドのボタン（border-radius: 100px）
 * - カードの大きな角丸（border-radius: 16px）
 * - ブランドカラーに根拠のある柔らかい影
 * - 直線的・鋭角なデザインを意図的に排除
 * - 子どもが怖がらない、明るく温かい配色
 *
 * BEM記法を徹底する:
 *   Block: .btn / .card / .hero 等
 *   Element: .btn__icon / .card__body 等（アンダースコア2つ）
 *   Modifier: .btn--primary / .card--featured 等（ハイフン2つ）
 *
 * コンポーネント一覧:
 *   01. .btn                 ボタン（フルラウンド）
 *   02. .card                汎用カード（角丸16px）
 *   03. .hero                ヒーローセクション（明るく温かい）
 *   04. .nav                 グローバルナビゲーション
 *   05. .footer              フッター
 *   06. .vaccine-table       予防接種スケジュール表
 *   07. .symptom-guide       受診目安フローチャート
 *   08. .doctor-card         医師紹介カード
 *   09. .faq                 FAQアコーディオン
 *   10. .breadcrumb          パンくずリスト
 *   11. .cta-banner          CTAバナー
 *   12. .notice-banner       お知らせバナー（感染症情報等）
 *   13. .feature-card        特長カード
 *   14. .step-flow           診療の流れ
 *   15. .checkup-card        健診カード
 *   16. .column-card         コラム記事カード
 */

/* =============================================
 * 01. ボタン (.btn)
 *
 * Pattern C の最大の特徴: border-radius: 100px（フルラウンド）
 * 全バリエーションで角丸 100px を統一する。
 * タップ領域: height 52px（44px 以上を確保）
 * ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height); /* 52px */
  min-width: var(--btn-min-width);
  padding: 0 var(--btn-padding-x);
  font-family: var(--font-ja);
  font-size: var(--font-size-btn);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-base);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-btn); /* 100px フルラウンド */
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.btn:active {
  transform: translateY(1px);
}

/* Primary: メインアクション（診療案内・各種情報系） */
.btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: var(--shadow-btn);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-btn);
  color: var(--color-text-on-primary);
  text-decoration: none;
}

/**
 * Accent: 最重要CTA（予約・電話・急いで受診ボタン等）
 *
 * アクセシビリティ注意:
 *   --color-accent (#FF8C28) と白テキスト (#FFFFFF) のコントラスト比は 2.33:1 → WCAG AA 不合格。
 *   テキスト色は必ず --color-text-on-accent (#1C3045) を使用する。
 *   コントラスト比: 5.92:1 → WCAG AA 合格。
 */
.btn--accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent); /* #1C3045 - 白ではなく濃紺を使用 */
  box-shadow: var(--shadow-btn-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: var(--shadow-btn-accent);
  color: var(--color-text-on-accent);
  text-decoration: none;
}

/* Outline: セカンダリアクション */
.btn--outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: none;
}

.btn--outline:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  text-decoration: none;
}

/* Ghost: Primary背景上で使うアウトラインボタン */
.btn--ghost {
  background-color: transparent;
  border-color: var(--color-text-on-primary);
  color: var(--color-text-on-primary);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--color-text-on-primary);
  text-decoration: none;
}

/* サイズ修飾子 */
.btn--sm {
  height: var(--btn-height-sm); /* 44px */
  padding: 0 var(--space-5);
  font-size: var(--font-size-sm);
}

.btn--lg {
  height: var(--btn-height-lg); /* 60px */
  padding: 0 var(--space-8);
  font-size: var(--font-size-base);
}

/* 幅いっぱい（SPでよく使う） */
.btn--block {
  width: 100%;
}

/* ボタン内アイコン（Phosphor Icons） */
.btn__icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
}

/**
 * 電話番号ボタン
 * Accent 背景 + テキスト色 --color-text-on-accent (#1C3045)
 * コントラスト比: 5.92:1（AA 合格）
 */
.btn--tel {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-btn-accent);
}

.btn--tel:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-text-on-accent);
  text-decoration: none;
}

/* =============================================
 * 02. 汎用カード (.card)
 *
 * Pattern C: 角丸 16px + 柔らかなブルーシャドウで
 * 「怖くない・やさしい」印象を実現する。
 * ============================================= */

.card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card); /* 16px */
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* カード内画像 */
.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-primary-light);
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card:hover .card__image img {
  transform: scale(1.04);
}

/* カード本文エリア */
.card__body {
  padding: var(--space-card-inner);
}

/* カードタイトル */
.card__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* カードテキスト */
.card__text {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  line-height: var(--line-height-base);
}

/* カードバッジ（フルラウンド） */
.card__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-badge);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-radius: var(--radius-badge); /* 100px フルラウンド */
  margin-bottom: var(--space-3);
}

/* カードフッター */
.card__footer {
  padding: var(--space-4) var(--space-card-inner);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 特集カード（Primary背景） */
.card--featured {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.card--featured .card__title {
  color: var(--color-primary);
}

/* =============================================
 * 03. ヒーローセクション (.hero)
 *
 * Pattern C: 明るく温かい雰囲気。
 * 子どもと保護者が「ここに来てみたい」と思える
 * 開放的でフレンドリーなデザイン。
 * 暗いオーバーレイよりも、明るいグラデーションを使用する。
 * ============================================= */

.hero {
  position: relative;
  background-color: var(--color-primary);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .hero {
    min-height: 540px;
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: 620px;
  }
}

/* 背景画像レイヤー */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

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

/**
 * 画像上のオーバーレイ
 * 白〜スカイブルーの明るいグラデーションで
 * 「怖くない・温かい」雰囲気を演出する。
 * Pattern A の濃い紺色オーバーレイとは明確に異なるアプローチ。
 */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(33, 150, 201, 0.72) 0%,
    rgba(33, 150, 201, 0.45) 55%,
    rgba(91, 196, 230, 0.25) 100%
  );
}

/* コンテンツエリア */
.hero__content {
  position: relative;
  z-index: 1;
  padding: var(--space-12) 0;
  max-width: 640px;
}

@media (min-width: 1024px) {
  .hero__content {
    padding: var(--space-18) 0;
  }
}

/* ヒーロー上部ラベル（Nunitoで表示） */
.hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--space-4);
}

/* ヒーロー見出し */
.hero__title {
  font-family: var(--font-ja);
  font-size: clamp(26px, 5.5vw, 42px);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-on-primary);
  margin-bottom: var(--space-5);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* ヒーロー本文テキスト */
.hero__text {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.95);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
  max-width: 500px;
}

@media (min-width: 768px) {
  .hero__text {
    font-size: 17px;
  }
}

/* ヒーローCTAエリア */
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

@media (min-width: 480px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/**
 * ヒーローインフォバー（診療時間・休診日の簡易表示）
 * ヒーローの下部に貼り付け、保護者がすぐに確認できる情報を提供する。
 */
.hero__info-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.95);
  padding: var(--space-3) 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero__info-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
}

.hero__info-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.hero__info-label {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

/* =============================================
 * 04. グローバルナビゲーション (.nav)
 * ============================================= */

.nav {
  background-color: var(--color-bg-white);
  border-bottom: 2px solid var(--color-border);
  box-shadow: var(--shadow-header);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .nav__inner {
    height: 72px;
  }
}

/* ロゴ */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  gap: var(--space-3);
}

.nav__logo-img {
  height: 40px;
  width: auto;
}

.nav__logo-text {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.3;
}

.nav__logo-text-sub {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-light);
  letter-spacing: 0.05em;
}

/* ナビメニューリスト（PC） */
.nav__list {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

@media (min-width: 1024px) {
  .nav__list {
    display: flex;
    align-items: center;
  }
}

/* ナビアイテム */
.nav__item {
  position: relative;
}

/* ナビリンク */
.nav__link {
  display: inline-flex;
  align-items: center;
  height: 72px;
  padding: 0 var(--space-4);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 3px solid transparent;
  transition:
    color var(--transition-base),
    border-color var(--transition-base);
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ナビのCTAボタン（予約・電話） */
.nav__cta {
  display: none;
  gap: var(--space-2);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .nav__cta {
    display: flex;
    align-items: center;
  }
}

/* ハンバーガーボタン（SP用）- タップ領域 44px 以上確保 */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base);
}

.nav__hamburger:hover {
  background-color: var(--color-primary-light);
}

.nav__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  border-radius: var(--radius-pill);
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

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

.nav__hamburger[aria-expanded='true'] .nav__hamburger-line:nth-child(2) {
  opacity: 0;
}

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

@media (min-width: 1024px) {
  .nav__hamburger {
    display: none;
  }
}

/* スマホ用ドロワーメニュー */
.nav__drawer {
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 0;
  width: min(320px, 90vw);
  background-color: var(--color-bg-white);
  border-left: 1px solid var(--color-border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  z-index: var(--z-overlay);
  padding: var(--space-6);
}

.nav__drawer[aria-hidden='false'],
.nav__drawer.is-open {
  transform: translateX(0);
}

.nav__drawer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__drawer-item {
  border-bottom: 1px solid var(--color-border);
}

.nav__drawer-link {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-base);
  min-height: 52px; /* タップ領域 44px 以上を確保 */
}

.nav__drawer-link:hover {
  color: var(--color-primary);
}

.nav__drawer-cta {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* =============================================
 * 05. フッター (.footer)
 * ============================================= */

.footer {
  background-color: var(--color-text);
  color: var(--color-text-on-primary);
  padding-top: var(--space-12);
  padding-bottom: var(--space-6);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
  }
}

/* フッタークリニック情報 */
.footer__logo {
  display: inline-flex;
  margin-bottom: var(--space-5);
}

.footer__logo img {
  height: 36px;
  width: auto;
}

.footer__clinic-name {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-on-primary);
  margin-bottom: var(--space-4);
}

.footer__address {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--line-height-relaxed);
  font-style: normal;
}

.footer__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-on-primary);
  text-decoration: none;
  margin-top: var(--space-4);
}

.footer__tel:hover {
  color: var(--color-secondary);
}

/* フッターナビゲーション */
.footer__nav-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-4);
}

.footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__nav-item {
  margin-bottom: var(--space-3);
}

.footer__nav-link {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer__nav-link:hover {
  color: var(--color-text-on-primary);
}

/* フッターボトムバー */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer__copyright {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.45);
}

.footer__policy {
  display: flex;
  gap: var(--space-5);
}

.footer__policy-link {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}

.footer__policy-link:hover {
  color: var(--color-text-on-primary);
}

/* =============================================
 * 06. 予防接種スケジュール表 (.vaccine-table)
 *
 * 対象月齢・ワクチン名・定期/任意の種別を
 * 視覚的に整理して表示する。
 * SP での横スクロールを必ず確保すること。
 * ============================================= */

/* テーブルラッパー（SP横スクロール対応） */
.vaccine-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.vaccine-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-bg-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: var(--font-size-sm);
  min-width: 600px; /* SP横スクロールのための最小幅 */
}

.vaccine-table caption {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-align: left;
  padding-bottom: var(--space-4);
  caption-side: top;
}

.vaccine-table thead {
  background-color: var(--color-primary);
}

.vaccine-table thead th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-on-primary);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}

.vaccine-table thead th:last-child {
  border-right: none;
}

.vaccine-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-base);
}

.vaccine-table tbody tr:last-child {
  border-bottom: none;
}

.vaccine-table tbody tr:nth-child(even) {
  background-color: var(--color-bg);
}

.vaccine-table tbody tr:hover {
  background-color: var(--color-primary-light);
}

.vaccine-table tbody th,
.vaccine-table tbody td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--color-border);
}

.vaccine-table tbody th {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-align: left;
  white-space: nowrap;
}

.vaccine-table tbody td:last-child,
.vaccine-table tbody th:last-child {
  border-right: none;
}

/* 月齢セル */
.vaccine-table__age {
  font-family: var(--font-en);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  min-width: 80px;
}

/* ワクチン名セル */
.vaccine-table__name {
  text-align: left;
  min-width: 160px;
  font-weight: var(--font-weight-medium);
}

/* 種別セル */
.vaccine-table__type {
  min-width: 80px;
}

/**
 * 定期接種バッジ: Primary カラー
 * 任意接種バッジ: Secondary カラー
 * 色だけでなく「定期」「任意」のテキストラベルも必ず表示すること。
 */
.vaccine-table__badge--regular {
  display: inline-block;
  padding: 2px var(--space-3);
  font-size: var(--font-size-badge);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-on-primary);
  background-color: var(--color-primary);
  border-radius: var(--radius-badge);
  white-space: nowrap;
}

.vaccine-table__badge--optional {
  display: inline-block;
  padding: 2px var(--space-3);
  font-size: var(--font-size-badge);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  background-color: var(--color-secondary-light);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-badge);
  white-space: nowrap;
}

/* 接種完了マーク */
.vaccine-table__check {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* 接種不要（対象外）マーク */
.vaccine-table__na {
  color: var(--color-text-light);
}

/* 備考欄 */
.vaccine-table__note {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-base);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.vaccine-table__note::before {
  content: '※';
  flex-shrink: 0;
  color: var(--color-primary);
}

/* =============================================
 * 07. 受診目安フローチャート (.symptom-guide)
 *
 * 緊急度を 3 段階で色分けして直感的に判断できるようにする。
 * 赤: 緊急（すぐ受診・救急車）
 * 黄: 早めに受診（翌日など）
 * 緑: 様子見（自宅ケア）
 *
 * 重要: 色だけに情報を依存させない（WCAG 1.4.1）。
 *       各レベルにアイコン + テキストラベルを必ず組み合わせる。
 * ============================================= */

.symptom-guide {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .symptom-guide {
    flex-direction: row;
    align-items: stretch;
  }
}

/* 各レベルの共通スタイル */
.symptom-guide__level {
  flex: 1;
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* レベルヘッダー（アイコン + タイトル） */
.symptom-guide__level-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.symptom-guide__level-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

.symptom-guide__level-title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.symptom-guide__level-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  display: block;
}

/* 症状リスト */
.symptom-guide__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.symptom-guide__list-item {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  padding-left: var(--space-5);
  position: relative;
}

.symptom-guide__list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/**
 * 緊急レベル: 赤系
 * --color-level-emergency (#D9363E) on --color-level-emergency-light (#FDF0F0)
 * コントラスト比: 約 5.2:1 → AA 合格
 */
.symptom-guide__level--emergency {
  background-color: var(--color-level-emergency-light);
  border: 2px solid var(--color-level-emergency-border);
}

.symptom-guide__level--emergency .symptom-guide__level-icon {
  background-color: var(--color-level-emergency);
  color: #ffffff;
}

.symptom-guide__level--emergency .symptom-guide__level-title {
  color: var(--color-level-emergency);
}

.symptom-guide__level--emergency .symptom-guide__list-item {
  color: var(--color-text);
}

.symptom-guide__level--emergency .symptom-guide__list-item::before {
  background-color: var(--color-level-emergency);
}

/**
 * 早めに受診レベル: 黄橙系
 * --color-level-soon (#E07B00) on --color-level-soon-light (#FFF8EC)
 * コントラスト比: 約 4.8:1 → AA 合格
 */
.symptom-guide__level--soon {
  background-color: var(--color-level-soon-light);
  border: 2px solid var(--color-level-soon-border);
}

.symptom-guide__level--soon .symptom-guide__level-icon {
  background-color: var(--color-level-soon);
  color: #ffffff;
}

.symptom-guide__level--soon .symptom-guide__level-title {
  color: var(--color-level-soon);
}

.symptom-guide__level--soon .symptom-guide__list-item {
  color: var(--color-text);
}

.symptom-guide__level--soon .symptom-guide__list-item::before {
  background-color: var(--color-level-soon);
}

/**
 * 様子見レベル: 緑系
 * --color-level-watch (#2D8A4E) on --color-level-watch-light (#F0FAF4)
 * コントラスト比: 約 5.5:1 → AA 合格
 */
.symptom-guide__level--watch {
  background-color: var(--color-level-watch-light);
  border: 2px solid var(--color-level-watch-border);
}

.symptom-guide__level--watch .symptom-guide__level-icon {
  background-color: var(--color-level-watch);
  color: #ffffff;
}

.symptom-guide__level--watch .symptom-guide__level-title {
  color: var(--color-level-watch);
}

.symptom-guide__level--watch .symptom-guide__list-item {
  color: var(--color-text);
}

.symptom-guide__level--watch .symptom-guide__list-item::before {
  background-color: var(--color-level-watch);
}

/* =============================================
 * 08. 医師紹介カード (.doctor-card)
 * ============================================= */

.doctor-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

@media (min-width: 768px) {
  .doctor-card {
    display: grid;
    grid-template-columns: 220px 1fr;
  }
}

@media (min-width: 1024px) {
  .doctor-card {
    grid-template-columns: 260px 1fr;
  }
}

/* 医師写真 */
.doctor-card__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--color-primary-light);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .doctor-card__photo {
    aspect-ratio: auto;
    min-height: 300px;
  }
}

.doctor-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* 医師情報エリア */
.doctor-card__info {
  padding: var(--space-6) var(--space-card-inner);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 役職ラベル */
.doctor-card__role {
  display: inline-block;
  padding: 2px var(--space-3);
  font-size: var(--font-size-badge);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-radius: var(--radius-badge);
  margin-bottom: var(--space-3);
}

/* 医師名 */
.doctor-card__name {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-heading);
}

/* 読み仮名 */
.doctor-card__name-kana {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
  letter-spacing: 0.05em;
}

/* 専門分野・資格 */
.doctor-card__speciality {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

/* 経歴リスト */
.doctor-card__history {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.doctor-card__history-item {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  padding-left: var(--space-4);
  position: relative;
  line-height: var(--line-height-base);
}

.doctor-card__history-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background-color: var(--color-secondary);
  border-radius: 50%;
}

/* メッセージ */
.doctor-card__message {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

/* =============================================
 * 09. FAQ アコーディオン (.faq)
 *
 * <details> / <summary> 要素の使用を推奨する。
 * Q バッジはブランドカラー（Primary）のフルラウンド円形。
 * ============================================= */

.faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* FAQアイテム */
.faq__item {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.faq__item[open],
.faq__item.is-open {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

/* 質問（<summary> 要素を推奨） */
.faq__question {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-base);
  list-style: none;
  min-height: 56px; /* タップ領域確保 */
  user-select: none;
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Q ラベル（フルラウンド円形） */
.faq__question::before {
  content: 'Q';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  font-family: var(--font-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* 展開アイコン（Phosphor Icons の CaretDown 相当） */
.faq__question-icon {
  margin-left: auto;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.faq__item[open] .faq__question-icon,
.faq__item.is-open .faq__question-icon {
  transform: rotate(180deg);
}

/* 回答エリア */
.faq__answer {
  padding: 0 var(--space-6) var(--space-5);
  padding-left: calc(var(--space-6) + 30px + var(--space-4));
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}

/* A ラベル（Accent 背景・テキストは濃紺で AA 対応） */
.faq__answer-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: var(--color-accent);
  color: var(--color-text-on-accent); /* #1C3045 - コントラスト比 5.92:1 */
  font-family: var(--font-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
  flex-shrink: 0;
  float: left;
  margin-right: var(--space-4);
  margin-top: 2px;
}

/* =============================================
 * 10. パンくずリスト (.breadcrumb)
 * ============================================= */

.breadcrumb {
  padding: var(--space-4) 0;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* セパレーター */
.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  margin: 0 var(--space-2);
  color: var(--color-border-strong);
  font-size: var(--font-size-xs);
}

.breadcrumb__link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-base);
}

.breadcrumb__link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* 現在ページ */
.breadcrumb__item[aria-current='page'] {
  color: var(--color-text-light);
}

/* =============================================
 * 11. CTAバナー (.cta-banner)
 * ============================================= */

.cta-banner {
  background-color: var(--color-primary);
  padding: var(--space-12) 0;
}

@media (min-width: 1024px) {
  .cta-banner {
    padding: var(--space-14) 0;
  }
}

.cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .cta-banner__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: var(--space-8);
  }
}

.cta-banner__body {
  flex: 1;
}

.cta-banner__title {
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-on-primary);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-3);
}

.cta-banner__text {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--line-height-relaxed);
}

.cta-banner__btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

@media (min-width: 480px) {
  .cta-banner__btn {
    flex-direction: row;
    width: auto;
  }
}

/* =============================================
 * 12. お知らせバナー (.notice-banner)
 *
 * 感染症流行情報・臨時休診・重要なお知らせに使用する。
 * サイトの上部（ナビ直下）に配置することを想定。
 * ============================================= */

.notice-banner {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.notice-banner__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.notice-banner__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  margin-top: 2px;
}

.notice-banner__body {
  flex: 1;
}

.notice-banner__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-heading);
}

.notice-banner__text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.notice-banner__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity var(--transition-base),
    background-color var(--transition-base);
}

.notice-banner__close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.08);
}

/**
 * 緊急バナー（感染症・休診緊急通知等）
 * Accent 色でなく level-emergency 色を使用し、一般的な CTAボタンと区別する。
 */
.notice-banner--urgent {
  background-color: var(--color-level-emergency-light);
  border-color: var(--color-level-emergency-border);
}

.notice-banner--urgent .notice-banner__icon {
  color: var(--color-level-emergency);
}

.notice-banner--urgent .notice-banner__title {
  color: var(--color-level-emergency);
}

.notice-banner--urgent .notice-banner__text {
  color: var(--color-text);
}

/** インフォバナー（感染症情報・ワクチン案内等） */
.notice-banner--info {
  background-color: var(--color-primary-light);
  border-color: var(--color-border);
}

.notice-banner--info .notice-banner__icon {
  color: var(--color-primary);
}

.notice-banner--info .notice-banner__title {
  color: var(--color-primary);
}

.notice-banner--info .notice-banner__text {
  color: var(--color-text);
}

/* =============================================
 * 13. 特長カード (.feature-card)
 *
 * 「にじいろの特長・こだわり」等のセクションに使用。
 * Phosphor Icons 24px + 大きな角丸でやさしい印象を演出。
 * ============================================= */

.feature-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
}

.feature-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* アイコンエリア（フルラウンドの丸背景） */
.feature-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.feature-card__icon svg,
.feature-card__icon [class*='ph-'] {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* 特長タイトル */
.feature-card__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-heading);
}

/* 特長説明文 */
.feature-card__desc {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* Accent バリエーション（特に強調したいカード） */
.feature-card--accent {
  border-color: var(--color-accent);
  background-color: var(--color-accent-light);
}

.feature-card--accent .feature-card__icon {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* =============================================
 * 14. 診療の流れ (.step-flow)
 *
 * 受付〜診察〜お会計の流れを番号付きステップで表示。
 * ============================================= */

.step-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

@media (min-width: 768px) {
  .step-flow {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ステップアイテム */
.step-flow__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-5);
  position: relative;
}

/**
 * ステップ間の矢印（疑似要素）
 * SP: 下矢印 / PC: 右矢印
 */
.step-flow__item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--color-border);
}

@media (min-width: 768px) {
  .step-flow__item:not(:last-child)::after {
    bottom: auto;
    top: 28px; /* ステップ番号の高さに合わせる */
    left: auto;
    right: -16px;
    transform: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid var(--color-border);
    border-right: 0;
  }
}

/* ステップ番号（フルラウンド円形） */
.step-flow__number {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-btn);
}

/* ステップタイトル */
.step-flow__title {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-heading);
}

/* ステップ説明文 */
.step-flow__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-base);
}

/* =============================================
 * 15. 健診カード (.checkup-card)
 *
 * 乳幼児健診・学校健診等の案内カード。
 * Accent カラーでCTA感を演出し、保護者に接種を促す。
 * ============================================= */

.checkup-card {
  background-color: var(--color-bg-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
}

.checkup-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* 健診タイプヘッダー */
.checkup-card__header {
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-primary-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

.checkup-card__header-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkup-card__header-title {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

/* 健診内容 */
.checkup-card__body {
  padding: var(--space-5) var(--space-6);
  flex: 1;
}

/* 対象月齢・年齢 */
.checkup-card__target {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background-color: var(--color-accent-light);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-badge);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  /* Accent背景でないため色に制約なし。テキストは濃色で可読性確保 */
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* 健診内容リスト */
.checkup-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checkup-card__list-item {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding-left: var(--space-5);
  position: relative;
  line-height: var(--line-height-base);
}

.checkup-card__list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  background-color: var(--color-secondary);
  border-radius: 50%;
}

/* 予約ボタンエリア */
.checkup-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* =============================================
 * 16. コラム記事カード (.column-card)
 *
 * 子育てコラム・健康情報記事の一覧に使用する。
 * ============================================= */

.column-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
  text-decoration: none;
  color: inherit;
}

.column-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}

/* サムネイル */
.column-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-primary-light);
  flex-shrink: 0;
}

.column-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.column-card:hover .column-card__thumb img {
  transform: scale(1.05);
}

/* カード本文エリア */
.column-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* メタ情報（日付・カテゴリ） */
.column-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.column-card__date {
  font-family: var(--font-en);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  letter-spacing: 0.05em;
}

.column-card__category {
  display: inline-block;
  padding: 2px var(--space-3);
  font-size: var(--font-size-badge);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-radius: var(--radius-badge);
}

/* 記事タイトル */
.column-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.column-card:hover .column-card__title {
  color: var(--color-primary);
}

/* 記事抜粋 */
.column-card__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-base);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* 続きを読むリンク */
.column-card__more {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
}