/* 😬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;
}
/* 😬2. 余白に関して*/
/* 新しい解決策：二重バーを防ぎ、モバイルの余白もカットする */
html {overflow-x: hidden !important;
    overflow-y: scroll !important; /* 縦バーをhtml側に固定 */
    width: 100%;
}
body {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* body側のバーを消す */
    width: 100% !important;
    position: relative;
    margin: 0;
}
/* Elementorなどを使っている場合、全体を包むタグも指定 */
#page, .site {
    overflow: hidden !important;
    width: 100% !important;
}
/* 😬3. WordPress管理バーを非表示*/
#wpadminbar {
    display: none !important;
}
html {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
@media screen and (max-width: 782px) {
    html {
        margin-top: 0 !important;
    }
}
.admin-bar .boot-sticky-top,
.admin-bar .custom-header {
    top: 0 !important;
}

/* 😬4. ヘッダー*/
/* ヘッダーレイアウト調整（2 : 5 : 3 の比率に固定）*/
@media (min-width: 768px) {
    /* 1. 検索枠を完全に無効化してスペースを空ける */
    .header__search {
        display: none !important;
        flex: 0 0 0 !important;
        max-width: 0 !important;
    }
    /* 2. ロゴエリア (2/10 = 20%) */
    .header__branding.boot-col-md-2 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    /* 3. メインメニュー (5/10 = 50%) */
    .header__navigation.boot-col-md-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        display: flex !important;
        justify-content: center !important; /* メニューをこの50%枠の中で中央寄せ */
    }
    /* 4. ユーザーエリア (3/10 = 30%) */
    .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) {
    /* 1. ハンバーガーメニューを包むナビゲーションエリアの位置調整 */
    .header__navigation {
        justify-content: flex-start !important; /* 左揃えを維持しつつ */
        padding-left: 13px !important;         /* 左側に隙間を作って右に押し出す */
    }
    /* 2. ボタン自体に直接余白を当てる（より確実な方法） */
    .navbar-toggler {
        margin-left: 13px !important; /* 数値を大きくするほど右に寄ります */
        border: none !important;      /* 枠線が気になる場合は消去 */
        outline: none !important;
    }
}
/* ロゴの横にサイト名を追加 */
.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;    /* 改行を防ぐ */
}
@media (max-width: 767px) {
    /* 1. ヘッダー全体に少し上下の厚みを持たせる */
    #masthead.site-header {
        padding-top: 10px !important;    /* 上の余白 */
        padding-bottom: 0px !important; /* 下の余白 */
    }
    /* 4. ロゴ横のテキストの位置がズレる場合はここで微調整 */
    .header__branding .custom-logo-link::after {
        line-height: 1; /* 縦方向の中央を安定させる */
    }
}
/* ロゴの表示サイズをさらに小さく固定 */
.site-img-logo,
.header__branding .custom-logo-link img {
    /* ここを 80px や 60px など、お好みの数値に変えてください */
    width: 60px !important; 
    height: auto !important; /* 縦横比を維持 */
    object-fit: contain;
}
/* スマホ版でもう少し調整したい場合 */
@media (max-width: 767px) {
    .site-img-logo,
    .header__branding .custom-logo-link img {
        width: 50px !important; /* スマホではさらに一回り小さく */
    }
}
/* 1. メインナビゲーションメニューの点線を削除 */
#menu-main-menu li a,
#menu-main-menu li a:focus,
#menu-main-menu li a:active {
    outline: none !important;
    box-shadow: none !important;
}
/* 2. ロゴ画像（Protect JP）をクリックした時の点線を削除 */
.custom-logo-link,
.custom-logo-link:focus,
.custom-logo-link:active,
.site-img-logo,
.site-img-logo:focus,
.site-img-logo:active {
    outline: none !important;
    box-shadow: none !important;
}
/* 3. フッターなどのテキストロゴ（Protect JP）をクリックした時の点線を削除 */
.elementor-heading-title a,
.elementor-heading-title a:focus,
.elementor-heading-title a:active {
    outline: none !important;
    box-shadow: none !important;
}
/* 😬5. UM グループを探す*/
　/*「すべてのグループ」「参加中のグループ」「新規作成」の削除*/
.um-groups-found-posts {
    display: none !important;
}
#um-groups-filters {
    display: none !important;
}
/* 1. ロゴ画像のサイズを調整 */
.um-groups-directory .um-group-image-container img.um-group-image {
    width: 130px !important;  /* お好みのサイズ（100px〜150px程度がおすすめ）に調整してください */
    height: 130px !important;
    object-fit: cover !important; /* 画像が歪まないように調整 */
    margin: 0 auto !important;    /* 中央寄せ */
    border-radius: 8px !important; /* 少し角を丸くするとオシャレです */
}
/* 2. 画像を囲むコンテナの余白を調整 */
.um-groups-directory .um-group-image-container {
    padding: 20px 0 10px 0 !important;
    text-align: center !important;
}
/* 3. ロゴを小さくした分、カード全体のバランスを整える */
.um-groups-directory .group-grid-inner {
    padding-top: 10px !important;
}

