@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
/*
  font-family: "Noto Serif JP", serif;
  font-family: "Noto Sans JP", serif;
  font-family: "Shippori Mincho", serif;
*/


/* -------------------------------------------------------------------------
	BASE
========================================================================= */

:root {
	--def-font-color: #2D2D2D;
	--accent-color: #E13615;
	--accent-sub-color: #FFF;
	--font-size-xsmall: 1.0rem;
	--font-size-small: 1.2rem;
	--font-size-medium: 1.4rem;
	--font-size-large: 1.6rem;
	--font-size-xlarge: 1.8rem;
	--font-family-sans: 'Noto Sans JP', sans-serif;
	--font-family-serif: "Noto Serif JP", serif;
	--font-family-mincho: "Shippori Mincho", serif;
	--def-bg-color: #FFF;
	--bg-sub-color: #E13615;
	--bg-alternate-color: #F7F0DA;
	--width-full: 100vw;
	--height-full: 100dvh;
}

* {
	margin: 0;
	padding: 0;
	}
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-webkit-backface-visibility:hidden;
	}
body {
	width: 100%;
	line-height: 1;
	margin: 0;
	box-sizing: border-box;
	color: var(--def-font-color);
	line-height: 160%;
	font-size: 16px;
	font-size: var(--font-size-large);
	font-family: var(--font-family-mincho), -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	background-color: #FFF;
	-webkit-backface-visibility:hidden;
	box-sizing: border-box;
	overflow-x: hidden;
	}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
b, strong, .bold { font-family: var(--font-family-mincho), -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif; }
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display: block; }
address { font-style: normal; }
ul {
	list-style: none;
	padding: 0;
	}
li { padding: 0; }
input, select { vertical-align: middle; }
a {
	color: #000000;
	text-decoration: none;
	transition : all 0.5s ease 0s;
	}
a { -webkit-tap-highlight-color:transparent; }
a:visited { color: #000000; }
a:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
	transition : all 0.5s ease 0s;
	}
a:active { color: #e71f19; }
img {
	width: 100%;
    height: auto;
	border: none;
	vertical-align: top;
	}
.fs10 { font-size: var(--font-size-xsmall); } 
.fs12 { font-size: var(--font-size-small); } 
.fs14 { font-size: var(--font-size-medium); } 
.fs16 { font-size: var(--font-size-lage); } 
.fs18 { font-size: var(--font-size-xlage); } 
.fxsmall { font-size: 0.8em; } 
.fsmall { font-size: 0.9em; } 
.fmedium { font-size: 1em; } 
.flage { font-size: 1.1em; } 
.fxlage { font-size: 1.2em; }
.bgAccent { background: var(--accent-color); }
.bgAccentSub { background: var(--accent-sub-color); }

#top {
	/*overflow:auto;*/
	overflow-x: hidden;
	}

.hide {
	display: none;
	@media (width <= 768px){ display: inline; }
	}
.show {
	display: inline;
	@media (width <= 768px){ display: none; }
	}

.container {
	width: 100%;
	max-width: 1140px;
	margin: 0px auto;
	@media (width <= 1190px){
		width: 90%;
		max-width: none;
		margin-inlie: auto;
		}
	}
/*.ssWrapper {
	overflow: auto;
	scroll-snap-type: y mandatory;
	}*/


/* -------------------------------------------------------------------------
	HEADER
========================================================================= */
/*.logo {
		filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7462%) hue-rotate(314deg) brightness(101%) contrast(113%);
		}*/
#head {
	display: block;
	/*height: 100dvh;*/
	position: relative;
	display: block;
	/*scroll-snap-align: start;
	border:10px solid black;*/
	& .logo {
        width: calc((14.5% / 37.5) * 100);
        max-width: 290px;
        min-width: 145px;
		height: 90px;
		@media (width <= 768px){ height: 60px; }
		/*width: calc((14.5% / 37.5) * 100);
		max-width: 220px;
		min-width: 145px;
		margin: 40px auto auto 50px;
		height: auto;*/
		position: fixed;
		z-index: 1000;
		background: var(--def-bg-color);
		border-radius: 0 0 10px 0;
		/*@media (width <= 768px){
			margin: 31px auto auto 31px;
			}*/
		& > a {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			& > img {
				width: calc((22% / 29) * 100);
				max-width: 220px;
				min-width: 125px;
				height: auto;
				margin-top: -2px;
				}
			}
		&.logoScroll { filter: none; }
		}
	/*& div {
		height: 100dvh;
		background: red
		}*/
	}
