/* =============================================================
 * UIリニューアル「Stadium Gold」— 10 トップ（/）とエリア上半分の共通部品
 * 担当: トップ担当
 * 対象:
 *   - .content.top-index（トップ）
 *   - .content.top-area（エリア・地区・釣り場・検索の上半分で共通の部品）
 *   - partials: level_ranking_banner / top_five_carousel
 * 注意:
 *   - owl-carousel の .owl-stage / .owl-item / .rank の幅・transform は触らない
 *   - 地図上の代表カード（.top-1〜.top-9）の position / top / left は触らない
 * ============================================================= */


/* =============================================================
 * 1. ヒーロー（ロゴ・リード・リボン・残り日数）
 * ============================================================= */

/* 「いいねがAmazonポイントに！」の画像に軽い影 */
body.ui-r .content .top-ct .top-lead img {
    filter: drop-shadow(0 4px 10px rgba(110, 93, 0, .28));
}

/* 「全国の釣果情報」リボン：文字に立体感 */
body.ui-r .content .top-ct .ribbon {
    color: var(--ui-navy-900);
    letter-spacing: .04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
    filter: drop-shadow(0 6px 12px rgba(110, 93, 0, .25));
}

/* 「◯月大会終了まで」：スコアボードの上に載る紺の小さなラベル */
body.ui-r .top-index .top-ct .month {
    display: table;
    margin: 14px auto 0;
    padding: 5px 16px 6px;
    border-radius: var(--ui-r-pill) var(--ui-r-pill) 0 0;
    background: var(--ui-navy-800);
    color: var(--ui-gold-hi);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.3;
    position: relative;
    z-index: 2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* 残り日数：スタジアムのスコアボード */
body.ui-r .top-index .top-ct .calen {
    /* 既存の left:49% + translateX(-50%) の中央寄せをやめて margin で中央に */
    left: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 12px 22px 12px 26px;
    border-radius: 22px;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(76, 195, 240, .22), rgba(76, 195, 240, 0) 60%),
        var(--ui-night-grad);
    box-shadow:
        0 0 0 2px var(--ui-gold),
        0 0 0 5px rgba(7, 21, 38, .85),
        0 0 0 6px rgba(255, 236, 140, .55),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 18px 40px rgba(7, 21, 38, .38);
    color: var(--ui-gold-hi);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
    text-shadow: 0 0 12px rgba(240, 212, 58, .45);
    position: relative;
}
/* 数字の窓：黒い液晶＋金の発光数字＋うっすら走査線 */
body.ui-r .top-index .top-ct .calen span {
    width: auto;
    min-width: 150px;
    margin: 0;
    padding: 6px 20px 8px;
    top: 0;
    border-radius: 14px;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 2px, rgba(255, 255, 255, 0) 2px 4px),
        linear-gradient(180deg, #030b16 0%, #0a1a30 100%);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, .7),
        inset 0 0 0 1px rgba(240, 212, 58, .35),
        0 1px 0 rgba(255, 255, 255, .1);
    color: var(--ui-gold-hi);
    font-family: var(--ui-font-display);
    font-size: 68px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow:
        0 0 2px rgba(255, 246, 190, .9),
        0 0 16px rgba(240, 212, 58, .65),
        0 0 34px rgba(210, 181, 3, .45);
}
/* スコアボード左右の小さなランプ（装飾） */
body.ui-r .top-index .top-ct .calen::before,
body.ui-r .top-index .top-ct .calen::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--ui-gold-hi);
    box-shadow: 0 0 8px 2px rgba(240, 212, 58, .7);
    pointer-events: none;
}
body.ui-r .top-index .top-ct .calen::before { left: 10px; }
body.ui-r .top-index .top-ct .calen::after { right: 8px; }

@media (max-width: 1024px) {
    body.ui-r .top-index .top-ct .calen {
        font-size: 24px;
    }
    body.ui-r .top-index .top-ct .calen span {
        font-size: 58px;
        min-width: 130px;
    }
}
@media (max-width: 767px) {
    body.ui-r .top-index .top-ct .month {
        margin-top: 10px;
        font-size: 12px;
        padding: 4px 14px 5px;
    }
    body.ui-r .top-index .top-ct .calen {
        gap: 10px;
        padding: 9px 18px 9px 20px;
        margin-bottom: 10px;
        border-radius: 18px;
        font-size: 19px;
    }
    body.ui-r .top-index .top-ct .calen span {
        font-size: 44px;
        min-width: 104px;
        padding: 5px 14px 7px;
        border-radius: 11px;
    }
}


