/* =========================================
   ロケーション ページ
========================================= */

/* ==========
共通
========== */

/* picture は inline 要素のため、そのままだと行ボックス分の余白が画像下に出る。
   このページの picture は全て画像枠として使うので block 化する */
.l-page picture {
  display: block;
}

/* ==========
共通：見出し（ゴシック＋明朝の混植）
========== */

.location-heading {
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.4em;
  text-align: center;
  color: var(--text-color);
}

.location-heading__gothic {
  font-family: var(--gothic);
  font-weight: 400;
}

.location-heading__mincho {
  font-family: var(--mincho);
  font-weight: 500;
}

/* ==========
ページタイトル
========== */

.section__content--location-title {
  padding: min(6.4vw, 24px) 0 min(4.5333vw, 17px);
  border-bottom: 4px solid var(--accent-color);
}

.location-title__en {
  display: block;
  width: min(37.232vw, 139.62px);
  margin: 0 auto min(1.3333vw, 5px);
}

.location-title__ja {
  display: block;
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: var(--text-color);
}

@media (min-width: 768px) {
  .section__content--location-title {
    padding: min(2.3426vw, 32px) 0 min(1.9034vw, 26px);
    border-top: 4px solid var(--accent-color);
  }

  .location-title__en {
    width: clamp(7.5rem, 4.1667rem + 6.9444vw, 12.5rem);
    margin-bottom: min(0.7321vw, 10px);
  }

  .location-title__ja {
    font-size: clamp(0.6875rem, 0.8785vw, 0.75rem);
  }
}

/* ==========
ヒーロー（CHATAN EVERYDAY）
========== */

.section__content--location-hero {
  position: relative;
  margin-bottom: min(8vw, 30px);
}

.location-hero__img {
  height: min(74.6667vw, 280px);
  object-fit: cover;
}

/* 夜景写真の上に重ねるロゴタイプ */
.location-hero__graphic {
  position: absolute;
  top: min(10.9333vw, 41px);
  left: 50%;
  width: min(54.6667vw, 205px);
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .location-hero__img {
    height: min(43.9239vw, 600px);
  }

  .location-hero__graphic {
    top: min(5.7833vw, 79px);
    width: min(33.7519vw, 461.05px);
  }
}

/* ==========
美浜を日常に。
========== */

.section__content--location-intro {
  position: relative;
  padding: 0 0 min(13.3333vw, 50px);
  overflow: visible;
}

/* 背景に敷くヤシの装飾（本文より背面。DOM順で重なりを決める） */
.location-intro__deco {
  position: absolute;
  opacity: 0.65;
}

/* ヒーロー下端＝このセクションの上端が起点（Figma: top 447 ＝ ヒーロー下端） */
.location-intro__deco--01 {
  top: max(-30px, -8vw);
  right: 0;
  width: min(73.8667vw, 277px);
}

.location-intro__inner {
  position: relative;
}

.location-intro__body {
  margin-bottom: min(8vw, 30px);
}

.location-intro__title {
  font-size: min(4.8vw, 1.125rem);
}

.location-intro__text {
  margin-top: min(5.0667vw, 19px);
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--text-color);
}

.location-intro__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(2.6667vw, 10px) min(2.9333vw, 11px);
}

.location-intro__figure {
  position: relative;
}

.location-intro__figure--main {
  grid-column: 1 / -1;
}

.location-intro__figure--main .location-intro__img {
  height: clamp(12.5rem, 5.5328rem + 32.7869vw, 21.25rem);
}

.location-intro__img {
  height: clamp(7.5rem, 3.5187rem + 18.7354vw, 12.5rem);
  object-fit: cover;
}

.location-intro__caption {
  position: absolute;
  bottom: min(1.3333vw, 5px);
  left: min(1.3333vw, 5px);
  font-size: min(2.6667vw, 0.625rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-color);
}

.location-intro__caption--white {
  color: #fff;
}

