/* =====================================================
   FANTASISTA NAVIGATION
===================================================== */

:root {
    --st-nav-breakpoint: 1024px;
    --st-menu-bg: #222;
    --st-menu-bg-hover: #333;
    --st-menu-border: #444;
    --st-drawer-width: min(250px, 84vw);
    --st-overlay-bg: rgba(0, 0, 0, 0.68);
}

body.st-menu-open {
    overflow: hidden !important;
}

/*
 * Allow the overlay to cover the original header.
 */
#st-headwide {
    z-index: auto !important;
}


/* =====================================================
   OVERLAY
===================================================== */

.st-mobile-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999998 !important;

    display: block !important;
    visibility: hidden !important;

    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--st-overlay-bg) !important;
    opacity: 0 !important;
    pointer-events: none !important;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease !important;
}

.st-mobile-menu-overlay.is-visible {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* =====================================================
   DESKTOP NAVIGATION
===================================================== */

@media (min-width: 1024px) {
    /*
     * Mobile elements
     */
    #s-navi,
    .st-mobile-menu-overlay {
        display: none !important;
    }

    /*
     * Desktop menu wrapper
     */
    #st-menubox {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
    }

    #st-menuwide {
        width: min(1200px, calc(100% - 60px)) !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #st-menuwide > nav {
        display: block !important;
        width: 100% !important;
    }

    /*
     * Top-level menu
     */
    #st-menuwide .menu {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    #st-menuwide .menu > li {
        position: relative !important;

        flex: 1 1 20% !important;
        width: 20% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        background: var(--st-menu-bg) !important;
        border-right: 2px solid #fff !important;
    }

    #st-menuwide .menu > li:last-child {
        border-right: 0 !important;
    }

    #st-menuwide .menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;

        width: 100% !important;
        min-height: 40px !important;

        color: #fff !important;
        font-family: "Noto Sans JP", sans-serif !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        font-style: italic !important;
        line-height: 1.35 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        background: var(--st-menu-bg) !important;
        opacity: 1 !important;

        transition:
            color 0.2s ease,
            background-color 0.2s ease !important;
    }

    #st-menuwide .menu > li:hover > a,
    #st-menuwide .menu > li:focus-within > a,
    #st-menuwide .menu > .current-menu-item > a,
    #st-menuwide .menu > .current-menu-ancestor > a {
        color: #fff !important;
        background: var(--st-menu-bg-hover) !important;
    }

    /*
     * Remove styles inherited from Affinger.
     */
    #st-menuwide .menu > li > a::after {
        display: none !important;
    }

    /*
     * Desktop dropdown
     */
    #st-menuwide .menu > li > .sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 1000 !important;

        display: block !important;
        visibility: hidden !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        background: var(--st-menu-bg) !important;
        border: 0 !important;
        box-shadow: none !important;

        opacity: 0 !important;
        transform: translateY(8px) !important;
        pointer-events: none !important;

        transition:
            visibility 0.2s ease,
            opacity 0.2s ease,
            transform 0.2s ease !important;
    }

    #st-menuwide .menu > li:hover > .sub-menu,
    #st-menuwide .menu > li:focus-within > .sub-menu {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    #st-menuwide .sub-menu > li {
        display: block !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        background: var(--st-menu-bg) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--st-menu-border) !important;
    }
}


/* =====================================================
   MOBILE HEADER AND DRAWER
===================================================== */

