/* =============================================================
 * UIリニューアル「Stadium Gold」— 01 全ページ共通の部品
 * 背景の金・見出し・白カード・ボタン・フォーム・パンくず・ページ送り・
 * モーダル・フラッシュ・バッジ・ハート・リンク・画像・スクロールバー・選択色・
 * ui-renewal.js が付けるクラス（ui-reveal / ui-in / ui-ripple など）
 * ============================================================= */

/* ---------- 文字の基本 ---------- */
body.ui-r {
    color: var(--ui-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    background: var(--ui-navy-900);
}

body.ui-r ::selection {
    background: rgba(240, 212, 58, .55);
    color: var(--ui-navy-900);
}

/* キーボード操作時だけフォーカスリング */
body.ui-r a:focus-visible,
body.ui-r button:focus-visible,
body.ui-r [role="button"]:focus-visible,
body.ui-r input:focus-visible,
body.ui-r select:focus-visible,
body.ui-r textarea:focus-visible {
    outline: 3px solid rgba(76, 195, 240, .6);
    outline-offset: 2px;
}
body.ui-r a:focus:not(:focus-visible),
body.ui-r button:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- 背景の金：上からの光＋波紋＋下へ深く ---------- */
/* .content の金ベタを透明にして、外側の .row にパターン入りの金を敷く。
   トップの紙吹雪（main_bg.png）など .content 側の背景画像はそのまま上に重なる。 */
body.ui-r main.container-fluid > .row {
    background-color: var(--ui-gold);
    background-image:
        radial-gradient(120% 60% at 50% -8%, rgba(255, 248, 205, .55) 0%, rgba(255, 240, 160, .18) 38%, rgba(255, 240, 160, 0) 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48' viewBox='0 0 160 48'%3E%3Cpath d='M0 24c20 0 20-10 40-10s20 10 40 10 20-10 40-10 20 10 40 10' fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1.4'/%3E%3Cpath d='M0 44c20 0 20-8 40-8s20 8 40 8 20-8 40-8 20 8 40 8' fill='none' stroke='%236e5d00' stroke-opacity='.06' stroke-width='1.2'/%3E%3C/svg%3E"),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, rgba(255, 255, 255, 0) 2px 14px),
        linear-gradient(180deg, #d9bc0c 0%, #d2b503 35%, #c4a700 75%, #b09500 100%);
    background-repeat: no-repeat, repeat, repeat, no-repeat;
    background-size: 100% 1400px, 160px 48px, auto, 100% 100%;
    background-position: 50% 0, 0 0, 0 0, 0 0;
}
body.ui-r .content:not(.bg-6CCAFF) {
    background-color: transparent;
}

/* ---------- リンク ---------- */
body.ui-r a {
    transition: color var(--ui-dur-1) var(--ui-ease), opacity var(--ui-dur-1) var(--ui-ease);
}
body.ui-r a:hover {
    color: var(--ui-navy-hi);
}

/* ---------- 白いカード／パネル（金の上に浮かぶ） ---------- */
body.ui-r .list-review,
body.ui-r .search-result,
body.ui-r .bg-end,
body.ui-r .profile,
body.ui-r .list-friend,
body.ui-r .grade-list,
body.ui-r .can-do {
    border-radius: var(--ui-r-lg);
    box-shadow: var(--ui-card-shadow);
}
body.ui-r .search-result > h1:first-child,
body.ui-r .search-result > h2:first-child,
body.ui-r .can-do > h2:first-child {
    border-radius: var(--ui-r-lg) var(--ui-r-lg) 0 0;
}

/* 投稿一覧の行（白箱の中の1件） */
body.ui-r .review .item {
    border-bottom-color: var(--ui-line);
    transition: background-color var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .review .item figure {
    border-radius: var(--ui-r);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, var(--ui-shadow-1);
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari の角丸＋transform 対策 */
}
body.ui-r .review .item figure img {
    transition: transform 600ms var(--ui-ease);
}
body.ui-r .review .item:hover figure img {
    transform: scale(1.04);
}
body.ui-r .review .item .caption h3 {
    color: var(--ui-ink-2);
    letter-spacing: .02em;
}
body.ui-r .review .item .caption > p {
    color: var(--ui-ink);
    line-height: 1.7;
}
body.ui-r .review .item .caption > a {
    color: var(--ui-navy);
    font-weight: 700;
}
body.ui-r .review .item .caption .time {
    color: var(--ui-ink-2);
    font-family: var(--ui-font-display);
    font-weight: 500;
    letter-spacing: .04em;
}

/* ---------- セクション見出し ---------- */
/* 金の上の白見出し（「各地方大会(釣果情報)の案内」など） */
body.ui-r .list-news h2,
body.ui-r .trophy h2,
body.ui-r .bottom-add h3 {
    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 .list-news hr,
body.ui-r .bottom-add hr {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 70%, rgba(255, 255, 255, 0));
    border-radius: 2px;
    overflow: visible;
}
body.ui-r .list-news hr:before,
body.ui-r .bottom-add hr:after {
    border: 0;
    height: 4px;
    width: 72px;
    top: -1px;
    border-radius: 4px;
    background: var(--ui-navy-800);
    box-shadow: 0 2px 6px rgba(7, 21, 38, .25);
}

/* 白カード上部の帯見出し（ログイン・「今回使用したタックル」など）→ 紺の帯＋金の細線 */
body.ui-r .search-result h1,
body.ui-r .search-result h2,
body.ui-r .can-do h2,
body.ui-r .detail-news .product-relate h2 {
    background: var(--ui-navy-grad);
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow: inset 0 -3px 0 var(--ui-gold), inset 0 1px 0 rgba(255, 255, 255, .18);
    text-shadow: 0 1px 2px rgba(7, 21, 38, .35);
}
body.ui-r .detail-news .product-relate h2 {
    border-radius: var(--ui-r);
}

/* 左線見出し（「｜ロッド」など） */
body.ui-r .detail-news .table h3,
body.ui-r .detail-news .product-relate .product h3,
body.ui-r .detail-news .slide-relate h3,
body.ui-r .grade-list h3,
body.ui-r .amazon-f h3,
body.ui-r .tackle-all .product-relate .product h3,
body.ui-r .bottom-top10 .title-item h3 {
    color: var(--ui-navy-800);
    letter-spacing: .02em;
    padding-left: 18px;
}
body.ui-r .detail-news .table h3:before,
body.ui-r .detail-news .product-relate .product h3:before,
body.ui-r .detail-news .slide-relate h3:before,
body.ui-r .grade-list h3:before,
body.ui-r .amazon-f h3:before,
body.ui-r .tackle-all .product-relate .product h3:before,
body.ui-r .bottom-top10 .title-item h3:before {
    border-left: 0;
    width: 6px;
    height: .95em;
    min-height: 18px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--ui-gold-hi) 0%, var(--ui-gold) 45%, var(--ui-navy) 46%, var(--ui-navy-800) 100%);
    box-shadow: 0 1px 3px rgba(7, 21, 38, .2);
}

/* ---------- ボタン ---------- */
/* 共通の動き */
body.ui-r .btn-submit,
body.ui-r .btn-result,
body.ui-r .btn-create,
body.ui-r .btn-faq,
body.ui-r .view-more,
body.ui-r .btn-end,
body.ui-r .btn04,
body.ui-r .click-in,
body.ui-r .submit-gr button,
body.ui-r .btn-top,
body.ui-r .bottom-add .list-button button,
body.ui-r .like-bttn {
    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),
        filter var(--ui-dur-2) var(--ui-ease),
        border-color var(--ui-dur-2) var(--ui-ease);
    -webkit-user-select: none;
    user-select: none;
}

/* 金ボタン：金グラデ＋上面ハイライト＋ホバーで光が横切る */
body.ui-r .btn-result,
body.ui-r .btn-create,
body.ui-r a.btn-create,
body.ui-r .submit-gr button,
body.ui-r .btn-top,
body.ui-r .click-in {
    background-color: var(--ui-gold);
    background-image:
        linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%),
        var(--ui-gold-btn);
    background-size: 260% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    background-repeat: no-repeat;
    color: var(--ui-navy-900) !important;
    border: 1px solid rgba(110, 93, 0, .45);
    border-radius: var(--ui-r);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .75),
        inset 0 -2px 0 rgba(110, 93, 0, .25),
        0 2px 4px rgba(7, 21, 38, .12),
        0 8px 20px rgba(110, 93, 0, .28);
    font-weight: 800;
    letter-spacing: .04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
