@charset "utf-8";

/* ------------------------------------------------------------ #contact */
#contact{background: #F2F2F2; padding: 55px 0 126px;}
#contact .form_box{margin: 72px 0 0; background: #fff; padding: 72px 0 54px;}
#contact .form_box form{width: 900px; margin: 0 auto;}
#contact .form_box form .form_list_box .form_list p{font-family: 'Noto-Sans-JP-Medium'; line-height: 200%; text-align: left;}
#contact .form_box form .form_list_box .form_list:not(:last-child){margin: 0 0 20px;}
#contact .form_box form .form_list_box .form_list:first-child{margin: 0 0 44px;}
#contact .form_box form .form_list_box .form_list p span{color: #FF0000; line-height: 110%;}
#contact .form_box form .form_list_box .form_list .input_box{padding-top: 10px;}
#contact .form_box form .form_list_box .form_list .input_box input{width: 100%; background: #F4F5F7; padding: 20px; border: none;}
#contact .form_box form .form_list_box .form_list .input_box textarea{width: 100%; background: #F4F5F7; padding: 20px; border: none; min-height: 319px; height: 100%; resize: none;}
#contact .form_box form .form_list_box .form_list .input_flex{width: 100%; gap: 28px;}
#contact .form_box form .form_list_box .form_list .input_flex .box{width: 50%;}
#contact .form_box form .form_list_box .form_list .input_flex .box input{width: 100%; background: #F4F5F7; padding: 20px; border: none;}
#contact .form_box form .form_list_box .form_list .radio_box{padding: 18px 0 0;}
#contact .form_box form .form_list_box .form_list .radio_box { display: flex; flex-wrap: wrap; align-items: center; gap: 28px;}

#contact .form_box form .form_list_box .form_list .radio_box .radio_item { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.4; color: #111; user-select: none; -webkit-user-select: none; }

/* 本物のradioは見えなくするが、操作は可能にする */
#contact .form_box form .form_list_box .form_list .radio_box .radio_item input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;}

/* 外側の丸 */
#contact .form_box form .form_list_box .form_list .radio_box .radio_item .radio_mark { position: relative; flex: 0 0 20px; width: 20px; height: 20px; border: 1.5px solid #222; border-radius: 50%;	background: #fff; box-sizing: border-box;}

#contact .form_box form .form_list_box .form_list .radio_box .radio_item .radio_mark::after {content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #222; transform: translate(-50%, -50%) scale(0); transition: transform 0.2s ease;}
#contact .form_box form .form_list_box .form_list .radio_box .radio_item input[type="radio"]:checked + .radio_mark::after {transform: translate(-50%, -50%) scale(1);}
#contact .form_box form .form_list_box .form_list .radio_box .radio_item input[type="radio"]:focus-visible + .radio_mark {outline: 2px solid #4da3ff; outline-offset: 2px;}
#contact .form_box form .form_list_box .form_list .radio_box .radio_item .radio_text {display: inline-block;}
#contact .form_box form .form_list_box .form_list .radio_box .radio_item:hover .radio_mark {border-color: #000;}

