@charset "UTF-8";

/*root関連-------------------------------------*/
:root {
	/* color */
	--color-beige1: #C29E5C;
	--color-beige2: #DCC592;
	--color-beige3: #E9DBBA;
	--color-pink1: #F6A8B4;
	--color-pink2: #F4BBBC;
	--color-purple1: #A887C5;
	--color-purple2: #D3ADD8;
	--color-yellow: #F6F1AF;

	--color-dark: #000;
	--color-light: #FFF;
	--color-link: #9ADA10;
	--color-ssp: #847F4F;

	/* 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-en: "Local Noto Serif JP", "Noto Serif JP", serif;

	/*gradient*/
	--gradient-gold: linear-gradient(135deg, #f0c131, #f7e7a4 25%, #bc8e31 60%, #e7d085 85%, #f8eba2);
	--gradient-gold2: linear-gradient(90deg, #f0c131, #f7e7a4 25%, #bc8e31 60%, #e7d085 85%, #f8eba2);
		--gradient-gold3: linear-gradient(90deg, #f7e7a4 25%, #d5bd77 60%, #e7d085 85%, #f8eba2);

	--gradient-wh-0: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0));
	--gradient-wh-20: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0.2));
	--gradient-wh-pink-20: linear-gradient(180deg, rgb(255, 255, 255) 40%, rgb(251, 213, 219) 85%);
	--gradient-yellow-0: linear-gradient(180deg, rgb(246, 241, 175) 40%, rgba(246, 241, 175, 0));
	--gradient-restaurant: linear-gradient(180deg, rgb(255, 255, 255) 25%, rgb(251, 213, 219) 50%, rgb(245, 160, 173) 70%, rgb(251, 213, 219) 85%, rgb(255, 255, 255));
	--gradient-room1: linear-gradient(180deg, rgb(255, 255, 255) 35%, rgb(244, 194, 193) 60%);
	--gradient-room2: linear-gradient(180deg, rgb(255, 255, 255) 35%, rgb(223, 185, 228) 60%);
}

/*共通要素*/
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: 600;
	font-style: normal;
	line-height: inherit;
	color: var(--color-dark);
	font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem);
	background: var(--color-main2);
}

/*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: 40px;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(farthest-side, #A887C5 94%, #0000),
		radial-gradient(farthest-side, #FFFFFF 94%, #0000),
		#A887C5;
	background-position: center;
	background-repeat: no-repeat;
	animation: l4 1.5s infinite;
}

@keyframes l4 {
	0% {
		background-size: 0 0, 0 0
	}

	30%,
	50% {
		background-size: 0 0, 120% 120%
	}

	80%,
	100% {
		background-size: 120% 120%, 120% 120%
	}
}
/*Loading ここまで*/


#container {
	margin-inline: auto;
}

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

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

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

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

.fc-hanten2 {
	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; */
}

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

}

a.fc-link-change{
	color: #ff0026;
}
a:hover.fc-link-change{
	color: var(--color-dark);
	text-decoration: underline;
}


.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: 720px;
	}
}

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

@media (min-width:834px) {

	ul.notes 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 3px rgba(0, 0, 0, 0.4));
}

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

.wide-max300,
.wide-max400,
.wide-max450,
.wide-max500,
.wide-max600,
.wide-max700,
.wide-max800,
.wide-max900,
.wide-max1000 {
	margin-inline: auto;
}

.wide-max300 {
	max-width: 300px;
}

.wide-max400 {
	max-width: 400px;
}

.wide-max450 {
	max-width: 450px;
}

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

@media (min-width:640px) {
.height-max-img{
	width: auto;
	max-height:360px;
}
}

.ttl-adjust-sp{
	width: 70vw;
	max-width: 500px;
	margin-inline: auto;
}



/*入会関連-------------------------------------*/
.nyukai {
	background: var(--color-light);
	border: 2px solid var(--color-ssp);
	padding: 1em;
	margin: 40px auto 0 auto;
	font-family: var(--font-main);
	margin: 2em auto;
	color: var(--color-dark);
}

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

	}
}

