/* ===============================================
  variable
================================================== */
:root {
	/* color
--------------------*/
	--color-black: #000;
	--color-blackPrimary: #1E1E1E;
	--color-white: #fff;
	--color-red: #E70012;
	--color-redSecondary: #F96873;
	--color-redTertiary: #F7BBA7;
	--color-bgRed: #FFE1E1;
	--color-bgYellow: #FFFFE6;
	--color-green: #005C3F;
	--color-greenDark: #005E40;
	--color-greenPrimary: #1C412C;
	--color-greenSecondary: #2D8B56;
	--color-bgGreen: #EBF4E7;
	--color-yellow: #FFFC55;
	--color-grade1: #20AC42;
	--color-grade2: #EA5504;
	--color-gray: #EFEFEF;
	--gradient-green: linear-gradient(#003C29, #005C3F);
	--gradient-red: linear-gradient(#FF383C, #FF8E52);

	/* Font Family
--------------------*/
	--font-ja: "Noto Sans JP", sans-serif;
	--font-en: "Roboto", sans-serif;
	--font-condensed: "Roboto Condensed", sans-serif;

	/* Header
--------------------*/
	--header-height: 72px;

	/* ページ内リンクの着地位置は html の scroll-padding-top（ヘッダーの高さ）だけで調整する。
	   reset.css の section の scroll-margin と二重にかかってズレるため、ここで 0 にする */
	--base-scroll-margin: 0px;
}

@media (width >=768px) {
	:root {
		--header-height: 80px;
	}
}

/* ===============================================
  base
================================================== */
html {
	scroll-padding-top: var(--header-height);
}

body {
	font-family: var(--font-ja);
	font-weight: 700;
	color: var(--color-black);
	background-color: var(--color-white);
}

img {
	max-inline-size: 100%;
	block-size: auto;
}

.is-pc {
	display: none !important;
}

@media (width >=768px) {
	.is-pc {
		display: revert !important;
	}

	.is-sp {
		display: none !important;
	}
}

/* ===============================================
  u-outline
  文字の外側に角の丸い縁取りを付ける（text-stroke だと角が尖るため text-shadow で描く）
  --outline-width：縁取りの太さ
================================================== */
.u-outline {
	--outline-width: 4px;
	--outline-color: var(--color-black);
	text-shadow:
		calc(var(--outline-width) * 1.0) calc(var(--outline-width) * 0.0) 0 var(--outline-color),
		calc(var(--outline-width) * 0.985) calc(var(--outline-width) * 0.174) 0 var(--outline-color),
		calc(var(--outline-width) * 0.94) calc(var(--outline-width) * 0.342) 0 var(--outline-color),
		calc(var(--outline-width) * 0.866) calc(var(--outline-width) * 0.5) 0 var(--outline-color),
		calc(var(--outline-width) * 0.766) calc(var(--outline-width) * 0.643) 0 var(--outline-color),
		calc(var(--outline-width) * 0.643) calc(var(--outline-width) * 0.766) 0 var(--outline-color),
		calc(var(--outline-width) * 0.5) calc(var(--outline-width) * 0.866) 0 var(--outline-color),
		calc(var(--outline-width) * 0.342) calc(var(--outline-width) * 0.94) 0 var(--outline-color),
		calc(var(--outline-width) * 0.174) calc(var(--outline-width) * 0.985) 0 var(--outline-color),
		calc(var(--outline-width) * 0.0) calc(var(--outline-width) * 1.0) 0 var(--outline-color),
		calc(var(--outline-width) * -0.174) calc(var(--outline-width) * 0.985) 0 var(--outline-color),
		calc(var(--outline-width) * -0.342) calc(var(--outline-width) * 0.94) 0 var(--outline-color),
		calc(var(--outline-width) * -0.5) calc(var(--outline-width) * 0.866) 0 var(--outline-color),
		calc(var(--outline-width) * -0.643) calc(var(--outline-width) * 0.766) 0 var(--outline-color),
		calc(var(--outline-width) * -0.766) calc(var(--outline-width) * 0.643) 0 var(--outline-color),
		calc(var(--outline-width) * -0.866) calc(var(--outline-width) * 0.5) 0 var(--outline-color),
		calc(var(--outline-width) * -0.94) calc(var(--outline-width) * 0.342) 0 var(--outline-color),
		calc(var(--outline-width) * -0.985) calc(var(--outline-width) * 0.174) 0 var(--outline-color),
		calc(var(--outline-width) * -1.0) calc(var(--outline-width) * 0.0) 0 var(--outline-color),
		calc(var(--outline-width) * -0.985) calc(var(--outline-width) * -0.174) 0 var(--outline-color),
		calc(var(--outline-width) * -0.94) calc(var(--outline-width) * -0.342) 0 var(--outline-color),
		calc(var(--outline-width) * -0.866) calc(var(--outline-width) * -0.5) 0 var(--outline-color),
		calc(var(--outline-width) * -0.766) calc(var(--outline-width) * -0.643) 0 var(--outline-color),
		calc(var(--outline-width) * -0.643) calc(var(--outline-width) * -0.766) 0 var(--outline-color),
		calc(var(--outline-width) * -0.5) calc(var(--outline-width) * -0.866) 0 var(--outline-color),
		calc(var(--outline-width) * -0.342) calc(var(--outline-width) * -0.94) 0 var(--outline-color),
		calc(var(--outline-width) * -0.174) calc(var(--outline-width) * -0.985) 0 var(--outline-color),
		calc(var(--outline-width) * -0.0) calc(var(--outline-width) * -1.0) 0 var(--outline-color),
		calc(var(--outline-width) * 0.174) calc(var(--outline-width) * -0.985) 0 var(--outline-color),
		calc(var(--outline-width) * 0.342) calc(var(--outline-width) * -0.94) 0 var(--outline-color),
		calc(var(--outline-width) * 0.5) calc(var(--outline-width) * -0.866) 0 var(--outline-color),
		calc(var(--outline-width) * 0.643) calc(var(--outline-width) * -0.766) 0 var(--outline-color),
		calc(var(--outline-width) * 0.766) calc(var(--outline-width) * -0.643) 0 var(--outline-color),
		calc(var(--outline-width) * 0.866) calc(var(--outline-width) * -0.5) 0 var(--outline-color),
		calc(var(--outline-width) * 0.94) calc(var(--outline-width) * -0.342) 0 var(--outline-color),
		calc(var(--outline-width) * 0.985) calc(var(--outline-width) * -0.174) 0 var(--outline-color),
		calc(var(--outline-width) * 0.5) calc(var(--outline-width) * 0.0) 0 var(--outline-color),
		calc(var(--outline-width) * 0.47) calc(var(--outline-width) * 0.171) 0 var(--outline-color),
		calc(var(--outline-width) * 0.383) calc(var(--outline-width) * 0.321) 0 var(--outline-color),
		calc(var(--outline-width) * 0.25) calc(var(--outline-width) * 0.433) 0 var(--outline-color),
		calc(var(--outline-width) * 0.087) calc(var(--outline-width) * 0.492) 0 var(--outline-color),
		calc(var(--outline-width) * -0.087) calc(var(--outline-width) * 0.492) 0 var(--outline-color),
		calc(var(--outline-width) * -0.25) calc(var(--outline-width) * 0.433) 0 var(--outline-color),
		calc(var(--outline-width) * -0.383) calc(var(--outline-width) * 0.321) 0 var(--outline-color),
		calc(var(--outline-width) * -0.47) calc(var(--outline-width) * 0.171) 0 var(--outline-color),
		calc(var(--outline-width) * -0.5) calc(var(--outline-width) * 0.0) 0 var(--outline-color),
		calc(var(--outline-width) * -0.47) calc(var(--outline-width) * -0.171) 0 var(--outline-color),
		calc(var(--outline-width) * -0.383) calc(var(--outline-width) * -0.321) 0 var(--outline-color),
		calc(var(--outline-width) * -0.25) calc(var(--outline-width) * -0.433) 0 var(--outline-color),
		calc(var(--outline-width) * -0.087) calc(var(--outline-width) * -0.492) 0 var(--outline-color),
		calc(var(--outline-width) * 0.087) calc(var(--outline-width) * -0.492) 0 var(--outline-color),
		calc(var(--outline-width) * 0.25) calc(var(--outline-width) * -0.433) 0 var(--outline-color),
		calc(var(--outline-width) * 0.383) calc(var(--outline-width) * -0.321) 0 var(--outline-color),
		calc(var(--outline-width) * 0.47) calc(var(--outline-width) * -0.171) 0 var(--outline-color);
}

/* ===============================================
  l-header
================================================== */
/* 初期は非表示。黄色の「お悩み解決」CTA を過ぎたら JS で is-visible を付けて上から表示 */
.l-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	visibility: hidden;
	translate: 0 -100%;
	transition: translate .3s ease, visibility .3s;
}

.l-header.is-visible {
	visibility: visible;
	translate: 0 0;
}

.l-header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	block-size: var(--header-height);
	padding-inline: 10px;
	background-color: var(--color-white);
	box-shadow: 0 4px 20px rgb(0 0 0 / .1);
}

.l-header__logo {
	display: grid;
	place-items: center;
}

/* 学力診断テスト LP（/shindan-test/）のロゴと同じ見た目の大きさ。
   あちらは画像の左右に余白があるため、ロゴ部分の幅（524px 中 484px）に換算する */
.l-header__logo img {
	inline-size: calc(clamp(194px, 9.758rem + 9.71vw, 261px) * 484 / 524);
}

.l-header__menu-button {
	display: block;
	inline-size: 48px;
	block-size: 48px;
	cursor: pointer;
	background: none;
	border: 0;
}

.l-header__menu-icon {
	display: block;
	inline-size: 48px;
}

.l-header__menu-icon.--close,
.l-header.is-open .l-header__menu-icon.--open {
	display: none;
}

.l-header.is-open .l-header__menu-icon.--close {
	display: block;
}

@media (width >=768px) {
	.l-header__inner {
		padding-inline: 40px;
	}
}

/* ===============================================
  l-drawer（SP）
================================================== */
.l-drawer {
	position: fixed;
	inset: var(--header-height) 0 0;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: none;
	block-size: calc(100dvh - var(--header-height));
	max-block-size: none;
	padding: 0;
	margin: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: rgb(52 52 52 / .6);
	border: 0;
}

/* 開閉アニメーション：暗幕はフェード、パネルはヘッダーの裏から上→下に降りる
   （閉じる時も見えるよう display を allow-discrete で遷移させる） */
.l-drawer {
	opacity: 0;
	transition: opacity .3s ease, display .4s allow-discrete;
}

.l-drawer[open] {
	display: block;
	opacity: 1;
}

@starting-style {
	.l-drawer[open] {
		opacity: 0;
	}
}

.l-drawer__contents {
	outline: none;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	inline-size: calc(100% - 30px); /* 左右 15px の余白を残して画面幅に合わせる */
	padding: 32px 24px;
	margin-inline: auto;
	background-color: var(--color-white);
	border-radius: 0 0 16px 16px;
}

/* パネル */
.l-drawer__contents {
	translate: 0 -100%;
	transition: translate .4s ease;
}

.l-drawer[open] .l-drawer__contents {
	translate: 0 0;
}

@starting-style {
	.l-drawer[open] .l-drawer__contents {
		translate: 0 -100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.l-drawer,
	.l-drawer__contents {
		transition: none;
	}
}

.l-drawer__nav {
	inline-size: 100%;
}

.l-drawer__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0;
	list-style: none;
}

.l-drawer__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	block-size: 37px;
	padding-block-end: 8px;
	font-size: 20px;
	line-height: normal;
	color: var(--color-black);
	text-decoration: none;
	border-block-end: 1px solid var(--color-bgRed);
}

.l-drawer__item:first-child a {
	block-size: auto;
}

.l-drawer__cta {
	position: relative;
	display: flex;
	gap: 4px;
	align-items: center;
	inline-size: 100%;
	block-size: 80px;
	padding: 13px 16px;
	font-size: 20px;
	line-height: 1.4;
	color: var(--color-white);
	text-decoration: none;
	background-color: var(--color-red);
	border: 4px solid var(--color-white);
	border-radius: 12px;
	filter: drop-shadow(0 3px 5px rgb(78 78 78 / .4));
}

.l-drawer__cta-badge {
	padding: 4px 8px;
	color: var(--color-red);
	background-color: var(--color-yellow);
	border-radius: 4px;
}

.l-drawer__cta-arrow {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 20px;
	inline-size: 16.67px;
	translate: 0 -50%;
}

.l-drawer__tel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
	color: var(--color-greenPrimary);
}

.l-drawer__tel-number {
	display: flex;
	white-space: nowrap;
	gap: 9.68px;
	align-items: center;
	align-self: center;
	font-family: var(--font-en);
	font-size: 38px;
	line-height: 1;
	color: inherit;
	text-decoration: none;
}

.l-drawer__tel-number img {
	inline-size: 66.56px;
}

.l-drawer__tel-time {
	align-self: center;
	white-space: nowrap;
	font-size: 18px;
	line-height: 1.4;
}

.l-drawer__tel-note {
	margin-block-start: -8px;
	font-size: 14px;
	line-height: 1.4;
}

/* ===============================================
  l-footer
  SP はカンプ(390px)の余白どおりに縦積み、PC は 1440px で左右 80px
================================================== */
.l-footer {
	background-color: var(--color-white);
}

.l-footer__inner {
	padding: 42px 15px 41px;
}

/* ロゴはカンプの枠(360×88)の中央に 332×66 */
.l-footer__logo {
	display: block;
	inline-size: fit-content;
	padding: 12px 14px 10px;
}

.l-footer__logo img {
	inline-size: 332px;
}

.l-footer__nav {
	padding: 13px 0 13px 24px;
	margin-block-start: 24px;
}

.l-footer__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-size: 16px;
	line-height: normal;
}

.l-footer__list a {
	display: flex;
	gap: 4px;
	align-items: center;
	color: var(--color-black);
	text-decoration: none;
}

.l-footer__list a::before {
	inline-size: 16px;
	block-size: 1px;
	content: "";
	background-color: var(--color-greenSecondary);
}

.l-footer__tel {
	margin: 42px auto 0; /* 行の高さの差を実測で補正（カンプは 40） */
}

.l-footer__bottom {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	block-size: 87px; /* カンプは 84。Arial の行の高さの差を実測で補正 */
	margin-block-start: 30px;
	line-height: normal;
	white-space: nowrap;
}

.l-footer__privacy {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-blackPrimary);
	text-decoration: none;
}

.l-footer__copyright {
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--color-greenPrimary);
}

.l-footer__copyright small {
	font-size: inherit;
}

@media (any-hover: hover) {
	.l-footer a {
		transition: opacity .3s;
	}

	.l-footer a:hover {
		opacity: .7;
	}
}

