/* page-booking.php 専用のスタイル */
@layer kbt-mock {
  .bk{--disp:"Hiragino Mincho ProN","Yu Mincho",YuMincho,ui-serif,Georgia,serif;--hair:#ece8e2}

  /* 進行ステップ */
  .steps3{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);background:var(--paper)}
  .steps3 div{padding:16px 12px;text-align:center;font-size:14px;color:#a8a29a;letter-spacing:.06em;position:relative}
  .steps3 div b{display:block;font-family:var(--disp);font-size:17px;color:#c9c3bb;margin-bottom:4px;font-weight:400}
  .steps3 div.on{background:var(--white);color:var(--brass);font-weight:700;box-shadow:inset 0 -2px 0 var(--brass)}
  .steps3 div.on b{color:var(--brass)}
  .steps3.four{grid-template-columns:repeat(4,1fr)}
  @media (max-width:820px){ .steps3.four{grid-template-columns:repeat(2,1fr)} }

  /* フォーム */
  .bform{padding:46px 56px 56px;background:var(--white)}
  .fsec{margin-bottom:44px}
  .fsec:last-of-type{margin-bottom:30px}
  .fsec__h{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;border-bottom:1px solid #2b2723;margin-bottom:24px}
  .fsec__n{font-family:var(--disp);font-size:15px;color:var(--brass);flex:none}
  .fsec__h h3{font-size:17px;font-weight:700;letter-spacing:.02em}
  .fsec__h .fsec__note{font-size:14px;color:#a8a29a;margin-left:auto}
  .frow{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--hair);align-items:start}
  .frow:last-child{border-bottom:0}
  .frow>label,.frow .lbl{font-size:14px;font-weight:700;padding-top:9px;color:#2b2723}
  /* 必須は赤い * だけで示します（mock.css の .req が地の指定）。任意には何も付けません。 */
  .req{font-weight:700}
  .reqnote{font-size:14px;color:#a8a29a;margin-bottom:22px}
  .reqnote .req{margin-left:0;margin-right:3px}
  /* 任意の欄の札（ご提出書類の運転免許証・パスポート） */
  .fin input[type=text],.fin input[type=email],.fin input[type=tel],.fin select,.fin textarea{
    width:100%;font:inherit;font-size:14px;padding:11px 13px;border:1px solid #d8d3cc;background:var(--white);color:var(--ink);border-radius:3px;
  }
  .fin input:focus,.fin select:focus,.fin textarea:focus{outline:2px solid var(--brass);outline-offset:-1px;border-color:var(--brass)}
  /* 1項目1行。名・姓（.two）や年・月・日（.three）のように、合わせて1つの値になるものは横並び。
     緊急連絡先のお名前と電話番号のように、別々の項目は .stack で縦に積みます。 */
  .fin .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .fin .stack{display:grid;grid-template-columns:1fr;gap:12px}
  .fin .three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
  .fin .hint{font-size:14px;color:#a8a29a;margin-top:7px;line-height:1.75}
  .fin .chk{display:flex;align-items:center;gap:9px;font-size:14px;padding:7px 0;cursor:pointer}
  .fin .chk input{width:16px;height:16px;accent-color:var(--brass);margin:0}
  .optgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
  .upload{border:1px dashed #cfc8c0;background:#faf9f7;padding:22px;text-align:center;border-radius:3px}
  .upload b{display:block;font-size:14px;margin-bottom:6px}
  .upload p{font-size:14px;color:#a8a29a;line-height:1.8}
  .agree{background:#faf9f7;border:1px solid var(--hair);padding:22px 24px}
  .agree .chk{font-size:14px}
  .agree a{color:var(--brass)}

  /* ===== ご確認事項（同意項目） =====
     仮予約ページと本予約ページで同じ仕様にしています。 */
  .agree-lead{font-size:14px;line-height:1.95;color:#5a544d;margin-bottom:16px}
  .agree-count{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;letter-spacing:.12em;color:#a8a29a;font-weight:700;padding-bottom:9px;border-bottom:1px solid var(--hair);margin-bottom:12px}
  .agree-count b{font-family:var(--disp);font-size:16px;color:var(--brass);letter-spacing:0}
  .agrees{list-style:none}
  .agrees li{border:1px solid var(--hair);background:#faf9f7;margin-bottom:10px;transition:border-color .15s,background .15s}
  .agrees li:last-child{margin-bottom:0}
  .agrees li:hover{border-color:#cfc8c0}
  .agrees li:has(input:checked){border-color:var(--brass);background:var(--white)}
  .agree-item{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;cursor:pointer}
  /* チェックは四角アイコン。OS標準の見た目に頼らず、
     角丸の枠＋白いチェックマーク（2辺の罫を45度回したもの）を自前で描いています。 */
  .agree-item input{
    appearance:none;-webkit-appearance:none;
    position:relative;flex:none;width:22px;height:22px;margin:1px 0 0;
    border:1px solid #cfc8c0;border-radius:3px;background:var(--white);
    cursor:pointer;transition:background-color .15s,border-color .15s}
  .agree-item input::after{
    content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;
    border-right:2px solid #fff;border-bottom:2px solid #fff;
    transform:rotate(45deg);opacity:0;transition:opacity .15s}
  .agree-item input:checked{background:var(--brass);border-color:var(--brass)}
  .agree-item input:checked::after{opacity:1}
  .agree-item input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
  /* 車両保険の選択は丸いラジオ。チェックの代わりに中央の点で選択を示します */
  .agree-item input[type=radio]{border-radius:50%}
  .agree-item input[type=radio]::after{left:6px;top:6px;width:8px;height:8px;border:0;border-radius:50%;background:#fff;transform:none}
  #vins-consent{border-color:#c00c18}
  #vins-consent:has(input:checked){border-color:var(--brass)}
  .agree-txt b{display:block;font-size:14px;font-weight:700;line-height:1.8;color:#2b2723}
  .agree-txt small b{display:inline;font-size:inherit;line-height:inherit} /* 説明文の中の太字は改行させない */
  .agree-txt small{display:block;font-size:14px;color:#8a837b;line-height:1.95;margin-top:8px}
  .agree-txt a{color:var(--brass)}
  @media (max-width:820px){ .agree-item{padding:16px 18px} }
  .subwrap{text-align:center;padding-top:10px}
  .subbtn{background:#c00c18;color:#fff;border:0;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.14em;padding:18px 66px;cursor:pointer;border-radius:3px}
  .subbtn:hover{background:#9d0a13}
  .subwrap p{font-size:14px;color:#a8a29a;margin-top:14px;line-height:1.8}
  @media (max-width:820px){
    .bform{padding:28px 20px 36px}
    .frow{grid-template-columns:1fr;gap:8px;padding:14px 0}
    .frow>label,.frow .lbl{padding-top:0}
    .fin .two,.fin .three,.optgrid{grid-template-columns:1fr}
  }

  /* 確定済みのご予約内容 */
  .fixed{background:#faf9f7;border:1px solid var(--hair);padding:0;margin-bottom:44px}
  .fixed__h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 26px;border-bottom:1px solid var(--hair);background:var(--white)}
  .fixed__h h3{font-size:15px;font-weight:700}
  .fixed__ref{font-size:14px;color:#a8a29a;letter-spacing:.08em}
  .fixed__ref b{font-family:var(--disp);font-size:15px;color:var(--brass);letter-spacing:.04em;margin-left:8px}
  /* 仮予約ページのサイドバー（.bside / .quotebox）と同じ地色にしています */
  .fixed__b{padding:24px 26px;background:#e6f1f2}
  .fx{display:grid;grid-template-columns:150px 1fr;gap:14px 20px;font-size:14px;align-items:baseline}
  .fx dt{font-size:14px;letter-spacing:.14em;color:#a8a29a;font-weight:600;text-transform:uppercase;padding-top:3px}
  .fx dd{color:#2b2723;line-height:1.8}
  .fx dd b{font-size:16px}
  .fx dd small{display:block;font-size:14px;color:#8a837b;margin-top:3px}
  .quote{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair)}
  .qline{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:7px 0;color:#5a544d}
  .qline b{color:#2b2723}
  /* 車両1台ごとの内訳（見出し・明細・小計） */
  .qbike{padding:6px 0 10px}
  .qbike + .qbike{border-top:1px dashed var(--hair);padding-top:12px}
  .qbike__h{font-size:14px;font-weight:700;color:#2b2723;padding:4px 0}
  .qbike .qline{padding:4px 0 4px 14px}
  .qbike .qline--sub{padding-left:0;font-weight:700;color:#2b2723}
  .qtotal{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 0 4px;margin-top:8px;border-top:1px solid #2b2723}
  .qtotal span{font-size:14px;font-weight:700;letter-spacing:.08em}
  .qtotal b{font-family:var(--disp);font-size:30px;font-weight:400;color:#1b1b1b}
  .qsplit{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:18px}
  .qsplit>div{background:var(--white);padding:15px 18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
  .qsplit span{font-size:14px;font-weight:700;color:#5a544d}
  .qsplit small{display:block;font-size:14px;font-weight:400;color:#a8a29a;margin-top:4px;line-height:1.6}
  .qsplit b{font-family:var(--disp);font-size:20px;font-weight:400;color:#2b2723;white-space:nowrap}
  .qsplit .qdep{background:#faf7fc;box-shadow:inset 3px 0 0 var(--brass)}
  .qsplit .qdep span,.qsplit .qdep b{color:var(--brass)}
  .qnote{margin-top:12px;font-size:14px;color:#8a837b;line-height:1.9}
  .qnote a{color:var(--brass);font-weight:700}
  @media (max-width:820px){ .qsplit{grid-template-columns:1fr} }
  .fixed__note{margin-top:20px;padding:14px 18px;background:var(--white);border:1px solid var(--hair);font-size:14px;color:#5a544d;line-height:1.85}
  .fixed__note a{color:var(--brass);font-weight:700}
  @media (max-width:820px){ .fixed__h,.fixed__b{padding:16px 18px} .fx{grid-template-columns:1fr;gap:4px 0} .fx dt{padding-top:10px} }

  /* 同乗者 */
  .pillion{border:1px solid var(--hair);background:#faf9f7;padding:20px 22px;margin-bottom:12px}
  .pillion__on{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--brass);font-weight:700;margin-bottom:16px}
  .pillion__on::before{content:"●";font-size:14px}
  .pillion__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--hair)}
  .pillion__no{font-size:14px;letter-spacing:.14em;font-weight:700;color:var(--brass)}
  .delbtn{background:none;border:0;font:inherit;font-size:14px;color:#a8a29a;cursor:pointer;text-decoration:underline;padding:0}
  .delbtn:hover{color:#c00c18}
  .addbtn{width:100%;background:var(--white);border:1px dashed #cfc8c0;font:inherit;font-size:14px;font-weight:700;color:var(--brass);padding:13px;cursor:pointer;border-radius:3px}
  .addbtn:hover{border-color:var(--brass);background:#faf7fc}

  /* デポジット案内 */
  .dep{display:none;background:var(--white)}
  .dep.show{display:block}
  .dep__hero{background:#2b2723;color:#f2efeb;padding:52px 56px}
  .dep__hero .ok{font-family:var(--disp);font-size:34px;color:#e8b34a;line-height:1;margin-bottom:18px;width:56px;height:56px;border:2px solid #e8b34a;border-radius:50%;display:flex;align-items:center;justify-content:center}
  .dep__hero h2{font-family:var(--disp);font-size:31px;font-weight:400;margin-bottom:14px;line-height:1.35}
  .dep__hero p{font-size:14px;color:rgba(255,255,255,.72);line-height:2;max-width:640px}
  .dep__amt{
    display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
    margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);
  }
  .dep__amt .lb{font-size:14px;letter-spacing:0.14em;color:#a89ab5;font-weight:600;padding-bottom:8px}
  .dep__amt .yen{font-family:var(--disp);font-size:20px;color:#fff;margin-right:4px}
  .dep__amt .amt{font-family:var(--disp);font-size:46px;color:#fff;line-height:1}
  .dep__amt .depnote{font-size:14px;color:rgba(255,255,255,.6);margin-top:10px;line-height:1.7}

  .dep__cta{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
  .paybtn{display:inline-block;background:#c00c18;color:#fff;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.12em;padding:18px 56px;border-radius:3px}
  .paybtn:hover{background:#9d0a13}
  .dep__cta p{font-size:14px;color:rgba(255,255,255,.5);margin-top:12px}
  @media (max-width:820px){ .paybtn{display:block;text-align:center;padding:16px} }
  .flow5{padding:52px 56px;background:var(--white)}
  .flow5 h3{font-family:var(--disp);font-size:24px;font-weight:400;margin-bottom:32px}
  .tl{border-left:1px solid var(--hair);margin-left:15px}
  .tlitem{position:relative;padding:0 0 34px 38px}
  .tlitem:last-child{padding-bottom:0}
  .tlitem::before{
    content:attr(data-n);position:absolute;left:-15px;top:0;width:30px;height:30px;border-radius:50%;
    background:var(--white);border:1px solid #cfc8c0;color:#a8a29a;
    font-family:var(--disp);font-size:14px;display:flex;align-items:center;justify-content:center;
  }
  .tlitem.done::before{background:var(--brass);border-color:var(--brass);color:#fff;content:"✓"}
  .tlitem.now::before{background:#c00c18;border-color:#c00c18;color:#fff}
  .tlitem .when{font-size:14px;letter-spacing:0.14em;color:#a8a29a;font-weight:600;margin-bottom:6px}
  .tlitem h4{font-size:16px;font-weight:700;margin-bottom:8px}
  .tlitem.now h4{color:#c00c18}
  .tlitem p{font-size:14px;color:#5a544d;line-height:1.95;max-width:660px}

  /* ページ上部の「ご予約確定までの流れ」は、仮予約ページと同じ横並びのパネルにします。
     デポジット案内の中にも .flow5 がありますが、あちらは工程の中に支払い方法の枠
     （.paybox）を抱えていて細い列に収まらないため、縦のタイムラインのままにします。
     そのため、ここでの指定は #steps に限定しています。 */
  #steps .tl{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;border-left:0;margin-left:0}
  /* 枠は --hair（#ece8e2）だと白地の上でほぼ消えるため、パネル用に一段濃い線にします */
  #steps .tlitem{position:static;border:1px solid #ddd6cd;background:#faf9f7;padding:16px 16px 18px}
  /* 番号バッジは静的配置にしてラベルの上へ積み、狭い列でも
     「YOU ARE HERE」のような長いラベルと取り合わないようにします */
  #steps .tlitem::before{position:static;width:24px;height:24px;margin-bottom:12px}
  /* いまの工程。border-width を2pxにするとこの1枚だけ中身が内側にずれるので、
     枠は1pxのままにして、外側に同色の outline を1本足して2px相当に見せています。 */
  #steps .tlitem.now{background:var(--white);border-color:#c00c18;outline:1px solid #c00c18;outline-offset:0}
  #steps .tlitem .when{letter-spacing:.1em;margin-bottom:7px;line-height:1.5}
  /* 「いま」のラベルだけ、赤地の帯にして遠目にも位置が分かるようにします */
  #steps .tlitem.now .when{display:inline-block;background:#c00c18;color:#fff;font-weight:700;
    padding:3px 9px;border-radius:2px;letter-spacing:.14em}
  #steps .tlitem h4{font-size:14px;line-height:1.6;margin-bottom:7px}
  #steps .tlitem p{line-height:1.8;max-width:none}
  @media (max-width:1000px){ #steps .tl{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:640px){ #steps .tl{grid-template-columns:1fr} }
  .paybox{margin-top:16px;border:1px solid var(--hair);background:#faf9f7;padding:22px 24px;max-width:660px}
  .paybox h5{font-size:14px;font-weight:700;margin-bottom:14px;letter-spacing:.04em}
  .paym{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .paym>div{background:var(--white);border:1px solid var(--hair);padding:16px 18px}
  .paym b{display:block;font-size:14px;margin-bottom:6px}
  .paym p{font-size:14px;color:#8a837b;line-height:1.75}
  .deadline{margin-top:14px;font-size:14px;color:#c00c18;font-weight:700}

  .depinfo{padding:0 56px 56px;background:var(--white)}
  .depinfo table{width:100%;border-collapse:collapse;font-size:14px}
  .depinfo th{width:210px;background:#faf9f7;border:1px solid var(--hair);padding:14px 18px;text-align:left;font-weight:700;font-size:14px;vertical-align:top}
  .depinfo td{border:1px solid var(--hair);padding:14px 18px;color:#5a544d;line-height:1.9}
  .depinfo td b{color:#2b2723}
  .backbtn{display:inline-block;margin-top:26px;border:1px solid #2b2723;color:#2b2723;text-decoration:none;padding:13px 30px;font-size:14px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase}
  .backbtn:hover{background:#2b2723;color:#fff}
  @media (max-width:820px){
    .dep__hero{padding:32px 20px}
    .dep__hero h2{font-size:23px}
    .dep__amt .amt{font-size:34px}
    .flow5,.depinfo{padding-left:20px;padding-right:20px}
    .paym{grid-template-columns:1fr}
    .depinfo th,.depinfo td{display:block;width:auto}
  }
}