/*
Theme Name: eigacolle
Theme URI: http://localhost:8080
Author: hyodorantaro
Description: 映画・アニメ・ドラマ・エンタメニュースまとめサイト「映画コレクション」用テーマ。
Version: 1.3
Requires PHP: 7.4
Text Domain: eigacolle
*/

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	max-width: 100%;
	overflow-x: hidden;
}
body {
	margin: 0;
	background-color: var(--eiga-bg);
	color: var(--eiga-ink);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	line-height: 1.7;
	font-size: 16px;
	position: relative;
	max-width: 100%;
	overflow-x: hidden;
}
h1, h2, h3, h4, p, a {
	overflow-wrap: break-word;
	word-break: break-word;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0 0 0.6em; line-height: 1.4; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--eiga-accent);
	outline-offset: 2px;
}


:root {
	/* グレー階調+アクセント2色(ゴールド/チール)。
	   カテゴリ/ジャンルは色分けせず、すべてこのグレースケールの中で表現する。
	   背景は「白すぎる」との指摘を受け、寒色寄りのグラファイトグレーに一段階濃くした。
	   カードは逆に純白にして、背景から浮き上がるコントラストを強めている。 */
	--eiga-ink: #1a1a1a;         /* 本文文字 */
	--eiga-sub: #6b6c72;         /* 補助文字 */
	--eiga-line: #d8dcdf;        /* 罫線・アウトライン(背景に合わせて少し濃く) */
	--eiga-bg: #dde2e5;          /* 背景(グラファイトグレー。白ではなくはっきりグレーと分かる濃さ) */
	--eiga-card: #ffffff;        /* カード背景(純白にして、濃いめの背景から浮き上がらせる) */
	--eiga-accent: #8a6108;      /* メインアクセント(ゴールド。白地でもAA基準を満たす濃さ) */
	--eiga-accent2: #2f6f6d;     /* サブアクセント(シネマチール)。カテゴリバッジのみに使い、色数を増やしすぎない */
	--eiga-header-bg: #ffffff;
	--eiga-header-text: #1a1a1a;
	--eiga-logo-bg: #16171a;     /* ロゴの背景(常に暗色で固定) */
}

/* ---------- Layout ---------- */
.eiga-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- Header ---------- */
.site-header {
	background: var(--eiga-header-bg);
	border-top: 3px solid var(--eiga-accent);
	border-bottom: 2px solid var(--eiga-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	position: sticky;
	top: 0;
	z-index: 10;
}
.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-top: 18px;
	padding-bottom: 18px;
	flex-wrap: wrap;
	gap: 20px;
}
/* ナビ(トップ/邦画/洋画/公開カレンダー)はロゴのすぐ右。
   検索欄はそのさらに右、残りの横幅を吸収して伸びる大きめのボックス。 */
.eiga-header-search {
	flex: 1 1 260px;
	max-width: 640px;
}
.eiga-header-search .eiga-search-form input[type="search"] {
	font-size: 14px;
	padding: 11px 16px;
}
.eiga-header-search .eiga-search-form button {
	font-size: 14px;
	padding: 11px 18px;
}
.site-branding a {
	display: flex;
	align-items: center;
	gap: 10px;
}
.site-branding-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	color: var(--eiga-header-text);
}
/* ロゴ: セリフ体の「M」モノグラム(右脚がフィルムの帯)+ セリフ体の
   ワードマーク。参考画像(MOVIE HORIZON風)のデザイン言語を、
   サイト名は変えずに取り入れたもの。 */
