@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: #F2EEE9;
	--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;
		}
	}


/* -------------------------------------------------------------------------
	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;*/
	/*& 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;
	& .logo {
        width: calc((14.5% / 37.5) * 100);
        max-width: 290px;
        min-width: 145px;
		height: 100px;
		@media (width <= 768px){
			margin-top: 10px;
			height: 40px;
			}
		position: fixed;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		z-index: 1000;
		& > 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;
				filter: brightness(0) invert(1);
				}
			& > img.logo-mark { display: none; }
			}
		&.logoScroll { filter: none; }
		}
    position: fixed;
    /*top: 38px;*/
	top: 0;
    z-index: 9999;
	display: flex;
	justify-content: flex-end;
	gap: 1em;
	--mw-bg-height: 80px;
	@media (width <= 768px){ --mw-bg-height: 60px;}
	@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-sub-color);
		font-size: 1.6rem;
		font-weight: 600;
		@media (width <= 768px){ font-size: 1.4rem; }
		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-sub-color);
			border-bottom: 2px solid var(--accent-sub-color);
			@media (width <= 768px){
				width: 6px;
				height: 6px;
				border-right-width: 1px;
				border-bottom-width: 1px;
				}
			}
		}
	}

.naviWrapper.naviMv2 {
	background: rgba(255, 255, 255, 0.8);
	padding-top: 20px;
	@media (width <= 768px){ padding-top: 10px; }
	& .logo > a > img.logo-default { display: none; }
	& .logo > a > img.logo-mark {
		display: block;
		filter: none;
		width: 80px;
		min-width: unset;
		@media (width <= 768px){ width: 40px; }
		}
	& .menuWrapper .menuBtn .inn .line {
		background-color: var(--def-font-color);
		}
	& .naviButton.wnToggle {
		color: var(--def-font-color);
		&::after {
			border-right-color: var(--def-font-color);
			border-bottom-color: var(--def-font-color);
			}
		}
	& #wovnNavi .wnWrapper > li a {
		color: var(--def-font-color);
		}
	& .menuWrapper .menu {
		top: 90px;
		@media (width <= 768px) { top: 50px; }
		}
	}

/* mv1なしページ: naviMv2の高さ分だけコンテンツを下げる */
body.has-naviMv2 .contents-wrapper {
	padding-top: 60px;
	@media (width <= 768px) { padding-top: 40px; }
	}


#wovnNavi {
	height: var(--wn-height);
	display: inline-block;
	position: relative;
	z-index: 200;
	/*position: fixed;
	z-index: 200;
	right: 100px;*/
	/*& .menu__drop {
		cursor: pointer;
		}*/
	transition : all 0.3s ease 0s;
	@media (width <= 768px){ margin-right: 1em; }
	&: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-sub-color);
			cursor: pointer;
			}
		}
	}

#reserve {
	margin-right: 2.5em;
	@media (width <= 768px){
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		margin-right: 0;
		z-index: 10001;
		}
	& .naviButton {
		display: block;
		height: auto;
		padding: 0.4em 1.8em;
		border: 1px solid var(--accent-color);
		border-radius: 9999px;
		background: var(--accent-sub-color);
		color: var(--def-font-color);
		text-align: center;
		transition: all .5s;
		&::after{
			content: none;
			}
		@media (width <= 768px){
			padding: 0.3em 1em;
			border: none;
			border-radius: 0;
			background: #e8ded4;
			}
		}
	& .nrDiscount {
		color: var(--accent-color);
		font-size: 1.1rem;
		font-family: var(--font-family-sans);
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		@media (width <= 768px){ font-size: 0.9rem; }
		}
	& .reserveWrapper {
		top: 100px;
		@media (width <= 768px){
			top: 0;
			padding: 35px 15vw;
			}
		}
	& .naviButton.reserveToggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 182px;
		height: 52px;
		padding: 0;
		box-sizing: border-box;
		@media (width <= 768px){
			width: 100%;
			position: relative;
			z-index: 10001;
			&.opened { background: transparent; }
			&.opened .reserve-btn-close {
				display: inline-block;
				position: fixed;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
				width: 150px;
				padding: 1em;
				border-radius: 9999px;
				background: #fff;
				box-shadow: 0 4px 14px rgba(0,0,0,0.22);
				box-sizing: border-box;
				color: #333;
				white-space: nowrap;
				}
			}
		& .reserve-btn-close { display: none; }
		&.opened .reserve-btn-open { display: none; }
		&.opened .reserve-btn-close {
			display: block;
			}
		}
	}
