/*
Theme Name: NAPTIFY
Theme URI: https://naptify.net/
Description: naptify.net のテーマ。Twenty Twenty-Five の子テーマ。色・文字・余白は theme.json、部品の見た目はこのファイル。
Author: NAPTIFY project
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: naptify
*/

/* ---------- 共通の値 ---------- */
:root {
	--nf-gutter: var(--wp--style--root--padding-left, clamp(20px, 6.667vw, 96px));
	--nf-wide: var(--wp--style--global--wide-size, 1248px);
	--nf-inner: min(calc(100% - 2 * var(--nf-gutter)), var(--nf-wide));
	--nf-line: var(--wp--preset--color--line);
	--nf-space-s: clamp(28px, 2.8vw, 40px);
	--nf-space-m: clamp(40px, 4.4vw, 64px);
	--nf-space-l: clamp(48px, 6.1vw, 88px);
	--nf-radius: 16px;
	--nf-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='5.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='24' x2='38' y2='24'/%3E%3Cpolyline points='28,14 38,24 28,34'/%3E%3C/svg%3E");
	--nf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='4.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='12,18 24,30 36,18'/%3E%3C/svg%3E");
}

body {
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt" 0;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

:where(a, button, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
}

code, kbd, pre {
	font-family: var(--wp--preset--font-family--mono);
}

/* ---------- ヘッダー ---------- */
.nf-site-header,
.nf-site-footer {
	margin-block: 0;
}

.nf-header {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid var(--nf-line);
}

.nf-header__inner {
	width: var(--nf-inner);
	margin-inline: auto;
	padding-block: 22px;
	gap: 24px;
}

.nf-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	flex-shrink: 0;
}

.nf-brand:hover {
	color: var(--wp--preset--color--contrast);
}

.nf-brand__mark {
	width: 38px;
	height: 38px;
	display: block;
}

.nf-brand__name {
	font-family: var(--wp--preset--font-family--wordmark);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.06em;
	line-height: 1;
}

.nf-menu {
	display: flex;
	align-items: center;
}

.nf-menu__panel {
	display: flex;
	align-items: center;
	gap: 32px;
}

.nf-menu__list {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nf-menu__list a {
	display: block;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--sub);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

.nf-menu__list a:hover {
	color: var(--wp--preset--color--contrast);
}

.nf-menu__list .is-active > a {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	border-bottom-color: var(--wp--preset--color--accent);
}

.nf-langs {
	display: flex;
	gap: 8px;
}

.nf-lang {
	display: inline-block;
	border: 1px solid var(--nf-line);
	border-radius: 999px;
	padding: 6px 14px;
	color: var(--wp--preset--color--sub);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.nf-lang:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--sub);
}

.nf-menu__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--nf-line);
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

@media (max-width: 1100px) {
	.nf-menu__toggle {
		display: inline-flex;
	}

	.nf-menu__panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 8px var(--nf-gutter) 24px;
		background: var(--wp--preset--color--base-2);
		border-bottom: 1px solid var(--nf-line);
	}

	.nf-menu.is-open .nf-menu__panel {
		display: flex;
	}

	.nf-menu__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nf-menu__list a {
		padding: 14px 0 14px 14px;
		border-bottom: 1px solid var(--nf-line);
		border-left: 3px solid transparent;
	}

	.nf-menu__list .is-active > a {
		border-bottom-color: var(--nf-line);
		border-left-color: var(--wp--preset--color--accent);
	}

	.nf-langs {
		padding-left: 14px;
	}
}

