/*
Theme Name: JCO JP LP
Theme URI: https://jp.japancarsonline.com
Author: 株式会社Strive Trading
Description: 令和8年8月千葉豪雨 被災者支援情報サイトのテーマ。外部依存（CDN・Webフォント・アイコンフォント・解析タグ）を持たず、被災地の不安定な通信でも確実に表示されることを優先する。A4縦の印刷に対応。
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: jco-jp-lp
*/

/* ---------------------------------------------------------------
   基本
   本文は16px以上、コントラスト比4.5:1以上、見出し階層を正しく保つ。
   --------------------------------------------------------------- */

/*
 * デザイントークンは本体サイト（www.japancarsonline.com）の
 * assets/css/main.css の :root と同じ実値を使う。
 * 同一企業のサイトであることが一目で分かることを優先する。
 *
 * アクセント赤 #e80000 は本体と同じ用途で使う（リンク・現在地・強調・
 * ボタンのhover）。安全上の注意はオレンジなので、色の役割は競合しない。
 */
:root {
	/* ── 本体と同一 ── */
	--jco-text: #171414;      /* 本体 --jco-ink */
	--jco-muted: #6f6a6a;     /* 本体 --jco-muted */
	--jco-border: #e7e5e4;    /* 本体 --jco-line */
	--jco-border-soft: #f0eeed;
	--jco-bg: #ffffff;
	--jco-bg-soft: #f5f3f2;   /* 本体 --jco-bg-alt */
	--jco-brand: #e80000;     /* 本体 --jco-accent */
	--jco-maxw: 1240px;       /* 本体 --jco-max */
	--jco-pad: 32px;          /* 本体 --jco-pad */
	--jco-radius: 4px;        /* ボタン・小要素 */
	--jco-radius-card: 8px;   /* カード・枠（本体のカードと同じ） */

	/* ── 本サイト固有 ── */
	--jco-accent: #e80000;    /* 本体と同一のアクセント。リンク・現在地・強調に使う */
	--jco-ink: #171414;       /* 見出しの罫・ボタンの地色（本体のボタンは黒） */
	--jco-alert: #c2410c;     /* 安全上の注意（オレンジ） */
	--jco-alert-bg: #fff6ef;
	--jco-warn: #4a4444;      /* 鮮度警告（灰） */
	--jco-warn-bg: #f2f1f0;
	--jco-ok: #16653c;
	--jco-prose: 54rem;       /* 文章の最大幅。行長を保ちつつ、余白が空きすぎないようにする */
}

@media ( max-width: 48rem ) {
	:root { --jco-pad: 20px; }
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--jco-bg);
	color: var(--jco-text);
	/* 本体サイトと同じ Inter を読み込み、日本語のフォールバックを足したもの。 */
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.8;
	word-break: normal;
	overflow-wrap: anywhere;
	line-break: strict;
}

.jco-wrap {
	max-width: var(--jco-maxw);
	margin: 0 auto;
	padding: 0 var(--jco-pad) 4rem;
}

/* 文章は読みやすい幅に制限する。カードや表は広い幅を使う。 */
.jco-page-head,
.jco-stale,
main > p,
.jco-prose { max-width: var(--jco-prose); }

/* 安全上の注意と目次は、幅を使って視認性を上げる。 */
.jco-alert, .jco-toc { max-width: none; }

