/* ===================================================================
   FDE評価体系ページ（/fde/）専用スタイル
   - main.css / _brand.css の後に読み込む
   - 既存テンプレートはダーク基調のため、本ページの明色セクションは色を明示指定する
   =================================================================== */

.fde-page {
  --fde-navy: #2c334a;
  --fde-deep: #1b2d4b;
  --fde-ink: #1f2a3d;
  --fde-text: #3d4a5c;
  --fde-muted: #6a7789;
  --fde-line: #dfe5ec;
  --fde-bg: #f5f7fa;
  --fde-white: #ffffff;
  --fde-gold: #e3a127;
  --c-psf: #0875ad; --t-psf: #e7f5fc;
  --c-aae: #008a83; --t-aae: #e5f8f4;
  --c-rpx: #2f6fd1; --t-rpx: #eaf1fd;
  --c-cfa: #d7651e; --t-cfa: #fff1e5;
  --c-aex: #7250b5; --t-aex: #f1eafd;
}

.fde-page .header { background: var(--fde-navy); }

/* ---------- 共通 ---------- */
.fde-light { background: var(--fde-bg); color: var(--fde-text); }
.fde-white { background: var(--fde-white); color: var(--fde-text); }
.fde-light h2, .fde-light h3, .fde-light h4,
.fde-white h2, .fde-white h3, .fde-white h4 { color: var(--fde-ink); }
.fde-light p, .fde-white p { color: var(--fde-text); }
.fde-sec { padding: 88px 0; }
.fde-eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  color: var(--fde-gold); margin-bottom: .75rem;
}
.fde-sec-title { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.fde-sec-title h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.45; margin-bottom: 1rem; }
.fde-sec-title p { line-height: 1.9; margin: 0; }

/* 軸カラーの割り当て */
[data-axis="psf"] { --c: var(--c-psf); --t: var(--t-psf); }
[data-axis="aae"] { --c: var(--c-aae); --t: var(--t-aae); }
[data-axis="rpx"] { --c: var(--c-rpx); --t: var(--t-rpx); }
[data-axis="cfa"] { --c: var(--c-cfa); --t: var(--t-cfa); }
[data-axis="aex"] { --c: var(--c-aex); --t: var(--t-aex); }

