/* ============================
	top css
============================ */

/* top-main
=============================================== */

#top-main-area { width:980px; margin:10px auto 20px auto; }
#top-main { position:relative; width:100%; height:0; padding-top:56.1224489795918%; /* fonr animation */ opacity:0; animation: top-main-fade 1s forwards; }
#top-main > span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/top/header.jpg) center center no-repeat; background-size:cover; text-indent:-9999px; }



#top-oa {margin:10px auto;padding:10px;background:#FFFFFF;border-radius:15px; line-height:2.0em; }
#top-oa h2 {margin:5px auto;  padding:.5em; background:#030303; color:#fff; font-size:1.5em;line-height: 1.4;}
#top-oa p{padding:18px;font-size:120%;line-height:2.0em; }

.game-title span {width:850px;height:50px;margin:0px;display:block;text-indent: -9999px;}
@keyframes top-main-fade {
  0% { opacity:0; transform:scale(0.98); }
  50% { transform:scale(1.01); }
  100% { opacity:1;  transform:scale(1.0); }
}

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {
.game-title span{width:100%; height:0; padding:5.8823529% 0 0;display:block;background-size: contain;position:relative;text-indent:-9999px;margin-bottom:5px;}
#top-main-area { width:auto; margin:0 auto 4.0vw auto; }

}


/* top-notice
=============================================== */

.top-notice { margin-bottom:20px; padding:20px; border-radius:20px; background-color:#fff; color:#333; font-size:160%; line-height:140%; box-shadow:0px 0px 40px rgba(0,0,0,0.2) inset; font-weight:700; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

.top-notice { margin-bottom:10px; padding:10px; border-radius:10px; font-size:120%; }

}


/* top-yt
=============================================== */

#top-yt-list { margin:20px 0px; padding:0 50px; /* for space */ font-size:0; }
.top-yt-list-item { display:inline-block; width:278px; margin:0 7px; vertical-align:middle; /* for space */ font-size:1rem; }
.top-yt-list-item .tmb { position:relative; width:100%; height:0; margin-bottom:5px; padding-top:56.25%; background-color:rgba(0,0,0,0.2); }
.top-yt-list-item .tmb a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { .top-yt-list-item .tmb a:hover { opacity:0.5; } }
.top-yt-list-item .tmb a span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
.top-yt-list-item .cap { line-height:140%; color:#fff; }

#top-yt-list .slick-arrow { position:absolute; top:0; width:50px; height:100%; background-position:center center; background-repeat:no-repeat; background-size:50% auto; text-indent:-9999px; /* reset */ background-color:transparent; border:none; cursor:pointer; outline:none; padding:0; appearance:none; text-indent: -9999px; }
#top-yt-list .slick-prev { left:-50px; z-index:12; background-image:url(../img/top/ar_l_w.png); }
#top-yt-list .slick-next { right:-50px; z-index:13; background-image:url(../img/top/ar_r_w.png); }
#top-yt-list .slick-arrow:hover { background-color:rgba(255,255,255,0.2); }

#top-yt-pl { margin-bottom:20px; padding:20px 10px 10px 10px; border:#F8CB02 2px solid; border-radius:20px; text-align:center; }
#top-yt-pl-ttl { margin-bottom:20px; font-size:180%; color:#F8CB02; }
#top-yt-pl-btn { width:100%; /* for space */ font-size:0; }
#top-yt-pl-btn li { display:inline-block; margin:0 1% 10px 1%; width:23%; vertical-align:middle; /* for space */ font-size:1rem; }
#top-yt-pl-btn li a { display:inline-block; position:relative; width:100%; padding:1.0em 0; border-radius:2.2em; line-height:130%; font-weight:bold; color:#fff; text-decoration:none; background:#c71322; transition: opacity 0.2s ease-out; }
#top-yt-pl-btn li a::before { display:inline-block; position:absolute; top:1.95em; left:2.2em; margin-right:0.7em; content:"笆ｶ��"; font-size:50%; }
#top-yt-pl-btn li a:hover { opacity:0.5; }

.top-img span {width:800px;height:174px;margin:0px auto;display:block;text-indent: -9999px;  }
/* ---- Media Queries ---- */

@media all and (max-width: 767px) {
.top-img span{width:100%; height:0; padding:21.75% 0 0;display:block;background-size: contain;position:relative;text-indent:-9999px;margin-bottom:5px;}



#top-yt-list { margin:0 -3% 20px -3%; padding:0 8.0vw; /* for space */ font-size:0; }
.top-yt-list-item { width:30vw; margin:0 1vw; }
.top-yt-list-item .cap { font-size:90%; }

#top-yt-list .slick-arrow { width:8.0vw; }
#top-yt-list .slick-prev { left:-8.0vw; }
#top-yt-list .slick-next { right:-8.0vw; }

#top-yt-pl-ttl { font-size:160%; }
#top-yt-pl-btn li { display:inline-block; margin:0 1% 10px 1%; width:48%; vertical-align:middle; /* for space */ font-size:1rem; }


}


/* top-2col
=============================================== */

#top-2col:after {content:"";clear:both;display:block;}
#top-twitter { width:980px; margin-top:10px;}

#top-banner { width:450px; float:right; padding-top:92px; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#top-twitter { width:auto; float:none; }

#top-banner { width:auto; float:none; padding-top:0; }

}


