@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* パソコンで見たときは"pc"のclassがついた要素が表示される */
.pc { display: inline; }
.sp { display: none; }

/* スマートフォンで見たときは"sp"のclassがついた要素が表示される */
@media (max-width: 767px){
  .pc { display: none; }
  .sp { display: inline; }
}




/* トップページ HOMEだけサイドバー（右カラム）を非表示 */
.home #sidebar,
.front-page #sidebar {
  display: none !important;
}

.article h3 {
  background-color: #f1efdf;
}


/* =======================================
 * H1 / アーカイブタイトル
 * 高さセンター × 横左寄せ × 文字シャドウ
 * ======================================= */

.entry-title,
.archive-title {
  position: relative;
  margin: 0px 0 32px;

  /* 1200×369 の比率維持 */
  aspect-ratio: 1200 / 369;
  width: 100%;

  /* テキスト配置 */
  display: flex;
  align-items: center;          /* 縦センター */
  justify-content: flex-start;  /* 横左寄せ */
  text-align: left;

  padding: 0 34px;
  color: #fff;
  font-size: 32px;
  line-height: 1.4;

  /* ★デフォルト背景画像 */
  background-image: url("img/page-header/h1-4-2.jpg");  /* パスは今動いているものに合わせてOK */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;

  /* ★ 文字の可読性を上げるシャドウ */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 0 6px rgba(0, 0, 0, 0.4);
}

/* ===========================
 * ページごとの画像差し替え
 * （デフォルトの上書きなので必ず上記設定の下に書く）
 * =========================== */

/* 新着情報：一覧ページ + 個別記事ページ 共通 */
.blog .archive-title,
.blog .entry-title,
.single-post .entry-title {
  background-image: url("img/page-header/h1-1.jpg");
}

/* 協議会概要 */
.page-id-3215 .entry-title {
  background-image: url("img/page-header/h1-3.jpg");
}

/* 事業内容 */
.page-id-13 .entry-title {
  background-image: url("img/page-header/h1-3.jpg");
}

/* 入会案内 */
.page-id-3351 .entry-title {
  background-image: url("img/page-header/h1-3.jpg");
}

/* 協議会 会則 */
.page-id-3491 .entry-title {
  background-image: url("img/page-header/h1-3.jpg");
}

/* 会員名簿 */
.page-id-3353 .entry-title {
  background-image: url("img/page-header/h1-4-2.jpg");
}

/* お問い合わせ */
.page-id-14 .entry-title {
  background-image: url("img/page-header/h1-5.jpg");
}

/* UM関連ページ（ログイン/登録/アカウント等）共通 */
.um-page .entry-title,
.um-page .archive-title{
  background-image: url("img/page-header/h1-2.jpg");
}

/* スマホ */
@media (max-width: 834px) {
  .entry-title,
  .archive-title {
    margin: 0px 0 24px;
    font-size: 20px;
    padding: 0 16px;
  }
}




/* ─────────────────────────────
 * スマホヘッダー
 * ・ロゴ → 左
 * ・メニュー → 右端
 * ・検索はすでに display:none でOK
 * ──────────────────────────── */
@media (max-width: 834px){

  /* 親ULをフレックス制御 */
  .mobile-header-menu-buttons{
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右に配置 */
  }

  /* 並び順を指定 */
  .mobile-header-menu-buttons .logo-menu-button{
    order: 1;  /* 左側 */
  }

  .mobile-header-menu-buttons .navi-menu-button{
    order: 2;  /* 右側 */
  }
  /* メニューボタンの「メニュー」文字を非表示 */
  .mobile-header-menu-buttons .navi-menu-caption{
    display: none !important;
  }

  /* 念のため検索は完全に除外 */
  .mobile-header-menu-buttons .search-menu-button{
    display: none !important;
  }

  /* チェックが入ったときに右から左へスライドイン */
  #navi-menu-input:checked ~ #navi-menu-content {
    transform: translateX(0);
  }
}


/* ─────────────────────────────
 * スマホ：右から出てきて、右へ戻るドロワーメニュー（スライドのみ・影は開いてる時だけ）
 * ──────────────────────────── */
@media (max-width: 834px){

  /* メニュー本体パネル（右側のスライドメニュー） */
  .navi-menu-content.menu-content {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    box-sizing: border-box;

    padding: 72px 20px 32px;      /* 上を少し開けて中身を下げる */
    background: #111;             /* ダーク背景 */
    color: #fff;
    z-index: 9999;

    /* ★閉じているときの基本状態：画面の外＋イベント無効＋影なし */
    box-shadow: none;
    transform: translateX(100%);
    pointer-events: none;

    /* ★開く／閉じる両方に効くトランジション（スライドのみ） */
    transition: transform 0.25s ease-out;
  }

  /* ★チェックが入ったとき：右からスッとスライドイン＋影付与 */
  #navi-menu-input:checked ~ #navi-menu-content {
    transform: translateX(0);
    pointer-events: auto;  /* このときだけクリック等を受け付ける */
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
  }

  /* 背景の半透明オーバーレイ：閉じているときは完全に消す */
  #navi-menu-close {
    display: none !important;
    pointer-events: none;
  }

  /* メニューオープン時だけオーバーレイを表示＆有効にする */
  #navi-menu-input:checked ~ #navi-menu-close {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9990;
    pointer-events: auto;
  }

  /* メニューリスト全体 */
  .navi-menu-content .menu-drawer {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* 各メニュー項目 */
  .navi-menu-content .menu-drawer .menu-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 30px;
    border-radius: 999px;

    text-decoration: none;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: 0.03em;

    background: rgba(255, 255, 255, 0.16);
    transition:
      background 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  /* 右側に軽い「＞」アイコン風 */
  .navi-menu-content .menu-drawer .menu-item a::after {
    content: "›";
    font-size: 1.2em;
    opacity: 0.6;
  }

  /* ホバーorタップ時のフィードバック */
  .navi-menu-content .menu-drawer .menu-item a:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateX(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  }

  /* 現在ページ用（WordPress標準の current-menu-item など） */
  .navi-menu-content .menu-drawer .current-menu-item > a,
  .navi-menu-content .menu-drawer .current_page_item > a {
    background: #c0392b;    /* 強調色：お好みで変更OK */
  }

  /* 閉じるボタン（×）の位置調整 */
  .navi-menu-close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    font-size: 1.4rem;
    color: #fff;
  }
}





/* =========================
   固定ページ ID:1488 用
   ========================= */

.page-id-1488 .main {
  padding: 0px 0px;
}

.page-id-1488 .sns-share {
  padding: 40px;
}


/* =========================
   HOME 共通レイアウト調整
   ========================= */

/* フロントページ（HOME）だけ、ヘッダー直下の余白を完全になくす */
.home .content {
  margin-top: 0px;
}

