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

/* =================================================
 * 0. デザイントークン
 *
 * 題材は「古書店の書棚」。
 * - ページの地は和紙の灰白。本の装丁（布クロス）の色が映えるよう、地は色を持たない
 * - 作品は書棚（カテゴリ）ごとのクロスの色と箔の色で装丁する（src/data/shelves.json が正本）
 * - 題・見出しは太い明朝（Zen Old Mincho）。本文はゴシック
 * - 影は本の厚みを出す所にだけ使う。カードや枠には付けない
 * ================================================= */
:root {
	--mz-paper:   #f1efe9;   /* ページの地（SWELL color_bg と同じ） */
	--mz-card:    #faf9f5;   /* 紙片・カード */
	--mz-ink:     #22201c;
	--mz-ink-2:   #5a564e;
	--mz-ink-3:   #8b867b;
	--mz-line:    #d8d3c6;
	--mz-link:    #2f4a7a;
	--mz-green:   #2c4a3d;   /* サイトの色（ロゴ・ボタン） */
	--mz-red:     #6a2633;
	--mz-wood:    #7a5a3c;   /* 書棚の板 */
	--mz-cloth:   #2c4a3d;   /* 装丁の既定色。書棚ごとに上書き */
	--mz-foil:    #d6c089;
	--mz-serif:   'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
	--mz-latin:   'EB Garamond', 'Times New Roman', serif;
	--mz-sans:    'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

/* =================================================
 * 1. 全体のトーン
 * ================================================= */
body {
	font-family: var(--mz-sans);
	font-feature-settings: 'palt';
	letter-spacing: 0.02em;
	background: var(--mz-paper);
	color: var(--mz-ink);
}
html, body { overflow-x: clip; }
.l-header__siteName,
.c-postTitle__ttl,
.c-pageTitle,
.p-postList__title,
.post_content h2,
.post_content h3,
.c-secTitle {
	font-family: var(--mz-serif);
	font-weight: 700;
	letter-spacing: 0.04em;
}
.c-postTitle__ttl { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.4; }
.post_content h2 {
	background: none !important;
	border: 0 !important;
	padding: 0 0 0 .9em !important;
	margin: 3.2em 0 1.2em !important;
	font-size: 1.32rem;
	color: var(--mz-ink) !important;
	border-radius: 0 !important;
	position: relative;
}
.post_content h2::after { display: none !important; }
.post_content h2::before {
	content: '' !important; display: block !important;
	position: absolute !important; left: 0 !important; top: .25em !important; bottom: .25em !important;
	width: 4px !important; height: auto !important;
	background: var(--mz-cloth) !important; border: 0 !important; transform: none !important;
}
.post_content h3 { background: none !important; border: 0 !important; padding: 0 !important; font-size: 1.1rem; color: var(--mz-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.3em; }
.swl-marker.mark_yellow { font-weight: 700; }
.mz-orig { font-family: var(--mz-latin); font-style: italic; color: var(--mz-ink-2); letter-spacing: 0; }

/* ヘッダー・フッター */
.l-header { border-bottom: 1px solid var(--mz-line); }
.l-header__bar { display: none !important; }
.c-postTitle__date { display: none !important; }
.c-gnav a { font-size: .9rem; letter-spacing: .06em; }
.l-footer { border-top: 1px solid var(--mz-line); }
.l-footer .copyright { font-size: .75rem; color: var(--mz-ink-3); }
.l-footer .mz-associate { font-size: .72rem; color: var(--mz-ink-3); text-align: center; margin: .4em 0 0; line-height: 1.8; }
.home .c-pageTitle { display: none; }
.home .l-content { padding-top: 0 !important; }

/* ボタン */
.mz-btn {
	display: inline-block; padding: .7em 1.5em; margin: .2em .4em .2em 0;
	background: var(--mz-green); color: #fff !important; text-decoration: none !important;
	font-size: .92rem; letter-spacing: .06em; border: 1px solid var(--mz-green);
	transition: background .2s, color .2s;
}
.mz-btn:hover { background: #1d3329; }
.mz-btn--ghost { background: transparent; color: var(--mz-green) !important; }
.mz-btn--ghost:hover { background: var(--mz-green); color: #fff !important; }
.mz-btn--free { background: var(--mz-cloth); border-color: var(--mz-cloth); }
.mz-btn--shop { background: transparent; color: var(--mz-ink) !important; border-color: var(--mz-ink-3); }
.mz-btn--shop:hover { background: var(--mz-ink); color: #fff !important; }
.mz-btn--lg { padding: .95em 2.2em; font-size: 1.02rem; }

/* =================================================
 * 2. 装丁（本の表紙）
 *    布クロスの地＋箔押しの縦書きの題。背の側に厚みの陰。
 *    tools/build-covers.mjs が同じ見た目を撮ってアイキャッチ（OGP）にする
 * ================================================= */
.mz-book {
	--w: 140px;
	position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between;
	width: var(--w); aspect-ratio: 1 / 1.42; flex: none;
	padding: calc(var(--w) * .12) calc(var(--w) * .1) calc(var(--w) * .1) calc(var(--w) * .14);
	box-sizing: border-box;
	background-color: var(--cloth, var(--mz-cloth));
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
		linear-gradient(90deg, rgba(0,0,0,.32) 0, rgba(0,0,0,.08) 5%, rgba(255,255,255,.06) 7%, transparent 12%);
	color: var(--foil, var(--mz-foil));
	border-radius: 1px 3px 3px 1px;
	box-shadow: 0 1px 1px rgba(0,0,0,.18), 0 6px 14px rgba(40,30,20,.18);
	text-decoration: none;
}
/* 箔の二重罫 */
.mz-book::before {
	content: ''; position: absolute; inset: calc(var(--w) * .05) calc(var(--w) * .05) calc(var(--w) * .05) calc(var(--w) * .09);
	border: 1px solid currentColor; outline: 1px solid currentColor; outline-offset: calc(var(--w) * -.025);
	opacity: .55; pointer-events: none;
}
.mz-book__title {
	writing-mode: vertical-rl; text-orientation: upright;
	font-family: var(--mz-serif); font-weight: 900; line-height: 1.1;
	font-size: calc(var(--w) * .17); letter-spacing: .08em;
	max-height: 78%; overflow: hidden;
	text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.mz-book.is-mid .mz-book__title { font-size: calc(var(--w) * .13); }
.mz-book.is-long .mz-book__title { font-size: calc(var(--w) * .1); letter-spacing: .02em; }
.mz-book__author {
	font-family: var(--mz-serif); font-weight: 500; font-size: calc(var(--w) * .075);
	letter-spacing: .1em; opacity: .9; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip;
}
.mz-book--lg { --w: clamp(170px, 26vw, 230px); }
.mz-book--md { --w: 140px; }
.mz-book--sm { --w: 84px; }
.mz-book--sm::before { outline: 0; }

/* =================================================
 * 3. 作品ページ
 * ================================================= */
.mz-hero {
	display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 44px); align-items: start;
	margin: 0 0 2.4em; padding: clamp(18px, 3vw, 32px);
	background: var(--mz-card); border-top: 3px solid var(--mz-cloth);
}
.mz-hero__book { padding-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
	.mz-hero__book .mz-book { animation: mz-pull .8s cubic-bezier(.2,.7,.2,1) both; }
	@keyframes mz-pull { from { opacity: 0; transform: translateY(10px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
}
.mz-spec { margin: 0; display: grid; gap: 0; font-size: .92rem; }
.mz-spec > div { display: grid; grid-template-columns: 6.5em 1fr; gap: .8em; padding: .55em 0; border-bottom: 1px dotted var(--mz-line); }
.mz-spec dt { color: var(--mz-ink-3); font-size: .82rem; letter-spacing: .08em; }
.mz-spec dd { margin: 0; }
.mz-ease { display: inline-flex; align-items: center; gap: 3px; }
.mz-ease i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--mz-cloth); }
.mz-ease i.on { background: var(--mz-cloth); }
.mz-ease span { margin-left: .5em; }
.mz-opening { margin: 1.2em 0 0; padding: 0; }
.mz-opening blockquote {
	margin: 0; padding: .2em 0 .2em 1em; border-left: 2px solid var(--mz-foil);
	font-family: var(--mz-serif); font-size: 1.06rem; line-height: 1.8; color: var(--mz-ink); background: none;
}
.mz-opening blockquote::before, .mz-opening blockquote::after { display: none; }
.mz-opening figcaption { font-size: .75rem; color: var(--mz-ink-3); margin: .3em 0 0 1.4em; letter-spacing: .1em; }
.mz-read { margin: 1.2em 0 0 !important; }
@media (max-width: 640px) {
	.mz-hero { grid-template-columns: 1fr; justify-items: center; }
	.mz-hero__info { width: 100%; }
}

/* ひとことで言うと */
.mz-lead.cap_box { border: 0; }
.mz-lead .cap_box_ttl { background: var(--mz-cloth) !important; color: #fff; font-family: var(--mz-serif); letter-spacing: .1em; }
.mz-lead .cap_box_content { background: var(--mz-card); border: 1px solid var(--mz-line); border-top: 0; font-size: 1.05rem; }
.mz-lead .cap_box_content p:last-child { margin-bottom: 0; }

.mz-for { margin: 1.6em 0 0; }
.mz-for__ttl { font-family: var(--mz-serif); font-weight: 700; margin: 0 0 .4em !important; letter-spacing: .1em; }
.mz-for ul { list-style: none; padding: 0; margin: 0; }
.mz-for li { position: relative; padding: .3em 0 .3em 1.6em; }
.mz-for li::before { content: ''; position: absolute; left: .2em; top: .95em; width: .6em; height: .35em; border-left: 2px solid var(--mz-cloth); border-bottom: 2px solid var(--mz-cloth); transform: rotate(-45deg); }
.mz-jump { display: flex; flex-wrap: wrap; gap: .4em; margin: 1.6em 0 0; }
.mz-jump a {
	padding: .35em .9em; border: 1px solid var(--mz-line); background: var(--mz-card);
	color: var(--mz-ink-2); font-size: .84rem; text-decoration: none; letter-spacing: .05em;
}
.mz-jump a:hover { border-color: var(--mz-cloth); color: var(--mz-cloth); }

/* 登場人物 */
.mz-people { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--mz-line); }
.mz-people > div { display: grid; grid-template-columns: minmax(7em, 13em) 1fr; gap: 1em; padding: .8em 0; border-bottom: 1px solid var(--mz-line); }
.mz-people dt { font-family: var(--mz-serif); font-weight: 700; }
.mz-people dd { margin: 0; color: var(--mz-ink-2); line-height: 1.8; }
@media (max-width: 600px) { .mz-people > div { grid-template-columns: 1fr; gap: .2em; } }

/* 見どころ */
.post_content .mz-points { list-style: none !important; counter-reset: pt; padding: 0 !important; margin: 0; display: grid; gap: 1em; }
/* SWELL は ol の li に ::marker と左の余白を付けるので消す（番号はこちらの counter で描く） */
.post_content .mz-points > li { list-style: none !important; margin: 0 !important; }
.post_content .mz-points > li::marker { content: ''; }
.mz-points li { counter-increment: pt; position: relative; padding: 1.1em 1.2em 1.1em 3.6em; background: var(--mz-card); border-left: 3px solid var(--mz-cloth); }
.mz-points li::before {
	content: counter(pt); position: absolute; left: 1em; top: .9em;
	font-family: var(--mz-latin); font-size: 1.7rem; line-height: 1; color: var(--mz-cloth);
}
.mz-points__ttl { font-family: var(--mz-serif); font-weight: 700; font-size: 1.08rem; margin: 0 0 .3em !important; }
.mz-points li p:last-child { margin: 0; }

/* 読むコツ */
.mz-tips { display: grid; gap: 1em; }
.mz-tips__item { padding: 1em 1.2em; border: 1px dashed var(--mz-ink-3); background: transparent; }
.mz-tips__ttl { font-weight: 700; margin: 0 0 .3em !important; }
.mz-tips__ttl::before { content: 'コツ'; display: inline-block; margin-right: .6em; padding: 0 .5em; font-size: .72rem; color: #fff; background: var(--mz-ink-2); vertical-align: .15em; letter-spacing: .1em; }
.mz-tips__item p:last-child { margin: 0; }

/* 結末（折りたたみ） */
.mz-spoiler { border: 1px solid var(--mz-line); background: var(--mz-card); }
.mz-spoiler summary { cursor: pointer; padding: .9em 1.2em; font-weight: 700; color: var(--mz-red); list-style: none; }
.mz-spoiler summary::-webkit-details-marker { display: none; }
.mz-spoiler summary::before { content: '＋'; margin-right: .6em; }
.mz-spoiler[open] summary::before { content: '－'; }
.mz-spoiler__body { padding: 0 1.2em 1em; }

/* 作家のカード・診断の誘い・出典 */
.mz-author-card { margin: 3em 0 0; padding: 1.4em; background: var(--mz-card); border: 1px solid var(--mz-line); }
.mz-author-card__ttl { font-size: .78rem; color: var(--mz-ink-3); letter-spacing: .12em; margin: 0 0 .3em !important; }
.mz-author-card__name { font-family: var(--mz-serif); font-size: 1.3rem; font-weight: 700; margin: 0 0 .5em !important; }
.mz-author-card__name .mz-orig { font-size: .95rem; margin-left: .8em; font-weight: 400; }
.mz-author-card__lead { font-size: .94rem; color: var(--mz-ink-2); }
.mz-author-card__more { font-weight: 700; margin: 1.2em 0 .6em !important; font-size: .9rem; }
.mz-shindan-cta { margin: 2.4em 0 0; padding: 1.4em; text-align: center; background: var(--mz-green); color: #fff; }
.mz-shindan-cta__lead { font-family: var(--mz-serif); font-size: 1.08rem; margin: 0 0 .8em !important; }
.mz-shindan-cta .mz-btn { background: #fff; color: var(--mz-green) !important; border-color: #fff; }
.mz-shindan-cta .mz-btn--ghost { background: transparent; color: #fff !important; }
.mz-shindan-cta p:last-child { margin: 0; }
.mz-sources { margin: 3em 0 0; padding: 1em 0 0; border-top: 1px solid var(--mz-line); font-size: .82rem; color: var(--mz-ink-3); }
.mz-sources__ttl { font-weight: 700; margin: 0 0 .3em !important; }
.mz-sources ul { margin: 0 0 .6em; padding-left: 1.2em; }

/* =================================================
 * 4. 一覧（作品カード）
 * ================================================= */
.mz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0 0 1.4em; }
.mz-grid--row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mz-card {
	display: flex; gap: 14px; align-items: center; padding: 12px; background: var(--mz-card);
	border: 1px solid transparent; color: var(--mz-ink) !important; text-decoration: none !important;
	transition: border-color .2s, transform .2s;
}
.mz-card:hover { border-color: var(--mz-line); }
.mz-card:hover .mz-book { transform: translateY(-3px) rotate(-1deg); }
.mz-card .mz-book { transition: transform .25s; }
.mz-card__body { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.mz-card__title { font-family: var(--mz-serif); font-weight: 700; font-size: 1.02rem; line-height: 1.45; }
.mz-card__meta { font-size: .8rem; color: var(--mz-ink-3); }
.mz-card__note { font-size: .74rem; color: var(--mz-red); }
.mz-card[hidden] { display: none; }

/* 作品をさがす（絞り込み） */
.mz-filter { display: flex; flex-wrap: wrap; gap: .8em 1.2em; align-items: end; padding: 1em 1.2em; margin: 0 0 1.4em; background: var(--mz-card); border: 1px solid var(--mz-line); font-size: .88rem; }
.mz-filter label { display: flex; flex-direction: column; gap: .3em; color: var(--mz-ink-2); }
.mz-filter select { padding: .45em .6em; border: 1px solid var(--mz-line); background: #fff; font: inherit; color: var(--mz-ink); min-width: 9em; }
.mz-filter__check { flex-direction: row !important; align-items: center; gap: .5em !important; padding-bottom: .5em; }
.mz-filter__count { margin: 0 0 .5em auto !important; color: var(--mz-ink-3); }

/* 作家の一覧 */
.mz-writers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 24px; }
.mz-writers a { display: grid; grid-template-columns: 1fr auto; gap: .1em .8em; padding: .8em 0; border-bottom: 1px solid var(--mz-line); text-decoration: none !important; color: var(--mz-ink) !important; }
.mz-writers__name { font-family: var(--mz-serif); font-weight: 700; font-size: 1.08rem; }
.mz-writers__life { font-size: .78rem; color: var(--mz-ink-3); align-self: center; }
.mz-writers__works { grid-column: 1 / -1; font-size: .82rem; color: var(--mz-ink-2); }
.mz-writers a:hover .mz-writers__name { color: var(--mz-link); }

/* 作家ページ */
.mz-nameplate { text-align: center; padding: 2em 1em 1.6em; margin: 0 0 2em; border-top: 3px double var(--mz-ink-3); border-bottom: 3px double var(--mz-ink-3); }
.mz-nameplate__name { font-family: var(--mz-serif); font-weight: 900; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: .14em; margin: 0 !important; line-height: 1.3; }
.mz-nameplate__orig { font-family: var(--mz-latin); font-style: italic; font-size: 1.15rem; color: var(--mz-ink-2); margin: .2em 0 0 !important; }
.mz-nameplate__life { font-size: .85rem; color: var(--mz-ink-3); letter-spacing: .1em; margin: .6em 0 0 !important; }
.mz-start { margin: 2em 0; }
.mz-start__ttl { font-family: var(--mz-serif); font-weight: 700; font-size: 1.1rem; margin: 0 0 .6em !important; }
.mz-start__row { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1.2em; align-items: center; }
.mz-start__why { margin: 0 !important; color: var(--mz-ink-2); }
@media (max-width: 640px) { .mz-start__row { grid-template-columns: 1fr; } }

/* 書棚のページ */
.mz-shelf-desc { margin: 0 0 1.6em; color: var(--mz-ink-2); }
.category .c-pageTitle { border-left: 6px solid var(--mz-cloth); padding-left: .6em; }

/* =================================================
 * 5. トップ
 * ================================================= */
.mz-top { padding: clamp(24px, 5vw, 56px) 0 8px; }
.mz-top__kicker { font-family: var(--mz-serif); color: var(--mz-red); letter-spacing: .3em; font-size: .9rem; margin: 0 0 .6em !important; }
.post_content .mz-top__ttl {
	text-wrap: balance;
	font-size: clamp(1.7rem, 4.6vw, 2.9rem) !important; line-height: 1.45 !important; margin: 0 0 .6em !important;
	padding: 0 !important; font-weight: 900;
}
.post_content .mz-top__ttl::before { display: none !important; }
.mz-top__lead { max-width: 38em; color: var(--mz-ink-2); font-size: 1.04rem; }

/* 背表紙の書棚 */
.mz-shelf {
	--row: 206px;
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 3px; /* 行の高さ（背194＋板12）を背景の周期 --row にそろえる */
	margin: 2em 0 0; padding: 0 6px;
	background: linear-gradient(to bottom, transparent calc(var(--row) - 12px), var(--mz-wood) calc(var(--row) - 12px), #5e4329 var(--row));
	background-size: 100% var(--row);
}
.mz-spine {
	height: calc(var(--row) - 12px); display: flex; align-items: flex-end;
	text-decoration: none !important;
}
.mz-spine__b {
	display: flex; justify-content: center; padding: 10px 0;
	width: 30px; height: var(--h); box-sizing: border-box;
	background-color: var(--cloth);
	background-image: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.08) 40%, rgba(0,0,0,.2));
	color: var(--foil); border-radius: 2px 2px 0 0;
	transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.mz-spine__t {
	writing-mode: vertical-rl; text-orientation: upright; font-family: var(--mz-serif); font-weight: 700;
	font-size: 13px; letter-spacing: .05em; overflow: hidden; white-space: nowrap; max-height: 100%;
}
.mz-spine:hover .mz-spine__b, .mz-spine:focus-visible .mz-spine__b { transform: translateY(-14px); }
@media (max-width: 640px) {
	.mz-shelf { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0; }
	.mz-spine { flex: none; }
}

.mz-home-shindan {
	display: grid; grid-template-columns: 1fr auto; gap: 1.2em 2em; align-items: center;
	margin: 3em 0; padding: clamp(22px, 4vw, 40px);
	background: var(--mz-green); color: #fff;
}
.mz-home-shindan__kicker { letter-spacing: .3em; font-size: .82rem; opacity: .8; margin: 0 0 .4em !important; }
.mz-home-shindan__ttl { text-wrap: balance; font-family: var(--mz-serif); font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 700; margin: 0 0 .4em !important; line-height: 1.45; }
.mz-home-shindan__lead { margin: 0 !important; opacity: .9; }
.mz-home-shindan p:last-child { margin: 0; }
.mz-home-shindan .mz-btn { background: #fff; color: var(--mz-green) !important; border-color: #fff; }
@media (max-width: 640px) { .mz-home-shindan { grid-template-columns: 1fr; } }

.mz-shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mz-shelves__item {
	display: flex; flex-direction: column; gap: .4em; padding: 1.2em 1.2em 1.1em 1.5em; position: relative;
	background: var(--mz-card); color: var(--mz-ink) !important; text-decoration: none !important;
}
.mz-shelves__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--cloth); }
.mz-shelves__name { font-family: var(--mz-serif); font-weight: 700; font-size: 1.15rem; }
.mz-shelves__desc { font-size: .86rem; color: var(--mz-ink-2); }
.mz-shelves__books { font-size: .78rem; color: var(--mz-ink-3); }
.mz-shelves__item:hover .mz-shelves__name { color: var(--mz-link); }
.mz-more { margin-top: 1.6em !important; }
.mz-more a { margin-right: 1.4em; }

/* =================================================
 * 6. 文豪診断
 * ================================================= */
.mz-shindan-lead { font-size: 1.05rem; }
.mz-shindan { margin: 1.4em 0 2.4em; }
.mz-q { padding: clamp(20px, 4vw, 36px); background: var(--mz-card); border-top: 3px solid var(--mz-green); }
.mz-q__progress { display: flex; gap: 4px; margin: 0 0 1.2em; }
.mz-q__progress i { flex: 1; height: 4px; background: var(--mz-line); }
.mz-q__progress i.on { background: var(--mz-green); }
.mz-q__num { font-family: var(--mz-latin); font-size: 1rem; color: var(--mz-ink-3); margin: 0 0 .3em !important; letter-spacing: .1em; }
.mz-q__text { font-family: var(--mz-serif); font-weight: 700; font-size: clamp(1.25rem, 3.2vw, 1.6rem); line-height: 1.5; margin: 0 0 1em !important; }
.mz-q__opts { display: grid; gap: 8px; }
.mz-q__opt {
	text-align: left; padding: 1em 1.2em; border: 1px solid var(--mz-line); background: #fff;
	font: inherit; font-size: 1rem; color: var(--mz-ink); cursor: pointer; transition: border-color .15s, background .15s;
}
.mz-q__opt:hover, .mz-q__opt:focus-visible { border-color: var(--mz-green); background: #f4f7f5; outline: none; }
.mz-q__back { margin: 1em 0 0 !important; font-size: .85rem; }
.mz-q__back button { background: none; border: 0; color: var(--mz-link); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.mz-q--done { text-align: center; }
@media (prefers-reduced-motion: no-preference) {
	.mz-q { animation: mz-in .35s ease-out both; }
	@keyframes mz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.mz-types { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.mz-types a { display: flex; flex-direction: column; padding: .8em 1em; background: var(--mz-card); text-decoration: none !important; color: var(--mz-ink) !important; }
.mz-types__name { font-family: var(--mz-serif); font-weight: 700; }
.mz-types__type { font-size: .82rem; color: var(--mz-ink-2); }

/* 結果ページ */
.mz-result { text-align: center; padding: 2.4em 1em; margin: 0 0 1.6em; background: var(--mz-green); color: #fff; }
.mz-result__kicker { letter-spacing: .2em; font-size: .88rem; opacity: .85; margin: 0 !important; }
.mz-result__name { font-family: var(--mz-serif); font-weight: 900; font-size: clamp(2.2rem, 7vw, 3.4rem); letter-spacing: .12em; margin: .2em 0 !important; line-height: 1.3; }
.mz-result__type { font-family: var(--mz-serif); font-size: 1.15rem; margin: 0 !important; }
.mz-picks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.mz-picks li { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 1em; align-items: center; }
.mz-picks__lead { margin: 0 !important; font-size: .94rem; color: var(--mz-ink-2); }
@media (max-width: 640px) { .mz-picks li { grid-template-columns: 1fr; } }
.mz-result__act { text-align: center; margin-top: 2em !important; }
.mz-share { text-align: center; font-size: .9rem; }

/* =================================================
 * 7. SWELL の既定に勝たせる所
 * ================================================= */
/* 一覧の ul/ol に SWELL が付ける点・番号を消す */
.post_content :is(.mz-types, .mz-writers, .mz-picks) { list-style: none !important; padding-left: 0 !important; }
.post_content :is(.mz-types, .mz-writers, .mz-picks) > li { margin: 0 !important; padding-left: 0 !important; }
.post_content :is(.mz-types, .mz-writers, .mz-picks) > li::before { content: none !important; display: none !important; }
.post_content :is(.mz-types, .mz-writers, .mz-picks) > li::marker { content: ''; }
/* 作家ページ・診断の結果ページは本文の名札・結果が見出しの役目。SWELL のページ題を重ねない */
.l-mainContent:has(.mz-nameplate) .c-pageTitle,
.l-mainContent:has(.mz-result) .c-pageTitle { display: none; }
/* 関連記事カードの日付（時事性を持たせない） */
.p-relatedPosts .p-postList__meta, .p-postList__meta .c-postTimes { display: none !important; }