/* ========================================
   S08 対応エリア（Figma 2529:880・2026-07-31 全面更新）
   ⚠️マップを廃止し「東京都／神奈川県」の都県カード構成へ
   背景=#EAF5FC＋水しぶき写真20%（旧：青ベタ）
   ======================================== */

.area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 60px 16px 40px; /* Figma 2989:1045 pad[60,16,40,16] */
  /* 背景（2026-08-12 Figma 2989:1045 fills）：
     [上] GRADIENT_LINEAR #FFFFFF 14.42% → #EAF5FC 37.02% → #E0EEFF(a0) 100%
     [下] IMAGE 壁紙 opacity50%（旧「水しぶき20%＋#EAF5FCグラデ」の2層構成は廃止） */
  background: #fff;
  overflow: hidden;
  text-align: center;
}
/* 背景写真（Figma fill opacity 0.5） */
.area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../../images/s08_area/area-bg.webp") center / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
/* 上に重なる線形グラデ（上→下） */
.area::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #FFFFFF 14.42%,
    #EAF5FC 37.02%,
    rgba(224, 238, 255, 0) 100%);
  pointer-events: none;
}

.area > * { position: relative; z-index: 1; }

.area-heading { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* Figma（旧10） */
.area-badge {
  /* 2026-08-12ユーザー指定：全セクションのバッジを 16px / 行高16px / pad4px16px に統一 */
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-navy); /* Figma 2529:882（旧：白地に紺字） */
  color: #fff;
}
.area-title {
  font-size: 40px;
  font-weight: 900;
  line-height: 40px;
  color: var(--c-navy); /* Figma 2529:886（旧：白） */
  /* Figma stroke #FFFFFF 3px OUTSIDE＝CSSは中央基準のため2倍 */
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
}

/* 都県カード（東京都／神奈川県） */
.area-cards {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma 2711:144 */
  width: 100%;
}
.area-card {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-card); /* 2026-08-12：シャドウ統一（旧0 2px 6px） */
  text-align: left;
}
.area-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0; /* 2026-08-01ユーザー指定（旧16） */
  background: var(--c-navy);
  color: #fff;
  font-size: 20px; /* 2026-08-12ユーザー指定（旧24px） */
  font-weight: 700;
  line-height: 20px; /* 2026-08-12ユーザー指定（旧24px） */
}
.area-region {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px; /* 統一 2026-07-31（旧14） */
  border-bottom: 1px solid var(--c-bg-faq); /* Figma stroke #EAF5FC */
}
.area-region:last-child { border-bottom: none; }
.area-region-list {
  font-size: 14px; /* Figma 2711:153（旧12） */
  line-height: 21px;
  color: var(--c-charcoal);
}
/* 2026-08-02：市町村名が途中で改行されないよう、各名称をspanで囲んで折り返し禁止に。
   2026-08-17：区切りの「 / 」をHTMLのテキストノードから ::after へ移動。
   ⚠️テキストノードのままだと「/」だけが次の行の先頭に落ちる（福岡県60件で多発）。
     nbsp+スラッシュにして市名から離れないようにし、折り返しは span 間の半角スペースで起こす */
.area-region-list span { white-space: nowrap; }
.area-region-list span:not(:last-child)::after { content: "\00a0/"; }

/* ※2026-08-12：注記「※上記以外のエリアもご相談ください」はユーザー指定で削除（.area-note の指定も撤去） */