@charset "utf-8";

/*--- 全体の幅 ------------------------------*/
/*.wrapper {width: 87.5%;max-width: 1400px;margin:0 auto;padding: 0;}*/
.wrapper {width: 92%;/*max-width: 1600px;*/margin:0 auto;padding: 0;}
.wrapper2 {width: 80%; max-width:1200px;margin:200px auto;padding: 0;}
.wrapper3 {width: 80%; max-width:1200px;margin:0 auto;padding: 0;}

.wrapper3 {width: 75%; max-width:1200px;margin:0 auto;padding: 0;}
.wrapper4 {width: 81.25%; max-width:1300px;margin:0 auto;padding: 0;}
.wrapper5 {width: 50%; max-width:800px;margin:0 auto;padding: 0;}
.wrapper6 {width: 62.5%; max-width:1000px;margin:0 auto;padding: 0;}
.inner { padding:4.5%;}
.inner2 { padding:90px 0 ;}
.bg {/* overflow-x: hidden; */}
@media screen and (max-width:640px){
	.wrapper,
	.wrapper2,
	.wrapper3,
	.wrapper4,
	.wrapper5,
	.wrapper6{width: 92%;max-width: 92%;}
	.inner { padding:5%;}
	.inner2 {padding: 8% 0;}
.wrapper2 {margin:0px auto;padding: 0;}
}

.column3 {display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; }
.column3 > * { width: 32.5%; }

/*--- Header ------------------------------*/
#wrap { overflow-x: hidden;position: relative; }
.page-header { height: 140px;top: 0;z-index: 100000;width: 100%;min-width: 100%;-o-transition: all 0.5s ease;-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;transition: .5s ease-in-out;flex-shrink: 0;flex-basis: auto;display: -webkit-flex;}
#mobile-head {display:flex;height: 100%;align-items: center;justify-content: space-between; /*-o-transition: all 0.5s ease;-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;transition: .5s ease-in-out; */ padding: 0 4%;width: 92%;min-width: 92%;flex-shrink: 0;flex-basis: auto;display: -webkit-flex;}

