/*
 * Inner pages (every page but Home): red page header, then bands — white
 * (surface), cream (alt) and red (frame) — with cloud dividers where the
 * colour changes (inc/pages.php). Colours: tokens from style.css only.
 * Contrast: body on white 12.6 / cream 11.7, headings 14.3 / 13.3, links 7.8 /
 * 7.2; white on the frame 9.0, gold on the frame 5.7.
 */

.site-main--page {
	max-width: none;
	padding: 0;
}

/* Page header: the h1 on the red frame. The cloud divider below it rises into
   its bottom padding; the space left under the title matches the space above
   it. */
.page-header {
	--page-header-space: clamp(2.25rem, 6vw, 3.75rem);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--color-frame);
	color: var(--color-on-dark);
	padding-block: var(--page-header-space) calc(clamp(2.25rem, 5vw, 4rem) + var(--page-header-space));
}

.page-header__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--space);
}

.page-header__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	line-height: 1.35;
}

/* Bands: full-width colour, content in a readable column. The bottom padding
   leaves room for the next band's clouds. */
.band {
	position: relative;
	isolation: isolate;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--space) clamp(3rem, 7vw, 5rem);
}

.band > * {
	max-width: var(--text-width);
}

/* Small shapes (victoryis_decor(), style.css; drawn with the scroll by
   motion.js): ring and dots in the
   page header, triangle and dots in cream bands, star and squiggle in the red
   contact band — in the top padding / at the edges, never over text. */
.page-header .deco {
	color: var(--color-accent);
}

.page-header .deco--a {
	top: 50%;
	right: -1.25rem;
	margin-top: calc(clamp(3.5rem, 8vw, 5.5rem) / -2);
	opacity: 0.5;
}

.page-header .deco--b {
	top: 0.5rem;
	left: 0.75rem;
	opacity: 0.8;
}

.page-content .band > .deco {
	max-width: none;
	margin: 0;
}

.band--alt > .deco--a {
	top: 0.5rem;
	right: 1rem;
	color: var(--color-primary);
	opacity: 0.45;
}

.band--alt > .deco--b {
	top: 0.75rem;
	left: 1rem;
	color: var(--color-accent);
}

.band--dark > .deco {
	top: 0.5rem;
	color: var(--color-accent);
}

.band--dark > .deco--a {
	right: 1rem;
}

.band--dark > .deco--b {
	left: 1rem;
	opacity: 0.7;
}

/* Centred, also against the headings' and paragraphs' own margins. */
.band > *,
.page-content .band > * {
	margin-inline: auto;
}

.band--surface {
	background: var(--color-surface);
}

.band--alt {
	background: var(--color-surface-alt);
}

.band--dark {
	background: var(--color-frame); /* the contact band: a red frame like the header and footer */
	color: var(--color-on-dark);
}

.band--dark a:not(.button):not(.line-add-friend) {
	color: var(--color-on-dark);
}

.band--dark :focus-visible {
	outline-color: var(--color-accent);
}

.page-content h2 {
	margin: 0 0 1.25rem;
	color: var(--color-dark);
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
	line-height: 1.45;
}

.page-content h3 {
	margin: 2rem 0 0.75rem;
	color: var(--color-dark);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
	line-height: 1.5;
}

.band--dark h2,
.band--dark h3 {
	color: var(--color-on-dark);
}

.page-content p,
.page-content li {
	line-height: 2;
}

.page-content p {
	margin: 0 0 1.25em;
}

.band > :last-child {
	margin-bottom: 0;
}

/* Course name in English under a Japanese heading (and vice versa). */
.page-content .eyebrow {
	margin: -0.75rem auto 1rem;
	color: var(--color-primary); /* on white 7.8, cream 7.2 */
	font-family: var(--font-latin);
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* The course badge (対象：… / "Grades …"): as wide as its text, on the
   content column's left edge like the heading (an inline-block ignored the
   column's auto margins and sat at the band's edge on wide screens). */
.page-content .band > .meta {
	display: block;
	width: fit-content;
	margin-inline: max(0px, (100% - var(--text-width)) / 2) auto;
}

.page-content .meta {
	display: inline-block;
	padding: 0.125rem 0.875rem;
	border: 1px solid var(--color-primary);
	border-radius: 999px;
	color: var(--color-primary);
	font-size: 0.9375rem;
	font-weight: 700;
}

