/*!
 * Szkk theme - main.css
 * このファイルは build/build.sh が生成しています。直接編集しないでください。
 * 編集対象: src/css/NN-*.css
 */

/* ---- 00-tokens.css ---- */
/* ==========================================================================
   デザイントークン

   色・フォント・余白の値そのものは theme.json が --wp--preset--* として
   出力する。ここではそれを短い別名に束ね、レイアウト固有の値だけを足す。
   theme.json 側を編集すればサイト全体とエディターに同時に反映される。

   配色の考え方:
     canvas  青みを含んだ淡いグレーの下地。ここに白いカードを浮かべる
     accent  ブルー。ブランド色。ウィジェット見出し・バッジ・ボタン
     link    濃いブルー。リンクと「現在地」の表示だけに使い、乱用しない

   青を2色使うので、役割を混ぜないこと。面を塗るのは accent、
   文字のリンクだけが link。同じ青系でも彩度と明度で見分けさせている。
   ========================================================================== */

:root {
	/* --- 色。theme.json のパレットを参照する --- */
	--szkk-base: var(--wp--preset--color--base, #ffffff);
	--szkk-canvas: var(--wp--preset--color--canvas, #e9eff4);
	--szkk-surface: var(--wp--preset--color--surface, #f2f6f9);
	--szkk-border: var(--wp--preset--color--border, #dbe4ec);
	--szkk-text: var(--wp--preset--color--contrast, #2c3a46);
	--szkk-muted: var(--wp--preset--color--muted, #8b98a4);
	--szkk-accent: var(--wp--preset--color--accent, #2f74d8);
	--szkk-accent-dark: var(--wp--preset--color--accent-dark, #2159b8);
	--szkk-link: var(--wp--preset--color--link, #1f5ecc);
	--szkk-link-dark: var(--wp--preset--color--link-dark, #1a4ea9);

	/* --- 余白 --- */
	--szkk-space-1: var(--wp--preset--spacing--10, 0.5rem);
	--szkk-space-2: var(--wp--preset--spacing--20, 1rem);
	--szkk-space-3: var(--wp--preset--spacing--30, 1.5rem);
	--szkk-space-4: var(--wp--preset--spacing--40, 2.5rem);
	--szkk-space-5: var(--wp--preset--spacing--50, 4rem);

	/* --- レイアウト幅。ここはテーマ固有なので theme.json には無い --- */
	--szkk-container: 1200px;   /* ヘッダー・フッター・本文を囲む最大幅 */
	--szkk-sidebar: 300px;      /* サイドバーの固定幅 */
	--szkk-gutter: 2rem;        /* 本文とサイドバーの間隔 */
	--szkk-content: 720px;      /* 記事本文の1行の最大幅。読みやすさ優先 */

	/* 「全幅（サイドバーなし）」テンプレートのページで、中身に効く上限。
	   本文・目次・カスタムHTMLブロックの中身がまとめてこれを見る。
	   設定の既定値は 0＝「上限を設けない」で、0 は数値として出力されない
	   （inc/dynamic-css.php は既定値と同じ設定を出力しない）ため、
	   既定のままなら下の 100% がそのまま使われる。 */
	--szkk-content-wide: 100%;
	--szkk-pad: var(--szkk-space-2); /* 画面端の余白 */

	/* --- ヘッダー。すべて設定画面（外観 › Szkk 設定 › ヘッダー）から上書きできる。
	   ここの値と設定項目の既定値は必ず揃えること。ずれると、設定を触っていない
	   のに見た目が変わったり、既定に戻したはずが戻らなくなる。 --- */
	--szkk-header-height: 72px;   /* ヘッダーの帯の最低の高さ */
	--szkk-logo-height: 48px;     /* ロゴ画像の最大の高さ */

	/* ロゴマークの色。ブランドの決まりで #0f6cbd と決まっている
	   （鈴掛のロゴ設計 exports/README.md「単色以外の着色は不可」）。
	   アクセント色に紐付けると、設定を変えただけでロゴの色が規定から外れる。
	   だからここだけはパレットを参照せず、値を直接持つ。 */
	--szkk-logo-color: #0f6cbd;
	--szkk-site-title-size: 24px; /* ロゴ画像が無いときのサイト名 */
	--szkk-header-bg: var(--szkk-base);
	--szkk-header-border: var(--szkk-border);
	--szkk-header-title: var(--szkk-accent);
	--szkk-header-title-dark: var(--szkk-accent-dark);

	/* 最上部の細い帯。ここだけ色を塗り、ロゴの行は白のままにする。
	   既定はアクセント色に追従させ、設定で変えたときだけ上書きされる。 */
	--szkk-topbar-bg: var(--szkk-accent);
	--szkk-topbar-text: #ffffff;

	/* 検索を開いたときの暗幕。半透明の黒。
	   不透明にすると後ろが完全に消えて、どこにいるのか分からなくなる。 */
	--szkk-overlay: rgb(0 0 0 / 70%);

	/* --- 装飾 ---
	   角丸はほぼ付けない。白い箱を淡い枠線で四角く並べるのがこのテーマの
	   基本の形で、角を丸めるとその整列感が緩む。 */
	--szkk-radius: 3px;
	--szkk-radius-sm: 2px;
	--szkk-radius-pill: 999px;
	--szkk-shadow-sm: var(--wp--preset--shadow--sm, 0 1px 2px rgba(62, 62, 62, 0.05));
	--szkk-shadow-md: var(--wp--preset--shadow--md, 0 2px 10px rgba(62, 62, 62, 0.07));
	--szkk-shadow-lg: var(--wp--preset--shadow--lg, 0 8px 26px rgba(62, 62, 62, 0.12));

	/* --- 動き --- */
	--szkk-ease: cubic-bezier(0.2, 0, 0, 1);
	--szkk-duration: 180ms;

	/* --- 重なり順。マジックナンバーを散らかさないため1か所にまとめる --- */
	--szkk-z-header: 100;
	--szkk-z-mobile-nav: 110;
	--szkk-z-modal: 200;        /* 画面中央に開く検索。何より前に出す */
	--szkk-z-to-top: 90;
}

@media (min-width: 782px) {
	:root {
		--szkk-pad: var(--szkk-space-3);
		--szkk-gutter: 2.5rem;
	}
}

/* ---- 10-base.css ---- */
/* ==========================================================================
   リセットと基本スタイル
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 固定ヘッダーの下にアンカー先が隠れないようにする。
	   ヘッダーの高さは設定で変えられるので、その値から計算する。 */
	scroll-padding-top: calc(var(--szkk-header-height) + 0.5rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	/* 下地は淡いグレー。この上に白いカードを並べて奥行きを作る */
	background-color: var(--szkk-canvas);
	color: var(--szkk-text);
	/* フォント・サイズ・行間は theme.json の styles が body に当てる */
	word-break: normal;
	overflow-wrap: anywhere;
	/* 日本語の行頭・行末の禁則を効かせる */
	line-break: strict;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	line-height: 1.45;
	font-weight: 700;
}

p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
}

ul, ol {
	padding: 0;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--szkk-link);
	text-underline-offset: 0.2em;
	transition: color var(--szkk-duration) var(--szkk-ease);

	&:hover {
		color: var(--szkk-link-dark);
	}
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* --- フォーカスリング。キーボード操作時だけ出す --- */
:focus-visible {
	outline: 2px solid var(--szkk-link);
	outline-offset: 2px;
	border-radius: var(--szkk-radius-sm);
}

/* --- スクリーンリーダー専用テキスト --- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- 本文へスキップ。Tab を押したときだけ現れる --- */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;

	&:focus {
		position: fixed;
		width: auto;
		height: auto;
		margin: var(--szkk-space-1);
		padding: 0.75rem 1.25rem;
		clip-path: none;
		background: var(--szkk-base);
		color: var(--szkk-text);
		box-shadow: var(--szkk-shadow-lg);
		border-radius: var(--szkk-radius);
		text-decoration: none;
	}
}

/* ---- 20-layout.css ---- */
/* ==========================================================================
   レイアウト

   .l-container  横幅を揃える外枠
   .site-content 本文とサイドバーを並べるグリッド
   .l-main       本文カラム
   .l-sidebar    サイドバーカラム
   ========================================================================== */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.l-container {
	width: 100%;
	max-width: var(--szkk-container);
	margin-inline: auto;
	padding-inline: var(--szkk-pad);
}

.site-content {
	flex: 1 0 auto;
	display: grid;
	gap: var(--szkk-gutter);
	padding-block: var(--szkk-space-4);

	/* 狭い画面では1カラム。サイドバーは本文の下に回る */
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.site-content.has-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--szkk-sidebar);
		align-items: start;
	}

	/*
	 * 左サイドバー（設定で切り替え）。列の順番を入れ替え、サイドバーを
	 * order で先頭に送る。HTML の並びは変えないので、読み上げ順と
	 * キーボード操作の順は本文が先のまま保たれる。
	 */
	.szkk-sidebar-left .site-content.has-sidebar {
		grid-template-columns: var(--szkk-sidebar) minmax(0, 1fr);
	}

	.szkk-sidebar-left .l-sidebar {
		order: -1;
	}
}

.l-main {
	min-width: 0; /* グリッド内で長いコードブロックがはみ出すのを防ぐ */
	display: flex;
	flex-direction: column;
	gap: var(--szkk-space-3);
}

/* 記事本体だけは前後に大きく間を取り、一覧の詰まった並びと区別する */
.l-main > .entry {
	padding: var(--szkk-space-3);
	background: var(--szkk-base);
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);
}

@media (min-width: 782px) {
	.l-main > .entry {
		padding: var(--szkk-space-4);
	}
}

/*
 * 全幅（ツール）のページは、白い箱に入れない。
 *
 * 道具そのものが主役で、外側にもう1枚枠があると「ページの上に別のアプリが
 * 乗っている」ように見える。枠を外して、下地の上に中身が直接あるようにする。
 *
 * 下地の色は変えない。ツールの中で使っている白いカードとの差が
 * この色で付いているので、白くすると中身の区切りが見えなくなる。
 */
.page-template-full-width .l-main > .entry {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.l-sidebar {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--szkk-space-3);
}

/*
 * 通常枠。ここも flex にしないとウィジェット同士がくっつく。
 * 追従枠と同じ gap にして、枠をまたいでも間隔が変わらないようにする
 * （.l-sidebar 自身の gap も同じ値）。
 */
.l-sidebar__main {
	display: flex;
	flex-direction: column;
	gap: var(--szkk-space-3);
}

/* スクロール追従枠。ヘッダーの高さぶん下げて止める */
.l-sidebar__sticky {
	position: sticky;
	top: var(--szkk-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--szkk-space-3);
}

/*
 * サイドバーの無いページも幅を絞らない。
 * トップページ（本文＋サイドバー）と固定ページで箱の左右の端が変わると、
 * ページを移動するたびに横幅が動いて見える。外枠は常に --szkk-container。
 * 1行が長くなりすぎるのは .entry__content 側の --szkk-content が防ぐ。
 */
.site-content.no-sidebar .l-main {
	width: 100%;
}

/*
 * コメント欄と 404 も記事と同じ白い箱に載せて、灰色の下地に文字が
 * 直接置かれないようにする。前後記事は左右のリンクそれぞれが白い箱に
 * なるため、ここでは包まない（箱の入れ子になってしまう）。
 */
.l-main > .comments,
.l-main > .error-404 {
	padding: var(--szkk-space-3);
	background: var(--szkk-base);
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);
}

@media (min-width: 782px) {
	.l-main > .comments,
	.l-main > .error-404 {
		padding: var(--szkk-space-4);
	}
}


/* ==========================================================================
   アプリ表示（page-templates/app.php）

   ヘッダーもフッターも無く、本文が画面を占める。ツールのように
   それ自体で画面を使い切る中身のためのモード。

   高さは --szkk-app-h として公開し、中身の側がそれを読む。テーマが
   個々のツールの id を知る必要が無く、管理バーのぶんの差し引きも
   ここ1か所で済む。
   ========================================================================== */

.szkk-app {
	--szkk-app-h: 100dvh;

	margin: 0;
	/* 画面を占める中身の左右に、下地の色が覗かないようにする */
	background-color: var(--szkk-base);
}

/* ログイン中は上に管理バーが乗る。そのぶん引かないと縦スクロールが出る。 */
.szkk-app.admin-bar {
	--szkk-app-h: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	.szkk-app.admin-bar {
		--szkk-app-h: calc(100dvh - 46px);
	}
}

/* dvh に対応しない環境向け。アドレスバーの伸縮ぶんだけずれるが破綻はしない。 */
@supports not (height: 100dvh) {
	.szkk-app {
		--szkk-app-h: 100vh;
	}

	.szkk-app.admin-bar {
		--szkk-app-h: calc(100vh - 32px);
	}
}

/* このテンプレートは中身1つで画面を使い切る前提。body の直下に幅や余白を
   足す規則は置かない（wp_footer が出す管理バーにも当たってしまう）。 */

/* ---- 30-header.css ---- */
/* ==========================================================================
   ヘッダーとナビゲーション

   ヘッダーはロゴだけの白い帯。カテゴリーのタブは本文カラムの先頭に置き、
   カード一覧と左右の位置を揃える（30-header.css の .category-tabs）。
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--szkk-z-header);
	background: var(--szkk-header-bg);
	border-bottom: 1px solid var(--szkk-header-border);
}

/* 「ヘッダーの固定」を外したとき。スクロールで流れていく。 */
.szkk-header-static .site-header {
	position: static;
}

.site-header__inner {
	/* ロゴを中央に置き、ハンバーガーだけ右端に絶対配置する */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--szkk-header-height);
	text-align: center;
}

/* --- 左ロゴのレイアウト --- */

.szkk-header-left .site-header__inner {
	justify-content: flex-start;
	text-align: left;
}

.szkk-header-left .site-branding {
	/* 中央寄せのときに空けていた左の逃げ幅は不要。右だけ空ける。 */
	padding-inline: 0 3.5rem;
}

.szkk-header-left .site-branding__title img {
	margin-inline: 0;
}

.szkk-header-left .site-branding__link {
	justify-content: flex-start;
}

/* --- 最上部の細い帯（ひとこと・SNS・検索） --- */

.topbar {
	background: var(--szkk-topbar-bg);
	color: var(--szkk-topbar-text);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--szkk-space-2);
	/* 参考にした構成に合わせて薄くする。中身より低くはならない。 */
	min-height: 2rem;
}

.topbar__text {
	margin: 0;
	font-size: 0.6875rem;
	/* 帯の色の上に乗るので、独自の色は持たず帯の文字色を継ぐ */
	color: inherit;
	/* 長いキャッチフレーズで帯が2段にならないようにする */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.topbar__actions {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	/* 文が長くてもアイコンは縮めない */
	flex: 0 0 auto;
	margin-left: auto;
}

.topbar__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color var(--szkk-duration) var(--szkk-ease);
}

/* SNS は <a>、検索は <button>。<a> にだけ a:hover の色変化が当たるため
   反応が揃っていなかった。両方に同じ変化を明示して揃える。
   帯の色の上に乗るので、別の色にはせず文字色を暗いほうへ寄せるだけにする。 */
.topbar__link:hover,
.topbar__link:focus-visible {
	color: color-mix(in srgb, var(--szkk-topbar-text) 65%, #000);
}

/* 開いている間、このボタンは暗幕の下に隠れる。
   ×印に入れ替えても見えないので、虫めがねのままにしてある。 */

/* --- 画面の中央に開く検索 ---

   ヘッダーの下にぶら下げず、画面全体を覆って中央に出す。
   要素は wp_footer で body の直下に出している（ヘッダーの中に置くと、
   position: sticky が作る重なり順の文脈に閉じ込められるため）。 */

.search-modal {
	position: fixed;
	inset: 0;
	z-index: var(--szkk-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--szkk-space-2);
}

/* hidden 属性が効くようにする。display: flex は属性より強い。 */
.search-modal[hidden] {
	display: none;
}

.search-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--szkk-overlay);
}

/* 白いカードは置かない。暗幕の上に入力欄だけを浮かせる。 */
.search-modal__panel {
	position: relative;
	width: min(40rem, 100%);
	/* 上から降りてくる動き。控えめに。 */
	animation: szkk-search-in 180ms var(--szkk-ease);
}

@keyframes szkk-search-in {
	from {
		opacity: 0;
		transform: translateY(-0.75rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.search-modal__panel {
		animation: none;
	}
}

/* 暗幕の上で輪郭を立たせるため、白い枠で囲む。 */
.search-modal .search-form {
	border: 2px solid var(--szkk-base);
	border-radius: var(--szkk-radius-sm);
}

.search-modal .search-form__input {
	font-size: 1rem;
	padding: 0.65rem 0.9rem;
}

/* 検索ボタンは、参考にした構成に合わせて色を塗った四角にする。 */
.search-modal .search-form__submit {
	width: 3rem;
	background: var(--szkk-accent);
	color: var(--szkk-base);
}

.search-modal .search-form__submit:hover {
	background: var(--szkk-accent-dark);
}

.search-modal .search-form__submit .szkk-icon {
	width: 19px;
	height: 19px;
}

/* 閉じるは、入力欄の下に中央揃えで置く。 */
.search-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: var(--szkk-space-2);
	padding: 0.5rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--szkk-base);
	background: none;
	border: 0;
	cursor: pointer;
	opacity: 0.9;
}

.search-modal__close:hover {
	opacity: 1;
}

/* --- ヘッダー内のメインメニュー（設定「左ロゴ＋右にメニュー」） ---

   ロゴを左端、メニューを右端に置く。項目は日本語を大きく、説明欄に入れた
   英字をその下に小さく添える2段組み。 */

.szkk-header-nav .site-header__inner {
	justify-content: space-between;
	gap: var(--szkk-space-2);
	/* ロゴ側とメニュー側を、縦線で仕切る（参考にした構成） */
	align-items: stretch;
	padding-block: 0;
}

.szkk-header-nav .site-branding {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
}

.site-header__nav-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* 仕切りの縦線。ヘッダーの高さいっぱいに引く */
	border-left: 1px solid var(--szkk-header-border);
	padding-left: var(--szkk-space-3);
}

