@charset 'utf-8';

.result-items-wrapper.list-view .item-container{
	padding-bottom: 2em;
	margin-bottom: 2em !important;
	width: 100%;
	border-bottom: 2px solid #eee;
}
.result-items-wrapper.list-view .item-wrapper{
	display: grid !important;
	grid-template-columns: 240px 1fr;
	gap: 1em 2em;
}
.result-items-wrapper.list-view .item-info{
	display: contents !important;
}
.result-items-wrapper.list-view .item-figure{
	grid-row: 1 / 3;
	grid-column: 1 / 2;
	align-content: center;
	position: static !important;
	padding: 0.5em !important;
	min-width: 0;
}
.result-items-wrapper.list-view .item-figure img:first-child:not(:last-child){
	margin-bottom: 0.5em !important;
}
.result-items-wrapper.list-view .item-detail{
	grid-row: 1 / 1;
	grid-column: 2 / 3;
	margin: 0 !important;
	min-width: 0;
}
.result-items-wrapper.list-view .item-detail.accent-left-twotone{
	padding: 0;
	background: none;
}
.result-items-wrapper.list-view .item-detail h3::after{
	content: '';
	display: block;
	margin: 0.25em auto;
	height: 4px;
	background: currentColor;
	background: linear-gradient(144deg, var(--var-maincolor, #313550) 55%,   var(--var-accentcolor, #3AC3CF) 55%,
	                                    var(--var-accentcolor, #3AC3CF) 63%, var(--var-maincolor, #313550) 63%,
	                                    var(--var-maincolor, #313550) 70%,   var(--var-accentcolor, #3AC3CF) 70%,
	                                    var(--var-accentcolor, #3AC3CF) 78%, var(--var-maincolor, #313550) 78%);
}
.result-items-wrapper.list-view .item-infos-list{
	display: revert !important;
}
.result-items-wrapper .item-detail .item-code::before{
	content: '当社品番:';
	margin-inline-end: 0.5em;
	opacity: 0.8;
}
.result-items-wrapper .item-detail .item-mpn::before{
	content: 'メーカー品番:';
	margin-inline-end: 0.5em;
	opacity: 0.8;
}
.result-items-wrapper .item-detail .item-size::before{
	content: 'サイズ:';
	margin-inline-end: 0.5em;
	opacity: 0.8;
}
.result-items-wrapper .item-detail .item-info-comment{
	display: none;
}
.result-items-wrapper.list-view .item-detail .item-info-comment{
	display: revert;
}
.result-items-wrapper.list-view .item-detail .item-detail-comment{
	display: none;
}
.result-items-wrapper.list-view .item-price{
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 3em;
	margin: auto 0 -1rem !important;
	min-width: 0;
	text-align: end;
}
.result-items-wrapper.list-view .item-detail .item-b2b-comment-following-table{
	display: none;
}

@media (max-width: 1199px){
	.result-items-wrapper.list-view .item-price .fs-4{
		font-size: 1.2rem !important;
	}
	.result-items-wrapper.list-view .item-price .btn{
		--bs-btn-font-size: 0.8rem;
	}
	.result-items-wrapper.list-view [data-shorthand-text]::after{
		content: attr(data-shorthand-text);
	}
	.result-items-wrapper.list-view span{
		display: none;
	}
}

@media (max-width: 991px){
	.result-items-wrapper.list-view .item-price{
		flex-direction: column;
		align-items: flex-end;
	}
}

@media (max-width: 767px){
	.result-items-wrapper.list-view .item-wrapper{
		grid-template-columns: calc(100% / 3) 1fr;
	}
	.result-items-wrapper.list-view .item-figure{
		padding: 0 !important;
	}
	.result-items-wrapper.list-view .item-figure img:first-child:not(:last-child){
		margin-bottom: 0 !important;
	}
	.result-items-wrapper.list-view .item-figure img:last-child{
		aspect-ratio: 1 / 1 !important;
	}
	.result-items-wrapper.list-view .item-price{
		margin: auto 0 0 !important;
	}
	.result-items-wrapper.list-view .item-price > b{
		margin-bottom: 0.5rem !important;
	}
}

@media (max-width: 560px){
	.result-items-wrapper.list-view .item-figure{
		grid-row: 1 / 2;
		margin-bottom: auto !important;
	}
	.result-items-wrapper.list-view .ellipsis-toggle-button{
		margin-bottom: 0 !important;
	}
	.result-items-wrapper.list-view .item-price{
		grid-column: 1 / 3;
	}
}

@media (max-width: 480px){
	.result-items-wrapper.list-view .item-wrapper{
		grid-template-columns: 25% 1fr;
		gap: 0.5em;
	}
	.result-items-wrapper.list-view .fs-4{
		font-size: 4.4vw !important;
	}
}
