/*
Theme Name: まなびアーカイブ
Theme URI: https://manabi-archives.com
Author: まなびアーカイブ編集部
Description: 中学・高校の数学・英語をつまずきの一歩前から解き直す学習サイトのフルサイト編集（FSE）テーマ。
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: manabi
Tags: full-site-editing, block-patterns, education
*/

/* ============================================================
   Custom CSS variables (theme.json で出ない値の補完)
   ============================================================ */
:root {
	--ma-radius-xs: 4px;
	--ma-radius-sm: 6px;
	--ma-radius-md: 10px;
	--ma-radius-lg: 14px;
	--ma-radius-xl: 20px;
	--ma-radius-full: 999px;
	--ma-ease: cubic-bezier(.2,.7,.2,1);

	--ma-sh-1: 0 1px 0 rgba(22,32,42,.04), 0 1px 2px rgba(22,32,42,.06);
	--ma-sh-2: 0 2px 4px rgba(22,32,42,.06), 0 8px 24px rgba(22,32,42,.06);
	--ma-sh-3: 0 12px 40px rgba(0,126,221,.12);

	--ma-blue: var(--wp--preset--color--blue-500);
	--ma-blue-700: var(--wp--preset--color--blue-700);
	--ma-blue-900: var(--wp--preset--color--blue-900);
	--ma-blue-200: var(--wp--preset--color--blue-200);
	--ma-blue-100: var(--wp--preset--color--blue-100);
	--ma-blue-50: var(--wp--preset--color--blue-50);
	--ma-pink: var(--wp--preset--color--pink-500);
	--ma-pink-900: var(--wp--preset--color--pink-900);
	--ma-pink-200: var(--wp--preset--color--pink-200);
	--ma-pink-50: var(--wp--preset--color--pink-50);
	--ma-ink-900: var(--wp--preset--color--ink-900);
	--ma-ink-700: var(--wp--preset--color--ink-700);
	--ma-ink-500: var(--wp--preset--color--ink-500);
	--ma-ink-400: var(--wp--preset--color--ink-400);
	--ma-line: var(--wp--preset--color--line);
	--ma-line-2: var(--wp--preset--color--line-2);
	--ma-bg: var(--wp--preset--color--bg);
	--ma-paper: var(--wp--preset--color--paper);
	--ma-success: var(--wp--preset--color--success);
	--ma-warn: var(--wp--preset--color--warn);
	--ma-danger: var(--wp--preset--color--danger);
}

body { color: var(--ma-ink-900); -webkit-font-smoothing: antialiased; }
a { color: var(--ma-blue-700); }
a:hover { text-decoration: underline; }

/* ============================================================
   Buttons (block style: is-style-primary / accent / ghost)
   ============================================================ */
.wp-block-button .wp-block-button__link {
	border-radius: var(--ma-radius-md);
	font-weight: 700;
	padding: 12px 24px;
	font-size: 14px;
	border: 1.5px solid transparent;
	transition: .15s var(--ma-ease);
	font-family: var(--wp--preset--font-family--sans);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wp-block-button.is-style-primary .wp-block-button__link {
	background: var(--ma-blue);
	color: #fff;
	border-color: var(--ma-blue);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover {
	background: var(--ma-blue-700);
	border-color: var(--ma-blue-700);
	text-decoration: none;
}
.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--ma-pink);
	color: #fff;
	border-color: var(--ma-pink);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background: var(--ma-pink-900);
	border-color: var(--ma-pink-900);
	text-decoration: none;
}
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--ma-blue-700);
	border-color: var(--ma-blue-200);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--ma-blue-50);
	border-color: var(--ma-blue);
	text-decoration: none;
}
.wp-block-button.is-style-text .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	padding: 6px 4px;
	color: var(--ma-blue-700);
}
@media (max-width: 640px) {
	.wp-block-button .wp-block-button__link { min-height: 48px; }
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--ma-radius-full);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}
.badge--cat, .badge.cat { background: var(--ma-blue); color: #fff; }
.badge--cat-pink, .badge.cat-pink { background: var(--ma-pink); color: #fff; }
.badge--soft, .badge.cat-soft { background: var(--ma-blue-50); color: var(--ma-blue-700); border: 1px solid var(--ma-blue-200); }
.badge--new, .badge.new { background: var(--ma-pink-50); color: var(--ma-pink); border: 1px solid var(--ma-pink-200); }

/* ============================================================
   Site Header
   ============================================================ */
.site-header {
	background: var(--ma-paper);
	border-bottom: 1px solid var(--ma-line);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(8, 27, 50, .04);
}
/* fixed header の高さぶん本文を下げる */
.wp-site-blocks { padding-top: 70px; }
:where(.wp-site-blocks) > main.wp-block-group { margin-block-start: 0; }
:where(.wp-site-blocks) > main.wp-block-group > *,
:where(.wp-site-blocks) > main.wp-block-group .is-layout-flow > *,
.duo-grid__col > * {
	margin-block-start: 0;
}
.site-header__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.site-header__left {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.site-header__right {
	display: flex;
	align-items: center;
	gap: 28px;
}
.site-header__logo-link {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.site-header__logo-img,
.site-header .wp-block-site-logo img {
	height: 36px;
	width: auto;
	display: block;
}

/* ナビゲーション（アイコン付き） */
.site-header__nav-fallback {
	display: flex;
	align-items: center;
}
.site-header__nav-fallback a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 60px;
	padding: 4px 12px;
	font-size: 12px;
	color: var(--ma-ink-700);
	font-weight: 700;
	text-decoration: none;
	transition: .15s var(--ma-ease);
	line-height: 1.2;
	border-right: 1px solid var(--ma-line);
}
.site-header__nav-fallback a:last-child {
	border-right: 0;
}
.site-header__nav-fallback a i {
	font-size: 18px;
	color: var(--ma-blue);
	transition: .15s var(--ma-ease);
}
.site-header__nav-fallback a:hover,
.site-header__nav-fallback a.is-active { color: var(--ma-blue); }
.site-header__nav-fallback a:hover i { transform: translateY(-1px); }

@media (max-width: 1024px) {
	.site-header__right { gap: 20px; }
}
@media (max-width: 768px) {
	.site-header__inner { padding: 12px 16px; gap: 12px; }
	.site-header__nav-fallback { display: none; }
}

/* ============================================================
   Site Footer
   ============================================================ */
.site-footer {
	background: var(--ma-blue-900);
	color: #cfdef0;
	padding: 56px 32px 32px;
}
.site-footer__cols {
	max-width: 1240px;
	margin: 0 auto 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,.12);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}
.site-footer__col-head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .05em;
	margin-bottom: 14px;
}
.site-footer__col-head i {
	color: var(--ma-blue);
	font-size: 13px;
}
.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.site-footer__links a {
	color: #cfdef0;
	font-size: 13px;
	text-decoration: none;
	transition: .15s var(--ma-ease);
}
.site-footer__links a:hover { color: #fff; }

.site-footer__meta {
	max-width: 1240px;
	margin: 0 auto;
	font-size: 12px;
	color: #8caac9;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}
.site-footer__copyright { margin: 0; }
.site-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
.site-footer__nav a {
	color: #8caac9;
	text-decoration: none;
	transition: .15s var(--ma-ease);
}
.site-footer__nav a:hover { color: #fff; }

@media (max-width: 1024px) {
	.site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.site-footer { padding: 40px 16px 24px; }
	.site-footer__cols { grid-template-columns: 1fr; gap: 24px; }
	.site-footer__meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb {
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 32px;
	font-size: 12px;
	color: var(--ma-ink-500);
}
.breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.breadcrumb li::after {
	content: "›";
	color: var(--ma-ink-400);
	margin-left: 8px;
	font-size: 11px;
}
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--ma-ink-500); }
.breadcrumb a:hover { color: var(--ma-blue); }
.breadcrumb li:last-child span { color: var(--ma-ink-900); font-weight: 600; }
@media (max-width: 640px) {
	.breadcrumb { padding: 10px 16px; font-size: 11px; }
}

/* ============================================================
   TOP HERO
   ============================================================ */
main > .top-hero:first-child,
main > .wp-block-group:first-child .top-hero {
	margin-block-start: 0;
}
.top-hero {
	background: var(--ma-blue-50);
	margin-top: 0;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(0,126,221,.05) 1px, transparent 1px),
		radial-gradient(circle at 70% 60%, rgba(232,39,121,.04) 1px, transparent 1px);
	background-size: 32px 32px, 24px 24px;
	border-bottom: 1px solid var(--ma-blue-200);
}
.top-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 32px;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 48px;
	align-items: stretch;
}
.top-hero__text {
	min-width: 0;
	align-self: center;
}
.top-hero__visual {
	min-width: 0;
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin-top: -80px;
	margin-bottom: -80px;
}
.top-hero__visual img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: bottom;
	display: block;
}
.top-hero__eyebrow {
	font-size: 12px;
	letter-spacing: .18em;
	color: var(--ma-blue-700);
	font-weight: 700;
	margin: 0 0 12px;
	text-transform: uppercase;
}
.top-hero__title {
	font-size: 44px;
	font-weight: 900;
	margin: 0 0 18px;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var(--ma-blue-900);
}
.top-hero__accent { color: var(--ma-pink); }
.top-hero__lead {
	font-size: 16px;
	color: var(--ma-ink-700);
	margin: 0 0 28px;
	line-height: 1.85;
	max-width: 720px;
}
.top-hero__cta { gap: 12px; flex-wrap: wrap; }

