@charset "UTF-8";

/* ------------------------------------------------------------
 * カラー・変数
 * ---------------------------------------------------------- */
:root {
	--color-accent: #EA5710;
	--color-accent-soft: #FCE9DD;
	--color-ink: #1A1A1A;
	--color-body: #333333;
	--color-sub: #555555;
	--color-line: #E0E0E0;
	--color-bg: #F5F5F5;
	--color-white: #FFFFFF;
	--color-line-green: #06C755;

	--font-ja: "Zen Kaku Gothic New", sans-serif;
	--font-en: "Barlow Condensed", sans-serif;
}

/* ------------------------------------------------------------
 * ベース
 * ---------------------------------------------------------- */
body {
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
}

a {
	color: var(--color-accent);
	transition: color .2s ease-out, background-color .2s ease-out, border-color .2s ease-out;
}

/* ------------------------------------------------------------
 * フォーカス表示（キーボード操作）
 * ---------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.request :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--color-white);
}

.en {
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 700;
	letter-spacing: .02em;
}

/* ------------------------------------------------------------
 * 共通クラス
 * ---------------------------------------------------------- */
.wrapper {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}

.wrapper_small {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 40px;
}

.container {
	width: 100%;
}

.sp {
	display: none;
}

.h2 {
	font-size: 34px;
	font-weight: 900;
	line-height: 1.5;
}

/* ------------------------------------------------------------
 * ボタン
 *
 * 【使い分けのルール】下層ページも必ずこれに従う
 *
 *   btn--primary    第1階層：オレンジ塗り・白文字
 *                   そのセクションで一番やってほしい行動。
 *                   申込・予約・送信・最重要導線。1セクションに1つまで。
 *
 *   btn--secondary  第2階層：地色のまま・オレンジ枠線・オレンジ文字
 *                   下層ページへの誘導。「〜を見る」系。
 *
 *   btn--tertiary   第3階層：地色のまま・黒枠線・黒文字
 *                   カードや一覧の中に置く補助アクション。
 *                   セクション全体ではなく個別要素に紐づくもの。
 *
 *   btn--inverse    反転：白塗り・黒文字
 *                   オレンジなど色地の上に置くPrimary。階層ではなく背景違い。
 *
 *   btn--lg         任意：高さ64pxに拡大。セクションの主役CTAにのみ付与。
 *
 * 高さ＝重要度（60 / 56 / 46px）。サイズだけで階層を崩さない。
 *
 * 【ボタン体系の外】
 *   ・ヒーローのBUY/SELL … ボタンではなくカード
 *   ・検索フォームの送信ボタン … フォーム部品（角丸6px）
 *   ・LINE … ブランドカラー固定
 * ---------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 60px;
	padding: 0 48px;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}

.btn__arrow {
	transition: transform .2s ease-out;
}

.btn--primary {
	background: var(--color-accent);
	color: var(--color-white);
}

.btn--secondary {
	min-height: 56px;
	padding: 0 36px;
	border: 1px solid var(--color-accent);
	border-radius: 28px;
	color: var(--color-accent);
	font-size: 16px;
}

.btn--tertiary {
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--color-ink);
	border-radius: 24px;
	color: var(--color-ink);
	font-size: 14px;
	gap: 6px;
}

.btn--inverse {
	background: var(--color-white);
	color: var(--color-ink);
}

.btn--lg {
	min-height: 64px;
	padding: 0 40px;
	border-radius: 32px;
	font-size: 18px;
	font-weight: 900;
}

/* ボタンは色変化、中の矢印だけ少し右へ */
.btn {
	transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}

.btn svg {
	transition: transform .2s ease-out;
}

/* ホバーはポインタ環境のみ。タッチで状態が残るのを防ぐ */
@media (hover: hover) {
	.btn:hover svg {
		transform: translateX(4px);
	}

	/* 第1階層：反転させない（反転すると第2階層と同じ見た目になるため） */
	.btn--primary:hover {
		background-color: #EC6423;
	}

	/* 第2階層：オレンジで塗りつぶす */
	.btn--secondary:hover {
		background-color: var(--color-accent);
		color: var(--color-white);
	}

	/* 第3階層：黒で塗りつぶす */
	.btn--tertiary:hover {
		background-color: var(--color-ink);
		color: var(--color-white);
	}

	/* 反転：色地に沈ませない */
	.btn--inverse:hover {
		background-color: var(--color-accent-soft);
	}
}

/* ------------------------------------------------------------
 * ホバー
 *   ・タッチ端末でホバーが残らないよう hover: hover で囲む
 *   ・Primaryは反転させない（静止状態のSecondaryと同じ見た目になるため）
 *   ・コーポレートカラーより濃いオレンジは使わないため、明度は上げる方向
 * ---------------------------------------------------------- */
