/* メンバー紹介（個別 /member/<slug>/ と 一覧 /member/）
   2026-10-06 初版 ／ 2026-10-08 サイトのトーンに合わせて作り直し

   🔴 作り直しの理由（実測）
   初版は濃紺 #1b365d を主役にしていたが、テーマCSS全体を数えると
     ゴールド #bd9769 … 134回 ／ #b08d4f … 26回
     濃紺   #1b365d …   7回（すべて dd-member.css の中だけ）
     青     #1d4ed8 …   2回（すべて dd-member.css の中だけ）
   ＝ **濃紺と青はサイトのどこにも無い色**で、メンバーページだけが浮いていた。
   コラム（dd-article.css）・物件（dd-property.css）の実測値に合わせ直す。

   合わせた先（実測）
     コラム h2        … 背景 #b08d4f ＋ 白文字（ゴールドの帯）
     コラム 本文      … 16px / 行間1.9 / #333
     物件 セクション見出し … 英字ラベル（11.5px・#8a6a3a・字間2.76px）＋ 日本語28px
     物件 カード      … 角丸0・影なし
     物件 LINEボタン  … 背景 #06C755 ・白文字・角丸0
*/

.dd-member-page{
  /* サイト共通のトークン（物件・コラムから採った実測値） */
  --m-gold:#b08d4f;      /* 面に敷くゴールド（コラムのh2と同じ） */
  --m-gold-txt:#8a6a3a;  /* 白地に置く文字用（コントラスト確保） */
  --m-gold-lt:#c9a961;   /* 物件ページの明るいゴールド */
  --m-ink:#1a1c20;       /* 見出し */
  --m-fg:#1a1a1a;        /* 本文 */
  --m-mut:#5f636c;       /* 補助 */
  --m-line:#e4e1da;      /* 罫 */
  --m-soft:#f7f5f1;      /* 薄い面 */
  --m-line-green:#06c755;/* LINE */

  /* 本文の見た目はコラム（dd-article.css）に合わせる。
     2026-10-08 代表指示「行間・文字間とかcolumnと同じテイストに」。
     コラムの実測：16px / 行間30.4px / #333 / 游ゴシック / 字間 normal */
  --m-font:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

  background:#fff;color:var(--m-fg);padding:0 0 72px;
}

/* ── 2カラム（コラムの .dd-article-container と同じ型）────────────
   左＝本文 / 右＝320pxのサイドバー。gap・最大幅もコラムとそろえる。 */
.dd-member-container{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;
  max-width:1200px;margin:0 auto;padding:16px clamp(16px,3vw,32px) 0;
}
.dd-member-main{min-width:0}
.dd-member-side{display:flex;flex-direction:column;gap:24px;align-self:stretch}
@media (max-width:959px){
  .dd-member-container{grid-template-columns:1fr;gap:32px}
}
/* 一覧ページは1カラムのまま */
.dd-member-archive .dd-member-container{display:block;max-width:1200px}

/* パンくず（コラムと同じ見た目） */
.dd-member-page .dd-breadcrumb{font-size:13px;color:var(--m-mut);padding:24px 0 8px;line-height:1.8}
.dd-member-page .dd-breadcrumb a{color:var(--m-mut);text-decoration:none}
.dd-member-page .dd-breadcrumb a:hover{text-decoration:underline}
.dd-member-page .dd-breadcrumb span{margin:0 6px}
.dd-member-page .dd-breadcrumb-current{color:var(--m-fg)}

/* ── セクション見出し（物件・エリアと同じ 英字＋日本語の2段）────── */
.dd-member-page .dd-m-sec{display:block;margin:0 0 20px}
.dd-member-page .dd-m-sec .en{
  display:block;font-size:11.5px;letter-spacing:.24em;color:var(--m-gold-txt);
  font-weight:600;line-height:1.6;margin:0 0 6px;
}
.dd-member-page .dd-m-sec .ja{display:block;font-size:28px;line-height:1.4;font-weight:700;color:var(--m-ink)}
@media (max-width:600px){ .dd-member-page .dd-m-sec .ja{font-size:22px} }

/* ── 個別ページ：上部 ───────────────────────────── */
/* 名前の行数は人によって2〜3行と変わる。上揃えだと短い人だけ右が大きく空くので縦中央にそろえる */
.dd-member-hero{display:flex;gap:32px;align-items:center;padding:4px 0 28px;border-bottom:1px solid var(--m-line)}

