/* カートラブルサポート - 最小化CSS（使用中のコードのみ） */

/* ===== 基本設定 + レスポンシブ最適化 ===== */
:root {
    --primary: #1E4A72;
    --emergency: #E53E3E;
    --text: #1a202c;
    --text-light: #4a5568;
    --background: #fff;
    --gray-light: #F7FAFC;
    --font-primary: 'Inter', 'Noto Sans JP', sans-serif;
    
    /* スペーシング体系統一 */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-2xl: 3rem;    /* 48px */
    
    /* 既存スペーシング（互換性維持） */
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --spacing-2xl: var(--space-2xl);
    
    /* フォントサイズ体系（14px以上保証・WCAG準拠） */
    --font-xs: clamp(14px, 3.5vw, 16px);    /* 最小14px */
    --font-sm: clamp(16px, 4vw, 18px);
    --font-md: clamp(18px, 4.5vw, 20px);
    --font-lg: clamp(20px, 5vw, 24px);
    --font-xl: clamp(24px, 6vw, 32px);
    
    /* タッチターゲット（48px以上保証・Apple HIG準拠） */
    --touch-min: 48px;
    --touch-comfortable: 56px;
    
    /* レスポンシブ半径（統一版） */
    --radius-sm: clamp(6px, 1.5vw, 8px);
    --radius-md: clamp(8px, 2vw, 12px);
    --radius-lg: clamp(12px, 3vw, 16px);
    
    /* シャドウ・エフェクト */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --transition: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== 新グラデーション体系（ブランド統一） ===== */
    /* プライマリブランドグラデーション */
    --gradient-brand-primary: linear-gradient(135deg, #1e3a8a 0%, #1e40af 35%, #1d4ed8 70%, #2563eb 100%);
    --gradient-brand-emergency: linear-gradient(145deg, #dc2626 0%, #ef4444 35%, #b91c1c 70%, #991b1b 100%);
    --gradient-brand-success: linear-gradient(120deg, #059669 0%, #10b981 40%, #34d399 80%, #6ee7b7 100%);
    --gradient-brand-warning: linear-gradient(130deg, #f59e0b 0%, #fbbf24 40%, #fde047 80%, #fef3c7 100%);
    
    /* セクション別専用グラデーション */
    --gradient-hero: linear-gradient(180deg, rgba(30, 74, 114, 0.95) 0%, rgba(37, 99, 235, 0.8) 40%, rgba(220, 38, 38, 0.7) 80%, rgba(255, 255, 255, 0.9) 100%);
    --gradient-service: radial-gradient(ellipse at top left, rgba(30, 74, 114, 0.9) 0%, rgba(37, 99, 235, 0.8) 50%, rgba(30, 74, 114, 0.95) 100%);
    --gradient-price: radial-gradient(circle at 20% 80%, rgba(220, 38, 38, 0.6) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.5) 0%, transparent 50%), linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(226, 232, 240, 0.9) 100%);
    --gradient-footer: linear-gradient(165deg, #f8fafc 0%, #e2e8f0 30%, rgba(30, 74, 114, 0.8) 70%, #f1f5f9 100%);
    
    /* CTAボタン用3Dグラデーション */
    --gradient-cta-3d: linear-gradient(145deg, #dc2626 0%, #ef4444 25%, #dc2626 50%, #b91c1c 75%, #7f1d1d 100%);
    --gradient-cta-3d-hover: linear-gradient(145deg, #ef4444 0%, #f87171 25%, #ef4444 50%, #dc2626 75%, #b91c1c 100%);
    
    /* プロフェッショナル・グラデーション（統一設計） */
    --gradient-professional: linear-gradient(135deg, #1e3a8a 0%, #1e40af 30%, #2563eb 70%, #3b82f6 100%);
    
    /* 3D効果用ボックスシャドウ */
    --shadow-cta-3d: 0 4px 15px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    --shadow-cta-3d-hover: 0 8px 25px rgba(220, 38, 38, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    --shadow-cta-3d-active: 0 2px 10px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text);
    background-color: var(--background);
    overflow-x: hidden;
}

/* ===== ヘッダー・ナビゲーション ===== */
/* ===== Bootstrap基本サポート ===== */
.collapse:not(.show) {
    display: none;
}

/* ===== モバイル特化ヘッダー ===== */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(30, 74, 114, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.mobile-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem clamp(1rem, 4vw, 1.5rem);
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

/* ===== 左側: ロゴエリア ===== */
.mobile-header-left {
    flex: 1;
}

.mobile-brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.mobile-brand-logo:hover,
.mobile-brand-logo:active {
    color: var(--primary);
    text-decoration: none;
}

.mobile-brand-logo i {
    font-size: 1.3rem;
    color: var(--emergency);
}

/* ===== 右側: 電話+メニューエリア ===== */
.mobile-header-right {
    display: flex;
    alignItems: center;
    gap: 0.75rem;
}

/* ===== ヘッダー内緊急電話ボタン ===== */
.mobile-header-phone {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--emergency);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(229, 62, 62, 0.3);
    transition: all 0.3s ease;
    min-height: 36px; /* タッチターゲット */
    min-width: 60px;
}

.mobile-header-phone:hover,
.mobile-header-phone:active {
    background: #d73030;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.4);
    color: white;
    text-decoration: none;
}

.mobile-header-phone i {
    font-size: 1rem;
    animation: phoneShake 3s ease-in-out infinite;
}

@keyframes phoneShake {
    0%, 90%, 100% { transform: rotate(0deg); }
    92% { transform: rotate(-5deg); }
    94% { transform: rotate(5deg); }
    96% { transform: rotate(-5deg); }
    98% { transform: rotate(5deg); }
}

.phone-text {
    font-size: 0.85rem;
}

/* ===== ハンバーガーメニューボタン ===== */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--touch-min);
    height: var(--touch-min);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}

.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--primary);
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 1px;
}

.mobile-menu-toggle:hover span {
    background: var(--emergency);
}

/* メニュー開閉アニメーション */
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== ドロップダウンメニュー ===== */
.mobile-menu-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(30, 74, 114, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.mobile-menu-collapse.show {
    display: block;
    animation: menuSlideDown 0.3s ease-out;
}

@keyframes menuSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu-container {
    padding: 1rem clamp(1rem, 4vw, 1.5rem);
    max-width: 480px;
    margin: 0 auto;
}

/* ===== メニューアイテム ===== */
.mobile-menu-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(30, 74, 114, 0.05);
    border-radius: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-height: 44px; /* タッチターゲット */
    border: 1px solid rgba(30, 74, 114, 0.1);
}

.mobile-menu-item:hover,
.mobile-menu-item:active {
    background: rgba(30, 74, 114, 0.1);
    transform: translateY(-1px);
    color: var(--emergency);
    text-decoration: none;
}

.mobile-menu-item i {
    font-size: 1.1rem;
    color: var(--emergency);
    min-width: 16px;
}

/* ===== メニュー内緊急電話 ===== */
.mobile-menu-emergency {
    border-top: 1px solid rgba(30, 74, 114, 0.1);
    padding-top: 1rem;
}

.mobile-emergency-full {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--gradient-brand-emergency);
    color: white;
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
    transition: all 0.3s ease;
    min-height: 60px;
}

.mobile-emergency-full:hover,
.mobile-emergency-full:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4);
    color: white;
    text-decoration: none;
}