@media (hover: hover) {
	/* 末尾の矢印だけ動かす。ボタン自体は動かさない */
	.btn:hover .btn__arrow,
	.hero__card:hover .hero__card-foot svg,
	.pickup__link:hover svg,
	.staff__link:hover svg,
	.news__link:hover svg {
		transform: translateX(4px);
	}

	/* 第1階層：わずかに明るく（#EA5710 に白8%） */
	.btn--primary:hover {
		background-color: #EC6423;
	}

	/* 第2階層：オレンジで塗りつぶす */
	.btn--secondary:hover {
		background-color: var(--color-accent);
		color: var(--color-white);
	}

	/* 第3階層：黒で塗りつぶす */
	.btn--tertiary:hover {
		background-color: var(--color-ink);
		color: var(--color-white);
	}

	/* 反転：オレンジ地に沈ませない */
	.btn--inverse:hover {
		background-color: var(--color-accent-soft);
	}

	.global-nav__link:hover {
		color: var(--color-accent);
	}

	.global-nav__child-link:hover {
		background-color: var(--color-bg);
		color: var(--color-accent);
	}

	.footer-nav__link:hover,
	.site-footer__policy a:hover {
		color: var(--color-accent);
	}

	.site-header__line:hover,
	.fixed-cta__item--line:hover,
	.drawer-nav__foot-line:hover {
		filter: brightness(1.08);
	}
}

.hero__card-foot svg,
.pickup__link svg,
.staff__link svg,
.news__link svg {
	transition: transform .2s ease-out;
}

.footer-nav__link,
.site-footer__policy a,
.site-header__line,
.fixed-cta__item--line,
.drawer-nav__foot-line {
	transition: color .2s ease-out, filter .2s ease-out;
}

/* ------------------------------------------------------------
 * フォーカス（キーボード操作）
 * ---------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* オレンジ地の上では白で縁取る */
.request a:focus-visible {
	outline-color: var(--color-white);
}

/* ------------------------------------------------------------
 * モーションを減らす設定への対応
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn__arrow,
	.site-header,
	.drawer-nav__content,
	.drawer-nav__overlay,
	.car-card,
	.car-card__image img,
	.service-card,
	.hero__card-foot svg,
	.pickup__link svg,
	.staff__link svg,
	.news__link svg {
		transition-duration: .01ms;
	}
}

/* セクション見出し */
.section-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

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

.section-head__en {
	color: var(--color-accent);
	font-size: 16px;
	letter-spacing: .1em;
	line-height: 1;
}

.section-head__lead {
	margin-top: 6px;
	color: var(--color-body);
	font-size: 16px;
	line-height: 1.9;
}

/* ------------------------------------------------------------
 * サイトヘッダー
 * ---------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-line);
	transition: transform .3s;
}

/* 下スクロールで隠す／上スクロールで戻す */
.site-header.is-hide {
	transform: translateY(-100%);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 92px;
	padding: 0 24px;
}

.site-header__logo img {
	width: auto;
	height: 54px;
}

.global-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* 子メニューを持つ項目。ドロップダウンの位置の基準になる */
.global-nav__item {
	position: relative;
}

.global-nav__link {
	display: block;
	position: relative;
	padding: 10px 12px;
	color: var(--color-ink);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	transition: color .2s ease-out;
}

/* --------------------------------------------------------
 * グロナビのドロップダウン（960px以上のみ。未満はドロワー側が持つ）
 *   マウスオンとキーボードフォーカスの両方で開く
 * ------------------------------------------------------ */
.global-nav__child {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 200px;
	padding: 8px 0;
	border-radius: 8px;
	background: var(--color-white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .2s ease-out, transform .2s ease-out, visibility .2s;
}

.global-nav__item:hover .global-nav__child,
.global-nav__item:focus-within .global-nav__child {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.global-nav__child-link {
	display: block;
	padding: 10px 20px;
	color: var(--color-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	transition: background-color .2s ease-out, color .2s ease-out;
}

.global-nav__child-link.is-current {
	color: var(--color-accent);
}

.global-nav__link.is-current {
	color: var(--color-accent);
}

/* カレントは色だけでなく下線でも示す（色のみに依存させない） */
.global-nav__link.is-current::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 4px;
	left: 12px;
	height: 2px;
	background: var(--color-accent);
}

.site-header__contact {
	display: flex;
	align-items: center;
	gap: 18px;
}

.site-header__tel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: var(--color-ink);
}

.site-header__tel-number {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 26px;
	line-height: 1;
	white-space: nowrap;
}

.site-header__tel-time {
	color: var(--color-sub);
	font-size: 12px;
	/* 1200px前後で折り返すと電話番号ブロックが2行になるため折返し禁止。
	   文言を足すときは必ず1200pxで検証すること */
	white-space: nowrap;
}

.site-header__line {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 20px;
	border-radius: 26px;
	background: var(--color-line-green);
	color: var(--color-white);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.site-header__line img {
	width: auto;
	height: 24px;
}

@media (hover: hover) {
	.site-header__tel:hover .site-header__tel-number {
		color: var(--color-accent);
	}

	.site-header__line:hover {
		background-color: #05B34C;
	}
}

/* ------------------------------------------------------------
 * 下層ページ メインビジュアル
 * ---------------------------------------------------------- */
.page-mv {
	position: relative;
	height: 360px;
	overflow: hidden;
}

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

.page-mv::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(26, 26, 26, .80) 0%, rgba(26, 26, 26, .58) 44%, rgba(26, 26, 26, .12) 100%);
}

