@charset "UTF-8";
/* =========================================================
   中古車 一覧 / 検索結果 / 詳細
   style.css の基本の配色（白・薄グレー・濃紺＋差し色の水色）を使います。
   ========================================================= */

/* ※--used-border / --used-muted / --used-sold / --used-accent-text は
   「外観 > カスタマイズ > 天野フォークリフト カラー設定」で上書きできます（inc/color-settings.php） */
:root {
	--used-border: #dfe3e8;
	--used-muted: #6b7280;
	/* 選択中の枠・ページャーなど状態を示す色（濃紺） */
	--used-accent: var(--amano-ink, #263238);
	/* 強調部分の文字色（メーカー名・スペックのアイコン・タブの下線など）。カラー設定で未指定なら差し色 */
	--used-accent-text: var(--amano-sky, #3ba9e0);
	--used-sold: #666;
	/* ボタン（濃紺の塗り） */
	--used-btn: var(--amano-ink, #263238);
	--used-btn-dark: var(--amano-ink-hover, #37474f);
	--used-btn-pale: var(--amano-gray, #f5f6f7);
	--used-btn-pale2: var(--amano-gray, #f5f6f7);
	--used-radius: var(--amano-radius, 2px);
}

/* 右向きの矢印「→」（ボタンの末尾。hover で少し右にずらす） */
.usedCard__more::after,
a.usedBtn--primary::after {
	content: "\2192";
	display: inline-block;
	margin-left: .8em;
	font-family: var(--amano-font-en, sans-serif);
	font-weight: 300;
	transition: transform .25s ease;
}
.usedCard__link:hover .usedCard__more::after,
.usedCard__link:focus-visible .usedCard__more::after,
a.usedBtn--primary:hover::after,
a.usedBtn--primary:focus-visible::after {
	transform: translateX(.3em);
}

/* ---------- ヘッダー ---------- */
/* タイトルはコンテンツ上のタイトルエリア（parts/top_title_area.php）に出しています。 */
.usedHeader__lead {
	color: var(--used-muted);
	font-size: 1rem;
}

/* ---------- 検索フォーム ---------- */
.usedSearch {
	margin: 1.5em 0;
	padding: 1.4em;
	background: var(--amano-gray, #f5f6f7);
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
}

.usedSearch .vkfs {
	font-size: 1rem;
}

/* 選択肢の数（inc/used-search-choices.php がタームの数から上書きします。ここは読み込めなかったときの既定値）
   -sp はスマホでの1段あたりの数です。 */
.usedSearch {
	--usedChoices-lift-type: 5;
	--usedChoices-lift-type-sp: 3;
	--usedChoices-fuel: 3;
	--usedChoices-fuel-sp: 3;
}

/* VK Filter Search の項目の並び（PC）。
   1段目：イラスト付きの「タイプ」「動力」を選択肢の数の比率で横並び（ボタンの幅が揃います）。
   2段目：残りのプルダウン・キーワードの4項目を4列。
   プラグイン既定は flex-basis: calc(50% - .8rem) の2カラム。
   同じ形のセレクタ（:not([class*="vkfs__outer-wrap--col"])）に .usedSearch を足して上書きしています。
   ブロック側でカラム数を指定した項目（vkfs__outer-wrap--col-*）はその指定を優先します。
   ブロックの並び順（DOM順）は変えず、order で見た目の順番だけ入れ替えています。
   767px 以下はプラグイン側で .vkfs__labels が display:block になり縦積みになります。 */
@media (min-width: 768px) {
	.usedSearch .vkfs .vkfs__outer-wrap:not([class*="vkfs__outer-wrap--col"]) {
		flex-basis: calc(25% - var(--vkfs-outer-margin-left-right, .4rem) * 2);
		max-width: calc(25% - var(--vkfs-outer-margin-left-right, .4rem) * 2);
	}
	.usedSearch .vkfs .vkfs__outer-wrap:has(.usedChoices--lift-type) {
		order: -2;
		flex-basis: calc(var(--usedChoices-lift-type) / (var(--usedChoices-lift-type) + var(--usedChoices-fuel)) * 100% - var(--vkfs-outer-margin-left-right, .4rem) * 2);
		max-width: calc(var(--usedChoices-lift-type) / (var(--usedChoices-lift-type) + var(--usedChoices-fuel)) * 100% - var(--vkfs-outer-margin-left-right, .4rem) * 2);
	}
	.usedSearch .vkfs .vkfs__outer-wrap:has(.usedChoices--fuel) {
		order: -1;
		flex-basis: calc(var(--usedChoices-fuel) / (var(--usedChoices-lift-type) + var(--usedChoices-fuel)) * 100% - var(--vkfs-outer-margin-left-right, .4rem) * 2);
		max-width: calc(var(--usedChoices-fuel) / (var(--usedChoices-lift-type) + var(--usedChoices-fuel)) * 100% - var(--vkfs-outer-margin-left-right, .4rem) * 2);
	}
}

/* ---------- 検索フォーム：イラスト付きの選択肢（タイプ・動力） ---------- */
/* プルダウンを inc/used-search-choices.php でチェックボックスに差し替えています。 */
.usedSearch .vkfs__outer-wrap:has(.usedChoices) .vkfs__label-name-inner::after {
	content: "（複数選択可）";
	margin-left: .3em;
	color: var(--used-muted);
	font-size: .8em;
	font-weight: 400;
}

/* 横並びのタイプと動力で、ラベルの折り返しなどがあってもボタンの高さが揃うよう、
   項目の枠を縦方向の flex にして選択肢の一覧を残りの高さいっぱいに広げます。 */
.usedSearch .vkfs__outer-wrap:has(.usedChoices) {
	display: flex;
	flex-direction: column;
}
.usedChoices {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(var(--usedChoices-cols), minmax(0, 1fr));
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.usedChoices--lift-type {
	--usedChoices-cols: var(--usedChoices-lift-type);
}
.usedChoices--fuel {
	--usedChoices-cols: var(--usedChoices-fuel);
}
@media (max-width: 767px) {
	.usedChoices--lift-type {
		--usedChoices-cols: var(--usedChoices-lift-type-sp);
	}
	.usedChoices--fuel {
		--usedChoices-cols: var(--usedChoices-fuel-sp);
	}
}
.usedChoices__item {
	margin: 0;
	padding: 0;
}
.usedChoices__item::before {
	content: none;
}

.usedChoice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35em;
	height: 100%;
	margin: 0;
	padding: .8em .4em .6em;
	background: #fff;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	color: #4b5563;
	font-size: .88rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.usedChoice:hover {
	border-color: var(--used-accent);
}

/* 本物のチェックボックスは見えなくするだけにして、キーボード操作と読み上げを残します。 */
.usedChoice__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* イラストは線の太さをそろえた単色の細線 SVG をマスクにして文字色で塗ります（選択中は濃紺になります）。 */
/* タイプと動力でボタンの高さが揃うよう、イラストの枠の高さは共通の固定値にしています
   （横幅に比例させると、SVG の縦横比の違いで動力のほうが低くなるため）。 */
.usedChoice__icon {
	display: block;
	width: 100%;
	max-width: 84px;
	height: 56px;
	background-color: currentColor;
	-webkit-mask: var(--usedChoice-icon) center / contain no-repeat;
	mask: var(--usedChoice-icon) center / contain no-repeat;
}
/* 動力の SVG は正方形で枠いっぱいに描かれるため、同じ高さだと大きく見えるので少し縮めます。 */
.usedChoices--fuel .usedChoice__icon {
	-webkit-mask-size: auto 80%;
	mask-size: auto 80%;
}

/* 右上のチェック印 */
.usedChoice::after {
	content: "";
	position: absolute;
	top: .4em;
	right: .4em;
	width: 1.1em;
	height: 1.1em;
	border: 1px solid var(--used-border);
	border-radius: 50%;
	background: #fff center / 70% no-repeat;
}

.usedChoice:has(.usedChoice__input:checked) {
	border-color: var(--used-accent);
	background-color: #fff;
	box-shadow: inset 0 0 0 1px var(--used-accent);
	color: var(--used-accent);
}
.usedChoice:has(.usedChoice__input:checked)::after {
	border-color: var(--used-accent);
	background-color: var(--used-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.usedChoice:has(.usedChoice__input:focus-visible) {
	outline: 2px solid var(--used-accent);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.usedChoices {
		gap: .4rem;
	}
	.usedChoice {
		padding: .7em .2em .5em;
		font-size: .75rem;
	}
	.usedChoice::after {
		top: .3em;
		right: .3em;
		width: 1em;
		height: 1em;
	}
	.usedChoice__icon {
		max-width: 60px;
		height: 40px;
	}
}

/* 検索ボタン。濃紺で塗り、横幅いっぱいではなく中央のボタンサイズに絞ります。
   プラグイン側が Bootstrap の .w-100（!important）を当てているため、幅だけ !important で上書きしています。 */
.usedSearch .vkfs .btn[type="submit"] {
	display: block;
	width: auto !important;
	min-width: 16em;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: .9em 2em;
	border: 1px solid var(--used-btn);
	border-radius: var(--used-radius);
	background: var(--used-btn);
	color: var(--amano-btn-text, #fff);
	font-weight: 700;
	letter-spacing: .06em;
	transition: background-color .2s ease, border-color .2s ease;
}
.usedSearch .vkfs .btn[type="submit"]:hover,
.usedSearch .vkfs .btn[type="submit"]:focus-visible {
	border-color: var(--used-btn-dark);
	background: var(--used-btn-dark);
	color: var(--amano-btn-text, #fff);
}

/* ---------- トップページ：記事スライダー下の検索 ---------- */
.usedTopSearch {
	padding: var(--amano-sec-pad, 3.6em) 0;
	/* トップページのセクション背景（style.css）の1本目の帯。以降は 白 → 濃紺 → グレー の順 */
	background: var(--amano-gray, #f5f6f7);
}
/* 見出しの見た目は style.css の .secHead（英字ラベル＋左揃えの大きな見出し） */
.usedTopSearch__head {
	margin-bottom: 2em;
}
.usedSearch--top {
	margin: 1.6em 0 0;
	background: #fff;
}

/* 検索フォーム上のタブ。押すとページ移動せずに下のパネルを切り替えます（assets/used-top-tabs.js）。
   1px の下線の上に文字だけのタブを並べ、表示中のタブは差し色の線を重ねます。 */
.usedTopSearch__tabList {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--used-border);
	list-style: none;
}
.usedTopSearch__tabItem {
	flex: 0 1 9em;
	margin: 0;
	padding: 0;
}
.usedTopSearch__tabItem::before {
	content: none;
}
.usedTopSearch__tab {
	display: block;
	position: relative;
	width: 100%;
	cursor: pointer;
	font-family: inherit;
	margin-bottom: -1px;
	padding: 1em .5em;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--used-muted);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
	text-align: center;
	text-decoration: none;
	transition: color .2s ease;
}
.usedTopSearch__tab::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--used-accent-text);
	transform: scaleX(0);
	transition: transform .25s ease;
}
.usedTopSearch__tab:not(.is-active):hover,
.usedTopSearch__tab:not(.is-active):focus-visible {
	color: var(--used-accent);
}
.usedTopSearch__tab.is-active {
	color: var(--used-accent);
	cursor: default;
}
.usedTopSearch__tab.is-active::after {
	transform: scaleX(1);
}
.usedTopSearch__panel[hidden] {
	display: none;
}

/* 中古車以外のタブのパネル（サービス紹介＋「詳しくはこちら」） */
.usedTopSearch__promo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2em;
	margin-top: 1.6em;
	padding: 2.6em 3em;
	background: #fff;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
}
/* 料金の下の割引案内（見た目は style.css の .inspDiscount。パネル内なので余白だけ詰める） */
.inspDiscount.usedTopSearch__discount {
	margin: 1em 0 0;
	padding: 1em 1.2em .9em;
}
/* パネル下部のメリットカード（カード自体の見た目は style.css の .inspMerits） */
.usedTopSearch__merits {
	flex: 1 1 100%;
	padding-top: 2em;
	border-top: 1px solid var(--used-border);
}
.usedTopSearch__meritsTitle {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.4;
}
.usedTopSearch__merits .inspMerits {
	margin: 1em 0 0;
}
/* 写真：カード幅いっぱいに 4:3 で表示（比率が違う写真は中央で切り抜き）
   写真は template-parts/used-top-search.php の img で指定 */
.inspMerit__figure.usedTopSearch__meritPhoto {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
	background: #f3f4f6;
}
.inspMerit__figure.usedTopSearch__meritPhoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.usedTopSearch__promoBody {
	flex: 1 1 auto;
	min-width: 0;
}
.usedTopSearch__promoTitle {
	margin: 0 0 .6em;
	font-size: 1.3rem;
	line-height: 1.5;
	letter-spacing: .04em;
}
.usedTopSearch__promoLead {
	margin: 0;
	font-size: .92rem;
	line-height: 1.9;
}
/* 料金・実績など数字で見せる項目 */
.usedTopSearch__promoFigures {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	margin: 1em 0 0;
}
.usedTopSearch__promoFigure {
	display: flex;
	align-items: baseline;
	gap: .2em .8em;
	flex-wrap: wrap;
	padding: .6em 1.2em;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	background: var(--amano-gray, #f5f6f7);
}
.usedTopSearch__promoFigure dt {
	margin: 0;
	font-size: .85rem;
	font-weight: 700;
}
.usedTopSearch__promoFigure dd {
	margin: 0;
	font-size: .85rem;
	font-weight: 700;
	white-space: nowrap;
}
.usedTopSearch__promoValue {
	margin-right: .15em;
	color: #E53935;
	font-family: var(--amano-font-en, sans-serif);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.2;
}
.usedTopSearch__promoNote {
	margin: .5em 0 0;
	color: #6b7280;
	font-size: .78rem;
	line-height: 1.6;
}
.usedTopSearch__promoPoints {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .4em 1.4em;
	margin: .9em 0 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
	font-weight: 700;
}
.usedTopSearch__promoPoints li {
	position: relative;
	margin: 0;
	padding-left: 1.3em;
}
.usedTopSearch__promoPoints li::before {
	content: "";
	position: absolute;
	top: .35em;
	left: .15em;
	width: .45em;
	height: .75em;
	border: solid var(--used-accent-text);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.usedTopSearch__all {
	margin: 2em 0 0;
	text-align: center;
}
/* .usedBtn（display:block）より後ろに書かれていないため、詳細度を上げて上書き */
.usedBtn.usedTopSearch__allLink {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	min-width: 18em;
	max-width: 100%;
	margin-top: 0;
	padding: 1em 1.4em 1em 1.8em;
}
@media (max-width: 767px) {
	.usedTopSearch__tabList {
		gap: 0;
	}
	.usedTopSearch__tabItem {
		flex: 1 1 0;
	}
	.usedTopSearch__tab {
		padding: .9em .1em;
		font-size: .74rem;
		letter-spacing: 0;
	}
	.usedTopSearch__promo {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2em;
		padding: 1.8em 1.2em;
	}
	.usedTopSearch__promoTitle {
		font-size: 1.05rem;
	}
	.inspDiscount.usedTopSearch__discount {
		text-align: left;
	}
	.usedTopSearch__merits {
		flex-basis: auto;
		align-self: stretch;
		padding-top: 1.2em;
	}
	.usedTopSearch__meritsTitle {
		font-size: 1rem;
	}
	/* スマホは「写真｜見出し＋本文」の横並び。左列を写真が見える幅に広げる */
	.usedTopSearch__merits .inspMerit {
		grid-template-columns: 112px minmax(0, 1fr);
	}
	.inspMerit__figure.usedTopSearch__meritPhoto {
		width: 112px;
	}
	.usedTopSearch__promoLead {
		text-align: left;
	}
	.usedTopSearch__promoFigures {
		flex-direction: column;
	}
	.usedTopSearch__promoFigure {
		justify-content: space-between;
		text-align: left;
	}
	.usedTopSearch__promoValue {
		font-size: 1.6rem;
	}
	.usedTopSearch__promoNote {
		text-align: left;
	}
	.usedTopSearch__promoPoints {
		grid-template-columns: 1fr;
		text-align: left;
	}
}

/* ---------- ツールバー ---------- */
.usedToolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	margin: 1.5em 0 1em;
	padding-bottom: .8em;
	border-bottom: 1px solid var(--used-border);
}
.usedToolbar__count {
	/* 件数は左端、トグルと並び替えは右側にまとめます */
	margin: 0 auto 0 0;
	font-size: .9rem;
	color: var(--used-muted);
}
.usedToolbar__count strong {
	font-family: var(--amano-font-en, sans-serif);
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--used-accent);
	margin-right: .15em;
	font-variant-numeric: tabular-nums;
}
/* 「在庫ありのみ表示」「レンタル可能のみ表示」トグル */
.usedToolbar__filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4em 1.2em;
	margin: 0;
	font-size: .85rem;
}
.usedToolbar__switch {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	cursor: pointer;
	user-select: none;
}
.usedToolbar__switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.usedToolbar__switchUi {
	position: relative;
	flex: none;
	width: 2.6em;
	height: 1.4em;
	border-radius: 1em;
	background: #c4c9ce;
	transition: background .2s ease;
}
.usedToolbar__switchUi::before {
	content: "";
	position: absolute;
	top: .2em;
	left: .2em;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	transition: transform .2s ease;
}
.usedToolbar__switch input:checked + .usedToolbar__switchUi {
	background: var(--used-accent);
}
.usedToolbar__switch input:checked + .usedToolbar__switchUi::before {
	transform: translateX(1.2em);
}
.usedToolbar__switch input:focus-visible + .usedToolbar__switchUi {
	outline: 2px solid var(--used-accent);
	outline-offset: 2px;
}
.usedToolbar__switchText {
	color: var(--used-muted);
}
.usedToolbar__switch input:checked ~ .usedToolbar__switchText {
	color: #111;
	font-weight: 700;
}

.usedToolbar__sort {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	font-size: .85rem;
}
.usedToolbar__sort select {
	padding: .4em .6em;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	background: #fff;
}

/* ---------- カード一覧 ---------- */
.usedList {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.6em;
}

/* カード：1px の細い枠、影なし。hover は枠を濃紺にして「詳細を見る」の矢印をずらすだけ */
.usedCard {
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	overflow: hidden;
	background: #fff;
	transition: border-color .2s ease;
}
.usedCard:hover {
	border-color: var(--used-accent);
}
.usedCard__link {
	/* カードの高さが揃うよう縦フレックスにし、「詳細を見る」を下端に寄せます */
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.usedCard.is-unavailable .usedCard__thumb img {
	filter: grayscale(1);
	opacity: .6;
}
.usedCard__thumb {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 4 / 3;
	background: var(--amano-gray, #f5f6f7);
	display: flex;
	align-items: center;
	justify-content: center;
}
.usedCard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.usedCard__noimg {
	font-size: .8rem;
	color: var(--used-muted);
}
/* 売り切れ車両。サムネイルの上に斜めの「SOLD OUT」を大きく重ねます。 */
.usedCard__soldout {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-18deg);
	width: 118%;
	text-align: center;
	/* Windows / macOS どちらにも標準搭載の極太フォントでインパクトを出します */
	font-family: Impact, Haettenschweiler, "Arial Black", "Arial Narrow Bold", sans-serif;
	font-size: 2.8rem; /* コンテナクエリ非対応時のフォールバック */
	font-size: clamp(3rem, 12cqw, 5rem);
	font-weight: 900;
	/* Impact / Arial Black は元から極太なので、合成ボールドでにじませない */
	font-synthesis-weight: none;
	font-synthesis: none;
	line-height: 1.05;
	letter-spacing: .04em;
	white-space: nowrap;
	color: #e0201b;
	text-shadow:
		2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
		2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff;
	pointer-events: none;
}

/* サムネイル左上のバッジ置き場。在庫状況・イチオシ → 揚高 の順に横並びにし、
   カード幅が狭くて入りきらないときは折り返して縦に積みます。
   左上にまとめて、下の本文（左揃え）と視線の起点をそろえています。 */
.usedCard__badges {
	position: absolute;
	top: .5em;
	right: .5em;
	left: .5em;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .3em;
	pointer-events: none;
}

/* 揚高バッジ（スペックの補足なので、在庫状況のバッジより控えめに半透明の濃紺） */
.usedCard__lift {
	padding: .25em .6em;
	border: 1px solid transparent;
	border-radius: var(--used-radius);
	background: rgba(15, 26, 36, .55);
	color: #fff;
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .02em;
	white-space: nowrap;
	pointer-events: none;
}

/* 在庫状況・おすすめのバッジ（商談中・レンタル中・イチオシ）。.usedCard__badges の先頭に置きます。
   揚高バッジと同じ形で、色だけ変えて区別します。
   ・商談中   : 白地に濃紺の文字（1px の濃紺の枠）
   ・レンタル中: 濃紺地に白文字
   ・イチオシ : 差し色（水色）地に白文字 */
.usedCard__badge {
	padding: .25em .7em;
	border: 1px solid transparent;
	border-radius: var(--used-radius);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	white-space: nowrap;
	pointer-events: none;
}
.usedCard__badge--negotiating {
	border-color: var(--amano-ink, #263238);
	background: #fff;
	color: var(--amano-ink, #263238);
}
.usedCard__badge--rental {
	border-color: var(--amano-ink, #263238);
	background: var(--amano-ink, #263238);
	color: #fff;
}
.usedCard__badge--pick {
	border-color: var(--amano-sky, #3ba9e0);
	background: var(--amano-sky, #3ba9e0);
	color: #fff;
}


.usedCard__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 1.1em 1.2em 1.3em;
}
.usedCard__no {
	margin: 0 0 .3em;
	font-family: var(--amano-font-en, sans-serif);
	font-size: .72rem;
	color: var(--used-muted);
	letter-spacing: .08em;
}
.usedCard__title {
	margin: 0 0 .6em;
	font-size: 1.1rem;
	line-height: 1.45;
	font-weight: 700;
}
.usedCard__maker {
	display: block;
	font-size: .78rem;
	font-weight: 500;
	/* 水色のままだと白地で読みにくい（コントラスト比 2.6）ため、黒を3割混ぜて濃くします（約5.0） */
	color: color-mix(in srgb, var(--used-accent-text) 70%, #000);
}

.usedCard__spec {
	margin: 0 0 .8em;
	font-size: 1rem;
	line-height: 1.6;
}
.usedCard__spec > div {
	display: flex;
	gap: .6em;
	border-bottom: 1px solid var(--used-border);
	/* 背景を少し外側まで広げたいので、左右のパディング分だけ負のマージンを付けています */
	margin: 0 -.4em;
	padding: .25em .4em;
}
/* 縞模様。一行おきに薄いグレーを敷いて行を追いやすくします。 */
.usedCard__spec > div:nth-child(odd) {
	background: var(--amano-gray, #f5f6f7);
}
.usedCard__spec dt {
	position: relative;
	flex: 0 0 5.2em;
	/* アイコンの幅を空けておき、アイコンが無い行もラベルの位置を揃えます */
	padding-left: 1.6em;
	color: var(--used-muted);
	font-weight: 400;
	margin: 0;
}
.usedCard__spec dt .fas {
	position: absolute;
	top: .5em;
	left: 0;
	width: 1.2em;
	text-align: center;
	font-size: .9em;
	color: var(--used-accent-text);
}
.usedCard__spec dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* 項目数が違ってもカード間で価格の位置が揃うよう、価格から下を下端に寄せます
   価格は欧文フォントで大きく、濃紺の文字 */
.usedCard__price {
	padding: 0;
	margin: auto 0 .7rem;
	color: #E53935;
	font-family: var(--amano-font-en, sans-serif);
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}
.usedCard__price small {
	font-size: .68rem;
	font-weight: 400;
	color: var(--used-muted);
	margin-left: .2em;
}
.usedCard__price.is-text {
	font-size: 1rem;
	color: var(--used-sold);
}
.usedCard__priceNote {
	font-size: .68rem;
	font-weight: 400;
	color: var(--used-muted);
	margin-left: .4em;
}
/* レンタル価格（スペックの下）。入力があるものだけ表示します。 */
.usedCard__rental {
	margin: 0 0 .8em;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--used-muted);
}
.usedCard__rental > div {
	display: flex;
	gap: .6em;
	padding: .15em 0;
}
.usedCard__rental dt {
	flex: 0 0 8em;
	margin: 0;
	font-weight: 400;
}
.usedCard__rental dd {
	margin: 0;
	font-weight: 700;
	color: #333;
}

/* カード下端の「詳細を見る」。カード全体がリンクなので span をボタン風に見せています。 */
.usedCard__more {
	display: block;
	padding: .75em 1em;
	border: 1px solid var(--used-btn);
	border-radius: var(--used-radius);
	background: var(--used-btn);
	color: var(--amano-btn-text, #fff);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
	transition: background-color .2s ease, border-color .2s ease;
}
.usedCard__link:hover .usedCard__more,
.usedCard__link:focus-visible .usedCard__more {
	border-color: var(--used-btn-dark);
	background: var(--used-btn-dark);
}

/* ---------- 空の状態 ---------- */
.usedEmpty {
	margin: 3em 0;
	padding: 2.5em 1.5em;
	text-align: center;
	background: var(--amano-gray, #f5f6f7);
	border-radius: var(--used-radius);
	line-height: 1.9;
}
.usedEmpty > p {
	margin: 0;
}
.usedEmpty > .usedEmpty__all {
	margin: .8em 0 0;
	font-size: .9rem;
}

/* ---------- ボタン ---------- */
/* ボタン：プライマリは濃紺の塗り＋「→」、それ以外は 1px の枠線のみ */
.usedBtn {
	display: block;
	padding: 1em 1.2em;
	margin-top: .8em;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: .04em;
	border: 1px solid var(--used-btn);
	border-radius: var(--used-radius);
	color: var(--used-btn);
	background: transparent;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.usedBtn:hover,
.usedBtn:focus-visible {
	background: var(--used-btn-pale);
	color: var(--used-btn);
}
.usedBtn--primary {
	background: var(--used-btn);
	color: var(--amano-btn-text, #fff);
}
.usedBtn--primary:hover,
.usedBtn--primary:focus-visible {
	border-color: var(--used-btn-dark);
	background: var(--used-btn-dark);
	color: var(--amano-btn-text, #fff);
}
/* 電話ボタンの下の問合せNo案内 */
.usedSingle__telNote {
	margin: .5em 0 0;
	font-size: .8rem;
	line-height: 1.6;
	color: var(--used-muted);
}
.usedSingle__telNote strong {
	color: #333;
	font-variant-numeric: tabular-nums;
}

.usedBtn--tel span {
	display: block;
	font-family: var(--amano-font-en, sans-serif);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: .04em;
}

/* ---------- かんたん見積（詳細ページ・販売中のみ） ---------- */
.usedQuote {
	margin-top: .8em;
}
/* summary をボタンに見せるため、既定のマーカーを消します */
.usedQuote > summary {
	margin-top: 0;
	list-style: none;
	cursor: pointer;
}
.usedQuote > summary::-webkit-details-marker {
	display: none;
}
.usedQuote > summary::after {
	content: "▼";
	margin-left: .5em;
	font-size: .7em;
	vertical-align: middle;
}
.usedQuote[open] > summary::after {
	content: "▲";
}
.usedQuote__form {
	margin-top: .6em;
	padding: 1em;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	background: #fff;
}
.usedQuote__field {
	margin: 0 0 .7em;
}
.usedQuote__field label {
	display: block;
	margin-bottom: .2em;
	font-size: .8rem;
	font-weight: 700;
}
.usedQuote__field input {
	width: 100%;
	padding: .5em .7em;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	font-size: .95rem;
}
.usedQuote__note {
	margin: .6em 0 0;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--used-muted);
}

/* ---------- 詳細ページ ---------- */
.usedSingle__no {
	font-size: .8rem;
	color: var(--used-muted);
	letter-spacing: .06em;
	margin-bottom: .3em;
}

.usedSingle__main {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 2em;
	align-items: start;
	margin-bottom: 2.5em;
}
@media (max-width: 767px) {
	.usedSingle__main {
		/* 1fr のままだと横スクロールするサムネイル列の幅で列が広がってしまうため minmax(0, 1fr) にします */
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5em;
	}
}
/* 中身（サムネイル列など）の実寸で列がはみ出さないようにします */
.usedSingle__media,
.usedSingle__side {
	min-width: 0;
}

/* ---------- ギャラリー（サムネイルでメイン画像を切り替え） ---------- */
.usedGallery__main {
	position: relative;
}
.usedGallery__slides {
	position: relative;
	/* 縦横比の違う写真が混ざっても切り替え時に高さが動かないよう枠を固定します */
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--amano-gray, #f5f6f7);
	border-radius: var(--used-radius);
	overflow: hidden;
}
.usedGallery__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.usedGallery__slide.is-active {
	opacity: 1;
	visibility: visible;
}
.usedGallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 画像のキャプション。スライドの下部に重ねます（右下のカウンターは避けます）。 */
.usedGallery__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 1.6em .8em .6em;
	font-size: 1.2rem;
	line-height: 1.5;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
	/* スワイプやボタン操作の邪魔をしないようにします */
	pointer-events: none;
}
/* カウンターが出るのはスライドが 2 枚以上のとき（＝ ul が単独の子でない）だけなので、その分だけ右を空けます */
.usedGallery__slides:not(:only-child) .usedGallery__caption {
	padding-right: 5em;
}

/* 動画スライド（YouTube・TikTok・Instagram など）。4:3 の枠内に収めます。 */
.usedGallery__slide--video {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}
.usedGallery__slide--video .usedEmbed {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	aspect-ratio: 16 / 9;
}
/* TikTok・Instagram は縦長なので高さ基準で収めます。 */
.usedGallery__slide--video .usedEmbed--tiktok {
	width: auto;
	height: 100%;
	aspect-ratio: 9 / 16;
}
.usedGallery__slide--video .usedEmbed--instagram {
	width: auto;
	height: 100%;
	aspect-ratio: 3 / 5;
	background: #fff;
}
.usedGallery__slide--video .usedEmbed > iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}
/* 埋め込みに対応していない URL はリンクだけが入るため、黒背景でも読めるようにします。 */
.usedGallery__slide--video > a {
	padding: 1em;
	color: #fff;
	word-break: break-all;
}

.usedGallery__nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	background: rgba(255, 255, 255, .9);
	color: var(--used-accent);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}
/* 左右ボタンは JS が動いたときだけ出す */
.usedGallery.is-ready .usedGallery__nav {
	display: flex;
}
.usedGallery__nav:hover,
.usedGallery__nav:focus-visible {
	background: #fff;
}
.usedGallery__nav--prev {
	left: 10px;
}
.usedGallery__nav--next {
	right: 10px;
}

.usedGallery__counter {
	position: absolute;
	right: 10px;
	bottom: 10px;
	margin: 0;
	padding: .2em .8em;
	font-size: .75rem;
	color: #fff;
	background: rgba(15, 26, 36, .7);
	border-radius: var(--used-radius);
	font-family: var(--amano-font-en, sans-serif);
	font-variant-numeric: tabular-nums;
}

.usedGallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: .5em;
	margin: .8em 0 0;
	padding: 0;
	list-style: none;
}
.usedGallery__thumb {
	display: block;
	border: 1px solid transparent;
	border-radius: var(--used-radius);
	overflow: hidden;
	line-height: 0;
	cursor: pointer;
	transition: border-color .2s ease, opacity .2s ease;
}
.usedGallery__thumb:hover {
	opacity: .75;
}
.usedGallery__thumb.is-active {
	border-color: var(--used-accent);
	opacity: 1;
}
.usedGallery__thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}

/* 動画サムネイル。1 枚目の画像に再生マークを重ねます。 */
.usedGallery__thumb--video {
	position: relative;
	width: 100%;
	padding: 0;
	background: #111;
	appearance: none;
}
.usedGallery__thumb--video::after {
	content: "";
	display: block;
	aspect-ratio: 1;
}
.usedGallery__thumb--video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .6;
}
.usedGallery__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.usedGallery__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #111;
}

/* スマホではサムネイルを折り返さず、一列の横スクロールにします。 */
@media (max-width: 767px) {
	.usedGallery__thumbs {
		display: flex;
		flex-wrap: nowrap;
		min-width: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		/* スクロールバーの分だけ下に余白を取ります */
		padding-bottom: .3em;
	}
	.usedGallery__thumbs > li {
		flex: 0 0 72px;
		scroll-snap-align: start;
	}
}

.usedSingle__side {
	padding: 1.6em;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	background: #fff;
	position: sticky;
	top: 100px;
}
@media (max-width: 767px) {
	.usedSingle__side {
		position: static;
	}
}
.usedSingle__comment {
	margin: 0 0 .9em;
	padding-bottom: .9em;
	border-bottom: 1px solid var(--used-border);
	font-size: 1rem;
	line-height: 1.8;
}
.usedSingle__comment > :first-child {
	margin-top: 0;
}
.usedSingle__comment > :last-child {
	margin-bottom: 0;
}
.usedSingle__terms {
	margin: 0 0 .9em;
	font-size: 1rem;
	line-height: 1.6;
}
.usedSingle__terms > div {
	display: flex;
	gap: .8em;
	padding: .35em 0;
	border-bottom: 1px solid var(--used-border);
}
.usedSingle__terms dt {
	position: relative;
	flex: 0 0 6em;
	/* アイコンの幅を空けておき、アイコンが無い行もラベルの位置を揃えます */
	padding-left: 1.6em;
	margin: 0;
	color: var(--used-muted);
	font-weight: 400;
}
.usedSingle__terms dt .fas {
	position: absolute;
	top: .5em;
	left: 0;
	width: 1.2em;
	text-align: center;
	font-size: .9em;
	color: var(--used-accent-text);
}
.usedSingle__terms dd {
	margin: 0;
}
.usedSingle__terms a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--used-border);
}
.usedSingle__terms a:hover {
	opacity: .7;
}

.usedSingle__price {
	margin: 0 0 .2em;
	padding: 0;
	color: #E53935;
	font-family: var(--amano-font-en, sans-serif);
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.usedSingle__price small {
	font-size: .7rem;
	font-weight: 400;
	color: var(--used-muted);
}
.usedSingle__price.is-text {
	font-size: 1.2rem;
	color: var(--used-sold);
}
.usedSingle__priceNote {
	font-size: .8rem;
	font-weight: 400;
	color: var(--used-muted);
	margin-left: .4em;
}

/* 価格まわりの注記。バッジより控えめに見せます。 */
.usedSingle__priceTax {
	margin: .5em 0 0;
	font-size: .8rem;
	color: var(--used-muted);
	line-height: 1.6;
}
/* ---------- 付帯サービス（詳細ページ・価格の下） ---------- */
.usedServices {
	margin: 1em 0 1.2em;
	padding: .9em 1em 1em;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	background: #fff;
}
.usedServices__title {
	margin: 0 0 .6em;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}
/* アイコンを横並びに。幅が足りないときは折り返します。 */
.usedServices__list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .5em;
	margin: .8em 0 0;
	padding: 0;
	list-style: none;
}
.usedServices__item {
	margin: 0;
	padding: 0;
	line-height: 0;
}
.usedServices__icon {
	display: block;
	width: 70px;
	height: auto;
	aspect-ratio: 1 / 1;
}

/* ---------- レンタル（価格の下）。レンタル価格が入っている車体だけ表示します。 ---------- */
/* スペックと同列に見えないよう、独立した枠にしてレンタルページへ誘導します。 */
.usedRental {
	margin: 1em 0 1.2em;
	padding: .9em 1em 1em;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	background: var(--used-btn-pale2);
}
.usedRental__title {
	display: flex;
	align-items: center;
	gap: .4em;
	margin: 0 0 .5em;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--used-accent);
}
.usedRental__list {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.6;
}
.usedRental__list > div {
	display: flex;
	gap: .8em;
	padding: .3em 0;
	border-top: 1px solid var(--used-border);
}
.usedRental__list > div:first-child {
	border-top: 0;
}
.usedRental__list dt {
	flex: 0 0 8em;
	margin: 0;
	color: var(--used-muted);
	font-weight: 400;
	font-size: .95rem;
}
.usedRental__list dd {
	margin: 0;
	font-weight: 700;
}
/* 問い合わせボタンと競合しないよう、テキストリンクで添えます。 */
.usedRental__link {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	margin-top: .6em;
	font-size: .9rem;
	font-weight: 700;
	color: var(--used-accent);
	text-decoration: underline;
}
.usedRental__link:hover,
.usedRental__link:focus {
	text-decoration: none;
}
.usedRental__link .fas {
	font-size: .8em;
}
@media (max-width: 480px) {
	.usedRental__list dt {
		flex-basis: 7em;
	}
}
/* 在庫状況のお知らせ（商談中・レンタル中）。詳細ページのサイド上部に出します。
   バッジの色は一覧カードの .usedCard__badge とそろえています。
   ・商談中   : 薄グレー地に濃紺の枠、白地のバッジ
   ・レンタル中: 濃紺地に白文字、濃紺のバッジ（白い枠） */
.usedStatus {
	display: flex;
	align-items: flex-start;
	gap: .9em;
	margin: 0 0 1.2em;
	padding: 1em 1.1em;
	border: 1px solid var(--amano-ink, #263238);
	border-radius: var(--used-radius);
}
.usedStatus__label {
	flex: 0 0 auto;
	padding: .35em .8em;
	border: 1px solid transparent;
	border-radius: var(--used-radius);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1em;
	white-space: nowrap;
}
.usedStatus__text {
	margin: 0;
	font-size: .85rem;
	line-height: 1.7;
}
.usedStatus--negotiating {
	background: var(--amano-gray, #f5f6f7);
	color: var(--amano-ink, #263238);
}
.usedStatus--negotiating .usedStatus__label {
	border-color: var(--amano-ink, #263238);
	background: #fff;
	color: var(--amano-ink, #263238);
}
.usedStatus--rental {
	background: var(--amano-ink, #263238);
	color: #fff;
}
.usedStatus--rental .usedStatus__label {
	border-color: #fff;
	background: var(--amano-ink, #263238);
	color: #fff;
}
@media (max-width: 480px) {
	.usedStatus {
		flex-direction: column;
		gap: .6em;
	}
}

.usedSingle__soldout {
	font-size: .88rem;
	line-height: 1.8;
	color: var(--used-muted);
}

.usedSingle__section {
	margin-bottom: 2.5em;
}
/* 見出しは下に 1px の線、左に差し色の短い線 */
.usedSingle__section > h2 {
	position: relative;
	margin-bottom: 1.2em;
	padding: 0 0 .7em;
	border-bottom: 1px solid var(--used-border);
	font-size: 1.25rem;
	letter-spacing: .04em;
}
.usedSingle__section > h2::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 2.4em;
	height: 1px;
	background: var(--used-accent-text);
}

/* スペック表。PCでは「基本情報」と「寸法・重量」を左右に並べ、モバイルでは1列に積みます。 */
.usedSpecGrid {
	display: grid;
	gap: 1.6em;
}
.usedSpecGroup__title {
	margin: 0 0 .5em;
	font-size: 1rem;
	font-weight: 700;
	color: inherit;
}
@media (min-width: 768px) {
	.usedSpecGrid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		column-gap: 2.4em;
	}
}

.usedSpec {
	/* ラベル列の幅を左右の表で揃えるため、幅を固定して計算させます。 */
	table-layout: fixed;
	width: 100%;
	/* 値の右に余白が残らないよう、表が広がりすぎないところで止めます。 */
	max-width: 30em;
	border-collapse: collapse;
	font-size: .92rem;
}
.usedSpec th,
.usedSpec td {
	padding: .8em 1em;
	border: 1px solid var(--used-border);
	text-align: left;
	vertical-align: middle;
}
.usedSpec th {
	/* 左右の表で同じ幅にするため、割合ではなく文字幅で決めます。 */
	width: 10em;
	background: var(--amano-gray, #f5f6f7);
	font-weight: 700;
	/* 「車長(フォーク長含まず)」のような長いラベルは、列が狭いので折り返させます。 */
	white-space: normal;
}
.usedSpec td {
	font-variant-numeric: tabular-nums;
}

.usedSingle__memo {
	margin-top: 1.2em;
	padding: 1em 1.2em;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	background: var(--amano-gray, #f5f6f7);
	font-size: .92rem;
	line-height: 1.8;
}
.usedSingle__memo > h3 {
	margin: 0 0 .4em;
	font-size: .95rem;
	font-weight: 700;
}
.usedSingle__memo > :last-child {
	margin-bottom: 0;
}

/* oEmbed（YouTube・TikTok など）の埋め込み。現在はギャラリーのスライド内でのみ使います。 */
.usedEmbed > iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}
/* TikTok は縦型動画なので 9:16。横幅もプレイヤーの実寸までに抑えます。 */
.usedEmbed--tiktok {
	max-width: 325px;
}
.usedEmbed--tiktok > iframe {
	aspect-ratio: 9 / 16;
}
/* Instagram はアカウント名やいいね欄の枠を含むため、少し横広の 3:5 にしています。
   高さは自動調整されないので、はみ出した分は iframe 内でスクロールします。 */
.usedEmbed--instagram {
	max-width: 400px;
}
.usedEmbed--instagram > iframe {
	aspect-ratio: 3 / 5;
}

.usedList--related {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.usedSingle__back {
	text-align: center;
	margin-top: 2em;
}

/* ---------- ページャー ---------- */
.usedPagination {
	display: block;
	margin-top: 2.5em;
}
.usedPagination > .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .4em;
}
.usedPagination > .nav-links > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 2.4em;
	height: 2.4em;
	margin: 0;
	padding: 0 .6em;
	border: 1px solid var(--used-border);
	border-radius: var(--used-radius);
	background: #fff;
	color: inherit;
	font-family: var(--amano-font-en, sans-serif);
	font-size: .92rem;
	line-height: 1;
	text-decoration: none;
}
.usedPagination > .nav-links > a.page-numbers:hover,
.usedPagination > .nav-links > a.page-numbers:focus-visible {
	background: var(--amano-gray, #f5f6f7);
}
.usedPagination > .nav-links > .page-numbers.current {
	border-color: var(--used-accent);
	background: var(--used-accent);
	color: #fff;
	font-weight: 500;
}
.usedPagination > .nav-links > .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ---------- パンくずリスト ---------- */
/* SWELL は投稿詳細（.single）で最後の項目＝現在ページ名を CSS で隠すため、
   中古車詳細では「ホーム > 中古車 > リーチ >」と矢印だけが残ります。
   詳細ページでは車両名まで表示させます。 */
.single-used .p-breadcrumb .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
	display: inline-flex;
}