/*
Theme Name: 蟲庭（下手の園芸）
Theme URI:
Description: Arkhe 子テーマ。下手の園芸（蟲庭）のデザインシステムを実装する。
Author:
Template: arkhe
Version: 1.2.1
Text Domain: arkhe-child
*/

/* =========================================================
   1. 確定事項（蟲庭デザインシステム.md 準拠）のトークン
   ========================================================= */
:root {
	/* ---- 色 ---- */
	--ink: #1f1c1b;
	--sub: #746d6a;
	--faint: #8f867f;
	--line: #e8e0da;
	--line2: #d8cec6;
	--bg: #faf6f3;
	--bg-card: #fdfbfa;
	--tagline: #c0b5ad;
	--mark: #f3f0e2;

	/* ---- 幅（4段階のみ） ---- */
	--w-full: 1120px;
	--w-base: 960px;
	--w-mid: 760px;
	--w-text: 600px;
	--pad: 44px;

	/* ---- 文字サイズ：本文用（6段階のみ） ---- */
	--fs-hero: 26px;
	--fs-h2: 20px;
	--fs-lead: 17px;
	--fs-body: 16px;
	--fs-sub: 13.5px;
	--fs-min: 11.5px;

	/* ---- 文字サイズ：ディスプレイ用（別枠） ---- */
	--fs-d-year: 28px;
	--fs-d-catch: 25px;
	--fs-d-logo: 22px;

	/* ---- 余白（4段階のみ） ---- */
	--sp-s: 14px;
	--sp-m: 26px;
	--sp-l: 40px;
	--sp-xl: 64px;

	/* ---- 角丸 ---- */
	--radius: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	/* ---- 字間（4段階のみ） ---- */
	--ls-body: .02em;
	--ls-wide: .1em;
	--ls-wider: .24em;
	--ls-logo: .34em;

	/* ---- 動き（3段階＋特殊） ---- */
	--mo-fast: .3s;
	--mo-base: .6s;
	--mo-slow: 1.2s;
	--mo-hero-zoom: 18s;
	--mo-strip: 60s;

	/* ---- 影（「重ねる」型のみ許可） ---- */
	--shadow-lift: 0 6px 30px rgba(50, 35, 25, .14);

	/* ---- 書体 ---- */
	--mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--serif: Georgia, "Times New Roman", serif;
	--sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* =========================================================
   2. Arkhe本体の変数へ反映
   （本体のCSS/クラスはそのまま、値だけをこのサイト用に上書きする）
   ========================================================= */
:root {
	--ark-color--bg: var(--bg);
	--ark-color--text: var(--ink);
	--ark-color--link: var(--ink);
	--ark-color--header_bg: var(--bg);
	--ark-color--header_txt: var(--ink);
	--ark-color--footer_bg: var(--bg);
	--ark-color--footer_txt: var(--sub);
	--ark-font_family: var(--sans);
	--ark-line_height: 1.9;
	--ark-letter_spacing: var(--ls-body);

	/* コンテンツ幅：確定事項 1-1「幅（4段階）」の --w-base を
	   記事・固定ページ・フロントページの標準コンテナ幅として使う。
	   （Arkheのデフォルトは container_width 設定値＝現状1200px） */
	--ark-width--article: var(--w-base);

	/* 外周の余白：確定事項 1-3 の --pad（44px）に統一
	   （端まで寄る型のはみ出し計算に必要。Arkheのデフォルトは min(48px,4vw)） */
	--ark-padding--container: var(--pad);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--mo-fast: 0s;
		--mo-base: 0s;
		--mo-slow: 0s;
		--mo-hero-zoom: 0s;
		--mo-strip: 0s;
	}
}

/* =========================================================
   3. 本文（.c-postContent）の基準サイズ
   段落は font-size:inherit のため、親側で本文サイズを決める。
   ========================================================= */
.c-postContent {
	font-size: var(--fs-body);
	line-height: 1.9;
	letter-spacing: var(--ls-body);
}

/* =========================================================
   4. 見出し・サイト名・ナビ：明朝（--mincho）
   確定事項 1-6「見出し、サイト名、キャッチコピー、入口の項目名、タブ」
   ========================================================= */
