@charset "UTF-8";

/* ========================================
   ふるさと納税 県別プルダウン
======================================== */

.furusato-dropdown {
  position: relative;
  margin-top: 16px;
}

/* ---- トリガーボタン ---- */
.furusato-dropdown__trigger {
  /* button 要素のリセット */
  appearance: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  letter-spacing: inherit;
  /* asw-button__link--highprimary の display: block を上書き */
  display: flex;
  align-items: center;
  justify-content: center;
  /* アイコンを右端固定するため relative コンテキストを作る */
  position: relative;
  padding-right: 48px; /* アイコン分の余白 */
  max-width: 288px;
}

/* ---- +/− アイコン ---- */
.furusato-dropdown__icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
}

.furusato-dropdown__icon::before {
  content: '+';
}

.furusato-dropdown__trigger[aria-expanded="true"] .furusato-dropdown__icon::before {
  content: '\2212'; /* − */
}

/* ---- ダイアログ本体 ---- */
/* position: fixed で overflow:hidden な親コンテナのクリッピングを回避 */
.furusato-dropdown__dialog {
  position: fixed;
  /* top / left / width は JS で動的にセット */
  max-width: 480px;
  background: #fff;
  border-radius: 12px;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 99;
}

/* ---- リスト ---- */
.furusato-dropdown__list {
  list-style: none;
  padding: 0 16px;
  margin: 0;
}

.furusato-dropdown__item {
  border-top: 1px solid #e0e0e0;
}

.furusato-dropdown__item:first-child {
  border-top: none;
}

.furusato-dropdown__item:last-child {
  border-bottom: none;
}

/* ---- 各リンク ---- */
.furusato-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: #00146E;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.4rem;
  transition: background-color 0.2s;
}

.furusato-dropdown__link:hover,
.furusato-dropdown__link:focus {
  background-color: #f0f4ff;
  text-decoration: underline;
}

/* SP対応 */
@media (max-width: 767px) {
  .furusato-dropdown__trigger {
    max-width: 270px;
  }
}