/* =============================================================
 * UIリニューアル「Stadium Gold」— 40 ユーザー・ランキング・通知
 * 対象: マイページ(users/profile) / 他人のページ(users/show) / その他(users/other)
 *       フォロー・フォロワー一覧(follows/*) / ポイント履歴(users/point-history)
 *       成績一覧(ranks/index) / 過去の入賞者(ranks/histories)
 *       レベル別ランキング(level_ranking/index) / 通知(user_notifications/index)
 * ルール: 全セレクタ body.ui-r 始まり。投稿の行カード(.review .item)は一覧担当の領分なので触らない。
 * ============================================================= */

/* -------------------------------------------------------------
 * 0. このファイル内だけで使う補助変数
 * ------------------------------------------------------------- */
body.ui-r {
    --ui-u-silver: linear-gradient(135deg, #f4f6f8 0%, #c9ced6 45%, #9aa3ad 100%);
    --ui-u-bronze: linear-gradient(135deg, #f3c9a0 0%, #c98a4b 45%, #8e5a2b 100%);
    --ui-u-ring: linear-gradient(135deg, #fff3a6 0%, #f0d43a 30%, #d2b503 60%, #8f7600 100%);
}

/* =============================================================
 * 1. プロフィールヘッダー（マイページ・他人のページ共通: .top-area.user-page .profile）
 * ============================================================= */
body.ui-r .top-area.user-page .profile {
    overflow: hidden;
    padding-bottom: 28px;
    background: var(--ui-surface);
}

/* --- カバー写真 --- */
body.ui-r .top-area.user-page .profile .cover {
    position: relative;
}
body.ui-r .top-area.user-page .profile .cover figure {
    height: 300px;
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--ui-night-grad);
}
body.ui-r .top-area.user-page .profile .cover img {
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ui-ease);
}
body.ui-r .top-area.user-page .profile .cover:hover img {
    transform: scale(1.03);
}
/* 下端を紺にとかして、白い本文との境目を上品に */
body.ui-r .top-area.user-page .profile .cover:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(7, 21, 38, 0) 0%, rgba(7, 21, 38, .18) 55%, rgba(7, 21, 38, .55) 100%);
    pointer-events: none;
}

/* --- 「編集する」ボタン（カバー右下・アバター中央）→ ガラスのピル --- */
body.ui-r .top-area.user-page .profile .cover figure .change,
body.ui-r .top-area.user-page .profile .avatar figure .change {
    width: auto;
    height: auto;
    line-height: 1;
    font-size: 13px;
    background: rgba(7, 21, 38, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--ui-r-pill);
    box-shadow: 0 4px 14px rgba(7, 21, 38, .3);
    z-index: 2;
    transition: background-color var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .top-area.user-page .profile .cover figure .change {
    right: 16px;
    bottom: 16px;
}
body.ui-r .top-area.user-page .profile .avatar figure .change {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 10px;
    margin: 0;
    transform: translateX(-50%);
    font-size: 11px;
}
body.ui-r .top-area.user-page .profile .cover figure .change a,
body.ui-r .top-area.user-page .profile .avatar figure .change a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    color: #fff;
    text-decoration: none;
}
body.ui-r .top-area.user-page .profile .avatar figure .change a {
    min-height: 30px;
    padding: 0 10px;
}
body.ui-r .top-area.user-page .profile .cover figure .change i,
body.ui-r .top-area.user-page .profile .avatar figure .change i {
    font-family: var(--ui-font-body);
    font-style: normal;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
body.ui-r .top-area.user-page .profile .cover figure .change i:before,
body.ui-r .top-area.user-page .profile .avatar figure .change i:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 6px;
    color: var(--ui-gold-hi);
}
body.ui-r .top-area.user-page .profile .cover figure .change:hover {
    background: rgba(7, 21, 38, .78);
}

/* --- 丸アバター（金のリング＋白の縁＋影） --- */
body.ui-r .top-area.user-page .profile .avatar {
    top: 206px;
    width: 160px;
    height: 160px;
    border: 0;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 10px 30px rgba(7, 21, 38, .28), 0 0 0 6px #fff;
}
body.ui-r .top-area.user-page .profile .avatar figure {
    width: 160px;
    height: 160px;
    margin: 0;
    padding: 5px;
    border: 0;
    border-radius: 50%;
    position: relative;
    background: var(--ui-u-ring);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .8), inset 0 -2px 4px rgba(110, 93, 0, .35);
}
body.ui-r .top-area.user-page .profile .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ui-surface-2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* --- 名前・本名・フォロワー数 --- */
body.ui-r .top-area.user-page .profile .name {
    margin-top: 84px;
    padding: 0 16px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .02em;
    color: var(--ui-navy-800);
    word-break: break-word;
}
body.ui-r .top-area.user-page .profile div.rank-k {
    margin-top: 2px;
    font-size: 13px;
    color: var(--ui-ink-2);
}
body.ui-r .top-area.user-page .profile p.rank-k {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin: 10px auto 0;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-navy);
    background: var(--ui-aqua-pale);
    border: 1px solid rgba(76, 195, 240, .35);
    border-radius: var(--ui-r-pill);
}
body.ui-r .top-area.user-page .profile p.rank-k b,
body.ui-r .top-area.user-page .profile p.rank-k span {
    font-family: var(--ui-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--ui-navy-800);
    margin: 0;
}

/* --- 獲得バッジ（レベル） --- */
body.ui-r .top-area.user-page .profile > .description:not(.d2) {
    margin: 22px auto 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--ui-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
body.ui-r .top-area.user-page .profile > .description:not(.d2):before,
body.ui-r .top-area.user-page .profile > .description:not(.d2):after {
    content: "";
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 181, 3, 0), var(--ui-gold));
}
body.ui-r .top-area.user-page .profile > .description:not(.d2):after {
    transform: scaleX(-1);
}
body.ui-r .top-area.user-page .profile .rank-has {
    width: auto;
    max-width: 560px;
    margin: 0 auto 22px;
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
body.ui-r .top-area.user-page .profile .rank-has img {
    width: 64px;
    height: 64px;
    margin: 0;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(210, 181, 3, .55), 0 6px 16px rgba(7, 21, 38, .18);
    transition: transform var(--ui-dur-2) var(--ui-ease-spring);
}
body.ui-r .top-area.user-page .profile .rank-has img:hover {
    transform: translateY(-3px) scale(1.06);
}

/* --- 「次のレベルまで◯いいね が必要です」→ 進捗バー風 --- */
body.ui-r .top-area.user-page .profile .description.d2 {
    position: relative;
    width: auto;
    max-width: 460px;
    margin: 0 auto 22px;
    padding: 14px 20px 24px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: var(--ui-night-grad);
    border-radius: var(--ui-r);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(210, 181, 3, .35), var(--ui-shadow-2);
    overflow: hidden;
}
body.ui-r .top-area.user-page .profile .description.d2 strong {
    font-family: var(--ui-font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--ui-gold-hi);
    margin: 0 2px;
    text-shadow: 0 0 18px rgba(240, 212, 58, .45);
}
/* バーの溝 */
body.ui-r .top-area.user-page .profile .description.d2:before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 11px;
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
}
/* 流れる金の光（割合は持たない演出のみ） */
body.ui-r .top-area.user-page .profile .description.d2:after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 11px;
    height: 6px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .28) 0 8px, rgba(255, 255, 255, 0) 8px 16px),
        linear-gradient(90deg, var(--ui-gold-lo), var(--ui-gold-hi) 60%, #fff6b8);
    background-size: 32px 100%, 100% 100%;
    box-shadow: 0 0 12px rgba(240, 212, 58, .55);
    animation: ui-u-bar 1.2s linear infinite;
}
@keyframes ui-u-bar {
    from { background-position: 0 0, 0 0; }
    to { background-position: 32px 0, 0 0; }
}

