/*
Theme Name: 中川建築（Lightning 子テーマ）
Theme URI: https://wp.norikaeweb.com/
Description: Lightning の子テーマ。Astro 版の工務店サンプル（norikaeweb.com/samples/koumuten/）と同じ体裁に寄せるための CSS だけを持つ。親テーマの機能には手を入れていないので、Lightning の更新をそのまま受けられる。
Author: 森田浩介
Template: lightning
Version: 2.0.0
Text Domain: koumuten-child
*/

/* ==================================================================
   Astro 版（SampleBase.astro の body[data-theme="koumuten"]）の値をそのまま持ってきている。
   コンセプトは「書籍のような縦長レイアウト、明朝、直角の輪郭」。
   角丸を作らない・影を落とさない・線は細く、が全体の約束。
   ================================================================== */
:root {
	--k-accent: #5a3e2b;
	--k-accent-ink: #ffffff;
	--k-surface: #f3ede5;
	--k-surface-low: #faf6f0;
	--k-ink: #2a201a;
	--k-ink-2: #6b5d52;
	--k-line: rgba(0, 0, 0, .08);
	--k-line-strong: rgba(0, 0, 0, .18);
	--k-hero-from: #6b4a30;
	--k-hero-to: #2a1d12;
	--k-mincho: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--k-gothic: "Hanken Grotesk", "Noto Sans JP", sans-serif;
	--k-container: 1280px;
	/* ヘッダーの高さ。本文の上余白とアンカーの着地位置に同じ値を使う。 */
	--k-header-h: 76px;
	/* 画面上部の帯は置いていない（下の「制作サンプルであることの表示」参照）。
	   0 のままにしておけば、ヘッダーの位置も本文の上余白もヘッダーの高さだけで決まる。 */
	--k-ribbon-h: 0px;
}

@media (max-width: 900px) {
	:root {
		--k-header-h: 60px;
	}
}

/* 明朝が全面。ここが Astro 版のいちばん大きな特徴で、ゴシックのままだと別物に見える。 */
body {
	font-family: var(--k-mincho);
	letter-spacing: .02em;
	line-height: 1.7;
	color: var(--k-ink);
	background: #fff;
	/* iOS Safari は横向きなどで文字を勝手に拡大する。
	   固定ヘッダーの高さ計算が狂うので止める。 */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* 角丸を全部落とす（直角の輪郭で通す） */
.entry-body .wp-block-button__link,
.entry-body .wp-block-image img,
.entry-body input,
.entry-body select,
.entry-body textarea {
	border-radius: 0;
}

/* ------------------------------------------------------------------
   ヘッダー。細い線1本で区切り、屋号は明朝、ナビは字間を広げた明朝。
   ------------------------------------------------------------------ */
.site-header {
	background: #fff;
	backdrop-filter: none;
	border-bottom: 1px solid var(--k-ink);
	box-shadow: none;
}

.site-header-logo a {
	font-family: var(--k-mincho);
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--k-ink);
	line-height: 1.05;
}

/* 屋号の下のローマ字。Astro 版の .s-brand .b2 にあたる */
.site-header-logo a::after {
	content: "NAKAGAWA CONSTRUCTION";
	display: block;
	font-family: var(--k-gothic);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .3em;
	color: var(--k-ink-2);
	margin-top: 6px;
}

.global-nav-list > li > a {
	font-family: var(--k-mincho);
	font-size: 14px;
	letter-spacing: .15em;
	color: var(--k-ink-2);
}

.global-nav-list > li > a:hover,
.global-nav-list > li.current-menu-item > a {
	color: var(--k-ink);
}

/* ナビ最後の「お問い合わせ」だけ枠付きのボタンにする（Astro 版の .s-cta） */
.global-nav-list > li.k-nav-cta > a {
	border: 1px solid var(--k-ink);
	color: var(--k-ink);
	padding: 11px 18px;
	font-size: 13px;
}

.global-nav-list > li.k-nav-cta > a:hover {
	background: var(--k-ink);
	color: #fff;
}

/* ------------------------------------------------------------------
   本文の器。Astro はセクションを全幅で敷き、中身だけ 1280px に収める。
   ------------------------------------------------------------------ */
.home .site-body {
	/* Lightning が本文の上に取る 48px。トップは1枚目が写真なので消す。 */
	padding-top: 0;
}

.home .site-body-container {
	padding: 0;
	max-width: none;
	width: 100%;
}

.home .main-section {
	width: 100%;
	max-width: none;
	padding: 0;
}

.entry-body > .wp-block-group.alignfull > * {
	max-width: var(--k-container);
	margin-left: auto;
	margin-right: auto;
}

.entry-body > .wp-block-group.alignfull {
	padding-left: max(4vw, 16px);
	padding-right: max(4vw, 16px);
}

/* セクションの境目に細い線（Astro の .s-section + .s-section） */
.entry-body > .wp-block-group.alignfull + .wp-block-group.alignfull {
	border-top: 1px solid var(--k-line);
}

/* ------------------------------------------------------------------
   ヒーロー。写真の上に左寄せで置く。暗幕は左から右へ薄くなる斜めのグラデーション。
   ------------------------------------------------------------------ */
.entry-body .k-hero {
	margin: 0;
	padding: 120px max(4vw, 16px) 80px;
	align-items: center;
}

.entry-body .k-hero .wp-block-cover__background {
	/* 左から右へ薄くなる斜めの暗幕。WordPress が付ける opacity を打ち消して使う。 */
	background: linear-gradient(100deg, rgba(42, 29, 18, .88) 0%, rgba(42, 29, 18, .55) 55%, rgba(42, 29, 18, .32) 100%) !important;
	opacity: 1 !important;
}

.entry-body .k-hero .wp-block-cover__inner-container {
	max-width: var(--k-container);
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

.entry-body p.k-hero-eyebrow {
	font-family: var(--k-gothic);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	margin: 0 0 32px;
}

.entry-body h1.k-hero-title {
	font-family: var(--k-mincho);
	font-weight: 500;
	font-size: clamp(34px, 5.2vw, 64px);
	line-height: 1.6;
	letter-spacing: .12em;
	color: #fff;
	border: 0;
	padding: 0;
	margin: 0 0 32px;
	background: none;
}

.entry-body p.k-hero-sub {
	font-family: var(--k-mincho);
	font-size: 16px;
	line-height: 2.1;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .86);
	max-width: 560px;
	margin: 0 0 48px !important;
}

.entry-body .k-hero-cta .wp-block-button__link {
	background: #fff;
	color: var(--k-ink);
	font-family: var(--k-gothic);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	padding: 16px 32px;
	border: 0;
}

.entry-body .k-hero-cta .wp-block-button__link:hover {
	opacity: .9;
}

/* ------------------------------------------------------------------
   セクションの見出し。左に細い縦罫を引き、その内側にラベルと見出しを置く。
   Astro 版で一番目を引く要素なので、ここを外すと別物になる。
   ------------------------------------------------------------------ */
.entry-body .k-sect-head {
	/* 全幅グループの直下は 1280px に揃えているので、そこだけ打ち消す */
	max-width: 780px !important;
	padding-left: 32px;
	border-left: 1px solid var(--k-accent);
	margin-bottom: 72px;
	margin-left: 0 !important;
}

.entry-body p.k-eyebrow {
	font-family: var(--k-mincho);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .5em;
	text-transform: uppercase;
	color: var(--k-ink-2);
	margin: 0 0 16px;
}

