/*
Theme Name:        Victory International School
Description:       Minimal custom theme from wp-playbook. No page builder.
Version:           1.0.0
Requires at least: 6.4
Requires PHP:      8.1
Text Domain:       victoryis
Domain Path:       /languages
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Colours — the only place a hex value appears. Crimson (the uniform colour),
 * brown from the crest, logo gold; approved 2026-10-16. Final palette
 * (2026-10-21): red frames (frame #8E1C24) on every page (header, hero, page
 * headers, the LINE / contact band, footer) — buttons on them gold or white,
 * never crimson (1.2:1); the Home content sections a lighter brown (section
 * #6B4423) with white text and gold accents; inner pages white and cream. AA checked for every
 * text/background pair used (lowest: gold on the section brown, 5.4:1;
 * README → Colours). Never: accent text on white (1.6:1).
 */
:root {
	--color-primary: #a31621;      /* buttons (white text), links */
	--color-primary-dark: #5c1a1b; /* hover/pressed */
	--color-frame: #8e1c24;        /* red frames: header, hero, page headers, LINE/contact band, footer */
	--color-dark: #3d250d;         /* headings, text and focus rings on light backgrounds */
	--color-section: #6b4423;      /* Home content sections: mission, counters, School life (white 8.5:1, gold 5.4:1) */
	--color-text: #333333;         /* body */
	--color-surface: #ffffff;      /* main background */
	--color-surface-alt: #fdf6e3;  /* alternating section bands only */
	--color-border: #fce6ac;       /* pale gold (45% accent on white): dividers, decoration */
	--color-accent: #f9c846;       /* logo gold: on dark only, decoration — never text on white */
	--color-on-dark: #ffffff;

	--content-width: 72rem;
	--text-width: 46rem;
	--space: 1rem;
	--radius: 0.75rem;

	/* Body text: system fonts (Hiragino on Apple, Noto Sans CJK JP on Android,
	   Yu Gothic Medium / Meiryo on Windows). */
	--font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic Medium", YuGothic, Meiryo, system-ui, sans-serif;
	/* Self-hosted web fonts (approved 2026-10-16, OFL; assets/css/fonts-*.css).
	   Outfit: EN headings, numbers, the Latin school name — Japanese characters
	   in these elements fall through to the system font. Zen Maru Gothic 700:
	   Japanese headings only; Outfit stays first so Latin text in a Japanese
	   heading is Outfit too (and no Latin Zen Maru slices are needed). */
	--font-latin: "Outfit", "Outfit Fallback", var(--font-sans);
	--font-heading: var(--font-latin);
}

:root:lang(ja) {
	--font-heading: "Outfit", "Outfit Fallback", "Zen Maru Gothic", var(--font-sans);
}

/* English body text: ~70 characters a line (46rem gave 77–94). */
:root:lang(en) {
	--text-width: 36rem;
}

/* Arial Bold scaled to Outfit 700's average width and vertical metrics, so the
   swap to Outfit hardly moves anything (Outfit: upm 1000, ascent 1000, descent
   260; average Latin advance 0.4637 em vs Arial Bold 0.4841 em -> 95.8 %). */
@font-face {
	font-family: "Outfit Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
	font-weight: 100 900;
	size-adjust: 95.8%;
	ascent-override: 104.4%;
	descent-override: 27.1%;
	line-gap-override: 0%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--color-text);
	background: var(--color-surface);
	font-family: var(--font-sans);
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	text-wrap: balance; /* no one-word last lines */
}

/* Japanese headings never break inside a word: only at spaces, at <wbr>
   ("|" marks in the fields) or, in Chrome, at phrase boundaries. Safari and
   Firefox would otherwise break anywhere; overflow-wrap still rescues a part
   too wide for a phone. */
:lang(ja) :is(h1, h2, h3, h4) {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

@supports (word-break: auto-phrase) {
	:lang(ja) :is(h1, h2, h3, h4) {
		word-break: auto-phrase;
	}
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-primary);
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--color-primary-dark);
}

:focus-visible {
	outline: 3px solid var(--color-dark);
	outline-offset: 2px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
}

