/* =============================================================
 * UIリニューアル：ランキング地図ボード（トップ＝全国／エリア＝地方）
 * partials/ui-map/board.blade.php とセット。
 * テーマ：魚群探知機（ソナー）の海図に、金の列島と代表カード。
 * ============================================================= */

/* ---------- 旧地図の背景・高さを外す ---------- */
body.ui-r .ranking.ui-mapped {
    background: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 0 0 !important;
    margin: 0 auto 28px !important;
    max-width: 1240px;
    width: 100% !important;
}

/* ---------- 見出し（全国 各地域代表 ／ 日付） ---------- */
body.ui-r .ranking.ui-mapped .ranking-head {
    background: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 18px !important;
    position: static !important;
    right: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    transform: none !important;
}
body.ui-r .ranking.ui-mapped .ranking-head::before {
    content: "PAGE ACCESS RANKING ／ ページアクセス";
    font-family: var(--ui-font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .28em;
    color: var(--ui-navy-800);
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(7, 21, 38, .12);
}
body.ui-r .ranking.ui-mapped .ranking-head .line-1 {
    margin: 0 !important;
    padding: 12px 34px !important;
    text-align: center !important;
    font-size: clamp(22px, 2.6vw, 34px) !important;
    font-weight: 900 !important;
    letter-spacing: .06em;
    color: #fff3b0 !important;
    background: linear-gradient(180deg, #14396a 0%, #0b1f3a 55%, #071526 100%);
    border-radius: 18px;
    box-shadow: 0 0 0 2px #e8c419, 0 0 0 5px rgba(7, 21, 38, .55), 0 14px 30px rgba(7, 21, 38, .35);
    text-shadow: 0 0 18px rgba(240, 212, 58, .55), 0 2px 0 rgba(0, 0, 0, .35);
    position: relative;
}
body.ui-r .ranking.ui-mapped .ranking-head .line-2 {
    margin: 2px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700;
    color: var(--ui-navy-800) !important;
    letter-spacing: .04em;
}

/* ---------- ボード ---------- */
body.ui-r .ui-board {
    --gold-frame: linear-gradient(135deg, #fff6c4 0%, #e8c419 22%, #a88f00 48%, #f6dc4a 70%, #8a7000 100%);
    position: relative;
    container-type: inline-size;
    margin: 0 auto 26px;
    width: 100%;
    border-radius: 30px;
    background: #061223;
    padding: 0;
    box-shadow:
        0 0 0 2px #f0d43a,
        0 0 0 6px rgba(7, 21, 38, .55),
        0 0 0 8px rgba(255, 236, 140, .45),
        0 34px 80px rgba(7, 21, 38, .5),
        0 10px 24px rgba(7, 21, 38, .3);
    overflow: hidden;
    isolation: isolate;
    text-align: left;
}
body.ui-r .ui-board__stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--bw) / var(--bh);
}
body.ui-r .ui-board__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* 海の上の光 */
body.ui-r .ui-board__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 45% at 50% 0%, rgba(76, 195, 240, .18), transparent 70%),
        radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(3, 9, 20, .65) 100%);
    z-index: 1;
}