.page-mv__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 0 5%;
}

.page-mv__en {
	color: var(--color-accent);
	font-size: 18px;
	font-style: italic;
	letter-spacing: .06em;
	line-height: 1;
}

.page-mv__title {
	margin-top: 12px;
	color: var(--color-white);
	font-size: 40px;
	font-weight: 900;
	line-height: 1.3;
}

.page-mv__rule {
	width: 48px;
	height: 4px;
	margin-top: 20px;
	background: var(--color-accent);
}

/* ------------------------------------------------------------
 * パンくず
 * ---------------------------------------------------------- */
.breadcrumb {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-line);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 16px 0;
	font-size: 12px;
	line-height: 1.6;
}

.breadcrumb__item {
	color: var(--color-sub);
}

.breadcrumb__item::after {
	content: "／";
	margin: 0 8px;
	color: var(--color-line);
}

.breadcrumb__item:last-child::after {
	content: none;
}

.breadcrumb__item a {
	color: var(--color-sub);
}

.breadcrumb__item--current {
	color: var(--color-ink);
	font-weight: 500;
}

@media (hover: hover) {
	.breadcrumb__item a:hover {
		color: var(--color-accent);
	}
}

/* ------------------------------------------------------------
 * 取引企業（フッターの上）
 * ---------------------------------------------------------- */
.partner {
	padding: 56px 0;
	background: var(--color-white);
}

.partner__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.partner__item {
	display: flex;
}

.partner__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 8px;
	transition: opacity .2s ease-out;
}

.partner__link img {
	width: 100%;
	height: auto;
}

@media (hover: hover) {
	.partner__link:hover {
		opacity: .7;
	}
}

/* ------------------------------------------------------------
 * サイトフッター
 * ---------------------------------------------------------- */
.site-footer {
	padding: 72px 0 44px;
	background: #000000;
	color: #CCCCCC;
}

/* ヘッダーと同じ全幅＋左右パディング */
.site-footer__container {
	width: 100%;
	padding: 0 24px;
}

.site-footer__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.site-footer__logo {
	width: 182px;
	height: auto;
	margin-bottom: 16px;
}

.site-footer__address {
	font-size: 14px;
	line-height: 1.9;
}

.footer-nav {
	display: flex;
	gap: 64px;
}

.footer-nav__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.footer-nav__link {
	color: var(--color-bg);
	font-size: 14px;
}

@media (hover: hover) {
	.footer-nav__link:hover,
	.site-footer__policy a:hover {
		color: var(--color-accent);
	}
}

/* SNS */
.footer-sns {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.footer-sns__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #444444;
	border-radius: 50%;
	color: #CCCCCC;
}

@media (hover: hover) {
	.footer-sns__link:hover {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}
}

.site-footer__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid #333333;
	font-size: 12px;
}

.site-footer__policy {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
}

.site-footer__policy a {
	color: #CCCCCC;
}

.site-footer__license {
	text-align: right;
}

.site-footer__copyright {
	margin-top: 4px;
}

/* ------------------------------------------------------------
 * SP固定CTA
 * ---------------------------------------------------------- */
.fixed-cta {
	display: none;
}

/* ------------------------------------------------------------
 * 車両カード
 *   トップの新着・おすすめ、/buy/ の在庫一覧、/buy/detail/ の関連車両で共通使用。
 *   ※ index.css 側にも同じ定義が残っている（値は同一・競合しない）。
 *      トップページの表示確認が済んだら index.css 側を削除すること。
 * ---------------------------------------------------------- */
.car-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-top: 36px;
}

.car-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: 10px;
	background: var(--color-white);
	color: var(--color-ink);
	/* ★2026-11-02 藤田指示：ホバーの変化に時間をかける。
	   画像の拡大は .car-card__image img 側。prefers-reduced-motion には対応済み */
	transition: border-color .2s ease-out;
}

.car-card__image {
	position: relative;
	/* ★2026-10-30 藤田指示：在庫サムネは 幅4：高3。カード幅に応じて高さが決まるので、
	   ブレークポイントごとの height 指定は不要になった */
	aspect-ratio: 4 / 3;
}

.car-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .2s ease-out;
}

.car-card__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--color-accent);
	color: var(--color-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

.car-card__tag--recommend {
	background: var(--color-ink);
}

.car-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 12px;
	padding: 20px 22px 22px;
}

/* 車名が2行になっても価格ボックス以下の位置が揃うよう下寄せにする */
.car-card__total {
	margin-top: auto;
}

.car-card__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.car-card__name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	transition: color .2s ease-out;
}

.car-card__spec {
	color: var(--color-sub);
	font-size: 14px;
	line-height: 1.5;
}

.car-card__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--color-accent-soft);
	color: var(--color-accent);
}

.car-card__total-label {
	font-size: 14px;
	font-weight: 900;
}

.car-card__total-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: 14px;
	font-weight: 700;
}

.car-card__total-price .en {
	font-size: 42px;
	font-style: normal;
	line-height: 1;
}

.car-card__detail {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 0 2px;
	color: var(--color-body);
	font-size: 12px;
	line-height: 1.5;
}

