body {

    background-color: azure;
}



.wlink {
    margin-bottom: 8px;
}

nav {
    width: 250px;
    padding: 15px 15px;

}

.third {
    width: 1536px;
    border: 6px inset brown;
    background-color: white;
    color: black;
    text-align: left;
    margin: auto;


}


.first {
    float: left;
}

.second2 {
    width: 250px;
    color: brown;

}

section {
    width: 800px;
}

.second {
    width: 800px;
    border: 6px inset brown;
    background-color: white;
    color: black;
}

h1 {
    border: 6px inset brown;
    width: 800px;
    background-color: white;
    color: black;
}

.writing {
    color: navy;
    font-size: medium;

}

.writings {
    color: navy;
    font-size: medium;


}

/* スマホ対応（メディアクエリ） */
@media screen and (max-width: 1100px) {
    body {
        margin: 0;
        padding: 10px;
    }

    .third {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 10px auto;
    }

    /* flexコンテナの方向を縦にする */
    div[style*="display: flex;justify-content: center;"],
    div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* ナビゲーションの幅を100%にしてフロートを解除し、Flexboxで横並びに対応 */
    nav.first {
        float: none !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px 2% !important;
    }

    .second2 {
        width: 100% !important;
        box-sizing: border-box;
        margin-top: 15px !important;
        margin-bottom: 8px !important;
    }

    /* メインコンテンツの幅を100%にしてフロートを解除 */
    article.first {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    section {
        width: 100% !important;
        box-sizing: border-box;
    }

    .second, h1 {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* リンクのタップしやすさ（スマホ対応）の向上と横4並び設定 */
    .wlink {
        width: 23.5% !important;
        margin-bottom: 8px !important;
    }

    .wlink br {
        display: none !important;
    }

    .wlink a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 110px;
        padding: 6px 2px !important;
        font-size: 14px !important;
        background-color: #ffffff;
        border: 1px solid brown;
        border-radius: 6px;
        text-decoration: none;
        color: navy;
        box-sizing: border-box;
        text-align: center;
        line-height: 1.3;
        word-break: break-all;
        transition: background-color 0.2s, color 0.2s;
    }

    .wlink a:hover, .wlink a:active {
        background-color: brown;
        color: white;
    }
}