.btn-nyukai a {
	display: block;
	font-family: var(--font-main);
	font-size: clamp(1.4rem, 1.330rem + 0.3vw, 1.6rem);
	text-align: center;
	text-decoration: none;
	/* width: 60vw; */
	max-width: 280px;
	margin: 0 auto;
	padding: 1em 0;
	background: var(--color-ssp);
	color: var(--color-light);
	border-radius: 100vmax;
	transition: 0.5s;
	font-weight: 600;
}

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

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

/* KV-------------------------------------*/
.img-kv {
	margin: 60px 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 15px;
	text-align: center;
}

@media (min-width:834px) {
	.sec-container {
		padding: 0 20px;
	}
}

/*sec01-------------------------------------*/
#sec01 {
	margin: 0 auto;
	padding: 40px 0 0;
	background: url(../img/bg_sakura.webp) no-repeat top center / contain, var(--gradient-restaurant);
}

@media (min-width:834px) {
	#sec01 {
		padding: 80px 0 0;
	}
}

/* 左右リボンテキスト */
.ribbon-bk,
.ribbon-wh {
	display: grid;
	grid-template-columns: clamp(48px, 3vw, 60px) auto clamp(48px, 3vw, 60px);
	align-items: stretch;
	width: 100%;
	max-width: 1000px;
	margin: 2em auto;
}

.ribbon-pp {
	display: grid;
	grid-template-columns: clamp(48px, 3vw, 60px) auto clamp(48px, 3vw, 60px);
	align-items: stretch;
	width: 100%;
	max-width: 800px;
	margin: 2em auto 0.5em;
}


.ribbon-wh-long {
	display: grid;
	grid-template-columns: clamp(48px, 3vw, 60px) auto clamp(48px, 3vw, 60px);
	align-items: stretch;
	width: 100%;
	max-width: 800px;
	margin: 2em auto;
}



@media (min-width:640px) {

	.ribbon-bk,
	.ribbon-wh {
		display: inline-grid;
		width: auto;
	}
}

.ribbon-bk .ribbon-side,
.ribbon-wh .ribbon-side,
.ribbon-pp .ribbon-side,
.ribbon-wh-long .ribbon-side {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

.ribbon-bk .ribbon-side:first-child {
	background-image: url('../img/ttl_side_bk_l.webp');
}

.ribbon-bk .ribbon-side:last-child {
	background-image: url('../img/ttl_side_bk_r.webp');
}

.ribbon-wh .ribbon-side:first-child,
.ribbon-wh-long .ribbon-side:first-child {
	background-image: url('../img/ttl_side_wh_l.webp');
}

.ribbon-wh .ribbon-side:last-child,
.ribbon-wh-long .ribbon-side:last-child {
	background-image: url('../img/ttl_side_wh_r.webp');
}

.ribbon-pp .ribbon-side:first-child {
	background-image: url('../img/ttl_side_pp_l.webp');
}

.ribbon-pp .ribbon-side:last-child {
	background-image: url('../img/ttl_side_pp_r.webp');
}

.ribbon-bk .ribbon-text,
.ribbon-wh .ribbon-text,
.ribbon-pp .ribbon-text,
.ribbon-wh-long .ribbon-text {
	display: grid;
	place-items: center;
	padding: 0.2em 0.8em 0.4em;
	text-align: center;
	line-height: 1.2;
	font-size: clamp(1.6rem, 0.966rem + 2.704vw, 3.4rem);
	font-weight: 700;
}

.ribbon-bk .ribbon-text {
	background: var(--color-dark);
	color: var(--color-light);
}

.ribbon-wh .ribbon-text,
.ribbon-wh-long .ribbon-text {
	background: var(--color-light);
	color: var(--color-beige1);
}

.ribbon-pp .ribbon-text {
	background: var(--color-purple2);
	color: var(--color-light);
}


#venue-area {
	background: var(--color-light);
	border: 4px solid transparent;
	border-image: var(--gradient-gold) 1;
	padding: 0;
	margin: 2em auto 3em;
}

@media (min-width:834px) {
	#venue-area {
		border: 6px solid transparent;
	border-image: var(--gradient-gold) 1;
	}
}

