/*
Theme Name: Kuraota Magazine
Theme URI: https://kuraota-mag.com/
Author: 株式会社プロ アルテ ムジケ
Description: クラシック音楽特化WEBメディア「クラオタマガジン」の独自テーマ。design/design-system.md（CINRA実測トークン）と design/information-architecture.md を仕様として実装。記事本文のスタイルは記事HTMLに同梱された <style> が担当し、テーマは干渉しない。
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kuraota
Tags: blog, news, custom-menu, translation-ready
*/

/* ==========================================================================
   クラオタマガジン テーマCSS

   【設計の前提】
   - 正本は design/design-system.md。数値はすべてそこ由来（rem→px は §6.3 の変換表）。
   - ⚠️ html { font-size: 10px } は書かない（§6.3・§8）。すべて px 直値で書く。
   - 色は3アクセントのみ・役割固定：
       赤橙 #f12b00 = 連載ラベル専用 / 紺 #224b8f = リンクとカテゴリ専用 / 黄 #f5ea68 = マーカー専用
   - ページ背景は薄グレー、コンテンツは白（「グレーの海に白い紙が浮く」）。
   - box-shadow・グラデーション・中間の角丸（4/8/10px）は使わない。
   - ブレークポイントは 1024px の1本だけ。
   - 記事本文（.entry-content の中身）にはテーマCSSを当てない（§6.4）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン（design-system.md §2.6）
   -------------------------------------------------------------------------- */
:root {
	--color_base:       #000a02;
	--color_sub:        #868788;
	--color_icon:       #c6c7c8;
	--color_border:     #e3e4e5;
	--color_background: #f4f5f6;
	--color_series:     #f12b00;  /* 連載ラベル専用 */
	--color_link:       #224b8f;  /* リンク・カテゴリ専用 */
	--color_underline:  #f5ea68;  /* マーカー専用（テーマでは未使用） */
	--font_base: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
	             "Hiragino Sans", YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
	--font_en:   "DM Sans", sans-serif;
	--easing_out: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font_base);
	font-size: 16px;
	line-height: 2;
	color: var(--color_base);
	background: var(--color_background); /* グレーの海 */
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	word-break: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--color_link); }

/* フォーカスリングは消さない（design-system.md §7.4） */
:focus-visible {
	outline: 2px solid var(--color_link);
	outline-offset: 2px;
}

/* スクリーンリーダー専用テキスト */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* キーボード操作用のスキップリンク */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 10px 16px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   3. レイアウト共通
   -------------------------------------------------------------------------- */
/* ページ全体のコンテナ（ヘッダー内寸と同じ 1080px） */
.l-container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 15px;
}
@media (min-width: 1024px) {
	.l-container { padding: 0 30px; }
}

/* 一覧・アーカイブの外枠
   ⚠️ .l-container と同じ要素に付くので、padding はショートハンドで書かない
      （横方向の padding を上書きしてしまうため） */
.l-main { padding-top: 30px; padding-bottom: 60px; }
@media (min-width: 1024px) {
	.l-main { padding-top: 50px; padding-bottom: 80px; }
}

/* 白い紙（一覧ページのコンテンツ枠） */
.l-sheet {
	background: #fff;
	border-radius: 16px;
	padding: 30px 15px;
}
@media (min-width: 1024px) {
	.l-sheet { border-radius: 24px; padding: 50px 60px; }
}

/* --------------------------------------------------------------------------
   4. サイトヘッダー
   -------------------------------------------------------------------------- */
.l-header {
	/* CINRA実測：sticky / 白 / 下線1px / z-index 100 */
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--color_border);
}
.l-header__inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 14px 15px;
	display: flex;
	align-items: center;
	gap: 16px;
}
@media (min-width: 1024px) {
	.l-header__inner { padding: 16px 30px; gap: 30px; }
}

/* ロゴ（R3ワードマーク。正本は design/assets/logo/）
   縦横比 2.45:1。600px幅の原寸を CSS で縮小し、高DPIでも滲まないようにする。
   カスタムロゴ未設定時のフォールバックとしてテキスト用の指定も残す。 */
