@charset "utf-8";

/*-------------------------------------------------------------------clearfix*/
/*---------------------------------------------------------------------------*/

.clearfix:after {
	content: " "; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/*---------------------------------------------------------------------ボタン*/
/*---------------------------------------------------------------------------*/

.btn a:hover{
	opacity: 0.8;
	animation: btn 0.5s;
	-webkit-animation: btn 0.5s;
	-moz-animation: btn 0.5s;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	.btn a:hover{
		opacity: 1;
		animation: none;
		-webkit-animation: none;
		-moz-animation: none;
	}
}

@keyframes btn {
	0% { 
		opacity: 1;
	}
	10% { 
		opacity: 0.4;
	}
	100% {
		opacity: 0.8;
	}
}

@-webkit-keyframes btn {
	0% { 
		opacity: 1;
	}
	10% { 
		opacity: 0.4;
	}
	100% {
		opacity: 0.8;
	}
}
@-moz-keyframes btn {
	0% { 
		opacity: 1;
	}
	10% { 
		opacity: 0.4;
	}
	100% {
		opacity: 0.8;
	}
}

/*------------------------------------------------------------------プレゼント*/
/*---------------------------------------------------------------------------*/

div#secret1{
	cursor: pointer;
	position: absolute;
	top: -5px;
	left: 0;
	width: 398px;
	height: 262px;
	background-image: url(../img/home/secret1.png);
}

div#secret1_on{
	display: none;
	position: absolute;
	top: -5px;
	left: 0;
	width: 398px;
	height: 262px;
	background-image: url(../img/home/secret1_on.png);
}

div#secret2{
	cursor: pointer;
	position: absolute;
    top: -200px;
    right: 0;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret.png);
}

div#secret2_on{
	display: none;
	position: absolute;
    top: -200px;
    right: 0;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret2_on.png);
}

div#secret3{
	cursor: pointer;
	position: absolute;
    top: 893px;
    left: -60px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret.png);
}

div#secret3_on{
	display: none;
	position: absolute;
    top: 893px;
    left: -60px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret3_on.png);
}

div#secret4{
	cursor: pointer;
	position: absolute;
	z-index: 10;
	top: 136px;
    right: -45px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret.png);
}

div#secret4_on{
	display: none;
	position: absolute;
	z-index: 10;
	top: 136px;
    right: -45px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret4_on.png);
}

div#secret5{
	cursor: pointer;
	position: absolute;
	z-index: 10;
    top: 255px;
    left: -164px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret.png);
}

div#secret5_on{
	display: none;
	position: absolute;
	z-index: 10;
    top: 255px;
    left: -164px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret5_on.png);
}

div#secret6{
	cursor: pointer;
	position: absolute;
	z-index: 10;
    top: 255px;
    left: 0;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret.png);
}

div#secret6_on{
	display: none;
	position: absolute;
	z-index: 10;
    top: 255px;
    left: 0;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret6_on.png);
}

div#secret7{
	cursor: pointer;
	position: absolute;
	z-index: 10;
    bottom: 80px;
    right: -121px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret.png);
}

div#secret7_on{
	display: none;
	position: absolute;
	z-index: 10;
    bottom: 80px;
    right: -121px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret7_on.png);
}

div#secret8{
	cursor: pointer;
	position: absolute;
	z-index: 1;
    top: 0;
    left: -150px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret.png);
}

div#secret8_on{
	display: none;
	position: absolute;
	z-index: 1;
    top: 0;
    left: -150px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret8_on.png);
}

div#secret9{
	cursor: pointer;
	position: absolute;
	z-index: 10;
    top: 40px;
    right: -80px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret.png);
}

div#secret9_on{
	display: none;
	position: absolute;
	z-index: 10;
    top: 40px;
    right: -80px;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret9_on.png);
}

div#secret10{
	position: relative;
	cursor: pointer;
	z-index: 10;
	width: 218px;
	height: 244px;
	margin: -30px 0 0 auto;
	background-image: url(../img/secret/secret.png);
}

div#secret10_on{
	position: relative;
	display: none;
	z-index: 10;
	width: 218px;
	height: 244px;
	margin: -30px 0 0 auto;
	background-image: url(../img/secret/secret10_on.png);
}

div#secret11{
	position: relative;
	cursor: pointer;
	z-index: 10;
	width: 218px;
	height: 244px;
	margin: -150px 0 0 auto;
	background-image: url(../img/secret/secret.png);
}

