@charset "UTF-8";
/*
Theme Name: JIMNYS
Theme URI:
Description: ジムニーパーツ比較・アフィリエイトサイト用のオリジナルテーマ。プラグイン非依存。config/ を差し替えることで他車種サイトへ転用できます。
Author:
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jimnys
*/

/* ============================================================
   デザイントークン
   参考: 黒 × イエロー × 白 のハイコントラスト
   ============================================================ */
:root {
	/* --- ブランドカラー（ロゴから抽出 / マット・低彩度） --- */
	--c-green-900:  #0d1a0e;   /* 最暗。ヘッダー・フッター・反転セクション */
	--c-green-800:  #152817;   /* メインの濃い緑 */
	--c-green-700:  #1f3a22;   /* ホバー・境界 */
	--c-green-600:  #2f4d33;
	--c-green-100:  #e3e8e0;   /* 薄い緑のトーン */

	--c-olive:      #a9be2c;   /* アクセント（ロゴの「図鑑」） */
	--c-olive-dark: #8fa31f;

	--c-cream:      #f4f2e8;   /* ベース背景（純白を使わずマットな紙の質感に） */
	--c-cream-sub:  #eae7da;   /* サブ背景 */

	/* --- セマンティック --- */
	--c-primary:    var(--c-green-800);
	--c-accent:     var(--c-olive);
	--c-accent-dark:var(--c-olive-dark);
	--c-ink:        #162016;
	--c-ink-soft:   #3e4a3e;
	--c-muted:      #74806f;
	--c-line:       #d8d6c8;
	--c-bg:         var(--c-cream);
	--c-bg-sub:     var(--c-cream-sub);
	--c-bg-dark:    var(--c-green-900);
	--c-surface:    #fbfaf4;   /* カードの面 */

	/* 機能色 */
	--c-link:       #1f5c2a;
	--c-rakuten:    #bf0000;
	--c-badge-article: var(--c-green-800);

	/* タイポグラフィ */
	--font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
	--font-en: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--fs-base: 1rem;
	--lh-base: 1.9;

	/* レイアウト */
	--w-max:     1180px;
	--w-narrow:  760px;
	--gutter:    16px;
	--radius:    10px;
	--radius-pill: 999px;

	/* 余白スケール */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 16px;
	--sp-4: 24px;
	--sp-5: 40px;
	--sp-6: 64px;
	--sp-7: 96px;

	/* 影はマット表現のため最小限（光沢を出さない） */
	--shadow-card: 0 1px 2px rgba(13,26,14,.06), 0 4px 14px rgba(13,26,14,.05);
}

/* ============================================================
   リセット
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-ja);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-ink);
	background: var(--c-bg);
	overflow-wrap: anywhere;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.4; margin: 0 0 var(--sp-3); font-weight: 700; }
p, ul, ol { margin: 0 0 var(--sp-3); }

button { font: inherit; cursor: pointer; }

/* ============================================================
   レイアウト
   ============================================================ */
