/* ========================================
   p-cs-container 特選中古車カード一覧（画像デザイン準拠）
   ======================================== */

.p-category-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1%;
}
.p-category-container section {
	width: 23%;
	margin: 0 1% 2%;
	border-radius: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.1);
	transition: .3s;
}
.p-category-container section:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.0);
}
.p-category-container section a {
	display: block;
}

/* 画像エリア */
.p-category-container figure {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f0f0f0;
}

.p-category-container figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* NEW タグ */
.p-category-container figure span {
	position: absolute;
	top:1rem;
	left: 0;
	background: #3BB8C6;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	padding: 0.4rem 0.8rem 0.5rem;
	border-radius: 0.4rem;
}

/* コンテンツエリア */
.p-category-container section a h2 {
	margin: 0;
	padding: 1.2rem 1.2rem 0.4rem;
	font-size: 2.0rem;
	border-bottom:none;
	color:#333;
}
.p-category-container section a h2::after{
	content:none;
}

.p-category-container section a > h2 span {
	display: block;
	font-size: 1.2rem;
	font-weight: normal;
	color: #333;
	margin:0 0 0.3rem 0.1rem;
}

/* 価格・諸元 dl（dt/dd をラベル・値で1行に） */
.p-category-container section dl {
	margin: 0;
	padding: 0 1.2rem 1.2rem;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.3rem 1rem;
	align-items: baseline;
}

.p-category-container section dt {
	grid-column: 1;
	margin: 0;
	padding: 0 0 0.3rem;
	font-size: 1.4rem;
	font-weight: normal;
	color: #333;
	line-height: 1.4;
	border-bottom:1px solid #ddd;
}

.p-category-container section dd {
	grid-column: 2;
	margin: 0;
	padding: 0 0 0.3rem;
	text-align: right;
	font-size: 1.4rem;
	font-weight: normal;
	color: #333;
	line-height: 1.4;
	border-bottom:1px solid #ddd;
}

/* 支払額/月を目立たせる */
.p-category-container section dl dt:first-of-type {
	color: #333;
}
.p-category-container section dl dd:first-of-type {
	color: #e85c2b;
	font-size: 2.2rem;
	font-weight: bold;
}
.p-category-container section dd span {
	font-size: 1.2rem;
	color:#333;
	font-weight: normal;
	margin-left: 0.2rem;
}

@media screen and (max-width: 600px) {
	.p-category-container section {
		width: 48%;
		margin-bottom:5%;
	}
	.p-category-container section a h2,
	.p-category-container section dl{
		padding-right: 0.8rem;
		padding-left : 0.8rem;
	}
}

/* p-staff__container スタッフ紹介（レスポンシブ） */

