@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=RocknRoll+One&display=swap');

:root {
	--key-color: #ff4657;
	font-size: 16px;
	color: #000;
	}

* {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
	list-style: none;
	vertical-align: top;
	}

body {
	margin: 0;
	width: 100vw;
	overflow-x: hidden;
	background-color: #fff;
	font-family: "RocknRoll One", sans-serif;
	font-weight: 400;
	line-height: 1.5rem;
	text-align: center;
	-webkit-text-size-adjust: 100%;
	}

a {
	color: #000;
	}

#title {
	filter: blur(0);
	transform: scale(1.0);
	transition: filter 1200ms ease-in-out, transform 1200ms ease-out;
	visibility: hidden;
	}

	body.loading #title {
		transform: scale(0.9);
		transition: filter 100ms linear;
		filter: blur(32px);
		}

	body.ready #title {
		visibility: visible;
		}

#logo {
	display: block;
	width: 32vh;
	height: 32vh;
	margin: 18vh auto 4vh auto;
	}

#sub {
	display: block;
	width: 40vh;
	height: 5vh;
	margin: 0 auto 8vh auto;
	}

#vol {
	width: 20vh;
	aspect-ratio: 3/2;
	margin: 0 auto 12vh auto;
	}

#keyvisual {
	position: relative;
	width: 100vw;
	height: 65vw;
	}

#keyvisual .content {
	width: 100vw;
	overflow-x: hidden;
	}

#keyvisual .content .member,
#keyvisual .content .member img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	aspect-ratio: 4/3;
	transition: transform 200ms ease-out;
	}

#keyvisual #tape,
#keyvisual #tape img {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 50vw;
	height: 50vw;
	margin-left: -25vw;
	backdrop-filter: blur(12px);
	-webkit-mask-image: url("../image/tape_mask.png");
	mask-image: url("../image/tape_mask.png");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: 0 0;
	z-index: 100;
	}

	#keyvisual #tape {
		top: auto;
		bottom: -48vw;
		transition: transform 200ms ease-out;
		}

#keyvisual .mask {
	position: absolute;
	bottom: var(100vw - 100vh);
	left: 0;
	margin-top: 55vw;
	width: 100vw;
	height: 100vw;
	overflow: hidden;
	z-index: 50;
	}

	#keyvisual .mask::before {
		content: "";
		position: absolute;
		top: 8vw;
		left: -50vw;
		width: 200vw;
		height: 100vw;
		background: var(--key-color);
		transition: transform 200ms ease-out;
		transform-origin: center top;
		transform: rotate(-8deg);
		z-index: 50;
		}

#contents {
	position: relative;
	width: 100%;
	padding: 0 5vw;
	border-bottom: 1px solid #000;
	background: var(--key-color);
	box-sizing: border-box;
	z-index: 60;
	}

#contents h3 {
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-size: 2.4rem;
	line-height: 3rem;
	}

#contents .column {
	display: flex;
	justify-content: center;
	column-gap: 5vw;
	position: relative;
	}

#index {
	flex-grow: 1;
	padding-left: 48px;
	border-left: 16px solid #000;
	}

#index header {
	display: flex;
	column-gap: 48px;
	}

#index header img {
	width: 128px;
	}

#index ol {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 48px;
	text-align: left;
	font-size: 1.5rem;
	list-style-type: decimal;
	}

#index li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 16px;
	list-style-type: decimal;
	}

	#index li::before {
		content: "";
		flex-grow: 1;
		order: 4;
		min-width: 2rem;
		border-bottom: 2px dotted #000;
		}

#index li label {
	order: 1;
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-size: 2.0rem;
	}

#index li em {
	order: 2;
	line-height: 1.3rem;
	}

#index li i {
	font-size: 1.2rem;
	line-height: 1.3rem;
	order: 5;
	}

.links {
	display: flex;
	order: 6;
	}

.links .x,
.links .youtube,
.links .twitch {
	display: block;
	width: 64px;
	height: 64px;
	background: url("../image/icon_x.svg") no-repeat center center;
	background-size: contain;
	}

	.links .youtube {
		background-image: url("../image/icon_youtube.svg");
		}

	.links .twitch {
		background-image: url("../image/icon_twitch.svg");
		}

#dj {
	width: 25vw;
	}

#dj .content {
	position: sticky;
	top: 5vw;
	left: 0;
	}

#dj img {
	width: 100%;
	border: 16px solid #000;
	box-sizing: border-box;
	}

#dj h3 {
	padding: 1rem 0;
	}

#dj h3 small {
	margin-right: 1rem;
	font-size: 1rem;
	}

#dj p {
	text-align: left;
	}

#dj .links {
	justify-content: center;
	}

#special-thunks {
	display: flex;
	width: 100%;
	}

#special-thanks h3 {
	margin: 6rem 0 2rem 0;
	font-size: 3rem;
	}

#special-thanks ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem 4rem;
	width: 100%;
	}