/* ---------- フッター ---------- */
.nf-footer {
	margin-top: auto;
	border-top: 1px solid var(--nf-line);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.nf-footer__inner {
	width: var(--nf-inner);
	margin-inline: auto;
	padding-block: 36px;
	gap: 16px 32px;
	align-items: center;
}

.nf-footer__inner > * {
	margin: 0;
}

.nf-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nf-footer-menu a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.nf-footer-menu a:hover,
.nf-footer-menu .is-active > a {
	color: var(--wp--preset--color--contrast);
}

/* ---------- 本文の枠 ---------- */
/* 中身が短いページでも、フッターを画面の下端に置く */
.wp-site-blocks {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.nf-main {
	flex: 1 0 auto;
	margin-block: 0;
}

.nf-main > .nf-content {
	margin-block-start: 0;
}

.nf-content {
	max-width: calc(var(--nf-wide) + 2 * var(--nf-gutter));
	margin-inline: auto;
	box-sizing: border-box;
	padding-block: clamp(32px, 3.9vw, 56px) var(--nf-space-l);
}

.nf-content--front {
	max-width: none;
	padding-block: 0;
}

.nf-content > .nf-section,
.nf-content > .nf-band,
.nf-content > .nf-cta {
	margin-block-start: 0;
}

.nf-content > .nf-section + .nf-section,
.nf-content > .nf-section + .nf-cta,
.nf-content > .nf-cta + .nf-section {
	margin-block-start: var(--nf-space-m);
}

/* トップ（front-page）の区切り：区切りの間は margin で取る（枠の padding は各部品のもの） */
.nf-content.nf-content--front > * {
	margin-block: var(--nf-space-l) 0;
}

.nf-content.nf-content--front > :last-child {
	margin-bottom: var(--nf-space-l);
}

/* ---------- ページの見出し ---------- */
.nf-pagehead {
	border-bottom: 1px solid var(--nf-line);
}

.nf-pagehead__inner {
	width: var(--nf-inner);
	margin-inline: auto;
	padding-block: 48px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nf-crumb {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.nf-crumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.nf-crumb a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

.nf-pagehead__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.nf-pagehead__lead {
	margin: 0;
	max-width: 900px;
	color: var(--wp--preset--color--sub);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.8;
}

/* ---------- 文字の色と大きさ ---------- */
.nf-desc {
	color: var(--wp--preset--color--sub);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.8;
}

.nf-note {
	color: var(--wp--preset--color--sub);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}

.nf-muted {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.8;
}

.nf-desc a,
.nf-note a,
.nf-muted a {
	color: var(--wp--preset--color--accent);
}

/* 公開前のページへのリンク（inc/links.php が href を外したもの）は、ふつうの文字にする */
a.nf-link-pending,
.nf-desc a.nf-link-pending,
.nf-note a.nf-link-pending,
.nf-muted a.nf-link-pending {
	color: inherit;
	text-decoration: none;
}

.nf-kicker {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---------- ボタン ---------- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--nf-arrow) center / contain no-repeat;
	mask: var(--nf-arrow) center / contain no-repeat;
}

.wp-block-button__link:hover {
	opacity: 0.85;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--sub);
	opacity: 1;
}

/* ---------- 丸の中のアイコン ---------- */
.nf-badge {
	--nf-knock: var(--wp--preset--color--accent);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nf-badge-size, 52px);
	height: var(--nf-badge-size, 52px);
	border-radius: 50%;
	background: var(--nf-knock);
	color: var(--wp--preset--color--on-accent);
}

.nf-badge--accent-2 {
	--nf-knock: var(--wp--preset--color--accent-2);
}

.nf-icon {
	display: block;
}

.nf-icon .k {
	fill: var(--nf-knock);
}

.nf-icon .ks {
	stroke: var(--nf-knock);
}

.nf-glyph {
	display: inline-flex;
	color: var(--wp--preset--color--muted);
}

/* ---------- カード ---------- */
.nf-card {
	position: relative;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--nf-line);
	border-radius: var(--nf-radius);
	padding: var(--nf-card-pad, 28px);
}

.nf-card--s {
	--nf-card-pad: 24px;
}

.nf-card--l {
	--nf-card-pad: 32px;
}

.nf-card > *,
.nf-card .wp-block-heading {
	margin: 0;
}

.nf-card-title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.4;
}

.nf-card-title--l {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* カード全体をリンクにする（見出しの中のリンクを広げる） */
.nf-card--link {
	transition: border-color 0.15s;
}

.nf-card--link:hover {
	border-color: var(--wp--preset--color--muted);
}

.nf-card--link .nf-card-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nf-card--link .nf-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--nf-radius);
}

/* ---------- トップ ---------- */
.nf-hero {
	align-items: center;
}

.nf-hero__text > * {
	margin: 0;
}

.nf-wordmark {
	font-family: var(--wp--preset--font-family--wordmark);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.1;
	letter-spacing: 0.06em;
}

.nf-tagline {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.4;
}

.nf-lead {
	max-width: 540px;
	color: var(--wp--preset--color--sub);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.85;
}

.nf-figure {
	margin-inline: 0;
	margin-bottom: 0;
}

.nf-figure,
.nf-figure img {
	border-radius: var(--nf-radius);
}

.nf-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--nf-line);
	box-sizing: border-box;
}

.nf-figure--s {
	max-width: 720px;
}

/* 本文中の画像（構成図など）も、デザインの枠（線と角丸）で囲む */
.nf-content .wp-block-image:not(.nf-figure) img {
	border: 1px solid var(--nf-line);
	border-radius: var(--nf-radius);
	box-sizing: border-box;
}

.nf-quick {
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--nf-line);
	border-radius: var(--nf-radius);
	padding: 36px clamp(20px, 3.4vw, 48px);
}

