@charset "utf-8";
/* =========================================================================
   ミタレビ 作品カタログ

   主役は「小さい画像が密に並ぶこと」。
   列数: スマホ2 / iPad縦4 / iPad横5 / PC6

   画像は切り抜かない・文字を重ねない・縦横比を維持する。
   そのため height は指定せず、width:100% / height:auto だけで収める。

   このファイルは wp_head 優先度20で出力される（Muum のインラインCSSより後）。
   !important は使わない。同じ詳細度で後勝ちにする。
   ========================================================================= */

/*
 * 確定色（2026-09-28 13:48 boone 承認・シャンパンゴールド）。
 * それ以前のチャコール背景・深紅ボタンは撤回。
 *
 *   ページ背景 #FBF7EE / カード・フォーム #FFFDF8 / 補助面 #F3EBDD
 *   本文・見出し #342B20 / 補助文字 #6E5D43 / 罫線 #D7C39B
 *   金 #B68A36（ハイライト #E8CC8A・影 #8A6526）
 *   リンク #805C20（ホバー #624515）
 *   主要ボタン #F2DEA9 → #D5AF5D → #EDD49B ／ 文字 #342B20 ／ 細い濃金の枠
 *
 * 本文や補助説明を薄い金色にしない（濃いブラウンで読みやすさを保つ）。
 * 本文の書体は既存の日本語ゴシックのまま（見本の明朝は使わない）。
 */
:root {
	--mtr-gap: 6px;
	--mtr-side: 20px;          /* スマホの左右余白。既定ルール */
	--mtr-bg: #FBF7EE;
	--mtr-panel: #FFFDF8;
	--mtr-soft: #F3EBDD;
	--mtr-line: #D7C39B;
	--mtr-ink: #342B20;        /* 本文・見出し */
	--mtr-sub: #6E5D43;        /* 補助文字 */
	--mtr-accent: #B68A36;     /* 金 */
	--mtr-gold: #B68A36;
	--mtr-gold-hi: #E8CC8A;
	--mtr-gold-dark: #8A6526;
	--mtr-link: #805C20;
	--mtr-link-hover: #624515;
	--mtr-bg-soft: #F3EBDD;
	--mtr-field: #FFFDF8;      /* 入力欄 */
	--mtr-btn: linear-gradient(180deg, #F2DEA9 0%, #D5AF5D 52%, #EDD49B 100%);
}

/* カタログ関連の画面はシャンパンの地色でつなぐ */
body.mtr-catalog-page,
body.mtr-home-page,
body.mtr-editorial-page { background: var(--mtr-bg); }

.mtr-cat-wrap,
.mtr-work-wrap { background: var(--mtr-bg); color: var(--mtr-ink); }

/* 金の主要ボタン（サイト共通） */
.mtr-goldbtn,
.mtr-work__cta,
.mtr-home__feature-go a,
.mtr-search button {
	background: var(--mtr-btn);
	border: 1px solid var(--mtr-gold-dark);
	color: var(--mtr-ink);
	text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.mtr-goldbtn:hover, .mtr-goldbtn:focus,
.mtr-work__cta:hover, .mtr-work__cta:focus,
.mtr-home__feature-go a:hover, .mtr-home__feature-go a:focus,
.mtr-search button:hover, .mtr-search button:focus {
	background: linear-gradient(180deg, #EDD49B 0%, #C99F49 52%, #E3C588 100%);
	color: var(--mtr-ink);
}

/*
 * ミタレビ内の「作品情報を見る」。カードの**主ボタン**（2026-09-28 boone 指示 v12）。
 * 金色は使うが、FANZAへ行く主操作（.mtr-work__cta）より一段弱い塗りにして、
 * 同じ強さのボタンが画面に並ばないようにする。
 * 置き場所ごとの大きさは、それぞれのCSS（catalog / discover / mtr-saved / home）で足す。
 */
.mtr-go {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 5px 8px;
	border: 1px solid var(--mtr-gold-dark, #8A6526);
	border-radius: 6px;
	background: linear-gradient(180deg, #F8EED4 0%, #EDDCAE 100%);
	color: #4A3A18;
	font-weight: 700;
	font-size: .75rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.mtr-go:hover,
.mtr-go:focus {
	background: linear-gradient(180deg, #F3E5C0 0%, #E2CB93 100%);
	color: #3A2C10;
	text-decoration: none;
}
/* 出さないときは隠す（JSが hidden を付ける場所でも効くようにしておく） */
.mtr-go[hidden] { display: none; }

/* フォーカス枠。背景と区別でき、周囲で見切れない */
.mtr-cat-wrap a:focus-visible,
.mtr-cat-wrap button:focus-visible,
.mtr-cat-wrap input:focus-visible,
.mtr-cat-wrap summary:focus-visible,
.mtr-work-wrap a:focus-visible,
.mtr-home a:focus-visible,
.mtr-home button:focus-visible,
.mtr-home input:focus-visible,
.mtr-home summary:focus-visible {
	outline: 2px solid var(--mtr-gold-dark);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ 外枠 */

.mtr-cat-wrap,
.mtr-work-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 12px var(--mtr-side) 56px;
	color: var(--mtr-ink);
}

.mtr-cat-wrap *,
.mtr-work-wrap * { box-sizing: border-box; }

/* ------------------------------------------------------------ 見出し */

.mtr-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0 0 10px;
}

.mtr-head__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.35;
	letter-spacing: .01em;
	/* 検索語をそのまま出すので、区切りの無い長い文字でも折り返す（2026-10-06 追加） */
	min-width: 0;
	word-break: normal;
	overflow-wrap: anywhere;
}

.mtr-head__count {
	margin: 0;
	font-size: .8125rem;
	color: var(--mtr-sub);
}

/* ------------------------------------------------------------ 探す道具 */

.mtr-cat-tools { margin: 0 0 10px; }

.mtr-search {
	display: flex;
	gap: 8px;
	margin: 0 0 8px;
}

.mtr-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	font-size: 1rem;              /* 16px 未満だとiOSで拡大される */
	background: var(--mtr-field);
	color: var(--mtr-ink);
}

.mtr-search button {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 8px 18px;
	border-radius: 6px;
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
}

/* PR表示。画像には重ねない */
.mtr-pr {
	margin: 0 0 8px;
	padding: 6px 9px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	background: var(--mtr-bg-soft);
	font-size: .75rem;
	line-height: 1.5;
	color: var(--mtr-sub);
}

.mtr-pr__tag {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--mtr-sub);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
}

/* ------------------------------------------------------------ 画像の並び */

.mtr-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));   /* スマホ 2列 */
	gap: var(--mtr-gap);
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

/*
 * 1コマが公式画像（147px幅）より大きくなりすぎると粗く見える。
 * 列数は boone 指定のまま、並び全体の最大幅で1コマを 150〜190px に収める。
 */
.mtr-grid { max-width: 1120px; }

.mtr-card {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;          /* 中身の最小幅で列を広げない */
}

/*
 * 公式の縦型表紙は 147x200（比 147/200）。これが公式で使える最大サイズなので、
 * 枠を大きくしすぎると粗くなる。枠の比率を表紙に合わせ、object-fit:contain で
 * 切り抜かずに収める。比率の違う画像が来ても余白が付くだけで、切れない。
 */
.mtr-card__link {
	display: block;
	line-height: 0;                /* 画像下の余白を消す */
	background: var(--mtr-soft);
	border-radius: 3px;
	overflow: hidden;
	aspect-ratio: 147 / 200;       /* 読み込み前後で行がずれない */
}

/* 切り抜かない。縦横比をそのまま出す */
.mtr-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	border: 0;
	object-fit: contain;           /* cover にすると切り抜きになるので使わない */
}

/* aspect-ratio 未対応ブラウザでも画像は正しい比率で出る */
@supports not (aspect-ratio: 1) {
	.mtr-card__link { aspect-ratio: auto; }
	.mtr-card__img { height: auto; }
}

.mtr-card__link:focus-visible { outline: 3px solid var(--mtr-accent); outline-offset: 2px; }

/* v12：色と太さは .mtr-go が持つ。ここは大きさと余白だけ */
.mtr-card__info {
	min-height: 40px;              /* 指で押せる高さ */
	padding: 2px 6px;
}

.mtr-empty {
	margin: 24px 0;
	padding: 20px;
	border: 1px dashed var(--mtr-line);
	border-radius: 6px;
	text-align: center;
	color: var(--mtr-sub);
}

