.article-page main { padding-bottom: 128px; }
.article-breadcrumbs { width: min(100% - (var(--gutter) * 2), var(--content-width)); margin: 24px auto 0; display: flex; flex-wrap: wrap; gap: 10px; color: var(--color-muted); font-family: var(--font-en); font-size: 8px; letter-spacing: .12em; }
.article-breadcrumbs a { text-decoration: none; }
.article-header { width: min(100% - (var(--gutter) * 2), var(--content-width)); margin: 0 auto; padding-top: 74px; }
.article-header-copy { width: min(100%, 920px); margin: 0 auto; text-align: center; }
.article-kicker { margin: 0; color: var(--color-rose-dark); font-family: var(--font-en); font-size: 10px; letter-spacing: .16em; }
.article-header h1 { margin: 28px auto 0; font-size: clamp(34px, 4.1vw, 54px); font-weight: 500; line-height: 1.52; letter-spacing: .015em; }
.article-meta-row { margin-top: 26px; display: flex; justify-content: center; align-items: center; gap: 22px; color: var(--color-muted); font-family: var(--font-en); font-size: 9px; letter-spacing: .12em; }
.article-meta-row span + span { padding-left: 22px; border-left: 1px solid var(--color-line); }
.article-lead { width: min(100%, 650px); margin: 30px auto 0; color: #625d5a; font-size: 14px; line-height: 2.15; text-align: left; }
.article-hero-image { margin: 58px 0 0; overflow: hidden; }
.article-hero-image img { width: 100%; height: auto; aspect-ratio: 2.1; display: block; object-fit: cover; object-position: center 48%; }
.article-content { width: min(100% - (var(--gutter) * 2), 760px); margin: 92px auto 0; }
.article-toc { padding: 34px 38px 32px; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-line); background: #faf7f5; }
.article-toc-heading { display: flex; align-items: baseline; gap: 18px; }
.article-toc-heading p { margin: 0; color: var(--color-rose-dark); font-size: 20px; font-weight: 400; letter-spacing: .02em; }
.article-toc-heading h2 { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.article-toc ol { margin: 25px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 34px; list-style: none; counter-reset: toc; }
.article-toc li { counter-increment: toc; display: grid; grid-template-columns: 24px 1fr; gap: 8px; color: #5f5a57; font-size: 12px; line-height: 1.8; }
.article-toc li::before { color: var(--color-rose-dark); font-family: var(--font-en); font-size: 9px; content: "0" counter(toc); }
.article-toc a { text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.article-toc a:hover, .article-toc a:focus-visible { text-decoration-color: currentColor; }
.article-chapter { margin-top: 96px; }
.article-chapter > header { padding-bottom: 24px; display: grid; grid-template-columns: 46px 1fr; gap: 20px; align-items: start; border-bottom: 1px solid var(--color-ink); }
.article-chapter > header span { padding-top: 9px; color: var(--color-rose-dark); font-size: 11px; letter-spacing: .12em; }
.article-chapter h2 { margin: 0; font-size: clamp(26px, 3.1vw, 38px); font-weight: 500; line-height: 1.6; letter-spacing: .02em; }
.article-chapter > p { margin: 34px 0 0; font-size: 15px; line-height: 2.2; }
.article-chapter > p + p { margin-top: 24px; }
.article-note { margin-top: 42px; padding: 26px 30px; border-left: 2px solid var(--color-rose); background: #faf7f5; }
.article-note p { margin: 0; }
.article-note p:first-child { margin-bottom: 10px; color: var(--color-rose-dark); font-family: var(--font-en); font-size: 10px; letter-spacing: .16em; }
.article-note p:last-child { color: #5f5a57; font-size: 13px; line-height: 2; }
.pore-type-list { margin-top: 46px; border-top: 1px solid var(--color-line); }
.pore-type { padding: 30px 0; display: grid; grid-template-columns: 116px 1fr; gap: 28px; border-bottom: 1px solid var(--color-line); }
.pore-type > p { margin: 5px 0 0; color: var(--color-rose-dark); font-family: var(--font-en); font-size: 10px; letter-spacing: .15em; }
.pore-type h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: .06em; }
.pore-type div > p { margin: 12px 0 0; color: #625d5a; font-size: 13px; line-height: 2; }
.article-inline-image { margin: 46px 0 0; }
.article-inline-image img { width: 100%; height: auto; aspect-ratio: 1.9; display: block; object-fit: cover; }
.article-inline-image figcaption { margin-top: 10px; color: var(--color-muted); font-size: 10px; line-height: 1.7; }
.care-step-list { margin: 46px 0 0; padding: 0; border-top: 1px solid var(--color-line); list-style: none; }
.care-step-list li { padding: 30px 0; display: grid; grid-template-columns: 116px 1fr; gap: 28px; border-bottom: 1px solid var(--color-line); }
.care-step-list > li > span { margin-top: 5px; color: var(--color-rose-dark); font-size: 10px; letter-spacing: .15em; }
.care-step-list h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: .04em; }
.care-step-list p { margin: 12px 0 0; color: #625d5a; font-size: 13px; line-height: 2; }
.care-choice-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-line); }
.care-choice-grid > section { padding: 30px 30px 32px 0; }
.care-choice-grid > section + section { padding-right: 0; padding-left: 30px; border-left: 1px solid var(--color-line); }
.care-choice-grid section > p { margin: 0; color: var(--color-rose-dark); font-size: 10px; letter-spacing: .14em; }
.care-choice-grid h3 { margin: 14px 0 0; font-size: 18px; font-weight: 500; line-height: 1.7; }
.care-choice-grid ul { margin: 20px 0 0; padding: 0; list-style: none; }
.care-choice-grid li { padding-left: 16px; position: relative; color: #625d5a; font-size: 12px; line-height: 2; }
.care-choice-grid li::before { position: absolute; top: .9em; left: 0; width: 5px; height: 5px; border: 1px solid var(--color-rose); border-radius: 50%; content: ""; }
.clinic-guide-box { margin-top: 48px; padding: 34px 36px; display: grid; grid-template-columns: 1fr 220px; gap: 40px; align-items: end; background: #f3e5e3; }
.clinic-guide-box p { margin: 0; }
.clinic-guide-box div > p:first-child { color: var(--color-rose-dark); font-family: var(--font-en); font-size: 10px; letter-spacing: .16em; }
.clinic-guide-box h3 { margin: 14px 0 12px; font-size: 23px; font-weight: 500; line-height: 1.65; }
.clinic-guide-box div > p:last-child { color: #625d5a; font-size: 12px; line-height: 1.9; }
.clinic-guide-box a { min-height: 52px; padding: 0 4px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-ink); border-bottom: 1px solid rgba(51,51,51,.25); font-size: 11px; text-decoration: none; }
.article-closing { width: min(100% - (var(--gutter) * 2), var(--content-width)); margin: 126px auto 0; }
.article-summary { width: min(100%, 760px); margin: 0 auto; padding: 52px 58px; background: #faf7f5; text-align: center; }
.article-summary > p:first-child { margin: 0; color: var(--color-rose-dark); font-family: var(--font-en); font-size: 11px; letter-spacing: .18em; }
.article-summary h2 { margin: 20px 0 24px; font-size: 29px; font-weight: 500; line-height: 1.65; }
.article-summary > p:not(:first-child) { margin: 0; color: #625d5a; font-size: 13px; line-height: 2.1; text-align: left; }
.article-summary > p + p { margin-top: 18px; }
.article-author { width: min(100%, 760px); margin: 42px auto 0; padding: 30px 0; display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: center; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.author-mark { width: 72px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--color-ink); color: #fff; font-family: var(--font-en); font-size: 16px; letter-spacing: .08em; }
.article-author img.author-mark { display: block; height: auto; object-fit: cover; background: #fff; }
.article-author p, .article-author h2 { margin: 0; }
.article-author div > p:first-child { color: var(--color-rose-dark); font-family: var(--font-en); font-size: 9px; letter-spacing: .16em; }
.article-author h2 { margin-top: 8px; font-size: 16px; font-weight: 500; }
.article-author div > p:last-child { margin-top: 9px; color: var(--color-muted); font-size: 11px; line-height: 1.9; }
.article-author .author-profile-link { display: inline-block; margin-top: 11px; color: var(--color-rose-dark); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.related-articles { margin-top: 116px; }
.related-articles > header { padding-bottom: 22px; display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--color-ink); }
.related-articles header p, .related-articles header h2 { margin: 0; }
.related-articles header p { font-size: clamp(34px, 4.5vw, 56px); line-height: .95; letter-spacing: -.03em; }
.related-articles header h2 { margin-top: 10px; color: var(--color-rose-dark); font-size: 12px; font-weight: 500; }
.related-articles header > a { min-height: 44px; display: inline-flex; align-items: center; gap: 38px; border-bottom: 1px solid var(--color-ink); font-size: 11px; text-decoration: none; }
.related-grid { margin-top: 38px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.related-image { display: block; overflow: hidden; }
.related-image img { width: 100%; height: auto; aspect-ratio: 1.55; display: block; object-fit: cover; transition: transform .6s ease; }
.related-image:hover img { transform: scale(1.025); }
.related-grid article > p { margin: 15px 0 0; color: var(--color-rose-dark); font-size: 9px; letter-spacing: .12em; }
.related-grid h3 { margin: 12px 0 0; font-size: 16px; font-weight: 500; line-height: 1.8; }
.related-grid h3 a { text-decoration: none; }

@media (max-width: 767px) {
  .article-page main { padding-bottom: 90px; }
  .article-breadcrumbs { margin-top: 18px; }
  .article-breadcrumbs span:last-child { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .article-header { padding-top: 50px; }
  .article-header h1 { margin-top: 22px; font-size: clamp(28px, 8.8vw, 38px); line-height: 1.55; }
  .article-meta-row { margin-top: 22px; gap: 14px; }
  .article-meta-row span + span { padding-left: 14px; }
  .article-lead { margin-top: 26px; font-size: 13px; line-height: 2; }
  .article-hero-image { margin-top: 38px; }
  .article-hero-image img { aspect-ratio: 1.42; }
  .article-content { margin-top: 64px; }
  .article-toc { padding: 26px 22px 24px; }
  .article-toc-heading { display: block; }
  .article-toc-heading p { font-size: 18px; }
  .article-toc-heading h2 { margin-top: 7px; }
  .article-toc ol { margin-top: 20px; grid-template-columns: 1fr; gap: 10px; }
  .article-chapter { margin-top: 68px; }
  .article-chapter > header { grid-template-columns: 32px 1fr; gap: 10px; }
  .article-chapter > header span { padding-top: 7px; }
  .article-chapter h2 { font-size: clamp(24px, 7.2vw, 30px); }
  .article-chapter > p { margin-top: 28px; font-size: 14px; line-height: 2.15; }
  .article-note { margin-top: 34px; padding: 22px 20px; }
  .pore-type-list { margin-top: 36px; }
  .pore-type { padding: 24px 0; grid-template-columns: 1fr; gap: 9px; }
  .pore-type > p { margin-top: 0; }
  .pore-type h3 { font-size: 18px; }
  .pore-type div > p { margin-top: 9px; font-size: 12px; }
  .article-inline-image { margin-top: 36px; }
  .article-inline-image img { aspect-ratio: 1.5; }
  .care-step-list { margin-top: 36px; }
  .care-step-list li { padding: 24px 0; grid-template-columns: 1fr; gap: 9px; }
  .care-step-list > li > span { margin-top: 0; }
  .care-step-list h3 { font-size: 18px; }
  .care-step-list p { margin-top: 9px; font-size: 12px; }
  .care-choice-grid { margin-top: 36px; grid-template-columns: 1fr; }
  .care-choice-grid > section { padding: 24px 0; }
  .care-choice-grid > section + section { padding: 24px 0; border-top: 1px solid var(--color-line); border-left: 0; }
  .care-choice-grid h3 { font-size: 17px; }
  .clinic-guide-box { margin-top: 38px; padding: 28px 22px; grid-template-columns: 1fr; gap: 26px; }
  .clinic-guide-box h3 { font-size: 20px; }
  .article-closing { margin-top: 88px; }
  .article-summary { padding: 38px 24px; }
  .article-summary h2 { font-size: 24px; }
  .article-summary > p:not(:first-child) { font-size: 12px; }
  .article-author { grid-template-columns: 58px 1fr; gap: 18px; }
  .author-mark { width: 58px; }
  .related-articles { margin-top: 82px; }
  .related-articles > header { align-items: start; }
  .related-articles header p { font-size: clamp(31px, 10vw, 42px); }
  .related-articles header > a { gap: 14px; font-size: 10px; }
  .related-grid { margin-top: 30px; grid-template-columns: 1fr; gap: 42px; }
  .related-image img { aspect-ratio: 1.5; }
}