@charset "UTF-8";
/* ==========================================================
   contact.html 固有CSS（2026-09-03 D-1 グループC 再批評の反映 r4）
   窓口は「全幅の写真青帯＋白ピルカード」（GELANDE OVERVIEW 型）。フォームは .cx-form 一式（872px）。

   ▼ 再批評の反映
   ・C-21: 中央寄せリードと左寄せ CONTACT 見出しが縦0pxで衝突していた。
     カンプ（slop_pc の GELANDE OVERVIEW）どおり見出しを帯の中に移し、白抜きで帯の上に載せる。
   ・C-1/C-23: メールカードの値を塗りボタンにし、確定コピー（電話の補足文・BY EMAIL の説明文）を復帰。
   ・C-3: 注意事項の箇条書きを素の「・」から .cx-dot の青●へ統一。
   ・C-9/C-10: 同意リンクを label の外へ出し、チェックボックスの実効タップ領域を44pxに。
   ・C-13: 必須／任意バッジを 11px → 12px（SP 10.31 → 12px）。

   ▼ components.css へ昇格候補
   ・.ct-band … .cx-band の高さバリアント（写真 420px 版）。帯の背景（写真・青グラデ・白フェード）は
     components.css では PC 995.7px 固定＝中身の少ない下層ページでは次セクションに photo がかぶる。
   ・.ct-tel … 電話番号を Bebas で見せるリンク行（タップ領域 44px を確保）
   ・.cx-consent のタップ領域44px化・.cx-req/.cx-opt の 12px 化
   ========================================================== */

.ct-lead { text-align: center; }

/* ---- 写真青帯（高さバリアント: 写真420 / 青グラデ400 / 白フェード 230→411） ----
   ▼ 2026-09-04 背景の重なり・謎の余白の解消（市岡さん指摘）
   ・旧: ::after の白フェードが写真下端の 10px 先（rel 420）で不透明 #fff のまま終わり、
     その1px下から main.cx-wash の淡青タイル（実測 rgb(199,224,244)）が全強度で出ていた。
     SP 実測で y706 rgb(254,254,255) → y708 rgb(199,224,244)＝ΔR55 の白い線。
     → フェードの終端を写真下端（rel 411）に合わせ、そこから下はセクション自身の背景
       （写真・::before・::after より下のレイヤー）で #fff → 透明へ 70px かけて溶かす。
       透明になった時点でウォッシュが素で出るので継ぎ目が生じない。
   ・旧: padding-bottom 230px のうち下 145px は写真もフェードも無い素のウォッシュ＝謎の余白。
     → 溶かし込みに必要な 70px ＋ 写真が本文より下に出る 75px ＝ 146px に詰める。 */
.ct-band {
  margin-top: var(--cx-gap-sec);
  padding: 70px 0 146px;
  background: linear-gradient(180deg, #fff 0, #fff 411px, rgba(255, 255, 255, 0) 481px);
}
/* 【2026-09-09】写真を帯上端に揃える（上10pxの「写真だけの薄い帯」を消す。ゲレンデと同じ修正） */
.ct-band .cx-band__bg { top: 0; height: 410px; }
.ct-band::before { height: 400px; }
.ct-band::after { top: 230px; height: 181px; }
.ct-head { margin-bottom: 30px; }

/* ---- 白ピルカード内の連絡先 ---- */
.ct-stat { align-items: flex-start; padding-top: 22px; padding-bottom: 22px; }
.ct-stat .cx-statcard__icn { margin-top: 2px; }
.ct-stat .cx-statcard__label { padding-top: 12px; }
.ct-stat .cx-statcard__value { font-size: 17px; line-height: 1.4; letter-spacing: 0.11em; }
.ct-sub { display: block; margin-top: 10px; letter-spacing: 0.07em; }
.ct-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--cx-ink);
}
.ct-tel__num { font-size: 35px; letter-spacing: 0.005em; line-height: 1; }
.ct-mailbtn { margin: 0; }
@media (hover: hover) {
  .ct-tel:hover { color: var(--cx-blue); }
}

/* ---- 注意事項 ---- */
.ct-notes__tbd { margin-top: 14px; }

