@charset "utf-8";

/* TEST */
#memo {
	position: absolute;
	top: calc(50% - 2em);
	left: 1em;
	color: var(--c-co);
	line-height: 1;
}
#mv, #bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#mv {
	z-index: 3;
}
#bg {
	z-index: 1;
	background: var(--c-night);
}

/* --------------------------------------------------
   Music Visual
   -------------------------------------------------- */
.mv-pause #mv *,
.mv-pause #mv *::before,
.mv-pause #mv *::after,
.mv-pause #bg *,
.mv-pause #bg *::before,
.mv-pause #bg *::after,
.mv-pause #mv .ef-figure .f {
	animation-play-state: paused;
}
/*.mv-pause .l-slipobjects .js-sc-slip.obj .o,
.mv-pause .l-slipobjects .js-sc-slip.debri .o {
	animation-play-state: paused;
}*/





/* --------------------------------------------------
   Analyzer
   -------------------------------------------------- */
#bg .analyzer {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}
#bg .analyzer.is-hide {
	visibility: hidden;
}

/* --------------------------------------------------
   Ground
   -------------------------------------------------- */
.mv-ground {
	z-index: 3;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100px;
	width: 100%;
	transform-origin: 50% 100%;
}
.mv-ground:not(.is-appear) {
	transform: scaleY(0);
}
.mv-ground.is-anim {
	transition: transform .3s;
}
.mv-ground.is-anim:not(.is-appear) {
	transition-delay: .3s;
}
.mv-ground .ground {
	overflow: visible;
	width: 100%;
	fill: var(--c-ground);
}

/* --------------------------------------------------
   Town
   -------------------------------------------------- */
.mv-town {
	z-index: 2;
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
}
.mv-town .obj {
	position: absolute;
	bottom: 48px;
}
.mv-town .obj svg {
	width: 100%;
	height: 100%;
}
.mv-town .obj.-bld1 {
	left: 144px;
	width: 117px;
	height: 224px;
}
.mv-town .obj.-bld2 {
	left: 226px;
	width: 146px;
	height: 113px;
}
.mv-town .obj.-bld3 {
	left: 342px;
	width: 115px;
	height: 197px;
}
.mv-town .obj.-bld4 {
	left: 430px;
	width: 136px;
	height: 86px;
}
.mv-town .obj.-bld5 {
	left: 524px;
	width: 150px;
	height: 597px;
}
.mv-town .obj.-bld6 {
	left: 632px;
	width: 211px;
	height: 247px;
}
.mv-town .obj.-bld7 {
	left: 696px;
	width: 158px;
	height: 419px;
}
.mv-town .obj.-bld8 {
	left: 825px;
	width: 149px;
	height: 137px;
}
.mv-town .obj.-bld9 {
	left: 859px;
	width: 134px;
	height: 299px;
}
.mv-town .obj.-bld10 {
	left: 963px;
	width: 105px;
	height: 169px;
}
.mv-town .obj.-dome {
	left: 168px;
	width: 561px;
	height: 206px;
}
.mv-town .obj.-tower {
	left: 285px;
	width: 72px;
	height: 433px;
}
.mv-town .obj.-sdw1 {
	left: 0;
	width: 229px;
	height: 80px;
}
.mv-town .obj.-sdw2 {
	left: 6px;
	width: 249px;
	height: 157px;
}
.mv-town .obj.-sdw3 {
	left: 77px;
	width: 204px;
	height: 217px;
}
.mv-town .obj.-sdw4 {
	left: 949px;
	width: 185px;
	height: 212px;
}
.mv-town .obj.-sdw5 {
	left: 972px;
	width: 229px;
	height: 155px;
}
.mv-town .obj.-sdw6 {
	left: 1021px;
	width: 178px;
	height: 78px;
}
@media screen and (max-width: 1200px) {
	.mv-town {
		--townScale: 12;
	}
	.mv-town .obj.-bld1 {
		left: calc(144vw / var(--townScale));
		width: calc(117vw / var(--townScale));
		height: calc(224vw / var(--townScale));
	}
	.mv-town .obj.-bld2 {
		left: calc(226vw / var(--townScale));
		width: calc(146vw / var(--townScale));
		height: calc(113vw / var(--townScale));
	}
	.mv-town .obj.-bld3 {
		left: calc(342vw / var(--townScale));
		width: calc(115vw / var(--townScale));
		height: calc(197vw / var(--townScale));
	}
	.mv-town .obj.-bld4 {
		left: calc(430vw / var(--townScale));
		width: calc(136vw / var(--townScale));
		height: calc(86vw / var(--townScale));
	}
	.mv-town .obj.-bld5 {
		left: calc(524vw / var(--townScale));
		width: calc(150vw / var(--townScale));
		height: calc(597vw / var(--townScale));
	}
	.mv-town .obj.-bld6 {
		left: calc(632vw / var(--townScale));
		width: calc(211vw / var(--townScale));
		height: calc(247vw / var(--townScale));
	}
	.mv-town .obj.-bld7 {
		left: calc(696vw / var(--townScale));
		width: calc(158vw / var(--townScale));
		height: calc(419vw / var(--townScale));
	}
	.mv-town .obj.-bld8 {
		left: calc(825vw / var(--townScale));
		width: calc(149vw / var(--townScale));
		height: calc(137vw / var(--townScale));
	}
	.mv-town .obj.-bld9 {
		left: calc(859vw / var(--townScale));
		width: calc(134vw / var(--townScale));
		height: calc(299vw / var(--townScale));
	}
	.mv-town .obj.-bld10 {
		left: calc(963vw / var(--townScale));
		width: calc(105vw / var(--townScale));
		height: calc(169vw / var(--townScale));
	}
	.mv-town .obj.-dome {
		left: calc(168vw / var(--townScale));
		width: calc(561vw / var(--townScale));
		height: calc(206vw / var(--townScale));
	}
	.mv-town .obj.-tower {
		left: calc(285vw / var(--townScale));
		width: calc(72vw / var(--townScale));
		height: calc(433vw / var(--townScale));
	}
	.mv-town .obj.-sdw1 {
		width: calc(229vw / var(--townScale));
		height: calc(80vw / var(--townScale));
	}
	.mv-town .obj.-sdw2 {
		left: calc(6vw / var(--townScale));
		width: calc(249vw / var(--townScale));
		height: calc(157vw / var(--townScale));
	}
	.mv-town .obj.-sdw3 {
		left: calc(77vw / var(--townScale));
		width: calc(204vw / var(--townScale));
		height: calc(217vw / var(--townScale));
	}
	.mv-town .obj.-sdw4 {
		left: calc(949vw / var(--townScale));
		width: calc(185vw / var(--townScale));
		height: calc(212vw / var(--townScale));
	}
	.mv-town .obj.-sdw5 {
		left: calc(972vw / var(--townScale));
		width: calc(229vw / var(--townScale));
		height: calc(155vw / var(--townScale));
	}
	.mv-town .obj.-sdw6 {
		left: calc(1021vw / var(--townScale));
		width: calc(178vw / var(--townScale));
		height: calc(78vw / var(--townScale));
	}
}