.l-header__logo {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .025em;
}
.l-header__logo a {
	color: var(--color_base);
	text-decoration: none;
	display: inline-block;
}
.l-header__logoImg,
.l-header__logo .custom-logo {
	display: block;
	width: 108px;
	height: auto;
}
@media (min-width: 1024px) {
	.l-header__logo { font-size: 20px; }
	.l-header__logoImg,
	.l-header__logo .custom-logo { width: 132px; }
}

/* --- グローバルナビ --- */
.l-nav { margin-left: auto; }

.l-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.l-nav__item > a,
.l-nav__item > .l-nav__label {
	display: block;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color_base);
	text-align: left;
	text-decoration: none;
	background: none;
	border: 0;
	font-family: inherit;
	cursor: pointer;
}
.l-nav__item > a:hover { color: var(--color_link); }
/* 右端に分離する「公演情報」 */
.l-nav__item--kouen > a { color: var(--color_link); }

.l-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}
.l-nav__sub a {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--color_base);
	text-decoration: none;
}
.l-nav__sub a:hover { color: var(--color_link); }

/* --- 検索（<details> でJS不要のトグル） --- */
.l-search { position: relative; }
.l-search > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	cursor: pointer;
	color: var(--color_base);
}
.l-search > summary::-webkit-details-marker { display: none; }
.l-search__panel {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 30;
	width: 260px;
	padding: 15px;
	background: #fff;
	border: 1px solid var(--color_border);
	border-radius: 14px;
}

/* 検索フォーム本体（ヘッダー・404・検索結果で共用） */
.c-searchform { display: flex; gap: 8px; }
.c-searchform__field {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 0 10px;
	font-family: inherit;
	font-size: 14px;
	color: var(--color_base);
	background: #fff;
	border: 1px solid var(--color_sub); /* 入力枠は3:1が要るので border 色ではなく sub（§7.2c） */
	border-radius: 5px;
}
.c-searchform__submit {
	flex: 0 0 auto;
	height: 36px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--color_link);
	background: rgba(34, 75, 143, .08);
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	transition: background .3s var(--easing_out);
}
.c-searchform__submit:hover { background: rgba(34, 75, 143, .16); }

/* --- ハンバーガー（1024px未満） --- */
.l-header__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px; height: 36px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.l-header__toggle span {
	display: block;
	width: 20px; height: 1px;
	margin: 0 auto;
	background: var(--color_base);
	transition: transform .3s var(--easing_out), opacity .3s var(--easing_out);
}
.l-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.l-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.l-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- モバイル（既定＝1024px未満）--- */
@media (max-width: 1023px) {
	.l-nav {
		display: none;
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		z-index: 20;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		padding: 20px 15px 30px;
		background: #fff;
		border-bottom: 1px solid var(--color_border);
	}
	.l-nav.is-open { display: block; }
	.l-header__toggle { margin-left: auto; }
	.l-nav__item { border-top: 1px solid var(--color_border); }
	.l-nav__item:first-child { border-top: 0; }
	.l-nav__item > a,
	.l-nav__item > .l-nav__label { padding: 14px 0 6px; width: 100%; }
	/* モバイルではドロップダウンにしない。グループ名はただの見出しとして振る舞わせる */
	.l-nav__item > .l-nav__label { pointer-events: none; }
	.l-nav__sub { padding: 0 0 12px 12px; }
	.l-nav__sub a { padding: 6px 0; }
	/* モバイルではヘッダーの検索トグルを出さず、パネル内に置く */
	.l-header__search--desktop { display: none; }
	.l-nav__search { margin-top: 20px; }
}

/* --- PC（1024px以上）--- */
@media (min-width: 1024px) {
	.l-header__toggle { display: none; }
	.l-nav__search { display: none; }

	.l-nav__list { display: flex; align-items: center; gap: 24px; }
	.l-nav__item { position: relative; }

	/* グループのドロップダウン。hover と focus-within の両方で開く（JS不使用） */
	.l-nav__sub {
		display: none;
		position: absolute;
		left: 50%;
		top: 100%;
		transform: translateX(-50%);
		z-index: 25;
		min-width: 170px;
		margin-top: 12px;
		padding: 12px 0;
		background: #fff;
		border: 1px solid var(--color_border);
		border-radius: 14px;
	}
	.l-nav__item:hover > .l-nav__sub,
	.l-nav__item:focus-within > .l-nav__sub { display: block; }
	.l-nav__sub a { padding: 6px 18px; white-space: nowrap; }
	/* ドロップダウンとナビの間に隙間があると hover が切れるので、透明な橋を渡す */
	.l-nav__item--hasSub > .l-nav__label::after {
		content: "";
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		height: 12px;
	}
}