.home .main {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.home .entry-content {
  margin-top: 0;
}

/* entry-content の最初の要素の上マージンを打ち消す */
.home .entry-content > *:first-child {
  margin-top: 0;
}

/* HOME（フロントページ）だけ、記事ヘッダーを非表示にする */
.home .article-header.entry-header {
  display: none;
}


/* =========================
   HERO（スライダー＋メインテキスト）用
   ========================= */

/* HOME の一番上の hero-container をフル幅に */
.home .entry-content > .hero-container.alignfull:first-child {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* hero-container 内側ラッパーの max-width を強制的に無効化し、全幅へ */
.home .wp-block-uagb-container.hero-container.uagb-is-root-container.alignfull
  > .uagb-container-inner-blocks-wrap {
  max-width: none !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* HERO 全体を重ね合わせ可能にし、高さを画面の 60% に */
.home .hero-container {
  position: relative;
  overflow: hidden;
  min-height: 60vh;        /* 必要なら height: 60vh; に変更してもよい */
  display: flex;
}

/* スライダーを HERO 背景として全面に敷く */
.home .hero-container #metaslider-id-3286,
.home .hero-container .metaslider {
  position: absolute;
  inset: 0;                /* 上下左右 0 で hero-container 全体を覆う */
  z-index: 1;
  width: 100%;
}

/* スライダー画像の高さとトリミング（PC） */
.home .hero-container img.msDefaultImage {
  width: 100%;
  height: 60vh;            /* hero-container の高さに合わせる */
  object-fit: cover;
}

/* hero-container 内の InfoBox（メインテキスト）だけ前面に */
.home .hero-container .uagb-infobox__content-wrap,
.home .hero-container .uagb-ifb-content {
  position: relative;
  z-index: 2;
}

/* スマホで高さを少し低めに */
@media (max-width: 767px) {
  .home .hero-container {
    min-height: 40vh;
  }

  .home .hero-container img.msDefaultImage {
    height: 40vh;
  }
}


/* PC 幅：背景画像＋白文字で重ね表示（高さは既存の指定をそのまま使う） */
@media (min-width: 1024px) {
  .home .hero-container {
    position: relative;
    overflow: hidden;
    /* ここでは height/min-height を新たに指定しない */
    display: flex;
    /* align-items は必要なら flex-start/center などに */
  }
  .home .hero-container #metaslider-id-3286,
  .home .hero-container .metaslider {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    /* ここも height を追加しない（既存の高さに従う） */
  }
  .home .hero-container img.msDefaultImage {
    width: 100%;
    /* ここも height を追加しない */
    object-fit: cover;
    display: block;
  }
  .home .hero-container .uagb-infobox__content-wrap,
  .home .hero-container .uagb-ifb-content {
    position: relative;
    z-index: 2;
    color: #ffffff;  /* PC では白文字 */
  }
}

/* モバイル幅：上下に並べ、文字色を通常色に */
@media (max-width: 1023px) {
  .home .hero-container {
    position: static;
    display: block;
    height: auto;
    min-height: auto;
  }
  .home .hero-container #metaslider-id-3286,
  .home .hero-container .metaslider {
    position: static;
    height: auto;
  }
  .home .hero-container img.msDefaultImage {
    height: auto;
  }
  .home .hero-container .uagb-infobox__content-wrap,
  .home .hero-container .uagb-ifb-content {
    position: static;
    z-index: 1;
  }
}

@media (min-width: 1024px) {
  .home .hero-container .uagb-ifb-title,
  .home .hero-container .uagb-ifb-desc {
    color: #ffffff !important;
  }
}

@media (max-width: 1023px) {
  .home .hero-container .uagb-ifb-title,
  .home .hero-container .uagb-ifb-desc {
    color: var(--cocoon-text-color) !important;
  }
}

@media (max-width: 1023px) {
  .home .hero-container .uagb-ifb-content {
    width: 100%;
    padding: 15px 40px;
  }
}

/* PC 幅：ヒーロー内テキストにシャドウを追加 */
@media (min-width: 1024px) {
  .home .hero-container .uagb-ifb-title {
    text-shadow: 0 0 16px #362500;
  }
  .home .hero-container .uagb-ifb-desc {
    text-shadow: 0 0 5px #362500;
  }
}

@media (max-width: 1023px) {
  .home .hero-container .uagb-ifb-title {
    font-size: 1.6em;
    margin-bottom: 10px;
  }
}



/* =========================
グローバルナビ（ハンバーガーメニュー）
========================= */

/* 1024px 以上（PC 幅）ではハンバーガーを隠す */
@media (min-width: 1024px) {
  .mobile-menu-buttons,
  .navi-mobile-menu {
    display: none !important;
  }
}

/* 1023px 以下（タブレット・スマホ）では PC 用ヘッダーとナビを隠す */
@media (max-width: 1023px) {
  #header,          /* PC ヘッダー全体（Cocoon 標準） */
  .l-header,        /* 子テーマ等で別クラスの場合の保険 */
  #navi,            /* グローバルナビ */
  #navi .navi-in {
    display: none !important;
  }
}




/************************************
** 子ページ冒頭に配置するタブメニュー
************************************/
/* sekinen tabs : full width under header */
.sekinen-tabs-wrap {
  position: sticky;
  top: 64px;               /* 固定ヘッダー高さに合わせて調整 */
  width: 100%;
  background: #a28a73;
  border-bottom: 1px solid #ddd;
  z-index: 20;
}

.sekinen-tabs-inner {
  max-width: 1100px;       /* mainと揃えたい幅 */
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.sekinen-tab {
  padding: 6px 14px;
  background: #eaeaea;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
}

.sekinen-tab.is-active {
  background: #664b13;
  color: #fff;
}

/* SPでは非表示 */
@media (max-width: 767px) {
  .sekinen-tabs-wrap {
    display: none;
  }
}


/* ─────────────────────────────
 * sekinen サブメニュー（タブ）をヘッダー直下に追従
 * ・PCのみ表示（SPは非表示）
 * ・ヘッダーの「画面上の下端」にピタ付け
 * ───────────────────────────── */

/* SPは非表示（必要なら閾値は調整） */
@media (max-width: 834px){
  .sekinen-tabs-wrap{ display:none !important; }
}

/* ヘッダー直下に追従 */
.sekinen-tabs-wrap{
  position: sticky;
  top: var(--sekinen-tabs-top, 0px);
  z-index: 9999;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}



/* ==========================================================
 *  Gutenberg ギャラリー共通SP調整
 *  PC：テーマ側の横並び（2列でも3列でもおまかせ）
 *  SP（768px以下）：
 *    ・すべてのギャラリーを縦1列に並べる
 *    ・各画像ブロックの間に余白をつける
 * ========================================================== */
@media (max-width: 768px) {

  /* ギャラリーコンテナ：flexレイアウトを解除して縦積みに */
  .wp-block-gallery.has-nested-images.is-layout-flex,
  .wp-block-gallery.has-nested-images.wp-block-gallery-is-layout-flex {
    display: block !important;
  }

  /* 各画像ブロック：100%幅＋下に余白 */
  .wp-block-gallery.has-nested-images .wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 1.5rem !important;  /* ← 間隔はここで調整 */
  }

  /* 最後の画像だけ余白なし */
  .wp-block-gallery.has-nested-images .wp-block-image:last-child {
    margin-bottom: 0 !important;
  }
}






/* =========================================================
 * sekinen.jp 会員名簿（カードレイアウト・基本形）
 * - 全カード共通：上部ヘッダー帯＋本体
 * - 会社名はヘッダー帯に表示
 * - 役職は氏名の左側
 * - 郵便番号＋住所はPCで横並び（SPは縦）
 * - TEL と FAX は縦並び、URL はPCで TEL の右、SP で FAX の下
 * ======================================================= */

.members-wrapper {
  margin-top: 2rem;
}

/* 通常時（開いている時）：今まで通り */
.members-section {
  margin-bottom: 3rem;
}

/* 閉じているセクションだけ、下の余白を小さくする */
.members-section.is-collapsed {
  margin-bottom: 1.2rem; /* 好きな値に調整してOK（1rem 前後がおすすめ） */
}

/* H3 の margin-bottom 調整は、好みでこのままでもOK */
.members-section.is-collapsed .members-section__title.js-members-toggle {
  margin-bottom: 0.5rem;
}


.members-section__title {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid #555;
  padding-left: 0.6rem;
}


/* --------- 会員名簿：ページ内ナビ（共通ベース） ---------------------------------- */
.member-anchor-nav {
  margin: 20px 0 30px;
  text-align: center;
}

.member-anchor-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

.member-anchor-nav li {
  margin: 0;
}

/* 共通のボタンスタイル（ベース） */
.member-anchor-nav a {
  display: inline-block;
  text-align: center;
  padding: 4px 10px;
  border-radius: 5px;
  background: #eeeeee;
  border: 1px solid #ccc;
  text-decoration: none;
  font-size: 14px;
  color: #333;
  transition: 0.2s ease;
}

.member-anchor-nav a:hover {
  background: #777;
  color: #fff;
}

/* ★ スマホ：共通で横幅を自動可変に */
@media (max-width: 768px) {
  .member-anchor-nav a {
    width: auto;
    padding: 4px 10px;
  }
}

/* ─────────────────────────────
 * group モード（従来仕様）
 * 役員／事務局／会員／賛助会員：ボタン少なめ → どっしり
 * ──────────────────────────── */
.member-anchor-nav--group a {
  /* width: 120px; */
  /* 従来通り、賛助会員に合わせた固定幅 */
}

/* ─────────────────────────────
 * kana モード（五十音）
 * ア行／カ行… → 数が多いのでコンパクト気味
 * ──────────────────────────── */
.member-anchor-nav--kana {
  margin: 15px 0 20px;
  text-align: left;
}

.member-anchor-nav--kana ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.member-anchor-nav--kana a {
  width: auto;          /* 固定幅を解除 */
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 5px;
}

/* スマホ時はやや余裕を持たせる */
@media (max-width: 768px) {
  .member-anchor-nav--kana a {
    padding: 4px 10px;
  }
}

/* ─────────────────────────────
 * city モード（市区町村）
 * ボタンが最も多くなる想定 → さらにコンパクト＆左寄せ
 * ──────────────────────────── */
.member-anchor-nav--city {
  margin: 10px 0 20px;
  text-align: left;
}

.member-anchor-nav--city ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.member-anchor-nav--city a {
  width: auto;          /* 固定幅を解除 */
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 5px;
  white-space: nowrap;  /* 市区町村名で途中改行しない */
}

/* スマホ時：五十音ナビと同じく「折り返し表示」にする */
@media (max-width: 768px) {
  .member-anchor-nav--city ul {
    flex-wrap: wrap;        /* ← 折り返し許可 */
    overflow-x: visible;    /* ← 横スクロールしない */
  }

  .member-anchor-nav--city a {
    padding: 4px 10px;      /* 既存のままでOK。好みで微調整OK */
  }
}





/* --------- カード全体 ----------------------------------------------- */

.members-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* カードは常に横幅100%（親コンテナいっぱい） */
.member-card {
  width: 100%;
  margin: 0;
  border-radius: 16px;
  background: #fffaf0;
  border: 1px solid #dde2e8;
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  font-size: 0.95rem;
}

/* --------- ヘッダー帯 ------------------------------------------------ */

/* カードヘッダー：区分ラベル＋会社名（フレックス横並び） */
.member-card__header {
  padding: 0.6rem 1.4rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;           /* 区分と会社名の間隔 */
}

/* 区分ラベル（役員 / 事務局 / 会員 / 賛助会員） */
.member-card__category {
  position: static;      /* absolute をやめる */
  left: auto;
  top: auto;
  transform: none;
  border-radius: 999px;
  padding: 0.15rem 1.1rem;
  font-size: 0.8rem;
  font-weight: bold;
  white-space: nowrap;   /* 途中で折り返さない */
}

/* ==========================
 * 会員名簿：区分別デザイン
 *  - Header … ヘッダー帯
 *  - Category … カテゴリバッジ
 *  ※ それぞれ独立した配色に対応
 * ========================== */

/* ─────────── 役員 ─────────── */
.member-card.is-officer .member-card__header {
  background: #1f4e8c;
  color: #ffffff;
}

.member-card.is-officer .member-card__category {
  background: #4a7bd1;
  color: #ffffff;
}

/* ─────────── 事務局 ─────────── */
.member-card.is-office .member-card__header {
  background: #00796b;
  color: #ffffff;
}

.member-card.is-office .member-card__category {
  background: #26a69a;
  color: #ffffff;
}

/* ─────────── 会員 ─────────── */
.member-card.is-member .member-card__header {
  background: #377999;
  color: #ffffff;
}

.member-card.is-member .member-card__category {
  background: #5da6ca;
  color: #ffffff;
}

/* ─────────── 賛助会員 ─────────── */
.member-card.is-support .member-card__header {
  background: #90609d;
  color: #ffffff;
}

.member-card.is-support .member-card__category {
  background: #cb7bd9;
  color: #ffffff;
}


/* ヘッダー帯内の会社名 */
.member-card__company {
  font-weight: bold;
  font-size: 1.2rem;
}

.member-card__company a {
  color: inherit;
  text-decoration: none;
}

.member-card__company a:hover {
  text-decoration: underline;
}

/* --------- 本文エリア ----------------------------------------------- */

.member-card__body {
  padding: 0.9rem 1.6rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "name name"
    "addr addr"
    "tel  url"
    "fax  fax";
  row-gap: 0.2rem;
}

/* 行共通 */
.member-card__row {
  font-size: 0.95rem;
}

/* 氏名行（役職＋氏名） */
.member-card__row--name {
  grid-area: name;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.member-card__role {
  min-width: 4em;
  text-align: center;
  font-weight: bold;
}

.member-card__name {
  font-weight: bold;
  font-size: 1.2rem;
}

/* 郵便番号＋住所（PCで横並び） */
.member-card__row--addr {
  grid-area: addr;
  display: flex;
  gap: 1.2rem;
}

.member-card__zip {
  white-space: nowrap;
}

.member-card__address {
  flex: 1;
}

/* 会員名簿：MAPボタン（スマホでも横幅いっぱいにしない） */
.members-wrapper .member-card__map-btn {
  display: inline-block !important;  /* テーマ側の block を上書き */
  flex: 0 0 auto !important;         /* flexでも広がらない */
  width: auto !important;            /* width:100% を打ち消す */
  white-space: nowrap;
  margin-left: 8px;
  padding: 3px 10px 5px;
  font-size: 0.8em;
  font-weight: 600;
  color: #ffffff;
  background: #0078d7;
  border-radius: 4px;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.members-wrapper .member-card__map-btn:hover {
  background: #005bab;
}

/* 管理会員表示用　会員詳細を見るボタン */
.member-card__row--admin-tools {
  margin: 0 0 15px 25px;
}
.member-card__admin-link {
  background-color: #0aaaaa;
  color: #FFF;
  padding: 7px 12px;
  border-radius: 5px;
  text-decoration: none;
}
.member-card__admin-link:hover {
  background-color: #087777;
  color: #FFF !important;
}


/* ─────────────────────────────
 * ニョキっとマップ
 * ───────────────────────────── */
.member-card__map-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    margin-top 0.25s ease;
}

.member-card.is-map-open .member-card__map-panel {
  max-height: 320px; /* iframe 高さ + α。必要なら調整OK */
  opacity: 1;
  margin-top: 10px;
}

.member-card__map-panel iframe {
  display: block;
  width: 100%;
}




/* TEL 行 */
.member-card__row--tel {
  grid-area: tel;
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.member-card__tel {
  font-weight: bold;
  font-size: 1.2em;
}

/* FAX 行 */
.member-card__row--fax {
  grid-area: fax;
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

/* 郵便番号に 〒 を付ける */
.member-card__zip::before {
  content: "〒";
  margin-right: 0.2em;
}

/* URL 行（PCではTELの右側） */
.member-card__row--url {
  grid-area: url;
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  align-items: baseline;
}

.member-card__label {
  font-size: 0.85rem;
  color: #666;
}

.member-card__url a {
  font-size: 0.9rem;
  word-break: break-all;
}

/* 会員名簿：URLの外部リンクアイコン調整 */
.member-card__url a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em; /* URL文字とアイコンの間隔 */
}

.member-card__url-icon {
  font-size: 1.0em;
}



/* --------- スマホ調整 ----------------------------------------------- */

@media (max-width: 767px) {
  .member-card {
    border-radius: 12px;
  }

  .member-card__body {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    display: block; /* PCのグリッドを解除して縦並びに */
  }

  .member-card__row {
    margin-bottom: 0.2rem;
  }

  /* ZIPは1行目、住所＋MAPは2行目 */
  .member-card__row--addr {
    flex-direction: column;
    align-items: flex-start;
  }

  .member-card__row--addr {
    gap: 0;
  }

  .member-card__zip {
    margin-right: 0;
    margin-bottom: 2px; /* ZIPと住所の間のすき間 */
  }

  .member-card__addr-main {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .member-card__address {
    flex: 1 1 auto;
  }

  .member-card__map-btn {
    margin-left: auto;
  }



  .member-card__row--url {
    justify-content: flex-start;  /* FAXの下で左寄せ表示 */
  }

  .member-card__header {
    padding: 0.6rem 1rem 0.7rem; /* 少しだけ左右を詰める */
  }

  .member-card__category {
    margin-right: 0.2rem;        /* SPでもラベルと会社名の余白を確保 */
  }

  .member-card__header {
    gap: 0.5rem;           /* 区分と会社名の間隔 */
  }

  .member-card__company {
    font-size: 0.95rem;
  }

  .member-card__name {
    font-size: 1rem;
  }

  .member-card__tel {
    font-size: 1em;
  }

}

/* PC時：住所行のレイアウト調整（MAPを右端に） */
@media (min-width: 768px) {

  .member-card__row--addr {
    display: flex;
    align-items: center;
  }

  .member-card__zip {
    margin-right: .6em;
    white-space: nowrap;
  }

  .member-card__addr-main {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
  }

  .member-card__address {
    flex: 1 1 auto;   /* 住所が残り幅を受け持つ */
  }

  .member-card__map-btn {
    margin-left: auto;   /* 右端へ 💨 */
  }

}


/* H3見出し（区分・五十音・地区町村）の開閉 */
/* 見出しを「開閉できそう」な見た目に */
.members-section__title.js-members-toggle {
    cursor: pointer;
}

/* オプション：＋／－アイコン（好みで） */
.members-section__title.js-members-toggle::after {
    content: '－';
    margin-left: 0.5em;
    font-size: 0.9em;
}

.members-section.is-collapsed .members-section__title.js-members-toggle::after {
    content: '＋';
}

/* ▼ 開閉対象のカードラッパー（city / kana / group 共通） */
/* ここではアニメーション一旦「全部オフ」にする */
.members-cards {
  overflow: visible;   /* 隠さない */
  max-height: none;    /* 制限しない */
  opacity: 1;          /* 常に見える状態 */
  transition: none;    /* アニメなし */
}

/* ▼ 閉じている状態：シンプルに display:none だけ */
.members-section.is-collapsed .members-cards {
  display: none;
}



/* =========================================================
 * スマホ専用：会員名簿 表示モード切替（H2風３択タブ）
 * PC では非表示、SP だけ表示
 * ======================================================= */

/* PC では非表示 */
.membership-mode-nav--sp {
  display: none;
}

/* 会員名簿ページ(id=3353)専用：リストの余白を詰める */
.page-id-3353 .article ul li,
.page-id-3353 .article ol li {
  margin: 0 !important;   /* 必要なら 0.1em などに調整OK */
}

/* ───── SPレイアウト ───── */
@media (max-width: 834px) {

  /* 元の H2 はスマホでは隠す */
  h2.members-section__title--group,
  h2.members-section__title--kana,
  h2.members-section__title--city {
    display: none;
  }

  /* ３択タブ本体 */
  .membership-mode-nav--sp {
    display: block;
    margin: 10px 0 15px;
    border-bottom: 5px solid #7c5b17;
  }

  .membership-mode-nav--sp ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;          /* 横一列に並べる */
    flex-wrap: nowrap;      /* 折り返さない */
    /* gap は指定しない → スキマ0 */
  }

  .membership-mode-nav--sp li {
    flex: 1 1 33.333%;      /* ３分割で等幅 */
    margin: 0;
  }

  /* タブの共通スタイル（非アクティブの基準） */
  .membership-mode-nav--sp a {
    display: block;
    text-align: center;
    padding: 10px 4px;
    border-radius: 0;                 /* H2っぽくフラットに */
    border: 1px solid #ddd9bc;
    border-right: none;               /* 真ん中の線は重複させない */
    background: #ddd9bc;              /* 非アクティブの背景色 */
    font-size: 14px;
    text-decoration: none;
    color: #333;
  }

  /* 最後のタブだけ右側の線を出す */
  .membership-mode-nav--sp li:last-child a {
    border-right: 1px solid #ddd9bc;
  }

  /* アクティブモード＝H2 と同じ色で強調 */
  .membership-mode-nav--sp li.is-active a {
    background: #7c5b17;    /* 協議会概要の H2 と同じ色 */
    color: #fff;
    border-color: #7c5b17;
    font-weight: bold;
  }

  /* 非アクティブ同士が隣り合うところだけ、白い仕切り線 */
  .membership-mode-nav--sp li:not(.is-active) + li:not(.is-active) a {
    border-left: 2px solid #ffffff;
  }
}




/* =========================
   新着情報 /news/　記事一覧ページ（カテゴリ表示関連）
   ========================= */

/* 火の用心だより・PLインフォメーション は非表示にする */
body.blog .cat-label-10,
body.blog .cat-label-11 {
  display: none;
}






/* =========================================
   Sidebar (Modern Flat Style) - REWRITE
   target:
   - #custom_html-3 : 会則
   - #custom_html-2 : リンク集
   ========================================= */

/* ---------- 共通：サイドバー全体 ---------- */
#sidebar{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- 共通：ウィジェット（白カード） ---------- */
#sidebar .widget-sidebar{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden; /* ヘッダー帯の角丸を揃える */
}

/* 中身の余白（デフォルト） */
#sidebar .widget-sidebar .textwidget{
  padding: 14px;
}

/* =========================================
   会則（custom_html-3）
   - リンク集の帯と同じ「茶帯ボタン」
   - 影は付けない（小さく見える原因を排除）
   ========================================= */

/* 会則：このウィジェットは“中身余白を0”にして帯ボタンをピッタリはめる */
#sidebar #custom_html-3 .textwidget{
  padding: 0;
}

/* 会則ボタン：帯と同寸法・同質感 */
#sidebar #custom_html-3 .side-box--rule a{
  display: flex;
  align-items: center;
  gap: 10px;

  /* 帯と揃える */
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;

  background: #7c5b17;
  color: #ffffff;

  border: 0;
  border-radius: 0; /* 外側カードが角丸なので帯はフラットでOK */

  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.2;
  text-decoration: none;

  box-shadow: none; /* 影は付けない */

  transition: filter .15s ease, transform .15s ease;
}

