/* ================================================

NEWS-ARCHIVE: post-type-archive-news

================================================ */

/* ········ NEWS一覧 ＋ サイドバー ········ */
.single-news .news,
.tax-news-category .news,
.post-type-archive-news .news {
    background-color: var(--color-bg-l-pink);

}

.news__inner {
    display: grid;
    grid-template-columns: 7fr clamp(150px, 20vw, 204px);
    gap: var(--space-lg);
    width: 100%;
    container-type: inline-size;
    container-name: content;
}

/* 投稿一覧のbox */
.posts {
    background-color: #fff;
    /* border-radius: 2.688cqi; */
    border-radius: var(--border-radius-md);
    padding: var(--space-lg) clamp(16px, 3.8vw, 42px) var(--space-2xl);
    background-color: #fff;
}

/* 投稿リスト */
.posts__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* 投稿 */
.posts__item {
    display: flex;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border-brown);
    gap: var(--space-md) var(--space-lg);
}

.posts__item:first-of-type {
    padding-top: 0;
}

/* サムネイル */
.posts__img {
    flex: 3;
    flex-shrink: 0;
    min-width: 240px;
    overflow: hidden;
    aspect-ratio: 16/9;
    /* border-radius: 1.61cqi; */
    border-radius: var(--border-radius-xs);
    transition: transform 0.3s ease;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s ease;
    }
}

.posts__item:hover .posts__img img {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* コンテンツ */
.posts__content {
    flex: 7;
}

.posts__meta {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-xs);
    font-size: var(--fontSize-base);
}

/* カテゴリーのボタン */
.posts__btn .btn {
    border: 1px solid var(--category-color);
    color: var(--category-color);
    font-size: var(--fontSize-sm);
    pointer-events: none;
}

h2.posts__title {
    --min-size: 16;
    --max-size: 18;
    font-size: var(--clamp-size) !important;
    flex-grow: 1;
    font-weight: var(--fontWeight-medium) !important;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    main {
        display: block;
    }

    .posts__item {
        flex-direction: column;
    }

    .posts__content {
        padding: var(--space-xs) 0;
    }

    .posts__sidebar {
        position: sticky;
        top: 0px;
        height: fit-content;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
}

@media (width < 960px) {

    .news__inner {
        grid-template-columns: 1fr;
    }
}

/* ================================================
詳細ページ single-news.php
================================================ */

/* 投稿一覧のbox */
.post {
    background-color: #fff;
    /* border-radius: 2.688cqi; */
    border-radius: var(--border-radius-md);
    --min-size: 20;
    --max-size: 56;
    padding: var(--clamp-size);
    background-color: #fff;
}

/* カテゴリーのボタン */
.post__btn .btn {
    border: 1px solid var(--category-color);
    color: var(--category-color);
    font-size: var(--fontSize-sm);
}

/* HOVER */
.post__btn .btn:hover {
    background-color: var(--category-color);
    color: #fff;
    border: 1px solid var(--category-color);
    transition: all 0.3s ease;
}

.post__title {
    --min-size: 20;
    --max-size: 29;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-medium);
    line-height: 1.4;
    margin-bottom: 0.5em;
}

/* サムネイル */
.post__img {
    overflow: hidden;
    aspect-ratio: 16/9;
    border-radius: var(--border-radius-xs);
    margin-bottom: var(--space-lg);

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.post__text a::after{
    background: url(../../img/common/icon_blank.svg) no-repeat center center / contain !important;

}

/* ········ 一覧ページのページネーション ········ */
.posts {
    height: fit-content;
}

.posts__pagination {
    margin-top: var(--space-lg);
    text-align: center;
}

.posts__pagination__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25em;
    list-style: none;
    padding: 0;
    margin: 0;
}

.posts__pagination__item {
    display: inline-flex;
}

.posts__pagination__link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 2em;
    border-radius: 50%;
    text-decoration: none;
    --min-size: 13;
    --max-size: 16;
    font-size: var(--clamp-size);
}

/* ページ番号のみ円形に */
.posts__pagination__link:not(.posts__pagination__link--next, .posts__pagination__link--prev) {
    width: 2em;
}

/* ページ番号のみホバー効果 */
.posts__pagination__link:hover:not(.posts__pagination__link--next, .posts__pagination__link--prev, .posts__pagination__link--disabled) {
    background: #f2f2f2;
}

/* 現在のページ */
.posts__pagination__link--current {
    background: var(--color-main);
    color: #fff;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

/* 前へボタン */
.posts__pagination__link--prev {
    margin-right: 1em;
}

/* 次へボタン */
.posts__pagination__link--next {
    margin-left: 1em;
}

/* 無効なボタン（span） - 場所とサイズをキープ */
.posts__pagination__link--disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}


/* ········ 詳細ページのナビゲーション ········ */
.posts__navigation {
    margin-top: var(--space-lg);
    --min-size: 13;
    --max-size: 16;
    font-size: var(--clamp-size);
}

.nav__links {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
}

.nav__links .nav__next {
    margin-left: auto;
}

.posts__back a {
    margin-inline: auto;
}