.naviWrapper {
	--nw-width: 100%;
	--nw-height: 130px;
	width: var(--nw-width);
	/*height: var(--nw-height);*/
	/*background: green;*/
	padding-top: 38px;
    position: fixed;
    /*top: 38px;*/
	top: 0;
    z-index: 500;
	display: flex;
	justify-content: flex-end;
	gap: 1em;
	--mw-bg-height: 80px;
	@media (width <= 768px){ --mw-bg-height: 60px;}
	&::before,
	&::after {
		content: "";
		position: fixed;
		left: 0;
		z-index: -1;
		display: block;
		width: 100%;
		}
	&::before {
		height: var(--mw-bg-height);
		top: 0;
		backdrop-filter: blur(2px);
		}
	&::after {
		height: 10px;
		top: var(--mw-bg-height);
		backdrop-filter: blur(1px);
		}
	@media (width <= 768px){
		/*top: 18px;*/
		padding-top: 18px;
		gap: .5em;
		}
	/*&.naviScroll {
		margin-top: 0;
		background: transparent;
		&::before {
			content: "";
			width: var(--nw-width);
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			background: orange;
			opacity: 0.9;
			}
		}*/
	--wn-height: 40px;
	@media (width <= 768px){ --wn-height: 30px; }
	& .naviButton {
		height: var(--wn-height);
		padding: 0 1em;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		outline: initial;
		background: transparent;
        border: transparent;
		color: var(--accent-color);
		font-size: 1.6rem;
		font-weight: 600;
		@media (width <= 768px){ font-size: 0.9rem; }
		font-family: var(--font-family-mincho);
		line-height: 1.2;
		transition : all 0.5s ease 0s;
		cursor: pointer;
		&::after{
			content: "";
			width: 8px;
			height: 8px;
			display: block;
			transform: rotate(45deg);
			border-right: 2px solid var(--accent-color);
			border-bottom: 2px solid var(--accent-color);
			@media (width <= 768px){
				width: 6px;
				height: 6px;
				border-right-width: 1px;
				border-bottom-width: 1px;
				}
			}
		}
	}


#wovnNavi {
	height: var(--wn-height);
	display: inline-block;
	position: relative;
	z-index: 200;
	/*position: fixed;
	z-index: 200;
	right: 100px;*/
	/*& .menu__drop {
		cursor: pointer;
		}*/
	background: var(--def-bg-color);
    border: 1px solid var(--accent-color);
    border-radius: 20px;
    background: var(--def-bg-color);
	transition : all 0.3s ease 0s;
	&:has(> .wnOpen) { height: 205px; }
	& .wnMenu {
		max-height: 0;
		/*opacity: 0;*/
		display: none;
		&.wnOpen {
			/*opacity: 1;*/
			display: block;
			max-height: none;
			}
		& li a {}
		& li a:hover {}
		}
	& .wnWrapper {
		margin-top: 0.5em;
		text-align: center;
		& > li a {
			padding: 0 0 0.8em;
			display: block;
			color: var(--accent-color);
			cursor: pointer;
			}
		}
	}

#reserve {
	& .naviButton {
		width: 5.5em;/*new*/
		padding: 0 1.8em;
		@media (width <= 768px){ padding: 0 1em; }
		border-radius: 20px;
		background: var(--accent-color);
		color: var(--accent-sub-color);
		transition: all .5s;
		&::after{
			border-right-color: var(--accent-sub-color);
			border-bottom-color: var(--accent-sub-color);
			}
		/*&:has(+ .nrDiscount + .opened) {
			padding-bottom: 60px;
			}*/
		}
	& .nrDiscount {
		padding-top: 0.5em;
		color: var(--accent-color);
		font-size: 1.1rem;
		font-family: var(--font-family-sans);
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		/*text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1), 0 0 1px rgba(255, 255, 255, 1);*/
		@media (width <= 768px){ font-size: 0.9rem; }
		}
	& .reserveWrapper {
		/*top: 90px;*/
		top: 110px;
		@media (width <= 768px){ top: 90px; }
		}
	}
.reserve-navi { opacity: 0; }
.menuWrapper {
	& .mwBg {
		width: var(--width-full);
		height: 100dvh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 400;
		display: none;
		/*background: yellow;*/
		&.mwBg-open {
			display: block;
			}
		}
	& .menuBtn {
		--mb-size: 64px;
		width: var(--mb-size);
		height: var(--mb-size);
		margin-right: 25px;
		position: relative;
		border-radius: 100%;
		background: var(--accent-color);
		outline: initial;
        border: transparent;
		z-index: 550;
		top: -12px;
		cursor: pointer;
		@media (width <= 768px){
			--mb-size: 44px;
			margin-right: 10px;
			top: -6px;
			}
		& .inn {
			margin: auto;
			position: absolute;
			width: 27px;
			height: 20px;
			@media (width <= 768px){
				width: 20px;
				height: 15px;
				}
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			& .line {
				position: absolute;
				display: inline-block;
				background-color: var(--def-bg-color);
				height: 2px;
				left: 0;
				width: 100%;
				transition: 0.3s;
				&:nth-of-type(1) { top: 0%; }
				&:nth-of-type(2) { top: 46%; }
				&:nth-of-type(3) { bottom: 0%; }
				}
			}
		}
	& .menuBtn.is-open {
		& .inn {
			& .line {
				&:nth-of-type(1) {
					top: 45%;
					transform: rotate(45deg);
					}
				&:nth-of-type(2) { opacity: 0; }
				&:nth-of-type(3) {
					top: 45%;
					transform: rotate(-45deg);
					bottom: auto;
					}
				}
			}
		}
	& .menu {
		position: absolute;
		z-index: 500;
		top: 110px;
		@media (width <= 768px){ top: 80px; }
		right: 0;
		width: 100%;
		display: none;
		opacity: 0;
		/*transition: .5s linear;*/
		pointer-events: none;
		background: var(--def-bg-color);
		& ul {
			border-bottom: 1px solid var(--accent-color);
			& li {
				border-top: 1px solid var(--accent-color);
				pointer-events: all;
				& a {
					width: 100%;
					height: 60px;
					display: flex;
					text-align: center;
					justify-content: center;
					align-items: center;
					background: var(--def-bg-color);
					color:  var(--accent-color);
					}
				}
			}
		}

	}

