@font-face {
	font-family: "Noto Sans JP";
	src: url("../fonts/NotoSansJP-100.woff2") format("woff2");
	font-weight: 100;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url("../fonts/NotoSansJP-200.woff2") format("woff2");
	font-weight: 200;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url("../fonts/NotoSansJP-300.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url("../fonts/NotoSansJP-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url("../fonts/NotoSansJP-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Noto Serif JP";
	src: url("../fonts/NotoSerifJP-200.woff2") format("woff2");
	font-weight: 200;
	font-display: swap;
}
@font-face {
	font-family: "Noto Serif JP";
	src: url("../fonts/NotoSerifJP-300.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "Noto Serif JP";
	src: url("../fonts/NotoSerifJP-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Noto Serif JP";
	src: url("../fonts/NotoSerifJP-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
/**************************/
/* common tokens */
/**************************/
:root {
	--base1: #222843;
	--base2: #e1e7ea;
	--base3: #a1986b;
	--colorGoldLight: #f9eaaa;
	--colorGoldText: #857638;
	--colorWhite: #fff;
	--colorBlack: #000;
	--colorText: #090707;
	--colorPaper: #f5f5f5;
	--colorFooter: #0e1534;
	--colorTrainer: #2d2b25;
	--colorRed: #bc0202;
	--colorBorder: #999;
	--colorTableLine: #ccc;
	--colorTableStripe: #eceeee;
	--colorPhotoTop: #eae9e6;
	--colorPhotoBottom: #c1bfbb;
	--colorHeroShade: #101320;
	--colorCtaBackground: #020f1c;
	--colorCtaButton: #cec8aa;
	--colorLine: #06c755;
	--fontSans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	--fontSerif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	--LightF: 200;
	--RegularF: 300;
	--MediumF: 400;
	--SemiBoldF: 400;
	--BoldF: 600;
	--fs12to14: clamp(12px, calc(.541vw + 7.784px), 14px);
	--fs14to16: clamp(14px, calc(.541vw + 9.784px), 16px);
	--fs15to16: clamp(15px, calc(.270vw + 12.892px), 16px);
	--fs15to18: clamp(15px, calc(.811vw + 8.676px), 18px);
	--fs15to20: clamp(15px, calc(1.351vw + 4.459px), 20px);
	--fs16to18: clamp(16px, calc(.541vw + 11.784px), 18px);
	--fs20to24: clamp(20px, calc(1.081vw + 11.568px), 24px);
	--formF: 18px;
	--contentWidth: 1100px;
	--narrowWidth: 900px;
	--formWidth: 800px;
	--goldGradient: linear-gradient(195deg, var(--base3) 11%, var(--colorGoldLight) 57%, var(--base3) 89%);
}
html {
	scroll-behavior: smooth;
}
body {
	background: var(--base2);
	color: var(--base1);
	font-family: var(--fontSans);
	font-size: 16px;
	font-weight: var(--MediumF);
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}
.siteWrap {
	overflow: clip;
}
.container {
	width: min(var(--contentWidth), calc(100% - 60px));
	margin-inline: auto;
	@media (max-width: 780px) {
		width: calc(100% - 30px);
	}
}
.narrowContainer {
	width: min(var(--narrowWidth), calc(100% - 60px));
	margin-inline: auto;
	@media (max-width: 780px) {
		width: calc(100% - 30px);
	}
}
.formContainer {
	width: min(var(--formWidth), calc(100% - 60px));
	margin-inline: auto;
	@media (max-width: 780px) {
		width: 100%;
	}
}
.serifTitle {
	font-family: var(--fontSerif);
	font-weight: var(--SemiBoldF);
	font-size: clamp(24px, calc(3.243vw - 1.297px), 36px);
	line-height: 1.7;
	text-align: center;
	@media (max-width: 780px) {
		line-height: 1.5;
	}
}
.serifTitle strong {
	color: var(--base3);
	font-size: 1.39em;
	font-weight: var(--BoldF);
}
.sansTitle {
	font-size: clamp(20px, calc(3.243vw - 5.297px), 32px);
	font-weight: var(--BoldF);
	text-align: center;
	line-height: 1.45;
}
.titleLine::after {
	content: "";
	display: block;
	width: 100px;
	height: 7px;
	margin: 15px auto 25px;
	background: var(--base3);
}
.btnA {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 50px;
	padding: 10px 25px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: var(--base1);
	color: var(--colorWhite);
	font-size: 16px;
	font-weight: var(--BoldF);
	text-align: center;
	transition: filter .2s ease, background-color .2s ease;
}
.btnA:hover {
	filter: brightness(1.2);
}
.btnArrow {
	position: absolute;
	right: 10px;
	top: calc(50% - 3px);
	width: 12px;
	height: 6px;
	transform: rotate(-90deg);
}
.btnOutline {
	border-color: var(--base2);
	background: color-mix(in srgb, var(--base1) 75%, transparent);
	font-family: var(--fontSerif);
	font-weight: var(--MediumF);
}
.btnGold {
	background: var(--base3);
}
:focus-visible {
	outline: 3px solid var(--base3);
	outline-offset: 4px;
}
/* PCとスマホの表示ON・OFF */
.pcLayer {
	display: block;
}
.spLayer {
	display: none;
}
/**** PC用の設定ここまで ****/
.visuallyHidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skipLink {
	position: fixed;
	top: -100px;
	left: 10px;
	z-index: 100;
	padding: 10px 20px;
	background: var(--colorWhite);
}
.skipLink:focus {
	top: 10px;
}
@media (max-width: 780px) {
	.pcLayer {
		display: none;
	}
	.spLayer {
		display: block;
	}
} /***** END media screen *****/
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}