.flex_btns{margin: 60px 0 0; justify-content: center; display: flex; gap: 0 30px;}
.flex_btns .submit_btn{background:#2F4772; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; line-height: 144.4%; padding: 21px 0; text-align: center; color: #fff; display: block;width: 360px; }
.flex_btns .submit_btn:hover{color: #fff;}
.flex_btns .back_btn{background:#E0E0E0; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; line-height: 144.4%; padding: 21px 0; text-align: center; color: #fff; display: block;width: 360px; }


/* ------------------------------------------------------------ error */
#error { padding: 200px 0 100px;}
#error h3 { font-size: 50px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; padding: 0 0 70px;}
#error .caution { font-size: 20px; text-align: center; margin: 0 0 40px;}
#error .alert { margin: 0 0 50px;}
#error .alert span { display: block; text-align: center; margin: 0px 0px 22px; line-height: 160%;}
#error .btns .back_btn a { display: inline-block;}


/* ------------------------------------------------------------ confirm */
#confirm { padding: 200px 0 100px;}
#confirm h3 { font-size: 50px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; padding: 0 0 70px;}
#confirm .caution { font-size: 20px; text-align: center; margin: 0 0 40px;}
#confirm form{width: 80%; margin: 0 auto;}
#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: 250px; line-height: 160%; font-weight: bold; text-align: left; padding: 20px 0; font-family: 'Noto-Sans-JP-Medium'; font-size: 18px;}
#confirm table tr td { line-height: 160%; padding: 20px 0; font-size: 16px;}


/* ------------------------------------------------------------ thanks */
#thanks { margin: 200px 0 100px; }
#thanks h3 { font-size: 50px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; padding: 0 0 70px; }
#thanks .caution { font-size: 20px; text-align: center; line-height: 1.7; margin: 0 0 30px; }
#thanks small { display: block; font-size: 16px; text-align: center; line-height: 2; margin: 0 0 40px; }




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

@media only screen and (max-width:768px) {
	
	/* ------------------------------------------------------------ #contact */
	#contact{padding: 60px 0 70px;}
	#contact .form_box{margin: 30px 0 0; padding: 30px 5% 50px;}
	#contact .form_box form{width: 100%; margin: 0 auto;}
	#contact .form_box form .form_list_box .form_list:not(:last-child){margin: 0 0 20px;}
	#contact .form_box form .form_list_box .form_list:first-child{margin: 0 0 31px;}
	#contact .form_box form .form_list_box .form_list .input_box{padding-top: 10px;}
	#contact .form_box form .form_list_box .form_list p {font-size: 14px; line-height: 160%;}
	
	#contact .form_box form .form_list_box .form_list .input_box input{width: 100%; padding: 15px; }
	#contact .form_box form .form_list_box .form_list .input_box textarea{width: 100%; padding: 15px; min-height: 200px; height: 100%; font-size: 14px; }
	#contact .form_box form .form_list_box .form_list .input_flex{width: 100%; gap: 8px; display: flex;}
	#contact .form_box form .form_list_box .form_list .input_flex .box{width: 50%;}
	#contact .form_box form .form_list_box .form_list .input_flex .box input{width: 100%; padding: 15px; font-size: 14px;}
	#contact .form_box form .form_list_box .form_list .radio_box{padding: 10px 0 0;}
	#contact .form_box form .form_list_box .form_list .radio_box { display: flex; gap: 10px 15px;}
	#contact .form_box form .form_list_box .form_list .radio_box .radio_item .radio_text {font-size: 14px; line-height: 120%; vertical-align: top;}
	#contact .form_box form .form_list_box .form_list .radio_box .radio_item { display: block; font-size: 14px; }
	
	#contact .form_box form .form_list_box .form_list .radio_box .radio_item .radio_mark { display: inline-block; width: 15px; height: 15px; margin: 0px 5px 0 0; }
	
	#contact .form_box form .form_list_box .form_list .radio_box .radio_item .radio_mark::after {width: 10px; height: 10px;}
	
	.flex_btns{margin: 40px auto 0; gap: 15px;}
	.flex_btns .submit_btn{font-size: 18px; padding: 14px 0; width: 100%; display: block; width: 85%; margin: 0 auto; }
	.flex_btns .back_btn{font-size: 18px; padding: 14px 0; width: 100%; display: block; width: 85%; margin: 0 auto;}


/* ------------------------------------------------------------ error */
	#error{padding: 100px 0 50px;}
	#error h3 { font-size: 35px; padding: 0 0 30px; }
	#error .caution { font-size: 14px; line-height: 1.7; margin: 0 0 25px; }
	#error .alert { margin: 0 0 50px; }
	#error .alert span { font-size: 14px; margin: 0 0 15px;}

/* ------------------------------------------------------------ confirm */
	#confirm{padding: 100px 0 50px;}
	#confirm h3 { font-size: 35px; padding: 0 0 30px; }
	#confirm .caution { font-size: 16px; line-height: 1.7; margin: 0 0 25px; }
	#confirm form{width: 100%; margin: 0 auto;}
	#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: 16px; padding: 15px 0 5px; }
	#confirm table tr td { display: block; font-size: 13px; line-height: 1.5; padding: 0 0 15px; }
	#confirm .btns { display: block; }
	#confirm .btns .submit_btn { margin: 15px 0 0; }
	
/* ------------------------------------------------------------ thanks */
	#thanks { margin: 100px 0 50px; }
	#thanks h3 { font-size: 35px; padding: 0 0 30px; }
	#thanks .caution { font-size: 16px; line-height: 1.7; margin: 0 0 25px; }
	#thanks small { font-size: 12px; line-height: 2;  margin: 0 0 30px; }
	
	
}