@charset "utf-8";

.contents-box {
    background-color: #f0f0f0;
}

.section-wrapper {
    margin-bottom: 2em;
}

.section-wrapper:first-child {
    margin-top: 1em;
}

dl,
dt,
dd {
    margin: 0;
    padding: 0;
}

.update-news {
    text-align: center;
}

.individual-news {
    /* 個々の更新情報 */
    background-color: #fff;
    border: 1px solid #abc;
    border-radius: 8px 0 0 0;
    margin-bottom: 1em;
}

.update-news dt.date,
.update-news dd.context {
    margin: 0;
    padding: 0.25em;
}

.update-news dt.recent-news::before {
    background-color: #faf09a;
    color: #808080;
    content: "new! ";
    font-size: 75%;
    vertical-align: top;
}

.update-news dt.date {
    border-bottom: 1px dashed #cde;
    font-weight: bold;
    margin-bottom: 0.1em;
}

.update-news dd.context {
    margin-bottom: 1em;
}

.update-news dd.context:last-child {
    margin-bottom: 0;
}

/* 中 以上 */
@media screen and (min-width: 651px) {
    .update-news {
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
    }

    .individual-news {
        align-items: baseline;
        width: 49%;
    }

    .update-news dt.date,
    .update-news dd.context {
        padding: 0.5em;
        width: 100%;
    }
}

/* 中の大 以上 2ペインに移行 */
@media screen and (min-width: 961px) {
    .hellow {
        background-image: url(../images/680438677+.jpg);
        background-position: center center;
    }

    .individual-news {
        width: 33%;
    }

    .update-news dt.date {
        border-radius: 8px 0 0 0;
    }
}

/* 大 以上 */
@media screen and (min-width: 1201px) {
    .individual-news {
        width: 25%;
    }
}