/* town.svg styles */
.dome-1{fill:#f5e929;}.dome-2{fill:#0c68ac;}.dome-3{fill:#2b4491;}.dome-4{fill:none;stroke:#70a5d3;stroke-linecap:round;stroke-miterlimit:10;stroke-width:3;}.tower-1,.tower-4,.tower-6{fill:none;}.tower-2{fill:#0c68ac;}.tower-4{stroke:#2aa3d1;stroke-width:4;}.tower-4,.tower-6,.tower-7{stroke-miterlimit:10;}.tower-5{fill:#2b4491;}.tower-6,.tower-7{stroke:#5ca6e3;stroke-linecap:round;stroke-width:3;}.bld1-1{fill:#f5e929;}.bld1-2{fill:#efb134;}.bld1-3{fill:#359dd1;}.bld1-4{fill:#121c3d;}.bld1-5{fill:#01030e;}.bld1-6{fill:#0b60ab;}.bld2-1{fill:#6b84bb;}.bld2-2{fill:#121c3d;}.bld2-3{fill:#2c4489;}.bld3-1{fill:#70a5d3;}.bld3-2{fill:#0c68ac;}.bld3-3{fill:#002a74;}.bld3-4{fill:#316aae;}.bld4-1{fill:#70a5d3;}.bld4-2{fill:#0c68ac;}.bld4-3{fill:#002a74;}.bld4-4{fill:#316aae;}.bld5-1{fill:#70a5d3;}.bld5-2{fill:#6b84bb;}.bld5-3{fill:#359dd1;}.bld5-4{fill:#0c68ac;}.bld5-5{fill:#0b60ab;}.bld5-6{fill:#002a74;}.bld5-7{fill:#121c3d;}.bld5-8{fill:#01030e;}.bld5-9{fill:#2c4489;}.bld6-1{fill:#f5e929;}.bld6-2{fill:#efb134;}.bld6-3{fill:#359dd1;}.bld6-4{fill:#121c3d;}.bld6-5{fill:#0b60ab;}.bld6-6{fill:#01030e;}.bld7-1{fill:#70a5d3;}.bld7-2{fill:#0c68ac;}.bld7-3{fill:#002a74;}.bld7-4{fill:#316aae;}.bld8-1{fill:#70a5d3;}.bld8-2{fill:#0c68ac;}.bld8-3{fill:#002a74;}.bld8-4{fill:#316aae;}.bld9-1{fill:#6b84bb;}.bld9-2{fill:#2b4491;}.bld9-3{fill:#071252;}.bld9-4{fill:#2c4489;}.bld10-1{fill:#359dd1;}.bld10-2{fill:#121c3d;}.bld10-3{fill:#01030e;}.bld10-4{fill:#0b60ab;}.sdw1-1{fill:#121c3d;}.sdw2-1{fill:#efb134;}.sdw3-1{fill:#6b84bb;}.sdw4-1{fill:#2b4491;}.sdw5-1{fill:#f5e929;}.sdw6-1{fill:#70a5d3;}

/* :::::: appear :::::: */
.mv-town:not(.is-appear) .obj {
	transform: translateY(100%) translateY(48px);
}
.mv-town.is-anim .obj {
	transition: transform .48s var(--easeOut);
}

/* :::::: animation :::::: */
.tower-4 {
	animation: skytree 1s linear infinite;
}
.dome-4 {
	stroke-dasharray: 12;
	animation: rotateLightS 1s linear infinite;
}
.tower-6 {
	stroke-dasharray: 30;
	animation: rotateLightM 2s .5s linear infinite;
}
.tower-7 {
	stroke-dasharray: 41;
	animation: rotateLightL 2s linear infinite;
}
@keyframes skytree {
	from { transform: translateX(-7px); }
	to { transform: none; }
}
@keyframes rotateLightS {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: 24; }
}
@keyframes rotateLightM {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: 60; }
}
@keyframes rotateLightL {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: 82; }
}

