/* 問い合わせフォーム（/legal/contact/。templates/_contact_form.html・docs/design-contact-form.md）。
   保護者向けの面（白書）の見た目: 色は style.css の :root のトークンだけ、角丸は 0 と 4px、影は使わない（DESIGN.md）。 */

.ct{margin-top:40px}

.ct-notes{
  padding:20px 24px;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  border-left:4px solid var(--midori);
}
.ct-notes__title{
  margin:0 0 8px;
  font-size:17px;font-weight:700;letter-spacing:.04em;
  color:var(--midori);
}
.ct-notes__list{
  margin:0;padding-left:1.3em;
  font-size:15px;line-height:1.85;
}
.ct-notes__list li{word-break:auto-phrase}
.ct-notes__list li + li{margin-top:6px}

.ct-form{margin-top:36px}
.ct-form__row{
  display:grid;grid-template-columns:1fr 1fr;gap:0 24px;
}
.ct-field{
  display:flex;flex-direction:column;gap:6px;
  margin:0 0 24px;padding:0;border:0;min-width:0;
}
.ct-field__label{
  padding:0;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  color:var(--sumi);
}
.ct-need,.ct-opt{
  display:inline-block;margin-left:8px;padding:0 6px;
  border-radius:4px;
  font-size:12px;font-weight:500;line-height:1.7;letter-spacing:.04em;
  vertical-align:2px;
}
.ct-need{background:var(--midori);color:var(--panel)}
.ct-opt{background:var(--midori-wash);color:var(--midori)}
.ct-field__help{font-size:13px;color:var(--sumi-soft);word-break:auto-phrase}

.ct input[type="text"],
.ct input[type="email"],
.ct textarea{
  width:100%;
  padding:11px 12px;
  background:var(--panel);
  color:var(--sumi);
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font:inherit;font-size:16px;line-height:1.7;
  transition:border-color var(--ease);
}
.ct textarea{resize:vertical;min-height:200px}
.ct input:focus-visible,
.ct textarea:focus-visible{outline:2px solid var(--midori);outline-offset:1px;border-color:var(--midori)}
.ct [data-invalid] input[type="text"],
.ct [data-invalid] input[type="email"],
.ct [data-invalid] textarea{border-color:var(--kaki-deep);border-width:2px;padding:10px 11px}

.ct-kinds{display:flex;flex-wrap:wrap;gap:10px}
.ct-kind{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font-size:15px;line-height:1.5;
  cursor:pointer;
  transition:border-color var(--ease),background-color var(--ease);
}
.ct-kind:hover{border-color:var(--midori)}
.ct-kind:has(input:checked){background:var(--midori-wash);border-color:var(--midori);font-weight:700}
.ct-kind input,.ct-check input{width:18px;height:18px;margin:0;accent-color:var(--midori);flex:none}
.ct-kind:has(input:focus-visible),.ct-check:has(input:focus-visible){outline:2px solid var(--midori);outline-offset:2px}
[data-invalid] .ct-kinds .ct-kind{border-color:var(--kaki-deep)}

.ct-count{align-self:flex-end;font-size:13px;color:var(--sumi-soft);font-variant-numeric:tabular-nums}
.ct-count[data-over]{color:var(--kaki-deep);font-weight:700}

.ct-checks{
  margin:4px 0 8px;padding:18px 20px;
  background:var(--midori-wash);
  border-radius:4px;
}
.ct-checks .ct-field{margin-bottom:14px}
.ct-checks .ct-field:last-child{margin-bottom:0}
.ct-check{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.6;cursor:pointer;word-break:auto-phrase}
.ct-check input{margin-top:2px}

.ct-error{
  margin:0;padding-left:10px;word-break:auto-phrase;
  border-left:3px solid var(--kaki-deep);
  font-size:14px;font-weight:500;line-height:1.6;
  color:var(--kaki-deep);
}

/* ボット避けの隠し欄（人には見えず、読み上げもさせない） */
.ct-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.ct-form__submit{margin:24px 0 0}
.ct-submit{border:0;cursor:pointer;font-family:inherit}
.ct-submit:disabled{background:var(--keisen-strong);cursor:not-allowed}
.ct-submit:focus-visible{outline:2px solid var(--midori);outline-offset:3px}
.ct-status{margin:14px 0 0;min-height:1.6em;font-size:15px;line-height:1.7;word-break:auto-phrase}
.ct-status[data-kind="error"]{color:var(--kaki-deep);font-weight:700}

.ct-done{
  padding:28px 24px;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  border-top:4px solid var(--midori);
}
.ct-done:focus{outline:none}
.ct-done:focus-visible{outline:2px solid var(--midori);outline-offset:3px}
.ct-done__title{margin:0 0 12px;font-family:var(--font-mincho);font-size:22px;font-weight:600;color:var(--midori)}
.ct-done p{margin:0;font-size:15px;line-height:1.9}
.ct-done p + p{margin-top:10px}

@media (prefers-reduced-motion:reduce){
  .ct input,.ct textarea,.ct-kind{transition:none}
}

@media (max-width:700px){
  .ct{margin-top:28px}
  .ct-notes{padding:16px 16px 16px 18px}
  .ct-notes__list{font-size:14px}
  .ct-form__row{grid-template-columns:1fr}
  .ct-kinds{flex-direction:column;align-items:stretch}
  .ct-kind{padding:11px 14px}
  .ct-submit{width:100%}
}