.c-headLogo {
	font-family: var(--mincho);
	font-size: var(--fs-d-logo);
	font-weight: 500;
	letter-spacing: var(--ls-logo);
}

.c-gnav a {
	font-family: var(--mincho);
	font-size: var(--fs-sub);
	letter-spacing: var(--ls-wider);
}
.c-gnav__li > .c-gnav__a {
	padding-inline: var(--sp-m);
}

.c-pageTitle__main {
	font-family: var(--mincho);
	font-size: var(--fs-hero);
	font-weight: 500;
	letter-spacing: var(--ls-wide);
}

/* 本文中の見出し（ノート記事など、ブロックエディタの見出しブロック） */
.c-postContent :where(h2, h3, h4, h5, h6) {
	font-family: var(--mincho);
	font-weight: 500;
	letter-spacing: var(--ls-wide);
}
.c-postContent h2 {
	font-size: var(--fs-h2);
}
.c-postContent :where(h3, h4, h5, h6) {
	font-size: var(--fs-lead);
}

/* =========================================================
   5. 角丸：写真（確定事項 1-4「写真、サムネイル」）
   ========================================================= */
.c-postContent img,
.c-postThumb__img,
.p-entry__thumb__img {
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* =========================================================
   6. 写真の型（ブロックパターン）
   共通ルール：日付は画像の左下（figcaptionをキャプションとして利用）
   ========================================================= */
.hetaen-rec {
	padding: var(--sp-xl) 0;
	border-bottom: 1px solid var(--line);
}
.hetaen-rec__photo {
	margin: 0;
}
.hetaen-rec__photo img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.hetaen-rec__photo figcaption {
	margin-top: 10px;
	text-align: left;
	font-family: var(--serif);
	font-size: var(--fs-sub);
	color: var(--sub);
	letter-spacing: var(--ls-body);
}
.hetaen-rec__text {
	font-size: var(--fs-body);
	line-height: 2;
	color: var(--ink);
	max-width: var(--w-text);
}

/* --- 縦2:3：写真左560px・文章右・縦中央そろえ ---
   Group ブロックは中に .wp-block-group__inner-container を自動生成するため、
   flex はそちらに当てる（直下の子ではなくその内側が実際の親になる）。 */
.hetaen-rec--portrait > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	gap: var(--sp-l);
}
.hetaen-rec--portrait .hetaen-rec__photo {
	flex: 0 0 560px;
}
.hetaen-rec--portrait .hetaen-rec__text {
	flex: 1;
	min-width: 0;
	padding-top: 2px;
}

@media (max-width: 820px) {
	.hetaen-rec--portrait > .wp-block-group__inner-container {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-m);
	}
	.hetaen-rec--portrait .hetaen-rec__photo {
		flex-basis: auto;
		width: 100%;
		max-width: 460px;
	}
}

/* --- 横3:2：写真は中央（コンテナ幅いっぱい）・文章はその下、720px幅で写真の中央 --- */
.hetaen-rec--horizontal .hetaen-rec__text {
	max-width: 720px;
	margin-top: var(--sp-m);
	margin-inline: auto;
}

/* --- 左端まで寄る（横長画像のみ）：画面左端で見切れ、日付は画像の右端に右そろえ --- */
.hetaen-rec--edgeleft > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-l);
	align-items: center;
}
.hetaen-rec--edgeleft .hetaen-rec__photo {
	margin-left: calc((100vw - min(100vw, var(--w-base))) / -2 - var(--pad));
}
.hetaen-rec--edgeleft .hetaen-rec__photo img {
	border-radius: 0 var(--radius) var(--radius) 0;
}
.hetaen-rec--edgeleft .hetaen-rec__photo figcaption {
	text-align: right;
}
.hetaen-rec--edgeleft .hetaen-rec__text {
	max-width: none;
}

@media (max-width: 820px) {
	.hetaen-rec--edgeleft > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: var(--sp-m);
	}
	.hetaen-rec--edgeleft .hetaen-rec__photo {
		margin-left: 0;
	}
	.hetaen-rec--edgeleft .hetaen-rec__photo img {
		border-radius: var(--radius);
	}
}