/* 🔴 顔写真は四角（2026-10-08 代表指示）。
   丸だと顔の左右が切れて、同じ大きさでも小さく見える。
   コラムのアイキャッチと同じ 角丸6px＋薄い影にそろえる。 */
/* 🔴 個別ページの顔写真は、縦横比を固定して切り抜かない（2026-10-08 代表指示）。
   実測：出倉さんの元画像は 1567×1045 の**横長（3:2）**。これを縦長3:4の枠に
   object-fit:cover で入れていたため、左右が半分近く切り取られて顔が切れていた。
   枠の比率を決めず、元画像の比率のまま横幅だけ指定する＝誰の写真でも切れない。 */
.dd-member-photo{flex:0 0 auto;margin:0}
.dd-member-photo img{
  /* 横幅440pxが上限。ただし縦長の写真はそのままだと高さ587pxになるので（実測：伊吹さん 440×586）、
     高さ460pxも上限にする。どちらか先に当たったほうで止まる＝比率は変わらない＝切れない。 */
  max-width:440px;max-height:460px;width:auto;height:auto;display:block;
  border-radius:6px;box-shadow:var(--dd-shadow,0 2px 4px rgba(0,0,0,.05))
}
/* 写真が無い人の枠だけは、比率を決めないと高さが0になるので 3:2 を置く */
.dd-member-photo.is-none{
  width:440px;aspect-ratio:3/2;border-radius:6px;background:var(--m-soft);border:1px dashed var(--m-line);
  display:flex;align-items:center;justify-content:center;
}
/* 画面が狭い帯（960〜1150px）では本文幅が縮むので、写真も一段小さくする */
.dd-member-photo__none{font-size:12.5px;color:var(--m-mut);letter-spacing:.08em}

