/* ==========================================================================
   固定ページ（事業紹介・中古車の買取・お問い合わせ）
   ========================================================================== */

/* --------------------------------------------------------------------------
   トップページ: ヒーロー・検索バー・車両リストの見た目は jocar-design-b.css（別案B）が担当する。
   旧デザイン（GENESISヘッダースライダー type3＋コンテンツビルダー）の指定は 2026-09-22 に削除した
   （必要なら git タグ design-a-final の版を参照）
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   事業紹介（/business/）・中古車の買取（/purchase/）
   本文はブロックエディタの標準ブロック（scripts/setup-site-pages.php が組み立てる）。
   ここでは className を手がかりに、カード・2カラム・流れ図の見た目だけを付ける
   -------------------------------------------------------------------------- */
/* 冒頭のキャッチ */
.post_content .jocar-lead { font-size: 26px; font-weight: 600; line-height: 1.7; margin: 0 0 32px; }
.jocar-business-intro p, .jocar-purchase-intro p { line-height: 2.2; }
.post_content .jocar-business-photo { margin: 50px 0 0; }
.post_content .jocar-business-photo img, .jocar-reason img { display: block; width: 100%; height: auto; border-radius: var(--jocar-radius-large); }
.jocar-business-intro, .jocar-purchase-intro { margin-bottom: 80px; }
.jocar-purchase-intro { margin-bottom: 50px; }
.jocar-purchase-intro .jocar-lead { margin-bottom: 0; }

/* 見出し（中央寄せ）の直下に置く導入文 */
.post_content .jocar-section-lead { text-align: center; line-height: 2.2; margin: 0 0 40px; }

/* カード（取扱事業・ご依頼方法）。3枚を同じ高さに揃える */
.post_content .jocar-services, .post_content .jocar-methods { gap: 24px; margin-bottom: 80px; align-items: stretch; }
.jocar-services > .wp-block-column, .jocar-methods > .wp-block-column { display: flex; }
.jocar-service-card, .jocar-method-card { flex: 1; background: var(--jocar-bg-gray); border-radius: var(--jocar-radius-large); padding: 32px 30px; border-top: 3px solid var(--jocar-main); }
.post_content .jocar-service-card h3, .post_content .jocar-method-card h3 { font-size: 20px; font-weight: 600; line-height: 1.5; margin: 0 0 16px; padding: 0; border: 0; background: none; }
.post_content .jocar-service-card ul { margin: 0; padding-left: 1.3em; font-size: 15px; line-height: 1.9; }
.post_content .jocar-service-card li + li { margin-top: 8px; }
/* 取扱事業のカードの下の、既存サイト（農機具の事業）への小さな文字リンク（2026-10-05） */
.post_content .jocar-service-card__links { margin: 18px 0 0; font-size: 14px; line-height: 2; }
.post_content .jocar-service-card__links a { text-decoration: underline; text-underline-offset: 3px; }
.jocar-method-card { display: flex; flex-direction: column; }
.post_content .jocar-method-card p { font-size: 15px; line-height: 2; margin: 0 0 22px; }
.post_content .jocar-method-card h3 + p { flex: 1 0 auto; }
.post_content .jocar-method-card .wp-block-buttons { margin: 0; }
.post_content .jocar-method-card .wp-block-buttons + .wp-block-buttons { margin-top: 12px; }
.jocar-method-card .wp-block-button { width: 100%; }
.post_content .jocar-method-card .jocar-method-card__tel { flex: none; margin: 0; text-align: center; line-height: 1.2; }
.post_content .jocar-method-card__tel a { font-family: var(--jocar-font-number); font-size: 36px; font-weight: 800; color: inherit; text-decoration: none; white-space: nowrap; }

