/* =========================
   Project Detail (single post)
   WP: single-project.php。本文(.entry-content)はブロックエディタの出力(the_content)
========================= */
.page-project-detail {
  background: var(--color-white);
}

.project-detail {
  position: relative;
  padding-top: calc(var(--header-top) + var(--header-height) + 80px);

  @media (max-width: 768px) {
    /* SPヘッダーは top:0 / height:80px。変数はPC用なので足さない */
    padding-top: 160px;
  }
}

/* .project-detail-inner の定義は css/sub-page.css（about-innerと共通化） */

/* --- Header / title --- */
.project-detail-eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-size: 80px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text);

  @media (max-width: 960px) {
    font-size: 48px;
  }

  @media (max-width: 768px) {
    font-size: 48px;
  }
}

.project-detail-kana {
  margin: 16px 0 0;
  color: var(--color-text);

  @media (max-width: 768px) {
    margin-top: 12px;
  }
}

.project-detail-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 20px;
  margin: 100px 0 0;

  a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 500;
    color: #858585;

    &::before {
      content: "";
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #b5b5b5;
    }

    &::after {
      content: "";
      flex-shrink: 0;
      width: 24px;
      height: 12px;
      background: url("../assets/arrow-down.svg") center / contain no-repeat;
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 100px;
    gap: 16px;
  }
}

.project-detail-heading {
  width: fit-content;
  max-width: 100%;
  margin-top: 60px;

  @media (max-width: 768px) {
    margin-top: 48px;
  }
}

.project-detail-title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-text);

  @media (max-width: 768px) {
    font-size: 24px;
  }
}

.project-detail-title-line {
  height: 10px;
  background-image: url("../assets/title-line.svg");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 10px;
  margin-top: 4px;
}

.project-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;

  li {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-grey);
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text);
  }

  @media (max-width: 768px) {
    margin-top: 20px;
  }
}

.project-detail-hero {
  width: 100%;
  height: 600px;
  margin: 60px 0 0;
  overflow: hidden;
  box-sizing: border-box;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #d9d9d9;
    border-radius: 12px;
  }

  @media (max-width: 960px) {
    height: auto;
    aspect-ratio: 1100 / 600;
    margin-top: 48px;
  }

  @media (max-width: 768px) {
    height: auto;
    aspect-ratio: 334 / 234;
  }
}

/* --- PDF ダウンロード（template-parts/entry-download.php） ---
   本文と CTA（.project-cta）の間。PDF を登録した投稿だけ
   ボタンの見た目・ホバーはトップの研究成果カードの .research-card-download（css/home.css）と同じ。home.css は詳細ページで読み込まないのでここにも書く */
.entry-download {
  width: 100%;
  max-width: calc(900px + 32px);
  margin: 100px auto 0;
  padding: 0 16px;

  @media (max-width: 768px) {
    margin-top: 60px;
    padding: 0 20px;
  }
}

/* 枠線・角丸は下の CTA（.cta-card）にそろえる。表紙と右の文字は上下中央でそろえる */
.entry-download-card {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px;
  border: 1px solid var(--color-text);
  border-radius: 12px;
  background: var(--color-white);

  @media (max-width: 768px) {
    gap: 20px;
    padding: 24px 20px;
  }
}

/* 表紙。冊子らしく見えるよう薄い影を付ける */
.entry-download-thumbnail {
  flex-shrink: 0;
  width: 160px;

  img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-grey);
    border-radius: 2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }

  @media (max-width: 768px) {
    width: 96px;
  }
}

.entry-download-body {
  flex: 1 1;
  min-width: 0;
}

.entry-download-label {
  margin: 0;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-pink);

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.entry-download-title {
  margin: 12px 0 0;
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);

  @media (max-width: 768px) {
    margin-top: 8px;
    font-size: 14px;
  }
}

.entry-download-details {
  margin: 8px 0 0;
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.5;
  color: #757575;

  @media (max-width: 768px) {
    font-size: 11px;
  }
}

.entry-download-button {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  overflow: hidden;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  background: var(--color-white);
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-black);
  text-decoration: none;
  margin-top: 24px;
  transition: color 0.35s ease;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 0%;
    background: var(--color-black);
    transition: width 0.5s ease;
  }

  img {
    display: block;
    width: 16px;
    height: 16px;
  }

  @media (max-width: 768px) {
    margin-top: 16px;
    font-size: 12px;
  }

  /* アイコンは黒（#222）なので、文字が白になるホバー時だけ反転して白にする */
  &:hover {
    color: var(--color-white);

    &::before {
      width: 100%;
    }

    img {
      filter: invert(1);
    }
  }
}

/* =========================
   共通パーツ
   本文カラムは 900px
========================= */
/* 青＋ピンクの丸が付く見出し（H2 相当） */
.deco-heading,
.entry-content > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  scroll-margin-top: calc(var(--header-top) + var(--header-height) + 32px);

  @media (max-width: 960px) {
    font-size: 20px;
  }

  @media (max-width: 768px) {
    gap: 12px;
    font-size: 20px;
  }
}

.deco-heading::before,
.entry-content > h2::before {
  content: "";
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  background: url("../assets/h4_deco.svg") center / contain no-repeat;
}

/* 矢印付きの横長ボタン（400 × 56）。CTA（.project-cta）で使う
   ホバーの動作はヘッダーの .header-contact と同じ「塗りが左から伸びる」スイープ方式。
   本文（.entry-content）のボタンは下の is-style-arrow で別に定義 */
.btn-arrow {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 400px;
  max-width: 100%;
  min-height: 60px;
  padding: 14px 32px;
  overflow: hidden;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-white);
  transition: color 0.3s ease, border-color 0.3s ease;

  @media (max-width: 768px) {
    width: 100%;
  }
}

/* 矢印アイコン（インラインSVG。fill="currentColor" でボタンの色・ホバーに追従） */
.icon-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.btn-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-pink);
  transition: width 0.5s ease;
  z-index: -1;
}

.btn-arrow:hover::before {
  width: 100%;
}

.btn-arrow:hover {
  color: var(--color-white);
  border-color: var(--color-pink);
}

.btn-arrow.is-pink {
  border-color: var(--color-pink);
  background: var(--color-pink);
  color: var(--color-white);
}

.btn-arrow.is-pink::before {
  background: var(--color-text);
}

.btn-arrow.is-pink:hover {
  border-color: var(--color-text);
}

/* グレーの画像プレースホルダ */
.entry-ph {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #c9c9c9;
  border-radius: 10px;
}

/* --- Entry content（プロジェクト概要から下 / the_content） --- */
.entry-content {
  width: 100%;
  max-width: calc(900px + 32px);
  margin: 100px auto 0;
  padding: 0 16px;
  font-family: var(--font-jp);
  /* 文章の多いコラムでも読みやすいよう、本文は PC・SP とも 14px */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  /* 本文に直接書かれた長い URL など、区切りのない英数字は本文の幅で折り返す(収まる単語はそのまま) */
  overflow-wrap: break-word;

  @media (max-width: 768px) {
    margin-top: 60px;
    padding: 0 20px;
  }
}

.entry-content > * {
  /* ブラウザ既定の余白を打ち消す（blockquote の左右マージン等） */
  margin: 0;
}

.entry-content > * + * {
  margin-top: 40px;

  @media (max-width: 768px) {
    margin-top: 32px;
  }
}

.entry-content > h4 + * {
  margin-top: 24px;
  @media (max-width: 768px) {
    margin-top: 20px;
  }
}

.entry-content > * + h2 {
  margin-top: 100px;

  @media (max-width: 768px) {
    margin-top: 80px;
  }
}

.entry-content > * + h3 {
  margin-top: 72px;

  @media (max-width: 768px) {
    margin-top: 48px;
  }
}

.entry-content > h2 + h3 {
  margin-top: 32px;
  @media (max-width: 768px) {
    margin-top: 28px;
  }
}

.entry-content > * + h4 {
  margin-top: 36px;
  @media (max-width: 768px) {
    margin-top: 28px;
  }
}

.entry-content > :first-child {
  margin-top: 0;
}

/* H3: 左のピンク線＋薄いグレー帯 */
.entry-content > h3 {
  padding: 20px 20px 20px 18px;
  border-left: 4px solid var(--color-pink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  background: #f9f9f9;
  border-radius: 4px;

  @media (max-width: 768px) {
    padding: 12px 20px;
    font-size: 18px;
  }
}

/* H4: コンテンツ幅いっぱいの下線 */
.entry-content > h4 {
  padding-bottom: 14px;
  border-bottom: 1px solid #cbcbcb;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;

  @media (max-width: 768px) {
    font-size: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #cbcbcb;
    line-height: 1;
  }
}

/* リスト: 枠線付きボックス。マーカーはグレーの丸
   the_content が出力する素の ul のみが対象。
   独自クラスを持つコンポーネント（スケジュール等）には当てない */
.entry-content > :is(ul, ol):where(:not([class]), .wp-block-list) {
  padding: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;

  @media (max-width: 768px) {
    padding: 40px;
  }
}

.entry-content > :is(ul, ol):where(:not([class]), .wp-block-list) > li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  @media (max-width: 768px) {
    line-height: 1;
  }
}

.entry-content > :is(ul, ol):where(:not([class]), .wp-block-list) > li + li {
  margin-top: 29px;

  @media (max-width: 768px) {
    margin-top: 20px;
  }
}

.entry-content > :is(ul, ol):where(:not([class]), .wp-block-list) > li::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cccccc;
  /* baseline 揃えの行から丸だけ視覚的に中央へ */
  translate: 0 -1px;
}

/* 引用: 枠線なしのグレー帯 */
.entry-content > blockquote {
  padding: 40px;
  background: #FAFAFA;
  font-size: 15px;
  line-height: 1.65;

  @media (max-width: 768px) {
    padding: 40px 20px;
  }
}

.entry-content > blockquote > p {
  margin: 0;
}

/* --- 画像（core/image）: 横幅いっぱいの16:9 --- */
.entry-content > .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.entry-content figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #858585;
}

/* --- ギャラリー（core/gallery）: 2カラム、SPは1カラム。列数の設定にかかわらず2列に揃える
   core の gallery は :not(#individual-image) で詳細度を上げているため、同じ書き方で上書きする --- */
.entry-content .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 38px;
  align-items: start;

  @media (max-width: 768px) {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: auto;
  margin: 0;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  width: 100%;
  height: auto;
  aspect-ratio: 430 / 330;
  object-fit: cover;
  border-radius: 10px;
}

/* --- 埋め込み（core/embed。YouTubeなど。16:9は responsive-embeds が面倒を見る） --- */
.entry-content .wp-block-embed iframe {
  display: block;
  width: 100%;
  border-radius: 10px;
}

/* --- 旧サイトから引き継いだコラム（クラシックエディタの出力）
   [caption] は div.wp-caption に style="width: 元画像の幅+10px" を直接付けるため、本文の幅に収める。
   alignleft / alignright の回り込みは PC だけ残し、SP では縦に並べる --- */
.entry-content .wp-caption {
  max-width: 100%;
}

.entry-content .wp-caption img {
  display: block;
}

.entry-content .wp-caption-text {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #858585;
}

.entry-content .aligncenter {
  margin-right: auto;
  margin-left: auto;
}

.entry-content .alignleft {
  float: left;
  margin: 0 24px 16px 0;
}

.entry-content .alignright {
  float: right;
  margin: 0 0 16px 24px;
}

@media (max-width: 768px) {
  .entry-content :is(.alignleft, .alignright) {
    float: none;
    margin: 0 0 16px;
  }
}

/* 回り込みが本文の下(関連記事など)まではみ出さないようにする */
.entry-content::after {
  content: "";
  display: block;
  clear: both;
}

.entry-content iframe {
  max-width: 100%;
}

/* 本文に直接書かれた YouTube の iframe(width="500" など)は、埋め込みブロック(上の .wp-block-embed)と同じく
   本文の幅いっぱい・16:9 にする */
.entry-content iframe:is([src*="youtube.com/embed"], [src*="youtube-nocookie.com/embed"]) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

/* --- 著者情報（Simple Author Box。本文の最後に追加される）
   プラグインの設定で .saboxplugin-wrap { margin-top: 0 } がページ内に出力され、上の本文と間が空かないため、
   .entry-content を付けて優先度を上げ、本文と区切る余白を付ける --- */
.entry-content > .saboxplugin-wrap {
  margin-top: 80px;

  @media (max-width: 768px) {
    margin-top: 60px;
  }
}

