@charset "UTF-8";
/* ==========================================================
   飛騨ほおのき平スキー場 — apply.css（申し込みページ7本 共通）
   apply-moonbike / -snowtaxi / -snowrafting / -snowhike /
   -school-saj / -school-jsba / -thanks
   2026-09-03 D-1 グループA（ラウンド2で全面見直し）

   土台は css/components.css（.cx-）。このファイルは配置差分だけを持つ。接頭辞は .ap-。
   ・カンプにフォームは存在しない → 「白×1px青枠・角丸小・面はベタ・影なし」という
     カンプの原則を適用した .cx-form 一式を、版面 872px（.cx-inner--faq と同幅）に置く

   ラウンド5（D-1 crit3 グループA の指摘を反映）:
   A02 SP で .ap-tbd の1行目が「受付・」だけの孤立行（mid） → .ap-tbd を keep-all の対象外へ
   A03 ウォッシュ地の注記が 3.24:1（mid） → .ap-pagenote / .ap-thanks .ap-tbd--onwhite を #484e52 へ
   A07 SP の .ap-hero__pill が 10.31px（low） → ap- 側のスコープで 12px / 高さ22px へ
   A11 インラインリンクの SP タッチ高さ 36.2〜40px（low） → padding 11px で 44px 以上へ
   （A01 語中改行・A05 未確定の受付場所・A09 二重掲載・A10 SAJ の種目/レベルは HTML・JS 側で対応）

   ラウンド3で直した点（指摘 → 対応）:
   A1  ウォッシュの継ぎ目（high）→ ページ側の個別配置を撤去し .cx-wash（縦リピート）へ統一
   A6  写真の断りが無い（low）  → CTA 直前に .cx-note を1本（ページ内1回）
   A7  no-JS で個人情報が URL に載る（low）→ method="post" へ（WP化時はショートコードに差し替え）
   A10 SP の語中改行（mid）     → keep-all / line-break:strict ＋ 人数の2カラムを SP で1カラムへ
   A11 FLOW が空箱（mid）       → 872px 版面へ移設し FORM 直上に。intro ボックスは統合して廃止
   A13 任意バッジ 3.43:1（mid） → #6e7375 ベタ＋白文字（4.80:1）へ戻す
   A15 apply に keep-all 未適用（mid）→ 上記 A10 と同じブロックで7本まとめて適用

   ラウンド2で直した点（指摘 → 対応）:
   1. 背景が真っ白（high）        → 空写真タイル img/bg/wash_{pc,sp}.jpg を敷く（BRIEF §1）
   2. FLOW が生成UI型（high）     → 丸数字・EN小ラベル・矢印コネクタを全廃。
                                    カンプ hour_pc の INFORMATION / PAYMENT カードの語彙で組み直す
   3. ENTRY 写真が対象と不一致（high）→ HTML 側で差し替え（ENTRY＝申込対象／ヒーロー＝風景）
   4. FORM 見出しだけ中央（mid）  → .ap-formwrap（x=284）の中に入れて版面左端へ揃える
   5. 電話の placeholder が自社番号（mid/low）→ 090-1234-5678 に差し替え（HTML）
   6. SP で写真カードの融合が消える（mid）→ SP は「写真→青」の順に統一
   7. 「任意」バッジの無彩色ベタ（low）→ 枠バッジに変更
   8. 必須・任意バッジ 11px（low）→ 12.6px（カンプ badge / label と同水準）

   ==== components.css へ昇格候補 ====
   1. .ap-formwrap … フォームの版面 872px 中央寄せ（contact / photo-form でも使う）
   2. .ap-cols     … フォーム行の2カラム（氏名／ふりがな・大人／子ども 等）
   3. .ap-hero__pill … page-hero の写真の上に置く種別ピル（ロッジ詳細でも使う）
   ========================================================== */

/* ==========================================================
   0. ページ背景の淡青ウォッシュ
   ラウンド3（メイン判断 2026-09-03）: 不透明タイルを2枚重ねると上層タイルの白い下端が
   下層のインクを切り、全幅の硬い水平エッジが出る（apply-moonbike PC 実測 y3079→y3081 Δ51）。
   ページ側の個別配置は撤去し、components.css の .cx-wash（ヒーロー直下から縦リピート）へ統一。
   .ap-page / .ap-page--thanks はページ固有スタイルのフックとしてのみ残す。
   ========================================================== */

/* 確定コピーの語中改行を止める（D-1 A01）。keep-all で和文を1語扱いにし、
   折り返しは本文に置いた <wbr>（文節境界）だけで起こす。PC/SP 共通。 */