/* 左アクセント線・装飾は完全に無効化 */
#sidebar #custom_html-3 .side-box--rule a::before{
  content: none;
}

/* 会則：右側のアイコン（不要なら display:none に） */
#sidebar #custom_html-3 .side-box--rule a .fa{
  margin-left: auto;
  font-size: .95em;
  opacity: .85;
  color: rgba(255,255,255,.9);
}

/* hover：軽い反応だけ（影なし） */
#sidebar #custom_html-3 .side-box--rule a:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* =========================================
   リンク集（custom_html-2）
   ========================================= */

/* 見出し帯（単色） */
#sidebar #custom_html-2 .widget-sidebar-title{
  margin: 0;
  padding: 12px 14px;
  background: #7c5b17;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .03em;
  border-radius: 0; /* 外側カードが角丸なので帯はフラットでOK */
}

/* Cocoonの装飾を消す */
#sidebar #custom_html-2 .widget-sidebar-title::before,
#sidebar #custom_html-2 .widget-sidebar-title::after{
  display: none;
}

/* リンクリスト */
#sidebar #custom_html-2 .side-box__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各リンク行 */
#sidebar #custom_html-2 .side-box__list li{
  border-top: 1px solid rgba(0,0,0,.06);
}
#sidebar #custom_html-2 .side-box__list li:first-child{
  border-top: 0;
}

/* リンク */
#sidebar #custom_html-2 .side-box__list a{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px; /* ←会則の帯と左右の“揃い”を作る */
  color: #0a58ca;
  text-decoration: none;

  transition: background .15s ease, transform .15s ease, color .15s ease;
  border-radius: 5px;
}

/* 外部リンクマーク */
/*#sidebar #custom_html-2 .side-box__list a::before{
  content:"↗";
  font-size: 12px;
  font-weight: 700;
  color: #7c5b17;
  opacity: .9;
}*/



/* hover：横スライド＋ハイライト */
#sidebar #custom_html-2 .side-box__list a:hover{
  background: rgba(124,91,23,.10);
  transform: translateX(3px);
  color: #063a88;
}


/* サイドバー：外部リンクリスト */
.side-box--links a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  text-decoration: none;
}

/* テキスト側 */
.side-box__text{
  display: block;
  line-height: 1.6;
}

/* 右端の外部リンクアイコン */
.side-box--links .member-card__url-icon{
  flex-shrink: 0;
  font-size: 0.95em;
  opacity: .6;
}

/* ホバー時（任意・控えめ） */
.side-box--links a:hover .member-card__url-icon{
  opacity: .9;
}



/* =========================================
   スマホ微調整
   ========================================= */
@media (max-width: 768px){
  #sidebar{
    gap: 12px;
  }

  #sidebar .widget-sidebar{
    border-radius: 12px;
  }

  #sidebar #custom_html-2 .widget-sidebar-title,
  #sidebar #custom_html-3 .side-box--rule a{
    padding: 11px 12px;
  }

  #sidebar .widget-sidebar .textwidget{
    padding: 12px;
  }

  /* 会則は帯ボタンをピッタリにするので0のまま */
  #sidebar #custom_html-3 .textwidget{
    padding: 0;
  }
}




/* =========================================
   会員ログイン
   ========================================= */
/* 会員ログイン（ヘッダーメニュー専用） */
/* ============================
   ヘッダー：会員ログインだけ「小さなボタン」
   - 帯（li）は背景なし
   - ボタン（a）だけがクリック＆ホバー反映
   ============================ */

/* 1) 帯の区切り（li）側を無効化して“分割ボタン化”を止める */
#navi .menu-member-login,
#navi .menu-member-login:hover{
  background: transparent !important;
  border: none !important;
}

/* Cocoon側でli/aに線が入ることがあるので、まず帯の線を消す */
#navi .menu-member-login{
  border-left: none !important;
  border-right: none !important;
}

/* 2) a をボタン化（帯の中に収まるサイズ） */
#navi .menu-member-login > a{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  /* ここでボタンの大きさを決める */
  height: 36px;            /* 帯より少し小さめ */
  padding: 0 14px;
  margin: 12px 10px;        /* 帯の上下左右に余白＝“一回り小さい”を作る */

  border-radius: 3px;
  /*border: 1px solid rgba(255,255,255,0.55);*/
  background: rgba(255,255,255,0.20);

  color: #fff !important;
  font-weight: 700;
  line-height: 1;

  /* hoverを気持ちよく */
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

/* 3) ホバー時：帯ではなくボタンだけ色が変わる */
#navi .menu-member-login > a:hover{
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.8);
  transform: translateY(-1px);
}

/* 4) フォーカス（キーボード操作時）も見えるように */
#navi .menu-member-login > a:focus{
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
}









/* ============================
   トップページ　HOME
   ============================ */




/* トップ：ヒーロー以外の中身をW1256に統一（背景は全幅OK） */
.home-main .home-inner{
  width: 100%;
  max-width: 1256px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}


/* =====================================================
   HOME HERO (MetaSlider #3286) + PURPOSE overlay
   目的：テーマテンプレ時の見え方に寄せる
   - hero は全幅
   - 画像は cover で枠を必ず埋める（灰色余白を出さない）
   - object-position で「美味しい部分」を調整
   - PURPOSE は全デバイスでスライダー上に重ねる（方針変更反映）
===================================================== */

/* -----------------------------------------------------
   0) 前提：PURPOSE の absolute の基準にする
----------------------------------------------------- */
.home-hero{
  position: relative;
}

/* -----------------------------------------------------
   1) スライダー枠（高さをデバイス別に固定）
   ※あなたの微調整値を維持
----------------------------------------------------- */
.home-hero__slider{
  width: 100%;
  overflow: hidden;
  position: relative;
  --heroFocusY: 55%; /* デフォルト焦点（保険） */
}

/* PC */
@media (min-width: 1025px){
  .home-hero__slider{
    height: 700px;          /* ←維持 */
    --heroFocusY: 60%;      /* ←維持（PCの美味しい位置） */
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px){
  .home-hero__slider{
    height: 460px;          /* ←維持 */
    --heroFocusY: 55%;      /* ←維持 */
  }
}

/* SP */
@media (max-width: 767px){
  .home-hero__slider{
    height: 400px;          /* ←維持 */
    --heroFocusY: 50%;      /* ←維持 */
  }
}

/* -----------------------------------------------------
   2) MetaSlider #3286 本丸を枠高に追従（強制）
----------------------------------------------------- */
.home-hero__slider #metaslider-id-3286,
.home-hero__slider #metaslider_container_3286,
.home-hero__slider #metaslider_3286,
.home-hero__slider #metaslider_3286 .flexslider,
.home-hero__slider #metaslider_3286 .flex-viewport,
.home-hero__slider #metaslider_3286 ul.slides,
.home-hero__slider #metaslider_3286 ul.slides > li{
  height: 100% !important;
}

/* 画像を必ず枠でトリミング（余白ゼロ） */
.home-hero__slider #metaslider_3286 ul.slides > li > img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  object-position: 50% var(--heroFocusY) !important;
}

/* -----------------------------------------------------
   3) 読みやすさ（必要な時だけ使う薄い暗幕）
   - “無効化したい”なら opacity 相当は rgba を薄くする（後述）
----------------------------------------------------- */
.home-hero__slider::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.18) 45%,
    rgba(0,0,0,0.10) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* -----------------------------------------------------
   4) PURPOSE（全デバイスでスライダー上に重ねる）
   ※SPで下に出す版・コメントアウト版などの二重定義を解消
----------------------------------------------------- */
.home-purpose{
  position: absolute;
  left: 50%;
  top: 70%;                 /* ←縦位置調整ポイント（PC/Tablet/SP共通） */
  transform: translate(-50%, -50%);
  z-index: 2;               /* ←暗幕(::after)より上 */
  width: min(650px, 92%);   /* ←横幅調整ポイント */
  padding: 0;
  color: #fff;
  text-align: left;
}

/* 見出し・本文（白文字＋影：あなたの調整値を維持） */
.home-purpose__title{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 6px 20px rgba(0,0,0,0.25);
}

.home-purpose__text{
  margin: 0;
  line-height: 1.9;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 6px 20px rgba(0,0,0,0.25);
}

/* 下地は使わない（スクショ準拠） */
.home-purpose .home-inner{
  padding: 0;
  background: none;
  border-radius: 0;
  backdrop-filter: none;
}

/* 文字サイズ：あなたの既存値を維持しつつ、SPだけ別指定 */
@media (min-width: 768px){
  .home-purpose__title{
    font-size: 30px;        /* ←維持 */
    margin-bottom: 14px;
  }
  .home-purpose__text{
    font-size: 18px;        /* ←維持 */
  }
}