.eiga-logo-frame {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.eiga-logo-icon {
	display: inline-flex;
	flex: 0 0 auto;
}
.eiga-logo-word {
	color: var(--eiga-header-text);
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.14em;
}
.site-branding a:hover .eiga-logo-word { color: var(--eiga-accent); }
.site-branding .tagline {
	display: block;
	font-size: 11px;
	color: var(--eiga-sub);
	font-weight: 400;
	letter-spacing: 0.22em;
	margin-top: 3px;
}
.main-nav ul {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.main-nav a {
	font-size: 14px;
	color: var(--eiga-header-text);
	padding: 4px 0;
	border-bottom: 2px solid transparent;
}
.main-nav a:hover {
	border-bottom-color: var(--eiga-accent);
	color: var(--eiga-accent);
}
/* カテゴリナビ(ロゴと検索欄の間)。ホバー色はカテゴリバッジと同じ配色を流用。 */
.eiga-category-nav ul {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.eiga-category-nav a {
	font-size: 14px;
	font-weight: 700;
	color: var(--eiga-header-text);
	padding: 4px 0;
	border-bottom: 2px solid transparent;
}
.eiga-category-nav a:hover {
	border-bottom-color: var(--eiga-cat-color);
	color: var(--eiga-cat-color);
}

@media (max-width: 780px) {
	.eiga-header-search { order: 2; flex: 1 1 100%; max-width: none; width: 100%; margin-left: 0; }
}

/* ---------- Hero(トップページ最上部。記事一覧より幅広く、画面いっぱいに見せる) ---------- */
.eiga-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: 380px;
	margin: 0 0 32px;
	background-color: var(--eiga-line);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.eiga-hero-panel {
	position: relative;
	width: 100%;
	background: rgba(10, 10, 9, 0.86);
	padding: 22px 0 26px;
}
.eiga-hero-panel-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.eiga-hero-badge {
	align-self: flex-start;
	background: var(--eiga-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 4px 11px;
	border-radius: 2px;
}
.eiga-hero-title {
	color: #fff;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.4;
}
.eiga-hero:hover .eiga-hero-title { color: var(--eiga-accent); }

@media (max-width: 600px) {
	.eiga-hero { min-height: 220px; margin: 0 0 20px; }
	.eiga-hero-title { font-size: 19px; }
	.eiga-hero-panel { padding: 16px 0 18px; }
	.eiga-hero-panel-inner { padding: 0 16px; }
}

/* ---------- Post grid (archive / index) ---------- */
.eiga-main {
	padding: 32px 0 64px;
}
.eiga-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}
.eiga-card {
	background: var(--eiga-card);
	border: 1px solid var(--eiga-line);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.eiga-card-thumb {
	aspect-ratio: 16 / 9;
	background: var(--eiga-line);
	overflow: hidden;
}
.eiga-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eiga-noimg {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, var(--eiga-line) 0 12px, #eeeef0 12px 24px);
	color: var(--eiga-sub);
}
.eiga-noimg-icon {
	width: 34%;
	max-width: 64px;
	opacity: 0.5;
}
.eiga-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.eiga-cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--eiga-accent2);
	border: 1px solid var(--eiga-accent2);
	border-radius: 2px;
	padding: 3px 9px;
	align-self: flex-start;
	letter-spacing: 0.05em;
}
.eiga-card-title {
	font-size: 16px;
	font-weight: 700;
}
.eiga-card-title a:hover { color: var(--eiga-accent); }
.eiga-excerpt {
	font-size: 13px;
	color: var(--eiga-sub);
	flex: 1;
}
.eiga-meta {
	font-size: 12px;
	color: var(--eiga-sub);
	border-top: 1px solid var(--eiga-line);
	padding-top: 8px;
	margin-top: auto;
}

/* ---------- Pagination ---------- */
.eiga-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}
.eiga-pagination a, .eiga-pagination span {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--eiga-line);
	border-radius: 3px;
	font-size: 13px;
	background: var(--eiga-card);
}
.eiga-pagination a:hover {
	border-color: var(--eiga-accent);
	color: var(--eiga-accent);
}
.eiga-pagination .current {
	background: var(--eiga-accent);
	color: #fff;
	border-color: var(--eiga-accent);
}

/* ---------- Layout (content + sidebar) ---------- */
.eiga-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 36px;
	align-items: start;
}
/* サイドバーの中身が無くウィジェットが1つも出ない場合は、本文を全幅に広げる。 */
.eiga-layout:not(:has(.eiga-sidebar)) { grid-template-columns: 1fr; }
.eiga-content-col { min-width: 0; width: 100%; }
.eiga-list { min-width: 0; }
.eiga-sidebar { min-width: 0; width: 100%; }

