/* =========================================================
   yozora base.css — 土台（レイアウト・文字組み）
   見た目（色・書体・飾り）は下の「変数」で決まり、スキン（assets/skins/）が上書きする。
   ここに書く値は「プレーン」の初期値。
   スマホを基準に書き、広い画面は @media で足す。
   ========================================================= */

:root {
	/* 色 */
	--c-text: #1f2430;          /* 本文 */
	--c-heading: #11151f;       /* タイトル・見出し */
	--c-sub: #5c6474;           /* 補足（日付・説明文） */
	--c-bg: #ffffff;            /* 背景 */
	--c-bg-soft: #f5f6f8;       /* カード・枠の背景 */
	--c-line: #e3e6eb;          /* 線 */
	--c-accent: #2a5ba8;        /* アクセント（ボタン・ラベル・リンク） */
	--c-on-accent: #ffffff;     /* アクセント色の上に乗る文字 */
	--c-link: var(--c-accent);  /* 本文中のリンク */
	--c-h2-bg: var(--c-bg-soft);/* 本文 H2 の背景 */
	--c-h2-text: var(--c-heading);
	--c-h2-border: var(--c-accent);
	--c-thumb-frame: var(--c-line);  /* サムネイルの枠 */
	--c-thumb-bg: #eef0f3;      /* サムネイルの余白（比率が違う画像の左右） */
	--c-overlay: rgba(255, 255, 255, .9); /* 画像に重ねる番号の下地 */
	--cat-default: #586d8f;     /* 色を決めていないカテゴリ */
	--pickup-shadow: none;      /* PICK UP カードの光 */

	/* 書体 */
	--font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, sans-serif;
	--font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", serif;
	--font-title: var(--font);  /* タイトル類（設定で明朝体に切り替え可能） */
	--brand-spacing: .05em;     /* 左上のサイト名の字間 */

	/* 大きさ */
	--radius: 10px;
	--container: 1180px;
	--content: 760px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.9;
	word-break: normal;
	overflow-wrap: anywhere;
}

img, video, iframe { max-width: 100%; height: auto; }
a { color: var(--c-link); }
figure { margin: 0; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 16px;
}

/* 読み上げ用・キーボード用 */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	left: 8px; top: -40px;
	padding: 6px 12px;
	background: var(--c-accent);
	color: var(--c-on-accent);
	z-index: 100;
}
.skip-link:focus { top: 8px; }

/* ---------- 全体の並び ---------- */
.layout { display: grid; gap: 40px; padding-block: 20px 48px; }
.main { min-width: 0; }

