/* =====================================================================
   お申し込みフォーム（order.html）の見た目 ── C案「くすみローズの額縁」
   色・書体は css/style.css の :root をそのまま使う
   ===================================================================== */
.order-page{background:var(--cream)}
.header__back{margin-left:auto}

/* ---------- 見出し（フォーム冒頭の掲載文） ---------- */
.order-hero{padding:clamp(52px,6vw,88px) 0 clamp(34px,4vw,48px);text-align:center;background:linear-gradient(180deg,var(--cream),var(--petal))}
.order-hero__script{font-family:var(--ff-script);font-size:clamp(34px,3.4vw,44px);line-height:1.2;color:var(--rose)}
.order-hero__title{margin-top:4px;font-family:var(--ff-head);font-size:clamp(28px,3vw,38px);font-weight:400;letter-spacing:.16em;line-height:1.5}
.order-hero__lead{max-width:660px;margin:22px auto 0;font-size:14.5px;line-height:2.15;color:var(--text);text-align:left}
.order-hero__photo{max-width:660px;margin:22px auto 0;padding:14px 18px;background:var(--mat);box-shadow:inset 0 0 0 1px var(--gold);text-align:left;font-size:13px;line-height:1.95;color:var(--text)}
.order-hero__photo-title{margin-bottom:4px;font-weight:700;letter-spacing:.08em;color:var(--gold-ink)}
.done__key{max-width:560px;margin:16px auto 0;padding:10px 14px;background:var(--rose-tint);font-size:13.5px;line-height:1.9;color:var(--rose)}
.order-hero__points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.order-hero__points li{padding:5px 16px;background:var(--mat);box-shadow:inset 0 0 0 1px var(--gold);font-size:13px;font-weight:500;letter-spacing:.06em;line-height:1.7;color:var(--gold-ink)}
.order-demo{max-width:660px;margin:22px auto 0;padding:12px 16px;background:#FFF5D6;color:#6B5200;font-size:13px;line-height:1.8}

.order-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,56px);align-items:start;padding-top:clamp(36px,4vw,56px);padding-bottom:var(--sec)}
.order-form{padding:clamp(26px,3.6vw,48px);background:var(--paper);box-shadow:0 0 0 1px var(--hair),0 24px 48px -40px rgba(67,55,59,.5)}

/* ---------- 進み具合 ---------- */
.stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:40px}
.stepper li{position:relative;padding-top:42px;text-align:center;font-size:12px;line-height:1.5;letter-spacing:.06em;color:var(--sub)}
.stepper li span{
  position:absolute;top:0;left:50%;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin-left:-16px;
  border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair);font-family:var(--ff-head);font-size:15px;
  color:var(--sub);transition:background .3s,box-shadow .3s,color .3s;
}
.stepper li::before{content:"";position:absolute;top:16px;left:-50%;right:50%;height:1px;background:var(--hair)}
.stepper li:first-child::before{display:none}
.stepper li.is-current{color:var(--ink);font-weight:500}
.stepper li.is-current span{background:var(--rose);box-shadow:none;color:#fff}
.stepper li.is-done span{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-ink)}
.stepper li.is-done::before,.stepper li.is-current::before{background:var(--gold)}

/* ---------- ステップ ---------- */
.step{min-width:0;margin:0;padding:0;border:0}
.js .step:not(.is-active){display:none}
.step__title{display:block;width:100%;margin-bottom:4px;padding:0 0 20px;border-bottom:1px solid var(--gold);font-family:var(--ff-head);font-size:clamp(22px,2.2vw,28px);font-weight:400;letter-spacing:.12em;line-height:1.5}
.step__title em{display:block;margin-bottom:2px;font-family:var(--ff-script);font-size:24px;font-style:normal;letter-spacing:0;color:var(--rose)}
.step__title:focus{outline:none}
.step__empty{padding:28px 0;font-size:14px;color:var(--sub)}
.step__nav{display:flex;align-items:center;gap:16px;margin-top:36px}
.step__nav .btn{margin-left:auto}
.text-btn{padding:10px 4px;border:0;background:none;font-size:13.5px;letter-spacing:.08em;color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold)}
.text-btn:hover{color:var(--ink)}
.group,.panel{min-width:0}