#special-thanks li a {
	display: block;
	padding: 16px 0;
	font-size: 1.2rem;
	line-height: 1.2rem;
	color: #000;
	text-align: left;
	}

#special-thanks li a::before {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	margin-right: .5rem;
	border-radius: .6rem;
	background: #000;
	font-size: 1.2rem;
	color: #000;
	text-align: left;
	vertical-align: middle;
	}

#player {
	display: flex;
	align-items: center;
	column-gap: 24px;
	position: sticky;
	left: 25vw;
	bottom: 0;
	margin-top: 4rem;
	width: 50vw;
	padding: 16px;
	background: #000;
	border-radius: 48px 48px 0 0;
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;
	animation: rainbow 2s linear infinite;
	z-index: 2000;
	}

@keyframes rainbow {
	0% {box-shadow: 0 0 2rem #ff9ad8 }
	12% {box-shadow: 0 0 2rem #ff9999 }
	24% {box-shadow: 0 0 2rem #ffe195 }
	36% {box-shadow: 0 0 2rem #efff8a }
	48% {box-shadow: 0 0 2rem #93ff99 }
	60% {box-shadow: 0 0 2rem #86ffcf }
	72% {box-shadow: 0 0 2rem #9fc2ff }
	84% {box-shadow: 0 0 2rem #de96ff }
	100% {box-shadow: 0 0 2rem #ff9ad8 }
}

#player button {
	height: 64px;
	border: none;
	appearance: none;
	outline: none;
	line-height: 64px;
	cursor: pointer;
	}

#player button.play {
	width: 64px;
	background: url("../image/play.svg") no-repeat center center;
	background-size: contain;
	}

	#player.play:not(.pause) button.play {
		display: none;
		}

#player button.pause {
	display: none;
	width: 64px;
	background: url("../image/pause.svg") no-repeat center center;
	background-size: contain;
	}

	#player.play:not(.pause) button.pause {
		display: block;
		}

#player button.download {
	width: 64px;
	background: url("../image/download.svg") no-repeat center center;
	background-size: contain;
	}

#player .loader {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 64px;
	height: 64px;
	border-radius: 32px;
	background: var(--key-color);
	visibility: hidden;
	pointer-events: none;
	}

	#player.play.loading .loader {
		visibility: visible;
		pointer-events: auto;
		}

#player .loader .circle-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px 0 0 -20px;
	fill: transparent;
	stroke: #000;
	stroke-width: 5;
	animation: dash 2s ease infinite, rotate 2s linear infinite;
	}

@keyframes dash {
	0% {
		stroke-dasharray: 1,95;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 85,95;
		stroke-dashoffset: -15;
	}
	100% {
		stroke-dasharray: 85,95;
		stroke-dashoffset: -93;
	}
}

@keyframes rotate {
	0% {transform: rotate(0deg) }
	100% {transform: rotate(360deg) }
}

#player .progress {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	flex-grow: 1;
	cursor: pointer;
	}

#player .progress i,
#player .progress var {
	font-size: 12px;
	line-height: 16px;
	color: #fff;
	}

#player .progress-container {
	width: 100%;
	height: 16px;
	padding: 4px;
	border-radius: 8px;
	box-sizing: border-box;
	background: var(--key-color);
	}

#player .progress-bar {
	width: 0;
	min-width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #000;
	}

#player .progress var.current {
	width: 100%;
	text-align: center;
	}

#download {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms linear;
	}

	body.ready #download {
		display: flex;
		}

	body.download #download {
		opacity: 1;
		pointer-events: auto;
		}

#download .content {
	position: absolute;
	width: calc(100vw - 48px);
	max-width: 640px;
	max-height: calc(100vh - 48px);
	margin: auto;
	padding: 24px;
	background: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	z-index: 1000;
	transition: transform 200ms ease-out;
	transform-origin: 50% 50%;
	transform: scale(.95);
	}

	body.download #download .content {
		transform: scale(1);
		}

#download h1 {
	margin-bottom: 1rem;
	font-size: 1.8rem;
	text-align: left;
	}

#download p {
	text-align: left;
	}

#download dl {
	padding: 2rem 0;
	text-align: left;
	line-height: 150%;
	}

#download dt {
	color: var(--key-color);
	}

#download dd {
	position: relative;
	margin-top: .5rem;
	padding-left: 1.5rem;
	}

	#download dd::before {
		content: "●";
		position: absolute;
		top: 0;
		left: 0;
		}

#download .agreement {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	}

#download .button {
	padding: 0 32px;
	background: var(--key-color);
	border-radius: 32px;
	line-height: 64px;
	text-decoration: none;
	}

#download .close {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background: #000;
	z-index: 10001;
	}

	#download .close::before,
	#download .close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		margin:  -12px 0 0 -2px;
		width: 4px;
		height: 24px;
		background: #fff;
		border-radius: 1px;
		transform-origin: 50% 50%;
		transform: rotate(45deg);
		}

	#download .close::after {
		transform: rotate(-45deg);
		}

