body, h1, h2, h3, h4, h5, h6, p, a, input, button, select, textarea, .um {
    font-family: "BIZ UDMincho", "Hiragino Mincho ProN", "MS Mincho", serif !important;
}

@media (min-width: 768px) {
    /* 1. 検索枠を完全に消す */
    .header__search.boot-col-md-2 {
        display: none !important;
    }

    /* 2. 【重要】左右の「おもり」の幅を完全に揃える（20%ずつ） */
    /* これをしないと、右側のアイコン群に押されて中央がズレます */
    .header__branding.boot-col-md-2,
    .header__user-account.boot-col-md-3 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }

    /* 3. メニュー枠を残りの 60% に設定して、中身を中央寄せ */
    .header__navigation.boot-col-md-5 {
        flex: 0 0 60% !important;
        max-width: 60% !important;
        display: flex !important;
        justify-content: center !important;
        /* もしこれでも左寄りなら、ここで微調整 */
        padding-left: 20px !important; 
    }

    /* 4. メニューの中身自体の位置を確定させる */
    #bs-navbar-primary {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}








/*elementorで作ると余白ができる問題に関して*/
/* UM Theme特有の幅制限を解除 */
.elementor-page-62 .website-width,
.elementor-page-62 .header-container,
.elementor-page-62 .site-content.boot-container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 記事エリアを包む不要な余白をカット */
.elementor-page-62 .page-content,
.elementor-page-62 .website-canvas {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}




/* 北海道ページ（ID 417）専用：Ultimate Member の検索・フィルターを隠す */
.page-id-417 #um-groups-filters,
.page-id-417 .um-groups-directory-header {
    display: none !important;
}

/* クラス pref-group-list の中にある検索窓をすべて隠す */
.pref-group-list #um-groups-filters,
.pref-group-list .um-groups-directory-header {
    display: none !important;
}






/* 固定ページのテンプレートをElementor全幅にした際の、テーマ側の制限を完全に消す */
.page-template-elementor_header_footer #content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.page-template-elementor_header_footer .boot-container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* ヘッダーとコンテンツの間の謎の隙間（マージン）を消す */
.page-template-elementor_header_footer .site-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 1. サイト全体のメインコンテナの幅制限を解除 */
.page-template-elementor_header_footer #content,
.page-template-elementor_header_footer .site-content,
.page-template-elementor_header_footer .boot-container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* 2. テーマ側が自動挿入する上下の余白を削除 */
.page-template-elementor_header_footer #content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Elementor内部のセクション/コンテナも端まで広げる */
.page-template-elementor_header_footer .elementor-section-stretched,
.page-template-elementor_header_footer .e-con-full {
    width: 100% !important;
}

/* 4. もしページタイトルが勝手に表示されて邪魔なら非表示に */
.page-template-elementor_header_footer .entry-header {
    display: none !important;
}





/* 地図の台紙（コンテナ）を完全に透明にする */
#hotspot-266 .hotspots-image-container,
#hotspot-266 .leaflet-container {
    background: transparent !important;
}



/* 地図コンテナ全体の背景を透明にする */
#hotspot-266 .hotspots-image-container,
#hotspot-266 .leaflet-container,
#hotspot-266 .hotspots-placeholder {
    background: transparent !important;
    border: none !important;
}

/* 地図の土台となるグレーの背景を強制除去 */
.leaflet-container {
    background-color: rgba(0,0,0,0) !important;
}

/* 文字情報（栃木県など）が表示されるエリアも透明にしたい場合 */
#hotspot-266 .hotspots-placeholder {
    background-color: rgba(255, 255, 255, 0) !important;
}





/* 1. Searchボタンの色と形状を退会ボタンに合わせる */
.um-groups-search-form input[type="submit"] {
    background-color: #3ba1da !important; /* 退会ボタンと同じ鮮やかな青 */
    color: #ffffff !important;
    border: none !important;
    padding: 10px 22px !important; !important; /* 文字を勝手に大文字にしない */
    line-height: 1 !important;
}

/* 2. マウスを乗せた（ホバー）時の色調整 */
.um-groups-search-form input[type="submit"]:hover {
    background-color: #44b0ec !important; /* 少し明るい青にして反応を出す */
    opacity: 1 !important;
}

