@charset "UTF-8";

@scope (.election) {
  --key-color: #C32830;
  --text-color: #232323;
  --bar-color: #271f1f;

  #area {
    margin-block-end: 60px;
  }
}

.tab-container {
  width: 100vw;
  margin-inline-end: calc(50% - 50vw);
  margin-inline-start: calc(50% - 50vw);
  margin-block-end: 40px;
  border-bottom: 15px solid var(--key-color);
}

.tab-container .nav-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-inline: auto;
  max-width: 1140px;
}

.tab-container .nav-link {
  display: flex;
  align-items: center;
  position: relative;
  padding: .6em 2em .3em;
  height: 100%;
  border: 0;
  border-radius: 10px 10px 0 0;
  background-color: #f0f0f0;
  color: #232323 !important;
  font-size: 1.5em;
  text-decoration: none;
  /* transition: none !important; */
}

.tab-container .nav-link rt {
  transition: color 0.3s ease !important;
}

.tab-container .nav-link:hover,
.tab-container .nav-link.active {
  background-color: var(--key-color);
  color: #fff !important;
}

.tab-container .nav-link:hover rt,
.tab-container .nav-link.active rt {
  color: #fff !important;
}

.tab-container .nav-link::before {
  display: inline-block;
  position: absolute;
  top: calc(50% - .5em);
  left: .8em;
  width: 8px;
  height: 1.2em;
  border-radius: 5px;
  background-color: var(--bar-color);
  vertical-align: middle;
  content: "";
}

.tab-container .nav-link:hover::before,
.tab-container .nav-link.active::before {
  background-color: #fff;
}

@media (768px > width) {
  .tab-container {
    border-bottom-width: 10px;
  }

  .tab-container .nav-item {
    width: calc(50% - 30px);
  }

  .tab-container .nav-link {
    padding: .6em .5em .3em;
    font-size: 1.1em;
    justify-content: center;
  }

  .tab-container .nav-link::before {
    display: none;
  }
}

#map-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* ストロークが切れないように */
}

/* SVG地図のスタイル */
.geolonia-svg-map {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible; /* 重要: ストロークが切れないように */
  padding: 10px; /* ストローク用の余白 */
}

.geolonia-svg-map .prefecture,
.geolonia-svg-map [data-code] {
  fill: #e8f4f8;
  stroke: #2c5f7c;
  stroke-width: 1.5;
  cursor: pointer;
  transition: all 0.2s ease;
  vector-effect: non-scaling-stroke; /* ストローク幅を一定に保つ */
}

/* 地方ごとの色分け */
/* 北海道 - グレー */
.geolonia-svg-map .hokkaido {
  fill: #e8e8e8;
  stroke: #666666;
}

/* 東北 - オレンジ */
.geolonia-svg-map .tohoku {
  fill: #ffd4b3;
  stroke: #cc6600;
}

/* 関東 - 青 */
.geolonia-svg-map .kanto {
  fill: #b3d9ff;
  stroke: #0066cc;
}

/* 中部 - ピンク */
.geolonia-svg-map .chubu {
  fill: #ffcccc;
  stroke: #cc0000;
}

/* 近畿 - 紫 */
.geolonia-svg-map .kinki {
  fill: #d9ccff;
  stroke: #6600cc;
}

/* 中国 - 黄色 */
.geolonia-svg-map .chugoku {
  fill: #ffffb3;
  stroke: #cccc00;
}

/* 四国 - 青緑 */
.geolonia-svg-map .shikoku {
  fill: #b3ffff;
  stroke: #0099cc;
}

/* 九州・沖縄 - 緑 */
.geolonia-svg-map .kyushu,
.geolonia-svg-map .okinawa {
  fill: #ccffcc;
  stroke: #009900;
}

.geolonia-svg-map .prefecture:hover,
.geolonia-svg-map [data-code]:hover {
  stroke: #333333; /* 濃いグレーの枠線 */
  stroke-width: 3.5;
}

.geolonia-svg-map .prefecture:focus,
.geolonia-svg-map [data-code]:focus {
  stroke: #ff6b35; /* オレンジの枠線 */
  stroke-width: 4;
  outline: none;
}

/* JavaScriptで管理するfocusedクラス */
.geolonia-svg-map .prefecture.focused,
.geolonia-svg-map [data-code].focused {
  stroke: #ff6b35;
  stroke-width: 4;
}

