/* --------------------
 News
-------------------- */
.news {
    margin: 0 0 80px;
}

@media (min-width: 768px) {
    .news {
        margin: 0 0 100px;
    }
}

.list {
    margin: 0 0 80px;
    padding: 0;
}

@media (min-width: 768px) {
    .list {
        margin: 0 0 100px;
        padding: 8px 0 0;
    }
}

.list-container {
    margin: 0 auto;
    max-width: calc(1000px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.list__item {
    border-bottom: 1px solid #777777;
    margin: 0;
    padding: 0;
    width: 100%;
}

.list__item a {
    align-items: flex-start;
    color: inherit;
    display: flex;
    flex-flow: column nowrap;
    font-size: var(--fs14);
    gap: 0;
    justify-content: flex-start;
    line-height: 1.5;
    max-width: 100%;
    padding: 12px 0;
    text-decoration: none;
    width: 100%;
}

@media (min-width: 768px) {
    .list__item a {
        flex-direction: row;
        font-size: var(--fs16);
        padding: 25px 0;
    }
}

.list__item a time {
    display: block;
    letter-spacing: 0.067em;
    margin: 0;
    width: 110px;
}

.list__item a span {
    display: block;
    letter-spacing: 0.067em;
    text-decoration: underline;
    -webkit-text-decoration-color: color-mix(in srgb, currentColor, transparent 100%);
    text-decoration-color: color-mix(in srgb, currentColor, transparent 100%);
    transition: color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, -webkit-text-decoration-color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    transition: color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, text-decoration-color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    transition: color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, text-decoration-color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, -webkit-text-decoration-color 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    width: 100%;
}

@media (min-width: 768px) {
    .list__item a span {
        width: calc(100% - 110px);
    }
}

.list__item a:focus span {
    color: var(--color-theme);
    -webkit-text-decoration-color: color-mix(in srgb, currentColor, transparent 0%);
    text-decoration-color: color-mix(in srgb, currentColor, transparent 0%);
}

@media (hover: hover) and (pointer: fine) {
    .list__item a:hover span {
        color: var(--color-theme);
        -webkit-text-decoration-color: color-mix(in srgb, currentColor, transparent 0%);
        text-decoration-color: color-mix(in srgb, currentColor, transparent 0%);
    }
}