@media (min-width: 1024px) {
	.layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---------- パンくず ---------- */
.breadcrumbs { font-size: .78rem; color: var(--c-sub); margin-bottom: 12px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "›"; margin-right: 4px; }
.breadcrumbs a { color: inherit; }

.page-title { font-family: var(--font-title); color: var(--c-heading); font-size: 1.4rem; line-height: 1.5; margin: 0 0 16px; }

/* ---------- 記事ページ ---------- */
.entry-header { margin-bottom: 16px; }
.entry-cat { font-size: .8rem; text-decoration: none; }
.entry-title { font-family: var(--font-title); color: var(--c-heading); font-size: 1.5rem; line-height: 1.5; margin: 6px 0 8px; }
@media (min-width: 768px) { .entry-title { font-size: 1.8rem; } }
.post-dates { display: flex; gap: 12px; font-size: .8rem; color: var(--c-sub); }
.entry-thumb { margin-bottom: 24px; }
.entry-thumb img { display: block; width: 100%; border-radius: var(--radius); }

.entry-content { max-width: var(--content); }
.entry-content > * { margin-block: 0 1.4em; }
.entry-content h2 {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 2.4em 0 1em;
	padding: .5em .8em;
	border-left: 5px solid var(--c-h2-border);
	background: var(--c-h2-bg);
	color: var(--c-h2-text);
}
.entry-content h3 { font-size: 1.12rem; line-height: 1.5; margin: 2em 0 .8em; padding-bottom: .3em; border-bottom: 2px solid var(--c-line); }
.entry-content h4 { font-size: 1rem; margin: 1.6em 0 .6em; }
.entry-content img { border-radius: 6px; }
.entry-content figcaption { font-size: .8rem; color: var(--c-sub); text-align: center; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content blockquote { margin-inline: 0; padding: 12px 16px; border-left: 4px solid var(--c-line); background: var(--c-bg-soft); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .9rem; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { border: 1px solid var(--c-line); padding: 6px 10px; }

.entry-footer { margin-top: 32px; }
.entry-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.entry-tags a { font-size: .78rem; padding: 2px 10px; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-sub); text-decoration: none; }

/* ---------- 検索フォーム ---------- */
.search-form { display: flex; gap: 8px; margin: 16px 0 24px; }
.search-form label { flex: 1; }
.search-form__input { width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-bg); color: var(--c-text); }
.search-form__button { padding: 10px 18px; font-size: .95rem; border: 0; border-radius: 6px; background: var(--c-accent); color: var(--c-on-accent); cursor: pointer; }

/* ---------- 目次 ---------- */
.toc {
	margin: 1.6em auto 2em;
	padding: 12px 20px 14px;
	max-width: 560px;
	border: 1px solid var(--c-line);
	border-radius: 6px;
	font-size: .92rem;
	line-height: 1.8;
}
.toc__title { cursor: pointer; text-align: center; font-weight: 700; list-style: none; }
.toc__title::-webkit-details-marker { display: none; }
.toc__title::after { content: "［閉じる］"; margin-left: .5em; font-size: .8em; font-weight: 400; color: var(--c-sub); }
.toc:not([open]) .toc__title::after { content: "［開く］"; }
.toc ol { margin: 8px 0 0; padding-left: 1.4em; }
.toc ol ol { margin-top: 2px; font-size: .95em; }
.toc a { color: inherit; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
/* 目次から飛んだとき、見出しが画面の端に貼りつかないように */
.entry-content :is(h2, h3) { scroll-margin-top: 16px; }

/* ---------- ブログカード ---------- */
.blogcard { margin: 0 0 1.6em; position: relative; }
.blogcard__label {
	position: absolute;
	top: -10px; left: 12px;
	z-index: 1;
	padding: 1px 10px;
	border-radius: 4px;
	font-size: .72rem;
	font-weight: 700;
	background: var(--c-accent);
	color: var(--c-on-accent);
}
.blogcard__link {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
	background: var(--c-bg-soft);
}
.blogcard__label + .blogcard__link { padding-top: 18px; }
.blogcard__thumb { flex: 0 0 100px; }
.blogcard__thumb img { display: block; width: 100px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
@media (min-width: 600px) { .blogcard__thumb { flex-basis: 140px; } .blogcard__thumb img { width: 140px; } }
.blogcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.blogcard__title { color: var(--c-heading); font-weight: 700; font-size: .92rem; line-height: 1.5; }
.blogcard__excerpt { font-size: .76rem; line-height: 1.6; color: var(--c-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blogcard--external .blogcard__excerpt { -webkit-line-clamp: 1; word-break: break-all; }
.blogcard__meta { font-size: .72rem; color: var(--c-sub); }
.blogcard__ext { align-self: center; color: var(--c-sub); }

/* ---------- 本文の装飾 ---------- */
/* Cocoon のマーカー（記事内で使用中） */
.marker-under-blue { background: linear-gradient(transparent 55%, rgba(94, 158, 214, .55) 55%); }
.marker-under-red { background: linear-gradient(transparent 55%, rgba(234, 96, 96, .5) 55%); }
.marker-under-yellow, .marker-under { background: linear-gradient(transparent 55%, rgba(255, 221, 0, .5) 55%); }

.entry-content hr, .entry-content .wp-block-separator { border: 0; border-top: 1px solid var(--c-line); margin: 2.4em auto; }
.entry-content .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* ---------- 読み進めた量のバー ---------- */
.read-progress {
	position: fixed;
	top: 0; left: 0;
	z-index: 50;
	width: 100%;
	height: 3px;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}
.admin-bar .read-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .read-progress { top: 46px; } }

/* ---------- 次に読む記事 ---------- */
.next-story { margin: 2.4em 0 0; padding: 16px 18px; border: 1px solid var(--c-line); border-left: 4px solid var(--c-accent); border-radius: var(--radius); background: var(--c-bg-soft); }
.next-story__label { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--c-accent); }
.next-story__link { display: block; color: inherit; text-decoration: none; }
.next-story__lead { display: block; font-size: .85rem; color: var(--c-sub); line-height: 1.7; }
.next-story__title { display: block; margin-top: 4px; font-weight: 700; line-height: 1.6; }

/* ---------- 共有・フォロー ---------- */
.share { margin-top: 28px; }
.share__title { margin: 0 0 10px; font-size: .85rem; font-weight: 700; text-align: center; }
.share__buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.share__btn {
	display: flex; align-items: center; justify-content: center;
	min-height: 44px;
	border: 0; border-radius: 6px;
	font: inherit; font-size: .82rem; font-weight: 700;
	color: #fff; text-decoration: none; cursor: pointer;
	background: #444;
}
.share__btn--x { background: #000; }
.share__btn--line { background: #04803a; }   /* LINE の緑を、白文字が読める濃さに */
.share__btn--hatena { background: #0072a8; } /* はてなの青を、白文字が読める濃さに */
.share__btn--copy { background: #5c6474; }
.follow { margin-top: 16px; text-align: center; }
.follow__btn { display: inline-block; padding: 10px 20px; border: 1px solid var(--c-line); border-radius: 999px; font-size: .85rem; color: inherit; text-decoration: none; }

/* ---------- 関連記事 ---------- */
.related { margin-top: 40px; }
.related__title { font-size: 1.1rem; margin: 0 0 12px; }
.related__list { display: grid; gap: 12px; }
@media (min-width: 600px) { .related__list { grid-template-columns: repeat(3, 1fr); } }
.related__item { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
@media (min-width: 600px) { .related__item { flex-direction: column; align-items: stretch; } }
.related__img { display: block; width: 110px; flex: 0 0 110px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
@media (min-width: 600px) { .related__img { width: 100%; } }
.related__name { font-size: .85rem; font-weight: 700; line-height: 1.5; }

/* ---------- 前後の記事 ---------- */
.post-nav { display: grid; gap: 10px; margin-top: 32px; }
@media (min-width: 600px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__item { display: block; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--radius); color: inherit; text-decoration: none; }
.post-nav__item--next { text-align: right; }
.post-nav__dir { display: block; font-size: .72rem; color: var(--c-sub); }
.post-nav__name { display: block; font-size: .88rem; font-weight: 700; line-height: 1.5; }

/* =========================================================
   ヘッダー（1段目：サイト名・メニュー・検索／2段目：ロゴ画像）
   ========================================================= */
.site-header { border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.site-header__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 10px; }
.brand { margin: 0; font-size: inherit; font-weight: inherit; line-height: 1.3; }
.brand__link { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: inherit; text-decoration: none; }
.brand__name { font-family: var(--font-title); font-size: 1.4rem; letter-spacing: var(--brand-spacing); color: var(--c-accent); }
.brand__tagline { font-size: .72rem; color: var(--c-sub); letter-spacing: .05em; }
.site-header__right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.header-nav { min-width: 0; }
.header-nav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.header-nav__list::-webkit-scrollbar { display: none; }
.header-nav__list a { display: block; padding: 8px 10px; color: var(--c-text); font-size: .88rem; text-decoration: none; white-space: nowrap; }
.header-nav__list a:hover { color: var(--c-accent); }
.header-search { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 14px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* スマホ：1段目は「サイト名＋検索」、メニューはその下に横スクロールで */
@media (max-width: 767px) {
	.site-header__right { display: contents; }
	.header-search { order: 2; }
	.header-nav { order: 3; flex-basis: 100%; margin-inline: -16px; padding-inline: 8px; border-top: 1px solid var(--c-line); }
}

.site-header__logo { padding-block: 0 16px; }
.site-branding { width: 100%; margin: 0; line-height: 0; text-align: center; }
.site-branding a { display: inline-block; max-width: 100%; }
.site-logo { display: block; width: 640px; max-width: 100%; height: auto; max-height: none; margin-inline: auto; }

/* =========================================================
   一覧のカード（モック準拠：左に画像、右に文字）
   ========================================================= */
.card-list { display: grid; gap: 16px; }
.card__link {
	display: grid;
	grid-template-columns: 38% 1fr;
	gap: 14px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-bg-soft);
	color: inherit;
	text-decoration: none;
	transition: border-color .2s;
}
.card__link:hover { border-color: var(--c-accent); }

/* 画像：16:9 の枠に、切り取らず全体を入れる。枠は画像の外側（枠そのもの）に付ける */
.card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--c-thumb-frame);
	border-radius: 6px;
	background: var(--c-thumb-bg);
	overflow: hidden;
}
.card__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card__new {
	position: absolute; top: 6px; right: 6px;
	padding: 1px 8px; border-radius: 4px;
	font-size: .68rem; font-weight: 700; letter-spacing: .08em;
	background: var(--c-accent); color: var(--c-on-accent);
}

.card__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.card__title { margin: 0; font-family: var(--font-title); font-size: 1rem; font-weight: 600; line-height: 1.55; color: var(--c-heading); }
.card__excerpt { margin: 0; font-size: .78rem; line-height: 1.7; color: var(--c-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__date { font-size: .72rem; color: var(--c-sub); }
@media (max-width: 599px) { .card__excerpt { display: none; } .card__title { font-size: .95rem; } }

/* PICK UP：大きく、アクセント色の枠で囲む */
.card--pickup .card__link { grid-template-columns: 1fr; padding: 14px; border-color: var(--c-accent); box-shadow: var(--pickup-shadow); }
@media (min-width: 768px) { .card--pickup .card__link { grid-template-columns: 50% 1fr; gap: 24px; padding: 18px; } }
.card__pickup { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--c-accent); }
.card--pickup .card__title { font-size: 1.3rem; }
@media (min-width: 768px) { .card--pickup .card__title { font-size: 1.6rem; } }
.card--pickup .card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; font-size: .85rem; }

/* カテゴリのラベル（色はカテゴリごとの --cat） */
.cat-pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1.8; background: var(--cat, var(--cat-default)); color: #fff; }

/* 一覧の下 */
.more { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.more a { display: inline-block; padding: 10px 28px; border: 1px solid var(--c-accent); border-radius: 999px; color: var(--c-accent); font-size: .9rem; text-decoration: none; }
.more__btn:hover { background: var(--c-accent); color: var(--c-on-accent); }

/* カテゴリページの見出し：カテゴリの色 */
.archive-header[class*="cat-"] .page-title { padding: .5em .9em; border-radius: 10px; background: var(--cat); color: #fff; }
.archive-description { margin: 0 0 20px; padding-left: 1em; border-left: 4px solid var(--cat, var(--c-line)); font-size: .9rem; color: var(--c-sub); }

/* =========================================================
   サイドバー（プロフィール・人気記事・カテゴリ）
   ========================================================= */
.sidebar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; }
.sidebar > * { min-width: 0; }
.side-box { padding: 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-soft); }
.side-box__title { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); font-size: .9rem; letter-spacing: .1em; color: var(--c-accent); }

.profile { text-align: center; }
.profile__img { display: block; width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid var(--c-accent); object-fit: cover; }
.profile__name { margin: 0 0 8px; font-family: var(--font-title); font-size: 1.05rem; color: var(--c-heading); }
.profile__text { margin: 0; font-size: .8rem; line-height: 1.8; text-align: left; color: var(--c-sub); }
.profile__more { display: inline-block; margin-top: 10px; font-size: .78rem; }

.popular__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.popular__link { display: flex; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; }
.popular__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.popular__title { font-size: .84rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.popular__link:hover .popular__title { text-decoration: underline; }
.popular__cat { font-size: .7rem; color: var(--c-sub); }
.popular__cat::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--cat, var(--cat-default)); vertical-align: middle; }
.popular__rank { font-family: var(--font-title); font-size: 1.2rem; line-height: 1.2; color: var(--c-accent); }

/* 人気記事のサムネイル。表示の形は「yozora：機能」で選ぶ。
   ・サムネイルなし（または、スマホでサムネイルを出さない設定のスマホ幅）：番号＋タイトル
   ・パソコン幅（サイドバーが横に並ぶ1024px以上）：選んだ形でサムネイルを出す
   ・「スマホでもサムネイルを出す」がオン：スマホ幅でも同じ形で出す */
.popular__media { flex: 0 0 1.8em; }
.popular__img { display: none; }

@media (min-width: 1024px) {
	.popular--thumb-on .popular__media {
		position: relative;
		flex: 0 0 72px;
		aspect-ratio: 16 / 9;
		border: 1px solid var(--c-thumb-frame);
		border-radius: 4px;
		background: var(--c-thumb-bg);
		overflow: hidden;
	}
	.popular--thumb-on .popular__img { display: block; width: 100%; height: 100%; object-fit: contain; }
	.popular--thumb-on .popular__rank {
		position: absolute; top: 0; left: 0; z-index: 1;
		padding: 0 5px;
		border-bottom-right-radius: 4px;
		font-size: .72rem; line-height: 1.5;
		background: var(--c-overlay);
	}
	.popular--thumb-on .popular__title { font-size: .8rem; }
	/* 大きいサムネイル（mixed の1位、large の全部）：縦型。画像を幅いっぱいに、タイトルはその下に2行 */
	.popular--thumb-on .popular__item--top .popular__link { flex-direction: column; gap: 8px; }
	.popular--thumb-on .popular__item--top .popular__media { flex: none; width: 100%; border-radius: 6px; }
	.popular--thumb-on .popular__item--top .popular__rank { padding: 1px 8px; font-size: .9rem; }
	.popular--thumb-on .popular__item--top .popular__title { font-size: .9rem; font-weight: 700; }
	.popular--mixed .popular__item--top { padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }

}

/* スマホでもサムネイルを出す設定のとき（幅に関係なく適用） */
.popular--sp-thumb.popular--thumb-on .popular__media {
	position: relative;
	flex: 0 0 72px;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--c-thumb-frame);
	border-radius: 4px;
	background: var(--c-thumb-bg);
	overflow: hidden;
}
.popular--sp-thumb.popular--thumb-on .popular__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.popular--sp-thumb.popular--thumb-on .popular__rank {
	position: absolute; top: 0; left: 0; z-index: 1;
	padding: 0 5px;
	border-bottom-right-radius: 4px;
	font-size: .72rem; line-height: 1.5;
	background: var(--c-overlay);
}
.popular--sp-thumb.popular--thumb-on .popular__title { font-size: .8rem; }
/* 大きいサムネイル（mixed の1位、large の全部）：縦型。画像を幅いっぱいに、タイトルはその下に2行 */
.popular--sp-thumb.popular--thumb-on .popular__item--top .popular__link { flex-direction: column; gap: 8px; }
.popular--sp-thumb.popular--thumb-on .popular__item--top .popular__media { flex: none; width: 100%; border-radius: 6px; }
.popular--sp-thumb.popular--thumb-on .popular__item--top .popular__rank { padding: 1px 8px; font-size: .9rem; }
.popular--sp-thumb.popular--thumb-on .popular__item--top .popular__title { font-size: .9rem; font-weight: 700; }
.popular--sp-thumb.popular--mixed .popular__item--top { padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }


.categories__list { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--c-line); border-radius: 999px; font-size: .8rem; color: var(--c-text); text-decoration: none; }
.cat-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cat, var(--cat-default)); }
.cat-chip__count { font-size: .7rem; color: var(--c-sub); }
.cat-chip:hover { border-color: var(--cat, var(--c-accent)); }

/* ウィジェット（「外観 → ウィジェット」で追加した場合。サイドバーの箱と同じ見た目にそろえる） */
.widget { padding: 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-soft); font-size: .85rem; }
.widget-title, .widget h2, .widget .wp-block-heading { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); font-size: .9rem; letter-spacing: .1em; color: var(--c-accent); }
.widget ul, .widget ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.widget a { color: inherit; }
.widget .wp-block-search__inside-wrapper, .widget .search-form { display: flex; gap: 6px; }
.widget .wp-block-search__label { display: block; margin-bottom: 6px; font-size: .8rem; }
.widget .wp-block-search__input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-bg); color: var(--c-text); font-size: 16px; }
.widget .wp-block-search__button { flex-shrink: 0; margin: 0; padding: 8px 14px; border: 0; border-radius: 6px; background: var(--c-accent); color: var(--c-on-accent); white-space: nowrap; cursor: pointer; }