/* --------------------------------------------------------------------------
   5. レベル表示（design-system.md §4）
   絵文字🟢🟡🔴・⭐は画面に出さない。形（ドット）と語だけで表す。
   -------------------------------------------------------------------------- */
.c-level {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 8px;
	border-radius: 5px;
	background: var(--color_background);
	font-size: 12px;
	line-height: 1;
	color: var(--color_base);
	vertical-align: middle;
	text-decoration: none;
}
.c-level__meter { display: inline-flex; gap: 3px; }
.c-level__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	border: 1px solid var(--color_base);
	box-sizing: border-box;
}
.c-level__dot.is-on { background: var(--color_base); }

.c-literacy {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 1;
	color: var(--color_sub);
	vertical-align: middle;
}
.c-literacy__stars {
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--color_base);
	font-variant-emoji: text; /* 絵文字レンダリングを禁止し、モノクロの文字として描く */
}

/* --------------------------------------------------------------------------
   6. 記事カード（design-system.md §3.14）
   一覧・関連記事で共用。抜粋は載せない（IA §3）。
   -------------------------------------------------------------------------- */
.c-cardList {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1024px) {
	/* CINRA実測：トップの記事一覧は2カラム（652.5px × 2） */
	.c-cardList { grid-template-columns: repeat(2, 1fr); gap: 40px 40px; }
	.c-cardList--1 { grid-template-columns: 1fr; }
}

.c-card {
	display: block;
	color: var(--color_base);
}
.c-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.c-card__image {
	background: var(--color_background);
	/* CINRA実測：カードの画像に角丸を付けていない（0px）。丸めると印象が変わる */
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

/* 1024px以上は「画像が左・テキストが右」の横並び（CINRA実測 flex-direction: row）。
   画像は 300×200 の 3:2 固定。1024px未満は画像を上に積む。 */
@media (min-width: 1024px) {
	.c-card__link {
		display: flex;
		gap: 20px;
		align-items: flex-start;
	}
	.c-card__image {
		flex: 0 0 300px;
		width: 300px;
	}
	.c-card__body {
		flex: 1 1 auto;
		min-width: 0;
	}
}
.c-card__image img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
/* 画像未設定時のプレースホルダ（枠線・影は付けない） */
.c-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	color: var(--color_sub);
	font-size: 13px;
	line-height: 1.5;
}
.c-card__series {
	display: block;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color_series); /* アクセント1が使われる唯一の場所 */
}
.c-card__title {
	/* CINRA実測：20px / 700 / line-height 28px（1.4） */
	margin: 6px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}
@media (min-width: 1024px) {
	.c-card__title { margin-top: 0; font-size: 20px; }
}
.c-card__link:hover .c-card__title { color: var(--color_link); }
.c-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color_sub);
}
.c-card__meta .category {
	color: var(--color_link);
	font-weight: 700;
}
.c-card__meta time { font-family: var(--font_en); }

/* --------------------------------------------------------------------------
   7. セクション見出し・共通パーツ
   -------------------------------------------------------------------------- */
.c-sectionHead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	/* CINRA実測：セクション見出しの margin-bottom は 24px */
	margin: 0 0 24px;
}
.c-sectionTitle {
	/* CINRA実測：28px / 700 / line-height 1.0（詰める）/ margin-bottom 24.5px */
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}
@media (min-width: 1024px) {
	.c-sectionTitle { font-size: 28px; }
}
.c-sectionMore {
	font-size: 12px;
	font-weight: 700;
	color: var(--color_link);
	text-decoration: none;
}
.c-sectionMore:hover { text-decoration: underline; }