@media (max-width: 1023px) {
    /*
     * Hide desktop-only header elements.
     */
    #st-menubox,
    #header-l,
    #header-r,
    .header-sns {
        display: none !important;
    }

    /*
     * Prevent header elements from appearing over the overlay.
     */
    #st-headwide,
    #header-full,
    #headbox-bg,
    #headbox,
    #s-navi {
        z-index: auto !important;
    }

    #headbox-bg,
    #headbox,
    #s-navi,
    #s-navi .acordion {
        display: block !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #s-navi {
        background: #fff !important;
    }

    /*
     * One-line closed mobile header:
     * logo on left, hamburger on right.
     */
    #s-navi:not(.mobile-menu-open) .trigger {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        height: 110px !important;
        min-height: 110px !important;

        margin: 0 !important;
        padding: 18px 30px !important;

        background: #fff !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    /*
     * Mobile logo
     */
    #s-navi:not(.mobile-menu-open) #st-mobile-logo {
        display: block !important;
        flex: 0 1 auto !important;

        width: min(380px, calc(100% - 100px)) !important;
        height: 68px !important;

        margin: 0 !important;
        padding: 0 !important;

        background-image: url("https://www.f-sista.com/wp-content/uploads/2023/08/toplogo-.png") !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-size: contain !important;

        pointer-events: none !important;
    }

    /*
     * Closed hamburger button
     */
    #s-navi:not(.mobile-menu-open) .acordion_button {
        position: absolute !important;
        top: 50% !important;
        right: 30px !important;
        left: auto !important;

        display: block !important;

        width: 46px !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: translateY(-50%) !important;
        cursor: pointer !important;
    }

    /*
     * Hide original Affinger hamburger SVG.
     */
    #s-navi:not(.mobile-menu-open) .acordion_button i {
        display: none !important;
    }

    #s-navi:not(.mobile-menu-open) .acordion_button .op {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;
        visibility: visible !important;

        width: 46px !important;
        height: 32px !important;

        opacity: 1 !important;
    }

    /*
     * Three hamburger lines
     */
    #s-navi:not(.mobile-menu-open)
    .acordion_button
    .op::before,
    #s-navi:not(.mobile-menu-open)
    .acordion_button
    .op::after,
    #s-navi:not(.mobile-menu-open)
    .acordion_button::before {
        content: "" !important;

        position: absolute !important;
        right: 0 !important;
        left: auto !important;

        display: block !important;
        visibility: visible !important;

        width: 46px !important;
        height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #111 !important;
        border: 0 !important;
        border-radius: 0 !important;

        opacity: 1 !important;
        transform: none !important;
    }

    #s-navi:not(.mobile-menu-open)
    .acordion_button
    .op::before {
        top: 2px !important;
    }

    #s-navi:not(.mobile-menu-open)
    .acordion_button::before {
        top: 15px !important;
    }

    #s-navi:not(.mobile-menu-open)
    .acordion_button
    .op::after {
        top: 28px !important;
    }

    #s-navi:not(.mobile-menu-open)
    .acordion_button::after {
        content: none !important;
        display: none !important;
    }

    /*
     * MENU label
     */
    #s-navi:not(.mobile-menu-open) .trigger::after {
        content: "MENU" !important;

        position: absolute !important;
        top: calc(50% + 19px) !important;
        right: 30px !important;
        left: auto !important;

        display: block !important;

        width: 46px !important;

        color: #111 !important;
        font-family: Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        text-align: center !important;

        pointer-events: none !important;
    }

    /*
     * Closed drawer
     */
    #s-navi .acordion_tree {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 999999 !important;

        display: block !important;
        visibility: hidden !important;

        width: var(--st-drawer-width) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: var(--st-menu-bg) !important;
        box-shadow: -8px 0 25px rgba(0, 0, 0, 0.2) !important;

        opacity: 0 !important;
        transform: translateX(100%) !important;
        pointer-events: none !important;

        transition:
            transform 0.3s ease,
            opacity 0.25s ease,
            visibility 0.3s ease !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Open drawer
     */
    #s-navi.mobile-menu-open .acordion_tree,
    #s-navi .acordion_tree.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    #s-navi .acordion_tree_content {
        overflow: visible !important;
    }


    /*
     * Open X button
     */
    #s-navi.mobile-menu-open .acordion_button {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;

        display: block !important;

        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    #s-navi.mobile-menu-open .acordion_button .op {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    #s-navi.mobile-menu-open .acordion_button i {
        display: none !important;
    }

    #s-navi.mobile-menu-open .acordion_button::before,
    #s-navi.mobile-menu-open .acordion_button::after {
        content: "" !important;

        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        display: block !important;
        visibility: visible !important;

        width: 34px !important;
        height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #111 !important;
        border: 0 !important;
        border-radius: 0 !important;

        opacity: 1 !important;
        transform-origin: center !important;
    }

    #s-navi.mobile-menu-open .acordion_button::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    #s-navi.mobile-menu-open .acordion_button::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    /*
     * CLOSE label
     */
    #s-navi.mobile-menu-open .trigger::after {
        content: "CLOSE" !important;

        position: absolute !important;
        top: 42px !important;
        right: 6px !important;

        display: block !important;

        width: 42px !important;

        color: #111 !important;
        font-family: Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        text-align: center !important;

        pointer-events: none !important;
    }

    /*
     * Mobile submenu
     */
    #s-navi .sub-menu {
        display: none !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        background: #292929 !important;
    }

    #s-navi
    .menu-item-has-children.submenu-open
    > .sub-menu {
        display: block !important;
    }

    #s-navi .sub-menu > li {
        display: block !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        background: #292929 !important;

        border: 0 !important;
        border-top: 1px solid var(--st-menu-border) !important;
    }

    #s-navi .sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;

        width: 100% !important;
        min-height: 52px !important;

        margin: 0 !important;
        padding: 12px 16px 12px 28px !important;

        color: #fff !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-decoration: none !important;

        background: #292929 !important;
        box-sizing: border-box !important;
    }

    #s-navi .sub-menu > li > a:hover,
    #s-navi .sub-menu > li > a:focus {
        color: #fff !important;
        background: var(--st-menu-bg-hover) !important;
    }

    #s-navi
    .menu-item-has-children.submenu-open
    > a
    > .menu-item-icon {
        transform: rotate(180deg) !important;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 600px) {
    :root {
        --st-drawer-width: 250px;
    }

    /*
     * Smaller one-line header
     */
    #s-navi:not(.mobile-menu-open) .trigger {
        height: 82px !important;
        min-height: 82px !important;
        padding: 12px 18px !important;
    }

    #s-navi:not(.mobile-menu-open) #st-mobile-logo {
        width: min(250px, calc(100% - 76px)) !important;
        height: 52px !important;
    }

    #s-navi:not(.mobile-menu-open) .acordion_button {
        right: 18px !important;

        width: 25px !important;
        height: 43px !important;
    }

    #s-navi:not(.mobile-menu-open) .acordion_button .op {
        width: 25px !important;
        height: 27px !important;
    }

    #s-navi:not(.mobile-menu-open)
    .acordion_button
    .op::before,
    #s-navi:not(.mobile-menu-open)
    .acordion_button
    .op::after,
    #s-navi:not(.mobile-menu-open)
    .acordion_button::before {
        width: 25px !important;
    }

    #s-navi:not(.mobile-menu-open)
    .acordion_button
    .op::before {
        top: 4px !important;
    }

    #s-navi:not(.mobile-menu-open)
    .acordion_button::before {
        top: 12px !important;
    }

    #s-navi:not(.mobile-menu-open)
    .acordion_button
    .op::after {
        top: 20px !important;
    }

    #s-navi:not(.mobile-menu-open) .trigger::after {
      top: calc(50% + 8px) !important;
      right: 18px !important;
      width: 25px !important;
      font-size: 8px !important;
    }

}

