@charset "UTF-8";
/* ==========================================================================
   対応エリア — Figma 10202:20795 / 1440x950
   地図とフキダシは重なるため、カンプ座標で絶対配置する
   ========================================================================== */

.area {
  padding: 100px 100px 120px;
  border-radius: 0 0 48px 48px;
  background: var(--c-base-green);
}

.area__inner {
  position: relative;
  max-width: var(--w-wide);
  height: 573px;          /* 100(pad) + 93(見出し) + 64(gap) + 573 + 120(pad) = 950 */
  margin: 64px auto 0;
}

/* --- 地図（カンプ 320,257 800x573 → inner基準 220,157） --- */
.area__map {
  position: absolute;
  top: 0;
  left: 220px;
  width: 800px;
  height: 573px;
}

/* --- 引き出し線（SVGは線幅2pxの半分が外周にブリード → -1px補正） --- */
.area__line { position: absolute; z-index: 2; }
.area__line--tokai   { top: 217px; left: 289px; width: 300px; height: 146px; }
.area__line--zenkoku { top: 345px; left: 731px; width: 235px; height: 88px; }

/* --- フキダシカード --- */
.area__card {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 30px;     /* border2px込みで内寸446pxを確保 */
  border-radius: 8px;
  background: var(--c-white);
}
.area__card--tokai {
  top: 0;
  left: 40px;
  width: 510px;
  border: 2px solid var(--c-accent);
}
.area__card--zenkoku {
  top: 433px;
  left: 690px;
  width: 550px;
  border: 2px solid var(--c-main);
}

.area__label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.area__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.96px;
  color: var(--c-white);
  white-space: nowrap;
}
.area__card--tokai .area__badge   { background: var(--c-accent); }
.area__card--zenkoku .area__badge { background: var(--c-main); }

.area__labeltext {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.96px;
  white-space: nowrap;
}
.area__card--tokai .area__labeltext   { color: var(--c-accent); }
.area__card--zenkoku .area__labeltext { color: var(--c-main); }

.area__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.32px;
  color: var(--c-text);
}

.area__btn {
  width: 279px;
  min-height: 52px;
  gap: 4px;
}
.area__btn .c-btn__icon { width: 40px; height: 40px; }

/* --------------------------------------------------
   中間幅 / SP — 絶対配置をやめて縦積みに再構築
   -------------------------------------------------- */
@media (max-width: 1365px) {
  .area { padding: 72px 40px 80px; }
  .area__inner { height: auto; margin-top: 32px; }

  .area__map {
    position: static;
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 24px auto;
  }
  .area__line { display: none; }

  .area__card {
    position: static;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }
  .area__card--tokai { margin-bottom: 24px; }
}

@media (max-width: 768px) {
  .area { padding: 48px var(--sp-pad) 56px; border-radius: 0 0 24px 24px; }
  .area__map { margin: 16px auto; }
  .area__card { padding: 16px; gap: 12px; }
  .area__label { gap: 8px; flex-wrap: wrap; }
  .area__badge { height: 32px; padding: 0 14px; font-size: 16px; letter-spacing: 0.32px; }
  .area__labeltext { font-size: 17px; letter-spacing: 0.34px; white-space: normal; }
  .area__text { font-size: 14px; letter-spacing: 0.28px; }
  .area__btn { width: 100%; max-width: 279px; }
}