.hero-search {
	background: var(--ma-paper);
	border: 1px solid var(--ma-blue-200);
	border-radius: var(--ma-radius-lg);
	box-shadow: var(--ma-sh-3);
	max-width: 560px;
	overflow: hidden;
	margin-bottom: 24px;
}
.hero-search__tabs {
	display: flex;
	background: var(--ma-bg);
	border-bottom: 1px solid var(--ma-line-2);
}
.hero-search__tab {
	flex: 1;
	border: none;
	background: transparent;
	padding: 14px 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ma-ink-500);
	cursor: pointer;
	letter-spacing: .04em;
	position: relative;
	transition: .15s var(--ma-ease);
}
.hero-search__tab:hover { color: var(--ma-blue); background: rgba(255,255,255,.6); }
.hero-search__tab.is-active { color: var(--ma-blue); background: var(--ma-paper); }
.hero-search__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 3px;
	background: var(--ma-blue);
}
.hero-search__field {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 18px 18px 22px;
	background: var(--ma-paper);
}
.hero-search__field i.fa-magnifying-glass {
	color: var(--ma-blue);
	font-size: 16px;
	width: 38px; height: 38px;
	border-radius: var(--ma-radius-full);
	background: var(--ma-blue-50);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.hero-search__field input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 15px;
	color: var(--ma-ink-900);
	font-weight: 500;
	min-width: 0;
	padding: 8px 0;
}
.hero-search__field input::placeholder { color: var(--ma-ink-400); font-weight: 400; }
.hero-search__go {
	padding: 12px 22px;
	border-radius: var(--ma-radius-md);
	font-size: 14px;
	flex-shrink: 0;
	font-weight: 900;
	letter-spacing: .04em;
	background: var(--ma-blue);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: .15s var(--ma-ease);
}
.hero-search__go:hover { background: var(--ma-blue-700); }
.hero-search__suggest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px 20px 14px;
	border-top: 1px solid var(--ma-line-2);
	font-size: 11px;
	background: linear-gradient(180deg, var(--ma-paper), var(--ma-bg));
}
.hero-search__lbl {
	color: var(--ma-ink-500);
	font-weight: 700;
	letter-spacing: .06em;
}
.hero-search__suggest a {
	color: var(--ma-blue-700);
	font-weight: 700;
	padding: 4px 10px;
	background: var(--ma-paper);
	border: 1px solid var(--ma-blue-200);
	border-radius: var(--ma-radius-full);
	font-size: 11px;
	text-decoration: none;
	transition: .15s var(--ma-ease);
}
.hero-search__suggest a:hover {
	background: var(--ma-blue);
	color: #fff;
	border-color: var(--ma-blue);
}
@media (max-width: 960px) {
	.top-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		align-items: center;
	}
	.top-hero__visual {
		order: -1;
		margin-top: 0;
		margin-bottom: 0;
	}
	.top-hero__visual img {
		height: auto;
		max-width: 480px;
		object-fit: contain;
		aspect-ratio: 3 / 2;
		border-radius: var(--ma-radius-lg);
	}
}
@media (max-width: 768px) {
	.top-hero__inner { padding: 48px 28px; }
	.top-hero__title { font-size: 32px; }
}
@media (max-width: 640px) {
	.top-hero__inner { padding: 36px 16px; gap: 24px; }
	.top-hero__title { font-size: 26px; line-height: 1.35; }
	.top-hero__lead { font-size: 14px; }
	.top-hero__visual img { max-width: 360px; aspect-ratio: 3 / 2; }
	.hero-search__field { padding: 14px; gap: 8px; }
	.hero-search__field input { font-size: 13px; }
	.hero-search__go { padding: 10px 16px; font-size: 12px; }
}

/* ============================================================
   TOP セクション共通
   ============================================================ */
