/* =========================================
   全体の枠組み（ラベルとスクロール領域を横並びに）
========================================= */
.cs-ticker-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    display: flex;
    align-items: stretch; /* ラベルと枠の高さを合わせる */
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden; /* 角丸からはみ出た部分を隠す */
    background-color: #ffffff;
}

/* =========================================
   左側の固定ラベル
========================================= */
.cs-ticker-label {
    background-color: #ff4500;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    white-space: nowrap; /* ラベルの改行を防ぐ */
    z-index: 2; /* スクロールする文字より上に表示 */
    position: relative;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1); /* 右側に少し影を落として立体感を出す */
}

/* =========================================
   スクロールを内包するエリア
========================================= */
.cs-ticker-inner {
    flex-grow: 1; /* 余った幅をすべて使う */
    overflow: hidden; /* 枠からはみ出たテキストを隠す */
    display: flex;
    align-items: center;
    white-space: nowrap; /* 中身の改行を絶対に防ぐ */
}

/* =========================================
   動くトラック（ここが右から左へ移動する）
========================================= */
.cs-ticker-track {
    display: inline-block;
    /* ▼ 最初は右端（100%の位置）からスタートさせる ▼ */
    padding-left: 100%; 
    /* 20秒かけて一定の速度（linear）で無限ループ */
    animation: cs-marquee 20s linear infinite; 
}

/* マウスを乗せた時にアニメーションを一時停止する */
.cs-ticker-inner:hover .cs-ticker-track {
    animation-play-state: paused;
}

/* =========================================
   各ニュース項目のデザイン
========================================= */
.cs-ticker-item {
    display: inline-block;
    margin-right: 48px; /* 次のニュースとの間隔を広めにとる */
}

.cs-ticker-date {
    font-size: 0.85rem;
    color: #64748b;
    margin-right: 12px;
}

.cs-ticker-link {
    font-size: 0.95rem;
    font-weight: 700;
    color: #334155;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.cs-ticker-link:hover {
    color: #2589d0;
    text-decoration: underline !important;
}

/* =========================================
   横スクロール用のアニメーションキーフレーム
========================================= */
@keyframes cs-marquee {
    0% {
        transform: translateX(0); /* padding-leftで確保した右端からスタート */
    }
    100% {
        transform: translateX(-100%); /* 自身の幅の分だけ左へ移動しきる */
    }
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-ticker-label {
        font-size: 0.75rem;
        padding: 10px 12px;
    }
    .cs-ticker-item {
        margin-right: 32px;
    }
    .cs-ticker-link {
        font-size: 0.85rem;
    }
}












/* =========================================
   1. カードを並べるグリッドレイアウト
========================================= */
.cs-crd-st7-grid {
    display: grid;
    /* テキストメインなので、少し広めの幅を確保 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
    margin-bottom: 2em;
    box-sizing: border-box;
}

/* =========================================
   2. カード本体のデザイン（画像なし特化）
========================================= */
.cs-crd-st7-item {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    background-color: #ffffff;
    /* 周りはごく薄い枠線にし、左側だけ太いアクセントラインを引く */
    border: 1px solid #e2e8f0;
    border-left: 5px solid #2589d0; 
    border-radius: 6px;
    padding: 24px 24px 24px 20px; /* 左枠線の太さを考慮した余白 */
    color: #333333;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* ホバー時に右へスライドし、背景色をほんのり変える */
.cs-crd-st7-item:hover {
    transform: translateX(6px); /* 上ではなく右に動かす */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background-color: #f8fbff; /* 極めて薄い青背景 */
}

/* =========================================
   3. テキスト情報エリア
========================================= */
/* メタ情報（カテゴリ・日付） */
.cs-crd-st7-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.75rem;
}

.cs-crd-st7-cat {
    background-color: #edf2f7;
    color: #4a5568;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cs-crd-st7-date {
    color: #a0aec0;
}

/* タイトル */
.cs-crd-st7-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 12px 0;
    color: #1a202c;
    transition: color 0.3s ease;
}