/* グループ検索フォームの要素を綺麗に横一列に整列*/
/* 1. 検索フォーム内のレイアウトをFlexboxで横一列の均等配置にする */
.um-groups-directory-header .boot-row {
    display: flex !important;
    flex-wrap: nowrap !important; /* 絶対に折り返させない */
    align-items: center !important; /* 上下の中央を完全に揃える */
    justify-content: space-between !important;
    gap: 10px !important; /* パーツごとの横の隙間 */
    width: 100% !important;
    margin: 0 !important;
}
/* 2. Bootstrapの標準幅制限（Grid）を解除してコンテンツ幅に最適化 */
.um-groups-directory-header .boot-col-md-5,
.um-groups-directory-header .boot-col-md-7 {
    width: auto !important;
    max-width: none !important;
    flex: 1 !important; /* 入力欄側のエリアを広げる */
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
}
/* 3. 右側のセレクトボックスとボタンが入るエリアの調整 */
.um-groups-directory-header .group-search-filter {
    flex: 2 !important; /* 右側のフィルターエリアの比率を少し大きめに */
    justify-content: flex-end !important;
}
/* 4. すべての入力欄、セレクトボックス、ボタンの「高さ」と「見たまのバランス」を統一 */
.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 {
    height: 42px !important; /* すべての縦幅を42pxで完全統一 */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 42px !important; /* ボタンやセレクト内の文字の縦中央揃え */
    vertical-align: middle !important;
    border-radius: 4px !important; /* 角の丸みを揃えてマイルドに */
}
/* 5. 各パーツの個別の横幅バランス調整 */
.um-groups-directory-header input[type="text"] {
    width: 100% !important; /* 検索窓は左側エリアいっぱいに広げる */
}
.um-groups-directory-header select {
    min-width: 160px !important; /* 文字が切れないように最低限の幅を確保 */
    flex: 1 !important;
}

/* 検索・クリアボタンの調整 */
.um-groups-directory-header input[type="submit"],
.um-groups-directory-header .primary-button {
    flex: none !important;
    width: auto !important;
    white-space: nowrap !important; /* ボタン文字の改行を防止 */
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}
/* スマホ・タブレット等（画面が狭い時）のレスポンシブ対応 */
@media (max-width: 991px) {
    .um-groups-directory-header .boot-row,
    .um-groups-directory-header .boot-col-md-5,
    .um-groups-directory-header .boot-col-md-7 {
        flex-wrap: wrap !important; /* 画面が狭い時は無理せず綺麗に折り返す */
        width: 100% !important;
    }
    .um-groups-directory-header input[type="text"],
    .um-groups-directory-header select {
        width: 100% !important; /* スマホでは1本ずつ全幅にする */
        flex: none !important;
    }
    .um-groups-directory-header .group-search-filter {
        justify-content: space-between !important;
    }
    .um-groups-directory-header input[type="submit"],
    .um-groups-directory-header .primary-button {
        flex: 1 !important; /* スマホでは検索とクリアボタンをハーフ＆ハーフに */
    }
}
/*検索フォーム：高さ完全一致 ＆ プレースホルダー確実表示版*/
/* 1. 外側のコンテナリセット */
.um-groups-directory-header {
    background: transparent !important;
    background-color: 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;
}
/* 2. すべての要素の枠・背景を消し、同じ高さ（40px）で縦中央に文字を配置 */
.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;
    border-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !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: 0 20px 0 0 !important;
}
/* 4. 【最重要】プレースホルダー文字をブラウザ標準機能で安全に書き換えて表示 */
.um-groups-directory-header input[type="text"] {
    width: 100% !important;
    display: inline-block !important;
    line-height: 40px !important;
}
/* HTML側の元の文言が何であれ、強制的に「グループ名を入力して検索」に見せかける魔改造 */
.um-groups-directory-header input[type="text"] {
    -webkit-text-security: none !important;
}