@media (width >=768px) {
	.l-footer__inner {
		max-inline-size: 1440px;
		padding: 48px max(15px, min(80px, 100vw * 80 / 1440)) 63px;
		margin-inline: auto;
	}

	/* 狭い PC 幅ではメニューがロゴの下に回り込む */
	.l-footer__top {
		display: flex;
		flex-wrap: wrap;
		gap: 0 40px;
		align-items: center;
		justify-content: space-between;
	}

	.l-footer__nav {
		padding: 0;
		margin-block-start: 0;
	}

	.l-footer__list {
		flex-flow: row wrap;
		gap: 8px min(40px, 100vw * 40 / 1440); /* 1440px で 40px。狭い幅でも 1 行に収まるよう詰める */
	}

	.l-footer__list a::before {
		content: none;
	}

	.l-footer__tel {
		margin: 24px 0 0 auto;
	}

	.l-footer__bottom {
		flex-direction: row-reverse;
		align-items: flex-end;
		block-size: auto;
		margin-block-start: 30px; /* 行の高さの差を実測で補正（カンプは 32） */
	}

	.l-footer__copyright {
		font-size: 12px;
	}
}

/* ===============================================
  c-tel（フリーダイヤル：ヘッダー・フッター共通）
  位置は使う側で指定する
================================================== */
.c-tel {
	display: flex;
	gap: 5px;
	align-items: center;
	inline-size: fit-content;
	font-family: Arial, sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-greenPrimary);
	text-decoration: none;
	white-space: nowrap;
}

/* ===============================================
  c-cv-bar（SPフローティング：画面の一番下に固定）
  SP の見た目（767px 以下）で表示。PC の見た目では c-cv-side に切り替える。ドロワーを開いている間は隠す
================================================== */
.c-cv-bar {
	display: none;
}

@media (width < 768px) {
	/* バーの高さ分、ページの最後（フッター）が隠れないように空ける */
	body {
		padding-block-end: 80px;
	}

	.c-cv-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 90;
		display: flex;
		justify-content: center;
		padding: 8px 15px;
		background-color: var(--color-white);
	}

	body:has(.js-drawer[open]) .c-cv-bar {
		display: none;
	}
}

.c-cv-bar__button {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 100%;
	max-inline-size: 360px;
	block-size: 64px;
	font-size: 20px;
	line-height: 1.4;
	color: var(--color-white);
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--color-red);
	border: 4px solid var(--color-white);
	border-radius: 12px;
	filter: drop-shadow(0 3px 5px rgb(78 78 78 / .4));
	transition: color .3s, background-color .3s, border-color .3s;
}

/* 位置は Figma の値（枠線 4px を含む外側からの距離）から枠線ぶんを引いた値 */
.c-cv-bar__badge {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 12px;
	padding: 4px 8px;
	color: var(--color-red);
	background-color: var(--color-yellow);
	border-radius: 4px;
	translate: 0 -50%;
}

.c-cv-bar__arrow {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 23px;
	inline-size: 18px;
	block-size: auto;
	overflow: visible;
	translate: 0 -50%;
}

@media (any-hover: hover) {
	.c-cv-bar__button:hover {
		color: var(--color-red);
		background-color: var(--color-white);
		border-color: var(--color-red);
	}
}

/* ===============================================
  c-cv-side（PCフローティング）
  PC の見た目（768px 以上）で表示。SP の見た目では c-cv-bar に切り替える
================================================== */
.c-cv-side {
	display: none !important;
}

@media (width >=768px) {
	.c-cv-side {
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 90;
		display: flex !important;
		gap: 8px;
		align-items: center;
		padding: 23.5px 10px 23.5px 11px; /* writing-mode が縦のため物理指定。枠線込みで 56×320 */
		font-size: 20px;
		font-weight: 900;
		line-height: 1.1;
		color: var(--color-black);
		text-decoration: none;
		letter-spacing: .1em; /* Figma の縦書きは 1 文字 22px（20px × 行高 1.1）で並ぶ */
		white-space: nowrap; /* 画面の高さが足りなくても折り返さず、はみ出た分は画面外へ */
		writing-mode: vertical-rl;
		background-color: var(--color-yellow);
		border: 3px solid var(--color-white);
		border-right: 0;
		border-radius: 16px 0 0 16px;
		filter: drop-shadow(-8px 0 4px rgb(97 97 97 / .2)); /* Figma は横向きの部品を回転して配置しているため、y 8px の影が左向きになる */
		translate: 0 -50%;
		transition: background-color .3s, color .3s;
	}

	.c-cv-side__badge {
		display: grid;
		place-items: center;
		width: 32px;
		height: 61px;
		color: var(--color-white);
		background-color: var(--color-red);
		border-radius: 4px;
		transition: background-color .3s, color .3s;
	}
}

@media (any-hover: hover) {
	.c-cv-side:hover {
		color: var(--color-white);
		background-color: var(--color-red);
	}

	.c-cv-side:hover .c-cv-side__badge {
		color: var(--color-red);
		background-color: var(--color-yellow);
	}
}

/* ===============================================
  p-fv
  デザインカンプ(PC 1440px / SP 390px)の座標をそのまま使い、
  --u（1px 相当）を画面幅に合わせて縮小する。PC は 1440px で最大。
================================================== */
.p-fv {
	position: relative;
	z-index: 2;
	container-type: inline-size;
	background-color: var(--color-red);
}

/* 100vw だとスクロールバー分ずれるため、コンテナ幅(cqi)を基準にする */
.p-fv > * {
	--u: calc(100cqi / 390);
}

@media (width >=768px) {
	.p-fv > * {
		--u: min(100cqi / 1440, 1px);
	}
}

.p-fv__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.p-fv__stage,
.p-fv__inner {
	position: relative;
	inline-size: calc(390 * var(--u));
	block-size: calc(715 * var(--u));
	margin-inline: auto;
}

.p-fv__stage {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	translate: -50% 0;
}

.p-fv__stage img,
.p-fv__lead > *,
.p-fv__title > *,
.p-fv__badge,
.p-fv__schedule {
	position: absolute;
	max-inline-size: none;
}

.p-fv__grange {
	inset-block-start: calc(-23 * var(--u));
	inset-inline-start: calc(-173 * var(--u));
	inline-size: calc(830 * var(--u));
	block-size: calc(771 * var(--u));
}

.p-fv__texture {
	inset-block-start: calc(164 * var(--u));
	inset-inline-start: 0;
	inline-size: calc(390 * var(--u));
	block-size: calc(395 * var(--u));
	mix-blend-mode: multiply;
	opacity: .4;
}

.p-fv__brush {
	inset-block-start: calc(5 * var(--u));
	inset-inline-start: calc(-154 * var(--u));
	inline-size: calc(759 * var(--u));
	block-size: calc(178 * var(--u));
}

.p-fv__teacher.--itou {
	inset-block-start: calc(139 * var(--u));
	inset-inline-start: calc(100 * var(--u));
	inline-size: calc(326 * var(--u));
	block-size: calc(501 * var(--u));
}

.p-fv__teacher.--takaba {
	inset-block-start: calc(139 * var(--u));
	inset-inline-start: calc(-24 * var(--u));
	inline-size: calc(277 * var(--u));
	block-size: calc(498 * var(--u));
}

/* リード・タイトル（h1 は「テスト対策 公開無料授業」だけにするため、上 2 行は h1 の外） */
.p-fv__title {
	font-weight: 800;
}

.p-fv__lead-meibutsu {
	inset-block-start: calc(37 * var(--u));
	inset-inline-start: calc(17 * var(--u));
	inline-size: calc(348.6 * var(--u));
}

.p-fv__lead-kappa {
	inset-block-start: calc(73.2 * var(--u));
	inset-inline-start: calc(19.7 * var(--u));
	inline-size: calc(358.9 * var(--u));
}

.p-fv__title-test {
	inset-block-start: calc(379.2 * var(--u));
	inset-inline-start: calc(73.1 * var(--u));
	inline-size: calc(244 * var(--u));
}

.p-fv__title-main {
	inset-block-start: calc(448.75 * var(--u));
	inset-inline: calc(22.2 * var(--u));
	font-size: calc(57.6 * var(--u));
	line-height: 1;
	color: var(--color-white);
	text-align: center;
	white-space: nowrap;
	--outline-width: calc(5.8 * var(--u));
}

.p-fv__title-main .--yellow {
	color: var(--color-yellow);
}

/* 講師バッジ */
.p-fv__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: calc(66 * var(--u));
	aspect-ratio: 1;
	padding-block-start: calc(10.9 * var(--u));
	line-height: 1;
	background:
		linear-gradient(var(--color-greenDark) calc(26.8 * var(--u)), transparent 0),
		var(--color-white);
	border: calc(.9 * var(--u)) solid var(--color-greenDark);
	border-radius: 50%;
}

.p-fv__badge.--takaba {
	inset-block-start: calc(314 * var(--u));
	inset-inline-start: calc(12 * var(--u));
}

.p-fv__badge.--itou {
	inset-block-start: calc(314 * var(--u));
	inset-inline-start: calc(312 * var(--u));
}

.p-fv__badge-career {
	display: flex;
	align-items: baseline;
	font-size: calc(8 * var(--u));
	color: var(--color-white);
}

.p-fv__badge-num {
	font-family: var(--font-en);
	font-size: calc(14.4 * var(--u));
}

.p-fv__badge-career > :last-child,
.p-fv__badge-career {
	letter-spacing: 0;
}

.p-fv__badge-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block-start: calc(2 * var(--u)); /* 行の高さを詰めているぶん、文字がカンプより上に寄るため下げる */
	font-size: calc(16 * var(--u));
	line-height: 1.235;
	color: var(--color-greenDark);
}

.p-fv__badge-name span {
	margin-block-start: calc(-2 * var(--u));
	font-size: calc(8 * var(--u));
	line-height: normal;
}

/* 日程 */
.p-fv__schedule {
	inset-block-start: calc(523 * var(--u));
	inset-inline-start: 0;
	inline-size: calc(390 * var(--u));
}

.p-fv__date {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-block-start: calc(9 * var(--u));
	font-weight: 800;
	line-height: 1;
	color: var(--color-white);
	--outline-width: calc(3.6 * var(--u));
}

.p-fv__date::before {
	position: absolute;
	inset-block-start: calc(33 * var(--u));
	inset-inline-start: 50%;
	z-index: -1;
	inline-size: calc(340 * var(--u));
	block-size: calc(24 * var(--u));
	content: "";
	background-color: var(--color-yellow);
	translate: -50% 0;
}

.p-fv__date-num {
	font-family: var(--font-en);
	font-size: calc(56 * var(--u));
	letter-spacing: -.08em;
	margin-inline-end: .08em; /* Figma は末尾の字間を含めないため相殺 */
}

.p-fv__date-unit {
	inline-size: calc(32 * var(--u));
	font-family: var(--font-ja);
	font-weight: 900;
	font-size: calc(32 * var(--u));
	text-align: center;
	/* 漢字は英数字のベースラインより約 .09em 下にはみ出して見えるため、字面の下端を数字にそろえる（月 .095em・日 .083em を実測） */
	translate: 0 -.09em;
	margin-inline-start: .08em; /* 数字との間を少し空ける */
}

/* 「1」は右側の余白が広く、「11月」だけ数字と漢字の間が「14日」より空いて見えるため、その差（実測で約 .14em）だけ詰める */
.p-fv__date-unit.--month {
	margin-inline-start: -.06em;
}

.p-fv__date-week {
	display: grid;
	place-items: center;
	inline-size: calc(43.2 * var(--u));
	block-size: calc(43.2 * var(--u));
	padding: 0 calc(1.6 * var(--u)) calc(2 * var(--u)); /* 下の余白を多めにして、丸の中の「土」を少し上に寄せる */
	margin-inline: calc(3.2 * var(--u)) calc(4 * var(--u));
	font-family: var(--font-ja);
	font-size: calc(25.6 * var(--u));
	font-weight: 900;
	color: var(--color-black);
	text-shadow: none;
	background-color: var(--color-white);
	border: calc(4 * var(--u)) solid var(--color-black);
	border-radius: calc(32 * var(--u));
	/* ベースラインのままだと丸が下に出すぎるため少し上げる（数字の上下中央よりやや下が見た目のバランスが良い） */
	translate: 0 calc(-6 * var(--u)); /* 中の文字を上に寄せたぶん（ベースラインに合わせて丸が下がる）も戻す */
}

.p-fv__date-time {
	font-family: var(--font-en);
	font-size: calc(40 * var(--u));
	letter-spacing: -.03em;
	margin-inline-end: .03em;
}

.p-fv__schools {
	display: flex;
	flex-direction: column;
	gap: calc(7 * var(--u));
	align-items: center;
	inline-size: calc(362 * var(--u));
	padding: calc(32 * var(--u)) 0 calc(16 * var(--u));
	margin: calc(-17 * var(--u)) auto 0;
	background-color: var(--color-green);
	border-radius: calc(4 * var(--u));
}

.p-fv__school-list {
	display: flex;
	gap: calc(12 * var(--u));
	justify-content: center;
	padding: 0;
	list-style: none;
}

.p-fv__school {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--u));
	align-items: center;
	justify-content: center;
	inline-size: calc(180 * var(--u));
	padding: calc(8 * var(--u)) calc(9.6 * var(--u));
	background-color: var(--color-blackPrimary);
}

.p-fv__school + .p-fv__school {
	inline-size: calc(140 * var(--u));
}

.p-fv__school-name {
	font-size: calc(32 * var(--u));
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-white);
	white-space: nowrap;
}

