@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{
	margin-bottom:-5px;
}


#sec02{
	background:#d0eaf4;
	column-gap:20px;
	position:relative;
	align-items:center;
}

#sec02 .img{
	width:40%;
}

#sec02 .img::after{
	width:45px;
	height:100%;
	margin-left:-43px;
	background:linear-gradient(to left,#d0eaf4,#d0eaf400); 
	position:absolute;
	content:"";
}

#sec02 .img img{
	width:100%;
}

#sec02 .textbox{
	width:60%;
	max-width:720px;
	margin:0 auto;
	padding:40px 0;
}

#sec02 .textbox h2{
	width:fit-content;
	width:-moz-fit-content;
	margin-bottom:15px;
	color:#337d98;
	border-bottom:dotted 3px #4db57d;
}

#sec02 .textbox p.intro{
	margin-bottom:15px;
	color:#333;
	line-height:1.75em;
}

#sec02 .textbox .button{
	margin-left:auto;
	margin-right:0;
}


#sec03{
	padding:60px 0;
	background:url("./../img/top/picture/top_picture2.png") no-repeat center/cover;
}

#sec03 .textbox{
	width:90%;
	max-width:950px;
	margin:0 auto;
	padding:40px 50px;
	background:#d0eaf4aa;
}

#sec03 .textbox h2{
	width:fit-content;
	width:-moz-fit-content;
	margin:0 auto 15px;
	padding:7px 25px;
	color:#fff;
	background:#4d99b5;
	text-align:center;
}

#sec03 .textbox p{
	color:#333;
}

#sec03 .textbox p.intro{
	margin-bottom:15px;
	line-height:1.75em;
}

#sec03 .textbox p.intro span{
	line-height:22px;
	font-size:.7em;
	vertical-align:top;
}

#sec03 .textbox p.tips{
	font-size:.9em;
}


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

#sec04 .intro{
	width:90%;
	max-width:950px;
	margin:max(-4%,-55px) auto 0;
	column-gap:20px;
	align-items:start;
	justify-content:space-between;
}

#sec04 .intro .textbox{
	width:50%;
	padding:30px;
	background:#fff;
	border-radius:15px;
	box-shadow:0 0 15px rgb(0 0 0 / 30%);
}

#sec04 .intro .textbox img{
	width:100%;
}

#sec04 .intro .textbox h2{
	width:fit-content;
	width:-moz-fit-content;
	margin:-15px auto 10px;
	color:#4d99b5;
	border-bottom:solid 2px #4d99b5;
}

#sec04 .intro .textbox p{
	color:#555;
}


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

#sec05 .textbox{
	width:90%;
	max-width:950px;
	margin:0 auto 25px;
	border:solid 1px #4795b2;
}

#sec05 .textbox h2{
	padding:5px 0;
	color:#fff;
	background:#4795b2;
	text-align:center;
	font-weight:bold;
	border-bottom:solid 1px #4795b2;
}

#sec05 .textbox:nth-child(2){
	margin-top:max(-4%,-55px);
}

#sec05 .textbox .innerbox{
	background:#d0eaf4;
	column-gap:20px;
}

#sec05 .textbox .innerbox img{
	width:30%;
}

#sec05 .textbox .innerbox .guide{
	width:70%;
	padding:10px 0;
	line-height:1.75em;
	color:#333;
}

#sec05 .tips{
	width:90%;
	max-width:fit-content;
	max-width:-moz-fit-content;
	margin:0 auto 25px;
	color:#337d98;
	text-align:center;
	font-size:1.125em;
	font-weight:bold;
	border-bottom:dotted 3px #4db57d;
}

#sec05 .tips br{
	display:none;
}


#sec06{
	padding-bottom:50px;
	background:#d0eaf4;
}

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

#sec06 .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;
}

#sec06 .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;
}

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

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

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

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


@media (max-width:767px){
	#sec02{
		row-gap:10px;
		column-gap:0;
		flex-direction:column;
	}
	
	#sec02 .img{
		width:100%;
	}

	#sec02 .img::after{
		display:none;
	}
	
	#sec02 .textbox{
		width:90%;
		margin:0 auto;
		padding:10px 15px;
	}

	#sec02 .textbox .button{
		margin:0 auto;
	}
		

	#sec04 .intro{
		row-gap:20px;
		column-gap:0;
		flex-direction:column;
	}

	#sec04 .intro .textbox{
		width:100%;
	}



	#sec05 .textbox .innerbox{
		row-gap:10px;
		column-gap:0;
		flex-direction:column;
	}

	#sec05 .textbox .innerbox img,#sec05 .textbox .innerbox .guide{
		width:100%;
	}

	#sec05 .textbox .innerbox .guide{
		padding:0 10px 10px;
	}

	#sec05 .tips br{
		display:block;
	}
}