@charset "UTF-8";

/* Shared, restrained line-art language for the three service-detail hero diagrams. */
.service-diagram {
  --diagram-blue: #3b6aa2;
  --diagram-deep: #1d4f8e;
  --diagram-ink: #294760;
  --diagram-muted: #61798e;
  --diagram-line: #cbdce9;
  --diagram-paper: rgba(251, 253, 254, .94);
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, .92), transparent 61%),
    linear-gradient(140deg, #eef5f9, #e0ebf3);
}

.service-diagram::before { display: none; }
.service-diagram__art {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 520px);
  height: auto;
  overflow: visible;
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  text-rendering: geometricPrecision;
}
.service-diagram__art text { font-family: inherit; }
.service-diagram .diagram-eyebrow {
  fill: #6d87a0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
}
.service-diagram .diagram-flow {
  fill: none;
  stroke: #6d8eac;
  stroke-width: 1.5;
}
.service-diagram .diagram-card > rect {
  fill: var(--diagram-paper);
  stroke: var(--diagram-line);
  stroke-width: 1.2;
}
.service-diagram .diagram-card--accent > rect { fill: #f4f8fb; stroke: #a9c0d4; }
.service-diagram .diagram-icon,
.service-diagram .diagram-review-icon {
  fill: none;
  stroke: var(--diagram-blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-diagram .diagram-icon-box { fill: #edf4f8; stroke: #b8cfe0; stroke-width: 1.2; }
.service-diagram .diagram-label {
  fill: var(--diagram-deep);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .3px;
}
.service-diagram .diagram-caption { fill: var(--diagram-muted); font-size: 12px; }
.service-diagram .diagram-rule,
.service-diagram .diagram-track { fill: none; stroke: #bdcfdd; stroke-width: 1; }
.service-diagram .diagram-footnote { fill: #58728a; font-size: 13px; font-weight: 500; }
.service-diagram .diagram-track { stroke-dasharray: 2 5; }
.service-diagram .diagram-track-point { fill: #7899b7; stroke: #eef5f9; stroke-width: 3; }
.service-diagram .diagram-ai > rect { fill: var(--diagram-deep); stroke: #174477; stroke-width: 1; }
.service-diagram .diagram-ai > circle { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .42); stroke-width: 1; }
.service-diagram .diagram-ai-mark { fill: none; stroke: #dce9f2; stroke-width: 1.5; stroke-linecap: round; }
.service-diagram .diagram-ai-title { fill: #fff; font-family: Georgia, serif !important; font-size: 22px; letter-spacing: 1px; }
.service-diagram .diagram-ai-caption { fill: #d8e6f0; font-size: 11px; }
.service-diagram .diagram-card--review > rect { fill: #f8fbfd; stroke: #b8cfe0; }
.service-diagram .diagram-status { fill: #e9f1f6; stroke: #ccdae5; stroke-width: 1; }
.service-diagram .diagram-status-text { fill: #496984; font-size: 11px; font-weight: 700; letter-spacing: .5px; }

@media (max-width: 767px) {
  .service-hero__visual.service-diagram { width: 100%; min-height: 0; aspect-ratio: 600 / 440; }
  .service-diagram__art { width: min(100%, 430px); }
  .service-diagram .diagram-eyebrow { font-size: 12px; letter-spacing: 1.25px; }
  .service-diagram .diagram-label { font-size: 26px; }
  .service-diagram .diagram-caption, .service-diagram .diagram-ai-caption { display: none; }
  .service-diagram .diagram-footnote { font-size: 18px; }
  .service-diagram .diagram-status-text { font-size: 20px; letter-spacing: 0; }
}