/*
 * home.css — トップページのヒーロー・区画見出し・サービス導線・実績帯・ご相談帯（ブリーフ §3.2）。
 * 404 のサービス導線でも同じクラスを使うので、404 でも読み込む（inc/assets.php）。
 *
 * カルーセル・ローディング演出・自動再生の切り替えは入れない（D-002）。
 */

/* ==========================================================================
 * 0. 区画見出し（template-parts/home/section-head.php）
 *
 * 英字の小見出し + 大きめの日本語見出し + 短い説明。トップの区画はすべてこれで揃える。
 * 英字は飾り（aria-hidden）。字間を広げ、両脇に短い線を引いて「作り込み」の気配を出す。
 * ========================================================================== */

/*
 * D-030 §8: SP は区画見出しと中身の距離を 1 段詰める（32px → 24px）。
 * 「余白を減らす」のではなく「テンポを上げる」。PC は 64rem 以上で今までどおり。
 */
.pc-section-head {
	margin-block-end: var(--picico-space-md);
}

.pc-section-head__kicker {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 0.35rem;
	color: var(--picico-color-primary);
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.4;
	letter-spacing: 0.24em;
}

/* 英字の前に短い線（中央揃えでは両脇）。 */
.pc-section-head__kicker::before,
.pc-section-head--center .pc-section-head__kicker::after {
	content: "";
	flex: 0 0 1.75rem;
	height: 2px;
	border-radius: var(--picico-radius-pill);
	background-color: var(--picico-color-primary-light);
}

.pc-section-head__title {
	margin: 0;
	color: var(--picico-color-text);
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-xxl);
	font-weight: var(--picico-font-weight-bold);
	line-height: var(--picico-line-height-heading);
	letter-spacing: var(--picico-letter-spacing-heading);
	/* 見出しを文節で折る。 */
	word-break: auto-phrase;
}

.pc-section-head__lead {
	max-width: 40em;
	margin: var(--picico-space-xs) 0 0;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
	line-height: 1.8;
	/* 短い案内文なので文節で折る。 */
	word-break: auto-phrase;
}

.pc-section-head--center {
	text-align: center;
}

.pc-section-head--center .pc-section-head__kicker {
	justify-content: center;
}

.pc-section-head--center .pc-section-head__lead {
	margin-inline: auto;
}

/*
 * 左の見出し列（D-028 §4-3 / §4-4）。
 * 参考画像の「左に見出し・右に内容」の 2 列で使う。区画の親（.pc-feature__inner 等）が
 * グリッドを作り、この見出しはその 1 列目に入るだけ。狭い画面では単に上に積まれる。
 */
.pc-section-head--aside {
	margin-block-end: var(--picico-space-md);
}

.pc-section-head__more {
	margin: var(--picico-space-sm) 0 0;
}

.pc-section-head__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	/* 単独で置く導線なので、行内リンク（32px）ではなく 44px を確保する。 */
	min-height: var(--picico-tap-size);
	color: var(--picico-color-primary);
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
	text-decoration: none;
}

.pc-section-head__link:hover,
.pc-section-head__link:focus-visible {
	text-decoration: underline;
}

/*
 * 濃い地・写真の上（実績帯・ご相談帯）。
 * 見出しは白、英字と説明は淡い水色。
 *   白 / primary #0d6d80 = 5.97:1、primary-pale #e0f0f5 / primary = 5.1:1。
 *   写真の上は幕（74% 以上の黒）があるので、どちらも 7:1 以上。
 */
.pc-section-head--invert .pc-section-head__kicker,
.pc-section-head--invert .pc-section-head__lead {
	color: var(--picico-color-primary-pale);
}

.pc-section-head--invert .pc-section-head__title {
	color: var(--picico-color-surface);
}

.pc-section-head--invert .pc-section-head__kicker::before,
.pc-section-head--invert .pc-section-head__kicker::after {
	background-color: var(--picico-color-accent-light);
}

@media (min-width: 64rem) {
	.pc-section-head {
		margin-block-end: var(--picico-space-xl);
	}

	.pc-section-head__title {
		font-size: calc(var(--picico-font-size-xxl) * 1.125);
	}

	/* 左の列では見出しを本文と同じ大きさに抑え、右の内容を主役にする。 */
	.pc-section-head--aside {
		margin-block-end: 0;
	}

	.pc-section-head--aside .pc-section-head__title {
		font-size: var(--picico-font-size-xl);
	}
}