body.ui-r .btn-result i,
body.ui-r .btn-create i,
body.ui-r .submit-gr button i,
body.ui-r .btn-top i {
    color: var(--ui-navy-800);
}
body.ui-r .btn-result:hover,
body.ui-r .btn-create:hover,
body.ui-r .submit-gr button:hover,
body.ui-r .btn-top:hover,
body.ui-r .click-in:hover {
    background-position: -30% 0, 0 0;
    transform: translateY(-2px);
    filter: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        inset 0 -2px 0 rgba(110, 93, 0, .25),
        0 4px 8px rgba(7, 21, 38, .14),
        0 16px 34px rgba(110, 93, 0, .36);
}

/* btn04（「過去の優勝者はこちら」）は矢印画像を残して金に */
body.ui-r .btn04 {
    background-color: var(--ui-gold);
    background-image:
        linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%),
        url(../../images/arrow_right.png),
        var(--ui-gold-btn);
    background-size: 260% 100%, auto, 100% 100%;
    background-position: 130% 0, center right 25px, 0 0;
    background-repeat: no-repeat;
    color: var(--ui-navy-900) !important;
    border: 1px solid rgba(110, 93, 0, .45);
    border-radius: var(--ui-r);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 8px 20px rgba(110, 93, 0, .28);
    font-weight: 800;
}
body.ui-r .btn04:hover {
    background-position: -30% 0, center right 25px, 0 0;
    transform: translateY(-2px);
}

