﻿
/* =========================================================
   サブページ デザイン・ブラッシュアップ CSS  v2
   頭痛外来ページ試作（デザイン提案書 v3 準拠）
   - タイポ／余白／色をデザインシステム（v3 6章）のトークンに統一
   - アクセントカラー（メイングリーン）は「本当に目立たせたい要素」のみに限定
   - アイコン画像は未着手（後日 assets/icons/ に配置後、差し替え予定）
   ========================================================= */
:root{
  /* アクセントは1色のみ */
  --accent: #179B62;
  --accent-hover: #1AB284;

  /* ニュートラル（グルーピングの主役） */
  --white: #FFFFFF;
  --gray-50: #F7F9F7;
  --gray-100: #EFF2EF;
  --gray-200: #E6E6E6;
  --gray-600: #6f6f6f;
  --ink: #2B2B2B;

  /* 警告色（緊急時のみ使用） */
  --alert: #ED4545;
  --alert-bg: #FFF4F3;
  --alert-border: #F3B4AF;

  /* 余白スケール（8pxベース） */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;

  /* タイポグラフィスケール */
  --fs-note: 14px;
  --fs-body: 18px;
  --fs-h3: 20px;
  --fs-h2: 28px;
  --fs-h1: 36px;

  /* 部品の統一ルール：角丸は1種類のみ */
  --radius: 12px;
}

/* ---------------------------------------------------------
   共通タイポグラフィ・余白
   #service_single は single-service.php（全8ページ共通テンプレート）の
   出力先のため、ここは追加の確認なしで全ページに反映されます。
   --------------------------------------------------------- */
#service_single{
  font-size: var(--fs-body);
}
#service_single h2{
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.4;
  margin: var(--sp-8) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--gray-200);
}
#service_single h3{
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-h3);
  border-left: 4px solid var(--accent);
  padding-left: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2);
}
#service_single p{
  font-size: var(--fs-body);
  line-height: 1.7;
  margin-bottom: var(--sp-3);
  color: var(--ink);
}

/* ---------------------------------------------------------
   ヘッダー画像（アイキャッチ）のトーン統一
   #page_header も全ページ共通のテンプレート要素です。
   --------------------------------------------------------- */
#page_header{ position: relative; }
#page_header::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,155,98,.12) 0%, rgba(23,155,98,.55) 100%);
  pointer-events: none;
}

/* ===========================================================
   ここから下は「頭痛外来」ページ専用（.headache-* クラス）
   他7ページは記事本文内のクラス名（プレフィックス）が異なるため、
   全ページ展開時にはページごとの構造確認・追記が必要です。
   =========================================================== */

/* ① リード文：ボックスで囲まず、キャッチコピーだけ強弱をつける */
.headache-lead{
  font-size: var(--fs-body);
  margin-top: var(--sp-2);
}
.headache-lead strong{
  display: block;
  font-size: 1.4em;
  line-height: 1.5;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

/* ② 症状チェックリスト：塗りをやめてニュートラル＋枠線に */
.headache-symptoms{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
  padding: 0;
}
.headache-symptom{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: 1em;
  line-height: 1.5;
}
.headache-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.85em;
  flex-shrink: 0;
  /* TODO: assets/icons/common/check.svg 設置後、この塗り丸をアイコンに差し替え */
}

/* ③ 頭痛の種類（4種）：バッジをアウトライン基調に軽量化（将来ピクトグラムに差し替え予定） */
.headache-type-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
  padding: 0;
}
.headache-type{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.headache-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--sp-1);
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 700;
  font-size: 0.9em;
  margin-bottom: var(--sp-2);
  /* TODO: assets/icons/headache/migraine.svg 等が揃い次第、症状別ピクトグラムに差し替え */
}
.headache-type h3{
  border-left: none;
  padding-left: 0;
  margin-top: 0;
}

/* ④ 当院で行う検査：カード羅列 → 矢印でつないだステップ形式に */
.headache-test-grid{
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
  padding: 0;
  align-items: stretch;
}
.headache-test{
  flex: 1;
  position: relative;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.headache-test:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--sp-3) - 1px);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--gray-200);
  z-index: 1;
}
.headache-test > span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 700;
  font-size: 0.85em;
  margin-bottom: var(--sp-2);
  /* TODO: assets/icons/common/exam-*.svg 設置後、番号をアイコンに差し替え */
}
.headache-test h3{
  border-left: none;
  padding-left: 0;
  margin: var(--sp-1) 0 var(--sp-1);
  font-size: var(--fs-body);
}

/* ⑤ 治療について：均等カード → 控えめなリスト＋CGRPのみ強調 */
.headache-treatment{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: var(--sp-3) 0 var(--sp-3);
  padding: 0;
}
.headache-treatment-card{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.headache-treatment-cgrp{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--sp-1);
  line-height: 1.5;
}
.headache-treatment-cgrp br{
  display: none;
}
.headache-treatment-cgrp strong{
  display: inline;
  margin-top: 0;
}
.headache-treatment-cgrp small{
  display: inline;
  margin-top: 0;
  color: var(--gray-600);
  font-weight: 400;
}
.cgrp-label{
  display: inline-block;
  background: var(--gray-100);
  color: var(--ink);
  font-size: 0.7em;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
}
.headache-qol{
  background: var(--gray-50);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  line-height: 1.8;
}
.headache-specialty p{
  line-height: 1.7;
}
.headache-doctor-note{
  font-size: var(--fs-note);
  color: var(--gray-600);
}

