* {
   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:#fff;
   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: 15px;
}


.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: 250px;
    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:30%;}
	
   .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-right:0%;
	
	padding-top:125px;
	background-color:#fff;}	
	



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


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







#slide_index .wave img{
	width:250px;
	position:absolute;
top:620px;
 left:140px;
z-index:10;
}


  
  
.copy{
	
-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  font-size:200%;
position:absolute;
top:200px;
 left:15%; 
 height:500px;
  }  
  
.copy2{
	
-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  font-size:150%;
position:absolute;
top:200px;
 left:19%; 
 height:500px;
  }  

  
    
  
 #muskahead {

  }



p {
  width: 80%;
}



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


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

.copy{	
-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  font-size:150%;
	 display: inline-block;
position:absolute;
top:150px;
 left:20px;
	background:#fff;
	height: auto;
	padding:5px;
	}  
	
	
.copy2{
	
-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  font-size:120%;
	 display: inline-block;
position:absolute;
top:150px;
 left:60px;
	background:#fff;
	height: auto;
	padding:5px;
  }  	

	
	
	
#slide_index{
	height:600px;
	}	
	

	


#slide_index .wave img{
	
	position:absolute;
top:480px;
 left:150px;
z-index:10;
}
	
	
	
}



	


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

	
@media (max-width: 600px){

	section{
		padding: 0px;
	}

}

.cb{
  /* float繧定ｧ｣髯､ */
  clear: both;
}


.cb2{
  /* float繧定ｧ｣髯､ */
  clear: both;
	height:100px;
}

.cb3{
  /* float繧定ｧ｣髯､ */
  clear: both;
	height:50px;
}
	

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

.about{
	margin-top:100px;
position:relative;
width: 100%;
  background-color: #f7f7f7;
  background-image: radial-gradient(circle, #e6e6e6 2.5px, transparent 2.5px);
  background-position: 0 0;
  background-size: 15px 15px;
	height:450px;
	
}

.about_inner{
	
	padding:5%;	
}



.about_title{
	font-size:130%;
background:linear-gradient(transparent 70%, #94D6F2 0%);

}


.about_message{
	 font-size:100%;
	 position:absolute;
	 line-height:200%;
top:120px;
 left:8%; 
 width:500px;
	}





.aboutpic{
	position:absolute;
top:100px;
 left:620px;
z-index:10;
	}

.aboutpic img{
	width:450px;
	}

.about .tori img{
	width:100px;
	position:absolute;
top:5px;
 left:450px;
z-index:10;
}

.about .yama img{
	width:300px;
	position:absolute;
top:350px;
 left:320px;
z-index:10;
}






@media screen and (max-width: 640px) {
	
	
	
.about{
background-size:cover;
width: 100%;
position:relative;
margin-top:100px;
	height:auto;
}	


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

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

	}
	
.aboutpic{
	position:static;
	margin:20px auto;
	}
	   	
	.aboutpic img{
	width:100%;
margin:5px auto;	
}
		
.about_message{
	margin-top:50px;
	position:static;
 color:#563b15;
 line-height:150%;
 width:100%;
 padding:5%;
 height:auto;
 background:rgba(255,255,255,0.5);
 z-index:100;
	}	
		

.about .tori img{
	width:100px;
	position:absolute;
top:300px;
 left:320px;
z-index:10;
}

.about .yama img{
	width:250px;
	position:absolute;
top:650px;
 left:150px;
z-index:10;
}	
	
	
.about_title{
	font-size:120%;

}
	
}


/*--------------------
 	about2
---------------------*/

.about2{
	position:relative;
margin-top:150px;
	text-align: left;
	
}


.about2_inner{
	padding-left:150px;
	
	
}	


.about2_pic{
	float:left;
	width:50%;
}
.about2_word{
	float:left;
	padding-left:5%;
	width:45%;
	margin-top:30px;
}

.about2_title{
	font-size:130%;

}

.about2_word2{
	margin-top:30px;
	width:100%;
	line-height:150%;
}


.about2_pic img{
      border-radius: 30px;
    }

.copy3{
	
-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  font-size:200%;
position:absolute;
top:-50px;
 left:25px; 
	display: inline-block;
  padding: 15px;
  background:#DEF4FC;
	
  }  


@media screen and (max-width: 640px) {
	.copy3{
	
-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  font-size:150%;
position:absolute;
top:0;
 left:20px; 
  }

.about2_pic{
	float:left;
	width:95%;
}	
	
.about2_word{
	float:left;
	padding-left:5%;
	width:95%;
	margin-top:30px;
}
	
.about2_inner{
	padding-left:100px;
	
	
}	
	
.cb2{
  /* float繧定ｧ｣髯､ */
  clear: both;
	height:50px;
}	
	
	
}




/*--------------------
 	room
---------------------*/

.room{
width:100%;
	
}


.room_inner{
width:90%;
	margin-left:5%;
	
}

.room_slide{
width:100%;
	
	
}

.room_text{
	margin-top:25px;
font-size:90%;	
	
}

.room_text2{
	margin-top:50px;
font-size:90%;	
	
}


.room_title{
	font-size:130%;
background:linear-gradient(transparent 70%, #94D6F2 0%);

}

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


.room_col2{
	float:left;
	width:65%;
	padding-right:5%;
}


.room_col3{
	float:left;
	width:30%;
}



.head-border {
    display: flex;
    align-items: center;
	font-size:130%;
}
 
.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;
}



@media screen and (max-width: 640px) {
	
.room_col{
	float:none;
	width:100%;
}	
	
}


/*--------------------
 	price
---------------------*/

.price{
width:100%;
padding-top:100px;
}

.price_text{
	margin-top:10px;
	margin-left:10px;
font-size:80%;	
	
}



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;
}


@media screen and (max-width: 640px) {
table.table01 th,
    table.table01 td{
        display: block;
        text-align: left;
}
	
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;
}
}



.room_title2{
background:linear-gradient(transparent 70%, #94D6F2 0%);
psdding-bottom:20px;
}


.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;
}



/*--------------------
 	flow
---------------------*/

.flow{
width:100%;
padding-top:100px;
}





.balloon-001 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 100%;
    margin-bottom: 40px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #f2f2f2;
    color: #333333;
}

.balloon-001::before {
    position: absolute;
    bottom: -15px;
    width: 30px;
    height: 15px;
    background-color: #f2f2f2;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}



.balloon-002 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 100%;
    margin-bottom: 40px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #f2f2f2;
    color: #333333;
}










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


#footer_nav {
	padding-top:20px;
	padding-bottom:29px;
  list-style-type: none;
	padding-left: 0;
	text-align: center;
	
}
 
#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;}