﻿ul.news-list svg {
    width: auto !important;
}

ul.news-list img {
    display: inline !important;
    width: auto !important;
}

.u-s-base {
    padding-bottom: 60px
}

@media (min-width: 48em) {
    .u-s-base {
        padding-bottom: 120px
    }
}

.info-content {
    line-height: 1.6
}

@media (min-width: 48em) {
    .info-content {
        line-height: 1.875
    }
}

.page-head-btn {
    margin-bottom: 30px
}

@media (min-width: 48em) {
    .page-head-btn {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 20px 0;
        margin-bottom: 50px
    }
}

.page-head-btn ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px 0
}

@media (min-width: 48em) {
    .page-head-btn ul {
        justify-content: flex-start;
        gap: 0 min(2.2vw, 30px)
    }
}

.page-head-btn ul li {
    width: 48.6%
}

@media (min-width: 48em) {
    .page-head-btn ul li {
        width: auto
    }
}

.page-head-btn ul li:first-child {
    width: 100%
}

@media (min-width: 48em) {
    .page-head-btn ul li:first-child {
        width: auto
    }
}

.page-head-btn ul li .c-icon-button-link {
    width: 100px
}

@media (min-width: 48em) {
    .page-head-btn ul li .c-icon-button-link {
        width: auto
    }
}

.page-head-btn ul li .c-icon-button-link .c-icon-button-link__arrow {
    width: 16px
}

.page-head-btn ul li .c-icon-button-link .c-icon-button-link__text {
    font-size: 1.4rem
}

@media (min-width: 48em) {
    .page-head-btn ul li .c-icon-button-link .c-icon-button-link__text {
        font-size: 1.7rem
    }
}

.page-head-btn ul li .c-button-link {
    border-color: var(--c-primary)
}

@media (min-width: 48em) {
    .page-head-btn ul li .c-button-link {
        margin-top: 0
    }
}

@media (min-width: 48em) {
    .page-head-btn ul li .c-button-link:hover .c-button-link__text {
        color: #fff
    }
}

.page-head-btn ul li .c-button-link .c-button-link__text {
    color: var(--c-primary);
    font-size: 1.4rem
}

@media (min-width: 48em) {
    .page-head-btn ul li .c-button-link .c-button-link__text {
        font-size: 1.7rem
    }
}

.news-list {
    padding-bottom: 40px
}

@media (min-width: 48em) {
    .news-list {
        padding-bottom: 80px
    }
}

.news-list li {
    border-bottom: #C4C4C4 dashed 1px
}

.news-list li a {
    display: block;
    padding: 15px 20px 15px 0;
    position: relative
}

@media (min-width: 48em) {
    .news-list li a {
        transition: opacity .4s;
        padding: 15px 0
    }
}

@media (min-width: 48em) {
    .news-list li a:hover {
        opacity: .6
    }
}

.news-list li a:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: solid 3px var(--c-primary);
    border-top: solid 3px var(--c-primary);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -2px
}

@media (min-width: 48em) {
    .news-list li a:after {
        width: 12px;
        height: 12px;
        right: 14px;
        margin-top: -4px
    }
}

.news-list li a[target=_blank]:after {
    display: none
}

.news-list li a svg {
    width: 14px;
    position: absolute;
    top: calc(50% - 6px);
    right: 4px;
    color: var(--c-primary);
    background-color: #FFF;
    z-index: 2;
}

@media (min-width: 48em) {
    .news-list li a svg {
        right: 12px
    }
}

.news-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    margin-bottom: 10px
}

@media (min-width: 48em) {
    .news-date {
        gap: 0 15px;
        margin-bottom: 6px
    }
}

.news-date p:first-child {
    color: #a5a5a5
}

.news-date p.category {
    font-size: 1.2rem;
    line-height: 1.6;
    border: solid 1px;
    border-radius: 4px;
    padding: 0 6px
}

@media (min-width: 48em) {
    .news-date p.category {
        font-size: 1.4rem;
        padding: 0 10px
    }
}

.news-date p.category.kojin {
    border-color: #c6424a;
    color: #c6424a
}

.news-date p.category.houjin {
    border-color: #4686cf;
    color: #4686cf
}

.infolink {
    text-align: center
}