/* --- 右端まで寄る（横長画像のみ）：画面右端で見切れ、日付は画像の左端に左そろえ --- */
.hetaen-rec--edgeright > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-l);
	align-items: center;
}
.hetaen-rec--edgeright .hetaen-rec__photo {
	margin-right: calc((100vw - min(100vw, var(--w-base))) / -2 - var(--pad));
}
.hetaen-rec--edgeright .hetaen-rec__photo img {
	border-radius: var(--radius) 0 0 var(--radius);
}
.hetaen-rec--edgeright .hetaen-rec__photo figcaption {
	text-align: left;
}
.hetaen-rec--edgeright .hetaen-rec__text {
	max-width: none;
}

@media (max-width: 820px) {
	.hetaen-rec--edgeright > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: var(--sp-m);
	}
	.hetaen-rec--edgeright .hetaen-rec__photo {
		margin-right: 0;
	}
	.hetaen-rec--edgeright .hetaen-rec__photo img {
		border-radius: var(--radius);
	}
}

/* --- 全幅＋角丸：左右32pxの余白、角丸あり。文章は600px幅で左そろえ --- */
.hetaen-rec--wideround .hetaen-rec__photo {
	position: relative;
	left: 50%;
	width: calc(100vw - 64px);
	margin-left: calc((100vw - 64px) / -2);
}
.hetaen-rec--wideround .hetaen-rec__photo img {
	border-radius: var(--radius-lg);
}
.hetaen-rec--wideround .hetaen-rec__photo figcaption {
	max-width: var(--w-base);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.hetaen-rec--wideround .hetaen-rec__text {
	margin-top: var(--sp-m);
}

/* =========================================================
   7. マストヘッド（植物ページの見出し）
   ========================================================= */
.hetaen-masthead {
	margin: 0;
}
.hetaen-masthead__title {
	margin: 0;
	font-family: var(--mincho);
	font-size: var(--fs-hero);
	font-weight: 500;
	letter-spacing: var(--ls-wide);
	line-height: 1.5;
}
.hetaen-masthead__latin {
	display: block;
	margin-top: 9px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-lead);
	color: var(--sub);
	letter-spacing: var(--ls-body);
}
.hetaen-masthead__facts {
	margin-top: var(--sp-m);
	border-top: 1px solid var(--line);
}
.hetaen-masthead__facts > .wp-block-group__inner-container > * {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}
.hetaen-masthead__years a {
	font-family: var(--serif);
	font-size: var(--fs-lead);
	color: var(--ink);
	text-decoration: none;
	margin-right: var(--sp-m);
}
.hetaen-masthead__years a:hover {
	text-decoration: underline;
}
.hetaen-masthead__relation {
	font-size: var(--fs-sub);
}
.hetaen-masthead__relation a {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: var(--ink);
	text-decoration: none;
	transition: color var(--mo-fast) ease;
}
.hetaen-masthead__relation-n {
	color: var(--faint);
	font-family: var(--serif);
	font-size: var(--fs-min);
}
.hetaen-masthead__relation-ar {
	margin-left: 10px;
	color: var(--faint);
	display: inline-block;
	transition: transform var(--mo-fast) ease, color var(--mo-fast) ease;
}
.hetaen-masthead__relation a:hover {
	color: #000;
}
.hetaen-masthead__relation a:hover .hetaen-masthead__relation-ar {
	transform: translateX(5px);
	color: var(--sub);
}
.hetaen-masthead__summary {
	margin-top: var(--sp-m);
	font-size: var(--fs-sub);
	color: var(--sub);
	line-height: 1.95;
}

/* --- 縦写真版 --- */
.hetaen-masthead--portrait > .wp-block-group__inner-container {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-l);
	padding: 28px 0 var(--sp-l);
}
.hetaen-masthead--portrait .hetaen-masthead__photo {
	flex: 0 0 560px;
	margin: 0;
}
.hetaen-masthead--portrait .hetaen-masthead__photo img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.hetaen-masthead--portrait .hetaen-masthead__info {
	flex: 1;
	min-width: 0;
	padding-top: 6px;
}