/* ---------- 入力欄 ---------- */
.field{padding:26px 0;border-bottom:1px solid var(--hair)}
.field__label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:14px;font-size:14.5px;font-weight:700;letter-spacing:.04em;line-height:1.6;color:var(--ink)}
.field__label--sub{margin:20px 0 10px;font-size:13.5px;font-weight:500}
.req,.opt{padding:1px 8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;line-height:1.7}
.req{background:var(--rose);color:#fff}
.opt{background:var(--petal);color:var(--sub)}
.field__hint{margin-top:10px;font-size:12.5px;line-height:1.9;color:var(--sub)}
.field__error{margin-top:8px;font-size:12.5px;line-height:1.7;color:#B3261E}
.field__error:empty{display:none}
.sub-field{margin-top:4px}

.order-form input[type="text"],.order-form input[type="email"],.order-form input[type="date"],.order-form select,.order-form textarea{
  width:100%;padding:13px 16px;border:1px solid #DCCFCB;border-radius:2px;background:var(--paper);
  font-size:16px;line-height:1.7;transition:border-color .2s,box-shadow .2s;
}
.order-form input[type="date"]{width:auto;min-width:220px}
.order-form textarea{min-height:110px;resize:vertical}
.order-form input:focus,.order-form textarea:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(158,100,117,.12)}
.order-form [aria-invalid="true"]{border-color:#B3261E}
.order-form ::placeholder{color:#B4A8AC}
#personality_other{margin-top:12px}

/* 大きめの選択カード（メニュー・サイズ・お申し込み区分） */
.choices{display:grid;gap:12px}
.choices--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.choices--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice__body{
  position:relative;display:block;height:100%;padding:18px 40px 18px 18px;border:1px solid #DCCFCB;border-radius:2px;background:var(--paper);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.choice__body::after{content:"";position:absolute;top:18px;right:14px;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px #CDBFBA;background:var(--paper);transition:box-shadow .2s}
.choice__body b{display:block;font-family:var(--ff-head);font-size:18px;font-weight:400;letter-spacing:.06em;line-height:1.5}
.choice__body small{display:block;margin-top:4px;font-size:12px;line-height:1.7;color:var(--text)}
.choice__price{display:block;margin-top:10px;font-size:16px;font-weight:700;line-height:1.5;color:var(--ink)}
.choice__price em{display:block;font-size:11.5px;font-style:normal;font-weight:500;color:var(--rose)}
.choice:hover .choice__body{border-color:#C4B2AC}
.choice input:checked + .choice__body{border-color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose);background:#FDF8F8}
.choice input:checked + .choice__body::after{box-shadow:inset 0 0 0 6px var(--rose)}
.choice input:focus-visible + .choice__body{outline:2px solid var(--rose);outline-offset:3px}
.choice--monitor .choice__body b{color:var(--rose)}
.choices--4 .choice__body{padding:16px 14px}
.choices--4 .choice__body::after{top:auto;bottom:14px;right:12px}

/* 小さな選択肢（チップ） */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px;border:1px solid #DCCFCB;border-radius:2px;background:var(--paper);font-size:13.5px;line-height:1.5;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
.chip:hover span{border-color:#C4B2AC}
.chip input:checked + span{border-color:var(--rose);background:var(--rose);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--rose);outline-offset:3px}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(67,55,59,.15)}
.chip input:checked + span .sw{box-shadow:0 0 0 2px #fff}

/* 縦に並べる選択肢（文の長いもの） */
.radios{display:grid;gap:8px}
.radio{position:relative;cursor:pointer}
.radio input{position:absolute;opacity:0;pointer-events:none}
.radio span{position:relative;display:block;padding:12px 16px 12px 46px;border:1px solid #DCCFCB;border-radius:2px;background:var(--paper);font-size:14px;line-height:1.7;transition:border-color .2s,background .2s}
.radio span::before{content:"";position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;box-shadow:inset 0 0 0 1px #CDBFBA;background:var(--paper);transition:box-shadow .2s}
.radio:hover span{border-color:#C4B2AC}
.radio input:checked + span{border-color:var(--rose);background:#FDF8F8}
.radio input:checked + span::before{box-shadow:inset 0 0 0 6px var(--rose)}
.radio input:focus-visible + span{outline:2px solid var(--rose);outline-offset:3px}

/* ---------- お写真の欄 ---------- */
.upl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.upl{min-width:0}
.upl-grid .upl{display:flex;flex-direction:column}
.upl-grid .upl__label{flex:1 0 auto}   /* 説明の長さがちがっても、写真を選ぶ枠の位置をそろえる */
.upl__label{margin-bottom:8px;font-size:13.5px;font-weight:700;line-height:1.6;color:var(--ink)}
.upl__label span{display:block;font-size:12px;font-weight:400;color:var(--sub)}
.upl__drop{position:relative;display:grid;place-items:center;min-height:128px;padding:20px 14px;border:1px dashed #CBB9B3;border-radius:2px;background:var(--cream);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.upl__drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.upl__drop:hover,.upl__drop.is-over{border-color:var(--rose);background:#FDF6F6}
.upl__drop:focus-within{outline:2px solid var(--rose);outline-offset:3px}
.upl__body b{display:inline-block;padding:8px 20px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rose);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--rose)}
.upl__body small{display:block;margin-top:10px;font-size:12px;line-height:1.7;color:var(--sub)}
.upl--wide .upl__drop{min-height:104px}
/* 1枚の欄は、選んだら写真だけを大きく出す（もう一度押すと選び直せるように、選ぶ欄は小さく残す） */
.upl.is-filled[data-max="1"] .upl__drop{min-height:0;padding:8px}
.upl.is-filled[data-max="1"] .upl__body small{display:none}
.upl.is-filled[data-max="1"] .upl__body b{padding:4px 14px;font-size:12px}
.upl.is-filled[data-max="1"] .upl__body b::before{content:"選び直す："}
.upl__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.upl__thumbs:empty{display:none}
.upl[data-max="1"] .upl__thumbs{grid-template-columns:1fr}
.upl__thumbs li{position:relative;aspect-ratio:1;overflow:hidden;background:var(--petal)}
.upl[data-max="1"] .upl__thumbs li{aspect-ratio:4/3}
.upl__thumbs img{width:100%;height:100%;object-fit:cover}
.upl__name{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;overflow:hidden;background:rgba(255,255,255,.9);font-size:10px;white-space:nowrap;text-overflow:ellipsis;color:var(--text)}
.upl__thumbs li:not(.is-noimg) .upl__name{display:none}
.upl__thumbs button{position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:rgba(67,55,59,.75);color:#fff;font-size:15px;line-height:26px;cursor:pointer}

/* 迷惑送信よけの欄（画面には出さない） */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.order-note{margin-top:22px;padding:14px 18px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--hair);font-size:13px;line-height:1.9;color:var(--text)}

/* ---------- モニター応募の方のみ ---------- */
.monitor-box{margin-top:26px;padding:22px clamp(16px,2.4vw,26px) 4px;background:#FDF7F7;box-shadow:inset 0 0 0 1px #E8CDD3}
.monitor-box__title{font-family:var(--ff-head);font-size:18px;letter-spacing:.1em;color:var(--rose)}
.monitor-box__text{margin-top:8px;font-size:13px;line-height:1.9;color:var(--text)}
.monitor-box .field:last-child{border-bottom:0}

/* ---------- 確認 ---------- */
.review__title{margin-top:26px;font-family:var(--ff-head);font-size:17px;letter-spacing:.1em}
.review{margin:12px 0 6px;border-top:1px solid var(--hair)}
.review div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:13.5px;line-height:1.85}
.review dt{color:var(--sub)}
.review dd{white-space:pre-wrap;word-break:break-word}

.terms-box{margin-top:30px;padding:24px clamp(16px,2.4vw,28px);background:var(--cream);box-shadow:inset 0 0 0 1px var(--hair)}
.terms-box__title{padding-bottom:12px;border-bottom:1px solid var(--gold);font-family:var(--ff-head);font-size:17px;letter-spacing:.1em}
.terms-box dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);font-size:13px;line-height:1.95}
.terms-box dl div:last-child{border-bottom:0;padding-bottom:0}
.terms-box dt{font-weight:700;color:var(--gold-ink)}
.terms-box dd p+p{margin-top:8px}
.terms-box a{color:var(--rose);border-bottom:1px solid currentColor}

.agrees{margin-top:30px}
.agree-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair)}
.agree-item p{font-size:14px;line-height:1.8;color:var(--ink)}
.check{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid #DCCFCB;border-radius:2px;background:var(--paper);font-size:13px;line-height:1.5;white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s}
.check input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--rose)}
.check:has(input:checked){border-color:var(--rose);background:#FDF8F8;color:var(--rose)}

/* 送信中の表示 */
.send-status{margin-top:14px;font-size:13px;line-height:1.8;color:var(--text);text-align:right}
.send-status:empty{display:none}

/* ---------- 選択中の内容 ---------- */
.summary{position:sticky;top:calc(var(--header-h) + 24px);padding:26px 24px 22px;background:var(--mat);box-shadow:var(--frame)}
.summary__title{padding-bottom:12px;border-bottom:1px solid var(--gold);font-family:var(--ff-head);font-size:17px;letter-spacing:.1em}
.summary dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:13px;line-height:1.6}
.summary dt{flex:0 0 auto;color:var(--sub)}
.summary dd{text-align:right}
.summary__price{margin-top:12px}
.summary__price p{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;font-size:13px;color:var(--sub)}
.summary__price b{font-size:19px;font-weight:700;text-align:right;color:var(--ink);transition:color .3s}
.summary__price .mon b{color:var(--rose)}
.summary__price.is-monitor .normal b{font-size:14px;color:var(--sub);text-decoration:line-through}
.summary__price.is-normal .mon b{font-size:14px;color:var(--sub)}
.summary__note{margin-top:12px;font-size:11.5px;line-height:1.8;color:var(--sub)}

/* ---------- 送信後 ---------- */
.done{padding:clamp(80px,10vw,140px) 0;background:linear-gradient(180deg,var(--cream),var(--petal))}
.done:focus{outline:none}
.done__title{margin-top:6px;font-family:var(--ff-head);font-size:clamp(22px,2.4vw,30px);font-weight:400;letter-spacing:.12em;line-height:1.7}
.done__text{margin-top:22px;font-size:14.5px;line-height:2.2;color:var(--text)}
.done__sign{margin-top:18px;font-family:var(--ff-script);font-size:30px;color:var(--ink)}
.done__no{margin-top:22px;font-size:13px;letter-spacing:.1em;color:var(--sub)}
.done__no b{display:block;margin-top:4px;font-size:24px;font-weight:700;letter-spacing:.08em;color:var(--ink)}
.done__mail{margin-top:22px;font-size:12.5px;color:var(--sub)}
.done .btn{margin-top:30px}

/* =====================================================================
   タブレット・スマホ
   ===================================================================== */
@media (max-width:1080px){
  .choices--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .order-page .footer{padding-bottom:48px}
  .order-layout{grid-template-columns:1fr;gap:28px;padding-top:24px}
  .order-form{padding:22px 16px 26px;margin:0 calc(var(--gutter) * -1 + 8px)}
  .summary{position:static}
  .stepper{margin-bottom:30px}
  .stepper li{font-size:10.5px}
  .order-hero__lead{font-size:13.5px}
  .choice__body{padding:16px 36px 16px 14px}
  .choice__body::after{top:16px;right:12px}
  .choice__body b{font-size:16px}
  .choices--4 .choice__body{padding:14px 12px 16px}
  .upl-grid{gap:10px}
  .upl__drop{min-height:112px;padding:16px 8px}
  .upl__body b{padding:7px 12px;font-size:12px}
  .review div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .review dt{font-size:12px}
  .terms-box dl div{grid-template-columns:1fr;gap:4px}
  .agree-item{grid-template-columns:1fr;gap:8px}
  .check{justify-self:start}
  .send-status{text-align:left}
  .step__nav{flex-wrap:wrap}
  .step__nav .btn{flex:1 1 auto}
}
@media (max-width:420px){
  .choices--2{grid-template-columns:1fr}
}