@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("/heading.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --cream: #fffdf3;
  --ink: #283d2c;
  --teal: #164b43;
  --mint: #cdf2e3;
  --lemon: #ffdb71;
  --white: #fffef9;
  --line: #adbfad;
  --muted: #4d6656;
  --pale-mint: #eaf7ed;
  --red: #8a352b;
  --rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.65 system-ui, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
}

h1, h2, p { margin: 0; }
h1, h2 { color: var(--teal); font-family: var(--rounded); font-weight: 800; }
h1 { font-size: clamp(28px, 6.1vw, 43px); line-height: 1.24; letter-spacing: .015em; }
h2 { font-size: clamp(18px, 4.4vw, 22px); line-height: 1.45; }

.shell { width: min(100% - 32px, 710px); margin-inline: auto; }

.top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--mint);
  border-bottom: 2px dotted var(--teal);
}
.top::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(170px, 32vw, 365px);
  aspect-ratio: 1;
  border: clamp(17px, 3vw, 33px) solid #e1f8ed;
  border-radius: 50%;
  top: -105%;
  right: -2%;
}
.brand { display: flex; align-items: center; gap: clamp(12px, 3.2vw, 24px); padding-block: 25px 27px; }
.brand-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(53px, 14vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lemon);
  color: var(--teal);
}
.brand-icon svg { width: 58%; }
.brand-copy { min-width: 0; }
.eyebrow { color: var(--teal); font-size: 12px; font-weight: 750; letter-spacing: .07em; margin-bottom: 3px; }
.brand-copy > p:last-child { margin-top: 5px; font-size: clamp(12px, 3.2vw, 15px); }

.local-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 4px;
  margin: 17px 0 12px;
  gap: 3px;
  border: 1px solid #d9e6d5;
  background: #f3f7ea;
  border-radius: 999px;
}
.steps li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  min-height: 35px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.steps li[aria-current] { background: var(--mint); color: var(--teal); }
.steps li span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cream);
  font-size: 11px;
  line-height: 1;
}
.steps li[aria-current] span { background: var(--teal); color: white; }