@keyframes reserveBtnFadeIn {
	from { opacity: 0; transform: translateX(calc(-50% + 4px)); }
	to   { opacity: 1; transform: translateX(-50%); }
	}
.reserve-navi { opacity: 0; }
.menuWrapper {
	margin-right: auto;
	& .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-left: 25px;
		position: relative;
		border-radius: 100%;
		background: transparent;
		outline: initial;
        border: transparent;
		z-index: 550;
		top: -12px;
		cursor: pointer;
		@media (width <= 768px){
			display: block;
			--mb-size: 44px;
			margin-left: 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: 60px; }
		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);
					font-size: 1.2em;
					}
				}
			}
		}

	}

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


#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: relative;
        overflow: hidden;
        & .mv1bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100dvh;
            object-fit: cover;
            object-position: center;
			z-index: -1;
            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                }
            }
        & .mv1BestRate {
            position: absolute;
            bottom: 2em;
            left: 2em;
            @media (width <= 768px){ bottom: 1em; left: 1em; }
            & img {
                width: 170px;
                @media (width <= 768px){ width: 124px; }
                }
            }
        & .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 {
		width: 50%;
		margin-left: auto;
		flex-direction: column;
		gap: 3em;
		position: relative;
		left: -30px;
		top: 20px;
		opacity: 0;
		filter: drop-shadow(rgba(0, 0, 0, .7) 0px 0px 6px);
		color: var(--accent-sub-color);
		@media (width <= 768px){
			width: fit-content;
			margin-inline: auto;
			left: 0;
			top: -30px;
			}
		& h2 {
			writing-mode: vertical-rl;
			text-align: start;
			text-orientation: upright;
			font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
			font-weight: 400;
			line-height: 2;
			letter-spacing: 0.1em;
			@media (width <= 768px){
				font-size: 20px;
				line-height: 1.8;
				}
			}
		& .mv1-reopen {
			writing-mode: horizontal-tb;
			text-align: center;
			font-size: 20px;
			font-weight: 400;
			line-height: 1.5;
			border-top: 1px solid currentColor;
			border-bottom: 1px solid currentColor;
			padding-block: 0.4em;
			@media (width <= 768px){ font-size: 18px; }
			}
		}
	& .mv1text.mv1text--center {
		margin-left: auto;
		margin-right: auto;
		left: 0;
		top: 0;
		@media (width <= 768px){ top: 0; }
		}
	& .mv1text:is(h2) {
		writing-mode: vertical-rl;
		text-align: start;
		text-orientation: upright;
		font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
		font-weight: 400;
		line-height: 2;
		letter-spacing: 0.1em;
		@media (width <= 768px){ font-size: 28px; line-height: 1.8; }
		}
	& .mv2 {
		width: var(--width-full);
		height: 100dvh;
		position: relative;

		& .mv2-viewport {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			}
		& .mv2text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			font-size: 1.8rem;
			text-align: center;
			z-index: 2;
			color: var(--accent-sub-color);
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 3em;
			filter: drop-shadow(rgba(0, 0, 0, .7) 0px 0px 6px);
			pointer-events: none;
			@media (width <= 768px) {
				font-size: 1.4rem;
				}
			& > .mv2Title {
				font-size: clamp(2rem, 1.514rem + 2.08vw, 3.2rem);
				font-weight: 400;
				letter-spacing: 0.2em;
				}
			& > p {
				line-height: 2.5;
				}
			}
		& .mv2bg {
			position: absolute;
			inset: 0;
			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				will-change: clip-path, filter, transform;
				}
			}
		}
	}

