/* =============================================================
 * UIリニューアル「Stadium Gold」— 02 外枠
 * サイドバー（紺の夜のスタジアム）・釣果検索フォーム・ロゴ帯・
 * フッター（コピーライト）・スマホ下部固定ナビ・「釣りが3倍楽しくなる！」バナー
 * ============================================================= */

/* sticky を効かせるため、main の overflow-x:hidden を clip に（スクロール容器を作らない） */
body.ui-r main.container-fluid {
    overflow-x: hidden;
    overflow-x: clip;
}

/* =============================================================
 * サイドバー（PC）
 * ============================================================= */
body.ui-r .sidebar {
    color: rgba(255, 255, 255, .88);
    background-color: var(--ui-navy-900);
    background-image:
        radial-gradient(90% 22% at 50% 0%, rgba(240, 212, 58, .20) 0%, rgba(240, 212, 58, 0) 70%),
        linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .045) 34%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(112deg, rgba(255, 255, 255, 0) 56%, rgba(76, 195, 240, .05) 59%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, #0f2a4d 0%, #0b1f3a 38%, #071526 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06), 6px 0 30px rgba(7, 21, 38, .25);
    position: relative;
    z-index: 2;
}

@media (min-width: 1025px) {
    body.ui-r .sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .18) transparent;
    }
    body.ui-r .sidebar::-webkit-scrollbar { width: 6px; }
    body.ui-r .sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .16);
        border: 0;
        border-radius: 6px;
    }
}

/* ---------- ロゴとボタン ---------- */
body.ui-r .sidebar .sidebar-top {
    padding: 22px 0 6px;
    margin-bottom: 18px;
}
body.ui-r .sidebar .sidebar-top .logo {
    margin: 0 auto 18px;
    max-width: 150px;
    padding: 0 12px;
}
body.ui-r .sidebar .sidebar-top .logo img {
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 22px rgba(240, 212, 58, .18));
    transition: transform var(--ui-dur-3) var(--ui-ease);
}
body.ui-r .sidebar .sidebar-top .logo a:hover img {
    transform: scale(1.04) rotate(-1deg);
}

body.ui-r .sidebar-top > a {
    display: block;
    text-decoration: none;
}
body.ui-r .sidebar-top button {
    width: calc(100% - 36px);
    height: 44px;
    margin: 0 auto 8px;
    border-radius: 12px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    color: #fff;
    border: 0;
    background-color: rgba(255, 255, 255, .06);
    background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 60%);
    background-size: 260% 100%;
    background-position: 130% 0;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease), background-position 700ms var(--ui-ease), background-color var(--ui-dur-2) var(--ui-ease), color var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .sidebar-top button:hover {
    color: #fff;
    border: 0;
    background-color: rgba(76, 195, 240, .14);
    background-position: -30% 0;
    transform: translateY(-1px);
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(76, 195, 240, .55), 0 8px 20px rgba(0, 0, 0, .25);
}
body.ui-r .sidebar-top button:active {
    transform: scale(.98);
}

/* 「釣りバカ甲子園とは？」→ 金の細枠（控えめ） */
body.ui-r .sidebar-top .btn-1 {
    color: var(--ui-gold-hi);
    background-color: rgba(240, 212, 58, .06);
    box-shadow: inset 0 0 0 1px rgba(240, 212, 58, .45);
}
body.ui-r .sidebar-top .btn-1:hover {
    color: var(--ui-navy-900);
    background-color: var(--ui-gold-hi);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 8px 22px rgba(240, 212, 58, .25);
}

/* 主役のボタン（未ログイン＝ログイン／ログイン中＝投稿する）→ 金のプレミアム */
body.ui-r .sidebar-top > a:nth-of-type(2) > .btn-2 {
    color: var(--ui-navy-900);
    background-color: var(--ui-gold);
    background-image:
        linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 62%),
        var(--ui-gold-btn);
    background-size: 260% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(110, 93, 0, .3), 0 8px 22px rgba(210, 181, 3, .28);
}
body.ui-r .sidebar-top > a:nth-of-type(2) > .btn-2:hover {
    color: var(--ui-navy-900);
    background-position: -30% 0, 0 0;
    box-shadow: var(--ui-glow-gold);
}

