/* Top
=================================== */

/* Movie
=================================== */

.mov-sttl { position:relative; margin-bottom:10px; padding:0 0 15px 0; font-size:120%; line-height:140%; color:#835005; }
.mov-sttl::after { position: absolute; left: 0; content: ''; width: 100%; height: 6px; box-sizing: border-box; }
.mov-sttl::after { bottom: 0; border-top: 1px solid #835005; border-bottom: 2px solid #835005; }

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

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


}

/* Highlight
=================================== */

#hl-catch { font-size: 160%; line-height: 140%; margin-bottom:10px; color:#835005; font-weight:bold; text-align:center; }

.hl-img { margin:10px auto 15px; }
.hl-img span{ display:block; aspect-ratio:980 / 300; background:center center no-repeat; background-size:cover; }

.hl-tbl {padding:10px;}
.hl-tbl table td.out{background:#c8c8c8;}
.hl-tbl table td, .hl-tbl table th {font-size:90%; line-height:130%; padding:0.5em 0.2em; }
.hl-tbl table { width:100%; border-collapse:collapse; border-spacing:0; padding:0; }
.hl-tbl table td, .hl-tbl table th { border:1px #030303 solid;text-align:center; }
.hl-tbl table th { background:#d30707; color:#fff; }

.hl-tbl-row { display:flex; justify-content:center; margin-bottom:30px; }
.hl-tbl-row .hl-tbl { width:30%; }
.hl-tbl-ttl { font-size:110%; font-weight:bold; margin-bottom:10px; text-align:center; color:#835005; }
.hl-tbl-row .hl-tbl .shade { background:#ddd; }

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

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

#hl-catch { font-size:100%; line-height:140%; text-align:left; }

.hl-tbl-row { flex-direction:column; }
.hl-tbl-row .hl-tbl { width:auto; }

}


/* top-quiz
=============================================== */

#top-quiz { width:800px; margin:0 auto; padding:80px 20px 20px 20px; box-sizing:border-box; background-image:url(../img/top/top_quiz_ttl.png), url(../img/top/top_quiz_bg.png); background-position;center top, center top; background-repeat:no-repeat, repeat-y; background-size:contain, contain; text-align:center; }
#top-q-ttl { display:none; }
#top-q-num-txt { margin-bottom:0.2em; font-size:180%; line-height:140%; font-weight:bold; text-shadow:0 2px 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, -2px 0 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; }
#top-q-num-notice { margin-bottom:1.0em; padding-top:1.0em; border-top:rgba(0,0,0,0.3) 1px solid; font-size:160%; font-weight:bold; text-shadow:0 2px 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, -2px 0 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; }
#top-q-num-list { display:flex; justify-content:center; flex-wrap:wrap; margin-bottom:1.0em; padding:1.0em 0 0.5em 0; background-color:#fff; border-radius:1.0em; font-weight:bold; }
#top-q-num-list li { margin:0.2em 0.3em; font-size:240%; }
#top-q-num-list li .nm { color:#d51222; }

#top-q-btn { width:12.0em; margin:0 auto; text-align:center; }
#top-q-btn a { display:inline-block; position:relative; width:100%; padding:0.5em 0; border-radius:2.2em; line-height:130%; font-weight:bold; color:#fff; text-decoration:none; background:#EA2C3A; transition: opacity 0.2s ease-out; }
#top-q-btn a::before { display:inline-block; position:absolute; top:0.95em; left:1.5em; margin-right:0.7em; content:"▶︎"; font-size:50%; }
#top-q-btn a:hover { opacity:0.5; }

/* for quiz page */
#quiz #top-q-btn { display:none; }

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

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

#top-quiz { width:100%; padding:10.0vw 3% 2% 3%; }
#top-q-num-txt { font-size:4.5vw; }
#top-q-num-notice { font-size:4.0vw; }
#top-q-num-list li { margin:0 0.6em 0.6em 0; font-size:5.0vw; }

#top-q-btn { font-size:90%; }

}


/* relayinfo
=============================================== */

#relayinfo { width:980px; margin:0 auto 20px auto; padding:0 0 2em; background-color:#fff; text-align:center; }
#relayinfo h3 { width: 100%; height:90px; border-bottom:#d7002a 4px solid; text-align:center; font-weight:bold;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(219,219,219,1) 100%);
font-size:180%; line-height:90px;
background-color:#fff; color:#d7002a;}
#relayinfo h3 span{color:#d7002a;
background: linear-gradient(to bottom, #d7002a 0%,#a00016 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
#relayinfo p {padding:1.5em 0; line-height:140%; color:#d7002a;}
#relayinfo .info-img span {width:900px;height:538px;margin:1em auto 0;display:block; background:url(../img/top/top_pic_no1.jpg) center center no-repeat; background-size:cover; }
#relayinfo .banner_area { width:96%; margin:0 2%; }
#relayinfo .banner_area ul { /* for space */ font-size:0; }
#relayinfo .banner_area ul li { display:inline-block; vertical-align:middle; width:32%; margin:0 2% 2% 0; /* for space */ font-size:1rem; }
#relayinfo .banner_area ul li:last-child { margin:0 0 2% 0; }
#relayinfo .banner_area ul li a { display:block; position:relative; width:100%; height:0; padding-top:33.33%; }
#relayinfo .banner_area ul li span { 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; }

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

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

#relayinfo { width:auto; margin-bottom:15px; padding:0; }
#relayinfo h3 { width:100%; height:auto; padding:4% 0; line-height:130%; font-size:5vw; border-top:#d7002a 3px solid; border-bottom:#d7002a 3px solid;}
#relayinfo p{padding:3%; font-size:90%;}
#relayinfo .info-img span {width:100%; height:0; padding:59.7826% 0 0;display:block; position:relative; margin:3% auto 0;}
#relayinfo .banner_area.top_bn1 ul li { width:300px; margin:0 0 2% 0!important; }
#relayinfo .banner_area.top_bn2 ul li { width:90%; margin:0 5% 2% 5%!important; }

}


/* top-attention
=============================================== */

#top-attention { width:980px; margin:0 auto 20px auto; padding:20px; box-sizing:border-box; border-radius:20px; background-color:#fff; color:#333; font-size:160%; line-height:140%; box-shadow:0px 2px 4px rgba(0,0,0,0.2); font-weight:700; text-align:center; }

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

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

#top-attention { width:94%; margin:10px 3%; padding:10px; border-radius:10px; font-size:120%; }

}

/* top-cal
=============================================== */

#top-cal { width:980px; margin:0 auto 20px auto; padding:20px; box-sizing:border-box; border-radius:20px; background-color:#fff; color:#333; box-shadow:0px 2px 4px rgba(0,0,0,0.2); font-weight:700; text-align:center; }

#top-cal-ttl { margin-bottom:0.5em; font-size:1.6rem; }
#top-cal-btn { /* for space */ font-size:0; }
#top-cal-btn li { display:inline-block; margin:0 0.2em 0.5em 0.2em; vertical-align:middle; /* for space */ font-size:1.6rem; }
#top-cal-btn li::before { display:inline-block; position:relative; top:-0.2em; content:"▶︎"; vertical-align:middle; margin-right:0.25em; font-size:60%; color:#C60025; }

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

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

#top-cal { width:94%; margin:10px 3%; padding:10px; border-radius:10px; }

#top-cal-ttl { font-size:1.1rem; }
#top-cal-btn li { font-size:1.0rem; }

}


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

#top-2col { width:980px; margin:auto; }
#top-2col:after {content:"";clear:both;display:block;}
#top-twitter { width:470px; padding-bottom:20px; float:left; text-align:center; }
#top-twitter-ttl { padding-bottom:0.5em; font-size:200%; color:#fff; text-shadow:0px 2px 4px rgba(0,0,0,0.2); }

#top-banner2 { width:470px; float:right; text-align:center; padding-top:3.0em; }

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

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

#top-2col { width:94%; margin:0 3%; }
#top-twitter { width:auto; float:none; }

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

}



/* live-nav
=============================================== */

.live-chnm { display:inline-block; margin-right:0.5em; padding:0 0.5em; font-size:80%; background-color:#835005; color:#fff; }
.live-nav { margin:20px auto; }
.live-nav ul { display:flex; align-items:stretch; }
.live-nav ul li { display:block; width:49%; margin:0 0.5%; }
.live-nav ul li a { display:flex; justify-content:flex-start; align-items:center; width:100%; height:100%; padding:1.0em; box-sizing:border-box; border-radius:1.0em; background: rgb(187,134,23); background: linear-gradient(0deg, rgba(187,134,23,1) 0%, rgba(252,209,44,1) 100%); color:#333; text-decoration:none; font-size:110%; line-height:140%; font-weight:bold; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { .live-nav ul li a:hover { opacity:0.7; } }
.live-nav ul li a .live-chnm { background-color:#835005; color:#fff; border-radius:5px; }
#live-nav-ch1 ul li:nth-child(1) a,
#live-nav-ch2 ul li:nth-child(2) a,
#live-nav-ch3 ul li:nth-child(3) a { opacity:0.7; }

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

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

.mov-ttl .live-chnm { display:block; width:7.0em; margin:0 auto 0.5em auto; }

.live-nav { width:auto; text-align:left; font-size:90%; }
.live-nav ul { display:block; }
.live-nav ul li { width:100%; margin-bottom:2px; }
.live-nav ul li a { display:block; }

}


/* bn-game
=============================================== */

#bn-game { width:700px; margin:0 auto 30px auto; }
#bn-game p { position:relative; width:100%; height:0; padding-top:23.4%; }
#bn-game p a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/top/bn_game.jpg?1226) center center no-repeat; background-size:cover; text-indent:-9999px; box-shadow:0px 2px 4px rgba(0,0,0,0.2); /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { #bn-game p a:hover { opacity:0.5; } }

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

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

#bn-game { width:96%; margin:10px 2% 10px 2%; }

}