.emergency-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    animation: emergencyPulse 2s ease-in-out infinite;
}

@keyframes emergencyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.emergency-content {
    flex: 1;
}

.emergency-number {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem;
}

.emergency-label {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* ===== 新デバイス対応ブレークポイント ===== */

/* === iPhone Plus/Max対応 (414px) === */
@media (max-width: 414px) {
    .mobile-header-container {
        padding: 0.8rem clamp(1rem, 4vw, 1.25rem);
        max-width: 100%;
    }

    .mobile-brand-logo {
        font-size: clamp(1.05rem, 4.3vw, 1.15rem);
    }

    .mobile-header-phone {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        min-width: var(--touch-min);
    }

    .hero-title-mobile {
        font-size: clamp(2.6rem, 9vw, 3.6rem);
    }

    .price-amount-mobile {
        font-size: 3.6rem;
    }

    .service-icon {
        width: clamp(260px, 75vw, 280px);
        height: clamp(100px, 24vw, 140px);
    }

    .nav-item {
        min-width: var(--touch-min);
        font-size: var(--font-xs);
        padding: 8px clamp(6px, 1.5vw, 10px);
    }
}

/* === iPhone 12/13/14対応 (390px) === */
@media (max-width: 390px) {
    .mobile-header-container {
        padding: 0.75rem clamp(0.875rem, 3.5vw, 1.125rem);
        max-width: 100%;
    }

    .mobile-brand-logo {
        font-size: clamp(1rem, 4.2vw, 1.1rem);
    }

    .mobile-header-phone {
        padding: 0.45rem 0.7rem;
        font-size: 0.85rem;
        min-width: var(--touch-min);
    }

    .hero-title-mobile {
        font-size: clamp(2.4rem, 8.5vw, 3.2rem);
    }

    .price-amount-mobile {
        font-size: 3.2rem;
    }

    .service-icon {
        width: clamp(250px, 72vw, 280px);
        height: clamp(95px, 22vw, 140px);
    }


}

/* ===== 小さなデバイス対応 ===== */
/* タブレット以上での最適化 */
@media (min-width: 481px) {

    
    .mobile-header-container {
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 375px) {
    .mobile-header-container {
        padding: 0.75rem clamp(0.75rem, 3vw, 1rem);
        max-width: 100%;
    }
    
    .mobile-brand-logo {
        font-size: clamp(0.9rem, 4vw, 1rem);
    }
    
    .mobile-header-phone {
        padding: 0.4rem 0.6rem;
        min-width: var(--touch-min);
    }
    
    .phone-text {
        display: none;
    }
    
    .mobile-menu-items {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    

}

/* === 最小スマホ対応 (320px) === */
@media (max-width: 320px) {
    .mobile-header-container {
        padding: 0.5rem clamp(0.5rem, 2.5vw, 0.75rem);
        max-width: 100%;
    }

    .mobile-brand-logo {
        font-size: clamp(0.8rem, 3.5vw, 0.9rem);
    }

    .mobile-header-phone {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
        min-width: var(--touch-min);
    }

    .hero-title-mobile {
        font-size: clamp(2rem, 7vw, 2.8rem);
    }

    .price-amount-mobile {
        font-size: 3rem;
    }

    .service-icon {
        width: clamp(200px, 85vw, 240px);
        height: clamp(75px, 25vw, 100px);
    }



    .mobile-menu-items {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }
}

/* ===== モバイル特化ヒーローセクション ===== */
.hero-mobile-optimized {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding-top: 70px; /* モバイルヘッダー分のスペース */
}

.hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(30, 74, 114, 0.1) 0%, 
        rgba(247, 250, 252, 0.3) 50%,
        rgba(30, 74, 114, 0.1) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><pattern id="road" patternUnits="userSpaceOnUse" width="40" height="40"><rect width="40" height="40" fill="%23f7fafc"/><circle cx="20" cy="20" r="15" fill="%23e2e8f0" opacity="0.5"/></pattern></defs><rect width="400" height="400" fill="url(%23road)"/><path d="M0,200 Q100,180 200,200 T400,200" stroke="%231E4A72" stroke-width="3" fill="none" opacity="0.3"/><circle cx="80" cy="200" r="25" fill="%231E4A72" opacity="0.1"/><circle cx="320" cy="200" r="20" fill="%23E53E3E" opacity="0.1"/></svg>');
    background-size: cover;
    background-position: center;
    filter: brightness(1.1) contrast(1.1);
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.2) 0%,
        rgba(247,250,252,0.4) 50%,
        rgba(255,255,255,0.2) 100%
    );
}

