/* トラック新着一覧 */
#saerch > div{
	width: 100%;
}
#saerch .cntTitle h2{
	margin-top: 0;
}
#saerch .truck-list{
	margin-bottom: 50px;
}
#saerch .truck-list > li{
	margin-bottom: 30px;
}
#saerch .truck-list a{
	display: block;
}
#saerch .truck-list .cnt{
	padding: 30px 2.5%;
	gap: 20px;
}
#saerch .truck-list .cnt .cntImg{
	width: 30%;
	position: relative;
	overflow:hidden;
}
#saerch .truck-list .cnt .cntImg > img{
	border-radius: 5px;
}





#saerch .truck-list .cnt .cntText {
	flex: 1;
}
#saerch .truck-list .cnt .cntText .truck-title{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}
#saerch .truck-list .cnt .cntText .truck-title h3{
	font-size: 2.4rem;
	font-weight: 700;
	margin-bottom: 10px;
	width: 38vw;
	max-width: 500px;
}
#saerch .truck-list .cnt .cntText .truck-title .cnt-btn{
	position: absolute;
	right: 0;
	top: 0;
}
.truck-info{
	gap: 10px;
}
.truck-info .infoBox{
	background: #F2F3F5;
	padding: 20px 12px;
	width: 60%;
}
.truck-info .infoBox dl{
	flex-wrap: wrap;
	gap: 20px 10px;
	font-size: 1.3rem;
}
.truck-info .infoBox dl > div{
	width: calc(50% - 5px);
}
.truck-info .infoBox dl > div dt,.truck-info .infoBox dl > div dd{
	display: inline-block;
	font-weight: 700;
}
.truck-info .infoBox dl > div dt{
	min-width: 58px;
	color: var(--c-key);
}
.truck-info .contactBox{
	flex: 1;
}
.contactBox .contact-number{
	border: 1px solid #D60F1F;
	border-radius: 5px;
	padding: 8px 15px 8px 10px;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.contactBox span{
	font-size: 1.4rem;
}
.contactBox span:last-child{
	font-size: 20px;
}
#saerch section div.box-style02 span{
	font-size: 1.4rem;
}
#saerch section div.box-style02 p{
	font-size: 2rem;
}
@media(hover: hover) {
	#saerch .truck-list a:hover{
		transition: .2s opacity;
		opacity: .6;
	}
}

/* NEW */
.truck-title .tag-new{
  display:inline-block;
  background:#ff0000;
  color:#ffff6b;
  font-size:15px;
  padding:3px 6px;
  border-radius:2px;
  font-weight:700;
  margin-bottom: 5px;
}

/* SOLD tag */
.cntImg .tag-sold{
  display:inline-block;
  background:#666;
  color:#fff;
  font-size:12px;
  padding:3px 8px;
  border-radius:4px;
  font-weight:700;
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
}