@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: 4em 2em 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	background: var(--bg-sub-color);
	color: var(--def-font-color);
	text-align: center;
	@media (width <= 768px) {
		padding: 3em 1em 0;
		}
	& .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;
			}
		}
	& .foot-info {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		margin-bottom: 100px;
		text-align: left;
		@media (width <= 768px) {
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 0;
			margin-bottom: 2em;
			}
		}
	& .logo {
		max-width: 248px;
		@media (width <= 768px) {
			width: 100%;
			text-align: center;
			margin-bottom: 1em;
			}
		}
	& .title {
		margin-bottom: 1em;
		font-weight: 600;
		}
	& .text {
		margin: 0 60px 0 40px;
		padding-left: 40px;
		border-left: 1px solid #2D2D2D;
		@media (width <= 768px) {
			width: 100%;
			margin: 0 0 1.5em;
			padding: 0;
			border-left: none;
			text-align: center;
			}
		}
	& .address {
		font-size: 1.3rem;
		}
	& .bnrCamp {
		& img {margin-bottom: 1em;}
		& .tyWrapper {position: relative;}
		& .tyWrapper > svg {position: absolute;
			top: 0; left: 0;
			pointer-events: none;}
		& .tyWrapper > svg:nth-of-type(1) {
			mix-blend-mode: lighten;
			z-index: 1;
			}
		& .tyWrapper > svg:nth-of-type(2) {
			mix-blend-mode: color;
			z-index: 2;}
		& .tyWrapper > svg:nth-of-type(3) {
			backdrop-filter: grayscale(1) invert(1) brightness(4) opacity(0.6);
			z-index: 1;
			border-radius: 13px 0 0 0;
			}
		@media (width <= 768px) {
			flex: 1;
			margin-bottom: 0;
			text-align: center;
			}
		}
	& .bnrFibestar img {
		width: 162px;
		}
	& .bnrFibestar {
		@media (width <= 768px) {
			flex: 1;
			text-align: center;
			}
		}
	& .sub-navi {
		width: 100%;
		padding: 0 0 2em;
		text-align: center;
		font-size: 1.2rem;
		font-family: var(--font-family-sans);
		& ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			}
		& ul li {
			display: inline-block;
			line-height: 2;
			padding: 0 10px;
			}
		@media (width <= 768px) {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: 0.2em;
			padding: 0 10px 2em;
			font-size: 1rem;
			& ul {
				display: contents;
				}
			}
		}
	& .copyright {
		width: 100%;
		padding: 0 0 4em;
		font-size: 1rem;
		font-family: var(--font-family-sans);
		@media (width <= 768px) {
			font-size: 0.8rem;
			padding: 0 0 10em;
			}
		}
	}
@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;*/
	position: relative;
	& section {
		position: relative;
		/*background: var(--def-bg-color);*/
		}
	}
.mainWrapper {
	}

.townConcept {
	position: relative;
	z-index: 1;
	margin-top: -60px;
	padding: 0 0 150px;
	@media (width <= 768px) {
		margin-top: -40px;
		overflow-x: hidden;
		}
	& .townConcept__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 48px;
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		box-sizing: border-box;
		@media (width <= 768px) {
			display: grid;
			grid-template-columns: 1fr 54.72vw;
			column-gap: 16px;
			row-gap: 50px;
			max-width: none;
			padding: 0 20px;
			}
		}
	& .townConcept__photo {
		flex-shrink: 0;
		width: 422px;
		height: 540px;
		&:first-child {
			padding-bottom: 220px;
			@media (width <= 768px) {
				grid-column: 1 / -1;
				grid-row: 1;
				justify-self: start;
				width: 54.72vw;
				height: auto;
				padding-bottom: 0;
				}
			}
		&:last-child {
			padding-top: 220px;
			@media (width <= 768px) {
				grid-column: 2;
				grid-row: 2;
				width: 100%;
				height: auto;
				padding-top: 0;
				}
			}
		& img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			display: block;
			@media (width <= 768px) { height: auto; object-fit: unset; }
			}
		}
	& .townConcept__text {
		flex-shrink: 0;
		writing-mode: vertical-rl;
		font-family: var(--font-family-mincho);
		font-size: 28px;
		letter-spacing: 0.1em;
		line-height: 3;
		color: var(--def-font-color);
		font-weight: 300;
		& p { margin: 0; }
		@media (width <= 768px) {
			grid-column: 1;
			grid-row: 2;
			align-self: center;
			justify-self: center;
			font-size: 18px;
			}
		}
	}

