@charset "utf-8";

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

/* ヘッダー高さ変数 */
body {
    --renew-header-h: 48px;
}

@media (min-width: 800px) {
    body {
        --renew-header-h: 80px;
    }
}

@media (min-width: 1200px) {
    body {
        --renew-header-h: 130px;
    }
}

/* コンテナ: 固定ヘッダー分の押し下げ */
body #container {
    padding-top: var(--renew-header-h);
}

/* ---------------------------------------------------------
   PC (≥1200px)
   --------------------------------------------------------- */
@media (min-width: 1200px) {
    body #gHeader {
        padding: 0 40px 0 32px;
    }

    body #gHeader .gNavi {
        margin-right: 0;
    }

    body #gHeader .gNavi ul.list01 {
        display: flex;
    }

    body #gHeader .gNavi>ul>li {
        margin: 0 24px 0 0;
    }

    body #gHeader .gNavi .subCont .subInner {
        justify-content: center;
    }
}

/* ---------------------------------------------------------
   1000-1199px: 圧縮PC段階をスキップ → モバイルメニュー表示
   親 layout.css が1000px+でPCナビを出すため、bodyでは上書き
   --------------------------------------------------------- */
@media (min-width: 1000px) and (max-width: 1199px) {

    /* --- ヘッダー: モバイルレイアウトに切り替え --- */
    body #gHeader {
        padding: 0 0 2px 9px;
    }

    body #gHeader h1 {
        width: 65px;
    }

    body #gHeader .rBox {
        margin: 0 67px 0 0;
    }

    body #gHeader .tList {
        margin: 4px 10px 0 0;
    }

    body #gHeader .tList li {
        margin-left: 4px;
    }

    body #gHeader .tList li a {
        padding: 0 5px;
    }

    /* PCナビ非表示 */
    body #gHeader .gNavi {
        display: none;
    }

    /* PCユーティリティリンク非表示 */
    body #gHeader .tList01 {
        display: none;
    }

    /* ハンバーガーボタン表示（親が1000px+で非表示にするため） */
    body #gHeader .menu {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
    }

    body #gHeader .topMenu {
        display: none;
    }

    body #gHeader .menu01 {
        display: block;
    }

    /* SPアイコン列表示 */
    body #gHeader .topLayout01 {
        display: block;
    }

    body #gHeader .topLayout01 .tList span {
        display: block;
    }

    /* --- menuBox: スライドインドロワー有効化 --- */
    /* 親が1000px+で display:none!important するため上書き必須 */
    body .menuBox {
        /* biome-ignore lint/complexity/noImportantStyles: 親が1000px+でdisplay:none!importantするため上書き必須 */
        display: block !important;
        padding: 95px 0 30px;
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        overflow-y: auto;
        z-index: 300;
        box-sizing: border-box;
        width: 40%;
        transform: translateX(100%);
        transition: transform 0.5s ease;
    }

    body .menuBox.on {
        transform: translateX(0);
    }

    body .menuBox .menu {
        position: absolute;
        top: 0;
        right: 0;
        bottom: auto;
    }

    body .menuBox .menuIcon {
        position: absolute;
        top: 4px;
        left: 15px;
        display: flex;
        align-items: center;
    }

    body .menuBox .gNavi {
        margin-right: 0;
        display: block;
    }

    body .menuBox .gNavi ul {
        display: block;
    }

    body .menuBox .back {
        display: none;
        margin: 17px 5px 0 4px;
    }

    body .menuBoxInner {
        display: none;
    }

    body .menuInner01 {
        display: block;
    }

    body .gNavi .subCont {
        display: block;
        position: static;
        width: auto;
    }

    body .gNavi .subCont .subInner {
        padding: 0;
        display: block;
    }

    /* --- カバーオーバーレイ --- */
    body .cover {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 101;
    }

    /* --- menuBox: フォーム / SNS / ロゴ --- */
    body .menuBox .menuForm {
        position: relative;
    }

    body .menuBox .snsList {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    /* メニュー開時のスクロールロック */
    body.fixed {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
    }
}