@charset "utf-8";


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


/* ------------------------------------------------------------ contact */
#contact { padding: 40px 0 100px;}
	
#contact .intro { font-size: 28px; font-weight: 500; text-align: center; line-height: 1.786; margin: 0 auto 38px;}
#contact .caution {	font-size: 16px; text-align: center; margin: 0 0 50px;}
#contact .caution span { color: #ad1c25;}
#contact .flow { }
#contact .flow ul { display: flex; justify-content: center; align-items: center; margin-bottom: 70px;}
#contact .flow li { position: relative; width: 70px; font-size: 20px; letter-spacing: 0.1em; font-weight: 500; color: #c2c2c2; text-align: center; margin-right: 170px;}
#contact .flow li:after { position: absolute; content: ""; display: inline-block; top: 35px; left: 90px; width: 130px; height: 2px; background-color: #c2c2c2;}
#contact .flow li:last-child { margin-right: 0;}
#contact .flow li:last-child:after { display: none;}
#contact .flow li span { display: block; font-size: 30px; color: #c2c2c2; font-family: 'Metropolis-Medium', sans-serif; width: 70px; border: 2px solid #c2c2c2; border-radius: 50%; margin-bottom: 10px; padding: 20px 0 16px;}
#contact .flow li.active { color: #004bb6;}
#contact .flow li.active span { color: #fff; border: 0px; background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); padding: 22px 0 18px;}


#contact table { width: 100%; margin: 0 auto 66px;}

#contact table tr th { width: 253px; text-align: left; padding: 25px 0;}
#contact table tr th span { color: #ad1c25;}
#contact table tr.top th { vertical-align: top;	padding: 15px 0 25px; letter-spacing: 0.1em;}
#contact table tr td { padding: 25px 0; width: 847px;}
#contact table tr .double { display: flex; justify-content: space-between;}
#contact table .long,
#contact table .half,
#contact table .textarea { padding: 12px 26px; background: #fff; border: 1px solid #c2c2c2;}
#contact table .long { width: 100%;}
#contact table .half { width: 390px;}
#contact table .textarea { width: 100%; height: 300px;}

#contact .privacy { margin-bottom: 60px;}
#contact .privacy .box { width: 100%; height: 200px; overflow-y: scroll; border: 1px solid #c2c2c2; padding: 70px 100px; margin-bottom: 50px;}
#contact .privacy .box .bold { font-size: 20px; font-weight: 700; letter-spacing: 0.1em; text-align: center; margin-bottom: 45px;}
#contact .privacy .box .blue { font-size: 16px; color: #0156bc; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 1em;}
#contact .privacy .box .txt { font-size: 16px; font-weight: 400; line-height: 1.875; margin-bottom: 61px;}
#contact .privacy .box .txt:last-child { margin-bottom: 0;}

#contact .privacy .agreement { display: block; font-size: 16px; color: #0049af; letter-spacing: 0.1em; margin-bottom: 40px; text-align: center; font-feature-settings: "palt";}
#contact .privacy small { display: block; text-align: center; font-size: 14px;}


#contact .confirmation { }
#contact .confirmation .btns { display: block; width: 400px; line-height: 70px; font-size: 18px;  margin: 0 auto;}
#contact .confirmation .btns:after { right: 28px; width: 10px; height: 10px;}

/* ------------------------------------------------------------ error */
#error { padding: 50px 0;}

	#error h3 { 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; color: red; }
	#error .btns { width: 400px; line-height: 70px; font-size: 18px; margin: 0 auto;}
	#error .back { background: #c9c9c9; color: #000;}


/* ------------------------------------------------------------ confirm */
#confirm { padding: 50px 0;}

	#confirm h3 { font-size: 32px; font-weight: 500; text-align: center; margin: 0 0 40px;}
	
	#confirm .caution { font-size: 16px; text-align: center; margin: 0 0 40px;}
	
	#confirm .flow { }
