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

   ※ 経緯：ここに定義するコンポーネント（産後ケアを後回しにしやすい理由
     カード・骨盤タイプグリッド・5つのこと・オーダーメイドボックス等）は、
     元々 gen-renewal.css 内「施術ページ共通テーマ（.gen-page--treatment）」
     「施術ページ専用コンポーネント」の2セクションに直接書かれていましたが、
     その後に追記された頭痛・鍼・姿勢矯正ページ用の同名クラス
     （.gen-worry-card / .gen-effects / .gen-ordermade-box / .gen-reason-card等）
     によって、ファイル内の後方の定義が優先されてしまい、本来ピンク×オレンジ
     になるはずの配色が青色で表示されてしまっていた（肩こり/腰痛ページの
     .gen-3items 事故、姿勢改善ページの .gen-cause-item 事故と同一パターンの
     クラス名重複）。該当2セクションはgen-renewal.cssから削除し、ここに
     .gen-page--treatment スコープ＋!important で確実にピンク×オレンジ
     テーマになるよう再定義して移設した。
   ============================================================ */

/* ============================================================
   見出し(h2/h3)テーマ干渉リセット（産後骨盤矯正ページ専用）
   ※ genrenewal.css側の見出しクラスに !important が無く、
     WPテーマ(amaterasu_202407)の既定h2/h3装飾(色・下線・矢印)が
     優先されてしまうための個別対策。genrenewal.css本体（全ページ共通）
     は変更せず、本ページ（.gen-page--treatment）内だけに適用されるよう限定。
     （他ページと同一の原因・同一の対策。ただし本ページはピンク×オレンジ
     テーマのため、色は var(--gen-accent) 系で指定しテーマ非依存にしている）
   ============================================================ */
.gen-page--treatment h2,
.gen-page--treatment h3 {
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.gen-page--treatment h2::before, .gen-page--treatment h2::after,
.gen-page--treatment h3::before, .gen-page--treatment h3::after {
  content: none !important;
  display: none !important;
  border: none !important;
}
.gen-page--treatment 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-accent-grad) !important;
  border-image-slice: 1 !important;
  color: var(--gen-text) !important;
}
.gen-page--treatment h2.gen-title span { color: var(--gen-accent) !important; }
@media screen and (max-width: 768px) {
  .gen-page--treatment h2.gen-title { font-size: 18px !important; }
}
@media screen and (min-width: 769px) {
  .gen-page--treatment h2.gen-title { font-size: 24px !important; }
}

/* ============================================================
   施術ページ共通テーマ（.gen-page--treatment）
   産後骨盤矯正ページのラッパーに付与する変数
   （元 gen-renewal.css 971〜996行目より移設）
   ============================================================ */