/* ===== モバイル特化コンテナ ===== */
.hero-mobile-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0 auto;
}

/* ===== メインヘッドライン ===== */
.hero-headline-mobile {
    text-align: center;
    margin-bottom: 1rem;
}

.hero-title-mobile {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
    font-weight: 900;
    color: var(--primary);
    text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    line-height: 1.1;
    margin: 0;
}

.title-accent-mobile {
    color: var(--emergency);
    font-size: 1.1em;
}

/* ===== 価格表示（モバイル特化） ===== */
.hero-price-mobile {
    margin-bottom: 1.5rem;
}

.price-card-mobile {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    border: 3px solid var(--primary);
    box-shadow: 0 8px 32px rgba(30, 74, 114, 0.15);
    position: relative;
    overflow: hidden;
}

.price-card-mobile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-brand-primary);
}

.price-header-mobile {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.price-main-mobile {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0.5rem;
}

.price-amount-mobile {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--emergency);
    line-height: 1;
}

.price-unit-mobile {
    font-size: 1.4rem;
    color: var(--text);
    font-weight: 700;
}

.price-note-mobile {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 500;
}

/* ===== サービス一覧（モバイル特化） ===== */
.hero-services-mobile {
    margin-bottom: 1.5rem;
}

.services-header-mobile {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin-bottom: 1rem;
}

.services-grid-mobile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.service-card-mobile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    font-weight: 600;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    min-height: 50px; /* タッチターゲット */
}

.service-card-mobile:active {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.service-card-mobile i {
    font-size: 1.5rem;
    color: var(--emergency);
    min-width: 24px;
}

.service-card-mobile span {
    font-size: 1.1rem;
}

/* ===== 信頼要素（モバイル特化） ===== */
.hero-trust-mobile {
    margin-bottom: 1.5rem;
}

.trust-grid-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.trust-card-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: rgba(30, 74, 114, 0.1);
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary);
    border: 1px solid rgba(30, 74, 114, 0.2);
    text-align: center;
    min-height: 70px; /* タッチターゲット */
}

.trust-card-mobile i {
    color: var(--emergency);
    font-size: 1.25rem;
}

/* ===== 下部CTA ===== */
.hero-bottom-cta {
    text-align: center;
    margin-top: 1rem;
}

.cta-message {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.btn-cta-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--gradient-primary-3d);
    color: white;
    padding: 1.25rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: var(--shadow-primary-3d);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    min-height: 50px; /* タッチターゲット */
    width: 100%;
    transform: translateY(0);
}

.btn-cta-mobile:hover,
.btn-cta-mobile:active {
    background: var(--gradient-primary-3d-hover);
    box-shadow: var(--shadow-primary-3d-hover);
    transform: translateY(-3px);
    color: white;
    text-decoration: none;
}

.btn-cta-mobile:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary-3d-active);
}

.btn-cta-mobile i {
    font-size: 1.2rem;
}

/* ===== 高さ制限対応 ===== */
@media (max-height: 640px) {
    .hero-mobile-optimized {
        min-height: auto;
        padding-top: 60px;
    }
    
    .hero-mobile-container {
        gap: 1rem;
    }
    
    .hero-title-mobile {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }
}





/* ===== スクリーンリーダー対応 ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== アクセシビリティ対応 ===== */
*:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    :root {
        --text: #000;
        --text-light: #333333;
        --primary: #0066cc;
        --emergency: #cc0000;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== モバイル特化のみ - デスクトップルール削除完了 ===== */

/* ===== 緊急電話ボタン（最上部） ===== */
.hero-emergency-call {
    text-align: center;
    margin-bottom: 1rem;
}

.emergency-badge {
    background: var(--emergency);
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    display: inline-block;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.btn-emergency-mobile {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--gradient-cta-3d);
    color: white;
    padding: 1.5rem;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: var(--shadow-cta-3d);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    min-height: 60px; /* タッチターゲット最小サイズ */
    width: 100%;
    justify-content: center;
    transform: translateY(0);
}

.btn-emergency-mobile:hover,
.btn-emergency-mobile:active {
    background: var(--gradient-cta-3d-hover);
    box-shadow: var(--shadow-cta-3d-hover);
    transform: translateY(-3px);
    color: white;
    text-decoration: none;
}

.btn-emergency-mobile:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-cta-3d-active);
}

.btn-icon-mobile {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    animation: phoneRing 2s ease-in-out infinite;
}

@keyframes phoneRing {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-10deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
}

.btn-content-mobile {
    text-align: left;
}

.btn-number-mobile {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
}

.btn-label-mobile {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ===== 小さなデバイス対応（ヒーロー用） ===== */
@media (max-width: 375px) {
    .hero-mobile-container {
        padding: 0.75rem;
        gap: 1.25rem;
    }
    
    .hero-title-mobile {
        font-size: clamp(1.8rem, 10vw, 3rem);
    }
    
    .price-amount-mobile {
        font-size: 3rem;
    }
    
    .btn-emergency-mobile {
        padding: 1.25rem;
    }
    
    .btn-number-mobile {
        font-size: 1.3rem;
    }
    
    .trust-grid-mobile {
        grid-template-columns: 1fr;
    }
    
    .trust-card-mobile {
        flex-direction: row;
        justify-content: center;
        min-height: 50px;
    }
}

/* ===== フェーズ1: 新規セクション群 ===== */

/* ===== 共通セクションスタイル ===== */
.section-container {
    max-width: 100%;
    padding: var(--spacing-xl) var(--spacing-md);
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
    text-align: center;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    margin-bottom: 3rem;
}

/* ===== 選ばれる理由セクション ===== */
.why-chosen-section {
    background: var(--gray-light);
    padding: var(--spacing-2xl) 0;
}

.why-chosen-section .section-title {
    background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.why-chosen-section .section-title::before {
    content: '🏆';
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    font-size: 2rem;
    filter: drop-shadow(0 4px 8px rgba(44, 90, 160, 0.3));
}

.why-chosen-section .section-subtitle {
    color: #2c5aa0;
    font-weight: 600;
    background: rgba(44, 90, 160, 0.1);
    padding: 12px 24px;
    border-radius: 25px;
    display: inline-block;
    margin: 0 auto 3rem auto;
    border: 2px solid rgba(44, 90, 160, 0.2);
}

.why-chosen-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.why-card {
    background: var(--background);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition);
}

.why-card:hover {
    transform: translateY(-2px);
}

.why-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.why-icon i {
    font-size: 1.5rem;
    color: white;
}

.why-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

.why-highlight {
    background: var(--gradient-brand-emergency);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    display: inline-block;
}

.why-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-features li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

.why-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: bold;
}