@media (max-width: 767px){
  /* SPは情報量が多いので、少し下げたい場合はここを調整 */
  .home-purpose{
    top: 75%;               /* ←あなたのSP overlay版の値を採用（維持） */
    width: min(560px, 85%); /* ←維持 */
  }

  .home-purpose__title{
    font-size: 20px;        /* ←あなたのSPタイトル値を維持 */
    margin-bottom: 10px;
    text-align: center;
  }

  .home-purpose__text{
    font-size: 14px;        /* ←あなたのSP本文値を維持 */
    line-height: 1.4;
  }
}

/* ヒーロー直後の余白を安定させる（PURPOSEがabsoluteなので必須） */
.home-hero-spacer{
  height: 28px; /* ←余白調整ポイント */
}
@media (max-width: 767px){
  .home-hero-spacer{
    height: 18px; /* ←SP用 */
  }
}




/* =====================================================
   HOME : OFFICE SEARCH（総合リッチ版・最終）
   - 競合していた .home-search__col a を整理（btn類は除外）
   - ボタン角丸は 3px 統一
   - 見出し(事業所検索/リード)を「両カラム共通」に見せる
   - 見出し「事業所検索」だけ #7c5b17 の帯（角丸なし）
   - リードは帯の外、背景なし
===================================================== */

/* セクション余白 */
.home-search{
  padding: 56px 0 100px;
}

/* -------------------------
   セクション見出し（共通）
------------------------- */
.home-search .home-sec-head{
  margin: 0 0 18px;
  padding: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

/* リードは帯の下・背景なし（両カラム共通に見える） */
.home-search .home-sec-head__lead{
  margin: 10px 0 0;
  padding: 0 18px;
  color: rgba(0,0,0,.72);
  line-height: 1.8;
  font-weight: 700;
  color: red;
}

/* -------------------------
   2カラム骨格
------------------------- */
.home-search__grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 834px){
  .home-search{
    padding: 44px 0 40px;
  }
  .home-search__grid{
    grid-template-columns: 1fr;
  }
}

/* -------------------------
   パネル（左右の箱）
------------------------- */
.home-panel{
  border-radius: 14px;
  border: 1px solid #dde2e8;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  overflow: hidden;
}

/* パネル見出し帯（あなたの調整値を踏襲） */
.home-panel__head{
  padding: 16px 18px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #ddd9bc;
}

.home-panel__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #503a1d;
}

.home-panel__title .fa{
  color: #503a1d;
}

.home-panel__sub{
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(80,58,29,.72);
  font-weight: 700;
}

/* パネル本文 */
.home-panel__body{
  padding: 20px;
}

/* -------------------------
   ボタン群
------------------------- */
.home-search__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ★検索ボタン（角丸3px統一／通常→hoverで反転） */
.home-search__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 7px;                 /* ←指定どおり統一 */
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;

  color: #0b57d0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.14);

  /* ここが「影の大きさ」：濃さは維持しつつ小さく */
  box-shadow: 0 6px 12px rgba(0,0,0,.06);

  transition:
    transform .12s ease,
    background .12s ease,
    color .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.home-search__btn:hover{
  transform: translateY(-1px);        /* ←現状維持（ちょい上） */

  /* hover時：協議会カラーで反転 */
  background: #987f50;
  color: #fff;
  border-color: rgba(124,91,23,.85);

  /* hover時は少しだけ強く（でも大きさは暴れない） */
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

/* “一覧へ”などのフッター導線 */
.home-panel__foot{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.home-linkbtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 3px;                 /* ←統一 */
  text-decoration: none;
  font-weight: 900;
  color: #0b57d0;
  /*background: rgba(0,0,0,.02);*/
  background: #FFF;
  border: 1px solid rgba(0,0,0,.14);
  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease;
}

.home-linkbtn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.22);
}

/* -----------------------------------------------------
   既存CSSの競合を解消：
   「.home-search__col a」は btn/linkbtn を除外して適用
   （＝もし他のaが混ざっても崩れない保険）
----------------------------------------------------- */
.home-search__col a:not(.home-search__btn):not(.home-linkbtn){
  display: inline-block;
  margin: 6px 8px 0 0;
  padding: 7px 10px;
  background: rgba(0,0,0,.04);
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.2;
}

.home-search__col a:not(.home-search__btn):not(.home-linkbtn):hover{
  background: rgba(0,0,0,.08);
  text-decoration: none;
}

/* -------------------------
   SP 微調整
------------------------- */
@media (max-width: 767px){
  .home-search .home-sec-head__title{
    padding: 12px 14px;
    font-size: 20px;
  }

  .home-search .home-sec-head__lead{
    padding: 0 14px;
    font-size: 14px;
  }

  .home-panel__body{
    padding: 12px 12px 14px;
  }

  .home-search__buttons{
    gap: 8px;
  }

  .home-search__btn{
    padding: 9px 12px;
  }
}



