@charset "UTF-8";
/*--------------------------------------------------------------
ヘッダー
--------------------------------------------------------------*/
.header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 10;
	height: var(--header-height);
	padding-inline: 32px;
	background-color: #fff;
	border-bottom: 1px solid var(--color-gray);
	transition: translate 0.4s ease-in-out;
}

@media screen and (max-width: 1200px) {
	.header {
		padding-inline: 24px;
	}
}

@media screen and (max-width: 767px) {
	.header {
		padding-inline: 16px;
	}
}

.header.is-hidden {
	translate: 0 -100%;
}

.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.header__logo {
	width: 72px;
	font-size: 1rem;
}

@media screen and (max-width: 1600px) {
	.header__logo {
		width: 58px;
	}
}

@media screen and (max-width: 1200px) {
	.header__logo {
		width: 46px;
	}
}

@media screen and (max-width: 767px) {
	.header__logo {
		width: 40px;
	}
}

.header__menu-button {
	--bar: 3px;
	box-sizing: content-box;
	width: 34px;
	aspect-ratio: 34 / 26;
	margin-right: -12px;
	padding: 12px;
	background:
		linear-gradient(currentColor, currentColor) content-box top / 100% var(--bar) no-repeat,
		linear-gradient(currentColor, currentColor) content-box center / 100% var(--bar) no-repeat,
		linear-gradient(currentColor, currentColor) content-box bottom / 100% var(--bar) no-repeat;
}

@media screen and (max-width: 1600px) {
	.header__menu-button {
		--bar: 2px;
		width: 28px;
	}
}

@media screen and (max-width: 1200px) {
	.header__menu-button {
		width: 24px;
	}
}

@media screen and (max-width: 767px) {
	.header__menu-button {
		width: 22px;
	}
}

.header__menu-button[aria-expanded="true"] {
	background:
		linear-gradient(45deg, transparent calc(50% - var(--bar) / 2), currentColor 0 calc(50% + var(--bar) / 2), transparent 0) content-box,
		linear-gradient(-45deg, transparent calc(50% - var(--bar) / 2), currentColor 0 calc(50% + var(--bar) / 2), transparent 0) content-box;
}

html.is-menu-open {
	overflow: hidden;
}

.header__nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: calc(100dvh - var(--header-height));
	background-color: rgb(0 0 0 / 0.4);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
}

.header__nav.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

.header__nav-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 86%;
	max-width: 440px;
	height: 100%;
	margin-left: auto;
	padding: 1.5em 2em 0;
	overflow-y: auto;
	background-color: #fff;
	translate: 100% 0;
	transition: translate 0.5s ease-in-out;
}

@media screen and (max-width: 767px) {
	.header__nav-panel {
		width: 88%;
		padding-inline: 1.5em;
	}
}

.header__nav.is-open .header__nav-panel {
	translate: 0 0;
}

.header__nav-list {
	position: relative;
	z-index: 1;
}

.header__nav-list li + li {
	background: radial-gradient(circle closest-side, var(--color-text-gray) 85%, transparent 100%) top left / 10px 2px repeat-x;
}

.header__nav-link {
	display: grid;
	padding-block: 1.1em;
	letter-spacing: 0.15em;
}

.header__nav-name {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}

@media screen and (max-width: 767px) {
	.header__nav-name {
		font-size: 1.25rem;
	}
}

.header__nav-caption {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text-gray);
}