/* --- ログアウト / フォローする / フォロー解除 --- */
body.ui-r .top-area.user-page .profile button.add-friend,
body.ui-r .top-area.user-page .profile button.un-follow {
    width: calc(100% - 40px);
    max-width: 360px;
    height: 50px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    border-radius: var(--ui-r-pill);
    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 .top-area.user-page .profile button.add-friend {
    color: #fff;
    background: var(--ui-navy-grad);
    border: 0;
    box-shadow: 0 0 0 1px rgba(76, 195, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 24px rgba(13, 79, 140, .3);
}
body.ui-r .top-area.user-page .profile button.add-friend i {
    margin-right: 8px;
}
body.ui-r .top-area.user-page .profile button.add-friend:not(.disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(76, 195, 240, .9), inset 0 1px 0 rgba(255, 255, 255, .25), 0 16px 32px rgba(13, 79, 140, .38);
}
/* ログアウトは控えめ（白地＋紺の線） */
body.ui-r .top-area.user-page .profile button.add-friend.logout {
    color: var(--ui-ink-2);
    background: var(--ui-surface-2);
    box-shadow: inset 0 0 0 1.5px var(--ui-line-strong);
    height: 46px;
    max-width: 240px;
    font-size: 14px;
}
body.ui-r .top-area.user-page .profile button.add-friend.logout:hover {
    color: var(--ui-navy-800);
    background: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(13, 79, 140, .45), var(--ui-shadow-1);
}
body.ui-r .top-area.user-page .profile button.un-follow {
    color: var(--ui-navy);
    background: #fff;
    border: 1.5px solid rgba(13, 79, 140, .45);
    box-shadow: var(--ui-shadow-1);
}
body.ui-r .top-area.user-page .profile button.un-follow:hover {
    border-color: var(--ui-heart);
    color: var(--ui-heart);
}

/* --- タブ風アイコンメニュー → 押しやすいタイル --- */
body.ui-r .top-area.user-page .profile .action {
    width: auto;
    max-width: 640px;
    margin: 26px auto 0;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
}
body.ui-r .top-area.user-page .profile .action a {
    float: none;
    width: auto;
    height: auto;
    min-height: 92px;
    margin: 0;
    padding: 14px 4px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ui-navy-800);
    text-decoration: none;
    background: linear-gradient(180deg, #fff 0%, var(--ui-surface-2) 100%);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r);
    box-shadow: var(--ui-hl-top), var(--ui-shadow-1);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease), border-color var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .top-area.user-page .profile .action a i {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--ui-navy-900);
    background: var(--ui-gold-btn);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(110, 93, 0, .25), 0 4px 10px rgba(168, 143, 0, .3);
    transition: transform var(--ui-dur-2) var(--ui-ease-spring);
}
body.ui-r .top-area.user-page .profile .action a:hover {
    transform: translateY(-3px);
    border-color: rgba(210, 181, 3, .6);
    box-shadow: var(--ui-hl-top), var(--ui-shadow-2);
    color: var(--ui-navy);
}
body.ui-r .top-area.user-page .profile .action a:hover i {
    transform: scale(1.08) rotate(-4deg);
}
body.ui-r .top-area.user-page .profile .action a:active {
    transform: translateY(0) scale(.97);
}

/* --- 登録情報（マイページ: 定義リスト） --- */
body.ui-r .top-area.user-page .profile .text-show {
    width: auto;
    max-width: 640px;
    margin: 22px auto 22px;
    padding: 6px 0;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r);
    box-shadow: var(--ui-hl-top);
}
body.ui-r .top-area.user-page .profile .text-show p {
    margin: 0;
    padding: 12px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ui-ink-2);
    border-bottom: 1px solid var(--ui-line);
}
body.ui-r .top-area.user-page .profile .text-show p:last-child {
    border-bottom: 0;
}
body.ui-r .top-area.user-page .profile .text-show p span {
    color: var(--ui-ink);
    font-weight: 700;
}
body.ui-r .top-area.user-page .profile .text-show.edit-info p {
    padding: 14px 120px 14px 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ui-ink);
    word-break: break-word;
}
body.ui-r .top-area.user-page .profile .text-show.edit-info p span {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ui-ink-2);
}
body.ui-r .top-area.user-page .profile .text-show.edit-info p a:not(.edit) {
    color: var(--ui-navy);
}
body.ui-r .top-area.user-page .profile .text-show.edit-info p .edit {
    right: 14px;
    float: none;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--ui-navy);
    background: #fff;
    border: 1px solid rgba(13, 79, 140, .28);
    border-radius: var(--ui-r-pill);
    box-shadow: var(--ui-shadow-1);
    text-decoration: none;
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease), border-color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .top-area.user-page .profile .text-show.edit-info p .edit:hover {
    color: #fff;
    background: var(--ui-navy);
    border-color: var(--ui-navy);
}
/* 押せる範囲を広げる（見た目は変えない） */
body.ui-r .top-area.user-page .profile .text-show.edit-info p .edit:after {
    content: "";
    position: absolute;
    inset: -6px -4px;
}

/* 「公開情報を編集する」 */
body.ui-r .top-area.user-page .profile .btn-end {
    width: calc(100% - 40px);
    max-width: 360px;
    height: 50px;
    padding: 0 16px;
    font-size: 15px;
}

/* =============================================================
 * 2. セクション見出し帯（灰色の帯 → 夜の紺＋金の細線）
 * ============================================================= */
