/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2022/01/30, 17:26:35
    Author     : user01
*/

.wrapFlex{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 6px 12px; /* 余白 */
}
/* スマホ表示 */
@media (max-width: 768px) {
    .wrapFlex{
        justify-content: center;
        gap: 6px 4px; /* 余白 */    
    }
}
.par{
    display: flex;
    background-color: #fff;
    flex-direction: column;
    width: 10%;
    text-align: center;
}

.racer_pic {
    width: 100%;
}

/* スマホ表示 */
@media (max-width: 768px) {
    .par{
        display: flex;
        background-color: #fff;
        flex-direction: column;
        width: 28%;
        text-align: center;
    }
    .racer_pic {
        width: 90%;
    }
    .racer_pic img{
        width: 90%;
    }
    
}

.parent {
  display: flex;
}
.par .toban{
    flex:1;
    font-size: 0.9rem;
    color: #008ee8;
}
.par .class{
    width: 42%;
    margin-left: 2px;
    font-size: 0.9rem;
}
.class_A1{
    background-color: #FCC9D0;     
}
.class_A2{
    background-color: #FFBC79; 
}
.class_B1{
    background-color: #7cc4e7; 
}
.class_B2{
    background-color: #C6ECC6; 
}
.toban span,
.class span{
    font-size: 0.5rem;
}
.par .name{
    width: 100%;
    max-height: 50px;
    font-weight:900;
    
}

.btnFlex{
    display: flex;
    margin-bottom: 10px;
}
/* スマホ表示 */
@media (max-width: 768px) {
    .btnFlex{
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
    }
}
.btn_class{
    display: block;
    width: 4rem;
    text-align: center;
    border:#000 1px solid;
    border-radius: 4px;
}
.btn_class_list{
    display: block;
    width: 15rem;
    text-align: center;
    border:#000 1px solid;
    border-radius: 4px;
    margin-left: 17px;
}
/* スマホ表示 */
@media (max-width: 768px) {
    .btn_class{
        width: 3.5rem;
        font-size: 0.9rem;
    }
}

#a1{
    background-color: #fff;     
    border:#FCC9D0 2px solid;
    border-radius: 4px;
}
#a2{
    background-color: #fff;     
    border:#FFBC79 2px solid;
    border-radius: 4px;
}
#b1{
    background-color: #fff;     
    border:#7cc4e7 2px solid;
    border-radius: 4px;
}
#b2{
    background-color: #fff;     
    border:#C6ECC6 2px solid;
    border-radius: 4px;
}
#month_schedule{
    background-color: #C6ECC6;     
    border:#C6ECC6 2px solid;
    border-radius: 4px;
}
@media (max-width: 768px) {
    .btn_class{
        width: 25%;
        font-size: 0.9rem;
    }
    .btn_class_list{
        display: block;
        width: 95%;
        text-align: center;
        border:#000 1px solid;
        margin: 0 auto;
    }    
}