/* 説明文（抜粋テキスト） */
.cs-crd-st7-desc {
    font-size: 0.85rem;
    color: #718096;
    line-height: 1.6;
    margin: 0;
    /* 読ませる前提なので、少し余裕を持たせて3行でカット */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   4. ホバー時の連動アクション
========================================= */
.cs-crd-st7-item:hover .cs-crd-st7-title {
    color: #2589d0;
}
.cs-crd-st7-item:hover .cs-crd-st7-cat {
    background-color: #2589d0;
    color: #ffffff; /* ホバー時にカテゴリバッジも目立たせる */
}


/* =========================================
   1. ラッパー設定
========================================= */
.cs-hscroll-wrapper {
    width: 100%;
    margin-bottom: 2em;
}

/* =========================================
   2. スクロールコンテナの核（Grid + Scroll）
========================================= */
.cs-hscroll-container {
    display: grid;
    /* 要素を横方向に並べる */
    grid-auto-flow: column;
    /* 各カードの幅を固定（スマホで見切れるサイズにしてスワイプを促す） */
    grid-auto-columns: 260px;
    gap: 16px;
    
    /* 横スクロールを許可 */
    overflow-x: auto;
    /* スワイプ時の「戻る」誤動作を防止 */
    overscroll-behavior-x: contain;
    
    /* ▼ スクロールスナップの有効化 ▼ */
    scroll-snap-type: x mandatory;
    
    /* 少しだけ余白を持たせて影が切れないようにする */
    padding: 8px 4px 24px; 
    
    /* スクロールバーを非表示にする（モダンブラウザ対応） */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cs-hscroll-container::-webkit-scrollbar {
    display: none;
}

/* =========================================
   3. カード本体設定
========================================= */
.cs-hscroll-item {
    /* ▼ カードの左端をスナップの基準点にする ▼ */
    scroll-snap-align: start;
    
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-hscroll-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
}

/* =========================================
   4. 画像とテキスト
========================================= */
.cs-hscroll-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.cs-hscroll-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-hscroll-body {
    padding: 16px;
}

.cs-hscroll-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
    line-height: 1.4;
}

.cs-hscroll-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}



.scroll_content { /* リスト全体のスタイル */
  display: flex;
  max-width: 800px;
  margin: auto;
  overflow-x: auto;
}

.scroll_content li { /* 各リストのスタイル */
  width: 90%;
  padding: 8px;
  margin: 3px;
  flex-shrink: 0;
  list-style: none;
}

.scroll_content img { /* 画像のスタイル */
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.scroll_content::-webkit-scrollbar {
  height: 12px; /* スクロールバーの高さ */
}

.scroll_content::-webkit-scrollbar-thumb {
  background: #aaa; /* ツマミの色 */
  border-radius: 6px; /* ツマミ両端の丸み */
}

.scroll_content::-webkit-scrollbar-track {
  background: #ddd; /* トラックの色 */
  border-radius: 6px; /* トラック両端の丸み */
}


@media screen and (min-width: 450px) {

  .scroll_content li {
    width: 45%;
  }

}

/* =========================================
  カルーセル
========================================= */

/* =========================================
   1. スライダー全体のコンテナ
========================================= */
.cs-manual-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ラジオボタンは画面から隠す */
.cs-manual-slider input[type="radio"] {
    display: none;
}

/* =========================================
   2. スライド本体（横並びと移動の設定）
========================================= */
.cs-slider-viewport {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.cs-slider-track {
    display: flex;
    width: 300%; /* スライド3枚分（100% × 3） */
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-slide-item {
    width: 33.3333%; /* 300%のうちの3分の1 */
    height: 100%;
}

.cs-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   3. ラジオボタンの状態に応じたスライドの移動
========================================= */
#cs-slide-1:checked ~ .cs-slider-viewport .cs-slider-track {
    transform: translateX(0%);
}
#cs-slide-2:checked ~ .cs-slider-viewport .cs-slider-track {
    transform: translateX(-33.3333%);
}
#cs-slide-3:checked ~ .cs-slider-viewport .cs-slider-track {
    transform: translateX(-66.6666%);
}

/* =========================================
   4. 左右の矢印ナビゲーション
========================================= */
.cs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.7);
    color: #1a202c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
    /* デフォルトはすべて非表示 */
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.cs-arrow:hover {
    background-color:rgba(255, 165, 0, 1);
}

.cs-arrow-prev { left: 16px; }
.cs-arrow-next { right: 16px; }

/* ラジオボタンの状態に応じて、対応する矢印だけを表示する */
#cs-slide-1:checked ~ .cs-arrow-nav .cs-nav-1,
#cs-slide-2:checked ~ .cs-arrow-nav .cs-nav-2,
#cs-slide-3:checked ~ .cs-arrow-nav .cs-nav-3 {
    opacity: 1;
    pointer-events: auto; /* クリックを有効化 */
}

/* =========================================
   5. 下部のドットナビゲーション
========================================= */
.cs-dot-nav {
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 10;
}

.cs-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.cs-dot:hover {
    background-color: rgba(255, 165, 0, 1);
}

/* ラジオボタンの状態に応じて、対応するドットの色を変える */
#cs-slide-1:checked ~ .cs-dot-nav .cs-dot:nth-child(1),
#cs-slide-2:checked ~ .cs-dot-nav .cs-dot:nth-child(2),
#cs-slide-3:checked ~ .cs-dot-nav .cs-dot:nth-child(3) {
    background-color: #ffffff;
    transform: scale(1.2); /* アクティブなドットを少し大きくする */
}

/* =========================================
   1. スライダー全体のラッパー
========================================= */
.cs-thumb-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

/* ラジオボタンは画面から隠す */
.cs-thumb-wrapper input[type="radio"] {
    display: none;
}