.p-staff__container {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin-bottom: 4.8rem;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

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

.p-staff__container > .img {
	flex-shrink: 0;
	width: 40%;
	max-width: 400px;
}

.p-staff__container > .img img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

.p-staff__container > .txt {
	flex: 1;
	min-width: 0;
	padding-left: 3.2rem;
}

.p-staff__container > .txt h2 {
	font-size: 2.4rem;
	margin: 0 0 1rem;
	color: var(--color-strong, #000);
	border: none;
}

.p-staff__container > .txt h2 span {
	display: block;
	font-size: 1.4rem;
	font-weight: normal;
	color: var(--color-txt, #333);
	opacity: 0.85;
	margin-top: 0.2rem;
}

.p-staff__container > .txt > p {
	margin: 0 0 2rem;
	line-height: 1.8;
	color: var(--color-txt, #333);
}

.p-staff__container > .txt dl {
	margin: 0;
	padding: 0;
}

.p-staff__container > .txt dt {
	font-weight: bold;
	font-size: 1.6rem;
	color: var(--color-accent, #237CD5);
	margin: 0 0 0.4rem;
	padding: 0;
}

.p-staff__container > .txt dd {
	margin: 0 0 1.6rem;
	padding: 0;
	line-height: 1.8;
	color: var(--color-txt, #333);
}

.p-staff__container > .txt dd:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
	.p-staff__container {
		flex-direction: column;
		margin-bottom: 4rem;
		padding: 0 1rem;
	}

	.p-staff__container > .img {
		width: 100%;
		max-width: none;
	}

	.p-staff__container > .txt {
		width: 100%;
		padding-left: 0;
		margin-top: 2rem;
	}

	.p-staff__container > .txt h2 {
		font-size: 2rem;
	}

	.p-staff__container > .txt h2 span {
		font-size: 1.2rem;
	}
}

/* attachfile スマホ版 横スクロール（max 600px） */
@media screen and (max-width: 600px) {
	.p-cs-images {
		position: relative;
	}
	.p-cs-images::before {
		content: "\f30a\00a0横スクロール\00a0\f30b";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		display: block;
		text-align: center;
		font-size: 1.4rem;
		background: rgba(35, 124, 213, 0.08);
		border-radius: 0.4rem;
		padding: 0.8rem 0 0.6rem;
		margin-bottom: 0.2rem;
	}
	/* 右端のグラデーションで「まだ続きがある」を表示 */
	.p-cs-images::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 11px;
		width: 3rem;
		height: 20rem;
		background: linear-gradient(to left, rgba(255,255,255,0.95), transparent);
		pointer-events: none;
		z-index: 1;
	}

	.p-cs-images ul.attachfile {
		display: flex;
		flex-wrap: nowrap;
		gap: 1rem;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		margin: 0;
		padding: 0.5rem 0 1.2rem;
		list-style: none;
		/* スクロールバーを目立たせる */
		scrollbar-width: auto;
		scrollbar-color: var(--color-accent, #237CD5) rgba(0,0,0,0.08);
	}

	.p-cs-images ul.attachfile::-webkit-scrollbar {
		height: 8px;
	}

	.p-cs-images ul.attachfile::-webkit-scrollbar-track {
		background: rgba(0,0,0,0.06);
		border-radius: 4px;
	}

	.p-cs-images ul.attachfile::-webkit-scrollbar-thumb {
		background: var(--color-accent, #237CD5);
		border-radius: 4px;
	}

	.p-cs-images ul.attachfile::-webkit-scrollbar-thumb:hover {
		background: var(--color-strong, #1a5fa8);
	}

	.p-cs-images ul.attachfile li {
		flex-shrink: 0;
		width: auto;
		margin: 0;
	}

	.p-cs-images ul.attachfile img,
	.p-cs-images ul.attachfile video {
		display: block;
		width: auto;
		height: 20rem;
	}
}

/* ========================================
   p-column-nayami
   ======================================== */

.p-column-nayami {
	display: flex;
	flex-wrap: wrap;
	margin:0 -1%;
}

.p-column-nayami li {
	position: relative;
	width: 23%;
	flex-grow: 1;
	margin: 0 1% 3%;
	padding:1.4rem 2rem 17rem;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: auto 13rem;
	list-style: none;
	font-size: 2.0rem;
	line-height: 1.2;
}

/* 吹き出し本体（ミント系・角丸・フラット） */
.p-column-nayami li::after {
	content: "";
	position: absolute;
	inset: 0 0 15.5rem 0;
	background: #E6F3F6;
	border-radius: 0.6rem;
	z-index: -1;
}

/* 吹き出しのしっぽ（下向き三角） */
.p-column-nayami li::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 14.4rem;
	transform: translateX(-50%);
	border-left: 1rem solid transparent;
	border-right: 1rem solid transparent;
	border-top: 1.2rem solid #E6F3F6;
	z-index: -1;
}

.p-column-nayami li:nth-child(1) {background-image: url(/images/common/nayami_01.png);}
.p-column-nayami li:nth-child(2) {background-image: url(/images/common/nayami_02.png);}
.p-column-nayami li:nth-child(3) {background-image: url(/images/common/nayami_03.png);}
.p-column-nayami li:nth-child(4) {background-image: url(/images/common/nayami_04.png);}

@media screen and (max-width: 600px) {
	.p-column-nayami li {
		width: 48%;
	}
}

/* ========================================
   コラム：サイトマップ（ツリー表示）
   HTMLは ul.p-column-sitemap のみ前提
   ======================================== */
   .p-column-sitemap,
   .p-column-sitemap ul {
	   list-style: none;
	   margin: 0;
	   padding: 0;
   }
   
   .p-column-sitemap {
	   --sitemap-line: rgba(0, 0, 0, 0.5);
	   --sitemap-hover-bg: rgba(0, 184, 159, 0.08);
	   --sitemap-indent: 1.6rem; /* 1階層のインデント */
	   --sitemap-branch: 1.2rem; /* 横線の長さ */
   }
   
   .p-column-sitemap > li {
	   margin: 0.4rem 0;
	   padding-left: 0;
   }
   
   .p-column-sitemap li {
	   position: relative;
	   margin: 0.35rem 0;
	   padding-left: calc(var(--sitemap-branch) + 0.6rem);
   }
   
   /* 子階層のインデント */
   .p-column-sitemap ul {
	   margin-top: 0.25rem;
	   margin-left: var(--sitemap-indent);
   }
   
   /* 横線（枝） */
   .p-column-sitemap li::before {
	   content: "";
	   position: absolute;
	   left: 0;
	   top: 1.05em;
	   width: var(--sitemap-branch);
	   border-top: 1px solid var(--sitemap-line);
   }
   
   /* 縦線（幹） */
   .p-column-sitemap li::after {
	   content: "";
	   position: absolute;
	   left: 0;
	   top: 0.2em;
	   bottom: -0.45rem;
	   border-left: 1px solid var(--sitemap-line);
   }
   
   /* 最後の要素は縦線を分岐位置で止める */
   .p-column-sitemap li:last-child::after {
	   bottom: calc(100% - 1.05em);
   }
   
   .p-column-sitemap a {
	   display: inline-block;
	   text-decoration: none;
	   line-height: 1.6;
	   padding: 0.15rem 0.35rem;
	   border-radius: 6px;
   }
   
   .p-column-sitemap a:hover,
   .p-column-sitemap a:focus-visible {
	   background: var(--sitemap-hover-bg);
	   outline: none;
   }