@charset "UTF-8";

/*root関数-------------------------------------*/
:root {
	/* root関数：color */
	--color-main1: #345ebb;
	--color-main2: #69E1FF;
	--color-main3: #062377;
	--color-main4: #F7542B;
	--color-dark: #000;
	--color-d-gray: #333;
	--color-light: #FFF;
	--color-link: #F7542B;
	--color-ssp: #847F4F;
	--color-palette: rgb(179, 53, 53);
	--color-kokiden: #45569B;
	--color-musashino: #309A9F;
	--color-room1-m: #B33535;
	--color-room1-s: #000000;
	--color-room2-m: #6F3B15;
	--color-room2-s: #00674F;
	--color-room3-m: #2F302F;
	--color-room3-s: #48296C;
	--color-room4-m: #E5721B;
	--color-room4-s: #0160AB;

	/* root関数：fonts */
	--font-main: "Local Noto Serif JP","Noto Serif JP", serif;
	--font-notes: "Local Noto Sans JP","Noto Sans JP",sans-serif;
	--font-gothic: "Local Noto Sans JP","Noto Sans JP",sans-serif;
	--font-serif: "Local Noto Serif JP","Noto Serif JP", serif;
	--font-en: "Instrument Serif", serif;

	/*root関数：gradient*/
	--gradient-mainbg: linear-gradient(180deg, #d5dced, #d1e3f5 20%, #8eabe9 40%, #c7e8fa 60%, #b4d6f9 80%, #ded1ff);
	--gradient-ttlbg: linear-gradient(90deg, transparent, #69e1ff 8%, #345ebb 15% 85%, #69e1ff 92%, transparent);
	--gradient-bk-radial:radial-gradient(#393e54, #171718 30%, #000000);
	--gradient-bk-liner:linear-gradient(0deg, #000000, #393e54 50%, #000000);
	--gradient-gold:linear-gradient(0deg, #cec178 10%, #f1e9bd 50%, #cec178 90%);
		--gradient-palette:linear-gradient(90deg, transparent, #b33535 20% 80%, transparent);
		--gradient-kokiden:linear-gradient(90deg, transparent, #45569b 20% 80%, transparent);
	--gradient-musashino:linear-gradient(90deg, transparent, #309a9f 20% 80%, transparent);
}


/*共通要素*/
html {
	scroll-padding-top: 70px;
	/*nav height+10px*/
}

@media (min-width:834px) {
	html {
		scroll-padding-top: 70px;
		/*nav height*/
	}
}


body {
	font-family: var(--font-main);
	font-weight: 500;
	font-style: normal;
	line-height: inherit;
	color: var(--color-light);
	font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem);
	background: var(--color-dark);
}

/*Loading ここから*/
/* Loading Block */
#loading {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: var(--color-dark);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	display: grid;
	place-content: center;
	place-items: center;
}

/* Hide Loading Block  */
.loaded {
	opacity: 0;
	visibility: hidden;
}

/* loading anime  クラスはloaderで*/
.loader {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#69E1FF 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
}
@keyframes l1 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}
/*Loading ここまで*/


#container {
	margin-inline: auto;
}

.fc-key1 {
	color: var(--color-main1);
}

.fc-key2 {
	color: var(--color-main2);
}

.fc-key3 {
	color: var(--color-main3);
}

.fc-key4 {
	color: var(--color-main4);
}

.fc-hanten {
	color: var(--color-dark);
}

.fc-hanten2 {
	color: var(--color-light);
}

.ff-en {
	font-family: var(--font-en);
}

a {
	color: var(--color-link);
	text-decoration: none;
	transition: .5s;
}

a:hover {
	color: var(--color-link);
	text-decoration: underline;
	/* opacity: .7; */
}

a:hover img {
	box-shadow: none;
	filter: none;

}

.notes {
	text-align: justify;
	font-family: var(--font-notes);
	width: 100%;
	padding: 0;
	margin: 0 auto;
}

.notes-line {
	text-align: justify;
	font-family: var(--font-notes);
	width: 100%;
	padding: 1em 0;
	margin: 1em auto;
	border-top: solid 1px var(--color-light);
	border-bottom: solid 1px var(--color-light);

}
.pc-br{display: none;} 

@media (min-width:834px) {
	.sp-br{display: none;} 
	.pc-br{display: block;} 
	.notes,
	.notes-line {
		box-sizing: initial;
		/*padding分を初期化*/
		margin: 30px auto 0 auto;
		max-width: 700px;
	}
}

ul.notes li,
ul.notes-line li {
	font-size: 1.4rem;
	font-weight: 400;
	margin: 0.5em auto 0 auto;
	margin-left: 1em;
	text-indent: -1em;
	line-height: 1.6;
	text-align: justify;
}

@media (min-width:834px) {

	ul.notes li,
	ul.notes-line li {
		font-size: 1.4rem;
	}
}

#page-top img {
	position: fixed;
	width: 45px;
	bottom: 20px;
	right: 10px;
	z-index: 99999;
	transition: .3s;
}

@media (min-width:834px) {
	#page-top img {
		width: 55px;
		bottom: 40px;
		right: 20px;
	}
}

#page-top a img:hover {
	transform: scale(1.1);
}

.img-box-shadow {
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
	margin-bottom: 8px;
}

.img-filter-shadow {
	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
}

.img-radius {
	border-radius: clamp(20px, 12.958px + 1.878vw, 40px);
}

.wide-max500,
.wide-max600,
.wide-max700,
.wide-max800,
.wide-max900,
.wide-max1000 {
	margin-left: auto;
	margin-right: auto;
}

.wide-max500 {
	max-width: 500px;
}

.wide-max600 {
	max-width: 600px;
}

.wide-max700 {
	max-width: 700px;
}

.wide-max800 {
	max-width: 800px;
}

.wide-max900 {
	max-width: 900px;
}

.wide-max1000 {
	max-width: 1000px;
}

/* KV-------------------------------------*/
.img-kv {
	margin: 70px auto 0 auto;
	/*メニュー高さ分*/
	width: 100vw;
}

@media (min-width:834px) {
	.img-kv {
		margin: 70px auto 0 auto;
		/*メニュー高さ分*/
		/* max-width: 1000px; */
	}
}

.img-kv img {
	object-fit: contain;
}

/*sec共通-------------------------------------*/
.sec-container {
	margin: 0 auto;
	max-width: 1000px;
	padding: 0 20px;
	text-align: center;
}

/*sec01-------------------------------------*/
#sec01 {
	background:var(--gradient-bk-radial);
}
.box-intro {
	padding: 40px 0;
	text-align: center;
}
@media (min-width:834px) {
	.box-intro {
		padding: 100px 0;
	}
}
.main-catch {
	font-family: var(--font-en);
font-size: clamp(4rem, 2.944rem + 4.507vw, 7rem);
	line-height: 1.2;
	background: var(--gradient-gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ttl-h2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-en);
 font-size: clamp(3.6rem, 2.755rem + 3.606vw, 6rem);
  color: var(--color-light);
  text-transform: uppercase;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
  background: var(--gradient-ttlbg);
  overflow: visible; /* デコ画像がはみ出せるように */
	padding:  0;
	line-height: 1;
	margin: 1.5em calc(50% - 50vw) 1em;
	height: 2.4em;
}

