/* ==========================================
   1. 全体共通・フォント・余白リセット
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho:wght@400;700&display=swap');
 
body, h1, h2, h3, h4, h5, h6, p, a, input,
button, select, textarea, 
.um, .um *, .um-input, .um-button {
    font-family: "BIZ UDMincho", "Hiragino Mincho ProN", "MS Mincho", serif !important;
}
 
html {
    overflow-x: hidden !important;
    overflow-y: scroll !important; /* 縦バーをhtml側に固定 */
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
 
body {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* body側のバーを消す */
    width: 100% !important;
    position: relative;
    margin: 0;
}
 
#page, .site {
    overflow: hidden !important;
    width: 100% !important;
}
 
/* リンク等のクリック時の点線を一括削除 */
#menu-main-menu li a,
#menu-main-menu li a:focus,
#menu-main-menu li a:active,
.custom-logo-link,
.custom-logo-link:focus,
.custom-logo-link:active,
.site-img-logo,
.site-img-logo:focus,
.site-img-logo:active,
.elementor-heading-title a,
.elementor-heading-title a:focus,
.elementor-heading-title a:active {
    outline: none !important;
    box-shadow: none !important;
}
 
/* ==========================================
   2. WordPress管理バーの制御（非表示）
   ========================================== */
#wpadminbar {
    display: none !important;
}
 
.admin-bar .boot-sticky-top,
.admin-bar .custom-header {
    top: 0 !important;
}
 
/* ==========================================
   3. ヘッダーエリア
   ========================================== */
/* ロゴ画像の表示サイズ制限 */
.site-img-logo,
.header__branding .custom-logo-link img {
    width: 60px !important; 
    height: auto !important;
    object-fit: contain;
}
/* ロゴ横のテキスト設定 */
.header__branding .custom-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.header__branding .custom-logo-link::after {
    content: "Protect JP";
    margin-left: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
}
/* PCレイアウト調整（25% : 50% : 25% の比先に固定） */
@media (min-width: 768px) {
    .header__search {
        display: none !important;
        flex: 0 0 0 !important;
        max-width: 0 !important;
    }
    .header__branding.boot-col-md-2 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .header__navigation.boot-col-md-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        display: flex !important;
        justify-content: center !important;
    }
    .header__user-account.boot-col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
    #bs-navbar-primary {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
}
 
/* 画面幅によるヘッダーのレスポンシブ微調整 */
@media (max-width: 1100px) {
    .header__user-account .um-header-avatar-name {
        display: none !important;
    }
}
 
@media (max-width: 767px) {
    #masthead.site-header {
        padding: 10px 0 0 0 !important;
    }
    .header__navigation {
        justify-content: flex-start !important;
        padding-left: 13px !important;
    }
    .navbar-toggler {
        margin-left: 13px !important;
        border: none !important;
        outline: none !important;
    }
    .header__branding .custom-logo-link::after {
        line-height: 1;
    }
    .site-img-logo,
    .header__branding .custom-logo-link img {
        width: 50px !important; /* スマホでは一回り小さく */
    }
}
 
/* ==========================================
   4. UM グループを探す（ディレクトリ）
   ========================================== */
/* 不要項目の非表示 */
/*.um-groups-found-posts,
#um-groups-filters {
    display: none !important;
}*/
 
/* グループ画像コンテナ調整 */
.um-groups-directory .um-group-image-container {
    padding: 20px 0 10px 0 !important;
    text-align: center !important;
}
.um-groups-directory .um-group-image-container img.um-group-image {
    width: 130px !important;
    height: 130px !important;
    object-fit: cover !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
}
.um-groups-directory .group-grid-inner {
    padding-top: 10px !important;
}
 
/* 検索フォーム：一覧共通黒一本線デザイン */
.um-groups-directory-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 0 0 0 !important;
    margin-bottom: 30px !important;
}
.um-groups-directory-header .boot-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    width: 100% !important;
    margin: 0 !important;
    padding-bottom: 8px !important; 
    border-bottom: 2px solid #000000 !important;
}
.um-groups-directory-header .boot-col-md-5 {
    width: auto !important;
    max-width: none !important;
    flex: 1 !important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
}
.um-groups-directory-header .boot-col-md-7.group-search-filter {
    width: auto !important;
    max-width: none !important;
    flex: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}
 
/* 検索フォーム内パーツ統合設定 */
.um-groups-directory-header input[type="text"],
.um-groups-directory-header select,
.um-groups-directory-header input[type="submit"],
.um-groups-directory-header .primary-button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    font-size: 16px !important;
    color: #444444 !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    height: 40px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
 