.logo {max-width: 420px;width: 30%;height: 50px;display: block;background: url(../img/logo.svg) no-repeat 0 50%;background-size: contain;font-size: 1px;text-indent: -99999px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: .5s ease-in-out;z-index: 10;position: relative;}
.logo a {display:block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
@media screen and (max-width: 1200px) {
	.page-header .logo {width: 295px;height: 40px;}
}
@media screen and (max-width: 1100px) {
	.page-header .logo {width: 250px;height: 40px;}
}
@media screen and (max-width:900px){
	.page-header {display: flex; position :relative;  height: 5rem; font-size:100%;z-index: 100}
	.page-header.open:after {content:"";width:100%;height:100vh;top:0;left:0;right:0;display:block;background: #f2f3f5;z-index: 1;position: absolute;}
  .page-header .logo {left: 4%;width: 60%;height: auto;padding-top: 5%; }
   .logo {width:65%; max-width: 250px;}
	.page-header .inner {padding: 3%;}
/*		.page-header.is-animation .inner {padding: 10px 3%;} */
	.header-inner {content:"";display:block;width:100%;height: 0;position:absolute;left:0;top:0;right:0;z-index: 999;/* background: #fff; */}
}
@media screen and (max-width:480px){
  .page-header .logo {left: 4%;width: 60%;height: auto;padding-top: 6%; }
}

/* glnav */
.global-nav {line-height: 0;-o-transition: all 0.5s ease;width: 72%; z-index: 100; }
.contact .global-nav {display:none;}
.contactlens .global-nav {width:50%;min-width: 50%;}
.global-nav ul { display: flex; list-style: none;font-weight: bold;justify-content: flex-end;align-items: center;flex-shrink: 0;flex-basis: auto;display: -webkit-flex; font-size: 100%;margin-right: 48px;}
/*.page-header.is-animation .global-nav ul {font-size: 85%;} */
.global-nav ul li {margin: 0 1.5%;position: relative;margin-right: 28px;}
.global-nav ul li:before {-o-transition: all 0.5s ease;-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;transition: .5s ease-in-out;content:"";display:block;background:url(../img/icon-active.svg) repeat-x 0% center; background-size:contain;position:absolute;width:40px;height:6px;bottom:-15px;left:50%;margin-left: -20px; opacity:0;}

.bsc .global-nav ul li.nav1:before,
.facilities .global-nav ul li.nav2:before,
.camping .global-nav ul li.nav3:before,
.watersports .global-nav ul li.nav4:before,
.natural .global-nav ul li.nav5:before,
.access .global-nav ul li.nav6:before{opacity:1; }

.global-nav ul li:hover:before {
	opacity: 1;
/*	-webkit-animation: navhover .3s linear 0s infinite normal backword;
	animation: navhover .3s linear 0s infinite normal forwards;
*/
}
@media screen and (max-width: 900px){
.global-nav ul { 
margin-right: 0px;
}
}
@-webkit-keyframes navhover {
    0% { background-position: 0% center; }
    100% { background-position: 50% center; }
}
@keyframes navhover {
    0% { background-position: 0% center; }
    100% { background-position: 50% center; }
}

.global-nav ul li .icon-arrow:before { top:.25em;}
.global-nav ul li.nav-tel {border-left:solid 1px #000;padding-left: 3%;margin-right: 0;min-width: 225px;}
.global-nav ul li a {text-align: center;position: relative;overflow: hidden;transition: .3s;display: block;letter-spacing: 0;}
.global-nav ul li a:hover {cursor: pointer;}

.btn-gnav {display: block;position: fixed;right: 2%;top: calc(70px - 2rem);width: 4rem;height: 4rem;cursor: pointer;z-index: 100001; background: #c5e6f5; border-radius:2rem;border: none !important; }
@media screen and (max-width: 900px){
.btn-gnav {border: none !important; }

}
.btn-gnav:before,
.btn-gnav:after { content: ''; display: block;position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 1px;width: 60%;background: #375980;left: 0;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;}
.btn-gnav:before { -ms-transform: translateY(-.5rem); -webkit-transform: translateY(-.5rem); transform: translateY(-.5rem); box-shadow: 0 .5rem #375980; }
.btn-gnav:after { -ms-transform: translateY(.5rem); -webkit-transform: translateY(.5rem); transform: translateY(.5rem); }

.head-mail { position: relative; z-index: 1000; }
.icon-mail { width: 2.2rem; height:1.5rem;display:block; position:relative; margin-right: 3.5rem; }
.icon-mail img { width: 90%; height: 90%; display:block; }

.head-weather { position: relative; display:inline-block; vertical-align:middle; z-index: 1000; line-height: 100%; width: 6rem; text-align: center; margin :0 1.5% 0; }
.head-weather .weather-icon { width: 2.5rem; display: inline-block; vertical-align: middle; }
.head-weather .temp { display: inline-block; line-height: 100%; vertical-align :middle;  font-weight: bold; color: #375980; font-size: .8rem; margin-left: .5rem; }

/*menu open*/
.page-header:before { content: ''; display: block;position: fixed;right: calc(2% + 1rem);top: calc(70px - 1rem);width: 2rem;height: 2rem;cursor: pointer;z-index: 1001; background: #c5e6f5; border-radius: 50%; -ms-transition: all .8s; -webkit-transition: all .8s; transition: all .8s; }
.page-header.open:before { -ms-transform: scale(200); -ernkit-transform: scale(200); transform: scale(200); }

.page-header.open .btn-gnav:before { -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); box-shadow: none;  }
.page-header.open .btn-gnav:after { -ms-transform: rotate(-150deg); -webkit-transform: rotate(-150deg); transform: rotate(-150deg); }


.page-header .global-nav ul li a {  -ms-transition: transform 0s .3s; -webkit-transition: transform 0s .3s;  transition: transform 0s .3s; }


.page-header.open .global-nav { opacity: 0; z-index: 1002; -ms-transition: all .3s; -webkit-transition: all .3s;  transition: all .3s; }
.page-header.open .global-nav ul li { overflow: hidden;  }
.page-header.open .global-nav ul li a { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); 
-ms-transition: transform 0s .3s;  -webkit-transition: transform 0s .3s;  transition: transform 0s .3s; opacity: 0;  }

.page-header.opened .global-nav { position: fixed; top: 0; left: 0; right: 0;  opacity: 1;  width: 100%; -ms-transition: opacity .3s; -webkit-transition: opacity .3s; transition: opacity .3s; padding-top: 5rem; }
.page-header.opened .global-nav ul { flex-wrap: wrap; }
.page-header.opened .global-nav ul li { width: 100%; margin-top: 2rem;}
.page-header.opened .global-nav ul li a { -ms-transform: translateY(0); -webkit-transform: translateY(0);  transform: translateY(0); -ms-transition: transform .3s; -webkit-transition: transform .3s; transition: transform .3s; font-size: 1.1rem; opacity: 1; }
.page-header.opened #mobile-head { flex-wrap: wrap;}


.global-nav .subnavi { display: none; text-align: center; margin-top: 3rem; height: 1.8rem; overflow: hidden; }
.global-nav .subnavi > li { display: inline-block; vertical-align: middle; width: auto; margin: 0 1rem 0 0; }
.global-nav .subnavi > li.contact { margin-right: 0; margin-left: 2rem;}
.global-nav .subnavi .contact i { display: inline-block; vertical-align: middle; margin: 0  0 0 .5em; }
.global-nav .subnavi > li { -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transition: all .3s .3s; -ms-transform: translateY(100%); -webkit-transition: all .3s .3s;  transition: all .3s .3s;  }

.page-header.open .global-nav .subnavi { display: block; }
.page-header.opened .global-nav .subnavi > li { display: inline-block; vertical-align: middle; width: auto; margin: 0 1rem 0 0;-ms-transform: translateY(0); -webkit-transform: translateY(0);  transform: translateY(0); -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }
.page-header.opened .global-nav .subnavi > li .contact { font-size: .9em;  }

@media screen and (max-width: 1400px) {
	.global-nav ul {font-size:91%;}
	.global-nav ul li {margin: 0 1.5%;}
}
@media screen and (max-width: 1300px) {
	.global-nav ul li {margin: 0 .75%;margin-right: 18px;}
}
@media screen and (max-width: 1200px) {
	.btn-gnav { width: 3rem; height: 3rem; top: calc( 70px - 1.5rem); }
	.global-nav {width:80%;}
	.global-nav ul {font-size:88%;}
	.global-nav ul li .icon-arrow:before { top:.25em; width:6px;}
}
@media screen and (max-width: 1100px) {
/*	.global-nav ul,
	.page-header.is-animation .global-nav ul {font-size:80%;} */
}
@media screen and (max-width: 900px) {
	.btn-gnav { width: 2.6rem; height: 2.6rem; top: 1rem; right: 4%;  }
	.page-header:before { top: 1.2rem; right: calc(4% + .4rem);  }
    #mobile-head { width: 100%;padding: 0; }
    .global-nav { display: none; }
    .page-header.open .global-nav { }
    .page-header.opened .global-nav { opacity: 1;  display: block; }
		
		.icon-mail { display :none; }
	
	.head-weather { position: absolute; top: .5rem; right: calc(5% + 3rem); margin: auto; width: 3rem; text-align: center; }
	.head-weather .temp{ display: block; margin-left: 0; margin-top: .2em;}
}



/*--- contents ------------------------------*/
#container {display:block;}
#container p { margin-bottom:2em;}
.privacy #container {font-size: 90%;padding:0 0 100px;}
.l_point {
	position: absolute;
	left: -60px;
	top: 15px;
	font-size: 18px;
	color: #375980;
}
.l_point::after {
    content: "";
    display: inline-block;
    width: 100px;
    height: 1px;
    margin-left: -33px;
    margin-top: 20px;
    vertical-align: middle;
    transform: rotate(-90deg);
    background: #375980;
}
.r_point {
	position: absolute;
	right: -10px;
	top: 20px;
	font-size: 18px;
	color: #375980;
}
.r_point p {
	margin-left: 32px;
}
.r_point::after {
    content: "";
    display: inline-block;
    width: 100px;
    height: 1px;
    margin-right: -25px;
    padding-right: -30px !important;
    margin-top: 20px;
    vertical-align: middle;
    transform: rotate(-90deg);
    background: #375980;
}
@media screen and (max-width:900px){
	#container{padding:8% 0 0; font-size:100%;}	
	#sub #container{padding:0 0 18.6%; }
.l_point,.r_point {display: none;}

}


/*--- footer ------------------------------*/
.footer{ padding:55px 0 200px; background:#fff;border-top: 1px solid #d9d9d9;}
.foot-logo { width: 436px;height: 82px;display: block;background: url(../img/logo.svg) no-repeat 0 50%;background-size: contain;font-size: 1px;text-indent: -99999px;margin: 0 auto 30px;}
.sns-list { display:block; text-align: center; }
.sns-list li { margin:0 8px; display: inline-block; }
.icon-fb,
.icon-insta { width:25px; height:25px;display:block; position:relative;}
.icon-fb img,
.icon-insta img { width: 90%; height:90%; display: block; }
.icon-fb a ,
.icon-insta a { position:absolute;width:100%; height:100%;display:block;}
/*
.icon-fb { background:url(../img/icon-fb.svg) no-repeat center center;background-size: 92% 92%;}
.icon-insta { background:url(../img/icon-insta.svg) no-repeat center center;background-size:92% 92%;}
*/
.foot-nav {display:flex;justify-content:center;font-size: 75%;}
.foot-nav li { margin:0 1em;}
.foot-nav li a { color:#666;}
.contact .foot-logo,
.contact .sns-list ,
.contact .foot-nav { display:none;}
.copy {text-align:center;font-size: 70%;padding: 25px 0 0;}
.pagetop {display: block;position: fixed;bottom: 180px;right: 40px;z-index: 9999;width: 60px;height: 60px;background: url(../img/icon-top.png) no-repeat;cursor: pointer;background-size: contain; border-radius: 50%; -ms-transition: all .3s; -webkit-transition: all .3s;  transition: all .3s; }
.pagetop.hover:hover {  }
@media screen and (max-width:900px){
	#footer {padding: 2rem 0 5%;}
	.foot-logo { width:68%;height:auto; padding-top:12.8%;}
	.foot-nav {display: block;font-size: 62%; text-align:center;}
	.foot-nav li{ display:inline-block;}
	.copy{font-size:70%;}
	.pagetop {right: 4%;bottom:68px; width: 60px;height: 60px;}

}