@media (min-width: 768px) {
  .section__content--location-hero {
    margin-bottom: min(3.6603vw, 70px);
  }

  .section__content--location-intro {
    padding: 0 0 min(4.3924vw, 84px);
  }

  .location-intro__deco--01 {
    top: max(-70px, -3.6458vw);
    right: 0;
    left: auto;
    width: min(52.5622vw, 1009px);
  }

  .location-intro__deco--02 {
    top: min(33.5938vw, 645px);
    left: 0;
    width: min(17.1303vw, 329px);
    opacity: 0.8;
  }

  /* PCは写真とテキストを重ねる絶対配置。vw係数は1366px基準、
     min()の上限は1920px時点の値（係数×19.2）で頭打ちにする */
  .location-intro__inner {
    width: 100%;
    height: min(47.5842vw, 914px);
    margin: 0 auto;
  }

  .location-intro__body {
    position: absolute;
    top: min(4.1728vw, 80px);
    right: min(6.25vw, 120px);
    left: auto;
    width: min(36.6764vw, 704px);
    margin: 0;
  }

  .location-intro__title {
    font-size: clamp(1.25rem, 1.757vw, 1.5rem);
    text-align: left;
  }

  /* 本文だけ親より広い（Figma実数値 1366px時 501px / 512px）。最終行を1行に収めるため */
  .location-intro__text {
    width: min(37.4817vw, 720px);
    margin-top: min(2.1962vw, 42px);
    font-size: clamp(0.625rem, 1.1713vw, 1rem);
    line-height: 1.85;
    text-align: left;
  }

  /* 子要素を .location-intro__inner 基準で絶対配置するため箱を消す */
  .location-intro__photos {
    display: contents;
  }

  .location-intro__figure {
    position: absolute;
  }

  .location-intro__figure--main {
    top: 0;
    left: 0;
    width: min(43.265vw, 831px);
  }

  .location-intro__figure--main .location-intro__img {
    height: min(33.5286vw, 644px);
  }

  .location-intro__figure--sub01 {
    top: min(34.3338vw, 659px);
    left: min(62.3719vw, 1198px);
    width: min(37.6281vw, 722px);
  }

  .location-intro__figure--sub01 .location-intro__img {
    height: min(13.2504vw, 254px);
  }

  .location-intro__figure--sub02 {
    top: min(28.6969vw, 551px);
    left: min(29.8682vw, 573px);
    width: min(19.1067vw, 367px);
  }

  .location-intro__figure--sub02 .location-intro__img {
    height: min(14.4949vw, 278px);
  }

  .location-intro__caption {
    bottom: min(0.7321vw, 14px);
    left: min(0.7321vw, 14px);
    font-size: clamp(0.625rem, 0.8785vw, 0.75rem);
  }
}

/* ==========
周辺スポット（4件）
========== */

.section__content--location-spot {
  padding-bottom: min(13.3333vw, 50px);
}

.location-spot__list {
  display: flex;
  flex-direction: column;
  gap: min(10.6667vw, 40px);
  width: calc(100% - 40px);
  margin: 0 auto;
}

.location-spot__img {
  height: clamp(12.5rem, 5.5328rem + 32.7869vw, 21.25rem);
  margin-bottom: min(5.3333vw, 20px);
  object-fit: cover;
}

.location-spot__head {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: min(5.3333vw, 20px);
}

.location-spot__name {
  font-size: min(4.2667vw, 1rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--text-color);
}

.location-spot__dist {
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--text-color);
}

.location-spot__line {
  width: 100%;
  height: 0;
  margin: min(2.6667vw, 10px) 0 min(5.3333vw, 20px);
  border: none;
  border-top: 1px solid var(--text-color);
}

.location-spot__text {
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--text-color);
}

@media (min-width: 768px) {
  .section__content--location-spot {
    padding-bottom: min(5.8565vw, 112px);
  }

  .location-spot__list {
    gap: min(4.3924vw, 84px);
    width: 100%;
  }

  /* 写真を画面端まで出し、逆側にテキストを絶対配置（1行ごとに左右が入れ替わる） */
  .location-spot__item {
    position: relative;
    height: min(24.1581vw, 464px);
  }

  .location-spot__img {
    position: absolute;
    top: 0;
    width: min(48.9751vw, 940px);
    height: 100%;
    margin: 0;
  }

  .location-spot__item:nth-child(odd) .location-spot__img {
    left: 0;
  }

  .location-spot__item:nth-child(even) .location-spot__img {
    right: 0;
  }

  .location-spot__body {
    position: absolute;
    width: min(30.8931vw, 593px);
  }

  .location-spot__item:nth-child(odd) .location-spot__body {
    top: min(2.9283vw, 56px);
    left: min(55.7101vw, 1070px);
  }

  .location-spot__item:nth-child(even) .location-spot__body {
    top: min(4.0264vw, 77px);
    left: min(13.3968vw, 257px);
  }

  .location-spot__head {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: min(0.2196vw, 4px);
    margin-top: 0;
  }

  .location-spot__name {
    font-size: clamp(1rem, 1.4641vw, 1.25rem);
  }

  .location-spot__dist {
    font-size: clamp(0.75rem, 1.0249vw, 0.875rem);
  }

  .location-spot__line {
    margin-top: min(0.7321vw, 14px);
    margin-bottom: min(3.0747vw, 42px);
  }

  .location-spot__text {
    font-size: clamp(0.625rem, 1.1713vw, 1rem);
  }
}

