@charset "utf-8";
/* ------------------------------------------------------------ 共通 ------------------------------------------------------------ */
body{min-width: 1200px; }
.flex{display: flex;}
.view_btn{position: relative; transition: 0.5s;}
.view_btn.thumb-hover{ transition: 0.5s; opacity: 0.6;}
/* ------------------------------------------------------------ header ------------------------------------------------------------ */
header{background: #fff; min-width: 1200px; position: fixed; z-index: 1000; top: 0px; width: 100%;}
header .header_box{justify-content: space-between; width: 100%; height: auto; padding: 13px 15px 14px 29px; vertical-align: top; }
header .header_box nav li{display: inline-block;vertical-align: top;}
header .header_box nav li a{display: block; border-radius: 100px; color: #fff; text-align: center; background: #002467; line-height: 150%; padding: 15px 0 14px; width: 229px; }
header .header_box nav li:last-child{padding: 0 0 0 8px;}
header .header_box nav li:last-child a{width: 251px;}

header .header_box nav li.tel a{color: #002467; font-size: 11px; background:url(../images/index/icn_1.svg) no-repeat left 25px center #FFFF07; background-size: 20px; padding: 7px 0 8px 20px;}
header .header_box nav li.tel a span{font-size: 22px; }
/* ------------------------------------------------------------ .contact ------------------------------------------------------------ */
.contact{min-width: 1200px;}
.contact .img_box{width: 100%; height: 502px; overflow: hidden; max-width: 50%; min-width: 50%;}
.contact .img_box img{width: 100%; height: 100%; object-fit: cover;}
.contact .box{width: 100%; background: #002467; text-align: center; padding: 55px 0 71px; max-width: 50%; min-width: 50%;}
.contact .box .title_box h3{color: #fff;}
.contact .box .title_box h3 span.mini{padding: 0px;color: #fff;}
.contact .box .title_box h3 span.mini:before{display: none;}
.contact .box .title_box h3 span.big{font-size: 36px; padding: 5px 0 0;}
.contact .box .title_box p{font-size: 18px; color: #fff;line-height: 198%;}
.contact .box .title_box p span{font-size: 31px; font-family: shippori-mincho, serif; font-display: swap; font-weight: 600; font-style: normal; display: inline-block; padding: 44px 0 25px}
.contact .box .link_box{padding: 36px 0 0; justify-content: center;}
.contact .box .link_box a{border-radius: 100px; color: #002467; font-size: 12px; text-align: center; display: block;line-height: 142%;}
.contact .box .link_box a.tel{background: #FFFF07; width: 301px; padding: 6px 0 10px; margin: 0 20px 0 0;}
.contact .box .link_box a.tel span.text_1{display: inline-block;font-family: 'Noto-Sans-JP-Medium' , sans-serif; font-display: swap; line-height: 167%;}
.contact .box .link_box a.tel span.text_2{font-size: 0px;display: inline-block; padding: 0 0 0 30px; background:url(../images/index/icn_1.svg) no-repeat left center; background-size: 24px; font-size: 30px; line-height: 137%;font-family: 'Noto-Sans-JP-Bold' , sans-serif; font-display: swap;}
.contact .box .link_box a.mail{width: 286px; padding: 27px 0 10px; background: #fff;}
.contact .box .link_box a.mail span.text_3{display: inline-block;font-family: 'Noto-Sans-JP-Medium' , sans-serif; font-display: swap; line-height: 145%; padding: 0 0 0 42px; background:url(../images/index/icn_2.svg) no-repeat left top 7px; background-size: 24px; font-size: 20px; }

/* ------------------------------------------------------------ footer ------------------------------------------------------------ */
footer{padding: 32px 0 55px ; border-top: 1px solid #EBEBEB; text-align: center;}
footer p{font-size: 12px;font-family: 'Noto-Sans-JP-Medium' , sans-serif; font-display: swap; line-height: 145%; padding: 25px 0 0;}

/* ------------------------------------------------------------ #error ------------------------------------------------------------ */
#error{padding: 200px 0 119px;}
#error p.alert span{display: block; text-align: center; font-size: 16px; line-height: 160%;}
#error p.alert span:not(:last-child){padding: 0 0 10px;}

/* ------------------------------------------------------------ #confirm ------------------------------------------------------------ */
#confirm{padding: 200px 0 119px;}
#confirm table{width: 800px; margin: 50px auto 0;}
#confirm table tr th{text-align: left; line-height: 160%; font-size: 18px; padding: 20px 0; width: 200px; border-bottom: 1px solid #CECECE;font-family: 'Noto-Sans-JP-Medium' , sans-serif; font-display: swap;}
#confirm table tr td{text-align: left; line-height: 160%; font-size: 16px; padding: 20px 0; width: calc(100% - 200px); border-bottom: 1px solid #CECECE;}
#confirm .back_btn{margin: 0 20px 0 0;}

/* ------------------------------------------------------------ #thanks ------------------------------------------------------------ */
#thanks{padding: 200px 0 119px;}
#thanks small{text-align: center; line-height: 220%; display: block; font-size: 16px; padding: 20px 0 0px;}
#thanks .btns .top_btn{display: inline-block; width: 387px;height: auto; background: #969696; text-align: center; display: inline-block; padding: 27px 0 29px; font-family: 'Noto-Sans-JP-Medium' , sans-serif; font-display: swap; font-size: 20px; color: #fff; line-height: 160%;}


/* ------------------------------------------------------------ .contact_box ------------------------------------------------------------ */
.contact_box p.alert{padding: 60px 0 0;}
.contact_box h3.title{font-size: 39px;text-align: center; line-height: 140%; font-family: shippori-mincho, serif; font-display: swap; font-weight: 600; font-style: normal;}
.contact_box .caution{text-align: center; font-size: 18px; padding: 40px 0 0;font-family: 'Noto-Sans-JP-Medium' , sans-serif; font-display: swap; line-height: 160%;}
.contact_box .btns{width: 100%; height: auto; text-align: center; padding: 85px 0 0; display: flex; justify-content: center;}
.contact_box .btns .back_btn{display: inline-block; width: 387px;height: auto; background: #969696; text-align: center; display: inline-block; padding: 27px 0 29px; font-family: 'Noto-Sans-JP-Medium' , sans-serif; font-display: swap; font-size: 20px; color: #fff; line-height: 160%; color: #fff;}
.contact_box .btns .submit_btn{width: 387px; height: auto; background: #002467; text-align: center; display: inline-block; padding: 27px 0 29px; font-family: 'Noto-Sans-JP-Medium' , sans-serif; font-display: swap; font-size: 20px; color: #fff; line-height: 160%;}
/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
		
	/* ------------------------------------------------------------ 共通 ------------------------------------------------------------ */
	body{min-width: 100%; }
	.flex{display: block;}
	img{width: 100%; height: auto;}
	/* ------------------------------------------------------------ header ------------------------------------------------------------ */
	header{min-width: 100%; }
	header .header_box h1{width: 76px; height: auto;}
	header .header_box{ padding: 17px 3% 17px 5%; display: flex; align-items: center;}
	header .header_box nav li a{padding: 9px 15px; width: auto; font-size: 11px; line-height: 130%;}
	header .header_box nav li:last-child{padding: 0 0 0 8px;}
	header .header_box nav li:last-child a{width: auto;}
	header .header_box nav li.tel a{background: url(../images/index/icn_1.svg) no-repeat left 9px center #FFFF07; background-size: auto; background-size: 14px; padding: 8px 15px 8px 25px;}
	header .header_box nav li.tel a span{font-size: 15px; }
	/* ------------------------------------------------------------ .contact ------------------------------------------------------------ */
	.contact{min-width: 100%;}
	.contact .img_box {max-width: 100%; min-width: 100%; height: auto; }
	.contact .img_box img{width: 100%; height: auto;}
	.contact_box p.alert { padding: 30px 0 0;}
	.contact .box{max-width: 100%; min-width: 100%; padding: 33px 0 49px;}
	.contact .box .title_box h3 span.mini{padding: 0 0 15px;}
	.contact .box .title_box h3 span.mini:before{display: block; background: #fff;}
	.contact .box .title_box h3 span.big{font-size: 26px; padding: 13px 0 0;}
	.contact .box .title_box p{font-size: 15px; line-height: 180%;}
	.contact .box .title_box p span{font-size: 24px; padding: 24px 0 30px;line-height: 171%;}
	.contact .box .link_box{padding: 30px 0 0;}
	.contact .box .link_box a{font-size: 12px; margin: 0 auto;}
	.contact .box .link_box a.tel{ width: 301px; padding: 6px 0 10px; margin: 0 auto 20px;}
	.contact .box .link_box a.tel span.text_2{ padding: 0 0 0 30px; background-size: 24px; font-size: 30px; }
	.contact .box .link_box a.mail{width: 301px; padding: 27px 0 14px; }
	.contact .box .link_box a.mail span.text_3{padding: 0 0 0 42px; background-size: 24px; font-size: 20px; margin: 0 0 7px;}
	
	/* ------------------------------------------------------------ footer ------------------------------------------------------------ */
	footer{padding: 30px 5% 13px ;}
	footer img{width: 99px;height: auto; margin: 0 auto;}
	footer p{font-size: 11px;padding: 30px 0 0;}
	
	/* ------------------------------------------------------------ #error ------------------------------------------------------------ */
	#error{padding: 100px 0 60px;}
	#error p.alert span{display: block; text-align: center; font-size: 13px; line-height: 160%;}
	
	/* ------------------------------------------------------------ #confirm ------------------------------------------------------------ */
	#confirm{padding: 100px 0 60px;}
	#confirm table{width: 100%; margin: 25px auto 0;}
	#confirm table tr th{font-size: 15px; padding: 14px 0; width: 140px; }
	#confirm table tr td{font-size: 13px; padding: 14px 0; width: calc(100% - 140px);}
	#confirm .back_btn{margin: 0 10px 0 0;}

	/* ------------------------------------------------------------ #thanks ------------------------------------------------------------ */
	#thanks{padding: 100px 0 60px;}
	#thanks small{font-size: 13px; padding: 10px 0 0px; line-height: 180%;}
	#thanks .btns .top_btn{ width:90%;padding: 21px 0 20px; font-size: 20px; }
	
	
	/* ------------------------------------------------------------ .contact_box ------------------------------------------------------------ */
	.contact_box .caution{font-size: 16px; padding: 20px 0 0;}
	.contact_box h3.title{font-size: 26px;}
	.contact_box .btns{padding: 45px 0 0;}
	.contact_box .btns .back_btn{width: 90%; padding: 21px 0 20px; }
	.contact_box .btns .submit_btn{width: 90%; padding: 21px 0 20px; }

}