:root{--new-main-color1:#0ba360;--main-color1:#0ba360;--new-main-color1-d:#05884f;--new-main-color1-l:#3cba92;--new-common-gray1:#e5e7eb;--new-common-gray2:#fafafa;--new-common-gray3:#374151;--new-common-gray4:#333;--new-common-gray5:#292929;--new-common-gray6:#1f2937;--new-common-gray7:#666;--new-common-gray8:#6b7280;--new-common-gray9:#4b5563;--new-common-gray10:#9ca3af}@media screen and (min-width:960px){body.body_new_blog.index_body_new_blog,body.body_new_blog.entry_body_new_blog{#header-spacer{height:var(--header--spacer-height_blog)}}}body.body_new_blog{color:#292929;font-family:'Noto Sans JP','Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','游ゴシック','Yu Gothic',YuGothic,'メイリオ',Meiryo,sans-serif;font-size:1.4rem;letter-spacing:.01em;line-height:1.6;div#admin_container_blog_top{width:100%;background:#fff;#adminBox,.acms-admin-box{margin-bottom:0}}background-image:url(../assets/images/dot.svg),url(../assets/images/dot-orange.svg),url(../assets/images/circle-green.svg),url(../assets/images/circle-orange.svg),linear-gradient(#fff 0%,rgb(245,245,247) 60%);.cta-title::before,.section-title::after,.sidebar-title::after{_background:url(../assets/images/stripe.svg) no-repeat;background:none}footer{margin-top:initial;.cta .column p{margin-bottom:20px}}.drawer-nav .btn-primary.btn-clear{background:initial!important;font-weight:initial!important;background-color:transparent!important;color:var(--main-color1)!important;border:initial!important}.top_search-container form:not(#entryForm):not(#js-module_form) input[type='text']{width:100%;padding:16px 60px 16px 20px;border:2px solid #e5e7eb;border-radius:30px;font-size:16px;outline:none;transition:border-color .3s;height:initial}@media (min-width:960px){section+section{margin-top:initial}}}@media screen and (max-width:959px){body.body_new_blog{.header-nav-wrap{position:sticky;top:0;z-index:200}}}@media screen and (max-width:767px){body.body_new_blog{.hero-title>img{width:70%;max-width:300px}.hero-subtitle{font-size:16px}}}@media screen and (max-width:480px){body.body_new_blog{.hero-title>img{width:72.5%}.hero-subtitle{font-size:14px}.search-filter-section{.search-container{padding:0}.top_search-container form:not(#entryForm):not(#js-module_form) input[type='text']{padding:15px 60px 15px 18px;font-size:14px}.search-btn{padding:0 25px;font-size:13px}}}}body.body_new_blog{.article-image.articles-page{_height:140px;width:200px;flex-shrink:0;font-size:16px;font-weight:500;border-radius:6px;margin:0;aspect-ratio:16 / 9;height:auto}.pagination span.cur{padding:10px 16px;border:2px solid #e5e7eb;background:linear-gradient(135deg,white 0%,rgb(249.9,249.9,249.9) 100%);color:#374151;text-decoration:none;border-radius:8px;transition:all .3s;background:linear-gradient(135deg,#0ba360 0%,rgb(10.0327586207,148.6672413793,87.5586206897) 100%);border-color:#0ba360;color:white}}body.body_new_blog{.main-content.single-page{h1.search-result-heading{line-height:1.4;margin:0 0 16px 0;_transition:all .4s ease;transition:initial;font-size:18px;font-weight:700;color:#1f2937}section#tag_wrap{padding-bottom:0}header.acms-page-header.page-header{margin-top:0;z-index:initial;background:initial;h2.entry-title.h2__tag{line-height:1.4;margin:0 0 16px 0;_transition:all .4s ease;transition:initial;font-size:18px;font-weight:700;color:#1f2937}}}}@media (max-width:1024px){body.body_new_blog{.article-image.articles-page{width:clamp(200px,25vw,250px)}}}@media (max-width:767px){body.body_new_blog{.article-image.articles-page{width:100%;_height:180px;border-radius:12px}}}body.body_new_blog{.breadcrumb-nav{top:var(--header-breadcrumb-height);display:flex;align-items:center;position:initial}@media screen and (min-width:960px){.breadcrumb-nav{height:52px}}.sidebar>.sticky-group{top:105px}.sidebar-section form:not(#entryForm):not(#js-module_form) input[type='text']{width:100%;padding:12px 80px 12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;outline:none;transition:border-color .3s}.article-content.single-page:not(.admin_single-page) .table-of-contents .toc-list.outline-list-wrap{max-height:initial;overflow:initial;list-style:none;margin:0;padding:8px 0;*{list-style:none!important}ol.outline-list{max-height:initial;overflow:initial;list-style:none;margin:0;padding:8px 24px;li{margin-bottom:2px}}li a{color:var(--new-common-gray7);text-decoration:none;font-weight:400;font-size:14px;padding:2px 0;display:inline-block;transition:color .2s ease}li a:hover{color:var(--new-common-gray4);text-decoration:underline}}.article-content.single-page:not(.admin_single-page){header.entry-header{border:none}h1{border-bottom:none;font-size:32px;font-weight:700;line-height:1.4;margin-bottom:20px;color:#1f2937;margin-top:20px}p.entry-date{color:#6b7280}h2{font-size:24px;font-weight:700;margin:40px 0 20px;color:#1f2937;border-bottom:2px solid #0ba360;padding-bottom:8px}h3:not(acms-admin-accordion-title){font-size:20px;font-weight:600;margin:30px 0 15px;color:#374151}p{font-size:16px;color:#4b5563;line-height:1.7;display:block;-webkit-line-clamp:none;line-clamp:none;-webkit-box-orient:initial;overflow:visible}ul{list-style:disc}ol{list-style:decimal}.column-table- table th,.column-table- table td{padding:12px 16px;text-align:left;border-bottom:1px solid #e5e7eb}.column-table->div{margin:0}.column-table- table th{background:#0ba360;color:white;font-weight:600;font-size:14px}.column-table- table td{font-size:14px;background:white}img.columnImage{border-radius:12px}p{margin-left:0;margin-right:0}p,ul,ol,.column-table- table,.table-of-contents{margin-bottom:40px}pre{border:none}h3.share-title{margin-top:0}ul.serial-nav-list{list-style:none;margin-left:0;margin-right:0;margin-top:60px;margin-bottom:40px;height:50px;_background:#EEE;li{margin-bottom:0}li a{display:inline-block;padding:10px 20px;background:linear-gradient(135deg,#0ba360 0%,rgb(10.0327586207,148.6672413793,87.5586206897) 100%);color:white;border-radius:100vh;text-decoration:none;font-weight:400;font-size:13px;transition:all .3s ease;&:hover{background:linear-gradient(135deg,rgb(12.6120689655,186.8879310345,110.0689655172) 0%,rgb(12.6120689655,186.8879310345,110.0689655172) 100%);color:white;transform:translateY(-2px)}}}.author-box{display:flex;align-items:start;justify-content:flex-start;gap:24px;padding:32px;background:#fafafa;border-radius:8px;flex-wrap:wrap}.author-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;flex-shrink:0}.author-info{flex:1 1 300px;min-width:200px}.author-name{font-size:1.1em;margin:0 0 10px;font-weight:bold}.author-bio{margin:0;line-height:1.6;font-size:1em}@media (max-width:767px){.author-box{flex-direction:column;align-items:center;text-align:center}.author-info{flex:none}.author-name a{display:inline-block;margin-top:4px}.author-bio{text-align:initial}}}}@media screen and (max-width:1024px){body.body_new_blog{.sidebar>.sticky-group{top:0;margin-top:40px;top:initial;margin-top:initial}& .article-content.single-page:not(.admin_single-page){h3.share-title{margin-bottom:2.5rem}}.sidebar-section.single-page{.sidebar-title{padding-bottom:0}.sidebar-title::after{height:0;margin-top:0;margin-bottom:2.5rem}}.sidebar-section.single-page.side-table-of-contents.side-pop-entrylist{p.toc-title{font-size:18px;font-weight:600;margin-bottom:2.5rem}}.sidebar-search .sidebar-search-box{max-width:100%}}}@media screen and (max-width:959px){body.body_new_blog{.breadcrumb-nav{position:initial;top:70px}}}@media screen and (max-width:767px){body.body_new_blog{& .article-content.single-page:not(.admin_single-page){padding:30px 20px;h1{font-size:24px;font-weight:700;margin:0 0 16px 0;color:#1f2937;padding-bottom:10px}h2{font-size:20px}.article-tags{padding:20px 10px}& ul.serial-nav-list{li a{font-size:12px;padding:10px 15px}}}.article-content.single-page:not(.admin_single-page) .table-of-contents .toc-list.outline-list-wrap{ol.level-2.outline-list{padding-left:15px;padding-right:0}}}}@media screen and (max-width:480px){body.body_new_blog{.article-content.single-page:not(.admin_single-page){p{font-size:16px;color:#4b5563;line-height:1.8}p.entry-date{gap:20px;font-size:clamp(12px,3vw,14px);margin-bottom:20px}ul,ol{margin:20px 0 10px 30px}li{font-size:16px;margin-bottom:8px}.table-of-contents .toc-list.outline-list-wrap{ol.outline-list{font-size:16px;ol.level-2.outline-list{margin-top:8px;margin-bottom:8px;list-style:none;padding:0 0 0 15px}}ol.level-1.outline-list{li{text-indent:0}}}}.article-content .table-of-contents .toc-list>li>ol{margin-left:20px;margin-top:8px;list-style:none}}}.side-table-of-contents{p.toc-title{text-align:center;font-size:16px;color:var(--main-color1);font-weight:500;margin-bottom:1.4rem}}.sticky-group{.side-table-of-contents{ol{list-style:none;li{margin-bottom:10px;padding-left:13px;position:relative;&::before{content:"";display:block;width:6px;height:6px;background:var(--main-color1);border-radius:99px;position:absolute;top:9px;left:0}a.scrollTo{font-size:13px}}}a.a__side-table-of-contents{font-size:14px;background:#0ba360;color:white;font-weight:600;text-decoration:none;padding-top:8px;padding-left:clamp(10px,1.15vw,14px);padding-right:clamp(10px,1.15vw,14px);padding-bottom:8px;border-radius:6px;white-space:nowrap;margin:20px auto 0;display:block;text-align:center;transition:background-color .3s,color .3s;border:none!important;&:hover{background-color:#3cba92!important;color:white!important}}}}@media screen and (max-width:1024px){.sticky-group{.side-table-of-contents.show-min-1025{display:none}}body.body_new_blog.entry_body_new_blog{.sidebar-section.single-page:has(.tag-cloud),.sidebar-section.single-page.show-min-1025,.sidebar>.sticky-group.show-min-1025{display:none}}}.sidebar-section.single-page.side-table-of-contents.side-pop-entrylist{padding:20px 16px;a.a__popular-posts{color:var(--main-color1);display:flex;align-items:center;margin:30px auto 0;text-align:center;width:80%;background:#e8f5ec;border-radius:99px;padding:12px 20px;font-size:12px;line-height:1.6;justify-content:center;transition:transform .3s;max-width:250px;&:hover{text-decoration:none;transform:translateY(-2px)}}article.popular-post{position:relative;.popular-post-title{font-size:12.5px;line-height:1.45;margin:0;-webkit-line-clamp:3;line-clamp:3}}article.popular-post a.popular-post-link{.popular-post-image:before{position:absolute;width:20px;height:20px;top:0;left:0;background:#111;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:100;border-radius:8px 0 0 0}}article.popular-post:nth-child(1) a.popular-post-link{.popular-post-image:before{content:"1"}}article.popular-post:nth-child(2) a.popular-post-link{.popular-post-image:before{content:"2"}}article.popular-post:nth-child(3) a.popular-post-link{.popular-post-image:before{content:"3"}}article.popular-post:nth-child(4) a.popular-post-link{.popular-post-image:before{content:"4"}}article.popular-post:nth-child(5) a.popular-post-link{.popular-post-image:before{content:"5"}}.popular-post-image{width:85px;height:fit-content;aspect-ratio:16 /9;img{width:100%;height:auto;object-fit:cover;display:block;aspect-ratio:16 / 9}}}@media screen and (max-width:1024px){.sidebar-section.single-page.side-table-of-contents.side-pop-entrylist{padding:20px 16px 30px;a.a__popular-posts{font-size:14px}& article.popular-post a.popular-post-link{.popular-post-image{width:160px}.popular-post-title{font-size:15px}.popular-post-image:before{position:absolute;width:25px;height:25px;top:0;left:0;background:#111;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:8px 0 0 0}}}.sticky-group{& .side-table-of-contents{p.toc-title{font-size:20px}}}}@media screen and (max-width:767px){.sidebar-section.single-page.side-table-of-contents.side-pop-entrylist{& article.popular-post a.popular-post-link{.popular-post-image{width:135px}}}}@media screen and (max-width:480px){.sidebar-section.single-page.side-table-of-contents.side-pop-entrylist{& article.popular-post a.popular-post-link{.popular-post-image:before{width:20px;height:20px}.popular-post-image{width:85px}.popular-post-title{font-size:13px}}}}body.body_new_blog{.main-content{padding-top:0;.latest-section{margin-bottom:0;padding-top:60px;scroll-margin-top:12.5vh;.section-title{margin-bottom:20px}.articles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}}section#sec-latest-section.latest-section{margin-bottom:120px}}}@media screen and (max-width:1199px){body.body_new_blog{& .main-content{& .latest-section{.articles-grid{gap:20px}}}}}@media screen and (max-width:1023px){body.body_new_blog{& .main-content{& .latest-section{scroll-margin-top:5vh;.section-title{font-size:26px}.articles-grid{gap:30px;grid-template-columns:repeat(2,1fr)}}}}}@media screen and (max-width:767px){body.body_new_blog{& .main-content{& .latest-section{scroll-margin-top:7.5vh;.section-title{font-size:24px}.articles-grid{gap:25px;grid-template-columns:1fr}}}}}body.body_new_blog{.article-content{.wrap_taglink_related a.a__taglink_related{width:80%;max-width:250px;background:var(--new-main-color1);color:#fff;padding:12px 20px;border-radius:999px;display:block;text-align:center;margin:25px auto 0;transition:transform .3s;&:hover{text-decoration:none;transform:translateY(-2px);_box-shadow:0 4px 15px rgba(11,163,96,.2)}&:nth-child(n + 2){display:none}}}}@media screen and (max-width:1024px){body.body_new_blog{& .article-content{.wrap_taglink_related a.a__taglink_related{margin:30px auto 0}}}}body.body_new_blog{.article-content .social-share{background:initial;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:30px}section.sec-ETR_blog_entry_tag{background:rgba(243,244,246,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:30px;*{box-sizing:border-box}.share-title{text-align:center}.articles-grid{gap:20px;.article-card{overflow:initial;border:initial;&:hover{text-decoration:none}.article-content{padding:15px 18px 18px;h4.article-title{font-size:14px;font-weight:600;line-height:1.4;color:#333;margin:0!important;transition:color .3s ease;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;text-overflow:ellipsis;white-space:initial}}.article-image{height:initial;margin-top:0;margin-bottom:0;border-radius:12px 12px 0 0;background:initial}}}}}@media screen and (max-width:1024px){body.body_new_blog{& section.sec-ETR_blog_entry_tag{& .articles-grid{& .article-card{& .article-content{h4.article-title{font-size:16px}}}}}.sidebar{.wrap_side-outline{display:none}}}}@media screen and (max-width:480px){body.body_new_blog{section.sec-ETR_blog_entry_tag{padding:30px 20px;& .articles-grid{& .article-card{& .article-content{h4.article-title{font-size:14px}}}}}}}

/* ============================================================
   Enterprise restyle: blog index.
   The thumbnails are all highly saturated, so the container (background, card and
   text) is kept deliberately quiet and colour is left to the thumbnails alone.
   Type follows the site scale: section 22 / card 17 / body 15 / meta 14.
   ============================================================ */

/* Four orange and green dot/circle images competed with the thumbnail colours.
   Replaced by a plain white to pale blue-grey gradient. */
body.body_new_blog {
    /* The original rule carried position/size/repeat/attachment for four images;
       replacing background-image alone would paint the gradient as a fixed 190x190
       tile in the corner, so the shorthand resets all of them. */
    background: linear-gradient(#fff 0%, #f7f7fb 60%) #fff;
    background-attachment: fixed;
}

/* Cards: flat white with a thin blue-grey border, replacing the frosted-glass
   look. Without the shadow the colourful thumbnails sit as surfaces rather than
   floating. The transition lists opacity and transform so .fade-in-up still runs. */
body.body_new_blog .article-card {
    background: #fff;
    backdrop-filter: none;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
    box-shadow: none;
    transition: opacity .8s ease-out, transform .8s ease-out, border-color .25s ease;
}

@media (any-hover:hover) {
    body.body_new_blog .article-card:hover {
        background: #fff;
        border-color: #97a8bc;
        box-shadow: none;
        transform: none;
    }

    body.body_new_blog .article-card:hover .article-title {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

/* Section heading, down to the site scale. */
body.body_new_blog .section-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .02em;
    color: #2a3037;
    margin-bottom: 24px;
}

/* Same scale as the case study and event cards. */
body.body_new_blog .article-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .01em;
    color: #2a3037;
    margin-bottom: 10px;
}

body.body_new_blog .article-excerpt {
    font-size: 14px;
    line-height: 1.7;
    color: #616a78;
    margin-bottom: 14px;
}

body.body_new_blog .article-meta,
body.body_new_blog .article-meta time,
body.body_new_blog .article-meta span {
    font-size: 13px;
    color: #616a78;
}

/* The category nav colours live in the inline <style> in _top.html, whose
   #sec-top-links .container ul li a chain outranks anything here. */

/* Excerpt lengths vary, so the date and author lines sat at different heights.
   Rows already equalise the card height, so the meta line is pinned to the bottom. */
body.body_new_blog .article-card {
    display: flex;
    flex-direction: column;
}

body.body_new_blog .article-card .article-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.body_new_blog .article-card .article-meta {
    margin-top: auto;
}


/* ------------------------------------------------------------
   "View all articles" is a browse button. The site uses three button roles:
     primary    flat green, 3px           - the one action the screen wants
     secondary  white, #97a8bc border, 3px - the alternative on the same screen
     browse     white gradient, #97a8bc border, pill - "see more" links
   This is a browse button, so it matches the top page's btn-common-nega202512;
   it had been styled as a flat green pill, which reads as the old primary.
   ------------------------------------------------------------ */
body.body_new_blog .view-all-btn {
    background: linear-gradient(180deg, #fff 0%, #f8f8fc 100%);
    color: #2a3037;
    border: 1px solid #97a8bc;
    font-size: 15px;
    transition: background-color .25s, border-color .25s, color .25s;
}

@media (any-hover:hover) {
    body.body_new_blog .view-all-btn:hover {
        background: #eaedf4;
        border-color: #8494a8;
        color: #2a3037;
        transform: none;
        box-shadow: none;
    }
}


/* ============================================================
   Entry readability. The look is unchanged; only the leading and spacing rhythm.
   It measured 16px body, line-height 1.7, 40px below each paragraph.
   Long Japanese text reads tight at 1.7, so leading goes to 1.9 and the paragraph
   gap closes to keep the order line < paragraph < before-heading clear.
   ============================================================ */
/* The existing rule is a (0,4,2) chain, so this repeats it to override. */
body.body_new_blog .article-content.single-page:not(.admin_single-page) p,
body.body_new_blog .article-content.single-page:not(.admin_single-page) li,
body.body_new_blog .article-content.single-page:not(.admin_single-page) dd {
    font-size: 16px;
    line-height: 1.9;
    color: #2a3037;
}

body.body_new_blog .article-content.single-page:not(.admin_single-page) p {
    /* 40px exceeded the 30px leading and split the paragraphs apart. */
    margin-bottom: 28px;
}

body.body_new_blog .article-content.single-page:not(.admin_single-page) li {
    margin-bottom: 6px;
}

/* Wide above, narrow below, so the heading belongs to the text that follows. */
body.body_new_blog .article-content.single-page:not(.admin_single-page) h2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .02em;
    color: #2a3037;
    margin: 48px 0 16px;
}

/* An existing h3:not(acms-admin-accordion-title) has no dot inside :not(), so it
   counts as a type selector and ranks one higher; this matches that shape. */
body.body_new_blog .article-content.single-page:not(.admin_single-page) h3:not(acms-admin-accordion-title) {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .02em;
    color: #2a3037;
    margin: 32px 0 12px;
}

body.body_new_blog .article-content.single-page:not(.admin_single-page) h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
    color: #2a3037;
    margin: 24px 0 10px;
}

body.body_new_blog .article-content.single-page:not(.admin_single-page) h1 {
    color: #2a3037;
}


/* ============================================================
   Buttons follow the three site roles:
     primary    flat green, 3px           - the one action the screen wants
     secondary  white, #97a8bc border, 3px - the alternative
     browse     white gradient, #97a8bc border, pill - "see more" links
   ============================================================ */

/* Search is the primary within its widget: flat fill, 3px, no gradient. */
body.body_new_blog .sidebar-search .sidebar-search-btn {
    background: var(--new-main-color1);
    border-radius: 3px;
    font-weight: 600;
    transition: background-color .25s;
}

@media (any-hover:hover) {
    body.body_new_blog .sidebar-search .sidebar-search-btn:hover {
        background: #087e4a;
    }
}

body.body_new_blog .sidebar input[type="text"],
body.body_new_blog .sidebar input[type="search"] {
    background: #fff;
    border-color: #c4cbd4;
    border-radius: 3px;
}

/* "More related" and "All popular posts" are browse buttons, matching the top
   page "see more": white gradient with a blue-grey border. */
body.body_new_blog .article-content .wrap_taglink_related a.a__taglink_related,
body.body_new_blog .sidebar-section.single-page.side-table-of-contents.side-pop-entrylist a.a__popular-posts {
    background: linear-gradient(180deg, #fff 0%, #f8f8fc 100%);
    color: #2a3037;
    border: 1px solid #97a8bc;
    font-weight: 600;
    transition: background-color .25s, border-color .25s, color .25s;
}

@media (any-hover:hover) {
    body.body_new_blog .article-content .wrap_taglink_related a.a__taglink_related:hover,
    body.body_new_blog .sidebar-section.single-page.side-table-of-contents.side-pop-entrylist a.a__popular-posts:hover {
        background: #eaedf4;
        border-color: #8494a8;
        color: #2a3037;
        transform: none;
        box-shadow: none;
    }
}

/* Share buttons keep each service's brand colour, which carries meaning.
   Only "copy URL" was neutral grey; it shifts blue to match. */
body.body_new_blog .article-content .social-share .share-btn.copy {
    background: #5a6472;
}

@media (any-hover:hover) {
    body.body_new_blog .article-content .social-share .share-btn.copy:hover {
        background: #4c5563;
    }
}

/* Sidebar headings follow the site scale too. */
body.body_new_blog .sidebar-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #2a3037;
}


/* ============================================================
   Text colours follow the top page palette.
   The blog was built on Tailwind-style neutral greys (#374151, #333, #292929,
   #6b7280, #4b5563) and read apart from the blue-shifted site.
   Rewriting each one would never end, so the tokens themselves are replaced.
   This file is only loaded on the blog, so no other page is affected.
   ============================================================ */
:root {
    --new-common-gray1: #e2e6ee;  /* rule      #e5e7eb */
    --new-common-gray2: #f7f7fb;  /* surface   #fafafa */
    --new-common-gray3: #2a3037;  /* heading   #374151 */
    --new-common-gray4: #2a3037;  /*        #333    */
    --new-common-gray5: #2a3037;  /*        #292929 */
    --new-common-gray6: #2a3037;  /* darkest   #1f2937 */
    --new-common-gray7: #616a78;  /*        #666    */
    --new-common-gray8: #616a78;  /* meta      #6b7280 */
    --new-common-gray9: #2a3037;  /* body      #4b5563 */
    --new-common-gray10: #97a8bc; /* muted     #9ca3af */
}

/* Hard-coded colours the tokens do not reach */
body.body_new_blog .article-title,
body.body_new_blog .toc-title,
body.body_new_blog .popular-post-title,
body.body_new_blog .entry-body {
    color: #2a3037;
}

body.body_new_blog .article-meta time,
body.body_new_blog .popular-post-date {
    color: #616a78;
}

/* Body links. Green (#0ba360) on white is only 3.0:1, short of what body text
   needs, so these follow the site's black-plus-underline treatment. */
body.body_new_blog .article-content.single-page:not(.admin_single-page) .entry-body a {
    color: #2a3037;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (any-hover:hover) {
    body.body_new_blog .article-content.single-page:not(.admin_single-page) .entry-body a:hover {
        color: #0e0e1a;
    }
}


/* ============================================================
   Body area spacing and corner radii
   ============================================================ */

/* 20px put the text too close to the card edge. */
body.body_new_blog .article-content.single-page:not(.admin_single-page) {
    padding: 40px;
}

/* Flat white with a thin blue-grey border, as on the index cards. At 85% opacity
   the background showed through and muddied it. */
body.body_new_blog .article-container,
body.body_new_blog .sidebar-section {
    background: #fff;
    backdrop-filter: none;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
    box-shadow: none;
}

/* Matches the existing (0,3,1) selector. */
body.body_new_blog .sidebar-section.single-page {
    padding: 20px;
}

/* 12px radii sat alongside 8px containers; unified here (entry footer thumbnails,
   share box and tag list). */
/* Share box and related-articles containers, unifying the mix of 12px and 8px.
   Images in the body (.columnImage) were out of scope and stay at 12px. */
body.body_new_blog .article-content .social-share,
body.body_new_blog section.sec-ETR_blog_entry_tag {
    border-radius: 8px;
}

/* Popular-post thumbnails are only 85x48, where 8px is 17% of the height and reads
   as a circle. 4px keeps the ratio the related cards use (8px on 212px). */
body.body_new_blog .popular-post .popular-post-image {
    border-radius: 4px;
}

@media screen and (max-width:767px) {
    body.body_new_blog .article-content.single-page:not(.admin_single-page) {
        padding: 24px 20px;
    }

    body.body_new_blog .sidebar-section.single-page {
        padding: 16px;
    }
}

/* Two rules nested too deeply for the token swap above to reach; this repeats
   their selector chain. */
body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid .article-card .article-content h4.article-title {
    color: #2a3037;
}

/* assets/css/style.css set color:#374151!important on the TOC heading, so that
   value was changed to #2a3037 at source rather than stacking an override here.
   Only the :not() variant remains. */
body.body_new_blog .article-content.single-page:not(.admin_single-page) p.toc-title {
    color: #2a3037;
}

body.body_new_blog .article-content .article-meta time,
body.body_new_blog .sidebar time {
    color: #616a78;
}

/* Sidebar TOC heading and the publish date. The TOC sits in the sidebar, not under
   .article-content, so it needs its own rule. */
body.body_new_blog .sidebar .table-of-contents .toc-header p.toc-title,
body.body_new_blog .sidebar p.toc-title {
    color: #2a3037;
}

body.body_new_blog .article-content.single-page:not(.admin_single-page) p.entry-date,
body.body_new_blog .article-content.single-page:not(.admin_single-page) p.entry-date time {
    color: #616a78;
}

/* Related-article card links, treated as the index cards are. */
body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid a.article-card {
    color: #2a3037;
}


/* ============================================================
   Previous / index / next navigation.
   It used :has() to go flex only when all three were present and position:absolute
   for two, but the ul had no position, so the absolute items escaped their parent
   and scattered. Replaced by a three-column grid that holds for any count.
   ============================================================ */
body.body_new_blog .article-content.single-page:not(.admin_single-page) ul.serial-nav-list {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    height: auto;
    margin: 48px 0 40px;
}

body.body_new_blog .article-content.single-page:not(.admin_single-page) ul.serial-nav-list li.serial-nav-next {
    grid-column: 1;
    justify-self: start;
    position: static;
    left: auto;
    transform: none;
}

body.body_new_blog .article-content.single-page:not(.admin_single-page) ul.serial-nav-list li.serial-nav-index {
    grid-column: 2;
    justify-self: center;
    position: static;
    left: auto;
    transform: none;
}

body.body_new_blog .article-content.single-page:not(.admin_single-page) ul.serial-nav-list li.serial-nav-prev {
    grid-column: 3;
    justify-self: end;
    position: static;
    right: auto;
    transform: none;
}

/* These navigate rather than act, so they are secondary: white with a blue-grey
   border, 3px. */
body.body_new_blog .article-content.single-page:not(.admin_single-page) ul.serial-nav-list li a {
    background: #fff;
    color: #2a3037;
    border: 1px solid #97a8bc;
    border-radius: 3px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    transition: background-color .25s, border-color .25s, color .25s;
}

@media (any-hover:hover) {
    body.body_new_blog .article-content.single-page:not(.admin_single-page) ul.serial-nav-list li a:hover {
        background: #eaedf4;
        border-color: #8494a8;
        color: #2a3037;
        transform: none;
    }
}

/* Space below the heading. A decorative ::after (the stripe.svg underline) had been
   disabled with background:none but remained as a 258x4px block, which together with
   padding-bottom:12px left an odd gap. The box is removed and margin alone spaces it. */
body.body_new_blog .sidebar-title::after,
body.body_new_blog .section-title::after,
body.body_new_blog .cta-title::before {
    display: none;
}

body.body_new_blog .sidebar-title {
    line-height: 1.5;
    padding-bottom: 0;
    margin-bottom: 12px;
}


/* ============================================================
   Related-article cards at the end of an entry, laid out horizontally.
   Three stacked columns left each card 212px wide, so titles wrapped to three or
   four lines and the heights never matched. Now two columns with the image beside
   the text. The selector follows the existing
   body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid .article-card
   chain, because .article-image carries a 12px 12px 0 0 radius.
   ============================================================ */
body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid .article-card {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 8px;
}

/* The image rounded only its top corners (12px 12px 0 0), which means nothing in a
   horizontal card. 4px, the same as the popular-post thumbnails. */
body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid .article-card .article-image {
    width: 112px;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid .article-card .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid .article-card .article-content {
    padding: 0;
    display: block;
}

body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid .article-card h4.article-title {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    -webkit-line-clamp: 3;
}

@media screen and (max-width:767px) {
    body.body_new_blog section.sec-ETR_blog_entry_tag .articles-grid {
        grid-template-columns: 1fr;
    }
}