/* Text for assistive tech only (e.g. the hero title's unsplit text). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	left: var(--space);
	top: var(--space);
	z-index: 1000;
	padding: 0.5rem 1rem;
	background: var(--color-surface);
}

.menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Header: a red frame like the page headers, with a gold line under it.
   On the frame: white text and outlines (9.0:1), gold for hover, current page
   and focus (5.7:1). The group dropdowns and the phone menu panel are light
   (white, brown text 14.3:1, crimson hover 7.8:1, brown focus rings). */
.site-header {
	position: relative;
	z-index: 10;
	border-bottom: 4px solid var(--color-accent);
	background: var(--color-frame);
}

.site-header :focus-visible {
	outline-color: var(--color-accent);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem var(--space);
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 0.5rem var(--space);
}

.site-title {
	margin: 0;
	font-family: var(--font-latin);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* The school's full name beside the crest (not on the front page: the hero
   shows it). "Victory International" / "School" on two lines (the <br>
   header.php puts before the last word) where the header is tight: phones,
   and 64–80em, where the full nav takes most of the row (2026-10-27: six
   items; 15 px there, so the Japanese row fits at 1024 px). Phones: 13–15 px
   with the viewport, so at 360–375 px both lines fit beside the crest, the
   language link and the menu button, and the header stays 64 px. */
.site-title__text {
	font-size: clamp(0.8125rem, (100vw - 14.5rem) / 9.8, 0.9375rem);
	line-height: 1.2;
}

@media (min-width: 48em) {
	.site-title__text {
		font-size: 1.125rem;
	}
}

@media (min-width: 64em) and (max-width: 79.99em) {
	.site-title__text {
		font-size: 0.9375rem;
	}
}

@media (min-width: 48em) and (max-width: 63.99em), (min-width: 80em) {
	.site-title__break {
		display: none;
	}
}

/* The name in white: the most contrast (9.0:1), and gold stays the signal for
   hover / current page. */
.site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--color-on-dark);
	text-decoration: none;
}

/* Header nav + language switcher: page titles and Polylang's language names
   only (inc/nav.php). Tap targets 44 px. On wide screens 15 px and 1 rem
   apart, so the six items, the button and the switcher stay on one row from
   1024 px (2026-10-27). */
.site-header__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.25rem;
}

.site-nav__menu {
	gap: 0 1.25rem;
}

.site-nav a,
.lang-switch__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--color-on-dark);
	font-weight: 700;
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current] {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Group buttons (inc/nav.php): look like the links. */
.site-nav__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-on-dark);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.site-nav__toggle:hover,
.site-nav__toggle[aria-expanded="true"],
.current-menu-ancestor > .site-nav__toggle,
.current-menu-parent > .site-nav__toggle {
	color: var(--color-accent);
}

.current-menu-ancestor > .site-nav__toggle,
.current-menu-parent > .site-nav__toggle {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* お問い合わせ / Contact Us as a button (not beside LINE: the header has none).
   On the frame: gold with frame-red text (5.7:1; crimson on the frame would be
   1.2:1), white when hovered or current (9.0:1). In the light phone panel: the red
   button of the pages (white text 7.8:1). */
.site-nav .menu-item-cta > a {
	padding-inline: 1.25rem;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-frame);
	text-decoration: none;
}

.site-nav .menu-item-cta > a:hover,
.site-nav .menu-item-cta > a[aria-current="page"] {
	background: var(--color-on-dark);
	color: var(--color-frame);
	text-decoration: none;
}

