/* =========================================================
   繝代�繧ｷ繝ｼ縺ｮ繧ｬ繧ｸ繧ｧ繝悶Ο Design System v1.0
   蟇ｾ雎｡�壽兜遞ｿ險倅ｺ九♀繧医�Design System螳滓ｼ斐�繝ｼ繧ｸ
   ========================================================= */

body.single-post,
.percy-ds-preview {
  --percy-color-data: #0f6cbd;
  --percy-color-data-hover: #4fa4e6;
  --percy-color-conclusion: #1f9d69;
  --percy-color-insight: #2b9fc7;
  --percy-color-environment: #60738a;
  --percy-color-warning: #d79a00;
  --percy-color-risk: #d94b4b;
  --percy-color-navy: #0c2f5f;
  --percy-color-ink: #1f2937;
  --percy-color-muted: #65758a;
  --percy-color-line: #d7e6f3;
  --percy-color-white: #ffffff;
  --percy-radius-sm: 8px;
  --percy-radius-md: 12px;
  --percy-shadow-sm: 0 6px 18px rgba(15, 68, 110, 0.07);
  --percy-shadow-button: 0 8px 20px rgba(15, 108, 189, 0.2);
}

/* -----------------------------------------
   蜈ｱ騾夲ｼ壽э蜻ｳ繧ｳ繝ｳ繝昴�繝阪Φ繝�
----------------------------------------- */

.single-post .percy-component,
.percy-ds-preview .percy-component {
  --pc-accent: var(--percy-color-data);
  --pc-bg: #f5f9fd;
  --pc-border: #cfe2f3;
  margin: 2em 0;
  padding: 1.3em 1.4em;
  border: 1px solid var(--pc-border);
  border-top: 4px solid var(--pc-accent);
  border-radius: var(--percy-radius-md);
  background: var(--pc-bg);
  color: var(--percy-color-ink);
  box-shadow: var(--percy-shadow-sm);
}

.single-post .percy-component__title,
.percy-ds-preview .percy-component__title {
  margin: 0 0 0.85em;
  padding: 0 0 0.7em;
  border-bottom: 1px solid var(--pc-border);
  color: var(--percy-color-navy);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
}

.single-post .percy-component__body > :first-child,
.percy-ds-preview .percy-component__body > :first-child {
  margin-top: 0 !important;
}

.single-post .percy-component__body > :last-child,
.percy-ds-preview .percy-component__body > :last-child {
  margin-bottom: 0 !important;
}

.single-post .percy-component__body p,
.percy-ds-preview .percy-component__body p {
  line-height: 1.8;
}

.single-post .percy-component__body ul,
.single-post .percy-component__body ol,
.percy-ds-preview .percy-component__body ul,
.percy-ds-preview .percy-component__body ol {
  display: block !important;
  margin: 0.4em 0 0 !important;
  padding-left: 1.5em !important;
}

.single-post .percy-component__body ul,
.percy-ds-preview .percy-component__body ul {
  list-style: disc outside !important;
}

.single-post .percy-component__body ol,
.percy-ds-preview .percy-component__body ol {
  list-style: decimal outside !important;
}

.single-post .percy-component__body li,
.percy-ds-preview .percy-component__body li {
  display: list-item !important;
  position: static !important;
  margin: 0.45em 0 !important;
  padding: 0 !important;
  line-height: 1.75;
}

.single-post .percy-component__body li::before,
.single-post .percy-component__body li::after,
.percy-ds-preview .percy-component__body li::before,
.percy-ds-preview .percy-component__body li::after {
  display: none !important;
  content: none !important;
}