/* ==========
暮らしを満たす、街の機能が身近に。（白背景ブロック）
========== */

.location-white {
  border-top: 4px solid var(--accent-color);
  background-color: #fff;
}

/* 上は .location-white の border-top 4px を含めて Figma の 30px になるよう 26px */
.section__content--location-life {
  padding: min(8vw, 30px) 0;
}

.location-life__title {
  margin-bottom: min(5.3333vw, 20px);
  font-size: min(4.8vw, 1.125rem);
}

.location-life__text {
  margin-bottom: min(8vw, 30px);
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--text-color);
}

.location-life__map {
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .section__content--location-life {
    padding: min(4.8316vw, 66px) 0 min(5.9297vw, 81px);
  }

  .location-life__title {
    margin-bottom: min(2.1962vw, 30px);
    font-size: clamp(1rem, 1.757vw, 1.5rem);
  }

  .location-life__text {
    margin-bottom: min(4.3924vw, 60px);
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
    line-height: 1.85;
    text-align: center;
  }

  .location-life__map {
    width: min(82.3792vw, 1125.3px);
  }
}

/* ==========
国道沿いに広がる多彩な店舗。（58号線沿道マップ）
========== */

.section__content--location-street {
  position: relative;
  padding: min(8vw, 30px) 0;
  border-top: 4px solid var(--accent-color);
  border-bottom: 4px solid var(--accent-color);
  background-color: rgba(255, 255, 255, 0.65);
}

.location-street__title {
  margin-bottom: min(5.3333vw, 20px);
  font-size: min(4.2667vw, 1rem);
}

.location-street__scroll {
  padding: min(1.6vw, 6px) 0 min(1.8667vw, 7px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.location-street__scroll::-webkit-scrollbar {
  display: none;
}

.location-street__img {
  width: min(255.4667vw, 958px);
  max-width: none;
  height: min(41.6vw, 156px);
}

@media (min-width: 768px) {
  .section__content--location-street {
    padding: min(3.3675vw, 46px) 0;
  }

  .location-street__title {
    margin-bottom: 10px;
    font-size: clamp(1rem, 1.757vw, 1.5rem);
  }

  .location-street__scroll {
    margin-top: min(0.366vw, 5px);
    padding: 0;
    overflow: visible;
  }

  .location-street__img {
    width: min(83.6075vw, 1142.08px);
    height: auto;
    margin: 0 auto;
  }
}

/* ==========
桑江伊平土地区画整理区域
========== */

.section__content--location-district {
  padding: min(16vw, 60px) 0 min(13.3333vw, 50px);
  background-color: rgba(0, 0, 0, 0.1);
}

.location-district__map {
  width: min(90.9333vw, 341px);
  max-width: none;
  margin: 0 auto 30px;
}

.location-district__legend {
  margin-bottom: 20px;
  border: 1px solid var(--text-color);
  background-color: rgba(255, 255, 255, 0.65);
}

.location-district__legend-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: min(12.8vw, 48px);
  background-color: var(--accent-color);
  font-size: min(4.2667vw, 1rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
}

.location-district__legend-list {
  display: flex;
  flex-direction: column;
  gap: min(2.6667vw, 10px);
  padding: min(4.2667vw, 16px) min(5.0667vw, 19px) min(5.3333vw, 20px);
}

.location-district__legend-item {
  display: flex;
  align-items: center;
  gap: min(2.1333vw, 8px);
}

.location-district__legend-num {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: min(5.3333vw, 20px);
  height: min(5.3333vw, 20px);
  border-radius: 50%;
  font-size: min(3.2vw, 0.75rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--text-color);
}

.location-district__legend-num--01 {
  background-color: var(--zone-color-01);
}

.location-district__legend-num--02 {
  background-color: var(--zone-color-02);
}

.location-district__legend-num--03 {
  background-color: var(--zone-color-03);
}

.location-district__legend-num--04 {
  background-color: var(--zone-color-04);
}

.location-district__legend-num--05 {
  background-color: var(--zone-color-05);
}

.location-district__legend-text {
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--text-color);
}

.location-district__text {
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--text-color);
}

