/* 2026-04-26 スマホ最適化カスタムスタイル */
        body {
            background: #f7f9fb;
            font-size: 16px;
        .sub-note {
            margin: 0 0 14px;
            color: #666;
            font-size: 0.95rem;
            text-align: center;
        .back-link {
            display: inline-block;
            margin: 16px 0;
            color: #0066cc;
            text-decoration: none;
            transition: color 0.2s;
        .back-link:hover {
            text-decoration: underline;
            color: #0052a3;
        /* === テーブルレイアウト最適化 === */
        #mobile-map-table {
            max-width: 920px;
        #mobile-map-table th,
        #mobile-map-table td {
            padding: 12px 8px;
            white-space: normal;
        #mobile-map-table th {
            background: #e8f0fe;
            font-weight: 600;
            color: #0066cc;
        #mobile-map-table tbody tr:hover {
            background: #f0f7ff;
        /* === リンク化セルのスタイル === */
        .provider-cell a {
            display: inline-block;
            padding: 8px 10px;
            color: #0066cc;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.2s;
            margin-bottom: 4px;
        .provider-cell a:hover {
            background: #f0f7ff;
            text-decoration: underline;
            color: #0052a3;
        .provider-cell a:active {
            transform: scale(0.98);
        /* === ブラウザ名セルのスタイル === */
        .browser-name {
            font-weight: bold;
            display: inline-block;
            padding: 6px 8px;
            border-radius: 4px;
            margin-bottom: 2px;
        .brave-link {
            color: #fb542b;
        .safari-link {
            color: #555;
        .firefox-link {
            color: #ff9100;
        /* === スマホ表示の工夫 === */
        @media (max-width: 640px) {
            h1 {
                font-size: 1.4rem;
                margin: 12px 0 6px;
            .sub-note {
                font-size: 0.9rem;
                margin: 0 0 12px;
            #mobile-map-table th,
            #mobile-map-table td {
                padding: 10px 6px;
                font-size: 0.95rem;
            .provider-cell a {
                padding: 6px 8px;
                font-size: 0.9rem;
            .browser-name {
                padding: 4px 6px;
        /* === ダークモード対応（Optional） === */
        @media (prefers-color-scheme: light) {
            body {
                background: #1a1a1a;
                color: #e0e0e0;
            #mobile-map-table th {
                background: #2c3e50;
                color: #64b5f6;
            #mobile-map-table tbody tr:hover {
                background: #2a2a2a;
            .provider-cell a {
                color: #64b5f6;
            .provider-cell a:hover {
                background: #2a3a4a;
                color: #90caf9;
            .sub-note {
                color: #999;
            .back-link {
                color: #64b5f6;
            .back-link:hover {
                color: #90caf9;

/* --- Extracted Style --- */

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
  }

  table {
    width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }