/* =============================================
   pages/about.css — 研究会の概要
   ---------------------------------------------
   このCSSは about 固定ページでのみ読み込まれるため、
   ページ限定セレクタは不要。
   ============================================= */


/* (旧 is-style-bar 用ルールは削除済み。HTML側で section-title-left クラスに移行) */


/* -------------------------------------------
   2-2. 会員各社セクションのリード文（member-intro）
        薄グレーボックスで囲む
   ------------------------------------------- */
.wp-block-group.member-intro {
  background: var(--c-bg-alt);
  padding: 24px 28px;
  border-radius: 8px;
  margin: 0 0 32px 0;
}
.member-intro .member-intro-text,
.member-intro p.member-intro-text,
.member-intro > p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-text);
  margin: 0;
  text-align: left;
}


/* -------------------------------------------
   3. 役員紹介（officers-grid）
       4列・カードなし・中央寄せ
   ------------------------------------------- */
.officers-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
  margin: 32px 0 0 !important;
  padding: 24px 0 !important;
  flex-wrap: nowrap !important;
}
.wp-block-columns.officers-grid > .wp-block-column.officer-item,
.officers-grid .officer-item {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  flex-basis: auto !important;
  margin: 0 !important;
  width: auto !important;
}
.officer-position,
p.officer-position {
  display: block;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-text-muted) !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 16px 0 !important;
}
.officer-name,
h3.officer-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  margin: 0 !important;
  letter-spacing: 0.05em !important;
}


/* -------------------------------------------
   4. 会員各社
   ------------------------------------------- */
/* (会員各社のリード文ボックス装飾は theme-fix.css 9番の content-block と member-intro に統合) */

/* template-parts/about/members.php が出力するロゴグリッド */
.member-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin: 0 !important;
}
.member-item {
  background: #fff !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 28px 24px !important;
  min-height: 120px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.member-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
/* ロゴ枠：従来どおりロゴを中央表示 */
.member-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 88px !important;
}
.member-logo a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  width: 100% !important;
  height: 100% !important;
}
.member-item img {
  max-width: 100% !important;
  max-height: 76px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.member-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
}
/* ロゴ下に表示する社名（show_name=true の会社のみ） */
.member-company-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
  margin: 12px 0 0 0 !important;
}
/* 住所・TEL */
.member-contact {
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  text-align: left;
}
.member-address {
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-text);
  margin: 0 0 8px 0 !important;
}
.member-zip {
  display: inline-block;
  color: var(--c-text);
}
.member-tel {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  text-align: left !important;
}
.member-tel-label {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--c-brand-700);
}
.member-tel a,
.member-tel span:not(.member-tel-label) {
  display: inline !important;
  color: var(--c-text);
  text-decoration: none;
}
.member-tel a:hover {
  text-decoration: underline;
}


/* -------------------------------------------
   5. 施工体制
   ------------------------------------------- */
.wp-block-group.section-bg-gray:last-of-type .wp-block-image {
  margin: 32px auto 48px !important;
  max-width: 700px !important;
}
.wp-block-group.section-bg-gray:last-of-type .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 2x2項目グリッド（system-points） */
.system-points {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  margin-top: 24px !important;
  flex-wrap: nowrap !important;
}
.wp-block-columns.system-points > .wp-block-column.system-point,
.system-points .system-point {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 28px 32px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  flex-basis: auto !important;
  margin: 0 !important;
  width: auto !important;
}
.system-point-title,
h3.system-point-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--c-brand-800) !important;
  margin: 0 0 14px 0 !important;
}
.system-point-title.is-style-square::before {
  background: var(--c-brand-700) !important;
}
.system-point > p {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--c-text) !important;
  margin: 0 !important;
}
.system-point a {
  color: var(--c-brand-700);
  font-weight: 600;
}
.system-point a:hover {
  text-decoration: underline;
}


/* -------------------------------------------
   6. レスポンシブ
   ------------------------------------------- */
@media (max-width: 1024px) {
  .officers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
  .member-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  
  .system-points {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .member-list {
    grid-template-columns: 1fr !important;
  }
}