.gen-page--treatment {
  /* テーマカラー（産後骨盤矯正＝ピンク×オレンジ） */
  --gen-accent:           #E8607A;
  --gen-accent-mid:       #f0a060;
  --gen-accent-grad:      linear-gradient(90deg, #ffdfc0 0%, #E8607A 100%);
  --gen-accent-light:     #fce8ed;
  --gen-accent-pale:      #fff0e4;
  --gen-section-bg:       #fff8f2;
  --gen-section-bg-deep:  #fff0e4;
  --gen-td-our-bg:        #fce8ed;
  --gen-card-border:      #f0d8c8;
  --gen-card-border-mid:  #f0a060;
  /* テキスト */
  --gen-text:             #3d2b1f;
  --gen-text-sub:         #7a5c48;
  --gen-border:           #f0d8c8;
  /* 背景 */
  --gen-bg-light:         #fff8f2;
  --gen-yellow-bg:        #fff0e4;
  --gen-yellow-bdr:       #f0a060;
}

/* 施術ページ：セクション背景バリアント */
.gen-page--treatment .gen-section--light { background: var(--gen-section-bg) !important; }
.gen-page--treatment .gen-section--deep  { background: var(--gen-section-bg-deep) !important; }

/* 施術ページ：ラベル（gen-label-blue → アクセントカラーに） */
.gen-page--treatment .gen-label-blue { color: var(--gen-accent) !important; }

/* 施術ページ：比較表 */
.gen-page--treatment .gen-table th            { background: var(--gen-accent-mid) !important; color: #fff !important; border-color: var(--gen-card-border) !important; }
.gen-page--treatment .gen-table th.gen-th-our { background: var(--gen-accent) !important; }
.gen-page--treatment .gen-table td            { border-color: var(--gen-card-border) !important; }
.gen-page--treatment .gen-table td.gen-td-label { background: #fdf0e8 !important; }
.gen-page--treatment .gen-table td.gen-td-our   { background: var(--gen-td-our-bg) !important; }
.gen-page--treatment .gen-mark-good   { color: var(--gen-accent) !important; }
.gen-page--treatment .gen-mark-circle { color: var(--gen-accent-mid) !important; }

/* 施術ページ：FAQ */
.gen-page--treatment .gen-faq-item   { border-color: var(--gen-card-border) !important; border-radius: 8px !important; }
.gen-page--treatment .gen-faq-q      { border-left-color: var(--gen-accent) !important; }
.gen-page--treatment .gen-faq-label  { background: var(--gen-accent) !important; }
.gen-page--treatment .gen-faq-a      { background: var(--gen-section-bg) !important; }
.gen-page--treatment .gen-faq-more-link { border-color: var(--gen-accent) !important; color: var(--gen-accent) !important; }
.gen-page--treatment .gen-faq-more-link:hover { background: var(--gen-accent) !important; color: #fff !important; }

/* 施術ページ：まとめボックス */
.gen-page--treatment .gen-conclusion        { border-color: var(--gen-accent) !important; background: var(--gen-accent-light) !important; border-radius: 12px !important; }
.gen-page--treatment .gen-conclusion__main  { color: var(--gen-accent) !important; }
.gen-page--treatment .gen-conclusion__main span { color: var(--gen-accent) !important; }

/* ============================================================
   産後骨盤矯正ページ専用コンポーネント
   （元 gen-renewal.css 1064〜1495行目より移設、
     .gen-page--treatment スコープ＋!important で確実に
     ピンク×オレンジテーマになるよう再定義）
   ============================================================ */

/* --- 院長挨拶ボックス --- */
.gen-page--treatment .gen-greeting {
  background: #fff !important;
  border: 2px solid var(--gen-card-border-mid) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  margin-bottom: 20px !important;
}
.gen-page--treatment .gen-greeting-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;
  color: var(--gen-text) !important;
  margin-bottom: 16px !important;
  line-height: 1.6 !important;
}
.gen-page--treatment .gen-greeting-title span { color: var(--gen-accent) !important; }
.gen-page--treatment .gen-greeting-body {
  font-size: 15px !important;
  line-height: 2 !important;
  color: var(--gen-text) !important;
  margin-bottom: 16px !important;
}
.gen-page--treatment .gen-greeting-msg {
  background: var(--gen-accent-light) !important;
  border-left: 4px solid var(--gen-accent) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: var(--gen-accent) !important;
  margin-bottom: 16px !important;
  line-height: 1.7 !important;
}
.gen-page--treatment .gen-greeting-footer {
  text-align: center !important;
  font-size: 15px !important;
  font-weight: bold !important;
  color: var(--gen-text) !important;
  line-height: 1.8 !important;
}

/* --- 産後の困りごと（悩みカード4分類グリッド）---
   ※ .gen-worry-grid / .gen-worry-card は姿勢矯正・頭痛ページでも
     使われている共有クラスで、色がハードコードの青になっているため
     （テーマ変数を使っていない元々の不具合）、本ページ用に
     アクセントカラーへ上書きする。レイアウトはモバイル特化のため
     モバイル1カラム／PC(769px以上)2カラムに変更。 */
.gen-page--treatment .gen-worry-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
.gen-page--treatment .gen-worry-card {
  background: #fff !important;
  border: 2px solid var(--gen-accent-mid) !important;
  border-radius: 10px !important;
  padding: 16px 14px !important;
}
.gen-page--treatment .gen-worry-card-title {
  font-size: 15px !important;
  font-weight: bold !important;
  color: var(--gen-accent) !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--gen-card-border) !important;
}
.gen-page--treatment .gen-worry-card-list li {
  font-size: 13px !important;
  color: var(--gen-text) !important;
}
.gen-page--treatment .gen-worry-card-list li::before { color: var(--gen-accent-mid) !important; }
@media screen and (min-width: 769px) {
  .gen-page--treatment .gen-worry-grid { grid-template-columns: 1fr 1fr !important; }
}

/* --- 理由カード（産後の身体が戻りにくい3つの理由）--- */
.gen-page--treatment .gen-reason-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}
.gen-page--treatment .gen-reason-card {
  background: #fff !important;
  border: 2px solid var(--gen-card-border-mid) !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
}
.gen-page--treatment .gen-reason-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  background: none !important;
  padding: 0 !important;
}
.gen-page--treatment .gen-reason-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--gen-accent-mid) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.gen-page--treatment .gen-reason-card-title {
  font-size: 17px !important;
  font-weight: bold !important;
  color: var(--gen-text) !important;
}
.gen-page--treatment .gen-reason-card-body {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: var(--gen-text) !important;
}
.gen-page--treatment .gen-reason-card img {
  border-radius: 8px !important;
  margin: 10px 0 !important;
}

/* --- 放置リスク・チェックリスト（産後ケアを後回しにしやすい理由）--- */
.gen-page--treatment .gen-hesitate-list {
  background: #fff !important;
  border: 2px solid var(--gen-card-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}
.gen-page--treatment .gen-hesitate-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--gen-card-border) !important;
  font-size: 15px !important;
  color: var(--gen-text) !important;
}
.gen-page--treatment .gen-hesitate-item:last-child { border-bottom: none !important; }
.gen-page--treatment .gen-hesitate-icon {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--gen-accent) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.gen-page--treatment .gen-hesitate-icon::after {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--gen-accent) !important;
  border-radius: 50% !important;
}

