@charset "UTF-8";
/* ============================================================
   columns.css — ディレクターズコラム専用スタイル

   読み込み条件: コラムの一覧 / 個別記事のときだけ（inc/enqueue.php）
   依存: archive.css の後に読む（同じセレクタなら後勝ちで上書きできる）

   🔑 コラム独自の見た目は必ずこのファイルに書くこと。
      archive.css に書くと既存のお知らせ記事にも影響が及ぶ。
      逆に、ここに書いたものは物理的にお知らせのページへ届かない。

   💡 投稿タイプ別の body クラスが使える（header.php の body_class()）
      一覧: .post-type-archive-columns
      個別: .single-columns
      すべてのセレクタを .single-columns から始めているのは、
      詳細度を確保してコアのブロックCSSに勝つため。

   ⚠️ 打ち消しが増えて !important を使いたくなったら、それは
      「CSSで戦うのをやめて archive-columns.php を分けろ」のサイン。
   ============================================================ */


/* ------------------------------------------------------------
   画像とキャプション（Gutenberg の「画像」ブロック）

   出力される HTML:
     <figure class="wp-block-image size-large">
       <img src="..." alt="...">
       <figcaption class="wp-block-image__caption">キャプション</figcaption>
     </figure>

   ⚠️ このテーマは theme.json を持たないため、コアの figcaption 既定値が
      当たらない／逆に「画像に重ねるキャプション」用の白文字ルールが
      効いてしまうことがある。色・位置・背景を明示的に指定して打ち消す。
   ------------------------------------------------------------ */

.single-columns .single-news__content figure {
	margin-block: var(--space-xl);
}

/* 余白は figure 側で持つので、中の img からは外す
   （archive.css の .single-news__content img が上下マージンを持っている） */
.single-columns .single-news__content figure img {
	margin-block: 0;
}

.single-columns .single-news__content figcaption {
	/* コアの「画像に重ねるキャプション」スタイルの打ち消し */
	position: static;
	width: auto;
	max-height: none;
	background: none;
	text-shadow: none;

	margin-top: var(--space-xs);
	padding: 0;
	font-size: var(--font-size-sm);
	line-height: 1.7;
	color: #555555;
	text-align: center;
}


/* ------------------------------------------------------------
   プロフィール欄（Gutenberg の「メディアと文章」ブロック）

   🔑 プロフィール欄は「表」ではなく「メディアと文章」ブロックで作る。
      ① 写真と文章が横に並ぶのは見た目の都合であって表形式のデータではない。
         レイアウト目的の <table> は JIS X 8341-3（情報と関係性）で
         スクリーンリーダーに誤った構造を伝えるため避ける。
      ② スマホ幅で自動的に縦積みになる（表は崩れる）。
   ------------------------------------------------------------ */

/* ⚠️ この背景と囲みは「プロフィール欄で使う」前提で当てている。
   本文中で図の説明などに同じブロックを使うと、意図しない囲みが付く。
   その必要が出たら register_block_style( 'core/media-text', ... ) で
   .is-style-profile に限定すること（後から切り替えても既存記事は壊れない）。

   2026-09-16 時点では第1回の原稿でプロフィール欄にしか使わないため、
   専用スタイルを作らず汎用のまま運用する判断。連載の第1回の構成が
   そのまま全4回の基準になるので、最初から凝らない方が固定費が増えない。 */
.single-columns .single-news__content .wp-block-media-text {
	margin-block: var(--space-2xl);
	padding: var(--space-md);
	border-radius: 4px;
	background-color: var(--color-bg-section);
}

.single-columns .single-news__content .wp-block-media-text img {
	margin-block: 0;
}

/* 肩書きの列挙が続くので、段落の行間と間隔を詰める */
.single-columns .single-news__content .wp-block-media-text__content p {
	margin-bottom: var(--space-xs);
	font-size: var(--font-size-sm);
	line-height: 1.9;
}

.single-columns .single-news__content .wp-block-media-text__content p:last-child {
	margin-bottom: 0;
}

/* 氏名（1つ目の段落を太字にしている場合）を少し大きく */
.single-columns .single-news__content .wp-block-media-text__content p:first-child {
	font-size: var(--font-size-base);
}


/* スマホ幅で縦積みになったとき、文章の幅を写真に揃える。
   WordPress本体は文章側に padding: 0 8% を付けている。横並びのときは
   写真との間のすき間として必要だが、縦積みでも残るため文章だけ左右が
   狭くなる。600px は本体が縦積みに切り替える幅と同じ。 */
@media (max-width: 600px) {
	.single-columns .single-news__content .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding-inline: 0;
	}
}


/* ------------------------------------------------------------
   表（Gutenberg の「テーブル」ブロック）

   本文中に「本当の表」が出てきたとき用。
   コアCSSの既定は border: 1px solid（＝currentColor で真っ黒）なので、
   本文の調子に合わせて薄いグレーに落とす。
   ------------------------------------------------------------ */

.single-columns .single-news__content .wp-block-table {
	margin-block: var(--space-xl);
	overflow-x: auto;   /* 幅の広い表はこの中だけ横スクロール */
}

.single-columns .single-news__content .wp-block-table table {
	font-size: var(--font-size-sm);
	line-height: 1.8;
}

.single-columns .single-news__content .wp-block-table th,
.single-columns .single-news__content .wp-block-table td {
	border: 1px solid #dddddd;
	padding: var(--space-xs) var(--space-sm);
	vertical-align: top;
}

.single-columns .single-news__content .wp-block-table th {
	background-color: var(--color-lightgray);
	text-align: left;
}