/* 中央デコ画像 */
.ttl-h2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
	height: 3.2em;
  aspect-ratio: 1000 / 150;
  background: url("../img/deco2.webp") no-repeat center / contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* テキストを最前面に */
.ttl-h2 span {
  position: relative;
  z-index: 3;
}

@media (min-width:640px){
	.ttl-h2 {
		height: 1.8em;
	}

	.ttl-h2::after {
			height: 2.6em;

	}
}


.txt-date{
	font-size: clamp(2.8rem, 2.518rem + 1.202vw, 3.6rem);
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 3em;
}
.txt-date span{
	font-size: 130%;
}

.box-lottery{
	background: var(--color-main1);
	border-radius: 0 clamp(30px, 12.394px + 4.695vw, 80px) 0 clamp(30px, 12.394px + 4.695vw, 80px);
	margin: 2em auto;
	max-width: 1000px;
	padding: clamp(20px, -1.127px + 5.634vw, 80px);
}

.ttl-yoyaku{
	font-size: clamp(2.4rem, 2.118rem + 1.202vw, 3.2rem);
	border-top: 2px solid var(--color-light);
	border-bottom: 2px solid var(--color-light);
	margin: .5em auto 1em;

}

img.btn-yoyaku {
	width: 70vw;
	max-width: 360px;
	margin: 2em auto 1em;
	transition: .5s ease;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}

a:hover img.btn-yoyaku{
	transform: scale(.97);
	box-shadow: none;
}