.nf-quick__item {
	position: relative;
	text-align: center;
}

.nf-quick__item > * {
	margin: 0;
}

.nf-quick__item p {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.4;
}

.nf-quick__item a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nf-quick__item a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.nf-quick__item:hover a {
	text-decoration: underline;
}

.nf-band {
	background: var(--wp--preset--color--base-2);
	padding-block: var(--nf-space-l);
}

.nf-band__text > * {
	margin: 0;
}

.nf-band__text .nf-desc {
	font-size: var(--wp--preset--font-size--regular);
}

.nf-band__text strong,
.nf-desc strong {
	color: var(--wp--preset--color--contrast);
}

/* 横長の案内（CTA） */
.nf-cta {
	border: 1px solid var(--nf-line);
	border-radius: var(--nf-radius);
	padding: clamp(24px, 2.5vw, 36px) clamp(22px, 3vw, 44px);
	gap: 24px 32px;
}

.nf-cta--card {
	background: var(--wp--preset--color--card);
}

.nf-cta > *,
.nf-cta__text > * {
	margin: 0;
}

.nf-cta__title {
	font-size: var(--wp--preset--font-size--x-large);
}

/* ---------- 表 ---------- */
.nf-table {
	margin-inline: 0;
	margin-bottom: 0;
}

.nf-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.nf-table th,
.nf-table td {
	border: 0;
	border-top: 1px solid var(--nf-line);
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
}

.nf-table thead {
	border: 0;
}

.nf-table thead th {
	border-top: 0;
	padding-block: 14px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}

.nf-table td {
	color: var(--wp--preset--color--sub);
}

.nf-table td:first-child {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.nf-table code {
	background: none;
	padding: 0;
	font-size: inherit;
	overflow-wrap: anywhere;
}

/* 枠付き（動作環境・概要） */
.nf-table--boxed table {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--nf-line);
	border-radius: 14px;
	overflow: hidden;
}

.nf-table--boxed tbody tr:first-child td {
	border-top: 0;
}

.nf-table--boxed thead + tbody tr:first-child td {
	border-top: 1px solid var(--nf-line);
}

.nf-table--spec :is(th, td):first-child {
	width: 200px;
}

.nf-table--spec :is(th, td):last-child {
	width: 160px;
}

.nf-table--spec td:last-child {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
}

.nf-table--spec td strong {
	color: var(--wp--preset--color--accent-2);
}

.nf-table--kv td:first-child {
	width: 200px;
}

/* 枠なし（最新版の情報） */
.nf-table--plain td {
	padding: 14px 0;
}

.nf-table--plain td:first-child {
	width: 160px;
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.nf-table--plain td:last-child {
	color: var(--wp--preset--color--contrast);
}

/* 枠なし（設定項目） */
.nf-table--settings td {
	padding: 18px 24px 18px 0;
}

.nf-table--settings td:first-child {
	width: 240px;
}

@media (max-width: 781px) {
	.nf-table table {
		font-size: var(--wp--preset--font-size--small);
	}

	.nf-table--kv td:first-child,
	.nf-table--plain td:first-child,
	.nf-table--settings td:first-child {
		width: 34%;
	}

	.nf-table--spec :is(th, td):first-child {
		width: 27%;
	}

	.nf-table--spec :is(th, td):last-child {
		width: 25%;
	}

	.nf-table th,
	.nf-table td {
		padding-inline: 10px;
	}

	.nf-table--plain td,
	.nf-table--settings td {
		padding-inline: 0 12px;
	}
}

/* ---------- 画面の画像の差し替え枠 ---------- */
.nf-shot {
	min-height: var(--nf-shot-h, 250px);
	box-sizing: border-box;
	padding: 24px;
	border: 1.5px dashed var(--nf-line);
	border-radius: 14px;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.nf-shot--l {
	--nf-shot-h: 380px;
}

.nf-shot > * {
	margin: 0;
}

.nf-shot p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.nf-shot .nf-shot__note {
	font-size: 12px;
}

/* ---------- 管理画面の画像のライト・ダークの比較（naptify/compare、assets/compare.js） ---------- */
.nf-compare {
	margin: 0;
}

.nf-compare__frame {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--nf-line);
	border-radius: var(--nf-radius);
	line-height: 0;
}

.nf-compare__frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* JS が動かないときはライトの画像だけ */
.nf-compare.is-ready .nf-compare__frame {
	cursor: ew-resize;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.nf-compare.is-ready .nf-compare__frame img {
	-webkit-user-drag: none;
}

.nf-compare:not(.is-ready) :is(.nf-compare__labels, .nf-compare__dark, .nf-compare__handle, .nf-compare__range) {
	display: none;
}

.nf-compare__frame img.nf-compare__dark {
	position: absolute;
	inset: 0;
	height: 100%;
	clip-path: inset(0 0 0 var(--nf-compare-pos, 50%));
}

.nf-compare__labels {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	color: var(--wp--preset--color--sub);
	font-size: 12px;
	line-height: 1.6;
}

.nf-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--nf-compare-pos, 50%);
	width: 2px;
	margin-left: -1px;
	background: var(--wp--preset--color--accent-2);
	pointer-events: none;
}

