/* Only the contents and outer bounds of the existing overview dialog. */
#overview {
  width: min(1100px, calc(100% - 40px));
  max-width: calc(100% - 40px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid #a3b2be;
  border-radius: 4px;
  background: #fff;
  color: #20364b;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}
#overview::backdrop {background: #152c4266}
#overview *, #overview *::before, #overview *::after {box-sizing: border-box}
#overview .ov-head {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  border-bottom: 1px solid #ccd7df;
  background: #fff;
}
#overview .ov-head > div {min-width: 0}
#overview .ov-kicker {margin: 0 0 5px; color: #326b97; font-size: .82rem; font-weight: 600; line-height: 1.7; letter-spacing: .025em}
#overview h2, #overview h3 {font-family: "Noto Serif JP", "Noto Serif CJK JP", "Yu Mincho", serif; font-weight: 600; line-break: strict; word-break: auto-phrase; overflow-wrap: break-word; text-wrap: balance}
#overview h2 {margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.5}
#overview .ov-close {display: inline-flex; justify-content: center; align-items: center; flex: 0 0 46px; width: 46px; height: 46px; padding: 0; border: 1px solid #a9bac7; border-radius: 4px; color: #294d70; background: #fff; font: 400 1.6rem/1 "Noto Sans JP", sans-serif; cursor: pointer}
#overview .ov-close:hover {background: #f2f6f9}
#overview :is(a, button):focus-visible {outline: 3px solid #326b97; outline-offset: 4px}
#overview .ov-body {padding: 22px 28px 30px}
#overview .ov-intro {margin: 0 0 26px; max-width: 54em; font-size: 1rem; color: #526575; line-height: 1.9}
#overview .ov-flow {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0}
#overview .ov-flow > li {position: relative; min-width: 0; margin: 0; padding: 0}
#overview .ov-flow > li:not(:last-child)::after {content: "→"; position: absolute; top: 77px; right: -20px; width: 16px; color: #7d98ac; font-size: 1rem; line-height: 1; text-align: center}
#overview .ov-step {display: flex; flex-direction: column; height: 100%; min-width: 0; border: 1px solid #ccd7df; border-top: 2px solid #7898b1; border-radius: 4px; background: #fff; color: #20364b; text-decoration: none; overflow: hidden}
#overview .ov-step:hover {border-color: #326b97; background: #fbfcfd}
#overview .ov-step-visual {position: relative; display: flex; justify-content: center; align-items: center; height: 168px; min-width: 0; padding: 10px 12px 0; background: #fff}
#overview .ov-step-number {position: absolute; z-index: 1; top: 10px; left: 14px; padding: 0 3px; background: #ffffffd9; color: #55788f; font: 400 1.2rem/1.6 "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums}
#overview .ov-scene {position: relative; display: block; flex: 0 1 155px; width: 155px; max-width: 100%; aspect-ratio: 1; overflow: hidden; background: #fff}
#overview .ov-scene img {position: absolute; top: 0; left: -100%; width: 300%; max-width: none; height: auto; mix-blend-mode: multiply}
#overview .ov-book {padding-block: 14px; background: #fff9e7}
#overview .ov-book > img {display: block; width: auto; max-width: calc(100% - 34px); height: 140px; max-height: 100%; object-fit: contain; box-shadow: 2px 4px 7px #20364b17}
#overview .ov-change {padding: 38px 14px 8px; background: #f2f6f9}
#overview .ov-mini-chart {width: 100%; min-width: 0; padding: 0; color: #294d70; font-family: "Noto Sans JP", sans-serif; line-height: 1.5}
#overview .ov-example {position: absolute; top: 12px; right: 12px; display: inline-block; padding: 1px 6px; border: 1px solid #b4c3ce; background: #fff; font-size: .68rem; color: #526575}
#overview .ov-mini-chart > p {margin: 6px 0 9px; font-size: .72rem; color: #526575}
#overview .ov-mini-row {display: grid; grid-template-columns: 2em minmax(0, 1fr) 2em; gap: 8px; align-items: center; margin-top: 8px; font-size: .78rem}
#overview .ov-mini-track {display: block; min-width: 0; height: 12px; background: #e0e8ef}
#overview .ov-mini-track > i {display: block; height: 100%; max-width: 100%}
#overview .ov-mini-before {background: #91a7b8}
#overview .ov-mini-now {background: #326b97}
#overview .ov-mini-row > b {font-size: .85rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums}
#overview .ov-mini-chart > small {display: block; margin-top: 8px; color: #526575; font-size: .65rem}
#overview .ov-step-copy {padding: 16px 16px 0; min-width: 0}
#overview .ov-step h3 {font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.6; margin: 0 0 10px; color: #294d70}
#overview .ov-step-copy > p {font-size: .88rem; line-height: 1.85; margin: 0; color: #526575}
#overview .ov-step-copy > .ov-outcome {padding-top: 12px; margin-top: 12px; border-top: 1px solid #e0e7ec; color: #20364b; font-size: .88rem; font-weight: 600}
#overview .ov-step-link {display: flex; justify-content: space-between; align-items: center; gap: 7px; min-height: 58px; padding: 12px 16px; margin-top: auto; color: #294d70; font-size: .8rem; line-height: 1.7}
#overview .ov-step-link > span {flex: 0 0 auto}
#overview .ov-step:hover .ov-step-link {text-decoration: underline; text-underline-offset: 4px}
#overview .ov-return {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 22px 0 28px; padding: 18px 22px; background: #fff9e7; border-left: 3px solid #bca56c}
#overview .ov-return > div {min-width: 0}
#overview .ov-return strong {font-weight: 600; font-size: 1rem; color: #20364b}
#overview .ov-return p {font-size: .88rem; color: #526575; margin: 5px 0 0; line-height: 1.85}
#overview .ov-result-link {display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 19rem; min-height: 48px; padding: 10px 14px; border: 1px solid #294d70; border-radius: 4px; color: #294d70; background: #fff; font-size: .9rem; font-weight: 600; line-height: 1.65; text-decoration: none}
#overview .ov-result-link:hover {background: #f2f6f9}
#overview .ov-result-link > span {flex: 0 0 auto}
#overview .ov-support {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px}
#overview .ov-support-card {display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 18px; min-width: 0; padding: 18px 0; border-block: 1px solid #ccd7df; color: #20364b; text-decoration: none}
#overview .ov-support-card > div {min-width: 0}
#overview .ov-support-art {width: 100px; flex-basis: 100px}
#overview .ov-support-card .ov-kicker {font-size: .75rem; margin-bottom: 6px}
#overview .ov-support-card h3 {font-size: 1.05rem; line-height: 1.7; margin: 0 0 10px}
#overview .ov-support-card p:not(.ov-kicker) {font-size: .88rem; line-height: 1.85; color: #526575; margin: 0}
#overview .ov-support-card p strong {display: block; font-size: 1rem; color: #20364b; font-weight: 600; margin-bottom: 5px}
#overview .ov-support-link {display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 5px; color: #294d70; font-size: .8rem; line-height: 1.65}
#overview .ov-support-card:hover .ov-support-link {text-decoration: underline; text-underline-offset: 4px}
#overview .ov-support-card:hover {background: #fbfcfd}

