@charset "utf-8";
/* /area/ — UAEのエリアまとめ（A案・2026-09-09）
   デザインカンプ「D.D CREST エリアページ 白基調案」Main.dc.html に準拠。

   🔴 Webフォントは追加しない。
      現行サイトは Google Fonts を1本も読み込んでいない（表示速度対策の結果、実測で確認）。
      カンプ指定の Noto Serif JP / Plus Jakarta Sans をここで足すと全ページの表示に影響するため、
      既存の明朝スタック（dd-property.css の --mincho と同じ）と system-ui で組む。

   🔴 白地にゴールドの文字を置かない。#b08d4f は白地で3.2:1しかない。
      白地の文字は #8a6d3a（カンプ指定・実測5.0:1）を使う。 */

.dd-ar{
  --ink:#1a1c20; --fg:#4a4a4a; --sub:#6b6b6b; --wk:#9b9b9b;
  --line:#e9e6df; --line2:#e2ded4; --soft:#fbfaf8; --soft2:#f6f4f0;
  --gold:#b08d4f; --gold-txt:#8a6d3a; --gold-lt:#e6d3ab;
  --mincho:"Times New Roman","YuMincho","Hiragino Mincho ProN",serif;
  background:#fff; color:var(--fg); line-height:1.9; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.dd-ar *{ box-sizing:border-box; }
.dd-ar-wrap{ max-width:1200px; margin:0 auto; padding:0 22px; }

/* 見出しまわり */
.dd-ar-eyebrow{
  margin:0; font-size:11px; letter-spacing:.32em; color:var(--gold-txt); font-weight:700;
}
.dd-ar h1, .dd-ar h2, .dd-ar h3{ font-family:var(--mincho); color:var(--ink); font-weight:500; }
.dd-ar-h{ margin-bottom:34px; }
.dd-ar-h h2{ margin:14px 0 0; font-size:clamp(21px,3.4vw,25px); line-height:1.65; }
.dd-ar-h__lead{ margin:16px 0 0; font-size:14px; line-height:2.05; color:var(--sub); max-width:760px; }
.dd-ar-h__lead b{ color:var(--ink); font-weight:600; }

.dd-ar-sec{ padding:clamp(52px,8vw,88px) 0; }
.dd-ar-sec--line{ border-bottom:1px solid var(--line); }
.dd-ar-sec--soft{ background:var(--soft); }

/* ── ヒーロー ── */
.dd-ar-hero{ position:relative; min-height:clamp(400px,52vw,520px); overflow:hidden; display:flex; align-items:center; }
.dd-ar-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dd-ar-hero__veil{
  position:absolute; left:0; top:0; bottom:0; right:0;
  /* 🔴 カンプ指定は .97/34% → .74/64% だが、写真が透けて
     アイキャッチ・リード・注記の3箇所が 4.3〜4.47:1 と基準4.5:1をわずかに下回った（実測）。
     文字が載る左側だけ白を強め（.97→1.0）、切り替え位置を34%→42%へ広げて確保する。
     右側の見え方はカンプのまま。 */
  background:linear-gradient(to right, rgba(255,255,255,1) 42%, rgba(255,255,255,.74) 66%, rgba(255,255,255,0) 100%);
}
@media (max-width:759px){
  /* SPは横グラデだと文字が読めない。上から白を敷く */
  /* 🔴 SPは文字が縦に伸びて画面を占めるため、写真と文字が取り合う。
     実測: 白を薄くして写真を見せると、下の統計ラベルと注記が 3.51 / 1.17:1 まで落ちた。
     高さを増やして「文字の下に写真の帯」を作り、両方を成立させる。 */
  .dd-ar-hero{ min-height:640px; align-items:flex-start; }
  .dd-ar-hero__veil{ background:linear-gradient(to bottom, rgba(255,255,255,1) 68%, rgba(255,255,255,.72) 82%, rgba(255,255,255,.15) 100%); }
}
.dd-ar-hero__body{
  position:relative; z-index:1; max-width:1200px; width:100%; margin:0 auto;
  padding:44px 22px; display:flex; flex-direction:column; gap:22px;
}
/* 🔴 文字は白グラデが濃い左側に収める（カンプの max-width:480px と同じ意図）。
   指定しないと <p> の矩形が右の写真領域まで伸び、
   テキスト自体は白地にあってもコントラスト検証で写真の上と判定される。
   実際に折り返し位置も安定するので、見た目と検証の両方で正しい。 */
.dd-ar-hero:not(.is-plain) .dd-ar-hero__body > *{ max-width:480px; }
.dd-ar-hero:not(.is-plain) .dd-ar-stats{ max-width:480px; }
/* 数字4つを横1列に並べると注記が右へはみ出し、写真の上に載る（実測 4.47:1）。
   写真ありのときは折り返して左に収める。 */
.dd-ar-hero:not(.is-plain) .dd-ar-stat__note{ flex:1 0 100%; margin-top:4px; }
/* 🔴 ここに以前あった padding-left の上書きを削除した（2026-09-10 代表指示）
     　.dd-ar-hero__body{ padding-left:calc((100% - 1156px)/2 + 22px) }
   ・.dd-ar-hero__body は既に max-width:1200px + margin:0 auto で中央に寄っている。
     そこへ「画面幅から算出した padding-left」を足すと**二重に効いて**左端が大きく右へずれる。
     実測（画面幅1920px）：本文 .dd-ar-wrap の左端 382px に対し、ヒーローは 764px。約380pxの空白ができていた。
   ・画面幅が1156px未満だと calc が負になり padding が 0 に丸められ、今度は左端が詰まりすぎる。
   → 上書きをやめ、.dd-ar-wrap と同じ「max-width:1200px + padding:0 22px」だけで揃える。
     見出しと ABOUT UAE 以下の本文が同じ左ラインに並ぶ。 */
.dd-ar-hero h1{
  margin:0; font-size:clamp(28px,5.4vw,44px); line-height:1.5; letter-spacing:.05em;
}
.dd-ar-hero__lead{ margin:0; font-size:14px; line-height:2.1; color:var(--sub); }

.dd-ar-stats{
  display:flex; flex-wrap:wrap; gap:26px 40px; padding-top:22px; border-top:1px solid var(--line2); max-width:560px;
}
.dd-ar-stat{ display:flex; flex-direction:column; gap:5px; }
.dd-ar-stat b{ font-family:var(--mincho); font-size:26px; color:var(--ink); line-height:1; font-weight:400; }
.dd-ar-stat span{ font-size:10px; letter-spacing:.16em; color:var(--wk); }
.dd-ar-stat__note{ margin:0; font-size:11px; line-height:1.9; color:var(--sub); }

/* ── ABOUT UAE ── */
.dd-ar-split{ display:grid; gap:34px; }
@media (min-width:900px){ .dd-ar-split{ grid-template-columns:300px 1fr; gap:72px; align-items:start; } }
.dd-ar-split__head{ display:flex; flex-direction:column; gap:14px; }
.dd-ar-split__head h2{ margin:0; font-size:clamp(21px,3.4vw,25px); line-height:1.65; }
.dd-ar-split__body{ display:flex; flex-direction:column; gap:22px; max-width:760px; }
.dd-ar-split__body p{ margin:0; font-size:15px; line-height:2.15; }
.dd-ar-mark{ border-bottom:2px solid var(--gold-lt); padding-bottom:1px; }

.dd-ar-emirates{
  display:grid; gap:24px; margin-top:14px; padding-top:28px; border-top:1px solid var(--line);
}
@media (min-width:700px){ .dd-ar-emirates{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; } }
.dd-ar-emirate{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--fg); }
.dd-ar-emirate img{ width:100%; height:120px; object-fit:cover; display:block; }
.dd-ar-emirate__name{ font-family:var(--mincho); font-size:16px; color:var(--ink); }
.dd-ar-emirate__num{ font-size:12px; color:var(--gold-txt); }
.dd-ar-emirate__lead{ font-size:12px; color:var(--sub); line-height:1.85; }
.dd-ar-emirate:hover .dd-ar-emirate__name{ color:var(--gold-txt); }

