/*
 * 法人向け車両リース 簡単見積もり（template-corporate-lease.php）
 * Laravel 側の申込フォーム（pj-futaba.orico の resources/views/forms/corporate-lease）と同じ配色・枠線・ステップ表示に揃える
 *   背景 #E9ECEF / カード 白・枠線 #333333・角丸 / アクセント #DF121A
 */
.cl-estimate {
  --cl-bg: #E9ECEF;
  --cl-border: #333333;
  --cl-accent: #DF121A;
  --cl-text: #333333;
  --cl-muted: #666666;
  background: var(--cl-bg);
  color: var(--cl-text);
  padding: 24px 0 32px;
}
.cl-estimate [hidden] { display: none !important; }
.cl-container { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 12px; }
@media (min-width: 640px) { .cl-container { padding: 0 16px; } }
@media (min-width: 768px) { .cl-container { padding: 0 24px; } .cl-estimate { padding: 32px 0 40px; } }

/* カード */
.cl-card {
  background: #FFFFFF;
  border: 1px solid var(--cl-border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
}
@media (min-width: 640px) { .cl-card { padding: 20px; } }
@media (min-width: 768px) { .cl-card { padding: 24px; margin-bottom: 24px; } }
.cl-header { margin-top: 12px; }
.cl-heading, .cl-title {
  border-left: 4px solid var(--cl-accent);
  padding-left: 12px;
  font-weight: bold;
  line-height: 1.5;
}
.cl-heading { font-size: 16px; }
.cl-title { font-size: 16px; margin-bottom: 12px; }
@media (min-width: 640px) { .cl-heading { font-size: 18px; } .cl-title { font-size: 18px; } }
@media (min-width: 768px) { .cl-heading { font-size: 20px; } }
.cl-lead, .cl-text { font-size: 14px; line-height: 1.8; margin-top: 8px; }
.cl-text { margin: 0 0 16px; }
.cl-text--center { text-align: center; }
.cl-note { font-size: 12px; line-height: 1.8; color: var(--cl-muted); margin-top: 8px; display: block; }
.cl-placeholder { font-size: 14px; color: var(--cl-muted); }

/* ステップ表示 */
/* ステッパー：番号の丸を線でつなぐ（済み=✓・赤、現在=赤、これから=グレー） */
.cl-steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cl-steps__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; text-align: center; color: #999999; }
/* 丸と丸をつなぐ線（前のステップの丸の中心から、この丸の中心まで） */
.cl-steps__item + .cl-steps__item::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 3px; background: #DDDDDD; z-index: 0; }
.cl-steps__item.is-done + .cl-steps__item::before { background: var(--cl-accent); }
.cl-steps__num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #CCCCCC; background: #FFFFFF; color: #999999; font-size: 15px; font-weight: bold; }
.cl-steps__text { display: flex; flex-direction: column; gap: 2px; }
.cl-steps__step { font-size: 11px; font-weight: bold; letter-spacing: .05em; }
/* 文字の段は2行分の高さを確保（ステップが変わっても高さが動かないように） */
.cl-steps__name { font-size: 13px; line-height: 1.4; min-height: 2.8em; }
.cl-steps__item.is-current { color: var(--cl-accent); }
.cl-steps__item.is-current .cl-steps__num { border-color: var(--cl-accent); background: var(--cl-accent); color: #FFFFFF; box-shadow: 0 0 0 4px #FFE3E4; }
.cl-steps__item.is-current .cl-steps__name { font-weight: bold; }
.cl-steps__item.is-done { color: var(--cl-text); }
.cl-steps__item.is-done .cl-steps__num { border-color: var(--cl-accent); background: #FFFFFF; color: var(--cl-accent); font-size: 0; }
.cl-steps__item.is-done .cl-steps__num::after { content: "✓"; font-size: 17px; }
@media (max-width: 639px) {
  .cl-steps__num { width: 30px; height: 30px; font-size: 13px; }
  .cl-steps__item + .cl-steps__item::before { top: 14px; }
  .cl-steps__step { font-size: 10px; }
  .cl-steps__name { font-size: 11px; }
}

/* エラー */
.cl-error { border: 2px solid var(--cl-accent); color: var(--cl-accent); font-size: 14px; line-height: 1.8; }
.cl-error__title { font-weight: bold; font-size: 16px; }
.cl-message { color: var(--cl-accent); font-weight: bold; font-size: 14px; text-align: center; margin-bottom: 12px; }

/* 選択肢（ラジオ）：サイト共通 CSS で非表示にされるため表示を固定する（Laravel 側と同じ扱い） */
.cl-estimate input[type="radio"] {
  display: inline-block !important;
  -webkit-appearance: radio !important;
  appearance: radio !important;
  opacity: 1 !important;
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0;
  pointer-events: auto !important;
  accent-color: var(--cl-accent);
}
.cl-options { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) {
  .cl-options--two { grid-template-columns: repeat(2, 1fr); }
  .cl-options--three { grid-template-columns: repeat(3, 1fr); }
  .cl-options--grid { grid-template-columns: repeat(3, 1fr); }
}
.cl-choice {
  display: block;
  border: 1px solid var(--cl-border);
  border-radius: 4px;
  background: #FFFFFF;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
  height: 100%;
}
.cl-choice:has(input:checked) { border: 2px solid var(--cl-accent); padding: 11px 13px; }
.cl-choice__head { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* 車種 */
/*
 * 並び：カードの大きさは常に同じ（PC は 3列の1枚分）で、行の余りは中央に寄せる
 *   PC（6分割グリッドで1枚＝2マス）: 1枚=中央 / 2枚=中央に2つ / 3枚 / 4枚=2＋2 / 5枚=3＋2（下は中央）/ 6枚=3＋3 / 7枚以上は3列で余りを中央
 *   タブレット（4分割で1枚＝2マス）: 2列。奇数枚なら最後の1枚を中央
 *   スマホ: 1列
 */
.cl-cars { display: grid; grid-template-columns: 1fr; gap: 12px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) and (max-width: 1023px) {
  .cl-cars { grid-template-columns: repeat(4, 1fr); }
  .cl-cars > li { grid-column: span 2; }
  .cl-cars--odd > li:last-child { grid-column: 2 / 4; }
}
@media (min-width: 1024px) {
  .cl-cars { grid-template-columns: repeat(6, 1fr); }
  .cl-cars > li { grid-column: span 2; }
  .cl-cars--rem1 > li:last-child { grid-column: 3 / 5; }
  .cl-cars--rem2 > li:nth-last-child(2) { grid-column: 2 / 4; }
  .cl-cars--four > li:nth-child(odd) { grid-column: 2 / 4; }
  .cl-cars--four > li:nth-child(even) { grid-column: 4 / 6; }
}
.cl-badge { display: inline-block; margin-top: 8px; background: var(--cl-accent); color: #FFFFFF; font-size: 12px; font-weight: bold; border-radius: 2px; padding: 2px 8px; }
.cl-car__image { display: block; margin-top: 8px; background: var(--cl-bg); border-radius: 4px; }
.cl-car__image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.cl-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.cl-swatches__label { color: var(--cl-muted); margin-right: 4px; }
.cl-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--cl-border); background: #FFFFFF; }
.cl-swatch--large { width: 36px; height: 36px; }

/* プラン */
.cl-plan__fee { display: block; margin-top: 6px; color: var(--cl-accent); font-size: 12px; font-weight: bold; }
.cl-plan__unavailable { display: block; margin-top: 6px; color: var(--cl-muted); font-size: 12px; font-weight: bold; }
.cl-plan__detail-title { display: block; margin: 10px 0 6px; font-size: 12px; font-weight: bold; color: var(--cl-muted); }
.cl-plan__detail { font-size: 12px; line-height: 1.7; margin: 0; }
.cl-plan__detail dt { font-weight: bold; margin-top: 6px; }
.cl-plan__detail dd { margin: 0; }
.cl-info { margin-top: 16px; background: var(--cl-bg); border-radius: 4px; padding: 12px 14px; font-size: 14px; line-height: 1.8; }
.cl-info__title { font-weight: bold; }
.cl-info ul { list-style: disc; padding-left: 1.5em; margin: 4px 0 0; }

/* カラー */
.cl-selected { text-align: center; margin-bottom: 16px; }
.cl-selected__image { display: block; max-width: 420px; width: 100%; height: auto; margin: 0 auto; }
.cl-selected__name { font-weight: bold; font-size: 16px; margin-top: 8px; }
.cl-selected__color { font-size: 14px; color: var(--cl-muted); }
/* カラー：名前の長さに関係なく同じ幅で並べる（長い名前は2行に折り返し、名前の高さをそろえてラジオの位置を合わせる） */
.cl-colors { display: grid; grid-template-columns: repeat(auto-fit, 92px); justify-content: center; gap: 16px 8px; }
@media (min-width: 640px) { .cl-colors { grid-template-columns: repeat(auto-fit, 120px); gap: 20px 12px; } }
.cl-color { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; cursor: pointer; font-size: 12px; }
.cl-color__name { min-height: 2.8em; line-height: 1.4; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
.cl-color input[type="radio"] { order: 3; }
.cl-color:has(input:checked) .cl-swatch { outline: 3px solid var(--cl-accent); outline-offset: 2px; }

/* オプション */
.cl-option__price { display: block; margin-top: 6px; color: var(--cl-accent); font-size: 12px; font-weight: bold; }
.cl-choice.is-disabled { opacity: .45; cursor: not-allowed; }
.cl-choice.is-disabled .cl-option__price { color: var(--cl-muted); }
.cl-option-group { border: 0; margin: 0 0 20px; padding: 0; }
.cl-option-group legend { font-size: 14px; font-weight: bold; margin-bottom: 8px; }
.cl-option__image { display: block; margin-top: 8px; }
.cl-option__image img { display: block; width: 100%; height: auto; max-height: 120px; object-fit: contain; }

/* 確認 */
.cl-summary { font-size: 14px; margin: 0; border-top: 1px solid var(--cl-border); }
.cl-summary > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--cl-border); }
@media (min-width: 768px) { .cl-summary > div { grid-template-columns: 1fr 2fr; } }
.cl-summary dt { font-weight: 600; }
.cl-summary dd { margin: 0; }
.cl-price { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 20px; padding: 16px; border: 2px solid var(--cl-accent); border-radius: 4px; }
.cl-price__label { font-weight: bold; }
.cl-price__value { color: var(--cl-accent); font-weight: bold; font-size: 16px; }
.cl-price__value span[data-cl-price] { font-size: 32px; }
.cl-price__tax { font-size: 12px; margin-left: 2px; color: var(--cl-text); }

/* ボタン */
.cl-actions__row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.cl-actions__row + .cl-actions__row { margin-top: 12px; }
@media (min-width: 640px) { .cl-actions__row { flex-direction: row; } }
.cl-actions > .cl-btn { display: flex; margin: 0 auto; }
.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: var(--cl-accent);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  padding: 12px 32px;
  cursor: pointer;
  text-align: center;
}
@media (min-width: 640px) { .cl-btn { width: auto; } }
.cl-btn:disabled { opacity: .6; cursor: default; }
/* サイト共通 CSS（a, button に下線・色・transition）を打ち消す */
.cl-estimate .cl-btn, .cl-estimate .cl-btn:hover { text-decoration: none; color: #FFFFFF; transition: opacity .2s; }
.cl-estimate .cl-btn:hover { opacity: .85; }
.cl-estimate .cl-btn--back, .cl-estimate .cl-btn--back:hover { color: var(--cl-text); }




.cl-btn--back { background: var(--cl-bg); color: var(--cl-text); border: 1px solid var(--cl-border); font-weight: 500; }
a.cl-btn, a.cl-btn:hover, a.cl-btn:visited { text-decoration: none; }
a.cl-btn--back, a.cl-btn--back:hover, a.cl-btn--back:visited { color: var(--cl-text); }

/* オプション選択（option-modal.css を共用）。この画面のラジオ表示の強制を、モーダル内は option-modal.css の大きさに戻す */
.cl-estimate .option-modal__label input[type="radio"] { width: 18px !important; height: 18px !important; margin: 4px 0 0 !important; }
.cl-estimate .cost__card { margin-top: 0; background-color: #F5F6F8; }
.cl-estimate .option-row { border-bottom-color: #E2E4E8; }
/* カードの見出しの帯は、lineup のお見積り（共通 CSS）では青。この画面では他と揃えて赤にする */
.cl-estimate .cost__card-header { background-color: var(--cl-accent); }
.option-modal__label.is-disabled { opacity: .45; cursor: not-allowed; }
.option-modal__label.is-disabled:hover { background-color: transparent; }
.option-modal__unavailable { margin-top: 6px; font-size: 12px; color: #666; }

/* サイト共通 CSS で li の黒丸が消されるため、この画面の箇条書きは明示する */
.cl-estimate .cl-info ul li { list-style: disc outside; margin: 0; }

/* =========================================================
   プランに含まれる内容（STEP1 のプラン欄・STEP3）
   ========================================================= */
.cl-pd { display: grid; gap: 12px; margin-top: 6px; }
.cl-pd__lead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 10px 12px; border-radius: 4px; background: #FFF4F4; font-size: 13px; font-weight: bold; line-height: 1.6; }
.cl-pd__base { color: var(--cl-text); }
.cl-pd__plus { color: var(--cl-accent); font-size: 16px; }
.cl-pd__pack { color: var(--cl-accent); }
.cl-pd__fee { color: var(--cl-accent); font-weight: normal; font-size: 12px; }
.cl-pd__group { border: 1px solid #DDDDDD; border-radius: 4px; overflow: hidden; }
.cl-pd__title { margin: 0; padding: 6px 12px; background: var(--cl-bg); border-bottom: 1px solid #DDDDDD; font-size: 13px; font-weight: bold; }
.cl-pd__term { margin-left: 6px; font-size: 12px; font-weight: normal; color: var(--cl-muted); }
/* その契約期間に含まれない項目（回数 0）は隠す（li の display 指定に負けないように） */
.cl-pd__empty { margin: 0; padding: 8px 12px; border: 1px dashed #DDDDDD; border-radius: 4px; color: var(--cl-muted); font-size: 12px; }
.cl-pd__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 0; padding: 4px 12px 8px; list-style: none; column-gap: 24px; }
.cl-estimate .cl-pd__items li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dotted #CCCCCC; list-style: none; font-size: 13px; line-height: 1.5; }
.cl-pd__count { flex-shrink: 0; color: var(--cl-accent); font-weight: bold; }
/* STEP1 のプラン欄（幅が狭い）では詰めて表示 */
.cl-plan .cl-pd__lead { padding: 6px 8px; font-size: 12px; }
.cl-plan .cl-pd__title { padding: 4px 8px; font-size: 12px; }
.cl-plan .cl-pd__items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 2px 8px 6px; column-gap: 16px; }
.cl-estimate .cl-plan .cl-pd__items li { padding: 3px 0; font-size: 12px; }

/* =========================================================
   STEP3 の申込区分ボタン（カード型）
   ========================================================= */
.cl-applicant-buttons { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 720px; margin: 0 auto 16px; }
@media (min-width: 640px) { .cl-applicant-buttons { grid-template-columns: 1fr 1fr; } }
.cl-estimate .cl-apply {
  display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 18px; text-align: left; cursor: pointer;
  background: #FFFFFF; border: 2px solid var(--cl-accent); border-radius: 8px; color: var(--cl-text); text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08); transition: transform .15s, box-shadow .15s;
}
.cl-estimate .cl-apply:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(223, 18, 26, .18); text-decoration: none; color: var(--cl-text); }
.cl-estimate .cl-apply:disabled { opacity: .6; transform: none; cursor: default; }
.cl-apply__head { display: flex; align-items: center; gap: 12px; }
.cl-apply__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #FFF4F4; color: var(--cl-accent); }
.cl-apply__body { display: flex; flex-direction: column; gap: 2px; }
.cl-apply__type { font-size: 17px; font-weight: bold; line-height: 1.4; }
.cl-apply__desc { font-size: 12px; color: var(--cl-muted); }
.cl-apply__cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 4px; background: var(--cl-accent); color: #FFFFFF; font-size: 15px; font-weight: bold; }
.cl-apply__arrow { transition: transform .15s; }
.cl-estimate .cl-apply:hover .cl-apply__arrow { transform: translateX(4px); }

/* =========================================================
   リアルタイムの見積もり（画面下に固定）
   ========================================================= */
.cl-estimate { padding-bottom: 110px; }
.cl-livebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #FFFFFF; border-top: 3px solid var(--cl-accent); box-shadow: 0 -4px 12px rgba(0, 0, 0, .12); }
.cl-livebar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 64rem; margin: 0 auto; padding: 10px 16px; }
.cl-livebar__title { margin: 0; font-size: 12px; font-weight: bold; color: var(--cl-accent); }
.cl-livebar__meta { margin: 2px 0 0; font-size: 12px; color: var(--cl-muted); line-height: 1.5; }
.cl-livebar__price { flex-shrink: 0; margin: 0; color: var(--cl-accent); font-weight: bold; white-space: nowrap; }
.cl-livebar__amount { font-size: 28px; display: inline-block; transition: transform .2s; }
.cl-livebar__yen { font-size: 14px; margin-left: 2px; }
.cl-livebar__from { font-size: 16px; margin-left: 2px; }
.cl-livebar__amount.is-updated { transform: scale(1.12); }
@media (max-width: 639px) { .cl-livebar__amount { font-size: 22px; } .cl-livebar__inner { padding: 8px 12px; } }