@charset "utf-8";

/* --------------------------------------------------
   logoAH ロゴの登場と撤退
   -------------------------------------------------- */
.ef-logo {
	position: fixed;
	top: calc(50% - 55px);
	left: calc(50% - 100px);
	width: 200px;
	height: 110px;
	filter: drop-shadow(0 1px 8px rgba(34,24,21,.08));
}
.ef-logo .co-path {
	fill: none;
	stroke: white;
	stroke-width: 5;
	stroke-linecap: round;
	/*stroke-linejoin: round;*/
	stroke-dasharray: 150;
	stroke-dashoffset: 450;
}
.ef-logo.is-appear .co-path {
	stroke-dashoffset: 300;
	transition: stroke-dashoffset .4s var(--easeOut);
}
.ef-logo.is-hide .co-path {
	stroke-dashoffset: 150;
	transition-duration: .6s;
}

/* --------------------------------------------------
   序盤プレリュード
   -------------------------------------------------- */
#bg {
	perspective: 500px;
}
.prelude {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.prelude svg,
.prelude img {
	position: absolute;
	top: calc(50% - 400px);
	right: 0;
	left: 0;
	width: 100vw;
	max-width: 800px;
	height: auto;
	margin: 0 auto;
}
@media screen and (max-width: 800px) {
	.prelude svg,
	.prelude img {
		top: calc(50% - 50vw);
	}
}
.prelude.is-drawing {
	animation: preludeRotate 15s linear both;
}
@keyframes preludeRotate {
	from { transform: rotateX(30deg) rotateZ(30deg); }
	to { transform: none; }
}
.prelude:not(.is-painting) img {
	visibility: hidden;
}
.prelude.is-painting img {
	animation: preludeFadeout 9.6s linear both;
}
@keyframes preludeFadeout {
	from { opacity: .8; }
	to { opacity: .4; }
}
.prelude svg {
	overflow: visible;
	fill: none;
	stroke: white;
	stroke-width: .3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.prelude path {
	stroke-dashoffset: var(--length);
}
.prelude.is-drawing path {
	animation: preludeDrawing 12s linear forwards;
}
@keyframes preludeDrawing {
	from { stroke-dashoffset: var(--length); }
	to { stroke-dashoffset: calc(var(--length) * 2); }
}
/* MEMO: 変数 --langth に単位 (px) を付ければ @keyframe 内でも calc で行ける */
/* body
.prelude.is-drawing .body path:nth-child(1) { animation-name: drawingBody1; }
.prelude.is-drawing .body path:nth-child(2) { animation-name: drawingBody2; }
@keyframes drawingBody1 { from { stroke-dashoffset: 645.829; } to { stroke-dashoffset: 1291.658; } }
@keyframes drawingBody2 { from { stroke-dashoffset: 433.257; } to { stroke-dashoffset: 866.514; } } */
/* head
.prelude.is-drawing .head path { animation-duration: 11s; }
.prelude.is-drawing .head path:nth-child(1) { animation-name: drawingHead1; }
.prelude.is-drawing .head path:nth-child(2) { animation-name: drawingHead2; }
.prelude.is-drawing .head path:nth-child(3) { animation-name: drawingHead3; }
.prelude.is-drawing .head path:nth-child(4) { animation-name: drawingHead4; }
.prelude.is-drawing .head path:nth-child(5) { animation-name: drawingHead5; }
@keyframes drawingHead1 { from { stroke-dashoffset: 158.686; } to { stroke-dashoffset: 317.372; } }
@keyframes drawingHead2 { from { stroke-dashoffset: 21.065; }  to { stroke-dashoffset: 42.13; } }
@keyframes drawingHead3 { from { stroke-dashoffset: 50.9802; } to { stroke-dashoffset: 101.9604; } }
@keyframes drawingHead4 { from { stroke-dashoffset: 87.6431; } to { stroke-dashoffset: 175.2862; } }
@keyframes drawingHead5 { from { stroke-dashoffset: 21.0588; } to { stroke-dashoffset: 42.1176; } } */
/* face
.prelude.is-drawing .face path { animation-duration: 10s; }
.prelude.is-drawing .face path:nth-child(1) { animation-name: drawingFace1; }
.prelude.is-drawing .face path:nth-child(2) { animation-name: drawingFace2; }
.prelude.is-drawing .face path:nth-child(3) { animation-name: drawingFace3; }
.prelude.is-drawing .face path:nth-child(4) { animation-name: drawingFace4; }
.prelude.is-drawing .face path:nth-child(5) { animation-name: drawingFace5; }
.prelude.is-drawing .face path:nth-child(6) { animation-name: drawingFace6; }
.prelude.is-drawing .face path:nth-child(7) { animation-name: drawingFace7; }
@keyframes drawingFace1 { from { stroke-dashoffset: 18.882; }  to { stroke-dashoffset: 37.764; } }
@keyframes drawingFace2 { from { stroke-dashoffset: 7.36581; } to { stroke-dashoffset: 14.73162; } }
@keyframes drawingFace3 { from { stroke-dashoffset: 18.8819; } to { stroke-dashoffset: 37.7638; } }
@keyframes drawingFace4 { from { stroke-dashoffset: 7.40786; } to { stroke-dashoffset: 14.81572; } }
@keyframes drawingFace5 { from { stroke-dashoffset: 76.3565; } to { stroke-dashoffset: 152.713; } }
@keyframes drawingFace6 { from { stroke-dashoffset: 48.5976; } to { stroke-dashoffset: 97.1952; } }
@keyframes drawingFace7 { from { stroke-dashoffset: 28.5022; } to { stroke-dashoffset: 57.0044; } } */

@media screen and (max-width: 767px) {
	.prelude svg {
		stroke-width: .4;
	}
}
@media screen and (max-width: 480px) {
	.prelude svg {
		stroke-width: .5;
	}
}


@keyframes circleClip {
	from { clip-path: circle(0%); }
	to { clip-path: circle(100%); }
}

/* --------------------------------------------------
   音に合わせる系
   -------------------------------------------------- */

/* :::::: ShootingStar 流れ星 (冒頭の co) :::::: */
.ef-meteor {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 6px;
	height: 141vmax;
	transform-origin: 100% 100%;
	transform: rotate(45deg);
}
.ef-meteor::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 6px;
	height: 20vw;
	border-radius: 6px;
	background: #ffd834;
	transform-origin: 0 0;
	animation: shooting var(--mv-beat) var(--easeOut) both;
}
.ef-meteor::after {
	content: "";
	position: absolute;
	top: 20vw;
	left: calc(3px - 30px);
	width: 60px;
	height: 60px;
	background: url(../img/star.svg) center / cover no-repeat;
	animation: shooting var(--mv-beat) var(--easeOut) both;
}
@media screen and (max-width: 920px) {
	.ef-meteor {
		width: 4px;
	}
	.ef-meteor::before {
		width: 4px;
	}
	.ef-meteor::after {
		left: calc(2px - 20px);
		width: 40px;
		height: 40px;
	}
}
@keyframes shooting {
	from { transform: translateY(-80px); }
	to { transform: translateY(142vmax); }
}

/* :::::: MelodyShape 音階シェイプ :::::: */
.shape {
	position: absolute;
	display: inline-block;
}
.shape svg {
	width: 200px;
	height: 200px;
	vertical-align: middle;
	stroke-width: 0;
	fill: none;
	stroke: currentcolor;
	animation-duration: var(--mv-beat);
	animation-timing-function: var(--easeOut);
}
.shape.is-anim svg {
	animation-name: shapeAnimation;
	animation-delay: inherit;
	will-change: animation;
}
.clipSvg,
.filterSvg {
	position: absolute;
	overflow: hidden;
	clip: rect(0,0,0,0);
	width: 0;
	height: 0;
}
@keyframes shapeAnimation {
	0% { stroke-width: 30; transform: scale(0) rotate(90deg); }
	100% { stroke-width: 0; transform: scale(1) rotate(-90deg); }
}

/* :::::: FrameAnima 爆発ドラム :::::: */
.ef-frame-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
}
.frame {
	position: absolute;
	animation: frameAnima .46s steps(10);
}
.pomb { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
.bomb { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
.comb { width: 280px; height: 280px; margin: -112px 0 0 -150px; }
.bang { width: 400px; height: 400px; margin: -200px 0 0 -200px; }
.pomb { background-size: 80px auto; }
.bomb { background-size: 100px auto; }
.comb {
	background-size: 280px auto;
	animation: frameAnima .8s steps(18);
}
.bang {
	background-size: 400px auto;
	animation: frameAnima .94s steps(19);
}
.pomb.p1 { background-image: url(../img/frame_pomb1.svg); }
.pomb.p2 { background-image: url(../img/frame_pomb2.svg); }
.pomb.p3 { background-image: url(../img/frame_pomb3.svg); }
.bomb.b1 { background-image: url(../img/frame_bomb1.svg); }
.bomb.b2 { background-image: url(../img/frame_bomb2.svg); }
.bomb.b3 { background-image: url(../img/frame_bomb3.svg); }
.comb { background-image: url(../img/frame_comb.svg); }
.bang { background-image: url(../img/frame_bang.svg); }
@keyframes frameAnima {
	from { background-position: 0 0; }
	to { background-position: 0 100%; }
}
/* 爆発とともに co が現れるタイプ*/
.comb .co {
	z-index: -1;
	position: absolute;
	top: calc(50% - 27px);
	left: calc(50% - 50px);
	color: var(--c-co);
	animation: framePopCo .96s var(--easeOut) forwards;
}
.comb.c2 .co { animation-name: framePopCo2; }
@keyframes framePopCo {
	0% { opacity: 0; transform: scale(.3) rotate(10deg); }
	30%, 70% { opacity: 1; }
	100% { opacity: 0; transform: scale(1) rotate(-10deg); }
}
@keyframes framePopCo2 {
	0% { opacity: 0; transform: scale(.2) rotate(-10deg); }
	30%, 70% { opacity: 1; }
	100% { opacity: 0; transform: scale(.8) rotate(10deg); }
}

/* :::::: PowerBoll パワー玉 :::::: */
.ef-powerball {
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 200px;
}
.ef-powerball::before,
.ef-powerball::after {
	content: "";
}
.ef-power,
.ef-powerball::before,
.ef-powerball::after {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	animation: powerball .96s var(--easeOut) both;
	background: rgba(255,255,255,.4);
}
.ef-powerball::before { animation-delay: .12s; }
.ef-powerball::after {
	animation-duration: 1.44s;
	animation-delay: .24s;
	background: rgba(255,255,255,.2);
}
@keyframes powerball {
	from { transform: scale(0); }
	to { opacity: 0; transform: scale(1.2); }
}

/* --------------------------------------------------
   流れる系
   -------------------------------------------------- */

/* :::::: StarTrail (星の軌跡) :::::: */
.ef-startrail {
	position: absolute;
	top: calc(50vh - 60vw + 32px);
	left: -10vw;
	width: 120vw;
	height: 120vw;
}
.ef-startrail.is-hide {
	opacity: 0;
	transition: opacity .3s;
}
.ef-startrail svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: white;
}
.ef-startrail.is-play .c {
	transform-origin: 500px 500px;
	animation: startrail 9.6s linear both;
}
@keyframes startrail {
	from { stroke-dasharray: 0 500; stroke-dashoffset: 0; }
	to { stroke-dasharray: 500 0; stroke-dashoffset: 500; }
}
@media screen and (max-width: 480px) {
	.ef-startrail {
		top: calc(50vh - 60vw + 24px);
	}
	.ef-startrail svg {
		stroke-width: 2;
	}
}

/* :::::: StarDust (星屑) :::::: */
.ef-stardust {
	position: absolute;
	top: calc(50% - 50vmax - 100px);
	left: calc(50% - 50vmax - 100px);
	width: calc(100vmax + 200px);
	height: calc(100vmax + 200px);
	opacity: 0;
}
.ef-stardust.is-rotate,
.ef-stardust.is-warp {
	opacity: 1;
}
.ef-stardust.is-hide {
	opacity: 0;
}
.ef-stardust.is-anim {
	transition: opacity .48s;
}
.ef-stardust .s,
.ef-stardust .s::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ef-stardust .s::after {
	content: "";
	opacity: .6;
	background: url(../img/stardust.svg) center;
}
/* rotate */
.ef-stardust.is-rotate .s {
	animation: stardustRotate 600s linear infinite;
}
.ef-stardust.is-rotate .s.-s2 {
	animation-duration: 800s;
	animation-delay: -100s;
}
.ef-stardust.is-rotate .s.-s3 {
	animation-duration: 1000s;
	animation-delay: -200s;
}
.ef-stardust.is-rotate .s.-s1::after {
	background-size: 250px;
}
.ef-stardust.is-rotate .s.-s2::after {
	opacity: .5;
	background-size: 150px;
}
.ef-stardust.is-rotate .s.-s3::after {
	opacity: .4;
	background-size: 120px;
}
@keyframes stardustRotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
/* warp */
.ef-stardust.is-warp .s {
	animation: stardustWarp 12s linear infinite;
}
.ef-stardust.is-warp .s::after {
	background-size: 150px;
}
.ef-stardust.is-warp .s.-s2 {
	animation-delay: -8s;
}
.ef-stardust.is-warp .s.-s3 {
	animation-delay: -4s;
}
@keyframes stardustWarp {
	0% { opacity: 0; transform: scale(1); }
	10%, 90% { opacity: 1; }
	100% { opacity: 0; transform: scale(2); }
}

/* :::::: AddVideo :::::: */
.ef-video-wrap {
	pointer-events: none;
	/*z-index: 1;*/
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ef-video-wrap video {
	margin: 40px;
	width: 960px;
	max-width: calc(100% - 80px);
	max-height: calc(100% - 80px);
	object-fit: cover;
}

/* :::::: FigurePattern 図形をランダムに流す :::::: */
.ef-figure {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ef-figure .f {
	position: absolute;
	top: calc(100vh + 20px);
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	color: #fff;
}
.ef-figure .f.is-flow {
	top: -20px;
	animation: figureFlowing 4.8s linear infinite;
}
.ef-figure .f1.is-flow { animation-duration: 4s; }
.ef-figure .f2.is-flow { animation-duration: 4.2s; }
.ef-figure .f3.is-flow { animation-duration: 4.4s; }
.ef-figure .f4.is-flow { animation-duration: 4.6s; }
.ef-figure .f5.is-flow { animation-duration: 5s; }
.ef-figure .f6.is-flow { animation-duration: 5.2s; }
.ef-figure .f7.is-flow { animation-duration: 5.6s; }
.ef-figure .f8.is-flow { animation-duration: 6s; }
.ef-figure .f9.is-flow { animation-duration: 6.4s; }
@keyframes figureFlowing {
	from { transform: translateY(100vh) translateY(20px); }
	to { transform: translateY(-100%); }
}
@media screen and (max-width: 480px) {
	.ef-figure .f {
		width: 32px;
		height: 32px;
		margin: -16px 0 0 -16px;
	}
}

/* :::::: FlowingCharacter 流れるキャラクター :::::: */
.ef-flow-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity .24s;
}
.ef-flow-wrap.is-hide {
	opacity: 0;
}
.ef-flow-wrap .ef-chara {
	display: block;
	position: absolute;
	top: 0;
	right: 100%;
	perspective: 800px;
	will-change: animation;
	animation: charaFlowing 4.8s linear infinite backwards;
}
.ef-flow-wrap .ef-chara:nth-child(6n+2) { animation-duration: 5.8s; }
.ef-flow-wrap .ef-chara:nth-child(6n+3) { animation-duration: 5.4s; }
.ef-flow-wrap .ef-chara:nth-child(6n+4) { animation-duration: 4.6s; }
.ef-flow-wrap .ef-chara:nth-child(6n+5) { animation-duration: 5.2s; }
@keyframes charaFlowing {
	from { transform: translate(100vw, 10vh) translateX(120%); }
	to { transform: translate(-20%, -10vh) translateX(-20%); }
}
@media screen and (max-width: 767px) {
	.ef-flow-wrap .ef-chara {
		--scale: 7.68;
		animation-duration: 3.84s;
	}
}
@media screen and (min-width: 1366px) {
	.ef-flow-wrap .ef-chara {
		--scale: 13.66;
		animation-duration: 5.76s;
	}
}
@media screen and (max-width: 767px), (min-width: 1366px) {
	.ef-flow-wrap .ef-chara.-meta {
		width: calc(125vw / var(--scale));
		height: calc(177vw / var(--scale));
	}
	.ef-flow-wrap .ef-chara.-script {
		width: calc(146vw / var(--scale));
		height: calc(207vw / var(--scale));
	}
	.ef-flow-wrap .ef-chara.-em {
		width: calc(121vw / var(--scale));
		height: calc(180vw / var(--scale));
	}
	.ef-flow-wrap .ef-chara.-style {
		width: calc(109vw / var(--scale));
		height: calc(185vw / var(--scale));
	}
	.ef-flow-wrap .ef-chara.-div {
		width: calc(140vw / var(--scale));
		height: calc(189vw / var(--scale));
	}
	.ef-flow-wrap .ef-chara.-span {
		width: calc(140vw / var(--scale));
		height: calc(183vw / var(--scale));
	}
	.ef-flow-wrap .ef-chara.-strong {
		width: calc(203vw / var(--scale));
		height: calc(225vw / var(--scale));
	}
	.ef-flow-wrap .ef-chara.-nav {
		width: calc(104vw / var(--scale));
		height: calc(193vw / var(--scale));
	}
	.ef-flow-wrap .ef-chara.-dl {
		width: calc(137vw / var(--scale));
		height: calc(187vw / var(--scale));
	}
	.ef-flow-wrap .ef-chara.-input {
		width: calc(135vw / var(--scale));
		height: calc(173vw / var(--scale));
	}
}
.ef-flow-wrap .ef-chara img {
	will-change: animation;
	animation: charaTurn1 8s cubic-bezier(0.65, 0, 0.35, 1) alternate infinite;
	animation-duration: calc(var(--mv-beat) * 8);
}
.ef-flow-wrap .ef-chara:nth-of-type(3n) img {
	animation-name: charaTurn2;
}
@keyframes charaTurn1 {
	from { transform: rotateZ(20deg) rotateY(0deg); }
	to { transform: rotateZ(-20deg) rotateY(300deg); }
}
@keyframes charaTurn2 {
	from { transform: rotateZ(-10deg) rotateY(0deg); }
	to { transform: rotateZ(10deg) rotateY(400deg); }
}





/* --------------------------------------------------
   coverShut
   -------------------------------------------------- */
.ef-cover-wrap {
	pointer-events: none;
	z-index: 5;
	position: fixed;
}
.ef-cover-wrap,
.ef-cover {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ef-cover {
	position: absolute;
	transform-origin: 50% 0;
}
.ef-cover.-c1 { fill: var(--c-meta); }
.ef-cover.-c2 { fill: var(--c-script); }
.ef-cover.-c3 { fill: var(--c-span); }
.ef-cover.-c4 { fill: var(--c-style); }
.ef-cover.-c5 { fill: var(--c-div); }
.ef-cover.-c6 { fill: var(--c-em); }
.ef-cover.-c7 { fill: var(--c-strong); }
.ef-cover.-c8 { fill: var(--c-nav); }
.ef-cover.-c9 { fill: var(--c-dl); }
.ef-cover.-c10 { fill: var(--c-input); }

/*.ef-cover.is-anim {
	transition: transform .24s cubic-bezier(.6,0,.6,1);
}*/




/* --------------------------------------------------
   RainEffect 雨
   -------------------------------------------------- */
.ef-rain-wrap {
	transition: opacity .24s;
	opacity: .8;
}
.ef-rain-wrap.fadeout {
	opacity: 0;
}
.ef-rain {
	position: absolute;
	bottom: 100%;
	animation: fall .8s cubic-bezier(0,.1,1,.9) infinite;
}
.ef-rain .r {
	overflow: visible;
	fill: none;
	stroke: white;
	stroke-linecap: round;
}
.ef-rain .r.-w1 { stroke-width: 1; }
.ef-rain .r.-w2 { stroke-width: 2; }
.ef-rain .r.-w3 { stroke-width: 3; }
.ef-rain .r.-w4 { stroke-width: 4; }
.ef-rain .r.-w5 { stroke-width: 5; }
.ef-rain .r.-w6 { stroke-width: 6; }
.ef-rain .r.-w7 { stroke-width: 7; }
.ef-rain .r.-w8 { stroke-width: 8; }

.ef-rain-wrap:not(.is-fall) .ef-rain {
	animation-play-state: paused;
}
@keyframes fall {
	from { transform: translateY(100vh) translateY(100%); }
	to { transform: none; }
}
@media screen and (max-width: 480px) {
	.ef-rain .r.-w4 { stroke-width: 2; }
	.ef-rain .r.-w5 { stroke-width: 3; }
	.ef-rain .r.-w6 { stroke-width: 4; }
	.ef-rain .r.-w7 { stroke-width: 5; }
	.ef-rain .r.-w8 { stroke-width: 4; }
}

/* --------------------------------------------------
   ClapEffect 拍手
   -------------------------------------------------- */
.ef-clap-wrap {
	transition: opacity .24s;
}
.ef-clap-wrap.fadeout {
	opacity: 0;
}
.ef-clap,
.ef-clap .obj {
	width: 32px;
	height: 32px;
}
.ef-clap {
	position: absolute;
	color: white;
	animation: claprise .96s linear infinite;
}
.ef-clap .obj {
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-dasharray: 20 40;
	stroke-dashoffset: 30;
	animation: clapping .96s var(--easeOut) infinite;
	animation-duration: inherit;
	animation-delay: inherit;
}
.ef-clap-wrap:not(.is-rise) .ef-clap,
.ef-clap-wrap:not(.is-rise) .ef-clap .obj {
	animation-play-state: paused;
}
@keyframes claprise {
	from { transform: translateY(4vh); }
	to { transform: translateY(-4vh); }
}
@keyframes clapping {
	from { stroke-dashoffset: 30; }
	to { stroke-dashoffset: 80; }
}

/* --------------------------------------------------
   SceneSlicer 流れる背景パターンをを切り替える
   -------------------------------------------------- */
.bg-pattern-wrap {
	pointer-events: none;
}
.bg-pattern-wrap,
.bg-pattern,
.bg-pattern::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.bg-pattern.is-anim {
	transition: -webkit-clip-path .3s, clip-path .3s;
	transition-timing-function: cubic-bezier(.4,.1,.18,1);
}
.bg-pattern:not(.is-show) {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.bg-pattern.is-show {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.bg-pattern.is-hide {
	-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.bg-pattern::before {
	content: "";
	opacity: .2;
	background: center / 80px repeat;
	animation: bgScroll 2s linear infinite;
}
@keyframes bgScroll {
	from { background-position: 0 0; }
	to { background-position: -80px 80px; }
}
.scene_dot::before {
	background-image: url(../img/bg_dot.svg); background-size: 20px;
	animation-name: dotScroll;
	animation-duration: 1s;
}
@keyframes dotScroll {
	from { background-position: 0 0; }
	to { background-position: 20px 20px; }
}
.scene_logo::before {
	background-image: url(../img/bg_logo.svg);
	background-size: 120px 74px;
	animation-name: logoScroll;
	animation-duration: 6s;
}
@keyframes logoScroll {
	from { background-position: 0 0; }
	to { background-position: 120px -74px; }
}
.scene_check::before {
	background-image: url(../img/bg_check.svg);
}
.scene_saw::before {
	background-image: url(../img/bg_saw.svg);
	background-size: 80px;
	animation-name: sawScroll;
	animation-duration: 4s;
}
@keyframes sawScroll {
	from { background-position: 0 0; }
	to { background-position: 0 -80px; }
}
.scene_dempa::before {
	background-image: url(../img/bg_dempa.svg);
	background-size: 210px 252px;
	animation-name: dempaScroll;
	animation-duration: 20s;
}
@keyframes dempaScroll {
	from { background-position: 0 0; }
	to { background-position: -420px -252px; }
}
.scene_glory::before {
	background-image: url(../img/bg_glory.svg);
}
.scene_rain::before {
	background-image: url(../img/bg_rain.svg);
	background-size: 300px 150px;
	animation-name: rainScroll;
	animation-duration: 8s;
}
@keyframes rainScroll {
	from { background-position: 0 0; }
	to { background-position: -300px 300px; }
}
.scene_twinkle::before {
	background-image: url(../img/bg_twinkle.svg);
	background-size: 48px 48px;
	animation-name: twinkleScroll;
	animation-duration: 3s;
}
@keyframes twinkleScroll {
	from { background-position: 0 0; }
	to { background-position: -48px 96px; }
}
.scene_sparkle::before {
	background-image: url(../img/bg_sparkle.svg);
}

/* --------------------------------------------------
   SliceGradient
   -------------------------------------------------- */
.ef-gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 160vw;
	height: 100%;
	background: #fff;
	transform-origin: 0 50%;
	transform: translateX(-100%);
	transition-property: transform;
	transition-duration: var(--mv-beat);
	transition-timing-function: var(--easeOut);
}
.ef-gradient::before,
.ef-gradient::after {
	content: "";
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
}
.ef-gradient::before { left: 0; }
.ef-gradient::after { left: 50%; }

.ef-gradient.-tomorning::before { background: var(--c-night); }
.ef-gradient.-tomorning::after { background: var(--c-twilight); }

.ef-gradient.-toevening::before { background: var(--c-morning); }
.ef-gradient.-toevening::after { background: var(--c-twilight); }

.ef-gradient.-tonight::before { background: var(--c-evening); }
.ef-gradient.-tonight::after { background: var(--c-twilight); }

.ef-gradient.-tomorning,
.ef-gradient.-toevening,
.ef-gradient.-tonight {
	transform: translateX(100vw);
}
#bg[mode="morning"] {
	background: var(--c-morning);
}
#bg[mode="night"] {
	background: var(--c-night);
}
#bg[mode="evening"] {
	background: var(--c-evening);
}











/* --------------------------------------------------
   Transform Scroll
   -------------------------------------------------- */
html.isTouch .l-main.js-sc-dummy {
	z-index: -1;
	position: relative;
}
html:not(.isTouch) .l-main.js-sc-wrap.js-fixed {
	position: fixed;
}
html:not(.isTouch) .l-main.js-sc-wrap.js-fixed {
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	will-change: transform;
}

/* --------------------------------------------------
   Slip Objects
   -------------------------------------------------- */
.l-slipobjects {
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	max-width: 1366px;
	height: calc(100% - 100vh);
	margin: 0 auto;
}
.l-slipobjects .obj {
	position: absolute;
	--obj-size: 100px;
	width: var(--obj-size);
	height: var(--obj-size);
}
.l-slipobjects .debri {
	position: absolute;
	--debri-size: 200px;
	width: var(--debri-size);
	fill: white;
}
.l-slipobjects .o {
	width: 100%;
	height: auto;
}
.l-slipobjects .debri .o {
	fill: inherit;
	animation: rotation 30s linear infinite;
}
@media screen and (max-width: 767px) {
	.l-slipobjects .obj {
		--obj-size: 80px;
	}
	.l-slipobjects .debri {
		--debri-size: 120px;
	}
}

/* :::::: is-hide :::::: */
.l-slipobjects.is-hide .js-sc-slip {
	opacity: 0;
	transform: scale(.4);
}
.l-slipobjects.is-anim .js-sc-slip {
	transition: opacity .24s, transform .24s var(--easeBack);
}
/*.l-slipobjects.is-anim .js-sc-slip:nth-child(10n+2) { transition-delay: .1s; }
.l-slipobjects.is-anim .js-sc-slip:nth-child(10n+3) { transition-delay: .2s; }
.l-slipobjects.is-anim .js-sc-slip:nth-child(10n+4) { transition-delay: .3s; }
.l-slipobjects.is-anim .js-sc-slip:nth-child(10n+5) { transition-delay: .4s; }
.l-slipobjects.is-anim .js-sc-slip:nth-child(10n+6) { transition-delay: .5s; }
.l-slipobjects.is-anim .js-sc-slip:nth-child(10n+7) { transition-delay: .6s; }
.l-slipobjects.is-anim .js-sc-slip:nth-child(10n+8) { transition-delay: .7s; }
.l-slipobjects.is-anim .js-sc-slip:nth-child(10n+9) { transition-delay: .8s; }
.l-slipobjects.is-anim .js-sc-slip:nth-child(10n) { transition-delay: .9s; }*/

/* :::::: NoiseSandstorm 砂嵐 :::::: */
.l-slipobjects.is-noise .js-sc-slip {
	filter: url(#sandstorm);
}

/* :::::: objects :::::: */
.l-slipobjects .obj.-saturn {
	top: 24vh;
	left: calc(90% - (var(--obj-size) * .5));
}
.l-slipobjects .obj.-saturn .o {
	animation: rotation 60s linear infinite;
}
.l-slipobjects .obj.-moon {
	top: 18vh;
	left: calc(8% - (var(--obj-size) * .5));
}
.l-slipobjects .obj.-pluto {
	z-index: 1;
	top: 69%;
	left: calc(84% - (var(--obj-size) * .6));
	width: calc(var(--obj-size) * 1.2);
	height: calc(var(--obj-size) * 1.2);
}
.l-slipobjects .obj.-eye {
	top: 88vh;
	left: calc(8% - var(--obj-size));
	width: calc(var(--obj-size) * 2);
	height: calc(var(--obj-size) * 2);
}
.l-slipobjects .obj.-eye[style] {
	top: 82vh;
}
.l-slipobjects .obj.-morning {
	top: 30%;
	left: calc(90% - (var(--obj-size) * 4));
	width: calc(var(--obj-size) * 8);
	height: calc(var(--obj-size) * 8);
}
.l-slipobjects .obj.-evening {
	top: 60%;
	left: calc(12% - (var(--obj-size) * 3));
	width: calc(var(--obj-size) * 6);
	height: calc(var(--obj-size) * 6);
}
.l-slipobjects .obj.-fog {
	top: 90%;
	left: calc(94% - (var(--obj-size) * 1.5));
	width: calc(var(--obj-size) * 3);
	height: calc(var(--obj-size) * 3);
}
.l-slipobjects .obj.-hat {
	z-index: 1;
	top: 84%;
	left: calc(14% - (var(--obj-size) * .5));
}
.l-slipobjects .obj.-hat .o {
	animation: rotation 30s linear infinite;
}
.l-slipobjects .obj.-dempa {
	z-index: 1;
	top: 44%;
	left: calc(8% - (var(--obj-size) * .5));
}
.l-slipobjects .obj.-dempa .o {
	animation: rotation 30s linear infinite;
}
.l-slipobjects .obj.-newmoon {
	z-index: 1;
	top: 64%;
	left: calc(86% - (var(--obj-size) * .5));
}
.l-slipobjects .obj.-star {
	z-index: 1;
	top: 80%;
	left: calc(83% - (var(--obj-size) * .4));
	width: calc(var(--obj-size) * .8);
	height: calc(var(--obj-size) * .8);
}
.l-slipobjects .obj.-star .o {
	animation: rotation 20s reverse linear infinite;
}
.l-slipobjects .obj.-hatena {
	z-index: 1;
	top: calc(100vh + 5%);
	left: calc(92% - (var(--obj-size) * .4));
	width: calc(var(--obj-size) * .8);
	height: calc(var(--obj-size) * .8);
}
.l-slipobjects .obj.-hatena .o {
	transform: rotate(12deg);
}
.l-slipobjects .obj.-exclam {
	z-index: 1;
	top: calc(100vh + 10%);
	left: calc(7% - (var(--obj-size) * .4));
	width: calc(var(--obj-size) * .8);
	height: calc(var(--obj-size) * .8);
}
.l-slipobjects .obj.-exclam .o {
	transform: rotate(-12deg);
}
@media screen and (max-width: 480px) {
	.l-slipobjects .obj.-hat {
		top: 77%;
	}
	.l-slipobjects .obj.-newmoon {
		top: 59%;
	}
	.l-slipobjects .obj.-morning {
		left: calc(90% - (var(--obj-size) * 3));
		width: calc(var(--obj-size) * 6);
		height: calc(var(--obj-size) * 6);
	}
	.l-slipobjects .obj.-evening {
		top: 70%;
		left: calc(12% - (var(--obj-size) * 2));
		width: calc(var(--obj-size) * 4);
		height: calc(var(--obj-size) * 4);
	}
}

/* :::::: debris :::::: */
.l-slipobjects .debri.-debri1 {
	top: 40vh;
	left: calc(12% - (var(--debri-size) * .5));
	height: calc(var(--debri-size) * .2);
	fill: var(--c-meta);
}
.l-slipobjects .debri.-debri2 {
	top: 64vh;
	left: calc(92% - (var(--debri-size) * .5));
	height: calc(var(--debri-size) * .15);
	fill: var(--c-script);
}
.l-slipobjects .debri.-debri3 {
	top: 28%;
	left: calc(27% - (var(--debri-size) * .5));
	height: calc(var(--debri-size) * .1);
	fill: var(--c-span);
}
.l-slipobjects .debri.-debri4 {
	top: 36%;
	left: calc(9% - (var(--debri-size) * .5));
	height: calc(var(--debri-size) * .6);
	fill: var(--c-style);
}
.l-slipobjects .debri.-debri5 {
	top: 48%;
	left: calc(95% - (var(--debri-size) * .5));
	height: var(--debri-size);
	fill: var(--c-div);
}
.l-slipobjects .debri.-debri6 {
	top: 70%;
	left: calc(11% - (var(--debri-size) * .5));
	height: calc(var(--debri-size) * .2);
	fill: var(--c-em);
}
.l-slipobjects .debri.-debri7 {
	top: 68%;
	left: calc(97% - (var(--debri-size) * .5));
	height: calc(var(--debri-size) * .15);
	fill: var(--c-strong);
}
.l-slipobjects .debri.-debri8 {
	top: 78%;
	left: calc(19% - (var(--debri-size) * .5));
	height: calc(var(--debri-size) * .1);
	fill: var(--c-nav);
}
.l-slipobjects .debri.-debri9 {
	top: 88%;
	left: calc(92% - (var(--debri-size) * .5));
	height: calc(var(--debri-size) * .6);
	fill: var(--c-dl);
}
.l-slipobjects .debri.-debri10 {
	top: 96%;
	left: calc(12% - (var(--debri-size) * .5));
	height: var(--debri-size);
	fill: var(--c-input);
}
@keyframes rotation {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@media screen and (max-width: 767px) {
	.l-slipobjects .debri.-debri3 {
		left: calc(90% - (var(--debri-size) * .5));
	}
	.l-slipobjects .debri.-debri8 {
		left: calc(72% - (var(--debri-size) * .5));
	}
}








/* :::::: AppearanceLine :::::: */
.ef-line {
	position: absolute;
	top: 30%;
	left: 30%;
	width: 200px;
	height: 44px;
}
.ef-line svg {
	width: 100%;
	height: auto;
	fill: none;
	stroke: var(--c-span);
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
}
.ef-line .l {
	animation: appearanceLine .48s linear;
	animation-duration: calc(var(--mv-beat) / 2);
}
.ef-line .l2 { animation-delay: .1s; }
.ef-line .l3 { animation-delay: .2s; }
.ef-line .l4 { animation-delay: .3s; }
.ef-line .l5 { animation-delay: .4s; }
.ef-line .l6 { animation-delay: .5s; }
@keyframes appearanceLine {
	from { stroke-dashoffset: 360; }
	to { stroke-dashoffset: 120; }
}

/* :::::: RotateSquare :::::: */
.ef-square {
	position: absolute;
	top: calc(50% - 2px);
	bottom: calc(50% - 2px);
	background: white;
}
.ef-square.l {
	right: 0;
	left: 100%;
}
.ef-square.r {
	right: 100%;
	left: 0;
}
.ef-square::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ef-square svg {
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 100px);
	fill: none;
	stroke: white;
	stroke-width: 2;
}
.ef-square .r {
	opacity: 0;
}
.ef-square .c {
	top: calc(50% - 150px);
	left: calc(50% - 150px);
	stroke-dasharray: 1036.2;
	stroke-dashoffset: 3108.6;
}
.ef-square.is-anim,
.ef-square.is-anim svg {
	--approach: .4s;
	--zoom: .4s;
	--finish: .8s;
	animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
	animation-fill-mode: forwards;
}
.ef-square.l.is-anim {
	animation-name: square_1l, square_2;
}
.ef-square.r.is-anim {
	animation-name: square_1r, square_2;
}
/* div 伸びて縮んで、広がりフェードアウト */
.ef-square.is-anim {
	animation-duration: var(--approach), var(--zoom);
	animation-delay: 0s, var(--approach);
}
/* rect 広がって、回転しながら縮みフェードアウト */
.ef-square.is-anim .r {
	animation-name: square_3, square_finish;
	animation-duration: var(--zoom), var(--finish);
	animation-delay: var(--approach), calc(var(--approach) + var(--zoom));
}
/* circle 回転と同じスピードの軌道 */
.ef-square.is-anim .c {
	animation-name: circle_1;
	animation-duration: var(--finish);
	animation-delay: calc(var(--approach) + var(--zoom));
	animation-timing-function: ease;
}
@keyframes square_1r {
	0% { right: 100%; }
	40% { right: calc(50% - 2px); }
	100% { right: calc(50% - 2px); left: calc(50% - 2px); }
}
@keyframes square_1l {
	0% { left: 100%; }
	40% { left: calc(50% - 2px); }
	100% { left: calc(50% - 2px); right: calc(50% - 2px); }
}
@keyframes square_2 {
	from {
		right: calc(50% - 2px);
		left: calc(50% - 2px);
		background: white;
	}
	to {
		top: calc(50% - 100px);
		right: calc(50% - 100px);
		bottom: calc(50% - 100px);
		left: calc(50% - 100px);
		background: rgba(255,255,255,0);
	}
}
@keyframes square_3 {
	from { opacity: 0; transform: scale(.05); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes circle_1 {
	/* stroke-dashoffset: calc(990px * 3.14) (px を付ければ calc でも行ける) */
	from { stroke-dashoffset: 3108.6; transform: rotate(50deg); }
	/* stroke-dashoffset: calc(330px * 3.14) */
	to { stroke-dashoffset: 1036.2; transform: rotate(90deg); }
}
@keyframes square_finish {
	0% { transform: rotate(0deg); }
	60% { transform: rotate(315deg); }
	100% { transform: rotate(360deg) scale(0); }
}

/* :::::: StriperEffect :::::: */
.ef-striper {
	pointer-events: none;
	display: flex;
	position: absolute;
}
.ef-striper .bar {
	position: relative;
	width: 5vw;
	height: 20vh;
}
.ef-striper .bar::before,
.ef-striper .bar::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 25%;
	background: white;
	transform: scaleY(0);
}
.ef-striper .bar::before {
	left: 0;
}
.ef-striper .bar::after {
	left: 50%;
}
.ef-striper.is-anim .bar::before,
.ef-striper.is-anim .bar::after {
	animation: striper_1 .3s cubic-bezier(0.32, 0, 0.67, 0) forwards,
	striper_finish .3s .3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.ef-striper.is-anim .bar.b1::before { animation-delay:  0s, .3s; }
.ef-striper.is-anim .bar.b1::after  { animation-delay: .1s, .4s; }
.ef-striper.is-anim .bar.b2::before { animation-delay: .2s, .5s; }
.ef-striper.is-anim .bar.b2::after  { animation-delay: .3s, .6s; }
.ef-striper.is-anim .bar.b3::before { animation-delay: .4s, .7s; }
.ef-striper.is-anim .bar.b3::after  { animation-delay: .5s, .8s; }

@keyframes striper_1 {
	from { opacity: 0; transform: translateY(5vh) scaleY(.2); transform-origin: center bottom; }
	to { opacity: 1; transform: none; transform-origin: center bottom; }
}
@keyframes striper_finish {
	from { opacity: 1; transform: none; transform-origin: center top; }
	to { opacity: 0; transform: translateY(-5vh) scaleY(.2); transform-origin: center top; }
}

/* :::::: PuddingBox :::::: */
.pudding {
	position: absolute;
	bottom: 0;
	left: calc(50% - 50px);
	fill: white;
	transition: opacity .2s;
}
.pudding:not(.act) {
	opacity: 0;
}
.pudding.act {
	transform-origin: center bottom;
	animation:
		bounce1 .6s cubic-bezier(0.32, 0, 0.67, 0) backwards,
		bounce2 .6s .6s forwards;
}
.pudding.act.act2 {
	animation:
		bounce3 .3s backwards,
		bounce4 .3s .3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.pudding.act.act2 {
	opacity: 0;
	transition-delay: .4s;
}
@keyframes bounce1 {
	from { transform: translateY(-80vh); }
	to { transform: translateY(0); }
}
@keyframes bounce2 {
	20% { transform: scale(1.2, .6); }
	40% { transform: scale(.94, 1.6); }
	60% { transform: scaleY(.8); }
	80% { transform: scaleY(1.1); }
	90% { transform: scaleY(.94); }
	100% { transform: none; }
}
@keyframes bounce3 {
	10% { transform: none; }
	100% { transform: scaleY(.8); }
}
@keyframes bounce4 {
	from { transform: scaleY(.8) translateY(0); }
	to { transform: scaleY(1.02) translateY(-80px); }
}