@charset "UTF-8";

/**
 * ToRA-SEED Mobile Style
 * Version: 3.0 (ハンバーガーボタン強制表示版)
 */

@media screen and (max-width: 1024px) {
    /* 1. PC用の要素を物理的に画面から消す */
    header.site-header nav.tora-main-nav,
    header.site-header .header-top-right,
    #nav-marker {
        display: none !important;
    }

    /* 2. ヘッダーをスリムに固定し、背景を白に */
    header.site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important;
        background: #fff !important;
        border-bottom: 2px solid #1A52A8 !important;
        z-index: 9999 !important;
        padding: 0 !important;
    }

    header.site-header .header-container {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }

    header.site-header .header-top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    header.site-header .site-logo img {
        height: 35px !important;
        width: auto !important;
    }

    /* 3. ハンバーガーボタンを「強制的に」出現させる */
    /* JSで append される .tora-menu-toggle に対して指定 */
    .tora-menu-toggle {
        display: flex !important; /* 絶対に表示 */
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 20px !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        position: relative !important;
        margin-right: 5px !important;
    }

    .tora-menu-toggle span {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background-color: #1A52A8 !important; /* 濃い青 */
        transition: 0.3s !important;
    }

    /* 4. スライドパネルの設定 */
    .mobile-nav-panel {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* 最初は隠す */
        width: 80% !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 10000 !important;
        transition: 0.4s ease !important;
        padding: 100px 20px 40px !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1) !important;
    }

    .mobile-nav-panel.is-open {
        right: 0 !important; /* 開く */
    }

    /* パネル内のリストを縦に並べる */
    .mobile-nav-list ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mobile-nav-list ul li a {
        display: block !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #eee !important;
        color: #333 !important;
        font-weight: bold !important;
        text-decoration: none !important;
    }

    /* 5. 背景の重なり防止 */
    body {
        padding-top: 70px !important;
    }
}