/**************************/
/* loading */
/**************************/
.pageLoader {
	display: grid;
	place-items: center;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: var(--base1);
	pointer-events: none;
	animation: loaderFadeOut .01s 3s forwards;
}
.pageLoader-logo { position: relative; width: 235px; height: 93px; }
.pageLoader-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pageLoader-logoBlack { filter: brightness(0); }
.pageLoader-logoWhite { position: absolute; inset: 0; clip-path: inset(100% 0 0); }
.pageLoader-logoWhite img { filter: brightness(0) invert(1); }
.pageLoader.isActive .pageLoader-logoWhite { animation: loaderLogoFill 1.2s ease-in-out forwards; }
.pageLoader.isActive { animation: loaderFadeOut .45s ease 1.35s forwards; }
.pageLoader.isSkipped, .pageLoader.isFinished { display: none; }
@keyframes loaderLogoFill {
	to { clip-path: inset(0); }
}
@keyframes loaderFadeOut {
	to { opacity: 0; visibility: hidden; }
}
@media (max-width: 780px) {
	.pageLoader-logo { width: 188px; height: auto; aspect-ratio: 235 / 93; }
}
@media (prefers-reduced-motion: reduce) {
	.pageLoader.isActive .pageLoader-logoWhite { animation-duration: .01s; }
	.pageLoader.isActive { animation-delay: .05s; animation-duration: .01s; }
}

/**************************/
/* header / hero */
/**************************/
.siteHeader {
	position: relative;
	z-index: 10;
	height: 40px;
	background: var(--base1);
	color: var(--base2);
}
.headerInner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: 20px;
}
.headerTag {
	flex-shrink: 0;
	font-weight: inherit;
	font-size: clamp(10px, calc(.506vw + 8.184px), 14px);
}
.globalNav {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 14px;
}
.globalNav a {
	white-space: nowrap;
}
.globalNav a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.navContact {
	padding: 0 5px;
	border-radius: 3px;
	background: var(--colorWhite);
	color: var(--colorBlack);
}
@media (min-width: 781px) {
	.globalNav a {
		color: var(--colorWhite);
		transition: color .4s ease, background-color .4s ease;
	}
	.globalNav a:hover {
		color: var(--base3);
		text-decoration: none;
	}
	.globalNav .navContact {
		color: var(--base1);
	}
	.globalNav .navContact:hover {
		background-color: var(--base3);
		color: var(--base1);
	}
}
.menuButton {
	display: none;
}
.homeHero {
	position: relative;
	overflow: hidden;
	margin-top: -40px;
	background: var(--base1);
	color: var(--colorWhite);
}
.heroPhoto {
	position: absolute;
	inset: 0 auto 0 50%;
	width: min(100%, 1500px);
	transform: translateX(-50%);
}
.heroPhoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.homeHero.isPreparing .heroPhoto img {
	opacity: .45;
	transform: scale(1.035);
	transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.22, 1, .36, 1);
}
.homeHero.isPreparing.isHeroReady .heroPhoto img { opacity: 1; transform: scale(1); }
.homeHero.isPreparing .heroLogo,
.homeHero.isPreparing .station,
.homeHero.isPreparing h1,
.homeHero.isPreparing .heroTitle,
.homeHero.isPreparing .heroLead,
.homeHero.isPreparing .heroRecord,
.homeHero.isPreparing .heroNote {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.homeHero.isPreparing.isHeroReady .heroLogo,
.homeHero.isPreparing.isHeroReady .station,
.homeHero.isPreparing.isHeroReady h1,
.homeHero.isPreparing.isHeroReady .heroTitle,
.homeHero.isPreparing.isHeroReady .heroLead,
.homeHero.isPreparing.isHeroReady .heroRecord,
.homeHero.isPreparing.isHeroReady .heroNote { opacity: 1; transform: translateY(0); }
.homeHero.isPreparing .heroLogo { transition-delay: .05s; }
.homeHero.isPreparing .station { transition-delay: .12s; }
.homeHero.isPreparing h1,
.homeHero.isPreparing .heroTitle { transition-delay: .18s; }
.homeHero.isPreparing .heroLead { transition-delay: .28s; }
.homeHero.isPreparing .heroRecord { transition-delay: .38s; }
.homeHero.isPreparing .heroNote { transition-delay: .46s; }
.homeHero::after {
	content: "";
	position: absolute;
	inset: 0 42% 0 0;
	background: linear-gradient(89deg, var(--colorHeroShade) 2%, transparent 98%);
}
.heroInner {
	position: relative;
	z-index: 1;
	min-height: 727px;
	padding: 50px 10px 55px;
}
.heroLogo {
	display: block;
	width: 196px;
	margin-left: -10px;
}
.heroLogo img {
	width: 100%;
	height: auto;
}
.station {
	position: absolute;
	right: 0;
	top: 65px;
	padding: 3px 5px;
	border: 1px solid var(--base2);
	border-radius: 2px;
	background: var(--base1);
}
.station small {
	font-size: 14px;
}
.homeHero h1,
.homeHero .heroTitle {
	margin-top: 40px;
	font-family: var(--fontSerif);
	font-weight: var(--LightF);
	font-size: clamp(28px, max(min(8.72vw, 40px), calc(7.692vw - 20px)), 80px);
	line-height: 1.25;
	text-shadow: 1px 1px 2px var(--base1);
}
.homeHero h1 em,
.homeHero .heroTitle em {
	color: var(--base3);
}
.heroLead {
	margin-top: 15px;
	font-family: var(--fontSerif);
	font-size: clamp(16px, calc(2.162vw - .865px), 24px);
	line-height: 42px;
	font-weight: var(--RegularF);
}
.heroRecord {
	position: absolute;
	right: 20px;
	top: 478px;
	width: 255px;
	padding: 0 10px;
	border: 3px solid var(--base3);
	border-radius: 5px;
	background: var(--goldGradient);
	color: var(--base1);
	font-family: var(--fontSerif);
	font-size: clamp(14px, calc(2.342vw - .935px), 26px);
	font-weight: var(--SemiBoldF);
	text-align: center;
}
.heroRecord p {
	line-height: 63px;
	white-space: nowrap;
	letter-spacing: clamp(.01em, calc(.1em - .18vw), .05em);
}
.heroRecord p + p {
	border-top: 1px solid var(--base1);
}
.heroRecord p:last-child {
	line-height: 50px;
}
.heroRecord strong {
	font-size: clamp(22px, calc(3.604vw - 1.444px), 40px);
	font-weight: var(--SemiBoldF);
}
.heroNote {
	max-width: 760px;
	margin-top: 105px;
	font-size: clamp(13px, calc(.811vw + 6.676px), 16px);
	line-height: 30px;
	text-shadow: 0 0 4px var(--colorBlack);
}
/* PCとSPの中間幅ではナビの文字と間隔を縮め、横一列を維持する。 */
@media (min-width: 781px) and (max-width: 1150px) {
	.headerInner { gap: clamp(5px, calc(4.065vw - 26.748px), 20px); }
	.headerTag { font-size: clamp(9px, calc(1.355vw - 1.583px), 14px); }
	.globalNav {
		gap: clamp(4px, calc(4.336vw - 29.865px), 20px);
		font-size: clamp(9px, calc(1.355vw - 1.583px), 14px);
	}
	.navContact { padding-inline: clamp(3px, .435vw, 5px); }
	.heroNote { max-width: calc(100% - 270px); margin-top: 60px; }
}
/* 780px以下では全画面メニューに切り替える。 */
@media (max-width: 780px) {
	body.menuOpen { overflow: hidden; }
	.menuButton {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 22;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 7px;
		background: var(--base1);
		color: var(--colorWhite);
	}
	.menuButton span {
		display: block;
		width: 100%;
		height: 2px;
		background: currentColor;
		transition: transform .2s, opacity .2s;
	}
	.menuButton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.menuButton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.menuButton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.globalNav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		position: fixed;
		inset: 0;
		z-index: 21;
		width: 100%;
		padding: 70px max(30px, calc((100vw - 600px) / 2));
		background: color-mix(in srgb, var(--base1) 80%, transparent);
		backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .4s ease, visibility .55s;
		pointer-events: none;
	}
	.globalNav.isOpen {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
		pointer-events: auto;
	}
	.globalNav a {
		padding: 16px 10px;
		border-bottom: 1px solid color-mix(in srgb, var(--colorWhite) 35%, transparent);
		color: var(--colorWhite);
		font-size: clamp(16px, 4vw, 20px);
		line-height: 1.5;
		text-align: center;
		white-space: normal;
	}
	.globalNav a:hover { color: var(--base3); text-decoration: none; }
	.globalNav .navContact {
		margin-top: 0;
		border: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--colorWhite) 35%, transparent);
		border-radius: 0;
		background: transparent;
		color: var(--colorWhite);
	}
	.globalNav .navContact > span { display: none; }
	.globalNav .navContact:hover { background: transparent; color: var(--base3); }
}
/* ヒーローはPC/SPで構成・写真・配置が大きく異なるためまとめて指定。 */
@media (max-width: 780px) {
	.siteHeader { height: 34px; background: transparent; }
	.headerInner { width: calc(100% - 20px); }
	.headerTag { line-height: 24px; }
	.headerTag .spLayer { display: inline; }
	.menuButton { position: fixed; top: 10px; right: 10px; width: 30px; height: 32px; padding: 5px; }
	.globalNav { inset: 0; }
	.homeHero { margin-top: -34px; }
	.heroInner { min-height: 593px; padding: 25px 0 25px; }
	.heroPhoto { bottom: auto; height: 488px; }
	.heroPhoto img { object-fit: cover; }
	.homeHero::after { inset: 405px 0 0; background: linear-gradient(transparent, var(--base1) 60px); }
	.heroInner::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -15px; width: 295px; background: url("../images/overlay-hero-sp.svg") 0 0 / 100% 100% no-repeat; }
	.heroLogo { width: 141px; margin-left: 0; }
	.homeHero h1,
	.homeHero .heroTitle { margin-top: 40px; line-height: 48px; white-space: nowrap; }
	.heroLead { margin-top: 10px; line-height: 26px; }
	.heroRecord { top: 302px; right: 0; width: 170px; padding: 0 5px; border-width: 2px; }
	.heroRecord p { line-height: 42px; }
	.heroRecord p:last-child { line-height: 33px; }
	.heroNote { max-width: none; margin-top: 55px; line-height: 24px; letter-spacing: -.13px; text-align: justify; }
}
@media (max-width: 359px) {
	.heroRecord { width: 145px; }
}