/* 1. セレクトボックス（ドロップダウン）の中身の文字を黒、背景を白に固定 */
.um-groups-search-form select option {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* 2. 入力中や選択中のセレクトボックス自体の文字も見えやすく調整 */
.um-groups-search-form select {
    color: #ffffff !important; /* 選択前の表示文字は白（背景動画に合わせる） */
}

/* 3. フォーカス（クリック）した瞬間に中身が見えるように強制 */
.um-groups-search-form select:focus {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* 1. All Groups（アクティブ状態）の文字色を他のタブと同じ色に合わせる */
.um-groups-found-posts .filters li.all.active a span,
.um-groups-found-posts .filters li.all.active a {
    color: #666666 !important; /* My Groups等と同じ黒っぽいグレー */
}

/* 2. 背景が透けているので、念のため全てのタブの基本色を固定 */
.um-groups-found-posts .filters li a span,
.um-groups-found-posts .filters li a {
    color: #666666 !important;
}

/* 3. マウスを乗せた時だけ少し濃くする（必要であれば） */
.um-groups-found-posts .filters li a:hover span {
    color: #333333 !important;
}



/* 元の「Logout」という文字を消す */
.site-profile-logout a {
    font-size: 0 !important;
}

/* 代わりに「ログアウト」を表示する */
.site-profile-logout a::after {
    content: "ログアウト";
    font-size: 14px !important; /* 元のサイズに合わせて調整してください */
    display: inline-block;
    vertical-align: middle;
}

/* アイコン（SVG）が消えないように保護する */
.site-profile-logout a svg {
    font-size: 16px !important; /* アイコンの大きさ */
    margin-right: 8px;         /* アイコンと文字の間隔 */
}



/* 1. 友達リクエスト (Friend Requests) */
.header-friend-requests .dropdown.msg-drop[aria-label="Friend Requests"]::before,
.header-friend-requests .dropdown.msg-drop[aria-label="Friend Requests"]::after {
    /* ツールチップを無理やり上書きする場合の指定 */
}

/* 2. メッセージ (Messages) */
.header-messenger-box .dropdown.msg-drop[aria-label="Messages"]::before {
    /* 属性セレクタで特定のラベルを狙い撃ち */
}

/* --- 吹き出し内のタイトル文字を書き換える設定 --- */

/* 友達リクエストのタイトル */
.friends-drop-menu .um-theme-dropdown-header h6 {
    font-size: 0 !important;
}
.friends-drop-menu .um-theme-dropdown-header h6::after {
    content: "フレンド申請";
    font-size: 14px !important; /* 元のサイズに合わせて調整 */
}

/* 通知のタイトル */
.um-notification-header h4 {
    font-size: 0 !important;
}
.um-notification-header h4::after {
    content: "通知";
    font-size: 16px !important;
}

/* メッセージの「No Messages」を書き換え */
.msg-drop-menu .no-messages {
    font-size: 0 !important;
}
.msg-drop-menu .no-messages::after {
    content: "メッセージはありません";
    font-size: 14px !important;
    display: block;
    padding: 10px;
}

/* 友達リクエストの「You do not have pending...」を書き換え */
.friends-drop-menu .um-profile-note span {
    font-size: 0 !important;
}
.friends-drop-menu .um-profile-note span::after {
    content: "届いている申請はありません";
    font-size: 13px !important;
}




/* 1. 検索フォーム内のすべての入力・選択ボックスの文字色を統一 */
.um-groups-search-form input[type="text"],
.um-groups-search-form select {
    color: #666666 !important; /* 左のヒント文字に近い標準的なグレー */
    border: 1px solid #ddd !important; /* 枠線を少しだけ見えやすくして馴染ませる */
}

/* 2. ドロップダウン（select）の背景を白に固定して文字を見やすくする */
.um-groups-search-form select {
    background-color: #ffffff !important;
}

/* 3. 左側の入力欄に入力した時の文字色も同じにする（違和感を消す） */
.um-groups-search-form input[type="text"]::placeholder {
    color: #666666 !important;
    opacity: 1;
}


/* 1. 固定時の位置を強制補正 */
.elementor-element-fa7164f.elementor-sticky--active {
    /* ヘッダーの高さに合わせて微調整してください */
    top: 80px !important; 
}

/* 2. ログイン中（管理バー表示時）のズレを解消 */
.admin-bar .elementor-element-fa7164f.elementor-sticky--active {
    top: 112px !important; /* 80px + 管理バー32px */
}

/* 3. タブレット・スマホでの管理バー対応（46px） */
@media (max-width: 782px) {
    .admin-bar .elementor-element-fa7164f.elementor-sticky--active {
        top: 126px !important; /* 80px + 46px */
    }
}
/* フッターを最前面に出し、背景を白に固定 */
#colophon, 
.elementor-element-6ecad15c {
    position: relative;
    z-index: 9999 !important; /* Sticky要素より高い数値に設定 */
}
/* スクリプト用のコンテナ自体の高さをゼロにする */
.elementor-element-effc600 {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}


/* 検索コンテナ全体の背景を半透明にする */
.elementor-element-fef5349 {
    background-color: rgba(255, 255, 255, 0.75) !important; /* 白の75%透明度 */
    
    /* 背景を少しぼかす（高級感が出るグラスモーフィズム効果） */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* 枠線を少し整える（必要に応じて） */
    border-radius: 15px; 
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* 内側の余白を少し広げると綺麗に見えます */
    padding: 40px 20px !important;
}

/* フォーム内の各入力欄も背景を馴染ませる場合 */
.elementor-element-fef5349 input[type="text"],
.elementor-element-fef5349 select {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ddd !important;
}


/* ===========================================================
   1. グループカード全体の装飾（全ページ共通：マイグループ等）
   =========================================================== */
/* カードの外枠を丸くし、ホバーで浮かす */
.um-groups-directory .group-grid-inner {
    border-radius: 30px !important;
    overflow: hidden !important;
    border: 1px solid #e0e0e0 !important;
    background-color: #ffffff !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

.um-groups-directory .group-grid-inner:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* イメージ画像コンテナの中央寄せ */
.um-groups-directory .um-group-image-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding-top: 15px !important;
}

.um-groups-directory .um-group-image-container a {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* イメージ画像自体の4隅を丸くする */
.um-groups-directory .um-group-image-container img {
    border-radius: 30px !important;
    object-fit: cover !important;
    width: 90% !important; /* 枠より一回り小さくして余裕を持たせる */
}

/* ===========================================================
   2. 「グループを探す」ページ専用（Page ID 54）のレイアウト
   =========================================================== */

/* UM標準の「新規作成」タブだけ消す（自作のElementorボタンは残る） */
.page-id-54 .um-groups-found-posts .filters li.create {
    display: none !important;
}

/* 検索フォームをPC・タブレットで1行に強制 */
@media (min-width: 768px) {
    /* 行の折り返しを禁止 */
    .page-id-54 .um-groups-search-form .boot-row {
        display: flex !important;
        flex-wrap: nowrap !important; 
        align-items: center !important;
    }

    /* 検索窓（左側）：余ったスペースをすべて使って横長にする */
    .page-id-54 .um-groups-search-form .boot-col-md-5 {
        flex: 1 1 auto !important; 
        max-width: none !important;
        width: auto !important;
        margin-right: 15px !important;
    }

    /* フィルター部分（右側）：右端に寄せて固定 */
    .page-id-54 .group-search-filter {
        flex: 0 0 auto !important;
        display: flex !important;
        gap: 6px !important;
        justify-content: flex-end !important;
        white-space: nowrap !important;
    }
    
    /* セレクトボックスの幅を少し抑えて検索窓の長さを確保 */
    .page-id-54 .group-search-filter select {
        width: 140px !important;
    }
}

/* 入力窓・ボタンすべての高さを揃え、中の文字を中央に固定 */
.page-id-54 .um-groups-search-form input[name="groups_search"],
.page-id-54 .group-search-filter select,
.page-id-54 .group-search-filter input[type="submit"],
.page-id-54 .group-search-filter .primary-button {
    height: 42px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 8px !important;
    
    /* 文字の中央揃え設定 */
    display: inline-flex !important;
    align-items: center !important; 
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 15px !important;
}

/* クリアボタン（aタグ）の文字の高さ微調整 */
.page-id-54 .group-search-filter .primary-button {
    text-decoration: none !important;
    padding-top: 3px !important; /* 検索ボタンと高さを合わせる */
}

/* サイドパネル全体を上下中央に配置 */
.button-toggle-appbar {
    top: 50% !important; /* 上から50%の位置に配置 */
    transform: translateY(-50%) !important; /* 自身の高さの半分だけ上にずらして完全に中央にする */
}

/* メニューの中身（タブ）も連動して中央に寄せる設定 */
.sticky-vertical-tabs {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

	

















/* 2. グループ名（タイトル）を全グループで大きく太くする */
.um-group-name strong {
    font-size: 26px !important;
    color: #1a73e8 !important; /* 清潔感のある青色 */
    display: block !important;
    margin-bottom: 10px !important;
}

/* 3. 「グループを退会」などのアクションボタンを全グループで目立たせる */
.um-groups-btn-leave, .um-groups-btn-join {
    background-color: #ff4757 !important; /* 退会は警告の赤 */
    color: #fff !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    font-weight: bold !important;
    transition: 0.3s !important;
}

/* 4. メタ情報（メンバー数、投稿数）の背景をグレーにする */
.um-group-item .actions ul li.count-members,
.um-group-item .actions ul li.count-posts {
    background: #f1f2f6 !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    margin-bottom: 5px !important;
    list-style: none !important;
}

/* 5. グループの画像（アバター）のサイズを大きく固定する */
.um-group-image {
    width: 150px !important;
    height: auto !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
}

/* 6. タブメニュー（Discussions / Members）を強調する */
ul.um-groups-single-tabs li a {
    font-size: 18px !important;
    font-weight: 800 !important;
    border-bottom: 3px solid transparent !important;
}

ul.um-groups-single-tabs li.active a {
    color: #1a73e8 !important;
    border-bottom: 3px solid #1a73e8 !important;
}
/* グループページ上部のグレー背景エリア全体を完全に削除 */
article.um_groups .s-post__header {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/* ページ全体の余白が詰まりすぎるのを防ぐ（必要に応じて数字を調整してください） */
article.um_groups .entry-content {
    margin-top: 20px !important;
}

/* すべてのグループページで最上部のタイトル・グレー背景エリアを根こそぎ消す */
.single-um_groups .featured-image,
.single-um_groups .s-post__header,
.single-um_groups header.entry-header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* コンテンツエリアが上に詰まりすぎないよう調整 */
.single-um_groups #content {
    padding-top: 20px !important;
}

/* グループページ内のメインコンテンツの余白をゼロにする */
.single-um_groups .entry-content,
.single-um_groups .s-post__content,
.single-um_groups .s-post__content-inner,
.single-um_groups .website-canvas {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ultimate Member グループ本体の上部余白を強制削除 */
.single-um_groups .um-groups-single {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* もしメインのコンテナ (#primary) 自体に余白がある場合 */
.single-um_groups #primary {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ヘッダー (#masthead) とコンテンツの間の不要なスペースを消す */
.single-um_groups #content {
    padding-top: 0 !important;
}

/* 1. グループページ全体の背景に画像を設定 */
body.single-um_groups {
    background-image: url("https://protect-jp.com/wp-content/uploads/2026/03/AdobeStock_275261080.jpeg") !important;
    background-size: cover !important;        /* 画面いっぱいに広げる */
    background-attachment: fixed !important;  /* スクロールしても背景を動かさない */
    background-position: center !important;   /* 中央に配置 */
    background-repeat: no-repeat !important;
}

/* 2. 背景画像を見せるために、既存の白い背景を透明にする */
.single-um_groups #page,
.single-um_groups #content,
.single-um_groups .website-canvas,
.single-um_groups .content-area,
.single-um_groups .entry-content,
.single-um_groups .s-post__content-inner {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
}

/* 3. コンテンツ（文字や投稿）を読みやすくするために、少しだけ背景をぼかす or 白背景を薄く乗せる */
.single-um_groups .um-groups-single {
    background-color: rgba(255, 255, 255, 0.8) !important; /* 白を80%の透明度で敷く */
    padding: 30px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    margin-top: 20px !important;
    margin-bottom: 40px !important;
}

/* 4. 前回相談された「最上部のグレー背景（タイトル部分）」も不要なら完全に消す */
.single-um


/* 画面幅が767px以下（モバイル）の時だけ適用 */
@media (max-width: 767px) {
    /* 元の長いテキストを消す */
    .elementor-element-5cf9c8d8 .elementor-button-text {
        font-size: 0 !important;
    }

    /* 代わりに「＋」を表示する */
    .elementor-element-5cf9c8d8 .elementor-button-text::before {
        content: "＋";
        font-size: 24px !important; /* 押しやすいように少し大きく設定 */
        line-height: 1;
        display: inline-block;
    }

    /* ボタンの余白（パディング）を調整して正方形に近づける（任意） */
    .elementor-element-5cf9c8d8 .elementor-button {
        padding: 10px 15px !important;
        min-width: 44px;
        text-align: center;
    }
}