/* ── エリアから探す ── */
.dd-ar-block{ margin-top:38px; }
.dd-ar-block:first-of-type{ margin-top:0; }
.dd-ar-block__title{
  margin:0 0 14px; font-size:15px; letter-spacing:.06em;
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:11px; border-bottom:1px solid var(--line);
}
.dd-ar-block__title i{ font-style:normal; font-size:10px; letter-spacing:.18em; color:var(--wk); }
.dd-ar-grid{ list-style:none; margin:0; padding:0; display:grid; gap:0 26px; grid-template-columns:1fr; }
@media (min-width:620px){ .dd-ar-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .dd-ar-grid{ grid-template-columns:repeat(3,1fr); } }
.dd-ar-grid a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 2px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg);
  font-size:13.5px; transition:color .18s;
}
.dd-ar-grid a:hover{ color:var(--gold-txt); }
.dd-ar-grid b{ font-size:12px; color:var(--wk); font-weight:400; flex:0 0 auto; }
.dd-ar-grid a:hover b{ color:var(--gold-txt); }
/* エリア名は英語＋日本語の2段（2026-09-10 代表指示）
   英語だけだと日本の投資家に伝わりにくいため、読みを下に添える。
   🔴 日本語は --sub(#4a4a4a) までに留める。--wk のような薄いグレーにすると
      白地で3:1を割り、読みを添えた意味がなくなる。
   align-items は center のままだと2段になったとき件数が上下に揺れるので、
   このリンクだけ上揃えにして数字の位置を保つ。 */
