/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ==================================================
   🧼 1. 余計なブラウザ・テーマ要素を消す ＆ ズレリセット
   ================================================== */
#masthead, #wpadminbar {
    display: none !important;
}

html, body, #page {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* スクロール時にプラグインが作る隙間を強制的にゼロにする */
.elementor-sticky--active, 
.she-header-yes {
    top: 0px !important;
}

/* ==========================================================================
   🍀 新規投稿ページ：無理な固定化を解除し、空白を即時リセット
   ========================================================================= */
.page-id-947 form.nuisans-post-form {
    margin-top: 15px !important;
}

/* ==========================================================================
   🐾 1. ぬいさんず・新規登録画面（背景色のバグ修正完了版）
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap');

#buddypress:before {
    content: "";
    display: block;
    width: 100%;
    max-width: 250px; 
    height: 100px;    
    margin: 20px auto 10px; 
    background-image: url("https://nuisans.com/wp-content/uploads/2026/05/logo-full.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#buddypress, 
#buddypress label, 
#buddypress input, 
#buddypress select, 
#buddypress textarea {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
}

/* フォーム全体の箱：背景色とオレンジの線を完全に透明（リセット）にします */
.registration-php #content,
#buddypress,
#buddypress form#signup_form {
    width: 100% !important;
    max-width: 600px !important; 
    padding: 10px !important;
    margin: 0 auto !important;
    background: transparent !important;       /* 上部の黄色背景を消滅させる */
    background-color: transparent !important; /* 透明化を強制 */
    border: none !important;                  /* 周りのオレンジの線を消滅させる */
    box-shadow: none !important;
}

/* 上部の各入力項目を囲むグループ（テーマが勝手に作る箱）の背景も透明化 */
#buddypress .register-section,
#buddypress #profile-details,
#buddypress .profile-details {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#buddypress .register-section > label, 
#buddypress .editfield > label,
#buddypress .editfield > fieldset > legend {
    display: block !important;
    color: #ff6600 !important; 
    font-weight: 700 !important; 
    font-size: 16px !important;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
}

#buddypress .radio label,
#buddypress .checkbox label,
#buddypress .editfield .radio label,
#buddypress .editfield .checkbox label {
    display: inline-block !important;
    color: #444 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    margin: 0 15px 0 5px !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

#buddypress input[type="radio"],
#buddypress input[type="checkbox"] {
    margin-right: 8px !important;
    cursor: pointer;
    vertical-align: middle !important;
}

#buddypress input[type="text"],
#buddypress input[type="password"],
#buddypress input[type="email"],
#buddypress textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 48px !important;
    border: 2px solid #ffccaa !important; 
    border-radius: 12px !important; 
    padding: 10px !important;
    background-color: #fff !important;
}

.xprofile-avatar-registration .description {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 15px !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   🧼 【完全修復】新規登録画面：標準アバター枠のみを消し、手作りの黄色い箱を守る
   ========================================================================== */
/* テーマ（BuddyBoss）標準の古いアバター枠や不要フィールドだけを確実に消滅ガード */
#buddypress .xprofile-avatar-registration,
#buddypress .editfield.html5-avatar,
#buddypress div.avatar-crop-container,
#buddypress label[for="signup_avatar"],
.field_type_avatar,
.field_avatar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 🎯 【巻き込み事故解決】
   手作りの黄色い箱（#profile-details-section）のアップロード機能は、
   テーマの消滅命令から100%除外して、確実にシステムへデータを届ける */
#signup_form .editfield:has(input[type="file"]):not(#profile-details-section) input[type="file"] {
    display: none !important;
}
#profile-details-section input[type="file"],
#post_image {
    display: block !important;       /* 物理消滅させられていたボタンを強制解放 */
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   📸 1. ぬいさん画像登録枠専用スタイル（ここだけ黄色い箱になります）
   ========================================================================= */

#buddypress .custom-file-upload-block,
#buddypress #profile-details-section {
    display: block !important;
    clear: both !important;         
    float: none !important;
    width: 100% !important;         
    max-width: 100% !important;
    background: #ffffcf !important;            /* 下部のアバター枠だけ黄色にする */
    border: 1px solid #ff7f50 !important;      /* 下部のアバター枠だけにオレンジ線を引く */
    border-radius: 12px !important; 
    padding: 25px 20px !important; 
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin-top: 25px !important; 
    margin-bottom: 30px !important; 
}

#nui_visible_file_input {
    margin-bottom: 12px !important;
}

#buddypress form#signup_form .submit {
    font-size: 14px !important;
    line-height: 1.8 !important;
    text-align: center !important;
    color: #444444 !important;
    clear: both !important;
}
#buddypress form#signup_form .submit a {
    color: #ff6600 !important; 
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.bb-modal, 
.mfp-content, 
.bp-modal-body,
div[id*="tos"], 
div[class*="modal"] {
    position: relative !important;
}
.bb-modal-close,
.bp-modal-close,
button.mfp-close,
.mfp-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    color: #666666 !important;
    font-size: 28px !important;
    font-weight: bold !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    text-align: center !important;
}

#buddypress .submit input[type="submit"] {
    display: block !important;
    width: 100% !important;
    background-color: #ff6600 !important;
    color: #fff !important;
    padding: 16px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    border-radius: 50px !important; 
    border: none !important;
    box-shadow: 0 4px 0 #cc5500 !important; 
    cursor: pointer;
    margin-top: 3px !important; 
}

#buddypress .submit input[type="submit"]:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #cc5500 !important;
}

#buddypress .editfield .error,
#buddypress .editfield p.error,
#buddypress .editfield span.error {
    color: #ff0000 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
}

#buddypress div.error {
    color: #ff0000 !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
}

html {
    overflow-y: scroll;
}

/* ==========================================================================
   🐾 2. ぬいさん専用・新規投稿フォーム（ファーストビュー最大化・縦幅拡張版）
   ========================================================================= */

.page-id-947 form.nuisans-post-form,
.page-id-947 form.nuisans-post-form input,
.page-id-947 form.nuisans-post-form textarea,
.page-id-947 form.nuisans-post-form label,
.page-id-947 .user-name,
.page-id-947 .nuisans-error-notice,
.char-counter {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
}

.page-id-947 form.nuisans-post-form {
    max-width: 600px; 
    width: 100%;
    margin: 10px auto !important;
    padding: 16px 24px !important;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.page-id-947 .form-user-profile-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #eee;
}

.page-id-947 .user-avatar img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    border: 3px solid #06c755 !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    object-fit: cover;
}

.page-id-947 .user-name {
    color: #06c755 !important;
    font-weight: 800 !important;
    display: block;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.page-id-947 .nuisans-error-notice {
    background-color: #ffeef0 !important;
    border: 1px solid #ffcccc !important;
    color: #ff4d4d !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
    margin-bottom: 0px !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

.page-id-947 .form-group-compact {
    margin-bottom: 14px !important;
}

.page-id-947 .textarea-relative {
    position: relative;
    width: 100%;
}

.page-id-947 form.nuisans-post-form label {
    font-weight: 700;
    color: #444;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 4px !important;
}

.page-id-947 form.nuisans-post-form textarea {
    width: 100% !important;
    padding: 10px 12px 30px 12px !important;
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: #fafafa;
    height: 140px !important; 
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.page-id-947 form.nuisans-post-form textarea:focus,
.page-id-947 .nuisans-input-url:focus {
    border-color: #06c755 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 199, 85, 0.1) !important;
}

.page-id-947 form.nuisans-post-form textarea[style*="background-color: rgb(250, 218, 221)"]:focus,
.page-id-947 form.nuisans-post-form textarea[style*="background-color: #FADADD"]:focus {
    border-color: #ff66a3 !important;
    background-color: #FADADD !important;
    box-shadow: 0 0 0 3px rgba(255, 102, 163, 0.2) !important;
}

.page-id-947 .char-counter {
    position: absolute;
    bottom: 10px !important;
    right: 15px;
    font-size: 12px;
    color: #999;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 20px;
    pointer-events: none;
}

.page-id-947 .char-counter.over-limit {
    color: #ff4d4d !important;
}

.page-id-947 .nuisans-input-url {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    background-color: #fafafa !important;
    font-size: 14px !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.page-id-947 input[type="file"] {
    display: block;
    width: 100%;
    padding: 10px;
    background: #f7f7f7;
    border-radius: 10px;
    border: 1px dashed #ccc;
    cursor: pointer;
    font-size: 13px;
}

.page-id-947 .image-preview-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #eee;
}

.page-id-947 .image-preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-id-947 .remove-preview-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    border: none !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: background 0.2s;
    display: flex !important;
    align-items: center !important;
}

.page-id-947 .remove-preview-btn:hover {
    background: rgba(255, 77, 77, 0.9) !important;
}

.page-id-947 form.nuisans-post-form input[type="submit"] {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: #06c755;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 25px !important;
}

.page-id-947 form.nuisans-post-form input[type="submit"]:hover {
    background-color: #05b04b;
}

@media (max-width: 767px) {
    .page-id-947 .user-name { font-size: 16px !important; }
    .page-id-947 form.nuisans-post-form textarea { font-size: 14px !important; }
    .page-id-947 .user-avatar img {
        width: 100px !important;
        height: 100px !important;
    }
}
@media (min-width: 768px) {
    .page-id-947 .user-name { font-size: 18px !important; }
    .page-id-947 form.nuisans-post-form textarea { font-size: 16px !important; }
}

.bp-activity-attachment-custom img,
.activity-inner img,
.bp-activity-attachment-post-thumbnail img {
    max-height: 380px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px;
    cursor: pointer;
}

/* ==========================================================================
   🐾 3. タイムライン（/timeline/）デザイン完全統合（16:9横長・余白完全清算版）
   ========================================================================= */

body.directory.activity,
body.directory.activity #page,
body.directory.activity #content,
body.directory.activity .container,
body.directory.activity #primary,
body.directory.activity main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

body.directory.activity #buddypress:before {
    display: none !important;
    content: none !important;
}

/* 不要な重複投稿フォームや英語のパーツを非表示 */
body.directory.activity #whats-new-form,
body.directory.activity .activity-update-form,
body.directory.activity #buddypress-post-from,
body.directory.activity .whats-new-avatar,
body.directory.activity .whats-new-content,
body.directory.activity .whats-new-textarea,
body.directory.activity #bp-nouveau-activity-form-placeholder,
body.directory.activity #bp-nouveau-activity-form {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body.directory.activity #buddypress,
body.directory.activity .buddypress-wrap,
body.directory.activity #item-body {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 背景を真っ白に統一し、左に露出したゴミテキストやバグ背景を清算 */
body.directory.activity,
body.directory.activity #content,
body.directory.activity #buddypress .buddypress-wrap,
body.directory.activity #buddypress #item-body,
body.directory.activity .dir-form,
body.directory.activity #activity-dir-search,
body.directory.activity #activity-all,
body.directory.activity .screen-content,
body.directory.activity #activity-stream,
body.directory.activity .activity-list {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* タイムラインカード全体の中央寄せ完全保護 */
body.directory.activity #buddypress .screen-content,
body.directory.activity #item-body .activity {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

body.directory.activity div.activity-head-bar,
body.directory.activity .activity-head-bar,
body.directory.activity #buddypress div.activity-head-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 600px !important;
    width: 100% !important;
    margin: 10px auto 0px auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

body.directory.activity .activity-head-bar .bb-subnav-filters-container-main:has(#bb-subnav-filter-by),
body.directory.activity .activity-head-bar #bb-subnav-filter-by,
body.directory.activity .activity-head-bar .bb-subnav-filters-label,
body.directory.activity .animate-spin,
body.directory.activity .activity-head-bar .subnav-filters-opener:has(.bb-icon-search) {
    display: none !important;
}

body.directory.activity .activity-head-bar .bb-subnav-filters-search {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
}
body.directory.activity .activity-head-bar .bb-subnav-filters-container-main {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
    position: relative !important;
}

body.directory.activity .activity-head-bar .bb-subnav-filters-container {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
}

body.directory.activity .activity-head-bar input[type="search"],
body.directory.activity .activity-head-bar .subnav-filters-modal ul li a {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

body.directory.activity .activity-head-bar .subnav-filters-opener {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 600 !important;
    color: #444 !important;
    font-size: 16px !important;
}

/* テキスト検索バーの緑色カプセルデザイン（完全保護） */
body.directory.activity .activity-head-bar input[type="search"] {
    width: 240px !important;
    max-width: 100% !important;
    height: 40px !important;
    padding: 0 35px 0 40px !important;
    border: none !important;
    border-radius: 20px !important;
    background-color: #06c755 !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
}

body.directory.activity .activity-head-bar input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}

body.directory.activity .activity-head-bar .bb-subnav-filters-search .subnav-filters-modal {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    width: 240px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body.directory.activity .activity-head-bar .nouveau-search-submit {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 20 !important;
}
body.directory.activity .activity-head-bar .nouveau-search-submit span {
    color: #FFFFFF !important;
    font-size: 14px !important;
}

body.directory.activity .activity-head-bar .search-form_reset {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 20 !important;
}
body.directory.activity .search-form_reset span {
    color: #FFFFFF !important;
}

body.directory.activity .activity-head-bar .bb-subnav-filters-container-main .subnav-filters-modal {
    position: absolute !important;
    top: 120% !important;
    right: 0 !important;
    left: auto !important;
    background-color: #4A4A4A !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    min-width: 160px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99999 !important;
    border: none !important;
}

body.directory.activity .activity-head-bar .subnav-filters-modal ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.directory.activity .activity-head-bar .subnav-filters-modal ul li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #5A5A5A !important;
    position: relative !important;
}
body.directory.activity .activity-head-bar .subnav-filters-modal ul li:last-child {
    border-bottom: none !important;
}

body.directory.activity .activity-head-bar .subnav-filters-modal ul li a {
    color: #FFFFFF !important;
    display: block !important;
    padding: 12px 35px 12px 20px !important;
    text-align: left !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    white-space: nowrap !important;
}

body.directory.activity .activity-head-bar .subnav-filters-modal ul li a:hover {
    background-color: #06c755 !important;
    color: #FFFFFF !important;
}
body.directory.activity .activity-head-bar .subnav-filters-modal ul li.selected a {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

body.directory.activity .activity-head-bar .subnav-filters-modal ul li.selected:after {
    content: "✓" !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #FFFFFF !important;
    font-size: 20px !important;
    font-weight: bold !important;
}
body.directory.activity .activity-head-bar .subnav-filters-modal ul li:after {
    display: none !important;
    content: none !important;
}

body.directory.activity .activity-list {
    clear: both !important;
    padding-top: 10px !important; 
}

/* 🌟 各トークの白いカード枠（コメント下限界引き締め完了版） */
body.directory.activity .activity-list li.activity-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
    border: none !important; 
    border-radius: 16px !important;            
    padding: 24px 24px 0px 24px !important;
    margin-top: 5px !important;   
    margin-bottom: 20px !important;           
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; 
    box-sizing: border-box !important;
    width: 100% !important;
    clear: both !important;
border-top: 0px solid transparent !important; /* 天井の干渉を0にしてベストな余白を解放 */
    background-clip: padding-box !important;        /* 背景描画のバグをクリア */
	}

/* 👤 アバター画像をPCもスマホも「60px」に完全固定 */
body.directory.activity #buddypress ul.activity-list li.activity-item .activity-avatar {
    display: block !important;
    float: left !important;            
    width: 60px !important;            
    height: 60px !important;           
    max-width: 60px !important;
    min-width: 60px !important;
    margin: 0 16px 0 0 !important;     
    padding: 0 !important;
}

body.directory.activity #buddypress ul.activity-list li.activity-item .activity-avatar img.avatar {
    display: block !important;
    width: 60px !important;            
    height: 60px !important;           
    max-width: 60px !important;
    border-radius: 50% !important;
    border: 2px solid #06C755 !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    object-fit: cover !important;
}

/* お名前ヘッダーの回り込みベース */
body.directory.activity #buddypress ul.activity-list li.activity-item .activity-header {
    display: block !important;
    overflow: hidden !important;       
    margin-bottom: 16px !important;
    padding-top: 18px !important;      
    background: transparent !important;
    border: none !important;
}

body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text,
body.directory.activity .activity-list li.activity-item .activity-header .activity-head,
body.directory.activity [class*="activity-head"] {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
    float: none !important;
}

/* 段落テキスト（pタグ）は単なるインライン文として右に流す */
body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p,
body.directory.activity .activity-list li.activity-item .activity-header .activity-head p {
    display: inline !important;        
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: #444444 !important;
    line-height: 1.5 !important;
}

/* アカウントお名前リンクの緑太文字デザイン */
body.directory.activity [class*="activity-header-text"] p a:first-of-type,
body.directory.activity [class*="activity-head"] p a:first-of-type,
body.directory.activity [class*="user-name"] {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 18px !important;       
    font-weight: 800 !important;
    color: #06c755 !important;
    display: inline !important;        
    line-height: inherit !important;
    margin: 0 4px 0 0 !important;     
}

/* 時間の前の不要な空きスペース（margin-left）を「0」に完全リセット */
body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p a[class*="time-since"],
body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p time,
body.directory.activity .activity-list li.activity-item .activity-header .activity-head p a[class*="time-since"],
body.directory.activity .activity-list li.activity-item .activity-header .activity-head p time,
body.directory.activity .activity-list li.activity-item .activity-header .time-since {
    margin-left: 0 !important;        
    padding-left: 0 !important;
    display: inline !important;        
}

body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p [class*="time-since"],
body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p span,
body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p time,
body.directory.activity .activity-list li.activity-item .activity-header .activity-head p [class*="time-since"],
body.directory.activity .activity-list li.activity-item .activity-header .activity-head p span,
body.directory.activity .activity-list li.activity-item .activity-header .activity-head p time,
body.directory.activity .activity-list li.activity-item .activity-header .time-since {
    font-size: 13px !important;       
    font-weight: 500 !important;
    color: #999999 !important;        
    display: inline !important;   
    line-height: inherit !important;
    margin-left: 2px !important;       
}

