@charset "UTF-8";

html {
	margin: 0;
	padding: 0;
	font-family: 'BIZ UDPGothic', sans-serif;
	width: 100%;
	background-image: url('../img/bg.webp'); 
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: #000;
	color: #fff;
}

.clearfix:after {
	content: "";
	clear: both;
	display: block;
}

*, *:before, *:after {
	box-sizing: border-box;
}

.ce { text-align: center; }


h3 {
	font-size: 1.25em;
	margin: 20px 0 5px;
}
h4 {
	color: #fff;
	margin: 10px 0 20px;
}

body {
	width: 800px;
	margin: 0 auto;
}

#logo {
	width: 90%;
	margin: 10px auto;
}

#footer {
	background-color: rgba(0, 0, 0, 0.6);
	padding: 20px;
	margin: 20px auto;
	width: 100%;
}

.glass {
	background-image: url('../img/glass.jpg?3');
	background-size: 100% 100%;
	width: 700px;
	margin: 20px auto 0;
	color: #ffe7c8;
	font-weight: bold;
	font-size: 1.25em;
	line-height: 1.3em;
	padding: 60px 60px 80px;
}

#person {
	width: 800px;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 0;
}
#person #p_1, #person #p_2, #person #p_3, #person #p_4 {
	position: absolute;
	top: 15%;
	left: -30%;
	opacity: 0;
	width: 55%;
	z-index: 5;
}

#person #p_1 {
	animation: p_1 20s linear 0s infinite normal none running;
}
#person #p_2 {
	animation: p_2 20s linear 0s infinite normal none running;
}
#person #p_3 {
	animation: p_3 20s linear 0s infinite normal none running;
}
#person #p_4 {
	animation: p_4 20s linear 0s infinite normal none running;
}

@keyframes p_1 {
	0% {
		opacity: 0;
		top: 5%;
		left: -40%;
		width: 60%;
	}
	12% {
		opacity: 1;
		top: 0%;
		left: 25%;
		width: 70%;
	}
	24% {
		opacity: 0;
		top: 5%;
		left:100%;
		width: 60%;
	}
}
@keyframes p_2 {
	25% {
		opacity: 0;
		top: 5%;
		left: -40%;
		width: 60%;
	}
	37% {
		opacity: 1;
		top: 0%;
		left: 20%;
		width: 70%;
	}
	49% {
		opacity: 0;
		top: 5%;
		left:90%;
		width: 60%;
	}
}
@keyframes p_3 {
	50% {
		opacity: 0;
		top: 5%;
		left: -30%;
		width: 60%;
	}
	62% {
		opacity: 1;
		top: 0%;
		left: 20%;
		width: 70%;
	}
	74% {
		opacity: 0;
		top: 7%;
		left:90%;
		width: 60%;
	}
}
@keyframes p_4 {
	75% {
		opacity: 0;
		top: 5%;
		left: -30%;
		width: 50%;
		
	}
	87% {
		opacity: 1;
		top: 0%;
		left: 25%;
		width: 60%;
	}
	99% {
		opacity: 0;
		top: 5%;
		left:90%;
		width: 50%;
	}
}



.shine {
	z-index: 60;
	opacity: 0;
	position: absolute;
}
.shine img {
	width: 100%;
}
#shine1 {
	left: 20px;
	top: 20px;
	width: 20%;
	animation: shine 1s linear 0s infinite normal none running;
}
#shine1a {
	left: 260px;
	top: 140px;
	width: 15%;
	animation: shine 1.1s linear 0s infinite normal none running;
}
#shine2 {
	left: 405px;
	top: 13px;
	width: 20%;
	animation: shine 1.2s linear 0s infinite normal none running;
}
#shine3 {
	left: 590px;
	top: 40px;
	width: 30%;
	animation: shine 1.4s linear 0s infinite normal none running;
}
#shine4 {
	left: 530px;
	top: 265px;
	width: 20%;
	animation: shine 1.6s linear 0s infinite normal none running;
}
#shine5 {
	left: 790px;
	top: 140px;
	width: 20%;
	animation: shine 1.8s linear 0s infinite normal none running;
}

@keyframes shine {
	0% {
		opacity: 0;
		transform: rotate(0deg);
	}
	20% {
		opacity: 1;
		transform: rotate(20deg);
	}
	40% {
		opacity: 0;
		transform: rotate(40deg);
	}
}