.um-groups-directory-header select {
    appearance: select !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    min-width: 170px !important;
    cursor: pointer !important;
    line-height: 40px !important;
    padding-right: 20px !important;
}
.um-groups-directory-header input[type="text"] {
    width: 100% !important;
    display: inline-block !important;
    line-height: 40px !important;
    -webkit-text-security: none !important;
}
 
/* プレースホルダーのカラー統一 */
.um-groups-directory-header input[type="text"]::placeholder,
.um-groups-directory-header input[type="text"]::-webkit-input-placeholder,
.um-groups-directory-header input[type="text"]::-moz-placeholder,
.um-groups-directory-header input[type="text"]:-ms-input-placeholder {
    color: #444444 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
 
.um-groups-directory-header input[type="submit"],
.um-groups-directory-header .primary-button {
    width: auto !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    justify-content: center !important;
}
.um-groups-directory-header select:hover,
.um-groups-directory-header input[type="submit"]:hover,
.um-groups-directory-header .primary-button:hover {
    color: #888888 !important;
}
 
/* 検索フォーム：スマホレスポンシブ */
@media (max-width: 991px) {
    .um-groups-directory-header .boot-row {
        flex-wrap: wrap !important;
        border-bottom: none !important;
        gap: 15px !important;
    }
    .um-groups-directory-header .boot-col-md-5,
    .um-groups-directory-header .boot-col-md-7.group-search-filter {
        width: 100% !important;
        flex: none !important;
        flex-wrap: wrap !important;
        border-bottom: 1px solid #000000 !important;
        padding-bottom: 5px !important;
        justify-content: space-between !important;
    }
    .um-groups-directory-header select,
    .um-groups-directory-header input[type="text"] {
        width: 100% !important;
    }
}
 
/* グループカードグリッドデザイン */
.um-groups-directory .group-grid {
    margin-bottom: 24px !important;
}
.um-groups-directory .group-grid-inner {
    background-color: #ffffff !important;
    border-radius: 30px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.um-groups-directory .group-grid-inner:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
}
.um-groups-directory .um-group-image-container,
.um-groups-directory .um-group-image-container a,
.um-groups-directory .um-group-image-container img {
    border-radius: 16px !important;
    overflow: hidden !important;
}
.um-groups-directory .um-group-text-container {
    padding: 12px 0 !important;
}
.um-groups-directory .um-group-name {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #444444 !important;
    margin: 6px 0 !important;
}
.um-groups-directory .group-meta-info {
    color: #666666 !important;
    font-size: 13px !important;
}
 
/* グループ一覧：左詰め整列ロジック */
@media (min-width: 992px) {
    .um-groups-directory.boot-row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 24px 2% !important; 
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    .um-groups-directory .group-grid {
        width: 23.5% !important; 
        max-width: 23.5% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .um-groups-directory.boot-row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 24px 4% !important; 
        width: 100% !important;
        margin: 0 auto !important;
    }
    .um-groups-directory .group-grid {
        width: 48% !important;
        max-width: 48% !important;
        flex: none !important;
        padding: 0 !important;
    }
}
@media (max-width: 767px) {
    .um-groups-directory.boot-row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px 0 !important;
    }
    .um-groups-directory .group-grid {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }
    .page-id-5409 .um-groups-directory.boot-row {
        flex-direction: column;
        align-items: center;
        margin: 0 !important;
    }
    .page-id-5409 .um-groups-directory .group-grid {
        max-width: 340px;
        margin: 0 auto !important;
        float: none !important;
    }
}
 
/* ==========================================
   5. プロフィール＆アカウント設定
   ========================================== */
/* プロフィール内のグループ検索窓 */
.um-profile-body.groups_list .um-groups-search-form input[type="text"][name="groups_search"] {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
}
 
/* プロフィールメイン枠の角丸設定 */
.um-30.um, .um-profile {
    border-radius: 30px !important;
    overflow: hidden !important;
    background-color: #fff !important;
    border: 1px solid #e0e0e0 !important;
}
@media screen and (max-width: 800px) {
    .um-30.um, .um-profile {
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: auto !important;
    }
}
 
