img {
    display: block;
    width: 100%;
    height: auto;
}

#section-faq1 p,
#section-faq2 p {
    font-weight: 600;
}
#section-faq1 p:first-child,
#section-faq2 p:first-child {
    color: #de2e43;
}

#section-faq1 .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow,
#section-faq2 .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
    border: 2px Solid rgb(109, 157, 133);
}

/* 共通のレスポンシブ修正 */
.wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
}

#header01 {
    background-color: #75a38b;
}

#header01 .container {
    width: 100%;
    max-width: 100rem;
    min-height: 55rem;
    margin-top: 5rem;
}

/* PC向けの個別調整 */
@media screen and (min-width: 769px) {
    /* business1の3要素を横並び維持 */
    #section-business1 .wp-block-columns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    /* 2026-06-11 追加: business1の構造に合わせた詳細設定 */
    #section-business1 .mainjson > .wp-block-columns > .wp-block-column {
        flex: 1 !important;
        margin: 0 15px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* 3番目の要素を右寄せ＆間隔調整 */
    #section-business1 .wp-block-column:nth-child(3) {
        justify-content: flex-end !important;
    }

    /* 2番目の要素（バナーボックス）の調整 - PCでも横並び2列にする */
    #section-business1 .wp-block-columns.bnrbox {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        margin-top: 20px !important;
    }

    #section-business1 .wp-block-columns.bnrbox .wp-block-column {
        width: 50% !important;
        flex: 0 0 50% !important;
        margin: 0 5px !important;
    }
    #section-business1
        .wp-block-columns.bnrbox.is-layout-flex.wp-container-core-columns-is-layout-f56f613f.wp-block-columns-is-layout-flex,
    #section-business1
        .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
        padding: 0;
    }
    #section-business1
        .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow
        .shopbnr
        img {
        width: 100%;
        margin: 10px auto;
    }

    /* FAQの幅をPCでも統一 */
    #section-faq1 .wp-block-column,
    #section-faq2 .wp-block-column,
    #section-faq1 .mainjson > div > div > div,
    #section-faq2 .mainjson > div > div > div {
        width: 100% !important;
        max-width: 920px !important;
        margin: 10px auto 50px !important;
        display: block !important;
        flex-basis: 100% !important;
        float: none !important;
    }
}

@media screen and (max-width: 768px) {
    /* セクションごとの修正 */
    #section-business1
        .wp-block-columns.is-layout-flex.wp-block-columns-is-layout-flex {
        justify-content: center;
    }

    #section-business1 .wp-block-column {
        width: 100% !important;
        margin-bottom: 20px !important;
        display: block !important;
    }

    /* バナーボックス（bnrbox）だけはスマホでも横並び（2列）を維持 */
    #section-business1 .wp-block-columns.bnrbox {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    #section-business1 .wp-block-columns.bnrbox .wp-block-column {
        width: 50% !important;
        margin: 0 5px !important;
        flex-basis: 50% !important;
    }

    #section-business1
        .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow
        .shopbnr
        img {
        max-height: 130px;
        max-width: 300px;
        width: 80%;
        margin: 10px auto;
    }

    /* FAQの幅を統一 */
    #section-faq1 .wp-block-column,
    #section-faq2 .wp-block-column,
    #section-faq1 .mainjson > div > div > div,
    #section-faq2 .mainjson > div > div > div {
        margin: 10px auto !important;
        width: 95% !important;
        max-width: none !important;
        display: block !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    #section-purchase-example1
        .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
        width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
    }

    #section-aboutus1 table {
        width: 95% !important;
        margin: 10px auto !important;
    }

    #section-aboutus1 table th {
        width: 30% !important;
        min-width: 80px;
    }

    /* 一般的なGutenbergカラムのスマホ対応 */
    .wp-block-columns.is-layout-flex {
        flex-direction: column !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*2026-06-11*/
    #header01-m {
        margin-top: 3.8rem;
    }

    #section-business1
        .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow
        img {
        width: 62%;
        height: 62%;
        margin: auto;
    }
    #section-business1 div {
        padding: 0;
    }
}

#section-purchase-example0,
#section-purchase-example1 {
    display: none;
}

@media (max-width: 500px) {
    .mbr-arrow-up {
        left: 0;
        right: 0;
        text-align: right;
    }
}

/* ヘッダーのレスポンシブ崩れ修正（ロゴとタイトルの回り込み防止） */
@media (max-width: 991px) {
    .navbar > .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .navbar-brand {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        padding-right: 0.5rem !important;
        margin-right: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .navbar-caption {
        font-size: 1.1rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .navbar-logo {
        flex-shrink: 0 !important;
        margin-right: 0.5rem !important;
    }
    .navbar-logo img {
        height: 2.2rem !important;
    }
    .navbar-toggler {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
}

/* ハンバーガーメニューが開いたときの挙動修正 */
@media (max-width: 991px) {
    /* メニューが開いているときもブランド（ロゴ・タイトル）を上部に固定 */
    .navbar.opened .navbar-brand,
    nav.opened .navbar-brand {
        position: absolute !important;
        top: 0 !important;
        left: 1rem !important;
        height: 70px !important;
        display: flex !important;
        align-items: center !important;
        z-index: 1001 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* メニュー項目をブランドの下から開始させる */
    .navbar.opened .navbar-collapse,
    nav.opened .navbar-collapse {
        padding-top: 70px !important; /* ヘッダーの高さ分下げる */
        background: #6d9d85 !important;
    }

    /* 閉じるボタン（ハンバーガー）も上部に固定 */
    .navbar.opened .navbar-toggler,
    nav.opened .navbar-toggler {
        position: absolute !important;
        top: 25px !important;
        right: 1rem !important;
        z-index: 1001 !important;
    }
    #header01 .container {
        width: 100%;
        display: block;
        min-height: 36px;
        margin-top: 4rem;
    }
}