@charset "utf-8";

/* ==================================================================

    trainer.css

=================================================================== */

#intro{
    padding-bottom: 0;
}

.contents main > section .nStyle.more a {
    width: 358px;
    max-width: 100%;

    @media only screen and
    (max-width : 767px) {
        width: 100%;
    }
}

/* --------------------------------
navigation
-------------------------------- */ 

main .navigation{
    border-top: 1px solid #989898;
    padding-top: 48px;
    margin-bottom: 140px;

    @media only screen and
    (max-width : 767px) {
        margin-bottom: 12vw;
    }

    .grid_box{
        @media only screen and
        (max-width : 767px) {
            gap: 20px;
        }

        .buttonStyle{
            a{
                width: 80%;

                @media only screen and
                (max-width : 767px) {
                    width: 100%;
                }
            }
            
        }
    }
}


/* --------------------------------
trainerListBox
-------------------------------- */ 

.contents main 
.trainerListBox{

    .trainerList{
        margin-top: 42px;

        li{
            a{
                transition: opacity 0.3s;
                display: block;
                text-decoration: none;
                color: #333;
                figure{
                    .image{
                        margin-bottom: 10px;
                        img{
                            width: 100%;
                            height: auto;
                            border-radius: 16px;
                        }
                    }
                    figcaption{
                        .status{
                            font-size: 1.2rem;
                            line-height: 1.4;
                            margin-bottom: 0;
                        }
                        .name{
                            margin-top: 4px;
                            font-size: 1.8rem;
                            line-height: 1.4;
                        }
                    }
                }

                &:hover{
                    opacity: 0.8;
                }
            }
        }
    }

    & + .trainerListBox{
        margin-top: 70px;
    }

    & + .locationBox  {
        margin-top: 120px;
    }

    .moreBtn{
        margin-top: 20px;
        & + .trainerList{
            margin-top: 10px;
        }
    }
}


.trainerListBox .comingSoon{
    font-size: 2.4rem;

    @media screen and
    (max-width : 767px) {
        font-size: 1.8rem;
    }
}