* { 
  margin: 0px; 
  padding: 0px; 
}

html {
  top: 0;
  width: 100%;
  height: auto;
  font-size: 16px;
}

body{
  margin: 0;
  color: #F9F9F9;
}

img{
	width: 100%;
}

li {
	list-style: none;
}

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

.line {
	display:none;
}

main {
	overflow: hidden;
	background-color: #31322D;
}

.call a {
	color: black;
}

.telephone a {
	color: #fff;
}

/*ハンバーガーメニュー*/

#navi {
	width: 80%;
	position: fixed;
	padding: 50px;
	transition: all 0.5s;
	z-index: 20;
	opacity: 0;
	text-align: center;
	margin: 0 auto;
	font-family: 'Shippori Mincho', serif;
}

.nav-menu {
	animation: fadeIn 3s linear;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.moon {
	animation: fadeIn 3s linear;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.kumomi {
	display: none;
}

.page-title img {
	display: none;
}

.pankuzu {
	display:none;
}

.kannai,
.dinner {
	margin-bottom: 30px;
	display: block;
	position : relative;
}

.kannai:before,
.dinner:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -12.9px;
	display: inline-block;
	width: 50px; 
	height: 0.5px; 
	transform: translate(-50%);
	background-color: #fff;
  }





.open #navi {
	top: 0;
	opacity: 1;
}

#mask {
	display: none;
	transition: all 1.5s;
  }

  .open #mask {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .8;
	z-index: 10;
	cursor: pointer;
  }


.toggle_btn {
	display: block;
	position: fixed;
	top: 15px;
	right: 15px;
	width: 50px;
	height: 55px;
	border-radius: 5px;
	transition: all .5s;
	cursor: pointer;
	z-index: 20;
    border: 1px solid #4a4a48;
}

.toggle_btn span {
	display: block;
	position: absolute;
	width: 30px;
	height: 2px;
	background-color: #4a4a48;
	border-radius: 4px;
	transition: all .5s;
	left: 10px;
}

.toggle_btn span:nth-child(1) {
	top: 16px;
	
}

.toggle_btn span:nth-child(2) {
	top: 26px;
}

.toggle_btn span:nth-child(3) {
	top: 36px;
}



