@media screen and (max-width: 768px) and (min-width: 431px) {

    /* =====================
       共通
    ===================== */
    html,
    body {
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* =====================
       ヘッダー
    ===================== */
    .site-header,
    .site-header__inner {
        position: relative;
    }

    .site-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: 12px;
        padding: 12px 16px;
    }

    h1.site-logo,
    p.site-logo {
        padding: 0;
        padding-top: 6px;
    }

    .site-logo img {
        display: block;
        width: auto;
        height: clamp(42px, 7vw, 56px);
    }
    .hamburger {
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .hamburger__bar {
        width: 34px;
        height: 2px;
        margin: 4px 0;
    }

}


@media screen and (max-width: 375px) {
    footer.site__footer .container p {
        font-size: 15px !important;
    }
}