:root {
    --green: #158E00
}

.pc{display: block;}
.sp{display: none;}
@media (max-width: 767px){
    .pc{display: none;}
    .sp{display: block;}
}

/*
 * ファーストビューのカードは、main.js の読み込み前から隠しておく。
 * body にクラスを付ける方式では初回描画時に一度だけ見えてしまうため、
 * head で付与する js-enabled を基準にし、表示開始は fv-is-visible に分離する。
 */
html.js-enabled .hero-grid .race-visual, html.js-enabled .hero-grid .timeline, html.js-enabled .hero-grid .live-card, html.js-enabled .hero-grid .predict, html.js-enabled .jogai-hero .race-visual, html.js-enabled .jushou-hero-grid .jushou-mv, html.js-enabled .jushou-hero-grid .jushou-info-card, html.js-enabled .jushou-hero-grid .jushou-system-card {
    opacity: 0 !important;
    transform: translate3d(0,24px,0) scale(.985) !important;
    transition: opacity .58s ease var(--fv-reveal-delay,0ms),transform .58s cubic-bezier(.22,1,.36,1) var(--fv-reveal-delay,0ms) !important;
    will-change: opacity,transform;
}

html.js-enabled .hero-grid .race-visual.fv-is-visible, html.js-enabled .hero-grid .timeline.fv-is-visible, html.js-enabled .hero-grid .live-card.fv-is-visible, html.js-enabled .hero-grid .predict.fv-is-visible, html.js-enabled .jogai-hero .race-visual.fv-is-visible, html.js-enabled .jushou-hero-grid .jushou-mv.fv-is-visible, html.js-enabled .jushou-hero-grid .jushou-info-card.fv-is-visible, html.js-enabled .jushou-hero-grid .jushou-system-card.fv-is-visible {
    opacity: 1 !important;
    transform: translate3d(0,0,0) scale(1) !important;
}

/* 場外FVのピックアップニュースは、カード全体ではなく中身を順に表示する。 */
html.js-enabled .jogai-hero .hero-news h2,
html.js-enabled .jogai-hero .hero-news .hero-news-item {
    opacity: 0 !important;
    transform: translate3d(0,16px,0) !important;
    transition: opacity .42s ease var(--fv-news-delay,0ms),transform .42s cubic-bezier(.22,1,.36,1) var(--fv-news-delay,0ms) !important;
    will-change: opacity,transform;
}

html.js-enabled .jogai-hero .hero-news h2.fv-news-is-visible,
html.js-enabled .jogai-hero .hero-news .hero-news-item.fv-news-is-visible {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
}

/* TOPのピックアップニュースは、見出しから記事順に表示する。 */
html.js-enabled #news .section-title,
html.js-enabled #news .news-list:not(.secondary) a {
    opacity: 0 !important;
    transform: translate3d(0,16px,0) !important;
    transition: opacity .42s ease var(--top-news-delay,0ms),transform .42s cubic-bezier(.22,1,.36,1) var(--top-news-delay,0ms) !important;
    will-change: opacity,transform;
}

html.js-enabled #news .section-title.top-news-is-visible,
html.js-enabled #news .news-list:not(.secondary) a.top-news-is-visible {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
}

/* ニュースのカテゴリ切り替えも、見出し・記事と同じ到達アニメーションに揃える。 */
html.js-enabled #news .news-tabs {
    opacity: 0 !important;
    transform: translate3d(0,16px,0) !important;
    transition: opacity .42s ease var(--top-news-tabs-delay,0ms),transform .42s cubic-bezier(.22,1,.36,1) var(--top-news-tabs-delay,0ms) !important;
    will-change: opacity,transform;
}

html.js-enabled #news .news-tabs.top-news-tabs-is-visible {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
}

/* タブ下の新着一覧は、一覧自体が画面に入ってから記事順に表示する。 */
html.js-enabled #news .news-list.secondary a {
    opacity: 0 !important;
    transform: translate3d(0,16px,0) !important;
    transition: opacity .42s ease var(--tab-news-delay,0ms),transform .42s cubic-bezier(.22,1,.36,1) var(--tab-news-delay,0ms) !important;
    will-change: opacity,transform;
}

html.js-enabled #news .news-list.secondary a.tab-news-is-visible {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
}

/*
 * ピックアップのスクロール表示。
 * 既存の共通スクロール表示・カルーセル用スタイルから分離し、
 * 最初は必ず隠す。pickup-is-visible は main.js がスクロール検知後に
 * 左から順に付与する専用クラス。
 */
html.js-enabled .pickup-list article:not(.pickup-is-visible) {
    opacity: 0 !important;
    transform: none !important;
    transition: opacity .58s ease var(--pickup-reveal-delay,0ms),box-shadow .22s ease,filter .22s ease !important;
    will-change: opacity;
}

html.js-enabled .pickup-list article.pickup-is-visible:not(:hover):not(:focus-visible) {
    opacity: 1 !important;
    transform: none !important;
}

html.js-enabled .pickup-list article.pickup-is-visible.pickup-edge {
    opacity: .4 !important;
}

/* TOP・場外の「佐賀競馬を知る・楽しむ」はカードごとに左から順に表示する。 */
html.js-enabled .home-page .guide-list a:not(.guide-is-visible),
html.js-enabled .jogai .guide-list a:not(.guide-is-visible) {
    opacity: 0 !important;
    transform: translate3d(0,28px,0) scale(.985) !important;
    transition: opacity .62s ease var(--guide-reveal-delay,0ms),transform .62s cubic-bezier(.22,1,.36,1) var(--guide-reveal-delay,0ms),box-shadow .22s ease,filter .22s ease !important;
    will-change: opacity,transform;
}

html.js-enabled .home-page .guide-list a.guide-is-visible:not(:hover):not(:focus-visible),
html.js-enabled .jogai .guide-list a.guide-is-visible:not(:hover):not(:focus-visible) {
    opacity: 1 !important;
    transform: translate3d(0,0,0) scale(1) !important;
}

@media (hover:hover) and (pointer:fine) {
    /* スクロール表示用の遅延を、カードの hover 操作には引き継がない。 */
    .js-motion .reveal.is-visible:hover,
    .js-motion .reveal.is-visible:focus-visible,
    html.js-enabled .pickup-list article.pickup-is-visible:hover,
    html.js-enabled .pickup-list article.pickup-is-visible:focus-visible,
    html.js-enabled .home-page .guide-list a.guide-is-visible:hover,
    html.js-enabled .home-page .guide-list a.guide-is-visible:focus-visible,
    html.js-enabled .jogai .guide-list a.guide-is-visible:hover,
    html.js-enabled .jogai .guide-list a.guide-is-visible:focus-visible {
        transition-delay: 0s !important;
    }

}

@media (prefers-reduced-motion: reduce) {
    html.js-enabled .hero-grid .race-visual,
    html.js-enabled .hero-grid .timeline,
    html.js-enabled .hero-grid .live-card,
    html.js-enabled .hero-grid .predict,
    html.js-enabled .jogai-hero .race-visual,
    html.js-enabled .jogai-hero .jogai-side > .card,
    html.js-enabled .jogai-hero .hero-news h2,
    html.js-enabled .jogai-hero .hero-news .hero-news-item,
    html.js-enabled #news .section-title,
    html.js-enabled #news .news-list a,
    html.js-enabled .jushou-hero-grid .jushou-mv,
    html.js-enabled .jushou-hero-grid .jushou-info-card,
    html.js-enabled .jushou-hero-grid .jushou-system-card,
    html.js-enabled .pickup-list article,
    html.js-enabled .home-page .guide-list a,
    html.js-enabled .jogai .guide-list a {
        opacity: 1 !important;
        transform: none !important;
    }
}

html {
    scrollbar-gutter: stable
}

body {
    font-size: 16px
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.status-dot {
    flex: none;
    line-height: 1
}

.status-pc,.status-sp {
    letter-spacing: .06em
}

.status-sp {
    display: none
}

.jogai .site-header .status {
    background: #848484
}

.hero-jogai {
    background-image: url(../images/head-bg.png)
}

.jogai-side .sales {
    background: linear-gradient(#fff 0,#ebebeb 100%);
    border: 1px solid #fff;
    box-shadow: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.16))
}

.jogai-side .sales h2 {
    margin: 0 0 18px;
    color: #333;
    font-size: 20px;
    line-height: 1.4;
    padding-left: 16px;
    position: relative;
}