.menu.is-open {
  display: block;
  /*transform: translateY(0);*/
  opacity: 1;
  animation: menuAnime .5s ease-in-out;
  }
@keyframes menuAnime{
	0%{  transform: translateY(-10px); }
	100%{  transform: translateY(0); }
	}

.mvBg {
	width: var(--width-full);
	height: var(--height-full);
	position: fixed;
	top: 0;
	z-index: -10;
	& img {
		height: var(--height-full);
		object-fit: cover;
		}
	}

#mainvisual {
	/*width: 100vw;
	height: 100dvh;
	background: url("../img/mainvisual-01.webp") center / cover no-repeat;*/
	/*overflow: hidden;*/
	& .mv1, .mv2 {
		width: var(--width-full);
		text-align: center;
		}
	& .mv1 {
        height: var(--height-full);
       /* background: red;*/
        position: fixed;
        top: 0;
        z-index: -1;
        & .scrollDown {
			position:absolute;
			bottom: 0px;
			left: 50%;
			color: var(--accent-sub-color);
			font-family: var(--font-family-sans);
			& > a {
				position: absolute;
				left: 0.3em;
				bottom: calc(64px - 5em);
				color:: var(--accent-sub-color);
				font-family: 'Josefin Sans', sans-serif;
				letter-spacing: 0em;
				writing-mode: vertical-lr;
				text-decoration: none;
				text-transform: uppercase;
				font-size: 1rem;
				}
			&::before {
				content: "";
				position: absolute;
				bottom: 0;
				left: -3px;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: var(--accent-sub-color);
				animation:
					circlemove 3s ease-in-out .5s infinite,
					cirlemovehide 3s ease-out .5s infinite;
				}
			&::after{
				content:"";
				position: absolute;
				bottom:0;
				left:0;
				width:2px;
				height: 64px;
				background: var(--accent-sub-color);
				opacity: 0.5;
				}
            }
        }
	& .mv1text, .mv2text{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--accent-sub-color);
		}
	& .mv1text.fadeUp { animation-delay: .1s!important; }
	& .mv1text {
		/*-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-orientation: upright;*/
		font-size: clamp(2.2rem, 1.673rem + 2.25vw, 3.5rem);
		font-weight: 400;
		line-height: 2;
		letter-spacing: 0.1em;
		opacity: 0;
		filter: drop-shadow(rgba(0, 0, 0, .7) 0px 0px 6px);
		}
	& .mv2 {
		--mv2-height: 130dvh;
        height: var(--mv2-height);
		position: relative;
		opacity: 0;
        /*position: absolute;
        bottom: 0;*/
		& .mv2text, .mv2bg {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			}
		& .mv2text {
			width: 80%;
            margin-inline: auto;
            right: 0;
			z-index: 2;
			flex-direction: column;
			gap: 3em;
			filter: drop-shadow(rgba(0, 0, 0, .7) 0px 0px 6px);
			& > .mv2Title {
				font-size: clamp(2rem, 1.514rem + 2.08vw, 3.2rem);
				font-weight: 400;
				letter-spacing: 0.2em;
				}
			& > p {
				line-height: 2.5;
				}
			}
		& .mv2bg {
			width: 100%;
			height: 100%;
			& img {
				height: 100%;
				object-fit: cover;
				}
			&.fadeInTrigger { animation-delay: .1s!important; }
			}
        }
	}

@keyframes circlemove{
	0%{bottom:60px;}
	50%{bottom:0px;}
	100%{bottom:-10px;}
	}
@keyframes cirlemovehide{
	0%{opacity:0}
	15%{opacity:1;}
	20%{opacity:0.9;}
	50%{opacity:0;}
	100%{opacity:0;}
	}




/* -------------------------------------------------------------------------
	FOOTER
========================================================================= */
#foot {
	padding-top: 35px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--bg-sub-color);
	color: var(--accent-sub-color);
	text-align: center;
	& .logo + div {
		&:lang(en) {
			padding: 0 1em;
			font-size: 0.9em;
			}
		}
	& #pagetop {
		& > a {
			 width: 19px;
			 height: 19px;
			 display: block;
			 border-top: 1px solid var(--def-bg-color);
			 border-right: 1px solid var(--def-bg-color);
			 transform: rotate(-45deg);
			 animation: arrowAnime 3s ease-in-out 0s infinite;
			}
		}
	& .logo {
		max-width: 248px;
		padding: 2em 0 1em;
		filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7462%) hue-rotate(314deg) brightness(101%) contrast(113%);
		}
	& .address {
		padding: 2em 0 3em;
		font-size: 1.4rem;
		}
	& .copyright {
		padding: 0 0 1.5em;
		font-size: 1rem;
		font-family: var(--font-family-sans);
		}
	}
@keyframes arrowAnime{
	0%{ transform: translateY(0px) rotate(-45deg); }
	10%{ transform: translateY(-5px) rotate(-45deg); }
	30%{ transform: translateY(0px) rotate(-45deg); }
	}




/* -------------------------------------------------------------------------
	MAIN
========================================================================= */
main {
	/*scroll-snap-align: start;*/
	margin-top: 95px;
	position: relative;
	& section {
		position: relative;
		background: var(--def-bg-color);
		}
	}
.mainWrapper {
	}

