/*
 * Pages — 固定ページ本文のスタイル
 *
 * v6 ワイヤーフレームの意匠をクラスとして定義したもの。
 * 宣言はワイヤーの指定をそのまま保持しているため、見た目は変わらない。
 * 要素ごとに異なる座標・線の色・アニメーションの位相だけは、
 * データとして各要素の style に残している。
 */

/* ── ページ見出し ── */
.dra-page-head { padding:32px 8px 22px; }
.dra-breadcrumb { font-size:12px; color:#9ca3af; letter-spacing:.05em; }
.dra-breadcrumb__link { color:#9ca3af; text-decoration:none; }
.dra-page-title { margin:10px 0 0; font-size:30px; font-weight:600; color:#111827; letter-spacing:.04em; }
.dra-page-lead { margin:14px 0 0; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }

/* ── セクション ── */
.dra-sec { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:28px; margin-bottom:16px; }
.dra-sec.dra-sec--lg { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:36px 28px; margin-bottom:16px; }
.dra-sec-title { margin:0 0 20px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.dra-sec.dra-sec--outline { background:#fff; border:1px solid #d1d5db; border-radius:8px; padding:28px; margin-bottom:16px; }
.dra-sec.dra-sec--tight { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:24px 28px; margin-bottom:16px; }
.dra-sec-1 { background:#fff; border:1px solid #d1d5db; border-radius:8px; padding:32px; margin-bottom:16px; }
.dra-sec-3 { background:#fff; border:1px solid #d1d5db; border-radius:8px; padding:24px 28px; margin-bottom:16px; }
.dra-sec.dra-sec--flush { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:0 28px; margin-bottom:16px; }
.dra-owner-card { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:28px; margin-bottom:16px; display:flex; align-items:center; gap:28px; }
.dra-sec-5 { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:28px; margin-bottom:16px; display:flex; align-items:center; gap:24px; }

/* ── 本文・条文 ── */
.dra-txt-1 { margin:14px 0 0; font-size:17px; line-height:1.9; color:#1f2937; letter-spacing:.05em; font-feature-settings:'palt'; }
.dra-txt-2 { margin:0 0 14px; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-3 { margin:0 0 22px; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-4 { margin:16px 0 0; text-align:center; font-size:14px; font-weight:600; color:#1f2937; }
.dra-txt-5 { margin:6px 0 0; text-align:center; font-size:13px; color:#9ca3af; }
.dra-txt-6 { margin:0 0 10px; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-7 { margin:0 0 20px; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-8 { margin:18px 0 0; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-9 { margin:8px 0 0; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-10 { margin:0 0 12px; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-11 { margin:0; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-13 { margin:0; font-size:14px; line-height:1.9; color:#4b5563; }
.dra-txt-14 { margin:18px 0 0; font-size:14px; line-height:1.85; color:#4b5563; }
.dra-txt-15 { margin:0 0 12px; font-size:18px; line-height:1.9; color:#1f2937; letter-spacing:.05em; font-feature-settings:'palt'; }
.dra-txt-16 { margin:0; font-size:16px; line-height:1.9; color:#1f2937; letter-spacing:.05em; font-feature-settings:'palt'; }
.dra-txt-17 { margin:0 0 16px; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-18 { margin:0 0 18px; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-19 { margin:10px 0 0; font-size:15px; line-height:1.9; color:#4b5563; letter-spacing:.05em; }
.dra-txt-20 { margin:12px 0 0; font-size:19px; font-weight:600; color:#1f2937; letter-spacing:.04em; }
.dra-txt-21 { margin:12px 0 0; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-22 { margin:8px 0 0; font-size:14.5px; line-height:1.8; color:#4b5563; }
.dra-txt-23 { margin:10px 0 0; font-size:14px; line-height:1.8; color:#4b5563; }
.dra-txt-24 { margin:10px 0 24px; font-size:15px; line-height:1.9; color:#4b5563; }
.dra-txt-25 { margin:10px 0 20px; font-size:15px; line-height:1.9; color:#4b5563; }
.dra-txt-26 { margin:8px 0 14px; font-size:14px; line-height:1.8; color:#4b5563; }
.dra-txt-27 { margin:0 0 8px; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-article { padding:18px 0; border-bottom:1px solid #f3f4f6; }
.dra-article__head { display:flex; gap:10px; align-items:baseline; }
.dra-article__no { font-size:12px; font-weight:600; color:#9ca3af; min-width:20px; }
.dra-article__title { font-size:15px; font-weight:600; color:#111827; }
.dra-numrow { display:flex; gap:10px; margin-top:7px; font-size:14px; line-height:1.85; color:#4b5563; }
.dra-numrow__mark { flex:none; color:#9ca3af; }
.dra-numrow__num { flex:none; color:#9ca3af; min-width:16px; }
.dra-txt-28 { margin:6px 0 0 30px; font-size:14px; line-height:1.85; color:#4b5563; }
.dra-txt-29 { margin:18px 0 0; font-size:16px; line-height:1.8; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-30 { margin:10px 0 0; font-size:14px; color:#4b5563; }
.dra-txt-31 { margin:0 0 26px; font-size:15px; line-height:1.9; color:#222; letter-spacing:.06em; font-feature-settings:'palt'; }
.dra-txt-32 { margin:12px 0 0; text-align:center; font-size:13px; color:#9ca3af; }

/* ── タグ・注記 ── */
.dra-ph { background:#fffbeb; border:1px solid #fde68a; border-radius:4px; padding:1px 6px; color:#92400e; }
.dra-tag.dra-tag--check { font-size:11px; font-weight:600; color:#92400e; background:#fef3c7; border:1px solid #fde68a; border-radius:4px; padding:2px 6px; line-height:1.4; }

/* ── FAQ ── */
.dra-faq-item { padding:18px 2px; border-bottom:1px solid #e5e7eb; }
.dra-faq-item__q { font-size:16px; font-weight:600; color:#111827; }
.dra-faq-item__link { margin-left:auto; font-size:13px; color:#5b21b6; text-decoration:none; white-space:nowrap; }

/* ── CTA・ボタン ── */
.dra-lnk.dra-lnk--secondary { display:inline-flex; align-items:center; background:#fff; color:#1f2937; border:1px solid #d1d5db; border-radius:6px; padding:13px 22px; font-size:15px; line-height:1; text-decoration:none; }
.dra-cta { display:grid; grid-template-columns:1fr 420px; gap:40px; align-items:center; padding:38px 32px; max-width:1100px; margin:0 auto; }
.dra-cta__eyebrow { font-size:12px; font-weight:600; letter-spacing:.2em; color:#6b7280; }
.dra-lnk-1 { display:inline-flex; align-items:center; background:#1f2937; color:#fff; border:1px solid #1f2937; border-radius:6px; padding:13px 26px; font-size:15px; line-height:1; text-decoration:none; }
.dra-lnk-2 { color:#1f2937; }
.dra-lnk-4 { font-size:15px; color:#1f2937; border-bottom:1px solid #1f2937; padding-bottom:2px; text-decoration:none; }
.dra-lnk-6 { display:inline-flex; align-items:center; background:#1f2937; color:#fff; border:1px solid #1f2937; border-radius:6px; padding:13px 24px; font-size:15px; line-height:1; text-decoration:none; }
.dra-lnk-7 { font-size:17px; font-weight:600; color:#111827; text-decoration:none; border-bottom:1px solid #d1d5db; display:inline-block; }
.dra-lnk.dra-lnk--primary { display:inline-flex; align-items:center; background:#1f2937; color:#fff; border:1px solid #1f2937; border-radius:6px; padding:13px 22px; font-size:15px; line-height:1; text-decoration:none; }
.dra-lnk-8 { display:flex; gap:14px; align-items:center; border:1px solid #e5e7eb; border-radius:8px; padding:14px 16px; text-decoration:none; color:inherit; }
.dra-lnk-9 { display:inline-flex; align-items:center; background:#fff; color:#1f2937; border:1px solid #d1d5db; border-radius:6px; padding:13px 22px; font-size:15px; line-height:1; white-space:nowrap; text-decoration:none; }
.dra-lnk-10 { display:inline-flex; align-items:center; gap:7px; border:1px solid #d1d5db; background:#fff; border-radius:24px; padding:8px 16px; font-size:14px; color:#1f2937; text-decoration:none; line-height:1; }

/* ── マップ図解 ── */
.dra-fig { position:relative; background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; box-sizing:border-box; overflow:hidden; margin:0 auto; }
.dra-fig__divider { position:absolute; border-bottom:1px dashed #e5e7eb; }
.dra-fig__band { position:absolute; font-size:10px; color:#9ca3af; font-weight:600; letter-spacing:.1em; }
.dra-fig-card__role { font-size:11px; color:#6b7280; font-weight:600; line-height:1.3; }
.dra-fig-card__name { font-size:14px; font-weight:600; color:#1f2937; line-height:1.3; margin-top:2px; }
.dra-svg-1 { position:absolute; pointer-events:none; overflow:visible; }
.dra-anim-flow { animation:mp-anim-1 .8s linear infinite; }
/* 線の向きと逆に流したいとき (点列は本人→相手のまま、矢印が本人側に付く関係)。
   マップ本体の mp-anim-2 と同じ動き。 */
.dra-anim-flow-rev { animation:mp-anim-2 .8s linear infinite; }
.dra-anim-blink { animation:mp-blink 2.5s ease-in-out infinite; }
.dra-anim-pulse { animation:mp-pulse 2.4s ease-in-out infinite; }
.dra-fig-card__role.dra-fig-card__role--sm { font-size:8px; color:#6b7280; font-weight:600; line-height:1.3; }
.dra-fig-card__name.dra-fig-card__name--sm { font-size:10px; font-weight:600; color:#1f2937; line-height:1.3; margin-top:2px; }
.dra-svg-2 { overflow:visible; }
.dra-svg-3 { flex:none; }
.dra-anim-swing { animation:mp-swing 3.2s ease-in-out infinite; }
.dra-svg-4 { display:block; margin:8px 0; }

/* ── その他 ── */
.dra-em-1 { font-weight:600; }
.dra-h2-1 { margin:0 0 12px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.dra-blk-1 { display:flex; gap:16px; align-items:stretch; flex-wrap:wrap; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; padding:22px 24px; }
.dra-blk-2 { flex:1; min-width:180px; }
.dra-blk-3 { font-size:11px; font-weight:600; color:#9ca3af; letter-spacing:.14em; }
.dra-blk-4 { font-size:16px; font-weight:600; color:#111827; margin-top:6px; }
.dra-blk-5 { font-size:13.5px; line-height:1.7; color:#6b7280; margin-top:6px; }
.dra-blk-6 { flex:none; color:#d1d5db; font-size:18px; align-self:center; }
.dra-blk-7 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #00f200; border-radius:10px; padding:6px 12px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-8 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:4px solid #ffd700; border-radius:10px; padding:6px 12px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.dra-blk-9 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #00f3ff; border-radius:10px; padding:6px 12px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-10 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #ffd700; border-radius:10px; padding:6px 12px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-11 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #ff00ff; border-radius:10px; padding:6px 12px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-12 { display:flex; gap:20px; flex-wrap:wrap; }
.dra-icon-inline { font-size:18px; vertical-align:middle; }
.dra-h2-2 { margin:14px 0 0; font-size:26px; font-weight:600; color:#111827; letter-spacing:.03em; line-height:1.5; font-feature-settings:'palt'; }
.dra-blk-13 { margin-top:26px; }
.dra-blk-14 { position:relative; }
.dra-blk-15 { position:absolute; }
.dra-blk-16 { transform:scale(0.78); transform-origin:top left; }
.dra-blk-17 { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 6px 18px rgba(17,24,39,.12); box-sizing:border-box; overflow:hidden; margin:0 auto; }
.dra-blk-18 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #ffd700; border-radius:7px; padding:4px 6px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-19 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #00f200; border-radius:7px; padding:4px 6px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-20 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:4px solid #ffd700; border-radius:7px; padding:4px 6px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.dra-blk-21 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #ff00ff; border-radius:7px; padding:4px 6px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-22 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #00f3ff; border-radius:7px; padding:4px 6px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-23 { margin-top:14px; font-size:11.5px; color:#6b7280; letter-spacing:.08em; text-align:right; }
.dra-duo { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dra-blk-29 { background:#f3f4f6; border:1px solid #e5e7eb; border-radius:6px; padding:16px 20px; margin-bottom:16px; font-size:14px; line-height:1.85; color:#4b5563; }
.dra-h2-3 { margin:0 0 16px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.dra-blk-30 { border:1px solid #e5e7eb; border-radius:6px; padding:20px; margin-bottom:20px; }
.dra-blk-31 { font-size:14px; font-weight:600; color:#111827; margin-bottom:8px; }
.dra-blk-32 { border:1px solid #e5e7eb; border-radius:6px; padding:20px; }
.dra-blk-33 { font-size:14px; font-weight:600; color:#111827; margin-bottom:12px; }
.dra-table { display:grid; grid-template-columns:1.1fr .8fr 1.6fr 1fr 1.4fr; gap:0; }
.dra-blk-35 { padding:10px 12px; background:#f9fafb; border-bottom:1px solid #e5e7eb; font-size:12.5px; font-weight:600; color:#1f2937; }
.dra-blk-36 { padding:12px; border-bottom:1px solid #f3f4f6; font-size:13px; line-height:1.8; color:#4b5563; }
.dra-inl-2 { font-size:11px; font-weight:600; color:#92400e; background:#fef3c7; border:1px solid #fde68a; border-radius:4px; padding:2px 6px; line-height:1.4; white-space:nowrap; }
.dra-blk-37 { padding:12px; font-size:13px; line-height:1.8; color:#4b5563; }
.dra-blk-38 { margin-top:18px; font-size:14px; color:#4b5563; }
.dra-blk-39 { display:flex; align-items:center; gap:10px; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; padding:18px; }
.dra-blk-40 { flex:1; text-align:center; }
.dra-blk-41 { display:flex; gap:3px; justify-content:center; margin-bottom:6px; }
.dra-inl-3 { border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#ccccff; display:inline-block; }
.dra-inl-4 { border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#ff00ff; display:inline-block; }
.dra-inl-5 { border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#ff0000; display:inline-block; }
.dra-inl-6 { border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#ffff00; display:inline-block; }
.dra-inl-7 { border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#00ff00; display:inline-block; }
.dra-inl-8 { border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#00ffff; display:inline-block; }
.dra-inl-9 { border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#0000ff; display:inline-block; }
.dra-inl-10 { border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#8a2be2; display:inline-block; }
.dra-inl-11 { border-radius:50%; border:1px solid rgba(0,0,0,.08); background:#808000; display:inline-block; }
.dra-blk-42 { font-size:14px; font-weight:600; }
.dra-inl-12 { color:#9ca3af; }
.dra-blk-43 { font-size:12px; color:#6b7280; }
.dra-blk-44 { font-size:14px; font-weight:600; color:#5b21b6; }
.dra-blk-45 { border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; font-size:15px; }
.dra-blk-46 { display:flex; background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.dra-blk-47 { padding:12px 18px; color:#6b7280; }
.dra-blk-48 { flex:1; padding:12px 18px; font-weight:600; color:#4b5563; border-left:1px solid #e5e7eb; }
.dra-blk-49 { flex:1; padding:12px 18px; font-weight:600; color:#1f2937; border-left:1px solid #e5e7eb; }
.dra-trow { display:flex; border-bottom:1px solid #e5e7eb; }
.dra-blk-51 { padding:12px 18px; background:#f9fafb; color:#6b7280; }
.dra-blk-52 { flex:1; padding:12px 18px; color:#4b5563; border-left:1px solid #e5e7eb; }
.dra-blk-53 { flex:1; padding:12px 18px; color:#1f2937; border-left:1px solid #e5e7eb; }
.dra-blk-54 { display:flex; }
.dra-duo--v2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dra-blk-56 { border:1px solid #e5e7eb; border-radius:8px; padding:18px 20px; }
.dra-h3-1 { margin:0 0 10px; font-size:16px; font-weight:600; color:#111827; }
.dra-blk-57 { font-size:14px; line-height:2; color:#4b5563; }
.dra-h2-4 { margin:0 0 14px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.dra-h2-5 { margin:0 0 22px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.dra-duo--v4 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dra-blk-61 { border:1.5px solid #1f2937; border-radius:8px; padding:26px; }
.dra-blk-62 { font-size:19px; font-weight:600; color:#111827; }
.dra-blk-63 { font-size:15px; color:#4b5563; margin-top:8px; }
.dra-blk-64 { display:flex; flex-wrap:wrap; gap:8px; font-size:14px; }
.dra-inl-13 { border:1px solid #e5e7eb; background:#f9fafb; border-radius:999px; padding:7px 16px; color:#1f2937; }
.dra-h2-6 { margin:0 0 6px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.dra-inl-14 { margin-left:14px; color:#9ca3af; font-size:18px; }
.dra-inl-15 { margin-left:auto; color:#9ca3af; font-size:18px; }
.dra-blk-67 { display:flex; flex-direction:column; border:1px solid #e5e7eb; border-radius:8px; padding:20px; }
.dra-blk-68 { display:flex; align-items:center; gap:14px; }
.dra-inl-16 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:19px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ffff00; color:#1f2937; line-height:1; }
.dra-blk-69 { font-size:17px; font-weight:600; color:#111827; line-height:1.4; }
.dra-inl-17 { color:#d1d5db; font-weight:400; }
.dra-blk-70 { font-size:15px; font-weight:600; color:#5b21b6; margin-top:14px; }
.dra-inl-18 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:19px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ff00ff; color:#fff; line-height:1; }
.dra-inl-19 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:19px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#00ffff; color:#1f2937; line-height:1; }
.dra-inl-20 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:19px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#00ff00; color:#1f2937; line-height:1; }
.dra-h2-7 { margin:0 0 8px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.dra-blk-71 { display:flex; justify-content:center; padding:14px 0 4px; }
.dra-blk-72 { display:flex; align-items:center; gap:12px; }
.dra-h3-2 { margin:0; font-size:17px; font-weight:600; color:#111827; }
.dra-step { display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:center; }
.dra-blk-74 { text-align:left; }
.dra-blk-75 { font-size:12px; font-weight:600; color:#9ca3af; letter-spacing:.14em; }
.dra-h2-8 { margin:8px 0 0; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; }
.dra-blk-76 { margin-top:20px; }
.dra-blk-77 { display:flex; justify-content:center; align-items:center; }
.dra-chips3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px 30px; justify-items:center; max-width:300px; margin:0 auto; }
.dra-blk-79 { text-align:center; }
.dra-inl-21 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ccccff; color:#1f2937; }
.dra-blk-80 { font-size:13px; color:#6b7280; margin-top:8px; }
.dra-inl-22 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ff00ff; color:#fff; }
.dra-inl-23 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ff0000; color:#fff; }
.dra-inl-24 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ffff00; color:#1f2937; }
.dra-inl-25 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#00ff00; color:#1f2937; }
.dra-inl-26 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#00ffff; color:#1f2937; }
.dra-inl-27 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#0000ff; color:#fff; }
.dra-inl-28 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#8a2be2; color:#fff; }
.dra-inl-29 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#808000; color:#fff; }
.dra-blk-81 { display:flex; justify-content:center; }
.dra-blk-82 { position:relative; background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; box-sizing:border-box; margin:0 auto; text-align:left; overflow:hidden; }
.dra-chips3--v2 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px 12px; justify-items:center; }
/* 縮小表示していた頃の包み枠。図解が原寸になったので枠としては使わない */
.dra-blk-84 { display:contents; }
.dra-h2-9 { margin:0 0 18px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.dra-cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.dra-inl-30 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ccccff; color:#1f2937; line-height:1; }
.dra-blk-87 { font-size:16px; font-weight:600; color:#111827; line-height:1.4; }
.dra-blk-88 { font-size:15px; font-weight:600; color:#5b21b6; margin-top:12px; }
.dra-blk-89 { display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.dra-blk-90 { display:flex; align-items:center; gap:8px; border:1px solid #e5e7eb; border-radius:6px; padding:9px 12px; font-size:13.5px; }
.dra-inl-31 { font-size:16px; }
.dra-inl-32 { color:#6b7280; flex:none; }
.dra-em-2 { font-weight:600; color:#1f2937; }
.dra-blk-91 { display:flex; align-items:center; gap:8px; border:1px solid #e5e7eb; border-radius:6px; padding:9px 12px; font-size:13.5px; background:#f9fafb; }
.dra-em-3 { font-weight:600; color:#6b7280; }
.dra-inl-33 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ff00ff; color:#fff; line-height:1; }
.dra-inl-34 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ff0000; color:#fff; line-height:1; }
.dra-inl-35 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ffff00; color:#1f2937; line-height:1; }
.dra-inl-36 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#00ff00; color:#1f2937; line-height:1; }
.dra-inl-37 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#00ffff; color:#1f2937; line-height:1; }
.dra-inl-38 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#0000ff; color:#fff; line-height:1; }
.dra-inl-39 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#8a2be2; color:#fff; line-height:1; }
.dra-inl-40 { display:inline-flex; flex:none; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#808000; color:#fff; line-height:1; }
.dra-blk-92 { margin-top:14px; }
.dra-profile { display:flex; gap:28px; align-items:flex-start; }
.dra-blk-94 { flex:0 0 200px; }
.dra-blk-95 { flex:1; min-width:0; }
.dra-h2-10 { margin:0 0 6px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; }
.dra-blk-96 { font-size:14px; color:#6b7280; padding-bottom:8px; border-bottom:1px solid #e5e7eb; margin-bottom:16px; }
.dra-blk-97 { display:flex; flex-direction:column; }
.dra-row-auto { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid #e5e7eb; }
.dra-inl-41 { font-size:15px; vertical-align:-; }
.dra-blk-99 { font-size:14px; color:#6b7280; margin-top:4px; }
.dra-row-auto--v2 { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:baseline; padding:22px 0; }
.dra-blk-101 { padding:14px 18px; background:#f9fafb; color:#6b7280; }
.dra-blk-102 { padding:14px 18px; color:#1f2937; }
.dra-blk-103 { padding:14px 18px; color:#9ca3af; }
.dra-inl-42 { color:rgb(31, 41, 55); }
.dra-inl-43 { display:inline-flex; align-items:center; background:#fff; color:#1f2937; border:1px solid #d1d5db; border-radius:6px; padding:13px 24px; font-size:15px; line-height:1; }
.dra-blk-104 { margin-left:30px; }
.dra-blk-105 { display:flex; gap:8px; margin:6px 0 0 4px; font-size:14px; line-height:1.85; color:#4b5563; }
.dra-blk-106 { margin-top:8px; font-size:13.5px; line-height:1.8; color:#6b7280; }
.dra-blk-107 { display:flex; gap:8px; margin:5px 0 0 26px; font-size:14px; line-height:1.85; color:#4b5563; }
.dra-blk-108 { margin-top:7px; font-size:14px; line-height:1.85; color:#4b5563; }
.dra-blk-109 { display:flex; align-items:baseline; gap:12px; padding-bottom:8px; border-bottom:1px solid #e5e7eb; margin-bottom:22px; }
.dra-h2-11 { margin:0; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; }
.dra-blk-111 { display:flex; flex-direction:column; gap:16px; }
.dra-blk-112 { display:flex; align-items:baseline; gap:12px; }
.dra-blk-113 { font-size:20px; font-weight:600; color:#111827; }
.dra-inl-46 { font-size:12.5px; color:#4b5563; border:1px solid #e5e7eb; background:#f9fafb; border-radius:999px; padding:3px 12px; }
.dra-blk-114 { font-size:16px; font-weight:600; color:#5b21b6; margin-top:8px; }
.dra-blk-115 { margin-top:16px; font-size:15px; color:#5b21b6; }
.dra-blk-117 { padding:16px 0; border-bottom:1px solid #f3f4f6; }
.dra-blk-118 { margin-top:22px; font-size:14px; line-height:1.9; color:#4b5563; }
.dra-blk-119 { border:1.5px solid #1f2937; border-radius:8px; padding:24px; display:flex; gap:18px; align-items:flex-start; }
.dra-blk-120 { font-size:15px; color:#4b5563; margin-top:6px; }
.dra-blk-121 { display:flex; gap:12px; margin-bottom:14px; }
.dra-blk-122 { flex:1; border:1px solid #e5e7eb; border-radius:6px; padding:14px 18px; font-size:15px; color:#1f2937; }
.dra-split-46 { display:grid; grid-template-columns:4fr 6fr; gap:32px; align-items:center; padding:40px 0; border-bottom:1px solid #e5e7eb; }
.dra-inl-47 { font-size:24px; line-height:1; color:#1f2937; }
.dra-inl-48 { font-size:22px; font-weight:600; color:#111827; }
.dra-blk-124 { font-size:16px; font-weight:600; color:#5b21b6; margin-top:6px; }
.dra-split-46--v2 { display:grid; grid-template-columns:4fr 6fr; gap:32px; align-items:center; padding:40px 0; }
.dra-media { display:grid; grid-template-columns:200px 1fr; gap:0 20px; }
.dra-blk-127 { padding:14px 0; border-bottom:1px solid #f3f4f6; font-size:14px; font-weight:600; color:#1f2937; }
.dra-blk-128 { padding:14px 0; border-bottom:1px solid #f3f4f6; font-size:14px; line-height:1.85; color:#4b5563; }
.dra-split-fig { display:grid; grid-template-columns:1fr 520px; gap:34px; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:40px 32px; margin-bottom:16px; }
/* MV の見出し。下層ページのタイトルと同じゴシックで、サイズだけ一段大きくする。
   幅は左カラム (1100 - 図解 520 - 余白) に収まる範囲で可変。 */
.dra-hero-title {
  margin: 12px 0 0;
  font-size: clamp(34px, 3.8vw, 42px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .04em;
  color: #1f2937;
  font-feature-settings: 'palt';
}
/* 1 カラムに畳んだ後は横幅いっぱい使えるので、下限を上げて可変幅を広げる */
@media (max-width: 1000px) {
  .dra-hero-title { font-size: clamp(30px, 5vw, 40px); }
}
/* PC でだけ入れたい改行。スマホでは自然に折り返す。
   MV の見出しは対象外 — スマホでも改行を残す (加藤さん指示 2026-08-30) */
@media (max-width: 720px) {
  .dra-br-pc { display: none; }
}
.dra-btn-row { display:flex; gap:10px; margin-top:26px; }
.dra-blk-130 { font-size:14px; color:#1f2937; text-align:center; margin-top:12px; letter-spacing:.04em; }
.dra-blk-131 { font-size:13px; font-weight:600; color:#1f2937; margin-bottom:8px; text-align:center; }
.dra-blk-132 { position:relative; border:1px solid #e5e7eb; background:#f9fafb; border-radius:12px; box-sizing:border-box; overflow:hidden; margin:0 auto; }
.dra-split-chips { display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:start; }
.dra-blk-134 { display:flex; flex-direction:column; align-items:center; gap:6px; }
.dra-inl-49 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ccccff; color:#1f2937; line-height:1; }
.dra-blk-135 { font-size:13px; font-weight:600; color:#1f2937; line-height:1.2; }
.dra-blk-136 { font-size:10.5px; color:#9ca3af; letter-spacing:.03em; line-height:1.2; }
.dra-inl-50 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ff00ff; color:#fff; line-height:1; }
.dra-inl-51 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ff0000; color:#fff; line-height:1; }
.dra-inl-52 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ffff00; color:#1f2937; line-height:1; }
.dra-inl-53 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#00ff00; color:#1f2937; line-height:1; }
.dra-inl-54 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#00ffff; color:#1f2937; line-height:1; }
.dra-inl-55 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#0000ff; color:#fff; line-height:1; }
.dra-inl-56 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#8a2be2; color:#fff; line-height:1; }
.dra-inl-57 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#808000; color:#fff; line-height:1; }
.dra-blk-137 { display:flex; justify-content:center; gap:56px; flex-wrap:wrap; }
.dra-blk-138 { font-size:14px; color:#4b5563; margin-top:8px; }
.dra-legend { display:grid; grid-template-columns:180px 1fr 180px; gap:20px; align-items:center; }
.dra-blk-140 { text-align:right; font-size:13px; line-height:1.7; }
.dra-blk-141 { background:#e5e7eb; margin:10px 0 0; }
.dra-blk-142 { font-weight:600; color:#1f2937; margin-top:20px; }
.dra-blk-143 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #ff00ff; border-radius:10px; padding:10px 12px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-144 { font-size:12px; color:#6b7280; font-weight:600; line-height:1.3; }
.dra-blk-145 { font-size:15px; font-weight:600; color:#1f2937; line-height:1.3; margin-top:2px; }
.dra-blk-146 { display:flex; justify-content:space-between; align-items:center; margin:9px auto 0; }
.dra-inl-58 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:11px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ff00ff; color:#fff; line-height:1; }
.dra-inl-59 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:11px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ff0000; color:#fff; line-height:1; }
.dra-blk-147 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:4px solid #ffd700; border-radius:10px; padding:10px 12px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.dra-inl-60 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:11px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#ffff00; color:#1f2937; line-height:1; }
.dra-blk-148 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #ffd700; border-radius:10px; padding:10px 12px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-blk-149 { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:3px solid #00f3ff; border-radius:10px; padding:10px 12px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.dra-inl-61 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:11px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#00ffff; color:#1f2937; line-height:1; }
.dra-inl-62 { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:11px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:#0000ff; color:#fff; line-height:1; }
.dra-blk-150 { font-size:13px; line-height:1.7; }
.dra-duo--v5 { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.dra-inl-63 { flex:none; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#f3f4f6; color:#1f2937; }
.dra-inl-64 { font-size:22px; }
.dra-inl-65 { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dra-inl-66 { font-size:16px; line-height:1.6; color:#4b5563; }
.dra-blk-152 { margin-top:22px; }
.dra-blk-153 { flex:1; }
.dra-blk-154 { font-size:13px; color:#6b7280; letter-spacing:.1em; }
.dra-blk-155 { font-size:19px; font-weight:600; color:#111827; margin-top:4px; }
.dra-h2-12 { margin:0 0 10px; font-size:19px; font-weight:600; color:#1f2937; letter-spacing:.03em; }
.dra-blk-156 { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.dra-inl-67 { font-size:18px; }
.dra-blk-157 { font-size:13px; color:#9ca3af; letter-spacing:.1em; }
.dra-h2-13 { display:flex; align-items:center; gap:10px; margin:6px 0 12px; font-size:21px; font-weight:600; color:#1f2937; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.dra-blk-158 { margin-top:26px; padding-top:22px; border-top:1px solid #e5e7eb; }
.dra-blk-159 { font-size:16px; font-weight:600; color:#111827; margin-bottom:10px; }
.dra-blk-160 { font-size:15px; line-height:2; color:#4b5563; }
.dra-blk-161 { font-size:13px; font-weight:600; color:#1f2937; margin-bottom:8px; }

/* ── grid の子はトラックを押し広げないようにする ── */
.dra-row-auto--v2 > *,
.dra-split-46 > *,
.dra-split-46--v2 > *,
.dra-media > *,
.dra-split-chips > *,
.dra-legend > *,
.dra-duo--v5 > *,
.dra-duo > *,
.dra-table > *,
.dra-duo--v2 > *,
.dra-duo--v4 > *,
.dra-step > *,
.dra-chips3 > *,
.dra-chips3--v2 > *,
.dra-cards3 > *,
.dra-row-auto > *,
.dra-cta > *,
.dra-split-fig > * { min-width: 0; }

/* ── grid の子はトラックを押し広げないようにする ──
   既定の min-width:auto だと、中身 (固定幅の図解) の幅までトラックが
   広がって画面から溢れるため。 */
.dra-split-chips > *,
.dra-chips3 > *,
.dra-chips3--v2 > *,
.dra-cards3 > *,
.dra-cta > *,
.dra-duo > *,
.dra-duo--v2 > *,
.dra-duo--v4 > *,
.dra-duo--v5 > *,
.dra-legend > *,
.dra-media > *,
.dra-row-auto > *,
.dra-row-auto--v2 > *,
.dra-split-46 > *,
.dra-split-46--v2 > *,
.dra-split-fig > *,
.dra-step > *,
.dra-table > * { min-width: 0; }

/* ── CPT テンプレート (FAQ 一覧・詳細 / サンプル一覧) ── */
.dra-breadcrumb a { color:#9ca3af; text-decoration:none; }
.dra-faq-item__summary { display:flex; align-items:baseline; gap:10px; list-style:none; cursor:pointer; }
.dra-faq-item__summary::-webkit-details-marker { display:none; }
.dra-faq-item--last { border-bottom:0; }
/* 開閉の記号。初期状態は閉じているので「＋」、開いたら「−」に変わる。 */
.dra-faq-mark::before { content:"\FF0B"; }
.dra-faq-item[open] .dra-faq-mark::before { content:"\2212"; }
.dra-tile { display:block; border:1px solid #e5e7eb; border-radius:8px; padding:18px 20px; text-decoration:none; color:inherit; }
.dra-tile__lead { margin:8px 0 0; font-size:13.5px; line-height:1.8; color:#4b5563; }
.dra-tile__more { margin-top:12px; font-size:14px; color:#5b21b6; }
.dra-backlink { margin:20px 0 0; }
.dra-backlink a { font-size:14px; color:#5b21b6; text-decoration:none; }
.dra-empty { margin:0; color:#6b7280; }
.dra-sample-card { display:block; border:1px solid #e5e7eb; border-radius:8px; padding:26px 28px; text-decoration:none; color:inherit; }
.dra-sample-card__head { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; }
.dra-pill { border:1px solid #d1d5db; border-radius:999px; padding:4px 12px; color:#4b5563; text-decoration:none; }
.dra-pill--on { border-color:#1f2937; background:#1f2937; color:#fff; }
.dra-filter { margin-left:auto; display:flex; flex-wrap:wrap; gap:6px; font-size:13px; }
.dra-portrait { display:block; width:200px; height:250px; object-fit:cover; object-position:50% 22%; border:1px solid #e5e7eb; border-radius:6px; }
/* TOP の運営者カードの丸写真 */
.dra-avatar { width:96px; height:96px; flex:none; border-radius:50%; object-fit:cover; object-position:center 20%; border:1px solid #e5e7eb; }

/* ═══════════════════════════════════════════════
   お問い合わせフォーム (Fluent Forms Pro / form_id=13)
   ───────────────────────────────────────────────
   v6 p12 の意匠に合わせて Fluent Forms の既定スタイルを上書きする。
   mu-plugin の申込フォーム用スタイルとは別系統 (対象が .fluent_form_13)。
   ═══════════════════════════════════════════════ */
.fluent_form_13 .ff-el-group { margin-bottom: 20px; }

/* ラベル + 必須バッジ */
.fluent_form_13 .ff-el-input--label label {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}
.fluent_form_13 .ff-el-input--label.ff-el-is-required label::after {
  content: "必須";
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
}

/* 補足説明 */
.fluent_form_13 .ff-el-help-message {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #6b7280;
}

/* 入力欄 */
.fluent_form_13 .ff-el-form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: #1f2937;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: border-color 0.15s;
}
.fluent_form_13 .ff-el-form-control:focus {
  border-color: #6b7280;
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}
.fluent_form_13 textarea.ff-el-form-control { min-height: 130px; resize: vertical; }

/* 同意チェックボックス */
.fluent_form_13 .ff-el-form-check {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 6px;
  padding: 16px 18px;
}
.fluent_form_13 .ff-el-form-check label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
}
.fluent_form_13 .ff-el-form-check input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: #1f2937;
}
.fluent_form_13 .ff-el-form-check a { color: #1f2937; }

/* 送信ボタン */
.fluent_form_13 .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 30px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  background: #1f2937;
  border: 1px solid #1f2937;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.fluent_form_13 .ff-btn-submit:hover { background: #111827; }

/* エラー表示 */
.fluent_form_13 .error-text,
.fluent_form_13 .ff-el-is-error .text-danger {
  margin-top: 6px;
  font-size: 13px;
  color: #b91c1c;
}
.fluent_form_13 .ff-el-is-error .ff-el-form-control { border-color: #fecaca; }

/* 末尾の注記 (custom_html) */
.dra-ff-note {
  margin-top: 4px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.9;
  color: #4b5563;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

/* 冒頭の説明 (custom_html) */
.fluent_form_13 .ff_submit_btn_wrapper { margin-top: 24px; }
.fluent_form_13 .ff-custom_html p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.9;
  color: #222;
  letter-spacing: 0.06em;
  font-feature-settings: 'palt';
}

/* 2 カラムに寄せず 1 列で読ませる (v6 は 2 カラムだが、
   ラベル + 補足が縦に伸びるため実装では 1 列が読みやすい) */
@media (min-width: 721px) {
  .fluent_form_13 .ff-t-cell { padding: 0; }
}

/* ═══════════════════════════════════════════════
   本文の読み幅
   ───────────────────────────────────────────────
   1 カラムのセクションでは、段落がセクション幅 (最大 1010px) いっぱいに
   広がって 1 行 60 文字を超え、目線の戻りが大きくなる。
   本文は --dra-measure (700px ≒ 40 文字) で折り返し、
   見出しの罫線・カード・図解・表の幅はそのまま保つ。

   段組み (grid) の中の本文は既に十分狭いので、その中は対象から外す。
   ═══════════════════════════════════════════════ */
.dra-wire-main p,
.dra-wire-main .dra-numrow,
.dra-wire-main .dra-page-head > p {
  max-width: var(--dra-measure);
}
/* 段組みやカードの中でも、本文の折り返しは読み幅を超えない。
   枠のほうが狭ければ枠に従う (min の 100% 側が効く)。 */
.dra-wire-main [class*="dra-duo"] p,
.dra-wire-main [class*="dra-split"] p,
.dra-wire-main [class*="dra-cards"] p,
.dra-wire-main .dra-step p,
.dra-wire-main .dra-media p,
.dra-wire-main .dra-scroll-x p,
.dra-wire-main .dra-fig p,
.dra-wire-main .dra-profile p,
.dra-wire-main .dra-tile p,
.dra-wire-main .dra-sample-card p,
.dra-cta p {
  max-width: min(100%, var(--dra-measure));
}

/* ═══════════════════════════════════════════════
   スマホの本文サイズ
   ───────────────────────────────────────────────
   画面が小さいほど 1 行あたりの文字数が減り、字面も小さく見える。
   スマホでは本文を 18px に上げて読みやすさを揃える (LP と同じ大きさ)。

   対象は「読ませる文章」だけ。図解のキャプション・カードの補足・
   中央寄せの注記 (dra-txt-4 / -23 / -26 / -30) は 14px のまま残し、
   本文との段差を保つ。
   規約・プライバシー等の条文は 14px だがそのページの本文なので対象に含める。
   ═══════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* 明示指定のない要素 (リスト項目など) の既定 */
  :root { --dra-fs-base: 18px; }

  .dra-page-lead,
  .dra-txt-2,  .dra-txt-3,  .dra-txt-6,  .dra-txt-7,
  .dra-txt-8,  .dra-txt-9,  .dra-txt-10, .dra-txt-11,
  .dra-txt-17, .dra-txt-18, .dra-txt-19, .dra-txt-21,
  .dra-txt-24, .dra-txt-25, .dra-txt-27, .dra-txt-31,
  /* 法務ページの条文本文 (PC では 14px) */
  .dra-numrow, .dra-txt-13, .dra-txt-14, .dra-txt-28 {
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════
   スマホの MV の見出し
   ───────────────────────────────────────────────
   MV を持つのは TOP と LP だけ。可変幅 (clamp) のままだと 600〜720px で
   36px 近くまで伸びるので、スマホでは 30px 固定にして LP と揃える。

   下層ページの見出し (dra-page-title 30px / 節の見出し 21px) は
   スマホでも PC と同じ大きさのまま (加藤さん指示 2026-09-05)。
   TOP の帯の見出しだけ front.css 側で 30px に上げている。
   ═══════════════════════════════════════════════ */
@media (max-width: 720px) {
  .dra-hero-title { font-size: 30px; }
}

/* ═══════════════════════════════════════════════
   本文の強調 — 蛍光マーカー
   ───────────────────────────────────────────────
   帯を文字の高さの 2 割ほど下へずらすと、手で引いた線の印象になる。
   ずらした分が切れないよう padding で背景の箱を下へ広げるが、
   inline 要素の上下 padding は行送りに影響しないので行間は変わらない。

   対象は本文中の強調だけ (strong / .dra-em-1)。
   カード内のラベル (.dra-em-2 / .dra-em-3 =「強みとして働くと 挑戦 → 実現」等) は
   文章ではなく見出しに近い扱いなので、太字のままにする。

   色は tokens.css の --dra-marker。
   ═══════════════════════════════════════════════ */
.dra-wire-main p strong,
.dra-wire-main p .dra-em-1 {
  padding-bottom: .22em;
  background-image: linear-gradient(var(--dra-marker), var(--dra-marker));
  background-repeat: no-repeat;
  background-size: 100% .8em;
  background-position: 0 .42em;
}

/* ═══════════════════════════════════════════════
   中央寄せの文
   ───────────────────────────────────────────────
   図解のキャプションなど text-align:center の段落は、
   上の読み幅で箱が狭まると箱自体は左に残り、
   文字の中心が図解の中心とずれる。箱ごと中央に置く。
   ═══════════════════════════════════════════════ */
.dra-wire-main .dra-txt-4,
.dra-wire-main .dra-txt-5,
.dra-wire-main .dra-txt-32 {
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════
   STEP の流れ (DRAMAPとは)
   ───────────────────────────────────────────────
   PC は 4 つを横に並べ、あいだに → を置く。
   スマホは横幅が足りないので縦に積み、矢印は 90 度回して
   下向きにしたうえで、各ステップの下へ中央寄せで置く。
   ═══════════════════════════════════════════════ */
@media (max-width: 720px) {
  .dra-blk-1 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .dra-blk-2 { min-width: 0; }
  .dra-blk-6 {
    align-self: center;
    transform: rotate(90deg);
  }
}

/* ═══════════════════════════════════════════════
   関係ラインの図解を並べる 3 列 (仕組み)
   ───────────────────────────────────────────────
   1 枚が原寸 150px あり、スマホでは 3 列に収まらない。
   .dra-blk-77 の中 (= 仕組みページの関係ラインの並び) だけ 2 列に畳む。
   TOP の 9 色チップも同じクラスを使っているが、あちらは
   丸とラベルだけで 3 列に収まるため対象にしない。
   ═══════════════════════════════════════════════ */
@media (max-width: 720px) {
  .dra-blk-77 .dra-chips3--v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
  }
}

/* ═══════════════════════════════════════════════
   9 色から 4 色を取り出す図 (9つの特性)
   ───────────────────────────────────────────────
   9 色を横一列に並べた図はスマホでは 1 列が 35px ほどになり読めない。
   スマホでは「役」になる 4 色だけを等間隔で並べた版に差し替える。
   ═══════════════════════════════════════════════ */
.dra-svg-4--sp { display: none; }
@media (max-width: 720px) {
  .dra-svg-4--pc { display: none; }
  .dra-svg-4--sp { display: block; }
}

/* ═══════════════════════════════════════════════
   図解の見出しとキャプション (活用シーン)
   ───────────────────────────────────────────────
   図解は枠の中で中央に置かれるので、その上下に付く短い見出しと
   説明も中央に揃える。読み幅で箱が狭まるため margin も auto にする。
   同じクラスは TOP や「4つの役」でも使っているので、
   このページの本文枠 (.dra-figcap-center) の中だけに限定する。
   ═══════════════════════════════════════════════ */
.dra-figcap-center .dra-blk-161,
.dra-figcap-center .dra-txt-23,
.dra-figcap-center .dra-txt-30,
.dra-figcap-center .dra-txt-32 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════
   サンプル図解の本人カード (マゼンタ / グリーン)
   ───────────────────────────────────────────────
   dra-blk-8 (本人・黄) と同じ意匠で枠色だけ変えたもの。
   本人の色はサンプルごとに変わるため、必要な組み合わせを足していく。
   ═══════════════════════════════════════════════ */
.dra-fig-self-m { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:4px solid #ff00ff; border-radius:10px; padding:6px 12px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.dra-fig-self-c { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:4px solid #00f3ff; border-radius:10px; padding:6px 12px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.dra-fig-self-g { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:4px solid #00f200; border-radius:10px; padding:6px 12px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.12); }
/* 共通 CTA バンドの重ねカード (94×40) 用。dra-blk-20 (本人・黄) の色違い。 */
.dra-fig-self-m-sm { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:4px solid #ff00ff; border-radius:7px; padding:4px 6px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.dra-fig-self-c-sm { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:4px solid #00f3ff; border-radius:7px; padding:4px 6px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.dra-fig-self-g-sm { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#fff; border:4px solid #00f200; border-radius:7px; padding:4px 6px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.1); }

/* ═══════════════════════════════════════════════
   よくある質問 詳細の本文 (ブロックエディタ)
   ───────────────────────────────────────────────
   本文はブロックエディタで書く。段落・見出し・リスト・表といった
   コアブロックが素の要素のまま出てくるので、ここで v6 の意匠を当てる。

   本文全体を 1 枚のカードにし、h2 の罫線で節を区切る。
   ブロックごとにカードを分けると、読み幅で狭まる段落と
   全幅の見出しで幅が食い違うため、この形にしている。

   図解や比較表など v6 由来の作り込みは「カスタム HTML」ブロックへ入れる。
   その中の dra-* クラスは従来どおり効く。
   ═══════════════════════════════════════════════ */
.dra-faq-body {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 28px;
  margin-bottom: 16px;
}
.dra-faq-body > * { margin-top: 0; }
.dra-faq-body > * + * { margin-top: 14px; }

/* h2 で節を区切る。2 つ目以降は上に間隔を空ける */
.dra-faq-body > h2 {
  font-size: 21px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: .03em;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}
.dra-faq-body > * + h2 { margin-top: 36px; }
.dra-faq-body > h2 + * { margin-top: 14px; }

.dra-faq-body > h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}
.dra-faq-body > * + h3 { margin-top: 24px; }

.dra-faq-body > p,
.dra-faq-body > ul,
.dra-faq-body > ol {
  font-size: 15px;
  line-height: 1.9;
  color: #222;
  letter-spacing: .06em;
  font-feature-settings: 'palt';
}
.dra-faq-body > ul,
.dra-faq-body > ol { padding-left: 24px; }
.dra-faq-body li + li { margin-top: 4px; }

/* 表は狭い画面で横スクロール */
.dra-faq-body figure.wp-block-table { overflow-x: auto; }
.dra-faq-body table { margin: 0; font-size: 14px; }
.dra-faq-body th,
.dra-faq-body td { padding: 12px 16px; }

/* カスタム HTML ブロックの中は v6 のセクションが入る。
   本文カードの中で二重の枠にならないよう、枠と余白を外す。 */
.dra-faq-body .dra-sec {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .dra-faq-body { padding: 20px 14px; }
}

/* FAQ の回答に添える関連ページリンク */
.dra-faq-item__related { margin:10px 0 0; font-size:14px; }
.dra-faq-item__related a { color:#5b21b6; text-decoration:none; }
.dra-faq-item__related a:hover { text-decoration:underline; }