.p-fv__school-target {
	padding: calc(1.6 * var(--u)) calc(3.2 * var(--u)) calc(2.4 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	background-color: var(--color-white);
}

.p-fv__schools-note {
	font-size: calc(24 * var(--u));
	line-height: 1.6;
	color: var(--color-white);
	white-space: nowrap;
}

.p-fv__schools-note span {
	color: var(--color-yellow);
}

@media (width >=768px) {
	.p-fv__stage,
	.p-fv__inner {
		inline-size: calc(1440 * var(--u));
		block-size: calc(1200 * var(--u));
	}

	.p-fv__grange {
		inset-block-start: 0;
		inset-inline-start: 0;
		inline-size: calc(1440 * var(--u));
		block-size: calc(1338 * var(--u));
	}

	.p-fv__texture {
		inset-block-start: calc(428 * var(--u));
		inline-size: calc(1440 * var(--u));
		block-size: calc(677 * var(--u));
	}

	.p-fv__brush {
		inset-block-start: calc(17 * var(--u));
		inset-inline-start: calc(-369 * var(--u));
		inline-size: calc(2309 * var(--u));
		block-size: calc(542 * var(--u));
	}

	.p-fv__teacher.--itou {
		inset-block-start: calc(245 * var(--u));
		inset-inline-start: calc(903 * var(--u));
		inline-size: calc(646 * var(--u));
		block-size: calc(994 * var(--u));
	}

	.p-fv__teacher.--takaba {
		inset-block-start: calc(254 * var(--u));
		inset-inline-start: calc(-81 * var(--u));
		inline-size: calc(551 * var(--u));
		block-size: calc(1000 * var(--u));
	}

	.p-fv__lead-meibutsu {
		inset-block-start: calc(115 * var(--u));
		inset-inline-start: calc(161 * var(--u));
		inline-size: calc(1118 * var(--u));
	}

	.p-fv__lead-kappa {
		inset-block-start: calc(247.32 * var(--u));
		inset-inline-start: calc(306.13 * var(--u));
		inline-size: calc(829 * var(--u));
	}

	.p-fv__title-test {
		inset-block-start: calc(458 * var(--u));
		inset-inline-start: calc(415.44 * var(--u));
		inline-size: calc(610 * var(--u));
	}

	.p-fv__title-main {
		inset-block-start: calc(623.87 * var(--u));
		inset-inline: calc(240 * var(--u));
		font-size: calc(160 * var(--u));
		--outline-width: calc(16 * var(--u));
	}

	.p-fv__badge {
		inline-size: calc(145 * var(--u));
		padding-block-start: calc(23.5 * var(--u));
		background:
			linear-gradient(var(--color-greenDark) calc(58.9 * var(--u)), transparent 0),
			var(--color-white);
		border-width: calc(1.88 * var(--u));
	}

	.p-fv__badge.--takaba {
		inset-block-start: calc(695.6 * var(--u));
		inset-inline-start: calc(74 * var(--u));
	}

	.p-fv__badge.--itou {
		inset-block-start: calc(695.6 * var(--u));
		inset-inline-start: calc(1215 * var(--u));
	}

	.p-fv__badge-career {
		font-size: calc(20 * var(--u));
	}

	.p-fv__badge-num {
		font-size: calc(32 * var(--u));
	}

	.p-fv__badge-name {
		margin-block-start: 0;
		font-size: calc(36 * var(--u));
		line-height: 1.225;
	}

	.p-fv__badge-name span {
		margin-block-start: 0;
		font-size: calc(20 * var(--u));
	}

	.p-fv__schedule {
		inset-block-start: calc(848 * var(--u));
		inline-size: calc(1440 * var(--u));
	}

	.p-fv__date {
		margin-block-start: calc(18 * var(--u));
		margin-inline-start: calc(1 * var(--u));
		--outline-width: calc(9 * var(--u));
	}

	.p-fv__date::before {
		inset-block-start: calc(76 * var(--u));
		inline-size: calc(849 * var(--u));
		block-size: calc(57 * var(--u));
		translate: calc(-50% - 7 * var(--u)) 0;
	}

	.p-fv__date-num {
		font-size: calc(140 * var(--u));
	}

	.p-fv__date-unit {
		inline-size: calc(80 * var(--u));
		block-size: calc(93 * var(--u));
		font-size: calc(80 * var(--u));
	}

	.p-fv__date-week {
		inline-size: calc(108 * var(--u));
		block-size: calc(108 * var(--u));
		padding: 0 calc(4 * var(--u)) calc(5 * var(--u));
		margin-inline: calc(8 * var(--u));
		font-size: calc(64 * var(--u));
		border-width: calc(10 * var(--u));
		border-radius: calc(80 * var(--u));
		translate: 0 calc(-11.5 * var(--u));
	}

	.p-fv__date-time {
		font-size: calc(100 * var(--u));
	}

	.p-fv__schools {
		inline-size: calc(1080 * var(--u));
		padding: calc(56 * var(--u)) 0 calc(40 * var(--u));
		margin: calc(-38 * var(--u)) 0 0 calc(174 * var(--u));
		border-radius: calc(10 * var(--u));
		gap: 0;
	}

	.p-fv__school-list {
		gap: calc(23 * var(--u));
		padding: calc(24 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
	}

	.p-fv__school,
	.p-fv__school + .p-fv__school {
		flex-direction: row;
		gap: calc(24 * var(--u));
		inline-size: auto;
		block-size: calc(95 * var(--u));
		padding: calc(10 * var(--u)) calc(24 * var(--u));
		background-color: var(--color-black);
	}

	.p-fv__school-name {
		font-size: calc(48 * var(--u));
	}

	.p-fv__school-target {
		padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u));
		font-size: calc(28 * var(--u));
	}

	.p-fv__schools-note {
		font-size: calc(40 * var(--u));
		line-height: 1.2;
	}
}

/* ===============================================
  c-cv-button（申し込みボタン）
  サイズは親の --u（1px 相当）に追従。未指定なら等倍
================================================== */
.c-cv-button {
	--_u: var(--u, 1px);
	position: relative;
	display: grid;
	place-items: center;
	inline-size: calc(360 * var(--_u));
	block-size: calc(80 * var(--_u));
	font-size: calc(28 * var(--_u));
	line-height: 1.4;
	color: var(--color-white);
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--color-red);
	border: calc(4 * var(--_u)) solid var(--color-white);
	border-radius: calc(12 * var(--_u));
	filter: drop-shadow(0 calc(8 * var(--_u)) calc(4 * var(--_u)) rgb(240 91 11 / .2));
	transition: color .3s, background-color .3s, border-color .3s;
}

.c-cv-button__medal {
	position: absolute;
	inset-block-start: calc(-62.25 * var(--_u));
	inset-inline-start: calc(-8 * var(--_u));
	inline-size: calc(91 * var(--_u));
	max-inline-size: none;
}

.c-cv-button__arrow {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: calc(310.05 * var(--_u));
	inline-size: calc(20 * var(--_u));
	block-size: auto;
	overflow: visible;
	translate: 0 -50%;
}

@media (width >=768px) {
	.c-cv-button {
		inline-size: calc(750 * var(--_u));
		block-size: calc(120 * var(--_u));
		font-size: calc(40 * var(--_u));
	}

	.c-cv-button__medal {
		inset-block-start: calc(-17.5 * var(--_u));
		inset-inline-start: calc(37.9 * var(--_u));
		inline-size: calc(147.9 * var(--_u));
	}

	.c-cv-button__arrow {
		inset-inline-start: calc(629.1 * var(--_u));
		inline-size: calc(40 * var(--_u));
	}
}

@media (any-hover: hover) {
	.c-cv-button:hover {
		color: var(--color-red);
		background-color: var(--color-white);
		border-color: var(--color-red);
	}
}

/* ===============================================
  js-bounce（下から跳ねて出現）
================================================== */
.js-bounce {
	opacity: 0;
}

.js-bounce.is-inview {
	animation: bounce-in .8s cubic-bezier(.22, 1, .36, 1) both;
}

.js-bounce.--delay.is-inview {
	animation-delay: .15s;
}

@keyframes bounce-in {
	0% {
		opacity: 0;
		translate: 0 40%;
	}

	50% {
		opacity: 1;
		translate: 0 -6%;
	}

	75% {
		translate: 0 2%;
	}

	100% {
		opacity: 1;
		translate: 0 0;
	}
}

/* ===============================================
  js-fadeUp（スクロールで下からふわっと出現）
  shindan-test と同じ動き（40px・0.6 秒・画面下 15% 手前で発火）。
  transition を使う要素（成績アップのカード）とぶつからないよう animation で動かす
================================================== */
.js-fadeUp:not(.is-inview) {
	opacity: 0;
}

.js-fadeUp.is-inview {
	animation: fade-up .6s ease var(--fade-delay, 0s) backwards;
}

/* 同時に画面に入る並び（リスト・横並び・見出しと本文）を少しずつずらして出す */
.js-fadeUp.--delay1 {
	--fade-delay: .15s;
}

.js-fadeUp.--delay2 {
	--fade-delay: .3s;
}

@keyframes fade-up {
	from {
		opacity: 0;
		translate: 0 40px;
	}
}

/* ===============================================
  js-pop（奥から手前へ「ドン」と登場：FV の先生・最後の CTA のタイトル）
  小さい（奥にいる）状態から、手前に出てくる。
  行き過ぎはわずか（1.02）にして、最後に縮む動き（＝奥へ戻る見え方）を目立たせない
  画面に入り、画像の読み込みが済んでから JS で is-inview を付ける
================================================== */
.js-pop:not(.is-inview) {
	opacity: 0;
}

.js-pop.is-inview {
	transform-origin: 50% 60%;
	animation: pop-in .7s cubic-bezier(.16, 1, .3, 1) var(--pop-delay, 0s) backwards;
}

.js-pop.--delay1 {
	--pop-delay: .15s;
}

@keyframes pop-in {
	0% {
		opacity: 0;
		scale: .75;
	}

	60% {
		opacity: 1;
		scale: 1.02;
	}

	100% {
		scale: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-bounce,
	.js-fadeUp:not(.is-inview),
	.js-pop:not(.is-inview) {
		opacity: 1;
	}

	.js-bounce.is-inview,
	.js-fadeUp.is-inview,
	.js-pop.is-inview {
		animation: none;
	}
}

/* ===============================================
  p-cta-onayami（CTA：お悩み解決）
  イラスト的な構成のため FV と同様に --u で縮小する
================================================== */
.p-cta-onayami {
	position: relative;
	z-index: 1;
	overflow: hidden;
	container-type: inline-size;
	background: var(--color-yellow) url(../img/cta/bg-onayami-sp.webp) center top / 100% auto no-repeat;
}

.p-cta-onayami__inner {
	--u: calc(100cqi / 390);
	position: relative;
	inline-size: calc(390 * var(--u));
	block-size: calc(493 * var(--u));
	margin-inline: auto;
}

.p-cta-onayami__body,
.p-cta-onayami__photo,
.p-cta-onayami__button {
	position: absolute;
	max-inline-size: none;
}

/* 「お悩み解決！」の文字は先生の写真より手前 */
.p-cta-onayami__body {
	z-index: 1;
	inset-block-start: calc(50 * var(--u));
	inset-inline-start: calc(77 * var(--u));
	display: flex;
	flex-direction: column;
	gap: calc(3 * var(--u));
	align-items: center;
	inline-size: calc(244 * var(--u));
}

.p-cta-onayami__lead {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--u));
	align-items: center;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
}

.p-cta-onayami__lead-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: calc(24 * var(--u));
}

.p-cta-onayami__lead-row .--green {
	color: var(--color-green);
}

.p-cta-onayami__kappa {
	inline-size: calc(240 * var(--u));
	block-size: calc(53 * var(--u));
}

.p-cta-onayami__lead-text {
	font-size: calc(28 * var(--u));
}

.p-cta-onayami__catch {
	inline-size: calc(204 * var(--u));
}

.p-cta-onayami__photo.--takaba {
	inset-block-start: calc(221 * var(--u));
	inset-inline-start: calc(-39 * var(--u));
	inline-size: calc(182 * var(--u));
}

.p-cta-onayami__photo.--itou {
	inset-block-start: calc(236 * var(--u));
	inset-inline-start: calc(274 * var(--u));
	inline-size: calc(118 * var(--u));
}

.p-cta-onayami__button {
	z-index: 2;
	inset-block-start: calc(378.25 * var(--u));
	inset-inline-start: calc(15 * var(--u));
}

@media (width >=768px) {
	.p-cta-onayami {
		background-image: url(../img/cta/bg-onayami.webp);
		/* 中身(基準 920px)と同じ比率で縮小。1440px で最大 */
		background-size: max(100%, min(1440px, 100vw * 1440 / 920)) auto;
	}

	/* 写真を含む幅(約 920px)を下回ったら縮小 */
	.p-cta-onayami__inner {
		--u: min(100cqi / 920, 1px);
		inline-size: calc(718 * var(--u));
		block-size: calc(592 * var(--u));
	}

	.p-cta-onayami__body {
		inset-block-start: calc(88.5 * var(--u));
		inset-inline-start: calc(99 * var(--u));
		gap: calc(16 * var(--u));
		inline-size: calc(519.9 * var(--u));
	}

	.p-cta-onayami__lead {
		gap: calc(8 * var(--u));
	}

	.p-cta-onayami__lead-row {
		flex-direction: row;
		gap: calc(4 * var(--u));
		font-size: calc(28 * var(--u));
	}

	.p-cta-onayami__kappa {
		inline-size: calc(320 * var(--u));
		block-size: calc(70 * var(--u));
	}

	/* 書き出しに影の分(右下 4px)を含むため、レイアウト上は 436×146 として扱う */
	.p-cta-onayami__catch {
		inline-size: calc(441 * var(--u));
		margin-inline-end: calc(-4.6 * var(--u));
		margin-block-end: calc(-4 * var(--u));
	}

	.p-cta-onayami__photo.--takaba {
		inset-block-start: calc(162.5 * var(--u));
		inset-inline-start: calc(-87 * var(--u));
		inline-size: calc(261 * var(--u));
	}

	.p-cta-onayami__photo.--itou {
		inset-block-start: calc(199.5 * var(--u));
		inset-inline-start: calc(569 * var(--u));
		inline-size: calc(166 * var(--u));
	}

	.p-cta-onayami__button {
		inset-block-start: calc(399.5 * var(--u));
		inset-inline-start: calc(-16 * var(--u));
	}
}

/* ===============================================
  p-worry（テストのお悩み）
  SP 390px / PC 1000px を基準に --u で縮小（PC は 1px で最大）
================================================== */
.p-worry {
	container-type: inline-size;
	color: var(--color-white);
	background:
		linear-gradient(164.7deg, #98000C -0.4%, rgb(202 0 15 / 0) 79.4%),
		var(--color-red);
}

.p-worry__inner {
	--u: calc(100cqi / 390);
	inline-size: calc(360 * var(--u));
	padding-block: calc(100 * var(--u)) calc(24 * var(--u));
	margin-inline: auto;
}

/* 導入（見出し・チェックリスト・写真） */
.p-worry__intro {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--u));
}

.p-worry__title {
	padding-inline-start: calc(16 * var(--u));
	font-size: calc(32 * var(--u));
	line-height: calc(45 * var(--u));
	text-align: left;
}

.p-worry__list {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--u));
	padding: calc(24 * var(--u)) calc(12 * var(--u));
	list-style: none;
	background-color: rgb(148 35 35 / .4);
}

.p-worry__item {
	display: flex;
	gap: calc(4 * var(--u));
	align-items: flex-start;
	font-size: calc(18 * var(--u));
	line-height: calc(29 * var(--u)); /* Figma は 1.6(28.8px)を 29px に丸めている */
}

/* アイコンの枠(32×29)内の位置をカンプに合わせる */
.p-worry__check {
	flex-shrink: 0;
	inline-size: calc(25.48 * var(--u));
	margin: calc(3.19 * var(--u)) calc(2.97 * var(--u)) 0 calc(3.55 * var(--u));
}

/* flex の gap に含めないよう絶対配置 */
.p-worry__photos {
	position: absolute;
	inset: 0;
}

.p-worry__photo {
	position: absolute;
	max-inline-size: none;
	border-radius: 50%;
	box-shadow: 0 0 calc(20 * var(--u)) rgb(0 0 0 / .4);
}

.p-worry__photo.--girl {
	inset-block-start: calc(-21 * var(--u));
	inset-inline-start: calc(259 * var(--u));
	inline-size: calc(99 * var(--u));
}

