/* 😬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; /* スマホではさらに一回り小さく */
    }
}
/* 😬5. UM グループを探す*/
　/*「すべてのグループ」「参加中のグループ」「新規作成」の削除*/
.um-groups-found-posts {
    display: none !important;
}
#um-groups-filters {
    display: none !important;
}
/* 1. フィルターメニュー（全グループ・マイグループ等のボタン）を消す */
.um-groups-found-posts ul.filters,
.um-groups-found-own-posts ul.filters {
    display: none !important;
}
/* 2. 「全グループ」というテキストだけを、レイアウトを崩さずに消す */
/* 親要素の中身を一旦見えなくする */
.um-groups-found-posts,
.um-groups-found-own-posts {
    visibility: hidden !important;
    line-height: 0 !important;
}
/* 3. 中にあるメインコンテンツ（グループ一覧）だけを「可視」に戻す */
.um-groups-found-posts .um-groups-directory,
.um-groups-found-own-posts .um-groups-directory {
    visibility: visible !important;
    line-height: normal !important;
    display: flex !important; /* 横並びを復活させる */
}
/*検索ツールの配置*/
/*タブレット*/
@media (min-width: 768px) {
    　　/*  親要素の横幅を「画面内」に収め、ネガティブマージンをリセット */
    .um-groups-directory-header .boot-row {
        display: flex !important;
        flex-wrap: wrap !important; /* 限界まで来たら折り返す設定で、物理的な突き抜けを防止 */
        align-items: center !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        gap: 8px !important;
    }
    /*  左ブロック（検索窓）を柔軟に伸縮させる */
    .um-groups-directory-header .boot-col-md-5 {
        flex: 1 1 200px !important; /* 最小200pxを維持しつつ、余白があれば伸びる */
        max-width: 100% !important;
        width: auto !important;
        padding: 30 !important;
    }
    /*右ブロック（フィルター群）の設定 */
    .group-search-filter.boot-col-md-7 {
        flex: 2 1 auto !important; /* ボタン類を優先的に表示 */
        display: flex !important;
        flex-wrap: nowrap !important; /* セレクトボックスとボタンは一列を維持 */
        align-items: center !important;
        gap: 6px !important;
        padding: 30 !important;
        width: auto !important;
        max-width: none !important;
    }
    /*  各セレクトボックスの横幅を自動調整 */
    .um-groups-search-form select {
        width: auto !important;
        flex: 1 1 120px !important; /* 画面が狭くなると少し縮んで調整する */
        min-width: 100px !important; 
    }
    /* 検索ボタンとクリアボタンの固定 */
    .um-groups-search-form input[type="submit"],
    .um-groups-search-form a.primary-button {
        flex: 0 0 auto !important; /* ボタン自体の幅は守る */
        white-space: nowrap !important;
        width: auto !important;
    }
}
/*    グループ検索フォーム：1段目（検索窓）＋ 2段目（その他）の2段編成
   （PC・タブレット限定：768px以上）*/
