@charset "utf-8";
/* CSS Document */

/*html {
  scroll-behavior: smooth;
}*/
#container{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
    width: 100%;
    margin: 0;
	font-size: 16px;
	color: #252525;
	line-height: 1.7;
}

* { box-sizing: border-box; }
#container a{
	text-decoration: none;
/*	color: #333;*/
}
#container a:hover{
/*	color: #333;*/
	opacity: .6;
}

#container img{
	width: 100%;
	vertical-align: bottom;
}
.w1000{
	width: 1000px;
	max-width: 1000px;	
	margin: 0 auto;
}

.pc{display: block;}
.sp{display: none;}

ul {
  list-style: none;
}

/*-- 画像位置 --*/
#container img {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
	max-width: 100%;
}
/*-- flex --*/
.flex_box {
  	display:flex;
}
/*-- font --*/
.s-font{font-size: 0.9em;}
.cursive{font-family: 'Dancing Script', cursive;	color: #fbdb90;}
.hina{font-family: 'Hina Mincho', serif;}
.min{font-family: 'Noto Serif JP', serif;}
.gothic{	font-family: 'Noto Sans JP', sans-serif;}



.kaisei-opti-regular {
  font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
}
.kiwi-maru-light {
  font-family: "Kiwi Maru", serif;
  font-weight: 300;
  font-style: normal;
}
.rock-salt-regular {
  font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-style: normal;
}
/*--------------------page-top */
#page-top{
    position: fixed;
    z-index: 100;
    right: 20px;
    bottom: 20px;
}
#page-top a{
    color:  rgba(229,142,136,0.75);
	background: rgba(255,255,255,0.70);
	padding: .5em;
	border-radius: 1em;
	text-decoration: none;
	font-size: 3em;
}
#page-top a:hover{
    color:  rgba(229,217,136,1.00);
}
/*--------------------パンくず */
#pankuzu{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	margin: 15px auto;
	width: 1000px;
	font-size: .85em;
}

#pankuzu ul{
    padding: 0 0 5px;
    _zoom: 1;
}
#pankuzu li{
    float: left;
    list-style: none;
}
#pankuzu li + li:before{
    margin: 0 8px;
    content: '>';
}


/*------------------------------クレジット*/
.photo{position: relative;}
.cre{
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: right;
	font-size: .8em;
	line-height: 1;
	position: absolute;
	right: 2px;
	bottom: 2px;
	text-shadow:
       2px  0px 1px #000000,
       0px  2px 1px #000000,
      -2px  0px 1px #000000,
       0px -2px 1px #000000,		
       2px  0px 1px #000000,
       0px  2px 1px #000000,
      -2px  0px 1px #000000,
       0px -2px 1px #000000; 	
}
/*------------------------------marker*/
.marker{
background:linear-gradient(transparent 65%, #fff799 65%);
font-weight:500; 
}

/*------------------------------------------------------slick*/
.slick-slide img{width: 100%;  height: auto;}
/*.slick-prev{    left: 0;}
.slick-next{    right: 0;}*/

.slick-dots {
	position: static;
/*	margin-top: 20px;*/
/*	margin-bottom: -40px;*/
	position: absolute;
	bottom: -40px;
	left: 0;
	width: 100%;
	font-size: 0;
	text-align: center;
	list-style: none;
}

.slick-dots li {
/*  width: 18.5%;
  margin: 0 0 0 1.875%;
	*/
}
.slick-dots li:first-child {
  margin-left: 0;
}
/*.slick-dots li {
  width: calc(100% / 4 - 5px);
  margin: 0 0 0 5px;
}

#slick01 .slick-dots li img {
  width: 100%;
  cursor: pointer;
  transition: .2s ease-in-out;
}*/
.slick-dots .slick-active img,
.slick-dots li:hover img {
  opacity: .6;
}

/* Arrows */
.slick-prev,
.slick-next
{
	z-index: 100;
}
.slick-arrow_prev,
.slick-arrow_next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5em;
	cursor: pointer;
	background: rgba(0,0,0,0.50);
	color: #fff;
	font-weight: 900;
	line-height: 1;
	z-index: 100;
	padding: .3em;
}

.slick-arrow_prev {
  left: 0;
}
.slick-arrow_next {
  right: 0;
}
.slick-arrow_prev:hover,
.slick-arrow_next:hover {	background: rgba(0,0,0,1.00);}