.p-worry__photo.--boy {
	inset-block-start: calc(-67 * var(--u));
	inset-inline-start: calc(222 * var(--u));
	inline-size: calc(73.8 * var(--u));
}

/* 2学期の期末テストは… */
.p-worry__subtitle {
	inline-size: calc(360 * var(--u));
	margin: calc(32 * var(--u)) 0 0 calc(4 * var(--u));
	font-size: calc(28 * var(--u));
	line-height: calc(39 * var(--u));
	text-align: center;
}

/* カード。SP は方眼なし、理由は 1 行ずつ（左にイラスト・右に見出し） */
.p-worry__card {
	--grid: #E8EBE2;
	display: flex;
	flex-direction: column;
	gap: calc(32 * var(--u));
	align-items: center;
	inline-size: calc(340 * var(--u));
	padding-block: calc(24 * var(--u)) calc(32 * var(--u));
	margin: calc(21 * var(--u)) auto 0;
	color: var(--color-black);
	background-color: #F7F6EC;
	border-radius: calc(20 * var(--u));
}

.p-worry__reasons {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	padding: 0;
	list-style: none;
}

/* 1 行の高さ 120。上は地の色、下に向かって白くなる */
.p-worry__reason {
	display: flex;
	gap: calc(8 * var(--u));
	align-items: center;
	justify-content: center;
	block-size: calc(120 * var(--u));
	background: linear-gradient(transparent, var(--color-white));
}

.p-worry__reason-title {
	inline-size: calc(180 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: 1.2;
	color: var(--color-red);
}

/* イラスト枠（SP は見出しの左） */
.p-worry__reason-illust {
	display: flex;
	flex-shrink: 0;
	order: -1;
	align-items: center;
	justify-content: center;
	inline-size: calc(100 * var(--u));
	block-size: calc(100 * var(--u));
	overflow: hidden;
}

/* 画像は Figma の部品と同じ大きさで書き出し済み。表示幅だけ指定する */
.p-worry__reason-illust img {
	flex-shrink: 0;
	inline-size: calc(70.38 * var(--u));
	max-inline-size: none;
}

.p-worry__reason.--amount img {
	inline-size: calc(84.04 * var(--u));
}

.p-worry__reason.--event img {
	inline-size: calc(69.81 * var(--u));
}

.p-worry__conclusion {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: calc(360 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
}

.p-worry__conclusion .--green {
	color: #49A772;
}

.p-worry__conclusion-main {
	font-size: calc(28 * var(--u));
}

.p-worry__taihen {
	position: absolute;
	inset-block-start: calc(39.25 * var(--u));
	inset-inline-start: calc(319.75 * var(--u));
	inline-size: calc(19.5 * var(--u));
	max-inline-size: none;
}

@media (width >=768px) {
	.p-worry {
		background:
			linear-gradient(162deg, #98000C 1.8%, rgb(202 0 15 / 0) 80.2%),
			var(--color-red);
	}

	.p-worry__inner {
		--u: min(100cqi / 1000, 1px);
		inline-size: calc(920 * var(--u));
		padding-block: calc(120 * var(--u)) calc(80 * var(--u));
	}

	.p-worry__intro {
		gap: calc(91 * var(--u));
	}

	.p-worry__title {
		padding-inline-start: 0;
		font-size: calc(56 * var(--u));
		line-height: 1;
		text-align: center;
		white-space: nowrap;
	}

	.p-worry__list {
		inline-size: calc(658 * var(--u));
		padding: calc(24 * var(--u));
	}

	.p-worry__item {
		gap: calc(8 * var(--u));
		align-items: center;
		padding-inline: calc(24 * var(--u));
		font-size: calc(24 * var(--u));
		line-height: normal;
		white-space: nowrap;
	}


	/* 枠 56×50。2 行目だけアイコンが 2px 上 */
	.p-worry__check {
		inline-size: calc(44.59 * var(--u));
		margin: calc(6 * var(--u)) calc(5.41 * var(--u)) calc(5.02 * var(--u)) calc(6 * var(--u));
	}

	.p-worry__item.--second .p-worry__check {
		margin-block: calc(4 * var(--u)) calc(7.02 * var(--u));
	}

	.p-worry__photo.--girl {
		z-index: 1;
		inset-block-start: calc(208 * var(--u));
		inset-inline-start: calc(720 * var(--u));
		inline-size: calc(220 * var(--u));
	}

	.p-worry__photo.--boy {
		inset-block-start: calc(113 * var(--u));
		inset-inline-start: calc(626 * var(--u));
		inline-size: calc(164 * var(--u));
	}

	.p-worry__subtitle {
		inline-size: auto;
		margin: calc(115 * var(--u)) 0 0;
		font-size: calc(48 * var(--u));
		line-height: 1;
	}

	.p-worry__card {
		gap: calc(48 * var(--u));
		inline-size: calc(920 * var(--u));
		padding-block: calc(46 * var(--u)) calc(45 * var(--u));
		margin-block-start: calc(40 * var(--u));
		background:
			linear-gradient(90deg, var(--grid) calc(.92 * var(--u)), transparent 0) calc(16.94 * var(--u)) 0 / calc(30.66 * var(--u)) 100%,
			linear-gradient(var(--grid) calc(.92 * var(--u)), transparent 0) 0 calc(23.84 * var(--u)) / 100% calc(30.66 * var(--u)),
			#F7F6EC;
		box-shadow: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) rgb(0 0 0 / .15);
	}

	.p-worry__reasons {
		flex-direction: row;
		gap: calc(40 * var(--u));
		justify-content: center;
	}

	/* PC は見出しの下にイラスト（200×200 の枠） */
	.p-worry__reason {
		flex-direction: column;
		gap: calc(4 * var(--u));
		inline-size: calc(200 * var(--u));
		block-size: auto;
		background: none;
	}

	.p-worry__reason-title {
		inline-size: auto;
		font-size: calc(24 * var(--u));
		line-height: 1.5;
		text-align: center;
		white-space: nowrap;
	}

	.p-worry__reason-illust {
		order: 0;
		inline-size: calc(200 * var(--u));
		block-size: calc(200 * var(--u));
	}

	.p-worry__reason.--amount .p-worry__reason-illust {
		justify-content: flex-start;
	}

	.p-worry__reason-illust img {
		inline-size: calc(159 * var(--u));
	}

	.p-worry__reason.--amount img {
		inline-size: calc(191 * var(--u));
	}

	.p-worry__reason.--event img {
		inline-size: calc(160 * var(--u));
	}

	.p-worry__conclusion {
		inline-size: calc(575 * var(--u));
		line-height: 1.4;
	}

	.p-worry__conclusion-lead {
		font-size: calc(32 * var(--u));
	}

	.p-worry__conclusion-main {
		font-size: calc(40 * var(--u));
	}

	.p-worry__taihen {
		inset-block-start: calc(35.25 * var(--u));
		inset-inline-start: calc(489.25 * var(--u));
		inline-size: calc(29.5 * var(--u));
	}
}

/* ===============================================
  p-feature（明倫のテスト対策公開授業なら…）
  SP 390px / PC 1120px を基準に --u で縮小（PC は 1px で最大）
================================================== */
.p-feature {
	container-type: inline-size;
	color: var(--color-white);
	background: var(--color-red) url(../img/feature/bg-sp.webp) center top / 100% auto no-repeat;
}

.p-feature__inner {
	--u: calc(100cqi / 390);
	inline-size: calc(390 * var(--u));
	padding-block: calc(48 * var(--u));
	margin-inline: auto;
}

.p-feature__title {
	font-size: calc(28 * var(--u));
	line-height: calc(39 * var(--u));
	text-align: center;
	white-space: nowrap;
}

.p-feature__title span {
	color: var(--color-yellow);
}

.p-feature__list {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
	padding: 0;
	margin-block-start: calc(29 * var(--u));
	list-style: none;
}

.p-feature__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* SP：写真の上に重なる横長のラベル */
.p-feature__badge {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: calc(2 * var(--u));
	align-items: center;
	justify-content: center;
	inline-size: calc(360 * var(--u));
	block-size: calc(74 * var(--u));
	color: var(--color-black);
	text-align: center;
	white-space: nowrap;
	background-color: var(--color-white);
	border: calc(1 * var(--u)) solid var(--color-greenSecondary);
	border-radius: calc(60 * var(--u));
	box-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 var(--color-greenSecondary);
}

.p-feature__badge-label {
	font-size: calc(14 * var(--u));
	line-height: 1.5;
	color: var(--color-red);
}

.p-feature__badge-text {
	font-size: calc(18 * var(--u));
	line-height: 1.4;
}

.p-feature__photo {
	display: block;
	inline-size: calc(340 * var(--u));
	max-inline-size: none;
	margin-block-start: calc(-11 * var(--u));
	box-shadow: 0 0 calc(10 * var(--u)) rgb(0 0 0 / .4);
}

/* 矢印〜点数アップ */
.p-feature__result {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block-start: calc(34 * var(--u));
	text-align: center;
	white-space: nowrap;
}

.p-feature__arrow {
	inline-size: calc(64 * var(--u));
	max-inline-size: none;
	margin-block-end: calc(-.6 * var(--u)); /* カンプの枠は高さ 70px（画像は 70.6px） */
}

.p-feature__result-lead {
	margin-block-start: calc(24 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: 1.5;
}

.p-feature__result-catch {
	inline-size: calc(340 * var(--u));
	padding: calc(4 * var(--u)) calc(10 * var(--u));
	margin-block-start: calc(14 * var(--u));
	font-size: calc(32 * var(--u));
	line-height: 1.5;
	color: var(--color-black);
	background-color: var(--color-white);
}

.p-feature__result-catch span {
	color: var(--color-red);
}

@media (width >=768px) {
	.p-feature {
		background-image: url(../img/feature/bg.webp);
		/* 中身(基準 1120px)と同じ比率で縮小。1440px で最大 */
		background-size: max(100%, min(1440px, 100vw * 1440 / 1120)) auto;
	}

	.p-feature__inner {
		--u: min(100cqi / 1120, 1px);
		inline-size: calc(1080 * var(--u));
		padding-block: calc(100 * var(--u));
	}

	.p-feature__title {
		font-size: calc(48 * var(--u));
		line-height: calc(58 * var(--u)); /* Figma の丸め(57.6→58)に合わせる */
	}

	.p-feature__list {
		gap: calc(50 * var(--u));
		margin-block-start: calc(64 * var(--u));
	}

	/* 円形バッジの右に写真。2 つ目は 157px 右へずらす */
	.p-feature__item {
		flex-direction: row;
		align-items: flex-start;
		block-size: calc(360 * var(--u));
	}

	.p-feature__item + .p-feature__item {
		margin-inline-start: calc(157 * var(--u));
	}

	.p-feature__badge {
		gap: calc(8 * var(--u));
		inline-size: calc(248 * var(--u));
		block-size: calc(248 * var(--u));
		padding: calc(40 * var(--u)) calc(20 * var(--u));
		margin-block-start: calc(56 * var(--u));
		border-width: calc(2 * var(--u));
		border-radius: 50%;
		box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 var(--color-greenSecondary);
	}

	.p-feature__badge-label {
		font-size: calc(20 * var(--u));
	}

	.p-feature__badge-text {
		font-size: calc(28 * var(--u));
	}

	.p-feature__photo {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: calc(203 * var(--u));
		inline-size: calc(720 * var(--u));
		margin-block-start: 0;
		box-shadow: 0 0 calc(20 * var(--u)) rgb(0 0 0 / .4);
	}

	.p-feature__result {
		margin-block-start: calc(64 * var(--u));
	}

	.p-feature__result-lead {
		font-size: calc(40 * var(--u));
	}

	.p-feature__result-catch {
		inline-size: calc(740 * var(--u));
		margin-block-start: calc(40 * var(--u));
		font-size: calc(48 * var(--u));
	}
}

/* ===============================================
  p-result（成績アップ事例）
  SP 390px / PC 1240px を基準に --u で縮小（PC は 1px で最大）
  白いカードの中だけが左へスライド（御器所校 → 徳重校）
================================================== */
.p-result {
	overflow: hidden;
	container-type: inline-size;
	background-color: var(--color-yellow);
}

.p-result__inner {
	--u: calc(100cqi / 390);
	position: relative;
	inline-size: calc(390 * var(--u));
	padding-block: calc(237 * var(--u)) calc(40 * var(--u));
	margin-inline: auto;
}

/* 見出し（ラベル＋「成績アップ」）を 1 つの h2 にまとめる。
   h2 は高さ 0 で左上に置き、中の 2 つは今までどおり inner 基準の座標で配置する */
.p-result__heading {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 0;
}

.p-result__label,
.p-result__title,
.p-result__title-arrow {
	position: absolute;
	z-index: 1;
}

.p-result__label {
	inset-block-start: calc(80 * var(--u));
	inset-inline-start: calc(45 * var(--u));
	inline-size: calc(300 * var(--u));
	padding: calc(10 * var(--u)) calc(24 * var(--u));
	font-size: calc(28 * var(--u));
	line-height: normal;
	color: var(--color-white);
	text-align: center;
	white-space: nowrap;
	background-color: var(--color-blackPrimary);
}

.p-result__title {
	inset-block-start: calc(153 * var(--u));
	inset-inline-start: calc(20.5 * var(--u));
	inline-size: calc(349 * var(--u));
}

.p-result__title img {
	display: block;
	inline-size: 100%;
}

.p-result__title-arrow {
	inset-block-start: calc(198 * var(--u));
	inset-inline-start: calc(266 * var(--u));
	inline-size: calc(111 * var(--u));
	block-size: auto;
	max-inline-size: none;
	overflow: visible;
}

/* 矢印をなぞるように描く：マスクの線（中心線）を伸ばして、塗りの矢印を根元から見せていく
   見出しがふわっと出始めたら描き始め、胴体 → 矢じりの順に一続きで出す（約 0.8 秒・だんだん速く） */
/* 描く前は線の端（丸い先端）が線の外に来るよう、間隔を広めに取って少し余分にずらす（丸が残らないように） */
.p-result__arrow-line {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-dasharray: 1 2;
	stroke-dashoffset: 1.05;
}

.p-result__arrow-line.--body {
	stroke-width: 44;
}

.p-result__arrow-line.--head {
	stroke-width: 120;
}

/* だんだん速く：胴体はゆっくり描き始めて加速し、矢じりはその速さのまま減速せずに描き切る */
.js-draw.is-inview .p-result__arrow-line.--body {
	animation: arrow-draw .5s cubic-bezier(.55, 0, 1, .55) .2s forwards;
}

.js-draw.is-inview .p-result__arrow-line.--head {
	animation: arrow-draw .12s linear .7s forwards;
}

@keyframes arrow-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-result__arrow-line {
		stroke-dashoffset: 0;
	}

	.js-draw.is-inview .p-result__arrow-line {
		animation: none;
	}
}

/* スライダー（カード＋前後の矢印）。矢印はカードの外にはみ出すため、カードとは別に置く */
.p-result__slider {
	position: relative;
	inline-size: calc(370 * var(--u));
	margin-inline-start: calc(10 * var(--u));
}

/* カード（スライダーの窓） */
.p-result__card {
	transition: block-size .6s cubic-bezier(.33, 1, .68, 1); /* SP：表示中のスライドの高さに合わせる（JS で指定） */
	overflow: hidden;
	background-color: var(--color-white);
	border-radius: calc(8 * var(--u));
}

/* 前後の矢印：SP は生徒写真の高さ、カードの左右に 5px はみ出す */
.p-result__nav {
	position: absolute;
	inset-block-start: calc(240 * var(--u));
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: calc(48 * var(--u));
	aspect-ratio: 1;
	padding: 0;
	color: var(--color-white);
	cursor: pointer;
	background-color: var(--color-red);
	border: calc(2 * var(--u)) solid var(--color-red);
	border-radius: 50%;
	transition: color .3s, background-color .3s;
}

.p-result__nav.--prev {
	inset-inline-start: calc(-5 * var(--u));
}

.p-result__nav.--next {
	inset-inline-end: calc(-5 * var(--u));
}

.p-result__nav svg {
	inline-size: calc(12 * var(--u));
	block-size: auto;
}

.p-result__nav.--prev svg {
	scale: -1 1;
}

@media (any-hover: hover) {
	.p-result__nav:hover {
		color: var(--color-red);
		background-color: var(--color-white);
	}
}

.p-result__track {
	display: flex;
	align-items: flex-start; /* スライドごとの高さを保つ */
	transition: translate .6s cubic-bezier(.33, 1, .68, 1); /* 動き出しを速く、最後だけゆっくり止める */
}

.p-result__slide {
	flex: 0 0 100%;
}

/* スライドの中身。座標はカンプ基準の絶対配置 */
.p-result__body {
	position: relative;
	inline-size: calc(360 * var(--u));
	block-size: calc(960 * var(--u));
	margin: calc(36 * var(--u)) auto calc(22 * var(--u));
}

/* SP は中身の量に合わせる（徳重校は点数カード 2 段で終わる） */
.--tokushige .p-result__body {
	block-size: calc(922 * var(--u));
}

.p-result__body > * {
	position: absolute;
	max-inline-size: none;
}

.p-result__campus {
	inset-block-start: calc(4 * var(--u));
	inset-inline: 0;
	font-size: calc(32 * var(--u));
	line-height: normal;
	text-align: center;
}

.p-result__student {
	inset-block-start: calc(70 * var(--u));
	inset-inline-start: calc(26 * var(--u)); /* カンプの見た目は枠線ぶん左右に 4px 広い */
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	align-items: center;
	inline-size: calc(308 * var(--u));
	block-size: calc(298 * var(--u));
	padding-block-start: calc(188 * var(--u));
	color: var(--color-blackPrimary);
	background-color: var(--color-yellow);
	border: calc(4 * var(--u)) solid #EB2529;
	border-radius: calc(10 * var(--u));
}

.p-result__student-name {
	font-size: calc(18 * var(--u));
	line-height: 1;
	letter-spacing: .05em;
	white-space: nowrap;
}

.p-result__school {
	position: relative;
	padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u));
	font-size: calc(32 * var(--u));
	line-height: 1;
	letter-spacing: .05em;
	white-space: nowrap;
	background-color: var(--color-white);
}

