@charset "UTF-8";


.news-archive__container{
    max-width: 840px;
    width: 100%;
    margin-inline: auto;
}
.news-archive__item{
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 20px;
    margin-bottom: 20px;
    display: block;
}
.news-archive__top{
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}
.news-archive__date{
    color: #8E8686;
    font-size: var(--main-text-font-size);
    font-weight: 500;
    font-family: var(--font-family-accent);
}
.news-archive__category{
    width: 74px;
    height: 22px;
    text-align: center;
    font-size: var(--main-text-font-size);
    color: #fff;
    line-height: 1.25;
    background: linear-gradient(70deg, #FB3F3C 0%, #FF7745 50%, #FBA681 100%);
}
.news-archive__text{
    font-size: var(--main-text-font-size);
    line-height: var(--main-text-line-height);
    font-weight: 500;
}

.news__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-block: 20px 100px;
}

.news__pagination-prev,
.news__pagination-next,
.news__pagination-number {
    font-family: var(--font-family-accent);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-decoration: none;
    color: #202020;
    font-weight: 500;
}

.news__pagination-number--active {
    background: linear-gradient(to right, #FB3F3C 0%, #FF7745 50%, #FBA681 100%);
    color: white;
    border-color: #e74c3c;
}

.news__pagination-dots {
    color: #202020;
}

/* ~~~~~~~~~~~~~~~~~
個別ページ
~~~~~~~~~~~~~~~~~~~~*/

.news-single__wrapper {
    width: 830px;
    max-width: 100%;
    margin-inline: auto;
    padding-block: 70px 100px;
}
.news-single__container {
    margin-bottom: 70px;
}
.news-single__title {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 40px;
}
.news-single__image {
    margin-bottom: 40px;
}

.news-single__text {
    font-size: var(--main-text-font-size);
    line-height: var(--main-text-line-height);
    font-weight: 500;
}
.news-single__others {
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    padding-block: 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px;
}
.news-single__back {
    display: inline;
}
.news-single__back img {
    height: 48px;
    width: 100%;
    object-fit: contain;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .news-archive__container {
        padding-inline: 20px;
    }
    .news-single__container {
        width: 100%;
        padding-inline: 20px;
        margin-bottom: 50px;
    }
    .news-single__title {
        font-size: 24px;
    }
    .news-single .news-archive__top {
        margin-top: 70px;
        margin-bottom: 25px;
    }
    .news-single__title {
        margin-bottom: 25px;
    }
    .news-single__image {
        margin-bottom: 35px;
    }
    .news-single__others {
        width: calc(100% - 40px);
        padding-inline: 20px;
        margin-inline: auto;
    }
    .news-single__back img {
        height: 60px;
    }
    .news-single__wrapper {
        padding-bottom: 70px;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~ */
:root {
    /* font family */
    --font-family-main: "Zen Kaku Gothic New", sans-serif;
    --font-family-accent: "Jost", sans-serif;
    --font-family-sub: "Noto Sans JP", sans-serif;
    /* color */
    --color-main-text: #202020;
    --color-sub-text: #ffffff;
    --color-accent-1: #E62F2B;
    --color-title-gradient: linear-gradient(45deg, #DA3E3B 0%, #FF7341 50%, #FBA681 100%);
    /* font size */
    --h1-font-size: 3rem;
    --h1-font-size-sp: 2.3rem;
    --h1-font-size-en: 1.1rem;
    --h1-font-size-en-sp: 0.8rem;
    --h2-font-size: 2.5rem;
    --h2-font-size-sp: 1.8rem;
    --h2-font-size-en: 1.3rem;
    --h2-font-size-en-sp: 0.9rem;
    --h3-font-size: 1.8rem;
    --h3-font-size-sp: 1.4rem;
    --h3-font-size-en: 0.9rem;
    --main-text-font-size: 1rem;
    --small-text-font-size: 0.9rem;
    /* height */
    --main-text-line-height: 1.75;
    /* gradient */
    --vivid01: linear-gradient(45deg, #FB3F3C 0%, #FF7745 50%, #FBA681 100%);
    --orange03: linear-gradient(to right, #F57504, #FBA55A);
}

body {
    color: var(--color-main-text);
}
.main {
    max-width: 100%;
}

.sp-only {
    display: none;
}
.pc-only {
    display: block;
}