.l-container {
	width: 100%;
	max-width: var(--w-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.l-narrow { max-width: var(--w-narrow); }

.l-section { padding-block: var(--sp-6); }
.l-section--dark { background: var(--c-bg-dark); color: var(--c-cream); }
.l-section--accent { background: var(--c-accent); }
.l-section--sub { background: var(--c-bg-sub); }

/* ============================================================
   見出し（英字＋和文の2段組み）
   ============================================================ */
.c-heading { margin-bottom: var(--sp-5); }
.c-heading__en {
	display: block;
	font-family: var(--font-en);
	font-weight: 900;
	font-size: clamp(2rem, 7vw, 3.5rem);
	line-height: 1;
	letter-spacing: -.02em;
	text-transform: uppercase;
}
.c-heading__ja {
	display: block;
	margin-top: var(--sp-2);
	font-size: 1rem;
	font-weight: 700;
	color: var(--c-muted);
}
.l-section--dark .c-heading__ja { color: rgba(244,242,232,.68); }

/* ============================================================
   ボタン
   ============================================================ */
.c-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 14px 28px;
	border: 2px solid var(--c-primary);
	border-radius: var(--radius-pill);
	background: var(--c-primary);
	color: var(--c-cream);
	font-weight: 700;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.c-btn:hover { background: transparent; color: var(--c-primary); }

.c-btn--rakuten { background: var(--c-rakuten); border-color: var(--c-rakuten); }
.c-btn--rakuten:hover { background: var(--c-surface); color: var(--c-rakuten); }

.c-btn--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }

/* ============================================================
   グリッド（型式・パーツ・商品カード共通）
   ============================================================ */
.c-grid { display: grid; gap: var(--sp-3); }
.c-grid--models  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.c-grid--parts   { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.c-grid--items   { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ============================================================
   型式カード
   ============================================================ */
.c-model-card {
	display: block;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface);
	text-decoration: none;
	color: inherit;
	transition: transform .2s, box-shadow .2s;
}
.c-model-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.c-model-card__thumb { aspect-ratio: 4 / 3; background: var(--c-bg-sub); }
.c-model-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-model-card__body { padding: var(--sp-3); }
.c-model-card__name {
	font-family: var(--font-en);
	font-weight: 900;
	font-size: 1.35rem;
	line-height: 1.1;
}
.c-model-card__year { font-size: .8rem; color: var(--c-muted); }

/* 画像がない型式用のスペックカード（自動フォールバック） */
.c-model-card__spec {
	aspect-ratio: 4 / 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	background: var(--c-green-900);
	color: var(--c-cream);
	text-align: center;
	padding: var(--sp-3);
}
.c-model-card__spec b {
	font-family: var(--font-en);
	font-size: clamp(1.4rem, 5vw, 2rem);
	line-height: 1;
	color: var(--c-accent);
}
.c-model-card__spec span { font-size: .72rem; color: rgba(244,242,232,.72); }

/* ============================================================
   パーツアイコン
   ============================================================ */
.c-part-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface);
	text-decoration: none;
	color: inherit;
	text-align: center;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.c-part-card:hover {
	border-color: var(--c-green-600);
	transform: translateY(-3px);
	box-shadow: var(--shadow-card);
}
/* 白背景のプロダクト写真をカード地になじませる */
.c-part-card__thumb {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	padding: var(--sp-2);
	background: var(--c-bg-sub);
}
.c-part-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.c-part-card__body { padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.c-part-card__name { font-size: .82rem; font-weight: 700; line-height: 1.35; }
.c-part-card__count { font-size: .7rem; color: var(--c-muted); }

/* ============================================================
   商品／記事カード
   ============================================================ */
.c-item-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface);
}
.c-item-card__thumb { aspect-ratio: 1 / 1; background: var(--c-bg-sub); }
.c-item-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-item-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.c-item-card__title { font-size: .95rem; font-weight: 700; line-height: 1.5; margin: 0; }
.c-item-card__excerpt { font-size: .82rem; color: var(--c-ink-soft); line-height: 1.7; margin: 0; }
.c-item-card__foot { margin-top: auto; }

.c-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.7;
}
.c-badge--article { background: var(--c-badge-article); color: var(--c-cream); }
.c-badge--maker   { background: var(--c-bg-sub); color: var(--c-ink-soft); }
.c-badge--model   { background: var(--c-accent); color: var(--c-ink); }

/* ============================================================
   フィルター（カテゴリページ上段）
   ============================================================ */
.c-filter { padding: var(--sp-3); background: var(--c-bg-sub); border-radius: var(--radius); margin-bottom: var(--sp-5); }
.c-filter__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.c-filter__label { font-size: .8rem; font-weight: 700; min-width: 4em; }
.c-filter__chip {
	padding: 6px 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	background: var(--c-surface);
	font-size: .8rem;
	font-weight: 700;
}
.c-filter__chip[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-cream); }

/* ============================================================
   広告表記（記事冒頭に自動挿入）
   ============================================================ */