.entry-body .k-sect-head h2.wp-block-heading {
	font-family: var(--k-mincho);
	font-weight: 500;
	font-size: clamp(32px, 4.6vw, 52px);
	line-height: 1.55;
	letter-spacing: .08em;
	color: var(--k-ink);
	/* Lightning は h2 に上下の枠線と背景を付ける。ここでは全部落とす。 */
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.entry-body .k-sect-head p.k-lead {
	margin-top: 24px;
	margin-bottom: 0;
}

.entry-body p.k-lead {
	font-family: var(--k-mincho);
	font-size: 17px;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--k-ink-2);
	max-width: 680px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 24px;
}

.entry-body .k-rule {
	border: 0;
	border-top: 1px solid var(--k-line);
	margin: 64px 0;
	opacity: 1;
	max-width: none !important;
}

/* ------------------------------------------------------------------
   会社概要。左に文章、右に罫線だけの一覧表。
   ------------------------------------------------------------------ */
.entry-body .wp-block-columns {
	gap: 64px;
	margin-top: 0;
}

.entry-body .wp-block-table.k-info table {
	border-collapse: collapse;
	border: 0;
	border-top: 1px solid var(--k-ink);
}

.entry-body .wp-block-table.k-info td {
	border: 0;
	border-bottom: 1px solid var(--k-line);
	padding: 16px 0;
	vertical-align: top;
}

.entry-body .wp-block-table.k-info td:first-child {
	width: 140px;
	font-family: var(--k-gothic);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--k-accent);
	padding-top: 19px;
}

.entry-body .wp-block-table.k-info td:last-child {
	font-family: var(--k-mincho);
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--k-ink);
}

/* ------------------------------------------------------------------
   施工事例のカード。
   茶色の枠のなかに写真を落とし込み、その下に白い明朝で屋号を置く。枠線も影も無し。
   ------------------------------------------------------------------ */
.entry-body .k-cards {
	gap: 48px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-body .k-cards > li {
	background: none;
	border: 0;
	padding: 0;
	transition: opacity .25s;
}

.entry-body .k-cards > li:hover {
	opacity: .78;
	transform: none;
	box-shadow: none;
}

.entry-body .k-thumb {
	position: relative;
	background: linear-gradient(135deg, var(--k-hero-from) 0%, var(--k-hero-to) 100%);
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0;
}

.entry-body .k-thumb .k-photo {
	margin: 0 0 16px;
	flex: 1;
	min-height: 0;
	width: 100%;
}

.entry-body .k-thumb .k-photo a,
.entry-body .k-thumb .k-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entry-body .k-thumb .k-photo img {
	filter: saturate(.6) contrast(1.04);
	aspect-ratio: auto !important;
}

/* 所在地のラベル。写真の左上に重ねる。 */
.entry-body .k-thumb .k-tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: rgba(255, 255, 255, .92);
	color: var(--k-ink);
	font-family: var(--k-mincho);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	padding: 6px 12px;
	margin: 0;
}

.entry-body .k-thumb .k-tag a {
	color: inherit;
	text-decoration: none;
}

.entry-body h3.k-card-title {
	font-family: var(--k-mincho);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: .05em;
	color: #fff;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.entry-body h3.k-card-title a {
	color: #fff;
	text-decoration: none;
}

/* 写真の下。区切り線から下が本文側。 */
.entry-body .k-cards .k-meta {
	display: block;
	font-family: var(--k-gothic);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .15em;
	color: var(--k-accent);
	border-top: 1px solid var(--k-ink);
	padding-top: 20px;
	margin-top: 0;
}

.entry-body .k-cards .k-meta::after {
	content: " 引き渡し";
}

.entry-body .k-cards .k-summary {
	margin: 8px 0 0;
}

.entry-body .k-cards .k-summary p {
	font-family: var(--k-mincho);
	font-size: 14px;
	line-height: 2;
	letter-spacing: .02em;
	color: var(--k-ink-2);
	margin: 0;
}

.entry-body .k-cards .k-more {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--k-mincho);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .15em;
	color: var(--k-ink);
	text-decoration: none;
}

.entry-body .k-cards .k-more::after {
	content: " →";
}

/* 「施工事例をすべて見る」 */
.entry-body .k-btn .wp-block-button__link {
	background: transparent;
	color: var(--k-ink);
	border: 1px solid var(--k-ink);
	font-family: var(--k-mincho);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .15em;
	padding: 16px 32px;
}

.entry-body .k-btn .wp-block-button__link::after {
	content: " →";
}

.entry-body .k-btn .wp-block-button__link:hover {
	background: var(--k-ink);
	color: #fff;
}

.entry-body .wp-block-buttons {
	margin-top: 48px;
}

/* ------------------------------------------------------------------
   お知らせ。日付はサンセリフの茶色、見出しは明朝。行は罫線1本で区切る。
   ------------------------------------------------------------------ */
.entry-body .k-news-list {
	margin: 0;
	padding: 0;
	gap: 0;
	list-style: none;
	border-top: 1px solid var(--k-ink);
}

.entry-body .k-news-list > li {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--k-line);
	padding: 28px 0;
	margin: 0;
}

.entry-body .k-news-list > li:hover {
	opacity: 1;
	transform: none;
	box-shadow: none;
}

.entry-body .k-news-list .wp-block-group {
	display: flex;
	gap: 32px;
	align-items: baseline;
	padding: 0;
	border: 0;
}

.entry-body .k-news-list .wp-block-post-date {
	flex: 0 0 120px;
	font-family: var(--k-gothic);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--k-accent);
	margin: 0;
}

.entry-body .k-news-list h3.wp-block-post-title {
	font-family: var(--k-mincho);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .04em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.entry-body .k-news-list h3.wp-block-post-title a {
	color: var(--k-ink);
	text-decoration: none;
}

.entry-body .k-news-list h3.wp-block-post-title a:hover {
	color: var(--k-ink-2);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------------
   お問い合わせ。左に連絡先、右に白い枠のフォーム。
   ------------------------------------------------------------------ */
.entry-body .k-contact-grid {
	gap: 64px;
}

.entry-body .k-crow {
	position: relative;
	padding: 0 0 20px 36px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--k-line);
}

.entry-body .k-crow:last-child {
	border-bottom: 0;
}

/* 行頭のアイコン。Material Symbols の合字で出しているので画像を持たない。 */
.entry-body .k-crow::before {
	position: absolute;
	left: 0;
	top: 2px;
	font-family: "Material Symbols Outlined";
	font-size: 22px;
	line-height: 1;
	color: var(--k-accent);
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.entry-body .k-crow.is-mail::before { content: "mail"; }
.entry-body .k-crow.is-tel::before { content: "call"; }
.entry-body .k-crow.is-place::before { content: "location_on"; }
.entry-body .k-crow.is-hours::before { content: "schedule"; }

.entry-body p.k-lab {
	font-family: var(--k-gothic);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--k-ink-2);
	margin: 0 0 4px;
}

.entry-body p.k-val {
	font-family: var(--k-gothic);
	font-size: 16px;
	line-height: 1.6;
	color: var(--k-ink);
	margin: 0;
	word-break: break-all;
}

/* ------------------------------------------------------------------
   Contact Form 7。白地に細い枠、角はゼロ。
   ------------------------------------------------------------------ */
.entry-body .wpcf7 {
	background: #fff;
	border: 1px solid var(--k-ink);
	padding: 40px;
}

.entry-body .wpcf7 label {
	display: block;
	font-family: var(--k-gothic);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--k-ink);
	margin-bottom: 20px;
}

