@charset "utf-8";

/* pageMv (common.css) */
.pageMv .pageMvTit {
	bottom: 8%;
	left: 64.5%;
}

@media screen and (max-width: 1000px) {
	.pageMv .pageMvTit {
		bottom: 12%;
		left: auto;
		right: 5%;
	}
}

/* pageIntro (common.css) */
.pageIntro h2 {
	color: #2b7a87;
}

/* locSec */
.locSec {
	padding: 0 0 13rem;
}

.locSec .secHead {
	position: relative;
	height: 410px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #ffffff;
}

.daily .secHead {
	background-image: url(../img/location/daily-bg.webp);
}

.relax .secHead {
	background-image: url(../img/location/relax-bg.webp);
}

.weekend .secHead {
	background-image: url(../img/location/weekend-bg.webp);
}

.locSec .secHead .secHeadTit {
    padding-top: 4rem;
    position: relative;
    z-index: 3;
}

.locSec .secHead .secHeadTit.fade-up {
    transition-delay: 0.8s;
}

.locSec .secHead.fade-img {
    --fade-bg: #ffffff;
}

.locSec .secHead h2 {
	font-family: "Playfair Display", serif;
	font-size: 6.4rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
    margin-bottom: 1.8rem;
}

.locSec .secHead p {
	font-size: 2.8rem;
    font-weight: 500;
	line-height: 1.6;
	text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    padding-left: 0.6em;
}

.locSec .secLead {
	text-align: center;
	font-size: 2.2rem;
	line-height: 2;
	padding: 6.5rem 0 11rem;
}

.locSec .dist {
	font-size: 1.6rem;
}

.locSec .dist span {
	font-size: 2.4rem;
	line-height: 0.5;
	letter-spacing: 0.05em;
	color: #0e666c;
	margin: 0 1px;
}

.locSec .catch {
	color: #0e666c;
	font-size: min(2.5vw, 2.6rem);
	line-height: 1.6;
	letter-spacing: -0.02em;
	font-weight: 500;
}

.locSec h3 {
	font-size: min(2.7vw, 2.8rem);
	font-weight: 500;
	color: #131b27;
    letter-spacing: -0.04em;
}

.locSec .desc {
    font-size: min(1.5vw, 1.6rem);
	line-height: 1.6;
	margin: 1.2rem 0 0;
}

/* featBox */
.featBox {
	align-items: center;
	margin: 0 0 4rem;
}

.featBox .featImg {
	width: 49%;
}

.featBox .featImg img {
	width: 100%;
}

.featBox .featTxt {
	width: 45%;
    padding-right: 4rem;
}

.featBox .featTxt .catch {
	margin: 1.5rem 0 5rem;
}

.daily .featBox {
	align-items: flex-start;
}

.featBox .featTxt .dist {
	font-size: 1.9rem;
}

.featBox .featTxt .dist span {
	font-family: "EB Garamond", serif;
	font-weight: 400;
	font-variant-numeric: lining-nums;
	font-size: 3rem;
}

/* facList */
.facList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem 2.5rem;
	font-family: "Noto Serif JP", serif;
	-webkit-font-feature-settings: 'palt' 1;
    font-feature-settings: 'palt' 1;
}

.facList li img {
	width: 100%;
}

.facList li .name {
    font-size: min(1.5vw, 1.6rem);
	margin: 0.8rem 0 0;
	line-height: 1.5;
    letter-spacing: 0em;
}

.facList li .name.small {
	font-size: 1.4rem;
    letter-spacing: -0.02em;
}