.ap-keep { word-break: keep-all; line-break: strict; overflow-wrap: break-word; }

/* ウォッシュ地に載る注記の文字色（AA灰 #6e7375 は白地専用＝ウォッシュ上では 3.24:1） */
:root { --ap-note-onwash: #484e52; }

/* ---- ヒーロー上の種別ピル ---- */
.ap-hero__pill {
  margin-bottom: 18px;
}

/* ==========================================================
   1. 申込内容の要約（写真ブリードの青カード）
   .cx-photocard の既定はテキスト段 36%（377px）。要約は箇条書き5行を持つので
   テキスト段を 46%（497px）に広げ、写真のブリード開始位置もそろえる。
   ========================================================== */
.ap-summary { min-height: 380px; }
.ap-summary .cx-photocard__photo { left: 49%; }
.ap-summary .cx-photocard__body { width: 46%; }
.ap-summary .cx-photocard__list { margin-top: 18px; }

/* ---- 原稿待ちの1行（メイン判断2: 空の箇条書きを並べない）----
   青ベタの上（ENTRY カード）は白 86%、白カードの上は AA を満たす灰 #6e7375 */
.ap-tbd {
  margin-top: 18px;
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.86);
  /* ラウンド5（D-1 A02）: keep-all だと「受付・確定のご連絡方法は原稿到着後に掲載します」が
     1語扱いになり、SP394 で1行目が「受付・」の3文字だけになる（行の約86%が空白の孤立行）。
     原稿待ちの断り文は確定コピーではなく <wbr> の打ちどころも原稿で変わるため、
     word-break は normal に戻し、行頭禁則は line-break:strict に担わせる。 */
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}
.ap-tbd--onwhite { color: var(--cx-gray-aa); }
/* ENTRY カードの面は --cx-blue-face #1673e2（photocard）で明るく、白86%（#deebfb）だと
   3.79:1 ＝ AA を割る。青ベタの上に出る .ap-tbd は純白（4.58:1）にする
   （contrast-check.js --pair 実測。A03 と同種のため同時に直した）。 */
.ap-summary .ap-tbd { color: #fff; }
/* ラウンド5（D-1 A03）: --cx-gray-aa(#6e7375) は「白地で 4.80:1」の色。淡青ウォッシュ地では
   3.24:1 まで落ちる（実測背景 #a8dbfa）。白カードの外に出る2箇所だけ1段濃い #484e52 にする
   （wash_pc/sp タイルの下位0.1%輝度でも 4.67:1・白地 8.44:1／contrast-check.js --pair 実測）。 */
.ap-thanks .ap-tbd--onwhite { color: var(--ap-note-onwash); }
/* 写真の断りはページ内1回だけ（CTA 直前） */
.ap-pagenote { margin-bottom: 34px; color: var(--ap-note-onwash); text-align: center; }

/* ==========================================================
   2. お申し込みの流れ
   カンプ hour_pc の INFORMATION / PAYMENT カード（白＋#165ce2 1px、Bebas 34.42 の青見出し
   ＋和文小ラベル、中身は素の中黒リスト）と同じ組み。
   丸数字・EN小ラベル（12.6px）・矢印コネクタはカンプのどこにも無いので使わない。
   ラウンド3: 1272px 版面では箱の6割が空白になったため、フォームと同じ 872px 版面へ移設。
   ========================================================== */
/* 原稿待ちの割り当て（D-1 A09・7本共通）:
   ENTRY カードは「申込対象そのもの」（料金・所要時間・対象年齢・受付場所）、
   NOTICE カードは「手続き」（定員・締切・集合・お支払い方法・キャンセル規定）。
   同義の断りをページ内で2回出さない＝お支払い方法は NOTICE 側だけに置く。 */
.ap-flowcard { margin-bottom: 56px; }
.ap-flowcard .cx-list { margin-top: 0; }
.ap-flowcard .ap-tbd { margin-top: 14px; }

/* ==========================================================
   3. フォーム
   ========================================================== */
.ap-formwrap {
  width: 872px;
  margin: 0 auto;
}
.ap-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 34px;
}
/* 送信の性格（申請であって予約確定ではない）は FLOW カードに統合したので
   フォーム頭の独立ボックスは廃止。見出しの下だけ空ける。 */
.ap-formhead { margin-bottom: 34px; }
/* base.css の a{color:inherit;text-decoration:none} を打ち消す。
   .cx-consent a（components.css）と同じ扱い＝青＋下線だけ。色や面は足さない */