/* メニュー側の「CONTENTS」の小さな見出し。
   既定のレイアウトでは邪魔なので、メニュー入りのときだけ見せる。
   ロゴ側にも同じものを置いていたが、ロゴの上に文字が乗って
   邪魔になるだけだったので外した（szkk/header.php）。 */
.site-header__label {
	display: none;
	font-size: 0.5625rem;
	letter-spacing: 0.16em;
	line-height: 1;
	color: var(--szkk-muted);
}

.szkk-header-nav .site-header__label {
	display: block;
	margin-bottom: 0.35rem;
}

.header-nav {
	/* 狭い画面ではハンバーガーに任せる。畳んで入れると帯が高くなりすぎる。 */
	display: none;
}

/* メニューを隠す幅では、仕切り線と「CONTENTS」の見出しも一緒に消す。
   残すと、中身の無い縦線だけがヘッダーに立つ。 */
@media (max-width: 899.98px) {
	.site-header__nav-area {
		display: none;
	}
}

@media (min-width: 900px) {
	.header-nav {
		display: block;
	}

	/* メニューが入るぶん、ハンバーガーは不要になる */
	.szkk-header-nav .menu-toggle {
		display: none;
	}

	/* ハンバーガーが消えるので、その逃げ幅も要らない */
	.szkk-header-nav .site-branding {
		padding-inline: 0;
	}
}