@media (min-width: 768px) {
    /* 1. 左右の5:7分割を解除し、縦に積む（1カラム化） */
    .um-groups-directory-header .boot-row {
        display: flex !important;
        flex-direction: column !important; /* 上下並びにする */
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 15px !important; /* 1段目と2段目の間の隙間 */
    }
    /* 2. 【1段目】検索窓ブロックを全幅にする */
    .um-groups-directory-header .boot-col-md-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .um-groups-search-form input[name="groups_search"] {
        width: 100% !important; /* 検索窓を横いっぱいに広げる */
        height: 46px !important;
    }
    /* 3. 【2段目】フィルター・ボタンブロックを全幅にし、横に並べる */
    .group-search-filter.boot-col-md-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important; /* 中身は横一列 */
        gap: 10px !important; /* パーツ同士の隙間 */
    }
    /* 4. 2段目の各要素のサイズ調整 */
    .um-groups-search-form select {
        flex: 1 1 auto !important; /* セレクトボックスは余白を埋めるように伸びる */
        height: 46px !important;
    }
    .um-groups-search-form input[type="submit"],
    .um-groups-search-form a.primary-button {
        flex: 0 0 auto !important; /* ボタンは文字幅に合わせる */
        padding: 0 25px !important;
        height: 46px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
    }
}
@media (min-width: 768px) {
    /* 1. 全体の構造 */
    .um-groups-directory-header .boot-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 15px !important;
    }
    /* 2. 【1段目】検索窓ブロック */
    .um-groups-directory-header .boot-col-md-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .um-groups-search-form input[name="groups_search"] {
        width: 100% !important;
        height: 46px !important;
        box-sizing: border-box !important; /* 追加：枠線を含めた計算にする */
    }
    /* 3. 【2段目】フィルター・ボタンブロック */
    .group-search-filter.boot-col-md-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        /* 追加：もし隙間があるなら右端に寄せる保険 */
        justify-content: space-between !important; 
    }

    /* 4. 各要素のサイズ調整 */
    .um-groups-search-form select {
        flex: 1 1 auto !important;
        height: 46px !important;
        box-sizing: border-box !important; /* 追加 */
    }
    .um-groups-search-form input[type="submit"],
    .um-groups-search-form a.primary-button {
        flex: 0 0 auto !important;
        padding: 0 25px !important;
        height: 46px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        margin: 0 !important; /* 追加：ブラウザ固有のマージンを消す */
        box-sizing: border-box !important; /* 追加 */
    }
    /* 5. クリアボタン（一番右）の右端を強制固定 */
    .um-groups-search-form a.primary-button {
        margin-right: 0 !important;
    }
}

/*スマホ*/
@media (max-width: 767px) {
    /* 親の行を縦並びに強制 */
    .um-groups-directory-header .boot-row {
        display: flex !important;
        flex-direction: column !important; 
        margin: 0 !important;
        width: 100% !important;
        gap: 10px !important; /* パーツごとの上下の隙間 */
    }
    /* 「グループを検索」入力欄（1段目） */
    .um-groups-directory-header .boot-col-md-5 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    /* 残りの4つが入っているブロック（2〜5段目） */
    .group-search-filter.boot-col-md-7 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important; /* 縦並び */
        gap: 10px !important;
        padding: 0 !important;
    }
    /* すべての入力・選択・ボタンを横幅100%にする */
    .um-groups-search-form input[name="groups_search"],
    .um-groups-search-form select,
    .um-groups-search-form input[type="submit"],
    .um-groups-search-form a.primary-button {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important; /* 指で押しやすい高さ */
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    /* クリアボタン（aタグ）の装飾を整える */
    .um-groups-search-form a.primary-button {
        text-decoration: none !important;
    }
}

/*😬6. プロフィールページのグループ*/

/*😬7.グループディスカッションページ*/
/* グループページのタイトルエリアを完全に消去 */
.single-um_groups .s-post__header {
    display: none !important;
}
/* モバイル幅（800px以下）でUltimate Memberの挙動を完全に上書き */
@media screen and (max-width: 800px) {

    /* 1. 外側の枠をFlexボックスに強制変更 */
    html body div#page .um-groups-single .um-group-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. 要素の並び替え (order) */
    /* ロゴとグループ名リンク */
    .um-group-item > a {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        float: none !important;
        margin: 0 0 15px 0 !important;
    }

    /* 公開ステータス・説明文などのエリア */
    .um-group-item .um-group-meta {
        order: 2 !important;
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
        text-align: center !important;
    }

    /* ボタンとアクティブ状況のエリア (一番下へ) */
    .um-group-item .actions {
        order: 3 !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding-top: 15px !important;
        border-top: 1px solid #eee !important;
    }

    /* 3. 各内部パーツの中央揃えを徹底 */
    
    /* ロゴ画像 */
    .um-group-image {
        float: none !important;
        margin: 0 auto 10px !important;
        display: block !important;
    }

/* グループ名テキストの強制中央揃え */
    .um-group-name, 
    .um-group-item > a .um-group-name, 
    .um-group-item .um-group-name strong {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 10px auto !important;
        padding: 0 !important;
        float: none !important;
        /* もし strong タグなどで囲まれていても中央にする */
        line-height: 1.4 !important;
    }

    /* ロゴと名前を包んでいるリンク自体の幅を確保 */
    .um-group-item > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-decoration: none !important;
    }

    /* メタ情報リスト (リーダー・説明など) */
    .um-group-meta ul, 
    .um-group-item .actions ul {
        display: block !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        list-style: none !important;
    }

    /* リスト項目をすべて中央に */
    .um-group-meta ul li, 
    .um-group-item .actions ul li {
        display: block !important;
        text-align: center !important;
        float: none !important;
        margin: 5px auto !important;
        padding: 0 !important;
        width: 100% !important;
    }
