/* ============================================================
 * 公募／助成情報
 * フォント・文字色・背景はサイト既定を継承する（独自配色は使わない）。
 * 機能色のみ保持: urgency ピル（accent/amber）、カテゴリータグ色は inline で指定。
 * すべて .oc-page / .oc-detail にスコープし、既存サイトへ影響しない。
 * ============================================================ */

.oc-page,
.oc-detail {
	/* サイト既存の白黒系に統一。色味は使わない。 */
	--oc-accent: #333;            /* hover / active 強調（旧:赤） */
	--oc-amber:  #777;            /* soon の濃グレー（旧:琥珀） */
	--oc-mute:   rgba(0, 0, 0, 0.55);
	--oc-mute-2: rgba(0, 0, 0, 0.4);
	--oc-line:   #eee;            /* サイト標準の境界色 */
	--oc-line-2: #f5f5f5;

	box-sizing: border-box;
}

.oc-page {
	max-width: 1320px; /* サイト本体（ヘッダー・各アーカイブ）と同じ幅 */
	margin: 0 auto;
	padding: 0; /* WPフッターとの余白はフッター側に任せる（旧: 0 0 80px） */
}

/* タブレット以下も同様。 */
@media (max-width: 1023px) {
	.oc-page {
		padding: 0;
	}
}

/* [hidden] 属性を確実に効かせる（.oc-row/.oc-chip 等の display: grid/flex に勝つ）。
   JS の row.hidden = true / chip.hidden = true で絞り込み・チップ非表示が機能するため必須。 */
.oc-page [hidden],
.oc-detail [hidden] {
	display: none !important;
}

/* サイト全体の a:visited { color:#999 }（critical.css / common.css）を、
   opencall スコープだけで無効化（既読リンクが灰色にならないようにする）。 */
.oc-page a:visited,
.oc-detail a:visited {
	color: inherit;
}

.oc-detail {
	max-width: 800px;
	margin: 0 auto;
	padding: 36px 28px 0; /* 旧: bottom 80px。.oc-detail-foot 側で余白を持つので 0 に。 */
}

/* ── マストヘッド ────────────────────────── */
.oc-masthead { padding: 0; }
/* /exhibitions/ の .exhibition-heading と同じ見た目に揃える。
   サイトの #content h1（font-size: 30px）より特異度が低いため !important で確実に上書き。 */
.oc-h1 {
	font-size: 20px !important;
	margin: 30px 0 20px !important;
	padding: 0 !important;
	text-align: left !important;
}

/* ── ピックアップ（通常投稿: タグ「公募」の最新3件） ────────────────────────── */
/* ピックアップ自体には左右 padding を付けない。
   - 一覧ページ：他要素（.oc-row 等）が個別に左右余白を持つので、ここは画面端まで広げる。
   - 詳細ページ：親 .oc-detail-foot 側に左右 padding を持たせて全体（バナー含む）に余白を付ける。 */
.oc-picks { margin: 24px 0 32px; }
.oc-detail-foot { padding-left: 14px; padding-right: 14px; }
.oc-picks__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}
/* /exhibitions/ の .ex-index .exsec__head h2 と同じ見た目に揃える。
   --ink-strong は exhibitions-index.css スコープ内変数なのでここでは生値 #1a1a1a。 */
.oc-picks__title {
	font-size: 18px;
	font-weight: bold;
	color: #1a1a1a;
	letter-spacing: .03em;
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	text-transform: none;
}
.oc-picks__more {
	display: inline-flex;
	align-items: center;
	padding: .4rem .8rem;
	border-radius: 999px;
	font-size: 12px;
	color: var(--oc-mute);
	text-decoration: none;
	white-space: nowrap;
}
.oc-picks__more:hover { color: var(--oc-accent); }
.oc-picks__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.oc-picks__item { min-width: 0; }
.oc-picks__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.oc-picks__link:hover .oc-picks__h { color: var(--oc-accent); }
.oc-picks__figure {
	margin: 0 0 12px;
	background: var(--oc-line-2);
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.oc-picks__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}
/* サイト標準（Magazine 等のアーカイブ）の .entry-meta と同じく、
   カテゴリ＝左寄り / 日付＝右寄りで両端に配置する。
   DOM 順は [date, cat] のまま row-reverse + space-between で見た目だけ反転。
   色味は両方 #999 に揃える。 */
.oc-picks__meta {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 4px;
}
.oc-picks__date {
	margin: 0;
	font-size: 10px;
	color: #999;
	font-weight: 600;
	letter-spacing: normal;
}
.oc-picks__cat {
	font-size: 10px;
	font-weight: 600;
	color: #999;
}
.oc-picks__h {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.5;
	padding: 0 !important;
}