/* 著者情報は回り込みを解除する(プラグインの clear: both)。直前が回り込みの画像(旧記事の alignleft など)だと、
   解除の分に上の余白が吸収されて画像と近くなるため、直前の要素の最後で先に回り込みを解除しておく */
.entry-content > :has(+ .saboxplugin-wrap)::after {
  content: "";
  display: block;
  clear: both;
}

/* =========================
   ボタン（core/buttons）
   is-style-arrow（矢印ボタン。パターン「矢印ボタン」）。is-style-sns-instagram|note|facebook|link は
   活動の様子ブロック(wisa/project-activity)が出力するボタンに付く
   ホバーは .header-contact と同じ「塗りが左から伸びる」スイープ。
   背景のグラデーションの幅を広げて表現し、::before/::after は SNSアイコン・矢印に使う
   （アイコンは mask で currentColor に追従させるため色違い・ホバーに対応）
========================= */
.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 40px;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

/* 矢印ボタンの塊は上に広めの余白 */
.entry-content > .wp-block-buttons:has(.is-style-arrow) {
  margin-top: 63px;

  @media (max-width: 768px) {
    margin-top: 40px;
  }
}

.entry-content .wp-block-button:is(.is-style-arrow, [class*="is-style-sns-"]) {
  width: 400px;
  max-width: 100%;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.entry-content .wp-block-button:is(.is-style-arrow, [class*="is-style-sns-"]) .wp-block-button__link {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  padding: 14px 32px;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  /* 白地の上にピンクのグラデーションを1層だけ置く。2層目があると background-size が auto と混ざり、幅の変化がアニメーションしない */
  background-color: var(--color-white);
  background-image: linear-gradient(var(--color-pink), var(--color-pink));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: none;
  transition: background-size 0.5s ease, color 0.3s ease, border-color 0.3s ease;
}

.entry-content .wp-block-button:is(.is-style-arrow, [class*="is-style-sns-"]) .wp-block-button__link:hover {
  background-size: 100% 100%;
  border-color: var(--color-pink);
  color: var(--color-white);
}

.entry-content .wp-block-button:is(.is-style-arrow, [class*="is-style-sns-"]) .wp-block-button__link::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: url("../assets/arrow-button-right.svg") center / contain no-repeat;
  mask: url("../assets/arrow-button-right.svg") center / contain no-repeat;
}

/* SNS: アイコン + ラベル + 矢印 */
.entry-content .wp-block-button[class*="is-style-sns-"] .wp-block-button__link {
  padding: 12px 32px;
  font-size: 15px;
}

.entry-content .wp-block-button:is(.is-style-sns-instagram, .is-style-sns-facebook) .wp-block-button__link::before,
.entry-content .wp-block-button.is-style-sns-note .wp-block-button__link::before {
  content: "";
  flex-shrink: 0;
  height: 32px;
  width: 32px;
  background: currentColor;
  -webkit-mask: var(--sns-icon) center / contain no-repeat;
  mask: var(--sns-icon) center / contain no-repeat;
}

.entry-content .wp-block-button.is-style-sns-instagram {
  --sns-icon: url("../assets/sns-instagram.svg");
}

.entry-content .wp-block-button.is-style-sns-facebook {
  --sns-icon: url("../assets/sns-facebook.svg");
}

.entry-content .wp-block-button.is-style-sns-note {
  --sns-icon: url("../assets/sns-note.svg");
}

/* note ロゴは横長（viewBox 80:28） */
.entry-content .wp-block-button.is-style-sns-note .wp-block-button__link::before {
  width: 80px;
  height: 28px;
}

/* --- プロジェクト情報テーブル（Gutenberg: core/table 想定） ---
   core/table は <figure class="wp-block-table"><table>...</table></figure> を出力し、
   エディタの「追加CSSクラス」は <figure> 側に付く。.project-spec を <table> 直付け前提の
   クラスセレクタにすると、実際のブロック出力では中の <table> がそのクラスを持てず
   幅・線・paddingが丸ごと外れてしまう。
   → class の位置に依存しない descendant セレクタ（.entry-content table）に寄せて、
     class が <figure> / <table> どちらに付いても崩れないようにする。
   SP（768px以下）は表を縦積みレイアウトに変える。 */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;

  @media (max-width: 768px) {
    display: block;
    width: auto;
  }
}