.deco-lines{
	height: 3px;
	border-top : 3px solid; 
	border-image: var(--gradient-gold3) 1;
	display: block;
	margin-top: 6px;
}


.wrapper-ttl-venue {
	background: url(../img/bg_star.webp);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	padding: 0 15px;
	margin-top: 1em;
}
.grid-img-venue{
	padding: 0 15px;
}



@media (min-width:834px){
	.wrapper-ttl-venue {
	background-size: cover;
		padding: 0 40px;
}
	.grid-img-venue{
		padding: 0 40px;
}
}



.ttl-h2 {
	font-size: clamp(3rem, 2.577rem + 1.803vw, 4.2rem);
	font-weight: 700;
	letter-spacing: .4rem;
}


.logo-canvas {
	width: 60vw;
	max-width: 360px;
	margin: 20px 0 10px;
}

@media (min-width:640px) {
	.logo-canvas {
		margin: 40px 0 10px;
	}
}


.img-gold-border {
	border: 4px solid transparent;
	border-image: var(--gradient-gold);
	border-image-slice: 1;
}

#time-area {
	position: relative;
	width: 100%;
}


#time-area .time-area-sakura1 {
	position: absolute;
	top: -10px;
	left: -5px;
	width: 60px;
	object-fit: contain;
}

#time-area .time-area-sakura2 {
	position: absolute;
	bottom: -20px;
	right: -10px;
	width: 60px;
	object-fit: contain;
}

@media (min-width:834px){
#time-area .time-area-sakura1 {
	width: 120px;
}

#time-area .time-area-sakura2{
	width: 120px;
}
}


.btn-reserve a {
	display: block;
	font-size: 2.2rem;
	text-align: center;
	color: var(--color-yellow);
	text-decoration: none;
	width: clamp(280px, 209.577px + 18.779vw, 480px);
	margin: 2em auto;
	padding: .6em 0;
	background: var(--color-dark);
	border-radius: 100vmax;
	transition: 0.3s ease;
	font-weight: 600;
	border: 3px solid var(--color-yellow);
	filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.3));

}

@media (min-width:834px) {
	.btn-reserve a {
		max-width: 320px;
		padding: 1em 0;
	}
}

.btn-reserve a:hover {
	filter: none;
	transform: translate(3px, 3px);
}

/*タイムテーブル関連*/
.btn-timetable {
	width: 70vw;
	max-width: 320px;
	margin: .5em 0;
}

.box-timetable {
	display: none;
	overflow: hidden;
	max-height: 0;
	padding: 0.5em 0 1em;
	transition: max-height 0.5s ease;
}

.ttl-timetable {
	font-family: var(--font-en2);
	font-weight: 400;
	font-size: clamp(2.8rem, 2.727rem + 0.36vw, 3rem);
	color: var(--color-main1);
	line-height: 1;
	padding: .2em 0 0;
}

.ttl-sub-timetable {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
	background-image: var(--gradient1);
	color: var(--color-dark);
	padding: .3em 0;
	margin-bottom: .5em;
}

.box-open-hours {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 30px;
}

@media (min-width:961px) {
	.box-open-hours {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}
}

.time-number {
	font-weight: 600;
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(1, 1fr);
	font-size: 1.8rem;
	text-align: left;
	text-indent: calc(100vw / 8);
}

@media (min-width:640px) {
	.time-number {
		grid-template-columns: repeat(2, 1fr);
		font-size: 1.6rem;
		gap: 10px;
		text-indent: 0;
	}
}

@media (min-width:961px) {
	.time-number {
		font-size: 1.5rem;
	}
}

.time-number li {
	border-bottom: 1px dotted var(--color-dark);
}

#toggle-timetable {
	width: clamp(240px, 70%, 320px);
	aspect-ratio: 320 / 67;
	background: url("../img/btn_open.webp") no-repeat center center;
	background-size: contain;
	border: none;
	cursor: pointer;
	display: block;
	margin: .5em auto;
	transition: transform 0.3s ease;
}

#toggle-timetable:hover {
	transform: scale(1.08);
}

