/* ============================
   Mobile Pro - Phase 1
   トップページのみ: 情報密度向上
   ============================ */

/* トップページ + モバイルのみ適用 */
@media (max-width: 768px) {

    /* サービスカード圧縮（トップページ限定） */
    body.is-home .service-card {
        padding: 8px 10px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    body.is-home .services-grid {
        gap: 8px !important;
    }

    /* アイコンを横並び（左側固定） */
    body.is-home .service-icon {
        font-size: 1.2rem !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
        display: inline-block !important;
    }

    /* コンテンツエリア */
    body.is-home .service-card-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* 見出し圧縮 */
    body.is-home .service-card h3 {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    /* issuerタグ */
    body.is-home .service-card h3 .issuer {
        font-size: 0.65rem !important;
        margin-left: 0.25rem !important;
        opacity: 0.7 !important;
    }

    /* 説明文: 2行クランプ（必須） */
    body.is-home .service-card p {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        margin-bottom: 4px !important;
        color: rgba(0, 0, 0, 0.65) !important;
    }

    /* フッター圧縮 */
    body.is-home .service-card-footer {
        padding-top: 4px !important;
        margin-top: 0 !important;
    }

    /* ボタン最小化 */
    body.is-home .service-card-footer .btn {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
        border-radius: 12px !important;
    }

    /* ホバー効果調整 */
    body.is-home .service-card:hover {
        transform: translateY(-2px) !important;
    }

    /* ============================
       Phase 2: カードレイアウト最適化
       ============================ */

    /* 全カードのpadding/marginを削減 */
    .card {
        padding: calc(1rem * 0.7) !important;
        /* 30%削減 */
        margin: calc(1.5rem * 0.5) 0 !important;
        /* 50%削減 */
        line-height: 1.5 !important;
    }

    /* ネストされたカード構造を解消 - 直接配置に変更 */
    .card .card {
        /* ネストを解除し、直接配置用のスタイル */
        margin: 12px 0 !important;
        padding: calc(1rem * 0.7) !important;
    }

    /* セクションタイトルとカードグループの間の余白 */
    .section-title+.price-grid,
    .section-title+.card-grid,
    .section-title+.info-grid,
    .section-title+.pricing-grid {
        margin-top: -16px !important;
    }

    .section-title {
        margin-bottom: 16px !important;
    }

    /* カード間の余白を最大16pxに制限 */
    .price-grid,
    .card-grid,
    .info-grid {
        gap: min(1rem, 16px) !important;
    }

    /* サービス説明カード */
    .info-box {
        padding: calc(1.5rem * 0.7) !important;
        margin: calc(1.5rem * 0.5) 0 !important;
    }

    .info-box .info-box {
        padding: calc(1rem * 0.6) !important;
        margin: calc(1rem * 0.6) 0 !important;
    }

    /* 実績カード */
    .price-grid .card {
        padding: calc(1.5rem * 0.7) !important;
        margin: 0 !important;
    }

    /* フォームセクションカード */
    .form-section .card,
    .contact-form-container .card {
        padding: calc(2rem * 0.7) !important;
        margin: calc(2rem * 0.5) 0 !important;
    }

    /* サービス内容カード（パッケージ内） */
    .pricing-card,
    .package-card {
        padding: calc(2rem * 0.7) !important;
        margin: calc(2rem * 0.5) 0 !important;
    }

    .pricing-card .card,
    .package-card .card {
        padding: calc(1rem * 0.6) !important;
        margin: calc(1rem * 0.6) 0 !important;
    }

    /* テーブル内のカード風要素 */
    .data-table {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .data-table td,
    .data-table th {
        padding: calc(0.75rem * 0.7) !important;
    }

    /* ============================
       Phase 3: サービス詳細ページ
       ============================ */

    /* セクション余白削減 */
    section {
        padding: 1.5rem 0 !important;
    }

    section.bg-light {
        padding: 1.5rem 0 !important;
    }

    .container {
        padding: 0 1rem !important;
    }

    .content-section {
        margin: 0 !important;
    }

    /* 見出しアイコン横並び（h2, h3） */
    h2,
    h3 {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* アコーディオン（details/summary） */
    details.service-accordion {
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin-bottom: 0.75rem;
        background: white;
        overflow: hidden;
    }

    details.service-accordion>summary {
        list-style: none;
        cursor: pointer;
        padding: 0.75rem 1rem;
        background: rgba(26, 84, 144, 0.05);
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    details.service-accordion>summary::-webkit-details-marker {
        display: none;
    }

    details.service-accordion>summary::after {
        content: "▼";
        font-size: 0.7rem;
        color: var(--primary-color);
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }

    details.service-accordion[open]>summary::after {
        transform: rotate(180deg);
    }

    details.service-accordion>summary:active {
        background: rgba(26, 84, 144, 0.1);
    }

    details.service-accordion .accordion-content {
        padding: 1rem;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* カード余白削減 */
    .card {
        padding: 1rem !important;
        margin: 0.75rem 0 !important;
    }

    .price-grid {
        gap: 0.75rem !important;
    }

    /* info-box 圧縮 */
    .info-box {
        padding: 0.75rem 1rem !important;
        margin: 0.75rem 0 !important;
    }

    .info-box p {
        margin-bottom: 0.5rem !important;
    }

    /* FAQ余白削減 */
    .faq-item {
        margin-bottom: 0.75rem !important;
    }

    /* CTA余白削減 */
    .cta-section {
        padding: 2rem 1rem !important;
    }

    .cta-group {
        gap: 0.75rem !important;
        flex-direction: column !important;
    }

    .cta-group .btn {
        width: 100% !important;
    }

    /* ============================
       Phase 3: フォーム最適化
       ============================ */

    /* フォームページでボトムナビを非表示（送信ボタンと競合回避） */
    body.is-form .mobile-bottom-nav {
        display: none !important;
    }

    /* フォームコンテナ圧縮 */
    body.is-form .contact-form-container {
        padding: 0 !important;
    }

    body.is-form .contact-grid {
        gap: 0 !important;
    }

    /* info-box を折りたたみ可能に */
    body.is-form .info-box {
        padding: 0.75rem 1rem !important;
        margin: 0.5rem 0 !important;
    }

    body.is-form .info-box h4 {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
    }

    body.is-form .info-box p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* フォームグループ圧縮 */
    body.is-form .form-group {
        margin-bottom: 1rem !important;
    }

    body.is-form .form-group label {
        font-size: 0.9rem !important;
        margin-bottom: 0.4rem !important;
        font-weight: 600 !important;
    }

    body.is-form .form-group input,
    body.is-form .form-group select,
    body.is-form .form-group textarea {
        font-size: 0.9rem !important;
        padding: 0.6rem 0.75rem !important;
    }

    body.is-form .form-group textarea {
        min-height: 120px !important;
    }

    /* 補足説明を小さく */
    body.is-form .form-group p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.4rem !important;
    }

    /* 送信ボタン */
    body.is-form button[type="submit"] {
        width: 100% !important;
        padding: 0.9rem 1.5rem !important;
        font-size: 1rem !important;
        margin-top: 1rem !important;
    }

    /* ページヒーロー圧縮 */
    body.is-form .page-hero {
        padding: 2rem 1rem !important;
    }

    body.is-form .page-hero h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    body.is-form .page-hero p {
        font-size: 0.9rem !important;
    }

    /* ============================
       Phase 4: ナビ簡素化
       ============================ */

    /* 電話リンクを完全非表示 */
    .mobile-bottom-nav-item[href^="tel:"] {
        display: none !important;
    }

    /* ボトムナビを2項目に最適化 */
    .mobile-bottom-nav-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* タップ領域を56px相当に拡大 */
    .mobile-bottom-nav-item {
        min-height: 56px !important;
        padding: 8px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* アイコンを大きく */
    .mobile-bottom-nav-icon {
        font-size: 1.5rem !important;
        line-height: 1 !important;
    }

    /* テキストを大きく */
    .mobile-bottom-nav-item>span:not(.mobile-bottom-nav-icon) {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    /* safe-area対応 */
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* ============================
       Phase 5: 法人/士業トーン統一
       ============================ */

    /* 絵文字アイコンを最小記号に置換 */
    .service-icon,
    .mobile-bottom-nav-icon {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        font-weight: 400 !important;
    }

    /* ボトムナビアイコンをSVGアイコンに */
    .mobile-bottom-nav-item[href="/"] .mobile-bottom-nav-icon::before {
        content: "" !important;
        display: inline-block !important;
        width: 24px !important;
        height: 24px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a365d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .mobile-bottom-nav-item[href*="line.me"] .mobile-bottom-nav-icon::before {
        content: "" !important;
        display: inline-block !important;
        width: 24px !important;
        height: 24px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a365d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .mobile-bottom-nav-item[href="/contact"] .mobile-bottom-nav-icon::before {
        content: "" !important;
        display: inline-block !important;
        width: 24px !important;
        height: 24px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a365d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .mobile-bottom-nav-icon {
        font-size: 0 !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ============================
       Phase 7: 料金と納期セクション最適化
       ============================ */

    /* 料金と納期セクションのスペース削減 */
    .content-section h2 {
        margin-bottom: 16px !important;
    }

    .timeline {
        margin: 0 0 12px 0 !important;
    }

    .timeline-item {
        margin-bottom: 12px !important;
        padding: 14px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    }

    /* PSAカード（最重要サービス）の強調 */
    .timeline-item:first-child {
        border-left: 4px solid #3182CE !important;
        background: #F0F7FF !important;
    }

    /* DFAカードの強調 */
    .timeline-item:nth-child(2) {
        border-left: 2px solid #CBD5E0 !important;
    }

    /* タイポグラフィ調整 */
    .timeline-item strong,
    .timeline-item h3 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1a365d !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    .timeline-item:nth-child(2) strong,
    .timeline-item:nth-child(2) h3,
    .timeline-item:nth-child(3) strong,
    .timeline-item:nth-child(3) h3 {
        font-size: 15px !important;
    }

    .timeline-item p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #4A5568 !important;
        margin: 0 !important;
    }

    /* 角丸を控えめに統一 */
    .card,
    .service-card,
    .info-box,
    details.service-accordion,
    .btn {
        border-radius: 4px !important;
    }

    /* 影を最小化 */
    .card,
    .service-card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }

    .card:hover,
    .service-card:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }

    /* タイポグラフィスケール統一 */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        font-weight: 700 !important;
    }

    h2 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
        font-weight: 600 !important;
    }

    h3 {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
    }

    h4 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
    }

    p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.75rem !important;
    }

    /* ボタンを控えめに */
    .btn {
        padding: 0.65rem 1.25rem !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }

    .btn-accent,
    .btn-primary {
        background: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }

    .btn-secondary {
        background: transparent !important;
        border: 1px solid var(--primary-color) !important;
        color: var(--primary-color) !important;
    }

    /* セクション余白を最小化 */
    section {
        padding: 1.25rem 0 !important;
    }

    .container {
        padding: 0 1rem !important;
    }

    /* カード余白を最小化 */
    .card {
        padding: 0.85rem !important;
        margin: 0.5rem 0 !important;
    }

    /* リスト余白を最小化 */
    ul,
    ol {
        margin: 0.5rem 0 !important;
        padding-left: 1.25rem !important;
    }

    li {
        margin-bottom: 0.35rem !important;
    }

    /* ページヒーロー最小化 */
    .page-hero {
        padding: 1.5rem 1rem !important;
        background: linear-gradient(135deg, rgba(26, 84, 144, 0.03) 0%, rgba(45, 143, 170, 0.03) 100%) !important;
    }

    .page-hero h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
    }

    .page-hero p {
        font-size: 0.85rem !important;
        opacity: 0.8 !important;
    }

    /* info-box を控えめに */
    .info-box {
        background: rgba(26, 84, 144, 0.03) !important;
        border-left: 3px solid var(--primary-color) !important;
        border-radius: 0 !important;
        padding: 0.75rem 1rem !important;
        margin: 0.5rem 0 !important;
    }

    /* 価格グリッド最適化 */
    .price-grid {
        gap: 0.5rem !important;
    }

    /* CTA余白削減 */
    .cta-section {
        padding: 1.5rem 1rem !important;
        background: rgba(26, 84, 144, 0.02) !important;
    }

    .cta-section h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    .cta-section p {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* フッター余白削減 */
    footer {
        padding: 2rem 0 1rem !important;
    }

    .footer-container {
        gap: 1.5rem !important;
    }

    /* ブレッドクラム最小化 */
    .breadcrumb {
        padding: 0.5rem 0 !important;
        font-size: 0.8rem !important;
    }

    /* テーブル最適化 */
    table {
        font-size: 0.85rem !important;
    }

    th,
    td {
        padding: 0.5rem !important;
    }
}