: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: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: 4px
            }
        }

        li a {
            color: #0ba360;
            text-decoration: none;
            font-weight: 500;
            padding: 4px 0;
            display: block
        }

        li ol li a {
            color: #666 !important;
            font-weight: 400 !important;
            font-size: 14px !important
        }
    }

    .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:has(li.serial-nav-next):has(li.serial-nav-index):has(li.serial-nav-prev) {
            display: flex;
            justify-content: space-between
        }

        ul.serial-nav-list:has(li.serial-nav-index):has(li.serial-nav-prev):has(:not(li.serial-nav-next)) {
            li.serial-nav-index {
                position: absolute;
                left: 50%;
                transform: translateX(-50%)
            }

            li.serial-nav-prev {
                position: absolute;
                right: 20px
            }
        }

        ul.serial-nav-list:has(li.serial-nav-next):has(li.serial-nav-index):has(:not(li.serial-nav-prev)) {
            li.serial-nav-index {
                position: absolute;
                left: 50%;
                transform: translateX(-50%)
            }

            li.serial-nav-next {
                position: absolute;
                left: 20px
            }
        }

        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: center;
            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
        }

        .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
        }
    }
}

.sticky-group {
    .side-table-of-contents {
        p.toc-title {
            text-align: center;
            font-size: 16px;
            color: var(--main-color1);
            font-weight: 500;
            margin-bottom: 1.4rem
        }

        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 {
            display: none
        }
    }

    body.body_new_blog.entry_body_new_blog {

        .sidebar-section.single-page:has(.tag-cloud),
        .sidebar>.sticky-group {
            display: none
        }
    }
}