@charset "UTF-8";
/* 依存なし。親サイトのCSSの影響を受けないよう、iframe内で完結させる前提。 */

:root {
  --bg:        #ffffff;
  --surface:   #f7f8fa;
  --line:      #dfe3e8;
  --text:      #1c2430;
  --muted:     #62707f;
  --accent:    #16609a;
  --accent-in: #ffffff;
  --err:       #b3261e;
  --err-bg:    #fdf3f2;
  --ok:        #1a7f56;
  --radius:    8px;
  --gap:       24px;
}

@media (prefers-color-scheme: dark) {
  /* サイトの外枠の中では、サイト側が明るい配色しか持たないため暗くしない */
  body.has-shell {
    --bg: #ffffff; --surface: #f7f8fa; --line: #dfe3e8; --text: #1c2430; --muted: #62707f;
    --accent: #16609a; --accent-in: #ffffff; --err: #b3261e; --err-bg: #fdf3f2; --ok: #1a7f56;
  }
  :root {
    --bg:      #161a1f;
    --surface: #1e242b;
    --line:    #333c46;
    --text:    #e8edf2;
    --muted:   #9aa8b6;
    --accent:  #5aa9e6;
    --accent-in: #10161c;
    --err:     #ff9a91;
    --err-bg:  #2c1d1c;
    --ok:      #6ed3a8;
  }
}

html { overflow-x: clip; }   /* 横方向へはみ出しても、ページが横スクロールしないようにする */
.wrap, .wrap *, .wrap *::before, .wrap *::after { box-sizing: border-box; }

/* has-shell = サイトのヘッダー・フッターを被せている状態。
   このときページ全体への指定を出すとサイト側の見た目を壊すので、フォームの中だけに効かせる */
body:not(.has-shell) * { box-sizing: border-box; }
body:not(.has-shell) {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}
body.has-shell .wrap {
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}
body.is-embed { background: transparent; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 56px;
}
body.is-embed .wrap { padding-top: 8px; padding-bottom: 8px; }

/* ---- 見出し / ステップ ---- */
.hd__title { font-size: 1.5rem; line-height: 1.5; margin: 0 0 8px; letter-spacing: .02em; }
.hd__intro { margin: 0 0 20px; color: var(--muted); font-size: .95rem; }
.lead { margin: 0 0 24px; }

.steps {
  display: flex; gap: 8px; list-style: none; margin: 0 0 32px; padding: 0;
  font-size: .82rem; color: var(--muted); counter-reset: s;
}
.steps li {
  flex: 1; text-align: center; padding: 7px 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); counter-increment: s;
}
.steps li::before { content: counter(s) ". "; }
.steps li.now  { background: var(--accent); border-color: var(--accent); color: var(--accent-in); font-weight: 700; }
.steps li.past { color: var(--text); }

/* ---- 入力欄 ---- */
.fld { margin: 0 0 var(--gap); }
.fld__label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.fld__note  { margin: 0 0 6px; font-size: .84rem; color: var(--muted); }
.req, .opt {
  font-size: .72rem; font-weight: 700; line-height: 1; padding: 4px 7px;
  border-radius: 4px; letter-spacing: .04em;
}
.req { background: var(--err); color: #fff; }
.opt { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }

.ctl {
  width: 100%; padding: 12px 14px; font: inherit; line-height: 1.6;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .12s, box-shadow .12s;
}
.ctl:focus-visible, .consent input:focus-visible, .opt-item input:focus-visible, .btn:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
textarea.ctl { resize: vertical; min-height: 8em; }
select.ctl { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.is-err .ctl { border-color: var(--err); background: var(--err-bg); }
.fld__err { margin: 6px 0 0; color: var(--err); font-size: .87rem; font-weight: 700; }

.opts { display: flex; flex-wrap: wrap; gap: 8px; }
/* その項目でいちばん長い選択肢の幅（--opt-w）に枠をそろえる。
   min() で 100%（＝選択肢の並ぶ枠の内寸）を上限にしているので、
   スマホや狭い埋め込み枠でもはみ出さない。画面幅の条件分岐は不要 */
.opt-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); font-size: .95rem;
  min-width: min(var(--opt-w, 0px), 100%);
}
.opt-item:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.opt-item input, .consent input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }

.consent {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .95rem;
}
.consent a { color: var(--accent); }

/* ハニーポット: 人間には見えず、読み上げ・タブ移動にも出ない。
   画面外（left:-9999px）に置くと iOS で横スクロールが生まれることがあるため、
   大きさを潰して隠す（読み上げには出ないよう aria-hidden も付けている） */
.hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- ボタン ---- */
.actions { margin-top: 32px; }
.actions--split { display: flex; gap: 12px; flex-wrap: wrap-reverse; }
.actions--split .btn { flex: 1 1 180px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; padding: 14px 28px;
  font: inherit; font-weight: 700; cursor: pointer;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: filter .12s, background .12s;
}
.btn:hover { filter: brightness(.97); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-in); }

/* ---- 確認画面 ---- */
.review { margin: 0; border-top: 1px solid var(--line); }
.review__row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.review dt { color: var(--muted); font-size: .9rem; font-weight: 700; margin: 0; }
.review dd { margin: 0; word-break: break-word; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .review__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 4px; }
}

.fineprint { margin: 20px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.7; }

/* ---- 通知 ---- */
.alert {
  margin: 0 0 24px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); font-size: .92rem;
}
.alert--err { background: var(--err-bg); border-color: var(--err); color: var(--err); font-weight: 700; }
.alert ul { margin: 8px 0 0; padding-left: 1.2em; }
.alert a { color: inherit; }

/* ---- 完了 ---- */
.done { text-align: center; padding: 40px 0; }
.done__mark {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok); font-size: 2rem; line-height: 1;
}
.done__title { font-size: 1.35rem; margin: 0 0 16px; }
.done__msg { margin: 0 0 28px; }
.done__id {
  display: inline-flex; flex-direction: column; gap: 2px; margin: 0;
  padding: 14px 28px; border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: .82rem; color: var(--muted);
}
.done__id strong { font-size: 1.1rem; letter-spacing: .08em; color: var(--text); font-family: ui-monospace, "SF Mono", Menlo, monospace; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }