@charset "UTF-8";


/*---------- アニメ設定 ----------*/


/*========= Loadingアニメ ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1001;
  background:#000;
  text-align:center;
}


#splash_logo_2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    
  }

  .fadeUp_a{
    animation-name: fadeUpAnime2;
    animation-duration:5s;
    animation-fill-mode:forwards;
    animation-delay: 0;
    opacity: 0;
    }



@keyframes fadeUpAnime2{
    from {
      opacity: 0;
    transform: translateY(0px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }









/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

.topp {
    position: relative;
    width: 100%;
    height: 100vh;
    
}
/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  left:50%;
  bottom:8px;
    /*全体の高さ*/
  height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
  position: absolute;
  left:-20px;
  top: -20px;
    /*テキストの形状*/
  color: #fff;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

/*---------- ふわっとするアニメ ----------*/

 .js-animation {
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: all 1s;
  }
  .js-animation.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
  }


/*---------- 共通部分 ----------*/

html {
    font-size: 62.5%;
    font-family:'Noto Serif JP', serif;
    letter-spacing: 0.4rem;
    color: #ffffff;
    background-color: #000;
}


body {
    width: 100%;
    line-height: 2;
    font-size: 1.8rem;
	overflow-x: hidden; 
}
.copyright {
    text-align: center;
}

.adress,
.tel {
    margin: 0;
}
.header_logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 100;
}

ul.slide,
li.item {
    margin: 0;
    padding:0;
    
}
ul.slide li.item img {
    width: 100%;
}

/*---------- introduction ----------*/

#introduction {
    padding: 15% 7% 15%;
    background: url(../images/introduction_background.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
.introduction .pic {
    width: 50%;
    margin-right: 3%;
}
.introduction .pic img {
    width: 90%;
}
.introduction .text {
    padding-top: 26%;
    width: 50%;
}

.introduction {
    display: flex;
    padding-top: 20%;
}
.introduction .text p.text_1 {
  font-family: 'Cinzel', serif;
  font-size: 5vw;
  margin-bottom: 3vh;
  color: #ad9b7b;
}






/*---------- about ----------*/
.about_2 {
    background: url(../images/about_background.jpg);
    background-size: 100%;  
    background-repeat: no-repeat;
    padding-bottom: 7%;
}
.about_title {
    padding-left: 7%;
}
p.about img {
    width: 100%;
}
#about p.text_1 {
  font-family: 'Cinzel', serif;
  line-height: 6rem;
  color: #ad9b7b;
  padding-left: 7%;
  
}
span.text_1_1 {
  font-size: 3vw;
}
span.text_1_2 {
  font-size: 6vw;
}


#about p.text_2 {
    padding: 7% 7% 0 25%;

}

.youtube {
    padding-left: 25%;
}
.youtube {
    position: relative;
    padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 25%;
    width: 65%;
    height: 65%;
  }
/*---------- slider ----------*/
.slider {
    padding-left: 25%;
    margin: 7% 0;
}
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 20px;/*スライド左右の余白調整*/
}





/*---------- scene ----------*/

.scene_1,
.scene_2 {
    display: flex;
    
}
.scene_1 {
    margin-bottom: 10vh;
}
.scene_2{
    flex-direction: row-reverse;
    margin-bottom: 20vh;
}
.scene_1 .pic,
.scene_2 .pic {
    width: 50%;
}
.scene_1 .pic img,
.scene_2 .pic img{
    width: 100%;
}
.scene_1 .text,
.scene_2 .text {
    width: 45%;
    padding: 0 7%;
}
.scene_3 {
    text-align: center;
}
.scene_3 .text_1 {
    text-align: center;
}

#scene .text_1 {
    font-size: 3.6rem;
    color: #ad9b7b;
    line-height: 1.4;
}


p.wave img {
    width: 100%;
}

.location_title {
    font-family: 'Cinzel', serif;
    color: #ad9b7b;
    text-align: center;
    font-size: 6vw;
    margin-bottom: 5vh;
}
.footer {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}
#location {
    padding-top: 15%;
}

.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all  0.7s ease;
  width: 100%;
  margin-top: 5vh;
}

.googlemaps iframe:hover,
.googlemaps object:hover,
.googlemaps embed:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}

.comingsoon {
    padding: 30vh 7% 30vh 50%;
}

a,
a:link,
a:visited {
    text-decoration: none;
    color: #ffffff;
}
a:hover {
    opacity: 0.6;
}

/* TOPに戻るボタン */
#page-top{
	position: fixed;
	bottom: 0;
	right: 0;
	background: #ad9b7b;
	min-width: 50px;
	min-height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	bottom: 2%;
	right: 2%;
}

/* z-index */

#page-top {
    z-index: 1000;
}



@media screen and (max-width: 600px) {
body {
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
}

.topp {
  position: relative;
  width: 100%;
  height: 30vh;
  
}
.header_logo {
    width: 18vw;
}
#introduction {
    padding: 5% 5% 5%;
}
.introduction {
    display: block;
}
.introduction .text p.text_1 {
  font-size: 10vw;
}

.introduction .pic {
    width: 70%;
}
.introduction .text {
    padding-top: 5%;
    width: 100%;
}
.slider {
    padding-left: 7%;
    margin: 7% 0;
}



#about p.text_2 {
    padding: 7% 5% 0 25%;

}

#about p.text_1 {
  line-height: 3rem;
  padding-left: 5%;
}

span.text_1_1 {
  font-size: 5vw;
}
span.text_1_2 {
  font-size: 10vw;
}

.scene_1,
.scene_2 {
    margin-bottom: 5vh;
    flex-direction: column-reverse;
}
#scene .text_1 {
    font-size: 2.2rem;
}
.scene_1 .pic,
.scene_2 .pic {
    width: 100%;
    margin: 0;
}
.scene_1 .text,
.scene_2 .text {
    width: 86%;
}
.scene_2{
    flex-direction: block;
}
.scene_3 {
    padding: 0 5%;
}
.scene_3 .text_1 {
    text-align: center;
}
.location_title {
  font-size: 10vw;
}

.footer {
    margin-left: auto;
    margin-right: auto;
    width: 86%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 7%;
    width: 86%;
    height: 86%;
  }
  .comingsoon {
    padding: 1vh 7% 1vh 7%;
    text-align: center;
}


/*スクロールダウン全体の場所*/
.scrolldown1{
display: none;
}

}