/* =============================================================
 * 2. 「全国 各地域代表 RANKING」＋ 地図の代表カード（トップ・エリア共通）
 *    位置（absolute / top / left）は既存のまま。見た目だけ金縁トレカ風に。
 * ============================================================= */
body.ui-r :is(.top-index, .top-area) .ranking-head {
    filter: drop-shadow(0 10px 18px rgba(7, 21, 38, .22));
}

/* 金縁のトレーディングカード */
body.ui-r :is(.top-index, .top-area) .ranking .top {
    border: 0;
    border-radius: 14px;
    padding: 5px;
    background:
        linear-gradient(135deg, #fff6c4 0%, #f0d43a 18%, #a88f00 42%, #f6dc4a 62%, #fff3b0 74%, #b39500 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .85),
        0 0 0 3px rgba(110, 93, 0, .35),
        0 10px 24px rgba(7, 21, 38, .28);
    transition:
        transform var(--ui-dur-3) var(--ui-ease),
        box-shadow var(--ui-dur-3) var(--ui-ease);
}
body.ui-r :is(.top-index, .top-area) .ranking .top figure {
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(7, 21, 38, .25);
    position: relative;
}
body.ui-r :is(.top-index, .top-area) .ranking .top figure img {
    transition: transform var(--ui-dur-3) var(--ui-ease);
}
/* 光沢（左上からの斜めハイライト）— クリックの邪魔をしない */
body.ui-r :is(.top-index, .top-area) .ranking .top::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 10px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .08) 26%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(0deg, rgba(7, 21, 38, .18) 0%, rgba(7, 21, 38, 0) 30%);
    pointer-events: none;
    z-index: 1;
}
/* ハートは光沢より上に */
body.ui-r :is(.top-index, .top-area) .ranking .top .vote {
    z-index: 2;
}
body.ui-r :is(.top-index, .top-area) .ranking .top:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .95),
        0 0 0 3px rgba(240, 212, 58, .7),
        0 0 26px rgba(240, 212, 58, .55),
        0 18px 36px rgba(7, 21, 38, .32);
}
body.ui-r :is(.top-index, .top-area) .ranking .top:hover figure img {
    transform: scale(1.04);
}

/* 名前帯の可読性（背景の帯画像はそのまま・文字に影） */
body.ui-r :is(.top-index, .top-area) .ranking .name .line-1,
body.ui-r :is(.top-index, .top-area) .ranking .name .line-1 a {
    color: #fff;
    font-weight: 800;
    letter-spacing: .03em;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, .35),
        0 1px 3px rgba(0, 0, 0, .55),
        0 0 10px rgba(0, 0, 0, .25);
}
body.ui-r :is(.top-index, .top-area) .ranking .name .line-1 a:hover {
    text-decoration: none;
    color: #fffbe0;
}
body.ui-r :is(.top-index, .top-area) .ranking .name .line-2 {
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, .3),
        0 1px 4px rgba(0, 0, 0, .55);
}

@media (max-width: 767px) {
    body.ui-r :is(.top-index, .top-area) .ranking .top {
        padding: 3px;
        border-radius: 10px;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .85),
            0 0 0 2px rgba(110, 93, 0, .3),
            0 6px 14px rgba(7, 21, 38, .28);
    }
    body.ui-r :is(.top-index, .top-area) .ranking .top figure {
        border-radius: 7px;
    }
    body.ui-r :is(.top-index, .top-area) .ranking .top::after {
        inset: 3px;
        border-radius: 7px;
    }
}


/* =============================================================
 * 3. 「いいね獲得数・レベル別ランキング」バナー（partials/level_ranking_banner）
 *    partial 内の <style> より強い指定で上書き
 * ============================================================= */
