:root {
  --medical-pink: #e8577d;
  --medical-pink-deep: #a92f55;
  --medical-pink-dark: #812241;
  --medical-pink-pale: #fff0f4;
  --medical-pink-tint: #fff8fa;
  --medical-ink: #292529;
  --medical-body: #363036;
  --medical-muted: #746a70;
  --medical-line: #ead8df;
  --medical-shadow: 4px 4px 0 var(--medical-ink);
  --font-medical: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}

html { color-scheme: light; }

body {
  color: var(--medical-body);
  background: var(--medical-pink-tint);
  font-family: var(--font-medical);
  font-feature-settings: "palt" 1;
  letter-spacing: .018em;
  line-break: strict;
  word-break: normal;
}

h1, h2, h3, h4,
.sect-title h2,
.article-main h1,
.article-main h2,
.article-main h3,
.source-main h1,
.source-main h2,
.source-main h3 {
  color: var(--medical-ink);
  font-family: var(--font-medical);
  font-weight: 800;
  letter-spacing: .01em;
  text-wrap: balance;
}

a { text-underline-offset: .22em; }

/* Brand and navigation: friendly, but still appropriate for medical content. */
.head .logo span,
.article-header a,
header > a,
footer > div > a {
  color: var(--medical-pink-dark);
  font-family: var(--font-medical);
  font-weight: 800;
  letter-spacing: .045em;
}

.ad,
.article-tag,
.source-guides label,
.articles label,
.article-index-card span {
  color: var(--medical-pink-dark);
}

/* Home: retain the existing structure while giving it the Atsumekata rhythm. */
.hero,
.soft,
.latest { background: var(--medical-pink-pale); }

.hero h1 em,
.mini,
.sect-title > span,
.section-en,
.card-label { color: var(--medical-pink-deep); }

.articles article,
.rank-list > a,
.article-index-card,
.source-guides article,
.rank-card {
  background: #fff;
  border: 2px solid var(--medical-ink);
  border-radius: 9px;
  box-shadow: var(--medical-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}

.articles article:hover,
.rank-list > a:hover,
.article-index-card:hover,
.source-guides article:hover,
.rank-card:hover {
  box-shadow: 1px 1px 0 var(--medical-ink);
  transform: translate(3px, 3px);
}

.articles .thumb,
.article-index-card img,
.source-guides article > img,
.rank-card img { border-bottom-color: var(--medical-ink); }

/* Articles: clear scan points, restrained pink surfaces, readable long-form text. */
.article-header { border-bottom-color: var(--medical-line); }

.article-main {
  border: 2px solid var(--medical-ink);
  border-radius: 10px;
  box-shadow: var(--medical-shadow);
}

.article-tag {
  background: #f8bfd0;
  border: 2px solid var(--medical-ink);
  border-radius: 5px;
  font-weight: 800;
}

.article-main h1 { font-weight: 800; }

.article-main h2 {
  background: var(--medical-pink-pale);
  border-left-color: var(--medical-pink-deep);
  border-radius: 0 8px 8px 0;
}

.article-main h3 {
  padding-bottom: 8px;
  border-bottom: 2px solid #f2b6c8;
}

.article-main p,
.article-main li {
  color: var(--medical-body);
  font-family: var(--font-medical);
  line-height: 2;
}

.article-lead,
.answer-box,
.side-disclosure,
.compare-table th { background: var(--medical-pink-pale); }

.answer-box { border-color: #e59ab1; }
.answer-box b { color: var(--medical-pink-dark); }

.article-main a,
.side-box p,
.article-index-card span { color: var(--medical-pink-dark); }

.compare-table th,
.compare-table td,
.faq details,
.related a,
.side-box { border-color: var(--medical-line); }

.article-footer { background: #4b3941; }

@media (max-width: 800px) {
  body { letter-spacing: .012em; }
  .article-main { box-shadow: 3px 3px 0 var(--medical-ink); }
  .article-main h1 { font-size: 25px; line-height: 1.5; }
  .article-main h2 { font-size: 20px; line-height: 1.55; }
  .article-main p,
  .article-main li { font-size: 16px; line-height: 1.95; }
}

/* Site-wide readable pink refinement */
body{background:#fffafb;color:#352b30}
.site-header,header{background:#fff;border-bottom-color:#ead8df}
.gnav a,.head nav a{color:#4b3d43}
.gnav a:hover,.head nav a:hover{color:#9d3159}
.hero,.latest,.soft,.category-hero,.articles-hero{background:#fff4f7}
.articles article,.rank-list>a,.article-index-card,.source-guides article,.rank-card,.card,.hero-card,.search-box{border-color:#ead8df;box-shadow:0 8px 24px rgba(129,34,65,.08)}
.articles article:hover,.rank-list>a:hover,.article-index-card:hover,.source-guides article:hover,.rank-card:hover{box-shadow:0 10px 26px rgba(129,34,65,.13);transform:translateY(-2px)}
.button,.selects>a,.clinic-link,.clinic-demo-button{color:#fff;background:#ad315d}
.button:hover,.selects>a:hover,.clinic-link:hover,.clinic-demo-button:hover{color:#fff;background:#812241}
.policy{color:#fff;background:#9d3159}
.article-main{border:1px solid #ead8df;box-shadow:0 10px 30px rgba(53,43,48,.06)}
.article-tag{color:#fff;background:#e7789a;border:0}
.article-main h2{color:#812241;background:#fff0f4;border-left-color:#e7789a}
.article-main h3{color:#812241;border-bottom-color:#efc8d4}
.article-lead,.answer-box,.side-disclosure,.compare-table th{background:#fff8fa}
.answer-box{border-color:#e7a7bb}
.article-footer,.mega-footer,footer{color:#f8edf1;background:#40343a}
@media(max-width:800px){.article-main{box-shadow:none}}

/* Site-wide article readability floor — 2026-09-03 */
.article-main {
  font-size: 17px;
}

.article-main :is(p, li, dd, figcaption) {
  line-break: strict;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: pretty;
}

.article-main :is(h1, h2, h3, h4, summary) {
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.article-main :is(.article-body, .article-content, .content-pad) :is(p, li, dd),
.article-main > p,
.article-main > ul > li,
.article-main > ol > li,
.article-main .article-editorial-depth > p,
.article-main .article-decision-faq dd,
.article-main .article-takeaway-note > p {
  font-size: 17px;
  line-height: 2;
}

.article-main table :is(th, td) {
  font-size: 15.5px;
  line-height: 1.75;
}

.article-main :is(.faq, .article-qa, .article-decision-faq) summary {
  font-size: 16px;
  line-height: 1.7;
}

.article-main figcaption,
.article-main .caption,
.article-main .article-sources .caption {
  font-size: 14px;
  line-height: 1.75;
}

.article-main .article-sources li {
  font-size: 15.5px;
  line-height: 1.8;
}

.article-side-toc > a,
.article-side-themes > a {
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 800px) {
  .article-main {
    font-size: 16px;
  }

  .article-main :is(.article-body, .article-content, .content-pad) :is(p, li, dd),
  .article-main > p,
  .article-main > ul > li,
  .article-main > ol > li,
  .article-main .article-editorial-depth > p,
  .article-main .article-decision-faq dd,
  .article-main .article-takeaway-note > p {
    font-size: 16px;
    line-height: 1.95;
  }

  .article-main table :is(th, td) {
    font-size: 15px;
    line-height: 1.75;
  }

  .article-main .article-sources li {
    font-size: 15px;
  }
}