/* ✅ 基準幅ベース設定 */
:root {
  --base-width-sp: 375;
  --base-width-pc: 1440;
}

/* ✅ ベースセクション全体（画面幅全体） */
.station-search-section {
  width: 100vw;
  background: #f5f5f5;
  font-family: 'Noto Sans JP', sans-serif;
  padding-top: calc(30 /var(--base-width-sp) * 100vw);
}

.station-search-inner {
  width: calc(325 / var(--base-width-sp) * 100vw); /* 基準幅 325px */
  margin: 0 auto; /* ⬅ 中央寄せ */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
}


/* ✅ 検索機能の内側コンテンツ幅制限 */
.station-search-wrapper {
  width: calc(325 / var(--base-width-sp) * 100vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

/* ✅ 上部ヘッダー */
.station-search-header {
  background: #231815;
  width: 100%;
  height: calc(54 / var(--base-width-sp) * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(15 / var(--base-width-sp) * 100vw) 0;
}

.station-search-title {
  display: flex;
  align-items: center;
  gap: calc(7 / var(--base-width-sp) * 100vw);
  color: #ffffff;
  font-size: calc(16 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ✅ 中部検索ボディ */
.station-search-body {
  width: 100%;
  padding-top: calc(30 / var(--base-width-sp) * 100vw);
}

/* ✅ 各条件ブロック全体 */
.station-search-condition-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(20 / var(--base-width-sp) * 100vw);
  padding: calc(10 / var(--base-width-sp) * 100vw);
  align-items: center;
}

/* ✅ 個々の検索条件ブロック */
.station-search-condition {
  display: flex;
  flex-direction: column;
  gap: calc(10 / var(--base-width-sp) * 100vw);
  align-items: center;
}

/* ✅ ラベル（クリックで開閉） */
.condition-label {
  background: #e9e9e9;
  padding: calc(10 / var(--base-width-sp) * 100vw) calc(20 / var(--base-width-sp) * 100vw);
  font-size: calc(14 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  color: #231815;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  width: calc(310 / var(--base-width-sp) * 100vw);
}

.toggle-arrow {
  margin-left: auto;
  font-size: calc(13 / var(--base-width-sp) * 100vw);
}


/* ✅ 入力エリア（初期は非表示） */
.condition-input {
  display: none;
  flex-direction: column;
  gap: calc(10 / var(--base-width-sp) * 100vw);
  background: #ffffff;
  padding: calc(10 / var(--base-width-sp) * 100vw) 0;
  transition: max-height 0.3s ease;
  width: calc(300 / var(--base-width-sp) * 100vw);
}

.station-search-condition.open .condition-input {
  display: flex;
}

/* ✅ 駅名2列並び */
.station-checkbox-row {
  display: flex;
  gap: calc(10 / var(--base-width-sp) * 100vw);
  justify-content: center;
}

.station-checkbox-item {
  display: flex;
  align-items: center;
  border: 0.5px solid rgba(35, 24, 21, 0.5);
  border-radius: calc(3 / var(--base-width-sp) * 100vw);
  padding: calc(15 / var(--base-width-sp) * 100vw) calc(10 / var(--base-width-sp) * 100vw);
  gap: calc(7 / var(--base-width-sp) * 100vw);
  width: calc(135 / var(--base-width-sp) * 100vw);
  height: calc(50 / var(--base-width-sp) * 100vw);
  font-size: calc(13 / var(--base-width-sp) * 100vw);
  color: #231815;
}

/* ✅ チェックボックス */
.station-checkbox-item input[type="checkbox"] {
  width: calc(16 / var(--base-width-sp) * 100vw);
  height: calc(16 / var(--base-width-sp) * 100vw);
}

/* ✅ ラベル内のテキスト */
label.station-checkbox-item span {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

/* ✅ 検索ボタンエリア */
.station-search-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(30 / var(--base-width-sp) * 100vw) 0;
}

/* ✅ 検索ボタン */
.station-search-btn {
  display: flex;
  align-items: center;
  gap: calc(8 / var(--base-width-sp) * 100vw);
  background-color: #fee600;
  color: #231815;
  border: none;
  padding: calc(12 / var(--base-width-sp) * 100vw) calc(24 / var(--base-width-sp) * 100vw);
  font-size: calc(16 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  border-radius: calc(4 / var(--base-width-sp) * 100vw);
  cursor: pointer;
  width: calc(310 / var(--base-width-sp) * 100vw);
  justify-content: center;
}

/* ✅ アイコンサイズ */
.station-search-title i,
.station-search-btn i {
  font-size: calc(18 / var(--base-width-sp) * 100vw);
}

@media (min-aspect-ratio: 1/1) {

  .station-search-section {
      padding-top: calc(40 / var(--base-width-pc) * 100vw);
  }

  .station-search-body {
    padding-top: calc(30 / var(--base-width-pc) * 100vw);
  }

  .station-search-inner,
  .station-search-wrapper {
    width: calc(1000 / var(--base-width-pc) * 100vw); /* PC幅ベース */
  }

  .station-search-header {
    height: calc(70 / var(--base-width-pc) * 100vw);
    padding: calc(20 / var(--base-width-pc) * 100vw) 0;
  }

  .station-search-title {
    font-size: calc(20 / var(--base-width-pc) * 100vw);
    gap: calc(10 / var(--base-width-pc) * 100vw);
  }

  .station-search-condition-wrapper {
    gap: calc(30 / var(--base-width-pc) * 100vw);
    padding: calc(20 / var(--base-width-pc) * 100vw);
    align-items: flex-start;
  }

  .station-search-condition {
    gap: calc(10 / var(--base-width-pc) * 100vw);
    align-items: flex-start;
  }

  .condition-label {
    font-size: calc(16 / var(--base-width-pc) * 100vw);
    width: calc(960 / var(--base-width-pc) * 100vw);
    padding: calc(12 / var(--base-width-pc) * 100vw) calc(24 / var(--base-width-pc) * 100vw);
  }

  .toggle-arrow {
    font-size: calc(14 / var(--base-width-pc) * 100vw);
  }

  .condition-input {
    gap: calc(15 / var(--base-width-pc) * 100vw);
    padding: calc(15 / var(--base-width-pc) * 100vw) 0;
    width: 100%;
  }

  /* ✅ 駅名：1行に3列 */
  .station-checkbox-row {
    display: flex;
    gap: calc(20 / var(--base-width-pc) * 100vw);
    justify-content: center;
  }

  .station-checkbox-item {
    width: calc(280 / var(--base-width-pc) * 100vw);
    height: calc(56 / var(--base-width-pc) * 100vw);
    font-size: calc(14 / var(--base-width-pc) * 100vw);
    padding: calc(16 / var(--base-width-pc) * 100vw) calc(12 / var(--base-width-pc) * 100vw);
    gap: calc(10 / var(--base-width-pc) * 100vw);
    border-radius: calc(6 / var(--base-width-pc) * 100vw);
  }

  .station-checkbox-item input[type="checkbox"] {
    width: calc(18 / var(--base-width-pc) * 100vw);
    height: calc(18 / var(--base-width-pc) * 100vw);
  }

  label.station-checkbox-item span {
    font-size: calc(14 / var(--base-width-pc) * 100vw);
  }

  .station-search-footer {
    padding: calc(30 / var(--base-width-pc) * 100vw) 0;
    padding-top: calc(20 / var(--base-width-pc) * 100vw);
  }

  .station-search-btn {
    font-size: calc(18 / var(--base-width-pc) * 100vw);
    padding: calc(16 / var(--base-width-pc) * 100vw) calc(32 / var(--base-width-pc) * 100vw);
    width: calc(960 / var(--base-width-pc) * 100vw);
    border-radius: calc(6 / var(--base-width-pc) * 100vw);
  }

  .station-search-title i,
  .station-search-btn i {
    font-size: calc(22 / var(--base-width-pc) * 100vw);
  }
}