.ap-formwrap .cx-note a {
  color: var(--cx-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ap-notes { margin-top: 44px; }
.ap-form__foot { margin-top: 40px; }

/* 必須・任意バッジ（カンプ外の新設部品）
   ・11px はカンプ由来ページの最小 11.7px を下回るので 12.6px（.cx-panel__label と同値）へ
   ・ラウンド2で「任意」を枠バッジにしたら、ウォッシュ地の上で #6e7375 が 3.43〜3.70:1 まで
     落ちた（実測 apply-moonbike (270,2390) 背景 #b1e1f8）。design-language §7 どおり
     .cx-req と同型のベタ（#6e7375 ＋ 白文字 4.80:1）へ戻す。必須(#165ce2)とは明度で区別する。 */
.cx-req, .cx-opt { font-size: 12.6px; }
/* ラジオ・チェック群は role="group" ＋ aria-labelledby で群見出しと紐づける（見た目は変えない） */
.cx-choices[role="group"] { margin: 0; }
/* タッチターゲット 44px（メイン判断6）。面は作らず当たり判定だけ広げる。
   本文中のリンクは padding と同値の負マージンで打ち消し、行送りを変えずに縦 43px を確保する。 */
.cx-choice { min-height: 44px; }
.cx-consent { min-height: 44px; }
.ap-formwrap .cx-note a,
.cx-consent a {
  display: inline-block;
  padding: 10px 6px;
  margin: -10px -6px;
}

/* ==========================================================
   4. 送信完了ページ
   軸は1本（カンプ hour_pc の BUSINESS HOURS パネルと同じ全中央）。
   青丸アイコンと EN 小ラベル（BY PHONE）は置かない。
   ========================================================== */
.ap-thanks {
  text-align: center;
  padding-top: 88px;
}
.ap-thanks .cx-note { margin-top: 22px; }
.ap-thanks__from { margin-top: 14px; }
.ap-telcard {
  width: 617.3px;
  margin: 56px auto 0;
  padding: 34px 24px 30px;
  background: #fff;
  border: 1px solid var(--cx-blue);
  border-radius: 10px;
  text-align: center;
}
.ap-telcard__lead {
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.11em;
  color: var(--cx-ink);
}
.ap-tel {
  margin-top: 12px;
  font-family: var(--cx-font-en);
  font-feature-settings: normal;
  font-size: 35px;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--cx-ink);
}
/* 電話番号リンクのタップ領域を 44px 以上にする（Bebas 35px の行高だけでは足りない）。
   .cx-btn は使わない＝カンプの語彙では電話番号は「文字そのもの」なので面を作らない。 */
.ap-tel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: inherit;
}
/* 受付時間はラベル灰。ただしカンプ外の新設部品なので AA を満たす濃度（#6e7375）を使う
   （components.css §0 のコメントと同じ方針。カンプ指定の #939494 は既存箇所にだけ残す） */
.ap-telcard__note { margin-top: 10px; color: var(--cx-gray-aa); }

/* ==========================================================
   5. SP（〜768px）
   フォームは1カラム。人数だけは「大人／子ども」を横並びのまま残す（入力の対比が要るため）。
   ========================================================== */
