@charset "UTF-8";
/* CSS Document */
.pcOnly {  }
.spOnly { display:none; }
img { width: auto; max-width: 100%; height: auto;}
.comingSoon { cursor: default;}

.flexBox { display: flex; flex-wrap: wrap; justify-content: space-between;}
.flexBox > * { flex-grow: 0; flex-shrink: 1;}

.basicSubTitle { display: block; font-size: 24px; line-height: 1.2em; margin: 0 0 1em 0; font-weight: bold; color: #00632a; text-align: left;}
.basicText { font-size: 16px; line-height: 2em; color: #333; text-align: left;}

#feature02 { margin: 0 auto 60px auto;}
#feature02 .textBox { flex-basis: 42%; margin: 0 0 20px 0; background: url("../img/feature/bg_feature2_01.png") right bottom / 220px auto no-repeat }
#feature02 .photoBox01 { flex-basis: 54%; margin: 0 0 20px 0; }
#feature02 .photoBox02 { flex-basis: 54%; margin: 0 0 20px 0; }
#feature02 .photoBox03 { flex-basis: 42%; margin: 0 0 20px 0; }

#header { }
#headerBox { display: block; width: 100%; box-sizing: border-box; padding: 0 20px 10px 20px; max-width: 1000px; margin: 0 auto; }
#headerBox h1 { font-size:12px; line-height:1.1;  padding:0.5em 0; }
#headerBox h2 { width: 44.8%; float:left; }
header .btnBox { padding: 0; width:37%;  line-height: 1; float: right;}
header .btnBox ul {}
header .btnBox ul li { width: calc(50% - 5px); float: left; margin: 0 10px 0 0;}
header .btnBox ul li a { display: block;}
header .btnBox ul li:nth-of-type(1) a { background:#89acd8; }
header .btnBox ul li:nth-of-type(2) a { background:#ef9051; }
header .btnBox ul li a:hover { background:#ccc; text-decoration:none; }
header .btnBox ul li a.comingSoon,
header .btnBox ul li a.comingSoon:hover { background:#ccc !important; opacity:0.3;}
header .btnBox ul li:last-of-type {margin: 0; }

#gNavi { background: #faf5d9; line-height: 1;  margin:0 0 0 0; }
#gNavi ul { display: block; width: 100%; box-sizing: border-box; padding: 0 20px; max-width: 1000px; margin: 0 auto; }
#gNavi ul li { display: block; width: 12.5%; background: #faf5d9; float: left; box-sizing:border-box; }
#gNavi ul li a { display: block; background: #faf5d9; padding: 0; position: relative; }
#gNavi ul li a:hover { display: block; }
#gNavi ul li a:after { width: 100%; right: 0; bottom:0; height:4px; content: ''; display:block; position: absolute; background: #faf5d9; transition: background 0.5s ease-in 0s; z-index:3;}
#gNavi ul li a:hover:after {background: #00632a;}
#gNavi ul li a.comingSoon,
#gNavi ul li a.comingSoon:hover { opacity: 1; background:#faf5d9; }
#gNavi ul li a.comingSoon:hover:after {background: #faf5d9;}
#gNavi ul li a img { opacity: 1; position:relative; z-index:2; }
#gNavi ul li a.comingSoon img,
#gNavi ul li a.comingSoon:hover img{ opacity: 0.2; position:relative; z-index:2; }

#pageHome #gNavi ul li:nth-of-type(1) a:after { background:#00632a; }
#pageFeature #gNavi ul li:nth-of-type(2) a:after { background:#00632a; }
#pageAccess #gNavi ul li:nth-of-type(3) a:after { background:#00632a; }
#pagePlan #gNavi ul li:nth-of-type(4) a:after { background:#00632a; }
#pageHouse #gNavi ul li:nth-of-type(5) a:after { background:#00632a; }
#pageEquipment #gNavi ul li:nth-of-type(6) a:after { background:#00632a; }
#pageStructure #gNavi ul li:nth-of-type(7) a:after { background:#00632a; }
#pageOutline #gNavi ul li:nth-of-type(8) a:after { background:#00632a; }
#pageHome #gNavi ul li:nth-of-type(1) a { background:#faf5d9; }
#pageFeature #gNavi ul li:nth-of-type(2) a { background:#faf5d9; }
#pageAccess #gNavi ul li:nth-of-type(3) a { background:#faf5d9; }
#pagePlan #gNavi ul li:nth-of-type(4) a { background:#faf5d9; }
#pageHouse #gNavi ul li:nth-of-type(5) a { background:#faf5d9; }
#pageEquipment #gNavi ul li:nth-of-type(6) a { background:#faf5d9; }
#pageStructure #gNavi ul li:nth-of-type(7) a { background:#faf5d9; }
#pageOutline #gNavi ul li:nth-of-type(8) a { background:#faf5d9; }



#content { margin: 0 auto 0 auto; }
#content h3 { text-align:center; margin:0 auto 40px auto; width:100%; max-width:480px; }



#footerBnr { padding: 65px 0 120px 0; }
#footerBnr ul { display: block; width: 100%; box-sizing: border-box; padding: 0 20px; max-width: 1000px; margin: 0 auto; }
#footerBnr ul li {width:calc(50% - 5px); float:left;}
#footerBnr ul li:last-of-type { float: right;}
#footerBnr ul li:nth-of-type(1) a { display:block; background:#89acd8 url(../img/common/btn_footer_01.png) center center no-repeat; background-size:auto 100%; height:60px; text-indent:-9999px; overflow:hidden; }
#footerBnr ul li:nth-of-type(2) a { display:block; background:#ef9051 url(../img/common/btn_footer_02.png) center center no-repeat; background-size:auto 100%; height:60px; text-indent:-9999px; overflow:hidden;  }
#footerBnr ul li:nth-of-type(1) a:hover { background:#ccc url(../img/common/btn_footer_01.png) center center no-repeat; background-size:auto 100%;  }
#footerBnr ul li:nth-of-type(2) a:hover { background:#ccc url(../img/common/btn_footer_02.png) center center no-repeat; background-size:auto 100%;  }
#footerBnr ul li:nth-of-type(2) a.comingSoon { display:block; background:#ccc url(../img/common/btn_footer_02.png) center center no-repeat; background-size:auto 100%; height:60px; text-indent:-9999px; overflow:hidden; opacity:0.2;  }
#footerBnr ul li:nth-of-type(2) a.comingSoon:hover { display:block; background:#ccc url(../img/common/btn_footer_02.png) center center no-repeat; background-size:auto 100%; height:60px; text-indent:-9999px; overflow:hidden; opacity:0.2;  }

#footer::before { content:''; background:url(../img/common/bg_footer_01.png) top center / contain no-repeat; width:100%; display:block; position:absolute; padding:5.1% 0 0 0; left:0; top:0; margin:-4% 0 0 0; }
#footer::after { content:''; background:#00632a; width:100%; padding:4px 0 0 0; position:absolute; left:0; top:0; display:block; }
#footer { background: #faf5d9; position:relative; }
#footerBox { display: block; width: 100%; box-sizing: border-box; padding: 20px; max-width: 1000px; margin: 0 auto; }
#footerBox .logoBox { width: 28.85%; float: left;}
#footerBox .telBox { width: 64.47%; float: right;}
#copyright { background: #00632a; }
#copyright address { display: block; width: 100%; box-sizing: border-box; padding: 0.5em 20px; max-width: 1000px; margin: 0 auto; font-size: 10px; text-align: center; color: #fff;}

#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 screen and (max-width:768px) {
#headerBox { padding:0; }
#headerBox h1 { display:none;}
#headerBox h2 { display:block; width:100%; margin:0 auto 0 auto; float:none; max-width:400px; box-sizing:border-box; padding:10px; }
header .btnBox { width:100%; float:none; padding:0; }
header .btnBox ul li { width:50%; margin:0; }
header .btnBox ul li a { text-align:center; width:100%; padding:0.5em 0; font-size:3.5vw; font-weight:bold; color:#fff; text-decoration:none; }
header .btnBox ul li a img { display:none; }
header .btnBox ul li:nth-of-type(1) a::before { content:'資料請求'; display:block; }
header .btnBox ul li:nth-of-type(2) a::before { content:'来場予約'; display:block; }

	
#gNavi ul li { width: 25%;}
#gNavi ul li:nth-of-type(4n+1) { clear: both;}

#footer { padding-bottom:20%; }
#footerBnr {  padding: 6.71% 0; }
#footerBnr ul li { width: 100%; float: none; margin: 0 0 10px 0;}
#footerBnr ul li:last-of-type { margin: 0; float: none;}

#footer::before  { display:none; }
#footerBox .logoBox { width: 44.74%; float: none; margin: 0 auto 10px auto;}
#footerBox .telBox { width:100%; float: none;}

.pcOnly { display:none;  }
.spOnly { display:block; }

.basicSubTitle { display: block; font-size: 18px; text-align: center;}
.basicText { font-size: 14px; }

#feature02 .textBox { flex-basis: 100%;  }
#feature02 .textBox h3 { text-align: center !important;	}
#feature02 .textBox  p br {display: none;}
#feature02 .photoBox01 { flex-basis:  100%; }
#feature02 .photoBox02 { flex-basis:  100%; }
#feature02 .photoBox03 { flex-basis: 100%;  }

#footerSpBnr { display:block; }
}