@charset "utf-8";
/* エリアページ（2026-09-07）
   物件詳細 dd-property.css の変数と部品（.dd-prop-sec / .dd-prop-card / .dd-prop-crumb）を
   そのまま使う前提。ここには「エリアページにしか無いもの」だけを書く。

   🔴 白地にゴールドの文字を置かない。--gold(#C9A961) は白地で2.25:1しかない。
      白地の文字は --gold-txt(#8A6A3A / 5.00:1) を使う（dd-property.css と同じ方針）。 */

.dd-area .dd-prop-wrap{ padding-top: 26px; padding-bottom: 40px; }

/* 🔴 コントラスト実測での修正（2026-09-07）
   ① .dd-prop-eyebrow は物件詳細では「黒帯の中」で使う前提の色（#C9A961）。
      エリアページは白地なので、そのまま使うと 2.25:1 で本文基準4.5:1を大きく下回る。
      白地用の #8A6A3A（5.00:1）に差し替える。
   ② .dd-prop-card-title は既存CSSが color:var(--fg) を指定しているのに、
      テーマ側の a の色に詳細度で負けて #BD9769（2.69:1）で描画されている。
      ここでは意図どおりの色で出す。※既存の物件詳細ページでも同じ状態＝別途要判断。 */
.dd-area .dd-prop-eyebrow{ color: var(--gold-txt); }
.dd-area .dd-prop-card-title{ color: var(--fg); }
.dd-area .dd-prop-card:hover .dd-prop-card-title{ color: var(--gold-txt); }

/* 見出し */
.dd-area-head{ margin: 6px 0 44px; }
.dd-area-head h1{
  font-family: var(--mincho);
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.24; letter-spacing: .04em; margin: 0; color: var(--ink2);
}
.dd-area-ja{ margin: 10px 0 0; font-size: 14px; letter-spacing: .12em; color: var(--fg); }
.dd-area-count{
  margin: 20px 0 0; font-family: var(--mincho); font-size: 30px;
  color: var(--gold-txt); letter-spacing: .04em;
}
.dd-area-count span{ font-family: inherit; font-size: 13px; margin-left: 8px; letter-spacing: .14em; }

/* 価格帯 */
.dd-area-price{
  margin: 14px 0 0; font-family: var(--mincho);
  font-size: clamp(22px, 4.6vw, 30px); color: var(--gold-txt); letter-spacing: .03em;
}
.dd-area-price span{ margin: 0 6px; color: var(--fg); font-size: .8em; }
.dd-area-note{ margin: 10px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--fg); }

/* ほかのエリア */
.dd-area-others{ margin-top: 64px; }
.dd-area-list{ list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px){ .dd-area-list{ grid-template-columns: repeat(4, 1fr); } }
.dd-area-list a{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 15px; border: 1px solid var(--line); background: var(--soft);
  text-decoration: none; color: var(--ink2); font-size: 13.5px; line-height: 1.5;
  letter-spacing: .03em; transition: border-color .2s, color .2s;
}
.dd-area-list a:hover{ border-color: var(--gold); color: var(--gold-txt); }
.dd-area-list b{ font-family: var(--mincho); font-size: 15px; color: var(--gold-txt); flex: 0 0 auto; }

/* ページャ */
.dd-area-pager{ margin-top: 28px; }
.dd-area-pager .nav-links{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dd-area-pager .page-numbers{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--line); text-decoration: none; color: var(--ink2); font-size: 13px;
}
.dd-area-pager .page-numbers.current{ background: var(--ink); border-color: var(--ink); color: var(--gold-lt); }
.dd-area-pager .page-numbers:hover{ border-color: var(--gold); color: var(--gold-txt); }
.dd-area-pager .screen-reader-text{
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── /area/ （UAEのエリアまとめ）───────────────────────── */
.dd-area-emirates{ display:grid; gap:14px; margin-top:16px; }
@media (min-width:760px){ .dd-area-emirates{ grid-template-columns:repeat(3,1fr); } }
.dd-area-emirate{
  display:block; padding:22px 20px; border:1px solid var(--line); background:var(--soft);
  text-decoration:none; color:var(--ink2); transition:border-color .2s, background .2s;
}
.dd-area-emirate:hover{ border-color:var(--gold); background:#fff; }
.dd-area-emirate__name{ display:block; font-family:var(--mincho); font-size:22px; letter-spacing:.06em; }
.dd-area-emirate__num{
  display:block; margin-top:10px; font-family:var(--mincho); font-size:34px;
  color:var(--gold-txt); line-height:1;
}
.dd-area-emirate__num i{ font-style:normal; font-size:13px; margin-left:5px; letter-spacing:.12em; }
.dd-area-emirate__meta{ display:block; margin-top:10px; font-size:12.5px; color:var(--fg); letter-spacing:.04em; }
.dd-area-emirate__areas{ display:block; margin-top:8px; font-size:12px; line-height:1.7; color:var(--mut); }

.dd-area-group{ margin-top:30px; }
.dd-area-group__title{
  margin:0; font-size:16px; font-weight:600; letter-spacing:.06em; color:var(--ink2);
  padding-left:11px; border-left:3px solid var(--gold);
}
.dd-area-group__lead{ margin:8px 0 0; font-size:13px; line-height:1.8; color:var(--fg); }
.dd-area-group .dd-area-list{ margin-top:12px; }

/* エリア概要の小見出し（2026-09-09）
   519字が1つの段落だったものを「立地とアクセス／向いている方／価格帯の位置づけ」で
   h3に区切った。見出しらしさは出しつつ、セクション見出し(h2)より控えめにする。 */
.dd-area .dd-prop-text h3.dd-prop-sub{
  margin:26px 0 8px; font-size:15px; font-weight:600; color:var(--ink2);
  letter-spacing:.06em; padding-left:11px; border-left:3px solid var(--gold);
}
.dd-area .dd-prop-text h3.dd-prop-sub:first-child{ margin-top:0; }

/* エリア一覧の日英2段（2026-09-10）
   /area/ を首長国だけにしたため、ここが個別エリアページへの主な入口になった。
   英語の下に読みを添える。日本語は --fg より一段落とすが、薄すぎないところで止める。 */
.dd-area-list__nm{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dd-area-list__nm .ja{ font-size:11.5px; line-height:1.5; color:#6b6b6b; letter-spacing:.02em; }