.c-ad-notice {
	padding: var(--sp-2) var(--sp-3);
	margin-bottom: var(--sp-4);
	background: var(--c-bg-sub);
	border-left: 3px solid var(--c-accent);
	font-size: .8rem;
	color: var(--c-muted);
}

/* ============================================================
   パンくず
   ============================================================ */
.c-breadcrumb { font-size: .78rem; color: var(--c-muted); padding-block: var(--sp-3); }
.c-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; }
.c-breadcrumb li:not(:last-child)::after { content: "›"; margin-left: var(--sp-1); }

/* ============================================================
   記事本文
   ============================================================ */
.c-entry { font-size: 1rem; line-height: 2; }
.c-entry h2 {
	margin: var(--sp-6) 0 var(--sp-3);
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
	border-left: 5px solid var(--c-accent);
	font-size: 1.4rem;
}
.c-entry h3 { margin: var(--sp-5) 0 var(--sp-3); font-size: 1.15rem; }
.c-entry img { border-radius: var(--radius); margin-block: var(--sp-4); }
.c-entry table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.c-entry th, .c-entry td { padding: 10px 12px; border: 1px solid var(--c-line); }
.c-entry th { background: var(--c-bg-sub); }

/* 比較表はスマホで横スクロール */
.c-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--sp-4); }

/* ============================================================
   アクセシビリティ
   ============================================================ */
.u-visually-hidden {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--c-link); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}

/* ============================================================
   ヘッダー / フッター
   ============================================================ */
.l-header { background: var(--c-green-900); }
.l-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	padding-block: var(--sp-3);
}
.c-logo { display: inline-block; line-height: 0; text-decoration: none; }
.c-logo img { width: auto; height: 46px; }
.c-logo--text {
	font-family: var(--font-en);
	font-weight: 900;
	font-size: 1.25rem;
	color: var(--c-cream);
	line-height: 1.2;
}
.l-header__nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.l-header__nav a {
	color: var(--c-cream);
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
}
.l-header__nav a:hover { color: var(--c-olive); }

.l-footer {
	background: var(--c-green-900);
	color: var(--c-cream);
	padding-block: var(--sp-6);
	margin-top: var(--sp-7);
}
.l-footer .c-logo img { height: 40px; margin-bottom: var(--sp-4); }
.l-footer__menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0 0 var(--sp-4);
	padding: 0;
}
.l-footer__menu a { color: var(--c-cream); font-size: .85rem; text-decoration: none; }
.l-footer__menu a:hover { color: var(--c-olive); }
.l-footer__note { font-size: .72rem; color: rgba(244,242,232,.55); line-height: 1.8; }
.l-footer__copy { font-size: .72rem; color: rgba(244,242,232,.55); margin: 0; }

/* ============================================================
   TOPページ
   ============================================================ */
.p-hero { padding-block: var(--sp-7); }
.p-hero__lead { max-width: 46em; color: rgba(244,242,232,.82); margin: 0; }