/* 公開・限定アイコン完全非表示ガード */
body.directory.activity .activity-list li.activity-item .activity-header [class*="privacy"],
body.directory.activity .activity-list li.activity-item .activity-header .activity-privacy,
body.directory.activity .activity-list li.activity-item .activity-header [class*="privacy-selector"],
body.directory.activity .activity-privacy-selector {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 動画デフォコンテナの残骸を根こそぎ完全消滅 */
body.directory.activity .activity-list li.activity-item .activity-inner .bm-embed-wrapper,
body.directory.activity .activity-list li.activity-item .activity-inner .activity-post-type-video,
body.directory.activity .activity-list li.activity-item .activity-inner .video-capture,
body.directory.activity .activity-list li.activity-item .activity-inner [class*="embed"],
body.directory.activity .activity-list li.activity-item .activity-inner [class*="video"] {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 📦 写真用ラッパーコンテナ（16:9横長ベース完全死守） */
.nuisans-uploaded-photo-wrap {
    width: 100% !important;
    max-width: 100% !important;        
    margin-top: 0 !important;          
    margin-bottom: 0 !important;       
    clear: both !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

/* 🖼 写真そのものに突っ張り棒を直撃させ、テーマの邪魔を無効化 */
.nuisans-uploaded-photo-wrap img.nuisans-timeline-photo,
body.directory.activity .activity-list li.activity-item .activity-inner img.nuisans-timeline-photo {
    display: block !important;          
    width: 100% !important;
    height: auto !important;            
    aspect-ratio: 16 / 9 !important;    
    object-fit: cover !important;       
    max-height: none !important;
    border-radius: 12px !important;
    cursor: pointer;
    margin: 0 0 24px 0 !important;     
    padding: 0 !important;
}

/* 投稿本文テキスト（画像の上側に24pxの空間をあける突っ張り棒） */
body.directory.activity .activity-list li.activity-item .activity-inner p.nuisans-timeline-text {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 16px !important;         
    font-weight: 500 !important;         
    color: #4A4A4A !important;          
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;     
    clear: both !important;            
}

/* 動画：の文字とURLブロック */
.nuisans-video-url-block,
body.directory.activity .activity-list li.activity-item .activity-inner .nuisans-video-url-block {
    clear: both !important;            
    display: inline-flex !important;    
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 16px !important;         
    font-weight: 500 !important;         
    color: #4A4A4A !important;          
    margin-top: 0 !important;          
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* 動画URLの青色・太文字化（スカイブルー＆安全自動折り返し対応版） */
body.directory.activity .activity-inner p a:not([class*="photo"]) {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 16px !important;         
    font-weight: 700 !important;               /* くっきり際立つ太文字 */
    color: #1e90ff !important;              /* 🎯 明るく視認性の高いスカイブルー */
    text-decoration: none !important;          /* 下線はナシ */
    margin-left: 6px !important; 
    
    /* 🌟 ここから下が長いURLを綺麗に折り返すための修正です */
    display: inline !important;                
    white-space: normal !important;            
    word-break: break-all !important;          
    overflow: visible !important;              
    text-overflow: clip !important;            
    vertical-align: baseline !important;       
}

/* アカウント活動情報の文字フォント・カラー統一 */
body.directory.activity .activity-list li.activity-item .activity-meta,
body.directory.activity .activity-list li.activity-item .activity-meta a,
body.directory.activity .activity-list li.activity-item .activity-meta span {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 500 !important;
    color: #4A4A4A !important;
    font-size: 14px !important;
}

/* アクションフッター（推し・コメントボタンエリア） */
body.directory.activity .activity-item-footer,
body.directory.activity #buddypress ul.activity-list li.activity-item .activity-item-footer {
    padding: 0 !important;          
    margin: 12px 0 0 0 !important;  
    background: transparent !important;
    height: auto !important;
}

/* 推し・コメントボタンの文字指定 */
body.directory.activity .activity-item-footer a.activity-button,
body.directory.activity .activity-item-footer .bb-activity-actions a {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 600 !important;
    color: #999999 !important;      
    font-size: 14px !important;
    text-decoration: none !important;
}

/* 新規投稿ページのアバター画像微細シャドー */
.nuisans-post-form .form-user-profile-compact .user-avatar img {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* 📱 スマホ対応 */
@media (max-width: 767px) {
    body.directory.activity [class*="activity-header-text"] p a:first-of-type,
    body.directory.activity [class*="activity-head"] p a:first-of-type,
    body.directory.activity [class*="user-name"] {
        font-size: 16px !important;   
    }
    body.directory.activity #buddypress ul.activity-list li.activity-item .activity-avatar,
    body.directory.activity #buddypress ul.activity-list li.activity-item .avatar {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }
    body.directory.activity #buddypress ul.activity-list li.activity-item .activity-header {
        padding-top: 14px !important; 
    }
    body.directory.activity .activity-list li.activity-item .activity-inner img.nuisans-timeline-photo {
        margin-bottom: 20px !important; 
    }
    body.directory.activity .activity-list li.activity-item .activity-inner p.nuisans-timeline-text {
        font-size: 14px !important;
        margin-bottom: 20px !important; 
    }
    .nuisans-video-url-block a {
        font-size: 14px !important;
    }
    body.directory.activity .activity-head-bar .subnav-filters-opener,
    body.directory.activity .activity-head-bar .subnav-filters-modal ul li a {
        font-size: 14px !important;
    }
    body.directory.activity .activity-list li.activity-item {
        padding: 20px 20px 6px 20px !important;
			border-top: 0px solid transparent !important; /* スマホ側のデフォルトの干渉線も0にして消滅させます */
        background-clip: padding-box !important;        /* スマホ側の背景描画のバグも同時にクリアします */
    }

    /* 🎯 【微調整】スマホ時のみ検索バーと土台を絶妙な長さの195pxに調整 */
    body.directory.activity .activity-head-bar input[type="search"] {
        width: 195px !important;
        font-size: 14px !important;
        padding: 0 30px 0 35px !important; /* 文字が詰まりすぎないように余白を再計算 */
    }
    body.directory.activity .activity-head-bar .bb-subnav-filters-search .subnav-filters-modal {
        width: 195px !important;
    }
    /* 🎯 【ここまで】 */
}

/* 本文内の「検索用マスク:」というテキストが含まれる部分を完全に隠す */
.nuisans-timeline-text {
    font-size: 16px; /* 既存のサイズ維持 */
}
/* 万が一のために、CSSの最優先権限で画面から物理的に消滅させます */
.nuisans-timeline-text span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 絞り込みメニューのチェックマーク（✓）をシステム青色から白色に変更 */
body.directory.activity .activity-head-bar .subnav-filters-modal ul li.selected:after {
    color: #FFFFFF !important;
}

/* 万が一、アイコンフォントや別の要素で色が塗られている場合の鉄壁ガード */
body.directory.activity .activity-head-bar .subnav-filters-modal ul li.selected a:after,
body.directory.activity .activity-head-bar .subnav-filters-modal ul li.selected i {
    color: #FFFFFF !important;
}

/* ==========================================================================
   🐾 4. コメント入力フォーム・横幅とのびのび拡張デザイン（完全決着版）
   ========================================================================= */

/* 入力コンテナのバグを完全に解除 */
#buddypress .activity-comments form .ac-reply-content {
    display: block !important;
    width: auto !important;
    overflow: hidden !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* 入力枠を横いっぱいに広げ、カプセル型に丸める */
#buddypress .activity-comments form .ac-reply-content textarea {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;       
    min-height: 44px !important;
    padding: 10px 80px 10px 12px !important; 
    line-height: 1.5 !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 14px !important;
    border-radius: 22px !important; 
    box-sizing: border-box !important;
    display: block !important;
}

#buddypress .activity-comments form .ac-reply-content .ac-reply-attachments,
#buddypress .activity-comments form .ac-reply-content .ac-reply-form-actions {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   🐾 5. コメント内の写真投稿（カメラアイコン）完全消滅ガード
   ========================================================================= */
#buddypress .activity-comments form .ac-reply-content [class*="avatar-button"],
#buddypress .activity-comments form .ac-reply-content [class*="media"],
#buddypress .activity-comments form .ac-reply-content label[for*="file"],
#buddypress .activity-comments form .ac-reply-content .bp-media-buttons,
#buddypress .activity-comments form .ac-reply-content i.camera,
#buddypress .activity-comments form .ac-reply-content span.camera,
#buddypress .activity-comments form .rtmedia-comment-media-upload,
#buddypress .activity-comments form [class*="attach"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* カメラが消えてテキストエリアが広がるため、右端の飛行機ボタンの位置を微調整 */
#buddypress .activity-comments form .ac-reply-content textarea {
    padding-right: 50px !important; 
}

/* ==========================================================================
   🐾 6. コメント入力枠の文字数制限（本文と同じ最大200文字ロックはPHP/JS側で安全に執行）
   ========================================================================= */

/* ==========================================================================
   🐾 7. 外部リンク機能・完全無効化 ＆ お名前・アバター救出 ＆ URLデザイン完全制御版
   ========================================================================= */

/* --------------------------------------------------------------------------
   🔗 【A】②の指示：投稿本文内の「URL文字列」をサイトカラーの青色・太文字にする（動画URL以外）
   -------------------------------------------------------------------------- */
body.directory.activity .activity-inner p.nuisans-timeline-text a {
    color: #21759b !important;              /* 🎯 サイト共通の美しい青色 */
    font-weight: 700 !important;               /* 🎯 しっかり際立つ太文字感 */
    text-decoration: underline !important;     /* リンクと分かりやすい下線 */
    pointer-events: auto !important;           /* 投稿本文側はクリック可能 */
}

/* --------------------------------------------------------------------------
   🚫 【B】①の指示：コメント欄（通常時＆ポップアップ時）のURLリンクを完全剥奪
   -------------------------------------------------------------------------- */
/* 通常タイムラインとポップアップ（シアター）のコメント本文URLだけを確実に狙い撃ち */
.acomment-content p a,
.activity-comments .comment-content p a {
    color: #444444 !important;                 /* 周りの一般テキストと同じマイルドな黒文字 */
    font-weight: 500 !important;               /* 通常の太さに戻す */
    text-decoration: none !important;          /* 不格好な下線を完全に消滅させる */
    cursor: text !important;                   /* マウスを乗せてもただのテキスト選択にする */
    pointer-events: none !important;           /* 🎯 クリック機能を物理的に100%永久遮断 */
}

/* --------------------------------------------------------------------------
   👤 【C】お名前リンク：他ページを守り抜き、「コメント欄のお名前」だけを緑・超太文字に絶対固定！
   -------------------------------------------------------------------------- */
/* 🎯 曖昧な親クラス（activity-list）を完全に撤廃し、通常時＆ポップアップ時それぞれの「コメント内お名前専用クラス」のみをピンポイントで超直撃！ */
.acomment-meta a:first-of-type,
.acomment-hd a:first-of-type,
.comment-header a:first-of-type,
.bp-activity-comment-name a,
.activity-comments .comment-header strong a {
    color: #06c755 !important;                 /* 🎯 ポップアップ内も含め、コメントお名前を100%公式グリーンへ強制固定！ */
    font-weight: 800 !important;               /* 🎯 抜群の存在感の超太文字 */
    text-decoration: none !important;          /* お名前の下線はナシ */
    cursor: pointer !important;                /* ちゃんと押せる手のひらマーク */
    pointer-events: auto !important;           /* クリック機能を100%解放 */
}

/* ==========================================================================
   💖 ぬいさんず専用：タイムライン仕上げの微調整（推しピンク化 ＆ アバター外枠除去）
   ========================================================================= */

/* 🎯 ①「推し」ボタン関連：通常時は黒、自分が押した（reacted）時だけピンク点灯！お名前はいつでも黒（4A4A4A） */

/* 【A. 通常時（まだ押していない時）】：コメントボタンたちと同じ静かなグレー・黒系で馴染ませる */
.activity-item-footer .bb-activity-actions .activity-reactions a,
.activity-item-footer .bb-activity-actions .activity-reactions i {
    color: #999999 !important;                 /* 通常時は他のボタンと同じマイルドなグレー */
}

/* 【B. 自分が押した（reacted）時】：アイコンと「・∞・」だけをピンクに鮮やかに点灯させる！ */
.activity-item-footer .bb-activity-actions .activity-reactions.reacted a,
.activity-item-footer .bb-activity-actions .activity-reactions.reacted i,
.activity-item .activity-state-reactions i.bb-icon-thumbs-up,
.activity-list .activity-item .activity-state-reactions .reactions.item {
    color: #ff66a3 !important;                 /* 🎯 自分が推した瞬間、親指と「・∞・」がピンクに変身！ */
}

/* 【C. お名前ゾーン】：自分が押そうが押さまいが、テキストはいつでもいつもの黒（4A4A4A）を死守 */
.activity-list .activity-item .activity-reactions.count,
.activity-list .activity-item .activity-state-reactions .activity-reactions {
    color: #4A4A4A !important;                 /* 🎯 「あなた」や「お名前」はいつでも落ち着いた黒 */
    font-weight: 500 !important;               /* 通常の太さで上品に */
}

/* ==========================================================================
🐾 8. コメントアバター固定（60px） ＆ 📦 横幅FULL全開拡張 ＆ 🎯 左右余白パディング完全復元
========================================================================= */

/* 👤 コメント内のアバターを丸型・緑枠に完全統一 */
#buddypress .activity-comments .activity-avatar,
#buddypress .activity-comments .acorreply-avatar,
#buddypress .activity-comments .ac-reply-avatar,
#buddypress .activity-comments li .comment-avatar,
#buddypress .activity-comments [class*="avatar"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    margin: 0 16px 0 0 !important;
    float: left !important;
}

#buddypress .activity-comments .activity-avatar img,
#buddypress .activity-comments .acorreply-avatar img,
#buddypress .activity-comments .ac-reply-avatar img,
#buddypress .activity-comments li img.avatar,
#buddypress .activity-comments [class*="avatar"] img {
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    border-radius: 50% !important;
    border: 2px solid #06C755 !important; 
    object-fit: cover !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* 📦 左右パディング完全復元・安全版 */
html body.directory.activity .activity-list li.activity-item .activity-comments .comment-body,
body.directory.activity .activity-list li.activity-item .activity-comments .comment-body,
#buddypress .activity-comments .comment-body {
    width: calc(100% - 80px) !important;
    max-width: calc(100% - 80px) !important;
    box-sizing: border-box !important;
    padding-left: 12px !important; 
    padding-right: 16px !important; 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* グレーの箱そのものの余白へ完全復元 */
body.directory.activity .activity-list li.activity-item .activity-comments .comment-content,
#buddypress .activity-comments .comment-content,
#buddypress .activity-comments .activity-inner,
.activity-comments [class*="activity-inner"] {
    background-color: #f0f0f0 !important; 
    border-radius: 12px !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    margin: 0 0 4px 0 !important;
}

/* 💡 コメントがゼロの時は、上下左右の余白を強制的にゼロ化 */
body.directory.activity .activity-list li.activity-item .activity-comments .comment-content:empty,
#buddypress .activity-comments .comment-content:empty {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* 🐾 「推し」と「返信」ボタンの完全非表示命令 */
html body.directory.activity .activity-list li.activity-item .activity-comments .comment-meta a:not(.bp-activity-comment-name):not([href*="/members/"]):not([href*="/menbers/"]),
#buddypress .activity-comments .comment-meta a:not(.bp-activity-comment-name):not([href*="/members/"]):not([href*="/menbers/"]),
#buddypress .activity-comments [class*="meta"] a:not(.bp-activity-comment-name):not([href*="/members/"]):not([href*="/menbers/"]) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 🎯 【時間（ago）の色・サイズを親トークと完全同期】 */
#buddypress .activity-comments .posted,
#buddypress .activity-comments .time-since,
.activity-comments .posted,
.activity-comments .time-since,
span.posted {
    color: #999999 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    margin-top: 4px !important;
    margin-left: 2px !important;
    line-height: inherit !important;
}

/* ==========================================================================
   🔒 タイムライン：【限定バッジ最終配置 ＆ コメントアイコンバグ完全修正】
   ========================================================================= */

/* ① コメントアイコンを巻き込まず、ヘッダーの鍵マークだけをピンポイント消滅 */
body.directory.activity .activity-list li.activity-item .activity-header [class*="privacy"],
body.directory.activity .activity-list li.activity-item .activity-header .activity-privacy,
body.directory.activity .activity-list li.activity-item .activity-header [class*="privacy-selector"],
body.directory.activity .activity-privacy-selector,
body.directory.activity .activity-list li.activity-item .activity-header .bp-privacy-icon,
body.directory.activity .activity-list li.activity-item .activity-header i.bb-icon-privacy {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body.directory.activity .activity-list li.activity-item {
    position: relative !important;
}

/* 🌸 【限定バッジ】三点リーダーから左へちょうど良い距離をキープ */
body.directory.activity .activity-list li.activity-item .activity-header .nui-limited-badge,
#buddypress ul.activity-list li.activity-item .activity-header .nui-limited-badge {
    position: absolute !important;
    top: 17px !important;
    right: 52px !important;
    z-index: 10 !important;
    background-color: #ff66a3 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    display: inline-block !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
}

/* ==========================================================================
   📱 【スマホ専用】テーマの干渉を完全シャットアウト
   ========================================================================= */
@media (max-width: 767px) {

    body.single-activity .bb-mobile-nav-bar,
    body.single-activity #buddypress .bb-mobile-nav-bar,
    body.single-activity .activity-list > li::before,
    body.single-activity .activity-list > li::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    body.single-activity #nui-elementor-sp-footer-wrap {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important; 
        background-color: rgba(74, 74, 74, 0.9) !important; 
        background: rgba(74, 74, 74, 0.9) !important;
        z-index: 999999 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2) !important;
        box-sizing: border-box !important;
        padding: 0 6px !important;
        margin: 0 !important;
    }

    body.single-activity #nui-elementor-sp-footer-wrap div,
    body.single-activity #nui-elementor-sp-footer-wrap .elementor-container,
    body.single-activity #nui-elementor-sp-footer-wrap .elementor-row {
        display: flex !important;
        flex-direction: row !important; 
        width: 100% !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        background: transparent !important; 
        padding: 0 !important;
        margin: 0 !important;
    }

    body.single-activity #nui-elementor-sp-footer-wrap .elementor-column:nth-child(1),
    body.single-activity #nui-elementor-sp-footer-wrap .elementor-column:nth-child(2),
    body.single-activity #nui-elementor-sp-footer-wrap .elementor-column:nth-child(4),
    body.single-activity #nui-elementor-sp-footer-wrap .elementor-column:nth-child(5) {
        flex: 0 0 17.5% !important;
        width: 17.5% !important;
        max-width: 17.5% !important;
    }
    
    body.single-activity #nui-elementor-sp-footer-wrap .elementor-column:nth-child(3) {
        flex: 0 0 22% !important;
        width: 22% !important;
        max-width: 22% !important;
        position: relative !important;
    }

    body.single-activity #nui-elementor-sp-footer-wrap a {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-decoration: none !important;
    }

    body.single-activity #nui-elementor-sp-footer-wrap i,
    body.single-activity #nui-elementor-sp-footer-wrap svg,
    body.single-activity #nui-elementor-sp-footer-wrap span,
    body.single-activity #nui-elementor-sp-footer-wrap .elementor-icon {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.single-activity #nui-elementor-sp-footer-wrap ul,
    body.single-activity #nui-elementor-sp-footer-wrap li {
        list-style: none !important;
        content: none !important;
    }

    body.single-activity #buddypress,
    body.single-activity .buddypress-wrap {
        padding-bottom: 140px !important;
    }
}

/* ==========================================================================
   🏠 ぬいさんず専用：コメントポップアップ（シアター）デザイン最終コンプリート決定版
   ========================================================================= */

