@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;
	}
}


/*-----------------------------------------------
 seacret
-----------------------------------------------*/

#secret1{
	position: absolute;
	z-index: 1;
	top: 10px;
	width: 30%;
}

#secret1 img{
	width: 100%;
}

#secret1_on{
	display: none;
	position: absolute;
	z-index: 1;
	top: 10px;
	width: 30%;
}

#secret1_on img{
	width: 100%;
}

#secret2{
	position: relative;
	z-index: 1;
	width: 120px;
	margin: 0 0 -40px auto;
}

#secret2 img{
	width: 100%;
}

#secret2_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 120px;
	margin: 0 0 -40px auto;
}

#secret2_on img{
	width: 100%;
}

#secret3{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -100px 0 0 auto;
}

#secret3 img{
	width: 100%;
}

#secret3_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -100px 0 0 auto;
}

#secret3_on img{
	width: 100%;
}

#secret4{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -100px 0 0 0;
}

#secret4 img{
	width: 100%;
}

#secret4_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -100px 0 0 0;
}

#secret4_on img{
	width: 100%;
}

#secret5{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -30px 0 -70px auto;
}

#secret5 img{
	width: 100%;
}

#secret5_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -30px 0 -70px auto;
}

#secret5_on img{
	width: 100%;
}

#secret6{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -30px 0 -10px auto ;
}

#secret6 img{
	width: 100%;
}

#secret6_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -30px 0 -10px auto ;
}

#secret6_on img{
	width: 100%;
}

#secret7{
	position: absolute;
	z-index: 1;
	width: 70px;
	bottom: 70px;
	right: 0;
}

#secret7 img{
	width: 100%;
}

#secret7_on{
	display: none;
	position: absolute;
	z-index: 1;
	width: 70px;
	bottom: 70px;
	right: 0;
}

#secret7_on img{
	width: 100%;
}

#secret8{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -30px 0 0 0 ;
}

#secret8 img{
	width: 100%;
}

#secret8_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
}

#secret8_on img{
	width: 100%;
}

#secret9{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -30px 0 -10px auto ;
}

#secret9 img{
	width: 100%;
}

#secret9_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -30px 0 -10px auto ;
}

#secret9_on img{
	width: 100%;
}


#secret10{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: 0 0 0 auto ;
}

#secret10 img{
	width: 100%;
}

#secret10_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
	margin: 0 0 0 auto ;
}

#secret10_on img{
	width: 100%;
}


#secret11{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: 0 0 0 auto ;
}

#secret11 img{
	width: 100%;
}

#secret11_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
	margin: 0 0 0 auto ;
}

#secret11_on img{
	width: 100%;
}

#secret12{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -60px 0 0 auto ;
}

#secret12 img{
	width: 100%;
}

#secret12_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
	margin: -60px 0 0 auto ;
}

#secret12_on img{
	width: 100%;
}

#secret13{
	position: relative;
	z-index: 1;
	width: 100px;
	margin: 0 0 0 auto ;
}

#secret13 img{
	width: 100%;
}

#secret13_on{
	display: none;
	position: relative;
	z-index: 1;
	width: 100px;
	margin: 0 0 0 auto ;
}

#secret13_on img{
	width: 100%;
}



/*-----------------------------------------------
 モーダル
-----------------------------------------------*/

/* navigation */

div#navigation{
	display: none;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.95);
}

div#navigation ul li.w100{
	width: 100%;
}

div#navigation ul li{
	float: left;
	width: 50%;
	line-height: 0;
}

div#navigation ul li img{
	width: 100%;
}

/* sns */

div#navigation div.btn img{
	width: 100%;
}

div#navigation div.close{
	position: absolute;
	top: 1%;
	right: 2%;
	width: 13.5%;
	line-height: 0;
}

div#navigation div.twitter{
	position: absolute;
	top: 1%;
	right: 50%;
	width: 13.5%;
	line-height: 0;
}

div#navigation div.facebook{
	position: absolute;
	top: 1%;
	right: 35%;
	width: 13.5%;
	line-height: 0;
}

div#navigation div.line{
	position: absolute;
	top: 1%;
	right: 20%;
	width: 13.5%;
	line-height: 0;
}

div#navigation div.btn-wrap{
	position: relative;
	padding: 10px;
}

div#navigation div.present{
	float: right;
	width: 17.5%;
	line-height: 0;
}


div#navigation div.buy{
	float: left;
	width: 19%;
	margin-left: 4%;
	line-height: 0;
}

div#navigation div.schedule{
	float: left;
	width: 57%;
	line-height: 0;
}

div#navigation div.btn-comic{
	margin: 0 10px;
	line-height: 0;

}