body.ui-r .level-ranking-banner-partial {
    max-width: 1060px;
    margin: 8px auto 44px;
    padding: 0 16px;
}
body.ui-r .level-ranking-banner-partial .level-ranking-banner-inner {
    position: relative;
    overflow: hidden;
    gap: 16px;
    padding: 16px 18px 16px 16px;
    border-radius: var(--ui-r-lg);
    background:
        radial-gradient(90% 140% at 0% 0%, rgba(76, 195, 240, .22), rgba(76, 195, 240, 0) 55%),
        radial-gradient(70% 120% at 100% 100%, rgba(210, 181, 3, .20), rgba(210, 181, 3, 0) 60%),
        linear-gradient(135deg, var(--ui-navy-700) 0%, var(--ui-navy-800) 45%, var(--ui-navy-900) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(240, 212, 58, .45),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 14px 34px rgba(7, 21, 38, .32);
    transition:
        transform var(--ui-dur-2) var(--ui-ease),
        box-shadow var(--ui-dur-2) var(--ui-ease),
        opacity var(--ui-dur-1) var(--ui-ease);
}
/* 光が横切る（ホバー時） */
body.ui-r .level-ranking-banner-partial .level-ranking-banner-inner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 700ms var(--ui-ease);
}
body.ui-r .level-ranking-banner-partial:hover .level-ranking-banner-inner {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px rgba(240, 212, 58, .8),
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 0 0 1px rgba(240, 212, 58, .25),
        0 20px 44px rgba(7, 21, 38, .4);
}
body.ui-r .level-ranking-banner-partial:hover .level-ranking-banner-inner::after {
    left: 120%;
}
body.ui-r .level-ranking-banner-partial .level-ranking-banner-lv {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(240, 212, 58, .45)) drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
}
body.ui-r .level-ranking-banner-partial .level-ranking-banner-sub {
    color: var(--ui-gold-hi);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}
body.ui-r .level-ranking-banner-partial .level-ranking-banner-title {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.35;
}
/* 右の矢印：金の丸ボタン */
body.ui-r .level-ranking-banner-partial .level-ranking-banner-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    background: var(--ui-gold-btn);
    color: var(--ui-navy-900);
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px rgba(210, 181, 3, .45);
    transition: transform var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .level-ranking-banner-partial:hover .level-ranking-banner-arrow {
    transform: translateX(3px);
}
@media (max-width: 767px) {
    body.ui-r .level-ranking-banner-partial {
        margin: 6px auto 40px;
    }
    body.ui-r .level-ranking-banner-partial .level-ranking-banner-inner {
        gap: 10px;
        padding: 13px 14px 13px 12px;
        border-radius: 20px;
    }
    body.ui-r .level-ranking-banner-partial .level-ranking-banner-lv {
        width: 46px;
        height: 46px;
    }
    body.ui-r .level-ranking-banner-partial .level-ranking-banner-sub {
        font-size: 11px;
    }
    body.ui-r .level-ranking-banner-partial .level-ranking-banner-title {
        font-size: 13px;
        letter-spacing: 0;
    }
    body.ui-r .level-ranking-banner-partial .level-ranking-banner-arrow {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}


/* =============================================================
 * 4. 「各地方大会(釣果情報)の案内」— プレミアムな大会カード（トップ）
 * ============================================================= */
body.ui-r .top-index .list-news .list-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    overflow: visible;
}
body.ui-r .top-index .list-news .list-content .item {
    float: none;
    width: auto;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, #f2fbff 0%, #cdeffc 42%, #86d6f4 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 0 0 1px rgba(13, 79, 140, .12),
        0 2px 4px rgba(7, 21, 38, .08),
        0 14px 30px rgba(7, 21, 38, .16);
    transition:
        transform var(--ui-dur-3) var(--ui-ease),
        box-shadow var(--ui-dur-3) var(--ui-ease);
}
/* 下端にうっすら波（海の大会らしさ） */
body.ui-r .top-index .list-news .list-content .item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='46' viewBox='0 0 120 46' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q15 10 30 20 T60 20 T90 20 T120 20 V46 H0Z' fill='%234cc3f0' fill-opacity='.22'/%3E%3Cpath d='M0 30 Q15 22 30 30 T60 30 T90 30 T120 30 V46 H0Z' fill='%230d4f8c' fill-opacity='.10'/%3E%3C/svg%3E") repeat-x left bottom / 120px 46px;
    pointer-events: none;
}
body.ui-r .top-index .list-news .list-content .item:nth-child(odd) {
    margin-right: 0;
}
body.ui-r .top-index .list-news .list-content .item > a {
    display: block;
    position: relative;
    z-index: 1;
    min-height: 116px;
    color: inherit;
    text-decoration: none;
}
/* 左上の小さな文字（スローガン設定）：控えめな見出しラベルに */
body.ui-r .top-index .list-news .list-content .item h3 {
    height: auto;
    margin: 0;
    padding: 14px 76px 0 22px;
    background: none;
    color: var(--ui-navy);
    opacity: .6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    min-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.ui-r .top-index .list-news .list-content .item .description {
    height: auto;
    padding: 4px 76px 22px 22px;
    background: none;
    color: var(--ui-navy-900);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.3;
    overflow: visible;
}
body.ui-r .top-index .list-news .list-content .item .description span {
    display: inline-block;
    margin-left: 2px;
    color: var(--ui-navy);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
}
/* 右の金の矢印 */
body.ui-r .top-index .list-news .list-content .item .arr {
    top: 0;
    bottom: 0;
    right: 0;
    height: auto;
    width: 58px;
    border-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, 0) 2px),
        var(--ui-gold-btn);
    box-shadow: inset 1px 0 0 rgba(110, 93, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}