/* ==========================================================================
 * 1. ヒーロー（全面写真＋文字重ね。D-032）
 *
 * D-032（picico「トップの Hero は全面写真＋文字重ね」）で、D-030 §7 / D-031 の
 * 「写真を枠に入れて文字を重ねない」構成をやめ、写真を区画いっぱいに敷いた（PC・SP とも）。
 *
 * 重なり（下から）:
 *   0 … .pc-hero__media（写真または動画。区画いっぱい、object-fit: cover）
 *   1 … 暗い幕（SP は .pc-hero__inner の地、PC は .pc-hero--overlay::before）
 *   2 … .pc-hero__inner（一言・見出し・説明・ボタン・信頼情報）
 *
 * 幕は中立色の黒（rgb(0 0 0 / …)）。ブランドの青は使わない。値をトークンにしないのは
 * D-026 と同じ理由で、パレットが変わっても白文字のコントラストが崩れないようにするため。
 * text-shadow には頼らない（D-031 で削除済み。戻さない）。
 *
 * 最悪ケース（幕の下の写真が真っ白）で白文字 #fff と重ねた色のコントラスト比:
 *   黒 58% → #6b6b6b → 5.33:1 ／ 60% → #666 → 5.74:1 ／ 72% → #474747 → 9.2:1
 * 文字が乗る範囲の幕は、SP も PC も 58% 以上にしてある（下の各コメント）。AA は 4.5:1。
 *
 * 高さは CSS の min-height で先に決まり、写真は absolute で敷くだけなので、
 * 画像の到着前後で区画の高さが変わらない（CLS 0）。写真が届く前は地の ink が見える
 * （白文字が白地に消えることはない）。
 * ========================================================================== */

.pc-hero {
	isolation: isolate;
	background-color: var(--picico-color-surface);
}

.pc-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding: var(--picico-space-lg) var(--picico-gutter);
}

.pc-hero__head,
.pc-hero__foot {
	min-width: 0;
}

/*
 * 一言（D-032 §3）。見出しの上の小さなリードにした。
 * 先頭の短い横線は飾り（文字ではないので読み上げに乗らない）。
 */
.pc-hero__note {
	display: flex;
	align-items: center;
	gap: var(--picico-space-xs);
	margin: 0 0 var(--picico-space-xs);
	color: var(--picico-color-text-muted);
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-xs);
	letter-spacing: 0.06em;
	line-height: 1.6;
	word-break: auto-phrase;
	/* 折り返すとき（320px など）に「こと。」だけが次の行に落ちないよう、行の長さを揃える。 */
	text-wrap: balance;
}

.pc-hero__note::before {
	content: "";
	flex: 0 0 var(--picico-space-md);
	height: var(--picico-border-width);
	background-color: currentColor;
}

/*
 * 見出しは「苫小牧で、／パソコンに困ったら。」の 2 行（D-031。文節の span を inline-block にして
 * 読点の後ろでだけ折る。hero.php）。320px では 2 行目が収まらず、文節で 3 行になる。
 */
.pc-hero__title {
	margin: 0;
	color: var(--picico-color-ink);
	font-family: var(--picico-font-display);
	font-size: calc(var(--picico-font-size-xxl) * 1.125);
	font-weight: var(--picico-font-weight-bold);
	line-height: var(--picico-line-height-tight);
	letter-spacing: var(--picico-letter-spacing-display);
	word-break: auto-phrase;
}

.pc-hero__title-part {
	display: inline-block;
}

.pc-hero__lead {
	max-width: 32em;
	margin: var(--picico-space-xs) 0 0;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
	line-height: var(--picico-line-height-body);
	word-break: auto-phrase;
	text-wrap: pretty;
}

.pc-hero__foot {
	margin-block-start: var(--picico-space-md);
}

/* 主 CTA（LINE のボタン）と副リンク（料金）を 1 行に。狭い幅では折り返す。 */
.pc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--picico-space-xs) var(--picico-space-md);
}

/*
 * 主 CTA。白地（surface）＋ LINE 緑のアイコン＋ ink の文字（白地で 15.6:1）。
 * 塗りの体系は components.css の pc-btn--line。ここでは Hero での大きさだけを持つ。
 */
.pc-hero__btn-line {
	flex: 1 1 auto;
	min-height: calc(var(--picico-tap-size) + var(--picico-space-xs));
	font-weight: var(--picico-font-weight-bold);
}

.pc-hero__btn-icon {
	color: var(--picico-color-line-brand, currentColor);
}

/* 副リンク。塗りも罫線も無い文字リンク（Hero の中にブルーの塗りは置かない）。押せる高さは 44px。 */
.pc-hero__link {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.2em;
	min-height: var(--picico-tap-size);
	color: var(--picico-color-primary);
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
	text-decoration: underline;
	text-decoration-thickness: var(--picico-border-width);
	text-underline-offset: 0.35em;
}

.pc-hero__link:hover,
.pc-hero__link:focus-visible {
	text-decoration-thickness: calc(var(--picico-border-width) * 2);
}

/*
 * 信頼情報（D-030 §11 / D-031）。SP は 2 列 × 2 行の注記（3 つ目は 2 行目の左）。
 * PC は 1 行に並べ、点の区切りを出す（下の 48rem）。
 */
.pc-hero__trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--picico-space-xs) var(--picico-space-sm);
	margin: var(--picico-space-sm) 0 0;
	padding: 0;
	list-style: none;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
	line-height: 1.5;
}

.pc-hero__trust-item {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.3em;
	min-width: 0;
}

