@charset "UTF-8";
/* トップお知らせ横スクロール帯（v2: IKEA調リデザイン）
   名前空間: .top_news / 1rem=10px / 境界 #e4e4e4 / 濃色 #171717（確定）
   可視枚数・hero幅は CSS 変数で調整可
   v1→v2: ①見出し非表示 ②hero幅整合+チラ見せ ③IKEA調バー+ドラッグ
           ④矢印をサムネ両脇縦中央(#171717) ⑤サムネ枠線+角丸 ⑦タイトル ゴシック
------------------------------------------ */
.top_news {
    /* 調整用トークン */
    --tn-gap: 1.6rem;          /* カード間 gap（PCで 24px に上書き） */
    --tn-card: 78%;            /* スマホ：次カードが少し覗く */
    --tn-hero-max: 1440px;     /* ② hero(.mv_slide) PC実効max-width 実測値 */
    --tn-dark: #171717;        /* 濃色（つまみ・矢印） */
    --tn-border: #e4e4e4;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* ① 見出しを非表示 */
.top_news__head {
    display: none;
}

/* ④ 矢印の絶対配置基準 */
.top_news .content__inner--m {
    position: relative;
}

/* ビューポート＆トラック */
.top_news__viewport {
    position: relative;
}
.top_news__track {
    display: flex;
    gap: var(--tn-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    /* v5 A: v3 の x proximity → none。ホイール/ドラッグ時の再スナップによる
       もたつきを解消。.top_news__card の scroll-snap-align は none 下では不活性
       （将来スナップ復活も容易）。JS のドラッグ処理は pointerup でインライン値を
       空に戻す＝CSS の none に整合。 */
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox：ネイティブバーを隠す */
    -ms-overflow-style: none;
    cursor: grab;                   /* v3 ⑨: 掴んで動かせることを示す */
}
.top_news__track::-webkit-scrollbar {
    display: none;                  /* WebKit：ネイティブバーを隠す */
}
/* v3 ⑨: ドラッグ中 */
.top_news__track.is-grabbing {
    cursor: grabbing;
    user-select: none;
}
/* v3 ⑨: 画像のゴーストドラッグ抑止 */
.top_news__track img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* カード（② 幅はレスポンシブで可視枚数を制御） */
.top_news__card {
    flex: 0 0 auto;
    width: var(--tn-card);
    scroll-snap-align: start;
}
.top_news__card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ⑤ サムネ：枠線 1px #e4e4e4 ＋ 角丸 15px（角の背景・影ハミ出し対策）
   1:1 維持は aspect-ratio（フォールバックはパディングハック） */
.top_news__thumb {
    position: relative;
    margin: 0 0 1.2rem;
    width: 100%;
    padding-top: 100%;              /* フォールバック：1:1 */
    overflow: hidden;
    border: 1px solid var(--tn-border);
    border-radius: 5px;             /* v3 ⑤改: 15px → 5px */
    background: transparent;        /* 角の背景色ハミ出し対策 */
    line-height: 0;
}
.top_news__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;         /* Safari の角ハミ出し対策 */
}
/* aspect-ratio 対応ブラウザではパディングハックを解除 */
@supports (aspect-ratio: 1 / 1) {
    .top_news__thumb {
        padding-top: 0;
        aspect-ratio: 1 / 1;
    }
    .top_news__thumb img {
        position: static;
    }
}

.top_news__date {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: #888;
    line-height: 1.4;
}

/* ⑦ タイトル：明朝 → ゴシック（端末標準＝Webフォント追加なし・繊細さ維持） */
.top_news__ttl {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                 "Yu Gothic Medium", "YuGothic", Meiryo, system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 400;               /* 繊細に。700 不可 */
    letter-spacing: 0.03em;
    line-height: 1.6;
    /* 最大3行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ④ 左右矢印（IKEA調・サムネ両脇縦中央・濃色 #171717）
   DOM は .top_news__controls 内のままだが、絶対配置で inner 基準に浮かせる */
.top_news__arrow {
    position: absolute;
    top: calc(var(--tn-thumb-h, 200px) / 2);
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--tn-dark);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background .2s ease, opacity .2s ease;
}
.top_news__arrow:hover {
    background: #333;
}
.top_news__arrow:disabled {       /* 端で消す */
    opacity: 0;
    pointer-events: none;
}
.top_news__arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-style: solid;
    border-color: #fff;
    border-width: 2px 2px 0 0;
}
.top_news__arrow--prev {
    left: 0;
}
.top_news__arrow--prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}
.top_news__arrow--next {
    right: 0;
}
.top_news__arrow--next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

/* ③ スクロールバー（IKEA調：明トラック＋濃色つまみ・ドラッグ可） */
.top_news__controls {
    margin-top: 20px;
}
.top_news__bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--tn-border);
    border-radius: 999px;
    cursor: pointer;
}
.top_news__bar_thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    min-width: 40px;
    border-radius: 999px;
    background: var(--tn-dark);
    cursor: grab;
    touch-action: none;
    will-change: transform, width;
}
.top_news__bar_thumb:active {
    cursor: grabbing;
}

.top_news__more {
    margin-top: 2.4rem;
    text-align: right;
}

/* ===== レスポンシブ：② hero幅整合＋可視枚数（常時6件以上を前提） ===== */
@media screen and (min-width: 768px) {
    .top_news {
        --tn-gap: 24px;
        --tn-card: calc((100% - 2 * var(--tn-gap)) / 3); /* タブレット：約3枚 */
    }
}
@media screen and (min-width: 992px) {
    /* ② PC: 左右ラインを hero(.mv_slide max-width:1440 / ガター0) に合わせる */
    .top_news .content__inner--m {
        max-width: var(--tn-hero-max, 1440px);
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }
    .top_news {
        --tn-card: calc((100% - 3 * var(--tn-gap)) / 3.3); /* 約3枚+チラ見 */
    }
    /* v5 B: PCでスクロールバーをヒーロー指標と同等に細く・中央に短く。
       ヒーロー指標 .mv_slide .slick-dots button::before/::after の実測 height:3px に一致。
       つまみ(.top_news__bar_thumb)は height:100% のため自動で 3px のピルに。
       JS は bar.clientWidth を都度参照＝幅が短くなってもドラッグ/クリックジャンプは機能。 */
    .top_news__bar {
        height: 3px;          /* ヒーロー指標の太さ(実測3px)に一致 */
        max-width: 280px;     /* 左右いっぱいに広げない（調整ノブ） */
        margin-left: auto;    /* 中央寄せ */
        margin-right: auto;
    }
}
@media screen and (min-width: 1200px) {
    .top_news {
        --tn-card: calc((100% - 4 * var(--tn-gap)) / 4.3); /* 約4枚+チラ見 */
    }
}
@media screen and (min-width: 1440px) {
    .top_news {
        --tn-card: calc((100% - 5 * var(--tn-gap)) / 5.3); /* 約5枚+チラ見 */
    }
}