/* ------------------------------------------------------------ ページ送り */

.mtr-pager { margin: 0 0 12px; }

.mtr-pager ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}

.mtr-pager a,
.mtr-pager span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	font-size: .875rem;
	text-decoration: none;
	color: var(--mtr-ink);
	background: var(--mtr-panel);
}

.mtr-pager .current {
	border-color: var(--mtr-gold-dark);
	background: var(--mtr-gold-hi);
	color: var(--mtr-ink);
	font-weight: 700;
}

/* ------------------------------------------------------------ 語の一覧 */

.mtr-cat-browse { margin: 26px 0 0; }

.mtr-terms { margin: 0 0 22px; }

.mtr-terms__title {
	margin: 0 0 8px;
	font-size: 1rem;
	line-height: 1.4;
}

.mtr-terms__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtr-terms__list a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 36px;
	padding: 4px 10px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	background: var(--mtr-panel);
	font-size: .8125rem;
	line-height: 1.3;
	text-decoration: none;
	color: var(--mtr-ink);
}

.mtr-terms__list a:hover,
.mtr-terms__list a:focus { border-color: var(--mtr-gold); color: var(--mtr-gold); }

.mtr-terms__count { font-size: .6875rem; color: var(--mtr-sub); }

/* ------------------------------------------------------------ クレジット */

.mtr-credit {
	margin: 28px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--mtr-line);
	font-size: .75rem;
	line-height: 1.7;
	color: var(--mtr-sub);
}

.mtr-credit a { color: var(--mtr-sub); }

.mtr-credit__note { display: block; }

.mtr-credit__row { margin: 0 0 14px; }

.mtr-about__title {
	margin: 0 0 6px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--mtr-ink);
}

.mtr-about__list {
	margin: 0;
	padding: 0 0 0 1.1em;
}

.mtr-about__list li { margin: 0 0 3px; }

.mtr-about__links { margin: 8px 0 0; }
.mtr-about__links a { color: var(--mtr-sub); }

/* =========================================================================
   作品情報（2026-09-28 v2: 大きな表 → 短い概要＋分類情報）

   上部は「小さな公式画像 ＋ 主要情報 ＋ 主操作」。
   出演者は右の表に詰め込まず、下に独立したまとまりとして置く。
   これで画像の横に大きな縦の空白ができない。
   ========================================================================= */

.mtr-work-wrap { color: var(--mtr-ink); }

.mtr-work-back { margin: 0 0 10px; font-size: .8125rem; }
.mtr-work-back a { color: var(--mtr-sub); text-decoration: none; }
.mtr-work-back a:hover, .mtr-work-back a:focus { color: var(--mtr-gold); }

.mtr-work__title {
	margin: 0 0 10px;
	font-size: 1rem;              /* スマホ 16px */
	font-weight: 700;
	line-height: 1.5;
	word-break: normal;
	overflow-wrap: anywhere;      /* 長い作品名も全文を出す */
}

.mtr-work__pr {
	margin: 0 0 14px;
	padding: 6px 10px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	background: var(--mtr-panel);
	font-size: .75rem;
	line-height: 1.5;
	color: var(--mtr-ink);
}

.mtr-work__pr b {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--mtr-gold-dark);
	color: #fff;
	font-size: .6875rem;
}

/* ---- 概要 ---- */

.mtr-work__summary { display: grid; gap: 14px; margin: 0 0 22px; }

.mtr-work__visual { min-width: 0; }

/* 画像の枠。縦横比はそのまま、全体を出す（切り抜かない） */
.mtr-work__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 160px;             /* スマホ */
	max-height: 210px;
	padding: 4px;
	border: 1px solid var(--mtr-line);
	border-radius: 5px;
	background: var(--mtr-soft);
}

.mtr-work__img {
	display: block;
	max-width: 100%;
	max-height: 200px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.mtr-work__stage--pending {
	width: 160px;
	height: 210px;
	border-style: dashed;
	font-size: .75rem;
	color: var(--mtr-sub);
}

.mtr-work__facts { min-width: 0; }

/* ラベルと値。広い表セルと大きな行高を作らない */
.mtr-work__list { margin: 0 0 14px; }

.mtr-work__fact {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	gap: 8px;
	padding: 5px 0;
	border-bottom: 1px solid var(--mtr-line);
	font-size: .8125rem;
	line-height: 1.5;
}

.mtr-work__fact dt { margin: 0; color: var(--mtr-sub); }
.mtr-work__fact dd { margin: 0; }
.mtr-work__fact a { color: var(--mtr-ink); }
.mtr-work__fact a:hover, .mtr-work__fact a:focus { color: var(--mtr-gold); }

.mtr-unknown { color: var(--mtr-sub); }

.mtr-work__actions { margin: 0 0 8px; }

/* 主操作。全幅の赤い帯にしない */
.mtr-work__cta {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 8px 20px;
	border-radius: 8px;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
}

.mtr-work__cta span { font-size: .6875rem; font-weight: 400; opacity: .85; }



.mtr-work__cta--off {
	background: var(--mtr-panel);
	color: var(--mtr-sub);
	border: 1px solid var(--mtr-line);
}

.mtr-work__stamp { margin: 0; font-size: .6875rem; color: var(--mtr-sub); }

/* ---- ジャンル・出演者 ---- */

.mtr-work__block { margin: 0 0 22px; }

.mtr-work__h2 {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--mtr-line);
	font-size: .9375rem;
	font-weight: 700;
}

.mtr-work__count { font-size: .75rem; font-weight: 400; color: var(--mtr-sub); }

/* 丸ボタンで埋め尽くさない。控えめなリンクで、間隔で区切る */
.mtr-work__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtr-work__terms a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 2px 0;
	font-size: .8125rem;
	line-height: 1.4;
	text-decoration: none;
	color: var(--mtr-ink);
	border-bottom: 1px solid var(--mtr-line);
}

.mtr-work__terms a:hover,
.mtr-work__terms a:focus { color: var(--mtr-gold); border-bottom-color: currentColor; }

.mtr-work__more { margin: 8px 0 0; }

.mtr-work__more > summary {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 4px 12px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	background: var(--mtr-panel);
	font-size: .8125rem;
	color: var(--mtr-ink);
	cursor: pointer;
	list-style: none;
}

.mtr-work__more > summary::-webkit-details-marker { display: none; }
.mtr-work__more > summary::before { content: "＋"; margin-right: 6px; color: var(--mtr-sub); }
.mtr-work__more[open] > summary::before { content: "−"; }
.mtr-work__more[open] > summary { margin-bottom: 8px; }
.mtr-work__more > summary:focus-visible { outline: 2px solid var(--mtr-gold); outline-offset: 2px; }

.mtr-work__related h2 { margin-bottom: 10px; }

/* ========================================================== 画面幅ごと */

/* iPad 縦（768px）を含む … 4列 */
@media screen and (min-width: 600px) {
	:root { --mtr-gap: 8px; --mtr-side: 24px; }
	.mtr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mtr-head__title { font-size: 1.375rem; }
	/* 600px以上でも画像と基本情報は横並び。画像は180〜220pxを上限に */
	.mtr-work__summary { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
	.mtr-work__stage { max-width: 200px; max-height: 250px; }
	.mtr-work__img { max-height: 240px; }
	.mtr-work__stage--pending { width: 200px; height: 250px; }
	.mtr-work__title { font-size: 1.125rem; }
	.mtr-work__cta { width: auto; min-width: 16em; }
	.mtr-work__fact { grid-template-columns: 5.5em minmax(0, 1fr); }
}

/* iPad 横（1024px） … 5列 */
@media screen and (min-width: 1024px) {
	.mtr-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.mtr-work__title { font-size: 1.25rem; }

	/* 左に画像、中央に基本情報と主操作、右に「次の一本を探す」 */
	.mtr-work__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(288px, 320px);
		gap: 18px;
		align-items: start;
	}
	.mtr-next { margin: 0; }
	.mtr-next__grid { max-width: none; }
}

