@charset "UTF-8";
/*--------------------------------------------------------------
基本設定
--------------------------------------------------------------*/
:root {
	/* 文字・背景 */
	--color-text: #000;
	--color-text-gray: #4d4d4d;
	--color-text-dark: #333;
	--color-bg: #fff;
	--color-bg-gray: #d4d4d4;
	--color-bg-beige: #ede2bc;
	--color-bg-paper: #efefef;

	/* スタンプの色（フロア・地下鉄・バス・日本初上陸の色にもそのまま使う） */
	--color-blue: #005bab;
	--color-lightblue: #00aaff;
	--color-pink: #ff00a0;
	--color-red: #e73820;
	--color-orange: #ffa000;
	--color-yellow: #fff100;
	--color-green: #5bb431;
	--color-lightgreen: #3cff3c;
	--color-gray: #bfbfbf;

	/* 黒（3F の色） */
	--color-black: #000;

	--font-base: "Zen Kaku Gothic New", sans-serif;
	--font-size-base: 1.5625rem; /* 25px */
	--font-size-lg: 1.875rem; /* 30px */

	--pc: 1px;
	--design-width: 1920;
	--header-height: 100px;
	--section-space: 110px;

	--clip-nonagon: polygon(50% 0%, 82.14% 11.7%, 99.24% 41.32%, 93.3% 75%, 67.1% 96.98%, 32.9% 96.98%, 6.7% 75%, 0.76% 41.32%, 17.86% 11.7%);
	--mask-nonagon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 82.14,11.7 99.24,41.32 93.3,75 67.1,96.98 32.9,96.98 6.7,75 0.76,41.32 17.86,11.7'/%3E%3C/svg%3E");
}

@media screen and (max-width: 1600px) {
	:root {
		--pc: 0.75px;
		--header-height: 80px;
		--section-space: 82px;
		--font-size-base: 1.25rem; /* 20px */
		--font-size-lg: 1.5rem; /* 24px */
	}
}

@media screen and (max-width: 1200px) {
	:root {
		--pc: 0.6px;
		--header-height: 64px;
		--section-space: 64px;
		--font-size-base: 0.875rem; /* 14px */
		--font-size-lg: 1.0625rem; /* 17px */
	}
}

@media screen and (max-width: 1024px) {
	:root {
		--pc: 0.5px;
	}
}

@media screen and (max-width: 767px) {
	:root {
		--sp: 1.2px;
		--header-height: 56px;
		--section-space: 56px;
		--font-size-base: 0.875rem; /* 14px */
		--font-size-lg: 0.9375rem; /* 15px */
	}
}

@media screen and (max-width: 480px) {
	:root {
		--sp: 1px;
		--font-size-base: 0.8125rem; /* 13px */
		--font-size-lg: 0.875rem; /* 14px */
	}
}

@media screen and (max-width: 374px) {
	:root {
		--sp: 0.85px;
		--font-size-base: 0.75rem; /* 12px */
		--font-size-lg: 0.8125rem; /* 13px */
	}
}

*,
::before,
::after {
	box-sizing: border-box;
	background-repeat: no-repeat;
}

::before,
::after {
	text-decoration: inherit;
	vertical-align: inherit;
}

* {
	margin: 0;
	padding: 0;
}

[hidden] {
	display: none;
}

iframe,
img {
	border-style: none;
}

html {
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	overflow-x: clip;
	scrollbar-gutter: stable;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-base);
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

:where(body *) {
	letter-spacing: 0.06em;
}

ul {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s ease-in-out;
}

@media (hover: hover) {
	a:hover {
		opacity: 0.7;
	}
}

button {
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border-style: none;
	cursor: pointer;
	-webkit-appearance: button;
}