.p-years { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.p-parts-group + .p-parts-group { margin-top: var(--sp-6); }
.p-parts-group__title {
	font-size: 1rem;
	padding-bottom: var(--sp-2);
	margin-bottom: var(--sp-3);
	border-bottom: 2px solid var(--c-green-800);
}

@media (max-width: 600px) {
	.l-header__inner { justify-content: center; }
	.c-logo img { height: 38px; }
	.l-header__nav { gap: var(--sp-3); justify-content: center; width: 100%; }
}

/* =========================================================================
   型式ページ
   ====================================================================== */

.p-model-head__inner {
	display: grid;
	gap: clamp(20px, 4vw, 48px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.p-model-head__inner {
		grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	}
}

.p-model-head__photo {
	background: var(--c-cream-sub);
	border: 1px solid var(--c-line);
	border-radius: 4px;
	padding: 16px;
}

.p-model-head__photo img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.p-model-head__year {
	margin: 0 0 16px;
	font-size: .95rem;
	letter-spacing: .04em;
	color: var(--c-muted);
}

.p-model-head__desc {
	margin-bottom: 24px;
	color: var(--c-ink-soft);
	line-height: 1.9;
}

.p-model-members__note {
	margin: -8px 0 24px;
	font-size: .9rem;
	color: var(--c-muted);
}

/* =========================================================================
   スペック表
   ====================================================================== */

.c-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.c-spec {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
}

.c-spec th,
.c-spec td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}

.c-spec tbody th {
	width: 10em;
	white-space: nowrap;
	background: var(--c-cream-sub);
	font-weight: 600;
	color: var(--c-ink-soft);
}

.c-spec tr:last-child th,
.c-spec tr:last-child td {
	border-bottom: 0;
}

.c-spec--list thead th {
	background: var(--c-green-800);
	color: var(--c-cream);
	white-space: nowrap;
	border-bottom: 0;
}

.c-spec--list tbody th {
	width: auto;
	background: transparent;
}

.c-spec--list a {
	color: var(--c-link);
	font-weight: 700;
}

/* =========================================================================
   グループ内の型式
   ====================================================================== */

.c-grid--members {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.c-member-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	padding: 12px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 4px;
}

.c-member-card img {
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.c-member-card__name {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--c-ink-soft);
}

/* =========================================================================
   交差ページ / カテゴリページの見出し
   ====================================================================== */

.p-cross-head__inner {
	display: flex;
	gap: clamp(16px, 3vw, 32px);
	align-items: center;
	flex-wrap: wrap;
}

.p-cross-head__icon {
	flex: 0 0 auto;
	width: clamp(84px, 14vw, 140px);
	padding: 10px;
	background: var(--c-cream-sub);
	border: 1px solid var(--c-line);
	border-radius: 4px;
}

.p-cross-head__icon img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.p-cross-head__meta {
	margin: 0;
	font-size: .9rem;
	color: var(--c-muted);
	letter-spacing: .04em;
}

.p-cross-head__desc {
	margin-top: 12px;
	color: var(--c-ink-soft);
	line-height: 1.9;
}

/* =========================================================================
   チップ（他の型式などへの導線）
   ====================================================================== */

.c-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.c-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--c-ink-soft);
	text-decoration: none;
	transition: border-color .15s, color .15s;
}

.c-chip:hover,
.c-chip:focus-visible {
	border-color: var(--c-green-600);
	color: var(--c-green-700);
}

.c-chip span {
	font-size: .75rem;
	font-weight: 700;
	color: var(--c-muted);
}

/* =========================================================================
   商品カードの追加パーツ
   ====================================================================== */

.c-item-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 8px;
}

.c-item-card__price {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--c-rakuten);
	letter-spacing: .02em;
}

.c-item-card__shop {
	font-size: .78rem;
	color: var(--c-muted);
}

.c-item-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 12px;
}

.c-item-card__more {
	font-size: .85rem;
	font-weight: 600;
	color: var(--c-link);
}

/* =========================================================================
   記事ページ
   ====================================================================== */

.p-entry-head {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--c-line);
}

.p-entry-head__title {
	margin: 8px 0 12px;
	font-size: clamp(1.35rem, 3.4vw, 2rem);
	line-height: 1.5;
	letter-spacing: .01em;
}

.p-entry-head__meta {
	margin: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: .82rem;
	color: var(--c-muted);
}

.p-entry-thumb {
	margin: 0 0 28px;
	background: var(--c-cream-sub);
	border: 1px solid var(--c-line);
	border-radius: 4px;
	padding: 16px;
}

.p-entry-thumb img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

/* 購入ボックス */
.c-buybox {
	margin: 36px 0;
	padding: clamp(18px, 3vw, 28px);
	background: var(--c-cream-sub);
	border: 1px solid var(--c-line);
	border-radius: 4px;
}

.c-buybox__title {
	margin: 0 0 14px;
	font-size: 1.02rem;
	line-height: 1.6;
}