.dd-ar-grid a{ align-items:flex-start; }
.dd-ar-nm{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dd-ar-nm .en{ line-height:1.45; }
.dd-ar-nm .ja{ font-size:11.5px; line-height:1.5; color:var(--sub); letter-spacing:.02em; }
.dd-ar-grid a:hover .dd-ar-nm .ja{ color:var(--gold-txt); }
.dd-ar-grid b{ margin-top:1px; }

/* ── 目的から選ぶ ── */
.dd-ar-purpose{ display:grid; gap:22px; }
@media (min-width:700px){ .dd-ar-purpose{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .dd-ar-purpose{ grid-template-columns:repeat(3,1fr); } }
.dd-ar-card{ background:#fff; border:1px solid var(--line); padding:0 0 20px; }
.dd-ar-card img{ width:100%; height:150px; object-fit:cover; display:block; }
.dd-ar-card h3{ margin:18px 20px 0; font-size:17px; letter-spacing:.04em; }
.dd-ar-card__lead{ margin:8px 20px 0; font-size:12.5px; line-height:1.85; color:var(--sub); }
.dd-ar-card__num{ margin:14px 20px 0; font-size:12px; color:var(--gold-txt); }
.dd-ar-card__num b{ font-family:var(--mincho); font-size:22px; font-weight:400; margin-right:2px; }
.dd-ar-card__num i{ font-style:normal; display:block; margin-top:4px; color:var(--sub); }
.dd-ar-card__areas{ margin:10px 20px 0; font-size:11.5px; line-height:1.8; color:var(--wk); }

/* ── 価格帯バー ── */
.dd-ar-bars{ list-style:none; margin:0; padding:0; }
.dd-ar-bars a{
  display:grid; grid-template-columns:1fr; gap:6px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg);
}
@media (min-width:760px){
  .dd-ar-bars a{ grid-template-columns:190px 1fr 132px 58px; gap:18px; }
}
.dd-ar-bars__name{ font-size:13.5px; }
.dd-ar-bars__track{ display:block; height:6px; background:var(--soft2); position:relative; }
.dd-ar-bars__fill{ display:block; height:100%; background:var(--gold); }
.dd-ar-bars__val{ font-size:12.5px; color:var(--sub); }
@media (min-width:760px){ .dd-ar-bars__val{ text-align:right; } }
.dd-ar-bars__diff{ font-size:12px; }
@media (min-width:760px){ .dd-ar-bars__diff{ text-align:right; } }
.dd-ar-bars__diff.is-up{ color:var(--gold-txt); }
.dd-ar-bars__diff.is-down{ color:var(--wk); }
.dd-ar-bars a:hover .dd-ar-bars__name{ color:var(--gold-txt); }

/* SPの固定CTAぶんの余白（物件ページと同じ挙動に揃える） */
@media (max-width:999px){ .dd-ar{ padding-bottom:82px; } }

/* 画像未指定のヒーロー。白地のまま成立させる（罫線と余白だけで組む） */
.dd-ar-hero.is-plain{ min-height:0; background:#fff; border-bottom:1px solid var(--line); }
.dd-ar-hero.is-plain .dd-ar-hero__veil{ display:none; }
.dd-ar-hero.is-plain .dd-ar-hero__body{ padding-top:clamp(56px,8vw,86px); padding-bottom:clamp(44px,6vw,66px); }

/* 🔴 コントラスト実測での修正（2026-09-09）
   カンプ指定の弱い文字色 #9b9b9b は白地で 2.78:1 しかなく、本文基準4.5:1を下回る。
   実測でNGだった3箇所（統計ラベル／エリア件数／カードの掲載エリア名）を
   #6b6b6b（5.33:1）に上げる。これはカンプに元からある課題であり、実装のズレではない。 */
.dd-ar-stat span,
.dd-ar-grid b,
.dd-ar-card__areas,
.dd-ar-block__title i{ color:var(--sub); }

/* 「その他のエリア」（物件1〜2件のエリアを畳む・2026-09-09）
   🔴 リンクは残す。details/summary なのでHTMLには常に存在し、クロールは到達できる。 */
.dd-ar-more{ margin-top:14px; border-top:1px solid var(--line); }
.dd-ar-more > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:13px 2px; font-size:13px; color:var(--sub); letter-spacing:.04em;
  transition:color .18s;
}
.dd-ar-more > summary::-webkit-details-marker{ display:none; }
.dd-ar-more > summary::before{
  content:"＋"; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:1px solid var(--line2); color:var(--gold-txt);
  font-size:11px; line-height:1; flex:0 0 auto;
}
.dd-ar-more[open] > summary::before{ content:"−"; }
.dd-ar-more > summary:hover{ color:var(--gold-txt); }
.dd-ar-more > summary b{ font-weight:400; color:var(--wk); font-size:12px; }
.dd-ar-more > summary b::after{ content:"エリア"; margin-left:2px; }
.dd-ar-more .dd-ar-grid{ padding-bottom:6px; }

/* ── エリアから探す：首長国の3枚（2026-09-10 代表判断で粒度を変更）
   これ以前は45エリアを名前で並べていたが、「情報が細かすぎる／ドバイから細かくする必要はない」
   との判断で首長国だけを見せる形にした。エリアの粒度は各首長国ページの下部に置く。 */
.dd-ar-emsel{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px){ .dd-ar-emsel{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.dd-ar-emsel a{
  display:block; height:100%; padding:26px 24px 22px; text-decoration:none; color:var(--fg);
  border:1px solid var(--line); background:#fff; transition:border-color .18s, box-shadow .18s;
}
.dd-ar-emsel a:hover{ border-color:var(--gold); box-shadow:0 2px 14px rgba(0,0,0,.05); }
.dd-ar-emsel__ja{ display:block; font-family:var(--mincho); font-size:26px; letter-spacing:.08em; line-height:1.4; }
.dd-ar-emsel__en{ display:block; margin-top:5px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--wk); }
.dd-ar-emsel__num{ display:block; margin-top:18px; font-size:30px; line-height:1; letter-spacing:.02em; }
/* 🔴 「件の取扱物件」は数字より小さく、色は --sub まで。--wk だと白地で3:1を割る */
.dd-ar-emsel__num i{ font-style:normal; margin-left:7px; font-size:12px; color:var(--sub); letter-spacing:.04em; }
.dd-ar-emsel__sub{ display:block; margin-top:9px; padding-top:9px; border-top:1px solid var(--line);
  font-size:12px; color:var(--sub); }
.dd-ar-emsel a:hover .dd-ar-emsel__ja{ color:var(--gold-txt); }