@charset "utf-8";
body{min-width: 1300px; }

html { visibility: hidden;}
html.wf-active,
html.loading-delay { visibility: visible; transition: 0.5s ease;}

/* -----------------------------------------------  header ----------------------------------------------- */
header{ position: fixed; z-index: 10; width: 100%; top: 0; left: 0; right: 0; min-width: 1300px; background: #fff;}
header .h_rl { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 20px 27px 22px 23px;}
header .h_rl h1 { width: 267px}
header .h_rl h1 img { width: 100%; height: auto;}
header .h_r { display: flex; justify-content: flex-end; align-items: baseline;}
header .h_r .btns { width: 240px; padding: 19px 0; text-align: center; font-size: 14px; display: inline-block; border-radius: 26px;}
header .h_r .tell { display: inline-block; font-size: 36px; text-align: left; font-family: "Helvetica Neue" , Helvetica , sans-serif; font-weight: 500; }
header .h_r .tell span { display: block; font-size: 13px; margin-top: 4px; margin-left: 57px; font-family: 'NotoSansJP-Regular';}
header .h_r .tell span em { letter-spacing: -0.04em;}
header .h_r .tell img { margin-right: 5px; vertical-align: -2px;}
header .h_r .quote { background:  url(../images/common/icn_02.svg) no-repeat 25% center / 21px auto,linear-gradient( 180deg, rgb(7,74,160) 0%, rgb(21,101,183) 99%); padding-left: 30px; color: #fff; margin-left: 17px;}
header .h_r .con { background: #fde730 url(../images/common/icn_03.svg) no-repeat 25% center / 23px auto; padding-left: 30px; margin-left: 10px;}

header .h_r nav{ width: 485px; }
header .h_r nav li{ float: left; padding: 0 25px 0 0; font-size: 12px; }

header .h_r .menu { display: inline-block; position: relative; width: 42px; height: 22px; cursor: pointer; z-index: 99; margin-left: 20px;}
header .h_r .menu span { position: absolute; display: block; width: 100%; height: 2px; background-color: #000; transition: 0.5s;}
header .h_r .menu span:nth-of-type(1) { top: 0;}
header .h_r .menu span:nth-of-type(2) { top: 10px;}
header .h_r .menu span:nth-of-type(3) { bottom: 0;}
header .h_r .menu p {font-size: 14px; position: absolute; bottom: -20px; left: 0; opacity: 1;font-family: 'Noto-Sans-JP-Bold';}

header .h_r .menu.close span {}
header .h_r .menu.close span:nth-of-type(1) { transform: translate(0%,10px) rotate(45deg); background-color: #fff;}
header .h_r .menu.close span:nth-of-type(2) { opacity: 0;}
header .h_r .menu.close span:nth-of-type(3) { transform: translate(0%,-10px) rotate(-45deg); background-color: #fff;}


/* -----------------------------------------------  modal ----------------------------------------------- */
#modalArea { position: fixed; width: 100%; height: 100vh; box-sizing: border-box; z-index: 70; top: 0; display: none;}
#modalArea .modal_menu { position: absolute; right: 0; width: 600px; height: 100%; background-image: linear-gradient( 180deg, rgb(7,74,160) 0%, rgb(21,101,183) 99%); padding: 145px 0 100px; color: #fff; overflow-y: scroll;}
#modalArea .modal_menu .menu { position: absolute; width: 42px; height: 22px; cursor: pointer; z-index: 99; top: 27px; right: 27px;}
#modalArea .modal_menu .menu span { position: absolute; display: block; width: 100%; height: 2px; background-color: #000; transition: 0.5s;}
#modalArea .modal_menu .menu span:nth-of-type(1) { top: 0; transform: translate(0%,10px) rotate(45deg); background-color: #fff;}
#modalArea .modal_menu .menu span:nth-of-type(2) { bottom: 0; transform: translate(0%,-10px) rotate(-45deg); background-color: #fff;}

#modalArea .m_inner { width: 305px; margin: 0 auto;}
#modalArea h2 { margin-bottom: 100px;}
#modalArea ul { margin-bottom: 100px; color: #fff;}
#modalArea li { font-size: 40px; margin-bottom: 50px; font-family: 'Barlow', sans-serif; font-weight: 700; }
#modalArea li span { font-size: 12px; margin-left: 25px; font-weight: 500; vertical-align: 8px;}
#modalArea li a{color: #fff;}

#modalArea .contact { }
#modalArea .contact .btns { width: 100%; padding: 19px 0; text-align: center; font-size: 14px; display: block; border-radius: 26px;}
#modalArea .contact .tell { display: inline-block; font-size: 36px; text-align: left; margin-bottom: 20px;font-family: "Helvetica Neue" , Helvetica , sans-serif; font-weight: 500; color: #fff;}
#modalArea .contact .tell span { display: block; font-size: 13px; margin-top: 4px; margin-left: 57px;}
#modalArea .contact .tell span em { letter-spacing: -0.04em;}
#modalArea .contact .tell img { margin-right: 5px; vertical-align: -2px;}
#modalArea .contact .quote { background: #fff url(../images/common/icn_02_2.svg) no-repeat 35% center / 21px; padding-left: 30px; color: #003597; margin-bottom: 20px;}
#modalArea .contact .con { background: #fde730 url(../images/common/icn_03.svg) no-repeat 32% center / 23px; color: #000; padding-left: 30px;}


/* -----------------------------------------------  cta ----------------------------------------------- */
.cta{position: relative; background: linear-gradient(90deg, #074aa0, #23a1e2); padding: 166px 0 78px}
.cta h3{ font-size: 40px; font-family: 'Noto-Sans-JP-Medium'; position: absolute; top: -32px; box-shadow: 5px -5px 30px 0 rgba(15,112,189,0.28);}
.cta h3 span.bg_white{background: #fff; display: inline-block; padding: 15px 21px;font-family: 'Noto-Sans-JP-Medium';}
.cta h3 span.bg_white.white_1{padding: 15px 0px 15px 21px; margin: 0 0 20px;}
.cta h3 span.bg_white.white_2{padding: 15px 21px 15px 0px; margin: 0 0 20px;}
.cta .flex{display: flex;justify-content: space-between}

.cta .flex .box .flex_tt{display: flex;}
.cta .flex .box .flex_tt p{font-size: 24px; color: #fde730;border-radius: 100px; border: 2px solid #fde730; padding:17px 25px;font-family: 'Noto-Sans-JP-Medium';}
.cta .flex .box .flex_tt p:not(:last-child){margin-right: 16px;}
.cta .flex .box p.tt{font-size: 23px; color: #fff; padding: 33px 0 0;}
.cta .flex .box a.tel{display: flex; color: #fff; font-size: 16px; line-height: 125%;font-family: 'Noto-Sans-JP-Medium'; padding: 22px 0 0; align-items: center;}
.cta .flex .box a.tel span{font-size: 46px;font-feature-settings: "palt"; font-family: "Helvetica Neue", Helvetica, sans-serif; font-weight: 500; padding: 0 14px 0 0;}
.cta .flex .box a.tel img{width: 67px;}
.cta .flex .box a.content{border-radius: 100px; background: #fde730 ; background-size: 39px; color: #000;  width: 452px; margin: 35px auto 0; display: block; text-align: center; padding: 30px 0;}
.cta .flex .box a.content span{display: inline-block; background: url(../images/common/icn_03.svg) no-repeat center left 49px; font-size: 24px; font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 600; font-style: normal; padding: 0 75px 0 112px;}

/* -----------------------------------------------  footer ----------------------------------------------- */


footer { padding: 43px 0 33px; }
footer .top,
footer .middle,
footer .bottom { display: flex; justify-content: space-between; align-items: center;}

footer .top { margin-bottom: 37px;}
footer .top .top_r a { font-size: 12px; margin-left: 2em; }

footer .middle { margin-bottom: 59px;}
footer .middle .btns { width: 240px; padding: 19px 0; text-align: center; font-size: 14px; display: inline-block; border-radius: 26px;}
footer .middle .tell { display: inline-block; font-size: 36px; text-align: center; font-family: "Helvetica Neue" , Helvetica , sans-serif; font-weight: 500; font-style: normal; }
footer .middle .tell span { display: block; font-size: 13px; margin-top: 4px; text-align: left; font-family: 'Noto-Sans-JP-Medium';}
footer .middle .tell img { margin-right: 5px; vertical-align: -2px;}
footer .middle .quote { background:  url(../images/common/icn_02.svg) no-repeat 25% center / 21px auto,linear-gradient( 180deg, rgb(7,74,160) 0%, rgb(21,101,183) 99%); padding-left: 30px; color: #fff; margin-left: 17px;}
footer .middle .con { background: #fde730 url(../images/common/icn_03.svg) no-repeat 25% center / 23px auto; padding-left: 30px; margin-left: 10px;}

footer .bottom p { font-size: 12px;}
footer .bottom small { font-size: 10px;}


@media only screen and (max-width: 768px) {
	body{min-width: auto; }

		/* header */

	header { min-width: auto; }
	header .h_rl { padding: 3px 3% 11px; background: #fff; align-items: flex-start}
	header .h_rl h1 { width: 140px;}
	
	header .h_r .btns,
	header .h_r .tell { display: none;}
	
	
	header .h_r{  flex-direction: column; height: auto; }
	header .h_r.active{ opacity: 1; visibility: visible; position: fixed; top: 0; left: 0; background: #fff; z-index: 200; width: 100%; height: 100vh; padding: 20% 0%; }
	
	header .h_r nav{ width: 90%; height: 100%; margin: 0 auto; padding: 18% 0 0; }
	header .h_r nav li{ float: none; padding: 0 0 35px; font-size: 22px; text-align: center; }
	
	
	header .h_r .menu { z-index: 300; width: 36px; height: 16px;margin-top: 10px;}
	header .h_r .menu span { position: absolute; display: block; width: 100%; height: 2px; background-color: #000; transition: 0.5s;}
	header .h_r .menu span:nth-of-type(1) { top: 0; transition: all .8s; }
	header .h_r .menu span:nth-of-type(2) { top: 7px; transition: all .8s; }
	header .h_r .menu span:nth-of-type(3) { bottom: 0px; transition: all .8s; }
	header .h_r .menu p { font-size: 12px; position: absolute; bottom: -15px; left: 0;}
	
	header .h_r .menu.active{ top: 30px; }
	header .h_r .menu.active span:nth-of-type(1) { transform: translate(0%,8px) rotate(45deg); background-color: #D9005E; transition: all .8s; }
	header .h_r .menu.active span:nth-of-type(2) { opacity: 0; transition: all .8s; }
	header .h_r .menu.active span:nth-of-type(3) { transform: translate(0%,-12px) rotate(-45deg); background-color: #D9005E; transition: all .8s;bottom: -5px; }
	header .h_r .menu.close span:nth-of-type(3) {bottom: -6px; }

		
	/* footer */
	
	footer { padding: 35px 0 30px; }
	footer .top,
	footer .middle,
	footer .bottom { display: block;}
	
	footer .top { margin-bottom: 45px; text-align: left;}
	footer .top h2 { text-align: center; margin-bottom: 45px}
	footer .top h2 img { width: 86%; margin-bottom: 15px;}
	footer .top h2 span { display: block; font-size: 12px;}
	footer .top .top_r a { display: block; font-size: 15px; margin: 0 0 2em;}
	footer .top .top_r a:last-child { margin-bottom: 0;}
	
	footer .middle { margin-bottom: 35px;}
	footer .middle .brns { width: 100%; padding: 25px 0; font-size: 13px; border-radius: 60px;}
	footer .middle_l { width: 100%; margin: 0 auto; margin-bottom: 0px; max-width: 324px;}
	footer .middle .tell { display: block; font-size: 42px; margin-bottom: 20px;}
	footer .middle .tell span { font-size: 11px; margin-top: 4px; margin-left: 56px;}
	footer .middle .tell img { width: 48px; margin-right: 5px; vertical-align: -2px;}
	footer .middle .quote { background:  url(../images/common/icn_02.svg) no-repeat 35% center / 20.5px auto,linear-gradient( 180deg, rgb(7,74,160) 0%, rgb(21,101,183) 99%); padding-left: 30px; margin: 0 auto 10px; width: 100%;}
	footer .middle .con { background: #fde730 url(../images/common/icn_03.svg) no-repeat 30% center / 22.5px auto; padding-left: 25px; margin-left: 0; width: 100%;}
	
	footer .bottom small { display: block; text-align: center;}
		
	

	/* modal */
	
	#modalArea { width: 100%; height: 100%; }
	#modalArea .modal_menu { width: 100%; height: 100%; padding: 80px 0; color: #fff;}
	#modalArea .m_inner { width: 85%;}
	#modalArea h2 { margin-bottom: 50px; text-align: center;}
	#modalArea h2 img { width: 80%; }
	#modalArea ul { margin-bottom: 50px;}
	#modalArea li { margin-bottom: 30px; }
	#modalArea li a{ font-size: 40px; margin-bottom: 50px; font-family: 'Barlow', sans-serif; font-weight: 600; }
	#modalArea li span { font-size: 12px; margin-left: 25px; font-weight: 500; vertical-align: 8px;}
	
	#modalArea .contact { }
	#modalArea .contact .btns { width: 100%; padding: 25px 0; text-align: center; font-size: 13px; border-radius: 60px;}
	#modalArea .contact .tell { display: block; font-size: 38px; margin-bottom: 20px;}
	#modalArea .contact .tell span { display: block; font-size: 11px; margin-top: 4px; margin-left: 56px;}
	#modalArea .contact .tell span em { letter-spacing: -0.04em;}
	#modalArea .contact .tell img {  width: 48px; margin-right: 5px; vertical-align: -2px;}
	#modalArea .contact .quote { background: #fff url(../images/common/icn_02_2.svg) no-repeat 35% center / 21px; padding-left: 30px; color: #003597; margin-bottom: 20px;}
	#modalArea .contact .con { background: #fde730 url(../images/common/icn_03.svg) no-repeat 32% center / 23px; color: #000; padding-left: 30px;}
	
	
	/* -----------------------------------------------  cta ----------------------------------------------- */
	.cta{ padding: 140px 0 50px}
	.cta h3{font-size: 24px; top: -32px; box-shadow: none; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 90%;}
	.cta h3 span.bg_white{ padding: 7px 10px; }
	.cta h3 span.bg_white.white_1{padding: 7px 10px; box-shadow: 2px -2px 20px 0 rgba(15,112,189,0.28);margin: 0 0 10px;}
	.cta h3 span.bg_white.white_2{padding: 7px 10px;margin: 0 0 10px;}
	.cta .flex {flex-direction: column;}
	.cta .flex .box{text-align: center;}
	.cta .flex .box .flex_tt{display: flex; justify-content: center}
	.cta .flex .box .flex_tt p{font-size: 16px; padding:8px 12px; border: 1px solid #fde730;}
	.cta .flex .box .flex_tt p:not(:last-child){margin-right: 8px;}
	.cta .flex .box p.tt{font-size: 20px; padding: 16px 0 0; line-height: 160%;}
	.cta .flex .box a.tel{ font-size: 14px; padding: 11px 0 0;flex-wrap: wrap;align-items: flex-start; justify-content: center }
	.cta .flex .box a.tel span{font-size: 40px;padding: 0 10px 10px 0;}
	.cta .flex .box a.tel img{width: 52px; margin: 7px 0 0;}
	.cta .flex .box a.content{ width: 100%; margin: 17px auto 0;  padding: 15px 0;}
	
	
	.cta .flex .box a.content span{ background: url(../images/common/icn_03.svg) no-repeat center left 0; background-size: 24px; font-size: 18px; padding: 0 20px 0 40px;}
	
	
	.cta .flex .line{margin: 30px 0 0; display: block;}

}