/* ============================================================
   apply.css — APPLY page scoped selectors
   Renamed to reduce future collisions with shared/page-wide classes.
   ============================================================ */

/* Applyページカラー定義 */
.subpage-hero.apply-hero,
body.page-apply {
  --page-main: #1d4ed8;
  --page-main-pale: #dbeafe;
  --blue: #1d4ed8;
  --blue-pale: #dbeafe;
  --blue-hover: #1e40af;
  --page-dot-color: rgba(29,78,216,0.08);
      --focus-ring: rgba(29, 78, 216, 0.08);
}

/* STEP INDICATOR */
.apply-step-bar-wrap { background: var(--off-white); border-bottom: 1px solid var(--gray-100); padding: 0 20px; }
.apply-step-bar { max-width: 680px; margin: 0 auto; display: flex; align-items: center; padding: 20px 0; }
.apply-step-item { display: flex; align-items: center; gap: 10px; flex: 1; position: relative; }
.apply-step-item:last-child { flex: 0; }
.apply-step-num {
      width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem; font-weight: 700; /* 番号バッジ（超小型uppercase）の視認性確保のため例外 */ flex-shrink: 0;
      border: 1.5px solid var(--gray-200);
      color: var(--text-light); background: var(--white);
      transition: all 0.2s;
    }
.apply-step-num.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.apply-step-num.done { background: var(--navy); color: #fff; border-color: var(--navy); }
.apply-step-label { font-size: 0.76rem; font-weight: 500; color: var(--text-light); white-space: nowrap; }
.apply-step-label.active { color: var(--blue); font-weight: 500; }
.apply-step-label.done { color: var(--navy); }
.apply-step-line { flex: 1; height: 1px; background: var(--gray-200); margin: 0 12px; }
.apply-step-line.done { background: var(--navy); }

/* FORM AREA */
.apply-body { background: var(--white); padding: 48px 20px 72px; }
.apply-form-wrap { max-width: 680px; margin: 0 auto; }
.apply-step-panel { display: none; }
.apply-step-panel.active { display: block; }
.apply-step-heading { font-size: 1.15rem; font-weight: 500; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 6px; }
.apply-step-sub { font-size: 0.84rem; color: var(--text-mid); margin-bottom: 32px; line-height: 1.6; letter-spacing: 0; }

/* FORM PARTS (共通) */
.apply-form-group { margin-bottom: 22px; }
.apply-form-group label { display: block; font-size: 0.79rem; font-weight: 500; color: var(--text-mid); margin-bottom: 7px; letter-spacing: 0.02em; }
.apply-form-group label .apply-req { color: var(--blue); margin-left: 3px; font-size: 0.74rem; }
.apply-form-group label .apply-optional { color: var(--text-light); font-weight: 500; font-size: 0.73rem; margin-left: 4px; }
.apply-form-group textarea { min-height: 90px; }
.apply-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-section-title { font-size: 0.72rem; font-weight: 700; /* 超小型uppercaseラベルの視認性確保のため例外 */ letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-light); margin: 28px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-100); }

/* CHECKBOX */
.apply-check-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.apply-check-item input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--blue); cursor: pointer; }
.apply-check-item label { font-size: 0.86rem; color: var(--text-mid); line-height: 1.65; letter-spacing: 0; cursor: pointer; }
.apply-check-item label a { color: var(--blue); text-decoration: underline; }
.apply-check-box { background: var(--off-white); padding: 20px 20px 16px; margin-bottom: 24px; }
.apply-check-box-title { font-size: 0.78rem; font-weight: 500; color: var(--navy); margin-bottom: 12px; letter-spacing: 0.04em; }
.apply-pledge-text { font-size: 0.82rem; color: var(--text-mid); line-height: 1.78; letter-spacing: 0; }