#construction {
	background: var(--bg-alternate-color);
	&::before {
		content: "";
		width: 100%;
		--mw-height: 150px;
		height: var(--mw-height);
		position: absolute;
		top: calc((-1 * var(--mw-height) + 1px));
		background : linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(254, 253, 251, 0.08) 7.73%, rgba(249, 244, 227, 0.65) 64.86%, rgba(247, 240, 218, 1) 100%);
		}
	& .container {
		padding: 130px 0 80px;
		@media (width <= 768px) { padding: 40px 0 60px; }
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-weight: 500;
		&:lang(en) { width: 55%; }
		& > h2 {
			margin-bottom: 1.5em;
			font-size: 3rem;
			font-weight: 500;
			@media (width <= 768px){
				margin-bottom: 1em;
				font-size: 2.3rem;
				}
			}
		& > p {
			line-height: 2;
			position: relative;
			@media (width <= 768px) { font-size: 1.4rem; }
			}
		}
	& .closurePeriod {
		margin: 2em 0;
		padding:  0.2em 1em;
		background: var(--accent-sub-color);
		box-sizing: border-box;
        @media (width <= 768px) {
			width: 100%;
			margin: 1.2em 0;
			padding:  0.5em 1em;
            line-height: 1.8!important;
            }
		}
	& .illust01, & .illust02 {
		position: absolute;
		}
	& .illust01 {
		max-width: 120px;
		/*top: 130px;
		left: calc((19% / 110)* 100);*/
		top: -75px;
        left: -170px;
		@media (width <= 768px) {
			max-width: 90px;
            top: 10px;
            left: -70px;
			&:lang(en) {
				max-width: 70px;
				top: 30px;
				left: -20px;
				}
			&:lang(ko) { left: -80px; }
	        }
		}
	& .illust02 {
		max-width: 140px;
		right: -160px;
		&:lang(en) { right: -160px; }
		bottom: -140px;
		z-index: 10;
		@media (width <= 768px) {
			max-width: 90px;
			&:lang(en) { max-width: 70px; }
			&:lang(ko) { max-width: 70px; }
			right: -100px;
			&:lang(en) { right: -40px; }
			&:lang(ko) { right: -60px; }
			bottom: -80px;
			}
		}
	}