/* ===== 解決フローセクション ===== */
.solution-flow-section {
    background: var(--background);
    padding: var(--spacing-2xl) 0;
}

.solution-flow-section .section-title {
    background: var(--gradient-brand-success);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}



.solution-flow-section .section-subtitle {
    background: var(--gradient-brand-success);
    color: white;
    padding: 16px 32px;
    border-radius: 30px;
    display: inline-block;
    margin: 0 auto 3rem auto;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    position: relative;
}

.solution-flow-section .section-subtitle::after {
    content: '✨';
    margin-left: 8px;
}

/* 新しいスマートフローデザイン */
.flow-steps {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* プログレスバー */
.flow-steps::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 80px;
    bottom: 120px;
    width: 4px;
    background: linear-gradient(to bottom, 
        #10b981 0%, 
        #10b981 80%, 
        #e5e7eb 80%, 
        #e5e7eb 100%);
    border-radius: 2px;
    z-index: 1;
}

.flow-step {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.flow-step:last-child {
    margin-bottom: 0;
}

/* ステップ番号の強化 */
.step-number {
    width: 100px;
    height: 100px;
    background: var(--gradient-brand-success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    border: 4px solid white;
    position: relative;
    animation: stepPulse 3s ease-in-out infinite;
}

.step-number::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    animation: ripple 2s ease-out infinite;
}

@keyframes stepPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* ステップカード */
.step-content {
    flex: 1;
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(16, 185, 129, 0.1);
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.step-content::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid white;
    filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.1));
}

.step-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
}

.step-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* 時間表示の強化 */
.step-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-brand-warning);
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    position: relative;
}

.step-time::before {
    content: '⏱️';
    font-size: 0.9rem;
}

.step-time::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 25px;
    animation: timeShimmer 3s ease-in-out infinite;
}

@keyframes timeShimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.step-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-details li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.4rem;
    color: #4b5563;
    line-height: 1.5;
    font-size: 0.95rem;
}

.step-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.7rem;
}

/* アイコンの強化 */
.step-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    margin-bottom: 1rem;
}

.step-icon i {
    font-size: 1.5rem;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* サマリーセクションの強化 */
.flow-summary {
    text-align: center;
    margin-top: 60px;
}

.summary-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 32px;
    border-radius: 25px;
    box-shadow: 0 15px 50px rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.summary-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: summaryShine 4s ease-in-out infinite;
}

@keyframes summaryShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.summary-badge i {
    font-size: 3rem;
    flex-shrink: 0;
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.summary-text {
    text-align: left;
}

.summary-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.summary-subtitle {
    font-size: 1rem;
    opacity: 0.95;
    line-height: 1.5;
}

/* ===== キャンペーンセクション ===== */
.campaign-section {
    padding: var(--spacing-2xl) 0;
    position: relative;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    overflow: hidden;
}

.campaign-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
}

.campaign-background {
    position: relative;
    z-index: 1;
}

.campaign-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
    z-index: 2;
}

.campaign-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    animation: campaignPulse 3s ease-in-out infinite;
}

@keyframes campaignPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 12px 35px rgba(251, 191, 36, 0.5); }
}

.campaign-section .section-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
}


.campaign-section .section-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xl);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}

.campaign-content {
    position: relative;
    z-index: 1;
}

.campaign-details {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.campaign-period {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.campaign-period i {
    color: #fbbf24;
    font-size: 1.2rem;
}

.campaign-offer {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.offer-card {
    background: white;
    color: var(--text);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    max-width: 320px;
    margin: 0 auto var(--spacing-xl) auto;
    border: 3px solid #fbbf24;
    position: relative;
    transform: scale(1.05);
}

.offer-card::before {
    content: '🔥 限定特価';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #fbbf24;
    color: white;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.offer-badge {
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
    color: var(--text-light);
    text-align: center;
}

.offer-discount {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
    color: var(--emergency);
    text-align: center;
    text-shadow: none;
}

.offer-note {
    font-size: 1rem;
    color: var(--text-light);
    text-align: center;
    font-weight: 600;
}

.campaign-conditions h4 {
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.campaign-conditions ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.campaign-conditions li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: var(--spacing-sm);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.campaign-conditions li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #fbbf24;
    font-weight: bold;
    font-size: 1.1rem;
}

.campaign-cta {
    text-align: center;
    position: relative;
    z-index: 2;
}

.campaign-cta-header {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.btn-campaign-emergency {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: white;
    color: #1a1a1a;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 700;
    box-shadow: var(--shadow-secondary-3d);
    max-width: 380px;
    margin: 0 auto var(--spacing-lg);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

/* ホバーアニメーション削除済み */

.btn-campaign-icon {
    width: 50px;
    height: 50px;
    background: var(--emergency);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: phoneRing 2s ease-in-out infinite;
}

.btn-campaign-icon i {
    font-size: 1.3rem;
}

.btn-campaign-content {
    flex: 1;
    text-align: left;
    color: #1a1a1a;
}

.btn-campaign-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--emergency);
    margin-bottom: 0.25rem;
}

.btn-campaign-labels {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.btn-campaign-labels span {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
    line-height: 1.3;
}

.btn-campaign-labels span:first-child {
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
}

.campaign-message {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
}

/* ===== レスポンシブ調整（320px対応） ===== */
@media (max-width: 375px) {
    .section-container {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .why-icon {
        width: 50px;
        height: 50px;
    }
    
    .why-icon i {
        font-size: 1.3rem;
    }
    
    .campaign-title {
        font-size: 1.6rem;
    }
    
    .offer-discount {
        font-size: 2rem;
    }
    
    .btn-campaign-emergency {
        padding: var(--spacing-md);
    }
    
    .btn-campaign-number {
        font-size: 1.1rem;
    }
}

/* ===== フェーズ2: 詳細情報セクション群 ===== */

/* ===== サービス一覧セクション ===== */
.services-section {
    background: var(--background);
    padding: var(--spacing-2xl) 0;
}

.services-section .section-title {
    color: #1a1a1a;
    position: relative;
}



.services-section .section-subtitle {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    padding: 14px 28px;
    border-radius: 25px;
    display: inline-block;
    margin: 0 auto 3rem auto;
    font-weight: 600;
    border: 2px solid rgba(16, 185, 129, 0.3);
    position: relative;
}

.services-section .section-subtitle::before {
    content: '✓';
    margin-right: 8px;
}

.services-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.service-card {
    background: var(--background);
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.service-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.service-icon {
    width: 100%;
    max-width: 280px;
    height: 140px;
    background: var(--gradient-professional);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md) auto;
    overflow: hidden;
}

.service-icon i {
    font-size: 1.8rem;
    color: white;
}

.service-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.service-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--spacing-md);
}

.service-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: var(--spacing-md);
}

.price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--emergency);
}

.price-unit {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--emergency);
}

