/*================================================
  page-mainvisual
================================================*/
.page-mainvisual {
    background-image: url(../../image/news/page-mainvisual.jpg);
}

.section-title-third {
  margin-top: calc(var(--layout-gap) * 2);
}

/*================================================
  news
================================================*/
.news {
    text-align: center;
    /* padding-block: var(--layout-gap); */
}

.news .title {
    border-bottom: none;
    border-top: 5px solid var(--color-primary);
}

.news-list {
    text-align: left;
    margin: calc(var(--layout-gap) * 1) auto  calc(var(--layout-gap) * 1.5);
}
.news-item {
    box-shadow: 1px 1px 1px rgba(var(--color-black-rgb), .16);
}
.news-item .date {
    line-height: 1;
    /* font-size: 1.8rem; */
    font-weight: 500;
    display: block;
    text-align: left;
    padding:calc(var(--layout-gap) / 2) calc(var(--layout-gap) / 3) 0 ;
}
.news-item .detail {
    padding: calc(var(--layout-gap) / 3);
}
.news-title {
    padding-block: calc(var(--layout-gap) / 4);
    /* font-size: 1.8rem; */
    font-weight: 500;
    line-height: 1.5;
}

.news-text {
    margin-block: 0.5em;
}


@media print,
screen and (min-width: 769px) {

    .news-content {
        padding-inline: calc(var(--layout-gap) /2);
    }
    .news-list {
        margin-bottom: calc(var(--layout-gap) * 3);
    }
    .news-item {
        display: flex;
    }
    .news-item .date {
        font-size: 2.1rem;
        width: 25%;
        line-height: 1.5;
        text-align: center;
        padding: calc(var(--layout-gap) / 2);
        border-right: 1px solid  rgba(var(--color-black-rgb),0.2);
    }

    .news-item .detail  {
        font-size: 2.1rem;
        width: 75%;
        margin-bottom: 0;
        padding: calc(var(--layout-gap) / 2);
    }

    .news-title {
        padding-block: 0;
    }
    .news-text {
        margin-block: 1em 0;
    }
}

@media print,
screen and (min-width: 1200px) {

    .news-item .date {
        font-size: 2.5rem;
        width: 20%;
    }

    .news-item .detail  {
        width: 80%;
    }

    .news-title {
        font-size: 2.5rem;
    }
}