/* 正式登録フォーム。装飾なし・ボタンは四角(4px)・スマホ幅優先 */
:root {
  --navy: #16307a;
  --text: #1a1d2e;
  --text2: #4a5068;
  --border: #b8c3df;        /* 区切り線・カードの枠 */
  --field-border: #7b86a6;  /* 入力欄・選択欄・枠の線（区切り線より濃く） */
  --placeholder: #757575;
  --bg: #ffffff;
  --bg2: #f6f8fd;
  --red: #c0392b;
  --red-soft: #fdecea;
  --amber: #8a4b00;
  --amber-soft: #fff3e0;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg2);
  /* 語の途中で改行しない（文節ごとに折り返す。未対応の環境では通常の折り返し） */
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
/* iPhone Safari など auto-phrase が効かない環境向け: 文節の区切り（<wbr>）でだけ折り返す */
.nb { word-break: keep-all; }

/* ロゴ・フッターは、カードと同じ幅560pxの中央の列に入れる */
.col { max-width: 560px; margin: 0 auto; }
.top { background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 16px; }
.logo { display: block; height: 33px; width: auto; max-width: 100%; }

.page { max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; background: var(--bg); }
h1 { font-size: 20px; line-height: 1.5; margin: 0 0 16px; color: var(--navy); overflow-wrap: anywhere; }
h1:focus { outline: none; }
.lead { margin: 0 0 16px; color: var(--text2); }
.purpose { margin: 0 0 20px; font-size: 14px; color: var(--text2); }
.hint { margin: 6px 0 0; font-size: 14px; color: var(--text2); }
.step { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text2); }

/* センターの連絡先（フッターだけに出す）。電話・メールの途中では折り返さない */
.contact { margin: 0 0 20px; font-size: 14px; color: var(--text2); }
.contact .c-item { display: inline-block; }
.contact a { color: var(--navy); }

fieldset { border: 1px solid var(--field-border); border-radius: 4px; padding: 10px 14px 12px; margin: 0 0 20px; }
fieldset.invalid { border-color: var(--red); }
legend { padding: 0 6px; font-size: 14px; font-weight: 700; }
.choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 20px; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }

.field { margin: 0 0 18px; }
.field label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; }
input[type="text"], input[type="email"], select {
  display: block; width: 100%; min-height: 48px; padding: 8px 12px;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--bg); border: 1px solid var(--field-border); border-radius: 4px; -webkit-appearance: none; appearance: none;
}
::placeholder { color: var(--placeholder); opacity: 1; }
input.invalid, select.invalid { border-color: var(--red); }

/* 選択欄: 右12pxに紺の下向き矢印（図は使わず線で描く）・右余白40px・未選択の間は文字を薄く */
.select-wrap { position: relative; }
.select-wrap select { padding-right: 40px; }
.select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
select:required:invalid { color: var(--placeholder); }
select option { color: var(--text); }

/* フォーカス枠は、キーボード操作のときだけ（ラジオをクリックしても枠を出さない） */
input:focus-visible, select:focus-visible, .btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

.btn {
  display: block; width: 100%; min-height: 48px; padding: 10px 16px;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--navy);
  background: var(--bg); border: 1px solid var(--navy); border-radius: 4px; cursor: pointer;
}
.btn.primary { color: #fff; background: var(--navy); }
.btn:disabled { opacity: .5; cursor: default; }
.actions { display: grid; gap: 12px; margin-top: 16px; }

.msg { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--red); border-radius: 4px; background: var(--red-soft); color: var(--red); font-size: 15px; }
.msg.warn { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }

.confirm-wrap { margin: 0 0 20px; }
.sub { margin: 24px 0 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.sub:first-child { margin-top: 0; }
.confirm { margin: 6px 0 0; border-top: 1px solid var(--border); }
.confirm div { display: grid; grid-template-columns: 9em 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.confirm dt { font-size: 14px; color: var(--text2); }
.confirm dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.statement { margin: 0 0 8px; font-weight: 700; }

.foot { padding: 16px; }
.foot .contact { margin: 0; }

@media (max-width: 599px) {
  .page { min-height: 60vh; }
}
@media (max-width: 380px) {
  .confirm div { grid-template-columns: 1fr; gap: 0; }
}
@media (min-width: 600px) {
  .top, .foot { padding-left: 0; padding-right: 0; }
  .page { margin-top: 24px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 4px; padding: 32px; }
  .actions { grid-template-columns: 1fr 1fr; }
}