/* ============================================================
   wp.css — WordPress化で追加した見た目
   ・トップ以外のページ（お知らせ一覧・お知らせ・固定ページ・404）
   ・WordPress が出す部品（ページ送り・本文のブロック）
   ・トップの「メンバー紹介」の、人数や写真が変わったときの備え（ステップ2）
   ・トップの「お問い合わせ」フォーム（Contact Form 7）の部品（ステップ3）
   ※ LPのCSS（reset〜bg-effects）の後に読み込む。トップの見た目は、上のメンバー紹介・お問い合わせフォームの部品以外は変えない
   ============================================================ */

/* お知らせのタイトル・見出しは、文節の区切りで改行する（Chrome・Edge。Safari は今までどおり）
   例）「…定例会「値決めをどう考えるか」を開／催しました」→「…を／開催しました」
   ※ 本文の段落には使わない（行の長さがそろわなくなるため） */
.news-item__title,
.article__title,
.entry-content h2,
.entry-content h3,
.notfound__title {
  word-break: auto-phrase;
}

/* 画面には出さず、読み上げソフトにだけ読ませる文字（WordPress の部品が使う） */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}


/* ============================================================
   トップの「メンバー紹介」（管理画面の「メンバー」から表示。inc/members.php）
   ※ カードの形・大きさは sections.css のまま。ここは人数や写真が変わったときの備えだけ
   ============================================================ */

/* 写真が正方形でないとき（縦長の写真など）は、上のほうを見せる（頭が切れにくい）。
   今の4枚のように正方形に整えた写真は、枠と同じ形なので影響を受けない */
.member-card__image img {
  object-position: 50% 20%;
}

/* 運営担当の枠の列数を人数に合わせる（PCのみ。スマホは今までどおり縦に1列）
   1人→1列／2人→2列／3人→3列／4人→2列×2段／5人以上→3列。
   列数は front-page.php が人数から決めて、style="--staff-cols: 3" のように渡す */
@media (min-width: 769px) {
  .members__staff-list {
    grid-template-columns: repeat(var(--staff-cols, 3), 1fr);
  }
}


/* ============================================================
   トップの「お問い合わせ」フォーム（Contact Form 7。inc/contact.php）
   ※ 入力欄・ボタンの形は sections.css の .contact-form のまま。
     ここは Contact Form 7 が足す部品（入力欄の包み・同意の欄・エラーや完了の文）の見た目だけ
   ============================================================ */

/* 入力欄の包み（Contact Form 7 が span で包む）：今のLPと同じく、横いっぱい・下の隙間なしで並べる */
.contact-form .wpcf7-form-control-wrap {
  display: block;
}
.contact-form .contact-form__input,
.contact-form .contact-form__textarea {
  display: block;
}

/* Contact Form 7 の隠しデータの入れ物（Contact Form 7 の CSS でも隠れるが、念のため） */
.contact-form .hidden-fields-container {
  display: none;
}

/* 迷惑メール対策の見えない入力欄（inc/contact.php）。画面の外に置き、読み上げもしない */
.contact-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* プライバシーポリシーへの同意 */
.contact-form__consent {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: #444;
}
.contact-form__consent .wpcf7-list-item {
  margin: 0;
}
.contact-form__consent label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.contact-form__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #a08234;
  cursor: pointer;
}
.contact-form__consent a {
  color: #8a6d2f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form__consent .wpcf7-list-item-label::before,
.contact-form__consent .wpcf7-list-item-label::after {
  content: none;   /* Contact Form 7 が文の前後に足す空白を消す */
}

/* 送信ボタン：今のLPのボタンと同じ見た目にする（Contact Form 7 のボタンは <input> なので、形の指定を足す） */
.contact-form__actions {
  position: relative;
}
.contact-form .contact-form__submit {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* 送信中のくるくる（Contact Form 7）：ボタンの右端に重ねる（ボタンの下に隙間を作らない） */
.contact-form__actions .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: -12px 0 0;
}

/* 入力のエラー（入力欄の下に赤い文） */
.contact-form .wpcf7-not-valid {
  border-color: #c0392b;
}
.contact-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: #c0392b;
}

/* 送信後の文（完了・エラー）：送信ボタンの下に出る */
.contact-card--form .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid rgba(201, 169, 97, 0.7);
  background: #fbf8f1;
  font-size: 0.9rem;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--color-text-dark);
  text-align: center;
  white-space: pre-line;   /* 「。」の後ろの改行を表示する（inc/contact.php） */
  word-break: auto-phrase; /* 文節の区切りで折り返す（Chrome・Edge） */
}
.contact-card--form .wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(201, 169, 97, 0.7);   /* 完了：金の枠（Contact Form 7 の緑を打ち消す） */
}
.contact-card--form .wpcf7 form.invalid .wpcf7-response-output,
.contact-card--form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-card--form .wpcf7 form.payment-required .wpcf7-response-output,
.contact-card--form .wpcf7 form.failed .wpcf7-response-output,
.contact-card--form .wpcf7 form.aborted .wpcf7-response-output,
.contact-card--form .wpcf7 form.spam .wpcf7-response-output {
  border-color: rgba(192, 57, 43, 0.45);   /* エラー：赤の枠 */
  background: #fdf4f3;
  color: #8e2b20;
}

/* Contact Form 7 が止まっているときの案内（inc/contact.php） */
.contact-form__unavailable {
  padding: 32px 16px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  font-size: 0.9rem;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: #555;
  text-align: center;
}


/* ============================================================
   トップ以外のページ共通
   ============================================================ */

/* ヘッダー：最初から「スクロール後」と同じ濃い背景＋ロゴを表示
   （トップはヒーローの大きなロゴがあるので、スクロールするまでヘッダーのロゴを隠している） */
