@charset "utf-8";



/* webfont
----------------------------- */
.hatsubaibi .days {
	font-family: 'Erica One', 'Meiryo', sans-serif;
}



body {
	background: url("../img/index/index-package-pc.jpg") center top no-repeat;
}
#wh_bg {	/* 背景画像隠し用白板 */
	background: rgba(255,255,255,0);
}
@media (max-width: 990px) {
	body {
		background: url("../img/index/index-package-pc.jpg") center top no-repeat fixed;
		background-size: cover;
	}
}

.box {
	margin: 1em 0;
	background: rgba(255,255,255,0.8);	/* indexのみ背景パッケ絵がそのままなので文字見やすいように白濃度アップ */
}


header {	/* 通常メニューのborderだけ表示されてるので削除 */
	border-bottom: 0 solid #fff;
	border-top: 0 solid #fff;
	box-shadow: none;
}

/* index用メインメニュー 横解像度990px以上のみ
----------------------------- */
.header_pc {
	background: -moz-linear-gradient(top, rgba(69,149,250,0.7), rgba(99,179,250,0.8));
	background: -webkit-linear-gradient(top, rgba(69,149,250,0.7), rgba(99,179,250,0.8));
	background: -ms-linear-gradient( top, rgba(69,149,250,0.7), rgba(99,179,250,0.8) 100% );
	background: linear-gradient(to bottom, rgba(69,149,250,0.7), rgba(99,179,250,0.9));

	border-radius: 3px;
	box-shadow: 0 0 15px #ccc;
	margin: 2em auto 3em;
	padding: 0 .5em;
	text-align: center;
	font-size: 1.8rem;
	border: 1px solid #fff;
	border-top: .5em solid #fff;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1) inset,
				0 0 25px rgba(50,50,50,0.3);
}
.header_pc .menu_ruby {
	font-size: 1rem;
	letter-spacing: .5em;
	line-height: 1.2;
	display: block;
	font-weight: bold;
}

.header_pc a {
	display: block;
	padding: 1em .5em;
	text-shadow: 3px 3px 2px rgba(50,50,50,0.2);

	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.header_pc a:link, .header_pc a:visited {
	color: #fff;
}
.header_pc a:hover {
	color: #555;
	text-decoration: none;
	text-shadow: none;
	
}

.header_pc li {
	display: inline-block;
	padding: 0;
	margin-bottom: .5em;
}
.header_pc li:hover {
	background: #fff;
	color: #555;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.header_pc li:before {	/* メインメニューの各ボタン横の縦点線 */
	content: "";
	display: block;
	width: 1px;
	height: 1.5em;
	margin-top: 1.5em;
	float: left;
	border-left: 1px solid rgba(255,255,255,0.5);
}
.header_pc li:first-child:before {
	border-left: 0px dashed #fff;
}
@media (max-width: 990px) {
	.header_pc li:before {
		border-left: 0px dashed #fff;
	}
}

/* トップイメージ
----------------------------- */
#topanime1 ,#topanime2, #topanime3 {
	opacity: 0;
}
@media (max-width: 990px) {
	#topanime3 {
		margin-bottom: 100px;
	}
}

.center_text img {
	margin: auto;
}
#topanime1 {	/* 最初のテキスト上マージン */
	margin-top: 300px;
}
@media (max-width: 990px) {
	#topanime1 {
		margin-top: 100px;
	}
}

.left_titlelogo {	/* タイトルロゴ */
	margin-top: -150px;
}
@media (max-width: 990px) {
	.left_titlelogo {
		margin-top: -130px;
		margin-bottom: 5em;
	}
}
.left_titlelogo img {
	margin: auto;
}

.right_logos {
	margin: -470px 0 0 0;	/* 発売日ありマージン位置 */
	margin: 0 0 0 0;	/* 発売日ありマージン位置 */
}

@media (max-width: 990px) {
	.left_titlelogo {
/*		margin-top: -660px;	*/
	}
	.right_logos {
		margin: 0px 0 0 0;
		text-aling: center;
	}
	.right_logos img {
		margin: auto;
	}
}


/* カウントダウンのとこ
----------------------------- */
.countdown {
	margin-top: -300px;
}
@media (max-width: 990px) {
	.countdown {
		margin-top: 0;
		margin-bottom: 1em;
	}
	.ih-item {
		margin: auto;
	}
}


