/* ============================================================
   ホームページ制作の相談・依頼フォーム。
   /web-design/ と /web-design/abacus/ の両方が読む。送る側は inquiry.js。

   ここに書くのは骨組みだけ。色・角の丸み・見出しの書体は、各ページが
   .wdf に変数で渡す（ページごとにデザインが違うため）:

     --f-ink        文字と枠の色
     --f-soft       補足の文字の色
     --f-accent     必須の印・選んだ状態・送信ボタン
     --f-accent-deep  送信ボタンの影
     --f-accent-pale  選んだ状態の地
     --f-paper      カードの地
     --f-field      入力欄の地
     --f-line       入力欄の枠
     --f-focus      フォーカスの輪
     --f-radius     カードの角
     --f-radius-s   入力欄の角
     --f-border     カードの枠の太さ
     --f-font-head  見出しの書体
   ============================================================ */

.wdf {
  --f-err: #c0392b;
  background: var(--f-paper); color: var(--f-ink);
  border: var(--f-border, 2px) solid var(--f-ink); border-radius: var(--f-radius, 20px);
  padding: clamp(24px, 4.5vw, 44px); text-align: left;
  line-height: 1.8;
}
.wdf [hidden] { display: none !important; }
.wdf-head { margin-bottom: 22px; }
.wdf-head h3 { font-family: var(--f-font-head); font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.5; margin-bottom: 6px; }
.wdf-head p { font-size: .9rem; color: var(--f-soft); }

/* ---- 種類（相談か、依頼か） */
.wdf-kind { border: 0; margin-bottom: 24px; min-width: 0; }
.wdf-kind legend, .wdf-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 900; font-size: .93rem; margin-bottom: 8px; padding: 0; }
.wdf-kind-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wdf-kind-options label {
  position: relative; display: block; cursor: pointer;
  border: 1.5px solid var(--f-line); border-radius: var(--f-radius-s, 12px); background: var(--f-field);
  padding: 14px 16px 14px 46px; transition: border-color .2s, background .2s, box-shadow .2s;
}
.wdf-kind-options input { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; accent-color: var(--f-accent); margin: 0; }
.wdf-kind-options strong { display: block; font-weight: 900; font-size: .98rem; line-height: 1.5; }
.wdf-kind-options small { display: block; font-size: .8rem; color: var(--f-soft); line-height: 1.6; margin-top: 2px; }
.wdf-kind-options label:hover { border-color: var(--f-ink); }
.wdf-kind-options label:has(input:checked) { border-color: var(--f-accent); background: var(--f-accent-pale); box-shadow: 0 0 0 1px var(--f-accent); }
.wdf-kind-options label:has(input:focus-visible) { outline: 3px solid var(--f-focus); outline-offset: 2px; }

