/* ============================
   sp.css（〜768px）
============================ */

/* ------------------------------
   スマホ専用スタイル（768px以下）
------------------------------ */
@media (max-width: 768px) {
    body {
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    /* ▼ ハンバーガーボタン */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0.9rem;
        left: 1rem;
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.6rem;
        line-height: 1;
        background-color: #e6ecf7;
        color: #243b63;
        border: 1px solid #39558a;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
        cursor: pointer;
        z-index: 3000;
    }

        .menu-toggle.active {
            background-color: #4a6aa4;
            color: #fff;
            border-color: #4a6aa4;
        }

    /* ▼ サイドメニュー開いたとき */
    #sideMenu.open {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: fixed;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: #e9e9e9;
        /* ▼ ボタンとメニュー間に0.5remの間隔 */
        padding: 4.5rem 0 2rem 1.5rem;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
        z-index: 2000;
        overflow-y: auto;
    }

        /* ▼ メニューリスト全体 */
        #sideMenu.open > ul.sidemenu {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
        }

            /* ▼ 最上位メニュー（About〜Contact） */
            #sideMenu.open > ul.sidemenu > li {
                width: 100%;
                margin: 0;
                padding: 0;
                font-weight: bold;
            }

            /* ▼ Works配下リスト */
            #sideMenu.open > ul.sidemenu li ul {
                display: block !important;
                position: static !important;
                padding-left: 1.25rem;
                margin: 0;
                border: none !important;
            }

    /* ▼ 共通リンク設定 */
    #sideMenu a {
        display: block;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1.1;
        color: #000;
        text-decoration: none;
        box-sizing: border-box;
        font-weight: bold; /* スマホでも太字OK */
    }

    /* ▼ 背景オーバーレイ */
    #overlay.active {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1500;
    }

    /* ▼ フッターを常に下部固定 */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    #mainContent {
        flex: 1;
        width: 100%;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    #footerContent {
        margin-top: auto;
    }

    /* ▼ デフォルト非表示（開くときのみ表示） */
    #sideMenu {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        background-color: #e9e9e9;
        padding: 1rem;
    }

        /* Works配下を含むすべてのリンク */
        #sideMenu a,
        #sideMenu.open a,
        #sideMenu.open ul li a {
            background: none !important;
            color: #000 !important;
        }

            /* hover / active / focus / visited のすべてを無効化 */
            #sideMenu a:hover,
            #sideMenu a:active,
            #sideMenu a:focus,
            #sideMenu a:visited,
            #sideMenu.open a:hover,
            #sideMenu.open a:active,
            #sideMenu.open a:focus,
            #sideMenu.open a:visited,
            #sideMenu.open ul li a:hover,
            #sideMenu.open ul li a:active,
            #sideMenu.open ul li a:focus,
            #sideMenu.open ul li a:visited {
                background: none !important;
                color: #000 !important;
                outline: none !important;
            }

        /* クリック時の一瞬の背景点滅も防止（特にモバイルSafari対策） */
        #sideMenu a,
        #sideMenu.open a,
        #sideMenu.open ul li a {
            -webkit-tap-highlight-color: transparent !important;
        }
    /* ▼ コード出力などの横スクロール対策 */
    pre.prettyprint {
        width: 100%;
        overflow-x: auto;
    }

    table {
        display: block; /* スクロールボックスとして扱う */
        overflow-x: auto; /* 横スクロールを許可 */
        -webkit-overflow-scrolling: touch; /* スマホでスムーズスクロール */
        white-space: nowrap; /* 折り返し防止（列が潰れないように） */
        width: 100%; /* 横幅はコンテナ内に合わせる */
        box-sizing: border-box; /* 余白の計算ずれ防止 */
    }

    th, td {
        white-space: nowrap; /* セル内テキストも折り返さない */
    }

    .mediaImg {
        max-width: 100%;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    #Index ul li a p {
        display: none !important;
    }
    #Index ul li > p {
        display: none !important;
    }

    #toTop {
        width: 6rem;
        height: 1.8rem;
        font-size: 0.9rem;
    }
}