#confirm .flow ul { display: flex; justify-content: center; align-items: center; margin-bottom: 70px;}
#confirm .flow li { position: relative; width: 70px; font-size: 20px; letter-spacing: 0.1em; font-weight: 500; color: #c2c2c2; text-align: center; margin-right: 170px;}
#confirm .flow li:after { position: absolute; content: ""; display: inline-block; top: 35px; left: 90px; width: 130px; height: 2px; background-color: #c2c2c2;}
#confirm .flow li:last-child { margin-right: 0;}
#confirm .flow li:last-child:after { display: none;}
#confirm .flow li span { display: block; font-size: 30px; color: #c2c2c2; font-family: 'Metropolis-Medium', sans-serif; width: 70px; border: 2px solid #c2c2c2; border-radius: 50%; margin-bottom: 10px; padding: 20px 0 16px;}
#confirm .flow li.active { color: #004bb6;}
#confirm .flow li.active span { color: #fff; border: 0px; background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); padding: 22px 0 18px;}

	#confirm table { width: 90%; margin: 0 auto 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 20px 1em;}
	
	#confirm table tr td { line-height: 1.5; padding: 20px 0;}
	
	#confirm .confirmation { display: flex; justify-content: center;}
	#confirm .confirmation .btns { width: 400px; line-height: 70px; font-size: 18px; margin: 0 15px;}
	#confirm .confirmation .back { background: #c9c9c9; color: #000;}
#confirm .confirmation .forward { background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); color: #fff;}

/* ------------------------------------------------------------ thanks */
#thanks { margin: 50px 0 100px;}
	
	#thanks h2 { font-size: 32px; font-weight: 500; text-align: center; margin: 0 0 40px;}
	#thanks .flow { }
	#thanks .flow ul { display: flex; justify-content: center; align-items: center; margin-bottom: 70px;}
	#thanks .flow li { position: relative; width: 70px; font-size: 20px; letter-spacing: 0.1em; font-weight: 500; color: #c2c2c2; text-align: center; margin-right: 170px;}
	#thanks .flow li:after { position: absolute; content: ""; display: inline-block; top: 35px; left: 90px; width: 130px; height: 2px; background-color: #c2c2c2;}
	#thanks .flow li:last-child { margin-right: 0;}
	#thanks .flow li:last-child:after { display: none;}
	#thanks .flow li span { display: block; font-size: 30px; color: #c2c2c2; font-family: 'Metropolis-Medium', sans-serif; width: 70px; border: 2px solid #c2c2c2; border-radius: 50%; margin-bottom: 10px; padding: 20px 0 16px;}
	#thanks .flow li.active { color: #004bb6;}
	#thanks .flow li.active span { color: #fff; border: 0px; background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); padding: 22px 0 18px;}

	#thanks .caution { font-size: 20px; text-align: center; font-weight: 500; 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;}
	#thanks .btns { width: 400px; line-height: 70px; font-size: 18px; margin: 0 auto;}
	#thanks .forward { background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); color: #fff;}








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