.eiga-section-title {
	font-size: 20px;
	border-left: 4px solid var(--eiga-accent);
	padding-left: 12px;
	margin-bottom: 8px;
}
.eiga-section-desc {
	font-size: 13px;
	color: var(--eiga-sub);
	margin: 0 0 24px;
}

/* ---------- Breadcrumbs ---------- */
.eiga-breadcrumbs { padding: 14px 0; }
.eiga-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 12px;
	color: var(--eiga-sub);
}
.eiga-breadcrumbs a { color: var(--eiga-sub); }
.eiga-breadcrumbs a:hover { color: var(--eiga-accent); }
.eiga-breadcrumbs li:not(:last-child)::after {
	content: "\203a";
	margin-left: 4px;
}

/* ---------- Article list (news-list style) ---------- */
.eiga-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.eiga-list-item {
	position: relative;
	display: flex;
	min-width: 0;
	gap: 20px;
	background: var(--eiga-card);
	border: 1px solid var(--eiga-line);
	border-radius: 4px;
	padding: 16px;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.eiga-list-item:hover { border-color: var(--eiga-accent); }
.eiga-list-item:hover {
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
	transform: translateY(-1px);
}
.eiga-list-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.eiga-new-badge {
	display: inline-block;
	background: var(--eiga-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 3px 9px;
	border-radius: 2px;
}
.eiga-list-thumb {
	flex: 0 0 240px;
	aspect-ratio: 16 / 9;
	border-radius: 3px;
	overflow: hidden;
	background: var(--eiga-line);
}
.eiga-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eiga-list-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.eiga-list-title { font-size: 17px; }
.eiga-list-title a:hover { color: var(--eiga-accent); }
.eiga-list-meta {
	display: flex;
	gap: 12px;
	font-size: 12px;
	color: var(--eiga-sub);
}
.eiga-more {
	align-self: flex-start;
	font-size: 13px;
	font-weight: 700;
	color: var(--eiga-accent);
	margin-top: 4px;
}
.eiga-more:hover { text-decoration: underline; }

.eiga-count-text {
	font-size: 12px;
	color: var(--eiga-sub);
	text-align: right;
	margin: 4px 0 16px;
}

@media (max-width: 600px) {
	.eiga-list-item { flex-direction: column; }
	.eiga-list-thumb { flex-basis: auto; }
}

/* ---------- Sidebar widgets ---------- */
.eiga-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.eiga-widget {
	background: var(--eiga-card);
	border: 1px solid var(--eiga-line);
	border-radius: 4px;
	padding: 16px;
}
.eiga-widget-title {
	font-size: 14px;
	border-bottom: 2px solid var(--eiga-accent);
	padding-bottom: 8px;
	margin-bottom: 12px;
}
/* アクセスランキング: 見やすさ重視で番号を大きく独立させ、行間に区切り線を
   入れてスキャンしやすくする。サムネイルとタイトルも一回り大きく。 */
.eiga-widget-ranking li {
	padding: 13px 0;
	border-bottom: 1px solid var(--eiga-line);
}
.eiga-widget-ranking li:first-child { padding-top: 2px; }
.eiga-widget-ranking li:last-child { padding-bottom: 2px; border-bottom: 0; }
.eiga-widget-ranking a {
	display: flex;
	align-items: center;
	gap: 12px;
}
.eiga-rank-num {
	flex: 0 0 26px;
	font-size: 20px;
	font-weight: 800;
	font-style: italic;
	color: var(--eiga-sub);
	text-align: center;
	line-height: 1;
}
.eiga-rank-num.is-top { color: var(--eiga-accent); }
.eiga-widget-thumb {
	flex: 0 0 72px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 3px;
	background: var(--eiga-line);
}
.eiga-widget-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eiga-widget-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.eiga-widget-post-title {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eiga-widget-views {
	font-size: 11px;
	color: var(--eiga-sub);
}
.eiga-widget-cats li { border-bottom: 1px solid var(--eiga-line); }
.eiga-widget-cats li:last-child { border-bottom: 0; }
.eiga-widget-cats a {
	display: flex;
	justify-content: space-between;
	padding: 8px 2px;
	font-size: 13px;
}
.eiga-widget-cats a:hover { color: var(--eiga-accent); }
.eiga-widget-count { color: var(--eiga-sub); font-size: 12px; }

@media (max-width: 900px) {
	.eiga-layout { grid-template-columns: 1fr; }
}

/* ---------- Related posts ---------- */
.eiga-related {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--eiga-line);
}
.eiga-related-title { font-size: 18px; }
.eiga-grid-related {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.eiga-grid-related .eiga-card-body { padding: 10px; gap: 4px; }
.eiga-grid-related .eiga-card-title { font-size: 14px; }

/* ---------- Single post ---------- */
.eiga-single {
	padding: 4px 0 8px;
}
.eiga-single-header {
	margin-bottom: 24px;
}
.eiga-single-header .eiga-cat {
	margin-bottom: 12px;
}
.eiga-single-title {
	font-size: 28px;
	font-weight: 700;
}
.eiga-single-meta {
	font-size: 13px;
	color: var(--eiga-sub);
	margin-top: 8px;
}
.eiga-single-thumb {
	margin: 24px 0;
	border-radius: 4px;
	overflow: hidden;
	background: var(--eiga-line);
	aspect-ratio: 16/9;
}
.eiga-single-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eiga-content {
	font-size: 16px;
}
.eiga-content p { margin: 0 0 1.4em; }
.eiga-content h2, .eiga-content h3 {
	margin-top: 2em;
	border-left: 4px solid var(--eiga-accent);
	padding-left: 10px;
}
.eiga-content img { border-radius: 4px; margin: 1.5em 0; }
.eiga-content blockquote {
	border-left: 3px solid var(--eiga-line);
	margin: 1.5em 0;
	padding: 0.2em 1em;
	color: var(--eiga-sub);
}

.eiga-single-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--eiga-line);
	font-size: 13px;
	gap: 16px;
}
.eiga-single-nav a { color: var(--eiga-sub); }
.eiga-single-nav a:hover { color: var(--eiga-accent); }

/* ---------- Tags ---------- */
.eiga-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.eiga-tags li a {
	display: inline-block;
	font-size: 12px;
	color: var(--eiga-sub);
	background: var(--eiga-card);
	border: 1px solid var(--eiga-line);
	border-radius: 20px;
	padding: 5px 12px;
}
.eiga-tags li a:hover {
	color: #fff;
	background: var(--eiga-accent);
	border-color: var(--eiga-accent);
}
.eiga-tags-cloud { margin-top: 0; }

/* ---------- Genre chips ---------- */
.eiga-genres {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
}
.eiga-genres li a {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: var(--eiga-sub);
	background: transparent;
	border: 1px solid var(--eiga-line);
	border-radius: 20px;
	padding: 3px 11px;
}
.eiga-genres li a:hover {
	color: #fff;
	background: var(--eiga-accent);
}
.eiga-single-header .eiga-genres { margin-bottom: 4px; }
.eiga-genres-wide {
	flex-direction: column;
	gap: 4px;
}
.eiga-genres-wide li a {
	display: flex;
	justify-content: space-between;
	border-radius: 3px;
	font-size: 12px;
	padding: 6px 10px;
}
.eiga-genres-wide .eiga-widget-count { color: inherit; opacity: 0.7; }

/* ---------- Share buttons ---------- */
.eiga-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}
.eiga-share-label {
	font-size: 13px;
	color: var(--eiga-sub);
	margin-right: 4px;
}
.eiga-share-btn {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	padding: 7px 16px;
	border-radius: 20px;
}
.eiga-share-x { background: #14171a; }
.eiga-share-line { background: #06c755; }
.eiga-share-fb { background: #1877f2; }
.eiga-share-btn:hover { opacity: 0.85; }

/* ---------- Release calendar ---------- */
.eiga-calendar-intro { margin-bottom: 24px; }
.eiga-calendar-heading {
	font-size: 16px;
	margin: 32px 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--eiga-line);
}
.eiga-calendar-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.eiga-calendar-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--eiga-card);
	border: 1px solid var(--eiga-line);
	border-radius: 3px;
}
.eiga-calendar-date {
	font-size: 13px;
	font-weight: 700;
	color: var(--eiga-sub);
	flex: 0 0 auto;
}
.eiga-calendar-title { font-size: 14px; }
.eiga-calendar-title:hover { color: var(--eiga-accent); }