/* プロフィール内線・背景リセット */
.um-profile-content-container,
.um-profile-body,
.um-theme-profile-single-content,
.um-theme-profile-single-content-container,
.um-form, .um-header, .um-profile-body .clear {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.um-profile-body .clear { height: 0 !important; }
.um-profile-nav-main.active ~ .um-profile-content-container { display: none !important; }
 
/* アカウント設定の不要項目非表示 */
.um-account-main .um-field-export_data { display: none !important; }
@media screen and (max-width: 1024px) {
    div[data-key="hide_in_members"] .um-field-label .um-tip-e,
    div[data-key="hide_in_members"] .um-field-label span[title],
    div[data-key="hide_in_members"] .um-field-label .um-tip-text,
    div[data-key="um_show_last_login"] .um-field-label .um-tip-e,
    div[data-key="um_show_last_login"] .um-field-label span[title],
    div[data-key="um_show_last_login"] .um-field-label .um-tip-text {
        display: none !important;
    }
    .button-toggle-appbar, .sticky-vertical-tabs { display: none !important; }
}
 
/* ==========================================
   6. グループ個別チャットページ＆地図
   ========================================== */
/* 不要ヘッダー類の削除 */
header.entry-header.s-post__header,
figure.featured-image,
figure.featured.image,
.um-groups-bodyinner-txt #jp-relatedposts,
.um-groups-bodyinner-txt .jp-relatedposts,
.um-groups-bodyinner-txt .jp-relatedposts-headline,
.s-post__content-inner #jp-relatedposts,
.s-post__content-inner .jp-relatedposts,
.um-groups-bodyinner-txt > br,
.jp-relatedposts > br {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
 
main[id="primary"].content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
 
/* 横幅の1.8倍マクロ拡張設定 */
#content.site-content .website-canvas,
#content.site-content .website-canvas > .boot-row {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
 
/* ★ [.uimob800] の依存を外し、画面幅・拡大率に関わらず常に180%拡張を維持 */
.single-um_groups .um-groups-single {
    width: 180% !important;
    max-width: 180% !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
}

.um-group-single-header,
.um-groups-directory, .um-group-item,
.um-group-tabs-wrap,
.um-group-tab-content-wrap, .um-groups-wall, .um-groups-widget {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.um-groups-head, .um-groups-bodyinner,
.um-groups-comments {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}
 
/* 地図＆メンバータブ */
.um-group-tab-content-wrap { background: transparent !important; }
.um-group-tab-content__group_map[style*="display: none"] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.um-group-tab-content__group_map .um-groups-widget {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
#map-iframe { width: 100% !important; }
 
.um-group-tab-content__members .um-group-image-wrap a img.avatar {
    border-radius: 30px !important;
    object-fit: cover !important;
}
 
/* ==========================================
   7. チャットタイムライン・レイアウト挙動制御（最新統合・位置関係補正版）
   ========================================== */
/* 通常時：すべての投稿のコメント欄（入力エリア含む）を非表示にする */
.um-groups-comments {
    display: none !important;
}
 
/* プラグイン標準の開閉クラス（.open-comments）適用時にフレックス展開（上が入力欄、下が既存ログ） */
.um-groups-widget.open-comments .um-groups-comments {
    display: flex !important;
    flex-direction: column !important;
}
 
/* コメント入力エリアの位置をコメントエリアの「一番上」に指定 */
.um-groups-comments .um-groups-comment-area {
    display: block !important;
    order: 1 !important;
    margin-bottom: 15px !important;
}
 
/* 過去ログ一覧を入力欄の「下」に配置 */
.um-groups-comments .um-groups-comments-loop {
    display: block !important;
    order: 2 !important;
}
 
/* チャット全体の並び替え（送信窓を下へ、履歴を真ん中へ） */
div.um-activity div.um-form {
    display: flex !important;
    flex-direction: column !important;
}
div.um-form div.um-groups-new-post {
    order: 3 !important;
    margin: 25px 0 0 0 !important;
}
div.um-form div.um-groups-wall {
    order: 2 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    height: 800px !important; /* スクロールボックス化 */
    overflow-y: auto !important;
    border: 1px solid #ddd !important;
    padding: 15px !important;
    background-color: #fff !important;
}
div.um-form div.um-groups-clone { display: none !important; }
div.um-form div.um-groups-load { order: 1 !important; }
 
/* タイムライン専用スクロールバーデザイン */
div.um-groups-wall::-webkit-scrollbar { width: 6px; }
div.um-groups-wall::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
 
/* 3段構成の改行・文字サイズ指定 */
.um-groups-widget .um-groups-bodyinner-txt,
.um-groups-comments-loop .um-groups-comment-text {
    display: block !important;
    margin-top: 6px !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}
 
/* コメントユーザー名の本体完全同期 */
.um-groups-comments-loop .um-groups-comment-author-link a {
    font-weight: 600 !important;
    color: #0085ba !important;
    text-decoration: none !important;
    font-size: inherit !important;
}
.um-groups-comments-loop .um-groups-comment-author-link a:hover {
    color: #006799 !important;
    text-decoration: underline !important;
}

 
/* ==========================================
   8. インラインいいね！ ＆ アバターラップ（最新統合版）
   ========================================== */
/* プラグイン標準の下部表示枠は完全に非表示 */
.um-groups-disp {
    display: none !important;
}
 
/* アクションエリア全体を横並びFlexに固定し、中央揃え */
.um-groups-left.um-groups-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px;
}
 
/* いいねボタンとコメントボタンの基準・配置を統一（古いfloatの解除） */
.um-groups-like,
.um-groups-comment {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
}
 
/* ボタン内のテキストやアイコンを縦中央で横並びにする */
.um-groups-like a,
.um-groups-comment a {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
 
/* JavaScriptでボタン内に割り込ませたアイコン群のコンテナ設定 */
.um-groups-like a .custom-inline-faces {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
    margin-left: 8px !important;
    float: none !important;
}
 
/* アバタアイコンの丸型整形とサイズ調整 */
.um-groups-like a .custom-inline-faces img {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 1px solid #ddd !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}
 
/* ==========================================
   9. ビラ掲示板（Search & Filter）
   ========================================== */
.elementor-element-c4fe6a7 .elementor-shortcode {
    padding: 20px 0 0 0 !important;
    margin-bottom: 35px !important;
}
form.searchandfilter > div > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 8px 0 !important; 
    list-style: none !important;
    border-bottom: 2px solid #000000 !important;
}
form.searchandfilter > div > ul > li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
form.searchandfilter > div > ul > li:first-child {
    flex: 1 !important;
    gap: 15px !important;
}
form.searchandfilter > div > ul > li:last-child {
    flex: none !important;
}
form.searchandfilter h4 {
    font-size: 16px !important;
    color: #444444 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
form.searchandfilter select,
form.searchandfilter input[type="submit"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}
form.searchandfilter > div > ul > li:first-child > h4 {
    display: none !important;
}
form.searchandfilter > div > ul > li:first-child > select,
form.searchandfilter > div > ul > li:last-child > input[type="submit"] {
    color: #444444 !important; 
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
form.searchandfilter > div > ul > li:last-child > input[type="submit"] {
    font-size: inherit !important;
    cursor: pointer !important;
}
form.searchandfilter > div > ul > li:first-child > select option {
    color: #444444 !important;
}
 
/* ==========================================
  10. 非ログイン（ゲスト）状態の固定枠制御
   ========================================== */
@media screen and (min-width: 768px) {
    body.page-id-32,
    body.page-id-32 #page {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
        height: auto !important;
        margin: 0 !important;
    }
    body.page-id-32 > #page > .boot-row,
    body.page-id-32 .boot-col-md-12 {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 0 auto !important;
    }
    body.page-id-32 #content {
        flex: 1 0 auto !important;
        display: block !important;
        padding: 20px 0 40px 0 !important;
    }
    body.page-id-32 #colophon {
        flex-shrink: 0 !important;
        margin-top: auto !important;
    }
}
@media screen and (max-width: 767px) {
    body.page-id-32 .elementor-32 .elementor-element-e6ae2c2,
    body.page-id-32 .elementor-shortcode,
    body.page-id-32 .um-login.um {
        max-width: 93% !important;
        width: 93% !important;
        margin: 0 auto !important;
    }
    body.page-id-32 .um-29.um {
        width: 100% !important;
    }
}

/* ==========================================
   11. フルスクリーン背景 ＆ フッター最下部吸着（グループ個別ページ追加版）
   ========================================== */
/* 背景画像を表示させたい対象に .single-um_groups を追加 */
.single-um_groups #page,
.page-id-5409 #page, .page-id-5437 #page,
.page-id-4178 #page, .page-id-4525 #page,
.um-page-profile #page {
    min-height: 100vh !important;
    position: relative !important;
    padding-bottom: 240px !important;
    box-sizing: border-box !important;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
        url('https://protect-jp.com/wp-content/uploads/2026/03/AdobeStock_491003345.jpeg') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* 内部要素の白い背景を透過させる（グループページ専用） */
.single-um_groups #content,
.single-um_groups #primary,
.single-um_groups #main,
.single-um_groups article,
.single-um_groups .s-post__content-inner,
.single-um_groups .website-canvas,
.single-um_groups .e-parent {
    background: transparent !important;
    background-color: transparent !important;
}

/* PC時のフッター最下部固定 */
@media screen and (min-width: 992px) {
    .single-um_groups #colophon,
    .page-id-5409 #colophon, .page-id-5437 #colophon,
    .page-id-4178 #colophon, .page-id-4525 #colophon,
    .um-page-profile #colophon {
        position: absolute !important;
        bottom: 0 !important;
        width: 100% !important;
        left: 0 !important;
    }
}

/* 管理バー表示時の高さ微調整 */
.admin-bar.single-um_groups #page,
.admin-bar.page-id-5409 #page, .admin-bar.page-id-5437 #page,
.admin-bar.page-id-4178 #page, .admin-bar.page-id-4525 #page,
.admin-bar.um-page-profile #page {
    min-height: calc(100vh - 32px) !important;
}
@media screen and (max-width: 782px) {
    .admin-bar.single-um_groups #page,
    .admin-bar.page-id-5409 #page, .admin-bar.page-id-4178 #page,
    .admin-bar.page-id-4525 #page, .admin-bar.page-id-47 #page,
    .admin-bar.um-page-profile #page {
        min-height: calc(100vh - 46px) !important;
    }
}
 