div#navigation div.btn-comic img{
	width: 100%;
}

/* medal-status */

div#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.95);
}

div#medal-status div.close{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 200%;
	background-image: url(../img/home/btn-close.png);
	background-repeat: no-repeat;
	background-position: right 10px top 10px;
	background-size: 23px;
}

div#medal-status div.inner{
	overflow: hidden;
	position: relative;
	z-index: 2;
	margin: 40px 10px 10px;
	border-radius: 10px;
	background-image: url(../img/home/medal/bg.jpg);
	background-size: cover;
	background-repeat: repeat-y;
}

div#medal-status div.inner ul.medal-list li{
	float: left;
	width: 25%;
	padding: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div#medal-status div.inner ul.medal-list li img{
	width: 100%;
}

div#medal-status div.inner h1 img{
	width: 100%;
}

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

div#medal-status div.inner p.link{
	font-size: 20px;
	text-align: center;
}

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

div#medal-status div.inner p.notice{
	padding: 10px;
}

div#medal-status p.close{
	padding: 20px 0 25px;
	color: #fff;
	text-align: center;
}

#medal-status div.complete{
	display: none;
	margin-bottom: 10px;
	line-height: 0;
}

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

#medal-status div.complete img{
	width: 160px;
}

/* medal */

#medal{
	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{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal div.inner img{
	width: 250px;
}

/* medal2 */

#medal2{
	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);
}

#medal2 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal2 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal2 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal2 div.inner img{
	width: 250px;
}

/* medal3 */

#medal3{
	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);
}

#medal3 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal3 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal3 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal3 div.inner img{
	width: 250px;
}

/* medal */

#medal4{
	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);
}

#medal4 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal4 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal4 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal4 div.inner img{
	width: 250px;
}

/* medal */

#medal5{
	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);
}

#medal5 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal5 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal5 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal5 div.inner img{
	width: 250px;
}

/* medal */

#medal6{
	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);
}

#medal6 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal6 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal6 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal6 div.inner img{
	width: 250px;
}

/* medal */

#medal7{
	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);
}

#medal7 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal7 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal7 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal7 div.inner img{
	width: 250px;
}

/* medal */

#medal8{
	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);
}

#medal8 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal8 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal8 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal8 div.inner img{
	width: 250px;
}

/* medal */

#medal9{
	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);
}

#medal9 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal9 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal9 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal9 div.inner img{
	width: 250px;
}

/* medal */

#medal10{
	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);
}

#medal10 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal10 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal10 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal10 div.inner img{
	width: 250px;
}

/* medal */

#medal11{
	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);
}

#medal11 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal11 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal11 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal11 div.inner img{
	width: 250px;
}

/* medal */

#medal12{
	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);
}

#medal12 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal12 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal12 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal12 div.inner img{
	width: 250px;
}

/* medal */

#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);
}

#medal13 div.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 285px;
	margin-left: -125px;
	margin-top: -142.5px;
}

#medal13 div.inner p{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	text-align: center;
	line-height: 0;
}

#medal13 div.inner div{
	opacity: 0;
	text-align: center;
	line-height: 0;
}

#medal13 div.inner img{
	width: 250px;
}

/* release */

#release{
	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);
}

#release div.close{
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-image: url(../img/home/btn-close.png);
	background-repeat: no-repeat;
	background-position: right 10px top 10px;
	background-size: 23px;
}

#release div.inner{
	opacity: 0;
	position: relative;
	z-index: 2;
	margin-right: 80px;
	padding: 10px;
	background-color: #fff;
}

#release div.inner h1 img{
	width: 100%;
}

#release div.inner div.thumb{
	float: left;
	width: 30%;
	line-height: 0;
}

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

#release div.inner div.thumb img{
	width: 100%;
}

#release div.inner div.detail{
	float: right;
	width: 65%;
	line-height: 0;
}

#release div.inner div.detail h3{
	margin-bottom: 10px;
	line-height: 0;
}

#release div.inner div.detail h3 img{
	width: 100%;
}

#release div.inner div.detail ul li{
	display: inline-block;
	line-height: 0;
}

#release div.inner div.detail ul li img{
	height: 29px;
}

/* 購入モーダル */

.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);
}

.modal-buy div.close{
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-image: url(../img/home/btn-close.png);
	background-repeat: no-repeat;
	background-position: right 10px top 10px;
	background-size: 23px;
}

.modal-buy div.inner{
	position: relative;
	z-index: 2;
	margin: 40px 10px 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: 16px;
	color: #fff;
}

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

.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;
}

.modal-buy div.inner ul.list li img{
	width: 240px;
}