/*------------------------------------------------------topのスライドショー*/
.slider {
  max-height: auto;
  margin-inline: auto;
/*  overflow: hidden; /* 画像がはみ出ないようにする */
/*  width: 80vw;*/
	max-width: 1300px;
}
.slick-img img {
  width: 100%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}
.main{
	max-height: 800px;
	position: relative;
	background:	#EFEEE7;
}
.main .w1000{
    position: absolute;
	top:5%;
	left:1%;
	right: 1%;
}
.main h1{
	font-family: "Kaisei Opti", serif;
	font-weight: 600;
	font-size: min( 6vw, 4em );
	margin: 1.3em 0 0.7em;
	color: #534741;
	text-shadow    : 
       2px  2px 2px #EFEEE7,
      -2px  2px 2px #EFEEE7,
       2px -2px 2px #EFEEE7,
      -2px -2px 2px #EFEEE7,
       2px  0px 2px #EFEEE7,
       0px  2px 2px #EFEEE7,
      -2px  0px 2px #EFEEE7,
       0px -2px 2px #EFEEE7;
}
.main .intro{
	font-family: "Kaisei Opti", serif;
	font-weight: 600;
	font-size: min( 3vw, 2em );
	color: #af5156;
	text-shadow    : 
       2px  2px 2px #EFEEE7,
      -2px  2px 2px #EFEEE7,
       2px -2px 2px #EFEEE7,
      -2px -2px 2px #EFEEE7,
       2px  0px 2px #EFEEE7,
       0px  2px 2px #EFEEE7,
      -2px  0px 2px #EFEEE7,
       0px -2px 2px #EFEEE7;
	line-height: 1.4;
}
.main .text{
	font-family: "Kiwi Maru", serif;
	font-weight: 500;
	font-size: min( 2.5vw, 1.2em );
	background: rgba(255,255,255,0.80);
	margin: 5em auto 0;
	padding: .5em 1em;
}
.logo{
	width: min( 25vw, 15em);
}
/*------------------------------title*/
/*#title{
	background:url("../img/main01.png") no-repeat center top / contain,
		#EFEEE7;
	padding: 2em 0;
}

#title h1{
	font-family: "Kaisei Opti", serif;
	font-weight: 600;
	font-size: min( 5vw, 4em );
	margin: 1.3em 0 0.7em;
	color: #534741;
	text-shadow    : 
       2px  2px 2px #EFEEE7,
      -2px  2px 2px #EFEEE7,
       2px -2px 2px #EFEEE7,
      -2px -2px 2px #EFEEE7,
       2px  0px 2px #EFEEE7,
       0px  2px 2px #EFEEE7,
      -2px  0px 2px #EFEEE7,
       0px -2px 2px #EFEEE7;
}
#title .intro{
	font-family: "Kaisei Opti", serif;
	font-weight: 600;
	font-size: min( 3vw, 2em );
	color: #af5156;
	text-shadow    : 
       2px  2px 2px #EFEEE7,
      -2px  2px 2px #EFEEE7,
       2px -2px 2px #EFEEE7,
      -2px -2px 2px #EFEEE7,
       2px  0px 2px #EFEEE7,
       0px  2px 2px #EFEEE7,
      -2px  0px 2px #EFEEE7,
       0px -2px 2px #EFEEE7;
	line-height: 1.4;
}
#title .text{
	font-family: "Kiwi Maru", serif;
	font-weight: 500;
	font-size: 1.2em;
	background: rgba(255,255,255,0.70);
	margin: 5em auto 0;
	padding: .5em 1em;
}
*/
/*------------------------------common*/
.kaisei-opti-regular {
  font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
}
.kiwi-maru-light {
  font-family: "Kiwi Maru", serif;
  font-weight: 300;
  font-style: normal;
}
.rock-salt-regular {
  font-family: "Rock Salt", cursive;
  font-weight: 400;
  font-style: normal;
}
h2{
	text-align: center;
	font-family: "Kaisei Opti", serif;
	font-size: min( 3.7vw, 3em );
	margin-bottom: 1em;
}
h2 span{
	font-family: "Rock Salt", cursive;
	font-weight: normal;
	font-size: .7em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

h2 span::before,
h2 span::after {
	content: "";
  /*flex-grow: 1; /* 線の長さを自動伸縮 */
	width: 3em;/* 線の長さ*/
	height: 2px; /* 線の太さ */
	background-color: #534741; /* 線の色 */
}

h2 span::before {
  margin-right: 1em; /* 文字と左線の間隔 */
}

h2 span::after {
  margin-left: 1em; /* 文字と右線の間隔 */
}
/*------------------------------shop*/
.shop{
    background: url("../img/bg.jpg") repeat-y center top/ contain;
	padding: 7em 0 2em;
	color: #534741;
}
.shop section{
	padding: 3.5vw 0;
}

/*------------------------------point*/
.point dl{
	font-family: "Kiwi Maru", serif;
	display: flex; 
	align-items:center;
	max-width: 900px;
	margin: 1.5em auto;
	padding: 1em;
	background: #534741;
	color: #fff;
	box-shadow: 2px 2px 4px gray;
	font-size: min( 2vw, 1.2em );		
}
.point dl dt{
	padding: 0 1em;
	flex: 3;
	font-size: 1.1em;
}
.point dl dt::first-letter {
	font-family: "Kaisei Opti", serif;
	font-size: 1.5em;
}
.point dl dd{
	flex: 7;
	padding-top: .35em;
	text-align: left;
}
/*------------------------------room*/
.room .flex_box{
	align-items: stretch;
	justify-content: space-between;
}
.room-box{
	width: calc(100% / 3 - .8em);
	background: rgba(255,255,255,0.80);
}
.room dl{
	padding: 0.2em .7em;
}
.room dl dt{
	font-family: "Kaisei Opti", serif;
	border-bottom: 1px #736F6D solid;
	font-size: min( 2vw, 1.2em );	
	color:  #534741;
	margin-bottom: .5em;
}
.room dl dt strong{ font-size: 1.3em;}
.room dl dd{
	flex-grow: 1;
	font-size: min( 1.6vw, 1.1em );
}
/*------------------------------rsv*/
.rsv h2 + p{
	font-family: "Kiwi Maru", serif;
	text-align: center;
	font-size: min( 3.5vw, 1.4em );
}
.rsv dl{
	background: #fff;
	padding: 2.5em 1em 1.5em;
	margin: 2em auto;
	box-shadow: 2px 2px 4px gray;
}
.rsv dl dt{
	text-align: center;
	font-size: 2.5em;
	font-size: min( 4.5vw, 2.5em );
	font-weight: bold;
}
.rsv dl dt small{
	display: block;
	font-family: "Kiwi Maru", serif;
	font-size: .7em;
	color: #af5156;
	font-weight: normal;
}
.rsv dl dd{
	font-size: 1.5em;
	text-align: center;
}
.rsv dl dd strong a{
	font-size: 3em;
	color: #af5156;
	font-weight: 900;
}
.rsv dl dd.image{
	display: flex;
}
.rsv dl dd.image img{flex: 1;}

/*------------------------------------------------------special*/
#special{
    background: #af5156;
	padding: 8.5vw 0 1.5vw;
	color: #fff;
}
#special h2 span{
	color: #EAC7C9;
}
#special h2 span::before,
#special h2 span::after {
	background-color: #EAC7C9; 
}
#special .text{
	text-align: center;
	font-size: 1.5em;
	padding-bottom: 1.3em;
}
#special .text strong{
	display: block;
	color:  #FFF883;
	font-size: 1.3em;
	text-decoration: underline;
}
#special table{
	max-width:	71em;
	margin: 1.5em auto;
	background: #fff;
	color: rgba(68,68,68,1.00);
	font-size: 14px;
}
#special table caption{
	color: #fff;
	font-family: "Kaisei Opti", serif;
	font-size: 1.3em;
	border-top: dotted #fff 3px;
}
#special tr{border-bottom: #C09F9F 1px solid;}
#special th{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 15px;
	width: 6em;
	text-align: center;
	background: #F7F7F7;
	color: #BD5B5D;
}
#special td{
	padding: 0 .5em;
	width:25em;
}
.ball {
	font-family: "Kiwi Maru", serif;
	font-weight: 500;
	flex: 3;
	max-width: 16em;
	font-size: min(2.3vw, 1.8em);
	position: relative;
	display: inline-block;
	margin-top: 15px;
	padding: 1.2em 2em;
	border-radius: 35px;
	background-color: #ffffff;
	text-align: left;
	color: #534741;
}

