* {
   box-sizing: border-box;
}





@font-face {
    font-family: 'HuiFontP109';
    src: url('font/HuiFontP29.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

body {
   margin: 0;
   padding: 0;
   font-family:"Noto Serif JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size:15px;
   letter-spacing : 0.3em;
   background-color:#fff;
}
header {
   padding: 20px 10% 20px;
    position: fixed;
top: 0;
   width: 100%;
    background-color:#abc7d8;
   display: flex;
   align-items: center;
   z-index: 100000;
  color:#154459;
}



h1 {
   margin: 0; padding: 0;
   font-size: 20px;
}


a {	
   text-decoration: none;
   color: #000;
}


ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}


nav {
   margin: 0 0 0 auto;
}
nav2 {
   margin: 0 0 0 auto;
}

.pc-nav ul {
   list-style: none;
   margin: 0;
  display: flex;
}


.pc-nav li {
   margin: 0 0 0 15px;
   font-size: 17px;
}


.pc-nav a {
  line-height: 30px;
}

.pc-nav a:hover{
   color:#154459;
  transition: 0.5s ;
}
 
.item {
    position: relative;
	display: block;
}
 
.item a {
    display: block;
    text-align: center;
}
 
.child {
    visibility: hidden;
    width: 200px;
    position: absolute;
    top: 30px;
    left: 0px;
	font-size:8px;
}



 
.item:hover .child {
    visibility: visible;
}


.sp-nav {
   display: none;
}

.ig{
display: flex;
  justify-content: center;
  align-items: center;
}


@media screen and (max-width: 640px) {
	
	h1 img{width:80%;}
	
   .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: #000;
      transform: translateY(-50%);
   }
   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #000;
   }
   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #000;
   }
   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
	  font-size: 15px;
	  color: #fff;
	  list-style: none;
   }
   .sp-nav li span {
      font-size: 15px;
      color: #fff;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 10px 0;
	  color: #fff;
   }
   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
   }
   .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;
   }
   
	   
	   
	   
}



	
	
#slide_index{
	padding-left:0%;
	height:1300px;
	padding-top:125px;
	background-color:#abc7d8;}	
	

#slide_index2{
	padding-left:5%;
	padding-right:5%;
	height:700px;
	position: relative;
}	

#img1{
  height: 600px;
  width: 80%;
  object-fit: cover;
  background-color:#abc7d8;
}
.bx-wrapper{
  border:none!important;
  box-shadow: none!important;
  background-color:#abc7d8;
}
.slider_box{
  width: 100%;
}


.bx-viewport .slider li{
  display: block!important;
}




.copy{
  font-size:100%;
position:absolute;
top:1100px;
 left:10%; 
 height:500px;
  color:#154459;
  line-height:200%;
  }
  
  
.copy4{
	
-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  font-size:200%;
position:absolute;
top:190px;
 right:15%; 
 height:400px;
 color:#154459;
  }  
  
  
.copy6{
	
  font-size:100%;
position:absolute;
top:1020px;
 left:40%; 

  color:#fff;
  background-color:#F99;

  padding:10px;
  }  
    
  
 #muskahead {
  background-color:#abc7d8;
  }



p {
  width: 80%;
}



@media screen and (max-width: 640px) {
 
 #img1{
  height: 400px;
  width: 100%;
  object-fit: cover;
  background-color:#abc7d8;
object-position: left top;
}

.copy4{
	
top:90px;
 right:10%;
  }  

.orange {background-color:#fff;
padding:5px;}

.copy{
  font-size:100%;
position:absolute;
top:850px;
 left:10%; 
 height:none;
  color:#154459;
  line-height:200%;
  }

#slide_index{
	height:1100px;
	}	
	
	
.copy6{
	
  font-size:100%;
position:absolute;
top:770px;
 
  padding:10px;
  left:10px;
  width:95%;
  } 
  
  
