/* ============================================================
   gen-hari.css
   整骨院元 光の森院「鍼施術」症状ページ 専用CSS
   ※ genrenewal.css（全症状ページ共通）は変更せず、
      本ページ（鍼_光の森.html）にだけ影響するよう
      すべて .gen-page 配下のセレクタに限定しています。
   ※ 読み込みは header2.php 側で対応します（腰痛ページの
     gen-youtsu.css、姿勢改善ページの gen-sisei.css などと
     同じパターンで、テーマフォルダ配下の "css" フォルダに設置する想定）。
     アップロード先： wp-content/themes/amaterasu/css/gen-hari.css
     （header2.phpの <link href="...template_url.../css/gen-hari.css"> に対応）
   ※ このページで使うコンポーネント（gen-effects, gen-recommend-grid,
     gen-depth-box, gen-case-grid, gen-reason-summary など）自体は
     genrenewal.css内の「鍼ページ追加CSS」セクションに既に定義済みのため
     ここでは変更していません。今回追加するのは、
     ①今回新規に挿入した写真（5つの役割の上部写真・症状カード写真・
     ビフォーアフター・STEP写真）の表示CSSと、
     ②見出し(h2/h3)のテーマ干渉リセットです。
   ============================================================ */

/* ============================================================
   見出し(h2/h3)テーマ干渉リセット（鍼_光の森ページ専用）
   ※ genrenewal.css側の見出しクラスに !important が無く、
     WPテーマ(amaterasu_202407)の既定h2/h3装飾(色・下線・矢印)が
     優先されてしまうための個別対策。genrenewal.css本体（全ページ共通）
     は変更せず、本ページ内だけに適用されるよう .gen-page 配下に限定。
     （肩こり・腰痛・姿勢改善の各ページと同一の原因・同一の対策）
   ============================================================ */
.gen-page h2,
.gen-page h3 {
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.gen-page h2::before, .gen-page h2::after,
.gen-page h3::before, .gen-page h3::after {
  content: none !important;
  display: none !important;
  border: none !important;
}

.gen-page h2.gen-title {
  width: fit-content !important;
  max-width: 100% !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  margin: 0 auto 24px !important;
  padding-bottom: 6px !important;
  text-align: center !important;
  border-bottom: 4px solid transparent !important;
  border-image-source: var(--gen-blue-grad) !important;
  border-image-slice: 1 !important;
  color: var(--gen-text) !important;
}
.gen-page h2.gen-title span { color: var(--gen-blue) !important; }

.gen-page h3.gen-section-title {
  font-size: 20px !important;
  font-weight: bold !important;
  color: var(--gen-text) !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}

@media screen and (max-width: 768px) {
  .gen-page h2.gen-title { font-size: 18px !important; }
  .gen-page h3.gen-section-title { font-size: 17px !important; }
}
@media screen and (min-width: 769px) {
  .gen-page h2.gen-title { font-size: 24px !important; }
}

/* ============================================================
   「5つの役割」上部写真・「相談しやすい症状」カード写真
   （鍼_光の森ページ専用・新規追加分）
   モバイルでもしっかり大きく見えるよう、幅いっぱい・
   アスペクト比固定で配置する。
   ============================================================ */
.gen-page .gen-case-card-photo {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* ============================================================
   施術の流れ STEP 写真（鍼_光の森ページ専用）
   モバイルでも見やすいよう、各STEPの本文内に
   幅いっぱい・アスペクト比固定で写真を配置する。
   ============================================================ */
.gen-page .gen-step-photo {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  display: block !important;
  margin: 8px 0 10px !important;
}

/* ============================================================
   モバイル特化の見やすさ調整（鍼_光の森ページ専用）
   ============================================================ */
@media screen and (max-width: 768px) {
  /* カード・リスト系コンポーネントの余白・文字サイズをモバイルで見やすく調整 */
  .gen-page .gen-effect-item,
  .gen-page .gen-recommend-item,
  .gen-page .gen-case-card-body,
  .gen-page .gen-reason-summary-item {
    font-size: 14px !important;
  }
  .gen-page .gen-effect-body,
  .gen-page .gen-case-card-body {
    line-height: 1.8 !important;
  }
  /* 症状カードは写真が主役になるよう見出しを少し大きく */
  .gen-page .gen-case-card-header {
    font-size: 15px !important;
    padding: 10px 14px !important;
  }
}

/* PC(769px以上)では「相談しやすい症状」カードを2列で見やすく配置 */
@media screen and (min-width: 769px) {
  .gen-page .gen-case-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}