.ball::after {
  content: "";
  position: absolute;
  top: 0;
  left: 32%;
  border-style: solid;
  border-width: 0 7.5px 15px 7.5px;
  border-color: transparent transparent #ffffff;
  translate: -50% -100%;
}
.qr{
	flex: 5;
}
.qr a{
	display: flex;
	align-items: center;
	margin-top: 15px;
	margin-left: 2em;
	padding: 14px 30px;
	background-color: rgba(255,255,255,0.75);
	border: 3px #fff solid;
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;	
}
.qr .moji{
	flex: 7;
	color: #000;
	margin-right: 1em
}
.qr .image{
	flex: 2;
	width: 20px;
}
.qr strong{	
	display: block;
	text-align: right;
}
/*--------------------btn */

/*スクロールしたら表示させる*/
.sa {
  opacity: 0;
  transition: all 2.0s ease;
}
 .sa.show {
  opacity: 1;
  transform: none;
}
 
.sa-lr {  transform: translate(-100px, 0);}
.sa-rl {  transform: translate(100px, 0);}
.sa-up {  transform: translate(0, 100px);}
.sa-down {  transform: translate(0, -100px);}
.sa-scaleUp {  transform: scale(.5);}
.sa-scaleDown {  transform: scale(1.5);}
.sa-rotateL {  transform: rotate(180deg);}
.sa-rotateR {  transform: rotate(-180deg);}