.copy6 a{
 color:#fff;
  background-color:#F99;
  }   
 
.copy6 a:hover{
  background-color:#ff6a6a;
   color:#000;
  } 
   		   	
}




	
section{
	display: flex;
	padding: 0 15%;
	 width:100%;
}

	
@media (max-width: 600px){

	section{
		padding: 0px;
	}

}


/* ------------------------------
   loopSlider
------------------------------ */
.loopSliderWrap {
	top: 0;
	left: 0;
	height: 250px;
	overflow: hidden;
	position: absolute;
}

.loopSlider {
	margin: 0 auto;
	padding-left:5%;
	padding-right:5%;
	width: 100%;
	height: 250px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.loopSlider ul {
	height: 250px;
	float: left;
	overflow: hidden;
}

.loopSlider ul li {
	width: 275px;
	height: 250px;
	padding-left:25px;
	float: left;
	display: inline;
	overflow: hidden;
}

.loopSlider ul li img{
	width: 100%;
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
.loopSliderWrap:after {
	content: "";
	display: none;
	clear: none;
}



#goto{
	background-color:#f8eae8;
	padding:25px;
	margin-top:50px;
	}

.goto_title
{
font-size:125%;
margin-bottom:20px;	
	}
	
.btn-open2 {
	
  background-color: #f8eae8;
 
  color: #424242;
  text-decoration: none;
  border: 1px solid #424242;
  padding:5px 15px;
  z-index: 100000000000;
}

.btn-open2:hover{
  color: #fff;
  background-color: #ff8484;
   border: 1px solid #fff;
  transition: 0.5s ;
  z-index: 100000000000;
}


@media (max-width: 600px){

	
.btn-open2 {
  z-index: 100000000000000000000000;
}

}


/*--------------------
 	about index
---------------------*/

.about_index{
position:relative;
height:1050px;

}


.aboutpic2{	 position:absolute;
top:220px;
 left:0px; 
z-index:-10;
	}

.about_message{
	 font-size:100%;
	 position:absolute;
	 line-height:200%;
top:220px;
 left:500px; 
 width:400px;
 color:#563b15;
	}


.copy5{
	
-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  }  


	
	.abouttitle3{
	 position:absolute;
top:850px;
 left:150px; 
 width:600px;

	}
	
	.abouttitle4{
	 font-size:200%;
	  line-height:0%;
	}
	.abouttitle5{
	 font-size:300%;
	}
	
	
	
	
.aboutword2{
	 position:absolute;
top:230px;
 left:170px; 
 width:350px;
	}
	
	.aboutword3{
	 position:absolute;
top:980px;
 left:170px; 
 width:780px;
	}
	

.sea2{width:100%;
background-image:url(img/about3.png);
height:800px;
object-position: left bottom;
	object-fit:cover;
	 position: relative;
    text-align: center;
}
.sea3{width:100%;
background-image:url(img/about4.png);
height:800px;
object-position: right bottom;
	object-fit:cover;
	
}


.sea2inner{
    left: 0%;
    position: absolute;
    top: 40%;
}

.sea2inner img{
    width:30%;
}


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

.sea2inner img{
    width:50%;
} 
 
.about_index{
padding:50px 5%;
width:100%;
height:auto;
} 

.aboutpic2{	 position:absolute;
top:50px;
 left:10%; 

	}
	
.aboutpic2 img{width:90%;
}
	   	
		
.about_message{
	margin-top:250px;
	position:static;
 color:#563b15;
 line-height:150%;
margin-left:10%;
 width:80%;
 padding:5%;
 height:auto;
 background:rgba(255,255,255,0.5);
 z-index:100;
	}	
		
	
.sea2{width:100%;
background-image:url(img/about3.png);
height:400px;
object-position: left bottom;
	object-fit:cover;
}

.sea3{width:100%;
background-image:url(img/about4.png);
height:400px;
background-position: left bottom;
}

	
}





