@charset "utf-8";
/* ------------------------------------------------------------ common */
body{ min-width: 1400px; margin: 0 auto; font-family: "noto-sans", sans-serif; font-weight: 400; font-style: normal; }
a{ color: #000; text-decoration: none; border: none; }

main.hidden{ overflow: hidden; }

.inner{ width: 1100px; margin: 0 auto; padding: 0 50px; }
.l_inner{ width: 1360px; margin: 0 auto; padding: 0 20px; }
.s_inner{ width: 930px; margin: 0 auto; padding: 0 50px; }

.SP{ display: none; }


.green{ background-color: #41b9ad; }
.pink{ background-color: #e86a7f; }
.orange{ background: #f68a32; }
.purple{ background: #8c6cce; }
.blue{ background: #0068ab; }
.o_red{ background: #e1570d; }
.yellow{ background: #faa500; }
.red{ background: #cf2f2f; }

.gotham{ font-family: 'Gotham', sans-serif; }
.futura{ font-family: "futura-pt", sans-serif; font-weight: 500; font-style: normal; }
.noto{ font-family: "noto-sans", sans-serif; font-weight: 400; font-style: normal; }



/* ------------------------------------------------------------ splash */
#splash{ position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background: #fff; z-index: 900; }
#splash .logo{ animation: splashLogo 2s ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 50px; font-weight: 600; letter-spacing: 0.1em; width: 100%; text-align: center; }
#splash .logo p{ padding: 0 0 10px; }
#splash .logo span{ font-family: futura-pt, sans-serif; font-weight: 500; }

@keyframes splashLogo{
	0%{ opacity: 0; left: 55%; }
	100%{ opacity: 1; left: 50%; }
}

@-webkit-keyframes splashLogo{
	0%{ opacity: 0; left: 55%; }
	100%{ opacity: 1; left: 50%; }
}



/* ------------------------------------------------------------ header */
header{ min-width: 1400px; z-index: 200; position: fixed; top: 0; left: 0; right: 0; padding: 15px 0; background: #fff; }
header .h_inner{ display: flex; align-items: center; justify-content: space-between; width: 98%; margin: 0 auto; }

header h1{ width: 300px; }
header h1 img{ width: 100%; height: auto; }

header .box{ display: flex; align-items: center; width: 1050px; text-align: center;; }

nav{ width: 640px; }
/* nav li{ float: left; padding: 0 15px; font-size: 14px; } */
nav li{ float: left; padding: 0 7px; font-size: 14px; }

header .btns{ width: 410px; }

.btns a{ float: left; display: flex; align-items: center; justify-content: center; width: 200px; height: 70px; margin: 0 10px 0 0; padding: 10px; box-sizing: border-box; font-size: 14px; color: #fff; border-radius: 50px; line-height: 150%; }
.btns a:last-of-type{ margin: 0; }



/* ------------------------------------------------------------ facility */
#facility ul{ padding: 65px 0 0; }
#facility ul li{ float: left; position: relative; margin: 0 50px 55px 0; width: calc(100% / 4 - 38px);}
#facility ul li:nth-of-type(4n){ margin-right: 0; }

#facility ul li .sort{ display: flex; align-items: center; justify-content: center; text-align: center; line-height: 150%; position: absolute; top: 5px; right: 5px; width: 80px; height: 80px; font-size: 14px; color: #fff; border-radius: 50px; }
#facility ul li img{ width: 100%; height: auto; }

#facility ul li .txt{ padding: 20px 0 0; }
#facility ul li .txt h3{ font-size: 20px; padding: 0 0 10px; line-height: 150%; }

#facility ul li .txt .add{ min-height: 120px; }
#facility ul li .txt p{ padding: 2px 0 2px 17px; margin: 0 0 5px; font-size: 14px; }
#facility ul li .txt p.area{ background: url(../images/common/icn_pin.svg) left center/10px no-repeat; }
#facility ul li .txt p.tel{ background: url(../images/common/icn_tel.svg) left center/10px no-repeat; }

#facility ul li .btns{ padding: 10px 0 0; }
#facility ul li .btns a{ width: 145px; height: 25px; position: relative; text-align: center; font-size: 13px; }
#facility ul li .btns a.video{ padding-left: 20px; background: #8c6cce url(../images/common/icn_video.svg) calc(50% - 35px) center/13px no-repeat; color: #fff; border: 1px solid #8c6cce; }
#facility ul li .btns a.detail{ border: 1px solid #000; color: #000; }

#facility ul li .btns a{ position: relative; }
#facility ul li .btns a:after{ position: absolute; content: ""; top: 8px; right: 10px; width: 5px; height: 5px; border-right: 1px solid #000; border-top: 1px solid #000; transform: rotate(45deg); }
#facility ul li .btns a.video:after{ border-color: #fff; }



/* ------------------------------------------------------------ footer */
footer{ padding: 40px 0; background: #fff; }
footer .f_inner{ width: 90%; margin: 0 auto; }
footer .flex{ display: flex; justify-content: space-between; }

footer .adress p{ padding: 0 0 55px; font-size: 19px; line-height: 150%; }
footer .adress p strong{ display: block;; padding: 0 0 25px; width: 315px; }
footer .adress p strong img{ width: 100%; height: auto; }

/* footer .adress li{ float: left; padding: 0 30px 0 0; font-size: 15px; } */
footer .adress li{ float: left; /* padding: 0 30px 0 0; */padding: 0 10px 0 0; font-size: 15px; }
footer .adress li:last-of-type{ padding: 0; }


footer .contact .txt{ padding: 0 0 25px; text-align: center; }
footer .contact .tell{ font-size: 30px; }
footer .contact .tell a{ float: left; padding: 10px 20px 10px 0; border-right: 1px solid #000; font-family: futura-pt, sans-serif; font-weight: 500; font-style: normal; }
footer .contact .tell p{ float: left; padding: 10px 0 10px 20px; font-family: futura-pt, sans-serif; font-weight: 500; font-style: normal; }

footer .contact .btns{ padding: 40px 0 0; }
footer .contact small{ display: inline-block; padding: 10px 0 0; font-size: 12px; }

footer .copy{ display: inline-block; padding: 30px 0 0; font-size: 10px; }



/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

	/* ------------------------------------------------------------ common */
	body{ min-width: 100%; }
	
	.SP{ display: block; }
	.PC{ display: none; }
	
	
	.inner{ width: 92%; padding: 0; }
	.l_inner{ width: 92%; padding: 0; }
	.s_inner{ width: 92%; padding: 0; }
	
	
	
	/* ------------------------------------------------------------ splash */
	#splash .logo{ font-size: 28px; }
	
	
	
	/* ------------------------------------------------------------ header */
	header{ min-width: 100%; }
	header .h_inner{ width: 95%; }
	
	header h1{ width: 150px; }
	header .box{ width: 30px; }
	
	nav{ overflow-y: scroll; opacity: 0; visibility: hidden; transition: all 0.8s; position: fixed; z-index: 300; top: 0; left: 0; width: 100%; height: 100vh; }
	nav .bg{ padding: 0 0 10%; background: #fff url(../images/common/bg_nav.jpg) center top/100% no-repeat; }
	
	nav h2{ width: 280px; margin: 0 auto 30px; background: none; }
	nav h2 img{ width: 100%; height: auto; }
	nav p{ width: 200px; height: 35px; margin: 0 auto; box-sizing: border-box; padding: 10px 0 0; font-size: 15px; text-align: center; border: 1px solid #41c0b3; border-radius: 50px; color: #41c0b3; }
	
	nav .ttl{ padding: 20% 0 0; }
	
	nav ul{ width: 80%; margin: 0 auto; padding: 30px 0 0; }
	nav ul li{ float: none; padding: 20px 0; border-bottom: 1px solid #c2c2c2; font-size: 18px; }
	nav ul li:last-of-type{ border-bottom: none; }
	nav ul li a{ text-align: center; font-weight: 600; }
	
	.btns a{ float: none; width: 100%; height: 50px; margin: 0 0 15px; font-size: 12px; }
	
	header .btns{ width: 80%; margin: 0 auto; padding: 20px 0 25%; }
	header .btns a{ float: none; width: 100%; height: 60px; margin: 0 0 15px; font-size: 15px; box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.2); }
	
	
	.burger_btn{ position: relative; z-index: 350; width: 30px; height: 22px; }
	.burger_btn span{ position: absolute; left: 0; width: 30px; height: 1px; background: #000; transition: all 0.8s; }
	.burger_btn span:first-of-type{ top: 0; }
	.burger_btn span:nth-of-type(2){ top: 10px; }
	.burger_btn span:last-of-type{ top: 20px; }
	
	
	/* active */
	nav.active{ opacity: 1; visibility: visible; transition: all 0.8s; }
	
	.burger_btn.active span{ transition: all 0.8s; }
	.burger_btn.active span:first-of-type{ top: 10px; transform: rotate(45deg); }
	.burger_btn.active span:nth-of-type(2){ opacity: 0; }
	.burger_btn.active span:last-of-type{ top: 10px; transform: rotate(-45deg); }
	
	
	
	aside{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 300; }
	aside.btns a{ float: left; width: 50%; height: 50px; margin: 0; border-radius: 0; font-size: 12px; font-weight: 600; }
	
	
	
	/* ------------------------------------------------------------ facility */
	#facility ul{ padding: 40px 0 0; }
	#facility ul li,
	#facility ul li:nth-of-type(4n){ margin: 0 20px 20px 0; width: calc(100% / 2 - 10px); }
	#facility ul li:nth-of-type(2n){ margin-right: 0; }
	
	#facility ul li .sort{ width: 50px; height: 50px; font-size: 0.5em; }
	
	#facility ul li .txt .add{ min-height: 100px; }
	#facility ul li .txt{ padding: 10px 0 0; }
	#facility ul li .txt h3{ font-size: 16px; padding: 0 0 10px; }
	#facility ul li .txt p{ padding: 2px 0 2px 15px; margin: 0 0 3px; font-size: 11px; }
	#facility ul li .txt p.area{ #facility ul li .txt p.area }
	
	#facility ul li .btns{ padding: 7px 0 0; }
	#facility ul li .btns a{ width: 100%; height: 35px; font-size: 11px; margin: 0 0 9px; }
	#facility ul li .btns a:after{ top: 13px; }
	

	
	/* ------------------------------------------------------------ footer */
	footer{ padding: 50px 0 70px; }
	footer .copy{ padding: 10px 0 0;}
	footer .flex{ flex-direction: column; }
	
	footer .adress p{ padding: 0 0 25px; font-size: 12px; }
	footer .adress p strong{ padding: 0 0 15px; width: 250px; }
	footer .adress li{ padding: 0 0 20px; font-size: 14px; width: 50%; }
	
	footer .contact{ padding: 30px 0 0; }
	footer .contact .txt{ padding: 0 0 10px; font-size: 15px; font-weight: 500; }
	
	footer .contact .tell{ padding: 0; font-size: 34px; text-align: center; }
	footer .contact .tell a{ float: none; width: 100%; display: block; padding: 0 0 10px; border-right: none; }
	footer .contact .tell p{ float: none; width: 100%; padding: 0; }
	
	footer .contact .sp_flex{ padding: 20px 0 0; display: flex; flex-direction: column-reverse; }
	footer .contact .btns{ padding: 10px 0 0; }
	
	footer .contact small{ font-size: 10px; }




}