/**************************/
/* reasons */
/**************************/
.reasonBlock {
	padding: 30px 0 60px;
	background: var(--base2);
	@media (max-width: 780px) {
		padding: 20px 0 50px;
	}
}
.reasonList {
	display: flex;
	justify-content: space-between;
	gap: 50px;
	margin-top: 40px;
	@media (max-width: 780px) {
		flex-direction: column;
		gap: 40px;
		margin-top: 30px;
	}
}
.reasonCard {
	position: relative;
	flex: 1;
	min-width: 0;
	@media (max-width: 780px) {
		width: min(100%, 330px);
		margin-inline: auto;
	}
}
.reasonCard + .reasonCard::before {
	content: "";
	position: absolute;
	left: -25px;
	top: 0;
	width: 1px;
	height: 390px;
	background: var(--base3);
	@media (max-width: 780px) {
		display: none;
	}
}
.reasonPhoto {
	position: relative;
}
.reasonPhoto > img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 3px;
	@media (max-width: 780px) {
		height: 150px;
	}
}
.reasonCard-3 .reasonPhoto > img { object-position: right center; }
.reasonNumber {
	position: absolute;
	right: 0;
	bottom: 0;
	color: color-mix(in srgb, var(--colorWhite) 50%, transparent);
	font-family: var(--fontSerif);
	font-size: 60px;
	line-height: 1;
}
.reasonCard h3 {
	margin-top: 15px;
	font-family: var(--fontSerif);
	font-size: var(--fs20to24);
	line-height: 1.6;
	@media (max-width: 780px) {
		margin-top: 5px;
	}
}
.reasonCard > p {
	margin-top: 5px;
	font-size: var(--fs14to16);
	line-height: 26px;
	@media (max-width: 780px) {
		line-height: 22px;
	}
}