body.ui-r .top-index .list-news .list-content .item .arr i {
    position: static;
    top: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding-left: 3px;
    border-radius: 50%;
    background: var(--ui-navy-800);
    color: var(--ui-gold-hi);
    font-size: 18px;
    box-shadow: 0 3px 8px rgba(7, 21, 38, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
    transition: transform var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .top-index .list-news .list-content .item:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 0 0 1px rgba(210, 181, 3, .55),
        0 0 0 2px rgba(240, 212, 58, .55),
        0 22px 44px rgba(7, 21, 38, .24);
}
body.ui-r .top-index .list-news .list-content .item:hover .arr i {
    transform: translateX(3px);
}
@media (max-width: 1024px) {
    body.ui-r .top-index .list-news .list-content {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
@media (max-width: 767px) {
    body.ui-r .top-index .list-news {
        padding: 0 16px;
    }
    body.ui-r .top-index .list-news .list-content {
        margin-top: 20px;
        gap: 12px;
    }
    body.ui-r .top-index .list-news .list-content .item {
        border-radius: 18px;
    }
    body.ui-r .top-index .list-news .list-content .item > a {
        min-height: 88px;
    }
    body.ui-r .top-index .list-news .list-content .item::before {
        height: 30px;
        background-size: 90px 30px;
        opacity: .8;
    }
    body.ui-r .top-index .list-news .list-content .item h3 {
        padding: 12px 64px 0 18px;
        font-size: 11px;
    }
    body.ui-r .top-index .list-news .list-content .item .description {
        padding: 2px 64px 16px 18px;
        font-size: 20px;
    }
    body.ui-r .top-index .list-news .list-content .item .description span {
        font-size: 12px;
    }
    body.ui-r .top-index .list-news .list-content .item .arr {
        width: 50px;
    }
    body.ui-r .top-index .list-news .list-content .item .arr i {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}


/* =============================================================
 * 5. 「全国の最新投稿一覧」の見出しタブ（トップ固有の装飾のみ）
 *    行カード（.review .item）は一覧担当の領分なので触らない
 * ============================================================= */
body.ui-r .top-index .list-review > h2 {
    filter: drop-shadow(0 6px 12px rgba(7, 21, 38, .22));
}
body.ui-r .top-index .list-review > h2 span {
    color: var(--ui-navy-900);
    font-weight: 800;
    letter-spacing: .04em;
}


/* =============================================================
 * 6. 「各都道府県大会(釣果情報)の案内」— 白カード＋ピル型チップ
 * ============================================================= */
body.ui-r .top-index .detail-news.list-news .content-news {
    padding: 26px 28px;
    border-radius: var(--ui-r-lg);
    background:
        linear-gradient(180deg, #ffffff 0%, var(--ui-surface-2) 100%);
    box-shadow: var(--ui-card-shadow);
    position: relative;
}
body.ui-r .top-index .detail-news .content-news .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    overflow: visible;
}
body.ui-r .top-index .detail-news .content-news .tags li {
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(13, 79, 140, .22);
    border-radius: var(--ui-r-pill);
    background: #fff;
    box-shadow: 0 1px 2px rgba(7, 21, 38, .06);
    transition:
        transform var(--ui-dur-1) var(--ui-ease),
        box-shadow var(--ui-dur-1) var(--ui-ease),
        border-color var(--ui-dur-1) var(--ui-ease),
        background var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .top-index .detail-news .content-news .tags li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: inherit;
    color: var(--ui-navy-800);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
}
body.ui-r .top-index .detail-news .content-news .tags li:hover {
    transform: translateY(-2px);
    border-color: var(--ui-gold-lo);
    background: var(--ui-gold-btn);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 14px rgba(210, 181, 3, .4);
}
body.ui-r .top-index .detail-news .content-news .tags li:hover a {
    color: var(--ui-navy-900);
}
@media (max-width: 767px) {
    body.ui-r .top-index .detail-news.list-news .content-news {
        padding: 18px 14px;
        border-radius: 20px;
    }
    body.ui-r .top-index .detail-news .content-news .tags {
        gap: 8px;
    }
    body.ui-r .top-index .detail-news .content-news .tags li a {
        min-height: 44px;
        padding: 0 14px;
        font-size: 14px;
    }
}


/* =============================================================
 * 7. 「前回大会入賞者」とトロフィー（トップ・エリア共通）
 * ============================================================= */
/* 見出しのトロフィーを紺のメダルに */
body.ui-r :is(.top-index, .top-area) .trophy h2 i,
body.ui-r .top-area .type-click h2 i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background:
        radial-gradient(80% 80% at 30% 25%, rgba(76, 195, 240, .25), rgba(76, 195, 240, 0) 60%),
        var(--ui-night-grad);
    color: var(--ui-gold-hi);
    font-size: 28px;
    text-shadow: 0 0 12px rgba(240, 212, 58, .6);
    box-shadow:
        0 0 0 3px var(--ui-gold-hi),
        0 0 0 5px rgba(110, 93, 0, .35),
        0 10px 24px rgba(7, 21, 38, .3);
}
body.ui-r :is(.top-index, .top-area) .trophy h2 {
    font-weight: 800;
}

/* 1位の表彰台パネル */
body.ui-r :is(.top-index, .top-area) .trophy .trophy-1 {
    border-radius: var(--ui-r-lg);
    box-shadow:
        0 0 0 1px rgba(255, 246, 190, .8),
        0 0 0 4px rgba(110, 93, 0, .28),
        0 24px 56px rgba(7, 21, 38, .3);
}

/* 入賞者カード：金縁＋角丸＋影 */
body.ui-r :is(.top-index, .top-area) .trophy .user-box,
body.ui-r :is(.top-index, .top-area) .slider-head .user-box {
    border-radius: 12px;
    border-color: rgba(110, 93, 0, .55);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .7),
        0 12px 28px rgba(7, 21, 38, .3);
}
body.ui-r :is(.top-index, .top-area) .trophy .user-box .user-box-in,
body.ui-r :is(.top-index, .top-area) .slider-head .user-box .user-box-in {
    border-radius: 10px;
}
body.ui-r :is(.top-index, .top-area) .trophy .user-box .user-img,
body.ui-r :is(.top-index, .top-area) .slider-head .user-box .user-img {
    border-radius: 10px 10px 0 0;
}
body.ui-r :is(.top-index, .top-area) .slider-head .user-box .user-img {
    border-radius: 10px;
}
body.ui-r :is(.top-index, .top-area) .trophy .user-box .user-img img,
body.ui-r :is(.top-index, .top-area) .slider-head .user-box .user-img img {
    transition: transform var(--ui-dur-3) var(--ui-ease);
}
body.ui-r :is(.top-index, .top-area) .trophy .user-box .user-img:hover img,
body.ui-r :is(.top-index, .top-area) .slider-head .owl-item.center .user-box .user-img:hover img {
    transform: scale(1.04);
}
/* 「前回優勝記事」などの帯の文字 */
body.ui-r :is(.top-index, .top-area) .trophy .user-point span {
    font-weight: 800;
    letter-spacing: .04em;
}
/* 名前帯の文字を読みやすく */
body.ui-r :is(.top-index, .top-area) .trophy .user-name-text,
body.ui-r :is(.top-index, .top-area) .slider-head .user-name-text {
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .55);
}
/* 2〜5位：カード全体が少し浮く（.rank 自体は動かさず .user-box だけ） */
body.ui-r :is(.top-index, .top-area) .trophy .rank .user-box {
    transition:
        transform var(--ui-dur-3) var(--ui-ease),
        box-shadow var(--ui-dur-3) var(--ui-ease);
}
body.ui-r :is(.top-index, .top-area) .trophy .rank .user-box:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .9),
        0 0 0 3px rgba(240, 212, 58, .55),
        0 18px 36px rgba(7, 21, 38, .34);
}


