:root {
  color-scheme: light;
  --blue: #1d4ed8;
  --navy: #10234b;
  --ink: #15243c;
  --muted: #526176;
  --line: #dce3ee;
  --soft: #eef4ff;
  --paper: #f7f9fc;
  --header-h: 126px;
}

* {
  box-sizing: border-box;
}

html {
  /* Let history restore its position directly. Explicit navigator actions
     choose their own short scroll behaviour in JavaScript. */
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.8 system-ui, -apple-system, "Segoe UI",
    "Noto Sans JP", Meiryo, sans-serif;
  overflow-wrap: anywhere;
}

a {
  color: var(--blue);
  text-underline-offset: .22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

button,
input,
textarea,
summary {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.5;
  letter-spacing: -.025em;
  text-wrap: pretty;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

h2 {
  font-size: clamp(1.4rem, 2.7vw, 2rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin-bottom: 1.2em;
}

:focus-visible {
  outline: 3px solid #c44500;
  outline-offset: 5px;
}

[id] {
  /* 固定ヘッダーの余白はhtmlのscroll-padding-topで確保します。 */
  scroll-margin-top: 0;
}

.wrap {
  width: min(1160px, calc(100% - 40px));
  margin-inline: auto;
}

#main {
  min-height: 55vh;
  padding-bottom: 80px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: white;
  padding: 12px 20px;
}

.skip:focus {
  top: 12px;
}



.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--line);
}

.header-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 17px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 850;
  text-decoration: none;
  color: var(--navy);
  letter-spacing: -.05em;
}

.logo-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--blue);
  color: white;
  border-radius: 11px;
}

.header-links {
  display: flex;
  gap: 24px;
  font-size: .875rem;
}

.header-links a {
  text-decoration: none;
  color: var(--muted);
  padding: 8px 0;
}

.desktop-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-bottom: 9px;
}

.desktop-nav a {
  padding: 9px 14px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 650;
}

.desktop-nav a:hover,
.desktop-nav a[aria-current] {
  background: var(--soft);
  color: var(--blue);
}

.mobile-menu {
  display: none;
}

.progress-track {
  height: 3px;
  background: var(--line);
}

#readingProgress {
  width: 100%;
  height: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}



.eyebrow {
  font-size: .8125rem;
  letter-spacing: .14em;
  font-weight: 750;
  color: var(--blue);
  margin-bottom: 16px;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 76px 0 54px;
}

.hero h1 {
  font-size: clamp(2.8rem, 5.5vw, 4.8rem);
  line-height: 1.25;
  letter-spacing: -.05em;
  margin-bottom: 24px;
}

.hero em {
  font-style: normal;
  color: var(--blue);
}

.lead {
  font-size: 1.075rem;
  line-height: 1.95;
  max-width: 56ch;
  color: var(--muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--blue);
  color: white;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 750;
  line-height: 1.65;
  text-align: center;
  transition: background .18s, transform .18s;
}

.button:hover {
  background: #153da9;
  transform: translateY(-2px);
  text-decoration: none;
}

.button.secondary {
  background: white;
  color: var(--blue);
  border-color: #c4d3ef;
}

.button.secondary:hover {
  background: var(--soft);
}

.feature {
  display: flex;
  flex-direction: column;
  min-height: 370px;
  padding: 36px;
  border-radius: 24px;
  background: linear-gradient(125deg, #10234b, #1744a7);
  color: white;
  text-decoration: none;
  box-shadow: 0 24px 50px #172f6618;
}

.feature .eyebrow {
  color: #b6ceff;
  display: flex;
  justify-content: space-between;
}

.feature .tag {
  align-self: flex-start;
  background: #ffffff18;
  color: white;
  border: 1px solid #ffffff4a;
}

.feature h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-block: 18px;
}

.feature p {
  color: #d5e3ff;
}

.feature .read {
  color: white;
  margin-top: auto;
}