div#secret11_on{
	position: relative;
	display: none;
	z-index: 10;
	width: 218px;
	height: 244px;
	margin: -150px 0 0 auto;
	background-image: url(../img/secret/secret11_on.png);
}

div#secret12{
	position: relative;
	cursor: pointer;
	z-index: 10;
	width: 218px;
	height: 244px;
	margin: -244px 0 0;
	background-image: url(../img/secret/secret.png);
}

div#secret12_on{
	position: relative;
	display: none;
	z-index: 10;
	width: 218px;
	height: 244px;
	margin: -244px 0 0 0;
	background-image: url(../img/secret/secret12_on.png);
}

div#secret13{
	position: absolute;
	bottom: 0;
	right: 0;
	cursor: pointer;
	z-index: 10;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret.png);
}

div#secret13_on{
	position: absolute;
	bottom: 0;
	right: 0;
	display: none;
	z-index: 10;
	width: 218px;
	height: 244px;
	background-image: url(../img/secret/secret13_on.png);
}

/*-----------------------------------------------
 モーダルコンテンツ
-----------------------------------------------*/
/* メダル */

#medal,
#medal2,
#medal3,
#medal4,
#medal5,
#medal6,
#medal7,
#medal8,
#medal9,
#medal10,
#medal11,
#medal12,
#medal13{
	display: none;
	overflow-y: scroll;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.9);
}

#medal div.inner,
#medal2 div.inner,
#medal3 div.inner,
#medal4 div.inner,
#medal5 div.inner,
#medal6 div.inner,
#medal7 div.inner,
#medal8 div.inner,
#medal9 div.inner,
#medal10 div.inner,
#medal11 div.inner,
#medal12 div.inner,
#medal13 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 500px;
	margin-left: -250px;
	margin-top: -250px;
}

#medal div.inner p,
#medal2 div.inner p,
#medal3 div.inner p,
#medal4 div.inner p,
#medal5 div.inner p,
#medal6 div.inner p,
#medal7 div.inner p,
#medal8 div.inner p,
#medal9 div.inner p,
#medal10 div.inner p,
#medal11 div.inner p,
#medal12 div.inner p,
#medal13 div.inner p{
	opacity: 0;
	position: absolute;
	top: -80px;
	text-align: center;
	line-height: 0;
}

#medal div.inner div,
#medal2 div.inner div,
#medal3 div.inner div,
#medal4 div.inner div,
#medal5 div.inner div,
#medal6 div.inner div,
#medal7 div.inner div,
#medal8 div.inner div,
#medal9 div.inner div,
#medal10 div.inner div,
#medal11 div.inner div,
#medal12 div.inner div,
#medal13 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

/* メダル獲得状況 */

#medal-status{
	display: none;
	overflow-y: scroll;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	background-image: url(../img/btn-close.png);
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: right 20px top 20px;
}

#medal-status div.inner{
	position: absolute;
	z-index: 2;
	top: 30px;
	left: 50%;
	width: 1154px;
	height: 1070px;
	margin-left: -577px;
	background-image: url(../img/home/medal/bg.png);
}

#medal-status div.inner h1{
	text-align: center;
}

#medal-status div.inner div.text{
	margin: 0 60px 10px;
	padding: 20px;
	border-radius: 10px;
	background-color: #fff;
}

#medal-status div.inner div.text p{
	font-size: 16px;
	text-align: left;
}

#medal-status div.inner ul.medal-list{
	margin-bottom: 5px;
	text-align: center;
}

#medal-status div.inner ul.medal-list li{
	display: inline-block;
	width: 138px;
	height: 195px;
}

#medal-status div.inner ul.medal-list li a{
	display: block;
	width: 138px;
	height: 195px;
}

#medal-status div.inner ul.medal-list li.medal1{background-image: url(../img/home/medal/medal1.png);}
#medal-status div.inner ul.medal-list li.medal2{background-image: url(../img/home/medal/medal2.png);}
#medal-status div.inner ul.medal-list li.medal3{background-image: url(../img/home/medal/medal3.png);}
#medal-status div.inner ul.medal-list li.medal4{background-image: url(../img/home/medal/medal4.png);}
#medal-status div.inner ul.medal-list li.medal5{background-image: url(../img/home/medal/medal5.png);}
#medal-status div.inner ul.medal-list li.medal6{background-image: url(../img/home/medal/medal6.png);}
#medal-status div.inner ul.medal-list li.medal7{background-image: url(../img/home/medal/medal7.png);}
#medal-status div.inner ul.medal-list li.medal8{background-image: url(../img/home/medal/medal8.png);}
#medal-status div.inner ul.medal-list li.medal9{background-image: url(../img/home/medal/medal9.png);}
#medal-status div.inner ul.medal-list li.medal10{background-image: url(../img/home/medal/medal10.png);}
#medal-status div.inner ul.medal-list li.medal11{background-image: url(../img/home/medal/medal11.png);}
#medal-status div.inner ul.medal-list li.medal12{background-image: url(../img/home/medal/medal12.png);}
#medal-status div.inner ul.medal-list li.medal13{background-image: url(../img/home/medal/medal13.png);}