.dd-member-head{flex:1 1 auto;min-width:0;padding-top:4px}
.dd-member-base{display:inline-block;margin:0 0 12px;padding:4px 12px;background:var(--m-gold);color:#fff;font-size:11.5px;letter-spacing:.1em;font-weight:600;border:0}
.dd-member-role{margin:0 0 6px;font-size:11.5px;letter-spacing:.24em;color:var(--m-gold-txt);font-weight:600;line-height:1.6}
.dd-member-page .dd-member-name{margin:0 0 10px;font-size:34px;line-height:1.3;font-weight:700;color:var(--m-ink);font-family:var(--m-font);letter-spacing:.02em}
.dd-member-org{margin:0 0 4px;font-size:14px;color:var(--m-mut);line-height:1.7}

/* 数字。同じ箱を3つ並べない（＝生成物にありがちな型）。
   縦の罫だけで区切り、数字そのものを大きく見せる。 */
.dd-member-nums{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:22px 0 24px;
  border-bottom:1px solid var(--m-line);gap:0}
.dd-member-num{padding:0 32px;border-left:1px solid var(--m-line)}
.dd-member-num:first-child{padding-left:0;border-left:0}
.dd-member-num__v{display:block;font-size:26px;font-weight:700;line-height:1.25;color:var(--m-gold-txt);
  font-family:var(--m-font);letter-spacing:.01em;font-feature-settings:"tnum"}
.dd-member-num__l{display:block;margin-top:5px;font-size:11.5px;color:var(--m-mut);line-height:1.5;letter-spacing:.04em}
@media (max-width:600px){
  /* 2列にすると「累計売買400億円」のような長い値が折り返す（実測）。縦1列にして、
     区切りは縦罫ではなく横罫にする */
  .dd-member-nums{display:block;padding:18px 0 20px}
  .dd-member-num{padding:12px 0 0;margin:12px 0 0;border-left:0;border-top:1px solid var(--m-line)}
  .dd-member-num:first-child{padding-top:0;margin-top:0;border-top:0}
  .dd-member-num__v{font-size:22px}
}

/* ── 本文の見出し：コラムと同じ「ゴールドの帯に白文字」────────── */
.dd-member-spec,.dd-member-qa,.dd-member-message,.dd-member-sns{margin:36px 0 0}
.dd-member-page .dd-member-spec h2,
.dd-member-page .dd-member-qa h2,
.dd-member-page .dd-member-message h2,
.dd-member-page .dd-member-sns h2{
  font-size:19px;line-height:1.5;font-weight:700;margin:0 0 14px;
  background:var(--m-gold);color:#fff;padding:12px 18px;border:0;
}
/* 質問（h3）は帯にしない。帯が20本並ぶとページ全体がゴールドで埋まる（実測）。
   ゴールドの縦罫＋濃い文字で、帯（h2）より一段弱く見せる。 */
.dd-member-page .dd-member-q{
  font-size:17px;line-height:1.6;font-weight:700;color:var(--m-ink);
  margin:28px 0 10px;padding:0 0 0 12px;border-left:3px solid var(--m-gold-lt);
}
.dd-member-page .dd-member-qa h2 + .dd-member-q{margin-top:4px}
/* 本文＝コラムの実測値にそろえる（16px / 行間1.9 / #333 / 游ゴシック / 字間normal）。
   段落の間はコラムより少し広くする。1問1答が続くので、詰めると壁のように見える。 */
.dd-member-spec p,.dd-member-qa p,.dd-member-message p{
  margin:0 0 1em;font-family:var(--m-font);font-size:16px;font-weight:500;
  line-height:1.9;letter-spacing:normal;color:var(--dd-text,#333);
  /* 1行の長さを40字までに抑える。本文幅768pxのままだと1行48字になり、
     目が行末から行頭へ戻れず「文字だらけ」に見える（和文の目安は25〜40字）。 */
  max-width:40em;
}
.dd-member-free{font-family:var(--m-font);font-size:16px;line-height:1.9;color:var(--dd-text,#333)}
.dd-member-free img{max-width:100%;height:auto;border-radius:6px}

/* 本文中の画像（グループ見出しの直下）。入っていなければ出さない＝素材が来たら効く */
.dd-member-figure{margin:0 0 22px}
.dd-member-figure img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:var(--dd-shadow,0 2px 4px rgba(0,0,0,.05))}
.dd-member-figure figcaption{margin-top:8px;font-size:12.5px;color:var(--m-mut);line-height:1.7}

/* お客様へのメッセージ */
.dd-member-message{background:var(--m-soft);border:1px solid var(--m-line);padding:0 0 22px}
.dd-member-page .dd-member-message h2{margin-bottom:16px}
.dd-member-message p{padding:0 24px}

.dd-member-sns ul{margin:0;padding-left:20px}
.dd-member-sns li{font-size:15px;line-height:1.9;word-break:break-all}
.dd-member-page .dd-member-sns a{color:var(--m-gold-txt)}

/* ── 下部の導線（物件ページと同じ LINE緑・角丸なし）──────────── */
.dd-member-cta{margin:44px 0 0;padding:24px;background:var(--m-soft);border:1px solid var(--m-line)}
.dd-member-cta__lead{margin:0 0 14px;font-size:15px;line-height:1.8;color:var(--m-fg)}
.dd-member-page .dd-member-cta__link{
  display:inline-block;background:var(--m-line-green);color:#fff;font-weight:700;font-size:15.5px;
  padding:13px 28px;border-radius:0;text-decoration:none;
}
.dd-member-page .dd-member-cta__link:hover{opacity:.88}

.dd-member-cta__sub{margin:12px 0 0;font-size:13px}
.dd-member-page .dd-member-cta__sub a{color:var(--m-gold-txt);text-decoration:underline}

/* ── 右サイドバー ───────────────────────────────
   枠・影・見出し帯は dd-article.css の .dd-widget をそのまま使う（コラムと同じ部品）。
   ここではメンバー固有の中身だけを足す。 */
.dd-member-prof__head{display:flex;gap:14px;align-items:flex-start}
.dd-member-prof__photo{flex:0 0 88px}
.dd-member-prof__photo img{width:88px;height:66px;object-fit:cover;object-position:center 30%;display:block;border-radius:4px}
.dd-member-prof__photo.is-none{
  width:88px;height:66px;border-radius:4px;background:var(--m-soft);border:1px dashed var(--m-line);
  display:flex;align-items:center;justify-content:center;
}
.dd-member-prof__id{min-width:0;flex:1 1 auto}
.dd-member-prof__base{display:inline-block;margin:0 0 6px;padding:2px 9px;background:var(--m-gold);color:#fff;font-size:10.5px;letter-spacing:.08em;font-weight:600}
.dd-member-prof__role{margin:0 0 2px;font-size:11.5px;color:var(--m-mut);line-height:1.6}
.dd-member-prof__name{margin:0 0 4px;font-size:18px;font-weight:700;line-height:1.5;color:var(--m-ink);font-family:var(--m-font)}
.dd-member-prof__org{margin:0;font-size:11.5px;color:var(--m-mut);line-height:1.6}
.dd-member-prof__nums{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--m-line);
  display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.dd-member-prof__nums dt{font-size:10.5px;color:var(--m-mut);letter-spacing:.03em;line-height:1.5}
.dd-member-prof__nums dd{margin:2px 0 0;font-size:15px;font-weight:700;color:var(--m-gold-txt);line-height:1.4;font-feature-settings:"tnum"}
.dd-member-prof__lead{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--m-line);font-size:12.5px;line-height:1.85;color:var(--m-fg)}

/* CVバナーは枠なしで目一杯（コラムの画像ウィジェットと同じ扱い）。追従は .dd-sticky（dd-article.css） */
.dd-member-page .dd-widget.dd-member-banner{padding:0;border:0;background:none;box-shadow:none}
.dd-member-banner img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:var(--dd-shadow,0 2px 4px rgba(0,0,0,.05))}

.dd-member-others li a{display:flex;gap:12px;align-items:center}
.dd-member-others__photo{flex:0 0 56px}
.dd-member-others__photo img{width:56px;height:56px;object-fit:cover;object-position:center top;display:block;border-radius:4px}
.dd-member-others__photo.is-none{width:56px;height:56px;border-radius:4px;background:var(--m-soft);border:1px solid var(--m-line)}
.dd-member-others__txt{min-width:0}
.dd-member-others__role{display:block;font-size:11px;color:var(--m-mut);line-height:1.5}

/* ── スマホでは1カラムになるので、サイドバーの扱いを変える ──────────
   ・プロフィールカードは出さない（ページ上部のヒーローと同じ中身になり、二度手間になる）
   ・CVバナーは画面の下に貼り付ける（SPのヘッダーにはLINEボタンが出ないため、
     ここを外すとスクロール中に入口が1つも無くなる）。本文が隠れないよう body 側に余白を足す。 */
@media (max-width:959px){
  .dd-member-prof{display:none}
  .dd-member-page .dd-widget.dd-member-banner{
    /* top:auto が要る。.dd-sticky の top:24px が残ると、top と bottom が両方効いて
       バナーが画面の高さいっぱいに引き伸ばされる（実測で高さ820pxになった） */
    position:fixed;top:auto;left:0;right:0;bottom:0;z-index:40;
    padding:6px 12px calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:blur(4px);
    box-shadow:0 -2px 10px rgba(0,0,0,.12);
  }
  .dd-member-banner img{max-width:520px;margin:0 auto;box-shadow:none}
  body.single-dd_member{padding-bottom:96px}
}

/* ── 一覧 /member/ ─────────────────────────────── */
.dd-member-arc-head{padding:18px 0 22px;border-bottom:1px solid var(--m-line)}
.dd-member-arc-lead{margin:14px 0 0;font-size:16px;line-height:1.9;color:var(--m-fg)}
.dd-member-arc-empty{margin:40px 0;font-size:15px;color:var(--m-mut)}
.dd-member-arc-note{margin:32px 0 0;font-size:13px;line-height:1.9;color:var(--m-mut)}

/* 絞り込み（角丸なし・選択は帯のゴールド） */
.dd-member-filter{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.dd-member-page .dd-member-fbtn{
  appearance:none;cursor:pointer;font:inherit;font-size:13px;line-height:1;letter-spacing:.04em;
  padding:11px 18px;border:1px solid var(--m-line);border-radius:0;
  background:#fff;color:var(--m-mut);transition:background .15s,border-color .15s,color .15s;
}
.dd-member-page .dd-member-fbtn span{margin-left:8px;font-size:11.5px;color:var(--m-gold-txt)}
.dd-member-page .dd-member-fbtn:hover{border-color:var(--m-gold-lt)}
.dd-member-page .dd-member-fbtn.is-on{background:var(--m-gold);border-color:var(--m-gold);color:#fff}
.dd-member-page .dd-member-fbtn.is-on span{color:#fff}

/* カード：物件カードに合わせて角丸0・影なし。区切りは薄い罫だけ
   🔴 1pxのgapに背景色を敷いて罫線に見せる手法は使わない。
      人数が奇数だと空いたマスに背景色が出てベタ塗りの四角が残る（実測で確認）。
      各カードに罫線を持たせる形にすれば、何人でも崩れない。 */
.dd-member-cards{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px;align-items:stretch}
@media (min-width:720px){ .dd-member-cards{grid-template-columns:repeat(2,1fr)} }
.dd-member-card{display:flex}
.dd-member-card[hidden]{display:none}
.dd-member-page .dd-member-card__link{
  flex:1 1 auto;display:flex;gap:18px;align-items:flex-start;
  padding:22px;background:#fff;text-decoration:none;color:var(--m-fg);
  border:1px solid var(--m-line);border-radius:0;box-shadow:none;transition:background .18s,border-color .18s;
}
.dd-member-page .dd-member-card__link:hover{background:var(--m-soft)}

/* 🔴 一覧の顔写真も四角（2026-10-08 代表指示）。
   一覧はカードの高さをそろえたいので比率は固定するが、**4:3（横長）**にする。
   3:4（縦長）だと、元が横長の写真（実測：1567×1045）で左右が切れて顔が欠ける。 */
.dd-member-card__photo{flex:0 0 160px;display:block}
.dd-member-card__photo img{width:160px;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;border-radius:4px;display:block}
.dd-member-card__photo.is-none{
  width:160px;aspect-ratio:4/3;border-radius:4px;background:var(--m-soft);border:1px dashed var(--m-line);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.dd-member-card__photo.is-none .dd-member-photo__none{font-size:11px}

.dd-member-card__body{flex:1 1 auto;min-width:0;display:block}
.dd-member-page .dd-member-card__base{display:block;margin:0 0 7px;font-size:11px;letter-spacing:.2em;color:var(--m-gold-txt);font-weight:600;line-height:1.6}
.dd-member-page .dd-member-card__role{display:block;font-size:12.5px;color:var(--m-mut);line-height:1.7}
.dd-member-page .dd-member-card__name{display:block;margin:2px 0 0;font-size:19px;font-weight:700;line-height:1.5;color:var(--m-ink)}
.dd-member-page .dd-member-card__num{display:block;margin:10px 0 0;font-size:12px;color:var(--m-mut);line-height:1.6}
.dd-member-page .dd-member-card__num b{display:block;margin:0 0 1px;font-size:15.5px;color:var(--m-ink)}
.dd-member-page .dd-member-card__lead{display:block;margin:10px 0 0;font-size:13.5px;line-height:1.85;color:var(--m-fg);overflow-wrap:anywhere}
.dd-member-page .dd-member-card__cta{
  display:inline-block;margin:14px 0 0;font-size:13px;font-weight:700;color:var(--m-gold-txt);
  letter-spacing:.04em;line-height:1.6;border-bottom:1px solid var(--m-gold-lt);padding-bottom:2px;
}
.dd-member-page .dd-member-card__link:hover .dd-member-card__cta{border-bottom-color:var(--m-gold)}

/* ── 画面が狭い帯（601〜1150px）────────────────────────
   🔴 このブロックはファイルの末尾側に置く。
      .dd-member-num の既定値（26px）より前に書くと、同じ詳細度で後勝ちされて効かない（実測）。 */
@media (max-width:1150px) and (min-width:601px){
  .dd-member-photo img{max-width:320px;max-height:360px}
  .dd-member-photo.is-none{width:320px}
  /* 本文幅が595pxまで縮むと、数字3つが26pxのままでは2行に折れる（実測） */
  .dd-member-num{padding:0 20px}
  .dd-member-num__v{font-size:20px}
}

/* ── スマホ ────────────────────────────────── */
@media (max-width:600px){
  .dd-member-container{padding:0 16px}
  .dd-member-hero{flex-direction:column;align-items:flex-start;gap:18px}
  .dd-member-photo{flex:0 0 auto;width:100%}
  /* スマホは横幅いっぱい。切り抜かない（元画像の比率のまま） */
  .dd-member-photo img{width:100%;max-width:none;max-height:none;height:auto}
  .dd-member-photo.is-none{width:100%;max-width:none;aspect-ratio:3/2}
  .dd-member-page .dd-member-name{font-size:26px}
  .dd-member-spec p,.dd-member-qa p,.dd-member-message p{font-size:15px;line-height:1.9}
  .dd-member-page .dd-member-spec h2,
  .dd-member-page .dd-member-qa h2,
  .dd-member-page .dd-member-message h2,
  .dd-member-page .dd-member-sns h2{font-size:17px;padding:11px 15px}
  .dd-member-page .dd-member-q{font-size:15.5px;margin:24px 0 9px}
}
@media (max-width:519px){
  .dd-member-page .dd-member-card__link{gap:14px;padding:18px}
  .dd-member-card__photo{flex:0 0 92px}
  .dd-member-card__photo img,.dd-member-card__photo.is-none{width:92px}
  .dd-member-page .dd-member-card__name{font-size:17px}
}

/* ============================================================
   物件ページ・コラムの下に出す「担当者への導線」（2026-10-08 代表指示）

   🔴 既存の物件カード（dd-prop-card）は画像を16:9で切り抜くため、顔写真を乗せると顔が切れる。
      同じ理由でメンバーページの写真を切り抜かない作りにしたので、ここも専用のカードにする。
   見た目はメンバー一覧のカードにそろえる（角丸0・影なし・薄い罫・ゴールドの下線CTA）。
   ============================================================ */
.dd-xl-members{ background:#f7f5f1; padding:48px 0 56px; }
.dd-xl-members__inner{ max-width:1200px; margin:0 auto; padding:0 clamp(16px,3vw,32px); }
/* 🔴 .dd-xl-members__title だけ（詳細度0,1,0）では Elementor Kit の
   `.elementor-kit-193 h2`（0,1,1）に負けて、巨大な薄いグレーになる（実測）。
   メンバーページで同じ事故があったため、ここでは最初から h2 を含めて (0,2,1) にする。 */
.dd-xl-members h2.dd-xl-members__title{
  margin:0 0 6px; font-size:20px; line-height:1.5; font-weight:700; color:#1a1c20;
  font-family:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  padding:.1em 0 .1em .6em; border-left:4px solid #b08d4f; background:none;
}
.dd-xl-members__lead{ margin:0 0 20px; padding-left:calc(.6em + 4px); font-size:14px; line-height:1.8; color:#5f636c; }
.dd-xl-members__grid{ list-style:none; margin:0; padding:0; display:grid; gap:20px; grid-template-columns:repeat(3,1fr); }
@media (max-width:959px){ .dd-xl-members__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .dd-xl-members__grid{ grid-template-columns:1fr; } }
.dd-xl-member{ display:flex; }
.dd-xl-members .dd-xl-member__link{
  flex:1 1 auto; display:flex; gap:16px; align-items:flex-start;
  padding:18px; background:#fff; border:1px solid #e4e1da; border-radius:0; box-shadow:none;
  text-decoration:none; color:#1a1a1a; transition:background .18s;
}
.dd-xl-members .dd-xl-member__link:hover{ background:#f7f5f1; }
.dd-xl-member__photo{ flex:0 0 96px; display:block; }
.dd-xl-member__photo img{ width:96px; aspect-ratio:4/3; object-fit:cover; object-position:center 30%; display:block; border-radius:4px; }
.dd-xl-member__photo.is-none{
  width:96px; aspect-ratio:4/3; border-radius:4px; background:#f7f5f1; border:1px dashed #e4e1da;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.dd-xl-member__none{ font-size:10.5px; color:#5f636c; line-height:1.4; }
.dd-xl-member__body{ flex:1 1 auto; min-width:0; display:block; }
.dd-xl-members .dd-xl-member__base{ display:block; font-size:10.5px; letter-spacing:.2em; color:#8a6a3a; font-weight:600; line-height:1.6; }
.dd-xl-members .dd-xl-member__role{ display:block; margin-top:4px; font-size:12px; color:#5f636c; line-height:1.6; }
.dd-xl-members .dd-xl-member__name{ display:block; margin-top:2px; font-size:17px; font-weight:700; line-height:1.5; color:#1a1c20; }
.dd-xl-members .dd-xl-member__num{ display:block; margin-top:6px; font-size:13px; font-weight:700; color:#8a6a3a; line-height:1.5; }
.dd-xl-members .dd-xl-member__cta{
  display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700; color:#8a6a3a;
  letter-spacing:.04em; line-height:1.6; border-bottom:1px solid #c9a961; padding-bottom:2px;
}
.dd-xl-members .dd-xl-member__link:hover .dd-xl-member__cta{ border-bottom-color:#b08d4f; }