/**
 * News Slider Styles - Refactored Version
 * ニューススライダースタイル - リファクタリング版
 */

/* ============================================
   ニューススライダー基本スタイル
   ============================================ */

.news-slider {
    position: relative;
    overflow-x: hidden; /* 横方向は隠す（スライドが見えないように） */
    overflow-y: visible; /* 縦方向は可視（ナビゲーションボタンが切り取られないように） */
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 20px; /* ボタンが拡大しても切り取られないように余白を追加 */
}

.news-slider-container {
    display: flex !important;
    transition: transform 0.5s ease-in-out;
    /* widthはJavaScriptで動的に設定（スライド数×100%） */
    box-sizing: border-box;
    flex-direction: row !important;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden; /* スライドコンテナのみoverflow: hidden */
    flex-wrap: nowrap !important; /* スライドを横並びに保つ */
}

.news-slide {
    /* 幅はJavaScriptで動的に設定（コンテナの100% / totalSlides） */
    display: block !important;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0 !important;
    /* デフォルトの幅は設定しない（JavaScriptで必ず設定される） */
    /* flexboxで横並びにする */
    flex-grow: 0 !important;
    flex-basis: auto !important;
    /* 各スライドは親要素（.news-slider）の100%の幅を持つ */
    /* コンテナの幅がtotalSlides * 100%の場合、各スライドはコンテナの100% / totalSlidesの幅になる */
    width: 0; /* デフォルトは0にして、JavaScriptで確実に設定されるようにする */
    min-width: 0;
    max-width: none;
}

/* ============================================
   ニュースリンクスタイル
   ============================================ */

.news-slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 60px;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 120, 212, 0.2);
}

.news-slide-link:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-2px);
}

.news-slide-link:hover .news-date,
.news-slide-link:hover .news-description,
.news-slide-link:hover .news-title-text {
    color: #0078D4;
}

.news-slide-link:active {
    text-decoration: none;
    color: inherit;
    transform: translateY(-1px);
    background-color: rgba(0, 120, 212, 0.1);
    border-radius: 8px;
}

.news-slide-link:active .news-date,
.news-slide-link:active .news-description,
.news-slide-link:active .news-title-text {
    color: #0078D4;
}

.news-slide-link:focus {
    outline: 2px solid #0078D4;
    outline-offset: 2px;
    border-radius: 8px;
}

/* リンク内の子要素（ボタン以外）はポインターイベントを無効化 */
.news-slide-link *:not(button):not(.news-prev):not(.news-next) {
    pointer-events: none;
}

/* ============================================
   ナビゲーションボタン
   ============================================ */

.news-navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-shrink: 0;
    position: relative;
    z-index: 20; /* ボタンが確実に表示されるように */
    overflow: visible; /* ホバー時の拡大が切り取られないように */
}

.news-prev,
.news-next {
    background-color: #3B3B3B;
    color: #FFFFFF;
    border: none;
    width: 36px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 20;
    overflow: visible; /* ホバー時の拡大が切り取られないように */
}

.news-prev:hover,
.news-next:hover {
    background-color: #0078D4;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3); /* ホバー時の視覚効果 */
}

.news-prev:focus,
.news-next:focus {
    outline: 2px solid #0078D4;
    outline-offset: 2px;
}

.news-prev:disabled,
.news-next:disabled {
    background-color: #CCCCCC;
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

/* ============================================
   アクセシビリティ
   ============================================ */

/* aria-hiddenはスクリーンリーダー用の属性で、
   視覚的な表示には影響を与えないようにする */
.news-slide[aria-hidden="true"] {
    /* visibility: hidden; を削除 - スライダーはtransformで制御 */
}

.news-slide[aria-hidden="false"] {
    /* visibility: visible; を削除 - スライダーはtransformで制御 */
}

/* ============================================
   モバイル対応
   ============================================ */

@media (max-width: 768px) {
    .news-slider {
        padding-bottom: 30px;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden; /* 横方向は隠す（スライドが見えないように） */
        overflow-y: visible; /* 縦方向は可視（ナビゲーションボタンが切り取られないように） */
    }

    .news-slider-container {
        overflow: hidden; /* スライドコンテナのみoverflow: hidden */
    }

    .news-slide {
        padding: 20px;
        min-height: 250px;
    }

    .news-slide-link {
        padding: 8px;
        margin: -8px;
        border-radius: 8px;
    }

    .news-slide-link:active {
        transform: translateY(-1px);
        background-color: rgba(0, 120, 212, 0.1);
        border-radius: 8px;
    }

    .news-navigation {
        margin-top: 20px;
    }

    .news-prev,
    .news-next {
        width: 36px;
        height: 36px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================
   デスクトップ対応
   ============================================ */

@media (min-width: 769px) {
    .news-slider {
        overflow-x: hidden; /* 横方向は隠す（スライドが見えないように） */
        overflow-y: visible; /* 縦方向は可視（ナビゲーションボタンが切り取られないように） */
        padding-bottom: 30px; /* デスクトップ版では余白を増やす */
    }

    .news-slider-container {
        overflow: hidden; /* スライドコンテナのみoverflow: hidden */
    }

    .news-navigation {
        margin-top: 30px;
        padding-bottom: 10px; /* ボタンが拡大しても切り取られないように余白を追加 */
    }

    .news-prev,
    .news-next {
        position: relative;
        z-index: 30; /* より高いz-indexで確実に表示 */
    }

    .news-slide-link {
        -webkit-tap-highlight-color: rgba(0, 120, 212, 0.2);
    }
}