/* ============================================================
   gen-sisei.css
   整骨院元 光の森院「姿勢改善・猫背矯正」症状ページ 専用CSS
   ※ genrenewal.css（全症状ページ共通）は変更せず、
      本ページ（姿勢改善_光の森.html）にだけ影響するよう
      すべて .gen-page 配下のセレクタに限定しています。
   ※ 読み込みは header2.php 側で対応済みです（腰痛ページの
     gen-youtsu.css、四十肩・五十肩ページの yonjukata.css などと
     同じパターンで、テーマフォルダ配下の "css" フォルダに設置する想定）。
     アップロード先： wp-content/themes/amaterasu/css/gen-sisei.css
     （header2.phpの <link href="...template_url.../css/gen-sisei.css"> に対応）
   ============================================================ */

/* ============================================================
   見出し(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,
.gen-page h3.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,
.gen-page h3.gen-title span { color: var(--gen-blue) !important; }

.gen-page h3.gen-merit-card-title {
  font-size: 18px !important;
  font-weight: bold !important;
  color: var(--gen-text) !important;
  margin: 0 !important;
}
.gen-page h3.gen-merit-card-title span { color: var(--gen-blue) !important; }

@media screen and (max-width: 768px) {
  .gen-page h2.gen-title,
  .gen-page h3.gen-title { font-size: 18px !important; }
}
@media screen and (min-width: 769px) {
  .gen-page h2.gen-title,
  .gen-page h3.gen-title { font-size: 24px !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;
}

/* ============================================================
   「7つの生活背景」カード 色崩れ修正（姿勢改善_光の森ページ専用）
   ※ genrenewal.cssには .gen-cause-item が2箇所で定義されており、
     本来は姿勢矯正ページ専用の「白カード＋濃色テキスト」デザイン
     （行1706〜）のはずが、後方にある頭痛ページ専用の「紺色背景＋
     白文字」デザイン（行2326〜、部位グリッド用の小さいセル）が
     同じクラス名のため上書きしてしまい、紺色の背景に濃い色文字が
     乗って非常に読みにくい状態になっていた（肩こり/腰痛ページの
     .gen-3items 事故と同一パターンのクラス名重複）。
     ここで元の白カードデザインを明示的に復元する。
   ============================================================ */
.gen-page .gen-cause-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: #fff !important;
  border: 1px solid var(--gen-border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  text-align: left !important;
  font-size: inherit !important;
  font-weight: normal !important;
  line-height: normal !important;
  color: var(--gen-text) !important;
}
.gen-page .gen-cause-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: var(--gen-blue-mid) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: bold !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.gen-page .gen-cause-body { flex: 1 !important; }
.gen-page .gen-cause-title {
  font-size: 15px !important;
  font-weight: bold !important;
  color: var(--gen-text) !important;
  margin-bottom: 2px !important;
}
.gen-page .gen-cause-note {
  font-size: 13px !important;
  color: var(--gen-text-sub) !important;
  line-height: 1.6 !important;
}