/* =========================================================
   フッター
   ========================================================= */
.site-footer { margin-top: 24px; padding-block: 36px 20px; border-top: 1px solid var(--c-line); background: var(--c-bg-soft); font-size: .85rem; color: var(--c-sub); }
.site-footer__inner { display: grid; gap: 24px; }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__name { font-family: var(--font-title); font-size: 1.3rem; letter-spacing: var(--brand-spacing); color: var(--c-accent); text-decoration: none; }
.site-footer__desc { margin: 8px 0 0; line-height: 1.8; }
.site-footer__heading { margin: 0 0 8px; font-weight: 700; color: var(--c-heading); }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.site-footer a { color: inherit; }
.copyright { margin: 24px auto 0; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: .75rem; }

/* =========================================================
   ブログ向け機能（1.3）：どのスキンでも使える。色はスキンの変数から。
   ========================================================= */

/* 読了時間 */
.reading-time::before { content: "・"; margin-right: 4px; }

/* 古い記事のお知らせ */
.old-notice { margin: 0 0 1.6em; padding: .7em 1em; border: 1px solid color-mix(in srgb, #d97706 45%, var(--c-line)); border-radius: 6px; background: color-mix(in srgb, #f59e0b 10%, var(--c-bg)); font-size: .85rem; line-height: 1.7; }
.old-notice::before { content: "⚠ "; }

/* 著者ボックス */
.author-box { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-soft); }
.author-box__media { flex: 0 0 64px; }
.author-box__img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-box__initial { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-size: 1.5rem; font-weight: 700; }
.author-box__body { min-width: 0; }
.author-box__label { margin: 0; font-size: .72rem; letter-spacing: .08em; color: var(--c-sub); }
.author-box__name { margin: 0 0 4px; font-family: var(--font-title); font-size: 1.05rem; font-weight: 700; }
.author-box__name a { color: var(--c-heading); text-decoration: none; }
.author-box__bio { margin: 0; font-size: .85rem; line-height: 1.8; }
.author-box__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: .8rem; }

