/* CSG-03 面B: 実際に見えるブランド色を正本にした色トークン。
           各テキスト色はコントラスト4.5:1以上(WCAG 2.2 1.4.3)を実測して選定。
           --csg-primary-ink(#111827 on #FF6B6B)=6.39:1、--csg-secondary-ink(#0f172a on #4ECDC4)=9.23:1。 */
        :root{
          --csg-primary:#FF6B6B;
          --csg-primary-hover:#ff8585;
          --csg-primary-ink:#111827;
          --csg-secondary:#4ECDC4;
          --csg-secondary-ink:#0f172a;
          --csg-ink:#1e293b;
          --csg-ink-soft:#475569;
        }
        *{margin:0;padding:0;box-sizing:border-box}
        html{scroll-padding-top:72px}
        body{font-family:'Inter','Noto Sans JP',sans-serif;background:#f1f5f9;min-height:100vh;color:#1e293b;line-height:1.6}
        a{text-decoration:none}
        img{max-width:100%;height:auto}

        /* Site header */
        .site-header{background:#fff;border-bottom:1px solid #e5e7eb;padding:0 20px;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.06)}
        .site-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px}
        .site-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:#1e40af}
        .site-logo-emoji{font-size:24px}
        .site-nav{display:flex;align-items:center;gap:24px}
        /* CSG-03 面B: ナビは操作説明の役割として16px(role-based: 本文・操作説明=16px)に統一。 */
        .site-nav a{font-size:16px;font-weight:600;color:#475569;transition:color .2s;min-height:44px;display:inline-flex;align-items:center}
        .site-nav a:hover{color:#3B82F6}
        /* V3修正: 「学習コンテンツ」ナビのクリック率向上 */
        .site-nav a[href*="learning"]{background:#e0f2fe;color:#0369a1;padding:8px 16px;border-radius:8px;font-weight:700;font-size:16px;display:inline-flex;align-items:center}
        .site-nav a[href*="learning"]:hover{background:#bae6fd;transform:translateY(-1px);box-shadow:0 2px 8px rgba(3,105,161,.2)}
        .site-nav-cta{background:#F59E0B;color:#fff !important;padding:10px 16px;border-radius:6px;font-size:12px;font-weight:600 !important;min-height:36px;display:inline-flex;align-items:center;transition:all .2s;opacity:1}
        .site-nav-cta:hover{background:#d97706 !important;transform:translateY(-2px);box-shadow:0 4px 12px rgba(245,158,11,.3)}
        /* V1修正: デスクトップでナビゲーションCTAを常時強調表示（プライマリCTA） */
        @media(min-width:601px){.site-nav-cta{opacity:1;font-size:13px;padding:10px 16px;min-height:36px;margin-left:auto;font-weight:700;box-shadow:0 4px 12px rgba(245,158,11,.3)}}

        /* Breadcrumb */
        .breadcrumb{background:#fff;border-bottom:1px solid #e5e7eb;padding:8px 20px}
        .breadcrumb-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b}
        .breadcrumb a{color:#3B82F6}

        /* Main layout */
        .page-wrap{max-width:1200px;margin:0 auto;padding:20px 16px;display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}

        /* Game card */
        .game-card{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);overflow:hidden}
        .game-card-header{background:linear-gradient(135deg,#1e40af,#3B82F6);padding:20px 24px}
        .game-card-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:4px}
        .game-card-sub{font-size:13px;color:rgba(255,255,255,.8)}
        .game-card-body{padding:20px 24px;display:flex;flex-direction:column}

        /* Difficulty tabs (V4修正: ボタンサイズ拡大・説明充実) */
        .diff-tabs{display:flex;gap:0;border-radius:10px;overflow:hidden;border:1.5px solid #e5e7eb;margin-bottom:20px}
        .diff-tab{flex:1;padding:14px 8px;font-size:15px;font-weight:700;text-align:center;cursor:pointer;background:#f8fafc;color:#64748b;border:none;transition:all .15s;border-right:1px solid #e5e7eb;font-family:inherit;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center}
        .diff-tab:last-child{border-right:none}
        .diff-tab.active{background:#3B82F6;color:#fff;box-shadow:0 4px 12px rgba(59,130,246,.2)}
        .diff-tab-sub{font-size:14px;color:inherit;opacity:1;display:block;margin-top:6px;font-weight:600}

        /* Progress row */
        .progress-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:10px 14px;background:#f8fafc;border-radius:10px}
        .progress-label{font-size:13px;color:#64748b;font-weight:600}
        .progress-val{font-size:16px;font-weight:800;color:#3B82F6}
        .score-val{font-size:16px;font-weight:800;color:#F59E0B}

        /* Timer */
        .timer-wrap{background:#e5e7eb;border-radius:999px;height:6px;margin:8px 0 12px;overflow:hidden}
        .timer-bar{height:100%;background:linear-gradient(90deg,#3B82F6,#60a5fa);border-radius:999px;width:100%;transition:width linear}
        .timer-bar.danger{background:linear-gradient(90deg,#ef4444,#fca5a5)}

        /* Score dots */
        .score-bar{display:flex;justify-content:center;gap:5px;margin-bottom:12px}
        .score-dot{width:12px;height:12px;border-radius:50%;background:#e5e7eb}
        .score-dot.correct{background:#10B981}
        .score-dot.wrong{background:#ef4444}

        /* Color grid */
        .color-stage{text-align:center;margin-bottom:16px}
        .color-grid{display:grid;gap:8px;margin:12px auto;max-width:320px}
        .color-cell{border-radius:10px;cursor:pointer;border:3px solid transparent;transition:transform .1s,border-color .2s,box-shadow .2s;aspect-ratio:1}
        .color-cell:hover{transform:scale(1.05)}
        .color-cell.correct{border-color:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.3)}
        .color-cell.wrong{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.3)}
        .stage-msg{font-size:14px;color:#3B82F6;font-weight:700;margin-bottom:10px;min-height:20px}
        .best-score-display{font-size:13px;color:#94a3b8;text-align:right;margin-bottom:4px;min-height:18px}
        .best-banner{display:none;background:linear-gradient(135deg,#fbbf24,#F59E0B);color:white;font-size:13px;font-weight:700;padding:6px 12px;border-radius:8px;margin:8px 0;text-align:center}

        /* Action buttons */
        .action-btns{display:flex;gap:10px;margin-top:16px}
        .btn-replay{flex:1;background:#f1f5f9;color:#475569;border:1.5px solid #e5e7eb;padding:12px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
        .btn-replay:hover{background:#e2e8f0}
        /* V2修正: ゲーム開始ボタンを黄色に統一 */
        .btn-start{flex:1;background:#F59E0B;color:#fff;border:none;padding:12px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}
        .btn-start:hover{background:#d97706}

        /* Goal setting */
        .goal-panel{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:14px;margin-bottom:16px}
        .goal-panel-title{font-size:12px;font-weight:700;color:#1e40af;margin-bottom:8px}
        .goal-inputs{display:flex;gap:6px;align-items:flex-start}
        .goal-inputs input{width:100px;padding:8px 10px;border:1.5px solid #bfdbfe;border-radius:8px;font-size:14px;min-height:38px;background:#fff;color:#333;font-family:inherit}
        .goal-inputs input:focus{outline:none;border-color:#3B82F6}
        .goal-btn{padding:8px 14px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;min-height:38px;white-space:nowrap;font-family:inherit}
        .goal-btn-primary{background:#1e40af;color:#fff}
        .goal-btn-secondary{background:#e5e7eb;color:#666}

        /* Result */
        .result{display:none}
        .result.show{display:block}
        .result-card{background:#f0f9ff;border-radius:12px;padding:20px;text-align:center;margin-top:16px}
        .result-score{font-size:48px;font-weight:800;color:#3B82F6;line-height:1}
        .result-msg{font-size:16px;font-weight:700;color:#1e40af;margin-top:8px}
        .result-rank{font-size:14px;color:#64748b;margin-top:4px}

        /* Sub sections */
        .sub-section{background:#fff;border-radius:10px;padding:14px;margin-top:12px}
        .sub-section-title{font-size:12px;font-weight:700;color:#475569;margin-bottom:10px}

        /* Sidebar */
        .sidebar{display:flex;flex-direction:column;gap:28px}
        .sidebar-card{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.06);overflow:hidden}
        /* V3修正: ランキング表示の視認性調整・セクション間隔を拡大 */
        #ranking-section{background:#f9fafb}
        .sidebar-card-header{background:#3B82F6;padding:16px 18px;display:flex;align-items:center;gap:8px}
        .sidebar-card-header span{font-size:14px;font-weight:700;color:#fff}
        .sidebar-card-body{padding:14px 16px}

        /* Ranking */
        .ranking-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #f1f5f9}
        .ranking-row:last-child{border-bottom:none}
        .ranking-pos{width:28px;font-size:16px;font-weight:900;text-align:center;flex-shrink:0}
        .ranking-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #e5e7eb}
        .ranking-name{flex:1;font-size:15px;font-weight:700;color:#1e293b}
        .ranking-score-val{font-size:16px;font-weight:900;color:#3B82F6}

        /* Related services */
        .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
        .related-card{border-radius:10px;overflow:hidden;border:1px solid #e5e7eb;transition:box-shadow .2s}
        .related-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}
        .related-card img{width:100%;height:80px;object-fit:cover}
        .related-card-body{padding:10px}
        .related-card-name{font-size:12px;font-weight:700;color:#1e293b}
        .related-card-link{font-size:11px;color:#3B82F6;margin-top:2px;display:block}

        /* Photo strip */
        .photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
        .photo-strip img{border-radius:8px;width:100%;height:80px;object-fit:cover}

        /* AdSense */
        ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important;margin:0!important;height:0!important}

        /* Guide modal (V1修正: デフォルト非表示、初回訪問時だけ表示) */
        .guide-modal{display:none !important;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.72);z-index:10000;align-items:center;justify-content:center}
        .guide-modal.show{display:flex !important}
        /* V5修正: モバイル最適化・スクロール対応・ボタン常時表示 */
        .guide-modal-content{background:#fff;border-radius:16px;padding:24px;max-width:400px;width:90%;box-shadow:0 10px 40px rgba(0,0,0,.4);animation:slideUp .3s ease-out;position:relative;max-height:90vh;display:flex;flex-direction:column;margin:0 16px}
        .guide-modal-body{overflow-y:auto;flex:1;max-height:calc(90vh - 180px)}
        .guide-modal-close{position:absolute;top:12px;right:14px;background:#e5e7eb;border:none;font-size:26px;color:#374151;cursor:pointer;line-height:1;padding:4px 10px;border-radius:8px;font-family:inherit;min-width:40px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:all .2s}
        .guide-modal-close:hover{background:#d1d5db;color:#1f2937;transform:scale(1.1)}
        @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
        .guide-modal-title{font-size:18px;font-weight:700;color:#3B82F6;margin-bottom:12px}
        .guide-modal-body{font-size:15px;color:#555;line-height:2;margin-bottom:16px;white-space:pre-wrap}
        @media(max-width:480px){.guide-modal-body{font-size:15px;line-height:2.1}}
        .guide-modal-buttons{display:flex;gap:8px;justify-content:flex-end}
        .guide-modal-btn{padding:10px 16px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;min-height:44px;font-family:inherit}
        .guide-modal-btn-primary{background:#F59E0B;color:#fff;font-weight:700}
        .guide-modal-btn-primary:hover{background:#d97706}
        .guide-modal-btn-secondary{background:#d1d5db;color:#1f2937;font-weight:600}

        /* Tooltip */
        .tooltip-wrapper{position:relative;display:inline-block}
        .tooltip-text{visibility:hidden;background-color:#1f2937;color:#fff;text-align:center;border-radius:6px;padding:8px 12px;position:absolute;z-index:1001;bottom:125%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.15)}
        .tooltip-text::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1f2937}
        .tooltip-wrapper:hover .tooltip-text{visibility:visible;opacity:1}

        /* FAQ */
        .faq-item{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;margin-bottom:8px}
        .faq-q{padding:16px 20px;font-size:14px;font-weight:700;color:#1e293b;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
        .faq-q::after{content:'＋';font-size:16px;color:#3B82F6;flex-shrink:0}
        .faq-q.open::after{content:'－'}
        .faq-a{display:none;padding:0 20px 16px;font-size:13px;color:#475569;line-height:1.8}
        .faq-a.show{display:block}

        /* CSG-03 面B: ゲーム本体内のdetails summary(目標スコア・内訳)はタップ領域44px以上に統一 */
        .game-card-body summary{min-height:44px;display:flex;align-items:center;padding:8px 4px}

        /* CTA banner */
        .cta-banner{background:linear-gradient(135deg,#1e40af,#3B82F6,#06b6d4);border-radius:16px;padding:32px 24px;text-align:center;margin-top:20px}
        .cta-banner h2{font-size:24px;font-weight:800;color:#fff;margin-bottom:10px}
        .cta-banner p{font-size:14px;color:rgba(255,255,255,.85);margin-bottom:20px}
        /* CSG-03 面B: 白文字(#fff on #F59E0B)は2.15:1でコントラスト不足だったため濃色文字へ(A8枠ではないため対象) */
        .btn-cta{display:inline-flex;align-items:center;gap:8px;background:#F59E0B;color:var(--csg-ink);padding:14px 32px;border-radius:10px;font-size:16px;font-weight:800;transition:all .2s}
        .btn-cta:hover{background:#d97706;transform:translateY(-2px)}

        /* Print */
        @media print{
          header,footer,nav,button,.no-print,[class*="share"],[class*="affiliate"],[id*="share"],[id*="affiliate"],[id*="banner"],script,noscript{display:none!important}
          body{background:#fff!important;color:#000!important;font-size:12pt}
          [id*="result"],[id*="output"],[id*="advice"],[id*="diagnosis"],[class*="result"]{display:block!important}
          a[href]::after{content:none!important}
        }

        /* SR only */
        .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}

        /* Scroll indicator */
        .scroll-hint{animation:bounce 2s infinite}
        @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

        /* V2修正: ランキング表示の視認性向上 */
        .ranking-name{font-size:14px!important;font-weight:700!important}
        .ranking-score-val{font-size:16px!important;font-weight:900!important}
        .ranking-pos{font-size:18px!important}

        /* V4修正: デスクトップテキスト行間拡大・可読性向上 */
        body p{line-height:1.85}
        .game-card-body p{line-height:1.95;margin-bottom:16px}
        .game-card-sub{line-height:1.8;margin-bottom:8px}
        .game-card-header{padding:24px 28px}
        .game-card-body{padding:24px 28px}

        /* Responsive */
        @media(max-width:900px){
          .page-wrap{grid-template-columns:1fr}
          .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
        }
        @media(max-width:600px){
          /* V2/V5修正: モバイル版CTA導線・タップサイズ最適化（44px推奨） */
          /* V3修正: モバイルでハンバーガーメニュー表示・ナビゲーション常時アクセス可能化 */
          .site-nav{display:flex!important;gap:6px!important;align-items:center!important;flex-wrap:wrap!important}
          /* CSG-03 面B: 役割別文字サイズ(操作説明=16px以上)を満たすため12pxから変更 */
          .site-nav a:not(.site-nav-cta){display:inline-flex!important;font-size:16px!important;padding:8px 12px!important;min-height:44px!important;align-items:center}
          .site-nav a[href="#learning-section"],.site-nav a[href="#ranking-section"],.site-nav a[href="#faq-section"]{background:#e0f2fe!important;color:#0369a1!important;border-radius:6px!important;font-weight:600!important}
          .site-nav-cta{display:inline-flex!important;padding:12px 16px!important;font-size:13px!important;min-height:44px!important;font-weight:700!important;flex-shrink:0;align-items:center}
          /* V5修正: モバイルで関連ツールグリッドを1列表示 */
          .related-tools-grid{grid-template-columns:1fr!important}
          .page-wrap{padding:12px}
          .sidebar{grid-template-columns:1fr}
          .related-grid{grid-template-columns:1fr}
          .photo-strip{grid-template-columns:repeat(2,1fr)}
          /* V4修正: ランキングカードをモバイルでも見えるように上部に配置・常時表示 */
          #ranking-section{order:-1;grid-column:1/-1;margin-bottom:20px;display:flex;flex-direction:column}
          /* V3修正: モバイルでのランキング視認性向上 */
          .ranking-row{padding:12px 0!important}
          .ranking-avatar{width:40px!important;height:40px!important}
          .ranking-name{font-size:15px!important}
        }
        @media(max-width:480px){
          .game-card-body{padding:14px 16px}
          .guide-modal-content{padding:20px 16px}
          .guide-modal-buttons{flex-direction:column!important;gap:10px!important}
          .guide-modal-btn{width:100%!important;min-height:52px!important;font-size:15px!important}
          /* V3修正: スクロール可能性を明示 */
          .scroll-hint{display:block!important;font-size:14px!important;font-weight:700!important}
          /* V2修正: モバイルでメインCTAボタンをファーストビューで優先表示・ボタンサイズ拡大 */
          #mainCTAButton{order:-1;margin-bottom:20px;min-height:60px!important;font-size:18px!important;width:100%!important;padding:16px 12px!important;font-weight:800!important;letter-spacing:.05em!important}
          /* V4修正: ゲーム画面プレビューをモバイルで更に目立たせる */
          #gamePreviewSection{border-width:5px!important;padding:24px 16px!important;box-shadow:0 12px 32px rgba(134,239,172,.4)!important}
          #gamePreviewSection>div:first-child{font-size:18px!important}
          /* V2修正: モバイルで社会的証明をもっと見やすく */
          #socialProofSection{font-size:14px;padding:20px 14px}
          /* V3修正: モバイル版で「難易度選んでスタート」セクションとボタンを強調 */
          .diff-tabs{border-width:2px!important;margin-bottom:16px!important}
          .diff-tab{min-height:80px!important;font-size:16px!important;font-weight:700!important}
          .diff-tab-sub{font-size:15px!important}
          .btn-start{min-height:52px!important;font-size:16px!important;padding:16px 12px!important}
          /* V4修正: モバイル版で説明テキストの行間を拡大（読みやすさ向上） */
          p{line-height:1.9!important}
          .game-card-body p{line-height:1.85!important}
          /* V1修正: モバイル版で「今すぐ診断を開始」ボタンをファーストビュー最優先表示 */
          .btn-start{position:relative!important;margin-top:8px!important}
          .btn-start:focus{outline:3px solid #F59E0B;outline-offset:2px}
        }

        /* ===== Design refresh (brand: #FF6B6B / #4ECDC4) ===== */
        *{min-width:0}
        canvas,iframe,pre{max-width:100%}
        p,li,dd,td,th,label,blockquote{line-height:1.6;overflow-wrap:anywhere}
        button,a.btn{min-height:44px;min-width:44px}
        body{font-family:'Noto Sans JP',sans-serif;background:#fffaf9;font-size:1rem}
        .site-header{border-bottom-color:#fde2e2}
        .site-header-inner{height:auto;min-height:60px;flex-wrap:wrap;gap:8px;padding:6px 0}
        .site-logo{color:#1e293b;font-size:1.25rem}
        .site-nav{flex-wrap:wrap}
        /* CSG-03 面B: ナビは役割別サイズ(操作説明=16px)に統一。以前は1.5remで学習/CTAだけ肥大化していた */
        .site-nav a,.site-nav a[href*="learning"]{font-size:1rem!important;color:var(--csg-ink);background:transparent;padding:4px 8px}
        .site-nav a.site-nav-cta{background:var(--csg-primary);color:var(--csg-primary-ink)!important;border-radius:999px;padding:8px 24px!important;min-height:44px!important;font-weight:800!important}
        .site-nav a.site-nav-cta:hover{background:var(--csg-primary-hover)!important}
        .breadcrumb-inner,.breadcrumb a{font-size:1rem}
        .hero{position:relative;background:#fff0ef url('/color-sense-game/assets/photos/photo_01.jpg') center/cover no-repeat;overflow:hidden}
        .hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.86) 55%,rgba(255,255,255,.55))}
        .hero-arc{position:absolute;top:0;right:10%;width:340px;opacity:.9;pointer-events:none}
        .hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:48px 20px;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
        .eyebrow{font-size:1.125rem;font-weight:700;color:#475569;margin-bottom:10px}
        .hero h1{font-size:2.75rem;font-weight:800;line-height:1.25;color:#1e293b;margin-bottom:16px}
        .hero h1 em{font-style:normal;color:#c2410c;display:block}
        .hero-text{font-size:1.125rem;color:#334155;margin-bottom:16px}
        .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:20px}
        .chips li{background:#fff;border:2px solid #ffd0d0;border-radius:999px;padding:4px 14px;font-size:1rem;font-weight:700}
        .hero-btns{display:flex;gap:14px;flex-wrap:wrap}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:800;font-size:1.5rem;padding:12px 30px;color:var(--csg-primary-ink)}
        .btn img{width:28px;height:28px;object-fit:contain}
        .btn-pri{background:var(--csg-primary);box-shadow:0 8px 20px rgba(255,107,107,.35)}
        .btn-line{background:#fff;border:2px solid var(--csg-secondary)}
        .device{background:#fff;border:8px solid #1e293b;border-radius:20px;padding:14px;box-shadow:0 24px 60px rgba(30,41,59,.25)}
        .device-head{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
        .device-head span{background:#f1f5f9;border-radius:999px;padding:2px 12px;font-size:1rem;font-weight:700}
        .device-head span.on{background:var(--csg-secondary);color:var(--csg-secondary-ink)}
        .device p{font-size:1rem;font-weight:700;margin-bottom:10px}
        .mini-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
        .mini-grid i{display:block;aspect-ratio:1;border-radius:8px;background:#d9a5f0}
        .mini-grid i.d{background:#ee7fc4}
        .game-card{border:2px solid #ffe0e0;border-radius:24px}
        .game-card-header{background:linear-gradient(135deg,var(--csg-primary),#ff9a8b)}
        .game-card-title{color:var(--csg-primary-ink)}
        .game-card-sub{color:#1f2937}
        .diff-tab.active{background:var(--csg-secondary);color:var(--csg-secondary-ink);box-shadow:0 4px 12px rgba(78,205,196,.35)}
        .progress-val{color:#0f766e}
        .timer-bar{background:linear-gradient(90deg,var(--csg-secondary),#7ee0d8)}
        .btn-start{background:var(--csg-primary)!important;color:var(--csg-primary-ink)!important}
        .btn-start:hover{background:var(--csg-primary-hover)!important}
        .sidebar-card-header{background:var(--csg-secondary)}
        .sidebar-card-header span{color:var(--csg-secondary-ink)}
        .goal-btn-primary{background:#0f766e}
        /* 16px以上 / ボタン24px以上 */
        main p,main li,main td,main th,main label,main summary,main div,main span,main strong,.faq-q,.faq-a,.ranking-name,.ranking-score-val,.tooltip-text,.stage-msg,.best-score-display,.site-footer,footer,footer p,footer a,footer div{font-size:max(1rem,1em)}
        main .game-card-body div,main .game-card-body p,main .game-card-body span,main .game-card-body strong,main .game-card-body summary,main .sidebar-card-body div,main .sidebar-card-body p,main .sidebar-card-body span,main .sidebar-card-body li,main .faq-q,main .faq-a,main .sidebar-card-header span,main .result-card div,main table,main th,main td,footer,footer p,footer a,footer div{font-size:1rem!important}
        main .game-card-body .result-score{font-size:3rem!important}
        main .game-card-body .progress-val,main .game-card-body .score-val{font-size:1.25rem!important}
        main button,main a[style*="display:inline-flex"],main .game-card a,footer a{font-size:1.5rem!important}
        main .color-grid,main #gamePreviewSection div[style*="padding-bottom"]{font-size:0!important}
        .diff-tab-sub{font-size:1rem!important}
        .goal-inputs input,main input{font-size:1rem!important}
        main a[href^="http"]{font-size:1.5rem!important;white-space:normal!important}
        /* Service sections */
        .sv-section{max-width:1200px;margin:0 auto;padding:40px 16px}
        .sv-alt{background:#f0fbfa;border-radius:24px}
        .sv-head{text-align:center;margin-bottom:24px}
        .sv-tag{display:block;color:#0f766e;font-weight:700;font-size:1.125rem}
        .sv-head h2{font-size:2rem;font-weight:800;line-height:1.3;color:#1e293b}
        .sv-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none}
        .sv-card{background:#fff;border:2px solid #ffe0e0;border-radius:18px;padding:18px 14px;text-align:center}
        .sv-card img{width:64px;height:64px;object-fit:contain;margin:0 auto 8px;display:block}
        .sv-card b{display:block;color:#0f766e;font-size:1.5rem;font-weight:800}
        .sv-card h3{font-size:1.25rem;font-weight:800;line-height:1.4;margin-bottom:6px}
        .sv-card p{font-size:1rem;color:#475569}
        .sv-scene{padding:0 0 14px;overflow:hidden}
        .sv-scene img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0;margin:0 0 10px}
        .sv-scene h3,.sv-scene p{padding:0 14px}
        .page-wrap{align-items:start}
        @media(max-width:900px){
          .hero-inner{grid-template-columns:1fr}
          .hero h1{font-size:2rem}
          .hero-arc{width:220px;right:0}
          .sv-cards{grid-template-columns:repeat(2,1fr)}
          .sv-head h2{font-size:1.5rem}
        }
        @media(max-width:520px){.btn{width:100%}}

      #guideModal { display:none !important; z-index:5000; }
      #guideModal.show { display:flex !important; }
      #guideModal { visibility:hidden; opacity:0; }
      #guideModal.show { visibility:visible; opacity:1; transition:opacity .3s; }