@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){
  /*必要ならばここにコードを書く*/
}

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


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

.entry-title,
.archive-title {
  position: relative;
  margin: 24px 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.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);
}

/* ===========================
 * ページごとの画像差し替え
 * （必ず↑の後ろに書く）
 * =========================== */

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

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

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

/* スマホ */
@media (max-width: 834px) {
  .entry-title,
  .archive-title {
    margin: 16px 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;
  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__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;
  }
}