.header-nav__list {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;

	& > li {
		position: relative;
		display: flex;

		/* 項目同士の仕切り線。1本目の左には引かない */
		& + li::before {
			content: "";
			position: absolute;
			left: 0;
			top: 25%;
			bottom: 25%;
			width: 1px;
			background: var(--szkk-border);
		}
	}

	& a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.1rem;
		padding: 0.4rem 1.25rem;
		color: var(--szkk-text);
		text-decoration: none;
		white-space: nowrap;
		transition: color var(--szkk-duration) var(--szkk-ease);
	}

	& a:hover {
		color: var(--szkk-accent);
	}
}

.header-nav__label {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

.header-nav__sub {
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	line-height: 1.2;
	color: var(--szkk-muted);
	text-transform: lowercase;
}

/* 現在地は、文字色とヘッダー下端の太い下線で示す。 */
.header-nav__list > li > a {
	position: relative;
}

.header-nav__list .current-menu-item > a,
.header-nav__list .current-menu-ancestor > a,
.header-nav__list .current-menu-parent > a,
.header-nav__list .current_page_item > a,
.header-nav__list .current_page_parent > a {
	color: var(--szkk-accent);
}

.header-nav__list .current-menu-item > a::after,
.header-nav__list .current-menu-ancestor > a::after,
.header-nav__list .current-menu-parent > a::after,
.header-nav__list .current_page_item > a::after,
.header-nav__list .current_page_parent > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--szkk-accent);
}

/* --- サイト名・ロゴ --- */

.site-branding {
	min-width: 0;
	/* ハンバーガーの下にロゴが潜り込まないよう、左右に逃げ幅を取る */
	padding-inline: 3.5rem;
}

@media (min-width: 900px) {
	.site-branding {
		padding-inline: 0;
	}
}

.site-branding__title {
	margin: 0;
	font-size: var(--szkk-site-title-size);
	letter-spacing: 0.04em;
	line-height: 1.3;

	& img {
		max-height: var(--szkk-logo-height);
		width: auto;
		margin-inline: auto;
	}
}

.site-branding__link {
	/* ロゴ画像が無いときは、マークとサイト名をブランド色で見せる */
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--szkk-header-title);
	text-decoration: none;

	&:hover {
		color: var(--szkk-header-title-dark);
	}
}

/* テーマ同梱のロゴマーク。塗りは currentColor なので、ここで決めた色になる。
   リンクの色（ホバーで濃くなる）を継がせないため、link 側ではなくここで指定する。
   ブランドの決まりで単色以外の着色はできない。
   カスタムロゴの <img> と同じ高さに揃える。 */
.site-branding__mark {
	display: block;
	height: var(--szkk-logo-height);
	width: auto;
	color: var(--szkk-logo-color);
}

.site-branding__description {
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	color: var(--szkk-muted);
	/* 長いキャッチフレーズでヘッダーが崩れないよう1行に留める */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- カテゴリータブ（本文カラムの先頭に置くメインナビ） --- */

.category-tabs {
	background: var(--szkk-base);
	border: 1px solid var(--szkk-border);
}

.category-tabs__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;

	/*
	 * 項目が多いときは折り返す。overflow-x: auto での横スクロールにすると
	 * サブメニューのドロップダウンが切り取られてしまうため使わない。
	 */
	flex-wrap: wrap;

	& > li {
		position: relative;
		flex: 1 0 auto;

		/* タブ同士の仕切り線。1本目の左には引かない */
		& + li::before {
			content: "";
			position: absolute;
			left: 0;
			top: 20%;
			bottom: 20%;
			width: 1px;
			background: var(--szkk-border);
		}
	}

	& a {
		display: block;
		padding: 1rem 1.5rem;
		color: var(--szkk-muted);
		font-size: 0.9375rem;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		transition: color var(--szkk-duration) var(--szkk-ease);

		/* 選択中を示す下線。既定では畳んでおく */
		&::after {
			content: "";
			position: absolute;
			inset-inline: 0;
			bottom: 0;
			height: 3px;
			background: var(--szkk-link);
			transform: scaleX(0);
			transition: transform var(--szkk-duration) var(--szkk-ease);
		}

		&:hover {
			color: var(--szkk-text);
		}
	}

	/* 現在地のタブ。色と下線の両方で示し、色だけに頼らない */
	& .current-menu-item > a,
	& .current-menu-parent > a,
	& .current-menu-ancestor > a {
		color: var(--szkk-link);

		&::after {
			transform: scaleX(1);
		}
	}

	/* サブメニューはタブの下にドロップダウンさせる */
	& .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1;
		min-width: 12rem;
		margin: 0;
		padding: 0.35rem 0;
		list-style: none;
		background: var(--szkk-base);
		border: 1px solid var(--szkk-border);
		box-shadow: var(--szkk-shadow-md);

		& a {
			padding: 0.55rem 1rem;
			font-weight: 500;
			text-align: left;
			color: var(--szkk-text);

			&::after {
				content: none;
			}

			&:hover {
				background: var(--szkk-surface);
			}
		}
	}

	& > li:hover > .sub-menu,
	& > li:focus-within > .sub-menu {
		display: block;
	}
}

/* --- ハンバーガーボタン --- */

.menu-toggle {
	position: absolute;
	/* 絶対配置の基準は .l-container のパディングボックスなので、
	   画面端に張り付かないよう同じ余白ぶん内側に寄せる */
	right: var(--szkk-pad);
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);
	background: var(--szkk-base);
}