/* 購読ボックス */
.subscribe { margin-top: 28px; padding: 18px; border: 1px solid var(--c-line); border-radius: var(--radius); text-align: center; }
.subscribe__title { margin: 0 0 6px; font-weight: 700; }
.subscribe__text { margin: 0 0 12px; font-size: .85rem; color: var(--c-sub); }
.subscribe__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.subscribe__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px; border: 1px solid var(--c-accent); border-radius: 999px; color: var(--c-accent); font-size: .85rem; font-weight: 700; text-decoration: none; }
.subscribe__btn--main { background: var(--c-accent); color: var(--c-on-accent); }

/* 追従する目次（サイドバー・パソコン幅だけ） */
.side-toc { display: none; }
@media (min-width: 1024px) {
	.side-toc { display: block; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
	.admin-bar .side-toc { top: 48px; }
}
.side-toc ol { margin: 0; padding-left: 1.2em; font-size: .82rem; line-height: 1.6; }
.side-toc ol ol { margin-top: 2px; font-size: .95em; }
.side-toc li { margin-block: 4px; }
.side-toc a { color: var(--c-sub); text-decoration: none; }
.side-toc a:hover { color: var(--c-text); text-decoration: underline; }
.side-toc a.is-current { color: var(--c-accent); font-weight: 700; }

/* コメント欄 */
.comments { margin-top: 40px; }
.comments__title, .comment-reply-title { font-size: 1.1rem; margin: 0 0 12px; }
.comments__list, .comments__list .children { margin: 0; padding: 0; list-style: none; }
.comments__list .children { margin-left: 1.2em; padding-left: 1em; border-left: 2px solid var(--c-line); }
.comments__list .comment-body { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--radius); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .78rem; color: var(--c-sub); }
.comment-meta a { color: inherit; }
.comment-author { display: flex; align-items: center; gap: 8px; }
.comment-author .avatar { width: 32px; height: 32px; border-radius: 50%; }
.comment-author .fn { font-size: .9rem; font-weight: 700; font-style: normal; color: var(--c-text); }
.comment-author .says { display: none; }
.comment-content { font-size: .92rem; }
.comment-content p { margin: .6em 0 0; }
.reply { font-size: .78rem; text-align: right; }
.comments__closed { font-size: .85rem; color: var(--c-sub); }
.comment-respond { margin-top: 24px; }
.comment-form p { margin: 0 0 12px; }
.comment-form label { display: block; font-size: .85rem; margin-bottom: 4px; }
.comment-form .comment-form-cookies-consent label { display: inline; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-bg); color: var(--c-text);
}
.comment-notes { font-size: .8rem; color: var(--c-sub); }
.comment-form .submit { min-height: 44px; padding: 10px 28px; border: 0; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font: inherit; font-weight: 700; cursor: pointer; }
#cancel-comment-reply-link { margin-left: 10px; font-size: .8rem; font-weight: 400; }