/* 外側のトゲトゲした巨大な2重枠線と背景を完全に消し去る */
div.activity-theatre,
div.activity-theatre.buddypress-wrap,
div.activity-theatre .activity-modal {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ポップアップ本体の形状（丸み18px・影・縦スクロールの主軸化） */
div.activity-theatre .activity-modal {
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;                     /* ポップアップ自体をのびのび縦スクロールさせる */
    background: #ffffff !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ヘッダーエリア：高さをしっかり持たせ、内部のパーツを垂直中央に並べるための土台 */
div.activity-theatre .bb-modal-activity-header {
    border-bottom: 1px solid #f2f2f2 !important;
    padding: 0 24px !important;
    background: #ffffff !important;
    position: relative !important;
    display: block !important;
    height: 64px !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* お名前位置をキープ */
div.activity-theatre .bb-modal-activity-header h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 800 !important;
    color: #4A4A4A !important;
    font-size: 18px !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: auto !important;
    display: block !important;
}

/* 閉じる「×」ボタン：右端の垂直中央にピン留め配置 */
div.activity-theatre .bb-modal-activity-header .bb-close-action-popup {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 24px !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 4px !important;
    z-index: 99999 !important;
}

/* ×ボタンのアイコン自体を少し大きく、押しやすくマイルドなグレーに */
div.activity-theatre .bb-modal-activity-header .bb-close-action-popup span {
    font-size: 20px !important;
    color: #888888 !important;
    font-weight: bold !important;
}

/* 閉じるボタンのマウスオーバー（ホバー）時の色変えを完全無効化 */
div.activity-theatre .bb-modal-activity-header .bb-close-action-popup:hover span {
    color: #888888 !important;
}

/* 【スマホ専用レスポンシブ】：お名前サイズを16pxに変更 */
@media (max-width: 767px) {
    div.activity-theatre .bb-modal-activity-header {
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 16px !important;
    }
    div.activity-theatre .bb-modal-activity-header h2 {
        font-size: 16px !important;
        left: 16px !important;
    }
    div.activity-theatre .bb-modal-activity-header .bb-close-action-popup {
        right: 16px !important;
    }
}

/* 中間のコメント一覧表示エリア：固定高さを強制撤廃 */
div.activity-theatre .bb-modal-activity-body {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;                 /* ここ単体での内スクロールを禁止 */
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
}

/* BuddyBoss独自の底固定を強制破壊 */
div.activity-theatre .footer-overflow {
    position: relative !important;                  /* absoluteを殺して通常の流れに戻す */
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;                     /* JS独自の座標移動も無効化 */
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
    margin-top: 20px !important;                    /* コメントリストとの間に心地よい隙間を */
}

/* フッター（入力欄）の土台：スクロールの一番下に自然に並ぶ形へ */
div.activity-theatre .bb-modal-activity-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    border-top: 1px solid #f2f2f2 !important;
    background: #fbfbfb !important;
    padding: 16px 24px !important;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* フッターの投稿ユーザーアバター：PC・スマホ共に「60px」に完全同期 */
div.activity-theatre .ac-reply-avatar,
div.activity-theatre .ac-reply-avatar img {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}
div.activity-theatre .ac-reply-avatar {
    margin: 0 16px 0 0 !important;
    padding: 0 !important;
    display: block !important;
}
div.activity-theatre .ac-reply-avatar img {
    border-radius: 50% !important;
    border: 2px solid #06C755 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    object-fit: cover !important;
}

/* コメント入力ボックスの形状 */
div.activity-theatre .bp-ac-form-container {
    border-radius: 24px !important;
    border: 1px solid #e5e5e5 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    min-height: 60px !important;
}

/* 📱 🎯 【スマホ専用レスポンシブ】：最下部に30px以上の「絶対安全なスクロール余地」を再計算 */
@media (max-width: 767px) {
    div.activity-theatre .bb-modal-activity-footer {
        padding: 12px 16px 46px 16px !important;    /* 🎯 底パディングを46pxにさらに増量！ */
    }
    
    /* 🎯 最後のダメ押し：スクロールしきった時に、固定メニューに絶対に踏まれないための床用マージン */
    div.activity-theatre .bp-ac-form-container {
        margin-bottom: 30px !important;            /* 🎯 20pxから「30px」へパワーアップ配備！ */
    }

    div.activity-theatre .ac-reply-avatar,
    div.activity-theatre .ac-reply-avatar img {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }
    div.activity-theatre .ac-reply-avatar {
        margin-right: 12px !important;
    }
}

/* コメント内の不要なツールバーを完全消滅ガード */
div.activity-theatre .ac-reply-toolbar,
div.activity-theatre .post-media,
div.activity-theatre .media-support,
div.activity-theatre .video-support,
div.activity-theatre .document-support,
div.activity-theatre .post-gif,
div.activity-theatre [class*="camera"],
div.activity-theatre [class*="toolbar"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 入力欄の調整 */
div.activity-theatre .emojionearea,
div.activity-theatre .ac-input {
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
}

/* 入力欄フォント */
div.activity-theatre .ac-form textarea,
div.activity-theatre .emojionearea-editor {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 14px !important;
    background: transparent !important;
}

/* ==========================================================================
   👥 ぬいさんず専用：「推し・∞・」一覧ポップアップの超絶可愛い化（究極の最終版）
   ========================================================================= */

/* --------------------------------------------------------------------------
   📝 【A】タイトルテキスト（推し・∞・ (2)）のデザインとPCサイズ指定
   -------------------------------------------------------------------------- */
div[id*="reaction-content-"].activity-state-popup_inner,
.activity-state-popup_inner {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;
    color: #4A4A4A !important;
}

.activity-state-popup_inner .activity-state-popup_title h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;            /* タイトル下の余白を少し広げてスッキリ */
}

/* --------------------------------------------------------------------------
   👤 【B】アバター・お名前・行間隔のレギュレーション完全破壊 ＆ 100%正円化
   -------------------------------------------------------------------------- */
/* 🎯 核心修正：ここまでOKだった形をベースに、複数並んだ時のメンバーごとの「上下の間隔」だけを
   さらにもうちょっとだけゆったり広げるために、margin-bottomを「20px」に微増調整しました。 */
.activity-state-popup_inner ul.activity-state_users li.activity-state_user,
.activity-state-popup_inner li[class*="activity-state_user"],
.activity-state-popup_inner table tr {
    margin-bottom: 20px !important;            /* 🎯 複数並んだ時のメンバーごとの下の隙間（もうちょっとだけ広く） */
    padding-bottom: 6px !important;             /* 🎯 心地よい間隔を作るための下パディング */
}

/* 🎯 ①＆③の解決：アバターの親マス（tdやdiv）の横幅をガチガチに固定し、余計なパディングを強制リセット！ */
.activity-state-popup_inner div.activity-state_user_avatar,
.activity-state-popup_inner [class*="user_avatar"],
.activity-state-popup_inner table td:first-child,
.activity-state-popup_inner tr td:first-child,
.activity-state-popup_inner td[class*="avatar"] {
    width: 60px !important;                    /* PCサイズ固定 */
    max-width: 60px !important;
    min-width: 60px !important;
    padding: 0 !important;                     /* 🎯 左右のパディングを完全に排除して歪みを元断ち */
    text-align: center !important;
    vertical-align: middle !important;
}

/* 🎯 ①＆③の解決：アバター画像本体。1ミリの歪みも隙間も許さない絶対正円の強制ロジック */
.activity-state-popup_inner .activity-state_user_avatar img,
.activity-state-popup_inner table td img,
.activity-state-popup_inner img.avatar,
.activity-state-popup_inner td[class*="avatar"] img {
    width: 60px !important;                    /* 横幅60px */
    height: 60px !important;                   /* 縦幅60px */
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    
    border: 2px solid #06c755 !important;      /* いつもの細緑枠 */
    
    /* 🌟【修正】隙間をゼロにして白塗りを透明化し、お写真と緑の線をピタッと密着させます */
    padding: 0 !important;                     
    background: transparent !important;        
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
    border-radius: 50% !important;             /* 🎯 100%完全なまんまる */
    object-fit: cover !important;              /* 画像の引き伸ばし・歪みを自動防止 */
    display: block !important;
    margin: 0 auto !important;
}

/* お名前（LINEグリーン）：太字にして、アバターのマスから「15px」の美しいディスタンス */
.activity-state-popup_inner div.activity-state_user_name a,
.activity-state-popup_inner [class*="user_name"] a,
.activity-state-popup_inner table td:nth-child(2) a,
.activity-state-popup_inner td a,
.activity-state-popup_inner [class*="name"] a {
    color: #06c755 !important;                 /* LINEグリーン */
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;               /* 太文字 */
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-left: 15px !important;              /* 🎯 アバターとの間の鉄壁の重なりガード */
    vertical-align: top !important;            /* 位置調整の基準を上に固定 */
    padding-top: 18px !important;              /* 確定した高さ微調整パディング */
}

/* --------------------------------------------------------------------------
   👍 【C】アバター右下の不要な親指アイコンバッジを完全消滅
   -------------------------------------------------------------------------- */
.activity-state-popup_inner [class*="popup_tab"] td i,
.activity-state-popup_inner td [class*="icon"],
.activity-state-popup_inner td .bb-icon-thumbs-up,
.activity-state-popup_inner i[class*="thumbs"],
.activity-state-popup_inner td a + i,
.activity-state-popup_inner td i.bb-icon-thumbs-up {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* --------------------------------------------------------------------------
   📱 【D】スマホ画面（画面幅768px以下）の時だけの見栄え微調整
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .activity-state-popup_inner .activity-state-popup_title h4 {
        font-size: 16px !important;
    }
    
    /* スマホ時も複数並んだメンバー同士の「上下の間隔」をさらにもうちょっと広くキープ */
    .activity-state-popup_inner ul.activity-state_users li.activity-state_user,
    .activity-state-popup_inner li[class*="activity-state_user"] {
        margin-bottom: 20px !important;
    }
    
    /* スマホ時はアバターの親マス（tdやdiv）もPC共通の横幅60pxを完全維持 */
    .activity-state-popup_inner div.activity-state_user_avatar,
    .activity-state-popup_inner [class*="user_avatar"],
    .activity-state-popup_inner table td:first-child,
    .activity-state-popup_inner tr td:first-child,
    .activity-state-popup_inner td[class*="avatar"] {
        width: 60px !important;
        max-width: 60px !important;
        min-width: 60px !important;
        padding: 0 !important;
    }
    
    /* スマホ時はアバター画像を完全正円の60pxに！ */
    .activity-state-popup_inner .activity-state_user_avatar img,
    .activity-state-popup_inner img.avatar,
    .activity-state-popup_inner table td img,
    .activity-state-popup_inner td[class*="avatar"] img {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;            /* サイズ潰れを防ぎ完璧なまんまるを死守 */
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }
    
    /* スマホ時のお名前の位置調整（★生かしてあります） */
    .activity-state-popup_inner div.activity-state_user_name a,
    .activity-state-popup_inner [class*="user_name"] a,
    .activity-state-popup_inner table td:nth-child(2) a,
    .activity-state-popup_inner td a {
        margin-left: 12px !important;
        font-size: 15px !important;
        vertical-align: top !important;        /* 位置調整の基準を上に固定 */
        padding-top: 18px !important;          /* スマホ環境のお名前高さ微調整パディング */
    }

}
	
/* ==========================================================================
   🏠 4. トーク投稿詳細ページ（個別ページ）専用・デザイン完全同期化ロジック【最新版】
   ========================================================================= */

/* ① 画面上部や背景に露出する、BBデフォルトの巨大なロゴマークを完全抹消 */
/* ==========================================================================
   🧼 【個別修正】投稿詳細ページ（activity-permalink）の時だけ、上部のロゴを消去
   ========================================================================== */
body.activity-permalink #buddypress:before {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ②&③ 背景のグレーをタイムラインと同じ真っ白にし、横幅を「600px」に引き締めて中央寄せ */
body.wp-singular,
body.wp-singular #page,
body.wp-singular #content,
body.wp-singular #buddypress,
body.wp-singular .buddypress-wrap,
body.wp-singular #primary,
body.wp-singular main {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* 🎯 詳細ページのカード枠の横幅を、タイムラインとミリ単位で完全一致させる */
body.wp-singular #buddypress .activity,
body.wp-singular #activity-stream,
body.wp-singular .activity-permalink #buddypress {
    max-width: 600px !important;
    width: 100% !important;
    margin: 20px auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* 🌟 詳細ページのトークの白い箱（カード）を、タイムラインの影・丸みと100%同期 */
body.wp-singular .activity-list li.activity-item {
    background: #ffffff !important;
    border: none !important; 
    border-radius: 16px !important;                
    padding: 24px 24px 16px 24px !important; /* 下側の余白を心地よく調整 */       
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; 
    box-sizing: border-box !important;
    width: 100% !important;
}

/* ④ フォントサイズ、文章の読みやすさ、お名前の「公式グリーン」を完全移植 */
body.wp-singular .activity-list li.activity-item .activity-header .activity-header-text p,
body.wp-singular .activity-list li.activity-item .activity-header .activity-head p {
    font-size: 15px !important;
    color: #444444 !important;
}

body.wp-singular [class*="activity-header-text"] p a:first-of-type,
body.wp-singular [class*="activity-head"] p a:first-of-type,
body.wp-singular [class*="user-name"] {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 18px !important;           
    font-weight: 800 !important;
    color: #06c755 !important; /* お名前を公式グリーンに固定 */
}

body.wp-singular .activity-list li.activity-item .activity-inner p.nuisans-timeline-text {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 16px !important;             
    font-weight: 500 !important;             
    color: #4A4A4A !important;              
    line-height: 1.6 !important;
}

/* ⑤ 写真のスクエア（正方形）トリミングを強制解除！ タイムラインと同じ「16:9横長」で全体を美しく表示 */
body.wp-singular .activity-list li.activity-item .activity-inner img,
body.wp-singular .activity-attached-media img,
body.wp-singular .bp-activity-attachment-custom img,
body.wp-singular .activity-inner .activity-post-type-photo img,
body.wp-singular .activity-inner .activity-post-type-video img {
    width: 100% !important;
    height: auto !important;                
    aspect-ratio: 16 / 9 !important;        
    object-fit: cover !important;           
    max-height: none !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important; /* 動画URLとの間に綺麗な隙間を作ります */
}

/* ==========================================================================
   🏠 5. トーク個別詳細ページ：背景白化＆カード中央寄せ完全同期【完全解決版】
   ========================================================================= */

/* ① 背景のグレーを完全に消し去り、タイムラインと同じ「真っ白」にする */
body.activity-permalink,
body.activity-permalink #page,
body.activity-permalink #content,
body.activity-permalink #buddypress,
body.activity-permalink .buddypress-wrap,
body.activity-permalink #primary,
body.activity-permalink main {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* 🎯【最重要】検証で見つかったBuddyBoss大元のグレー背景と外枠線を、個別ページ限定で完全に破壊して真っ白にします */
body.activity-permalink ul.activity-list.bp-list,
body.activity-permalink .activity-list.bp-list {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* ② 中央の投稿ブロック（カードの土台）だけをタイムラインと同じ横幅（最大600px）にして中央に寄せる */
body.activity-permalink #buddypress .activity,
body.activity-permalink #activity-stream,
body.activity-permalink div.activity,
body.activity-permalink ul#activity-stream {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   🏠 6. トーク個別詳細ページ：細部（写真の角丸・余白・ポップアップ）完全同期化
   ========================================================================= */

/* ① 写真（画像）の16:9切り抜きを完全にデリートし、本来の縦横比（全体表示）を絶対強制する */
body.activity-permalink #buddypress ul.activity-list li.activity-item .activity-content .activity-inner img,
body.activity-permalink .activity-inner img,
body.activity-permalink .activity-attached-media img,
body.activity-permalink .bp-activity-attachment-custom img,
body.activity-permalink [class*="activity-post-type"] img {
    width: 100% !important;
    
    /* 🎯 16:9の縛りを悪魔合体で完全に破壊し、写真本来の縦横比に戻します */
    height: auto !important;                
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;          
    object-fit: contain !important;         
    
    border-radius: 12px !important;
    margin-top: 10px !important;
    margin-bottom: 24px !important;
}

/* ② 投稿本文テキスト（pタグ）のフォント設定をタイムラインと100%共通化 */
body.activity-permalink .activity-list li.activity-item .activity-inner p.nuisans-timeline-text,
body.activity-permalink .activity-item .activity-content .activity-inner p {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 16px !important;             
    font-weight: 500 !important;             
    color: #4A4A4A !important;              
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
}

/* ③【大注目】個別ページ専用：推しボタンを押した先のPOPUPアバターの「白い隙間」を完全消滅 */
body.activity-permalink .activity-state-popup_inner .activity-state_user_avatar img,
body.activity-permalink .activity-state-popup_inner table td img,
body.activity-permalink .activity-state-popup_inner img.avatar,
body.activity-permalink .activity-state-popup_inner td[class*="avatar"] img {
    padding: 0 !important;                     /* 🎯 白い隙間（内枠）をゼロ化 */
    background: transparent !important;        /* 🎯 白塗りを透明化してお写真に緑の線を密着 */
    border: 2px solid #06c755 !important;      /* LINEグリーン枠線を直撃 */
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* ④ 個別ページ専用：推しPOPUP内のお名前リンクも、公式グリーン＆太字に固定 */
body.activity-permalink .activity-state-popup_inner div.activity-state_user_name a,
body.activity-permalink .activity-state-popup_inner [class*="user_name"] a,
body.activity-permalink .activity-state-popup_inner table td:nth-child(2) a,
body.activity-permalink .activity-state-popup_inner td a {
    color: #06c755 !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
}

/* ==========================================================================
   🏠 7. トーク個別詳細ページ：アバター丸型化・URL青色化・余白完全同期
   ========================================================================= */

/* ① ユーザーアバター画像を丸型（PC/SP 60px固定）にし、公式の細緑枠を直撃 */
body.activity-permalink #buddypress ul.activity-list li.activity-item .activity-avatar {
    display: block !important;
    float: left !important;            
    width: 60px !important;            
    height: 60px !important;           
    max-width: 60px !important;
    min-width: 60px !important;
    margin: 0 16px 0 0 !important;     
    padding: 0 !important;
}

body.activity-permalink #buddypress ul.activity-list li.activity-item .activity-avatar img.avatar {
    display: block !important;
    width: 60px !important;            
    height: 60px !important;           
    max-width: 60px !important;
    border-radius: 50% !important;             /* 🎯 100%完全な正円化 */
    border: 2px solid #06C755 !important;      /* 🎯 タイムライン共通の公式細緑枠 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    object-fit: cover !important;              /* 画像の歪み・引き伸ばし自動防止 */
}

/* ② 動画URLテキストのカラーを鮮やかなスカイブルー（#1e90ff）に変更 */
body.activity-permalink .activity-inner p a:not([class*="photo"]) {
    color: #1e90ff !important;                 /* 🎯 タイムラインと100%同じスカイブルー */
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ③ 本文テキスト（なにしてる？）と投稿画像の間の高さを「24px（良い塩梅）」に完全同期 */
body.activity-permalink .activity-list li.activity-item .activity-inner p.nuisans-timeline-text,
body.activity-permalink .activity-item .activity-content .activity-inner p:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 24px !important;            /* 🎯 本文と画像の間に美しい突っ張り棒を配置 */
}

/* ④ 周囲のパディング（カード内側の余白：24px）をタイムラインと100%同じに緊縛 */
body.activity-permalink .activity-list li.activity-item {
    padding: 24px 24px 20px 24px !important;    /* 🎯 タイムラインの黄金比余白をそのまま移植 */
}

/* ==========================================================================
   🐾 9. 投稿詳細ページ（LP）：無限ループ防止のため画像リンクを完全無効化
   ========================================================================= */

/* 🎯 詳細ページ（LP）上の写真リンクから「手のひらマーク」と「クリック機能」を100%永久遮断 */
body.activity-permalink .activity-list li.activity-item .activity-inner a:has(img),
body.activity-permalink .activity-attached-media a,
body.activity-permalink .bp-activity-attachment-custom a {
    pointer-events: none !important;  /* 🎯 クリック（タップ）しても何も反応しない（ループしない）ようにします */
    cursor: default !important;       /* マウスを乗せても矢印のままにします */
}

/* 画像そのものにマウスを乗せたときの「手のひらマーク」も通常矢印に強制リセット */
body.activity-permalink .activity-list li.activity-item .activity-inner img {
    cursor: default !important;
}

/* ==========================================================================
   🏠 10. トーク個別詳細ページ：デフォルトの公開・限定アイコンを完全抹消
   ========================================================================= */

/* 🎯 タイムラインと同じ所作：詳細ページ内のヘッダーにある不要なデフォルトアイコン（地球・鍵マーク等）を根こそぎ完全消滅 */
body.activity-permalink .activity-list li.activity-item .activity-header [class*="privacy"],
body.activity-permalink .activity-list li.activity-item .activity-header .activity-privacy,
body.activity-permalink .activity-list li.activity-item .activity-header [class*="privacy-selector"],
body.activity-permalink .activity-privacy-selector,
body.activity-permalink .activity-list li.activity-item .activity-header .bp-privacy-icon,
body.activity-permalink .activity-list li.activity-item .activity-header i.bb-icon-privacy {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================================================
   🍀 タイムラインPC専用：スマホの部屋から救出した「天井バグ消滅コード」
   ========================================================================= */

/* スマホの部屋を閉じたことでPC画面から消えてしまった、
   あの「0px指定でPCタイムラインの上が完璧に直った効果」を、PC専用としてここに完全復活させます */
body.directory.activity .activity-list li.activity-item {
    border-top: 0px solid transparent !important; 
    background-clip: padding-box !important;        
}

/* ==========================================================================

   🧼 【最終決着】詳細ページのパディングをタイムラインの「狭い余白」に完全同期

   ========================================================================= */



/* -------------------------------------------------------------------------

   ① 投稿横幅（最大600px）と「狭いパディング」の完全一致

   ------------------------------------------------------------------------- */

/* 詳細ページの大元の外枠幅をタイムライン（600px）へ強制緊縛 */

body.activity-permalink #buddypress .activity,

body.activity-permalink #activity-stream,

body.activity-permalink div.activity,

body.activity-permalink ul#activity-stream,

body.activity-permalink #buddypress #single-page-wrap,

body.activity-permalink #buddypress .activity-permalink {

    max-width: 600px !important;

    width: 100% !important;

    margin: 5px auto 20px auto !important; /* 天井の隙間も5pxに凝縮 */

    padding: 0 !important;

    box-sizing: border-box !important;

}



/* 🎯 【核心】詳細ページでポテッと広がってしまう原因（BBのデフォルト余白）を徹底破壊！

   タイムラインのスクショと同じ「引き締まった狭いパディング」へ強制上書きします */

body.activity-permalink #buddypress ul.activity-list li.activity-item,

body.activity-permalink .activity-list li.activity-item {

    /* 左右の余白を極限まで引き締め、下部はコメント欄のために0px化 */

    padding: 12px 16px 0px 16px !important; 

    margin-top: 5px !important;

    margin-bottom: 20px !important;

    border-radius: 16px !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: none !important;

}



/* -------------------------------------------------------------------------

   ② アバター画像となまえテキストを縦方向で完璧に中央揃え（上下センター）

   ------------------------------------------------------------------------- */

/* 詳細ページのヘッダーから古いfloat（回り込み）を完全抹消し、Flexboxで縦中央に整列 */

body.activity-permalink .activity-list li.activity-item header.activity-header,

body.activity-permalink .activity-item header.activity-header {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;      /* 🎯 これでお名前とアバターが綺麗に縦中央で並びます */

    justify-content: flex-start !important;

    float: none !important;

    width: 100% !important;

    box-sizing: border-box !important;

    

    /* 狭いパディング化に伴い、ヘッダー自体の余白もタイムライン（上10px/下12px辺り）に同期 */

    padding: 10px 0 12px 0 !important; 

    margin: 0 !important;

}



/* アバターのガタつき原因になるfloatと、過去の緊急パディングをここで一度完全清算（Flexboxにすべて委ねる） */

body.activity-permalink .activity-list li.activity-item .activity-avatar,

body.activity-permalink .activity-item .activity-avatar {

    float: none !important;

    display: block !important;

    margin: 0 12px 0 0 !important;       /* 右側のお名前テキストとの隙間 */

    padding: 0 !important;               /* ズレの原因になる上部パディングを完全消滅 */

}



/* お名前エリアにかかっていたBB特有の巨大な高さや回り込み、過去のパディング（28px等）を完全リセット */

body.activity-permalink .activity-list li.activity-item .activity-header .activity-head,

body.activity-permalink .activity-item .activity-header .activity-head,

body.activity-permalink .activity-list li.activity-item .activity-header .activity-header-text {

    float: none !important;

    margin: 0 !important;

    padding: 0 !important;               /* 🎯 余計なパディングをゼロにして、アバターのド真ん中へ引っ張ります */

    box-sizing: border-box !important;

    line-height: 1.2 !important;

}



/* リンク文字自体の余計な上パディング（ポップアップ用など）も詳細ページでは完全クリア */

body.activity-permalink [class*="activity-header-text"] p a:first-of-type,

body.activity-permalink [class*="activity-head"] p a:first-of-type {

    display: inline-block !important;

    margin: 0 4px 0 0 !important;

    padding: 0 !important;               /* padding-top: 18px などを強制リセット */

}



/* -------------------------------------------------------------------------

   ③ 下部コンテンツ（本文・写真・コメント箱）のフチの余白感も完全同期

   ------------------------------------------------------------------------- */

/* 本文テキストがカードの細くなったフチと綺麗に並ぶようマージンを最適化 */

body.activity-permalink .activity-list li.activity-item .activity-inner p.nuisans-timeline-text,

body.activity-permalink .activity-item .activity-content .activity-inner p:first-of-type {

    padding: 0 !important;

    margin: 0 0 16px 0 !important;       /* 下の写真との隙間を程よく調整 */

    box-sizing: border-box !important;

}



/* 写真（画像）を狭くなったカードの端まで気持ちよく100%全開に広げる */

body.activity-permalink .activity-list li.activity-item .activity-content .activity-inner img,

body.activity-permalink .activity-inner img,

body.activity-permalink .bp-activity-attachment-custom img {

    margin: 0 0 16px 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    border-radius: 12px !important;

    box-sizing: border-box !important;

    height: auto !important;

    aspect-ratio: 16 / 9 !important;

    object-fit: cover !important;

}



/* グレーのコメント箱の横幅も、引き締まったカード幅と100%一致させる */

body.activity-permalink .activity-list li.activity-item .activity-comments .comment-content,

body.activity-permalink #buddypress .activity-comments .comment-content {

    margin: 0 0 4px 0 !important;        /* タイムライン側の「左右マージン無し」に完全同期 */

}



/* ==========================================================================

   🏠 【構造バグ修正】詳細ページの横幅一致 ＆ アバター・名前の上下中央揃え

   ========================================================================= */



/* -------------------------------------------------------------------------

   ① 投稿横幅（カードサイズ）が狭くなっている現象を完全クリア

   ------------------------------------------------------------------------- */

/* 🎯 【検証結果からの修正】個別ページのリスト（.bp-list）とその親全体の左右の絞り込みを完全に破壊します */

body.activity-permalink #buddypress ul.activity-list,

body.activity-permalink #buddypress .activity-list.bp-list,

body.activity-permalink .activity-permalink #buddypress {

    max-width: 600px !important;

    width: 100% !important;

    margin: 5px auto 20px auto !important;

    padding: 0 !important;

    box-sizing: border-box !important;

}



/* 白いカード枠（li.activity-item）自体をタイムラインとミリ単位で統一 */

body.activity-permalink .activity-list li.activity-item {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 100% !important;

    padding: 12px 16px 0px 16px !important; /* 現状の狭いパディングが正解 */

    box-sizing: border-box !important;

    position: relative !important; /* 三点リーダーなどを浮かせるための基準 */

}



/* -------------------------------------------------------------------------

   ② 【最重要】詳細ページ特有の「HTML並び順バグ」をFlexboxの順番並び替え（order）で解決

   ------------------------------------------------------------------------- */

/* 白いカード（li）そのものをFlexboxにして、中身の並び順を「アバター → ヘッダー → 本文」に強制変更します */

body.activity-permalink .activity-list li.activity-item {

    display: flex !important;

    flex-direction: column !important; /* 基本は縦並び */

}



/* 三点リーダー（オプションボタン）やピン留めボタンを、カードの右上に絶対配置で逃がします */

body.activity-permalink .activity-list li.activity-item .bb-activity-more-options-wrap,

body.activity-permalink .activity-list li.activity-item .bb-pin-action {

    position: absolute !important;

    top: 16px !important;

    right: 16px !important;

    z-index: 10 !important;

}



/* 🎯 アバター（.activity-avatar）の階層を最優先（一番上）に引っ張り上げます */

body.activity-permalink .activity-list li.activity-item .activity-avatar {

    order: 1 !important;

    float: none !important;

    display: block !important;

    width: 60px !important;

    height: 60px !important;

    margin: 0 12px 0 0 !important;

    padding: 0 !important;

}



/* 🎯 名前ヘッダー（.activity-header）をアバターのすぐ横（2番目）に並べます */

body.activity-permalink .activity-list li.activity-item .activity-header {

    order: 2 !important;

    float: none !important;

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    width: auto !important;

}



/* 🎯 本文や写真（.activity-content）を3番目（下側）に配置します */

body.activity-permalink .activity-list li.activity-item .activity-content {

    order: 3 !important;

    width: 100% !important;

    margin-top: 12px !important; /* アバター/名前エリアと本文との間の心地よい隙間 */

}



/* -------------------------------------------------------------------------

   ③ アバター画像と名前テキストを「完璧な縦方向中央揃え」に合体させる

   ------------------------------------------------------------------------- */

/* アバターと名前ヘッダーを包む臨時の「横並び行」を擬似的に作ります */

/* ※ li自体をFlexrowにすると本文が横にすっ飛ぶため、アバターとヘッダーを同じ高さで水平に整列させます */

@media (min-width: 0px) {

    body.activity-permalink .activity-list li.activity-item {

        display: grid !important;

        grid-template-columns: 60px 1fr !important; /* 左に60pxアバター、右に名前 */

        align-items: center !important; /* 🎯 これでアバターと名前が「完璧に上下中央揃え」になります！ */

    }

    

    /* grid配置に伴う各要素のエリア割り当て */

    body.activity-permalink .activity-list li.activity-item .activity-avatar {

        grid-column: 1 !important;

        grid-row: 1 !important;

    }

    body.activity-permalink .activity-list li.activity-item .activity-header {

        grid-column: 2 !important;

        grid-row: 1 !important;

        display: flex !important;

        align-items: center !important; /* 内部のテキストも上下中央に */

    }

    body.activity-permalink .activity-list li.activity-item .activity-content {

        grid-column: 1 / span 2 !important; /* 本文と写真は横いっぱいに広げる */

        grid-row: 2 !important;

    }

    body.activity-permalink .activity-list li.activity-item .activity-comments {

        grid-column: 1 / span 2 !important;

        grid-row: 3 !important;

    }

}



/* お名前エリアの不要なパディングや余白を完全消滅ガード */

body.activity-permalink .activity-list li.activity-item .activity-header .activity-head,

body.activity-permalink .activity-list li.activity-item .activity-header .activity-header-text,

body.activity-permalink [class*="activity-header-text"] p,

body.activity-permalink [class*="activity-head"] p {

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1.2 !important;

}

/* ==========================================================================
   🐾 投稿詳細ページ（LP）専用：アバター余白調整 ＆ 動画URLの1列化 完全解決版
   ========================================================================= */

/* -------------------------------------------------------------------------
   ① 【アバター画像】と【名前テキスト】の間の間隔をあける (上下中央揃え維持)
   ------------------------------------------------------------------------- */
body.activity-permalink .activity-list li.activity-item {
    /* 既存のGridレイアウトの列幅を「60px（画像）」＋「16px（新しい隙間）」に再調整 */
    grid-template-columns: 60px 1fr !important; 
    align-items: center !important;
}

body.activity-permalink .activity-list li.activity-item .activity-header {
    /* アバターとの距離をさらに安全に確保するため、左側にマージンを追加 */
    margin-left: 16px !important; 
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 登録されているファーストリンク（お名前）の余計な隙間をリセット */
body.activity-permalink [class*="activity-header-text"] p a:first-of-type,
body.activity-permalink [class*="activity-head"] p a:first-of-type {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   🎬 2. 【大正解】タイムラインの構造を詳細ページでも完全再現するコード
   ========================================================================= */

/* ① 先ほど全体を壊してしまったdisplay: flexマニュアルを完全に解除して元の形に戻す */
body.activity-permalink .activity-inner,
body.activity-permalink .activity-header,
body.activity-permalink .activity-content {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

/* ② 「動画：」とURLが入っている「pタグ」自体をインライン（文字扱い）にする */
body.activity-permalink .activity-content .activity-inner p {
    display: inline !important;       /* 縦に改行が入るブロック属性を消滅させます */
    white-space: normal !important;
}

/* ③ 【最重要】「動画：」のすぐ右隣にURLをピタッと吸い付かせ、1列にする */
body.activity-permalink .activity-content .activity-inner p a {
    display: inline !important;       /* 完全に文字（テキスト）として横に並べる */
    margin-left: 6px !important;      /* 「動画：」の文字との間の適切なスキマ */
    
    /* タイムライン側と同じく、長いURLが枠を突き抜けないための自動折り返し対応 */
    white-space: normal !important;
    word-break: break-all !important; 
    vertical-align: baseline !important;
}

/* ==========================================================================
   🎬 3. 【最終仕上げ】本文（てｓｔ）の後ろで改行させ、動画URLを下の行に落とす
   ========================================================================= */

/* 投稿本文（写真確認、てｓｔなど）が入っている最初のpタグだけは、横に並ばせず1行で独立させる */
body.activity-permalink .activity-content .activity-inner p.nuisans-timeline-text,
body.activity-permalink .activity-content .activity-inner p:first-of-type {
    display: block !important;       /* inline（文字扱い）を上書きしてblock（1行独立）に戻す */
    width: 100% !important;
    margin-bottom: 12px !important;  /* 下の「動画：」との間に心地よい隙間をあける */
}

/* 「動画：」のテキストが入っている2番目以降のpタグだけを狙い撃ちしてインライン化する */
body.activity-permalink .activity-content .activity-inner p:not(:first-of-type) {
    display: inline !important;       /* 「動画：」は改行させず、URLとドッキングさせる */
}

/* 万が一、本文と「動画：」が1つのpタグ内に改行（br）で入っている場合の鉄壁セーフティ */
body.activity-permalink .activity-content .activity-inner br {
    display: block !important;
    content: "" !important;
    margin-top: 8px !important;
}

/* ==========================================================================
   🎬 【追加専用】タイムラインのフォント設定を、投稿詳細ページに完全同期する
   ========================================================================== */

/* -------------------------------------------------------------------------
   💻 ① 【PC環境（画面幅 768px 以上）】の完全コピー
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* タイムライン側で「18px」になっているお名前の設定を詳細ページに100%移植 */
    body.activity-permalink [class*="activity-header-text"] p a:first-of-type,
    body.activity-permalink [class*="activity-head"] p a:first-of-type,
    body.activity-permalink [class*="user-name"] {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-size: 18px !important;       
        font-weight: 800 !important;
    }

    /* タイムライン側で「16px」になっている本文・動画URLの設定を詳細ページに100%移植 */
    body.activity-permalink .activity-list li.activity-item .activity-inner p.nuisans-timeline-text,
    body.activity-permalink .activity-item .activity-content .activity-inner p,
    body.activity-permalink .activity-inner p a:not([class*="photo"]) {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-size: 16px !important;             
        font-weight: 500 !important;             
        line-height: 1.6 !important;
    }
}

/* -------------------------------------------------------------------------
   📱 ② 【スマホ環境（画面幅 767px 以下）】の完全コピー
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* タイムライン側で「16px」になっているお名前の設定を詳細ページに100% SP移植 */
    body.activity-permalink [class*="activity-header-text"] p a:first-of-type,
    body.activity-permalink [class*="activity-head"] p a:first-of-type,
    body.activity-permalink [class*="user-name"] {
        font-size: 16px !important;   
    }

    /* タイムライン側で「14px」になっている本文・動画URLの設定を詳細ページに100% SP移植 */
    body.activity-permalink .activity-list li.activity-item .activity-inner p.nuisans-timeline-text,
    body.activity-permalink .activity-item .activity-content .activity-inner p,
    body.activity-permalink .activity-inner p a:not([class*="photo"]) {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   🐾 投稿詳細ページ（LP）専用：アバター余白調整 ＆ 動画URLの1列化 完全解決版
   ========================================================================= */

/* -------------------------------------------------------------------------
   ① 【アバター画像】と【名前テキスト】の間の間隔をあける (上下中央揃え維持)
   ------------------------------------------------------------------------- */
body.activity-permalink .activity-list li.activity-item {
    /* 既存のGridレイアウトの列幅を「60px（画像）」＋「16px（新しい隙間）」に再調整 */
    grid-template-columns: 60px 1fr !important; 
    align-items: center !important;
}

body.activity-permalink .activity-list li.activity-item .activity-header {
    /* アバターとの距離をさらに安全に確保するため、左側にマージンを追加 */
    margin-left: 16px !important; 
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 登録されているファーストリンク（お名前）の余計な隙間をリセット */
body.activity-permalink [class*="activity-header-text"] p a:first-of-type,
body.activity-permalink [class*="activity-head"] p a:first-of-type {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   🎬 2. 【大正解】タイムラインの構造を詳細ページでも完全再現するコード
   ========================================================================= */

/* ① 先ほど全体を壊してしまったdisplay: flexマニュアルを完全に解除して元の形に戻す */
body.activity-permalink .activity-inner,
body.activity-permalink .activity-header,
body.activity-permalink .activity-content {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

/* ② 「動画：」とURLが入っている「pタグ」自体をインライン（文字扱い）にする */
body.activity-permalink .activity-content .activity-inner p {
    display: inline !important;       /* 縦に改行が入るブロック属性を消滅させます */
    white-space: normal !important;
}

/* ③ 【最重要】「動画：」のすぐ右隣にURLをピタッと吸い付かせ、1列にする */
body.activity-permalink .activity-content .activity-inner p a {
    display: inline !important;       /* 完全に文字（テキスト）として横に並べる */
    margin-left: 6px !important;      /* 「動画：」の文字との間の適切なスキマ */
    
    /* タイムライン側と同じく、長いURLが枠を突き抜けないための自動折り返し対応 */
    white-space: normal !important;
    word-break: break-all !important; 
    vertical-align: baseline !important;
}

/* ==========================================================================
   🎬 3. 【最終仕上げ】本文（てｓｔ）の後ろで改行させ、動画URLを下の行に落とす
   ========================================================================= */

/* 投稿本文（写真確認、てｓｔなど）が入っている最初のpタグだけは、横に並ばせず1行で独立させる */
body.activity-permalink .activity-content .activity-inner p.nuisans-timeline-text,
body.activity-permalink .activity-content .activity-inner p:first-of-type {
    display: block !important;       /* inline（文字扱い）を上書きしてblock（1行独立）に戻す */
    width: 100% !important;
    margin-bottom: 12px !important;  /* 下の「動画：」との間に心地よい隙間をあける */
}

/* 「動画：」のテキストが入っている2番目以降のpタグだけを狙い撃ちしてインライン化する */
body.activity-permalink .activity-content .activity-inner p:not(:first-of-type) {
    display: inline !important;       /* 「動画：」は改行させず、URLとドッキングさせる */
}

/* 万が一、本文と「動画：」が1つのpタグ内に改行（br）で入っている場合の鉄壁セーフティ */
body.activity-permalink .activity-content .activity-inner br {
    display: block !important;
    content: "" !important;
    margin-top: 8px !important;
}

/* ==========================================================================
   🎬 【追加専用】タイムラインのフォント設定を、投稿詳細ページに完全同期する
   ========================================================================== */

/* -------------------------------------------------------------------------
   💻 ① 【PC環境（画面幅 768px 以上）】の完全コピー
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* タイムライン側で「18px」になっているお名前の設定を詳細ページに100%移植 */
    body.activity-permalink [class*="activity-header-text"] p a:first-of-type,
    body.activity-permalink [class*="activity-head"] p a:first-of-type,
    body.activity-permalink [class*="user-name"] {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-size: 18px !important;       
        font-weight: 800 !important;
    }

    /* タイムライン側で「16px」になっている本文・動画URLの設定を詳細ページに100%移植 */
    body.activity-permalink .activity-list li.activity-item .activity-inner p.nuisans-timeline-text,
    body.activity-permalink .activity-item .activity-content .activity-inner p,
    body.activity-permalink .activity-inner p a:not([class*="photo"]) {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-size: 16px !important;             
        font-weight: 500 !important;             
        line-height: 1.6 !important;
    }
}

/* -------------------------------------------------------------------------
   📱 ② 【スマホ環境（画面幅 767px 以下）】の完全コピー
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* タイムライン側で「16px」になっているお名前の設定を詳細ページに100% SP移植 */
    body.activity-permalink [class*="activity-header-text"] p a:first-of-type,
    body.activity-permalink [class*="activity-head"] p a:first-of-type,
    body.activity-permalink [class*="user-name"] {
        font-size: 16px !important;   
    }

    /* タイムライン側で「14px」になっている本文・動画URLの設定を詳細ページに100% SP移植 */
    body.activity-permalink .activity-list li.activity-item .activity-inner p.nuisans-timeline-text,
    body.activity-permalink .activity-item .activity-content .activity-inner p,
    body.activity-permalink .activity-inner p a:not([class*="photo"]) {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   🧼 【最終決着】タイムライン ＆ 詳細ページ：文字サイズ・アイコン色を完全同期
   ========================================================================== */

/* 1. タイムライン（directory.activity）と詳細ページ（activity-permalink）のボタンエリアを同時に指定 */
body.directory.activity .activity-item-footer a,
body.directory.activity .activity-item-footer button,
body.directory.activity .bb-activity-actions a,
body.directory.activity .bb-activity-actions a span,
body.activity-permalink .activity-item-footer a,
body.activity-permalink .activity-item-footer button,
body.activity-permalink .bb-activity-actions a,
body.activity-permalink .bb-activity-actions a span,
body.activity-permalink .comment-reply-link {
    /* 🎯 2つのページ共通で、フォントサイズを絶対に「14px」へ強制上書き */
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 14px !important;     
    font-weight: 600 !important;
    line-height: 1.5 !important;
    
    /* 🎯 文字の色をタイムライン基準の「マイルドグレー」に完全固定 */
    color: #999999 !important;      
    text-decoration: none !important;
    
    /* 変なカプセル枠や背景、パディングのバグをここで一斉に消滅リセット */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. 両方のページのアイコン（親指・吹き出し等、svgやiタグ、pathまで）の色を一括でマイルドグレーに同期 */
body.directory.activity .activity-item-footer i,
body.directory.activity .activity-item-footer svg,
body.directory.activity .activity-item-footer path,
body.activity-permalink .activity-item-footer i,
body.activity-permalink .activity-item-footer svg,
body.activity-permalink .activity-item-footer path {
    font-size: 14px !important;     /* アイコンのサイズも14pxに固定 */
    color: #999999 !important;      /* アイコンフォントの色 */
    fill: #999999 !important;       /* SVGアイコンの塗りつぶし色 */
    
    /* アイコン単体への非表示命令を完全に解除して復活させる */
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. 自分が「推した」後のピンク色への変化（文字とアイコンの色だけが変わる仕様）を両ページに適用 */
body.directory.activity .bb-activity-actions .activity-reactions.reacted a,
body.directory.activity .bb-activity-actions .activity-reactions.reacted i,
body.activity-permalink .bb-activity-actions .activity-reactions.reacted a,
body.activity-permalink .bb-activity-actions .activity-reactions.reacted a span,
body.activity-permalink .bb-activity-actions .activity-reactions.reacted i {
    color: #ff66a3 !important;      /* 推した瞬間、ピンクに変身 */
    fill: #ff66a3 !important;
    background: transparent !important;
    border: none !important;
}

/* ==========================================================================
   🧼 【最終解決】詳細ページ：ズレている画像エリア（.activity-content）の左右均等化
   ========================================================================= */

/* ① 投稿詳細ページ（activity-permalink）のカード枠全体をブロック構造に固定 */
body.activity-permalink .activity-list li.activity-item,
body.activity-permalink li.activity-item {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* ② 【核心】右にズレていた原因（左パディング/左マージン）を完全に0にして左に引っ張り戻す */
body.activity-permalink .activity-list li.activity-item .activity-content,
body.activity-permalink .activity-item .activity-content {
    display: block !important;
    clear: both !important;        /* 上のアバター・名前との回り込みを綺麗に遮断 */
    width: 100% !important;
    max-width: 100% !important;
    
    /* 🎯 ここが最重要：テーマが勝手につける左側の巨大な余白を完全に破壊します */
    margin-left: 0 !important;     
    margin-right: 0 !important;
    padding-left: 0 !important;    
    padding-right: 0 !important;
    
    margin-top: 16px !important;   /* お名前エリアとの間の心地よい隙間 */
    box-sizing: border-box !important;
}

/* ③ 内部のテキストや画像をカードの幅（100%）にピタッと合わせる */
body.activity-permalink .activity-content .activity-inner,
body.activity-permalink .activity-content .activity-inner p,
body.activity-permalink .activity-content .activity-inner img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ④ 投稿本文テキスト（テスト）と下の画像との余白（24px）を完全固定 */
body.activity-permalink .activity-content .activity-inner p.nuisans-timeline-text,
body.activity-permalink .activity-item .activity-content .activity-inner p:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 24px !important; /* 下の画像との間にタイムラインと同じ24px */
    padding: 0 !important;
}

/* ==========================================================================
   🧼 【最終決着】詳細ページ：推し・コメントボタン＆カウント文字を完全同期
   ========================================================================= */

/* 1. 【推し・コメントボタン】文字サイズ14px・マイルドグレー・丸ゴシックを適用 */
body.activity-permalink .activity-item-footer a,
body.activity-permalink .activity-item-footer button,
body.activity-permalink .bb-activity-actions a,
body.activity-permalink .bb-activity-actions a span,
body.activity-permalink .comment-reply-link {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 14px !important;              /* 🎯 タイムラインと同じ14px */
    font-weight: 700 !important;             /* ほどよい太文字 */
    line-height: 1.5 !important;
    color: #999999 !important;               /* 🎯 タイムライン共通のマイルドグレー */
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. 【2 Comments（カウント数）】ボタンと混ざらないよう、タイムライン側のスタイルに分離同期 */
body.activity-permalink .activity-meta,
body.activity-permalink .activity-meta a,
body.activity-permalink .activity-meta span,
body.activity-permalink [class*="comment-count"] {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 14px !important;              /* 🎯 タイムラインと同じ14px */
    font-weight: 500 !important;             /* カウント数は少し細め */
    color: #4A4A4A !important;               /* 🎯 タイムラインと同じ落ち着いたダークグレー（黒系） */
    text-decoration: none !important;
}

/* 3. 【アイコン】詳細ページのアイコンをタイムラインのマイルドグレーに統一 */
body.activity-permalink .activity-item-footer i,
body.activity-permalink .activity-item-footer svg,
body.activity-permalink .activity-item-footer path,
body.activity-permalink .bb-activity-actions i,
body.activity-permalink .bb-activity-actions svg {
    font-size: 14px !important;
    color: #999999 !important;
    fill: #999999 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. 【推した時だけピンク】自分がアクションを起こした瞬間だけ点灯する既存ルールを徹底保護 */
body.activity-permalink .bb-activity-actions .activity-reactions.reacted a,
body.activity-permalink .bb-activity-actions .activity-reactions.reacted a span,
body.activity-permalink .bb-activity-actions .activity-reactions.reacted i,
body.activity-permalink .bb-activity-actions .activity-reactions.reacted svg {
    color: #ff66a3 !important;              /* 🎯 自分が推した時だけ可愛くピンク化 */
    fill: #ff66a3 !important;
}

/* 5. 【フッターレイアウト】ボタンたちを横一列に綺麗に整列 */
body.activity-permalink .activity-item-footer,
body.activity-permalink .bb-activity-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;                    /* ボタン同士の間隔 */
    margin-top: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f2f2f2 !important;
}

/* ==========================================================================
   🧼 【構造正常化】詳細ページ：アバター・名前の横並び復元 ＆ 本文位置の完全修正
   ========================================================================= */

/* 1. 【カード全体】古い回り込み（float）を綺麗にクリアするための土台化 */
body.activity-permalink .activity-list li.activity-item,
body.activity-permalink li.activity-item {
    display: block !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 2. 【アバター画像】左側に浮かせ、右側に16pxのディスタンスを確保 */
body.activity-permalink #buddypress ul.activity-list li.activity-item .activity-avatar,
body.activity-permalink .activity-list li.activity-item .activity-avatar {
    display: block !important;
    float: left !important;                     /* 🎯 タイムラインと同じ王道の左固定 */
    width: 60px !important;
    height: 60px !important;
    margin: 0 16px 0 0 !important;              /* お名前テキストとの間の隙間 */
    padding: 0 !important;
}

/* 3. 【お名前ヘッダー】アバターの右隣のスペースにピッタリと滑り込ませる */
body.activity-permalink #buddypress ul.activity-list li.activity-item .activity-header,
body.activity-permalink .activity-list li.activity-item .activity-header {
    display: block !important;
    float: none !important;
    overflow: hidden !important;                /* 🎯 これでアバターの右側に綺麗に回り込みます */
    margin: 0 !important;
    padding-top: 18px !important;               /* お名前の高さをタイムラインのベスト位置に同期 */
    height: 60px !important;                    /* アバターの高さ（60px）と完全に一致させて縦中央を維持 */
    box-sizing: border-box !important;
}

/* 4. 【本文・画像エリア】アバターと名前の回り込み（float）をここで「完全に切って」真下に下ろす */
body.activity-permalink .activity-list li.activity-item .activity-content,
body.activity-permalink .activity-item .activity-content {
    display: block !important;
    clear: both !important;                     /* 🎯 これが最重要！アバターたちの真下に強制的に落とします */
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 0 !important;              /* お名前エリアの下側に16pxの心地よい隙間 */
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 5. 【本文テキスト（テスト）】1行独立（block化）させて画像との間に24pxの隙間をキープ */
body.activity-permalink .activity-content .activity-inner p.nuisans-timeline-text,
body.activity-permalink .activity-item .activity-content .activity-inner p:first-of-type {
    display: block !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;              /* 下の画像との間にタイムラインと同じ24px */
    padding: 0 !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    color: #4A4A4A !important;
}

/* ==========================================================================
   🧼 【最終解決】URL文字列と「動画：」のフォントサイズを両ページで完全に揃える
   ========================================================================== */

/* 💻 ① PC環境（画面幅 768px 以上）でサイズを完全に同一ロック */
@media (min-width: 768px) {
    /* タイムラインページ（一覧）も、投稿詳細ページも、全部まとめて【16px・太さ500】に上書き固定 */
    body.directory.activity .activity-inner p.nuisans-timeline-text,
    body.directory.activity .activity-inner .nuisans-video-url-block,
    body.directory.activity .activity-inner p a,
    body.activity-permalink .activity-inner p.nuisans-timeline-text,
    body.activity-permalink .activity-inner .nuisans-video-url-block,
    body.activity-permalink .activity-inner p a {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-size: 16px !important;    /* 🎯 PC時は2つのページとも絶対に16px */
        font-weight: 500 !important;   /* 🎯 太さも500（標準）に統一 */
    }
}

/* 📱 ② スマホ環境（画面幅 767px 以下）でサイズを完全に同一ロック */
@media (max-width: 767px) {
    /* スマホ時にタイムラインが14pxに縮むなら、詳細ページも道連れにして確実に【14px・太さ500】へ揃える */
    body.directory.activity .activity-inner p.nuisans-timeline-text,
    body.directory.activity .activity-inner .nuisans-video-url-block,
    body.directory.activity .activity-inner p a,
    body.activity-permalink .activity-inner p.nuisans-timeline-text,
    body.activity-permalink .activity-inner .nuisans-video-url-block,
    body.activity-permalink .activity-inner p a {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-size: 14px !important;    /* 🎯 巻き込み事故が起きても大丈夫なように、両ページとも14pxで強制固定 */
        font-weight: 500 !important;   /* 🎯 太さ500に統一 */
    }
}

/* ==========================================================================
   🧼 【タイムライン＆詳細対応】長い名前を「さんの投稿」の手前で確実に改行させる命令
   ========================================================================== */

/* 1. 🎯 【最重要】「名前」「さんの投稿」「時間」を包む p タグ自体を縦並び（block）に変形 */
body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p,
body.directory.activity .activity-list li.activity-item .activity-header .activity-head p,
body.activity-permalink .activity-list li.activity-item .activity-header .activity-header-text p,
body.activity-permalink .activity-list li.activity-item .activity-header .activity-head p,
[class*="activity-head"] p {
    display: block !important;       /* 🎯 一列突っ張り棒を破壊し、ブロック構造に変えます */
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 90px !important;  /* 🎯 右端の限定バッジや「...」に絶対に触れさせない鉄壁の壁 */
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    float: none !important;
}

/* 2. 🎯 【お名前リンク】名前だけを1行独立（block）にすることで、後ろの文字を強制的に2行目へ落とす */
body.directory.activity [class*="activity-header-text"] p a:first-of-type,
body.directory.activity [class*="activity-head"] p a:first-of-type,
body.activity-permalink [class*="activity-header-text"] p a:first-of-type,
body.activity-permalink [class*="activity-head"] p a:first-of-type,
.activity-list li.activity-item .activity-header .activity-header-text p a:first-child {
    display: block !important;       /* 🎯 名前だけで1行を丸ごと占領させます */
    width: auto !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    word-break: break-all !important; /* スマホなどで名前が長すぎても自動改行 */
    margin: 0 0 4px 0 !important;    /* 2行目に落ちる「さんの投稿」との間の心地よい隙間 */
}

/* 3. 2行目に落とされた「〜さんの投稿」の文字テキストの配置を初期化 */
body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p,
body.directory.activity .activity-list li.activity-item .activity-header .activity-head p,
body.activity-permalink .activity-list li.activity-item .activity-header .activity-header-text p,
body.activity-permalink .activity-list li.activity-item .activity-header .activity-head p {
    color: #444444 !important;       /* 共通マイルド黒 */
}

/* 4. 2行目に一緒に並ぶ「時間（ago）」の左マージンが詰まりすぎないように調整 */
body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p span.time-since,
body.directory.activity .activity-list li.activity-item .activity-header .time-since,
body.activity-permalink .activity-list li.activity-item .activity-header .activity-header-text p span.time-since,
body.activity-permalink .activity-list li.activity-item .activity-header .time-since {
    display: inline-block !important;
    margin-left: 6px !important;     /* 「〜さんの投稿」との間の適切な隙間 */
}

/* 📱 スマホ環境（幅767px以下）の右側ガードセーフティ */
@media (max-width: 767px) {
    body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p,
    body.directory.activity .activity-list li.activity-item .activity-header .activity-head p,
    body.activity-permalink .activity-list li.activity-item .activity-header .activity-header-text p,
    body.activity-permalink .activity-list li.activity-item .activity-header .activity-head p {
        padding-right: 80px !important; /* スマホの画面幅に合わせて右端の壁を調整 */
    }
}

/* ==========================================================================
   🧼 【詳細ページ微調整】「限定」アイコンを三点リーダー（...）に【限界まで】近づける
   ========================================================================== */

/* 投稿詳細ページ（activity-permalink）のヘッダーを基準にする */
body.activity-permalink .activity-list li.activity-item .activity-header,
body.activity-permalink .activity-item .activity-header {
    position: relative !important;
}

/* 🎯 「限定」バッジの位置を、三点リーダー（...）のすぐ左隣（right: 40px）へ限界まで接近 */
body.activity-permalink .activity-list li.activity-item .activity-header .nui-limited-badge,
body.activity-permalink #buddypress ul.activity-list li.activity-item .activity-header .nui-limited-badge,
body.activity-permalink .nui-limited-badge {
    position: absolute !important;
    top: 17px !important;           /* 綺麗に合っていた高さを完全に固定 */
    right: 40px !important;         /* 🎯 44pxからさらに縮めて「40px」に！ギリギリまで近づけました */
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    display: inline-block !important;
}

/* 📱 スマホ環境（幅767px以下）の距離も限界までタイトに微調整 */
@media (max-width: 767px) {
    body.activity-permalink .activity-list li.activity-item .activity-header .nui-limited-badge,
    body.activity-permalink .nui-limited-badge {
        top: 10px !important;       /* スマホの綺麗に合っていた高さ */
        right: 32px !important;     /* 🎯 スマホ時も「32px」に縮めて限界まで密着させます */
    }
}

/* ==========================================================================
   🧼 【タイムライン微調整】元の綺麗な形をベースに、アバターを引き上げて縦中央揃えに
   ========================================================================== */

/* 1. 🎯 【最重要】アバターだけを元の位置から少し上に引き上げて、右側の文字の塊とド真ん中で揃える */
body.directory.activity #buddypress ul.activity-list li.activity-item .activity-avatar,
body.directory.activity .activity-list li.activity-item .activity-avatar {
    padding-top: 14px !important;    /* 🎯 24pxから14pxに狭めて、アバターを少し上に引っ張り上げます */
    margin-right: 16px !important;   /* お名前との間の適切な距離 */
    float: left !important;          /* 元の綺麗だった回り込み構造を完全にキープ */
    box-sizing: border-box !important;
}

/* 2. お名前ヘッダー側は一番良かった「上の余白24px」をしっかり維持し、カード内の天井バグをガード */
body.directory.activity #buddypress ul.activity-list li.activity-item .activity-header,
body.directory.activity .activity-list li.activity-item .activity-header {
    margin-top: 0 !important;
    padding-top: 24px !important;    /* 🎯 ここを24pxで固定しておくことで、カード全体の上の余白が美しく保たれます */
    box-sizing: border-box !important;
}

/* 📱 スマホ環境（幅767px以下）の高さも見た目重視でバランス調整 */
@media (max-width: 767px) {
    body.directory.activity .activity-list li.activity-item .activity-avatar {
        padding-top: 10px !important; /* スマホの文字の高さに合わせてアバターを引き上げ */
    }
    body.directory.activity .activity-list li.activity-item .activity-header {
        padding-top: 16px !important; /* スマホ時のカードの天井の余白を16pxに */
    }
}

/* ==========================================================================
   🧼 【タイムライン最終微調整】お名前と「さんの投稿（2行目）」の隙間を縮める
   ========================================================================== */

/* 1. 🎯 1行目のお名前の下マージンを「0」にして、2行目を上に引き寄せる */
body.directory.activity [class*="activity-header-text"] p a:first-of-type,
body.directory.activity [class*="activity-head"] p a:first-of-type,
body.activity-permalink [class*="activity-header-text"] p a:first-of-type,
body.activity-permalink [class*="activity-head"] p a:first-of-type,
.activity-list li.activity-item .activity-header .activity-header-text p a:first-child {
    margin-bottom: 0px !important;    /* 🎯 4pxあった隙間を0pxにしてギュッと近づけます */
}

/* 2. 🎯 文字自体の持っている「上下の座布団（行間）」を少しだけスリムにしてさらに接近させる */
body.directory.activity .activity-list li.activity-item .activity-header .activity-header-text p,
body.directory.activity .activity-list li.activity-item .activity-header .activity-head p,
body.activity-permalink .activity-list li.activity-item .activity-header .activity-header-text p,
body.activity-permalink .activity-list li.activity-item .activity-header .activity-head p,
[class*="activity-head"] p {
    line-height: 1.3 !important;      /* 🎯 1.5から「1.3」に引き締め、2行の間隔を心地よく狭めます */
}

/* ==========================================================================
   🧼 【改行位置完全同期】詳細ページのカード有効幅をタイムラインと100%一致させる
   ========================================================================== */

/* 📱 スマホ環境（幅767px以下）における詳細ページの箱のフチをタイムラインとミリ単位で同期 */
@media (max-width: 767px) {
    /* 詳細ページの白いカード枠の左右パディングを、タイムライン（20px）と完全一致させる */
    body.activity-permalink .activity-list li.activity-item,
    body.activity-permalink li.activity-item {
        padding: 20px 20px 0px 20px !important; /* 🎯 左右をタイムラインと同じ20pxに固定して幅を完全に同期 */
        box-sizing: border-box !important;
    }

    /* URLや文章が入っている中身のコンテナの余白バグを完全にゼロ化 */
    body.activity-permalink .activity-list li.activity-item .activity-content,
    body.activity-permalink .activity-item .activity-content,
    body.activity-permalink .activity-content .activity-inner {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   🧼 【追加】タイムライン ＆ 詳細ページ：動画URLブロック・デザイン完全同期
   ========================================================================== */

/* 💻 1. PC環境（画面幅 768px 以上） */
@media (min-width: 768px) {
    /* タイムライン（一覧）と詳細ページ（個別）の動画URL、および「動画：」のテキストサイズを16pxに統一 */
    body.directory.activity .activity-inner .nuisans-video-url-block,
    body.directory.activity .activity-inner p a:not([class*="photo"]),
    body.activity-permalink .activity-content .activity-inner p,
    body.activity-permalink .activity-content .activity-inner p a:not([class*="photo"]) {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-size: 16px !important;    /* 🎯 PCサイズを16pxに固定 */
        font-weight: 500 !important;   /* 🎯 太さを500（中太）に統一 */
        line-height: 1.6 !important;
    }
}

/* 📱 2. スマホ環境（画面幅 767px 以下） */
@media (max-width: 767px) {
    /* タイムライン（一覧）と詳細ページ（個別）の動画URL、および「動画：」のテキストサイズを14pxに統一 */
    body.directory.activity .activity-inner .nuisans-video-url-block,
    body.directory.activity .activity-inner p a:not([class*="photo"]),
    body.activity-permalink .activity-content .activity-inner p,
    body.activity-permalink .activity-content .activity-inner p a:not([class*="photo"]) {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-size: 14px !important;    /* 🎯 スマホサイズを14pxに固定 */
        font-weight: 500 !important;   /* 🎯 太さを500（中太）に統一 */
        line-height: 1.6 !important;
    }
}

/* ==========================================================================
   🔔 グローバルメニュー用：未読通知の黄色丸バッジ（件数なし）デザイン【一回り拡大】
   ========================================================================= */

/* 初期状態（通知がない時）は黄色い丸を完全に隠しておく */
.nui-custom-dot {
    display: none !important;
}

/* JavaScriptが「通知あり」を検知した時だけ、この可愛い黄色い丸を出現させる */
.nui-custom-dot.has-notification {
    display: inline-block !important;
    background-color: #ffb800 !important;         /* 画面内通知とお揃いの黄色 */
    border-radius: 50% !important;                /* 完全な正円 */
    
    /* 🎯 基準①：サイズを 8px から 「12px」 に一回り大きくして存在感をアップ！ */
    width: 12px !important;                       
    height: 12px !important;
    
    /* 🎯 基準②：大きくなった分、文字とのバランスをとるためにマージンと位置を最適化 */
    margin-left: 8px !important;                  /* 文字との隙間を少し広げる */
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important;                         /* 文字の高さ（中央）にピッタリ合わせる微調整 */
    
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important; /* 影も少しだけくっきりさせて引き締める */
}

/* ==========================================================================
   🧼 ぬいさんず専用：WEB画面内ポップアップ（トースト通知）デザイン完全カスタム【●救出・最終版】
   ========================================================================= */

/* -------------------------------------------------------------------------
   ③ SP（スマートフォン）環境：●を出すためのデータを裏で生かしつつ、トーストの白い箱だけを非表示に
   ------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    /* 🎯 【重要】大元の枠を「透明（opacity:0）」かつ「クリック不可（pointer-events:none）」にして裏側に隠します。
       これにより、JavaScriptは通知の数を数えられるため、スマホフッターの●は正しく点灯します！ */
    .bb-onscreen-notification,
    .bb-onscreen-notifications,
    div[class*="onscreen-notification"] {
        position: absolute !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -9999 !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
    }

    /* スマホ画面でトースト通知の白いカード（li）が浮き出てしまうのを強制シャットアウト */
    .bb-onscreen-notification .notification-list li,
    body .bb-onscreen-notification .notification-list li[id*="wp-admin-bar-notification-"] {
        display: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* -------------------------------------------------------------------------
   💻 PC環境用のクリーンアップ・レイアウト（画面幅 768px 以上のみで安全に実行）
   ------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {

    /* ① 通知の親ボックス（外枠）：丸みとシャドーを美しく配備 */
    .bb-onscreen-notification .notification-list li,
    body .bb-onscreen-notification .notification-list li[id*="wp-admin-bar-notification-"] {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        background-color: #ffffff !important;         /* 背景は真っ白 */
        border: none !important;                      /* 周りの線を完全に消滅 */
        border-radius: 18px !important;               /* ぬいさんずらしい丸み */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; /* 浮き出るシャドー */
        box-sizing: border-box !important;
        position: relative !important;                /* すべての要素の配置基準 */
        margin-bottom: 14px !important;
        width: 340px !important;                      /* 横幅固定 */
        min-height: 84px !important;                  /* 縦幅の最低ライン */
        padding: 16px 46px 16px 84px !important;      /* 左右上下の余白（左にアバター分のスペース） */
        display: block !important;
    }

    /* ② 左側の「公式LINEグリーン（#06c755）」のアクセント縦線 */
    .bb-onscreen-notification .notification-list li:before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 6px !important;
        background-color: #06c755 !important;
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
        display: block !important;
    }

    /* 🎯 アバター枠：左側の余白エリアに綺麗に固定 */
    .bb-onscreen-notification .notification-list .notification-avatar {
        position: absolute !important;
        top: 16px !important;
        left: 18px !important;
        width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    .bb-onscreen-notification .notification-list .notification-avatar a {
        display: block !important;
        width: 52px !important;
        height: 52px !important;
    }

    /* アバター画像本体：52px完全正円の維持 */
    .bb-onscreen-notification .notification-list .notification-avatar img {
        width: 52px !important;
        height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
        border: none !important;
        outline: 2px solid #06C755 !important;        /* 綺麗な外囲み緑枠 */
        outline-offset: -2px !important;
        box-sizing: border-box !important;
    }

    /* アバター枠内にある不要なアイコン等（古いカメラマーク等の残骸）のみを非表示 */
    .bb-onscreen-notification .notification-list .notification-avatar i:not(.bp-close-notification),
    .bb-onscreen-notification .notification-list .notification-avatar span:not(.bp-close-notification) {
        display: none !important;
        visibility: hidden !important;
    }

    /* テキストエリア全体 */
    .bb-onscreen-notification .notification-list .notification-content {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* ④ テキストリンク・テキスト全体の基本スタイル（グレー #4A4A4A に変更） */
    .bb-onscreen-notification .notification-list .notification-content a,
    .bb-onscreen-notification .notification-list .notification-content .bb-full-link a,
    .bb-onscreen-notification .notification-list .notification-content {
        font-family: 'M PLUS Rounded 1c', sans-serif !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
        color: #4A4A4A !important;                    /* 基本テキストはグレーに */
        font-weight: 700 !important;                  /* ぬいさんずらしい太文字 */
        text-indent: 0 !important;
    }

    /* ④ なまえ（最初のリンク）だけを緑色（#06c755）にする */
    .bb-onscreen-notification .notification-list .notification-content a:first-of-type,
    .bb-onscreen-notification .notification-list .notification-content .bb-full-link a:first-of-type {
        color: #06c755 !important;                    /* なまえ部分だけ緑色 */
        display: inline !important;
    }

    /* ② 新着の「Just now / ○ minutes ago」などの時間テキスト：表示制限を回避して救出 */
    .bb-onscreen-notification .notification-list li span.posted,
    .bb-onscreen-notification .notification-list li .posted {
        font-size: 11px !important;
        color: #999999 !important;
        margin-top: 6px !important;
        font-weight: 500 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* 🎯 ① 本物の右上の「×」閉じるボタン：親のliを基準に右上に超強力固定 */
    .bb-onscreen-notification .notification-list li .bp-close-notification,
    .bb-onscreen-notification .notification-list li a.bp-close-notification,
    body .bb-onscreen-notification .notification-list li a[class*="close"] {
        position: absolute !important;
        top: 14px !important;                         /* 上からの距離 */
        right: 14px !important;                       /* 右からの距離 */
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        color: #bbbbbb !important;
        font-size: 16px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        text-decoration: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 16px !important;
        height: 16px !important;
        z-index: 99999 !important;
    }
    
    .bb-onscreen-notification .notification-list li .bp-close-notification:hover {
        color: #ff66a3 !important;                     /* ホバー時は推しピンクに */
    }

    /* 不要なClearテキストエリアを非表示消滅 */
    .bb-remove-all-notification {
        display: none !important;
    }
}

/* ==========================================================================
   🧼 【完全修正・安全版】本物のコメントボタンのみを安全に非表示化する記述
   ========================================================================= */

/* 1. 🎯 JavaScriptのPOPUP（シアター）を見張っている「本物のコメントボタン」だけを消滅させる */
.activity-list > li.activity-item .activity-state-reactions a.activity-state-comments,
.activity-list > li.activity-item a.activity-state-comments-has-comments,
.activity-list > li.activity-item [class*="activity-state-comments"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ⚠️ ズレや消滅の原因になっていた、以下の古い命令は完全に消去（リセット）されました：
   - 時間リンク（time-since）をカード全体に広げる position: absolute 指定
   - 文字を透明化していた text-indent: -9999px 指定
   - 重なりの原因になっていた .activity-state-reactions:after の擬似テキスト指定
*/

/* ==========================================================================
   🧼 【安全追記】マイルーム特有のテーマのバグだけをピンポイントで打ち消すシールド
   ========================================================================= */

@media screen and (min-width: 768px) {
    
    /* 🎯 1. マイルームの時だけ勝手に出てくる「左側の邪魔な青線」を完全に消し去る */
    li[id*="wp-admin-bar-notification-"] {
        border-left: none !important;
    }

    /* 🎯 2. お名前（最初のリンク）以外まで勝手に緑色になってしまうテーマのバグを、いつものマイルド黒に引き戻す */
    li[id*="wp-admin-bar-notification-"] .notification-content,
    li[id*="wp-admin-bar-notification-"] .notification-content a {
        color: #4A4A4A !important; /* ぬいさんず共通のマイルド黒 */
    }

    /* 🎯 3. なまえ（最初のリンク）だけは公式グリーンを100%死守させる */
    li[id*="wp-admin-bar-notification-"] .notification-content a:first-of-type {
        color: #06c755 !important; /* 公式グリーン */
    }

    /* 🎯 4. ×ボタンが2重にブレて重なる原因になっている「テーマの予備テキスト」を画面から物理的に消滅させる */
    li[id*="wp-admin-bar-notification-"] > a.bp-close-notification + a,
    li[id*="wp-admin-bar-notification-"] .notification-content + a {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* ==========================================================================

   👥 ぬいさんず専用：「ぬいさんをさがす」画面デザイン【完全復元リペア・最終決着版】

   ========================================================================= */



/* -------------------------------------------------------------------------

   ① 画面全体の背景白化 ＆ 大元の箱の全幅解放

   ------------------------------------------------------------------------- */

body.directory.members,

body.directory.members #page,

body.directory.members #content,

body.directory.members .buddypress-wrap,

body.directory.members #item-body {

    background: #ffffff !important;

    background-color: #ffffff !important;

    max-width: 100% !important;

    width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

    box-shadow: none !important;

}



body.directory.members #buddypress,

body.directory.members .buddypress-wrap {

    max-width: 100% !important;

    width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

}



/* 【上下ブロック入れ替えロジック】 */

body.directory.members .members-directory-container {

    display: flex !important;

    flex-direction: column !important;

    max-width: 600px !important;

    width: 100% !important;

    margin: 0 auto !important;

    box-sizing: border-box !important;

}



/* 🎯 ③ 検索バーブロックを最上部へ */

body.directory.members .bb-subnav-filters-container-main,

body.directory.members .bb-subnav-filters-search {

    order: 1 !important;

    margin-top: 0 !important;

    margin-bottom: 5px !important;

}



/* 🎯 「みんな・ともだち」タブブロックを【2番目（検索の下）】へ配置 */

body.directory.members .members-type-navs,

body.directory.members .dir-navs {

    order: 2 !important;

    margin-top: 10px !important;

    margin-bottom: 10px !important;

}



/* 🎯 【件数テキスト】 */

body.directory.members .bb-item-count,

body.directory.members div.bb-item-count {

    order: 3 !important;

    max-width: 600px !important;

    width: 100% !important;

    margin: 5px auto !important;

    padding: 0 15px !important;

    box-sizing: border-box !important;

    text-align: left !important;

    font-family: 'M PLUS Rounded 1c', sans-serif !important;

    font-weight: 500 !important;

    color: #4A4A4A !important;

}



/* 白いカード一覧を一番下（4番目）に固定 ＆ 最下部にマージン90px確保 */

body.directory.members .screen-content.members-directory-content {

    order: 4 !important;

    max-width: 600px !important;

    width: 100% !important;

    margin: 0 auto 90px auto !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

}



/* -------------------------------------------------------------------------

   ② 🔍 ④ 検索バーの「長さ」と「位置」を完全同期

   ------------------------------------------------------------------------- */

body.directory.members .members-directory-wrapper .subnav-filters,

body.directory.members .dir-search,

body.directory.members .subnav-search,

body.directory.members .bb-subnav-filters-container-main {

    max-width: 600px !important;

    width: 100% !important;

    padding-left: 15px !important;

    padding-right: 15px !important;

    box-sizing: border-box !important;

    border: none !important;

    box-shadow: none !important;

}



body.directory.members .subnav-filters.filters,

body.directory.members #subnav-filters,

body.directory.members .bb-subnav-filters-search {

    display: flex !important;

    flex-direction: row !important;

    justify-content: flex-start !important;

    align-items: center !important;

    width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

    border: none !important;

    box-shadow: none !important;

}

/* ==========================================================================
   🔍 【検索バー位置】タイムラインと1px単位・横位置完全同期化 ＆ 枠線完全消滅シールド（最終確定版）
   ========================================================================= */

/* ① 検索バーを包む大きな親ボックス：横幅600px・パディング19pxの完璧な位置を完全固定 */
body.directory.members .bb-subnav-filters-container-main,
body.directory.members .bb-subnav-filters-search {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;  /* 右詰め（end）の神位置を絶対維持 */
    align-items: center !important;
    
    max-width: 600px !important;            
    width: 100% !important;
    margin: 10px auto 0 auto !important;    
    padding: 0 19px 0 15px !important;     /* 綺麗に揃っていたパディングを完全キープ */
    
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}

/* ② 🔍 【PC環境（横幅768px以上）】：検索バー全体のサイズを「240px」に固定 */
body.directory.members .subnav-search,
body.directory.members .div-search.members-search,
body.directory.members .dir-search.members-search,
body.directory.members .bp-search {
    width: 240px !important;
    max-width: 240px !important;
    min-width: 240px !important;
    margin: 0 !important; 
    padding: 0 !important;
    float: none !important;
    display: inline-flex !important;
}

/* ③ 【真犯人を撃破：div-search の通常・ホバー線完全消滅】 */
body.directory.members .div-search,
body.directory.members .div-search.members-search,
body.directory.members .div-search:hover,
body.directory.members .div-search.members-search:hover,
body.directory.members .dir-search,
body.directory.members .dir-search:hover,
body.directory.members form,
body.directory.members form:hover,
body.directory.members .subnav-filters-modal,
body.directory.members .subnav-filters-modal:hover {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;   
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ④ 🔍 【PC環境（横幅768px以上）】：検索バー入力欄本体の長さを「240px」に固定 */
body.directory.members input[type="search"],
body.directory.members #dir-members-search {
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    width: 240px !important;
    max-width: 240px !important;
    min-width: 240px !important;
    height: 40px !important;
    padding: 0 35px 0 40px !important;
    
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    
    border-radius: 20px !important;
    background-color: #06c755 !important;
    color: #FFFFFF !important; 
    box-sizing: border-box !important;
}

/* 🎯 マウスオーバー時・クリック時もインプット単体への線の復活を完全防御 */
body.directory.members #dir-members-search:hover,
body.directory.members #dir-members-search:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: #06c755 !important;
}

body.directory.members #dir-members-search::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}


/* ==========================================================================
   📱 🎯 【ここが今回の追加箇所】
   【スマホ・タブレット環境（767px以下）】における、タイムラインとの長さ完全同期シールド
   ========================================================================= */
@media (max-width: 767px) {
    /* 検索バーの外枠の長さを「195px」へタイムラインと完全同期 */
    body.directory.members .subnav-search,
    body.directory.members .div-search.members-search,
    body.directory.members .dir-search.members-search,
    body.directory.members .bp-search {
        width: 195px !important;
        max-width: 195px !important;
        min-width: 195px !important;
    }

    /* 検索バー入力欄本体の長さを「195px」にし、文字が詰まらないようにパディングも同期 */
    body.directory.members input[type="search"],
    body.directory.members #dir-members-search {
        width: 195px !important;
        max-width: 195px !important;
        min-width: 195px !important;
        font-size: 14px !important;
        padding: 0 30px 0 35px !important; /* タイムライン側の145行目と1px単位で同じ余白 */
    }
}

/* 不要な並び替えフィルター関連要素を非表示 ＆ 復活したバグ枠線を根本から完全消滅 */
body.directory.members #members-order-select,
body.directory.members .component-filters,
body.directory.members #dir-filters,
body.directory.members .last.filter,
body.directory.members .select-wrap,
body.directory.members select#members-order-by,
body.directory.members .subnav-filters-modal #dir-filters,
body.directory.members .grid-filters {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 🎯 【最重要：グレーの四角い線の本拠地を直撃リペア】
   HTMLソースから判明した、四角い枠線の最大の真犯人（.subnav-filters-modal）の
   境界線、影、および不要な浮き背景を、ここでダイレクトに完全消滅させます！ */
body.directory.members .subnav-filters-modal,
body.directory.members div.subnav-filters-modal,
body.directory.members .bb-subnav-filters-search .subnav-filters-modal {
    position: relative !important; /* 🎯 absolute（絶対配置）による重なりバグを強制解除 */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    border: none !important;       /* 🎯 1pxのグレー線を完全消滅 */
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;   /* 🎯 うっすら見えていた影の線を完全消滅 */
    background: transparent !important;
    background-color: transparent !important;
}

/* タブメニューテキスト */

body.directory.members .members-type-navs ul {

    max-width: 600px !important;

    width: 100% !important;

    margin: 0 auto !important;

    padding: 0 15px !important;

    box-sizing: border-box !important;

    display: flex !important;

    gap: 20px !important;

}



body.directory.members .members-type-navs ul li a {

    font-family: 'M PLUS Rounded 1c', sans-serif !important;

    color: #4A4A4A !important;

    font-weight: 800 !important; 

    text-decoration: none !important;

}



/* -------------------------------------------------------------------------

   ③ 💻 PC環境用（幅768px以上）：テーマのfloat構造をハックした2列等幅整列シールド

   ------------------------------------------------------------------------- */

@media (min-width: 768px) {

    body.directory.members ul#members-list.item-list.members-list.bp-list.grid,

    body.directory.members ul#members-list,

    body.directory.members ul.members-list,

    body.directory.members #members-list {

        display: block !important;               /* 強制的なblock化でJSの上書きを完全無効化 */

        padding: 10px 15px !important;           /* 検索バーのフチと完全に揃える左右15px */

        margin: 0 auto !important;

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        clear: both !important;

    }



    /* 🚨 奇数偶数の突っ張り棒をへし折り、1枚あたり275px固定で左からfloatで流し込みます */

    body.directory.members ul#members-list.item-list.members-list.bp-list.grid li,

    body.directory.members ul#members-list li,

    body.directory.members .members-list li,

    body.directory.members .members-list li.item-entry,

    body.directory.members #members-list li.item-entry,

    body.directory.members #members-list li.odd,

    body.directory.members #members-list li.even,

    body.directory.members #members-list li:nth-child(odd),

    body.directory.members #members-list li:nth-child(even),

    body.directory.members #members-list li:nth-child(2n+1),

    body.directory.members #members-list li:nth-child(2n) {

        display: block !important;

        float: left !important;                 /* 左から順に隙間なく並べる */

        clear: none !important;

        flex: none !important;

        width: 275px !important;                /* 横幅275px */

        max-width: 275px !important;

        min-width: 275px !important;

        margin-top: 0 !important;

        margin-left: 0 !important;              /* 左ハミ出しの原因を完全リセット */

        margin-right: 0 !important;

        margin-bottom: 20px !important;         /* 縦の段間隔を20px空ける */

        padding: 0 !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

    }



    /* 🎯 1列目（奇数番目）の右側にだけ「20px」の隙間を確実にキープ（これで2列グリッドが完成） */

    body.directory.members #members-list li:nth-child(odd),

    body.directory.members #members-list li:nth-child(2n+1),

    body.directory.members .members-list li.odd {

        margin-right: 20px !important;

    }



    /* 🎯 2列目（偶数番目）の右マージンは0にして絶対にハミ出させない */

    body.directory.members #members-list li:nth-child(even),

    body.directory.members #members-list li:nth-child(2n),

    body.directory.members .members-list li.even {

        margin-right: 0 !important;

    }



    /* 内枠「.list-wrap」PCサイズ用 */

    body.directory.members .members-list li .list-wrap {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important; 

        justify-content: flex-start !important; 

        width: 100% !important;

        height: 295px !important;

        min-height: 295px !important;

        max-height: 295px !important;

        padding: 24px 16px 14px 16px !important; 

        box-sizing: border-box !important;

        background: #ffffff !important;

        border: none !important;

        border-radius: 16px !important;

        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;

        position: relative !important;

    }



    /* PC環境：アバターサイズ 120px */

    body.directory.members .item-avatar,

    body.directory.members .members-list li .item-avatar,

    body.directory.members .item-avatar img.avatar {

        width: 120px !important;  

        height: 120px !important;

        max-width: 120px !important;

        min-width: 120px !important;

    }



    /* PC環境：フォントサイズ */

    body.directory.members #buddypress ul.members-list li .item-block a,

    body.directory.members #buddypress ul.members-list li [class*="title"] a,

    body.directory.members #buddypress ul.members-list li [class*="name"] a,

    body.directory.members #members-list li h2 a,

    body.directory.members #members-list li h4 a,

    body.directory.members .item-block h4 a,

    body.directory.members .item-block h2,

    body.directory.members .item-block h4 {

        font-size: 18px !important;

    }

    

    body.directory.members .members-type-navs ul li a {

        font-size: 18px !important;

    }

    body.directory.members .bb-item-count,

    body.directory.members div.bb-item-count {

        font-size: 16px !important;

    }

}



/* -------------------------------------------------------------------------

   ④ 📱 スマホ環境用（幅767px以下）：1列センター美しい縦積み強制シールド

   ------------------------------------------------------------------------- */

@media (max-width: 767px) {

    body.directory.members ul#members-list.item-list.members-list.bp-list.grid,

    body.directory.members ul#members-list,

    body.directory.members ul.members-list,

    body.directory.members #members-list {

        display: flex !important;

        flex-direction: column !important;      /* スマホは確実に縦1列 */

        flex-wrap: nowrap !important;

        justify-content: flex-start !important;

        align-items: center !important;         /* 中央寄せ */

        padding: 10px 12px !important;

        margin: 0 auto !important;

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        float: none !important;

        clear: both !important;

    }



    body.directory.members ul#members-list.item-list.members-list.bp-list.grid li,

    body.directory.members ul#members-list li,

    body.directory.members .members-list li,

    body.directory.members .members-list li.item-entry,

    body.directory.members #members-list li.item-entry,

    body.directory.members #members-list li.odd,

    body.directory.members #members-list li.even {

        display: block !important;

        flex: 0 0 auto !important;

        width: 100% !important;

        max-width: 330px !important;            /* スマホで間延びしないベストな幅 */

        min-width: 0 !important;

        margin-top: 0 !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        margin-bottom: 16px !important;         /* カード同士の縦の隙間を16pxにする */

        float: none !important;

        clear: both !important;

        padding: 0 !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

    }



    /* 内枠「.list-wrap」スマホサイズ用 */

    body.directory.members .members-list li .list-wrap {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        width: 100% !important;

        height: auto !important;

        min-height: 270px !important;

        padding: 20px 16px 16px 16px !important;

        box-sizing: border-box !important;

        background: #ffffff !important;

        border: none !important;

        border-radius: 16px !important;

        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;

        position: relative !important;

    }



    /* スマホ環境：アバターサイズ 100px */

    body.directory.members .item-avatar,

    body.directory.members .members-list li .item-avatar,

    body.directory.members .item-avatar img.avatar {

        width: 100px !important;

        height: 100px !important;

        max-width: 100px !important;

        min-width: 100px !important;

    }



    /* スマホ環境：文字サイズ */

    body.directory.members #buddypress ul.members-list li .item-block a,

    body.directory.members #buddypress ul.members-list li [class*="title"] a,

    body.directory.members #buddypress ul.members-list li [class*="name"] a,

    body.directory.members #members-list li h2 a,

    body.directory.members #members-list li h4 a,

    body.directory.members .item-block h4 a,

    body.directory.members .item-block h2,

    body.directory.members .item-block h4 {

        font-size: 16px !important;

    }

}



/* -------------------------------------------------------------------------

   ⑤ カード内部：アバター＆文字の共通整形

   ------------------------------------------------------------------------- */

body.directory.members .item-avatar,

body.directory.members .members-list li .item-avatar {

    display: block !important;

    float: none !important;

    margin: 0 auto 8px auto !important; 

    padding: 0 !important;

    flex-shrink: 0 !important;

    position: relative !important;

}



body.directory.members .item-avatar img.avatar {

    display: block !important;

    border-radius: 50% !important;

    border: 3px solid #06C755 !important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;

    object-fit: cover !important;

    margin: 0 auto !important;

}



/* 不要な「黄色い丸」を非表示 */

body.directory.members .item-avatar [class*="status"],

body.directory.members .item-avatar [class*="presence"],

body.directory.members .item-avatar .member-status,

body.directory.members .item-avatar span.user-status,

body.directory.members .item-avatar [style*="background"] {

    display: none !important;

    width: 0 !important;

    height: 0 !important;

    opacity: 0 !important;

    visibility: hidden !important;

}



/* 内枠の干渉を徹底的に白化 */

body.directory.members #buddypress ul.members-list li,

body.directory.members #buddypress ul.members-list li .item-block,

body.directory.members #buddypress ul.members-list li .member-block,

body.directory.members .item-block,

body.directory.members [class*="member-loop-inline-item"] {

    background: #ffffff !important;

    background-color: #ffffff !important;

    border: none !important;                        

    border-color: transparent !important;       

    box-shadow: none !important;            

}



body.directory.members .item,

body.directory.members .item-block {

    overflow: hidden !important;

    display: block !important; 

    width: 100% !important;

    height: auto !important;

    text-align: center !important;

    padding-top: 0 !important;

    margin: 0 !important;

}



/* なまえエリア */

body.directory.members #buddypress ul.members-list li .item-block a,

body.directory.members #buddypress ul.members-list li [class*="title"] a,

body.directory.members #buddypress ul.members-list li [class*="name"] a,

body.directory.members #members-list li h2 a,

body.directory.members #members-list li h4 a,

body.directory.members .item-block h4 a,

body.directory.members .item-block h2,

body.directory.members .item-block h4 {

    font-family: 'M PLUS Rounded 1c', sans-serif !important;

    color: #06c755 !important;          

    font-weight: 800 !important;          

    text-decoration: none !important;

    line-height: 1.2 !important;

    display: inline-block !important;

    text-align: center !important; 

    width: 100% !important;

    height: 34px !important;

    max-height: 34px !important;

    overflow: hidden !important;

    margin-top: 0 !important;

    margin-bottom: -6px !important; 

}



/* 参加訪問テキスト */

body.directory.members .item-meta,

body.directory.members .item-meta span,

body.directory.members .members-list li .item-meta,

body.directory.members .members-list li .item-meta span,

body.directory.members .item-meta time {

    font-size: 11px !important; 

    color: #a0a0a0 !important;

    display: block !important;

    text-decoration: none !important;

    line-height: 1.2 !important; 

    text-align: center !important; 

    width: 100% !important;

    margin: 0 auto !important;

    margin-bottom: 20px !important; 

}



body.directory.members .item-meta span,

body.directory.members .members-list li .item-meta span {

    margin-top: 0 !important;

    margin-bottom: 1px !important; 

}



/* 不要な中点オブジェクトを強制的に完全不可視化 */

body.directory.members .item-meta .separator,

body.directory.members .item-meta span.separator,

body.directory.members .item-meta .dot,

body.directory.members .members-list li .item-meta-dot,

body.directory.members .item-meta::before {

    display: none !important;

    content: none !important;

    visibility: hidden !important;

    font-size: 0 !important;

    height: 0 !important;

    width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

}



/* 三点リーダー等の完全非表示化 */

body.directory.members .bb-activity-more-options-wrap,

body.directory.members [class*="more-options"],

body.directory.members .bp-profile-action,

body.directory.members [class*="profile-action"],

body.directory.members .view-as,

body.directory.members .more-actions,

body.directory.members .bb_member_options,

body.directory.members .bb-member-options,

body.directory.members .members-list li.item-entry .action .bb_member_options,

body.directory.members .members-list li .action .bb-member-dropdown,

body.directory.members [class*="dropdown"],

body.directory.members [id*="dropdown"] {

    display: none !important;

    width: 0 !important;

    height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

}



/* 中央の大きなくまさんロゴを非表示化 */

body.directory.members #buddypress:before,

body.directory.members .buddypress-wrap:before {

    display: none !important;

    content: none !important;

    visibility: hidden !important;

    height: 0 !important;

}



/* ==========================================================================

   🎨 【左寄せ絶対阻止】純正ボタンをド真ん中に全開固定する鉄壁CSS（ホバー対応版）

   ========================================================================= */

body.directory.members .list-wrap .member-buttons-wrap,

body.directory.members .list-wrap div[class*="-buttons"],

body.directory.members .list-wrap .action,

body.directory.members .list-wrap .friendship-button {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    float: none !important;

    text-align: center !important;

    width: 100% !important;

    margin: 14px 0 0 0 !important;

    padding: 0 !important;

    background: none !important;

    border: none !important;

}



body.directory.members .list-wrap a.button.nui-native-hook-btn {

    display: block !important;

    float: none !important;

    position: relative !important;

    left: 0 !important;

    right: 0 !important;

    margin: 0 auto !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 100% !important;

    height: 38px !important;

    line-height: 38px !important;

    padding: 0 !important;

    text-align: center !important;

    box-sizing: border-box !important;

    border-radius: 20px !important;

    font-family: 'M PLUS Rounded 1c', sans-serif !important;

    font-weight: 700 !important;

    font-size: 14px !important;

    cursor: pointer !important;

    border: none !important;

    box-shadow: none !important;

    text-shadow: none !important;

    transition: background-color 0.15s ease, opacity 0.15s ease !important;

}



/* 👥 A.「ぬいとも申請」通常ダークグレー */

body.directory.members .list-wrap a.button.nui-native-hook-btn.nui-status-default {

    background-color: #4A4A4A !important;

    color: #FFFFFF !important;

}

body.directory.members .list-wrap a.button.nui-native-hook-btn.nui-status-default:hover {

    background-color: #333333 !important;

}



/* 📤 B.「申請中」（ホバー：申請キャンセル） */

body.directory.members .list-wrap a.button.nui-native-hook-btn.nui-status-pending {

    background-color: #4A4A4A !important;

    color: #FFFFFF !important;

}

body.directory.members .list-wrap a.button.nui-native-hook-btn.nui-status-pending:hover {

    background-color: #C0392B !important;

}



/* 📥 C.「申請がありました」（ホバー：申請を確認） */

body.directory.members .list-wrap a.button.nui-native-hook-btn.nui-status-accept {

    background-color: #F39C12 !important;

    color: #FFFFFF !important;

}

body.directory.members .list-wrap a.button.nui-native-hook-btn.nui-status-accept:hover {

    background-color: #E67E22 !important;

}



/* 🤝 D.「ぬいとも・∞・」専用：濃いピンク */

body.directory.members .list-wrap a.button.nui-native-hook-btn.nui-status-is-friend {

    background-color: #E94B8A !important;

    color: #FFFFFF !important;

}

body.directory.members .list-wrap a.button.nui-native-hook-btn.nui-status-is-friend:hover {

    background-color: #d63674 !important;

}



/* 🚨 【最終防衛：強化版】フォローコンテナを徹底的に無効化 */

body.directory.members .list-wrap .follow-container,

body.directory.members .list-wrap [class*="follow-container"],

body.directory.members .list-wrap div[class*="follow-"] {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    height: 0 !important;

    width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    pointer-events: none !important;

}



/* ==========================================================================

   👥 ぬいさんず専用：「さがすページ」タブメニュー（上下線スッキリ＆テーマカラー版）

   ========================================================================= */



/* ① 検索バーとメニューの間を広げる */

body.directory.members .bb-subnav-filters-container-main,

body.directory.members .bb-subnav-filters-search {

    margin-bottom: 25px !important;

}



/* ② メニュー全体を囲むブロック（PC・SP共通の上下線、背景は完全透過・白） */

body.directory.members .members-type-navs,

body.directory.members .dir-navs {

    border-top: 1px solid #F2F2F2 !important;    /* 薄いグレーの上下線 */

    border-bottom: 1px solid #F2F2F2 !important; 

    background: transparent !important;          /* 背景色・グラデーションを完全消滅 */

    background-color: transparent !important;    

    padding: 10px 0 !important;                  /* 上下線の内側に心地よい隙間を確保 */

    width: 100% !important;

    max-width: 600px !important;

    margin: 10px auto !important;

}



/* ③ タブリンク自体の背景・余白をクリアにする */

body.directory.members .members-type-navs ul,

body.directory.members .members-type-navs ul li,

body.directory.members .members-type-navs ul li a {

    background: transparent !important;          /* SPの背景に残るグレーを完全に消去 */

    background-color: transparent !important;    

    box-shadow: none !important;

}



body.directory.members .members-type-navs ul li a {

    display: inline-block !important;

    padding: 4px 5px !important;                  /* ボタンではなく「文字」として自然な余白 */

    border-radius: 0 !important;                  /* 丸みも削除 */

    font-size: 15px !important;                   /* SPでもはみ出さないサイズ */

    color: #A0A0A0 !important;                   /* 選択されていない時は少し薄いグレー */

    font-weight: 700 !important;

    position: relative !important;

}



/* PC（幅768px以上）の時は文字サイズを少し大きく */

@media (min-width: 768px) {

    body.directory.members .members-type-navs ul li a {

        font-size: 16px !important;

    }

}



/* ④ 【選択中（アクティブ）】の文字色コントロール */

body.directory.members .members-type-navs ul li.current a,

body.directory.members .members-type-navs ul li.selected a {

    color: #4A4A4A !important;                   /* 選ばれている方は濃い文字色に */

    font-weight: 800 !important;

}



/* -------------------------------------------------------------------------

   ⑤ 🎯 選択中を示すアンダーバーの色を出し分け（太さ3px・位置微調整版）

   ------------------------------------------------------------------------- */



/* A.「みんな・∞・」が選択されている時のアンダーバー */

body.directory.members .members-type-navs ul li#members-all.current a::after,

body.directory.members .members-type-navs ul li#members-all.selected a::after {

    content: "" !important;

    position: absolute !important;

    bottom: -11px !important;                     /* 太線化に合わせて位置を微調整 */

    left: 0 !important;

    width: 100% !important;

    height: 3px !important;                       /* 太さを3pxに変更 */

    background-color: #4A4A4A !important;        /* ダークグレー */

    border-radius: 2px !important;                /* 線の端っこも少しだけ丸くして優しく */

}



/* B.「ぬいともさん・∞・」が選択されている時のアンダーバー */

body.directory.members .members-type-navs ul li#members-personal.current a::after,

body.directory.members .members-type-navs ul li#members-personal.selected a::after,

body.directory.members .members-type-navs ul li[id*="friend"].current a::after,

body.directory.members .members-type-navs ul li[id*="friend"].selected a::after {

    content: "" !important;

    position: absolute !important;

    bottom: -11px !important;                     /* 太線化に合わせて位置を微調整 */

    left: 0 !important;

    width: 100% !important;

    height: 3px !important;                       /* 太さを3pxに変更 */

    background-color: #E94B8A !important;        /* ぬいともピンク */

    border-radius: 2px !important;                /* 線の端っこも少しだけ丸くして優しく */

} 

/* ==========================================================================

🚨 【最下部追記用 fray・完全大団円リペア版】（成功ルート完全復元・上空引き上げ版）

①ボタンの横幅・位置をミリ単位で完全統一 ＆ ②クリック後のデザイン剥がれを永久遮断

========================================================================= *//* -------------------------------------------------------------------------

🎯 ① 【形状の完全統一】：文字数に左右されず、常に同じ長さ・同じ位置に固定

-------------------------------------------------------------------------

太さ800、極小角丸3pxのシャープなUX改善デザインをガチガチに固定しつつ、

位置の制御は下のFlexbox側で100%トリガーさせます。

*/body.directory.members #members-list li .bb-card-action,body.directory.members #members-list li [class*="card-action"],body.directory.members #members-list li .bb-card-action a,body.directory.members #members-list li a.nui-native-hook-btn,body.directory.members #members-list li [class*="nui-status-"],body.directory.members #members-list li .action,body.directory.members #members-list li .friendship-button,body.directory.members #members-list li [class*="friendship-button"] {

display: block !important;

width: 220px !important; /* 🎯 文字数に左右されない絶対固定の横幅 */

max-width: 220px !important;

min-width: 220px !important;

height: 38px !important; /* 🎯 高さも完全に統一 */

line-height: 38px !important;

padding: 0 !important;

margin: 0 auto !important; /* 左右中央に綺麗に並べるためのリセット */

border-radius: 3px !important; /* 🎯 検索バーと差別化する、パキッとした3pxの四角角丸 */

text-align: center !important;

box-sizing: border-box !important;

float: none !important;

}

/* -------------------------------------------------------------------------

🎯 ② 【💻 PC環境専用（幅768px以上）】さっき成功した「上空強制引き上げ」の完全復元

-------------------------------------------------------------------------

ボタンが入っている「.member-buttons-wrap」というマス自体を狙い撃ちして、

上の訪問日テキストのすぐ下（8px）へ引っ張り上げ、下マージン（auto）で大きな床を復活させます！

*/@media (min-width: 768px) {

/* 大元の外箱：スマートな280px高さを絶対キープ */

body.directory.members ul#members-list li .list-wrap,

body.directory.members .members-list li .list-wrap,

#buddypress ul#members-list li .list-wrap {

display: flex !important;

flex-direction: column !important;

justify-content: flex-start !important; /* 上詰めに並べて、ボタンの下をのびのび空ける */

align-items: center !important;

height: 280px !important;

min-height: 280px !important;

max-height: 280px !important;

padding: 24px 16px 20px 16px !important;

box-sizing: border-box !important;

}



/* 中身の3つの部品を包む子箱の設定を上詰め（flex-start）に固定 */

body.directory.members ul#members-list li .list-wrap .list-wrap-inner,

.members-list li .list-wrap .list-wrap-inner,

#buddypress ul#members-list li .list-wrap .list-wrap-inner {

display: flex !important;

flex-direction: column !important;

justify-content: flex-start !important;

align-items: center !important;

width: 100% !important;

height: 100% !important;

}



/* 🎯 【成功パターンの完全復活】ボタンが潜むこの「箱自体」を、上の訪問日のすぐ下（8px）へ強制移動！ */

body.directory.members ul#members-list li .list-wrap .member-buttons-wrap,

.members-list li .list-wrap .member-buttons-wrap,

#buddypress ul#members-list li .list-wrap .member-buttons-wrap {

margin-top: 8px !important; /* 🎯 訪問日テキストのすぐ下8pxに引き寄せ */

margin-bottom: auto !important; /* 🎯 下側を自動で無限に広げて、ボタンの下にたっぷりの余白を復活！ */

display: flex !important;

justify-content: center !important;

align-items: center !important;

width: 100% !important;

}

}/* -------------------------------------------------------------------------

🎯 ③ 【📱 スマホ環境専用（幅767px以下）】の間延び解消・すっきり収納シールド

------------------------------------------------------------------------- */@media (max-width: 767px) {

body.directory.members #members-list li .list-wrap,

body.directory.members .members-list li .list-wrap,

#buddypress #members-list li .list-wrap {

display: flex !important;

flex-direction: column !important;

justify-content: flex-start !important;

align-items: center !important;

height: auto !important;

min-height: 0 !important;

max-width: 300px !important;

margin: 0 auto !important;

padding: 20px 16px 20px 16px !important;

box-sizing: border-box !important;

}



body.directory.members #members-list li .list-wrap .list-wrap-inner,

body.directory.members .members-list li .list-wrap .list-wrap-inner,

#buddypress #members-list li .list-wrap .list-wrap-inner {

display: flex !important;

flex-direction: column !important;

justify-content: flex-start !important;

align-items: center !important;

width: 100% !important;

height: auto !important;

margin-bottom: 0 !important;

padding-bottom: 0 !important;

}



body.directory.members #members-list li .list-wrap .bp-members-list-hook,

body.directory.members .members-list li .list-wrap .bp-members-list-hook,

#buddypress #members-list li .list-wrap .bp-members-list-hook {

margin-top: 10px !important;

margin-bottom: 0 !important;

display: flex !important;

justify-content: center !important;

align-items: center !important;

width: 100% !important;

}



body.directory.members #members-list li .item-meta,

body.directory.members #members-list li .item-meta span {

margin-bottom: 0px !important;

}

}/* -------------------------------------------------------------------------

🎯 ④ 【剥がれ防止・鉄壁シールド】：クリックでステータスが変わっても色を維持

-------------------------------------------------------------------------

太さ800と極小角丸3pxをすべてのステータスに焼き付けます。

*//* 👥 A. 通常時 ＆ 📤 B. 申請中 ＆ クリック直後の変化時（一律でダークグレーを絶対死守） */body.directory.members #members-list li .bb-card-action a,body.directory.members #members-list li a.nui-native-hook-btn,body.directory.members #members-list li a.nui-status-default,body.directory.members #members-list li a.nui-status-pending,body.directory.members #members-list li a.button,body.directory.members #members-list li .friendship-button a,body.directory.members #members-list li [class*="friendship-button"] a {

background-color: #4A4A4A !important;

color: #FFFFFF !important;

text-decoration: none !important;

font-family: 'M PLUS Rounded 1c', sans-serif !important;

font-weight: 800 !important; /* 🎯 太さ800を維持 */

font-size: 14px !important;

border-radius: 3px !important; /* 🎯 角丸3pxの四角形を維持 */

}body.directory.members #members-list li .bb-card-action a:hover,body.directory.members #members-list li a.nui-native-hook-btn:hover,body.directory.members #members-list li a.button:hover {

background-color: #333333 !important;

}/* 📥 C.「申請がありました」が検知されている時（オレンジボタン） */body.directory.members #members-list li a.nui-status-accept,body.directory.members #members-list li a.requested,body.directory.members #members-list li a.received {

background-color: #F39C12 !important;

color: #FFFFFF !important;

font-weight: 800 !important;

border-radius: 3px !important;

}body.directory.members #members-list li a.nui-status-accept:hover {

background-color: #E67E22 !important;

}/* 🤝 D.「ぬいとも・∞・」専用状態（ぬいともピンク） */body.directory.members #members-list li a.nui-status-is-friend,body.directory.members #members-list li a.is-friend,body.directory.members #members-list li a.remove-friend {

background-color: #E94B8A !important;

color: #FFFFFF !important;

font-weight: 800 !important;

border-radius: 3px !important;

}body.directory.members #members-list li a.nui-status-is-friend:hover {

background-color: #d63674 !important;

} 