.car-card__detail b {
	font-size: 14px;
}

.car-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--color-line);
}

.car-card__tags li {
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--color-bg);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

/* ------------------------------------------------------------
 * 記事リストとページ送り
 *   /news/ の一覧と /news/detail/ の関連記事で共通使用。
 * ---------------------------------------------------------- */
/* 記事リスト */
.news-items {
	margin-top: 32px;
	border-top: 1px solid var(--color-line);
}

.news-item {
	border-bottom: 1px solid var(--color-line);
}

.news-item__link {
	display: grid;
	grid-template-columns: 220px 1fr auto;
	align-items: center;
	gap: 24px;
	padding: 24px 8px;
	color: var(--color-ink);
	text-decoration: none;
}

.news-item__meta {
	display: flex;
	align-items: center;
	gap: 16px;
}

.news-item__date {
	color: var(--color-sub);
	font-size: 16px;
	line-height: 1;
}

.news-item__category {
	padding: 2px 12px;
	border-radius: 999px;
	background: var(--color-accent-soft);
	color: var(--color-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.8;
	white-space: nowrap;
}

.news-item__title {
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
}

.news-item__arrow {
	flex-shrink: 0;
	color: var(--color-accent);
}

@media (hover: hover) {
	.news-item__link:hover .news-item__title {
		color: var(--color-accent);
	}
}

/* ページ送り */
.pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.pager__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 46px;
	height: 46px;
	padding: 0 16px;
	border: 1px solid var(--color-line);
	border-radius: 6px;
	color: var(--color-ink);
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}

.pager__item--current {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-white);
}

.pager__item--next {
	font-family: var(--font-ja);
	font-style: normal;
	font-size: 14px;
}

@media (hover: hover) {
	.pager__item:hover:not(.pager__item--current) {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}
}


/* ------------------------------------------------------------
 * 定義リスト型の表
 *   /company/ の会社概要、/recruit/ の募集要項で共通使用。
 * ---------------------------------------------------------- */
.profile-list {
	margin-top: 40px;
	border-top: 1px solid var(--color-line);
}

.profile-list__row {
	display: flex;
	border-bottom: 1px solid var(--color-line);
}

.profile-list__title {
	flex: 0 0 220px;
	padding: 24px 20px 24px 0;
	font-size: 16px;
	font-weight: 700;
}

.profile-list__data {
	flex: 1 1 auto;
	padding: 24px 0;
	color: var(--color-body);
	font-size: 16px;
}

.profile-list__data a {
	text-decoration: none;
}

.profile-list__data a:hover {
	text-decoration: underline;
}

.profile-list__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.profile-list__items li {
	position: relative;
	padding-left: 14px;
}

.profile-list__items li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
}

/* ------------------------------------------------------------
 * フォームの共通パーツ
 *   /sell/ /request/ /recruit/ /buy/detail/ の4フォームで共通使用。
 *   ★入力画面のみ。確認画面・完了画面・送信処理・自動返信は未実装。
 * ---------------------------------------------------------- */
.form {
	padding: 0 0 96px;
	background: var(--color-white);
}

.form--gray {
	padding: 96px 0;
	background: var(--color-bg);
}

.form__inner {
	padding: 48px 56px;
	border: 1px solid var(--color-line);
	border-radius: 10px;
	background: var(--color-white);
}

.form__list {
	margin-top: 32px;
	border-top: 1px solid var(--color-line);
}

.form__row {
	display: grid;
	grid-template-columns: 240px 1fr;
	align-items: start;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px solid var(--color-line);
}

.form__label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.form__badge {
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}

.form__badge--required {
	background: var(--color-accent);
	color: var(--color-white);
}

.form__badge--optional {
	border: 1px solid var(--color-line);
	color: var(--color-sub);
}

.form__field {
	min-width: 0;
}

.form__note {
	margin-top: 8px;
	color: var(--color-sub);
	font-size: 12px;
	line-height: 1.7;
}

/* --------------------------------------------------------
 * 確認画面
 * ------------------------------------------------------ */

/* 入力欄の代わりに値を出す行。.form__label と同じ上余白・行送りにして頭を揃える
   ★2026-10-25 システム側が値の <p> に .form__value を付けてくれたので :not([class]) は保険 */
.form__value,
.form__field > p:not([class]) {
	padding-top: 12px;
	color: var(--color-ink);
	font-size: 16px;
	line-height: 1.5;
}

/* 確認画面ではSP固定CTAを出さない。送信の直前に電話・LINEへ逃がすと離脱を招くだけ（2026-10-21 藤田指示）。
   フォーム本文の電話・LINEの帯は削除済みだが、画面下の固定CTAにも同じ理由があてはまる。
   .form__value は確認画面にしか出力されないので、これを目印にする。
   SSIのincludeは別リクエストで動くため footer.php からはページ側の $form が見えない。
   PHPの条件分岐ではなくCSSで切るのはそのため */
body:has(.form__value) .fixed-cta {
	display: none;
}

/* 「入力内容をご確認のうえ…」は表の外に見せる。枠線を最初の行から始める */
.form__list > .form__note:first-child {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
}