.pc-hero__trust-icon {
	flex: 0 0 auto;
	margin-block-start: 0.1em;
	color: var(--picico-color-primary);
}

/* ---- 写真・動画を全面に敷くとき（pc-hero--overlay）---- */

/*
 * SP: 高さは 1 画面より短く（D-031「記事への繋がり」）。文字は下に寄せ、
 * 写真の上半分で店内（作業台・PC）を見せる。svh 非対応のブラウザは vh に落ちる。
 * 31rem（496px）は 390×844 で FEATURE の英字が固定フッターの上に顔を出す高さ（実測）。
 * 文字の量が多い 320px などでは中身の高さが優先される（min-height なので）。
 */
.pc-hero--overlay {
	display: grid;
	align-content: end;
	min-height: min(64vh, 31rem);
	min-height: min(64svh, 31rem);
	background-color: var(--picico-color-ink);
}

.pc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/*
 * 写真は区画いっぱいに cover。元画像 50157（1024×576）は右側に作業台と PC ケースがあるので、
 * 切り抜きの基準は横が中央、縦が中央より少し上（picico 指示 2026-09-15）。
 * 写真は picico_hero_image で差し替えられる。構図が違う写真にしたら、この値を合わせる。
 */
.pc-hero__image,
.pc-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

/*
 * SP の幕は文字の箱（.pc-hero__inner）の地に付ける。上の 5rem で透明から 58% まで濃くし、
 * 文字はその下（58% → 72%）にだけ乗る。文字の量が増えて箱が高くなっても、幕が一緒に伸びるので
 * 「文字の下は 58% 以上」が崩れない。上の余白の 5rem は幕の立ち上がりで、写真はそこから上に見える。
 */
.pc-hero--overlay .pc-hero__inner {
	width: 100%;
	padding-block: calc(var(--picico-space-xxl) + var(--picico-space-sm)) var(--picico-space-md);
	background-image: linear-gradient(
		to bottom,
		rgb(0 0 0 / 0%) 0,
		rgb(0 0 0 / 58%) calc(var(--picico-space-xxl) + var(--picico-space-sm)),
		rgb(0 0 0 / 72%) 100%
	);
}

.pc-hero--overlay .pc-hero__note,
.pc-hero--overlay .pc-hero__title,
.pc-hero--overlay .pc-hero__lead,
.pc-hero--overlay .pc-hero__link,
.pc-hero--overlay .pc-hero__trust {
	color: var(--picico-color-surface);
}

.pc-hero--overlay .pc-hero__trust-icon {
	color: currentColor;
}

/* 写真の上では白い面のボタンに（緑の罫線は外す。緑はアイコンだけ）。 */
.pc-hero--overlay .pc-hero__btn-line {
	border-color: var(--picico-color-surface);
}

.pc-hero--overlay .pc-hero__btn-line:hover,
.pc-hero--overlay .pc-hero__btn-line:focus-visible {
	border-color: var(--picico-color-line-brand-pale);
	background-color: var(--picico-color-line-brand-pale);
}

/*
 * フォーカスリング。既定の --picico-color-focus（#a8450f）は暗い幕の上で見えにくいので、
 * Hero の中だけ白にする（幕の上で白は 5.3:1 以上。上のコントラスト表と同じ）。
 */
.pc-hero--overlay :where(a):focus-visible {
	outline-color: var(--picico-color-surface);
}

@media (min-width: 48rem) {
	/*
	 * PC・タブレット: 1280×800 で 1 画面を使い切らない高さ。ヘッダーの直下から写真が始まる。
	 * 文字は左寄せで縦の中央。
	 */
	.pc-hero--overlay {
		align-content: center;
		min-height: clamp(30rem, 62vh, 40rem);
	}

	/*
	 * PC の幕は区画いっぱいの横グラデーション。左（文字の側）を濃く、右（作業台と PC）を薄く。
	 * 60% の点は「文字の列の右端 + 2rem」に合わせてある:
	 *   max(0px, (100% - 1200px) / 2) … 1200px の中身の左の余り
	 *   + gutter + 36rem（.pc-hero__head / __foot の最大幅）+ 2rem
	 * なので画面幅によらず、文字の下は 72% 〜 60%（白文字 5.74:1 以上）。その右で 12% まで薄くする。
	 */
	.pc-hero--overlay::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background-image: linear-gradient(
			90deg,
			rgb(0 0 0 / 72%) 0,
			rgb(0 0 0 / 60%) calc(max(0px, (100% - var(--picico-wide-width)) / 2) + var(--picico-gutter) + 38rem),
			rgb(0 0 0 / 12%) 100%
		);
	}

	.pc-hero__inner {
		padding-block: var(--picico-space-xl);
	}

	.pc-hero--overlay .pc-hero__inner {
		padding-block: var(--picico-space-xl);
		background-image: none;
	}

	.pc-hero__head,
	.pc-hero__foot {
		max-width: 36rem;
	}

	.pc-hero__note {
		font-size: var(--picico-font-size-sm);
		margin-block-end: var(--picico-space-sm);
	}

	/* 10 文字の 2 行目（パソコンに困ったら。）が 36rem に 1 行で収まる大きさ（1280px で約 55px）。 */
	.pc-hero__title {
		font-size: calc(var(--picico-font-size-xxl) * 1.3);
	}

	.pc-hero__lead {
		margin-block-start: var(--picico-space-sm);
		font-size: var(--picico-font-size-md);
	}

	.pc-hero__foot {
		margin-block-start: var(--picico-space-lg);
	}

	.pc-hero__btn-line {
		flex: 0 0 auto;
		min-width: 15rem;
	}

	.pc-hero__link {
		font-size: var(--picico-font-size-md);
	}

	.pc-hero__trust {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.15rem var(--picico-space-xs);
		margin-block-start: var(--picico-space-md);
		letter-spacing: 0.04em;
	}

	.pc-hero__trust-item {
		align-items: center;
	}

	.pc-hero__trust-icon {
		margin-block-start: 0;
	}

	/* 点の区切り（文字ではないので読み上げに乗らない）。 */
	.pc-hero__trust-item + .pc-hero__trust-item::before {
		content: "";
		flex: 0 0 auto;
		width: 3px;
		height: 3px;
		margin-inline-end: var(--picico-space-xs);
		border-radius: var(--picico-radius-pill);
		background-color: currentColor;
	}
}

