@media (max-width: 540px) {
  .radio-group-2col { gap: 12px 14px; }
  .radio-group-2col .radio-item { font-size: 14px; }
}

.apply-summary {
  margin: clamp(28px, 4vh, 40px) auto 0;
  max-width: 640px;
  background: var(--bg-soft);
  border: 0;
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--muted);
}

.apply-summary strong { color: var(--fg); }

.course-select-list { display: flex; flex-direction: column; gap: 12px; }

/* Once the AO 二次選考 courses joined the 一般入試 ones, the list runs long
   enough that the options need labelling — a 集中講座 and a 2次選考対策コース
   are different enough commitments that they should not read as one flat set. */
/* A filled badge rather than a grey line of text. As plain --muted text it
   sat at the same weight as the course dates underneath and stopped reading
   as the divider between the two families. The colours are the ones the site
   already uses for these two categories — pink for 一般入試, blue for
   総合型選抜 — so the label matches the dots and cards elsewhere. */
/* A <span>, not a <p>: the site-wide rule that paints every paragraph in
   --muted carries four :not() classes and outranks anything reasonable here,
   so a <p> badge came out with dark text on the fill. Changing the element
   sidesteps that rule entirely rather than fighting it with specificity. */
.course-select-group {
  display: inline-flex;
  align-items: center;
  align-self: center;
  width: fit-content;
  margin: 10px 0 0;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  background: var(--muted);
}
.course-select-list > .course-select-group { margin-top: 22px; }
.course-select-list > .course-select-group:first-child { margin-top: 0; }
.course-select-group.is-general { background: var(--pink); }
.course-select-group.is-ao { background: var(--blue); }
.course-select-group:first-child { margin-top: 0; }

/* Keep each checkbox aligned with its course on all screen sizes. */
.course-select-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 14px; row-gap: 8px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 12px;
  cursor: pointer;
  background: var(--bg-soft);
  box-shadow: none;
  transition: box-shadow .15s, background .15s;
}

.course-select-item:has(input:checked) {
  background: var(--pink-tint);
  box-shadow: none;
}

.course-select-item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 5px;
  border: 0;
  margin: 0; cursor: pointer; position: relative; flex-shrink: 0;
  transition: border-color .15s, background .15s;
  background: #e0e5e8;
}

.course-select-item input[type="checkbox"]:checked {
  background: var(--fg);
}

.course-select-item input:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.course-select-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-55%, -65%) rotate(45deg);
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
}

.course-select-item > input[type="checkbox"] { grid-row: 1; grid-column: 1; margin-top: 2px; }

/* keep-all stops a title breaking inside a phrase — 英語対策講座 was splitting
   after 講 on a phone. */
.course-select-name {
  grid-row: 1; grid-column: 2;
  font-family: var(--font-jp); font-size: 16px; font-weight: 600; color: var(--fg);
  line-height: 1.55; word-break: keep-all; overflow-wrap: normal;
}

.course-select-meta {
  grid-row: 2; grid-column: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}

.course-select-date {
  font-family: var(--font-jp); font-size: 14px; color: var(--muted);
  line-height: 1.55; word-break: keep-all; overflow-wrap: normal;
}

/* A badge rather than a figure on the right edge of the row. Prices run from
   66,000円 to 125,000円, and right-aligned amounts of different widths left the
   column looking ragged next to titles of different lengths. */
.course-select-price {
  display: inline-block;
  font-family: var(--font-en); font-size: 14px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  background: var(--bg-soft); color: var(--fg); white-space: nowrap;
}

.course-select-item:has(input:checked) .course-select-price { background: #fff; }

.course-total {
  margin-top: 16px;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 10px;
  font-family: var(--font-jp);
}

.course-total .label { font-size: 14px; color: var(--muted); }

.course-total .amount { font-size: 22px; font-weight: 600; color: var(--fg); }