/* In-page index (Courses): links to the course sections. */
.page-index {
	display: grid;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.page-index {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.page-index li {
	line-height: 1.6;
}

.page-index a {
	display: flex;
	flex-direction: column;
	min-height: 2.75rem;
	padding: 0.875rem 1.25rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-dark);
	font-weight: 700;
	text-decoration: none;
}

.page-index a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Anchored sections clear nothing (the header doesn't stick) but keep a gap. */
[id] {
	scroll-margin-top: 1rem;
}

/* The values cards (style.css → .values) keep their own spacing inside the
   page's heading and paragraph rules. */
.page-content .values__title {
	margin: 0 0 0.375rem;
	font-size: 1rem;
}

.page-content .values__text {
	margin: 0;
}

@media (min-width: 64em) {
	.page-content .values__title {
		font-size: 1.0625rem;
	}
}

/* A lead line under or above a heading (About: Creative Changemakers, the
   tagline). Dark on white 13.6:1. */
.page-content .lead {
	color: var(--color-dark);
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.5;
}

/* About → 沿革 / History (2026-10-24): a vertical timeline — a gold line down
   the left with a dot per entry (year, then the event), continuing to a
   larger dot with this year, the closing message and the visit button.
   Gold = --color-accent, as the Home timeline. Line segments and dots are
   pseudo-elements (decorative, no text); entries stay a plain list.
   Without JS or with reduced motion all of it is drawn and visible. Staged
   (html.about-stage, history.js; below): a faint track; the fill
   (.history__fill) draws with the scroll (scaleY), each dot pops and its
   entry rises in when reached — transform/opacity only, so no layout
   shift. */
.history {
	--dot: 0.875rem;
	--dot-end: 1.375rem;
	--dot-top: 0.65em; /* centred on the year's line */
	position: relative;
}

.history__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.history__list > li,
.history__end {
	position: relative;
	margin: 0;
	padding: 0 0 1.75rem 2.25rem;
}

.history__end {
	padding-bottom: 0;
}

.history__list > li::before,
.history__end::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: var(--dot-top);
	left: 0;
	width: var(--dot);
	height: var(--dot);
	border-radius: 50%;
	background: var(--color-accent);
}

/* The end dot is larger, centred on the same line as the others' centres. */
.history__end::before {
	top: calc(var(--dot-top) + (var(--dot) - var(--dot-end)) / 2);
	left: calc((var(--dot) - var(--dot-end)) / 2);
	width: var(--dot-end);
	height: var(--dot-end);
}

/* Line: from each dot's centre down to the next dot's centre. */
.history__list > li::after {
	content: "";
	position: absolute;
	top: calc(var(--dot-top) + var(--dot) / 2);
	bottom: calc(-1 * (var(--dot-top) + var(--dot) / 2));
	left: calc(var(--dot) / 2 - 1.5px);
	width: 3px;
	background: var(--color-accent);
}

.history__fill {
	position: absolute;
	left: calc(var(--dot) / 2 - 1.5px);
	width: 3px;
	background: var(--color-accent);
	transform: scaleY(0);
	transform-origin: top;
	pointer-events: none;
}

.history__year {
	display: block;
	color: var(--color-dark);
	font-family: var(--font-latin);
	font-size: 1.125rem;
}

.history__list > li > .history__text {
	display: block;
}

.history__end > p {
	margin: 0 0 0.75rem;
}

.history__end .history__now {
	color: var(--color-dark);
	font-family: var(--font-latin);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.history__message {
	color: var(--color-dark);
	font-weight: 700;
	font-size: 1.125rem;
}

/* The tagline above 沿革: a gold underline (decorative). */
/* As wide as its text, at the column's left edge. */
.band:has(> .history) > .lead {
	position: relative;
	width: fit-content;
	margin-inline: max(0px, (100% - var(--text-width)) / 2) auto;
}

.band:has(> .history) > .lead::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.375rem;
	left: 0;
	height: 3px;
	border-radius: 2px;
	background: var(--color-accent);
	transform-origin: left;
}

/* About's staged reveal (html.about-stage, 2026-10-28; assets/js/
   history.js). The page opens with its title; the tagline and 沿革 rise in
   and the underline draws (1.15 s), then the first dot pops with 2009.
   Every later entry comes when the line reaches it, the way Home's polaroids
   come in (from below and slightly turned, settling; power3.out); once the
   line reaches this year's dot, each section after the timeline (its cloud
   divider with it) comes in the same way as it enters the viewport. Until
   then they are transparent but laid out (same height, in the accessibility
   tree, found by the browser's search). Nothing goes back when scrolling
   up. .is-instant (a link to a later section, focus moving into one, a
   section scrolled past at once): no transition. Never without JS, with
   reduced motion or on Back/Forward (the <head> script doesn't add the
   class). */
@media (prefers-reduced-motion: no-preference) {
	.about-stage .band:has(> .history) > .lead,
	.about-stage .band:has(> .history) > h2 {
		animation: about-rise 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	}

	.about-stage .band:has(> .history) > h2 {
		animation-delay: 0.15s;
	}

	.about-stage .band:has(> .history) > .lead::after {
		animation: about-draw 0.7s 0.45s cubic-bezier(0.65, 0, 0.35, 1) both;
	}

	.about-stage .history__list > li::after {
		opacity: 0.25;
	}

	.about-stage .history__list > li::before,
	.about-stage .history__end::before {
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay, 0s);
	}

	.about-stage .history__list > li:not(.is-reached)::before,
	.about-stage .history__end:not(.is-reached)::before {
		transform: scale(0);
	}

	.about-stage .history__list > li > *,
	.about-stage .history__end > *,
	.about-stage .band:has(> .history) ~ .band > :not(.deco) {
		transform-origin: 0 100%;
		transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition-delay: calc(var(--delay, 0s) + var(--step, 0) * 0.08s + 0.1s);
	}

	.about-stage .history__list > li:not(.is-reached) > *,
	.about-stage .history__end:not(.is-reached) > *,
	.about-stage .band:has(> .history) ~ .band:not(.is-shown) > :not(.deco) {
		opacity: 0;
		transform: translateY(1.75rem) rotate(-1.5deg);
	}

	.about-stage .band:has(> .history) ~ * {
		transition: opacity 0.5s ease-out var(--delay, 0s);
	}

	.about-stage .band:has(> .history) ~ :not(.is-shown) {
		opacity: 0;
	}

	.about-stage .history__fill {
		transition: transform 0.2s linear;
	}

	.about-stage .is-instant,
	.about-stage .is-instant > *,
	.about-stage .is-instant::before,
	.about-stage .is-instant .history__list > li > *,
	.about-stage .is-instant .history__list > li::before,
	.about-stage .is-instant .history__end > *,
	.about-stage .is-instant .history__end::before,
	.about-stage .is-instant .history__fill {
		transition: none !important; /* over the more specific rules above */
	}
}