.location-district__btn {
  margin: min(13.3333vw, 50px) auto 0;
  background: linear-gradient(
    0deg,
    var(--dark-brown-color) 0%,
    var(--dark-brown-color-deep) 100%
  );
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 400;
  color: #fff;
}

.location-district__btn::after {
  background: url("../images/common/arrow-right.svg") center / contain no-repeat;
}

.location-district__btn:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .section__content--location-district {
    padding: min(5.8565vw, 80px) 0;
  }

  /* 1024px未満は2カラムだと窮屈なため、区域図を上・凡例と出典を下に縦積みし、
     広がった横幅を使って凡例（内容幅）と出典（残り）を左右に並べる */
  .location-district__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(4.3924vw, 60px);
    width: 100%;
    max-width: min(74.7438vw, 1021px);
    margin: 0 auto;
  }

  .location-district__map {
    width: min(43.631vw, 596px);
    margin: 0;
  }

  .location-district__body {
    display: flex;
    align-items: center;
    gap: min(2.9283vw, 40px);
    width: 100%;
  }

  .location-district__legend {
    flex-shrink: 0;
    margin-top: 0;
  }

  .location-district__legend-title {
    height: min(3.5139vw, 48px);
    font-size: clamp(1rem, 1.4641vw, 1.25rem);
  }

  .location-district__legend-list {
    gap: min(0.7321vw, 10px);
    padding: min(1.1713vw, 16px) 0 min(1.5959vw, 21.8px) min(1.3909vw, 19px);
  }

  .location-district__legend-item {
    gap: min(0.5857vw, 8px);
  }

  .location-district__legend-num {
    width: min(1.4641vw, 20px);
    height: min(1.4641vw, 20px);
    font-size: clamp(0.75rem, 1.0249vw, 0.875rem);
    padding-left: min(0.1464vw, 2px);
  }

  .location-district__legend-text {
    font-size: clamp(0.75rem, 1.0249vw, 0.875rem);
  }

  .location-district__text {
    flex: 1;
    font-size: clamp(0.75rem, 1.0249vw, 0.875rem);
  }

  .location-district__btn {
    margin-top: min(3.6603vw, 50px);
    font-size: clamp(0.875rem, 1.1713vw, 1rem);
  }
}

/* 1024px以上は区域図（左）と凡例・本文（右）の2カラムに戻す。
   Figma実数値 596 + 60 + 365 = 1021 で max-width にちょうど収まる
   （このBPは2カラムが収まる幅の特例。基準は 768px） */
@media (min-width: 1024px) {
  .location-district__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .location-district__map {
    flex-shrink: 0;
    margin-top: min(2.2694vw, 31px);
  }

  /* body内は凡例の下に出典を置く縦積みに戻す */
  .location-district__body {
    display: block;
    width: min(26.7204vw, 365px);
  }

  .location-district__text {
    margin-top: min(2.1962vw, 30px);
  }
}

/* ==========
周辺施設（6件）
========== */

.section__content--location-facility {
  padding: min(13.3333vw, 50px) 0;
}

.location-facility__list {
  display: flex;
  flex-direction: column;
  gap: min(8vw, 30px);
}

.location-facility__img {
  height: clamp(12.5rem, 5.5328rem + 32.7869vw, 21.25rem);
  margin-bottom: min(2.6667vw, 10px);
  object-fit: cover;
}

.location-facility__name {
  font-size: min(4.2667vw, 1rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--text-color);
}

.location-facility__dist {
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--text-color);
}

@media (min-width: 768px) {
  .section__content--location-facility {
    padding: min(5.8565vw, 80px) 0 min(7.3206vw, 100px);
  }

  .location-facility__list {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(3, 1fr);
    gap: min(2.9283vw, 40px);
    width: min(73.2797vw, 1001px);
    margin: 0 auto;
  }

  .location-facility__img {
    height: min(16.6911vw, 228px);
    margin-bottom: min(0.7321vw, 10px);
  }

  .location-facility__name {
    font-size: clamp(0.875rem, 1.1713vw, 1rem);
  }

  .location-facility__dist {
    font-size: clamp(0.75rem, 1.0249vw, 0.875rem);
    letter-spacing: normal;
  }
}

/* ==========
第1期1次販売・先着順申込受付（sale）
========== */

.section__content--sale {
  /* padding: min(16vw, 60px) 0; */
}

.sale__title {
  margin-bottom: min(5.3333333333vw, 20px);
  font-size: min(6.4vw, 1.5rem);
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  color: var(--text-color);
}

.sale__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(6.4vw, 24px);
}