/* 各ブラウザのプレースホルダー表示を確実に薄目の黒(#444444)で染める */
.um-groups-directory-header input[type="text"]::-webkit-input-placeholder {
    color: #444444 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
.um-groups-directory-header input[type="text"]::-moz-placeholder {
    color: #444444 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
.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="text"]::-ms-input-placeholder {
    color: #444444 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
.um-groups-directory-header input[type="text"]::placeholder {
    color: #444444 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* 5. 検索・クリアボタンのテキストリンク化 */
.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;
    }
}
/* グループ一覧グリッド：細線 ＆ 上下隙間調整版*/
/* 1. 各グループグリッド自体の「上下の隙間」を確保 */
.um-groups-directory .group-grid {
    margin-bottom: 24px !important; /* ★上下のグリッドが接しないように下に24pxの隙間を作る */
}
/* 2. カードの縁取りを細く（1px）し、30pxの丸みをつける */
.um-groups-directory .group-grid-inner {
    background-color: #ffffff !important;
    border-radius: 30px !important;        /* 四隅の丸み30pxは維持 */
    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;
}
/* 3. グループ画像自体の表示調整 */
.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;
}
/* 4. カード内のテキストエリア調整 */
.um-groups-directory .um-group-text-container {
    padding: 12px 0 !important;
}
/* グループ名（タイトル）のデザイン（太さ600、薄目の黒） */
.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;
}
/*ホバー時にふわっと浮き出る演出 */
.um-groups-directory .group-grid-inner:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
}
/* ==========================================
   グループ一覧：2列目も綺麗に左詰めしつつ全体を中央配置
   ========================================== */

