/* ニュースアーカイブページのスタイル */

/* カテゴリータブラッパー */
.news-category-wrapper {
    margin-top: clamp(3.75rem, 2.941rem + 3.33vw, 6.25rem);
    /* 390px時に60px(3.75rem)、1920px時に100px(6.25rem) */
    position: relative;
}

/* カテゴリータブ */
.news-category-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS向けスムーススクロール */
    position: relative;
}

.category-list {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: clamp(2.5rem, 2.109rem + 1.31vw, 3.75rem);
    /* 390px時に40px(2.5rem)、1920px時に60px(3.75rem) */
    padding-bottom: 1rem; /* 下線表示のための余白 */
}

.category-item {
    margin: 0;
    white-space: nowrap; /* カテゴリ名が改行されないように */
    position: relative;
}

/* デスクトップ・タブレット：選択中タブの下線（501px以上） */
@media (min-width: 501px) {
    .category-list {
        overflow: visible; /* 下線が見えるように */
    }

    .category-item.active::after {
        content: "";
        position: absolute;
        bottom: -14px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #BA2A20;
    }
}

.category-link {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(1rem, 0.948rem + 0.22vw, 1.125rem);
    /* 390px時に16px(1rem)、1920px時に18px(1.125rem) */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: clamp(0.1rem, 0.074rem + 0.1vw, 0.1125rem);
    /* 390px時に1.6px(0.1rem)、1920px時に1.8px(0.1125rem) */
    color: #050505;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
}

.category-item.active .category-link {
    color: #BA2A20;
}

@media (hover: hover) {
    .category-link:hover {
        color: #BA2A20;
    }
}

/* カテゴリータブのホバー効果を無効化 */
.category-link:hover {
    opacity: 1 !important;
    transition: none !important;
}