.top-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 32px;
}
.top-section__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	flex-wrap: wrap;
	gap: 16px;
}
.top-section__title {
	font-size: 26px;
	font-weight: 900;
	margin: 0;
	letter-spacing: -.005em;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.top-section__title::before {
	content: "";
	width: 4px;
	height: 24px;
	background: var(--ma-blue);
	border-radius: var(--ma-radius-xs);
	display: inline-block;
}
.top-section__title > i {
	color: var(--ma-blue);
	font-size: 22px;
	margin-right: -2px;
}
.top-section__more { font-size: 13px; margin: 0; }
.top-section__more a { color: var(--ma-blue-700); font-weight: 700; text-decoration: none; }
.top-section__more a:hover { color: var(--ma-blue); text-decoration: underline; }

/* ============================================================
   カテゴリーカード
   ============================================================ */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.cat-card {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-lg);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: .18s var(--ma-ease);
	text-decoration: none;
	color: var(--ma-ink-900);
}
.cat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ma-sh-3);
	border-color: var(--ma-blue-200);
	text-decoration: none;
}
.cat-card__ico {
	width: 56px; height: 56px;
	border-radius: var(--ma-radius-md);
	background: var(--ma-blue-50);
	color: var(--ma-blue);
	display: grid;
	place-items: center;
	transition: .18s var(--ma-ease);
}
.cat-card__ico svg {
	width: 32px;
	height: 32px;
	color: inherit;
	display: block;
}
.cat-card:hover .cat-card__ico {
	background: var(--ma-blue);
	color: #fff;
}
.cat-card__title { font-size: 18px; font-weight: 900; margin: 0; }
.cat-card__desc { font-size: 13px; color: var(--ma-ink-500); margin: 0; line-height: 1.7; }

/* 5教科グリッド */
.cat-grid--5 {
	grid-template-columns: repeat(5, 1fr);
}

/* 学年カード（横並び6枚） */
.year-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
.year-card {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-lg);
	padding: 32px 16px;
	text-align: center;
	transition: .18s var(--ma-ease);
	text-decoration: none;
	color: var(--ma-ink-900);
	display: flex;
	align-items: center;
	justify-content: center;
}
.year-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ma-sh-3);
	border-color: var(--ma-blue-200);
	color: var(--ma-blue);
	text-decoration: none;
}
.year-card__label {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: .04em;
}

@media (max-width: 1024px) {
	.cat-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.cat-grid--5 { grid-template-columns: repeat(2, 1fr); }
	.year-grid { grid-template-columns: repeat(3, 1fr); }
	.top-section { padding: 56px 28px; }
}
@media (max-width: 640px) {
	.top-section { padding: 40px 16px; }
	.top-section__title { font-size: 20px; }
	.top-section__title::before { height: 20px; }
	.top-section__title > i { font-size: 18px; }
	.cat-card { padding: 18px 16px; }
	.cat-card__title { font-size: 15px; }
	.year-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.year-card { padding: 20px 8px; }
	.year-card__label { font-size: 18px; }
}

/* ============================================================
   投稿カードグリッド
   ============================================================ */
.post-grid-wrap > .wp-block-post-template,
.archive-content__list .wp-block-post-template,
.related__list .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-card {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-lg);
	overflow: hidden;
	transition: .18s var(--ma-ease);
	display: flex;
	flex-direction: column;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--ma-sh-3); }
.post-card__thumb img {
	aspect-ratio: 16/9;
	object-fit: cover;
	width: 100%;
	display: block;
}
.post-card__thumb.wp-block-post-featured-image { margin: 0; }
.post-card__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.post-card__cat { font-size: 11px; font-weight: 700; }
.post-card__cat a {
	background: var(--ma-blue);
	color: #fff;
	padding: 3px 10px;
	border-radius: var(--ma-radius-full);
	text-decoration: none;
}
.post-card__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	line-height: 1.55;
}
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--ma-blue); }
.post-card__date {
	font-size: 11px;
	color: var(--ma-ink-500);
	margin-top: auto;
	letter-spacing: .04em;
}
@media (max-width: 768px) {
	.post-grid-wrap > .wp-block-post-template,
	.archive-content__list .wp-block-post-template,
	.related__list .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.post-grid-wrap > .wp-block-post-template,
	.archive-content__list .wp-block-post-template,
	.related__list .wp-block-post-template {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ============================================================
   TOP 2カラムラッパー（学習＋About / 特集＋コラム）
   ============================================================ */
.top-explore { background: var(--ma-bg); }
.top-articles { background: var(--ma-paper); }

.duo-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: stretch;
}
.duo-grid__col { min-width: 0; display: flex; flex-direction: column; }
.duo-grid__col > * { flex: 1; }

@media (max-width: 1024px) {
	.duo-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   特集（バナー型 4列×2行）
   ============================================================ */
.top-featured { background: var(--ma-bg); }
.banner-section { width: 100%; }
.banner-section__head {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
}
.banner-section__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 22px;
	font-weight: 900;
	margin: 0;
	color: var(--ma-ink-900);
	letter-spacing: -.005em;
}
.banner-section__title i { color: var(--ma-blue); font-size: 20px; }
.banner-section__empty {
	font-size: 13px;
	color: var(--ma-ink-500);
	background: var(--ma-paper);
	border: 1px dashed var(--ma-line);
	border-radius: var(--ma-radius-md);
	padding: 40px 20px;
	text-align: center;
	line-height: 1.8;
	margin: 0;
}

.banner-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.banner-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-radius: var(--ma-radius-md);
	overflow: hidden;
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	transition: .18s var(--ma-ease);
	text-decoration: none;
	color: inherit;
}
.banner-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ma-sh-3);
	border-color: var(--ma-blue-200);
	text-decoration: none;
}
.banner-card[aria-disabled="true"] { pointer-events: none; opacity: .6; }
.banner-card__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	background: var(--ma-bg);
}
.banner-card__placeholder {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	color: var(--ma-blue-200);
	font-size: 28px;
	background: linear-gradient(135deg, var(--ma-blue-50), var(--ma-paper));
}
.banner-card__title {
	display: block;
	padding: 0 14px 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ma-ink-900);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 1024px) {
	.banner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.banner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
	.banner-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   コラム（4列×2行・記事一覧右上）
   ============================================================ */
.top-column { background: var(--ma-paper); }
.column-section { width: 100%; }
.column-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 16px;
}
.column-section__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 22px;
	font-weight: 900;
	margin: 0;
	color: var(--ma-ink-900);
	letter-spacing: -.005em;
}
.column-section__title i { color: var(--ma-blue); font-size: 20px; }
.column-section__more {
	font-size: 13px;
	font-weight: 700;
	color: var(--ma-blue-700);
	text-decoration: none;
	transition: .15s var(--ma-ease);
}
.column-section__more:hover { color: var(--ma-blue); text-decoration: underline; }
.column-section__empty {
	font-size: 13px;
	color: var(--ma-ink-500);
	background: var(--ma-bg);
	border: 1px dashed var(--ma-line);
	border-radius: var(--ma-radius-md);
	padding: 40px 20px;
	text-align: center;
	margin: 0;
}