#download .closer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,.5);
	z-index: 100;
	}

#loader {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--key-color);
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-size: 4rem;
	color: #fff;
	opacity: 1;
	pointer-events: none;
	transition: opacity 1s linear;
	}

	body.loading #loader {
		transition: opacity 100ms linear;
		}

	body.ready #loader {
		transition: opacity 1s linear;
		opacity: 0;
		}

#progress {
	display: block;
	filter: blur(32px);
	transition: filter 1s ease-in;
	}

	body.loading #progress {
		transition: filter 100ms linear;
		filter: blur(0);
		}

footer {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 64px 0 64px 0;
	background: #fff;
	z-index: 3000;
	}

footer div.container,
footer a {
	display: flex;
	gap: 8px;
	position: relative;
	text-decoration: none;
	color: inherit;
	}

footer a.lab {
	display: block;
	height: 48px;
	margin-right: 16px;
	text-align: center;
	}

footer a.lab img {
	width: auto;
	height: 100%;
	}

footer a img.icon {
	width: 48px;
	border-radius: 24px;
	}

footer span {
	display: block;
	padding-top: 4px;
	text-align: left;
	}

footer a strong {
	font-size: 0.9rem;
	line-height: 16px;
	text-decoration: underline;
	color: #000;
	vertical-align: top;
	}

footer a img.x {
	width: 16px;
	height: 16px;
	vertical-align: top;
	}

footer a i {
	display: block;
	white-space: nowrap;
	font-size: 0.9rem;
	line-height: 16px;
	}

footer em {
	display: block;
	font-size: 0.9rem;
	}



/* ////////// under 1280 ////////// */

@media screen and (max-width: 1280px) {

#contents .column {
	flex-direction: column;
	row-gap: 4rem;
	}

#dj {
	width: auto;
	}

#dj .content {
	display: flex;
	justify-content: center;
	align-items: stretch;
	position: static;
	margin: auto;
	width: fit-content;
	background: #000;
	}

#dj img {
	width: auto;
	height: 240px;
	aspect-ratio: 108/72;
	flex-shrink: 1;
	}

#dj .info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px;
	background: #000;
	text-align: left;
	color: #fff;
	}

#dj h3 {
	padding-top: 0;
	}

#dj .links {
	justify-content: start;
	}

#dj .links a {
	margin: 16px 16px 0 0;
	border-radius: 50%;
	background-color: var(--key-color);
	}

#player {
	left: 15vw;
	width: 70vw;
	}

}



/* ////////// under 760 ////////// */

@media screen and (max-width: 760px) {

#logo {
	width: 24vh;
	height: 24vh;
	margin: 18vh auto 4vh auto;
	}

#sub {
	margin-bottom: 12vh;
	}

#keyvisual {
	height: 50vh;
	}

#keyvisual .content .member {
	width: 100vw;
	height: 90vw;
	aspect-ratio: auto;
	overflow: hidden;
	}
#keyvisual .content .member img {
	left: -11vw;
	width: 120vw;
	}

#keyvisual .mask {
	margin-top: 40vh;
	height: 100vh;
	}

	#keyvisual .mask::before {
		height: 100vh;
		}

#keyvisual #tape,
#keyvisual #tape img {
	width: 100vw;
	height: 100vw;
	margin-left: -50vw;
	}

	#keyvisual #tape {
		bottom: -40vh;
		}

#index {
	padding-left: 0;
	border: none;
	}

#index ol {
	font-size: 1.3rem;
	}

#index li {
	flex-wrap: wrap;
	column-gap: 8px;
	}

#index li::before {
	margin-left: 2rem;
	}

#index li::after {
	content: "";
	display: block;
	width: 100%;
	order: 3;
	}

#index li label {
	width: 1.5rem;
	font-size: 1.6rem;
	}

#index li em {
	flex-grow: 1;
	}

#index li i {
	padding-left: 12px;
	font-size: 1rem;
	}

.links .x, .links .youtube, .links .twitch {
	width: 48px;
	height: 48px;
	}

#dj .content {
	flex-direction: column;
	}

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

#special-thanks ul {
	display: block;
	margin-left: 1rem;
	padding-bottom: 3rem;
	overflow: hidden;
	}

#special-thanks li {
	float: left;
	min-width: 50%;
	}

#special-thanks li a {
	padding: 16px 0;
	}

#player {
	width: auto;
	margin: 0 -8px;
	left: auto;
	}

#download {
	font-size: .9rem;
	}

#download .agreement {
	flex-direction: column;
	gap: 1rem;
	}

#download .button {
	width: 100%;
	padding: 0;
	}

footer {
	border: none;
	}

footer div.container {
	flex-direction: column;
	}

footer a.lab {
	margin-bottom: 16px;
	height: 32px;
	text-align: center;
	}

}