@media (min-width: 900px) {
	.menu-toggle {
		display: none;
	}
}

.menu-toggle__bars {
	position: relative;
	width: 1.125rem;
	height: 2px;
	background: var(--szkk-text);
	transition: background var(--szkk-duration) var(--szkk-ease);

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--szkk-text);
		transition: transform var(--szkk-duration) var(--szkk-ease);
	}

	&::before {
		top: -6px;
	}

	&::after {
		top: 6px;
	}
}

/* 開いている間は×印にする */
.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
	background: transparent;

	&::before {
		transform: translateY(6px) rotate(45deg);
	}

	&::after {
		transform: translateY(-6px) rotate(-45deg);
	}
}

/* --- モバイルナビ --- */

.mobile-nav {
	z-index: var(--szkk-z-mobile-nav);
	border-top: 1px solid var(--szkk-border);
	background: var(--szkk-base);
	padding-block: var(--szkk-space-2);
	max-height: calc(100dvh - 4.5rem);
	overflow-y: auto;

	&[hidden] {
		display: none;
	}
}

@media (min-width: 900px) {
	.mobile-nav {
		display: none;
	}
}

.mobile-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;

	& a {
		display: block;
		padding: 0.875rem 0.25rem;
		border-bottom: 1px solid var(--szkk-border);
		color: var(--szkk-text);
		font-weight: 600;
		text-decoration: none;
	}

	& .sub-menu {
		margin: 0;
		padding: 0;
		list-style: none;

		& a {
			padding-left: 1.5rem;
			font-weight: 400;
			font-size: 0.9375rem;
		}
	}
}

.mobile-nav__search {
	margin-top: var(--szkk-space-2);
}

/* ---- 40-entry.css ---- */
/* ==========================================================================
   記事本体と本文の組版
   ========================================================================== */

.entry {
	background: var(--szkk-base);
}

.entry__header {
	display: flex;
	flex-direction: column;
	gap: var(--szkk-space-2);
	margin-bottom: var(--szkk-space-3);
}

/*
 * 全幅（ツール）のページのタイトル。
 *
 * 記事と違ってタイトルは「今どの道具を開いているか」の目印でしかない。
 * 読み物の見出しほど大きく取ると、肝心の道具が画面の下へ押し出されるので、
 * 一段小さくして間も詰める。
 */
.page-template-full-width .entry__header {
	margin-bottom: var(--szkk-space-3);
}

.page-template-full-width .entry__title {
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.entry__title {
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
	letter-spacing: 0.01em;
}

/*
 * 記事上部のアイキャッチ。一覧カードと同じ 16:9 で切り出す。
 *
 * 登録している szkk-hero（1200×675）は 16:9 だが、それより小さい画像を
 * 入れると切り出しが作られず、元の縦横比のまま出てしまう。
 * 画像の大きさに関係なく比率を揃えるため、表示側でも固定する。
 * object-fit: cover なので、縮まずに中央で切り取られる。
 */
.entry__eyecatch {
	margin-bottom: var(--szkk-space-4);
	overflow: hidden;
	border-radius: var(--szkk-radius);
	aspect-ratio: 16 / 9;

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* --- 本文。ここだけは幅を絞って読みやすさを優先する --- */

.entry__content {
	display: flow-root;

	/* 直下の要素を本文幅に揃える。alignwide / alignfull だけ例外にする */
	& > * {
		max-width: var(--szkk-content);
		margin-inline: auto;
		margin-block: var(--szkk-space-3);
	}

	& > .alignwide {
		max-width: 100%;
	}

	/*
	 * 「全幅（サイドバーなし）」テンプレートは、ツールの埋め込みのように
	 * 幅が要る中身を載せるためのもの。本文幅の絞り込みを外し、
	 * カスタムHTMLブロックの中身を白い箱いっぱいに広げる。
	 *
	 * 通常の固定ページ・投稿はこれまでどおり --szkk-content で絞る。
	 * このテンプレートを使うのはツールのページだけ、という前提の指定。
	 */
	.page-template-full-width & > * {
		max-width: var(--szkk-content-wide);
	}

	& > .alignfull {
		max-width: none;
		width: 100%;
		margin-inline: 0;
	}

	& > *:first-child {
		margin-block-start: 0;
	}

	& > *:last-child {
		margin-block-end: 0;
	}

	/* 見出し。上に大きく余白を取り、話題の切れ目を明確にする。
	   h2 は帯、h3 は縦線と、装飾の強さで階層を示す */
	& h2 {
		margin-block-start: var(--szkk-space-5);
		padding: 0.65rem 1rem;
		background: var(--szkk-surface);
		border-left: 5px solid var(--szkk-accent);
		font-size: clamp(1.3125rem, 1.15rem + 0.75vw, 1.625rem);
	}

	& h3 {
		margin-block-start: var(--szkk-space-4);
		padding-left: 0.8rem;
		border-left: 4px solid var(--szkk-accent);
		font-size: clamp(1.125rem, 1.03rem + 0.5vw, 1.375rem);
	}

	& h4 {
		margin-block-start: var(--szkk-space-4);
		font-size: 1.125rem;
	}

	& p {
		line-height: 1.95;
	}

	& ul,
	& ol {
		padding-left: 1.5em;

		& li {
			margin-block: 0.5em;
		}

		& ul,
		& ol {
			margin-block: 0.5em;
			max-width: none;
		}
	}

	& img {
		border-radius: var(--szkk-radius);
	}

	& figcaption {
		margin-top: 0.5rem;
		font-size: 0.8125rem;
		color: var(--szkk-muted);
		text-align: center;
	}

	/* 表。狭い画面でも横スクロールで読めるようにする */
	& .wp-block-table {
		overflow-x: auto;

		& table {
			min-width: 32rem;
		}

		& th,
		& td {
			padding: 0.625rem 0.875rem;
			border: 1px solid var(--szkk-border);
			text-align: left;
		}

		& th {
			background: var(--szkk-surface);
			font-weight: 700;
		}
	}

	/* コードブロック */
	& pre {
		overflow-x: auto;
		padding: var(--szkk-space-2);
		background: var(--szkk-surface);
		border: 1px solid var(--szkk-border);
		border-radius: var(--szkk-radius);
		font-size: 0.875rem;
		line-height: 1.7;
		tab-size: 2;
	}

	& :not(pre) > code {
		padding: 0.15em 0.4em;
		background: var(--szkk-surface);
		border-radius: var(--szkk-radius-sm);
		font-size: 0.9em;
	}

	& hr {
		max-width: var(--szkk-content);
		border: 0;
		border-top: 1px solid var(--szkk-border);
	}
}

/* --- 記事のメタ情報 --- */

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	font-size: 0.8125rem;
	color: var(--szkk-muted);
}

.entry-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;

	/* 項目の間に中黒を打つ。gap だけだと区切りが弱い */
	&:not(:first-child)::before {
		content: "";
		width: 3px;
		height: 3px;
		border-radius: 50%;
		background: currentColor;
		opacity: 0.5;
	}
}

/* --- カテゴリーバッジ --- */

.entry-category {
	align-self: flex-start;
	display: inline-block;
	padding: 0.22rem 0.8rem;
	border-radius: var(--szkk-radius-pill);
	background: var(--szkk-accent);
	color: var(--szkk-base);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	line-height: 1.7;
	/* カード全体を覆うリンクより手前に出して、単独でも押せるようにする */
	position: relative;
	z-index: 1;

	&:hover {
		background: var(--szkk-accent-dark);
		color: var(--szkk-base);
	}
}

/* --- 記事下のカテゴリー・タグ --- */

.entry__footer {
	margin-top: var(--szkk-space-4);
	padding-top: var(--szkk-space-3);
	border-top: 1px solid var(--szkk-border);
}

.entry-taxonomies {
	display: flex;
	flex-direction: column;
	gap: var(--szkk-space-1);
	font-size: 0.875rem;
}

.entry-taxonomies__group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;

	& a {
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

.entry-taxonomies__label {
	flex: none;
	color: var(--szkk-muted);
	font-size: 0.75rem;
	font-weight: 700;
}

/* --- 分割記事のページ送り --- */

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block: var(--szkk-space-4);
	font-size: 0.875rem;

	& a,
	& > span:not(.page-links__label) {
		display: grid;
		place-items: center;
		min-width: 2rem;
		height: 2rem;
		padding-inline: 0.4rem;
		border: 1px solid var(--szkk-border);
		border-radius: var(--szkk-radius-sm);
		text-decoration: none;
	}

	& > span:not(.page-links__label) {
		background: var(--szkk-accent);
		border-color: var(--szkk-accent);
		color: var(--szkk-base);
	}
}

