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



/* =========================
   固定ページ 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: 8px 0;
  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: 8px 16px;
  }
}

/* ─────────────────────────────
 * 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: 6px 12px;
  }
}

/* ─────────────────────────────
 * 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;
}



/* スマホ専用 会員名簿・表示モード切り替えナビ */
.membership-mode-nav--sp {
  display: none;      /* PCでは非表示 */
  margin: 10px 0 25px;
  text-align: center; /* H2 っぽく中央寄せ */
}

.membership-mode-nav--sp ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex; /* 横一列に並べる */
  gap: 6px;
}

.membership-mode-nav--sp li {
  margin: 0;
}

.membership-mode-nav--sp a {
  display: inline-block;
  padding: 10px 16px;        /* H2感 → 少し大きく */
  border-radius: 999px;       /*  pill の丸タブ */
  background: #f5f5f5;
  border: 1px solid #ccc;
  font-size: 1.1rem;          /* H2寄りのサイズ */
  font-weight: 700;           /* しっかり太字 */
  text-decoration: none;
  color: #333;
}

/* アクティブモードの強調（H2相当の濃いトーン） */
.membership-mode-nav--sp li.is-active a {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* スマホ時だけ表示 */
@media (max-width: 834px) {
  .membership-mode-nav--sp {
    display: block;
  }
}