/* css/slide-menu.css */
/* ===================================
   本サイト スライドメニュー
   ハンバーガーボタンとスライドメニュー関連をこのファイルに集約
   =================================== */


/* ===================================
   ハンバーガーボタン 共通
   PC / Tablet: 40px
   Smartphone: 32px
   =================================== */

.menu .btn {
    /* ===== 調整用変数：PC / Tablet ===== */
    --staff-width: 20px;
    --staff-top: 10px;
    --staff-left: 10px;
    --staff-pitch: 5px;
    --staff-line-thickness: 1px;
    --staff-height: calc(var(--staff-pitch) * 4 + var(--staff-line-thickness));

    /* ヘ音記号：五線の一番上を top:0 / left:1px の基準にする */
    --bass-clef-top: 0px;
    --bass-clef-left: 0px;
    --bass-clef-width: 15px;
    --bass-clef-height: 17px;

    /* ★ 左から何px移動して登場するか。ここだけ変更すれば調整できます */
    --bass-clef-start-x: -6px;

    /* ヘ音記号 / 終止線のアニメーション */
    --symbol-duration: .4s;
    --symbol-easing: cubic-bezier(.2, .7, .2, 1);

    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    background-color: #ff9b45;
    border-radius: 100%;
    transition: background-color .5s;
    -webkit-tap-highlight-color: transparent;
}

/* マウスなど、実際にホバー可能な環境だけ色を変更 */
@media (hover: hover) and (pointer: fine) {
    .menu .btn:hover {
        background-color: #E74407;
    }
}

/* 五線：1px / 幅20px / 5pxピッチ */
.menu .line_icon {
    position: absolute;
    top: var(--staff-top);
    left: var(--staff-left);
    display: block;
    width: var(--staff-width);
    height: var(--staff-line-thickness);
    background-color: #ffffff;
    box-shadow:
        0 var(--staff-pitch) 0 #ffffff,
        0 calc(var(--staff-pitch) * 2) 0 #ffffff,
        0 calc(var(--staff-pitch) * 3) 0 #ffffff,
        0 calc(var(--staff-pitch) * 4) 0 #ffffff;
    opacity: 1;
}

/* ヘ音記号 */
.menu .btn::before {
    content: "";
    position: absolute;
    top: calc(var(--staff-top) + var(--bass-clef-top));
    left: calc(var(--staff-left) + var(--bass-clef-left));
    width: var(--bass-clef-width);
    height: var(--bass-clef-height);
    background: url("../images/bass-clef.svg") center center / contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: 0;
    transform: translateX(var(--bass-clef-start-x));
    pointer-events: none;
    z-index: 2;
    transition:
        opacity var(--symbol-duration) ease,
        transform var(--symbol-duration) var(--symbol-easing);
}

