:root {
    --comics-color: #FBF9D8;
    --comics-accent-color: #FFFBA6;
    --color-subtext: #727272;
}


/* class */

.comics a.tag {
    background: var(--comics-color);
}

article.comics h2 {
    border-top: 1px solid var(--comics-accent-color);
    border-bottom: 1px solid var(--comics-accent-color);
}

.non-boder {
    border-top: none !important;
    border-bottom: none !important;
}

article.comics h3 {
    border-left: 4px solid var(--comics-accent-color);
}

article.comics ol li::before {
    background: var(--comics-accent-color);
}

article.comics .button-area a.white {
    background: white;
    border: 2px solid var(--comics-accent-color);
}

article.comics .button-area a.color {
    background: var(--comics-accent-color);
}

article.comics .monthly-item-title span {
    border: 2px solid var(--comics-accent-color);
}

h2.comics-recipe {
    position: relative;
}

h2.comics-recipe:after {}

.category.comics span::before,
.category.comics a::before {
    background: url(../../images/editors-blog/article/ic-beauty.svg) no-repeat center center/100%;
}


/* id */

#comics .bg {
    background: var(--comics-color);
}

#comics .ranking-line {
    position: relative;
}

#comics .ranking-line::before {
    content: "";
    display: block;
    width: 189px;
    height: 13px;
    background: url(../../images/comics/article/comics-ranking-line.svg) no-repeat center center/100%;
    z-index: 0;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

#comics .index-head {
    /* background: url(../../images/comics/comics-head-img.png) no-repeat left center/100%; */
}


/* color */

#comics article h4 span {
    border-bottom: 1px solid var(--comics-color);
}

#comics article h5 span {
    background: var(--comics-color);
}

#comics article .talk-area .talk-cont>p.fukidashi {
    background: var(--comics-color);
}

#comics .special-title {
    background: var(--comics-color);
}


/* accent-color */

#comics article ul.article-list li::before {
    background: var(--comics-accent-color);
}

#comics article .faq .question:before {
    color: var(--comics-accent-color);
}

#comics article .faq .answer:before {
    color: var(--comics-accent-color);
}

#comics article details summary::marker {
    color: var(--comics-accent-color);
}

#comics article .talk-area .talk-cont:nth-of-type(2n)>p.fukidashi {
    border: 3px solid var(--comics-accent-color);
}

#comics #cb~.more_btn::after {
    background: var(--comics-accent-color);
}

.comics-title {
    background: var(--comics-color);
    padding: 15px 8px;
}

#comics article .talk-area .talk-cont:nth-of-type(2n)>p.fukidashi::before {
    border-color: transparent var(--comics-accent-color) transparent transparent;
}

#comics article .talk-area .talk-cont:nth-of-type(2n)>p.fukidashi {
    background-color: #fff;
}

#comics .hover\:bg-subtext:hover {
    background-color: var(--color-subtext);
    border: 1px solid var(--color-subtext);
}


/* Special */

.after\:bg-\[\#FFFBA6\]::after {
    content: var(--tw-content);
    background-color: var(--comics-accent-color);
}