.c-buybox__spec {
	margin: 0 0 18px;
	display: grid;
	gap: 6px;
}

.c-buybox__spec > div {
	display: flex;
	gap: 12px;
	align-items: baseline;
	font-size: .9rem;
}

.c-buybox__spec dt {
	flex: 0 0 5.5em;
	color: var(--c-muted);
	font-size: .82rem;
}

.c-buybox__spec dd {
	margin: 0;
}

.c-buybox__price {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--c-rakuten);
}

.c-buybox__note {
	margin: 12px 0 0;
	font-size: .78rem;
	color: var(--c-muted);
}

/* 次の導線 */
.c-nextlinks {
	margin: 36px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--c-line);
}

.c-nextlinks__title {
	margin: 0 0 12px;
	font-size: .95rem;
	letter-spacing: .04em;
	color: var(--c-ink-soft);
}

/* =========================================================================
   空状態 / ページ送り / 検索フォーム
   ====================================================================== */

.c-empty {
	padding: 28px;
	background: var(--c-cream-sub);
	border: 1px dashed var(--c-line);
	border-radius: 4px;
	text-align: center;
	color: var(--c-ink-soft);
	font-size: .92rem;
}

.c-empty a {
	color: var(--c-link);
	font-weight: 600;
}

.c-pagination {
	margin-top: 32px;
}

.c-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.c-pagination .page-numbers {
	display: inline-flex;
	min-width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 3px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--c-ink-soft);
	text-decoration: none;
}

.c-pagination .page-numbers.current {
	background: var(--c-green-800);
	border-color: var(--c-green-800);
	color: var(--c-cream);
}

.c-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.c-searchform {
	display: flex;
	gap: 8px;
	margin: 0 0 28px;
	max-width: 480px;
}

.c-searchform input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 3px;
	font-size: .95rem;
	color: var(--c-ink);
}

.c-searchform input[type="search"]:focus-visible {
	outline: 2px solid var(--c-green-600);
	outline-offset: 1px;
}

.c-searchform button {
	flex: 0 0 auto;
	padding: 10px 20px;
	background: var(--c-green-800);
	border: 0;
	border-radius: 3px;
	color: var(--c-cream);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
}

.c-searchform button:hover {
	background: var(--c-green-700);
}

/* フィルターで隠れたカード */
.c-item-card[hidden] {
	display: none;
}

/* =========================================================================
   フォーム
   ====================================================================== */

.c-form {
	display: grid;
	gap: 18px;
	max-width: 620px;
	margin: 28px 0;
}

.c-form__row {
	display: grid;
	gap: 6px;
}

.c-form__row > label {
	font-size: .88rem;
	font-weight: 600;
	color: var(--c-ink-soft);
}

.c-form__row > label span {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	border-radius: 2px;
	background: var(--c-olive);
	color: var(--c-green-900);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	vertical-align: 2px;
}

.c-form input[type="text"],
.c-form input[type="email"],
.c-form textarea {
	width: 100%;
	padding: 11px 14px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 3px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--c-ink);
	line-height: 1.7;
}

.c-form input:focus-visible,
.c-form textarea:focus-visible {
	outline: 2px solid var(--c-green-600);
	outline-offset: 1px;
}

.c-form__row--consent label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: .88rem;
	font-weight: 400;
	color: var(--c-ink-soft);
}

.c-form__row--consent a {
	color: var(--c-link);
	font-weight: 600;
}