/* top-2col2
=============================================== */

#top-2col2:after {content:"";clear:both;display:block;}


/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#top-medal { width:auto; float:none; }

#medal_rank { font-size:90%; }
#medal_rank th, #medal_rank td { padding:0.6em 0.6em; }

#medal-top-btn-more { font-size:100%; }

}

/* top-info2
-------------------------------- */

#top-info2 { width:485px; float:right; margin-bottom:0; }
#top-info2 .info-box { margin-bottom:0; }
#top-info2 .info-ttl { padding:10px; border-radius:15px 15px 0 0; font-size:120%; }
#top-info2 #info-box .box-body { padding:15px; background-color:#fff; border-radius:0 0 15px 15px; }
#top-info2 .info-txt { font-size:90%; }
#top-info2 .info-pic { width:80%!important; margin:0 10% 20px 10%; }
#top-info2 #info-top-btn-more { font-size:100%; }

#main .box-body{margin-bottom:18px;}
/* ---- Media Queries ---- */ 

@media all and (max-width: 767px) {

#top-info2 { width:auto; float:none; }

}




#top-midokoro {margin:0px auto;padding:0px 10px;background:#FFFFFF;border-radius:0 0 15px 15px; }
#top-midokoro p {padding:5px 18px;	line-height: 1.8;}
#top-midokoro h2 {font-size:200%;font-weight:bold;color:#030246;text-align:center; padding:10px;}
#top-midokoro h3 {font-size:130%;font-weight:bold;background:#030246;padding:10px;color:#FFFFFF;}
#top-midokoro .big{padding:10px 0px;font-size:110%;color:#030246;line-height: 1.8;	}


@media all and (max-width: 767px) {
#top-midokoro h2{font-size:120%;font-weight:bold;color:#030246;text-align:center; }
}

/* bn-tw-campaign
-------------------------------- */

@media (hover: hover) { #bn-seriku2022 span a:hover { opacity:0.5; } }

.bn-title{color:#FFFFFF;text-align:center; font-size:200%;margin:5px 0px;font-weight:bold;}


@media all and (min-width: 768px) {
.imgCB span {width:980px;height:100px;margin:8px auto;display:block;text-indent: -9999px;  }
}

@media all and (max-width: 767px) {
.imgCB span{width:100%; height:0; padding-top:10.2040816326531%; display:block;background-size: contain;position:relative;text-indent:-9999px;margin:10px 0px;}
}