@keyframes about-rise {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

@keyframes about-draw {
	from {
		transform: scaleX(0);
	}
}

@media print {
	.history__fill {
		display: none;
	}

	.history .history__list > li::after,
	.history .history__list > li::before,
	.history .history__end::before,
	.history .history__list > li > *,
	.history .history__end > *,
	.about-stage .band:has(> .history) ~ *,
	.about-stage .band:has(> .history) ~ * > * {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Quote / message block (Headmaster). */
.message {
	padding-left: 1.25rem;
	border-left: 4px solid var(--color-primary);
}

.page-content .signature {
	display: grid;
	justify-items: end;
	gap: 0.125rem;
	margin-top: 1.5rem;
	color: var(--color-dark);
	text-align: right;
}

.signature__name {
	font-family: var(--font-latin);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.signature__role {
	font-size: 0.9375rem;
}

/* The message's paragraphs keep their breaks; the button below it. */
.message + .wp-block-buttons {
	margin-top: 2rem;
}

/* Admission steps: numbered circles. */
.steps {
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps li {
	position: relative;
	margin: 0 0 1rem;
	padding: 0.25rem 0 0 3.25rem;
	counter-increment: step;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	top: 0.25rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-on-dark); /* 7.8:1 */
	font-family: var(--font-latin);
	font-weight: 700;
	line-height: 1;
}

/* Admissions flows (2026-10-23): STEP 1… as a pill above each step's title,
   a thin rule between steps; the pill crimson with white text (7.8:1). */
.steps--labelled li {
	display: grid;
	gap: 0.375rem;
	margin: 0;
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-border);
}

.steps--labelled li:first-child {
	padding-top: 0;
}

.steps--labelled li::before {
	content: "STEP " counter(step);
	position: static;
	justify-self: start;
	width: auto;
	height: auto;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
}

.steps--labelled strong {
	color: var(--color-dark);
	font-size: 1.0625rem;
}

/* A step with options (小学部 STEP 2 体験, 2026-10-27): a plain bulleted list
   inside the step — no counter, pill or rule of its own. */
.steps .step-options {
	margin: 0;
	padding-left: 1.25em;
	list-style: disc;
}

.steps .step-options li {
	display: list-item;
	margin: 0 0 0.25rem;
	padding: 0;
	border: 0;
	counter-increment: none;
}

.steps .step-options li::before {
	content: none;
}

/* STEP 1: LINE's 友だち追加 button (LINE's image, untouched) and the school's
   number as a secondary tap-to-call link, one row centred on the button's
   height; stacked on phones. Link crimson on white 7.8:1. */
.step-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin-top: 0.5rem;
}

.step-contact .line-add-friend {
	display: block;
	line-height: 0;
}

.step-contact__tel {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

@media (max-width: 29.99em) {
	.step-contact {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Jump links under a page's title (Admissions, 2026-10-27; setup script →
   $jumps): the course finder's option list and buttons themselves
   (.course-finder__options / __option, below), as links, with ↓ under the
   label; only the grid is
   their own — 2 × 2 on phones, one row from 48em, centered like the band's
   other blocks (margin-inline: auto). The page scrolls to the
   section smoothly (instantly with reduced motion); the header isn't sticky,
   so the target only clears the admin bar. */
.page-content .jump-links {
	margin-block: 0 2.5rem;
}

/* The same row width in both languages (English text columns are narrower,
   for the line length; buttons don't need that). */
.band > .jump-links {
	max-width: 46rem;
}

.jump-links .course-finder__options {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48em) {
	.jump-links .course-finder__options {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.band[id] {
	scroll-margin-top: var(--wp-admin--admin-bar--height, 0px);
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.jump-links) {
		scroll-behavior: smooth;
	}
}

/* The Contact button under each flow. */
.page-content .admission-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	margin-top: 1.5rem;
}

.page-content .admission-actions > * {
	margin: 0;
}

/* FAQ: native <details> (core Details block) — works without JS, keyboard and
   screen readers included. */
.page-content .wp-block-details {
	margin: 0 0 0.75rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.page-content .wp-block-details summary {
	position: relative;
	min-height: 2.75rem;
	padding: 0.875rem 3rem 0.875rem 1.25rem;
	color: var(--color-dark);
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
	list-style: none;
}

.page-content .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.page-content .wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1.25rem;
	color: var(--color-primary);
	font-family: var(--font-latin);
	font-size: 1.5rem;
	line-height: 1;
	transform: translateY(-50%);
}

.page-content .wp-block-details[open] summary::after {
	content: "−";
}

.page-content .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 1.25rem 1rem;
}

/* Calendar: one row per month. */
.calendar {
	max-width: var(--text-width);
}

.calendar .month {
	display: grid;
	gap: 0 1.25rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 40em) {
	.calendar .month {
		grid-template-columns: 6rem minmax(0, 1fr);
	}
}

.page-content .calendar h3 {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-latin);
}

.calendar ul {
	margin: 0;
	padding-left: 1.25rem;
}

/* Events as tags (2026-10-23): pale gold chips, brown text (11:1 and up). */
.calendar ul.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 0.5rem;
	padding: 0;
	list-style: none;
}

.calendar .tags li {
	margin: 0;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: var(--color-border);
	color: var(--color-dark);
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media (max-width: 39.99em) {
	.page-content .calendar h3 {
		margin-bottom: 0.5rem;
	}
}

.page-content .note {
	margin-top: 1rem;
	font-size: 0.9375rem;
}

/* School photos ([victoryis_photos]). */
.photos {
	display: grid;
	gap: 0.75rem;
	max-width: var(--content-width);
}

@media (min-width: 48em) {
	.photos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.photos__item {
	margin: 0;
}

/* layout="wide": one photo across the text column, 16:9. */
.photos--wide {
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--text-width);
	margin-block: 0.5rem 1.25rem;
}

.photos--wide .photos__item img {
	aspect-ratio: 16 / 9;
}

.photos__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}

/* Reel facade ([victoryis_reel]): a dark card with a play button; Instagram
   loads only after a click. Fixed ratio, so the swap doesn't shift layout
   above it. */
.reel {
	max-width: 24rem;
}

.reel__facade {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 0.75rem;
	aspect-ratio: 9 / 12;
	padding: 1.5rem;
	border-radius: var(--radius);
	background: var(--color-dark);
	color: var(--color-on-dark);
	text-align: center;
	text-decoration: none;
}

.reel__facade:hover {
	color: var(--color-accent);
}

.reel__play {
	width: 4rem;
	height: 4rem;
	border: 3px solid currentColor;
	border-radius: 50%;
	position: relative;
}

.reel__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	border-style: solid;
	border-width: 0.75rem 0 0.75rem 1.25rem;
	border-color: transparent transparent transparent currentColor;
	transform: translate(-50%, -50%);
}