@media (hover: hover) {
	.header__nav-link:hover .header__nav-name {
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

.header__nav-buttons {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.75em;
	margin-top: 1.75em;
	padding-bottom: 2em;
}

.header__nav-button {
	display: block;
	padding: 1em;
	border: 2px solid var(--color-black);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

@media (hover: hover) {
	.header__nav-button:hover {
		background-color: var(--color-black);
		color: var(--color-bg);
	}
}

/*--------------------------------------------------------------
FV
--------------------------------------------------------------*/
.intro {
	position: relative;
	isolation: isolate;
	padding-block: 0 151px;
	overflow: hidden;
	overflow: clip;
}

@media screen and (max-width: 1600px) {
	.intro {
		padding-block: 0 113px;
	}
}

@media screen and (max-width: 1200px) {
	.intro {
		padding-block: 0 83px;
	}
}

@media screen and (max-width: 767px) {
	.intro {
		padding-block: 0 56px;
	}
}


@media screen and (max-width: 767px) {
	.intro__stamps {
		--kp: 1.55;
		--u: calc(min(100vw, 480px) / 1920 * var(--kp));
		--kx: 0.9;
		--ox: -146;
		--xin: 120;
		--xout: -160;
		--stamp-size: calc(214 * var(--u));
	}
}

@media screen and (max-width: 767px) {
	.intro__stamps .c-stamps__item {
		display: block;
		top: calc((var(--y) * 54 + var(--rep, 0) * 5400) * var(--u));
		left: calc((var(--x) * var(--kx) + var(--ox)) * var(--u));
		right: auto;
		translate: -50% -50%;
	}
}

@media screen and (max-width: 767px) {
	.intro__stamps .c-stamps__item--right {
		left: auto;
		right: calc((var(--x) * var(--kx) + var(--ox)) * var(--u));
		translate: 50% -50%;
	}
}


@media screen and (max-width: 767px) {
	.intro__stamps .c-stamps__item[hidden] {
		display: none;
	}
}

.fv {
	position: relative;
	z-index: -1;
	height: clamp(44vw, 100vh, 100vw);
	height: clamp(44vw, 100svh, 100vw);
	overflow: hidden;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.fv {
		height: max(66vw, 100vh);
		height: max(66vw, 100svh);
		background-color: var(--color-black);
		transition: background-color 1.4s ease-in-out;
	}
}


@media screen and (max-width: 767px) {
	.fv.is-logo {
		background-color: var(--color-bg);
	}
}


@media screen and (max-width: 767px) {
	.is-scrolled .fv {
		transition-duration: 0.4s;
	}
}

.fv::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	aspect-ratio: 1;
	translate: 0 -50%;
	background-color: var(--color-bg);
}

@media screen and (max-width: 767px) {
	.fv::before {
		aspect-ratio: 9 / 16;
	}
}

.fv__video {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	aspect-ratio: 1;
	translate: 0 -50%;
	pointer-events: none;
}

@media screen and (max-width: 767px) {
	.fv__video {
		aspect-ratio: 9 / 16;
	}
}

.fv__logo {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 31.4%;
	height: auto;
	translate: -50% -50%;
}

@media screen and (max-width: 767px) {
	.fv__logo {
		width: 63.3%;
	}
}

.fv.is-fallback .fv__video {
	display: none;
}

.fv.is-fallback .fv__logo {
	display: block;
}

/*--------------------------------------------------------------
ステートメント
--------------------------------------------------------------*/
.statement {
	position: relative;
	z-index: 1;
	text-align: center;
}

.statement__copy {
	--fade-time: 1.2s;
	width: fit-content;
	margin: 1em auto 0;
	font-size: 1.65rem;
}

@media screen and (max-width: 1600px) {
	.statement__copy {
		font-size: 1.375rem;
	}
}

@media screen and (max-width: 1200px) {
	.statement__copy {
		font-size: 0.9375rem;
	}
}

@media screen and (max-width: 767px) {
	.statement__copy {
		font-size: 0.8125rem;
	}
}

@media screen and (max-width: 480px) {
	.statement__copy {
		font-size: 0.75rem;
	}
}

.statement__paragraph {
	display: grid;
	justify-items: start;
	row-gap: 1.97em;
}

@media screen and (max-width: 767px) {
	.statement__paragraph {
		row-gap: 1.42em; /* 17px */
	}
}

.statement__paragraph + .statement__paragraph {
	margin-top: 4.17em;
}

@media screen and (max-width: 767px) {
	.statement__paragraph + .statement__paragraph {
		margin-top: 3.67em; /* 44px */
	}
}

.statement__line {
	max-width: none;
	width: auto;
	height: 1em;
	--fade-y: max(1.2em, 24px);
}

.statement__open {
	--open-logo-width: 588px;
	margin-top: 126px;
}

@media screen and (max-width: 1600px) {
	.statement__open {
		--open-logo-width: 490px;
		margin-top: 105px;
	}
}

@media screen and (max-width: 1200px) {
	.statement__open {
		--open-logo-width: 330px;
		margin-top: 81px;
	}
}

@media screen and (max-width: 767px) {
	.statement__open {
		--open-logo-width: 250px;
		margin-top: 60px;
	}
}

@media screen and (max-width: 480px) {
	.statement__open {
		--open-logo-width: 225px;
		margin-top: 56px;
	}
}

.statement__open-logo {
	width: var(--open-logo-width);
	margin-inline: auto;
}

.statement__open-catch {
	display: block;
	width: calc(var(--open-logo-width) * 0.5418);
	height: auto;
	margin: 0 auto calc(var(--open-logo-width) * 0.0406);
}

.statement__open-text {
	margin: 51px 0 0;
	font-size: 2.75rem;
}

@media screen and (max-width: 1600px) {
	.statement__open-text {
		margin-top: 42px;
		font-size: 2.3125rem;
	}
}

@media screen and (max-width: 1200px) {
	.statement__open-text {
		margin-top: 29px;
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 767px) {
	.statement__open-text {
		margin-top: 18px;
	}
}

@media screen and (max-width: 480px) {
	.statement__open-text {
		margin-top: 16px;
		font-size: 1.375rem;
	}
}

.statement__open-season {
	display: block;
	width: auto;
	height: 1em;
	margin-inline: auto;
}

.statement__open-place {
	display: block;
	width: auto;
	height: 0.82em; /* 36px */
	margin: 0.48em auto 0;
}

@media screen and (max-width: 767px) {
	.statement__open-place {
		margin-top: 0.36em; /* 8px */
	}
}

.statement__movie {
	aspect-ratio: 4 / 3;
	width: calc(100% - 660px);
	max-width: 1100px;
	margin: 120px auto 0;
}

@media screen and (max-width: 1600px) {
	.statement__movie {
		width: calc(100% - 495px);
		max-width: 825px;
		margin-top: 90px;
	}
}

@media screen and (max-width: 1200px) {
	.statement__movie {
		width: calc(100% - 330px);
		max-width: 560px;
		margin-top: 66px;
	}
}

@media screen and (max-width: 767px) {
	.statement__movie {
		width: calc(100% - 30px);
		max-width: 500px;
		margin-top: 40px;
	}
}

.statement__movie iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/*--------------------------------------------------------------
コンセプト
--------------------------------------------------------------*/
.concept {
	position: relative;
	z-index: 1;
	margin-top: 159px;
	font-size: var(--font-size-base);
	text-align: center;
	display: grid;
	grid-template-columns: max-content;
	justify-content: center;
}

@media screen and (max-width: 1600px) {
	.concept {
		margin-top: 119px;
	}
}

@media screen and (max-width: 1200px) {
	.concept {
		margin-top: 87px;
	}
}

@media screen and (max-width: 767px) {
	.concept {
		margin-top: 72px;
		display: block;
		padding-inline: 46px;
	}
}

@media screen and (max-width: 374px) {
	.concept {
		padding-inline: 36px;
	}
}


@media screen and (max-width: 767px) {
	.statement__copy,
.concept__title,
.concept__text {
		position: relative;
	}
}

@media screen and (max-width: 767px) {
	.statement__copy::before,
.concept__title::before,
.concept__text::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: -0.8em -1.6em;
		background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9) 22%, rgba(255, 255, 255, 0.9) 78%, transparent);
		pointer-events: none;
	}
}

.concept__block + .concept__block .concept__title {
	margin-top: 5.2em;
}

@media screen and (max-width: 767px) {
	.concept__block + .concept__block .concept__title {
		margin-top: 3.69em; /* 48px */
	}
}

.concept__block {
	display: contents;
}

@media screen and (max-width: 767px) {
	.concept__block {
		display: block;
	}
}

.concept__title {
	justify-self: center;
	font-size: 1em;
}

@media screen and (max-width: 767px) {
	.concept__title {
		justify-self: auto;
	}
}