/* ---- 欄 */
.wdf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.wdf-field { min-width: 0; }
.wdf-field.wide { grid-column: 1 / -1; }
.wdf-label { cursor: default; }
.wdf-tag { font-size: .68rem; font-weight: 900; letter-spacing: .06em; line-height: 1; border-radius: 4px; padding: 4px 7px; white-space: nowrap; }
.wdf-tag.req { background: var(--f-accent); color: #fff; }
.wdf-tag.opt { background: transparent; color: var(--f-soft); border: 1px solid var(--f-line); }
/* 必須かどうかは、種類で変わる欄がある。data-need は both / consult / request / none */
.wdf-field .wdf-tag.req { display: none; }
.wdf-field[data-need="both"] .wdf-tag.req,
.wdf-form[data-kind="consult"] .wdf-field[data-need="consult"] .wdf-tag.req,
.wdf-form[data-kind="request"] .wdf-field[data-need="request"] .wdf-tag.req { display: inline-block; }
.wdf-field[data-need="both"] .wdf-tag.opt,
.wdf-form[data-kind="consult"] .wdf-field[data-need="consult"] .wdf-tag.opt,
.wdf-form[data-kind="request"] .wdf-field[data-need="request"] .wdf-tag.opt { display: none; }
/* 種類で言い方が変わる文言 */
.wdf-form[data-kind="consult"] [data-for="request"],
.wdf-form[data-kind="request"] [data-for="consult"] { display: none; }

.wdf input[type="text"], .wdf input[type="email"], .wdf input[type="tel"], .wdf input[type="url"], .wdf textarea {
  display: block; width: 100%; font: inherit; font-size: 16px; /* 16px 未満だと iOS が拡大する */
  color: var(--f-ink); background: var(--f-field);
  border: 1.5px solid var(--f-line); border-radius: var(--f-radius-s, 12px);
  padding: 12px 14px; line-height: 1.6; min-height: 50px;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.wdf textarea { min-height: 150px; resize: vertical; }
.wdf input::placeholder, .wdf textarea::placeholder { color: var(--f-soft); opacity: .7; }
.wdf input:hover, .wdf textarea:hover { border-color: var(--f-ink); }
.wdf input:focus-visible, .wdf textarea:focus-visible { outline: none; border-color: var(--f-ink); box-shadow: 0 0 0 3px var(--f-focus); }
.wdf [aria-invalid="true"] { border-color: var(--f-err) !important; }
.wdf-hint { font-size: .8rem; color: var(--f-soft); margin-top: 6px; line-height: 1.7; }
.wdf-err { font-size: .82rem; font-weight: 700; color: var(--f-err); margin-top: 6px; line-height: 1.6; }
.wdf-err:empty { display: none; }

/* ---- いまのホームページ（ある／ない／制作中） */
.wdf-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.wdf-pills label { position: relative; cursor: pointer; }
.wdf-pills input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wdf-pills span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 76px;
  border: 1.5px solid var(--f-line); border-radius: 999px; background: var(--f-field);
  padding: 6px 20px; font-weight: 700; font-size: .93rem; transition: border-color .2s, background .2s, color .2s;
}
.wdf-pills label:hover span { border-color: var(--f-ink); }
.wdf-pills input:checked + span { border-color: var(--f-accent); background: var(--f-accent-pale); color: var(--f-accent); box-shadow: 0 0 0 1px var(--f-accent); }
.wdf-pills input:focus-visible + span { outline: 3px solid var(--f-focus); outline-offset: 2px; }
.wdf-url { margin-top: 12px; }

.wdf-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- 送信 */
.wdf-alert { margin-top: 22px; border: 1.5px solid var(--f-err); border-radius: var(--f-radius-s, 12px); background: #fdf1ef; color: #8f2a1f; padding: 12px 16px; font-size: .9rem; font-weight: 700; line-height: 1.7; }
.wdf-alert:empty { display: none; }
.wdf-alert a { text-decoration: underline; word-break: break-all; }
.wdf-ts:empty { display: none; }
.wdf-ts { margin-top: 20px; }
.wdf-submit { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.wdf-submit .btn { min-width: min(100%, 300px); }
.wdf-submit .btn[disabled] { cursor: progress; opacity: .75; transform: none; }
.wdf-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; animation: wdf-spin .8s linear infinite; }
.wdf-submit .btn.busy .wdf-spinner { display: inline-block; }
.wdf-submit .btn.busy .arr { display: none; }
@keyframes wdf-spin { to { transform: rotate(360deg); } }
.wdf-note { font-size: .8rem; color: var(--f-soft); line-height: 1.8; max-width: 44em; }
.wdf-note a { text-decoration: underline; }

/* ---- 送れたあと */
.wdf-done { text-align: center; padding: clamp(8px, 2vw, 20px) 0; }
.wdf-done:focus { outline: none; }
.wdf-done .wdf-ok { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--f-accent); display: grid; place-items: center; }
.wdf-done .wdf-ok svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.wdf-done h3 { font-family: var(--f-font-head); font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.5; margin-bottom: 10px; }
.wdf-done p { font-size: .95rem; color: var(--f-soft); max-width: 32em; margin: 0 auto 8px; }
.wdf-done .wdf-ref { display: inline-flex; align-items: baseline; gap: 10px; margin: 14px 0 16px; padding: 10px 22px; border: 1.5px dashed var(--f-line); border-radius: var(--f-radius-s, 12px); background: var(--f-field); color: var(--f-ink); font-size: .86rem; font-weight: 700; }
.wdf-done .wdf-ref b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.2rem; letter-spacing: .12em; }

@media (max-width: 640px) {
  .wdf-kind-options { grid-template-columns: minmax(0, 1fr); }
  .wdf-fields { grid-template-columns: minmax(0, 1fr); }
  .wdf-submit .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wdf-spinner { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
}