.open .toggle_btn span:nth-child(1) {
	top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.open .toggle_btn span:nth-child(2) {
	opacity: 0;
}

.open .toggle_btn span:nth-child(3) {
	top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.pc-image {
	display: none;
}

.content {
	position: relative;
}

.smart .moon{
	position: absolute;
	width: 70%;
	height: auto;
	left: 25vw;
	top: 10vw;
}



.top-room {
	display: none;
}

.content .logo {
	width: 15%;
	height: auto;
    position: absolute;
	margin: 30% 44%;
	
}

.c-copy {
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
	font-family: 'Shippori Mincho', serif;
}

.sentence,
.onsen2,
.intro {
	margin: 0;
	padding: 2.5vw;
	font-family: 'Shippori Mincho', serif;
	font-size: 3vw;
}

.onsen2 {
	margin: 4vw;
	border: solid 1px;
}

.senshitsu {
	font-size : 3.5vw;
}

.kinds {
	font-weight: bold;
}

.explanation {
	font-size: 3vw;
	margin-bottom: 20px;
}

.menu img {
	vertical-align: bottom;
}

.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.okimono {
	display: none;
}

#footer{
	padding-top: 30px;
	background-color: #31322D;
}



.address {
	font-size: 0.7rem;
	margin-left: 1.8vw;
	font-family: 'Shippori Mincho', serif;
}

.footer-nav {
     display: none;
}

.logo {
	margin: 2rem;
}

.logo img {
	width: 300px;
	height: auto;
}

.pc-tel,
.copy {
	display: none;
}





/*館内*/
.facility p {
	width: 100%;
	padding-top: 50px;
	padding-left: 20px;
	background-color: #161513;
	font-size: 6vw;
	font-family: 'Shippori Mincho', serif;
	letter-spacing: 1vw;;
}

.facility img {
	vertical-align: top;
}


.guest-room {
	background-color: #31322D;
	margin-top: 4vw;
}

.title {
	padding-top: 20px;
	padding-left: 5px;
	margin-bottom: 1rem;
	text-align: left;
}

.title img{ 
	width: 30vw;
}

.image {
	margin: 0 2rem 2rem 2rem;
}

.onsen2 {
	font-size: 1.5vw;
}

.senshitsu {
	font-size : 1vw;
}

.kinds {
	font-weight: bold;
}

.efficacy {
	font-size: 1vw;
}

.note {
	font-size: .5rem;
	text-align: right;
}

.heading {
	margin: 1vw 7vw 0 7vw ;
	text-align: left;
	font-size: 3vw;
	width:100vw;
	display: block;
	font-family: 'Shippori Mincho', serif;
}

.amenity {
	border: 1px solid #fff;
	width: 85vw;
	margin: 1.5rem auto;
	font-size: 3.5vw;
	font-family: 'Shippori Mincho', serif
}

.amenity p {
	padding: 1vw;
}

goods {
	padding-left: 2vw;
	font-size: 3vw;
}

goods br {
	display: none;
}

.attention {
	font-size: 0.7rem;
	margin: 0 2.5rem;
	font-family: 'Shippori Mincho', serif
}



.tel img {
	display: block;
}

/* お料理 */
.normal {
	font-size: 1.1rem;
	font-family: 'Shippori Mincho', serif;
}

.normal p {
	padding-left: 0.8rem;
}

.note {
	font-family: 'Shippori Mincho', serif;
}

.title img {
	margin-bottom: 0;
} 

/* 料金表 */
table {
	border-collapse: collapse;
	margin: 1.8vw auto;
	padding: 0;
	width: 87%;
	height: auto;
	table-layout: fixed;
  }

  .base {
	  background-color: black;
  }
  
  table tr {
	margin-left: 1rem;
  }


  tbody th {
	  text-align: left;
	  font-size: .9rem;
	  width: 220px;
  }

 

  .price{
	 text-align: right;
	 margin-bottom: 10vw;
	 
  }

  .caution {
	  font-size: .8rem;
	  text-align: left;
	  margin:0 1.5rem;
  }

  .kids {
	  font-size: 0.9rem;
	  text-align: left;
  }

  .course {
	width: 250px;
	margin-bottom: 10vw;
	margin-left: 3.2vw;
}

  /* アクセス */
  .car {
	  width: 50vw;
	  margin-right: 45vw;
	  padding-left: 0.5rem;
	  height: auto;
  }

  .road-map {
    display: none;
  }

  .map {
	padding-top: 10px;
	background-color: #31322D;
  }
  .map img {
	vertical-align: bottom;
  }

  .guide {
     margin-bottom: 3.5rem;
  }   

  .guide p {
	  width: 80%;
	  text-align: center;
	  margin: 0 2.5rem;
	  padding: 0.5rem 0;
	  background-color: black;
  }

  .arrow {
	  width: 100%;
	  align-items: center;
	  display: flex;
	  justify-content: center;
	  margin: 2vw 0;
  }

  .public {
	  width:65vw;
	  height: auto;
	  padding-left: 0.5rem;
  }

  .walk {
	  margin-top: 2rem;
	  text-align: center;
  }

  .call {
	  margin: 1rem;
	  padding: 1rem 0.2rem 2rem 0.5rem; 
	  border: 1px dotted #fff;
  }

  .lost {
	  font-size: 1.2rem;
	  padding: 0.5rem;
	  border-bottom: solid 1px #fff;
	  width:70%;
	  letter-spacing: 0.15em;
	  font-family: 'Shippori Mincho', serif;
  }

  .visitor {
	  font-size: 0.9rem;
	  padding: 0.5rem;
	  letter-spacing: 0.08em;
	  line-height: 2.2;
	  font-family: 'Shippori Mincho', serif;
  }

  .number {
	  font-size: 1.5rem;
	  text-align: center;
	  padding-top: 1.1rem;
	  display: flex;
	  justify-content: center;
	  font-family: 'Source Serif Pro', serif;
          margin-bottom: 20px;
  }

  .telephone {
	  margin-left: 0.5rem;
	  text-decoration:underline 0.7px;
	  font-family: 'Source Serif Pro', serif;
  }

  .checkin-out{
         text-align: center;
         font-family: 'Shippori Mincho', serif;
	 letter-spacing: 0.05em;
	 font-size: 3.5vw;
  }

  @media screen and (min-width: 1024px) {
    html {
      background-color: #fff;
	}

	header {
		position: relative;
		background-color: #fff;
	}

	main {
	  width: 100%;
	}

	#navi {
		width: 30vw;
	}

	a,li{ 
		text-decoration: none;
		list-style: none;
	  }

	.kumomi {
		display: inline;
	}

	.page-title img {
		position: absolute;
	    display: inline;
		width: 5vw;
		left: 10vw;
		top: 20vw;
		z-index:100;
	}

	.pc {
		position: absolute;
		width: 250px;
		margin:0.5rem;
		height: auto;
		z-index: 10;
	}

	.pankuzu {
		display: inline;
	    position: absolute;
		top: 90vh;
		left: 2vw;
		z-index: 100;
		font-family: 'Shippori Mincho', serif;
	}

	.pankuzu ol {
		display: flex;
	}

	.pankuzu li {
		margin-left: 1vw;
	}


  #navi {
	  display: block;
	  opacity: 1;
	  margin: 0;
	  padding: 0;
	  position: absolute;
	  top: 2rem;
	  right: 10rem;
  }

  .nav-menu {
	  display: flex;
	  animation: none;
	  top: 30px;
  }

  .nav-menu li a {
      color: black;
  }

  .line {
	  display: inline;
  }

  .link { 
	text-align: center;
	font-family: 'Shippori Mincho', serif;
	font-weight: bold;
	letter-spacing: 0.3vw;
   }
   
   .hover {
	 position: relative;
	 text-decoration: none;
   }
   
   .hover:before {
	 content: ""; 
	 position: absolute; 
	 bottom: -5px; 
	 left: 0px;
	 right: 0px;
	 width: 100%; 
	 height: 1px; 
	 background-color: #9e9c9c; 
	 transform: scale(0, 1); 
	 transition: transform .2s; 
   }
   
   .hover:hover:before {
	 transform: scale(1); 
   }

   .nav-menu {
	   justify-content: space-between;
   }

  .nav-menu li {
    border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0.2vw;
	color: #000;
	text-align: center;
	width: 30vw;
	font-size: 0.9vw;
  }

  .kannai {
	  margin-right: 1vw;
	  padding-bottom: 0;
  }

  .dinner {
	  padding:0;
  }

  .access {
	  margin-left: 1vw;
	  padding-top: 0
  }

  .line {
	  color: #333;
  }

  .toggle_btn {
	  display: none;
  }


  .pc-image {
	  display: inline;	
	  top: 5vw;
  }

  .kannai2 {
	  height:auto;
	  width: 100vw;
	  background-color: #31322D;
	  
  }

  .slider {
	position:relative;
	z-index: 1;
	height: 100vh;
  }

  

  .slider-item {
      width: 100%;
      height: auto;
      vertical-align: top;
  } 

  .slick-dots {
	  display: none;
  }


  .smart {
	  display: none;
  }
  

  .dinner-course {
	  padding: 0 5vw;
	  background-color: #31322D;
  }

  .sentence {
	  background-color: #31322D;
	  margin-top: 10vw;
	  margin-left: 3vw;
	  padding: 0 2vw;
	  font-size: 1.2vw;
  }

  .intro {
	margin-top: 10vw;
	margin-left: 3vw;
	padding: 0 10vw;
	font-size: 1.2vw;
  }

  .explanation {
	  font-size: 0.95vw;
	  margin-bottom: 3.5vw;
  }

  .explain {
	  font-family: 'Shippori Mincho', serif;
	  margin: 5vw;
	  letter-spacing: 0.25rem;
  }

  .first br {
	  display: none;
  }

  .second {
	  margin-bottom: 1.2vw;
  }

  .second br {
	  display: none;
  }

  .third {
	  margin-bottom: 3.5vw;
  }

  .fourth {
	  font-size: 0.95vw;
	  margin-bottom: 1.2vw;
  }


  .c-copy {
	  font-size: 2.5vw;
  }

  .c-copy br {
	  display: none;
  }

  .top-room {
	  display: inline;
	  position: absolute;
	  margin-left: 35vw;
  }

  .top-room img {
	  width: 30vw;
	  height: auto;
  }

  .letter {
	  width: 30vw;
	  height: auto;
	  margin: 10vw auto;
	  position: relative;
  }



  .menu {
	  display: none;
  }
  