/* --------------------------------------------------
   Character (LineUpCharacter)
   -------------------------------------------------- */
.mv-chara {
	z-index: 4;
	position: absolute;
	right: 24px;
	bottom: 24px;
	left: 24px;
	width: calc(100% - 48px);
	height: 200px;
	max-width: 1000px;
	margin: 0 auto;
}
#bg:not(.can-see) .mv-chara {
	visibility: hidden;
}
.mv-chara .ef-chara {
	position: absolute;
	bottom: 16px;
	height: auto;
}
.mv-chara:not(.is-appear) .ef-chara {
	transform: translateY(-100vh);
}
.mv-chara:not(.is-appear).is-anim .ef-chara {
	transform-origin: center bottom;
	transform: perspective(500px) rotateX(-90deg);
	transition-timing-function: var(--easeOut);
}
.mv-chara.is-anim .ef-chara {
	--interval: .048s;
	transition: transform .48s var(--easeIn);
}
.mv-chara.is-anim.is-appear .ef-chara.-script { transition-delay: calc(var(--interval) * 0); }
.mv-chara.is-anim.is-appear .ef-chara.-style  { transition-delay: calc(var(--interval) * 1); }
.mv-chara.is-anim.is-appear .ef-chara.-strong { transition-delay: calc(var(--interval) * 2); }
.mv-chara.is-anim.is-appear .ef-chara.-dl     { transition-delay: calc(var(--interval) * 3); }
.mv-chara.is-anim.is-appear .ef-chara.-meta   { transition-delay: calc(var(--interval) * 4); }
.mv-chara.is-anim.is-appear .ef-chara.-em     { transition-delay: calc(var(--interval) * 5); }
.mv-chara.is-anim.is-appear .ef-chara.-div    { transition-delay: calc(var(--interval) * 6); }
.mv-chara.is-anim.is-appear .ef-chara.-nav    { transition-delay: calc(var(--interval) * 7); }
.mv-chara.is-anim.is-appear .ef-chara.-input  { transition-delay: calc(var(--interval) * 8); }
.mv-chara.is-anim.is-appear .ef-chara.-span   { transition-delay: calc(var(--interval) * 9); }

