@charset "UTF-8";

:root {
	--main-effect-cut-center: 50%;
	--main-effect-cut-shift: 70.4vh;
	--main-effect-open-duration: 1600ms;
	--main-effect-after-duration: 1200ms;
	--main-effect-after-center: 50%;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
}

body {
	overflow: hidden;
}

#main {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 100vh;
	overflow: hidden;
	background: #fff;
	isolation: isolate;
}

#main_bg,
#main_overlay,
#main_logo,
#main_after {
	position: absolute;
	inset: 0;
}

#main_bg {
	z-index: 10;
	overflow: hidden;
	background: #000;
}

#main_bg video,
#main_canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

#main_bg video {
	z-index: 1;
	display: block;
	object-fit: cover;
	object-position: center;
	visibility: hidden;
}

#main.main-effect--video-start #main_bg video {
	visibility: visible;
}

#main_canvas {
	z-index: 2;
	display: block;
	opacity: 0;
	pointer-events: none;
}

#main.main-effect--frozen #main_canvas {
	opacity: 1;
}

#main.main-effect--frozen #main_bg video {
	visibility: hidden !important;
}

#main_overlay {
	z-index: 55;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.3);
	opacity: 1;
	transition: opacity 650ms linear;
	will-change: opacity;
}

#main.main-effect--overlay-fade #main_overlay,
#main.main-effect--overlay-fade .main-effect__piece-overlay {
	opacity: 0;
}

#main.main-effect--overlay-hidden #main_overlay,
#main.main-effect--overlay-hidden .main-effect__piece-overlay {
	visibility: hidden;
}

#main_logo {
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

#logo_cover {
	display: block;
	width: var(--main-effect-logo-width, min(60vw, 720px));
	margin: 0;
}

#logo_cover img {
	display: block;
	width: 100%;
	height: auto;
}

/* 白背景 */
.main-effect__white {
	position: absolute;
	inset: 0;
	z-index: 50;
	display: none;
	background: #fff;
	opacity: 0;
	pointer-events: none;
}

.main-effect__white.is-active {
	display: block;
	opacity: 1;
}

/*
	白背景自体は最初から不透明です。

	分割片のclip-pathが離れた部分だけ白が見えるため、
	画面上には最初に細い斜め線が現れ、
	その線だけが徐々に広がります。
*/
.main-effect__white.is-opening {
	opacity: 1;
}

/* Canvasとロゴをまとめて分割するレイヤー */
.main-effect__split {
	position: absolute;
	inset: 0;
	z-index: 60;
	display: none;
	overflow: hidden;
	pointer-events: none;
}

.main-effect__split.is-active {
	display: block;
}

.main-effect__piece {
	position: absolute;
	inset: 0;
	overflow: hidden;
	will-change: clip-path;
}

/* 54.9度を左右反転した「＼」方向 */
.main-effect__piece--a {
	clip-path: polygon(
		0 0,
		calc(var(--main-effect-cut-center) + (var(--main-effect-cut-shift) / 2)) 0,
		calc(var(--main-effect-cut-center) - (var(--main-effect-cut-shift) / 2)) 100%,
		0 100%
	);
}

.main-effect__piece--b {
	clip-path: polygon(
		calc(var(--main-effect-cut-center) + (var(--main-effect-cut-shift) / 2)) 0,
		100% 0,
		100% 100%,
		calc(var(--main-effect-cut-center) - (var(--main-effect-cut-shift) / 2)) 100%
	);
}

.main-effect__canvas {
	position: absolute;
	top: -100%;
	left: -100%;
	display: block;
	width: 300%;
	height: 300%;
	z-index: 1;
	transform-origin: 50% 50%;
	transform-box: border-box;
	backface-visibility: hidden;
	will-change: transform;
}

.main-effect__logo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	opacity: 0;
	/*
		親のclip-path開始時に子画像を別GPUレイヤーへ
		再合成させないため、合成促進指定は行いません。
	*/
}

.main-effect__logo img {
	display: block;
	width: var(--main-effect-logo-width, min(60vw, 720px));
	height: auto;
}

.main-effect__piece-overlay {
	position: absolute;
	top: -100%;
	left: -100%;
	width: 300%;
	height: 300%;
	z-index: 2;
	background: rgba(0, 0, 0, 0.3);
	opacity: 1;
	pointer-events: none;
	transform-origin: 50% 50%;
	transform-box: border-box;
	backface-visibility: hidden;
	will-change: transform, opacity;
	transition: opacity 650ms linear;
}