.ippan-yoyaku{
	/* width: 80vw; */
	max-width: 1000px;
	padding: clamp(20px, -1.127px + 5.634vw, 80px);
	background-color: var(--color-main4);
	color: var(--color-light);
	font-weight: 700;
	font-size: clamp(1.8rem, 1.659rem + 0.601vw, 2.2rem);
	margin: 1em auto;
		border-radius: 0 clamp(30px, 12.394px + 4.695vw, 80px) 0 clamp(30px, 12.394px + 4.695vw, 80px);
}



/*sec02-------------------------------------*/
#sec02{
	padding: 40px 0;
}
@media (min-width:834px){
	#sec02{
	padding: 80px 0;
}
}



.box-kakioroshi{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 2em auto 4em;
}
@media (min-width:640px){
	.box-kakioroshi{
	grid-template-columns: repeat(4, 1fr);
}
}

.box-hall {
	display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, 1fr); 
gap:10px;
margin: 2em 0;
}
.box-hall .div1 { grid-area: 1 / 1 / 3 / 3; }
.box-hall .div2 { grid-area: 3 / 1 / 5 / 3; }
.box-hall .div3 { grid-area: 5 / 1 / 6 / 2; }
.box-hall .div4 { grid-area: 5 / 2 / 6 / 3; }
.box-hall .div5 { grid-area: 6 / 1 / 7 / 2; }
.box-hall .div6 { grid-area: 6 / 2 / 7 / 3; } 



@media (min-width:640px){
.box-hall {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap:10px;
}
.box-hall .div1 { grid-area: 1 / 1 / 3 / 3; }
.box-hall .div2 { grid-area: 1 / 3 / 3 / 5; }
.box-hall .div3 { grid-area: 3 / 1 / 4 / 2; }
.box-hall .div4 { grid-area: 3 / 2 / 4 / 3; }
.box-hall .div5 { grid-area: 3 / 3 / 4 / 4; }
.box-hall .div6 { grid-area: 3 / 4 / 4 / 5; } 
}

/*sec03-------------------------------------*/
#sec03{
	background: url(../img/side_bg.webp), var(--gradient-mainbg);
	background-size: contain, cover;
	background-repeat: repeat-y, no-repeat;
	color: var(--color-dark);
	padding-bottom: 40px;
}
@media (min-width:640px){
	#sec03{
			padding-bottom: 80px;
	}
}


.ttl-plan{
	background: url(../img/bg_2_sp.webp);
	background-size: cover;
	color: var(--color-light);
	text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
 font-size: clamp(3.6rem, 2.755rem + 3.606vw, 6rem);
	text-transform: uppercase;
	font-family: var(--font-en);
	margin: 0 calc(50% - 50vw) 1em;
	line-height: 1.1;
	padding: .2em 0;
}

@media (min-width:640px){
	.ttl-plan{
			background: url(../img/bg_2_pc.webp);
				background-size: cover;
				padding: .75em 0;
	}

}

.box-room-btn{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap:10px;
	margin: 30px 0;
}
/* 640px切り替え */
@media (min-width:640px){
.box-room-btn{
	grid-template-columns: repeat(2, 1fr);
		gap:20px;
		max-width: 700px;
		margin: 60px auto;

}
}

.container-plan{
	background: rgba(255, 255, 255, 0.8);
		border-radius: 0 clamp(30px, 12.394px + 4.695vw, 80px) 0 clamp(30px, 12.394px + 4.695vw, 80px);
	margin: 2em auto;
	max-width: 1000px;
	padding: clamp(30px, 12.394px + 4.695vw, 80px) 12px;
		border: 3px solid var(--color-light);

}

/*ここの数値はcontainer-planのpadding合わせ*/
.ttl-room-name{
	width: calc(100% + 24px);
	margin: 0 -12px 1em ;
}

@media (min-width:640px){
	.container-plan{
			padding: clamp(30px, 12.394px + 4.695vw, 80px)  80px;
	}
	.ttl-room-name{
	width: calc(100% + 160px);
	margin: 0 -80px 2em;
}
}

.ttl-amenity{
	font-family: var(--font-en);
	font-size: clamp(3.2rem, 2.637rem + 2.404vw, 4.8rem);
	text-transform: uppercase;
	line-height: 1.2;
	margin: 1em auto .5em;
}
.ttl-amenity::after{
	display: block;
	content: "◆";
	font-size: clamp(1.8rem, 1.589rem + 0.901vw, 2.4rem);
}

