/**
 * page-flow
 * 対象 1 ページ / 代表ページ: /flow
 *
 * 自動生成: node _research/emit-page.mjs
 * クラス名は DOM 構造から機械的に導出（_build/page-class-map.json）
 * 手で編集しない
 */
.p-page {
	min-height: 100vh;
	min-height: 100dvh;
	overflow: clip;
}
.p-page {
	background:var(--an-color-white);
	border-radius:0;
	height:100%;
	margin:0;
	opacity:1;
	padding:0;
	width:100%;
	max-width:100%;
}
.p-page__main {
	align-content:center;
	align-items:center;
	flex:none;
	flex-wrap:nowrap;
	justify-content:center;
	padding:0px;
	width:100%;
	max-width:100%;
}
.p-flow__sec1 {
	align-content:center;
	align-items:center;
	border-bottom:0px solid transparent;
	border-left:0px solid transparent;
	border-right:0px solid transparent;
	border-top:0px solid transparent;
	flex:none;
	flex-direction:row;
	flex-wrap:wrap;
	gap:8px 16px;
	justify-content:flex-start;
	padding:16px 40px;
	width:1280px;
	max-width:100%;
}
.p-flow__sec1 > * {
	--gap-h:16px;
	--gap-v:8px;
}
.p-flow__sec1-link {
	color:var(--an-color-text);
	font-size:18px;
	padding:0px;
}
.p-flow__sec1-text {
	color:var(--an-color-border);
	font-size:18px;
}
.p-flow__sec1-text-2 {
	color:var(--an-color-text);
	font-family:var(--an-font-base);
	font-size:12px;
	font-weight:400;
	height:auto;
	line-height:1.4;
	padding:0px;
	text-align:left;
	width:auto;
	justify-content:flex-start;
	max-width:100%;
}
.p-flow__step-01 {
	background:var(--an-color-white);
	flex:none;
	justify-content:center;
}
.p-flow__step-01-inner {
	align-content:center;
	align-items:center;
	flex-direction:column;
	flex-wrap:nowrap;
	gap:40px;
	height:auto;
	justify-content:center;
	padding:80px 40px;
	width:1280px;
	max-width:100%;
}
.p-flow__step-01-inner > *,
.p-flow__step-01-box > * {
	--gap-h:0px;
	--gap-v:40px;
}
.p-flow__step-01-text {
	border-bottom:0px solid transparent;
	border-left:0px solid transparent;
	border-right:0px solid transparent;
	border-top:0px solid transparent;
	color:var(--an-color-text);
	flex:none;
	font-family:var(--an-font-base);
	font-size:16px;
	font-weight:400;
	height:auto;
	letter-spacing:0;
	line-height:2;
	margin:0px;
	padding:0px;
	text-align:left;
	width:100%;
	justify-content:flex-start;
	max-width:100%;
}
.p-flow__step-01-text.an-appear {
	opacity:0;
	transition-delay:400ms;
	transition-duration:800ms;
	translate:0px 16px;
}
.p-flow__step-01-box {
	align-content:center;
	align-items:center;
	flex-direction:column;
	flex-wrap:nowrap;
	gap:40px;
	justify-content:flex-start;
	padding:0px;
}
.p-flow__step-01-box-2 {
	align-content:flex-start;
	align-items:flex-start;
	background:transparent;
	flex:none;
	flex-direction:column;
	flex-wrap:nowrap;
	height:100%;
	justify-content:center;
	left:0px;
	margin:0;
	position:absolute;
	top:0;
	width:calc(50% - (var(--gap-h) * 0.5));
	z-index:-1;
	max-width:calc(50% - (var(--gap-h) * 0.5));
}
.p-flow__step-01-box-2.an-appear {
	opacity:0;
	transition-delay:600ms;
	transition-duration:800ms;
	translate:0px 16px;
}
.p-flow__step-01-box-3 {
	background:var(--an-color-brand);
	bottom:0px;
	flex:none;
	height:100%;
	left:auto;
	margin:0;
	position:absolute;
	right:0px;
	top:0px;
	width:1px;
	z-index:-1;
}

@media (max-width: 1140px) {
	.p-flow__step-01 {
		background:var(--an-color-white);
	}
	.p-flow__step-01-text {
		border-bottom:0px solid var(--an-color-accent);
		border-left:0px solid var(--an-color-accent);
		border-right:0px solid var(--an-color-accent);
		border-top:0px solid var(--an-color-accent);
	}
	.p-flow__step-01-box-2 {
		flex:none;
	}
	.p-flow__step-01-box-3 {
		background:var(--an-color-accent);
	}
}

@media (max-width: 840px) {
	.p-flow__sec1 {
		padding:16px 24px;
	}
	.p-flow__sec1 > * {
		--gap-h:16px;
		--gap-v:8px;
	}
	.p-flow__step-01-inner {
		gap:40px;
		padding:80px 40px;
	}
	.p-flow__step-01-inner > *,
	.p-flow__step-01-box > * {
		--gap-h:0px;
		--gap-v:40px;
	}
	.p-flow__step-01-box {
		gap:40px;
	}
}

@media (max-width: 540px) {
	.p-flow__sec1 {
		gap:8px 8px;
		padding:16px;
	}
	.p-flow__sec1 > * {
		--gap-h:8px;
		--gap-v:8px;
	}
	.p-flow__step-01-inner {
		gap:24px;
		padding:40px 16px;
	}
	.p-flow__step-01-inner > *,
	.p-flow__step-01-box > * {
		--gap-h:0px;
		--gap-v:24px;
	}
	.p-flow__step-01-text {
		border-bottom:0px solid transparent var(--an-color-brand);
		border-left:0px solid transparent var(--an-color-brand);
		border-right:0px solid transparent var(--an-color-brand);
		border-top:0px solid transparent var(--an-color-brand);
		font-size:14px;
		line-height:1.8;
	}
	.p-flow__step-01-box {
		gap:24px;
	}
	.p-flow__step-01-box-3 {
		background:var(--an-color-brand);
	}
}