/* 分割片の描画が揃ってからコピー側のロゴを表示します。 */
.main-effect__split.is-logo-ready .main-effect__logo {
	opacity: 1;
}

/* 分割コピーへ切り替えたあと、元レイヤーを隠す */
#main.main-effect--split-ready #main_bg {
	visibility: hidden;
}

#main.main-effect--split-ready #main_logo {
	opacity: 0;
	visibility: visible;
}

/* 最終表示 */
#main_after {
	z-index: 80;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: clamp(20px, 4vh, 60px);
	overflow: hidden;
	background: #fff;
}

#main.main-effect--after #main_after {
	display: flex;
}

.after_item {
	position: relative;
	display: block;
	opacity: 0;
	transform:
		translate3d(
			var(--main-effect-after-from-x, 32px),
			var(--main-effect-after-from-y, -46px),
			0
		)
		scale(var(--main-effect-after-scale, 0.94));
	will-change: clip-path, opacity, transform;

	clip-path: polygon(
		calc(var(--main-effect-after-center) + 35.2vh) 0,
		calc(var(--main-effect-after-center) + 35.2vh) 0,
		calc(var(--main-effect-after-center) - 35.2vh) 100%,
		calc(var(--main-effect-after-center) - 35.2vh) 100%
	);
}

.after_item.is-show {
	animation: main-effect-after-reveal
		var(--main-effect-after-duration)
		var(
			--main-effect-after-easing,
			cubic-bezier(0.16, 1, 0.3, 1)
		)
		forwards;
}

@keyframes main-effect-after-reveal {
	0% {
		opacity: 0;
		transform:
			translate3d(
				var(--main-effect-after-from-x, 32px),
				var(--main-effect-after-from-y, -46px),
				0
			)
			scale(var(--main-effect-after-scale, 0.94));

		clip-path: polygon(
			calc(var(--main-effect-after-center) + 35.2vh) 0,
			calc(var(--main-effect-after-center) + 35.2vh) 0,
			calc(var(--main-effect-after-center) - 35.2vh) 100%,
			calc(var(--main-effect-after-center) - 35.2vh) 100%
		);
	}

	16% {
		opacity: 1;
	}

	72% {
		transform:
			translate3d(-3px, 4px, 0)
			scale(1.012);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);

		clip-path: polygon(
			calc(var(--main-effect-after-center) - 120vw + 35.2vh) 0,
			calc(var(--main-effect-after-center) + 120vw + 35.2vh) 0,
			calc(var(--main-effect-after-center) + 120vw - 35.2vh) 100%,
			calc(var(--main-effect-after-center) - 120vw - 35.2vh) 100%
		);
	}
}

.after_item img {
	display: block;
	max-width: min(80vw, 900px);
	max-height: 35vh;
	width: auto;
	height: auto;
}

/* 要素ごとに切り込み開始位置を変更可能 */
.after_item:nth-child(1) {
	--main-effect-after-center: 42%;
}

.after_item:nth-child(2) {
	--main-effect-after-center: 62%;
}

#main.main-effect--after #main_bg,
#main.main-effect--after #main_overlay,
#main.main-effect--after #main_logo,
#main.main-effect--after .main-effect__split,
#main.main-effect--after .main-effect__white {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.main-effect__white.is-opening,
	.after_item.is-show {
		animation-duration: 0.01ms !important;
	}
}


.main-effect__canvas,
.main-effect__logo,
.main-effect__piece-overlay {
	transform-origin: center center;
}


/* Canvasは3x3タイルの中央を基準に循環移動します。 */
.main-effect__canvas {
	transform-origin: center center;
}


/* after_itemは斜めclip-pathだけで表示します。 */
.after_item,
.after_item.is-show {
	opacity: 1;
	visibility: hidden;
	transform: none;
	filter: none;
	clip-path: none;
	animation: none;
	will-change: clip-path;
}


/*
	after_itemの表示はJavaScript側の斜めワイプで制御します。
	既存のtransitionやkeyframesがtransform/opacityを
	上書きしないようにします。
*/
#main_after .after_item {
	animation: none !important;
	transition: none !important;
	filter: none !important;
	opacity: 1;
	will-change: clip-path;
}


