/* =========================================================================
   renewal.css — 2026年 全面改修の設計レイヤー
   -------------------------------------------------------------------------
   意図：
   「工具屋の会社案内」ではなく「地域に他にない工具の専門店」に見せる。
   明朝＋広い字間の見出し／縦組みの小見出し／余白／全面写真／黒帯 で、
   工具を “道具” として扱うトーンをつくる。

   既存の tokens/base/layout/components の後に読み込み、上書きする。
   写真が未設定でも崩れないこと（.figure--placeholder が受ける）。
   ========================================================================= */

:root {
	/* -------------------------------------------------------------------
	   文字サイズ（既定より一段大きい）

	   このサイトの読み手は、レンタル利用者の実績で中央値56歳・平均57.5歳・
	   最高80歳。64歳以上が21人中9人。加えて顧客の8割が個人大工で、
	   大工人口そのものが高齢化している。
	   参照デザインの14px本文はこの層には小さいため、全体を一段上げる。
	   tokens.css の値をここで上書きする（元ファイルは触らない）。
	   ------------------------------------------------------------------- */
	--text-xs: 13px;
	--text-sm: 15px;
	--text-base: 17px;
	--text-lg: 20px;

	/* 本文の最小サイズ。これを下回る指定をしないための目安 */
	--text-min: 13px;

	/* 真鍮 — 中古・研磨という「他にない」部分だけに差す色 */
	--color-shinchu: #a8863a;
	--color-shinchu-soft: #c4a463;
	/* 文字に使う真鍮。#a8863a は生成り地でコントラスト3.17しか出ず読みづらい */
	--color-shinchu-text: #7d6124;

	/* 字間（このサイトの見た目を決める主役） */
	--tracking-wide: 0.18em;
	--tracking-wider: 0.32em;
	--tracking-widest: 0.5em;

	/* 余白（能作の呼吸に寄せて既存より大きく） */
	--space-40: 160px;
	--space-48: 192px;

	--container-text: 760px;
}

/* -------------------------------------------------------------------------
   1. 見出しの型
   ---------------------------------------------------------------------- */

/* 小見出し（英字・欧文）: 極小・最大字間 */
.eyebrow {
	display: block;
	font-family: var(--font-en-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-to-deep);
	margin-bottom: var(--space-5);
}

.eyebrow--light {
	color: rgba(252, 251, 248, 0.6);
}

/* 中央寄せの見出し群（能作の中核パターン） */
.lede {
	text-align: center;
	max-width: var(--container-text);
	margin-inline: auto;
}

.lede__eyebrow {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	color: var(--color-to-deep);
	display: block;
}

/* 細い横罫。見出しの前後に置く */
.rule {
	display: block;
	width: 40px;
	height: 1px;
	background: var(--color-line);
	border: 0;
	margin: var(--space-6) auto;
}

.rule--left {
	margin-inline: 0;
}

.rule--light {
	background: rgba(252, 251, 248, 0.35);
}

.lede__title {
	font-family: var(--font-serif);
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: var(--tracking-wide);
	color: var(--color-sumi);
}

.lede__body {
	margin-top: var(--space-8);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 2.0;
	color: var(--color-sumi-soft);
	text-align: left;
}

/* 左寄せのセクション見出し（罫が下に付く） */
.sec-title {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 500;
	letter-spacing: var(--tracking-wider);
	color: var(--color-sumi);
}

.sec-title + .rule {
	margin-left: 0;
}

/* -------------------------------------------------------------------------
   2. 縦組み（このサイトの署名。日本語の道具の店であることを一目で出す）
   ---------------------------------------------------------------------- */

.vertical {
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-family: var(--font-serif);
	letter-spacing: var(--tracking-wide);
	line-height: 1;
}

/* 縦組みのラベル（写真の上に重ねる） */
.vlabel {
	writing-mode: vertical-rl;
	font-family: var(--font-serif);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wider);
	line-height: 1;
	color: var(--color-paper);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
	/* SPでは縦組みを解除する（狭い画面で縦組みは読めない） */
	.vertical,
	.vlabel {
		writing-mode: horizontal-tb;
		text-orientation: mixed;
	}
}

/* -------------------------------------------------------------------------
   3. ヒーロー（トップ）— 左に写真、右に余白と言葉
   ---------------------------------------------------------------------- */

.hero-split {
	display: grid;
	grid-template-columns: 52fr 48fr;
	min-height: min(88vh, 820px);
	background: var(--color-paper);
}

.hero-split__media {
	position: relative;
	overflow: hidden;
}