.jogai-side .sales h2::before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #dd0000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.jogai-side .sales>div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jogai-side .sales span {
    flex: 0 1 60px;
    padding: 10px;
    border-radius: 10px;
    background: #158e00;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center
}

.global-nav {
    max-height: 130px
}

.menu-button {
    background: #158e00
}

.jogai-copy,.race-copy {
    text-shadow: none
}

.jogai-copy {
    z-index: 2
}

.race-copy .live-badge {
    border-radius: 12px;
    background: #c71d00;
    box-shadow: none;
    font-size: 16px;
    letter-spacing: 0.05em;
}

.race-copy small {
    font-family: Jost,"Noto Sans JP",sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-shadow: none
}

.race-copy strong,.race-copy>span {
    text-shadow: none
}

.timeline ol {
    display: grid;
    gap: 8px;
}

.timeline li {
    margin-bottom: 0;
    background: #848484
}

.timeline li.selling-row {
    background: #fff;
    color: var(--ink)!important;
}

.live-card {
    background: linear-gradient(#008200 0,#77c600 100%);
    box-shadow: 0 3px 6px rgba(0,0,0,.16)
}

.guide-list a {
    background: linear-gradient(#fff 0,#ebebeb 100%);
    box-shadow: 0 3px 10px rgba(0,0,0,.1)
}

.pickup-section {
    overflow: hidden
}

.pickup-carousel {
    position: relative
}

.pickup-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 34px;
    height: 58px;
    padding: 0;
    border: 0;
    background: 0 0;
    color: var(--green);
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform .18s
}

.pickup-arrow:hover {
    transform: translateY(-50%) scale(1.12)
}

.pickup-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor
}

.pickup-prev {
    left: -8px
}

.pickup-prev::before {
    transform: translate(-35%,-50%) rotate(-135deg)
}

.pickup-next {
    right: -8px
}

.pickup-next::before {
    transform: translate(-65%,-50%) rotate(45deg)
}

@media (min-width: 768px) {
    .pickup-list {
        grid-template-columns:repeat(5,378px);
        justify-content: center;
        transition: transform .26s cubic-bezier(.22,1,.36,1)
    }

    .pickup-list article:first-child,.pickup-list article:last-child {
        opacity: .4
    }

    .pickup-list.is-sliding-next {
        transform: translateX(-402px)
    }

    .pickup-list.no-transition {
        transition: none
    }
}

.race-visual {
    isolation: isolate;
    touch-action: pan-y
}

.jushou-mv-image {
    touch-action: pan-y
}

.race-slides {
    position: absolute;
    z-index: 0;
    inset: 0 0 70px;
    overflow: hidden
}

.race-slides img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0;
    transform: scale(1.025);
    transition: opacity .65s,transform 4.8s
}

.race-slides img.is-active {
    opacity: 1;
    transform: scale(1)
}

.race-visual::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 70px;
    pointer-events: none;
    background: linear-gradient(to bottom,rgba(0,0,0,0) 28%,rgba(0,0,0,.12) 48%,rgba(0,0,0,.76) 100%)
}

.race-copy {
    z-index: 2
}

.race-copy strong {
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.85)
}

.race-dots {
    position: absolute;
    z-index: 3;
    right: 20px;
    bottom: 104px;
    display: flex;
    gap: 13px
}

.race-dots button {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: background-color .18s,transform .18s
}

.race-dots button:hover {
    transform: scale(1.18)
}

.race-dots button.is-active {
    background: #08a322
}

.race-prize {
    grid-template-columns: 1.2fr 1fr .8fr;
    gap: 0;
    background: #a58500
}

.race-prize>* {
    min-width: 0;
    text-align: center
}

.race-prize>span:first-child {
    padding-inline:18px;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.race-prize>b {
    padding-inline:26px;
    border: 0;
    font-size: 20px;
    white-space: nowrap
}

.race-prize>span:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    margin-bottom: 2px;
}

.race-prize strong {
    font-size: 30px;
    line-height: 1.1;
}

.live-card b,.race-copy small {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-card b img,.race-copy small img {
    width: 32px;
    height: auto;
    flex: none
}

.section-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.section-title>img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: none
}

.pickup-section .section-title>img,.recruit .section-title>img {
    width: 25px;
}

.schedule .section-title>img {
    filter: brightness(0) invert(1)
}

.news .section-title>img {
    width: 26px
}

.youtube .section-title>img {
    width: 25px
}

.news-list time {
    color: #676767;
    font-size: 18px;
}

.news-list em {
    font-size: 14px
}

.news-list b {
    font-size: 16px;
    margin-top: 4px;
}

.predict {
    padding: 18px 20px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow)
}

.predict>div {
    gap: 20px
}

.predict>div img {
    width: calc((100% - 20px)/ 2);
    height: auto;
    object-fit: cover;
    box-shadow: 0 7px 16px rgba(0,0,0,.16)
}

.standalone-predict .container>div {
    gap: 32px;
    align-items: center
}

.standalone-predict img {
    width: min(360px,calc((100% - 32px)/ 2));
    box-shadow: 0 7px 16px rgba(0,0,0,.16)
}

.standalone-predict h2 img{
    width: 24px;
    border: none;
    box-shadow: none;
}

.standalone-predict .section-title {
    justify-content: center;
    text-align: center
}

.guide-list .gold-text {
    font-size: 22px;
    line-height: 1.45
}

.guide-list a:nth-child(3) b {
    width: max-content;
    padding: 5px 18px;
    border: 2px solid #b38c16;
    border-radius: 10px;
    color: #a77f00;
    font-size: 20px;
    line-height: 1.35;
    background: #fff;
}

.guide-list i {
    position: relative;
    display: block;
    padding: 0;
    font-size: 0;
    line-height: 1
}

.guide-list i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(-65%,-50%) rotate(45deg);
    transform-origin: center
}

.notice-extra {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .38s cubic-bezier(.22,1,.36,1),opacity .28s
}

.notice-extra>.notice-list {
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none
}

.notices.is-open .notice-extra {
    grid-template-rows: 1fr;
    opacity: 1
}

.notice-more {
    width: 100%;
    border: 0;
    border-radius: 0 0 12px 12px;
    background: #158e00;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
}

.notice-more::before{
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40%;
    margin: auto;
    
}

.notice-more:hover::before{
    border-color: #158e00;
}

.notices.is-open .notice-more::before {
    transform: rotate(-45deg);
}

.notices .container>.notice-list {
    border-radius: 12px 12px 0 0
}

.js-motion .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease var(--reveal-delay,0ms),transform .55s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms)
}

.js-motion .reveal.is-visible {
    opacity: 1;
    transform: none
}

.more,.notice-list,.notice-list a,.notice-more {
    transition: transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,filter .18s,border-color .18s,background-color .18s,color .18s,font-weight .18s
}

.news-list a {
    /* border: 2px solid transparent; */
}

.notice-list a:hover {
    transform: translateX(4px);
    background: #fff;
    color: var(--green);
    font-weight: 700
}

.more:hover,.notice-more:hover {
    transform: translateY(-2px);
    background: #fff;
    color: var(--green);
    box-shadow: 0 0 0 2px var(--green),0 8px 18px rgba(22,142,0,.2)
}

.more.pale:hover {
    background: var(--green);
    color: #fff;
    box-shadow: 0 0 0 2px #fff,0 8px 18px rgba(0,0,0,.2)
}

.more.pale:hover::before{
    border-color: #fff;
}

.net-vote {
    transition: background-color .22s,color .22s
}

.net-vote:hover {
    background: var(--green);
    color: #fff
}

.global-nav a,.mobile-shortcuts a {
    transition: color .25s
}

.global-nav a img,.mobile-shortcuts a img {
    transition: transform .25s
}

.global-nav a:hover,.mobile-shortcuts a:hover {
    color: var(--green)
}

.global-nav a:hover img,.mobile-shortcuts a:hover img {
    transform: translateY(-2px) scale(1.06)
}

.live-thumbnail {
    display: block;
    overflow: hidden;
    border-radius: 9px;
}

.live-thumbnail img {
    border-radius: inherit
}

.news-tabs button {
    cursor: pointer;
    transition: background-color .22s,color .22s,border-color .22s,transform .22s
}

.news-tabs button:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.news-tabs .selected:hover {
    background: #fff;
    color: var(--green)
}

.news-list a[hidden] {
    display: none
}

.youtube-grid a {
    overflow: visible
}