.single-post .percy-component--summary,
.percy-ds-preview .percy-component--summary {
  border-width: 2px 0 1px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.single-post .percy-component--environment,
.percy-ds-preview .percy-component--environment {
  --pc-accent: var(--percy-color-environment);
  --pc-bg: #f7f9fc;
  --pc-border: #d8e0e9;
}

.single-post .percy-component--data,
.percy-ds-preview .percy-component--data {
  --pc-accent: var(--percy-color-data);
  --pc-bg: #eef6ff;
  --pc-border: #bdd9f3;
}

.single-post .percy-component--result,
.single-post .percy-component--compare,
.percy-ds-preview .percy-component--result,
.percy-ds-preview .percy-component--compare {
  --pc-accent: var(--percy-color-navy);
  --pc-bg: #f2f6fb;
  --pc-border: #c8d6e6;
}

.single-post .percy-component--insight,
.single-post .percy-component--point,
.percy-ds-preview .percy-component--insight,
.percy-ds-preview .percy-component--point {
  --pc-accent: var(--percy-color-insight);
  --pc-bg: #effaff;
  --pc-border: #bfe7f5;
}

.single-post .percy-component--conclusion,
.single-post .percy-component--recommend,
.percy-ds-preview .percy-component--conclusion,
.percy-ds-preview .percy-component--recommend {
  --pc-accent: var(--percy-color-conclusion);
  --pc-bg: #f0faf5;
  --pc-border: #bfe5d2;
}

.single-post .percy-component--notice,
.percy-ds-preview .percy-component--notice {
  --pc-accent: var(--percy-color-warning);
  --pc-bg: #fff9e8;
  --pc-border: #f2d58a;
}

.single-post .percy-component--risk,
.percy-ds-preview .percy-component--risk {
  --pc-accent: var(--percy-color-risk);
  --pc-bg: #fff2f2;
  --pc-border: #efc2c2;
}

/* -----------------------------------------
   謨ｰ蛟､繧ｰ繝ｪ繝�ラ
----------------------------------------- */

.single-post .percy-ds-metrics,
.percy-ds-preview .percy-ds-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
  margin: 0.9em 0;
}

.single-post .percy-ds-metric,
.percy-ds-preview .percy-ds-metric {
  min-width: 0;
  padding: 0.95em;
  border: 1px solid rgba(15, 108, 189, 0.14);
  border-radius: var(--percy-radius-sm);
  background: rgba(255, 255, 255, 0.9);
}

