/* フォント */
.keyboard-font {
    font-family: setofont-sp, sans-serif;
    font-weight: 400; 
    font-style: normal;
}
.keyboard-title {
    background: linear-gradient(transparent 65%, #68b6b187 65%); 
    font-size: 1.75rem;
}
.keyboard-strong {
    font-weight: bold;
    font-size: 20px;
}
.keyboard-mt {
    margin-top: 10%;
}
.keyboard-red {
    color: #cd4348;
}

/* ロゴ */
#pckatekyo-logo {
    width: auto;
}

/* タイトル */
#keyboard-title:first-letter {
    font-size: 130%;
    color: #00A99D;
}

/* リストアイコン */
.keyboard-list-li {
    width: 25px;
    padding-right: 10px;
}

/* こんな方向け */
#keyboard-recommendation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10em;
}
#keyboard-recommendation-item-01 {
    flex-basis: 45%;
    margin-top: 30px;
    margin-left: 100px;
}
#keyboard-recommendation-item-02 {
    flex-basis: 35%;
}

/* 女の子画像 */
#keyboard-girlimage {
    width: 300px;
    padding-top: 100px;
}

/* 先生について */
#keyboard-teacher {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10em;
}
#keyboard-teacher-item-01 {
    flex-basis: 30%;
    margin-top: 30px;
}
#keyboard-teacher-item-02 {
    flex-basis: 45%;
    margin-top: 50px;
}
#keyboard-sakai-img {
    width: 300px;
    padding-right: 50px;
    padding-top: 40px;
}

/* 料金表 */
#keyboard-price {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10em;
}
#keyboard-price-item {
    flex-basis: 80%;
    margin-top: 30px;
    margin-left: 100px;
}
#keyboard-price-img {
    width: 350px;
    margin-top: 30px;
}

/* 保護者様の声 */
#keyboard-parent-voice {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10em;
}
#keyboard-parent-voice-item {
    flex-basis: 80%;
    margin-top: 30px;
    margin-left: 100px;
}

/* 生徒さんの声 */
#keyboard-student-voice {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8em;
}
#keyboard-student-voice-item {
    flex-basis: 80%;
    margin-top: 30px;
    margin-left: 100px;
}

/* 点線のコメントの枠 */
.keyboard-comment-box {
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #ffffff78;/*背景色*/
    box-shadow: 0 0 0 8px #ffffff78;/*背景色外側*/
    border: 2px dashed #6b6b6b;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #000000;/*文字色*/
    line-height: 2;
}
.keyboard-comment-box p {
    margin: 0; 
    padding: 0;
}

/* Ｑ＆Ａ */
#keyboard-qa {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10em;
}
#keyboard-qa-item {
    flex-basis: 80%;
    margin-top: 30px;
    margin-left: 100px;
}
.keyboard-qa-contents {
    line-height: 2;
}


/*-------  スマホサイズ  ---------*/
@media screen and (max-width : 768px) {

    /* ロゴ */
    #keyboard-logo {
        width: 90%;
    }
    
    /* こんな方向け */
    #keyboard-recommendation-item-01 {
        flex-basis: 100%;
        margin-top: 0px;
        margin-left: 0px;
    }
    #keyboard-recommendation-item-02 {
        flex-basis: 100%;
        text-align: center;
        margin-top: 30px;
    }

    /* 女の子画像 */
    #keyboard-girlimage {
        padding-top: 15px;
        width: 300px;
    }

    /* 先生について */
    #keyboard-teacher {
        margin-top: 6em;
    }
    #keyboard-teacher-item-01 {
        flex-basis: 100%;
        margin-top: 100px;
    }
    #keyboard-teacher-item-02 {
        flex-basis: 100%;
        margin-top: 0px;
    }
    #keyboard-sakai-img {
        width: 300px;
    }

    /* 料金表 */
    #keyboard-price {
        margin-top: 6em;
    }
    #keyboard-price-item {
        flex-basis: 100%;
        margin-top: 100px;
        margin-left: 0px;
    }
    #keyboard-price-img {
        width: 300px;
    }

    /* 保護者様の声 */
    #keyboard-parent-voice {
        margin-top: 6em;
    }
    #keyboard-parent-voice-item {
        flex-basis: 100%;
        margin-top: 100px;
        margin-left: 0px;
    }

    /* 生徒さんの声 */
    #keyboard-student-voice {
        margin-top: 6em;
    }
    #keyboard-student-voice-item {
        flex-basis: 100%;
        margin-top: 100px;
        margin-left: 0px;
    }

    /* Ｑ＆Ａ */
    #keyboard-qa {
        margin-top: 6em;
    }
    #keyboard-qa-item {
        flex-basis: 100%;
        margin-top: 100px;
        margin-left: 0px;
    }


}