@media (max-width: 820px) {
	.hetaen-masthead--portrait > .wp-block-group__inner-container {
		flex-direction: column;
		gap: var(--sp-m);
	}
	.hetaen-masthead--portrait .hetaen-masthead__photo {
		flex-basis: auto;
		width: 100%;
		max-width: 460px;
	}
}

/* --- 横写真版 --- */
.hetaen-masthead--horizontal > .wp-block-group__inner-container {
	padding: 28px 0 var(--sp-l);
}
.hetaen-masthead--horizontal .hetaen-masthead__photo {
	margin: 0;
}
.hetaen-masthead--horizontal .hetaen-masthead__photo img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.hetaen-masthead--horizontal .hetaen-masthead__cols > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-l);
	align-items: start;
	margin-top: var(--sp-m);
}
.hetaen-masthead--horizontal .hetaen-masthead__summary {
	margin-top: 0;
	max-width: none;
}

@media (max-width: 820px) {
	.hetaen-masthead--horizontal .hetaen-masthead__cols > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: var(--sp-m);
	}
}

/* =========================================================
   8. 年区切り
   ========================================================= */
.hetaen-year {
	margin: 0;
	padding: var(--sp-xl) 0 4px;
	border-bottom: 1px solid var(--line2);
}
.hetaen-year__num {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--fs-d-year);
	letter-spacing: var(--ls-body);
	color: var(--ink);
}

/* =========================================================
   9. 植物一覧（学名順／和名順タブ）
   ========================================================= */
.hetaen-lead {
	padding: 38px 0 0;
}
.hetaen-lead__title {
	margin: 0;
	font-family: var(--mincho);
	font-size: var(--fs-hero);
	font-weight: 500;
	letter-spacing: var(--ls-wide);
}

.hetaen-tabs {
	display: flex;
	border-bottom: 1px solid var(--line);
	margin: var(--sp-m) 0;
}
.hetaen-tabs__btn {
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	font-family: var(--mincho);
	font-size: var(--fs-lead);
	letter-spacing: var(--ls-wide);
	color: var(--faint);
	padding: 12px 0;
	margin-right: var(--sp-l);
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	transition: color var(--mo-fast) ease;
}
.hetaen-tabs__btn.is-active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}
.hetaen-tabs__btn:hover {
	color: var(--ink);
}

.hetaen-idx {
	margin: 0 0 var(--sp-m);
	font-family: var(--serif);
	font-size: var(--fs-lead);
}
.hetaen-idx a {
	text-decoration: none;
	padding: 0 8px;
}
.hetaen-idx a:hover {
	text-decoration: underline;
}
.hetaen-idx__off {
	color: var(--line2);
	padding: 0 8px;
}

.hetaen-sec {
	font-family: var(--serif);
	font-size: var(--fs-d-year);
	font-weight: normal;
	color: var(--sub);
	border-bottom: 1px solid var(--line);
	margin: var(--sp-xl) 0 var(--sp-m);
	padding-bottom: 8px;
}

.hetaen-plist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sp-l);
}
.hetaen-plist li {
	text-align: center;
}
.hetaen-plist a {
	text-decoration: none;
	display: block;
}
.hetaen-plist__ph {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: repeating-linear-gradient(45deg, #f1ece8, #f1ece8 10px, #eae3de 10px, #eae3de 20px);
	transition: transform var(--mo-base) ease;
}
.hetaen-plist a:hover .hetaen-plist__ph {
	transform: scale(1.05);
}
.hetaen-plist__sci {
	display: block;
	margin-top: 9px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-min);
	color: var(--sub);
	line-height: 1.5;
}
.hetaen-plist__ja {
	display: block;
	margin-top: 3px;
	font-size: var(--fs-sub);
	line-height: 1.5;
}

.hetaen-klist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--sp-l);
}
.hetaen-klist a {
	display: flex;
	align-items: baseline;
	gap: var(--sp-s);
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--mo-fast) ease;
}
.hetaen-klist a:hover {
	background: var(--bg-card);
}
.hetaen-klist__ja {
	font-size: var(--fs-lead);
}
.hetaen-klist__sci {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-sub);
	color: var(--sub);
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 820px) {
	.hetaen-plist {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-m);
	}
	.hetaen-klist {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 520px) {
	.hetaen-plist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================
   10. トップページ
   ========================================================= */

/* --- ヒーロー --- */
.hetaen-herowrap {
	padding: 20px var(--pad) 0;
	max-width: var(--w-full);
	margin: 0 auto;
}
.hetaen-hero {
	position: relative;
	width: 100%;
	height: 60vh;
	min-height: 300px;
	max-height: 700px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #141414;
}
.hetaen-hero__pic {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .5);
	font-size: var(--fs-min);
	letter-spacing: var(--ls-wider);
	opacity: 0;
	transition: opacity var(--mo-slow) ease;
}
.hetaen-hero__pic.is-show {
	opacity: 1;
}