.is-subpage .header {
  background-color: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(201, 169, 97, 0.2);
  height: 64px;
}
.is-subpage .header__logo {
  opacity: 1;
  visibility: visible;
}

/* 本文エリア：LPの「使うパート（お知らせ・お問い合わせ）」と同じオフホワイト */
.subpage {
  background: var(--color-bg-light);
  color: var(--color-text-dark);
  padding: calc(64px + 80px) 0 120px;   /* 固定ヘッダー 64px の下から */
  min-height: 72vh;
}

/* 下の「トップへ戻る」「お知らせ一覧へ」ボタン（LPの「お知らせ一覧へ」と同じ形） */
.subpage__back {
  text-align: center;
  margin-top: 64px;
}


/* ============================================================
   お知らせ一覧（home.php）
   ============================================================ */

/* LPの .news-section をそのまま使い、上下の余白だけ .subpage に任せる */
.news-section--archive {
  padding: 0;
  background: transparent;
}

/* トップでは JS で1件ずつ浮かび上がらせているが、ほかのページでは最初から表示する */
.is-subpage .news-item {
  opacity: 1;
  transform: none;
}

/* お知らせが1件も無いとき */
.news-list__empty {
  padding: 40px 0;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ページ送り（1 2 3 …） */
.pagination {
  margin-top: 56px;
}
.pagination .nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-family: var(--font-en);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--color-text-dark);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.pagination .page-numbers.current {
  background: var(--color-text-dark);
  border-color: var(--color-text-dark);
  color: #fff;
}
.pagination a.page-numbers:hover {
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold);
}
.pagination .page-numbers.dots {
  border-color: transparent;
}


/* ============================================================
   お知らせ（single.php）・固定ページ（page.php）
   ============================================================ */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.article__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* 区分のラベル（一覧の写真の上のラベルと同じ形） */
.article__category {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: #fff;
  background: var(--color-text-dark);
  padding: 3px 10px;
}

.article__date {
  font-family: var(--font-en);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--color-muted);
}

.article__title {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--color-text-dark);
}

.article__gold-line {
  width: 60px;
  height: 1px;
  background: var(--color-accent-gold);
  margin: 24px 0 48px;
}

/* 前後のお知らせ */
.article__nav {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.article__nav-links {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.article__nav-links a {
  color: var(--color-text-dark);
  transition: color 0.3s ease;
}
.article__nav-links a:hover {
  color: var(--color-accent-gold);
}
.article__nav .subpage__back {
  margin-top: 48px;
}


/* ------------------------------------------------------------
   本文（ブロックエディタで書いた中身）
   お知らせ記事の型（開催告知・開催報告）で使う部品：段落・見出し・表・リスト・写真・ボタン
   ------------------------------------------------------------ */
.entry-content {
  font-size: 0.95rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #333;
}

.entry-content > * + * {
  margin-top: 1.4em;
}

.entry-content h2 {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--color-text-dark);
  margin-top: 2.6em;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 169, 97, 0.5);
}

.entry-content h3 {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--color-text-dark);
  margin-top: 2.2em;
  padding-left: 12px;
  border-left: 2px solid var(--color-accent-gold);
}

.entry-content a {
  color: #8a6d2f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content strong {
  font-weight: 600;
  color: var(--color-text-dark);
}

/* リスト（reset.css で印が消えているので戻す） */
.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li {
  margin-top: 0.4em;
}

/* 表（開催概要など） */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.8;
}
.entry-content th,
.entry-content td {
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-align: left;
  vertical-align: top;
}
.entry-content th,
.entry-content td:first-child {
  background: rgba(201, 169, 97, 0.08);
  font-weight: 500;
  white-space: nowrap;
  width: 1%;
}
.entry-content .wp-block-table {
  overflow-x: auto;
}
.entry-content .wp-block-table figcaption {
  margin-top: 8px;
}

/* 写真 */
.entry-content img {
  height: auto;
}
.entry-content figure img {
  width: 100%;
}
.entry-content figcaption {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-muted);
  text-align: center;
  margin-top: 8px;
}

/* ボタン（申込フォームへ など）：LPの黒いボタンと同じ形 */
.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.entry-content .wp-block-button__link {
  display: inline-block;
  padding: 14px 40px;
  background: var(--color-text-dark);
  color: #fff;
  border-radius: 0;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: background 0.3s ease;
}
.entry-content .wp-block-button__link:hover {
  background: var(--color-accent-gold);
  color: #fff;
}

/* 引用（参加者の声） */
.entry-content blockquote {
  border-left: 2px solid var(--color-accent-gold);
  padding: 4px 0 4px 20px;
  color: #555;
}

/* 区切り線 */
.entry-content hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin: 3em 0;
}


/* ============================================================
   404
   ============================================================ */
.notfound {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 0;
  text-align: center;
}
.notfound__title {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--color-text-dark);
  margin-top: 12px;
}
.notfound .article__gold-line {
  margin: 24px auto 32px;
}
.notfound__text {
  font-size: 0.9rem;
  line-height: 2;
  letter-spacing: 0.06em;
  color: #555;
}


/* ============================================================
   スマホ
   ============================================================ */
@media (max-width: 768px) {
  .subpage {
    padding: calc(64px + 48px) 0 80px;
  }
  .subpage__back {
    margin-top: 48px;
  }
  .article__title {
    font-size: 1.3rem;
  }
  .article__gold-line {
    margin: 20px 0 36px;
  }
  .entry-content {
    font-size: 0.92rem;
  }
  .entry-content th,
  .entry-content td {
    padding: 10px 12px;
  }
  /* 表は、左の見出しの列だけ折り返さない（1%幅）。右の列は折り返す */
  .article__nav-links {
    flex-direction: column;
    gap: 12px;
  }
}