.column-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.col-card {
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-md);
	overflow: hidden;
	background: var(--ma-paper);
	display: flex;
	flex-direction: column;
	transition: .18s var(--ma-ease);
	text-decoration: none;
	color: inherit;
}
.col-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ma-sh-3);
	border-color: var(--ma-blue-200);
	text-decoration: none;
}
.col-card__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ma-bg);
}
.col-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: .25s var(--ma-ease);
}
.col-card:hover .col-card__thumb img { transform: scale(1.03); }
.col-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	color: var(--ma-blue-200);
	font-size: 28px;
	background: linear-gradient(135deg, var(--ma-blue-50), var(--ma-paper));
}
.col-card__body {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.col-card__title {
	font-size: 13px;
	font-weight: 700;
	margin: 0;
	line-height: 1.5;
	color: var(--ma-ink-900);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.col-card__date {
	font-size: 10px;
	color: var(--ma-ink-500);
	margin: auto 0 0;
	letter-spacing: .04em;
}
@media (max-width: 1024px) {
	.column-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.column-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
	.column-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   学習コンテンツ（教科・学年・用途を縦に積む）
   ============================================================ */
.learning-stack {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-lg);
	padding: 28px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.learning-stack__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 900;
	margin: 0;
	color: var(--ma-ink-900);
	letter-spacing: -.005em;
}
.learning-stack__title i { color: var(--ma-blue); font-size: 18px; }

.learning-stack__block + .learning-stack__block {
	border-top: 1px solid var(--ma-line-2);
	padding-top: 24px;
}
.learning-stack__head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--ma-ink-700);
	letter-spacing: .04em;
}
.learning-stack__head i { color: var(--ma-blue); font-size: 13px; }

.learning-subjects {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}
.learning-subject {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 4px;
	background: var(--ma-bg);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-md);
	color: var(--ma-ink-900);
	text-decoration: none;
	transition: .18s var(--ma-ease);
}
.learning-subject:hover {
	background: var(--ma-blue);
	border-color: var(--ma-blue);
	color: #fff;
	transform: translateY(-2px);
}
.learning-subject__ico {
	width: 28px; height: 28px;
	display: grid;
	place-items: center;
	color: var(--ma-blue);
	transition: .18s var(--ma-ease);
}
.learning-subject:hover .learning-subject__ico { color: #fff; }
.learning-subject__ico svg { width: 22px; height: 22px; display: block; }
.learning-subject__label { font-size: 11px; font-weight: 700; }

.learning-grades {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
}
.learning-grade {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 4px;
	background: var(--ma-bg);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-md);
	color: var(--ma-ink-900);
	text-decoration: none;
	transition: .15s var(--ma-ease);
}
.learning-grade:hover {
	background: var(--ma-blue);
	border-color: var(--ma-blue);
	color: #fff;
}
.learning-grade__label { font-size: 12px; font-weight: 700; }

.learning-genres {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.learning-genre {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 8px;
	background: var(--ma-bg);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-md);
	color: var(--ma-ink-900);
	text-decoration: none;
	transition: .15s var(--ma-ease);
	font-size: 13px;
	font-weight: 700;
}
.learning-genre i { color: var(--ma-blue); font-size: 14px; transition: .15s var(--ma-ease); }
.learning-genre:hover {
	background: var(--ma-blue);
	border-color: var(--ma-blue);
	color: #fff;
}
.learning-genre:hover i { color: #fff; }

@media (max-width: 640px) {
	.learning-stack { padding: 20px; gap: 20px; }
	.learning-stack__block + .learning-stack__block { padding-top: 20px; }
	.learning-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.learning-grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.learning-genres { grid-template-columns: 1fr; }
}

/* ============================================================
   まなびアーカイブについて（右カラム）
   ============================================================ */
.about-stack {
	background: linear-gradient(135deg, var(--ma-blue-50), var(--ma-paper));
	border: 1px solid var(--ma-blue-200);
	border-radius: var(--ma-radius-lg);
	padding: 28px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 0;
}
.about-stack__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 900;
	margin: 0;
	color: var(--ma-blue-900);
	letter-spacing: -.005em;
}
.about-stack__title i { color: var(--ma-blue); font-size: 18px; }
.about-stack__visual {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px 0;
}
.about-stack__visual img {
	width: 100%;
	max-width: none;
	height: auto;
	display: block;
}
.about-stack__body { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.about-stack__lead {
	font-size: 14px;
	color: var(--ma-ink-700);
	line-height: 1.95;
	margin: 0;
}
.about-stack__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ma-blue);
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--ma-radius-full);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: .15s var(--ma-ease);
	align-self: center;
	margin-top: auto;
}
.about-stack__cta:hover { background: var(--ma-blue-700); transform: translateY(-1px); text-decoration: none; }

/* 学習コンテンツ／About のリンク：ホバー時の下線を消す */
.learning-stack a:hover,
.about-stack a:hover {
	text-decoration: none;
}

@media (max-width: 640px) {
	.about-stack { padding: 20px; gap: 16px; }
	.about-stack__lead { font-size: 13px; line-height: 1.85; }
}

/* ============================================================
   記事ページ：ヘッダー部
   ============================================================ */
.single-content .article-head {
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 32px 40px;
}
.article-head__meta-top { gap: 10px !important; margin-bottom: 14px; }
.article-head__date {
	font-size: 12px;
	color: var(--ma-ink-500);
	letter-spacing: .04em;
}
.article-head__title {
	font-size: 30px;
	font-weight: 900;
	margin: 0 0 16px;
	line-height: 1.45;
	letter-spacing: -.005em;
}
.article-head__meta {
	gap: 18px !important;
	font-size: 12px;
	color: var(--ma-ink-500);
	padding-top: 14px;
	border-top: 1px solid var(--ma-line-2);
}
.article-head__author { font-size: 12px; color: var(--ma-ink-700); }

.single-content__eyecatch {
	max-width: 1120px;
	margin: 0 auto 24px;
	padding: 0 32px;
}
.single-content__eyecatch img {
	border-radius: var(--ma-radius-lg);
	border: 1px solid var(--ma-line);
}

