@charset "UTF-8";
/*
Theme Name: SWELL CHILD (名画サイト)
Template: swell
Version: 0.1.0
Description: 名画を一作品一ページで紹介するサイト用の SWELL 子テーマ。カスタムCSS/PHPはすべてここに置く。
*/

/* =================================================
 * 0. デザイントークン
 *
 * 題材は「美術館の展示室」。
 * - 廊下（ページの地）は明るい石の色。クリームにしない
 * - 壁（作品を掛ける面）は展示室＝時代区分ごとに色を変える
 * - キャプション（ラベル）は紙の白
 * - 文字は墨。リンクは群青。壁色のどれとも被らない
 * - 見出し・作品名だけ明朝。本文はゴシック
 * ================================================= */
:root {
	--mg-stone:   #f3f2ee;   /* ページの地（SWELL color_bg と同じ） */
	--mg-paper:   #fbfaf7;   /* ラベルの紙 */
	--mg-ink:     #1e1e1c;
	--mg-ink-2:   #5b5955;
	--mg-ink-3:   #8c8983;
	--mg-line:    #d9d6cf;
	--mg-link:    #2f4f8f;   /* 群青 */
	--mg-wall:    #4b5a57;   /* 既定の壁色。展示室ごとに上書き */
	--mg-thumb:   #2b2e33;   /* 一覧サムネの地 */
	--mg-serif:   'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
	--mg-latin:   'Cormorant Garamond', 'Times New Roman', serif;
	--mg-sans:    'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}
/* 展示室ごとの壁色（カテゴリ slug と一致） */
.mg-room-ancient       { --mg-wall: #3b3f3a; }
.mg-room-renaissance   { --mg-wall: #6b2634; }
.mg-room-baroque       { --mg-wall: #22324a; }
.mg-room-modern        { --mg-wall: #4b5a57; }
.mg-room-impression    { --mg-wall: #5f6e78; }
.mg-room-japan-classic { --mg-wall: #4a3b2e; }
.mg-room-japan-modern  { --mg-wall: #2f3a3e; }
.mg-wall--ancient       { --mg-wall: #3b3f3a; }
.mg-wall--renaissance   { --mg-wall: #6b2634; }
.mg-wall--baroque       { --mg-wall: #22324a; }
.mg-wall--modern        { --mg-wall: #4b5a57; }
.mg-wall--impression    { --mg-wall: #5f6e78; }
.mg-wall--japan-classic { --mg-wall: #4a3b2e; }
.mg-wall--japan-modern  { --mg-wall: #2f3a3e; }

/* =================================================
 * 1. 全体のトーン
 * ================================================= */
body {
	font-family: var(--mg-sans);
	font-feature-settings: 'palt';
	letter-spacing: 0.02em;
}
.l-header__siteName,
.c-postTitle__ttl,
.c-pageTitle,
.p-postList__title,
.post_content h2,
.post_content h3,
.c-widget__title,
.c-secTitle {
	font-family: var(--mg-serif);
	font-weight: 700;
	letter-spacing: 0.04em;
}
.l-header__siteName { font-size: 1.35rem; letter-spacing: 0.12em; }
.c-postTitle__ttl { font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.45; }

/* SWELL の h2 装飾（帯・下線など）を外し、細い罫だけの静かな見出しにする */
.post_content h2 {
	background: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mg-line) !important;
	padding: 0 0 .4em !important;
	margin: 3em 0 1.2em !important;
	font-size: 1.3rem;
	color: var(--mg-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.post_content h2::before, .post_content h2::after { display: none !important; }
.post_content h3 {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 2em 0 .6em !important;
	font-size: 1.1rem;
	color: var(--mg-ink) !important;
}
.post_content h3::before, .post_content h3::after { display: none !important; }
.post_content { font-size: 1.02rem; line-height: 1.95; }
.post_content p { margin-bottom: 1.4em; }

/* マーカー: 黄色。SWELL の marker_type=thin（文字の下1/3を塗る）に合わせ、色だけ落ち着かせる */
.swl-marker.mark_yellow { font-weight: 700; }

/* =================================================
 * 2. 壁とラベル（作品ページ先頭の wp:html ブロック）
 * ================================================= */
.mg-wall {
	background: var(--mg-wall);
	padding: clamp(28px, 5vw, 64px) var(--mg-gutter, 24px) 0;
	margin: 0 0 2.5em;
	text-align: center;
}
/* 画面幅いっぱいに広げる（SWELL の .alignfull は使わない。親の幅の取り方が違いずれる）。
   100vw はスクロールバー分だけ右にはみ出すので、html 側で横方向を切る */
.post_content .mg-wall {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
html, body { overflow-x: clip; }
.mg-wall__art { margin: 0; display: grid; place-items: center; }
.mg-wall__art img {
	max-height: min(78vh, 880px);
	width: auto;
	max-width: 100%;
	height: auto;
	box-shadow: 0 18px 50px rgba(0,0,0,.45);
	border-radius: 0 !important;
}
@media (prefers-reduced-motion: no-preference) {
	.mg-wall__art img { animation: mg-hang .9s ease-out both; }
	@keyframes mg-hang { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
/* 壁に貼るキャプション。美術館のラベルの体裁 */
.mg-label {
	background: var(--mg-paper);
	color: var(--mg-ink);
	text-align: left;
	max-width: 1120px;
	margin: clamp(24px, 4vw, 48px) auto 0;
	padding: 20px clamp(20px, 3vw, 40px) 22px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 40px;
	align-items: end;
	font-size: .9rem;
	line-height: 1.7;
}
@media (max-width: 700px) { .mg-label { grid-template-columns: 1fr; } }
.mg-label__artist { color: var(--mg-ink-2); }
.mg-label__artist a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mg-line); }
.mg-label__title { font-family: var(--mg-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.4; margin-top: 2px; }
.mg-label__en { font-family: var(--mg-latin); font-style: italic; font-weight: 500; color: var(--mg-ink-2); margin-left: .6em; font-size: .95em; }
.mg-label__title .mg-label__en { display: block; margin: 2px 0 0; font-size: .85em; }
.mg-label__meta { color: var(--mg-ink-2); text-align: right; font-size: .85rem; line-height: 1.8; }
.mg-label__meta b { color: var(--mg-ink); font-weight: 400; }
@media (max-width: 700px) { .mg-label__meta { text-align: left; } }
.mg-num { font-family: var(--mg-latin); font-variant-numeric: lining-nums tabular-nums; }

/* =================================================
 * 3. 「何がすごいのか」キャプションボックス
 *    SWELL のキャプションボックスを、枠なし・紙色の静かな箱に寄せる
 * ================================================= */
.mg-lead.swell-block-capbox {
	border: 0 !important;
	background: var(--mg-paper);
	border-left: 4px solid var(--mg-wall) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.mg-lead .cap_box_ttl {
	background: none !important;
	color: var(--mg-ink-3) !important;
	font-size: .78rem !important;
	letter-spacing: .18em;
	padding: 14px 20px 0 !important;
	border: 0 !important;
}
.mg-lead .cap_box_content {
	padding: 6px 20px 16px !important;
	font-family: var(--mg-serif);
	font-size: 1.08rem;
	line-height: 2;
	border: 0 !important;
}
.mg-lead .cap_box_content p { margin: 0; }

/* =================================================
 * 4. 見どころ（同じ画像の部分拡大。追加画像なし）
 * ================================================= */
.mg-spots { display: grid; gap: 28px; margin: 0 0 1em; }
.mg-spot { display: grid; grid-template-columns: 168px 1fr; gap: 20px; align-items: start; }
@media (max-width: 480px) { .mg-spot { grid-template-columns: 1fr; } }
.mg-spot__crop { aspect-ratio: 1; overflow: hidden; background: var(--mg-wall); margin: 0; }
.mg-spot__crop img {
	width: 100%; height: 100%; object-fit: cover;
	object-position: var(--focus, 50% 50%);
	transform: scale(var(--zoom, 2));
	transform-origin: var(--focus, 50% 50%);
	border-radius: 0 !important; box-shadow: none !important;
}
.mg-spot h3 { margin: 0 0 .4em !important; }
.mg-spot p { margin: 0; font-size: .95rem; }

/* =================================================
 * 5. 基本データ・出典
 * ================================================= */
.mg-facts { border-top: 1px solid var(--mg-line); margin: 0 0 1em; font-size: .95rem; }
.mg-facts > div { display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--mg-line); }
.mg-facts dt { color: var(--mg-ink-2); font-weight: 400; }
.mg-facts dd { margin: 0; }
.mg-sources { font-size: .85rem; color: var(--mg-ink-2); }
.mg-sources ul { margin: 0 0 .6em; padding-left: 1.2em; }
.mg-credit { font-size: .8rem; color: var(--mg-ink-3); }

/* =================================================
 * 6. 一覧（SWELL カード）
 *    絵は切り抜かず、暗い地に全体を見せる
 * ================================================= */
.p-postList__thumb { background: var(--mg-thumb); }
.p-postList__thumb img, .p-postList__thumb .c-postThumb__figure img {
	object-fit: contain !important;
	padding: 8%;
	background: var(--mg-thumb);
}
.p-postList__title { font-size: 1rem; line-height: 1.5; }
/* 抜粋は「作者、制作年」の1行 */
.p-postList__excerpt { font-size: .82rem; color: var(--mg-ink-2); line-height: 1.6; margin-top: 4px; }
.p-postList__meta { font-size: .75rem; }

/* 作家一覧。SWELL のタグクラウド既定は小さくて詰まるので、読める一覧に組み直す */
.mg-artists.wp-block-tag-cloud { display: block; columns: 3; column-gap: 40px; margin-top: 8px; }
@media (max-width: 760px) { .mg-artists.wp-block-tag-cloud { columns: 2; } }
@media (max-width: 480px) { .mg-artists.wp-block-tag-cloud { columns: 1; } }
.mg-artists.wp-block-tag-cloud a {
	display: block; break-inside: avoid;
	font-size: 15px !important; line-height: 1.6;
	padding: 7px 0; border-bottom: 1px solid var(--mg-line);
	color: var(--mg-ink); text-decoration: none;
}
.mg-artists.wp-block-tag-cloud a:hover { color: var(--mg-link); }
.mg-artists .tag-link-count { color: var(--mg-ink-3); font-size: 13px; margin-left: .4em; font-family: var(--mg-latin); }

/* カテゴリ（展示室）アーカイブの見出しに壁色の帯 */
.c-pageTitle, .l-mainContent__inner > .c-pageTitle { position: relative; padding-left: 18px; }
.c-pageTitle::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 6px; background: var(--mg-wall); }

/* =================================================
 * 7. ヘッダー・フッター
 * ================================================= */
/* ヘッダーバー（キャッチフレーズ・RSS・検索アイコンの帯）は出さない */
.l-header__bar { display: none !important; }
/* 記事タイトル横の大きな日付バッジは出さない（時事性を持たせない） */
.c-postTitle__date { display: none !important; }
.l-header { border-bottom: 1px solid var(--mg-line); }
.c-gnav a { font-size: .9rem; letter-spacing: .06em; }
.l-footer { border-top: 1px solid var(--mg-line); }
.l-footer .copyright { font-size: .75rem; color: var(--mg-ink-3); }

/* 角丸・影を全体的に抑える（額縁のない展示） */
.post_content img, .c-postThumb__figure, .p-postList__thumb, .swell-block-capbox, .swell-block-faq__item { border-radius: 0 !important; }