/* ==========================================================================
   🐾 【ルーム大手術・最終完成版】メニュー並び替え・テーマカラー・ロゴ完全抹消
   ========================================================================= */

/* ① 【ロゴ完全消滅】
   全てのぬいさんのルーム（.bp-user）において、どこに回り込んで復活してきたロゴであっても、
   画面上から1ミリの残骸も残さず完全にシャットアウトします */
body.bp-user #buddypress::before,
body.bp-user .buddypress-wrap::before,
body.bp-user div#buddypress::before,
body.bp-user #item-header::before,
body.bp-user .users-header::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ② 【強制非表示】「設定」と「通知」のタブを完全に消滅 */
body.bp-user #object-nav ul li[id*="settings"],
body.bp-user #object-nav ul li[id*="notifications"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ③ 【メニュー全体の箱】さがすページと同じ「薄いグレーの上下線」と全幅600px・中央寄せ */
body.bp-user #object-nav,
body.bp-user .bp-navs.single-screen-navs {
    border-top: 1px solid #F2F2F2 !important;
    border-bottom: 1px solid #F2F2F2 !important; 
    background: transparent !important;
    background-color: transparent !important;    
    padding: 10px 0 !important;
    width: 100% !important;
    max-width: 600px !important;                 /* カード幅と同じ600pxに緊縛 */
    margin: 10px auto !important;                /* 綺麗に左右中央寄せ */
    box-shadow: none !important;
}