.youtube-grid img {
    border-radius: 9px
}

.predict>div img,.recruit-grid a,.recruit-grid img,.standalone-predict img {
    overflow: hidden;
    border-radius: 12px
}

.recruit-grid a {
    display: block
}

.recruit-grid img {
    width: 100%;
    max-width: 100%;
    border-radius: inherit
}

.horse-line {
    position: relative;
    height: max(230px,12vw);
    overflow: hidden;
    border-bottom: 0;
    isolation: isolate;
    z-index: 0;
}

.horse-line .footer-horses {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 0;
    width: max(1920px, 100vw);
    height: auto;
    max-width: none;
    transform: translateX(-50%);
    object-fit: contain;
}

.horse-line .footer-grass {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: -1px;
    width: 1920px;
    height: auto;
    max-width: none;
    object-fit: fill;
}

.footer-links {
    margin-top: -40px;
}

.footer-links a {
    transition: background-color .25s,filter .25s
}

.footer-links a small {
    transition: transform .25s
}

.footer-links a:hover {
    background: rgba(255,255,255,.1);
    filter: brightness(1.14)
}

.footer-links a:hover small {
    transform: translateY(-2px)
}

.fixed-bet-footer,.pickup-more,.race-action,.timeline-arrow {
    display: none
}

.timeline li em {
    font-weight: 700
}

.timeline li.feature em {
    color: #a58500;
    background: #fff;
}

.timeline li b {
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1
}

.timeline .race-number {
    font-size: 25px
}

.timeline .race-unit {
    font-size: 16px
}

.timeline h2 small {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(#575757 0,#a6a6a6 100%)
}

.timeline h2 small::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #fff
}

.timeline h2 small::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg)
}

.pickup-list article {
    border: .8px solid #fff;
    background: linear-gradient(#fff 0,#ebebeb 100%);
    box-shadow: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.16))
}

.news-list em,.news-list i {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    line-height: 1.35
}

.news-list i {
    margin-left: 8px;
    border-radius: 999px;
    background: #c71d00;
    color: #fff;
    font-size: 14px
}

.news-list i::before {
    content: "•";
    margin-right: 2px;
    color: #fff
}

.news-tabs {
    margin-top: 36px
}

.youtube {
    background: url(../images/youtube-bg.png) center/cover no-repeat
}

.recruit .section-title {
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
}

.recruit .container {
    max-width: none
}

.recruit-grid {
    grid-template-columns: minmax(0,440px) minmax(0,440px);
    justify-content: center;
    gap: 30px
}

@media (max-width: 767px) {
    section.recruit{
        padding: 24px 0;
    }
    .recruit .section-title{
        justify-content: flex-start;
    }
    .recruit-grid {
        gap:10px
    }
    .notice-more::before{
        right: 30%
    }
}

.notice-list a {
    height: 67px;
    min-height: 67px;
    align-items: center
}

@media (max-width: 1000px){
    .horse-line .footer-horses{
        width: 100%;
    }
}

@media (min-width: 768px) {
    .footer-links a {
        height: 100px;
        min-height: 100px;
    }

    .home-page .news-list b,.home-page .news-list time {
        font-size: 18px;
    }

    .home-page .news-list em,.home-page .news-list i {
        font-size: 14px
    }
}

.schedule .more {
    font-size: 15px;
}

@media (min-width: 1240px) {
    .header-inner,.site-header {
        height: 120px;
        min-height: 120px;
        max-height: 120px;
    }

    .section-title {
        margin-bottom: 24px;
        font-size: 24px;
        line-height: 1.45
    }

    .section-title>img {
        width: 25px;
        height: 25px
    }

    .hero-home {
        padding: 60px 0 70px
    }

    .hero-jogai {
        height: auto;
        padding: 70px 0;
    }

    .hero-grid {
        grid-template-rows: 520px 168px;
        gap: 30px 24px
    }

    .race-visual,.timeline {
        height: 520px;
    }

    .jogai-side {
        grid-template-rows: auto;
    }

    .jogai-side .card {
        height: auto;
    }

    .live-card,.predict {
        height: 168px
    }

    .race-visual {
        border-radius: 20px;
        box-shadow: 0 8px 20px rgba(0,0,0,.12)
    }

    .predict,.timeline {
        border-radius: 18px;
        box-shadow: 0 8px 20px rgba(0,0,0,.11)
    }

    .timeline {
        padding: 20px 22px
    }

    .predict h2,.timeline h2 {
        font-size: 20px;
    }

    .timeline li {
        height: 38px;
        margin-bottom: 7px
    }

    .predict {
        padding: 18px 20px 20px
    }

    .pickup-section {
        height: 552px;
        padding: 60px 0;
    }

    .pickup-list article {
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,.11)
    }

    .pickup-list article>img {
        border-radius: 12px 12px 0 0
    }

    .schedule {
        height: auto;
        padding: 50px 0;
    }

    .schedule .container{
        width: min(1280px,calc(100% - 40px));
    }

    .schedule-list article {
        min-height: 236px;
        padding: 20px 16px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,.15);
        gap: 5px;
    }

    .schedule .more {
        margin-top: 32px
    }

    .guide {
        padding: 64px 0 0;
    }

    .guide-list {
        gap: 20px;
    }

    .guide-list a {
        min-height: 200px;
        grid-template-columns: 390px 1fr auto;
        border-radius: 20px;
        box-shadow: 0 8px 22px rgba(0,0,0,.11)
    }

    .guide-list img {
        width: 390px;
        height: 200px;
    }

    .guide-list span {
        padding: 30px 40px;
        gap: 12px
    }

    .guide-list em {
        font-size: 16px;
    }

    .guide-list b {
        font-size: 22px;
    }

    .guide-list i {
        width: 40px;
        height: 40px;
        margin-right: 34px
    }

    .news {
        padding: 80px 0;
    }

    .news-list {
        gap: 20px;
    }

    .news-list a {
        padding: 16px 24px;
        border-radius: 12px;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,.06)
    }

    .news-list strong {
        right: 24px
    }

    .news-tabs {
        gap: 10px;
        margin: 30px 0 20px;
    }

    .news-tabs button {
        padding: 4px 18px;
        min-width: 100px;
    }

    .youtube {
        min-height: 880px;
        padding: 110px 0;
    }

    .youtube-grid {
        gap: 32px 36px
    }

    .youtube-grid img {
        border-radius: 12px;
        box-shadow: 0 8px 22px rgba(0,0,0,.13)
    }

    .youtube-grid span {
        margin-top: 10px;
        font-size: 20px;
    }

    .recruit {
        padding: 60px 0;
    }

    .recruit-grid {
        gap: 30px
    }

    .recruit-grid a,.recruit-grid img {
        border-radius: 12px
    }

    .recruit-grid img {
        box-shadow: 0 8px 22px rgba(0,0,0,.13)
    }

    .notices {
        padding: 64px 0
    }

    .notice-list {
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(0,0,0,.06)
    }

    .notice-list a {
        padding: 18px 24px;
        font-size: 16px
    }

    .notice-more {
        min-height: 60px;
        font-size: 18px
    }
    .footer-links a {
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1.35
    }

    .footer-links a small {
        font-size: 16px;
    }

    .footer-brand {
        gap: 40px
    }

    .jogai-copy {
        padding: 210px 20px 82px 28px;
    }

    .jogai-copy b {
        position: absolute;
        left: 28px;
        bottom: 100px;
        margin: 0;
        display: inline-block;
        font-size: 60px;
        line-height: 1.15
    }

    .jogai-copy b em {
        font-size: 28px;
    }

    .jogai-copy span {
        position: absolute;
        left: 240px;
        bottom: 110px;
        margin: 0;
        font-size: 28px;
        line-height: 1.15
    }

    .jogai-copy p {
        height: 82px;
        padding: 0 28px;
        display: flex;
        align-items: center;
        font-size: 26px;
        line-height: 1.4
    }

    .jogai-hero .race-dots {
        bottom: 118px
    }
}

@media (max-width: 767px) {
    .home-page .news-list b,.home-page .news-list time {
        font-size:12px
    }

    .home-page .news-list em,.home-page .news-list i {
        font-size: 10px
    }
}

@media (prefers-reduced-motion:reduce) {
    *,::after,::before {
        scroll-behavior: auto!important;
        animation-duration: NaNs!important;
        animation-iteration-count: 1!important;
        transition-duration: NaNs!important
    }

    .js-motion .reveal {
        opacity: 1;
        transform: none
    }
}