body.ui-r .top-area.user-page .list-friend h3,
body.ui-r .top-area.user-page .list-review .head,
body.ui-r .top-area.user-page .product-relate .head,
body.ui-r .top-area.user-page .tackle-list .head,
body.ui-r .top-area.user-page .grade-list .head,
body.ui-r .tackle-all:is(.follow, .result) .tackle-list .head,
body.ui-r .top-area.user-page .list-review > h4.text-center {
    position: relative;
    height: auto;
    min-height: 64px;
    padding: 16px 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .04em;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(120% 140% at 50% -40%, rgba(76, 195, 240, .22) 0%, rgba(76, 195, 240, 0) 60%),
        var(--ui-night-grad);
    border-radius: var(--ui-r-lg) var(--ui-r-lg) 0 0;
    box-shadow: inset 0 -3px 0 var(--ui-gold), inset 0 1px 0 rgba(255, 255, 255, .12);
    text-shadow: 0 1px 2px rgba(7, 21, 38, .4);
}
/* 件数 → 金のピル（Outfit） */
body.ui-r .top-area.user-page .list-friend h3 span,
body.ui-r .top-area.user-page .list-review .head span,
body.ui-r .top-area.user-page .product-relate .head span,
body.ui-r .top-area.user-page .tackle-list .head span,
body.ui-r .top-area.user-page .grade-list .head span,
body.ui-r .tackle-all:is(.follow, .result) .tackle-list .head span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 12px;
    font-family: var(--ui-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--ui-navy-900);
    background: var(--ui-gold-btn);
    border-radius: var(--ui-r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 8px rgba(0, 0, 0, .25);
    text-shadow: none;
}
/* 見出し右の「編集する／すべて見る」→ ガラスのピル */
body.ui-r .top-area.user-page h3 a.edit,
body.ui-r .top-area.user-page .head a.edit {
    right: 16px;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: var(--ui-r-pill);
    text-decoration: none;
    text-shadow: none;
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .top-area.user-page h3 a.edit:after,
body.ui-r .top-area.user-page .head a.edit:after {
    content: "";
    position: absolute;
    inset: -5px -4px;
}
body.ui-r .top-area.user-page h3 a.edit:hover,
body.ui-r .top-area.user-page .head a.edit:hover {
    color: var(--ui-navy-900);
    background: var(--ui-gold-hi);
    border-color: var(--ui-gold-hi);
}

/* 一覧担当の .list-review .head の中央の金バー（装飾）は、紺帯の金線と二重になるのでこのページでは出さない */
body.ui-r .top-area.user-page .list-review .head:after {
    display: none;
}

/* 見出し帯の下に置くカード（釣具・タックル）も白カード化 */
body.ui-r .top-area.user-page .product-relate,
body.ui-r .top-area.user-page .tackle-list {
    border-radius: var(--ui-r-lg);
    box-shadow: var(--ui-card-shadow);
}
body.ui-r .top-area.user-page .list-friend,
body.ui-r .top-area.user-page .grade-list,
body.ui-r .top-area.user-page .list-review {
    overflow: hidden;
}

/* =============================================================
 * 3. フォロー／フォロワーの丸アバターグリッド
 * ============================================================= */
body.ui-r .top-area.user-page .list-friend {
    padding-bottom: 28px;
}
body.ui-r .top-area.user-page .list-friend .friends {
    padding: 28px 24px 4px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 22px 12px;
    overflow: visible;
}
body.ui-r .top-area.user-page .list-friend .friends .friend {
    float: none;
    width: auto;
    margin: 0;
    min-width: 0;
}
body.ui-r .top-area.user-page .list-friend .friends .friend .border {
    width: 112px;
    height: 112px;
    padding: 4px;
    border: 0 !important; /* Bootstrap の .border(!important) の灰色線を消す */
    border-radius: 50%;
    background: var(--ui-u-ring);
    box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(7, 21, 38, .16);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .top-area.user-page .list-friend .friends .friend .border:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px #fff, var(--ui-glow-gold);
}
body.ui-r .top-area.user-page .list-friend .friends .friend .border a {
    display: block;
    width: 100%;
    height: 100%;
}
body.ui-r .top-area.user-page .list-friend .friends .friend figure {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    background: var(--ui-surface-2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}
/* 画像が無いときの人型（画像があれば上に重なって見えない） */
body.ui-r .top-area.user-page .list-friend .friends .friend figure:before {
    content: "\f007";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: rgba(14, 42, 61, .18);
    text-align: center;
}
body.ui-r .top-area.user-page .list-friend .friends .friend figure img {
    position: relative;
    transition: transform 600ms var(--ui-ease);
}
body.ui-r .top-area.user-page .list-friend .friends .friend .border:hover figure img {
    transform: scale(1.06);
}
body.ui-r .top-area.user-page .list-friend .friends .friend .name {
    height: auto;
    margin-top: 10px;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ui-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 未読バッジ */
body.ui-r .top-area.user-page .list-friend .noti {
    top: 2px;
    right: 2px;
    min-width: 28px;
    width: auto;
    height: 28px;
    padding: 0 7px;
    line-height: 28px;
    font-family: var(--ui-font-display);
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #ff6b85 0%, var(--ui-heart) 100%);
    border-radius: var(--ui-r-pill);
    box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(255, 77, 109, .45);
    z-index: 1;
}
body.ui-r .top-area.user-page .list-friend .btn-end,
body.ui-r .top-area.user-page .product-relate .btn-end,
body.ui-r .top-area.user-page .tackle-list .btn-end,
body.ui-r .top-area.user-page .grade-list .btn-end {
    width: calc(100% - 40px);
    max-width: 360px;
    height: 50px;
    padding: 0 16px;
    margin: 18px auto 0;
    font-size: 15px;
}

/* =============================================================
 * 4. タイムライン・投稿一覧・釣り場紹介（.review .item の中は一覧担当）
 * ============================================================= */
body.ui-r .top-area.user-page .list-review > h4.text-center {
    margin: -25px 0 0;
}
body.ui-r .top-area.user-page .list-review > .view-more-post {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 40px);
    max-width: 360px;
    min-height: 48px;
    margin: 18px auto 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ui-navy);
    background: #fff;
    border: 1.5px solid rgba(13, 79, 140, .45);
    border-radius: var(--ui-r-pill);
    text-decoration: none;
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .top-area.user-page .list-review > .view-more-post:hover {
    color: #fff;
    background: var(--ui-navy);
    transform: translateY(-2px);
}
body.ui-r .top-area.user-page .list-review > a:last-child:not(.view-more-post) {
    display: block;
    padding-bottom: 6px;
}

/* 「投稿する」「追加登録」などの作成ボタン → 金ボタン（インラインで色指定がある SNS ボタンは除外） */
body.ui-r .top-area.user-page .btn-post:not([style]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 40px);
    max-width: 380px;
    height: 54px;
    padding: 0 20px;
    margin: 24px auto 4px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .06em;
    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, .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;
    border: 1px solid rgba(110, 93, 0, .45);
    border-radius: var(--ui-r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 4px rgba(110, 93, 0, .18), 0 10px 22px rgba(168, 143, 0, .32);
    transition: background-position 700ms var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .top-area.user-page .btn-post:not([style]):hover {
    background-position: -30% 0, 0 0;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--ui-glow-gold);
}
body.ui-r .top-area.user-page .btn-post:not([style]):active {
    transform: translateY(0) scale(.98);
}

/* --- SNSモード投稿（緑テーマを尊重。金は持ち込まない） --- */
body.ui-r .top-area.user-page .list-review[style*="f0fbf8"] {
    border-radius: var(--ui-r-lg) !important; /* インラインの角丸12pxをカードに揃える */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 4px rgba(13, 148, 136, .08), 0 12px 32px rgba(7, 21, 38, .12);
}
body.ui-r .top-area.user-page .list-review[style*="f0fbf8"] .head {
    position: relative;
    height: auto;
    min-height: 56px;
    margin: -4px -4px 4px;
    padding: 14px 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .04em;
    background: linear-gradient(180deg, #ffffff 0%, #e3f6f0 100%);
    border: 1px solid #c7e8de;
    border-radius: var(--ui-r);
    box-shadow: inset 0 -3px 0 #2dd4bf;
}
body.ui-r .top-area.user-page .list-review[style*="f0fbf8"] .head span {
    color: #fff;
    background: linear-gradient(135deg, #2dd4bf, #0d9488);
    box-shadow: 0 2px 8px rgba(13, 148, 136, .3);
}
body.ui-r .top-area.user-page .list-review[style*="f0fbf8"] .head a.edit {
    background: #fff;
    border-color: rgba(13, 148, 136, .35);
}
body.ui-r .top-area.user-page .list-review[style*="f0fbf8"] .head a.edit:hover {
    background: #e0f7f1;
    border-color: #0d9488;
}
body.ui-r .top-area.user-page .sns-profile-grid {
    gap: 8px !important;
    margin-top: 14px !important;
}
body.ui-r .top-area.user-page .sns-profile-grid > a {
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(7, 21, 38, .06), 0 4px 12px rgba(13, 148, 136, .12);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .top-area.user-page .sns-profile-grid > a img {
    transition: transform 600ms var(--ui-ease);
}
body.ui-r .top-area.user-page .sns-profile-grid > a:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px #2dd4bf, 0 10px 24px rgba(13, 148, 136, .25);
}
body.ui-r .top-area.user-page .sns-profile-grid > a:hover img {
    transform: scale(1.04);
}
body.ui-r .top-area.user-page .list-review[style*="f0fbf8"] .btn-post[style] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 20px);
    max-width: 380px;
    height: 54px;
    margin: 22px auto 4px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .06em;
    border: 0;
    border-radius: var(--ui-r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px rgba(13, 148, 136, .3);
    transition: transform var(--ui-dur-1) var(--ui-ease), box-shadow var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .top-area.user-page .list-review[style*="f0fbf8"] .btn-post[style]:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 28px rgba(13, 148, 136, .38);
}

/* =============================================================
 * 5. 保有釣具（partials/list_tackle_item）
 * ============================================================= */
body.ui-r .top-area.user-page .product-relate {
    padding-bottom: 28px;
}
body.ui-r .top-area.user-page .product-relate .product {
    margin: 18px 20px 0;
    padding: 16px 18px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r);
    overflow: hidden;
}
body.ui-r .top-area.user-page .product-relate .product h3 {
    margin-top: 0;
}
body.ui-r .top-area.user-page .product-relate .product figure {
    width: 120px;
    height: 120px;
    margin-right: 18px;
    border-radius: var(--ui-r-sm);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px var(--ui-line), var(--ui-shadow-1);
}
body.ui-r .top-area.user-page .product-relate .product .info {
    width: calc(100% - 138px);
}
body.ui-r .top-area.user-page .product-relate .product .info h4 {
    height: auto;
    max-height: 3em;
    font-size: 16px;
    line-height: 1.5;
}
body.ui-r .top-area.user-page .product-relate .product .info span {
    color: var(--ui-ink-2);
    font-size: 12px;
    letter-spacing: .04em;
}
body.ui-r .top-area.user-page .product-relate .product .info h4 a {
    color: var(--ui-navy-800);
    font-weight: 800;
    text-decoration: none;
}
body.ui-r .top-area.user-page .product-relate .product .info h4 a:hover {
    color: var(--ui-navy-hi);
}
body.ui-r .top-area.user-page .product-relate .product .info a img {
    border-radius: 8px;
    box-shadow: var(--ui-shadow-1);
}

/* =============================================================
 * 6. タックル一覧（行＋「詳しく見る」）
 * ============================================================= */
body.ui-r .top-area.user-page .tackle-list {
    padding-bottom: 28px;
}
body.ui-r .top-area.user-page .tackle-list .tackle {
    width: auto;
    max-width: 640px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ui-ink);
    border-bottom: 1px solid var(--ui-line);
    transition: background-color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .top-area.user-page .tackle-list .tackle:first-of-type {
    margin-top: 10px;
}
body.ui-r .top-area.user-page .tackle-list .tackle:hover {
    background: var(--ui-surface-2);
}
body.ui-r .top-area.user-page .tackle-list .tackle:before {
    content: "\f0ad";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--ui-navy);
    background: var(--ui-aqua-pale);
    border-radius: 12px;
    order: -1;
}
body.ui-r .top-area.user-page .tackle-list .tackle > a {
    margin-left: auto;
    flex-shrink: 0;
}
body.ui-r .top-area.user-page .tackle-list .tackle button {
    float: none;
    position: static;
    width: auto;
    height: 40px;
    padding: 0 14px 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--ui-navy);
    background: #fff;
    border: 1.5px solid rgba(13, 79, 140, .4);
    border-radius: var(--ui-r-pill);
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .top-area.user-page .tackle-list .tackle button i {
    float: none;
    line-height: 1;
}
body.ui-r .top-area.user-page .tackle-list .tackle button:hover {
    color: #fff;
    background: var(--ui-navy);
}

/* =============================================================
 * 7. 成績一覧（プロフィール内）＋これまでの釣果表
 * ============================================================= */
body.ui-r .top-area.user-page .grade-list {
    padding-bottom: 28px;
}
body.ui-r .top-area.user-page .grade-list .grade {
    position: relative;
    width: auto;
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 24px 16px 52px;
    border-bottom: 1px solid var(--ui-line);
}
body.ui-r .top-area.user-page .grade-list .grade:first-of-type {
    margin-top: 10px;
}
/* 時系列のドットと縦線 */
body.ui-r .top-area.user-page .grade-list .grade:before {
    content: "";
    position: absolute;
    left: 24px;
    top: 22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ui-gold-btn);
    box-shadow: 0 0 0 3px rgba(210, 181, 3, .2);
}
body.ui-r .top-area.user-page .grade-list .grade .time {
    font-family: var(--ui-font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ui-ink-2);
}
body.ui-r .top-area.user-page .grade-list .grade .tip {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ui-ink);
}
body.ui-r .top-area.user-page .grade-list .grade .tip a {
    color: var(--ui-navy);
}
/* 「これまでの釣果一覧」見出しを下の表の左端にそろえる */
body.ui-r .top-area.user-page .grade-list h3 {
    width: calc(100% - 48px);
    max-width: 560px;
    margin: 30px auto 0;
}

