@charset "UTF-8";

/*
--- 
---------------------------------------------------------------------------*/
#gakugei .gard-wrapper{
    background: linear-gradient(to right, rgb(255 235 207 / 50%), rgb(255 189 176 / 50%), rgb(255 176 200 / 50%));
}
#association .gard-wrapper{
    background: linear-gradient(to right, rgb(189 255 238 / 50%), rgb(227 255 208 / 50%), rgb(248 227 183 / 50%));
}

.club-info-wrapper {
    padding: 50px 0 0;
    margin-top: 30px;
}
.club-info-wrapper .gard-wrapper {
    padding: 20px 50px 30px;
}
.club-info-wrapper .title_en {
    margin-top: -50px;
}

.club-pickup-wrapper ,
.facilities-pickup-wrapper {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap; 
}
.club_img{
    position: relative;
}

.club_img::before {
    content: '';
    display: block;
    padding-bottom: 66.6%;
}

.club-pickup-wrapper img,
.facilities-pickup-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.club-pickup {
    flex-basis: calc(33.333% - 13.33px); 
    padding: 15px;
    background-color: #fff;
}

.facilities-pickup{
    flex-basis: calc(33.333% - 13.33px); 
}

.club-pickup h5,
.facilities-pickup h5 {
    color: #d8577a;
    text-align: center;
    margin-bottom: 10px;
    font-size: 2rem;
}

.facilities_text{
    font-size:14px; 
    color:#444; 
    word-wrap: break-word;
    padding: 10px;
    
}


@media only screen and (max-width: 1023px) {
    
}
@media only screen and (max-width: 833px) {
    .club-info-wrapper .gard-wrapper{
        padding: 20px 20px 30px;
    }
    
    .club-anchor-wrapper .anchor-wrapper{
        flex-wrap: nowrap;
    }
    .club-anchor-wrapper .anchor{
       width: calc(33.333% - 10px); 
    }
   .club-pickup ,
   .facilities-pickup {
    flex-basis: calc(50% - 10px);
} 
    
    
}
@media only screen and (max-width: 560px) {
   .club-pickup ,
   .facilities-pickup {
    flex-basis: calc(100%);
} 

}



/*
--- 
---------------------------------------------------------------------------*/

@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 833px) {
}
@media only screen and (max-width: 560px) {
}