@charset "UTF-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.container_ex {
    margin: 0 auto;
    padding: 20px;
}

.phy_sample {
    margin:auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width:80vw;
}

.item_ex {
    background-color: #f4f4f4;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /*font-size: 3px;*/
}

.item_ex p {
    line-height: 2.0;
    font-size: 1.0em;
}

/* PCスタイル */
@media (min-width: 840px) {
    .phy_sample {
        justify-content: space-between;
    }
    .item_ex:nth-child(odd) {
        flex: 0 0 calc(33.333% - 20px); /* 質問用 */
    }
    .item_ex:nth-child(even) {
        flex: 0 0 calc(66.666% - 20px); /* 回答用 */
    }
}

/* タブレットスタイル */
@media (max-width: 840px) and (min-width: 451px) {
     .container_ex {
        margin: 0 10px; /* 左右に余白を設定 */
        padding: 10px;
        width:77vw;
    }
    .phy_sample {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width:90vw;
    }
    .item_ex {
        flex: 1 100%;
    }
    .item_ex p {
        line-height: 1.8;
        font-size: 0.8em;
    }
}

/* スマホスタイル */
@media (max-width: 450px) {
    .container_ex {
        margin: 0 10px; /* 左右に余白を設定 */
        padding: 10px;
        
    }

    .phy_sample {
        justify-content: center; /* アイテムを中央に寄せる */
        flex-direction: column;
        gap: 10px;
        width:90vw;
    }

    .item_ex {
        padding: 10px;
        margin: 0 auto; /* アイテムを中央に寄せる */
    }

   .item_ex p {
    line-height: 1.8;
    font-size: 0.7em;
}
}