/* ---- 同意（リンクは label の外・タップ領域44px） ---- */
.ct-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 40px;
}
.ct-terms {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cx-blue);
  text-decoration: underline;
  font-size: 17px;
  letter-spacing: 0.07em;
}
.ct-consent .cx-consent { margin-top: 0; gap: 0; }
.ct-consent .cx-consent input[type="checkbox"],
.ct-consent .cx-consent input[type="checkbox"]:checked {
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ct-consent .cx-consent input[type="checkbox"]::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 11px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--cx-blue);
  border-radius: 4px;
  background: #fff;
}
.ct-consent .cx-consent input[type="checkbox"]:checked::before { background: var(--cx-blue); }
.ct-consent .cx-consent input[type="checkbox"]:checked::after { left: 18px; top: 14px; }

/* ---- 必須／任意バッジを注記下限（12px）へ ---- */
.cx-req, .cx-opt { font-size: 12px; font-weight: 700; }

@media (max-width: 768px) {
  .ct-lead { text-align: left; }
  /* SP も同じ設計。写真下端 rel 292 でフェードを閉じ、そこから 60px でウォッシュへ溶かす。
     padding-bottom は SP のセクション間リズム（60px）まで詰める（旧 114px）。 */
  .ct-band {
    margin-top: var(--cx-gap-sec-sp);
    padding: 40px 0 60px;
    background: linear-gradient(180deg, #fff 0, #fff 293px, rgba(255, 255, 255, 0) 353px);
  }
  .ct-band .cx-band__bg { top: 0; height: 292px; }
  .ct-band::before { height: 290px; }
  .ct-band::after { top: 150px; height: 143px; }
  .ct-stat { padding-top: 14px; padding-bottom: 14px; }
  .ct-stat .cx-statcard__label { padding-top: 6px; }
  .ct-stat .cx-statcard__value { font-size: 14.39px; }
  .ct-tel__num { font-size: 25.79px; }
  .ct-consent { justify-content: flex-start; margin-top: 30px; }
  .ct-terms { font-size: 14px; }
  .cx-req, .cx-opt { font-size: 12px; height: 22px; }
}

/* ---- タップ領域: SP の小ボタンをスペック 43.5px → 44px へ（メイン判断6） ---- */
@media (max-width: 768px) {
  .ct-mailbtn { min-height: 44px; }
}

/* ---- C-13(再批評): ヒーロー白見出しのコントラスト確保
   （subpage.css は編集不可のためページ側で上書き。access/news/event/school-jsba と同一の追いスクリム） ---- */
.page-hero::after {
  background:
    linear-gradient(180deg, rgba(var(--c-navy-overlay), 0.34) 0%, rgba(var(--c-navy-overlay), 0.34) 100%),
    linear-gradient(180deg,
      rgba(var(--c-navy-overlay), 0.18) 0%,
      rgba(var(--c-navy-overlay), 0.10) 45%,
      rgba(var(--c-navy-overlay), 0.20) 100%);
}

/* ---- SP 本文下限14px（design-language §2・メイン判断5）:
   components.css の .cx-form__label は SP 12.53px。新規ページの本文なので 14px に戻す
   （必須／任意バッジは注記下限の12px のまま） ---- */
@media (max-width: 768px) {
  .cx-form__label { font-size: 14px; }
}

/* ---- 同意行の読み順: 規約リンクとチェックボックスの間を空け、
   チェックボックスが後続の「に同意する」と一組に見えるようにする ---- */
.ct-terms { margin-right: 8px; }

/* ==========================================================
   D-1 r5（グループC 再批評 crit3）
   ・C-1: 現行HTMLにあった確定コピー「電話でのお問い合わせ」「メールでのお問い合わせ」を復帰。
     EN小ラベル（#939494・カンプ指定色）とは別に、値の上へ墨17px/0.11emで1行置く。
   ・C-14: 同意チェックのアクセシブル名を aria-label で完全な文にした（HTML側）。
   ========================================================== */
.ct-stat__jp {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.11em;
  color: var(--cx-ink);
}
@media (max-width: 768px) {
  .ct-stat__jp { margin-bottom: 6px; font-size: 14px; }
}

/* 【2026-09-18】市岡さん指示: メールのカードを外し、電話のカードを中央に1枚（幅は2枚分の半分より少し広く） */
.ct-statgrid--single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.ct-statgrid--single .cx-statcard { justify-content: flex-start; }