#logoset {
	position: relative;
	z-index: 10;
	margin: 265px auto 450px;
	padding-bottom: 150px;
}

#dia {
	position: relative;
	width: 300px;
	height: 303px;
	margin: 50px auto 20px;
}
#dia img {
	width: 100%;
}
#dia #dia_bg1 img, #dia #dia_bg2 img {
	animation: dia2 2.5s linear 0s infinite normal none running;
}
#dia_bg2 {
	position: absolute;
	top: 129px;
	z-index: 10;
}
#dia_bg1 {
	position: relative;
	z-index: 5;
}
#dia_enter {
	position: absolute;
	top: -50px;
	z-index: 1;
}
#dia_bg2 {
	animation: dia 2.5s linear 0s infinite normal none running;
}

@keyframes dia {
  0% {
     opacity: 1;
  }
  50% {
     opacity: 0;
  }
  100% {
     opacity: 1;
  }
}
@keyframes dia2 {
  0% {
     filter: drop-shadow(0 0 30px #fff);
  }
  50% {
     filter: drop-shadow(0 0 3px #fff);
  }
  100% {
     filter: drop-shadow(0 0 30px #fff);
  }
}


#enter {
	position: absolute;
	top: 120%;
	z-index: 100;
	width: 50%;
	margin: 0 auto;
	animation: turn_v 5.75s linear 2.75s infinite normal none running;
	left: 25%;
}

@keyframes turn_v {
  0% {
     transform: rotateX(0deg);
  }
  45% {
     transform: rotateX(50deg);
  }
  55% {
     transform: rotateX(310deg);
  }
  100% {
     transform: rotateX(360deg);
  }
}


.imgBright3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.imgBright3:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: -160%;
  transform: skewX(-45deg) translateX(0);
}

.imgBright3:before {
  animation: bright 2s ease-in-out 0s infinite;
}

.imgBright4 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.imgBright4:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: -160%;
  transform: skewX(-45deg) translateX(0);
}

.imgBright4:before {
  animation: bright2 4s ease-in-out 0s infinite;
}

@keyframes bright {
  0% {
     transform: skewX(-45deg) translateX(0);
  }
  25% {
    transform: skewX(-45deg) translateX(320%);
  }
  100% {
    transform: skewX(-45deg) translateX(320%);
  }
}

@keyframes bright2 {
  0% {
     transform: skewX(-45deg) translateX(0);
  }
  8% {
    transform: skewX(-45deg) translateX(360%);
  }
  100% {
    transform: skewX(-45deg) translateX(360%);
  }
}


.shadow_y {
	-moz-box-shadow: 0px 0px 20px 5px rgba(255, 255, 0, 1);
	-webkit-box-shadow: 0px 0px 20px 5px rgba(255, 255, 0, 1);
	-ms-box-shadow: 0px 0px 20px 5px rgba(255, 255, 0, 1);
	box-shadow: 0px 0px 20px 5px rgba(255, 255, 0, 1);
}

#copy {
	margin-top: 20px;
	padding: 10px 0;
	text-align: center;
	color: #fff;
	background: linear-gradient(90deg, hsla(350, 73%, 44%, 1) 0%, hsla(274, 65%, 12%, 1) 100%);
	font-size: 12px;
	font-weight: bold;
	line-height: 1.5em;
}
#copy p {
	margin: 5px 0;
}
#copy p:last-child {
	margin: 5px 0 0;
}
#copy a:visited, #copy a:hover, #copy a:link, #copy a:active {
	color: #fff;
}

#videos {
	position: absolute;
	top: 0;
	line-height: 0;
	width: 800px;
	z-index: -10;
}
video {
	position: relative;
	min-width: 100%;
	width: 100%;
	height: auto;
}
#bg-video{
	position: relative;
}
#bg-video2{
	position: relative;
	transform: rotate(180deg);
}
#dia_video {
	width: 60%;
	margin: 0 auto;
}

.pcwrap {
	width: 800px;
	margin: 0 auto 5px;
}

#iphone_baloon {
	display: block;
	width: 75%;
	max-width: 600px;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	margin: 0 auto;
}

.pconly {
	display: block;
}
.sponly {
	display: none;
}

.under { font-size: 14px; }

