@charset "utf-8";



body {
  	margin: 0;
  	color: #dfdfdf;
 	text-shadow: -1px 0px 1px red, 0px 1px 2px green, 1px 0px 2px blue;
 	font-family: sans-serif;
}
p {
  	margin: 0;
}
a {
  	text-decoration: none;
  	color: #dfdfdf;
}
li {
  	list-style: none;
}
header {
	text-align: center;
	position: fixed;
	left: 50%;
	transform : translate(-50%);
	z-index: 97;
	width: 90%;
	padding-top: 1%;
}
header h1 {
  	font-size: 2.6rem;
  	font-weight: bold;
}
h1 {
  	margin: 0;
}
h2 {
  	font-size: 1.6rem;
}
h3 {
  	font-size: 1.2rem;
}

#daydream, #night, #dusk, #day {
  	background: linear-gradient(
  		0deg, #bab79d, #8ee0f9, #c7683a, #7b5b80, #01111e);
  	/* background: linear-gradient(
  		0deg, #c8ccc5, #58c5e6, #dd9736, #7f25c8, #001e36); */
}
#daydream {
  	background-size: 100% 1000%;
 	animation: daydream 240s ease infinite;
 	animation-delay: 4s;
}
@keyframes daydream {
 	0% { background-position: 50% 0% }
 	50% { background-position: 50% 100%} 
  	100% { background-position: 50% 0% }
}
#night {
  	background-size: 100% 400%;
  	background-position: top; 
}
#dusk {
  	background-size: 100% 700%;
  	background-position: center; 
}
#day {
  	background-size: 100% 400%;
  	background-position: bottom; 
}
#img {
  	background-image: url(img/20210723-DSCF2209.JPG);
  	background-repeat: no-repeat;
  	background-position: center;
  	background-size: cover;
}
#null {
  	background: #999;
}

#screen {
  	position: relative;
  	min-width: 100vw;
  	min-height: 100vh;
  	overflow: overlay;
  	animation: screen 1s infinite linear;
	background-image: linear-gradient(
		0deg, #fff0 25%, #00000020 25%, #00000020 50%, #fff0 50%, #fff0 75%,#00000020 75%, #00000020);
  	background-size: 4px 8px;
}
@keyframes screen {
	0% { background-position-y: 0; }
	100% { background-position-y: -20px; }
}

#scroll {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform : translate(-50%,-50%);
  	width: 80%;
  	height: 100%;
  	text-align: center;
}
#scroll img {
  	width: 90%;
  	padding: 15% 0% 0%;
}
#scroll h2, h3 {
	font-weight: bold;
  	background: rgba(0,0,0,0.2);
  	margin: 0% 5%;
  	padding: 3% 10% 0%;
}
#scroll p.description {
  	margin: 0% 5% 0%;
  	padding: 2% 10% 2%;
  	background: rgba(0,0,0,0.2);
  	font-size: 1.2rem;
}
#scroll p a {
	text-decoration: underline;
}
#scroll a:hover {
  	background-color: rgba(255,255,255,0.8);
	color: #666;
}

.videoFrame, .musicFrame {
  	position: relative;
  	width: 70%;
  	left: 50%;
  	transform: translateX(-50%);
  	margin: 14% 0% 2%;
}
.videoFrame {
    max-width: 1080px;
}
.musicFrame {
    max-width: 660px;
}
.videoFrame::before {
  	content: "";
  	display: block;
  	padding-top: 56.25%; /* 16:9 */
}
.musicFrame::before {
  	content: "";
  	display: block;
  	padding-top: 100%; /* 1:1 */
}
iframe {
  	position: absolute;
  	width: 100%;
  	height: 100%;
  	transform: translate(-50%,-100%);
}

footer {
  	width: 90%;
  	height: 5%;
  	left: 50%;
  	transform : translate(-50%);
  	z-index: 97;
  	position: relative;
  	margin-top: 10%;
}
footer ul {
  	display: flex;
  	margin: 0;
  	padding: 0;
  	border: solid 1px #dfdfdf;
  	font-size: 1.4rem;
  	font-weight: bold;
}
footer li {
  	width: 20%;
}
footer p {
  	padding-bottom: 2%; 
}



/* menu */