#room1 .ttl-amenity{
 color: var(--color-room1-m);
}
#room1 .ttl-amenity::after{
 color: var(--color-room1-s);
}
#room2 .ttl-amenity{
 color: var(--color-room2-m);
}
#room2 .ttl-amenity::after{
 color: var(--color-room2-s);
}
#room3 .ttl-amenity{
 color: var(--color-room3-m);
}
#room3 .ttl-amenity::after{
 color: var(--color-room3-s);
}
#room4 .ttl-amenity{
 color: var(--color-room4-m);
}
#room4 .ttl-amenity::after{
 color: var(--color-room4-s);
}

.box-room-photo{
	display: grid;
	gap: 30px;
}

@media (min-width:640px){
	.box-room-photo{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	row-gap: 40px;
	column-gap: 20px;
}
}

.inner-room-photo{
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;	
gap: 10px;
}


.item-chara {
	font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem);
	font-weight: 700;
	line-height: 1;
	color: var(--color-light);
	padding: .25em 0 .4em;
	/* border-radius: .3vmax; */
}
.item-chara::before {
	content: '【';
}
.item-chara::after {
	content: '】';
}

.item-name {
	font-size: clamp(2rem, 1.930rem + 0.3vw, 2.2rem);
	font-weight: 700;
	line-height: 1.2;
}

.item-price {
	font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
}

.item-size {
	font-family: var(--font-gothic);
font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem);
	font-weight: 400;
	line-height: 1.2;
}

.item-size::before {
	content: "［サイズ］";
}

.item-ingredients{
	font-family: var(--font-gothic);
font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem);
	font-weight: 400;
	line-height: 1.2;
}
.item-ingredients::before {
	content: "〈使用材料〉";
	display: block;
	margin-bottom: 5px;
}

/*sec04-------------------------------------*/
#sec04{
	background: url(../img/pattern_main.webp), var(--color-light);
	background-size: auto, cover;
	background-repeat: repeat, no-repeat;
	color: var(--color-dark);
	padding: 10px 0 40px;
}
@media (min-width:640px){
	#sec04{
			padding: 20px 0 80px;
	}
}

/*スライダー*/
.slide-items {
	width: 80vw;
	margin: 40px auto;
}

@media screen and (min-width:834px) {
	.slide-items {
		max-width: 700px;
		margin: 80px auto;
	}
}

.ttl-slide {
	text-align: center;
	font-family: var(--font-en);
	font-size: clamp(3rem, 1.944rem + 4.507vw, 6rem);
	text-transform: capitalize;
	color: var(--color-main1);
}
.ttl-slide::before, .ttl-slide::after {
    content: "";
    display: inline-block;
    width: clamp(40px, 18.873px + 5.634vw, 100px);
height: clamp(30px, 14.507px + 4.131vw, 74px);
    background-image: url('../img/deco1.webp');
    background-position: center;
    background-size: contain;
		background-repeat: no-repeat;
		margin: -0.1em .5em;
}

/* .ttl-slide img {
	width: 50vw;
	margin: 0 auto 15px auto;
}

@media screen and (min-width:640px) {
	.ttl-slide img {
		max-width: 280px;
	}
} */

.img-slide img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.name-lounge {
	font-size: clamp(2.2rem, 2.127rem + 0.36vw, 2.4rem);
	font-weight: 700;
	text-align: center;
	margin: 10px 0;
	color: var(--color-main1);
}

.slick-prev,
.slick-next {
	top: 37%;
}

@media screen and (min-width:600px) {

	.slick-prev,
	.slick-next {
		top: 45%;
	}
}

@media screen and (min-width:834px) {

	.slick-prev,
	.slick-next {
		top: 42%;
	}
}

@media screen and (min-width:600px) {

	/* PCでの矢印位置調整 */
	.slick-prev {
		left: -45px;
	}

	.slick-next {
		right: -30px;
	}
}

.slick-prev:before,
.slick-next:before {
	/* 矢印サイズ */
	color: var(--color-main1);
	font-size: 24px;
}

@media screen and (min-width:600px) {

	.slick-prev:before,
	.slick-next:before {
		font-size: 36px;
	}
}

.slick-dots li button:before {
	font-size: 10px;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--color-main1);

}

.slick-dots li.slick-active button:before {
	opacity: 1;
	color: var(--color-main1);
}
/*endスライダー*/


.howto-toy {
	/* background: var(--color-light); */
	padding: 15px;
	margin: 30px auto 0 auto;
	color: var(--color-dark);
	font-family: var(--font-gothic);
}

@media (min-width:640px) {
	.howto-toy {
		padding: 30px;
		margin: 60px auto 0 auto;
	}
}