/* アイキャッチが無い記事の代わり（サイト名入りの無地の枠） */
.noimage { display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 16 / 9; padding: 6px; overflow: hidden; background: color-mix(in srgb, var(--c-accent) 12%, var(--c-thumb-bg)); color: var(--c-text); text-align: center; }
.noimage__text { font-family: var(--font-title); font-size: .85rem; font-weight: 700; letter-spacing: var(--brand-spacing); line-height: 1.3; }
.popular .noimage__text { font-size: .55rem; }
.popular__item--top .noimage__text { font-size: .85rem; }
@media (min-width: 1024px) { .popular--thumb-on .noimage.popular__img { display: grid; } }
.popular--sp-thumb.popular--thumb-on .noimage.popular__img { display: grid; }
.related__img.noimage { height: auto; }

/* 一覧の見せ方：リスト（小さな画像で、たくさん並べる） */
.card-list--list { gap: 0; }
.card-list--list .card:not(.card--pickup) .card__link { grid-template-columns: 30% 1fr; gap: 12px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: none; box-shadow: none; }
@media (min-width: 768px) { .card-list--list .card:not(.card--pickup) .card__link { grid-template-columns: 160px 1fr; } }
.card-list--list .card:not(.card--pickup) .card__excerpt { -webkit-line-clamp: 1; }
.card-list--list .card--pickup { margin-bottom: 12px; }