.nf-compare__handle::after {
	content: "\2039\203A";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--on-accent);
	font-size: 15px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
	letter-spacing: 2px;
}

.nf-compare__frame:has(.nf-compare__range:focus-visible) .nf-compare__handle::after {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* range は見えない形で画像に重ね、キーボードと読み上げだけに使う（マウス・タッチは枠が受ける） */
.nf-compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.nf-compare__caption {
	margin-top: 10px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
}

/* ---------- ダウンロード（naptify/downloads） ---------- */
.nf-dl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: 20px;
}

.nf-dl__os {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.nf-dl__os.is-current {
	border-color: var(--wp--preset--color--accent-2);
}

.nf-dl__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.nf-dl__head > * {
	margin: 0;
}

.nf-dl__yours {
	padding: 2px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--wp--preset--color--accent-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.6;
}

.nf-dl__yours[hidden] {
	display: none;
}

/* アーキテクチャごとの枠。見出し・項目名・ボタンの左端は、カードの内側の左端にそろえる */
.nf-dl__item {
	--nf-dl-current-pad: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid var(--nf-line);
}

/* 見ている人のアーキテクチャの枠（確定できたときだけ）。囲みの分だけ外へ広げ、中の左端はほかの枠とそろえたまま */
.nf-dl__item.is-current {
	margin-inline: calc(-1 * var(--nf-dl-current-pad) - 1px);
	padding: var(--nf-dl-current-pad);
	border: 1px solid var(--wp--preset--color--accent-2);
	border-radius: var(--nf-radius);
}

.nf-dl__item > .nf-dl__head {
	align-self: stretch;
}

.nf-dl__item > * {
	margin: 0;
}

.nf-dl__arch {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.nf-dl__pending {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

/* 項目名の列は、どの枠も同じ項目名なので max-content で幅がそろう */
.nf-dl__meta {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 6px 20px;
	align-self: stretch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

.nf-dl__meta dt {
	color: var(--wp--preset--color--muted);
}

.nf-dl__meta dd {
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	overflow-wrap: anywhere;
}

.nf-dl__meta code {
	font-size: var(--wp--preset--font-size--x-small);
}

/* ファイル名はハイフンの位置で折る。SHA-256 は区切りが無いので、どこででも折る */
.nf-dl__meta .nf-dl__hash {
	word-break: break-all;
}

.nf-dl__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nf-dl-history :is(th, td):first-child,
.nf-dl-history :is(th, td):nth-child(2) {
	width: 200px;
}

@media (max-width: 781px) {
	.nf-dl-history :is(th, td):first-child,
	.nf-dl-history :is(th, td):nth-child(2) {
		width: 30%;
	}
}

/* 変更点の要約は普段は文字だけ。指したとき・キーボードで選んだときに下線。 */
.nf-dl-history td a {
	color: inherit;
	text-decoration: none;
}

.nf-dl-history td a:hover,
.nf-dl-history td a:focus-visible {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* ---------- はじめかた ---------- */
.nf-steps > .nf-step {
	margin: 0;
}

.wp-block-columns.nf-step {
	gap: 28px;
	padding-block: 32px;
	border-top: 1px solid var(--nf-line);
	margin-bottom: 0;
}

.nf-step:first-child {
	padding-top: 0;
	border-top: 0;
}

.nf-step h2 {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--xx-large);
}

.nf-step .nf-desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--regular);
	line-height: 1.85;
}

.nf-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
}

/* ---------- 操作マニュアル ---------- */
.wp-block-columns.nf-manual {
	gap: clamp(28px, 3.9vw, 56px);
	margin: 0;
}

.nf-toc {
	border-right: 1px solid var(--nf-line);
	padding-right: 24px;
}

.nf-toc > * {
	margin: 0;
}

.nf-toc__label {
	margin: 0 0 8px;
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.nf-toc__list {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.nf-toc__list li {
	margin: 0;
	padding: 6px 12px;
	border-radius: 8px;
	color: var(--wp--preset--color--sub);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.nf-toc__list li.is-current {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	font-weight: 700;
}

.nf-toc__list li.is-current a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nf-toc__list li a {
	color: inherit;
	text-decoration: none;
}

.nf-toc__list li a:hover,
.nf-toc__list li a:focus-visible {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

.nf-toc__list li.is-pending {
	color: var(--wp--preset--color--muted);
	cursor: default;
}

.nf-toc__soon {
	margin-left: 8px;
	padding: 1px 8px;
	border: 1px solid var(--nf-line);
	border-radius: 999px;
	font-size: 11px;
	white-space: nowrap;
}

.nf-article > * {
	margin: 0;
}

.nf-article > * + * {
	margin-top: 24px;
}

.nf-article > .nf-kicker + h2 {
	margin-top: 8px;
}

.nf-article h2 {
	font-size: var(--wp--preset--font-size--huge);
	scroll-margin-top: 24px;
}

/* 章（目次から飛ぶ単位）。章どうしは線で区切る */
.nf-article > .nf-chapter + .nf-chapter {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid var(--nf-line);
}

.nf-chapter > * {
	margin: 0;
}

.nf-chapter > * + * {
	margin-top: 24px;
}

.nf-chapter > .nf-kicker + h2 {
	margin-top: 8px;
}

/* 広い画面では目次をスクロールに追従させる */
@media (min-width: 782px) {
	.nf-manual > .wp-block-column:first-child {
		align-self: stretch;
	}

	.nf-manual .nf-toc {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
	}
}

@media (max-width: 781px) {
	.nf-toc {
		border-right: 0;
		border-bottom: 1px solid var(--nf-line);
		padding: 0 0 8px;
	}
}

/* ---------- よくある質問 ---------- */
.nf-content > .nf-faq.alignwide {
	max-width: 1000px;
}

.nf-faq > .wp-block-details {
	margin: 0;
	padding: 22px 0;
	border-top: 1px solid var(--nf-line);
}

.nf-faq summary {
	display: flex;
	align-items: center;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(17px, 0.4vw + 15px, 19px);
	line-height: 1.5;
}

.nf-faq summary::-webkit-details-marker {
	display: none;
}

.nf-faq summary::before {
	content: "Q.";
	color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

.nf-faq summary::after {
	content: "";
	width: 20px;
	height: 20px;
	margin-left: auto;
	flex-shrink: 0;
	background: var(--wp--preset--color--muted);
	-webkit-mask: var(--nf-chevron) center / contain no-repeat;
	mask: var(--nf-chevron) center / contain no-repeat;
	transition: transform 0.15s;
}

.nf-faq details[open] > summary::after {
	transform: rotate(180deg);
}

.nf-faq details > :not(summary) {
	margin: 10px 0 0;
	padding-left: 28px;
	color: var(--wp--preset--color--sub);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.85;
}

/* ---------- サポート ---------- */
/* SupportCandy（#wpsc-container）の色は SupportCandy の「外観」設定と assets/supportcandy.css で決める。
   テーマの見出しの色と字体は持ち込まない。 */
.nf-support-form #wpsc-container {
	border-radius: var(--nf-radius);
	overflow: hidden;
}

.nf-support-form #wpsc-container :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	font-family: inherit;
}

.nf-support-list {
	margin: 0;
	padding-left: 1.2em;
}

.nf-support-list li {
	margin: 0;
}

/* ---------- ページの切り替え（.nf-pager、assets/pager.js。リリースノート） ---------- */
.nf-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-block-end: var(--nf-space-s);
}

.nf-pager[hidden],
.nf-release[hidden],
.nf-dl-history tr[hidden] {
	display: none;
}

.nf-pager__btn {
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--nf-line);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.nf-pager__btn:hover:not(:disabled) {
	border-color: var(--wp--preset--color--sub);
}

.nf-pager__btn[aria-current="page"] {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 700;
}

.nf-pager__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---------- 狭い画面 ---------- */
@media (max-width: 781px) {
	.nf-cta {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.nf-row-stack {
		flex-wrap: wrap !important;
	}
}

/* 2 つ以上並ぶボタンは、狭い画面では全幅で縦に積む（1 つだけ次の行へ落ちる中途半端な折り返しを避ける） */
@media (max-width: 600px) {
	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) {
		flex-direction: column;
		align-items: stretch;
		align-self: stretch;
		width: 100%;
	}

	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) .wp-block-button__link {
		box-sizing: border-box;
		width: 100%;
		justify-content: center;
	}
}

/* 日本語の題は語の途中で折り返さない（空白の位置で折る。収まらなければどこでも折る） */
:lang(ja) .nf-tagline {
	word-break: keep-all;
	overflow-wrap: anywhere;
}