@charset "utf-8";
/* =========================================================================
   ミタレビ 新トップ（shohei 設計確定案 2026-09-28）

   確定色: 背景 #151518 / パネル #202025 / 文字 #F2F2F5 / 補助 #BBBAC3
           差し色 深紅 #861D3B / 金 #D5B46B
   日本語ゴシック体。通常一覧は静かに、質感は特集に集中させる。

   金は**公式画像の外側**の角飾り。画像から6px以上離した別DOM（.mtr-home__corner）。
   画像へのグロー・文字・加工はしない。きらめきは初めて画面に入ったとき1回だけ。

   幅ごと
     1280以上 … 左200px、右に3特集パネル、通常一覧6列
     960〜1279 … 左200px、特集は約2.15パネルの手動横送り、通常一覧5列
     600〜959  … 左は折りたたみ、特集は約1.9パネル、通常一覧4列
     599以下   … 通常一覧2列、特集は約1.12パネル
   横送りは特集の中だけ。ページ全体の横はみ出しはしない。
   ========================================================================= */

.mtr-home {
	/* 2026-09-28 13:48 承認のシャンパンゴールド。旧チャコール・深紅は撤回 */
	--mh-bg: #FBF7EE;
	--mh-panel: #FFFDF8;
	--mh-soft: #F3EBDD;
	--mh-line: #D7C39B;
	--mh-text: #342B20;
	--mh-sub: #6E5D43;
	--mh-gold: #B68A36;
	--mh-gold-hi: #E8CC8A;
	--mh-gold-dark: #8A6526;
	--mh-link: #805C20;
	--mh-red: #B68A36;            /* 旧「差し色の赤」は金に置き換え */
	--mh-side: 200px;
	--mh-gap: 10px;
	--mh-pad: 16px;

	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding: 10px var(--mh-pad) 24px;
	background: var(--mh-bg);
	color: var(--mh-text);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
	             -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.6;
}

.mtr-home * { box-sizing: border-box; }

body.mtr-home-page { background: #FBF7EE; }

/* ------------------------------------------------------------ ナビ・PR */

/*
 * ナビとPRの帯。
 * 600px以上は1行に並べ、最初の作品画像が画面の上から離れすぎないようにする
 * （目標: PC/iPad 240px以内、スマホ 300px以内）。
 * 狭い幅では自然に縦へ落ちて、PRの文も折り返す。
 */
.mtr-home__bar { margin: 0 0 8px; }

.mtr-home__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin: 0 0 6px;
}

.mtr-home__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 4px 14px;
	border: 1px solid var(--mh-line);
	border-radius: 999px;
	background: var(--mh-panel);
	color: var(--mh-text);
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
}

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

/* 最初の広告画像より前。狭い幅では自然に改行する */
.mtr-home__pr {
	flex: 1 1 320px;
	margin: 0;
	padding: 6px 11px;
	border: 1px solid var(--mh-line);
	border-radius: 6px;
	background: var(--mh-panel);
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--mh-text);
}

.mtr-home__pr b {
	display: inline-block;
	margin-right: 7px;
	padding: 1px 7px;
	border-radius: 3px;
	background: var(--mh-gold-dark);
	color: #fff;
	font-size: .75rem;
	letter-spacing: .04em;
}

/* ------------------------------------------------------------ 組み */

.mtr-home__layout { display: block; }
.mtr-home__main { min-width: 0; }

.mtr-home__side .mtr-cat-side__body { display: none; }
.mtr-filter-switch:checked + .mtr-home__side .mtr-cat-side__body { display: block; }
.mtr-filter-switch:checked + .mtr-home__side .mtr-filter-open::after { content: "を閉じる"; }

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

.mtr-home__count {
	margin: 0 0 10px;
	font-size: .75rem;
	color: var(--mh-sub);
}
.mtr-home__count strong { color: var(--mh-text); font-size: .9375rem; }

/* ------------------------------------------------------------ 特集 */