/************************************************************
					★min770px－max999px
************************************************************/
@media screen /*and (min-width: 770px) */and (max-width: 1000px){

#container, .w1000 {
	min-width: 100%;  
	width: 100%;
	margin: 0;
	overflow: hidden;
}
.w1000 {	padding: 0 1.5%;}

/*---------------------------------------------コンテナ用★★★★★★★★-----*/

	
}




/************************************************************
					★タブレット対応
************************************************************/
@media screen /*and (min-width:600px) */and (max-width:769px)  {

/* 非表示指定 */
.pc {display: none;}
.pc{display: none;}
.sp{display: block;}	
.tb_none{display: none;}	
#breadcrumbs,#pankuzu,#breadcrumb {display: none;}
	

/*---------------------------------------------コンテナ用★★★★★★★★-----*/

	
}


/************************************************************
						★スマホ対応
************************************************************/
@media screen and (max-width:599px)  {
	
/*--- 非表示 ---*/
/*br{display: none}*/
/*img{max-width:100%;}*/
.sp_none{display: none;}
.pc{display: none;}
.sp{display: block;}


/*---------------------------------------------コンテナ用★★★★★★★★-----*/
/*------------------------------------------------------topのスライドショー*/
.main{
	padding-bottom: 15vw;
}
.main h1{
	font-size: 6vw;
}
.main .intro{
	font-size: 4vw;
	margin-left: .5em;
}
.main .text{
	font-size: 3vw;
	margin: 2em auto;
}

/*------------------------------shop*/
.shop{
    background: url("../img/bg.jpg") repeat-y center top;
	padding: 4em 0 2em;
}
.shop section{
	padding: 3.5vw 0;
}
h2{	
	font-size: 5vw;
	margin-top: 2em;
	margin-bottom: .3em;
}
/*------------------------------point*/
.point dl{
	display: block; 
	font-size: 3.2vw;
	padding: 0.5em 1em;
}
/*------------------------------room*/
.room .flex_box{	display: block; }
.room-box{
	width: 100%;
	background: none;
	position: relative;
	margin-bottom: .5em;
}
.room-box p{	width: 70%;		}
.room-box dl{
	position: absolute;
	top:1em;
	right: 0;
	background: rgba(255,255,255,0.80);
	z-index: 10;
	width: 60%;
}
.room-box:nth-of-type(2) p{	margin-left: 30%;}
.room-box:nth-of-type(2) dl{
	left: 0;
	width: 62%;
}	
.room dl dt{	font-size: 3vw;	}
.room dl dd{	font-size: 2.8vw;}
	
/*------------------------------rsv*/
.rsv dl dt{	font-size: 5.2vw;}
.rsv dl dd{	font-size: 1.1em;}

/*------------------------------------------------------special*/
#special{
    background: #af5156;
	padding: 8.5vw 0 1.5vw;
	color: #fff;
}

#special h2{font-size: 4.3vw;}	
#special h2 span{margin-bottom: 0.8em;}
#special .text{	
	font-size: 1.3em; 
	line-height: 1.3;
	margin: 1em auto 0;
}
#special .flex_box{display: block;}
.ball {
	max-width: 100%;
	width: 100%;
	font-size: 3.3vw;
	margin-top:-0.5em;
	padding: .4em 1.2em;
	text-align: center;
}
.ball br{display: none;}
.ball::after {  border-width: 0 5px 10px 5px; left: 5%;}
.qr a{	margin-left: 0;}
.qr .image{	display: none;}


}