.font-large {
    font-size: 4rem;
}
.font-middle {
    font-size: 1rem;
}
@media screen and (min-width:400px) and ( max-width:767px) {
    /*　画面サイズが320pxからはここを読み込む　*/
    .font-large {
        font-size: 5rem;
    }
    .font-middle {
        font-size: 2rem;
    }

}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
    .font-large {
        font-size: 10rem;
    }
    .font-middle {
        font-size: 3rem;
    }
}
@media screen and (min-width:1025px) {
    /*　画面サイズが1024pxからはここを読み込む　*/
    .font-large {
        font-size: 12rem;
    }
    .font-middle {
        font-size: 4rem;
    }

}