.page-links__label {
	color: var(--szkk-muted);
	font-weight: 700;
}

/* ---- 45-content-parts.css ---- */
/* ==========================================================================
   記事内パーツ：目次・囲みボックス・吹き出し・ボタン・リスト装飾

   このファイルは main.css とエディター用 editor.css の両方に入る。
   そのため :root などページ全体に効く宣言は書かないこと
   （エディター用CSSはセレクターに .editor-styles-wrapper が前置され、
   :root は誰にも当たらなくなる）。--szkk-* の参照だけに留める。
   ========================================================================== */

/* --------------------------------------------------------------------------
   目次
   -------------------------------------------------------------------------- */

.szkk-toc {
	margin-block: var(--szkk-space-4);
	padding: var(--szkk-space-2) var(--szkk-space-3) var(--szkk-space-3);
	background: var(--szkk-surface);
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);

	/* 本文の他の要素より少し狭くして、読み物の流れから浮かせる */
	max-width: var(--szkk-content);
	margin-inline: auto;
}

/*
 * 全幅テンプレート（ツールのページ）では、目次も他の要素と幅を揃える。
 * .entry__content 側の絞り込みを外しても、目次は自前で max-width を
 * 持っているので、ここも一緒に外さないと目次だけが中央に浮いて見える。
 */
.page-template-full-width .szkk-toc {
	max-width: var(--szkk-content-wide);
}

.szkk-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--szkk-space-2);
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--szkk-border);
}

.szkk-toc__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;

	/* 見出しの前に小さな四角を置く。アイコン画像を読み込まずに印を付ける */
	&::before {
		content: "";
		display: inline-block;
		width: 0.55rem;
		height: 0.55rem;
		margin-right: 0.5rem;
		background: var(--szkk-accent);
		vertical-align: 0.05em;
	}
}

.szkk-toc__toggle {
	flex: none;
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius-pill);
	background: var(--szkk-base);
	color: var(--szkk-muted);
	font-size: 0.75rem;
	font-weight: 700;

	&:hover {
		color: var(--szkk-link);
		border-color: var(--szkk-link);
	}
}

/* 開閉ラベルの出し分け。aria-expanded を唯一の状態としてCSSから読む */
.szkk-toc__toggle[aria-expanded="true"] .szkk-toc__toggle-closed,
.szkk-toc__toggle[aria-expanded="false"] .szkk-toc__toggle-open {
	display: none;
}

.szkk-toc__list {
	margin: var(--szkk-space-2) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: szkk-toc;

	&[hidden] {
		display: none;
	}
}

.szkk-toc__sublist {
	margin: 0.35rem 0 0.35rem 1.1rem;
	padding: 0;
	list-style: none;
}