/* ---------- ヒーロー ---------- */
.fde-hero {
  padding: 150px 0 96px;
  background:
    radial-gradient(circle at 85% 10%, rgba(61,127,240,.35) 0, transparent 45%),
    linear-gradient(135deg, #1b2d4b 0%, #26497f 55%, #2c334a 100%);
  color: #fff;
}
.fde-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 700; line-height: 1.4; margin-bottom: 1.5rem; }
.fde-hero .lead { color: rgba(255,255,255,.86); font-size: 1.08rem; line-height: 2; max-width: 760px; }
.fde-hero .fde-note-line {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18);
  font-size: .86rem; color: rgba(255,255,255,.72); max-width: 760px; line-height: 1.8;
}
.fde-hero .fde-note-line a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fde-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.fde-btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem;
  border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s;
}
.fde-btn-primary { background: var(--fde-gold); color: #1f2a3d; }
.fde-btn-primary:hover { color: #1f2a3d; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(227,161,39,.35); }
.fde-btn-ghost { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.fde-btn-ghost:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ---------- つかみ：セリフ ---------- */
.fde-voices { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.fde-voice {
  position: relative; background: var(--fde-white); border: 1px solid var(--fde-line);
  border-top: 4px solid var(--c); border-radius: 16px; padding: 22px 18px 18px;
  box-shadow: 0 8px 22px rgba(27,45,75,.06);
}
.fde-voice q { display: block; quotes: "「" "」"; font-weight: 700; color: var(--fde-ink); line-height: 1.7; font-size: 1rem; }
.fde-voice .who { display: block; margin-top: .9rem; font-size: .78rem; font-weight: 700; color: var(--c); letter-spacing: .05em; }
.fde-voices-lead { text-align: center; max-width: 760px; margin: 40px auto 0; line-height: 2; }
.fde-voices-lead strong { color: var(--fde-ink); }

/* ---------- 5つの能力（一覧） ---------- */
.fde-axes { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.fde-axis {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  background: var(--fde-white); border: 1px solid var(--fde-line); border-radius: 18px;
  padding: 24px 20px; color: var(--fde-text); cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  font: inherit;
}
.fde-axis:hover, .fde-axis:focus-visible { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 14px 30px rgba(27,45,75,.12); outline: none; }
.fde-axis .code { font-size: 1.9rem; font-weight: 800; color: var(--c); line-height: 1; font-family: 'Roboto', 'Noto Sans JP', sans-serif; }
.fde-axis .name { margin-top: .6rem; font-weight: 700; color: var(--fde-ink); font-size: .95rem; }
.fde-axis .en { font-size: .72rem; color: var(--fde-muted); line-height: 1.4; margin-top: .2rem; min-height: 2.1em; }
.fde-axis .catch { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--fde-line); font-size: 1.35rem; font-weight: 800; color: var(--c); line-height: 1.35; }
.fde-axis .catch-sub { font-size: .82rem; font-weight: 700; color: var(--fde-text); margin-top: .35rem; line-height: 1.55; }
.fde-axis .more { margin-top: auto; padding-top: 1rem; font-size: .8rem; font-weight: 700; color: var(--c); }

/* ---------- 詳細（タブ） ---------- */
.fde-tablist { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.fde-tab {
  font: inherit; cursor: pointer; border: 1px solid var(--fde-line); background: var(--fde-white);
  color: var(--fde-text); border-radius: 999px; padding: .55rem 1.2rem; font-weight: 700; font-size: .9rem;
  transition: background .2s, color .2s, border-color .2s;
}
.fde-tab .tcode { color: var(--c); margin-right: .35rem; font-family: 'Roboto', 'Noto Sans JP', sans-serif; }
.fde-tab:hover { border-color: var(--c); }
.fde-tab[aria-selected="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.fde-tab[aria-selected="true"] .tcode { color: #fff; }
.fde-tab:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

.fde-panel { background: var(--fde-white); border: 1px solid var(--fde-line); border-radius: 22px; overflow: hidden; box-shadow: 0 16px 40px rgba(27,45,75,.08); }
.fde-panel + .fde-panel { margin-top: 24px; }
.js .fde-panel + .fde-panel { margin-top: 0; }
.fde-panel-head { padding: 22px 32px; border-bottom: 1px solid var(--fde-line); display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.fde-panel-head .code { font-family: 'Roboto', 'Noto Sans JP', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--c); }
.fde-panel-head h3 { font-size: 1.3rem; font-weight: 700; margin: 0; }
.fde-panel-head .en { font-size: .82rem; color: var(--fde-muted); }

/* 言い換え帯：正式定義 → ひとことで言うと */
.fde-translate { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; background: var(--t); }
.fde-translate .formal { padding: 28px 32px; }
.fde-translate .plain { padding: 28px 32px; background: rgba(255,255,255,.6); }
.fde-translate .lbl { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--fde-muted); margin-bottom: .6rem; }
.fde-translate .formal p { margin: 0; line-height: 1.95; color: var(--fde-ink); }
.fde-translate .plain .big { display: block; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; color: var(--c); line-height: 1.3; }
.fde-translate .plain .sub { display: block; margin-top: .5rem; font-weight: 700; color: var(--fde-ink); }
.fde-translate .arrow { display: flex; align-items: center; justify-content: center; padding: 0 6px; color: var(--c); font-size: 1.6rem; }

/* 構成能力カード */
.fde-abilities { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; padding: 24px; }
.fde-ability { border: 1px solid var(--fde-line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; }
.fde-ability .no { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--c); }
.fde-ability .plain { font-size: 1.3rem; font-weight: 800; color: var(--fde-ink); margin: .35rem 0 .15rem; line-height: 1.4; }
.fde-ability .formal { font-size: .84rem; font-weight: 700; color: var(--fde-muted); }
.fde-bubble {
  position: relative; margin: 1.1rem 0 1.2rem; padding: 14px 16px; background: var(--t);
  border-radius: 14px; color: var(--c); font-weight: 700; line-height: 1.6;
}
.fde-bubble::before {
  content: ""; position: absolute; left: 22px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--t);
}
.fde-ability .ai-lbl { font-size: .74rem; font-weight: 700; color: var(--fde-muted); letter-spacing: .08em; margin-bottom: .3rem; }
.fde-ability .ai { font-size: .9rem; line-height: 1.85; margin: 0; color: var(--fde-text); }
.fde-caption { font-size: .8rem; color: var(--fde-muted); margin-top: 14px; text-align: right; }

/* ---------- 判定の流れ ---------- */
.fde-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; counter-reset: step; }
.fde-step { position: relative; background: var(--fde-white); border: 1px solid var(--fde-line); border-radius: 18px; padding: 28px 24px; }
.fde-step .num { font-family: 'Roboto', 'Noto Sans JP', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--fde-gold); }
.fde-step h3 { font-size: 1.25rem; font-weight: 700; margin: .4rem 0 .8rem; }
.fde-step p { margin: 0; line-height: 1.9; font-size: .95rem; }
.fde-step .chip { display: inline-block; margin-top: 1rem; padding: .3rem .8rem; border-radius: 999px; background: var(--fde-bg); color: var(--fde-ink); font-weight: 700; font-size: .8rem; }
.fde-step:not(:last-child)::after {
  content: "\F285"; font-family: "bootstrap-icons"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--fde-navy); color: #fff; display: grid; place-items: center; font-size: .8rem; z-index: 2;
}
.fde-contrast { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 32px; }
.fde-contrast .box { border-radius: 16px; padding: 22px 24px; text-align: center; }
.fde-contrast .before { background: var(--fde-white); border: 1px dashed #b8c2cf; }
.fde-contrast .after { background: var(--fde-navy); color: #fff; }
.fde-contrast .box .lbl { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .4rem; }
.fde-contrast .before .lbl { color: var(--fde-muted); }
.fde-contrast .after .lbl { color: var(--fde-gold); }
.fde-contrast .box strong { font-size: 1.15rem; }
.fde-contrast .before strong { color: var(--fde-ink); }
.fde-contrast .after strong { color: #fff; }
.fde-contrast .arrow { font-size: 1.6rem; color: var(--fde-navy); }

/* ---------- 活用シーン ---------- */
.fde-uses { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.fde-use { border: 1px solid var(--fde-line); border-radius: 18px; padding: 26px 24px; background: var(--fde-white); }
.fde-use i { font-size: 1.6rem; color: var(--fde-navy); }
.fde-use h3 { font-size: 1.1rem; font-weight: 700; margin: .8rem 0 .6rem; }
.fde-use p { margin: 0; line-height: 1.85; font-size: .93rem; }

/* ---------- 目指すもの ---------- */
.fde-vision { background: var(--fde-navy); color: #fff; padding: 96px 0; text-align: center; }
.fde-vision .fde-eyebrow { color: var(--fde-gold); }
.fde-vision p.statement { color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.65rem); font-weight: 700; line-height: 2; max-width: 880px; margin: 0 auto; }

/* ---------- CTA ---------- */
.fde-cta { padding: 80px 0; background: var(--fde-bg); }
.fde-cta .integration-panel { padding: 48px 32px; text-align: center; color: #fff; }
.fde-cta .integration-panel h2 { color: #fff; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1rem; }
.fde-cta .integration-panel p { color: rgba(255,255,255,.86); line-height: 1.9; max-width: 680px; margin: 0 auto 1.75rem; }

/* ---------- 注記 ---------- */
.fde-notes { background: var(--fde-bg); padding: 0 0 64px; }
.fde-notes ul { list-style: none; padding: 0; margin: 0 auto; max-width: 960px; border-top: 1px solid var(--fde-line); padding-top: 20px; }
.fde-notes li { font-size: .8rem; color: var(--fde-muted); line-height: 1.8; padding-left: 1em; text-indent: -1em; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1199px) {
  .fde-voices, .fde-axes { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 991px) {
  .fde-abilities, .fde-steps, .fde-uses { grid-template-columns: 1fr; }
  .fde-step:not(:last-child)::after { right: 50%; top: auto; bottom: -16px; transform: translateX(50%) rotate(90deg); }
  .fde-translate { grid-template-columns: 1fr; }
  .fde-translate .arrow { transform: rotate(90deg); padding: 4px 0; }
}
@media (max-width: 767px) {
  .fde-sec { padding: 64px 0; }
  .fde-hero { padding: 120px 0 72px; }
  .fde-voices, .fde-axes { grid-template-columns: 1fr 1fr; }
  .fde-contrast { grid-template-columns: 1fr; }
  .fde-contrast .arrow { transform: rotate(90deg); text-align: center; }
  .fde-panel-head, .fde-translate .formal, .fde-translate .plain { padding-left: 20px; padding-right: 20px; }
  .fde-abilities { padding: 16px; }
}
@media (max-width: 480px) {
  .fde-voices, .fde-axes { grid-template-columns: 1fr; }
  .fde-axis .en { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fde-axis, .fde-btn, .fde-tab { transition: none; }
}
@media print {
  .fde-tablist { display: none; }
  .fde-panel[hidden] { display: block !important; }
}

/* ---------- 追加：改行制御・ヒーロー図 ---------- */
.fde-page .nb { display: inline-block; }
.fde-hero-visual { max-width: 380px; margin-left: auto; }
.fde-hero-visual svg { width: 100%; height: auto; display: block; overflow: visible; }
.fde-vision p.statement { font-size: clamp(1.1rem, 2.1vw, 1.5rem); max-width: 980px; }
@media (max-width: 767px) {
  .fde-vision .nb { display: inline; }
}

/* ---------- 評価の手がかり（覚書 別紙1） ---------- */
.fde-ev { margin-top: 1.1rem; border-top: 1px dashed rgba(31,42,61,.18); padding-top: .9rem; }
.fde-translate .fde-ev .lbl { margin-bottom: .5rem; }
.fde-ev ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fde-ev li { background: rgba(255,255,255,.85); border: 1px solid rgba(31,42,61,.12); color: var(--fde-ink); font-size: .8rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; }

/* ---------- FDEアセスメントが描く未来 ---------- */
.fde-futures { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; counter-reset: fut; }
.fde-future { position: relative; border-radius: 18px; padding: 28px 24px; background: linear-gradient(160deg, #f5f8fd 0%, #ffffff 70%); border: 1px solid var(--fde-line); }
.fde-future .who { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: #0875ad; background: #e7f5fc; border-radius: 999px; padding: .25rem .8rem; }
.fde-future h3 { font-size: 1.3rem; font-weight: 700; margin: .9rem 0 .7rem; }
.fde-future p { margin: 0; line-height: 1.9; font-size: .94rem; }
@media (max-width: 991px) { .fde-futures { grid-template-columns: 1fr; } }

/* ---------- 問い → 答え → その先に（イメージ図付き） ---------- */
.fde-answers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.fde-answer { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fde-line); border-radius: 20px; padding: 26px 24px 24px; box-shadow: 0 10px 28px rgba(27,45,75,.06); }
.fde-answer-who { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: #0875ad; background: #e7f5fc; border-radius: 999px; padding: .25rem .85rem; }
.fde-answer-q { position: relative; margin: 1rem 0 .4rem; padding: 14px 16px; background: var(--fde-bg); border-radius: 14px; font-weight: 700; color: var(--fde-ink) !important; font-size: 1.02rem; line-height: 1.6; }
.fde-answer-q::after { content: ""; position: absolute; left: 24px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--fde-bg); }
.fde-viz { margin: 14px 0 6px; text-align: center; }
.fde-viz svg { width: 100%; max-width: 240px; height: auto; display: inline-block; overflow: visible; }
.fde-viz figcaption { font-size: .74rem; color: var(--fde-muted); margin-top: .2rem; }
.fde-answer-a { margin: .6rem 0 1rem !important; font-weight: 700; color: var(--fde-ink) !important; line-height: 1.8; }
.fde-answer-next { margin-top: auto; border-radius: 12px; padding: 14px 16px; background: linear-gradient(120deg, #1b2d4b, #26497f); color: #fff; font-weight: 700; line-height: 1.7; font-size: .93rem; }
.fde-answer-next span { display: block; font-size: .72rem; letter-spacing: .14em; color: var(--fde-gold); margin-bottom: .2rem; }
@media (max-width: 991px) { .fde-answers { grid-template-columns: 1fr; } .fde-viz svg { max-width: 260px; } }

/* 動き：画面に入ると図が描かれる（JS有効時のみ初期状態を隠す） */
.js .fde-viz-radar .shape { transform-origin: 110px 110px; transform: scale(.15); opacity: 0; transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.js .fde-viz-radar.is-in .shape { transform: scale(1); opacity: 1; }
.js .fde-viz-bars .bar { transform-origin: 0 170px; transform: scaleY(0); transition: transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d); }
.js .fde-viz-bars.is-in .bar { transform: scaleY(1); }
.js .fde-viz-line .line { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.4s ease; }
.js .fde-viz-line .area, .js .fde-viz-line .dots { opacity: 0; transition: opacity .8s ease .9s; }
.js .fde-viz-line.is-in .line { stroke-dashoffset: 0; }
.js .fde-viz-line.is-in .area, .js .fde-viz-line.is-in .dots { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .fde-viz-radar .shape, .js .fde-viz-bars .bar, .js .fde-viz-line .line, .js .fde-viz-line .area, .js .fde-viz-line .dots { transition: none; transform: none; opacity: 1; stroke-dashoffset: 0; }
}

/* ---------- ヒーロー図：初回表示の演出 ---------- */
.js .fde-hero-visual .hv-outer, .js .fde-hero-visual .hv-inner { opacity: 0; animation: hv-fade .8s ease forwards; }
.js .fde-hero-visual .hv-inner { animation-delay: .2s; }
.js .fde-hero-visual .hv-spokes line { stroke-dasharray: 170; stroke-dashoffset: 170; animation: hv-draw .9s ease forwards .3s; }
.js .fde-hero-visual .hv-node { opacity: 0; transform: scale(.4); animation: hv-pop .5s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(.5s + var(--i) * .18s); }
.js .fde-hero-visual .hv-core { opacity: 0; animation: hv-fade .8s ease forwards 1.6s; }
@keyframes hv-fade { to { opacity: 1; } }
@keyframes hv-draw { to { stroke-dashoffset: 0; } }
@keyframes hv-pop { to { opacity: 1; transform: scale(1); } }

/* ---------- 吹き出しのアイコン ---------- */
.fde-voice { padding-top: 30px; }
.fde-voice-ava { position: absolute; top: -18px; left: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 1.05rem; box-shadow: 0 4px 10px rgba(27,45,75,.15); }

/* ---------- 技術×役割の図 ---------- */
.fde-viz-venn { max-width: 560px; margin: 0 auto 32px; text-align: center; }
.fde-viz-venn svg { width: 100%; height: auto; overflow: visible; }
.fde-viz-venn figcaption { font-weight: 700; color: var(--fde-ink); font-size: .95rem; margin-top: .4rem; }
.js .fde-viz-venn .c-tech { transform: translateX(-40px); opacity: .3; transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .8s; }
.js .fde-viz-venn .c-role { transform: translateX(40px); opacity: .3; transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .8s; }
.js .fde-viz-venn .c-core { opacity: 0; transform-origin: 260px 100px; transform-box: view-box; transform: scale(.6); transition: opacity .5s ease .8s, transform .5s cubic-bezier(.2,1.4,.4,1) .8s; }
.js .fde-viz-venn.is-in .c-tech, .js .fde-viz-venn.is-in .c-role { transform: none; opacity: 1; }
.js .fde-viz-venn.is-in .c-core { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .fde-hero-visual .hv-outer, .js .fde-hero-visual .hv-inner, .js .fde-hero-visual .hv-spokes line, .js .fde-hero-visual .hv-node, .js .fde-hero-visual .hv-core { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .js .fde-viz-venn .c-tech, .js .fde-viz-venn .c-role, .js .fde-viz-venn .c-core { transition: none; transform: none; opacity: 1; }
}
.fde-viz-venn { max-width: 640px; }
.fde-viz-venn svg { max-width: 640px; }
.fde-viz-venn figcaption { font-size: 1.05rem; margin-top: .8rem; }
.fde-viz-venn figcaption .nb { display: inline-block; }