*,:after,:before{box-sizing:border-box}
body,html{height:100%;width:100%}
body,p,h1,h2,h3{padding:0;margin:0}
p,h1,h2{line-height:1.3;width:100%;text-shadow:0 0 5px rgba(0,0,0,.8)}
/*body{font-family:source sans pro,helvetica,arial;font-weight:300;font-size:18px}*/
p{font-size:1em}
.p--copy{padding:3px 0 22px}
.p--credits{font-size:.8em;font-weight:700}
h1,h2{font-size:1.5em;font-weight:700}
a{color:#fff;font-weight:700;text-decoration:none}
.a--no-weight{font-weight:300}

section{padding:0;margin:0;position:relative;width:100%;display:flex;align-items:center;flex-wrap:wrap}
section .content{background:rgba(0,0,0,.4);color:#fff;border-radius:3px;padding:15px 20px;margin:0 auto;text-align:center}

.parallax--container{position:absolute;clip:rect(0,auto,auto,0);width:100%;height:100%;top:0;left:0;z-index:-10}
.parallax{position:fixed;width:100%;height:100%;top:0;left:0}
.parallax--bg{background-repeat:no-repeat;background-position:center;background-size:cover}


.container--huge{height:175vh}
.container--big{height:100vh}
.hero{height:100vh}
.container--small{height:60vh}
.container--random{height:452px}
/*固定画像１*/
.bg1{background-image:url(images/BgImg_01.jpg)}
.bg2{background-image:url(images/BgImg_02.jpg)}
#bg3{background-image:url(images/BgImg_02.jpg)}

/**/
.shutter{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#1e1e1e;
  z-index:9999;
}

.shutter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: #fff;
  width: 0;
  height: 1px;
}

.shutter {
  -webkit-animation: byeShutter 2.6s forwards;
          animation: byeShutter 2.6s forwards;
}

.shutter::before {
  -webkit-animation: shutterOpen 2.6s forwards;
          animation: shutterOpen 2.6s forwards;
}


@keyframes byeShutter {
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    z-index: -1;
  }
}
@keyframes shutterOpen {
  0% {
    width: 0;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  90% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes contentScale {
  70% {
    -webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
            transform: perspective(800px) scale(0.9) rotateX(15deg);
  }
  100% {
    -webkit-transform: perspective(800px) scale(1) rotateX(0);
            transform: perspective(800px) scale(1) rotateX(0);
  }
}



/***/

* {
   box-sizing: border-box;
}
body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: #FFF; /*#e6e6e6;*/
   letter-spacing : 0.2em;
}

/* --------------------------------------------------------
ナビゲーション
-------------------------------------------------------- */
header {}
.site-header{
	/*padding: 20px 4% 10px;*/
	padding: 30px 4% 10px;
	position:fixed;
	top: 0;
	width: 100%;
	background-color: transparent;
/*background: rgba(255,255,255,0.2);*/
background: rgba(0,0,0,0);
	display: flex;
	align-items: center;
	z-index:1000;
	transition: .5s;
}
.site-header.hide{
	/*top: -63px;*/
    top: -63px;
}
h1 {
   margin: 0; padding: 0;
   font-size: 20px;
}
a {	
   text-decoration: none;
   color: #fff;
}
nav {
   margin: 0 0 0 auto;
}
ul {
   list-style: none;
   margin: 0;
   display: flex;
}
li {
   margin: 0 0 0 15px;
   font-size: 14px;
}
.main-visual {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: url('main_visual.jpg') top center / cover no-repeat;
}
h2 {
   margin: 0;
   font-size: 30px;
   font-weight: normal;
   color: #fff;
}

.sp-nav {
   display: none;
}

@media screen and (max-width: 640px) {
   .pc-nav {
      display: none;
   }
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      background: rgba(0, 0, 0, .8);
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
   }
   #hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 0 0 0 auto;
   }
   #hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #fff;
      transform: translateY(-50%);
   }
   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #fff;
   }
   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #fff;
   }
   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: right;
      height: 100%;
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
   }
   .sp-nav li span {
      font-size: 15px;
      color: #FFF;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }
   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 40px;
   }

   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
     /*transform: rotate( 45deg );*/
   }
   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #fff;
      /*transform: rotate( -45deg );*/
   }
   .toggle {
      transform: translateY( 0 );
      opacity: 1;
   }
   .main-visual {
      padding: 0 4%;
   }
   h2 {
      line-height: 1.6;
      text-align: center;
   }  
}