/* =====================================================
   Push page content left when mobile drawer opens
===================================================== */

@media (max-width: 1023px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    /*
     * Prepare the page content for movement.
     */
    #content-w {
        position: relative !important;
        transform: translateX(0) !important;
        transition: transform 0.3s ease !important;
        will-change: transform;
    }

    /*
     * Push content left by the drawer width.
     */
    body.st-menu-open #content-w {
        transform: translateX(calc(-1 * var(--st-drawer-width))) !important;
    }

    /*
     * Overlay only the remaining visible page area,
     * excluding the drawer.
     */
    .st-mobile-menu-overlay {
        right: var(--st-drawer-width) !important;
        left: 0 !important;
        width: auto !important;
    }

    /*
     * Drawer stays fixed on the right.
     */
    #s-navi .acordion_tree {
        right: 0 !important;
        transform: translateX(100%) !important;
    }

    #s-navi.mobile-menu-open .acordion_tree,
    #s-navi .acordion_tree.is-open {
        transform: translateX(0) !important;
    }
}

/* =====================================================
   Keep mobile logo visible when drawer is open
===================================================== */

@media (max-width: 1023px) {
    /*
     * Keep the original header row.
     */
    #s-navi.mobile-menu-open .trigger {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        z-index: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        height: 110px !important;
        min-height: 110px !important;

        margin: 0 !important;
        padding: 18px 30px !important;

        background: #fff !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /*
     * Show the logo in its normal position.
     */
    #s-navi.mobile-menu-open #st-mobile-logo {
        display: block !important;
        flex: 0 1 auto !important;

        width: min(380px, calc(100% - 100px)) !important;
        height: 68px !important;

        margin: 0 !important;
        padding: 0 !important;

        background-image: url("https://www.f-sista.com/wp-content/uploads/2023/08/toplogo-.png") !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-size: contain !important;

        opacity: 1 !important;
        pointer-events: none !important;
    }

    /*
     * Position only the X button beside the drawer.
     */
    #s-navi.mobile-menu-open .acordion_button {
        position: fixed !important;
        top: 15px !important;
        right: calc(var(--st-drawer-width) + 16px) !important;
        left: auto !important;
        z-index: 1000000 !important;

        display: block !important;

        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    #s-navi.mobile-menu-open .acordion_button .op,
    #s-navi.mobile-menu-open .acordion_button i {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    #s-navi.mobile-menu-open .acordion_button::before,
    #s-navi.mobile-menu-open .acordion_button::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        display: block !important;
        visibility: visible !important;

        width: 34px !important;
        height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #111 !important;
        border: 0 !important;
        opacity: 1 !important;
        transform-origin: center !important;
    }

    #s-navi.mobile-menu-open .acordion_button::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    #s-navi.mobile-menu-open .acordion_button::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    /*
     * Add CLOSE below the X using the button.
     */
    #s-navi.mobile-menu-open .acordion_button::marker {
        display: none !important;
    }

    #s-navi.mobile-menu-open .trigger::after {
        content: "CLOSE" !important;
        position: fixed !important;
        top: 58px !important;
        right: calc(var(--st-drawer-width) + 12px) !important;
        z-index: 1000000 !important;

        display: block !important;
        width: 50px !important;

        color: #111 !important;
        font-family: Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        text-align: center !important;

        pointer-events: none !important;
    }
}


/* Small phones */
@media (max-width: 600px) {
    #s-navi.mobile-menu-open .trigger {
        height: 82px !important;
        min-height: 82px !important;
        padding: 12px 18px !important;
    }

    #s-navi.mobile-menu-open #st-mobile-logo {
        width: min(250px, calc(100% - 76px)) !important;
        height: 52px !important;
    }
}