/*--------------------
 	recruit
---------------------*/

.recruit_index{
position:relative;
height:500px;

}

.recruit_index_word{
	 position:absolute;
top:0px;
 left:170px; 
 width:780px;
 height:350px;
 background-image: url(img/recruit_back.png);    /* 背景画像指定 */
    background-size:cover;                /* 画像のサイズ指定 */
vertical-align:bottom;
	}
	
.contact_index{
position:relative;
height:900px;

}	
.contact_word{
	 position:absolute;
top:0px;
 left:170px; 
 width:780px;
	}	

.recruit_index_word_inner{
	width:780px;
 height:350px;
 position:relative;
	}
	
.recruit_index_word_inner2{
	 position:absolute;
	 padding:20px;
top:0px;
 left:0px;
	}


.original-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #333333;
  font-size: 18px;
  border-radius: 5px;
  width: 250px;
  height: 30px;
  border: 1px solid #333333;
  position: relative;
  transition: 0.3s;
  background-color: #FFFFFF00;
  margin-top:10px;
}

.original-button::before, .original-button::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  transform-origin: 100% 50%;
  height: 1px;
  width: 11px;
  background-color: #333;
  border-radius: 2px;
  will-change: transform;
  transition: .3s;
}

.original-button::before {
  transform: translateY(-50%) rotate(30deg);
}

.original-button::after {
  transform: translateY(-50%) rotate(-30deg);
}

.original-button:hover::before {
  transform: translate(5px, -50%) rotate(30deg);
}

.original-button:hover::after {
  transform: translate(5px, -50%) rotate(-30deg);
}

/*--------------------
 	style
---------------------*/
 .style{
position:relative;
}

.copy3{
	
-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  font-size:250%;
position:absolute;
top:0;
 left:0; 
 height:800px;
  }


.style_block{
	margin-left:150px;
	margin-top:50px;
	position:relative;}
	
	
.word3{
position:absolute;
top:-70px;
 left:0%;	
 z-index: 5;
	
}	


.wave3{
position:absolute;
top:800px;
 left:-20%;	
 z-index: -2;
	
}


.wave4{
position:absolute;
top:350px;
 left:50%;	
 z-index: -2;
	
}
	

.block-grid {
	width: auto;
  overflow: hidden;
  list-style: none;
  margin: 0 -1% 30px;
	padding: 0;
	line-height:200%;
	color:#563b15;
}
.block-grid li {
	float: left;
  margin: 0 2% 30px;
  padding: 0;
}

.style_pic{
	margin-top:35px;
}


.block-grid li img{
	width:100%;
	margin-bottom:10px;
}


.block-grid a {
	text-decoration: none;

}
@media (min-width: 600px){
	.block-grid-1-2-3 li {
		width: 48%;
	}
	.block-grid-1-2-3 li:nth-child(2n+1) {
		clear: both;
	}
}
@media (min-width: 800px){
	.block-grid-1-2-3 li {
		width: 46%;
	}
	.block-grid-1-2-3 li:nth-child(2n+1) {
		clear: both;
	}
}
	
@media screen and (max-width: 640px) {
	.block-grid-1-2-3 li {
		width: 90%;
		padding-left:5%;
	}
	
	.block-grid-1-2-3 li img{
		height: 200px;
		object-fit:cover;
	}
	
	.room7 img{object-position: left bottom;
	object-fit:cover;}
	
	.block-grid {
	width: auto;
  overflow: hidden;
  list-style: none;
  margin:0px;
	padding: 0;
	line-height:200%;
	color:#563b15;
}
	
}



/*--------------------
 	room
---------------------*/
 .room{
padding-top:150px;
position:relative;
width:1000px;
color:#563b15;
margin:0 auto;
}

.room_word{
	line-height:200%;
	padding: 50px 5%;
	}


.head-border {
    display: flex;
    align-items: center;
	font-size:150%;
}
 