#details {
	overflow: hidden;
	& .container {
		position: relative;
		z-index: 1;
		}
	& .floorName {
		width: 100%;
		& .floor {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 1.6rem;
			font-family: var(--font-family-sans);
			line-height: 1.3;
			text-align: center;
			background: #424242;
			border-radius: 3px;
			padding: 0.2em 0.5em;
			@media (width <= 768px) {
				font-size: 1.2rem;
				}
			}
		& > h3 {
			writing-mode: horizontal-tb;
			font-size: 3rem;
			font-weight: 500;
			line-height: 1.5;
			color: #333;
			display: flex;
			align-items: center;
			gap: 0.2em;
			&:has(> span) { flex-wrap: wrap; }
			@media (width <= 768px) { font-size: 1.8rem; }
			& > span {
				font-size: 18px;
				flex-basis: 100%;
				order: -1;
				@media (width <= 768px) {
					font-size: 14px;
					flex-basis: auto;
					order: 0;
					}
				}
			&::before {
				content: '';
				display: inline-block;
				width: 1.666em;
				aspect-ratio: 79.97 / 42;
				background-image: url('../images/common/logo-mark01.svg');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				flex-shrink: 0;
				}
			}
		& hr {
			width: 114%;
			margin: 0.5em 0;
			}
		}
	& .point {
		padding: 0 20px 150px;
		@media (width <= 768px) { padding: 0 0 40px; }
		position: relative;
		display: flex;
		flex-direction: row-reverse;
		align-items: stretch;
		font-size: 1.4rem;
		@media (width <= 768px) { flex-direction: column-reverse; }
		&:nth-child(even) {
			flex-direction: row;
			@media (width <= 768px) { flex-direction: column-reverse; }
			& .point-body { padding: 40px 0 0 25px; @media (width <= 768px) { padding: 20px 0; } }
			& .floorName hr {
				width: 120%;
				margin-left: -20%;
				}
			}
		& .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";
				}
			  }
		& .photo-slider {
			flex: 0 0 822px;
			min-width: 0;
			overflow: hidden;
			@media (width <= 768px) { flex: none; width: 100%; }
			& .slider-items {
				width: 100%;
				}
			& img {
				width: 100%;
				object-fit: cover;
				border-radius: 10px;
				@media (width <= 768px) { border-radius: 0; }
				}
			}
		& .point-body {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: start;
			align-items: flex-start;
			gap: 6.5em;
			padding: 40px 10px 0 0;
			@media (width <= 768px) {
				gap: 1em;
				padding: 20px 0;
				}
			& > a { width: 100%; }
			}
		& .text {
			position: relative;
			text-align: left;
			line-height: 200%;
			font-weight: 500;
			width: 100%;
			@media (width <= 768px) { width: fit-content; }
			& > dt {
				font-size: 1.78rem;
				line-height: 1.8;
				@media (width <= 768px) { font-size: 1.2rem; }
				}
			& > .illust {
				position: absolute;
				z-index: -1;
				}
			& .indent {
				display: inline-block;
				padding-left: 1em;
				}
			& .indent-pc {
				display: inline-block;
				padding-left: 1em;
				@media (width <= 768px){ padding-left: 0; }
				}
			& .indent-sp {
				display: inline-block;
				padding-left: 0;
				@media (width <= 768px){ padding-left: 1em; }
				}
			}
		}
	& #point01 {
		& .illust {
			width: 88px;
			right: 30px;
			bottom: -20px;
			@media (width <= 768px) {
				width: 57px;
				left: calc(100% + 10px);
				bottom: -10px;
				}
			}
		@media (width <= 768px) {
			& hr { display: none; }
			& .photo-slider {
				width: calc(100% + 5vw);
				margin-right: -5vw;
				border-radius: 10px 0 0 10px;
				& .slick-list { border-radius: 10px 0 0 10px; }
				}
			}
		}
	& #point02 {
		& .illust {
			width: 96px;
			right: 0px;
			bottom: -30px;
			@media (width <= 768px) {
				width: 63px;
				left: calc(100% + 10px);
				bottom: -10px;
				}
			}
		@media (width <= 768px) {
			& hr { display: none; }
			& .photo-slider {
				width: calc(100% + 5vw);
				margin-left: -5vw;
				border-radius: 0 10px 10px 0;
				& .slick-list { border-radius: 0 10px 10px 0; }
				}
			}
		}
	& #point03, & #point04, & #point05 {
		& .floor {
			font-size: 1.4rem;
			@media (width <= 768px) { font-size: 1rem; }
			}
		}
	& #point03 {
		& .slider-item {
			position: relative;
			}
		& .slide-caption {
			position: absolute;
			bottom: 6px;
			right: 3px;
			font-size: 10px;
			font-family: var(--font-family-sans);
			color: #fff;
			line-height: 1.5;
			pointer-events: none;
			}
		& .illust {
			width: 80px;
			right: 20px;
			bottom: -95px;
			@media (width <= 768px) {
				width: 51px;
				left: calc(100% + 10px);
				bottom: -10px;
				}
			}
		@media (width <= 768px) {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-rows: auto auto;
			gap: 16px 1.8rem;
			& .point-body {
				display: contents;
				}
			& dl.text {
				grid-column: 1 / -1;
				grid-row: 1;
				}
			& .floorName {
				grid-column: 1;
				grid-row: 2;
				align-self: start;
				margin-top: 30px;
				width: 4em;
				position: relative;
				& > h3 {
					flex-direction: column;
					align-items: center;
					}
				& > hr {
					position: absolute;
					left: 0;
					width: calc(100% + 1.8rem + 1rem);
					}
				}
			& .photo-slider {
				grid-column: 2;
				grid-row: 2;
				width: calc(100% + 5vw);
				margin-right: -5vw;
				border-radius: 10px 0 0 10px;
				& .slick-list { border-radius: 10px 0 0 10px; }
				& .note { display: none; }
				}
			}
		}
	& #point04 {
		& .illust {
			width: 70px;
			right: 5px;
			bottom: -65px;
			@media (width <= 768px) {
				width: 44px;
				left: calc(100% + 10px);
				bottom: -10px;
				}
			}
		@media (width <= 768px) {
			display: grid;
			grid-template-columns: 1fr auto;
			grid-template-rows: auto auto;
			gap: 16px 1.8rem;
			& .point-body {
				display: contents;
				}
			& dl.text {
				grid-column: 1 / -1;
				grid-row: 1;
				}
			& .floorName {
				grid-column: 2;
				grid-row: 2;
				align-self: start;
				margin-top: 30px;
				width: 4em;
				position: relative;
				& > h3 {
					flex-direction: column;
					align-items: center;
					}
				& > hr {
					position: absolute;
					right: 0;
					width: calc(100% + 1.8rem + 1rem);
					}
				}
			& .photo-slider {
				grid-column: 1;
				grid-row: 2;
				width: calc(100% + 5vw);
				margin-left: -5vw;
				border-radius: 0 10px 10px 0;
				& .slick-list { border-radius: 0 10px 10px 0; }
				& .note { display: none; }
				}
			}
		}
	& #point05 {
		padding-bottom: 80px;
		& .illust {
			width: 96px;
			right: 20px;
			bottom: -70px;
			@media (width <= 768px) {
				width: 67px;
				left: calc(100% + 10px);
				bottom: -10px;
				}
			}
		@media (width <= 768px) {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-rows: auto auto;
			gap: 16px 1.8rem;
			& .point-body {
				display: contents;
				}
			& dl.text {
				grid-column: 1 / -1;
				grid-row: 1;
				}
			& .floorName {
				grid-column: 1;
				grid-row: 2;
				align-self: start;
				margin-top: 30px;
				width: 4em;
				position: relative;
				& > h3 {
					flex-direction: column;
					align-items: center;
					}
				& > hr {
					position: absolute;
					left: 0;
					width: calc(100% + 1.8rem + 1rem);
					}
				}
			& .photo-slider {
				grid-column: 2;
				grid-row: 2;
				width: calc(100% + 5vw);
				margin-right: -5vw;
				border-radius: 10px 0 0 10px;
				& .slick-list { border-radius: 10px 0 0 10px; }
				& .note { display: none; }
				}
			}
		}
	}
.note {
	font-size: 0.85em;
	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;
			}
		}
	}


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

/* -------------------------------------------------------------------------
	PAGE TOP BUTTON
========================================================================= */
#page-top {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #c6c1bd;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 900;
	text-decoration: none;
}
#page-top::before {
	content: '';
	display: block;
	width: 11px;
	height: 11px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(-45deg);
	margin-top: 5px;
}
#page-top.visible {
	opacity: 1;
	pointer-events: auto;
}
@media screen and (max-width: 768px) {
	#page-top {
		bottom: 60px;
		right: 20px;
	}
}