/* ⑦ 緊急受診アラート：ページ内で最大のコントラストを維持・強化 */
.headache-emergency{
  background: var(--alert-bg);
  border: 1px solid var(--alert-border);
  border-left: 6px solid var(--alert);
  border-radius: 8px;
  padding: var(--sp-4);
  margin: var(--sp-6) 0;
}
.headache-emergency-title{
  font-size: 1.3em;
  font-weight: 700;
  color: var(--alert);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.headache-emergency-title::before{
  font-family: 'eicons';
  content: "\e900"; /* eicon-warning（Elementor同梱アイコン。暫定使用） */
  font-size: 1.3em;
}
.headache-emergency-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-1) var(--sp-4);
  margin: var(--sp-2) 0;
  padding: 0;
}
.headache-emergency-grid > div{
  position: relative;
  padding-left: 1.3em;
  line-height: 1.6;
}
.headache-emergency-grid > div::before{
  content: "・";
  position: absolute;
  left: 0;
  color: var(--alert);
  font-weight: 700;
}
.headache-emergency-bottom{
  background: #fff;
  border-radius: 6px;
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
}

/* ⑧ 締めのメッセージ：塗りボックスをやめ、罫線のみのpull-quoteに */
.headache-message{
  background: transparent;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
  text-align: center;
}
.headache-message strong{
  color: var(--accent);
}

/* ⑨ ページ末尾のCTAバンド（新規／functions.phpのthe_contentフィルタで挿入） */
.subpage-cta-band{
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-top: var(--sp-6);
  text-align: center;
}
.subpage-cta-band-text{
  font-size: 1.1em;
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  color: #fff;
}
.subpage-cta-band-tel{
  font-size: 2em;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-2);
}
.subpage-cta-band-btn{
  display: inline-block;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  text-decoration: none;
  min-height: 44px;
  line-height: 28px;
  transition: background-color 200ms ease;
}
.subpage-cta-band-btn:hover{
  background: var(--gray-50);
}

/* レスポンシブ（スマホ幅は1カラム・ステップは縦積みに） */
@media (max-width: 767px){
  .headache-symptoms,
  .headache-emergency-grid,
  .headache-type-grid{
    grid-template-columns: 1fr;
  }
  .headache-test-grid{
    flex-direction: column;
  }
  .headache-test:not(:last-child)::after{
    display: none;
  }
}

/* =========================================================
   Standard v2：生成アイコン・写真の適用（頭痛外来ページ pilot）
   assets/ 配下に格納した素材をCSSのみで組み込み。
   本文（HTML）は変更せず、既存クラスへの背景画像／::before画像として適用。
   ========================================================= */

/* ② 症状チェックリスト：8項目それぞれに合わせた絵柄アイコンを背景に追加 */
.headache-symptom{
  position: relative;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 76px;
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 48px 48px;
}
.headache-symptoms > .headache-symptom:nth-child(1){ background-image: url('assets/icons/headache/symptom-checklist/b7-frequent.png'); }
.headache-symptoms > .headache-symptom:nth-child(2){ background-image: url('assets/icons/headache/symptom-checklist/b8-medicine-ineffective.png'); }
.headache-symptoms > .headache-symptom:nth-child(3){ background-image: url('assets/icons/headache/symptom-checklist/a7-frequency-illustration.png'); background-size: 44px 44px; }
.headache-symptoms > .headache-symptom:nth-child(4){ background-image: url('assets/icons/headache/symptom-checklist/b4-light-sound.png'); }
.headache-symptoms > .headache-symptom:nth-child(5){ background-image: url('assets/icons/headache/symptom-checklist/a4-shoulder-laptop.png'); background-size: 44px 44px; }
.headache-symptoms > .headache-symptom:nth-child(6){ background-image: url('assets/icons/headache/symptom-checklist/b6-morning.png'); }
.headache-symptoms > .headache-symptom:nth-child(7){ background-image: url('assets/icons/headache/symptom-checklist/a9-severe-first-time.png'); background-size: 44px 44px; }
.headache-symptoms > .headache-symptom:nth-child(8){ background-image: url('assets/icons/common/warning-alert.png'); background-size: 44px 44px; }

/* チェックマークは右上の小さな確認バッジとして残す（絵柄アイコンと役割を分離） */
.headache-check{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  font-size: 11px;
}

/* ③ 頭痛の種類（4種）：番号バッジ→タイプ別ピクトグラムに差し替え */
.headache-number{
  display: block;
  width: 72px;
  height: 72px;
  min-width: 72px;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-size: 0;
  margin-bottom: var(--sp-2);
}
.headache-type-grid > .headache-type:nth-child(1) .headache-number{ background-image: url('assets/icons/headache/migraine.png'); }
.headache-type-grid > .headache-type:nth-child(2) .headache-number{ background-image: url('assets/icons/headache/tension.png'); }
.headache-type-grid > .headache-type:nth-child(3) .headache-number{ background-image: url('assets/icons/headache/cluster.png'); }
.headache-type-grid > .headache-type:nth-child(4) .headache-number{ background-image: url('assets/icons/headache/other-type.png'); }