/* SNSモードボタンは既存の緑（ティール）を保つ：形だけ揃える */
body.ui-r .sidebar .sns-mode-sidebar-btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(94, 234, 212, .35) !important;
}

/* 通知バッジ → ハート色のピル */
body.ui-r .sidebar-notify-badge {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: var(--ui-r-pill);
    padding: 0 7px;
    background: var(--ui-heart);
    color: #fff;
    font-family: var(--ui-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px rgba(7, 21, 38, .9), 0 4px 12px rgba(255, 77, 109, .45);
}

/* ---------- 地方大会リンク ---------- */
body.ui-r .sidebar-cat {
    padding: 0 12px;
    margin-bottom: 18px;
}
body.ui-r .sidebar-cat ul {
    margin: 0;
}
body.ui-r .sidebar-cat ul li,
body.ui-r .sidebar-cat ul li.active {
    position: relative;
    padding: 0;
    border-bottom: 0;
    margin-bottom: 2px;
    border-radius: 12px;
    overflow: hidden;
}
/* ホバーで左から伸びる金のバー */
body.ui-r .sidebar-cat ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(240, 212, 58, .22) 0%, rgba(240, 212, 58, .06) 70%, rgba(240, 212, 58, 0) 100%);
    box-shadow: inset 3px 0 0 var(--ui-gold-hi);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ui-dur-3) var(--ui-ease);
    pointer-events: none;
}
body.ui-r .sidebar-cat ul li:hover::before {
    transform: scaleX(1);
}
body.ui-r .sidebar-cat ul li a {
    position: relative;
    display: block;
    padding: 11px 30px 11px 14px;
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
}
body.ui-r .sidebar-cat ul li a:hover {
    color: #fff;
}
body.ui-r .sidebar-cat ul li a small {
    color: rgba(255, 255, 255, .5);
    font-weight: 500;
}
body.ui-r .sidebar-cat ul li a i,
body.ui-r .sidebar-cat li a i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    float: none;
    color: rgba(240, 212, 58, .7);
    transition: transform var(--ui-dur-2) var(--ui-ease), color var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .sidebar-cat ul li:hover a i {
    transform: translate(3px, -50%);
    color: var(--ui-gold-hi);
}
/* active（いま見ている地方）→ 金 */
body.ui-r .sidebar-cat ul li.active {
    background: var(--ui-gold-btn);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 18px rgba(210, 181, 3, .25);
}
body.ui-r .sidebar-cat ul li.active::before {
    display: none;
}
body.ui-r .sidebar-cat h2 {
    background: transparent;
    color: var(--ui-navy-900);
    font-size: 15px;
    font-weight: 800;
    padding: 0;
    margin: 0;
    line-height: 1.5;
}
body.ui-r .sidebar-cat ul li.active a small {
    color: rgba(7, 21, 38, .6);
}
body.ui-r .sidebar-cat ul li.active a i,
body.ui-r .sidebar-cat h2 i {
    color: var(--ui-navy-800);
    font-size: 14px;
    float: none;
    line-height: 1;
}

/* =============================================================
 * 釣果検索フォーム（PCはサイドバー内、スマホはページ下部に回る）
 * ============================================================= */
