/* Extracted from umj-official/page-ai-report.php */
/* --- デザイン変数 --- */
        :root {
            /* Core Colors */
            --primary: #0056b3; 
            --secondary: #1a252f;
            --text-main: #333333;
            --text-sub: #666666;
            --bg-light: #F9FAFB;
            --white: #ffffff;

            /* Service A: コンシェルジュ (Approachable, Light) */
            --brand-concierge: #3498db; 
            --brand-concierge-light: #eaf6ff;
            
            /* Service B: カルテ (Professional, Deep) */
            --brand-karte: #2c3e50;
            --brand-karte-accent: #27ae60; /* Medical Green */
            --brand-karte-light: #f4f6f7;

            /* Typography */
            --font-jp: 'Noto Sans JP', sans-serif;
            --font-en: 'Montserrat', sans-serif;
            
            /* Effects */
            --shadow-float: 0 15px 35px rgba(0, 0, 0, 0.1);
            --shadow-card: 0 5px 20px rgba(0, 0, 0, 0.05);
        }

        /* --- 基本リセット --- */
        body {
            font-family: var(--font-jp);
            color: var(--text-main);
            background-color: var(--white);
            line-height: 1.8;
            margin: 0; padding: 0;
            overflow-x: hidden;
        }
        
        /* ユーティリティ */
        .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
        .en-font { font-family: var(--font-en); letter-spacing: 0.03em; }
        h1, h2, h3, h4 { line-height: 1.3; margin: 0; font-weight: 900; }
        img { max-width: 100%; height: auto; }

        /* --- セクションタイトル --- */
        .section-header { text-align: center; margin-bottom: 90px; }
        .section-subtitle {
            display: block; font-family: var(--font-en); font-size: 1rem;
            color: var(--brand-concierge); font-weight: 700; margin-bottom: 15px;
            text-transform: uppercase; letter-spacing: 3px;
        }
        .section-title {
            font-size: 2.8rem; color: var(--secondary);
            background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }

        /* --- ヒーローセクション --- */
        .hero-section {
            position: relative; height: 90vh; min-height: 700px;
            display: flex; align-items: center; justify-content: center;
            background: radial-gradient(circle at center, rgba(10, 40, 80, 0.85), rgba(0, 20, 40, 0.95)), 
                        var(--air-hero-image);
            background-size: cover; background-position: center; background-attachment: fixed;
            color: white; text-align: center;
        }
        .hero-content { max-width: 1000px; padding: 0 20px; z-index: 2; }
        
        .hero-eyebrow {
            font-size: 1.2rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
            padding: 8px 30px; border-radius: 50px; display: inline-block; margin-bottom: 30px;
            backdrop-filter: blur(5px);
        }
        .hero-title {
            font-size: 4rem; /* かなり大きく */
            margin-bottom: 20px;
            text-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }
        .hero-sub {
            font-size: 1.5rem; margin-bottom: 50px; opacity: 0.9; font-weight: 500;
        }
        .hero-btn {
            background: white; color: var(--primary); padding: 20px 60px;
            border-radius: 50px; font-size: 1.2rem; font-weight: 700; text-decoration: none;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3); transition: transform 0.3s;
            display: inline-block;
        }
        .hero-btn:hover { transform: translateY(-5px); }

        /* --- サービス詳細 (Zigzag) --- */
        .service-detail-section { padding: 120px 0; background: white; }
        
        .service-row {
            display: flex; align-items: center; justify-content: space-between;
            gap: 80px; margin-bottom: 120px;
        }
        .service-row:last-child { margin-bottom: 0; }
        .service-row.reverse { flex-direction: row-reverse; }

        .service-img-wrap { flex: 1; position: relative; perspective: 1000px; }
        .service-img {
            border-radius: 20px; box-shadow: var(--shadow-float);
            width: 100%; height: 450px; object-fit: cover;
            transform: rotateY(5deg); transition: transform 0.5s;
        }
        .service-row.reverse .service-img { transform: rotateY(-5deg); }
        .service-img-wrap:hover .service-img { transform: rotateY(0); }

        .service-text { flex: 1.1; }
        
        /* サービス名デザイン強化 */
        .service-label-en {
            font-family: var(--font-en); font-weight: 800; font-size: 1rem;
            letter-spacing: 0.1em; color: #aaa; display: block; margin-bottom: 5px;
        }
        .service-name-large {
            font-size: 3rem; margin-bottom: 25px; line-height: 1.2;
            display: flex; align-items: center; gap: 15px;
        }
        .service-icon {
            display: inline-flex; align-items: center; justify-content: center;
            width: 60px; height: 60px; border-radius: 15px; font-size: 1.8rem; color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        /* コンシェルジュ専用色 */
        .concierge-color { color: var(--brand-concierge); }
        .icon-concierge { background: var(--brand-concierge); }
        
        /* カルテ専用色 */
        .karte-color { color: var(--brand-karte); }
        .icon-karte { background: var(--brand-karte); }

        .service-lead {
            font-size: 1.2rem; font-weight: 700; margin-bottom: 20px;
            padding-left: 20px; border-left: 5px solid #ddd;
        }
        .concierge-lead { border-color: var(--brand-concierge); color: var(--brand-concierge); }
        .karte-lead { border-color: var(--brand-karte); color: var(--brand-karte); }

        .service-desc { font-size: 1.05rem; color: var(--text-sub); margin-bottom: 30px; }

        .feature-box {
            background: var(--bg-light); padding: 25px; border-radius: 15px;
        }
        .feature-list { list-style: none; padding: 0; margin: 0; }
        .feature-list li {
            position: relative; padding-left: 35px; margin-bottom: 12px; font-weight: 700;
        }
        .feature-list li:last-child { margin-bottom: 0; }
        .feature-list li i {
            position: absolute; left: 0; top: 4px; color: var(--brand-concierge); font-size: 1.2rem;
        }
        .feature-list.karte-list li i { color: var(--brand-karte-accent); }

        /* --- 比較表 --- */
        .comparison-section { padding: 100px 0; background: linear-gradient(to bottom, #f8f9fa, #eef2f3); }
        .comparison-wrapper {
            background: white; border-radius: 24px; box-shadow: var(--shadow-float);
            overflow: hidden; border: 1px solid rgba(0,0,0,0.05);
        }
        .comp-table { width: 100%; border-collapse: collapse; }
        .comp-table th, .comp-table td { padding: 30px 20px; border-bottom: 1px solid #f0f0f0; }
        
        .th-label { width: 20%; background: #fff; font-weight: 700; color: var(--text-sub); }
        
        /* Header Cells */
        .th-concierge {
            background: var(--brand-concierge-light); color: var(--brand-concierge);
            width: 40%; text-align: center; border-top: 6px solid var(--brand-concierge);
            padding-top: 40px;
        }
        .th-karte {
            background: var(--brand-karte-light); color: var(--brand-karte);
            width: 40%; text-align: center; border-top: 6px solid var(--brand-karte);
            padding-top: 40px;
        }
        .comp-title { font-size: 1.8rem; margin-bottom: 5px; display: block; }
        .comp-sub { font-size: 0.9rem; font-weight: 500; opacity: 0.8; }

        .td-center { text-align: center; font-size: 1.1rem; }
        .price-tag { font-family: var(--font-en); font-size: 2rem; font-weight: 900; }
        .hero-section { --air-hero-image: url('../img/official/report-hero.webp'); }
        .accent-concierge { color: #6ec1e4; }
        .accent-karte { color: #81d4fa; }
        .comp-note { font-size: 0.9rem; color: #666; }
        .price-tag--quote { font-size: 1.5rem; }
        .en-font--strong { font-weight: 700; }
        .td-center--cta { padding-bottom: 40px; }
        .section-copy { margin-top: 20px; }
        .form-alert {
            margin: 0 0 24px;
            padding: 14px 16px;
            border-radius: 10px;
            font-weight: 700;
        }
        .form-alert--sent { background: #e9f8ef; color: #17633a; }
        .form-alert--invalid { background: #fff0f0; color: #a33; }
        .required-mark { color: #e74c3c; }
        .privacy-note {
            margin-top: 20px;
            color: #999;
            font-size: 0.9rem;
            text-align: center;
        }
        .air-footer {
            background: var(--secondary);
            color: white;
            padding: 40px 0;
            text-align: center;
        }
        .air-footer__copy {
            font-size: 0.9rem;
            opacity: 0.7;
        }
        
        .btn-comp {
            display: inline-block; padding: 15px 40px; border-radius: 50px;
            font-weight: 700; text-decoration: none; transition: all 0.3s;
        }
        .btn-c { background: var(--brand-concierge); color: white; box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); }
        .btn-k { background: var(--brand-karte); color: white; box-shadow: 0 5px 15px rgba(44, 62, 80, 0.3); }
        .btn-comp:hover { transform: scale(1.05); }

        /* --- フォーム --- */
        .form-section { padding: 100px 0; background: var(--white); }
        .form-box {
            max-width: 800px; margin: 0 auto; background: var(--bg-light);
            padding: 60px; border-radius: 30px;
        }
        .form-group label { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; display: block; }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%; padding: 18px; border: 2px solid #ddd; border-radius: 12px;
            font-size: 1.1rem; margin-bottom: 30px;
        }
        .submit-btn {
            width: 100%; background: var(--primary); color: white; border: none;
            padding: 25px; font-size: 1.3rem; font-weight: 700; border-radius: 12px;
            cursor: pointer; transition: background 0.3s;
        }
        .submit-btn:hover { background: var(--secondary); }

        /* --- レスポンシブ --- */
        @media (max-width: 768px) {
            .hero-title { font-size: 2.5rem; }
            .service-row { flex-direction: column; gap: 40px; }
            .service-row.reverse { flex-direction: column; }
            .service-img { height: 250px; transform: none; }
            .service-name-large { font-size: 2rem; }
            .service-icon { width: 50px; height: 50px; font-size: 1.5rem; }
            
            /* テーブルスマホ化 */
            .comp-table, .comp-table thead, .comp-table tbody, .comp-table tr, .comp-table th, .comp-table td { display: block; width: 100%; }
            .comp-table thead { display: none; } /* ヘッダー非表示 */
            .comp-table tr { margin-bottom: 30px; border: 1px solid #ddd; border-radius: 15px; overflow: hidden; }
            .comp-table td { text-align: right; padding-left: 50%; position: relative; border-bottom: 1px solid #eee; }
            .comp-table td::before { content: attr(data-label); position: absolute; left: 20px; font-weight: bold; }
            
            /* スマホ用疑似ヘッダー */
            .comp-table tr::before {
                content: attr(data-service); display: block; text-align: center;
                font-size: 1.3rem; font-weight: 900; padding: 15px; color: white;
            }
            .tr-concierge-mobile::before { background: var(--brand-concierge); }
            
            .form-box { padding: 30px 20px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-section *,
            .service-detail-section *,
            .comparison-section *,
            .form-section *,
            .air-footer *,
            .hero-section *::before,
            .service-detail-section *::before,
            .comparison-section *::before,
            .form-section *::before,
            .air-footer *::before,
            .hero-section *::after,
            .service-detail-section *::after,
            .comparison-section *::after,
            .form-section *::after,
            .air-footer *::after {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: .001ms !important;
            }
        }

        .btn-comp,
        .submit-btn,
        .hero-btn,
        .form-group input,
        .form-group select,
        .form-group textarea {
            min-height: 44px;
        }

        .btn-comp,
        .submit-btn,
        .hero-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-comp:focus-visible,
        .submit-btn:focus-visible,
        .hero-btn:focus-visible,
        .form-group input:focus-visible,
        .form-group select:focus-visible,
        .form-group textarea:focus-visible {
            outline: 3px solid rgba(0, 86, 179, .85);
            outline-offset: 3px;
        }