@charset "utf-8";
.flex{display: flex;}
.title_box{ text-align: center;}
.title_box h3{font-size: 20px; font-family: 'Noto-Sans-JP-Medium'; line-height: 160%;}
.title_box h3 span{font-size: 105px; font-family: "alternate-gothic-no-3-d", sans-serif; font-weight: 400; font-style: normal;}
.title_box p{text-align: center; font-size: 16px; line-height: 225%; }
main{padding: 100px 0 0; background: #F2F2F2;}
.inner_mini{width: 1100px; margin: 0 auto;}

.link_btn{width: 360px; height: auto;}
.link_btn a{display: block; background: #000; position: relative; color: #fff; text-align: center; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; line-height: 145%; padding: 21px 0;}
.link_btn a:before{content: ""; display: block; position: absolute; right: 21px; top: 50%; transform: translateY(-50%); width: 8px; height: 15px; background: url(../images/common/aro_icn.svg) no-repeat center center; background-size: 100%;}
/* ----------------------------- #fv ------------------------------- */
#fv{background: url(../images/contact/fv_bg.jpg?var=123456) no-repeat center center; background-size: cover; padding: 426px 50px 32px; position: relative; width: 100%;}
#fv h2{font-family: 'Noto-Sans-JP-Medium'; color: #fff; letter-spacing: 0.03em; font-size: 22px; line-height: 153%;}
#fv h2 span{letter-spacing: 0; font-size: 94px; font-family: "alternate-gothic-no-3-d", sans-serif; font-weight: 400; font-style: normal; color: #fff; line-height: 116%; display: inline-block;}
#fv p{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 500; font-style: normal; color: #fff; font-size: 12px;transform: rotateZ(-90deg) translateY(-50%); top: 50%; right: -50px; position: absolute;}

/* ------------------------------------------------------------ contact */
#contact { margin: 0 auto; padding: 100px 0 120px;}
#contact p.intro{text-align: center; line-height: 225%; font-size: 16px;}
#contact .form_box{background: #fff; padding: 72px 86px 78px 114px; margin: 60px 0 0;}
#contact .form_box table{width: 100%; }
#contact .form_box table th{display: block; width: 100%; text-align: left; letter-spacing: 0.05em; font-family: 'Noto-Sans-JP-Medium'; line-height: 160%;}
#contact .form_box table tr:not(:first-child) th{padding: 20px 0 0;}
#contact .form_box table th span{font-family: 'Noto-Sans-JP-Medium'; color: #FF0000; font-size: 16px; line-height: 200%;}
#contact .form_box table td{display: block; width: 100%;}
#contact .form_box table td input{width: 100%; height: auto;}
#contact .form_box table td ul{display: flex; padding: 18px 0 0; gap: 0 30px;}
#contact .form_box table td ul li{display: inline-block;}

#contact .form_box table td ul li input[type="radio"]{display: none;}
#contact .form_box table td ul li label{display: inline-flex; line-height: 160%; align-items: center; cursor: pointer; font-size: 16px; position: relative; padding: 0 0 0 32px;}
#contact .form_box table td ul li .radiobox{width: 22px; height: 22px; border: 1px solid #000; border-radius: 50%; position: absolute; ;left: 0px; top: 50%; transform: translateY(-50%);}
#contact .form_box table td ul li input[type="radio"]:checked + .radiobox::after{content: ""; position: absolute; width: 14px; height: 14px; background: #000; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);}

#contact .form_box table td.name_box.name_box_1{padding: 44px 0 0;}
#contact .form_box table td.name_box.name_box_2{padding: 22px 0 0;}
#contact .form_box table td.name_box .flex{justify-content: space-between;}
#contact .form_box table td.name_box .flex .box{width: 436px; height: auto;}
#contact .form_box table td.name_box .flex .box p{text-align: left; letter-spacing: 0.05em;}
#contact .form_box table td.name_box .flex .box p span{font-family: 'Noto-Sans-JP-Medium'; color: #FF0000; font-size: 16px; line-height: 200%;}
#contact .form_box table td input{background: #F4F5F7; border: none; font-size: 16px; padding: 16px; line-height: 175%; margin: 10px 0 0;}

#contact .form_box table tr.top td textarea{background: #F4F5F7; border: none; font-size: 16px; padding: 16px; line-height: 175%; margin: 10px 0 0; width: 100%; height: 319px; resize: none;}

#contact .form_box .btns .submit_btn{width: 360px; height: auto; background: #000; text-align: center;color: #fff; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; margin: 60px auto 0; padding: 21px 0; line-height: 144.4%; display: block;}
/* ------------------------------------------------------------ error */
#error {padding: 100px 0 120px; }
#error h3 { text-align: center; padding: 0 0 50px;font-family: 'Noto-Sans-JP-Medium'; }
#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; font-size: 16px;}
#error .btns .back_btn {width: 360px; height: auto; background: #888888; text-align: center;color: #fff; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; margin: 60px auto 0; padding: 21px 0; line-height: 144.4%; display: block; }


/* ------------------------------------------------------------ confirm */
#confirm {padding: 100px 0 120px; }
#confirm h3 { text-align: center; padding: 0 0 50px;font-family: 'Noto-Sans-JP-Medium'; }
#confirm .caution { font-size: 16px; text-align: center; margin: 0 0 40px;}
#confirm table { width: 80%; margin: 0 auto 50px;}
#confirm table tr {	border-bottom: solid 1px #000;}
#confirm table tr:first-of-type { border-top: solid 1px #000;}
#confirm table tr th { width: 200px; line-height: 160%; font-weight: bold; text-align: left; padding: 20px 0; font-family: 'Noto-Sans-JP-Medium'; }
#confirm table tr td { line-height: 160%; padding: 20px 0;}
#confirm .btns { display: flex; justify-content: space-between; width: 800px; margin: 60px auto 0px;}

#confirm .btns .submit_btn{width: 360px; height: auto; background: #000; text-align: center;color: #fff; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; padding: 21px 0; line-height: 144.4%; display: block;}
#confirm .btns .back_btn {width: 360px; height: auto; background: #888888; text-align: center;color: #fff; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; padding: 21px 0; line-height: 144.4%; display: block; }


/* ------------------------------------------------------------ thanks */
#thanks { padding: 100px 0 120px; }
#thanks h3 { text-align: center; padding: 0 0 50px;font-family: 'Noto-Sans-JP-Medium';  }
#thanks .caution { font-size: 20px; text-align: center; line-height: 1.7; margin: 0 0 30px; font-family: 'Noto-Sans-JP-Medium'; }
#thanks small { display: block; font-size: 16px; text-align: center; line-height: 2; margin: 0 0 40px; }
#thanks .btns { margin: 60px auto 0px;}
#thanks .btns .back_btn {width: 360px; height: auto; background: #888888; text-align: center;color: #fff; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; padding: 21px 0; line-height: 144.4%; display: block; margin: 0 auto;}



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

@media only screen and (max-width:768px) {
	.flex{display: block;}
	.title_box h3{font-size: 16px; line-height: 160%;}
	.title_box h3 span{font-size: 60px; }
	.title_box p { font-size: 13px; line-height: 200%;}
	main{padding: 58px 0 0;}
	.inner_mini{width: 90%; }
	
	.link_btn{width: 82.35%; height: auto;}
	.link_btn a{font-size: 16px; line-height: 150%; padding: 9px 0;}
	.link_btn a:before{right: 21px; width: 8px; height: 15px;}
	/* ----------------------------- #fv ------------------------------- */
	#fv{background: url(../images/contact/fv_bg_sp.jpg?var=123456) no-repeat center center; background-size: cover; padding: 32.7% 5% 5%;}
	#fv h2{font-size: 16px; line-height: 100%;}
	#fv h2 span{font-size: 47px; line-height: 122%; padding: 0px;}
	#fv p{display: none;}
	

	/* ------------------------------------------------------------ contact */
	#contact { margin: 0 auto; padding: 50px 0 60px;}
	#contact p.intro{ font-size: 13px;}
	#contact .form_box{padding: 36px 5% 39px; margin: 30px 0 0;}
	#contact .form_box table{width: 100%; }
	#contact .form_box table th{font-size: 13px;}
	#contact .form_box table tr:not(:first-child) th{padding: 20px 0 0;}
	#contact .form_box table th span{font-size: 13px; }
	#contact .form_box table td{display: block; width: 100%;}
	#contact .form_box table td input{width: 100%; height: auto;}
	#contact .form_box table td ul{display: flex; flex-wrap: wrap; padding: 10px 0 0; gap: 10px;}
	
	#contact .form_box table td ul li{width: calc(50% - 10px);}
	#contact .form_box table td ul li label{ font-size: 13px; position: relative; padding: 0 0 0 20px; width: 100%;}
	#contact .form_box table td ul li .radiobox{width: 16px; height: 16px; }
	#contact .form_box table td ul li input[type="radio"]:checked + .radiobox::after{width: 10px; height: 10px; }
	
	#contact .form_box table td.name_box.name_box_1{padding: 22px 0 0;}
	#contact .form_box table td.name_box.name_box_2{padding: 16px 0 0;}
	#contact .form_box table td.name_box .flex{justify-content: space-between;}
	#contact .form_box table td.name_box .flex .box{width: 100%; height: auto;}
	#contact .form_box table td.name_box .flex .box:last-child{padding: 16px 0 0;}
	#contact .form_box table td.name_box .flex .box p{font-size: 13px;}
	#contact .form_box table td.name_box .flex .box p span{font-size: 13px; line-height: 200%;}
	#contact .form_box table td input{font-size: 13px; padding: 8px 10px; margin: 4px 0 0;}
	
	#contact .form_box table tr.top td textarea{font-size: 13px; padding: 8px 10px; line-height: 175%; margin: 10px 0 0; width: 100%; height: 200px; resize: none;}
	
	#contact .form_box .btns .submit_btn{width: 100%; height: auto; font-size: 16px; margin: 30px auto 0; padding: 16px 0;}

/* ------------------------------------------------------------ error */
	#error{padding: 50px 0 60px;}
	#error h3 { padding: 0 0 30px; }
	#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 .back_btn {width: 90%; height: auto; font-size: 16px; margin: 30px auto 0; padding: 16px 0;}


/* ------------------------------------------------------------ confirm */
	#confirm {padding: 50px 0 60px;}
	#confirm h3 {padding: 0 0 30px; }
	#confirm .caution { font-size: 14px; line-height: 1.7; margin: 0 0 40px; }
	#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 .btns { display: block; }
	#confirm .btns .submit_btn { margin: 15px 0 0; }
	
	#confirm .caution { font-size: 16px; text-align: center; margin: 0 0 40px;}
	#confirm table { width:100%; margin: 0 auto 50px;}
	#confirm table tr {	border-bottom: solid 1px #000;}
	#confirm table tr:first-of-type { border-top: solid 1px #000;}
	#confirm table tr th { width: 100%; padding: 15px 0 10px;}
	#confirm table tr td { line-height: 160%; padding: 0px 0 15px;}
	#confirm .btns { display: flex; width: 100%; margin: 30px auto 0px;}
	
	#confirm .btns .submit_btn{width: 48%; font-size: 16px; padding: 16px 0; margin: 0px;}
	#confirm .btns .back_btn {width: 48%; font-size: 16px; padding: 16px 0; }
	
	
/* ------------------------------------------------------------ thanks */
	#thanks{padding: 50px 0 60px;}
	#thanks h3 { padding: 0 0 30px; }
	#thanks .caution { font-size: 14px; line-height: 1.7; margin: 0 0 20px; text-align: center;}
	#thanks small { font-size: 12px; line-height: 2; text-align: center; }
	#thanks .btns { margin: 30px auto 0px;}
	#thanks .btns .back_btn {width: 90% font-size: 16px; padding: 16px 0;}
	
	
}