@charset "utf-8";

/* =========================================================
   フッターレイアウト上書き (サステナビリティ / sustainability)
   - layout.css の後に読み込み
   ========================================================= */

/* ---------------------------------------------------------
   PC (≥800px: 親がPCレイアウトに切り替え)
   --------------------------------------------------------- */
@media (min-width: 800px) {
    body #gFooter .inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        box-sizing: border-box;
    }

    /* tBox: Grid化 */
    body #gFooter .naviBox .tBox {
        display: grid;
        grid-template-columns: repeat(auto-fill, 220px);
        justify-content: center;
        margin: 0;
    }

    body #gFooter .naviList {
        margin-right: 0;
    }

    body #gFooter .naviList li {
        width: 184px;
    }
}

/* ---------------------------------------------------------
   共通 (全幅): txtBox / bBox
   --------------------------------------------------------- */
body #gFooter .txtBox {
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
}

body #gFooter .txtBox .logo {
    margin-left: -5px;
    /* logo左右余白でズレて見える対策。 */
}

body #gFooter .naviBox .bBox {
    margin: 0 auto;
    margin-top: 32px;
    max-width: 1100px;
    width: 100%;
}

/* ---------------------------------------------------------
   PC段階幅
   1163-940px: 880上限 / 939-800px: 660上限
   --------------------------------------------------------- */
@media (min-width: 940px) and (max-width: 1163px) {
    body #gFooter .txtBox {
        max-width: 880px;
    }

    body #gFooter .naviBox .bBox {
        max-width: 880px;
    }
}

@media (min-width: 800px) and (max-width: 939px) {
    body #gFooter .txtBox {
        max-width: 660px;
    }

    body #gFooter .naviBox .bBox {
        max-width: 660px;
    }
}

/* ---------------------------------------------------------
   pagetop (親の .pagetop 位置調整)
   --------------------------------------------------------- */

body #gFooter .pagetop {
    right: 32px;
    bottom: 120px;
}

@media (min-width: 550px) {
    body #gFooter .pagetop {
        right: 64px;
        bottom: 100px;
    }
}

@media (min-width: 800px) {
    body #gFooter .pagetop {
        right: 56px;
        bottom: 80px;
    }
}   

@media (min-width: 1200px) {
    body #gFooter .pagetop {
        right: 140px;
        bottom: 64px;
    }
}

/* ---------------------------------------------------------
   モバイル (<800px): navi単位で横並び2列
   --------------------------------------------------------- */
@media (max-width: 799px) {
    /* tBox: flex 2列 */
    body #gFooter .naviBox .tBox {
        display: flex;
        flex-wrap: wrap;
        gap: 0 24px;
        margin: 0 auto;
        max-width: 424px;
    }

    /* navi: 2列の1つ分 */
    body #gFooter .tBox .navi {
        width: calc(50% - 12px);
        margin-bottom: 36px;
    }

    /* inner01: 親の横並び(flex) + インデント(margin:0 10px) を解除 */
    body #gFooter .inner01 {
        display: block;
        margin: 0;
    }

    /* naviList: 親の width:42.9% を解除 → 縦1列 */
    body #gFooter .naviList {
        width: 100%;
    }

    /* bBox: tBox と左端揃え */
    body #gFooter .naviBox .bBox {
        max-width: 424px;
        margin: -12px auto 36px;
    }

    /* navi--wide: 2列占有 (14項目等 → naviList横並び) */
    body #gFooter .tBox .navi--wide {
        width: 100%;
    }

    body #gFooter .navi--wide .inner01 {
        display: flex;
        gap: 24px;
    }

    body #gFooter .navi--wide .naviList {
        width: calc(50% - 12px);
    }
}