/* 全LP共通のヘッダー/フッター（LP1の site-header / site-footer がベース）。
   各LPの styles.css と衝突しないよう shared- プレフィックスで名前空間を分けている。
   （LP5 はフッターを独自デザインのまま残すため、.site-footer を使うと衝突する） */

html {
  scrollbar-gutter: stable;
}

/* symbol の定義置き場。描画領域は持たせない */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* フォームへ飛ぶCTA。テキスト選択やダブルタップズームにタップを奪われず、
   1回のタップで即スクロールが始まるようにする。 */
a[href="#form"] {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* フォームWC（port-form-cpa）は読み込まれるまで高さ0で、以降のセクションが丸ごと
   押し下げられる（対策前の実測CLS: lp-4のSP 390で0.37、PC 1440で0.09）。
   描画されるまで高さを予約して打ち消す。全LPが
   .form-box > .form-box_wc > port-form-cpa の構造なのでここに集約する。

   予約を外す合図に :defined は使えない。WCは shadow root を同期で作るが中身の描画は
   非同期で、定義された次のフレームまで高さが0のままになる（実測: 挿入直後 h=0 →
   rAF 1回目 h=442.5）。:defined で外すとその1フレームだけ潰れてちらつくので、
   実際に高さが出たのを common.js が見て data-form-ready を付ける。

   WCは1カラム/2カラムを「自分自身の幅672px」で切り替える。これはLPのブレークポイント
   （lp-4は768px、lp-1系は750px）とは無関係で、同じビューポートでもLPごとに段組が
   変わる（例: vw768 で lp-1 はコンテナ688pxの2カラム、lp-4 は648pxの1カラムになる）。
   そのため vw ではなくコンテナ幅で分岐する。コンテナを .form-box_wc ではなく
   .form-box に置くのは、予約先の .form-box_wc 自身を分岐させるため。コンテナクエリは
   content box を見るので、.form-box に横paddingを持つLP（lp-2/lp-3のSP）でも
   .form-box_wc の幅と一致する。 */
.form-box {
  container-type: inline-size;
}

.form-box_wc:not([data-form-ready]) {
  min-height: 701px;
}

@container (min-width: 672px) {
  .form-box_wc:not([data-form-ready]) {
    min-height: 443px;
  }
}

/* 上の値は presentation="type-a" の実測（本番WCで1カラム701px / 2カラム443px、
   切替はコンテナ幅672px）。type-b は入力項目が少なく、段組の切替も手前にくる
   （実測: 1カラム308px / 2カラム392px、切替はコンテナ幅600px）ので予約を上書きする。
   :has() が効かない環境では type-a の値が残るが、過剰予約になるだけで壊れない。 */
.form-box_wc:not([data-form-ready]):has(> port-form-cpa[presentation="type-b"]) {
  min-height: 308px;
}

@container (min-width: 600px) {
  .form-box_wc:not([data-form-ready]):has(> port-form-cpa[presentation="type-b"]) {
    min-height: 392px;
  }
}

/* フォームはフェードインさせる。高さは上で予約済みなので、透過だけを動かす。
   通常の読み込みでは :not(:defined) から定義済みへの変化で transition が走る。
   モジュールがキャッシュ済みだと要素の構文解析前に定義が終わっていて
   :not(:defined) にマッチするフレームが無いため、その経路は @starting-style で拾う。 */
port-form-cpa {
  opacity: 1;
  transition: opacity 0.2s ease;
}

port-form-cpa:not(:defined) {
  opacity: 0;
}

@starting-style {
  port-form-cpa {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  port-form-cpa {
    transition: none;
  }
}

.shared-header,
.shared-footer {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

.shared-header,
.shared-footer,
.shared-header *,
.shared-footer * {
  box-sizing: border-box;
}

.shared-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 親が flex コンテナのページ（thanks）でも幅が縮まないようにする */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  background: #fff;
}

.shared-header__logo {
  width: 340px;
  height: auto;
}

/* CTA以外の要素（LP3の留学生向けリンクなど）を右側に足すときのラッパー */
.shared-header__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.shared-header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 260px;
  height: 48px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  background: #ffa800;
  border-radius: 999px;
  box-shadow: 0 3px 0 #d98f00;
}

.shared-header__cta svg {
  flex: 0 0 auto;
}

.shared-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  height: 193px;
  padding: 32px 20px;
  color: #333;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  background: #fff;
}

.shared-footer p {
  margin: 0;
}

.shared-footer nav {
  display: flex;
  gap: 25px;
  align-items: center;
}

.shared-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shared-footer .sp-only {
  display: none;
}

@media (max-width: 749px) {
  .shared-header {
    justify-content: center;
    height: 52px;
    padding: 16px 20px;
  }

  .shared-header__logo {
    width: 262px;
    max-width: 100%;
    height: 20px;
  }

  .shared-header__side,
  .shared-header__cta {
    display: none;
  }

  .shared-footer {
    gap: 20px;
    height: 185px;
    padding: 28px 20px;
    font-size: 10px;
  }

  .shared-footer nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }

  .shared-footer nav small {
    flex: 0 0 100%;
  }

  .shared-footer .sp-only {
    display: initial;
  }
}