/* ==========================================
  12. アルバム拡張機能
   ========================================== */
.um-group-tab-content__album {
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
}

/* ==========================================
   13. カスタムドロップダウン・階層フィルター装飾
   ========================================== */
#um-custom-filters-wrap select {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    height: 36px !important;
    line-height: 36px !important;
    background: #fff !important;
    font-size: 14px !important;
    color: #44 !important;
    cursor: pointer;
}
 
#um-custom-filters-wrap select:focus {
    border-color: #000000 !important;
}
 
#um-custom-filters-wrap .tag2-group label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #444444;
    transition: color 0.2s ease;
}
 
#um-custom-filters-wrap .tag2-group label:hover {
    color: #888888;
}
 
#um-custom-filters-wrap .tag2-group input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
}
 
/* スマホ対応：はみ出しを防ぎ縦並びへの柔軟な移行 */
@media (max-width: 991px) {
    #um-custom-filters-wrap {
        margin-left: 0 !important;
        width: 100% !important;
        gap: 10px !important;
    }
    #um-custom-filters-wrap .location-group,
    #um-custom-filters-wrap .tag2-group {
        width: 100% !important;
        margin-left: 0 !important;
        border-left: none !important;
        padding-left: 0 !important;
        flex-wrap: wrap;
    }
}