.price-note {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-left: 0.5rem;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
}

.service-features li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: bold;
}

.btn-service-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: var(--emergency);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition);
    min-height: 44px;
    width: 100%;
}

.btn-service-call:hover {
    background: #d73030;
    transform: translateY(-1px);
    color: white;
    text-decoration: none;
}

.pricing-notes {
    background: var(--gray-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.pricing-notes h4 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.pricing-notes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-notes li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

.pricing-notes li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: bold;
}

/* ===== 対応エリアセクション ===== */
/* ===== 対応エリアセクション（改善版） ===== */
.area-section {
    background: var(--gray-light);
    padding: var(--spacing-2xl) 0;
}

.area-section .section-title {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.area-section .section-title::before {
    content: '🚀';
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    font-size: 2rem;
    filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.3));
}

.area-section .section-subtitle {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    padding: 16px 32px;
    border-radius: 30px;
    display: inline-block;
    margin: 0 auto 3rem auto;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
    position: relative;
}

/* ===== 新グリッドレイアウト（レスポンシブ対応） ===== */
.area-grid-new {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

/* デスクトップ: 2x2 グリッド */
@media (min-width: 768px) {
    .area-grid-new {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    /* 東京都を左上に大きく配置 */
    .premium-card {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
}

@media (min-width: 1024px) {
    .area-grid-new {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: var(--spacing-2xl);
    }
    
    /* 東京都をさらに大きく */
    .premium-card {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
}

/* ===== プレミアムカード（東京都専用） ===== */
.premium-card {
    background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    border: 2px solid #ffd700;
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffd700, #ffed4a, #ffd700);
    animation: premiumShine 3s linear infinite;
}

@keyframes premiumShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.premium-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.3);
}

.premium-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #1a202c;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    width: fit-content;
    box-shadow: 0 4px 15px rgba(255, 183, 0, 0.3);
}

.premium-badge i {
    font-size: 0.9rem;
    animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ===== 標準カード ===== */
.standard-card {
    background: var(--background);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.standard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ===== ヘッダー改善 ===== */
.area-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.area-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

/* ===== アイコン差別化 ===== */
.area-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.tokyo-icon {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}

.kanagawa-icon {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.3);
}

.chiba-icon {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.saitama-icon {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
}

.area-icon i {
    font-size: 1.5rem;
    color: white;
}

.area-card:hover .area-icon {
    transform: scale(1.1);
}

/* ===== タイトルとステータス ===== */
.area-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.area-status {
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    min-width: 80px;
}

.area-status.complete {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #1a202c;
    box-shadow: 0 2px 10px rgba(255, 183, 0, 0.3);
}

.area-status.active {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

/* ===== メイン情報エリア ===== */
.main-info {
    margin-bottom: var(--spacing-lg);
}

.main-info strong {
    color: var(--primary);
    font-size: 1.1rem;
    display: block;
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

/* ===== 到着時間強調表示 ===== */
.arrival-time {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

.arrival-time.fastest {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    animation: fastestPulse 2s ease-in-out infinite;
}

.arrival-time.standard {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

@keyframes fastestPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6); }
}

.arrival-time i {
    font-size: 1rem;
}

.arrival-time small {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-left: var(--spacing-xs);
}

/* ===== 詳細情報改善 ===== */
.area-details {
    margin-bottom: var(--spacing-lg);
}

.detail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.detail-label {
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 70px;
    text-align: center;
    flex-shrink: 0;
}

.detail-value {
    color: var(--text-light);
    font-size: 0.9rem;
    flex: 1;
}

/* ===== CTAボタン ===== */
.btn-area-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: center;
    min-height: 48px;
}

.btn-area-cta.primary {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-area-cta.primary:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    color: white;
    text-decoration: none;
}

.btn-area-cta.secondary {
    background: linear-gradient(135deg, #1e40af, #1e3a8a);
    color: white;
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}

.btn-area-cta.secondary:hover {
    background: linear-gradient(135deg, #1e3a8a, #1e3a72);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 64, 175, 0.4);
    color: white;
    text-decoration: none;
}



/* ===== モバイル最適化 ===== */
@media (max-width: 768px) {
    .area-grid-new {
        gap: var(--spacing-lg);
    }
    
    .premium-card {
        padding: var(--spacing-lg);
    }
    
    .area-icon {
        width: 50px;
        height: 50px;
    }
    
    .area-icon i {
        font-size: 1.2rem;
    }
    
    .area-title {
        font-size: 1.1rem;
    }
    
    .area-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .detail-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .detail-label {
        align-self: flex-start;
    }
}

@media (max-width: 375px) {
    .premium-badge {
        font-size: 0.8rem;
        padding: 0.3rem 0.8rem;
    }
    
    .area-title {
        font-size: 1rem;
    }
    
    .arrival-time {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .btn-area-cta {
        font-size: 0.9rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* ===== お客様の声セクション（改善版・ホバー効果なし） ===== */
.testimonials-section {
    background: linear-gradient(165deg, #f8fafc 0%, #e2e8f0 30%, rgba(245, 158, 11, 0.05) 70%, #fef3c7 100%);
    padding: var(--spacing-2xl) 0;
    position: relative;
}

.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.1) 0%, transparent 50%), 
                radial-gradient(circle at 80% 80%, rgba(30, 74, 114, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.testimonials-section .section-title {
    color: #1a1a1a;
    position: relative;
    background: linear-gradient(135deg, #1e3a8a 0%, #fbbf24 50%, #ef4444 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: titleShimmer 3s ease-in-out infinite;
}

@keyframes titleShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.testimonials-section .section-title::before {
    content: '⭐';
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    font-size: 2rem;
    filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.3));
    animation: starTwinkle 2s ease-in-out infinite;
}

.testimonials-section .section-subtitle {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);
    color: #d97706;
    padding: 16px 32px;
    border-radius: 25px;
    display: inline-block;
    margin: 0 auto 3rem auto;
    font-weight: 600;
    border: 2px solid rgba(245, 158, 11, 0.3);
    position: relative;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}

.testimonials-section .section-subtitle::before {
    content: '💬';
    margin-right: 8px;
}

.testimonials-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.testimonial-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border-radius: 20px;
    padding: var(--spacing-xl);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 25%, #d97706 50%, #92400e 75%, #fbbf24 100%);
    background-size: 200% 100%;
    animation: cardTopShine 4s ease-in-out infinite;
}

@keyframes cardTopShine {
    0%, 100% { background-position: -200% 0; }
    50% { background-position: 200% 0; }
}

.testimonial-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.2) 100%);
    border-radius: 25px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.stars {
    display: flex;
    gap: 0.3rem;
}

.stars i {
    color: #fbbf24;
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
    animation: starGlow 3s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.2s);
}

.stars i:nth-child(1) { --i: 0; }
.stars i:nth-child(2) { --i: 1; }
.stars i:nth-child(3) { --i: 2; }
.stars i:nth-child(4) { --i: 3; }
.stars i:nth-child(5) { --i: 4; }

@keyframes starGlow {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
    }
    50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.6));
    }
}

