/* style.css */
/* bodyの背景色指定 */
body{
    background-color: darkslategrey;
}
/* contentクラスの横幅、背景色の指定 */
.content{
    width: 1000px;
    background-color: aliceblue;
    padding: 10px;
    border-radius: 10px;
    margin: auto;
}

/* 横幅に応じたルールの切り替え */
/* PC */
@media screen and (width > 1024px) {
    .content{
        width: 80%;
        background-color: rgba(240, 248, 255, 0.733);
    }
}
/* tablet */
@media screen and (width <= 1024px) {
    .content{
        width: 90%;
        background-color: rgba(240, 248, 255, 0.521);
    }
}

/* mobile(<768) */
@media screen and (width <= 768px) {
    .content{
        width: 95%;
        background-color: rgba(240, 248, 255, 0.349);
        /* 文字サイズ1.5倍 */
        font-size: 1.5em;
    }
}