@charset "UTF-8";

@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}

html {
	margin: 0;
	padding: 0;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}

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

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

.ce { text-align: center; }



body {
	background-color: rgba(250, 114, 255, 0.2);
	background-image: url('../img/bg.png');
	background-repeat: repeat-y;
	background-position: 50% 0;
}

#footer {
	font-size: 12px;
	margin: 20px 0 0 0;
	padding: 20px 10px;
	text-align: center;
	line-height: 1.5em;
	color: #555;
	background: rgba(255,255,255,0.5);
}
#copy {
	padding: 5px 0;
	text-align: center;
	color: #fff;
	background: #f770df;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.5em;
}

#enter {
	position: absolute;
	top: 920px;
	left: 470px;
	z-index: 10;
	width: 360px;
}
#enter img.enter_text {
	position: absolute;
	top: 64px;
	left: 0;
	z-index: 20;
	width: 100%;
	animation: enterheart 6s ease 0s infinite normal none running;
}

#intro {
	background-image: url('../img/pcintro.png?v=70');
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 85%;
	height: 1500px;
	margin: 0 auto;
	position: relative;
}
#logoset {
	position: absolute;
	top: 215px;
	left: 250px;
}
#logoset div {
	position: absolute;
}
#logoset #logo {
	z-index: 50;
	top: 110px;
	animation: katya 5s linear 0s infinite normal none running;
}
#logoset #emblem {
	z-index: 40;
	left: 460px;
}
#logoset #heart {
	z-index: 30;
	left: 50px;
	animation: heartbeat 5s linear 0s infinite normal none running;
}
#logoset .shine {
	z-index: 60;
	opacity: 0;
}
#logoset #shine1 {
	left: -60px;
	top: -20px;
	animation: light1 5s linear 0s infinite normal none running;
}
#logoset #shine2 {
	left: 200px;
	top: 90px;
	animation: light2 5s linear 0s infinite normal none running;
}
#logoset #shine2a {
	left: 200px;
	top: 0px;
	animation: light2 5s linear 0s infinite normal none running;
}
#logoset #shine3 {
	left: 450px;
	top: 170px;
	animation: light3 5s linear 0s infinite normal none running;
}
#logoset #shine3a {
	left: 450px;
	top: 50px;
	animation: light3 5s linear 0s infinite normal none running;
}

.shine_enter {
	z-index: 60;
	opacity: 0;
	position: absolute;
}
.shine_enter img {
	width: 100%;
}
#shine_enter1 {
	left: -110px;
	top: -40px;
	width: 80%;
	animation: shine_enter 1s linear 0s infinite normal none running;
}
#shine_enter2 {
	left: 70px;
	top: -15px;
	width: 50%;
	animation: shine_enter 1.2s linear 0s infinite normal none running;
}
#shine_enter3 {
	left: 20px;
	top: 30px;
	width: 60%;
	animation: shine_enter 1.4s linear 0s infinite normal none running;
}
#shine_enter4 {
	left: 200px;
	top: 20px;
	width: 70%;
	animation: shine_enter 1.6s linear 0s infinite normal none running;
}
#shine_enter5 {
	left: 180px;
	top: 10px;
	width: 40%;
	animation: shine_enter 1.8s linear 0s infinite normal none running;
}

@keyframes heartbeat {
	30% {
		transform: scale(1);
	}
	31% {
		transform: scale(1.2);
	}
	36% {
		transform: scale(1);
	}
	41% {
		transform: scale(1);
	}
	42% {
		transform: scale(1.2);
	}
	47% {
		transform: scale(1);
	}
}

@keyframes katya {
	6% {
		transform: rotate(0deg);
	}
	7% {
		transform: rotate(10deg);
	}
	8% {
		transform: rotate(0deg);
	}
 	9% {
		transform: rotate(-10deg);
	}
	10% {
		transform: rotate(0deg);
	}
}

@keyframes light1 {
	10% {
		opacity: 0;
	}
	11% {
		opacity: 1;
	}
	12% {
		opacity: 0;
	}
}

@keyframes light2 {
	12% {
		opacity: 0;
	}
	13% {
		opacity: 1;
	}
	14% {
		opacity: 0;
	}
}

@keyframes light3 {
	14% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	16% {
		opacity: 0;
	}
}

@keyframes enterheart {
	0% {
		transform: scale(1.25);
	}
 	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.25);
	}
}

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

.pcwrap {
	width: 800px;
	margin: 0 auto 5px;
}
.enter_other {
	float: left;
	width: 390px;
	margin: 0 5px;
}

.enter_other img {
	width: auto;
}

#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: 1300px;
	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;
	}


	.under { font-size: 11px; }
	
	body {
		background-color: rgba(250, 114, 255, 0.2);
		background-image: url('../img/bgsp.png');
		background-repeat: repeat-y;
		background-size :100% auto;
	}

	#enter {
		top: 75%;
		left: 33%;
		width: 33%;
	}
	#enter img.enter_text {
		top: 25%;
	}
	

	.pcwrap {
		width: 100%;
	}
	.enter_other {
		float: left;
		width: 48%;
		margin: 0 1%;
	}
	
	.enter_other img {
		width: 100%;
	}

	#intro {
		width: 100%;
	}

	#logoset {
		position: absolute;
		top: 17.5%;
		left: 23%;
		width: 55%;
	}
	#logoset div {
		position: absolute;
	}
	#logoset img {
		width: 100%;
	}
	#logoset #logo {
		z-index: 50;
		top: 28%;
		width: 100%;
	}
	#logoset #emblem {
		z-index: 40;
		left: 74%;
		width: 21%;
	}
	#logoset #heart {
		z-index: 30;
		left: 7%;
		width: 83%;
	}
	#logoset .shine {
		z-index: 60;
		width: 60%;
	}
	#logoset #shine1 {
		left: -20%;
		top: -23%;
	}
	#logoset #shine2 {
		left: 23%;
		top: 5%;
	}
	#logoset #shine2a {
		left: 23%;
		top: -20%;
	}
	#logoset #shine3 {
		left: 63%;
		top: 27%;
	}
	#logoset #shine3a {
		left: 63%;
		top: -5%;
	}
	
	#shine_enter1 {
		left: -35%;
		top: -10%;
	}
	#shine_enter2 {
		left: 50%;
		top: -1%;
	}
	#shine_enter3 {
		left: 10%;
		top: 3%;
	}
	#shine_enter4 {
		left: 60%;
		top: 2%;
	}
	#shine_enter5 {
		left: 30%;
		top: 1%;
	}

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