.lang-switch {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang-switch__link {
	padding-inline: 0.875rem;
	border: 1px solid var(--color-on-dark);
	border-radius: 999px;
	color: var(--color-on-dark); /* on the frame 9.0:1 */
	font-size: 0.875rem;
}

.lang-switch__link:hover {
	border-color: var(--color-accent);
	color: var(--color-accent); /* 5.7:1 */
}

@media (min-width: 64em) {
	.site-header__nav,
	.site-nav__menu {
		column-gap: 1rem;
	}

	.site-nav a,
	.site-nav__toggle {
		font-size: 0.9375rem;
	}

	.site-nav .menu-item-cta > a {
		padding-inline: 1rem;
	}
}

@media (min-width: 64em) and (max-width: 79.99em) {
	.site-header__inner,
	.site-header__nav,
	.site-nav__menu {
		column-gap: 0.875rem;
	}

	.site-nav .menu-item-cta > a,
	.lang-switch__link {
		padding-inline: 0.75rem;
	}
}

/* Phone/tablet menu (below 64em, assets/js/ui.js): a button with three bars
   opens the menu as a panel under the header (the look of 2026-10-21, back on
   2026-10-27 after a day full screen); the language switcher stays beside the
   button. The panel (inc/nav.php → victoryis_site_menu()): the nav, then
   見学予約 / Book a visit, LINE's 友だち追加 and the phone number. Keyed on
   html.menu-js (set in <head> before the first paint, functions.php), so the
   header is collapsed from the first frame and nothing moves when the
   deferred ui.js runs. Without JS, or if ui.js never ran by DOMContentLoaded,
   the class is absent: the button stays hidden and the nav wraps under the
   logo; on wide screens the wrapper is transparent to layout and only the nav
   shows. */
.site-menu {
	display: contents;
}

.site-menu__extra {
	display: none;
}

.menu-toggle {
	display: none;
}

@media (max-width: 47.99em) {
	/* No line box around the logo link: the header is exactly 64 px. */
	.site-title {
		display: flex;
	}

	/* A little more room for the two-line name. */
	.site-header__inner {
		column-gap: 0.75rem;
	}

	.site-title a {
		gap: 0.5rem;
	}
}

@media (max-width: 63.99em) {
	.menu-js .site-header .site-header__inner {
		flex-wrap: nowrap;
	}

	.menu-js .site-header .site-header__nav {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}

	.menu-js .site-header .menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 1px solid var(--color-on-dark);
		border-radius: 999px;
		background: transparent;
		color: var(--color-on-dark); /* on the frame 9.0:1 */
		cursor: pointer;
	}

	.menu-js .site-header .menu-toggle:hover,
	.menu-js .site-header .menu-toggle[aria-expanded="true"] {
		border-color: var(--color-accent);
		color: var(--color-accent); /* 5.7:1 */
	}

	.menu-toggle__bars,
	.menu-toggle__bars::before,
	.menu-toggle__bars::after {
		display: block;
		width: 1.125rem;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
	}

	.menu-toggle__bars {
		position: relative;
	}

	.menu-toggle__bars::before,
	.menu-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-toggle__bars::before {
		top: -6px;
	}

	.menu-toggle__bars::after {
		top: 6px;
	}

	/* Open: the bars become a cross. */
	.is-menu-open .menu-toggle__bars {
		background: transparent;
	}

	.is-menu-open .menu-toggle__bars::before {
		top: 0;
		transform: rotate(45deg);
	}

	.is-menu-open .menu-toggle__bars::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.menu-js .site-header .site-menu {
		display: none;
		position: absolute;
		top: calc(100% + 4px); /* below the header's gold line */
		left: 0;
		right: 0;
		padding: 0.5rem var(--space) 1rem;
		border-bottom: 4px solid var(--color-frame);
		background: var(--color-surface);
		box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--color-dark) 18%, transparent);
	}

	.menu-js .site-header.is-menu-open .site-menu {
		display: block;
	}

	/* The page under the open menu doesn't scroll. */
	.has-menu-open {
		overflow: hidden;
	}

	.menu-js .site-header .site-nav__menu {
		flex-direction: column;
	}

	.menu-js .site-header .site-nav a {
		display: flex;
		font-size: 1.0625rem;
	}

	/* The panel is light, like the desktop dropdowns: long Japanese labels at
	   reading size, and it stays apart from the red hero / page header it
	   opens over. */
	.menu-js .site-header .site-nav a,
	.menu-js .site-header .site-nav__toggle {
		color: var(--color-dark); /* 14.3:1 */
	}

	.menu-js .site-header .site-nav a:hover,
	.menu-js .site-header .site-nav a[aria-current],
	.menu-js .site-header .site-nav__toggle:hover,
	.menu-js .site-header .site-nav__toggle[aria-expanded="true"],
	.menu-js .site-header .current-menu-ancestor > .site-nav__toggle,
	.menu-js .site-header .current-menu-parent > .site-nav__toggle {
		color: var(--color-primary); /* 7.8:1 */
	}

	.menu-js .site-header .site-menu :focus-visible {
		outline-color: var(--color-dark);
	}

	.menu-js .site-header .site-menu {
		max-height: calc(100svh - 4.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Groups: their pages listed under them, indented. */
	.menu-js .site-header .site-nav .sub-menu {
		margin: 0 0 0.5rem;
		padding: 0 0 0 1rem;
		border-left: 2px solid var(--color-border);
		list-style: none;
	}

	.menu-js .site-header .site-nav .sub-menu a {
		font-size: 1rem;
		font-weight: 400;
	}

	/* Groups fold: their pages show once the group's button is pressed. */
	.menu-js .site-header .site-nav__toggle {
		display: flex;
		font-size: 1.0625rem;
	}

	.menu-js .site-header .site-nav.has-disclosures li:not(.is-open) > .sub-menu {
		display: none;
	}

	.menu-js .site-header .site-nav .menu-item-cta {
		margin-top: 0.5rem;
	}

	.menu-js .site-header .site-nav .menu-item-cta > a {
		display: inline-flex;
		background: var(--color-primary);
		color: var(--color-on-dark);
	}

	.menu-js .site-header .site-nav .menu-item-cta > a:hover,
	.menu-js .site-header .site-nav .menu-item-cta > a[aria-current="page"] {
		background: var(--color-primary-dark); /* 13.0:1 */
		color: var(--color-on-dark);
	}

	/* Under the nav: 見学予約 / Book a visit as an outline button (the red one
	   is お問い合わせ above), LINE's own image, the phone number. */
	.menu-js .site-header .site-menu__extra {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1.25rem;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--color-border);
	}

	.site-menu .site-menu__visit {
		border: 2px solid var(--color-dark);
		background: transparent;
		color: var(--color-dark); /* 14.3:1 */
	}

	.site-menu .site-menu__visit:hover {
		border-color: var(--color-primary);
		background: transparent;
		color: var(--color-primary); /* 7.8:1 */
	}

	.site-menu__extra .line-add-friend {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.site-menu__tel {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		color: var(--color-dark);
		font-family: var(--font-latin);
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.site-menu__tel:hover {
		color: var(--color-primary);
	}
}

/* Desktop dropdowns (64em+, or any width without JS): a group's pages open
   under it on hover and while focus is inside (keyboard: Tab into the group).
   Works without JS. */
.site-nav__menu > li {
	position: relative;
}

.site-nav .menu-item-has-children > a::after,
.site-nav__toggle::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"]::after {
	transform: translateY(0.15em) rotate(-135deg);
}

.site-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 64em) {
	.site-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: -1rem;
		z-index: 20;
		display: none;
		min-width: 15rem;
		padding: 0.5rem 0;
		border-top: 3px solid var(--color-accent);
		border-radius: 0 0 0.5rem 0.5rem;
		background: var(--color-surface);
		box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--color-dark) 18%, transparent);
	}

	/* With ui.js: the group opens on its button; without: hover and focus. */
	.site-nav:not(.has-disclosures) li:hover > .sub-menu,
	.site-nav:not(.has-disclosures) li:focus-within > .sub-menu,
	.site-nav.has-disclosures .is-open > .sub-menu {
		display: block;
	}

	.site-nav .sub-menu a {
		display: flex;
		padding-inline: 1rem;
		color: var(--color-dark); /* on white 14.3:1 */
		font-weight: 400;
		white-space: nowrap;
	}

	.site-nav .sub-menu a:hover,
	.site-nav .sub-menu a[aria-current="page"] {
		color: var(--color-primary); /* 7.8:1 */
	}

	.site-nav .sub-menu :focus-visible {
		outline-color: var(--color-dark);
	}
}