@media (max-width: 900px) and (min-width: 768px) {
	.oc-picks__list { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
/* スマホ：展覧会一覧と同じ「画像左・テキスト右」の1カラム */
@media (max-width: 767px) {
	.oc-picks__list {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 14px;
	}
	.oc-picks__link {
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}
	.oc-picks__figure {
		flex: 0 0 130px;
		width: 130px;
		margin: 0;
		aspect-ratio: 4 / 3;
	}
	.oc-picks__body {
		flex: 1 1 auto;
		min-width: 0;
	}
	.oc-picks__h {
		font-size: 14px !important;
		line-height: 1.4;
	}
	.oc-picks__date { margin: 0 0 4px; }
}

/* ── 状態タブ ────────────────────────── */
.oc-statustabs {
	display: flex;
	gap: 24px;
	border-bottom: 1px solid var(--oc-line);
	flex-wrap: wrap;
	/* ナビ後 #oc-list へのスクロール時、モバイル固定ヘッダー（約50px）の下に隠れないよう余白 */
	scroll-margin-top: 60px;
}
.oc-tab {
	appearance: none;
	background: none;
	border: none;
	padding: 12px 0;
	margin: 0 0 -1px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: inherit;
	color: var(--oc-mute);
	border-bottom: 2px solid transparent;
}
/* タブも <a> なので、サイト共通 a:visited / a:hover の上書きから守る */
.oc-tab,
.oc-tab:link,
.oc-tab:visited { color: var(--oc-mute); opacity: 1; }
.oc-tab:hover { color: inherit !important; opacity: 1; }
.oc-tab.is-active,
.oc-tab.is-active:link,
.oc-tab.is-active:visited,
.oc-tab.is-active:hover,
.oc-tab.is-active:focus {
	color: inherit !important;
	border-bottom-color: var(--oc-accent);
	opacity: 1;
}
.oc-tab__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--oc-accent);
	display: inline-block;
}
/* 状態タブ（募集中・募集予定／定期募集／募集終了／ブックマーク）の件数は非表示。
   カテゴリーチップ側（.oc-chip__count）の件数表示はそのまま残す。 */
.oc-tab__count { display: none; }

/* ── ブックマーク用アイコンボタン（状態タブ右端）── */
/* 展覧会一覧の .ex-index .exbm-btn と同じ着想。アイコン＋カウントの小さな角丸ボタン。
   状態タブ（.oc-tab）の縦中央に揃えるため align-self: center を指定。 */
