@charset "utf-8";
body{
    animation-name:fadeInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    line-height: 1.8;
	overflow-x: auto;
	text-align:justify;
	-webkit-overflow-scrolling: touch;
	color: var(--base);
	font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ヒラギノ角ゴシック', 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif;
    }
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
html {
	font-size: 62.5%;
	font-weight: 400;
	font-style: normal;
	scroll-behavior: smooth;
  }
@media screen and (max-width: 1024px) {
  /* タブレットサイズの調整 */
  body {
    font-size: 90%; /* 全体を少し小さくする */
  }

  .container {
    width: 95%;
    padding: 10px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* 必要に応じて各要素を調整 */
}

a {
    transition: 0.5s;
}
a:hover {
    opacity: 0.5;
}

:root{
	--fs16: clamp(1.6rem, 1vw, 1.4rem);
	--fs18: clamp(1.8rem, 1vw, 1.6rem);
	--fs20: clamp(2rem, 1vw, 1.8rem);
	--fb_02: 500;
	--base: #614c3f;
	--b_color: #009cdb;
	--y_color: #fff8ea; /* 薄いイエロー */
	--p_color: #f4b0b3; /* ピンク */
}
.b_color{color:var(--b_color)}
.fb {font-weight: bold;}
.fb_02 {font-weight: 500;}
.fs20 {font-size: clamp(1.6rem, 2vw, 2rem);}


main {
	position: relative;
	_overflow: hidden;
	display: block;
	font-size: 1.6rem;
}

/* レイアウト関連
 ====================================================*/
.contents_wrap{
	width: min(90%, 1200px);
	margin-inline: auto;
}
.contents_wrap_02{
	width: min(90%, 800px);
	margin-inline: auto;
}
.contents_wrap_03{
	width: min(90%, 1000px);
	margin-inline: auto;
}
/* マージン */
.mt01em{margin-top: 1em}
.mt02em{margin-top: 2em !important}
.mt10px{margin-top: 10px !important}
.mt30px{margin-top: 30px !important}

/* バナー用調整マージン */
.ma10px{margin: 10px auto 10px !important}

.mb01em{margin-bottom: 1em}
.mb10px{margin-bottom: 10px}
.mb20px{margin-bottom: 20px}
.mb30px{margin-bottom: 30px}
.mb40px{margin-bottom: 40px}

.mt_pcsp_01{margin-top: 100px}
.mt_pcsp_02{margin-top: 200px}
.ml_pcsp_1em{margin-left: 0em}
.ml_pcsp_2em{margin-left: 0em}
@media screen and (max-width: 767px) {
.mt_pcsp_01{margin-top: 50px}
.ml_pcsp_1em{margin-left: 1em}
.ml_pcsp_2em{margin-left: 1em}
	.service_margin{margin-left:50px;}
}

/* text-align */
.t_center{text-align: center}

/* pc sp */
	.t-l_t-c{text-align: left}
	.t-r_t-c{text-align: right}
    .pc {display: block !important;}
    .sp {display: none !important;}
    /* インライン要素の時 */
    .pcinline {display: inline;}
    .spinline {display: none !important;}

@media screen and (max-width: 767px) {
	.t-l_t-c{text-align: center}
	.t-r_t-c{text-align: center}
    .pc {display: none !important;}
    .sp {display: block !important;}
    /* インライン要素の時 */
    .pcinline {display: none !important;}
    .spinline {display: inline !important;}
}

.btn{
	padding-inline: 5%;
	margin-inline: auto;
	display: table;
}
.btn a {
  	display: block;
  	justify-content: center;
  	align-items: center;
  	margin: 50px auto;
	padding: 5px 60px 7px 50px;
  	border: 1.5px solid var(--base) !important;
  	position: relative;
  	border-radius: 15px;
	font-size: 1.8rem;
}
.btn a:before,
.btn a:after {
  	position: absolute;
  	top: 50%;
  	right: 15px;
  	height: 1px;
  	background: var(--base);
  	content: '';
}
.btn a:before {
  width: 20px;
  transform: translateY(-50%);
}
.btn a:after {
  width: 8px;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: right center;
}
.btn a:hover{
	background-color: var(--base);
	color: #fff;
	opacity: 1
}
.btn a:hover::before, .btn a:hover::after {
  background: #fff;
}
.kome{
	margin-left: 1em;
	text-indent: -1em;
}
.kome::before{
	content: '※';
	color: red;
}
.red{color: red}
.list_01{
	list-style: disc;
	margin-left: 10px;
}
.list_01 li{
	padding-left: 5px;
}
.list_01 li::marker{
	content: '●';
  	color: #848484;
  	font-size: 0.8rem;
}
/* header
 ====================================================*/
#header{
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	padding-inline: 2%;
}
#header img{
	width: 100%;
}
#header:before{
	content: '';
	display: block;
	width: 100%;
	height: 20px;
  	background-color: #614c40;
  	position: absolute;
  	top: 0;
  	right: 0;
  	left: 0;
  	z-index: 0;
}
#header .header_garland{
  width: 8%;
}
#header .logo{
	z-index: 1;
  	margin-inline: 0;
  	margin-block: -30px 0;
}
#header a:hover{
	opacity: 1;
}
#header .line{
	width: 50%;
	margin-right: 30px;
	margin-top: 20px;
}
/* ヘッダーナビ */
#header .header_nav_01{
	display: flex;
	font-size: 1.2rem;
	justify-content: end;
	gap: 10px;
	margin-bottom: 10px;
}
#header .header_nav_01 li{
	__background-color: #faee00;
}
#header .header_nav_01 li a.header_nav_btn,
#g-nav .sp_nav_list_02 li a.header_nav_btn{
	background-color: #faee00;
	padding: 4px 8px 5px;
}
#header .header_nav_01 li a.header_nav_btn:hover,
#g-nav .sp_nav_list_02 li a.header_nav_btn:hover{
	background-color: var(--p_color);
}
#header .header_nav_01 li:last-child a.header_nav_btn,
#g-nav .sp_nav_list_02 li:last-child a.header_nav_btn{
	background-color: var(--p_color);
	padding: 3px 10px 5px;
}
#header .header_nav_01 li:last-child a.header_nav_btn:hover,
#g-nav .sp_nav_list_02 li:last-child a.header_nav_btn:hover{
	background-color: #faee00;
	padding: 3px 10px 5px;
}