.sale__btn {
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 400;
  color: #fff;
}

.sale__btn::after {
  background: url("../images/common/arrow-right.svg") center / contain no-repeat;
}

.sale__btn:hover {
  opacity: 0.7;
}

.sale__btn--gold {
  background-image: linear-gradient(
    0deg,
    var(--gold-btn-from) 0%,
    var(--gold-btn-to) 100%
  );
}

.sale__btn--red {
  background-image: linear-gradient(
    0deg,
    var(--red-btn-from) 0%,
    var(--red-btn-to) 100%
  );
}

.sale__btn--navy {
  background-image: linear-gradient(
    180deg,
    var(--navy-btn-from) 0%,
    var(--navy-btn-to) 100%
  );
}

/* サブページ用：問合せ先電話番号（ACCESSセクションを持たないページの第1期1次販売欄に表示） */
.sale__contact {
  margin-top: min(9.3333333333vw, 35px);
  text-align: center;
}

.sale__contact-lead {
  margin-bottom: min(2.6666666667vw, 10px);
  font-size: min(4.2666666667vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-color);
}

.sale__tel {
  margin-bottom: min(2.6666666667vw, 10px);
}

.sale__tel-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: min(2.1333333333vw, 8px);
}

.sale__tel-icon {
  width: min(10.4vw, 39px);
  height: auto;
}

.sale__tel-num {
  font-size: min(10.6666666667vw, 2.5rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-color);
}

.sale__hours {
  font-size: min(3.7333333333vw, 0.875rem);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: var(--text-color);
}

/* 第1期1次販売・先着順申込受付（フッター内・ボーダー付与）。
   このページは直前の周辺施設セクションに区切り線が無いため、上下ともボーダーを引く */
.section__content--sale-bottom {
  /* border-top: 4px solid var(--accent-color);
  border-bottom: 4px solid var(--accent-color);
  background-color: var(--sale-bottom-bg); */
}

@media (min-width: 768px) {
  .section__content--sale {
    /* padding: min(7.3206vw, 100px) 0; */
  }

  .section__content--sale .section-space {
    width: min(65.9vw, 900px);
    max-width: calc(100% - 40px);
  }

  .sale__title {
    margin-bottom: min(2.9283vw, 40px);
    font-size: clamp(2.1563rem, 3.3675vw, 2.875rem);
  }

  .sale__list {
    flex-direction: row;
    justify-content: center;
    gap: min(2.1972vw, 30px);
  }

  .sale__btn {
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
  }

  .sale__contact {
    margin-top: min(2.9283vw, 40px);
  }

  .sale__contact-lead {
    font-size: clamp(1rem, 1.7607vw, 1.5rem);
  }

  .sale__tel-icon {
    width: min(2.8551vw, 39px);
  }

  .sale__tel-num {
    font-size: clamp(2.25rem, 3.5139vw, 3rem);
  }

  .sale__hours {
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
  }

  /* 第1期1次販売・先着順申込受付（フッター内） */
  .section__content--sale-bottom {
    /* padding: min(4.3924vw, 60px) 0; */
  }
}

/* ==========
建設地拡大MAP モーダル
========== */

.location-map-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(5.3333vw, 20px);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.location-map-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.location-map-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.location-map-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  max-height: 100%;
  padding-top: min(13.3333vw, 50px);
  background-color: #fff;
  overflow: hidden;
}

.location-map-modal__close {
  position: absolute;
  top: min(2.6667vw, 10px);
  right: min(2.6667vw, 10px);
  width: min(8vw, 30px);
  height: min(8vw, 30px);
}

.location-map-modal__close-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.location-map-modal__close-icon::before,
.location-map-modal__close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(5.3333vw, 20px);
  height: 1.5px;
  background-color: var(--text-color);
}

.location-map-modal__close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.location-map-modal__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.location-map-modal__scroll {
  overflow: auto;
  padding: 0 min(4.2667vw, 16px) min(4.2667vw, 16px);
}

.location-map-modal__img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .location-map-modal__panel {
    padding-top: min(5.8565vw, 80px);
  }

  .location-map-modal__close {
    top: min(1.4641vw, 20px);
    right: min(1.4641vw, 20px);
    width: min(2.1972vw, 30px);
    height: min(2.1972vw, 30px);
  }

  .location-map-modal__scroll {
    padding: 0 min(2.9283vw, 40px) min(2.9283vw, 40px);
  }
}

@media (min-width: 1200px) {
  .location-map-modal__panel {
    max-width: 80%;
  }
}