/**************************/
/* recommended */
/**************************/
.recommendBlock {
	padding: 55px 0 80px;
	background: var(--base1);
	color: var(--colorWhite);
	@media (max-width: 780px) {
		padding: 30px 0 55px;
	}
}
.recommendBlock > .container > .serifTitle {
	font-size: clamp(24px, calc(1.622vw + 11.351px), 30px);
}
.worryList {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	margin-top: 45px;
	@media (max-width: 1100px) {
		gap: 15px;
	}
}
.worryList li {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	min-height: 208px;
	padding: 15px 5px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--colorWhite) 90%, transparent);
	color: var(--base1);
	text-align: center;
}
.worryIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	max-width: 100%;
	height: 120px;
}
.worryIcon img {
	width: 75px;
	height: 85px;
	object-fit: contain;
}
.worryIcon-2 img, .worryIcon-4 img { width: 120px; height: 120px; }
.worryIcon-5 img { width: 71px; height: 100px; }
.worryList p {
	font-size: var(--fs14to16);
	line-height: 24px;
}
.worryList li:nth-child(2) p { font-size: 14px; }
.supportBlock {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
	margin-top: 95px;
}
.supportBlock h3 {
	order: 1;
	width: calc(100% - 330px);
	margin-left: 330px;
	font-family: var(--fontSerif);
	font-size: clamp(24px, calc(1.622vw + 8.919px), 30px);
	text-align: center;
	font-weight: var(--MediumF);
}
.supportBlock h3::after {
	content: "";
	display: block;
	width: min(446px, 58%);
	height: 3px;
	margin: 8px auto 0;
	background: var(--base3);
}
.supportPhoto {
	order: 2;
	width: 300px;
	height: 443px;
	margin-top: -65px;
	object-fit: cover;
}
.supportCopy {
	order: 3;
	flex: 1;
	min-width: 0;
	font-weight: var(--RegularF);
	text-align: justify;
}
.supportCopy > p:first-child {
	font-size: var(--fs15to20);
	line-height: 40px;
}
.supportPoints {
	margin-top: 10px;
	font-size: clamp(16px, calc(1.622vw + 7.351px), 22px);
	font-weight: var(--BoldF);
}
.supportPoints li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 48px;
}
.supportPoints img {
	flex-shrink: 0;
	width: 33px;
	height: 29px;
	margin-top: 10px;
}
.supportNotice {
	margin-top: 15px;
	padding: 10px;
	background: var(--base3);
	color: var(--base1);
	font-size: var(--fs14to16);
	line-height: 24px;
	text-align: center;
	font-weight: var(--BoldF);
}
/* 対象者カードとサポートの縦積みを一緒に制御。 */
@media (max-width: 780px) {
	.worryList { flex-wrap: wrap; max-width: 335px; margin: 35px auto 0; gap: 15px 18px; }
	.worryList li { flex: 0 0 calc(50% - 9px); min-height: 150px; padding: 5px 0; }
	.worryIcon { width: 120px; height: 100px; }
	.worryIcon img { height: 75px; }
	.worryIcon-2 img, .worryIcon-4 img { width: 120px; height: 100px; }
	.worryIcon-5 img { height: 85px; }
	.worryList p { line-height: 20px; }
	.supportBlock { display: flex; flex-direction: column; gap: 15px; margin-top: 40px; }
	.supportBlock h3 { width: calc(100% + 30px); margin: 0 0 0 -15px; font-size: 24px; }
	.supportBlock h3::after { width: calc(100% - 30px); margin-top: 0; }
	.supportPhoto { width: 100%; height: 250px; margin: 0; }
	.supportCopy { width: 98%; flex: auto; }
	.supportCopy > p:first-child { line-height: 26px; }
	.supportPoints { margin-top: 15px; }
	.supportPoints li { line-height: 35px; gap: 0; }
	.supportPoints li:first-child { line-height: 48px; }
	.supportPoints img { width: 27px; height: 24px; margin-top: 10px; }
	.supportPoints li:not(:first-child) img { margin-top: 5.5px; }
	.supportNotice { width:96%; line-height: 20px; padding: 10px 15px; text-align: left; }
}

/**************************/
/* courses */
/**************************/
.courseBlock {
	padding: 45px 0 65px;
	background: var(--base2);
	@media (max-width: 780px) {
		padding: 25px 0 30px;
	}
}
.courseBlock .serifTitle {
	font-size: clamp(30px, calc(1.622vw + 17.351px), 36px);
}
.courseIntro {
	margin-top: 25px;
	font-family: var(--fontSerif);
	font-size: var(--fs16to18);
	text-align: center;
	@media (max-width: 780px) {
		text-align: left;
		line-height: 22px;
	}
}
.courseList {
	display: flex;
	gap: 2px;
	margin-top: 25px;
	background: var(--colorTableLine);
	@media (max-width: 780px) {
		flex-direction: column;
		gap: 50px;
		margin-top: 20px;
		background: transparent;
	}
}
.courseLabels {
	flex: 0 0 193px;
	@media (max-width: 1050px) { flex-basis: 160px; }
	@media (max-width: 780px) { display: none; }
}
.courseLabels span {
	display: block;
	height: 300px;
	overflow: hidden;
}
.courseLabels span img { width: 100%; height: 100%; object-fit: cover; }
.courseLabels p {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
	border-top: 2px solid var(--base2);
	background: var(--base1);
	color: var(--base2);
	font-family: var(--fontSerif);
	font-size: 20px;
}
.courseCard {
	flex: 1;
	min-width: 0;
}
.coursePhoto {
	position: relative;
	height: 300px;
	overflow: hidden;
	@media (max-width: 780px) { height: 200px; }
}
.coursePhoto picture, .coursePhoto img {
	width: 100%;
	height: 100%;
}
.coursePhoto img { object-fit: cover; }
.courseCard-1 .coursePhoto img { object-position: right center; }
.courseCard-2 .coursePhoto img { transform: scale(1.38); object-position: right center; }
.courseCard-3 .coursePhoto img { object-position: 55% center; }
.coursePhoto::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 110px;
	background: linear-gradient(transparent, var(--base1) 58%);
}
.courseCaption {
	display: flex;
	align-items: center;
	position: absolute;
	z-index: 1;
	bottom: 10px;
	left: 0;
	width: 100%;
	color: var(--colorWhite);
	font-family: var(--fontSerif);
}
.courseCaption > strong {
	width: 90px;
	flex-shrink: 0;
	font-size: clamp(40px, calc(2.703vw + 18.919px), 50px);
	color: var(--base3);
	text-align: center;
	line-height: 1.2;
}
.courseCaption h3 {
	padding-left: 10px;
	border-left: 1px solid var(--base2);
	font-size: clamp(16px, calc(1.622vw + 3.351px), 22px);
	font-weight: var(--SemiBoldF);
	line-height: 22px;
}
.courseCaption small {
	display: block;
	font-size: 10px;
	font-weight: var(--LightF);
	color: var(--base2);
}
.courseCard dl > div {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	padding: 10px 5px;
	background: var(--colorWhite);
	font-family: var(--fontSerif);
	font-size: clamp(20px, calc(32.432px - 1.081vw), 24px);
	font-weight: var(--SemiBoldF);
	text-align: center;
}
.courseCard dl > div:nth-child(2) { background: var(--colorTableStripe); }
.courseCard dt { display: none; }
.courseNote {
	margin-top: 10px;
	font-size: 16px;
	line-height: 22px;
	@media (max-width: 780px) { margin-top: 20px; }
}
@media (min-width: 781px) and (max-width: 1100px) {
	.courseCaption > strong { width: 65px; }
}
/* SPでは比較表から、各コースの説明カードへ変更。 */
@media (max-width: 780px) {
	.courseCard-2 .coursePhoto img { transform: none; }
	.courseCard dl > div { display: block; min-height: 80px; padding: 5px 15px 10px; text-align: left; border: 0; border-bottom: 1px solid var(--base1); background: var(--colorWhite); }
	.courseCard dt { display: block; font-size: 14px; line-height: 30px; font-weight: var(--LightF); }
	.courseCard dd { line-height: 30px; }
}