/* 釣果表（成績一覧ページの .result table も同じ見た目に） */
body.ui-r .top-area.user-page .grade-list table,
body.ui-r .search-result.result table {
    width: calc(100% - 48px) !important;
    max-width: 560px;
    margin: 14px auto 6px !important; /* インラインの margin を上書き */
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--ui-shadow-1);
}
body.ui-r .top-area.user-page .grade-list table tr td,
body.ui-r .search-result.result table tr td {
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ui-ink);
    background: #fff;
    border: 0;
    border-top: 1px solid var(--ui-line);
}
body.ui-r .top-area.user-page .grade-list table tr:first-child td,
body.ui-r .search-result.result table tr:first-child td {
    border-top: 0;
}
body.ui-r .top-area.user-page .grade-list table tr:nth-child(even) td,
body.ui-r .search-result.result table tr:nth-child(even) td {
    background: var(--ui-surface-2);
}
body.ui-r .top-area.user-page .grade-list table tr td:nth-child(odd):not(.b-r-n),
body.ui-r .search-result.result table tr td:nth-child(odd):not(.b-r-n) {
    border-right: 1px solid var(--ui-line);
}
body.ui-r .top-area.user-page .grade-list table tr td span,
body.ui-r .search-result.result table tr td span {
    font-family: var(--ui-font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--ui-navy-800);
}

/* =============================================================
 * 8. フォロー／フォロワー一覧（follows/index, index_followed）
 * ============================================================= */
/* 上に紺のページ見出し(h2)があるので、内側の帯は淡い面＋紺文字で二段目と分かるように */
body.ui-r .tackle-all:is(.follow, .result) .tackle-list .head {
    min-height: 52px;
    padding: 12px 20px;
    font-size: 16px;
    color: var(--ui-navy-800);
    background: linear-gradient(180deg, #fff 0%, var(--ui-surface-2) 100%);
    box-shadow: inset 0 -1px 0 var(--ui-line);
    text-shadow: none;
}
/* 「マイページ／ユーザートップに戻る」等の戻るボタン（フォーム担当の戻るボタンと同じ見た目） */
body.ui-r .search-result.follow + a > .btn-submit.btn-without,
body.ui-r .search-result.other + a > .btn-submit.btn-without,
body.ui-r .search-result.point + a > .btn-submit.btn-sm-edit,
body.ui-r .search-result.result > a > .btn-submit.btn-without {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    max-width: 640px;
    height: auto;
    min-height: 52px;
    margin: 18px auto;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-navy-800);
    background-color: rgba(255, 255, 255, .55);
    background-image: none;
    border: 1.5px solid rgba(7, 21, 38, .35);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
body.ui-r .search-result.result > a > .btn-submit.btn-without {
    background-color: #fff;
    border-color: rgba(13, 79, 140, .4);
}
body.ui-r .search-result.follow + a > .btn-submit.btn-without:hover,
body.ui-r .search-result.other + a > .btn-submit.btn-without:hover,
body.ui-r .search-result.point + a > .btn-submit.btn-sm-edit:hover,
body.ui-r .search-result.result > a > .btn-submit.btn-without:hover {
    background-color: #fff;
    color: var(--ui-navy);
    border-color: var(--ui-navy);
    box-shadow: 0 8px 20px rgba(7, 21, 38, .14);
}
body.ui-r .search-result.point + a > .btn-submit.btn-sm-edit i {
    color: var(--ui-navy);
}
body.ui-r .search-result.follow {
    overflow: hidden;
}
body.ui-r .tackle-all:is(.follow, .result) .tackle-list .head {
    border-radius: 0;
    margin: 0 -30px;
}
body.ui-r .search-result.follow .follow-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 8px;
    border-bottom: 1px solid var(--ui-line);
    transition: background-color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .search-result.follow .follow-item:hover {
    background: var(--ui-surface-2);
}
body.ui-r .search-result.follow .follow-item .left-follow {
    flex: 0 0 auto;
    width: auto;
}
body.ui-r .search-result.follow .follow-item .border {
    width: 92px;
    height: 92px;
    padding: 4px;
    border: 0 !important;
    border-radius: 50%;
    background: var(--ui-u-ring);
    box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(7, 21, 38, .16);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .search-result.follow .follow-item:hover .border {
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px #fff, var(--ui-glow-gold);
}
body.ui-r .search-result.follow .follow-item .border a {
    display: block;
    width: 100%;
    height: 100%;
}
body.ui-r .search-result.follow .follow-item figure {
    width: 100%;
    height: 100%;
    margin: 0;
    background: var(--ui-surface-2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}
body.ui-r .search-result.follow .follow-item figure:before {
    content: "\f007";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 34px;
    color: rgba(14, 42, 61, .18);
    text-align: center;
}
body.ui-r .search-result.follow .follow-item figure img {
    position: relative;
}
body.ui-r .search-result.follow .follow-item .right-follow {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    text-align: left;
}
body.ui-r .search-result.follow .follow-item .right-follow h4 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--ui-navy-800);
    word-break: break-word;
}
body.ui-r .search-result.follow .follow-item .right-follow p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ui-ink-2);
}
body.ui-r .search-result.follow .follow-item .right-follow p:empty {
    display: none; /* 中身の無い段落の余白だけ詰める（中身は無い） */
}
body.ui-r .search-result.follow .follow-item .unfollow {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-top: 6px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-ink-2);
    background: #fff;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r-pill);
    text-decoration: none;
}
body.ui-r .search-result.follow .follow-item .unfollow:hover {
    color: var(--ui-heart);
    border-color: var(--ui-heart);
}
body.ui-r .search-result.follow .view-more {
    width: calc(100% - 40px);
    max-width: 360px;
    min-height: 48px;
    margin: 20px auto 24px;
    display: block;
}

/* =============================================================
 * 9. 成績一覧ページ（ranks/index: .search-result.result）
 * ============================================================= */
body.ui-r .search-result.result .result-item {
    position: relative;
    margin: 0;
    padding: 16px 12px 16px 44px;
    border-bottom: 1px solid var(--ui-line);
    transition: background-color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .search-result.result .result-item:hover {
    background: var(--ui-surface-2);
}
body.ui-r .search-result.result .result-item:before {
    content: "";
    position: absolute;
    left: 16px;
    top: 22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ui-gold-btn);
    box-shadow: 0 0 0 3px rgba(210, 181, 3, .2);
}
body.ui-r .search-result.result .result-item .result-item-date {
    margin-bottom: 2px;
    font-family: var(--ui-font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ui-ink-2);
}
body.ui-r .search-result.result .result-item p {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ui-ink);
}
body.ui-r .search-result.result .result-item p a {
    color: var(--ui-navy);
}

