:root { color-scheme: light; font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif; color: #253342; background: #f5f7f9; line-height: 1.8; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { width: min(100% - 2rem, 48rem); margin-inline: auto; }
header { padding-block: 1.6rem; border-bottom: 3px solid #297650; }
header a { color: #235a40; font-weight: 700; text-decoration: none; }
main { margin-block: 2rem; padding: clamp(1.2rem, 4vw, 2.5rem); background: #fff; border: 1px solid #d7e0e6; border-radius: .5rem; }
h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 1rem; line-height: 1.5; }
h2 { font-size: 1.1rem; }
a { color: #175c88; text-underline-offset: .2em; }
.steps { display: flex; gap: .6rem; padding: 0; list-style: none; margin-block: 0 2rem; }
.steps li { flex: 1; text-align: center; padding: .5rem .2rem; border-bottom: 3px solid #d7e0e6; color: #566471; }
.steps [aria-current="step"] { color: #235a40; border-color: #297650; font-weight: 700; }
label { display: block; font-weight: 700; margin-top: 1.5rem; }
.required, .hint { color: #566471; font-weight: 400; font-size: .875rem; }
.hint { margin-block: .3rem .6rem; }
input, textarea { display: block; width: 100%; padding: .8rem; border: 1px solid #81919e; border-radius: .3rem; font: inherit; background: #fff; color: #172a38; }
textarea { min-height: 15rem; resize: vertical; }
:focus-visible { outline: 3px solid #c2670c; outline-offset: 3px; }
button, .button { display: inline-block; min-height: 3rem; padding: .7rem 1.5rem; border: 1px solid #235a40; border-radius: .3rem; background: #235a40; color: white; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
button:hover, .button:hover { background: #193f2d; }
.secondary { background: white; color: #235a40; }
.secondary:hover { background: #edf5f0; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.notice { background: #edf5f0; border-left: 4px solid #297650; padding: 1rem; }
.errors { background: #fff3ef; border-left: 4px solid #a73418; padding: 1rem; color: #842813; }
.errors ul { padding-left: 1.3rem; }
dt { margin-top: 1.5rem; font-weight: 700; color: #566471; }
dd { margin: .5rem 0 0; padding-bottom: 1rem; border-bottom: 1px solid #d7e0e6; white-space: pre-wrap; overflow-wrap: anywhere; }
.trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
footer { color: #566471; font-size: .875rem; padding-bottom: 2rem; }
@media (max-width: 440px) { .actions { flex-direction: column; } button { width: 100%; } .steps { font-size: .875rem; } }