/* 本文内のボタン（ボタンブロック）を共通ボタン .jocar-btn と同じ見た目にする */
.post_content .wp-block-button__link {
	display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;
	min-height: 56px; padding: 8px 24px; border-radius: 60px; border: 1px solid var(--jocar-main);
	background: var(--jocar-main); color: #fff !important; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none !important;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.post_content .wp-block-button__link:hover { background: var(--jocar-main-hover); border-color: var(--jocar-main-hover); }
.post_content .is-style-outline .wp-block-button__link { background: #fff; color: var(--jocar-main) !important; }
.post_content .is-style-outline .wp-block-button__link:hover { background: var(--jocar-main); color: #fff !important; }

/* 選ばれる3つの理由（写真＋本文） */
.post_content .jocar-reason { gap: 50px; align-items: center; margin-bottom: 60px; }
.post_content .jocar-reason:last-child { margin-bottom: 0; }
.jocar-reason > .wp-block-column:first-child { flex: 0 0 42%; }
.jocar-reason--reverse { flex-direction: row-reverse; }
.post_content .jocar-reason figure { margin: 0; }
.jocar-reason img { aspect-ratio: 4 / 3; object-fit: cover; }
.post_content .jocar-reason__number { font-family: var(--jocar-font-number); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.2; color: var(--jocar-main); margin: 0 0 10px; }
.post_content .jocar-reason h3 { font-size: 24px; font-weight: 600; line-height: 1.5; margin: 0 0 18px; padding: 0; border: 0; background: none; }
.post_content .jocar-reason p { line-height: 2.2; }

/* 買取・販売の流れ: 「査定」「リクエスト」の2系統が、整備 → 販売で合流する */
.post_content .jocar-flow__tracks { gap: 30px; margin-bottom: 0; align-items: stretch; }
/* 左右の列で段ごとの高さを揃える（PC幅のみ）。
   列はそれぞれ独立したブロックなので、そのままだと文章量の多い側だけカードが高くなり、矢印の位置が左右でずれる。
   親をグリッドにし、各列をサブグリッドにして「ラベル／注記／1段目／2段目…」の行を左右で共有させる。
   行数は多めに確保している（使わない行は高さ0）。サブグリッド非対応のブラウザでは従来どおりの表示になる */
@media screen and (min-width: 801px) {
	@supports (grid-template-rows: subgrid) {
		.post_content .jocar-flow__tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); column-gap: 30px; row-gap: 0; }
		.post_content .jocar-flow__tracks > .wp-block-column { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; row-gap: 0; min-width: 0; }
		.post_content .jocar-flow__tracks > .wp-block-column > * { min-width: 0; }
	}
}
.post_content .jocar-flow__label { margin: 0; padding: 12px 20px; border-radius: 60px; background: var(--jocar-main); color: #fff; font-size: 18px; font-weight: 600; line-height: 1.4; text-align: center; }
.post_content .jocar-flow__label-note { margin: 12px 0 0; font-size: 14px; line-height: 1.8; color: var(--jocar-text-sub); text-align: center; }
.jocar-flow__step { position: relative; margin-top: 40px; padding: 26px 30px; border: 1px solid var(--jocar-border); border-radius: var(--jocar-radius-large); background: #fff; }
/* ステップの間の下向き矢印 */
.jocar-flow__step::before { content: ""; position: absolute; top: -29px; left: 50%; margin-left: -12px; border: 12px solid transparent; border-top: 14px solid var(--jocar-main); border-bottom-width: 0; }
.jocar-flow__label-note + .jocar-flow__step { margin-top: 20px; }
.jocar-flow__label-note + .jocar-flow__step::before { display: none; }
.post_content .jocar-flow__step h4 { font-size: 19px; font-weight: 600; line-height: 1.5; margin: 0 0 10px; padding: 0; border: 0; background: none; }
.post_content .jocar-flow__step p { font-size: 15px; line-height: 2; margin: 0; }
.jocar-flow__common { position: relative; margin-top: 40px; }
.post_content .jocar-flow__merge { position: relative; margin: 0; padding: 10px 20px; border-radius: 60px; background: #111; color: #fff; font-size: 15px; font-weight: 600; text-align: center; }
.jocar-flow__merge::before { content: ""; position: absolute; top: -29px; left: 50%; margin-left: -12px; border: 12px solid transparent; border-top: 14px solid var(--jocar-main); border-bottom-width: 0; }

@media screen and (max-width: 800px) {
	.post_content .jocar-lead { font-size: 19px; margin-bottom: 22px; }
	.jocar-business-intro { margin-bottom: 50px; }
	.jocar-purchase-intro { margin-bottom: 30px; }
	.post_content .jocar-business-photo { margin-top: 30px; }
	.post_content .jocar-section-lead { text-align: left; margin-bottom: 24px; }
	.post_content .jocar-services, .post_content .jocar-methods { gap: 14px; margin-bottom: 50px; }
	.jocar-service-card, .jocar-method-card { padding: 24px 20px; }
	.post_content .jocar-service-card h3, .post_content .jocar-method-card h3 { font-size: 18px; }
	.post_content .jocar-method-card h3 + p { flex: none; }
	.post_content .jocar-method-card__tel a { font-size: 32px; }
	.post_content .jocar-reason { gap: 20px; margin-bottom: 44px; }
	.jocar-reason--reverse { flex-direction: row; }
	.jocar-reason > .wp-block-column:first-child { flex-basis: 100%; }
	.post_content .jocar-reason h3 { font-size: 20px; margin-bottom: 12px; }
	.post_content .jocar-flow__tracks { gap: 50px; }
	.jocar-flow__step { padding: 20px; }
	.post_content .jocar-flow__step h4 { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   お問い合わせフォーム（プラグインのショートコード [jocar_contact_form]）
   -------------------------------------------------------------------------- */
.post_content .jocar-contact { max-width: 800px; margin: 0 auto; }
.jocar-contact__intro { font-size: 14px; line-height: 2; color: var(--jocar-text-sub); margin: 0 0 30px; }
.jocar-contact__vehicle { display: flex; gap: 20px; align-items: center; background: var(--jocar-bg-gray); border-radius: var(--jocar-radius-large); padding: 18px 24px; margin: 0 0 30px; }
.jocar-contact__vehicle-image { flex: none; width: 120px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #eee; }
.jocar-contact__vehicle-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jocar-contact__vehicle-label { font-size: 12px; color: var(--jocar-text-sub); margin: 0 0 4px; }
.jocar-contact__vehicle-name { font-size: 18px; font-weight: 600; margin: 0; line-height: 1.4; }
.jocar-contact__vehicle-stock { font-size: 12px; color: var(--jocar-text-sub); margin: 4px 0 0; font-family: var(--jocar-font-number); }
.jocar-contact__field { display: block; margin: 0 0 26px; }
.jocar-contact__label { display: flex; align-items: center; font-size: 15px; font-weight: 600; margin: 0 0 10px; line-height: 1.4; }
/* 種別は3つ（来店予約・見積もり相談・買取査定のご相談）。PCは横3列、スマホは2列＋3つ目を全幅にする */
.jocar-contact__types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jocar-contact__type { position: relative; display: block; cursor: pointer; }
.jocar-contact__type input { position: absolute; opacity: 0; width: 0; height: 0; }
.jocar-contact__type span { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 16px; border: 1px solid var(--jocar-border); border-radius: var(--jocar-radius); background: #fff; font-size: 15px; font-weight: 600; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
.jocar-contact__type input:checked + span { border-color: var(--jocar-main); background: var(--jocar-main); color: #fff; }
.jocar-contact__type input:focus-visible + span { box-shadow: 0 0 0 3px var(--jocar-main-alpha); }
.jocar-contact__hint { font-size: 12px; color: var(--jocar-text-sub); margin: 8px 0 0; line-height: 1.7; }
.jocar-contact__error { display: block; color: var(--jocar-error); font-size: 13px; margin: 8px 0 0; }
.jocar-contact__error--form { padding: 14px 18px; border: 1px solid var(--jocar-error); border-radius: var(--jocar-radius); background: #fff5f5; margin: 0 0 24px; }
.jocar-contact__hp { position: absolute; left: -9999px; top: 0; }
.jocar-contact__submit-area { text-align: center; margin-top: 36px; }
.jocar-contact__submit { min-width: 320px; }
.jocar-contact__privacy { font-size: 12px; color: var(--jocar-text-sub); margin: 16px 0 0; line-height: 1.8; }
.jocar-contact__done { max-width: 720px; margin: 0 auto; padding: 50px 30px; text-align: center; background: var(--jocar-bg-gray); border-radius: var(--jocar-radius-large); }
.jocar-contact__done-title { font-size: 24px; font-weight: 600; margin: 0 0 14px; }
.jocar-contact__done p { line-height: 2; margin: 0; }
.jocar-contact__done .jocar-btn { margin-top: 24px; }
.jocar-contact__tel { margin-top: 60px; padding: 30px; border: 1px solid var(--jocar-border); border-radius: var(--jocar-radius-large); text-align: center; }
.jocar-contact__tel-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.jocar-contact__tel-number { font-family: var(--jocar-font-number); font-size: 32px; font-weight: 800; margin: 0; color: inherit; text-decoration: none; display: inline-block; }
.jocar-contact__tel-note { font-size: 13px; color: var(--jocar-text-sub); margin: 6px 0 0; }
@media screen and (max-width: 800px) {
	.jocar-contact__vehicle { gap: 14px; padding: 14px; }
	.jocar-contact__vehicle-image { width: 96px; }
	.jocar-contact__vehicle-name { font-size: 16px; }
	.jocar-contact__field { margin-bottom: 20px; }
	.jocar-contact__types { grid-template-columns: 1fr 1fr; gap: 8px; }
	.jocar-contact__type:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.jocar-contact__submit { min-width: 0; width: 100%; }
	.jocar-contact__tel { margin-top: 40px; padding: 20px; }
	.jocar-contact__tel-number { font-size: 26px; }
}