@media (min-width: 768px) and (max-width:1239px) {
    .header-inner {
        min-height: 180px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 10px;
    }

    .logo {
        width: 160px
    }

    .status {
        position: absolute;
        right: 20px;
        top: 30px;
    }

    .global-nav {
        grid-column: 1/-1;
        grid-row: 2;
        width: 100%;
        margin: 0;
        gap: 8px
    }

    .global-nav a span {
        min-width: 0;
        font-size: 14px;
    }

    .global-nav img {
        width: 30px;
        height: 30px;
        margin-bottom: 5px
    }

    .hero-home,.hero-jogai {
        padding: 48px 0
    }

    .hero-grid,.jogai-hero {
        grid-template-columns: minmax(0,3fr) minmax(300px,2fr);
        gap: 20px
    }

    .race-copy {
        padding: 0 22px 82px
    }

    .race-copy strong {
        font-size: clamp(34px,4.4vw,50px)
    }

    .race-copy small,.race-copy>span:last-child {
        font-size: 17px
    }

    .race-copy b {
        font-size: 22px
    }

    .race-prize {
        height: 70px;
        padding: 12px 16px;
        gap: 12px;
        font-size: 12px
    }

    .race-prize>b,.race-prize>span:first-child {
        padding-inline:12px;
        font-size: 18px;
    }

    .race-prize strong {
        font-size: 24px;
    }

    .timeline {
        padding: 14px
    }

    .timeline h2 {
        font-size: 15px
    }

    .timeline li {
        height: 34px;
        grid-template-columns: 42px 1fr auto
    }

    .timeline li b {
        font-size: 16px
    }

    .timeline li span {
        font-size: 12px
    }

    .live-card {
        min-height: 105px
    }

    .live-card b {
        font-size: 18px
    }

    .predict>div img {
        height: auto
    }

    .pickup-list,.schedule-list {
        gap: 14px
    }

    .schedule-list article {
        padding: 13px 10px
    }

    .guide-list a {
        grid-template-columns: 280px 1fr auto
    }

    .guide-list img {
        width: 280px
    }

    .jogai-copy {
        padding: 240px 20px 0;
    }

    .jogai-copy strong {
        font-size: 60px;
    }

    .jogai-copy b {
        font-size: 40px
    }

    .jogai-copy p {
        padding: 20px 30px;
        font-size: min(18px, 3vw);
    }

    .jogai-side .card {
        padding: 13px 16px;
        height: max-content;
    }
}

@media (min-width: 768px) and (max-width:900px) {
    .hero-grid,.jogai-hero {
        grid-template-columns:1fr;
    }

    .jogai-side,.live-card,.predict,.race-visual,.timeline {
        max-width: 706px;
        width: 100%;
        margin-inline:auto;
        height: auto;
        }

    .jogai-copy {
        padding: 120px 20px 0;
    }
    .timeline ol {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 7px
    }

    .timeline li {
        margin: 0
    }

    .schedule-list {
        grid-template-columns: repeat(3,1fr)
    }

    .schedule-list article:nth-child(n+4) {
        display: none
    }
}