/* 紺ボタン：紺グラデ＋水色の細いリング */
body.ui-r .btn-submit,
body.ui-r .btn-faq,
body.ui-r .like-bttn {
    background-color: var(--ui-navy);
    background-image:
        linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 60%),
        var(--ui-navy-grad);
    background-size: 260% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    background-repeat: no-repeat;
    color: #fff;
    border: 0;
    border-radius: var(--ui-r);
    box-shadow:
        0 0 0 1px rgba(76, 195, 240, .45),
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 2px 4px rgba(7, 21, 38, .14),
        0 10px 24px rgba(13, 79, 140, .30);
    font-weight: 700;
    letter-spacing: .04em;
}
body.ui-r .btn-submit:hover,
body.ui-r .btn-faq:hover,
body.ui-r .like-bttn:not(:disabled):hover {
    background-position: -30% 0, 0 0;
    color: #fff;
    transform: translateY(-2px);
    filter: none;
    box-shadow:
        0 0 0 1px rgba(76, 195, 240, .8),
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 4px 8px rgba(7, 21, 38, .16),
        0 16px 34px rgba(13, 79, 140, .38);
}

/* アウトライン（「一覧を見る」「一覧へ戻る」） */
body.ui-r .view-more,
body.ui-r .btn-end {
    background: #fff;
    color: var(--ui-navy);
    border: 1.5px solid rgba(13, 79, 140, .55);
    border-radius: var(--ui-r-pill);
    font-weight: 700;
    letter-spacing: .06em;
    box-shadow: 0 1px 2px rgba(7, 21, 38, .06);
}
body.ui-r .view-more:hover,
body.ui-r .btn-end:hover {
    background: var(--ui-navy);
    border-color: var(--ui-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13, 79, 140, .28);
}

/* 押した瞬間の沈み込み */
body.ui-r .btn-submit:active,
body.ui-r .btn-result:active,
body.ui-r .btn-create:active,
body.ui-r .btn-faq:active,
body.ui-r .view-more:active,
body.ui-r .btn-end:active,
body.ui-r .btn04:active,
body.ui-r .click-in:active,
body.ui-r .submit-gr button:active,
body.ui-r .btn-top:active,
body.ui-r .bottom-add .list-button button:active,
body.ui-r .like-bttn:not(:disabled):active {
    transform: translateY(0) scale(.98);
    transition-duration: 80ms;
}

/* Bootstrap の .btn（モーダルの「はい／いいえ」など） */
body.ui-r .btn {
    border-radius: var(--ui-r-sm);
    font-weight: 700;
    transition: transform var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .btn-light {
    background: #fff;
    border: 1px solid var(--ui-line-strong);
    color: var(--ui-ink);
    box-shadow: 0 1px 2px rgba(7, 21, 38, .06);
}
body.ui-r .btn-light:hover {
    background: var(--ui-surface-2);
    border-color: rgba(13, 79, 140, .35);
}

/* ---------- 下部の白いリンクボタン（bottom-add のお知らせリンク） ---------- */
body.ui-r .bottom-add .list-button button {
    background: #fff;
    color: var(--ui-navy-800);
    border-radius: var(--ui-r);
    box-shadow: var(--ui-card-shadow);
    font-weight: 700;
}
body.ui-r .bottom-add .list-button button:hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-hl-top), var(--ui-shadow-3);
}
body.ui-r .bottom-add .list-button button i {
    color: var(--ui-gold-lo);
}

