@charset "utf-8";

/* ------------------------------------------------------------ contact */

main { border-bottom: 1px solid #000;}

#top .top_bg { background-image: url(../images/con/fv_bg.jpg); }

#estimate { width: 750px; margin: 0 auto; padding: 0 0 100px;}

.flow { text-align: center; margin-bottom: 80px;}
.flow p { font-size: 22px; margin-bottom: 20px;}
.flow ul { color: #000000; list-style: none; overflow: hidden; display: flex;}
.flow ul li { position: relative; background-color: #eee; line-height: 50px; color: #000; display: block; font-size: 16px; width: calc( 100% / 3 ); padding: 0 10px 0 40px; text-align: center; border: 1px solid #c9c9c9; z-index: 1;}
.flow ul li:first-child { padding-left: 20px;}
.flow ul li:before,
.flow ul li:after { display: block; content: "";  position: absolute; z-index: 2; left: -13px;}
.flow ul li:first-child::before,
.flow ul li:first-child::after { display: none;}


.flow ul li::before { background-color: #eee; border-right: 1px solid #c9c9c9; height: 25px; margin-bottom: -25px; margin-left: auto; margin-right: -25px; transform: skew(30deg); -o-transform: skew(30deg); -ms-transform: skew(30deg); -moz-transform: skew(30deg); -webkit-transform: skew(30deg); width: 22px; top: 0;}
.flow ul li::after { background-color: #eee; border-right: 1px solid #c9c9c9; height: 25px; margin-left: auto; margin-right: -25px; margin-top: -25px; transform: skew(-30deg); -o-transform: skew(-30deg); -ms-transform: skew(-30deg); -moz-transform: skew(-30deg); -webkit-transform: skew(-30deg); width: 22px; bottom: 0;}

.flow li.active { background-color: #003597; color: #fff; border: 1px solid #003597;}
.flow .active + li::before, .flow .active + li::after { background-color: #003597; border: 1px solid #003597; height: 26px;}
.flow .active + li::before { top: -1px;}
.flow .active + li::after { bottom: -1px;}
	
	
#estimate .estimate { position: relative;}
#estimate .estimate img { position: absolute; top: 20px; right: -50px;}
#estimate .intro { font-size: 22px; text-align: center; line-height: 1.818; margin: 0 auto 30px;}
#estimate .intro span { display: block; margin-top: 5px;}
#estimate .caution { font-size: 16px; text-align: center; line-height: 1.75; margin: 0 0 50px;}
#estimate .caution span { color: #c50021;}

#estimate table { width: 100%; margin: 0 auto 20px;}

#estimate table tr th { font-family: 'NotoSansJP-Regular'; width: 200px; text-align: left; padding: 0 0 25px;}
#estimate table tr th span { color: #c50021;}
#estimate table tr.top th { vertical-align: top;	padding: 15px 0 25px;}
#estimate table tr.request th { display: block;}

#estimate table tr td { width: 530px; font-family: 'NotoSansJP-Regular'; padding: 0 0 25px;}
#estimate table tr td input { width: 100%; padding: 20px; border: 1px solid #c9c9c9; background-color: #eee;}
#estimate table tr td textarea { width: 100%; padding: 20px; box-sizing: border-box; border: 1px solid #c9c9c9; background-color: #eee; line-height: 1.61;}
#estimate table tr td p { margin: 0 0 15px;}

#estimate table tr td .short { width: 180px; margin-right: 10px;}

#estimate table tr.request td { }
#estimate table tr.request td input { width: 20px;}
#estimate table tr.request td ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
#estimate table tr.request td li { width: calc( 100% / 3 ); margin-bottom: 23px;}

#estimate table tr.check td { padding: 15px 0 25px;}
#estimate table tr.check td input { width: 20px;}
#estimate table tr.check td a { color: #003597; text-decoration: underline; text-underline: #003597;}
	
#estimate .btns { text-align: center; margin-bottom: 80px;}
#estimate .btns input { width: 300px; padding: 20px 0; color: #fff; font-family: 'NotoSansJP-Medium'; background-color: #a60c0c; border-radius: 50px;}

#estimate .telbox { width: 670px; text-align: center; margin: 0 auto; padding: 30px 0; background-color: #fff; border: 1px solid #000;}
#estimate .telbox p { font-size: 22px; margin-bottom: 20px;}
#estimate .telbox a { font-size: 50px;}
#estimate .telbox a img { margin-right: 9px; vertical-align: -1px;}
#estimate .telbox a span { display: block; font-size: 15px; margin-top: 13px;}

	

/* ------------------------------------------------------------ error */
#error {
}

	#error h2 { font-size: 32px; text-align: center; margin: 0 0 40px; padding: 0 0 30px;}
	
	#error .caution { font-size: 16px;	text-align: center; margin: 0 0 40px;}
	
	#error .alert { margin: 0 0 50px;}
	
	#error .alert span { display: block; text-align: center; margin: 0 0 20px;}
	#error .btns { margin-bottom: 100px;}
	#error .btns .back_btn a {margin: 0 auto; display: block; text-align: center; width: 300px; font-size: 14px; padding: 15px 0; color: #000; font-family: 'NotoSansJP-Medium'; background-color: #eee; border-radius: 50px;}


/* ------------------------------------------------------------ confirm */

#confirm { width: 1100px; margin: 0 auto; padding: 0 0 100px;}
	
	#confirm h2 { font-size: 32px; text-align: center; margin: 0 0 40px; padding: 0 0 30px;}
	
	#confirm .caution { font-size: 16px; text-align: center; margin: 0 0 40px;}
	
	#confirm table { width: 100%; margin: 0 0 50px;}
	
	#confirm table tr { border-bottom: solid 1px #e5e5e5;}
	
	#confirm table tr:first-of-type { border-top: solid 1px #e5e5e5;}
	
	#confirm table tr th { width: 180px; line-height: 1.5; font-weight: bold; text-align: left;	padding: 20px 0;}
	
	#confirm table tr td { line-height: 1.5; padding: 20px 0; font-family: 'NotoSansJP-Regular';}
	
	#confirm .btns { display: flex; justify-content: center;}
	
	#confirm .btns .back_btn a { display: block; text-align: center; width: 300px; font-size: 14px; padding: 15px 0; color: #000; font-family: 'NotoSansJP-Medium'; background-color: #eee; border-radius: 50px; margin-right: 20px;}
	#confirm .btns input { width: 300px; font-size: 14px; padding: 15px 0; color: #fff; font-family: 'NotoSansJP-Medium'; background-color: #a60c0c; border-radius: 50px; margin-left: 20px;}


/* ------------------------------------------------------------ thanks */
#thanks { margin: 50px 0 100px;}
	
	#thanks h2 { font-size: 32px; text-align: center; margin: 0 0 40px; padding: 0 0 30px;}
	
	#thanks .caution { font-size: 16px; text-align: center; line-height: 1.7; margin: 0 0 30px;}
	
	#thanks small { display: block; font-size: 14px; text-align: center; line-height: 2; margin: 0 0 40px;}








/* ------------------------------------------------------------ mobile */

@media only screen and (max-width:768px) {
	
/* ------------------------------------------------------------ fv */

	#top .top_bg { background-image: url(../images/con/fv_bg_sp.jpg); }
	
	#estimate { width: 90%; padding: 20px 0 0; margin: 0 auto;}
	
	#estimate .inner { width: 90%; margin: 0 auto;}
	
	
	.flow { margin-bottom: 50px;}
	.flow p { font-size: 18px; margin-bottom: 15px;}
	.flow ul { position: relative; width: 100%; margin: 0 auto; display: block; z-index: 3; padding-bottom: 10px;}
	.flow ul li { background-color: #eee; line-height: 50px; float: none; font-size: 14px; width: 100%; padding: 10px 0 0;}
	.flow ul li:first-child { padding-left: 0;}
	.flow ul li:before,
	.flow ul li:after { z-index: 2; left: 0;}
	.flow ul li:first-child::before,
	.flow ul li:first-child::after { display: none;}
		
	.flow ul li::before { top: -0.5px; background: none; border-top: 8px solid #c9c9c9; border-right: 45vw solid transparent; border-bottom: 0px solid transparent; border-left: 45vw solid transparent; height: 8px; margin-bottom: 0; margin-left: auto; margin-right: -0; transform: skew(0deg); -o-transform: skew(0deg); -ms-transform: skew(0deg); -moz-transform: skew(0deg); -webkit-transform: skew(0deg); 
		width: 100%;}
	.flow ul li::after { bottom: 62px; background: none; height: 7.5px; border-top: 7.5px solid #eee; border-right: 45vw solid transparent; border-bottom: 0px solid transparent; border-left: 45vw solid transparent; margin-left: auto; margin-right: -0; margin-top: -0; position: relative; transform: skew(0deg); -o-transform: skew(0deg); -ms-transform: skew(0deg); -moz-transform: skew(0deg); -webkit-transform: skew(0deg); width: 100%;}
	
	.flow li.active { }
	.flow .active + li::before, .flow .active + li::after { background: none; border-top: 8px solid #003597; border-right: 45vw solid transparent; border-bottom: 0px solid transparent; border-left: 45vw solid transparent; height: 8px; top: -61px; left: 0; width: 100%;}	
	.flow .active + li::before { display: none;}
	
	.flow ul:before,
	.flow ul:after { display: block; content: "";  position: absolute; z-index: 2;}
	.flow ul:before { height: 8px; border-top: 8px solid #c9c9c9; border-right: 45vw solid transparent; border-bottom: 0px solid transparent; border-left: 45vw solid transparent; bottom: 2px;}
	.flow ul:after { height: 7.5px; border-top: 7.5px solid #eee; border-right: 45vw solid transparent; border-bottom: 0px solid transparent; border-left: 45vw solid transparent; bottom: 4px;}
	
	
	#estimate .estimate { position: relative;}
	#estimate .estimate img { position: static; margin: 0 auto 31px;;}
	#estimate .intro { font-size: 15px; margin: 0 auto 20px;}
	#estimate .intro span { font-size: 18px; line-height: 1.444; margin-top: 19px;}
	#estimate .caution { font-size: 12px; margin: 0 0 40px; font-feature-settings: "palt";}
	
	#estimate .input {
		width: 100%;
		margin: 0 auto 20px;
	}
	
	#estimate table,
	#estimate table tbody,
	#estimate table tr { display: block;}
	
	#estimate table tr th { display: block; width: 100%; font-size: 13px; padding: 0 0 16px; font-family: 'NotoSansJP-Medium'; }
	#estimate table tr.top th { padding: 0 0 16px;}
	
	#estimate table tr td { width: 100%; display: block; padding: 0 0 30px;}
	#estimate table tr td input { width: 100%; font-size: 13px; padding: 17px 14px;}
	#estimate table tr td textarea { width: 100%; height: 325px; font-size: 13px; padding: 17px 14px; box-sizing: border-box;}
	#estimate table tr td p { margin: 0 0 15px;}
	
	#estimate table tr td .short { width: 49%; margin-right: 0;}
	#estimate table tr td .short:first-child { margin-right: 2%;}

	#estimate table tr.request td { }
	#estimate table tr.request td input { width: 20px;}
	#estimate table tr.request td ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
	#estimate table tr.request td li { width: 50%; font-size: 13px; margin-bottom: 20px;}
	
	#estimate table tr.top td { padding-bottom: 0;}
	
	#estimate table tr.check td { padding: 6px 0 20px; text-align: center;}
	#estimate table tr.check td input { width: 20px;}

	
	#estimate .btns { text-align: center; margin-bottom: 50px;}
	#estimate .btns input { width: 100%; padding: 25px 0;}
		


/* ------------------------------------------------------------ error */


	#error h2 {
		font-size: 22px;
		margin: 0 0 25px;
		padding: 0 0 20px;
	}
	
	#error .caution {
		font-size: 14px;
		line-height: 1.7;
		margin: 0 0 40px;
	}
	
	#error .alert {
		margin: 0 0 50px;
	}
	
	#error .alert span {
		font-size: 14px;
		margin: 0 0 20px;
	}

/* ------------------------------------------------------------ confirm */


	#confirm { width: 90%; margin: 0 auto;}
	
	#confirm h2 { font-size: 22px; margin: 0 0 25px; padding: 0 0 20px;}
	
	#confirm .caution { font-size: 14px; line-height: 1.7; margin: 0 0 40px;}
	
	#confirm table,
	#confirm table tbody,
	#confirm table tr,
	#confirm table tr th,
	#confirm table tr td { display: block;}
	
	#confirm table { width: 100%; margin: 0 0 50px;}
	
	
	#confirm table tr th { width: 100%; font-size: 14px; padding: 15px 0 5px; border: 0px;}
	
	#confirm table tr td { font-size: 14px; line-height: 1.5; padding: 0 0 15px; border: 0px;}
	
	#confirm .btns { display: block;}
	#confirm .btns .back_btn a { width: 100%; padding: 24px 0; margin: 0 0 20px;}
	#confirm .btns input { width: 100%; padding: 20px 0; margin-left: 0;}
	
/* ------------------------------------------------------------ thanks */
	#thanks {
		margin: 30px 0 70px;
	}
	
	#thanks .flow ul:before { border-top: 8px solid #003597;}
	#thanks .flow ul:after { display: none;}
	
	#thanks h2 {
		font-size: 22px;
		margin: 0 0 25px;
		padding: 0 0 20px;
	}
	
	#thanks .caution {
		font-size: 14px;
		line-height: 1.7;
		margin: 0 0 20px;
	}
	
	#thanks small {
		font-size: 12px;
		line-height: 2;
		text-align: left;
		margin: 0 0 30px;
	}

	
}