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

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

#top-main-area { width:980px; margin:20px auto 0 auto; }
#top-main { position:relative; width:100%; height:0; padding-top:calc(675% / 1200 * 100); /* for 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-image:url(../img/top/top_main.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; 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) {

#top-main-area { width:auto; margin:0 auto; }

}


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

#top-2col:after {content:"";clear:both;display:block;}
#top-twitter { width:470px; float:left; }

#top-banner { width:470px; float:right; padding-top:92px; text-align:center; }

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

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

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

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

}


/* 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%; }

}



/* bn-nationsleague
-------------------------------- */

#bn-nationsleague { margin-bottom:30px; }
#bn-nationsleague ul { /* for space */ font-size:0; }
#bn-nationsleague ul li { width:100%; display:inline-block; vertical-align:middle; /* for space */ font-size:1rem; }
#bn-nationsleague ul li p { position:relative; width:100%; height:0; padding-top:calc(300% / 1200 * 100); }
#bn-nationsleague ul li p a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/top/bn_nationsleague.jpg) center center no-repeat; background-size:cover; text-indent:-9999px; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { #bn-nationsleague ul li p a:hover { opacity:0.5; } }


/* top-bn-haishin
=============================================== */

#top-bn-haishin { margin:0 0 40px 0; padding-top:10px; text-align:center; }
#top-bn-haishin-list { /* for space */ font-size:0; }
#top-bn-haishin-list li { display:inline-block; width:49%; margin:0 2% 0 0; vertical-align:top; /* for space */ font-size:1rem; }
#top-bn-haishin-list li:last-child { margin:0; }

#top-bn-haishin-list .banner { position:relative; width:100%; height:0; padding-top:29.78%; }
#top-bn-haishin-list .banner a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; box-sizing:border-box; box-shadow:0px 2px 4px rgba(0,0,0,0.2); /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { #top-bn-haishin-list .banner a:hover { opacity:0.5; } }
#bn-unext .banner a { background-image:url(../img/top/bn_unext2.png); }

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

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

#top-bn-haishin { margin:0 2% 30px 2%; }

}


/* top-bn-supporter
=============================================== */

#top-bn-supporter { margin:0 0 40px 0; padding-top:10px; text-align:center; }
#top-bn-supporter-list { /* for space */ font-size:0; }
#top-bn-supporter-list li { display:inline-block; width:49%; margin:0 2% 0 0; vertical-align:top; /* for space */ font-size:1rem; }
#top-bn-supporter-list li:last-child { margin:0; }

#top-bn-supporter-list .banner { position:relative; width:100%; height:0; padding-top:29.78%; }
#top-bn-supporter-list .banner a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; box-sizing:border-box; box-shadow:0px 2px 4px rgba(0,0,0,0.2); /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { #top-bn-supporter-list .banner a:hover { opacity:0.5; } }
#bn-miyase .banner a { background-image:url(../img/top/bn_supporter_miyase.png); }
#bn-kimura .banner a { background-image:url(../img/top/bn_supporter_kimura.png); }

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

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

#top-bn-supporter { margin:0 2% 30px 2%; }

}


/* top-onair
=============================================== */

.top-onair { width:100%; text-align:center; display:flex; align-items: center; flex-direction:column; }
.top-onair-item { width:100%; padding:1.2em 0; border-bottom:#ddd 1px solid; display:flex; align-items: center; justify-content: center; }
.top-onair-item:first-child { padding-top:0;}
.top-onair .date { width:7.5em; font-size:140%; line-height:140%; font-weight:bold; color:#3953C9; }
.top-onair-final { width:14.6em; font-size:140%; line-height:140%; font-weight:bold; }

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

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

.top-onair-item { width:100%; justify-content:center; }
.top-onair .date { width:4.5em; font-size:110%; }
.top-onair .match-box { font-size:120%; }
.top-onair-final { width:13.8em; font-size:110%; }

}


/* #top-mov
=============================================== */

#top-mov-btn { width:17.0em; }


/* #top-tournament
=============================================== */

.st-dgm { position:relative; width:100%; height:0; margin-bottom:20px; border-radius:20px; padding-top:calc(1600% / 900 * 100); margin-bottom:0;background-color:#efefef; }
.st-dgm p { position:absolute; display:block; left:0; top:0; width:100%; height:100%; border-radius:20px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }