@charset "UTF-8";
/* 神メソッド・AIジェルネイル講座 ── 申込・確認・決済
   色と余白の単位は docs/design-language.md に従う。
   形の方針: **箱で区切らない。** 罫線・余白・文字の大きさで軽重を出す。
   影は1つも落とさない。カードを積むと全部同じ重みに見え、価格が脇役になる。 */

:root{
  --ink:#241D26;
  --ink-2:#635868;
  --plum:#7A3F68;
  --plum-deep:#5E2F4F;
  --paper:#FFFFFF;
  --tint:#FBF8FA;          /* 主役の段だけに敷く、ごく薄いプラム */
  --hair:rgba(36,29,38,.11);
  --hair-2:rgba(36,29,38,.06);
  --field:#C7BDCC;
  --success:#1D7A5F;
  --error:#B03A4A;   --error-bg:#FDEEF0;
  --disabled:#9A90A2;

  --sp-section:40px; --sp-head:20px; --sp-gap:16px;
  --sp-pad:24px; --sp-inner:12px; --sp-tight:8px;
}
@media (max-width:640px){ :root{ --sp-section:32px; --sp-pad:20px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:15px; line-height:1.85;
  font-feature-settings:"palt";
  word-break:auto-phrase; text-wrap:pretty;
}
::selection{ background:#EADFE6 }

.wrap{ max-width:600px; margin:0 auto; padding:0 var(--sp-pad) 96px }

/* ---------- 冠 ---------- */
.site-head{ border-bottom:1px solid var(--hair); padding:18px var(--sp-pad) }
.site-head__inner{ max-width:600px; margin:0 auto }
.site-head__org{
  display:block; font-size:11px; font-weight:700; color:var(--plum);
  letter-spacing:.14em; margin-bottom:2px;
}
.site-head__note{ display:block; font-size:12px; color:var(--ink-2); letter-spacing:.04em }

.site-foot{ border-top:1px solid var(--hair); padding:var(--sp-pad); margin-top:96px }
.site-foot__inner{ max-width:600px; margin:0 auto; font-size:12px; color:var(--ink-2) }
.site-foot__links{ margin-bottom:6px }
.site-foot a{ color:var(--plum); text-underline-offset:3px }

/* ---------- みちすじ ──ウィジェットにしない。数字と細い線だけ ---------- */
.rail{
  display:flex; align-items:center; gap:var(--sp-inner);
  margin:40px 0 56px; padding:0; list-style:none;
  font-size:11px; letter-spacing:.1em; color:var(--disabled);
}
.rail__step{ display:flex; align-items:center; gap:6px; white-space:nowrap }
.rail__step::after{
  content:""; width:18px; height:1px; background:var(--hair); margin-left:6px;
}
.rail__step:last-child::after{ display:none }
.rail__n{ font-weight:700; font-variant-numeric:tabular-nums }
.rail__step[data-state="passed"]{ color:var(--ink-2) }
.rail__step[data-state="passed"] .rail__n::before{
  content:""; display:inline-block; width:4px; height:7px; margin-right:5px;
  border:solid var(--plum); border-width:0 1.5px 1.5px 0; transform:rotate(45deg) translateY(-1px);
}
.rail__step[data-state="current"]{ color:var(--plum); font-weight:700 }

/* ---------- 見出し ---------- */
.page-head{ margin-bottom:56px }
.page-head__title{
  font-size:31px; font-weight:800; line-height:1.4; letter-spacing:-.01em;
  margin:0 0 14px;
}
.page-head__lead{ font-size:14px; line-height:1.9; color:var(--ink-2); margin:0 }

/* セクション ── 棒ではなく、小さな見出しと上の罫線で区切る */
.section{ margin-top:56px; padding-top:28px; border-top:1px solid var(--hair) }
.section--plain{ border-top:0; padding-top:0 }
.section__title{
  font-size:11px; font-weight:700; color:var(--plum);
  letter-spacing:.14em; margin:0 0 var(--sp-pad);
}

/* ---------- 買うもの ── この画面の主役。ここだけ地を敷く ---------- */
/* 地は本文の外まで伸ばし、中身の左端はフォームと揃える
   （枠の内側に押し込むと、下の入力欄と文字の頭がずれる） */
.offer{
  background:var(--tint); border-top:1px solid var(--hair-2); border-bottom:1px solid var(--hair-2);
  margin:0 calc(var(--sp-pad) * -1); padding:30px var(--sp-pad);
}
.offer__name{
  font-size:19px; font-weight:800; line-height:1.5; letter-spacing:-.005em;
  margin:0 0 20px;
}
.offer__price{
  display:flex; align-items:baseline; gap:7px;
  padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--hair);
  font-variant-numeric:tabular-nums;
}
.offer__price b{ font-size:44px; font-weight:800; line-height:1; letter-spacing:-.035em }
.offer__price i{ font-size:19px; font-weight:800; font-style:normal; letter-spacing:-.01em }
.offer__price span{ font-size:12px; color:var(--ink-2); letter-spacing:.06em }

/* 中身は箇条書きにしない。左に項目・右に量、の対で見せる */
.spec{ margin:0; font-size:13px }
.spec div{ display:flex; gap:var(--sp-gap); padding:7px 0 }
.spec dt{ flex:1; min-width:0; color:var(--ink) }
.spec dd{ margin:0; color:var(--ink-2); text-align:right; white-space:nowrap }

/* ---------- 入力 ---------- */
.field{ margin-bottom:26px }
.field:last-child{ margin-bottom:0 }
.field__label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.06em; margin-bottom:9px;
}
.field__req{ color:var(--plum); margin-left:6px; font-size:11px; letter-spacing:.08em }
.field__opt{ color:var(--disabled); margin-left:6px; font-size:11px; letter-spacing:.08em }
.field__help{ font-size:12px; line-height:1.75; color:var(--ink-2); margin:9px 0 0 }
.lead-note{ font-size:13px; color:var(--ink-2); margin:0 0 var(--sp-pad) }