/* PC … 6列 */
@media screen and (min-width: 1280px) {
	:root { --mtr-gap: 10px; --mtr-side: 32px; }
	.mtr-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 読み込み中のちらつきを抑える */
@media (prefers-reduced-motion: reduce) {
	.mtr-card__link, .mtr-card__info { transition: none; }
}

/* =========================================================================
   新トップ（作品カタログ版）  front-page-catalog.php / inc/front-catalog.php

   主役は表紙画像の並び。上部の「探す入口」は高さを取りすぎないこと。
   スマホで、画像の並びが画面の 1 つ目のスクロール内に現れるのを目安にする。
   ========================================================================= */

.mtr-top-head { margin: 0 0 10px; }

.mtr-top-head__title {
	margin: 0 0 4px;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: .02em;
}

.mtr-top-lede {
	margin: 0 0 2px;
	font-size: .875rem;
	line-height: 1.6;
}

.mtr-top-lede strong { font-weight: 700; }

.mtr-top-sub {
	margin: 0;
	font-size: .75rem;
	line-height: 1.6;
	color: var(--mtr-sub);
}

/* ---- 画像の並び ---- */

.mtr-top-works { margin: 0; }

.mtr-top-works__title {
	margin: 0 0 8px;
	font-size: .9375rem;
	line-height: 1.3;
}

.mtr-top-more { margin: 4px 0 0; text-align: center; }

.mtr-top-more__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 24px;
	border: 1px solid var(--mtr-ink);
	border-radius: 8px;
	background: #fff;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--mtr-ink);
}

.mtr-top-more__link:hover,
.mtr-top-more__link:focus { background: var(--mtr-ink); color: #fff; }

/* ---- 掲載の方針 ---- */

.mtr-top-policy { margin: 26px 0 0; }

.mtr-top-policy__title {
	margin: 0 0 6px;
	font-size: .875rem;
	font-weight: 600;
}

.mtr-top-policy ul {
	margin: 0;
	padding: 0 0 0 1.1em;
	font-size: .75rem;
	line-height: 1.8;
	color: var(--mtr-sub);
}

/* ---- 画面幅ごと ---- */

@media screen and (min-width: 600px) {
	.mtr-top-head__title { font-size: 1.5rem; }
	.mtr-top-lede { font-size: .9375rem; }
	.mtr-top-sub { font-size: .8125rem; }
	.mtr-top-works__title { font-size: 1rem; margin: 0 0 6px; }

	/*
	 * iPad 以上は「探す入口」を横に2つ並べ、各1段に抑える。
	 * 縦に積むと表紙画像の並びが 1 画面目から押し出されるため。
	 */
	.mtr-top-finder {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 4px 20px;
		margin: 10px 0 6px;
	}
	.mtr-top-finder .mtr-search { grid-column: 1 / -1; margin: 0 0 4px; }
	.mtr-rail { margin: 0; min-width: 0; }
	.mtr-rail__list { max-height: 82px; }   /* 2 段まで。あふれた語は「すべて見る」へ */
}

@media screen and (min-width: 1024px) {
	/* 見出し・語・すべて見る を 1 行に収める */
	.mtr-rail { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: start; gap: 2px 10px; }
	.mtr-rail__title { margin: 8px 0 0; }
	.mtr-rail__more { grid-column: 2; margin: 2px 0 0; }
}


/* =========================================================================
   絞り込み（ファセット）  inc/filters.php

   PC・iPad横 … 左 200px 固定 ＋ 右に作品一覧
   iPad縦・スマホ … 「絞り込み」ボタンで開く（チェックボックスだけ。JS 無しで動く）

   見出しの直下に選択肢を置き、間に大きな空白を作らない。
   ========================================================================= */

.mtr-cat-layout { display: block; }

.mtr-cat-main { min-width: 0; }

/* ---- 開閉ボタン（スマホ・iPad縦） ---- */

.mtr-filter-switch { position: absolute; opacity: 0; pointer-events: none; }

.mtr-filter-open {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 44px;
	margin: 0 0 8px;
	padding: 8px 14px;
	border: 1px solid var(--mtr-line);
	border-radius: 8px;
	background: var(--mtr-panel);
	font-size: .875rem;
	font-weight: 600;
	color: var(--mtr-ink);
	cursor: pointer;
	user-select: none;
}

.mtr-filter-open__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--mtr-accent);
	color: #fff;
	font-size: .6875rem;
}

.mtr-filter-open::after { content: "を開く"; font-weight: 400; font-size: .8125rem; }

/* 閉じているあいだは中身を出さない */
.mtr-cat-side__body { display: none; }
.mtr-filter-switch:checked ~ .mtr-cat-side .mtr-cat-side__body,
.mtr-cat-side:has(.mtr-filter-switch:checked) .mtr-cat-side__body { display: block; }

/* :has() が無いブラウザ向け（チェックボックスは aside の外に置いてある） */
.mtr-filter-switch:checked + .mtr-cat-side .mtr-cat-side__body { display: block; }
.mtr-filter-switch:checked + .mtr-cat-side .mtr-filter-open::after { content: "を閉じる"; }

/* ---- 絞り込み本体 ---- */

.mtr-filters {
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid var(--mtr-line);
	border-radius: 8px;
	background: var(--mtr-bg-soft);
}