#header .header_nav_01 li a::before{
	content:"";
	display: inline-block;
    width: 15px;
    height: 15px;
	background-image:url('../img/common/star.svg');
	background-position: center;
    background-size: contain;
	vertical-align: sub;
}
#header .header_nav_02{
	display: flex;
	font-size: 1.4rem;
	text-align: center;
	border-left: 2px dotted var(--base);
	border-right: 2px dotted var(--base);
}
#header .header_nav_02 li a{
	display: inline-block;
	text-align: center;
	padding-inline: 30px;
}
#header .header_nav_02 li a:hover,
.access #header .header_nav_02 li.access a,
.service #header .header_nav_02 li.service a,
.floorguide #header .header_nav_02 li.floorguide a,
.single-floorguide .header_nav_02 li.floorguide a,
.event #header .header_nav_02 li.event a,
.single-event .header_nav_02 li.event a,
.gourmet-food .header_nav_02 li.gourmet-food a,
.information .header_nav_02 li.information a,
.post-type-archive-post .header_nav_02 li.information a{
	background-color: var(--y_color)
}
#header .header_nav_02 li + li{
	border-left: 2px dotted var(--base);
}
#header .header_nav_02 .imgbox{
	width: 50px;
	margin-inline: auto;
}
#header .header_nav_02 .imgbox img{
	width: 100%;
}
#header .header_nav_02 .txtbox{
	line-height: 1.5;
	font-weight: 500;
	margin-top: -5px;
}
#header .header_nav_02 .txtbox span{
	font-size: 1.2rem;
}

/* sv
 ====================================================*/
.sv{
	position: relative;
	margin-top: -30px;
}
.sv_img{
	width: 100%;
	height: 300px;
}
.sv_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sv_txt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.sv_txt .ttl{
	font-size: 40px;
	font-weight: bold;
}
.sv_txt .ttl_sub{
	font-weight: bold;
}
.sv_line{
	width: 90%;
	margin: 10px auto;	
}
.sv_line img{
	width: 100%;
	margin: 10px auto;
}