/* =============================================================
 * 10. その他メニュー（users/other）
 * ============================================================= */
body.ui-r .search-result.other .other-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid var(--ui-line);
    transition: background-color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .search-result.other .other-item:hover {
    background: var(--ui-surface-2);
}
body.ui-r .search-result.other .other-item a {
    flex: 1 1 auto;
    width: auto;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 48px 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-navy-800);
    text-decoration: none;
}
body.ui-r .search-result.other .other-item i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-gold-lo);
    pointer-events: none;
}

/* =============================================================
 * 11. ポイントの確認（users/point-history: .search-result.point）
 * ============================================================= */
body.ui-r .search-result.point .amazon2:first-of-type {
    margin-top: 24px;
    padding: 22px 20px 26px;
    text-align: center;
    border-radius: var(--ui-r-lg);
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(240, 212, 58, .28) 0%, rgba(240, 212, 58, 0) 55%),
        var(--ui-night-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(210, 181, 3, .4), var(--ui-shadow-2);
    color: #fff;
    overflow: hidden;
}
body.ui-r .search-result.point .amazon2:first-of-type h3 {
    color: #fff;
}
body.ui-r .search-result.point .amazon2 > a {
    top: 18px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-navy-900);
    background: var(--ui-gold-btn);
    border-radius: var(--ui-r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px rgba(168, 143, 0, .35);
    text-decoration: none;
}
body.ui-r .search-result.point .amazon2 > a:hover {
    color: var(--ui-navy-900);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--ui-glow-gold);
}
/* 金のメダル */
body.ui-r .search-result.point div.point {
    width: 72px;
    height: 72px;
    margin: 18px auto 6px;
    line-height: 72px;
    font-family: var(--ui-font-display);
    font-size: 30px;
    font-weight: 800;
    color: var(--ui-gold-deep);
    background: var(--ui-u-ring);
    border-radius: 50%;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(110, 93, 0, .35), 0 0 0 4px rgba(255, 255, 255, .15), 0 10px 30px rgba(240, 212, 58, .45);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
body.ui-r .search-result.point .bigbig {
    font-family: var(--ui-font-display);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--ui-gold-hi);
    text-shadow: 0 0 28px rgba(240, 212, 58, .45);
}
body.ui-r .search-result.point .bigbig span {
    margin-left: 4px;
    font-size: 24px;
    color: #fff;
}
/* 履歴の行 */
body.ui-r .search-result.point .amazon2 + .amazon2 {
    margin-top: 28px;
}
body.ui-r .search-result.point .point-item {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 14px 4px;
    border-bottom: 1px solid var(--ui-line);
}
body.ui-r .search-result.point .point-item .left-point {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-right: 16px;
    border-right: 0;
}
body.ui-r .search-result.point .point-item .left-point span {
    margin-bottom: 2px;
    font-family: var(--ui-font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ui-ink-2);
}
body.ui-r .search-result.point .point-item .left-point p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ui-ink);
    word-break: break-word;
}
body.ui-r .search-result.point .point-item .right-point {
    flex: 0 0 auto;
    width: auto;
    min-width: 88px;
    padding: 6px 12px;
    align-self: center;
    text-align: center;
    background: linear-gradient(180deg, #fffbe0 0%, #fff3b0 100%);
    border: 1px solid rgba(210, 181, 3, .45);
    border-radius: var(--ui-r-sm);
}
body.ui-r .search-result.point .point-item .right-point span {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ui-gold-deep);
}
body.ui-r .search-result.point .point-item .right-point p {
    font-family: var(--ui-font-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ui-navy-800);
}

/* =============================================================
 * 12. 過去の入賞者（ranks/histories: .search-result.amazon > .trophy）
 * ============================================================= */
body.ui-r .search-result.amazon > .trophy {
    padding: 28px 24px 24px;
}
body.ui-r .search-result.amazon > .trophy .trophy-1 {
    border-radius: var(--ui-r-lg);
    box-shadow: 0 0 0 1px rgba(210, 181, 3, .55), var(--ui-shadow-2);
}
body.ui-r .search-result.amazon > .trophy .trophy-1 .rank-name {
    font-family: var(--ui-font-display);
    font-weight: 800;
    letter-spacing: .02em;
}
body.ui-r .search-result.amazon > .trophy .user-name-text {
    font-weight: 800;
    letter-spacing: .04em;
}
body.ui-r .search-result.amazon > .trophy > p.text-center {
    padding: 28px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-ink-2);
    background: var(--ui-surface-2);
    border: 1px dashed var(--ui-line-strong);
    border-radius: var(--ui-r);
}
/* 過去の大会リスト */
body.ui-r .search-result.amazon > .trophy ul.list-dn {
    max-height: none;
    margin-top: 24px;
    border-top: 1px solid var(--ui-line);
}
body.ui-r .search-result.amazon > .trophy ul.list-dn li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 8px 0 16px;
    font-family: var(--ui-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-navy-800);
    border-bottom: 1px solid var(--ui-line);
    transition: background-color var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .search-result.amazon > .trophy ul.list-dn li:hover {
    background: var(--ui-surface-2);
}
body.ui-r .search-result.amazon > .trophy ul.list-dn li:before {
    content: "\f091";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 12px;
    font-size: 14px;
    color: var(--ui-gold);
}
/* 行全体を押せるように、リンクを行いっぱいに広げる（矢印は右端に残す） */
body.ui-r .search-result.amazon > .trophy ul.list-dn li a {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
}
body.ui-r .search-result.amazon > .trophy ul.list-dn li span {
    float: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--ui-gold);
    background-image: var(--ui-gold-btn);
    background-size: 100% 100%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 8px rgba(168, 143, 0, .35);
    position: relative;
    transition: transform var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .search-result.amazon > .trophy ul.list-dn li span:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -6px;
    border-top: 2.5px solid var(--ui-navy-900);
    border-right: 2.5px solid var(--ui-navy-900);
    transform: rotate(45deg);
}
body.ui-r .search-result.amazon > .trophy ul.list-dn li:hover span {
    transform: translateX(3px);
}

/* =============================================================
 * 13. レベル別ランキング（level_ranking/index: ページ内 <style> を上書き）
 * ============================================================= */
body.ui-r .level-ranking-wrap {
    margin-top: 6px;
    margin-bottom: 40px;
    padding: 0 0 28px;
    background: var(--ui-surface);
    border-radius: var(--ui-r-lg);
    box-shadow: var(--ui-card-shadow);
    overflow: hidden;
}
body.ui-r .level-ranking-wrap > :not(h2) {
    margin-left: 24px;
    margin-right: 24px;
}
body.ui-r .level-ranking-wrap > h2 {
    margin: 0 0 20px;
    padding: 18px 24px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .04em;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(120% 160% at 50% -50%, rgba(240, 212, 58, .25) 0%, rgba(240, 212, 58, 0) 60%),
        var(--ui-night-grad);
    box-shadow: inset 0 -3px 0 var(--ui-gold), inset 0 1px 0 rgba(255, 255, 255, .12);
    text-shadow: 0 1px 2px rgba(7, 21, 38, .4);
}
body.ui-r .level-ranking-wrap .rank-scope-hint {
    margin-top: -6px;
    color: var(--ui-ink-2);
}
body.ui-r .level-ranking-wrap .rank-scope-nav .label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--ui-ink-2);
}

/* チップ・レベルタブ */
body.ui-r .level-ranking-wrap .rank-scope-chips a,
body.ui-r .level-ranking-wrap .level-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-navy-800);
    background: #fff;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r-pill);
    box-shadow: var(--ui-shadow-1);
    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), box-shadow var(--ui-dur-1) var(--ui-ease);
}
body.ui-r .level-ranking-wrap .rank-scope-chips a:hover,
body.ui-r .level-ranking-wrap .level-tabs a:hover {
    color: var(--ui-navy);
    background: var(--ui-aqua-pale);
    border-color: rgba(76, 195, 240, .6);
    transform: translateY(-1px);
}
body.ui-r .level-ranking-wrap .rank-scope-chips a.active,
body.ui-r .level-ranking-wrap .level-tabs a.active {
    color: #fff;
    background: var(--ui-navy-grad);
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(76, 195, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px rgba(13, 79, 140, .3);
}
body.ui-r .level-ranking-wrap .level-tabs {
    gap: 8px;
    padding-top: 4px;
}
body.ui-r .level-ranking-wrap .level-tabs a {
    font-family: var(--ui-font-display);
    letter-spacing: .02em;
    padding-left: 8px;
}
body.ui-r .level-ranking-wrap .level-tabs a:first-child {
    padding-left: 16px;
    padding-right: 16px;
    font-family: var(--ui-font-body);
}
body.ui-r .level-ranking-wrap .level-tabs a img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1.5px rgba(210, 181, 3, .6);
}
body.ui-r .level-ranking-wrap .rank-scope-select-wrap select {
    min-height: 40px;
    border-radius: var(--ui-r-pill);
    border: 1px solid var(--ui-line-strong);
    padding: 0 16px;
    color: var(--ui-ink);
    background-color: #fff;
}

