/**
 * v1 旧デザイン（l-pageHeader + /css/styles.css）向けブリッジ。
 * mypage レイアウト等、v2 style.css を読むページ向け。
 * v2 の `.l-page { float: left; width: 755px }` を無効化し、v1 中央寄せを復元する。
 *
 * 公開 v1 ページ（el-flow / tos 等）は definePageMeta v1LegacyCssOnly で v2 style を読まないため本ファイルは不要。
 * CakephpLayoutSections（Theory of Change 以降）の full-width + clear は v2 併用時の保険として残す。
 *
 * ---
 * v2 汎用見出しが v1 クラスより specificity で勝つ問題（M-FT-02 confirm 等）:
 * - `h2:not(.top)` → font-size:28px / letter-spacing:.1em / 中央寄せ / 上下 border
 *   が `.c-sectionTitle`（1.3125rem・左寄せ・下線 only）を上書き → 確認メッセージが肥大・折り返し
 * - `h3:not(.top)::before`（オレンジ縦棒）が `.p-programDetail__subTitle--dot:before`（黒ドット）を上書き
 * - `body { background:#f0f0f0 }` が v1（白）を上書き
 * 値は legacy `/css/styles.css` の該当ルールに合わせる（独自オーバーライドを増やさない）。
 */

/* v1 CTP: ページ背景は白（v2 / tailwind の #f0f0f0 を打ち消し） */
body:has(.l-pageHeader) {
  background: #fff;
  background-color: #fff;
}

/*
 * v2 の `*,::before,::after { letter-spacing:.06em }` は v1 styles.css に無い。
 * ヘッダ／フッタ（v2 前提）は触らず、ページ本体だけ通常字間に戻す。
 */
body:has(.l-pageHeader) .l-pageHeader,
body:has(.l-pageHeader) .l-pageHeader *,
body:has(.l-pageHeader) .l-page,
body:has(.l-pageHeader) .l-page *,
body:has(.l-pageHeader) .back-result-buttons,
body:has(.l-pageHeader) .back-result-buttons * {
  letter-spacing: normal;
}

/*
 * 確認メッセージ等: v2 `h2:not(.top)` より強く、v1 `.c-sectionTitle` 相当を復元。
 * （styles.css の `.c-sectionTitle` 単体では specificity 不足）
 */
body:has(.l-pageHeader) h2.c-sectionTitle {
  position: relative;
  margin-bottom: 20px;
  padding: 0 0 10px;
  color: #292f73;
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1.5;
  font-family: inherit;
  text-align: left;
  letter-spacing: normal;
  border-top: none;
  border-bottom: none;
}

/* 「お申込内容」等: v2 `h3:not(.top)`（26px Sawarabi / padding-left:20px）を打ち消し */
body:has(.l-pageHeader) h3.p-programDetail__subTitle {
  margin-bottom: 15px;
  padding-left: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  font-family: inherit;
  letter-spacing: normal;
}

body:has(.l-pageHeader) h3.p-programDetail__subTitle--dot {
  position: relative;
  padding-left: 15px;
}

/* 黒ドット（v1 `--dot:before`）。v2 オレンジ縦棒より specificity を上げて復元 */
body:has(.l-pageHeader) h3.p-programDetail__subTitle--dot::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 5px;
  width: 5px;
  height: 5px;
  border-radius: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  background: #333;
  background-color: #333;
  content: "";
}

body:has(.l-pageHeader) .l-page {
  float: none;
  width: auto;
  margin: 20px auto 0;
}

/* v1 p-column sidebar: v2 .l-side（float:right;width:350px）を無効化 */
body:has(.l-pageHeader) .l-page__side .l-side {
  float: none;
  width: auto;
}

/* v1 p-column sidebar: v2 .col-tag-list.-wide の幅溢れ（calc(100% + 25px)）を抑止 */
body:has(.l-pageHeader) .l-page__side .col-tag-list,
body:has(.l-pageHeader) .l-page__side .col-tag-list.-wide {
  width: 100%;
  margin-right: 0;
  margin-bottom: 0;
}

body:has(.l-pageHeader) .l-page__side .col-tag-list.-wide > li {
  margin-right: 0;
}

body:has(.l-pageHeader) .l-page__side .p-columnCategory {
  width: 100%;
}

body:has(.l-pageHeader) .l-movie,
body:has(.l-pageHeader) .l-related,
body:has(.l-pageHeader) .l-pageNav,
body:has(.l-pageHeader) .l-banner {
  clear: both;
  width: 100%;
}

@media only screen and (max-width: 768px) {
  body:has(.l-pageHeader) .l-related__content {
    flex-direction: column;
    align-items: center;
  }

  body:has(.l-pageHeader) .l-related__column--media,
  body:has(.l-pageHeader) .l-related__column--fb {
    width: 100%;
    max-width: 720px;
  }
}