[id] {
	scroll-margin-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* レイアウト */
.l-canvas {
	position: relative;
	width: calc(var(--design-width) * var(--pc));
	margin-left: calc(50% - var(--design-width) * var(--pc) / 2);
}

@media screen and (max-width: 767px) {
	.l-canvas {
		width: calc(393 * var(--sp));
		margin-left: calc(50% - 196.5 * var(--sp));
	}
}

/* ユーティリティ */
.u-sp-br {
	display: none;
}

@media screen and (max-width: 767px) {
	.u-sp-br {
		display: inline;
	}
}

.u-xs-br {
	display: none;
}

@media screen and (max-width: 430px) {
	.u-xs-br {
		display: inline;
	}
}

.u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.u-trim-end {
	margin-right: -0.5em;
}

@media screen and (max-width: 767px) {
	.u-trim-end-sp {
		margin-right: -0.5em;
	}
}

.u-trim-start {
	margin-left: -0.5em;
}

@media screen and (max-width: 767px) {
	.u-trim-start-sp {
		margin-left: -0.5em;
	}
}

/*--------------------------------------------------------------
共通部品
--------------------------------------------------------------*/
/* スタンプ（FV・ステートメント／フッターの背景） */
.c-stamps {
	--stamp-size: calc(214 * var(--pc));
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

@media screen and (max-width: 767px) {
	.c-stamps {
		--stamp-size: calc(80 * var(--sp));
	}
}

@media screen and (max-width: 480px) {
	.c-stamps {
		--stamp-unit: calc(100vw / 393);
		--stamp-k: 0.9;
		--stamp-size: calc(80 * var(--stamp-unit) * var(--stamp-k));
	}
}

.c-stamps__item {
	position: absolute;
	top: calc(var(--y) * 1%);
	left: calc(var(--x) * var(--pc));
	width: var(--stamp-size);
	max-width: none;
	height: auto;
	translate: -50% -50%;
	rotate: var(--r, 0deg);
	mix-blend-mode: multiply;
}

.c-stamps__item--right {
	left: auto;
	right: calc(var(--x) * var(--pc));
	translate: 50% -50%;
}


@media screen and (max-width: 767px) {
	.c-stamps__item:not(.c-stamps__item--sp) {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.c-stamps__item--sp {
		left: calc(var(--sx) * var(--sp));
		right: auto;
		translate: -50% -50%;
	}
}

@media screen and (max-width: 480px) {
	.c-stamps__item--sp {
		left: calc(var(--sx) * var(--stamp-unit) * var(--stamp-k));
	}
}


@media screen and (max-width: 767px) {
	.c-stamps__item--sp-right {
		left: auto;
		right: calc((393 - var(--sx)) * var(--sp));
		translate: 50% -50%;
	}
}

@media screen and (max-width: 480px) {
	.c-stamps__item--sp-right {
		left: auto;
		right: calc((393 - var(--sx)) * var(--stamp-unit) * var(--stamp-k));
	}
}

.c-stamps.is-armed .c-stamps__item {
	opacity: 0;
	scale: 1.5;
}

.c-stamps.is-armed .c-stamps__item.is-pressed {
	opacity: 1;
	scale: 1;
	transition: opacity 0.2s ease-out var(--delay, 0s), scale 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) var(--delay, 0s);
}

.js-fade:not(.is-pending) {
	transition:
		opacity var(--fade-time, 0.9s) ease-out var(--delay, 0s),
		translate var(--fade-time, 0.9s) ease-out var(--delay, 0s),
		scale 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) var(--delay, 0s),
		rotate 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) var(--delay, 0s);
}

.js-fade.is-pending {
	opacity: 0;
	translate: 0 var(--fade-y, 24px);
}

.js-fade[data-fade="pop"].is-pending {
	translate: none;
	scale: 0.6;
}

.js-fade[data-fade="stamp"].is-pending {
	translate: none;
	scale: 1.8;
}

.js-fade[data-fade="logo"].is-pending {
	translate: none;
	scale: 1.35;
	rotate: -12deg;
}

.js-chars.is-pending {
	opacity: 0;
}

.c-chars__item {
	display: inline;
	opacity: 0;
	animation: chars-in 0.4s ease-out both;
	animation-delay: calc(var(--i) * 0.06s);
}

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

	to {
		opacity: 1;
	}
}

/* マーキー（各セクションの多言語見出し） */
.c-marquee {
	--marquee-height: 70px;
	--marquee-gap: 60px;
	overflow: hidden;
}

@media screen and (max-width: 1600px) {
	.c-marquee {
		--marquee-height: 50px;
		--marquee-gap: 43px;
	}
}

@media screen and (max-width: 1200px) {
	.c-marquee {
		--marquee-height: 38px;
		--marquee-gap: 32px;
	}
}

@media screen and (max-width: 767px) {
	.c-marquee {
		--marquee-height: 32px;
		--marquee-gap: 27px;
	}
}

.c-marquee__track {
	display: flex;
	width: max-content;
	mix-blend-mode: multiply;
	animation: marquee var(--marquee-duration, 40s) linear infinite;
}

.c-marquee__list {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--marquee-gap);
	padding-right: var(--marquee-gap);
}

.c-marquee__item {
	flex-shrink: 0;
}

.c-marquee__item img {
	width: auto;
	max-width: none;
	height: var(--marquee-height);
}

@keyframes marquee {
	to {
		translate: calc(-100% / var(--marquee-copies, 1)) 0;
	}
}