/* ---------- フォーム部品 ---------- */
body.ui-r .form-control {
    border-radius: var(--ui-r-sm);
    transition: border-color var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .form-control:focus,
body.ui-r textarea:focus,
body.ui-r select:focus {
    border-color: var(--ui-aqua);
    box-shadow: var(--ui-focus);
    outline: none;
}
body.ui-r select.form-control {
    border-radius: var(--ui-r-sm);
}
body.ui-r .form-control::placeholder {
    color: #9aa8b2;
}
body.ui-r .select2-container--default .select2-selection--single {
    border-radius: var(--ui-r-sm);
    transition: border-color var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .select2-container--default.select2-container--focus .select2-selection--single,
body.ui-r .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ui-aqua);
    box-shadow: var(--ui-focus);
}
/* select2 / daterangepicker のドロップダウンは body 直下に出るので body.ui-r で効く */
body.ui-r .select2-dropdown {
    border-color: rgba(13, 79, 140, .25);
    border-radius: var(--ui-r-sm);
    box-shadow: var(--ui-shadow-2);
    overflow: hidden;
}
body.ui-r .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--ui-navy);
}
body.ui-r .daterangepicker {
    border: 0;
    border-radius: var(--ui-r);
    box-shadow: var(--ui-shadow-3);
    font-family: var(--ui-font-body);
}
body.ui-r .daterangepicker td.active,
body.ui-r .daterangepicker td.active:hover {
    background-color: var(--ui-navy);
}
body.ui-r .daterangepicker td.in-range:not(.active) {
    background-color: var(--ui-aqua-pale);
}

/* ---------- パンくず（全国 > 九州 > …） ---------- */
body.ui-r .panlist {
    background: rgba(255, 255, 255, .96);
    border: 0;
    border-radius: var(--ui-r);
    box-shadow: var(--ui-card-shadow);
    overflow: hidden;
}
body.ui-r .panlist a,
body.ui-r .panlist .a {
    background: transparent;
    color: var(--ui-ink-2);
    font-weight: 700;
}
body.ui-r .panlist a:hover {
    color: var(--ui-navy);
}
body.ui-r .panlist li.active a,
body.ui-r .panlist li.active .a {
    background: transparent;
    color: var(--ui-navy-800);
    font-weight: 800;
}
/* 菱形の装飾 → 細い山形（シェブロン）の区切りに */
body.ui-r .panlist .after-as-rhombus a::after,
body.ui-r .panlist .after-as-rhombus .a::after {
    background: none;
    border: 0;
    border-top: 2px solid rgba(13, 79, 140, .35);
    border-right: 2px solid rgba(13, 79, 140, .35);
    width: 9px;
    height: 9px;
    top: 50%;
    right: -6px;
    margin-top: -5px;
    transform: rotate(45deg);
    z-index: 1;
}
body.ui-r .panlist li:first-of-type a,
body.ui-r .panlist li:first-of-type .a {
    color: var(--ui-navy);
}

/* ---------- ページネーション（partials/pagination） ---------- */
body.ui-r ul.pageNav01s li span,
body.ui-r ul.pageNav01s li a {
    min-width: 40px;
    width: auto;
    height: 40px;
    line-height: 40px;
    padding: 0 6px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .92);
    color: var(--ui-navy-800);
    font-family: var(--ui-font-display);
    font-weight: 700;
    font-size: 15px;
    box-shadow: var(--ui-shadow-1);
    transition: transform var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r ul.pageNav01s li a:hover {
    transform: translateY(-2px);
    background-color: #fff;
    color: var(--ui-navy-hi);
}
body.ui-r ul.pageNav01s li.active span {
    background: var(--ui-night-grad);
    color: var(--ui-gold-hi);
    box-shadow: 0 0 0 1px rgba(240, 212, 58, .5), 0 6px 16px rgba(7, 21, 38, .3);
}
body.ui-r ul.pageNav01s li.page-item.disabled span {
    background: transparent;
    box-shadow: none;
    color: var(--ui-ink-2);
}
body.ui-r ul.pageNav01s .prev a,
body.ui-r ul.pageNav01s .next a {
    height: 40px;
    line-height: 40px;
    background-color: var(--ui-navy);
    color: #fff;
    letter-spacing: .08em;
    font-size: 13px;
}
body.ui-r ul.pageNav01s .prev a {
    padding: 0 14px 0 22px;
    background-position: left 10px center;
}
body.ui-r ul.pageNav01s .next a {
    padding: 0 22px 0 14px;
    background-position: right 10px center;
}
body.ui-r ul.pageNav01s .prev a:hover,
body.ui-r ul.pageNav01s .next a:hover {
    background-color: var(--ui-navy-hi);
    color: #fff;
}