.c-form button[type="submit"] {
	justify-self: start;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* ハニーポット: 人間には見えない位置に置く（display:none は一部のボットに検知される） */
.c-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.c-form__done {
	padding: 24px;
	background: var(--c-cream-sub);
	border-left: 4px solid var(--c-green-600);
	border-radius: 3px;
	line-height: 1.9;
}

.c-form__error {
	margin: 0;
	padding: 14px 18px;
	background: #fdf0ef;
	border-left: 4px solid var(--c-rakuten);
	border-radius: 3px;
	font-size: .9rem;
	color: #8a1f1a;
}

/* =========================================================================
   画像が未作成のパーツカード
   画像を後から assets/images/parts/ に置けば自動で写真カードに戻ります。
   ====================================================================== */

.c-part-card__thumb:empty {
	display: none;
}

.c-part-card:has(.c-part-card__thumb:empty) {
	min-height: 0;
	padding: 14px 16px;
}

.c-part-card:has(.c-part-card__thumb:empty) .c-part-card__body {
	padding: 0;
	text-align: left;
}

/* 楽天ウェブサービスのクレジット表記（規約で必要） */
.l-footer__credit {
	margin: 16px 0 0;
	font-size: .72rem;
	letter-spacing: .04em;
}

.l-footer__credit a {
	color: var(--c-green-100);
	opacity: .7;
	text-decoration: none;
}

.l-footer__credit a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* =========================================================================
   TOPヒーローの背景写真
   assets/images/common/hero.jpg があるときだけ適用されます。
   ====================================================================== */

.p-hero--photo {
	position: relative;
	isolation: isolate;
	background-image: var(--hero-image);
	background-size: cover;
	background-position: center 60%;
}

.p-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(13, 26, 14, .92) 0%,
		rgba(13, 26, 14, .78) 45%,
		rgba(13, 26, 14, .45) 100%
	);
}

/* =========================================================================
   型式ページの車種写真
   画像は640×640なので、表示幅を320pxまでに抑えて高精細画面でも粗く見えないようにする
   ====================================================================== */

.p-model-head__photo {
	max-width: 320px;
}

@media (min-width: 900px) {
	.p-model-head__inner {
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	}
}

/* 商品が無いパーツカード（デザイン確認モード中） */
.c-part-card__count:empty {
	display: none;
}

/* =========================================================================
   TOPの人気パーツ
   12枚が 6列×2段 / 4列×3段 / 2列×6段 のどれでも割り切れるようにする
   ====================================================================== */

.c-grid--top {
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

@media (max-width: 600px) {
	.c-grid--top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.p-more {
	margin: clamp(24px, 4vw, 40px) 0 0;
	text-align: center;
}

/* =========================================================================
   グループ内の型式（説明文つき）
   ====================================================================== */

.c-members {
	display: grid;
	gap: clamp(16px, 2.5vw, 28px);
}

.c-member {
	display: grid;
	gap: clamp(14px, 2.5vw, 28px);
	grid-template-columns: 1fr;
	align-items: start;
	padding: clamp(16px, 2.5vw, 24px);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 4px;
}

@media (min-width: 720px) {
	.c-member {
		grid-template-columns: 180px minmax(0, 1fr);
	}
}

.c-member__thumb {
	background: var(--c-cream-sub);
	border-radius: 3px;
	padding: 10px;
	max-width: 180px;
}

.c-member__thumb img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.c-member__name {
	margin: 0 0 4px;
	font-size: 1.05rem;
	letter-spacing: .04em;
}

.c-member__name span {
	margin-left: 10px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--c-muted);
	letter-spacing: .02em;
}

.c-member__years {
	margin: 0 0 10px;
	font-size: .8rem;
	color: var(--c-muted);
	letter-spacing: .04em;
}

.c-member__desc {
	margin: 0;
	font-size: .92rem;
	line-height: 1.95;
	color: var(--c-ink-soft);
}

/* =========================================================================
   サイト紹介文
   ====================================================================== */

.p-about__lead {
	margin: 0 0 20px;
	font-size: clamp(1.15rem, 3vw, 1.6rem);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .02em;
	color: var(--c-green-700);
}

.p-about__body {
	font-size: .95rem;
	line-height: 2.05;
	color: var(--c-ink-soft);
}

.p-about__body p {
	margin: 0 0 1.4em;
}

.p-about__closing {
	margin-top: 1.8em;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--c-green-700);
}

/* 商品がまだ無い組み合わせの件数は目立たせない */
.c-part-card__count.is-zero,
.c-chip span.is-zero {
	opacity: .45;
}