/* バナー
 ====================================================*/
.banner_list_02{
	display: flex;
	gap: 30px;
	justify-content: center;
}
.banner_list_02 li{
	width: calc(100% / 3 - 100px);
}
.banner_list_02 li img{
	width: 100%;
}
.banner_list_03{
	background-color: #fff8ea;
	padding-block: 40px;
}
@media (max-width: 768px) {
.banner_list_02{
	flex-flow: column
}
.banner_list_02 li {
  width: 80%;
  margin-inline: auto;
}
}
/* footer
 ====================================================*/
.map{
	width: 100%;
	height: 100%;
	margin-block: 100px 30px;
}
.footer_insta{
	display: flex;
	gap: 5px;
	font-size: 1.1rem;
}
address .insta{
	width: 20px;
}
address .insta img{
	width: 100%;
}
#footer{
	position: relative;
	display: flex;
  	align-items: center;
  	padding: 10px 3%;
  	font-size: clamp(1.1rem, 0.918rem + 0.91vw, 1.6rem);
}
#footer .logo{
	border-right: 2px dotted var(--base);
  	margin-right: 20px;
  	padding-right: 20px;
}
#footer .escon{
	margin: auto 0 10px auto;
	width: 200px;
}
#footer .escon img{
	width: 100%;
}
.copy{
	padding: 10px 5%;
	background-color: var(--base);
	color: #fff;
	font-size: clamp(1.1rem, 0.991rem + 0.55vw, 1.4rem);
	letter-spacing: 2px;
}
#footer .footer_garland{
	position: absolute;
	top: 0;
	right: 3%;
}
#footer .footer_nav{
	display: flex;
  	font-size: 1.4rem;
  	gap: 50px;
  	margin-left: 120px;
}
#footer address{
	font-size: 1.4rem;
}
ul.footer_nav ul {
    position: relative;
    padding: 1rem 1rem 1rem 2rem;
}
ul.footer_nav ul li {
    padding: 0.5rem 0;
    line-height: 1.5;
}

ul.footer_nav ul li::before {
    position: absolute;
    left: 1rem;
    _padding-left: 0.2rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: '\f105';
}

/* フッターの前で止まるページトップ
 ====================================================*/
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 20px;
	bottom: 30px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/* SP
 ====================================================*/
@media (max-width: 768px) {
.mv_area {
  margin-top: -80px;
}	
main {
  font-size: 1.4rem;
}
.btn a {
  padding: 5px 50px 7px 20px;
  font-size: 1.6rem;
  line-height: 1.5;
}
	
/* SP header
 =====================*/
#header{
	height: 130px;
}
#header .logo {
	width: 80px;
	margin-inline: 0;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#header .header_garland{
  width: 80px;
}
#header .header_garland.header_garland_02{
  	position: absolute;
	right: 45px;
}
#header .header_garland img{
  width: 100%;
}
#header .logo img{
  width: 100%;
}

.map{height: 300px;}
.map iframe{height:100%}

/* SP footer
 =====================*/
#footer{
	flex-direction: column
}
#footer .logo {
  border-right: none;
  margin-right: 0px;
  padding-right: 0px;
	margin-bottom: 30px;
}
#footer .escon {
	width: 50%;
  	margin: 30px auto;
}
#footer .escon img{
	width: 100%;
}
.footer_insta{
	margin-inline: auto;
	justify-content: center;
}

}/* //@media */


/* ハンバーガーメニュー */
/* =============== MENUがCLOSEに =============== */
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	position: relative;
	background: var(--base);
	cursor: pointer;
    width: 40px;
    height: 40px;
	position: fixed;
	z-index: 9999;
	top: 1rem;
	right: 0rem;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 10px;
    height: 2px;
    border-radius: 5px;
	background: #fff;
  	width: 50%;
  }
.openbtn span:nth-of-type(1) {
	top: 11px;	
}
.openbtn span:nth-of-type(2) {
	top: 19px;
}
.openbtn span:nth-of-type(3) {
	top: 28px;
}