/* Without JS (or ui.js) below 64em the nav stays in the header: groups list
   their pages inline (no hover menus on touch screens). */
@media (max-width: 63.99em) {
	html:not(.menu-js) .site-nav:not(.has-disclosures) .sub-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1rem;
		font-size: 0.875rem;
	}
}

/* Back-to-top cloud (inc/to-top.php, assets/js/to-top.js, 2026-10-27): bottom
   right, clear of the safe areas; 48 px on phones, 56 px from 48em. A cream
   cloud with a brown outline (14.3:1 on white; the cream itself 8.3:1 on the
   red footer, 7.9:1 on brown) and a brown arrow. Shown (.is-visible) after
   about one viewport; under the menu and the doors (z-index), and hidden
   while they are open. The script scales the cloud and pops the puffs; with
   reduced motion nothing moves. Without JS it never shows. */
.to-top {
	position: fixed;
	right: max(1rem, calc(env(safe-area-inset-right) + 0.75rem));
	bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.75rem));
	z-index: 900;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.to-top {
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.to-top.is-visible {
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
	}
}

@media (min-width: 48em) {
	.to-top {
		width: 3.5rem;
		height: 3.5rem;
	}
}

/* A ring that shows on any background: white, then brown. */
.to-top:focus-visible {
	outline: 3px solid var(--color-dark);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--color-surface);
}