.single-post .percy-ds-metric__label,
.percy-ds-preview .percy-ds-metric__label {
  display: block;
  margin-bottom: 0.3em;
  color: var(--percy-color-muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.single-post .percy-ds-metric__value,
.percy-ds-preview .percy-ds-metric__value {
  display: block;
  color: var(--percy-color-navy);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.single-post .percy-ds-metric__value small,
.percy-ds-preview .percy-ds-metric__value small {
  color: var(--percy-color-muted);
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0;
}

/* -----------------------------------------
   蜈ｱ騾壹ユ繝ｼ繝悶Ν
----------------------------------------- */

.single-post .percy-table-wrap,
.percy-ds-preview .percy-table-wrap {
  width: 100%;
  margin: 1.5em 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #aac6df #eef4f8;
  -webkit-overflow-scrolling: touch;
}

.single-post .percy-table-wrap:focus-visible,
.percy-ds-preview .percy-table-wrap:focus-visible {
  outline: 3px solid #8dd8ff;
  outline-offset: 3px;
}

.single-post .percy-table,
.percy-ds-preview .percy-table {
  width: 100%;
  min-width: 620px;
  margin: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--percy-color-white);
  font-size: 0.88rem;
  line-height: 1.65;
}

.single-post .percy-table th,
.percy-ds-preview .percy-table th {
  padding: 0.85em;
  border: 1px solid #cddbe8;
  background: var(--percy-color-navy) !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 800;
  text-align: left;
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: break-word;
}

.single-post .percy-table td,
.percy-ds-preview .percy-table td {
  padding: 0.85em;
  border: 1px solid #d8e0e8;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}

.single-post .percy-table tbody tr:nth-child(even),
.percy-ds-preview .percy-table tbody tr:nth-child(even) {
  background: #f7f9fb;
}

.single-post .percy-table tbody tr:hover,
.percy-ds-preview .percy-table tbody tr:hover {
  background: #f0f6fb;
}

.single-post .percy-table--compact,
.percy-ds-preview .percy-table--compact {
  min-width: 480px;
}

.single-post .percy-table--compare,
.percy-ds-preview .percy-table--compare {
  min-width: 1020px;
  table-layout: fixed;
}

.single-post .percy-table--compare th:nth-child(1),
.single-post .percy-table--compare td:nth-child(1),
.percy-ds-preview .percy-table--compare th:nth-child(1),
.percy-ds-preview .percy-table--compare td:nth-child(1) {
  width: 140px;
}

.single-post .percy-table--compare th:nth-child(2),
.single-post .percy-table--compare td:nth-child(2),
.percy-ds-preview .percy-table--compare th:nth-child(2),
.percy-ds-preview .percy-table--compare td:nth-child(2) {
  width: 170px;
}

.single-post .percy-table--compare th:nth-child(3),
.single-post .percy-table--compare td:nth-child(3),
.percy-ds-preview .percy-table--compare th:nth-child(3),
.percy-ds-preview .percy-table--compare td:nth-child(3) {
  width: 210px;
}

.single-post .percy-table--compare th:nth-child(4),
.single-post .percy-table--compare td:nth-child(4),
.percy-ds-preview .percy-table--compare th:nth-child(4),
.percy-ds-preview .percy-table--compare td:nth-child(4) {
  width: 280px;
}

.single-post .percy-table--compare th:nth-child(5),
.single-post .percy-table--compare td:nth-child(5),
.percy-ds-preview .percy-table--compare th:nth-child(5),
.percy-ds-preview .percy-table--compare td:nth-child(5) {
  width: 220px;
}

.single-post .percy-table--monthly,
.percy-ds-preview .percy-table--monthly {
  min-width: 780px;
  table-layout: fixed;
}

.single-post .percy-table--monthly th:nth-child(1),
.single-post .percy-table--monthly td:nth-child(1),
.percy-ds-preview .percy-table--monthly th:nth-child(1),
.percy-ds-preview .percy-table--monthly td:nth-child(1) {
  width: 150px;
}

.single-post .percy-table--monthly th:nth-child(2),
.single-post .percy-table--monthly td:nth-child(2),
.percy-ds-preview .percy-table--monthly th:nth-child(2),
.percy-ds-preview .percy-table--monthly td:nth-child(2) {
  width: 165px;
}

.single-post .percy-table--monthly th:nth-child(3),
.single-post .percy-table--monthly td:nth-child(3),
.percy-ds-preview .percy-table--monthly th:nth-child(3),
.percy-ds-preview .percy-table--monthly td:nth-child(3) {
  width: 155px;
}

.single-post .percy-table--monthly th:nth-child(4),
.single-post .percy-table--monthly td:nth-child(4),
.percy-ds-preview .percy-table--monthly th:nth-child(4),
.percy-ds-preview .percy-table--monthly td:nth-child(4) {
  width: 120px;
}

.single-post .percy-table--monthly th:nth-child(5),
.single-post .percy-table--monthly td:nth-child(5),
.percy-ds-preview .percy-table--monthly th:nth-child(5),
.percy-ds-preview .percy-table--monthly td:nth-child(5) {
  width: 190px;
}

/* -----------------------------------------
   豕ｨ驥医�蜃ｺ蜈ｸ
----------------------------------------- */

.single-post .percy-note,
.percy-ds-preview .percy-note {
  margin: 0.8em 0 1.5em;
  color: var(--percy-color-muted);
  font-size: 0.76rem;
  line-height: 1.75;
}

.single-post .percy-note--source,
.percy-ds-preview .percy-note--source {
  padding-left: 0.8em;
  border-left: 2px solid var(--percy-color-line);
}

.single-post .percy-note--ad,
.percy-ds-preview .percy-note--ad {
  color: #6b7280;
  font-size: 0.72rem;
}

/* -----------------------------------------
   繝懊ち繝ｳ繝ｻCTA
----------------------------------------- */

.single-post .percy-cta,
.percy-ds-preview .percy-cta {
  margin: 2.2em 0;
  padding: 1.4em;
  border: 1px solid #f0d497;
  border-radius: var(--percy-radius-md);
  background: #fff9eb;
}

.single-post .percy-cta__title,
.percy-ds-preview .percy-cta__title {
  margin: 0 0 0.7em !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--percy-color-ink) !important;
  font-size: 1.12rem !important;
  font-weight: 800;
  line-height: 1.5;
}

.single-post .percy-cta__body > p,
.percy-ds-preview .percy-cta__body > p {
  margin: 0 0 0.8em !important;
  line-height: 1.8;
}

.single-post .percy-cta .percy-note,
.percy-ds-preview .percy-cta .percy-note {
  margin: 0.7em 0 1em !important;
}

.single-post .percy-button,
.percy-ds-preview .percy-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  margin-top: 1em;
  padding: 0.75em 1.4em;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.single-post .percy-cta .percy-button,
.percy-ds-preview .percy-cta .percy-button {
  margin-top: 0;
}

.single-post .percy-button--primary,
.percy-ds-preview .percy-button--primary {
  background: var(--percy-color-data);
  color: #fff !important;
  box-shadow: var(--percy-shadow-button);
}

.single-post .percy-button--secondary,
.percy-ds-preview .percy-button--secondary {
  border-color: #b9d5ea;
  background: #fff;
  color: var(--percy-color-data) !important;
}

.single-post .percy-button--text,
.percy-ds-preview .percy-button--text {
  min-height: 0;
  padding: 0.35em 0;
  border-radius: 0;
  color: var(--percy-color-data) !important;
}

.single-post .percy-button:hover,
.percy-ds-preview .percy-button:hover {
  transform: translateY(-2px);
}

.single-post .percy-button--primary:hover,
.percy-ds-preview .percy-button--primary:hover {
  background: #0d5fa7;
  box-shadow: 0 10px 24px rgba(15, 108, 189, 0.25);
}

.single-post .percy-button:focus-visible,
.percy-ds-preview .percy-button:focus-visible {
  outline: 3px solid #8dd8ff;
  outline-offset: 3px;
}

.single-post .percy-button__arrow,
.percy-ds-preview .percy-button__arrow {
  flex: 0 0 auto;
}

/* -----------------------------------------
   繝舌ャ繧ｸ
----------------------------------------- */

.single-post .percy-badge,
.percy-ds-preview .percy-badge {
  display: inline-flex;
  align-items: center;
  margin: 0.15em 0.25em 0.15em 0;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  background: #eaf4ff;
  color: var(--percy-color-data);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.4;
}

.single-post .percy-badge--verified,
.percy-ds-preview .percy-badge--verified {
  background: #eaf7f0;
  color: var(--percy-color-conclusion);
}

.single-post .percy-badge--estimate,
.percy-ds-preview .percy-badge--estimate {
  background: #fff5dc;
  color: #966800;
}

.single-post .percy-badge--official,
.percy-ds-preview .percy-badge--official {
  background: #eef1f5;
  color: #46576a;
}

.single-post .percy-badge--updated,
.percy-ds-preview .percy-badge--updated {
  background: #eaf8fc;
  color: #176a88;
}

/* -----------------------------------------
   繝｡繝ｪ繝�ヨ繝ｻ繝�Γ繝ｪ繝�ヨ
----------------------------------------- */

.single-post .percy-pros-cons,
.percy-ds-preview .percy-pros-cons {
  margin: 2em 0;
  padding: 1.3em;
  border: 1px solid var(--percy-color-line);
  border-radius: var(--percy-radius-md);
  background: #fff;
  box-shadow: var(--percy-shadow-sm);
}

.single-post .percy-pros-cons__title,
.percy-ds-preview .percy-pros-cons__title {
  margin-bottom: 1em;
  color: var(--percy-color-navy);
  font-size: 1.05rem;
  font-weight: 800;
}

.single-post .percy-pros-cons__grid,
.percy-ds-preview .percy-pros-cons__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.single-post .percy-pros-cons__panel,
.percy-ds-preview .percy-pros-cons__panel {
  min-width: 0;
  padding: 1.05em;
  border: 1px solid var(--pp-border);
  border-radius: var(--percy-radius-sm);
  background: var(--pp-bg);
}

.single-post .percy-pros-cons__panel--pros,
.percy-ds-preview .percy-pros-cons__panel--pros {
  --pp-border: #bfe5d2;
  --pp-bg: #f0faf5;
  --pp-heading: #146c49;
}

.single-post .percy-pros-cons__panel--cons,
.percy-ds-preview .percy-pros-cons__panel--cons {
  --pp-border: #efc2c2;
  --pp-bg: #fff4f4;
  --pp-heading: #9f2f2f;
}

.single-post .percy-pros-cons__heading,
.percy-ds-preview .percy-pros-cons__heading {
  margin-bottom: 0.7em;
  color: var(--pp-heading);
  font-weight: 800;
}

.single-post .percy-pros-cons__body ul,
.percy-ds-preview .percy-pros-cons__body ul {
  margin: 0 !important;
  padding-left: 1.4em !important;
  list-style: disc outside !important;
}

.single-post .percy-pros-cons__body li,
.percy-ds-preview .percy-pros-cons__body li {
  display: list-item !important;
  position: static !important;
  margin: 0.45em 0 !important;
  padding: 0 !important;
  line-height: 1.7;
}

.single-post .percy-pros-cons__body li::before,
.single-post .percy-pros-cons__body li::after,
.percy-ds-preview .percy-pros-cons__body li::before,
.percy-ds-preview .percy-pros-cons__body li::after {
  display: none !important;
  content: none !important;
}

/* -----------------------------------------
   髢｢騾｣險倅ｺ句ｰ守ｷ�
----------------------------------------- */

.single-post .percy-related,
.percy-ds-preview .percy-related {
  margin: 1.8em 0;
  padding: 1.1em 1.2em;
  border: 1px solid #cfe2f3;
  border-left: 4px solid var(--percy-color-data);
  border-radius: 0 var(--percy-radius-sm) var(--percy-radius-sm) 0;
  background: #f7fbff;
}

.single-post .percy-related__title,
.percy-ds-preview .percy-related__title {
  margin-bottom: 0.65em;
  color: var(--percy-color-navy);
  font-size: 0.82rem;
  font-weight: 800;
}

.single-post .percy-related__body ul,
.percy-ds-preview .percy-related__body ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.single-post .percy-related__body li,
.percy-ds-preview .percy-related__body li {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0.55em 1.6em 0.55em 0 !important;
  border-top: 1px solid #e2edf6;
  list-style: none !important;
}

.single-post .percy-related__body li:first-child,
.percy-ds-preview .percy-related__body li:first-child {
  border-top: 0;
}

.single-post .percy-related__body li::before,
.percy-ds-preview .percy-related__body li::before {
  display: none !important;
  content: none !important;
}

.single-post .percy-related__body li::after,
.percy-ds-preview .percy-related__body li::after {
  position: absolute;
  top: 50%;
  right: 0.2em;
  display: block !important;
  color: var(--percy-color-data);
  content: "竊�" !important;
  transform: translateY(-50%);
}

.single-post .percy-related__body a,
.percy-ds-preview .percy-related__body a {
  color: var(--percy-color-data) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.single-post .percy-related__body a:hover,
.percy-ds-preview .percy-related__body a:hover {
  text-decoration: underline !important;
}

.single-post .percy-related__link,
.percy-ds-preview .percy-related__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7em;
  align-items: center;
  padding: 0.95em 1em;
  border: 1px solid var(--percy-color-line);
  border-radius: var(--percy-radius-sm);
  background: #fff;
  color: var(--percy-color-ink) !important;
  text-decoration: none !important;
}

.single-post .percy-related__link > span:first-child,
.percy-ds-preview .percy-related__link > span:first-child {
  color: var(--percy-color-data);
  font-size: 0.75rem;
  font-weight: 800;
}

.single-post .percy-related__link:hover,
.percy-ds-preview .percy-related__link:hover {
  border-color: var(--percy-color-data);
  text-decoration: none !important;
}

/* -----------------------------------------
   讀懆ｨｼ繝ｬ繝吶Ν
----------------------------------------- */

.single-post .percy-verification,
.percy-ds-preview .percy-verification {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr);
  gap: 16px 24px;
  align-items: center;
  margin: 1.8em 0;
  padding: 1.15em 1.25em;
  border: 1px solid #c8d6e6;
  border-radius: var(--percy-radius-md);
  background: #f7f9fc;
}

.single-post .percy-verification__eyebrow,
.percy-ds-preview .percy-verification__eyebrow {
  display: block;
  margin-bottom: 0.2em;
  color: var(--percy-color-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.single-post .percy-verification__meta strong,
.percy-ds-preview .percy-verification__meta strong {
  display: block;
  color: var(--percy-color-navy);
  font-size: 1rem;
}

.single-post .percy-verification__scale,
.percy-ds-preview .percy-verification__scale {
  display: flex;
  align-items: center;
  gap: 7px;
}

.single-post .percy-verification__dot,
.percy-ds-preview .percy-verification__dot {
  width: 14px;
  height: 14px;
  border: 1px solid #b8c6d4;
  border-radius: 50%;
  background: #fff;
}

.single-post .percy-verification__dot.is-active,
.percy-ds-preview .percy-verification__dot.is-active {
  border-color: var(--percy-color-data);
  background: var(--percy-color-data);
  box-shadow: 0 0 0 3px rgba(15, 108, 189, 0.09);
}

.single-post .percy-verification__number,
.percy-ds-preview .percy-verification__number {
  margin-left: 0.35em;
  color: var(--percy-color-muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.single-post .percy-verification__body,
.percy-ds-preview .percy-verification__body {
  grid-column: 1 / -1;
  padding-top: 0.8em;
  border-top: 1px solid #dce5ed;
  color: var(--percy-color-muted);
  font-size: 0.82rem;
  line-height: 1.7;
}

.single-post .percy-verification__body > :first-child,
.single-post .percy-verification__body > :last-child,
.percy-ds-preview .percy-verification__body > :first-child,
.percy-ds-preview .percy-verification__body > :last-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* -----------------------------------------
   譖ｴ譁ｰ諠��ｱ
----------------------------------------- */

.single-post .percy-update,
.percy-ds-preview .percy-update {
  margin: 1.6em 0;
  padding: 1em 1.15em;
  border: 1px solid #d7e6f3;
  border-radius: var(--percy-radius-sm);
  background: #f8fbfe;
}

.single-post .percy-update__header,
.percy-ds-preview .percy-update__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 0.65em;
  padding-bottom: 0.55em;
  border-bottom: 1px solid #e0eaf3;
}

.single-post .percy-update__title,
.percy-ds-preview .percy-update__title {
  color: var(--percy-color-navy);
  font-size: 0.88rem;
  font-weight: 800;
}

.single-post .percy-update time,
.percy-ds-preview .percy-update time {
  color: var(--percy-color-muted);
  font-size: 0.72rem;
}

.single-post .percy-update__body,
.percy-ds-preview .percy-update__body {
  color: #46576a;
  font-size: 0.84rem;
  line-height: 1.7;
}

.single-post .percy-update__body > :first-child,
.single-post .percy-update__body > :last-child,
.percy-ds-preview .percy-update__body > :first-child,
.percy-ds-preview .percy-update__body > :last-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* -----------------------------------------
   螳滓ｼ斐�繝ｼ繧ｸ
----------------------------------------- */

.percy-ds-preview {
  width: min(100%, 980px);
  margin: 0 auto;
  color: var(--percy-color-ink);
}

.percy-ds-preview__header {
  margin-bottom: 2.5em;
  padding: 2em;
  border-radius: 18px;
  background: linear-gradient(135deg, #071f3e, var(--percy-color-navy));
  color: #fff;
}

.percy-ds-preview__header span {
  color: #8dd8ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.percy-ds-preview__header h1 {
  margin: 0.3em 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #fff !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}

.percy-ds-preview__intro {
  margin-bottom: 2em;
  padding: 1em 1.2em;
  border: 1px solid var(--percy-color-line);
  border-radius: var(--percy-radius-sm);
  background: #f7f9fc;
}

.percy-ds-preview .percy-ds-preview__section-title {
  margin: 3em 0 1.2em !important;
  padding: 0 0 0.65em !important;
  border: 0 !important;
  border-bottom: 2px solid var(--percy-color-navy) !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--percy-color-navy) !important;
  font-size: 1.45rem !important;
  box-shadow: none !important;
}

/* -----------------------------------------
   譌ｧ繧ｳ繝ｳ繝昴�繝阪Φ繝医→縺ｮ遘ｻ陦御ｺ呈鋤
   蜈ｨ險倅ｺ狗ｧｻ陦悟ｮ御ｺ�∪縺ｧ縺ｯ蜑企勁縺励↑縺�
----------------------------------------- */

.single-post .percy-measurement.percy-result {
  --percy-component-bg: #f2f6fb;
  --percy-component-border: #c8d6e6;
  --percy-component-accent: #0c2f5f;
}

.single-post .percy-measurement.percy-insight {
  --percy-component-bg: #effaff;
  --percy-component-border: #bfe7f5;
  --percy-component-accent: #2b9fc7;
}

.single-post .percy-measurement.percy-conclusion,
.single-post .percy-measurement.percy-check {
  --percy-component-bg: #f0faf5;
  --percy-component-border: #bfe5d2;
  --percy-component-accent: #1f9d69;
}

/* -----------------------------------------
   繧ｹ繝槭�繝医ヵ繧ｩ繝ｳ
----------------------------------------- */

@media (max-width: 767px) {
  .single-post .percy-component,
  .percy-ds-preview .percy-component {
    margin: 1.7em 0;
    padding: 1.05em;
    border-radius: 9px;
  }

  .single-post .percy-component--summary,
  .percy-ds-preview .percy-component--summary {
    border-radius: 0;
  }

  .single-post .percy-component__title,
  .percy-ds-preview .percy-component__title {
    font-size: 1rem;
  }

  .single-post .percy-ds-metrics,
  .percy-ds-preview .percy-ds-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .single-post .percy-ds-metric,
  .percy-ds-preview .percy-ds-metric {
    padding: 0.8em 0.7em;
  }

  .single-post .percy-ds-metric__value,
  .percy-ds-preview .percy-ds-metric__value {
    font-size: 1.5rem;
  }

  .single-post .percy-table,
  .percy-ds-preview .percy-table {
    font-size: 0.84rem;
  }

  .single-post .percy-table th,
  .single-post .percy-table td,
  .percy-ds-preview .percy-table th,
  .percy-ds-preview .percy-table td {
    padding: 0.75em;
  }

  .single-post .percy-cta,
  .percy-ds-preview .percy-cta {
    margin: 1.8em 0;
    padding: 1em;
  }

  .single-post .percy-cta__title,
  .percy-ds-preview .percy-cta__title {
    margin-bottom: 0.55em !important;
    font-size: 1.02rem !important;
  }

  .single-post .percy-cta__body > p,
  .percy-ds-preview .percy-cta__body > p {
    margin-bottom: 0.55em !important;
    font-size: 0.93rem;
    line-height: 1.7;
  }

  .single-post .percy-cta .percy-note,
  .percy-ds-preview .percy-cta .percy-note {
    margin: 0.45em 0 0.8em !important;
    font-size: 0.74rem;
    line-height: 1.65;
  }

  .single-post .percy-button,
  .percy-ds-preview .percy-button {
    width: 100%;
    min-height: 48px;
    padding: 0.7em 1em;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .single-post .percy-pros-cons,
  .percy-ds-preview .percy-pros-cons {
    padding: 1em;
  }

  .single-post .percy-pros-cons__grid,
  .percy-ds-preview .percy-pros-cons__grid {
    grid-template-columns: 1fr;
  }

  .single-post .percy-verification,
  .percy-ds-preview .percy-verification {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 1em;
  }

  .single-post .percy-verification__body,
  .percy-ds-preview .percy-verification__body {
    grid-column: auto;
  }

  .percy-ds-preview__header {
    padding: 1.4em;
    border-radius: 12px;
  }
}

@media (max-width: 360px) {
  .single-post .percy-ds-metrics,
  .percy-ds-preview .percy-ds-metrics {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------
   蜍輔″繧呈ｸ帙ｉ縺呵ｨｭ螳�
----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .single-post .percy-button,
  .percy-ds-preview .percy-button {
    transition: none !important;
  }
}

/* -----------------------------------------
   蜊ｰ蛻ｷ
----------------------------------------- */

@media print {
  .single-post .percy-component,
  .single-post .percy-pros-cons,
  .single-post .percy-verification,
  .single-post .percy-update,
  .single-post .percy-related,
  .single-post .percy-cta {
    box-shadow: none !important;
    break-inside: avoid;
  }

  .single-post .percy-button {
    border: 1px solid var(--percy-color-data);
    background: #fff !important;
    color: var(--percy-color-data) !important;
    box-shadow: none !important;
  }
}