.form__list:has(> .form__note:first-child) {
	border-top: 0;
}

.form__list > .form__note:first-child + .form__row {
	border-top: 1px solid var(--color-line);
}

.form__input,
.form__select,
.form__textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #CCCCCC;
	border-radius: 6px;
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-ja);
	font-size: 16px;
	line-height: 1.6;
}

.form__input--short {
	max-width: 320px;
}

.form__textarea {
	min-height: 160px;
	resize: vertical;
}

.form__select {
	appearance: none;
	padding-right: 44px;
	background-image: linear-gradient(45deg, transparent 50%, #555555 50%), linear-gradient(135deg, #555555 50%, transparent 50%);
	background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.form__input::placeholder,
.form__textarea::placeholder {
	color: #AAAAAA;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
	border-color: var(--color-accent);
	outline: none;
}

/* 横並びの入力（年式と走行距離など） */
.form__inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.form__inline .form__input,
.form__inline .form__select {
	width: auto;
	flex: 0 1 220px;
	min-width: 0;
}

.form__unit {
	flex-shrink: 0;
	color: var(--color-body);
	font-size: 14px;
}

/* チェックボックス・ラジオ */
.form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.form__choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 1.6;
	cursor: pointer;
}

.form__choice input {
	width: 20px;
	height: 20px;
	accent-color: var(--color-accent);
}

.form__choices--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 20px;
}

/* 選択肢4つ。折り返し任せだと行がガタつくので2×2で揃える */
.form__choices--grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 20px;
}

/* 送信 */
.form__submit {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

/* 幅を広げるのは主ボタンだけ。横に並ぶ「入力内容を修正する」は本来の大きさのまま */
.form__submit .btn--lg {
	min-width: 320px;
}

/* 確認画面の「入力内容を修正する」。黒は主張が強いのでダークグレーに落とす */
.form__submit .btn--tertiary {
	border-color: var(--color-sub);
	color: var(--color-sub);
}

/* 入力前の注意書き */
.form__lead {
	color: var(--color-body);
	font-size: 16px;
	line-height: 2;
}


/* 連絡先（電話／メールのいずれか一方でよい欄） */
/* 電話番号とメールアドレス。横に並べると1つずつが狭いので縦に積む */
.form__contact {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 16px;
}

.form__sub {
	display: block;
	margin-bottom: 6px;
	color: var(--color-sub);
	font-size: 12px;
	font-weight: 700;
}

/* チェックボックスの下に置くテキストエリア */
.form__choices + .form__textarea {
	margin-top: 12px;
}

/* 入力項目数のめやす */
.form__count {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--color-accent-soft);
	color: var(--color-accent);
	font-size: 13px;
	font-weight: 700;
}

/* 入力エラー */
.form__error {
	display: none;
	margin-top: 8px;
	color: #C0392B;
	font-size: 13px;
	font-weight: 700;
}

.form__error.is-shown {
	display: block;
}

.form__row.is-error .form__input,
.form__row.is-error .form__select,
.form__row.is-error .form__textarea {
	border-color: #C0392B;
}


/* フォームを使わない導線（見出しの直下に置く） */
.form__alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 24px;
	padding: 18px 24px;
	border: 1px solid var(--color-line);
	border-radius: 10px;
	background: var(--color-bg);
}

.form__alt-label {
	color: var(--color-sub);
	font-size: 13px;
	font-weight: 700;
}

.form__alt-tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-ink);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.form__alt-tel svg {
	color: var(--color-accent);
}

.form__alt-line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--color-line-green);
	color: var(--color-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}

.form__alt-line img {
	width: 20px;
	height: auto;
}

/* 送信ボタン下の同意文 */
.form__consent {
	margin-top: 16px;
	color: var(--color-sub);
	font-size: 12px;
	line-height: 1.8;
	text-align: center;
}

@media (hover: hover) {
	.form__alt-line:hover {
		opacity: .85;
	}
}

/* ------------------------------------------------------------
 * サービス系ページの共通パーツ
 *   /service/ とその配下3ページで共通使用。
 *   他ページでも「リード＋交互ブロック＋カード＋CTA」の構成なら流用可。
 * ---------------------------------------------------------- */
.srv-intro {
	padding: 88px 0 64px;
	background: var(--color-white);
}

/* 画像と本文を左右交互に並べるブロック */
.srv-block {
	padding: 0 0 96px;
	background: var(--color-white);
}

.srv-block--gray {
	padding: 96px 0;
	background: var(--color-bg);
}

.srv-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 56px;
}

.srv-row + .srv-row {
	margin-top: 72px;
}

.srv-row--reverse .srv-row__image {
	order: 2;
}

.srv-row__image {
	overflow: hidden;
	max-width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 10px;
	background: var(--color-bg);
}

.srv-row__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.srv-row__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.srv-row__title {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.5;
	text-wrap: balance;
}

.srv-row__text {
	color: var(--color-body);
	font-size: 16px;
	line-height: 2;
}

/* チェック付きの箇条書き */
.srv-check {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--color-bg);
}

.srv-block--gray .srv-check {
	background: var(--color-white);
}