@media (max-width: 768px) {
  .ap-hero__pill { margin-bottom: 12px; }
  /* SP の注記下限 12px（メイン判断5）。components.css:1109 の .cx-pill は 10.31px だが、
     これはカンプ由来ページ（gelande / price 等）の spec 一致に効く値なので触らず、
     グループAが新設した .ap-hero__pill の内側だけスコープを限って引き上げる（D-1 A07）。 */
  .ap-hero__pill .cx-pill { height: 22px; padding: 0 10px; font-size: 12px; }

  /* PC で広げたテキスト段・写真位置を SP では縦積みへ戻し、
     さらに「写真 → 青」の順に積む（.cx-actcard と同じ積み方）。
     components.css の SP は「青 → 写真」＋見出し中央なので明示的に打ち消す。 */
  .ap-summary { min-height: 0; padding: 0 0 26px; }
  .ap-summary .cx-photocard__photo { left: auto; order: 0; margin-top: 0; margin-bottom: 20px; }
  .ap-summary .cx-photocard__body { width: auto; order: 1; }
  .ap-summary .cx-photocard__title { text-align: left; }
  .ap-summary .cx-photocard__list { margin-top: 14px; }

  /* .ap-formwrap は .cx-inner の外に置いている（PC で 872px の独自版面を持つため）。
     SP で width:auto にするだけだと左右の余白が 0 になり、フォームだけが画面端まで伸びる。
     .cx-inner の SP 規定（padding: 0 22px）と同じ余白を明示的に持たせて版面を揃える。 */
  .ap-formwrap { width: auto; padding: 0 22px; }
  .ap-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* 394px で「参加人数（大|人）」「受講人数（子ど|も）」と語中改行していた。
     2カラムを維持したままでは入らないので、人数の行も1カラムへ落とす。 */
  .ap-cols--keep2 { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  /* 和文の語中改行・禁則違反（行頭の長音符）を止める。折り返し位置は <wbr> と <br> で決める。
     .ap-tbd（原稿待ちの断り文）はラウンド5（D-1 A02）で対象外にした＝1語扱いにすると
     394px に収まらず「受付・」だけの孤立行が出る。基底の .ap-tbd で word-break:normal を持つ。 */
  .cx-form__label,
  .cx-photocard__title,
  .cx-photocard__text,
  .cx-photocard__list li,
  .cx-list li,
  .cx-choice,
  .cx-consent {
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: break-word;
  }
  /* ラベルが2行になったときバッジが中央に浮くので頭を揃える */
  .cx-form__label { align-items: flex-start; line-height: 1.5; }
  .cx-req, .cx-opt { margin-top: 2px; }

  .ap-flowcard { margin-bottom: 34px; }
  .ap-formhead { margin-bottom: 26px; }
  .ap-notes { margin-top: 28px; }
  .ap-form__foot { margin-top: 30px; }

  /* SP の注記下限 12px（メイン判断5） */
  .cx-req, .cx-opt { height: 22px; font-size: 12px; min-width: 56px; }
  .ap-tbd { font-size: 14px; line-height: 21.75px; }
  /* 本文中インラインリンクのタッチ高さ 44px（メイン判断6）。SP は .cx-note の行送りが
     16.17px まで縮むので padding 14px（16.17+28=44.2px）まで広げる。負マージンで打ち消すため
     行送りは変わらない（インライン要素の縦マージンは行ボックスに効かない）＝D-1 A11。 */
  .ap-formwrap .cx-note a,
  .cx-consent a { padding: 14px 6px; margin: -14px -6px; }
  .ap-pagenote { margin-bottom: 24px; }

  .ap-thanks { padding-top: 48px; }
  .ap-thanks .ap-tbd { font-size: 14px; line-height: 21.75px; }
  .ap-thanks .cx-note { margin-top: 16px; }
  .ap-telcard { width: auto; margin-top: 36px; padding: 22px 16px 22px; }
  .ap-telcard__lead { font-size: 15px; }
  .ap-tel { font-size: 25.79px; }
}

/* 【2026-09-17 深夜3】シーズン券フォーム（写真添付・利用規約） */
.ap-upload { min-height: 96px; gap: 8px; }
.ap-upload__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--cx-blue); border-radius: 999px; color: var(--cx-blue); font-size: 14px; letter-spacing: 0.06em; }
.ap-terms { margin-top: 10px; padding: 18px 22px; max-height: 260px; overflow-y: auto; }
.ap-terms__title { margin: 0 0 8px; font-size: 15px; letter-spacing: 0.08em; }
.ap-terms .cx-list li { font-size: 14px; line-height: 1.8; }
.ap-terms__agree { margin-top: 12px; }

/* ==========================================================================
   【2026-09-30 先方ご指示】申込フォームの受付「準備中」（js/apply-soon.js が html に .is-form-soon を付ける）
   受付開始は js/apply-soon.js の OPEN を true にするだけ。確認用に URL へ ?form=open を付けるとフォームが見える
   ========================================================================== */
.ap-soon { display: none; }
html.is-form-soon .ap-soon {
  display: block;
  margin: 0 auto 8px;
  padding: 34px 32px 36px;
  background: #fff;
  border: 1px solid var(--cx-blue);
  border-radius: 16px;
  text-align: center;
}
.ap-soon__title { font-size: 25.87px; line-height: 1.4; letter-spacing: 0.11em; color: var(--cx-blue); }
.ap-soon__text { margin-top: 12px; font-size: 16px; line-height: 30px; letter-spacing: 0.07em; }
html.is-form-soon .ap-flowcard,
html.is-form-soon .ap-formhead,
html.is-form-soon .js-apply-form,
html.is-form-soon .ap-formwrap form { display: none; }

/* 年齢の基準日（シーズン券） */
.ap-agebase { margin-left: 4px; font-size: 0.82em; letter-spacing: 0.04em; color: var(--cx-gray-aa); }

/* ==========================================================================
   【2026-09-30 先方ご支給】シーズン券の購入方法
   ========================================================================== */
