@charset "UTF-8";
/* CSS Document */

/* ==========================================
   Mobile
========================================== */

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

    body.home{

        overflow-y:auto;

    }

    .site{

        width:100%;

        height:auto;

        display:block;

    }

    .sidebar{

        display:none;

    }

    .content{

        width:100%;

        height:auto;

        padding:0;

    }

    .hero-video{

        width:100%;

        padding:0;

    }

    .hero-video video{

        width:100%;

        display:block;

    }

}
.mobile-header{

    display:none;

}

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

.mobile-header{

    width:100%;

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 20px;

}

.mobile-logo{

    width:150px;

}

.mobile-logo img{

    width:100%;

}

.menu-button{

    font-size:2rem;

    background:none;

    border:none;

    cursor:pointer;

}

}

/* ==========================================
   Mobile Menu & SVG Toggle
========================================== */

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

    /* ヘッダーの重なり順調整 */
    .mobile-header {
        position: relative;
        z-index: 1001;
    }

    /* ハンバーガーボタン＆SVGアニメーション */
    .menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: #333;
        z-index: 1002;
    }

    .hamburger-icon .line {
        transform-origin: center;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* メニュー開く時のSVGアニメーション (3本線 → ×印) */
    body.menu-open .hamburger-icon .line-top {
        transform: translateY(6px) rotate(45deg);
    }

    body.menu-open .hamburger-icon .line-middle {
        opacity: 0;
    }

    body.menu-open .hamburger-icon .line-bottom {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* ドロワーメニュー */
    .mobile-drawer {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #F4F5F7;
        z-index: 1000;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        padding-top: 80px;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    }

    body.menu-open .mobile-drawer {
        right: 0;
    }

    /* ドロワー内のナビゲーションスタイル調整 */
    .mobile-sidebar-content {
        display: flex !important;
        position: static;
        width: 100%;
        height: auto;
        padding: 20px;
    }

    /* 背景オーバーレイ */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.menu-open .mobile-menu-overlay {
        opacity: 1;
        visibility: visible;
    }

    /* メニューが開いているときは背面のスクロールを防止 */
    body.menu-open {
        overflow: hidden;
    }
}

/* ==========================================
   PC表示時にスマホ用ドロワー・背景を完全に隠す
========================================== */
@media screen and (min-width: 1025px) {
    .mobile-drawer,
    .mobile-menu-overlay {
        display: none !important;
    }
}