/* SOLD ribbon overlay */
.truck-image-wrapper{ position:relative; }
.sold-ribbon{
  position:absolute;
  top:20px;
  left:-60px;
  width:240px;
  text-align:center;
  background:#e60012;
  color:#fff;
  font-size:18px;
  font-weight:800;
  padding:10px 0;
  transform:rotate(-30deg);
  z-index:10;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

@media screen and (max-width: 899px) {
	#saerch .truck-list .cnt .cntText .truck-title{
		width: 50%;
	}
	.truck-info{
    flex-flow: column-reverse;
    margin-top: 10px;
	}
	.truck-info .infoBox{
		width: 100%;
	}
	#saerch .truck-list .cnt{
		padding-top: 50px;
		position: relative;
		border:none;
	}
	#saerch .truck-list .cnt{
		padding-bottom: 20px;
	}
	#saerch .truck-list .cnt .cntImg{
		width: 42%;
		min-height: 140px;
		/*max-height: 150px;*/
	}
	#saerch .truck-list .cnt .cntText .truck-title{
		width: 55%;
	}
	#saerch .truck-list .cnt .cntText{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#saerch .truck-list .cnt .cntImg > img{
		border-radius: 0;
	}
	#saerch .contact-number{
		color: #fff;
		font-size: 1.8rem;
		justify-content: center;
		padding: 8px 0;
		background: var(--c-base);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		border-radius: 5px 5px 0 0;
	}
	#saerch .truck-list .cnt .cntText .truck-title{
		/*padding-top: 10px;*/
		position: relative;
		margin-bottom: 0;
	}
	#saerch .truck-list .cnt .cntText .truck-title h3{
		width: 100%;
		color: var(--c-key);
		text-decoration: underline;
	}
	.truck-cate{
		flex-wrap: wrap;
		gap: 3px;
	}
	.truck-cate li{
		font-size: 1rem;
	}
	#saerch .truck-list .cnt .cntText .truck-title .price{
		background: #D60F1F;
		padding: 12px;
		color: #fff;
		font-weight: 700;
		margin-top: 20px;
		display: inline-block;
	}
	#saerch .truck-list .cnt .cntText .truck-title .price span:first-child{
		margin-right: 10px;
	}

	.sold-ribbon{ font-size:14px; width:175px; left:-52px; top:13px; padding:5px 0;}
}
@media screen and (max-width: 699px) {
	#saerch .truck-list .cnt .cntText .truck-title h3{
		font-size: 1.8rem;
	}
	#saerch .truck-list .cnt .cntText .truck-title .price{
		/*position: absolute;*/
		/*bottom: 0;*/
		font-size: 1.4rem;
		margin-top: 5px;
	}
}
@media screen and (max-width: 480px) {
	#saerch > div{
		width: 90%;
	}
	#saerch .truck-list .cnt .cntText .truck-title h3{
		font-size: 1.5rem;
	}
	#saerch .truck-list .cnt .cntText .truck-title .price{
		font-size: 1.2rem;
	}
	#saerch .truck-list .cnt .cntText .truck-title .price span:first-child{
		margin-right: 0;
	}
	#saerch .truck-list .cnt .cntImg{
		min-height: 0;
		max-height: 130px;
	}
}

/* 個別ページ */
/* スライダー */
.slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  width: calc(100% / 3);
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
/* レイアウトのためのスタイル */
.swiper {
  max-width: 500px;
  width: 100%;
}
.swiper-slide img {
  height: auto;
  width: 100%;
}
#saerch-single #fv .cnt{
	gap: 30px;
}
#saerch-single #fv .cnt .cntImg{
	position: relative;
	overflow: hidden;
}
#saerch-single #fv .cnt .cntText{
	gap:20px;
}
#saerch-single #fv .cnt .cntText .contactBox{
	gap: 20px;
}
#saerch-single #fv .contact .cta-btn.cta-tel a{
	width: auto;
	height: auto;
	border:none;
	margin: 20px 0 15px;
}
#saerch-single #fv .contact .cta-btn.cta-tel span{
	font-size: 1.4rem;
}
#saerch-single #fv .contactBox .contact-number{
	width: 90%;
	max-width: 260px;
	margin: 0 auto;
}
#saerch-single #fv .contactBox .contact p{
	margin: 15px 0;
	font-size: 1.4rem;
}
#saerch-single .truck-info .infoBox{
	width: 100%;
	padding: 25px 15px;
}
#saerch-single .truck-info .infoBox dl{
	font-size: 1.5rem;
	gap: 25px 10px;
}
#saerch-single .truck-info .infoBox dl > div dt{
	width: 75px;
}
#saerch-single #fv{
	width: 100%;
}
#saerch-single #fv .box-style02 > span{
	font-size: 1.6rem;
	padding: 5px 0;
}
#saerch-single #fv .price > p{
	padding:15px 0;
	font-size: 2.4rem;
}
#saerch-single #fv .box-style02 > .cta-btn.cta-line a{
		width: 90%;
		max-width: 360px;
		margin: 20px auto 0;
		height: auto;
		background: none;
		box-shadow: none;
	}