#toggle-timetable.btn-close {
	background-image: url("../img/btn_close.webp");
}

.wrapper-tokuten-gold-restaurant {
	background: var(--gradient-gold);
	border-radius: 50vw 50vw 0 0;
	padding: 3px;
}

.wrapper-tokuten-white-restaurant {
	background: var(--color-light);
	padding: 3px;
	border-radius: 50vw 50vw 0 0;
}

.wrapper-tokuten-white-inner-restaurant {
	background: var(--color-light);
	padding: 60px 15px 30px;
	border-radius: 50vw 50vw 0 0;
	text-align: center;
}

@media (min-width:834px) {
	.wrapper-tokuten-gold-restaurant {
		padding: 4px;
	}

	.wrapper-tokuten-white-restaurant {
		padding: 4px;
	}

	.wrapper-tokuten-white-inner-restaurant {
		padding: 6em 2em 4em;
	}
}






.wrapper-tokuten-gold {
	background: var(--gradient-gold);
	border-radius: 50vw 50vw 0 0;
	padding: 3px;
}

.wrapper-tokuten-white {
	background: var(--gradient-wh-pink-20);
	padding: 3px;
	border-radius: 50vw 50vw 0 0;
}

.wrapper-tokuten-white-inner {
	background: var(--gradient-wh-pink-20);
	padding: 60px 15px 30px;
	border-radius: 50vw 50vw 0 0;
	text-align: center;
}

@media (min-width:834px) {
	.wrapper-tokuten-gold {
		padding: 5px;
	}

	.wrapper-tokuten-white {
		padding: 5px;
	}

	.wrapper-tokuten-white-inner {
		padding: 6em 2em 4em;
	}
}

/*メニュー・特典等Gird*/
.grid-items {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 30px;
	margin: 2em auto;
}


.grid-items-drink,
.grid-items-latte {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 2em auto;
}


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


.item-inner {
	display: grid;
	gap: 0.3em;
}

.menu-item-inner {
	display: grid;
	gap: 0.3em;
}

.grid-items-drink .menu-item-inner {
	grid-template-rows: subgrid;
  grid-row: span 3;
}


.item-name {
	font-size: clamp(1.9rem, 1.830rem + 0.3vw, 2.1rem);
	font-weight: 700;
	line-height: 1.3;
}

.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-main);
	font-size: clamp(1.3rem, 1.265rem + 0.15vw, 1.4rem);
	/* font-weight: 400; */
	line-height: 1.2;
}

.item-size-large {
	font-family: var(--font-main);
	font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem);
	/* font-weight: 400; */
	line-height: 1.2;
}


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

.item-ingredients {
	font-family: var(--font-gothic);
	font-size: clamp(1.3rem, 1.265rem + 0.15vw, 1.4rem);
	font-weight: 400;
	line-height: 1.4;
	text-align: justify;
}

.item-ingredients::before {
	content: "〈使用材料〉";
	display: block;
	margin-bottom: 5px;
	text-align: center;
}


/*sec02  */
#sec02 {
	background: var(--color-beige2);
	margin: 0 auto;
	padding: 10px 0 40px;
}


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

.wrapper-special {
	background: var(--gradient-wh-0);
	padding: 30px 15px 0;
}

@media (min-width:834px) {

	.wrapper-special {
		background: var(--gradient-wh-0);
		padding: 4em 2em 0;
	}
}

.line-marker {
	background-image: linear-gradient(0deg, #C29E5C80 0.5em, transparent 0.5em);
}

.inner-special {
	display: grid;
	gap: 0.2em;
	max-width: 700px;
	margin: 2em auto;
}

/*sec03*/
#sec03 {
	background: var(--color-pink2);
	margin: 0 auto;
	padding: 10px 0 40px;
}


@media (min-width:834px) {
	#sec03 {
		padding: 80px 0;
	}
}


/*タブコンテンツ関連*/
.section-switch {
	margin: 1em 0;
}