/* NAV BUTTONS */
.apply-step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; gap: 12px; }
.apply-btn-back { background: none; border: 1.5px solid var(--gray-200); color: var(--text-mid); font-size: 0.88rem; font-weight: 500; padding: 12px 24px; transition: border-color 0.15s, color 0.15s; }
.apply-btn-back:hover { border-color: var(--navy); color: var(--navy); }
.apply-btn-next { background: var(--blue); color: #fff; border: none; font-size: 0.92rem; padding: 14px 32px; transition: background 0.15s; flex: 1; max-width: 280px; }
.apply-btn-next:hover { background: var(--blue-hover); }
.apply-btn-submit-final { background: var(--navy); color: #fff; border: none; font-size: 0.92rem; padding: 15px 32px; transition: background 0.15s; flex: 1; max-width: 320px; }
.apply-btn-submit-final:hover { background: #111a26; }

/* SUCCESS */
.apply-success { display: none; text-align: center; padding: 64px 24px; max-width: 560px; margin: 0 auto; }
.apply-success-icon { font-size: 3rem; margin-bottom: 20px; }
.apply-success h2 { font-size: 1.4rem; font-weight: 500; margin-bottom: 12px; letter-spacing: -0.01em; }
.apply-success p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.75; letter-spacing: 0; }

/* BACK TO CONTACT */
.back-to-contact { background: var(--off-white); border-top: 1px solid var(--gray-100); padding: 28px 20px; text-align: center; }
.back-to-contact a { font-size: 0.84rem; color: var(--blue); font-weight: 500; }
.back-to-contact a:hover { text-decoration: underline; }

/* RESPONSIVE */
@media (max-width: 768px) {
      section { padding: 56px 20px; }
      .apply-body { padding: 36px 20px 56px; }
      .apply-form-row { grid-template-columns: 1fr; }
      .apply-step-label { display: none; }
      .apply-step-nav { flex-direction: column-reverse; }
      .apply-btn-next, .apply-btn-submit-final, .apply-btn-back { max-width: 100%; width: 100%; }
    }
/* HEROICONS */
.hi { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.hi-outline { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hi-solid { width: 1.5em; height: 1.5em; fill: currentColor; stroke: none; }
.hi-lg { width: 2em; height: 2em; }
.hi-sm { width: 1.2em; height: 1.2em; }
.en { font-family: var(--font-en); letter-spacing: 0; }
/* SAアニメーション → style.css に定義済みのため削除 */


/* 料金カード */

.apply-schedule-fixed-note { font-size: 0.84rem; color: var(--text-mid); padding: 10px 12px; border: 1.5px solid var(--gray-200); background: var(--off-white); letter-spacing: 0; }
.apply-price-card { border: 1.5px solid var(--blue); background: var(--blue-pale); padding: 20px 24px; margin-top: 4px; }
.apply-price-card-label { font-size: 0.69rem; font-weight: 700; /* 超小型uppercaseラベルの視認性確保のため例外 */ letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.apply-price-card-body { display: flex; align-items: baseline; gap: 8px; }
.apply-price-amount { font-size: 1.6rem; font-weight: 500; color: var(--navy); letter-spacing: -0.02em; }
.apply-price-tax { font-size: 0.78rem; color: var(--text-mid); }
.apply-price-note { font-size: 0.78rem; color: var(--text-mid); margin-top: 8px; line-height: 1.65; letter-spacing: 0; }
.price-free .apply-price-amount { color: var(--blue); }

/* 個人 / 法人 切替ボタン */
.apply-applicant-type-btns { display: flex; gap: 0; }
.apply-type-btn {
      flex: 1; max-width: 120px;
      padding: 10px 0;
      font-size: 0.88rem; font-weight: 500; font-family: var(--font);
      border: 1.5px solid var(--gray-200);
      background: var(--white); color: var(--text-mid);
      cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
.apply-type-btn:first-child { border-radius: var(--r-btn) 0 0 var(--r-btn); }
.apply-type-btn:last-child  { border-radius: 0 var(--r-btn) var(--r-btn) 0; border-left: none; }
.apply-type-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.apply-type-btn:not(.active):hover { border-color: var(--blue); color: var(--blue); }

/* ── 選択状態の視覚強調（URLパラメータ / 手動操作共通） ── */
.is-selected {
      background: #f1f5ff;
      border-color: #2563eb;
      color: #1e40af;
      font-weight: 500;
    }

/* #course-type 下の補助テキスト */
.apply-selected-note {
      display: none; /* 値なし時は非表示 */
      font-size: 0.75rem;
      color: #2563eb;
      font-weight: 500;
      margin-top: 6px;
      letter-spacing: 0;
    }
.apply-selected-note::before {
      content: '✓ ';
    }