/*============================================================
フロー用
============================================================*/
:root{
  /*--boost-container: 1200px; /* 右寄せの基準幅（中央コンテナ想定） */
  /*--gutter-boost: clamp(24px, (100vw - var(--boost-container))/2, 72px);*/
  /*--right-max: 960px;        /* ロゴ／メッセージの最大幅 */
}

section div.secWrap h2{
	color:var(--color-text);
}


/****************
ヒーロー
****************/
section#hero {
  background: #FFFFFF url(/assets/images/flow/flow_hero_bg.jpg) no-repeat center center;
	background-size: cover;	
}
section#hero h1{
	color:var(--color-white);
	text-shadow:
		0 2px 4px rgba(0,0,0,0.6),
		0 4px 12px rgba(0,0,0,0.4),
		0 0 24px rgba(0,0,0,0.2);
}
section#hero div.heroLeft p{
	color:var(--color-white);
	text-shadow:
		0 2px 4px rgba(0,0,0,0.50),
		0 0 8px rgba(0,0,0,0.30);
}

/****************
ステップ
****************/
div.stepBox{
	display:flex;
	flex-direction:column;
	gap:20px;
	width:80%;
	margin: 40px auto 0 auto;
}

div.stepBox div.stepDetail{
	display:grid;
	grid-template-columns:auto 1fr auto;
	gap:12px 16px;
	align-items:center;

	width:100%;
	/*padding:24px 20px;*/
	padding:20px 10px;

	border:1px solid var(--color-blue);
	box-sizing:border-box;
}

div.stepBox div.stepDetail div.stepNum{
	padding-right:16px;
	border-right:2px solid var(--color-blue);

	color:var(--color-blue);
	font-size:3rem;
	font-weight:700;
	line-height:1;
}

div.stepBox div.stepDetail div.stepBody{
	display:contents;
}

div.stepBox div.stepDetail div.stepBody h3{
	grid-column:2;
	margin:0;
	color:var(--color-blue);
	font-size:1.6rem;
	font-weight:700;
}

div.stepBox div.stepDetail div.stepBody p{
	grid-column:1 / -1;
	margin:12px 0 0;

	font-size:0.95rem;
	line-height:1.8;
	font-weight:700;
	text-align:left;
}
div.stepBox div.stepDetail div.stepBody p span.notice{
	font-size:80%;
}

div.stepBox div.stepDetail div.stepIcon{
	grid-column:3;
	grid-row:1;
	width:56px;
}

div.stepBox div.stepDetail div.stepIcon img{
	display:block;
	width:100%;
	height:auto;
}

.flowArrow{
	width:0;
	height:0;

	margin:12px auto;

	border-left:25px solid transparent;
	border-right:25px solid transparent;
	border-top:18px solid var(--color-blue);
}

/****************
ブレークポイント
****************/
@media (max-width: 399.98px) {}

@media (min-width: 400px) {}

@media (min-width: 640px) {
	/* ステップ */
	div.stepBox div.stepDetail{
		grid-template-columns:auto 1fr auto;
		gap:24px;
		padding:24px 40px;
	}

	div.stepBox div.stepDetail div.stepNum{
		padding-right:28px;
		font-size:clamp(3rem, 5vw, 5rem);
	}

	div.stepBox div.stepDetail div.stepBody{
		display:block;
	}

	div.stepBox div.stepDetail div.stepBody h3{
		grid-column:auto;
		margin:0 0 8px;

		font-size:clamp(1.6rem, 2.4vw, 2.4rem);
	}

	div.stepBox div.stepDetail div.stepBody p{
		grid-column:auto;
		margin:0;

		font-size:1rem;
		line-height:1.8;
	}

	div.stepBox div.stepDetail div.stepIcon{
		grid-column:auto;
		grid-row:auto;
		width:90px;
	}

}
@media (min-width: 860px) {}

@media (min-width: 960px) {}

@media (min-width: 1200px) {}