.single-content__layout {
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	align-items: flex-start;
}
.single-content__body {
	max-width: 800px;
	margin: 0 auto;
	width: 100%;
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-lg);
	padding: 48px 56px;
}
@media (max-width: 1024px) {
	.single-content__layout { grid-template-columns: 1fr; gap: 24px; padding: 24px 28px; }
	.single-content__body { padding: 36px 40px; }
}
@media (max-width: 640px) {
	.single-content .article-head { padding: 16px 16px 24px; }
	.article-head__title { font-size: 20px; line-height: 1.5; }
	.single-content__eyecatch { padding: 0 16px; }
	.single-content__layout { padding: 0 16px; gap: 0; }
	.single-content__body { padding: 24px 20px; border-radius: var(--ma-radius-md); }
}

/* ============================================================
   記事本文の見出し装飾
   ============================================================ */
.single-content__body h2 {
	font-size: 22px;
	font-weight: 900;
	margin: 48px 0 20px;
	padding: 6px 0 14px 16px;
	border-left: 4px solid var(--ma-blue);
	border-bottom: 1px solid var(--ma-line-2);
	line-height: 1.4;
}
.single-content__body h2:first-child { margin-top: 0; }
.single-content__body h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 36px 0 14px;
	line-height: 1.5;
	display: flex;
	align-items: center;
	gap: 10px;
}
.single-content__body h3::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ma-blue);
	flex-shrink: 0;
}
.single-content__body h4 {
	font-size: 15px;
	font-weight: 700;
	margin: 24px 0 10px;
	color: var(--ma-blue-900);
}
.single-content__body h4::before { content: "▍"; color: var(--ma-blue); margin-right: 6px; }
.single-content__body p {
	font-size: 15px;
	line-height: 1.95;
	margin: 0 0 1.2em;
}
.single-content__body p a {
	color: var(--ma-blue-700);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1.5px;
	text-decoration-color: var(--ma-blue-200);
}
.single-content__body p a:hover {
	color: var(--ma-blue);
	text-decoration-color: var(--ma-blue);
}
.single-content__body strong { font-weight: 900; color: var(--ma-ink-900); }

.single-content__body .mk-blue,
.has-mk-blue {
	background: linear-gradient(transparent 60%, var(--ma-blue-100) 60%);
	padding: 0 2px;
	font-weight: 700;
}
.single-content__body .mk-pink,
.has-mk-pink {
	background: linear-gradient(transparent 60%, var(--ma-pink-200) 60%);
	padding: 0 2px;
	font-weight: 700;
}

.single-content__body blockquote,
.single-content__body .wp-block-quote {
	margin: 24px 0;
	padding: 18px 22px;
	border-left: 3px solid var(--ma-pink);
	background: var(--ma-pink-50);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 16px;
	line-height: 1.85;
	color: var(--ma-pink-900);
	border-radius: 0 var(--ma-radius-sm) var(--ma-radius-sm) 0;
	font-weight: 600;
}

.single-content__body table,
.single-content__body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 14px;
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-sm);
	overflow: hidden;
}
.single-content__body th {
	background: var(--ma-blue-50);
	color: var(--ma-blue-900);
	padding: 12px 16px;
	text-align: left;
	font-weight: 700;
	font-size: 13px;
	border-bottom: 1px solid var(--ma-blue-200);
}
.single-content__body td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--ma-line-2);
}
.single-content__body tr:nth-child(even) td { background: var(--ma-bg); }

.single-content__body hr,
.single-content__body .wp-block-separator {
	border: none;
	height: 8px;
	margin: 32px 0;
	background-image: radial-gradient(circle, var(--ma-line) 1.5px, transparent 1.5px);
	background-size: 12px 8px;
	background-position: center;
	background-repeat: repeat-x;
}

/* ============================================================
   目次（Sticky / Mobile）
   ============================================================ */
.toc-sticky {
	position: sticky;
	top: 90px;
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-md);
	padding: 20px 22px;
}
.toc-sticky__head {
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--ma-blue);
	font-weight: 900;
	margin: 0 0 12px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 8px;
}
.toc-sticky ol,
.toc-sticky ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.toc-sticky a {
	color: var(--ma-ink-700);
	font-weight: 500;
	display: block;
	padding: 4px 0 4px 10px;
	border-left: 2px solid transparent;
	font-size: 13px;
	line-height: 1.5;
}
.toc-sticky a:hover { color: var(--ma-blue); text-decoration: none; }
.toc-sticky a.is-active {
	color: var(--ma-blue);
	border-left-color: var(--ma-blue);
	font-weight: 700;
}

.toc-mobile {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-md);
	margin: 0 0 24px;
}
.toc-mobile summary {
	padding: 14px 18px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ma-blue-700);
	list-style: none;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile__chev { margin-left: auto; transition: .2s var(--ma-ease); }
.toc-mobile[open] .toc-mobile__chev { transform: rotate(180deg); }
.toc-mobile ol {
	padding: 0 18px 16px 36px;
	margin: 0;
	color: var(--ma-ink-500);
	font-size: 13px;
}
.toc-mobile ol li { margin-bottom: 6px; }
.toc-mobile ol li a { color: var(--ma-ink-700); }

@media (min-width: 1025px) { .toc-mobile { display: none; } }
@media (max-width: 1024px) { .toc-sticky { display: none; } }

/* ============================================================
   前/次・関連・CTA
   ============================================================ */
.prev-next {
	max-width: 1240px;
	margin: 48px auto 0;
	padding: 0 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.pn-card {
	border: 1px solid var(--ma-line);
	background: var(--ma-paper);
	border-radius: var(--ma-radius-md);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--ma-ink-900);
	transition: .18s var(--ma-ease);
}
.pn-card:hover { border-color: var(--ma-blue); text-decoration: none; }
.pn-card__lbl {
	font-size: 11px;
	color: var(--ma-blue);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.pn-card__title { font-size: 14px; font-weight: 700; line-height: 1.4; }
.pn-card--next { flex-direction: row-reverse; text-align: right; }
.pn-card__arrow { font-size: 14px; color: var(--ma-blue); }

.related {
	max-width: 1240px;
	margin: 64px auto 0;
	padding: 48px 32px;
	border-top: 1px solid var(--ma-line);
}
.related__title { font-size: 22px; font-weight: 900; margin: 0 0 24px; }

.cta-banner {
	max-width: 1240px;
	margin: 48px auto 64px;
	padding: 0 32px;
}
.cta-banner__inner {
	background: linear-gradient(135deg, var(--ma-blue) 0%, var(--ma-blue-700) 100%);
	border-radius: var(--ma-radius-lg);
	padding: 36px 40px;
	color: #fff;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.cta-banner__inner::before {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
}
.cta-banner__title {
	font-size: 22px;
	font-weight: 900;
	margin: 0 0 8px;
	line-height: 1.4;
	color: #fff;
}
.cta-banner__desc {
	font-size: 13px;
	color: rgba(255,255,255,.85);
	margin: 0;
	line-height: 1.7;
}
.cta-banner__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 240px;
	position: relative;
}
.cta-banner__form input {
	padding: 12px 16px;
	border-radius: var(--ma-radius-sm);
	border: none;
	background: rgba(255,255,255,.95);
	font-size: 14px;
	color: var(--ma-ink-900);
}
.cta-banner__form button {
	background: var(--ma-pink);
	color: #fff;
	border: none;
	padding: 14px 24px;
	border-radius: var(--ma-radius-md);
	font-weight: 900;
	cursor: pointer;
	font-size: 14px;
	transition: .15s var(--ma-ease);
}
.cta-banner__form button:hover { background: var(--ma-pink-900); }