/* ==========================================================================
 * 1-2. お知らせ帯（PICK UP。ヒーロー直下・1行×最大3件。D-028 §4-9）
 *
 * 写真カードの横スクロールはやめた。JavaScript は引き続き使わない（D-002）。
 * ========================================================================== */

.pc-pickup {
	background-color: var(--picico-color-surface);
	border-bottom: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-pickup__inner {
	display: grid;
	/* 題名を 1 行で省略する（下の .pc-pickup__name）ので、列が min-content で膨らまないようにする。 */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--picico-space-xs);
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	/* D-030 §9: SP では帯を薄くして、ヒーローの次にすぐ FEATURE が見え始めるようにする。 */
	padding: var(--picico-space-sm) var(--picico-gutter);
}

.pc-pickup__title {
	margin: 0;
	color: var(--picico-color-text-muted);
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
	letter-spacing: 0.08em;
}

.pc-pickup__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-pickup__item {
	border-bottom: var(--picico-border-width) solid var(--picico-color-border);
}

/*
 * D-030 §9: 1 件 1 行。題名が長くても折り返さず、末尾を「…」で落とす。
 * 3 件で必ず 3 行に収まるので、この帯の高さが記事によって伸び縮みしない。
 * 1,024px 以上は幅に余裕があるので、これまでどおり全文を出す（下の 64rem）。
 */
.pc-pickup__link {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0 var(--picico-space-sm);
	min-height: var(--picico-tap-size);
	padding-block: var(--picico-space-xs);
	color: var(--picico-color-ink);
	text-decoration: none;
}

.pc-pickup__date {
	flex: 0 0 auto;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
	font-variant-numeric: tabular-nums;
}

.pc-pickup__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: var(--picico-font-size-sm);
	line-height: 1.6;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-pickup__arrow {
	flex: 0 0 auto;
	color: var(--picico-color-primary);
}

.pc-pickup__link:hover .pc-pickup__name,
.pc-pickup__link:focus-visible .pc-pickup__name {
	color: var(--picico-color-primary);
	text-decoration: underline;
}

@media (min-width: 64rem) {
	.pc-pickup__inner {
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
		gap: var(--picico-space-lg);
		align-items: start;
		padding-block: var(--picico-space-lg);
	}

	.pc-pickup__title {
		padding-block-start: var(--picico-space-xs);
	}

	/* 幅に余裕がある PC では題名を省略しない。 */
	.pc-pickup__name {
		overflow: visible;
		white-space: normal;
		word-break: auto-phrase;
	}
}

/* ==========================================================================
 * 1-3. FEATURE ／ 今日の PICICO（最新記事 1 本。D-028 §4-3）
 * ========================================================================== */

.pc-feature {
	background-color: var(--picico-color-surface);
}

.pc-feature__inner,
.pc-latest__inner {
	display: grid;
	/* D-030 §8: SP は区画の上下と区画内の余白を 1 段下げる（48px → 32px）。 */
	gap: var(--picico-space-md);
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding: var(--picico-space-lg) var(--picico-gutter);
}

.pc-feature__post {
	position: relative;
	display: grid;
	gap: var(--picico-space-sm);
	min-width: 0;
}

.pc-feature__head,
.pc-feature__body {
	display: grid;
	gap: var(--picico-space-xs);
	min-width: 0;
}

/*
 * D-030 §4: アイキャッチは「その日の記事の挿絵」。主役はタイポグラフィなので、
 * 写真は大きくしない（SP は 16:9、PC は 5:3 で列幅のおよそ 4 割）。
 */