.szkk-toc__item {
	margin-block: 0.35rem;
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* 第1階層だけ連番を振る。入れ子まで番号を振ると視線が散る */
.szkk-toc__list > .szkk-toc__item {
	counter-increment: szkk-toc;

	& > .szkk-toc__link::before {
		content: counter(szkk-toc) ". ";
		font-weight: 700;
		color: var(--szkk-accent);
	}
}

/* 入れ子の項目には行頭の点を置く */
.szkk-toc__sublist > .szkk-toc__item {
	font-size: 0.875rem;

	& > .szkk-toc__link::before {
		content: "";
		display: inline-block;
		width: 0.3rem;
		height: 1px;
		margin-right: 0.45rem;
		background: var(--szkk-muted);
		vertical-align: middle;
	}
}

.szkk-toc__link {
	color: var(--szkk-text);
	text-decoration: none;

	&:hover {
		color: var(--szkk-link);
		text-decoration: underline;
	}
}

/* --------------------------------------------------------------------------
   囲みボックス

   ショートコード（.szkk-box）とブロックスタイル（.is-style-szkk-box-*）の
   両方から同じ見た目になるようにセレクターを並べている。
   -------------------------------------------------------------------------- */

.szkk-box,
.is-style-szkk-box-plain,
.is-style-szkk-box-note,
.is-style-szkk-box-point,
.is-style-szkk-box-warning {
	margin-block: var(--szkk-space-3);
	padding: var(--szkk-space-2) var(--szkk-space-3);
	border: 2px solid var(--szkk-border);
	border-radius: var(--szkk-radius);
	background: var(--szkk-base);
}

.szkk-box__title {
	margin: 0 0 0.5rem;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.03em;
}

/* 中身の最初と最後の余白は箱の padding に任せる */
.szkk-box__body > *:first-child {
	margin-block-start: 0;
}

.szkk-box__body > *:last-child {
	margin-block-end: 0;
}

/* メモ：淡いグレー。補足情報 */
.szkk-box--note,
.is-style-szkk-box-note {
	background: var(--szkk-surface);
	border-color: var(--szkk-border);
}

/* ポイント：アクセント色。読者に持ち帰ってほしい要点 */
.szkk-box--point,
.is-style-szkk-box-point {
	border-color: var(--szkk-accent);
	background: color-mix(in srgb, var(--szkk-accent) 7%, #fff);
}

.szkk-box--point .szkk-box__title {
	color: var(--szkk-accent-dark);
}

/* 注意：警告色。読み飛ばすと損をすること */
.szkk-box--warning,
.is-style-szkk-box-warning {
	border-color: var(--wp--preset--color--warning, #e0a23c);
	background: color-mix(in srgb, var(--wp--preset--color--warning, #e0a23c) 8%, #fff);
}

.szkk-box--warning .szkk-box__title {
	color: color-mix(in srgb, var(--wp--preset--color--warning, #e0a23c) 80%, #000);
}

/* --------------------------------------------------------------------------
   吹き出し
   -------------------------------------------------------------------------- */

.szkk-balloon {
	display: flex;
	align-items: flex-start;
	gap: var(--szkk-space-2);
	margin-block: var(--szkk-space-3);
}

.szkk-balloon--right {
	flex-direction: row-reverse;
}

.szkk-balloon__speaker {
	flex: none;
	width: 60px;
	text-align: center;
}

.szkk-balloon__icon {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid var(--szkk-border);
	background: var(--szkk-surface);
	object-fit: cover;
}

.szkk-balloon__name {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--szkk-muted);
	/* 長い名前でアイコン幅を超えないように折り返す */
	overflow-wrap: anywhere;
}

.szkk-balloon__body {
	position: relative;
	flex: 1;
	min-width: 0;
	padding: var(--szkk-space-2);
	border: 2px solid var(--szkk-border);
	border-radius: 10px;
	background: var(--szkk-base);
	font-size: 0.9375rem;
	line-height: 1.85;

	& > *:first-child {
		margin-block-start: 0;
	}

	& > *:last-child {
		margin-block-end: 0;
	}

	/*
	 * 三角のしっぽ。枠線を再現するため、外側（枠色）と内側（背景色）の
	 * 三角を1pxずらして重ねている。
	 */
	&::before,
	&::after {
		content: "";
		position: absolute;
		top: 18px;
		width: 0;
		height: 0;
		border-style: solid;
	}
}

.szkk-balloon--left .szkk-balloon__body {
	&::before {
		left: -12px;
		border-width: 8px 12px 8px 0;
		border-color: transparent var(--szkk-border) transparent transparent;
	}

	&::after {
		left: -9px;
		border-width: 8px 12px 8px 0;
		border-color: transparent var(--szkk-base) transparent transparent;
	}
}

.szkk-balloon--right .szkk-balloon__body {
	&::before {
		right: -12px;
		border-width: 8px 0 8px 12px;
		border-color: transparent transparent transparent var(--szkk-border);
	}

	&::after {
		right: -9px;
		border-width: 8px 0 8px 12px;
		border-color: transparent transparent transparent var(--szkk-base);
	}
}

/* 心の声。しっぽを消して角を丸め、点で繋ぐ */
.szkk-balloon--think .szkk-balloon__body {
	border-radius: 20px;
	border-style: dashed;

	&::before,
	&::after {
		content: none;
	}
}

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */

.szkk-btn-wrap {
	margin-block: var(--szkk-space-3);
	text-align: center;
}

.szkk-btn {
	display: inline-block;
	max-width: 100%;
	padding: 0.85rem 2rem;
	border: 2px solid transparent;
	border-radius: var(--szkk-radius-pill);
	background: var(--szkk-accent);
	color: #fff;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	/* 押せることを示す薄い影。ホバーで沈む */
	box-shadow: 0 3px 0 color-mix(in srgb, var(--szkk-accent) 70%, #000);
	transition:
		transform var(--szkk-duration) var(--szkk-ease),
		box-shadow var(--szkk-duration) var(--szkk-ease),
		background-color var(--szkk-duration) var(--szkk-ease);

	&:hover {
		color: #fff;
		transform: translateY(2px);
		box-shadow: 0 1px 0 color-mix(in srgb, var(--szkk-accent) 70%, #000);
	}
}

.szkk-btn--link {
	background: var(--szkk-link);
	box-shadow: 0 3px 0 color-mix(in srgb, var(--szkk-link) 70%, #000);

	&:hover {
		box-shadow: 0 1px 0 color-mix(in srgb, var(--szkk-link) 70%, #000);
	}
}

.szkk-btn--plain {
	background: var(--szkk-base);
	border-color: var(--szkk-border);
	color: var(--szkk-text);
	box-shadow: 0 3px 0 var(--szkk-border);

	&:hover {
		color: var(--szkk-text);
		box-shadow: 0 1px 0 var(--szkk-border);
	}
}

.szkk-btn--s {
	padding: 0.55rem 1.4rem;
	font-size: 0.875rem;
}

.szkk-btn--l {
	padding: 1.1rem 3rem;
	font-size: 1.0625rem;
}

.szkk-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

/* --- core/button のブロックスタイル --- */

.is-style-szkk-button-soft .wp-block-button__link {
	border-radius: var(--szkk-radius-pill);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

.is-style-szkk-button-outline .wp-block-button__link {
	border: 2px solid currentColor;
	border-radius: var(--szkk-radius-pill);
	background: transparent;
	color: var(--szkk-accent);
}

.is-style-szkk-button-cta .wp-block-button__link {
	padding: 1.1rem 3rem;
	border-radius: var(--szkk-radius-pill);
	font-size: 1.0625rem;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------------------
   リストと表の装飾（ブロックスタイル）
   -------------------------------------------------------------------------- */

.is-style-szkk-list-check {
	list-style: none;
	padding-left: 0;

	& > li {
		position: relative;
		padding-left: 1.8em;

		/* チェックマークをCSSだけで描く */
		&::before {
			content: "";
			position: absolute;
			left: 0.3em;
			top: 0.55em;
			width: 0.45em;
			height: 0.8em;
			border-right: 2px solid var(--szkk-accent);
			border-bottom: 2px solid var(--szkk-accent);
			transform: rotate(45deg);
		}
	}
}

.is-style-szkk-list-circle {
	list-style: none;
	padding-left: 0;
	counter-reset: szkk-circle;

	& > li {
		position: relative;
		padding-left: 2.1em;
		counter-increment: szkk-circle;

		&::before {
			content: counter(szkk-circle);
			position: absolute;
			left: 0;
			top: 0.35em;
			display: grid;
			place-items: center;
			width: 1.5em;
			height: 1.5em;
			border-radius: 50%;
			background: var(--szkk-accent);
			color: #fff;
			font-size: 0.75em;
			font-weight: 700;
		}
	}
}

.is-style-szkk-table-striped {
	& tbody tr:nth-child(odd) {
		background: var(--szkk-surface);
	}
}

/* --- 外部フォームの埋め込み（Google フォームなど） ---

   別ドメインの iframe は、中身の高さを外から測れない（同一生成元ポリシー）。
   そのため高さは固定するしかなく、はみ出したぶんは iframe の中で
   スクロールさせる。中身より少し高めに取って、下端で切れて見えないようにする。 */

.szkk-embed-form {
	display: block;
	width: 100%;
	min-height: 62rem;
	border: 0;
}

@media (max-width: 600px) {
	.szkk-embed-form {
		/* 幅が狭いと入力欄が縦に伸びるので、そのぶん高くする */
		min-height: 74rem;
	}
}

/* ---- 50-cards.css ---- */
/* ==========================================================================
   記事一覧のカードとセクション見出し
   ========================================================================== */

/* --- セクション見出し。左右に罫線を伸ばした中央寄せ --- */

.archive-header {
	text-align: center;
}

/* 一覧の見出しと、一覧の途中に挟む仕切り（.list-divider）は同じ形。
   どちらも「ここから別のまとまり」を示すものなので、見た目を分けない。 */
.archive-header__title,
.list-divider {
	display: flex;
	align-items: center;
	gap: var(--szkk-space-2);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.06em;

	/* 見出しの左右に伸びる罫線。文字数に応じて自動で伸縮する */
	&::before,
	&::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--szkk-text);
	}
}

.archive-header__description {
	margin-top: var(--szkk-space-2);
	color: var(--szkk-muted);
	font-size: 0.875rem;
}

.search-summary {
	margin: 0;
	color: var(--szkk-muted);
	font-size: 0.875rem;
	text-align: center;
}

/* --- カード一覧 --- */

.entry-list {
	display: grid;
	gap: var(--szkk-space-3);
}

/* カードの最小幅は設定画面から --szkk-card-min として上書きされる */
.entry-list--card {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--szkk-card-min, 16rem)), 1fr));
}

.entry-list--mini {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

/* --- 通常カード --- */

.entry-card {
	/* カード全体をリンクの当たり判定にするため、基準位置を作る */
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--szkk-base);
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);
	transition:
		box-shadow var(--szkk-duration) var(--szkk-ease),
		border-color var(--szkk-duration) var(--szkk-ease);

	&:hover {
		border-color: color-mix(in srgb, var(--szkk-accent) 45%, var(--szkk-border));
		box-shadow: var(--szkk-shadow-md);
	}
}

.entry-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: var(--szkk-space-2) var(--szkk-space-2) 1.15rem;
}

.entry-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
}

.entry-card__link {
	color: var(--szkk-text);
	text-decoration: none;

	/* カード全体をクリック可能にする。JSを使わずに済ませるための擬似要素 */
	&::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	&:hover {
		color: var(--szkk-link);
	}
}

/*
 * 親ページの本文の下に並べる子ページの一覧（ツール一覧など）。
 *
 * 余白は「直前に本文の箱があるとき」だけ足す。本文と地続きに見せないための
 * 余白なので、本文が無いページ（/tools/ のようにカードだけのページ）で足すと、
 * パンくずのすぐ下に大きな空白ができてしまう。
 * 要素同士の基本の間隔は .l-main の gap が持っている。
 */
.entry + .entry-list--children,
.entry + .list-divider {
	margin-top: var(--szkk-space-4);
}

/* グループの切れ目。前のグループのカードとくっついて見えないよう、
   仕切りの前だけ広く空ける。一覧の先頭に来た仕切りには足さない。 */
.entry-list + .list-divider {
	margin-top: var(--szkk-space-4);
}

/* 固定ページのカードは日付もカテゴリーも出ないぶん、
   タイトルと説明の間を少し詰めて締まって見せる。 */
.entry-card--page .entry-card__title {
	margin-bottom: 0.35rem;
}

.entry-card__excerpt {
	margin: 0;
	color: var(--szkk-muted);
	font-size: 0.8125rem;
	line-height: 1.8;
}

/* メタ情報はカード下端に押し下げて、高さの違うカードでも位置を揃える */
.entry-card .entry-meta {
	margin-top: auto;
	padding-top: 0.35rem;
}

/* --- サムネイル --- */

.entry-thumbnail {
	margin: 0;
	overflow: hidden;
	background: var(--szkk-surface);
	aspect-ratio: 16 / 9;

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 260ms var(--szkk-ease);
	}
}

.entry-card:hover .entry-thumbnail img {
	transform: scale(1.04);
}

.entry-thumbnail__link {
	display: block;
	height: 100%;
}

/* 画像が無い記事のプレースホルダー。斜めのストライプで空きを埋める */
.entry-thumbnail__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(
		45deg,
		var(--szkk-surface) 0,
		var(--szkk-surface) 10px,
		var(--szkk-border) 10px,
		var(--szkk-border) 11px
	);
}

/* --- ミニカード（横並び） --- */

.entry-mini {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--szkk-space-2);
	align-items: start;
}

