@media screen and (max-width: 768px) {
    /* =========================================
       Puzzle Grid
       ========================================= */
    .puzzle-grid {
        grid-template-columns: repeat(auto-fill, 25vw);
        grid-auto-rows: 25vw;
        /* 外側1列分を確保するために位置を調整 */
        top: -25vw;
        left: -25vw;
        width: 150vw;
        height: calc(100% + 50vw);
    }

    /* =========================================
       Center Logo
       ========================================= */
    .center-logo-wrapper {
        width: 70vw;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* モバイルでは左ではなく「上」に移動させる */
    .center-logo-wrapper.move-left {
        transform: translateY(-28vh) scale(0.65);
    }

    .center-logo-wrapper.move-left.is-detail {
        transform: translateY(-42vh) scale(0.4);
    }

    /* =========================================
       Navigation Menu
       ========================================= */
    .main-nav {
        width: 100vw;
        height: 52vh;
        top: auto;
        bottom: 20vh;
        right: 0;
        padding-left: 0;
        align-items: center;
        justify-content: center;
        transition: transform 0.8s ease, opacity 0.8s ease;
    }

    .main-nav.is-detail {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        padding: 0 1vw;
        /* 高さと位置は初期状態を維持し、transform でのみ制御する */
        transform: translateY(24vh); /* 22vh から 24vh に微調整（モーダル下端と底辺の中間へ） */
        opacity: 1;
    }

    /* 個別アイテムの横並びをFlexboxに任せるため、手動のtransformを解除 */
    .main-nav.is-detail .nav-item {
        font-size: 2.8vw; /* はみ出し防止のため、さらに少し縮小 */
        margin: 0;
        transform: translateY(0) !important;
        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        white-space: nowrap;
    }

    .nav-item {
        font-size: 6.5vw; /* モバイルで見やすい大きさに拡大 */
        margin: 2vh 0;
        padding-bottom: 0.2vh;
    }

    /* ホバー時の挙動をタップ前提で調整（右スライドを控えめに） */
    .nav-item.is-visible:hover {
        transform: translateX(0); /* モバイルでは横移動させない */
        color: #3dbb73;
    }

    .nav-item::after {
        height: 3px; /* 下線を少し細く */
    }

    /* =========================================
       Floating Particles
       ========================================= */
    .puzzle-piece {
        --piece-size: 25vw;
        --tab-size: 5vw;
    }

    .floating-piece {
        --piece-size: 12vw; /* 浮遊ピースも少し大きく調整 */
        --tab-size: 2.4vw;
    }

    /* モバイル用モーダル調整 */
    .content-modal {
        width: 92vw;
        height: 72vh;
    }

    .modal-body {
        padding: 5vh 6vw;
    }

    .modal-title {
        font-size: 1.8rem;
    }

    .modal-text {
        font-size: 0.95rem;
    }

    .modal-image-container {
        justify-content: center;
    }

    /* モバイル用お問い合わせ固定ボタン調整（公式LINEの上にスタック配置） */
    .contact-fixed-btn {
        right: 20px;  /* LINEボタンと右端を揃える */
        bottom: 125px; /* LINEラベルの突き出しを避けてさらに上に配置（109pxから125pxへ微調整） */
        width: 77px;
        height: 77px;
    }

    .contact-btn-label {
        bottom: 72px;
        left: calc(50% + 4px);
        font-size: 13px;
        font-weight: 900;
    }

    /* モーダル展開時は公式LINEの左隣へ縮小移動（サイズ0.6倍） */
    .contact-fixed-btn.is-detail {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-54px) translateY(calc(-100dvh + 235px)) scale(0.6) translateZ(0);
        transform-origin: top right;
    }

    /* モバイル用LINEボタン調整 */
    .line-fixed-btn {
        right: 20px;
        bottom: 20px;
        width: 77px; /* 90px * 0.85 */
        height: 77px; /* 90px * 0.85 */
    }

    .line-btn-label {
        bottom: 72px; /* アイコンに食い込ませて空白を90%以上削減 */
        left: calc(50% + 4px); /* パズルの凸凹を考慮して右へ微調整 */
        font-size: 13px;
        font-weight: 900;
    }

    /* モーダル展開時に右上へ縮小移動（サイズ0.6倍、位置を下方向へさらに15%調整） */
    .line-fixed-btn.is-detail {
        transform: translateY(calc(-100dvh + 130px)) scale(0.6) translateZ(0);
        transform-origin: top right;
    }

    /* モバイル用にモーダルのパディングとギャップを調整 */
    .staff-links-container {
        gap: 12px;
        margin-top: 15px;
    }

    .staff-link-card {
        padding: 12px 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.6); /* タップしやすいように背景を少し濃く */
    }

    .card-icon-wrapper {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        border-radius: 10px;
    }

    .card-puzzle-svg {
        width: 20px;
        height: 20px;
    }

    .card-title {
        font-size: 0.95rem;
        margin-bottom: 2px;
    }

    .card-desc {
        font-size: 0.75rem;
        line-height: 1.3;
    }
    
    .card-arrow {
        font-size: 1rem;
    }
}