:root {
    --brand-mobile: #297fc9;
    --mobile-header-h: 72px;
    --cta: #2F80ED;
    --cta-shadow: rgba(47,128,237,.28);
    --cta-shadow-hover: rgba(47,128,237,.33);
}

@media (max-width: 980px) {
    /* .header .nav_links {
        display: none !important;
        position: fixed !important;
        top: var(--mobile-header-h) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 50vh !important;
        max-height: calc(100vh - var(--mobile-header-h)) !important;
        flex-direction: column !important;
        padding: 10px 12px 18px !important;
        margin: 0 !important;
        background: #fff !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        z-index: 3000 !important;
        transform: translateY(-12px) scale(0.98) !important;
        opacity: 0;
        transition: transform 0.45s cubic-bezier(.19,1,.22,1),
                    opacity 0.45s ease !important;

        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .header .nav_links.is-open {
        display: flex !important;
        transform: translateY(0) scale(1) !important;
        opacity: 1;
    }

    .drawer-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.45) !important;
        z-index: 2990 !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease !important;
    }
    
    .drawer-backdrop.is-open {
        opacity: 1 !important;
        pointer-events: auto !important;
    } */

    @media (max-width: 980px) {
        .header .nav_links {
          position: fixed !important;
          top: var(--mobile-header-h) !important;
          left: 0 !important;
          right: 0 !important;
          width: 100% !important;
          background: linear-gradient(to bottom, #0099ff 8px, #ffffff 4px) !important;
          z-index: 3000 !important;
          flex-direction: column !important;
          padding: 10px 12px 18px !important;
          margin: 0 !important;
      
          transform-origin: top center;
          transform: scaleY(0);
          opacity: 0;
          visibility: hidden;
      
          transition:
            transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
            opacity 0.8s ease,
            visibility 0s linear 0.8s;
      
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch !important;
        }
      
        .header .nav_links.is-open {
          transform: scaleY(1);
          opacity: 1;
          visibility: visible;
          transition:
            transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
            opacity 0.8s ease,
            visibility 0s;
        }
      
        .drawer-backdrop {
          position: fixed !important;
          inset: 0 !important;
          /* background: rgba(0, 0, 0, 0.45) !important; */
          z-index: 2990 !important;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.8s ease;
        }
      
        .drawer-backdrop.is-open {
          opacity: 1;
          pointer-events: auto;
        }
      }
      
      

    .nav_burger {
        display: block !important;
        background: none !important;
        border: 0 !important;
        padding: 8px !important;
        border-radius: 10px !important;
        /* color: var(--ink) !important; */
        color: #0099ff !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        font-size: 28px !important;

        flex-shrink: 0;
        line-height: 1;
        display: flex;
        position: relative;
        z-index: 3100;
    }

    .nav_links .mega,
    .nav_links .nav_link--group {
        border-bottom: 1px solid var(--brand-mobile) !important;
        border-radius: 0 !important;
        margin: 0;
        width: 100%;
        padding: 0.5rem 0;
        box-sizing: border-box;
    }

    .nav_links .mega_trigger,
    .nav_links .nav_link--group {
        display: flex;
        align-items: center;
        justify-content: space-between !important;
        width: 100%;
        padding: 1rem 0.75rem;
        background: transparent;
        border: 0;
        font-weight: 600;
        font-size: clamp(16px, 4vw, 16px);
        color: var(--ink);
        cursor: pointer;
        text-align: left !important;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP";
        line-height: 1.5;
        letter-spacing: 0.1em;
    }

    .nav_links .mega_trigger::after {
        content: "+";
        font-size: clamp(18px, 5vw, 20px);
        color: var(--brand-mobile);
        line-height: 1;
        margin-left: 0.5rem;
        transition: transform .2s ease;
    }

    .nav_links .mega_trigger.is-open::after {
        content: "−";
        transform: rotate(0deg);
    }

    .nav_links .mega_trigger:hover,
    .nav_links .nav_link--group:hover {
        background: color-mix(in srgb, var(--brand-mobile) 8%, transparent);
    }

    @supports not (color: color-mix(in srgb, white 10%, black)) {
        .nav_links .mega_trigger:hover,
        .nav_links .nav_link--group:hover { background: rgba(41, 127, 201, 0.08); }
    }

    .nav_links .nav_link--group::after {
        content: none;
    }

    .nav_links .mega_panel {
        display: none;
        padding: 0 0 0 1rem;
        background: transparent;
        margin-top: 0;
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    .nav_links .mega_panel.is-open {
        display: block;
        background: #f7f7f7;
        border-radius: 6px;
        padding: 0.5rem 1rem;
    }

    .nav_links .mega_grid {
        display: block !important;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .nav_links .mega_parent,
    .nav_links .mega_children {
        width: 100% !important;
        padding: 0;
        margin: 0;
    }

    .nav_links .mega_children {
        display: block;
        padding-left: 1rem;
    }

    .nav_links .mega_children .mega_item {
        display: block;
        padding: 0.75rem 0.5rem;
        font-size: clamp(14px, 3.5vw, 14px);
        color: var(--ink);
        border-radius: 0;
        margin: 0.25rem 0;
        width: 100%;
        box-sizing: border-box;
        white-space: normal;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP";
        line-height: 1.4;
        letter-spacing: 0.1em;
        border-bottom: 1px dashed #ddd;
    }

    .nav_links .mega_children .mega_item:hover {
        background: color-mix(in srgb, var(--brand-mobile) 6%, transparent);
    }

    @supports not (color: color-mix(in srgb, white 10%, black)) {
        .nav_links .mega_children .mega_item:hover { background: rgba(41, 127, 201, 0.06); }
    }

    .nav_links .nav_cta {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 18px;
        border-radius: 999px;
        white-space: nowrap;
        line-height: 1;
        font-weight: 700;
        border: 0;
        color: #fff;
        background: var(--cta);
        box-shadow: 0 8px 16px var(--cta-shadow);
        transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
        width: 100%;
        margin-top: 0.5rem;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP";
        letter-spacing: 0.1em;
    }

    .nav_links .nav_cta:hover {
        filter: brightness(1.06);
        box-shadow: 0 10px 20px var(--cta-shadow-hover);
    }

    .nav_links .nav_cta:active {
        transform: translateY(1px);
    }

    body.nav-menu-open {
        overflow: hidden !important;
        height: 100% !important;
    }

    .hero { height: 100vh !important; min-height: 320px !important; }
    .hero_videos, .hero_media { z-index: 0 !important; position: absolute !important; }

    .nav_links :is(a,button) { outline-offset: 3px; }

    /* 狭い画面向け調整 */
    @media (max-width: 430px) {
        .nav_links {
            min-height: 40vh !important;
        }
        .nav_links .mega_trigger,
        .nav_links .nav_link--group {
            font-size: clamp(14px, 3.5vw, 14px);
        }
        .nav_links .mega_children .mega_item {
            font-size: clamp(12px, 3vw, 12px);
            padding: 0.5rem 0.25rem;
        }
    }
}

/* デスクトップ用スタイルをモバイルで無効化 */
@media (max-width: 980px) {
    .mega_panel {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .mega_grid {
        grid-template-columns: none !important;
        display: block !important;
    }

    .mega_parent,
    .mega_children {
        grid-column: auto !important;
        display: block !important;
    }

    .mega_children {
        grid-template-columns: none !important;
    }
}

@media (max-width: 980px) {
    .header .container.nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 3100;
    }

    .nav_tools .lang {
        flex-shrink: 0;
        width: auto;
        display: flex;
        align-items: center;
    }

    .lang_trigger {
        display: flex;
        align-items: center;
        white-space: nowrap;
        font-size: clamp(14px, 3vw, 14px);
    }

    body.nav-menu-open .header {
        position: sticky;
        top: 0;
        background: #fff;
        opacity: 1 !important;
    }
}