input[type=text],input[type=email],input[type=tel],select{
  width:100%; padding:13px 14px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--field); border-radius:3px;
  transition:border-color .12s;
}
input::placeholder{ color:#B4A9BA }
input:hover,select:hover{ border-color:var(--ink-2) }
input:focus-visible,select:focus-visible{
  outline:none; border-color:var(--plum); box-shadow:0 0 0 3px rgba(122,63,104,.13);
}
button:focus-visible,a:focus-visible{ outline:2px solid var(--plum); outline-offset:3px }
input[aria-invalid="true"]{ border-color:var(--error); background:var(--error-bg) }

.row{ display:flex; gap:10px }
.row > *{ flex:1; min-width:0 }
.row--zip > :last-child{ flex:1.4 }
@media (max-width:420px){ .row{ flex-wrap:wrap } .row > *{ flex-basis:100% } }

.choice{ display:flex; gap:10px }
.choice--stack{ flex-direction:column }
.choice label{
  flex:1; display:flex; align-items:flex-start; gap:11px;
  padding:14px; border:1px solid var(--field); border-radius:3px; cursor:pointer;
  font-size:14px; line-height:1.6; transition:border-color .12s, background .12s;
}
.choice label:hover{ border-color:var(--ink-2) }
.choice input{ accent-color:var(--plum); width:16px; height:16px; margin:3px 0 0; flex:none }
.choice label:has(input:checked){ border-color:var(--plum); background:var(--tint) }
.choice small{ display:block; font-size:12px; color:var(--ink-2); line-height:1.7; margin-top:3px }

.agree{
  display:flex; gap:11px; align-items:flex-start; font-size:14px;
  padding:var(--sp-gap) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.agree input{ accent-color:var(--plum); width:16px; height:16px; margin:5px 0 0; flex:none }
.agree a{ color:var(--plum); text-underline-offset:3px }

/* 不備 ── 色＋形（丸に!）＋言葉の3点。赤はここだけ */
.err{ display:none; align-items:flex-start; gap:6px; margin:8px 0 0; font-size:12px; color:var(--error) }
.err[data-on="1"]{ display:flex }
.err::before{
  content:"!"; flex:none; width:15px; height:15px; margin-top:2px;
  border:1.5px solid var(--error); border-radius:50%;
  font-size:10px; font-weight:800; line-height:12px; text-align:center;
}
.err-summary{
  display:none; margin:var(--sp-pad) 0 0; padding:14px var(--sp-gap);
  background:var(--error-bg); border-left:3px solid var(--error);
  color:var(--error); font-size:13px; font-weight:700; line-height:1.7;
}
.err-summary[data-on="1"]{ display:block }

/* ---------- ボタン ---------- */
.actions{ display:flex; gap:10px; margin-top:40px; align-items:stretch }
.btn{
  appearance:none; font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  padding:16px var(--sp-pad); border-radius:3px; border:1px solid transparent;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  letter-spacing:.04em; transition:background .12s, border-color .12s;
}
.btn--main{ background:var(--plum); color:var(--paper); flex:1 }
.btn--main:hover{ background:var(--plum-deep) }
.btn--sub{ background:var(--paper); color:var(--ink-2); border-color:var(--field); flex:none }
.btn--sub:hover{ border-color:var(--ink-2); color:var(--ink) }

/* ---------- 確認画面 ---------- */
.review{ margin:0; font-size:15px }
.review div{ display:flex; gap:var(--sp-pad); padding:15px 0; border-top:1px solid var(--hair-2) }
.review div:first-child{ border-top:0; padding-top:0 }
.review dt{ flex:0 0 120px; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--ink-2); padding-top:3px }
.review dd{ margin:0; flex:1; min-width:0; word-break:break-all; line-height:1.8 }
@media (max-width:480px){
  .review div{ flex-direction:column; gap:4px }
  .review dt{ flex:none; padding-top:0 }
}

.total{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-gap);
  padding:22px 0 0; margin-top:22px; border-top:2px solid var(--ink);
  font-variant-numeric:tabular-nums;
}
.total__label{ font-size:12px; font-weight:700; letter-spacing:.08em }
.total__value{ font-size:34px; font-weight:800; line-height:1; letter-spacing:-.03em }
.total__value i{ font-size:17px; font-style:normal; letter-spacing:-.01em }
.total__value small{ font-size:11px; font-weight:700; color:var(--ink-2); margin-left:7px; letter-spacing:.06em }

/* 申込前に必ず読ませる塊 ── 琥珀は §5 で「直したい」の印なので使わない */
.note{ margin-top:28px; padding-top:22px; border-top:1px solid var(--hair) }
.note dt{ font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--plum); margin-bottom:5px }
.note dd{ margin:0 0 16px; font-size:13px; line-height:1.85; color:var(--ink-2) }
.note dd:last-child{ margin-bottom:0 }

/* ---------- 特商法 ---------- */
.legal{ width:100%; border-collapse:collapse; font-size:13px }
.legal th,.legal td{ border-top:1px solid var(--hair); padding:15px 0; text-align:left; vertical-align:top; line-height:1.85 }
.legal th{ width:34%; padding-right:var(--sp-pad); font-weight:700; color:var(--ink-2); font-size:12px; letter-spacing:.04em }
.legal tr:first-child th,.legal tr:first-child td{ border-top:0 }
@media (max-width:560px){
  .legal,.legal tbody,.legal tr,.legal th,.legal td{ display:block; width:auto }
  .legal tr{ border-top:1px solid var(--hair); padding:14px 0 }
  .legal tr:first-child{ border-top:0; padding-top:0 }
  .legal th,.legal td{ border:0; padding:0 }
  .legal th{ margin-bottom:3px }
}