.mtr-filters__title {
	margin: 0 0 8px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.mtr-facet { border-top: 1px solid var(--mtr-line); }
.mtr-facet:first-of-type { border-top: 0; }

.mtr-facet__head {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 2px 0;
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.mtr-facet__head::-webkit-details-marker { display: none; }

.mtr-facet__head::before {
	content: "＋";
	width: 1em;
	font-weight: 400;
	color: var(--mtr-sub);
}

.mtr-facet[open] > .mtr-facet__head::before { content: "−"; }

.mtr-facet__on {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--mtr-accent);
	color: #fff;
	font-size: .625rem;
}

/* 見出しのすぐ下に選択肢。空白を空けない */
.mtr-facet__list {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	max-height: 260px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mtr-facet__item {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 3px 4px;
	border-radius: 5px;
	font-size: .8125rem;
	line-height: 1.35;
	text-decoration: none;
	color: var(--mtr-ink);
}

.mtr-facet__item:hover,
.mtr-facet__item:focus { background: var(--mtr-soft); }

.mtr-facet__box {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid var(--mtr-gold-dark);
	border-radius: 3px;
	background: #fff;
}

.mtr-facet__item.is-on .mtr-facet__box {
	/* 選択中は「薄い金の背景＋濃い枠＋チェック」。色の違いだけに頼らない */
	border-color: var(--mtr-gold-dark);
	background: var(--mtr-gold-hi);
	position: relative;
}

.mtr-facet__item.is-on .mtr-facet__box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid var(--mtr-gold-dark);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.mtr-facet__item.is-on { background: #FCF4E2; }

.mtr-facet__item.is-on { font-weight: 600; }

.mtr-facet__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mtr-facet__count { flex: 0 0 auto; font-size: .6875rem; color: var(--mtr-sub); }

/* 語の総数（初期表示は一部なので、全部で何語あるか分かるようにする） */
.mtr-facet__total {
	margin-left: auto;
	font-size: .6875rem;
	font-weight: 400;
	color: var(--mtr-sub);
}

/* もっと表示（文字入力をさせずに残りへ到達する） */
.mtr-facet__more { margin: 0 0 8px; }

.mtr-facet__more-head {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 2px 4px;
	font-size: .75rem;
	color: var(--mtr-accent);
	cursor: pointer;
	list-style: none;
}

.mtr-facet__more-head::-webkit-details-marker { display: none; }
.mtr-facet__more-head::before { content: "＋"; }
.mtr-facet__more[open] > .mtr-facet__more-head::before { content: "−"; }
.mtr-facet__more[open] > .mtr-facet__more-head { color: var(--mtr-sub); }
.mtr-facet__more-n { font-size: .6875rem; color: var(--mtr-sub); }

/* 残りは長くなるので、その中だけで巻き取る */
.mtr-facet__list--rest { max-height: 220px; }

/* このページの条件（ジャンル別・出演者別から入ったとき） */
.mtr-picked__chip--page {
	border-style: dashed;
	background: var(--mtr-bg-soft);
}

/* ---- 選択中の条件 ---- */

.mtr-picked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 10px;
}

.mtr-picked__count { margin: 0; font-size: .8125rem; color: var(--mtr-sub); }
.mtr-picked__count strong { font-size: 1rem; color: var(--mtr-ink); }

.mtr-picked__list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtr-picked__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 32px;
	padding: 3px 9px;
	border: 1px solid var(--mtr-accent);
	border-radius: 999px;
	background: var(--mtr-panel);
	font-size: .75rem;
	line-height: 1.3;
	text-decoration: none;
	color: var(--mtr-ink);
}

.mtr-picked__kind {
	font-size: .625rem;
	color: var(--mtr-sub);
}

.mtr-picked__x { font-size: .875rem; color: var(--mtr-accent); }

.mtr-picked__clear { margin: 0; font-size: .75rem; }
.mtr-picked__clear a { color: var(--mtr-sub); }

/* =========================================================================
   カードの短い説明（作品名・出演者・発売日）
   ========================================================================= */

.mtr-card__meta { padding: 1px 2px 0; }

.mtr-card__name {
	margin: 0;
	font-size: .75rem;
	line-height: 1.35;
	color: var(--mtr-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;         /* 2行で止める。並びの高さを揃える */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mtr-card__cast,
.mtr-card__date {
	margin: 1px 0 0;
	font-size: .6875rem;
	line-height: 1.3;
	color: var(--mtr-sub);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 「作品情報」は行き先が違う（サイト内）ので線で区切る */
.mtr-card__info {
	min-height: 32px;
	margin: 3px 0 0;
	border-top: 1px solid var(--mtr-line);
	font-size: .6875rem;
}

/* =========================================================================
   特集枠（1段だけ。通常の一覧と背景・枠・見出しで区別する）

   装飾は .mtr-feature__deco と CSS 変数だけで作ってある。
   画像素材を使うときは --mtr-feature-deco に background を差し替える。
   ========================================================================= */

.mtr-feature {
	--mtr-feature-bg: #fff6f8;
	--mtr-feature-line: #f0c9d4;
	--mtr-feature-deco: linear-gradient(90deg, var(--mtr-accent), #ff7aa2);
	position: relative;
	margin: 0 0 18px;
	border: 1px solid var(--mtr-feature-line);
	border-radius: 10px;
	background: var(--mtr-feature-bg);
	overflow: hidden;
}

.mtr-feature__deco {
	height: 4px;
	background: var(--mtr-feature-deco);
}

.mtr-feature__inner { padding: 10px 10px 12px; }

.mtr-feature__title {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.3;
	letter-spacing: .02em;
}

.mtr-feature__note {
	margin: 2px 0 0;
	font-size: .75rem;
	color: var(--mtr-sub);
}

.mtr-feature .mtr-grid { margin: 8px 0 0; }

/*
 * 特集は1段だけ。あふれた分は出さない。
 * 1行目は grid-template-rows: auto で高さを持たせ、2行目以降だけ 0 にする
 * （grid-auto-rows だけだと1行目まで潰れる）。
 */
.mtr-grid--feature {
	grid-template-rows: auto;
	grid-auto-rows: 0;
	overflow: hidden;
}

.mtr-feature--empty {
	--mtr-feature-bg: #fafafb;
	--mtr-feature-line: var(--mtr-line);
	--mtr-feature-deco: repeating-linear-gradient(45deg, #ddd 0 6px, #eee 6px 12px);
}

.mtr-feature__empty {
	margin: 0;
	padding: 10px;
	font-size: .75rem;
	line-height: 1.6;
	color: var(--mtr-sub);
}

/* =========================================================================
   ページ送り（上は小さく）
   ========================================================================= */

.mtr-pager--compact { margin: 0 0 8px; }

.mtr-pager--compact ul { justify-content: flex-start; gap: 4px; }

/*
 * 2026-10-03：押せる範囲を 44×44px 以上にする（32px は指で押しづらい）。
 * 文字の大きさと余白は小さいまま（見た目は「小さいページ送り」のまま）。
 */
.mtr-pager--compact a,
.mtr-pager--compact span {
	min-width: 44px;
	min-height: 44px;
	padding: 0 7px;
	font-size: .75rem;
	border-radius: 5px;
}

/* =========================================================================
   画面幅ごと（絞り込み）
   ========================================================================= */

/* iPad横・PC … 左 200px の絞り込みを常に開く */
@media screen and (min-width: 1024px) {
	.mtr-cat-layout {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 20px;
		align-items: start;
	}
	.mtr-cat-layout--nofilter { display: block; }

	.mtr-filter-open { display: none; }
	.mtr-cat-side__body { display: block; }
	.mtr-cat-side { position: sticky; top: 12px; }
	.mtr-filters { margin: 0; }
	.mtr-facet__list { max-height: 210px; }

	/* 左に 200px 使うぶん、右の列数は据え置きで1コマを少し小さくする */
	.mtr-grid { max-width: none; }
	.mtr-grid--feature { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media screen and (min-width: 1280px) {
	.mtr-cat-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
	.mtr-grid--feature { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* iPad縦は 4 列のまま、特集も 4 列 */
@media screen and (min-width: 600px) and (max-width: 1023px) {
	.mtr-grid--feature { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mtr-filter-open { width: auto; min-width: 200px; }
}

/* スマホ … 特集も 2 列 */
@media screen and (max-width: 599px) {
	.mtr-grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================================
   一覧・検索でも使う共通部品（2026-09-28 に home.css から移動）

   発売区分・並べ替え・画像準備中・特集への入口は、トップだけでなく
   作品一覧・条件付き一覧・検索結果でも出る。トップ用CSSに置いていたため
   一覧で未整形になっていた。
   ========================================================================= */

/* 0件の語は薄く。ただし押せる（解除・切り替えのため） */
.mtr-facet__item.is-zero { opacity: .55; }

/* 発売区分 */
.mtr-facet--release { border-top: 0; }
.mtr-facet__head--plain { cursor: default; }
.mtr-facet__head--plain::before { content: ""; width: 0; }

/*
 * 発売区分。直下は li なので、幅の配分は li に当てる（a だけに当てても効かない）。
 * 「すべて／発売済み／発売予定」を単語の途中で折らない。狭いときは1つずつ全幅の行にする。
 */
.mtr-release {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.mtr-release > li { flex: 1 1 5.5em; min-width: 0; }

.mtr-release__item {
	display: flex;
	width: 100%;
	white-space: nowrap;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 3px 6px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	font-size: .75rem;
	text-decoration: none;
	color: inherit;
}

.mtr-release__item.is-on { border-color: var(--mtr-gold-dark); background: var(--mtr-gold-hi); color: var(--mtr-ink); font-weight: 700; }

/* 並べ替え */
.mtr-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: .75rem; }
.mtr-sort__label { color: var(--mtr-sub, #BBBAC3); }
.mtr-sort__item {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 2px 10px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
}
.mtr-sort__item.is-on { border-color: var(--mtr-gold-dark); background: var(--mtr-gold-hi); color: var(--mtr-ink); font-weight: 700; }

/* 画像が未公開の作品 */
.mtr-card__pending {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 147 / 200;
	border: 1px dashed var(--mtr-line);
	border-radius: 3px;
	font-size: .75rem;
	color: var(--mtr-sub);
	text-align: center;
}



/* =========================================================================
   「編集部の特集から探す」（2026-09-28 に editorial.css から移動）

   一覧・検索でも出るので、記事用CSSではなく共通CSSに置く。
   置き場所が違ったために、一覧では未整形のテキストが縦に並んでいた。
   ========================================================================= */

.mtr-ed-entry {
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid var(--mtr-line);
	border-left: 3px solid var(--mtr-accent);
	border-radius: 6px;
	background: var(--mtr-panel);
}

.mtr-ed-entry__title {
	margin: 0 0 6px;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--mtr-ink);
}

.mtr-ed-entry__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtr-ed-entry__list a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 3px 11px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	background: var(--mtr-bg);
	font-size: .75rem;
	line-height: 1.3;
	text-decoration: none;
	color: var(--mtr-ink);
}

.mtr-ed-entry__list a:hover,
.mtr-ed-entry__list a:focus { border-color: var(--mtr-gold); color: var(--mtr-gold); }


/* =========================================================================
   カードの中身（どの画面でも同じ）

   2026-09-28 boone 指示。トップ・作品カタログ一覧・検索結果・分類別一覧・
   作品詳細の「次の一本を探す」のすべてで
       画像 → 女優名（1行）→ 作品説明（1行）→ 作品情報
   発売日はカードに出さない（値は作品情報ページと保存データに残っている）。
   ========================================================================= */

.mtr-card__lines { padding: 3px 2px 0; }

/*
 * 女優名・作品説明とも1行で切る。全文はDOMに残るので読み上げでは最後まで読まれる。
 * 女優名が未登録のときは空のまま出すので、min-height で1行ぶんの高さを確保して
 * 同じ並びの「作品情報」の位置がカードごとにずれないようにする。
 */
.mtr-card__cast,
.mtr-card__desc {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mtr-card__cast {
	min-height: 1.3em;
	font-size: .6875rem;        /* 11px */
	line-height: 1.3;
	color: var(--mtr-sub);
}

.mtr-card__desc {
	margin-top: 1px;
	font-size: .75rem;          /* 12px */
	line-height: 1.3;
	color: var(--mtr-ink);
}

/* v12：作品名も作品情報ページへのリンク。地の文と同じ見え方で、押すと下線が出る */
.mtr-card__name { color: inherit; text-decoration: none; }
.mtr-card__name:hover,
.mtr-card__name:focus { color: var(--mtr-link-hover); text-decoration: underline; }

/* v12：主ボタン。作品名のすぐ下に置き、カードの幅いっぱいにする */
.mtr-card__info {
	min-height: 34px;
	margin: 5px 0 0;
	padding: 5px 8px;
	border-top: 0;
	font-size: .75rem;          /* 12px */
	line-height: 1.3;
}

/* 発売日を含む旧3行は出していない（関数は残してある） */
.mtr-card__meta { display: none; }

/* =========================================================================
   次の一本を探す（作品詳細）
   ========================================================================= */

.mtr-next { margin: 0 0 22px; }

/* 画像を大きくしすぎない。3列・最大2段 */
.mtr-next__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 360px;
	gap: 8px;
}

.mtr-next__fallback { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.mtr-next__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 4px 14px;
	border: 1px solid var(--mtr-line);
	border-radius: 999px;
	background: var(--mtr-panel);
	font-size: .8125rem;
	text-decoration: none;
	color: var(--mtr-ink);
}
.mtr-next__link:hover, .mtr-next__link:focus { border-color: var(--mtr-gold-dark); color: var(--mtr-link-hover); }

/* =========================================================================
   作品詳細の3領域（v3 第5項）

   スマホ … 作品名 → PR → 画像＋基本情報の2列 → ボタン → 取得日時
            → ジャンル → 出演者 → 次の一本を探す
   1024px以上 … 左に画像、中央に基本情報と主操作、右に「次の一本を探す」
   ========================================================================= */

.mtr-work__layout { display: block; }
.mtr-work__main { min-width: 0; }

/* スマホから画像と基本情報を横に並べる */
.mtr-work__summary {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 11px;
	margin: 0 0 12px;
	align-items: start;
}

.mtr-work__visual { min-width: 0; }
.mtr-work__facts { min-width: 0; }

.mtr-work__stage { max-width: 132px; max-height: 180px; }
.mtr-work__img { max-height: 170px; }
.mtr-work__stage--pending { width: 132px; height: 180px; }

/* 項目名は必要な幅に留め、値側は縮められるようにする */
.mtr-work__fact {
	grid-template-columns: 5em minmax(0, 1fr);
	gap: 7px;
	padding: 4px 0;
	font-size: .8125rem;
	line-height: 1.4;
}

.mtr-work__fact dd { overflow-wrap: anywhere; }   /* 長い作品IDでもはみ出さない */

.mtr-work__list { margin: 0; }

.mtr-work__actions { margin: 0 0 6px; }
.mtr-work__cta { width: 100%; }
.mtr-work__stamp { margin: 0 0 18px; }

/* 文字を大きくした・極端に狭いときは、縮小せず縦に戻す */
@media screen and (max-width: 359px) {
	.mtr-work__summary { grid-template-columns: minmax(0, 1fr); }
	.mtr-work__stage { max-width: 160px; }
}

/* =========================================================================
   作品詳細の幅ごと（ファイル末尾に置いて、上のスマホ用指定を確実に上書きする）
   ========================================================================= */

/* 600px以上 … 画像と基本情報は横並びのまま、画像は180〜220pxを上限に */
@media screen and (min-width: 600px) {
	.mtr-work__summary { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
	.mtr-work__stage { max-width: 200px; max-height: 250px; }
	.mtr-work__img { max-height: 240px; }
	.mtr-work__stage--pending { width: 200px; height: 250px; }
	.mtr-work__fact { grid-template-columns: 5.5em minmax(0, 1fr); }
	.mtr-work__cta { width: auto; min-width: 16em; }
}

/* 600〜1023px（iPad縦など） … 「次の一本を探す」は下に置く。
   ここで幅を絞ると右半分が空くので、画像の大きさは変えずに1段6列にして幅いっぱいに並べる。 */
@media screen and (min-width: 600px) and (max-width: 1023px) {
	.mtr-next__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; }
}

/* 1024px以上 … 左に画像、中央に基本情報と主操作、右に「次の一本を探す」 */
@media screen and (min-width: 1024px) {
	.mtr-work__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(288px, 320px);
		gap: 18px;
		align-items: start;
	}
	.mtr-work__main { min-width: 0; }
	.mtr-next { margin: 0; }
	.mtr-next__grid { max-width: none; }
	/* 右の枠が高くても、中央の情報とボタンの間隔は広げない */
	.mtr-work__summary { align-items: start; }
}

/* =========================================================================
   ランキングの順位と出典（2026-09-28）

   順位は**画像の外側**に小さな金色で置く。公式画像に文字を重ねない。
   番号は取得したときの位置そのもので、抜けたぶんを繰り上げていない。
   ========================================================================= */

.mtr-card__rank {
	margin: 0 0 2px;
	padding: 0 2px;
	font-size: .8125rem;          /* 13px */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--mtr-gold-dark);
	font-variant-numeric: tabular-nums;
}

/* 出典は上に1行だけ。詳しいことは「順位について」を開いたときに出す */
.mtr-rank-note { margin: 0 0 10px; }

.mtr-rank-note__lead {
	margin: 0;
	font-size: .6875rem;          /* 11px */
	line-height: 1.5;
	color: var(--mtr-sub);
}

.mtr-rank-note__more { margin: 1px 0 0; font-size: .6875rem; color: var(--mtr-sub); }
.mtr-rank-note__more > summary { cursor: pointer; display: inline-block; padding: 2px 0; }
.mtr-rank-note__more > summary:hover { color: var(--mtr-accent); }

.mtr-rank-note__list {
	margin: 4px 0 0;
	padding: 8px 10px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	background: var(--mtr-soft);
	line-height: 1.6;
}

.mtr-rank-note__row { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 0 10px; }
.mtr-rank-note__row > dt { margin: 0; font-weight: 700; color: var(--mtr-ink); }
.mtr-rank-note__row > dd { margin: 0; }

/* 狭い画面では見出しと中身を縦に */
@media screen and (max-width: 599px) {
	.mtr-rank-note__row { grid-template-columns: minmax(0, 1fr); }
	.mtr-rank-note__row > dd { margin: 0 0 4px; }
}

/* 段の見出しの横に添える短い説明 */
.mtr-home__section-note {
	margin-left: 8px;
	font-size: .6875rem;
	font-weight: 400;
	color: var(--mtr-sub);
	white-space: nowrap;
}

/* ランキング画面の左の欄に出す案内 */
.mtr-cat-side__note {
	margin: 0 0 8px;
	padding: 7px 9px;
	border: 1px solid var(--mtr-line);
	border-radius: 6px;
	background: var(--mtr-soft);
	font-size: .6875rem;
	line-height: 1.5;
	color: var(--mtr-sub);
}

/* =========================================================================
   作品カード（2026-10-01 v2）
   画像 → 発売日／発売予定 → 作品名2行 → 出演者 → 「作品情報を見る」
   大きなボタンを2段重ねない。「あとで見る」は小さく、押す場所は44px。
   ========================================================================= */

.mtr-card__when {
	margin: 0 0 2px; min-height: 1.3em;
	font-size: .6875rem; line-height: 1.3; color: var(--mtr-sub);
}
.mtr-card__up {
	display: inline-block; margin-left: 6px; padding: 0 6px;
	font-weight: 700; color: #6B4E13; background: var(--mtr-gold-hi);
	border-radius: 999px;
}

/* 作品名は2行まで */
.mtr-card__desc {
	white-space: normal;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	overflow: hidden; min-height: 2.6em;
}

/* 「作品情報を見る」は簡潔なリンク（大きな金色ボタンにしない） */
.mtr-grid .mtr-card__info.mtr-go,
.mtr-grid .mtr-card__info {
	min-height: 0; margin: 4px 0 0; padding: 0;
	background: none; border: 0; border-radius: 0;
	font-size: .75rem; font-weight: 400; color: var(--mtr-ink);
	text-decoration: underline; text-underline-offset: 2px;
	justify-content: flex-start; width: auto;
}
.mtr-grid .mtr-card__info:hover, .mtr-grid .mtr-card__info:focus-visible {
	color: var(--mtr-link-hover);
}

/* 「あとで見る」は画像リンクとは別の兄弟要素。押す場所は44px */
.mtr-grid .mtr-card__save { margin: 6px 0 0; }
.mtr-grid .mtr-card__save .mtr-save { min-height: 44px; font-size: .75rem; }

/* ===================================================================
 * 出演者・ジャンルの「登録作品をくらべる」（2026-10-03 追加）
 * 広い画面は表、せまい画面は1件ずつの札。中身は同じ。
 * =================================================================== */
.mtr-taxcmp {
	margin: 0 0 22px;
	padding: 16px 18px 14px;
	border: 1px solid var(--mtr-line, #E7DCC7);
	border-radius: 12px;
	background: var(--mtr-bg-soft, #F3EBDD);
}
.mtr-taxcmp__h {
	margin: 0 0 8px;
	font-size: 1.125rem;
	line-height: 1.4;
	font-weight: 700;
}
.mtr-taxcmp__lead {
	margin: 0 0 14px;
	font-size: .875rem;
	line-height: 1.75;
}
.mtr-taxcmp__table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--mtr-line, #E7DCC7);
	border-radius: 8px;
	overflow: hidden;
	font-size: .8125rem;
	line-height: 1.6;
}
.mtr-taxcmp__table th,
.mtr-taxcmp__table td {
	padding: 8px 10px;
	border-top: 1px solid var(--mtr-line, #E7DCC7);
	text-align: left;
	vertical-align: top;
	box-sizing: border-box;
}
.mtr-taxcmp__table thead th {
	border-top: 0;
	background: var(--mtr-bg-soft, #F3EBDD);
	font-size: .75rem;
	white-space: nowrap;
}
.mtr-taxcmp__table tbody th {
	font-weight: 600;
	overflow-wrap: anywhere;
}
.mtr-taxcmp__table tbody td { white-space: nowrap; }
/* 品番は作品名の下。行き先があるときだけリンクにする */
.mtr-taxcmp__cid {
	display: block;
	margin-top: 3px;
	font-size: .6875rem;
	font-weight: 400;
	color: var(--mtr-sub, #756B5B);
	overflow-wrap: anywhere;
}
.mtr-taxcmp__cid a { color: inherit; }
.mtr-taxcmp__note {
	margin: 10px 0 0;
	font-size: .75rem;
	line-height: 1.7;
	color: var(--mtr-sub, #756B5B);
}
.mtr-taxcmp__cards { display: none; }

/* 広い画面では、スマホ用の開閉そのものを出さない */
.mtr-taxcmp__fold { display: none; }

/*
 * せまい画面は表をやめ、**閉じた開閉**の中に札を入れる。
 * 表のままだと5列が横に流れ、10件ぶんを開いたままだと一覧が押し下げられる。
 * 中身は最初のHTMLに入っているので、開かなくても読み取りとリンクはたどれる。
 */
@media (max-width: 767px) {
	.mtr-taxcmp { padding: 14px 14px 12px; }
	.mtr-taxcmp__table { display: none; }
	.mtr-taxcmp__fold { display: block; }

	.mtr-taxcmp__summary {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		padding: 10px 14px;
		border: 1px solid var(--mtr-line, #E7DCC7);
		border-radius: 8px;
		background: #fff;
		font-size: .875rem;
		font-weight: 700;
		cursor: pointer;
		box-sizing: border-box;
		list-style: none;
	}
	/* 既定の三角を消して、自前の印を出す（向きを開閉に合わせる） */
	.mtr-taxcmp__summary::-webkit-details-marker { display: none; }
	.mtr-taxcmp__summary::after {
		content: '';
		margin-left: auto;
		width: 9px; height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
	}
	.mtr-taxcmp__fold[open] .mtr-taxcmp__summary::after {
		transform: rotate(-135deg) translate(-2px, -2px);
	}
	.mtr-taxcmp__foldBody { padding-top: 10px; }

	.mtr-taxcmp__cards {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.mtr-taxcmp__card {
		margin: 0 0 10px;
		padding: 10px 12px;
		border: 1px solid var(--mtr-line, #E7DCC7);
		border-radius: 8px;
		background: #fff;
	}
	.mtr-taxcmp__card:last-child { margin-bottom: 0; }
	.mtr-taxcmp__name {
		margin: 0 0 8px;
		font-size: .875rem;
		line-height: 1.5;
		font-weight: 600;
		overflow-wrap: anywhere;
	}
	.mtr-taxcmp__card dl { margin: 0; }
	.mtr-taxcmp__row {
		display: flex;
		gap: 10px;
		padding: 3px 0;
		font-size: .8125rem;
		line-height: 1.6;
	}
	.mtr-taxcmp__row dt {
		/* 「公式サンプル」が6文字。5.5em だと2行に折れるので余裕を持たせる */
		flex: 0 0 6.6em;
		margin: 0;
		color: var(--mtr-sub, #756B5B);
	}
	.mtr-taxcmp__row dd { margin: 0; overflow-wrap: anywhere; }
}

/* ===================================================================
 * 「選ぶための案内」（2026-10-03 追加）
 * 広い画面は内訳をそのまま、せまい画面は閉じた開閉の中に入れる。
 * =================================================================== */
.mtr-taxguide {
	margin: 0 0 22px;
	padding: 16px 18px 14px;
	border: 1px solid var(--mtr-line, #E7DCC7);
	border-radius: 12px;
}
.mtr-taxguide__h { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.4; font-weight: 700; }
.mtr-taxguide__lead { margin: 0 0 14px; font-size: .875rem; line-height: 1.75; }
.mtr-taxguide__wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.mtr-taxguide__group { min-width: 0; }
.mtr-taxguide__h3 {
	margin: 0 0 6px; font-size: .8125rem; font-weight: 700;
	color: var(--mtr-sub, #756B5B);
}
.mtr-taxguide__list { margin: 0; padding: 0; list-style: none; }
.mtr-taxguide__item {
	display: grid; grid-template-columns: minmax(0, 1fr) 72px;
	align-items: center; gap: 10px; padding: 2px 0;
	font-size: .8125rem; line-height: 1.6;
}
.mtr-taxguide__item a, .mtr-taxguide__item > span:first-child {
	display: flex; align-items: baseline; gap: 8px;
	min-width: 0; overflow-wrap: anywhere;
}
.mtr-taxguide__n { margin-left: auto; padding-left: 8px; color: var(--mtr-sub, #756B5B); white-space: nowrap; font-size: .75rem; }
/* 件数の多さを横棒で示すだけ。順位・人気ではない */
.mtr-taxguide__bar { display: block; height: 6px; border-radius: 999px; background: var(--mtr-bg-soft, #F3EBDD); }
.mtr-taxguide__bar i { display: block; height: 100%; border-radius: 999px; background: #C9B189; }
.mtr-taxguide__entries {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none;
}
.mtr-taxguide__entries a {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 14px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 999px;
	background: var(--mtr-bg-soft, #F3EBDD);
	font-size: .8125rem; font-weight: 600; text-decoration: none;
	box-sizing: border-box;
}
.mtr-taxguide__entries a:hover { background: #fff; }
.mtr-taxguide__note { margin: 12px 0 0; font-size: .75rem; line-height: 1.7; color: var(--mtr-sub, #756B5B); }
.mtr-taxguide__fold { display: none; }

@media (max-width: 767px) {
	.mtr-taxguide { padding: 14px 14px 12px; }
	.mtr-taxguide__wide { display: none; }
	.mtr-taxguide__fold { display: block; }
	.mtr-taxguide__summary {
		display: flex; align-items: center; gap: 8px;
		min-height: 48px; padding: 10px 14px;
		border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 8px;
		background: #fff; font-size: .875rem; font-weight: 700;
		cursor: pointer; box-sizing: border-box; list-style: none;
	}
	.mtr-taxguide__summary::-webkit-details-marker { display: none; }
	.mtr-taxguide__summary::after {
		content: ''; margin-left: auto; width: 9px; height: 9px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
	}
	.mtr-taxguide__fold[open] .mtr-taxguide__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
	.mtr-taxguide__foldBody { padding-top: 12px; display: grid; gap: 14px; }
	.mtr-taxguide__group { padding: 0; }
}

/* ===================================================================
 * トップの「作品をくらべて探す」（2026-10-03 追加）
 * =================================================================== */
.mtr-cmpentry {
	margin: 0 0 18px;
	padding: 14px 16px 12px;
	border: 1px solid var(--mtr-line, #E7DCC7);
	border-radius: 12px;
	background: var(--mtr-bg-soft, #F3EBDD);
}
.mtr-cmpentry__h { margin: 0 0 4px; font-size: 1rem; line-height: 1.4; font-weight: 700; }
.mtr-cmpentry__note { margin: 0 0 10px; font-size: .8125rem; line-height: 1.6; color: var(--mtr-sub, #756B5B); }
.mtr-cmpentry__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.mtr-cmpentry__group:last-child { margin-bottom: 0; }
.mtr-cmpentry__label {
	flex: 0 0 auto; font-size: .75rem; font-weight: 700;
	color: var(--mtr-sub, #756B5B); min-width: 5.5em;
}
.mtr-cmpentry__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mtr-cmpentry__a {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 14px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 999px;
	background: #fff; font-size: .8125rem; font-weight: 600;
	text-decoration: none; white-space: nowrap; box-sizing: border-box;
}
.mtr-cmpentry__a:hover { background: var(--mtr-bg-soft, #F3EBDD); }

@media (max-width: 767px) {
	.mtr-cmpentry__label { min-width: 100%; }
}

/* ===================================================================
 * スマホ向けの短い説明（2026-10-03 追加）
 * 広い画面は長い説明、せまい画面は1行。中身はどちらも最初のHTMLにある。
 * =================================================================== */
.mtr-taxcmp__short,
.mtr-taxguide__short { display: none; }
.mtr-taxcmp__leadFull,
.mtr-taxguide__leadFull {
	margin: 0 0 12px;
	font-size: .8125rem;
	line-height: 1.75;
}
@media (max-width: 767px) {
	.mtr-taxcmp__lead,
	.mtr-taxguide__lead { display: none; }
	.mtr-taxcmp__short,
	.mtr-taxguide__short {
		display: block;
		margin: 0 0 12px;
		font-size: .875rem;
		line-height: 1.7;
	}
	/* 注記は開閉の中に入れる（外には出さない） */
	.mtr-taxcmp > .mtr-taxcmp__note,
	.mtr-taxguide > .mtr-taxguide__note { display: none; }
}
@media (min-width: 768px) {
	.mtr-taxcmp__leadFull,
	.mtr-taxguide__leadFull { display: none; }
}

/* 関係する編集部の特集（2026-10-03 追加） */
.mtr-taxfeat { margin: 14px 0 0; }
.mtr-taxfeat__h {
	margin: 0 0 6px; font-size: .8125rem; font-weight: 700;
	color: var(--mtr-sub, #756B5B);
}
.mtr-taxfeat__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mtr-taxfeat__list a { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.mtr-taxfeat__why {
	display: block; font-size: .75rem; line-height: 1.6;
	color: var(--mtr-sub, #756B5B);
}

/* 保存0件のときの案内（トップ） */
.mtr-cmpentry__none {
	margin: 8px 0 0; font-size: .8125rem; line-height: 1.7;
	color: var(--mtr-sub, #756B5B);
}

/* ===================================================================
 * 記事一覧 /blog/（2026-10-03 追加）
 * 本文を長く並べず、画像・題名・種別・日付・読むリンクのコンパクトなカード。
 * =================================================================== */
.mtr-blog__tabs { margin: 0 0 12px; }
.mtr-blog__tabs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mtr-blog__tab {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 16px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 999px;
	background: #fff; font-size: .875rem; font-weight: 600;
	text-decoration: none; box-sizing: border-box;
}
.mtr-blog__tab.is-on { background: var(--mtr-bg-soft, #F3EBDD); border-color: #C9B189; }

.mtr-blog__filter {
	margin: 0 0 14px; padding: 12px 14px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 10px;
	background: var(--mtr-bg-soft, #F3EBDD);
}
.mtr-blog__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.mtr-blog__row:last-child { margin-bottom: 0; }
.mtr-blog__filter input[type="search"] {
	flex: 1 1 220px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 8px;
	font-size: 16px; box-sizing: border-box; background: #fff;
}
.mtr-blog__sel { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; }
.mtr-blog__sel select {
	min-height: 44px; padding: 0 8px; max-width: 13em;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 8px;
	background: #fff; font-size: .875rem; box-sizing: border-box;
}
.mtr-blog__go {
	min-height: 44px; padding: 0 18px;
	border: 1px solid #C9B189; border-radius: 999px;
	background: #C9B189; color: #fff; font-size: .875rem; font-weight: 700;
	cursor: pointer; box-sizing: border-box;
}
.mtr-blog__go--sub { background: #fff; color: inherit; }
.mtr-blog__clear { font-size: .8125rem; text-decoration: underline; }
.mtr-blog__count { margin: 0 0 10px; font-size: .875rem; font-weight: 700; }
.mtr-blog__condnote { margin-left: 8px; font-size: .75rem; font-weight: 400; color: var(--mtr-sub, #756B5B); }
.mtr-blog__empty { margin: 20px 0; font-size: .9375rem; line-height: 1.8; }

/*
 * せまい画面は**1列**にする。
 * 2列にすると、画像72px＋文字が約110pxしか残らず、
 * 題名も品番も細かく折れて読めなくなる（375pxで確認）。
 */
.mtr-blog__list {
	display: grid; grid-template-columns: minmax(0, 1fr);
	gap: 10px; margin: 0 0 18px; padding: 0; list-style: none;
}
.mtr-blog__item { min-width: 0; }
.mtr-blog__a {
	display: flex; gap: 10px; height: 100%;
	padding: 10px; background: #fff;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 10px;
	text-decoration: none; box-sizing: border-box;
}
.mtr-blog__a:hover { background: var(--mtr-bg-soft, #F3EBDD); }
.mtr-blog__thumb { flex: 0 0 72px; display: block; }
.mtr-blog__thumb img {
	display: block; width: 100%; height: auto; max-height: 104px;
	object-fit: contain; border-radius: 4px;
}
.mtr-blog__thumb--none { background: var(--mtr-bg-soft, #F3EBDD); border-radius: 4px; min-height: 72px; }
.mtr-blog__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mtr-blog__kind {
	align-self: flex-start; padding: 1px 8px;
	border-radius: 999px; background: var(--mtr-bg-soft, #F3EBDD);
	font-size: .6875rem; font-weight: 700; color: var(--mtr-sub, #756B5B);
}
.mtr-blog__title {
	font-size: .8125rem; font-weight: 600; line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden; overflow-wrap: anywhere;
}
.mtr-blog__sub, .mtr-blog__meta {
	font-size: .6875rem; line-height: 1.5; color: var(--mtr-sub, #756B5B);
	overflow-wrap: anywhere;
}
/*
 * カードの中の「何が分かる記事か」（2026-10-04 追加）。
 * 題名の下に2行まで。長い抜粋はPHP側で90字に切ってある。
 * せまい画面では1行に減らして、カードが縦に伸びすぎないようにする。
 */
.mtr-blog__why {
	font-size: .6875rem; line-height: 1.55; color: var(--mtr-sub, #756B5B);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; overflow-wrap: anywhere;
}
.mtr-blog__read { margin-top: auto; align-self: flex-start; font-size: .75rem; font-weight: 700; }
.mtr-blog__read::after { content: ' ›'; }

@media (min-width: 560px)  { .mtr-blog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px)  { .mtr-blog__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mtr-blog__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* せまい画面では画像を少し大きく、文字に幅を残す */
@media (max-width: 559px) {
	.mtr-blog__thumb { flex: 0 0 88px; }
	.mtr-blog__title { -webkit-line-clamp: 2; font-size: .875rem; }
	.mtr-blog__sub, .mtr-blog__meta { font-size: .75rem; }
	.mtr-blog__why { -webkit-line-clamp: 2; font-size: .75rem; }
}

/* トップの「作品紹介を読む」 */
.mtr-cmpentry__read { margin: 10px 0 0; font-size: .875rem; line-height: 1.7; }
.mtr-cmpentry__read a { font-weight: 700; }
.mtr-cmpentry__readnote {
	display: block; font-size: .75rem; color: var(--mtr-sub, #756B5B);
}

/* カードの品番 */
.mtr-card__cid {
	margin: 2px 0 0; font-size: .6875rem; line-height: 1.5;
	color: var(--mtr-sub, #756B5B); overflow-wrap: anywhere;
}
.mtr-card__cid a { color: inherit; }

/* ===================================================================
 * 記事一覧の追加分（2026-10-04）
 * 特集の区分・発売期間・収録時間・並び替え・指定の誤り。
 * 既存の .mtr-blog__filter の中に収める（新しい箱は作らない）。
 * =================================================================== */

/* 特集の区分。種別タブと見分けが付くよう、少し小さく件数付き */
.mtr-blog__subtabs { margin: -4px 0 12px; }
.mtr-blog__subtabs ul {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin: 0; padding: 0; list-style: none;
}
.mtr-blog__subtab {
	display: inline-flex; align-items: center; gap: 5px;
	min-height: 40px; padding: 0 13px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 999px;
	background: #fff; font-size: .8125rem; font-weight: 600;
	text-decoration: none; box-sizing: border-box;
}
.mtr-blog__subtab.is-on { background: var(--mtr-bg-soft, #F3EBDD); border-color: #C9B189; }
.mtr-blog__subtab span {
	font-size: .75rem; font-weight: 400; color: var(--mtr-sub, #7A6A52);
}

/* 発売期間・収録時間。せまい画面でも1行に収め、折り返しても崩さない */
.mtr-blog__row--range { gap: 6px; }
.mtr-blog__rangelabel {
	flex: 0 0 auto; min-width: 4.5em;
	font-size: .8125rem; font-weight: 600;
}
.mtr-blog__date, .mtr-blog__min { flex: 1 1 7.5em; min-width: 0; }
.mtr-blog__date input, .mtr-blog__min input {
	width: 100%; min-height: 44px; padding: 0 10px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 8px;
	font-size: 16px; box-sizing: border-box; background: #fff;
}
.mtr-blog__tilde, .mtr-blog__unit {
	flex: 0 0 auto; font-size: .8125rem; color: var(--mtr-sub, #7A6A52);
}

/* 特集から渡ってきた条件（画面に選ぶ欄が無いもの） */
.mtr-blog__kept {
	margin: 2px 0 0; font-size: .8125rem; color: var(--mtr-sub, #7A6A52);
}

/* 読めなかった指定。**0件と見間違えないように**強く出す */
.mtr-blog__errors {
	margin: 10px 0 0; padding: 10px 12px;
	border: 1px solid #C97A5A; border-radius: 8px; background: #FCF2EC;
	font-size: .8125rem; line-height: 1.7;
}
.mtr-blog__errors p { margin: 0 0 6px; }
.mtr-blog__errors ul { margin: 0; padding-left: 1.2em; }

@media (max-width: 480px) {
	.mtr-blog__rangelabel { flex: 1 0 100%; min-width: 0; margin-bottom: 2px; }
	.mtr-blog__date, .mtr-blog__min { flex: 1 1 6em; }
}

/* トップの「ほかの特集」から一覧へ（2026-10-04 追加） */
.mtr-home__story-all { margin: 8px 0 0; }
.mtr-home__story-all a {
	display: inline-flex; align-items: center;
	min-height: 40px; padding: 0 14px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 999px;
	background: #fff; font-size: .8125rem; font-weight: 600; text-decoration: none;
}

/*
 * 「条件を外す」の押せる大きさ（2026-10-04 修正）。
 * 文字だけで13pxしかなく、指では押しにくかった。
 * 見た目は文字のまま、当たり判定だけ44pxにする。
 */
.mtr-blog__clear {
	display: inline-flex; align-items: center;
	min-height: 44px; padding: 0 4px;
	font-size: .8125rem;
}

/*
 * 画像の無い記事カード（2026-10-05 追加）。
 * 空の枠を出さず、文字で読ませる。高さは画像付きと揃える必要はない。
 */
.mtr-blog__item--text .mtr-blog__body { padding-left: 0; }
.mtr-blog__item--text .mtr-blog__title { font-size: .9375rem; }

/* 画像は縦横比を保つ（引き伸ばさない） */
.mtr-blog__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ===================================================================
 * 記事一覧の詳細条件（2026-10-05）
 * すぐ使うものは上に、たまに使うものは開閉の中に。
 * 操作はすべて44px以上。
 * =================================================================== */
.mtr-blog__more { margin: 0 0 8px; }
.mtr-blog__moresum {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; padding: 0 14px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 999px;
	background: #fff; font-size: .8125rem; font-weight: 600;
	cursor: pointer; list-style: none;
}
.mtr-blog__moresum::-webkit-details-marker { display: none; }
.mtr-blog__moresum::after { content: "▾"; font-size: .75rem; }
.mtr-blog__more[open] .mtr-blog__moresum::after { content: "▴"; }
.mtr-blog__morebody { margin: 10px 0 0; }

/* いまの条件。**開閉の外**に置くので、閉じていても見える */
.mtr-blog__applied {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	margin: 0 0 8px; font-size: .8125rem;
}
.mtr-blog__appliedlead { font-weight: 600; }
.mtr-blog__chip {
	padding: 3px 9px; border-radius: 999px;
	background: #fff; border: 1px solid var(--mtr-line, #E7DCC7);
}
.mtr-blog__chip--sort { background: #F7F1E4; }

/* ジャンルの候補検索 */
.mtr-blog__genre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.mtr-blog__genlabel { flex: 0 0 auto; min-width: 4.5em; font-size: .8125rem; font-weight: 600; }
.mtr-blog__genfind {
	flex: 1 1 10em; min-width: 0; min-height: 44px; padding: 0 10px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 8px;
	font-size: 16px; box-sizing: border-box; background: #fff;
}
.mtr-blog__genpick { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; }
.mtr-blog__genpick b { font-weight: 700; }
.mtr-blog__genclear, .mtr-blog__genopt {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 12px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 999px;
	background: #fff; font-size: .8125rem; cursor: pointer;
}
.mtr-blog__genfound { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; }

/* 発売年と時期 */
.mtr-blog__range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.mtr-blog__range .mtr-blog__row { flex: 1 0 100%; margin: 0; }

/*
 * 記事一覧の画像枠（2026-10-05 修正）。
 * 読み込み前から**場所を取っておく**。入れないと、画像が入った瞬間に
 * 題名・品番・「読む」が下へ動く。
 * 縦横比は公式画像の形（147×200）に合わせ、中身は contain なので潰れない。
 */
.mtr-blog__thumb { flex: 0 0 72px; display: block; aspect-ratio: 147 / 200; }
.mtr-blog__thumb img {
	display: block; width: 100%; height: 100%; max-height: none;
	object-fit: contain; border-radius: 4px;
}
.mtr-blog__thumb--none { aspect-ratio: 147 / 200; }
@media (min-width: 560px) {
	.mtr-blog__thumb { flex: 0 0 88px; }
}

/* 見つからなかったときの画面（2026-10-04 追加） */
.mtr-404__ways { margin: 0 0 16px; padding: 0; list-style: none; }
.mtr-404__ways li { margin: 0 0 10px; }
.mtr-404__go {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
	border: 1px solid var(--mtr-line, #E7DCC7); border-radius: 999px;
	background: #fff; font-size: .875rem; font-weight: 600; text-decoration: none;
}
.mtr-404__why { display: block; margin-top: 2px; font-size: .8125rem; color: var(--mtr-sub, #7A6A52); }
.mtr-404__note { font-size: .8125rem; color: var(--mtr-sub, #7A6A52); line-height: 1.8; }

/*
 * 見つからなかったときの画面の上端（2026-10-04 修正）。
 * 親テーマは404でヘッダーのロゴを出さないため、固定で出ている
 * 「チェックした作品」が見出しに重なっていた。
 * 親テーマは変えずに、こちら側で場所を空ける。
 */
.mtr-404 { padding-top: 56px; }
.mtr-404__home { margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
.mtr-404__home a { text-decoration: none; }
@media (min-width: 768px) { .mtr-404 { padding-top: 64px; } }