.entry-mini__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.entry-mini__title {
	font-size: 0.875rem;
	line-height: 1.6;
}

.entry-mini__link {
	color: var(--szkk-text);
	text-decoration: none;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	&:hover {
		color: var(--szkk-link);
	}
}

/* --- 記事が無いとき --- */

.entry-none {
	display: flex;
	flex-direction: column;
	gap: var(--szkk-space-3);
	padding: var(--szkk-space-4) var(--szkk-space-2);
	background: var(--szkk-base);
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);
	text-align: center;
}

.entry-none__message {
	margin: 0;
	color: var(--szkk-muted);
}

.entry-none__search {
	max-width: 24rem;
	width: 100%;
	margin-inline: auto;
}

/* ---- 60-components.css ---- */
/* ==========================================================================
   共通コンポーネント
   パンくず・ページ送り・前後記事・ウィジェット・検索フォーム・コメント
   ========================================================================== */

/* --- パンくず --- */

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	color: var(--szkk-muted);
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.35rem;

	/* 区切りの「/」。最初の項目の前には出さない */
	&:not(:first-child)::before {
		content: "/";
		color: var(--szkk-border);
	}
}

.breadcrumbs__link {
	color: inherit;
	text-decoration: none;

	&:hover {
		color: var(--szkk-link);
		text-decoration: underline;
	}
}

.breadcrumbs__current {
	/* 現在地は長いタイトルでも1行に収める */
	max-width: 20rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- ページ送り --- */

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination__item {
	& .page-numbers {
		display: grid;
		place-items: center;
		min-width: 2.5rem;
		height: 2.5rem;
		padding-inline: 0.6rem;
		border: 1px solid var(--szkk-border);
		border-radius: var(--szkk-radius-sm);
		color: var(--szkk-text);
		font-size: 0.875rem;
		font-weight: 600;
		text-decoration: none;
		transition: all var(--szkk-duration) var(--szkk-ease);

		&:hover {
			border-color: var(--szkk-accent);
			color: var(--szkk-link);
		}
	}

	& .page-numbers.current {
		background: var(--szkk-accent);
		border-color: var(--szkk-accent);
		color: var(--szkk-base);
	}

	& .page-numbers.dots {
		border-color: transparent;
	}
}

/* --- 前後記事 --- */

.post-navigation {
	& .nav-links {
		display: grid;
		gap: var(--szkk-space-2);
		grid-template-columns: minmax(0, 1fr);
	}

	& a {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
		height: 100%;
		padding: var(--szkk-space-2);
		background: var(--szkk-base);
		border: 1px solid var(--szkk-border);
		border-radius: var(--szkk-radius);
		color: var(--szkk-text);
		text-decoration: none;
		transition:
			border-color var(--szkk-duration) var(--szkk-ease),
			box-shadow var(--szkk-duration) var(--szkk-ease);

		&:hover {
			border-color: var(--szkk-accent);
			box-shadow: var(--szkk-shadow-md);
		}
	}

	& .nav-next a {
		text-align: right;
	}
}

@media (min-width: 640px) {
	.post-navigation .nav-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.post-navigation__label {
	color: var(--szkk-muted);
	font-size: 0.75rem;
	font-weight: 700;
}

.post-navigation__title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.6;
}

/* --- ウィジェット --- */

.widget {
	padding: var(--szkk-space-2);
	background: var(--szkk-base);
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);
	/* 見出しの帯が角丸からはみ出さないように切る */
	overflow: hidden;

	& ul,
	& ol {
		margin: 0;
		padding: 0;
		list-style: none;

		& li {
			padding-block: 0.5rem;
			border-bottom: 1px solid var(--szkk-border);
			font-size: 0.875rem;

			&:last-child {
				border-bottom: 0;
				padding-bottom: 0;
			}
		}

		& a {
			color: var(--szkk-text);
			text-decoration: none;

			&:hover {
				color: var(--szkk-link);
			}
		}
	}
}

/*
 * 見出しはウィジェットの枠いっぱいに広がる帯にする。
 * .widget の padding をネガティブマージンで打ち消して端まで届かせている。
 * 値を変えるときは .widget の padding と必ず揃えること。
 *
 * セレクターが3つあるのは、ウィジェットの出力が2通りあるため。
 * register_sidebar の before_title（= .widget__title）が使われるのは
 * クラシックウィジェットのときだけで、WordPress 5.8 以降の既定である
 * ブロックウィジェットでは、見出しがブロックの中身として
 * <h2 class="wp-block-heading"> で出る（グループで囲まれることもある）。
 * どちらで組んでも同じ帯になるように、先頭の見出しを拾う。
 */
.widget__title,
.widget > .wp-block-group > :is(h2, h3):first-child,
.widget > :is(h2, h3):first-child {
	margin: calc(var(--szkk-space-2) * -1) calc(var(--szkk-space-2) * -1) var(--szkk-space-2);
	padding: 0.7rem var(--szkk-space-2);
	background: var(--szkk-accent);
	color: var(--szkk-base);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* --- ブロックウィジェットの中身 ---

   ブロックで組んだウィジェットは、テーマのクラスではなく core の
   wp-block-* クラスで出力される。テーマ側の見た目に寄せる。 */

/* 最新のコメントブロックは中に article / footer を挟む。
   余分な余白を消して、他のリストと行の高さを揃える。 */
.widget .wp-block-latest-comments__comment {
	display: block;
	min-height: 0;
	margin: 0;
	line-height: 1.7;

	& article,
	& footer {
		margin: 0;
	}
}

/* --- 検索フォーム ---

   サイドバーに置かれる検索は、ブロック版（.wp-block-search）と
   テーマの searchform.php（.search-form）の2通りがある。
   入力欄そのものが枠を持つので、ウィジェットのカード枠と二重にならないよう
   検索ウィジェットだけはカードの装飾を外す。 */

.widget_search {
	padding: 0;
	background: none;
	border: 0;
}

/* ブロック版の検索。テーマの .search-form と同じ形に揃える。 */
/* showLabel を false にすると、core は同じ class に screen-reader-text を足して
   読み上げ用に残す。そちらには見た目の指定を当てない。 */
.wp-block-search__label:not(.screen-reader-text) {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--szkk-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.wp-block-search__inside-wrapper {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);
	background: var(--szkk-base);
	overflow: hidden;

	&:focus-within {
		border-color: var(--szkk-link);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--szkk-link) 18%, transparent);
	}
}

.wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.85rem;
	border: 0;
	background: transparent;
	font-size: 0.875rem;

	&:focus {
		outline: none;
	}
}

/* core の .wp-element-button（theme.json 由来）より後に読まれるので、
   角丸と余白だけ上書きすれば色はそのままアクセント色が効く。 */
.wp-block-search__button {
	flex: none;
	margin: 0;
	padding: 0 0.95rem;
	border: 0;
	border-radius: 0;
	font-size: 0.8125rem;
	white-space: nowrap;
}


.search-form {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);
	background: var(--szkk-base);
	overflow: hidden;

	&:focus-within {
		border-color: var(--szkk-link);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--szkk-link) 18%, transparent);
	}
}

/*
 * ラベルの中身は .screen-reader-text で画面外に飛ばしてあるため、
 * ラベル自体は幅を持たない。display: contents は使わない——一部のブラウザで
 * 要素がアクセシビリティツリーから外れ、input との関連付けが失われるため。
 */
.search-form__label {
	flex: none;
}

.search-form__input {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	border: 0;
	background: transparent;
	font-size: 0.9375rem;

	&:focus {
		outline: none;
	}
}

.search-form__submit {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	border: 0;
	background: var(--szkk-surface);
	color: var(--szkk-muted);

	&:hover {
		background: var(--szkk-accent);
		color: var(--szkk-base);
	}
}

/* 虫めがねは szkk_icon( 'search' ) が出す SVG。
   以前は CSS の円と線で描いていたが、大きさを変えるたびに位置を調整する
   必要があり、ヘッダーのアイコンとも形が揃わなかったため一本化した。 */

/* --- コメント --- */

/* 外枠と余白は 20-layout.css の .l-main > .comments が付ける */
.comments {
	display: flex;
	flex-direction: column;
	gap: var(--szkk-space-3);
}

.comments__title {
	font-size: 1.125rem;
}

