@charset "UTF-8";
/* CSS Document */
body {}
body:not(.page_top) { background: url("../img/common/bg_top_01.jpg") center top / 100% auto no-repeat; }

img { width: auto; max-width: 100%; height: auto;}
.comingSoon { cursor: default;}
.content { width:100%; max-width:1040px; box-sizing:border-box; padding:0 20px; margin:0 auto; }
#main .content { margin:0 auto 60px auto; }
.moreBtn { display:block; width:100%; max-width:320px; margin:0 auto; }

#guideBox,
#access,
#plan { padding:20px 20px 80px 20px; background:url(../img/common/line_common_01.png) bottom center / calc(100% - 20px) auto no-repeat;  }

.flexBox { display: flex; flex-wrap: wrap; justify-content: space-between;}
.flexBox.noWrap { flex-wrap: nowrap;}
.flexBox.center { justify-content: center;}
.flexBox > * { flex-grow:0; flex-shrink: 1; }
.flexBox > .flexEnd { align-self: flex-end;}
.alignCenter { text-align: center; }
.alignRight {text-align: right;}

.mb10 { margin-bottom: 10px;}
.mb20 { margin-bottom: 20px;}
.mb30 { margin-bottom: 30px;}
.mb40 { margin-bottom: 40px;}
.mb50 { margin-bottom: 50px;}
.mb60 { margin-bottom: 60px;}
.mb80 { margin-bottom: 80px;}
.mb100 { margin-bottom: 100px;}
.mb120 { margin-bottom: 120px;}

.inlineBlock { display: inline-block; }
.block { display: block;}


/* HEADER */
#header { position: fixed; top:0; left: 0; width: 100%; z-index: 1000;}
#header.scrolled { background: rgba(255,255,255,0.9); box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);}
#header.scrolled .headerContent { padding: 10px 0;}
.headerContent {background: rgba(255,255,255,0); width: 100%; box-sizing: border-box; max-width: 1200px; padding: 30px 0; margin: 0 auto; transition: padding 0.5s linear 0s, background 0.5s linear 0s;;}
#header h1 { flex-basis:19.16%;}
#header .point { flex-basis:23.33%; align-self: center;}
#header .btnBox { flex-basis: 46.66%; align-self: center;}
#header .cvBtn { margin: 0 0 15px 0;}
#header .cvBtn ul .tel { flex-basis: 42.85%;}
#header .cvBtn ul li { flex-basis:25.89%; font-size: 18px; }
#gNavi ul li { }
#gNavi ul li a { display: inline-block; font-size: 14px; color: #000; text-decoration: none;}
#gNavi ul li a.active,
#gNavi ul li a:hover { color: #000; text-decoration: underline;}
#spMenuBtn { width: 40px; height: 40px; position: fixed; right:10px; top:10px; z-index: 999; color: #036eb8; box-sizing: border-box; text-align: center;font-size: 5vw;}
#spMenuBtn a { color: #036eb8; text-decoration: none; display: block;}
/* PAGE TOP */
#pageTop { position:fixed; right:20px; bottom:20px; width:40px; height:40px; z-index:10; }
#pageTop a { position:relative; z-index:2; display: block;  background: #91cdf1; }

#page_top #gNavi ul li:nth-of-type(1) a,
#page_feature #gNavi ul li:nth-of-type(2) a,
#page_access #gNavi ul li:nth-of-type(3) a,
#page_plan #gNavi ul li:nth-of-type(4) a,
#page_house #gNavi ul li:nth-of-type(5) a,
#page_structure #gNavi ul li:nth-of-type(6) a,
#page_outline #gNavi ul li:nth-of-type(7) a {text-decoration: underline;}


