/* 全体に適用 */
html { 
    font-size: 18px; /* PCでの基準サイズ */
}

body {
    font-family: 'EnBoldFont', 'Hiragino Sans', 'メイリオ', sans-serif;
    margin: 0;
    padding: 20px;
    font-size: 1.0rem; /* 16px */
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-size: 1.0rem; 
}

h1 {
    margin: 30px 0 10px;
    padding: 0px 6px;
    font-size: 1.3rem; 
    color: green;
    text-align: center;
    border-bottom: 1px solid gray;
}

h2 {
    margin: 30px 0 10px;
    padding: 6px;
    font-size: 1.3rem; 
    color: green;
    line-height: 120%;
    text-indent: 1rem;
    border-bottom: 1px solid gray;
}

h3 {
    margin: 28px 0 10px;
    padding: 5px 0 5px 16px;
    border: 1px solid dimgray;
    border-radius: 4px;
    background: #f8f8f8;
    font-size: 1.15rem; 
}

h4 {
    margin: 28px 0px 6px 0px;
    font-size: 1.0rem; /* 16px */
    font-weight: 800;
}

p {
    line-height: 150%;
    text-indent: 1rem;
}

section::after {
    content: "";
    display: block;
    clear: both;
}

.figure-left {
    float: left;
    width: 45%;
    max-width: 350px;
    padding: 10px 6px;
}

.figure-right {
    float: right;
    width: 45%;
    max-width: 350px;
    padding: 10px 6px;
}

.figure-left  img,
.figure-right img {
    width: 90%;
    height: auto;
    display: block;
    border: 1px solid #ccc;
}

.caption {
    text-align: center;
    font-size: 85%;
    margin-top: 4px;
}

.author {
    width: 100%;
    text-align: right;
}

a {
    color: steelblue;
    text-decoration: none;
}
a:hover {
    color: tomato;
}

/* スマホ表示 */
@media (max-width: 800px) {
    /* ★ここを追加★ */
    html {
        font-size: 16px; /* スマホで全体が一括で小さくなります */
    }

    /* ★ここを追加：外側の余白を最小限にする★ */
    body,
    .container {
        padding: 0 10px;
    }
    .figure-left,
    .figure-right {
        float: none !important;
        display: block;
        width: auto;
        max-width: none;
        margin: 0 0 1em 0;
    }
    .figure-left img,
    .figure-right img {
        display: block;
        width: 100%;
        height: auto;
    }
}