/* ---------- モーダル ---------- */
/* トースト型（セッション切れ・検索条件保存・画像エラー・リダイレクト） */
body.ui-r #modal-error,
body.ui-r #modal-save-search-state,
body.ui-r #modal-image-error,
body.ui-r #modal-redirect {
    background: rgba(7, 21, 38, .88);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border-radius: var(--ui-r-lg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, var(--ui-shadow-3);
    letter-spacing: .02em;
}
body.ui-r #modal-error .checked-icon {
    color: var(--ui-gold-hi);
}
body.ui-r #modal-save-search-state .checked-icon {
    color: var(--ui-aqua);
}
/* Bootstrap モーダル */
body.ui-r .modal-content {
    border: 0;
    border-radius: var(--ui-r-lg);
    box-shadow: var(--ui-shadow-3);
    overflow: hidden;
}
body.ui-r .modal-header {
    border-bottom-color: var(--ui-line);
}
body.ui-r .modal-footer {
    border-top-color: var(--ui-line);
}
body.ui-r .modal-backdrop.show {
    background: var(--ui-navy-900);
    opacity: .6;
}
/* ローディング（#loadingModal / #loading_dialog）は白箱を消して浮かせる */
body.ui-r #loadingModal .modal-content,
body.ui-r #loading_dialog .modal-content {
    background: rgba(255, 255, 255, .94);
    border-radius: var(--ui-r-lg);
}