.entry-content table th,
.entry-content table td {
  padding: 20px 0;
  /* core/table の既定の枠線(四辺)を消して、上下の線だけにする */
  border: 0;
  border-top: 1px solid #e0e0e0;
  vertical-align: top;

  @media (max-width: 768px) {
    display: block;
    width: auto;
    padding: 0;
    border: none;
  }
}

.entry-content table tr:last-child th,
.entry-content table tr:last-child td {
  border-bottom: 1px solid #e0e0e0;
  @media (max-width: 768px) {
    border-bottom: none;
  }
}

.entry-content table th {
  width: 260px;
  padding-right: 24px;
  font-weight: 700;

  @media (max-width: 768px) {
    width: auto;
    padding-right: 0;
  }
}

/* core/table の thead/tfoot の太線は使わない */
.entry-content table thead,
.entry-content table tfoot {
  border: 0;
}

.entry-content table td {
  @media (max-width: 768px) {
    margin-top: 8px;
  }
}

.entry-content table tbody {
  @media (max-width: 768px) {
    display: block;
    width: auto;
  }
}

.entry-content table tr {
  @media (max-width: 768px) {
    display: block;
    width: auto;
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
  }
}

.entry-content table tr:last-child {
  @media (max-width: 768px) {
    border-bottom: 1px solid #e0e0e0;
  }
}

/* 表のセル内(wpautopが段落を挿入することがある) */
.entry-content table p {
  margin: 0;
}

.entry-content table p + p {
  margin-top: 8px;
}

/* 見出し行(thead)がある表は、列幅を固定せず上下の線だけで区切る */
.entry-content table thead th {
  width: auto;
  padding-bottom: 12px;
}

/* --- 活動スケジュール ---
   1項目 = グループ(.is-style-project-schedule)の中に 見出し3 + 段落(inc/project-blocks.php のパターン)。
   ブロックエディタのレイアウト余白(is-layout-flow)に負けないよう、クラスを重ねて指定する */
.entry-content > .is-style-project-schedule + .is-style-project-schedule {
  margin-top: 43px;
}

.entry-content .is-style-project-schedule {
  margin: 0;
}

.entry-content > .is-style-project-schedule {
  margin-top: 43px;
}

.entry-content > h2 + .is-style-project-schedule {
  margin-top: 40px;

  @media (max-width: 768px) {
    margin-top: 32px;
  }
}

.entry-content .is-style-project-schedule > h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.entry-content .is-style-project-schedule > h3::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-yellow);
}

.entry-content .is-style-project-schedule > p {
  margin: 8px 0 0 9px;
  padding: 12px 0 12px 24px;
  border-left: 1px solid #cccccc;
}

/* --- メンバー紹介 --- */
.project-members {
  display: grid;
  /* 214px のカラムを 900px 幅に 3 つ並べ、余白は均等割り */
  grid-template-columns: repeat(3, minmax(0, 214px));
  justify-content: space-between;
  gap: 60px 0;
  padding: 0;
  list-style: none;

  @media (max-width: 960px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 24px;
  }

  /* メンバー: 1カラム・写真は中央寄せの固定幅 */
  @media (max-width: 768px) {
    grid-template-columns: none;
    justify-content: center;
    gap: 40px 0;
    margin-top: 28px;
  }
}

/* .project-member-card（カード全体がクリック可能なボタン）の定義は
   css/sub-page.css（about-member-cardと共通化） */

/* .project-member-photo-wrap / .project-member-photo の定義は
   css/sub-page.css（about-member-photo-wrap/photoと共通化） */

/* 中央カラムのみ円形 */
.project-members > li:nth-child(3n + 2) .project-member-photo-wrap {
  border-radius: 50%;
}

