@charset "UTF-8";

/* --- 0. 根本的な突き抜け・横揺れ防止 --- */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
}

/* メニュー展開時の背面固定 */
body.nav-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* --- 1. ヘッダー全体 --- */
.new2026-layout {
    width: 100% !important;
    background: #ffffff !important;
    padding: 15px 0 !important;
    box-sizing: border-box !important;
}

/* --- 2. PC版（769px以上） --- */
@media screen and (min-width: 769px) {
    .new2026-layout .n26-header-inner {
        width: 100% !important;
        max-width: 1000px !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        display: grid !important;
        grid-template-columns: 190px 1fr !important;
        grid-template-rows: auto auto !important;
        column-gap: 30px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .new2026-layout .sp-only { display: none !important; }

    /* ロゴ・コピー・ナビ */
    .new2026-layout .n26-logo-col { grid-column: 1 / 2; grid-row: 1 / span 2; }
    .new2026-layout .n26-logo img { width: 190px; height: auto; display: block; }
    .new2026-layout .n26-copy-row { grid-column: 2 / 3; grid-row: 1 / 2; padding-bottom: 10px; }
    .new2026-layout .n26-copy-row img { max-width: 600px; width: 100%; height: auto; }
    .new2026-layout .n26-nav-row { grid-column: 2 / 3; grid-row: 2 / 3; overflow: visible !important; }

    .new2026-layout .n26-main-menu {
        display: flex !important;
        background-color: #82b366 !important;
        border-radius: 20px !important;
        list-style: none !important;
        padding: 0 10px !important;
        margin: 0 !important;
        align-items: center !important;
        height: 70px !important;
        box-sizing: border-box !important;
    }

    .new2026-layout .n26-menu-item {
        flex: 1 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }

    .new2026-layout .n26-menu-item::after {
        content: "" !important;
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 1px !important;
        height: 30px !important;
        background-color: rgba(255, 255, 255, 0.4) !important;
    }
    .new2026-layout .n26-menu-item:last-child::after { display: none !important; }

    .new2026-layout .n26-menu-item a,
    .new2026-layout .n26-menu-item .n26-label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        /*width: 100% !important;*/
        height: 100% !important;
        padding: 0 5px !important;
        color: #ffffff !important;
        font-weight: bold !important;
        text-decoration: none !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    /* PC版サブパネル（角丸なし） */
    .new2026-layout .n26-menu-item.has-sub:hover .n26-sub-panel { display: block !important; }
    .new2026-layout .n26-sub-panel {
        display: none;
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        min-width: 220px !important;
        background: #f7d43f !important;
        box-shadow: 0 8px 15px rgba(0,0,0,0.15) !important;
        z-index: 10000 !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .new2026-layout .n26-menu-item:last-child .n26-sub-panel,
    .new2026-layout .n26-menu-item:nth-last-child(2) .n26-sub-panel {
        left: auto !important; right: 0 !important; transform: none !important;
    }

    .new2026-layout .n26-sub-panel a {
        display: block !important;
        position: relative !important;
        padding: 12px 15px 12px 35px !important;
        color: #333 !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-size: 15px !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        text-decoration: none !important;
    }
    .new2026-layout .n26-sub-panel a:hover { background-color: #fce786 !important; }

    .new2026-layout .n26-sub-panel a::before {
        content: "" !important;
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 0; height: 0;
        border-style: solid; border-width: 4px 0 4px 6px;
        border-color: transparent transparent transparent #333 !important;
    }
    .new2026-layout .n26-sub-panel a[target="_blank"] {
        background: url("../images/common/icon_link.png") no-repeat 12px center / 14px auto !important;
    }
    .new2026-layout .n26-sub-panel a[target="_blank"]::before { display: none !important; }
}

/* --- 3. スマホ版（768px以下） --- */
@media screen and (max-width: 768px) {
    /* pc-onlyの制限を解除 */
    .new2026-layout .pc-only { display: block !important; }

    .new2026-layout .n26-header-inner { 
        display: flex !important; 
        flex-wrap: nowrap !important; /* 横一列に並べる */
        justify-content: space-between !important; 
        align-items: center !important; 
        padding: 0 10px !important; 
        height: 60px !important;
    }

    /* ロゴ (左) */
    .new2026-layout .n26-logo-col { 
        flex: 0 0 auto !important;
        order: 1 !important;
    }
    .new2026-layout .n26-logo img { width: 100px !important; height: auto !important; }

    /* ★コピーエリア (中央・画像差し替え) ★ */
    .new2026-layout .n26-copy-row {
        flex: 1 1 auto !important; 
        order: 2 !important;      /* ロゴとボタンの間に配置 */
        text-align: center !important;
        padding: 0 5px !important;
    }
    .new2026-layout .n26-copy-row img { 
        content: url("../images/new_common/new_catch_sp.jpg") !important; /* スマホ用画像に差し替え */
        width: 220px !important; /* ここで作成した画像の「表示幅」を指定 */
        max-width: 100% !important; 
        height: auto !important;
        display: inline-block !important;
    }

    /* ハンバーガーボタン (右) */
    .new2026-layout .btn_gnav { 
        flex: 0 0 auto !important;
        order: 3 !important;
        display: block !important; 
        width: 45px !important; 
        height: 45px !important; 
        position: relative !important; 
        z-index: 1000001 !important; 
    }
    .new2026-layout .btn_gnav img { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 100% !important; }
    .new2026-layout .btn_gnav .icon-close { opacity: 0 !important; visibility: hidden !important; }
    .new2026-layout .btn_gnav.active .icon-menu { opacity: 0 !important; visibility: hidden !important; }
    .new2026-layout .btn_gnav.active .icon-close { opacity: 1 !important; visibility: visible !important; }

    /* スマホメニュー本体：スクロール対応 */
    #gnav_sp.n26-nav-row {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 100% !important;
        width: 100% !important;
        height: 100% !important; 
        background: #ffffff !important;
        z-index: 1000000 !important;
        padding: 80px 0 100px 0 !important; 
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch !important; 
        transition: left 0.4s ease-in-out !important;
        box-sizing: border-box !important;
    }
    #gnav_sp.active { left: 0 !important; }

    .new2026-layout .n26-main-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; }

    .new2026-layout .n26-menu-item a,
    .new2026-layout .n26-menu-item .n26-label {
        display: block !important;
        position: relative !important;
        padding: 18px 20px 18px 45px !important;
        border-bottom: 1px solid #eee !important;
        color: #333 !important;
        font-weight: bold !important;
        font-size: 16px !important;
        text-decoration: none !important;
    }

    /* 矢印色分け */
    .new2026-layout .n26-menu-item a::before,
    .new2026-layout .n26-menu-item .n26-label::before {
        content: "" !important;
        position: absolute !important;
        left: 25px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 0; height: 0;
        border-style: solid; border-width: 5px 0 5px 7px;
    }
    .new2026-layout .n26-menu-item a::before { border-color: transparent transparent transparent #82b366 !important; }
    .new2026-layout .n26-menu-item .n26-label::before { border-color: transparent transparent transparent #999999 !important; }

    /* 外部リンク */
    .new2026-layout .n26-menu-item a[target="_blank"] {
        background: url("../images/common/icon_link.png") no-repeat 20px center / 16px auto !important;
    }
    .new2026-layout .n26-menu-item a[target="_blank"]::before { display: none !important; }

    /* スマホ下層（サブパネル） */
    .new2026-layout .n26-sub-panel {
        display: block !important;
        background: #fffbe6 !important;
        padding: 0 !important;
    }
    .new2026-layout .n26-sub-panel a {
        border-bottom: 1px solid #eee !important;
        font-weight: normal !important;
        padding: 15px 20px 15px 55px !important;
    }
    .new2026-layout .n26-sub-panel a::before {
        left: 35px !important;
        border-color: transparent transparent transparent #333333 !important;
    }
}