@charset "UTF-8";
.pc				{ display: block !important; }
.sp				{ display: none !important; }
img.pc			{ display: inline-block !important; }
img.sp			{ display: none !important; }
#line, .pageup	{ font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",  "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; }
#line .bgGray	{ background: #f8f8f8; }
#line .inner	{ max-width: 960px; width: 100%; margin: 0 auto; overflow: hidden; }
#line h2		{ padding: 40px 0; font-size: 34px; color: #333; font-weight: 300;}
#line .bgGray h2{ background-image: url("../images/bg_blow_gray_pc.gif");}
#line h3		{ margin: 20px 0; font-size: 158%; font-weight: 600; text-align: center; }
#line h4		{ margin: 30px 0 5px; font-size: 158%; text-align: center; }
#line .exp		{ margin-top: 15px; text-align: left; }

#line #mainVis		{ height: 0; padding-top: 490px; background: url("../images/p_main_line_pc.png") no-repeat center 0; /*overflow: hidden;*/ }
#line #mainVis img	{ display: none; }

#line #section01			{ padding: 0 0 55px; }
#line #section01 .add		{ position: relative; width: 866px; margin: 0 auto; }
#line #section01 .add .or	{ position: absolute; top: 220px; width: 100%; text-align: center; }
#line #section01 .left		{ float: left; width: 366px; }
#line #section01 .right		{ float: right; width: 366px; }
#line #section01 .btn		{ margin-top: 40px; text-align: center; }

#line #section02				{ padding: 0 0 40px; }
/*#line #section02 .flow li{
	float: left;
	width: 300px;
	margin-right: 3px;
	padding-right: 27px;
	background: url("../images/bg_ar_flow.gif") no-repeat right center;
}*/
#line #section02 .inner{
	box-sizing: border-box;
	/*max-width: 1100px;*/
	padding: 0 20px;
}

#line #section02 .flow ul{
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: 16px;
	align-items: stretch;
	justify-content: space-between;
}
#line #section02 .flow li{
	padding-right: 35px;
	margin-right: 10px;
	background: url(../images/arrow_gy_r.png) no-repeat right;
	background-size: 20px 38px;
}
#line #section02 .flow li.flow01,
#line #section02 .flow li.flow02,
#line #section02 .flow li.flow03,
#line #section02 .flow li.flow04{
	max-width: 400px;
}
#line #section02 .flow li.flow01 .exp,
#line #section02 .flow li.flow02 .exp{
	height: 54px;
}
#line #section02 .flow li.flow03 .exp,
#line #section02 .flow li.flow04 .exp{
	height: 81px;
}
#line #section02 .flow li .exp{
	margin-bottom: 10px;
	text-align: left;
	font-size: 14px;
	text-indent: -1em;
	padding-left: 1em;
}
#line #section02 .flow li .exp strong{
	font-size: 18px;
	font-weight: 300;
}
#line #section02 .flow li .figure img{
	max-width	: 100%;
}
#line #section02 .flow li.last{
	padding-right: 0;
	margin-right: 0;
	background: none;
}
#line #section02 .flow .finishContainer{
	background: #e9f8ec;
	max-width: 620px;
	width: 100%;
	margin: 30px auto 0;
	padding: 50px 20px;
	font-size: 20px;
	font-weight: 300;
	box-sizing: border-box;
}
#line #section02 .num			{ border-bottom: 2px solid #b5855e; }

#line #section03	{ padding-bottom: 40px; }
#line #section03 ul	{ width: 980px; }
#line #section03 li	{ float: left; width: 471px; margin: 0 19px 20px 0; }

@media screen and (min-width: 668px) and (max-width: 687px){
	#line #section02 .flow li.flow03 .exp,
	#line #section02 .flow li.flow04 .exp{
		height: 108px;
	}
}

