@charset "utf-8";

.tabWrap{
    background: var(--color-text);
}

.tabList{
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 40px;
    display: flex;
    gap:25px;
}

.tabList li{
    width: calc(50% - 12.5px);
}

.tabList li button{
    background: var(--color-text);
    color: var(--color-bg);
    border: 2px solid var(--color-bg);
    font-size: 1.25rem;
    border-radius: 4px;
    height: 52px;
    width: 100%;
    display: inline-block;
    text-align: center;
    font-family: "Roboto Condensed", sans-serif;
    transition: all 0.3s ease;   
}

.tabList li.on button{
    background: var(--color-green01);
    color: var(--color-text);
}

.tabList li button span{
    font-family: "Noto Sans JP", sans-serif;      
}

.tabList li button span:before{
    content: "/";
    font-family: "Noto Sans JP", sans-serif;    
    padding: 0 5px;
}

.playersPosition{
    padding: 60px 0;
    background: var(--color-green01);
}

.playersPosition h3{
    color: var(--color-text);
}

.playersPosition h3:before{
    background: var(--color-bg);
}

.playersPositionInner{
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
}

.playersPositionList{
    max-width: 1200px;
    margin: 0 auto;
    display:grid;
    grid-template-columns: 12.5% repeat(5, 1fr);
    gap:12px;
}

.playersPositionList .all{
    grid-row:1 / 3;
    grid-column:1;
}

.playersPositionList button{
    background: var(--color-text);
    color: var(--color-bg);
    border: 2px solid var(--color-bg);
    font-size:1.25rem;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    font-family: "Roboto Condensed", sans-serif;
    transition: all 0.3s ease; 
}

.playersPositionList li:not(.all) button{
    height: 50px;
}

.playersPositionList li.on button{
    background: var(--color-lightpurple01);
}

.playersPositionList li button span{
    font-size:1.0625rem ;
    font-family: "Noto Sans JP", sans-serif;    
}

.playersPositionList li button span:before{
    content: "/";
    font-size:1.25rem ;
    font-family: "Noto Sans JP", sans-serif;    
    padding: 0 5px;
}

.playersList,
.staffList{
}

.playersListInner,
.staffListInner{
    max-width:  1280px;
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    gap:20px 1.1%;
    flex-wrap: wrap;
}

.playersListInner > *,
.staffListInner > *{
    width: calc((100% - (1.1% * 3)) / 4);
    max-width: 290px;
    position: relative;
}

.playersListInner .normal {
  display: block;               
  width: 100%;
  height: auto;
  opacity: 1;                    
  transition: opacity 0.3s ease; 
}

.playersListInner .hover {
  display: block;            
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;                   
  transition: opacity 0.3s ease;
}

.playersListInner > div:hover .normal {
  opacity: 0;
}

.playersListInner> div:hover .hover {
  opacity: 1;
}

.playersListInner .playersEmpty{
    padding: 200px 0 100px;
    text-align: center;
    font-size: 1.5rem;
    width: 100%;
    max-width: inherit;
}


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

    .tabList{
        padding:  calc(38vw / 7.5)  calc(40vw / 7.5);
        gap: calc(15vw / 7.5);
    }

    .tabList li{
        width: calc(50% - calc(15vw / 7.5));
    }

    .tabList li button{
        font-size: calc(30vw / 7.5);
        height:  calc(90vw / 7.5);
    }

    .tabList li button span{
        font-size:calc(34vw / 7.5);
    }

    .tabList li button span:before{
        font-size:calc(34vw / 7.5);
        padding: 0;
    }

    .playersPosition{
        padding: calc(50vw / 7.5) 0 calc(70vw / 7.5);
    }    

    .playersPosition .playersPositionInner {
        padding:0 calc(40vw / 7.5);
    }    

    .playersPositionWrap{
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .playersPositionWrap::after{
        content: "▼";
        position: absolute;
        top: 50%;
        right: calc(26vw / 7.5);    
        transform: translateY(-50%);
        font-size:calc(24vw / 7.5);    
        pointer-events: none;
        color:var(--color-bg);
    }

    .playersPositionWrap #playersPositionSelect{
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        padding:  calc(25vw / 7.5) calc(50vw / 7.5) calc(25vw / 7.5) calc(30vw / 7.5);
        font-size:  calc(30vw / 7.5);    
        color:var(--color-bg);
        background: var(--color-text);
        border: 2px solid  var(--color-bg);
        border-radius: 4px;
        line-height: 1;
        cursor: pointer;
    }

    .playersListInner,
    .staffListInner{
        padding: calc(80vw / 7.5) calc(40vw / 7.5) 0;    
        gap:calc(45vw / 7.5) calc(15vw / 7.5);
    }

    .playersListInner > *,
    .staffListInner > *{
        width: calc(50% - calc(8vw / 7.5));
        max-width: inherit;
    }

    .playersListInner .playersEmpty{
        padding: calc(150vw / 7.5) 0 calc(100vw / 7.5);
        font-size: calc(30vw / 7.5);
    }

}