/* =============================================================
 * 8. エリアの「現在1位」カルーセル（partials/top_five_carousel）
 *    owl の .owl-stage / .owl-item / .rank の幅・transform は触らない
 * ============================================================= */
/* 水色のステージ：ベタ塗り → 上からの光＋海のグラデ */
body.ui-r .top-area .bg-6CCAFF {
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cpath d='M0 12 Q20 4 40 12 T80 12 T120 12 T160 12' fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E") repeat 0 0 / 160px 24px,
        linear-gradient(180deg, #86dcff 0%, #5cc8f5 55%, #3fb2e6 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        inset 0 -14px 24px rgba(13, 79, 140, .18);
}

/* 前後ボタン：四角 → 金の丸ボタン */
body.ui-r :is(.top-index, .top-area) .slider-head .owl-carousel .owl-nav button {
    width: 64px;
    height: 64px;
    margin-top: 13px;
    border-radius: 50%;
    background: var(--ui-gold-btn);
    color: var(--ui-navy-900);
    font-size: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .75),
        0 0 0 3px rgba(255, 255, 255, .7),
        0 10px 24px rgba(7, 21, 38, .3);
    transition:
        transform var(--ui-dur-2) var(--ui-ease),
        box-shadow var(--ui-dur-2) var(--ui-ease);
}
body.ui-r :is(.top-index, .top-area) .slider-head .owl-carousel .owl-nav button:hover {
    background: var(--ui-gold-btn-hover);
    color: var(--ui-navy-900);
    transform: scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        0 0 0 3px rgba(255, 255, 255, .9),
        0 0 22px rgba(240, 212, 58, .6),
        0 12px 28px rgba(7, 21, 38, .34);
}
body.ui-r :is(.top-index, .top-area) .slider-head .owl-carousel .owl-nav button i,
body.ui-r :is(.top-index, .top-area) .slider-head .owl-carousel .owl-nav button span {
    color: var(--ui-navy-900);
}