.block {
  margin-block: 56px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.section-heading h2 {
  margin-bottom: 0;
}

.section-heading .eyebrow {
  margin-bottom: 6px;
}

.section-heading > a {
  flex-shrink: 0;
  font-size: .875rem;
}



.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.category {
  display: block;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  text-decoration: none;
}

.category > span {
  display: block;
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .13em;
  color: var(--muted);
}

.category > strong {
  display: block;
  margin-block: 6px;
  font-size: 1.125rem;
  color: var(--ink);
}

.category p {
  font-size: .875rem;
  color: var(--muted);
  margin: 0;
}

.category:hover {
  border-color: var(--blue);
  background: var(--soft);
}



.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1099px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 679px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px #18385b12;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  min-height: 104px;
  padding: 22px;
  background: var(--soft);
  color: #244e9c;
  font-size: 1.2rem;
  letter-spacing: .07em;
  font-weight: 800;
}

.card:nth-child(3n+2) .card-top {
  background: #eaf1f6;
  color: #23495b;
}

.card:nth-child(3n) .card-top {
  background: #edf0f8;
  color: #3d4873;
}

.card-top > span + span {
  font-size: .875rem;
  opacity: .8;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.tag {
  display: inline-block;
  align-self: flex-start;
  border-radius: 5px;
  background: var(--soft);
  color: var(--blue);
  padding: 3px 9px;
  font-size: .75rem;
  font-weight: 700;
}

.card h3 {
  color: var(--ink);
  margin-block: 14px 12px;
}

.card p {
  font-size: .9375rem;
  color: var(--muted);
}

.read {
  margin-top: auto;
  font-size: .875rem;
  font-weight: 750;
  color: var(--blue);
}

.policy-banner {
  padding: 46px;
  border-radius: 20px;
  background: var(--navy);
  color: white;
  margin-top: 70px;
}

.policy-banner .eyebrow {
  color: #adcbff;
}

.policy-banner p {
  max-width: 58ch;
}



.page-heading {
  padding: 46px 0 30px;
}

.page-heading h1 {
  margin-bottom: 20px;
}

.breadcrumbs {
  padding-top: 24px;
  font-size: .8125rem;
  color: var(--muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li + li::before {
  content: "/";
  color: #6c7c92;
  margin-right: 10px;
}

.breadcrumbs a {
  color: var(--muted);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pills a {
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  font-size: .9375rem;
}



.article-heading {
  max-width: 900px;
  padding: 44px 0 30px;
}

.article-heading h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  line-height: 1.55;
}

.meta {
  color: var(--muted);
  font-size: .8125rem;
}

.disclosure {
  font-size: .875rem;
  color: #5b4420;
  background: #fff6e4;
  border: 1px solid #ebd6ae;
  border-radius: 8px;
  padding: 12px 16px;
}

.takeaway {
  border-left: 4px solid var(--blue);
  background: var(--soft);
  padding: 20px 24px;
  margin-top: 24px;
}

.takeaway strong {
  color: var(--blue);
  font-size: .875rem;
}

.takeaway p {
  margin: 7px 0 0;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-areas: "body toc";
  gap: 54px;
  align-items: start;
}

.toc {
  grid-area: toc;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 18px;
  max-height: calc(100vh - var(--header-h) - 44px);
  overflow: auto;
  font-size: .875rem;
}

.toc summary {
  font-weight: 750;
  cursor: pointer;
  min-height: 32px;
}

.toc ol {
  padding-left: 1.3em;
}

.toc li {
  margin-top: 12px;
}

.toc li ol {
  font-size: .8125rem;
  padding-left: 1em;
}

.toc a {
  color: var(--muted);
  text-decoration: none;
}

.toc a:hover,
.toc a[aria-current] {
  color: var(--blue);
  text-decoration: underline;
}

.prose {
  grid-area: body;
  min-width: 0;
  font-size: 1.0625rem;
  line-height: 1.95;
}

.prose p {
  margin-bottom: 1.5em;
}

.prose h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin-top: 46px;
  margin-bottom: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.article-section:first-child h2 {
  margin-top: 0;
}

.section-number {
  display: block;
  color: var(--blue);
  font-size: .875rem;
  letter-spacing: .12em;
  margin-bottom: 8px;
}

.prose h3 {
  margin-top: 30px;
  margin-bottom: 14px;
}

.prose ul {
  padding-left: 1.5em;
  margin-block: 20px 28px;
}

.prose li {
  margin-bottom: 9px;
}

.source,
.prose .source {
  font-size: .8125rem;
  color: var(--muted);
  margin-top: -8px;
  margin-bottom: 24px;
}



.ad {
  padding: 28px;
  margin-block: 34px;
  border: 1px solid #ecc4c4;
  border-radius: 16px;
  background: #fff8f8;
}

.ad > strong {
  display: block;
  font-size: 1.22rem;
  line-height: 1.7;
  margin-block: 14px;
}

.ad .tag {
  color: #8c141d;
  background: #fee8e9;
}

.ad p {
  font-size: .9375rem;
  margin-bottom: 18px;
}

.ad .buy {
  background: #a10d23;
  width: 100%;
  padding: 15px 18px;
}

.ad .buy:hover {
  background: #7d0b1b;
}

.ad .small {
  margin: 14px 0 0;
  font-size: .8125rem;
  color: #6e4a4d;
}



.table-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: .875rem;
  line-height: 1.8;
}

caption {
  padding: 14px;
  text-align: left;
  color: var(--muted);
  background: white;
  font-size: .8125rem;
}

th,
td {
  padding: 16px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
}

thead th {
  background: var(--soft);
  color: var(--navy);
}

tbody th {
  background: #f8fafc;
  min-width: 110px;
}

tbody td {
  min-width: 175px;
}

.faq details {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-block: 12px;
  padding: 16px 20px;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  line-height: 1.7;
  padding: 4px 0;
}

.faq details p {
  margin: 16px 0 0;
  font-size: 1rem;
}

.article-footer {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--muted);
}

.narrow {
  max-width: 790px;
}

.small {
  font-size: .8125rem;
  color: var(--muted);
}

.pick {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}

.pick h2 {
  font-size: 1.35rem;
}

.pick p {
  color: var(--muted);
}

.notice {
  padding: 22px;
  border: 1px solid #e9d3a5;
  border-radius: 12px;
  background: #fff6e4;
}

.notice p {
  margin-bottom: 0;
}



.footer {
  background: var(--navy);
  color: #d0dbee;
  padding: 50px 0 30px;
}

.footer .logo {
  color: white;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 28px;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 14px 24px;
}

.footer a {
  color: #e0eaff;
}

.footer .small {
  color: #b9c7dd;
}

.back-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  text-decoration: none;
  box-shadow: 0 4px 16px #10234b14;
}