/* ④ 【タブリンク自体の初期化 ＆ 💡並び替え（order）の仕込み】 */
body.bp-user #object-nav ul,
body.bp-user #object-nav ul li,
body.bp-user #object-nav ul li a {
    background: transparent !important;
    background-color: transparent !important;    
    box-shadow: none !important;
    border: none !important;
}

body.bp-user #object-nav ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 20px !important;                       /* メニュー同士の横の隙間 */
    padding: 0 15px !important;                 /* 検索バーのフチと揃える余白 */
    margin: 0 !important;
}

body.bp-user #object-nav ul li {
    display: block !important;
    float: none !important;
}

body.bp-user #object-nav ul li a {
    display: inline-block !important;
    padding: 4px 5px !important;
    border-radius: 0 !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 15px !important;
    color: #A0A0A0 !important;                  /* 選択されていない時は薄いグレー */
    font-weight: 700 !important;
    position: relative !important;
}

/* PC環境（幅768px以上）の時は文字サイズを一回り大きく同期 */
@media (min-width: 768px) {
    body.bp-user #object-nav ul li a {
        font-size: 16px !important;
    }
}

/* ⑤ 【選択中（アクティブ）】の文字色コントロール（ダークグレーに点灯） */
body.bp-user #object-nav ul li.current a,
body.bp-user #object-nav ul li.selected a {
    color: #4A4A4A !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   🎯 💡 【新機能：1段目メニューの並び順・強制入れ替えロジック】
   ========================================================================= */
