/*
================================================================================================================
チーム紹介 一覧
================================================================================================================
*/
#team-about{width:100%; max-width:1200px; font-family:'Noto Sans JP', sans-serif; font-weight:700; text-align:center; margin:0 auto;}
#team-about a{transition:opacity .2s ease;}
#team-about a:hover{opacity:.8;}

#team-about > div{
display:flex;
position:relative;
min-height:300px;
background-image:url(/game/bpl/common/img/bg/main_pc.jpg);
background-position:center;
background-repeat:no-repeat;
background-size:100% auto;}
#team-about > div::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;}

#team-about > div > *{height:300px;}

/*チームエリア*/
#team-about > div > .team{position:relative; width:300px; z-index:2;}
#team-about > div > .team a{display:flex; width:100%; height:100%; align-items:center; justify-content:center; flex-wrap:wrap;}
#team-about > div > .team a > p{width:100%; text-align:center;}
#team-about > div > .team a > p img{width:90%;}

#team-about > .team-gp > .team a > p img,
#team-about > .team-sh > .team a > p img,
#team-about > .team-tt > .team a > p img{width:60%;}

/*選手エリア*/
#team-about > div > .member{display:flex; width:calc(100% - 300px); flex-wrap:wrap;}
#team-about > div > .member > a{display:block; position:relative; width:25%; height:100%; padding:10px 5px; z-index:5;}
#team-about > div > .member > a::before,
#team-about > div > .member > a::after{
display:block;
content:"";
position:absolute;
top:10px;
left:5px;
width:calc(100% - 10px);
height:calc(100% - 20px);
border-radius:5px;
z-index:1;}
#team-about > div > .member > a::before{background-color:#fff;}
#team-about > div > .member > a::after{background-size:auto 101%; background-position:center; opacity:.5;}

/*選手写真*/
#team-about > div > .member > a > .photo{
display:flex;
position:relative;
width:100%;
height:100%;
background-size:auto 160%;
background-position:top -20px center;
border-radius:5px;
filter:drop-shadow(5px 5px 1px rgba(0,0,0,.3));
box-shadow:5px 5px 3px rgba(0,0,0,.3);
transform:translateZ(0);
z-index:2;}

/*選手名*/
#team-about > div > .member > a .player{position:absolute; bottom:0; right:0;}
#team-about > div > .member > a .name{
display:inline-block;
color:#fff;
background:#000;
font-size:18px;
letter-spacing:2px;
padding:10px;
font-family:'Orbitron','M PLUS 1', sans-serif;}

@media screen and (max-width:1600px){
#team-about > div > .team{width:200px;}
#team-about > div > .member{width:calc(100% - 200px);}}

@media screen and (max-width:1200px){
#team-about > div{flex-wrap:wrap; background-size:cover;}
#team-about > div > *{width:100% !important;}

#team-about > div > .team{height:auto !important;}
#team-about > div > .team a > p{padding:20px 0;}
#team-about > div > .team a > p img{width:35%;}
#team-about > .team-gp > .team a > p img,
#team-about > .team-sh > .team a > p img,
#team-about > .team-tt > .team a > p img{width:40%; max-width:180px;}

#team-about > div > .member{height:300px;}}

@media screen and (max-width:800px){
#team-about > div{background-image:url(/game/bpl/common/img/bg/main_sp.jpg);}
#team-about > div > .member{height:600px; padding:0 10px 10px;}
#team-about > div > .member > a{width:50%; height:50%;}}

@media screen and (max-width:480px){
#team-about > div > .team a > p img{width:70%;}}

@media screen and (max-width:420px){
#team-about > div > .member{height:800px;}
#team-about > div > .member > a{width:100%; height:unset; padding:5px;}
#team-about > div > .member > a::before,
#team-about > div > .member > a::after{top:5px; height:calc(100% - 10px);}}

/*
================================================================================================================
背景
================================================================================================================
*/
.team-av::after{background-color:rgba(0,95,175,.6) !important; mix-blend-mode:lighten;}
.team-gg::after{background-color:rgba(0,108,220,.8) !important; mix-blend-mode:lighten;}
.team-gp::after{background-color:rgba(252,200,0,.8) !important; mix-blend-mode:screen;}
.team-sh::after{background-color:rgba(200,200,200,.8) !important; mix-blend-mode:screen;}
.team-tt::after{background-color:rgba(255,0,0,.8) !important; mix-blend-mode:screen;}
.team-r1::after{background-color:rgba(230,0,18,.8) !important; mix-blend-mode:screen;}
.team-ll::after{background-color:rgba(225,26,110,.8) !important; mix-blend-mode:lighten;}

.team-av > .member > a::after{background-image:url(../../img/team/av.jpg);}
.team-gg > .member > a::after{background-image:url(../../img/team/gg.jpg);}
.team-gp > .member > a::after{background-image:url(../../img/team/gp.jpg);}
.team-sh > .member > a::after{background-image:url(../../img/team/sh.jpg);}
.team-tt > .member > a::after{background-image:url(../../img/team/tt.jpg);}
.team-r1 > .member > a::after{background-image:url(../../img/team/r1.jpg);}
.team-ll > .member > a::after{background-image:url(../../img/team/ll.jpg);}