/**************************/
/* results / trainer */
/**************************/
.resultBlock {
	padding: 0;
	background: var(--base2);
}
.resultBlock .container {
	padding-top: 50px;
	border-top: 2px solid var(--base3);
	@media (max-width: 780px) { padding-top: 35px; }
}
.resultBlock .serifTitle { font-weight: var(--MediumF); }
.resultIntro {
	margin: 10px 0 25px;
	font-family: var(--fontSerif);
	font-size: var(--fs16to18);
	text-align: center;
	@media (max-width: 780px) { text-align: left; margin: 15px 0 0; }
}
.resultCarousel { position: relative; }
.resultTrack {
	display: flex;
	justify-content: space-between;
	gap: 35px;
}
.resultCard {
	flex: 0 1 320px;
	min-width: 0;
}
.resultClone { display: none; }
.resultPair {
	display: flex;
	justify-content: space-between;
	position: relative;
	gap: 20px;
}
.resultPair > div { width: calc(50% - 10px); }
.resultPair span {
	display: block;
	height: 24px;
	background: var(--base1);
	color: var(--base2);
	font-size: 14px;
	text-align: center;
	line-height: 24px;
}
.resultPhoto {
	position: relative;
	aspect-ratio: 150 / 268;
	overflow: hidden;
	background: linear-gradient(var(--colorPhotoTop), var(--colorPhotoBottom));
}
.resultPhoto img { position: absolute; max-width: none; }
.resultCard-1 .resultPhoto img { width: 274.48%; height: 154.1%; top: -16.42%; left: -12.72%; }
.resultCard-1 .resultAfter img { top: -15.67%; left: -168.06%; }
.resultCard-2 .resultPhoto img { width: 409.95%; height: 195.15%; top: -31.72%; left: -68.04%; }
.resultCard-2 .resultAfter img { top: -37.31%; left: -239.37%; }
.resultCard-3 .resultPhoto img { width: 299.49%; height: 166.98%; top: -31.34%; left: -19.15%; }
.resultCard-3 .resultAfter img { left: -174.81%; }
.resultArrow {
	position: absolute;
	top: 50%;
	left: calc(50% - 11px);
	width: 22px;
	height: 14px;
	transform: rotate(90deg);
}
.resultCard figcaption {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	font-family: var(--fontSerif);
	font-size: 18px;
	font-weight: var(--BoldF);
	white-space: nowrap;
}
.resultCard figcaption::before, .resultCard figcaption::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--base3);
}
.resultNote {
	margin-top: 25px;
	font-family: var(--fontSerif);
	font-size: 14px;
	text-align: center;
	@media (max-width: 780px) { text-align: left; margin-top: 25px; line-height: 22px; }
}
.carouselButton { display: none; }
@media (max-width: 780px) {
	/* 1枚ずつ表示し、隣のカードが見切れないカルーセルにする。 */
	.resultTrack { justify-content: flex-start; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.resultTrack::-webkit-scrollbar { display: none; }
	.resultCard { flex: 0 0 100%; scroll-snap-align: start; }
	.resultClone { display: block; }
	/* 写真ペア（見出し24px＋写真）の縦中央に矢印を揃える。 */
	.carouselButton { display: block; position: absolute; top: calc(44.6667vw - 14.3334px); width: 32px; height: 32px; background: transparent; }
	.carouselPrev { left: -5px; }
	.carouselNext { right: -5px; }
	.resultIntro { min-height: 65px; }
}
.trainerBlock {
	padding: 145px 0;
	background: var(--base2);
	/* 上へ突き出す見出しが切れないよう、SPでも上余白を確保する。 */
	@media (max-width: 780px) { padding: 45px 0; overflow: clip; }
}
.trainerPanel {
	position: relative;
	min-height: 694px;
	padding: 70px 30px 35px;
	overflow: hidden;
	background: var(--base3);
}
.trainerPhoto {
	position: absolute;
	top: 0;
	left: 47.18%;
	width: 56.32%;
	height: 774px;
}
.trainerPhoto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.trainerPhoto::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -30px;
	width: 190px;
	background: url("../images/decoration-trainer-gold.svg") center / 100% 100% no-repeat;
}
.trainerCopy {
	position: relative;
	width: 648px;
	max-width: 65%;
	padding: 35px 35px 30px;
	background: var(--colorTrainer);
	color: var(--colorWhite);
	font-family: var(--fontSerif);
}
.trainerCopy h2 {
	width: 395px;
	max-width: 100%;
	margin: -80px auto 10px;
	padding: 5px;
	border: 3px solid transparent;
	border-radius: 5px;
	background:
		linear-gradient(var(--colorTrainer), var(--colorTrainer)) padding-box,
		var(--goldGradient) border-box;
	font-size: clamp(22px, calc(2.162vw + 5.135px), 30px);
	font-weight: var(--SemiBoldF);
	text-align: center;
	line-height: 50px;
}
.trainerCopy h2 small { font-size: clamp(18px, calc(1.622vw + 5.351px), 24px); }
.trainerIntro {
	max-width: 390px;
	margin: 10px auto 30px;
	font-size: var(--fs15to18);
	line-height: 30px;
}
.trainerName {
	font-size: clamp(32px, calc(2.162vw + 15.135px), 40px);
	font-weight: var(--MediumF);
	letter-spacing: 1.2px;
}
.trainerName span {
	margin-left: 15px;
	font-size: clamp(11px, calc(.811vw + 4.676px), 14px);
	font-weight: var(--LightF);
	letter-spacing: 1.4px;
}
.trainerRole {
	width: 400px;
	max-width: 100%;
	margin: 15px 0 35px;
	padding: 5px;
	border-radius: 5px;
	background: var(--goldGradient);
	color: var(--base1);
	font-family: var(--fontSans);
	font-size: clamp(18px, calc(1.081vw + 9.568px), 22px);
	font-weight: var(--SemiBoldF);
	text-align: center;
}
.trainerStats {
	display: flex;
	gap: 20px;
	font-family: var(--fontSans);
}
.trainerStats > p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	flex: 1;
	padding: 5px 10px;
	border: 1px solid var(--base3);
	border-radius: 5px;
	color: var(--base2);
	font-size: clamp(14px, calc(1.622vw + 1.351px), 20px);
	text-align: center;
	white-space: nowrap;
}
.trainerStats img { width: 45px; height: 60px; object-fit: contain; }
.trainerStats > p:nth-child(2) img { width: 69px; height: 31px; }
.trainerStats strong { font-size: clamp(30px, calc(1.081vw + 21.568px), 34px); font-weight: var(--MediumF); }
.trainerMessage {
	margin-top: 20px;
	font-size: var(--fs15to18);
	line-height: 32px;
	text-align: justify;
}
@media (min-width: 781px) and (max-width: 1100px) {
	.trainerCopy { max-width: 68%; padding-inline: 20px; }
	.trainerName span { display: block; margin-left: 0; }
	.trainerStats { gap: 10px; }
	.trainerStats > p { gap: 5px; padding-inline: 5px; }
	.trainerStats > p:nth-child(2) img { width: 45px; }
}
/* SPの写真上の肩書きと、写真下の本文パネルを再現。 */
@media (max-width: 780px) {
	/* 見出しの上へのはみ出しを許可し、写真は外側のtrainerBlockで切り抜く。 */
	.trainerPanel { width: 100%; min-height: 0px; padding: 0 15px 20px; overflow: visible; }
	.trainerPhoto { left: 38%; top: 0px; width: 76%; height: 371px; }
	.trainerPhoto::after { width: 90px; left: -15px; }
	.trainerCopy { width: 100%; max-width: none; padding: 0 15px 15px; background: transparent; }
	.trainerCopy::before { content: ""; position: absolute; top: 305px; inset-inline: 0; bottom: 0; background: var(--colorTrainer); z-index: 0; }
	.trainerCopy > * { position: relative; }
	.trainerCopy h2 { width: 280px; margin: 0px auto 0 auto; border-width: 2px; line-height: 38px; padding: 0; transform: translateY(-50%); }
	.trainerIntro { margin: 20px 0 0 -15px; line-height: 24px; }
	.trainerName { margin: 15px 0 0 -15px; line-height: 44px; }
	.trainerName span { display: block; margin: 0; line-height: 18px; }
	.trainerRole { margin: 85px auto 15px; width: 331px; padding: 3px; line-height: 27px; }
	.trainerStats { gap: 10px; }
	.trainerStats > p { min-width: 0; height: 80px; gap: 5px; padding: 5px; line-height: 34px; }
	.trainerStats img { width: 30px; height: 40px; }
	.trainerStats > p:nth-child(2) img { width: 45px; height: 20px; }
	.trainerMessage { margin-top: 10px; line-height: 28px; text-align: justify; }
}