/* 発売日のとこ
----------------------------- */
.kokuchi_circle {
	font-size: 2rem;
	text-align: center;
	font-weight: bold;
	color: #fff;
	border-radius: 50%;
	overflow: visible;
	width: 12em;
	height: 12em;
	margin: 0 auto 30px;
	padding: 2em 0 0;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.yoyaku {
	text-shadow: 1px 0 0 #6699FF,
				-1px 0 0 #6699FF,
				0 1px 0 #6699FF,
				0 -1px 0 #6699FF;
	background: #6699FF;
}
.hatsubaibi {
	text-shadow: 1px 0 0 #FF6699,
				-1px 0 0 #FF6699,
				0 1px 0 #FF6699,
				0 -1px 0 #FF6699;
	background: #FF6699;
}


.kokuchi_circle .days {
	font-size: 10rem;
	font-weight: normal;
	line-height: 1;
	position: relative;
	z-index: 5;
}
.kokuchi_circle .slash {
	font-size: 6rem;

}

.kokuchi_text {
	font-size: 4rem;
	letter-spacing: -.1em;
	line-height: 1;
}
.minitext {
	line-height: 1;
	letter-spacing: -.1em;
}


/* 初回特典用追加設定
----------------------------- */
.big_tokuten {
	font-size: 6rem;
	font-weight: bold;
	letter-spacing: -.1em;
	text-shadow: 1px 0 0 #fff,
				-1px 0 0 #fff,
				0 1px 0 #fff,
				0 -1px 0 #fff;
}
.yoyaku .mini_text {
	font-size: 1.5rem;
}





/* 中段告知ドデカバナー
----------------------------- */
.middle_banner {
	list-style: none;
	margin: 0;
	padding: 0;
}
.middle_banner img {
	margin: 0 auto 1em;
	border-radius: 15px;
	box-shadow: 0 0 15px rgba(0,0,0,0.5);

	-moz-transition: all .1s ease-out;
	-webkit-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	transition: all .1s ease-out;
}
.middle_banner img:hover {
	box-shadow: 0 0 20px rgba(0,0,0,0.3);

	-moz-transform: scale3d(1.01,1.01,1);
	-ms-transform: scale3d(1.01,1.01,1);
	-webkit-transform: scale3d(1.01,1.01,1);
	transform: scale3d(1.01,1.01,1);
}
.middle_banner img.noradius {	/* バナーの角を丸めない */
	border-radius: 0;
}



/* 通販ショップリストのとこ
----------------------------- */
.shoplist {
	text-align: center;
	padding: .5em 0;
}
.shoplist li {
	display: inline-block;
}



/* 更新履歴のとこ
----------------------------- */
#history {
	margin: 0 0 1.5em;
	text-align: center;
	height: 21.5em;
	overflow: auto;
}

#history dt {
	font-size: 1.5rem;
	font-weight: normal;
	clear: both;
}
#history dd {
	margin-bottom: 0.5em;
}
#history dd:after {
	content: " ";
	width: 80%;
	padding-bottom: 0.5em;
	margin: auto;
	display :block;
	border-bottom: 1px solid rgba(255,255,255,0.5);
}


#image_box {
	margin: 0 0 3em;
	box-shadow: 0 0 25px rgba(255,50,150,0.8);
}






/* プラチナめんどいCSS3キーフレームアニメーション
----------------------------- */
#topanime1 {	/* その学園は実は... */
	-moz-animation: anime1 20s ease-out 1;
	-webkit-animation: anime1 20s ease-out 1;
	-ms-animation: anime1 20s ease-out 1;
	animation: anime1 20s ease-out 1;
}
@-moz-keyframes anime1 {
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	35% { opacity: 1; }
	40% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes anime1 {
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	35% { opacity: 1; }
	40% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes anime1 {
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	35% { opacity: 1; }
	40% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes anime1 {
	0% { opacity: 0; }
	10% { opacity: 0; }
	15% { opacity: 1; }
	35% { opacity: 1; }
	40% { opacity: 0; }
	100% { opacity: 0; }
}


#topanime2 {	/* 男子校 */
	-moz-animation: anime2 20s ease-out 1;
	-webkit-animation: anime2 20s ease-out 1;
	-ms-animation: anime2 20s ease-out 1;
	animation: anime2 20s ease-out 1;
}
@-moz-keyframes anime2 {
	0% { opacity: 0; }
	20% { opacity: 0; -moz-transform: scale3d(2.2,2.1,1); }
	22% { opacity: 1; -moz-transform: scale3d(1.1,1.1,1); }
	35% { opacity: 1; -moz-transform: scale3d(1.1,1.1,1); }
	40% { opacity: 0; -moz-transform: scale3d(1.1,1.1,1); }
	100% { opacity: 0; }
}
@-webkit-keyframes anime2 {
	0% { opacity: 0; }
	20% { opacity: 0; -webkit-transform: scale3d(2.2,2.1,1); }
	22% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1); }
	35% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1); }
	40% { opacity: 0; -webkit-transform: scale3d(1.1,1.1,1); }
	100% { opacity: 0; }
}
@-ms-keyframes anime2 {
	0% { opacity: 0; }
	20% { opacity: 0; -ms-transform: scale3d(2.2,2.1,1); }
	22% { opacity: 1; -ms-transform: scale3d(1.1,1.1,1); }
	35% { opacity: 1; -ms-transform: scale3d(1.1,1.1,1); }
	40% { opacity: 0; -ms-transform: scale3d(1.1,1.1,1); }
	100% { opacity: 0; }
}
@keyframes anime2 {
	0% { opacity: 0; }
	20% { opacity: 0; transform: scale3d(2.2,2.1,1); }
	22% { opacity: 1; transform: scale3d(1.1,1.1,1); }
	35% { opacity: 1; transform: scale3d(1.1,1.1,1); }
	40% { opacity: 0; transform: scale3d(1.1,1.1,1); }
	100% { opacity: 0; }
}


