@charset "utf-8";


@media screen and (min-width: 768px) {
	#message { position: relative; margin: -15vw auto 20px auto; width: 980px; background: rgba(255,255,255,0.9); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-sizing: border-box; }
	#message p { padding: 15px; font-size: 1.6rem; line-height: 2.0; text-align: left; }
	
	#message02 { position: relative; margin: 0 auto 20px auto; width: 980px; background: rgba(255,255,255,0.9); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-sizing: border-box; }
	#message02 h3 { padding-top: 15px; text-align: center; }
	#message02 p { padding: 0 15px 15px 15px; font-size: 1.6rem; line-height: 2.0; text-align: left; }
}
@media screen and (max-width: 767px) {
	#message { position: relative;  margin: -15vw  3.3333333vw 20px 3.3333333vw; background: rgba(255,255,255,0.85); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-sizing: border-box; }
	#message p { padding: 15px; font-size: 1.4rem; line-height: 1.6; text-align: left; }
	#message02 { position: relative;  margin: 0 3.3333333vw 20px 3.3333333vw; background: rgba(255,255,255,0.85); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-sizing: border-box; }
	#message02 h3 { padding-top: 15px; text-align: center; }
	#message02 p { padding: 0 15px 15px 15px; font-size: 1.4rem; line-height: 1.6; text-align: left; }
}



