/*
================================================================================================================
MENU-メイン項目ショートカットアクセス版
================================================================================================================
*/
#bpl-menu{
display:flex;
position:absolute;
top:50px;
left:0;
width:100%;
height:80px;
background:#fff;
justify-content:space-between;}
#bpl-menu > a{
display:block;
width:40%;
max-width:126px;
padding:10px;
margin:0 auto 0 0;
opacity:1;
transition:all .5s ease;
pointer-events:auto;}
#bpl-menu > a img{width:100%;}
#bpl-menu > a:hover img{opacity:.7;}

#bpl-menu::after{
display:block;
content:"";
position:absolute;
bottom:-5px;
left:0;
width:100%;
height:5px;
background-image:url(/game/bpl/season6/img/common/bg/bar.jpg);
background-size:100% auto;}

@media screen and (max-width:640px){
#bpl-menu{height:70px;}
#bpl-menu > a{max-width:118px; padding:5px;}}

/*
=============================
全階層共通 アニメーション
=============================
*/
@media screen and (min-width:681px){#menu-sub .first-menu{transition:border .3s ease;}}
@media screen and (max-width:680px){#menu-sub .first-menu{transition:background .3s ease;}}

#menu-sub .second-menu,
#menu-sub .second-menu ul li a{transition:.3s ease;}

/*
=============================
第1階層
=============================
*/
#menu-sub{
display:flex;
height:50px;
background:#133479;
border-radius:25px 0 0 25px;
padding:0 30px;
margin-top:15px;
margin-right:130px;
justify-content:flex-start;}

#menu-sub > li{width:70px; text-align:center; transition:all .2s ease;}
#menu-sub > li:hover > .btn{filter:drop-shadow(0 0 5px #246dff) drop-shadow(0 0 2px #246dff);}

#menu-sub > li > .btn{
display:block;
height:100%;
line-height:80px;
color:#fff;
font-size:12px;
font-weight:400;
background-size:40px auto;
background-repeat:no-repeat;
background-position:top 2px center;
transition:all .2s ease;
cursor:pointer;}
#menu-sub > li.menu01 > .btn{background-image:url(/game/bpl/common/img/menu/icn01.png);}
#menu-sub > li.menu02 > .btn{background-image:url(/game/bpl/common/img/menu/icn02.png);}
#menu-sub > li.menu03 > .btn{background-image:url(/game/bpl/common/img/menu/icn03.png);}
#menu-sub > li.menu04 > .btn{background-image:url(/game/bpl/common/img/menu/icn04.png);}

@media screen and (max-width:640px){
nav:not(.show) #menu-sub{position:absolute; top:75px; width:100%; height:unset; border-radius:0; padding:0; margin:0; justify-content:center;}
nav:not(.show) #menu-sub > li{width:50%;}
nav:not(.show) #menu-sub > li + li{border-left:1px solid #005e94;}
nav:not(.show) #menu-sub > li > .btn{background-image:none; font-size:14px; line-height:unset; padding:5px 0;}
nav:not(.show) #menu-sub > li:hover > .btn{background:#000; filter:drop-shadow(0 0 0 rgba(0,0,0,0));}
nav.show{justify-content:flex-end !important;}
nav.show #menu-sub{margin-top:10px; padding:0 130px 0 20px; margin-right:0;}
nav.show #menu-sub > li{width:60px;}}
@media screen and (max-width:420px){nav:not(.show) #menu-sub > li > .btn{font-size:12px;}}

/*
=============================
第2階層
=============================
*/
#menu-sub .second-menu{
position:absolute;
top:85px;
left:0;
width:100%;
max-height:0;
background:linear-gradient(to bottom, #000 0%,#001724 100%);
box-shadow:0 5px 10px rgba(0,0,0,.3);
overflow:hidden;
opacity:0;}
#menu-sub .second-menu::after{
display:block;
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:5px;
background-image:url(/game/bpl/season5/img/common/bg/bar.jpg);
background-size:100% auto;}

/*第2階層MENU OPEN*/
#menu-sub > li:hover > .second-menu{max-height:999px !important; opacity:1 !important;}
#menu-sub > li:hover > .second-menu ul{height:auto !important;}

@media screen and (max-width:640px){#menu-sub .second-menu{top:30px;}}

/*
================================================================================================================
第2階層-試合
================================================================================================================
*/
#menu-sub .second-menu .game-slider{position:relative; width:100%; font-family:'M PLUS 1', sans-serif; font-size:18px; letter-spacing:2px; font-weight:800; padding:20px 0;}
#menu-sub .second-menu .game-slider .game-select{position:relative; width:100%;}

#menu-sub .second-menu .game-slider .game-select .game{position:relative; display:block; width:100%; background:#000;}
#menu-sub .second-menu .game-slider .game-select .game > p{position:relative; text-align:center;}
#menu-sub .second-menu .game-slider .game-select .game > p span{font-size:24px;}

#menu-sub .second-menu .game-slider .game-select .game > p.date{color:#fff; background:#0098ff; padding:10px 5px; border-radius:5px 5px 0 0;}
#menu-sub .second-menu .game-slider .game-select .game > p.date::before{display:block; font-size:12px;}

/*リンク付き
#menu-sub .second-menu .game-slider .game-select a.game.game01 > p.date::after{content:"20:00"}*/
#menu-sub .second-menu .game-slider .game-select a.game::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,.3);
border-radius:5px;
z-index:3;
opacity:0;
transition:opacity .3s ease;}
#menu-sub .second-menu .game-slider .game-select a.game:hover::after{opacity:1;}

/*第〇試合*/
#menu-sub .second-menu .game-slider .game-select .game > p:not(.date){
width:100%;
color:#000;
background:#fff;/*
border-top:3px solid #f00;
border-bottom:3px solid #f00;*/
padding:10px;
margin:5px auto;}
#menu-sub .second-menu .game-slider .game-select .game > p:not(.date)::before,
#menu-sub .second-menu .game-slider .game-select .game > p:not(.date)::after{display:block; content:""; position:absolute; left:0; width:100%; height:2px; background:#000;}
#menu-sub .second-menu .game-slider .game-select .game > p:not(.date)::before{top:0;}
#menu-sub .second-menu .game-slider .game-select .game > p:not(.date)::after{bottom:0;}

/*対戦カード*/
#menu-sub .second-menu .game-slider .game-select .game .match{display:flex; width:100%; background:#222; justify-content:space-between;}
#menu-sub .second-menu .game-slider .game-select .game .match > p{
position:relative;
width:50%;
height:80px;
background-size:auto 110%;
background-repeat:no-repeat;
background-position:center;}
#menu-sub .second-menu .game-slider .game-select .game .match > p:first-child{border-radius:0 0 0 5px;}
#menu-sub .second-menu .game-slider .game-select .game .match > p:last-child{border-radius:0 0 5px 0;}
#menu-sub .second-menu .game-slider .game-select .game .match > p:first-child::after,
#menu-sub .second-menu .game-slider .game-select .game .match > p:last-child::after{
display:block;
position:absolute;
color:#fff;
text-align:center;
font-family:'Orbitron';
font-size:13px;
z-index:3;}
#menu-sub .second-menu .game-slider .game-select .game .match > p:first-child::after{content:""; top:calc(50% - 15px); right:-15px; width:30px; height:30px; background:rgba(0,0,0,.9); transform:rotate(-45deg);}
#menu-sub .second-menu .game-slider .game-select .game .match > p:last-child::after{content:"VS"; top:calc(50% - 10px); left:-20px; width:40px; height:20px;}