.tabBox {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tabBox .tabArea {
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	width: 100%;
	max-width: 1000px;
}

@media (min-width:640px) {
	.tabBox .tabArea {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tabBox .tabArea .one_tab {
	display: block;
	text-decoration: none;
	transition-duration: 0.3s;
	text-align: center;
	color: var(--color-dark);
	cursor: pointer;
	border-left: 8px solid var(--color-purple1);
	position: relative;
	font-size: clamp(1.3rem, 1.054rem + 1.052vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	padding: .3em 0;
	background: var(--color-light);
}

@media (min-width:640px) {
	.tabBox .tabArea .one_tab {
		padding: .8em 0;
	}
}


/* #tab01.one_tab {
	background-color: var(--color-food1);
	border-color: var(--color-food1-d);
}

#tab02.one_tab {
	background-color: var(--color-food2);
	border-color: var(--color-food2-d);
}

#tab03.one_tab {
	background-color: var(--color-sweets);
	border-color: var(--color-sweets-d);
}

#tab04.one_tab {
	background-color: var(--color-drink);
	border-color: var(--color-drink-d);
}

#tab05.one_tab {
	background-color: var(--color-latte);
	border-color: var(--color-latte-d);
} */

.one_tab::after {
	content: "\e1c8";
	font-family: "Material Icons";
	position: absolute;
	right: 3px;
	bottom: 3px;
	font-size: 12px;
	color: var(--color-purple1);
}

.tabBox .tabArea .one_tab:hover {
	text-decoration: none;
	background: #f8edff;
	opacity: 1;
}

/* .tabBox .tabArea.bottom {} */


.contents .tab_main {
	display: none;
	padding: 20px 0;
	text-align: center;

}

@media (min-width:640px) {
	.contents .tab_main {
		padding: 40px 0;
	}
}

.contents .tab_main .innerArea {
	margin-inline: auto;
	max-width: 1000px;
	background: var(--color-light);
	border: 4px solid transparent;
	border-image: var(--gradient-gold);
	border-image-slice: 1;
	padding: 0 15px 15px;
}

@media (min-width:640px) {
	.contents .tab_main .innerArea {
		padding: 15px 40px 30px;
	}
}


.contents .tab_main .innerArea h4 {}

.contents .tab_main .innerArea h5 {
	font-size: clamp(1.8rem, 1.727rem + 0.36vw, 2rem);
	color: var(--color-dark);
	font-weight: 700;
	line-height: 1.6;
}

.contents .tab_main .innerArea h5 span {
	display: block;
	font-size: 85%;
}

.tab_main.is_show {
	display: block;
}

/* .tab_main:nth-child(1).is_show {
	background: var(--color-food1)
}

.tab_main:nth-child(2).is_show {
	background: var(--color-food2)
}

.tab_main:nth-child(3).is_show {
	background: var(--color-sweets)
}

.tab_main:nth-child(4).is_show {
	background: var(--color-drink)
}

.tab_main:nth-child(5).is_show {
	background: var(--color-latte)
} */

.hr-line {
	margin: 1em 0;
	padding: 1em 0 0;
	border-top: 1px solid var(--color-beige1);
	border-bottom: 1px solid var(--color-beige1);
}

.hr-line2 {
	margin: 1em 0;
	padding: 1em 0 2em;
	border-top: 1px solid var(--color-beige1);
	border-bottom: 1px solid var(--color-beige1);
}

@media (min-width:834px){
	.hr-line {
	margin: 2em 0;
	padding: 2em 0 0;
}
.hr-line2 {
	margin: 3em 0;
	padding: 2em 0 3em;
}

}




.notice {
	padding: 1em 0;
}

/* sec04 */
#sec04 {
	background: var(--color-beige3);
	margin: 0 auto;
	padding: 0 15px;
	border-top: 10px solid;
	border-bottom: 10px solid;

	border-image: var(--gradient-gold2) 1;
}


@media (min-width:834px) {
	#sec04 {
		padding: 0;
	}
}


#sec04 .sec-container {
	margin: 0 auto;
	max-width: 1000px;
	padding: 40px 15px;
	text-align: center;
	background: var(--gradient-yellow-0);
	border-left: 4px solid;
	border-right: 4px solid;
	border-image: var(--gradient-gold) 1;

}

@media (min-width:834px) {
	#sec04 .sec-container {
		padding: 80px 40px;
	}
}


