/*
 * ディストロ図鑑の判定の基準（template-parts/distro/criteria-page.php）。
 * 図鑑のほかのページと同じ世界観（オレンジと黒の太い枠・端末）。
 * ルートの文字サイズは 62.5%（1rem = 10px）なので px で書く。
 */

.cr-page {
	--cr-ground: var(--guide-bg, #fff4e1);
	--cr-surface: var(--guide-surface, #fff);
	--cr-ink: #1d1813;
	--cr-text: var(--guide-text, #2b2620);
	--cr-muted: var(--guide-muted, #6f6052);
	--cr-line: var(--guide-border, #e8e1d4);
	--cr-line-strong: var(--guide-border-strong, #d8cebb);
	--cr-accent: var(--guide-accent, #ff5b00);
	--cr-accent-soft: var(--guide-accent-soft, #ffedca);
	--cr-ok: var(--guide-success, #1e7a45);
	--cr-ok-soft: var(--guide-success-soft, #e8f6ee);
	--cr-fair: var(--guide-caution, #a65f00);
	--cr-fair-soft: var(--guide-caution-soft, #fbf1df);
	--cr-hard: var(--guide-danger, #c0341d);
	--cr-hard-soft: var(--guide-danger-soft, #fcece9);
	--cr-term: #1d1813;
	--cr-term-fg: #f1ede6;
	--cr-term-muted: rgba(241, 237, 230, 0.62);
	--cr-term-key: #ffb071;
	--cr-mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, "DejaVu Sans Mono", "BIZ UDGothic", "Hiragino Sans", "Noto Sans JP", monospace;
	--cr-num: "Din1451Alt", "Bahnschrift", "DIN Alternate", "Arial Narrow", system-ui, sans-serif;
	--cr-brandfont: var(--font-site-brand, "linuxPro-CPL"), "Hiragino Sans", "Noto Sans JP", sans-serif;
	--cr-radius: 12px;
	--cr-top: 0px;

	background: var(--cr-ground);
	color: var(--cr-text);
	padding: 20px 16px 96px;
}
.cr {
	max-width: 1040px;
	margin: 0 auto;
	font: 400 16px/1.85 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
	overflow-wrap: anywhere;
}
.cr *,
.cr *::before,
.cr *::after {
	box-sizing: border-box;
}
.cr :where(h1, h2, h3, h4, p, ul, ol, dl, dd) {
	margin: 0;
	padding: 0;
}
.cr :where(ul, ol) {
	list-style: none;
}
.cr :where(a) {
	color: inherit;
	text-underline-offset: 4px;
}
.cr :where(a, button, input, [tabindex]):focus-visible {
	outline: 3px solid var(--cr-accent);
	outline-offset: 3px;
	border-radius: 6px;
}
.cr [hidden] {
	display: none !important;
}
.cr .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cr-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 13px;
	color: var(--cr-muted);
}
.cr-crumbs li + li::before {
	content: "/";
	margin-right: 10px;
	color: var(--cr-line-strong);
}
.cr-crumbs a {
	text-decoration: none;
}

/* 冒頭 */
.cr-hero {
	margin-top: 18px;
}
.cr-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 700 14px/1 var(--cr-brandfont);
	color: var(--cr-ink);
}
.cr-hero__kicker span {
	padding: 5px 10px 4px;
	border-radius: 6px;
	background: var(--cr-ink);
	color: var(--cr-accent);
	font: 400 15px/1 var(--cr-num);
	letter-spacing: 0.14em;
}
.cr-hero__title {
	margin-top: 14px;
	font: 700 clamp(30px, 4.6vw, 50px)/1.28 var(--cr-brandfont);
	color: var(--cr-ink);
	text-wrap: balance;
	word-break: auto-phrase;
}
@media (max-width: 520px) {
	.cr-br {
		display: none;
	}
}
.cr-hero__lead {
	max-width: 44em;
	margin-top: 14px;
	font-size: 16.5px;
}
.cr-versions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.cr-versions li {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 14px;
	border: 2px solid var(--cr-ink);
	border-radius: 10px;
	background: var(--cr-surface);
	font-size: 12px;
	font-weight: 700;
	color: var(--cr-muted);
}
.cr-versions b {
	font: 400 22px/1 var(--cr-num);
	color: var(--cr-ink);
}
.cr-hero__note {
	margin-top: 10px;
	font-size: 13px;
	color: var(--cr-muted);
}

/* 目次 */
.cr-tabs {
	position: sticky;
	top: var(--cr-top);
	z-index: 30;
	margin: 28px -16px 0;
	padding: 8px 16px;
	border-bottom: 3px solid var(--cr-ink);
	background: color-mix(in srgb, var(--cr-ground) 92%, transparent);
	backdrop-filter: blur(8px);
}
.cr-tabs ol {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.cr-tabs a {
	display: block;
	padding: 6px 14px;
	border-radius: 999px;
	color: var(--cr-muted);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.cr-tabs a:hover {
	color: var(--cr-ink);
	background: var(--cr-accent-soft);
}
.cr-tabs a[aria-current] {
	background: var(--cr-ink);
	color: var(--cr-ground);
}

/* 章 */
.cr-sec {
	margin-top: 26px;
	padding: 24px 24px 26px;
	border: 2px solid var(--cr-ink);
	border-radius: var(--cr-radius);
	background: var(--cr-surface);
	scroll-margin-top: calc(var(--cr-top) + 76px);
}
@media (max-width: 520px) {
	.cr-sec {
		padding: 20px 16px 22px;
	}
}
.cr-h {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font: 700 22px/1.45 var(--cr-brandfont);
	color: var(--cr-ink);
	text-wrap: balance;
	word-break: auto-phrase;
}
.cr-h::before {
	content: "";
	flex: none;
	width: 10px;
	height: 24px;
	margin-top: 4px;
	border-radius: 2px;
	background: var(--cr-accent);
}
.cr-lead {
	max-width: 46em;
	margin-top: 8px;
	color: var(--cr-muted);
	font-size: 15px;
}
.cr-note {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--cr-ground);
	font-size: 14px;
}
.cr-sub {
	margin-top: 20px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--cr-ink);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--cr-muted);
}

/* 4つの層 */
.cr-layers {
	display: grid;
	gap: 10px;
	margin-top: 16px;
	counter-reset: none;
}
.cr-layer {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 14px 16px;
	border: 2px solid var(--cr-ink);
	border-radius: 12px;
	background: var(--cr-surface);
	box-shadow: 4px 4px 0 var(--cr-accent);
}
.cr-layer + .cr-layer {
	margin-left: 18px;
}
.cr-layer + .cr-layer + .cr-layer {
	margin-left: 36px;
}
.cr-layer + .cr-layer + .cr-layer + .cr-layer {
	margin-left: 54px;
}
@media (max-width: 600px) {
	.cr-layer + .cr-layer,
	.cr-layer + .cr-layer + .cr-layer,
	.cr-layer + .cr-layer + .cr-layer + .cr-layer {
		margin-left: 0;
	}
}
.cr-layer.is-soon {
	border-style: dashed;
	box-shadow: none;
}
.cr-layer__no {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--cr-ink);
	color: var(--cr-accent);
	font: 400 28px/1 var(--cr-num);
}
.cr-layer h3 {
	font: 700 18px/1.4 var(--cr-brandfont);
	color: var(--cr-ink);
}
.cr-layer h3 small {
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--cr-line);
	font: 700 11px/1.6 system-ui, sans-serif;
	color: var(--cr-muted);
}
.cr-layer p {
	margin-top: 4px;
	font-size: 14.5px;
}

/* 値の状態 */
.cr-states {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	margin-top: 16px;
}
.cr-state {
	padding: 14px 16px;
	border: 2px solid var(--cr-line);
	border-radius: 12px;
}
.cr-state__show {
	display: inline-block;
	padding: 2px 12px;
	border-radius: 6px;
	background: var(--cr-term);
	color: var(--cr-term-fg);
	font: 13px/1.7 var(--cr-mono);
}
.cr-state__show.is-missing {
	color: var(--cr-term-muted);
}
.cr-state__show.is-pending {
	color: var(--cr-term-key);
}
.cr-state h3 {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 800;
	color: var(--cr-ink);
}
.cr-state p:last-child {
	font-size: 14px;
	color: var(--cr-muted);
}

/* 推奨版 */
.cr-steps {
	display: grid;
	gap: 8px;
	margin-top: 16px;
	counter-reset: step;
}
.cr-steps li {
	position: relative;
	padding: 10px 14px 10px 54px;
	border-radius: 10px;
	background: var(--cr-ground);
	counter-increment: step;
}
.cr-steps li::before {
	content: counter(step);
	position: absolute;
	left: 12px;
	top: 50%;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border: 2px solid var(--cr-ink);
	border-radius: 50%;
	background: var(--cr-surface);
	font: 400 17px/1 var(--cr-num);
	color: var(--cr-ink);
}
.cr-steps b {
	color: var(--cr-ink);
}

/* 始めやすさ: 上から順に当てはめる表 */
.cr-rule__cap {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cr-muted);
}
.cr-rule {
	counter-reset: cr-rule;
	display: grid;
	margin-top: 6px;
	border: 2px solid var(--cr-ink);
	border-radius: 12px;
	overflow: hidden;
	font-size: 15px;
}
.cr-rule li {
	counter-increment: cr-rule;
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
}
.cr-rule li + li {
	border-top: 1px dashed var(--cr-line);
}
.cr-rule li::before {
	content: counter(cr-rule);
	font: 400 18px/1 var(--cr-num);
	color: var(--cr-muted);
}
.cr-rule__if {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cr-rule__then {
	padding: 2px 10px;
	border: 3px double currentColor;
	border-radius: 8px;
	font: 700 14px/1.35 var(--cr-brandfont);
	white-space: nowrap;
	transform: rotate(-3deg);
}
.cr-rule__then.is-easy { color: var(--cr-ok); }
.cr-rule__then.is-normal { color: var(--cr-fair); }
.cr-rule__then.is-hard { color: var(--cr-hard); }
.cr-rule__then.is-none { color: var(--cr-muted); }
@media (max-width: 520px) {
	.cr-rule li {
		grid-template-columns: 22px minmax(0, 1fr);
		row-gap: 6px;
	}
	.cr-rule__then {
		grid-column: 2;
		justify-self: start;
	}
}
.cr-mark {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-weight: 800;
	font-size: 13px;
	flex: none;
}
.cr-mark.is-ok { background: var(--cr-ok-soft); color: var(--cr-ok); }
.cr-mark.is-fair { background: var(--cr-fair-soft); color: var(--cr-fair); }
.cr-mark.is-hard { background: var(--cr-hard-soft); color: var(--cr-hard); }
.cr-mark.is-info,
.cr-mark.is-missing { background: var(--cr-line); color: var(--cr-muted); }

.cr-sim {
	margin-top: 20px;
	border: 3px solid var(--cr-ink);
	border-radius: 14px;
	background: var(--cr-term);
	color: var(--cr-term-fg);
	box-shadow: 6px 6px 0 #ffbe794d;
	overflow: hidden;
}
.cr-sim__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px 10px;
	border-bottom: 1px solid rgba(241, 237, 230, 0.16);
}
.cr-sim__title {
	font: 700 17px/1.4 var(--cr-brandfont);
	color: var(--cr-term-fg);
}
.cr-sim__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.35);
}

.cr-sim__tabs button {
	padding-block: 5px;
	padding-inline: 12px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--cr-term-fg);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.3;
	font-family: inherit;
	cursor: pointer;
}
.cr-sim__tabs button[aria-pressed="true"] {
	background: var(--cr-term-fg);
	color: var(--cr-ink);
}
@media (max-width: 520px) {
	.cr-sim__tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}
	.cr-sim__tabs button {
		padding-inline: 6px;
		word-break: auto-phrase;
	}
}
.cr-sim__body {
	display: grid;
	gap: 18px;
	padding: 16px;
}
@media (min-width: 800px) {
	.cr-sim__body {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		align-items: start;
	}
}
.cr-sim__inputs {
	display: grid;
	gap: 12px;
}
.cr-sim__row p {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cr-term-key);
}
.cr-sim__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.cr-sim__opts button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 3px 12px 3px 6px;
	border: 2px solid rgba(241, 237, 230, 0.25);
	border-radius: 999px;
	background: transparent;
	color: var(--cr-term-fg);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.cr-sim__opts button[aria-pressed="true"] {
	border-color: var(--cr-term-key);
	background: rgba(255, 176, 113, 0.14);
}
.cr-sim__opts .cr-mark {
	width: 20px;
	height: 20px;
	font-size: 11px;
}
.cr-sim__out {
	padding: 16px;
	border-radius: 12px;
	background: var(--cr-surface);
	color: var(--cr-text);
}
.cr-sim__label {
	display: inline-block;
	padding: 4px 16px;
	border: 4px double currentColor;
	border-radius: 10px;
	font: 700 22px/1.3 var(--cr-brandfont);
	transform: rotate(-4deg);
}
.cr-sim__label.is-easy { color: var(--cr-ok); }
.cr-sim__label.is-normal { color: var(--cr-fair); }
.cr-sim__label.is-hard { color: var(--cr-hard); }
.cr-sim__label.is-none { color: var(--cr-muted); font-size: 15px; }
.cr-sim__label.is-go {
	animation: cr-stamp 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes cr-stamp {
	0% { transform: rotate(-4deg) scale(1.6); opacity: 0; }
	60% { transform: rotate(-4deg) scale(0.94); opacity: 1; }
	100% { transform: rotate(-4deg) scale(1); }
}
.cr-sim__chips {
	display: grid;
	gap: 4px;
	margin-top: 12px;
	font-size: 14px;
}
.cr-sim__chips li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cr-aspects {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 20px;
}
@media (min-width: 760px) {
	.cr-aspects {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.cr-aspect {
	padding: 14px 16px;
	border: 2px solid var(--cr-line);
	border-radius: 12px;
}
.cr-aspect h3 {
	font: 700 17px/1.4 var(--cr-brandfont);
	color: var(--cr-ink);
}
.cr-aspect dl {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}
.cr-aspect dt {
	font-size: 13px;
	font-weight: 700;
	color: var(--cr-muted);
}
.cr-aspect dt a {
	text-decoration-style: dotted;
}
.cr-aspect dt small {
	font-weight: 400;
}
.cr-aspect dd {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 14px;
}
.cr-pair {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.cr-pair .cr-mark {
	width: 20px;
	height: 20px;
	font-size: 11px;
}

/* スペック */
.cr-spec {
	margin-top: 14px;
	padding: 16px;
	border: 3px solid var(--cr-ink);
	border-radius: 12px;
}
.cr-spec__rule {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin-bottom: 8px;
	font-weight: 700;
	color: var(--cr-muted);
}
.cr-spec__rule b {
	font: 400 38px/1 var(--cr-num);
	color: var(--cr-ink);
}
.cr-spec__rule em {
	padding: 0 8px;
	border-radius: 6px;
	background: var(--cr-ink);
	color: var(--cr-ground);
	font-style: normal;
}

/* 入口 */
.cr-why {
	display: inline-block;
	margin-right: 6px;
	padding: 0 7px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 700;
	vertical-align: 1px;
}
.cr-why.is-official { background: var(--cr-ok-soft); color: var(--cr-ok); }
.cr-why.is-derived { background: var(--cr-accent-soft); color: #9a3a00; }
.cr-why.is-editorial { background: var(--cr-ink); color: var(--cr-ground); }
.cr-entries {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	margin-top: 10px;
}
.cr-entry {
	padding: 12px 14px;
	border: 2px solid var(--cr-line);
	border-radius: 10px;
}
.cr-entry__name {
	font-size: 16px;
	font-weight: 800;
	color: var(--cr-ink);
	text-decoration: none;
}
.cr-entry__name::after {
	content: " →";
	color: var(--cr-accent);
}
.cr-entry__ways {
	display: grid;
	gap: 3px;
	margin-top: 6px;
	font-size: 13.5px;
}

/* 判定の問い */
.cr-qfind {
	position: sticky;
	top: calc(var(--cr-top) + 58px);
	z-index: 5;
	display: grid;
	gap: 8px;
	margin: 16px -24px 0;
	padding: 10px 24px;
	background: color-mix(in srgb, var(--cr-surface) 94%, transparent);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--cr-line);
}
@media (max-width: 520px) {
	.cr-qfind {
		margin: 16px -16px 0;
		padding: 10px 16px;
	}
}
.cr-qsearch input {
	width: 100%;
	min-height: 46px;
	padding: 6px 14px;
	border: 3px solid var(--cr-ink);
	border-radius: 12px;
	background: var(--cr-surface);
	color: var(--cr-ink);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	font-family: inherit;
}
.cr-qgroups {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}
.cr-qgroups button {
	flex: none;
	padding: 4px 12px;
	border: 2px solid var(--cr-line-strong);
	border-radius: 999px;
	background: var(--cr-surface);
	color: var(--cr-ink);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.4;
	font-family: inherit;
	cursor: pointer;
}
.cr-qgroups button[aria-pressed="true"] {
	border-color: var(--cr-ink);
	background: var(--cr-ink);
	color: var(--cr-ground);
}
.cr-qcount {
	font-size: 12px;
	color: var(--cr-muted);
}
.cr-q {
	padding: 14px 0;
	border-bottom: 1px solid var(--cr-line);
	scroll-margin-top: calc(var(--cr-top) + 190px);
}
.cr-q:target {
	animation: cr-target 2.4s ease-out;
}
@keyframes cr-target {
	0%, 40% { background: var(--cr-accent-soft); box-shadow: 0 0 0 10px var(--cr-accent-soft); }
	100% { background: transparent; box-shadow: none; }
}
.cr-q__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.cr-q__label {
	font-size: 17px;
	font-weight: 800;
	color: var(--cr-ink);
}
.cr-q__key {
	padding: 0 6px;
	border-radius: 4px;
	background: var(--cr-ground);
	font: 12px/1.6 var(--cr-mono);
	color: var(--cr-muted);
}
.cr-q__link {
	margin-left: auto;
	color: var(--cr-muted);
	font: 700 15px/1 var(--cr-mono);
	text-decoration: none;
}
.cr-q__link:hover {
	color: var(--cr-accent);
}
.cr-q__question {
	margin-top: 4px;
	font-size: 15.5px;
}
.cr-q__boundary {
	margin-top: 6px;
	padding: 8px 12px;
	border-left: 4px solid var(--cr-accent);
	border-radius: 0 8px 8px 0;
	background: var(--cr-ground);
	font-size: 14px;
}
.cr-q__boundary b {
	margin-right: 8px;
	color: var(--cr-ink);
}
.cr-q__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}
.cr-q__opts li {
	padding: 0 9px;
	border: 1px solid var(--cr-line-strong);
	border-radius: 999px;
	font-size: 12px;
}
.cr-q__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--cr-muted);
}
.cr-q__meta .is-required {
	padding: 0 7px;
	border-radius: 4px;
	background: var(--cr-accent-soft);
	color: #9a3a00;
	font-weight: 700;
}
.cr-empty {
	margin-top: 16px;
	color: var(--cr-muted);
}

.cr-end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 26px;
	padding: 20px 22px;
	border-radius: var(--cr-radius);
	background: var(--cr-ink);
	color: var(--cr-term-fg);
}
.cr-end p {
	max-width: 40em;
	font-size: 14px;
}
.cr-btn {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 6px 20px;
	border: 3px solid var(--cr-term-fg);
	border-radius: 12px;
	background: var(--cr-accent);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
}

.cr-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 60;
	padding: 10px 18px;
	border: 2px solid var(--cr-ink);
	border-radius: 999px;
	background: var(--cr-ink);
	color: var(--cr-ground);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 4px 4px 0 var(--cr-accent);
	transform: translate(-50%, 200%);
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}
@media (max-width: 900px) {
	.cr-toast {
		bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	}
}
.cr-toast.is-shown {
	transform: translate(-50%, 0);
}
.cr-toast:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.cr *,
	.cr *::before,
	.cr *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* 計測の手順 */
.cr-measure {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 20px;
	margin-top: 18px;
	align-items: start;
}
@media (max-width: 860px) {
	.cr-measure {
		grid-template-columns: minmax(0, 1fr);
	}
}
.cr-measure__vm {
	padding: 16px 18px;
	border: 3px solid var(--cr-ink);
	border-radius: var(--cr-radius);
	background: var(--cr-term);
	color: var(--cr-term-fg);
	box-shadow: 6px 6px 0 #ffbe794d;
}
.cr-measure__vm h3 {
	font: 700 17px/1.4 var(--cr-brandfont);
	color: var(--cr-term-key);
}
.cr-measure__vm dl {
	display: grid;
	gap: 6px;
	margin-top: 10px;
	font-size: 14px;
}
.cr-measure__vm dl > div {
	display: grid;
	grid-template-columns: 8.5em minmax(0, 1fr);
	gap: 10px;
}
.cr-measure__vm dt {
	color: var(--cr-term-key);
	font-weight: 700;
}
.cr-measure__vm .cr-note {
	color: rgba(241, 237, 230, 0.72);
}
.cr-measure__h {
	margin-top: 22px;
	font-size: 16px;
	font-weight: 800;
	color: var(--cr-ink);
}
.cr-measure .cr-measure__h:first-child {
	margin-top: 0;
}
.cr-rules {
	display: grid;
	gap: 4px;
	margin-top: 12px;
	padding-left: 1.2em;
	list-style: disc;
	font-size: 14px;
	color: var(--cr-muted);
}
.cr-scroll {
	margin-top: 10px;
	overflow-x: auto;
	border: 2px solid var(--cr-ink);
	border-radius: var(--cr-radius);
	background: var(--cr-surface);
}
.cr-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.cr-table th,
.cr-table td {
	padding: 9px 12px;
	border-bottom: 1px dashed var(--cr-line);
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}
.cr-table thead th {
	font-size: 12px;
	color: var(--cr-muted);
}
.cr-table tbody th small {
	margin-left: 6px;
	font-weight: 400;
	color: var(--cr-muted);
}
.cr-table__how {
	min-width: 22em;
	white-space: normal !important;
}
.cr-table__how small {
	color: var(--cr-muted);
}
.cr-table tbody tr:last-child > * {
	border-bottom: 0;
}
.cr-files {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}
.cr-files li {
	display: grid;
	gap: 2px;
	padding: 10px 14px;
	border: 2px solid var(--cr-ink);
	border-radius: 10px;
	background: var(--cr-surface);
}
.cr-files a {
	font-weight: 700;
}
.cr-files small {
	color: var(--cr-muted);
	word-break: break-all;
}
.cr-measure__vm .cr-note {
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
}
.cr-measure .cr-steps {
	margin-top: 10px;
}
.cr-measure .cr-steps li b {
	display: block;
}