#saerch-single .cntImg{
		min-width: 55%;
	}

#saerch-single .truck-details,#saerch-single .truck-salespoint{
		width: 100%;
	}

#saerch-single .truck-contents{
	padding: 40px 5%;
	border:1px solid #CDD1DB;
	border-radius: 5px;
	line-height: 1.5;
	/*max-height: 250px;*/
	/*overflow-y: scroll;*/
	--max-height: 250px;
	position: relative;
  max-height: var(--max-height);
  overflow: hidden;
  &:has(.read-more-button > input:checked) {
    max-height: initial;
  }
}
#saerch-single .truck-contents .text-container {
  position: relative;
}
#saerch-single .truck-contents .read-more-container {
	margin-bottom: 0;
  position: absolute;
  top: var(--max-height);
  transform: translateY(-180%);
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  background-image: linear-gradient(transparent, #fff 80%);
  height: calc(clamp(0px, round(up, 100% - var(--max-height), 1px), 1px) * 60);

  &:has(.read-more-button > input:checked) {
    display: none;
  }
}

#saerch-single .truck-contents .read-more-button{
	border: 1px solid var(--c-key);
  border-radius: 50px;
  padding: 5px 20px;
  background: #fff;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--c-key);
  font-weight: 600;
}
#saerch-single .truck-contents p,#saerch-single .truck-contents h2,
#saerch-single .truck-contents h3,#saerch-single .truck-contents h4,
#saerch-single .truck-contents h5,#saerch-single .truck-contents h6,
#saerch-single .truck-contents ul,#saerch-single .truck-contents ol,#saerch-single .truck-contents div
{
	margin-bottom: 10px;
}
#saerch-single .truck-contents h2,#saerch-single .truck-contents h3{
	margin-top: 20px;
}
#saerch-single .truck-contents h4,#saerch-single .truck-contents h5{
	margin-top: 15px;
}
#saerch-single .truck-contents h6{
	margin-top: 10px;
}

@media(hover: hover) {

}
@media screen and (max-width: 1000px) {
#saerch-single .truck-info .infoBox dl > div dt{
	width: 62px;
}

@media screen and (max-width: 899px) {
	section.single .title-box h1{
		font-size: 2.4rem;
	}
	#saerch-single #fv .cnt{
		flex-flow: column;
		align-items: center;
	}
	#saerch-single .cntImg{
		width: auto;
	}
	#saerch-single #fv .cnt .cntText{
		flex-flow: column-reverse;
		max-width: 600px;
	}
	#saerch-single .truck-contents p,#saerch-single .truck-contents h2,
	#saerch-single .truck-contents h3,#saerch-single .truck-contents h4,
	#saerch-single .truck-contents h5,#saerch-single .truck-contents h6,
	#saerch-single .truck-contents ul,#saerch-single .truck-contents ol
	{
		font-size: 90%!important;
	}
}
@media screen and (max-width: 480px) {
	#saerch-single #fv{
		width: 90%;
	}
	#saerch-single .cntImg{
		width: 100%;
	}
	#saerch-single .truck-details,#saerch-single .truck-salespoint{
		width: 90%;
	}
	#saerch-single #fv .box-style02 > span{
		font-size: 1.4rem;
	}
	#saerch-single #fv .price > p{
		font-size: 1.8rem;
	}
	#saerch-single #fv .contactBox .contact p{
		font-size: 1.2rem;
	}
	#saerch-single #fv .contactBox .contact-number{
		padding: 6px 15px 6px 8px;
	}
	#saerch-single .truck-contents p,#saerch-single .truck-contents h2,
	#saerch-single .truck-contents h3,#saerch-single .truck-contents h4,
	#saerch-single .truck-contents h5,#saerch-single .truck-contents h6,
	#saerch-single .truck-contents ul,#saerch-single .truck-contents ol
	{
		font-size: 80%!important;
	}
	#saerch-single .truck-contents{
		padding: 40px 5% 20px;
	}
}