@charset "utf-8";

/******************* 統一設定 *******************/
section[id^=sec] .button{
	margin:0 auto;
	padding:10px 40px;
	color:#4d99b5;
	background:#fff;
	border:solid 2px #4d99b5;
	border-radius:999px;
	display:block;
}


/******************* 各セクション *******************/
#sec01 h1::before{
	background:url("./../img/common/guide.png") no-repeat center/contain;
}


#sec02{
	width:100%;
	padding:20px 10px;
	color:#4d99b5;
	background:#fff;
	text-align:center;
	border-top:solid 2px #4d99b5;
	border-bottom:solid 2px #4d99b5;
}


#sec03,#sec05{
	padding-bottom:50px;
	background:#d0eaf4;
}

#sec03 .flow{
	width:90%;
	max-width:500px;
	margin:max(-4%,-55px) auto 50px;
}

#sec03 .flow .flexbox{
	padding:30px;
	background:#fff;
	border-radius:15px;
	box-shadow:0 0 15px rgb(0 0 0 / 30%);
	text-align:center;
	flex-direction:column;
	align-items:center;
}

#sec03 .flow .flexbox .order{
	width:36px;
	height:36px;
	margin-bottom:10px;
	color:#fff;
	background:#4d99b5;
	text-align:center;
	font-size:1.5em;
	border-radius:100%;
	aspect-ratio:1/1;
}

#sec03 .flow .flexbox .matter{
	margin-bottom:10px;
	color:#4d99b5;
	font-size:2em;
	font-weight:bold;
}

#sec03 .flow .flexbox .matter img{
	width:75%;
	max-width:275px;
}

#sec03 .flow .flexbox .detail{
	color:#333;
}

#sec03 .triangle{
	width:80px;
	height:30px;
	margin:20px auto;
	background:#4d99b5;
	clip-path:polygon(0 0,100% 0,50% 100%);
}


#sec04{
	padding-bottom:50px;
	background:#e0f3fa;
}

#sec04 p{
	margin-top:30px;
	padding:0 10px;
	color:#337d98;
	text-align:center;
}


#sec05 .trial{
	width:90%;
	max-width:1092px;
	margin:max(-4%,-55px) auto 50px;
}

#sec05 .trial .detail{
	margin-top:10px;
}