/* --- キャッチ --- */
.hetaen-statement {
	text-align: center;
	padding: var(--sp-xl) 24px var(--sp-xl);
}
.hetaen-statement__ja {
	display: block;
	font-family: var(--mincho);
	font-size: var(--fs-d-catch);
	line-height: 2.1;
	letter-spacing: var(--ls-wide);
}
.hetaen-statement__en {
	margin-top: var(--sp-m);
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--fs-sub);
	color: var(--sub);
	line-height: 2;
}

/* --- 入口3つ --- */
.hetaen-enter {
	max-width: var(--w-mid);
	margin: var(--sp-l) auto 0;
	padding: 0 var(--pad);
}
.hetaen-enter a {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	align-items: stretch;
	padding: var(--sp-m) 2px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	transition: background var(--mo-fast) ease;
}
.hetaen-enter a:first-of-type {
	border-top: 1px solid var(--line);
}
.hetaen-enter a:hover {
	background: var(--bg-card);
}
.hetaen-enter__hd {
	text-align: right;
	padding-right: var(--sp-m);
}
.hetaen-enter__en {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--fs-min);
	color: var(--faint);
	letter-spacing: var(--ls-body);
}
.hetaen-enter__ja {
	display: block;
	margin-top: 3px;
	font-family: var(--mincho);
	font-size: var(--fs-lead);
	line-height: 1.5;
	letter-spacing: var(--ls-wider);
}
.hetaen-enter__note {
	font-size: var(--fs-sub);
	color: var(--sub);
	padding-left: var(--sp-m);
	border-left: 1px solid var(--line);
	display: flex;
	align-items: flex-end;
	line-height: 1.5;
	padding-bottom: 2px;
}

