/*
================================================================================================================
チーム紹介-ロゴ･チーム名
================================================================================================================
*/
#team-main #team-name{position:relative; padding:60px 0; overflow:hidden;}

#team-main #team-name > *{position:relative; z-index:3;}
#team-main #team-name > p{width:90%; max-width:900px; text-align:center; margin:0 auto 20px; filter:drop-shadow(0px 5px 1px rgba(0,0,0,.3)); transform:translateZ(0);}
#team-main #team-name > p img{width:100%;}
#team-main #team-name > h2{margin:20px 0 0 !important;}
#team-main #team-name > h2 span{display:block; letter-spacing:3px; margin:15px auto 0;}

@media screen and (max-width:560px){
.team-st #team-main #team-name > h2{font-size:30px !important;}}
@media screen and (max-width:480px){
#team-main #team-name{padding:60px 0 40px;}
#team-main #team-name > h2{font-size:30px !important;}
#team-main #team-name > h3{font-size:18px !important;}}
@media screen and (max-width:370px){
.team-st #team-main #team-name > h2{font-size:26px !important;}
.team-ll #team-main #team-name > h3{font-size:16px !important;}
.team-sh #team-main #team-name > h3{font-size:14px !important;}}

/*チームロゴ*/
#team.team-gp #team-main p img{width:40%;}
#team.team-sh #team-main p img{width:90%;}
#team.team-tt #team-main p img{width:50%;}
@media screen and (max-width:480px){
#team.team-gp #team-main p img{width:50%;}
#team.team-tt #team-main p img{width:60%;}}

/*現在の終了試合*/
.stage-num{width:100%; max-width:420px; font-size:12px; margin:20px auto 0;}

/*
================================================================================================================
チーム紹介-メンバー写真
================================================================================================================
*/
#team-member{position:relative; /*background-color:rgba(0,0,0,.8);*/}
.team-sh #team-member{/*background-color:rgba(0,0,0,.7);*/}

#team-member,
.scroll-bar,
.member-inner{position:relative; width:100%;}
.member-inner{height:600px;}

.member-inner > div{position:absolute; top:0; width:100%; height:100%; /*overflow-y:hidden;*/}
.member-inner > .member01{left:calc((100% / 4) * -1);}
.member-inner > .member02{left:0%;}
.member-inner > .member03{left:calc(100% / 4);}
.member-inner > .member04{left:calc(100% / 2);}

.member-inner > div > div{
display:block;
position:absolute;
left:0;
width:calc(100% - (100% / 4));
height:100%;
background-size:auto 100%;
background-position:center;
background-repeat:no-repeat;
filter:drop-shadow(5px 5px 0 rgba(0,0,0,.2));
transform:translateZ(0);
transition:.2s ease-in-out;
transform-origin:bottom;
z-index:2;}

.member-inner > div > a{
display:block;
position:absolute;
top:0;
left:calc(100% / 4);
width:calc(100% / 4);
height:100%;
z-index:10 !important;}

.member-inner > div > a:hover ~ div{
width:calc((100% - (100% / 4)) * 1.15);
height:115%;
left:-6%;
filter:drop-shadow(15px 15px 0 rgba(0,0,0,.3));
transform:translateZ(0);
overflow:visible;
z-index:5 !important;}

.member-inner > div::before,
.member-inner > div::after{
display:block;
content:"";
position:absolute;
top:10px;
left:calc((100% / 4) + 10px);
width:calc((100% / 4) - 20px);
height:calc(100% - 20px);
background-color:#fff;
border-radius:10px;
z-index:1;}
.member-inner > div::before{
background:#fff;
box-shadow:5px 5px 5px rgba(0,0,0,.5);}
.member-inner > div::after{
background-position:center;
background-size:auto 101%;
filter:blur(.4px);}

@media screen and (min-width:1381px){
.member-inner > div > div{bottom:0;}
.member-inner > div > a:hover ~ div{bottom:-40px;}}

/*横スクロール*/
@media screen and (max-width:1380px){
#team-member{padding:0 5px 10px;}
.scroll-bar{overflow:scroll hidden; padding-bottom:5px;}
.member-inner{width:1700px; max-width:1700px; overflow:hidden;}
.member-inner > div > div{top:0;}
.member-inner > div > a:hover ~ div{top:0;}

.scroll-bar::-webkit-scrollbar{height:8px;}
.scroll-bar::-webkit-scrollbar-thumb{background:#fff; border-radius:2px;}
.scroll-bar::-webkit-scrollbar-track{background:rgba(0,0,0,.3);}}

@media screen and (max-width:480px){
.member-inner{width:calc(330vw - 100px); max-width:calc(330vw - 100px); height:400px;}

#team-member::after{
display:block;
content:"SCROLL";
position:absolute;
top:-12px;
left:5px;
color:#fff;
font-size:12px;
font-weight:bold;
letter-spacing:1px;
z-index:10;}
#team-member::before{
display:block;
content:"";
position:absolute;
top:-10px;
left:0;
width:100%;
height:15px;
background:#000;
background-image:url(/game/bpl/season2/img/common/bg/item01.png);
background-size:auto 10px;
background-repeat:no-repeat;
background-position:center left 74px;
filter:drop-shadow(2px 2px 1px rgba(0,0,0,.8));
transform:translateZ(0);
z-index:10;}}

/*オンマウス演出*/
@media screen and (min-width:481px){
.member-inner:hover > div > a:not(:hover) .player{opacity:0;}
.member-inner:hover > div > a:not(:hover){filter:blur(1px);}
.member-inner:hover > div > a:not(:hover) ~ div{opacity:.9; filter:blur(2px);}}

@media screen and (max-width:430px){.member-inner{width:calc(380vw - 100px); max-width:calc(380vw - 100px);}}
@media screen and (max-width:370px){.member-inner{width:calc(435vw - 100px); max-width:calc(435vw - 100px);}}
@media screen and (max-width:340px){.member-inner{width:calc(450vw - 100px); max-width:calc(450vw - 100px);}}

/*
================================================================================================================
選手名
================================================================================================================
*/
.player{position:absolute; top:0; left:0;}
.player p{display:inline-block; position:absolute; left:20px; filter:drop-shadow(5px 5px 0 rgba(0,0,0,.6));}
.player .catch{bottom:75px;}
.player .name{bottom:30px;}
@media screen and (max-width:640px){.player .catch{font-size:15px;}}

/*
================================================================================================================
チーム紹介-大会日程
================================================================================================================
*/
#game-area{background:#222 !important;}
#game-area h4{background:#000; font-size:24px; padding:15px; margin:0 auto 20px;}

#game-area > #schedule{width:100%; max-width:980px; padding:0 20px; margin:0 auto;}
#game-area > #schedule .game{background:#444 !important;}


/*チーム表示切替*/
#schedule{font-weight:600;}
#schedule p.date,
#schedule div.game,
#schedule a.game{display:none !important;}

#team.team-av p[data-av="1"]{display:block !important;}
#team.team-av div[data-av="1"],#team.team-av a[data-av="1"]{display:flex !important;}
#team.team-gg p[data-gg="1"]{display:block !important;}
#team.team-gg div[data-gg="1"],#team.team-gg a[data-gg="1"]{display:flex !important;}
#team.team-gp p[data-gp="1"]{display:block !important;}
#team.team-gp div[data-gp="1"],#team.team-gp a[data-gp="1"]{display:flex !important;}
#team.team-sh p[data-sh="1"]{display:block !important;}
#team.team-sh div[data-sh="1"],#team.team-sh a[data-sh="1"]{display:flex !important;}
#team.team-tt p[data-tt="1"]{display:block !important;}
#team.team-tt div[data-tt="1"],#team.team-tt a[data-tt="1"]{display:flex !important;}
#team.team-r1 p[data-r1="1"]{display:block !important;}
#team.team-r1 div[data-r1="1"],#team.team-r1 a[data-r1="1"]{display:flex !important;}
#team.team-ll p[data-ll="1"]{display:block !important;}
#team.team-ll div[data-ll="1"],#team.team-ll a[data-ll="1"]{display:flex !important;}

/*注釈*/
#game-area .notice{font-size:12px;font-family:'Noto Sans JP', sans-serif; padding:10px 0 20px;}

/*
================================================================================================================
チームリンク-Twitter/コメントポップアップ
================================================================================================================
*/
.mfp-inline-holder .mfp-content{width:90%; max-width:980px;}
#comment{
position:relative;
width:100%;
max-width:980px;
color:#fff;
background-color:rgba(0,0,0,.9);
font-family:'Noto Sans JP', sans-serif;
line-height:180%;
letter-spacing:1px;
box-shadow:0 0 10px rgba(0,0,0,.7) , 0 0 30px rgba(0,0,0,.7);
padding:40px;
margin:0 auto;}
#comment > strong{display:block; border-bottom:1px solid; padding:0 0 5px; margin:0 auto 10px;}
@media screen and (max-width:480px){
#comment{font-size:13px; padding:20px;}}

/*
========================
ボタン
========================
*/
#team-main #team-name > ul{position:absolute; top:0; right:0; display:flex; width:100%; max-width:75px; justify-content:space-between;}
#team-main #team-name > ul li{width:calc(50% - 2.5px);}
#team-main #team-name > ul li a{text-shadow:none; font-weight:700;}

#team-name > ul li a{
display:block;
position:relative;
width:100%;
max-width:35px;
height:35px;
color:#fff;
background-color:#000;
font-size:13px;
border-radius:0 0 5px 5px;
transition:.2s ease-in-out;}
#team-name > ul li a::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:35px;
height:35px;
background-repeat:no-repeat;
background-position:center;
transition:.2s ease-in-out;
pointer-events:none;}
#team-name > ul li:nth-child(1) a::after{background-image:url(/game/bpl/common/img/sns/icn_x.png); background-size:90% auto;}
#team-name > ul li:nth-child(2) a::after{background-image:url(/game/bpl/common/img/sns/icn_comment.png); background-size:70% auto;}

#team-name > ul li a:hover{background-color:#fff;}
#team-name > ul li a:hover::after{filter:brightness(0);}

/*
================================================================================================================
Twiiterシェア
================================================================================================================
*/
#team > #sns-area{min-height:180px;}
#team > #sns-area > .inner{text-align:center !important; padding-left:0 !important;}
#team > #sns-area > .inner > a{margin:10px auto 0 !important;}
@media screen and (min-width:1900px){#sns-area > .inner > p > span > br{display:none;}}
@media screen and (max-width:1200px){#team > #sns-area > .inner > p > br{display:block;}}
@media screen and (max-width:480px){
#team > #sns-area{min-height:150px;}
#team > #sns-area > .inner > p > span{font-size:24px;}}
@media screen and (max-width:370px){
#sns-area > .inner > p{font-size:13px;}
#team > #sns-area > .inner > p > span{font-size:20px;}}