/*=====================
キービジュアル
=====================*/
#key{
    background-image: url(../../img/key.jpg);
    height: 80vh;
    background-size: cover;
    background-position: center center;
}

#key .sp{
    display: none;
}
#key > div{
    display: table;
    width:100%;
    max-width:1000px;
    height: 80vh;
}
#key > div .pc{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#key > div .pc p{
    background-color: rgba(247,114,55,0.5);
    display: inline-block;
    color: #fff;
    font-size: 4.6rem;
    line-height: 1.5;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    padding:46px;
}
#key > div .pc p span{
    font-size:2.1rem;
}

@media screen and (max-width:768px){
    #key .sp{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    #key .sp img{
        display: inline-block;
    }
    #key > div .pc{
        display: none;
    }
}

/*=====================
スクロール
=====================*/
#scroll{
    text-align: center;
    line-height: 1;
    margin-top: 40px;
}

#scroll span{
    border: 1px solid #707070;
    border-radius: 100px;
}

/*===================
メイン
=====================*/
main.top_main .row{
    padding-top:70px;
    padding-bottom:70px;
}


/*===================
トップCHALONについて
=====================*/
main.top_main h2 + p{
    max-width:600px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}

/*===================
トップメニュー
=====================*/
#top_menu div div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}
#top_menu div div a{
    display: block;
    width:20.5%;
    text-align: center;
}

@media screen and (max-width:768px){
    #top_menu div div a{
        width:48%;
        margin-bottom: 20px;
    }
}

@media screen and (max-width:430px){
    #top_menu div div a{
        width:80.59701492537313%;
        margin-left: auto;
        margin-right: auto;
    }
}

/*===================
トップメニュー
=====================*/
#top_lesson{
    background-color: rgba(247,114,55,0.4);
}


#top_lesson div div{
    display: flex;
    margin-bottom: 30px;
}

#top_lesson div div p:first-child{
    width:40%;
    margin-right: 20px;
}

@media screen and (max-width:768px){
    #top_lesson div div{
        flex-direction: column;
    }
    #top_lesson div div p:first-child{
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 20px;
    }
}
@media screen and (max-width:430px){
    #top_lesson div div p:first-child{
        width: 100%;
    }
}

/*===================
トップbottom_contents 共通
=====================*/
.bottom_contents section{
    width: 48%;
}

.bottom_contents > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media screen and (max-width:768px){
    .bottom_contents section{
        width: 100%;
    }
    .bottom_contents > div{
        flex-direction: column;
    }
}
/*===================
トップ参加者の声
=====================*/
#top_voice dl{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

#top_voice dl dt{
    width:35%;
}

#top_voice dl dd{
    width:60%;
    line-height: 1;
}

#top_voice dl dd p:first-child{
    font-size: 1.2rem;
}

#top_voice dl dd p:nth-child(2){
    margin-bottom: 10px;
}

#top_voice dl dd p:nth-child(3){
    line-height: 1.5;
}

@media screen and (max-width:768px){
    #top_voice{
        margin-bottom: 140px;
    }
    #top_voice dl dt,
    #top_voice dl dd{
        width: 100%;
    }
    #top_voice dl dt{
        margin-bottom: 15px;
    }
    #top_voice dl dt img{
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width:430px){
    #top_voice dl{
        flex-direction: column;
    }
}

/*===================
トップお知らせ
=====================*/
#top_info dl{
    line-height: 1;
    margin-bottom: 15px;
}
#top_info dl:last-of-type{
    margin-bottom: 30px;
}

#top_info dl dt{
    font-size:1.2rem;
    margin-bottom: 5px;
}
#top_info dl dt span{
    background-color: #f77237;
    color: #fff;
    display: inline-block;
    padding:3px;
    margin-left: 5px;
}