.head-border:before,
.head-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}
 
.head-border:before {
    margin-right: 1rem;
}
 
.head-border:after {
    margin-left: 1rem;
}

.block-grid img{margin-top:25px;}


.stay{
	
	margin-top:150px;}

 .stayindex{
padding-top:150px;
position:relative;
width:100%;

}

.stay_word{
	line-height:200%;
	padding: 50px 5%;
	text-align:center;
	}
	
.stay_map{
	float:left;
	width:30%;
}
.stay_map2{
	float:left;
	padding-left:5%;
	width:65%;
	margin-top:30px;
}

.stay_map3{
	margin:0 30px;
	width:90%;
	padding-left:10%;
}

.access_map{
	float:left;
	width:50%;
	padding-left:10%;
	margin-top:50px;
	margin-bottom:150px;
}
.access_map2{
	float:left;
	padding-left:5%;
	width:50%;
	margin-top:80px;
}

.stay_title
{margin-top:50px;
font-size:125%;
margin-bottom:20px;	
	}

.stay_title2
{margin-top:50px;
font-size:125%;
margin-bottom:10px;	
	}
.stay_word2{

	padding-left: 25px;

	}		
	




.info {
  -webkit-overflow-scrolling: touch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  display: -webkit-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 900px;
  height: 300px;
  margin: 0 auto;
  overflow-y: scroll;
  font-size:90%;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
	border-radius: 50px;
}