@media only screen and (max-width:768px) {
	
/* ------------------------------------------------------------ fv */
#contact { padding: 40px 0 50px;}
	
#contact .intro { font-size: 18px; margin: 0 auto 15px;}
#contact .caution {	font-size: 13px; margin: 0 0 20px;}
#contact .flow { }
#contact .flow ul { display: flex; justify-content: center; align-items: center; margin-bottom: 30px;}
#contact .flow li { position: relative; width: 50px; font-size: 14px; margin-right: 60px;}
#contact .flow li:after { top: 25px; left: 60px; width: 40px; height: 2px; background-color: #c2c2c2;}
#contact .flow li span { font-size: 24px; width: 50px; margin-bottom: 10px; padding: 12px 0 10px;}
#contact .flow li.active { color: #004bb6;}
#contact .flow li.active span { padding: 14px 0 12px;}

#contact table { width: 100%; margin: 0 auto 50px;}
#contact table tr,
#contact table th,
#contact table td { display: block;}

#contact table tr th { width: 100%; font-size: 13px; padding: 10px 0 5px;}
#contact table tr th span { color: #ad1c25;}
#contact table tr.top th {	padding: 20px 0 5px;}
#contact table tr td { width: 100%; padding: 5px 0 15px;}
#contact table tr .double { display: block;}
#contact table .long,
#contact table .half,
#contact table .textarea { font-size: 13px; padding: 8px 13px; }
#contact table .long { width: 100%;}
#contact table .half { width: 100%; margin-bottom: 10px;}
#contact table .half:last-child { margin-bottom: 0;}
#contact table .textarea { width: 100%; height: 234px;}

#contact .privacy { margin-bottom: 50px;}
#contact .privacy .box { width: 100%; height: 200px; padding: 35px 20px; margin-bottom: 40px;}
#contact .privacy .box .bold { font-size: 16px; margin-bottom: 30px;}
#contact .privacy .box .blue { font-size: 13px;}
#contact .privacy .box .txt { font-size: 13px;  margin-bottom: 40px;}

#contact .privacy .agreement { font-size: 13px; line-height: 1.4; margin-bottom: 20px;}
#contact .privacy small { font-size: 12px; line-height: 1.4;}


#contact .confirmation { }
#contact .confirmation .btns { display: block; width: 100%; line-height: 50px; font-size: 14px;}


/* ------------------------------------------------------------ error */
	#error h3 {
		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;
	}
	#error .btns { width: 100%; font-size: 16px; line-height: 50px; font-weight: 400;}

/* ------------------------------------------------------------ confirm */
	#confirm h3 {
		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 .flow { }
#confirm .flow ul { display: flex; justify-content: center; align-items: center; margin-bottom: 30px;}
#confirm .flow li { position: relative; width: 50px; font-size: 14px; margin-right: 60px;}
#confirm .flow li:after { top: 25px; left: 60px; width: 40px; height: 2px; background-color: #c2c2c2;}
#confirm .flow li span { font-size: 24px; width: 50px; margin-bottom: 10px; padding: 12px 0 10px;}
#confirm .flow li.active { color: #004bb6;}
#confirm .flow li.active span { padding: 14px 0 12px;}

	#confirm table {
		display: block;
		width: 100%;
		margin: 0 0 50px;
	}
	
	#confirm table tbody {
		display: block;
	}
	
	#confirm table tr {
		display: block;
	}
	
	#confirm table tr th {
		display: block;
		width: 100%;
		font-size: 14px;
		padding: 15px 0 5px;
	}
	
	#confirm table tr td {
		display: block;
		font-size: 14px;
		line-height: 1.5;
		padding: 0 0 15px;
	}
	#confirm .confirmation { display: block;}
	
	#confirm .confirmation .btns { width: 100%; font-size: 16px; line-height: 50px; font-weight: 400; margin: 0 auto;}
	#confirm .confirmation .back { margin-bottom: 10px;}
	
/* ------------------------------------------------------------ thanks */
	#thanks { margin: 30px 0 70px;}
	
	#thanks h2 { font-size: 22px; margin: 0 0 25px; padding: 0 0 20px;}
	#thanks .flow { }
	#thanks .flow ul { display: flex; justify-content: center; align-items: center; margin-bottom: 30px;}
	#thanks .flow li { position: relative; width: 50px; font-size: 14px; margin-right: 60px;}
	#thanks .flow li:after { top: 25px; left: 60px; width: 40px; height: 2px; background-color: #c2c2c2;}
	#thanks .flow li span { font-size: 24px; width: 50px; margin-bottom: 10px; padding: 12px 0 10px;}
	#thanks .flow li.active { color: #004bb6;}
	#thanks .flow li.active span { padding: 14px 0 12px;}

	#thanks .caution { font-size: 16px; line-height: 1.7; margin: 0 0 20px;}
	
	#thanks small { font-size: 12px; line-height: 2; text-align: left; margin: 0 0 30px;}
	#thanks .btns { width: 100%; font-size: 16px; line-height: 50px; font-weight: 400;}
	#thanks .forward { }

	
}