body.bp-user #object-nav ul li#xprofile-personal-li  { order: 1 !important; } /* プロフィール */
body.bp-user #object-nav ul li#activity-personal-li  { order: 2 !important; } /* タイムライン */
body.bp-user #object-nav ul li#media-personal-li     { order: 3 !important; } /* アルバム */
body.bp-user #object-nav ul li#friends-personal-li   { order: 4 !important; } /* ぬいともさん */


/* ==========================================================================
   🎯 【メニューテキストの最短上書きハック】
   元の文字データを非表示にせず、背景色と同じ色の座布団で包み込んで完全に隠蔽し、
   上からスマートな省略文字を絶対にズレない形で焼き付けます。
   ========================================================================= */

/* ボタンリンクの文字自体を透明にして、疑似要素だけで描画する安全シールド */
body.bp-user #object-nav ul li a {
    color: transparent !important;
}
body.bp-user #object-nav ul li a::before {
    position: absolute !important;
    top: 4px !important;
    left: 5px !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
}
body.bp-user #object-nav ul li.current a::before,
body.bp-user #object-nav ul li.selected a::before {
    font-weight: 800 !important;
}

/* 1.「プロフィール」→「プロフ」（未選択時：薄いグレー / 選択時：ダークグレー） */
body.bp-user #object-nav ul li#xprofile-personal-li a::before { content: "プロフ" !important; color: #A0A0A0 !important; }
body.bp-user #object-nav ul li#xprofile-personal-li.current a::before { color: #4A4A4A !important; }

