/* GOALY 記事：図解の部品（画像を使わずHTML/CSS/SVGで描く）2026-10-03
   色は各ページの変数（--surface / --line / --accent など）を使うので、ダークモードでも自動で切り替わる */
.fig{margin:6px 0 26px;padding:18px 16px 14px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.fig figcaption{margin-top:10px;font-size:13px;color:var(--ink-3);text-align:center;line-height:1.6}
.fig-sort{display:grid;grid-template-columns:1fr auto 1.15fr;gap:12px;align-items:center}
.fig-pile{position:relative;min-height:170px;border-radius:50% 46% 52% 44%/48% 52% 46% 50%;background:var(--surface-2)}
.fig-pile span{position:absolute;font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;box-shadow:0 2px 0 var(--line)}
.fig-arrow{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--accent-text);font-size:11px;font-weight:700}
.fig-arrow svg{width:34px;height:34px}
.fig-bins{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fig-bins div{border:2px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--bg)}
.fig-bins b{display:block;font-size:13.5px;color:var(--ink);line-height:1.4}
.fig-bins small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.fig-bins .go{border-color:var(--accent);background:var(--accent-soft)}
.fig-bins .go b{color:var(--accent-text)}
.fig-steps{display:grid;grid-template-columns:repeat(3,1fr) 92px;gap:10px;align-items:stretch}
.fig-step{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px;min-height:118px}
.fig-step i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-style:normal;font-family:var(--num);font-weight:700;font-size:14px}
.fig-step b{display:block;margin:6px 0 2px;font-size:14.5px;line-height:1.45}
.fig-step small{display:block;font-size:12px;color:var(--ink-3);line-height:1.55}
.fig-step:not(:nth-child(3))::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:2px solid var(--accent-text);border-right:2px solid var(--accent-text);transform:translateY(-50%) rotate(45deg)}
.fig-step.last{border-color:var(--accent);background:var(--accent-soft)}
.fig-steps img{width:92px;height:auto;display:block;align-self:end}
.fig-desk{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fig-desk>div{border-radius:14px;padding:12px;background:var(--bg);border:1px solid var(--line);text-align:center}
.fig-desk b{display:block;font-size:13.5px;margin-top:6px}
.fig-desk small{display:block;font-size:12px;color:var(--ink-3)}
.fig-desk svg{width:100%;max-width:220px;height:auto;display:block;margin:0 auto}
.fig-desk .after{border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:560px){
  .fig-sort{grid-template-columns:1fr}
  .fig-arrow svg{transform:rotate(90deg)}
  .fig-steps{grid-template-columns:1fr 1fr}
  .fig-steps img{grid-column:2;justify-self:center}
  .fig-step:not(:nth-child(3))::after{display:none}
}

/* ---- 共通の部品（追加） ---- */
/* 2つを並べて比べる（左＝ふつう、右＝おすすめ）。.fig-desk と同じ形 */
.fig-vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fig-vs>div{border-radius:14px;padding:12px 14px;background:var(--bg);border:1px solid var(--line)}
.fig-vs>div.good{border-color:var(--accent);background:var(--accent-soft)}
.fig-vs .lbl{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--ink-3);margin-bottom:6px}
.fig-vs .good .lbl{background:var(--accent);color:#fff}
.fig-vs b{display:block;font-size:14.5px;line-height:1.5}
.fig-vs small{display:block;font-size:12px;color:var(--ink-3);line-height:1.6}
.fig-vs ul{margin:6px 0 0;padding:0;list-style:none}
.fig-vs li{font-size:13px;line-height:1.6;padding:3px 0 3px 18px;position:relative;color:var(--ink-2)}
.fig-vs li::before{content:"";position:absolute;left:4px;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.fig-vs .good li::before{background:var(--accent-text)}
.fig-vs svg{width:100%;max-width:220px;height:auto;display:block;margin:0 auto 6px}
/* 段（上から下へ）：目的→プロジェクト→タスク→TODO など */
.fig-levels{display:grid;gap:6px}
.fig-levels>div{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:8px 12px}
.fig-levels>div:nth-child(2){margin-left:14px}.fig-levels>div:nth-child(3){margin-left:28px}.fig-levels>div:nth-child(4){margin-left:42px}.fig-levels>div:nth-child(5){margin-left:56px}
.fig-levels b{font-size:14px;color:var(--accent-text)}
.fig-levels span{font-size:13px;color:var(--ink-2);line-height:1.55}
.fig-levels .hl{border-color:var(--accent);background:var(--accent-soft)}
/* 1つから、いくつかの行き先へ */
.fig-branch{display:grid;grid-template-columns:auto 40px 1fr;gap:8px;align-items:center}
.fig-branch .src{border:2px solid var(--accent);background:var(--accent-soft);border-radius:14px;padding:12px 14px;text-align:center;font-weight:700;font-size:14px;max-width:150px;line-height:1.5}
.fig-branch .src small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-3)}
.fig-branch .lines{width:40px;height:100%;min-height:120px;color:var(--accent-text)}
.fig-branch .dst{display:grid;gap:8px}
.fig-branch .dst div{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:8px 12px}
.fig-branch .dst b{display:block;font-size:13.5px;line-height:1.45}
.fig-branch .dst small{display:block;font-size:12px;color:var(--ink-3);line-height:1.55}
.fig-branch .dst .hl{border-color:var(--accent);background:var(--accent-soft)}
/* 横に並ぶ吹き出し・一言カード */
.fig-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.fig-cards>div{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:10px 12px}
.fig-cards b{display:block;font-size:13.5px;line-height:1.5}
.fig-cards small{display:block;font-size:12px;color:var(--ink-3);line-height:1.6}
.fig-cards .hl{border-color:var(--accent);background:var(--accent-soft)}
.fig-cards .ico{width:28px;height:28px;color:var(--accent-text);display:block;margin-bottom:4px}
/* 図の中のゴリル（右下に小さく） */
.fig-gori{display:grid;grid-template-columns:1fr 88px;gap:10px;align-items:end}
.fig-gori>img{width:88px;height:auto;display:block}
.fig-steps.n4{grid-template-columns:repeat(4,1fr)}
.fig-steps.n3{grid-template-columns:repeat(3,1fr)}
.fig-steps.n4 .fig-step:not(:nth-child(4))::after,.fig-steps.n3 .fig-step:not(:nth-child(3))::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:2px solid var(--accent-text);border-right:2px solid var(--accent-text);transform:translateY(-50%) rotate(45deg)}
.fig-steps.n4 .fig-step:nth-child(3)::after{display:block}
@media (max-width:560px){
  .fig-vs{grid-template-columns:1fr}
  .fig-levels>div{grid-template-columns:96px 1fr}
  .fig-levels>div:nth-child(n){margin-left:0}
  .fig-branch{grid-template-columns:1fr}
  .fig-branch .src{max-width:none}
  .fig-branch .lines{display:none}
  .fig-gori{grid-template-columns:1fr}
  .fig-gori>img{justify-self:end;width:72px}
  .fig-steps.n4,.fig-steps.n3{grid-template-columns:1fr 1fr}
  .fig-steps.n4 .fig-step::after,.fig-steps.n3 .fig-step::after{display:none!important}
}
.fig-steps.n4 .fig-step:nth-child(4)::after{display:none!important}