.pc-feature__media {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--picico-color-primary-pale);
}

.pc-feature__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pc-feature__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--picico-space-xs) var(--picico-space-sm);
	margin: 0;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
}

/* カテゴリー札は独立したリンクなので、記事全面のリンクより前面に出す。 */
.pc-feature__cat a {
	position: relative;
	z-index: 1;
}

.pc-feature__title {
	margin: 0;
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-xl);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.4;
	word-break: auto-phrase;
}

.pc-feature__link {
	color: inherit;
	text-decoration: none;
}

/* 記事全体をクリックできるようにする（<a> を入れ子にしない方法）。 */
.pc-feature__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pc-feature__link:hover,
.pc-feature__link:focus-visible {
	color: var(--picico-color-primary);
	text-decoration: underline;
}

.pc-feature__excerpt {
	margin: 0;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
	line-height: 1.9;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.pc-feature__more {
	display: flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
	color: var(--picico-color-primary);
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
}

/*
 * D-030 §4: タブレット以上は「左に文字（カテゴリー・日付・大きな題名・抜粋・記事を読む）、
 * 右に中くらいの写真」。写真の高さより文字のほうが背が高くなるので、
 * アイキャッチが強い記事でもトップ全体の印象を持っていかれない。
 * 768px で 1 枚 736px の写真が出ていたのをやめるため、48rem から 2 列にする。
 */
@media (min-width: 48rem) {
	.pc-feature__post {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		grid-template-areas:
			"head media"
			"body media";
		column-gap: var(--picico-space-lg);
		row-gap: var(--picico-space-md);
		align-items: start;
	}

	.pc-feature__head {
		grid-area: head;
	}

	.pc-feature__media {
		grid-area: media;
		aspect-ratio: 5 / 3;
	}

	.pc-feature__body {
		grid-area: body;
	}
}

@media (min-width: 64rem) {
	.pc-feature__inner,
	.pc-latest__inner {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		gap: var(--picico-space-xxl);
		align-items: start;
		padding-block: var(--picico-space-xxl);
	}

	.pc-feature__title {
		font-size: var(--picico-font-size-xxl);
	}
}

/* ==========================================================================
 * 1-5. SP の誌面（Hero の下 〜 今日の PICICO。D-031 / 指示-3）
 *
 * 767px 以下だけに効かせる。max-width で囲い、48rem 以上には 1 行も漏らさない。
 * Hero そのものは「1.」の全面写真（D-032）に移った。ここに残るのは
 *  - TOP の区画だけ SP の左右余白を 24px にする（Hero の文字・PICK UP・FEATURE の左端を揃える）
 *  - Hero の下の PICK UP の帯と FEATURE の上を詰め、1 画面目の下端〜少しのスクロールで
 *    「今日の PICICO」が見え始めるようにする（D-031「記事への繋がり」）
 * の 2 つ。
 * ========================================================================== */

/* TOP の区画だけ左右 24px。ヘッダー・フッター・他のテンプレートは 16px のまま。 */
@media (min-width: 22.5rem) and (max-width: 47.9375rem) {
	.home .pc-main {
		--picico-gutter: var(--picico-space-md);
	}
}

@media (max-width: 47.9375rem) {
	/* PICK UP の帯は 3 行のまま、上下の余白だけ詰める。 */
	.pc-pickup__inner {
		gap: 0.25rem;
		padding-block: var(--picico-space-xs);
	}

	/* FEATURE の上の余白も 32px → 24px。英字が早く見え始める。 */
	.pc-feature__inner {
		padding-block-start: var(--picico-space-md);
	}

	/*
	 * 区画見出し（英字・見出し・説明・すべての記事を見る）と記事の間は、
	 * .pc-feature__inner の gap（24px）だけにする。見出しの下の 24px と重なって
	 * 約 60px の空白ができ、見出しと記事が別の区画に見えていた。
	 */
	.pc-feature .pc-section-head {
		margin-block-end: 0;
	}

	/* 今日の PICICO の写真も Hero と同じ体裁（左右 24px・角丸 6px・影なし）。 */
	.pc-feature__media {
		border-radius: var(--picico-radius-sm);
	}
}

/* ==========================================================================
 * 1-4. LATEST STORIES ／ 新着記事 5 本（D-028 §4-4）
 *
 * カードは template-parts/card/post-card.php をそのまま使い、
 * 大小の変化はこのグリッドだけで作る。同じ大きさのカードを並べない（指示 §4）。
 * ========================================================================== */

.pc-latest {
	background-color: var(--picico-color-surface-alt);
	border-top: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-latest__grid {
	display: grid;
	/* D-030 §8: SP は 1 本ごとの間隔を詰めて、一覧としてのテンポを上げる。 */
	gap: var(--picico-space-md);
	min-width: 0;
}

/*
 * D-030 §5: カテゴリー札と日付を題名の前に 1 行で置き、FEATURE と同じ階層に見せる
 * （post-card.php の meta_top）。大小のリズムは下のグリッドが作る。
 */
.pc-latest .pc-card__meta--top {
	margin-block: 0 var(--picico-space-xs);
	/* 小さい 4 本（PC で約 197px）でも札と日付が 1 行に並ぶ間隔。 */
	gap: var(--picico-space-xs);
}

/* 枠・影・角丸をやめ、写真とタイポグラフィで見せる（指示 §4・§11）。 */
.pc-latest .pc-card,
.pc-latest .pc-card:hover {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.pc-latest .pc-thumb {
	border-radius: 0;
}

/* 先頭の1本だけ題名を一段大きく。 */
.pc-latest__grid > :first-child .pc-card__title {
	font-size: var(--picico-font-size-lg);
}

@media (min-width: 48rem) {
	.pc-latest__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pc-latest__grid > :first-child {
		grid-column: 1 / -1;
	}

	/*
	 * 2本目以降は SP で写真左（row）。48rem 以上では写真上に揃えて
	 * 横並びのカードが細くなりすぎないようにする。
	 */
	.pc-latest__grid .pc-card--row {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 64rem) {
	.pc-latest__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	/* 大きい1本が左半分で2段ぶん、小さい4本が右半分に 2×2。 */
	.pc-latest__grid > :first-child {
		grid-column: span 6;
		grid-row: span 2;
	}

	.pc-latest__grid > :nth-child(n + 2) {
		grid-column: span 3;
	}

	.pc-latest__grid > :first-child .pc-card__title {
		font-size: var(--picico-font-size-xl);
	}
}

/* ==========================================================================
 * 2. SERVICE ／ こんなことでお困りではありませんか？（home/services.php）
 *
 * D-028 / 指示 §6・§10: 大きな角丸カード・塗りの丸アイコン・ドットの地はやめ、
 * 「番号 + テキスト + 細い罫線 + 矢印」だけにした。白地・ブルーは番号と矢印だけ。
 * 骨組みは FEATURE / LATEST と同じ（左に見出し列、右に内容）。
 * ========================================================================== */

.pc-services {
	background-color: var(--picico-color-surface);
	border-block-start: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-services__inner {
	display: grid;
	/* D-030 §8: SP は 1 段詰める。64rem 以上は下の媒体クエリで今までどおり。 */
	gap: var(--picico-space-md);
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding: var(--picico-space-lg) var(--picico-gutter);
}

.pc-services__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	/* 最終行の下だけ罫線を引く（各項目は上辺に引く）。 */
	border-block-end: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-services__item {
	min-width: 0;
	border-block-start: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-services__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--picico-space-sm);
	row-gap: 0.1rem;
	/* 罫線だけの行でも指で押せる高さを確保する。 */
	min-height: var(--picico-tap-size);
	padding-block: var(--picico-space-sm);
	color: var(--picico-color-text);
	text-decoration: none;
}

/* 番号は並び順から出す飾り（<ol> が順序を持つ）。細い縦罫線で本文と分ける。 */
.pc-services__num {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: stretch;
	display: flex;
	align-items: center;
	padding-inline-end: var(--picico-space-sm);
	border-inline-end: var(--picico-border-width) solid var(--picico-color-border);
	color: var(--picico-color-primary);
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

/* アイコンは補助。メニューの CSS クラスで指定したときだけ名前の前に出る（既定では出さない）。 */
.pc-services__icon {
	margin-inline-end: 0.35em;
	color: var(--picico-color-text-muted);
	vertical-align: -0.15em;
}

.pc-services__name {
	grid-column: 2;
	grid-row: 1;
	font-size: var(--picico-font-size-md);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.5;
	letter-spacing: 0;
	word-break: auto-phrase;
}

.pc-services__desc {
	grid-column: 2;
	grid-row: 2;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
	line-height: 1.6;
	letter-spacing: 0;
	word-break: auto-phrase;
}

.pc-services__arrow {
	grid-column: 3;
	grid-row: 1 / -1;
	display: inline-flex;
	align-items: center;
	color: var(--picico-color-primary);
	transition: transform var(--picico-duration-base) var(--picico-easing);
}

.pc-services__link:hover .pc-services__name,
.pc-services__link:focus-visible .pc-services__name {
	text-decoration: underline;
}

.pc-services__link:hover .pc-services__arrow {
	transform: translateX(0.25rem);
}

@media (prefers-reduced-motion: reduce) {
	.pc-services__arrow {
		transition: none;
	}

	.pc-services__link:hover .pc-services__arrow {
		transform: none;
	}
}

/* 2 列に割る。列のあいだも細い縦罫線で区切る（参考画像の見え方）。 */
@media (min-width: 48rem) {
	.pc-services__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pc-services__item:nth-child(2n) {
		padding-inline-start: var(--picico-space-md);
		border-inline-start: var(--picico-border-width) solid var(--picico-color-border);
	}

	.pc-services__item:nth-child(2n + 1) {
		padding-inline-end: var(--picico-space-md);
	}

	.pc-services__link {
		min-height: calc(var(--picico-tap-size) + 0.5rem);
	}
}

@media (min-width: 64rem) {
	/* 見出しが長い（「こんなことでお困りではありませんか？」）ので 17rem。 */
	.pc-services__inner {
		grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
		gap: var(--picico-space-xl);
		align-items: start;
		padding-block: var(--picico-space-xxl);
	}
}

/* ==========================================================================
 * 2-2. PICICO の主なサービス（home/service-list.php）
 *
 * 薄い地の 1 行帯。写真もカードも持たず、名前・一文・「詳しく見る →」だけ。
 * ========================================================================== */

.pc-svc {
	background-color: var(--picico-color-surface-alt);
	border-block-start: var(--picico-border-width) solid var(--picico-color-border);
	border-block-end: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-svc__inner {
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding: var(--picico-space-lg) var(--picico-gutter);
}

.pc-svc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--picico-space-xs) var(--picico-space-md);
	margin-block-end: var(--picico-space-md);
}

.pc-svc__title {
	margin: 0;
	color: var(--picico-color-text);
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-lg);
	font-weight: var(--picico-font-weight-bold);
	line-height: var(--picico-line-height-heading);
	word-break: auto-phrase;
}

.pc-svc__all {
	margin: 0;
}

.pc-svc__all-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: var(--picico-tap-size);
	color: var(--picico-color-primary);
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
	text-decoration: none;
}

.pc-svc__all-link:hover,
.pc-svc__all-link:focus-visible {
	text-decoration: underline;
}

.pc-svc__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-svc__item {
	min-width: 0;
	border-block-start: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-svc__link {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	height: 100%;
	min-height: var(--picico-tap-size);
	padding-block: var(--picico-space-sm);
	color: var(--picico-color-text);
	text-decoration: none;
}

.pc-svc__name {
	display: block;
	font-size: var(--picico-font-size-md);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.5;
	word-break: auto-phrase;
}

.pc-svc__desc {
	display: block;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
	line-height: 1.6;
	word-break: auto-phrase;
}

.pc-svc__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-block-start: auto;
	padding-block-start: 0.2rem;
	color: var(--picico-color-primary);
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
}

.pc-svc__link:hover .pc-svc__name,
.pc-svc__link:focus-visible .pc-svc__name {
	text-decoration: underline;
}

@media (min-width: 48rem) {
	.pc-svc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--picico-space-md);
	}
}