@media (max-width: 768px) {
	.related { padding: 40px 28px; }
	.prev-next { padding: 0 28px; }
	.cta-banner { padding: 0 28px; }
	.cta-banner__inner { padding: 28px; }
}
@media (max-width: 640px) {
	.related { padding: 32px 16px; }
	.related__title { font-size: 18px; }
	.prev-next { grid-template-columns: 1fr; padding: 0 16px; gap: 10px; }
	.cta-banner { padding: 0 16px; margin: 32px auto 32px; }
	.cta-banner__inner { grid-template-columns: 1fr; padding: 24px; gap: 18px; }
	.cta-banner__title { font-size: 18px; }
	.cta-banner__form { min-width: 0; }
}

/* ============================================================
   404 / アーカイブ / 固定ページ共通
   ============================================================ */
.not-found {
	min-height: 60vh;
	display: grid;
	place-items: center;
	padding: 80px 32px;
}
.not-found__inner { text-align: center; max-width: 540px; }
.not-found__code {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 96px;
	font-weight: 900;
	color: var(--ma-blue-200);
	margin: 0;
	line-height: 1;
}
.not-found__title { font-size: 24px; margin: 12px 0 16px; font-weight: 900; }
.not-found__lead { color: var(--ma-ink-500); font-size: 14px; margin: 0 0 28px; line-height: 1.85; }

.archive-content__head {
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 32px 24px;
	text-align: center;
}
.archive-content__title { font-size: 32px; font-weight: 900; margin: 0 0 12px; }
.archive-content__lead { color: var(--ma-ink-500); font-size: 14px; margin: 0; }
.archive-content__list {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px 64px;
}

.static-page__head {
	max-width: 800px;
	margin: 0 auto;
	padding: 48px 32px 24px;
}
.static-page__title { font-size: 32px; font-weight: 900; margin: 0; }
.static-page__body {
	max-width: 800px;
	margin: 0 auto;
	padding: 24px 32px 64px;
}

@media (max-width: 640px) {
	.archive-content__head, .static-page__head { padding: 32px 16px 16px; }
	.archive-content__title, .static-page__title { font-size: 24px; }
	.archive-content__list, .static-page__body { padding: 0 16px 40px; }
}

/* ============================================================
   詳細検索ページ（page-search）
   ============================================================ */
.page-search { background: var(--ma-bg); margin: 0; }
.page-search__head {
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 32px 16px;
	text-align: center;
}
.page-search__title { font-size: 28px; font-weight: 900; margin: 0 0 8px; }
.page-search__lead { color: var(--ma-ink-500); font-size: 13px; margin: 0; }

.filter-search {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px 24px;
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.filter-search__form {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 90px;
	box-shadow: var(--ma-sh-1);
}

.filter-search__keyword-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--ma-ink-700);
	margin-bottom: 8px;
	letter-spacing: .04em;
}
.filter-search__keyword-input {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ma-bg);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-md);
	padding: 8px 12px;
	transition: .15s var(--ma-ease);
}
.filter-search__keyword-input:focus-within {
	border-color: var(--ma-blue);
	background: var(--ma-paper);
	box-shadow: 0 0 0 3px var(--ma-blue-50);
}
.filter-search__keyword-input i { color: var(--ma-blue); font-size: 14px; }
.filter-search__keyword-input input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 4px 0;
	font-size: 14px;
	outline: none;
	min-width: 0;
}

.filter-group {
	border-top: 1px solid var(--ma-line-2);
	padding-top: 16px;
}
.filter-group__head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}
.filter-group__head i { color: var(--ma-blue); font-size: 13px; }
.filter-group__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--ma-ink-900);
	letter-spacing: .03em;
}

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.filter-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-full);
	background: var(--ma-paper);
	color: var(--ma-ink-700);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: .15s var(--ma-ease);
	user-select: none;
}
.filter-chip input { display: none; }
.filter-chip:hover {
	border-color: var(--ma-blue);
	color: var(--ma-blue);
}
.filter-chip.is-checked {
	background: var(--ma-blue);
	color: #fff;
	border-color: var(--ma-blue);
}

.filter-search__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}
.filter-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ma-blue);
	color: #fff;
	border: none;
	border-radius: var(--ma-radius-md);
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: .15s var(--ma-ease);
}
.filter-search__submit:hover { background: var(--ma-blue-700); }
.filter-search__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--ma-ink-500);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	padding: 6px;
}
.filter-search__reset:hover { color: var(--ma-blue); }

.filter-search__results { min-width: 0; }
.filter-search__count {
	font-size: 14px;
	color: var(--ma-ink-700);
	margin: 0 0 16px;
}
.filter-search__count strong { color: var(--ma-blue); font-size: 18px; margin: 0 4px; }

.filter-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.filter-search__card {
	display: flex;
	gap: 14px;
	padding: 14px;
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-md);
	text-decoration: none;
	color: inherit;
	transition: .15s var(--ma-ease);
	height: 100%;
}
.filter-search__card:hover {
	border-color: var(--ma-blue);
	box-shadow: var(--ma-sh-2);
	transform: translateY(-2px);
}
.filter-search__thumb {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: var(--ma-radius-sm);
	background: var(--ma-bg);
}
.filter-search__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.filter-search__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-search__type {
	display: inline-block;
	font-size: 11px;
	color: var(--ma-blue);
	font-weight: 700;
	letter-spacing: .04em;
}
.filter-search__title {
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	color: var(--ma-ink-900);
	line-height: 1.4;
}
.filter-search__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.filter-search__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: var(--ma-ink-500);
	background: var(--ma-bg);
	padding: 2px 8px;
	border-radius: var(--ma-radius-full);
}
.filter-search__badge i { font-size: 9px; color: var(--ma-blue); }