.entry-body .wpcf7 .req {
	display: inline-block;
	font-family: var(--k-gothic);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--k-accent);
	border: 1px solid var(--k-accent);
	padding: 2px 6px;
	margin-left: 8px;
	vertical-align: middle;
}

.entry-body .wpcf7 input[type="text"],
.entry-body .wpcf7 input[type="email"],
.entry-body .wpcf7 input[type="tel"],
.entry-body .wpcf7 select,
.entry-body .wpcf7 textarea {
	width: 100%;
	margin-top: 8px;
	border: 1px solid var(--k-line-strong);
	background: #fff;
	padding: 14px 16px;
	font-family: var(--k-mincho);
	font-size: 15px;
	color: var(--k-ink);
}

.entry-body .wpcf7 textarea {
	min-height: 160px;
}

.entry-body .wpcf7 input[type="submit"] {
	background: var(--k-ink);
	color: #fff;
	border: 0;
	font-family: var(--k-mincho);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .15em;
	padding: 16px 40px;
	cursor: pointer;
}

.entry-body .wpcf7 input[type="submit"]:hover {
	background: var(--k-accent);
}

/* ------------------------------------------------------------------
   施工事例の詳細ページ。写真を主役に、文章は補足に留める。
   ------------------------------------------------------------------ */
.single .site-body-container,
.archive .site-body-container {
	max-width: var(--k-container);
	padding: 72px max(4vw, 16px) 120px;
}

.single .entry-title,
.archive .entry-title {
	font-family: var(--k-mincho);
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.55;
}

.single .entry-body h2.wp-block-heading {
	font-family: var(--k-mincho);
	font-weight: 500;
	font-size: 22px;
	letter-spacing: .08em;
	line-height: 1.5;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--k-line);
	padding: 0 0 14px;
	margin: 64px 0 20px;
}

.single .entry-body h3.wp-block-heading {
	font-family: var(--k-mincho);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: .06em;
	margin: 40px 0 14px;
	border: 0;
	background: none;
	padding: 0;
}

.single .entry-body p,
.single .entry-body li {
	font-family: var(--k-mincho);
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--k-ink-2);
}

.single .entry-body .wp-block-image,
.single .entry-body .wp-block-gallery {
	margin: 32px 0;
}

.entry-body figcaption,
.entry-body .wp-element-caption {
	font-family: var(--k-mincho);
	font-size: 13px;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--k-ink-2);
	margin-top: 10px;
	text-align: left;
}

.single .entry-body .wp-block-table table {
	border-collapse: collapse;
	border: 0;
	border-top: 1px solid var(--k-ink);
}

.single .entry-body .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--k-line);
	padding: 16px 0;
	font-family: var(--k-mincho);
	letter-spacing: .04em;
	vertical-align: top;
}

.single .entry-body .wp-block-table td:first-child {
	width: 160px;
	font-family: var(--k-gothic);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--k-accent);
	padding-top: 19px;
}

.entry-body .wp-block-quote {
	border: 0;
	border-left: 1px solid var(--k-accent);
	background: var(--k-surface-low);
	padding: 28px 32px;
	margin: 40px 0;
}

.entry-body .wp-block-quote p {
	font-family: var(--k-mincho);
	font-size: 17px;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--k-ink);
	margin: 0;
}

/* 施工事例の一覧（アーカイブ）も、トップと同じ字づかいにする */
.card,
.media {
	border-radius: 0;
}

.card-intro-title,
.media-title {
	font-family: var(--k-mincho);
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.6;
}

.card-intro-summary,
.media-body {
	font-family: var(--k-mincho);
	line-height: 2;
	letter-spacing: .02em;
	color: var(--k-ink-2);
}

/* ------------------------------------------------------------------
   フッター
   ------------------------------------------------------------------ */
.site-footer {
	background: var(--k-ink);
	color: rgba(255, 255, 255, .72);
}

.site-footer a,
.site-footer .site-footer-copyright {
	color: rgba(255, 255, 255, .72);
}

/* ------------------------------------------------------------------
   スマートフォン。Astro 版と同じく、スマホでの見え方を基準にしている。
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.entry-body > .wp-block-group.alignfull {
		padding-top: 72px !important;
		padding-bottom: 72px !important;
	}

	.entry-body .k-sect-head {
		margin-bottom: 48px;
		padding-left: 20px;
	}

	.entry-body .k-hero {
		padding: 96px max(4vw, 16px) 64px;
	}

	.entry-body .wp-block-columns,
	.entry-body .k-contact-grid {
		gap: 48px;
	}

	.entry-body .k-news-list .wp-block-group {
		flex-direction: column;
		gap: 6px;
	}

	.entry-body .k-news-list .wp-block-post-date {
		flex: none;
	}

	.entry-body .wp-block-table.k-info td:first-child {
		width: 34%;
	}

	.entry-body .wpcf7 {
		padding: 24px;
	}
}

/* ------------------------------------------------------------------
   施工事例の一覧（/works/）の絞り込みリンク。
   [koumuten_work_filter] が出す部分。丸みのある札を横に並べる。
   ------------------------------------------------------------------ */
.entry-body .k-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
}

.entry-body .k-chip {
	display: inline-block;
	border: 1px solid var(--k-line-strong);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: var(--k-mincho);
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--k-ink);
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}

.entry-body .k-chip:hover {
	border-color: var(--k-ink);
}

.entry-body .k-chip.is-current {
	background: var(--k-accent);
	border-color: var(--k-accent);
	color: #fff;
}

.entry-body .k-count {
	font-family: var(--k-mincho);
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--k-ink-2);
	margin: 0 0 32px;
}

/* 下層ページは本文を 1280px に収める。
   トップページだけは全幅のセクションを敷くので、:not(.home) で外す。 */
.page-template-default:not(.home) .site-body-container,
.tax-work_type .site-body-container,
.tax-work_area .site-body-container {
	max-width: var(--k-container);
	padding: 72px max(4vw, 16px) 120px;
}

.entry-body h1.wp-block-heading {
	font-family: var(--k-mincho);
	font-weight: 500;
	font-size: clamp(32px, 4.6vw, 52px);
	line-height: 1.55;
	letter-spacing: .08em;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

/* ページ送り */
.entry-body .k-pager {
	margin-top: 64px;
	justify-content: center;
	gap: 16px;
	font-family: var(--k-mincho);
	letter-spacing: .08em;
}

/* ------------------------------------------------------------------
   施工事例の詳細ページ。Astro 版は濃い帯を持たず、
   「引き渡しの年月 → 屋号 → 所在地と工事の種類 → 大きな写真」の順で始まる。
   ------------------------------------------------------------------ */
.page-header {
	display: none;
}

.single-works .entry-header {
	display: flex;
	flex-direction: column;
	margin-bottom: 40px;
}

/* 日付を屋号の上に出す */
.single-works .entry-meta {
	order: -1;
	margin: 0 0 12px;
	border: 0;
	padding: 0;
}

.single-works .entry-meta-item-date {
	font-family: var(--k-gothic);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--k-accent);
}

.single-works .entry-meta-item-date i {
	display: none;
}