.hero-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-split__label {
	position: absolute;
	top: var(--space-10);
	right: var(--space-8);
}

.hero-split__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-16) clamp(24px, 6vw, 88px);
}

.hero-split__title {
	font-family: var(--font-serif);
	font-size: clamp(24px, 2.9vw, 40px);
	font-weight: 500;
	line-height: 2;
	letter-spacing: var(--tracking-wide);
	color: var(--color-sumi);
}

.hero-split__sub {
	margin-top: var(--space-8);
	font-family: var(--font-serif);
	font-size: clamp(14px, 1.15vw, 17px);
	letter-spacing: var(--tracking-wide);
	line-height: 2.2;
	color: var(--color-kashi-deep);
}

.hero-split__meta {
	margin-top: var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: 2;
	color: var(--color-to-deep);
}

.hero-split__actions {
	margin-top: var(--space-10);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

@media (max-width: 900px) {
	.hero-split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	/* 狭い画面で字間を詰める（広いままだと末尾に1文字だけ折り返す） */
	.hero-split__sub,
	.hero-split__title {
		letter-spacing: 0.08em;
	}

	.hero-split__media {
		aspect-ratio: 4 / 3;
	}

	.hero-split__body {
		padding: var(--space-12) var(--space-6) var(--space-16);
	}
}

/* -------------------------------------------------------------------------
   4. 下層ページのヒーロー — 左が黒帯、右が写真
   ---------------------------------------------------------------------- */

.page-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 280px;
}

.page-hero__title-wrap {
	background: var(--color-sumi);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: var(--space-12) clamp(24px, 4vw, 64px);
}

.page-hero__title {
	font-family: var(--font-serif);
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 500;
	letter-spacing: var(--tracking-wider);
	color: var(--color-paper);
	margin: 0;
}

.page-hero__en {
	display: block;
	margin-top: var(--space-4);
	font-family: var(--font-en-sans);
	font-size: 12px;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: rgba(252, 251, 248, 0.5);
}

.page-hero__media {
	position: relative;
	overflow: hidden;
}

.page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.page-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.page-hero__title-wrap {
		justify-content: flex-start;
		padding: var(--space-10) var(--space-6);
	}

	.page-hero__media {
		aspect-ratio: 16 / 9;
	}
}

/* -------------------------------------------------------------------------
   5. 写真が無いときの受け皿（TODO のまま公開しても崩れないこと）
   ---------------------------------------------------------------------- */

.figure--placeholder {
	position: relative;
	background:
		linear-gradient(135deg, var(--color-shikkui) 0%, var(--color-kinari) 55%, var(--color-shikkui) 100%);
}

.figure--placeholder::after {
	content: attr(data-label);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-en-sans);
	font-size: 10px;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-to);
}

.figure--placeholder-dark {
	background: linear-gradient(135deg, #2c2823 0%, #1f1b17 60%, #2c2823 100%);
}

.figure--placeholder-dark::after {
	color: rgba(252, 251, 248, 0.35);
}

/* -------------------------------------------------------------------------
   6. 「何でお困りですか？」— トップの主要導線
   ---------------------------------------------------------------------- */

.trouble {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--color-line);
	border-left: 1px solid var(--color-line);
}

.trouble__item {
	border-right: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	padding: var(--space-10) var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background: var(--color-paper);
	transition: background 0.25s, color 0.25s;
}

.trouble__item:hover {
	background: var(--color-sumi);
}

.trouble__num {
	font-family: var(--font-en-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--tracking-wider);
	color: var(--color-shinchu-text);
}

.trouble__label {
	font-family: var(--font-serif);
	/* 4列に収める。字間を広いままにすると「下取りして買い替えたい」が折り返す */
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: var(--color-sumi);
	transition: color 0.25s;
}

.trouble__note {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: 1.9;
	color: var(--color-to-deep);
	transition: color 0.25s;
}

.trouble__item:hover .trouble__label {
	color: var(--color-paper);
}

.trouble__item:hover .trouble__note {
	color: rgba(252, 251, 248, 0.7);
}

@media (max-width: 1024px) {
	.trouble {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.trouble {
		grid-template-columns: 1fr;
	}

	.trouble__item {
		padding: var(--space-6);
	}
}

/* -------------------------------------------------------------------------
   7. 3択比較（修理 / 下取り / 買替）— 下取り事例の核
   ---------------------------------------------------------------------- */

.compare {
	border: 1px solid var(--color-line);
	background: var(--color-kinari-light);
	padding: clamp(24px, 4vw, 56px);
}

.compare__rows {
	display: grid;
	gap: var(--space-4);
}

.compare__row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px dotted var(--color-line);
}