.to-top__cloud {
	width: 100%;
	height: auto;
	overflow: visible;
	transform-origin: 50% 60%;
	filter: drop-shadow(0 0.25rem 0.375rem color-mix(in srgb, var(--color-dark) 25%, transparent));
}

.to-top__shape {
	fill: var(--color-surface-alt);
	stroke: var(--color-dark);
	stroke-width: 1.5;
}

.to-top__arrow {
	fill: none;
	stroke: var(--color-dark);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.to-top:hover .to-top__shape {
	fill: var(--color-surface);
}

/* The puffs: little clouds that pop at 33, 66 and 100 % of the page. */
.to-top__puff {
	position: absolute;
	width: 32%;
	aspect-ratio: 1;
	border: 1.5px solid var(--color-dark);
	border-radius: 50%;
	background: var(--color-surface-alt);
	opacity: 0;
	pointer-events: none;
}

.to-top__puff--1 {
	top: 0;
	left: -6%;
}

.to-top__puff--2 {
	top: -14%;
	left: 34%;
}

.to-top__puff--3 {
	top: 2%;
	right: -6%;
}

@media print {
	.to-top {
		display: none;
	}
}

/* Small playful shapes (victoryis_decor(), inc/shapes.php): 2–3 per section,
   at its edges, behind its text (the section isolates, the shape sits at
   z-index -1). Decoration only (aria-hidden). Placement and colour per
   section in front-page.css / pages.css. They draw with the scroll
   (motion.js): outlines trace their stroke (dash 1 of pathLength 1 = the
   whole stroke), dots pop in. Hidden states only under html.js without a
   reduced-motion preference; the <head> timer removes html.js if motion.js
   never ran, so no shape stays hidden. */
.deco {
	position: absolute;
	z-index: -1;
	height: auto;
	pointer-events: none;
}

.deco [pathLength] {
	stroke-dasharray: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.js .deco [pathLength] {
		stroke-dashoffset: 1;
	}

	.js .deco.shape--dots circle {
		opacity: 0;
	}
}

@media print {
	.js .deco [pathLength] {
		stroke-dashoffset: 0 !important;
	}

	.js .deco.shape--dots circle {
		opacity: 1 !important;
		transform: none !important;
	}
}

.deco.shape--ring {
	width: clamp(3.5rem, 8vw, 5.5rem);
}

.deco.shape--star {
	width: clamp(1.75rem, 4vw, 2.5rem);
}

.deco.shape--triangle,
.deco.shape--square,
.deco.shape--circle {
	width: clamp(1.75rem, 4vw, 2.5rem);
}

.deco.shape--squiggle {
	width: clamp(4.5rem, 10vw, 7rem);
}

.deco.shape--dots {
	width: clamp(2.5rem, 5vw, 3.5rem);
}

/* Cloud dividers (inc/shapes.php): where the background changes, clouds in
   the colour of the section below rise into the bottom padding of the section
   above. Three layers, each a seamless tile (circles over a base, drawn for
   this site) used as a mask over the colour token: back and middle are
   translucent, the front one solid. Each layer is one tile wider than the
   band on both sides, so front-page.js can drift it sideways by up to a tile
   without an edge showing. Static without JS and with reduced motion. Fixed
   height, cancelled by a negative margin: no space taken, no layout shift. */
.cloud-divider {
	--cloud-h: clamp(2.25rem, 5vw, 4rem); /* <= every section's bottom padding */
	position: relative;
	z-index: 2;
	height: var(--cloud-h);
	margin-top: calc(-1 * var(--cloud-h));
	overflow: hidden;
	pointer-events: none;
}

.cloud-divider--surface {
	color: var(--color-surface);
}

.cloud-divider--surface-alt {
	color: var(--color-surface-alt);
}

.cloud-divider--dark {
	color: var(--color-dark);
}

.cloud-divider--frame {
	color: var(--color-frame);
}

.cloud-divider--section {
	color: var(--color-section);
}

.cloud-divider__layer {
	position: absolute;
	top: 0;
	bottom: -1px; /* no hairline above the next band */
	left: calc(-1 * var(--tile));
	width: calc(100% + 2 * var(--tile));
	background-color: currentColor;
	-webkit-mask: var(--cloud) repeat-x left bottom / auto 100%;
	mask: var(--cloud) repeat-x left bottom / auto 100%;
}

.cloud-divider__layer--back {
	--tile: calc(var(--cloud-h) * 720 / 80);
	--cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='80'%3E%3Crect y='50' width='720' height='30'/%3E%3Ccircle cx='60' cy='54' r='36'/%3E%3Ccircle cx='150' cy='48' r='44'/%3E%3Ccircle cx='240' cy='56' r='34'/%3E%3Ccircle cx='330' cy='52' r='40'/%3E%3Ccircle cx='420' cy='56' r='32'/%3E%3Ccircle cx='510' cy='46' r='44'/%3E%3Ccircle cx='610' cy='50' r='38'/%3E%3Ccircle cx='690' cy='58' r='22'/%3E%3C/svg%3E");
	opacity: 0.35;
}

.cloud-divider__layer--mid {
	--tile: calc(var(--cloud-h) * 560 / 80);
	--cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='80'%3E%3Crect y='56' width='560' height='24'/%3E%3Ccircle cx='40' cy='52' r='30'/%3E%3Ccircle cx='110' cy='46' r='36'/%3E%3Ccircle cx='180' cy='54' r='28'/%3E%3Ccircle cx='250' cy='48' r='32'/%3E%3Ccircle cx='320' cy='50' r='36'/%3E%3Ccircle cx='395' cy='54' r='28'/%3E%3Ccircle cx='460' cy='48' r='34'/%3E%3Ccircle cx='525' cy='56' r='26'/%3E%3C/svg%3E");
	opacity: 0.6;
}

.cloud-divider__layer--front {
	--tile: calc(var(--cloud-h) * 400 / 80);
	--cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80'%3E%3Crect y='62' width='400' height='18'/%3E%3Ccircle cx='30' cy='64' r='20'/%3E%3Ccircle cx='78' cy='58' r='28'/%3E%3Ccircle cx='130' cy='64' r='20'/%3E%3Ccircle cx='180' cy='66' r='16'/%3E%3Ccircle cx='226' cy='60' r='26'/%3E%3Ccircle cx='280' cy='56' r='30'/%3E%3Ccircle cx='334' cy='62' r='22'/%3E%3Ccircle cx='378' cy='66' r='18'/%3E%3C/svg%3E");
}

/* LINE's official 友だち追加 button (hero and LINE band, both dark): LINE's
   own image, unmodified at 36 px; 4 px of padding make the tap target 44 px.
   Only spacing and the focus ring are ours. */
.line-add-friend {
	display: inline-block;
	padding-block: 4px;
	line-height: 0;
	border-radius: 6px;
}

.line-add-friend img {
	display: block;
	width: auto;
	height: 36px;
}

/* 404: the way back. */
.site-main--404 {
	max-width: var(--text-width);
	padding-block: clamp(3rem, 10vw, 6rem);
}

.site-main__back {
	margin-top: 2rem;
}

/* Logo: 116x128 WebP shown at 58x64 (2x). */
.site-logo {
	flex: none;
	width: auto;
	height: 2.75rem; /* phones: header 64 px (44 + 2 × 8 + 4 border) */
}

@media (min-width: 48em) {
	.site-logo {
		height: 4rem;
	}
}

/* Buttons: primary red with white text. The LINE button never sits beside a
   red button — it gets its own dark band (see front-page.css). */
.button {
	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-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.button:hover,
.button:active {
	background: var(--color-primary-dark);
	color: var(--color-on-dark);
}

/* Secondary button on dark bands: white outline (9.0:1 on the frame, 14.3:1
   on brown), so it never reads as a red button beside LINE's green one. */
.button--outline-light {
	border: 2px solid var(--color-on-dark);
	background: transparent;
	color: var(--color-on-dark);
}

.button--outline-light:hover,
.button--outline-light:active {
	background: color-mix(in srgb, var(--color-on-dark) 14%, transparent);
	color: var(--color-on-dark);
}

@media (prefers-reduced-motion: no-preference) {
	.button {
		transition: background-color 0.2s ease;
	}
}

/* Footer — dark, with an accent rule on top (it can follow a dark band). */
.site-footer {
	border-top: 4px solid var(--color-accent);
	background: var(--color-frame);
	color: var(--color-on-dark);
}

.site-footer__inner {
	display: grid;
	gap: 1.25rem var(--space);
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 2.5rem var(--space) 2rem;
}

/* No menu (2026-10-27). Phones: one column. From 48em: the school on the
   left, phone and social links on the right, the bottom row across. */
@media (min-width: 48em) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"school contact"
			"school social"
			"bottom bottom";
		align-items: start;
	}

	.site-footer__school {
		grid-area: school;
	}

	.site-footer__contact {
		grid-area: contact;
	}

	.site-footer .social-links {
		grid-area: social;
	}

	.site-footer__bottom {
		grid-area: bottom;
	}
}

