@charset "UTF-8";

/* ==================================================
   会員（メンバー）機能ページ用CSS
   読み込み: functions.php の enqueue 対応表（member系ページで読込）
   対象: archive-member.php / single-member.php / エリア等のタクソノミー
   PC値は Figma（node 131:1034 ほか）実測に準拠。SPは可読性重視で調整。
   ================================================== */

/* --------------------------------------------------
   エリア別ページ：地域イントロ（archive-member.php）
   キャッチ = 都道府県を差し込む定型文（area_catch 入力時はそれを優先）
   リード文 = ACF area_lead（自由入力・未入力なら非表示）
   -------------------------------------------------- */
.p-memberAreaIntro {
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 24px; /* リード → サービス枠（Figma gap 24px） */
  text-align: left;
}
.p-memberAreaIntro__catch {
  font-size: 24px; /* h1（c-pageTitle）と統一（制作会社確認済み） */
  font-weight: 700;
  line-height: 1.3;
  color: #333;
}
.p-memberAreaIntro__catch + .p-memberAreaIntro__lead {
  margin-top: 16px; /* キャッチ → リード（Figma gap 16px） */
}
.p-memberAreaIntro__lead {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

/* --------------------------------------------------
   固定サービスブロック（全エリア共通）：融資/財務 2カード
   ※CTAボタンはこの枠の外・下に配置（.p-memberAreaCta）
   -------------------------------------------------- */
.p-memberAreaService {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 0 24px; /* サービス枠 → CTA（Figma gap 24px） */
  padding: 24px;
  background: #bcd1e6;
}
.p-memberAreaService__cards {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.p-memberAreaService__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  padding: 24px;
}
.p-memberAreaService__cardTitle {
  margin: 0;
  padding: 6px 10px;
  background: #002771;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-align: center;
}
.p-memberAreaService__price {
  margin: 0;
  color: #e44141;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}
.p-memberAreaService__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

/* --------------------------------------------------
   CTAボタン（p-memberAreaService の枠外・下に配置）
   -------------------------------------------------- */
.p-memberAreaCta {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 0 60px; /* CTA → 一覧見出し（Figma gap 60px） */
  text-align: center;
}
.p-memberAreaCta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
  padding: 24px 88px;
  background: linear-gradient(#b81716, #d93737);
  box-shadow: 0 4.655px 0 #873800;
  border-radius: 43px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  transition: opacity 0.2s;
}
.p-memberAreaCta__btn:hover {
  opacity: 0.9;
}
.p-memberAreaCta__arrow {
  font-size: 20px;
  line-height: 1;
}

/* --------------------------------------------------
   一覧見出し（〇〇の融資・財務コンサルタント など）
   member系アーカイブ全般で使用（member.css は member 系ページのみ読込）
   -------------------------------------------------- */
.l-archiveMember .c-memberTermTitle {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #333;
}

/* --------------------------------------------------
   SP（〜768px）：可読性重視でサイト内と統一的に調整
   -------------------------------------------------- */
@media (max-width: 768px) {
  /* エリア別KV：SPは横幅が狭く中央cropだと地図（右側）が見切れるため、
     地図＋ハイライトが収まるよう表示位置を右寄りに（エリア別画像のときのみ） */
  #top_title_area.-area-kv .l-topTitleArea__img {
    object-position: 85% center;
  }
  .p-memberAreaIntro {
    margin-bottom: 20px;
  }
  .p-memberAreaIntro__catch {
    /* 「〇〇で融資コンサルをお探しなら」は最長17文字(=17em/全角)。
       SPコンテンツ幅=96vw なので 96vw/17≒5.65vw が折返し閾値。
       安全side を見て 5.5vw、上限22px（小型端末=iPhone SE/小Androidでも1行に収まる） */
    font-size: min(5.5vw, 22px);
  }
  .p-memberAreaIntro__catch + .p-memberAreaIntro__lead {
    margin-top: 12px;
  }
  .p-memberAreaIntro__lead {
    font-size: 15px;
  }
  .p-memberAreaService {
    margin-bottom: 20px;
    padding: 16px;
  }
  .p-memberAreaService__cards {
    flex-direction: column;
    gap: 16px;
  }
  .p-memberAreaService__card {
    padding: 18px;
  }
  .p-memberAreaService__cardTitle {
    font-size: 17px;
  }
  .p-memberAreaService__price {
    font-size: 16px;
  }
  .p-memberAreaService__desc {
    font-size: 15px;
  }
  .p-memberAreaCta {
    margin-bottom: 40px;
  }
  .p-memberAreaCta__btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    gap: 8px;
  }
  .l-archiveMember .c-memberTermTitle {
    font-size: 20px;
    margin-bottom: 18px;
  }
}