@charset "utf-8";

#wrapper { min-width: 1220px; /* max-width: 1600px; */ margin: 0 auto;  background: url(../images/common/bg_pattern.jpg) repeat-y center top; background-size: contain;}

/* header */

header { position: fixed; z-index: 70; width: 100%; min-width: 1220px; transition: 0.5s;}
header .h_rl { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 15px 27px 15px 23px;}
header .h_rl h1 { width: 270px;}
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;}
header .h_r .tell span { display: block; font-size: 13px; margin-top: 4px; margin-left: 57px;}
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 .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;}

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;}

/* 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;}
footer .middle .tell span { display: block; font-size: 13px; margin-top: 4px; text-align: left;}
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;}


/* 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: 300px; margin: 0 auto;}
#modalArea h2 { margin-bottom: 100px;}
#modalArea ul { margin-bottom: 100px;}
#modalArea li { font-size: 40px; margin-bottom: 50px; font-family: 'Barlow-SemiBold';}
#modalArea li span { font-size: 12px; margin-left: 25px; font-family: 'NotoSansJP-Medium'; vertical-align: 8px;}

#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;}
#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;}

p.empty { text-align: center; }

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	#wrapper { min-width: auto; max-width: none; background: none;}
	
	/* header */

	header { min-width: auto;}
	header .h_rl { padding: 15px 5% 15px; background: #fff; transition: 0.5s;}
	header .h_rl h1 { width: 171px; transition: 0.5s;}
	
	header .h_r .btns,
	header .h_r .tell { display: none;}
	header .h_r .menu { display: inline-block; position: fixed; width: 42px; height: 22px; cursor: pointer; z-index: 99; top: 15px; right: 5%;}
	
	
	
	
	/* 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 { 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 .btns { width: 100%; padding: 25px 0; font-size: 13px; border-radius: 60px;}
	footer .middle_l { width: 324px; margin: 0 auto;}
	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;}
	footer .middle .con { background: #fde730 url(../images/common/icn_03.svg) no-repeat 30% center / 22.5px auto; padding-left: 25px; margin-left: 0;}
	
	footer .bottom small { display: block; text-align: center; }
		
	
	/* modal */
	
	#modalArea { width: 100%; height: 100%; }
	#modalArea .modal_menu { width: 100%; height: 100%; padding: 100px 0; color: #fff;}
	#modalArea .m_inner { width: 80%;}
	#modalArea h2 { margin-bottom: 60px;}
	#modalArea ul { margin-bottom: 60px;}
	#modalArea li { font-size: 40px; margin-bottom: 50px; font-family: 'Barlow-SemiBold';}
	#modalArea li span { font-size: 12px; margin-left: 25px; font-family: 'NotoSansJP-Medium'; 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;}
	
	p.empty { padding-top: 30px; }
	
}