/* --- 最新の記録（2列・同じ高さ） --- */
.hetaen-latest {
	padding: var(--sp-xl) var(--pad) var(--sp-l);
	max-width: var(--w-full);
	margin: 0 auto;
}
.hetaen-latest__lbl {
	text-align: center;
	font-family: var(--mincho);
	font-size: var(--fs-lead);
	letter-spacing: var(--ls-wider);
	margin-bottom: var(--sp-l);
}
.hetaen-rowgrid {
	max-width: var(--w-mid);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-xl) var(--sp-l);
	align-items: stretch;
}
.hetaen-rowgrid a {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: var(--sp-s);
	text-decoration: none;
	align-items: start;
}
.hetaen-rowgrid a:hover .hetaen-rowgrid__ttl {
	text-decoration: underline;
}
.hetaen-rowgrid__im {
	display: block;
	width: 112px;
	height: 112px;
	border-radius: var(--radius);
	overflow: hidden;
	background: repeating-linear-gradient(45deg, #f1ece8, #f1ece8 10px, #eae3de 10px, #eae3de 20px);
}
.hetaen-rowgrid__im img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mo-base) ease;
}
.hetaen-rowgrid a:hover .hetaen-rowgrid__im img {
	transform: scale(1.06);
}
.hetaen-rowgrid__bd {
	min-width: 0;
}
.hetaen-rowgrid__k {
	font-size: var(--fs-min);
	color: var(--faint);
	letter-spacing: var(--ls-wide);
}
.hetaen-rowgrid__ttl {
	display: block;
	margin-top: 3px;
	font-size: var(--fs-body);
	line-height: 1.6;
}
.hetaen-rowgrid__ex {
	display: -webkit-box;
	margin-top: 6px;
	font-size: var(--fs-sub);
	color: var(--sub);
	line-height: 1.85;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- このサイトについて --- */
.hetaen-about {
	max-width: var(--w-mid);
	margin: var(--sp-xl) auto 0;
	padding: 0 var(--pad);
}
.hetaen-about__rule {
	height: 1px;
	background: var(--line);
}
.hetaen-about__inner {
	padding: var(--sp-l) 0 0;
}
.hetaen-about h2 {
	margin: 0;
	font-family: var(--mincho);
	font-size: var(--fs-lead);
	letter-spacing: var(--ls-wider);
	font-weight: 500;
}
.hetaen-about p {
	margin: var(--sp-s) 0 0;
	font-size: var(--fs-sub);
	color: var(--sub);
	line-height: 2;
}

@media (max-width: 880px) {
	.hetaen-rowgrid {
		grid-template-columns: 1fr;
		gap: var(--sp-m);
		max-width: 520px;
	}
}
@media (max-width: 820px) {
	.hetaen-enter a {
		grid-template-columns: 1fr;
	}
	.hetaen-enter__hd {
		text-align: left;
		padding-right: 0;
	}
	.hetaen-enter__note {
		border-left: none;
		padding-left: 0;
		margin-top: 6px;
		display: block;
	}
	.hetaen-statement__ja {
		font-size: var(--fs-h2);
	}
	.hetaen-hero {
		height: 38vh;
		min-height: 200px;
	}
}

/* =========================================================
   11. 検索結果
   ========================================================= */
.hetaen-lead__title--h2 {
	font-size: var(--fs-h2);
}
.hetaen-lead__count {
	margin-top: 8px;
	font-size: var(--fs-sub);
	color: var(--sub);
}

.hetaen-gh {
	display: flex;
	align-items: baseline;
	gap: var(--sp-s);
	border-bottom: 1px solid var(--line);
	padding-bottom: 10px;
	margin-top: var(--sp-l);
}
.hetaen-gh__ja {
	font-family: var(--mincho);
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-wider);
}
.hetaen-gh__en {
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--fs-min);
	color: var(--faint);
}
.hetaen-gh__n {
	margin-left: auto;
	font-size: var(--fs-sub);
	color: var(--faint);
}

.hetaen-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-m) var(--sp-l);
	padding: var(--sp-m) 0 0;
}
.hetaen-item {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: var(--sp-s);
	text-decoration: none;
	align-items: start;
}
.hetaen-item:hover .hetaen-item__ttl {
	text-decoration: underline;
}
.hetaen-item__im {
	display: block;
	width: 112px;
	height: 112px;
	border-radius: var(--radius);
	overflow: hidden;
	background: repeating-linear-gradient(45deg, #f1ece8, #f1ece8 10px, #eae3de 10px, #eae3de 20px);
}
.hetaen-item__im img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hetaen-item__ttl {
	font-size: var(--fs-body);
	line-height: 1.6;
}
.hetaen-item__la {
	display: block;
	margin-top: 4px;
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--fs-min);
	color: var(--faint);
}
.hetaen-item__ex {
	display: -webkit-box;
	margin-top: 5px;
	font-size: var(--fs-sub);
	color: var(--sub);
	line-height: 1.85;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hetaen-item__ttl mark,
.hetaen-item__ex mark {
	background: var(--mark);
	color: inherit;
	padding: 0 1px;
}

@media (max-width: 820px) {
	.hetaen-items {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   12. ヘッダー常設の検索ボックス
   ========================================================= */
.hetaen-hsearch {
	margin-left: var(--sp-l);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--line);
	background: var(--bg-card);
	border-radius: var(--radius-pill);
	padding: 7px 14px;
	width: 200px;
}
.hetaen-hsearch:focus-within {
	border-color: var(--line2);
}
.hetaen-hsearch svg {
	width: 15px;
	height: 15px;
	color: var(--faint);
	flex: 0 0 auto;
}
.hetaen-hsearch input {
	border: none;
	outline: none;
	background: transparent;
	font: inherit;
	font-family: var(--sans);
	font-size: var(--fs-sub);
	width: 100%;
	letter-spacing: var(--ls-body);
	color: var(--ink);
}

@media (max-width: 820px) {
	.hetaen-hsearch {
		width: 130px;
		margin-left: var(--sp-s);
		padding: 6px 12px;
	}
}