/* ソナーの掃引 */
body.ui-r .ui-board__sweep {
    position: absolute;
    left: var(--sx);
    top: var(--sy);
    width: var(--sr);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 0deg,
        rgba(76, 195, 240, 0) 0deg,
        rgba(76, 195, 240, 0) 290deg,
        rgba(76, 195, 240, .10) 330deg,
        rgba(120, 220, 255, .30) 356deg,
        rgba(200, 245, 255, .55) 360deg);
    -webkit-mask: radial-gradient(circle, #000 0 66%, transparent 71%);
            mask: radial-gradient(circle, #000 0 66%, transparent 71%);
    mix-blend-mode: screen;
    animation: uiSweep 8s linear infinite;
    z-index: 1;
}
@keyframes uiSweep {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- 陸 ---------- */
body.ui-r .ui-board__under path { fill: #000; opacity: .55; }
body.ui-r .ui-board__side path { fill: #6e5d00; stroke: #4d4100; stroke-width: 1; }
body.ui-r .ui-pref {
    stroke-linejoin: round;
    transition: opacity .3s ease, filter .3s ease;
}
body.ui-r .ui-pref.is-on {
    stroke: #6e5d00;
    stroke-width: 1;
    stroke-opacity: .7;
}
body.ui-r .ui-pref.is-off {
    stroke: #4cc3f0;
    stroke-width: 1;
    stroke-opacity: .22;
}
body.ui-r .ui-pref.has-rep { filter: brightness(1.05) saturate(1.05); }
body.ui-r .ui-pref.is-hl {
    filter: brightness(1.28) saturate(1.15) drop-shadow(0 0 10px rgba(255, 236, 140, .95));
}
body.ui-r .ui-board.has-hl .ui-pref.is-on:not(.is-hl) { opacity: .62; }

/* 沖縄の枠 */
body.ui-r .ui-board__inset rect {
    fill: rgba(76, 195, 240, .06);
    stroke: rgba(76, 195, 240, .55);
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}
body.ui-r .ui-board__inset text {
    fill: #9fdcf5;
    font: 700 18px var(--ui-font-body);
    letter-spacing: .12em;
}

/* ---------- 引き出し線 ---------- */
body.ui-r .ui-link {
    stroke-width: 2.6;
    stroke-linecap: round;
    opacity: .9;
    filter: drop-shadow(0 0 5px rgba(76, 195, 240, .7));
    transition: opacity .3s ease, stroke-width .3s ease;
}
body.ui-r .ui-link-end {
    fill: #f0d43a;
    stroke: #071526;
    stroke-width: 2;
}
body.ui-r .ui-board.has-hl .ui-link:not(.is-hl),
body.ui-r .ui-board.has-hl .ui-link-end:not(.is-hl) { opacity: .25; }
body.ui-r .ui-link.is-hl { stroke-width: 4; opacity: 1; }

/* ---------- ピン ---------- */
body.ui-r .ui-pin__dot { fill: #fff; stroke: #e8c419; stroke-width: 4; }
body.ui-r .ui-pin__halo { fill: rgba(240, 212, 58, .35); }
body.ui-r .ui-pin__pulse {
    fill: none;
    stroke: #f0d43a;
    stroke-width: 2.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: uiPulse 2.6s cubic-bezier(.2, .8, .2, 1) infinite;
}
body.ui-r .ui-pin__pulse--2 { animation-delay: 1.3s; stroke: #4cc3f0; }
body.ui-r .ui-pin:nth-child(2n) .ui-pin__pulse { animation-delay: .5s; }
body.ui-r .ui-pin:nth-child(2n) .ui-pin__pulse--2 { animation-delay: 1.8s; }
body.ui-r .ui-pin:nth-child(3n) .ui-pin__pulse { animation-delay: .9s; }
body.ui-r .ui-pin:nth-child(3n) .ui-pin__pulse--2 { animation-delay: 2.2s; }
@keyframes uiPulse {
    0%   { transform: scale(1);   opacity: .9; }
    80%  { transform: scale(3.4); opacity: 0; }
    100% { transform: scale(3.4); opacity: 0; }
}
body.ui-r .ui-pin__num {
    display: none;
    fill: #071526;
    font: 800 24px var(--ui-font-display);
    text-anchor: middle;
    dominant-baseline: central;
}
body.ui-r .ui-pin.is-hl .ui-pin__dot { fill: #fff3b0; }
body.ui-r .ui-board.has-hl .ui-pin:not(.is-hl) { opacity: .45; }

/* ---------- 代表カード ---------- */
body.ui-r .ui-board__cards {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
body.ui-r .ui-mcard {
    position: absolute;
    pointer-events: auto;
    transition: transform .35s var(--ui-ease, ease), opacity .3s ease, filter .35s ease;
    will-change: transform;
}
body.ui-r .ui-mcard__frame {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: .5cqw;
    border-radius: 1.3cqw;
    background: var(--gold-frame);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        inset 0 -1px 0 rgba(0, 0, 0, .25),
        0 1.4cqw 3cqw rgba(0, 0, 0, .55),
        0 0 0 1px rgba(0, 0, 0, .35);
}
/* 枠の光沢が流れる */
body.ui-r .ui-mcard__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%) no-repeat;
    background-size: 250% 100%;
    background-position: 130% 0;
    pointer-events: none;
    animation: uiFoil 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .6s);
    mix-blend-mode: overlay;
    z-index: 3;
}
@keyframes uiFoil {
    0%, 55% { background-position: 130% 0; }
    85%, 100% { background-position: -30% 0; }
}
body.ui-r .ui-mcard__photo {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: .95cqw;
    overflow: hidden;
    background: #0b1f3a;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}
body.ui-r .ui-mcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ui-ease, ease);
}
body.ui-r .ui-mcard__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(0deg, rgba(7, 21, 38, .55) 0%, rgba(7, 21, 38, 0) 38%);
    pointer-events: none;
}
body.ui-r .ui-mcard__vote {
    position: absolute;
    top: 1.15cqw;
    left: 1.15cqw;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .35cqw;
    padding: .25cqw .75cqw .25cqw .6cqw;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--ui-heart, #ff4d6d);
    font: 800 1.25cqw/1.2 var(--ui-font-display);
    box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .3);
}
body.ui-r .ui-mcard__vote::before {
    content: "";
    width: 1.05cqw;
    height: 1.05cqw;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.5 2.3 4.5 6 4.5c2.2 0 3.6 1.2 6 3.6 2.4-2.4 3.8-3.6 6-3.6 3.7 0 5.6 4 4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.5 2.3 4.5 6 4.5c2.2 0 3.6 1.2 6 3.6 2.4-2.4 3.8-3.6 6-3.6 3.7 0 5.6 4 4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.ui-r .ui-mcard__num { display: none; }
body.ui-r .ui-mcard__rank {
    position: absolute;
    top: .9cqw;
    right: .9cqw;
    z-index: 4;
    display: inline-flex;
    align-items: baseline;
    gap: .1cqw;
    padding: .3cqw .8cqw;
    border-radius: 999px;
    background: linear-gradient(180deg, #14396a, #071526);
    color: #fff;
    font: 800 1.1cqw/1.1 var(--ui-font-body);
    box-shadow: 0 0 0 .18cqw rgba(255, 255, 255, .5), 0 .3cqw .8cqw rgba(0, 0, 0, .35);
}
body.ui-r .ui-mcard__rank b { font: 800 1.6cqw/1 var(--ui-font-display); }
body.ui-r .ui-mcard.is-top1 .ui-mcard__rank { background: linear-gradient(180deg, #fff3b0, #e8c419 50%, #a88f00); color: #3a2f00; }
body.ui-r .ui-mcard.is-top2 .ui-mcard__rank { background: linear-gradient(180deg, #ffffff, #c9d3dd 50%, #8a99a8); color: #1d2a36; }
body.ui-r .ui-mcard.is-top3 .ui-mcard__rank { background: linear-gradient(180deg, #ffd9b0, #d08a4a 50%, #8c5426); color: #2e1606; }

body.ui-r .ui-mcard__name {
    flex: 0 0 auto;
    margin-top: .5cqw;
    padding: .55cqw .7cqw .65cqw;
    border-radius: .85cqw;
    background: linear-gradient(180deg, #123463 0%, #0b1f3a 60%, #071526 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
    text-align: center;
    min-width: 0;
}
body.ui-r .ui-mcard__label {
    display: block;
    color: #f6dc4a !important;
    font: 800 1.3cqw/1.25 var(--ui-font-body);
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none !important;
}
body.ui-r .ui-mcard__label span {
    margin-left: .4cqw;
    padding: .05cqw .45cqw;
    border-radius: .35cqw;
    font-size: .85cqw;
    color: #071526;
    background: #f6dc4a;
    vertical-align: .12cqw;
}
body.ui-r .ui-mcard__label:hover { color: #fff3b0 !important; }
body.ui-r .ui-mcard__nick {
    margin-top: .2cqw;
    color: #fff;
    font: 800 1.6cqw/1.25 var(--ui-font-body);
    letter-spacing: .05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ホバー／ピンとの連動 */
body.ui-r .ui-mcard:hover,
body.ui-r .ui-mcard.is-hl {
    transform: translateY(-.5cqw) scale(1.03);
    z-index: 5;
}
body.ui-r .ui-mcard:hover .ui-mcard__frame,
body.ui-r .ui-mcard.is-hl .ui-mcard__frame {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 0 0 .2cqw rgba(255, 243, 176, .9),
        0 0 2.4cqw rgba(240, 212, 58, .75),
        0 2cqw 4cqw rgba(0, 0, 0, .6);
}
body.ui-r .ui-mcard:hover .ui-mcard__photo img,
body.ui-r .ui-mcard.is-hl .ui-mcard__photo img { transform: scale(1.07); }
body.ui-r .ui-board.has-hl .ui-mcard:not(.is-hl) { opacity: .6; filter: saturate(.7); }

/* ---------- 登場アニメ（JS が is-armed → is-live を付けたときだけ） ---------- */
body.ui-r .ui-board.is-armed .ui-pref.is-on,
body.ui-r .ui-board.is-armed .ui-board__side,
body.ui-r .ui-board.is-armed .ui-board__under { opacity: 0; }
body.ui-r .ui-board.is-armed .ui-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
body.ui-r .ui-board.is-armed .ui-link-end,
body.ui-r .ui-board.is-armed .ui-pin { opacity: 0; }
body.ui-r .ui-board.is-armed .ui-mcard { opacity: 0; transform: translateY(18px) scale(.94); }

body.ui-r .ui-board.is-live .ui-pref.is-on { animation: uiLand .7s ease forwards; animation-delay: calc(var(--i) * 14ms); }
body.ui-r .ui-board.is-live .ui-board__side,
body.ui-r .ui-board.is-live .ui-board__under { animation: uiFade .8s ease .5s forwards; }
body.ui-r .ui-board.is-live .ui-pin { animation: uiPinDrop .6s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(.9s + var(--i) * .12s); }
body.ui-r .ui-board.is-live .ui-link { animation: uiDraw .9s cubic-bezier(.6, 0, .2, 1) forwards; animation-delay: calc(1.1s + var(--i) * .12s); }
body.ui-r .ui-board.is-live .ui-link-end { animation: uiFade .3s ease forwards; animation-delay: calc(1.8s + var(--i) * .12s); }
body.ui-r .ui-board.is-live .ui-mcard { animation: uiCardIn .8s cubic-bezier(.2, 1.3, .3, 1) forwards; animation-delay: calc(1.7s + var(--i) * .12s); }
body.ui-r .ui-board.is-live.has-hl .ui-mcard:not(.is-hl) { opacity: .6; }

@keyframes uiLand { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiDraw { to { stroke-dashoffset: 0; } }
@keyframes uiPinDrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiCardIn {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

/* ---------- スマホ：地図だけを大きく、カードは下に2列 ---------- */
body.ui-r .ui-board.is-sp { border-radius: 22px; }
body.ui-r .ui-board.is-sp .ui-board__stage { aspect-ratio: var(--mw) / var(--mh); }
body.ui-r .ui-board.is-sp .ui-board__sweep { left: 50%; top: 50%; width: var(--sr-sp); }
body.ui-r .ui-board.is-sp .ui-board__links { display: none; }
body.ui-r .ui-board.is-sp .ui-pin__num { display: block; }
body.ui-r .ui-board.is-sp .ui-pin__dot { r: 22px; stroke-width: 5; }
body.ui-r .ui-board.is-sp .ui-pin__halo { r: 30px; }
body.ui-r .ui-board.is-sp .ui-pin__pulse { r: 22px; }
body.ui-r .ui-board.is-sp .ui-board__inset text { font-size: 26px; }
body.ui-r .ui-board.is-sp .ui-board__cards {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 12px 16px;
    background: linear-gradient(180deg, #0b1f3a, #071526);
    border-top: 1px solid rgba(240, 212, 58, .45);
}
body.ui-r .ui-board.is-sp .ui-mcard {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
}
body.ui-r .ui-board.is-sp .ui-mcard__frame { padding: 4px; border-radius: 14px; }
body.ui-r .ui-board.is-sp .ui-mcard__photo { flex: none; aspect-ratio: 4 / 3; border-radius: 10px; }
body.ui-r .ui-board.is-sp .ui-mcard__vote { top: 8px; left: 8px; gap: 4px; padding: 3px 8px 3px 7px; font-size: 12px; }
body.ui-r .ui-board.is-sp .ui-mcard__vote::before { width: 11px; height: 11px; }
body.ui-r .ui-board.is-sp .ui-mcard__num {
    display: grid;
    place-items: center;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: #071526;
    font: 800 14px/1 var(--ui-font-display);
    box-shadow: 0 0 0 3px #e8c419, 0 3px 8px rgba(0, 0, 0, .35);
}
body.ui-r .ui-board.is-sp .ui-mcard__rank { top: 40px; right: 6px; padding: 2px 7px; font-size: 10px; }
body.ui-r .ui-board.is-sp .ui-mcard__rank b { font-size: 14px; }
body.ui-r .ui-board.is-sp .ui-mcard__name { margin-top: 4px; padding: 6px 6px 7px; border-radius: 10px; }
body.ui-r .ui-board.is-sp .ui-mcard__label { font-size: 11.5px; }
body.ui-r .ui-board.is-sp .ui-mcard__label span { font-size: 9px; margin-left: 3px; padding: 0 4px; border-radius: 4px; vertical-align: 1px; }
body.ui-r .ui-board.is-sp .ui-mcard__nick { font-size: 13.5px; margin-top: 2px; }
body.ui-r .ui-board.is-sp .ui-mcard:hover,
body.ui-r .ui-board.is-sp .ui-mcard.is-hl { transform: none; }

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
    body.ui-r .ui-board__sweep,
    body.ui-r .ui-pin__pulse,
    body.ui-r .ui-mcard__frame::before { animation: none !important; }
    body.ui-r .ui-pin__pulse { opacity: 0; }
    body.ui-r .ui-mcard,
    body.ui-r .ui-mcard__photo img { transition: none !important; }
}

/* ---------- 魚影の反応（魚群探知機の点々） ---------- */
body.ui-r .ui-blip circle {
    fill: #7fe0ff;
    transform-box: fill-box;
    transform-origin: center;
}
body.ui-r .ui-blip {
    opacity: 0;
    animation: uiBlip 8s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    filter: drop-shadow(0 0 4px rgba(127, 224, 255, .9));
}
@keyframes uiBlip {
    0%, 70%, 100% { opacity: 0; }
    76% { opacity: .95; }
    90% { opacity: .15; }
}
body.ui-r .ui-board.is-sp .ui-blip circle { r: 4px; }
@media (prefers-reduced-motion: reduce) {
    body.ui-r .ui-blip { animation: none; opacity: .5; }
}

/* エリア（地方）のスマホ：番号＝順位なので、順位バッジだけを番号の位置に出す */
body.ui-r .ui-board--region.is-sp .ui-mcard__num { display: none; }
body.ui-r .ui-board--region.is-sp .ui-mcard__rank { top: 8px; right: 8px; padding: 3px 9px; font-size: 11px; }
body.ui-r .ui-board--region.is-sp .ui-mcard__rank b { font-size: 16px; }

/* =============================================================
 * PC のファーストビュー：ロゴ／キャッチ／残り日数を横一列にまとめ、
 * 地図ボードを最初の画面に入れる（トップのみ・1200px 以上）
 * ============================================================= */
@media (min-width: 1200px) {
    body.ui-r .top-index .top-ct {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .9fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 24px;
        max-width: 1180px;
        margin: 0 auto 6px;
        padding: 14px 20px 0;
    }
    body.ui-r .top-index .top-ct > a {
        grid-column: 1;
        grid-row: 1 / span 2;
        justify-self: center;
    }
    body.ui-r .top-index .top-ct > a img {
        max-height: 176px !important;
        width: auto;
        filter: drop-shadow(0 10px 22px rgba(110, 93, 0, .35));
    }
    body.ui-r .top-index .top-ct .top-lead {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        margin: 0 auto;
        align-self: end;
    }
    body.ui-r .top-index .top-ct .ribbon {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin: 8px auto 0;
    }
    body.ui-r .top-index .top-ct .month {
        grid-column: 3;
        grid-row: 1;
        align-self: end;
        justify-self: center;
        margin: 0 auto;
    }
    body.ui-r .top-index .top-ct .calen {
        grid-column: 3;
        grid-row: 2;
        align-self: start;
        justify-self: center;
        margin: 0 auto;
    }

    /* 見出しは1行に */
    body.ui-r .top-index .ranking.ui-mapped .ranking-head {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 18px;
        margin: 4px auto 16px !important;
    }
    body.ui-r .top-index .ranking.ui-mapped .ranking-head .line-1 {
        padding: 8px 26px !important;
        font-size: 26px !important;
    }
}
@media (min-width: 1200px) {
    body.ui-r .top-index .top-ct .ribbon {
        width: 330px;
        max-width: 100%;
    }
    body.ui-r .top-index .top-ct .calen {
        white-space: nowrap;
        flex-wrap: nowrap;
        word-break: keep-all;
    }
    body.ui-r .top-index .top-ct .calen > * { flex: none; }
}
@media (min-width: 1200px) {
    body.ui-r .top-index .top-ct .calen { gap: 10px; padding: 10px 18px 10px 20px; }
}