/* --- PCとスマホの表示切り替え設定 --- */

/* 1. デフォルト（PC）ではスマホ用メニューを非表示にする */
.sp-sake-menu {
  display: none;
}

/* 2. スマホ（画面幅768px以下）の設定 */
@media screen and (max-width: 768px) {
  
  /* 元々の「47都道府県から探す」という見出しと地図を消す */
  .map-section h2,
  .geolonia-svg-map {
    display: none !important;
  }

  /* スマホ用メニューを表示する */
  .sp-sake-menu {
    display: block;
    padding: 20px 10px;
    background-color: #fcfaf5; /* 和風の薄いベージュ */
  }

  /* スマホ用メニュー内のタイトル（デザイン調整） */
  .sp-menu-title {
    display: block !important; /* 強制表示 */
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 20px;
    color: #3e2723;
    border-bottom: 2px solid #d1c4b2;
    padding-bottom: 10px;
  }

  /* アコーディオンの外枠 */
  .region-accordion {
    margin-bottom: 12px;
    border: 1px solid #d1c4b2;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* 地域名バー */
  .region-accordion summary {
    padding: 16px 20px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f3eee5;
    color: #5d4037;
    position: relative;
    transition: background-color 0.3s;
  }
  /* Safari用のデフォルト矢印消し */
  .region-accordion summary span {
    margin-left: auto; /* 文字との間にスペースを空ける */
    margin-right: 15px; /* 右側の「＋」記号との距離 */
    font-size: 1.2rem;
  }

  /* 都道府県ボタンのグリッド */
  .pref-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列並び */
    gap: 8px;
    padding: 15px;
    background: #fff;
    border-top: 1px solid #eee;
  }

  /* 都道府県ボタンのデザイン */
  .pref-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px; /* 指で押しやすい高さ（重要！） */
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color: #444;
    font-size: 0.9rem;
  }

  /* タップした時の反応 */
  .pref-grid a:active {
    background: #f0ead6;
    border-color: #a67c52;
    transform: scale(0.98);
  }

  /* --- スムーズなアニメーションの実装 --- */
  
  /* 閉じている状態 */
  .region-accordion .pref-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 15px; /* 閉じている時は上下パディングを0に */
    background: #fff;
    
    /* アニメーション用の設定 */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.3s, padding 0.4s;
  }

  /* 開いている状態 */
  .region-accordion[open] .pref-grid {
    max-height: 500px; /* 十分な高さを指定 */
    opacity: 1;
    padding: 15px; /* 開いたら余白を作る */
  }

  /* 矢印（＋−）の見た目も少し上品に */
  .region-accordion summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid #a67c52;
    border-bottom: 2px solid #a67c52;
    transform: rotate(45deg); /* Ｖ字のアイコンにする */
    transition: transform 0.3s;
  }

  .region-accordion[open] summary::after {
    transform: rotate(-135deg); /* 開いたら上向きに */
  }

}