.compare__label {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	letter-spacing: var(--tracking-wide);
	color: var(--color-sumi-soft);
}

.compare__label small {
	display: block;
	margin-top: var(--space-1);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	letter-spacing: 0;
	color: var(--color-to-deep);
}

.compare__value {
	font-family: var(--font-en-serif);
	font-size: clamp(20px, 2.2vw, 28px);
	letter-spacing: 0.02em;
	color: var(--color-sumi);
	white-space: nowrap;
}

.compare__value .yen {
	font-family: var(--font-serif);
	font-size: 0.6em;
	margin-left: 2px;
}

/* 結論の行だけ強調する */
.compare__row--result {
	border-bottom: 0;
	border-top: 1px solid var(--color-sumi);
	margin-top: var(--space-4);
	padding-top: var(--space-6);
}

.compare__row--result .compare__label {
	color: var(--color-sumi);
}

.compare__row--result .compare__value {
	color: var(--color-shu);
	font-size: clamp(26px, 3vw, 36px);
}

.compare__note {
	margin-top: var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: 1.9;
	color: var(--color-sumi-soft);
}

/* -------------------------------------------------------------------------
   8. 実績の数値ブロック（件数ガードが効く場所）
   ---------------------------------------------------------------------- */

.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--color-line);
	border: 1px solid var(--color-line);
}

.stat {
	background: var(--color-paper);
	padding: var(--space-10) var(--space-6);
	text-align: center;
}

.stat__label {
	display: block;
	font-family: var(--font-sans);
	font-size: 14px;
	letter-spacing: var(--tracking-wide);
	color: var(--color-to-deep);
}

.stat__value {
	display: block;
	margin-top: var(--space-4);
	font-family: var(--font-en-serif);
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1;
	color: var(--color-sumi);
}

.stat__unit {
	display: inline;
	font-family: var(--font-serif);
	font-size: 0.4em;
	margin-left: 4px;
	letter-spacing: var(--tracking-wide);
}

/* 母数が閾値未満のとき。数値を出さずここに落ちる */
.stat--pending .stat__value {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	color: var(--color-to);
	letter-spacing: var(--tracking-wide);
}

.stats__source {
	grid-column: 1 / -1;
	background: var(--color-paper);
	padding: var(--space-5) var(--space-6);
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-to-deep);
	text-align: center;
}

@media (max-width: 768px) {
	.stats {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   9. 修理の行程（DAY 0 → 6）
   ---------------------------------------------------------------------- */

.timeline {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	border-top: 1px solid var(--color-line);
}

.timeline__step {
	position: relative;
	padding: var(--space-8) var(--space-4) var(--space-6);
}

.timeline__step::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-shinchu);
}

.timeline__day {
	display: block;
	font-family: var(--font-en-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-shinchu-text);
}

.timeline__label {
	display: block;
	margin-top: var(--space-3);
	font-family: var(--font-serif);
	font-size: var(--text-base);
	letter-spacing: var(--tracking-wide);
	line-height: 1.8;
	color: var(--color-sumi);
}

@media (max-width: 900px) {
	.timeline {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.timeline {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   10. 事例カード（修理事例 / 下取り事例 / 中古在庫 で共通）
   ---------------------------------------------------------------------- */

.case-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-10) var(--space-8);
}

.case-card {
	display: flex;
	flex-direction: column;
	background: transparent;
}

.case-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: var(--space-5);
}

.case-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.case-card:hover .case-card__media img {
	transform: scale(1.04);
}

.case-card__meta {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	color: var(--color-to-deep);
}

.case-card__title {
	margin-top: var(--space-3);
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color-sumi);
}

.case-card__figures {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-line-soft);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-to-deep);
}

.case-card__figures b {
	font-family: var(--font-en-serif);
	font-size: var(--text-lg);
	font-weight: 400;
	color: var(--color-sumi);
	margin-left: 4px;
}