a { color: var(--jco-accent); text-underline-offset: .18em; }
a:hover { color: #b80000; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--jco-accent); outline-offset: 2px; }

/* 見出しは本体に合わせて 700・字間を詰める。 */
h1, h2, h3 { line-height: 1.35; font-weight: 700; letter-spacing: -0.025em; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 {
	font-size: 1.4rem;
	margin: 2.5rem 0 .75rem;
	padding: 0 0 .5rem;
	border-bottom: 2px solid var(--jco-ink);
}
h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
p, ul, ol { margin: 0 0 1rem; }

/* ---------------------------------------------------------------
   ヘッダー・フッター
   本体サイト（www.japancarsonline.com）の jco-header / jco-footer と
   同じ構造・寸法に合わせている。同一企業のサイトであることが
   一目で分かることは、個人情報を扱うサイトでは信頼性そのもの。
   --------------------------------------------------------------- */

.jco-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid #e7e5e4;
}
.jco-header-inner {
	max-width: var(--jco-maxw);
	margin: 0 auto;
	padding: 0 var(--jco-pad);
	min-height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.jco-logo { display: flex; align-items: center; flex: 0 0 auto; }
.jco-logo img { width: 82px; height: 52px; display: block; }

.jco-nav { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.jco-nav a {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--jco-text);
	text-decoration: none;
	padding: 4px 0;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.jco-nav a:hover { color: var(--jco-brand); }
.jco-nav a[aria-current="page"] {
	color: var(--jco-brand);
	border-bottom-color: var(--jco-brand);
}

.jco-footer {
	margin-top: 4rem;
	background: #171414;
	color: rgba( 255, 255, 255, .66 );
	font-size: .9rem;
}
.jco-footer-inner {
	max-width: var(--jco-maxw);
	margin: 0 auto;
	padding: 0 var(--jco-pad);
}
.jco-footer > .jco-footer-inner {
	padding-top: 64px;
	padding-bottom: 32px;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media ( min-width: 56rem ) {
	.jco-footer > .jco-footer-inner { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
}
.jco-footer h2 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #fff;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}
.jco-footer p { margin: 0 0 .8rem; line-height: 1.8; }
.jco-footer ul { list-style: none; margin: 0; padding: 0; }
.jco-footer li { margin: 0 0 .6rem; }
.jco-footer a { color: rgba( 255, 255, 255, .82 ); text-decoration: none; }
.jco-footer a:hover { color: #fff; text-decoration: underline; }
.jco-footer-note { font-size: .82rem; color: rgba( 255, 255, 255, .55 ); }
.jco-footer-note strong { color: rgba( 255, 255, 255, .82 ); }

.jco-footer-bottom { border-top: 1px solid rgba( 255, 255, 255, .14 ); }
.jco-footer-bottom .jco-footer-inner { padding-top: 20px; padding-bottom: 24px; }
.jco-footer-bottom p { margin: 0; font-size: .82rem; color: rgba( 255, 255, 255, .5 ); }

/* ---------------------------------------------------------------
   ページ見出し
   --------------------------------------------------------------- */

.jco-page-head { margin: 2.5rem 0 1rem; }
.jco-eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
	background: var(--jco-brand);
	padding: .2rem .65rem;
	border-radius: var(--jco-radius);
	margin-bottom: .6rem;
	letter-spacing: 0;
}
.jco-lede { font-size: .95rem; color: var(--jco-muted); margin: 0; }

/* ---------------------------------------------------------------
   注意喚起・鮮度警告
   --------------------------------------------------------------- */

.jco-alert {
	border: 3px solid var(--jco-alert);
	background: var(--jco-alert-bg);
	border-radius: var(--jco-radius);
	padding: 1rem 1.1rem;
	margin: 1.25rem 0;
}
.jco-alert h2 {
	margin: 0 0 .5rem;
	padding: 0;
	border: 0;
	color: var(--jco-alert);
	font-size: 1.15rem;
}
.jco-alert p:last-child, .jco-alert ul:last-child { margin-bottom: 0; }

.jco-stale {
	border: 1px solid #c9c5c3;
	border-left: 4px solid var(--jco-warn);
	background: var(--jco-warn-bg);
	color: var(--jco-warn);
	border-radius: var(--jco-radius);
	padding: .6rem .9rem;
	margin: 1rem 0;
	font-size: .88rem;
}
.jco-stale strong { display: block; }

/* ---------------------------------------------------------------
   目次・ビュー切替
   --------------------------------------------------------------- */

.jco-toc {
	background: var(--jco-bg-soft);
	border: 1px solid var(--jco-border);
	border-radius: var(--jco-radius);
	padding: .9rem 1rem;
	margin: 1.25rem 0;
}
.jco-toc h2 { font-size: .95rem; margin: 0 0 .4rem; padding: 0; border: 0; }
.jco-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .25rem .9rem;
	grid-template-columns: repeat( auto-fill, minmax( 12rem, 1fr ) );
}
.jco-toc li { margin: 0; }

.jco-backlink { margin: 1.25rem 0 .25rem; font-size: .9rem; }

.jco-views { display: flex; gap: .5rem; margin: .5rem 0 1rem; flex-wrap: wrap; }
.jco-views a {
	display: inline-block;
	padding: .5rem 1.1rem;
	letter-spacing: -0.01em;
	border: 1px solid var(--jco-border);
	border-radius: var(--jco-radius);
	text-decoration: none;
	font-size: .9rem;
	background: #fff;
}
.jco-views a[aria-current="page"] {
	background: var(--jco-accent);
	border-color: var(--jco-accent);
	color: #fff;
	font-weight: 600;
}

/* ---------------------------------------------------------------
   支援制度カード
   --------------------------------------------------------------- */

.jco-cards { display: grid; gap: .75rem; align-items: start; }

@media ( min-width: 68rem ) {
	/* 広い画面ではカードを2列に並べ、左右の余白を減らす。 */
	.jco-cards { grid-template-columns: repeat( auto-fill, minmax( 24rem, 1fr ) ); }
}

.jco-card {
	border: 1px solid var(--jco-border);
	border-radius: var(--jco-radius-card);
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
	background: #fff;
	break-inside: avoid;
}
.jco-card > :last-child { margin-bottom: 0; }
.jco-card { margin: 0; }
.jco-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.jco-card h3 { margin: 0; }

.jco-badge {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	padding: .1rem .55rem;
	border-radius: var(--jco-radius);
	border: 1px solid currentColor;
	white-space: nowrap;
}
.jco-badge--now { color: var(--jco-ok); }
.jco-badge--pending { color: var(--jco-warn); }
.jco-badge--check { color: var(--jco-muted); }
.jco-badge--ended { color: #767676; }

.jco-amount {
	font-weight: 700;
	color: var(--jco-accent);
	margin: .4rem 0;
}
.jco-meta {
	font-size: .88rem;
	color: var(--jco-muted);
	margin: .5rem 0 0;
	padding-top: .5rem;
	border-top: 1px dashed var(--jco-border);
}
.jco-meta dt { font-weight: 700; float: left; clear: left; margin-right: .4rem; }
.jco-meta dd { margin: 0 0 .2rem; }
.jco-note {
	background: var(--jco-warn-bg);
	border-left: 3px solid #b3aeab;
	padding: .5rem .7rem;
	margin: .6rem 0 0;
	font-size: .9rem;
}
.jco-sources { font-size: .8rem; color: var(--jco-muted); margin: .5rem 0 0; }
.jco-sources a { color: var(--jco-muted); }

/* ---------------------------------------------------------------
   表
   --------------------------------------------------------------- */

.jco-table-wrap { overflow-x: auto; margin: 0 0 1rem; }
table.jco-table {
	border-collapse: collapse;
	width: 100%;
	font-size: .9rem;
}
table.jco-table th, table.jco-table td {
	border: 1px solid var(--jco-border);
	padding: .5rem .6rem;
	text-align: left;
	vertical-align: top;
}
table.jco-table th { background: var(--jco-bg-soft); }

/* ---------------------------------------------------------------
   市区町村セレクタ
   --------------------------------------------------------------- */

.jco-city-grid {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: .5rem;
}
.jco-city-grid a {
	display: block;
	padding: .7rem .6rem;
	border: 1px solid var(--jco-border);
	border-radius: var(--jco-radius);
	text-align: center;
	text-decoration: none;
	background: #fff;
	font-weight: 600;
}

/* ---------------------------------------------------------------
   印刷（A4縦）
   避難所・高齢の方・窓口へ持参する用途で紙が要るため、必須要件。
   --------------------------------------------------------------- */

.jco-print-hint {
	font-size: .82rem;
	color: var(--jco-muted);
	background: var(--jco-bg-soft);
	border: 1px dashed var(--jco-border);
	padding: .4rem .7rem;
	border-radius: var(--jco-radius);
}

@media print {
	@page { size: A4 portrait; margin: 14mm 12mm; }

	body { font-size: 10.5pt; line-height: 1.6; background: #fff; }
	.jco-wrap { max-width: none; padding: 0; }

	.jco-header, .jco-footer, .jco-views, .jco-print-hint, .jco-toc, .jco-backlink { display: none; }

	/* 印刷は A4 縦の1段組みに戻す。Web表示の2列は紙では読みづらいため。 */
	.jco-cards { display: block; }
	.jco-page-head, .jco-alert, .jco-stale, main > p { max-width: none; }

	h2 { font-size: 12pt; margin: 12pt 0 6pt; page-break-after: avoid; }
	h3 { font-size: 11pt; page-break-after: avoid; }

	.jco-card, .jco-alert, table.jco-table { page-break-inside: avoid; }
	.jco-card { border: 1px solid #999; padding: 6pt 8pt; margin-bottom: 6pt; }
	.jco-alert { border: 2.5pt solid #000; }

	a { color: #000; text-decoration: none; }
	/* 紙では リンク先が分からないため、出典のURLを展開する。 */
	.jco-sources a::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
}

/* ---------------------------------------------------------------
   固定ページの本文
   --------------------------------------------------------------- */

.jco-prose h2 { margin-top: 2rem; }
.jco-prose ul, .jco-prose ol { padding-left: 1.4rem; }
.jco-prose li { margin-bottom: .35rem; }
.jco-prose blockquote {
	margin: 1rem 0;
	padding: .8rem 1rem;
	border-left: 4px solid var(--jco-accent);
	background: var(--jco-bg-soft);
}
.jco-prose blockquote > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   営利LP（買取・車両検索）
   --------------------------------------------------------------- */

.jco-context {
	border: 1px solid var(--jco-border);
	border-left: 4px solid var(--jco-accent);
	background: var(--jco-bg-soft);
	border-radius: var(--jco-radius);
	padding: .9rem 1.1rem;
	margin: 1.25rem 0;
	max-width: var(--jco-prose);
}
.jco-context p { margin: 0; font-size: .95rem; }

ol.jco-flow {
	max-width: var(--jco-prose);
	padding-left: 1.4rem;
}
ol.jco-flow li { margin-bottom: .6rem; }

/* ---------------------------------------------------------------
   フォーム
   --------------------------------------------------------------- */

.jco-form { max-width: var(--jco-prose); margin: 1rem 0 2rem; }

.jco-form-block {
	border: 1px solid var(--jco-border);
	border-radius: var(--jco-radius);
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
}
.jco-form-block h3 {
	margin: 0 0 .8rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--jco-accent);
	font-size: 1.05rem;
}

.jco-field { margin: 0 0 1.1rem; }
.jco-field > label {
	display: block;
	font-weight: 700;
	margin-bottom: .3rem;
	font-size: .95rem;
}
.jco-req {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	color: #fff;
	background: var(--jco-brand);
	border-radius: var(--jco-radius);
	padding: .05rem .4rem;
	margin-left: .4rem;
	vertical-align: middle;
}
.jco-hint {
	display: block;
	font-size: .85rem;
	color: var(--jco-muted);
	margin-top: .3rem;
}

.jco-form input[type="text"],
.jco-form input[type="email"],
.jco-form input[type="tel"],
.jco-form select,
.jco-form textarea {
	width: 100%;
	font-size: 1rem;
	font-family: inherit;
	padding: .55rem .6rem;
	border: 1px solid #8a8f94;
	border-radius: var(--jco-radius);
	background: #fff;
	color: var(--jco-text);
}
.jco-form textarea { line-height: 1.7; }

.jco-form .wpcf7-radio,
.jco-form .wpcf7-checkbox { display: block; }
.jco-form .wpcf7-list-item { display: block; margin: 0 0 .3rem; }
.jco-form .wpcf7-list-item label { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.jco-form .wpcf7-list-item input { margin-top: .35rem; flex: 0 0 auto; }

.jco-form input[type="submit"] {
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 32px;
	transition: background .18s, border-color .18s;
	color: #fff;
	background: var(--jco-ink);
	border: 1px solid var(--jco-ink);
	border-radius: var(--jco-radius);
	cursor: pointer;
}
.jco-form input[type="submit"]:hover { background: var(--jco-brand); border-color: var(--jco-brand); }

/* honeypot。人間には見せず、支援技術からも隠す。 */
.jco-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 条件付きで表示する欄。JSが無効な場合は表示したままにする（入力できなくなるより良い）。 */
.jco-if-flood { margin: 0; }

.jco-form .wpcf7-not-valid-tip { color: var(--jco-brand); font-size: .85rem; }
.jco-form .wpcf7-response-output {
	border: 2px solid var(--jco-accent) !important;
	border-radius: var(--jco-radius);
	padding: .8rem 1rem !important;
	margin: 1rem 0 0 !important;
}

@media print {
	.jco-form, .jco-context { display: none; }
}

/* ---------------------------------------------------------------
   当社サービスへの導線（「車のこと」の中にのみ置く）
   --------------------------------------------------------------- */

.jco-service-links {
	max-width: var(--jco-prose);
	border: 1px dashed var(--jco-border);
	border-radius: var(--jco-radius);
	padding: .9rem 1.1rem;
	margin: 1rem 0 0;
	background: var(--jco-bg-soft);
}
.jco-service-note { font-size: .85rem; color: var(--jco-muted); margin: 0 0 .7rem; }
.jco-service-links ul { list-style: none; margin: 0; padding: 0; }
.jco-service-links li { margin: 0 0 .7rem; }
.jco-service-links li:last-child { margin-bottom: 0; }
.jco-service-links a { font-weight: 700; }
.jco-service-links span { font-size: .88rem; color: var(--jco-muted); }

@media print { .jco-service-links { display: none; } }