.reel__title {
	font-family: var(--font-latin);
	font-size: 1.25rem;
	font-weight: 700;
}

.reel__note {
	font-size: 0.875rem;
}

.reel .instagram-media {
	min-width: 0 !important; /* Instagram's inline 326px would overflow a 320 px phone */
}

/* Instagram fallback card ([victoryis_instagram] without a feed). */
.instagram-card__link {
	display: inline-flex;
	align-items: center;
	min-height: 3.5rem;
	padding: 0.75rem 2rem;
	border: 2px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-surface);
	color: var(--color-dark); /* 14.3:1 */
	font-family: var(--font-latin);
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.instagram-card__link:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Contact details ([victoryis_contact_details]). */
.contact-details {
	display: grid;
	gap: 0.75rem;
	margin: 0 auto 2rem;
}

.contact-details__row {
	display: grid;
	gap: 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 40em) {
	.contact-details__row {
		grid-template-columns: 7rem minmax(0, 1fr);
	}
}

.contact-details dt {
	color: var(--color-dark);
	font-weight: 700;
}

.contact-details dd {
	margin: 0;
}

.contact-details__tel {
	font-family: var(--font-latin);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* WPForms (Lite) on the Contact page: palette, 44 px controls, visible focus.
   Its modern styles take colours from these variables (with !important), so
   they are set here; field borders are dark for the 3:1 non-text contrast. */
.page-content .wpforms-container {
	--wpforms-button-background-color: var(--color-primary);
	--wpforms-button-background-color-alt: var(--color-primary);
	--wpforms-button-border-color: var(--color-primary);
	--wpforms-button-text-color: var(--color-on-dark);
	--wpforms-button-text-color-alt: var(--color-on-dark);
	--wpforms-button-border-radius: 999px;
	--wpforms-field-border-color: var(--color-dark);
	--wpforms-field-border-color-spare: var(--color-dark);
	--wpforms-field-background-color: var(--color-surface);
	--wpforms-field-text-color: var(--color-text);
	--wpforms-label-color: var(--color-dark);
	--wpforms-label-sublabel-color: var(--color-text);
	--wpforms-label-error-color: var(--color-primary);
	--wpforms-icon-choices-color: var(--color-primary);
	margin-block: 0;
}

/* Compact spacing (2026-10-21): 0.5rem above and below each field (1rem
   between two), 0.375rem from label to control and from control to its note.
   Controls stay 44 px, text keeps a 1.5+ line height. Both languages: the same
   form, only the labels differ. */
.page-content .wpforms-container .wpforms-form .wpforms-field {
	padding-block: 0.5rem;
}

.page-content .wpforms-container .wpforms-form .wpforms-field-label {
	margin: 0 0 0.375rem;
	line-height: 1.5;
}

.page-content .wpforms-container .wpforms-form .wpforms-field-description {
	margin: 0.375rem 0 0;
	line-height: 1.55;
}

.page-content .wpforms-container .wpforms-form .wpforms-submit-container {
	margin-top: 0.75rem;
	padding: 0;
}

.page-content .wpforms-container .wpforms-field-label {
	color: var(--color-dark);
	font-weight: 700;
}

.page-content .wpforms-container input[type="text"],
.page-content .wpforms-container input[type="email"],
.page-content .wpforms-container select,
.page-content .wpforms-container textarea {
	width: 100%;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-dark);
	border-radius: 0.5rem;
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
}

.page-content .wpforms-container input:focus-visible,
.page-content .wpforms-container select:focus-visible,
.page-content .wpforms-container textarea:focus-visible {
	outline: 3px solid var(--color-dark);
	outline-offset: 1px;
	border-color: var(--color-dark);
}

.page-content .wpforms-container .wpforms-submit {
	min-height: 2.75rem;
	padding: 0.625rem 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--color-primary);
	color: var(--color-on-dark);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.page-content .wpforms-container .wpforms-submit:hover {
	background: var(--color-primary-dark);
}

/* Radio and checkbox choices (the consent checkbox, any other list): input
   and label centred on one line; the label fills a 44 px row, so the whole
   row is the tap target. (Selectors outrank WPForms' own list rules.) */