/* --------------------------------------------------------
	Concept
-------------------------------------------------------- */
.Concept_title {
	font: 45px/0.9em TimesNewRoman,'Times New Roman',Times,Baskerville,Georgia,serif,'websafe'; 
	text-align: left; color: #999; text-transform: none; text-indent: 0px; letter-spacing: normal; 
	width: 100%; padding-bottom:30px;
}
.Concept_detail{
	display:flex; text-align:center; justify-content:center; align-items:center;
	}
.Concept_txt {
	text-align:left;
	font-size: 12px;
	line-height: 30px;
	
}
.Concept_img {background-image: none;}
@media screen and (min-width:768px){
.Concept_txt {
	text-align:left !important;
	font-size: 16px;
	line-height: 60px;
	padding-top: 20px;
	padding-left: 50px;
}
.Concept_img {background-image:url(images/omoi.jpg); width:360px; height:400px;border-radius: 10px;}
}
/* --------------------------------------------------------
	Badens
-------------------------------------------------------- */
.Badens_title {
	font: 45px/0.9em TimesNewRoman,'Times New Roman',Times,Baskerville,Georgia,serif,'websafe'; 
	text-align: left; color: #999; text-transform: none; text-indent: 0px; letter-spacing: normal; 
	width: 100%; padding-bottom:30px;
}
.Badens_detail{
	display:flex;flex-direction: column; text-align:center; justify-content:center; align-items:center;
	}
.Badens_txt {
	text-align:left;
	font-size: 12px;
	line-height: 30px;
	
}
.Badens_detail img{ width:300px;}
.Badens_img {background-image:url(images/badens.jpg); width:300px;border-radius: 10px;}
@media screen and (min-width:768px){
.Badens_detail{
display:flex;flex-direction: row; text-align:center; justify-content:center; align-items:center;
}
.Badens_txt {
	text-align:left !important;
	font-size: 16px;
	line-height: 40px;
	padding-top: 20px;
	padding-left: 50px;
}
.Badens_detail img{ width:500px; height:360px;border-radius: 10px;}
.Badens_img {background-image:url(images/badens.jpg); width:500px; height:360px;border-radius: 10px;}
}
/* -----------------------------------------------------------
	Menu topics
----------------------------------------------------------- */
.Menu_content{
	background:rgba(0,0,0,.5); 
	width:100%;
	}
.Menu_detail{
	display:flex; 
	text-align:center; 
	justify-content:center; 
	flex-wrap:wrap;
	align-items: flex-start;
	}
.Menu_box {
width:100%;
margin: 10px 0px;
text-align:left;
}

.ttl {
font-size: 14px;
font-weight: bold;
color:#FFF;
padding: 10px 0;
/*border-bottom: solid 1px #CCC;*/
}

.topics {
margin: 10px 0;
/*font-family:"Arial Black", Gadget, sans-serif; color:#fff; */
}

.topics dl { 
margin-bottom:20px;
padding: 10px 0;
/*border-bottom: 1px solid #FFF;*/
font-size:14px;
}

.topics dt { 
float:left; 
clear:left;
width: 60%;
font-size:11px;
padding-bottom:10px;
margin-bottom:20px;
}
.topics dd {
font-size:11px;
float: left ;
padding-bottom:10px;
margin-bottom:20px;
width: 40%;

}

@media screen and (min-width: 768px) {
.Menu_box {
width: 40%;
/*width: 50%;*/
margin: 15px 15px;
text-align:left;
}
.topics dl { 
padding: 20px 0;
font-size:10px;}
.topics dt {
float: left;	
clear: left;
width: 60%;
font-weight: normal;
padding-left: 10px;
}
.topics dd { 
width: 40%;
float:left;
}
}/* PC end */