.geolonia-svg-map .prefecture.selected,
.geolonia-svg-map [data-code].selected {
  fill: #ff6b35;
  stroke: #c54d26;
  stroke-width: 2.5;
}

/* フォーカスリングを追加で表示するための疑似要素的アプローチ */
.geolonia-svg-map .prefecture:focus-visible,
.geolonia-svg-map [data-code]:focus-visible {
  fill: #4a9eff;
  stroke: #ff6b35;
  stroke-width: 4;
  filter: drop-shadow(0 0 4px #ff6b35);
}

.geolonia-svg-map .boundary-line {
  stroke: #999999;
  fill: none;
}

/* 都道府県名のテキストスタイル */
.prefecture-label {
  font-size: 14px;
  font-weight: bold;
  fill: #333;
  pointer-events: none;
  user-select: none;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* ローディング表示 */
.loading {
  text-align: center;
  color: #666;
  padding: 40px;
}

.loading::after {
  content: "...";
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%,
  20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60%,
  100% {
    content: "...";
  }
}

/* エラー表示 */
.error {
  background: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #f5c6cb;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .geolonia-svg-map .prefecture,
  .geolonia-svg-map [data-code] {
    stroke-width: 1;
  }

  .geolonia-svg-map .prefecture:hover,
  .geolonia-svg-map [data-code]:hover {
    stroke-width: 2.5;
  }

  .geolonia-svg-map .prefecture:focus,
  .geolonia-svg-map .prefecture.focused,
  .geolonia-svg-map [data-code]:focus,
  .geolonia-svg-map [data-code].focused {
    stroke-width: 3;
  }

  .prefecture-label {
    font-size: 11px; /* タブレット */
  }
}

@media (max-width: 480px) {
  /* スマホでは最小タップサイズを確保 */
  .geolonia-svg-map .prefecture,
  .geolonia-svg-map [data-code] {
    stroke-width: 0.8;
  }

  .geolonia-svg-map .prefecture:hover,
  .geolonia-svg-map .prefecture:focus,
  .geolonia-svg-map .prefecture.focused,
  .geolonia-svg-map [data-code]:hover,
  .geolonia-svg-map [data-code]:focus,
  .geolonia-svg-map [data-code].focused {
    stroke-width: 2.5;
  }

  .prefecture-label {
    font-size: 13px; /* スマホ: PCに近いサイズ */
    font-weight: 700; /* さらに太字で視認性向上 */
  }

  /* スマホでは地図を拡大できるようにする */
  .geolonia-svg-map {
    max-width: none;
    touch-action: manipulation; /* ピンチズーム有効化 */
  }
}

/* 超小型スマホ対応 */
@media (max-width: 360px) {
  .prefecture-label {
    font-size: 11px; /* 超小型でもできるだけ大きく */
    font-weight: 700;
  }
}

/* 選択された都道府県の情報表示 */
#selected-info {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* スマホ用ドロップダウンのスタイル */
.mobile-dropdown-container {
  display: none;
  margin-bottom: 20px;

  @media (max-width: 768px) {
    display: block;
  }

  .dropdown {
    overflow: visible;
  }

  .btn-primary {
    background-color: var(--key-color) !important;
    border: 3px solid var(--key-color) !important;
    color: #fff !important;
    transition: none !important;

    rt {
      color: #fff !important;
    }

    &:focus {
      outline: 2px solid -webkit-focus-ring-color;
    }

    &[aria-expanded="true"],
    &:hover,
    &:active,
    &:active {
      background-color: #fff !important;
      border: 3px solid var(--key-color) !important;
      color: var(--key-color) !important;
      outline: 2px solid -webkit-focus-ring-color;

      rt {
        color: var(--key-color) !important;
      }
    }
  }
}

/* ドロップダウンメニューのスクロール対応 */
.dropdown-menu-scrollable {
  max-height: 400px;
  overflow-y: auto;

  .dropdown-item {
    color: #222 !important;
    transition: none !important;

    &:hover,
    &:focus {
      background-color: var(--key-color) !important;
      color: #fff !important;

      rt {
        color: #fff !important;
      }
    }
  }
}

.dropdown-toggle {
  margin: 0;
}

#map-container {
  @media (max-width: 768px) {
    display: none;
  }
}

/* ふりがな非表示時のスタイル */
.mapRuby.is-hidden .mapRuby__translation {
  display: none;
}

.mapRuby.is-hidden .mapRuby__phrase {
  dy: 0 !important;
}