/*sec05-------------------------------------*/
#sec05{
	background: url(../img/side_bg.webp), var(--gradient-mainbg);
	background-size: contain, cover;
	background-repeat: repeat-y, no-repeat;
	color: var(--color-dark);
	padding-bottom: 40px;
}
@media (min-width:640px){
	#sec05{
			padding-bottom: 80px;
	}
}




/*予約方法一覧//////////////////*/
.howto-reserve {
	margin-top: 0.3em;
	color: var(--color-dark);
	font-size: clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem);
}

.reserve-grid {
	margin: 0 auto;
	line-height: 1.4;
	width: 85vw;
	max-width: 800px;
	text-align: center;
	border-collapse: collapse;
	border-spacing: 0;
}

.reserve-grid th {
	padding: 10px;
	background: var(--color-main1);
	border: solid 1px var(--color-light);
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	color: var(--color-light);
}

.reserve-grid td {
	padding: 10px;
	background: var(--color-light);
	border: solid 1px var(--color-main1);
	vertical-align: middle;
}

td.reserve-menu {
	background-color: #E8EFFF;
	font-weight: 700;
	white-space: nowrap;
}

.tel-num {
	font-size: clamp(3rem, 2.927rem + 0.36vw, 3.2rem);
	font-weight: 800;
}

.tel-num a {
	color: var(--color-main3);
	text-decoration: none;
}


.ttl-shopname{
	color: var(--color-light);
	font-weight: 700;
font-size: clamp(2.2rem, 1.918rem + 1.202vw, 3rem);
	line-height: 1.2;
	padding: .5em;
		width: calc(100% + 24px);
		/* 24pxはcontainer-planのpadding合わせ */
	margin: 0 -12px 1em ;
}

@media (min-width:640px){
	.ttl-shopname{
			width: calc(100% + 160px);
					/* 160xはcontainer-planのpadding合わせ */

	margin: 0 -80px 2em;
	}
}



#palette .ttl-shopname{
background: var(--gradient-palette);
}
#kokiden .ttl-shopname{
background: var(--gradient-kokiden);
}
#musashino .ttl-shopname{
background: var(--gradient-musashino);
}

/*タブ関連 */
.tabBox .tabArea {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap:10px;
}

@media screen and (min-width:834px) {
	.tabBox .tabArea {
		justify-content: center;
		gap: 20px;
	}
}

.tabBox .tabArea .one_tab {
	width: 42%;
	display: block;
	text-decoration: none;
	transition-duration: 0.6s;
	text-align: center;
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--color-light);
	cursor: pointer;
	position: relative;
	background: #AAA;
}

@media screen and (min-width:834px) {
	.tabBox .tabArea .one_tab {
		font-size: 1.8rem;
		width: 40%;
		max-width: 280px;
		/* padding: .5em 0; */
	}
}

.tabBox .tabArea .one_tab.select {
	color: var(--color-light);
	background-color: var(--color-palette);
}

.tabBox .tabArea .one_tab.select::before {
	content: "";
	display: block;
	position: absolute;
	background-image: url('../img/arrow-w.webp');
	background-size: 100%;
	width: 8px;
	height: 12px;
	top: 0;
	bottom: 0;
	left: 8px;
	margin: auto;
	background-repeat: no-repeat;
	z-index: 150;
}

@media screen and (min-width:834px) {
	.tabBox .tabArea .one_tab.select::before {
		top: 3px;
		width: 10px;
		height: 16px;
		left: 20px;
	}
}

.tabBox .tabArea .one_tab:hover {
	opacity: 0.7;
	text-decoration: none;
}

.tabBox .tabArea .one_tab .tab_inner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 45px;
	transition-duration: 0.3s;
}

@media screen and (min-width:834px) {
	.tabBox .tabArea .one_tab .tab_inner {
		height: 60px;
	}
}

.tabBox .tabArea .one_tab .tab_inner::before {
	content: "";
	display: block;
	position: absolute;
	background-image: url('../img/arrow-w.webp');
	background-size: 100%;
	width: 8px;
	height: 12px;
	top: 0;
	bottom: 0;
	left: 8px;
	margin: auto;
	background-repeat: no-repeat;
}

@media screen and (min-width:834px) {
	.tabBox .tabArea .one_tab .tab_inner::before {
		top: 3px;
		width: 10px;
		height: 16px;
		left: 20px;
	}
}

.tabBox .tabArea .one_tab:nth-child(1) .tab_inner {}

