/* お問い合わせフォーム（/contact/）と送信完了ページ（/contact/thanks/）だけで読み込む。2026-10-18 作成
   色・書体・余白は style.css の変数（--ink・--ink-soft・--line・--accent など）をそのまま使う */

.contact-page{padding-block:clamp(130px,16vw,190px) clamp(80px,10vw,140px)}
.contact-page .container{max-width:760px}

.cform{margin-top:clamp(36px,5vw,56px);display:grid;gap:clamp(24px,3vw,30px)}
.cform__field{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.cform__field>label,.cform__field legend{
  padding:0;font-size:.95rem;font-weight:500;letter-spacing:.04em;color:var(--ink);
}
.cform__field legend{margin-bottom:10px}
.req,.opt{
  display:inline-block;margin-left:10px;padding:2px 9px;border-radius:100px;
  font-size:.68rem;font-weight:500;letter-spacing:.08em;line-height:1.5;vertical-align:2px;
}
.req{background:var(--accent);color:#15171B}
.opt{border:1px solid var(--line);color:var(--ink-soft)}

.cform input[type="text"],.cform input[type="email"],.cform input[type="tel"],.cform input[type="url"],.cform textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.04);color:var(--ink);
  font:inherit;font-size:1rem; /* 16px 未満だと iPhone で入力欄が拡大されるため */
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.cform textarea{min-height:200px;resize:vertical;line-height:1.75}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent);background:rgba(84,220,200,.06)}
.cform ::placeholder{color:var(--ink-soft);opacity:.55}
.cform .is-error input,.cform .is-error textarea{border-color:#F2A0A0}

/* ご相談の種類：丸いボタンから1つ選ぶ */
.cform__choices{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{
  display:inline-block;padding:10px 18px;border:1px solid var(--line);border-radius:100px;
  font-size:.9rem;color:var(--ink-soft);
  transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease);
}
.chip:hover span{border-color:rgba(255,255,255,.3);color:var(--ink)}
.chip input:checked+span{border-color:var(--accent);color:var(--accent);background:rgba(84,220,200,.08)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

.cform__agree{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--ink-soft);cursor:pointer}
.cform__agree input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--accent)}
.cform__agree a{color:var(--accent);border-bottom:1px solid currentColor}

.cform__err{color:#F2A0A0;font-size:.85rem;line-height:1.6}
.cform__alert{
  padding:14px 18px;border:1px solid rgba(242,160,160,.5);border-radius:10px;
  background:rgba(242,160,160,.06);color:#F4C4C4;font-size:.92rem;line-height:1.7;
}
/* 人には見えない欄（機械的な送信を見分ける） */
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cform__submit{justify-self:center;margin-top:10px;border:0;cursor:pointer;min-width:240px;justify-content:center}
.cform__submit:disabled{opacity:.6;cursor:default;transform:none}

/* 送信完了ページ */
.contact-thanks .policy__lead+.policy__lead{margin-top:1em}
.contact-thanks__back{margin-top:clamp(36px,5vw,52px)}