.page-content .wpforms-container .wpforms-field.wpforms-field-radio ul li,
.page-content .wpforms-container .wpforms-field.wpforms-field-checkbox ul li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio ul li input,
.page-content .wpforms-container .wpforms-field.wpforms-field-checkbox ul li input {
	flex: none;
	margin: 0;
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio ul li label,
.page-content .wpforms-container .wpforms-field.wpforms-field-checkbox ul li label {
	margin: 0;
	padding-block: 0.625rem; /* one line: 44 px */
	line-height: 1.5;
}

/* Contact method (お電話 | メール, class vis-method from the setup script): a
   segmented control. The real radios stay (visually hidden, still focusable
   and validated), so keyboard (arrows), screen readers, no-JS posts and
   WPForms' and the server's checks work as before. 48 px, the field's width
   up to 28rem, a 0.5rem radius like the other fields, a thin divider.
   Unselected: white, brown text 14.3:1, cream on hover (13.3:1). Selected:
   crimson, white text 7.8:1. Focus: brown ring around the control (14.3:1 /
   13.3:1 on cream). Error: crimson border like the other fields. */
.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	width: 100%;
	max-width: 28rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-dark);
	border-radius: 0.5rem;
	overflow: hidden;
	list-style: none;
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul li {
	position: relative;
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul li + li {
	border-left: 1px solid var(--color-dark);
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul li input {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	appearance: none;
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul li label {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	margin: 0;
	padding: 0.25rem 1rem;
	background: var(--color-surface);
	color: var(--color-dark);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul li label:hover {
	background: var(--color-surface-alt);
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul li input:checked + label {
	background: var(--color-primary);
	color: var(--color-on-dark);
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul:has(input:focus-visible) {
	outline: 3px solid var(--color-dark);
	outline-offset: 2px;
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method.wpforms-has-error ul,
.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul:has(input.wpforms-error) {
	border-color: var(--color-primary);
}

.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method.wpforms-has-error ul li + li,
.page-content .wpforms-container .wpforms-field.wpforms-field-radio.vis-method ul:has(input.wpforms-error) li + li {
	border-left-color: var(--color-primary);
}

/* Block buttons (Admissions → 今すぐお問い合わせ): the theme's red .button. */
.page-content .wp-block-buttons {
	margin-top: 1.5rem;
}

.page-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.625rem 1.75rem;
	border-radius: 999px;
	background: var(--color-primary);
	color: var(--color-on-dark);
	font-size: inherit;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.page-content .wp-block-button__link:hover,
.page-content .wp-block-button__link:active {
	background: var(--color-primary-dark);
	color: var(--color-on-dark);
}

/* Contact band at the end of a page ([victoryis_cta]). */
.cta__heading {
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
}

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem auto 0;
}

/* News list. */
.news-list {
	padding: 0;
	list-style: none;
}

.news-list__item {
	display: grid;
	gap: 0.25rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--color-border);
}

.news-list__date,
.news-meta {
	color: var(--color-dark);
	font-family: var(--font-latin);
	font-size: 0.9375rem;
	font-weight: 700;
}

.news-list__title {
	font-weight: 700;
	line-height: 1.6;
}

.page-content .news-list__summary {
	margin: 0;
}

.news-meta__event {
	margin-left: 1rem;
}

/* A notice at the top of a page (e.g. the privacy policy's review note). */
.page-content .notice {
	padding: 0.875rem 1.25rem;
	border-left: 4px solid var(--color-primary);
	background: var(--color-surface-alt);
	color: var(--color-dark);
	font-weight: 700;
}

/* Course pages (template-course.php, 2026-10-24; 小学部 first, the template
   for all five) and the course summaries on Courses. Contrast: gold on the
   frame 5.7, white on the frame 9.0; crimson on white 7.8 / cream 7.2; brown
   on white 14.3 / cream 13.3; white on brown 14.3. */

/* Hero: the eyebrow, the h1 (school name small, course name large), the
   tagline and the motto, on the red frame. */
.page-header--course p {
	margin: 0;
}

.course-hero__eyebrow {
	color: var(--color-accent);
	font-family: var(--font-latin);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.page-header--course .page-header__title {
	margin-top: 0.5rem;
}

.course-hero__school {
	display: block;
	font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.25rem);
	line-height: 1.5;
}

.course-hero__name {
	display: block;
	font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
	line-height: 1.2;
}

.page-header--course .course-hero__tagline {
	max-width: 40rem;
	margin-top: 1.25rem;
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.6;
	text-wrap: balance;
}

.page-header--course .course-hero__motto {
	margin-top: 0.5rem;
	color: var(--color-accent);
	font-family: var(--font-latin);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Smaller headings inside a course section (学習者像, 学びの流れ, 4つの特色). */
.page-content h4 {
	margin: 1.75rem 0 0.5rem;
	color: var(--color-dark);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* Mottos (Learn Deeply…, Victory in Learning…) and the English tagline under
   a summary heading. */
.page-content .motto,
.page-content .tagline {
	color: var(--color-primary);
	font-family: var(--font-latin);
	font-weight: 700;
	line-height: 1.4;
}

.page-content .motto {
	margin-bottom: 0.25rem;
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
	text-wrap: balance;
}

.page-content .motto + p:not(.motto-sub) {
	margin-top: 1.25rem;
}

.page-content .motto-sub {
	margin-bottom: 1.5rem;
	color: var(--color-dark);
	font-weight: 700;
}

.page-content .tagline {
	margin-top: -0.25rem;
}

/* Bold emphasis lines: a gold bar on the left (decoration), brown text. */
.page-content .emphasis {
	padding-left: 1rem;
	border-left: 4px solid var(--color-accent);
	color: var(--color-dark);
	font-size: 1.0625rem;
	line-height: 1.8;
}

/* Term lists: "term：text" items, a crimson dot each. */
.page-content .terms {
	padding: 0;
	list-style: none;
}

.page-content .terms li {
	position: relative;
	margin-bottom: 0.5rem;
	padding-left: 1.25rem;
}

.page-content .terms li::before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: 0.125rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--color-primary);
}

.page-content .terms strong,
.page-content .cycle strong {
	color: var(--color-dark);
}

/* The PBL cycle: numbered circles (like the admission steps). */
.page-content .cycle {
	padding: 0;
	list-style: none;
	counter-reset: cycle;
}

.page-content .cycle li {
	position: relative;
	margin-bottom: 0.625rem;
	padding-left: 2.75rem;
	counter-increment: cycle;
}

.page-content .cycle li::before {
	content: counter(cycle);
	position: absolute;
	top: 0.2rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-on-dark); /* 7.8:1 */
	font-family: var(--font-latin);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
}

/* Concrete → Pictorial → Abstract, and the children's questions. */
.page-content .flow {
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	background: var(--color-surface-alt);
	color: var(--color-dark);
	font-weight: 700;
	text-align: center;
}

.flow__line,
.voices__line {
	display: block;
}

.flow__line:lang(en) {
	font-family: var(--font-latin);
	font-size: 1.125rem;
	letter-spacing: 0.02em;
}

.page-content .voices {
	color: var(--color-dark);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.8;
}

.voices__line + .voices__line {
	margin-top: 0.25rem;
}

/* A link to more on another page (07 → 特色ある学び). */
.page-content .more a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	font-weight: 700;
}

.page-content .more a::after {
	content: "→";
}

/* The numbered features (01–08): number, heading and tagline, then the body;
   from 64em the head on the left, the body on the right (the band's column
   widens for them, its heading with it). */
.page-content .band > .feature {
	padding-top: 2rem;
	margin-top: 2rem;
	border-top: 1px solid var(--color-border);
}

.page-content .band > h2 + .feature {
	margin-top: 1rem;
}

.feature__num {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--color-primary); /* 7.8:1 */
	font-family: var(--font-latin);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.page-content .feature__title {
	margin: 0;
}

.page-content .feature__tagline {
	margin: 0.5rem 0 1.25rem;
	color: var(--color-primary);
	font-weight: 700;
	line-height: 1.6;
}

.feature__body > :last-child {
	margin-bottom: 0;
}

@media (min-width: 64em) {
	.page-content .band:has(> .feature) > * {
		max-width: 64rem;
	}

	.page-content .band > .feature {
		display: grid;
		grid-template-columns: minmax(0, 18rem) minmax(0, var(--text-width));
		justify-content: space-between;
		gap: 3rem;
	}

	.page-content .feature__tagline {
		margin-bottom: 0;
	}
}

/* Data tables (主な学習教科): a real table on a white card; below 40em each
   row is a card (subject, then 使用言語：…, then the highlights) — the roles
   in the markup keep it a table for screen readers. Nothing scrolls. */
.page-content .band:has(> .data-table) > * {
	max-width: 56rem;
}

.data-table table {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-surface);
	line-height: 1.7;
}

.data-table th,
.data-table td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.data-table thead th {
	background: var(--color-dark);
	color: var(--color-on-dark); /* 14.3:1 */
	white-space: nowrap;
}

.data-table tbody th {
	width: 30%;
	color: var(--color-dark);
}

.data-table tbody td:first-of-type {
	white-space: nowrap;
}

.data-table tbody tr:last-child > * {
	border-bottom: 0;
}

@media (max-width: 39.99em) {
	.data-table table,
	.data-table tbody,
	.data-table tr,
	.data-table th,
	.data-table td {
		display: block;
		width: auto;
	}

	.data-table table {
		background: none;
		overflow: visible;
	}

	.data-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.data-table tbody tr {
		margin-bottom: 0.75rem;
		padding: 1rem 1.125rem;
		border-radius: var(--radius);
		background: var(--color-surface);
	}

	.data-table tbody th,
	.data-table tbody td {
		padding: 0;
		border: 0;
	}

	.data-table tbody th {
		width: auto;
		font-size: 1.0625rem;
	}

	.data-table tbody td:first-of-type {
		margin: 0.125rem 0 0.375rem;
		color: var(--color-primary);
		font-size: 0.9375rem;
		font-weight: 700;
	}

	.data-table tbody td:first-of-type::before {
		content: attr(data-label) "：";
	}

	:lang(en) .data-table tbody td:first-of-type::before {
		content: attr(data-label) ": ";
	}
}

/* Cards (小学部が大切にする3つの価値観): three across from 48em. */
.page-content .cards {
	display: grid;
	gap: 1rem;
	padding: 0;
	list-style: none;
}

.page-content .cards li {
	padding: 1.25rem 1.25rem 1.5rem;
	border-top: 4px solid var(--color-primary);
	border-radius: var(--radius);
	background: var(--color-surface);
	line-height: 1.9;
}

.page-content .cards strong {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--color-dark);
	font-family: var(--font-heading);
	font-size: 1.125rem;
	line-height: 1.5;
}

.cards__sep {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 48em) {
	/* Cards use more of the width: with the whole band when it is mostly
	   cards (three paragraphs at most), else the cards alone (and a heading
	   right above them), so longer text keeps its reading column. */
	.page-content .band:has(> .cards):not(:has(> p:nth-of-type(4))) > *,
	.page-content .band > .cards,
	.page-content .band > :is(h2, h3):has(+ .cards) {
		max-width: 64rem;
	}

	.page-content .cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* まずは体験 / Come and experience: a white card at the end, two buttons. */
.page-content .visit {
	margin-top: 2.5rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.page-content .visit h3 {
	margin-top: 0;
}

.page-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}

.page-content .is-style-outline .wp-block-button__link {
	border: 2px solid var(--color-primary);
	background: transparent;
	color: var(--color-primary); /* 7.8:1 on white */
}

.page-content .is-style-outline .wp-block-button__link:hover,
.page-content .is-style-outline .wp-block-button__link:active {
	border-color: var(--color-primary-dark);
	background: var(--color-primary-dark);
	color: var(--color-on-dark);
}

/* Course pages, more parts (Kinder, Preschool, After-School & Saturday,
   English Class; 2026-10-24). */

/* Hero: a second, smaller line under the course name (Preschool's class
   name; the "｜" stays in the text for screen readers), and a jump menu to
   the page's sections (white outline pills on the frame, 9.0:1). */
.course-hero__sep {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.course-hero__class {
	display: block;
	margin-top: 0.25rem;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	line-height: 1.4;
}

.page-header--course .course-hero__tagline + .course-hero__tagline {
	margin-top: 0.25rem;
}

.page-header--course .jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.page-header--course .jump a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.375rem 1.125rem;
	border: 2px solid var(--color-on-dark);
	border-radius: 999px;
	color: var(--color-on-dark);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.page-header--course .jump a:hover {
	background: color-mix(in srgb, var(--color-on-dark) 14%, transparent);
}

/* A label above a section heading (AFTER SCHOOL｜2 HOURS). */
.page-content .kicker {
	margin-bottom: 0.5rem;
	color: var(--color-primary);
	font-family: var(--font-latin);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* Short lines stacked in one paragraph, and the children's questions list. */
.lines__line {
	display: block;
}

.page-content .lines {
	color: var(--color-dark);
	font-weight: 700;
	line-height: 1.9;
}

/* Quotation (core Quote block). */
.page-content .wp-block-quote {
	margin: 1.5rem auto;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--color-accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--color-surface);
	color: var(--color-dark);
}

.band--surface .wp-block-quote {
	background: var(--color-surface-alt);
}

.page-content .wp-block-quote p {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.8;
}

.page-content .wp-block-quote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	font-style: normal;
}

/* Course facts: a definition list in a box (white on cream, cream on
   white); term over value on phones, side by side from 40em. */
.page-content .info {
	margin: 0 auto 1.25rem;
	padding: 0.5rem 1.25rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.band--surface .info {
	background: var(--color-surface-alt);
}

.info__row {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-border);
	line-height: 1.7;
}

.info__row:last-child {
	border-bottom: 0;
}

.info dt {
	color: var(--color-dark);
	font-weight: 700;
}

.info dd {
	margin: 0;
}

@media (min-width: 40em) {
	.info__row {
		display: grid;
		grid-template-columns: 9rem minmax(0, 1fr);
		gap: 1rem;
	}

	:lang(en) .info__row {
		grid-template-columns: 8rem minmax(0, 1fr);
	}
}

/* A day's schedule (Kinder 一日の流れ, 2026-10-26): time | activity side by
   side at every width; the times line up (tabular figures). */
.page-content .info--times .info__row {
	display: grid;
	grid-template-columns: 7.25rem minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.625rem 0;
}

.info--times dt {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (min-width: 40em) {
	.page-content .info--times .info__row {
		grid-template-columns: 8.5rem minmax(0, 1fr);
		gap: 1rem;
	}
}

/* Numbered cards (4つの魅力 …): the number drawn by CSS; small cards (the
   daily program, the 2-hour lesson): tighter, two across from 30em, three
   from 48em. */
.page-content .cards--numbered {
	counter-reset: card;
}

.page-content .cards--numbered li {
	counter-increment: card;
}

.page-content .cards--numbered li::before {
	content: counter(card, decimal-leading-zero);
	display: block;
	margin-bottom: 0.25rem;
	color: var(--color-primary);
	font-family: var(--font-latin);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.page-content .cards--small li {
	padding: 1rem 1.125rem 1.125rem;
	font-size: 0.9375rem;
	line-height: 1.8;
}

.page-content .cards--small strong {
	font-size: 1.0625rem;
}

.band--surface .cards li {
	background: var(--color-surface-alt);
}

@media (min-width: 30em) {
	.page-content .cards--small {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48em) {
	.page-content .cards--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-content .cards--small {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.page-content .cards--four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The playful band (LEARN BOLDLY / CREATE FREELY / LEAD WITH HEART): three
   big lines on the red frame (white, gold 5.7:1, white), white cards with
   brown text, slightly tilted from 48em. The " / " stays for screen readers. */
.page-content .play-lines {
	margin-bottom: 1.5rem;
	font-family: var(--font-latin);
	font-size: clamp(2rem, 1.3rem + 3.4vw, 3.75rem);
	letter-spacing: 0.02em;
	line-height: 1.1;
}

.play-lines__line {
	display: block;
}

.play-lines__line:nth-child(3) {
	color: var(--color-accent);
}

.play-lines__sep {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.band--dark .cards li {
	border-top-color: var(--color-accent);
	color: var(--color-text);
}

@media (min-width: 48em) {
	.band--dark .cards li:nth-child(odd) {
		transform: rotate(-1.25deg);
	}

	.band--dark .cards li:nth-child(even) {
		transform: rotate(1deg);
	}
}

/* Two-column tables (キンダーから小学部へ …): on phones each row is a card,
   the second column under its column name. */
@media (max-width: 39.99em) {
	.data-table--pairs tbody td:first-of-type {
		margin: 0.375rem 0 0;
		color: var(--color-text);
		font-size: inherit;
		font-weight: 400;
	}

	.data-table--pairs tbody td:first-of-type::before,
	:lang(en) .data-table--pairs tbody td:first-of-type::before {
		content: attr(data-label);
		display: block;
		color: var(--color-primary);
		font-size: 0.875rem;
		font-weight: 700;
	}
}

.data-table--pairs tbody td:first-of-type {
	white-space: normal;
}

@media (min-width: 40em) {
	.data-table--pairs tbody th {
		width: 45%;
	}
}

/* A pointer to another course page (After-School → English Class). */
.page-content .pointer {
	margin-bottom: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface-alt);
}

.page-content .pointer p {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--color-dark);
	font-weight: 700;
}

.page-content .pointer .button {
	flex: none;
}

/* The lesson split (80 + 40 minutes) as a bar; the sentence above says the
   same in words, so the bar is aria-hidden. Crimson with white (7.8:1), gold
   with brown (9.1:1). */
.split {
	display: flex;
	max-width: var(--text-width);
	margin: 0 auto 1.25rem;
	border-radius: var(--radius);
	overflow: hidden;
	font-family: var(--font-latin);
	font-weight: 700;
	line-height: 1;
}

.split__part {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.5rem;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.split__part--main {
	flex: 80;
	background: var(--color-primary);
	color: var(--color-on-dark);
}

.split__part--other {
	flex: 40;
	background: var(--color-accent);
	color: var(--color-dark);
}

/* Checklist (こんなお子様におすすめ): a crimson check per item. */
.page-content .checklist {
	padding: 0;
	list-style: none;
}

.page-content .checklist li {
	position: relative;
	margin-bottom: 0.625rem;
	padding-left: 2.25rem;
}

.page-content .checklist li::before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 0;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background: var(--color-primary);
}

.page-content .checklist li::after {
	content: "";
	position: absolute;
	top: calc(0.35em + 0.375rem);
	left: 0.4375rem;
	width: 0.5rem;
	height: 0.3125rem;
	border-bottom: 2px solid var(--color-on-dark);
	border-left: 2px solid var(--color-on-dark);
	transform: rotate(-45deg);
}

/* Courses hub → course finder (inc/finder.php, finder.js; 2026-10-26).
   Without JS: the intro, the jump links and every course as a card. With JS
   (html.finder-js, set before the first paint): the selector, or the card(s)
   of the view on html[data-finder] — set from the URL in the <head>, so a
   deep link paints its result at once. */
.course-hub > .course-list,
.course-hub > .course-finder,
.course-hub > .course-finder-after {
	max-width: calc(var(--text-width) + 5rem);
}

.course-list {
	display: grid;
	gap: 1.5rem;
}

.course-card {
	padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem) clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
	border-radius: calc(var(--radius) * 1.5);
	background: var(--color-surface-alt);
}

.course-card > :last-child {
	margin-bottom: 0;
}

.course-finder,
.course-finder-after,
.finder-js .course-card,
.finder-js .course-hub > .courses-intro,
.finder-js .course-hub > .page-index,
.finder-js[data-finder="select"] .course-finder__result,
.finder-js[data-finder="select"] .course-finder-after,
.finder-js:not([data-finder="select"]) .course-finder__select,
.finder-js:not([data-finder="all"]) .course-finder__title,
.finder-js[data-finder="all"] .course-finder__all {
	display: none;
}

.finder-js .course-finder,
.finder-js .course-finder-after,
.finder-js[data-finder="all"] .course-card,
.finder-js[data-finder="c-elementary"] #elementary,
.finder-js[data-finder="c-kinder"] #kinder,
.finder-js[data-finder="c-preschool"] #preschool,
.finder-js[data-finder="c-baby-circle"] #baby-circle,
.finder-js[data-finder="c-after-school"] #after-school,
.finder-js[data-finder="c-english-class"] #english-class {
	display: block;
}

/* The selector. */
.course-finder__heading,
.course-finder__prompt,
.course-finder__see-all {
	text-align: center;
}

.page-content .course-finder__prompt {
	margin: 0 0 1rem;
	color: var(--color-dark);
	font-weight: 700;
}

.course-finder__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The buttons (2026-10-28; Admissions' jump links too): cream, a thin gold
   border, brand-red text (6.7:1 and more on either cream) and a small arrow,
   → beside the label (opens a result) or ↓ under it on the jump links
   (scrolls down; the label gets the whole width). Japanese breaks between
   phrases only (keep-all; a word too long for the button still wraps).
   Pointer devices:
   hovered, the button lifts 2px with a soft shadow, the border deepens, the
   cream warms and the arrow nudges 3px; pressed (every device, the feedback
   on phones), it sinks 1px and the shadow shrinks. Reduced motion: the
   colors and the border only. */
.course-finder__option {
	--option-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--option-nudge: translateX(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 3.5rem;
	padding: 0.875rem 0.75rem;
	border: 1px solid #e3bc52;
	border-radius: var(--radius);
	background: var(--color-surface-alt);
	color: var(--color-primary);
	font: inherit;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	word-break: keep-all;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.course-finder__option::after {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	margin-left: 0.5em;
	background: currentColor;
	-webkit-mask: var(--option-arrow) center / contain no-repeat;
	mask: var(--option-arrow) center / contain no-repeat;
	transition: transform 0.18s ease;
}

.course-finder__label {
	min-width: 0;
}

.jump-links .course-finder__option {
	flex-direction: column;
	padding-inline: 0.625rem;
	--option-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v9.5M4 8.5l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--option-nudge: translateY(3px);
}

.jump-links .course-finder__option::after {
	margin: 0.25rem 0 0;
}

/* The text stays red when a tap leaves :hover on (a:hover is darker). */
.course-finder__option:hover {
	color: var(--color-primary);
}

@media (hover: hover) {
	.course-finder__option:hover {
		border-color: #c4901a;
		background: #fbedc9;
	}
}

.course-finder__option:active {
	border-color: #c4901a;
	background: #fbedc9;
}

.course-finder__option:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	@media (hover: hover) {
		.course-finder__option:hover {
			box-shadow: 0 6px 14px rgb(61 37 13 / 0.14);
			transform: translateY(-2px);
		}

		.course-finder__option:hover::after {
			transform: var(--option-nudge);
		}
	}

	.course-finder__option:active,
	.course-finder__option:hover:active {
		box-shadow: 0 1px 2px rgb(61 37 13 / 0.12);
		transform: translateY(1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.course-finder__option,
	.course-finder__option::after {
		transition-property: background-color, border-color, box-shadow;
	}
}

.page-content .course-finder__see-all {
	margin: 1.5rem 0 0;
}

/* The result: its heading (all courses only), the actions, then the cards; the
   clubs line below them. */
.course-finder__result {
	margin-bottom: 1.5rem;
}

.page-content .course-finder__title {
	margin-bottom: 1rem;
}

.course-finder__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
}

.course-finder__again {
	border: 0;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.course-finder-after {
	margin-top: 2rem;
}

.page-content .course-finder__clubs {
	margin: 0;
	font-weight: 700;
	text-wrap: balance;
}