/* ページ見出し（アーカイブ・検索結果・固定ページ） */
.c-pageHead { margin: 0 0 30px; }
.c-pageHead__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color_sub);
}
.c-pageHead__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}
@media (min-width: 1024px) {
	.c-pageHead__title { font-size: 28px; }
}
.c-pageHead__desc {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--color_sub);
}

/* タグチップ（design-system.md §3.11） */
.c-tagList {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.c-tag {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 10px;
	border-radius: 5px;
	background: var(--color_background);
	font-size: 12px;
	line-height: 1;
	color: var(--color_base);
	text-decoration: none;
}
.c-tag:hover { color: var(--color_link); }

/* link-button（送客導線の唯一の器・design-system.md §3.10） */
.c-linkButton {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border-radius: 5px;
	background: rgba(34, 75, 143, .08);
	color: var(--color_link);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	transition: background .3s var(--easing_out);
}
.c-linkButton:hover { background: rgba(34, 75, 143, .16); }

/* ページャ */
.c-pagination {
	margin-top: 40px;
	font-size: 14px;
	text-align: center;
}
.c-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px; height: 32px;
	padding: 0 8px;
	margin: 0 3px;
	border-radius: 5px;
	color: var(--color_link);
	text-decoration: none;
}
.c-pagination .page-numbers.current {
	background: var(--color_background);
	color: var(--color_base);
	font-weight: 700;
}

.c-empty {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--color_sub);
}

/* --------------------------------------------------------------------------
   8. トップページ（IA §2 ／ CINRA実測 2026-07-26 に合わせた折衷案）
   ①ステートメント ②二層分岐 ③新着 ④カテゴリ別 ⑤連載 ⑥次の公演
   ①②はクラオタ独自。主張は弱めず、**余白と行間だけ**を圧縮して高さを抑える。
   ③〜⑥は「同じカードグリッドを、見出しで区切って積むだけ」というCINRAの原理に従う。
   -------------------------------------------------------------------------- */
/* .l-container と同じ要素に付くので padding-bottom だけを指定する */
.p-front { padding-bottom: 60px; }
@media (min-width: 1024px) {
	.p-front { padding-bottom: 80px; }
}
/* セクション間は 40px（CINRA実測 2026-07-26）。PCでも広げない */
.p-front__section { margin-top: 40px; }

/* ① ステートメント
   高さを抑えるために**余白だけ**を圧縮する。文字サイズは落とさない（主張を弱めない）。 */
.p-statement {
	padding: 24px 0 0;
	text-align: center;
}
@media (min-width: 1024px) {
	.p-statement { padding: 32px 0 0; }
}
.p-statement__lead {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}
@media (min-width: 1024px) {
	.p-statement__lead { font-size: 28px; }
}
.p-statement__sub {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--color_sub);
}

/* ② 二層の分岐（このメディアの主張。ファーストビューに入れる）
   ①と同じく、削るのは余白と行間だけ。文言・文字サイズは変えない。 */
.p-branch {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}
@media (min-width: 1024px) {
	.p-branch { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
}
.p-branch__card {
	display: block;
	padding: 20px;
	background: #fff;      /* 白いカード2枚。左右で優劣をつけない */
	border-radius: 16px;
	color: var(--color_base);
	text-decoration: none;
}
@media (min-width: 1024px) {
	.p-branch__card { padding: 28px 32px; border-radius: 24px; }
}
.p-branch__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}
@media (min-width: 1024px) {
	.p-branch__title { font-size: 22px; }
}
.p-branch__desc {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--color_sub);
}
.p-branch__more {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color_link);
}
.p-branch__card:hover .p-branch__more { text-decoration: underline; }

/* ⑤ 連載枠。連載ごとにサブ見出し＋カード3枚を積む。
   サブ見出しに赤橙は使わない（赤橙＝連載ラベル専用。カード側のラベルが担う）。 */
.p-seriesGroup + .p-seriesGroup { margin-top: 40px; }
.p-seriesGroup__name {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color_base);
}
@media (min-width: 1024px) {
	.p-seriesGroup__name { font-size: 18px; }
}