/* 合格スタンプ：白枠の右端からの位置で配置 */
.p-result__gokaku {
	position: absolute;
	inset-block-start: calc(16 * var(--u));
	inset-inline-start: calc(100% - 24.2 * var(--u));
	inline-size: calc(99.2 * var(--u));
	max-inline-size: none;
}

.p-result__photo {
	inset-block-start: calc(74 * var(--u));
	inset-inline-start: calc(108 * var(--u));
	inline-size: calc(144 * var(--u));
}

/* 御器所校の写真は頭が円からはみ出す分だけ背が高い（円の下端を揃える） */
.--gokiso .p-result__photo {
	inset-block-start: calc(65.4 * var(--u));
}

.p-result__score.--1,
.p-result__score.--3 {
	inset-inline-start: calc(5.8 * var(--u));
}

.p-result__score.--2,
.p-result__score.--4 {
	inset-inline-start: calc(183.2 * var(--u));
}

.p-result__score.--1,
.p-result__score.--2 {
	inset-block-start: calc(396 * var(--u));
}

.p-result__score.--3,
.p-result__score.--4 {
	inset-block-start: calc(670 * var(--u));
}

.p-result__rank {
	inset-inline-start: calc(.4 * var(--u));
}

.p-result__rank.--1 {
	inset-block-start: calc(672 * var(--u));
}

.p-result__rank.--2 {
	inset-block-start: calc(822.4 * var(--u));
}

@media (width >=768px) {
	.p-result__inner {
		--u: min(100cqi / 1240, 1px);
		inline-size: calc(1440 * var(--u));
		padding-block: calc(326 * var(--u)) calc(80 * var(--u));
		/* 1440px 基準の座標系が画面より広くなる分を左右均等にはみ出させて中央に置く */
		margin-inline: calc((100cqi - 1440 * var(--u)) / 2);
	}

	.p-result__label {
		inset-block-start: calc(100 * var(--u));
		inset-inline-start: calc(553 * var(--u));
		inline-size: calc(336 * var(--u));
		font-size: calc(32 * var(--u));
	}

	.p-result__title {
		inset-block-start: calc(165.31 * var(--u));
		inset-inline-start: calc(359.73 * var(--u));
		inline-size: calc(698 * var(--u));
	}

	.p-result__title-arrow {
		inset-block-start: calc(203.16 * var(--u));
		inset-inline-start: calc(961 * var(--u));
		inline-size: calc(202 * var(--u));
	}

	.p-result__slider {
		inline-size: calc(1180 * var(--u));
		margin-inline-start: calc(130 * var(--u));
	}

	.p-result__card {
		border-radius: calc(20 * var(--u));
	}

	/* PC は生徒の枠の上端から 149px 下（Figma の位置関係）、画面幅 1440px で左右 90px の位置 */
	.p-result__nav {
		inset-block-start: calc(344 * var(--u));
		inline-size: calc(72 * var(--u));
		border-width: calc(3 * var(--u));
	}

	.p-result__nav.--prev {
		inset-inline-start: calc(-40 * var(--u));
	}

	.p-result__nav.--next {
		inset-inline-end: calc(-40 * var(--u));
	}

	.p-result__nav svg {
		inline-size: calc(18 * var(--u));
	}

	.p-result__body,
	.--tokushige .p-result__body {
		inline-size: calc(951 * var(--u));
		block-size: calc(688 * var(--u));
		margin: calc(62 * var(--u)) auto calc(50 * var(--u));
	}

	.p-result__campus {
		inset-block-start: 0;
		inset-inline: 0 auto;
		inline-size: calc(437 * var(--u));
		font-size: calc(64 * var(--u));
	}

	.p-result__student {
		inset-block-start: calc(133 * var(--u));
		inset-inline-start: calc(-5.5 * var(--u)); /* カンプの見た目（枠線込み 449×453） */
		inline-size: calc(449.1 * var(--u));
		block-size: calc(453.1 * var(--u));
		padding-block-start: calc(299.93 * var(--u));
		color: var(--color-black);
		border-width: calc(6.07 * var(--u));
		border-radius: calc(15.175 * var(--u));
	}

	.p-result__student-name {
		font-size: calc(24 * var(--u));
	}

	.p-result__school {
		padding: calc(4 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u));
		font-size: calc(48 * var(--u));
	}

	.p-result__gokaku {
		inset-block-start: calc(12.5 * var(--u));
		inset-inline-start: calc(100% - 35.75 * var(--u));
		inline-size: calc(124 * var(--u));
	}

	.p-result__photo {
		inset-block-start: calc(149 * var(--u));
		inset-inline-start: calc(118.6 * var(--u));
		inline-size: calc(200 * var(--u));
	}

	.--gokiso .p-result__photo {
		inset-block-start: calc(137 * var(--u));
	}

	.p-result__score.--1,
	.p-result__score.--3 {
		inset-inline-start: calc(501.1 * var(--u));
	}

	.p-result__score.--2,
	.p-result__score.--4 {
		inset-inline-start: calc(738.1 * var(--u));
	}

	.p-result__score.--1,
	.p-result__score.--2 {
		inset-block-start: calc(6 * var(--u));
	}

	.p-result__score.--3,
	.p-result__score.--4 {
		inset-block-start: calc(337 * var(--u));
	}

	.p-result__rank {
		inset-inline-start: calc(501.1 * var(--u));
	}

	.p-result__rank.--1 {
		inset-block-start: calc(334 * var(--u));
	}

	.p-result__rank.--2 {
		inset-block-start: calc(522 * var(--u));
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-result__track,
	.p-result__card {
		transition: none;
	}
}

/* ===============================================
  c-score（点数カード・順位の枠）
  子要素はカンプの座標(--x --y --w --fs)をそのまま持ち、--k 倍で描く
  --k：御器所校は PC 基準、徳重校は SP 基準の部品なので、反対側の画面では拡大・縮小する
================================================== */
.c-score {
	--k: var(--u);
	font-weight: 400;
	line-height: normal;
	color: #231815;
	white-space: nowrap;
}

.--gokiso .c-score {
	--k: calc(var(--u) * .8);
}

@media (width >=768px) {
	.--gokiso .c-score {
		--k: var(--u);
	}

	.--tokushige .c-score {
		--k: calc(var(--u) * 1.25);
	}
}

.c-score > * {
	position: absolute;
	inset-block-start: calc(var(--y) * var(--k));
	inset-inline-start: calc(var(--x) * var(--k));
}

.c-score__part {
	inline-size: calc(var(--w) * var(--k));
	max-inline-size: none;
}

.c-score__text,
.c-score__text small {
	font-size: calc(var(--fs) * var(--k));
}

.c-score__text.--big {
	font-family: var(--font-en);
	font-weight: 700;
	color: #E60012;
}

/* 3 桁の点数はカンプで 0.3° 傾いている */
.c-score__text.--rot {
	rotate: .3deg;
}

.c-score__text.--small {
	font-family: var(--font-en);
	font-weight: 700;
}

.c-score__text.--tight {
	letter-spacing: -.03em;
}

.c-score__text.--unit-red {
	color: #E60012;
}

.c-score__text.--subject {
	font-weight: 700;
	color: var(--color-greenDark);
}

.c-score__text.--subject.--regular {
	font-weight: 400;
}

/* 順位の枠線（ラベルの白地で上辺が隠れるよう、最背面の疑似要素で描く） */
.p-result__rank::before {
	position: absolute;
	inset-block-start: calc(14 * var(--k));
	inset-inline-start: 0;
	inline-size: calc(449 * var(--k));
	block-size: calc(158 * var(--k));
	content: "";
	border: calc(1 * var(--k)) solid var(--color-green);
}

.c-score__text.--rank-label,
.c-score__text.--rank-item {
	font-weight: 700;
	color: var(--color-green);
}

.c-score__text.--rank-item {
	color: #009B63;
}

/* ===============================================
  p-cta-chance（CTA：点数アップのチャンス）※ページ内で 2 回使用
  SP 390px / PC 920px を基準に --u で縮小（PC は 1px で最大）
================================================== */
.p-cta-chance {
	overflow-x: clip; /* 写真が右に 1px 弱はみ出して横スクロールが出るのを防ぐ（縦ははみ出しを許す） */
	container-type: inline-size;
	background: linear-gradient(#005C3F, #003C29);
}

.p-cta-chance__inner {
	--u: calc(100cqi / 390);
	position: relative;
	inline-size: calc(390 * var(--u));
	block-size: calc(493 * var(--u));
	margin-inline: auto;
}

.p-cta-chance__photo,
.p-cta-chance__text,
.p-cta-chance__button {
	position: absolute;
	max-inline-size: none;
}

/* SP はボタンの上辺にぴったり乗せる（ボタン上端 347 − 写真の高さ 178.96 × 633 / 537） */
.p-cta-chance__photo {
	inset-block-start: calc(136.05 * var(--u));
	inset-inline-start: calc(212 * var(--u));
	inline-size: calc(178.96 * var(--u));
}

.p-cta-chance__text {
	inset-block-start: calc(72 * var(--u));
	inset-inline-start: calc(27 * var(--u));
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--u));
	align-items: flex-start;
	white-space: nowrap;
}

.p-cta-chance__lead {
	font-size: calc(28 * var(--u));
	line-height: 1.4;
	color: var(--color-white);
}

.p-cta-chance__catch {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	align-items: flex-start;
	font-size: calc(32 * var(--u));
	line-height: 1.4;
}

/* SP は行ごとに白い帯 */
.p-cta-chance__catch-row {
	padding: calc(4 * var(--u)) calc(8 * var(--u));
	background-color: var(--color-white);
}

.p-cta-chance__catch em {
	font-style: normal;
	color: var(--color-red);
}

.p-cta-chance__button {
	inset-block-start: calc(347 * var(--u));
	inset-inline-start: calc(15 * var(--u));
}

@media (width >=768px) {
	.p-cta-chance__inner {
		--u: min(100cqi / 920, 1px);
		inline-size: calc(820 * var(--u));
		block-size: calc(522 * var(--u));
	}

	.p-cta-chance__photo {
		inset-block-start: calc(26.5 * var(--u));
		inset-inline-start: calc(32 * var(--u));
		inline-size: calc(287 * var(--u));
	}

	.p-cta-chance__text {
		inset-block-start: calc(118.5 * var(--u));
		inset-inline-start: calc(340 * var(--u));
		gap: calc(8 * var(--u));
	}

	/* PC は 1 本の白い帯にまとめる */
	.p-cta-chance__catch {
		display: block;
		padding: calc(4 * var(--u)) calc(16 * var(--u));
		font-size: calc(28 * var(--u));
		background-color: var(--color-white);
	}

	.p-cta-chance__catch-row {
		padding: 0;
		background: none;
	}

	.p-cta-chance__button {
		inset-block-start: calc(284.1 * var(--u));
		inset-inline-start: calc(35 * var(--u));
	}
}

/* ===============================================
  p-point（2つのポイント・講師紹介）
  SP 390px / PC 1120px を基準に --u で縮小（PC は 1px で最大）
  カード内の帯・バッジ・見出しはカード左上からの座標で配置
================================================== */
.p-point {
	overflow: hidden;
	container-type: inline-size;
	background-color: var(--color-red);
}

.p-point__inner {
	--u: calc(100cqi / 390);
	position: relative;
	inline-size: calc(390 * var(--u));
	padding-block: calc(504 * var(--u)) calc(80 * var(--u));
	margin-inline: auto;
}

.p-point__inner > *,
.p-point__card > :not(picture),
.p-point__card > picture > img {
	position: absolute;
	max-inline-size: none;
}

/* picture は箱を作らず、中の img をカード基準で配置する */
.p-point__card > picture {
	display: contents;
}