.menu {
  	height: 20px;
  	position: fixed;
  	left: 20px;
  	top: 20px;
  	width: 30px;
  	z-index: 99;
  	padding: 0;
}
.menu__line {
  	background: #dfdfdf;
  	display: block;
  	height: 2px;
  	position: absolute;
  	transition: transform .3s;
  	width: 100%;
}
.menu__line--center {
  	top: 9px;
}
.menu__line--bottom {
  	bottom: 0;
}
.menu__line--top.active {
  	top: 8px;
  	transform: rotate(45deg);
}
.menu__line--center.active {
  	transform: scaleX(0);
}
.menu__line--bottom.active {
  	bottom: 10px;
  	transform: rotate(135deg);
}



/* gnav */

.gnav {
  	background: rgba(0,0,0,0.6);
  	display: none;
  	height: 100%;
  	position: fixed;
  	width: 100%;
  	z-index: 98;
}
.gnav__wrap {
  	align-items: center;
  	display: flex;
  	height: 100%;
  	justify-content: center;
  	position: absolute;
  	width: 100%;
}
.gnav__menu {
  	padding-left: 0;
}
.gnav__menu__item {
    margin: 40px 0;
}
.gnav__menu__item a {
  	color: #fff;
  	font-size: 2rem;
  	font-weight: bold;
  	padding: 40px;
  	text-decoration: none;
  	transition: .5s;
  	text-align: center;
}
.gnav__menu__item a:hover {
  	color: #666;
}



/* player */

#jp_container_1 {
  	margin: 0;
  	padding: 0;
  	position: relative;
  	top: 20px;
  	color: #dfdfdf;
}
.jp-play {
  	position: absolute;
  	right: 20px;
  	background-color: rgba(0,0,0,0);
  	cursor: pointer;
}
.jp-pause {
  	position: absolute;
  	right: 20px;
  	background: rgba(0,0,0,0);
  	cursor: pointer;
}



/* marquee */

#u-rei, #bio {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform : translate(-50%,-50%);
}

#u-rei {
  	overflow: visible;
  	width: 40vw;
  	height: 60vh;
  	text-align: center;
}
#u-rei a {
  	font-size: 5rem;
  	font-weight: bold;
}
#u-rei a:hover {
  	animation: pulse 0.1s linear normal infinite;
}
@keyframes pulse {
  	100% { opacity: 0; }
}

#bio {
  	z-index: 97;
}
#bio a {
  	font-size: 1rem;
  	font-weight: bold;
  	animation: pulse 0.1s linear normal infinite;
}
#bio a:hover {
  	animation: pulse 1s linear normal infinite;
}

.u-rei_Y1 {
  	animation: u-rei_Y1 8s linear infinite alternate;
}
@keyframes u-rei_Y1 {
  	from { transform: translateY(0vh); }
  	to { transform: translateY(50vh); }
}
.u-rei_Y1:hover {
	  animation-play-state: paused;
  	cursor: default;
}
.u-rei_X1 {
  	left: -15vw;
  	position: absolute;
  	animation: u-rei_X1 6s linear infinite alternate;
}
@keyframes u-rei_X1 {
  	from { transform: translate(0vw); }
  	to { transform: translate(50vw); }
}
.u-rei_X1:hover {
  	animation-play-state: paused;
  	cursor: default;
}

.u-rei_Y2 {
  	animation: u-rei_Y2 8s linear infinite alternate;
}
@keyframes u-rei_Y2 {
  	from { transform: translateY(50vh); }
  	to { transform: translateY(0vh); }
}
.u-rei_Y2:hover {
  	animation-play-state: paused;
  	cursor: default;
}
.u-rei_X2 {
	  left: -20vw;
  	position: absolute;
  	animation: u-rei_X2 6s linear infinite alternate;
}
@keyframes u-rei_X2 {
  	from { transform: translate(50vw); }
  	to { transform: translate(0vw); }
}
.u-rei_X2:hover {
  	animation-play-state: paused;
  	cursor: default;
}

.u-rei_Y3 {
  	animation: u-rei_Y3 8s linear infinite;
}
@keyframes u-rei_Y3 {
  	0% { transform: translateY(25vh); }
  	25% { transform: translateY(50vh); }
  	75% { transform: translateY(0vh); }
  	100% { transform: translateY(25vh); }
}
.u-rei_Y3:hover {
  	animation-play-state: paused;
  	cursor: default;
}
.u-rei_X3 {
  	left: -25vw;
  	position: absolute;
  	animation: u-rei_X3 6s linear infinite alternate;
}
@keyframes u-rei_X3 {
  	from { transform: translate(50vw); }
  	to { transform: translate(0vw); }
}
.u-rei_X3:hover {
  	animation-play-state: paused;
  	cursor: default;
}