/* ⑥ 次の公演（控えめに。バナー広告にしない） */
.p-events { margin: 0; padding: 0; list-style: none; }
.p-events__item { border-top: 1px solid var(--color_border); }
.p-events__item:last-child { border-bottom: 1px solid var(--color_border); }
.p-events__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	padding: 16px 0;
	color: var(--color_base);
	text-decoration: none;
}
.p-events__date {
	flex: 0 0 auto;
	font-family: var(--font_en);
	font-size: 12px;
	color: var(--color_sub);
}
.p-events__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}
.p-events__link:hover .p-events__title { color: var(--color_link); }

/* --------------------------------------------------------------------------
   9. 記事ページ（IA §4）
   ⚠️ ここから下で .entry-content の「中身」にスタイルを当てないこと。
      本文の見た目は記事HTMLに同梱された <style>（.kuraota-article）が担当する。
   -------------------------------------------------------------------------- */
/* 記事ラッパー。**幅と余白だけ**を持つ（文字スタイルは記事同梱の <style> の担当）。
   CINRA実測（2026-07-26 / 1440×900）の段落幅 695px に合わせる。
   PC の 815px は 695px + 左右padding 60px×2 ＝ 白い紙の内寸が 695px になる値。 */
.p-articleWrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 30px 15px 60px;
}
@media (min-width: 1024px) {
	.p-articleWrap { max-width: 1080px; padding: 50px 60px 80px; }
}

/* パンくず（ホーム › カテゴリ › 記事タイトル）
   現在地はリンクにしない。区切りの › は装飾なので CSS で出す。 */
.c-breadcrumb {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color_sub);
}
.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
	content: "›";
	margin-right: 6px;
	color: var(--color_sub);
}
/* パンくず全体を --color_sub で組む（記事の主役はタイトル。ここは目立たせない）。
   hover でだけ紺に寄せる＝新しい色は足していない。 */
.c-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.c-breadcrumb a:hover {
	color: var(--color_link);
	text-decoration: underline;
}
/* 現在地（記事タイトル）はリンクにしない */
.c-breadcrumb [aria-current="page"] { color: var(--color_sub); }

/* 目次（本文の h2 から生成。h2 が2個未満なら PHP 側で出力しない）
   ⚠️ 本文の中には一切スタイルを当てない。ここは本文の**外**に置くテーマ側の部品。 */
.c-toc {
	margin: 30px 15px 0;
	padding: 20px;
	border: 1px solid var(--color_border);
	border-radius: 14px;
}
@media (min-width: 1024px) {
	.c-toc { margin: 30px 60px 0; padding: 25px 30px; }
}
.c-toc__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}
.c-toc__list {
	margin: 0;
	padding: 0 0 0 1.4em;
	font-size: 14px;
	line-height: 1.8;
}
.c-toc__item { margin-bottom: 6px; }
.c-toc__item:last-child { margin-bottom: 0; }
.c-toc__list a { color: var(--color_link); text-decoration: none; }
.c-toc__list a:hover { text-decoration: underline; }

/* 白い紙 */
.p-article {
	background: #fff;
	border-radius: 16px;
}
@media (min-width: 1024px) {
	.p-article { border-radius: 24px; }
}

/* 記事ヘッダー（連載ラベル／タイトル／メタ行／クレジット行） */
.p-article__header { padding: 30px 15px 0; }
@media (min-width: 1024px) {
	.p-article__header { padding: 50px 60px 0; }
}
.p-article__series {
	display: inline-flex;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color_series);
}
.p-article__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}
@media (min-width: 1024px) {
	.p-article__title { font-size: 36px; }
}
.p-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color_sub);
}
.p-article__meta .category {
	color: var(--color_link);
	font-weight: 700;
	text-decoration: none;
}
.p-article__meta time { font-family: var(--font_en); }
.p-article__authors {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 20px;
	margin: 20px 0 0;
	padding-bottom: 35px;
	border-bottom: 1px solid var(--color_border); /* 記事の唯一の構造的区切り */
	font-size: 12px;
	line-height: 1.75;
	color: var(--color_sub);
}
.p-article__authors b { color: var(--color_base); font-weight: 700; }

/* 本文ラッパー。幅と余白だけ。中身には一切触れない */
.p-article__body { padding: 0 0 30px; }
@media (min-width: 1024px) {
	.p-article__body { padding: 0 0 50px; }
}