.filter-search__empty {
	background: var(--ma-paper);
	border: 1px dashed var(--ma-line);
	border-radius: var(--ma-radius-md);
	padding: 40px 24px;
	text-align: center;
	color: var(--ma-ink-500);
	font-size: 14px;
}

.filter-search__hint {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-md);
	padding: 28px 32px;
}
.filter-search__hint-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 900;
	margin: 0 0 10px;
	color: var(--ma-ink-900);
}
.filter-search__hint-title i { color: var(--ma-blue); font-size: 16px; }
.filter-search__hint-lead {
	font-size: 13px;
	color: var(--ma-ink-700);
	line-height: 1.85;
	margin: 0 0 20px;
}
.filter-search__hint-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 18px;
}
.filter-search__hint-list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--ma-bg);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-sm);
	padding: 12px 14px;
}
.filter-search__hint-list li > i {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	background: var(--ma-blue-50);
	color: var(--ma-blue);
	border-radius: var(--ma-radius-sm);
	font-size: 12px;
}
.filter-search__hint-list li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filter-search__hint-list strong {
	font-size: 13px;
	font-weight: 700;
	color: var(--ma-ink-900);
}
.filter-search__hint-list span {
	font-size: 12px;
	color: var(--ma-ink-500);
	line-height: 1.6;
}
.filter-search__hint-foot {
	font-size: 12px;
	color: var(--ma-ink-500);
	margin: 0;
	text-align: center;
	padding-top: 14px;
	border-top: 1px solid var(--ma-line-2);
}

.filter-group__desc {
	font-size: 11px;
	color: var(--ma-ink-500);
	margin: 0 0 8px;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.filter-search__hint-list { grid-template-columns: 1fr; }
	.filter-search__hint { padding: 20px 18px; }
}

.filter-search__pagination {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 32px;
}
.filter-search__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-sm);
	color: var(--ma-ink-700);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	background: var(--ma-paper);
}
.filter-search__page:hover {
	border-color: var(--ma-blue);
	color: var(--ma-blue);
}
.filter-search__page.is-current {
	background: var(--ma-blue);
	color: #fff;
	border-color: var(--ma-blue);
}

@media (max-width: 960px) {
	.filter-search { grid-template-columns: 1fr; }
	.filter-search__form { position: static; }
}
@media (max-width: 640px) {
	.page-search__head { padding: 32px 16px 16px; }
	.page-search__title { font-size: 24px; }
	.filter-search { padding: 0 16px 40px; gap: 20px; }
	.filter-search__form { padding: 16px; }
	.filter-search__list { grid-template-columns: 1fr; }
	.filter-search__thumb { width: 80px; height: 80px; }
}

/* ============================================================
 * インライン装飾 — manabi-plugin の独自フォーマットと対応
 *  - マーカー（下線型ハイライト・旧SWELLの swl-marker と同じ見た目）
 *  - 青字 / 赤字（LaTeX のカラー指定とトーンを揃える）
 * editor 側にも反映される（after_setup_theme で add_editor_style）
 * ============================================================ */
