/*
================================================================================================================
アニメ
================================================================================================================
*/
#team .anime,
#team .anime *{z-index:999 !important;}

.show-up{
animation-name:fadeIn;
animation-duration:.7s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:1.5s;}
.show-up .show-up{animation-name:showIn; animation-delay:2.5s;}

@keyframes showIn{
0%{opacity:0; left:-40px;}
100%{opacity:1; left:0;}}

/*
================================================================================================================
選手個人ページ
================================================================================================================
*/
#member > .member{
position:relative;
width:100% !important;
height:800px !important;
min-height:800px !important;
max-height:800px !important;
margin:0 auto;
overflow:hidden;}
@media screen and (max-width:640px){#member > .member{height:500px !important; min-height:500px !important; max-height:500px !important;}}
@media screen and (max-width:480px){#member > .member{height:400px !important; min-height:400px !important; max-height:300px !important;}}

/*選手写真表示エリア*/
#member > .member .photo{
position:relative;
width:100%;
height:100%;
color:#fff;
font-weight:900;
margin:0 auto;
filter:drop-shadow(3px 3px 2px rgba(0,0,0,.3));
z-index:3;}
@media screen and (min-width:1100px){#member > .member .photo{max-width:980px;}}

#member > .member .photo::before{
display:block;
content:"";
width:100vw;
height:100%;
position:absolute;
top:0;
left:calc(50% - 50vw);
background-repeat:no-repeat;
background-position:top 10% center;}
@media screen and (max-width:640px){#member > .member .photo::before{background-size:auto 170%; background-position:top -50px left -150px;}}
@media screen and (max-width:480px){#member > .member .photo::before{background-size:auto 160%;}}
@media screen and (max-width:430px){#member > .member .photo::before{background-position:top -50px center;}}

/*
========================
情報入れ子
========================
*/
#member .player{display:flex; position:relative; align-items:center; width:100%; height:100%; flex-wrap:wrap; text-align:left;}
@media screen and (max-width:1100px){#member .player{padding-left:80px;}}
@media screen and (max-width:800px){#member .player{align-items:flex-end; padding-bottom:50px; padding-left:5%;}}
@media screen and (max-width:480px){#member .player{padding-bottom:30px; padding-left:10px;}}

@media screen and (max-width:640px){
#member .player::after{
display:block;
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:50%;
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 100%);
z-index:2;}}

/*
========================
チームロゴ・キャッチ・名前
========================
*/
#member .player div{position:relative; width:100%; z-index:3;}

/*チームロゴ*/
#member .player .team{
display:block;
width:100%;
height:90px;
background-size:auto 100%;
background-position:center left;
background-repeat:no-repeat;
margin-bottom:10px;}
@media screen and (max-width:640px){#member .player .team{height:50px;}}
@media screen and (max-width:480px){#member .player .team{height:40px;}}

/*キャッチコピー*/
#member .player .catch,#member .player .name{filter:drop-shadow(5px 5px 0 rgba(0,0,0,.3));}

#member .player .catch{display:inline-block;}
@media screen and (min-width:641px){#member .player .catch{height:50px; font-size:30px; line-height:50px;}}
@media screen and (max-width:640px){#member .player .catch{font-size:24px;}}
@media screen and (max-width:480px){#member .player .catch{font-size:20px;}}
@media screen and (max-width:400px){#member .player .catch{font-size:16px;}}

/*選手名*/
#member .player .name{
display:inline-block; 
height:70px;
font-size:50px;
line-height:70px;
text-shadow:0px 2px 0px rgba(0,0,0,.2),1px 1px 0px  rgba(0,0,0,.2),2px 1px 0px rgba(0,0,0,.2),1px 2px 0px  rgba(0,0,0,.3),0px 0px 5px  rgba(0,0,0,.2);}
@media screen and (max-width:480px){#member .player .name{height:40px; font-size:30px; line-height:40px;}}

/*
================================================================================================================
メンバーNEXT/BACK
================================================================================================================
*/
#page-menu a,
#page-menu > a::before,
#page-menu > a::after{transition:.3s ease-in-out;}

#page-menu{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:3;}

#page-menu > a{
display:block;
position:absolute;
top:calc(50% - 50px);
width:50px;
height:100px;
background-color:#000;}

#page-menu > a:first-child{left:0;}
#page-menu > a:last-child{right:0;}

#page-menu > a::before{
display:block;
position:absolute;
top:calc(50% - 12px);
content:"";
width:24px;
height:24px;
transform:rotate(45deg);
z-index:4;}
#page-menu > a:first-child::before{left:20px; border-bottom:2px solid #fff; border-left:2px solid #fff;}
#page-menu > a:last-child::before{right:20px; border-top:2px solid #fff; border-right:2px solid #fff;}
#page-menu > a:first-child:hover::before{left:15px;}
#page-menu > a:last-child:hover::before{right:15px;}

@media screen and (max-width:640px){
#page-menu > a{width:30px; height:60px; top:calc(50% - 30px);}
#page-menu > a::before{top:calc(50% - 10px); width:20px; height:20px;}
#page-menu > a:first-child::before{left:10px;}
#page-menu > a:last-child::before{right:10px;}
#page-menu > a:first-child:hover::before{left:7px;}
#page-menu > a:last-child:hover::before{right:7px;}}

@media screen and (max-width:480px){
#page-menu > a{height:40px; top:calc(50% - 20px);}}

/*
================================================================================================================
タブ切替
================================================================================================================
*/
#tab-menu{
display:flex;
position:relative;
width:90%;
height:50px;
max-width:980px;
color:#fff;
background-color:#000;
line-height:50px;
font-size:20px;
font-weight:700;
margin:-25px auto;
justify-content:space-between;
z-index:3;}
#tab-menu p{position:relative; width:calc(50% - 5px); background-color:#000; overflow:hidden;}
#tab-menu p > span{display:block;}
#tab-menu p:hover{cursor:pointer;}

/*オンマウス下線*/
#tab-menu p::after{
display:block;
content:"";
width:100%;
height:1px;
position:absolute;
left:0;
bottom:0;
background-color:rgba(0,0,0,0);
transition:.2s ease;}
#tab-menu p:hover::after,
#tab-menu p.tab-select::after{height:3px;}

/*オンマウス三角*/
#tab-menu > p::before{
display:block;
content:"▲";
width:100%;
position:absolute;
color:rgba(0,0,0,0);
left:0;
bottom:-26px;
font-size:11px;
text-align:center;
transform:skewX(20deg) scaleX(1.5) scaleY(.5);
transition:.2s ease;
z-index:3;}
#tab-menu > p:hover::before,
#tab-menu > p.tab-select::before{bottom:-16px;}

@media screen and (min-width:481px){
#tab-menu{transform:skewX(-20deg);}
#tab-menu p > span{transform:skewX(20deg);}}

@media screen and (max-width:480px){
#tab-menu{width:100%; height:40px; line-height:40px; font-size:15px; margin:-20px auto;}
#tab-menu p:hover::after,#tab-menu p.tab-select::after{height:2px;}
#tab-menu > p:hover::before,#tab-menu > p.tab-select::before{bottom:-13px;}}

/*
================================================================================================================
プロフィール
================================================================================================================
*/
.tab-inner{background-color:#222; padding:60px 20px 40px;}

#profile{color:#fff; font-family:'Noto Sans JP', sans-serif;}
#profile dl{width:100%; max-width:980px; text-align:left; margin:0 auto;}
#profile dd:nth-child(odd){font-size:17px; font-weight:700; padding-left:10px; margin:30px auto 10px;}
#profile dd:first-child{margin:0 auto 5px;}
#profile dd:nth-child(even){font-size:14px; line-height:180%;}

@media screen and (max-width:480px){
.tab-inner{padding:50px 10px 30px;}
#profile.tab-inner{padding:50px 20px 30px;}
#profile dd:nth-child(odd){font-size:15px;}
#profile dd:nth-child(even){font-size:12px;}}

/*
================================================================================================================
Twiiterシェア
================================================================================================================
*/
#member #sns-area{min-height:330px;}
#member #sns-area > .inner{padding:25px 0 40px 20px;}
#member #sns-area > .inner > p > span > span:last-child{display:inline-block; padding-left:5px;}
#member #sns-area > .inner > p > span > span:first-child{display:block; font-size:20px; margin-bottom:5px;}
#member #sns-area > .inner > p > span > span:not(:first-child){font-size:22px;}
@media screen and (max-width:800px){
#member #sns-area{min-height:260px;}
#member #sns-area > .inner > p > br{display:block;}}
@media screen and (max-width:480px){
#member #sns-area{min-height:200px;}
#member #sns-area > .inner > p > span{font-size:24px;}
#member #sns-area > .inner > p > span > span:first-child{font-size:15px;}
#member #sns-area > .inner > p > span > span:not(:first-child){font-size:18px;}}
@media screen and (max-width:370px){#member #sns-area{background-position:top -30px right -250px;}}

@media screen and (max-width:640px){#team.team-tt #member #sns-area > .inner > p > span > span:first-child{font-size:13px !important; margin-bottom:0 !important;}}
@media screen and (max-width:480px){#team.team-tt #member #sns-area > .inner > p > span > span:first-child{font-size:11px !important;}}

/*選手表示エリア*/
#member #sns-area::before{background-size:auto 180%; background-position:top -30px right 20%;}
@media screen and (max-width:1200px){#member #sns-area::before{background-position:top -30px right -250px;}}
@media screen and (max-width:640px){#member #sns-area::before{background-position:top -30px right -220px;}}
@media screen and (max-width:480px){#member #sns-area::before{min-height:200px; background-position:top -30px right -200px;}}
@media screen and (max-width:370px){#member #sns-area::before{background-position:top -30px right -220px;}}