/*01*/

.css-selector1 {
	width:auto;
	height:3px;
    background: linear-gradient(271deg, #ffffff, #caf5f7, #ffffff, #d0f5c3, #fcfffc);
    background-size: 200% 1000%;

    -webkit-animation: AnimationName1 20s ease infinite;
    -moz-animation: AnimationName1 20s ease infinite;
    animation: AnimationName1 20s ease infinite;
}

@-webkit-keyframes AnimationName1 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName1 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName1 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
/*02*/

.css-selector2 {
	height:3px;
    background: linear-gradient(271deg, #FFF, #F9F, #ffffff, #0FF, #FF3);
    background-size: 200% 1000%;

    -webkit-animation: AnimationName2 10s ease infinite;
    -moz-animation: AnimationName2 10s ease infinite;
    animation: AnimationName2 10s ease infinite;
}

@-webkit-keyframes AnimationName2 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName2 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName2 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
/*03*/
.css-selector3 {
	height:3px;
    background: linear-gradient(271deg, #FFF, #00F, #FFF, #0FF, #FF3);
    background-size: 200% 1000%;

    -webkit-animation: AnimationName3 30s ease infinite;
    -moz-animation: AnimationName3 30s ease infinite;
    animation: AnimationName3 30s ease infinite;
}

@-webkit-keyframes AnimationName3 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName3 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName3 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/* -----------------------------------------------------------
	Access
----------------------------------------------------------- */
.Access_title {
	font: 45px/0.9em TimesNewRoman,'Times New Roman',Times,Baskerville,Georgia,serif,'websafe'; 
	text-align: center; color: #333; 
	text-transform: none; 
	text-indent: 0px; 
	letter-spacing: normal; 
	width: 100%; 
	padding:10px;
}

/*Mobile*/
.Access_box{
	float:left;
  	width: 100%;  
	height:50%;
	padding:20px;
	margin:0px;
	background-image:url(images/genkan01.jpg); 
	background-size: cover
	}
.Access_txt{
	float:left;
	text-align:left;
  	width: 100%;  
	height:50%;
	padding:20px;
	margin:0px;
	color:#000;
	background-color:#FFF;
	}

.Access_txt_02{display:none}
.Access_box_map{ display:none}
/*Tablet*/
@media screen and (min-width: 660px) {
.Access_box{
  	width: 50%;
	height:100%;  
}
.Access_txt{
  	width: 50%;
	height:100%;  
}}
/*PC*/
@media screen and (min-width: 1024px) {
.Access_txt_01{display:none}
.Access_txt_02{display:block}
.Access_box{
  	width: 60%;
	height:50%;
	background-image:url(images/genkan02.jpg);   
}
.Access_txt{
	font-size:15px;
	line-height:30px;
  	width: 40%;
	height:50%  
}
.Access_box_map{
	display:block;
	float:left;
  	width: 100%;  
	height:50%;
	margin:0;
	padding:0;
	}
}
.Access_txt a{
	text-decoration: none;
  	color: #00F;
  	font-weight: bold;
}
.Access_txt a:hover { color: #F00; }
.gray {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
.Access_txt dl {
	margin:20px;
	text-align:left;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}

.Access_txt dl dt {
	padding-bottom:10px;
	margin-bottom:20px;
	font-weight:bold;
	font-size:13px;
	width:30%;
	border-bottom: solid 1px #CCCCCC;
}
.Access_txt dl dd {
	padding-bottom:10px;
	margin-bottom:20px;
	text-align:left;
	font-size:12px;
	width:70%;
    border-bottom: solid 1px #CCCCCC;
}
.View_More {
	cursor: pointer;
    cursor: hand;
	width:250px;
	height:50px;
	line-height:50px;
	text-align:center;
    background-color: #000;
	background:rgba(0,0,0,.4);
	color:#FFF;
	font-size:10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    }
.View_More:hover {
    background-color: #ffc9d7;
    }
.View_More a{
	text-decoration: none;
  	color: #FFF;
  	font-weight: bold;
	}
.View_More a :hover { color: #FFF !important; }

/**/