/* ---------- フラッシュメッセージ ---------- */
body.ui-r .alert {
    border: 0;
    border-left: 4px solid currentColor;
    border-radius: var(--ui-r-sm);
    box-shadow: var(--ui-shadow-1);
    line-height: 1.7;
}
body.ui-r .alert-success { background: #e9f8ef; color: #17663a; }
body.ui-r .alert-info    { background: var(--ui-aqua-pale); color: #0b5577; }
body.ui-r .alert-warning { background: #fff7db; color: #7a5b00; }
body.ui-r .alert-danger  { background: #ffecef; color: #a3122f; }
body.ui-r .alert .close {
    opacity: .5;
    transition: opacity var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .alert .close:hover {
    opacity: .9;
}

/* ---------- バッジ ---------- */
body.ui-r .badge {
    border-radius: var(--ui-r-pill);
    padding: .38em .75em;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ---------- タグ（都道府県タグ・投稿タグのピル） ---------- */
body.ui-r .detail-news .tags li {
    border-color: rgba(13, 79, 140, .45);
    border-radius: var(--ui-r-pill);
    background: #fff;
    transition: background-color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .detail-news .tags li:hover {
    background: var(--ui-aqua-pale);
    border-color: var(--ui-navy);
    transform: translateY(-1px);
}
body.ui-r .detail-news .tags li a {
    color: var(--ui-navy);
}

/* ---------- ハート（いいね数） ---------- */
body.ui-r .vote,
body.ui-r .review .item .caption span {
    font-family: var(--ui-font-display);
    font-weight: 700;
    filter: drop-shadow(0 2px 3px rgba(7, 21, 38, .18));
    transition: transform var(--ui-dur-2) var(--ui-ease-spring);
}
body.ui-r .vote:hover,
body.ui-r .review .item:hover .caption span {
    transform: scale(1.08);
}
body.ui-r .vote:active,
body.ui-r .review .item .caption span:active {
    animation: ui-heart-pop 420ms var(--ui-ease-spring);
}
/* いいねボタンの中のハートが弾む（ui-renewal.js が押下時に .ui-pop を付ける） */
body.ui-r .like-bttn i {
    display: inline-block;
    transition: transform var(--ui-dur-2) var(--ui-ease-spring);
}
body.ui-r .like-bttn:not(:disabled):hover i {
    transform: scale(1.15);
}
body.ui-r .ui-pop {
    animation: ui-heart-pop 420ms var(--ui-ease-spring);
}
@keyframes ui-heart-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    55%  { transform: scale(.9); }
    100% { transform: scale(1); }
}

/* ---------- スクロールバー ---------- */
body.ui-r {
    scrollbar-color: rgba(11, 31, 58, .45) transparent;
}
body.ui-r ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body.ui-r ::-webkit-scrollbar-track {
    background: transparent;
}
body.ui-r ::-webkit-scrollbar-thumb {
    background: rgba(11, 31, 58, .35);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
body.ui-r ::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 31, 58, .55);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* ---------- 演出（ui-renewal.js が付けるクラス） ---------- */
/* スクロールでふわっと出る */
body.ui-r .ui-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms var(--ui-ease), transform 700ms var(--ui-ease);
    transition-delay: var(--ui-reveal-delay, 0ms);
}
body.ui-r .ui-reveal.ui-in {
    opacity: 1;
    transform: none;
}
/* 画像の遅延フェードイン */
body.ui-r img.ui-img-fade {
    opacity: 0;
    transition: opacity 500ms var(--ui-ease);
}
body.ui-r img.ui-img-fade.ui-img-in {
    opacity: 1;
}
/* 押下時の波紋 */
body.ui-r .ui-ripple-host {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}
body.ui-r .ui-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .25) 45%, rgba(255, 255, 255, 0) 70%);
    transform: scale(0);
    opacity: 1;
    animation: ui-ripple 600ms var(--ui-ease) forwards;
    pointer-events: none;
}
@keyframes ui-ripple {
    to { transform: scale(1); opacity: 0; }
}
/* カウントアップ中は数字の幅を揃えて揺れないように */
body.ui-r .ui-counting {
    font-variant-numeric: tabular-nums;
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
    body.ui-r *,
    body.ui-r *::before,
    body.ui-r *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    body.ui-r .ui-reveal,
    body.ui-r img.ui-img-fade {
        opacity: 1;
        transform: none;
    }
}

/* 波紋（ui-renewal.js）を内側に収めるための基準。子に absolute を持たないボタンだけ */
body.ui-r .btn-create,
body.ui-r .btn-faq,
body.ui-r .view-more,
body.ui-r .btn-end,
body.ui-r .sidebar-top button {
    position: relative;
}

/* 投稿一覧の上の「投稿する／ご利用方法」（frontend-shipized.css の紺上書きに勝たせる） */
body.ui-r .create-review .btn-create,
body.ui-r .review .btn-create {
    background-color: var(--ui-gold);
    background-image:
        linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%),
        var(--ui-gold-btn);
    background-size: 260% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    background-repeat: no-repeat;
    color: var(--ui-navy-900) !important;
    border: 1px solid rgba(110, 93, 0, .45);
    border-radius: var(--ui-r);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .75),
        inset 0 -2px 0 rgba(110, 93, 0, .25),
        0 2px 4px rgba(7, 21, 38, .12),
        0 8px 20px rgba(110, 93, 0, .28);
}
body.ui-r .create-review .btn-create:hover,
body.ui-r .review .btn-create:hover {
    background-position: -30% 0, 0 0;
    filter: none;
}
body.ui-r .create-review .btn-faq,
body.ui-r .review .btn-faq {
    background-color: var(--ui-navy);
    background-image:
        linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 60%),
        var(--ui-navy-grad);
    background-size: 260% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    background-repeat: no-repeat;
    color: #fff;
    border-radius: var(--ui-r);
    box-shadow:
        0 0 0 1px rgba(76, 195, 240, .45),
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 10px 24px rgba(13, 79, 140, .30);
}
body.ui-r .create-review .btn-faq:hover,
body.ui-r .review .btn-faq:hover {
    background-position: -30% 0, 0 0;
    filter: none;
}

/* パンくず：菱形をやめたので左右の余白を詰め、金の上で浮かせる */
body.ui-r .panlist {
    margin-left: 16px;
    margin-right: 16px;
}
body.ui-r .panlist a,
body.ui-r .panlist .a {
    padding: 0 22px 0 22px;
}
body.ui-r .panlist li:first-of-type a,
body.ui-r .panlist li:first-of-type .a {
    padding-left: 24px;
}
/* 長いパンくずは切らずに横スワイプで読めるように */
body.ui-r .panlist ul {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
body.ui-r .panlist ul::-webkit-scrollbar {
    display: none;
}