@charset "UTF-8";

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

body.light {
    background: #EEE;
    color: #222;
}

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

body.light header .header-wrap {
    background: #EEE;
    color: #222;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
}

body.light .title-area {
    background: #EEE;
}

body.light a {
    color: #222;
}

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

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

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

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

body.light .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.light .internal-link ul.line-group li+li {
    border-left: 0;
    border-right: 1px solid rgb(255 255 255 / 40%);
}

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

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

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

body.light dl.lined dt {
    background: #FFF;
    color: #EEE;
}

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

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

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

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

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

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