@charset "UTF-8";

/*共通関連-------------------------------------*/
:root {
	/* color */
	--color-main1: #D82C45;
	--color-main2: #FF8E5F;
	--color-main3: #85E8FF;
	--color-main4: #E1E1E1;
	--color-main5: #910782;
	--color-main6: #FFFF00;
	--color-palette: #C7000B;
	--color-kokiden: #910782;
	--color-musashino: #5BB431;
	--color-dark: #000000;
	--color-d-gray: #2A2A2A;
	--color-l-gray: #EBEBEB;
	--color-light: #FFF;
	--color-link: #85E8FF;
	--color-shinji: #0F83C6;
	--color-kaoru: #384983;
	--color-rei: #67d0f3;/*#308990;*/
	--color-aska: #C21927;
	--color-mari: #D06D98;
	--color-nerv: #C7000B;
	--color-ikepri: #847F4F;

	/* fonts */
	--font-main: "Noto Serif JP", sans-serif;
	--font-notes: "Noto Sans JP", sans-serif;
	--font-gothic: "Noto Sans JP", sans-serif;
	--font-serif: "Noto Serif JP", serif;
	--font-en: "Jost", sans-serif;

	/*gradient*/
	--gradient1: linear-gradient(90deg, rgba(216, 44, 69, 1), rgba(255, 142, 95, 1) 30%, rgba(133, 232, 255, 1) 70%, rgba(225, 225, 225, 1));
}



html {
	scroll-padding-top: 60px;
	/*navmenu heightと同じに*/
}

@media (min-width:834px) {
	html {
		scroll-padding-top: 70px;
		/*navmenu heightと同じに*/
	}
}


body {
	font-family: var(--font-main);
	font-weight: normal;
	font-style: normal;
	line-height: inherit;
	color: var(--color-light);
	font-size: 1.8rem;
	background-color: var(--color-dark);
	/* font-weight: 500; */
}

/*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  クラスはspinnerで*/
.spinner {
	width: 50px;
	aspect-ratio: 1;
	--_c: no-repeat radial-gradient(farthest-side, #85E8FF 92%, #0000);
	background:
		var(--_c) top,
		var(--_c) left,
		var(--_c) right,
		var(--_c) bottom;
	background-size: 12px 12px;
	animation: l7 1s infinite;
}


@keyframes l7 {
	to {
		transform: rotate(.5turn)
	}
}

/*Loading ここまで*/


#container {
	margin-inline: auto;
}

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

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

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

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

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

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

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

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

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

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

ul.notes-en 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: left;
}

@media (min-width:834px) {

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

#page-top img {
	position: fixed;
	width: 40px;
	bottom: 20px;
	right: 12px;
	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 12px rgba(255, 255, 255, .5);
	margin-bottom: 8px;
}

.img-filter-shadow {
	filter: drop-shadow(5px 5px 8px rgba(255, 255, 255, .5));
}

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

/*レイアウト中クレジット*/
.name-credit-b {
	color: var(--color-dark);
}

.name-credit-w {
	color: var(--color-light);
}

.name-credit-b::before,
.name-credit-w::before {
	content: "©カラー";
	font-family: var(--font-gothic);
	font-size: clamp(0.9rem, 0.827rem + 0.36vw, 1.1rem);
}


/*separetor-------------------------------------*/
.separator {
	height: 35px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

@media (min-width:640px) {
	.separator {
		height: 50px;
	}
}

@media (min-width:834px) {
	.separator {
		height: 75px;
	}
}

.separete1 {
	background-image: url(../img/separete1.webp);
}

.separete2 {
	background-image: url(../img/separete2.webp);
}

.separete3 {
	background-image: url(../img/separete3.webp);
}

.separete4 {
	background-image: url(../img/separete4.webp);
}

.separete5 {
	background-image: url(../img/separete5.webp);
}

.separete6 {
	background-image: url(../img/separete6.webp);
}

.condensed75 {
	transform: scale(0.75, 1);
	transform-origin: 0 0;
	width: 133.333%;
	/*1 / 0.75*/
}

.condensed50 {
	transform: scale(0.5, 1);
	transform-origin: 0 0;
	width: 200%;
	/*1 / 0.5*/
}


/* sec-KV-------------------------------------*/
.img-kv img {
	margin: 60px auto 0 auto;
	/*メニュー高さ分*/
	width: 100vw;
	object-fit: contain;

}

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

.main-catch {
	margin-inline: auto;
	padding: 40px 15px;
	max-width: 720px;
}

@media (min-width:834px) {
	.main-catch {
		padding: 80px 0;
	}
}

@keyframes blinking {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.blink {
	animation: blinking .7s ease-in-out infinite alternate;
}

.colabo-logo {
	margin-inline: auto;
	padding: 40px 60px 80px 60px;
}

@media (min-width:834px) {
	.colabo-logo {
		max-width: 800px;
		padding: 40px 0 100px 0;

	}
}

/*sec01-------------------------------------*/
#sec01 {
	background-image: url(../img/bg_sub1.webp);
	background-repeat: repeat-y;
	background-size: contain;
	background-position: center 70px;
}

@media (min-width:834px) {
	#sec01 {
		background-size: cover;
	}
}


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