@media (max-width: 1024px) {
	.case-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.case-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   11. 全面写真の帯（セクションの区切り）
   ---------------------------------------------------------------------- */

.band {
	position: relative;
	min-height: clamp(220px, 34vw, 420px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.band img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.band__inner {
	position: relative;
	text-align: center;
	padding: var(--space-12) var(--space-6);
	color: var(--color-paper);
}

.band__title {
	font-family: var(--font-serif);
	font-size: clamp(18px, 2vw, 26px);
	font-weight: 500;
	line-height: 2;
	letter-spacing: var(--tracking-wider);
	text-shadow: 0 1px 20px rgba(0, 0, 0, 0.45);
}

/* 黒背景のセクション */
.section--sumi {
	background: var(--color-sumi);
	color: var(--color-kinari);
}

.section--sumi .sec-title,
.section--sumi .lede__title {
	color: var(--color-paper);
}

.section--sumi .lede__body {
	color: rgba(252, 251, 248, 0.72);
}

/* 黒セクションでは数値ブロックを地の色に溶かす。
   （既定のクリーム地のままだと、明色のラベルが背景と同化して読めない） */
.section--sumi .stats {
	background: rgba(252, 251, 248, 0.18);
	border-color: rgba(252, 251, 248, 0.18);
}

.section--sumi .stat,
.section--sumi .stats__source {
	background: var(--color-sumi);
}

.section--sumi .stat__label {
	color: rgba(252, 251, 248, 0.7);
}

.section--sumi .stat__value {
	color: var(--color-paper);
}

.section--sumi .stat--pending .stat__value {
	color: rgba(252, 251, 248, 0.45);
}

.section--sumi .stats__source {
	color: rgba(252, 251, 248, 0.5);
	border-top: 0;
}

/* 帯が写真未設定のとき、プレースホルダの文字が見出しと重なるのを避ける */
.band.figure--placeholder::after {
	align-items: flex-end;
	justify-content: flex-end;
	padding: var(--space-4);
}

/* -------------------------------------------------------------------------
   12. ボタン（能作に寄せて、角丸を捨て線で見せる）
   ---------------------------------------------------------------------- */

.btn {
	border-radius: 0;
	font-family: var(--font-sans);
	letter-spacing: var(--tracking-wide);
}

/* LINE。ブランド緑のベタ塗りは全体のトーンを壊すため、
   墨のボタンに小さな緑の印を付けて識別させる。 */
.btn--line {
	background: var(--color-sumi);
	border: 1px solid var(--color-sumi);
	color: var(--color-paper);
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-sm);
}

.btn--line::before {
	content: "";
	width: 7px;
	height: 7px;
	background: #06c755;
	flex: 0 0 auto;
}

.btn--line:hover {
	background: var(--color-sumi-soft);
	border-color: var(--color-sumi-soft);
	color: var(--color-paper);
}

/* 黒背景の上に置くとき */
.section--sumi .btn--line,
.band .btn--line {
	background: transparent;
	border-color: rgba(252, 251, 248, 0.5);
}

.section--sumi .btn--line:hover,
.band .btn--line:hover {
	background: var(--color-paper);
	color: var(--color-sumi);
	border-color: var(--color-paper);
}

.btn--outline {
	background: transparent;
	border: 1px solid var(--color-sumi);
	color: var(--color-sumi);
	padding: var(--space-4) var(--space-8);
	display: inline-block;
	font-size: var(--text-sm);
}

.btn--outline:hover {
	background: var(--color-sumi);
	color: var(--color-paper);
}

.btn--outline-light {
	background: transparent;
	border: 1px solid rgba(252, 251, 248, 0.5);
	color: var(--color-paper);
	padding: var(--space-4) var(--space-8);
	display: inline-block;
	font-size: var(--text-sm);
}

.btn--outline-light:hover {
	background: var(--color-paper);
	color: var(--color-sumi);
}

/* テキストリンク（▸ 付き。能作の二次導線） */
.link-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	color: var(--color-sumi);
}

.link-more::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent var(--color-shinchu-text);
}

.link-more:hover {
	color: var(--color-shinchu);
}

.link-more--light {
	color: var(--color-paper);
}

/* -------------------------------------------------------------------------
   13. セクションの余白を能作寄りに広げる
   ---------------------------------------------------------------------- */

.section--airy {
	padding-top: clamp(72px, 10vw, 160px);
	padding-bottom: clamp(72px, 10vw, 160px);
}

.section--flush {
	padding-top: 0;
	padding-bottom: 0;
}

/* -------------------------------------------------------------------------
   14. フッターと小さな文字のコントラスト
   ---------------------------------------------------------------------- */

/* 墨地に対して薄すぎた（3.73）。読めなくてよい文字ではない */
.footer__copyright,
.footer__legal a {
	font-size: var(--text-xs);
	color: rgba(252, 251, 248, 0.82);
}

.footer__info,
.footer__nav-list a {
	font-size: var(--text-sm);
}

/* 本文の最小サイズを下回らせない保険 */
.section p,
.section li,
.section td,
.section th {
	font-size: max(var(--text-sm), 15px);
}

