/* お申込み・ご相談フォーム（backend/docs/apply-form.md）
   hanako の /contact/ の見た目を移植。色は変数にまとめてあるので、
   将来グループごとに変えたくなったら :root だけ差し替えればよい。 */
:root{
  --pink:#DE4A66; --pink-d:#B93752; --tint:#FDF2F4;
  --ink:#2A2A2A; --gray:#6B6B6B; --line:#E6E2DC; --bg:#FBFAF8; --err:#B02A2A;
}
*{ box-sizing:border-box; margin:0; padding:0 }
body{
  font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.8;
  -webkit-text-size-adjust:100%; overflow-x:hidden;
}
.wrap{ max-width:600px; margin:0 auto; padding:0 20px }
header{ background:var(--pink); color:#fff; padding:10px 0; font-size:13px }
.head{ text-align:center; padding:36px 0 8px }
.eyebrow{ color:var(--pink); font-weight:700; font-size:13px; letter-spacing:.1em }
h1{ font-size:26px; margin-top:6px; line-height:1.5 }
.lead{ font-size:15px; color:var(--gray); margin-top:12px }

/* 入力 → 確認 → 完了 */
.steps{ display:flex; align-items:center; justify-content:center; gap:8px; margin:22px 0 0; list-style:none }
.steps li{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--gray) }
.steps .num{
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#fff; border:1px solid var(--line); font-size:13px;
}
.steps li.on{ color:var(--pink) }
.steps li.on .num{ background:var(--pink); border-color:transparent; color:#fff }
.steps li.done .num{ background:#F4B8C4; border-color:transparent; color:#fff }
.steps .sep{ width:18px; height:1px; background:var(--line) }

main{ padding-bottom:56px }
.card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 20px; margin:22px 0 }
.alert{
  border-radius:9px; padding:13px 15px; font-size:14px; margin-bottom:20px;
  background:#FDECEC; border:1px solid #E9B5B5; color:var(--err); white-space:pre-line;
}
.alert ul{ margin:6px 0 0; padding-left:1.2em }

.field{ margin-bottom:18px }
.label{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; margin-bottom:6px }
.tag{ font-size:11px; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:4px; line-height:1.6 }
.tag--req{ background:var(--pink); color:#fff }
.tag--any{ background:#EEF1F1; color:var(--gray) }
input,textarea,select{
  width:100%; font-family:inherit; font-size:16px; padding:13px;
  border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
textarea{ min-height:96px; resize:vertical }
/* 1行の入力欄と選択欄の高さをそろえる（2026-09-30）。select はブラウザ（とくに iPhone の Safari）で行の高さの決め方が違い、
   隣の入力欄とずれていた。高さを固定し、上下の余白は外して文字を中央に置く（左右の余白はそのまま）。
   ラジオ・チェックと textarea は対象外 */
input:not([type="radio"]):not([type="checkbox"]), select{
  height:50px; padding-top:0; padding-bottom:0; line-height:normal;
}
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237d736e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; cursor:pointer;
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(222,74,102,.15);
}
.field.err input,.field.err textarea,.field.err select{ border-color:#D98A8A; background:#FDF4F4 }
.hint{ font-size:12px; color:var(--gray); margin-top:6px }
.error-msg{ font-size:13px; font-weight:500; color:var(--err); margin-top:6px }
.two{ display:flex; gap:12px }
.two>.field{ flex:1 }

.purpose{ display:flex; gap:10px }
.purpose label{ flex:1; position:relative; cursor:pointer }
.purpose input{ position:absolute; opacity:0; width:0; height:0 }
.purpose span{
  display:block; text-align:center; padding:14px 10px; border:1.5px solid var(--line);
  border-radius:10px; font-weight:700; font-size:15px; background:#fff; transition:.15s;
}
.purpose input:checked+span{ border-color:var(--pink); background:var(--tint); color:var(--pink-d) }
.purpose input:focus-visible+span{ box-shadow:0 0 0 3px rgba(222,74,102,.2) }
/* 選ぶだけで送れる（family-lp.md §9） */
/* 枠の高さはすべて同じにそろえる（いちばん高い枠に合わせる・2026-11-03）。
   文字の量で高さが変わると、2行になった枠だけ大きくなってバラバラに見えるため */
.topics{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:8px }
.topics label{ position:relative; cursor:pointer; display:flex }
.topics label > span{ flex:1; word-break:auto-phrase }   /* 言葉の切れ目で折り返す（対応ブラウザだけ・Chrome 系。Safari は今までどおり） */
.topics input{ position:absolute; opacity:0; width:0; height:0 }
.topics span{
  display:flex; align-items:center; justify-content:center; min-height:48px; text-align:center; padding:8px 10px;
  border:1.5px solid var(--line); border-radius:10px; font-size:14px; background:#fff; transition:.15s;
}
.topics input:checked+span{ border-color:var(--pink); background:var(--tint); color:var(--pink-d); font-weight:700 }
.topics input:focus-visible+span{ box-shadow:0 0 0 3px rgba(222,74,102,.2) }

.group-title{
  font-size:14px; font-weight:700; color:var(--pink-d);
  margin:26px 0 4px; padding-top:20px; border-top:1px dashed var(--line);
}
.group-note{ font-size:13px; color:var(--gray); margin-bottom:14px }

/* 個人情報の扱い。チェックボックスは置かず、説明だけ出す（apply-form.md §3） */
.consent{ margin-top:24px; padding:18px 16px; background:#FCF7F6; border:1px solid var(--line); border-radius:10px }
.consent p{ font-size:13px; color:var(--gray) }
.consent p + p{ margin-top:8px }
.consent a{ color:var(--pink-d) }

/* 人には見せない。機械だけが埋める欄 */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.btns{ display:flex; gap:12px; margin-top:26px }
.btn{
  flex:1; font-family:inherit; font-size:16px; font-weight:700; padding:15px 12px;
  border-radius:10px; border:1.5px solid transparent; cursor:pointer; transition:.15s;
}
.btn--primary{ background:var(--pink); color:#fff }
.btn--primary:hover:not(:disabled){ background:var(--pink-d) }
.btn--primary:disabled{ opacity:.55; cursor:default }
.btn--ghost{ background:#fff; color:var(--gray); border-color:var(--line) }
.btn--ghost:hover{ background:#F6F4F2 }

/* 確認画面 */
.confirm dl{ display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:14.5px }
.confirm dt{ font-weight:700; color:var(--gray); white-space:nowrap }
.confirm dd{ word-break:break-word; white-space:pre-line }

/* 完了画面 */
.done{ text-align:center; padding:12px 0 }
.done .mark{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:var(--tint); color:var(--pink); display:flex; align-items:center;
  justify-content:center; font-size:32px; font-weight:700;
}
.done h2{ font-size:20px; margin-bottom:12px }
.done p{ font-size:14.5px; color:var(--gray) }

/* 販売者（パートナー）の連絡先 */
.shop{ margin-top:22px; padding:16px; border:1px solid var(--line); border-radius:10px; background:#fff }
/* 完了画面の連絡先：中身は左寄せ、箱だけ中央に（2026-09-19 ユーザー指定。行が中央にばらつくのを避ける） */
.done .shop{ text-align:left; max-width:360px; margin-left:auto; margin-right:auto }
.shop .nm{ font-weight:700; font-size:15px; margin-bottom:6px }
.shop .ln{ display:flex; gap:8px; font-size:13.5px; color:var(--gray) }
.shop .ln b{ flex:none; width:5em; font-weight:500 }

footer{ border-top:1px solid var(--line); padding:20px 0 40px; font-size:12.5px; color:var(--gray); text-align:center }

/* 狭い幅（420px 以下）では BOX の外側の余白を 20→8px、内側を 20→14px に詰めて、入力欄を広くする（案A・2026-10-29）。BOX の外（見出しなど）は今のまま */
@media (max-width:420px){
  .card{ margin-left:-12px; margin-right:-12px; padding-left:14px; padding-right:14px }
}
@media (max-width:480px){
  h1{ font-size:22px }
  .two{ display:block }
  .btns{ flex-direction:column-reverse }
  .confirm dl{ grid-template-columns:1fr; gap:2px 0 }
  .confirm dd{ margin-bottom:12px }
}