/* ドット：白 → 現在地は紺のピル */
body.ui-r :is(.top-index, .top-area) .slider-head .owl-theme .owl-dots .owl-dot span {
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 1px 3px rgba(7, 21, 38, .2);
    transition: width var(--ui-dur-2) var(--ui-ease), background var(--ui-dur-2) var(--ui-ease);
}
body.ui-r :is(.top-index, .top-area) .slider-head .owl-theme .owl-dots .owl-dot.active span {
    width: 26px;
    background: var(--ui-navy-800);
}

@media (max-width: 767px) {
    body.ui-r :is(.top-index, .top-area) .slider-head .owl-carousel .owl-nav button {
        width: 48px;
        height: 48px;
        margin-top: 4px;
        font-size: 16px;
    }
    body.ui-r :is(.top-index, .top-area) .slider-head .owl-theme .owl-dots .owl-dot.active span {
        width: 22px;
    }
}


/* =============================================================
 * 9. エリアの「各県の釣果情報・ランキングを見る」ボタン群
 * ============================================================= */
body.ui-r .top-area .type-click h2 {
    font-weight: 800;
    letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(110, 93, 0, .35), 0 6px 18px rgba(110, 93, 0, .25);
}
body.ui-r .top-area .type-click .list-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    overflow: visible;
}
body.ui-r .top-area .type-click .list-content .item {
    float: none;
    width: auto;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 0 0 1px rgba(110, 93, 0, .45),
        0 10px 24px rgba(7, 21, 38, .22);
    transition:
        transform var(--ui-dur-3) var(--ui-ease),
        box-shadow var(--ui-dur-3) var(--ui-ease);
}
body.ui-r .top-area .type-click .list-content .item a {
    height: 76px;
    text-decoration: none;
}
body.ui-r .top-area .type-click .list-content .item .arr {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    line-height: 1.2;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ui-navy-900);
    background: var(--ui-gold-btn);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