.srv-check li {
	position: relative;
	padding-left: 24px;
	color: var(--color-body);
	font-size: 14px;
	line-height: 1.8;
}

.srv-check li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 2px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform: rotate(-45deg);
}

/* 均等割りのカード */
.srv-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.srv-cards--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.srv-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 32px;
	border: 1px solid var(--color-line);
	border-radius: 10px;
	background: var(--color-white);
}

.srv-card__title {
	font-size: 18px;
	font-weight: 900;
	line-height: 1.5;
}

.srv-card__text {
	color: var(--color-body);
	font-size: 14px;
	line-height: 1.9;
}

/* タグ状の一覧（細かい取り扱いサービスなど） */
.srv-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.srv-tags li {
	padding: 10px 20px;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	background: var(--color-white);
	font-size: 14px;
	font-weight: 700;
}

/* 下部CTA
   全ページ共通で「グレーの帯＋白いカード」に統一する。
   ページごとに白地／グレー地を切り替えると見え方がばらつくため、
   --gray のような反転モディファイアは持たせない。 */
.srv-cta {
	padding: 96px 0;
	background: var(--color-bg);
}

/* 直前のセクションもグレーのときは背景が続くので、
   上の余白は直前のセクションの下余白に任せて二重に取らない。
   詳細度がこちらのほうが高いため、レスポンシブ側で書き直す必要はない */
.srv-block--gray + .srv-cta,
.srv-nav--gray + .srv-cta {
	padding-top: 0;
}

.srv-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 56px 40px;
	border-radius: 10px;
	background: var(--color-white);
	text-align: center;
}

.srv-cta__title {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.5;
	text-wrap: balance;
}

.srv-cta__text {
	color: var(--color-body);
	font-size: 16px;
	line-height: 1.9;
}

.srv-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 12px;
}

/* サービス間の相互リンク（4ページ共通でページ下部に置く） */
.srv-nav {
	padding: 0 0 96px;
	background: var(--color-white);
}

.srv-nav--gray {
	background: var(--color-bg);
}

.srv-nav__title {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 700;
}

.srv-nav__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.srv-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: 20px 24px;
	border: 1px solid var(--color-line);
	border-radius: 10px;
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
}

.srv-nav__link[aria-current="page"] {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
	color: var(--color-accent);
}

.srv-nav__link svg {
	flex-shrink: 0;
	color: var(--color-accent);
}

@media (hover: hover) {
	.srv-nav__link:hover {
		border-color: var(--color-accent);
	}
}

/* ------------------------------------------------------------
 * 規約・方針系ページの本文
 *   /privacy/ /policy/ /insurance-policy/ で共通使用。
 *   長文の条文のみで構成されるページはこのブロックだけで組む。
 * ---------------------------------------------------------- */
.legal {
	padding: 80px 0 96px;
	background: var(--color-white);
}

.legal__lead {
	color: var(--color-body);
	font-size: 16px;
	line-height: 2;
}

.legal__block {
	margin-top: 48px;
}

.legal__title {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-line);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.6;
}

.legal__text {
	margin-top: 20px;
	color: var(--color-body);
	font-size: 16px;
	line-height: 2;
}

.legal__list {
	margin-top: 20px;
	counter-reset: legal;
}

.legal__list > li {
	position: relative;
	padding-left: 36px;
	color: var(--color-body);
	font-size: 16px;
	line-height: 2;
}

.legal__list > li + li {
	margin-top: 12px;
}

.legal__list > li::before {
	content: "（" counter(legal) "）";
	counter-increment: legal;
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color-accent);
	font-weight: 700;
}

.legal__note {
	margin-top: 20px;
	padding: 20px 24px;
	border-left: 4px solid var(--color-accent);
	background: var(--color-bg);
	color: var(--color-body);
	font-size: 14px;
	line-height: 1.9;
}

.legal__contact {
	margin-top: 20px;
	padding: 28px 32px;
	border: 1px solid var(--color-line);
	border-radius: 10px;
}

.legal__contact-name {
	font-size: 18px;
	font-weight: 700;
}

.legal__contact-data {
	margin-top: 8px;
	color: var(--color-body);
	font-size: 16px;
	line-height: 1.9;
}

.legal__contact-data a {
	text-decoration: none;
}

.legal__date {
	margin-top: 56px;
	color: var(--color-sub);
	font-size: 14px;
	text-align: right;
}

@media (hover: hover) {
	.legal__contact-data a:hover {
		text-decoration: underline;
	}
}

/* ------------------------------------------------------------
 * ~1199px
 * ---------------------------------------------------------- */
@media screen and (max-width: 1199px) {
	.page-mv__title {
		font-size: 36px;
	}

	.wrapper,
	.wrapper_small {
		padding: 0 32px;
	}

	.h2 {
		font-size: 30px;
	}

	.site-header__inner,
	.site-footer__container {
		padding: 0 20px;
	}

	.site-header__logo img {
		height: 46px;
	}

	.global-nav__link {
		padding: 10px 8px;
		font-size: 12px;
		white-space: nowrap;
	}

	.global-nav__link.is-current::after {
		right: 8px;
		left: 8px;
	}

	.site-header__tel-number {
		font-size: 20px;
		white-space: nowrap;
	}

	.site-header__tel-time {
		display: none;
	}

	/* LINEボタンはアイコンのみに */
	.site-header__line {
		min-height: 46px;
		padding: 0 14px;
	}

	.site-header__line-text {
		display: none;
	}

	.footer-nav {
		gap: 40px;
	}
}

