@charset "UTF-8";

/*//////////////////// COLOR GRAY ////////////////////////*/

body.dark {
    background: #222;
    color: #FFF;
}

body.dark .logo img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

body.dark header .header-wrap {
    background: #222;
    color: #FFF;
    border-bottom: 1px solid rgb(255 255 255 / 40%);
}

body.dark .title-area {
    background: #222;
}

body.dark a {
    color: #FFF;
}

body.dark .category a,
body.dark .tag a,
body.dark .archive a {
    background: #222;
    /*border: 1px solid #FFF;*/
}

body.dark .internal-link ul.button-group li,
body.dark .internal-link ul.button-group a,
body#article.dark .main-area .contents-inner dl dt {
    color: #FFF;
}

body#article.dark .main-area .contents-inner,
body#article.dark .main-area .contents-inner span.category a {
    color: #FFF;
}

body#article.dark .main-area .sandwich {
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}

body.dark .internal-link ul.line-group li {
    border-left: 1px solid rgb(255 255 255 / 40%);
    border-right: 1px solid rgb(255 255 255 / 40%);
}

body.dark .internal-link ul.line-group li+li {
    border-left: 0;
    border-right: 1px solid rgb(255 255 255 / 40%);
}

body.dark a.button {
    border: none;
    background: #000;
    color: #FFF;
}

body.dark .modal__cont a {
    color: #020201;
}

body.dark .sub-area a.button,
body.dark .modal__cont a.button {
    border: none;
    background: #000;
    color: #FFF;
}

body.dark dl.lined dt {
    background: #FFF;
    color: #222;
}

body.dark .toggle_btn span {
    background: #FFF;
}

@media only screen and (min-width: 768px) {
    body.dark dl.lined dt {
        background: #222;
        color: #FFF;
    }
}

body.dark .internal-link ul.button-group li {
    border: solid 1px rgb(255 255 255 / 40%);
}

body.dark footer {
    background: #FFF;
    color: #444;
}

body.dark footer a {
    color: #444;
}

body.dark .sub-area a {
    color: #444;
}