/* ==========================================
   新メタボックス構造（custom-wpgb-meta-box）専用スタイル
   ========================================== */
.custom-wpgb-meta-box {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* 各行の隙間 */
    margin: 0 !important;
    padding: 0 !important;
}

/* 1段目・2段目のテキスト共通 */
.custom-wpgb-meta-box .group-meta-info {
    font-size: 13px !important;
    color: #666666 !important;
    display: block !important;
    text-align: center !important;
}

/* ★修正：動的な数値・時間の太さを「500（スマートな細さ）」に固定 */
.custom-wpgb-meta-box .group-meta-info .num {
    font-size: 14px !important;
    font-weight: 500 !important; /* 太字(600)から500へ落とす */
    color: #444444 !important;
}

/* 3段目：グループ参加/退会ボタンの強制調整（14px） */
.custom-wpgb-meta-box .um-groups-single-button .um-button {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    margin-top: 10px !important;
}


/* WP Grid Builderが自動付与するブロック間インライン余白を強制無効化 */
.wp-grid-builder .wpgb-block-3 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important; /* ブロック自体の空改行の幅を0に */
}

/* テキストやコンテナ要素の行間を再定義して密着させる */
.wp-grid-builder .um-group-text-container,
.wp-grid-builder .um-group-button-container {
    line-height: 1.2 !important;
}

/* ==========================================
   1. 最背面（#page）に背景画像を固定
   ========================================== */
.single-um_groups #page {
    min-height: 100vh !important;
    position: relative !important;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
        url('https://protect-jp.com/wp-content/uploads/2026/03/AdobeStock_491003345.jpeg') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
/* ==========================================
   2. #page と .um-groups-single の間にある全要素を透明化
   ========================================== */
body.single-um_groups,
.single-um_groups #content,
.single-um_groups #primary,
.single-um_groups #main,
.single-um_groups article,
.single-um_groups .entry-content,
.single-um_groups .s-post__content,
.single-um_groups .s-post__content-inner,
.single-um_groups .s-post__wrapper,
.single-um_groups .website-canvas,
.single-um_groups .boot-row,
.single-um_groups .boot-col-md-12,
.single-um_groups .boot-col-12 {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ==========================================
   3. チャットエリア本体（.um-groups-single）だけに白背景を付与
   ========================================== */
.single-um_groups .um-groups-single {
    background-color: #ffffff !important; /* チャット内だけ白背景にする */
    padding: 20px !important;              /* 内側の余白 */
    border-radius: 16px !important;         /* 角丸にして綺麗に浮かせる */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; /* うっすら影をつけて背景と切り離す */