.rating-text {
    font-size: 0.9rem;
    color: #d97706;
    font-weight: 600;
    margin-left: var(--spacing-sm);
}

.testimonial-title {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    text-align: center;
    position: relative;
}

.testimonial-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #fbbf24 50%, transparent 100%);
    border-radius: 3px;
}

.testimonial-text {
    color: #374151;
    line-height: 1.7;
    margin-bottom: var(--spacing-xl);
    font-size: 1rem;
    text-align: left;
    position: relative;
    padding: var(--spacing-md);
    background: rgba(248, 250, 252, 0.5);
    border-radius: 12px;
    border-left: 4px solid #fbbf24;
}

.testimonial-text::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 3rem;
    color: #fbbf24;
    font-family: serif;
    opacity: 0.6;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-top: 2px solid rgba(245, 158, 11, 0.2);
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-radius: 12px;
    padding: var(--spacing-md);
}

.author-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.8);
}

.author-avatar i {
    font-size: 1.5rem;
    color: white;
}

.customer-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.author-info {
    flex: 1;
}

.author-name {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.author-details {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}



/* ===== レスポンシブ調整（フェーズ2） ===== */
@media (max-width: 375px) {
    .service-icon {
        height: 100px;
    }

    .service-icon i {
        font-size: 1.5rem;
    }
    
    .service-title {
        font-size: 1.1rem;
    }
    
    .price-amount {
        font-size: 1.6rem;
    }
    
    .area-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .area-badge {
        align-self: flex-start;
    }
    

}

/* ===== フェーズ3: 最終仕上げセクション群 ===== */

/* ===== FAQセクション ===== */
.faq-section {
    background: var(--gray-light);
    padding: var(--spacing-2xl) 0;
}

.faq-section .section-title {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.faq-section .section-title::before {
    content: '❓';
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    font-size: 2rem;
    filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3));
}

.faq-section .section-subtitle {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    padding: 14px 28px;
    border-radius: 25px;
    display: inline-block;
    margin: 0 auto 3rem auto;
    font-weight: 600;
    border: 2px solid rgba(139, 92, 246, 0.3);
}

.faq-list {
    margin-bottom: var(--spacing-2xl);
}

.faq-item {
    background: var(--background);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition);
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: background-color var(--transition);
}

.faq-question:hover {
    background: var(--gray-light);
}

.faq-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-professional);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-icon i {
    font-size: 1.2rem;
    color: white;
}

.faq-title {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}

.faq-toggle {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
}

.faq-toggle i {
    color: var(--text-light);
    font-size: 1rem;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 var(--spacing-lg) var(--spacing-lg) calc(50px + var(--spacing-lg) + var(--spacing-md));
    color: var(--text-light);
    line-height: 1.6;
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
    animation: fadeInAnswer 0.3s ease-out;
}

@keyframes fadeInAnswer {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-answer strong {
    color: var(--primary);
}

.faq-cta {
    text-align: center;
    background: var(--background);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.faq-cta p {
    color: var(--text-light);
    margin-bottom: var(--spacing-lg);
}

.btn-faq-contact {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--primary);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition);
    min-height: 44px;
}

