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

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


.mov-sttl { position:relative; margin-bottom:10px; padding:0 0 15px 0; font-size:120%; line-height:140%; color:#C70025; }
.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 #e33c7d; border-bottom: 2px solid #C70025; }

#mov-bknm { margin:2em auto 0; text-align:left; display: flex; flex-flow: row wrap; }
#mov-bknm li { vertical-align: top; width:167px; margin:0 8px 20px;}
#mov-bknm li a { opacity:1; text-decoration:none; }
#mov-bknm li a:hover { opacity:0.7; }
#mov-bknm li a .mov-bknm-tmb { display:block; position:relative; margin-bottom:5px; width:100%; height:0; padding-top:56.25%; background-color:#efefef; }
#mov-bknm li a .mov-bknm-tmb span { display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover; text-indent:-9999px; }
#mov-bknm li a .mov-bknm-t { font-size:90%; line-height:130%; }



.movtxt { width:100%; text-align: center; color:#c31082; font-weight:bold; text-align:center; text-shadow:1px 1px 2px rgba(255,255,255,0.6); padding: 25% 0;
background: -moz-linear-gradient(top, #fbfbfb, #d3d3d3);
background: -webkit-linear-gradient(top, #fbfbfb, #d3d3d3);
background: linear-gradient(to bottom, #fbfbfb, #d3d3d3);
}

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

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

#mov-bknm li { width:120px; margin:0 7px 14px 7px; }

ul#mov-bknm{ margin:1em 0; width:100%;}
#mov-bknm li{ width:30%; margin:0 1.1% 2.5%; font-size:85%; width: -webkit-calc(100% / 2 - 2.2%) ; width: calc(100% / 2 - 2.2%); }

}

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

#hl-lead { margin-bottom:20px; color:#C70025; font-size:120%; line-height:160%; font-weight:bold; text-align:center; }

.hl-box { margin:0 auto 1.5em; line-height:160%; }
.hl-box:first-of-type { margin:0 auto 2.5em; }

.hl-subttl { margin-bottom:20px; padding:15px; font-size:140%; line-height:140%; border-radius:7px; background-color:#C70025; color:#fff; font-weight:bold; text-align:center; text-shadow:2px 2px 4px rgba(0,0,0,0.2); }
.hl-sbox { margin-bottom:20px; padding-bottom:20px; border-bottom:#dcdddd 1px solid; }
.hl-sbox:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.hl-sbox:after {content:"";clear:both;display:block;}
.hl-box .name { font-weight:bold; }
.hl-box .hl-img { width:100%; margin:20px 0; }
.hl-box .hl-img p { position:relative; width:100%; height:0; padding-top:30.61224897%; background-color:#efefef; }
.hl-box .hl-img p 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; }
.hl-sttl { position:relative; margin-bottom:10px; padding:0 0 15px 0; font-size:120%; line-height:140%; color:#C70025; }
.hl-sttl::after { position: absolute; left: 0; content: ''; width: 100%; height: 6px; box-sizing: border-box; }
.hl-sttl::after { bottom: 0; border-top: 1px solid #e33c7d; border-bottom: 2px solid #C70025; }
.hl-box .prof {background: #fbeee3; padding: 15px; margin-top: 15px; }

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

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

.hl-sbox-l { float:none; width:100%!important; margin-bottom:10px; }
.hl-p { float:none; margin-left:0; margin:0 auto; }

.hl-box { margin:0 auto 1.0em;}
.hl-box:first-of-type { margin:0 auto 5%;}
.hl-box .prof { font-size:90%; }

}


/* intro-txt
=============================================== */

#intro-txt { padding:15px 0; text-align:center; }
#intro-txt p { font-size:140%; line-height:160%; font-weight:bold; color:#8F0010; }

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

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

#intro-txt { padding:5px 0; text-align:center; }
#intro-txt p { font-size:120%; }

}



/* 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-size: cover; background-repeat: no-repeat; background-position: center center;}
#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; padding:0 0 5%; }
#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 0px 40px rgba(0,0,0,0.2) inset; 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-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 0px 40px rgba(0,0,0,0.2) inset; 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-banner { 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-banner { 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:#b41e81; color:#fff8f1; }
.live-nav { margin:20px auto 0 auto; text-align:center; }
.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(221,62,167); background:linear-gradient(180deg, rgba(221,62,167,1) 0%, rgba(180,30,129,1) 50%); color:#fff8f1; 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:#fff8f1; color:#b41e81; 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?20251122) 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%; }

}