/* style.css */
/* bodyの背景色指定 */
body {
    background-color: gray;
}

/* contentクラスの横幅、背景色の指定 */
.content {
    width: 1000px;
    height: 400px;
    margin: auto;
    background-color: aqua;
    padding: 10px;
    border-radius: 5px;
}

/* 横幅に応じたルールの切り替え */
/* PC */
@media screen and (width > 1024px) {
    .content {
        width: 80%;
        background-color: coral;
    }
}

/* Tablet(768-1024) */
@media screen and (width <= 1024px) {
    .content {
        width: 90%;
        background-color: yellowgreen;
    }
}

/* mobile(<768) */
@media screen and (width < 768px) {
    .content {
        width: 95%;
        background-color: navy;
        /* 文字のサイズを1.5倍に */
        font-size: 1.5em;
    }
}