.btn-faq-contact:hover {
    background: #1a3a5c;
    transform: translateY(-1px);
    color: white;
    text-decoration: none;
}

/* final-cta-section関連CSS削除済み（2024-12-22） */



/* ===== レスポンシブ調整（フェーズ3） ===== */
@media (max-width: 375px) {
    .faq-title {
        font-size: 1rem;
    }
    
    .faq-answer {
        padding-left: var(--spacing-lg);
    }
    
    .alert-title {
        font-size: 1.4rem;
    }
    
    .symptoms-list {
        grid-template-columns: 1fr;
    }
    
    .phone-highlight {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .mega-phone-button {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
    
    .phone-content {
        text-align: center;
    }
    
    .phone-number {
        font-size: 1.5rem;
    }
    
    .phone-features {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: center;
    }
}

/* ===== レスポンシブ調整（フェーズ3） ===== */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .campaign-section .section-title {
        font-size: 2.2rem;
    }
    
    /* final-cta-section削除済み */
    
    .section-title::before {
        top: -30px !important;
        font-size: 1.5rem !important;
    }
    
    .campaign-section .section-title::before {
        top: -35px !important;
        font-size: 2rem !important;
    }
    
    .section-subtitle {
        font-size: 1rem;
        padding: 12px 20px !important;
    }
    
    .campaign-section .section-subtitle {
        font-size: 1.2rem;
        padding: 16px 28px !important;
    }
    
    /* final-cta-section削除済み */
}

/* final-cta-section関連CSS削除済み（2024-12-22） */

/* モバイル対応 - フローセクション */
@media (max-width: 768px) {
    .flow-steps {
        max-width: 100%;
        padding: 0 16px;
    }
    
    /* モバイル用プログレスバー */
    .flow-steps::before {
        left: 30px;
        top: 60px;
        bottom: 100px;
        width: 3px;
    }
    
    .flow-step {
        gap: 16px;
        margin-bottom: 32px;
    }
    
    /* モバイル用ステップ番号 */
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        border: 3px solid white;
    }
    
    .step-number::after {
        width: 80px;
        height: 80px;
    }
    
    /* モバイル用カード */
    .step-content {
        padding: 20px;
        border-radius: 16px;
    }
    
    .step-content::before {
        left: -8px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid white;
    }
    
    .step-title {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .step-title::after {
        width: 40px;
        height: 2px;
    }
    
    /* モバイル用時間表示 */
    .step-time {
        padding: 6px 12px;
        font-size: 0.8rem;
        margin-bottom: 16px;
    }
    
    .step-time::before {
        font-size: 0.8rem;
    }
    
    /* モバイル用詳細リスト */
    .step-details li {
        padding-left: 24px;
        margin-bottom: 8px;
        font-size: 0.9rem;
    }
    
    .step-details li::before {
        width: 16px;
        height: 16px;
        top: 6px;
    }
    
    .step-details li::after {
        left: 5px;
        top: 8px;
        font-size: 0.7rem;
    }
    
    /* モバイル用アイコン */
    .step-icon {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }
    
    .step-icon::before {
        border-radius: 18px;
    }
    
    .step-icon i {
        font-size: 1.5rem;
    }
    
    /* モバイル用サマリー */
    .flow-summary {
        margin-top: 40px;
    }
    
    .summary-badge {
        padding: 20px;
        border-radius: 20px;
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .summary-badge i {
        font-size: 2.5rem;
    }
    
    .summary-text {
        text-align: center;
    }
    
    .summary-title {
        font-size: 1.1rem;
    }
    
    .summary-subtitle {
        font-size: 0.9rem;
    }
}

/* 超小型モバイル対応 */
@media (max-width: 375px) {
    .flow-steps {
        padding: 0 12px;
    }
    
    .flow-steps::before {
        left: 22px;
    }
    
    .step-number {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
    
    .step-number::after {
        width: 60px;
        height: 60px;
    }
    
    .step-content {
        padding: 16px;
    }
    
    .step-title {
        font-size: 1.1rem;
    }
    
    .step-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    
    .step-icon::before {
        border-radius: 14px;
    }
    
    .step-icon i {
        font-size: 1.2rem;
    }
    
    .summary-badge {
        padding: 16px;
    }
    
    .summary-title {
        font-size: 1rem;
    }
    
    .summary-subtitle {
        font-size: 0.8rem;
    }
}

/* === キャンペーンセクション === */



/* 緊急CTAセクション */
.flow-emergency-cta {
    text-align: center;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 32px;
    border-radius: 20px;
    margin-top: 40px;
    border: 2px solid rgba(245, 158, 11, 0.2);
    position: relative;
    overflow: hidden;
}

.flow-emergency-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: emergencyShine 3s ease-in-out infinite;
}

@keyframes emergencyShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.emergency-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #92400e;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.emergency-message i {
    color: #f59e0b;
    font-size: 1.2rem;
    animation: warningBlink 2s ease-in-out infinite;
}

@keyframes warningBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.btn-flow-emergency {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--gradient-cta-3d);
    color: white;
    padding: 16px 32px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: var(--shadow-cta-3d);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    transform: translateY(0);
}

.btn-flow-emergency:hover {
    background: var(--gradient-cta-3d-hover);
    box-shadow: var(--shadow-cta-3d-hover);
    transform: translateY(-4px);
    color: white;
    text-decoration: none;
}

.btn-flow-emergency:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-cta-3d-active);
}

.btn-flow-emergency i {
    animation: phoneShake2 2s ease-in-out infinite;
}