body.ui-r .sidebar-search {
    font-size: 15px;
    padding: 0 0 28px;
}
body.ui-r .sidebar-search h2 {
    position: relative;
    margin: 0 18px 14px;
    padding: 14px 0 10px;
    background: transparent;
    color: var(--ui-gold-hi);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .12em;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
body.ui-r .sidebar-search h2 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 50%;
    background: rgba(240, 212, 58, .14);
    color: var(--ui-gold-hi);
    font-size: 13px;
    vertical-align: middle;
}
body.ui-r .sidebar-search form {
    padding-left: 18px;
    padding-right: 18px;
}
body.ui-r .sidebar-search .form-group {
    margin-bottom: 10px;
}
body.ui-r .sidebar-search form label {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}
body.ui-r .sidebar-search form input.form-control,
body.ui-r .sidebar-search form select {
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .0);
    border-radius: var(--ui-r-sm);
    background-color: rgba(255, 255, 255, .95) !important;
    color: var(--ui-ink);
    font-size: 14px;
    box-shadow: inset 0 1px 2px rgba(7, 21, 38, .12);
}
body.ui-r .sidebar-search form input.form-control::placeholder {
    color: #8696a3;
}
body.ui-r .sidebar-search form select {
    background-image: url(../../images/down.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    background-size: 12px;
}
body.ui-r .sidebar-search form input.form-control:focus,
body.ui-r .sidebar-search form select:focus {
    border-color: var(--ui-aqua);
    box-shadow: 0 0 0 3px rgba(76, 195, 240, .35);
}
/* readonly の釣行日（daterangepicker）も白に揃える */
body.ui-r .sidebar-search #formCalendar[readonly] {
    background-color: rgba(255, 255, 255, .95) !important;
    cursor: pointer;
}
body.ui-r .sidebar-search .form-group > i {
    color: var(--ui-navy);
    opacity: .7;
}
/* select2（釣場・魚種） */
body.ui-r .sidebar-search .select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .95);
    box-shadow: inset 0 1px 2px rgba(7, 21, 38, .12);
}
body.ui-r .sidebar-search .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    color: var(--ui-ink);
    font-size: 14px;
}
body.ui-r .sidebar-search .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

/* リセット／この条件で検索 */
body.ui-r .sidebar-search .submit-gr {
    margin-top: 18px;
    gap: 8px;
}
body.ui-r .sidebar-search .submit-gr input,
body.ui-r .sidebar-search .submit-gr input.reset-form {
    height: 44px;
    margin-right: 0;
    width: 38%;
    background: transparent !important;
    color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--ui-r-sm);
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .sidebar-search .submit-gr input:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .5);
}
body.ui-r .sidebar-search .submit-gr button {
    flex: 1 1 auto;
    width: auto;
    height: 44px;
    border-radius: var(--ui-r-sm);
    font-size: 13px;
    padding: 5px 22px 5px 8px !important;
    white-space: nowrap;
}
body.ui-r .sidebar-search .submit-gr i {
    opacity: .7;
    right: 10px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}
/* この検索条件を保存する → 水色の細枠 */
body.ui-r .sidebar-search .btn-save-state {
    margin-top: 10px;
    height: 44px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: var(--ui-r-sm);
    background: rgba(76, 195, 240, .10);
    background-image: none;
    color: #d6f2fd;
    box-shadow: inset 0 0 0 1px rgba(76, 195, 240, .5);
}
body.ui-r .sidebar-search .btn-save-state:hover {
    background: rgba(76, 195, 240, .2);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(76, 195, 240, .9), 0 8px 20px rgba(0, 0, 0, .25);
}

/* =============================================================
 * ロゴ帯（.top-ct）
 * ============================================================= */
body.ui-r .content .top-ct {
    position: relative;
}
body.ui-r .content .top-ct > a {
    display: block;
    position: relative;
}
/* ロゴの後ろに柔らかい光 */
body.ui-r .content .top-ct > a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(420px, 80%);
    height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 250, 215, .55), rgba(255, 250, 215, 0));
    pointer-events: none;
    z-index: 0;
}
body.ui-r .content .top-ct > a > img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 18px rgba(110, 93, 0, .35));
    transition: transform var(--ui-dur-3) var(--ui-ease);
}
body.ui-r .content .top-ct > a:hover > img {
    transform: scale(1.02);
}

/* =============================================================
 * 「釣りが3倍楽しくなる！」バナー（bottom-add の .click-in）
 * ============================================================= */
