body {
        background-color: #444;
    }

@media only screen and (min-width : 1000px) {

    /**body**/
    

    article {
        margin: 60px auto;
        padding: 24px 0;
        border: #222 1px solid;
        border-radius: 12px;
        width: 1000px;
        background-color: #000;
    }

    .article-link {
        color: #a0f;
    }

    /**title**/
    .article-ttl {
        margin: 0 24px;
        border-bottom: #222 1px solid;
        display: flex;
        flex-wrap: wrap;
    }

    .article-ttl-name {
        color: #ddd;
        font-size: 2em;
    }

    .article-ttl-date {
        margin: 0 0 0 auto;
        color: #aaa;
        font-size: 20px;
    }


    .article-outline {
        margin: 24px 0 0 72px;
        color: #ddd;
        font-size: 1.75em;
    }

    .article-xplan {
        margin: 24px auto 0;
        width: 80%;
        color: #ddd;
        font-size: 16px;
        line-height: 2;
    }

    .article-img {
        margin: 24px auto 0;
        text-align: center;
    }

    .article-img>img {
        width: 50%;
    }

    .article-catalog {
        margin: 24px auto;
        width: 70%;
        display: flex;
        flex-wrap: wrap;
        color: #ddd;
        font-size: 20px;
    }

    .article-catalog-l {
        width: 40%;
    }

    .article-catalog-c {
        width: 10%;
        text-align: center;
    }

    .article-catalog-r {
        width: 50%;
        text-align: center;
    }

    /**table of contents**/
    .article-taoco {
        margin: 0 auto 0;
        width: 70%;
    }

    .article-taoco div {
        font-size: 1.5em;
    }

    .article-taoco div a {
        color: #ddd;
    }

    /**side by side**/
    .article-sdbysd {
        margin: 48px auto 0;
        display: flex;
        flex-wrap: wrap;
        width: 90%;

        .article-img {
            width: 40%;

            img {
                width: 100%;
            }
        }

        .article-xplan {
            width: 60%;
            text-align: center;

        }
    }


    /**List**/
    .article-list {
        margin: 0 auto;
        color: #ddd;
        width: 80%;

        li {
            font-size: 1.5rem;

            div {
                margin: 16px;
                font-size: 1rem;
                line-height: 2;
            }
        }
    }

    /**article list**/
    .articlelist {
        margin: 60px auto;
        width: 1000px;
    }

    .articlelist-ttl {
        margin: 12px 0;
        color: #ddd;
        font-size: 36px;
    }

    .articlelist-container {
        margin: 24px auto;
        border: #222 1px solid;
        border-radius: 12px;
        background-color: #000;
    }

    .articlelist-link {
        text-decoration: none;
    }

    .articlelist-ttl {
        margin: 24px;
        border-bottom: #222 1px solid;
        display: flex;
        flex-wrap: wrap;
    }

    .articlelist-ttl-name {
        color: #ddd;
        font-size: 24px;
    }

    .articlelist-ttl-date {
        margin: 0 0 0 auto;
        color: #aaa;
        font-size: 20px;
    }

    .articlelist-xplan {
        margin: 24px;
        color: #ddd;
        font-size: 24px;
    }
}



@media only screen and (max-width : 999px) {

    /**body**/
    body {
        background-color: #444;
    }

    article {
        margin: 12px auto;
        padding: 16px 0;
        border: #222 1px solid;
        border-radius: 8px;
        width: 98%;
        background-color: #000;
    }

    .article-link {
        text-decoration: none;
    }

    .article-ttl {
        margin: 0 16px;
        border-bottom: #222 1px solid;
        display: flex;
        flex-wrap: wrap;
    }

    .article-ttl-name {
        color: #ddd;
        font-size: 24px;
    }

    .article-ttl-date {
        margin: 0 0 0 auto;
        color: #aaa;
        font-size: 12px;
    }

    .article-outline {
        margin: 8px 0 0 32px;
        color: #ddd;
        font-size: 20px;
    }

    .article-xplan {
        margin: 8px auto 0;
        width: 80%;
        color: #ddd;
        font-size: 16px;
        line-height: 2;
    }

    .article-img {
        margin: 8px auto 0;
        text-align: center;
    }

    .article-img>img {
        width: 75%;
    }

    .article-catalog {
        margin: 8px auto;
        border: #888 1px solid;
        width: 80%;
        display: flex;
        color: #ddd;
        font-size: 16px;
        line-height: 28px;
        white-space: nowrap;
        overflow: scroll;
    }

    .article-catalog-l {
        text-align: left;
    }

    .article-catalog-c {
        text-align: center;
    }

    .article-catalog-r {
        text-align: center;
    }

    /**table of contents**/
    .article-taoco {
        margin: 0 auto 0;
        width: 80%;
    }

    .article-taoco div {
        font-size: 20px;
    }

    .article-taoco div a {
        color: #ddd;
    }

    /**side by side**/
    .article-sdbysd {
        margin: 8px auto 0;
        display: flex;
        flex-wrap: wrap;
        width: 90%;
    }

    .article-sdbysd>.article-img {
        width: 50%;
    }

    .article-sdbysd>.article-img>img {
        width: 100%;
    }

    .article-sdbysd>.article-xplan {
        width: 50%;
        text-align: center;
    }

    /**List**/
    .article-list {
        margin: 0 auto;
        color: #ddd;
        width: 80%;

        li {
            font-size: 1.25rem;

            div {
                margin: 8px;
                font-size: 1rem;
                line-height: 2;
            }
        }
    }

    /**article list**/
    .articlelist {
        margin: 12px auto;
        width: 98%;
    }

    .articlelist-ttl {
        margin: 0px 0;
        color: #ddd;
        font-size: 20px;
    }

    .articlelist-container {
        margin: 8px auto;
        border: #222 1px solid;
        border-radius: 8px;
        background-color: #000;
    }

    .articlelist-link {
        text-decoration: none;
    }

    .articlelist-ttl {
        margin: 8px;
        border-bottom: #222 1px solid;
        display: flex;
        flex-wrap: wrap;
    }

    .articlelist-ttl-name {
        color: #ddd;
        font-size: 20px;
    }

    .articlelist-ttl-date {
        margin: 0 0 0 auto;
        color: #aaa;
        font-size: 12px;
    }

    .articlelist-xplan {
        margin: 16px;
        color: #ddd;
        font-size: 16px;
    }
}