/* 5 件を 1 行に並べ、あいだを細い縦罫線で区切る。 */
@media (min-width: 64rem) {
	.pc-svc__inner {
		padding-block: var(--picico-space-xl);
	}

	.pc-svc__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: 0;
	}

	.pc-svc__item {
		padding-inline: var(--picico-space-md);
		border-block-start: 0;
	}

	.pc-svc__item:first-child {
		padding-inline-start: 0;
	}

	.pc-svc__item:last-child {
		padding-inline-end: 0;
	}

	.pc-svc__item + .pc-svc__item {
		border-inline-start: var(--picico-border-width) solid var(--picico-color-border);
	}
}

/* ==========================================================================
 * 3. 実績帯（template-parts/home/stats.php）
 *
 * 2026-09-15 の picico の決定で、この区画は**トップから外した**（実績は /hijimete/ にある）。
 * 部品も店舗情報の stat_* も消していないので、出したくなったときのために定義は残す。
 *
 * 濃い水色の地 + 白文字。数字は店舗情報（D-006）から来る。
 * 地は primary #0d6d80（白と 5.97:1）に、それより濃い primary-dark の細い斜線を重ねる。
 * 斜線の上でも白の比は下がらない（primary-dark は白と 8.28:1）。
 * ========================================================================== */