body.ui-r .click-in {
    border-radius: var(--ui-r-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
body.ui-r .click-in span {
    font-size: .62em;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ui-gold-deep);
}
body.ui-r .click-in b {
    font-weight: 800;
    letter-spacing: .04em;
}
body.ui-r .click-in img {
    filter: brightness(0) saturate(100%) invert(9%) sepia(36%) saturate(2400%) hue-rotate(196deg) brightness(92%);
    transition: transform var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .click-in:hover img {
    transform: translate(4px, -50%);
}

/* =============================================================
 * フッター（コピーライト）
 * ============================================================= */
body.ui-r .copyright {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-left: 0;
    padding: 30px 16px 26px;
    background: var(--ui-night-grad);
    color: rgba(255, 255, 255, .55);
    box-shadow: inset 0 3px 0 var(--ui-gold), inset 0 4px 0 rgba(255, 255, 255, .15);
    font-size: 13px;
    letter-spacing: .04em;
}
body.ui-r .copyright p:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 4px;
    margin-bottom: 14px;
}
body.ui-r .copyright p:first-child a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--ui-r-pill);
    color: rgba(255, 255, 255, .82);
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .copyright p:first-child a:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--ui-gold-hi);
}
body.ui-r .copyright p:first-child span {
    margin-right: 0;
}
body.ui-r .copyright p:last-child {
    margin-bottom: 0;
    font-family: var(--ui-font-display), var(--ui-font-body);
    font-weight: 500;
    color: rgba(255, 255, 255, .45);
}

/* =============================================================
 * スマホ・タブレット（〜1024px）
 * ============================================================= */