/* v14: revealAfterItems()開始後はvisibilityを確実に解除します。 */
#main_after.is-visible .after_item {
	visibility: visible;
}


/* v16: 待機中もロゴを表示し、白色・約半分のサイズにします。 */
#main_logo {
	color: #ffffff;
	visibility: visible;
	opacity: 1;
}

#logo_cover {
	width: var(--main-effect-logo-width, min(30vw, 360px));
}

#logo_cover img {
	width: 100%;
	height: auto;
}

.main-effect__logo {
	color: #ffffff;
}

.main-effect__logo img {
	width: var(--main-effect-logo-width, min(30vw, 360px));
}

#main:not(.main-effect--video-start) #main_bg {
	background: #000000;
}

#main:not(.main-effect--video-start) #main_bg video {
	visibility: hidden !important;
}


.main-flow-snapshot {
	transform-origin: 50% 50% !important;
	transform-box: border-box !important;
	z-index: 2 !important;
	pointer-events: none !important;
	will-change: opacity;
}


/* v21: afterは斜めワイプにごく小さな移動・拡大を加え、ゆっくり抜ける動きにします。ぼかしは使用しません。 */
#main_after .after_item,
#main_after .after_item.is-show {
	animation: none !important;
	transition: none !important;
	filter: none !important;
	opacity: 1;
	will-change: clip-path, transform;
}


/* v22: afterの斜めワイプに、わずかな浮遊感と奥行きを加えます。 */
#main_after .after_item,
#main_after .after_item.is-show {
	transform-origin: 50% 50%;
	backface-visibility: hidden;
	will-change: clip-path, transform;
}


/* v27: clip-pathと横移動を別々のWAAPIアニメーションで制御します。 */
#main_after .after_item,
#main_after .after_item.is-show {
	will-change: clip-path, transform;
}

/*
	AfterItem完了後に独立して動作する画像レイヤー。
	#main_afterより前面、既存背景レイヤーより前に配置します。
*/
#main_after2 {
	position: absolute;
	inset: 0;
	z-index: 85;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	visibility: hidden;
	opacity: 1;
	pointer-events: none;
	background: transparent;
	contain: layout paint;
	will-change: clip-path;
}

#main_after2 .main-after2__stage,
#main_after2 .main-after2__window {
	position: absolute;
	inset: 0;
}

#main_after2 .main-after2__stage {
	z-index: 1;
	overflow: hidden;
	background: transparent;
	will-change: clip-path;
}

#main_after2 .main-after2__window {
	z-index: 1;
	overflow: hidden;
	background: var(--main-after2-background-color, #fff);
	will-change: clip-path;
}

#main_after2 .main-after2__border {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

#main_after2 .main-after2__border-line {
	fill: none;
	stroke: var(--main-after2-line-color, #000);
	stroke-width: 1;
	stroke-linecap: butt;
	vector-effect: non-scaling-stroke;
	shape-rendering: geometricPrecision;
}

#main_after2 .main-after2__image {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	max-height: none;
	user-select: none;
	-webkit-user-drag: none;
	filter: none;
	backface-visibility: hidden;
	will-change: left, right, transform;
}


/*
	v66: AfterItemは斜めclip/translateを使用せず、
	opacity・blur・scaleだけでテンポよく表示します。
*/
#main_after .after_item,
#main_after .after_item.is-show {
	visibility: hidden;
	opacity: 0;
	clip-path: none !important;
	transform: scale3d(1.055, 1.055, 1);
	transform-origin: 50% 50%;
	filter: blur(10px);
	animation: none !important;
	transition: none !important;
	backface-visibility: hidden;
	will-change: opacity, transform, filter;
}

#main_after.is-visible .after_item {
	visibility: visible;
}


/*
	v76: data-clip-positionを持つ画像は元画像サイズのCanvasへ描画し、
	指定矩形を正確にクリップした状態から解除します。
*/
#main_after .after_item > img.clipping,
#main_after .after_item > img.imgclipping {
	position: relative;
	z-index: 2;
}

#main_after .after_item > .main-after-item-clipping-canvas {
	position: absolute;
	z-index: 2;
	display: block;
	pointer-events: none;
	backface-visibility: hidden;
	image-rendering: auto;
}