/* 1. 外側の枠の上の余白を狭くする（20pxから10pxへ変更） */
    html body div#page .um-groups-single .um-group-item {
        padding-top: 10px !important; /* ここを小さくするとロゴの上の隙間が減ります */
    }

    /* 2. ロゴ画像自体のサイズを小さくする */
    .um-group-image {
        width: 140px !important;  /* 元のサイズ（100px等）からお好みで調整してください */
        height: 140px !important; /* widthと同じ数値にしてください */
        margin: 0 auto 5px !important; /* 画像下のグループ名との隙間も少し詰めました */
    }

    /* 3. ロゴ画像を包んでいるリンクの余白も念のためリセット */
    .um-group-item > a {
        margin-top: 0 !important;
        margin-bottom: 10px !important; /* グループ名との間隔 */
    }
}


/* メインの白い枠（グループヘッダー部分）に丸みをつける */
.um-group-item, 
article.um_groups, 
.um-groups-single-header {
    border-radius: 30px !important;
    overflow: hidden !important; /* 角からはみ出す背景をカット */
    background-color: #fff !important; /* 枠が白いことを確定させる */
}

/* もし枠線がある設定の場合、その線も丸くする */
.um-groups-directory .um-group-item {
    border-radius: 30px !important;
    border: 1px solid #eee; /* 必要に応じて線の色を調整してください */
}

/* スマホ版での微調整（隙間が空きすぎるのを防ぐ） */
@media screen and (max-width: 800px) {
    .um-group-item {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}


/* 白い枠の親要素から幅を制限する */
.single-um_groups .website-canvas,
.single-um_groups .site-main,
.single-um_groups .um-groups-single {
    max-width: 1140px !important; /* 「グループを探す」ページの幅に合わせました */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    float: none !important;
}

/* 白い枠自体の幅を親にフィットさせる */
.single-um_groups .um-group-item {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* スマホ・タブレットで左右に少し隙間を作る設定 */
@media screen and (max-width: 1140px) {
    .single-um_groups .website-canvas {
        width: 92% !important;
    }
}

/* グループ個別ページ全体の背景画像 + 50%白オーバーレイ */
.single-um_groups #content,
.single-um_groups .website-canvas {
    /* 50%の白 (rgbaの最後の0.5が透明度) を画像の上に重ねる */
    background: 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 center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* 記事上部の空のアイキャッチ画像エリア（横線の正体）を非表示にする */
.single-um_groups figure.featured-image,
.single-um_groups .featured-image {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ついでにその親要素に付いている可能性のある線も消去 */
.single-um_groups article.hentry {
    border-top: none !important;
}
/* PC・タブレット版（768px以上）のみ適用 */
@media screen and (min-width: 768px) {
    
    /* 1. グループ名の左側の余白を削り、アイコンのラインに合わせる */
    .um-group-name {
        margin-left: 0 !important;
        padding-left: 2px !important; /* アイコンの厚み分だけ微調整 */
        display: block !important;
    }

    /* 2. メタ情報（公開状態・作成者）のリスト全体の左端をリセット */
    .um-group-meta {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .um-group-meta ul {
        margin-left: 0 !important;
        padding-left: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* 3. 各リスト項目（アイコン付き）の左余白をゼロにする */
    .um-group-meta li {
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-right: 20px !important; /* 横並び時の間隔 */
    }

    /* 4. 説明文（前回の設定を維持しつつ左端を揃える） */
    .um-group-meta li.description {
        flex-basis: 100% !important;
        margin-top: 15px !important;
        padding-left: 0 !important;
        border-top: 1px solid #eee; 
        padding-top: 15px !important;
    }
}
/*😬8.アカウントプロフィール*/
/* プロフィールの「ホーム」タブが選択されている時だけコンテンツエリアを非表示にする */
.um-profile-body.main.main-default {
    display: none !important;
}

/* 枠線や余白が残って不自然な場合は、こちらも追加してください */
.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;
    }
}