@media screen and (min-width: 0px) and (max-width: 667px){
.pc				{ display: none !important; }
.sp				{ display: block !important; }
img.pc			{ display: none !important; }
img.sp			{ display: inline-block !important; }
a				{ text-decoration: none !important; }
.order li		{ margin-top: 13px; margin-bottom: 0 !important; }
#line .inner	{ width: auto; padding: 0 20px; }
#line h2		{font-size: 28px; padding: 20px 0 0; }
#line .bgGray h2{ background-image: url("../images/bg_blow_gray_sp.gif"), url("../images/bg_blow_gray_rep_sp.gif"); }

#header_logo     { width: 37%; float: left; padding-top: 1%;}
#header_inquiry  { width: 53%; float: right; }

#line #mainVis		{ height: auto; padding-top: 0; background: none; }
#line #mainVis img	{ display: block; width: 100%; height: auto; }

#line #section01			{ margin-top: 0; padding: 0 0 15px; }
#line #section01 .left		{ float: none; width: auto; }
#line #section01 .right		{ float: none; width: auto; }
#line #section01 .btn		{ margin-top: 20px; }
#line #section01 .btn img	{ max-width: 100%; height: auto; }

	#line #section02 .flow ul{
		display: block;
	}
#line #section02 .flow li{
	padding-right: 0;
	padding-bottom: 30px;
	margin-right: 0;
	margin-bottom: 10px;
	background: url("../images/arrow_gy_2x.png") no-repeat center bottom;
	background-size: 37px 17px;
}
	#line #section02 .flow li.flow01,
	#line #section02 .flow li.flow02,
	#line #section02 .flow li.flow03,
	#line #section02 .flow li.flow04{
		max-width: 100%;
	}
	#line #section02 .flow li.flow01 .exp,
	#line #section02 .flow li.flow02 .exp,
	#line #section02 .flow li.flow03 .exp,
	#line #section02 .flow li.flow04 .exp{
		height: auto;
	}
	#line #section02 .flow li .exp strong{
		font-size: 16px;
	}
	#line #section02 .flow .finishContainer{
		font-size: 16px;
		padding: 30px 15px;
		text-align: left;
	}
	#line #section02 .flow .finishContainer p{
		text-indent: -1em;
		padding-left: 1em;
	}
/*#line #section02 .flow li{
	float: none;
	width: auto;
	margin: 0 0 17px;
	padding: 0 0 25px;
	background: url("../images/bg_ar_flow_btm.gif") no-repeat center bottom;
	background-size: 15px 15px;
}*/
#line #section02 .flow li.last	{ margin-bottom: 0; padding-bottom: 0; }
#line #section02 .flow li p img	{ max-width: 55%; height: auto; }
#line #section03 ul			{ width: auto; }
#line #section03 li			{ float: none; width: auto; margin: 0 0 20px; }
#line #section03 li p img	{ max-width: 100%; height: auto; }

#header			{ text-align: center; }
#header #gNavi	{ padding: 10px 0 15px; border-top: 1px solid #959391; border-bottom: 1px solid #959391; background: -moz-linear-gradient(top, #b1957f, #876449); background: -webkit-gradient(linear, left top, left bottom, from(#b1957f), to(#876449)); }

#footer							{ min-width: inherit; padding-bottom: 0; background: none; }
#footer #fNavi					{ text-align: left; border-bottom: 1px solid #dcdcdc;}
#footer #fNavi li				{ display: block; float: left; width: calc(100% / 2 - 1px); }
#footer #fNavi li:nth-child(2n){
	border-left: solid 1px #dcdcdc;
}
#footer #fNavi li a				{ display: block; padding: 15px 10px; color: #333; border-top: 1px solid #dcdcdc;}
#footer #fNavi li.iconPc a:after{
	float: right;
	display: block;
	margin: 0;
	content: "";
	background: url("../images/arrow_line.png") no-repeat center;
	background-size: contain;
	width: 8px;
	height: 17px;
}
#footer address					{ padding: 10px 0; font-style: normal; }

.pageup a			{ display: block; padding: 10px 0; font-weight: 500; color: #333;}
.pageup a:before	{ content: "↑"; margin: 0 0.5em 0 0; }
}