.mtr-home__features {
	position: relative;
	margin: 0 0 10px;
	border: 1px solid var(--mh-line);
	border-radius: 10px;
	background: var(--mh-panel);
	overflow: hidden;
}

/* AI背景素材は特集セクションの背景に限る。優先プリロードしない */
/*
 * 特集の面。生成した見本画像を全面に貼らない（承認文の指示）。
 * 金の質感は CSS のグラデーションと細い罫線で出す。
 */
.mtr-home__art {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #FFFDF8 0%, #FBF5E6 58%, #F6EDDA 100%);
	pointer-events: none;
}

.mtr-home__art::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--mh-gold-hi), var(--mh-gold), var(--mh-gold-hi));
}

.mtr-home__features-inner { position: relative; padding: 11px 12px 16px; }

.mtr-home__title {
	margin: 0 0 2px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .02em;
}

.mtr-home__title::after {
	content: "";
	display: block;
	width: 58px;
	height: 2px;
	margin-top: 6px;
	background: linear-gradient(90deg, var(--mh-gold), rgba(213,180,107,0));
}

.mtr-home__title-note {
	margin: 0 0 9px;
	font-size: .75rem;
	color: var(--mh-sub);
}

/*
 * 特集の並び（2026-09-28 v2）
 *   768px以上 … 3特集を1行に完全表示（横送りなし）
 *   768px未満 … 1枚を完全表示する手動の横送り。前へ／次へと現在位置を出す
 * 自動送りはしない。
 */
.mtr-home__features-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;           /* 768px未満: 1枚を完全表示 */
	gap: var(--mh-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mtr-home__features-rail::-webkit-scrollbar { display: none; }
.mtr-home__features-rail:focus-visible { outline: 2px solid var(--mh-gold); outline-offset: 3px; }

/* 前へ／次へと現在位置（768px以上では不要なので出さない） */
.mtr-home__rail-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 0;
	font-size: .75rem;
	color: var(--mh-sub);
}

.mtr-home__rail-btn {
	min-height: 40px;
	padding: 4px 16px;
	border: 1px solid var(--mh-line);
	border-radius: 999px;
	background: var(--mh-panel);
	color: var(--mh-text);
	font-size: .8125rem;
	cursor: pointer;
}
.mtr-home__rail-btn:disabled { opacity: .4; cursor: default; }
.mtr-home__rail-btn:focus-visible { outline: 2px solid var(--mh-gold); outline-offset: 2px; }

/*
 * カードの中身を揃える。
 * 画像・ラベル・作品名・作品情報・ボタンを行として並べ、
 * 同じ行のカードどうしで各段の高さを共有する（subgrid が無い環境では
 * 各段に最小高を置かず、内容で伸びる方を優先する）。
 * 固定高や min-height でボタンだけ底に押し付けない。
 */
.mtr-home__feature {
	position: relative;
	scroll-snap-align: start;
	min-width: 0;
	display: grid;
	grid-template-rows: auto auto auto;     /* 見出し / 2作品 / 特集を見る */
	align-content: start;
	gap: 7px;
	padding: 11px 11px 12px;
	border: 1px solid var(--mh-line);
	border-radius: 8px;
	background: var(--mh-panel);
}

/*
 * 同じ行に並ぶカードどうしで、見出し・画像・一言・ボタンの各段の高さを共有する。
 * subgrid が使えない環境では、これまでどおりカードの中だけで並ぶ（内容は欠けない）。
 */
@supports (grid-template-rows: subgrid) {
	.mtr-home__features-rail { grid-template-rows: auto auto auto; }
	.mtr-home__feature { grid-row: span 3; grid-template-rows: subgrid; }
	.mtr-home__pair { grid-template-rows: auto auto auto auto auto auto; }
	.mtr-home__pick { grid-row: span 6; grid-template-rows: subgrid; }
}