/* Gutenbergの className は単一クラスのみのため、共通スタイルも各バリアントクラスに直接当てる */
.manabi-marker--yellow,
.manabi-marker--blue,
.manabi-marker--pink {
	background-color: transparent;
	padding: 0 .15em;
	background-position: 0 .9em;
	background-repeat: no-repeat;
	background-size: 100% 0.4em;
	color: inherit;
}
.manabi-marker--yellow { background-image: linear-gradient(transparent 60%, #fff176 60%); }
.manabi-marker--blue   { background-image: linear-gradient(transparent 60%, #b3e0ff 60%); }
.manabi-marker--pink   { background-image: linear-gradient(transparent 60%, #ffc1d6 60%); }

.manabi-text--blue { color: #007edd; font-weight: 700; }
.manabi-text--pink { color: #e82779; font-weight: 700; }

/* ============================================================
 * DEV022 — テーマ改修 2026-05-04
 * 詳細は 51_開発データ/theme_improvements_2026-05-04.md
 * ============================================================ */

/* ---- G2: wpadminbar が fixed header に被る問題 ----------------
 * ログイン時 admin-bar 表示分だけ site-header を下げる。 */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
/* fixed header 高さぶんのオフセット padding にも admin-bar 分を加算 */
.admin-bar .wp-site-blocks { padding-top: calc(70px + 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks { padding-top: calc(70px + 46px); }
}

/* ---- D2: ヘッダー直下にブルーの背景が来るように ----------------
 * fixed header のオフセット（.wp-site-blocks の padding-top:70px）の領域に
 * 親のページ背景（--ma-bg）が出てしまっていた。
 * front-page では body 背景を blue-50 に切り替えて、header 直下にブルーが
 * 来るようにする。さらに hero の margin-top を確実に 0。 */
main > .top-hero,
main.wp-block-group > .top-hero,
.wp-site-blocks main > .top-hero { margin-block-start: 0; }
.home,
.home body,
body.home { background: var(--ma-blue-50); }
.home .wp-site-blocks { background: var(--ma-blue-50); }

/* ---- D1: ヒーロー下のCTAボタン2つの gap を 4px に -------------- */
.top-hero__cta { gap: 4px; }

/* ---- D5: about-stack のリード文を中央揃え -------------------- */
.about-stack__lead { text-align: center; }

/* ---- D4: about-stack のロゴ画像を一回り小さく ----------------- */
.about-stack__visual img { max-width: 220px; }
@media (max-width: 640px) {
	.about-stack__visual img { max-width: 180px; }
}

/* ---- D6: 全体の左右幅を「コラム」セクションと同じに -----------
 * .top-section は max-width:1240px / padding:80px 32px。
 * top-explore（duo-grid）と top-featured も同じ規格なので、これに揃える。
 * 既存 .top-section をそのまま使っているため変更なし。
 * ただし duo-grid の余白が大きい場合の整合をここで取り得る。 */

/* ---- D7: 学習コンテンツBOX（top-explore）下の余白をトル ------- */
.top-explore { padding-bottom: 0; }
.top-explore + .top-section,
.top-explore + .top-featured { padding-top: 24px; }

/* ---- D8: 特集 〜 コラムの間の余白を狭く -------------------- */
.top-featured { padding-bottom: 32px; }
.top-column   { padding-top: 32px; }

/* ---- D9: コラムカードをBOX枠で囲わず、サムネは角丸で -----------
 * カード全体の border / border-radius / overflow を解除し、
 * サムネにだけ border-radius を付け直す（はみ出ない）。 */
.col-card {
	border: none;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}
.col-card:hover {
	transform: translateY(-2px);
	box-shadow: none;
	border-color: transparent;
}
.col-card__thumb {
	border-radius: var(--ma-radius-md);
	overflow: hidden;
}
.col-card__body {
	padding: 10px 2px 6px;
}

/* ---- B1: 固定ページ全般のテンプレに白背景を敷く ----------------
 * static-page__body をカード化（白パネル＋枠＋角丸）。 */
.static-page__body {
	background: var(--ma-paper);
	border: 1px solid var(--ma-line);
	border-radius: var(--ma-radius-lg);
	padding: 40px 48px;
	margin-top: 24px;
	margin-bottom: 64px;
}
@media (max-width: 640px) {
	.static-page__body { padding: 24px 20px; margin-bottom: 40px; }
}

/* ---- F4: 記事のアイキャッチ画像の角丸をトル ------------------ */
.single-content__eyecatch img {
	border-radius: 0;
}

/* ---- F5: 目次（toc-sticky）の余白をトル -------------------- */
.toc-sticky { padding: 12px 14px; }
.toc-sticky__head { margin-bottom: 8px; }
.toc-sticky ol,
.toc-sticky ul { gap: 4px; }
.toc-sticky a { padding: 2px 0 2px 8px; }

/* ---- F6: 記事本文を両端揃えに ------------------------------ */
.single-content__body p,
.single-content__body li {
	text-align: justify;
	text-justify: inter-character;
	word-break: break-word;
	overflow-wrap: anywhere;
	line-break: strict;
}

/* ---- D3: 準備中項目のグレーアウト ---------------------------
 * - 教科：英語 / 国語 / 理科 / 社会
 * - 学年：中2 / 中3 / 高1 / 高2 / 高3
 * - 学習コンテンツBOX（learning-genres）：練習問題 / プリント
 * 視覚的には残し、クリック不可（pointer-events:none）。
 * DEV017 subjects-hidden.css と方針が近いので、汎用ユーティリティとして
 * .is-coming-soon を導入（今後 DEV017 にも展開可能）。 */
.is-coming-soon {
	opacity: .4;
	cursor: not-allowed !important;
	pointer-events: none;
	filter: saturate(.6);
	position: relative;
}
.is-coming-soon::after {
	content: "準備中";
	position: absolute;
	top: 6px; right: 6px;
	background: var(--ma-ink-500);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: var(--ma-radius-full);
	letter-spacing: .04em;
	pointer-events: none;
}

/* learning-genres の .learning-genre[href*="/practice/"] / [href*="/print/"] */
.learning-genres .learning-genre[href*="/practice/"],
.learning-genres .learning-genre[href*="/print/"] {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
	filter: saturate(.6);
	position: relative;
}
.learning-genres .learning-genre[href*="/practice/"]::after,
.learning-genres .learning-genre[href*="/print/"]::after {
	content: "準備中";
	margin-left: auto;
	background: var(--ma-ink-500);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--ma-radius-full);
	letter-spacing: .04em;
}

/* learning-subjects: 英語 / 国語 / 理科 / 社会 */
.learning-subjects .learning-subject[href*="/subject/english/"],
.learning-subjects .learning-subject[href*="/subject/japanese/"],
.learning-subjects .learning-subject[href*="/subject/science/"],
.learning-subjects .learning-subject[href*="/subject/social/"] {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
	filter: saturate(.6);
	position: relative;
}
.learning-subjects .learning-subject[href*="/subject/english/"]::after,
.learning-subjects .learning-subject[href*="/subject/japanese/"]::after,
.learning-subjects .learning-subject[href*="/subject/science/"]::after,
.learning-subjects .learning-subject[href*="/subject/social/"]::after {
	content: "準備中";
	position: absolute;
	bottom: 4px; left: 50%;
	transform: translateX(-50%);
	background: var(--ma-ink-500);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: var(--ma-radius-full);
	letter-spacing: .03em;
	white-space: nowrap;
}

/* learning-grades: 中2 / 中3 / 高1 / 高2 / 高3 */
.learning-grades .learning-grade[href*="/grade/jh2/"],
.learning-grades .learning-grade[href*="/grade/jh3/"],
.learning-grades .learning-grade[href*="/grade/h1/"],
.learning-grades .learning-grade[href*="/grade/h2/"],
.learning-grades .learning-grade[href*="/grade/h3/"] {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
	filter: saturate(.6);
	position: relative;
}
.learning-grades .learning-grade[href*="/grade/jh2/"]::after,
.learning-grades .learning-grade[href*="/grade/jh3/"]::after,
.learning-grades .learning-grade[href*="/grade/h1/"]::after,
.learning-grades .learning-grade[href*="/grade/h2/"]::after,
.learning-grades .learning-grade[href*="/grade/h3/"]::after {
	content: "準備中";
	position: absolute;
	bottom: 2px; left: 50%;
	transform: translateX(-50%);
	background: var(--ma-ink-500);
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: var(--ma-radius-full);
	letter-spacing: .03em;
	white-space: nowrap;
}

/* ---- E1: シンプル検索ページ（page-keyword-search）------------ */
.keyword-search {
	max-width: 720px;
	margin: 0 auto;
	padding: 64px 32px 96px;
}
.keyword-search__head {
	text-align: center;
	margin-bottom: 32px;
}
.keyword-search__title {
	font-size: 28px;
	font-weight: 900;
	margin: 0 0 8px;
	color: var(--ma-blue-900);
}
.keyword-search__lead {
	font-size: 14px;
	color: var(--ma-ink-500);
	margin: 0;
	line-height: 1.85;
}
.keyword-search__form {
	display: flex;
	gap: 8px;
	background: var(--ma-paper);
	border: 1px solid var(--ma-blue-200);
	border-radius: var(--ma-radius-full);
	padding: 8px;
	box-shadow: var(--ma-sh-2);
	align-items: center;
}
.keyword-search__form i.fa-magnifying-glass {
	color: var(--ma-blue);
	font-size: 16px;
	padding: 0 8px 0 14px;
}
.keyword-search__input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 15px;
	min-width: 0;
	padding: 8px 0;
	color: var(--ma-ink-900);
}
.keyword-search__submit {
	background: var(--ma-blue);
	color: #fff;
	border: none;
	border-radius: var(--ma-radius-full);
	padding: 10px 22px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: .15s var(--ma-ease);
}
.keyword-search__submit:hover { background: var(--ma-blue-700); }
@media (max-width: 640px) {
	.keyword-search { padding: 40px 16px 64px; }
	.keyword-search__title { font-size: 22px; }
	.keyword-search__form { padding: 6px; }
	.keyword-search__submit { padding: 8px 14px; font-size: 13px; }
}