.p-point__title {
	inset-block-start: calc(80 * var(--u));
	inset-inline-start: calc(14 * var(--u));
	inline-size: calc(362 * var(--u));
	font-size: calc(32 * var(--u));
	line-height: 1.4;
	color: var(--color-white);
	text-align: center;
}

.p-point__title span {
	color: var(--color-yellow);
}

.p-point__lead {
	inset-block-start: calc(231 * var(--u));
	inset-inline-start: calc(14 * var(--u));
	inline-size: calc(362 * var(--u));
	font-size: calc(18 * var(--u));
	line-height: 1.6;
	color: var(--color-white);
}

/* カード */
.p-point__card {
	position: relative;
	inline-size: calc(360 * var(--u));
	padding-block: calc(40 * var(--u)) calc(24 * var(--u));
	background-color: var(--color-white);
	border-radius: calc(8 * var(--u));
	box-shadow: 0 0 calc(20 * var(--u)) rgb(0 0 0 / .4);
}

.p-point__card.--1 {
	inset-inline-start: calc(14.54 * var(--u));
}

.p-point__card.--2 {
	inset-inline-start: calc(16 * var(--u));
	margin-block-start: calc(157 * var(--u));
}

.p-point__card > .p-point__text,
.p-point__card > .p-point__teachers,
.p-point__card > picture > .p-point__photo {
	position: relative;
}

/* 黄色い筆の帯：1 つの SVG を枠の大きさに引き伸ばし、カンプと同じく -177.62° 回転 */
.p-point__ribbon {
	inset-block-start: calc(-133 * var(--u) + (181.08 - 162.88) / 2 * var(--u));
	inset-inline-start: calc(-43.08 * var(--u) + (448.3 - 441.92) / 2 * var(--u));
	inline-size: calc(441.92 * var(--u));
	block-size: calc(162.88 * var(--u));
	rotate: -177.62deg;
}

.p-point__card.--2 .p-point__ribbon {
	inset-inline-start: calc(-44.54 * var(--u) + (448.3 - 441.92) / 2 * var(--u));
}

.p-point__badge {
	inset-block-start: calc(-125 * var(--u));
	inset-inline-start: calc(135.46 * var(--u));
	inline-size: calc(90 * var(--u));
}

.p-point__card.--2 .p-point__badge {
	inset-inline-start: calc(135 * var(--u));
}

.p-point__heading {
	inset-block-start: calc(-57 * var(--u));
	inset-inline: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: calc(22 * var(--u));
	font-weight: 900;
	line-height: 1.5;
	white-space: nowrap;
}

.p-point__heading-sub {
	font-size: calc(20 * var(--u));
	font-weight: 700;
	color: var(--color-greenSecondary);
}

.p-point__card.--2 .p-point__heading-sub {
	font-size: calc(16 * var(--u));
}

.p-point__text {
	inset-inline-start: calc(12.46 * var(--u));
	margin-block-end: calc(32 * var(--u));
	inline-size: calc(336 * var(--u));
	font-size: calc(16 * var(--u));
	font-weight: 600;
	line-height: 1.5;
}

.p-point__text > p + p {
	margin-block-start: .5em;
}

.p-point__card.--2 .p-point__text {
	inset-inline-start: calc(12 * var(--u));
	margin-block-end: calc(24 * var(--u));
}

/* 講師 */
.p-point__teachers {
	inset-inline-start: calc(10.46 * var(--u));
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
	inline-size: calc(340 * var(--u));
}

.p-point__teacher {
	position: relative;
	display: flex;
	padding: calc(20 * var(--u)) calc(16 * var(--u));
	color: var(--color-blackPrimary);
	background-color: #FFFDDE;
}

.p-point__teacher-photo {
	position: absolute;
	inset-block-start: calc(-26 * var(--u));
	inset-inline-start: calc(223 * var(--u));
	inline-size: calc(105 * var(--u));
	block-size: calc(122 * var(--u));
	max-inline-size: none;
	object-fit: cover;
}

.p-point__teacher.--ito .p-point__teacher-photo {
	inset-block-start: calc(-33 * var(--u));
	inset-inline-start: calc(219 * var(--u));
	inline-size: calc(128 * var(--u));
	block-size: calc(121 * var(--u));
}

.p-point__teacher-body {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: calc(8 * var(--u));
}

.p-point__teacher-head {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	align-items: flex-start;
}

.p-point__teacher-career {
	flex-shrink: 0;
	inline-size: calc(112 * var(--u)); /* カンプの幅。名前が長くても縮めない */
	padding: calc(8 * var(--u)) calc(16 * var(--u));
	font-size: calc(14 * var(--u));
	line-height: 1;
	letter-spacing: .05em;
	color: var(--color-white);
	white-space: nowrap;
	background-color: var(--color-greenPrimary);
}

.p-point__teacher-name {
	display: flex;
	gap: calc(2 * var(--u));
	align-items: flex-end;
	white-space: nowrap;
}

.p-point__teacher-name picture {
	display: block;
}

.p-point__teacher-nickname {
	display: block;
	inline-size: calc(80 * var(--u));
	max-inline-size: none;
}

.--ito .p-point__teacher-nickname {
	inline-size: calc(100 * var(--u));
}

.p-point__teacher-koto {
	inline-size: calc(29 * var(--u));
	block-size: calc(17 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: 500;
	line-height: 1;
	letter-spacing: .05em;
}

.p-point__teacher-fullname {
	margin-inline-start: calc(2 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: 1;
	letter-spacing: .067em;
}

.p-point__teacher-fullname small {
	font-size: calc(16 * var(--u));
	letter-spacing: .1em;
}

.p-point__teacher-text {
	font-size: calc(14 * var(--u));
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .03em;
}

.p-point__photo {
	inset-inline-start: calc(10 * var(--u));
	inline-size: calc(340 * var(--u));
}

@media (width >=768px) {
	.p-point__inner {
		--u: min(100cqi / 1120, 1px);
		inline-size: calc(1080 * var(--u));
		padding-block: calc(358 * var(--u)) 0;
		margin-block: calc(120 * var(--u)) calc(98 * var(--u));
	}

	.p-point__title {
		inset-block-start: 0;
		inset-inline: 0;
		inline-size: auto;
		font-size: calc(56 * var(--u));
	}

	.p-point__lead {
		inset-block-start: calc(172 * var(--u));
		inset-inline: 0;
		inline-size: auto;
		text-align: center;
	}

	.p-point__card {
		inset-inline-start: 0;
		inline-size: calc(1080 * var(--u));
		border-radius: calc(10 * var(--u));
	}

	.p-point__card.--1 {
		inset-inline-start: 0;
		padding-block: calc(82 * var(--u)) calc(48 * var(--u));
	}

	.p-point__card.--2 {
		inset-inline-start: 0;
		padding-block: calc(87 * var(--u)) calc(43 * var(--u));
		margin-block-start: calc(128 * var(--u));
	}

	.p-point__ribbon {
		inset-block-start: calc(-98 * var(--u) + (191.7 - 160.9) / 2 * var(--u));
		inset-inline-start: calc(180 * var(--u) + (751.36 - 745.32) / 2 * var(--u));
		inline-size: calc(745.32 * var(--u));
		block-size: calc(160.9 * var(--u));
	}

	.p-point__card.--2 .p-point__ribbon {
		inset-block-start: calc(-98.01 * var(--u) + (194.1 - 160.9) / 2 * var(--u));
		inset-inline-start: calc(180 * var(--u) + (809.27 - 803.29) / 2 * var(--u));
		inline-size: calc(803.29 * var(--u));
	}

	.p-point__badge {
		inset-block-start: calc(-71 * var(--u));
		inset-inline-start: calc(212 * var(--u));
		inline-size: calc(180 * var(--u));
	}

	.p-point__card.--2 .p-point__badge {
		inset-block-start: calc(-67 * var(--u));
		inset-inline-start: calc(126 * var(--u));
		inline-size: calc(190 * var(--u));
	}

	/* 見出しは帯の右寄せ（右端の位置で揃える） */
	.p-point__heading {
		inset-block-start: calc(-48 * var(--u));
		inset-inline: auto calc(260 * var(--u));
		align-items: flex-start;
		font-size: calc(28 * var(--u));
	}

	.p-point__heading-sub {
		font-size: calc(32 * var(--u));
	}

	.p-point__card.--2 .p-point__heading {
		inset-block-start: calc(-37 * var(--u));
		inset-inline-end: calc(220 * var(--u));
	}

	.p-point__card.--2 .p-point__heading-sub {
		font-size: calc(28 * var(--u));
	}

	.p-point__card > .p-point__text,
	.p-point__card.--2 > .p-point__text {
		inset-inline-start: 0;
		inline-size: auto;
		max-inline-size: calc(760 * var(--u));
		margin: 0 auto calc(80 * var(--u));
	}

	.p-point__card.--2 > .p-point__text {
		margin-block-end: calc(24 * var(--u));
	}

	.p-point__teachers {
		inset-inline-start: calc(156 * var(--u));
		gap: calc(40 * var(--u));
		inline-size: calc(720 * var(--u));
	}

	.p-point__teacher {
		padding: calc(32 * var(--u)) calc(40 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));
	}

	.p-point__teacher.--takaba {
		justify-content: flex-end;
	}

	.p-point__teacher-photo {
		inset-block-start: calc(-84 * var(--u));
		inset-inline-start: calc(-9 * var(--u));
		inline-size: calc(245 * var(--u));
		block-size: calc(284 * var(--u));
	}

	.p-point__teacher.--ito .p-point__teacher-photo {
		inset-block-start: calc(-54 * var(--u));
		inset-inline-start: calc(485 * var(--u));
		inline-size: calc(295 * var(--u));
		block-size: calc(278 * var(--u));
	}

	.p-point__teacher-body {
		flex: 0 0 calc(440 * var(--u));
		gap: calc(16 * var(--u));
	}

	.p-point__teacher-head {
		flex-direction: row;
		gap: calc(16 * var(--u));
		align-items: center;
	}

	.p-point__teacher-career {
		inline-size: calc(146 * var(--u));
		font-size: calc(20 * var(--u));
	}

	.p-point__teacher-nickname {
		inline-size: calc(112 * var(--u));
	}

	.--ito .p-point__teacher-nickname {
		inline-size: calc(160 * var(--u));
	}

	.p-point__teacher-fullname {
		font-size: calc(32 * var(--u));
		letter-spacing: .05em;
	}

	.p-point__teacher-fullname small {
		font-size: calc(20 * var(--u));
		letter-spacing: .08em;
	}

	.p-point__teacher-text {
		font-size: calc(16 * var(--u));
	}

	.p-point__photo {
		inset-inline-start: calc(220 * var(--u));
		inline-size: calc(640 * var(--u));
	}
}

/* ===============================================
  p-cta-free（CTA：無料で受講できるチャンス）
  SP 390px / PC 920px を基準に --u で縮小（PC は 1px で最大）
  PC はカンプの 1440px 座標系をそのまま使い、画面より広い分は左右均等にはみ出させる
================================================== */
.p-cta-free {
	overflow: hidden;
	container-type: inline-size;
	background: var(--color-yellow) url(../img/cta/bg-free-sp.webp) center top / 100% auto no-repeat;
}

.p-cta-free__inner {
	--u: calc(100cqi / 390);
	position: relative;
	inline-size: calc(390 * var(--u));
	block-size: calc(406 * var(--u));
	margin-inline: auto;
}

.p-cta-free__photo,
.p-cta-free__text,
.p-cta-free__button {
	position: absolute;
	max-inline-size: none;
}

/* SP は人物をテキストより前に出す（PC はボタンと重なるので前に出さない） */
.p-cta-free__photo {
	z-index: 1;
	inset-block-start: calc(88 * var(--u));
	inset-inline-start: calc(251 * var(--u));
	inline-size: calc(140 * var(--u));
}

.p-cta-free__text {
	inset-block-start: calc(44 * var(--u));
	inset-inline-start: calc(32 * var(--u));
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	align-items: flex-start;
	white-space: nowrap;
}

.p-cta-free__lead {
	font-size: calc(28 * var(--u));
	line-height: 1.4;
}

.p-cta-free__catch {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	align-items: flex-start;
	font-size: calc(28 * var(--u));
	line-height: 1.4;
}

.p-cta-free__catch-row {
	padding: calc(4 * var(--u)) calc(12 * var(--u));
	background-color: var(--color-white);
}

.p-cta-free__catch-row + .p-cta-free__catch-row {
	font-size: calc(32 * var(--u));
}

.p-cta-free__catch em {
	font-size: calc(36 * var(--u));
	font-style: normal;
	color: var(--color-red);
}

.p-cta-free__button {
	inset-block-start: calc(282.25 * var(--u));
	inset-inline-start: calc(15 * var(--u));
}

@media (width >=768px) {
	.p-cta-free {
		background-image: url(../img/cta/bg-free.webp);
		background-size: max(100%, min(1440px, 100vw * 1440 / 920)) auto;
	}

	.p-cta-free__inner {
		--u: min(100cqi / 920, 1px);
		inline-size: calc(1440 * var(--u));
		block-size: calc(495 * var(--u));
		margin-inline: calc((100cqi - 1440 * var(--u)) / 2);
	}

	.p-cta-free__photo {
		z-index: auto;
		inset-block-start: calc(64 * var(--u));
		inset-inline-start: calc(305 * var(--u));
		inline-size: calc(261 * var(--u));
	}

	.p-cta-free__text {
		inset-block-start: calc(125 * var(--u));
		inset-inline-start: calc(585 * var(--u));
		gap: calc(13 * var(--u));
		inline-size: calc(551 * var(--u));
		align-items: stretch;
	}

	.p-cta-free__lead {
		font-size: calc(40 * var(--u));
	}

	/* PC は 1 本の白い帯（幅いっぱい・中央揃え） */
	.p-cta-free__catch {
		display: block;
		padding: calc(4 * var(--u)) calc(16 * var(--u));
		font-size: calc(40 * var(--u));
		text-align: center;
		background-color: var(--color-white);
	}

	.p-cta-free__catch-row,
	.p-cta-free__catch-row + .p-cta-free__catch-row {
		padding: 0;
		font-size: inherit;
		background: none;
	}

	.p-cta-free__catch em {
		font-size: inherit;
	}

	.p-cta-free__button {
		inset-block-start: calc(311 * var(--u));
		inset-inline-start: calc(345 * var(--u));
	}
}

/* ===============================================
  p-detail（公開授業の詳細・校舎案内）
  文章量が多いので通常フロー。カード幅は画面に合わせて縮む
================================================== */
.p-detail {
	padding-block: 80px 59px;
	background-color: var(--color-bgYellow);
}

.p-detail__title {
	font-size: 28px;
	line-height: 1.4;
	text-align: center;
}

.p-detail__tabs {
	inline-size: calc(100% - 30px);
	margin: 24px auto 0;
}

.p-detail__tablist {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.p-detail__tab {
	position: relative;
	inline-size: 160px;
	block-size: 56px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-green);
	cursor: pointer;
	background-color: var(--color-white);
	border: 1px solid transparent;
	border-block-end: 0;
	border-radius: 10px 10px 0 0;
}

.p-detail__tab[aria-selected="true"] {
	border-color: var(--color-greenPrimary);
	filter: drop-shadow(0 0 5px rgb(0 0 0 / .05));
}

/* 選択されていないタブはグレーを重ねる */
.p-detail__tab[aria-selected="false"]::after {
	position: absolute;
	inset: -1px -1px 0;
	content: "";
	background-color: rgb(220 220 220 / .8);
	border-radius: inherit;
	transition: opacity .2s;
}

@media (any-hover: hover) {
	.p-detail__tab[aria-selected="false"]:hover::after {
		opacity: .6;
	}
}

.p-detail__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 12px 32px;
	background-color: var(--color-white);
	border-block-start: 8px solid var(--color-green);
}