.concept__title img {
	display: block;
	width: auto;
	max-width: none;
	height: 4.48em; /* 112px */
	margin-inline: auto;
}

@media screen and (max-width: 767px) {
	.concept__title img {
		max-width: 100%;
		height: auto;
		max-height: 3.38em; /* 44px */
	}
}

.concept__text {
	margin-top: 1.88em; /* 47px */
	text-align: left;
	translate: 2em 0;
}

@media screen and (max-width: 767px) {
	.concept__text {
		translate: none;
		width: fit-content;
		margin: 1.54em auto 0; /* 20px */
		font-size: clamp(0.5875rem, calc((100vw - 104px) / 22.5), 0.8125rem);
	}
}

.concept__text p {
	line-height: 1.85;
	letter-spacing: 0.11em;
	white-space: nowrap;
}

.concept__text p + p {
	margin-top: 0.8em; /* 20px */
}

.concept__text--name p + p {
	margin-top: 1.85em;
}

/*--------------------------------------------------------------
NEWS
--------------------------------------------------------------*/
.information {
	padding-block: var(--section-space) calc(var(--section-space) - 8px);
	background-color: var(--color-bg-gray);
}

@media screen and (max-width: 767px) {
	.information {
		padding-bottom: var(--section-space);
	}
}

.information__marquee {
	--marquee-copies: 3;
	--marquee-duration: 30s;
}

.information__marquee .c-marquee__track {
	mix-blend-mode: normal;
}

.information__list {
	box-sizing: content-box;
	max-width: 1100px;
	margin: 42px auto 0;
	padding-inline: 32px;
}

@media screen and (max-width: 1600px) {
	.information__list {
		max-width: 880px;
		margin-top: 34px;
	}
}

@media screen and (max-width: 1200px) {
	.information__list {
		max-width: 640px;
		margin-top: 26px;
	}
}

@media screen and (max-width: 767px) {
	.information__list {
		max-width: 560px;
		margin-top: 44px;
		padding-inline: 20px;
	}
}

.information__item + .information__item {
	background: radial-gradient(circle closest-side, var(--color-text-gray) 85%, transparent 100%) top left / 10px 2px repeat-x;
}

@media screen and (max-width: 1600px) {
	.information__item + .information__item {
		background-size: 8px 2px;
	}
}

@media screen and (max-width: 1200px) {
	.information__item + .information__item {
		background-size: 7px 2px;
	}
}

@media screen and (max-width: 767px) {
	.information__item + .information__item {
		background-size: 6px 2px;
	}
}

.information__link {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 2.17em; /* 65px */
	padding: 1.45em 2em 1.45em 0; /* 43.5px 60px 43.5px 0 */
	font-size: var(--font-size-lg);
	font-weight: 500;
	line-height: 1.33;
	color: var(--color-text-gray);
}

@media screen and (max-width: 767px) {
	.information__link {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.14em; /* 2px */
		padding: 1.43em 2.29em 1.43em 0; /* 20px 32px 20px 0 */
	}
}


/* 矢印 */
.information__link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.93em; /* 28px */
	width: 0.47em; /* 14px */
	aspect-ratio: 1;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	translate: 0 -50%;
	rotate: 45deg;
}

@media screen and (max-width: 767px) {
	.information__link::after {
		right: 0.57em; /* 8px */
		width: 0.57em; /* 8px */
	}
}

.information__date {
	flex-shrink: 0;
}

/*--------------------------------------------------------------
FLOOR GUIDE
--------------------------------------------------------------*/
.floorguide {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	background: var(--color-bg-beige) url("../img/floorguide_bg.jpg") center top / cover no-repeat;
}

@media screen and (max-width: 767px) {
	.floorguide {
		padding-top: var(--section-space);
	}
}

@media screen and (max-width: 480px) {
	.floorguide {
		--sp: min(1px, 0.2545vw);
		--font-size-base: min(0.8125rem, 3.308vw);
		--font-size-lg: min(0.875rem, 3.563vw);
	}
}

.floorguide__marquee {
	--marquee-copies: 3;
	--marquee-duration: 33s;
	position: absolute;
	top: var(--section-space);
	left: 0;
	right: 0;
}

@media screen and (max-width: 767px) {
	.floorguide__marquee {
		position: static;
	}
}

.floorguide__list {
	display: grid;
	padding-bottom: calc(180 * var(--pc));
}

@media screen and (max-width: 767px) {
	.floorguide__list {
		padding-bottom: calc(114 * var(--sp));
	}
}

.floorguide__item {
	--badge-size: 97;
	--badge-font: 44;
	position: relative;
	grid-area: 1 / 1;
	align-self: start;
	justify-self: start;
	width: calc(var(--w) * var(--pc));
	margin: calc(var(--y) * var(--pc)) 0 0 calc(var(--x) * var(--pc));
}

@media screen and (max-width: 767px) {
	.floorguide__item {
		--pc: calc(var(--sp) * var(--sw) / var(--w));
		width: calc(var(--sw) * var(--sp));
		margin: calc(var(--sy) * var(--sp)) 0 0 calc(var(--sx) * var(--sp));
	}
}

.floorguide__item--4f {
	--badge-size: 140;
	--badge-font: 62;
	--badge-x: 16;
	--badge-y: 0;
	--more-x: 484;
	--more-y: 597;
	--floor-color: var(--color-blue);
}

.floorguide__item--3f {
	--badge-x: 41;
	--badge-y: 18;
	--more-x: 377;
	--more-y: 441;
	--floor-color: var(--color-black);
}

.floorguide__item--2f {
	--badge-x: 50;
	--badge-y: 31;
	--more-x: 383;
	--more-y: 453;
	--floor-color: var(--color-red);
}

.floorguide__item--1f {
	--badge-x: 56;
	--badge-y: 1;
	--more-x: 367;
	--more-y: 458;
	--floor-color: var(--color-green);
}

.floorguide__photo {
	width: 100%;
}