/* 金の角飾りは控えめに。外枠と重ねない */
.mtr-home__corner {
	position: absolute;
	inset: 6px;
	pointer-events: none;
	background:
		linear-gradient(var(--mh-gold), var(--mh-gold)) left top / 11px 1px no-repeat,
		linear-gradient(var(--mh-gold), var(--mh-gold)) left top / 1px 11px no-repeat,
		linear-gradient(var(--mh-gold), var(--mh-gold)) right bottom / 11px 1px no-repeat,
		linear-gradient(var(--mh-gold), var(--mh-gold)) right bottom / 1px 11px no-repeat;
	opacity: .7;
}

.mtr-home__feature.is-seen .mtr-home__corner { animation: mtr-home-corner 1.1s ease-out 1 both; }

@keyframes mtr-home-corner {
	0%   { opacity: .15; }
	40%  { opacity: .95; }
	100% { opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
	.mtr-home__feature.is-seen .mtr-home__corner { animation: none; opacity: .7; }
}

.mtr-home__feature-title {
	margin: 0;
	font-size: .875rem;            /* 14px */
	font-weight: 700;
	line-height: 1.4;
}

/* スマホでも2枚を横並び。行ごとに内容を揃える */
.mtr-home__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtr-home__pick {
	display: grid;
	/* 画像 / ラベル / 女優名 / 作品説明 / 作品情報 / チェック の6段 */
	grid-template-rows: auto auto auto auto auto auto;
	gap: 3px;
	min-width: 0;
	margin: 0;
	justify-items: center;         /* 画像枠を列の中央へ */
	text-align: center;
}

/*
 * 注目サムネの左上「外側」の輝き（承認見本の再現）。
 * 画像から離した独立要素。画像の画素・顔・文字には重ねない。
 * 画面に初めて入ったときだけ約1秒。同じページで繰り返さず、自動ループもしない。
 */
.mtr-home__spark {
	position: absolute;
	left: -7px;
	top: -7px;
	width: 11px;
	height: 11px;
	pointer-events: none;
	opacity: .9;
	background:
		linear-gradient(var(--mh-gold), var(--mh-gold)) center / 1.5px 100% no-repeat,
		linear-gradient(var(--mh-gold), var(--mh-gold)) center / 100% 1.5px no-repeat;
	-webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%);
	mask: radial-gradient(closest-side, #000 25%, transparent 100%);
}

.mtr-home__feature.is-seen .mtr-home__spark {
	animation: mtr-home-spark 1s ease-out 1 both;
}

@keyframes mtr-home-spark {
	0%   { opacity: 0; transform: scale(.4) rotate(0deg); }
	45%  { opacity: 1; transform: scale(1.35) rotate(35deg); }
	100% { opacity: .9; transform: scale(1) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
	.mtr-home__feature.is-seen .mtr-home__spark { animation: none; opacity: .9; transform: rotate(45deg); }
}

/* 画像枠。幅に上限を置き、無制限に拡大しない */
.mtr-home__stage {
	position: relative;
	display: block;
	width: 100%;
	max-width: 112px;              /* 768px未満 */
	aspect-ratio: 147 / 200;
}

.mtr-home__image {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	border-radius: 4px;
	background: var(--mh-soft);
	overflow: hidden;
}

.mtr-home__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;           /* 切り抜かない */
}

.mtr-home__image:focus-visible { outline: 2px solid var(--mh-gold); outline-offset: 3px; }

.mtr-home__pick-label {
	margin: 0;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mh-gold);
	/* 長いメーカー名などは1行で省略。カードの行数を揃える */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/*
 * 特集カードの女優名。ラベル（年・メーカーなど比較用）は残したまま、その下に出す。
 * 未登録のときは空のまま出し、min-height で1行ぶんの高さを確保する
 * （行が減ると、同じ並びの「作品情報」の位置がカードごとにずれるため）。
 */
.mtr-home__pick-cast {
	margin: 0;
	min-height: 1.3em;
	font-size: .6875rem;
	line-height: 1.3;
	color: var(--mh-sub);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.mtr-home__pick-title {
	margin: 0;
	font-size: .75rem;             /* 12px */
	line-height: 1.35;
	color: var(--mh-text);
	/* 表示は1行・はみ出しは「…」。全文は作品詳細で読める */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/*
 * v12：特集の中でも「作品情報を見る」を主ボタンにする。
 * 見た目は共通の .mtr-go（catalog.css）。ここは大きさと余白だけ。
 * 「特集を見る」の金色ボタンとは強さを変えている（同じ強さで並べない）。
 */
.mtr-home__work-info {
	min-height: 32px;
	margin: 4px 0 0;
	padding: 4px 6px;
	font-size: .6875rem;
}

/* 作品名も作品情報ページへのリンク（1行で切るのは .mtr-home__pick-title のまま） */
.mtr-home__pick-name { color: inherit; text-decoration: none; }
.mtr-home__pick-name:hover, .mtr-home__pick-name:focus { color: var(--mh-gold); text-decoration: underline; }

.mtr-home__feature-note {
	margin: 0;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--mh-sub);
}

.mtr-home__feature-go { margin: 0; }

/* ボタンの高さ・余白・枠を全カードで統一。全幅の太い赤帯にしない */
.mtr-home__feature-go a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 16px;
	border: 1px solid var(--mh-red);
	border-radius: 7px;
	font-size: .8125rem;
	font-weight: 700;
	text-decoration: none;
}
.mtr-home__feature-go a:focus-visible { outline: 2px solid var(--mh-gold); outline-offset: 2px; }

/* ------------------------------------------------------------ ほかの特集 */

/*
 * 「ほかの特集」と3リンクを1段にまとめる。
 * 縦に大きなボタンを3本積まない。固定高・min-height で空白を作らない。
 */
.mtr-home__story {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 10px 0 10px;
}

.mtr-home__story-note {
	font-size: .75rem;
	font-weight: 700;
	color: var(--mh-sub);
}

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

.mtr-home__story-link {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 2px 8px;
	border: 1px solid var(--mh-line);
	border-radius: 5px;
	background: var(--mh-panel);
	color: var(--mh-text);
	font-size: .75rem;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}
.mtr-home__story-link:hover, .mtr-home__story-link:focus { border-color: var(--mh-gold-dark); color: var(--mh-link); }

/*
 * 「何が分かる記事か」をリンクのすぐ下に出す（2026-10-04 追加）。
 * 説明が付く行だけ縦並びにする。付かない行はこれまでどおり1行のまま。
 * スマホでは折り返しを許す（説明が切れないように）。
 */
.mtr-home__story-link--why {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1px;
	padding: 5px 9px;
	white-space: normal;
}
.mtr-home__story-link--why .mtr-home__story-name { font-weight: 600; }
.mtr-home__story-why {
	display: block;
	color: var(--mh-text-weak, #6b6257);
	font-size: .68rem;
	line-height: 1.25;
}
.mtr-home__story-link--why:hover .mtr-home__story-why,
.mtr-home__story-link--why:focus .mtr-home__story-why { color: inherit; }

@media (max-width: 600px) {
	.mtr-home__story-link--why { max-width: 100%; }
}

/* ------------------------------------------------------------ 作品の段 */

.mtr-home__catalog { margin: 0 0 18px; }

.mtr-home__section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 7px;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--mh-line);
}

