@charset "UTF-8";

.club-list{display: flex; flex-wrap: wrap; margin-bottom: 50px; justify-content: space-between;}
.club-list > li{cursor: pointer; width: 150px; display: table; height: 153px; position: relative;}
.club-list > li:nth-child(1){background: url(../images/tab_background_1.png) no-repeat center center / cover;}
.club-list > li:nth-child(2){background: url(../images/tab_background_2.png) no-repeat center center / cover;}
.club-list > li:nth-child(3){background: url(../images/tab_background_3.png) no-repeat center center / cover;}
.club-list > li:nth-child(4){background: url(../images/tab_background_4.png) no-repeat center center / cover;}
.club-list > li:nth-child(5){background: url(../images/tab_background_5.png) no-repeat center center / cover;}
.club-list > li:nth-child(6){background: url(../images/tab_background_6.png) no-repeat center center / cover;}
.club-list > li:nth-child(7){background: url(../images/tab_background_7.png) no-repeat center center / cover;}
.club-list > li .club-list-box{display: table-cell; vertical-align: middle; text-align: center;}
.club-list > li b{font-family: "Noto Medium"; font-size: 20px; color: white; padding-bottom: 10px; position: relative; display: inline-block; letter-spacing: -.05em;}
.club-list > li b::after{content:""; display: block; position: absolute; left: 50%; bottom: 0; width: 32px; height: 2px; background-color: rgba(255,255,255,.5); transform: translateX(-50%);}
.club-list > li ul{margin-top: 8px; padding: 0 10px 0 20px;}
.club-list > li li{font-family: "Noto Regular"; font-size: 14px; color: white; padding-left: 10px; position: relative; text-align: left; letter-spacing: -.05em;}
.club-list > li li::before{content:""; display: block; position: absolute; left: 0; top: 8px; width: 2px; height: 2px; background-color: white;}
.club-list > li._on::before{content:""; display: block; position: absolute; left: 0; bottom: -20px; width: 100%; height: 2px; background-color: #ff7e00;}

@media all and (max-width: 1120px) {
    .club-list > li{width: calc(100%/3); height: auto; border-radius: 5px; padding: 10px 0; border: 1px solid white}
    .club-list > li._on::before{width: 100%; height: 100%; left: 0; bottom: 0; background-color: transparent; border: 4px solid #ff7e00;}
    .club-list > li:nth-child(1){background: #996515;}
    .club-list > li:nth-child(2){background: #daa520;}
    .club-list > li:nth-child(3){background: #d4af37;}
    .club-list > li:nth-child(4){background: #013c8a;}
    .club-list > li:nth-child(5){background: #3068be;}
    .club-list > li:nth-child(6){background: #22afcb;}
    .club-list > li:nth-child(7){background: #00ac97;}
    .club-list > li ul{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
    .club-list > li li::before{left: 4px;}
    .club-list > li li:first-child::before{display: none;}
    .club-list > li b{padding-bottom: 0;}
    .club-list > li b::after{display: none;}
    .club-list > li ul{margin-top: 5px;}
}

@media all and (max-width: 768px) {
    .club-list > li{width: 50%;}
}