/* 自分の順位バナー */
body.ui-r .level-ranking-wrap .my-rank-banner {
    padding: 14px 18px;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(240, 212, 58, .28) 0%, rgba(240, 212, 58, 0) 55%),
        var(--ui-night-grad);
    border: 0;
    border-radius: var(--ui-r);
    box-shadow: 0 0 0 1px rgba(210, 181, 3, .45), var(--ui-shadow-2);
}
body.ui-r .level-ranking-wrap .my-rank-banner i {
    font-size: 20px;
    color: var(--ui-aqua);
}
body.ui-r .level-ranking-wrap .my-rank-banner strong {
    margin-left: auto;
    font-family: var(--ui-font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--ui-gold-hi);
    text-shadow: 0 0 18px rgba(240, 212, 58, .4);
}

/* ランキングの行 */
body.ui-r .level-ranking-wrap .ranking-list {
    gap: 10px;
}
body.ui-r .level-ranking-wrap .ranking-item {
    position: relative;
    min-height: 76px;
    padding: 12px 16px 12px 12px;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r);
    box-shadow: var(--ui-hl-top), var(--ui-shadow-1);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease), border-color var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .level-ranking-wrap .ranking-item:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 79, 140, .25);
    box-shadow: var(--ui-hl-top), var(--ui-shadow-2);
}
body.ui-r .level-ranking-wrap .ranking-item.is-me {
    border: 1px solid rgba(76, 195, 240, .7);
    background: linear-gradient(90deg, var(--ui-aqua-pale) 0%, #fff 60%);
    box-shadow: 0 0 0 3px rgba(76, 195, 240, .2), var(--ui-shadow-1);
}

/* 順位（Outfit） */
body.ui-r .level-ranking-wrap .rank-num {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ui-font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ui-navy-800);
    background: var(--ui-surface-2);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--ui-line);
}
/* 表彰台（1〜3位）: 絵文字メダルを金・銀・銅の台座に載せる */
body.ui-r .level-ranking-wrap .rank-num.gold,
body.ui-r .level-ranking-wrap .rank-num.silver,
body.ui-r .level-ranking-wrap .rank-num.bronze {
    width: 52px;
    min-width: 52px;
    height: 52px;
    font-size: 30px;
    border-radius: 50%;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(0, 0, 0, .12), 0 6px 16px rgba(7, 21, 38, .18);
}
body.ui-r .level-ranking-wrap .rank-num.gold { background: var(--ui-u-ring); }
body.ui-r .level-ranking-wrap .rank-num.silver { background: var(--ui-u-silver); }
body.ui-r .level-ranking-wrap .rank-num.bronze { background: var(--ui-u-bronze); }

body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.gold),
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.silver),
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.bronze) {
    min-height: 92px;
    padding-left: 16px;
    overflow: hidden;
}
/* 左端のメダル色の帯 */
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.gold):before,
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.silver):before,
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.bronze):before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
}
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.gold) {
    border-color: rgba(210, 181, 3, .75);
    background: linear-gradient(100deg, #fff8d2 0%, #fffdf2 38%, #fff 70%);
    box-shadow: var(--ui-hl-top), 0 0 0 1px rgba(240, 212, 58, .35), 0 10px 28px rgba(168, 143, 0, .22);
}
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.gold):before { background: var(--ui-u-ring); }
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.silver) {
    border-color: rgba(154, 163, 173, .7);
    background: linear-gradient(100deg, #f0f3f6 0%, #fafbfc 38%, #fff 70%);
}
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.silver):before { background: var(--ui-u-silver); }
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.bronze) {
    border-color: rgba(201, 138, 75, .65);
    background: linear-gradient(100deg, #fbeee1 0%, #fffaf5 38%, #fff 70%);
}
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.bronze):before { background: var(--ui-u-bronze); }
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.gold) .rank-avatar {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ui-gold), 0 6px 16px rgba(168, 143, 0, .3);
}
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.silver) .rank-avatar {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #b5bcc5, 0 6px 16px rgba(7, 21, 38, .15);
}
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.bronze) .rank-avatar {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #c98a4b, 0 6px 16px rgba(7, 21, 38, .15);
}
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.gold) .rank-name,
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.silver) .rank-name,
body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.bronze) .rank-name {
    font-size: 16px;
}

body.ui-r .level-ranking-wrap .rank-avatar {
    width: 50px;
    height: 50px;
    margin: 0 12px 0 12px;
    border: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ui-line-strong);
}
body.ui-r .level-ranking-wrap .rank-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--ui-navy-800);
}
body.ui-r .level-ranking-wrap .rank-likes {
    margin-top: 3px;
    font-family: var(--ui-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-heart);
}
body.ui-r .level-ranking-wrap .rank-post-thumb {
    border-radius: 8px;
    background: var(--ui-surface-2);
    box-shadow: 0 0 0 1px var(--ui-line);
}
body.ui-r .level-ranking-wrap .rank-post-title {
    color: var(--ui-ink-2);
}
body.ui-r .level-ranking-wrap .rank-post-card:hover .rank-post-title {
    color: var(--ui-navy-hi);
}
body.ui-r .level-ranking-wrap .rank-level img {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(210, 181, 3, .55);
}
body.ui-r .level-ranking-wrap .rank-level .no-level {
    font-family: var(--ui-font-display);
    font-weight: 700;
}
body.ui-r .level-ranking-wrap .no-results {
    padding: 48px 16px;
    color: var(--ui-ink-2);
    background: var(--ui-surface-2);
    border: 1px dashed var(--ui-line-strong);
    border-radius: var(--ui-r);
}

/* ページ送り（Bootstrap の .pagination） */
body.ui-r .level-ranking-wrap .ranking-pagination .pagination {
    gap: 6px;
}
body.ui-r .level-ranking-wrap .ranking-pagination .page-link {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ui-font-display);
    font-weight: 700;
    color: var(--ui-navy-800);
    background: #fff;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-r-pill) !important;
    margin: 0;
}
body.ui-r .level-ranking-wrap .ranking-pagination .page-link:hover {
    background: var(--ui-aqua-pale);
}
body.ui-r .level-ranking-wrap .ranking-pagination .page-item.active .page-link {
    color: #fff;
    background: var(--ui-navy-grad);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(13, 79, 140, .3);
}
body.ui-r .level-ranking-wrap .ranking-pagination .page-item.disabled .page-link {
    color: var(--ui-ink-2);
    opacity: .5;
}

/* =============================================================
 * 14. 通知（user_notifications/index: SNS の緑テーマ。金は使わない）
 * ============================================================= */
