@charset "UTF-8";
/* ==========================================================================
   ¥Today - 一括お申込フォーム
   HTMLの class 名は既存プログラムのものをそのまま使っている。
   セレクタ名を変えると JS（selectStep / goStep / submitForm）が壊れるため、
   ここでは見た目だけを差し替える。
   ========================================================================== */

/* SPは青い帯を全幅で敷き、その中に白いカードを置く二重構造。
   親の左右パディングを打ち消して全幅にしている。 */
.p-form {
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-64) var(--gutter);
  background: var(--color-brand-blue);
}

.form-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24) var(--space-16);
  border-radius: var(--radius-16);
  background: var(--color-surface-base);
  box-shadow: var(--shadow-float);
}

/* ---- 見出し -------------------------------------------------------------- */
.form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.form-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-brand-navy);
}

.form-sub {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* ---- ステップ表示 -------------------------------------------------------- */
.step-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.step-indicator-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: none;
}

.step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface-tint);
  color: var(--color-text-secondary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.step-circle.active,
.step-circle.done {
  background: var(--color-brand-blue);
  color: var(--color-text-inverse);
}

.step-label {
  font-size: var(--fs-note);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.step-indicator-wrap:has(.step-circle.active) .step-label {
  color: var(--color-brand-blue);
}

.step-line {
  flex: 1 1 auto;
  height: 2px;
  margin-top: 19px;
  background: var(--color-border-default);
  transition: background var(--dur) var(--ease);
}

.step-line.done { background: var(--color-brand-blue); }

/* ---- パネル -------------------------------------------------------------- */
.step-panel { display: none; }
.step-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* 受付テキスト→ボタン→注記 は詰める（Figmaは8px） */
.step-panel.active > .form-lead { margin-bottom: calc(var(--space-12) * -1); }
.step-panel.active > .form-note { margin-top: calc(var(--space-12) * -1); }

.step-question {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.step-q-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-brand-navy);
}

.step-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-surface-tint);
  color: var(--color-brand-blue);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* ---- 二択 ---------------------------------------------------------------- */
.step-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

.step-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding-inline: var(--space-8);
  border: 1.4px solid var(--color-border-default);
  border-radius: var(--radius-8);
  background: var(--color-surface-base);
  color: var(--color-brand-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.step-option:hover { border-color: var(--color-brand-blue); }

.step-option.selected {
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
  color: var(--color-text-inverse);
}

/* ---- 入力欄 -------------------------------------------------------------- */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form-label {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-brand-navy);
}

.form-required {
  display: inline-block;
  padding: 2px var(--space-6);
  border-radius: var(--radius-4);
  background: #d93a3a;
  color: var(--color-text-inverse);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.form-input,
.form-select {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-15);
  border: 1.4px solid var(--color-border-default);
  border-radius: var(--radius-8);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 1.2;
  transition: border-color var(--dur) var(--ease);
}

.form-input::placeholder { color: var(--color-text-muted); }

.form-input:focus,
.form-select:focus {
  border-color: var(--color-brand-blue);
}

/* selectの矢印をFigmaのchevronに差し替える */
.form-select {
  appearance: none;
  padding-right: calc(var(--space-15) + 22px);
  background-image: url("../img/icon-chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-15) center;
  background-size: 14px 14px;
  color: var(--color-text-secondary);
}

/* 単位付き入力（具体的な希望調達金額） */
.form-input-unit {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.form-input-unit__suffix {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brand-navy);
}

/* 未入力の赤枠（JSが .field-error を付け外しする） */
.field-error {
  border-color: #d93a3a !important;
  background: #fff6f6;
}

/* ---- エラー -------------------------------------------------------------- */
.step-error {
  display: none;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-8);
  background: #fdeded;
  color: #b32626;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.6;
}

.step-error.show { display: block; }

/* ---- 最終確認 ------------------------------------------------------------ */
.step-confirm-tap {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-top: var(--space-8);
  padding: var(--space-14) var(--space-16);
  border: 1.4px solid var(--color-border-default);
  border-radius: var(--radius-8);
  background: var(--color-surface-base);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.step-confirm-tap.confirmed {
  border-color: var(--color-accent-green);
  background: var(--color-surface-green-tint);
}

.step-confirm-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-4);
  background: var(--color-surface-base);
  color: var(--color-text-inverse);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.step-confirm-tap.confirmed .step-confirm-check {
  border-color: var(--color-accent-green);
  background: var(--color-accent-green);
}

.step-confirm-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brand-navy);
}

/* ---- 受付テキスト -------------------------------------------------------- */
/* ＼／は本文と切り離さない。折り返すと閉じ側だけ次行に落ちる */
.form-lead {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-8);
  color: var(--color-brand-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  flex-wrap: nowrap;
}

.form-lead img { flex: none; }
.form-lead__slash--r { transform: scaleX(-1); }

.form-lead__body {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--space-2);
  white-space: nowrap;
}

.form-lead__num {
  font-family: var(--font-en);
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  line-height: 0.8;
  color: var(--color-brand-blue);
}

/* ---- ナビゲーション（戻る / 次へ / 送信） -------------------------------- */
.step-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.step-btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
/*
  gap: var(--space-20);
*/
  width: 100%;
  min-height: 62px;
/*
  padding: 0 var(--space-32) 0 var(--space-40);
*/
  padding: 0 20px 0 24px;
  gap: 12px;
  white-space: nowrap;
  border: 2px solid var(--color-surface-base);
  border-radius: var(--radius-full);
  background: var(--gradient-cta-green);
  box-shadow: var(--shadow-button);
  color: var(--color-text-inverse);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.step-btn-next:hover {
  border-color: transparent;
  background-image:
    linear-gradient(var(--color-surface-base), var(--color-surface-base)),
    var(--gradient-cta-green);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--shadow-button-hover);
  color: var(--color-accent-green);
}

.step-btn-next:active { transform: translateY(1px); }

.step-btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 1.4px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface-base);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 700;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.step-btn-back:hover {
  border-color: var(--color-border-strong);
  color: var(--color-brand-navy);
}

.form-note {
  color: var(--color-text-secondary);
  font-size: var(--fs-note);
  line-height: 1.6;
}

/* ---- PC ----------------------------------------------------------------- */
@media (min-width: 1024px) {
  .p-form {
    width: 485px;
    flex: none;
    margin-inline: 0;
    padding: 0;
    background: none;
  }

  .form-inner {
    padding: var(--space-32) var(--space-28);
  }

  .form-title { font-size: 30px; }
  .form-sub { font-size: 14px; }


  .step-label { font-size: 13px; }

    .step-btn-next{
        padding: 0 var(--space-32) 0 var(--space-40);
        gap: var(--space-20);
    }
  .form-grid { flex-direction: row; flex-wrap: wrap; gap: var(--space-16); }
  .form-grid > .form-group { flex: 1 1 calc(50% - var(--space-16) / 2); min-width: 180px; }





  .step-nav { flex-direction: row-reverse; align-items: center; gap: var(--space-12); }
  .step-nav .step-btn-back { width: auto; min-width: 120px; }

  .form-lead { font-size: 18px; gap: var(--space-8); }
  .form-lead__num { font-size: 24px; }
}