.pc-stats {
	padding-block: var(--picico-space-xl);
	color: var(--picico-color-surface);
	background-color: var(--picico-color-primary);
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 0.75rem,
		var(--picico-color-primary-dark) 0.75rem calc(0.75rem + 1px)
	);
}

.pc-stats__inner {
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding-inline: var(--picico-gutter);
}

.pc-stats__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--picico-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--picico-space-md) var(--picico-space-sm);
	border: var(--picico-border-width) solid var(--picico-color-primary-light);
	border-radius: var(--picico-radius-md);
	background-color: var(--picico-color-primary-dark);
	text-align: center;
}

.pc-stats__value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0 0.15em;
	margin: 0;
	line-height: 1.1;
}

.pc-stats__num {
	font-family: var(--picico-font-display);
	font-size: calc(var(--picico-font-size-display) * 1.3);
	font-weight: var(--picico-font-weight-bold);
	letter-spacing: 0.02em;
	/* 桁がそろって見えるように。 */
	font-variant-numeric: tabular-nums;
}

.pc-stats__unit {
	font-size: var(--picico-font-size-lg);
	font-weight: var(--picico-font-weight-bold);
}

.pc-stats__label {
	margin: var(--picico-space-xs) 0 0;
	padding-block-start: var(--picico-space-xs);
	border-block-start: 2px solid var(--picico-color-accent-light);
	color: var(--picico-color-primary-pale);
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.5;
	word-break: auto-phrase;
}

