:root {
  --base-width-sp: 375;
  --base-width-pc: 1440;
}

/* ▼ セクション全体：背景・パディング調整用 */
.mapsearch-wrapper {
  width: 100%;
  padding-top: calc(40 / var(--base-width-sp) * 100vw);
  background-color: #f5f5f5;
}

/* ▼ 中央寄せ＋幅制限ラッパー */
.mapsearch-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 / var(--base-width-sp) * 100vw);
  width: calc(325 / var(--base-width-sp) * 100vw);
  margin: 0 auto;
}

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

/* ▼ アイコン＋ラベル */
.mapsearch-label-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(7 / var(--base-width-sp) * 100vw);
  height: calc(24 / var(--base-width-sp) * 100vw);
}

/* ▼ アイコン画像 */
.mapsearch-icon {
  width: calc(13 / var(--base-width-sp) * 100vw);
  height: calc(23 / var(--base-width-sp) * 100vw);
  color: #ffffff;
}

/* ▼ ラベルテキスト */
.mapsearch-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: calc(16 / var(--base-width-sp) * 100vw);
  line-height: calc(24 / var(--base-width-sp) * 100vw);
  letter-spacing: 0.05em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  text-align: center;
  height: calc(24 / var(--base-width-sp) * 100vw);
}

/* ▼ 地図エリア */
.mapsearch-maparea {
  width: 100%;
  height: calc(250 / var(--base-width-sp) * 100vw);
  background-color: #ffffff;
}

/* ▼ Google Map挿入位置 */
.mapsearch-init-map {
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 1/1) {
  /* ▼ 全体セクション */
  .mapsearch-wrapper {
    padding-top: calc(50 / var(--base-width-pc) * 100vw);
  }

  /* ▼ 内ラッパー：中央寄せとPC幅 */
  .mapsearch-inner {
    gap: calc(10 / var(--base-width-pc) * 100vw);
    width: calc(1000 / var(--base-width-pc) * 100vw);
  }

  .mapsearch-header {
    padding: calc(15 / var(--base-width-pc) * 100vw) 0;
    width: 100%;
    height: calc(60 / var(--base-width-pc) * 100vw);
  }

  .mapsearch-label-group {
    gap: calc(12 / var(--base-width-pc) * 100vw);
    height: calc(30 / var(--base-width-pc) * 100vw);
  }

  .mapsearch-icon {
    width: calc(15 / var(--base-width-pc) * 100vw);
    height: calc(27 / var(--base-width-pc) * 100vw);
  }

  .mapsearch-label {
    font-size: calc(20 / var(--base-width-pc) * 100vw);
    line-height: calc(30 / var(--base-width-pc) * 100vw);
    height: calc(30 / var(--base-width-pc) * 100vw);
  }

  .mapsearch-maparea {
    height: calc(410 / var(--base-width-pc) * 100vw);
  }
}