@media (min-width:834px) {
	.sec1-container {
		padding: 80px 30px;
		max-width: 1060px;
	}
}

.fs-period {
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.1;
	margin-top: 20px;
}

@media (min-width:834px) {
	.fs-period {
		font-size: 5rem;
		margin-top: 40px;
	}
}

.nyukai {
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid var(--color-light);
	padding: 25px 10px;
	margin: 40px auto;
}

@media (min-width:834px) {
	.nyukai {
		max-width: 700px;
		padding: 40px 20px;

	}
}

.btn-nyukai a {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.8rem;
	text-align: center;
	text-decoration: none;
	width: 70vw;
	max-width: 280px;
	margin: 0 auto;
	padding: 1em 0;
	background: var(--color-ikepri);
	color: var(--color-light);
	border-radius: 100vmax;
	transition: 0.5s;
	font-weight: 600;
}

@media screen and (min-width:834px) {
	.btn-nyukai a {
		max-width: 320px;
		padding: 1.2em 0;
	}
}

.btn-nyukai a:hover {
	outline-offset: 0px;
	transform: scale(1.1);
}

/*sec02-------------------------------------*/
#sec02 {
	background: var(--color-l-gray);
}

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

@media (min-width:834px) {
	.sec2-container {
		padding: 80px 30px;
		max-width: 1060px;
	}
}

.hall-area1 {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 10px;
	margin-bottom: 10px;
}

.hall-area2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;


}

@media (min-width:640px) {
	.hall-area1 {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-bottom: 20px;
	}

	.hall-area2 {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;


	}
}


/*sec03-------------------------------------*/
#sec03 {}

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

@media (min-width:834px) {
	.sec3-container {
		padding: 80px 30px;
		max-width: 1060px;
	}
}

.ttl-triangle img {
	width: 70vw;
}

@media (min-width:640px) {
	.ttl-triangle img {
		max-width: 300px;
	}
}

@media (min-width:834px) {
	.ttl-triangle img {
		max-width: 420px;
	}
}

.btn-room-area {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}
@media (min-width:640px){
	.btn-room-area {
	margin-bottom: 80px;
}
}



.btn-room-area img {
	width: 80vw;
}

@media (min-width:640px) {
	.btn-room-area {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-inline: auto;
		justify-content: center
	}

	.btn-room-area img {
		max-width: 320px;
	}
}

@media (min-width:834px) {
	.btn-room-area {
		gap: 40px;
		max-width: 840px;
	}

	.btn-room-area img {
		max-width: 400px;
	}
}

.room-detail {
	background-image: url(../img/bg_line.webp);
	background-repeat: repeat;
	margin: 0 calc(50% - 50vw);
	padding: 0 30px 30px 30px;
}

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

}

.room-visual {
	border-top: 8px solid;
	text-align: center;
	margin: 0 calc(50% - 50vw);
}

#room1 .room-visual,
#room1 .room-photos img{
	border-color: var(--color-main3);
}

#room2 .room-visual,
#room2 .room-photos img{
	border-color: var(--color-main1);
}

.room-visual img {
	object-fit: fill;
}

.room-photos {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}
.room-photos img{
	border: 3px solid;
}
@media (min-width:640px){
.room-photos img{
	border: 5px solid;
}
}



.btn_reserve_area {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px;
	margin: 40px 0;

}

.btn_reserve_area img {
	width: 75vw;
}

@media (min-width:640px) {
	.btn_reserve_area {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-inline: auto;
		justify-content: center
	}

	.btn_reserve_area img {
		max-width: 320px;
	}
}

@media (min-width:834px) {
	.btn_reserve_area {
		gap: 40px;
		max-width: 840px;
	}

	.btn_reserve_area img {
		max-width: 400px;
	}
}



.amenity-area {
	margin: 0 calc(50% - 50vw);
	padding: 30px;
	border-top: 8px solid;
	text-align: center;
	border-image: var(--gradient1) 1;
}

@media (min-width:640px) {
	.amenity-area {
		padding: 80px 40px;
	}
}

.img-amenity {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px;
}