.single-works .entry-meta-item-date::after {
	content: " 引き渡し";
}

.single-works .entry-title {
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: .1em;
	margin: 0;
}

/* 所在地と工事の種類を、丸い札で並べる */
.single-works .entry-meta-data-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 16px 0 0;
	font-family: var(--k-mincho);
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--k-ink-2);
}

.single-works .entry-meta-data-list__title {
	display: none;
}

.single-works .entry-meta-data-list a {
	display: inline-block;
	border: 1px solid var(--k-line-strong);
	border-radius: 999px;
	padding: 6px 14px;
	color: var(--k-ink-2);
	text-decoration: none;
}

.single-works .entry-meta-data-list a:hover {
	border-color: var(--k-ink);
	color: var(--k-ink);
}

/* 前後の記事送りと関連記事は、Astro 版に無いので静かにする */
.single-works .prev-next-nav,
.single-works .more-posts {
	border-top: 1px solid var(--k-line);
	padding-top: 40px;
	margin-top: 80px;
	font-family: var(--k-mincho);
	letter-spacing: .04em;
}

/* 所在地と工事の種類は Lightning が本文の下（.entry-footer）に出す。
   Astro 版と同じく屋号の直下へ上げ、丸い札を横に並べる。 */
.single-works .entry {
	display: flex;
	flex-direction: column;
}

.single-works .entry-header { order: 1; margin-bottom: 14px; }
.single-works .entry-footer { order: 2; margin: 0; }
.single-works .entry-body   { order: 3; margin-top: 28px; }

.single-works .entry-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.single-works .entry-meta-data-list {
	margin: 0;
}

.single-works .entry-meta-data-list dl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/* 「工事の種類」「エリア」という見出しは、札を見れば分かるので落とす */
.single-works .entry-meta-data-list dt {
	display: none;
}

.single-works .entry-meta-data-list dd {
	margin: 0;
}

.single-works .entry-meta-data-list dd a {
	display: inline-block;
	border: 1px solid var(--k-line-strong);
	border-radius: 999px;
	padding: 6px 14px;
	font-family: var(--k-mincho);
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--k-ink-2);
	text-decoration: none;
}

.single-works .entry-meta-data-list dd a:hover {
	border-color: var(--k-ink);
	color: var(--k-ink);
}

/* 前後の記事送りと関連記事は、Astro 版に無いので静かにする */
.single-works .next-prev,
.single-works .vk_posts {
	font-family: var(--k-mincho);
	letter-spacing: .04em;
}

/* ------------------------------------------------------------------
   フッター。Astro 版と同じく、濃い茶色に屋号とリンクを並べる。
   ------------------------------------------------------------------ */
.site-footer {
	background: var(--k-ink);
	color: rgba(255, 255, 255, .72);
	padding: 72px 0 0;
	border: 0;
}

.site-footer a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer .k-foot-brand .b1 {
	display: block;
	font-family: var(--k-mincho);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: .12em;
	color: #fff;
}

.site-footer .k-foot-brand .b2 {
	display: block;
	font-family: var(--k-gothic);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .3em;
	color: rgba(255, 255, 255, .5);
	margin-top: 8px;
}

.site-footer h3 {
	font-family: var(--k-gothic);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: none;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer li {
	margin-bottom: 12px;
	font-family: var(--k-mincho);
	font-size: 14px;
	letter-spacing: .06em;
}

.site-footer p {
	font-family: var(--k-mincho);
	font-size: 14px;
	line-height: 2;
	letter-spacing: .04em;
	margin: 0;
}

.site-footer-copyright {
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin-top: 56px;
	padding: 24px 0;
	font-family: var(--k-gothic);
	font-size: 11px;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .45);
}

/* 「Powered by WordPress with Lightning Theme…」の行は出さない */
.site-footer-copyright p:last-child {
	display: none;
}

/* ------------------------------------------------------------------
   お知らせの詳細ページ。工務店のサイトに要らないものを出さない。
   ・カテゴリーは1つしか使わないので表示しない
   ・SNSの共有ボタンとフォロー枠は ExUnit プラグインごと止めてある
   ・コメント欄は WordPress 側で閉じてある
   ------------------------------------------------------------------ */
.single-post .entry-meta-data-list--category,
.single-post .entry-footer {
	display: none;
}

.single-post .entry-title {
	font-family: var(--k-mincho);
	font-weight: 500;
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.6;
	letter-spacing: .08em;
	margin: 0 0 12px;
}

.single-post .entry-meta {
	font-family: var(--k-gothic);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--k-accent);
	border: 0;
	padding: 0;
	margin: 0 0 32px;
}

.single-post .entry-meta i {
	display: none;
}

/* 前後の記事送り・関連記事の見出し */
.single .vk_posts .vk_post-title,
.single .vk_posts .vk_post_title {
	font-family: var(--k-mincho);
	font-weight: 500;
	letter-spacing: .04em;
}

/* 中身を持たない差し込み用ウィジェットは場所も取らない */
.koumuten-blank,
.site-body-bottom:empty {
	display: none;
}

/* ------------------------------------------------------------------
   施工事例の詳細ページの節。Astro 版は「間取り」と「本文」に生成り色を敷き、
   写真の節を白で挟んで、上から下へ読ませる作りになっている。
   ------------------------------------------------------------------ */
.single-works .entry-body .k-sec {
	padding: 96px max(4vw, 16px);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.single-works .entry-body .k-sec > * {
	max-width: var(--k-container);
	margin-left: auto;
	margin-right: auto;
}

.single-works .entry-body .k-sec.is-low {
	background: var(--k-surface-low);
}

.single-works .entry-body .k-sec .k-sect-head {
	max-width: 780px !important;
	margin-left: 0 !important;
	padding-left: 32px;
	border-left: 1px solid var(--k-accent);
	margin-bottom: 56px;
}

.single-works .entry-body .k-sec .k-sect-head h2.wp-block-heading {
	font-size: clamp(26px, 3.4vw, 38px);
	letter-spacing: .1em;
	border: 0;
	padding: 0;
	margin: 0;
}

/* 冒頭の大きな写真 */
.single-works .entry-body .k-main {
	margin: 0 0 32px;
}

.single-works .entry-body .k-main img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.single-works .entry-body p.k-lead {
	font-size: 17px;
	margin-bottom: 0;
}

/* 間取り。白い枠に図面を置き、上に BEFORE / AFTER の札を出す */
.single-works .k-fp-row {
	gap: 20px;
	align-items: stretch;
}

.single-works .k-fp-panel {
	background: #fff;
	border: 1px solid var(--k-line);
	padding: 24px;
}

.single-works p.k-fp-chip {
	display: inline-block;
	font-family: var(--k-gothic);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--k-ink-2);
	border: 1px solid var(--k-line-strong);
	border-radius: 999px;
	padding: 5px 14px;
	margin: 0 0 16px;
}

.single-works p.k-fp-chip.is-after {
	color: var(--k-accent-ink);
	background: var(--k-accent);
	border-color: var(--k-accent);
}

.single-works .k-fp-panel .wp-block-image {
	margin: 0;
}

.single-works p.k-note {
	font-size: 13px;
	line-height: 1.9;
	color: var(--k-ink-2);
	margin: 14px 0 0;
}

.single-works p.k-fp-note {
	font-size: 12px;
	color: var(--k-ink-2);
	text-align: center;
	margin-top: 24px;
}