#details {
	overflow: hidden;
	&::before {
		content: "";
		width: 100%;
		height: 160px;
		@media (width <= 768px) { height: 50px; }
		display: block;
		/*position: absolute;
		top: 0;
		left: 0;
		z-index: 0;*/
		background : linear-gradient(180deg, rgba(247, 240, 218, 1) 0%, rgba(255, 255, 255, 1) 100%);
		}
	& .container {
		position: relative;
		z-index: 1;
		& > h2 {
			margin-bottom: 60px;
			font-size: 3rem;
			font-weight: 500;
			text-align: center;
			line-height: 1.6;
			@media (width <= 768px) {
				margin-top: 30px;
				margin-bottom: 40px;
				font-size: 2rem;
				}
			}
		}
	& .bgCircleS::before,
	& .bgCircleM::before,
	& .bgCircleL::after {
        content: "";
        aspect-ratio: 1 / 1;
        display: block;
        position: absolute;
        z-index: -2;
        border-radius: 100%;
        background: var(--bg-alternate-color);
        filter: blur(20px);
		}
	& .bgCircleS::before {
		width: 162px;
		@media (width <= 768px) { width: 92px; }
		}
	& .bgCircleM::before { width: 202px; }
	& .bgCircleL::after {
		width: 248px;
		@media (width <= 768px) { width: 140px; }
		}
	& .floorName {
		margin-left: calc((12.8% / 110)* 100);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.8em;
		position: absolute;
		left: 0;
		top: 535px;
		color: var(--accent-color);
		@media (width <= 1190px) {
			margin-left: calc((8% / 110)* 100);
			top: calc((25% / 54.8)* 100);
			}
		@media (width <= 768px) {
			margin-left: 0;
			margin-bottom: 0.5em;
			position: relative;
			top: auto;
			flex-direction: row;
			align-self: flex-start;
			}
		& .floor {
            width: 100px;
            aspect-ratio: 1 / 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--accent-sub-color);
			font-size: 1.7rem;
			&:lang(en) { font-size: 1.3rem; }
			font-family: var(--font-family-sans);
			line-height: 1.3;
			font-weight: 500;
			text-align: center;
			background: url("../img/point-icon.svg") top center / cover no-repeat;
			/*&::before {
				content: "";
				display: block;
				}*/
			@media (width <= 768px) {
				width: 70px;
				font-size: 1.4rem;
				&:lang(en) { font-size: 1rem; }
				}
			}
		& > h3 {
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			text-orientation: upright;
			font-size: 2.8rem;
			font-weight: 500;
			line-height: 1.7;
			&:lang(en) {
				max-height: 240px;
				writing-mode: sideways-rl;
				}
			@media (width <= 768px) {
				writing-mode: horizontal-tb;
				font-size: 2rem;
				&:lang(en) { writing-mode: horizontal-tb; }
				}
			& > span { font-size: 0.9em; }
			}
		}
	& .point {
		padding-bottom: 115px;
		@media (width <= 768px) { padding-bottom: 80px; }
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 1.4rem;
		& .photo {
			order: -1;
			display: grid;
			grid-template-rows: auto;
			grid-template-columns: auto calc((25.7% / 110) * 100);
			grid-template-areas:
				"main subA"
				"main subB"
				"note note";
			gap: 24px;
			@media (width <= 768px) {
				order: 0;
				grid-template-columns: auto;
				grid-template-areas:
					"main main"
					"subA subB"
					"note note";
				gap: 20px;
				}
			& > img {
				border-radius: 10px;
				&:nth-of-type(1) { grid-area: main; }
				&:nth-of-type(2) { grid-area: subA; }
				&:nth-of-type(3) {
					grid-area: subB;
					align-self: end;
					}
				@media (width <= 768px) {
					&:nth-of-type(2), &:nth-of-type(3) {
						object-fit: cover;
						aspect-ratio: 1 / 1;
						}
					}
				}
			& > .note {
				grid-area: note;
				margin-top: -20px;
				/*font-size: 0.9em;
				@media (width <= 768px) { font-size: 0.8em; }*/
				}
			}
        & .photoReverse {
			grid-template-columns: calc((25.7% / 110) * 100) auto;
			grid-template-areas:
				"subA main"
				"subB main"
				"note note";
			@media (width <= 768px) {
				grid-template-columns: auto;
				grid-template-areas:
					"main main"
					"subA subB"
					"note note";
				}
			  }
        & > .text {
			position: relative;
			text-align: center;
			line-height: 200%;
			font-weight: 500;
			&:lang(en) {
				max-width: 65%;
				@media (width <= 768px) { max-width: none; }
				}
            & > dt {
				margin-bottom: 1em;
                font-size: 1.8rem;
				line-height: 1.8;
				@media (width <= 768px) { margin-top: 0.5em; }
                }
			& > .illust {
				position: absolute;
				z-index: -1;
				}
            }
		}
	& #point01 {
		& .illust {
			max-width: 174px;
			width: 50%;
			right: -250px;
			bottom: -10px;
			&:lang(en) { bottom: -50px; }
			@media (width <= 1190px) { right: -35%; }
			@media (width <= 768px) {
				right: -30%;
				bottom: -50px;
				&:lang(en) {
					width: 100px;
					right: -5%;
					}
				}
			@media (width <= 500px) {
				width: 100px;
				right: -20px;
				&:lang(en) {
					width: 60px;
					right: -10px;
					}
				&:lang(ko) { right: -40px; }
				}
			}
		&.bgCircleS::before {
			top: -45px;
			right: 125px;
			@media (width <= 768px) {
				top: 15px;
				right: 30px;
				}
			}
		&.bgCircleL::after {
			top: 456px;
			left: 128px;
			@media (width <= 768px) {
				top: 450px;
				left: -34px;
				}
			}
		& .text.bgCircleS::before {
			bottom: -128px;
			right: -128px;
			@media (width <= 768px) { display:none; }
			}
		}
	& #point02 {
		& .illust {
			max-width: 220px;
			width: 60%;
			right: -300px;
			bottom: 0;
			&:lang(en) { right: -40%; }
			@media (width <= 1190px) {
				right: -70%;
				&:lang(en) {
                    right: -25%;
                    bottom: -25%;
					}
				}
			@media (width <= 768px) {
				width: 50%;
				right: -35%;
				bottom: -50px;
				&:lang(en) {
					max-width: 140px;
					width: 30%;
					right: 0;
					bottom: -20%;
				}
			}
			@media (width <= 520px) {
				width: 100px;
				right: -20px;
				}
			}
		&.bgCircleM::before {
			top: 530px;
			left: 125px;
			@media (width <= 768px) {
				width: 139px;
				top: 420px;
				left: 30px;
				}
			}
		&.bgCircleL::after {
			bottom: -50px;
			right: 50px;
			@media (width <= 768px) {
				width: 163px;
				top: -30px;
				bottom: auto;
				right: -34px;
				}
			}
		}
	& #point03, & #point04 {
		& .floor {
			font-size: 1.4rem;
			@media (width <= 768px) { font-size: 1rem; }
			}
		}
	& #point03 {
		& .illust {
			max-width: 167px;
			width: 60%;
			right: -250px;
			bottom: -20px;
			@media (width <= 1190px) {
				right: -70%;
				&:lang(en) { right: -30%; }
				}
			@media (width <= 855px) {
				width: 50%;
				right: -40%;
				bottom: -90px;
				&:lang(en) {
					width: 25%;
					right: -5%;
					}
				}
			@media (width <= 520px) {
				width: 100px;
				right: -20px;
				bottom: -60px;
				&:lang(en) {
					right: 0;
					}
				}
			}
		&.bgCircleM::before {
			top: 495px;
			right: 215px;
			@media (width <= 855px) {
				width: 149px;
				top: 178px;
				right: -20px;
				}
			}
		&.bgCircleL::after {
			bottom: -52px;
			left: 130px;
			@media (width <= 855px) {
				width: 190px;
				bottom: 20px;
				left: -15px;
				}
			}
		}
	& #point04 {
		padding-bottom: 80px;
		& .illust {
			max-width: 120px;
			width: 60%;
			right: -200px;
			bottom: -20px;
			@media (width <= 1190px) { right: -70%; }
			@media (width <= 855px) {
				width: 50%;
				right: -40%;
				bottom: -90px;
				&:lang(en) { bottom: -40px; }
				}
			@media (width <= 768px) {
				&:lang(en) {
					width: 25%;
					right: -20%;
					}
				}
			@media (width <= 520px) {
				width: 70px;
				right: -20px;
				bottom: -20px;
				&:lang(en) { right: 0; }
				}
			}
		&.bgCircleS::before {
			width: 187px;
			bottom: 0;
			left: 48px;
			@media (width <= 855px) {
				width: 150px;
				bottom: 40px;
				left: -5px;
				}
			}
		&.bgCircleL::after {
			width: 228px;
			top: 470px;
			right: 127px;
			@media (width <= 855px) {
				width: 140px;
				top: 254px;
				right: -10px;
				}
			}
		}
	}
