@charset "UTF-8";
/* CSS Document */
.content{position:relative; max-width:980px; margin:0 auto; padding:0 10px; box-sizing:border-box;}
a[href^="tel:"]{pointer-events:none;}
.comingSoon { cursor: default;}

/* HEADER */
h1{padding:10px 0; max-width:338px; width:35.3%;}
header nav{position:absolute; top:50%; right:10px; max-width:340px; width:36%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
header nav a{width:48.53%; float:left; margin:0 0 0 2.94%;}
header nav a:first-of-type{margin:0;}
header nav a:last-of-type{display:none;}
header nav a:hover{opacity:.8;}

/* GNAV */
#gnav{background:url(../img/gnav_bg.jpg) no-repeat top center; background-size:cover; padding:0 10px;}
#gnav ul{max-width:920px; margin:0 auto; box-sizing:border-box;}
#gnav li{font-size:18px; line-height:1; color:#004c21; float:left; font-weight:bold; margin:0 45px 0 0;}
#gnav li:last-of-type{margin:0;}
#gnav li a{padding:16px 0; display:block;}
#gnav li a:hover{opacity:.7;}
#gnav li.un a, #gnav li.un a:hover{opacity:.6;}

/* CONTENT */
.main{max-width:980px; margin:0 auto; padding:60px 10px 80px; box-sizing:border-box;}

#mainImg{width:100%; height:270px; background-position:center center; background-repeat:no-repeat; background-size:cover; position:relative;}
#mainImg h2{position:absolute; top:50%; left:0; width:100%; text-align:center; transform:translateY(-50%); -webkit-transform:translateY(-50%);}

#mainBtn{margin:0 auto 80px;}
#mainBtn a{width:49.38%; margin:0 1.24% 0 0; float:left;}
#mainBtn a:last-of-type{margin:0 auto;}
#mainBtn a:hover{opacity:.7;}

/* FOOTER */
footer{background:url(../img/foot_bg.png) repeat-x; background-size:auto 16px; padding:40px 0 0 0;}
footer a{display:inline-block;}
footer a:nth-of-type(1){margin:0 4.5% 0 0; max-width:292px; width:30.42%;}
footer a:nth-of-type(2){max-width:284px; width:29.59%;}
#copyright{padding:20px 0; text-align:center; font-size:10px; 
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

#pageTop{position:fixed; bottom:20px; right:20px; cursor:pointer; width:16.7%; max-width:160px;}
#pageTop:hover{opacity:.7;}

#footerSpBnr { display:none; background:#00b7ee; position:fixed; bottom:0; left:0; width:100%; margin:0; padding:0; z-index:99999999; }
#footerSpBnr ul { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; }
#footerSpBnr ul li { margin:0; }
#footerSpBnr ul li:nth-of-type(1)  { flex-grow:0; flex-shrink:1; flex-basis:40%; }
#footerSpBnr ul li:nth-of-type(2)  { flex-grow:0; flex-shrink:1; flex-basis:20%;}
#footerSpBnr ul li:nth-of-type(3)  { flex-grow:0; flex-shrink:1; flex-basis:20%;}
#footerSpBnr ul li:nth-of-type(4)  { flex-grow:0; flex-shrink:1; flex-basis:20%;}
#footerSpBnr ul li a,
#footerSpBnr ul li a:hover { display:block;  text-align:center; line-height:1; }
#footerSpBnr ul li a img { width:100%; height:auto; }

/* ----------------------------
			MEDIA
---------------------------- */
@media screen and (max-width:940px){
#gnav li{font-size:1.9vw; margin:0 4.65vw 0 0;}
}

@media screen and (max-width:767px){
a[href^="tel:"]{pointer-events:auto;}

header{position:fixed; top:0; left:0; width:100%; background:#fff; z-index:9999;}
h1{width:44%; padding:1.2vw 0;}
header nav{width:46%;}
header nav a{width:40%; margin:0 0 0 3.1%;}
header nav a:last-of-type{display:block; width:13.8%;}

#gnav{position:fixed; background:#74acb1; top:9.5vw; left:0; width:100%; padding:0; display:none; z-index:9998;}
#gnav li{width:50%; margin:0; float:left; text-align:center; font-size:3.5vw; border-top:1px solid #fff; box-sizing:border-box; color:#fff;}
#gnav li:nth-of-type(2n+1){border-right:1px solid #fff;}
#gnav li a{padding:3vw 0;}

#mainImg{margin:9.5vw 0 0 0;}
#mainImg h2 img{max-width:312px; width:70%;}

#mainBtn a{width:100%; max-width:474px; margin:0 auto 5%; float:none; display:block;}

footer{padding:7% 0 20vw 0;}
footer a{display:block; margin:0 auto;}
footer a:nth-of-type(1){width:70%; margin:0 auto 5%;}
footer a:nth-of-type(2){width:70%;}
#copyright{padding:5% 0 6.5%;}
#pageTop{width:21%; bottom:20.5vw;}

#footerSpBnr{display:block; }
}

@media screen and (max-width:480px){
#mainImg{height:40vw;}
	
.main{padding:40px 10px 50px;}
#mainBtn{margin:0 auto 50px;}

footer{background-size:auto 10px;}
#copyright{padding:5% 0 9%;}
#pageTop{width:30%; right:10px;}
}