/* 工事の記録。段階ごとに、左の短い罫と一緒に見出しを置く */
.single-works .k-phase + .k-phase {
	margin-top: 56px;
}

.single-works p.k-phase-head {
	position: relative;
	padding-left: 16px;
	font-family: var(--k-mincho);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--k-ink);
	margin: 0 0 20px;
}

.single-works p.k-phase-head::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 3px;
	height: 1em;
	background: var(--k-accent);
}

.single-works .k-phase .wp-block-gallery {
	margin: 0;
}

/* 本文の節。見出しは節のなかで完結させる */
.single-works .k-body h2.wp-block-heading:first-child {
	margin-top: 0;
}

.single-works .k-body .wp-block-quote {
	border-left: 1px solid var(--k-accent);
	background: #fff;
}

.single-works .k-body .wp-block-quote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--k-gothic);
	font-size: 12px;
	font-style: normal;
	letter-spacing: .08em;
	color: var(--k-ink-2);
}

.single-works .k-back .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--k-ink);
	color: var(--k-ink);
	font-family: var(--k-mincho);
	font-size: 13px;
	letter-spacing: .12em;
	padding: 14px 28px;
}

.single-works .k-back .wp-block-button__link::before {
	content: "← ";
}

.single-works .k-back .wp-block-button__link:hover {
	background: var(--k-ink);
	color: #fff;
}

@media (max-width: 900px) {
	.single-works .entry-body .k-sec {
		padding: 64px max(4vw, 16px);
	}

	.single-works .entry-body .k-sec .k-sect-head {
		padding-left: 20px;
		margin-bottom: 36px;
	}
}

/* ==================================================================
   細部の詰め
   ================================================================== */

/* ------------------------------------------------------------------
   スクロールしても、ヘッダーの並びを変えない。
   Lightning は既定でスクロール時に屋号を消してナビを中央へ寄せるが、
   Astro 版は「屋号は左、ナビは右」のまま追従する。そちらに揃える。
   ------------------------------------------------------------------ */
.header_scrolled .site-header-logo {
	display: block;
}

.header_scrolled .site-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header_scrolled .site-header {
	box-shadow: none;
	border-bottom: 1px solid var(--k-ink);
}

/* PC幅のときだけ、追従状態でもナビを右端に置く */
@media (min-width: 993px) {
	.header_scrolled .site-header .global-nav,
	.header_scrolled .global-nav--layout--float-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: auto;
		margin-left: auto;
		margin-right: 0;
	}
}

/* 992px 以下では PC 用のナビを絶対に出さない。
   Lightning は追従状態に `.header_scrolled .site-header .global-nav { display:block }` を
   当てており、これが「狭い画面ではナビを隠す」指定（.global-nav ひとつぶんの詳細度）を
   上書きしてしまう。結果、スマホでスクロールすると横並びのメニューが屋号に重なって出る。 */