.note {
	font-size: 0.9em;
	color: #888;
	text-align: right;
	font-family: var(--font-family-sans);
	font-weight: 400;
	@media (width <= 768px) { font-size: 0.8em; }
	}
.reserveButton {
	text-align: center;
	& > a {
		padding: 0.4em 1.5em;
		display: inline-block;
		border: 1px solid var(--accent-color);
		background: var(--def-bg-color);
		border-radius: 5px;
		color: var(--accent-color);
		font-weight: 700;
		& > span {
			font-size: 0.8em;
			}
		}
	}

#activities {
	--mw-height: 160px;
	padding-top: calc(50px + var(--mw-height));
	background: var(--bg-alternate-color);
	@media (width <= 768px){ padding-top: var(--mw-height); }
	&::before {
		content: "";
		width: 100%;
		height: var(--mw-height);
		position: absolute;
		top: 0;
		background : linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(247, 240, 218, 1) 100%);
		}
	& .container {
		max-width: 1200px;
		margin: 0px auto;
		@media (width <= 1250px){
			width: 90%;
			max-width: none;
			margin-inlie: auto;
			}
		position: relative;
		padding-bottom: 88px;
		& > h2, & .mainText { text-align: center; }
		& > h2 {
			margin-bottom: 1.3em;
			font-size: 2.8rem;
			font-weight: 500;
			line-height: 1.5;
			@media (width <= 768px){
				margin-bottom: 1em;
				font-size: 2.3rem;
				}
			}
		& .mainText {
			padding-bottom: 3.5em;
			line-height: 2;
			font-weight: 500;
			@media (width <= 768px){ font-size: 1.4rem; }
			}
		& .actIllust {
			width: 237px;
			position: absolute;
			bottom: -18px;
			right: 0;
			z-index: 10;
			pointer-events: none;
			@media (width <= 768px){
				width: 120px;
				bottom: -10px;
				right: -15px;
				}
			}
		}
	}
#tab {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
	gap: 0 3em;
	position: relative;
	@media (width <= 768px){
		gap: 0 1em;
		}
	& > label {
		min-width: 130px;
		max-width: 400px;
		padding: 0.5em 1em 0.5em;
		box-sizing: border-box;
		flex: 1 1;
		order: -1;
		position: relative;
		z-index: 0;
		border: 1px solid var(--accent-color);
		border-bottom: none;
		border-radius: 10px 10px 0 0;
		background: var(--def-bg-color);
		color: var(--accent-color);
		font-size: 2rem;
		font-weight: 600;
		text-align: center;
		cursor: pointer;
		@media (width <= 768px){
			width: 30%;
			flex: none;
			font-size: 1.6rem;
			}
		}
	& label:has(:checked) {
        color: var(--accent-sub-color);
        z-index: 5;
		background: var(--accent-color);
		transition : all 0.5s ease 0s;
        }
	& input { display: none; }
	& > div {
		display: none;
		width: 100%;
		padding: 4em 50px;
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		border-top: 1px solid var(--accent-color);
		border-radius: 0 0 10px 10px;
		background: var(--def-bg-color);
		transition : all 0.5s ease 0s;
		@media (width <= 900px){ padding: 2em 20px 3em; }
		&::before, &::after {
			content: "";
			height: calc(100% - 8em - 6em);
			margin-inline: auto;
			display: block;
			position: absolute;
			top: 4em;
			left: 0;
			right: 0;
			z-index: -1;
			@media (width <= 900px){
				height: calc(100% - 8em - 3em);
				margin-left: 50px;
				}
			}
		&::before {
			width: 1px;
			background: var(--accent-color);
			}
		&::after {
			width: 3px;
			background: url("../img/day-bg-dot.svg") bottom 9px center no-repeat;
			}
		}
	& label:has(:checked) + div { display: block; }
	& .tabWrapper {
		padding-bottom: 4em;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		@media (width <= 900px){ gap: 6em; }
		}
	}