.facList li .dist {
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.daily .catchMed {
	margin: 6rem 0 2rem;
}

@media screen and (max-width: 1000px) {
	.locSec {
		padding: 0 0 8rem;
	}

	.locSec .secHead {
		height: 56vw;
	}

    .locSec .secHead .secHeadTit {
        padding-top: 2rem;
    }

	.locSec .secHead h2 {
		font-size: min(11vw, 6.4rem);
        margin-bottom: 1.2rem;
	}

	.locSec .secHead p {
		font-size: min(4.6vw, 2.8rem);
	}

	.locSec .secLead {
		text-align: left;
		font-size: min(3.6vw, 1.9rem);
		line-height: 2;
		padding: 4rem 0 5rem;
	}

	.locSec .secLead br {
		display: none;
	}

	.locSec .catch {
		font-size: min(5vw, 2.6rem);
	}

	.locSec h3 {
		font-size: min(5.5vw, 2.8rem);
	}

	.locSec .desc {
		font-size: min(3.6vw, 1.6rem);
	}

    .locSec .dist span {
        line-height: 0.8;
    }

    .featBox {
        margin-bottom: 3rem;
    }

	.featBox .featImg,
	.featBox .featTxt {
		width: 100%;
	}

	.featBox .featTxt {
		margin: 2rem 0 0;
		padding-right: 0;
	}

	.featBox .featTxt .catch {
		margin: 0 0 2rem;
	}

	.facList {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 1.5rem;
	}

	.facList li .name {
		font-size: min(3.6vw, 1.6rem);
	}

	.facList li .name.small {
		font-size: min(3.2vw, 1.4rem);
	}

	.facList li .dist {
		font-size: min(3.6vw, 1.6rem);
	}

	.daily .catchMed {
		margin: 4rem 0 2rem;
	}
}

/* relax */
.relax {
	background: #e5eeef;
	--fade-bg: #e5eeef;
}

.relaxImg img {
	width: 100%;
}

.relaxTxt {
	max-width: 410px;
	margin: 5rem auto 4rem;
}

.relaxTxt h3,
.relaxTxt .dist {
	text-align: center;
}

.relaxTxt .dist {
	font-size: 1.9rem;
	padding-left: 0.8em;
}

.relaxTxt .dist span {
	font-family: "EB Garamond", serif;
	font-weight: 400;
	font-variant-numeric: lining-nums;
	font-size: 3rem;
}

.parkList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
}

.parkList li {
	text-align: center;
	border-top: 1px solid #8a8f93;
	border-bottom: 1px solid #8a8f93;
	padding: 1.5rem 0;
	line-height: 1.5;
}

@media screen and (max-width: 1000px) {
	.relaxTxt {
		margin: 3rem auto 4rem;
	}

	.parkList {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	.parkList li {
		font-size: min(3.4vw, 1.6rem);
	}
}

/* weekend */
.areaHead {
	margin: 0 0 3rem;
}

.areaHead h3 {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0 0 1.2rem;
}

.areaHead h3 .en {
	font-family: "Playfair Display", serif;
	font-size: 4.4rem;
	font-weight: 500;
	color: #2b7a87;
	line-height: 1.2;
}

.areaHead h3 .ja {
	font-size: 1.6rem;
}

.areaHead .catch {
	color: #131b27;
}

.weekend .featBox.aeon {
	margin: 0 0 3rem;
}

.weekend .featBox.aeon .featTxt {
	width: 39%;
	margin-right: 4rem;
}

.shopList {
	border-top: 1px solid #8a8f93;
}

.shopList .shopTit {
	font-family: "Playfair Display", serif;
	font-size: 1.8rem;
	font-weight: 600;
	color: #2b7a87;
	margin: 0 0 1rem;
}

.shopList ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
}

.shopList li {
	color: #ffffff;
	text-align: center;
	padding: 0.8rem 0.5rem;
	line-height: 1.3;
	font-size: min(1.4vw, 1.5rem);
    letter-spacing: 0.02em;
}

.shopList li span {
	display: block;
	font-size: 1.2rem;
}

.shopList li.c01 {
	background: #b47d9b;
}

.shopList li.c02 {
	background: #78b3ad;
}

.shopList li.c03 {
	background: #bf9a4a;
}

.shopList .note {
	text-align: right;
	font-size: 1.2rem;
	margin: 1rem 0 0;
	font-family: "Noto Sans JP", sans-serif;
}

.domeBox {
	margin: 13rem 0 0;
	align-items: flex-start;
}

.domeBox .featTxt {
	width: 36.4%;
	padding: 7.8rem 0 0 4.5%;
}

.weekend .featBox.aeon .featTxt h3,
.domeBox .featTxt h3 {
	letter-spacing: 0;
	white-space: nowrap;
}

.weekend .featBox.aeon .featTxt .dist,
.domeBox .featTxt .dist {
	font-size: 1.8rem;
}

.weekend .featBox.aeon .featTxt .dist span,
.domeBox .featTxt .dist span {
	font-family: "EB Garamond", serif;
	font-weight: 400;
	font-variant-numeric: lining-nums;
	font-size: 3rem;
}