/* =========================================
   2. メイン画像エリア（Gridで高さを自動追従）
========================================= */
.cs-thumb-main {
    display: grid; 
    grid-template-areas: "slide"; /* 全要素を同じセル「slide」に重ねる */
    width: 100%;
    border-radius: 12px;
    margin-bottom: 25px; /* ★吹き出し用のスペースを確保（20px→25px） */
    background-color: #ffffff;
}

.cs-thumb-item {
    grid-area: slide; /* 全画像を同じ位置に重ねる */
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.cs-thumb-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* =========================================
   3. サムネイルのリスト設定（Grid配置）
========================================= */
.cs-thumb-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.cs-thumb-label {
    position: relative !important; /* 吹き出しの基準位置 */
    cursor: pointer;
    border-radius: 8px;
    /* overflow: hidden; は吹き出しを表示するため削除 */
    opacity: 0.4;
    transition: opacity 0.3s ease, outline 0.3s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
    touch-action: manipulation;
}

.cs-thumb-label:hover {
    opacity: 0.8;
}

.cs-thumb-label img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* サムネイル画像の角丸 */
}

/* =========================================
   4. ラジオボタンON時の状態変化
========================================= */
/* ▼ 選択されたラジオボタンに対応するメイン画像をフェードイン ▼ */
#cs-thumb-slide1:checked ~ .cs-thumb-main .cs-thumb-item-1,
#cs-thumb-slide2:checked ~ .cs-thumb-main .cs-thumb-item-2,
#cs-thumb-slide3:checked ~ .cs-thumb-main .cs-thumb-item-3,
#cs-thumb-slide4:checked ~ .cs-thumb-main .cs-thumb-item-4,
#cs-thumb-slide5:checked ~ .cs-thumb-main .cs-thumb-item-5 {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ▼ 選択されたラジオボタンに対応するサムネイルを強調 ▼ */
#cs-thumb-slide1:checked ~ .cs-thumb-nav .cs-thumb-label-1,
#cs-thumb-slide2:checked ~ .cs-thumb-nav .cs-thumb-label-2,
#cs-thumb-slide3:checked ~ .cs-thumb-nav .cs-thumb-label-3,
#cs-thumb-slide4:checked ~ .cs-thumb-nav .cs-thumb-label-4,
#cs-thumb-slide5:checked ~ .cs-thumb-nav .cs-thumb-label-5 {
    opacity: 1;
    outline: 3px solid #2589d0;
}

/* =========================================
   5. スマホ・タブレット向けレスポンシブ設定
========================================= */
@media screen and (max-width: 600px) {
    .cs-thumb-main {
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .cs-thumb-nav {
        gap: 8px;
    }
    .cs-thumb-label,
    .cs-thumb-label img {
        border-radius: 6px;
    }
}

/* =========================================
   6. 吹き出し設定（文字 ＋ 画像）
========================================= */
/* 吹き出し本体 */
.cs-thumb-label::after {
    content: "Selected"; /* 表示したいテキスト */
    position: absolute;
    bottom: calc(100% + 6px); /* 画像の少し上 */
    left: 50%;
    transform: translateX(-50%);
    
    /* ▼ 画像を文字の左側に配置する設定 */
    background-image: url('https://bunnabi.jp/ads/img/bunnabimankao.svg'); /* 画像URL */
    background-size: 14px 14px;      /* 画像のサイズ */
    background-repeat: no-repeat;
    background-position: 6px center; /* アイコンを左端から6pxの位置に設置 */
    padding: 3px 8px 3px 24px;       /* アイコンの分だけ左パディングを広げる */

    /* デザイン・配色 */
    background-color: #ff8c00;       /* 吹き出しの背景色 */
    color: #ffffff;                  /* 文字色 */
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;             /* 改行を防ぐ */
    border-radius: 10px;
    
    /* 初期状態（非表示） */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

/* 吹き出し下の三角矢印 */
.cs-thumb-label::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #ff8c00 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

/* ▼ チェックが入った時の表示指定 ▼ */
#cs-thumb-slide1:checked ~ .cs-thumb-nav .cs-thumb-label-1::after,
#cs-thumb-slide1:checked ~ .cs-thumb-nav .cs-thumb-label-1::before,
#cs-thumb-slide2:checked ~ .cs-thumb-nav .cs-thumb-label-2::after,
#cs-thumb-slide2:checked ~ .cs-thumb-nav .cs-thumb-label-2::before,
#cs-thumb-slide3:checked ~ .cs-thumb-nav .cs-thumb-label-3::after,
#cs-thumb-slide3:checked ~ .cs-thumb-nav .cs-thumb-label-3::before,
#cs-thumb-slide4:checked ~ .cs-thumb-nav .cs-thumb-label-4::after,
#cs-thumb-slide4:checked ~ .cs-thumb-nav .cs-thumb-label-4::before,
#cs-thumb-slide5:checked ~ .cs-thumb-nav .cs-thumb-label-5::after,
#cs-thumb-slide5:checked ~ .cs-thumb-nav .cs-thumb-label-5::before {
    opacity: 1 !important;
    visibility: visible !important;
}