.oc-bm-tab {
	margin-left: auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
	height: 36px;
	border: 1px solid var(--oc-line);
	border-radius: 4px;
	color: var(--oc-mute);
	background: #fff;
	text-decoration: none;
	font-size: 12px;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.oc-bm-tab svg { width: 14px; height: 14px; flex: 0 0 auto; }
.oc-bm-tab__n { font-size: 11px; font-weight: bold; color: var(--oc-mute); }
.oc-bm-tab:hover { border-color: var(--oc-accent); color: var(--oc-accent); }
.oc-bm-tab.is-active {
	background: var(--oc-accent);
	color: #fff;
	border-color: var(--oc-accent);
}
.oc-bm-tab.is-active .oc-bm-tab__n { color: #fff; }
/* a:visited の上書き対策 */
.oc-page a.oc-bm-tab:link,
.oc-page a.oc-bm-tab:visited { color: var(--oc-mute); }
.oc-page a.oc-bm-tab:hover { color: var(--oc-accent); }
.oc-page a.oc-bm-tab.is-active,
.oc-page a.oc-bm-tab.is-active:link,
.oc-page a.oc-bm-tab.is-active:visited { color: #fff; }

/* ── フィルター行（カテゴリープルダウン＋並び順プルダウン）── */
.oc-filters {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	flex-wrap: wrap;
}
.oc-filters .oc-catfilter-form,
.oc-filters .oc-sort-form {
	flex: 0 1 auto;
	margin: 0;
}
.oc-filters .oc-sort {
	height: 44px;
	border: 1px solid var(--oc-line);
	background: #fff;
}

/* ── コントロール行 ────────────────────────── */
.oc-controls {
	display: flex;
	gap: 8px;
	align-items: center;
	border-bottom: 1px solid var(--oc-line);
	padding: 14px 0;
	flex-wrap: wrap;
}

/* 共通：セレクトの高さ */
.oc-sort {
	height: 44px;
	border: 1px solid #ccc;
	background: #fff;
	transition: border-color .15s ease;
}
.oc-sort:focus { border-color: #808080; outline: none; }
.oc-sort:hover { border-color: #808080; }

/* 検索窓：展覧会一覧 .dsearchbox と同じ。
   1枠の中に [🔍 入力] + 右端に濃色「検索」ボタン。 */
.oc-search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 420px;
	height: 44px;
	display: flex;
	align-items: stretch;
	border: 1px solid #ccc;
	border-radius: 5px;
	overflow: hidden;
	background: #fff;
	transition: border-color .15s ease;
}
.oc-search:focus-within { border-color: #808080; }
.oc-search__field {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 0 0 16px;
	background: transparent;
}
.oc-search__field svg { width: 18px; height: 18px; color: #808080; flex: 0 0 auto; }
.oc-search .oc-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	border-radius: 0;
	padding: 0;
	font: inherit;
	font-size: 12px;
	color: #333;
	height: 100%;
}
.oc-search .oc-search__input::placeholder { color: #999; }
/* 検索送信ボタン（黒地・白文字） */
.oc-search__btn {
	flex: 0 0 auto;
	appearance: none;
	background: #1a1a1a;
	color: #fff;
	border: 0;
	border-radius: 0;
	height: 100%;
	padding: 0 18px;
	font: inherit;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: .04em;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease;
}
.oc-search__btn:hover { background: #333; }
/* グローバルの input[type="search"]（border / radius / color / padding）を、
   他の入力には触らずこの検索窓だけ無効化する。指定セレクタ（0,2,0）が
   input[type="search"]（0,1,1）に勝つので、影響範囲はこの input だけ。 */
.oc-search .oc-search__input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	border-radius: 0;
	padding: 0;
	font: inherit;
	font-size: 12px;
	color: inherit;
	height: 100%;
	min-width: 0;
}
.oc-search .oc-search__input::placeholder { color: var(--oc-mute-2); }

.oc-sort {
	padding: 0 36px 0 16px;
	font: inherit;
	font-size: 14px;
	color: inherit;
	cursor: pointer;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--oc-mute) 50%),
		linear-gradient(135deg, var(--oc-mute) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}


/* ── カテゴリーチップ ────────────────────────── */
.oc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.oc-chip {
	appearance: none;
	background: #fff;
	border: 1px solid var(--oc-line);
	border-radius: 100px;
	padding: 6px 13px;
	font: inherit;
	font-size: 13px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.oc-chip:hover { border-color: var(--oc-mute); }
/* 選択中チップ：背景は暗色、文字は全リンク状態で白固定。
   サイトの a:visited { color:#999 } / .oc-page a:visited { color:inherit } が
   勝って文字が消えてしまう問題を !important で防ぐ。 */
.oc-chip.is-active,
.oc-chip.is-active:link,
.oc-chip.is-active:visited,
.oc-chip.is-active:hover,
.oc-chip.is-active:focus {
	background: #1b1a17;
	color: #fff !important;
	border-color: #1b1a17;
	opacity: 1;
}
.oc-chip__count { font-size: 11px; color: var(--oc-mute-2); }
.oc-chip.is-active .oc-chip__count { color: rgba( 255, 255, 255, 0.7 ) !important; }
.oc-chip[hidden] { display: none; }

/* ── 適用中の絞り込み pill（.expills）：展覧会一覧と同じ見た目 ── */
.oc-page .expills {
	display: flex;
	gap: 9px;
	align-items: center;
	margin-top: 14px;
	flex-wrap: wrap;
}
.oc-page .expills__lead {
	flex: 0 0 auto;
	font-size: 11px;
	color: #999;
	font-weight: bold;
}
.oc-page .expills__scroll {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}
.oc-page .expill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #f4f4f4;
	border-radius: 5px;
	padding: 6px 11px;
	font-size: 12px;
	color: #333;
}
/* 固定ピル：× を持たない＝削除不可。クリックも反応しないのでカーソルだけ default。 */
.oc-page .expill--fixed { cursor: default; }
.oc-page .expill button {
	border: none;
	background: none;
	color: #999;
	font-size: 13px;
	line-height: 1;
	padding: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.oc-page .expill button:hover { color: #333; }
.oc-page .expill svg { width: 11px; height: 11px; }
.oc-page .expill-clear {
	flex: 0 0 auto;
	margin-left: auto;
	border: none;
	background: none;
	color: #808080;
	font-size: 11.5px;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
	cursor: pointer;
}
@media (max-width: 600px) {
	.oc-page .expills { margin-top: 10px; gap: 8px; }
	.oc-page .expills__lead { display: none; }
	.oc-page .expills__scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.oc-page .expills__scroll::-webkit-scrollbar { display: none; }
}

/* ── 結果バー ────────────────────────── */
/* リスト行（.oc-row）の左 padding (14px) と揃えて、件数表示がコンテンツのタイトル列と縦に揃うようにする。 */
.oc-resultbar {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--oc-mute);
	padding: 12px 14px 4px;
}
.oc-resultbar__count { font-weight: 700; color: inherit; }
/* 検索中のみ表示する「× 検索を解除」リンク。サイト共通の a:visited #999 を打ち消す。 */
.oc-resultbar__clear,
.oc-resultbar__clear:visited { color: var(--oc-accent); text-decoration: none; }
.oc-resultbar__clear:hover { text-decoration: underline; }
/* 定期募集タブのときだけ右側に出す注意書き */
.oc-resultbar__note {
	margin-left: auto;
	color: var(--oc-mute-2);
	font-size: 11px;
}

/* ── カテゴリータグ ────────────────────────── */
.oc-tag {
	display: inline-block;
	border: 1px solid currentColor;
	background: transparent;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.2;
	white-space: nowrap;
}

/* ── 締切ピル ────────────────────────── */
.oc-ddl {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 100px;
	letter-spacing: .03em;
	vertical-align: middle;
}
.oc-ddl--urgent   { background: var(--oc-accent); color: #fff; }
.oc-ddl--soon     { background: var(--oc-amber);  color: #fff; }
.oc-ddl--open     { background: var(--oc-line-2); color: var(--oc-mute); }
.oc-ddl--upcoming { background: var(--oc-line-2); color: var(--oc-mute); }
.oc-ddl--closed   { background: var(--oc-line-2); color: var(--oc-mute-2); }
.oc-ddl--recurring { background: var(--oc-line-2); color: var(--oc-mute); }
/* 詳細ページ .oc-ddlbox 内、日付の右隣にステータスピルを置く。
   PC / SP どちらでも常に日付と縦中央で揃えたいので inline-flex でラップする。
   （旧: PCは .oc-ddlbox__right で枠全体に対し中央揃え → ユーザーから「締切日の横に寄せて」と要望あり統合。） */
.oc-ddlbox__dateline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ── リスト行 ────────────────────────── */
.oc-list { margin-top: 0; }
.oc-row {
	display: grid;
	/* カテゴリー / タイトル+メタ / 日付エリア / ブックマーク
	   日付列は「あと●日」ピルと補足テキストが並ぶため 260px 確保。
	   行内は align-items: center で縦中央に揃える。 */
	grid-template-columns: 100px 1fr 260px 36px;
	gap: 20px;
	padding: 18px 14px;
	border-top: 1px solid var(--oc-line);
	cursor: pointer;
	align-items: center;
}
.oc-row:last-of-type { border-bottom: 1px solid var(--oc-line); }
.oc-row:hover { background: var(--oc-line-2); }
.oc-row:hover .oc-row__title a { color: var(--oc-accent); }
.oc-row:hover .oc-row__arrow { transform: translateX(3px); color: var(--oc-accent); }

.oc-row__cat { padding-top: 0; }
.oc-row__main { min-width: 0; }
.oc-row__title {
	margin: 0 0 6px;
	line-height: 1.4;
	font-size: inherit;
	font-weight: bold;
	word-break: break-word;
	overflow-wrap: anywhere;
}
/* サイト共通の a 要素スタイルで normal に戻されないよう、リンク自身にも明示的に bold。 */
.oc-row__title a {
	color: inherit;
	text-decoration: none;
	font-weight: bold;
}
.oc-row__meta {
	margin: 0;
	color: var(--oc-mute);
	font-size: 12px;
	line-height: 1.6;
}
.oc-row__sep { color: var(--oc-mute-2); margin: 0 4px; }

.oc-row__right { text-align: right; min-width: 0; }
/* 日付＋時間（縦に積む）と、その右に「募集中／募集終了」等のピル。
   ピルが出ても時間は必ず日付の真下に来る構造。 */
.oc-deadline {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
	min-width: 0;
}
.oc-deadline__main {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}
.oc-deadline__date { font-size: 13px; font-weight: 700; color: inherit; line-height: 1.4; }
.oc-deadline__date.is-urgent { color: var(--oc-accent); }
.oc-deadline__date.is-closed { color: var(--oc-mute-2); text-decoration: line-through; }
.oc-deadline__note {
	margin: 0;
	font-size: 11px;
	color: var(--oc-mute);
	line-height: 1.4;
	word-break: break-word;
	overflow-wrap: anywhere;
	text-align: right;
}
.oc-deadline__note.is-closed { color: var(--oc-mute-2); text-decoration: line-through; }
.oc-ddl { flex: 0 0 auto; white-space: nowrap; }
/* 定期募集の行も .oc-deadline と同じく「テキスト（左/可変幅）＋ピル（右/固定）」の横並び。
   PC は右寄せにして締切のある行と縦のラインが揃うようにする。 */
.oc-recurring {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--oc-mute);
	justify-content: flex-end;
	min-width: 0;
}
/* .oc-timing は最大2行までで省略表示（…）。
   webkit line-clamp はモダンブラウザ全般で動く事実上の標準（IE非対応）。 */
.oc-timing {
	font-size: 13px;
	word-break: break-word;
	text-align: right;
	flex: 1 1 auto;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.oc-row__arrow {
	color: var(--oc-mute-2);
	transition: transform .15s ease, color .15s ease;
	align-self: center;
}

/* ── ブックマーク（行内アイコン）─────────────────────
   コントロール行のブックマーク（.oc-bm-btn / .tb-ico）と同じ枠線スタイル。
   行内は余白をやや詰めて 32×32px。 */
.oc-bm {
	appearance: none;
	width: 32px;
	height: 32px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	padding: 0;
	cursor: pointer;
	color: #808080;
	display: grid;
	place-items: center;
	justify-self: center;
	align-self: center;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.oc-bm:hover { border-color: #808080; color: #333; }
.oc-bm.is-on {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}
.oc-bm.is-on svg path { fill: none; stroke: currentColor; }

/* ── ページネーション（.expager）── */
/* 展覧会一覧（.ex-index .expager）と同じ見た目を opencall スコープで再現。 */
.oc-page .expager {
	display: flex; flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	align-items: center;
	padding: 34px 0 10px;
}
.oc-page .expager__btn,
.oc-page .expager__num {
	border: 1px solid var(--oc-line);
	background: #fff;
	min-width: 36px;
	height: 36px;
	padding: 0 11px;
	border-radius: 5px;
	font-size: 13px;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}
.oc-page .expager__btn:hover,
.oc-page .expager__num:hover { border-color: #1a1a1a; }
.oc-page .expager__num.on {
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}
.oc-page .expager__btn.is-disabled,
.oc-page .expager__btn:disabled {
	opacity: .4;
	cursor: default;
	pointer-events: none;
}
.oc-page .expager__gap {
	min-width: 20px;
	text-align: center;
	color: var(--oc-mute);
	font-size: 13px;
}
/* a:visited のサイト共通 #999 を打ち消す */
.oc-page a.expager__btn,
.oc-page a.expager__btn:visited,
.oc-page a.expager__num,
.oc-page a.expager__num:visited { color: inherit; }
.oc-page a.expager__num.on,
.oc-page a.expager__num.on:visited { color: #fff; }


/* ── 空 ────────────────────────── */
.oc-empty { padding: 60px 0; text-align: center; color: var(--oc-mute-2); }

/* ── 詳細ページ ────────────────────────── */
.oc-backlink {
	display: inline-block;
	font-size: 12px;
	color: var(--oc-mute);
	text-decoration: none;
	margin-bottom: 28px;
}
.oc-backlink:hover { color: var(--oc-accent); }

.oc-detail__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
/* 詳細ページのブックマーク：応募期間（.oc-ddlbox）の枠内 右上に絶対配置。
   .oc-ddlbox 配下にスコープして、SPメディアクエリ内の `.oc-bm` リセットに上書きされないよう特異度を上げる。 */
.oc-ddlbox .oc-bm--detail {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
}

/* /exhibitions/ の .exhibition-heading や一覧ページの .oc-h1 と同じ見た目に揃える。
   サイトの #content h1（font-size: 30px、上下マージン大）より特異度が低いため !important で確実に上書き。 */
.oc-detail__title {
	font-size: 20px !important;
	margin: 30px 0 20px !important;
	padding: 0 !important;
	text-align: left !important;
	line-height: 1.25;
}
.oc-detail__org { color: var(--oc-mute); margin: 0 0 28px; }

.oc-ddlbox {
	border: 1px solid #1b1a17;
	background: #fff;
	padding: 20px 24px;
	display: flex;
	gap: 24px;
	align-items: center;
	margin: 0 0 32px;
	position: relative; /* 右上ブックマーク（.oc-bm--detail）と PC 用ピル（.oc-ddl）の基準。 */
}

/* PC：ステータスピル（「本日締切」「あと9日」等）は枠内 右下＝ブックマークの下に絶対配置。
   ユーザー要望：「日付の補足があるならその後ろにつけてほしい。位置はブックマークの下あたり」。
   SP では日付横（.oc-ddlbox__dateline 内）にインラインで並ぶ（default 挙動をそのまま維持）。 */
@media (min-width: 768px) {
	.oc-ddlbox { padding-right: 110px; } /* 右側にピル分の余白を確保 */
	.oc-ddlbox .oc-ddl {
		position: absolute;
		right: 16px;
		bottom: 16px;
	}
}
.oc-ddlbox.is-urgent { border-color: var(--oc-accent); }
.oc-ddlbox__left { flex: 1 1 auto; min-width: 0; }
.oc-ddlbox__right { flex: 0 0 auto; }
.oc-ddlbox__label {
	display: block;
	font-size: 11px;
	color: var(--oc-mute-2);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.oc-ddlbox__date { font-size: 24px; font-weight: 600; letter-spacing: .02em; }
.oc-ddlbox__date.is-urgent { color: var(--oc-accent); }
.oc-ddlbox__date.is-closed { color: var(--oc-mute-2); text-decoration: line-through; }
.oc-ddlbox__timing { font-size: 20px; }
.oc-ddlbox__note {
	display: inline-block;
	font-size: 12px;
	color: var(--oc-mute);
	margin-left: 10px;
}
.oc-ddlbox__note.is-closed { color: var(--oc-mute-2); text-decoration: line-through; }
/* 募集開始日：応募締切日（.oc-ddlbox__date）の上に置く小フォントの日付。
   下に大きな締切日が続くので、下マージンは少しだけ。 */
.oc-ddlbox__start { margin: 0 0 4px; font-size: 12px; color: var(--oc-mute-2); }
.oc-ddlbox__start.is-closed { text-decoration: line-through; }
/* 日付に is-closed が付いていれば、同じ親内にある後続の note / start にも
   自動で取り消し線を引く。PHP の is-closed 付与が反映されていないケースに対する保険。
   特異度 (0,3,0) で .oc-ddlbox__note (0,1,0) を確実に上書きする。 */
.oc-ddlbox__date.is-closed ~ .oc-ddlbox__note,
.oc-ddlbox__date.is-closed ~ .oc-ddlbox__start {
	color: var(--oc-mute-2);
	text-decoration: line-through;
}

.oc-lede { line-height: 1.85; margin: 0 0 32px; }
.oc-lede p { margin: 0 0 1em; }
.oc-lede p:last-child { margin-bottom: 0; }

.oc-facts { margin: 0 0 32px; padding: 0; }
.oc-facts__row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 16px;
	border-bottom: 1px solid var(--oc-line);
	padding: 14px 0;
}
.oc-facts__key {
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--oc-mute-2);
	text-transform: uppercase;
	margin: 0;
	padding-top: 2px;
}
/* フォントサイズは .oc-lede と揃える（サイト既定を継承）。
   旧: font-size: 14.5px → 削除し inherit に。 */
.oc-facts__val { margin: 0; line-height: 1.7; }

.oc-links { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 40px; }
/* 白文字をサイト共通の a:hover { color:#999; opacity:.7 } や a:visited { color:#999 } に
   負けないよう、全ステート明示 */
.oc-cta,
.oc-cta:link,
.oc-cta:visited,
.oc-cta:hover,
.oc-cta:focus,
.oc-cta:active {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #1b1a17;
	color: #fff !important;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 12px 18px;
	transition: background .15s ease;
	opacity: 1;
}
.oc-cta:hover { background: var(--oc-accent); }
.oc-cta .oc-icon { color: currentColor; }

.oc-related { margin-top: 48px; }
.oc-related__title {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--oc-mute-2);
	margin: 0 0 8px;
	font-weight: 600;
}
/* 関連リストは一覧ページの .oc-list / .oc-row をそのまま使うため、
   独自の grid レイアウトは持たない。リセットだけ残す。 */
.oc-related__list { padding: 0; margin: 0; }

/* ── アイコン共通 ────────────────────────── */
.oc-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.oc-row__arrow .oc-icon { width: 20px; height: 20px; }
.oc-bm .oc-icon { width: 18px; height: 18px; }

/* ── レスポンシブ ────────────────────────── */
@media (max-width: 900px) {
	.oc-row {
		/* モバイル：1行目に「カテゴリ｜空白｜ブックマーク」、2行目以降にタイトル・主催者・締切。
		   タイトルや主催者・締切はすべて全幅（ブックマークの下まで広がる）。
		   ブックマークは grid セルに納めるので右側に padding は不要。 */
		grid-template-columns: auto 1fr auto;
		gap: 8px 0;
		padding: 16px 12px;
		align-items: start;
		position: static;
	}
	.oc-row__cat { padding-top: 0; grid-row: 1; grid-column: 1; }
	.oc-row__main { grid-row: 2; grid-column: 1 / -1; }
	.oc-row__right { grid-row: 3; grid-column: 1 / -1; text-align: left; }
	.oc-row__arrow { display: none; }
	/* 一覧行のブックマークだけにリセットを限定する。
	   詳細ページの .oc-ddlbox .oc-bm--detail（絶対配置）まで巻き込まないように `.oc-row` でスコープ。 */
	.oc-row .oc-bm {
		position: static;
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
		align-self: center;
		top: auto;
		right: auto;
	}
	/* 締切ブロック：日付・時間・ピルを横一列。ピルだけ右端へ。 */
	.oc-deadline {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		width: 100%;
		justify-content: flex-start;
	}
	.oc-deadline__main {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}
	.oc-deadline__date { flex-shrink: 0; } /* 日付は縮めない */
	.oc-deadline__note {
		margin: 0;
		text-align: left;
		font-size: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
		flex: 1 1 auto;
	}
	.oc-ddl {
		margin-left: auto; /* 「あと○日」ピルだけ右寄せ */
		flex-shrink: 0;
	}
	.oc-recurring { justify-content: flex-start; }
	/* SP: タイミング文は左寄せに戻す（PC は右寄せ＝.oc-deadline__note と揃え）。
	   2行クランプはPCの規定をそのまま継承（必要十分）。 */
	.oc-timing { text-align: left; }
}

/* ── バナーの PC / SP 切替 ──
   PC：従来通り .ex-bnpos--photo.oc-banner-pc-only ブロックに 1〜3 が集約。
   SP：個別位置に置いた .oc-banner-mobile（中に .ex-ad を持つ）が表示される。
   .ex-ad の見た目（Advertisement ラベル・画像サイズ）は既存の .oc-page .ex-ad / .oc-detail-foot .ex-ad
   の SP 用ルール（max-width:60% / 画像 height:auto）がそのまま効く。 */
.oc-banner-mobile { display: none; }
@media (max-width: 767px) {
	.oc-banner-pc-only { display: none !important; }
	.oc-banner-mobile { display: block; }
}

/* ── バナー：展覧会ページ（.ex-index .ex-bnpos / .ex-ad）と同じ見た目を opencall でも再現 ── */
/* opencall ページでは .ex-index スコープが付かないので、独自に同等の規則を opencall スコープで複製。
   詳細ページの本文内（.oc-detail）に置く SP 用バナー1/2 にも効くよう .oc-detail を含める。 */
.oc-page .ex-ad,
.oc-detail .ex-ad,
.oc-detail-foot .ex-ad { margin: 24px auto; text-align: center; }
.oc-page .ex-ad__label,
.oc-detail .ex-ad__label,
.oc-detail-foot .ex-ad__label {
	font-size: 10px; letter-spacing: .08em;
	color: var(--oc-mute); text-align: center;
	margin: 0 0 4px; line-height: 1.2;
}
.oc-page .ex-ad__slot,
.oc-detail .ex-ad__slot,
.oc-detail-foot .ex-ad__slot { display: block; line-height: 0; }
.oc-page .ex-ad .widget,
.oc-detail .ex-ad .widget,
.oc-detail-foot .ex-ad .widget { margin: 0; line-height: 0; }
.oc-page .ex-ad img,
.oc-detail .ex-ad img,
.oc-detail-foot .ex-ad img {
	height: 100px !important;
	width: auto !important;
	max-width: 100% !important;
	display: block;
	margin: 0 auto;
}
.oc-page .ex-bnpos__delabel,
.oc-detail-foot .ex-bnpos__delabel {
	font-size: 10px; letter-spacing: .08em;
	color: var(--oc-mute); text-align: center;
	margin: 0 0 6px; line-height: 1.2;
}

/* PC: 横一列＋上に単一ラベル（個別ラベルは隠す） */
@media (min-width: 768px) {
	.oc-page .ex-bnpos--photo,
	.oc-detail-foot .ex-bnpos--photo { margin: 46px 0; }
	.oc-page .ex-bnpos__row,
	.oc-detail-foot .ex-bnpos__row {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24px;
		flex-wrap: wrap;
	}
	.oc-page .ex-bnpos__row .ex-ad,
	.oc-detail-foot .ex-bnpos__row .ex-ad { margin: 0; }
	.oc-page .ex-bnpos__row .ex-ad__label,
	.oc-detail-foot .ex-bnpos__row .ex-ad__label { display: none; }
}

/* SP: 中央寄せ・幅60%・画像は自然サイズ・各バナーに個別ラベル */
@media (max-width: 767px) {
	.oc-page .ex-ad,
	.oc-detail .ex-ad,
	.oc-detail-foot .ex-ad { max-width: 60%; margin: 30px auto; }
	.oc-page .ex-ad img,
	.oc-detail .ex-ad img,
	.oc-detail-foot .ex-ad img {
		height: auto !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 auto;
	}
	.oc-page .ex-bnpos__delabel,
	.oc-detail-foot .ex-bnpos__delabel { display: none; }
}

@media (max-width: 600px) {
	.oc-page { padding: 0; }
	/* 検索窓＋絞り込みアイコン＋ブックマークアイコンを横一列に。
	   展覧会一覧 .ctl-row / .extb-m と同じ挙動：検索だけ伸ばし、両アイコンは正方形 42px。 */
	.oc-controls { gap: 8px; flex-wrap: nowrap; }
	.oc-search { flex: 1 1 auto; min-width: 0; max-width: none; height: 42px; }
	.oc-controls .tb-ico { width: 42px; height: 42px; }
	.oc-row { padding: 14px 10px; gap: 6px 0; }
	.oc-detail-foot { padding-left: 10px; padding-right: 10px; } /* 詳細下部の左右余白（SP） */

	.oc-detail { padding: 24px 16px 24px; }
	.oc-ddlbox { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
	/* 応募資格・開催場所などのファクト表：スマホでは「ラベル」を上、「値」を下に縦積みする。 */
	.oc-facts__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* ============================================================
   絞り込みパネル（design_handoff_koubo_filter / 案A 準拠）
   - 検索フォーム右の「絞り込み」ボタン → クリックで PC=ドロップダウン / SP=ボトムシート
   - 接頭辞は `.km-`（reference に揃える）
   ============================================================ */

/* 絞り込み／ブックマーク：展覧会一覧 .tb-ico と同じ見た目（正方形アイコンボタン）。 */
.km-anchor { position: relative; flex: 0 0 auto; }
.oc-controls .tb-ico {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	display: grid;
	place-items: center;
	color: #808080;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.oc-controls .tb-ico:hover { border-color: #808080; color: #333; }
.oc-controls .tb-ico svg { width: 17px; height: 17px; }
/* 絞り込みパネル展開中は反転（黒地・白アイコン） */
.km-btn-filter.is-on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
/* ブックマークモード中はアクティブ強調（黒地・白アイコン） */
.oc-bm-btn.is-on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
/* a:visited 対策 */
.oc-page a.oc-bm-btn:link,
.oc-page a.oc-bm-btn:visited { color: #808080; }
.oc-page a.oc-bm-btn:hover { color: #333; }
.oc-page a.oc-bm-btn.is-on,
.oc-page a.oc-bm-btn.is-on:visited { color: #fff; }
.km-filter-badge {
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	background: #1a1815;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.km-btn-filter.is-on .km-filter-badge { background: #fff; color: #1a1815; }

/* オーバーレイ（バックドロップ＋シート／パネルを包む） */
.km-filter-overlay { position: fixed; inset: 0; z-index: 9000; }
.km-filter-overlay[hidden] { display: none; }
.km-backdrop {
	position: absolute; inset: 0;
	background: rgba(20,18,15,.42);
	animation: km-fade .2s ease;
}

/* チップ */
.km-chip {
	display: inline-flex; align-items: center; gap: 6px;
	height: 38px; padding: 0 16px;
	border-radius: 999px;
	border: 1px solid #d9d7d2;
	background: #fff;
	color: #2a2826;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background .14s, border-color .14s, color .14s;
}
.km-chip:hover { border-color: #b1aea8; }
.km-chip.is-active { background: #1a1815; border-color: #1a1815; color: #fff; }
.km-chip .km-chip-n { font-size: 12px; opacity: .65; font-weight: 600; }
.km-chip svg { width: 15px; height: 15px; }

/* セクション */
.km-fsec { padding: 18px 0; border-top: 1px solid #ededea; }
.km-fsec:first-child { border-top: none; padding-top: 8px; }
.km-fsec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.km-fsec-label { font-size: 13px; font-weight: 700; color: #8a8782; letter-spacing: .03em; }
.km-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* 適用バー */
.km-applybar { display: flex; gap: 12px; align-items: center; }
.km-btn-ghost {
	height: 52px; padding: 0 26px;
	background: #fff;
	border: 1px solid #d9d7d2;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: #2a2826;
	cursor: pointer;
	flex-shrink: 0;
}
.km-btn-ghost:hover { border-color: #b1aea8; }
.km-btn-solid {
	flex: 1; height: 52px; padding: 0 24px;
	background: #1a1815;
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.km-btn-solid:hover { background: #2c2824; }
.km-apply-count { margin-left: 4px; }

/* 共通：フィルターサーフェスの中身（フォーム） */
.km-filter-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ボトムシート（PC / SP 共通）。
   PC でも幅広く見えないように max-width で抑え、margin: auto で中央寄せ。
   SP（max-width 以下）は画面幅いっぱいになる。 */
.km-filter-surface {
	position: absolute; left: 0; right: 0; bottom: 0;
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	border-radius: 22px 22px 0 0;
	display: flex; flex-direction: column;
	max-height: 92%;
	box-shadow: 0 -8px 44px rgba(0,0,0,.20);
	animation: km-slide-up .28s cubic-bezier(.18,.84,.28,1);
}
.km-grip { width: 40px; height: 5px; border-radius: 3px; background: #dcdad5; margin: 11px auto 2px; }
.km-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 22px 12px; }
.km-surf-title { font-size: 20px; font-weight: 800; }
.km-close { background: none; border: none; cursor: pointer; color: #8a8782; display: flex; padding: 4px; }
.km-close:hover { color: #1a1815; }
.km-filter-body { overflow: auto; padding: 4px 22px 8px; flex: 1; min-height: 0; }
.km-filter-foot { padding: 14px 22px; border-top: 1px solid #ededea; flex-shrink: 0; }

/* PC でも SP と同じボトムシート表示に統一（ユーザー要望「下から出す感じで」）。
   以前は @media (min-width:768px) でドロップダウンに切り替えていたが、SP と挙動を揃えるため削除。 */

@keyframes km-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes km-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes km-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ============================================================
   ブックマーク一括削除（design_handoff_bookmark_clear / 案A＋D）
   - 絞り込みの「クリア」（非破壊）とは別物。語と警告色＋「削除」で区別。
   - .bmclr- 接頭辞で名前空間を分離し、既存UIには影響しない。
   ============================================================ */

/* 案A：リスト最下部の控えめテキストリンク */
.bmclr-foot {
	text-align: center;
	padding: 22px 0 6px;
}
.bmclr-link {
	appearance: none;
	border: none;
	background: none;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	letter-spacing: .02em;
	color: #999;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 6px;
	text-decoration: underline;
	text-decoration-color: #e2e2e2;
	text-underline-offset: 4px;
	transition: color .2s, text-decoration-color .2s;
}
.bmclr-link:hover { color: #1a1a1a; text-decoration-color: #ccc; }
.bmclr-link:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; border-radius: 3px; }
.bmclr-link svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* 案D：確認ダイアログ（JS で document.body 直下にポータル） */
.bmclr-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(20, 18, 15, .42);
	display: grid;
	place-items: center;
	padding: 24px;
	animation: bmclr-fade .16s ease;
}
.bmclr-dialog {
	width: 100%;
	max-width: 320px;
	background: #fff;
	border-radius: 14px;
	padding: 24px 22px 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
	animation: bmclr-pop .18s ease;
}
.bmclr-dialog__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: #1a1a1a;
	margin: 0 0 10px;
}
.bmclr-dialog__body {
	font-size: 13px;
	line-height: 1.75;
	color: #333;
	margin: 0 0 20px;
}
.bmclr-dialog__body b { color: #1a1a1a; }
.bmclr-dialog__actions {
	display: flex;
	gap: 10px;
}
.bmclr-btn {
	appearance: none;
	flex: 1;
	height: 46px;
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: opacity .2s, background .2s;
}
.bmclr-btn--cancel {
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
	font-weight: 600;
}
.bmclr-btn--cancel:hover { background: #f4f4f4; }
.bmclr-btn--danger {
	border: none;
	background: #c0291f;
	color: #fff;
	font-weight: 700;
}
.bmclr-btn--danger:hover { background: #a8211a; }
.bmclr-btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

@keyframes bmclr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bmclr-pop  { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.bmclr-overlay,
	.bmclr-dialog { animation: none; }
}