.domeImgs {
	width: 63.6%;
	position: relative;
	aspect-ratio: 1326 / 1398;
}

.domeImgs figure {
	position: absolute;
}

.domeImgs img {
	width: 100%;
}

.domeImgs .img01 {
	top: 0;
	right: 0;
	width: 87.9%;
}

.domeImgs .img02 {
	top: 48.8%;
	left: 0;
	width: 63.3%;
	z-index: 1;
}

.domeImgs .img03 {
	top: 68%;
	right: 0;
	width: 47.4%;
	z-index: 2;
}

@media screen and (max-width: 1000px) {
	.areaHead h3 {
		gap: 1rem;
	}

	.areaHead h3 .en {
		font-size: min(8vw, 4.4rem);
	}

	.areaHead h3 .ja {
		font-size: min(3.4vw, 1.6rem);
	}

	.weekend .featBox.aeon .featTxt {
		width: 100%;
		margin-right: 0;
		padding-right: 0;
	}

	.shopList ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.shopList li {
		font-size: min(3.2vw, 1.6rem);
	}

	.shopList li span {
		font-size: min(2.8vw, 1.3rem);
	}

	.shopList .note {
		font-size: min(3vw, 1.2rem);
	}

	.domeBox {
		margin: 6rem 0 0;
	}

	.domeBox .featTxt {
		width: 100%;
		padding: 0;
		margin: 0 0 3rem;
	}

	.domeImgs {
		width: 100%;
	}
}

/* lifeInfo */
.lifeInfo {
	padding: 0 0 20rem;
}

.lifeInfo .lifeTit {
	font-family: "Playfair Display", serif;
	font-size: 4.4rem;
	font-weight: 500;
	color: #0e666c;
	text-align: center;
	margin: 0 0 9rem;
}

.lifeMap img {
	width: 100%;
}

.lifeBlock {
	margin: 14.5rem 0 0;
	font-family: "Noto Serif JP", serif;
	-webkit-font-feature-settings: 'palt' 1;
    font-feature-settings: 'palt' 1;
}

.lifeBlock + .lifeBlock {
	margin: 8rem 0 0;
}

.lifeBlock h3 {
	background: #0e666c;
	color: #ffffff;
	text-align: center;
	font-size: 2.2rem;
	font-weight: 500;
	padding: 0.6rem 0;
	margin: 0 0 1rem;
}

.lifeBlock ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 4rem;
}

.lifeBlock li {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.5rem;
    height: 6rem;
	border-bottom: 1px solid #8a8f93;
	padding: 0 0 0.8rem;
	font-size: min(1.7vw, 1.8rem);
	line-height: 1.2;
	letter-spacing: 0;
}

.lifeBlock li small {
	font-size: min(1.4vw, 1.5rem);
}

.lifeBlock li .dist {
	flex-shrink: 0;
}

@media screen and (max-width: 1000px) {
	.lifeInfo {
		padding: 0 0 10rem;
	}

	.lifeInfo .lifeTit {
		font-size: min(8vw, 4.4rem);
		margin: 0 0 3rem;
	}

	.lifeMapImg {
		overflow-x: auto;
	}

	.lifeMapImg img {
		width: 700px;
		max-width: none;
	}

    .lifeMap .swipe {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 2rem;
	}

	.lifeMap .swipe span {
		background: #2b7a87;
		border-radius: 5px;
		color: #fff;
		padding: 5px 20px;
		font-size: 14px;
		line-height: 1.4;
	}

	.lifeMap .swipe img {
		width: 40px;
		margin-left: 1rem;
	}

	.lifeBlock {
		margin: 7rem 0 0;
	}

	.lifeBlock + .lifeBlock {
        margin: 4rem 0 0;
    }

	.lifeBlock h3 {
		font-size: min(4.4vw, 2.2rem);
	}

	.lifeBlock ul {
		grid-template-columns: 1fr;
	}

	.lifeBlock li {
		font-size: min(3.4vw, 1.6rem);
		padding: 0 0 0.5rem;
        height: min(11.5vw, 5rem);
	}

	.lifeBlock li small {
		font-size: min(2.85vw, 1.5rem);
	}
}

/* botCap */
.botCap .m-cap {
	line-height: 1.83;
	letter-spacing: 0.06em;
}