.logo {
	width: 20%;
	height: auto;
	margin: 0 auto;
}

.okimono {
	display: inline;
	position: absolute;
	top:25vw;
	right: 15vw;
	width: 30vw;
	height: auto;
}

.tel {
   display: none;
}

.address {
	margin-left: 0.5vw;
        text-align: left;
}


.logo {
	text-align: center;
	margin-bottom: 2vw;
}

.logo img {
	width: 20vw;
	margin: 0 auto;
}


.footer-nav {
	display: inline;
}

.navi-menu {
	display: flex;
	justify-content: center;
	margin: 5vw 0;
}

.f-kannai,
.f-dinner,
.f-access {
	margin-left: 2vw;
}

.navi-menu li {
	margin-right: 2.5vw;
	font-size: 1vw;
}

.navi-menu li a {
	color:#fff;
}

.navi-menu li:last-child {
	margin-right: 0;
}

.f-line {
	color: #fff;
}

.pc-tel {
	display: inline;
	vertical-align: middle;
}

.copy {
	display: inline;
	font-size: 0.5vw;
	
}

.call {
	font-size: 2vw;
}

.reserve {
	font-size: 1.5vw;
}

.phone {
	background-color: #fff;
	color: #333;
	padding: 2vw;
	text-align: center;
}