/* --- リスクバブルグリッド（そのままにすると出やすい負担）---
   ※ モバイル特化のため、モバイルは2カラム（大きく見やすい円）、
     PC(769px以上)は3カラムに変更。 */
.gen-page--treatment .gen-risk-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 16px 0 !important;
}
.gen-page--treatment .gen-risk-bubble {
  background: var(--gen-accent-mid) !important;
  color: #fff !important;
  border-radius: 50% !important;
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
  padding: 8px !important;
}
@media screen and (min-width: 769px) {
  .gen-page--treatment .gen-risk-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* --- 骨盤タイプグリッド（産後に起こりやすい骨盤と姿勢の変化）---
   ※ モバイル特化のため、モバイルは1カラム（読みやすさ優先）、
     PC(769px以上)は2カラムに変更。 */
.gen-page--treatment .gen-pelvis-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.gen-page--treatment .gen-pelvis-card {
  background: #fff !important;
  border: 2px solid var(--gen-card-border) !important;
  border-radius: 10px !important;
  padding: 14px 12px !important;
}
.gen-page--treatment .gen-pelvis-type {
  display: inline-block !important;
  background: var(--gen-accent-light) !important;
  color: var(--gen-accent) !important;
  font-size: 13px !important;
  font-weight: bold !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  margin-bottom: 8px !important;
}
.gen-page--treatment .gen-pelvis-symptoms {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--gen-text) !important;
}
@media screen and (min-width: 769px) {
  .gen-page--treatment .gen-pelvis-grid { grid-template-columns: 1fr 1fr !important; }
}

/* --- オーダーメイドボックス --- */
.gen-page--treatment .gen-ordermade-box {
  background: #fff !important;
  border: 2px solid var(--gen-accent-mid) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  margin-bottom: 20px !important;
}
.gen-page--treatment .gen-ordermade-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  text-align: center !important;
  color: var(--gen-text) !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}
.gen-page--treatment .gen-ordermade-title span { color: var(--gen-accent) !important; }
.gen-page--treatment .gen-ordermade-reasons {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 16px 0 !important;
}
.gen-page--treatment .gen-ordermade-reason {
  background: var(--gen-section-bg-deep) !important;
  border: 1px dashed var(--gen-accent-mid) !important;
  border-radius: 10px !important;
  padding: 12px 10px !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--gen-text) !important;
}
.gen-page--treatment .gen-ordermade-reason strong {
  display: block !important;
  color: var(--gen-accent-mid) !important;
  font-size: 14px !important;
  margin-bottom: 4px !important;
}
@media screen and (min-width: 769px) {
  .gen-page--treatment .gen-ordermade-reasons { flex-direction: row !important; }
  .gen-page--treatment .gen-ordermade-reason { flex: 1 !important; }
}

/* --- 効果リスト（産後骨盤矯正で大切にしている5つのこと）--- */
.gen-page--treatment .gen-effects {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
.gen-page--treatment .gen-effect-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: #fff !important;
  border: 1px solid var(--gen-card-border) !important;
  border-radius: 10px !important;
  padding: 14px !important;
}
.gen-page--treatment .gen-effect-num {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--gen-accent-mid) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  min-width: 36px !important;
}
.gen-page--treatment .gen-effect-title {
  font-size: 16px !important;
  font-weight: bold !important;
  color: var(--gen-text) !important;
  margin-bottom: 4px !important;
}
.gen-page--treatment .gen-effect-body {
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: var(--gen-text-sub) !important;
}

/* --- 結論ボックス（施術ページ版・ピンク枠強調）--- */
.gen-page--treatment .gen-conclusion--treatment {
  background: var(--gen-accent-light) !important;
  border: 2px solid var(--gen-accent) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  text-align: center !important;
  margin: 20px 0 !important;
}
.gen-page--treatment .gen-conclusion--treatment .gen-conclusion__lead {
  font-size: 13px !important;
  color: var(--gen-accent) !important;
  font-weight: bold !important;
  margin-bottom: 6px !important;
}
.gen-page--treatment .gen-conclusion--treatment .gen-conclusion__main {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--gen-text) !important;
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
}
.gen-page--treatment .gen-conclusion--treatment .gen-conclusion__main span { color: var(--gen-accent) !important; }
.gen-page--treatment .gen-conclusion--treatment .gen-conclusion__body {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: var(--gen-text) !important;
}

/* --- テキスト強調 --- */
.gen-page--treatment .gen-em { color: var(--gen-accent) !important; font-weight: bold !important; }

/* --- Before/After写真の枠線もアクセントカラーに --- */
.gen-page--treatment .gen-img[style*="border"] { border-color: var(--gen-card-border) !important; }