@media (max-width: 1000px) {
  .hero {
    gap: 28px;
  }

  .article-layout {
    gap: 26px;
    grid-template-columns: minmax(0, 1fr) 240px;
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .desktop-nav,
  .header-links {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .mobile-menu > summary {
    cursor: pointer;
    font-size: .9375rem;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .mobile-menu nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 16px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 16px 30px #10234b14;
  }

  .mobile-menu nav a {
    padding: 12px;
    text-decoration: none;
    font-size: .9375rem;
  }

  .mobile-menu nav a[aria-current] {
    background: var(--soft);
    border-radius: 8px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 46px;
  }

  .feature {
    min-height: 0;
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "toc" "body";
  }

  .toc {
    position: static;
    max-height: none;
  }

  .article-heading {
    padding-bottom: 12px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .wrap {
    width: calc(100% - 32px);
  }

  .header-top {
    padding-block: 12px;
  }

  .logo {
    font-size: 1.25rem;
  }

  .hero h1 {
    font-size: 2.9rem;
  }

  .feature {
    padding: 26px;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category {
    padding: 16px;
  }

  .category p {
    font-size: .875rem;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .policy-banner {
    padding: 28px;
  }

  .ad {
    padding: 22px 18px;
  }

  .prose {
    font-size: 1rem;
  }

  .takeaway {
    padding: 18px;
  }

  .actions .button {
    flex: 1 1 180px;
  }

  .back-top {
    right: 10px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .site-header,
  .footer,
  .toc,
  .back-top,
  .actions,
  .ad,
  .breadcrumbs {
    display: none;
  }

  .wrap {
    width: 100%;
  }

  .article-layout {
    display: block;
  }

  body {
    background: white;
    color: black;
  }

  .article-heading {
    max-width: none;
  }

  .prose {
    font-size: 11pt;
  }

  a {
    color: inherit;
  }
}

[hidden] { display: none !important; }
h1, h2, h3, .logo { letter-spacing: 0; }
h1 { font-size: 2.5rem; } h2 { font-size: 1.75rem; }
.picks-grid { align-items: stretch; margin-top: 24px; }
.card { min-width: 0; border-radius: 8px; }
.card-top { height: 104px; min-height: 104px; flex: 0 0 104px; letter-spacing: 0; }
.card-body .card-purpose { margin: 16px 0 0; color: #16816b; font-size: .8rem; font-weight: 700; }
.card-body .read { padding-top: 12px; }
.article-preview { margin-top: 28px; padding-block: 24px; border-block: 1px solid var(--line); }
.article-preview h2 { font-size: 1.3rem; }
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.audience > div { border-left: 3px solid #16816b; padding-left: 16px; }
.audience > div + div { border-color: #ba6519; }
.button:active, .back-top:active { transform: translateY(2px); }
.category { transition: transform .18s, box-shadow .18s; }
@media (hover: hover) { .category:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #15243c14; } }
@media (max-width: 600px) { h1 { font-size: 2rem; } h2 { font-size: 1.4rem; } .audience { grid-template-columns: 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .category { transition: none; } .category:hover, .card:hover, .button:active, .back-top:active { transform: none; } }

.genre-icon { width: 24px; height: 24px; flex: 0 0 24px; vertical-align: middle; }
.hero { gap: 44px; padding-top: 56px; }
.hero h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.55; letter-spacing: 0; text-wrap: balance; }
.hero .lead { font-size: 1rem; }
.hero .actions { align-items: center; gap: 20px; }
.hero-icons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; color: var(--blue); }
.hero-icons span { display: inline-flex; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.feature { min-height: 370px; }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-top: 20px; border: 1px solid #ffffff4a; border-radius: 14px; }
.feature h2 { font-size: clamp(1.65rem,2.8vw,2.2rem); }
.feature small { font-size: .8rem; }
.category .genre-icon { margin-bottom: 12px; color: var(--blue); }
.finder-heading { padding-bottom: 18px; }
.finder-heading p:last-child { margin-bottom: 0; }
.finder-form { background: white; padding: 28px; border: 1px solid var(--line); border-radius: 18px; }
.finder-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.finder-form legend { color: var(--navy); font-size: 1.075rem; font-weight: 750; padding: 0; margin-bottom: 14px; }
.step-number { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--soft); color: var(--blue); border-radius: 50%; font-size: .9rem; margin-right: 5px; }
.finder-options { display: flex; flex-wrap: wrap; gap: 10px; }
.finder-option { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 48px; border: 1px solid #bac7d9; border-radius: 9px; background: white; cursor: pointer; line-height: 1.6; transition: background .15s, border-color .15s; }
.finder-option input { accent-color: var(--blue); width: 17px; height: 17px; margin: 0; flex: 0 0 17px; }
.finder-option > span { display: inline-flex; align-items: center; gap: 8px; }
.finder-option:has(input:checked) { color: #153da9; background: var(--soft); border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.finder-option:focus-within { outline: 3px solid #c44500; outline-offset: 3px; }
.finder-option input:focus-visible { outline: none; }
.finder-form fieldset:disabled { opacity: .65; }
.finder-form fieldset:disabled .finder-option { cursor: default; }
.finder-detail-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; }
.finder-detail-fields .small { margin-bottom: 12px; }
.finder-optional-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.finder-optional-fields .finder-compatibility { max-width: none; min-width: 0; }
.finder-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 26px; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; transform: none; }
.text-button { border: 0; background: transparent; color: var(--blue); text-decoration: underline; text-underline-offset: .2em; padding: 12px 0; }
.finder-result-section { margin-top: 44px; }
.finder-result-section .section-heading { margin-bottom: 12px; }
.finder-conditions { display: flex; flex-wrap: wrap; gap: 8px; }
.condition-chip { padding: 8px 12px; border: 1px solid #bac7d9; border-radius: 20px; background: white; color: var(--ink); font-size: .875rem; }
#finder-status { margin: 16px 0; font-size: .9375rem; color: var(--muted); }
.candidate { display: flex; flex-direction: column; min-width: 0; background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.candidate-top { display: flex; align-items: center; gap: 8px; background: var(--soft); padding: 18px 22px; font-size: .875rem; color: var(--navy); }
.candidate-top .tag { margin-left: auto; font-size: .7rem; }
.candidate-body { padding: 22px; display: flex; flex-direction: column; flex: 1; gap: 18px; }
.candidate h3 { font-size: 1.15rem; line-height: 1.65; margin: 0; }
.candidate h3 a { text-decoration: none; color: var(--ink); }
.candidate h3 a:hover { color: var(--blue); text-decoration: underline; }
.candidate h4 { font-size: .875rem; margin: 0 0 6px; }
.candidate p { font-size: .9375rem; line-height: 1.9; margin: 0; }
.candidate-fit { border-left: 3px solid #16816b; padding-left: 12px; }
.candidate-warning { border-left: 3px solid #b7762a; padding-left: 12px; }
.candidate-read { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; font-weight: 700; padding-top: 18px; margin-top: auto; border-top: 1px solid var(--line); text-decoration: none; }
.picks-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 1023px) { .picks-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 800px) { .finder-detail-fields,.finder-optional-fields { grid-template-columns: 1fr; } }
@media (max-width: 679px) { .picks-grid { grid-template-columns: 1fr; } .finder-form { padding: 20px 16px; } .finder-option { padding: 9px 11px; } .finder-actions .button { width: 100%; } .hero { padding-top: 34px; gap: 32px; } .hero .actions { align-items: stretch; flex-direction: column; } .hero .actions .button { flex: auto; } .hero-icons { gap: 8px; } .hero-icons span { padding: 7px; } .feature { min-height: 340px; } }
@media (prefers-reduced-motion: reduce) { .finder-option { transition: none; } }

.catalog-form { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; align-items: end; }
.catalog-form label, .finder-compatibility label { display: grid; gap: 6px; font-size: .875rem; font-weight: 700; min-width: 0; }
.catalog-form input, .catalog-form select, .finder-compatibility select { width: 100%; min-width: 0; min-height: 46px; padding: 9px 12px; color: var(--ink); background: white; border: 1px solid #9aa9bd; border-radius: 6px; font: inherit; }
.finder-compatibility { margin: 16px 0 24px; max-width: 480px; }
[hidden] { display: none !important; }
.catalog .card-top { height: 70px; min-height: 70px; flex-basis: 70px; }
.catalog .card h3 { margin-bottom: 12px; }
.home-genre { margin-block: 44px; }
.home-genre .section-heading { margin-bottom: 18px; }
.capability-stars { color: #865600; letter-spacing: .12em; white-space: nowrap; }
@media(max-width: 900px) { .catalog-form { grid-template-columns: 1fr 1fr; } }
@media(max-width: 679px) { .catalog-form { grid-template-columns: 1fr; padding: 18px; } }

.selection-not-applicable{background:#f0f1f2;color:#485765}
.selection-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.selection-actions[hidden]{display:none}.selection-actions button,.selection-column-actions button,.selection-dialog button{min-height:42px;white-space:normal;overflow-wrap:anywhere}.selection-actions button[aria-pressed="true"],.selection-column-actions button[aria-pressed="true"]{background:#e9f4ff;color:#12476d;border-color:#38729c}.selection-warning{max-width:1100px;margin:20px auto;padding:12px 18px;border:1px solid #b88b3c;border-radius:10px;background:#fff7e7;color:#51380a}.selection-warning[hidden]{display:none}.selection-live{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.selection-dialog{box-sizing:border-box;width:min(1100px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:88vh;max-height:88dvh;margin:auto;padding:22px;border:1px solid #bac7d2;border-radius:16px;background:#fff;color:#1b2938;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 20px 80px #0b22334d}.selection-dialog:not([open]){display:none}.selection-dialog::backdrop{background:#102438a6}.selection-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.selection-dialog-heading h2{margin:0;min-width:0;font-size:1.45rem}.selection-dialog-heading>button{flex:0 0 auto}.selection-dialog p,.selection-dialog li,.selection-dialog h3{overflow-wrap:anywhere}.selection-dialog p{line-height:1.8}.selection-dialog a{text-decoration:underline;text-underline-offset:3px}.selection-dialog button:focus-visible,.selection-dialog input:focus-visible,.selection-dialog a:focus-visible,.selection-table-scroll:focus-visible{outline:3px solid #2868a5;outline-offset:3px}.selection-saved-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0;padding:0;list-style:none}.selection-saved-list>li{min-width:0;padding:16px;border:1px solid #d2dce5;border-radius:12px}.selection-saved-list h3{margin:5px 0;font-size:1.06rem}.selection-kind{font-size:.85rem;color:#536777;margin:0}.selection-difference-label{display:inline-flex;align-items:center;gap:8px;margin:8px 0;font-weight:700}.selection-difference-label input{width:20px;height:20px;margin:0}.selection-difference-status{font-size:.9rem;color:#506373}.selection-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border:1px solid #cbd6df;border-radius:10px}.selection-comparison-table{width:100%;min-width:calc(155px + var(--comparison-count)*235px);border-collapse:collapse;table-layout:fixed;margin:0}.selection-comparison-table caption{text-align:left;padding:12px;font-weight:700;background:#edf3f8}.selection-comparison-table th,.selection-comparison-table td{box-sizing:border-box;vertical-align:top;padding:14px;border:1px solid #d5dee7;overflow-wrap:anywhere;line-height:1.7;white-space:normal}.selection-comparison-table thead th{background:#f3f7fa}.selection-comparison-table th:first-child{width:155px}.selection-comparison-table tbody th{background:#f8fafc;text-align:left}.selection-comparison-table td p{margin:8px 0}.selection-comparison-table ul{padding-left:20px;margin:8px 0}.selection-comparison-table tr[hidden]{display:none}.selection-column-actions{display:flex;flex-direction:column;gap:7px;margin-top:12px}.selection-state{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.86rem;font-weight:700}.selection-supported{background:#e4f2e9;color:#195235}.selection-unsupported{background:#f8e8e8;color:#8b2d2d}.selection-conditional{background:#fff2d8;color:#694800}.selection-unknown{background:#edf0f3;color:#425362}.selection-replacement-list{list-style:none;padding:0;display:grid;gap:10px}.selection-replacement-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #d2dce5;border-radius:8px;padding:12px}.selection-replacement-list button{flex:0 0 auto;max-width:55%}@media(max-width:650px){.selection-dialog{width:calc(100% - 20px);max-width:calc(100% - 20px);padding:15px;border-radius:12px}.selection-dialog-heading h2{font-size:1.18rem}.selection-saved-list{grid-template-columns:minmax(0,1fr)}.selection-comparison-table th,.selection-comparison-table td{padding:11px}.selection-dialog-heading{align-items:flex-start}.selection-replacement-list li{flex-direction:column;align-items:stretch}.selection-replacement-list button{max-width:none}.selection-warning{margin:14px 10px}}
.product-card { min-width:0; color:var(--ink); }
.product-card:hover { transform:none; box-shadow:0 6px 22px #18385b0d; }
.product-media { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; min-height:112px; padding:20px; background:#f1f4f8; color:#526174; border-bottom:1px solid var(--line); font-size:.8rem; }
.product-media-mark { display:grid; place-items:center; height:44px; width:44px; flex:0 0 44px; color:#617693; border:1px solid #c9d3e0; border-radius:10px; font-size:.8rem; letter-spacing:.1em; font-weight:700; }
.product-media .product-type { width:100%; text-align:center; font-size:.75rem; color:#46556a; }
.product-card .card-body { display:flex; flex-direction:column; gap:14px; min-width:0; padding:22px; }
.product-card .product-brand { margin:0; font-size:.75rem; font-weight:700; color:#526174; letter-spacing:.035em; }
.product-card h3, .catalog .product-card h3 { margin:0; font-size:1.1rem; line-height:1.6; overflow-wrap:anywhere; }
.product-card h3 a { color:var(--ink); text-decoration:none; }
.product-card h3 a:hover { text-decoration:underline; }
.product-card .product-summary { margin:0; font-size:.9rem; line-height:1.8; color:var(--ink); }
.product-card .product-article-context { font-size:.75rem; margin:0; color:#526174; }
.product-card .product-features { display:grid; gap:10px; list-style:none; padding:14px 0; margin:0; border-block:1px solid var(--line); }
.product-features li { min-width:0; margin:0; font-size:.875rem; line-height:1.65; }
.product-feature-heading { display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; }
.product-feature-heading strong { font-weight:650; }
.product-feature-status { font-size:.7rem; color:#365779; border:1px solid #c7d4e3; border-radius:4px; padding:0 5px; white-space:nowrap; }
.product-feature-status.is-unsupported { color:#5f4847; background:#faf5f5; border-color:#dbcaca; }
.product-feature-status.is-conditional { background:#eef3fa; }
.product-feature-text { display:block; margin-top:3px; color:#46556a; overflow-wrap:anywhere; }
.product-card .product-caution { display:grid; gap:4px; margin:0; padding:11px 12px; background:#f5f7fa; border-left:3px solid #8ea1ba; border-radius:0 5px 5px 0; font-size:.875rem; line-height:1.75; }
.product-caution strong { font-size:.75rem; color:#394a60; }
.product-card-links { margin-top:auto; display:flex; flex-direction:column; gap:12px; align-items:stretch; padding-top:6px; }
.product-detail-link { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; border-radius:7px; padding:10px 13px; color:white; background:var(--blue); text-decoration:none; font-size:.875rem; font-weight:700; }
.product-detail-link:hover { color:white; background:#153f96; text-decoration:underline; }
.product-card-links .selection-actions { display:flex; flex-wrap:wrap; gap:8px; }
.product-card-links .selection-actions button { flex:1; min-height:44px; }
.nav-product .candidate-body { gap:14px; }
.nav-product .candidate-fit { border:0; padding:0; }
.nav-product .candidate-fit h4 { font-size:.8rem; margin-bottom:6px; color:#394a60; }
.nav-product .candidate-warning { border:0; padding:0; }
.nav-product .candidate-warning .product-caution { margin:0; }
.nav-product .nav-evidence { font-size:.85rem; padding:12px; background:#f5f7fa; border:1px solid var(--line); border-radius:7px; }
.nav-evidence summary { cursor:pointer; font-weight:650; padding:4px 0; }
.nav-evidence p, .nav-evidence li { font-size:.8rem; line-height:1.75; }
.nav-evidence ul { padding-left:20px; }
.nav-product .nav-condition-count { font-size:.8rem; margin:0; color:#394a60; }
.product-detail { background:white; padding:24px; border:1px solid var(--line); border-radius:12px; margin:22px 0; scroll-margin-top:140px; }
.product-detail h3 { margin-top:0; }
.product-detail details { margin-top:20px; }
.product-detail summary { cursor:pointer; font-weight:700; padding:12px 0; }
.enough-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; }
.enough-grid h4 { font-size:1rem; margin-bottom:8px; }
.enough-grid p { margin:0; }
.product-guidance .table-scroll table { min-width:560px; }
.product-card-links button { font-size:.875rem; }
.selection-header { display:flex; flex-wrap:wrap; gap:8px; }
.selection-header button { font:inherit; color:var(--blue); background:white; border:1px solid var(--line); border-radius:6px; padding:7px 10px; min-height:44px; }
.selection-actions button { font:inherit; padding:8px 12px; background:white; color:var(--blue); border:1px solid #9daec3; border-radius:6px; }
.guide-links { margin:40px 0; }
.guide-links .cards { margin-top:20px; }
@media(max-width:800px) { .header-top { display:grid; grid-template-columns:1fr auto; gap:10px; } .selection-header { grid-column:1 / -1; grid-row:2; } .mobile-menu { grid-column:2; grid-row:1; } }
@media(max-width:679px) { .enough-grid { grid-template-columns:1fr; } .product-detail { padding:18px; } .selection-header { justify-content:flex-end; } }
@media(prefers-reduced-motion:reduce) { .product-card { transition:none; } }

.home-hero { display: block; padding: 48px 0 32px; max-width: 960px; }
.home-hero h1 { font-size: clamp(2rem,4.2vw,3.4rem); line-height: 1.4; margin-bottom: 16px; letter-spacing: 0; }
.home-hero .lead { max-width: 760px; }
.hero-search { max-width: 760px; margin-top: 24px; }
.hero-search label { display: block; margin-bottom: 8px; font-weight: 700; }
.hero-search > div { display: flex; gap: 10px; }
.hero-search input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid #9aa9bd; background: white; border-radius: 8px; color: var(--ink); }
.home-navi { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px 24px; margin-top: 28px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.home-navi p { margin: 4px 0 0; font-size: .875rem; color: var(--muted); }
.category-grid { gap: 14px; }
.category { background: white; }
.category p { margin-block: 8px; }
.comparison-card { background: white; border-top: 4px solid var(--blue); }
.comparison-card .card-body { padding: 24px; }
.guide-label { color: var(--blue); font-size: .8125rem; font-weight: 750; }
.comparison-card .read { margin-top: auto; }
.article-heading { max-width: none; padding-top: 26px; }
.article-heading h1 { max-width: 1000px; }
.article-heading .takeaway { margin-bottom: 20px; max-width: 1000px; border-radius: 0 10px 10px 0; }
.article-preview { padding: 24px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.article-preview .audience { gap: 24px; }
.article-preview .audience > div { border-left-color: var(--blue); min-width: 0; }
.article-preview h2 { font-size: 1.15rem; margin-bottom: 8px; }
.article-preview p:last-child, .article-preview ul:last-child { margin-bottom: 0; }
.article-preview ul { padding-left: 1.25em; margin-top: 0; }
.article-preview li + li { margin-top: 8px; }
.article-layout { gap: 32px; }
.product-jumps { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.product-sale, .product-price { font-size:.78rem; line-height:1.65; margin:0; color:var(--muted); overflow-wrap:anywhere; }
.product-sale.is-announced, .product-sale.is-preorder { padding:8px; background:#fff5df; color:#674816; border:1px solid #e9d3a4; border-radius:6px; }
.expanded-comparison th:not(:first-child), .expanded-comparison td { min-width:230px; max-width:320px; overflow-wrap:anywhere; }
.expanded-comparison th:first-child { min-width:130px; }
@media (min-width:1024px) { .cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.product-jumps ul { padding-left: 1.25em; }
.product-jumps p { margin-bottom: 8px; }
.article-layout > .prose { background: white; padding: 28px 32px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.card-body .card-purpose { color: var(--blue); }
.policy-banner { margin-top: 56px; }
.selection-dialog button:not(.button) { min-height: 42px; padding: 7px 12px; border: 1px solid #bdcce2; border-radius: 7px; background: white; color: var(--blue); cursor: pointer; }
.selection-dialog button[aria-pressed="true"] { background: var(--soft); border-color: var(--blue); }
.selection-dialog button:disabled { opacity: .6; cursor: default; }
@media (max-width: 679px) {
  .home-hero { padding-top: 28px; }
  .home-navi { padding: 18px; }
  .home-navi .button { width: 100%; }
  .hero-search > div { flex-wrap: wrap; }
  .hero-search input { flex-basis: 180px; }
  .article-preview { padding: 20px; }
  .article-layout > .prose { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { .home-navi, .comparison-card { transition: none; } }

.product-media{aspect-ratio:4/3;min-height:0;box-sizing:border-box;margin:0;overflow:hidden}
.product-media-photo{position:relative;padding:18px;background:white;display:flex;flex-direction:column;gap:4px}
.product-media img{width:100%;height:100%;min-height:0;object-fit:contain;flex:1}
.product-media figcaption{font-size:.7rem;color:#526174;line-height:1.4;flex:none}
.article-product-image{max-width:600px;margin:24px auto}
.selection-saved-list .product-media{max-width:240px}
.selection-comparison-table .product-media{max-width:220px}