/* ------------------------------------------------------------
 * ~959px
 * ---------------------------------------------------------- */
@media screen and (max-width: 959px) {
	.page-mv {
		height: 290px;
	}

	.page-mv__title {
		font-size: 30px;
	}

	.wrapper,
	.wrapper_small {
		padding: 0 24px;
	}

	.h2 {
		font-size: 28px;
	}

	.site-header__inner {
		min-height: 72px;
		padding: 0 8px 0 24px;
	}

	.site-footer__container {
		padding: 0 24px;
	}

	.site-header__logo img {
		height: 44px;
	}

	.global-nav,
	.site-header__contact {
		display: none;
	}

	.site-footer__inner {
		flex-direction: column;
		gap: 32px;
	}

	.partner {
		padding: 48px 0;
	}

	.partner__list {
		gap: 16px;
	}

	.footer-nav {
		width: 100%;
		gap: 24px;
	}

	.footer-nav__list {
		flex: 1;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-footer__license {
		text-align: left;
	}

	.legal {
		padding: 64px 0 72px;
	}

	.legal__block {
		margin-top: 40px;
	}

	.legal__title {
		font-size: 20px;
	}

	.srv-intro {
		padding: 64px 0 48px;
	}

	.srv-block {
		padding: 0 0 72px;
	}

	.srv-block--gray {
		padding: 72px 0;
	}

	.srv-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.srv-row--reverse .srv-row__image {
		order: 0;
	}

	.srv-row + .srv-row {
		margin-top: 56px;
	}

	.srv-cards,
	.srv-cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.srv-cta {
		padding: 72px 0;
	}

	.srv-nav {
		padding: 0 0 72px;
	}

	.srv-cta__inner {
		padding: 40px 24px;
	}

	.srv-nav__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.form {
		padding: 0 0 72px;
	}

	.form--gray {
		padding: 72px 0;
	}

	.form__inner {
		padding: 32px 28px;
	}

	.form__row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 20px 0;
	}

	.form__label {
		padding-top: 0;
		font-size: 14px;
	}

	.form__choices--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.profile-list__title {
		flex: 0 0 180px;
	}

	.news-item__link {
		grid-template-columns: 1fr auto;
		gap: 8px 16px;
	}

	.news-item__meta {
		grid-column: 1 / -1;
	}

	.car-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

/* ------------------------------------------------------------
 * ~767px
 * ---------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.page-mv {
		height: 220px;
	}

	.page-mv__inner {
		padding: 0 16px;
	}

	.page-mv__en {
		font-size: 14px;
	}

	.page-mv__title {
		font-size: 24px;
	}

	.page-mv__rule {
		margin-top: 14px;
	}

	.breadcrumb__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
	}

	body {
		font-size: 16px;
	}

	.wrapper,
	.wrapper_small {
		padding: 0 16px;
	}

	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	.h2 {
		font-size: 26px;
	}

	.section-head__en {
		font-size: 14px;
	}

	.section-head__lead {
		font-size: 14px;
	}

	.btn {
		width: 100%;
		min-height: 58px;
		padding: 0 20px;
		font-size: 16px;
	}

	.btn--secondary,
	.btn--lg {
		min-height: 56px;
		font-size: 14px;
	}

	.btn--tertiary {
		min-height: 48px;
	}

	.site-header__inner {
		min-height: 64px;
		padding: 0 8px 0 16px;
	}

	.site-footer__container {
		padding: 0 16px;
	}

	.site-header__logo img {
		height: 40px;
	}

	.site-footer {
		padding: 44px 0 92px;
	}

	.site-footer__logo {
		width: 162px;
	}

	.site-footer__address {
		font-size: 12px;
	}

	.footer-nav {
		flex-wrap: wrap;
		gap: 14px 12px;
	}

	.partner {
		padding: 40px 0;
	}

	.partner__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.partner__link {
		padding: 4px;
	}

	.footer-sns {
		margin-top: 16px;
	}

	.footer-nav__list {
		flex: 0 0 calc(50% - 6px);
		gap: 14px;
	}

	.footer-nav__link {
		font-size: 14px;
	}

	.site-footer__bottom {
		font-size: 12px;
	}

	/* SP固定CTA */
	.fixed-cta {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		padding: 10px 12px;
		border-top: 1px solid var(--color-line);
		background: rgba(255, 255, 255, .96);
	}

	.fixed-cta__item {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 44px;
		border-radius: 22px;
		font-size: 12px;
		font-weight: 700;
	}

	.fixed-cta__item img {
		width: auto;
		height: 18px;
	}

	.fixed-cta__item--tel {
		border: 1px solid var(--color-accent);
		color: var(--color-accent);
	}

	.fixed-cta__item--line {
		background: var(--color-line-green);
		color: var(--color-white);
	}

	.fixed-cta__item--stock {
		background: var(--color-accent);
		color: var(--color-white);
	}

	.legal {
		padding: 48px 0 56px;
	}

	.legal__lead {
		font-size: 14px;
		line-height: 1.9;
	}

	.legal__block {
		margin-top: 32px;
	}

	.legal__title {
		font-size: 18px;
	}

	.legal__text,
	.legal__list {
		margin-top: 16px;
	}

	.legal__list > li {
		padding-left: 32px;
	}

	.legal__text,
	.legal__list > li {
		font-size: 14px;
		line-height: 1.9;
	}

	.legal__list > li + li {
		margin-top: 8px;
	}

	.legal__note {
		padding: 16px 20px;
		font-size: 12px;
	}

	.legal__contact {
		padding: 20px;
	}

	.legal__contact-name {
		font-size: 16px;
	}

	.legal__contact-data {
		font-size: 14px;
	}

	.legal__date {
		margin-top: 40px;
		font-size: 12px;
	}

	.srv-intro {
		padding: 48px 0 32px;
	}

	.srv-block {
		padding: 0 0 56px;
	}

	.srv-block--gray {
		padding: 56px 0;
	}

	.srv-row + .srv-row {
		margin-top: 48px;
	}

	.srv-row__title {
		font-size: 20px;
	}

	.srv-row__text {
		font-size: 14px;
		line-height: 1.9;
	}

	.srv-check {
		padding: 16px 20px;
	}

	.srv-cards,
	.srv-cards--4 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 12px;
	}

	.srv-card {
		padding: 24px;
	}

	.srv-card__title {
		font-size: 16px;
	}

	.srv-tags {
		gap: 8px;
		margin-top: 24px;
	}

	.srv-tags li {
		padding: 8px 16px;
		font-size: 12px;
	}

	.srv-cta {
		padding: 56px 0;
	}

	.srv-nav {
		padding: 0 0 56px;
	}

	.srv-cta__title {
		font-size: 20px;
	}

	.srv-cta__text {
		font-size: 14px;
	}

	.srv-cta__buttons {
		width: 100%;
		flex-direction: column;
		gap: 12px;
	}

	.srv-nav__list {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 12px;
	}

	.form {
		padding: 0 0 56px;
	}

	.form--gray {
		padding: 56px 0;
	}

	.form__inner {
		padding: 24px 20px;
	}

	.form__lead {
		font-size: 14px;
		line-height: 1.9;
	}

	.form__input,
	.form__select,
	.form__textarea {
		padding: 12px 14px;
	}

	.form__input--short {
		max-width: 100%;
	}

	.form__choices--grid,
	.form__choices--grid-2 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.form__choice {
		font-size: 14px;
	}

	.form__agree {
		padding: 20px 16px;
	}

	.form__submit .btn {
		width: 100%;
		min-width: 0;
	}

	.form__contact {
		gap: 12px;
	}

	.form__alt {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 16px 20px;
		text-align: center;
	}

	.form__alt-tel {
		justify-content: center;
		font-size: 24px;
	}

	.form__alt-line {
		justify-content: center;
		margin-left: 0;
	}

	.profile-list {
		margin-top: 28px;
	}

	.profile-list__row {
		display: block;
		padding: 16px 0;
	}

	.profile-list__title {
		padding: 0;
		font-size: 14px;
	}

	.profile-list__data {
		padding: 4px 0 0;
		font-size: 14px;
	}

	.profile-list__items {
		gap: 4px 16px;
	}

	.news-items {
		margin-top: 24px;
	}

	.news-item__link {
		padding: 20px 0;
	}

	.news-item__date,
	.news-item__title {
		font-size: 14px;
	}

	.pager {
		margin-top: 32px;
	}

	.pager__item {
		min-width: 40px;
		height: 40px;
		padding: 0 12px;
		font-size: 14px;
	}

	.car-list {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 16px;
		margin-top: 22px;
	}

	.car-card__body {
		padding: 16px 18px 18px;
	}

	.car-card__name {
		font-size: 16px;
	}

	.car-card__total-price .en {
		font-size: 34px;
	}
}

/* ------------------------------------------------------------
 * 視差軽減の設定がONのときは動きを止める
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media screen and (max-width: 1199px) {
	.car-card__total-price .en {
		font-size: 36px;
	}
}

/* ------------------------------------------------------------
 * 在庫カードのホバー
 *   ★2026-11-02 修正：このブロックは末尾が欠けていて、最後のルールが
 *     セレクタの途中で終わっていた（本番にもその状態で上がっていた）。
 *     車名の色が変わらなかったのはそのため。
 *   ★在庫カードは全ページで使うので、ホバーの指定はこのファイルだけに置く。
 *     ページ側のCSSに同じ指定を書かないこと（速度が食い違う）
 * ---------------------------------------------------------- */
@media (hover: hover) {
	.car-card:hover {
		border-color: var(--color-accent);
	}

	.car-card:hover .car-card__image img {
		transform: scale(1.04);
	}

	.car-card:hover .car-card__name {
		color: var(--color-accent);
	}
}