/* ---------- Page ---------- */
.eiga-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 20px 80px;
}
.eiga-page-title {
	font-size: 26px;
	margin-bottom: 24px;
}

/* ---------- Search ---------- */
.eiga-search-form {
	display: flex;
	gap: 10px;
}
.eiga-search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--eiga-line);
	border-radius: 4px;
	padding: 13px 16px;
	font-size: 15px;
}
.eiga-search-form button {
	border: 1px solid var(--eiga-ink);
	background: var(--eiga-ink);
	color: #fff;
	border-radius: 4px;
	padding: 13px 22px;
	font-size: 15px;
	cursor: pointer;
}

.eiga-empty {
	text-align: center;
	color: var(--eiga-sub);
	padding: 80px 0;
}

/* ---------- Comments ---------- */
.eiga-comments {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--eiga-line);
}
.eiga-comments-title {
	font-size: 18px;
	border-left: 4px solid var(--eiga-accent);
	padding-left: 10px;
}
.eiga-comment-list { margin-top: 20px; }
.eiga-comment-list li { margin-bottom: 4px; }
.eiga-comment-list .comment-body {
	display: flex;
	gap: 12px;
	background: var(--eiga-card);
	border: 1px solid var(--eiga-line);
	border-radius: 4px;
	padding: 14px 16px;
	margin-bottom: 16px;
}
.eiga-comment-list .avatar {
	border-radius: 50%;
	flex: 0 0 auto;
}
.eiga-comment-list .comment-author { font-size: 13px; font-weight: 700; }
.eiga-comment-list .comment-author .says { display: none; }
.eiga-comment-list .comment-metadata {
	font-size: 11px;
	color: var(--eiga-sub);
	margin-bottom: 6px;
}
.eiga-comment-list .comment-content p { margin: 0 0 0.8em; font-size: 14px; }
.eiga-comments-closed {
	color: var(--eiga-sub);
	font-size: 13px;
	background: var(--eiga-card);
	border: 1px solid var(--eiga-line);
	border-radius: 4px;
	padding: 14px 16px;
}
#commentform { margin-top: 20px; }
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
	width: 100%;
	border: 1px solid var(--eiga-line);
	border-radius: 3px;
	padding: 9px 12px;
	font-size: 13px;
	margin-bottom: 10px;
	font-family: inherit;
	background: var(--eiga-card);
	color: var(--eiga-ink);
}
#commentform input:focus, #commentform textarea:focus {
	outline: none;
	border-color: var(--eiga-accent);
}
#commentform button, #commentform input[type="submit"] {
	border: 1px solid var(--eiga-accent);
	background: var(--eiga-accent);
	color: #fff;
	border-radius: 20px;
	padding: 9px 24px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