/* 終止線：左1px + 1px間隔 + 右2px。高さは五線と同じ */
.menu .btn::after {
    content: "";
    position: absolute;
    top: var(--staff-top);
    left: calc(var(--staff-left) + var(--staff-width) - 4px);
    width: 4px;
    height: var(--staff-height);
    background:
        linear-gradient(to right,
            #ffffff 0,
            #ffffff 1px,
            transparent 1px,
            transparent 2px,
            #ffffff 2px,
            #ffffff 4px);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity var(--symbol-duration) ease;
}

/* OPEN時：五線はそのまま、ヘ音記号が左→右へフェードイン、終止線も同時にフェードイン */
html.is-menu-open .menu .btn::before {
    opacity: 1;
    transform: translateX(0);
}

html.is-menu-open .menu .btn::after {
    opacity: 1;
}


/* ===================================
   Tablet
   =================================== */

@media screen and (max-width:1199px) and (min-width:751px) {

    .menu {
        position: fixed;
        top: 24px;
        right: 20px;
        z-index: 101;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity .3s ease, transform .3s ease;
    }

    body.home .menu {
        opacity: 1;
        transform: translateY(-100px);
        pointer-events: none;
    }

    body.home .menu.is-in {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* ハンバーガー */
    .slide-menu-back {
        width: 335px;
        min-height: 100vh;
        /* 古いブラウザ用のフォールバック */
        min-height: 100dvh;
        /* 新しいブラウザではこちらが優先される */
        background-color: rgb(255, 255, 255);
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        /* スライドイン */
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.2, .7, .2, 1);
        will-change: transform;
    }

    /* 開いたときに表示 */
    html.is-menu-open .slide-menu-back {
        transform: translateX(0);
    }

    /* 半透明の黒スクリーン（パネルの後ろ） */
    .slide-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .65);
        opacity: 0;
        pointer-events: none;
        z-index: 99;
        /* .slide-menu-back の z-index:100 より下 */
        /* transition: opacity .25s ease; */
        transition: none;
    }

    html.is-menu-open .slide-backdrop {
        opacity: 1;
        pointer-events: auto;
        transition: opacity .25s ease;
    }

    /* メニュー表示中はスクロール固定（任意） */
    html.is-menu-open,
    body.is-menu-open {
        overflow: hidden;
    }

    /* パネル内の各項目を右→左で段階表示 */
    .slide-menu>.slide-menu-item,
    .slide-menu__language-menu>li,
    .slide-menu__icon-menu>li {
        opacity: 0;
        transform: translateX(20px);
        will-change: transform, opacity;
    }

    /* 開いたときに順次スライドイン */
    html.is-menu-open .slide-menu>.slide-menu-item,
    html.is-menu-open .slide-menu__language-menu>li,
    html.is-menu-open .slide-menu__icon-menu>li {
        animation: panelItemIn .28s cubic-bezier(.2, .7, .2, 1) forwards;
        animation-delay: calc(var(--pidx, 0) * 60ms);
        /* JSで与える連番に応じて遅延 */
    }

    @keyframes panelItemIn {
        from {
            opacity: 0;
            transform: translateX(100px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }


    /* モーション軽減 */
    @media (prefers-reduced-motion: reduce) {

        html.is-menu-open .slide-menu>.slide-menu-item,
        html.is-menu-open .slide-menu__language-menu>li,
        html.is-menu-open .slide-menu__icon-menu>li {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }


    .slide-menu {
        margin: 100px 0 0 30px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .slide-menu-link {
        color: #FF9B45;
        font-weight: 450;
        text-decoration: none;
        transition: 0.5s;
    }

    .slide-menu-link:hover {
        color: #E74407;
        font-weight: 450;
        text-decoration: none;
    }


    .slide-menu__works-category-menu {
        margin: 0;
        padding-left: 21px;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transition: max-height .3s ease, opacity .2s ease;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .slide-menu__works-category-menu.is-open {
        opacity: 1;
        visibility: visible;
        margin-block: 12px;
        /* = margin-top:12px; margin-bottom:12px */
    }

    .works-category-menu-item {
        margin-bottom: 5px;
        opacity: 0;
        transform: translateX(20px);
        will-change: transform, opacity;
    }

    /* 親が開いたら順番に（右→左へ）スライドイン */
    .slide-menu__works-category-menu.is-open .works-category-menu-item {
        animation: worksItemIn .24s cubic-bezier(.2, .7, .2, 1) forwards;
        /* JSで --idx を与えるので、その値×遅延ms で段階表示 */
        animation-delay: calc(var(--idx, 0) * 60ms);
    }

    @keyframes worksItemIn {
        from {
            opacity: 0;
            transform: translateX(50px);
            /* ← X方向に */
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* 低速化・停止したい場合の配慮 */
    @media (prefers-reduced-motion: reduce) {
        .slide-menu__works-category-menu.is-open .works-category-menu-item {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }

    .works-category-menu-link {
        color: #FF9B45;
        text-decoration: none;
        font-size: 14px;
        font-weight: 450;
        transition: 0.5s;
    }

    .works-category-menu-link:hover {
        color: #E74407;
    }






    .slide-menu__language-menu {
        margin: 50px 0 0 30px;
        display: flex;
        gap: 12px;
    }

    .language-menu {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .language-menu__link {
        color: #FF9B45;
        text-decoration: none;
        font-size: 12px;
        font-weight: 450;
        display: block;
        width: 28px;
        aspect-ratio: 1 /1;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        border: 1.5px transparent solid;
    }

    .language-menu__link:hover {
        color: #E74407;
    }

    .language-menu__jp-link {
        text-indent: 2px;
    }

    .lanuage-selected {
        border: 1.5px #FF9B45 solid;
    }

    .lanuage-selected:hover {
        border: 1.5px #E74407 solid;
    }

    .preload-icons::before {
        content: "";
        position: fixed;
        inset: -9999px;
        /* 画面外に追い出す */
        width: 1px;
        height: 1px;
        background:
            url("../images/tsubu-icon--hover.png") no-repeat -9999px -9999px,
            url("../images/insta-icon-b.png") no-repeat -9999px -9999px;
    }


    .slide-menu__icon-menu {
        display: flex;
        width: 78px;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin: 70px auto 0;
    }

    .slide-menu__icon-insta {
        display: block;
        aspect-ratio: 30 / 29.6;
        width: 24px;
        height: auto;
        background-image: url(../images/insta-icon-a.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.5s;
    }

    .slide-menu__icon-insta:hover {
        background-image: url(../images/insta-icon-b.png);
    }


    .slide-menu__icon-tsubu {
        display: block;
        width: 35px;
        aspect-ratio: 50 / 38.1;
        height: auto;
        background-image: url(../images/tsubu-icon.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.5s;
    }

    .slide-menu__icon-tsubu:hover {
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../images/tsubu-icon--hover.png);
    }


    /* 親を相対配置に、ベースライン余白を無効化 */
    .slide-menu__icon-link {
        position: relative;
        display: inline-block;
        line-height: 0;
    }


    /* リスト体裁は任意 */
    .slide-menu-item {
        list-style: none;
    }

    /* リンクの右側に矢印用のスペースを確保 */
    .slide-menu-link--works {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: .4em;
        /* 文字と矢印の間隔 */
        padding-right: 1.2em;
        /* 右余白（好みで） */
    }

    /* 文字の“後ろ”に > 風の山形アイコンを描く */
    .slide-menu-link--works::after {
        --chev-size: .4em;
        /* 矢印サイズ調整用 */
        content: "";
        width: var(--chev-size);
        height: var(--chev-size);
        margin-top: -2px;
        margin-left: 6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-1px);
        /* ▼（下向き） */
        transform-origin: 50% 50%;
        transition: transform .22s ease;
    }

    /* 開いた状態では▲（上向き）にする */
    .slide-menu-item.is-open>.slide-menu-link--works::after {
        transform: rotate(-135deg) translateY(1px);
        margin-top: 2px;
    }

    /* キーボード操作の見え方（任意） */
    .slide-menu-link--works:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}


/* ===================================
   Smartphone
   =================================== */

@media screen and (max-width:750px) {

    .menu {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 101;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity .3s ease, transform .3s ease;
    }

    body.home .menu {
        opacity: 1;
        transform: translateY(-100px);
        pointer-events: none;
    }

    body.home .menu.is-in {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .menu .btn {
        /* ===== 調整用変数：Smartphone ===== */
        --staff-width: 18px;
        --staff-top: 8px;
        --staff-left: 7px;
        --staff-pitch: 4px;

        --bass-clef-top: 0px;
        --bass-clef-left: 1px;
        --bass-clef-width: 12px;
        --bass-clef-height: 14px;

        /* ★ 左から何px移動して登場するか */
        --bass-clef-start-x: -5px;

        width: 32px;
        height: 32px;
    }

    /* ハンバーガー */
    .slide-menu-back {
        width: 273px;
        min-height: 100vh;
        /* 古いブラウザ用のフォールバック */
        min-height: 100dvh;
        /* 新しいブラウザではこちらが優先される */
        background-color: #fff;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        /* スライドイン */
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.2, .7, .2, 1);
        will-change: transform;
        overflow-y: auto;
        /* 🔴 ここを追加：縦スクロールOKにする */
        -webkit-overflow-scrolling: touch;
        /* iOSでスムーズスクロール */
    }

    /* 開いたときに表示 */
    html.is-menu-open .slide-menu-back {
        transform: translateX(0);
    }

    /* 半透明の黒スクリーン（パネルの後ろ） */
    .slide-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .65);
        opacity: 0;
        pointer-events: none;
        z-index: 99;
        /* .slide-menu-back の z-index:100 より下 */
        transition: opacity .25s ease;
    }

    html.is-menu-open .slide-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* メニュー表示中はスクロール固定（任意） */
    html.is-menu-open,
    body.is-menu-open {
        overflow: hidden;
    }

    /* パネル内の各項目を右→左で段階表示 */
    .slide-menu>.slide-menu-item,
    .slide-menu__language-menu>li,
    .slide-menu__icon-menu>li {
        opacity: 0;
        transform: translateX(20px);
        will-change: transform, opacity;
    }

    /* 開いたときに順次スライドイン */
    html.is-menu-open .slide-menu>.slide-menu-item,
    html.is-menu-open .slide-menu__language-menu>li,
    html.is-menu-open .slide-menu__icon-menu>li {
        animation: panelItemIn .28s cubic-bezier(.2, .7, .2, 1) forwards;
        animation-delay: calc(var(--pidx, 0) * 60ms);
        /* JSで与える連番に応じて遅延 */
    }

    @keyframes panelItemIn {
        from {
            opacity: 0;
            transform: translateX(100px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* モーション軽減 */
    @media (prefers-reduced-motion: reduce) {

        html.is-menu-open .slide-menu>.slide-menu-item,
        html.is-menu-open .slide-menu__language-menu>li,
        html.is-menu-open .slide-menu__icon-menu>li {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }


    .slide-menu {
        margin: 100px 0 0 30px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .slide-menu-link {
        color: #FF9B45;
        font-weight: 450;
        text-decoration: none;
        transition: 0.5s;
    }

    .slide-menu-link:hover {
        color: #E74407;
        font-weight: 450;
        text-decoration: none;
    }


    .slide-menu__works-category-menu {
        margin: 0;
        padding-left: 21px;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transition: max-height .3s ease, opacity .2s ease;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .slide-menu__works-category-menu.is-open {
        opacity: 1;
        visibility: visible;
        margin-block: 12px;
        /* = margin-top:12px; margin-bottom:12px */
    }

    .works-category-menu-item {
        margin-bottom: 5px;
        opacity: 0;
        transform: translateX(20px);
        will-change: transform, opacity;
    }

    /* 親が開いたら順番に（右→左へ）スライドイン */
    .slide-menu__works-category-menu.is-open .works-category-menu-item {
        animation: worksItemIn .24s cubic-bezier(.2, .7, .2, 1) forwards;
        /* JSで --idx を与えるので、その値×遅延ms で段階表示 */
        animation-delay: calc(var(--idx, 0) * 70ms);
    }

    @keyframes worksItemIn {
        from {
            opacity: 0;
            transform: translateX(100px);
            /* ← X方向に */
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* 低速化・停止したい場合の配慮 */
    @media (prefers-reduced-motion: reduce) {
        .slide-menu__works-category-menu.is-open .works-category-menu-item {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }

    .works-category-menu-link {
        color: #FF9B45;
        text-decoration: none;
        font-size: 14px;
        font-weight: 450;
        transition: 0.5s;
    }

    .works-category-menu-link:hover {
        color: #E74407;
    }






    .slide-menu__language-menu {
        margin: 50px 0 0 30px;
        display: flex;
        gap: 12px;
    }

    .language-menu {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .language-menu__link {
        color: #FF9B45;
        text-decoration: none;
        font-size: 12px;
        font-weight: 450;
        display: block;
        width: 28px;
        aspect-ratio: 1 /1;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        border: 1.5px transparent solid;
    }

    .language-menu__link:hover {
        color: #E74407;
    }

    .language-menu__jp-link {
        text-indent: 2px;
    }

    .lanuage-selected {
        border: 1.5px #FF9B45 solid;
    }

    .lanuage-selected:hover {
        border: 1.5px #E74407 solid;
    }

    .preload-icons::before {
        content: "";
        position: fixed;
        inset: -9999px;
        /* 画面外に追い出す */
        width: 1px;
        height: 1px;
        background:
            url("../images/tsubu-icon--hover.png") no-repeat -9999px -9999px,
            url("../images/insta-icon-b.png") no-repeat -9999px -9999px;
    }


    .slide-menu__icon-menu {
        display: flex;
        width: 78px;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin: 70px auto 0;
    }

    .slide-menu__icon-insta {
        display: block;
        aspect-ratio: 30 / 29.6;
        width: 24px;
        height: auto;
        background-image: url(../images/insta-icon-a.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.5s;
    }

    .slide-menu__icon-insta:hover {
        background-image: url(../images/insta-icon-b.png);
    }


    .slide-menu__icon-tsubu {
        display: block;
        width: 35px;
        aspect-ratio: 50 / 38.1;
        height: auto;
        background-image: url(../images/tsubu-icon.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: 0.5s;
    }

    .slide-menu__icon-tsubu:hover {
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../images/tsubu-icon--hover.png);
    }


    /* 親を相対配置に、ベースライン余白を無効化 */
    .slide-menu__icon-link {
        position: relative;
        display: inline-block;
        line-height: 0;
    }


    /* リスト体裁は任意 */
    .slide-menu-item {
        list-style: none;
    }

    /* リンクの右側に矢印用のスペースを確保 */
    .slide-menu-link--works {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: .4em;
        /* 文字と矢印の間隔 */
        padding-right: 1.2em;
        /* 右余白（好みで） */
    }

    /* 文字の“後ろ”に > 風の山形アイコンを描く */
    .slide-menu-link--works::after {
        --chev-size: .4em;
        /* 矢印サイズ調整用 */
        content: "";
        width: var(--chev-size);
        height: var(--chev-size);
        margin-top: -2px;
        margin-left: 6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-1px);
        /* ▼（下向き） */
        transform-origin: 50% 50%;
        transition: transform .22s ease;
    }

    /* 開いた状態では▲（上向き）にする */
    .slide-menu-item.is-open>.slide-menu-link--works::after {
        transform: rotate(-135deg) translateY(1px);
        margin-top: 2px;
    }

    /* キーボード操作の見え方（任意） */
    .slide-menu-link--works:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}


/* ===================================
   モーション軽減
   =================================== */

@media (prefers-reduced-motion: reduce) {

    .menu .btn,
    .menu .btn::before,
    .menu .btn::after,
    .slide-menu-back,
    .slide-backdrop {
        transition: none !important;
    }

    html.is-menu-open .slide-menu>.slide-menu-item,
    html.is-menu-open .slide-menu__language-menu>li,
    html.is-menu-open .slide-menu__icon-menu>li,
    .slide-menu__works-category-menu.is-open .works-category-menu-item {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}