/* 記事の頭のメイン画像 */
.hero-img{margin:4px 0 24px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.hero-img img{display:block;width:100%;height:auto}

/* 2026-10-19 公開日・更新日／よくある質問／関連記事 */
main>.qa,main>.rel{max-width:720px;margin-left:auto;margin-right:auto}
.dates{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12.5px;color:var(--ink-3);margin:4px 0 14px}
.dates a{color:var(--accent-text);font-weight:700;text-decoration:none;background:var(--accent-soft);padding:2px 10px;border-radius:99px}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:10px}
.qa p{margin:0;line-height:1.85}
.qa .q{font-weight:700;margin-bottom:4px}
.qa .q::before{content:"Q.";font-family:var(--num);color:var(--accent-text);margin-right:6px}
.rel{margin-top:26px;margin-bottom:22px}
.rel h2{font-size:18px;margin:0 0 12px;padding:0;border:0}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rel-c{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink)}
.rel-c img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--surface-2)}
.rel-c span{display:block;padding:10px 12px 2px;font-size:11.5px;font-weight:700;color:var(--accent-text)}
.rel-c b{display:block;padding:0 12px;font-size:14px;line-height:1.55}
.rel-c small{display:block;padding:4px 12px 12px;font-size:12px;color:var(--ink-3);line-height:1.5}
.rel .all{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--accent-text)}
@media (max-width:640px){.rel-grid{grid-template-columns:1fr}.rel-c{display:grid;grid-template-columns:112px 1fr;grid-template-rows:auto auto 1fr}.rel-c img{grid-row:1/4;grid-column:1;width:112px;height:100%;min-height:96px;aspect-ratio:auto}.rel-c span,.rel-c b,.rel-c small{grid-column:2}.rel-c span{padding-top:10px}}