/* 一覧の見せ方：タイル（画像が上。2〜3列） */
.card-list--tile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .card-list--tile { gap: 16px; } }
@media (min-width: 1024px) { .card-list--tile { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-list--tile .card--pickup { grid-column: 1 / -1; }
.card-list--tile .card:not(.card--pickup) .card__link { grid-template-columns: 1fr; align-items: start; height: 100%; gap: 10px; }
.card-list--tile .card:not(.card--pickup) .card__excerpt { display: none; }
@media (max-width: 599px) {
	.card-list--tile .card:not(.card--pickup) .card__link { padding: 8px; gap: 8px; }
	.card-list--tile .card:not(.card--pickup) .card__title { font-size: .85rem; line-height: 1.5; }
}

/* =========================================================
   レイアウト（inc/layout.php）：スキンとは別に選べる並べ方
   ========================================================= */

/* 1カラム：サイドバーなし。プロフィール・人気記事などは本文の下に横並び */
@media (min-width: 1024px) {
	.layout-one .layout { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--content) + 32px); }
	.layout-one .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 24px; border-top: 1px solid var(--c-line); }
	.layout-one .sidebar .side-toc { display: none; }
}
.layout-one .entry-content { margin-inline: auto; }

/* 左サイドバー：パソコン幅で左に置き、画面についてくる（目次・カテゴリがいつでも見える） */
@media (min-width: 1024px) {
	.layout-left .layout { grid-template-columns: 280px minmax(0, 1fr); }
	.layout-left .sidebar { order: -1; position: sticky; top: 16px; align-self: start; grid-template-columns: minmax(0, 1fr); max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
	.layout-left .sidebar > * { min-width: 0; }
	.admin-bar.layout-left .sidebar { top: 48px; max-height: calc(100vh - 64px); }
	.layout-left .side-toc { position: static; max-height: none; }
}

/* ヒーロー：トップの最新記事を大きく。画像は切り取らない */
.hero { padding-block: 20px 0; }
.hero__link { display: grid; gap: 16px; color: inherit; text-decoration: none; }
.hero__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--c-thumb-bg); }
.hero__thumb img, .hero__thumb .noimage { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.hero__label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--c-accent); }
.hero__title { margin: 0; font-family: var(--font-title); font-size: clamp(1.4rem, 1rem + 2vw, 2.3rem); font-weight: 800; line-height: 1.35; color: var(--c-heading); }
.hero__excerpt { margin: 0; font-size: .9rem; line-height: 1.8; color: var(--c-sub); }
.hero__date { font-size: .78rem; color: var(--c-sub); }
.hero__link:hover .hero__title { text-decoration: underline; text-underline-offset: .15em; }
@media (min-width: 768px) {
	.hero__link { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: center; }
}