.site-footer__name {
	font-family: var(--font-latin);
	font-size: 1.125rem;
	font-weight: 700;
}

.site-footer__address {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.75rem;
}

.site-footer__address a {
	display: inline-block;
	padding-block: 0.5rem;
}

.site-footer a {
	color: var(--color-on-dark);
}

.site-footer a:hover {
	color: var(--color-accent);
}

.site-footer :focus-visible {
	outline-color: var(--color-accent);
}

.site-footer p {
	margin: 0;
}

.site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
}

.site-footer__tel {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.375rem 1rem;
	border: 1px solid var(--color-accent);
	border-radius: 999px;
	text-decoration: none;
}

/* Bottom row: © and the privacy policy (a small link, 44 px tall target). */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgb(255 255 255 / 0.2);
}

.site-footer__copyright {
	color: var(--color-accent); /* on dark 9.1:1 */
	font-size: 0.875rem;
}

.site-footer__privacy {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.875rem;
}

/* 大切にしている4つのこと / What We Value Most (Home and About, 2026-10-24):
   four numbered cards, 2×2 on phones, 4 across from 64em. Cream cards (white
   on a cream band) with dark text 13:1; the number in a gold disc, dark on
   gold 8.6:1. */
.values {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: value;
}

.values__item {
	counter-increment: value;
	margin: 0;
	padding: 1rem;
	border-radius: var(--radius);
	background: var(--color-surface-alt);
	color: var(--color-text);
}

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

.values__item::before {
	content: counter(value);
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 0.625rem;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-dark);
	font-family: var(--font-latin);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.values__title {
	margin: 0 0 0.375rem;
	color: var(--color-dark);
	font-size: 1rem;
	line-height: 1.45;
}

.values__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.7;
}

@media (min-width: 64em) {
	.values {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}

	.values__item {
		padding: 1.25rem;
	}

	.values__title {
		font-size: 1.0625rem;
	}

	.values__text {
		font-size: 0.9375rem;
	}
}