@charset "utf-8";

/* ====================
News
==================== */
.article__header--news {
    background-image: url(../images/common/section_news.jpg);
}

.news {
    padding: var(--sectionPadding) var(--contentPadding);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.news__item {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.77vw, 40px);
    padding: clamp(20px, 2.77vw, 40px) 1.33vw;
    border-bottom: solid 0.5px var(--color-black);
}

.news__item:first-of-type {
    border-top: solid 0.5px var(--color-black);
}

.news__date {
    display: block;
    font-family: var(--sub-font-en);
    font-size: clamp(1.4rem, 1.11vw, 1.6rem);
    font-weight: 500;
}

.news__header {
    font-family: var(--sub-font-jp);
    font-size: clamp(1.8rem, 1.66vw, 2.4rem);
    font-weight: 500;
    letter-spacing: 0.1em;
}

.news__header span {
    display: block;
    font-family: var(--sub-font-en);
    font-size: clamp(1.4rem, 1.11vw, 1.6rem);
    letter-spacing: 0.05em;
}

.news__about {
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 2.08vw, 30px);
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.news__about.display {
    opacity: 1;
    height: auto;
}

.news__detail {
    margin-left: clamp(20px, 2.77vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.69vw, 10px);
}

.news__topic {
    font-size: 1.4rem;
    line-height: 1.8;
    position: relative;
}

.news__topic::before {
    content: '';
    display: inline-block;
    width: clamp(10px, 1.38vw, 20px);
    height: 1px;
    background-color: var(--color-black);
    position: absolute;
    top: calc(1.4rem * 1.8 / 2);
    left: calc(-1 * clamp(20px, 2.77vw, 40px));
    transform: translateY(-50%);
}

.news__txt {
    font-size: 1.4rem;
    line-height: 1.8;
}

.news__txt a {
    text-decoration: underline;
}

.news__txt span {
    display: block;
    font-size: 1.2rem;
}

.detailBtn {
    margin: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(5px, 0.69vw, 10px);
}

.detailBtn.active {
    flex-direction: column-reverse;
}

.detailBtn__txt {
    color: var(--color-red);
    font-family: var(--sub-font-en);
    font-size: clamp(1.4rem, 1.25vw, 1.8rem);
    font-weight: 500;
}

.detailBtn img {
    width: clamp(11px, 1.45vw, 21vw);
    height: clamp(3px, 0.34vw, 5px);
    object-fit: contain;
}

.detailBtn.active img {
    transform: rotate(180deg);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 2.08vw, 30px);
}

.pagination__item {
    color: rgb(87 76 62 / 0.5);
    font-size: clamp(1.4rem, 1.11vw, 1.6rem);
    padding: 0 2px;
}

.pagination__item--current {
    color: var(--color-black);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--color-black);
}

/* News pc */
@media screen and (min-width: 769px) {
    .news {
        width: 100%;
        max-width: 1260px;
        margin: 0 auto;
    }

    .news__item {
        padding: clamp(15px, 2.08vw, 30px) 10.4vw;
    }

    .news__detail {
        flex-direction: row;
        gap: 30px;
    }

    .news__topic {
        width: 32.5%;
        line-height: 2;
    }

    .news__topic::before {
        top: calc(1.4rem * 2 / 2);
    }

    .news__txt {
        line-height: 2;
    }
}/* pc 769px */