#medal-status div.inner ul.medal-list li.medal1_on{background-image: url(../img/home/medal/medal1_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal2_on{background-image: url(../img/home/medal/medal2_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal3_on{background-image: url(../img/home/medal/medal3_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal4_on{background-image: url(../img/home/medal/medal4_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal5_on{background-image: url(../img/home/medal/medal5_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal6_on{background-image: url(../img/home/medal/medal6_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal7_on{background-image: url(../img/home/medal/medal7_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal8_on{background-image: url(../img/home/medal/medal8_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal9_on{background-image: url(../img/home/medal/medal9_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal10_on{background-image: url(../img/home/medal/medal10_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal11_on{background-image: url(../img/home/medal/medal11_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal12_on{background-image: url(../img/home/medal/medal12_on.png) !important;}
#medal-status div.inner ul.medal-list li.medal13_on{background-image: url(../img/home/medal/medal13_on.png) !important;}

#medal-status div.inner div.complete{
	display: none;
	right: 20px;
	bottom: 60px;
	position: absolute;
	width: 241px;
	height: 242px;
}

#medal-status div.inner div.complete a{
	display: block;
	width: 241px;
	height: 242px;
}

#medal-status div.inner div.complete.complete_on{
	display: block;
}



#medal-status div.inner p.link{
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 18px;
}

#medal-status div.inner p.link a{
	color: #ff0000;
}

#medal-status div.inner p.notice{
	position: absolute;
	left: 70px;
	bottom: 20px;
	width: 820px;
	font-size: 12px;
}

#medal-status div.close{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}

/* リリース情報 */

div#release div.close{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}

div#release{
	overflow-y: scroll;
	display: none;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	background-image: url(../img/btn-close.png);
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: right 20px top 20px;
}

div#release div.inner{
	display: none;
	position: absolute;
	z-index: 2;
	top: 40px;
	left: 50%;
	margin-left: -580px;
	padding: 20px;
	background-color: #fff;
}

div#release div.inner h1{
	padding: 30px 0;
	text-align: center;
}

div#release div.inner ul.list{
	width: 1160px;
}

div#release div.inner ul.list > li{
	float: left;
	width: 580px;
	height: 258px;
	margin-bottom: 20px;
}

div#release div.inner ul.list li div.thumb{
	float: left;
	width: 158px;
	line-height: 0;
}

div#release div.inner ul.list li div.detail{
	float: right;
	width: 400px;
}

div#release div.inner ul.list li div.detail h3{
	margin-bottom: 20px;
}

div#release div.inner ul.list > li ul li{
	cursor: pointer;
	display: inline-block;
}

div#release div.inner ul.list > li ul li:hover{
	opacity: 0.8;
	animation: btn 0.5s;
	-webkit-animation: btn 0.5s;
	-moz-animation: btn 0.5s;
}

div#release div.inner ul.list > li ul li.close{
	cursor: auto;
}

div#release div.inner ul.list > li ul li.close:hover{
	opacity: 1;
	animation: none;
	-webkit-animation: none;
	-moz-animation: none;
}

/* 購入モーダル */

.modal-buy{
	display: none;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	background-image: url(../img/btn-close.png);
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: right 20px top 20px;
}

.modal-buy div.close{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.modal-buy div.inner{
	position: relative;
	z-index: 2;
	width: 530px;
	margin: 40px auto 0;
	padding: 10px;
	background-color: #fff;
}

.modal-buy div.inner h1{
	margin-bottom: 10px;
	padding: 5px 0;
	background-color: #000;
	line-height: 1;
	text-align: center;
	font-size: 24px;
	color: #fff;
}

.modal-buy div.inner h1 span{
	font-size: 18px;
}

.modal-buy div.inner p.text{
	margin-bottom: 10px;
	text-align: center;
}

.modal-buy div.inner ul.list li{
	margin-bottom: 10px;
	line-height: 0;
	text-align: center;
}