@charset "utf-8";

@media screen and (min-width:768px) {
    /*pc・タブレットcss*/

    #news {
        padding-bottom: 200px;
    }

    .news-list li {
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: dashed 1px #333333;
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .news-list li:last-child {
        margin-bottom: 0px;
        padding-bottom: 0px;
        border-bottom: none;
    }

    .news-list .day {
        width: 7em;
        font-weight: 700;
        line-height: 1.5;
    }

    .news-list .txt {
        width: calc(100% - 7em);
        line-height: 1.8;
    }

    .news-list .txt a {
        text-decoration: underline;
    }

    .news-list .txt a:hover {
        text-decoration: none;
    }

    .news-list .txt .ttl {
        font-size: 26px;
        margin-bottom: 10px;
        font-weight: 700;
        line-height: 1.3;
    }

    .news-list .data {
        width: 65%;
        overflow-wrap: anywhere;
        /* 収まらない場合に折り返す */
        word-break: normal;
        /* 単語の分割はデフォルトに依存 */
        line-break: strict;
        /* 禁則処理を厳格に適用 */
    }

    .news-list .data .txt {
        width: 100%;
    }

    .news-list .ph {
        width: 30%;
    }

}

@media (max-width: 768px) {

    #news {
        padding-bottom: 20vw;
    }

    .news-list li {
        margin-bottom: 5vw;
        padding-bottom: 5vw;
        border-bottom: dashed 1px #333333;
    }

    .news-list li:last-child {
        margin-bottom: 0px;
        padding-bottom: 0px;
        border-bottom: none;
    }

    .news-list .day {
        font-weight: 700;
        line-height: 1.5;
    }

    .news-list .txt {
        line-height: 1.5;
    }

    .news-list .txt .ttl {
        font-size: 20px;
        margin-bottom: 2vw;
        font-weight: 700;
        line-height: 1.3;
    }

    .news-list .data {
        width: 100%;
        margin-bottom: 5vw;
        overflow-wrap: anywhere;
        /* 収まらない場合に折り返す */
        word-break: normal;
        /* 単語の分割はデフォルトに依存 */
        line-break: strict;
        /* 禁則処理を厳格に適用 */
    }

    .news-list .ph {
        width: 80%;
        margin: 0 auto;
    }

}