/* Shared Articles / News typography, headings, metadata and article panel. */
body:is(.articles-page,.news-page){padding-top:var(--static-header-height,70px);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;font-size:14px;font-weight:400;line-height:1.75;letter-spacing:.035em;color:#55565c}
:is(.articles-page,.news-page) .editorial-main{width:min(1037px,calc(100% - 48px));padding:44px 0 64px}
:is(.articles-page,.news-page) .page-heading h1{flex-wrap:wrap;align-items:center;gap:18px;margin:0 0 28px;font:300 30px/1.3 "Avenir Next","Century Gothic","Segoe UI Light",sans-serif;letter-spacing:.08em;color:#597b86}
:is(.articles-page,.news-page) .page-heading em{font:300 italic 43px/1.12 "Avenir Next","Century Gothic","Segoe UI Light",sans-serif;letter-spacing:.085em}
:is(.articles-page,.news-page) .page-heading small{font:400 18px/1 "Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;letter-spacing:.12em}
:is(.articles-page,.news-page) .article-document{max-width:none}
:is(.articles-page,.news-page) .breadcrumbs{flex-wrap:wrap;color:#64777d;margin-bottom:24px}
:is(.articles-page,.news-page) .article-header,:is(.articles-page,.news-page) .article-body h3,:is(.articles-page,.news-page) .back-link{border-color:#c9d7db}
:is(.articles-page,.news-page) .article-meta time{font-family:"Roboto",Arial,sans-serif;font-size:20px;font-weight:500;line-height:1;letter-spacing:normal;font-variant-numeric:normal;font-kerning:auto;font-feature-settings:normal;color:#98c5cc}
:is(.articles-page,.news-page) .article-header h2{font:300 26px/1.4 "Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;letter-spacing:.075em;margin:12px 0 0;overflow-wrap:anywhere}
:is(.articles-page,.news-page) .article-body h3{font:300 21px/1.4 "Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;letter-spacing:.075em;margin:38px 0 24px;padding-bottom:12px}
:is(.articles-page,.news-page) .article-body h4{font-family:inherit;font-size:18px;font-weight:400;line-height:1.4;letter-spacing:.035em;margin:28px 0 18px}
:is(.articles-page,.news-page) .article-body p{margin:18px 0}
:is(.articles-page,.news-page) .article-body ul,:is(.articles-page,.news-page) .article-body ol{padding-left:24px;margin:18px 0}
:is(.articles-page,.news-page) .article-body li{margin:6px 0}
:is(.articles-page,.news-page) .article-body :is(h3,h4,[id]){scroll-margin-top:calc(var(--static-header-height,70px) + 24px)}
:is(.articles-page,.news-page) .article-body img{max-width:100%;height:auto!important}
:is(.articles-page,.news-page) .article-body figure{max-width:100%;margin:24px 0;overflow-x:auto}
:is(.articles-page,.news-page) .article-body pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
:is(.articles-page,.news-page) .article-body figcaption{font-size:13px;line-height:1.6;color:#64777d}
:is(.articles-page,.news-page) a:focus-visible{outline:2px solid #78b9c5;outline-offset:3px}
@media(max-width:767px){
 :is(.articles-page,.news-page) .editorial-main{width:calc(100% - 40px);padding-top:28px}
 :is(.articles-page,.news-page) .page-heading h1{gap:11px}
 :is(.articles-page,.news-page) .page-heading em{font-size:32px}
 :is(.articles-page,.news-page) .page-heading small{font-size:14px}
 :is(.articles-page,.news-page) .article-header h2{font-size:23px}
 :is(.articles-page,.news-page) .article-body h4{font-size:16px}
}

/* A paper-like article panel, independent of the Download navigation. */
:is(.articles-page,.news-page) .article-document{padding:18px;border:1px solid #c9d7db;border-radius:3px;background:rgba(248,251,252,.8)}
:is(.articles-page,.news-page) .article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
:is(.articles-page,.news-page) .article-category{display:inline-flex;align-items:center;justify-content:center;width:154px;height:28px;flex:none;padding:2px 16px;border:1px solid color-mix(in srgb,#78c7d4 72%,#52616a);border-radius:3px;background:#78c7d4;color:white;font-size:17px;font-weight:400;line-height:1;letter-spacing:.09em}
@media(max-width:767px){:is(.articles-page,.news-page) .article-document{padding:18px}:is(.articles-page,.news-page) .editorial-main{width:calc(100% - 24px)}:is(.articles-page,.news-page) .page-heading{padding-inline:8px}}

:is(.articles-page,.news-page) .article-body{padding-top:40px}:is(.articles-page,.news-page) .article-body>:first-child{margin-top:0}:is(.articles-page,.news-page) .article-body>:last-child{margin-bottom:0}

@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/roboto-500.ttf") format("truetype")}
:is(.articles-page,.news-page) .editorial-main{width:90%;max-width:1680px;padding:44px 15px 64px}
:is(.articles-page,.news-page) .page-heading h1{font-size:43px;line-height:1.12;letter-spacing:.085em;color:color-mix(in srgb,#79c9d6 88%,#777)}
:is(.articles-page,.news-page) .article-document{max-width:1037px;margin-inline:auto;padding:47px 60px}
@media(min-width:1800px){:is(.articles-page,.news-page) .editorial-main{max-width:1760px}}
@media(max-width:1023px){:is(.articles-page,.news-page) .editorial-main{max-width:920px;padding:34px 32px 64px}:is(.articles-page,.news-page) .page-heading h1,:is(.articles-page,.news-page) .page-heading em{font-size:36px}}
@media(max-width:767px){:is(.articles-page,.news-page) .editorial-main{width:100%;padding:28px 20px 64px}:is(.articles-page,.news-page) .page-heading{padding:0}:is(.articles-page,.news-page) .page-heading h1,:is(.articles-page,.news-page) .page-heading em{font-size:30px}:is(.articles-page,.news-page) .article-document{padding:24px 18px}}

:is(.articles-page,.news-page) .article-header h2{margin-top:17px}
@media(max-width:767px){:is(.articles-page,.news-page) .article-category{width:124px;height:26px;font-size:16px}:is(.articles-page,.news-page) .article-meta{gap:10px}:is(.articles-page,.news-page) .article-meta time{font-size:16px}:is(.articles-page,.news-page) .article-header h2{margin-top:10px}:is(.articles-page,.news-page) .article-body{padding-top:31px}}

:is(.articles-page,.news-page) .article-category{border-radius:6px}

:is(.articles-page,.news-page) .article-header h2{font-weight:400}


:is(.articles-page,.news-page) .article-category{opacity:.8}
:is(.articles-page,.news-page) .article-body>:not(h3):not(h4){margin-left:24px}
@media(max-width:767px){:is(.articles-page,.news-page) .article-body>:not(h3):not(h4){margin-left:16px}}