.mtr-home__section-head h2 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.mtr-home__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	font-size: .75rem;
	color: var(--mh-sub);
	text-decoration: none;
}
.mtr-home__more::after { content: " ›"; }
.mtr-home__more:hover, .mtr-home__more:focus { color: var(--mh-gold); }

/* 通常一覧は静かに。文字色だけ暗い地色へ合わせる */
.mtr-home__grid { margin: 0; }
.mtr-home .mtr-card__link { background: var(--mh-soft); }
.mtr-home .mtr-card__name { color: var(--mh-text); font-size: .8125rem; }
.mtr-home .mtr-card__cast,
.mtr-home .mtr-card__date { color: var(--mh-sub); font-size: .75rem; }
.mtr-home .mtr-card__info { color: var(--mh-sub); border-top-color: var(--mh-line); font-size: .75rem; }
.mtr-home .mtr-card__info:hover, .mtr-home .mtr-card__info:focus { color: var(--mh-gold); }

.mtr-home__empty {
	margin: 0;
	padding: 16px;
	border: 1px dashed var(--mh-line);
	border-radius: 8px;
	font-size: .8125rem;
	color: var(--mh-sub);
}
.mtr-home__empty a { color: var(--mh-gold); }

/* ------------------------------------------------------------ フッター */

.mtr-home__footer {
	margin: 8px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--mh-line);
	font-size: .75rem;
	color: var(--mh-sub);
}

