@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.18
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   ねこ暮らし – Figmaデザイン実装
   Figma: 猫ブログのデザイン (node 2:4)
   ========================================================================== */

:root {
	/* フォント */
	--nk-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
	--nk-font-round: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;

	/* カラー */
	--nk-text: #5c5142;
	--nk-heading: #5b4c3a;
	--nk-body: #5f5648;
	--nk-dark: #4f4636;
	--nk-muted: #736b5d;
	--nk-accent: #6d8c3f;
	--nk-accent-text: #5a7730;
	--nk-hero-bg-1: #f6f3e6;
	--nk-hero-bg-2: #f3f1e2;
	--nk-pickup-bg: #fdfaf3;
	--nk-about-bg: #dfe8c8;
	--nk-footer-bg: #f7f4ea;
	--nk-border: #d9d2bf;

	/* レイアウト */
	--nk-container: 940px;

	/* SWELLの基本カラーを上書き */
	--color_main: #6d8c3f;
	--color_text: #5f5648;
	--color_link: #5a7730;
}

body,
.editor-styles-wrapper {
	font-family: var(--nk-font);
	color: var(--nk-body);
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.l-header {
	background: #fff;
	box-shadow: none;
}

/* サイト名はヘッダーに常時表示する。
   Figmaのカンプにはヘッダーロゴが無いが、そのまま実装するとSPのヘッダーバーが
   ハンバーガーと検索アイコンだけになり、ブランド表示もホームへの導線も消える。
   カンプ再現よりも現在地の提示を優先する。 */
.l-header .l-header__logo {
	align-items: center;
	display: flex;
	margin-right: 24px;
}

.l-header__logo .c-headLogo {
	color: var(--nk-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.l-header__inner {
	max-width: 100%;
	padding-inline: 30px;
	min-height: 48px;
}

.l-header__gnav {
	margin-left: 0;
	flex: 1 1 auto;
}

.c-gnav {
	justify-content: flex-start;
	gap: 0;
}

.c-gnav > li > a {
	font-size: 14px;
	color: var(--nk-text);
	padding: 0 12px;
	min-height: 48px;
}

/* ヘッダーロゴを表示するため、先頭項目の左詰め解除は行わない */

/* ホバーの下線は使わず、文字色だけ変える */
.c-gnav > li > a::after {
	display: none;
}

.c-gnav > li > a:hover {
	color: var(--nk-accent);
}

/* 検索ボタンは右端へ */
.c-gnav > li.-search,
.c-gnav > .menu-item.-search {
	margin-left: auto;
}

.c-gnav .icon-search {
	font-size: 18px;
	color: var(--nk-text);
}

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */
.nk-section {
	padding-inline: 30px;
}

.nk-inner {
	max-width: var(--nk-container);
	margin-inline: auto;
	width: 100%;
}

/* 白い丸ボタン（記事一覧を見る） */
.nk-btn.wp-block-buttons .wp-block-button__link,
.nk-btn .wp-block-button__link {
	background: #fff;
	border: 1px solid var(--nk-border);
	border-radius: 30px;
	box-shadow: 0 2px 2.5px rgba(0, 0, 0, 0.05);
	color: #4a4034;
	font-size: 14px;
	font-weight: 400;
	min-width: 200px;
	padding: 13px 20px;
	text-align: center;
}

.nk-btn .wp-block-button__link::after {
	background: url(img/paw-btn.svg) no-repeat center / contain;
	content: "";
	display: inline-block;
	height: 15px;
	margin-left: 6px;
	vertical-align: -2px;
	width: 15px;
}

.nk-btn .wp-block-button__link:hover {
	background: #fffdf7;
	opacity: 1;
}

/* セクション見出し（＼ 〜 ／ 風）
   SWELLの見出しデザイン（帯・装飾）を打ち消してFigmaの見た目にする */
.post_content .nk-secttl,
.post_content .nk-about__ttl,
.nk-secttl,
.nk-about__ttl {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

.post_content .nk-secttl::before,
.post_content .nk-about__ttl::before,
.nk-secttl::before,
.nk-about__ttl::before {
	content: none;
	display: none;
}

.post_content .nk-secttl,
.nk-secttl {
	color: var(--nk-heading);
	font-family: var(--nk-font);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0;
	text-align: center;
}

.post_content .nk-secttl::after,
.nk-secttl::after {
	background: url(img/paw-title.svg) no-repeat center / contain;
	content: "";
	display: inline-block;
	height: 15px;
	margin-left: 6px;
	vertical-align: 2px;
	width: 15px;
}

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */
.nk-hero {
	background: linear-gradient(180deg, var(--nk-hero-bg-1) 0%, var(--nk-hero-bg-2) 100%);
	margin-block: 0;
	overflow: hidden;
	padding: 40px 30px 0;
}

.nk-hero__inner {
	margin-inline: auto;
	max-width: var(--nk-container);
	padding: 20px 30px 40px;
	position: relative;
	width: 100%;
}

.nk-hero__cols.wp-block-columns {
	align-items: center;
	gap: 0;
	margin-bottom: 0;
}

.nk-hero__text.wp-block-column {
	flex-basis: 52% !important;
	position: relative;
	z-index: 2;
}

.nk-hero__figure.wp-block-column {
	flex-basis: 48% !important;
}

.nk-hero__lead {
	color: #6b6152;
	font-size: 15px;
	margin: 0 0 14px;
}

.nk-hero__title {
	color: var(--nk-heading);
	font-family: var(--nk-font-round);
	font-size: 44px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
	margin: 0;
}

.nk-hero__title .nk-accent {
	color: var(--nk-accent);
}

.nk-hero__desc {
	color: var(--nk-body);
	font-size: 15px;
	line-height: 2;
	margin: 26px 0 0;
}

/* 猫の写真（変則的な角丸） */
.nk-hero__img.wp-block-image {
	margin: 0;
}

.nk-hero__img img {
	border-radius: 120px 320px 115px 322px;
	display: block;
	height: auto;
	width: 100%;
}

/* 写真が未挿入のあいだも場所を確保する。
   エディタから画像を入れると自動で解除される。
   2026-09-02: 手描きイラスト（猫ハウス・小物）を削除したため、
   写真が入るまでこの領域は完全な空白になる */
.nk-hero__figure.wp-block-column:not(:has(img[src])) {
	aspect-ratio: 392 / 346;
}

/* --------------------------------------------------------------------------
   カテゴリーカード（3つ）
   -------------------------------------------------------------------------- */
.nk-catcards {
	background: var(--nk-hero-bg-2);
	margin-block: 0;
	padding: 0 30px 60px;
}

.nk-catcards__inner.wp-block-columns {
	gap: 22px;
	margin-inline: auto;
	margin-bottom: 0;
	max-width: var(--nk-container);
	padding-inline: 30px;
}

.nk-catcard.wp-block-column {
	align-items: center;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: row;
	gap: 14px;
	padding: 18px 20px;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nk-catcard:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.09);
	transform: translateY(-2px);
}

.nk-catcard::before {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	content: "";
	flex: 0 0 42px;
	height: 56px;
	width: 42px;
}

/* アイコンはFigmaの実寸（幅42px）に合わせる */
.nk-catcard--food::before {
	background-image: url(img/icon-food.svg);
	height: 37px;
}

.nk-catcard--goods::before {
	background-image: url(img/icon-goods.svg);
	height: 44px;
}

.nk-catcard--info::before {
	background-image: url(img/icon-book.svg);
	height: 55px;
}

.nk-catcard p {
	color: #5b5142;
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}

.nk-catcard a {
	color: inherit;
	text-decoration: none;
}

/* カード全体をクリック可能にする */
.nk-catcard a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* --------------------------------------------------------------------------
   人気記事ピックアップ
   -------------------------------------------------------------------------- */
.nk-pickup {
	background: var(--nk-pickup-bg);
	margin-block: 0;
	padding: 56px 30px 60px;
}

.nk-pickup__inner {
	margin-inline: auto;
	max-width: var(--nk-container);
	padding-inline: 20px;
}

.nk-pickup .nk-secttl {
	margin-bottom: 34px;
}

/* 4カラム（SWELLは3カラムまでのため自前で指定） */
.nk-pickup .p-postList.-type-card {
	margin-inline: -10px;
}

.nk-pickup .p-postList.-type-card .p-postList__item {
	margin-bottom: 0;
	padding: 0 10px;
	width: 25%;
}

.nk-pickup .p-postList__link {
	display: block;
}

.nk-pickup .p-postList__thumb {
	box-shadow: none;
	margin-bottom: 0;
	overflow: visible;
}

.nk-pickup .c-postThumb__figure {
	aspect-ratio: 205 / 124;
	border-radius: 10px;
	display: block;
	margin: 0 0 8px;
	overflow: hidden;
}

.nk-pickup .p-postList__thumb img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* カテゴリーバッジ：サムネイルの上ではなく下に置く */
.nk-pickup .c-postThumb__cat {
	background: #e7e0cf;
	border-radius: 20px;
	bottom: auto;
	color: #5b5142;
	display: inline-block;
	font-size: 11px;
	font-weight: 400;
	left: auto;
	line-height: 1.6;
	margin: 0 0 6px;
	max-width: none;
	padding: 3px 10px;
	position: static;
	right: auto;
	top: auto;
}

/* フォルダアイコンは使わない */
.nk-pickup .c-postThumb__cat::before {
	content: none;
}

/* カテゴリー別のバッジ色（data-cat-id はカテゴリーID） */
.nk-pickup .c-postThumb__cat[data-cat-id="2"] { background: #e3ecd2; } /* 猫との暮らし */
.nk-pickup .c-postThumb__cat[data-cat-id="3"] { background: #e7e0cf; } /* おすすめグッズ */
.nk-pickup .c-postThumb__cat[data-cat-id="4"] { background: #f6d9a8; } /* キャットフード */
.nk-pickup .c-postThumb__cat[data-cat-id="5"] { background: #e2e9d6; } /* お役立ち情報 */

.nk-pickup .p-postList__title {
	color: var(--nk-dark);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 4px;
}

.nk-pickup .p-postList__times,
.nk-pickup .p-postList__meta {
	color: var(--nk-muted);
	font-size: 12px;
}

.nk-pickup .nk-btn {
	margin-top: 34px;
}


/* --------------------------------------------------------------------------
   このブログについて
   -------------------------------------------------------------------------- */
.nk-about {
	background: var(--nk-about-bg);
	margin-block: 0;
	overflow: hidden;
	padding: 56px 50px;
	position: relative;
}

.nk-about__inner.wp-block-columns {
	align-items: center;
	gap: 44px;
	margin-bottom: 0;
	margin-inline: auto;
	max-width: 900px;
	padding-inline: 40px;
}

.nk-about__figure.wp-block-column {
	flex-basis: 250px !important;
	flex-grow: 0 !important;
}

.nk-about__figure img {
	aspect-ratio: 250 / 209;
	border-radius: 50%;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* 写真が未挿入のあいだも場所を確保する（ヒーローと同じ理由） */
.nk-about__figure.wp-block-column:not(:has(img[src])) {
	aspect-ratio: 250 / 209;
}

.post_content .nk-about__ttl,
.nk-about__ttl {
	color: var(--nk-dark);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 17px;
	text-align: left;
}

.nk-about__text {
	color: var(--nk-dark);
	font-size: 14px;
	line-height: 2.1;
	margin: 0;
}

/* 観葉植物のイラスト */
.nk-about::after {
	background: url(img/deco-plant.svg) no-repeat center / contain;
	bottom: 40px;
	content: "";
	height: 131px;
	pointer-events: none;
	position: absolute;
	right: 60px;
	width: 70px;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.l-footer {
	background: var(--nk-footer-bg);
}

.l-footer__foot {
	background: transparent;
	padding: 40px 0 26px;
}

.l-footer__foot .l-container {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 18px 50px;
	justify-content: center;
}

/* フッターロゴ */
.l-footer__foot .l-container::before {
	background: url(img/logo.svg) no-repeat center / contain;
	content: "";
	flex: 0 0 auto;
	height: 56px;
	width: 160px;
}

.l-footer__nav {
	color: var(--nk-text);
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	justify-content: flex-start;
	margin: 0;
	max-width: 574px;
}

.l-footer .l-footer__nav li {
	border: none !important;
	padding: 0;
}

.l-footer__nav li::before,
.l-footer__nav li::after {
	content: none;
}

.l-footer .l-footer__nav li a {
	border: none !important;
	color: var(--nk-text);
	font-size: 13px;
	line-height: 2.4;
	padding: 0;
}

.l-footer__nav li a:hover {
	color: var(--nk-accent);
}

/* SNSアイコン */
.l-footer .c-iconList {
	flex: 1 0 100%;
	gap: 22px;
	justify-content: center;
	margin-top: 8px;
	opacity: 0.55;
}

.l-footer .c-iconList__link {
	color: var(--nk-text);
	font-size: 18px;
}

/* Figmaの並び順（Instagram → X → YouTube → RSS） */
.l-footer .c-iconList__item.-instagram { order: 1; }
.l-footer .c-iconList__item.-twitter-x { order: 2; }
.l-footer .c-iconList__item.-youtube { order: 3; }
.l-footer .c-iconList__item.-rss { order: 4; }

.l-footer .copyright {
	color: var(--nk-muted);
	flex: 1 0 100%;
	font-size: 11.5px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   固定ページ（トップ）の余白調整
   -------------------------------------------------------------------------- */
.home .l-content.l-container,
.home .l-content,
.home .post_content,
.home .l-mainContent__inner,
.home .p-articleThumb {
	margin-top: 0;
	padding-top: 0;
}

/* 上下の余白を消してセクションを画面いっぱいに連結する */
.home .l-content.l-container {
	margin-bottom: 0 !important;
	max-width: 100%;
	padding-block: 0 !important;
	padding-inline: 0;
}

.home .l-footer {
	margin-top: 0 !important;
}

.home .p-articleThumb,
.home .c-pageTitle,
.home .l-topTitleArea,
.home .p-breadcrumb {
	display: none;
}

.home .post_content > .alignfull:first-child {
	margin-top: 0;
}

/* セクション同士をぴったり連結させる */
.home .post_content > .alignfull {
	margin-block: 0;
}

.home .l-mainContent,
.home .l-content {
	padding-bottom: 0;
}

.home .post_content > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 959px) {
	.nk-hero__title {
		font-size: 34px;
	}

	.nk-about::after {
		right: 10px;
		transform: scale(0.8);
	}
}

@media (max-width: 781px) {
	.nk-hero {
		padding: 24px 20px 0;
	}

	.nk-hero__inner {
		padding: 0 0 24px;
	}

	.nk-hero__cols.wp-block-columns {
		flex-direction: column-reverse !important;
		gap: 0;
	}

	.nk-hero__text.wp-block-column,
	.nk-hero__figure.wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* 画像とテキストが重ならないように */
	.nk-hero__figure.wp-block-column {
		margin: 0 0 24px !important;
		z-index: 1;
	}

	.nk-hero__text.wp-block-column {
		margin: 0 !important;
		z-index: 2;
	}

	.nk-hero__title {
		font-size: 30px;
	}

	.nk-hero__desc {
		margin-top: 16px;
	}

	/* SPは手描きイラストを出さないので、写真未挿入時の場所確保も不要。
	   確保したままだと大きな空白になる */
	.nk-hero__figure.wp-block-column:not(:has(img[src])),
	.nk-about__figure.wp-block-column:not(:has(img[src])) {
		aspect-ratio: auto;
		margin-bottom: 0 !important;
	}

	.nk-catcards {
		padding: 0 20px 40px;
	}

	.nk-catcards__inner.wp-block-columns {
		flex-wrap: wrap !important;
		gap: 12px;
		padding-inline: 0;
	}

	.nk-catcard.wp-block-column {
		flex-basis: 100% !important;
	}

	.nk-pickup {
		padding: 40px 20px;
	}

	.nk-pickup__inner {
		padding-inline: 0;
	}

	/* SPは2カラム */
	.nk-pickup .p-postList.-type-card .p-postList__item {
		margin-bottom: 24px;
		width: 50%;
	}

	.nk-pickup .nk-secttl {
		margin-bottom: 24px;
	}

	.nk-secttl {
		font-size: 19px;
	}

	.nk-about {
		padding: 40px 20px;
	}

	.nk-about__inner.wp-block-columns {
		flex-wrap: wrap !important;
		gap: 24px;
		padding-inline: 0;
		text-align: center;
	}

	/* SPではWPコアの .wp-block-column{flex-basis:100%!important} が優先されるため、
	   カラム幅ではなく画像自体の幅を制約して中央に置く */
	.nk-about__figure img {
		margin-inline: auto;
		max-width: 200px;
	}

	.nk-about__text {
		text-align: left;
	}

	.nk-about::after {
		display: none;
	}

	.l-footer__foot .l-container {
		flex-direction: column;
		gap: 14px;
	}

	.l-footer__nav {
		gap: 0 16px;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   アクセシビリティ
   2026-09-02 追加。ライブDOMでの実測にもとづく是正。
   このブロックは既存のメディアクエリより後ろに置くこと（SPの文字サイズを上書きするため）
   -------------------------------------------------------------------------- */

/* フォーカスリング
   SWELLの初期状態は outline-style が none で、キーボード操作時に現在位置が
   まったく見えなかった。マウス操作では出さず、キーボード操作時だけ出す */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--nk-accent-text);
	outline-offset: 2px;
}

/* カテゴリーカードは a::after を全面にかぶせてクリック領域を作っているため、
   リンク本体にリングを出しても文字の周りにしか出ずカードの範囲が伝わらない。
   :has() が使える環境ではカード全体を囲う */
.nk-catcard:has(a:focus-visible) {
	outline: 3px solid var(--nk-accent-text);
	outline-offset: 3px;
}

.nk-catcard:has(a:focus-visible) a:focus-visible {
	outline: none;
}

/* タッチターゲット（最小 44x44）
   SNSアイコンは 22x22、フッターナビは高さ31pxしかなかった */
.l-footer .c-iconList__link {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

/* アイコンの opacity: .55 は下のコントラストを落とすため、
   透過ではなくミュート色そのもので弱める */
.l-footer .c-iconList {
	opacity: 1;
}

.l-footer .c-iconList__link {
	color: var(--nk-muted);
}

.l-footer .l-footer__nav li a,
.p-spMenu .menu-item > a {
	align-items: center;
	display: flex;
	min-height: 44px;
}

.l-footer .l-footer__nav li a {
	line-height: 1.5;
}

/* 本文の最小文字サイズ（SP）
   14px は小さいので16pxに上げる。PC向けに入っている <br> をそのままにすると
   16pxでは折り返してガタつくため、SPでは強制改行を解除して自然に流す */
@media (max-width: 781px) {
	.nk-hero__desc,
	.nk-about__text {
		font-size: 16px;
	}

	.nk-hero__desc br,
	.nk-about__text br {
		display: none;
	}

	.nk-catcard p {
		font-size: 16px;
	}

	.nk-pickup .p-postList__times,
	.nk-pickup .p-postList__meta {
		font-size: 13px;
	}
}

/* 動きを減らす設定への対応
   子テーマ・親テーマともに未対応だった */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.nk-catcard,
	.nk-catcard:hover {
		transform: none;
	}
}

/* 残りのタッチターゲット（SPで実測して特定した4箇所） */
.l-header__logo .c-headLogo__link,
.l-fixHeader__logo .c-headLogo__link {
	align-items: center;
	display: flex;
	min-height: 44px;
}

.c-gnav__sBtn {
	min-width: 44px;
}

.l-footer .l-footer__nav li a {
	justify-content: center;
	min-width: 44px;
}

.c-searchForm__submit {
	min-height: 44px;
	min-width: 44px;
}

.c-modal__close {
	min-height: 44px;
}

/* ==========================================================================
   下層ページのアクセシビリティ補正
   2026-09-02: 全11画面（TOP/記事一覧/運営者情報/プロフィール/お問い合わせ/
   プライバシー/記事4本/検索結果/404）を1440pxと375pxで実測して特定した欠陥のみ補正。
   TOPページは既に対応済みだったが、下層は素のSWELL状態だった。
   ========================================================================== */

/* --------------------------------------------------------------------------
   コントラスト（WCAG AA 4.5:1）
   SWELLのメインカラー #6d8c3f に白文字を乗せると 3.84:1 で不合格。
   カテゴリーバッジ（全記事）とSPメニュー見出し「MENU」が該当していた。
   すでに定義済みの濃い方 --nk-accent-text (#5a7730 / 5.10:1) に寄せる。
   装飾用の --nk-accent はFigma実装のまま触らないので、TOPの意匠は変わらない。
   -------------------------------------------------------------------------- */
:root {
	--color_main: #5a7730;
}

/* --------------------------------------------------------------------------
   タッチターゲット
   方針: 単独の操作部品（アイコン・フォーム部品・一覧のナビゲーションリンク）は
   44x44を満たす。パンくずやバッジのような文中テキストリンクは、意匠を壊さない
   範囲で当たり判定だけを広げる（インライン要素の縦paddingは行の高さを変えずに
   ヒット領域を広げられる）。
   -------------------------------------------------------------------------- */

/* SNSシェアボタン: 実測 30x30(PC) / 54x33(SP) */
.c-shareBtns__btn {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

/* パンくず: 実測 44x16。行の高さは変えずにヒット領域だけ縦に広げる */
.p-breadcrumb__text {
	padding-bottom: 14px;
	padding-top: 14px;
}

/* カテゴリーバッジ: 実測 88x19 */
.c-categoryList__link {
	display: inline-block;
	line-height: 1.5;
	padding: 7px 12px;
}

/* コメントフォーム: 入力欄30px・送信ボタン35px・チェックボックス16px だった */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	min-height: 44px;
}

.comment-form input[type="submit"] {
	min-height: 44px;
}

.comment-form input[type="checkbox"] {
	accent-color: var(--nk-accent-text);
	height: 24px;
	width: 24px;
}

.comment-form-cookies-consent {
	align-items: center;
	display: flex;
	gap: 8px;
}

/* サイドバーウィジェットのリンク: 最新記事は高さ20px、カテゴリー/アーカイブは40px */
.wp-block-latest-posts__post-title {
	display: inline-block;
	padding-bottom: 12px;
	padding-top: 12px;
}

.wp-block-categories-list a,
.wp-block-archives-list a {
	align-items: center;
	display: flex;
	min-height: 44px;
}

/* --------------------------------------------------------------------------
   文字サイズ
   実測で 11px / 11.25px / 11.5px / 12.15px / 13px / 13.5px の6段階が本文扱いの
   場所に出ていた。最低14pxに引き上げる（SPの本文相当は16px）。
   -------------------------------------------------------------------------- */

/* コピーライト: 全ページ 11.5px */
.l-footer .copyright {
	font-size: 14px;
}

/* 記事一覧・検索結果の抜粋: 13px */
.p-postList__excerpt {
	font-size: 14px;
}

/* 前後記事リンクのタイトル: 11.25px(SP) / 13px(PC) */
.p-pnLinks__title {
	font-size: 14px;
	line-height: 1.6;
}

/* シェアの案内文「よかったらシェアしてね！」: 13.5px */
.c-shareBtns__message .__text,
.c-shareBtns .__text {
	font-size: 14px;
}

/* コメントのクッキー同意の説明: 12.15px */
.comment-form-cookies-consent label {
	font-size: 14px;
	line-height: 1.6;
}

/* サイドバー（WordPress既定ウィジェット）: 13.5px */
.l-sidebar .wp-block-heading,
.l-sidebar .wp-block-latest-posts__post-title,
.l-sidebar .wp-block-latest-comments,
.l-sidebar .no-comments,
.l-sidebar .wp-block-categories-list,
.l-sidebar .wp-block-archives-list {
	font-size: 14px;
}

/* 404ページの案内文: 11px */
.p-breadcrumb__text {
	font-size: 14px;
}

/* 記事本文まわりの行間（長文は1.5以上） */
.p-postList__excerpt {
	line-height: 1.7;
}

@media (max-width: 781px) {
	/* SPの本文相当は16pxまで上げる */
	.p-postList__excerpt {
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   上の補正の取りこぼし（適用後の再実測で判明した3件）
   -------------------------------------------------------------------------- */

/* チェックボックスは flex アイテムなので縮む。
   width:24px を指定しても computed 13px になっていた */
.comment-form input[type="checkbox"] {
	flex: 0 0 24px;
}

/* カテゴリーバッジは 31〜32px までしか広がらなかった。
   タッチ端末でだけ44pxを満たす（マウス操作のPCでは意匠を優先して32pxのまま） */
@media (max-width: 781px) {
	.c-categoryList__link {
		align-items: center;
		display: inline-flex;
		min-height: 44px;
	}
}

/* 記事下「関連する記事はまだ見つかりませんでした。」: 13.5px */
.l-articleBottom__section p {
	font-size: 14px;
	line-height: 1.7;
}

/* 404ページの検索入力: 実測 345x40 */
.c-searchForm__s {
	min-height: 44px;
}

/* クッキー同意行: チェックボックス自体は24px（WCAG 2.5.8 AAの基準）に留め、
   行全体を44pxにして label 経由の当たり判定を確保する */
.comment-form-cookies-consent {
	min-height: 44px;
}

/* --------------------------------------------------------------------------
   ヒーロー見出しにSWELLの見出しデザインを効かせない
   2026-09-02 実測で判明した2点への対処。
   (1) 現状の h1 も SWELL の .post_content 見出しスタイル（詳細度0,2,0）に負けて
       いて、Figma指定の44pxが32pxに潰されていた。
   (2) トップではSWELLがヘッダーロゴを h1 にする（SWELL_PARTS.php:42・フィルタ無し）
       ためh1が2個になる。ヒーロー側をh2へ下げるのが正しいが、そのままだと
       SWELLのh2デザイン（濃紺 rgb(4,56,76) の帯＋白文字22.4px＋::before）を
       拾って別物になる。DOM上で差し替えて実測し確認済み。
   どちらのタグでも同じ見た目になるよう .post_content 込みの詳細度で宣言し直す。
   -------------------------------------------------------------------------- */
.post_content .nk-hero__title,
.post_content h1.nk-hero__title,
.post_content h2.nk-hero__title {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--nk-heading);
	font-family: var(--nk-font-round);
	font-size: 44px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

.post_content .nk-hero__title::before,
.post_content .nk-hero__title::after {
	content: none;
}

.post_content .nk-hero__title .nk-accent {
	color: var(--nk-accent);
}

@media (max-width: 959px) {
	.post_content .nk-hero__title {
		font-size: 34px;
	}
}

@media (max-width: 781px) {
	.post_content .nk-hero__title {
		font-size: 30px;
	}
}

/* サイドバー検索ブロック: 実測 43.59px で44pxにわずかに届かない */
.wp-block-search__input,
.wp-block-search__button {
	min-height: 44px;
}

/* ==========================================================================
   記事本文の見出し
   TOPページだけを作り込んだため、記事本文はSWELL既定のままだった。
   既定のH2は白文字 on 濃紺 rgb(4,56,76)、H4の左ボーダーも同じ濃紺で、
   クリーム／オリーブ／ブラウンのブランドカラーと噛み合っていない
   （2026-09-02 実測）。サイト全体の一貫性のため配色を揃える。
   ========================================================================== */
.post_content h2:not([class*="nk-"]):not(.p-postList__title) {
	background: var(--nk-about-bg);
	border-radius: 10px;
	color: var(--nk-heading);
	font-family: var(--nk-font);
	font-weight: 700;
}

.post_content h3:not([class*="nk-"]):not(.p-postList__title) {
	border-bottom: 2px solid var(--nk-border);
	color: var(--nk-heading);
	font-weight: 700;
}

.post_content h3:not([class*="nk-"]):not(.p-postList__title)::before,
.post_content h3:not([class*="nk-"]):not(.p-postList__title)::after {
	background: var(--nk-accent-text);
}

.post_content h4:not([class*="nk-"]):not(.p-postList__title) {
	border-left-color: var(--nk-accent-text);
	color: var(--nk-heading);
	font-weight: 700;
}

/* 記事一覧・アーカイブのセクション見出しも同じ濃紺を使っていた */
.l-articleBottom__section .c-secTitle,
.p-articleThumb__cat {
	color: var(--nk-heading);
}

/* SWELLのH2は ::before（絶対配置・top:-4px）に上下2pxの濃紺ボーダーを描く。
   上で背景を淡いオリーブの角丸バンドに変えたため、この線だけが残っていた。
   背景ではなくボーダーで描かれているので、ボーダー側を消す。 */
.post_content h2:not([class*="nk-"]):not(.p-postList__title)::before {
	border-bottom: 0;
	border-top: 0;
}