.floorguide__badge {
	position: absolute;
	left: calc(var(--badge-x) * var(--pc));
	top: calc(var(--badge-y) * var(--pc));
	display: grid;
	place-items: center;
	width: calc(var(--badge-size) * var(--pc));
	aspect-ratio: 1;
	padding-bottom: 0.1em;
	font-size: calc(var(--badge-font) * var(--pc));
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
}

/* 九角形の地 */
.floorguide__badge::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--floor-color);
	-webkit-mask: var(--mask-nonagon) center / 100% 100% no-repeat;
	mask: var(--mask-nonagon) center / 100% 100% no-repeat;
}

.floorguide__badge-text {
	position: relative;
}

.floorguide__lead {
	position: absolute;
	mix-blend-mode: multiply;
	font-size: var(--font-size-base);
	line-height: 1.4;
	width: max-content;
	max-width: 16em;
	color: var(--floor-color);
	transform-origin: left top;
}

@media screen and (max-width: 767px) {
	.floorguide__lead {
		max-width: min(16em, calc(var(--room, 1000) * 1em / 13 + 1em));
	}
}

.floorguide__logo {
	position: absolute;
	left: calc(-435 * var(--pc));
	top: calc(16 * var(--pc));
	width: calc(340 * var(--pc));
	height: auto;
	rotate: -3deg;
	transform-origin: left top;
}

@media screen and (max-width: 767px) {
	.floorguide__logo {
		left: calc(-30 * var(--sp));
		top: calc(369 * var(--sp));
		width: calc(160 * var(--sp));
	}
}

.floorguide__item--4f .floorguide__lead {
	left: calc(-423 * var(--pc));
	top: calc(215 * var(--pc));
	font-size: var(--font-size-lg);
	line-height: 1.33;
	rotate: -3deg;
}

@media screen and (max-width: 767px) {
	.floorguide__item--4f .floorguide__lead {
		left: calc(151 * var(--sp));
		top: calc(366 * var(--sp));
	}
}

.floorguide__item--3f .floorguide__lead {
	left: calc(609 * var(--pc));
	top: calc(191 * var(--pc));
	rotate: 6deg;
}

@media screen and (max-width: 767px) {
	.floorguide__item--3f .floorguide__lead {
		left: calc(175 * var(--sp));
		top: calc(-78 * var(--sp));
		rotate: 4deg;
	}
}

.floorguide__item--2f .floorguide__lead {
	right: calc(100% + 38 * var(--pc));
	top: calc(200 * var(--pc));
	text-align: right;
	rotate: -6deg;
	transform-origin: right top;
}

@media screen and (max-width: 767px) {
	.floorguide__item--2f .floorguide__lead {
		right: calc(171 * var(--sp));
		top: calc(294 * var(--sp));
		rotate: -4deg;
	}
}

.floorguide__item--1f .floorguide__lead {
	left: calc(595 * var(--pc));
	top: calc(195 * var(--pc));
	rotate: 6deg;
}

@media screen and (max-width: 767px) {
	.floorguide__item--1f .floorguide__lead {
		left: calc(212 * var(--sp));
		top: calc(-63 * var(--sp));
		rotate: 4deg;
	}
}

