/**
 * モバイル最適化スタイル
 * 合同会社SFR ウェブサイト
 * 
 * このファイルには、モバイルデバイス向けの
 * レスポンシブスタイルが含まれます。
 */

/* ============================================
   タッチターゲット
   モバイルでのタップしやすさを向上させる
   最小サイズを48px×48pxに設定
   ============================================ */
@media (max-width: 768px) {
    .touch-target {
        min-height: 48px;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   テーブルのモバイル対応
   小画面ではテーブルを縦並びレイアウトに変更
   ============================================ */
@media (max-width: 768px) {
    /* 会社情報テーブルのモバイル表示 */
    .company-table th,
    .company-table td {
        display: block;
        width: 100%;
        padding: 0.5rem 0;
        border: none;
    }

    .company-table tr {
        display: block;
        border-bottom: 1px solid rgba(26, 26, 26, 0.1);
        padding: 1rem 0;
    }

    .company-table th {
        color: #595955; /* secondary color */
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .company-table td {
        font-size: 1rem;
    }

    /* 料金表のモバイル表示 */
    .price-table {
        font-size: 0.9rem;
    }

    .price-table th,
    .price-table td {
        padding: 1rem 0.5rem;
    }

    /* データテーブルのモバイル表示 */
    .data-table th,
    .data-table td {
        display: block;
        width: 100%;
        padding: 0.75rem 0.5rem;
    }

    .data-table th {
        background: rgba(26, 26, 26, 0.03);
        font-size: 0.8rem;
    }

    /* ポリシーテーブルのモバイル表示 */
    .policy-table th,
    .policy-table td {
        display: block;
        width: 100%;
        padding: 0.5rem 0;
    }

    .policy-table th {
        background: #f9f9f9;
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    /* ============================================
       兵庫県対応エリアマップのモバイル対応
       タッチ操作の最適化と表示調整
       ============================================ */
    
    /* マップコンテナのモバイル表示調整 */
    #hyogo-area-map {
        height: 300px; /* モバイルでは少し低く */
    }

    /* ズームコントロールのタッチターゲットを大きく */
    #hyogo-area-map .leaflet-control-zoom a {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    /* ポップアップのモバイル表示最適化 */
    #hyogo-area-map .leaflet-popup-content {
        margin: 10px;
        font-size: 12px;
        max-width: 200px;
    }

    /* アトリビューション表示のモバイル調整 */
    #hyogo-area-map .leaflet-control-attribution {
        font-size: 9px;
        padding: 3px 6px;
        line-height: 1.3;
    }

    /* 開示テーブルのモバイル表示 */
    .disclosure-table th,
    .disclosure-table td {
        display: block;
        width: 100%;
        padding: 1rem 0.5rem;
    }

    .disclosure-table th {
        border-bottom: none;
        padding-bottom: 0.25rem;
    }
}