.mtr-home__brand { margin: 0 0 12px; }
.mtr-home__brand strong { color: var(--mh-text); }
.mtr-home__footer .mtr-credit { border-top: 0; margin: 0; padding: 0; color: inherit; }
.mtr-home__footer a { color: var(--mh-sub); }
.mtr-home__footer a:hover, .mtr-home__footer a:focus { color: var(--mh-gold); }
.mtr-home__footer .mtr-about__title { color: var(--mh-text); }

/* ------------------------------------------------------------ 絞り込みの色 */

.mtr-home .mtr-filters { background: var(--mh-panel); border-color: var(--mh-line); }
.mtr-home .mtr-filters__title,
.mtr-home .mtr-facet__head { color: var(--mh-text); }
.mtr-home .mtr-facet { border-top-color: var(--mh-line); }
.mtr-home .mtr-facet__item { color: var(--mh-text); }
.mtr-home .mtr-facet__item:hover,
.mtr-home .mtr-facet__item:focus { background: var(--mh-soft); }

.mtr-home .mtr-facet__count,
.mtr-home .mtr-facet__total,
.mtr-home .mtr-facet__more-n { color: var(--mh-sub); }
.mtr-home .mtr-facet__more-head { color: var(--mh-gold); }
.mtr-home .mtr-filter-open { background: var(--mh-panel); border-color: var(--mh-line); color: var(--mh-text); }
.mtr-home .mtr-search input[type="search"] { background: #fff; border-color: var(--mh-line); color: var(--mh-text); }

/* ========================================================== 幅ごと */

/* 599px以下 … 通常一覧2列（文字を極小化しない） */
@media screen and (max-width: 599px) {
	.mtr-home { --mh-pad: 14px; --mh-gap: 7px; }
	.mtr-home__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
}

/* 600〜767 … 通常一覧4列。特集はまだ1枚ずつの横送り */
@media screen and (min-width: 600px) {
	.mtr-home { --mh-pad: 20px; --mh-gap: 12px; }
	.mtr-home__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
	.mtr-home__title { font-size: 1.4375rem; }
	.mtr-home__features-inner { padding: 12px 14px 18px; }
	.mtr-home__bar { display: flex; align-items: center; gap: 10px; }
	.mtr-home__nav { margin: 0; flex: 0 0 auto; }
}

/* 768px以上 … 3特集を1行に完全表示。横送りと前へ／次へは出さない */
@media screen and (min-width: 768px) {
	.mtr-home__features-rail {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-columns: auto;
		overflow-x: visible;
		scroll-snap-type: none;
	}
	/* 3列に並ぶので、特集カードの3段ぶんの行を共有する */
	@supports (grid-template-rows: subgrid) {
		.mtr-home__features-rail { grid-template-rows: repeat(3, auto); }
	}
	.mtr-home__rail-nav { display: none; }
	.mtr-home__stage { max-width: 120px; }
	.mtr-home__feature-title { font-size: .9375rem; }
}

/* 768〜959 … 条件欄は折りたたみ、特集は本文の全幅で3列。通常一覧は4列 */
@media screen and (min-width: 768px) and (max-width: 959px) {
	.mtr-home__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 960px以上 … 左200pxの条件欄、右に3特集。通常一覧5列 */
@media screen and (min-width: 960px) {
	.mtr-home__layout {
		display: grid;
		grid-template-columns: var(--mh-side) minmax(0, 1fr);
		gap: 18px;
		align-items: start;
	}
	.mtr-home__layout--nofilter { display: block; }
	.mtr-home__side { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; }
	.mtr-home__side .mtr-filter-open { display: none; }
	.mtr-home__side .mtr-cat-side__body { display: block; }
	/* 1024px でも6列（v3 第1項で 960px以上=6列 に変更） */
	.mtr-home__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.mtr-home .mtr-grid { max-width: none; }
}

/* 1280以上 … 通常一覧6列 */
@media screen and (min-width: 1280px) {
	.mtr-home { --mh-pad: 26px; max-width: 1480px; }
}

/* =========================================================================
   最初の作品画像を、画面の上から離しすぎない

   目標: PC/iPad 240px以内、スマホ 300px以内（ブラウザのアドレスバーは含めない）。
   親テーマ Muum のヘッダーは、このトップでだけ小さくする（親テーマは変更しない）。
   ・ヘッダー内の検索は、左の「条件で探す」に同じものがあるので出さない
   ・RSSアイコンはトップでは出さない
   ・グローバルメニューの高さを詰める
   ========================================================================= */

@media screen and (min-width: 600px) {
	/*
	 * トップのヘッダーを小さくする。Muum は #header・#header_top・#global_menu に
	 * 固定の高さを当てているので、height: auto を当てて初めて縮む。
	 * **親テーマのファイルは変更していない。**
	 */
	body.mtr-home-page #header_search,
	body.mtr-home-page #header_sns { display: none; }

	body.mtr-home-page #header { height: auto; min-height: 0; }
	body.mtr-home-page #header_top { height: auto; padding-top: 9px; padding-bottom: 9px; min-height: 0; }
	body.mtr-home-page #global_menu { height: auto; }
	body.mtr-home-page #header_logo .pc_logo_text { font-size: 26px; }
	body.mtr-home-page #global_menu ul.menu > li > a { height: 42px; line-height: 42px; }

	.mtr-home { padding-top: 7px; }
	.mtr-home__title-note { margin-bottom: 6px; line-height: 1.45; }
	.mtr-home__features-inner { padding-top: 9px; }
	.mtr-home__title { font-size: 1.3125rem; }
	.mtr-home__title::after { margin-top: 4px; }
	.mtr-home__feature { padding-top: 9px; }
	.mtr-home__feature-title { margin-bottom: 6px; }
}

/* スマホ … 文字を極小化せずに、上の要素を詰める */
@media screen and (max-width: 599px) {
	.mtr-home { padding-top: 6px; }
	.mtr-home__bar { margin-bottom: 6px; }
	.mtr-home__nav { margin-bottom: 5px; }
	.mtr-home__nav a { min-height: 38px; padding: 3px 12px; }
	.mtr-home__pr { padding: 5px 9px; line-height: 1.45; }
	.mtr-home__features-inner { padding: 9px 10px 14px; }
	.mtr-home__title { font-size: 1.125rem; }
	.mtr-home__title::after { margin-top: 4px; }
	.mtr-home__title-note { margin-bottom: 6px; line-height: 1.4; font-size: .6875rem; }
	.mtr-home__nav a { min-height: 36px; font-size: .78125rem; }
	.mtr-home__feature { padding: 9px 10px 10px; }
	.mtr-home__feature-title { margin-bottom: 6px; }
}

/* =========================================================================
   トップの一覧は各段2行まで（2026-09-28 boone 指示）

   サーバーは最大12件を出し、見える数はここで切る。
     960px以上 … 6列×2行＝12件
     600〜959  … 4列×2行＝8件
     599px以下 … 3列×2行＝6件
   スマホで12件を4行に伸ばさない。実際の件数が少ないときは、あるぶんだけ出る。
   ========================================================================= */

/* 2026-10-01 v4：見える数は、ファイル末尾の新しい指定（行がそろう数）に移した。
   ここで n+7 / n+9 を隠したままだと、新しい指定より先に消えてしまうので外す。 */

/* =========================================================================
   まだ出せない段の枠（管理者でログインしているときだけ見える）
   ========================================================================= */

.mtr-home__hold {
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px dashed var(--mh-line);
	border-radius: 8px;
	background: var(--mh-soft, transparent);
	font-size: .8125rem;
	color: var(--mh-sub);
}
.mtr-home__hold p { margin: 0; }
.mtr-home__hold p + p { margin-top: 3px; }

/* 特集カードのチェック（v11） */
.mtr-home__pick-save { margin: 2px 0 0; }
.mtr-home__pick-save .mtr-save { font-size: .6875rem; padding: 3px 9px; min-height: 30px; }

/* ===================================================== トップの共通検索入口（2026-10-01 v2）
 *
 * ここは入口。候補を縦に並べない（並べるのは作品カタログ側）。
 * アイボリーの面に濃茶の文字、金は選択状態だけに使う。
 */

.mtr-entry {
	margin: 0 0 20px; padding: 16px 18px;
	background: #FFFDF8; border: 1px solid #D9CCB3; border-radius: 12px;
}
.mtr-entry__h { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #332B23; }

.mtr-entry__form { display: flex; gap: 8px; margin: 0; }
.mtr-entry__form input[type="search"] {
	flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px;
	font-size: 16px; color: #332B23;
	background: #FAF7EF; border: 1px solid #D9CCB3; border-radius: 10px;
}
.mtr-entry__form input[type="search"]:focus-visible { border-color: #B48A3D; outline: 2px solid #B48A3D; outline-offset: 1px; }
.mtr-entry__go {
	flex: 0 0 auto; min-width: 88px; height: 48px; padding: 0 18px; cursor: pointer;
	font-size: 15px; font-weight: 700; color: #FFFDF8;
	background: #332B23; border: 1px solid #332B23; border-radius: 10px;
}
.mtr-entry__go:hover, .mtr-entry__go:focus-visible { background: #4A3E31; }

.mtr-entry__rel { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.mtr-entry__relopt {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
	font-size: 14px; color: #332B23; text-decoration: none;
	background: #FAF7EF; border: 1px solid #D9CCB3; border-radius: 999px;
}
.mtr-entry__relopt.is-on { background: #EDE2C8; border-color: #B48A3D; font-weight: 700; }
.mtr-entry__relopt:hover, .mtr-entry__relopt:focus-visible { border-color: #B48A3D; }

.mtr-entry__axes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.mtr-entry__lead { font-size: 13px; color: #756B5B; }
.mtr-entry__axis {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
	font-size: 14px; color: #332B23; text-decoration: none;
	background: #FFFDF8; border: 1px solid #D9CCB3; border-radius: 8px;
}
.mtr-entry__axis:hover, .mtr-entry__axis:focus-visible { border-color: #B48A3D; }
.mtr-entry__axis--all { font-weight: 700; }

@media (max-width: 767px) {
	.mtr-entry { padding: 14px; border-radius: 10px; }
	.mtr-entry__h { font-size: 16px; }
	.mtr-entry__go { min-width: 72px; padding: 0 14px; font-size: 14px; }
	.mtr-entry__rel, .mtr-entry__axes { gap: 6px; }
	.mtr-entry__relopt, .mtr-entry__axis { min-height: 40px; padding: 0 12px; font-size: 13px; }
}

/* =========================================================================
   「新着作品」以下の作品一覧（2026-10-01 v4）
   検索結果の一覧と同じ高密度表示にそろえる。
     1024px以上 … 8列 ／ 768〜1023px … 6列 ／ 600〜767px … 4列 ／ 599px以下 … 2列
   対象は .mtr-home__grid（新着作品と各ランキング）だけ。
   **上の「編集部イチオシ」3枠（.mtr-grid--feature / .mtr-home__rail）は変えない。**
   公式画像は 147×200px しか無いので、1コマの画像は 147px を超えないようにし、
   余りは左右へ均等に逃がす（切り抜き・引き伸ばし・拡大はしない）。
   ========================================================================= */

/*
 * **`.mtr-home .mtr-home__grid` と書く。**
 * 同じファイルの上のほうに `.mtr-home .mtr-grid { max-width: none; }` があり、
 * `.mtr-home__grid` だけだと詳細度で負けて最大幅が効かない（一度踏んだ）。
 */
.mtr-home .mtr-home__grid {
	gap: 12px;
	margin-inline: auto;
	justify-content: center;
}
.mtr-home__grid .mtr-card__link { max-width: 147px; margin-inline: auto; }
.mtr-home__grid .mtr-card { text-align: center; }
.mtr-home__grid .mtr-card__lines,
.mtr-home__grid .mtr-card__info,
.mtr-home__grid .mtr-card__save,
.mtr-home__grid .mtr-card__rank { text-align: left; max-width: 147px; margin-inline: auto; }

/* 文字と保存操作は検索一覧と同じ大きさにする（小さく詰めない） */
.mtr-home .mtr-card__name { font-size: .75rem; }
.mtr-home .mtr-card__cast, .mtr-home .mtr-card__when { font-size: .6875rem; }
.mtr-home__grid .mtr-save { min-height: 44px; font-size: .75rem; }

@media screen and (max-width: 599px) {
	.mtr-home { --mh-pad: 16px; }
	.mtr-home .mtr-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
	.mtr-home { --mh-pad: 20px; }
	.mtr-home .mtr-home__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: calc(147px * 4 + 12px * 3); }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.mtr-home { --mh-pad: 24px; }
	.mtr-home .mtr-home__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; max-width: calc(147px * 6 + 12px * 5); }
}
@media screen and (min-width: 1024px) {
	.mtr-home { --mh-pad: 32px; }
	.mtr-home .mtr-home__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 12px;
		/* 8コマ×147px ＋ 7つの間 12px ＝ 1260px（検索一覧と同じ） */
		max-width: calc(147px * 8 + 12px * 7);
	}
}

/* 各段に見せる数は**その幅の行がそろう数**にする（半端な最終行を作らない）。
   サーバーは最大16件を出し、見える数をここで切る。
     1024px以上 … 8列×2行＝16件
     768〜1023  … 6列×2行＝12件
     600〜767   … 4列×2行＝8件
     599px以下  … 2列×4行＝8件
   実際の件数が少ない段は、あるぶんだけ出る（重複では埋めない）。 */
@media screen and (max-width: 599px) {
	.mtr-home__grid > *:nth-child(n + 9) { display: none; }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
	.mtr-home__grid > *:nth-child(n + 9) { display: none; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.mtr-home__grid > *:nth-child(n + 13) { display: none; }
}
@media screen and (min-width: 1024px) {
	.mtr-home__grid > *:nth-child(n + 17) { display: none; }
}

/* ===================================================================
 * ほかの特集の開閉（2026-10-03 追加）
 * 特集が増えてもトップが縦に延びないようにする。
 * リンクは最初のHTMLに入ったまま（開かなくてもたどれる）。
 * =================================================================== */
.mtr-home__storyFold { display: block; margin-top: 6px; }
.mtr-home__storySum {
	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; box-sizing: border-box; list-style: none;
}
.mtr-home__storySum::-webkit-details-marker { display: none; }
.mtr-home__storySum::after {
	content: ''; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
}
.mtr-home__storyFold[open] .mtr-home__storySum::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mtr-home__storyAll {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin: 8px 0 0; padding: 0; list-style: none;
}