/**************************/
/* counseling / price / faq */
/**************************/
.counselBanner {
	position: relative;
	min-height: 300px;
	background: var(--base1);
	color: var(--colorWhite);
}
.counselPhoto {
	position: absolute;
	inset: 0 auto 0 50%;
	width: min(100%, 1500px);
	height: 100%;
	transform: translateX(-50%);
	object-fit: cover;
}
.counselBanner::before, .counselBanner::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.counselBanner::before { right: 23%; background: linear-gradient(86deg, var(--base1), transparent); }
.counselBanner::after { left: 74%; background: linear-gradient(90deg, transparent, var(--base1)); }
.counselInner {
	position: relative;
	z-index: 2;
	padding-block: 15px;
}
.counselInner h2 {
	font-family: var(--fontSerif);
	font-size: clamp(22px, calc(3.784vw - 7.514px), 36px);
	font-weight: var(--LightF);
	line-height: 50px;
}
.counselInner .btnA { width: 352px; margin: 25px 0 0 5px; transition: background-color .4s ease, filter .4s ease; }
.counselInner > p { width: 352px; margin: 5px 0 0 5px; font-family: var(--fontSerif); font-size: 12px; text-align: center; }
@media (hover: hover) {
	.counselInner .btnA:hover { background-color: var(--base3); filter: none; }
}
@media (max-width: 780px) {
	.counselBanner { min-height: 270px; }
	.counselInner { padding-block: 30px 10px; }
	.counselInner h2 { line-height: 34px; }
	.counselInner .btnA { width: calc(100% - 20px); margin: 45px auto 0; }
	.counselInner > p { width: 100%; margin: 5px 0 0; }
}
.priceBlock {
	padding: 100px 0 0;
	color: var(--colorBlack);
	@media (max-width: 780px) { padding-top: 40px; }
}
.priceTable { width: 100%; margin-top: 15px; background: var(--colorWhite); }
.priceTable thead { height: 54px; background: var(--base1); color: var(--colorWhite); }
.priceTable thead th { font-weight: var(--MediumF); }
.priceTable th:first-child { width: 28%; }
.priceTable th, .priceTable td { border: 1px solid var(--base1); }
.priceTable tr > :first-child { border-left: 0; }
.priceTable tr > :last-child { border-right: 0; }
.priceTable tbody th { padding: 15px 20px; font-size: var(--fs14to16); text-align: left; }
.priceTable td { padding: 15px 20px; }
.priceContent { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.priceContent > strong { width: 42%; font-size: 20px; text-align: center; }
.priceContent small, .monthlyPrice small { font-size: 16px; }
.priceContent > .btnA { flex: 1; padding-inline: 15px; font-size: 14px; white-space: nowrap; }
.priceContent > p { width: 100%; font-size: var(--fs12to14); text-align: center; }
.priceFree { color: var(--colorRed); }
.monthlyPrice { display: flex; align-items: center; justify-content: center; gap: 30px; text-align: center; }
.monthlyPrice span { white-space: nowrap; }
.monthlyPrice strong { font-size: 20px; font-weight: var(--MediumF); }
.monthlyPrice p { font-size: var(--fs12to14); }
.counselInfo {
	padding-top: 60px;
	color: var(--colorBlack);
	@media (max-width: 780px) { padding-top: 55px; }
}
.infoTable { margin-top: 20px; background: var(--colorWhite); font-size: var(--fs14to16); }
.infoTable > div { display: flex; border-top: 1px solid var(--base1); }
.infoTable > div:last-child { border-bottom: 1px solid var(--base1); }
.infoTable dt { display: flex; align-items: center; gap: 20px; width: 28%; flex-shrink: 0; padding: 10px 15px; border-right: 1px solid var(--base1); }
.infoTable dt img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.infoTable dd { padding: 10px 15px; flex: 1; }
.infoTable ol { counter-reset: steps; }
.infoTable li {
	display: flex;
	gap: 5px;
	line-height: 32px;
	@media (min-width: 781px) {
		align-items: center;
		padding-block: 6px;
		line-height: 1em;
	}
}
.infoTable li::before {
	counter-increment: steps;
	content: counter(steps);
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 5px;
	border-radius: 50%;
	background: var(--base3);
	color: var(--colorWhite);
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	@media (min-width: 781px) { margin-top: 0; }
}
/*.infoTable li > span {
	@media (min-width: 781px) { transform: translateY(-2px); }
}*/
.faqBlock {
	padding: 55px 0 105px;
	color: var(--colorBlack);
	@media (max-width: 780px) { padding: 50px 15px 75px; }
}
.faqList { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.faqItem { padding: 10px 15px 10px 45px; border-radius: 5px; background: var(--colorWhite); font-size: var(--fs15to18); line-height: 26px; }
.faqItem h3 { position: relative; font-size: inherit; line-height: 26px; }
.faqItem > p { position: relative; margin-top: 15px; }
.qaMark { position: absolute; top: 0; left: -35px; width: 25px; height: 23px; background: var(--base3); color: var(--colorWhite); font-size: 16px; font-weight: var(--BoldF); line-height: 23px; text-align: center; }
.faqItem > p .qaMark { background: var(--base1); }
/* SPの料金表は料金・ボタン・説明を縦に積む。 */
@media (max-width: 780px) {
	.priceTable { margin-top: 25px; }
	.priceTable thead { height: 40px; }
	.priceTable th:first-child { width: 31%; }
	.priceTable tbody th { padding: 10px 5px; line-height: 20px; text-align: center; }
	.priceTable td { padding: 15px 10px; }
	.priceContent { flex-direction: column; gap: 10px; }
	.priceContent > strong { width: 100%; line-height: 30px; }
	.priceContent > .btnA { width: 100%; padding-inline: 10px 15px; white-space: normal; }
	.priceContent > p { line-height: 20px; text-align: left; }
	.monthlyPrice { flex-direction: column; gap: 5px; }
	.infoTable { margin-top: 30px; }
	.infoTable dt { width: 39%; padding: 10px 15px; gap: 5px; flex-wrap: wrap; align-content: center; }
	.infoTable dt .spLayer { display: none; }
	.infoTable dd { padding: 12px 15px; line-height: 24px; }
	.infoTable li { line-height: 25px; gap: 5px; }
	.infoTable li::before { width: 18px; height: 18px; line-height: 18px; }
	.faqList { gap: 20px; }
	.faqItem { padding: 10px 15px 15px 44px; line-height: 24px; text-align: justify; }
	.faqItem h3 { line-height: 24px; text-align: left; }
	.faqItem > p { margin-top: 15px; }
}

/**************************/
/* reservation */
/**************************/
.reservationHeading { background: var(--base1); }
.reservationHeading-inner { position: relative; height: 216px; padding: 25px 35px; overflow: hidden; }
.reservationPhoto { position: absolute; right: 0; top: 0; width: 43%; height: 214px; overflow: hidden; }
.reservationPhoto img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.reservationHeading-inner::after { content: ""; position: absolute; inset: 0 0 0 57%; background: linear-gradient(90deg, var(--base1), transparent 40%, var(--base1)); }
.reservationHeading h2 { position: relative; z-index: 1; color: var(--base3); font-family: var(--fontSerif); font-size: clamp(28px, calc(2.162vw + 11.135px), 36px); line-height: 45px; }
.reservationHeading p { position: relative; z-index: 1; margin-top: 15px; color: var(--colorWhite); font-family: var(--fontSerif); font-size: var(--fs16to18); }
.reservationInner { padding-top: 24px; padding-bottom: 50px; }
.formAssurance { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--colorRed); font-size: clamp(16px, calc(1.081vw + 7.568px), 20px); line-height: 24px; }
.formAssurance span { text-decoration: underline; text-underline-offset: 3px; }
.formAssurance img { width: 40px; height: 40px; flex-shrink: 0; }
.formNotice { margin: 18px 0 32px; font-size: clamp(14px, calc(1.081vw + 5.568px), 18px); line-height: 24px; text-align: center; }
.formRow { display: flex; min-height: 100px; border-top: 1px solid var(--colorBorder); }
.formLabel { display: flex; align-items: flex-start; gap: 11px; width: 26.25%; flex-shrink: 0; padding: 23px 0; font-size: var(--fs16to18); line-height: 38px; }
.required { display: inline-block; flex-shrink: 0; width: 65px; border-radius: 5px; background: var(--base3); color: var(--colorWhite); font-size: var(--fs14to16); line-height: 38px; text-align: center; }
.formControl { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0; padding: 15px 0; }
.formControl > input:not([type="radio"]), .formControl-inline > input:not([type="radio"]), .formControl select, .dateRow select, .dateInput { width: 100%; min-height: 60px; padding: 10px 15px; border: 1px solid var(--colorBorder); border-radius: 3px; background: var(--colorWhite); font-size: var(--formF); }
.formControl input.shortInput { width: 100px; }
.choiceList { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; width: 100%; }
.choiceList label { display: flex; align-items: center; gap: 11px; width: 155px; font-size: var(--formF); cursor: pointer; }
.choiceList input { appearance: none; width: 30px; height: 30px; margin: 0; border: 1px solid var(--colorBorder); border-radius: 50%; background: var(--colorWhite); flex-shrink: 0; }
.choiceList input:checked { border: 8px solid var(--colorWhite); background: var(--base1); }
.occupationRow { min-height: 150px; }
.occupationRow .choiceList { gap: 27px 0; }
.occupationRow .choiceList label { width: 25%; }
.occupationRow .choiceList label:nth-child(1) { width: 26%; }
.occupationRow .choiceList label:nth-child(2) { width: 31%; }
.occupationRow .choiceList label:nth-child(4) { width: 18%; }
.occupationRow .choiceList label:nth-child(5) { width: 20%; }
.occupationRow .choiceList label:nth-child(6) { width: 43%; }
.surveyRow { min-height: 148px; }
.surveyRow .formControl { flex-direction: column; align-items: flex-start; justify-content: center; gap: 15px; }
.surveyRow select { width: min(445px, 100%); }
.dateField { padding-top: 20px; border-top: 1px solid var(--colorBorder); }
.dateField legend { display: flex; float: left; align-items: center; width: 100%; margin-bottom: 25px; font-size: var(--fs16to18); line-height: 38px; }
.dateField legend .required { margin-right: 11px; }
.dateFieldError { margin-left: 20px; color: var(--colorRed); font-size: 13px; line-height: 20px; }
.dateRow { display: flex; clear: both; align-items: center; gap: 7.5%; margin-top: 30px; }
.dateRow > p { width: 18.75%; padding: 7px 0; border: 1px solid var(--base3); border-radius: 5px; color: var(--base3); font-size: var(--formF); line-height: 22px; text-align: center; }
.dateRow > div { display: flex; gap: 30px; flex: 1; min-width: 0; }
.dateNotice { margin: 15px 0 0 26.25%; font-size: 14px; line-height: 22px; }
.privacyField { margin: 38px 0 0 26.25%; }
.privacyConsent { display: flex; align-items: center; gap: 12px; width: min(430px, 100%); min-height: 60px; padding: 12px 20px; border: 1px solid var(--colorBorder); border-radius: 3px; font-size: 14px; line-height: 22px; cursor: pointer; }
.privacyConsent > span { white-space: nowrap; }
.privacyConsent input { flex-shrink: 0; width: 26px; height: 26px; margin: 0; accent-color: var(--base3); }
.privacyLink { color: var(--colorGoldText); text-decoration: underline; text-underline-offset: 3px; }
.dateInput { position: relative; display: flex; align-items: center; flex: 1; }
.dateInput span { pointer-events: none; }
.dateInput.hasValue span { display: none; }
.dateInput input { position: absolute; inset: 0; width: 100%; min-width: 0; border: 0; padding: 10px; background: transparent; font-size: 16px; }
.dateInput:not(.hasValue) input { color: transparent; }
.dateInput input:focus { color: var(--base1); background: var(--colorWhite); }
.dateInput input::-webkit-calendar-picker-indicator { opacity: 1; }
.dateRow select { flex: 1; width: 0; }
.formSubmit { margin-top: 45px; }
.formSubmit .btnA { width: min(445px, 100%); min-height: 60px; margin-inline: auto; font-size: var(--formF); }
.formSubmit .btnA:disabled { opacity: .55; cursor: not-allowed; }
.recaptchaNotice {
	margin-top: 20px;
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
	@media (max-width: 780px) {
		text-align: left;
	}
}
@media (hover: hover) {
	.priceContent > .btnA,
	.reservationForm .formSubmit .btnA { transition: background-color .4s ease, filter .4s ease; }
	.priceContent > .btnA:hover { background-color: var(--base3); filter: none; }
	.reservationForm .formSubmit .btnA:not(:disabled):hover { background-color: var(--base1); filter: none; }
}
.previewNote { margin-top: 15px; font-size: 12px; text-align: center; }
.formResult { margin-top: 20px; padding: 20px; border: 1px solid var(--base3); background: var(--colorWhite); }
#reservationFormArea { scroll-margin-top: 20px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formControl-column { flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; }
.formControl-inline { display: flex; align-items: center; gap: 15px; }
.fieldError { width: 100%; color: var(--colorRed); font-size: 13px; line-height: 20px; }
.formMessage, .formComplete { padding: 25px; border: 1px solid var(--base3); background: var(--colorWhite); line-height: 28px; text-align: center; }
.formMessage-error { border-color: var(--colorRed); color: var(--colorRed); }
.formAlternativeActions { display: grid; gap: 15px; width: min(430px, 100%); margin: 22px auto; }
.formAlternative-phone { background: var(--colorCtaButton); color: var(--base1); }
.formAlternative-line { border-color: var(--colorLine); background: var(--colorLine); color: var(--colorWhite); }
.formSending { margin-top: 15px; font-size: 13px; text-align: center; }
.formCaptchaError { margin-top: 15px; text-align: center; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.formConfirmation h3, .formComplete h3 { margin-bottom: 25px; font-family: var(--fontSerif); font-size: 26px; text-align: center; }
.confirmationList { border-top: 1px solid var(--colorBorder); }
.confirmationList > div { display: flex; border-bottom: 1px solid var(--colorBorder); }
.confirmationList dt { width: 26.25%; flex-shrink: 0; padding: 18px; background: var(--base2); font-weight: var(--MediumF); }
.confirmationList dd { padding: 18px; overflow-wrap: anywhere; }
.confirmationActions { display: flex; justify-content: center; gap: 20px; margin-top: 35px; }
.confirmationActions form { width: min(445px, 55%); }
.confirmationActions .btnA { width: 100%; min-height: 60px; }
.confirmationActions > .formBackButton { width: min(300px, 40%); border: 1px solid var(--base3); background: var(--colorWhite); color: var(--base1); }
.formStandalone { min-height: 100vh; padding: 40px 0; background: var(--colorWhite); }
.formStandalone-back { margin-bottom: 25px; }
.formStandalone-back a { color: var(--colorGoldText); text-decoration: underline; }
/* SPでラベル・入力欄と希望日時をそれぞれ縦積みに変更。 */
@media (max-width: 780px) {
	.reservationHeading-inner { width: 100%; height: 180px; padding: 15px; }
	.reservationPhoto { width: 196px; height: 214px; }
	.reservationPhoto img { position: absolute; top: 0%; left: -50%; width: auto; height: 80%; max-width: none; object-fit: fill; }
	/* 画像の左端からグラデーションを重ね、PCと同じ見え方にする。 */
	.reservationHeading-inner::after { left: 50%; }
	.reservationHeading h2 { line-height: 34px; }
	.reservationHeading p { line-height: 25px; margin-top: 25px; }
	.reservationInner { padding: 15px 0 45px; }
	.formAssurance { align-items: flex-start; justify-content: flex-start; margin-inline: 15px; gap: 4px; line-height: 22px; }
	.formAssurance img { width: 25px; height: 25px; }
	.formNotice { margin: 16px 15px 13px; line-height: 22px; text-align: left; }
	.formRow { display: block; min-height: 100px; padding: 10px 15px; }
	.formLabel { width: 100%; padding: 0; line-height: 24px; gap: 6px; }
	.required { width: 50px; line-height: 24px; }
	.formControl { padding: 8px 0 0; }
	.formControl > input:not([type="radio"]), .formControl-inline > input:not([type="radio"]), .formControl select { min-height: 45px; padding: 5px 15px; }
	.choiceList { gap: 15px 10px; padding-top: 9px; }
	.choiceList label { width: calc(50% - 5px); }
	.occupationRow .choiceList { gap: 23px 0; padding: 0; }
	.occupationRow .choiceList label:nth-child(n) { width: 41%; gap: 11px; }
	.occupationRow .choiceList label:nth-child(even) { width: 59%; }
	.occupationRow .formControl { padding: 29px 0 13px; }
	.surveyRow .formControl { display: block; padding-top: 0; }
	.surveyRow .formControl > p { margin-left: 56px; line-height: 22px; }
	.surveyRow select { width: 100%; min-height: 60px; margin-top: 12px; }
	.dateField { padding: 10px 15px 0; }
	.dateField legend { flex-wrap: wrap; margin-bottom: 20px; line-height: 24px; }
	.dateField legend .required { margin-right: 6px; }
	.dateFieldError { flex-basis: 100%; margin: 8px 0 0; padding-left: 56px; }
	.dateRow { display: block; margin-top: 33px; }
	.dateRow > p { width: 150px; margin-bottom: 12px; }
	.dateRow > div { flex-direction: column; gap: 8px; }
	.dateInput { min-height: 60px; }
	.dateInput input { padding: 15px; }
	.dateRow select { width: 100%; min-height: 60px; }
	.dateNotice { margin: 8px 15px 0; }
	.dateNotice span { display: block; padding-left: 1em; }
	.privacyField { margin: 28px 15px 0; }
	.privacyConsent { width: 100%; }
	.privacyConsent > span { white-space: normal; }
	.formSubmit { margin: 27px 15px 0; }
	.formSubmit .btnA { min-height: 80px; }
	.formControl-column { align-items: stretch; }
	.confirmationList > div { display: block; }
	.confirmationList dt { width: 100%; padding: 10px 15px; }
	.confirmationList dd { padding: 12px 15px; }
	.confirmationActions { flex-direction: column-reverse; margin-inline: 15px; }
	.confirmationActions form, .confirmationActions > .formBackButton { width: 100%; }
}

/**************************/
/* access / footer */
/**************************/
.accessBlock {
	padding: 50px 0 95px;
	background: var(--base1);
	color: var(--colorWhite);
	@media (max-width: 780px) { padding: 30px 0 35px; }
}
.accessBlock > .container {
	@media (max-width: 780px) { width: 100%; }
}
.accessBlock .sansTitle { font-size: var(--fs20to24); line-height: 30px; }
.accessBlock .titleLine::after { height: 5px; margin-top: 15px; margin-bottom: 25px; }
.accessMap { height: 400px; overflow: hidden; }
.accessDetails { display: flex; gap: 25px; margin-top: 15px; margin-bottom: 35px; font-size: var(--fs15to16); line-height: 26px; }
.storeDetails { flex: 1; }
.storeDetails > div { display: flex; }
.storeDetails dt { width: 85px; flex-shrink: 0; color: var(--colorGoldText); line-height: 36px; font-weight: var(--BoldF); }
.storeDetails dd { padding-top: 5px; font-size: var(--fs14to16); font-weight: var(--RegularF); }
.transport { flex: 1.1; padding-left: 40px; border-left: 1px solid var(--base2); }
.transport h3 { color: var(--colorGoldText); font-size: 16px; line-height: 36px; }
.transport p { font-weight: var(--RegularF); }
.umedaBlock { padding: 0 15px 15px; border: 1px solid var(--colorBorder); }
.umedaBlock h3 { font-size: var(--fs15to20); line-height: 45px; }
.umedaInner { display: flex; gap: 20px; }
.umedaMap { width: 54%; height: 300px; flex-shrink: 0; overflow: hidden; }
.accessMap iframe, .umedaMap iframe { display: block; width: 100%; height: 100%; border: 0; }
.umedaDetails { font-size: var(--fs14to16); line-height: 26px; }
.umedaDetails dt { color: var(--colorGoldText); font-weight: var(--BoldF); }
.umedaDetails dd + dt { margin-top: 5px; }
.umedaDetails dd { font-weight: var(--RegularF); }
.siteFooter { padding-top: 25px; border-top: 3px solid var(--base3); background: var(--colorFooter); color: var(--colorWhite); }
.footerInner { display: flex; justify-content: space-between; gap: 80px; padding-bottom: 30px; }
.footerBrand { flex-shrink: 0; font-size: 14px; }
.footerBrand img { width: 235px; height: 93px; margin: 10px 0; }
.footerBrand p:last-child a { text-decoration: underline; }
.footerNav { display: flex; flex-direction: column; align-items: flex-start; flex: 1; color: var(--base3); font-size: var(--fs15to16); line-height: 36px; }
.footerNav a::before { content: "― "; }
.footerNav a:hover { color: var(--colorWhite); }
.copyright { padding: 10px 15px 55px; border-top: 1px solid var(--base3); font-size: 12px; text-align: center; }

/**************************/
/* fixed CTA */
/**************************/
.scrollMotionEnabled .scrollReveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .8s ease var(--scrollRevealDelay, 0ms),
		transform .95s cubic-bezier(.22, 1, .36, 1) var(--scrollRevealDelay, 0ms);
}
.scrollMotionEnabled .scrollReveal.scrollReveal-card { transform: translateY(20px) scale(.99); }
.scrollMotionEnabled .scrollReveal.isVisible { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 780px) {
	.scrollMotionEnabled .scrollReveal { transform: translateY(16px); }
	.scrollMotionEnabled .scrollReveal.scrollReveal-card { transform: translateY(16px) scale(.995); }
	.scrollMotionEnabled .scrollReveal.isVisible { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.scrollMotionEnabled .scrollReveal,
	.scrollMotionEnabled .scrollReveal.scrollReveal-card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.fixedCta {
	display: flex;
	justify-content: flex-end;
	position: fixed;
	right: 50%;
	bottom: 0;
	z-index: 100;
	width: 100%;
	max-width: 1300px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(50%, 30px);
	transition: opacity .6s ease, visibility .6s ease, transform .6s ease;
}
.fixedCta.isVisible {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transform: translate(50%, 0);
}
.fixedCta-panel {
	width: 780px;
	height: 90px;
	margin-right: 20px;
	padding: 10px 12px 5px;
	border: 3px solid var(--base3);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background: var(--colorCtaBackground);
	color: var(--colorWhite);
}
.fixedCta-panel:has(.fixedCta-line[hidden]) { width: 475px; }
.fixedCta-actions { display: flex; gap: 15px; }
.fixedCta-button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 50px;
	padding: 5px 35px 5px 15px;
	border: 1px solid var(--base3);
	border-radius: 3px;
	font-size: 20px;
	font-weight: var(--MediumF);
	line-height: 22px;
	text-align: center;
}
.fixedCta-button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}
.fixedCta-reservation { width: 445px; background: var(--colorCtaButton); color: var(--base1); }
.fixedCta-line { width: 288px; border-color: var(--colorLine); background: var(--colorLine); color: var(--colorWhite); }
.fixedCta-line[hidden] { display: none; }
.fixedCta-mobileBreak { margin-left: .3em; }
.fixedCta-line .fixedCta-mobileBreak { margin-left: 0; }
.fixedCta-panel > p { font-family: var(--fontSerif); font-size: 12px; font-weight: var(--LightF); line-height: 22px; text-align: center; }
.fixedCta-button:hover { filter: brightness(1.06); }

@media (max-width: 780px) {
	.fixedCta { max-width: 390px; }
	.fixedCta-panel { width: calc(100% - 10px); height: 80px; margin: 0 auto; padding: 5px 5px 2px; }
	.fixedCta-panel:has(.fixedCta-line[hidden]) { width: calc(100% - 10px); }
	.fixedCta-actions { gap: 6px; }
	.fixedCta-button { height: 50px; padding: 5px 25px 5px 5px; font-size: 16px; line-height: 20px; }
	.fixedCta-reservation { width: 58.1%; }
	.fixedCta-panel:has(.fixedCta-line[hidden]) .fixedCta-reservation { width: 100%; }
	.fixedCta-line { width: 41.9%; }
	.fixedCta-button::after { right: 8px; width: 8px; height: 8px; }
	.fixedCta-mobileBreak { display: block; margin-left: 0; }
	.fixedCta-panel > p { font-family: var(--fontSans); font-size: 13px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.fixedCta { transition: none; }
	.homeHero.isPreparing .heroPhoto img,
	.homeHero.isPreparing .heroLogo,
	.homeHero.isPreparing .station,
	.homeHero.isPreparing h1,
	.homeHero.isPreparing .heroTitle,
	.homeHero.isPreparing .heroLead,
	.homeHero.isPreparing .heroRecord,
	.homeHero.isPreparing .heroNote { transition: none; }
}
/* 店舗情報とフッターナビのSP構成。 */
@media (max-width: 780px) {
	.accessBlock .sansTitle { padding-inline: 15px; }
	.accessBlock .titleLine::after { margin-bottom: 40px; }
	.accessDetails { display: block; margin-top: 15px; margin-bottom: 15px; }
	.storeDetails { padding-bottom: 20px; }
	.transport { border-left: 0; border-top: 1px solid var(--base2); padding: 5px 0 0; }
	.transport p { line-height: 25px; }
	.umedaBlock { padding: 0 15px 10px; }
	.umedaBlock h3 { line-height: 33px; white-space: nowrap; margin-left: -5px; }
	.umedaInner { flex-direction: column; gap: 10px; }
	.umedaMap { width: 100%; height: 180px; }
	.umedaDetails { line-height: 24px; }
	.umedaDetails dd + dt { margin-top: 0; }
	.siteFooter { padding-top: 40px; }
	.footerInner { display: block; width: 100%; padding-bottom: 0; }
	.footerBrand { text-align: center; }
	.footerBrand img { margin: 10px auto; }
	.footerNav { align-items: stretch; margin-top: 40px; }
	.footerNav a { position: relative; padding: 15px 30px; border-top: 1px solid var(--base3); line-height: 30px; }
	.footerNav a::before { content: none; }
	.footerNav a::after { content: "›"; position: absolute; right: 30px; }
	.copyright { padding-bottom: 90px; }
}