.phone p {
	font-weight: bold;
	display: inline;
}


/* 館内 */
.content {
	background-color: #fff;
}

.title {
	display: flex;
}

.title img {
     width: 12vw;
	 padding-left: 2vw;
}

.guest-room {
	padding: 0 5vw;
}

.facility {
	display: none;
}

.heading {
	vertical-align: bottom;
	margin-top: 4vw;
	margin-left: 0;
	font-size: 1.2vw;
}

.image img { 
	width: 30vw;
	padding-left: 5vw;
}

.note {
	text-align: right;
	width: 35vw;
	justify-content: space-between;
}

.amenity {
	width: 30vw;
	margin: 2vw 5vw;
	font-size: 1.2vw;
}

goods {
    font-size: 1vw;
}

.attention {
	margin: 1vw 10vw 0;
}

.attention br {
	display: none;
}

.about-onsen {
	display: flex;
}

.onsen {
	padding: 8vw 5vw;
	background-color: #31322D;
}

.onsen2 {
	margin: 0 5vw;
	width: 30vw;
	height: 30vh;
	border: solid 1px;
}

/* お料理 */
.normal,
.special,
.normal-course {
	background-color: #31322D;
}

.normal-course,
.special-course {
	display: flex;
	padding-top: 8vw;
}

tbody th,
.normal {
	font-size: 1.5vw;
}

tbody th {
	width: 80%;
	padding-bottom: 0;
	
}

.image{
	margin: 0;
}

.price {
	margin-bottom: 0;
	text-align: left;
}

.kids {
	font-size: 1.3vw;
	margin-left: 2.8vw;
}

.caution {
	margin: 0 3.2vw;
}

.course{ 
	margin-bottom: 0;
}

.course img {
	width: 30vw;
	padding-top: 10vw;
}

tbody td {
	padding-right: 1vw;
	padding-bottom: 0;
}

.normal p {
	margin-bottom: 1vw;
	padding-left: 0vw;
}

table {
    margin: 0 auto 1.5vw auto;
  }

/* アクセス */
.road-direction {
	display: flex;
	padding-top: 8vw;
	justify-content: center;
	background-color: #31322D;
}

.direction {
	width: 50vw;
}

.road-map {
	display: inline;
	width: 35vw;
	margin: 3vw 0 0 11vw; 
}

.car,
.public {
	width: 20vw;
	margin: 0 9vw;
}

.guide p {
	width: 30vw;
	margin: 0 auto;
}

.box {
	padding: 2vw;
	background-color: #31322D;
}

.call {
	margin: 0 auto;
	width: 60vw;
}

.lost {
	width: 22vw;
	margin-left: 5vw;
}

.visitor {
	padding: 1.8vw 10vw;
	font-size: 1vw;
}

.visitor br:nth-last-of-type(1),
.visitor br:nth-last-of-type(3) {
	display:none;
}

.number {
	font-size: 1.8vw;
}

.checkin-out{
	text-align: center;
	font-family: 'Shippori Mincho', serif;
	letter-spacing: 0.08em;
	font-size: 1.5vw;
}

}