@media (max-width: 430px) {
    .header-inner {
        padding:10px 10px 0;
        grid-template-columns: 90px minmax(76px,1fr) 82px 44px;
        grid-template-rows: 42px 74px;
        gap: 8px 4px
    }

    .section .section-title>img {
        width: 18px;
        height: 18px
    }

    .news .section-title>img,.youtube .section-title>img {
        width: 20px
    }

    .logo {
        width: 80px;
        margin-left: 0
    }

    .status {
        min-width: 0;
        padding: 4px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 9px
    }

    .net-vote {
        min-width: 0;
        padding: 4px 4px 4px 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 9px;
        white-space: nowrap
    }

    .net-vote img {
        width: 16px;
        height: 16px;
        object-fit: contain
    }

    .menu-button {
        width: 44px
    }

    .mobile-shortcuts a {
        height: 57px;
        font-size: 10px;
        line-height: 1.3;
        text-align: center
    }

    .mobile-shortcuts img {
        width: 22px;
        height: 22px
    }

    .race-copy {
        padding-left: 12px;
        padding-right: 12px
    }

    .live-card b,.race-copy small {
        gap: 6px
    }

    .live-card b img,.race-copy small img {
        width: 23px
    }

    .race-copy strong {
        font-size: clamp(28px,8vw,34px)
    }

    .race-prize {
        grid-template-columns: minmax(0,1.35fr) minmax(0,1.15fr) auto;
        padding-inline:8px}

    .race-prize>b {
        min-width: 0;
        padding-inline:6px;overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .timeline h2 {
        gap: 5px
    }

    .timeline h2 small {
        padding-inline:7px;white-space: nowrap
    }

    .live-card {
        gap: 6px
    }

    .live-card img {
        flex: 0 0 105px;
        width: 105px
    }

    .standalone-predict .section-title{
        justify-content: flex-start;
    }
    .predict>div,.standalone-predict .container>div {
        min-width: 0;
        gap: 10px
    }

    .predict>div img,.standalone-predict img {
        min-width: 0;
        width: calc((100% - 10px)/ 2);
        border-radius: 7px;
        box-shadow: 0 4px 10px rgba(0,0,0,.15)
    }

    .guide-list a {
        grid-template-columns: 110px minmax(0,1fr) auto;
    }

    .guide-list img {
        width: 110px;
    }

    .guide-list span {
        min-width: 0
    }

    .guide-list b {
        overflow-wrap: anywhere
    }

    .news-list a {
        min-width: 0
    }

    .news-list b {
        overflow-wrap: anywhere
    }

    .footer-brand img {
        width: 140px
    }
}

@media (max-width: 767px) {
    .race-prize {
        display:flex;
        align-items: center;
        gap: 0
    }

    .race-prize>b,.race-prize>span:first-child {
        flex: 1 1 auto;
        min-width: 0;
        padding-inline:6px;font-size: 14px;
        white-space: nowrap
    }

    .race-prize>b {
        overflow: visible;
        text-overflow: clip
    }

    .race-prize>span:last-child {
        flex: 1 1 auto;
        padding-inline:6px;
        font-size: 10px;
        white-space: nowrap
    }

    .race-prize strong {
        font-size: 16px
    }

    .jogai-side .sales h2 {
        margin-bottom: 12px;
        font-size: 18px
    }

    .jogai-side .sales span {
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 14px
    }

    .hero-home .race-visual {
        width: 100%;
        height: clamp(285px,76vw,330px);
        flex: none
    }

    .pickup-list {
        margin-left: 0;
        margin-right: -20px;
        padding-left: 0;
        padding-right: 20px;
        scroll-padding-left: 0
    }

    .schedule-list {
        overflow-x: auto;
        overflow-y: hidden;
        padding-top: 3px;
        padding-bottom: 4px;
    }

        body .schedule .more.pale {
        width: 170px;
        height: 42px;
        line-height: 1;
        margin: 20px auto 0;
        font-size: 16px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .js-motion .schedule-list article.reveal,.js-motion .schedule-list article.reveal.is-visible,.js-motion .schedule-list article.reveal.is-visible:hover {
        opacity: 1;
        transform: none
    }

    .pickup-more {
        display: block;
        width: 180px;
        margin-top: 20px;
        padding: 8px 18px;
        border-radius: 38px;
        background: linear-gradient(#158e00 0,#77c600 100%);
        font-size: 15px;
    }

    .timeline {
        position: relative;
        overflow: visible
    }

    .timeline-track {
        position: relative;
        margin-inline:-20px;padding: 18px 0;
        background: #d3d3d3;
        overflow: hidden
    }

    .timeline ol {
        width: 100%;
        display: flex;
        gap: 10px;
        padding: 0 20px;
        overflow-x: auto;
        scroll-padding-inline: 20px
    }

    .timeline li {
        min-width: 145px;
        height: 190px;
        padding: 12px 10px;
        gap: 5px;
        border: 2px solid #fff;
        border-radius: 12px
    }

    .timeline li.now {
        outline: 0;
        border-color: #158e00
    }

    .timeline li.feature {
        outline: 0;
        border-color: #a58500;
        color: #a58500!important;
    }

    .timeline li b {
        font-size: 28px;
        line-height: 1;
    }

    .timeline .race-number {
        font-size: 25px
    }

    .timeline .race-unit {
        font-size: 16px
    }

    .timeline li span {
        font-size: 16px;
        line-height: 1.3;
    }

    .timeline li em {
        order: -1;
        width: auto;
        max-width: 100%;
        margin: 0 auto 4px;
        padding: 5px 10px;
        font-size: 14px;
        white-space: nowrap
    }

    .timeline li.now em {
        background: #158e00;
        color: #fff
    }

    .timeline li.feature em {
        background: #a58500;
        color: #fff
    }

    .timeline .race-action {
        width: 100%;
        margin-top: auto;
        padding: 7px 6px;
        display: block;
        border-radius: 18px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center
    }

    .timeline .race-action.result {
        background: #888
    }

    .timeline .race-action.predict-link {
        background: #c71d00
    }

    .timeline-arrow {
        position: absolute;
        z-index: 4;
        top: 50%;
        width: 24px;
        height: 48px;
        padding: 0;
        display: block;
        border: 0;
        background: 0 0;
        transform: translateY(-50%);
        cursor: pointer
    }

    .timeline-arrow::before {
        content: "";
        position: absolute;
        top: 50%;
        margin: auto;
        width: 24px;
        height: 24px;
        border-top: 2px solid #158e00;
        border-right: 2px solid #158e00
    }

    .timeline-prev {
        left: -20px;
    }

    .timeline-prev::before {
        left: 50%;
        transform: translateY(-50%) rotate(-135deg)
    }

    .timeline-next {
        right: -20px;
    }

    .timeline-next::before {
        transform: translateY(-50%) rotate(45deg);
        right: 50%;
    }

    .pickup-arrow,.pickup-clone {
        display: none
    }

    .race-slides,.race-visual::after {
        bottom: 44px
    }

    .race-copy strong {
        padding-bottom: 7px;
        margin-bottom: 6px
    }

    .race-dots {
        right: 12px;
        bottom: 54px;
        gap: 7px
    }

    .race-dots button {
        width: 8px;
        height: 8px
    }

    .guide-list i::after {
        width: 7px;
        height: 7px;
        border-width: 2px;
        transform: translate(-65%,-50%) rotate(45deg)
    }

    .pickup-list,.schedule-list,.timeline ol {
        scrollbar-width: none
    }

    .pickup-list::-webkit-scrollbar,.schedule-list::-webkit-scrollbar,.timeline ol::-webkit-scrollbar {
        display: none
    }

    .predict {
        padding: 10px 0 0;
        background: 0 0;
        border-radius: 0;
        box-shadow: none
    }

    .horse-line {
        height: min(160px, 24vw);
    }

    .footer-links{
        margin-top: -3vw;
    }

    .horse-line .footer-horses {
        bottom: 0;
        width: 110vw;
    }

    .horse-line .footer-grass {
        bottom: 30px;
        min-width: 430px;
        left: 50%;
        transform: translateX(-50%)
    }

    .news-list time {
        font-size: 12px
    }

    .news-list em {
        font-size: 10px
    }

    .news-list b {
        font-size: 12px
    }

    .guide-list .gold-text {
        font-size: 11px;
        padding: 0;
    }

    .guide-list a:nth-child(3) b {
        padding: 3px 10px;
        border-width: 1px;
        border-radius: 5px;
        font-size: 9px
    }
}

@media (max-width: 374px) {
    .header-inner {
        grid-template-columns:82px minmax(68px,1fr) 72px 42px
    }

    .logo {
        width: 82px
    }

    .net-vote,.status {
        font-size: 8px
    }

    .menu-button {
        width: 42px
    }

    .mobile-shortcuts a {
        font-size: 9px
    }

    .container {
        width: calc(100% - 30px)
    }

    .race-copy {
        padding-bottom: 49px
    }

    .race-copy .live-badge {
        font-size: 8px
    }

    .race-copy small {
        font-size: 10px
    }

    .race-copy>span:last-child {
        font-size: 11px
    }

    .race-prize {
        height: 42px;
        font-size: 8px
    }

    .race-prize>b {
        font-size: 9px
    }

    .race-prize strong {
        font-size: 11px
    }

    .live-card b {
        font-size: 12px
    }

    .live-card img {
        flex-basis: 96px;
        width: 96px
    }

    .pickup-list,.schedule-list {
        margin-inline:-15px;padding-inline:15px}

    .jogai-copy strong {
        font-size: 25px
    }

    .jogai-copy b {
        font-size: 31px
    }

    .jogai-copy span {
        margin-left: 8px
    }

    .standalone-predict .container>div {
        gap: 4px
    }
}

@media (min-width: 768px) {
    .timeline {
        background:linear-gradient(#fff 0,#ebebeb 100%);
        border: 1px solid #fff;
        box-shadow: 0 3px 6px rgba(0,0,0,.16)
    }

    .schedule-list article>b {
        font-size: 18px;
    }

    .schedule-list strong {
        font-size: 14px;
    }

    .schedule-list span {
        font-size: 20px
    }

    .schedule-list div,.schedule-list small {
        font-size: 16px
    }

    .schedule-list .night-tag {
        background: #231815;
    }

    .schedule-list .normal-tag {
        background: #676767
    }

    .schedule-list .active .grade-tag {
        background: #a58500
    }

    .schedule-list .active span {
        color: #a58500
    }

    .schedule .more {
        width: 280px;
        height: 70px;
        margin-top: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: linear-gradient(#fff 0,#ebebeb 100%);
        color: var(--green);
        box-shadow: 0 3px 6px rgba(0,0,0,.16)
    }

    .race-prize::after,.race-prize::before {
        content: "";
        position: absolute;
        top: 50%;
        width: 3px;
        height: 40px;
        background: #fff;
        transform: translate(-50%,-50%)
    }

    .race-prize::before {
        left: 40%
    }

    .race-prize::after {
        left: 73.333%
    }
}

.sp-drawer {
    display: none
}

@media (max-width: 767px) {
    .race-prize {
        grid-template-columns:1.4fr 1.2fr .8fr
    }

    .race-prize>span:first-child {
        padding-inline:2px}

    .race-prize>b {
        padding-inline:8px;border-left: 1px solid #fff
    }

    .net-vote {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        white-space: nowrap
    }

    .net-vote img {
        width: 17px;
        height: 17px;
        object-fit: contain
    }

    .mobile-shortcuts a {
        min-width: 0;
        border: 1px solid #d3d3d3;
        border-radius: 9px;
        background: linear-gradient(#fff 0,#ebebeb 100%);
        box-shadow: 0 2px 5px rgba(0,0,0,.16)
    }

    body::before {
        content: "";
        position: fixed;
        z-index: 80;
        inset: 0;
        background: rgba(255,255,255,.82);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s,visibility 0s linear .25s
    }

    body.menu-open {
        overflow: hidden
    }

    body.menu-open::before {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s
    }

    .menu-open .site-header {
        z-index: 100
    }

    .menu-open .header-inner {
        height: 52px;
        min-height: 52px;
        max-height: 52px;
        padding-top: 0;
        padding-bottom: 0;
        grid-template-rows: 52px 0;
        row-gap: 0
    }

    .menu-open .mobile-shortcuts {
        display: none
    }

    .menu-open .menu-button {
        position: fixed;
        z-index: 110;
        top: 0;
        right: auto;
        left: var(--menu-button-left);
        width: var(--menu-button-width)!important;
        height: 52px!important;
        align-self: start
    }

    .menu-button span {
        transition: transform .22s,opacity .18s
    }

    .menu-open .menu-button span:first-child {
        transform: translateY(7px) rotate(45deg)
    }

    .menu-open .menu-button span:nth-child(2) {
        opacity: 0
    }

    .menu-open .menu-button span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg)
    }

    .sp-drawer {
        position: fixed;
        z-index: 90;
        top: 52px;
        right: 0;
        width: calc(100% - 74px);
        height: calc(100dvh - 52px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: linear-gradient(180deg,#77c600 0,#008200 100%);
        color: #fff;
        box-shadow: none;
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform .38s cubic-bezier(.22,1,.36,1),visibility 0s linear .38s
    }

    .menu-open .sp-drawer {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s
    }

    .sp-drawer-nav {
        flex: 0 0 auto;
        background: 0 0
    }

    .sp-drawer-nav a {
        height: 50px;
        padding: 0 20px 0 23px;
        display: flex;
        align-items: center;
        gap: 16px;
        border-bottom: 2px solid rgba(255,255,255,.6);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: .02em
    }

    .sp-drawer-nav a:hover {
        background: rgba(255,255,255,.1);
        color: #fff
    }

    .sp-drawer-nav img {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        object-fit: contain
    }

    .sp-drawer-nav span {
        min-width: 0;
        white-space: nowrap
    }

    .sp-drawer-nav i {
        position: relative;
        width: 9px;
        height: 15px;
        margin-left: auto;
        flex: 0 0 9px
    }

    .sp-drawer-nav i::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 7px;
        height: 7px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: translateY(-50%) rotate(45deg)
    }

    .sp-drawer-brand {
        flex: 1;
        min-height: 0;
        padding: clamp(28px,10.5vh,76px) 18px 13px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: 0 0
    }

    .sp-drawer-socials {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px
    }

    .sp-drawer-socials a {
        display: grid;
        place-items: center
    }

    .sp-drawer-socials img {
        width: 27px;
        height: 27px;
        object-fit: contain
    }

    .sp-drawer-logo {
        margin-top: clamp(20px,4.8vh,35px)
    }

    .sp-drawer-logo img {
        display: block;
        width: 150px;
        height: auto
    }

    .sp-drawer-brand small {
        margin-top: auto;
        color: #fff;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .03em;
        white-space: nowrap
    }

    .fixed-bet-footer {
        position: fixed;
        z-index: 30;
        left: 0;
        right: 0;
        bottom: 0;
        height: 70px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        color: #fff;
        box-shadow: 0 -3px 10px rgba(0,0,0,.18);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(100%);
        transition: transform .22s,opacity .18s,visibility 0s linear .22s
    }

    .fixed-bet-footer.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s
    }

    .fixed-bet-footer a {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 6px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
        transition: filter .18s
    }

    .fixed-bet-footer a:hover {
        filter: brightness(1.12)
    }

    .fixed-bet-footer .umakatsu-link {
        background: #a58500
    }

    .fixed-bet-footer .net-saga-link {
        background: #c71d00
    }

    .fixed-bet-footer .umakatsu-link img {
        width: 20px;
        height: 29px
    }

    .fixed-bet-footer .net-saga-link img {
        width: 36px;
        height: 24px
    }

    .menu-open .fixed-bet-footer {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(100%)
    }

    .header-inner {
        grid-template-columns: 90px minmax(0,1fr) 82px;
        height: 130px;
        min-height: 130px;
        max-height: 104px;
        padding: 0 10px;
        grid-template-rows: 52px 52px;
        column-gap: 8px;
        row-gap: 0
    }

    .header-inner>.menu-button {
        position: absolute;
        top: 0;
        right: 0;
        width: 54px;
        height: 52px;
        margin: 0
    }

    body {
        padding-bottom: 70px;
        font-size: 14px
    }

    .menu-button {
        width: calc(100% + 10px);
        height: 60px;
        align-self: start
    }

    .mobile-shortcuts {
        position: relative;
        height: 52px;
        margin-inline:-10px;padding: 7px 10px;
        gap: 8px;
        background: linear-gradient(rgba(0,130,0,.76) 0,rgba(119,198,0,.76) 100%);
        isolation: auto
    }

    .mobile-shortcuts a {
        height: 38px
    }

    .mobile-shortcuts::before {
        content: none
    }

    .site-footer {
        padding-top: 10px;
    }

    .footer-brand {
        gap: 40px
    }

    .footer-brand img {
        width: 170px
    }

    .status {
        width: max-content;
        padding-inline:10px;justify-self: end
    }

    .mobile-shortcuts a,.net-vote,.race-copy .live-badge,.race-prize,.status {
        font-size: 10px;
    }

    .race-prize>b,.race-prize>span:first-child {
        font-size: 14px
    }

    .race-prize>span:last-child {
        border-left: 1px solid #fff;
        font-size: 10px
    }

    .race-prize strong {
        font-size: 16px
    }

    .timeline h2 small,.timeline li em {
        font-size: 14px
    }

    .live-card span {
        font-size: 12px
    }

    .live-card b {
        font-size: 16px
    }

    .pickup-list h3,.pickup-list time {
        font-size: 12px;
    }

    .pickup-list p {
        font-size: 12px
    }

    .pickup-list .tag{
        font-size: 10px
    }

    .schedule-list div,.schedule-list strong {
        font-size: 11px;
    }

    .schedule-list small {
        font-size: 12px
    }

    .schedule-list .venue-info li{
        font-size: 10px;
        min-width: unset;
        padding: 2px 8px;
        border-radius: 4px;
    }

    .guide-list em {
        border-radius: 999px;
        font-size: 10px
    }

    .guide-list .gold-text,.guide-list a:nth-child(3) b,.guide-list b {
        font-size: 14px
    }

    .guide-list a:nth-child(3) b {
        border-radius: 999px
    }

    .news-list b,.news-list time {
        font-size: 14px
    }

    .news-list i {
        font-size: 10px
    }

    .news-tabs button, .notice-list a {
        font-size: 13px;
        height: auto;
        min-height: unset;
        padding: 2px 16px;
    }
    .news-tabs .selected:hover{
        background: var(--green);
        border-color: var(--green);
        color: #fff;
    }

    section.youtube{
        padding-bottom: 20px;
        background: transparent;
    }
    .youtube-grid span {
        text-align: left
    }

    .footer-brand small,.jogai-copy p,.jogai-copy span {
        font-size: 10px
    }
}

@media (max-width: 360px) {
    .header-inner {
        grid-template-columns:82px minmax(0,1fr) 72px
    }

    .header-inner>.menu-button {
        width: 50px
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(#fff 0,#ebebeb 100%);
    box-shadow: 0 3px 10px rgba(0,0,0,.16)
}

.global-nav img,.header-inner,.mobile-shortcuts,.mobile-shortcuts a,.mobile-shortcuts img,.site-header {
    transition: height .24s,min-height .24s,max-height .24s,padding .24s,margin .24s,opacity .18s,width .24s
}

@media (min-width: 1240px) {
    .site-header.is-compact,.site-header.is-compact .header-inner {
        height:76px;
        min-height: 76px;
        max-height: 76px
    }

    .site-header.is-compact .header-inner {
        padding-block:8px}

    .site-header.is-compact .logo {
        height: 100%;
        display: flex;
        align-items: center
    }

    .site-header.is-compact .logo img {
        width: auto;
        max-height: 100%;
        object-fit: contain
    }

    .site-header.is-compact .global-nav img {
        width: 0;
        height: 0;
        margin: 0;
        opacity: 0
    }
}

@media (min-width: 768px) and (max-width:1239px) {
    .site-header.is-compact .header-inner {
        min-height: 120px;
        grid-template-rows: 54px 30px;
        padding-top: 4px
    }

    .site-header.is-compact .global-nav img {
        width: 0;
        height: 0;
        margin: 0;
        opacity: 0
    }
}

.footer-brand {
    height: auto;
    min-height: 0;
    padding: 64px 20px 30px;
    gap: 0;
    justify-content: flex-start;
    background: #fff
}

.footer-brand .footer-logo img {
    width: 220px;
}

.footer-socials, .juushou-socials {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px
}

.footer-socials a, .juushou-socials a {
    display: grid;
    place-items: center;
    transition: transform .2s,filter .2s
}

.footer-socials a:hover, .juushou-socials a:hover {
    transform: translateY(-4px) scale(1.06);
    filter: brightness(.92)
}

.footer-socials img {
    width: auto;
    height: 40px;
    max-width: 82px
}

.footer-brand>small {
    margin-top: 44px;
    color: #231815;
    font-size: 13px;
}

@media (max-width: 767px) {
    .site-header.is-compact .header-inner {
        height:90px;
        min-height: 90px;
        max-height: 90px;
        grid-template-rows: 52px 38px;
        row-gap: 0
    }

    .site-header.is-compact .mobile-shortcuts {
        height: 38px;
        padding-top: 4px;
        padding-bottom: 4px
    }

    .site-header.is-compact .mobile-shortcuts a {
        height: 30px;
        padding-top: 3px;
        padding-bottom: 3px
    }

    .site-header.is-compact .mobile-shortcuts img {
        width: 0;
        height: 0;
        margin: 0;
        opacity: 0
    }

    .footer-brand {
        min-height: 0;
        padding: 40px 20px 24px;
        gap: 0
    }

    .footer-brand .footer-logo img {
        width: 170px
    }

    .footer-socials {
        margin-top: 16px;
        gap: 20px;
    }

    .footer-socials img {
        height: 36px;
        max-width: 58px
    }

    .footer-brand>small {
        margin-top: 32px;
        font-size: 10px
    }
}

body:not(.jogai) .more {
    width: 170px;
    height: 42px;
    padding: 0;
    border-radius: 8px;
    background: linear-gradient(#008200 0,#77c600 100%);
    color: #fff;
    line-height: 42px;
    box-shadow: 0 3px 6px rgba(0,0,0,.16)
}

body .schedule .more {
    border-radius: 16px;
    background: linear-gradient(#fff 0, #ebebeb 100%);
    color: #158e00;
    width: 280px;
    height: 64px;
    font-size: 20px;
}

body .schedule .more:hover {
    background: linear-gradient(#008200 0,#77c600 100%);
    color: #fff;
    box-shadow: 0 0 0 2px #fff,0 8px 18px rgba(0,0,0,.2)
}

/* 画像・カード共通ホバー：拡大、浮上、シャドウ強調を一つのクラスで管理する。 */
.hover-lift {
    position: relative;
    transform-origin: center;
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease !important;
    transition-delay: 0s !important;
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .hover-lift:hover,
    .hover-lift:focus-visible {
        z-index: 3;
        transform: translateY(-6px) scale(1.025) !important;
        box-shadow: 0 16px 32px rgba(0,0,0,.24) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hover-lift {
        transition: none !important;
    }

    .hover-lift:hover,
    .hover-lift:focus-visible {
        transform: none !important;
    }
}

/* TOP・場外ニュース：ホバー時に緑の枠線を一周描く。 */
@property --news-border-progress {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0turn;
}

#news .news-list a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(
        from -90deg,
        var(--green) 0turn var(--news-border-progress),
        transparent var(--news-border-progress) 1turn
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@media (hover: hover) and (pointer: fine) {
    #news .news-list a:hover::before,
    #news .news-list a:focus-visible::before {
        opacity: 1;
        animation: news-border-trace .55s cubic-bezier(.22,1,.36,1) forwards;
    }
}

@keyframes news-border-trace {
    from { --news-border-progress: 0turn }
    to { --news-border-progress: 1turn }
}

@media (prefers-reduced-motion: reduce) {
    #news .news-list a:hover::before,
    #news .news-list a:focus-visible::before {
        opacity: 1;
        animation: none;
        --news-border-progress: 1turn;
    }
}

.jogai-side .next-race {
    position: relative;
    padding: 18px;
    background: linear-gradient(#fff 0,#ebebeb 100%);
    border: 1px solid #fff;
    box-shadow: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.16));
    overflow: hidden
}

.jogai-side .next-race h2 {
    margin: 0 0 12px;
    color: #a58500;
    font-size: 20px;
    line-height: 1.35
}

.jogai-side .next-race p {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap
}

.jogai-side .next-race strong {
    color: #231815;
    font-size: 32px
}

.jogai-side .next-race p span {
    color: #a58500;
    font-family: "Yu Mincho","游明朝",YuMincho,"Hiragino Mincho ProN",serif;
    font-size: 32px;
    font-weight: 700
}

.jogai-side .next-race p em {
    display: none;
    font-style: normal
}

.jogai-side .next-race>i {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    border: 2px solid #a58500;
    border-radius: 50%
}

.jogai-side .next-race>i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 3px solid #a58500;
    border-right: 3px solid #a58500;
    transform: translate(-65%,-50%) rotate(45deg)
}

@media (max-width: 767px) {
    .jogai-side .next-race {
        padding: 16px 58px 16px 16px;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .jogai-side .next-race h2 {
        margin-bottom: 4px;
        font-size: 16px
    }

    .jogai-side .next-race .next-race-star {
        display: none
    }

    .jogai-side .next-race p {
        gap: 8px
    }

    .jogai-side .next-race strong {
        font-size: 22px;
    }

    .jogai-side .next-race strong small {
        font-size: 16px;
    }
    
    .jogai-side .next-race p span {
        font-size: 24px;
        font-family: "Noto Sans JP", sans-serif;
    }

    .jogai-side .next-race p em {
        display: inline;
        color: #231815;
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap
    }
    
    .jogai-side .next-race>i::after {
        width: 9px;
        height: 9px;
        border-width: 3px
    }
    .jogai-side .next-race>i {
        border: none;
        top: 0;
        bottom: 0;
        margin: auto;
    }
}

.jogai .pickup-section {
    height: auto;
    padding-bottom: 80px
}

.jogai-side .hero-news {
    position: relative;
}

.jogai-side .hero-news .hero-news-item {
    padding: 0 0 8px 0;
    border-bottom: 0;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 400;
}

.jogai-side .hero-news .hero-news-item strong {
    display: none
}

.jogai-side .hero-news::before, .jogai-side .sales::before {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    border: 2px solid #158E00;
    border-radius: 50%
}

.jogai-side .hero-news::after, .jogai-side .sales::after {
    content: "";
    position: absolute;
    right: 26px;
    bottom: 24px;
    width: 8px;
    height: 8px;
    border-top: 3px solid #158e00;
    border-right: 3px solid #158e00;
    transform: rotate(45deg)
}

.jogai-hero .race-dots button.is-active {
    background: #a58500
}

.jogai-side .jogai-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

@media (max-width: 767px) {
    .jogai-side .hero-news::before, .jogai-side .sales::before{
        border: none;
    }
    
    .jogai-side .hero-news {
        padding-right:58px;
        padding-bottom: 18px;
        display: none;
    }

    .jogai-side .hero-news::after, .jogai-side .sales::after {
        right: 14px;
        bottom: 14px;
        width: 36px;
        height: 36px
    }

    .jogai-side .hero-news::after {
        right: 28px;
        bottom: 27px;
        width: 8px;
        height: 8px
    }

    .jogai-hero .race-visual {
        width: 100%;
        height: clamp(235px,55vw,330px);
        flex: none;
        border-radius: 10px
    }

    .jogai-copy {
        padding: 10px;
    }

    .jogai-copy small {
        position: absolute;
        left: 14px;
        bottom: 152px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3
    }

    .jogai-copy strong {
        position: absolute;
        left: 14px;
        right: 15px;
        bottom: 92px;
        width: auto;
        padding-bottom: 6px;
        margin: 0;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255,255,255,.85);
        font-family: "Yu Mincho","游明朝",YuMincho,"Hiragino Mincho ProN",serif;
        font-size: 40px;
        line-height: 1.15
    }

    .jogai-copy strong i {
        display: inline;
        font-size: 36px;
    }

    .jogai-copy b {
        position: absolute;
        left: 14px;
        bottom: 54px;
        margin: 0;
        font-size: 36px;
        line-height: 1.1
    }

    .jogai-copy b em {
        font-size: 16px
    }

    .jogai-copy span {
        position: absolute;
        left: 140px;
        bottom: 58px;
        margin: 0;
        font-size: 16px;
        line-height: 1.1
    }

    .jogai-copy p {
        height: 44px;
        padding: 4px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: min(20px, 3.4vw);
        line-height: 1.35;
    }

    .jogai-hero .race-dots {
        right: 12px;
        bottom: 63px
    }

    .jogai-side .sales {
        position: relative;
        padding-right: 48px
    }

    .jogai-side .sales h2 {
        margin-bottom: 10px;
        font-size: 14px
    }

    .jogai-side .sales>div {
        gap: 8px;
        flex-wrap: wrap
    }

    .jogai-side .sales span {
        flex: 0 0 auto;
        padding: 6px 24px 6px 12px;
        border-radius: 999px;
        background: linear-gradient(#575757 0,#a6a6a6 100%);
        font-size: 12px;
        line-height: 1.35;
        position: relative;
    }

    .jogai-side .sales span::after {
        content: "";
        width: 5px;
        height: 5px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 12px;
        margin: auto;
    }

    .jogai-side .hero-news::after, .jogai-side .sales::after {
        content: "";
        position: absolute;
        right: 26px;
        top: 50%;
        bottom: 0;
        width: 9px;
        height: 9px;
        border-top: 3px solid #158e00;
        border-right: 3px solid #158e00;
        transform: translateY(-50%) rotate(45deg)
    }

    .header-inner {
        position: relative;
        padding-right: 64px;
        grid-template-rows: 52px 80px;
        row-gap: 0
    }

    .menu-button {
        position: absolute;
        top: 0;
        right: 0;
        width: 54px;
        height: 52px;
        margin: 0
    }

    .mobile-shortcuts {
        width: 100vw;
        height: 80px;
        margin-inline:-10px;padding: 10px;
        align-items: center;
        gap: 7px;
        background: linear-gradient(#008200 0,#77c600 100%)
    }

    .mobile-shortcuts a {
        height: 60px;
        border: 0;
        border-radius: 8px;
        background: linear-gradient(#fff 0,#ebebeb 100%);
        font-size: 12px;
        line-height: 1.25;
        box-shadow: 0 2px 5px rgba(0,0,0,.16)
    }

    .mobile-shortcuts img {
        width: 25px;
        height: 25px;
        margin-bottom: 4px
    }

    .mobile-shortcuts a.is-current,.mobile-shortcuts a[aria-current=page] {
        box-shadow: inset 0 0 0 3px #158e00,0 2px 5px rgba(0,0,0,.16)
    }

    .site-header.is-compact .header-inner {
        height: 112px;
        min-height: 112px;
        max-height: 112px;
        grid-template-rows: 52px 60px
    }

    .site-header.is-compact .mobile-shortcuts {
        height: 60px;
        padding-top: 7px;
        padding-bottom: 7px
    }

    .site-header.is-compact .mobile-shortcuts a {
        height: 46px
    }

    .menu-open .header-inner {
        height: 52px;
        min-height: 52px;
        max-height: 52px;
        grid-template-rows: 52px 0
    }
}

@media (min-width: 768px) {
    body {
        font-size: 16px;
    }

    .global-nav a {
        font-size: 16px;
    }

    .news-tabs button, .notice-list a {
        font-size: 16px;
    }

    .pickup-list p {
        font-size: 16px;
    }

    hero-news a, .schedule-list div, .tag, .timeline h2 small, .timeline li em {
        font-size: 10px;
    }
}

@media (max-width: 360px) {
    .header-inner {
        padding-right:60px
    }

    .mobile-shortcuts {
        width: calc(100% + 80px)
    }
}

@media (max-width: 767px) {
    .home-page .schedule .more,.home-page .timeline .more,body {
        font-size:14px
    }

    .beginner-faq h2, .beginner-main h2, .beginner-predict h2, .jogai-side h2, .jushou-heading, .predict h2, .present-entry>h2, .present-prizes>h1, .schedule-content h2, .section-title, .standalone-predict h2, .timeline h2 {
        font-size: 16px!important;
    }

    .mobile-shortcuts a {
        font-size: 12px
    }

    .timeline .race-action,.timeline h2 small,.timeline li em {
        font-size: 14px
    }

    .timeline li b {
        font-size: 25px
    }

    .timeline .race-unit,.timeline li span {
        font-size: 16px
    }

    .live-card span, .news-list em, .news-list i, .news-list time, .pickup-list p, .schedule-list small {
        font-size: 12px
    }

    .guide-list .gold-text, .guide-list a:nth-child(3) b, .guide-list b, .live-card b, .news-list b, .news-tabs button, .pickup-list time, .schedule-list div {
        font-size: 14px
    }

    .guide-list em {
        font-size: 12px
    }

    .beginner-hero>div strong {
        font-size: 14px!important
    }

    .beginner-faq details p,.beginner-hero>div span,.beginner-vote p {
        font-size: 12px!important
    }

    .present-prize-card h2 {
        font-size: 16px!important
    }

    .address-field legend {
        font-size: 14px!important
    }

    .form-field em {
        font-size: 10px!important
    }

    .form-consent,.present-notes li {
        font-size: 12px!important
    }

    .jushou-horse-grid a {
        font-size: 12px!important
    }

    .jushou .net-vote,.jushou .status {
        font-size: 10px!important
    }

    .calendar-note {
        font-size: 10px!important
    }

    .home-page .hero-home {
        padding: 24px 0 18px;
    }

    .home-page .hero-grid {
        gap: 8px
    }

    .home-page .hero-home .race-visual {
        height: min(300px, 50vw);
    }

    .home-page .race-copy {
        padding: 0 12px 58px;
    }

    .home-page .race-copy .live-badge {
        padding: 2px 7px;
        font-size: 10px
    }

    .home-page .race-copy small {
        margin-top: 3px;
        font-size: 14px
    }

    .home-page .race-copy strong {
        padding-bottom: 3px;
        margin-bottom: 2px;
        font-size: 27px;
        line-height: 1.08
    }

    .home-page .race-copy>span:last-child {
        font-size: 12px;
        line-height: 1.2
    }

    .home-page .race-copy b {
        font-size: 16px
    }

    .home-page .race-prize {
        height: 48px;
        padding: 4px 6px
    }

    .home-page .race-prize>b,.home-page .race-prize>span:first-child {
        padding-inline:4px;
        font-size: max(14px,2.4vw);
    }

    .home-page .race-prize>span:last-child {
        font-size: 10px;
    }

    .home-page .race-prize strong {
        font-size: 18px;
    }

    .home-page .race-slides,.home-page .race-visual::after {
        bottom: 48px;
    }

    .home-page .race-dots {
        bottom: 56px;
    }

    .home-page .timeline h2 {
        min-height: 24px;
        margin-bottom: 2px;
        font-size: 16px;
        line-height: 1.2
    }

    .home-page .timeline h2 img {
        width: 20px;
        height: 20px
    }

    .home-page .timeline h2 small {
        padding: 4px 7px;
        font-size: 11px
    }

    .home-page .timeline-track {
        margin-inline:-20px;padding: 6px 0
    }

    .home-page .timeline ol {
        gap: 10px;
        padding-inline:20px
        }

    .home-page .timeline li {
        min-width: 90px;
        height: 100px;
        padding: 6px 8px;
        gap: 1px
    }

    .home-page .timeline .race-number,.home-page .timeline li b {
        font-size: 20px;
    }

    .home-page .timeline .race-unit,.home-page .timeline li span {
        font-size: 12px;
    }

    .home-page .timeline li em {
        margin-bottom: 0;
        padding: 2px 4px;
        font-size: 10px;
        min-width: 50px;
        text-align: center;
    }

    .home-page .timeline li .selling{
        color: var(--ink);
        border: none;
    }
    
    .home-page .timeline li em span{
        font-size: 10px;
        display: inline;
    }

    .home-page .timeline .race-action {
        padding: 2px 12px 2px 4px;
        font-size: 10px;
        position: relative;
    }

    .home-page .timeline .race-action::before{
        content: "";
        width: 4px;
        height: 4px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 8px;
        margin: auto;
    }

    .home-page .timeline-arrow {
        height: 70px;
        width: 70px;
        background: rgba(255,255,255,0.5);
        border-radius: 10px;
    }

    .home-page .live-card {
        min-height: 90px;
        height: 90px;
        padding: 12px 10px 10px 20px;
        gap: 10px
    }

    .home-page .live-card span {
        min-width: 0;
        font-size: 11px
    }

    .home-page .live-card b {
        flex-wrap: nowrap;
        gap: 7px;
        font-size: 14px;
        line-height: 1.2;
        white-space: nowrap
    }

    .home-page .live-card b img {
        width: 20px;
        height: 20px;
        max-height: none;
        object-fit: contain;
        flex: 0 0 20px;
    }

    .home-page .live-card .live-thumbnail {
        flex: 0 0 130px;
        width: 130px;
        overflow: hidden;
        border-radius: 8px;
    }

    .home-page .live-card .live-thumbnail img {
        display: block;
        width: 100%;
        height: 74px;
        max-height: none;
        object-fit: cover
    }

    .home-page .predict h2 {
        margin-bottom: 5px;
        font-size: 15px
    }
}
/* ニュースカード：ホバー時の囲み線をカードの角丸内で完結させる */
@media (hover: hover) and (pointer: fine) {
  .news-list > *,
  .news-card,
  .news-item {
    --news-card-radius: 20px;
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
    border-radius: var(--news-card-radius) !important;
  }

  .news-list > * > a,
  .news-card > a,
  .news-item > a {
    position: relative;
    display: block;
    overflow: hidden !important;
    border-radius: inherit !important;
  }

  .news-list > *::before,
  .news-list > *::after,
  .news-list > * > a::before,
  .news-list > * > a::after,
  .news-card::before,
  .news-card::after,
  .news-card > a::before,
  .news-card > a::after,
  .news-item::before,
  .news-item::after,
  .news-item > a::before,
  .news-item > a::after {
    border-radius: var(--news-card-radius) !important;
    clip-path: inset(0 round var(--news-card-radius));
  }
}