/* モバイル時のスタイル */
@media (max-width: 768px) {
    .news-category-tabs {
        padding-left: 0;
        display: flex;
        justify-content: center; /* デフォルトは中央配置 */
        padding-right: 2.5rem; /* 右端の余白を確保 */
    }
    
    .category-list {
        justify-content: flex-start;
        width: max-content; /* コンテンツ幅に合わせて横幅を広げる */
        padding-bottom: 1.25rem; /* 20px - 下線のための余白 */
        padding-left: 2.5rem; /* 40px - 左側のパディング */
        padding-right: 0.5rem; /* 80px - 右側の余白を増やしてスクロール余裕を確保 */
        margin: 0 auto; /* 中央配置 */
    }
    
    /* スクロールバーを非表示 */
    .news-category-tabs::-webkit-scrollbar {
        display: none;
    }
    .news-category-tabs {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /* 501px以上ではスクロールバーを非表示 */
    .news-scrollbar {
        display: none;
    }
}

/* 500px以下：横スクロール発生時のスタイル */
@media (max-width: 500px) {
    .news-category-tabs {
        justify-content: flex-start; /* 左寄せ */
    }

    .category-list {
        margin: 0; /* 中央配置を解除 */
    }

    /* モバイル用スクロールバー（トップページと同じ形式） */
    .news-scrollbar {
        display: block;
        position: relative;
        width: clamp(19.375rem, 17.273rem + 8.772vw, 21rem);
        /* 390px時に310px、500px時に336px */
        height: 2px;
        margin: 10px auto 0;
        border-radius: 999px;
        background: #E6E6E6;
        overflow: hidden;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .news-scrollbar__thumb {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 30%; /* JSが実寸に更新 */
        background: #BA2A20;
        border-radius: inherit;
        pointer-events: auto;
        cursor: pointer;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        z-index: 10;
        will-change: left;
    }
}

/* ニュース記事リスト */
.news-list-container {
    margin-top: clamp(3.75rem, 2.5rem + 1.96vw, 5.625rem);
    /* 390px時に60px(3.75rem)、1920px時に90px(5.625rem) */
    margin-left: clamp(2.5rem, -2.773rem + 21.63vw, 23.188rem);
    /* 390px時に40px(2.5rem)、1920px時に371px(23.188rem) */
    margin-right: clamp(2.5rem, -2.969rem + 21.76vw, 23.375rem);
    /* 390px時に40px(2.5rem)、1920px時に374px(23.375rem) */
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-list-item {
    padding-top: clamp(1.25rem, 1.076rem + 0.33vw, 1.563rem);
    /* 390px時に20px(1.25rem)、1920px時に25px(1.563rem) - 下線から次のニュースまで */
}

.news-archive-link {
    text-decoration: none;
    display: block;
    transition: opacity 0.3s ease;
}

@media (hover: hover) {
    .news-archive-link:hover {
        opacity: 0.7;
    }
}

/* メタ情報（日付、カテゴリ） */
.news-meta {
    display: flex;
    align-items: center;
    margin-bottom: 0.563rem; /* 9px */
}

.news-date {
    color: #858585;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.875rem; /* 14px */
    font-style: normal;
    font-weight: 500;
    line-height: clamp(1.485rem, 1.173rem + 0.49vw, 2.063rem);
    /* 390px時に23.76px(1.485rem)、1920px時に33px(2.063rem) */
    letter-spacing: 0.0875rem; /* 1.4px */
}

.news-category-dot {
    width: 0.875rem; /* 14px */
    height: 0.875rem; /* 14px */
    margin-left: clamp(1.25rem, -0.667rem + 3.01vw, 3.75rem);
    /* 390px時に20px(1.25rem)、1920px時に60px(3.75rem) */
    margin-right: clamp(0.25rem, -0.056rem + 0.48vw, 0.625rem);
    /* 390px時に4px(0.25rem)、1920px時に10px(0.625rem) */
    flex-shrink: 0;
}

.news-category-name {
    color: #050505;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.875rem; /* 14px */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.0875rem; /* 1.4px */
}

/* ニュースタイトル部分 */
.news-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news-title {
    color: #050505;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(1rem, 0.948rem + 0.13vw, 1.125rem);
    /* 390px時に16px(1rem)、1920px時に18px(1.125rem) */
    font-style: normal;
    font-weight: 500;
    line-height: clamp(1.75rem, 1.607rem + 0.26vw, 2rem);
    /* 390px時に28px(1.75rem)、1920px時に32px(2rem) */
    letter-spacing: clamp(-0.01rem, -0.197rem + 0.33vw, 0.1125rem);
    /* 390px時に-0.16px(-0.01rem)、1920px時に1.8px(0.1125rem) */
    margin: 0;
    flex: 1;
    padding-right: clamp(1.25rem, 0.611rem + 1.31vw, 2.5rem);
    /* 390px時に20px(1.25rem)、1920px時に40px(2.5rem) */
}

/* ニュース矢印 */
.news-arrow {
    width: 0.625rem; /* 10px */
    height: 1.25rem; /* 20px */
    flex-shrink: 0;
    aspect-ratio: 1/2;
}

/* モバイル時の矢印調整 */
@media (max-width: 768px) {
    .news-arrow {
        width: 0.625rem; /* 10px */
        height: 1.25rem; /* 20px */
    }
    
    /* 390px以下でストローク幅を細くする */
    @media (max-width: 390px) {
        .news-arrow line {
            stroke-width: 2;
        }
    }
}

/* ニュース区切り線 */
.news-divider {
    display: block;
    position: relative;
    margin-top: clamp(0.75rem, 0.306rem + 0.72vw, 1.438rem);
    /* 390px時に12px(0.75rem)、1920px時に23px(1.438rem) */
    left: 50%;
    transform: translateX(-50%);
    width: clamp(19.375rem, 5.196rem + 58.17vw, 75rem);
    /* 390px時に310px(19.375rem)、1920px時に1200px(75rem) */
    height: 1px;
    opacity: 0.2;
}

/* モバイル時の区切り線調整 */
@media (max-width: 768px) {
    .news-divider path {
        stroke-width: 0.72;
    }
/* ニュース区切り線 */
.news-divider {
    opacity: 1;
}
}

/* ページネーション */
.news-pagination {
    margin-top: clamp(3.125rem, 0.833rem + 3.59vw, 6.25rem);
    /* 390px時に50px(3.125rem)、1920px時に100px(6.25rem) */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.813rem, 0.813rem, 0.813rem);
    /* ボタン間のギャップは固定13px */
}

/* ナビゲーションボタン（前へ・次へ） */
.page-nav {
    width: clamp(2.75rem, 2.618rem + 0.26vw, 3rem);
    /* 390px時に44px(2.75rem)、1920px時に48px(3rem) */
    height: clamp(2.75rem, 2.618rem + 0.26vw, 3rem);
    /* 390px時に44px(2.75rem)、1920px時に48px(3rem) */
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    padding: 0;
}

@media (hover: hover) {
    .page-nav:hover:not(:disabled) {
        opacity: 0.8;
    }
}

.page-nav:disabled {
    /*opacity: 0.5;*/
    cursor: not-allowed;
}

.page-nav img {
    width: clamp(2.75rem, 2.618rem + 0.26vw, 3rem);
    /* 390px時に44px(2.75rem)、1920px時に48px(3rem) */
    height: clamp(2.75rem, 2.618rem + 0.26vw, 3rem);
    /* 390px時に44px(2.75rem)、1920px時に48px(3rem) */
    object-fit: contain;
}

/* ページ番号コンテナ */
.page-numbers {
    display: flex;
    gap: clamp(0.625rem, 0.559rem + 0.13vw, 0.813rem);
    /* 390px時に10px(0.625rem)、1920px時に13px(0.813rem) */
}

/* ページ番号ボタン */
.page-number {
    width: clamp(2.75rem, 2.618rem + 0.26vw, 3rem);
    /* 390px時に44px(2.75rem)、1920px時に48px(3rem) */
    height: clamp(2.75rem, 2.618rem + 0.26vw, 3rem);
    /* 390px時に44px(2.75rem)、1920px時に48px(3rem) */
    border-radius: 50%;
    border: clamp(0.063rem, 0.024rem + 0.04vw, 0.1rem) solid #050505;
    /* 390px時に1px、1920px時に1.6px */
    background: #FFF;
    color: #050505;
    font-family: "Yu Gothic Pr6N", "游ゴシック Pr6N", sans-serif;
    font-size: clamp(1.056rem, 1.013rem + 0.09vw, 1.2rem);
    /* 390px時に16.896px(1.056rem)、1920px時に19.2px(1.2rem) */
    font-weight: 700;
    line-height: 1;
    /* line-heightを1に設定して垂直中央配置を改善 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    padding-bottom: 0.05em;
    /* フォントの視覚的な中心を調整 */
    text-decoration: none;
}

@media (hover: hover) {
    .page-number:hover:not(.current) {
        background: #f0f0f0;
    }
}

/* 現在のページ */
.page-number.current {
    background: #050505;
    color: #FFF;
}

/* デスクトップのみで5番目のページを表示 */
.desktop-only {
    display: flex;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}