.stay_word3{
float: left;
width:50%;
text-align:center;

	}
	.stay_word4{
float: left;
width:50%;
text-align:center;
border-left:1px #000 solid;}



@media screen and (max-width: 640px) {
	
	 .stayindex{
padding-top:50px;

}
	
	 .room{
padding:5% 5%;}

.room_word{
	line-height:200%;
	padding-left: 5%;
	padding-top:50px;
	padding-bottom:0px;
	
	}
	
	
	.stay_map{
	float: none;
	padding-left: 10%;
	width:90%
}
.stay_map2{
	float: none;
	padding-left: 10%;
	width:90%;
	margin-top:20px;
}

.stay_word2{

	padding-left: 0px;

	}
	
	
	
.stay_word3{
float: none;
width:100%;
text-align:center;

	}
	.stay_word4{
float: none;
width:100%;
text-align:center;
border-left:0px #000 solid;}
	
	
	.access_map{
	float: none;
	padding-left: 0%;
	width:100%;
	margin-bottom:0px;
}
.access_map2{
	float: none;
	padding-left: 5%;
	width:100%;
	margin-top:0px;
}	

.access_word{font-size:80%;}
	
}



}


@media (min-width:768px) {
  .info {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap
  }
}

.info dd,
.info dt {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: .5em;
  padding-left: .5em
}

.info dt {
  font-style: normal;
  font-weight: initial
}

@media (min-width:768px) {
  .info dt {
    width: 12.5em;
    margin-bottom: .5em;
    border-bottom: 1px dotted #343a40
  }
}

.info dt:first-of-type {
  padding-top: .5em;
  border-top: 1px dotted #343a40
}

.info dt time {
  margin-right: .5em
}

.info dt span {
  box-sizing: border-box;
  display: inline-block;
  width: 7em;
  margin-right: .5em;
  padding: 0 .5em;
  background-color: #009688;
  color: #fff;
  font-size: .8em;
  line-height: 1.75;
  text-align: center
}

.info time {
  color: #adb5bd
}

.info dd {
  margin-left: 0;
  margin-bottom: .5em;
  border-bottom: 1px dotted #343a40
}

@media (min-width:768px) {
  .info dd {
    width: calc(100% - 12.5em)
  }
  .info dd:first-of-type {
    padding-top: .5em;
    border-top: 1px dotted #343a40
  }
}

.info dd:nth-of-type(-n+3) {
  position: relative
}










	
	
.accordion {
margin: 0 auto;
width: 100%;
}
.toggle2 {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
padding: 0.4em;
display: block;
color: #333;
font-size:100%;
border-bottom:1px solid #000;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}






.content {
max-height: 0;
overflow: hidden;
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}
.toggle2:checked + .title + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle2:checked + .title::before {
transform: rotate(90deg) !important;
}	
	
	table.table01 {
	width:100%;
	border-right:#000 solid 1px;
	border-collapse: collapse;
}
table.table01 thead th {
	
border-left:#000 solid 1px;
	padding:10px 15px;
	border-right:#000 solid 1px;
	border-bottom:#000 solid 1px;
	border-top:#000 solid 1px;
}
table.table01 thead th:last-child {
	border-right:#000 solid 1px;
}
table.table01 tbody th {
	font-weight:normal;
	padding:10px 15px;
	border-bottom:#000 solid 1px;
	border-left:#000 solid 1px;
	vertical-align:top;
	border-top:#000 solid 1px;
}
table.table01 tbody tr:last-child th {
	border-bottom:#000 solid 1px;
	border-left:#000 solid 1px;
}
table.table01 tbody td {
	
	padding:10px 15px;
	border-left:#000 solid 1px;
	border-bottom:#000 solid 1px;
	vertical-align:top;
}


.original-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  border-radius: 0px;
  width: 200px;
  height: 40px;
  font-weight: bold;
  border: 2px solid #333333;
  transition: 0.3s;
  box-shadow: 5px 5px 0px 0px rgba(51, 51, 51, 1);
  background-color: #5D5221;
}

.original-button:hover {
  box-shadow: 0 0 #333;
  color: #fff;
  background-color: #333;
}








@media screen and (max-width: 640px) {
table.table01 thead {
	display:none;
	
}
table.table01 tbody th {
	display:block;
	background-color:#acc7d7;
	color:#fff;
}
table.table01 tbody td {
	display:block;

	font-weight:bold;
}
table.table01 tbody td::before {
	content: attr(label);
	float: left;
	clear:both;
	
}
table.table01 tbody td p {
	padding-left:6em;
}
}	
	

	
	
/*--------------------
 	footer
---------------------*/
footer{
    width: 100%;
   background-color:#abc7d8;
    text-align: center;
	padding:20px;
   
}


#footer_nav {
	padding-top:20px;
	padding-bottom:29px;
  list-style-type: none;
	padding-left: 0;
	text-align: center;
	font-size:120%;
}
 
#footer_nav li {
 display: inline;
   margin: 0 0 0 15px;
}
 
#footer_nav li a:hover {
  color: #e73828;
  transition: 0.5s ;
}




.copyright{
	margin-top:10px;
	margin-bottom:30px;
	font-size:8px;
	text-align:right;}


.thanks{background-color:#fff;
padding:20%;
width:100%;
text-align:center;}

	
@keyframes scroll{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-400px * 3));
  }
}


.slider {
  width: 100%;
  background: white;
  height: 279px;
  margin: auto;
  overflow:hidden;
  position: relative;
}
.slider-wrap {
    animation: scroll 30s linear infinite;
    display: flex;
    width: calc(420px * 6);
    height:100%;
  }
.slide-image{
  width:360px;
  height:100%;
  object-fit:cover;
}
.slide{
  width:380px;
  height:100%;
  text-align:center;
}


/*--------------------
 	access
---------------------*/

.access{
background-size:cover;
width: 1100px;
}




.access_title {
float: left;
width:30%;
	}
	
.access_title p{
float: left;
line-height:200%;
padding-left:20px;
	}	
	

@media screen and (max-width: 640px) {
.access{
background-size:cover;
width: 100%;
}

.access_title {
float: none;
margin-top:50px;
width:80%;
	}
	
.access_title p{
float: none;
 font-size:13px;
line-height:200%;
padding-left:20px;
	}		
	
#footer_nav{
      display: none;
   }

}	
	