@media (max-width: 1000px) {
  #overview .ov-head {padding-inline: 22px}
  #overview .ov-body {padding-inline: 22px}
  #overview .ov-flow {gap: 18px}
  #overview .ov-flow > li:not(:last-child)::after {right: -16px; width: 14px}
  #overview .ov-step-copy {padding-inline: 12px}
  #overview .ov-step-link {padding-inline: 12px; font-size: .76rem}
  #overview .ov-step h3 {font-size: 1rem}
  #overview .ov-support-card {grid-template-columns: 80px minmax(0, 1fr); gap: 14px}
  #overview .ov-support-art {width: 80px}
}
@media (max-width: 880px) {
  #overview .ov-flow {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px}
  #overview .ov-flow > li:nth-child(2)::after {display: none}
  #overview .ov-flow > li:nth-child(odd)::after {right: -20px; width: 16px}
  #overview .ov-step h3 {font-size: 1.2rem}
  #overview .ov-step-copy {padding-inline: 18px}
  #overview .ov-step-link {padding-inline: 18px; font-size: .85rem}
  #overview .ov-step-copy > p, #overview .ov-step-copy > .ov-outcome {font-size: .93rem}
  #overview .ov-step-visual {height: 175px}
  #overview .ov-mini-chart {max-width: 240px}
  #overview .ov-mini-chart > p {font-size: .8rem}
  #overview .ov-mini-chart > small {font-size: .72rem}
  #overview .ov-return {grid-template-columns: minmax(0, 1fr); gap: 14px}
  #overview .ov-result-link {max-width: none; width: fit-content}
  #overview .ov-support {grid-template-columns: minmax(0, 1fr); gap: 16px}
  #overview .ov-support-card {grid-template-columns: 125px minmax(0, 1fr); gap: 22px}
  #overview .ov-support-art {width: 125px}
  #overview .ov-support-card h3 {font-size: 1.2rem}
  #overview .ov-support-card p:not(.ov-kicker) {font-size: .95rem}
  #overview .ov-support-link {font-size: .88rem}
}
@media (max-width: 600px) {
  #overview {width: calc(100% - 24px); max-width: calc(100% - 24px); max-height: calc(100dvh - 24px); scrollbar-gutter: auto}
  #overview .ov-head {align-items: start; gap: 12px; padding: 16px}
  #overview .ov-head .ov-kicker {font-size: .72rem}
  #overview h2 {font-size: 1.2rem; line-height: 1.65}
  #overview .ov-close {flex-basis: 44px; width: 44px; height: 44px; font-size: 1.4rem}
  #overview .ov-body {padding: 20px 16px 24px}
  #overview .ov-intro {font-size: .95rem; margin-bottom: 22px}
  #overview .ov-intro br {display: none}
  #overview .ov-flow {grid-template-columns: minmax(0, 1fr); gap: 28px}
  #overview .ov-flow > li:not(:last-child)::after, #overview .ov-flow > li:nth-child(2)::after {content: "↓"; display: block; top: auto; bottom: -22px; left: calc(50% - 8px); right: auto; width: 16px}
  #overview .ov-step-visual {height: 160px}
  #overview .ov-step-copy {padding: 16px 18px 0}
  #overview .ov-step h3 {font-size: 1.2rem; margin-bottom: 8px}
  #overview .ov-step-copy > p, #overview .ov-step-copy > .ov-outcome {font-size: .95rem}
  #overview .ov-outcome br {display: none}
  #overview .ov-step-link {padding: 12px 18px; min-height: 54px; font-size: .88rem}
  #overview .ov-return {margin-block: 24px; padding: 18px 16px}
  #overview .ov-return p {font-size: .9rem}
  #overview .ov-result-link {width: 100%; font-size: .88rem; padding-inline: 12px}
  #overview .ov-support-card {grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 20px}
  #overview .ov-support-art {width: 145px; margin-inline: auto}
  #overview .ov-support-card .ov-kicker {font-size: .78rem}
  #overview .ov-support-card h3 {font-size: 1.2rem}
  #overview .ov-support-card p:not(.ov-kicker) {font-size: .95rem}
  #overview .ov-support-link {font-size: .9rem}
}
@media (prefers-reduced-motion: reduce) {
  #overview, #overview * {scroll-behavior: auto !important; transition: none !important; animation: none !important}
}
@media (forced-colors: active) {
  #overview .ov-step, #overview .ov-result-link, #overview .ov-close {border-color: ButtonText}
  #overview .ov-mini-track > i {forced-color-adjust: none}
}
@media print {#overview {display: none !important}}