.p-detail__panel[hidden] {
	display: none;
}

/* タブを切り替えた時だけ、表示したパネルの中身をふわっと出す（枠は動かさない） */
.p-detail__panel.is-switched > * {
	animation: tab-in .4s ease backwards;
}

@keyframes tab-in {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-detail__panel.is-switched > * {
		animation: none;
	}
}

/* 校舎名 ─ 公開授業 ─ */
.p-detail__name {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 32px;
	line-height: normal;
	color: var(--color-green);
}

.p-detail__name span {
	display: flex;
	gap: 4px;
	align-items: center;
	font-size: 16px;
	color: var(--color-black);
}

.p-detail__name span::before,
.p-detail__name span::after {
	inline-size: 24px;
	block-size: 2px;
	content: "";
	background-color: var(--color-greenSecondary);
}

/* 各ブロック */
.p-detail__block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.p-detail__block-title {
	inline-size: 100%;
	padding: 6px 24px 8px;
	font-size: 18px;
	line-height: 1;
	color: var(--color-blackPrimary);
	text-align: center;
	background-color: var(--color-bgGreen);
}

/* 時間割 */
.p-detail__timetable {
	--cell-w: 104.896px;
	--cell-h: 28.16px;
	--cell-b: .704px;
	table-layout: fixed;
	border-spacing: 0;
	border-collapse: separate;
}

.p-detail__timetable th,
.p-detail__timetable td {
	inline-size: var(--cell-w);
	block-size: var(--cell-h);
	padding: 0;
	font-size: 14.08px;
	font-weight: 500;
	line-height: normal;
	color: var(--color-black);
	text-align: center;
	white-space: nowrap;
	background-color: var(--color-white);
	border: var(--cell-b) solid var(--color-gray);
}

.p-detail__timetable thead th {
	color: var(--color-white);
	border-color: var(--color-white);
}

.p-detail__timetable thead th:first-child {
	font-size: 12.672px;
	color: #231815;
}

.p-detail__timetable .--grade1 {
	background-color: var(--color-grade1);
}

.p-detail__timetable .--grade2 {
	background-color: var(--color-grade2);
}

.p-detail__timetable tbody th {
	font-family: var(--font-en);
	font-weight: 400;
	color: #231815;
}

/* 定義リスト（受講料・授業内容・校舎案内） */
.p-detail__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	inline-size: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 19px; /* Figma は 1.2(19.2px)を 19px に丸めている */
}

.p-detail__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.p-detail__row + .p-detail__row {
	padding-block-start: 7px; /* 線(1px)込みでカンプの間隔 8px */
	border-block-start: 1px solid var(--color-green);
}

.p-detail__row dt {
	color: var(--color-green);
	white-space: nowrap;
}

.p-detail__row dd {
	color: var(--color-blackPrimary);
}

.p-detail__list.--fee dd,
.p-detail__list.--campus dd {
	text-align: center;
}

.p-detail__list.--content .p-detail__row {
	gap: 8px;
}

.p-detail__list.--content dd {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-self: stretch;
}

.p-detail__point {
	margin-block-start: 4px;
	color: var(--color-red);
}

/* 校舎案内 */
.p-detail__campus {
	display: flex;
	flex-direction: column;
	gap: 16px;
	inline-size: 100%;
}

.p-detail__list.--campus .p-detail__row {
	gap: 8px;
}

.p-detail__photo {
	order: -1;
	inline-size: 100%;
	block-size: 180px;
	object-fit: cover;
}

.p-detail__map {
	display: block;
	inline-size: 100%;
	block-size: 240px;
	border: 0;
}

@media (width >=768px) {
	.p-detail {
		padding-block: 120px;
	}

	.p-detail__title {
		font-size: 56px;
		line-height: normal;
	}

	.p-detail__tabs {
		inline-size: min(880px, 100% - 40px);
		margin-block-start: 56px;
	}

	.p-detail__tablist {
		gap: 24px;
	}

	.p-detail__tab {
		inline-size: 240px;
		block-size: 64px;
	}

	.p-detail__tab[aria-selected="true"] {
		filter: none;
	}

	.p-detail__panel {
		padding: 40px 40px 48px;
	}

	.p-detail__name {
		flex-direction: row;
		gap: 16px;
	}

	.p-detail__name span {
		font-size: 20px;
	}

	.p-detail__timetable {
		--cell-w: 149px;
		--cell-h: 40px;
		--cell-b: 1px;
	}

	.p-detail__timetable th,
	.p-detail__timetable td {
		font-size: 20px;
	}

	.p-detail__timetable thead th:first-child {
		font-size: 18px;
	}

	.p-detail__list {
		gap: 16px;
	}

	.p-detail__row,
	.p-detail__list.--content .p-detail__row,
	.p-detail__list.--campus .p-detail__row {
		flex-direction: row;
		gap: 24px;
		align-items: center;
	}

	.p-detail__row + .p-detail__row {
		padding-block-start: 15px; /* 線(1px)込みでカンプの間隔 16px */
	}

	/* 中身はカンプの枠(受講料 320px／授業内容 640px)の左端に揃え、線はカード幅いっぱい */
	.p-detail__list.--fee .p-detail__row {
		padding-inline-start: max(0px, (100% - 320px) / 2 + 24px);
	}

	.p-detail__list.--content .p-detail__row {
		align-items: flex-start;
		padding-inline-start: max(0px, (100% - 640px) / 2);
	}

	.p-detail__list.--fee dt {
		inline-size: 48px;
	}

	.p-detail__list.--fee dd,
	.p-detail__list.--campus dd {
		text-align: start;
	}

	.p-detail__list.--content dd {
		align-self: auto;
	}

	.p-detail__campus {
		flex-direction: row;
		gap: 24px;
		justify-content: space-between;
	}

	.p-detail__list.--campus {
		flex: 0 1 420px;
	}

	.p-detail__list.--campus .p-detail__row {
		align-items: flex-start;
		padding-inline: 24px;
	}

	.p-detail__list.--campus dt {
		flex-shrink: 0;
		inline-size: 64px;
	}

	.p-detail__photo {
		flex: 0 0 320px;
		order: 0;
		inline-size: 320px;
	}

	.p-detail__map {
		block-size: 320px;
		margin-block-start: 8px;
	}
}

/* ===============================================
  p-about（明倫ってどんな塾？）
  SP 390px / PC 920px を基準に --u で縮小（PC は 1px で最大）
================================================== */
.p-about {
	overflow: hidden;
	container-type: inline-size;
	color: var(--color-white);
	background-color: var(--color-red);
}

.p-about__inner {
	--u: calc(100cqi / 390);
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: calc(390 * var(--u));
	padding-block: calc(80 * var(--u));
	margin-inline: auto;
}

/* 見出し：筆の帯＋「明倫ゼミナール」は画像、続きはテキスト */
.p-about__title {
	position: relative;
	inline-size: calc(390 * var(--u));
	block-size: calc(109 * var(--u));
	font-family: var(--font-en);
	font-size: calc(32 * var(--u));
	line-height: 1.4;
	text-align: center;
}

.p-about__title img {
	position: absolute;
	inset-block-start: calc(1 * var(--u));
	inset-inline-start: 0;
	inline-size: calc(390 * var(--u));
	max-inline-size: none;
}

.p-about__title span {
	position: absolute;
	inset-block-start: calc(51 * var(--u));
	inset-inline: 0;
}

/* 導入 */
.p-about__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	block-size: calc(597 * var(--u));
	margin-block-start: calc(24 * var(--u));
}

.p-about__intro-lead {
	font-size: calc(28 * var(--u));
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
}

.p-about__formula {
	display: flex;
	flex-direction: column;
	gap: calc(38 * var(--u));
	align-items: center;
	padding: 0;
	margin-block-start: calc(22 * var(--u));
	list-style: none;
}

/* 「＋」と「＝」は線で描く */
.p-about__formula-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	align-items: center;
	inline-size: calc(340 * var(--u));
	padding: calc(16 * var(--u)) calc(32 * var(--u));
	color: var(--color-green);
	background-color: var(--color-white);
	border: calc(1 * var(--u)) solid var(--color-greenSecondary);
	border-radius: calc(4 * var(--u));
}

.p-about__formula-item::after {
	position: absolute;
	inset-block-start: calc(100% + calc(5.5 * var(--u)));
	inset-inline-start: 50%;
	inline-size: calc(27 * var(--u));
	block-size: calc(27 * var(--u));
	content: "";
	background:
		linear-gradient(var(--color-white), var(--color-white)) center / calc(3 * var(--u)) 100% no-repeat,
		linear-gradient(var(--color-white), var(--color-white)) center / 100% calc(3 * var(--u)) no-repeat;
	translate: -50% 0;
}

.p-about__formula-item + .p-about__formula-item::after {
	inline-size: calc(19 * var(--u));
	background:
		linear-gradient(var(--color-white), var(--color-white)) left / calc(3 * var(--u)) 100% no-repeat,
		linear-gradient(var(--color-white), var(--color-white)) right / calc(3 * var(--u)) 100% no-repeat;
}

.p-about__formula-name {
	display: flex;
	gap: calc(16 * var(--u));
	align-items: center;
	font-size: calc(24 * var(--u));
	line-height: 1.5;
	white-space: nowrap;
}

.p-about__num {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	inline-size: calc(38 * var(--u));
	block-size: calc(38 * var(--u));
	padding-block-end: calc(1 * var(--u));
	font-family: "Barlow Condensed", var(--font-en);
	font-size: calc(24 * var(--u));
	font-weight: 600;
	line-height: 1;
	color: var(--color-white);
	background-color: var(--color-greenSecondary);
	border-radius: 50%;
}

.p-about__pill {
	padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(11 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: 1;
	color: var(--color-white);
	white-space: nowrap;
	background-color: var(--color-red);
	border-radius: calc(80 * var(--u));
}

.p-about__result {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--u));
	align-items: center;
	block-size: calc(173 * var(--u)); /* カンプの枠の高さ（中身は少しはみ出す） */
	margin-block-start: calc(37 * var(--u));
}

.p-about__result-lead {
	font-size: calc(24 * var(--u));
	line-height: 1;
}

.p-about__result-main {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	align-items: center;
	font-size: calc(32 * var(--u));
	line-height: normal;
}

.p-about__tiles {
	display: flex;
}

.p-about__tiles span {
	inline-size: calc(90 * var(--u));
	padding: calc(6 * var(--u)) 0 calc(12 * var(--u));
	font-size: calc(68 * var(--u));
	line-height: 1;
	text-align: center;
	background-color: var(--color-greenSecondary);
}

.p-about__tiles span:nth-child(2) {
	background-color: #32B23D;
}

/* カード */
.p-about__cards {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
	inline-size: calc(342 * var(--u));
	margin-block-start: calc(32 * var(--u));
}

.p-about__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: calc(32 * var(--u)) calc(10 * var(--u));
	color: var(--color-blackPrimary);
	background-color: var(--color-white);
	border: calc(1 * var(--u)) solid var(--color-greenSecondary);
	border-radius: calc(10 * var(--u));
}

.p-about__card.--1 {
	block-size: calc(670 * var(--u));
}

.p-about__card.--2 {
	padding-inline: calc(12 * var(--u));
}

.p-about__card-title {
	display: flex;
	gap: calc(16 * var(--u));
	align-items: center;
	font-size: calc(28 * var(--u));
	line-height: 1.4;
	color: var(--color-green);
	white-space: nowrap;
}

.p-about__card-title .p-about__num {
	inline-size: calc(37.2 * var(--u));
	block-size: calc(37.2 * var(--u));
	font-size: calc(22.33 * var(--u));
}

.p-about__card-lead {
	align-self: stretch;
	margin-block-start: calc(24 * var(--u));
	font-size: calc(18 * var(--u));
	line-height: 1.6;
}

.p-about__card-lead em {
	font-style: normal;
	color: #EB2529;
}

.p-about__card-text {
	align-self: stretch;
	margin-block-start: calc(8 * var(--u));
	font-size: calc(16 * var(--u));
	font-weight: 500;
	line-height: 1.6;
}

.p-about__card-text strong {
	font-size: calc(18 * var(--u));
	font-weight: 700;
}

.p-about__pill.--card {
	margin-block-start: calc(8 * var(--u));
}

.p-about__card-photo {
	inline-size: calc(322 * var(--u));
	max-inline-size: none;
	margin-block-start: calc(24 * var(--u));
}

/* ノート指導の図 */
.p-about__note {
	position: relative;
	inline-size: calc(308 * var(--u));
	block-size: calc(604 * var(--u));
	margin-block-start: calc(24 * var(--u));
	background-color: #F6F6F6;
	border-radius: calc(16 * var(--u));
}

