@charset "UTF-8";

.pagetop {
    height: 45dvh;
    background-image: url(../img/newsimg_1.jpg);
    background-size: cover;
    background-position: 50% 30%;
}

@media screen and (orientation: portrait) {
    .pagetop {
        height: 28dvh;
    }
}

#news,
#newsitem {
    overflow-x: hidden;
}

.newsitem {
    margin: 2rem 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #ededed;
}

.newsitem a {
    color: #111;
    text-decoration: none;
    display: flex;
}

.news_day {
    width: 5.5em;
    display: inline-block;
    font-size: 0.9em;
    margin-top: 0.1em;
}

.news_title {
    width: calc(100% - 5.5em);
}

@media (min-width:576px) {
    .news_day {
        width: 7em;
    }

    .news_title {
        width: calc(100% - 7em);
    }
}

.pagination {
    display: flex;
    padding: 2rem 0 0;
    list-style: none;
    border-radius: 0.25rem;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.pagination button {
    background: #181d24;
    color: #fff;
    border: none !important;
    padding: 3px 8px;
    border-radius: 1px;
    font-size: 0.8em;
}

.pagination p {
    margin: 0;
}

.pagination ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 1.5rem;
}

.pagination ul li {
    margin: 0 0.5rem;
    color: inherit;
    list-style: none;
}

.pagination ul li a {
    color: inherit;
    text-decoration: none;
}

.pagination ul li.current a {
    color: var(--text3) !important;
    text-decoration: underline;
}

/*==================================================
　5-3-3 左から右に線が伸びる（下部）
===================================*/
.newsitem a .news_title {
    /*線の基点とするためrelativeを指定*/
    position: relative;
}

.newsitem a:hover {
    color: #111;
}

.newsitem a .news_title::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -5px;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 1px;
    background: #c9af50;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);
    /*X方向0、Y方向1*/
    transform-origin: left top;
    /*左上基点*/
}

/*現在地とhoverの設定*/
.newsitem a:hover .news_title::after {
    transform: scale(1, 1);
    /*X方向にスケール拡大*/
}

.newsday {
    font-size: 0.9em;
}

.newstitle {
    font-size: 1.2rem;
    line-height: 2.2;
    border-bottom: 1px solid #ededed;
    padding-bottom: 0.3em;
}

@media (min-width:992px) {
    .newstitle {
        font-size: 1.6rem;
    }
}

.newsconts {
    line-height: 2.5;
    margin-top: 2em;
}

.linknews a {
    padding: 14px 13px;
    border-radius: 1px;
    font-size: 0.9em;
    font-weight: 500;
}