@media (min-width:640px) {
	.img-amenity {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		max-width: 1000px;
		margin-inline: auto;
	}
}


/*sec04-------------------------------------*/
#sec04 {
	background: var(--color-l-gray);
	background-image: url(../img/bg_sub2.webp);
	background-repeat: no-repeat;
	background-position: left 30px;
	background-size: 460px;
}

@media (min-width:640px) {
	#sec04 {
		background-position: left 60px;
		background-size: contain;
	}
}

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

@media (min-width:834px) {
	.sec4-container {
		padding: 80px 30px;
		max-width: 1060px;
	}
}

.lounge-use-time {
	color: var(--color-dark);
	font-weight: 800;
	font-size: clamp(2rem, 1.927rem + 0.36vw, 2.2rem);
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

@media (min-width:834px) {
	.lounge-use-time {
		flex-direction: row;
		margin: 0 auto 10px auto;
		width: fit-content;
	}

	.lounge-use-time p:first-child {
		margin-right: 1em;
	}
}

/*スライダー*/
.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;
}

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

.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-main5);
	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-main5);

}

.slick-dots li.slick-active button:before {
	opacity: 1;
	color: var(--color-main5);
}


.toy-area {
	background: var(--color-dark);
	padding: 40px 30px;
	outline: 2px solid var(--color-light);
	outline-offset: -12px;
	margin: 30px auto;
}

@media (min-width:640px) {
	.toy-area {
		padding: 80px;
		max-width: 1000px;
	}
}

.ttl-toy {
	font-size: clamp(2.2rem, 2.127rem + 0.36vw, 2.4rem);
	font-weight: 700;
	border-top: 5px solid;
	border-image: var(--gradient1) 1;
	margin: 50px auto 10px auto;
	padding-top: 20px;
	line-height: 1.3;
}

@media (min-width:640px) {
	.ttl-toy {
		padding-top: 40px;

	}
}

.toy-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	gap: 20px;
}

@media (min-width:640px) {

	.toy-images {
		grid-template-columns: repeat(5, 1fr);
	}
}

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

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

@media (min-width:834px) {
	.sec5-container {
		padding: 80px 30px;
		max-width: 1060px;
	}
}

.notes-colabo {
	font-size: clamp(1.8rem, 1.727rem + 0.36vw, 2rem);
	color: var(--color-main6);
	font-weight: 700;
}

/*予約方法一覧//////////////////*/
.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: #2A2A2A;
	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: #D9D9D9;
	border: solid 1px var(--color-light);
	vertical-align: middle;
}

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

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

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

.food-area {
	position: relative;
	background: var(--color-l-gray);
	padding: 40px 30px;
	color: var(--color-dark);
	margin: 80px auto 40px auto;
}

@media (min-width:640px) {
	.food-area {
		padding: 80px 60px;
		margin: 120px auto 40px auto;
	}
}

.frame-start {
	position: absolute;
	top: -28px;
	left: 15px;
}

.frame-start img {
	width: auto;
	height: 20px;
}

@media (min-width:640px) {
	.frame-start {
		top: -30px;
		left: 30px;
	}

	.frame-start img {
		width: auto;
		height: 30px;
	}
}

@media (min-width:834px) {
	.frame-start {
		top: -40px;
		left: 80px;
	}

	.frame-start img {
		width: auto;
		height: 40px;
	}
}

.ttl-shopname {
	font-size: clamp(2.6rem, 2.527rem + 0.36vw, 2.8rem);
	font-weight: 700;
}

#palette {
	outline: 5px solid var(--color-palette);
	outline-offset: -15px;
}

#palette .ttl-shopname {
	color: var(--color-palette);
}

#kokiden {
	outline: 5px solid var(--color-kokiden);
	outline-offset: -15px;
}

#kokiden .ttl-shopname {
	color: var(--color-kokiden);
}

#musashino {
	outline: 5px solid var(--color-musashino);
	outline-offset: -15px;
}

#musashino .ttl-shopname {
	color: var(--color-musashino);
}


/* メニュー詳細 */
.menu-detail-area {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px;
	margin: auto;
	justify-content: center;
	max-width: 600px;
}


.menu-detail-area-drink {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 30px auto 0 auto;
	justify-content: center;
}

@media (min-width:640px) {
	.menu-detail-area-drink {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}
}

.menu-card {
	display: grid;
	gap: 5px;
	padding-bottom: 1em;
	text-align: center;
	line-height: 1.4;
	grid-template-rows: subgrid;
	grid-row: span 3;
}

.menu-image-container-drink {
	border: 3px solid;
}

@media (min-width:640px) {
	.menu-image-container-drink {
		border: 5px solid;
	}
}