/* -------------------------------------
   HOME：札幌市外の検索ボタン（グループ開閉）
---------------------------------------- */
/* 初期状態：閉じている */
.home-search__outside {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* 開いている状態 */
.home-search__outside.is-open {
  max-height: 500px; /* 高さに合わせて調整 */
  opacity: 1;
  pointer-events: auto;
}


/* テキストリンク風の開閉ボタン */
.home-search__toggle-outside {
  background: none;
  border: none;
  padding: 4px 0;
  margin-top: 8px;
  margin-left: 10px;
  color: #503a1d;         /* リンク色に合わせる */
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  font-size: 15px;
}
/* ホバー時 */
.home-search__toggle-outside:hover {
  text-decoration: none;
  color: red;
}










/* =====================================================
   HOME : NEWS (RICH / 統合版)
   - 旧「骨格CSS」を破棄して、このブロックだけで完結
   - HTMLは .home-news__card / __thumb / __body 前提
   - 角丸は site方針に合わせてカードは 12px（ボタン類は既存の3px運用のままでOK）
   - 追加仕様：カードhoverで “続きを読む” が赤＋右へ（連動）
===================================================== */

.home-news{
  padding: 56px 0 70px;
  background: rgba(0,0,0,.03);
}

/* 見出し（共通ヘッダーを使う場合の余白調整だけ） */
.home-news .home-sec-head{
  margin: 0 0 18px;
  text-align: center; /* ←希望どおり常に中央 */
}

/* リスト骨格：PC 3列 / Tablet 2列 / SP 1列 */
.home-news__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* li 自体には装飾しない（カード側で完結させる） */
.home-news__item{
  margin: 0;
}

/* 1枚カード */
.home-news__card{
  display: block;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.home-news__card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 16px 30px rgba(0,0,0,.10);
}

/* サムネ：16:9固定 + 画像は切らずに全体表示（contain） */
.home-news__thumb{
  aspect-ratio: 16 / 9;                 /* 320 x 180 の比率 */
  height: auto;                         /* aspect-ratio に任せる */
  background-color: rgba(0,0,0,.04);    /* 余白が出た時の下地 */
  background-size: contain;             /* ←切らない */
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* 本文 */
.home-news__body{
  position: relative;
  padding: 14px 14px 44px; /* ←下に余白を確保（調整ポイント） */
}

.home-news__date{
  display: inline-block;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin: 0 0 8px;
}

/* タイトル */
.home-news__card-title{
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.35;
  color: #1c1c1c;
}

/* 抜粋 */
.home-news__excerpt{
  margin: 0 0 12px;
  line-height: 1.7;
  color: rgba(0,0,0,.70);
  font-weight: 700;
  font-size: 13px;
}

/* “続きを読む”（カード右下） */
.home-news__morelink{
  position: absolute;
  right: 14px;
  bottom: 14px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-weight: 900;
  color: #7c5b17;

  text-decoration: none; /* aの場合にも効く */
  transition:
    color .15s ease,
    transform .15s ease;
}

/* “続きを読む”が a じゃなくて、中に a がいる構造でも効くように保険 */
.home-news__morelink a{
  color: inherit;
  text-decoration: none;
}

/* ==============================
   ★追加：カードhoverで続きを読むも反応させる
   - カードをhoverしたら赤＋右へ
   - 「続きを読む」自体hoverでも同じ反応
============================== */

/* カードhover → 続きを読むを赤 */
.home-news__card:hover .home-news__morelink,
.home-news__card:hover .home-news__morelink a{
  color: #E53900;
}

/* カードhover → 続きを読むを右へ */
.home-news__card:hover .home-news__morelink{
  transform: translateX(4px);
}

/* 直接hover（保険） */
.home-news__morelink:hover,
.home-news__morelink:hover a{
  color: #E53900;
}

.home-news__morelink:hover{
  transform: translateX(4px);
}

/* 0件のとき */
.home-news__empty{
  grid-column: 1 / -1;
  padding: 18px 14px;
  border: 1px dashed rgba(0,0,0,.20);
  border-radius: 10px;
  color: rgba(0,0,0,.65);
  font-weight: 800;
  text-align: center;
}

/* Tablet */
@media (max-width: 1024px){
  .home-news__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SP（旧CSSの 834px で1列に寄せる） */
@media (max-width: 834px){
  .home-news__list{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .home-news{
    padding: 44px 0;
  }
  .home-news__list{
    gap: 12px;
  }
}

/* 新着情報：下部「一覧を見る」ボタン */
.home-news__more{
  margin: 18px 0 0;
  display: flex;
  justify-content: center;   /* ← 中央寄せ */
}






/* 協議会概要：3ボタン横並び（SPは縦） */
.home-about__buttons{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.home-about__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 3px;
  background: rgba(0,0,0,.04);
  text-decoration: none;
  line-height: 1.2;
}

.home-about__btn:hover{
  background: rgba(0,0,0,.08);
  text-decoration: none;
}

@media (max-width: 834px){
  .home-about__buttons{
    flex-direction: column;
  }
  .home-about__btn{
    width: 100%;
  }
}






/* =====================================================
   PARALLAX BAND (mid page / “hole” effect)
   - PC/Tablet: fixed background
   - SP: fixed OFF (iOS対策)
===================================================== */

.home-parallax-band{
  position: relative;
  padding: 120px 0;
  /*background-image: url("/wp-content/uploads/2025/10/mountain-and-lake-at-sunset-135157-0x0.jpg"); ←差し替え */
  background-image: url("/wp-content/uploads/2026/01/Whisk_2c5478bec2146a8bf4d4be9b7b0cc11cdr-0x0.jpeg"); /* ←差し替え */
  background-size: cover;
  background-position: 50% 55%;   /* ←美味しい位置（調整ポイント） */
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

/* 読みやすさ用の薄い幕 */
.home-parallax-band::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.28);   /* ←濃さ（調整ポイント） */
  pointer-events:none;
}

.home-parallax-band .home-inner{
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}

.home-parallax-band__eyebrow{
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .14em;
  opacity: .9;
}

.home-parallax-band__title{
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.home-parallax-band__actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.home-parallax-band__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 6px;
  background: rgba(255,255,255,0.92);
  color: #111;
  text-decoration: none;
  font-weight: 700;
  transition: background .15s ease, transform .15s ease;
}

.home-parallax-band__btn:hover{
  background: rgba(255,255,255,1);
  transform: translateY(-1px);
}

.home-parallax-band__btn.is-ghost{
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(2px);
}

.home-parallax-band__btn.is-ghost:hover{
  background: rgba(255,255,255,0.26);
}

/* SP: fixedを切って軽くする */
@media (max-width: 767px){
  .home-parallax-band{
    background-attachment: scroll;
    padding: 52px 0;
  }
  .home-parallax-band__title{
    font-size: 22px;
  }
}


/* =====================================================
   ABOUT SUMMARY (PARALLAX BAND) : cards 〔差し替え版〕
   - アイコン枠：正方形 / 白背景 / 中のアイコンはH2色
   - PC：カードの“高さだけ”増やす
   - Hover：カード背景を白に → 中身の色を反転
===================================================== */

/* 見出し類はそのまま（必要最低限） */
.home-about-band__eyebrow{
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  color: rgba(255,255,255,.92);
  text-shadow: 0 3px 14px rgba(0,0,0,.35);
}

.home-about-band__title{
  margin: 0 0 18px;
  text-align: center;
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 10px 26px rgba(0,0,0,0.25);
}

/* カード群 */
.home-about-band__cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}

/* ------------------------------
   カード本体
------------------------------ */
.home-about-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;               /* ←カードの厚み */
  min-height: 74px;                 /* ←基本の高さ（調整ポイント） */
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

/* PCは“高さだけ”増やす */
@media (min-width: 1025px){
  .home-about-card{
    min-height: 86px;               /* ←PCの高さ（調整ポイント） */
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Hover：白にして反転 */
.home-about-card:hover{
  background: #fff;                 /* ←指示通り */
  color: #6b4f1a;                   /* ←反転後テキスト色（H2色に合わせる/調整ポイント） */
  transform: translateY(-1px);
}

/* ------------------------------
   サムネ枠（＝アイコン枠に変更）
   ※HTMLはそのまま（span.home-about-card__thumb の中に <i> が居る前提）
------------------------------ */
.home-about-card__thumb{
  width: 48px;                      /* ←正方形サイズ（調整ポイント） */
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #fff;                 /* ←白背景 */
  box-shadow: none;                 /* 旧：画像風の枠を無効化 */
}

/* アイコン本体：小さすぎ対策 */
.home-about-card__thumb i{
  font-size: 22px;                  /* ←アイコンサイズ（調整ポイント） */
  line-height: 1;
  color: #6b4f1a;                   /* ←通常時のアイコン色（H2色に合わせる/調整ポイント） */
}

/* Hover時：アイコン枠も反転（暗色背景＋白アイコン） */
.home-about-card:hover .home-about-card__thumb{
  background: #6b4f1a;              /* ←反転背景（調整ポイント） */
}

.home-about-card:hover .home-about-card__thumb i{
  color: #fff;
}

.home-about-card__label{
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* タブレット：2x2 */
@media (max-width: 1024px){
  .home-about-band__cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }
}

/* スマホ：2列 */
@media (max-width: 767px){
  .home-about-band__title{
    font-size: 22px;
  }
  .home-about-band__cards{
    gap: 10px;
  }
  .home-about-card{
    padding: 14px 14px;
    min-height: 64px;
    gap: 12px;
  }
  .home-about-card__thumb{
    width: 44px;
    height: 44px;
  }
  .home-about-card__thumb i{
    font-size: 20px;
  }
}


/* =========================================
   Parallax band : SPでは固定を明示的に無効化
   方針：スマホは通常スクロール（速度優先・破綻回避）
========================================= */
@media (max-width: 767px){
  .home-parallax-band{
    background-attachment: scroll; /* ← fixed を明示的に使わない */
    background-size: cover;        /* ← 常に要素を埋める（灰色帯防止） */
    background-position: 50% 50%;  /* ← 自然な中央基準 */
  }
}





/* =====================================================
   HOME : EXTERNAL LINKS
   - センタリング
   - 横長ボタン風リスト
   - 外部リンクアイコン付き
===================================================== */

.home-links{
  padding: 56px 0;
}

/* 見出し（共通H2ルールに任せる前提） */
.home-links__title{
  margin-bottom: 22px;
}

/* リスト全体 */
.home-links__list{
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 550px;          /* ← 横幅を抑えて中央に */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 各項目 */
.home-links__item{
  margin: 0;
}

/* リンク本体（横長ボタン） */
.home-links__item a{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 18px;
  border-radius: 3px;        /* ← サイト方針に合わせる */
  text-decoration: none;

  background: #fff;
  border: 1px solid rgba(0,0,0,.14);
  color: #1c1c1c;

  font-weight: 800;
  letter-spacing: .02em;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease,
    border-color .15s ease;
}

/* 外部リンクアイコン（右側） */
.home-links__item a::after{
  content: "\f08e";          /* fa-external-link */
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 20px;
  opacity: .7;
}

/* hover */
.home-links__item a:hover{
  background: rgba(124,91,23,.06); /* 協議会カラーを薄く */
  border-color: rgba(124,91,23,.35);
  color: #7c5b17;
  transform: translateX(2px);
}

/* SP微調整 */
@media (max-width: 767px){
  .home-links{
    padding: 44px 0;
  }

  .home-links__list{
    max-width: 100%;
    padding: 0 4px;
  }

  .home-links__item a{
    padding: 13px 14px;
  }
}






/* =====================================================
   HOME : CTA（総合リッチ版 / 丸ごと差し替え・完成形）
   - 角丸は 3px 統一（サイト方針）
   - 左帯は太め・色固定（hoverでも変えない）
   - CTA全体の上下余白はたっぷり
===================================================== */

.home-cta{
  margin-top: 56px;
  padding: 96px 0;                 /* ← 上下をしっかり広げる */
  background: rgba(0,0,0,.03);
  border-top: 1px solid rgba(0,0,0,.06);
}

/* 見出し */
.home-cta__title{
  text-align: center;
  margin: 0 0 28px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #1c1c1c;
}

/* ボタン群：PC 3列 */
.home-cta__buttons{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

/* =====================================================
   CTAボタン（カード風）
===================================================== */

.home-cta__btn{
  /* 左帯カラー用の変数（hoverでも固定） */
  --cta-accent: transparent;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 22px 16px;              /* ← 少しゆったり */
  text-align: center;

  border-radius: 3px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.14);
  border-left: 12px solid var(--cta-accent); /* ← 太い左帯 */

  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
  color: #503a1d;

  box-shadow: 0 8px 16px rgba(0,0,0,.06);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease;
}

/* 種類別 左帯色 */
.home-cta__btn--contact{
  --cta-accent: #e53900;
}

.home-cta__btn--login{
  --cta-accent: #7c5b17;
}

.home-cta__btn--join{
  --cta-accent: #0b57d0;
}

/* hover：浮くだけ（色は変えない） */
.home-cta__btn:hover{
  transform: translateY(-2px);
  /*background: rgba(0,0,0,.02);*/
  background: #f0ebcb;
  box-shadow: 0 16px 30px rgba(0,0,0,.12);

  /* ←これが重要：左帯色を再指定して固定 */
  border-left-color: var(--cta-accent);
}

/* =====================================================
   Tablet / SP：縦積み
===================================================== */

@media (max-width: 834px){
  .home-cta{
    padding: 64px 0;               /* SPでも余白は確保 */
  }

  .home-cta__buttons{
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .home-cta__btn{
    padding: 20px 16px;
  }
}




/* =====================================================
   HOME : SECTION HEADER (COMMON) - B: Text headline
===================================================== */

.home-main .home-sec-head{
  text-align: center;
  width: 100%;
  display: block;
}

.home-main .home-sec-head__title{
  width: 100%;
  max-width: 700px;
  margin: 0 auto 20px;
  text-align: center;

  /* 箱を捨てる */
  padding: 0;
  background: none;
  border: none;

  /* ズドン！ */
  font-weight: 900;
  letter-spacing: .06em;
  color: #1c1c1c;
  position: relative;
}

/* 下線でセクション感を作る（派手にしない） */
.home-main .home-sec-head__title::after{
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin: 12px auto 0;
  background: #7c5b17;
}




.member-detail-wrapper h2 {
  background-color: #7C5B17;
  padding: 10px 25px;
  color: #FFF;
}







/* =====================================================
   右サイドの会員メニューウィジェット
===================================================== */
/* 会員メニューウィジェット全体 */
.member-sidebar {
  padding: 10px 10px 14px;
  border-radius: 8px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  font-size: 0.95rem;
}

/* 上部の「会員マイページ」ボタン */
.member-sidebar__dashboard-link {
  margin-bottom: 10px;
}

.member-sidebar__dashboard-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background-color: #e0f0c8;
  border: 1px solid #c6e1a4;
  color: #1f2933;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.member-sidebar__dashboard-btn:hover,
.member-sidebar__dashboard-btn:focus {
  background-color: #d5ecb2;
}

.member-sidebar__dashboard-icon {
  color: #1976d2;
  font-size: 1.3rem;
}

.member-sidebar__dashboard-text {
  line-height: 1.3;
}

/* 共通・管理のグループ */
.member-sidebar__group {
  padding: 8px 8px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.member-sidebar__group--common {
  background-color: #f3f6ff;
  border: 1px solid #dbe5ff;
}

.member-sidebar__group--manager {
  background-color: #fff7ec;
  border: 1px solid #ffe0b2;
}

.member-sidebar__group-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
}

/* メニューリスト */
.member-sidebar-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.member-sidebar-menu__item {
  margin: 2px 0;
}

.member-sidebar-menu__item a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  color: #1f2933;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1.1rem;
}

/* ホバー背景色：グループごとに */
.member-sidebar__group--common .member-sidebar-menu__item a:hover,
.member-sidebar__group--common .member-sidebar-menu__item a:focus {
  background-color: #e5f0ff;
}

.member-sidebar__group--manager .member-sidebar-menu__item a:hover,
.member-sidebar__group--manager .member-sidebar-menu__item a:focus {
  background-color: #ffedd5;
}

/* アイコン色もグループに合わせる */
.member-sidebar__group--common .member-sidebar-menu__item i {
  color: #1976d2; /* 青 */
}

.member-sidebar__group--manager .member-sidebar-menu__item i {
  color: #ef6c00; /* オレンジ */
}

.member-sidebar-menu__item i {
  width: 18px;
  text-align: center;
  font-size: 1.3rem;
}

.member-sidebar-menu__item span {
  margin-left: 5px;
}

/* ログアウトボタン（下部センタリング・グレー） */
.member-sidebar__logout {
  margin-top: 10px;
  text-align: center;
}

.dash-btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background-color: #e5e7eb;
  color: #111827;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid #d1d5db;
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
              transform 0.1s ease;
}

.dash-btn-logout:hover,
.dash-btn-logout:focus {
  /*background-color: #d4d4d8;*/
  background-color: #666;
  border: 1px solid #666;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
  outline: none;
  color: #fdfd83;
}

.dash-btn-logout__icon {
  font-size: 1.0rem;
  line-height: 1;
}

.dash-btn-logout__label {
  line-height: 1;
}






/* 会員詳細ページの「情報を編集する」ボタン */
.member-detail-edit {
    margin-top: 24px;
    text-align: center;        /* 右寄せ。中央にしたい場合は center */
}

.member-detail-edit-button {
    display: inline-block;
    padding: 10px 18px;
    background-color: #0073aa;   /* 基本色（WPブルー系） */
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #006799;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.1s ease;
}

/* ホバー・フォーカス時の見た目 */
.member-detail-edit-button:hover,
.member-detail-edit-button:focus {
    background-color: #006799;
    border-color: #005c87;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(-1px);
    color: #fff;
}

/* クリック時（押し込んだ感じ） */
.member-detail-edit-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}




/* UM プロフィール編集フォーム */

/* 編集できないフィールド（disabled）をグレーアウト */
.um-profile form input[disabled],
.um-profile form textarea[disabled],
.um-profile form select[disabled],
.um-profile form .select2-container--disabled .select2-selection {
    background-color: #f3f3f3 !important;
    color: #666 !important;
    border-color: #ccc !important;
    cursor: not-allowed;
}

/* 編集できるフィールドを軽くハイライト */
.um-profile form input:not([disabled]),
.um-profile form textarea:not([disabled]),
.um-profile form select:not([disabled]) {
    background-color: #fffef5;
    border-color: #e0b400;
}

/* ラベル側にも差をつけたい場合（任意） */
.um-profile .um-field input[disabled],
.um-profile .um-field textarea[disabled],
.um-profile .um-field select[disabled] {
    /* ラベルの色だけ変えたいなら、親にクラスを付けてここで指定してもOK */
}

/* 区分フィールド（member_type）を明示的にグレーアウト */
#um_field_3198_member_type .select2-selection.select2-selection--single {
    background-color: #f3f3f3 !important;
    border-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed;
}

#um_field_3198_member_type
  .select2-selection.select2-selection--single
  .select2-selection__rendered {
    color: #666 !important;
}

/* 編集可能なフィールドだけ背景を薄い黄色に（submit ボタン除外） */
.um-profile form input:not([disabled]):not([type="submit"]),
.um-profile form textarea:not([disabled]),
.um-profile form select:not([disabled]) {
    background-color: #fffef5 !important;
}





/* =====================================================
   会合関連
===================================================== */

/* 会合一覧のテーブル関連 */
.sekinen-meeting-table th:first-child,
.sekinen-meeting-table td.sekinen-meeting-col-date {
    width: 30%;
}

/* 会合一覧：終了した会合の行 */
.sekinen-meeting-table tr.sekinen-meeting-row-finished {
    background-color: #BBB;   /* 薄いグレー */
}

/* 会合一覧：中止になった会合の行 */
.sekinen-meeting-table tr.sekinen-meeting-row-cancelled {
    background-color: #fff0e5;   /* 少し赤みのあるベージュ系 */
    color: #a94442;              /* 落ち着いた赤茶色の文字 */
}

/* 終了・中止行のリンク色も少し抑える（必要なら） */
.sekinen-meeting-table tr.sekinen-meeting-row-finished a,
.sekinen-meeting-table tr.sekinen-meeting-row-cancelled a {
    color: #555555;
}
.sekinen-meeting-table tr.sekinen-meeting-row-cancelled a {
    color: #a94442;
}

/* 管理会員用 会合管理テーブル：終了した会合の行 */
.sekinen-meeting-admin-table tr.sekinen-meeting-row-finished {
    background-color: #BBB;   /* 一般会員一覧と同じ濃いめグレー */
}

/* 管理会員用 会合管理テーブル：中止になった会合の行 */
.sekinen-meeting-admin-table tr.sekinen-meeting-row-cancelled {
    background-color: #fff0e5;   /* 中止用カラー（必要に応じて調整） */
    color: #a94442;
}



/* フロント会合フォームのプレースホルダを薄く */
.sekinen-meeting-new-form input::placeholder,
.sekinen-meeting-new-form textarea::placeholder {
    color: #bbbbbb;
}

/* フォーカス中はプレースホルダを消す */
.sekinen-meeting-new-form input:focus::placeholder,
.sekinen-meeting-new-form textarea:focus::placeholder {
    color: transparent;
}

/* フォーム開閉：高さ計算を安定させる */
.sekinen-meeting-new-body {
    overflow: hidden;
}









/* ログイン中の会報記事ではシェアボックスを非表示 */
.logged-in.sekinen-member-news-single .sns-share {
    display: none;
}

/* ログイン中の会報記事では、カテゴリ／タグ行とアンダーエントリー部分を非表示 */
.logged-in.sekinen-member-news-single .entry-categories-tags,
.logged-in.sekinen-member-news-single .under-entry-content {
    display: none;
}

/* ログイン中の会報記事では、一覧に戻るボタンを表示 */
.logged-in.sekinen-member-news-single .under-entry-content::before {
    content: "会報・お知らせ一覧に戻る";
    display: inline-block;
    padding: 0.6em 1.4em;
    background-color: #0073aa;     /* 必要に応じてテーマ色に変更 */
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.95em;
    cursor: pointer;
}

/* 擬似ボタンをリンクにする（クリックで /member-news/ に移動） */
.logged-in.sekinen-member-news-single .under-entry-content::before {
    /* CSSだけではURL遷移できないので、JSを1行だけ追加するのが確実です */
}

/* 会報・お知らせ一覧に戻るボタン */
.sekinen-member-news-back {
    margin-top: 2em;
    text-align: center;
}
.sekinen-member-news-back-link {
    display: inline-block;
    padding: 0.6em 1.6em;
    background-color: #0073aa; /* テーマに合わせて変更可 */
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}
.sekinen-member-news-back-link:hover {
    background-color: #005f8d;
    color: yellow;
}






/* =====================================================
   宛名ラベル出力（会員選択）
===================================================== */
/* 区分ボタン＋説明文バー全体 */
.sekinen-label-kubun-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
    flex-wrap: wrap;
}

/* ボタンエリア全体 */
.sekinen-label-kubun-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* 共通ボタンスタイル（区分ボタン＋全て解除） */
.sekinen-label-kubun-buttons .kubun-toggle,
.sekinen-label-kubun-buttons .kubun-clear {
    border: 1px solid #ccc;
    background: #f7f7f7;
    color: #333;
    padding: 0.45rem 0.9rem;
    border-radius: 5px;
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

/* ホバー時 */
.sekinen-label-kubun-buttons .kubun-toggle:hover,
.sekinen-label-kubun-buttons .kubun-clear:hover {
    background: #e9f4fb;
    border-color: #0073aa;
    color: #0073aa;
}

/* アクティブ状態（選択中） */
.sekinen-label-kubun-buttons .kubun-toggle.is-active {
    background-color: #0073aa;
    border-color: #0073aa;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}

/* 「全てを選択」だけ少し強調 */
.sekinen-label-kubun-buttons .kubun-toggle[data-kubun="all"] {
    font-weight: 600;
}

/* 既存CSVへの案内テキスト */
.sekinen-label-existing-link {
    font-size: 12px;
    color: #4a5568;
    white-space: nowrap;
}

.sekinen-label-existing-link a {
    color: #2b6cb0;
    text-decoration: underline;
}

.sekinen-label-existing-link a:hover {
    text-decoration: none;
}


/* チェックボックス列の中央寄せ */
.sekinen-label-table td:first-child,
.sekinen-label-table th:first-child {
    text-align: center;
}
.sekinen-label-table td:first-child input[type="checkbox"] {
    margin: 0;
}

/* CSVエクスポート メッセージ用 */
.sekinen-label-notice {
    margin: 1em 0;
    padding: 0.8em 1em;
    background: #e7f7e7;
    border-left: 4px solid #46b450;
    font-size: 0.9rem;
}
.sekinen-label-notice--error {
    background: #fbeaea;
    border-left-color: #dc3232;
}

/* ラベルジェネレーターページへのボタン */
.sekinen-label-notice {
    padding: 10px 15px;
    margin: 15px 0;
    background: #f0f6ff;
    border-left: 4px solid #2b6cb0;
}

.sekinen-label-button {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 10px;
    background: #2b6cb0;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12px;
}

.sekinen-label-button:hover {
    background: #234e86;
}

/* 選択した会員のCSVを出力ボタン */
.sekinen-label-submit {
    margin-top: 1.5rem;
    text-align: center;      /* 中央寄せ */
}

.sekinen-label-submit-button {
    display: inline-block;
    padding: 1.0rem 1.5rem;
    background-color: #0073aa;
    border: 1px solid #0073aa;
    color: #fff;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
    line-height: 1;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.sekinen-label-submit-button:hover {
    background-color: #005f8a;
    border-color: #005f8a;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}


/* CSVファイルをアップロードして宛名ラベルを生成する場合はこちらから */
.sekinen-label-generator-csv-upload {
  border-radius: 5px;
  background-color: #EEE;
  padding: 10px 20px 15px;
  text-align: center;
  border: 1px solid #CCC;
}






/* =====================================================
   宛名ラベルジェネレーター（PHPインクルード版）
===================================================== */

/* コンテナ全体 */
.atena-label-container {
    /*font-size: 14px;*/
}

/* 見出し帯（テーマに合わせてお好みで） */
.atena-label-container h2 {
    margin-top: 1.5rem;
    padding: 0.6rem 0.8rem;
    background: #7a5a13;          /* サイトの茶色系に寄せる */
    color: #fff;
    font-size: 1.1rem;
}

/* テーブルまわり */
.atena-label-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
    /*font-size: 13px;*/
}

.atena-label-table th,
.atena-label-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #ddd;
}

.atena-label-table th {
    background: #f5f1e8;
    text-align: left;
}

/* ボタンのリセット・共通スタイル */
.atena-label-container button,
.atena-label-container .btn-like {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 3px;
    border: 1px solid #bbb;
    background: #f7f7f7;
    color: #333;
    /*font-size: 12px;*/
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.atena-label-container button:hover,
.atena-label-container .btn-like:hover {
    background: #e9f4fb;
    border-color: #0073aa;
    color: #0073aa;
}

/* 一覧内の操作ボタン（選択・ダウンロード・削除）を少し詰める */
.atena-label-table .actions button {
    margin-bottom: 0.25rem;
    width: 5.2rem; /* 「ダウンロード」などの幅を揃える */
}


#optionForm {
  background-color: #EEE;
  padding: 30px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #CCC;
  margin-bottom: 20px;
}

/* 「ラベルPDFを生成」ボタンを強調 */
.atena-label-container .options button[type="submit"] {
    margin-top: 0.5rem;
    padding: 0.45rem 1.1rem;
    background-color: #0073aa;
    border-color: #0073aa;
    color: #fff;
    /*font-size: 13px;*/
}

.atena-label-container .options button[type="submit"]:hover {
    background-color: #005f8a;
    border-color: #005f8a;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}

/* ページを更新するボタン */
.atena-label-container .reload {
    margin-top: 0.75rem;
}

#atena-reload-button {
    padding: 0.3rem 0.9rem;
}

/* 「宛名対象の会員選択画面に戻る」ボタン（functions.php側で .sekinen-label-back-button 付与） */
.sekinen-label-back-wrap {
    margin-top: 2.5rem;
    text-align: center;
}

.sekinen-label-back-button {
    display: inline-block;
    padding: 0.4rem 1.0rem;
    background: #9e9e9e;
    border-radius: 5px;
    color: #fff;
    /*font-size: 12px;*/
    text-decoration: none;
}

.sekinen-label-back-button:hover {
    background: #777777;
    color: #FFF;
}







/* =========================================
   入退会管理：内容を確認のボタンUI
========================================= */

.sekinen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  min-width: 120px;
}

/* 内容確認ボタン */
.sekinen-btn-detail {
  background: #1e73be;
  color: #fff;
  border: 1px solid #1e73be;
}

.sekinen-btn-detail:hover {
  background: #155a94;
  border-color: #155a94;
  color: #fff;
}

/* テーブル内の余白 */
.sekinen-member-requests td {
  padding: 12px 8px;
}



/* ===============================
   承認画面ボタンUI
================================ */

/* ボタンエリア */
.sekinen-action-buttons {
  margin-top: 1.8em;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 共通ボタン */
.sekinen-action-buttons .button,
.sekinen-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s ease;
}

/* 編集 */
.sekinen-action-buttons a.button {
  background: #f1f3f5;
  border: 1px solid #ccc;
  color: #333;
}

.sekinen-action-buttons a.button:hover {
  background: #e2e6ea;
}

/* 承認 */
.sekinen-action-buttons .button-primary {
  background: #2e7d32;
  border: none;
  color: #fff;
}

.sekinen-action-buttons .button-primary:hover {
  background: #1b5e20;
}

/* 却下 */
.sekinen-action-buttons button[value="reject"] {
  background: #c62828;
  border: none;
  color: #fff;
}

.sekinen-action-buttons button[value="reject"]:hover {
  background: #8e0000;
}

/* 戻るリンク */
.sekinen-back-link {
  margin-top: 1.5em;
}

.sekinen-btn-back {
  background: #607d8b;
  color: #fff;
  padding: 9px 16px;
  border-radius: 6px;
}

.sekinen-btn-back:hover {
  background: #455a64;
}


/* =========================================
   未承認ユーザーの編集画面アクションボタン
========================================= */

.sekinen-action-row {
  margin-top: 24px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 保存ボタン（メイン） */
.sekinen-btn-save {
  background: #00a32a;
  border: 1px solid #00a32a;
  color: #fff;
}

.sekinen-btn-save:hover {
  background: #007c1f;
  border-color: #007c1f;
  color: #fff;
}

/* 戻るボタン（サブ） */
.sekinen-btn-back {
  background: #6c757d;
  border: 1px solid #6c757d;
  color: #fff;
}

.sekinen-btn-back:hover {
  background: #565e64;
  border-color: #565e64;
  color: #fff;
}






/* =========================================
   会合一覧
========================================= */

/* 会合一覧 操作ボタン */
.meeting-btn {
    display: inline-block;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 4px;
    text-decoration: none;
    margin-right: 4px;
    transition: 0.2s ease;
}

/* 詳細ボタン */
.meeting-btn-detail {
    background: #007ebb;
    color: #fff;
}

.meeting-btn-detail:hover {
    background: #005f8d;
    color: #fff;
}

/* 通知ボタン */
.meeting-btn-notify {
    background: #f39c12;
    color: #fff;
}

.meeting-btn-notify:hover {
    background: #d98200;
    color: #fff;
}







/* =========================================
   /member-news/ 会報・お知らせ 一覧
   shortcode: [sekinen_member_post_list]
   ========================================= */

.sekinen-member-post-list-wrapper{
  max-width: 980px;
  margin: 0 auto;
}

.sekinen-member-post-list-wrapper > h2{
  margin: 0 0 14px;
  font-size: 1.2rem;
  line-height: 1.4;
}

/* --- Table base --- */
.sekinen-member-post-list{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  overflow: hidden;

  /* ★おすすめ：テーブル内文字を少し小さく */
  font-size: 13px;
}

.sekinen-member-post-list thead th{
  background: rgba(0,0,0,0.04);
  font-weight: 700;
  padding: 10px 12px; /* ★少し詰める */
  border-bottom: 1px solid rgba(0,0,0,0.10);
  text-align: left;
  white-space: nowrap;

  /* ★ヘッダ文字も合わせて少し小さく */
  font-size: 13px;
}

.sekinen-member-post-list tbody td{
  padding: 10px 12px; /* ★少し詰める */
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: middle;
}

.sekinen-member-post-list tbody tr:last-child td{
  border-bottom: none;
}

.sekinen-member-post-list tbody tr:hover{
  background: rgba(0,0,0,0.02);
}

/* 列幅（崩れ防止） */
.sekinen-member-post-list th:nth-child(2),
.sekinen-member-post-list td:nth-child(2){
  width: 170px;
  white-space: nowrap;

  /* ★投稿日はさらに控えめに */
  font-size: 12px;
  color: rgba(0,0,0,0.65);
  letter-spacing: 0.02em;
}

.sekinen-member-post-list th:nth-child(3),
.sekinen-member-post-list td:nth-child(3){
  width: 110px;
  text-align: center;
  white-space: nowrap;
}

/* タイトルが長い時の折り返し */
.sekinen-member-post-list td:first-child{
  word-break: break-word;
  font-weight: 600; /* ★小さくしても読みやすく */
}

/* --- 「表示」ボタン化 --- */
.sekinen-member-post-list td a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 700;

  /* ★ボタン文字はほんの少し小さく */
  font-size: 0.9rem;

  line-height: 1;
  border: 1px solid rgba(0,0,0,0.18);
  background: #f7f7f7;
  color: #111 !important;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.sekinen-member-post-list td a:hover{
  background: #ffffff;
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  /*transform: translateY(-1px);*/
}

.sekinen-member-post-list td a:active{
  transform: translateY(0);
  box-shadow: none;
}

.sekinen-member-post-list td a:focus-visible{
  outline: 3px solid rgba(0, 0, 0, 0.18);
  outline-offset: 2px;
}



/* 会報記事を投稿する　ボタン */
.sekinen-member-post-submit {
  margin-top: 1.5rem;
  text-align: center;
}
.sekinen-member-post-submit-button {
  display: inline-block;
  padding: 1.0rem 1.5rem;
  background-color: #0073aa;
  border: 1px solid #0073aa;
  color: #fff;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sekinen-member-post-submit-button:hover {
    background-color: #005f8a;
    border-color: #005f8a;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}



/* 会報記事を更新する　ボタン */
.sekinen-member-edit-submit {
  margin-top: 1.5rem;
  text-align: center;
}
.sekinen-member-edit-submit-button {
  display: inline-block;
  padding: 1.0rem 1.5rem;
  background-color: #0073aa;
  border: 1px solid #0073aa;
  color: #fff;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sekinen-member-edit-submit-button:hover {
    background-color: #005f8a;
    border-color: #005f8a;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}



/* 会報・記事の管理に戻る　ボタン */
.sekinen-member-post-back {
    margin-top: 2.5rem;
    text-align: center;
}
.sekinen-member-post-back-button {
    display: inline-block;
    padding: 0.4rem 1.0rem;
    background: #9e9e9e;
    border-radius: 5px;
    color: #fff;
    /*font-size: 12px;*/
    text-decoration: none;
}
.sekinen-member-post-back-button:hover {
    background: #777777;
    color: #FFF;
}



/* --- Mobile --- */
@media (max-width: 640px){
  .sekinen-member-post-list thead{
    display: none;
  }

  .sekinen-member-post-list,
  .sekinen-member-post-list tbody,
  .sekinen-member-post-list tr,
  .sekinen-member-post-list td{
    display: block;
    width: 100%;
  }

  .sekinen-member-post-list{
    border-radius: 10px;

    /* ★モバイルでも同じ基準 */
    font-size: 13px;
  }

  .sekinen-member-post-list tbody tr{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
  }

  .sekinen-member-post-list tbody tr:last-child{
    border-bottom: none;
  }

  .sekinen-member-post-list tbody td{
    border: none;
    padding: 6px 0;
  }

  .sekinen-member-post-list td:nth-child(2){
    color: rgba(0,0,0,0.70);
    font-size: 12px; /* ★統一して小さめ */
  }

  .sekinen-member-post-list td:nth-child(3){
    text-align: left;
    padding-top: 8px;
  }

  .sekinen-member-post-list td a{
    min-width: 88px;
  }
}




/* =========================================
   /member-post-manage/ 管理側：列幅だけ最適化
   （既存 .sekinen-member-post-list の共通デザインはそのまま）
   ========================================= */

.sekinen-member-post-manage .sekinen-member-post-list{
  table-layout: fixed; /* 列幅指定を効かせて、全体のバランスを安定させる */
}

/* タイトル列：広め＋長文は省略表示（必要なら改行にも変更可） */
.sekinen-member-post-manage .sekinen-member-post-list th:nth-child(1),
.sekinen-member-post-manage .sekinen-member-post-list td:nth-child(1){
  width: auto;
}

.sekinen-member-post-manage .sekinen-member-post-list td:nth-child(1){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 投稿日：少しだけ細め（任意） */
.sekinen-member-post-manage .sekinen-member-post-list th:nth-child(2),
.sekinen-member-post-manage .sekinen-member-post-list td:nth-child(2){
  width: 160px;
}

/* ステータス：固定幅 */
.sekinen-member-post-manage .sekinen-member-post-list th:nth-child(3),
.sekinen-member-post-manage .sekinen-member-post-list td:nth-child(3){
  width: 90px;
  white-space: nowrap;
}

/* 操作：3ボタンがちょうど入るくらいに“少し狭め” */
.sekinen-member-post-manage .sekinen-member-post-list th:nth-child(4),
.sekinen-member-post-manage .sekinen-member-post-list td:nth-child(4){
  width: 240px;
  white-space: nowrap;
  text-align: center;
}

/* 操作列のボタン群：横並びの見た目を整える（隙間だけ調整） */
.sekinen-member-post-manage .sekinen-member-post-list td:nth-child(4){
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

/* =========================================
   /member-post-manage/
   操作ボタン：背景色ベース・白文字・ボーダーなし
   ========================================= */

/* 管理ページの操作列ボタン共通 */
.sekinen-member-post-manage 
.sekinen-member-post-list td:nth-child(4) a{
  border: none;
  color: #fff !important;
  font-weight: 600;
  box-shadow: none;
  transition: background .18s ease, transform .08s ease;
}

/* =====================
   表示（ブルー）
   ===================== */
/* 表示ボタン（1番目のリンク）を共通ブルーに */
.sekinen-member-post-list td a:first-of-type{
  background: #2f5bd3;
  color: #fff !important;
  border: none;
  box-shadow: none;
  font-weight: 600;
  transition: background .18s ease, transform .08s ease;
}

.sekinen-member-post-list td a:first-of-type:hover{
  background: #2548a8;
}

.sekinen-member-post-list td a:first-of-type:active{
  transform: translateY(0);
}

/* =====================
   編集（グリーン）
   ===================== */
.sekinen-member-post-manage 
.sekinen-member-post-list td:nth-child(4) a:nth-of-type(2){
  background: #1f8a4c;
}

.sekinen-member-post-manage 
.sekinen-member-post-list td:nth-child(4) a:nth-of-type(2):hover{
  background: #16683a;
}

/* =====================
   通知（オレンジ）
   ===================== */
.sekinen-member-post-manage 
.sekinen-member-post-list td:nth-child(4) a:nth-of-type(3){
  background: #c87400;
}

.sekinen-member-post-manage 
.sekinen-member-post-list td:nth-child(4) a:nth-of-type(3):hover{
  background: #9e5a00;
}



/* =========================================
   /member-post-manage/
   「新規に会報・お知らせを投稿する」ボタン化
   ========================================= */

.sekinen-member-post-manage p > a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #2e88aa;        /* 落ち着いた濃色 */
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  border: none;
  box-shadow: none;
  transition: background .18s ease, transform .08s ease;
}

.sekinen-member-post-manage p > a.button:hover{
  background: #175973;     /* 少し暗く */
}

.sekinen-member-post-manage p > a.button:active{
  transform: translateY(0);
}








/* =========================================
   /meetings/
   「詳細」ボタンを統一ブルーに
   ========================================= */

.sekinen-meeting-table td a.sekinen-meeting-detail-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 14px;
  border-radius: 999px;

  background: #2f5bd3;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.9rem;

  border: none;
  box-shadow: none;
  transition: background .18s ease, transform .08s ease;
}

.sekinen-meeting-table td a.sekinen-meeting-detail-button:hover{
  background: #2548a8;
}

.sekinen-meeting-table td a.sekinen-meeting-detail-button:active{
  transform: translateY(0);
}

/* =========================================
   /meetings/
   会報ページと統一＋日時を重要表示
   ========================================= */

.sekinen-meeting-list{
  max-width: 980px;
  margin: 0 auto;
}

.sekinen-meeting-list > h2{
  margin: 0 0 14px;
  font-size: 1.2rem;
  line-height: 1.4;
}

/* --- Table base --- */
.sekinen-meeting-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  overflow: hidden;

  font-size: 13px;
}

.sekinen-meeting-table thead th{
  background: rgba(0,0,0,0.04);
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
}

.sekinen-meeting-table tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: middle;
}

.sekinen-meeting-table tbody tr:last-child td{
  border-bottom: none;
}

.sekinen-meeting-table tbody tr:hover{
  background: rgba(0,0,0,0.02);
}

/* =========================================
   日時は重要情報 → 会合名と同等扱い
   ========================================= */
.sekinen-meeting-table td.sekinen-meeting-col-date{
  font-size: 13px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}

/* 会合名も同じ強さ */
.sekinen-meeting-table td:nth-child(2){
  font-weight: 600;
  word-break: break-word;
}

/* ステータス列幅 */
.sekinen-meeting-table th:nth-child(3),
.sekinen-meeting-table td:nth-child(3){
  width: 100px;
  white-space: nowrap;
}

/* 出欠列幅 */
.sekinen-meeting-table th:nth-child(4),
.sekinen-meeting-table td:nth-child(4){
  width: 90px;
  white-space: nowrap;
}

/* 操作列幅 */
.sekinen-meeting-table th:nth-child(5),
.sekinen-meeting-table td:nth-child(5){
  width: 110px;
  text-align: center;
  white-space: nowrap;
}

/* --- Mobile --- */
@media (max-width: 640px){

  .sekinen-meeting-table thead{
    display: none;
  }

  .sekinen-meeting-table,
  .sekinen-meeting-table tbody,
  .sekinen-meeting-table tr,
  .sekinen-meeting-table td{
    display: block;
    width: 100%;
  }

  .sekinen-meeting-table tbody tr{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
  }

  .sekinen-meeting-table tbody td{
    border: none;
    padding: 6px 0;
  }

  .sekinen-meeting-table td:nth-child(5){
    text-align: left;
    padding-top: 8px;
  }
}







/* =========================================
   /meetings/ 会合詳細ページ（single meeting）
   操作しやすく・見やすく（出欠が主役）
   ========================================= */

/* --- base --- */
.sekinen-meeting-detail{
  max-width: 980px;
  margin: 0 auto;
  font-size: 15px; /* ★全体の最小文字を底上げ */
  line-height: 1.75;
}

/* タイトル */
.sekinen-meeting-detail > h1{
  margin: 0 0 18px;
  font-size: 1.65rem;
  line-height: 1.25;
}

/* 共通カード */
.sekinen-meeting-detail .sekinen-meeting-meta,
.sekinen-meeting-detail .sekinen-meeting-attendance{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

/* =========================================
   会合詳細（日時/場所/コメント/ステータス）
   - 「項目名」幅揃え
   - 項目名に薄いグレー背景
   - 全体センタリング寄りで整える
   ========================================= */
.sekinen-meeting-detail .sekinen-meeting-meta{
  padding: 18px 18px;
  margin: 0 0 14px;
}

/* p を行として整形 */
.sekinen-meeting-detail .sekinen-meeting-meta p{
  margin: 0;
  padding: 12px 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* ★ 左寄せ */
  gap: 14px;
  border-top: 1px solid rgba(0,0,0,0.07);
  text-align: left;             /* ★ テキスト左 */
}
.sekinen-meeting-detail .sekinen-meeting-meta p:first-child{
  border-top: none;
}

/* strong を「項目名ラベル」に */
.sekinen-meeting-detail .sekinen-meeting-meta p > strong{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;                /* ★項目名の幅を揃える */
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 5px;
  background: rgba(0,0,0,0.06); /* ★薄いグレー背景（復活） */
  color: rgba(0,0,0,0.78);
  font-weight: 800;
  letter-spacing: .02em;
}

/* 値側 */
.sekinen-meeting-detail .sekinen-meeting-meta p > strong + *{
  flex: 0 1 auto;
  text-align: left;
}

/* コメントの <br> などで縦が増えても中央基準を崩さない */
.sekinen-meeting-detail .sekinen-meeting-meta p{
  text-align: center;
}
.sekinen-meeting-detail .sekinen-meeting-meta p br{
  display: block;
  content: "";
  margin-top: 6px;
}

/* =========================================
   中止/終了のメッセージ
   ========================================= */
.sekinen-meeting-detail .sekinen-meeting-status-message{
  max-width: 980px;
  margin: 10px auto 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  text-align: center;
  font-weight: 700;
}
.sekinen-meeting-detail .sekinen-meeting-status-cancelled{
  background: rgba(207,63,54,0.10);
  border-color: rgba(207,63,54,0.25);
  color: rgba(140, 20, 16, 0.95);
}
.sekinen-meeting-detail .sekinen-meeting-status-finished{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.70);
}

/* =========================================
   管理会員：中止・削除ボタン
   - 色を「修正前（赤系）」に戻す
   - 幅はテキスト相当、センター
   - 下に余裕を追加
   ========================================= */
.sekinen-meeting-detail .sekinen-meeting-manager-actions{
  display: flex;
  justify-content: center;
  margin: 12px 0 22px; /* ★下をゆったり */
}
.sekinen-meeting-detail .sekinen-meeting-manager-actions form{
  margin: 0;
}
.sekinen-meeting-detail .sekinen-meeting-manager-actions button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: #cf3f36; /* ★赤系に戻す */
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.sekinen-meeting-detail .sekinen-meeting-manager-actions button:hover{
  filter: brightness(0.92);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.sekinen-meeting-detail .sekinen-meeting-manager-actions button:active{
  transform: translateY(0);
  box-shadow: none;
}

/* =========================================
   あなたの出欠（メイン）
   - 見出し 1.35rem、センター
   - 内側上下padding増
   - 2択ボタン：横並び / 淡色背景 + 色文字
   - 選択時：背景が文字色、文字は白（メリハリ）
   ========================================= */
.sekinen-meeting-detail .sekinen-meeting-attendance{
  padding: 26px 18px; /* ★上下増 */
  margin: 0 0 18px;
  text-align: center;
}

.sekinen-meeting-detail .sekinen-meeting-attendance > h2{
  margin: 0 0 16px;
  font-size: 1.35rem; /* ★指定 */
  font-weight: 900;
  text-align: center;
}

/* フォーム全体 */
.sekinen-meeting-detail .sekinen-meeting-attendance form{
  margin: 0;
}

/* ラジオ2択の並び */
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type{
  margin: 0 0 14px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ラベルをボタン化 */
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type label{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 18px 18px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
  font-size: 1.15rem; /* ★文字サイズUP */
}

/* input は隠す */
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type label input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---- 色（青=出席 / 赤=欠席）淡色 + 色文字 ---- */
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type label:has(input[value="attend"]){
  background: rgba(39, 114, 212, 0.12);
  color: #2772d4;
  border-color: rgba(39, 114, 212, 0.22);
}
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type label:has(input[value="absent"]){
  background: rgba(207, 63, 54, 0.12);
  color: #cf3f36;
  border-color: rgba(207, 63, 54, 0.22);
}

/* hover */
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type label:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

/* ---- 選択時：背景=文字色 / 文字=白（メリハリ） ---- */
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type label:has(input[value="attend"]:checked){
  background: #2772d4;
  color: #fff;
  border-color: rgba(0,0,0,0.00);
}
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type label:has(input[value="absent"]:checked){
  background: #cf3f36;
  color: #fff;
  border-color: rgba(0,0,0,0.00);
}

/* 選択時の外枠強調 */
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type label:has(input:checked){
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

/* 送信ボタン（出欠を登録する） */
.sekinen-meeting-detail .sekinen-meeting-attendance form > p:last-of-type{
  margin: 18px 0 0; /* ★少し下げる */
  display: flex;
  justify-content: center;
}
.sekinen-meeting-detail .sekinen-meeting-attendance form button[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px; /* ★テキスト幅相当 */
  border-radius: 999px;
  border: none;
  background: #222;
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.sekinen-meeting-detail .sekinen-meeting-attendance form button[type="submit"]:hover{
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.sekinen-meeting-detail .sekinen-meeting-attendance form button[type="submit"]:active{
  transform: translateY(0);
  box-shadow: none;
}

/* 登録後（フォームが出ない時）の「現在のステータス」 */
.sekinen-meeting-detail .sekinen-meeting-attendance > p:first-of-type{
  margin: 10px 0 0;
  font-size: 1.05rem; /* ★少し大きく */
  font-weight: 900;
}

/* ※「出席/欠席」だけ色を付けたい場合は、テンプレ側で
   出席/欠席の出力を <span class="is-attend">出席</span> 等にすると完璧にできます。
   （CSSだけだと単語だけの色分けが困難です）
*/
.sekinen-meeting-detail .sekinen-meeting-attendance .is-attend{
  color: #2772d4;
  font-size: 1.35rem;
  font-weight: 1000;
  margin-left: 6px;
}
.sekinen-meeting-detail .sekinen-meeting-attendance .is-absent{
  color: #cf3f36;
  font-size: 1.35rem;
  font-weight: 1000;
  margin-left: 6px;
}

/* 「変更希望は…」行：センター＋下げる */
.sekinen-meeting-detail .sekinen-meeting-attendance > p{
  text-align: center;
}
.sekinen-meeting-detail .sekinen-meeting-attendance > p:last-of-type{
  margin-top: 16px; /* ★もう少し下げる */
  color: rgba(0,0,0,0.70);
  font-weight: 700;
}

/* =========================================
   出席者一覧 / 欠席者一覧
   - 見出し＋内容を「セット」で左右並び
   - 見出しと内容はピッタリ接続
   - 左右の段差を揃える
   - 箇条書きの黒丸を内側に
   ========================================= */
.sekinen-meeting-detail .sekinen-meeting-attendance-list{
  margin: 18px 0 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 0; /* ★見出しと内容をくっつける */
  align-items: start;
}

/* 1つ目（出席） */
.sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(1){
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(39,114,212,0.22);
  border-bottom: none;
  background: rgba(39,114,212,0.14); /* ★淡い青（統一） */
  color: #2772d4;
  font-weight: 1000;
  font-size: 1.02rem;
}
.sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(1) + *{
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 14px 16px;
  border-radius: 0 0 14px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  border-top: none;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  min-height: 72px;
}

/* 2つ目（欠席） */
.sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(2){
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 12px 14px; /* ★高さを揃える */
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(207,63,54,0.22);
  border-bottom: none;
  background: rgba(207,63,54,0.14); /* ★淡い赤（統一） */
  color: #cf3f36;
  font-weight: 1000;
  font-size: 1.02rem;
}
.sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(2) + *{
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 14px 16px;
  border-radius: 0 0 14px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  border-top: none;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  min-height: 72px;
}

/* 箇条書きの黒丸を内側に（左端ぶつかり対策） */
.sekinen-meeting-detail .sekinen-meeting-attendance-list ul{
  margin: 0;
  padding-left: 1.35em; /* ★黒丸を右へ */
}
.sekinen-meeting-detail .sekinen-meeting-attendance-list li{
  margin: 6px 15px;
}

/* 「まだ登録はありません」も見た目を整える */
.sekinen-meeting-detail .sekinen-meeting-attendance-list p{
  margin: 0;
  color: rgba(0,0,0,0.70);
  font-weight: 700;
}

/* =========================================
   戻るボタン：ボタン感を復活＆センター
   ========================================= */
.sekinen-meeting-detail .sekinen-meeting-backlink{
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}
.sekinen-meeting-detail .sekinen-meeting-backlink p{
  margin: 0;
}
.sekinen-meeting-detail .sekinen-meeting-backlink a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: #6a4f19;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.sekinen-meeting-detail .sekinen-meeting-backlink a.button:hover{
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.sekinen-meeting-detail .sekinen-meeting-backlink a.button:active{
  transform: translateY(0);
  box-shadow: none;
}

/* =========================================
   モバイル：一覧は縦並び、2択も縦寄り
   ========================================= */
@media (max-width: 640px){

  .sekinen-meeting-detail{
    font-size: 15px;
  }

  .sekinen-meeting-detail .sekinen-meeting-meta p{
    flex-direction: column;
    gap: 8px;
    padding: 12px 8px;
  }
  .sekinen-meeting-detail .sekinen-meeting-meta p > strong{
    width: auto;
    min-width: 0;
  }

  .sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type{
    flex-direction: column;
    gap: 12px;
  }
  .sekinen-meeting-detail .sekinen-meeting-attendance form > p:first-of-type label{
    width: 100%;
    min-width: 0;
    font-size: 1.12rem;
  }

  .sekinen-meeting-detail .sekinen-meeting-attendance-list{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 16px; /* 縦は少し間隔 */
  }

  .sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(1),
  .sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(2){
    grid-column: 1;
  }

  .sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(1){
    grid-row: auto;
  }
  .sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(1) + *{
    grid-row: auto;
  }
  .sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(2){
    grid-row: auto;
  }
  .sekinen-meeting-detail .sekinen-meeting-attendance-list > h2:nth-of-type(2) + *{
    grid-row: auto;
  }
}










/* 資格者証カード画像アップロード　モーダル一式 */
#license-card-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.5);
}

#license-card-modal .license-card-modal-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 480px;
  width: 90%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  padding: 20px 24px;
}

/* モーダル内テキスト */
.license-card-modal-title {
  margin: 0 0 0.75em;
  font-size: 1.05rem;
  text-align: center !important;
}

.license-card-modal-text {
  margin: 0 0 1em;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  text-align: left !important;
  padding-left: 20px;
}

/* ファイル入力行 */
.license-card-modal-upload {
  text-align: center;
  margin-bottom: 0.5em;
}

.license-card-modal-upload input[type="file"] {
  display: inline-block;
  margin: 0 auto;
}

/* ステータス表示 */
.license-card-modal-status {
  margin-top: 0.75em;
  font-size: 0.9rem;
  color: #555;
}

/* ボタン行：UMボタンを中央に横並び */
.license-card-modal-buttons {
  margin-top: 1.2em;
  display: flex !important;
  justify-content: center !important;
  gap: 0.75em;
}

.license-card-modal-button {
  min-width: 140px;
}

/* プロフィール側ブロック全体 */
.license-card-block {
  margin: 1.5em 0;
  padding: 1.2em 1.5em;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fafafa;
}

.license-card-title {
  margin: 0 0 0.5em;
  font-size: 1.1rem;
}

/* フィールド内レイアウトを中央寄せ */
.um-field-license-card .license-card-preview,
.um-field-license-card .license-card-description {
  text-align: center !important;
}

/* 説明テキスト */
.um-field-license-card .license-card-description p {
  margin: 0 0 0.75em;
  font-size: 0.9rem;
  color: #666;
}

/* 画像プレビュー */
.um-field-license-card .license-card-image {
  display: inline-block !important;
  margin: 0 auto !important;
  max-width: 300px;
  height: auto;
  border: 1px solid #ddd;
  background: #fff;
}

.um-field-license-card .license-card-image.is-empty {
  display: none;
}

.um-field-license-card .license-card-status {
  margin: 0.5em 0 0.75em;
  font-size: 0.9rem;
  color: #555;
}

/* 資格者証アップロードボタンを UM 風に */
.um-field-license-card .license-card-button {
  display: inline-block;
  padding: 10px 40px;
  border-radius: 3px;
  border: none;
  background-color: #38a9ff;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.um-field-license-card .license-card-button:hover {
  background-color: #2f90d9;
}

.um-field-license-card .license-card-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}



/* モーダル内ボタンを UM 風に再定義 */
#license-card-modal .button {
  display: inline-block;
  padding: 8px 24px;
  border-radius: 3px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

#license-card-modal .button:hover {
  background: #f0f0f0;
}

/* プライマリ（青ボタン） */
#license-card-modal .button-primary {
  border-color: #2f9be5;
  background-color: #38a9ff;
  color: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}

#license-card-modal .button-primary:hover {
  background-color: #2f90d9;
}

#license-card-modal .button-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

/* 横並びレイアウト */
.license-card-modal-buttons {
  margin-top: 1.2em;
  display: flex;
  justify-content: center;
  gap: 0.75em;
}

.license-card-modal-button {
  min-width: 140px;
}



/* Croppie 表示エリア（免許証に近い比率） */
.license-card-cropper {
  width: 100%;
  max-width: 400px;
  height: 260px;              /* 必要ならここで高さも調整 */
  margin: 0 auto 4em;       /* 下に十分な余白をとる */
}






/* 資格者証カード画像 拡大表示モーダル */
#license-card-view-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.7);
}