/* 1. PC（デスクトップ）表示：4列で綺麗に左詰めしつつコンテナ中央に収める */
@media (min-width: 992px) {
    .um-groups-directory.boot-row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important; /* ★2列目以降は必ず「左詰め」で配置する */
        
        /* カード同士の隙間を2%に固定し、全体の左右マージンを自動調整して中央寄せ */
        gap: 24px 2% !important; 
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
/* 💡隙間（2% × 3箇所 ＝ 6%）を引いた残りの94%を4等分（1枠 23.5%）にして誤差をゼロにする */
    .um-groups-directory .group-grid {
        width: 23.5% !important; 
        max-width: 23.5% !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* 2. タブレット表示（画面幅768px〜991px）：2列で左詰め中央 */
@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;                /* 隙間4% */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
/*隙間4%を引いた残り96%を2等分（1枠)48%*/
    .um-groups-directory .group-grid {
        width: 48% !important;
        max-width: 48% !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* スマホ表示（画面幅767px以下）：1列 */
@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-left: 0 !important;
        padding-right: 0 !important;
    }
}
/*😬6. プロフィールページのグループ*/

/* 1. 「グループ名を入力」検索窓の枠（ボーダー）を削除 */
.um-profile-body.groups_list .um-groups-search-form input[type="text"][name="groups_search"] {
    border: none !important;
    box-shadow: none !important;
  !important; /* 枠を消す代わりに、入力欄と認識しやすいよう薄いグレーを敷きます */
    outline: none !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
}

/*😬7.グループページ*/
/* タイトル・アイキャッチ画像、および上部空間を完全に消去する*/
header.entry-header.s-post__header,
figure.featured-image,
figure.featured.image {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
/*特殊文字混入によるメイン領域の横幅・余白崩れを強制補正*/
main[id="primary"].content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/*2. チャット内に入り込んだJetpack（関連投稿）の巨大な隙間・グレー背景を消去*/
.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 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
/* 自動挿入される不要な改行タグ（br）による縦方向の隙間をリセット */
.um-groups-bodyinner-txt > br,
.jp-relatedposts > br {
    display: none !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;
}
/*ヘッダーに干渉せず、チャット領域の website-canvas のみ左右余白を消去*/
/* #content（メイン領域）の内側にある website-canvas だけを指定 */
#content.site-content .website-canvas {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* そのすぐ内側にある boot-row も横幅をいっぱいに広げる */
#content.site-content .website-canvas > .boot-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/*グループコンテナだけを基準位置から1.3倍に広げる*/
/* 1. 指定のグループメインコンテナを基準から左右対称に引き伸ばす */
.um.um-groups-single.uimob800 {
    width: 180% !important; /* 元の幅から1.3倍（130%）に拡張 */
    max-width: 180% !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* 左右均等に広げるための位置補正 */
    box-sizing: border-box !important;
}
/* 2. 内側の各種ウィジェットやタイムラインが1.3倍の枠線ぴったりに広がるよう同期 */
.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;
}
/* 3. 地図（ポスティングマップ）のコンテナとiframeも1.3倍の幅に完全フィット */
.um-group-tab-content__group_map .um-groups-widget {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#map-iframe {
    width: 100% !important;
}
/* 4. チャット内テキストが端に寄りすぎないための内側クッション */
.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__members .um-group-image-wrap a img.avatar {
    border-radius: 30px !important;
    object-fit: cover !important; /* 画像が歪むのを防ぐ */
}
/*😬8.アカウントプロフィール*/
/* 枠線や余白が残って不自然な場合は、こちらも追加してください */
.um-profile-nav-main.active ~ .um-profile-content-container {
    display: none !important;
}
/* プロフィールページのメイン枠の四隅を30px丸くする */
.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 {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* フォームの各セクションの区切り線も念のため消去 */
.um-form, .um-header {
    border-bottom: none !important;
}
/* ページ下部（clearクラスなど）で発生する余分な線をリセット */
.um-profile-body .clear {
    border: none !important;
    height: 0 !important;
}
/*😬9.アカウント設定*/
/* Ultimate Member アカウントページの「データのダウンロード」項目を非表示 */
.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;
    }
}
/*😬10.ツールバーの非表示*/
/* スマホ・タブレット版（1024px以下）で右側の固定ツールバーを非表示 */
@media screen and (max-width: 1024px) {
    .button-toggle-appbar,
    .sticky-vertical-tabs {
        display: none !important;
    }
}
/*😬11チャット画面の洗練*/
/* 初期状態：すべての投稿のコメント入力欄を非表示にする */
.um-groups-comments .um-groups-comment-area {
    display: none;
}
/* ボタンが押されて「active-comment」クラスがついた投稿だけ入力欄を表示する */
.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;
}
/* 1. 上にある「チャットを送信」入力欄の箱を、一番下（order: 3）へ強制移動 */
div.um-form div.um-groups-new-post {
    order: 3 !important;
    margin-top: 25px !important;
    margin-bottom: 0 !important;
}
/* 2. メッセージ履歴のタイムラインを真ん中（order: 2）に配置 */
div.um-form div.um-groups-wall {
    order: 2 !important;
    display: flex !important;
    flex-direction: column-reverse !important; /* 中身の時系列を逆転（下が最新） */
}
/* 3. クローン用のダミー要素が変な位置に表示されるのを完全にブロック */
div.um-form div.um-groups-clone {
    display: none !important;
}
/* 4. 「もっと読む」等の読み込みボタンがあれば、それらを一番上（order: 1）へ */
div.um-form div.um-groups-load {
    order: 1 !important;
}
/* メッセージの履歴エリア（タイムライン）の高さとスクロールの設定 */
div.um-form div.um-groups-wall {
    height: 800px !important;       /* 高さを400pxに修正してコンパクトに */
    overflow-y: auto !important;     /* 400pxを超えたら縦スクロールを出す */
    border: 1px solid #ddd !important; /* チャットエリアの境界線 */
    padding: 15px !important;        /* 内側の余白 */
    background-color: #fff !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;
}
/* スクロールバーの見た目をスマホ向けに少しスタイリッシュにする（オプション） */
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;
}
/*😬ビラ掲示板*/
/* ビラ掲示板（トップページ）：検索エリア横一直線化＆黒一本線デザイン*/
/* 1. 検索フォーム外側の余白と背景リセット */
.elementor-element-c4fe6a7 .elementor-shortcode {
    padding: 20px 0 0 0 !important;
    margin-bottom: 35px !important;
}
/* 2. フォーム内のレイアウトをFlexboxで横一列にする（左右を結ぶ黒い一本線） */
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; /* 左右を結ぶ黒い一本線 */
}
/* 3. 各li要素（セレクトボックス側とボタン側）の横幅バランス調整 */
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;
}
/* 4. 「すべてのタグ」という見出し（h4）を横並びに適合させる */
form.searchandfilter h4 {
    font-size: 16px !important;
    color: #444444 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    white-space: nowrap !important; /* 改行防止 */
}
/* 5. セレクトボックスと検索ボタンの枠・背景を消し、高さ40pxで統一 */
form.searchandfilter select,
form.searchandfilter input[type="submit"] {
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}
	/* 機能しているルートをベースに：h4削除 ＆ 色統一*/