/* BASIC STYLE */
.basicTitle { font-size: 45px; text-align: center; line-height: 1.2em; font-weight: bold;}
.basicTitle .sub { display: block; font-size: 50%; text-align: center; line-height: 1;}
#content .basicTitle { position: relative; bottom:1.25em;}
.basicSubTitle { font-size: 27px; text-align: center; line-height: 1.2em; font-weight: bold; text-decoration: underline;}
.basicMiddleTitle { font-size: 32px; font-weight: bold; line-height: 1.2; padding: 0 0 0 0; }
.basicMiddleTitle .sub { display: block; font-size: 50%; line-height: 1;}
.basicSmallTitle { display: inline-block; background: #036eb8; color: #fff; font-size: 16px; line-height: 1; padding: 0.25em 1em; }
#page_facility .basicSmallTitle { display: flex; background: none; color: #0363b8; line-height: 1.2; font-size: 18px; margin: 10px 0; align-items: center; padding: 0 0 0 0; font-weight: bold;}
.basicText { font-size: 16px; line-height: 2em;}
.basicCaption { font-size: 12px; line-height: 1.5em; }
.detailBtn { display: block; width: 10em; margin: 0 auto; box-sizing: border-box; line-height: 1; padding: 0.5em 0; font-size: 16px; font-weight: bold; color: #fff; text-decoration: none; background: #ec6941; text-align: center; border-radius: 10px;}

.keyColor01 { color: rgba(236,105,65,1);}
.requestBtn { background: #0e6eb8; color: #fff; text-decoration: none; display: block; line-height: 1; padding: 0.3em 0; text-align: center; }
.reserveBtn { background: #1f93c6; color: #fff; text-decoration: none; display: block; line-height: 1; padding: 0.3em 0; text-align: center; }
.requestBtn:before { content: ''; display: inline-block; background: url("../img/common/icon_01.png") center center / auto 1em no-repeat; width: 1em; height: 1em; line-height: 1; margin: 0 0.25em 0 0; }
.reserveBtn:before { content: ''; display: inline-block; background: url("../img/common/icon_02.png") center center / auto 1em no-repeat; width: 1em; height: 1em; line-height: 1; margin: 0 0.25em 0 0; }

.content { width:100%; max-width: 1040px; box-sizing: border-box; padding: 0 20px; margin-right:auto; margin-left: auto;}
#content { background: #fff; width: 100%; max-width: 1100px; margin-right: auto; margin-left: auto; margin-top: 270px; overflow: visible;}

/* FOOTER  */
#footerWrapper { background: url("../img/common/bg_bottom_01.jpg") center top / cover no-repeat; padding: 10% 0 20%  0;}
#footerBnr ul { }
#footerBnr ul li{ flex-basis:calc( ( 100% - 20px) / 2); font-size: 24px; }
#footerBnr ul li a { position: relative; padding: 1em 0;}
#footerBnr ul li a:after { content: '▲'; color: #fff; transform: rotate(90deg) translateY(-50%); position: absolute; right:12px; top:50%; display: block; font-size: 50%; transform-origin: 50% 25%;}

#footer { background: #46413e; padding: 60px 0 70px 0 ; }
#footer .logoBox { margin: 0 0 30px 0;  width: 300px;}
#footer .telBox { flex-basis: 51.6%; }
#footer #copyRight { flex-basis: calc( 48.4% - 20px); text-align: right; font-size: 12px; color: #fff; align-self: flex-end}

#footerSpBnr { display:none; background:#00b7ee; position:fixed; bottom:0; left:0; width:100%; margin:0; padding:0; z-index:99999998; }
#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; }

/* SMARTPHONE MENU */
#spMenu { box-sizing: border-box; padding: 20px; position: fixed; z-index: 99999999; width: 100%; height: 100%; left: -100%; top:0; opacity:0; background: rgba(255,255,255,0.95); transition:opacity 0.5s linear 0s, left 0.5s linear 0s;}
#spMenu .logoBox { padding: 0 0 2.8% 0; margin: 0 0 2.8% 0; border-bottom: #fff solid 1px; text-align: center;}
#spNavi { margin: 0 0 20px 0;}
#spNavi ul li { flex-basis:calc( ( 100% - 40px ) / 3 ); margin: 0 0 20px 0;}
#spCv { margin: 0 0 20px 0;}
#spCv ul li { flex-basis:calc( ( 100% - 20px ) / 2 );}
#spMenu .closeBtn { padding: 1.4% 0; text-align: center; border-top: #0e6eb8 solid 1px; border-bottom: #0e6eb8 solid 1px; width:60%; margin:0 auto;}

@media screen and (max-width:1000px) {

}

@media screen and (min-width:768px) {
	.spOnly { display:none;  }
	
	/* HOVER ANIMATION */
	.detailBtn:hover { background: #ccc; text-decoration: none; transition: background 0.5s linear 0s;}
	#pageTop a:hover { background: #0e6eb8; transition: background 0.5s linear 0s;}
	.requestBtn:hover,
	.reserveBtn:hover { background: #999; transition: background 0.5s linear 0s; }
}
@media screen and (max-width:767px) {
	
	.pcOnly { display:none;  }
  /* HEADER */
	#header { background: rgba(255,255,255,0.9); box-shadow: 0 0 5px 5px rgba(0,0,0,0.1); position: absolute;}
	#header .headerContent { padding: 10px 0;}
	#header h1 { flex-basis:30%; margin: 0 0 10px 0; }
  #header .point { flex-basis:50%; align-self: center; margin: 0 0 10px 0;}
  #header .btnBox {  flex-basis:100%; }
	#header .cvBtn { margin: 0 0 0 0;}
  #header .cvBtn ul .tel { display: none;}
  #header .cvBtn ul li { flex-basis:42%; font-size: 3vw; }
	#header .cvBtn ul li:nth-of-type(4) { flex-basis: 12%; position: relative;}
	#header .cvBtn ul li:nth-of-type(4) a { display:block; width:100%; top:calc(50% - 0.75em); position:absolute; left:0; text-align:center; font-size:5vw; color:#0d6db7; line-height:1.5em; text-decoration:none;}
	#gNavi { display: none; }
	
	/* BASIC STYLE */
	.basicTitle { font-size: 5vw;}
	.basicSubTitle { font-size: 4vw; }
	.basicMiddleTitle { font-size: 4vw;}
	.basicSmallTitle { font-size: 16px; }
	
	#content { margin-top: 40%;}
	
	/* FOOTER */
	#footerBnr ul li { font-size: 4vw; }
  #footer { padding: 60px 0 25vw 0 ; }	
  #footer .logoBox { margin: 0 auto 30px auto;  width: 300px; max-width: 100%;}
  #footer .telBox { flex-basis: 100%; margin: 0 0 20px 0; }
  #footer #copyRight { flex-basis: 100%; text-align: center; font-size: 2.5vw;}

  #pageTop { bottom:25vw; }




  #footerSpBnr { display:block; }
	
	
  /* SMARTPHONE MENU */
  #spMenu.active { left:0; opacity:1; box-shadow:0 0 5px 5px rgba(0,0,0,0.2);}
}