/*チームロゴ*/
#menu-sub .second-menu .game-slider .game-select .game .match > p.team-sh,
#menu-sub .second-menu .game-slider .game-select .game .match > p.team-gp,
#menu-sub .second-menu .game-slider .game-select .game .match > p.team-tt{background-size:auto 90%;}
#menu-sub .second-menu .game-slider .game-select .game .team-av{background-image:url(/game/bpl/common/img/team/av/small.png);}
#menu-sub .second-menu .game-slider .game-select .game .team-gg{background-image:url(/game/bpl/common/img/team/gg/small.png);}
#menu-sub .second-menu .game-slider .game-select .game .team-gp{background-image:url(/game/bpl/common/img/team/gp/small.png);}
#menu-sub .second-menu .game-slider .game-select .game .team-sh{background-image:url(/game/bpl/common/img/team/sh/small.png);}
#menu-sub .second-menu .game-slider .game-select .game .team-tt{background-image:url(/game/bpl/common/img/team/tt/small.png);}
#menu-sub .second-menu .game-slider .game-select .game .team-r1{background-image:url(/game/bpl/common/img/team/r1/small.png);}
#menu-sub .second-menu .game-slider .game-select .game .team-ll{background-image:url(/game/bpl/common/img/team/ll/small.png);}

@media screen and (max-width:640px){
#menu-sub .second-menu .game-slider{font-size:15px; padding:10px 0;}
#menu-sub .second-menu .game-slider .swiper-slide{opacity:.2;}
#menu-sub .second-menu .game-slider .game-select .game > p.date,
#menu-sub .second-menu .game-slider .game-select .game > p:not(.date){padding:5px;}
#menu-sub .second-menu .game-slider .game-select .game > p span{font-size:20px;}
#menu-sub .second-menu .game-slider .game-select .game .match > p{height:60px; background-size:auto 80%;}
#menu-sub .second-menu .game-slider .game-select .game .match > p:first-child::after{top:calc(50% - 13px); right:-13px; width:26px; height:26px;}
#menu-sub .second-menu .game-slider .game-select .game .match > p:last-child::after{top:calc(50% - 9px); left:-16px; width:30px; font-size:12px; letter-spacing:0;}}
@media screen and (max-width:370px){#menu-sub .second-menu .game-slider .game-select .game > p.date::before{font-size:10px;}}

/*
=============================
ステージ名
=============================
*/
#menu-sub .second-menu .game-slider .game-select .game.game02 > p.date{background:#324452;}
#menu-sub .second-menu .game-slider .game-select .game.game03 > p.date{background:linear-gradient(to bottom, #c97500 0%,#f9b300 100%); text-shadow:0 0 4px #fc0 , 0 0 10px #fc0 , 0 2px 3px #5B4000;}
#menu-sub .second-menu .game-slider .game-select .game.game01 > p.date::before{content:"レギュラーステージ";}
#menu-sub .second-menu .game-slider .game-select .game.game02 > p.date::before{content:"セミファイナル";}
#menu-sub .second-menu .game-slider .game-select .game.game03 > p.date::before{content:"ファイナル"; font-size:20px; margin-bottom:5px;}
#menu-sub .second-menu .game-slider .game-select .game.game03 > p.date{padding:20px 5px;}
#menu-sub .second-menu .game-slider .game-select .game.game03 > p:not(.date){border-top:1px solid #f00; border-bottom:1px solid #f00; padding:3px;}
@media screen and (min-width:1561px){#menu-sub .second-menu .game-slider .game-select .game.game03 .match > p{height:110px; background-size:auto 100%;}}
@media screen and (max-width:480px){
#menu-sub .second-menu .game-slider .game-select .game.game03 > p.date::before{font-size:15px; margin-bottom:3px;}
#menu-sub .second-menu .game-slider .game-select .game.game03 > p.date{padding:10px 5px;}}

/*
=============================
スライド
=============================
*/
#menu-sub .second-menu .game-slider .swiper-slide{opacity:.3; transform:scale(.9) !important; transition:all .2s ease;}
#menu-sub .second-menu .game-slider .swiper-slide-active{opacity:1; transform:scale(1) !important;}

/*
=============================
ナビゲーション
=============================
*/
#menu-sub .second-menu .game-slider .swiper-controller{
position:absolute;
top:calc(50% - 25px);
left:calc(100% / 3);
width:calc(100% / 3);
height:50px;}
#menu-sub .second-menu .game-slider .swiper-controller > *{
display:block;
position:absolute;
top:0;
width:50px;
height:50px;
border-radius:50%;
background:rgba(0,0,0,.5);
z-index:3;}
#menu-sub .second-menu .game-slider .swiper-controller > *:hover{cursor:pointer;}
#menu-sub .second-menu .game-slider .swiper-button-prev{left:-10px;}
#menu-sub .second-menu .game-slider .swiper-button-next{right:-10px;}
#menu-sub .second-menu .game-slider .swiper-controller > *::before{
display:block;
content:"";
position:absolute;
top:calc(50% - 7px);
width:14px;
height:14px;
border-left:2px solid #fff;
border-bottom:2px solid #fff;
transition:all .2s ease;}
#menu-sub .second-menu .game-slider .swiper-button-prev::before{left:calc(50% - 3px); transform:rotate(45deg);}
#menu-sub .second-menu .game-slider .swiper-button-next::before{right:calc(50% - 3px); transform:rotate(-135deg);}
#menu-sub .second-menu .game-slider .swiper-button-prev:hover::before{left:calc(50% - 6px);}
#menu-sub .second-menu .game-slider .swiper-button-next:hover::before{right:calc(50% - 6px);}

#menu-sub .second-menu .game-slider .swiper-button-disabled{pointer-events:none; opacity:0;}

@media screen and (max-width:1200px){#menu-sub .second-menu .game-slider .swiper-controller{left:22%; width:56%;}}
@media screen and (max-width:980px){#menu-sub .second-menu .game-slider .swiper-controller{left:15%; width:70%;}}
@media screen and (max-width:640px){#menu-sub .second-menu .game-slider .swiper-controller{left:5%; width:90%;}}
@media screen and (max-width:480px){#menu-sub .second-menu .game-slider .swiper-controller > *{width:40px; height:40px; background:rgba(0,0,0,.7);}}

@media screen and (max-width:1100px){
#menu-sub .second-menu .game-slider .swiper-button-prev{left:-15px;}
#menu-sub .second-menu .game-slider .swiper-button-next{right:-15px;}}

/*対戦チーム未定時*/
#menu-sub .second-menu .game-slider .game-select .game .team-none{
background-image:url(/game/bpl/common/img/logo/season5/bpl_emblem.png) , url(/game/bpl/season5/img/team/none.jpg);
background-size:auto 80% , 200% auto  !important;}

/*
================================================================================================================
第2階層-チーム
================================================================================================================
*/
/*タブ切り替え*/
.second-menu > .tab{display:flex; max-width:800px; font-family:'Orbitron', sans-serif; letter-spacing:1px; color:#fff; justify-content:center; margin:10px auto 0;}
.second-menu > .tab > p{width:calc((100% / 3) - 10px); padding:10px 0; border-radius:5px; transition:all .2s ease; cursor:pointer;}
.second-menu > .tab > p:hover,
.second-menu > .tab > p.tab-select{background-color:#00b792;}
.second-menu > .tab > p + p{margin-left:5px;}

@media screen and (max-width:800px){
.second-menu > .tab{margin:0 auto;}
.second-menu > .tab > p{width:calc(100% / 3); border-radius:0; font-size:13px;}
.second-menu > .tab > p + p{margin-left:0;}}
@media screen and (max-width:640px){
.second-menu > .tab > p{height:40px; background-position:center; background-size:auto 70%; background-repeat:no-repeat;}
.second-menu > .tab > p:nth-child(1){background-image:url(/game/bpl/season2/img/common/icn/icn_iidx.png);}
.second-menu > .tab > p:nth-child(2){background-image:url(/game/bpl/season2/img/common/icn/icn_sdvx.png);}
.second-menu > .tab > p:nth-child(3){background-image:url(/game/bpl/season2/img/common/icn/icn_ddr.png);}
.second-menu > .tab > p span{display:none;}}
@media screen and (max-width:420px){.second-menu > .tab > p{height:30px;}}
@media screen and (max-width:370px){.second-menu > .tab > p{background-size:auto 55%;}}

/*チーム一覧*/
#menu-sub .second-menu > .team{display:flex; color:#fff; width:100%; padding:10px 0 15px; margin:0 auto;}
#menu-sub .second-menu > .team > div{width:calc(100% / 7); background:transparent !important; font-size:14px; letter-spacing:1px; padding:10px 5px;}
#menu-sub .second-menu > .team > div a{position:relative; display:block; color:#fff; padding:5px 0;}

/*オンマウス色*/
#menu-sub .second-menu > .team > div.team-av ul > li > a:hover{background-color:rgba(0,87,181,.7);}
#menu-sub .second-menu > .team > div.team-gg ul > li > a:hover{background-color:rgba(0,108,220,.7);}
#menu-sub .second-menu > .team > div.team-gp ul > li > a:hover{background-color:rgba(255,203,33,.7);}
#menu-sub .second-menu > .team > div.team-sh ul > li > a:hover{background-color:rgba(200,200,200,.7);}
#menu-sub .second-menu > .team > div.team-tt ul > li > a:hover{background-color:rgba(255,0,0,.7);}
#menu-sub .second-menu > .team > div.team-r1 ul > li > a:hover{background-color:rgba(216,12,24,.7);}
#menu-sub .second-menu > .team > div.team-ll ul > li > a:hover{background-color:rgba(255,29,132,.7);}

/*チームロゴ*/
#menu-sub .second-menu > .team > div > div a{
height:60px;
max-height:60px;
background-repeat:no-repeat;
background-position:center;
background-size:70% auto;
border-radius:3px;
overflow:hidden;
margin:0 auto 10px;
transition:opacity .2s ease;}
#menu-sub .second-menu > .team > div > div a:hover{opacity:.7;}
#menu-sub .second-menu > .team > div > div p{display:none;}
#menu-sub .second-menu > .team > div.team-gg > div a{background-size:65% auto;}
#menu-sub .second-menu > .team > div.team-gp > div a,
#menu-sub .second-menu > .team > div.team-sh > div a,
#menu-sub .second-menu > .team > div.team-tt > div a{background-size:auto 90%;}
#menu-sub .second-menu > .team > div.team-av > div a{background-color:#005faf; background-image:url(/game/bpl/common/img/team/av/small.png);}
#menu-sub .second-menu > .team > div.team-gg > div a{background-color:#006cdc; background-image:url(/game/bpl/common/img/team/gg/small.png);}
#menu-sub .second-menu > .team > div.team-gp > div a{background-color:#ffcb21; background-image:url(/game/bpl/common/img/team/gp/small.png);}
#menu-sub .second-menu > .team > div.team-sh > div a{background-color:#c8c8c8; background-image:url(/game/bpl/common/img/team/sh/small.png);}
#menu-sub .second-menu > .team > div.team-tt > div a{background-color:#f00; background-image:url(/game/bpl/common/img/team/tt/small.png);}
#menu-sub .second-menu > .team > div.team-r1 > div a{background-color:#e60012; background-image:url(/game/bpl/common/img/team/r1/small.png);}
#menu-sub .second-menu > .team > div.team-ll > div a{background-color:#e11a6e; background-image:url(/game/bpl/common/img/team/ll/small.png);}

@media screen and (max-width:1200px){
#menu-sub .second-menu > .team{padding:10px 0 0; flex-wrap:wrap; justify-content:center;}
#menu-sub .second-menu > .team > div{width:calc(100% / 4); padding:5px; margin-bottom:10px;}}
@media screen and (min-width:641px){
#menu-sub .second-menu > .team > div ul > li a::after{
display:block;
position:absolute;
top:calc(50% - 6px);
right:15px;
content:"";
width:12px;
height:12px;
border-top:1px solid #fff;
border-right:1px solid #fff;
-webkit-transform: rotate(45deg);
transform:rotate(45deg);
opacity:0;
transition:.3s ease-in-out;}
#menu-sub .second-menu > .team > div ul > li a:hover::after{right:10px; opacity:1;}}
@media screen and (max-width:640px){
#menu-sub .second-menu > .team{padding:5px 5px 0; justify-content:space-between;}
#menu-sub .second-menu > .team > div{width:calc((100% / 3) - 5px); padding:0;}
#menu-sub .second-menu > .team > div a{font-size:13px; padding:2px 0;}
#menu-sub .second-menu > .team > div > div a{height:40px; max-height:40px; background-size:auto 100%; margin:0 auto 5px;}
#menu-sub .second-menu > .team > div.team-gg div a{background-size:auto 90%;}}
@media screen and (max-width:420px){#menu-sub .second-menu > .team > div > div a{height:30px;}}