body.ui-r .top-area .type-click .list-content .item .arr i {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding-left: 2px;
    border-radius: 50%;
    background: var(--ui-navy-800);
    color: var(--ui-gold-hi);
    font-size: 15px;
    text-shadow: none;
    transition: right var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .top-area .type-click .list-content .item:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 0 0 2px rgba(255, 246, 190, .9),
        0 0 22px rgba(240, 212, 58, .5),
        0 16px 32px rgba(7, 21, 38, .24);
}
body.ui-r .top-area .type-click .list-content .item:hover .arr {
    background: var(--ui-gold-btn-hover);
}
body.ui-r .top-area .type-click .list-content .item:hover .arr i {
    right: 12px;
}
@media (max-width: 1024px) {
    body.ui-r .top-area .type-click {
        padding: 0 16px;
    }
}
@media (max-width: 767px) {
    body.ui-r .top-area .type-click .list-content {
        gap: 10px;
    }
    body.ui-r .top-area .type-click .list-content .item {
        border-radius: 14px;
    }
    body.ui-r .top-area .type-click .list-content .item a {
        height: 60px;
    }
    body.ui-r .top-area .type-click .list-content .item .arr {
        font-size: 17px;
        padding-right: 22px;
    }
    body.ui-r .top-area .type-click .list-content .item .arr i {
        right: 10px;
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
    body.ui-r .top-area .type-click .list-content .item:hover .arr i {
        right: 8px;
    }
}


/* =============================================================
 * 10. 動きを減らす設定ではアニメーション・ホバーの移動を止める
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
    body.ui-r :is(.top-index, .top-area) .ranking .top,
    body.ui-r :is(.top-index, .top-area) .ranking .top figure img,
    body.ui-r .level-ranking-banner-partial .level-ranking-banner-inner,
    body.ui-r .level-ranking-banner-partial .level-ranking-banner-inner::after,
    body.ui-r .level-ranking-banner-partial .level-ranking-banner-arrow,
    body.ui-r .top-index .list-news .list-content .item,
    body.ui-r .top-index .list-news .list-content .item .arr i,
    body.ui-r .top-index .detail-news .content-news .tags li,
    body.ui-r :is(.top-index, .top-area) .trophy .rank .user-box,
    body.ui-r :is(.top-index, .top-area) .trophy .user-box .user-img img,
    body.ui-r :is(.top-index, .top-area) .slider-head .user-box .user-img img,
    body.ui-r :is(.top-index, .top-area) .slider-head .owl-carousel .owl-nav button,
    body.ui-r :is(.top-index, .top-area) .slider-head .owl-theme .owl-dots .owl-dot span,
    body.ui-r .top-area .type-click .list-content .item,
    body.ui-r .top-area .type-click .list-content .item .arr i {
        transition: none;
    }
    body.ui-r :is(.top-index, .top-area) .ranking .top:hover,
    body.ui-r :is(.top-index, .top-area) .ranking .top:hover figure img,
    body.ui-r .level-ranking-banner-partial:hover .level-ranking-banner-inner,
    body.ui-r .top-index .list-news .list-content .item:hover,
    body.ui-r .top-index .detail-news .content-news .tags li:hover,
    body.ui-r :is(.top-index, .top-area) .trophy .rank .user-box:hover,
    body.ui-r .top-area .type-click .list-content .item:hover {
        transform: none;
    }
}