.tabBox .tabArea .one_tab:nth-child(2) .tab_inner {}

.tabBox .tabArea .one_tab:nth-child(3) .tab_inner {}


.tabBox .tabArea .one_tab.select .tab_inner {
	height: 45px;
}

@media screen and (min-width:834px) {
	.tabBox .tabArea .one_tab.select .tab_inner {
		height: 60px;
	}
}

.tabBox .tabArea.bottom {
	align-items: flex-start;
}

.contents .tab_main {
	display: none;
	padding: 2em 0;
	text-align: center;
	transition-duration: 0.6s;
}

.tab_main.is_show {
	display: block;
}

.tab_main:nth-child(1).is_show {}

.tab_main:nth-child(2).is_show {}

.tab_main:nth-child(3).is_show {}


.food-category{
	color: var(--color-palette);
	font-size: clamp(1.6rem, 1.177rem + 1.803vw, 2.8rem);
	line-height: 1;
	padding-bottom: .5em;
	margin-bottom: 1em;
	border-bottom: 2px solid var(--color-palette);
}
.food-category span{
	display: block;
		font-family: var(--font-en);
	font-size: clamp(3rem, 2.014rem + 4.207vw, 5.8rem);
	text-transform: capitalize;
}

.food-container{
	display: grid;
	gap:20px;
}
@media (min-width:834px){
.food-container{
	grid-template-columns: repeat(2, 1fr);
	column-gap: 20px;
	row-gap: 40px;
}
}

.food-inner{
	display: grid;
	grid-template-rows: subgrid;
grid-row: span 4;
	gap:10px
}

#palette .item-name{
	color: var(--color-palette);
}
#kokiden .item-name{
	color: var(--color-kokiden);
}
#musashino .item-name{
	color: var(--color-musashino);
}

#palette .item-chara  {
	background: var(--color-palette);
}
#kokiden .item-chara {
	background: var(--color-kokiden);
}
#musashino .item-chara {
	background: var(--color-musashino);
}


.drink-image{
	position: relative;
}

.drink-chara-l{
	position: absolute;
	left: 0;
	bottom: 10px;
}
.drink-chara-r{
	position: absolute;
	right: 0;
	bottom: 10px;
}
.drink-chara-l img,.drink-chara-r img{
	width:clamp(100px, 85.915px + 3.756vw, 140px);
	height: auto;
}




/*版権表記-------------------------------------*/
#publisher {
	background:var(--gradient-bk-radial);
	color: var(--color-light);
	padding: 2em 0;
}

#publisher img {
	width: 80vw;
	max-width: 500px;
}


.publisher-site {
	font-size: clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem);
	margin: 2em 0;
}

.publisher-site a {
	color: var(--color-main2);

}


.publisher-name {
	font-size: clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem);
}




/*footer-------------------------------------*/
footer {
	font-family: var(--font-serif);
	color: var(--color-light);
	padding: 2em .5em;
	margin: 0 auto;
	text-align: center;
	background: var(--color-ssp);
	border-top: 1px solid var(--color-light);
}

.hotel-name {
	text-align: center;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.4;
}

@media (min-width:834px) {
	.hotel-name {
		font-size: 2.2rem;
	}
}

.sns-nameE {
	text-align: center;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.4;
}

@media (min-width:834px) {
	.sns-nameE {
		font-size: 3rem;
	}
}

.sns-nameJ {
	text-align: center;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.4;
}

@media (min-width:834px) {
	.sns-nameJ {
		font-size: 2.2rem;
	}
}

.sns-ico-set {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 20px auto 30px auto;
}


.sns-ico-set>li>span {
	color: var(--color-light);
	display: block;
	font-family: var(--font-gothic);
	line-height: 1.2;
	font-weight: 400;
	font-size: clamp(1.1rem, 1.065rem + 0.15vw, 1.2rem);
	margin-top: .5em;
}

@media (min-width:834px) {
	.sns-ico-set {
		gap: 30px;
	}
}

.sns-ico-set img {
	width: calc(100vw / 10);
	max-width: 40px;
	height: auto;
}

@media (min-width:834px) {
	.sns-ico-set img {
		width: 50px;
	}
}

.notes-foot {
	font-size: 1.3rem;
	line-height: 1.6;
	margin: 0 auto;
}

@media (min-width:834px) {
	.notes-foot {
		font-size: 1.4rem;
		max-width: 800px;
		text-align: center;
	}
}

.hotel-links {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin: 20px 0 20px 0;
}

