/* Shared comparison-portal presentation. Article typography stays at 16px. */
:root {
  --blue: #176a9f;
  --navy: #1e3c80;
  --line: #d4d6dc;
  --pale: #f0f1f4;
  --sans: Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.site-header { border-top-width: 5px; }
.utility { padding: 4px 0; }
.masthead { min-height: 66px; }
.brand { letter-spacing: -.045em; }
.brand-mark { background: #e8892a; border-radius: 2px; }
.nav { border: 1px solid #c7cbd2; border-bottom: 3px solid #294987; border-top: 1px solid #c7cbd2; background: #f4f5f7; }
.nav a { padding: 8px 7px; color: #24467c; }
.nav a.active { background: #e8edf6; color: #1d3979; box-shadow: inset 0 3px #294987; }
.nav a.active:hover { background: #dfe7f3; }
.page-main { padding-top: 16px; }
.site-columns { grid-template-columns: 212px minmax(0,1fr); gap: 18px; }
.side-box { border-radius: 3px; border-color: #d9dade; }
.side-box h2 { background: #e6e7eb; color: #1b436a; padding: 7px 10px; border-bottom: 0; }
.side-box a { padding: 9px 10px; }
.side-box li+li { border-color: #e7e7e7; }
.page-heading { border-left: 0; border-top: 1px solid #e3e4e7; border-bottom: 2px solid #d6d8dd; background: #f3f3f5; padding: 10px 13px; }
.page-heading h1 { color: #333; }
.box-heading,.section-head { background: #edeef2; border: 1px solid #d9dbe1; border-radius: 3px 3px 0 0; padding: 9px 13px; color: #174776; }
.section-head h2,.box-heading { font-size: 1.1875rem; }
.section-head { margin-bottom: 0; }
.portal-panel { border: 1px solid #d9dbe1; border-radius: 3px; background: #edeef2; overflow: hidden; }
.portal-panel>.box-heading,.portal-panel>.section-head { border: 0; border-bottom: 1px solid #e1e2e6; }
.portal-hero { display: grid; grid-template-columns: minmax(0,1fr) 355px; align-items: center; min-height: 214px; border: 1px solid #caccd4; box-shadow: inset 0 0 0 4px #f0f0f4; background: #fff; padding: 24px 30px; margin-bottom: 20px; overflow: hidden; }
.hero-kicker { color: #253e76; font-size: 1rem; font-weight: 700; }
.portal-hero h1 { color: #283d85; font-size: clamp(1.9rem,3.6vw,2.8rem); letter-spacing: -.055em; line-height: 1.5; white-space: nowrap; margin: 1px 0 4px; }
.portal-hero h1>span { background: #354b93; color: #fff; padding: 0 5px 2px; margin-left: 7px; }
.hero-description { font-size: .9375rem; font-weight: 700; color: #454545; }
.hero-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.hero-links a { font-size: .8125rem; font-weight: 700; color: #314c79; background: #eceef4; padding: 3px 8px; border-bottom: 1px solid #d5d9e3; }
.hero-links a:last-child { background: white; }
.hero-cards { position: relative; height: 162px; margin-left: 10px; }
.hero-cards img { position: absolute; width: 173px; height: 110px; object-fit: contain; }
.hero-cards img:nth-child(1) { top: 4px; left: 3px; transform: rotate(-12deg); }
.hero-cards img:nth-child(2) { top: 4px; right: -4px; transform: rotate(11deg); }
.hero-cards img:nth-child(3) { bottom: -8px; left: 82px; transform: rotate(-3deg); }
.category-links { background: #edeef2; border: 0; gap: 6px; padding: 7px; }
.category-links>a { min-height: 76px; border-color: #e0e1e4; padding: 8px 9px; gap: 10px; }
.category-links strong { font-size: 1rem; }
.category-links small { margin-top: 3px; color: #454545; font-size: .8125rem; }
.purpose-icon { flex: 0 0 45px; width: 45px; height: 45px; }
.news-box { display: block; background: #f0f1f4; padding: 7px; border-color: #d9dbe1; margin-bottom: 18px; }
.news-box h2 { background: transparent; font-size: 1.0625rem; padding: 1px 5px 7px; color: #174776; }
.news-box ul { padding: 3px 12px; background: white; border: 1px solid #e0e1e5; border-radius: 2px; }
.news-box li { padding: 8px 0; }
.news-box li+li { border-top: 1px solid #ececec; }
.featured-section { margin-top: 20px; }
.featured-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 7px; background: #fff; border: 1px solid #dedfe4; border-radius: 2px; }
.featured-card { min-width: 0; display: flex; flex-direction: column; padding: 13px 10px 10px; text-align: center; }
.featured-card+.featured-card { border-left: 1px solid #e1e1e1; }
.featured-label { font-size: .75rem; line-height: 1.5; color: #555; min-height: 18px; }
.featured-card-link { display: block; }
.featured-card-link img { display: block; width: 100%; height: 92px; object-fit: contain; margin: 9px auto; }
.featured-card h3 { font-size: .9375rem; line-height: 1.5; min-height: 45px; }
.featured-fee { font-size: .75rem; line-height: 1.65; margin: 8px 0 10px; }
.featured-fee strong { display: block; color: #b74321; font-size: .8125rem; }
.featured-detail { margin-top: auto; display: block; padding: 5px; border: 1px solid #c0cbd7; border-radius: 2px; font-size: .8125rem; background: #f7f9fb; }
.featured-compare { text-align: right; font-size: .8125rem; padding: 3px 12px 10px; }
.finder { background: #f7f7f9; border-color: #d9dbe1; border-top: 0; border-radius: 0 0 3px 3px; padding: 14px; }
.chip { border-color: #c7cdd5; border-radius: 2px; }
.chip[aria-pressed=true],.chip[aria-current=page] { background: #2877ab; border-color: #2877ab; }
.results-heading { border-bottom: 2px solid #a6bacb; }
.catalog { gap: 17px; margin-top: 0; }
.product { border-color: #c9d3dc; border-radius: 0 0 3px 3px; }
.product-heading { background: #eef3f8; padding: 9px 13px; }
.product h3 { font-size: 1.125rem; }
.product-specs dt { background: #f2f2f4; color: #555; }
.product-bottom { background: #f7f8fa; }
.detail-button { border-color: #a7bdd1; border-radius: 2px; background: #f9fbfd; }
.editorial-grid { gap: 0; border: 1px solid #d9dbe1; border-top: 0; }
.editorial { border: 0; border-radius: 0; padding: 14px; }
.editorial+.editorial { border-left: 1px solid #dedfe4; }
.reading h2 { border-left: 0; border-top: 1px solid #dadce1; border-bottom: 2px solid #d5d9e2; background: #edeff3; color: #224e77; padding: 10px 13px; }
.reading h3 { padding-bottom: 6px; border-bottom: 1px solid #ddd; }
.reading p { font-size: 1rem; }
.reading .info-box { border-radius: 2px; }
.article-heading { border-top: 3px solid #375b87; background: #f3f4f6; padding: 14px 16px; }
.article-category { color: #666; }
.footer { border-top: 2px solid #a7b7ce; }
@media (max-width: 1000px) {
  .site-columns { grid-template-columns: 180px minmax(0,1fr); gap: 16px; }
  .portal-hero { grid-template-columns: minmax(0,1fr) 270px; padding: 20px; }
  .hero-cards img { width: 143px; height: 95px; }
  .hero-cards img:nth-child(3) { left: 58px; bottom: 0; }
  .purpose-icon { flex-basis: 36px; width: 36px; height: 36px; }
  .category-links strong { font-size: .9375rem; }
  .featured-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .featured-card:nth-child(3) { border-left: 0; }
  .featured-card:nth-child(n+3) { border-top: 1px solid #e1e1e1; }
  .featured-card-link img { height: 100px; }
  .editorial+.editorial { border-left: 0; border-top: 1px solid #dedfe4; }
}
@media (max-width: 720px) {
  .site-columns { display: block; }
  .masthead { min-height: 61px; }
  .nav a { padding: 8px 4px; }
  .nav a.active { box-shadow: inset 0 2px #294987; }
  .portal-hero { display: block; min-height: auto; padding: 17px 14px 13px; position: relative; }
  .hero-kicker { font-size: .8125rem; }
  .portal-hero h1 { font-size: clamp(1.35rem,6.6vw,2rem); margin: 3px 0; }
  .hero-description { font-size: .8125rem; }
  .hero-cards { height: 112px; width: 270px; margin: 17px auto 8px; }
  .hero-cards img { width: 135px; height: 85px; }
  .hero-cards img:nth-child(3) { left: 68px; bottom: -3px; }
  .hero-links { margin-top: 10px; gap: 5px; }
  .hero-links a { font-size: .75rem; padding: 3px 6px; }
  .box-heading,.section-head h2 { font-size: 1.0625rem; }
  .category-links { gap: 5px; padding: 5px; }
  .category-links>a { gap: 6px; padding: 9px 6px; min-height: 104px; }
  .category-links strong { font-size: .875rem; }
  .category-links small { font-size: .75rem; }
  .purpose-icon { width: 31px; height: 36px; flex-basis: 31px; }
  .news-box h2 { font-size: 1rem; }
  .news-box li { padding: 7px 0; }
  .featured-card { padding: 12px 8px 9px; }
  .featured-card-link img { height: 86px; }
  .featured-compare { text-align: left; line-height: 1.7; }
  .reading h2 { padding: 9px 10px; }
  .article-heading { padding: 11px 12px; }
}