/*--------------------
 	play
---------------------*/

.play{
background-size:cover;
width: 100%;
margin-top:-100px;
}

.play_bg{background-color:#f5d3ce;
width: 100%;
margin-top:-10px;
}

.play_inner{
	margin:0 auto;
	background-size:cover;
width: 1100px;
background-color:#f5d3ce;
}


.play_title {
float: left;
width:30%;
background-color:#f5d3ce;
	}
	
	
.play_inner2{
margin:0 auto;
width: 700px;	
line-height:200%;
padding-top:50px;
padding-bottom:100px;
	
	
	}	
	
.play_title2 {
float: left;
width:30%;
	}
.play_word {
float: left;
width:65%;
padding-left:5%;
	}		
	

@media screen and (max-width: 640px) {
.play{
background-size:cover;
width: 100%;
margin-top:100px;
}

.play_inner{
	margin:0 auto;
	background-size:cover;
width: 100%;
background-color:#f5d3ce;
}

.play_inner2{
margin:0 auto;
width: 90%;	
line-height:200%;
padding-top:50px;
padding-bottom:0px;
font-size:13px;
	}
	
	
.play_title2 {
float: none;
width:100%;
	}
.play_word {
float: none;
width:100%;
	}		
	

}	
		

.cb{
  /* floatを解除 */
  clear: both;
}

.grayscale_100{
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}
		
		


 #svg-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        overflow: hidden;
    }



.btn-open {
	margin:40px auto;
  display: inline-block;

  text-align: center;
  background-color: #746643;
  font-size: 150%;
  line-height: 32px;
  color: #FFF;
  text-decoration: none;
  border: 2px solid #746643;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding:10px 30px;
}
.btn-open:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background : #FFF;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(30deg);
  transition: .2s;
  z-index: -1;
}
.btn-open:hover{
  color: #746643;
}
.btn-open:hover:after{
  height: 240%;
  opacity: 1;
}
.btn-open:active:after{
  height: 340%;
  opacity: 10000000;
}



.insta{margin-top:50px;}



#footer_nav {
  list-style-type: none;
	padding-left: 0;
	text-align: center;
}
 
#footer_nav li {
 display: inline;
   margin: 0 0 0 15px;
   font-size: 14px;
}
 
#footer_nav li a:hover {
  color: #e73828;
  transition: 0.5s ;
}