@media (min-width:834px) {
	.hotel-links {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
}

.hotel-links a {
	display: inline-block;
	padding: 0 1em;
	color: var(--color-light);
	text-decoration: none;
	transition: .3s ease-in-out;
	margin: 5px 0;
}

@media (min-width:834px) {
	.hotel-links a:first-of-type {
		margin: 0;
		border-left: 1px solid var(--color-light);
		border-right: 1px solid var(--color-light);
	}
}

.hotel-links a:hover {
	color: var(--color-main2);
}

.copyright {
	text-align: center;
	font-size: 1.2rem;
}

@media (min-width:834px) {
	.copyright {
		font-size: 1.4rem;
	}
}


/* ヘッダーナビ-------------------------------------*/
.navmenu {
	background: var(--color-dark);
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	display: flex;
	justify-content: flex-end;
	gap: 30px;
	align-items: center;
	padding: 0 20px;
	z-index: 10000;
	/* box-shadow: 0px 10px 15px rgba(0,0,0, 0.3); */
	height: 60px;
}

@media (min-width:640px) {
	.navmenu {
		padding: 0 30px;
	}
}


@media (min-width:834px) {
	.navmenu {
		justify-content: space-between;
		gap: 0;
		padding: 0 50px;
		height: 70px;
	}
}

/* ナビゲーション */
.nav-links {
	display: flex;
	gap: 10px;
}

@media (min-width:834px) {
	.nav-links {
		gap: 50px;
	}
}

/* ナビゲーションリンク */
.nav-links> li a {
	color: var(--color-light);
	font-size: 2.6rem;
	margin-left: 1em;
	font-family: var(--font-en);
	transition: .3s ease;
}

@media (min-width:834px) {
	.nav-links>li a {
		font-size: 2.6rem;
		margin-left: 0;
	}
}

.nav-links a:hover {
	text-decoration: none;
	color: var(--color-link);
}

/* サブメニュー（834px以上はプルダウン） */
.has-submenu {
	position: relative;
}

/* 「>」マークのスタイル（834px以上のみ表示） */
.has-submenu .arrow::before {
	content: "\e313";
	font-family: "Material Icons";
	color: var(--color-light);
	margin-left: 0;
}

/* 800px以上でのプルダウンメニュー */
@media (min-width:834px) {
	.submenu {
		display: none;
		position: absolute;
		background: var(--color-dark);
		top: 40px;
		left: -50px;
		width: 100vw;
		/* box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); */
		font-size: 1.6rem;
		transition: .3s ease;
	}

	/* ホバー時にプルダウンを表示 */
	.has-submenu:hover .submenu {
		display: block;
	}

	.submenu li {
		padding: 0;
		border-top: 1px solid var(--color-light);
	}

	.submenu li:first-child {
		border-top: none;
	}

	.submenu li a {
		color: var(--color-light);
		display: block;
		line-height: 1.4;
		padding: 15px 30px;
		font-family: var(--font-main);
		font-size: 1.8rem;
	}

	.submenu li a:hover {
		text-decoration: none;
		color: var(--color-link);
	}

	.submenu li a span {
		font-weight: 600;
		font-size: 80%;
		margin-left: 10px;
	}

	.nav-links>li a:hover {
		text-decoration: none;
		opacity: 1;
	}
}


/* 834px以下では「>」マークを非表示  ここはMax-width*/
@media (max-width:834px) {
	.primary-menu {
		padding: 0 0 10px 0;
}

	.has-submenu {}

	.has-submenu .arrow::before {
		content: "";
	}

	.submenu {
		/* サブメニューを全て表示 */
		/* display: block; */
		/* position: static; */
		/* text-align: left; */
		width: 100vw;
	}

	.submenu li {
		border-top: 1px dotted var(--color-light);
		padding: 8px 0;
		/* text-indent: .5em; */
		margin-top: 5px;
	}


	.submenu li:last-child {
		margin-bottom: 10px;
		border-bottom: 1px dotted var(--color-light);
	}

	.submenu li a {
		display: block;
		margin-left: 1.5em;
		font-family: var(--font-serif);
		font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem); 
	}

	.submenu a span {
		font-weight: 600;
		font-size: 80%;
		margin-left: 0.5em;
	}

	.submenu li a:hover {
		text-decoration: none;
		color: var(--color-link);
		opacity: 1;
	}
}