/* 一覧：タイムライン（日付の線に沿って並ぶ） */
.card-list--timeline { gap: 0; padding-left: 22px; border-left: 2px solid var(--c-line); margin-left: 8px; }
.card-list--timeline .card { position: relative; }
.card-list--timeline .card::before { content: ""; position: absolute; left: -30px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px var(--c-bg); }
.card-list--timeline .card:not(.card--pickup) .card__link { grid-template-columns: 1fr 28%; padding: 14px 0 18px; border: 0; border-radius: 0; background: none; box-shadow: none; align-items: start; }
@media (min-width: 768px) { .card-list--timeline .card:not(.card--pickup) .card__link { grid-template-columns: 1fr 140px; } }
.card-list--timeline .card:not(.card--pickup) .card__thumb { order: 2; }
.card-list--timeline .card:not(.card--pickup) .card__date { order: -1; font-size: .8rem; font-weight: 700; color: var(--c-accent); }
.card-list--timeline .card--pickup { margin-bottom: 16px; }

/* 一覧：マソンリー（高さの違うカードを詰める。CSS の段組だけで作るので軽い） */
.card-list--masonry { display: block; columns: 2; column-gap: 12px; }
@media (min-width: 600px) { .card-list--masonry { column-gap: 16px; } }
@media (min-width: 1024px) { .card-list--masonry { columns: 3; } }
.card-list--masonry .card { break-inside: avoid; margin-bottom: 12px; }
@media (min-width: 600px) { .card-list--masonry .card { margin-bottom: 16px; } }
.card-list--masonry .card--pickup { column-span: all; }
.card-list--masonry .card:not(.card--pickup) .card__link { grid-template-columns: 1fr; align-items: start; gap: 10px; }
.card-list--masonry .card:not(.card--pickup) .card__thumb { aspect-ratio: auto; }
.card-list--masonry .card:not(.card--pickup) .card__thumb img { height: auto; }
.card-list--masonry .card:not(.card--pickup) .card__excerpt { display: -webkit-box; -webkit-line-clamp: 4; }
@media (max-width: 599px) {
	.card-list--masonry .card:not(.card--pickup) .card__link { padding: 8px; }
	.card-list--masonry .card:not(.card--pickup) .card__title { font-size: .85rem; }
	.card-list--masonry .card:not(.card--pickup) .card__excerpt { display: none; }
}