/* 指定された紹介・比較UI。記事全体の表や囲みには広げない。 */
.mame-school-component {
	--school-heading-surface: var(--table-header-surface, #fffaf0);
	--school-pick-surface: #e1f0f3;
	--school-border: #ccc;
	--school-action: var(--article-action);
	--school-action-shadow: var(--article-action-shadow);
	--school-sort-active: #159447;
	color: #292929;
	font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	margin: 0 0 48px;
	min-width: 0;
}
.mame-school-component *, .mame-school-component *::before, .mame-school-component *::after { box-sizing: border-box; }
.mame-school-component .mame-school-section-title {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #333;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.mame-school-section-title > svg { color: #36b8e5; flex: 0 0 19px; margin-top: 2px; }
.mame-school-picks__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--school-border);
	border-radius: 2px;
	overflow: hidden;
}
.mame-school-pick { display: grid; grid-template-rows: auto 143px 1fr auto; min-width: 0; margin: 0; }
.mame-school-pick + .mame-school-pick { border-left: 1px solid var(--school-border); }
.mame-school-component .mame-school-pick__name {
	margin: 0;
	padding: 6px 5px 0;
	background: var(--school-pick-surface);
	color: #333;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
.mame-school-pick__image { background: var(--school-pick-surface); padding: 7px 18px 12px; border-bottom: 1px solid var(--school-border); }
.mame-school-pick__image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 12px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 1px 3px 4px #0003;
}
.mame-school-pick__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mame-school-component .mame-school-pick__features { padding: 5px 8px 6px; margin: 0; list-style: none; text-align: center; background: #fff; }
.mame-school-component .mame-school-pick__features li { padding: 0; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.5; }
.mame-school-pick__features li:first-child { color: #d52e23; }
.mame-school-pick__features li:nth-child(even) { text-decoration: underline; text-decoration-color: #fff5bc; text-decoration-thickness: .5em; text-underline-offset: -.22em; text-decoration-skip-ink: none; }
.mame-school-pick__action { padding: 6px 10px 9px; background: #fff; border-top: 1px solid #e6e6e6; }
.mame-school-component .mame-school-action {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3px;
	min-height: 37px;
	padding: 8px 10px;
	border: 0;
	border-radius: 3px;
	background: var(--school-action);
	box-shadow: 0 3px 0 var(--school-action-shadow);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}
.mame-school-component .mame-school-action:hover { background: var(--article-action-hover); }
.mame-school-component a:focus-visible, .mame-school-component button:focus-visible, .mame-school-comparison__scroll:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }
.mame-school-sort { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.mame-school-sort[hidden], .mame-school-scroll-hint[hidden] { display: none; }
.mame-school-sort button {
	padding: 6px 8px;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	background: #fff;
	color: #313131;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}
.mame-school-sort button[aria-pressed="true"] { color: var(--school-sort-active); border-color: var(--school-sort-active); background: #fafffb; font-weight: 700; }
.mame-school-component .mame-school-scroll-hint { margin: 0 0 8px; padding: 0; font-size: 12px; color: #585858; }
.mame-school-comparison__scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; isolation: isolate; padding-bottom: 5px; }
.mame-school-component .mame-school-comparison__table {
	width: max-content;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	border: 0;
	font-size: 13px;
	line-height: 1.5;
}
.mame-school-component .mame-school-comparison__table :is(th, td) {
	width: 190px;
	min-width: 190px;
	max-width: 190px;
	padding: 6px 7px;
	border: 0;
	border-right: 1px solid var(--school-border);
	border-bottom: 1px solid var(--school-border);
	background: #fff;
	color: #292929;
	font-size: inherit;
	font-weight: 500;
	text-align: left;
	vertical-align: middle;
	white-space: normal;
}
.mame-school-component .mame-school-comparison__table thead th { background: var(--school-heading-surface); font-weight: 700; border-top: 1px solid var(--school-border); text-align: center; }
.mame-school-component .mame-school-comparison__table thead th:not(:first-child) { width: auto; max-width: none; white-space: nowrap; }
.mame-school-component .mame-school-comparison__table tr > :first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	width: 100px;
	min-width: 100px;
	max-width: 100px;
	border-left: 1px solid var(--school-border);
	background: var(--school-heading-surface);
	font-size: 12px;
	font-weight: 700;
	text-align: left;
}
.mame-school-component .mame-school-name-link { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: #377b9d; font-size: 13px; font-weight: 700; text-decoration: underline; }
.mame-school-name-link svg { flex: 0 0 12px; }
.mame-school-component .mame-school-row--image td { height: 82px; padding: 10px 12px; text-align: center; }
.mame-school-row--image img { display: block; width: 100%; height: 62px; object-fit: contain; }
.mame-school-brand-name { font-size: 20px; font-weight: 700; }
.mame-school-rating { display: flex; align-items: center; gap: 3px; color: #393939; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mame-school-stars { position: relative; display: inline-block; color: #b08b3a; font-size: 13px; line-height: 1; }
.mame-school-stars > span:first-child { color: #e2ded4; }
.mame-school-stars > span:last-child { position: absolute; left: 0; top: 0; width: var(--school-star-fill); overflow: hidden; }
.mame-school-support { display: block; text-align: center; font-size: 17px; }
.mame-school-component .mame-school-row--notes td { vertical-align: top; }
.mame-school-component .mame-school-row--official_url td { padding: 9px 10px 12px; }
.mame-school-unset { color: #777; }
.mame-school-component .mame-school-sort-status { margin: 8px 0 0; padding: 0; font-size: 12px; color: #555; }
.mame-school-sort-status:empty { display: none; }
.mame-school-component .mame-school-data-note { margin: 12px 0 0; padding: 0; font-size: 12px; color: #555; }
.mame-school-preview { width: min(758px, calc(100% - 32px)); margin: 32px auto 48px; background: #fff; }
.mame-school-preview__intro { padding: 24px 24px 0; }
.mame-school-preview__intro h1 { margin: 0 0 12px; font-size: 24px; font-weight: 700; }
.mame-school-preview__intro p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.mame-school-preview__body { padding: 28px 24px 12px; }
.mame-school-components-preview :is(.fltline, .stickbar) { display: none !important; }
@supports (grid-template-rows: subgrid) {
	.mame-school-picks__grid { grid-template-rows: auto 143px 1fr auto; }
	.mame-school-pick { grid-row: span 4; grid-template-rows: subgrid; }
	@media (max-width: 640px) {
		.mame-school-picks__grid { grid-template-rows: auto 89px 1fr auto; }
	}
}
/* 記事の見出し・表の装飾を、部品内へ持ち込まない。 */
.body .article-content .mame-school-component .mame-school-comparison__table {
	display: table;
	max-width: none;
	overflow: visible;
}
.body .article-content .mame-school-component .mame-school-pick__name,
.body .article-content .mame-school-component .mame-school-pick__name.is-heading-sibling {
	margin: 0;
	border: 0;
	border-radius: 0;
}
.body .article-content .mame-school-component .mame-school-pick__name::before,
.body .article-content .mame-school-component .mame-school-pick__name::after,
.body .article-content .mame-school-component .mame-school-section-title::before,
.body .article-content .mame-school-component .mame-school-section-title::after { content: none; }
.mame-article-spacing .body .article-content .mame-school-component .mame-school-comparison__table thead th,
.mame-article-spacing .body .article-content .mame-school-component .mame-school-comparison__table tr > :first-child {
	background: var(--school-heading-surface) !important;
	color: #292929 !important;
}
@media (max-width: 640px) {
	.mame-school-preview { width: 100%; margin: 0 auto; }
	.mame-school-preview__intro { padding: 24px 16px 0; }
	.mame-school-preview__intro h1 { font-size: 21px; }
	.mame-school-preview__body { padding: 24px 16px 12px; }
	.mame-school-picks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mame-school-pick { grid-template-rows: auto 89px 1fr auto; }
	@supports (grid-template-rows: subgrid) { .mame-school-pick { grid-template-rows: subgrid; } }
	.mame-school-component .mame-school-pick__name { padding: 6px 3px 0; font-size: 13px; }
	.mame-school-pick__image { padding: 7px 7px 10px; }
	.mame-school-pick__image > a { padding: 6px; border-radius: 8px; }
	.mame-school-component .mame-school-pick__features { padding: 6px 4px; }
	.mame-school-component .mame-school-pick__features li { font-size: 13px; line-height: 1.5; }
	.mame-school-pick__action { padding: 6px 5px 9px; }
	.mame-school-component .mame-school-pick__action .mame-school-action { min-height: 37px; padding: 8px 3px; font-size: 13px; }
	.mame-school-component .mame-school-pick__action .mame-school-action svg { width: 10px; height: 10px; }
}