/* 予約ボタン */
.reserve-btn a {
	color: var(--color-light);
	padding: 8px 15px;
	font-size: 1.6rem;
	line-height: 1.1;
	display: block;
	border: 1px solid var(--color-light);
	max-height: 42px;
	text-align: center;
	transition: .5s;
}

.reserve-btn a:hover {
	text-decoration: none;
	color: var(--color-light);
	transform: scale(1.1);

}

@media (min-width:834px) {
	.reserve-btn a {
		max-height: 50px;
	}
}


/* ハンバーガーメニュー */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	background: none;
}

.nav-toggle span {
	width: 34px;
	height: 4px;
	background: var(--color-light);
	transition: all 0.3s ease;
}

/* 834px以下の全画面メニュー */
@media (max-width:834px) {
	.nav-links {
		position: fixed;
		top: 0;
		left: -100vw;
		/* 完全に画面外に隠す */
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		flex-direction: column;
		align-items: flex-start;
		/* 上揃え */
		justify-content: flex-start;
		/* 上揃え */
		padding: 3em 0 0 0;
		/* 上部の余白 */
		transition: left 0.3s ease-in-out;
	}

	.nav-links.active {
		left: 0;
	}

	.nav-toggle {
		display: flex;
	}

	/* ハンバーガーメニュー開閉時のアニメーション */
	.nav-toggle.open span:nth-child(1) {
		transform: rotate(45deg) translateY(12px);
	}

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

	.nav-toggle.open span:nth-child(3) {
		transform: rotate(-45deg) translateY(-12px);
	}
}

/* オーバーレイ時に背後を固定 */
body.no-scroll {
	overflow: hidden;
}


/*IKEPRI25紹介-------------------------------------*/
#sec-ikepri25 {
	background: var(--color-ssp);
	color: var(--color-light);
}

#sec-ikepri25 .sec-container {
	margin-inline: auto;
	padding: 30px 20px;
	text-align: center;
}

@media (min-width:834px) {
	#sec-ikepri25 .sec-container {
		padding: 80px 0;
		max-width: 1000px;
	}
}

.ttl-about-ikepri {
	margin: 1em 0 3em 0;
}

.ttl-about-ikepri img {
	width: 80vw;
	max-width: 500px;
}

.ikepri-description {
	font-size: 1.6rem;
	font-family: var(--font-serif);
	font-weight: 600;
}

.greeting-haruki {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 2em auto 1em auto;
}

@media screen and (min-width:834px) {
	.greeting-haruki {
		flex-direction: row-reverse;
		max-width: 780px;
	}
}

.haruki-img {
	margin: 0 auto;
	align-self: center;
}

.haruki-img img {
	width: 40vw;
}

@media screen and (min-width:834px) {
	.haruki-img img {
		height: 280px;
		width: auto;
	}
}

.haruki-text {
	padding: 1em;
	color: var(--color-dark);
	background-color: #E6E5DC;
	border-radius: 1em;
	font-family: var(--font-serif);
}

@media screen and (min-width:834px) {
	.haruki-text {
		position: relative;
		display: inline-block;
		margin-right: 30px;
		padding: 1.5em 2em;
		border-radius: 1em;
		background-color: #f5f7cb;
		text-align: justify;
		font-size: 1.6rem;
		line-height: 1.5;
	}

	.haruki-text::after {
		content: "";
		position: absolute;
		top: 40%;
		right: 0;
		border-style: solid;
		border-width: 10px 0 10px 30px;
		border-color: transparent transparent transparent #f5f7cb;
		translate: 100% -50%;
		transform: skew(0, -15deg);
		transform-origin: left;
	}
}

.ttl-haruki {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 1em;
}

.ttl-haruki span {
	font-size: 80%;
}

.txt-haruki {
	font-weight: 600;
	text-align: justify;
}

.twitter-area {
	margin: 2em auto 1em auto;
	width: 90vw;
}

@media screen and (min-width:834px) {
	.twitter-area {
		max-width: 680px;
	}
}

.ttl-twitter {
	width: 40vw;
	margin: 1em auto;
	display: block;
}

@media screen and (min-width:600px) {
	.ttl-twitter {
		max-width: 300px;
	}
}

.timeline {
	margin: 0 auto 2em auto;
	width: 100%;
}

@media screen and (min-width:600px) {
	.timeline {
		width: 70vw;
	}
}

@media screen and (min-width:834px) {
	.timeline {
		max-width: 600px;
	}
}

.ttl-loungeuse-note {
	font-family: var(--font-serif);
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	color: var(--color-light);
	margin: 3em 0 0 0;
	line-height: 1.1;
}