.comments__list {
	margin: 0;
	padding: 0;
	list-style: none;

	& .children {
		margin: 0;
		padding-left: var(--szkk-space-3);
		list-style: none;
	}

	& .comment-body {
		padding-block: var(--szkk-space-2);
		border-bottom: 1px solid var(--szkk-border);
		font-size: 0.9375rem;
	}

	& .comment-author {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		font-size: 0.875rem;
		font-weight: 700;

		& img {
			border-radius: 50%;
		}
	}

	& .comment-metadata {
		margin-top: 0.2rem;
		font-size: 0.75rem;
		color: var(--szkk-muted);

		& a {
			color: inherit;
		}
	}
}

.comment-form {
	display: grid;
	gap: var(--szkk-space-2);

	& label {
		display: block;
		margin-bottom: 0.3rem;
		font-size: 0.8125rem;
		font-weight: 700;
	}

	& input[type="text"],
	& input[type="email"],
	& input[type="url"],
	& textarea {
		width: 100%;
		padding: 0.65rem 0.85rem;
		border: 1px solid var(--szkk-border);
		border-radius: var(--szkk-radius);
		background: var(--szkk-base);

		&:focus-visible {
			outline: none;
			border-color: var(--szkk-link);
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--szkk-link) 18%, transparent);
		}
	}

	& .submit {
		padding: 0.7rem 1.6rem;
		border: 0;
		border-radius: var(--szkk-radius);
		background: var(--szkk-accent);
		color: var(--szkk-base);
		font-weight: 700;

		&:hover {
			background: var(--szkk-accent-dark);
		}
	}
}

.comment-form__notes {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--szkk-muted);
}

/* --- 404 --- */

.error-404 {
	display: flex;
	flex-direction: column;
	gap: var(--szkk-space-3);
}

.error-404__message {
	color: var(--szkk-muted);
}

.error-404__search {
	max-width: 28rem;
}

.error-404__recent-title {
	margin-bottom: var(--szkk-space-2);
	font-size: 1rem;
}

/* ---- 65-ads.css ---- */
/* ==========================================================================
   広告枠

   誤クリックを誘発しない見た目にすることが最優先。
     - 本文やボタンと十分に離す（上下の余白を大きめに取る）
     - 「スポンサーリンク」の見出しを必ず広告の上に置き、本文と区別する
     - 枠の中身は中央寄せ。横幅は親を超えさせない
   ========================================================================== */

.szkk-ad {
	/* 本文の段落より広い余白を取り、誤って押されにくくする。 */
	margin-block: var(--szkk-space-4);
	text-align: center;
}

.szkk-ad__label {
	display: block;
	margin-bottom: var(--szkk-space-1);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	color: var(--szkk-muted);
}

.szkk-ad__body {
	/* レスポンシブ広告が親より広がると、スマートフォンで横スクロールが出る。 */
	max-width: 100%;
	overflow: hidden;
}

.szkk-ad__body img,
.szkk-ad__body iframe,
.szkk-ad__body ins {
	max-width: 100%;
}

/* 本文中の枠は前後の文章から特に離す。読んでいる途中で押される位置のため。 */
.szkk-ad--in-content {
	margin-block: var(--szkk-space-5);
}

/* 本文の後は、前後記事へのリンクと近づきすぎないよう下側を空ける。 */
.szkk-ad--after-content {
	margin-bottom: var(--szkk-space-5);
}

/* --- サイドバーの先頭に置く広告 ---

   周りのウィジェットと同じ白いカードに載せる。下地がむき出しの広告が
   1枚だけ混ざると、そこだけ穴が空いたように見えて浮くため。

   ただし見出しの帯（青いバー）は付けない。ウィジェットと完全に同じ体裁に
   すると広告がサイトの中身の一部に見え、誤クリックを招く。
   区別は「スポンサーリンク」の小さな見出しが受け持つ。 */

.szkk-ad--sidebar {
	/* 間隔は .l-sidebar の gap が持つ。ここで足すと1枚目だけ広く空く。 */
	margin-block: 0;
	padding: var(--szkk-space-2);
	background: var(--szkk-base);
	border: 1px solid var(--szkk-border);
	border-radius: var(--szkk-radius);

	/* 広告の角も外側の角丸に合わせる。四角い画像がそのまま出ると角が立つ。 */
	& .szkk-ad__body {
		overflow: hidden;
		border-radius: var(--szkk-radius-sm);
	}
}

/* --- 本文の左右に空いた余白に置く縦長の広告 ---

   サイドバーの無いページ（body.szkk-no-sidebar）は、本文の箱の右側に
   サイドバーが無いぶん、外枠の外側に広い余白が残る。そこに縦長の広告を置く。

   置ける幅があるときだけ出す。外枠 1200px ＋ 広告 160px × 2 ＋ 間隔（2.5rem×2）が
   収まらない画面では非表示にする。本文に重なるくらいなら出ないほうがいい。
   間隔を広げるときは、この閾値も一緒に上げること。 */

.szkk-ad-rail {
	display: none;
}

@media (min-width: 1640px) {
	/*
	 * 位置の基準は本文そのもの。
	 * 画面を基準にすると、一番上までスクロールしたときに広告だけが本文より
	 * 上（パンくずやタイトルの横）へ飛び出す。本文を基準にすれば、
	 * そこが上限になり、広告の上端が中身の始まりと揃う。
	 */
	.szkk-no-sidebar .entry__content {
		position: relative;
	}

	.szkk-no-sidebar .szkk-ad-rail {
		display: block;
		position: absolute;
		/* 箱の上端から下端まで。この範囲の中を中身が上下する。 */
		top: 0;
		bottom: 0;
		width: 160px;
		/* 流れから外れているので、通常の .szkk-ad が持つ上下の余白は要らない。 */
		margin-block: 0;
	}

	/* 本文の外側。100% は本文の幅なので、幅の設定を変えても追従する。 */
	.szkk-no-sidebar .szkk-ad-rail--left {
		right: calc(100% + var(--szkk-space-4));
	}

	.szkk-no-sidebar .szkk-ad-rail--right {
		left: calc(100% + var(--szkk-space-4));
	}

	/*
	 * スクロールへの追従。
	 * 止まる位置はヘッダーのすぐ下。--szkk-header-height は「帯の最低の高さ」で
	 * 実際の高さとは違うため、main.js が測った実寸（--szkk-header-real）を
	 * 優先して見る（JS が動かないときの控えとして最低の高さを残す）。
	 */
	.szkk-ad-rail__inner {
		position: sticky;
		top: calc(var(--szkk-header-real, var(--szkk-header-height)) + var(--szkk-space-3));
	}
}

/* ---- 70-footer.css ---- */
/* ==========================================================================
   フッターとページ先頭へ戻るボタン
   ========================================================================== */

.site-footer {
	margin-top: var(--szkk-space-4);
	border-top: 1px solid var(--szkk-border);
	background: var(--szkk-base);
}

.site-footer__widgets {
	display: grid;
	gap: var(--szkk-space-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	padding-block: var(--szkk-space-4);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--szkk-space-2);
	padding-block: var(--szkk-space-3);
	border-top: 1px solid var(--szkk-border);
}

.site-footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--szkk-muted);
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--szkk-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;

	& a {
		color: var(--szkk-muted);
		text-decoration: none;

		&:hover {
			color: var(--szkk-link);
			text-decoration: underline;
		}
	}
}

/* --- ページ先頭へ戻る --- */

.to-top {
	position: fixed;
	right: var(--szkk-space-2);
	bottom: var(--szkk-space-2);
	z-index: var(--szkk-z-to-top);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--szkk-border);
	border-radius: 50%;
	background: var(--szkk-base);
	box-shadow: var(--szkk-shadow-md);
	transition:
		opacity var(--szkk-duration) var(--szkk-ease),
		transform var(--szkk-duration) var(--szkk-ease);

	&[hidden] {
		display: none;
	}

	&:hover {
		transform: translateY(-2px);
		border-color: var(--szkk-accent);
		background: var(--szkk-accent);
	}

	&:hover .to-top__icon {
		border-color: var(--szkk-base);
	}
}

/* 上向きの矢印をCSSだけで描く */
.to-top__icon {
	width: 0.6rem;
	height: 0.6rem;
	border-top: 2px solid var(--szkk-text);
	border-left: 2px solid var(--szkk-text);
	transform: translateY(2px) rotate(45deg);
}