@media (max-width: 992px) {
	.global-nav,
	.header_scrolled .site-header .global-nav,
	.header_scrolled .global-nav--layout--float-right {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
   日本語の折り返し。
   既定では「ご相談か／ら。」のように語の途中で切れてしまうので、
   文節で折り返す指定を入れる（対応していないブラウザでは従来どおり）。
   ------------------------------------------------------------------ */
.entry-body h1,
.entry-body h2,
.entry-body h3,
.entry-title,
.page-header-title,
.wp-block-post-title,
.entry-body p.k-lead,
.entry-body p.k-hero-sub,
.entry-body .k-cards .k-summary p {
	word-break: auto-phrase;
	line-break: strict;
	overflow-wrap: anywhere;
}

/* 見出しが1文字だけ次の行に落ちないよう、少しだけ余裕を持たせる */
.entry-body .k-sect-head {
	max-width: 860px !important;
}

/* ------------------------------------------------------------------
   お問い合わせの連絡先。アイコンとラベルを同じ行に揃える。
   position:absolute での位置合わせをやめ、2列のグリッドにして
   1列目にアイコン、2列目にラベルと値を置く。
   ------------------------------------------------------------------ */
.entry-body .k-crow {
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: 12px;
	align-items: start;
	/* 行間の余白は margin ではなく padding で持たせる。
	   margin だと、ブロックエディタのレイアウト指定に 1 行目だけ残されて
	   2 行目以降が 0 になり、線の上下の空きが揃わなくなる。 */
	padding: 20px 0;
	margin: 0 !important;
	border-bottom: 1px solid var(--k-line);
	position: static;
}

.entry-body .k-crow:first-child {
	padding-top: 0;
}

.entry-body .k-crow:last-child {
	padding-bottom: 0;
}

.entry-body .k-crow::before {
	grid-column: 1;
	grid-row: 1;
	position: static;
	font-family: "Material Symbols Outlined";
	font-size: 20px;
	/* ラベルの行の高さに合わせて、字面の中心を揃える */
	line-height: 14px;
	text-align: center;
	color: var(--k-accent);
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.entry-body .k-crow p.k-lab {
	grid-column: 2;
	grid-row: 1;
	/* 行送りを字の大きさに寄せる。1.7 のままだと和文と欧文で
	   行のなかの字面の位置が変わり、線までの空きが違って見える。 */
	line-height: 14px;
	margin: 0;
}

.entry-body .k-crow p.k-val {
	grid-column: 2;
	grid-row: 2;
	line-height: 22px;
	margin-top: 10px;
}

/* グリッドの升目のなかで中央に寄らないようにする。
   WordPress の constrained レイアウトが子要素へ margin:auto を !important で入れるため、
   グリッド項目になった途端に中央寄せになってしまう。 */
.entry-body .k-crow > p {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	text-align: left;
}

/* 追従ヘッダーの位置を明示しておく。
   管理バーが出ている状態（ログイン中）だけ位置がずれることがあるため。 */
.header_scrolled .site-header {
	/* Lightning 側が管理バーぶんの位置をずらすため、!important で上書きする */
	top: 0 !important;
}

.admin-bar.header_scrolled .site-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	.admin-bar.header_scrolled .site-header {
		top: 46px !important;
	}
}

/* ==================================================================
   ヘッダーを常に固定する
   ==================================================================
   Lightning は既定では静的なヘッダーで、スクロールに反応したときだけ
   position:fixed に切り替える（しかもスマホでは追従するのがメニューボタンだけ）。
   Astro 版は最初から最後まで固定なので、そちらに合わせる。

   固定にすると本文がヘッダーの下へ潜るので、
   ・.site-body に同じ高さの上余白を取る
   ・html の scroll-padding-top も同じにする（#contact などへ飛んだとき隠れないように）
   の2つを、--k-header-h という1つの値で揃えている。
   ================================================================== */
html {
	scroll-padding-top: calc(var(--k-header-h) + 8px);
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	height: var(--k-header-h);
	display: flex;
	align-items: center;
}

.admin-bar .site-header {
	top: 32px;
}

/* ヘッダーの中身の幅を、本文のセクションと同じ基準に揃える。
   Lightning の .container は画面幅ごとに固定幅で、本文の左端と揃わない。
   Astro 版の .s-header .wrap と同じ「max 1280px ＋ 左右 max(4vw,16px)」にする。 */
.site-header-container {
	width: 100%;
	max-width: var(--k-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: max(4vw, 16px);
	padding-right: max(4vw, 16px);
}

/* 固定したぶん、中身を押し下げる。
   ページ見出しの帯とパンくずは .site-body の「外」にあるので、
   .site-body に余白を付けるとその2つがヘッダーの下に潜ってしまう。
   body に付ければ、ヘッダーより下にあるものすべてが等しく下がる。 */
body {
	padding-top: var(--k-header-h);
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* 追従状態でも高さと並びを変えない（Lightning の既定を打ち消す） */
.header_scrolled .site-header {
	height: var(--k-header-h);
	animation: none;
}

/* ==================================================================
   スマートフォンのメニュー
   ==================================================================
   Lightning の既定は「白い箱＋1px の枠＋SVG のアイコン」を画面左上に
   position:fixed で置く作り。屋号と切り離されて浮いて見えるので、
   枠と背景を外し、ヘッダーの右端に重ねる。
   アイコンは Material Symbols の合字で描くので画像を持たない。
   ================================================================== */
@media (max-width: 991px) {
	.vk-mobile-nav-menu-btn {
		position: fixed;
		top: 0;
		left: auto;
		right: max(4vw, 16px);
		width: 44px;
		height: var(--k-header-h);
		margin: 0;
		padding: 0;
		background: none;
		background-image: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		z-index: 2100;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 中の「MENU」という文字を消す */
		font-size: 0;
		color: transparent;
		text-indent: 0;
		overflow: visible;
	}

	.admin-bar .vk-mobile-nav-menu-btn {
		top: 32px;
	}

	.vk-mobile-nav-menu-btn::before {
		content: "menu";
		font-family: "Material Symbols Outlined";
		font-size: 28px;
		line-height: 1;
		color: var(--k-ink);
		font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
		transition: opacity .2s;
	}

	.vk-mobile-nav-menu-btn.menu-open::before {
		content: "close";
	}

	.vk-mobile-nav-menu-btn:active::before {
		opacity: .5;
	}

	/* 屋号は左、ボタンは右。Astro 版のスマホ表示と同じ並びにする。
	   Lightning の既定は中央寄せで、ローマ字が画面幅からはみ出す。 */
	.site-header-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
	}

	.site-header-logo {
		float: none;
		margin: 0 auto 0 0;
		max-width: calc(100% - 60px);
		text-align: left;
	}

	.site-header-logo a {
		font-size: 18px;
		text-align: left;
		/* 親テーマは width:fit-content の a を margin:auto で中央に置く。左端へ戻す。 */
		margin-left: 0;
		margin-right: auto;
	}

	.site-header-logo a::after {
		font-size: 8px;
		letter-spacing: .24em;
		margin-top: 4px;
	}
}

@media screen and (max-width: 782px) {
	.admin-bar .vk-mobile-nav-menu-btn {
		top: 46px;
	}
}

/* 開いたときの画面。Astro 版と同じ、白一色に明朝のリンクを中央へ並べる形。 */
.vk-mobile-nav {
	background: rgba(255, 255, 255, .98);
	backdrop-filter: saturate(140%) blur(16px);
}

.vk-mobile-nav-menu-outer {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 96px 32px 64px;
}

.vk-mobile-nav .vk-menu-acc,
.vk-mobile-nav ul.menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.vk-mobile-nav .vk-menu-acc > li,
.vk-mobile-nav ul.menu > li {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none;
}

.vk-mobile-nav .vk-menu-acc > li > a,
.vk-mobile-nav ul.menu > li > a {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--k-mincho);
	font-size: clamp(20px, 5.2vw, 26px);
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.6;
	color: var(--k-ink);
	text-align: center;
	transition: opacity .2s;
}

.vk-mobile-nav .vk-menu-acc > li > a:active,
.vk-mobile-nav .vk-menu-acc > li > a:hover {
	opacity: .5;
	background: none;
	color: var(--k-ink);
}

/* 最後の「お問い合わせ」だけ、濃い色の丸いボタンにする（Astro 版と同じ） */
.vk-mobile-nav .vk-menu-acc > li.k-nav-cta > a,
.vk-mobile-nav ul.menu > li.k-nav-cta > a {
	margin-top: 12px;
	background: var(--k-ink);
	color: #fff;
	border-radius: 999px;
	padding: 16px 40px;
	font-size: 14px;
	letter-spacing: .12em;
}

/* Lightning は ID セレクタでボタンの見た目を指定しているので、
   開いた状態の背景と枠を消すには、こちらも ID で指定する必要がある。 */
@media (max-width: 991px) {
	#vk-mobile-nav-menu-btn,
	#vk-mobile-nav-menu-btn.menu-open {
		background: none !important;
		background-image: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
}

/* ------------------------------------------------------------------
   分類ページ（/works-type/… ・/works-area/…）の一覧。
   ここは Lightning のアーカイブ雛形が描くので、放っておくと
   「茶色い塗りボタン」「グレーの角丸ラベル」が出てサイトの他の面と揃わない。
   同じ字づかい・同じ輪郭（角ゼロ・塗らない）に寄せる。
   ------------------------------------------------------------------ */
.archive-header {
	margin-bottom: 48px;
}

.archive-header-title {
	font-family: var(--k-mincho);
	font-weight: 500;
	font-size: clamp(26px, 3.4vw, 38px);
	letter-spacing: .1em;
	line-height: 1.55;
	color: var(--k-ink);
	background: none;
	border: 0;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--k-line);
}

.vk_posts .vk_post {
	border-bottom: 1px solid var(--k-line);
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.vk_posts .vk_post:last-child {
	border-bottom: 0;
}

.vk_post_imgOuter img {
	border-radius: 0;
	filter: saturate(.6) contrast(1.04);
}

/* 写真の上の「工事の種類」ラベル。トップのカードと同じ白い札にする。 */
.vk_post_imgOuter_singleTermLabel {
	border-radius: 0 !important;
	background: rgba(255, 255, 255, .92) !important;
	color: var(--k-ink) !important;
	font-family: var(--k-mincho);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	padding: 6px 12px;
}

.vk_post_title {
	font-family: var(--k-mincho);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: .05em;
	line-height: 1.6;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--k-line);
}

.vk_post_title a {
	color: var(--k-ink);
	text-decoration: none;
}

.vk_post_date {
	font-family: var(--k-gothic);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .15em;
	color: var(--k-accent);
}

.vk_post_date i {
	display: none;
}

.vk_post_date::after {
	content: " 引き渡し";
}

.vk_post_excerpt {
	font-family: var(--k-mincho);
	font-size: 14px;
	line-height: 2;
	letter-spacing: .02em;
	color: var(--k-ink-2);
}

/* 「詳しく見る」。塗りつぶしのボタンをやめ、本文と同じ字で控えめな導線にする。 */
.vk_post_btn,
.vk_posts .btn.btn-primary {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	font-family: var(--k-mincho);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .15em;
	color: var(--k-ink) !important;
}

.vk_post_btn::after {
	content: " →";
}

.vk_post_btnOuter {
	text-align: left !important;
	margin-top: 16px;
}

/* ------------------------------------------------------------------
   制作サンプルであることの表示（functions.php の KOUMUTEN_IS_SAMPLE）

   以前は画面上部に黒い帯を固定で置いていたが、固定ヘッダーの上にもう一つ
   固定要素を重ねる構造が脆く、管理バーの有無や文字の大きさがずれるたびに
   屋号が隠れた。帯はやめ、noindex とフッターの断り書きだけにしてある。

   --k-ribbon-h を 0 にすることで、ヘッダーの位置と本文の上余白の計算は
   そのまま（帯のぶんが 0 になるだけ）で辻褄が合う。
   ------------------------------------------------------------------ */
:root {
	--k-ribbon-h: 0px;
}

/* フッターの断り書き */
.site-footer .k-sample-note {
	font-family: var(--k-gothic);
	font-size: 11px;
	line-height: 1.9;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .45);
	max-width: 720px;
	margin: 0 auto 16px;
	text-align: center;
}