.ap-howto__period { display: grid; gap: 0; border-top: 1px solid var(--cx-blue); }
.ap-howto__prow { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding: 18px 4px; border-bottom: 1px solid var(--cx-blue); }
.ap-howto__prow dt { font-size: 16px; line-height: 28px; letter-spacing: 0.07em; color: var(--cx-gray-aa); }
.ap-howto__prow dd { margin: 0; font-size: 19px; line-height: 30px; letter-spacing: 0.07em; }
.ap-howto small { display: block; margin-top: 4px; font-size: 14px; line-height: 23px; letter-spacing: 0.05em; }
.ap-howto__h3 { margin: 40px 0 14px; font-size: 22px; line-height: 1.4; letter-spacing: 0.07em; color: var(--cx-blue); font-weight: 400; }
.ap-howto__h3sub { margin-left: 8px; font-size: 15px; letter-spacing: 0.05em; color: var(--cx-ink); }
.ap-howto__tablewrap { overflow-x: auto; }
.ap-howto__table { width: 100%; border-collapse: collapse; background: #fff; font-size: 17px; letter-spacing: 0.05em; }
.ap-howto__table th, .ap-howto__table td { padding: 14px 18px; border: 1px solid var(--cx-hair); text-align: center; font-weight: 400; }
.ap-howto__table thead th { background: var(--cx-blue); color: #fff; border-color: var(--cx-blue); font-size: 15px; }
.ap-howto__table tbody th { text-align: left; }
.ap-howto__early { color: var(--cx-blue); font-size: 19px; }
.ap-howto__none { color: var(--cx-gray-aa); }
.ap-howto__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.ap-howto__ways .ap-howto__h3 { margin-top: 0; }
.ap-howto__card { background: #fff; }
.ap-howto__list li { font-size: 16px; line-height: 28px; letter-spacing: 0.05em; }
.ap-howto__list li + li { margin-top: 6px; }
.ap-howto__box { margin-top: 24px; padding: 8px 28px; background: #fff; border: 1px solid var(--cx-blue); border-radius: 6px; }
.ap-howto__brow { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 16px 0; }
.ap-howto__brow + .ap-howto__brow { border-top: 1px solid var(--cx-hair); }
.ap-howto__brow dt { font-size: 16px; line-height: 28px; color: var(--cx-gray-aa); letter-spacing: 0.07em; }
.ap-howto__brow dd { margin: 0; font-size: 17px; line-height: 30px; letter-spacing: 0.05em; overflow-wrap: anywhere; }
.ap-howto__brow a, .ap-howto__contact a { color: var(--cx-blue); text-decoration: underline; }
.ap-howto__other { margin-top: 24px; }
.ap-howto__card > .ap-howto__h3:first-child { margin-top: 0; }
.ap-howto .cx-head { flex-wrap: wrap; row-gap: 6px; }
.ap-howto .cx-head__en { white-space: nowrap; }
.ap-howto__contact { margin-top: 16px; font-size: 16px; line-height: 28px; letter-spacing: 0.05em; }
.ap-howto__contactnote { font-size: 14px; line-height: 23px; letter-spacing: 0.05em; }
@media (max-width: 768px) {
  html.is-form-soon .ap-soon { padding: 22px 16px 24px; border-radius: 14px; }
  .ap-soon__title { font-size: 18px; }
  .ap-soon__text { font-size: 14px; line-height: 24px; }
  .ap-howto__prow { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 2px; }
  .ap-howto__prow dt { font-size: 13px; line-height: 20px; }
  .ap-howto__prow dd { font-size: 16px; line-height: 26px; }
  .ap-howto small { font-size: 12px; line-height: 19px; }
  .ap-howto__h3 { margin: 30px 0 10px; font-size: 18px; }
  .ap-howto__h3sub { display: block; margin: 2px 0 0; font-size: 12px; }
  .ap-howto__table { font-size: 14px; }
  .ap-howto__table th, .ap-howto__table td { padding: 10px 8px; }
  .ap-howto__table thead th { font-size: 12px; }
  .ap-howto__early { font-size: 15px; }
  .ap-howto__ways { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .ap-howto__list li { font-size: 14px; line-height: 24px; }
  .ap-howto__box { padding: 4px 16px; }
  .ap-howto__brow { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
  .ap-howto__brow dt { font-size: 13px; line-height: 20px; }
  .ap-howto__brow dd { font-size: 14px; line-height: 24px; }
  .ap-howto__contact { font-size: 14px; line-height: 24px; }
  .ap-howto__contactnote { font-size: 12px; line-height: 19px; }
}