.pc-stats__more {
	margin: var(--picico-space-lg) 0 0;
	text-align: center;
}

/* 濃い地の上の白い枠線ボタン。hover で白地に反転。 */
.pc-stats__btn {
	border-color: var(--picico-color-surface);
	color: var(--picico-color-surface);
	background-color: transparent;
}

.pc-stats__btn:hover,
.pc-stats__btn:focus-visible {
	color: var(--picico-color-primary-dark);
	background-color: var(--picico-color-surface);
}

/* 濃い地の上でもフォーカスリングが見えるように白で出す。 */
.pc-stats :focus-visible {
	outline-color: var(--picico-color-surface);
}

@media (min-width: 30rem) {
	.pc-stats__list {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

@media (min-width: 64rem) {
	.pc-stats {
		padding-block: var(--picico-space-xxl);
	}

	.pc-stats__list {
		gap: var(--picico-space-md);
	}

	.pc-stats__item {
		padding-block: var(--picico-space-lg);
	}
}

/* ==========================================================================
 * 4. CONTACT ／ ご相談（template-parts/home/contact.php）— トップのみ
 *
 * D-028 / 計画 §4-8: 店内写真の背景と暗幕はやめ、白地＋上下の細い罫線にした。
 * 左に見出し、右に大きなボタン 3 つ。塗りはオンライン予約の 1 つだけ（ブルー 5%）。
 * ボタンの色は components.css の体系（--line / --outline / --primary）が持つ。
 * ========================================================================== */

.pc-contact-band {
	background-color: var(--picico-color-surface);
	border-block-start: var(--picico-border-width) solid var(--picico-color-border);
	border-block-end: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-contact-band__inner {
	display: grid;
	/* D-030 §8: SP は 1 段詰める（CTA の周りも含めてテンポを上げる）。 */
	gap: var(--picico-space-md);
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding: var(--picico-space-lg) var(--picico-gutter);
}

.pc-contact-band__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--picico-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-contact-band__item {
	display: flex;
	flex-direction: column;
	gap: var(--picico-space-xs);
	min-width: 0;
}

/*
 * 3 つ並ぶので、文字は本文と同じ大きさにして左右の余白を詰める。
 * 「LINE で相談する」「オンライン予約」が 768〜1280px で 2 行に折れないため。
 */
.pc-contact-band__btn {
	width: 100%;
	min-height: calc(var(--picico-tap-size) + 0.75rem);
	padding-inline: var(--picico-space-sm);
	font-size: var(--picico-font-size-md);
}

/* 電話番号だけ一段大きく。桁をそろえ、折り返さない。 */
.pc-contact-band__btn--tel {
	font-size: var(--picico-font-size-lg);
	letter-spacing: 0.04em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pc-contact-band__note {
	margin: 0;
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
	line-height: 1.6;
	text-align: center;
	word-break: auto-phrase;
}

@media (min-width: 48rem) {
	.pc-contact-band__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	/*
	 * 見出し列は FEATURE / LATEST より少し広い 17rem。
	 * 「まずはお気軽にご相談ください。」を 2 行で収めるため（15rem では
	 * 「くださ / い。」と折れる）。右の 3 ボタンの幅も確保できる。
	 */
	.pc-contact-band__inner {
		grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
		gap: var(--picico-space-xl);
		align-items: start;
		padding-block: var(--picico-space-xxl);
	}
}

/* ==========================================================================
 * 5. 404（D-007 / ブリーフ §3.8）
 * ========================================================================== */

.pc-404__header {
	margin-block-end: var(--picico-space-xl);
}

.pc-404__title {
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-xxl);
	font-weight: var(--picico-font-weight-bold);
	line-height: var(--picico-line-height-heading);
}

.pc-404__lead {
	margin-block-start: var(--picico-space-sm);
	color: var(--picico-color-text-muted);
	/* 短い案内文なので文節で折る（Phase 4）。 */
	word-break: auto-phrase;
}

.pc-404__cat-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--picico-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-404__contact {
	padding: var(--picico-space-md);
	border-radius: var(--picico-radius-md);
	background-color: var(--picico-color-primary-pale);
}

.pc-404__contact-text {
	font-size: var(--picico-font-size-sm);
}

.pc-404__contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--picico-space-sm);
	margin-block-start: var(--picico-space-md);
}

.pc-404__contact-actions .pc-btn {
	flex: 1 1 13rem;
}

.pc-404__contact-note {
	display: flex;
	align-items: center;
	gap: 0.3em;
	margin-block-start: var(--picico-space-sm);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
}

/* 検索・カテゴリー・お困りごとで上下の区画が続くので、余白を詰める。 */
.pc-404 + .pc-services,
.pc-services + .pc-404 {
	margin-block-start: 0;
}

.pc-services + .pc-404 {
	padding-block-start: var(--picico-space-xl);
}