/* ==========================================
   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;
}
 
.um.um-groups-single.uimob800 {
   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 .um-groups-comment-area { display: none; }
.um-groups-widget.active-comment .um-groups-comments .um-groups-comment-area { display: block !important; }
 
.um-groups-wall .um-groups-comments { display: none; }
.um-groups-wall .um-groups-widget.open-comments .um-groups-comments { display: block !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; }
 
.um-groups-left.um-groups-actions {
   display: flex !important;
   align-items: center !important;
   gap: 16px;
}
.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;
}
.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. フルスクリーン背景 ＆ フッター最下部吸着
  ========================================== */
.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;
}
 
@media screen and (min-width: 992px) {
 .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;
  }
}
 
.page-id-5409 .elementor-5409 .e-parent,
.page-id-5437 .elementor-5437 .e-parent,
.page-id-4178 .elementor-4178 .e-parent,
.page-id-4525 .elementor-4525 .e-parent,
.um-page-profile .e-parent {
   background: transparent !important;
}
 
.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.page-id-5409 #page, .admin-bar.page-id-5437 #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;
}

/* ==========================================
   7. チャットタイムライン・レイアウト挙動制御（復元・修正版）
   ========================================== */
/* コメントエリア・入力エリアの初期状態を非表示にロック */
.um-groups-comments,
.um-groups-comments .um-groups-comment-area {
    display: none !important;
}

/* JavaScriptで対応するクラスが付与された場合のみ、コメントエリアを表示する */
.um-groups-widget.open-comments .um-groups-comments,
.um-groups-widget.active-comment .um-groups-comments .um-groups-comment-area {
    display: block !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;
}

/* アクションエリア全体をFlexboxにして、中身のボタン同士の縦位置を完全に中央で揃える */
.um-groups-left.um-groups-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px; /* ボタン同士の横の隙間 */
}

/* いいねボタンとコメントボタンの基準を統一 */
.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; /* 「いいね (1)」との間の余白 */
    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;
}

/* ==========================================
   7. チャットタイムライン・レイアウト挙動制御（競合解消版）
   ========================================== */
/* 通常時：すべての投稿のコメント欄（入力エリア含む）を非表示にする */
.um-groups-comments {
    display: none !important;
}

/* プラグイン標準の開閉クラス（.open-comments）が適用された時だけ100%確実に出す */
.um-groups-widget.open-comments .um-groups-comments {
    display: block !important;
}

/* コメント入力エリア（.um-groups-comment-area）は常にコメント枠内に表示させる */
.um-groups-comments .um-groups-comment-area {
    display: block !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;
}

/* いいねボタンとコメントボタンの基準を統一 */
.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;
}

/* ==========================================
   7. チャットタイムライン・レイアウト挙動制御（位置関係補正版）
   ========================================== */
/* 通常時：すべての投稿のコメント欄（入力エリア含む）を非表示にする */
.um-groups-comments {
    display: none !important;
}

/* プラグイン標準の開閉クラス（.open-comments）が適用された時だけ100%確実に出す */
.um-groups-widget.open-comments .um-groups-comments {
    display: block !important;
    /* ★超重要：親の逆転(reverse)をリセットし、コメント欄の中身は「上が入力欄、下が既存ログ」の正しい位置関係に戻す */
    display: flex !important;
    flex-direction: column !important;
}

/* コメント入力エリア（.um-groups-comment-area）の位置と表示確定 */
.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;
}

.um-groups-left.um-groups-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px;
}

.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;
}

.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;
}

/* ==========================================
   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: #444 !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;
    }
}

/* ==========================================
   14. 独自実装：グループ検索バーUIスタイル（方針B・Select2対応版）
   ========================================== */
.um-groups-directory-header {
    display: none !important;
}

.custom-group-search-bar {
    width: 100%;
    margin-bottom: 30px !important;
    padding: 20px 0 0 0 !important;
}

.custom-search-form .search-flex-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    width: 100% !important;
    padding-bottom: 8px !important; 
    border-bottom: 2px solid #000000 !important;
}

/* 通常のテキスト・ドロップダウンリセット */
.custom-search-form input[type="text"],
.custom-search-form select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 16px !important;
    color: #444444 !important;
    font-weight: 600 !important;
    height: 40px !important;
    box-sizing: border-box !important;
}
.custom-search-form input[type="text"] { width: 100% !important; }
.custom-search-form select {
    appearance: select !important;
    -webkit-appearance: menulist !important;
    cursor: pointer !important;
    min-width: 140px !important;
}

/* Select2（複数ドロップダウン選択）の黒一本線テーマ上書き */
.custom-search-form .search-multiselect-wrap {
    flex: 1 !important;
    min-width: 220px !important;
    border-left: 1px solid #ccc;
    padding-left: 15px;
}
.custom-search-form .select2-container--default .select2-selection--multiple {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    min-height: 40px !important;
    display: flex;
    align-items: center;
}
.custom-search-form .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 !important;
    font-family: inherit !important;
}
/* タグチップの装飾 */
.custom-search-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #444444 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    flex-direction: row-reverse;
    gap: 6px;
}
.custom-search-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
    border: none !important;
    font-size: 14px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    font-weight: bold;
}
.custom-search-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent !important;
    color: #ff4d4d !important;
}
/* ポップアップドロップダウンのフォント合わせ */
.select2-dropdown {
    border: 1px solid #000000 !important;
    border-radius: 8px !important;
    z-index: 99999 !important;
}
.select2-results__option {
    font-family: "BIZ UDMincho", serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ボタン */
.custom-search-form .search-buttons-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}
.custom-search-form .submit-btn,
.custom-search-form .clear-btn {
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #444444 !important;
    font-weight: 600 !important;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
}
.custom-search-form .submit-btn:hover,
.custom-search-form .clear-btn:hover { color: #888888 !important; }

/* スマホ対応 */
@media (max-width: 991px) {
    .custom-search-form .search-flex-row {
        flex-wrap: wrap !important;
        border-bottom: none !important;
        gap: 12px !important;
    }
    .custom-search-form .search-input-wrap,
    .custom-search-form .search-select-wrap,
    .custom-search-form .search-multiselect-wrap,
    .custom-search-form .search-buttons-wrap {
        width: 100% !important;
        border-bottom: 1px solid #000000 !important;
        padding-bottom: 5px !important;
    }
    .custom-search-form .search-multiselect-wrap {
        border-left: none !important;
        padding-left: 0 !important;
    }
    .custom-search-form .search-buttons-wrap { justify-content: space-between; }
}