/* トップページ
---------------------------------------------------*/
@media screen and (min-width: 768px) {

	.pageIndex .contentsInner {margin-top: -17.5vw;}
	.pageIndex .boxWrap.half { margin: 0; padding: 0; width: 470px!important; }
	.pageIndex .boxWrap.half .boxInner { margin-top: -45px; padding: 0 15px 15px 15px; } /* タイトル画像が一行 */
	
	.btnVol01  { margin-top: -48px!important; } /* アンケートなし*/
	/*.btnVol01  { margin: -63px 0 5px 0; }  /*アンケートあり*/
	.btnVol02 { margin-top: 15px; }
	.btnEnq { margin-top: 14px; }
	.pageIndex img { width: 100%; }
	.modePC { margin: 0 auto; width: 980px; }
	
	.modePC .boxWrap.odd { float: left; margin-top: 15px; width: 470px; }
	.modePC .even { float: right; width: 470px; }

	.modePC .btnWeekly { position: relative; }
    .modePC .btnNewVol { position: relative; margin-bottom: 5px; }
    .modePC .btnBeginner { position: relative; } /* 新弾あり */
	/*.modePC .btnBeginner { position: relative; margin-top: -15px; } /* 新弾なし */
	.modePC .btnLine { position: relative;  margin: 15px 0 10px; }  /* 新弾あり */
    /* .modePC .btnLine { position: relative;  margin-top: 15px; } /*新弾なし */
	.modePC .btnEvent { margin: 4px 0 5px; }
	.modePC .btnGoods { margin-bottom: 5px; }
	.modePC .btnShop { margin-bottom: 30px;  }

	.modePC .howto .image { margin: -70px 0 10px; }
	.modePC .howto .text { margin-bottom: 10px; }

	.pageIndex .newsList { margin-bottom: 24px; }
	/*.pageIndex .newsList li { float: none; width: 100%; margin: 18px 0 0 0; padding: 18px 0 0 0; border-top: 1px solid #c5c5c5; border-bottom: none; } 5つの時まで*/
	.pageIndex .newsList li { float: none; width: 100%; margin: 16px 0 0 0; padding: 16px 0 0 0; border-top: 1px solid #c5c5c5; border-bottom: none; }
	.pageIndex .newsList li.hide { display: none; }
	.pageIndex .newsList .detail.table { width: 440px; }
	.pageIndex .newsList .detail.table .image { display: table-cell; padding-right: 10px; width: 190px!important; vertical-align: top; text-align: left; box-sizing: border-box; }
	.pageIndex .newsList .detail.table .image img { width: 100%; }
	.pageIndex .newsList .detail.table .text  { display: table-cell; width: 230px; vertical-align: top; text-align: left; }

	.boxWrap.adjust { margin-top: 40px; }
    .boxWrap.close { margin-top: 0px; }
	/*.boxWrap.ranking { margin: 40px auto 60px auto; } ランキングが上*/
	/*.boxWrap.ranking { margin: 50px auto 60px auto; } ランキングが下 */
    .boxWrap.ranking { margin: 50px auto 20px auto; } /* サイトCLOSE */
	.boxWrap.adjust .boxInner { padding: 0 40px 20px 40px!important; }
	
	.movieList { }
	.movieList li { margin-bottom: 40px; text-align: center; width: 450px; }
	.movieList li.last { margin-bottom: 0; }
	.movieList li.odd { float: left; }
	.movieList li.even { float: right; }
	.movieList .youtube { margin-bottom: 10px; position: relative; padding-top: 56.25%; height: 0; overflow: hidden; border: 4px solid #c5c5c5; box-sizing: border-box; }
	.movieList .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	/*.movieList .new { display: inline-block; padding: 0 0 0 60px; background: url(../images/common/icon_new.png) 0 0  no-repeat; background-size: 60px 60px; }*/
	.btnMovie { margin: 0 auto; width: 426px; }
}
@media screen and (max-width: 767px) {
	/*.pageIndex .contentsInner { margin-top: -14vw;}*/
	.pageIndex .contentsInner { margin-top: -16vw;} /* 第4弾 */
	.banner { margin: 0 3.3333333vw; }
	
	.btnNews { margin-top: 15px!important; }
	.btnVol01 { margin-top: -50px; padding-bottom: 15px;  } /* アンケートあり */
	.btnVol02 { margin-bottom: 15px;  padding-bottom: 15px; border-bottom: 1px solid #c5c5c5; }
	/*.btnVol      { margin-top: -65px; padding-bottom: 15px; border-bottom: 1px solid #c5c5c5; } /* アンケートなし */
	.btnEnq      { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #c5c5c5; }
	.btnWeekly   { margin-bottom: 3px; }
	.btnBeginner { margin-bottom: 15px; }
	.btnLine     { margin-bottom: 3px; }
	.btnEvent    { margin-bottom: 15px; }
	.btnShop     { margin-bottom: 3px; }
	.btnGoods    { margin-bottom: 15px; }
	.movieList { margin-bottom: 15px; }
	.newsList .hide { display: none; }

}



/* ランキング
---------------------------------------------------*/
@media screen and (min-width: 768px) {
	.boxWrap.ranking { position: relative; }
	.boxWrap.ranking .update { position: absolute;  top: 16px; right: 30px; color: #ffff; font-weight: bold; }
	.rankingList { }
	.rankingList li { margin-bottom: 30px; text-align: center; width: 440px; }
	.rankingList li { width: 440px; }
	.rankingList li.daily { float: left; margin: 0; text-align: center; }
	.rankingList li.vol   { float: right; margin:0; }
	.rankingList li table { margin: -5px 0 10px;  width: 100%; }
	.rankingList li table tr { border-bottom: 1px solid #c5c5c5; }
	.rankingList li th { padding-bottom: 8px; }
	.rankingList li td { padding-bottom: 8px; }
	.rankingList li th.rank { padding-top: 20px; width: 55px; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 2px #000000; }
	.rankingList li th.no01 { background: url(../ranking/images/no01.png) center center no-repeat; background-size: 55px 40px; }
	.rankingList li th.no02 { background: url(../ranking/images/no02.png) center center no-repeat; background-size: 55px 40px; }
	.rankingList li th.no03 { background: url(../ranking/images/no03.png) center center no-repeat; background-size: 55px 40px; }
	.rankingList li td.name { padding-left: 15px; text-align: left; font-weight: bold; }
	.rankingList li td.point { text-align: right; color: #d30000; font-weight: bold;  }
	.boxWrap.ranking .boxInner { margin-top: -50px; padding-right: 30px; padding-left: 30px; }
	.boxWrap.ranking .more { text-align: right!important; }
	.boxWrap.ranking .mente { margin-bottom: 20px; text-align: center!important; font-weight: bold!important; font-size: 1.8rem!important; color: #d30000; }
	.boxWrap.ranking .linkRanking { padding-top: 25px; border-top: 1px solid #c5c5c5; text-align: center; }
	
	.rankingList li.vol .comingsoon {  padding: 10px 0 0 0; margin: 0; background: rgba(255,255,255,0.6); padding: 20px; text-align: left; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
	.rankingList li.vol .comingsoon p.first { margin-bottom: 20px }
}
@media screen and (max-width: 767px) {
	.boxWrap.ranking .update { margin: -18vw 0 10px; text-align: center; font-size: 3.2vw; color: #fff; font-weight: bold; }
	.rankingList {  }
	.rankingList li.daily { margin: 0 0 25px 0; text-align: center; }
	.rankingList li.vol   { margin: 20px 0 0; }
	.rankingList li table { margin: -5px 0 10px;  width: 100%; }
	.rankingList li table tr { border-bottom: 1px solid #c5c5c5; }
	.rankingList li th { padding-bottom: 8px; }
	.rankingList li td { padding-bottom: 8px; }
	.rankingList li th.rank { padding-top: 20px; width: 10vw; text-align: center; font-size: 3.2vw; font-weight: bold;color: #fff; font-weight: bold; text-shadow: 1px 1px 2px #000000; }
	.rankingList li th.no01 { background: url(../ranking/images/no01.png) center center no-repeat; background-size: 10vw 7.333333vw; }
	.rankingList li th.no02 { background: url(../ranking/images/no02.png) center center no-repeat; background-size: 10vw 7.333333vw; }
	.rankingList li th.no03 { background: url(../ranking/images/no03.png) center center no-repeat; background-size: 10vw 7.333333vw; }
	.rankingList li td.name { padding-left: 15px; text-align: left; font-size: 3.73333333vw;font-weight: bold; }
	.rankingList li td.point { text-align: right; font-size: 3.73333333vw; color: #d30000; font-weight: bold; }
	.boxWrap.ranking .boxInner { margin-top: -50px; }
	.boxWrap.ranking .more { text-align: right; }
	
	.boxWrap.ranking .mente { margin-bottom: 20px; font-weight: bold!important; font-size: 4vw!important; color: #d30000; }
	.boxWrap.ranking .linkRanking { padding-top: 20px; border-top: 1px solid #c5c5c5; text-align: left; }

	.rankingList li.vol .comingsoon {  padding: 10px 0 0 0; margin: 0; background: rgba(255,255,255,0.6); padding: 20px; text-align: left; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
	.rankingList li.vol .comingsoon p.first { margin-bottom: 20px }
}


@media screen and (min-width: 768px) {
	#bg { position: fixed; right: 0; bottom: 0; z-index: 9999; width: auto; min-width: 100%; height: auto; min-height: 100%; background: #000; opacity: 0.8; }
	#first { position: fixed; top: 30%; left: 50%; z-index: 9999; width: 650px;  margin: -250px 0 0 -325px; text-align: center; box-sizing: border-box; }
	#first a  { display: block; position: absolute; top: -20px; right: 10px; width: 35px; height: 35px; background: url(../card/images/btn_close.png) no-repeat; background-size: 35px 35px; z-index: 1000000; cursor: pointer; text-indent: -9999px; }
	.modalIndex { width: 600px; height: 750px; padding: 0 15px 15px 15px; overflow: scroll; }
	.modalIndex img { width: 100%; }

	#modal .modalInner { overflow: scroll; padding: 0 15px 15px 15px; width: 630px; height: 765px; box-sizing: border-box; }
}

@media screen and (max-width: 767px) {
	#bg { position: fixed; right: 0; bottom: 0; z-index: 9999; width: auto; min-width: 100%; height: auto; min-height: 100%; background: #000; opacity: 0.8; }
	#first { position: fixed; top: 0; left: 0; margin: 5% 0 5% 2.5%; z-index: 9999; width: 88%; text-align: center; box-sizing: border-box; }
	#first a { display: block; position: absolute; top: -4vw; right: -6vw; width: 8vw; height: 8vw; background: url(../card/images/btn_close.png) no-repeat; background-size: 8vw 8vw; z-index: 2; cursor: pointer; text-indent: -9999px; }
	.modalIndex { overflow: scroll; padding: 0 15px 15px 15px; width: 92vw; height: 110vw; box-sizing: border-box; }

	#modal .modalInner { overflow: scroll; padding: 0 15px 15px 15px; width: 92vw; height: 110vw; box-sizing: border-box; }
}


@media screen and (min-width: 768px) {
	.btnClose { margin: 0 auto 30px auto; width: 600px; height: auto; text-align: center; }
	.closeMsg {  }
    .closeMsg  .date { padding: 10px 0; border-top: 1px solid #003fbc; border-bottom: 1px solid #003fbc; text-align: center; color: #003fbc; }
    .closeMsg p { margin-bottom: 20px; }
    .closeMsg p:last-child { margin-bottom: 0; }
}

@media screen and (max-width: 767px) {
	.btnClose { margin: 0 10px 20px 10px; text-align: center; }
	.closeMsg {  }
    .closeMsg  .date { padding: 10px 0; border-top: 1px solid #003fbc; border-bottom: 1px solid #003fbc; text-align: center; color: #003fbc; }
    .closeMsg p { margin-bottom: 20px; }
    .closeMsg p:last-child { margin-bottom: 0; }
}