.mv-chara .ef-chara.-meta,
.mv-chara .ef-chara.-em,
.mv-chara .ef-chara.-div,
.mv-chara .ef-chara.-nav,
.mv-chara .ef-chara.-input {
	bottom: 8px;
}
.mv-chara .ef-chara.-meta {
	left: calc(6% - 62px);
}
.mv-chara .ef-chara.-script {
	left: calc(14% - 73px);
}
.mv-chara .ef-chara.-em {
	left: calc(22.5% - 60px);
}
.mv-chara .ef-chara.-style {
	left: calc(32.5% - 54px);
}
.mv-chara .ef-chara.-div {
	left: calc(41% - 70px);
}
.mv-chara .ef-chara.-span {
	bottom: 0;
	left: calc(50% - 70px);
}
.mv-chara .ef-chara.-strong {
	left: calc(62% - 101px);
}
.mv-chara .ef-chara.-nav {
	left: calc(73.5% - 52px);
}
.mv-chara .ef-chara.-dl {
	left: calc(83% - 68px);
}
.mv-chara .ef-chara.-input {
	left: calc(93% - 67px);
}
@media screen and (max-width: 960px) {
	.mv-chara .ef-chara {
		--scale: 9.6;
	}
	.mv-chara .ef-chara.-meta {
		left: calc(6% - (62vw / var(--scale)));
		width: calc(125vw / var(--scale));
	}
	.mv-chara .ef-chara.-script {
		left: calc(14% - (73vw / var(--scale)));
		width: calc(146vw / var(--scale));
	}
	.mv-chara .ef-chara.-em {
		left: calc(22.5% - (60vw / var(--scale)));
		width: calc(121vw / var(--scale));
	}
	.mv-chara .ef-chara.-style {
		left: calc(32.5% - (54vw / var(--scale)));
		width: calc(109vw / var(--scale));
	}
	.mv-chara .ef-chara.-div {
		left: calc(41% - (70vw / var(--scale)));
		width: calc(140vw / var(--scale));
	}
	.mv-chara .ef-chara.-span {
		left: calc(50% - (70vw / var(--scale)));
		width: calc(140vw / var(--scale));
	}
	.mv-chara .ef-chara.-strong {
		left: calc(62% - (101vw / var(--scale)));
		width: calc(203vw / var(--scale));
	}
	.mv-chara .ef-chara.-nav {
		left: calc(73.5% - (52vw / var(--scale)));
		width: calc(104vw / var(--scale));
	}
	.mv-chara .ef-chara.-dl {
		left: calc(83% - (68vw / var(--scale)));
		width: calc(137vw / var(--scale));
	}
	.mv-chara .ef-chara.-input {
		left: calc(93% - (67vw / var(--scale)));
		width: calc(135vw / var(--scale));
	}
}
@media screen and (max-width: 480px) {
	.mv-chara .ef-chara {
		bottom: 8px;
	}
	.mv-chara .ef-chara.-meta,
	.mv-chara .ef-chara.-em,
	.mv-chara .ef-chara.-div,
	.mv-chara .ef-chara.-nav,
	.mv-chara .ef-chara.-input {
		bottom: 4px;
	}
	.mv-chara .ef-chara.-span {
		bottom: 0;
	}
}

/* --------------------------------------------------
   Caracter Basic Size
   -------------------------------------------------- */
.ef-chara.-meta {
	width: 125px;
	height: 177px;
}
.ef-chara.-script {
	width: 146px;
	height: 207px;
}
.ef-chara.-em {
	width: 121px;
	height: 180px;
}
.ef-chara.-style {
	width: 109px;
	height: 185px;
}
.ef-chara.-div {
	width: 140px;
	height: 189px;
}
.ef-chara.-span {
	width: 140px;
	height: 183px;
}
.ef-chara.-strong {
	width: 203px;
	height: 225px;
}
.ef-chara.-nav {
	width: 104px;
	height: 193px;
}
.ef-chara.-dl {
	width: 137px;
	height: 187px;
}
.ef-chara.-input {
	width: 135px;
	height: 173px;
}
.ef-chara img {
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------
   Noise
   -------------------------------------------------- */
body.is-noise::after {
	z-index: 4;
	content: "";
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	opacity: .2;
	background: url(../img/noise.png) 0 0 / 200px;
	animation: sandstorm var(--mv-beat) steps(4) infinite;
}
@keyframes sandstorm {
	from { background-position: 50px 10px; }
	to { background-position: -50px -10px; }
}