/*
 * Right-side mobile drawer inspired by the referenced Osaka University page.
 * Without JavaScript, the existing responsive navigation remains visible.
 */

.menu-toggle,
.menu-overlay {
    display: none;
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
    display: block;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 180ms ease, background-color 180ms ease;
}

.menu-toggle-icon {
    position: relative;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
    position: absolute;
    left: 0;
    content: "";
}

.menu-toggle-icon::before {
    transform: translateY(-8px);
}

.menu-toggle-icon::after {
    transform: translateY(8px);
}

.menu-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media screen and (max-width: 1240px) {
    html.has-responsive-drawer .menu-toggle {
        position: fixed;
        top: 8px;
        right: 8px;
        z-index: 1002;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 1px solid #c8cec4;
        border-radius: 2px;
        color: #30352d;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
        cursor: pointer;
        box-sizing: border-box;
    }

    html.has-responsive-drawer .menu-toggle:focus-visible {
        outline: 3px solid #d06b00;
        outline-offset: 3px;
    }

    html.menu-is-open .menu-toggle-icon {
        background: transparent;
    }

    html.menu-is-open .menu-toggle-icon::before {
        transform: rotate(45deg);
    }

    html.menu-is-open .menu-toggle-icon::after {
        transform: rotate(-45deg);
    }

    html.has-responsive-drawer #navi {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1001;
        float: none;
        width: min(300px, calc(100vw - 64px));
        height: 100vh;
        height: 100dvh;
        padding: 62px 0 24px;
        color: #333;
        background: #fff;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
        overflow-x: hidden;
        overflow-y: auto;
        visibility: hidden;
        transform: translateX(105%);
        transition: transform 220ms ease, visibility 220ms ease;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    html.has-responsive-drawer #navi.is-open {
        visibility: visible;
        transform: translateX(0);
    }

    html.has-responsive-drawer #navi .navi-sub {
        display: none;
    }

    html.has-responsive-drawer #navi ul {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        border-top: 1px solid #e1e4df;
        list-style: none;
    }

    html.has-responsive-drawer #navi li {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #e1e4df;
        text-align: left;
    }

    html.has-responsive-drawer #navi li a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 52px;
        height: auto;
        padding: 13px 22px;
        border: 0;
        border-radius: 0;
        color: #333 !important;
        background: #fff !important;
        line-height: 1.4;
        text-align: left;
        overflow: visible;
        box-sizing: border-box;
    }

    html.has-responsive-drawer #navi li a:hover,
    html.has-responsive-drawer #navi li a:focus {
        color: #203f18 !important;
        background: #f0f5ed !important;
    }

    html.has-responsive-drawer #navi .menu-text,
    html.has-responsive-drawer #navi .menu-text2,
    html.has-responsive-drawer #navi .menu-text3 {
        display: block;
        width: 100%;
        min-height: 52px;
        padding: 13px 22px;
        margin: 0;
        border-bottom: 1px solid #e1e4df;
        background: #f8faf7;
        line-height: 1.5 !important;
        text-align: left;
        box-sizing: border-box;
    }

    html.has-responsive-drawer .menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: block;
        background: rgba(20, 25, 18, 0.48);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 220ms ease, visibility 220ms ease;
    }

    html.menu-is-open .menu-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    html.menu-is-open,
    html.menu-is-open body {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-toggle-icon,
    .menu-toggle-icon::before,
    .menu-toggle-icon::after,
    html.has-responsive-drawer #navi,
    html.has-responsive-drawer .menu-overlay {
        transition: none;
    }
}