.project-member-role {
  display: block;
  margin: 22px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.project-member-name {
  display: block;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

/* メンバー紹介ポップアップ（.member-popup-*）の定義は
   css/sub-page.css（About と共通） */

/* =========================
   CTA（黄色帯）
   template-parts/project-cta.php で出力する
========================= */
.project-cta {
  width: 100%;
  margin-top: 125px;
  padding: 0 16px 80px;
  background: var(--color-yellow);
  border-radius: 50px 50px 0 0;

  @media (max-width: 768px) {
    margin-top: 100px;
    padding: 0 20px 80px;
  }
}

.project-cta-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 80px;

  @media (max-width: 768px) {
    padding-top: 80px;
  }
}

.project-cta .deco-heading + .cta-card {
  margin-top: 30px;

  @media (max-width: 768px) {
    margin-top: 28px;
  }
}

.project-cta .cta-card + .deco-heading {
  margin-top: 80px;

  @media (max-width: 768px) {
    margin-top: 80px;
  }
}

.cta-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 40px;
  padding: 60px 32px;
  border: 1px solid #222222;
  border-radius: 12px;
  background: var(--color-white);

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 60px 32px;
  }
}

.cta-card-body {
  flex: 1 1;
  min-width: 0;

  /* flex-direction:columnでは同じflex-basisが高さに効いてしまうため解除 */
  @media (max-width: 768px) {
    flex: none;
  }
}

.cta-card-title {
  margin: 0;
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-pink);
}

.cta-card-text {
  margin: 20px 0 0;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.cta-card-side {
  flex: 1 1;

  /* flex-direction:columnでは同じflex-basisが高さに効いてしまうため解除 */
  @media (max-width: 768px) {
    flex: none;
  }
}

/* --- 寄付フォーム --- */
.donate-form {
  width: 400px;
  max-width: 100%;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.donate-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}

.donate-legend {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.donate-option {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 16px 36px 16px 36px;
  border: 1px solid #cbcbcb;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.donate-option:has(:checked) {
  border-color: var(--color-pink);
  background: #fff5fa;
}

.donate-option:focus-within {
  outline: 2px solid var(--color-pink);
  outline-offset: 2px;
}

/* ラジオ本体は隠すが、キーボード操作は残す */
.donate-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 「選択肢が続く」ことを示す装飾 */
/* ドット3つ分の縦積み（選択肢がまだあることを示す装飾）
   box-shadowで下に描くと見た目だけで高さに反映されないため、
   実際のボックス高さを3ドット分確保して確保する */
.donate-more {
  position: relative;
  display: block;
  width: 12px;
  height: 52px;
  margin: 20px auto 0;
  background: radial-gradient(circle, #cbcbcb 6px, transparent 6px) center / 12px 12px no-repeat;
}

.donate-more::before,
.donate-more::after {
  content: "";
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbcbcb;
}

.donate-more::before {
  top: 0;
}

.donate-more::after {
  bottom: 0;
}

/* =========================
   関連記事
========================= */
.project-related {
  padding: 120px 0 200px;
  background: var(--color-white);

  @media (max-width: 768px) {
    padding: 80px 0 100px;
  }
}

.project-related-inner {
  width: 100%;
  max-width: calc(900px + 32px);
  margin: 0 auto;
  padding: 0 16px;

  @media (max-width: 768px) {
    padding: 0 20px;
  }
}

/* 右端は画面外へ流して「続きがある」ことを見せる横スクロール */
.project-related-scroller {
  /* 本文カラム（900px）の左端からカードを並べ、右端は画面外へ流す */
  --gutter: max(16px, calc((100% - 900px) / 2));
  margin-top: 40px;
  padding-inline: var(--gutter);
  /* スナップ時に左の余白を食い潰さないよう scroll-padding も揃える */
  scroll-padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;

  @media (max-width: 768px) {
    --gutter: max(20px, calc((100% - 900px) / 2));
    margin-top: 28px;
  }
}

.project-related-scroller::-webkit-scrollbar {
  display: none;
}

.project-related-list {
  display: flex;
  gap: 41px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-card {
  display: block;
  width: 258px;
  scroll-snap-align: start;
  color: var(--color-text);
}

.related-card-image {
  width: 258px;
  height: 179px;
  overflow: hidden;
  border-radius: 8px;
  background: #d9d9d9;
}

.related-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.related-card:hover .related-card-image img {
  transform: scale(1.08);
}

.related-card-body {
  padding: 45px 12px 12px;
}

.related-card-title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
}

.related-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.related-card-tags li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-grey);
  font-size: 11px;
  line-height: 1;
  color: var(--color-text);
}