@charset "UTF-8";
@import "root.css";

/* ===============================
    トピックス 一覧ページ
=============================== */
#PageTopics .PageTopics__container .topics__list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 75px;
    gap: clamp(20px, 2vw, 33px);
}

#PageTopics .PageTopics__container .topics__list .topics__list__item {
    width: calc((100% - (2vw * 2)) / 3);
    display: flex;
}

#PageTopics .PageTopics__container .topics__list__item .topics__list__item__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    border: 1px solid var(--color-black);
    background-color: var(--color-bg_ivory);
    padding: 25px;
}

#PageTopics .PageTopics__container .topics__list__item .topics__list__item__thumb {
    width: min(330px, 100%);
    aspect-ratio: 300 / 200;
    margin-bottom: 15px;
    overflow: hidden;
}

#PageTopics .PageTopics__container .topics__list__item .topics__list__item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#PageTopics .PageTopics__container .topics__list__item .topics__list__item__date {
    font-size: clamp(var(--rem9), var(--vw10), var(--rem12));
}

#PageTopics .PageTopics__container .topics__list__item .topics__list__item__title {
    font-size: clamp(var(--rem13),var(--vw14),var(--rem16));
    font-weight: var(--medium);
}

#PageTopics .PageTopics__container .topics__list__item .topics__list__item__categories .topics__list__item__category {
    font-size: clamp(var(--rem9), var(--vw10), var(--rem12));
    color: var(--color-base_beige);
}


/* ===============================
    トピックス 詳細ページ
=============================== */
#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__title-box {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-base_gray);
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__title-box .PageTopics-detail__title-box__title {
    font-size: clamp(var(--rem17),var(--vw18),var(--rem24));
    font-weight: var(--medium);
    margin-bottom: 5px;
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__title-box .PageTopics-detail__title-box__date {
    color: var(--color-date_gray);
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__title-box .PageTopics-detail__title__flexbox,
#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__title-box .PageTopics-detail__title-box__tag {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__title-box .PageTopics-detail__title-box__tag.tag {
    color: var(--color-base_beige);
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section {
    margin-bottom: 50px;
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__title {
    font-size: clamp(var(--rem17),var(--vw18),var(--rem24));
    background-color: var(--color-base_beige);
    color: var(--color-white);
    padding: 10px 15px;
    font-weight: var(--medium);
    margin-bottom: 30px;
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text p {
    margin-bottom: 1rem;
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text p:last-child {
    margin-bottom: 0;
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text p.btn__text {
    margin-bottom: 0;
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text .f_18 {
    font-size: clamp(var(--rem15),var(--vw16),var(--rem18));
    font-weight: var(--medium);
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text .c_red {
    color: var(--color-accent_red);
    font-weight: var(--medium);
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text .bfore-after {
    font-size: clamp(var(--rem15),var(--vw16),var(--rem18));
    font-weight: var(--medium);
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text .bfore-after::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--color-accent_red);
    margin-right: 5px;
    border-radius: 50%;
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text img {
    width: min(100%, 450px);
    aspect-ratio: 5 / 3;
    margin-bottom: 30px;
    object-fit: cover;
}

#PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text .btn {
    display: block;
    margin: 0 auto;
}

@media (max-width: 767px) {
    #PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section {
        margin-bottom: 30px;
    }

    #PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__title,
    #PageTopics-detail .PageTopics-detail__container .PageTopics-detail__topics-box .PageTopics-detail__section .PageTopics-detail__section__text img {
        margin-bottom: 15px;
    }
}