/* 画面のほぼ全体を使う */
#license-card-view-modal .license-card-view-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;   /* 横方向は画面の 96% を使う */
  height: 70vh;  /* 縦方向も 96% を使う */
}

/* その枠の中で最大サイズ表示 */
#license-card-view-img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* 閉じるボタン */
.license-card-view-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}


/* 会員情報　詳細ページ（/member-detail/）
石油機器技術管理士資格者証 画像キャプション*/
.detail-license-card-status {
  font-size: 80%;
}




/* =========================================================
 * UMログインページ：
 * パスワード入力時の伏せ字解除機能（目アイコンでON / OFF）
 * ========================================================= */
.um-has-password-toggle {
  position: relative;
}

.um-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
  font-size: 16px;
  z-index: 2;
}

.um-password-toggle:hover {
  color: #333;
}



/* =========================================================
 * 会員名簿：札幌市外の検索ボタン（グループ開閉）
 * ========================================================= */
/* 札幌市外 li は前と同じ */
.member-anchor-nav--city .js-non-sapporo {
    display: none;
}

.member-anchor-nav--city.js-show-non-sapporo .js-non-sapporo {
    display: list-item;
}

/* トグル用テキストリンク風スタイル */
.member-anchor-nav--city .city-toggle-text {
    margin-left: 0.75em;          /* 札幌市の最後のボタンの右隣に余白 */
    cursor: pointer;
    color: inherit;
    text-decoration: underline;   /* お好みで */
    font-size: 0.7em;             /* 少し小さめにする例 */
}

.member-anchor-nav--city .city-toggle-text:hover {
    color: red;                   /* ホバー時に文字色を赤 */
}