/* 2.「タイムライン」→「トーク」 */
body.bp-user #object-nav ul li#activity-personal-li a::before { content: "トーク" !important; color: #A0A0A0 !important; }
body.bp-user #object-nav ul li#activity-personal-li.current a::before { color: #4A4A4A !important; }

/* 3.「アルバム」→「アルバム」（そのまま固定） */
body.bp-user #object-nav ul li#media-personal-li a::before { content: "アルバム" !important; color: #A0A0A0 !important; }
body.bp-user #object-nav ul li#media-personal-li.current a::before { color: #4A4A4A !important; }

/* 4.「ぬいともさん」→「ぬいともさん」（そのまま固定） */
body.bp-user #object-nav ul li#friends-personal-li a::before { content: "ぬいともさん" !important; color: #A0A0A0 !important; }
body.bp-user #object-nav ul li#friends-personal-li.current a::before { color: #4A4A4A !important; }


/* ==========================================================================
   🎯 【アンダーバーの色出し分け】（太さ3px・位置調整の完全同期ハック）
   ========================================================================= */

/* ⚫ A. 【プロフィール】選択中のアンダーバーを「ダークグレー（#4A4A4A）」 */
body.bp-user #object-nav ul li#xprofile-personal-li.current a::after,
body.bp-user #object-nav ul li[id*="xprofile"].selected a::after {
    content: "" !important;
    position: absolute !important;
    bottom: -11px !important;
    left: 5px !important;
    width: calc(100% - 10px) !important;
    height: 3px !important;
    background-color: #4A4A4A !important;
    border-radius: 2px !important;
}

/* 🟢 B. 【タイムライン ＆ アルバム】選択中のアンダーバーを「LINEグリーン」 */
body.bp-user #object-nav ul li#activity-personal-li.current a::after,
body.bp-user #object-nav ul li#media-personal-li.current a::after,
body.bp-user #object-nav ul li[id*="activity"].selected a::after,
body.bp-user #object-nav ul li[id*="media"].selected a::after {
    content: "" !important;
    position: absolute !important;
    bottom: -11px !important;
    left: 5px !important;
    width: calc(100% - 10px) !important;
    height: 3px !important;
    background-color: #06c755 !important;
    border-radius: 2px !important;
}