@keyframes phoneShake2 {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* モバイル対応 - 新しい要素 */
@media (max-width: 768px) {
    .flow-emergency-cta {
        padding: 24px 16px;
        margin-top: 32px;
    }
    
    .emergency-message {
        font-size: 1rem;
        margin-bottom: 16px;
    }
    
    .btn-flow-emergency {
        padding: 14px 24px;
        font-size: 1rem;
    }
}

@media (max-width: 375px) {
    .emergency-message {
        font-size: 0.9rem;
        gap: 8px;
    }
    
    .btn-flow-emergency {
        padding: 12px 20px;
        font-size: 0.9rem;
        gap: 8px;
    }
}

/* === シンプルフッターセクション === */
.simple-footer {
    background: var(--neutral-100);
    border-top: 1px solid var(--neutral-400);
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.simple-footer-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.footer-brand {
    margin-bottom: var(--spacing-md);
}

.footer-brand h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--neutral-900);
    margin-bottom: 0.5rem;
}

.footer-brand p {
    font-size: 0.9rem;
    color: var(--neutral-700);
    opacity: 0.8;
    margin: 0;
}

/* 運営会社情報 */
.footer-company-info {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(248, 250, 252, 0.8);
    border-radius: var(--radius-md);
    border: 1px solid rgba(203, 213, 225, 0.4);
}

.company-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    max-width: 480px;
    margin: 0 auto;
}

.company-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--neutral-700);
}

.company-item strong {
    color: var(--neutral-900);
    font-weight: 600;
    font-size: 1rem;
}

.company-item i {
    width: 16px;
    color: var(--primary);
    opacity: 0.8;
    flex-shrink: 0;
}

.company-item:first-child {
    justify-content: center;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.3);
    padding-bottom: 0.5rem;
}

.company-item:first-child strong {
    font-size: 1.1rem;
}

/* フッターリンク */
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 107, 53, 0.1);
}

.footer-link {
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.footer-link:hover {
    color: #FF6B35;
    text-decoration: none;
    background: rgba(255, 107, 53, 0.1);
    transform: translateY(-1px);
}

.footer-divider {
    color: #ccc;
    font-weight: 300;
}

.footer-copyright p {
    font-size: 0.8rem;
    color: var(--neutral-700);
    opacity: 0.7;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .simple-footer {
        padding: var(--spacing-md) 0;
    }
    
    .footer-brand h3 {
        font-size: 1.1rem;
    }
    
    .footer-phone {
        padding: 0.625rem 1.25rem;
        font-size: 0.9rem;
    }
    
    .footer-company-info {
        padding: var(--spacing-sm);
    }
    
    .company-item {
        font-size: 0.85rem;
        gap: 0.5rem;
    }
    
    .company-item strong {
        font-size: 0.95rem;
    }
    
    .company-item:first-child strong {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .company-details {
        text-align: center;
    }
    
    .company-item {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .company-item i {
        order: -1;
    }
}

/* ===== フローティングCTA（拡張型マイクロコピー付き） ===== */
.floating-cta-expandable {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    pointer-events: auto;
}

.fab-expandable-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fab-tooltip {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    padding: 16px 20px;
    border-radius: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.2);
    transform: translateX(10px);
    opacity: 0;
    animation: slideInFade 0.6s ease-out 3s forwards;
    min-width: 200px;
    position: relative;
}

.fab-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgba(255, 255, 255, 0.98);
    transform: translateY(-50%);
}

.tooltip-content {
    text-align: left;
}

.tooltip-title {
    font-size: 14px;
    font-weight: 700;
    color: #f97316;
    margin-bottom: 4px;
    line-height: 1.2;
}

.tooltip-subtitle {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
    line-height: 1.3;
}

.tooltip-extra {
    font-size: 11px;
    color: #059669;
    font-weight: 600;
    line-height: 1.2;
}

.fab-expandable {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 6px 25px rgba(249, 115, 22, 0.4);
    animation: expandPulse 3s infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.fab-expandable::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.fab-expandable:hover::before {
    width: 100%;
    height: 100%;
}

.fab-expandable:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 35px rgba(249, 115, 22, 0.6);
    color: white;
    text-decoration: none;
}

.fab-expandable:active {
    transform: scale(0.95);
}

.fab-expandable i {
    position: relative;
    z-index: 2;
    animation: phoneWiggle 2s ease-in-out infinite;
}

@keyframes slideInFade {
    from { 
        opacity: 0; 
        transform: translateX(20px) scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0) scale(1); 
    }
}

@keyframes expandPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 6px 25px rgba(249, 115, 22, 0.4); 
    }
    50% { 
        transform: scale(1.08); 
        box-shadow: 0 8px 35px rgba(249, 115, 22, 0.6); 
    }
}

@keyframes phoneWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .floating-cta-expandable {
        bottom: 20px;
        right: 20px;
    }
    
    .fab-expandable-container {
        gap: 10px;
    }
    
    .fab-tooltip {
        min-width: 180px;
        padding: 14px 18px;
        font-size: 13px;
    }
    
    .tooltip-title {
        font-size: 13px;
    }
    
    .tooltip-subtitle {
        font-size: 11px;
    }
    
    .tooltip-extra {
        font-size: 10px;
    }
    
    .fab-expandable {
        width: 65px;
        height: 65px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .floating-cta-expandable {
        bottom: 15px;
        right: 15px;
    }
    
    .fab-tooltip {
        min-width: 160px;
        padding: 12px 16px;
    }
    
    .tooltip-title {
        font-size: 12px;
    }
    
    .tooltip-subtitle {
        font-size: 10px;
    }
    
    .tooltip-extra {
        font-size: 9px;
    }
    
    .fab-expandable {
        width: 60px;
        height: 60px;
        font-size: 18px;
    }
}

@media (max-width: 375px) {
    .fab-tooltip {
        min-width: 140px;
        padding: 10px 14px;
        transform: translateX(5px);
    }
    
    .fab-expandable {
        width: 55px;
        height: 55px;
        font-size: 16px;
    }
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
    .fab-expandable,
    .fab-tooltip {
        animation: none;
    }
    
    .fab-expandable i {
        animation: none;
    }
}

/* ===== 既存キャンペーンセクション ===== */