/* 1. 1つ目のli要素の中にある <h4>（すべてのタグ）を確実に非表示にして左詰め */
form.searchandfilter > div > ul > li:first-child > h4 {
    display: none !important;
}
/* 2. 1つ目のli要素の中にある <select>（セレクトボックス）の文字色をh4と同じにする */
form.searchandfilter > div > ul > li:first-child > select {
    color: #444444 !important; /* 現在のh4の薄い黒色 */
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* 3. 2つ目のli要素の中にある 検索ボタン（input）の文字色も同じ色に統一 */
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;
    cursor: pointer !important;
}
/* 4. セレクトボックスを開いたときに出てくる選択肢（option）の文字色も統一 */
form.searchandfilter > div > ul > li:first-child > select option {
    color: #444444 !important;
}
/* 3. 2つ目のli要素の中にある 検索ボタンの文字サイズ・太さをh4と完全同期 */
form.searchandfilter > div > ul > li:last-child > input[type="submit"] {
    color: #444444 !important;
    font-size: inherit !important; /* 親のフォントサイズ（h4と同等）を強制継承 */
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
/* 😬12.ログアウト状態のページ*/
/*ページ全体の共通リセット（PC・タブレット共通レイアウトの土台） */
@media screen and (min-width: 768px) {
    /* 1. body と最外枠（#page）を画面ぴったり100%の高さの縦並びFlexにする */
    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;
    }
    /* 2. ヘッダー下の不要な行（.boot-row）も縦並びのFlex対象にする */
    body.page-id-32 > #page > .boot-row {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 0 auto !important; /* これで余白を自動で埋める */
    }
    body.page-id-32 .boot-col-md-12 {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 0 auto !important;
    }
    /* 3. コンテンツエリアを限界まで引き伸ばし、位置はデフォルト（上寄せ）にする */
    body.page-id-32 #content {
        flex: 1 0 auto !important;
        display: block !important; /* 上寄せを維持 */
        padding-top: 20px !important; /* ヘッダーとの隙間（必要に応じて調整） */
        padding-bottom: 40px !important; /* フッターとの最低限の隙間 */
    }
    /* 4. フッター（#colophon）を画面の一番最底辺に固定して残す */
    body.page-id-32 #colophon {
        flex-shrink: 0 !important;
        margin-top: auto !important; /* 自動で一番下に吸い付かせる */
    }
}
/* スマホ表示（画面幅767px以下）のときの設定*/
@media screen and (max-width: 767px) {
    /* Ultimate Memberのフォームを包んでいるElementorの最親コンテナ、
       およびフォーム自体を確実に横幅80%にして中央に寄せる
    */
    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-left: auto !important;
        margin-right: auto !important;
    }
    /* フォーム内のインプットエリアの横幅制限を解除して80%の枠内に綺麗に収める */
    body.page-id-32 .um-29.um {
        width: 100% !important;
    }
}
/*😬フッター*/
/* ==========================================================================
   1. 対象の全ページ全体に背景画像＋白0.5のオーバーレイを適用し、フッターの基準にする
   ========================================================================== */
.page-id-5409 #page,
.page-id-5437 #page,
.page-id-4178 #page,
.page-id-4525 #page,
/*.page-id-47 #page,*/
.um-page-profile #page {
    min-height: 100vh !important;
    position: relative !important;
    padding-bottom: 240px !important; /* フッターの高さ分の余白 */
    box-sizing: border-box !important;
    
    /* ★背景の設定：真っ白50%のレイヤーを画像の手前に重ねる */
    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-id-5409 #colophon,
.page-id-5437 #colophon,
.page-id-4178 #colophon,
.page-id-4525 #colophon,
/*.page-id-47 #colophon,*/
.um-page-profile #colophon {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    left: 0 !important;
}

/* ==========================================================================
   3. Elementorのコンテナ背景が重なって邪魔しないように透明化
   ========================================================================== */
.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,
/*.page-id-47 .elementor-47 .e-parent,*/
.um-page-profile .e-parent {
    background: transparent !important;
}

/* ==========================================================================
   4. ログイン時のWordPress管理者バーがある場合の表示崩れ防止
   ========================================================================== */
.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 - 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;
    }
}