/*  2022/03　改修追記
-------------------------------------*/
#section04 *,
.order *,
.merit_sec,
.merit_sec *,
.contact_sec *,
.contact_sec,
.step_sec,
.step_sec *{
	box-sizing: border-box;
}
.flex{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.btnStyle li{
	background: #05a849;
	border-radius: 3px;
	margin: 20px auto !important;
	float: none !important;
	max-width: 280px;
}
.btnStyle li:hover{
	background: #f18184;
}
	.btnStyle li a{
		display: block;
		color: #fff;
		position: relative;
		width: 100%;
		height: 100%;
		padding: 15px 10px;
		font-size: 20px;
		font-weight: 500;
	}
	.btnStyle li a:hover{
		text-decoration: none;
	}
		.btnStyle li a::before{
			content: "";
			display: block;
			background: url("../images/arrow_wh.png") no-repeat center;
			background-size: contain;
			width: 12px;
			height: 23px;
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
		}
#line .merit_outer{
	padding: 0 10px;
}
#line .merit_sec,
#line .contact_sec{
	max-width: 730px;
	margin: 100px auto;
	width: 100%;
	border: solid 1px #333;
}
	#line .merit_sec h3{
		margin-top: -31px;
		font-size: 40px;
		font-weight: 500;
		color: #059942;
	}
		#line .merit_sec h3 span{
			background: #fff;
			padding: 0 15px;
			border-bottom: dotted 4px #afd698;
		}
	#line .merit_sec ul{
		padding: 30px 0 20px;
		max-width: 490px;
		margin: 0 auto;
		width: 100%;
	}
		#line .merit_sec ul li{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 22px;
			margin-bottom: 30px;
		}
			#line .merit_sec ul li::before{
				content: "";
				display: inline-block;
				background: url("../images/icon_check.png") no-repeat center;
				background-size: contain;
				width: 36px;
				height: 33px;
				margin-right: 15px;
			}

#line .step_sec h3 span{
	position: relative;
	padding: 0 50px;
	display: inline-block;
	font-size: 34px;
	font-weight: 300;
	color: #333;
}
#line .step_sec ul li{
	width: 33.34%;
	padding: 25px;
	position: relative;
}
	#line .step_sec ul li::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 25px 0 25px 30px;
		position: absolute;
		top: 50%;
		right: -20px;
		transform: translateY(-50%);
		z-index: 1;
	}

#line .step_sec ul li.step1{
	background: #e9f8ec;
}
	#line .step_sec ul li.step1::before{
		border-color: transparent transparent transparent #e9f8ec;
	}

#line .step_sec ul li.step2{
	background: #e1f0e4;
}
	#line .step_sec ul li.step2::before{
		border-color: transparent transparent transparent #e1f0e4;
	}

#line .step_sec ul li.step3{
	background: #d3e6d7;
}
	#line .step_sec ul li.step3::before{
		content: none;
	}

#line .step_sec ul li figure{
	margin: 0 auto 20px;
	max-width: 190px;
	width: 100%;
}
	#line .step_sec ul li figure img{
		width: 100%;
		backface-visibility: hidden;
	}

#line .step_sec ul li .step_p{
	background: #333;
	color: #fff;
	padding: 4px 7px 2px;
}
	#line .step_sec ul li .step_p .num{
		font-size: 17px;
	}

#line .step_sec ul li .txtBox p{
	margin-top: 10px;
	font-size: 16px;
}

.receptionTime{
	font-size: 24px;
	margin-top: 20px;
}


#section04{
	padding: 80px 0;
}
#section04 ul li{
	background: #284f76;
	width: calc(96% / 3);
}
	#section04 ul li:hover{
		background: #2d6093;
	}

#section04 ul li a{
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 16px;
	padding: 20px 10px;
	position: relative;
}
#section04 ul li a:hover{
	text-decoration: none;
}
#section04 ul li a figure{
	margin-bottom: 15px;
}