body.ui-r .un-container .un-header {
    padding: 18px 4px 14px;
    border-bottom: 0;
}
body.ui-r .un-container .un-header h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .04em;
}
body.ui-r .un-container .un-header h1:before {
    content: "\f0f3";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, #2dd4bf, #0d9488);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(13, 148, 136, .3);
}
body.ui-r .un-container .un-header > a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    font-weight: 700;
    color: #0d9488 !important; /* インラインの水色→SNSの深緑で読みやすく */
    background: #fff;
    border: 1px solid #c7e8de;
    border-radius: var(--ui-r-pill);
}
body.ui-r .un-container .un-item {
    position: relative;
    align-items: center;
    gap: 14px;
    margin: 10px 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e0f2ee;
    border-radius: var(--ui-r);
    box-shadow: 0 1px 2px rgba(7, 21, 38, .04);
    transition: transform var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
}
body.ui-r .un-container a:hover .un-item {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13, 148, 136, .14);
}
/* 既読: 落ち着いたトーン */
body.ui-r .un-container .un-item:not(.is-unread) .un-item__msg {
    color: #5a7a86;
}
body.ui-r .un-container .un-item:not(.is-unread) .un-item__avatar img {
    filter: saturate(.75);
    opacity: .9;
}
/* 未読: 緑の帯＋淡い面＋右の点 */
body.ui-r .un-container .un-item.is-unread {
    padding-left: 20px;
    background: linear-gradient(90deg, #dff6ef 0%, #f3fcf9 45%, #fff 100%);
    border: 1px solid #a7e3d4;
    border-left: 1px solid #a7e3d4;
    box-shadow: 0 2px 4px rgba(13, 148, 136, .08), 0 8px 20px rgba(13, 148, 136, .1);
    overflow: hidden;
}
body.ui-r .un-container .un-item.is-unread:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #2dd4bf, #0d9488);
}
body.ui-r .un-container .un-item.is-unread:after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: #14b8a6;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, .22);
}
body.ui-r .un-container .un-item.is-unread .un-item__body {
    padding-right: 22px;
}
body.ui-r .un-container .un-item.is-unread .un-item__msg {
    font-weight: 700;
    color: #12304a;
}
body.ui-r .un-container .un-item__avatar img {
    width: 48px;
    height: 48px;
    border: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c7e8de;
}
body.ui-r .un-container .un-item.is-unread .un-item__avatar img {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2dd4bf;
}
body.ui-r .un-container .un-item__type {
    padding: 2px 10px;
    border-radius: var(--ui-r-pill);
}
body.ui-r .un-container .un-item__time {
    margin-top: 4px;
    font-family: var(--ui-font-display);
    font-weight: 500;
    letter-spacing: .02em;
}
body.ui-r .un-container .un-empty {
    border-radius: var(--ui-r-lg);
    box-shadow: 0 2px 4px rgba(13, 148, 136, .06), 0 12px 32px rgba(7, 21, 38, .06);
}
body.ui-r .un-container .un-empty:before {
    content: "\f0f3";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: block;
    margin: 0 auto 12px;
    font-size: 30px;
    color: #a7e3d4;
}

/* =============================================================
 * 15. スマホ（〜767px）
 * ============================================================= */