.floorguide__steams {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
湯気
*/
.floorguide__steam {
	position: absolute;
	left: calc(var(--x) * var(--pc));
	top: calc(var(--y) * var(--pc));
	z-index: -1;
	width: calc(var(--w) * var(--pc));
	height: calc(var(--h) * var(--pc));
	background: radial-gradient(50% 50% at 50% 58%, #fff 40%, rgba(255, 255, 255, 0) 100%);
	filter: blur(10px);
	translate: -50% -50%;
	mix-blend-mode: screen;
	animation: steam-rise 6.5s ease-in-out infinite var(--delay, 0s);
}

@media screen and (max-width: 1600px) {
	.floorguide__steam {
		filter: blur(8px);
	}
}

@media screen and (max-width: 1200px) {
	.floorguide__steam {
		filter: blur(6px);
	}
}

@media screen and (max-width: 767px) {
	.floorguide__steam {
		left: calc(var(--sx) * var(--sp));
		top: calc(var(--sy) * var(--sp));
		width: calc(var(--sw) * var(--sp));
		height: calc(var(--sh) * var(--sp));
	}
}

.floorguide__steam::before,
.floorguide__steam::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(closest-side, #fff 45%, rgba(255, 255, 255, 0) 100%);
	animation: steam-puff 2.6s ease-in-out infinite alternate var(--delay, 0s);
}

.floorguide__steam::before {
	left: 4%;
	top: 2%;
	width: 58%;
	height: 72%;
}

.floorguide__steam::after {
	right: 2%;
	top: 14%;
	width: 54%;
	height: 66%;
	animation-duration: 3.3s;
	animation-direction: alternate-reverse;
}

.floorguide__steam--sp {
	display: none;
}

@media screen and (max-width: 767px) {
	.floorguide__steam--sp {
		display: block;
	}
}

.floorguide__steam--small {
	animation-duration: 4.8s;
}

/*
湯気の中から湧き上がるもや
*/
.floorguide__puff {
	position: absolute;
	inset: 0;
}

.floorguide__puff::before,
.floorguide__puff::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 40%;
	width: 55%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, #fff 35%, rgba(255, 255, 255, 0) 100%);
	opacity: 0;
	animation: steam-billow 4.2s ease-out infinite;
	animation-delay: calc(var(--delay, 0s) + var(--puff-delay, 0s));
}

.floorguide__puff:nth-child(1)::before {
	--dx: -70%;
}

.floorguide__puff:nth-child(1)::after {
	--dx: 60%;
	--puff-delay: -1.5s;
}

.floorguide__puff:nth-child(2)::before {
	--dx: -30%;
	--puff-delay: -3s;
}

.floorguide__puff:nth-child(2)::after {
	--dx: 80%;
	--puff-delay: -4.5s;
}

.floorguide__steam--small .floorguide__puff::before,
.floorguide__steam--small .floorguide__puff::after {
	animation-duration: 3.2s;
}

/* 湯気全体 */
@keyframes steam-rise {
	0% {
		translate: -50% -15%;
		scale: 0.8;
		opacity: 0;
	}

	25% {
		translate: -47% -50%;
		scale: 1;
		opacity: 0.9;
	}

	65% {
		translate: -53% -95%;
		scale: 1.2;
		opacity: 0.7;
	}

	100% {
		translate: -50% -135%;
		scale: 1.4;
		opacity: 0;
	}
}

/* 中のもや */
@keyframes steam-billow {
	0% {
		translate: -50% 0;
		scale: 0.4;
		opacity: 0;
	}

	20% {
		opacity: 0.95;
	}

	100% {
		translate: calc(-50% + var(--dx, 0%)) -260%;
		scale: 2.2;
		opacity: 0;
	}
}

@keyframes steam-puff {
	from {
		translate: -12% 14%;
		scale: 0.7;
	}

	to {
		translate: 12% -18%;
		scale: 1.3;
	}
}

/* 詳細ボタン */
.floorguide__more {
	position: absolute;
	left: calc(var(--more-x) * var(--pc));
	top: calc(var(--more-y) * var(--pc));
	width: max(calc(90 * var(--pc)), 40px);
	aspect-ratio: 1;
	background-color: #000;
	clip-path: var(--clip-nonagon);
	cursor: pointer;
	transition: scale 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

@media (hover: hover) {
	.floorguide__more:hover {
		scale: 1.1;
	}
}

.floorguide__more::before {
	content: "";
	position: absolute;
	inset: 2px;
	background-color: #fff;
	clip-path: var(--clip-nonagon);
}

.floorguide__more::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 36%;
	height: 36%;
	margin: auto;
	background:
		linear-gradient(#000, #000) center / 100% 3px no-repeat,
		linear-gradient(#000, #000) center / 3px 100% no-repeat;
}

.floorguide__more:focus-visible {
	background-color: var(--color-pink);
	outline: none;
}

/*--------------------------------------------------------------
日本初上陸
--------------------------------------------------------------*/
.food {
	--band-width: 201px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	background: var(--color-bg-paper) url("../img/food_bg.jpg") center top / 100% auto repeat-y;
}

@media screen and (max-width: 1600px) {
	.food {
		--band-width: 120px;
	}
}

@media screen and (max-width: 1200px) {
	.food {
		--band-width: 90px;
	}
}

@media screen and (max-width: 1024px) {
	.food {
		--band-width: 60px;
	}
}

@media screen and (max-width: 767px) {
	.food {
		--sp: 1.104px;
		--band-width: 48px;
		padding-top: var(--section-space);
	}
}

@media screen and (max-width: 480px) {
	.food {
		--sp: min(0.92px, 0.2341vw);
		--band-width: min(40px, 10.18vw);
	}
}

/* 左右の装飾帯 */
.food::before,
.food::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: var(--band-width);
	background: url("../img/food_l.jpg") center top / 100% auto repeat-y;
}

.food::before {
	left: 0;
}

.food::after {
	right: 0;
	background-image: url("../img/food_r.jpg");
}

.food__marquee {
	--marquee-copies: 2;
	--marquee-duration: 34s;
	position: absolute;
	top: var(--section-space);
	left: var(--band-width);
	right: var(--band-width);
}

@media screen and (max-width: 767px) {
	.food__marquee {
		position: static;
		margin-inline: var(--band-width);
	}
}

.food__inner {
	display: grid;
	padding-bottom: calc(140 * var(--pc));
}

@media screen and (max-width: 767px) {
	.food__inner {
		padding-bottom: calc(72 * var(--sp));
	}
}

.food__lead {
	grid-area: 1 / 1;
	align-self: start;
	margin-top: calc(382 * var(--pc));
	font-size: min(3.75rem, calc((100vw - 482px) / 20.4));
	line-height: 1.25;
	text-align: center;
	/* デザインは紙に乗算の赤 */
	mix-blend-mode: multiply;
	color: var(--color-red);
}

@media screen and (max-width: 1600px) {
	.food__lead {
		font-size: min(3rem, calc((100vw - 320px) / 20.4));
	}
}

@media screen and (max-width: 1200px) {
	.food__lead {
		font-size: 2rem;
	}
}

@media screen and (max-width: 1024px) {
	.food__lead {
		font-size: min(2rem, calc((100vw - 200px) / 20.4));
	}
}

@media screen and (max-width: 767px) {
	.food__lead {
		margin: calc(53 * var(--sp)) calc(40 * var(--sp)) 0;
		justify-self: center;
		font-size: 1.625rem;
		white-space: nowrap;
	}
}

@media screen and (max-width: 480px) {
	.food__lead {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 374px) {
	.food__lead {
		font-size: 1.375rem;
	}
}

.food__list {
	display: grid;
	grid-area: 1 / 1;
}

.food__item {
	position: relative;
	grid-area: 1 / 1;
	align-self: start;
	justify-self: start;
	width: calc(526 * var(--pc));
	margin: calc(var(--y) * var(--pc)) 0 0 calc(var(--x) * var(--pc));
}

@media screen and (max-width: 767px) {
	.food__item {
		width: calc(247 * var(--sp));
		margin: calc(var(--sy) * var(--sp)) 0 0 calc(var(--sx) * var(--sp));
	}
}

.food__item--pink {
	color: var(--color-pink);
}

.food__item--lightblue {
	color: var(--color-lightblue);
}

.food__item--orange {
	color: var(--color-orange);
}

.food__item--blue {
	color: var(--color-blue);
}

.food__item--green {
	color: var(--color-green);
}

.food__item--red {
	color: var(--color-red);
}

.food__image {
	position: relative;
}

.food__item--soon .food__image {
	aspect-ratio: 527.65 / 519.98;
}

.food__soon-text {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 2.25rem; /* 36px */
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	color: var(--color-pink);
	animation: food-kakukaku 1.04s steps(1, end) infinite;
}

@media screen and (max-width: 1600px) {
	.food__soon-text {
		font-size: 1.8125rem;
	}
}

@media screen and (max-width: 1200px) {
	.food__soon-text {
		font-size: 1.25rem;
	}
}

@media screen and (max-width: 767px) {
	.food__soon-text {
		font-size: 1.25rem;
	}
}

@media screen and (max-width: 374px) {
	.food__soon-text {
		font-size: 1.125rem;
	}
}

.food__photo {
	width: 100%;
	transform: scale(var(--k, 1));
	animation: food-kakukaku 1.04s steps(1, end) infinite;
}

.food__item:nth-child(4n + 2) .food__photo {
	animation-duration: 1.2s;
	animation-delay: -0.4s;
}

.food__item:nth-child(4n + 3) .food__photo {
	animation-duration: 1.12s;
	animation-delay: -0.7s;
}

.food__item:nth-child(4n) .food__photo {
	animation-duration: 1.28s;
	animation-delay: -0.9s;
}

.food__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.food__michelin {
	position: absolute;
	left: calc(var(--x) * var(--pc));
	top: calc(var(--y) * var(--pc));
	z-index: 1;
	width: calc(var(--w) * var(--pc));
	rotate: var(--r, 0deg);
}

@media screen and (max-width: 767px) {
	.food__michelin {
		left: calc(var(--sx) * var(--sp));
		top: calc(var(--sy) * var(--sp));
		width: calc(var(--sw) * var(--sp));
	}
}

.food__text {
	position: absolute;
	left: calc(var(--x) * var(--pc));
	top: calc(var(--y) * var(--pc));
	font-size: var(--font-size-base);
	line-height: 1.4;
	width: max-content;
	max-width: 16em;
	rotate: var(--r, 0deg);
	transform-origin: left top;
}

@media screen and (max-width: 767px) {
	.food__text {
		left: calc(var(--sx) * var(--sp));
		top: calc(var(--sy) * var(--sp));
		max-width: min(16em, calc(var(--room, 1000) * 1em / 13 + 1em));
		rotate: calc(var(--r, 0deg) * 0.3);
	}
}

@media screen and (max-width: 480px) {
	.food__text {
		font-size: min(0.8125rem, 3.308vw);
	}
}

.food__item--reverse .food__text {
	left: auto;
	right: calc(100% + var(--x) * var(--pc));
	text-align: right;
	transform-origin: right top;
}

@media screen and (max-width: 767px) {
	.food__item--reverse .food__text {
		left: auto;
		right: calc(var(--sx) * var(--sp));
	}
}

/* 装飾 */
.food__decorations {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.food__deco {
	position: absolute;
	left: calc(var(--x) * var(--pc));
	top: calc(var(--y) * var(--pc));
	width: calc(var(--w) * var(--pc));
}

@media screen and (max-width: 767px) {
	.food__deco {
		left: calc(var(--sx) * var(--sp));
		top: calc(var(--sy) * var(--sp));
		width: calc(var(--sw) * var(--sp));
	}
}

.food__deco-image {
	width: 100%;
}

@keyframes food-kakukaku {
	0% {
		rotate: -3deg;
		scale: 1.03;
	}

	25% {
		rotate: 3deg;
		scale: 1;
	}

	50% {
		rotate: -2deg;
		scale: 1.04;
	}

	75% {
		rotate: 2deg;
		scale: 1;
	}
}

/*--------------------------------------------------------------
LOCATION
--------------------------------------------------------------*/
.location {
	padding-block: var(--section-space) 11px;
	background-color: var(--color-bg-gray);
}

@media screen and (max-width: 1600px) {
	.location {
		padding-bottom: 8px;
	}
}

@media screen and (max-width: 1200px) {
	.location {
		padding-bottom: 6px;
	}
}

@media screen and (max-width: 767px) {
	.location {
		padding-bottom: 16px;
	}
}

.location__marquee {
	--marquee-copies: 3;
	--marquee-duration: 17s;
}

.location__map {
	box-sizing: content-box;
	max-width: 1478px;
	margin: 90px auto 0;
	padding-inline: 40px;
}

@media screen and (max-width: 1600px) {
	.location__map {
		max-width: 1107px;
		margin-top: 68px;
	}
}

@media screen and (max-width: 1200px) {
	.location__map {
		max-width: 807px;
		margin-top: 49px;
		padding-inline: 32px;
	}
}

@media screen and (max-width: 767px) {
	.location__map {
		width: calc(100% - 40px);
		max-width: 553px;
		margin-top: 40px;
		padding-inline: 0;
		overflow: hidden;
	}
}


@media screen and (max-width: 767px) {
	.location__map-image {
		width: 129.6%;
		max-width: none;
		margin-left: -14.9%;
	}
}

.location__title {
	margin: 1.08em 0 0; /* 48.5px */
	font-size: 2.8125rem; /* 45px */
	line-height: 1.11;
	text-align: center;
	color: var(--color-text-dark);
}

@media screen and (max-width: 1600px) {
	.location__title {
		font-size: 2.25rem;
	}
}

@media screen and (max-width: 1200px) {
	.location__title {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 767px) {
	.location__title {
		margin-top: 2.2em; /* 44px */
		font-size: 1.375rem;
	}
}

@media screen and (max-width: 480px) {
	.location__title {
		font-size: 1.25rem;
	}
}

@media screen and (max-width: 374px) {
	.location__title {
		font-size: 1.125rem;
	}
}

.location__address {
	margin: 0.2em 0 0;
	font-size: var(--font-size-base);
	line-height: 2;
	text-align: center;
	color: var(--color-text-dark);
}

@media screen and (max-width: 767px) {
	.location__address {
		margin-top: 0.1em; /* 1px */
	}
}

.location__access {
	display: flex;
	justify-content: center;
	gap: 55px;
	margin-top: 96px;
	padding-left: 40px;
}

@media screen and (max-width: 1600px) {
	.location__access {
		gap: 42px;
		margin-top: 76px;
		padding-left: 30px;
	}
}

@media screen and (max-width: 1200px) {
	.location__access {
		gap: 30px;
		margin-top: 55px;
		padding-left: 22px;
	}
}

@media screen and (max-width: 767px) {
	.location__access {
		gap: 20px;
		margin-top: 48px;
		padding-inline: 20px;
	}
}

.location__access-item {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 422px;
	aspect-ratio: 422 / 416;
	color: #fff;
	text-align: center;
}

@media screen and (max-width: 1600px) {
	.location__access-item {
		max-width: 320px;
	}
}

@media screen and (max-width: 1200px) {
	.location__access-item {
		max-width: 240px;
	}
}

@media screen and (max-width: 767px) {
	.location__access-item {
		max-width: 190px;
	}
}

.location__access-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--access-color);
	-webkit-mask: var(--mask-nonagon) center / 100% 100% no-repeat;
	mask: var(--mask-nonagon) center / 100% 100% no-repeat;
}

.location__access-item--subway {
	--access-color: #d40085;
}

.location__access-item--car {
	--access-color: #008dd4;
}

.location__access-title {
	position: relative;
	width: 30%;
	min-width: 3.4em;
	border-bottom: 1px solid #fff;
	font-size: 2.25rem; /* 36px */
	line-height: 1.5;
}

@media screen and (max-width: 1600px) {
	.location__access-title {
		font-size: 1.8125rem;
	}
}

@media screen and (max-width: 1200px) {
	.location__access-title {
		font-size: 1.25rem;
	}
}

@media screen and (max-width: 767px) {
	.location__access-title {
		font-size: 1.125rem;
	}
}

@media screen and (max-width: 480px) {
	.location__access-title {
		font-size: 1rem;
	}
}

@media screen and (max-width: 374px) {
	.location__access-title {
		font-size: 0.9375rem;
	}
}

.location__access-text {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 1.5em auto 0;
	text-align: left;
	font-size: calc(var(--font-size-base) * 0.88);
	font-weight: 500;
	line-height: 1.6;
}

@media screen and (max-width: 767px) {
	.location__access-text {
		margin-top: 0.9em;
		text-align: center;
	}
}

.location__access-line {
	display: block;
}

.location__access-line + .location__access-line,
.location__access-note + .location__access-line {
	margin-top: 0.45em;
}

@media screen and (max-width: 767px) {
	.location__access-line + .location__access-line,
.location__access-note + .location__access-line {
		margin-top: 0.35em;
	}
}

.location__access-time {
	margin-left: 1em;
}

@media screen and (max-width: 767px) {
	.location__access-time {
		display: block;
		margin-left: 0;
	}
}

.location__access-number {
	font-size: 1.45em;
	font-weight: 700;
	line-height: 1;
}

.location__access-note {
	display: block;
	font-size: 0.7em;
	text-align: center;
}

/*--------------------------------------------------------------
フッター
--------------------------------------------------------------*/
.footer {
	position: relative;
	height: 538px;
	margin-top: -1px;
	background-color: var(--color-bg-gray);
}

@media screen and (max-width: 1600px) {
	.footer {
		height: 404px;
	}
}

@media screen and (max-width: 1200px) {
	.footer {
		height: 300px;
	}
}

@media screen and (max-width: 767px) {
	.footer {
		height: 288px;
	}
}

@media screen and (max-width: 480px) {
	.footer {
		height: 240px;
	}
}

@media screen and (max-width: 374px) {
	.footer {
		height: 216px;
	}
}

.footer__stamps {
	top: calc(-200 * var(--pc));
}

@media screen and (max-width: 767px) {
	.footer__stamps {
		top: calc(-40 * var(--sp));
	}
}


@media screen and (max-width: 767px) {
	.footer__stamps .c-stamps__item--sp {
		top: calc(100% + var(--sy) * var(--sp));
	}
}

@media screen and (max-width: 480px) {
	.footer__stamps .c-stamps__item--sp {
		top: calc(100% + var(--sy) * var(--stamp-unit) * var(--stamp-k));
	}
}

.footer__logo {
	position: absolute;
	top: 123px;
	left: 0;
	right: 0;
	z-index: 1;
	width: 401px;
	margin-inline: auto;
	line-height: 0;
}

@media screen and (max-width: 1600px) {
	.footer__logo {
		top: 90px;
		width: 300px;
	}
}

@media screen and (max-width: 1200px) {
	.footer__logo {
		top: 66px;
		width: 220px;
	}
}

@media screen and (max-width: 767px) {
	.footer__logo {
		top: 42px;
		width: 188px;
	}
}

@media screen and (max-width: 480px) {
	.footer__logo {
		top: 35px;
		width: 157px;
	}
}

@media screen and (max-width: 374px) {
	.footer__logo {
		top: 32px;
		width: 141px;
	}
}

.footer__copyright {
	position: absolute;
	top: 261px;
	left: 0;
	right: 0;
	z-index: 1;
	padding-inline: 1em;
	font-size: 0.875rem;
	text-align: center;
	text-shadow:
		2px 0 var(--color-bg-gray), -2px 0 var(--color-bg-gray), 0 2px var(--color-bg-gray), 0 -2px var(--color-bg-gray),
		1.5px 1.5px var(--color-bg-gray), -1.5px 1.5px var(--color-bg-gray), 1.5px -1.5px var(--color-bg-gray), -1.5px -1.5px var(--color-bg-gray),
		0 0 4px var(--color-bg-gray), 0 0 6px var(--color-bg-gray);
}

@media screen and (max-width: 1600px) {
	.footer__copyright {
		top: 197px;
	}
}

@media screen and (max-width: 1200px) {
	.footer__copyright {
		top: 148px;
		font-size: 0.75rem;
	}
}

@media screen and (max-width: 767px) {
	.footer__copyright {
		top: 113px;
		font-size: 0.625rem;
	}
}

@media screen and (max-width: 480px) {
	.footer__copyright {
		top: 97px;
	}
}

@media screen and (max-width: 374px) {
	.footer__copyright {
		top: 89px;
	}
}

/*--------------------------------------------------------------
フロア詳細モーダル
--------------------------------------------------------------*/
html.is-modal-open {
	overflow: hidden;
}

.modal {
	--modal-text: var(--color-text);
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	padding: 40px 16px;
	border: 0;
	background: transparent;
	overflow: auto;
}

@media screen and (max-width: 1600px) {
	.modal {
		padding-block: 32px;
	}
}

@media screen and (max-width: 767px) {
	.modal {
		padding-block: 24px;
	}
}

.modal[open] {
	display: flex;
}

.modal::backdrop {
	background-color: rgba(255, 255, 255, 0.92);
}

/* 開くときのフェード */
.modal[open]::backdrop {
	animation: modal-backdrop-in 0.35s ease-out;
}

.modal[open] .modal__container {
	animation: modal-in 0.5s ease-out;
}

@keyframes modal-backdrop-in {
	from {
		opacity: 0;
	}
}

@keyframes modal-in {
	from {
		opacity: 0;
	}
}

.modal--4f {
	--floor-color: var(--color-blue);
	--modal-text: var(--floor-color);
}

.modal--3f {
	--floor-color: var(--color-black);
}

.modal--2f {
	--floor-color: var(--color-red);
}

.modal--1f {
	--floor-color: var(--color-green);
}

.modal__container {
	position: relative;
	width: 100%;
	max-width: 956px;
	margin: auto;
}

@media screen and (max-width: 1600px) {
	.modal__container {
		max-width: 764px;
	}
}

@media screen and (max-width: 1200px) {
	.modal__container {
		max-width: 620px;
	}
}

@media screen and (max-width: 767px) {
	.modal__container {
		max-width: 500px;
	}
}

.modal__frame {
	--cut: 120px;
	--border: 8px;
	position: relative;
	padding: 70px 132px 100px;
	background-color: var(--floor-color);
	clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

@media screen and (max-width: 1600px) {
	.modal__frame {
		--cut: 96px;
		--border: 6px;
		padding: 56px 106px 80px;
	}
}

@media screen and (max-width: 1200px) {
	.modal__frame {
		--cut: 78px;
		--border: 5px;
		padding: 46px 86px 65px;
	}
}

@media screen and (max-width: 767px) {
	.modal__frame {
		--cut: 44px;
		--border: 4px;
		padding: 26px 32px 56px;
	}
}

.modal__frame::before {
	--inner-cut: calc(var(--cut) - var(--border) * 0.4142);
	content: "";
	position: absolute;
	inset: var(--border);
	background-color: #fff;
	clip-path: polygon(var(--inner-cut) 0, calc(100% - var(--inner-cut)) 0, 100% var(--inner-cut), 100% calc(100% - var(--inner-cut)), calc(100% - var(--inner-cut)) 100%, var(--inner-cut) 100%, 0 calc(100% - var(--inner-cut)), 0 var(--inner-cut));
}

.modal__head {
	display: flex;
	align-items: center;
}

.modal__head--logo {
	position: relative;
	aspect-ratio: 4.79;
}

.modal__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 49%;
	height: auto;
	translate: -50% -50%;
}

.modal__badge {
	position: relative;
	display: grid;
	place-items: center;
	width: 110px;
	aspect-ratio: 1;
	padding-bottom: 0.1em;
	font-size: 3.0625rem; /* 49px */
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
}

@media screen and (max-width: 1600px) {
	.modal__badge {
		width: 88px;
		font-size: 2.4375rem;
	}
}

@media screen and (max-width: 1200px) {
	.modal__badge {
		width: 72px;
		font-size: 2rem;
	}
}

@media screen and (max-width: 767px) {
	.modal__badge {
		width: 48px;
		font-size: 1.3125rem;
	}
}


/* 九角形の地 */
.modal__badge::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--floor-color);
	-webkit-mask: var(--mask-nonagon) center / 100% 100% no-repeat;
	mask: var(--mask-nonagon) center / 100% 100% no-repeat;
}

.modal__badge-text {
	position: relative;
}

.modal__photo {
	position: relative;
	margin-top: 28px;
}

@media screen and (max-width: 1600px) {
	.modal__photo {
		margin-top: 22px;
	}
}

@media screen and (max-width: 1200px) {
	.modal__photo {
		margin-top: 18px;
	}
}

@media screen and (max-width: 767px) {
	.modal__photo {
		margin-top: 12px;
	}
}

.modal__head--logo + .modal__photo {
	margin-top: 44px;
}

@media screen and (max-width: 1600px) {
	.modal__head--logo + .modal__photo {
		margin-top: 36px;
	}
}

@media screen and (max-width: 1200px) {
	.modal__head--logo + .modal__photo {
		margin-top: 30px;
	}
}

@media screen and (max-width: 767px) {
	.modal__head--logo + .modal__photo {
		margin-top: 22px;
	}
}

.modal__text {
	position: relative;
	margin: 28px 0 0;
	font-size: var(--font-size-base);
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--modal-text);
}