/* 🌸 C. 【ぬいともさん】選択中のアンダーバーを「ぬいともピンク」 */
body.bp-user #object-nav ul li#friends-personal-li.current a::after,
body.bp-user #object-nav ul li[id*="friends"].selected a::after {
    content: "" !important;
    position: absolute !important;
    bottom: -11px !important;
    left: 5px !important;
    width: calc(100% - 10px) !important;
    height: 3px !important;
    background-color: #E94B8A !important;
    border-radius: 2px !important;
}


/* ==========================================================================
   📱 🎯 【固定フッター被り解決】
   /members/内の大元の箱（#buddypress）の底に、160pxの広大なパディングをピンポイント注入
   ========================================================================= */
body.bp-user #buddypress,
body.bp-user .buddypress-wrap {
    padding-bottom: 160px !important; /* 👈 ルームの中身の底だけを完璧に押し上げます */
}


/* ==========================================================================
   🐾 【ルーム大手術・最終完成版】メニュー等間隔・テーマカラー・ロゴ＆バグ完全抹消
   ========================================================================= */

/* ① 【ロゴ完全消滅】メンバーページ全体の重複ロゴを完全に非表示にします */
body.bp-user #buddypress::before,
body.bp-user .buddypress-wrap::before,
body.bp-user div#buddypress::before,
body.bp-user #item-header::before,
body.bp-user .users-header::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ② 【強制非表示】「設定」と「通知」のタブを完全に消滅させます */
body.bp-user #object-nav ul li[id*="settings"],
body.bp-user #object-nav ul li[id*="notifications"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ③ 【メニュー全体の箱】さがすページと同じ「薄いグレーの上下線」と全幅600px・中央寄せ */
body.bp-user #object-nav,
body.bp-user .bp-navs.single-screen-navs {
    border-top: 1px solid #F2F2F2 !important;
    border-bottom: 1px solid #F2F2F2 !important; 
    background: transparent !important;
    background-color: transparent !important;    
    padding: 10px 0 !important;
    width: 100% !important;
    max-width: 600px !important;                 /* カード幅と同じ600pxに緊縛 */
    margin: 10px auto !important;                /* 綺麗に左右中央寄せ */
    box-shadow: none !important;
}

/* ④ 【タブリンク自体の初期化】変な背景や外枠をすべてリセットします */
body.bp-user #object-nav ul,
body.bp-user #object-nav ul li,
body.bp-user #object-nav ul li a {
    background: transparent !important;
    background-color: transparent !important;    
    box-shadow: none !important;
    border: none !important;
    text-indent: 0 !important;                  /* 👈 文字を消すバグ命令を完全排除 */
}

body.bp-user #object-nav ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 20px !important;                       /* メニュー同士の横の隙間 */
    padding: 0 15px !important;                 /* 検索バーのフチと揃える余白 */
    margin: 0 !important;
}

body.bp-user #object-nav ul li {
    display: block !important;
    float: none !important;
}

body.bp-user #object-nav ul li a {
    display: inline-block !important;
    padding: 4px 5px !important;
    border-radius: 0 !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 15px !important;
    color: #A0A0A0 !important;                  /* 選択されていない時は薄いグレー */
    font-weight: 700 !important;
    position: relative !important;
}

/* PC環境（幅768px以上）の時は文字サイズを一回り大きく同期 */
@media (min-width: 768px) {
    body.bp-user #object-nav ul li a {
        font-size: 16px !important;
    }
}

/* ⑤ 【選択中（アクティブ）】の文字色コントロール（ダークグレーに点灯） */
body.bp-user #object-nav ul li.current a,
body.bp-user #object-nav ul li.selected a {
    color: #4A4A4A !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   💡 【並び順コントロール】「プロフ → トーク → アルバム → ぬいとも」の順に強制変更
   ========================================================================= */
body.bp-user #object-nav ul li#xprofile-personal-li  { order: 1 !important; } 
body.bp-user #object-nav ul li#activity-personal-li  { order: 2 !important; } 
body.bp-user #object-nav ul li#media-personal-li     { order: 3 !important; } 
body.bp-user #object-nav ul li#friends-personal-li   { order: 4 !important; } 


/* ==========================================================================
   🎯 【アンダーバーの色出し分け】（太さ3px・位置調整の完全同期ハック）
   ========================================================================= */

/* ⚫ A. 【プロフ】選択中のアンダーバーを「ダークグレー（#4A4A4A）」に指定 */
body.bp-user #object-nav ul li#xprofile-personal-li.current a::after,
body.bp-user #object-nav ul li[id*="xprofile"].selected a::after {
    content: "" !important;
    position: absolute !important;
    bottom: -11px !important;                    /* さがすページと1px単位で同じ位置 */
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;                      /* 太さ3px */
    background-color: #4A4A4A !important;        /* 🎯 ダークグレー */
    border-radius: 2px !important;
}

/* 🟢 B. 【トーク ＆ アルバム】選択中のアンダーバーを「LINEグリーン」に指定 */
body.bp-user #object-nav ul li#activity-personal-li.current a::after,
body.bp-user #object-nav ul li#media-personal-li.current a::after,
body.bp-user #object-nav ul li[id*="activity"].selected a::after,
body.bp-user #object-nav ul li[id*="media"].selected a::after {
    content: "" !important;
    position: absolute !important;
    bottom: -11px !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #06c755 !important;        /* 🎯 LINEグリーン */
    border-radius: 2px !important;
}

/* 🌸 C. 【ぬいとも】選択中のアンダーバーを「ぬいともピンク」に指定 */
body.bp-user #object-nav ul li#friends-personal-li.current a::after,
body.bp-user #object-nav ul li[id*="friends"].selected a::after {
    content: "" !important;
    position: absolute !important;
    bottom: -11px !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #E94B8A !important;        /* 🎯 ぬいともピンク */
    border-radius: 2px !important;
    z-index: 1 !important;
}


/* ==========================================================================
   📸 🎯 【アバター写真：歪み＆二重楕円の完全抹消シールド】
   親要素である「aタグ」の歪みを完全解除し、中の「写真（imgタグ）」だけを100%正円化します
   ========================================================================= */
body.bp-user #item-header-avatar a {
    border-radius: 0 !important;                 /* 親のaタグにかかっていた歪みの丸を完全破壊 */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.bp-user #item-header-avatar img,
body.bp-user #item-header-avatar img.avatar,
body.bp-user .users-header-avatar img {
    width: 150px !important;                     /* 縦横比を完全に一致させて正円の土台を作る */
    height: 150px !important;
    object-fit: cover !important;                /* 縦長・横長の写真でも、引き伸ばさずに中央で丸くトリミング */
    border-radius: 50% !important;               /* 🎯 写真だけを完璧な正円にクリップ */
    border: 3px solid #FFFFFF !important;        /* 綺麗な白フチ */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important; /* 優しい浮き上がり影 */
}


/* ==========================================================================
   📱 🎯 【固定フッター被り解決・ピンポイント修正版】
   ========================================================================= */
body.bp-user #item-body,
body.bp-user .buddypress-wrap #item-body {
    margin-bottom: 160px !important;             /* ルームの中身の底にだけ160pxの安全余白を確保 */
}

/* ==========================================================================
   🐾 【ルーム大手術・アドオン】名前色統一・オレンジ●消去・SP左右線カット
   ========================================================================= */

/* ① 🎯 【ぬいさんの名前】：PCでもSPでも、強制的に文字色を「#4A4A4A」へ完全統一 */
body.bp-user #buddypress h1,
body.bp-user #buddypress h2,
body.bp-user #item-header-content h1,
body.bp-user .bb-user-content-wrap h1,
body.bp-user .member-header-sections h1 {
    color: #4A4A4A !important;
    text-shadow: none !important; /* 影の残骸があればそれも完全に消去 */
}

/* ③ 🛠️ 【メニューの上下二本線】：SPで勝手に出てくる「左右の縦線」を完全に抹消 */
body.bp-user #object-nav,
body.bp-user .bp-navs.single-screen-navs {
    border-left: none !important;   /* 左の縦線を消滅 */
    border-right: none !important;  /* 右の縦線を消滅 */
}

/* ==========================================================================
   🌸 【ルーム大手術・完全逆転リペア】グロナビ100%復活 ＆ お部屋のオレンジ●即消滅
   ========================================================================= */

/* ① グロナビ（Elementorの手作り黄色バッジ）の誤消滅を完全に解除し、最優先で大復活させます！ */
body.bp-user .nui-custom-dot,
.nui-custom-dot,
.nui-custom-dot.has-notification {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ② 🎯 【本当の標的】お部屋の中（アバターの右上）にしぶとく残る、
   BuddyBoss標準のオンライン通知ランプ（オレンジ色の丸）だけをピンポイントで完全に消滅させます！ */
body.bp-user #item-header-avatar span.member-status,
body.bp-user #item-header-avatar .member-status,
body.bp-user .bb-cover-image-container span.member-status,
body.bp-user [data-bb-user-presence] {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   🐾 【ルームヘッダー】PC大画面でも常に100%スマホと同じ中央寄せに固定する命令
   ========================================================================= */

@media (min-width: 768px) {
    /* ① 左右並び（flex）になっている大元の構造を完全に破壊し、縦積みの1行ブロックに変形 */
    body.bp-user #cover-image-container,
    body.bp-user .bb-cover-image-container,
    body.bp-user #item-header-cover-image,
    body.bp-user .item-header-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        float: none !important;
    }

    /* ② アバターエリア：左寄せの回り込みをリセットし、自動マージンでド真ん中へ固定 */
    body.bp-user #item-header-avatar,
    body.bp-user div#item-header-avatar {
        float: none !important;
        display: block !important;
        /* カバー画像の下線に半分乗っかるベストな位置（-75px）で中央寄せ */
        margin: -75px auto 0 auto !important; 
        width: 150px !important;
        height: 150px !important;
        text-align: center !important;
    }

    /* ③ テキストを包む箱：テーマ独自の左右並び（flex）をブロック化して強制中央寄せ */
    body.bp-user #item-header-content,
    body.bp-user div#item-header-content,
    body.bp-user #item-header-content .flex,
    body.bp-user #item-header-content div.flex {
        display: block !important;
        float: none !important;
        margin: 5px auto 0 auto !important; /* アバターの下に20pxの隙間を確保 */
        padding: 0 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ④ お名前の文字：テーマの余計な左寄せ（margin-right等）を解除してセンターへ */
    body.bp-user #item-header-content .member-title-wrap,
    body.bp-user #item-header-content h2.user-nicename,
    body.bp-user #item-header-content h2 {
        display: block !important;
        text-align: center !important;
        margin: 0 auto 5px auto !important;
        width: 100% !important;
        float: none !important;
    }

    /* ⑤ メタ情報（@ID・参加日・訪問中）：横並びのまま中央にギュッと引き寄せます */
    body.bp-user #item-header-content .item-meta,
    body.bp-user #item-header-content div.item-meta {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; /* 🎯 文字を画面のド真ん中で揃える */
        align-items: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        float: none !important;
    }

    /* ⑥ 「ぬいとも・∞・」「切り替え」ボタン：左寄せの箱を解除して中央に整列 */
    body.bp-user #item-header-content .member-header-actions-wrap,
    body.bp-user #item-header-content .action,
    body.bp-user #item-header-content .friendship-button {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; /* 🎯 ボタンたちもド真ん中に並べる */
        align-items: center !important;
		margin: 1px auto 0 auto !important; /* 🎯 隙間を15pxから6pxへきゅっと引き締め */
		float: none !important;
        width: 100% !important;
        gap: 10px !important;               /* ボタン同士の横の隙間 */
    }
}

/* ==========================================================================
   🎯 【PC大画面専用】ボタン下の白いメニュー（タブ枠）だけを安全に引き上げる
   ========================================================================= */
@media (min-width: 768px) {
    body.bp-user #buddypress div.profile-nav-wrap,
    body.bp-user #buddypress nav.main-navs,
    body.bp-user #buddypress .users-nav {
        /* 🎯【微調整】引き上げ量を -15px から「-8px」へ緩めます。
           これでボタンを潰さずに、メニューだけが理想のポジションへわずかに下がります */
        margin-top: -8px !important; 
        
        position: relative !important;
        z-index: 10 !important;
    }
}

/* ==========================================================================
   📱 【スマホ画面専用・確定版】参加訪問 ➡ ボタン ➡ メニューの余白を完璧に詰め切る
   ========================================================================= */
@media (max-width: 767px) {

    /* 🛠 ① 【参加訪問 ➡ ボタンの間】をきゅっと詰める */
    body.bp-user #item-header-content .item-meta,
    body.bp-user #item-header-content div.item-meta {
        margin-bottom: 1px !important; /* 下側のクッションを5pxに縮小 */
    }

    /* 🛠 ② 【ボタン ➡ メニューの間】BuddyBossがスマホの時だけ敷く極厚クッションを完全破壊 */
    body.bp-user .member-header-actions-wrap,
    body.bp-user .member-header-actions,
    body.bp-user #item-header-content .member-header-actions-wrap,
    body.bp-user .friendship-button {
        margin-top: 0 !important;
        margin-bottom: 0 !important; /* ボタンの上下に勝手につくマージンをゼロにリセット */
        padding-bottom: 0 !important;
    }

    /* 🛠 ③ 白いメニュー枠（タブ）を自力で上にスライドさせて、ボタンに接近させる */
    body.bp-user #buddypress div.profile-nav-wrap,
    body.bp-user #buddypress nav.main-navs,
    body.bp-user #buddypress .users-nav {
        /* スマホ専用の強力な引き上げ（-22px）を叩き込み、隙間を綺麗に埋め尽くします */
        margin-top: -5px !important; 
        position: relative !important;
        z-index: 10 !important;
    }
}

/* ==========================================================================
   🐾 【ルームヘッダー・仕上げ】名前太さ800固定 ＆ SP名前下の余白引き締め
   ========================================================================= */

/* ① 🎯 【PC・SP共通】ぬいさんの名前の太さを、どんな状況でも「800」に超強力固定 */
body.bp-user #buddypress h2.user-nicename,
body.bp-user #buddypress h2,
body.bp-user #item-header-content h2,
body.bp-user .bb-user-content-wrap h2,
body.bp-user .member-header-sections h2 {
    font-weight: 800 !important;
}

/* ② 📱 【スマホ環境専用（幅767px以下）】名前とその下のテキストの隙間を美しく詰める */
@media (max-width: 767px) {
    body.bp-user #item-header-content h2.user-nicename,
    body.bp-user #item-header-content h2,
    body.bp-user .bb-user-content-wrap h2 {
		margin-top: 10px !important;       /* 🎯【追加】スマホ特有のお名前の上の余白を完全にゼロ化 */
        margin-bottom: 5px !important; /*  下の隙間を5pxまでギュッと引き締めます */
        line-height: 1.1 !important;    /* 文字自体の上下の座布団も薄くして接近させます */
    }

    body.bp-user #item-header-content .item-meta,
    body.bp-user #item-header-content div.item-meta {
        margin-top: 0 !important;       /* 下側のメタ情報の上マージンもゼロにして吸い寄せます */
    }
}

/* ==========================================================================
   🐾 【ルームヘッダー】完璧なカメラ位置に合わせ、アバター画像「だけ」を中央に重ねる
   ========================================================================= */

@media (min-width: 768px) {
    /* 完璧な位置にあるカメラマークやクリック用の透明マスク（aやspan）は1ミリも動かさず、
       右にズレてしまっているアバター写真（img）「だけ」を左にスライドさせて真下に重ねます！ */
    body.bp-user #item-header-avatar img,
    body.bp-user #item-header-avatar img.avatar,
    body.bp-user .users-header-avatar img {
        position: relative !important;
        
        /* 🎯 【最終調整】移動量を -110px から「-75px」へ変更！
           これでカメラマスクのド真ん中と、アバター画像のド真ん中が完全に融合します */
        left: -16px !important; 
        
        /* 縦方向の高さや余白は、1番綺麗だった状態を100%維持します */
        top: 0 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   🐾 【マイルーム限定】さがすページと同じ構造へ統一（ID消去・グレー・2行改行）
   ========================================================================= */

/* 🛠 ① 【IDの消去】＆【邪魔な・の完全消滅】 */
body.bp-user #item-header-content .item-meta .mention-name,
body.bp-user #item-header-content .item-meta .separator,
body.bp-user #item-header-content .item-meta span.separator,
body.bp-user #item-header-content .item-meta .dot {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}

/* 🛠 ② 【改行シールド破壊：強制的に縦並び2行にする魔法】
   追加CSSの最優先権限を使って、BuddyBossの改行させない呪いを完全に破壊します */
html body.bp-user #buddypress #item-header #cover-image-container #item-header-cover-image #item-header-content .item-meta,
body.bp-user #item-header-content .item-meta {
    white-space: normal !important; 
    display: flex !important;
    flex-direction: column !important; /* 🎯 どんなことがあっても絶対に縦2段にします */
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    word-spacing: normal !important; 
    gap: 4px 0 !important; /* 参加日と訪問中の間の上下の隙間を4pxあける */
}

/* 🛠 ③ 【文字色をさがすページの優しい灰色に統一】 */
html body.bp-user #buddypress #item-header #cover-image-container #item-header-cover-image #item-header-content .item-meta,
body.bp-user #item-header-content .item-meta {
    color: #939598 !important; /* 🎯 さがすページと同じグレー */
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
}

/* ==========================================================================
   🐾 【他人のルーム限定】不要な「切り替え」「…（More Options）」を完全消滅
   ========================================================================= */

/* ① 「切り替え」ボタンを画面上から物理的に消去 */
body.bp-user .member-header-actions-wrap a[href*="action=switch_to_user"],
body.bp-user #item-header-content .action a[href*="switch_to_user"],
body.bp-user #item-header-content a.switch-user-link,
body.bp-user #user_switching_switch_to {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ② 三点リーダー「…」と「View As」のメニューを丸ごと深い階層から物理消滅 */
html body.bp-user #buddypress #item-header #item-header-content .member-header-actions-wrap .bb_more_options,
body.bp-user #item-header-content .bb_more_options,
body.bp-user #item-header-content .bb_more_options_action,
body.bp-user #item-header-content i.bb-icon-ellipsis-h,
body.bp-user .view-as-trigger-wrap,
body.bp-user .bp-view-as-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   🤝 【マイルーム専用】申請ボタンを全ステータス（申請中・成立）で完全同期
   ========================================================================= */

/* 🛠 ① ボタン全体の形・サイズ・極太フォントをお部屋の全状態で固定 */
body.bp-user #item-header-content .member-header-actions-wrap .friendship-button a,
body.bp-user #item-header-content .member-header-actions-wrap .friendship-button button,
body.bp-user #item-header-content .action .friendship-button a,
body.bp-user #item-header-content .action .friendship-button button,
body.bp-user div#buddypress .friendship-button button.friendship-button,
body.bp-user div#buddypress .friendship-button a.button,
body.bp-user .friendship-button .pending_friend,
body.bp-user .friendship-button .is_friend {
    display: block !important;
    visibility: visible !important;
    width: 220px !important;         /* 🎯 さがすページと全く同じ220px幅 */
    max-width: 220px !important;
    min-width: 220px !important;
    height: 38px !important;          /* 🎯 高さを38pxに固定 */
    line-height: 38px !important;
    padding: 0 !important;
    margin: 0 auto !important;        /* 🎯 ど真ん中にセンタリング */
    border-radius: 3px !important;    /* 🎯 探すページと同じパキッとした角丸3px */
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-weight: 800 !important;      /* 🎯 太さ800の極太文字 */
    font-size: 14px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background-color 0.2s ease !important;
}

/* 🛠 ② 不要なアイコン（iタグ）を消去 */
body.bp-user #item-header-content .friendship-button i,
body.bp-user #item-header-content .friendship-button button i {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 🛠 ③ お部屋ページ特有のクラス名を直撃して色を固定 */

/* 👥 A. 未申請（通常時：ダークグレー） */
body.bp-user .friendship-button.not_friends button,
body.bp-user .friendship-button.not_friends a,
body.bp-user .friendship-button.add button {
    background-color: #4A4A4A !important; 
    color: #FFFFFF !important; 
}

/* 📤 B. 申請中（通常オレンジ ➡ さがすページと完全一致！）
   お部屋専用の「requested」「pending_friend」という隠れクラスを捕まえ、オレンジ色に変身させます */
body.bp-user .friendship-button.pending button,
body.bp-user .friendship-button.pending a,
body.bp-user .friendship-button.requested button,
body.bp-user .friendship-button.requested a,
body.bp-user .friendship-button .pending_friend,
body.bp-user .friendship-button.awaiting_response button {
    background-color: #FFA500 !important; /* 🎯 さがすページと同じ「申請中」の鮮やかなオレンジ */
    color: #FFFFFF !important; 
}
/* ホバー時は赤（キャンセル色）にする最高UXを移植 */
body.bp-user .friendship-button.pending button:hover,
body.bp-user .friendship-button.requested button:hover,
body.bp-user .friendship-button .pending_friend:hover { 
    background-color: #4A4A4A !important; 
}

/* 🤝 C. ぬいとも成立（濃いピンク「・∞・」） */
body.bp-user .friendship-button.is_friend button,
body.bp-user .friendship-button.is_friend a,
body.bp-user .friendship-button .is_friend {
    background-color: #E94B8A !important; 
    color: #FFFFFF !important; 
}
body.bp-user .friendship-button.is_friend button:hover,
body.bp-user .friendship-button .is_friend:hover { 
    background-color: #d63674 !important; 
}