/* ただし注記・出典は据え置き（上で個別に指定済み） */
.section .compare__note,
.section .stats__source {
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   15. 地色と罫線の整理（2026-09-19）

   「色味が古く感じる」という指摘への対応。原因は3つに分かれていた。

   (a) 地色の彩度が高い
       paper #faf6ec / kinari #f2ebdb / shikkui #e8e0ce と生成りが3段重なり、
       罫線まで茶系 #d8d0bd だった。この「全面クリーム＋茶の罫線」は
       和風テンプレートの定番配色で、古く見える最大の要因。
       参照デザインの洗練は、地をほぼ白に寄せ、色は写真と真鍮だけに持たせて出ている。
       → 生成りの気配は残したまま、彩度と明度差を落とす。

   (b) 罫線で囲んだ格子が「表」に見える
       トップの「何でお困りですか？」が8マス全周を罫線で囲まれており、
       余白ではなく線で区切る組み方になっていた。
       → 外枠と縦罫を外し、横の細い線だけで段を分ける。

   (c) 点線（dotted）が古い
       → 実線のヘアラインに置き換える。

   地が明るくなる方向なので、2026-09-18 に測ったコントラストは下がらない。
   ---------------------------------------------------------------------- */

:root {
	/* 生成り系を、色みを残したまま白へ寄せる */
	--color-paper: #fcfbf8;
	--color-kinari: #f5f3ed;
	--color-kinari-light: #faf8f4;
	--color-shikkui: #ebe8e0;

	/* 罫線から茶色を抜く。線で主張させず、余白に仕事をさせる */
	--color-line: #e5e2da;
	--color-line-soft: #eeece6;
}

/* --- (b) 「何でお困りですか？」を格子から段組みへ --- */

.trouble {
	border-top: 0;
	border-left: 0;
	column-gap: var(--space-8);
}

.trouble__item {
	border-right: 0;
	border-bottom: 1px solid var(--color-line);
	background: transparent;
	padding: var(--space-8) 0;
}

/* 全面を黒で塗る当たりは、線が無くなると範囲が分からず唐突に見える。
   下線が濃くなり、見出しが真鍮に変わる当たりへ置き換える。 */
.trouble__item:hover {
	background: transparent;
	border-bottom-color: var(--color-sumi);
}

.trouble__item:hover .trouble__label {
	color: var(--color-shinchu-text);
}

.trouble__item:hover .trouble__note {
	color: var(--color-to-deep);
}

@media (max-width: 560px) {
	.trouble__item {
		padding: var(--space-6) 0;
	}
}

/* --- (b) 比較表と数値ブロックの囲みを外す --- */

.compare {
	border: 0;
	border-top: 1px solid var(--color-sumi);
	background: transparent;
	padding: var(--space-10) 0 0;
}

/* (c) 点線をヘアラインへ */
.compare__row {
	border-bottom: 1px solid var(--color-line);
}

/* 数値は3枚のタイルではなく、縦罫で仕切った一続きの帯にする */
.stats {
	gap: 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}

.stat {
	background: transparent;
	border-left: 1px solid var(--color-line);
}

.stat:first-child {
	border-left: 0;
}

@media (max-width: 700px) {
	.stats {
		grid-template-columns: 1fr;
	}

	.stat {
		border-left: 0;
		border-top: 1px solid var(--color-line);
	}

	.stat:first-child {
		border-top: 0;
	}
}

/* -------------------------------------------------------------------------
   16. 実測した数字の書体（2026-09-19）

   平林工機は建築業界向けにDXシステムを売る会社へ向かう。その一番の証明は
   「自社がそれで経営している」ことで、サイト上ではこの数字がその役を負う。

   ところが数字は Cormorant Garamond（明朝系）で組まれていた。同じ数字でも
   セリフは「由緒ある店」に、サンセリフは「計測している会社」に読める。
   和のトーン（明朝の見出し・縦組み）は本文側に残したまま、
   数字だけをサンセリフへ移して、データを扱う側の気配を足す。

   桁を揃える（tabular-nums）のも意図的。縦に並んだ金額の小数点と桁が
   揃うと、目で足し合わせられる＝数字が「読み物」でなく「表」になる。

   対象は実測値を出している3箇所だけ。見出しの英字ラベルは既にサンセリフで、
   装飾用の年号などは明朝のまま残す。
   ---------------------------------------------------------------------- */

.compare__value,
.stat__value,
.case-card__figures b {
	font-family: var(--font-en-sans);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Inter は Cormorant より字面が大きい。同じ指定だと数字だけ出しゃばるので一段下げる */
.stat__value {
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.compare__value {
	font-size: clamp(18px, 2vw, 25px);
	font-weight: 400;
	letter-spacing: 0;
}

.case-card__figures b {
	font-size: var(--text-base);
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   17. 和文の字間を、和文の値に直す（2026-09-19）

   --tracking-wide(0.18em) / --tracking-wider(0.32em) は**欧文のための値**。
   HIRABAYASHI KOKI — SINCE 1955 や SOLD ARCHIVE のようなラベルでは、
   字幅の違う欧文が並ぶので、開けるほど格調が出る。

   ところが和文は文字そのものが正方形で、既に余白を内側に持っている。
   同じ0.32emを当てると文字幅の1/3が空き、「園 芸 工 具 レ ン タ ル」が
   単語の塊として読めなくなる（1文字ずつ拾う読み方になる）。
   読み手はレンタル利用者の実績で中央値56歳・最高80歳。ここは特に不利。

   もう一つの問題は、階層を「大きさ」ではなく「字間」で作っていたこと。
   見出し22pxと本文17pxの差が5pxしかなく、足りないぶんを字間で補っていた。
   読みやすさを削って見た目の差を出す形になっていたので、順番を戻す。
   字間を詰めたぶん、見出しのサイズを上げて階層を作り直す。

   欧文ラベル（--font-en-sans を使う5箇所）と縦組み（.vertical / .vlabel）は
   そのまま。縦組みは字間が広いほうが成立する、このサイトの署名。
   ---------------------------------------------------------------------- */

:root {
	/* 和文の見出し。詰めすぎると平板になるので、気配が残る程度に開ける */
	--tracking-ja-title: 0.12em;
	/* 和文の本文・ボタン・リンク。塊として見える範囲 */
	--tracking-ja-text: 0.04em;
	/* 大きな見出しは字面が大きいぶん、わずかに開けたほうが締まる */
	--tracking-ja-display: 0.08em;
}

/* --- 見出し：字間を詰めて、そのぶん大きくする --- */

.sec-title {
	font-size: var(--text-2xl); /* 22 → 28px。本文17pxとの差をはっきりさせる */
	letter-spacing: var(--tracking-ja-title);
}

.lede__title {
	letter-spacing: var(--tracking-ja-title);
}

.page-hero__title {
	font-size: clamp(20px, 2.1vw, 28px);
	letter-spacing: var(--tracking-ja-title);
}

.band__title {
	letter-spacing: var(--tracking-ja-title);
}

.hero-split__title {
	letter-spacing: var(--tracking-ja-display);
}

/* --- 読ませる文字・押させる文字：塊として見えるまで詰める --- */

.hero-split__sub,
.lede__eyebrow,
.compare__label,
.timeline__label,
.stat__label,
.stat__unit,
.stat--pending .stat__value,
.case-card__meta {
	letter-spacing: var(--tracking-ja-text);
}

/* ボタンとテキストリンクは「押す塊」。バラけると見出しと区別がつかなくなる */
.btn,
.link-more {
	letter-spacing: var(--tracking-ja-text);
}

/* -------------------------------------------------------------------------
   18. 欧文を和文と同じ家族に揃える（2026-09-19）

   和文（明朝＋ゴシック）に対して、欧文と数字だけ別の家族を当てていた。
     --font-en-serif: Cormorant Garamond
     --font-en-sans:  Inter
   3つ目・4つ目の声が混ざり、和文の隣で骨格が合っていなかった。

   実測して分かったこと:
   - **Inter は一度も読み込まれていなかった**（Google Fonts の URL に無い）。
     欧文ラベルと数字は閲覧者の端末の既定サンセリフで出ていた。
     Mac は SF、Windows は Segoe UI とバラバラで、ウェイト指定も効かない
     （400 と 500 が同じ太さで描画されていた）。
   - **Cormorant Garamond は金額に向かない**。オールドスタイル数字なので
     1 が I に見え、「12,800円」が「I2,800円」と読める。好みでなく誤読の問題。
   - **Noto Serif JP は桁揃え（tabular-nums）に対応していない**。
     "111"=141.3px / "000"=167px と幅が違い、指定しても変わらない。
     金額を縦に並べると桁がガタつく。
   - **Noto Sans JP は数字が最初から等幅**（"111" も "000" も 166.6px）。
     指定なしで常に桁が揃う。

   Noto は和文と欧文を同じプロジェクトで設計しているので、混植しても段差が出ない。
   読み込む家族も2つで済む。
   このサイトは既に「見出し＝明朝／本文＝ゴシック」の対比で組んであるので、
   数字と欧文ラベルをゴシック側に置けば、その対比に乗るだけで声は増えない。

   トークン名の en- は残す（欧文用という役割は変わらないため）。
   14箇所の指定を書き換えず、実体だけ差し替える。
   ---------------------------------------------------------------------- */

:root {
	--font-en-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
	--font-en-serif: "Noto Serif JP", serif;
}

/* -------------------------------------------------------------------------
   19. カードの罫線と数値行を、横並びで揃える（2026-09-19）

   中古一覧のカードは商品名の行数が揃わない。
   「マキタ ブロワー UB1103」は1行、
   「マキタ 充電式アングルインパクトドライバ TL060DRF（14.4V）」は2行。
   .case-card__figures は直前から margin-top で離れているだけなので、
   1行のカードだけ「状態／価格」と、その上の細い罫線が高く出る。
   実測すると同じ段で 37px ずれていた。横に3枚並ぶので、罫線の段差が目立つ。

   写真が入ると画像の高さが揃うぶん、このずれは今より見えるようになる。

   margin-top: auto でカードの下端に寄せる手は使わない。
   「状態／価格／在庫日数」が折り返す枚数だけ罫線が上に伸び、
   今度は罫線が別の高さで揃わなくなる（実際に50pxずれた）。

   見出しの箱を2行ぶんで固定するのが素直。
   1行の商品名でも2行ぶんの高さを取るので、罫線が必ず同じ高さに来る。
   ---------------------------------------------------------------------- */

.case-card__title {
	/* font-size 20px × line-height 1.8 = 36px。その2行ぶん */
	min-height: 72px;
}

/* -------------------------------------------------------------------------
   20. 工具の写真と、数字を売る事業に合わせて設計を寄せる（2026-09-19）

   ここまでの設計は能作を参照していた。能作は鋳物＝素材が単色の金属なので、
   生成りの地・明朝・広い余白で成立する。工具は成立しない。
   マキタのターコイズ、HiKOKIのグリーン、MAXのレッドという彩度の高い識別色を
   各社が持っていて、静謐な地に置くと必ず色が暴れる（模擬写真で確認した）。

   加えて、平林工機は建築業界向けにDXシステムを売る会社へ向かう。
   買い手は工務店・大工の社長＝いまの顧客と同じ層なので、一般的なSaaSの
   見た目に振ると「東京のIT企業が売りに来た」になり、最大の差別化を捨てる。
   明朝と縦組みは資産なので外さない。

   だから寄せ先は「工芸品の静謐」から「道具と数字の精度」へ。
   ブランドの声（大見出し・縦組み・余白）は明朝のまま残し、
   情報を担う部分（カードの見出し・表のラベル・写真の器）を機械側へ移す。
   ---------------------------------------------------------------------- */

:root {
	/* 地から暖色を抜いて中立へ。
	   生成りは、それ自体が色を持っているぶん、彩度のある機体色とぶつかる。
	   無彩色寄りの地は、どの機体色が来ても受け止めて自分は目立たない。
	   完全な無彩色は冷たいので、ごくわずかに暖かみを残す。 */
	--color-paper: #faf9f7;
	--color-kinari: #f1f0ec;
	--color-kinari-light: #f7f6f3;
	--color-shikkui: #e7e6e1;
	--color-line: #e2e1dc;
	--color-line-soft: #ecebe7;
}

/* --- 写真に器を与える ---------------------------------------------------
   いま写真は地の上に直接置かれている。背景も光も大きさも揃っていない写真
   （ヤフオク・メルカリ用に現場で撮ったもの）が162枚並ぶと、一覧が
   フリマの検索結果になる。撮影の規格を先方と決めるのが本筋だが、
   規格が無い状態でも崩れないよう、器の側で受け止める。

   object-fit を cover から contain にするのは、工具が切れないため。
   出品写真は正方形が多く、4:3の枠に cover で入れると上下が落ちて
   本体の一部が見えなくなる。器の地色が余白として出るので、
   写真の縦横がばらついても枠の大きさと重心が揃う。 */

.case-card__media,
.used-card__media {
	background: var(--color-kinari);
}

.case-card__media img,
.used-card__media img {
	object-fit: contain;
}

/* 拡大の当たりは、写真が枠いっぱいでないと不自然なので外す */
.case-card:hover .case-card__media img {
	transform: none;
}

/* --- 情報を担う文字を機械側へ -------------------------------------------
   明朝は「店の声」。商品名や表のラベルは声ではなく情報なので、
   本文と同じゴシックに揃える。読む速さが上がり、
   数字と並んだときに書体が揃う（データを扱う会社の見え方）。
   大見出し・ヒーロー・縦組みは明朝のまま＝和の芯は残す。 */

.case-card__title,
.used-card__title,
.compare__label,
.timeline__label {
	font-family: var(--font-sans);
	font-weight: 500;
}

/* ゴシックは明朝より字面が大きい。同じpxだと重く見えるので一段落とす */
.case-card__title {
	font-size: var(--text-base);
	line-height: 1.75;
	min-height: calc(var(--text-base) * 1.75 * 2);
}

/* --- 一覧を「表」として見せる -------------------------------------------
   カードを線で囲むのではなく、上端に一本だけ細い罫を置く。
   横に並んだとき、罫が揃って1本の線に見え、整理されている印象になる。
   囲むと「商品パネル」になり、量販店の見た目に近づく。 */

.case-card {
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-5);
}

.case-card__media,
.used-card__media {
	border-radius: 0;
}

/* -------------------------------------------------------------------------
   21. セクションの境目が見える明度差にする（2026-09-19）

   地色を無彩色へ寄せた結果、明るい地と沈んだ地の差が
   (250,249,247) → (241,240,236) まで縮んでいた。
   画素の差の合計で 29／765。これはほぼ見えない。

   読み手はレンタル利用者の実績で中央値56歳・最高80歳。
   加齢で水晶体が黄変すると、低い明度差の識別がまず落ちる。
   明るい屋外や安価な液晶でも同じことが起きる。
   この差が消えると、セクションが切り替わった手がかりが黒帯だけになる。

   一段沈めて、差を 29 → 55 前後にする。静かさは保ったまま、
   面として切り替わったことは分かる。
   ---------------------------------------------------------------------- */

:root {
	--color-kinari: #ebe9e3;
	--color-kinari-light: #f4f3ef;
	--color-shikkui: #e1dfd8;
}

/* -------------------------------------------------------------------------
   22. 平林工機が選ばれる理由（2026-09-19）

   設計書 01_情報設計.md §6 にありながら実装されていなかったセクション。
   合格基準「他店と何が違うか」に答える場。

   四つを囲んで並べない。囲むと「特徴4つ」の販促パネルになり、
   書いてある中身より先に「宣伝」に見える。
   上端の一本の罫だけで区切り、余白で段を作る（一覧のカードと同じ組み方）。

   数字は本文の中に置く。数字だけ大きく抜き出すと、
   母数の小さい実績でも立派に見えてしまう。文の中にあれば、
   何を数えた数字なのかが同時に読める。
   ---------------------------------------------------------------------- */

.reasons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-12) var(--space-16);
	margin-top: var(--space-16);
}

.reason {
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-6);
}

