/* ------------------------------------------------
ARCHIVE: NEWS - お知らせ -
------------------------------------------------ */
.news{
    position: relative;
    padding-top: var(--space-5xl);
}

.news::after{
    content: "";
    display: block;
    background: url(../../img/common/bg_blur.avif) no-repeat center/contain;
    position: absolute;
    top: 0;
    left: 0;
    translate: -35% -35%;
    --min-size: 300;
    --max-size: 600;
    width: var(--clamp-size);
    height: var(--clamp-size);
    z-index: -1;

}
.news__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 22px;
}

.news__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    --min-size: 16;
    --max-size: 45;
    margin-bottom: var(--clamp-size);
    padding: var(--space-md);
    transition: all 0.2s ease-in-out;
    
}
/* hoverスタイル */
.news__item:hover {
    /* ドロップシャドウ */
    box-shadow: 0 0 20px #E5F2F2;
    /* 背景色 */
    background-color: var(--color-white);
    transition: all 0.2s ease-in-out;
}

.news__item>a {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: inherit;
    /* 親のgapを継承 */
}

.news__thumbnail {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-md);

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: bottom;
        aspect-ratio: 274 / 146;

    }
}

.news__title{
    line-height: var(--lineHeight-150);
    margin-bottom: var(--space-sm);
}

.news__date{
    font-size: var(--fontSize-xs);
    color: #D3D3D3;
    margin-bottom: var(--space-sm);
}

/* ページネーション
-----------------------------------------*/
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    --min-size: 36;
    --max-size: 50;
    margin-top: var(--clamp-size);
}

.pagination__prev,
.pagination__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--gradient-reverse);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    position: relative;
}

.pagination__prev::after,
.pagination__next::after{
    content: "";
    display:block;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--color-white);
}

.pagination__prev::after{
	border-right: 1px solid var(--color-white);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.pagination__next::after{
	border-right: 1px solid var(--color-white);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* hoverスタイル -------- */
.pagination__prev:hover,
.pagination__next:hover {
    opacity: 0.8;
}

.pagination__num {
    font-size: var(--fontSize-md);
    font-weight: var(--fontWeight-bold);
}

/* prev,nextが表示されない時に中央配置を保つためスペーサー追加 -------- */

.pagination__prev--disabled,
.pagination__next--disabled {
    pointer-events: none;
    width: 50px;
}

/* ------------------------------------------------
SINGLE: NEWS - お知らせ詳細 -
------------------------------------------------ */
.news-post{
    position: relative;
    --min-size: 84;
    --max-size: 110;
    padding-top: var(--clamp-size);
}

.news-post__title{
    font-size: var(--fontSize-xl);
    line-height: var(--lineHeight-150);
    margin-bottom: 0.5em;
}

.news-post__date{
    display: block;
    color: #D3D3D3;
    margin-bottom: var(--space-3xl);
}

.news-post__thumbnail{
    margin-bottom: var(--space-2xl);
    aspect-ratio: 626/326;
    width: 100%;

    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 626/326;
    }
}

.news-post__content{
    line-height: var(--lineHeight-150);
    margin-bottom: var(--space-3xl);
}
/* 投稿ナビゲーション
-----------------------------------------*/
.news-post__nav-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    --min-size: 36;
    --max-size: 50;
    margin-top: var(--clamp-size);
    list-style: none;
    padding: 0;
    font-size: var(--fontSize-sm);
    font-weight: var(--fontWeight-medium);
}

.news-post__nav-item {
    flex: 1;
}

.news-post__nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    --min-size: 13px;
}

.news-post__nav-link--next {
    justify-content: flex-end;
}


.news-post__nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(20px, 8vw, 30px);
    height: clamp(20px, 8vw, 30px);
    background: var(--gradient-reverse);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.news-post__nav-icon::after {
    content: "";
    display: block;
    width: clamp(4px,1.6vw,6px);
    height: clamp(4px,1.6vw,6px);
    border-top: 1px solid var(--color-white);
    border-right: 1px solid var(--color-white);
}

.news-post__nav-link--prev .news-post__nav-icon::after {
    transform: rotate(-135deg);
}

.news-post__nav-link--next .news-post__nav-icon::after {
    transform: rotate(45deg);
}

/* hoverスタイル */
.news-post__nav-link:hover .news-post__nav-icon {
    opacity: 0.8;
}

.news-post__nav-archive {
    width: 100%;
    display: block;
    text-align: center;
}

/* 記事がない時のスペーサー */
.news-post__nav-disabled {
    pointer-events: none;
    color: transparent;
}