#topanime3 {	/* だった */
	-moz-animation: anime3 20s ease-out 1;
	-webkit-animation: anime3 20s ease-out 1;
	-ms-animation: anime3 20s ease-out 1;
	animation: anime3 20s ease-out 1;
}
@-moz-keyframes anime3 {
	0% { opacity: 0; }
	27% { opacity: 0; }
	32% { opacity: 1; }
	35% { opacity: 1; }
	40% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes anime3 {
	0% { opacity: 0; }
	27% { opacity: 0; }
	32% { opacity: 1; }
	35% { opacity: 1; }
	40% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes anime3 {
	0% { opacity: 0; }
	27% { opacity: 0; }
	32% { opacity: 1; }
	35% { opacity: 1; }
	40% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes anime3 {
	0% { opacity: 0; }
	27% { opacity: 0; }
	32% { opacity: 1; }
	35% { opacity: 1; }
	40% { opacity: 0; }
	100% { opacity: 0; }
}





#topanime5 {	/* 右タイトルロゴ */
	-moz-animation: anime5 20s ease-out 1;
	-webkit-animation: anime5 20s ease-out 1;
	-ms-animation: anime5 20s ease-out 1;
	animation: anime5 20s ease-out 1;
}
@-moz-keyframes anime5 {
	0% { opacity: 0; }
	43% { opacity: 0; }
	48% { opacity: 1; }
	100% { opacity: 1; }
}
@-webkit-keyframes anime5 {
	0% { opacity: 0; }
	43% { opacity: 0; }
	48% { opacity: 1; }
	100% { opacity: 1; }
}
@-ms-keyframes anime5 {
	0% { opacity: 0; }
	43% { opacity: 0; }
	48% { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes anime5 {
	0% { opacity: 0; }
	43% { opacity: 0; }
	48% { opacity: 1; }
	100% { opacity: 1; }
}

#topanime51 {	/* 右予約日 */
	-moz-animation: anime51 20s ease-out 1;
	-webkit-animation: anime51 20s ease-out 1;
	-ms-animation: anime51 20s ease-out 1;
	animation: anime51 20s ease-out 1;
}
@-moz-keyframes anime51 {
	0% { opacity: 0; }
	43% { opacity: 0; -moz-transform: translate3d(0,-20px,0); }
	48% { opacity: 1; -moz-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@-webkit-keyframes anime51 {
	0% { opacity: 0; }
	43% { opacity: 0; -webkit-transform: translate3d(0,-20px,0); }
	48% { opacity: 1; -webkit-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@-ms-keyframes anime51 {
	0% { opacity: 0; }
	43% { opacity: 0; -ms-transform: translate3d(0,-20px,0); }
	48% { opacity: 1; -ms-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@keyframes anime51 {
	0% { opacity: 0; }
	43% { opacity: 0; transform: translate3d(0,-30px,0); }
	48% { opacity: 1; transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}

#topanime52 {	/* 右発売日 */
	-moz-animation: anime52 20s ease-out 1;
	-webkit-animation: anime52 20s ease-out 1;
	-ms-animation: anime52 20s ease-out 1;
	animation: anime52 20s ease-out 1;
}
@-moz-keyframes anime52 {
	0% { opacity: 0; }
	44% { opacity: 0; -moz-transform: translate3d(0,-20px,0); }
	49% { opacity: 1; -moz-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@-webkit-keyframes anime52 {
	0% { opacity: 0; }
	44% { opacity: 0; -webkit-transform: translate3d(0,-20px,0); }
	49% { opacity: 1; -webkit-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@-ms-keyframes anime52 {
	0% { opacity: 0; }
	44% { opacity: 0; -ms-transform: translate3d(0,-20px,0); }
	49% { opacity: 1; -ms-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@keyframes anime52 {
	0% { opacity: 0; }
	44% { opacity: 0; transform: translate3d(0,-30px,0); }
	49% { opacity: 1; transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}

#topanime53 {	/* 右発売日 */
	-moz-animation: anime53 20s ease-out 1;
	-webkit-animation: anime53 20s ease-out 1;
	-ms-animation: anime53 20s ease-out 1;
	animation: anime53 20s ease-out 1;
}
@-moz-keyframes anime53 {
	0% { opacity: 0; }
	45% { opacity: 0; -moz-transform: translate3d(0,-20px,0); }
	50% { opacity: 1; -moz-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@-webkit-keyframes anime53 {
	0% { opacity: 0; }
	45% { opacity: 0; -webkit-transform: translate3d(0,-20px,0); }
	50% { opacity: 1; -webkit-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@-ms-keyframes anime53 {
	0% { opacity: 0; }
	45% { opacity: 0; -ms-transform: translate3d(0,-20px,0); }
	50% { opacity: 1; -ms-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@keyframes anime53 {
	0% { opacity: 0; }
	45% { opacity: 0; transform: translate3d(0,-30px,0); }
	50% { opacity: 1; transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}


#topanime6 {	/* 右ロゴ下の至言 */
	-moz-animation: anime6 20s ease-out 1;
	-webkit-animation: anime6 20s ease-out 1;
	-ms-animation: anime6 20s ease-out 1;
	animation: anime6 20s ease-out 1;
}
@-moz-keyframes anime6 {
	0% { opacity: 0; }
	50% { opacity: 0; -moz-transform: translate3d(0,-20px,0);}
	60% { opacity: 1; -moz-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@-webkit-keyframes anime6 {
	0% { opacity: 0; }
	50% { opacity: 0; -webkit-transform: translate3d(0,-20px,0);}
	60% { opacity: 1; -webkit-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@-ms-keyframes anime6 {
	0% { opacity: 0; }
	50% { opacity: 0; -ms-transform: translate3d(0,-20px,0);}
	60% { opacity: 1; -ms-transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}
@keyframes anime6 {
	0% { opacity: 0; }
	50% { opacity: 0; transform: translate3d(0,-30px,0);}
	60% { opacity: 1; transform: translate3d(0,0,0); }
	100% { opacity: 1; }
}




body {	/* 背景パッケ絵スクロール */
	-moz-animation: bganime 20s ease-out 1;
	-webkit-animation: bganime 20s ease-out 1;
	-ms-animation: bganime 20s ease-out 1;
	animation: bganime 20s ease-out 1;
}
@-moz-keyframes bganime {
	0% { background-position: center -200px; }
	15% { background-position: center -200px; }
	50% { background-position: center top; }
	100% { background-position: center top; }
}
@-webkit-keyframes bganime {
	0% { background-position: center -200px; }
	15% { background-position: center -200px; }
	50% { background-position: center top; }
	100% { background-position: center top; }
}
@-ms-keyframes bganime {
	0% { background-position: center -200px; }
	15% { background-position: center -200px; }
	50% { background-position: center top; }
	100% { background-position: center top; }
}
@keyframes bganime {
	0% { background-position: center -200px; }
	15% { background-position: center -200px; }
	50% { background-position: center top; }
	100% { background-position: center top; }
}
#wh_bg {	/* 背景白マスク */
	-moz-animation: bgmaskanime 20s ease-out 1;
	-webkit-animation: bgmaskanime 20s ease-out 1;
	-ms-animation: bgmaskanime 20s ease-out 1;
	animation: bgmaskanime 20s ease-out 1;
}
@-moz-keyframes bgmaskanime {
	0% { background: rgba(255,255,255,1); }
	20% { background: rgba(255,255,255,1); }
	50% { background: rgba(255,255,255,0); }
	100% { background: rgba(255,255,255,0); }
}
@-webkit-keyframes bgmaskanime {
	0% { background: rgba(255,255,255,1); }
	20% { background: rgba(255,255,255,1); }
	50% { background: rgba(255,255,255,0); }
	100% { background: rgba(255,255,255,0); }
}
@-ms-keyframes bgmaskanime {
	0% { background: rgba(255,255,255,1); }
	20% { background: rgba(255,255,255,1); }
	50% { background: rgba(255,255,255,0); }
	100% { background: rgba(255,255,255,0); }
}
@keyframes bgmaskanime {
	0% { background: rgba(255,255,255,1); }
	20% { background: rgba(255,255,255,1); }
	50% { background: rgba(255,255,255,0); }
	100% { background: rgba(255,255,255,0); }
}