/* ④ 当院で行う検査：番号→検査アイコンに差し替え */
.headache-test > span{
  display: block;
  width: 56px;
  height: 56px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-size: 0;
}
.headache-test-grid > .headache-test:nth-child(1) > span{ background-image: url('assets/icons/common/exam-neuro.png'); }
.headache-test-grid > .headache-test:nth-child(2) > span{ background-image: url('assets/icons/common/exam-mri.png'); }
.headache-test-grid > .headache-test:nth-child(3) > span{ background-image: url('assets/icons/common/exam-blood.png'); }

/* ⑤ 治療について：カード左側にアイコンを追加 */
.headache-treatment-card{
  position: relative;
  padding-left: 56px;
}
.headache-treatment-card::before{
  content: "";
  position: absolute;
  left: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.headache-treatment > .headache-treatment-card:nth-child(1)::before{ background-image: url('assets/icons/common/medicine-pill.png'); }
.headache-treatment > .headache-treatment-card:nth-child(2)::before{ background-image: url('assets/icons/common/medicine-pill.png'); }
.headache-treatment > .headache-treatment-card:nth-child(4)::before{ background-image: url('assets/icons/common/lifestyle-guidance.png'); }

.headache-treatment-cgrp{
  position: relative;
  padding-left: 56px;
}
.headache-treatment-cgrp::before{
  content: "";
  position: absolute;
  left: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-image: url('assets/icons/common/medicine-injection.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ⑦ 緊急受診アラート：右上に警告アイコンを控えめに配置 */
.headache-emergency{
  position: relative;
  background-image: url('assets/icons/common/warning-alert.png');
  background-repeat: no-repeat;
  background-position: right 16px top 16px;
  background-size: 64px 64px;
}

/* ⑨-2 専門性バッジ＋施設写真ストリップ（PHP側でCTAバンド手前に挿入） */
.subpage-trust-strip{
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--gray-200);
}
.subpage-trust-badge{
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
}
.subpage-trust-badge img{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.subpage-trust-badge span{
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.subpage-photo-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
}
.subpage-photo-strip figure{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.subpage-photo-strip img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* レスポンシブ調整 */
@media (max-width: 767px){
  .headache-emergency{
    background-image: none;
  }
  .headache-symptom{
    padding-left: 68px;
    background-size: 40px 40px;
    background-position: 12px center;
  }
  .headache-number{
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  .subpage-photo-strip{
    grid-template-columns: 1fr 1fr;
  }
  .subpage-trust-strip{
    justify-content: flex-start;
  }
}

/* =========================================================================
   サブページ展開（Standard）：残り7ページへのブラッシュアップ適用
   各ページで本文中のクラス名（プレフィックス）が異なるため、ページ別に指定。
   共通の生成アイコン（common/配下）は構造が一致する箇所のみ再利用し、
   一致しない箇所は色調・余白・カード化などデザインシステムの適用に留める。
   ========================================================================= */

/* ---------------------------------------------------------
   パーキンソン病（postID 96 / .pd-*）
   --------------------------------------------------------- */
.pd-symptoms{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.pd-symptom{
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.5;
}
.pd-symptom::first-letter{
  color: var(--accent);
  font-weight: 700;
  font-size: 1.15em;
}
.pd-message{
  background: transparent;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
  text-align: center;
}
@media (max-width: 767px){
  .pd-symptoms{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   認知症（postID 106 / .dementia-*）
   --------------------------------------------------------- */
.dementia-symptoms{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.dementia-symptom{
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.5;
}
.dementia-symptom::first-letter{
  color: var(--accent);
  font-weight: 700;
  font-size: 1.15em;
}
.dementia-types{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.dementia-types > div{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
  font-weight: 700;
  color: var(--ink);
}
.dementia-care-grid{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: var(--sp-3) 0;
}
.dementia-care{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
}
.dementia-family{
  background: var(--gray-50);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  line-height: 1.8;
}
.dementia-message{
  background: transparent;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
  text-align: center;
}
@media (max-width: 767px){
  .dementia-symptoms, .dementia-types{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   脳卒中（postID 105 / .stroke-*）
   --------------------------------------------------------- */
.stroke-symptoms{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.stroke-symptom{
  position: relative;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 52px;
  line-height: 1.5;
}
.stroke-check{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.85em;
}
.stroke-care-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.stroke-care{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.stroke-care-number{
  display: block;
  width: 72px;
  height: 72px;
  min-width: 72px;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  margin-bottom: var(--sp-2);
}
.stroke-emergency{
  position: relative;
  background-color: var(--alert-bg);
  background-image: url('assets/icons/common/warning-alert.png');
  background-repeat: no-repeat;
  background-position: right 16px top 16px;
  background-size: 64px 64px;
  border: 1px solid var(--alert-border);
  border-left: 6px solid var(--alert);
  border-radius: 8px;
  padding: var(--sp-4);
  margin: var(--sp-6) 0;
}
.stroke-emergency-title{
  font-size: 1.3em;
  font-weight: 700;
  color: var(--alert);
  margin-bottom: var(--sp-2);
}
.stroke-tia{
  background: var(--gray-50);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
}
.stroke-consult{
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  line-height: 1.9;
}
.stroke-message{
  background: transparent;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
  text-align: center;
}
@media (max-width: 767px){
  .stroke-symptoms{ grid-template-columns: 1fr; }
  .stroke-emergency{ background-image: none; }
}

/* ---------------------------------------------------------
   めまい・しびれ（postID 103 / .dizziness-*）
   --------------------------------------------------------- */
.dizziness-checklist{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}
.dizziness-checklist > div{
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.5;
}
.dizziness-checklist > div::first-letter{
  color: var(--accent);
  font-weight: 700;
  font-size: 1.15em;
}
.dizziness-symptom-box{
  margin-bottom: var(--sp-4);
}
.dizziness-test-grid{
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
  align-items: stretch;
}
.dizziness-test{
  flex: 1;
  position: relative;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.dizziness-test-number{
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-size: 0;
  margin-bottom: var(--sp-2);
}
.dizziness-test-grid > .dizziness-test:nth-child(1) .dizziness-test-number{ background-image: url('assets/icons/common/exam-neuro.png'); }
.dizziness-test-grid > .dizziness-test:nth-child(2) .dizziness-test-number{ background-image: url('assets/icons/common/exam-blood.png'); }
.dizziness-test-grid > .dizziness-test:nth-child(3) .dizziness-test-number{ background-image: url('assets/icons/common/exam-mri.png'); }
.dizziness-causes{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.dizziness-cause-box{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
}
.dizziness-cause-box ul{
  margin: var(--sp-1) 0 0;
  padding-left: 1.3em;
}
@media (max-width: 767px){
  .dizziness-causes{ grid-template-columns: 1fr; }
}
.dizziness-emergency{
  position: relative;
  background-color: var(--alert-bg);
  background-image: url('assets/icons/common/warning-alert.png');
  background-repeat: no-repeat;
  background-position: right 16px top 16px;
  background-size: 64px 64px;
  border: 1px solid var(--alert-border);
  border-left: 6px solid var(--alert);
  border-radius: 8px;
  padding: var(--sp-4);
  margin: var(--sp-6) 0;
}
.dizziness-emergency-title{
  font-size: 1.3em;
  font-weight: 700;
  color: var(--alert);
  margin-bottom: var(--sp-2);
}
.dizziness-message{
  background: transparent;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
  text-align: center;
}
@media (max-width: 767px){
  .dizziness-checklist{ grid-template-columns: 1fr; }
  .dizziness-test-grid{ flex-direction: column; }
  .dizziness-emergency{ background-image: none; }
}

/* ---------------------------------------------------------
   脳神経内科（postID 102 / .neurology-*）
   --------------------------------------------------------- */
.neurology-main-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.neurology-main-card{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3);
  transition: border-color 200ms ease;
}
.neurology-main-card:hover{
  border-color: var(--accent);
}
.neurology-disease-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.neurology-disease{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.neurology-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--sp-1);
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 700;
  font-size: 0.9em;
  margin-bottom: var(--sp-2);
}
.neurology-message{
  background: transparent;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
  text-align: center;
}
@media (max-width: 767px){
  .neurology-main-grid, .neurology-disease-grid{ grid-template-columns: 1fr; }
  .neurology-main-card{ padding-left: 64px; }
  .neurology-main-card::before{ width: 40px; height: 40px; }
  .neurology-disease{ padding-right: 60px; }
  .neurology-disease::before{ width: 36px; height: 36px; }
}

/* ---------------------------------------------------------
   生活習慣病（postID 107 / .lifestyle-*）
   --------------------------------------------------------- */
.lifestyle-symptoms{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.lifestyle-symptoms > div{
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.5;
}
.lifestyle-symptoms > div::first-letter{
  color: var(--accent);
  font-weight: 700;
  font-size: 1.15em;
}
.lifestyle-test-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.lifestyle-test{
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  font-weight: 700;
  color: var(--ink);
}
.lifestyle-disease-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.lifestyle-disease{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.lifestyle-treatment{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.lifestyle-treatment > div{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.5;
}
.lifestyle-prevention{
  background: var(--gray-50);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  line-height: 1.8;
}
.lifestyle-message{
  background: transparent;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
  text-align: center;
}
@media (max-width: 767px){
  .lifestyle-symptoms, .lifestyle-disease-grid, .lifestyle-treatment{ grid-template-columns: 1fr; }
  .lifestyle-test-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------
   当日MRI検査（postID 104 / .mri-*）
   --------------------------------------------------------- */
.mri-lead-label{
  display: inline-block;
  background: var(--gray-100);
  color: var(--ink);
  font-size: 0.8em;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: var(--sp-2);
}
.mri-feature-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.mri-feature{
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.mri-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--sp-1);
  border-radius: 999px;
  background: var(--white);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 700;
  font-size: 0.9em;
  margin-bottom: var(--sp-2);
}
.mri-symptoms{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.mri-symptoms > div{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
}
.mri-note{
  font-size: var(--fs-note);
  color: var(--gray-600);
}
.mri-message{
  background: transparent;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
  text-align: center;
}
@media (max-width: 767px){
  .mri-feature-grid, .mri-symptoms{ grid-template-columns: 1fr; }
}

/* =========================================================================
   サブページ展開：生成アイコン70個の組み込み（2026-08-16）
   headache ページと同じ手法（background-image / ::before アイコンアクセント）で
   各ページの既存クラスに適用。本文HTMLは変更しない。
   ========================================================================= */

/* ---------------------------------------------------------
   パーキンソン病（.pd-*）：症状チェックリスト 10項目
   --------------------------------------------------------- */
.pd-symptom{
  position: relative;
  padding-left: 76px;
}
.pd-symptom::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.pd-symptoms > .pd-symptom:nth-child(1)::before{ background-image: url('assets/icons/pd/tremor.png'); }
.pd-symptoms > .pd-symptom:nth-child(2)::before{ background-image: url('assets/icons/pd/bradykinesia.png'); }
.pd-symptoms > .pd-symptom:nth-child(3)::before{ background-image: url('assets/icons/pd/small-steps.png'); }
.pd-symptoms > .pd-symptom:nth-child(4)::before{ background-image: url('assets/icons/pd/falling.png'); }
.pd-symptoms > .pd-symptom:nth-child(5)::before{ background-image: url('assets/icons/pd/mask-face.png'); }
.pd-symptoms > .pd-symptom:nth-child(6)::before{ background-image: url('assets/icons/pd/small-handwriting.png'); }
.pd-symptoms > .pd-symptom:nth-child(7)::before{ background-image: url('assets/icons/pd/soft-voice.png'); }
.pd-symptoms > .pd-symptom:nth-child(8)::before{ background-image: url('assets/icons/pd/buttoning.png'); }
.pd-symptoms > .pd-symptom:nth-child(9)::before{ background-image: url('assets/icons/pd/turning-in-bed.png'); }
.pd-symptoms > .pd-symptom:nth-child(10)::before{ background-image: url('assets/icons/pd/smell-loss.png'); }
@media (max-width: 767px){
  .pd-symptom{ padding-left: 64px; }
  .pd-symptom::before{ width: 40px; height: 40px; left: 12px; }
}

/* ---------------------------------------------------------
   認知症（.dementia-*）：症状7 / 種類5 / 検査3
   --------------------------------------------------------- */
.dementia-symptom{
  position: relative;
  padding-left: 76px;
}
.dementia-symptom::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.dementia-symptoms > .dementia-symptom:nth-child(1)::before{ background-image: url('assets/icons/dementia/repeat-question.png'); }
.dementia-symptoms > .dementia-symptom:nth-child(2)::before{ background-image: url('assets/icons/dementia/forgotten-schedule.png'); }
.dementia-symptoms > .dementia-symptom:nth-child(3)::before{ background-image: url('assets/icons/dementia/lost-items.png'); }
.dementia-symptoms > .dementia-symptom:nth-child(4)::before{ background-image: url('assets/icons/dementia/disorganized-shopping.png'); }
.dementia-symptoms > .dementia-symptom:nth-child(5)::before{ background-image: url('assets/icons/dementia/driving-anxiety.png'); }
.dementia-symptoms > .dementia-symptom:nth-child(6)::before{ background-image: url('assets/icons/dementia/irritability.png'); }
.dementia-symptoms > .dementia-symptom:nth-child(7)::before{ background-image: url('assets/icons/dementia/family-concern.png'); }

.dementia-types > div{
  position: relative;
  padding-left: 72px;
}
.dementia-types > div::before{
  content: "";
  position: absolute;
  left: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.dementia-types > div:nth-child(1)::before{ background-image: url('assets/icons/dementia/alzheimer.png'); }
.dementia-types > div:nth-child(2)::before{ background-image: url('assets/icons/dementia/lewy-body.png'); }
.dementia-types > div:nth-child(3)::before{ background-image: url('assets/icons/dementia/vascular.png'); }
.dementia-types > div:nth-child(4)::before{ background-image: url('assets/icons/dementia/frontotemporal.png'); }
.dementia-types > div:nth-child(5)::before{ background-image: url('assets/icons/dementia/nph.png'); }

.dementia-care{
  position: relative;
  padding-left: 64px;
}
.dementia-care::before{
  content: "";
  position: absolute;
  left: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.dementia-care-grid > .dementia-care:nth-child(1)::before{ background-image: url('assets/icons/common/exam-cognitive.png'); }
.dementia-care-grid > .dementia-care:nth-child(2)::before{ background-image: url('assets/icons/common/exam-blood.png'); }
.dementia-care-grid > .dementia-care:nth-child(3)::before{ background-image: url('assets/icons/common/exam-mri.png'); }
@media (max-width: 767px){
  .dementia-symptom{ padding-left: 64px; }
  .dementia-symptom::before{ width: 40px; height: 40px; left: 12px; }
  .dementia-types > div{ padding-left: 60px; }
  .dementia-types > div::before{ width: 40px; height: 40px; }
}

/* ---------------------------------------------------------
   脳卒中（.stroke-*）：症状7 / 再発予防等4
   --------------------------------------------------------- */
.stroke-symptom{
  position: relative;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 76px;
}
.stroke-symptom::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.stroke-check{
  left: auto;
  right: 8px;
  top: 8px;
  transform: none;
  width: 20px;
  height: 20px;
  font-size: 0.7em;
}
.stroke-symptoms > .stroke-symptom:nth-child(1)::before{ background-image: url('assets/icons/stroke/weakness.png'); }
.stroke-symptoms > .stroke-symptom:nth-child(2)::before{ background-image: url('assets/icons/stroke/numbness.png'); }
.stroke-symptoms > .stroke-symptom:nth-child(3)::before{ background-image: url('assets/icons/stroke/slurred-speech.png'); }
.stroke-symptoms > .stroke-symptom:nth-child(4)::before{ background-image: url('assets/icons/stroke/aphasia.png'); }
.stroke-symptoms > .stroke-symptom:nth-child(5)::before{ background-image: url('assets/icons/stroke/vision-loss.png'); }
.stroke-symptoms > .stroke-symptom:nth-child(6)::before{ background-image: url('assets/icons/stroke/sudden-imbalance.png'); }
.stroke-symptoms > .stroke-symptom:nth-child(7)::before{ background-image: url('assets/icons/stroke/thunderclap-headache.png'); }

.stroke-care h3{
  margin-top: 0;
}
.stroke-care-grid > .stroke-care:nth-child(1) .stroke-care-number{ background-image: url('assets/icons/stroke/recurrence-prevention.png'); }
.stroke-care-grid > .stroke-care:nth-child(2) .stroke-care-number{ background-image: url('assets/icons/common/exam-mri.png'); }
.stroke-care-grid > .stroke-care:nth-child(3) .stroke-care-number{ background-image: url('assets/icons/common/lifestyle-guidance.png'); }
.stroke-care-grid > .stroke-care:nth-child(4) .stroke-care-number{ background-image: url('assets/icons/common/calendar-followup.png'); }
@media (max-width: 767px){
  .stroke-symptom{ padding-left: 64px; }
  .stroke-symptom::before{ width: 40px; height: 40px; left: 12px; }
  .stroke-care-grid{ grid-template-columns: 1fr; }
  .stroke-care-number{ width: 56px; height: 56px; min-width: 56px; }
}

/* ---------------------------------------------------------
   めまい・しびれ（.dizziness-*）：めまい5 / しびれ6
   ※ .dizziness-symptom-box が2つ並ぶ構造のため、
     2番目のボックスは隣接セレクタで区別する
   --------------------------------------------------------- */
.dizziness-checklist > div{
  position: relative;
  padding-left: 76px;
}
.dizziness-checklist > div::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* めまいグループ（1つ目の .dizziness-symptom-box） */
.dizziness-symptom-box .dizziness-checklist > div:nth-child(1)::before{ background-image: url('assets/icons/dizziness/spinning.png'); }
.dizziness-symptom-box .dizziness-checklist > div:nth-child(2)::before{ background-image: url('assets/icons/dizziness/floating.png'); }
.dizziness-symptom-box .dizziness-checklist > div:nth-child(3)::before{ background-image: url('assets/icons/dizziness/orthostatic.png'); }
.dizziness-symptom-box .dizziness-checklist > div:nth-child(4)::before{ background-image: url('assets/icons/dizziness/unsteady-walk.png'); }
.dizziness-symptom-box .dizziness-checklist > div:nth-child(5)::before{ background-image: url('assets/icons/dizziness/dizziness-nausea.png'); }
/* しびれグループ（2つ目の .dizziness-symptom-box。隣接セレクタで上書き） */
.dizziness-symptom-box + .dizziness-symptom-box .dizziness-checklist > div:nth-child(1)::before{ background-image: url('assets/icons/dizziness/numb-limb.png'); }
.dizziness-symptom-box + .dizziness-symptom-box .dizziness-checklist > div:nth-child(2)::before{ background-image: url('assets/icons/dizziness/one-sided-numbness.png'); }
.dizziness-symptom-box + .dizziness-symptom-box .dizziness-checklist > div:nth-child(3)::before{ background-image: url('assets/icons/dizziness/dull-fingertip.png'); }
.dizziness-symptom-box + .dizziness-symptom-box .dizziness-checklist > div:nth-child(4)::before{ background-image: url('assets/icons/dizziness/sole-sensation.png'); }
.dizziness-symptom-box + .dizziness-symptom-box .dizziness-checklist > div:nth-child(5)::before{ background-image: url('assets/icons/dizziness/tingling.png'); }
.dizziness-symptom-box + .dizziness-symptom-box .dizziness-checklist > div:nth-child(6)::before{ background-image: url('assets/icons/dizziness/weak-grip.png'); }
@media (max-width: 767px){
  .dizziness-checklist > div{ padding-left: 64px; }
  .dizziness-checklist > div::before{ width: 40px; height: 40px; left: 12px; }
}

/* ---------------------------------------------------------
   脳神経内科（.neurology-*）：主要5カテゴリ / 診療疾患9
   --------------------------------------------------------- */
.neurology-main-card{
  position: relative;
  padding-left: 76px;
}
.neurology-main-card::before{
  content: "";
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.neurology-main-grid > .neurology-main-card:nth-child(1)::before{ background-image: url('assets/icons/headache/migraine.png'); }
.neurology-main-grid > .neurology-main-card:nth-child(2)::before{ background-image: url('assets/icons/pd/tremor.png'); }
.neurology-main-grid > .neurology-main-card:nth-child(3)::before{ background-image: url('assets/icons/dementia/repeat-question.png'); }
.neurology-main-grid > .neurology-main-card:nth-child(4)::before{ background-image: url('assets/icons/stroke/weakness.png'); }
.neurology-main-grid > .neurology-main-card:nth-child(5)::before{ background-image: url('assets/icons/dizziness/spinning.png'); }

.neurology-disease{
  position: relative;
  padding-right: 68px;
}
.neurology-disease::before{
  content: "";
  position: absolute;
  right: var(--sp-3);
  top: var(--sp-3);
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.neurology-disease-grid > .neurology-disease:nth-child(1)::before{ background-image: url('assets/icons/neurology/epilepsy.png'); }
.neurology-disease-grid > .neurology-disease:nth-child(2)::before{ background-image: url('assets/icons/neurology/tremor-movement.png'); }
.neurology-disease-grid > .neurology-disease:nth-child(3)::before{ background-image: url('assets/icons/neurology/facial-spasm.png'); }
.neurology-disease-grid > .neurology-disease:nth-child(4)::before{ background-image: url('assets/icons/neurology/nerve-muscle.png'); }
.neurology-disease-grid > .neurology-disease:nth-child(5)::before{ background-image: url('assets/icons/neurology/peripheral-nerve.png'); }
.neurology-disease-grid > .neurology-disease:nth-child(6)::before{ background-image: url('assets/icons/neurology/immune.png'); }
.neurology-disease-grid > .neurology-disease:nth-child(7)::before{ background-image: url('assets/icons/neurology/rare-disease.png'); }
.neurology-disease-grid > .neurology-disease:nth-child(8)::before{ background-image: url('assets/icons/neurology/facial-pain.png'); }
.neurology-disease-grid > .neurology-disease:nth-child(9)::before{ background-image: url('assets/icons/neurology/sleep-disorder.png'); }
@media (max-width: 767px){
  .neurology-main-card{ padding-left: 56px; }
  .neurology-main-card::before{ width: 30px; height: 30px; }
}

/* ---------------------------------------------------------
   生活習慣病（.lifestyle-*）：症状8 / 疾患4 / 検査6
   --------------------------------------------------------- */
.lifestyle-symptoms > div{
  position: relative;
  padding-left: 76px;
}
.lifestyle-symptoms > div::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.lifestyle-symptoms > div:nth-child(1)::before{ background-image: url('assets/icons/lifestyle/high-bp-check.png'); }
.lifestyle-symptoms > div:nth-child(2)::before{ background-image: url('assets/icons/lifestyle/lipid.png'); }
.lifestyle-symptoms > div:nth-child(3)::before{ background-image: url('assets/icons/lifestyle/glucose.png'); }
.lifestyle-symptoms > div:nth-child(4)::before{ background-image: url('assets/icons/lifestyle/family-history.png'); }
.lifestyle-symptoms > div:nth-child(5)::before{ background-image: url('assets/icons/lifestyle/snoring.png'); }
.lifestyle-symptoms > div:nth-child(6)::before{ background-image: url('assets/icons/lifestyle/sleep-apnea-symptom.png'); }
.lifestyle-symptoms > div:nth-child(7)::before{ background-image: url('assets/icons/lifestyle/daytime-sleepiness.png'); }
.lifestyle-symptoms > div:nth-child(8)::before{ background-image: url('assets/icons/lifestyle/morning-fatigue.png'); }

.lifestyle-disease{
  position: relative;
  padding-right: 64px;
}
.lifestyle-disease::before{
  content: "";
  position: absolute;
  right: var(--sp-3);
  top: var(--sp-3);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.lifestyle-disease-grid > .lifestyle-disease:nth-child(1)::before{ background-image: url('assets/icons/lifestyle/hypertension.png'); }
.lifestyle-disease-grid > .lifestyle-disease:nth-child(2)::before{ background-image: url('assets/icons/lifestyle/dyslipidemia.png'); }
.lifestyle-disease-grid > .lifestyle-disease:nth-child(3)::before{ background-image: url('assets/icons/lifestyle/diabetes.png'); }
.lifestyle-disease-grid > .lifestyle-disease:nth-child(4)::before{ background-image: url('assets/icons/lifestyle/sas.png'); }

.lifestyle-test{
  position: relative;
  padding-top: 68px;
}
.lifestyle-test::before{
  content: "";
  position: absolute;
  top: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.lifestyle-test-grid > .lifestyle-test:nth-child(1)::before{ background-image: url('assets/icons/common/exam-bp.png'); }
.lifestyle-test-grid > .lifestyle-test:nth-child(2)::before{ background-image: url('assets/icons/common/exam-blood.png'); }
.lifestyle-test-grid > .lifestyle-test:nth-child(3)::before{ background-image: url('assets/icons/common/exam-urine.png'); }
.lifestyle-test-grid > .lifestyle-test:nth-child(4)::before{ background-image: url('assets/icons/common/exam-mri.png'); }
.lifestyle-test-grid > .lifestyle-test:nth-child(5)::before{ background-image: url('assets/icons/common/exam-carotid.png'); }
.lifestyle-test-grid > .lifestyle-test:nth-child(6)::before{ background-image: url('assets/icons/common/exam-sleep.png'); }
@media (max-width: 767px){
  .lifestyle-symptoms > div{ padding-left: 64px; }
  .lifestyle-symptoms > div::before{ width: 40px; height: 40px; left: 12px; }
  .lifestyle-disease{ padding-right: 56px; }
  .lifestyle-disease::before{ width: 40px; height: 40px; }
  .lifestyle-test{ padding-top: 60px; }
  .lifestyle-test::before{ width: 36px; height: 36px; }
}

/* ---------------------------------------------------------
   当日MRI検査（.mri-*）：特徴3 / 症状6（他ページのアイコンを流用）
   --------------------------------------------------------- */
.mri-feature{
  position: relative;
  padding-right: 56px;
}
.mri-feature::before{
  content: "";
  position: absolute;
  right: var(--sp-3);
  top: var(--sp-3);
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.mri-feature-grid > .mri-feature:nth-child(1)::before{ background-image: url('assets/icons/mri/same-day.png'); }
.mri-feature-grid > .mri-feature:nth-child(2)::before{ background-image: url('assets/icons/mri/no-radiation.png'); }
.mri-feature-grid > .mri-feature:nth-child(3)::before{ background-image: url('assets/icons/mri/detailed-scan.png'); }

.mri-symptoms > div{
  position: relative;
  padding-top: 60px;
}
.mri-symptoms > div::before{
  content: "";
  position: absolute;
  top: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.mri-symptoms > div:nth-child(1)::before{ background-image: url('assets/icons/headache/symptom-checklist/b7-frequent.png'); }
.mri-symptoms > div:nth-child(2)::before{ background-image: url('assets/icons/dizziness/spinning.png'); }
.mri-symptoms > div:nth-child(3)::before{ background-image: url('assets/icons/dizziness/numb-limb.png'); }
.mri-symptoms > div:nth-child(4)::before{ background-image: url('assets/icons/stroke/weakness.png'); }
.mri-symptoms > div:nth-child(5)::before{ background-image: url('assets/icons/dementia/repeat-question.png'); }
.mri-symptoms > div:nth-child(6)::before{ background-image: url('assets/icons/pd/falling.png'); }
@media (max-width: 767px){
  .mri-feature{ padding-right: 48px; }
  .mri-feature::before{ width: 28px; height: 28px; }
}

/* ---------------------------------------------------------
   脳神経外科（postID 104 / .neurosurgery-*）
   2026-08-30: 「当日MRI検査」ページの内容を脳神経外科ページに差し替え
   （URL/スラッグ mri検査 は変更せず維持）
   --------------------------------------------------------- */
.neurosurgery-symptom-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.neurosurgery-symptom{
  position: relative;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3) 72px var(--sp-3) var(--sp-3);
}
.neurosurgery-symptom::before{
  content: "";
  position: absolute;
  right: var(--sp-3);
  top: var(--sp-3);
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.neurosurgery-symptom-grid > .neurosurgery-symptom:nth-child(1)::before{ background-image: url('assets/icons/neurosurgery/head-trauma.png'); }
.neurosurgery-symptom-grid > .neurosurgery-symptom:nth-child(2)::before{ background-image: url('assets/icons/neurosurgery/subdural-hematoma.png'); }
.neurosurgery-symptom-grid > .neurosurgery-symptom:nth-child(3)::before{ background-image: url('assets/icons/stroke/weakness.png'); }
.neurosurgery-symptom-grid > .neurosurgery-symptom:nth-child(4)::before{ background-image: url('assets/icons/headache/cluster.png'); }
.neurosurgery-symptom-grid > .neurosurgery-symptom:nth-child(5)::before{ background-image: url('assets/icons/dizziness/spinning.png'); }
.neurosurgery-symptom h3{
  border-left: none;
  padding-left: 0;
  margin-top: 0;
}
.neurosurgery-more{
  display: inline-block;
  margin-top: var(--sp-1);
  font-weight: 700;
  color: var(--accent);
}

.neurosurgery-other-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.neurosurgery-other{
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
}
.neurosurgery-other-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--sp-1);
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 700;
  font-size: 0.9em;
  margin-bottom: var(--sp-1);
}
.neurosurgery-other h4{
  margin: 2px 0 6px;
  font-size: 1em;
  color: var(--ink);
}
.neurosurgery-other p{
  margin: 0;
  font-size: var(--fs-note);
  color: var(--gray-600);
}

.neurosurgery-mri-box{
  position: relative;
  margin: var(--sp-3) 0 var(--sp-4);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
}
.neurosurgery-mri-box > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.neurosurgery-mri-box .wash{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,32,18,.34) 0%, rgba(20,32,18,0) 55%);
}
.neurosurgery-mri-box .text-panel{
  position: relative; z-index: 2;
  min-height: 320px;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-3);
}
.neurosurgery-mri-box .tagline{
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: var(--sp-1);
}
.neurosurgery-mri-box p{
  margin: 0;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 2;
  color: var(--ink);
}
.neurosurgery-mri-box p .hl{
  background: #fff;
  padding: 3px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.neurosurgery-message{
  background: transparent;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--sp-4) 0;
  margin-top: var(--sp-6);
}
@media (max-width: 767px){
  .neurosurgery-symptom-grid, .neurosurgery-other-grid{ grid-template-columns: 1fr; }
  .neurosurgery-symptom{ padding-right: 64px; }
  .neurosurgery-symptom::before{ width: 40px; height: 40px; }
}