/* =========================================================================
   ここから下は見た目の調整（後から読み込んで上書きしています）
   ====================================================================== */

/* -------------------------------------------------------------------------
   見出し
   英字を巨大に出すのをやめ、小さなラベルにして日本語を主役にする
   ---------------------------------------------------------------------- */

.c-heading {
	margin-bottom: clamp(20px, 3vw, 34px);
}

.c-heading__en {
	display: block;
	margin-bottom: .85em;
	font-family: var(--font-en);
	font-size: .7rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--c-green-600);
}

.l-section--dark .c-heading__en {
	color: var(--c-olive);
}

.c-heading__ja {
	display: block;
	margin-top: 0;
	font-size: clamp(1.3rem, 3.4vw, 1.95rem);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: .05em;
	color: inherit;
}

/* -------------------------------------------------------------------------
   ヒーロー
   ---------------------------------------------------------------------- */

.p-hero {
	padding-block: clamp(40px, 7vw, 92px);
}

.p-hero__inner {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 880px) {
	.p-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	}
}

.p-hero__eyebrow {
	margin: 0 0 16px;
	font-family: var(--font-en);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--c-olive);
}

.p-hero__title {
	margin: 0 0 22px;
	font-size: clamp(1.7rem, 5vw, 2.9rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .04em;
}

.p-hero__lead {
	margin: 0 0 30px;
	max-width: 34em;
	font-size: .95rem;
	line-height: 2;
	color: rgba(244, 242, 232, .78);
}

.p-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.c-btn--ghost {
	background: transparent;
	border: 1px solid rgba(244, 242, 232, .45);
	color: var(--c-cream);
}

.c-btn--ghost:hover,
.c-btn--ghost:focus-visible {
	background: rgba(244, 242, 232, .08);
	border-color: var(--c-cream);
}

/* -------------------------------------------------------------------------
   画像の枠
   ファイルを置けば自動で写真に差し替わります
   ---------------------------------------------------------------------- */

.c-slot {
	display: block;
	width: 100%;
	aspect-ratio: var(--slot-ratio, 3 / 2);
	border-radius: 4px;
	overflow: hidden;
}

.c-slot.is-filled img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-slot.is-empty {
	display: grid;
	place-items: center;
	padding: 16px;
	text-align: center;
	background: var(--c-cream-sub);
	border: 2px dashed var(--c-line);
}

.l-section--dark .c-slot.is-empty {
	background: rgba(244, 242, 232, .05);
	border-color: rgba(244, 242, 232, .28);
}

.c-slot__inner {
	display: grid;
	gap: 8px;
}

.c-slot__size {
	font-family: var(--font-en);
	font-size: clamp(1.1rem, 2.6vw, 1.7rem);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--c-ink-soft);
}

.c-slot__file {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .72rem;
	line-height: 1.6;
	word-break: break-all;
	color: var(--c-muted);
}

.c-slot__label {
	font-size: .78rem;
	color: var(--c-muted);
}

.l-section--dark .c-slot__size {
	color: var(--c-cream);
}

.l-section--dark .c-slot__file,
.l-section--dark .c-slot__label {
	color: rgba(244, 242, 232, .6);
}

/* -------------------------------------------------------------------------
   パーツカード
   パーツ名と件数を縦に積む
   ---------------------------------------------------------------------- */

.c-part-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 12px 14px;
}

.c-part-card__name,
.c-part-card__count {
	display: block;
}

/* -------------------------------------------------------------------------
   サイト紹介
   ---------------------------------------------------------------------- */

.p-about__inner {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 880px) {
	.p-about__inner {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	}
}

.p-about__body {
	font-size: .93rem;
	line-height: 2.1;
	color: var(--c-ink-soft);
}

.p-about__body p {
	margin: 0 0 1.3em;
}

.p-about__body p:last-child {
	margin-bottom: 0;
}

.p-about__closing {
	margin-top: 1.6em;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--c-green-700);
}