.schedule {
	width: calc(50% + 48px);
	/*width: calc(50% + 96px);
	max-width: 598px;*/
	margin-right: -96px;
	display: flex;
	align-items: flex-start;
    justify-content: flex-start;
	gap: 60px;
	position: relative;
	--sc-gap-sp: 20px;
	@media (width <= 900px){
		width: 100%;
		margin-top: auto!important;
		margin-right: auto;
		gap: var(--sc-gap-sp);
		}
    & .time {
        width: 96px!important;
        aspect-ratio: 1 / 1;
		display: block;
		@media (width <= 900px){ width: 60px!important; }
        }
	&:nth-of-type(odd) .time {
		order: 2;
		@media (width <= 900px){order: -1;}
		}
	& > dl {
		/*width: calc((44.4% / 60)* 100);*/
		font-weight: 500;
		@media (width <= 900px){ width: calc(100% - var(--sc-gap-sp) - 60px); }
		& > dt {
			margin-bottom: 0.8em;
			display: flex;
			flex-direction: column;
			gap: 0.5em;
			font-size: 2.2rem;
			@media (width <= 900px){
				gap: 0.3em;
				font-size: 2rem;
				line-height: 1.2;
				}
			& > span { color: var(--accent-color); }
			}
		& > .text {
			padding-bottom: 1em;
			line-height: 2;
			@media (width <= 900px){
				padding-bottom: 1em !important;
				font-size: 1.4rem;
				}
			}
		& .pWrapper { position: relative; }
		& .photo {
			max-width: 444px;
			@media (width <= 900px){ max-width: none!important;}
			border-radius: 10px;
			}
		& .sPhoto {
			width: calc((19% / 44) * 100);
			max-width: 190px;
			aspect-ratio: 1 / 1;
			position: absolute;
			@media (width <= 900px){
				width: calc((10% / 36.5) * 100)!important;
				min-width: 100px;
				}
			}
		& .sPhotoSub { position: absolute; }
		}
	}
#day1 {}
#s01 {
	& .text { padding-bottom: 3em; }
	& .photo {
        max-width: 450px;
		margin-left: calc((-15% / 44) * 100);
		@media (width <= 900px){ margin-left: 0; }
        }
	& .sPhoto {
		width: calc((20% / 44) * 100);
		max-width: 200px;
		top: calc((-6% / 44) * 100);
		right: 0;
		@media (width <= 900px) {
			top: auto;
			bottom: -50px;
			right: auto;
			left: -40px;
			}
		}
    & .sPhotoSub {
        width: 226px;
		top: 5px;
		right: calc((-40% / 110)* 100);
		@media (width <= 900px){
			width: 90px;
			top: -15px;
			right: -10px;
			}
        }
    }
#s02 {
	margin-top: 290px;
	/*@media (width <= 900px){ margin-top: auto; }*/
	& .sPhoto {
		/*width: 200px;*/
		width: calc((22% / 44) * 100);
		max-width: 220px;
		bottom: calc((-28% / 44) * 100);
		right: -50px;
		@media (width <= 900px) {
			bottom: -80px;
            right: -10px;
			}
		}
	}
#s03 {
	margin-top: -160px;
	& .sPhoto {
		bottom: calc((-20% / 44) * 100);
		right: -30px;
		@media (width <= 900px) {
            bottom: -70px;
            right: auto;
            left: -40px;
			}
		}
    & .sPhotoSub {
        width: calc((16% / 60) * 100);
		max-width: 160px;
		top: -70px;
		right: 100px;
		@media (width <= 900px){
            width: calc((15% / 36.5) * 100);
            top: auto;
            bottom: -110px;
            right: -10px;
			}
        }
	}
#s04 {
	margin-top: 160px;
	& .photo {
        max-width: 450px;
		position: relative;
		right: calc((-10% / 44) * 100);
		@media (width <= 900px){ right: 0; }
        }
	& .sPhoto {
		bottom: calc((-15% / 44) * 100);
		left: -20px;
		@media (width <= 900px) {
            bottom: -80px;
            right: -10px;
			left: auto;
			}
		}
	}
#s05 {
	margin-top: -160px;
	padding-bottom: 2em;
	& .photo { max-width: 354px; }
	& .sPhoto {
        width: calc((18% / 44) * 100);
        max-width: 180px;
		bottom: calc((-6% / 44) * 100);
		right: -10px;
		@media (width <= 900px) {
            bottom: -60px;
            right: auto;
            left: -20px;
			}
		}
	}
#day2 + div > .tabWrapper {
		@media (width <= 900px){
			padding-bottom: 2.5em;
			gap: 4em!important;
			}
		}
	}
#s06 {}
#s07 {
	margin-top: 150px;
 	& .photo {
		position: relative;
		top: 15px;
		right: calc((-7% / 44) * 100);
        transform: scale(1.1)!important;
		@media (width <= 900px){
			top: 0;
			right: 0;
			transform: scale(1)!important;
			}
        }
   & .sPhotoSub {
        width: calc((18.5% / 60) * 100);
		max-width: 185px;
		bottom: -100px;
		left: 140px;
		@media (width <= 900px){
            width: calc((10% / 36.5) * 100);
            top: -20%;
            bottom: auto;
            left: auto;
            right: 0;
			}
        }
	}
#s08 {
	margin-top: -130px;
	& .photo {
		margin-left: calc((-8% / 44) * 100);
        transform: scale(1.1) translateY(15px)!important;
		@media (width <= 900px){
			margin-left: 0;
			transform: scale(1) translateY(0)!important;
			}
        }
	& .sPhoto {
		width: calc((20% / 44) * 100);
		max-width: 200px;
		bottom: calc((-21% / 44) * 100);
		right: -20px;
		@media (width <= 900px) {
            bottom: -70px;
            right: -10px;
			}
		}
	}
#s09 { margin-top: 120px; }
#s10 {
	margin-top: -100px;
	padding-bottom: 5em;
	@media (width <= 900px) { padding-bottom: 0; }
	& .sPhoto {
		width: calc((16% / 44) * 100);
		max-width: 160px;
		bottom: calc((-14% / 44) * 100);
		right: -50px;
		@media (width <= 900px) {
            bottom: -70px;
            right: -10px;
			}
		}
	}