/*sec05*/
#sec05 {
	background: var(--color-pink2);
	margin: 0 auto;
	padding: 40px 0;
}


@media (min-width:834px) {
	#sec05 {
		padding: 80px 0;
	}
}

.deco-sakura2 {
	background: url(../img/sakura_deco5.webp);
	background-repeat: no-repeat;
	max-width: 1000px;
	width: 100%;
	background-size: contain;
	background-position: center center;
}

.ttl-img-price {
	width: 40vw;
	max-width: 280px;
}

.room-riyou span {
	border-top: 1px solid var(--color-dark);
	border-bottom: 1px solid var(--color-dark);
	font-size: clamp(1.8rem, 1.589rem + 0.901vw, 2.4rem);
	padding: .5em;
	font-weight: 700;
}



/*sec06*/
#sec06-room1 {
	background:
		url(../img/bg_room.webp),
		var(--gradient-room1);
	background-blend-mode: overlay, normal;
	background-repeat: no-repeat, no-repeat;
	background-size: contain, cover;
	background-position: center, center;
	margin: 0 auto;
	padding: 40px 0;
}

/*sec07*/
#sec07-room2 {
	background:
		url(../img/bg_room.webp),
		var(--gradient-room2);
	background-blend-mode: overlay, normal;
	background-repeat: no-repeat, no-repeat;
	background-size: contain, cover;
	background-position: center, center;
	margin: 0 auto;
	padding: 40px 0;
}

@media (min-width:834px) {

	#sec06-room1,
	#sec07-room2 {
		padding: 80px 0;
	}
}

.btn-inner {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px;
	margin: 2em auto;
	/* justify-content: center; */
}
@media (min-width:640px) {
	.btn-inner {
		/* grid-template-columns: repeat(2, 1fr); */
		/* align-content: space-between; */
	}
}


.btn-room-yoyaku a{
	display: grid;
	place-content: center;
	place-items: center;
	text-decoration: none;
	transition-duration: 0.3s;
	text-align: center;
	color: var(--color-light);
	cursor: pointer;
	position: relative;
	font-size: clamp(2rem, 1.718rem + 1.202vw, 2.8rem);
	font-weight: 700;
	line-height: 1.3;
	background: var(--color-dark);
	/* width: 300px;
	height: 80px; */
	margin: 0 auto;
	padding: .6em 0 .8em;
	width: 80vw;
	max-width: 360px;
}

@media (min-width:640px){
	.btn-room-yoyaku a{
			/* width: 360px;
	height: 100px; */
	}
}

.btn-room-yoyaku a::after{
	content: "\e1c8";
	font-family: "Material Icons";
	position: absolute;
	right: 7px;
	bottom: 5px;
	font-size: 24px;
}


#sec06-room1 .btn-room-yoyaku a::after{
	color: var(--color-pink1);
}


#sec07-room2 .btn-room-yoyaku a::after{
	color: var(--color-purple1);
}

.btn-room-yoyaku a:hover{
		text-decoration: none;
		transform: scale(1.1)
}


/*版権表記-------------------------------------*/
#publisher {
	background-color: var(--color-dark);
	color: var(--color-light);
	padding: 3em 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-name {
	font-size: clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem);
}




/*footer-------------------------------------*/
footer {
	font-family: var(--font-main);
	color: var(--color-light);
	padding: 2em .5em;
	margin: 0 auto;
	text-align: center;
	background: var(--color-dark);
	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: 15px;
	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(1rem, 0.930rem + 0.3vw, 1.2rem);
	margin-top: .5em;
}

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

.sns-ico-set img {
	width: calc(100vw / 11);
	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-beige1);
	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-dark);
	font-size: 2rem;
	margin-left: 1em;
	font-family: var(--font-main);
	text-transform: capitalize;
	transition: .6s ease;
}

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

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

/* サブメニュー（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-beige1);
		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-dark);
		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-light);
	}

	.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-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(194, 158, 92, 0.9);
		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;
}