@media (max-width: 767px) {
    /* --- プロフィールヘッダー --- */
    /* 下のセクションカード（左右15px）と端をそろえる */
    body.ui-r .top-area.user-page .profile {
        margin-left: 15px;
        margin-right: 15px;
    }
    body.ui-r .top-area.user-page .profile .cover figure {
        height: 180px;
    }
    body.ui-r .top-area.user-page .profile .cover figure .change {
        right: 10px;
        bottom: auto;
        top: 10px;
    }
    body.ui-r .top-area.user-page .profile .avatar {
        top: 108px;
        width: 128px;
        height: 128px;
        box-shadow: 0 8px 22px rgba(7, 21, 38, .26), 0 0 0 5px #fff;
    }
    body.ui-r .top-area.user-page .profile .avatar figure {
        width: 128px;
        height: 128px;
        padding: 4px;
    }
    body.ui-r .top-area.user-page .profile .avatar figure .change {
        bottom: 6px;
        font-size: 10px;
    }
    body.ui-r .top-area.user-page .profile .avatar figure .change a {
        min-height: 26px;
        padding: 0 8px;
    }
    body.ui-r .top-area.user-page .profile .name {
        margin-top: 70px;
        font-size: 23px;
    }
    body.ui-r .top-area.user-page .profile .rank-has img {
        width: 52px;
        height: 52px;
        margin: 0;
    }
    body.ui-r .top-area.user-page .profile .description.d2 {
        margin-left: 16px;
        margin-right: 16px;
        font-size: 13px;
    }
    body.ui-r .top-area.user-page .profile .description.d2 strong {
        font-size: 21px;
    }
    body.ui-r .top-area.user-page .profile button.add-friend,
    body.ui-r .top-area.user-page .profile button.un-follow {
        width: calc(100% - 32px);
        height: 50px;
        font-size: 15px;
    }
    body.ui-r .top-area.user-page .profile button.add-friend.logout {
        height: 46px;
        font-size: 14px;
    }
    body.ui-r .top-area.user-page .profile .action {
        padding: 0 12px;
        gap: 6px;
        margin-top: 22px;
    }
    body.ui-r .top-area.user-page .profile .action a {
        height: auto;
        min-height: 80px;
        padding: 10px 2px 9px;
        gap: 6px;
        font-size: 11px;
        letter-spacing: 0;
        border-radius: 14px;
    }
    body.ui-r .top-area.user-page .profile .action a i {
        width: 38px;
        height: 38px;
        padding: 0;
        font-size: 16px;
        border-radius: 12px;
    }
    body.ui-r .top-area.user-page .profile .text-show {
        margin: 18px 12px;
        padding: 4px 0;
        font-size: 14px;
    }
    body.ui-r .top-area.user-page .profile .text-show p {
        padding: 12px 16px;
    }
    body.ui-r .top-area.user-page .profile .text-show.edit-info p {
        padding: 12px 104px 12px 16px;
        font-size: 15px;
    }
    body.ui-r .top-area.user-page .profile .text-show.edit-info p span {
        font-size: 11px;
    }
    body.ui-r .top-area.user-page .profile .text-show.edit-info p .edit {
        right: 10px;
        min-height: 36px;
        font-size: 12px;
    }
    body.ui-r .top-area.user-page .profile .btn-end,
    body.ui-r .top-area.user-page .list-friend .btn-end,
    body.ui-r .top-area.user-page .product-relate .btn-end,
    body.ui-r .top-area.user-page .tackle-list .btn-end,
    body.ui-r .top-area.user-page .grade-list .btn-end {
        width: calc(100% - 32px);
        height: 50px;
        font-size: 15px;
        margin-top: 16px;
    }

    /* --- 見出し帯 --- */
    body.ui-r .top-area.user-page .list-friend h3,
    body.ui-r .top-area.user-page .list-review .head,
    body.ui-r .top-area.user-page .product-relate .head,
    body.ui-r .top-area.user-page .tackle-list .head,
    body.ui-r .top-area.user-page .grade-list .head,
    body.ui-r .tackle-all:is(.follow, .result) .tackle-list .head,
    body.ui-r .top-area.user-page .list-review > h4.text-center {
        height: auto;
        min-height: 58px;
        padding: 14px 92px 14px 16px;
        justify-content: flex-start;
        text-align: left;
        font-size: 16px;
        line-height: 1.4;
    }
    body.ui-r .tackle-all:is(.follow, .result) .tackle-list .head,
    body.ui-r .top-area.user-page .list-review > h4.text-center {
        padding-right: 16px;
        justify-content: center;
        text-align: center;
    }
    body.ui-r .top-area.user-page .list-friend h3 span,
    body.ui-r .top-area.user-page .list-review .head span,
    body.ui-r .top-area.user-page .product-relate .head span,
    body.ui-r .top-area.user-page .tackle-list .head span,
    body.ui-r .top-area.user-page .grade-list .head span,
    body.ui-r .tackle-all:is(.follow, .result) .tackle-list .head span {
        min-height: 24px;
        padding: 0 10px;
        font-size: 13px;
    }
    body.ui-r .top-area.user-page h3 a.edit,
    body.ui-r .top-area.user-page .head a.edit {
        right: 10px;
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }
    body.ui-r .top-area.user-page .list-review[style*="f0fbf8"] .head {
        padding: 12px 96px 12px 14px;
        font-size: 15px;
    }

    /* --- フォローグリッド --- */
    body.ui-r .top-area.user-page .list-friend .friends {
        padding: 22px 12px 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px 8px;
    }
    body.ui-r .top-area.user-page .list-friend .friends .friend .border {
        width: 88px;
        height: 88px;
        padding: 3px;
    }
    body.ui-r .top-area.user-page .list-friend .friends .friend figure {
        width: 100%;
        height: 100%;
    }
    body.ui-r .top-area.user-page .list-friend .friends .friend figure:before {
        font-size: 30px;
    }
    body.ui-r .top-area.user-page .list-friend .friends .friend .name {
        height: auto;
        margin-top: 8px;
        font-size: 12px;
    }
    body.ui-r .top-area.user-page .list-friend .noti {
        top: 0;
        right: 4px;
        min-width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        padding: 0 6px;
    }

    /* --- 作成ボタン --- */
    body.ui-r .top-area.user-page .btn-post:not([style]),
    body.ui-r .top-area.user-page .list-review[style*="f0fbf8"] .btn-post[style] {
        width: calc(100% - 32px);
        height: 52px;
        font-size: 15px;
    }
    body.ui-r .top-area.user-page .list-review > .view-more-post {
        width: calc(100% - 32px);
        font-size: 15px;
    }

    /* --- 釣具・タックル・成績 --- */
    body.ui-r .top-area.user-page .product-relate .product {
        margin: 14px 12px 0;
        padding: 14px;
    }
    body.ui-r .top-area.user-page .product-relate .product .info {
        width: calc(100% - 108px);
    }
    body.ui-r .top-area.user-page .product-relate .product figure {
        width: 96px;
        height: 96px;
        margin-right: 12px;
    }
    body.ui-r .top-area.user-page .product-relate .product .info span {
        font-size: 12px;
    }
    body.ui-r .top-area.user-page .product-relate .product .info h4 {
        font-size: 15px;
    }
    body.ui-r .top-area.user-page .tackle-list .tackle {
        width: auto;
        padding: 12px 16px;
        font-size: 15px;
        line-height: 1.5;
    }
    body.ui-r .top-area.user-page .tackle-list .tackle button {
        height: 40px;
        width: auto;
        font-size: 13px;
        top: 0;
    }
    body.ui-r .top-area.user-page .grade-list .grade {
        width: auto;
        padding: 14px 16px 14px 42px;
    }
    body.ui-r .top-area.user-page .grade-list .grade:before {
        left: 18px;
        top: 20px;
    }
    body.ui-r .top-area.user-page .grade-list .grade .time {
        font-size: 12px;
    }
    body.ui-r .top-area.user-page .grade-list .grade .tip {
        font-size: 15px;
    }
    body.ui-r .top-area.user-page .grade-list h3 {
        width: calc(100% - 32px);
        margin: 26px auto 0;
    }
    body.ui-r .top-area.user-page .grade-list table,
    body.ui-r .search-result.result table {
        width: calc(100% - 32px) !important;
    }
    body.ui-r .top-area.user-page .grade-list table tr td,
    body.ui-r .search-result.result table tr td {
        padding: 11px 12px;
        font-size: 13px;
    }
    body.ui-r .top-area.user-page .grade-list table tr td span,
    body.ui-r .search-result.result table tr td span {
        font-size: 15px;
    }

    /* --- フォロー一覧 --- */
    body.ui-r .tackle-all:is(.follow, .result) .tackle-list .head {
        margin: 0 -15px;
    }
    body.ui-r .search-result.follow .follow-item {
        gap: 14px;
        padding: 14px 16px;
    }
    body.ui-r .search-result.follow .follow-item .border {
        width: 68px;
        height: 68px;
        padding: 3px;
    }
    body.ui-r .search-result.follow .follow-item figure {
        width: 100%;
        height: 100%;
    }
    body.ui-r .search-result.follow .follow-item figure:before {
        font-size: 26px;
    }
    body.ui-r .search-result.follow .follow-item .right-follow h4 {
        font-size: 17px;
    }
    body.ui-r .search-result.follow .follow-item .right-follow p {
        font-size: 12px;
    }

    /* --- 成績一覧ページ --- */
    body.ui-r .search-result.result .result-item {
        margin: 0;
        padding: 14px 10px 14px 38px;
    }
    body.ui-r .search-result.result .result-item:before {
        left: 14px;
        top: 20px;
    }
    body.ui-r .search-result.result .result-item p {
        font-size: 15px;
    }

    /* --- ポイント --- */
    body.ui-r .search-result.point .amazon2:first-of-type {
        margin: 16px 0 0;
        padding: 18px 14px 22px;
    }
    body.ui-r .search-result.point .amazon2:first-of-type h3 {
        padding-right: 110px;
        font-size: 17px;
    }
    body.ui-r .search-result.point .amazon2 > a {
        top: 14px;
        right: 12px;
        font-size: 12px;
    }
    body.ui-r .search-result.point .bigbig {
        font-size: 46px;
    }
    body.ui-r .search-result.point .point-item {
        padding: 12px 2px;
    }
    body.ui-r .search-result.point .point-item .left-point {
        padding-right: 10px;
    }
    body.ui-r .search-result.point .point-item .left-point p {
        font-size: 14px;
    }
    body.ui-r .search-result.point .point-item .right-point {
        min-width: 72px;
        padding: 6px 8px;
    }
    body.ui-r .search-result.point .point-item .right-point p {
        font-size: 18px;
    }

    /* --- 過去の入賞者 --- */
    body.ui-r .search-result.amazon > .trophy {
        padding: 20px 14px 18px;
    }
    body.ui-r .search-result.amazon > .trophy .trophy-1 {
        border-radius: var(--ui-r);
    }
    /* 名前の帯が狭く省略されやすいので広げる */
    body.ui-r .search-result.amazon > .trophy .trophy-1 .user-name {
        width: 64%;
    }

    /* --- レベル別ランキング --- */
    body.ui-r .level-ranking-wrap {
        margin-left: 12px;
        margin-right: 12px;
        width: auto;
        max-width: none;
        padding-bottom: 20px;
    }
    body.ui-r .level-ranking-wrap > :not(h2) {
        margin-left: 12px;
        margin-right: 12px;
    }
    body.ui-r .level-ranking-wrap > h2 {
        padding: 16px;
        font-size: 17px;
    }
    body.ui-r .level-ranking-wrap .rank-scope-chips a,
    body.ui-r .level-ranking-wrap .level-tabs a {
        min-height: 40px;
        padding: 0 12px;
        font-size: 12px;
    }
    body.ui-r .level-ranking-wrap .level-tabs a {
        padding-left: 6px;
    }
    body.ui-r .level-ranking-wrap .ranking-item {
        padding: 10px 10px 10px 8px;
        min-height: 70px;
    }
    body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.gold),
    body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.silver),
    body.ui-r .level-ranking-wrap .ranking-item:has(.rank-num.bronze) {
        min-height: 80px;
        padding-left: 12px;
    }
    body.ui-r .level-ranking-wrap .rank-num {
        width: 36px;
        min-width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 10px;
    }
    body.ui-r .level-ranking-wrap .rank-num.gold,
    body.ui-r .level-ranking-wrap .rank-num.silver,
    body.ui-r .level-ranking-wrap .rank-num.bronze {
        width: 42px;
        min-width: 42px;
        height: 42px;
        font-size: 24px;
    }
    body.ui-r .level-ranking-wrap .rank-avatar {
        width: 42px;
        height: 42px;
        margin: 0 10px 0 8px;
    }
    body.ui-r .level-ranking-wrap .rank-info {
        min-width: 90px;
    }
    body.ui-r .level-ranking-wrap .rank-level {
        width: 34px;
        min-width: 34px;
        margin-left: 6px;
    }
    body.ui-r .level-ranking-wrap .rank-level img {
        width: 30px;
        height: 30px;
    }

    /* --- 通知 --- */
    body.ui-r .un-container .un-header h1 {
        font-size: 19px;
    }
    body.ui-r .un-container .un-item {
        padding: 12px 12px;
        gap: 12px;
    }
    body.ui-r .un-container .un-item.is-unread {
        padding-left: 16px;
    }
    body.ui-r .un-container .un-item__avatar img {
        width: 44px;
        height: 44px;
    }
}

/* =============================================================
 * 16. 動きを減らす設定
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
    body.ui-r .top-area.user-page .profile .description.d2:after {
        animation: none;
    }
    body.ui-r .top-area.user-page .profile .cover img,
    body.ui-r .top-area.user-page .profile .rank-has img,
    body.ui-r .top-area.user-page .profile .action a,
    body.ui-r .top-area.user-page .profile .action a i,
    body.ui-r .top-area.user-page .list-friend .friends .friend .border,
    body.ui-r .top-area.user-page .list-friend .friends .friend figure img,
    body.ui-r .top-area.user-page .sns-profile-grid > a,
    body.ui-r .top-area.user-page .sns-profile-grid > a img,
    body.ui-r .top-area.user-page .btn-post,
    body.ui-r .search-result.follow .follow-item .border,
    body.ui-r .level-ranking-wrap .ranking-item,
    body.ui-r .un-container .un-item {
        transition: none;
    }
    body.ui-r .top-area.user-page .profile .cover:hover img,
    body.ui-r .top-area.user-page .profile .rank-has img:hover,
    body.ui-r .top-area.user-page .profile .action a:hover,
    body.ui-r .top-area.user-page .list-friend .friends .friend .border:hover,
    body.ui-r .top-area.user-page .sns-profile-grid > a:hover,
    body.ui-r .level-ranking-wrap .ranking-item:hover,
    body.ui-r .un-container a:hover .un-item {
        transform: none;
    }
}