/* ============================================================
   gen-youtsu.css
   整骨院元 光の森院「腰痛」症状ページ 専用CSS
   ※ genrenewal.css（全症状ページ共通）は変更せず、
      本ページ（腰痛_光の森.html）にだけ影響するよう
      すべて .gen-page 配下のセレクタに限定しています。
   ※ 読み込みは header2.php 側で対応済みです（四十肩・五十肩ページの
     yonjukata.css、膝の痛みページの hiza.css などと同じパターンで、
     テーマフォルダ配下の "css" フォルダに設置する想定）。
     アップロード先： wp-content/themes/amaterasu/css/gen-youtsu.css
     （header2.phpの <link href="...template_url.../css/gen-youtsu.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 {
  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 h2.gen-heading-main {
  display: block !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 10px 0 8px !important;
  border-bottom: 4px solid transparent !important;
  border-image-source: var(--gen-blue-grad) !important;
  border-image-slice: 1 !important;
  letter-spacing: 0.04em !important;
  color: var(--gen-text) !important;
}

.gen-page h2.gen-naze-title {
  font-size: 20px !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  color: var(--gen-text) !important;
  margin: 0 !important;
}

/* gen-section-h3 は genrenewal.css に定義が無く未装飾だったため新規デザイン */
.gen-page h3.gen-section-h3 {
  font-size: 18px !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center !important;
  color: var(--gen-text) !important;
  margin: 28px 0 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--gen-blue-mid) !important;
}

.gen-page h3.gen-flow-title {
  font-size: 16px !important;
  font-weight: bold !important;
  margin: 0 0 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--gen-blue-mid) !important;
  color: var(--gen-text) !important;
}
.gen-page h3.gen-flow-title span { color: var(--gen-blue) !important; }

.gen-page h3.gen-step-title {
  font-size: 16px !important;
  font-weight: bold !important;
  margin: 0 0 4px !important;
  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 { font-size: 18px !important; }
  .gen-page h2.gen-heading-main { font-size: 18px !important; }
  .gen-page h2.gen-naze-title { font-size: 17px !important; }
}
@media screen and (min-width: 769px) {
  .gen-page h2.gen-title { font-size: 24px !important; }
  .gen-page h2.gen-heading-main { font-size: 24px !important; }
  .gen-page h2.gen-naze-title { font-size: 22px !important; }
  .gen-page h3.gen-step-title { font-size: 17px !important; }
}

/* ============================================================
   3つのボックス 写真対応（腰痛_光の森ページ専用）
   ※ genrenewal.cssの「寝違えページ：3つのメリット 1カラム修正」が
     .gen-page全体に適用されてしまっており、本来3カラムのはずの
     このブロックも常に1カラム表示になるため、本ページ内で明示的に
     上書き（肩こり_光の森ページと同一の原因・同一の対策）。
   モバイルは写真を大きく見せるため1カラム、
   PC(769px以上)では3カラムに並べる。
   ============================================================ */
.gen-page .gen-3items {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  margin-top: 20px;
}
.gen-page .gen-3item {
  flex: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.gen-page .gen-3item-photo {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
  margin: 0 0 10px !important;
}
@media screen and (min-width: 769px) {
  .gen-page .gen-3items {
    flex-direction: row !important;
    gap: 16px !important;
  }
  .gen-page .gen-3item {
    flex: 1 !important;
    width: auto !important;
  }
  .gen-page .gen-3item-photo {
    height: 130px !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;
}