/* ------------------------------------------------------------------
   スマホの管理バーの扱い（ログイン中だけ起きる崩れ）
   ------------------------------------------------------------------
   WordPress の管理バーは、PC では position:fixed で画面上部に貼り付くが、
   **782px 以下では position:absolute になり、スクロールすると一緒に流れていく**。
   それなのに固定ヘッダーと帯を「管理バーのぶん（46px）下げる」ままにしていたので、
   スクロール後も 46px 下がった位置に居座り、帯とヘッダーが重なって屋号が隠れていた。

   スマホでは管理バーぶんの下げ幅を打ち消し、帯を画面の一番上に戻す。
   ------------------------------------------------------------------ */
@media screen and (max-width: 782px) {

	.admin-bar .site-header,
	.admin-bar.header_scrolled .site-header {
		top: var(--k-ribbon-h) !important;
	}

	.admin-bar .vk-mobile-nav-menu-btn {
		top: var(--k-ribbon-h) !important;
	}
}

/* ==================================================================
   採用情報（WP Job Manager）
   ------------------------------------------------------------------
   プラグインのテンプレートには一切手を入れていない。
   プラグイン側が出す素のクラス（.job_filters / .job_listings / .single_job_listing）に
   このサイトの約束（明朝・直角・細い線・影なし）を上から当てているだけ。
   プラグインを更新しても、テンプレートを上書きしていないので壊れない。
   ================================================================== */

/* ---- 検索フォーム ---- */
.entry-body .job_filters {
	background: var(--k-surface-low);
	border: 1px solid var(--k-line);
	margin: 0 0 48px;
	padding: 28px 28px 20px;
}

.entry-body .job_filters .search_jobs {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 16px 20px;
	align-items: end;
}

.entry-body .job_filters .search_keywords,
.entry-body .job_filters .search_location,
.entry-body .job_filters .search_categories {
	min-width: 0;
}

/* 親テーマが入れてくる clear 用の空 div。グリッドでは邪魔になる */
.entry-body .job_filters .search_jobs > div[style*="clear"] {
	display: none;
}

.entry-body .job_filters label {
	display: block;
	font-family: var(--k-gothic);
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--k-ink-2);
	margin: 0 0 6px;
}

.entry-body .job_filters input[type="text"],
.entry-body .job_filters select {
	width: 100%;
	border: 1px solid var(--k-line-strong);
	border-radius: 0;
	background: #fff;
	padding: 11px 12px;
	font-family: var(--k-mincho);
	font-size: 15px;
	color: var(--k-ink);
}

.entry-body .job_filters .search_submit {
	grid-column: 3;
}

.entry-body .job_filters input[type="submit"] {
	border: 0;
	border-radius: 0;
	background: var(--k-accent);
	color: var(--k-accent-ink);
	font-family: var(--k-gothic);
	font-size: 14px;
	letter-spacing: .12em;
	padding: 12px 32px;
	cursor: pointer;
	transition: opacity .2s;
}

.entry-body .job_filters input[type="submit"]:hover {
	opacity: .82;
}

/* 雇用形態のチェックボックス */
.entry-body .job_filters ul.job_types {
	list-style: none;
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--k-line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.entry-body .job_filters ul.job_types li {
	margin: 0;
	padding: 0;
}

.entry-body .job_filters ul.job_types label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-family: var(--k-mincho);
	font-size: 14px;
	color: var(--k-ink);
	letter-spacing: .02em;
	cursor: pointer;
}

/* ---- 求人の一覧 ---- */
.entry-body ul.job_listings {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--k-line-strong);
}

.entry-body ul.job_listings li.job_listing {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--k-line);
}

.entry-body ul.job_listings li.job_listing a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 28px;
	padding: 26px 4px;
	text-decoration: none;
	color: inherit;
	transition: background .2s;
}

.entry-body ul.job_listings li.job_listing a:hover {
	background: var(--k-surface-low);
}

/* 会社ロゴの枠は出さない（自社の求人しか載らないため） */
.entry-body ul.job_listings li.job_listing .company_logo,
.entry-body .single_job_listing .company_logo {
	display: none;
}

/* 職種名と会社名。ここだけが伸び縮みする */
.entry-body ul.job_listings li.job_listing .position {
	flex: 1 1 260px;
	min-width: 0;
}

.entry-body ul.job_listings li.job_listing .position h3 {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 4px;
	border: 0;
	padding: 0;
}

.entry-body ul.job_listings li.job_listing .position .company {
	font-family: var(--k-gothic);
	font-size: 13px;
	color: var(--k-ink-2);
}

.entry-body ul.job_listings li.job_listing .position .company .tagline {
	display: none;
}

/* 所在地と雇用形態。折り返さず、縮まない */
.entry-body ul.job_listings li.job_listing .location {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--k-gothic);
	font-size: 13px;
	color: var(--k-ink-2);
	/* プラグインは float:right と固定幅と左padding を付けてくる。
	   flex に任せたいので全部外す（付けたままだと箱の中で文字が右に寄って、
	   スマホで一段下がったときに不自然な字下げになる）。 */
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
	text-align: left;
}

.entry-body ul.job_listings li.job_listing ul.meta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.entry-body ul.job_listings li.job_listing ul.meta li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-body ul.job_listings li.job_listing .date {
	display: none;
}

.entry-body .load_more_jobs {
	display: block;
	margin: 36px auto 0;
	max-width: 320px;
	text-align: center;
	border: 1px solid var(--k-line-strong);
	padding: 14px;
	font-family: var(--k-gothic);
	font-size: 14px;
	letter-spacing: .12em;
	text-decoration: none;
	color: var(--k-ink);
}

.entry-body .load_more_jobs:hover {
	background: var(--k-surface-low);
}

.entry-body .showing_jobs {
	font-family: var(--k-gothic);
	font-size: 13px;
	color: var(--k-ink-2);
}

/* ---- 求人の詳細 ---- */
.entry-body .single_job_listing .meta {
	list-style: none;
	margin: 0 0 32px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--k-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	font-family: var(--k-gothic);
	font-size: 14px;
	color: var(--k-ink-2);
}

.entry-body .single_job_listing .meta li {
	margin: 0;
	list-style: none;
}

.entry-body .single_job_listing .company {
	border: 1px solid var(--k-line);
	background: var(--k-surface-low);
	padding: 20px 24px;
	margin: 0 0 40px;
}

.entry-body .single_job_listing .company .name {
	font-size: 17px;
	margin: 0;
}

.entry-body .single_job_listing .company .tagline {
	font-family: var(--k-gothic);
	font-size: 13px;
	color: var(--k-ink-2);
	margin: 4px 0 0;
	display: block;
}

.entry-body .single_job_listing h3 {
	font-size: 19px;
	font-weight: 400;
	margin: 44px 0 16px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--k-line);
}

.entry-body .single_job_listing .job_description ul {
	padding-left: 1.2em;
}