.red { color: #d33; }
.bold { font-weight: bold; }

.container {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.mg10 { margin: 10px auto; }
.mg20 { margin: 20px auto; }
.mg30 { margin: 30px auto; }
.mg40 { margin: 40px auto; }
.mg50 { margin: 50px auto; }


@media screen and (max-width: 800px) {
	.pconly {
		display: none;
	}
	.sponly {
		display: block;
	}
	
	body {
		width: 100%;
	}
	

	.under { font-size: 11px; }
	
	.glass {
		width: 95%;
		height: auto;
		padding: 4% 3% 14%;
		font-size: 1em;
		line-height: 1.2em;
		position: relative;
	}

	#person {
		width: 100%;
		height: 70%;
		overflow: hidden;
		position: absolute;
	}
	#person #p_1, #person #p_2, #person #p_3, #person #p_4 {
		position: absolute;
		top: 15%;
		left: -30%;
		opacity: 0;
		width: 55%;
		z-index: 5;
	}
	
	#person #p_1 {
		animation: p_1 20s linear 0s infinite normal none running;
	}
	#person #p_2 {
		animation: p_2 20s linear 0s infinite normal none running;
	}
	#person #p_3 {
		animation: p_3 20s linear 0s infinite normal none running;
	}
	#person #p_4 {
		animation: p_4 20s linear 0s infinite normal none running;
	}
	
	@keyframes p_1 {
		0% {
			opacity: 0;
			top: 4%;
			left: -50%;
			width: 85%;
		}
		12% {
			opacity: 1;
			top: -1%;
			left: 20%;
			width: 95%;
		}
		24% {
			opacity: 0;
			top: 4%;
			left: 90%;
			width: 85%;
		}
	}
	@keyframes p_2 {
		25% {
			opacity: 0;
			top: 5%;
			left: -45%;
			width: 90%;
		}
		37% {
			opacity: 1;
			top: 0%;
			left: 25%;
			width: 100%;
		}
		49% {
			opacity: 0;
			top: 5%;
			left:100%;
			width: 90%;
		}
	}
	@keyframes p_3 {
		50% {
			opacity: 0;
			top: 5%;
			left: -50%;
			width: 85%;
		}
		62% {
			opacity: 1;
			top: 0%;
			left: 10%;
			width: 95%;
		}
		74% {
			opacity: 0;
			top: 5%;
			left:80%;
			width: 85%;
		}
	}
	@keyframes p_4 {
		75% {
			opacity: 0;
			top: 5%;
			left: -40%;
			width: 75%;
			
		}
		87% {
			opacity: 1;
			top: 0%;
			left: 20%;
			width: 85%;
		}
		99% {
			opacity: 0;
			top: 5%;
			left:90%;
			width: 75%;
		}
	}

	#logoset {
		margin: 50% auto;
	}
	
	
	#dia {
		width: 60%;
		height: auto;
	}
	#dia_bg2 {
		top: 42%;
	}
	#dia_enter {
		top: -28%;
	}
	
	
	#shine1 {
		left: 0%;
		top: 0%;
		width: 25%;
	}
	#shine1a {
		left: 23%;
		top: 29%;
		width: 20%;
	}
	#shine2 {
		left: 38%;
		top: -3%;
		width: 25%;
	}
	#shine3 {
		left: 56%;
		top: 4%;
		width: 35%;
	}
	#shine4 {
		left: 50%;
		top: 53%;
		width: 25%;
	}
	#shine5 {
		left: 77%;
		top: 24%;
		width: 25%;
	}
	
	
	.enter_other {
		float: left;
		width: 48%;
		margin: 0 1%;
	}
	
	.enter_other img {
		width: 100%;
	}

	#intro {
		width: 100%;
	}

	
	#bijokaku {
		top: 0%;
		width: 18%;
		margin: -14% 3%;
	}
	
	#videos {
		position: absolute;
		top: 0;
		right: 0;
		line-height: 0;
		width: 100%;
		z-index: -10;
	}
	#dia_video {
		width:100%;
	}
	video {
		position: relative;
		min-width: 100%;
		width: 100%;
		height: auto;
	}


	.pcwrap {
		width: 100%;
	}

	.sp80 { width: 80%; }
	.sp90 { width: 90%; }
	.sp95 { width: 95%; }
	
	.container {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	img.spfit {
		width: 100%;
	}
	
	.mg10 { margin: 5px auto; }
	.mg20 { margin: 10px auto; }
	.mg30 { margin: 15px auto; }
	.mg40 { margin: 20px auto; }
	.mg50 { margin: 25px auto; }
}