.menu-image-container-drink.shinji {
	border-color: var(--color-shinji);
}

.menu-image-container-drink.kaoru {
	border-color: var(--color-kaoru);
}

.menu-image-container-drink.rei {
	border-color: var(--color-rei);
}

.menu-image-container-drink.aska {
	border-color: var(--color-aska);
}

.menu-image-container-drink.mari {
	border-color: var(--color-mari);
}

.menu-name {
	font-size: clamp(2.2rem, 2.127rem + 0.36vw, 2.4rem);
	transform: scale(0.75, 1);
	transform-origin: 0 0;
	width: 133.333%;
	/*1 / 0.75*/
	font-weight: 800;
}

#palette .menu-name {
	color: var(--color-palette);
}

#kokiden .menu-name {
	color: var(--color-kokiden);
}

#musashino .menu-name {
	color: var(--color-musashino);
}

#palette .menu-detail-area-drink .menu-name {
	line-height: 1.2;
	font-size: clamp(2rem, 1.927rem + 0.36vw, 2.2rem);
}


#palette .menu-name.shinji {
	color: var(--color-shinji);
}

#palette .menu-name.kaoru {
	color: var(--color-kaoru);
}

#palette .menu-name.rei {
	color: var(--color-rei);
}

#palette .menu-name.aska {
	color: var(--color-aska);
}

#palette .menu-name.mari {
	color: var(--color-mari);
}

.menu-price {
	font-size: clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem);
	font-weight: 800;
}

.menu-ingredient {
	font-family: var(--font-gothic);
	font-size: clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem);
	text-align: center;
}

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

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


.tabBox .tabArea .one_tab {
	width: 32.5%;
	display: block;
	text-decoration: none;
	transition-duration: 0.6s;
	text-align: center;
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--color-light);
	cursor: pointer;
	position: relative;
	background: var(--color-d-gray);
	border-radius: 100vmax;
}

@media screen and (min-width:834px) {
	.tabBox .tabArea .one_tab {
		font-size: 1.8rem;
		width: 30%;
		max-width: 280px;
	}
}

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

/* @media screen and (min-width:834px) {
	.tabBox .bottom {
		display: none;
	}
} */

.food-giveaway {
	width: 80vw;
	max-width: 600px;
	margin-inline: auto;
}


/*sec06-------------------------------------*/
#sec06 {
	background-image: url(../img/bg_sub1.webp);
	background-repeat: repeat-y;
	background-size: contain;
	background-position: center top;
}

@media (min-width:834px) {
	#sec06 {
		background-size: cover;
	}

}

.sec6-container {
	margin-inline: auto;
	padding: 30px 0;
	text-align: center;
}

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

.end-logo {
	width: 60vw;
	max-width: 400px;
}

/*sec07-------------------------------------*/
#sec07 {
	background: var(--color-ikepri);
}

.sec7-container {
	margin-inline: auto;
	padding: 30px 20px;
	text-align: center;
	border-bottom: 1px solid var(--color-light);
}

@media (min-width:834px) {
	.sec7-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%;
	/* border:2px solid var(--color-light); */
}

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

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

.timeline-notes {
	color: var(--color-main4);
	text-decoration: underline;
}

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


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

.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: 20px;
	justify-content: center;
	margin: 20px auto 30px auto;
}

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

.sns-ico-set img {
	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 2em;
	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-main6);
}

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

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

/* ヘッダーナビ-------------------------------------*/
.navmenu {
	background-image: linear-gradient(90deg, rgba(216, 44, 69, 1), rgba(255, 142, 95, 1) 30%, rgba(133, 232, 255, 1) 70%, rgba(225, 225, 225, 1));
	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.2rem;
	margin-left: 1.6em;
	font-family: var(--font-en);
}

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

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

/* サブメニュー（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-color: var(--color-dark);
		top: 30px;
		left: -50px;
		width: 100vw;
		/* box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); */
		font-size: 1.6rem;
	}

	/* ホバー時にプルダウンを表示 */
	.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);
	}

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

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

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

/* 834px以下では「>」マークを非表示 */
@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 solid var(--color-light);
		padding: 10px 0;
		/* text-indent: .5em; */
		margin-top: 10px;
	}

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

	}

	.submenu li a {
		display: block;
		margin-left: 1.5em;
		font-family: var(--font-serif);
	}

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

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

	}
}

/* 予約ボタン */
.reserve-btn a {
	color: var(--color-light);
	padding: 5px 20px;
	font-size: 1.6rem;
	display: block;
	transition: 0.5s;
	background: var(--color-dark);
	max-height: 42px;
	text-decoration: none;
	font-weight: 700;
}

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