.paper, .summary-card {
  border: 1px solid #d8dfcc;
  border-radius: 22px;
  background: var(--cream);
  padding-inline: clamp(12px, 4vw, 29px);
  box-shadow: 0 4px 0 #38491b08;
}
#cancel { margin-top: 17px; }
.paper > section { padding-block: 21px; }
.paper > section + section { border-top: 1px dotted var(--line); }
.card-title { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; }
.card-title h2 { min-width: 0; }
.section-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lemon);
  color: var(--teal);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.fields { margin-top: 14px; min-width: 0; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hint { color: var(--muted); font-size: 14px; }
.fields > .hint { margin-top: 6px; }
label { display: block; font-size: 14px; font-weight: 700; min-width: 0; }
input, textarea, select, button { font: inherit; }
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid #92ac9b;
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }
input.narrow { max-width: 155px; }
input::placeholder, textarea::placeholder { color: #526958; }
textarea { resize: vertical; }
select:disabled { background: #f0f3e8; color: var(--muted); }
.required, .optional {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  vertical-align: middle;
}
.required { background: #f9e7dd; color: #792f27; }
.optional { background: #edf2e4; color: #415843; }
.error, .feedback { margin-top: 7px; font-size: 14px; font-weight: 650; }
.error { color: var(--red); }
.field-error { display: block; }
.feedback { color: var(--teal); }
.feedback:empty { margin: 0; }
:focus-visible { outline: 3px solid #316e8a; outline-offset: 3px; }

.choices { display: grid; gap: 8px; margin-top: 12px; }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dates { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.date-toggle {
  border: 1px solid #91ad99;
  border-radius: 14px;
  background: #e5f5eb;
  color: var(--teal);
  font: inherit;
  font-size: clamp(12px, 3.5vw, 15px);
  font-weight: 800;
  min-width: 0;
  padding: 4px 1px;
}
.date-toggle:disabled { opacity: .5; cursor: default; }
.eyebrow { overflow-wrap: anywhere; }
.choices label { position: relative; }
.choices input { opacity: 0; position: absolute; z-index: 1; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.choice-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  border: 1px solid #91ad99;
  border-radius: 14px;
  padding: 5px;
  background: var(--white);
  color: var(--teal);
  text-align: center;
}
.three .choice-face { font-size: 16px; white-space: nowrap; }
.three .choice-face::before, .date-face::after {
  content: "" / "";
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid #789384;
  border-radius: 5px;
  line-height: 1;
}
.choices input:checked + .choice-face {
  border-color: var(--teal);
  background: var(--lemon);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.three input:checked + .choice-face::before, .dates input:checked + .date-face::after {
  content: "✓" / "";
  border-color: var(--teal);
  background: var(--teal);
  color: white;
  font-size: 11px;
  font-weight: 900;
}
.choices input:focus-visible + .choice-face { outline: 3px solid #316e8a; outline-offset: 2px; }
.choices input:disabled { cursor: default; }
.choices input:disabled + .choice-face { background: #efefe5; color: #556458; border-style: dashed; }

.date-face {
  position: relative;
  flex-direction: column;
  gap: 0;
  padding: 5px 2px 7px;
  min-height: 75px;
  line-height: 1.35;
}
.date-face::after {
  position: absolute;
  width: 12px;
  height: 12px;
  inset: 5px 5px auto auto;
  border-radius: 4px;
}
.dates input[type="radio"] + .date-face::after { border-radius: 50%; }
.dates input:checked + .date-face::after { font-size: 9px; }
.date-tag { min-height: 1.5em; color: var(--teal); font-size: 11px; font-weight: 800; }
.date-stamp { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.date-weekday { font-size: 12px; white-space: nowrap; }

.time-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 10px;
  margin-top: 12px;
}
.time-fields .fields {
  margin: 0;
  padding: 10px 11px 3px;
  border: 1px solid #c5dbca;
  border-radius: 13px;
  background: var(--pale-mint);
}
.time-fields input[type="time"] { max-width: 100%; }
.time-fields input:disabled { opacity: .65; }
.time-fields label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 7px; min-height: 44px; width: fit-content; }
.time-fields input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }

button { cursor: pointer; }
button:disabled { cursor: default; opacity: .64; }
.primary, .secondary, .danger {
  min-height: 48px;
  padding: 10px 15px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  font-weight: 750;
}
.primary { min-height: 52px; background: var(--teal); color: white; }
.primary:hover { background: #103d36; }
#send { background: #23766b; }
.secondary { background: var(--white); color: var(--teal); }
.secondary:hover { background: var(--pale-mint); }
.danger { background: #f9e7dd; color: var(--red); border-color: #a46457; }
.danger:hover { background: #f5dacc; }
.actions { display: grid; gap: 9px; margin: 15px 0 0; }
.actions .primary { position: relative; padding-inline: 33px; }
.actions .primary span { position: absolute; right: 16px; }
.utility { text-align: center; margin-top: 10px; }
.link-button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.summary-card { padding-block: clamp(17px, 4vw, 28px); }
.summary-card h2 { margin-bottom: 5px; }
.summary { margin: 14px 0 0; }
.summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
  font-size: 14px;
}
.summary dt { color: var(--muted); font-weight: 750; }
.summary dd { min-width: 0; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.summary ul { margin: 3px 0 0; padding-left: 20px; }
.notice, .receipt {
  margin-top: 13px;
  padding: 13px 15px;
  border: 1px solid #c5dbca;
  border-radius: 15px;
  background: var(--pale-mint);
  font-size: 14px;
}
.notice strong, .receipt strong { color: var(--teal); }
.notice p, .receipt p { margin-top: 4px; }
.notice p + p { margin-top: 8px; }
.success-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  margin-bottom: 9px;
  border-radius: 50%;
  background: var(--lemon);
  color: var(--teal);
  font-size: 22px;
  font-weight: 800;
}
.receipt-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 9px; }
.receipt-code-row code {
  flex: 1 1 235px;
  min-width: 0;
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.receipt-code-row button { min-height: 44px; font-size: 14px; }
.receipt #copy-status:empty { margin: 0; }

.lookup { display: grid; gap: 10px; margin-top: 15px; }
#cancel-records:not(:empty) { margin-top: 14px; }
.cancel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding-block: 10px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
}
.cancel-row button { min-height: 44px; font-size: 13px; }
.cancel-panel { margin-top: 9px; padding: 12px; border: 1px solid #c58f79; border-radius: 15px; background: #fff5ea; }
.cancel-panel button { margin: 8px 6px 0 0; }

footer.shell {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 19px;
  padding: 14px 0 22px;
  border-top: 1px dotted var(--line);
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 540px) {
  .shell { width: calc(100% - 24px); }
  .brand { padding-block: 18px 20px; }
  .top::after { top: -64%; right: -11%; }
  .paper > section { padding-block: 17px; }
  .fields.contact-fields { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
  .shell { width: calc(100% - 18px); }
  .brand { gap: 9px; }
  .dates { gap: 5px; }
  .date-stamp { font-size: 15px; }
  .date-face::after { right: 3px; top: 4px; }
  .class-fields { gap: 8px; }
  .class-fields select { padding-inline: 6px; font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  button, .choice-face { transition: background-color .12s, border-color .12s; }
}