.reason__title {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: var(--tracking-ja-title);
	color: var(--color-sumi);
	margin: 0 0 var(--space-4);
}

.reason__body {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: 2.1;
	color: var(--color-sumi-soft);
	margin: 0;
}

/* 文中の数字。周りと同じ大きさのまま、太さと書体で拾わせる */
.reason__body b {
	font-family: var(--font-en-sans);
	font-weight: 700;
	font-size: 1.15em;
	color: var(--color-sumi);
	margin: 0 2px;
}

.reasons__source {
	margin-top: var(--space-12);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	line-height: 1.9;
	color: var(--color-to-deep);
}

@media (max-width: 760px) {
	.reasons {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
}

/* -------------------------------------------------------------------------
   23. 写真が入る場所の表示を、日本語で読める形にする（2026-09-19）

   ラベルは英語（WORKSHOP PHOTO / REPAIR BENCH PHOTO ほか）で、
   10px・字間0.5em・大文字化という欧文前提の組みだった。
   本番に出ているので、先方が見ると「写真が未定」ではなく
   「開発の置き忘れ」に見える。実際そう見えていた。

   文言を日本語に変えたので、組みも和文の値に直す。
   10px は本文の最小13pxを大きく下回り、0.5emの字間は和文では読めない。

   あわせて［写真］を頭に付ける。「工房の様子」だけだと写真の説明文に見えて、
   ここに何が入るのか分からない。付ければ、そのまま撮影の指示書として読める。
   ---------------------------------------------------------------------- */

.figure--placeholder::after {
	content: "［写真］" attr(data-label);
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: var(--tracking-ja-text);
	text-transform: none;
}