#s11 {
	margin-top: 80px;
 	& .photo {
		position: relative;
		top: 15px;
		right: calc((-7% / 44) * 100);
        transform: scale(1.1)!important;
		@media (width <= 900px){
			top: 0;
			right: 0;
			transform: scale(1)!important;
			}
        }
	}




/*  ---------------------------------------------------------*/
.rsv { color: #FFF; }

/*  ---------------------------------------------------------*/
.fadeIn { animation-name:fadeInAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeInAnime{ from { opacity: 0; filter: blur(40px); }  to { opacity: 1; filter: blur(0px); }}
.fadeUp { animation-name:fadeUpAnime; animation-duration:0.7s; animation-fill-mode:forwards; animation-timing-function: ease-out; opacity:0;animation-delay: .5s; }
@keyframes fadeUpAnime{ from { opacity: 0; transform: translateY(10px); filter: blur(0px); } to { opacity: 1; transform: translateY(0); filter: blur(0); }}
.fadeDown{ animation-name:fadeDownAnime; animation-duration:0.3s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeDownAnime{ from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); }}
.fadeLeft{ animation-name:fadeLeftAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeLeftAnime{ from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); }}
.fadeRight{ animation-name:fadeRightAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeRightAnime{ from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); }}
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger{ opacity: 0; }
.flipDown{ animation-name:flipDownAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes flipDownAnime{ from { transform: perspective(2500px) rotateX(100deg); opacity: 0; } to { transform: perspective(2500px) rotateX(0); opacity: 1; }}
.flipLeft{ animation-name:flipLeftAnime; animation-duration:1s; animation-fill-mode:forwards; perspective-origin:left center; opacity:0; }
@keyframes flipLeftAnime{ from { transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg); opacity: 0; } to { transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg); opacity: 1; }}
.flipLeftTop{ animation-name:flipLeftTopAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes flipLeftTopAnime{ from { transform: translate(-20px,80px) rotate(-15deg); opacity: 0; } to { transform: translate(0,0) rotate(0deg); opacity: 1; }}
.flipRight{ animation-name:flipRightAnime; animation-duration:1s; animation-fill-mode:forwards; perspective-origin:right center; opacity:0; }
@keyframes flipRightAnime{ from { transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg); opacity: 0; } to { transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg); opacity: 1; }}
.flipRightTop{ animation-name:flipRightTopAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes flipRightTopAnime{ from { transform: translate(-20px,80px) rotate(25deg); opacity: 0; } to { transform: translate(0,1) rotate(0deg); opacity: 1; }}
.flipDownTrigger, .flipLeftTrigger, .flipLeftTopTrigger, .flipRightTrigger, .flipRightTopTrigger{ opacity: 0; }
.rotateX{ animation-name:rotateXAnime; animation-duration:1s; animation-fill-mode:forwards; }
@keyframes rotateXAnime{ from{ transform: rotateX(0); opacity: 0; } to{ transform: rotateX(-360deg); opacity: 1; }}
.rotateY{ animation-name:rotateYAnime; animation-duration:1s; animation-fill-mode:forwards; }
@keyframes rotateYAnime{ from{ transform: rotateY(0); opacity: 0; } to{ transform: rotateY(-360deg); opacity: 1; }}
.rotateLeftZ{ animation-name:rotateLeftZAnime; animation-duration:1s; animation-fill-mode:forwards; }
@keyframes rotateLeftZAnime{ from{ transform: rotateZ(0); opacity: 0; } to{ transform: rotateZ(-360deg); opacity: 1; }}
.rotateRightZ{ animation-name:rotateRightZAnime; animation-duration:1s; animation-fill-mode:forwards; }
@keyframes rotateRightZAnime{ from{ transform: rotateZ(0); opacity: 0; } to{ transform: rotateZ(360deg); opacity: 1; }}
.rotateXTrigger, .rotateYTrigger, .rotateLeftZTrigger, .rotateRightZTrigger{ opacity: 0; }
.zoomIn{ animation-name:zoomInAnime; animation-duration:0.5s; animation-fill-mode:forwards; }
@keyframes zoomInAnime{ from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; }}
.zoomOut{ animation-name:zoomOutAnime; animation-duration:0.5s; animation-fill-mode:forwards; }
@keyframes zoomOutAnime{ from { transform: scale(1.2); opacity: 0; } to { transform:scale(1); opacity: 1; }}
.zoomInTrigger, .zoomOutTrigger{ opacity: 0; }
.blur{ animation-name:blurAnime; animation-duration:1.2s; animation-fill-mode:forwards;animation-timing-function: ease-out; }
@keyframes blurAnime{ from { filter: blur(10px); transform: scale(1.02) translateY(20px); opacity: 0; } to { filter: blur(0) drop-shadow(rgba(0, 0, 0, .7) 0px 0px 6px); transform: scale(1) translateY(0); opacity: 1; }}
.blurTrigger{}
.smooth{ animation-name:smoothAnime; animation-duration:1s; animation-fill-mode:forwards; transform-origin: left; opacity:0; }
@keyframes smoothAnime{ from { transform: translate3d(0, 100%, 0) skewY(12deg); opacity:0; } to { transform: translate3d(0, 0, 0) skewY(0); opacity:1; }}
.smoothTrigger{ opacity: 0; }