.p-about__note-step {
	position: absolute;
	inset-block-start: calc(59 * var(--u));
	inset-inline-start: calc(34 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: calc(240 * var(--u));
}

.p-about__note-cloud {
	position: absolute;
	inset-block-start: calc(-35 * var(--u));
	inset-inline-start: calc(1 * var(--u));
	inline-size: calc(239 * var(--u));
	max-inline-size: none;
}

.p-about__note-step > :not(.p-about__note-cloud) {
	position: relative;
}

.p-about__note-question {
	margin-block: calc(-4 * var(--u));
	font-size: calc(18 * var(--u));
	line-height: calc(30 * var(--u));
	color: var(--color-black);
	text-align: center;
}

.p-about__note-down {
	inline-size: calc(28 * var(--u));
	margin-block-start: calc(16 * var(--u));
}

/* 文字の下半分に黄色のマーカー */
.p-about__note-answer {
	inline-size: calc(240 * var(--u));
	margin-block-start: calc(12 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: calc(29 * var(--u));
	color: var(--color-red);
	white-space: nowrap;
	background: linear-gradient(transparent calc(19 * var(--u)), #F7FFC7 0 calc(34 * var(--u)), transparent 0);
}

.p-about__pill.--note {
	margin-block-start: calc(12 * var(--u));
}

/* だから（枠＝逆三角形の大きさ。素材を背景に敷き、上のカードの下に積む） */
.p-about__dakara {
	inline-size: calc(175.8 * var(--u));
	block-size: calc(47.62 * var(--u));
	padding-block-start: calc(1.76 * var(--u));
	font-size: calc(20 * var(--u));
	line-height: 1.4;
	text-align: center;
	background: url(../img/about/dakara.svg) center / 100% 100% no-repeat;
}

.p-about__conclusion {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--u));
	align-items: center;
	margin-block-start: calc(16 * var(--u));
	text-align: center;
	white-space: nowrap;
}

.p-about__conclusion-lead {
	font-size: calc(20 * var(--u));
	line-height: 1.4;
}

.p-about__conclusion-main {
	font-size: calc(28 * var(--u));
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .1em;
}

.p-about__conclusion-main em {
	font-style: normal;
	color: var(--color-yellow);
}

@media (width >=768px) {
	.p-about__inner {
		--u: min(100cqi / 920, 1px);
		inline-size: calc(880 * var(--u));
		padding-block: calc(120 * var(--u)) calc(127 * var(--u));
	}

	.p-about__title {
		inline-size: calc(880 * var(--u));
		block-size: calc(202 * var(--u));
		font-size: calc(56 * var(--u));
	}

	.p-about__title img {
		inset-block-start: calc(18 * var(--u));
		inset-inline-start: calc(26 * var(--u));
		inline-size: calc(828 * var(--u));
	}

	.p-about__title span {
		inset-block-start: calc(107 * var(--u));
		inset-inline: calc(158.9 * var(--u)) auto;
		inline-size: calc(520 * var(--u));
	}

	.p-about__intro {
		inline-size: calc(496 * var(--u));
		block-size: calc(465 * var(--u));
		margin-block-start: calc(31 * var(--u));
	}

	.p-about__intro-lead {
		font-size: calc(40 * var(--u));
		line-height: normal;
	}

	.p-about__formula {
		gap: calc(43 * var(--u));
		margin-block-start: calc(32 * var(--u));
	}

	.p-about__formula-item {
		flex-direction: row;
		justify-content: space-between;
		inline-size: calc(486 * var(--u));
		color: var(--color-greenPrimary);
		border: 0;
	}

	.p-about__formula-name {
		gap: calc(8 * var(--u));
		line-height: normal;
	}

	.p-about__formula-item .p-about__num {
		inline-size: calc(40 * var(--u));
		block-size: calc(40 * var(--u));
		margin-inline-end: calc(1 * var(--u));
		font-family: var(--font-en);
		font-weight: 700;
	}

	.p-about__result {
		block-size: auto;
		margin-block-start: calc(51 * var(--u));
	}

	.p-about__formula-item::after {
		inset-block-start: calc(100% + calc(8 * var(--u)));
	}

	.p-about__result-main {
		flex-direction: row;
		gap: calc(4 * var(--u));
		font-size: calc(40 * var(--u));
	}

	.p-about__cards {
		gap: calc(48 * var(--u));
		inline-size: calc(880 * var(--u));
		margin-block-start: calc(40 * var(--u));
	}

	.p-about__card {
		padding: calc(56 * var(--u)) calc(80 * var(--u));
		border: 0;
		border-radius: calc(16 * var(--u));
		filter: drop-shadow(0 0 calc(10 * var(--u)) rgb(0 0 0 / .4));
	}

	.p-about__card.--1 {
		block-size: calc(734 * var(--u));
	}

	.p-about__card.--2 {
		block-size: calc(651 * var(--u));
		padding: calc(64 * var(--u)) calc(80 * var(--u)) 0 calc(76 * var(--u));
	}

	.p-about__card-title {
		gap: calc(8 * var(--u));
		font-size: calc(40 * var(--u));
		line-height: normal;
		color: var(--color-greenPrimary);
	}

	.p-about__card-title .p-about__num {
		inline-size: calc(54.63 * var(--u));
		block-size: calc(54.63 * var(--u));
		margin: calc(2.05 * var(--u)) calc(1.37 * var(--u));
		font-size: calc(32.78 * var(--u));
	}

	.p-about__card-lead {
		margin-block-start: calc(24 * var(--u));
		text-align: center;
	}

	.p-about__card.--2 .p-about__card-lead {
		margin-block-start: calc(16 * var(--u));
	}

	.p-about__card-text {
		margin-block-start: calc(16 * var(--u));
		text-align: center;
	}

	.p-about__card.--2 .p-about__card-text {
		margin-block-start: calc(8 * var(--u));
	}

	.p-about__card-text strong {
		font-size: calc(20 * var(--u));
	}

	.p-about__pill.--card {
		margin-block-start: calc(16 * var(--u));
		background-color: #E94343;
	}

	.p-about__card-photo {
		inline-size: calc(560 * var(--u));
		margin-block-start: calc(40 * var(--u));
	}

	/* PC の図はカード基準の絶対配置 */
	.p-about__note {
		position: static;
		margin: 0;
		background: none;
	}

	.p-about__note::before {
		position: absolute;
		inset-block-start: calc(271 * var(--u));
		inset-inline-start: calc(51 * var(--u));
		inline-size: calc(800 * var(--u));
		block-size: calc(299 * var(--u));
		content: "";
		background-color: #F6F6F6;
		border-radius: calc(16 * var(--u));
	}

	.p-about__note-step {
		inset-block-start: calc(337 * var(--u));
		inset-inline-start: calc(123 * var(--u));
	}

	.p-about__pill.--note {
		background-color: #E94343;
	}

	.p-about__dakara {
		inline-size: calc(351.6 * var(--u));
		block-size: calc(95.25 * var(--u));
		padding-block-start: calc(4.25 * var(--u));
		font-size: calc(40 * var(--u));
	}

	.p-about__conclusion {
		margin-block-start: calc(32 * var(--u));
	}

	.p-about__conclusion-lead {
		font-size: calc(28 * var(--u));
	}

	.p-about__conclusion-main {
		font-size: calc(40 * var(--u));
	}
}

/* ===============================================
  p-foundation（受験に向けた土台）
================================================== */
.p-foundation {
	container-type: inline-size;
	background-color: var(--color-green);
}

.p-foundation__text {
	--u: calc(100cqi / 390);
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--u));
	align-items: center;
	justify-content: center;
	block-size: calc(328 * var(--u));
	color: var(--color-white);
	text-align: center;
	white-space: nowrap;
}

.p-foundation__lead {
	font-size: calc(24 * var(--u));
	line-height: 1.4;
}

.p-foundation__box {
	padding-inline: calc(8 * var(--u));
	font-size: calc(32 * var(--u));
	line-height: 1.4;
	color: var(--color-red);
	background-color: var(--color-white);
}

.p-foundation__main {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--u));
	align-items: center;
	font-size: calc(32 * var(--u));
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: .1em;
}

.p-foundation__main em {
	font-size: calc(40 * var(--u));
	font-style: normal;
	color: var(--color-yellow);
}

@media (width >=768px) {
	.p-foundation__text {
		--u: min(100cqi / 920, 1px);
		block-size: calc(423 * var(--u));
	}

	.p-foundation__lead {
		font-size: calc(48 * var(--u));
	}

	.p-foundation__box {
		font-size: calc(64 * var(--u));
	}

	.p-foundation__main {
		flex-direction: row;
		font-size: calc(48 * var(--u));
	}

	.p-foundation__main em {
		font-size: calc(64 * var(--u));
	}
}

/* ===============================================
  c-note-figure（ノート＋吹き出し＋鉛筆）
  PC の座標(387×375)を --k 倍で配置。SP は --k を小さくして同じ部品を使う
================================================== */
.c-note-figure {
	--k: var(--u, 1px);
	position: relative;
	inline-size: calc(387 * var(--k));
	block-size: calc(375 * var(--k));
	margin: 0;
}

.c-note-figure > *,
.c-note-figure figcaption > * {
	position: absolute;
	max-inline-size: none;
}

.c-note-figure__sheet {
	inset-block-start: calc(97 * var(--k));
	inset-inline-start: 0;
	inline-size: calc(345 * var(--k));
}

.c-note-figure__bubble {
	font-size: calc(16 * var(--k));
	line-height: normal;
	color: var(--color-white);
	white-space: nowrap;
	background: center / 100% 100% no-repeat;
}

.c-note-figure__bubble.--blue {
	inset-block-start: 0;
	inset-inline-start: calc(148 * var(--k));
	inline-size: calc(198 * var(--k));
	block-size: calc(131 * var(--k));
	padding: calc(35 * var(--k)) calc(13 * var(--k)) 0 calc(17 * var(--k));
	text-align: center;
	background-image: url(../img/about/bubble-blue.svg);
}

.c-note-figure__bubble.--green {
	inset-block-start: calc(262 * var(--k));
	inset-inline-start: calc(157 * var(--k));
	inline-size: calc(176 * var(--k));
	block-size: calc(113 * var(--k));
	padding: calc(41 * var(--k)) 0 0 calc(31.98 * var(--k)); /* 見た目の位置に合わせて実測 */
	background-image: url(../img/about/bubble-green.svg);
}

.c-note-figure__pencil {
	z-index: 1; /* figcaption より前に置いているので、吹き出しの上に出す */
	inset-block-start: calc(113 * var(--k));
	inset-inline-start: calc(330 * var(--k));
	inline-size: calc(57 * var(--k));
}

/* 配置（SP はカンプの縮尺 0.8385 倍。鉛筆だけ SP カンプの位置に置き直す） */
.p-about__note-sample {
	--k: calc(var(--u) * .8385);
	position: absolute;
	inset-block-start: calc(265 * var(--u));
	inset-inline-start: calc(9 * var(--u));
}

.p-about__note-sample .c-note-figure__pencil {
	inset-block-start: calc(102.88 * var(--u));
	inset-inline-start: calc(255 * var(--u));
	inline-size: calc(46 * var(--u));
}

@media (width >=768px) {
	.p-about__note-sample {
		--k: var(--u);
		inset-block-start: calc(251 * var(--u));
		inset-inline-start: calc(425 * var(--u));
	}

	.p-about__note-sample .c-note-figure__pencil {
		inset-block-start: calc(113 * var(--k));
		inset-inline-start: calc(330 * var(--k));
		inline-size: calc(57 * var(--k));
	}
}

/* ===============================================
  p-cta-change（CTA：ここから変える）
  SP 390px / PC 1440px の座標を --u で配置（PC は 1400px を下回ったら縮小）
  写真は js-bounce で下から跳ねて出現。跳ねた時に下が空かないよう、
  写真は体の下側まで含めて書き出し、はみ出た分はセクションで隠す
================================================== */
.p-cta-change {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	background: var(--color-yellow) url(../img/cta/bg-change-sp.webp) center top / 100% auto no-repeat;
}

.p-cta-change__inner {
	--u: calc(100cqi / 390);
	position: relative;
	inline-size: calc(390 * var(--u));
	block-size: calc(554 * var(--u));
	margin-inline: auto;
}

.p-cta-change__inner > :not(picture),
.p-cta-change__photo {
	position: absolute;
	max-inline-size: none;
}

.p-cta-change__photo.--takaba {
	inset-block-start: calc(227 * var(--u));
	inset-inline-start: calc(-47 * var(--u));
	inline-size: calc(227 * var(--u));
	clip-path: polygon(
		calc(55 * var(--u)) calc(14 * var(--u)),
		calc(225 * var(--u)) calc(14 * var(--u)),
		calc(225 * var(--u)) 100%,
		0 100%,
		0 calc(34 * var(--u)),
		calc(47 * var(--u)) calc(34 * var(--u))
	);
}

.p-cta-change__photo.--itou {
	inset-block-start: calc(251 * var(--u));
	inset-inline-start: calc(223 * var(--u));
	inline-size: calc(152 * var(--u));
}

.p-cta-change__title {
	inset-block-start: calc(32 * var(--u));
	inset-inline-start: calc(8 * var(--u));
	inline-size: calc(373.6 * var(--u));
}

.p-cta-change__title img {
	inline-size: 100%;
}

/* SP は縦書き 2 行（Figma は 1 文字ずつ折り返した行送りで、右列 28px・左列 26px 送り） */
/* 縦書きでは論理方向が 90° 回るので、cqi ではなく cqw で --u を取り直し、位置も物理プロパティで指定 */
.p-cta-change__lead {
	--u: calc(100cqw / 390);
	top: calc(244 * var(--u));
	left: calc(166.5 * var(--u));
	font-size: calc(20 * var(--u));
	line-height: 1.4;
	white-space: nowrap;
	writing-mode: vertical-rl;
}

.p-cta-change__lead > span {
	display: block;
}

/* 縦書き時の字面のずれを実測で補正 */
.p-cta-change__lead > span:first-child {
	padding-top: calc(5 * var(--u));
	letter-spacing: .4em;
}

.p-cta-change__lead > span:last-child {
	padding-top: calc(4 * var(--u));
	font-weight: 900;
	letter-spacing: .3em;
}

.p-cta-change__lead em {
	font-style: normal;
	color: var(--color-red);
}

.p-cta-change__button {
	inset-block-start: calc(442 * var(--u));
	inset-inline-start: calc(15 * var(--u));
}

@media (width >=768px) {
	.p-cta-change {
		background-image: url(../img/cta/bg-change.webp);
		background-size: max(100%, min(1440px, 100vw * 1440 / 1400)) auto;
	}

	/* 1440px の座標系を中央に置き、狭い画面では左右をはみ出させる */
	.p-cta-change__inner {
		--u: min(100cqi / 1400, 1px);
		inline-size: calc(1440 * var(--u));
		block-size: calc(535 * var(--u));
		margin-inline: calc((100cqi - 1440 * var(--u)) / 2);
	}

	.p-cta-change__photo.--takaba {
		clip-path: none;
		inset-block-start: calc(124 * var(--u));
		inset-inline-start: calc(18 * var(--u));
		inline-size: calc(395 * var(--u));
	}

	.p-cta-change__photo.--itou {
		inset-block-start: calc(163 * var(--u));
		inset-inline-start: calc(1095 * var(--u));
		inline-size: calc(268 * var(--u));
	}

	.p-cta-change__title {
		inset-block-start: calc(61 * var(--u));
		inset-inline-start: calc(338 * var(--u));
		inline-size: calc(830.28 * var(--u));
	}

	.p-cta-change__lead {
		--u: min(100cqw / 1400, 1px);
		top: calc(264 * var(--u));
		right: 0;
		left: 0;
		font-size: calc(40 * var(--u));
		font-weight: 900;
		letter-spacing: calc(6 * var(--u));
		text-align: center;
		text-indent: calc(6 * var(--u)); /* 末尾の字間の分、中央からずれるのを打ち消す */
		writing-mode: horizontal-tb;
	}

	.p-cta-change__lead > span {
		display: inline;
	}

	.p-cta-change__lead > span:first-child,
	.p-cta-change__lead > span:last-child {
		padding-top: 0;
		letter-spacing: inherit;
	}

	.p-cta-change__button {
		inset-block-start: calc(368 * var(--u));
		inset-inline-start: calc(345 * var(--u));
	}
}