/* 応募ボタン */
.entry-body .job_application .application_button,
.entry-body input.application_button {
	display: inline-block;
	border: 0;
	border-radius: 0;
	background: var(--k-accent);
	color: var(--k-accent-ink);
	font-family: var(--k-gothic);
	font-size: 15px;
	letter-spacing: .12em;
	padding: 16px 48px;
	cursor: pointer;
	text-decoration: none;
	transition: opacity .2s;
}

.entry-body .job_application .application_button:hover,
.entry-body input.application_button:hover {
	opacity: .82;
}

.entry-body .job_application .application_details {
	border: 1px solid var(--k-line-strong);
	background: var(--k-surface-low);
	padding: 20px 24px;
	margin: 16px 0 0;
	font-family: var(--k-gothic);
	font-size: 14px;
}

@media (max-width: 782px) {

	.entry-body .job_filters {
		padding: 20px 18px 16px;
	}

	.entry-body .job_filters .search_jobs {
		grid-template-columns: 1fr;
	}

	.entry-body .job_filters .search_submit {
		grid-column: 1;
	}

	.entry-body .job_filters input[type="submit"] {
		width: 100%;
	}

	.entry-body ul.job_listings li.job_listing a {
		padding: 22px 2px;
		gap: 6px 16px;
	}

	.entry-body ul.job_listings li.job_listing .position {
		flex: 1 1 100%;
	}

	.entry-body .single_job_listing .meta {
		gap: 8px 18px;
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------
   プラグイン側 CSS の打ち消し
   ------------------------------------------------------------------
   wp-job-manager の frontend.css は
   `ul.job_listings li.job_listing ul.meta li.job-type` のように
   要素とクラスを重ねた強い書き方をしている。
   こちらも同じ深さで書かないと当たらないので、ここだけ選択子を長くしている。
   （テンプレートは上書きしていないので、更新で壊れるのは「色が戻る」だけ）
   ------------------------------------------------------------------ */

/* 雇用形態のバッジ。プラグイン既定の色分け（正社員=緑・パート=橙）をやめて、線の枠に統一する */
.entry-body ul.job_listings li.job_listing ul.meta li.job-type,
.entry-body .single_job_listing ul.meta li.job-type {
	display: inline-block;
	background: transparent;
	color: var(--k-ink);
	border: 1px solid var(--k-line-strong);
	border-radius: 0;
	padding: 3px 12px;
	font-family: var(--k-gothic);
	font-size: 12px;
	letter-spacing: .08em;
	line-height: 1.6;
	text-transform: none;
}

/* 検索フォームの入力欄。プラグインが割合で幅を決めているのを、グリッドに任せる */
.entry-body .job_filters .search_jobs .search_keywords,
.entry-body .job_filters .search_jobs .search_location,
.entry-body .job_filters .search_jobs .search_categories,
.entry-body .job_filters .search_jobs .search_submit {
	width: 100%;
	float: none;
	padding: 0;
	margin: 0;
}

/* 4つの欄の位置を全部書いておく。
   1つだけ明示すると、残りの自動配置がその周りを埋めに行って列がずれる。 */
.entry-body .job_filters .search_jobs .search_keywords {
	grid-area: 1 / 1;
}

.entry-body .job_filters .search_jobs .search_location {
	grid-area: 1 / 2;
}

.entry-body .job_filters .search_jobs .search_categories {
	grid-area: 2 / 1 / 3 / 3;
}

.entry-body .job_filters .search_jobs .search_submit {
	grid-area: 2 / 3;
}

/* 見出しは出す。プラグインは display:none で隠しているが、
   プレースホルダーだけだと入力後に何の欄か分からなくなる */
.entry-body .job_filters .search_jobs > div > label {
	display: block;
}

/* select2 がカテゴリー選択を作り替えるので、その見た目も揃える */
.entry-body .job_filters .select2-container .select2-selection--single,
.entry-body .job_filters .select2-container--default .select2-selection--single {
	height: auto;
	border: 1px solid var(--k-line-strong);
	border-radius: 0;
	padding: 6px 4px;
	font-family: var(--k-mincho);
}

.entry-body .job_filters .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.7;
	color: var(--k-ink);
	padding-left: 8px;
}

/* ------------------------------------------------------------------
   スマホ幅の打ち消しは、いちばん最後に置く
   ------------------------------------------------------------------
   メディアクエリは詳細度を上げない。上で `grid-area: 1 / 1` のように
   位置を固定したあとに書かないと、あとから来る無条件の指定に負ける。
   実際、これを前に置いていたときはスマホでキーワード欄が縦一列に潰れた。
   ------------------------------------------------------------------ */
@media (max-width: 782px) {

	.entry-body .job_filters .search_jobs {
		grid-template-columns: 1fr;
	}

	.entry-body .job_filters .search_jobs .search_keywords,
	.entry-body .job_filters .search_jobs .search_location,
	.entry-body .job_filters .search_jobs .search_categories,
	.entry-body .job_filters .search_jobs .search_submit {
		grid-area: auto;
	}

	.entry-body .job_filters input[type="submit"] {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
   求人詳細の本文を、PCでは「見出し左・内容右」の2段に組む
   ------------------------------------------------------------------
   求人票の中身は「仕事の内容」「応募の条件」…と短い箇条書きが続くだけなので、
   1カラムのまま流すと、横に1100px あるのに文字は300px しか使わず、
   そのぶん縦にだけ伸びる。見出しを左の列に逃がすと、行数がおよそ半分になり、
   会社概要の表と同じ読み方（左が項目・右が中身）に揃う。

   h3 と ul が交互に並ぶ構造をそのまま使っている（子テーマ側で列だけ指定）。
   見出しの直後に来ない ul（入れ子など）は、そのまま全幅に流れる。
   スマホは1カラムのままなので、この節ごと min-width で囲っている。
   ------------------------------------------------------------------ */
@media (min-width: 783px) {

	.entry-body .single_job_listing .job_description {
		display: grid;
		grid-template-columns: 200px 1fr;
		column-gap: 48px;
		align-items: start;
	}

	/* 見出しでも箇条書きでもないもの（リード文など）は全幅 */
	.entry-body .single_job_listing .job_description > * {
		grid-column: 1 / -1;
	}

	.entry-body .single_job_listing .job_description > h3 {
		grid-column: 1;
		margin: 0;
		padding: 22px 0;
		border-top: 1px solid var(--k-line);
		border-bottom: 0;
		font-size: 16px;
		line-height: 1.6;
	}

	/* 見出しの直後の箇条書きだけを右の列に置く */
	.entry-body .single_job_listing .job_description > h3 + ul {
		grid-column: 2;
		margin: 0;
		padding: 22px 0 22px 1.2em;
		border-top: 1px solid var(--k-line);
	}

	.entry-body .single_job_listing .job_description > h3 + ul li {
		margin: 0 0 8px;
	}

	.entry-body .single_job_listing .job_description > h3 + ul li:last-child {
		margin-bottom: 0;
	}

	/* 親テーマの見出しに付く飾り線は、200px の列からはみ出すので止める */
	.entry-body .single_job_listing .job_description > h3::after,
	.entry-body .single_job_listing .job_description > h3::before {
		display: none;
	}

	/* リード文と、1行目の罫線の間を空ける */
	.entry-body .single_job_listing .job_description > p {
		margin: 0 0 26px;
	}
}