@media screen and (max-width: 1600px) {
	.modal__text {
		margin-top: 22px;
	}
}

@media screen and (max-width: 1200px) {
	.modal__text {
		margin-top: 18px;
	}
}

@media screen and (max-width: 767px) {
	.modal__text {
		margin-top: 12px;
	}
}

.modal__close {
	position: absolute;
	top: 6px;
	right: 4px;
	width: 88px;
	aspect-ratio: 1;
	cursor: pointer;
}

@media screen and (max-width: 1600px) {
	.modal__close {
		top: 5px;
		right: 3px;
		width: 70px;
	}
}

@media screen and (max-width: 1200px) {
	.modal__close {
		top: 4px;
		right: 3px;
		width: 58px;
	}
}

@media screen and (max-width: 767px) {
	.modal__close {
		top: 2px;
		right: 2px;
		width: 40px;
	}
}

@media (hover: hover) {
	.modal__close:hover::before,
	.modal__close:hover::after {
		scale: 1.1;
	}
}

.modal__close::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--floor-color);
	-webkit-mask: var(--mask-nonagon) center / 100% 100% no-repeat;
	mask: var(--mask-nonagon) center / 100% 100% no-repeat;
	transition: scale 0.3s ease-in-out;
}

.modal__close::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 30%;
	aspect-ratio: 1;
	margin: auto;
	background:
		linear-gradient(45deg, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px)),
		linear-gradient(-45deg, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px));
	transition: scale 0.3s ease-in-out;
}

.modal:focus {
	outline: none;
}

.modal__close:focus-visible {
	outline: 2px solid var(--floor-color);
	outline-offset: 2px;
	border-radius: 50%;
}