@media (max-width: 1024px) {
    /* サイドバーは下に回る → 背景は金のまま透過、検索だけ紺のカード */
    body.ui-r .sidebar {
        background: transparent;
        box-shadow: none;
        color: inherit;
    }
    body.ui-r .sidebar-search {
        margin: 8px 16px 28px;
        padding: 22px 0 24px;
        border-radius: var(--ui-r-lg);
        color: #fff;
        background-color: var(--ui-navy-900);
        background-image:
            radial-gradient(80% 40% at 50% 0%, rgba(240, 212, 58, .16) 0%, rgba(240, 212, 58, 0) 70%),
            linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .04) 34%, rgba(255, 255, 255, 0) 38%),
            linear-gradient(180deg, #0f2a4d 0%, #0b1f3a 50%, #071526 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--ui-shadow-3);
    }
    body.ui-r .sidebar-search h2 {
        margin: 0 20px 14px;
        padding: 0 0 14px;
        border-top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        text-align: center;
        font-size: 20px;
        color: var(--ui-gold-hi);
    }
    body.ui-r .sidebar-search h2 i {
        display: flex;
        width: 44px;
        height: 44px;
        margin: 0 auto 8px;
        font-size: 18px;
    }
    body.ui-r .sidebar-search form {
        padding-left: 20px;
        padding-right: 20px;
    }
    body.ui-r .sidebar-search form label {
        font-size: 13px;
    }
    body.ui-r .sidebar-search form input.form-control,
    body.ui-r .sidebar-search form select,
    body.ui-r .sidebar-search .select2-container--default .select2-selection--single {
        height: 46px;
        font-size: 16px; /* iOS のズーム防止 */
    }
    body.ui-r .sidebar-search .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px;
        font-size: 16px;
    }
    body.ui-r .sidebar-search .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px;
    }
    body.ui-r .sidebar-search form .form-group > i {
        font-size: 15px;
        top: auto;
        bottom: 15px;
        right: 16px;
        transform: none;
    }
    body.ui-r .sidebar-search .submit-gr input,
    body.ui-r .sidebar-search .submit-gr button,
    body.ui-r .sidebar-search .btn-save-state {
        height: 50px;
        font-size: 15px;
    }
    body.ui-r .sidebar-search .submit-gr i {
        font-size: 15px;
    }

    /* コピーライト：下部固定ナビに隠れないよう余白 */
    body.ui-r .copyright {
        font-size: 13px;
        padding-bottom: calc(var(--ui-sp-nav-h) + 28px + env(safe-area-inset-bottom, 0px));
    }

    /* ---------- 下部固定ナビ（footer） ---------- */
    body.ui-r footer {
        left: 0;
        right: 0;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        background: rgba(7, 21, 38, .88);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        backdrop-filter: blur(14px) saturate(160%);
        box-shadow: 0 -1px 0 rgba(255, 255, 255, .08), 0 -10px 30px rgba(7, 21, 38, .28);
        z-index: 9;
    }
    body.ui-r .footer_area {
        display: flex;
        gap: 6px;
        width: 100%;
        font-size: 12px;
    }
    body.ui-r .footer_area p,
    body.ui-r .shipized .footer_area p {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin: 0;
        background: transparent;
        overflow: visible;
    }
    body.ui-r .footer_area a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        line-height: 1.2;
        padding: 0 4px;
        border-radius: 12px;
        color: #fff;
        font-weight: 700;
        letter-spacing: .02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: rgba(255, 255, 255, .07);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
        transition: transform var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease);
    }
    body.ui-r .footer_area a > span.login {
        padding-bottom: 0; /* 汎用 .login の余白を打ち消す */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.ui-r .footer_area a:active {
        transform: scale(.96);
    }
    /* 主役（ログイン・新規登録／マイページ）→ 金 */
    body.ui-r .footer_area .footer_log a {
        color: var(--ui-navy-900);
        background: var(--ui-gold-btn);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 4px 14px rgba(210, 181, 3, .3);
        font-weight: 800;
    }
    /* 釣果を見る → 水色 */
    body.ui-r .footer_area .footer_showchoka a {
        color: var(--ui-navy-900);
        background: linear-gradient(180deg, #8fdcf8 0%, var(--ui-aqua) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    }
    /* SNSモードは既存の緑（ティール）を保つ */
    body.ui-r .footer_area .footer_sns_mode a {
        background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    }
    body.ui-r .footer_area .footer_notify a {
        overflow: visible;
    }
    /* 通知バッジ → ハート色のピル */
    body.ui-r .footer-notify-badge {
        top: -6px;
        right: 2px;
        min-width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: var(--ui-r-pill);
        background: var(--ui-heart);
        color: #fff;
        font-family: var(--ui-font-display);
        font-size: 11px;
        box-shadow: 0 0 0 2px rgba(7, 21, 38, .95);
    }
}

@media (max-width: 767px) {
    body.ui-r .click-in {
        border-radius: var(--ui-r);
    }
}

/* 狭い端末ではナビの文字を少しだけ詰める */
@media (max-width: 360px) {
    body.ui-r .footer_area { font-size: 11px; gap: 4px; }
    body.ui-r footer { padding-left: 6px; padding-right: 6px; }
}

/* 地方の大会リンクは1行に収める（本番の「北海道・東北地方の大会（釣果情報）」が最長）。
 * サイドバー幅に合わせて文字を縮める。全項目で同じ大きさにそろえる。
 * 幅の単位(cqw)が使えない古いブラウザでは、これまでどおり折り返す */
@supports (container-type: inline-size) {
    body.ui-r .sidebar-cat ul {
        container-type: inline-size;
    }
    body.ui-r .sidebar-cat ul li a,
    body.ui-r .sidebar-cat h2 {
        white-space: nowrap;
        font-size: min(15px, calc((100cqw - 40px) / 15.2));
    }
    body.ui-r .sidebar-cat ul li a {
        padding-left: 12px;
        padding-right: 26px;
        letter-spacing: 0;
    }
    body.ui-r .sidebar-cat ul li a small {
        font-size: .74em;
    }
    body.ui-r .sidebar-cat ul li a i,
    body.ui-r .sidebar-cat li a i {
        right: 10px;
    }
}