#commentform button:hover, #commentform input[type="submit"]:hover { opacity: 0.88; }

/* ---------- 下部: 自動で流れるおすすめ記事(無限マーキー) ---------- */
.eiga-auto-recommend {
	margin-top: 64px;
	padding: 56px 0 60px;
	background: var(--eiga-card);
	border-top: 1px solid var(--eiga-line);
	border-bottom: 1px solid var(--eiga-line);
	overflow: hidden;
}
.eiga-auto-recommend-title {
	font-size: 22px;
	font-weight: 700;
	border-left: 4px solid var(--eiga-accent);
	padding-left: 12px;
	margin-bottom: 28px;
}
.eiga-auto-recommend-viewport {
	overflow: hidden;
	/* 左右端をふわっと隠すマスク。フル幅で使うのでラップ幅に依存しない。 */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.eiga-auto-recommend-track {
	display: flex;
	gap: 24px;
	width: max-content;
	padding: 0 20px;
	animation: eiga-marquee 55s linear infinite;
}
.eiga-auto-recommend-viewport:hover .eiga-auto-recommend-track {
	animation-play-state: paused;
}
@keyframes eiga-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.eiga-auto-recommend-card {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	width: 340px;
	background: var(--eiga-bg);
	border: 1px solid var(--eiga-line);
	border-radius: 6px;
	overflow: hidden;
}
.eiga-auto-recommend-card:hover { border-color: var(--eiga-accent); }
.eiga-auto-recommend-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--eiga-line);
}
.eiga-auto-recommend-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eiga-auto-recommend-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}
.eiga-auto-recommend-post-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--eiga-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eiga-auto-recommend-card:hover .eiga-auto-recommend-post-title { color: var(--eiga-accent); }
@media (prefers-reduced-motion: reduce) {
	.eiga-auto-recommend-track { animation: none; }
}
@media (max-width: 600px) {
	.eiga-auto-recommend { padding: 40px 0 44px; }
	.eiga-auto-recommend-title { font-size: 18px; margin-bottom: 20px; }
	.eiga-auto-recommend-card { width: 240px; }
	.eiga-auto-recommend-text { padding: 12px; }
	.eiga-auto-recommend-post-title { font-size: 14px; }
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--eiga-card);
	border-top: 3px solid var(--eiga-accent);
	padding: 48px 0 0;
	margin-top: 64px;
	color: var(--eiga-sub);
}
.eiga-footer-top {
	text-align: center;
	padding-bottom: 28px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--eiga-line);
}
.eiga-footer-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--eiga-header-text);
	margin-bottom: 10px;
}
.eiga-footer-rule {
	display: block;
	width: 28px;
	height: 2px;
	margin-top: 10px;
	background: var(--eiga-accent);
}
.eiga-footer-desc {
	font-size: 12px;
	color: var(--eiga-sub);
	max-width: 480px;
	margin: 0 auto;
	letter-spacing: 0.02em;
}
.eiga-footer-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 28px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--eiga-line);
}
.eiga-footer-col { flex: 1 1 160px; }
.eiga-footer-col-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--eiga-header-text);
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}
.eiga-footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.eiga-footer-col a { font-size: 13px; color: var(--eiga-sub); }
.eiga-footer-col a:hover { color: var(--eiga-accent); }
.site-footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 12px;
	color: var(--eiga-sub);
	padding: 0 0 24px;
}
.eiga-copyright { letter-spacing: 0.03em; }
.site-footer nav ul {
	display: flex;
	gap: 16px;
}
.site-footer nav a:hover { color: var(--eiga-accent); }
.eiga-totop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--eiga-sub);
	padding: 5px 14px 5px 5px;
	border: 1px solid var(--eiga-line);
	border-radius: 20px;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.eiga-totop-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--eiga-accent);
	color: var(--eiga-accent);
	font-size: 12px;
	transition: transform 0.2s ease;
}
.eiga-totop:hover { border-color: var(--eiga-accent); color: var(--eiga-accent); }
.eiga-totop:hover .eiga-totop-icon { transform: translateY(-2px); }

@media (max-width: 600px) {
	/* 縦画面では検索欄を下に落とさず、タイトルの右に並べる。ナビはその下の行へ。 */
	.site-header-inner {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"logo search"
			"nav   nav";
		align-items: center;
		row-gap: 10px;
		column-gap: 8px;
	}
	.site-branding { grid-area: logo; }
	.eiga-header-search {
		grid-area: search;
		order: 0;
		flex: none;
		max-width: none;
		width: auto;
		margin-left: 0;
	}
	.eiga-header-search .eiga-search-form { gap: 6px; }
	.eiga-header-search .eiga-search-form input[type="search"] {
		font-size: 12px;
		padding: 9px 10px;
	}
	.eiga-header-search .eiga-search-form button {
		font-size: 12px;
		padding: 9px 10px;
	}
	.main-nav { grid-area: nav; margin-left: 0; }
	.eiga-category-nav { grid-area: nav; }
	.eiga-category-nav ul { gap: 16px; }
	.eiga-logo-word { font-size: 18px; }
	.tagline { display: none; }
	.eiga-single-title { font-size: 22px; }
}