/* 記事末の公演情報ブロック（該当記事のみ・テーマ生成のマークアップ）
   注入CSS側の .event-info と名前が衝突しないよう p- 名前空間にしてある */
.p-eventInfo {
	margin: 0 15px 30px;
	padding: 25px;
	border: 1px solid var(--color_border);
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.75;
}
@media (min-width: 1024px) {
	.p-eventInfo { margin: 0 60px 50px; }
}
.p-eventInfo__title {
	margin: 0 0 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.p-eventInfo__dl {
	display: grid;
	grid-template-columns: 6em 1fr;
	gap: 8px 15px;
	margin: 0;
}
@media (min-width: 1024px) {
	.p-eventInfo__dl { grid-template-columns: 8em 1fr; }
}
.p-eventInfo__dl dt { font-weight: 700; }
.p-eventInfo__dl dd { margin: 0; }
.p-eventInfo__cta { margin: 20px 0 0; }

/* 記事末のタグ列 */
.p-article__tags {
	margin: 0 15px;
	padding: 0 0 30px;
}
@media (min-width: 1024px) {
	.p-article__tags { margin: 0 60px; padding: 0 0 50px; }
}

/* 記事下ブロック（バイライン・関連記事） */
.p-articleFoot { margin-top: 40px; }
.p-articleFoot__title {
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
/* 記事末の回遊。3系統（連載／トピック／カテゴリ）が縦に積まれる。
   該当0本の系統は PHP 側で出力しないので、見出しだけが残ることはない。 */
.p-related {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--color_border);
}

/* 固定ページ（/about/ 等）。ここは通常のWordPress本文なので最小限だけ整える */
.p-page__content { font-size: 16px; line-height: 2; }
.p-page__content a { color: var(--color_link); }
.p-page__content img { border-radius: 14px; }

/* --------------------------------------------------------------------------
   10. フッター
   -------------------------------------------------------------------------- */
.l-footer {
	margin-top: 0;
	padding: 40px 0 30px;
	background: #fff;
	border-top: 1px solid var(--color_border);
}
@media (min-width: 1024px) {
	.l-footer { padding: 60px 0 40px; }
}
.l-footer__brand {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .025em;
}
.l-footer__brand a { color: var(--color_base); text-decoration: none; }

.l-footer__nav {
	display: grid;
	gap: 24px;
}
@media (min-width: 1024px) {
	.l-footer__nav { grid-template-columns: repeat(4, 1fr); gap: 30px; }
}
.l-footer__heading {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color_sub);
}
.l-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.4;
}
.l-footer__list li { margin-bottom: 10px; }
.l-footer__list a {
	color: var(--color_base);
	text-decoration: none;
}
.l-footer__list a:hover { color: var(--color_link); }

.l-footer__bottom {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--color_border);
	font-size: 12px;
	line-height: 1.9;
	color: var(--color_sub);
}
.l-footer__bottom a { color: var(--color_link); }
.l-footer__copyright { margin: 6px 0 0; font-family: var(--font_en); }

/* --------------------------------------------------------------------------
   11. 404
   -------------------------------------------------------------------------- */
.p-404__title {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}
.p-404__text {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--color_sub);
}
.p-404__search { max-width: 420px; }

/* --------------------------------------------------------------------------
   12. ごく少数のユーティリティ（増やさない）
   -------------------------------------------------------------------------- */
.u-mt24 { margin-top: 24px; }

/* --- ヒーローカード（トップの1枚目）------------------------------------------
   CINRA実測：1枚目だけ2カラムぶち抜きで巨大にし、以降を通常サイズにしてリズムを作る。
   ヒーロー 画像653x422 / タイトル36px・lh1.39   通常 画像300x200 / タイトル20px・lh1.4 */
@media (min-width: 1024px) {
	.c-card--hero { grid-column: 1 / -1; }
	.c-card--hero .c-card__link { gap: 30px; }
	.c-card--hero .c-card__image { flex: 0 0 653px; width: 653px; }
	.c-card--hero .c-card__title { font-size: 36px; line-height: 1.39; }
	.c-card--hero .c-card__meta { margin-top: 14px; font-size: 13px; }
}