#footer .fixedBnr,
#footer .fixedBnr *{
	box-sizing: border-box;
}
#footer .fixedBnr{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	z-index: 99;
}
	#footer .fixedBnr li{
		width: 100%;
	}
	#footer .fixedBnr li.sp{
		display: none;
	}
	#footer .fixedBnr li.sateiBnr{
		background: #284f76;
	}
	#footer .fixedBnr li.friendsBnr{
		background: #05a849;
	}
		#footer .fixedBnr a{
			justify-content: center;
			align-items: center;
			padding: 5px 20px;
			color: #fff;
			font-weight: 300;
			font-size: 14px;
			text-align: left;
		}
		#footer .fixedBnr a:hover{
			text-decoration: none;
			opacity: 0.6;
		}
		#footer .fixedBnr li.friendsBnr.pc a{
			font-size: 18px;
			font-weight: 500;
		}
			#footer .fixedBnr a figure{
				width: 50px;
				max-width: 60px;
				margin-right: 10px;
			}
				#footer .fixedBnr a figure img{
					width: 100%;
				}


@media screen and (max-width: 667px){
	#header > .clearfix.sp{
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		padding: 20px 0;
	}
	.btnStyle li a{
		font-size: 16px;
		padding: 10px;
	}
	#line .merit_sec{
		margin: 50px auto 35px;
	}
	#line .merit_sec h3{
		font-size: 22px;
		margin-top: -19px;
		margin-bottom: 10px;
	}
		#line .merit_sec h3 span{
			padding: 0 10px;
			border-bottom: dotted 2px #afd698;
		}
	#line .merit_sec ul{
		padding: 10px 15px 4px;
		max-width: 330px;
	}
		#line .merit_sec ul li{
			text-align: left;
			font-size: 14px;
			margin-bottom: 15px;
		}
			#line .merit_sec ul li::before{
				width: 23px;
				height: 20px;
				margin-right: 5px;
			}
	
	#line .step_sec h3 span{
		font-size: 22px;
		padding: 0;
	}
	#line .step_sec h3 span::before,
	#line .step_sec h3 span::after{
		background-size: contain;
		width: 22px;
		height: 64px;
	}
	#line .step_sec h3 span::before{
		left: -18px;
	}
	#line .step_sec h3 span::after{
		right: -18px;
	}
	
	.receptionTime{
		font-size: 20px;
		margin: 40px 0;
	}
	
	#section04 {
		padding: 10px 0;
	}
		#section04 ul{
			display: block;
		}
			#section04 ul li{
				width: 100%;
				margin-bottom: 20px;
			}
				#section04 ul li a{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10px 20px 10px 10px;
				}
					#section04 ul li a::after{
						content: "";
						display: block;
						background: url("../images/arrow_wh_2x.png") no-repeat center;
						background-size: contain;
						width: 12px;
						height: 23px;
						position: absolute;
						top: 50%;
						right: 10px;
						transform: translateY(-50%);
					}
					#section04 ul li a figure{
						margin-bottom: 0;
						margin-right: 15px;
						max-width: 60px;
						width: 20%;
					}
						#section04 ul li a figure img{
							width: 100%;
						}
	
	#footer{
		padding-bottom: 60px;
	}
	#footer .fixedBnr li{
		width: 50%;
	}
	#footer .fixedBnr li.sp{
		display: block;
	}
	#footer .fixedBnr li.pc{
		display: none;
	}
}
@media screen and (max-width: 600px){
	#line .step_sec ul{
		display: block;
		margin: 0 -20px;
	}
	#line .step_sec ul li{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		max-width: 510px;
		margin: 0 auto;
	}
	#line .step_sec ul li figure{
		width: 30%;
		max-width: 137px;
		margin: 0;
	}
	#line .step_sec ul li .txtBox{
		width: 65%;
		text-align: left;
	}
	#line .step_sec ul li::before{
		border-width: 30px 25px 0 25px;
		top: auto;
		right: auto;
		bottom: -13px;
		left: 50%;
		transform: translateX(-50%);
	}
	#line .step_sec ul li.step1::before{
		border-color: #e9f8ec transparent transparent transparent;
	}
	#line .step_sec ul li.step2::before{
		border-color: #e1f0e4 transparent transparent transparent;
	}
	#line .step_sec ul li .step_p{
		font-size: 12px;
	}
	#line .step_sec ul li .step_p .num {
		font-size: 15px;
	}

	
}
@media screen and (max-width: 374px){
	#footer .fixedBnr a{
		padding: 5px;
	}
}