.fadeIn_left {
  opacity: 0;
  transform: translate(0, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_right {
  opacity: 0;
  transform: translate(30%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_up2 {
  opacity: 0;
  transform: translate(0, 30%);
  transition: 2s;
}
.fadeIn_up2.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/*===========
.imgBox
===========*/




/*--------------------
 	stay2
---------------------*/





.room_title {
font-family: 'HuiFontP109', sans-serif;	
	font-size:150%;
	margin-bottom:20px;
	margin-top:30px;
	line-height: 120%;
	}
	
	
.room_title2 {
font-family: 'HuiFontP109', sans-serif;	
	font-size:150%;
	margin-bottom:20px;
	margin-top:80px;
	line-height: 120%;
	}	
	


	
@media screen and (max-width: 640px) {
.room{
background-size:cover;
width: 100%;
}

.room_top {
float: none;
margin-top:100px;
width:80%;
	}


	
.room_title {
font-size:120%;
	margin:2%;
	
	}
	
	
.room_title2 {
	margin-top:8%;
margin-left:2%;
font-size:120%;
	}	
	
	
	
	
	
	
	
}






.cb{
  /* floatを解除 */
  clear: both;
}

.slider2 {
  width: 100%;
  background: white;
  height: 400px;
  margin: auto;
  overflow:hidden;
  position: relative;
}
.slider2-wrap {
    animation: scroll 30s linear infinite;
    display: flex;
    width: calc(707px * 6);
    height:100%;
  }
.slide2-image{
  width:687px;
  height:100%;
  object-fit:cover;
}
.slide2{
  width:707px;
  height:100%;
  text-align:center;
}


@media screen and (max-width: 640px) {
.slider2 {
  width: 100%;
  background: white;
  height: 230px;
  margin: auto;
  overflow:hidden;
  position: relative;
}
.slider2-wrap {
    animation: scroll 30s linear infinite;
    display: flex;
    width: calc(420px * 6);
    height:100%;
  }
.slide2-image{
  width:400px;
  height:100%;
  object-fit:cover;
}
.slide2{
  width:420px;
  height:100%;
  text-align:center;
}}



.amenities{
	width:90%;
	margin:70px auto;
	border-radius: 10px;
	background-color: #f5d3ce;
	padding:2%;
	
	
	}

.amenities_title{
		font-size:150%;
		margin-bottom:20px;
	
	}
	
	
.amenities_word{
	width:70%;
	margin:10px auto;
	background-color: #ea5847;
	padding:1%;
	color:#fff;
	}	
	
	
.amenities_word2{
	width:55%;
	margin:10px auto;
	padding:1%;
	}		
	
.ame_block{
	width:31%;
	margin:1%;
	float:left;
	
	}	


.ame_box{
	display: -webkit-box; /*Android4.3*/
  display: -moz-box;    /*Firefox21*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*PC-Safari,iOS8.4*/
  display: flex;
	
}
	
.ame2_block{
	width:31%;
	margin:1%;
	background-color:#fff;
	padding:1%;
	text-align:center;
	}	
		

.ame_pic{width:30%;float:left;}	
.ame_word{
	width:60%;
	margin-top:20px;
	margin-left:10%;
	float:left;
	}	
.ame_word2{
	font-size:70%;
	
	}
	
	
.ame2_pic{width:15%;float:left;}	
.ame2_word{
	width:75%;
	margin-top:20px;
	margin-left:10%;
	float:left;
	}		
	
	
	
.onsen_title {
font-family: 'HuiFontP109', sans-serif;	
	font-size:150%;
margin:20px auto;
width:65%;
text-align:center;	

	}

.onsen_title img{vertical-align: middle;
padding-left:5px;
padding-right:5px;}	

.onsen_box{
	display: -webkit-box; /*Android4.3*/
  display: -moz-box;    /*Firefox21*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*PC-Safari,iOS8.4*/
  display: flex;
	
}

.onsen_word{width:24%;
	margin-top:1%;
	font-size:70%;
	}	

.onsen_word img{width:100%;
	}	
	
.onsen_word p{margin-top:40px;;
	}		
	


@media screen and (max-width: 640px) {
.amenities{
	margin:20px auto;
	}

.amenities_title{
		font-size:130%;
	}

.ame_block{
	width:33%;
	margin:2% auto;
	float:left;
	
	}
	
.ame_pic{width:100%;float:none;margin:0 auto;
text-align:center;}
.ame_pic img{width:80%;
}	


.ame_word{
	width:100%;
	margin:0px;
	float:none;
	font-size:75%;
	}	
	

.amenities_word{
	width:97%;
	font-size:90%;
	padding:4%;
	}	
	
.amenities_word2{
	width:100%;
	}	
	
.ame2_pic{width:25%;}	
.ame2_pic img{width:100%;
}	
	
.ame2_word{
	margin-top:5px;
	font-size:75%;
	width:60%
	}	
	
.onsen_title {
width:100%;

	}	

.onsen_word{width:48%;
	margin-top:1%;
	font-size:80%;
	float:left;
	}	
.ame2_block{
	font-size:80%;
	}		
		
		
.onsen_title img{vertical-align: middle;
padding-left:5px;
padding-right:5px;
width:15%;}	

.onsen_title {
font-family: 'HuiFontP109', sans-serif;	
	font-size:130%;
margin:20px auto;
width:100%;
text-align:center;	

	}	


.onsen_box{
  display: block;
	
}


.onsen_word{width:48%;
	margin-top:1%;
	font-size:70%;
	float:left;
	}	

.onsen_word img{width:100%;
margin-bottom:10px;
	}	
	
.onsen_word p{margin-top:10px;
	}			
		
}





.lounge_title {
margin:20px auto;
width:65%;


	}
	
.lounge_box {
	display: flex;	
flex-wrap: wrap;
}	
	
.lounge_word{width:20%;
	margin-top:1%;
	float:left;
	text-align:center;	}

.lounge_word2{width:58%;
	float:left;font-size:80%;}	

.lounge_word2 p{font-family: 'HuiFontP109', sans-serif;	
	font-size:150%;}	
	
.lounge_word3{width:23%;
	float:left;
	padding:1%;
	text-align:center;
	margin:1%;
	background-color:#f5d3ce;}	
	
	
@media screen and (max-width: 640px) {


.lounge_title {
margin:20px auto;
width:90%;


	}
	
.lounge_word{width:20%;
	margin-top:1%;
	float:left;
	text-align:center;	}
	
.lounge_word img{width:100%;}	

.lounge_word2{width:54%;
	float:left;font-size:80%;
	margin-left:2%;
	margin-right:2%;
	}	
	
.lounge_word2 p{
	text-align:center;
	}	
	
	
.lounge_word3{font-size:80%;}		
	
}
	
	
.price_title{margin-top:50px;
margin-bottom:20px;}
	
.price_word{
	margin:20px auto;
	width:60%;
	font-size:80%;}
	
		
	

	
	
 .reserve_title{margin-top:30px;
margin-bottom:20px;} 
.reserve_word{text-align:center;
color:#ea5847;

} 

.reserve_word2{width:70%;
margin:10px auto;
} 

.reserve_word3{width:50%;
float:left;
} 

.reserve_word3 img{vertical-align: middle;
padding-left:5px;
padding-right:20px;}	

.reserve_word4{text-align:center;
margin-top:15px;
margin-bottom:10px;
} 
			

@media screen and (max-width: 640px) {
.reserve_word{
padding-left:5%;
padding-right:5%;
text-align:left;
} 

.reserve_word2{width:100%;
text-align:center;
} 

.reserve_word3{width:100%;

} 

.reserve_word3 img{
padding-left:0px;
padding-right:5px;}



}

.bg .bg-wrap {
  position: relative;
  display: inline-block;
  margin-top: 5px;
}
.bg.is-animated .bg-wrap::before {
  animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}
.bg .bg-wrap .inn {
  color: #fff;
  display: inline-block;
  font-size: 36px;

  padding: 5px 15px;
  position: relative;
  z-index: 1;
}
 
@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}

.popup_wrap input {
  display: none;
}
.popup_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #37beb03d;
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}
.popup_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.popup_content {
  position: relative;
  align-self: center;
  width: 100%;
  padding-top:50px;
  max-width: 800px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.4em;
  transition: 0.5s;
  border-radius: 12px;
  box-shadow: 0 0 5px rgba(94, 94, 94, 0.7);
}
.popup_content p{
   
    padding-left:5%;
	 width: 95%;
	
}
.close_btn {
  font-size: 30px;
  cursor: pointer;
  color:#37beb0;
}
.popup_wrap input:checked ~ .popup_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.open_btn {
    color: #000;
    border-radius: 3px;
    cursor: pointer;
    transition: .3s ease;
    border:1px solid #000;
    padding:5px 15px;
	background:#fff;
}
.open_btn:hover{
    background:#37beb0;
    color:#fff;
    transition: .3s ease;
}

img.owabi{width:25%;}

@media screen and (max-width: 640px) {
	img.owabi{width:70%;}
	.popup_owabi{
   
    height:400px;
	
}
	
	}