@charset "UTF-8";

/* ==========================================================================
   最寄り駅サーチ 個別スタイル
   2026/04/19 統合
   ========================================================================== */

/* Yahoo!地図 表示崩れ回避策
   「responsive-style.css」の max-width:100% 設定により
   Yahoo!地図が表示されない問題を回避するために max-width を無効化 
*/
.article img, 
.category-description img, 
.wp-caption, 
.hover-image {
    max-width: none;
    height: auto;
}

/* ナビゲーション・インデックス関連
.index {
    background-color: #F0F0F0; /* 旧ページインデックス用背景色（現在は未使用の可能性あり） *
}
*/

.current {
    background-color: teal !important; /* 現在表示している都道府県のハイライト */
    color: #fff !important;
}

/* 都道府県一覧 グリッドレイアウト
   アコーディオン内などで使用
*/
.pref-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 5px; 
    justify-content: flex-start;
}

.pref-grid a { 
    text-decoration: none; 
    /* 3列表示を基本にしつつ、はみ出さない設定 */
    width: calc(33.33% - 5px); 
    box-sizing: border-box;
}

.pref-item { 
    padding: 8px 2px; 
    background: #eee; 
    border-radius: 4px; 
    text-align: center; 
    font-size: 16px; 
    color: #333;
    white-space: nowrap; /* 改行させない */
}

.pref-item:hover { 
    background: #f39c12; 
    color: #fff; 
}

/* モバイル対応（画面幅480px以下）
   スマホなどの狭い画面では2列にする 
*/
@media screen and (max-width: 480px) {
    .pref-grid a { 
        width: calc(50% - 5px); 
    }
}