/*.openbtn span:nth-of-type(3)::after {
	content: "Menu";
	position: absolute;
	top: 4px;
	left: 0px;
	color: #fff;
	font-size: 10px;
	text-transform: uppercase;
}*/

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn.active span:nth-of-type(1) {
    top: 14px;
    left: 10px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 26px;
    left: 10px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}

/*.openbtn.active span:nth-of-type(3)::after {
	content:"Close";*//*3つ目の要素のafterにClose表示を指定
    /*transform: translateY(0) rotate(-45deg);
	top:5px;
	left:12px;
}*/
/* =============== MENUがCLOSEに =============== */

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
	left: 0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background-color: var(--y_color);
    /*動き*/
	transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
  opacity: 1;
  z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: relative;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	font-size: 1.4rem;
}

/*ナビゲーション*/
#g-nav-list{
	position: absolute;
	top: 10%;
  	left: 50%;
	transform: translateX(-50%);
  	-webkit-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
}
#g-nav ul {
  display: none;
  _position: absolute;
  z-index: 999;
  _top: 100px;
  _left: 10%;
}

#g-nav.panelactive ul {
    _display: block;
	_widht: 100%;
}
#g-nav .sp_nav_list{
	width: 90%;
	display: flex !important;
	flex-wrap: wrap;
	margin-inline: auto;
	_position: absolute;
	_top: 10%;
  	_left: 50%;
  	_transform: translateX(-50%);
  	_-webkit-transform: translateX(-50%);
  	_-ms-transform: translateX(-50%);
	font-weight: 500;
}
#g-nav .sp_nav_list li{
	width: calc(100% / 2);
	text-align: center;
	border-bottom: 2px dotted var(--base);
	padding-block: 10px;
	line-height: 1.3;
}
#g-nav .sp_nav_list li.sp_nav_list_line{
	border-right: 2px dotted var(--base);
}
#g-nav .sp_nav_list li img{
	width: 50px;
}
#g-nav .sp_nav_list_02{
  	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-inline: 5%;
	justify-content: space-between;
	margin-top: 20px;
}
#g-nav .sp_nav_list_02 li{
	width: calc(100% / 2 - 10px)
}
#g-nav .sp_nav_list_02 li a{
	display: block;
}
#g-nav .sp_nav_list_02 li a::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('../img/common/star.svg');
  background-position: center;
  background-size: contain;
  vertical-align: sub;
}

/*リストのレイアウト設定*/
#g-nav li a{
  color: var(--base);
  text-decoration: none;
  padding: 5px;
  display: inline-block;
  /*letter-spacing: 0.1em;*/
}
#g-nav .nav_list_line{
border-top: 2px dotted #fff;
    padding-top: 4px;
    margin-top: 7px;
}
.g-nav-sns{
	display: flex;
	justify-content: center;
}
.nav-btn{
	position: fixed;
	z-index: 9999;
	top: 0.1rem;
	right: 0.2rem;
	cursor: pointer;
	width: 0.3rem;
	height: 50px;
	border-radius: 5px;
}
.nav-btn span{
    display: inline-block;
	transition: all .4s;
	position: absolute;
	height: 0.02rem;
	background: #000;
	width: 100%;
  }
.nav-btn span:nth-of-type(1) {
	top:15px;	
}
.nav-btn span:nth-of-type(2) {
	top: 0.3rem;
}
.nav-btn span:nth-of-type(3) {
	top: 0.45rem;
}
.nav-btn.active span:nth-of-type(1) {
    top: 0.23rem;
	left: 0px;
	transform: translateY(6px) rotate(-45deg);
	width: 100%;
}
.nav-btn.active span:nth-of-type(2) {
	opacity: 0;
}
.nav-btn.active span:nth-of-type(3){
	top: 0.35rem;
	left: 0px;
	transform: translateY(-6px) rotate(45deg);
	width: 100%;
}
#g-nav .sp_nav_list_02 li:nth-last-child(3),
#g-nav .sp_nav_list_02 li:nth-last-child(2){
	width: 16em;
}
#g-nav .sp_nav_list_02 li:nth-last-child(1){
	width: 16em;
}

}/* //sp media */