/* サービスページ モバイル向けスタイル */

@media (max-width: 640px) {
    /* 横並びナビゲーションは常に非表示 */
    .service-nav-wrapper,
    .service-nav-wrapper.scrolled {
        display: none !important;
    }

    /* トグルボタンを常に表示 */
    .service-nav-toggle {
        width: 45px;
        height: 45px;
        top: 70px;
    }

    /* モバイル用の矢印サイズ調整 */
    .service-nav-toggle::before,
    .service-nav-toggle::after {
        width: 8px;
        height: 8px;
        border-right: 2.5px solid white;
        border-top: 2.5px solid white;
    }

    .service-nav-toggle::before {
        left: 13px;
    }

    .service-nav-toggle::after {
        left: 19px;
    }

    .service-nav-toggle.active::before {
        left: 19px;
    }

    .service-nav-toggle.active::after {
        left: 13px;
    }

    /* トグルで表示される右側メニュー */
    .service-nav-wrapper.mobile-visible {
        display: block !important;
        max-width: 160px;
        top: 125px;
    }

    .service-nav-wrapper.mobile-visible .service-nav-button {
        padding: 0.5rem 0.6rem;
    }

    .service-nav-wrapper.mobile-visible .service-nav-button img {
        width: 28px;
        height: 28px;
    }

    .service-nav-wrapper.mobile-visible .service-nav-button span {
        font-size: 0.75rem;
    }

    /* 説明文 */
    .service-intro-text {
        font-size: 1rem;
        padding: 0 1rem;
    }

    /* サービスカード */
    .service-card {
        padding: 1.5rem 1rem;
        margin-bottom: 1.5rem;
        border-left: 3px solid var(--accent-orange);
        scroll-margin-top: 100px;
    }

    .service-card-header {
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .service-card-icon {
        width: 45px;
        height: 45px;
    }

    .service-card-title {
        font-size: 1.5rem;
    }

    .service-card-lead {
        font-size: 0.95rem;
        line-height: 1.8;
        margin-bottom: 1rem;
    }

    .service-card-description,
    .service-card-description-multi {
        font-size: 0.9rem;
        line-height: 1.8;
        padding-left: 0.8rem;
    }

    .service-card-description-multi {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    /* さらに小さい画面向け */
    .service-card {
        padding: 0.5rem 0.8rem;
    }

    .service-card-header {
        gap: 0.5rem;
    }

    .service-card-icon {
        width: 38px;
        height: 38px;
    }

    .service-card-title {
        font-size: 1.3rem;
    }

    .service-card-lead {
        font-size: 0.9rem;
    }

    .service-card-description,
    .service-card-description-multi {
        font-size: 0.85rem;
        line-height: 1.7;
    }
}