@charset "utf-8";

/* 商品一覧・商品ページ記述CSSファイル */

/* 商品一覧
--------------------------------------------*/

/* .reco-card */
.reco-img {
	position: relative;
	margin: 0 0 30px;
}
.reco-img img,
.reco-noimg {
	height: 248px;
	width: 100%;
	border-radius: 20px;
}
.reco-img img {
	width: 100%;
	object-fit: cover;	
}
.reco-img.kaga::before {
	content: '';
	background: url('../image/icon/kaga.png') no-repeat center/cover;
	width: 120px;
	height: 120px;
	position: absolute;
	bottom: -10px;
	left: 10px;
	z-index: 2;
}
.reco-noimg {
	background: rgba(249,227,185,.6);
	position: relative;
}
.reco-noimg::before {
	content: 'No Image';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5em;
	color: #fff;
	letter-spacing: 5%;
	text-shadow: 2px 2px 2px rgba(0,0,0,.2);
}
.reco-box {
	border-left: 3px solid #133F03;
	padding: 5px 10px 5px 15px;
	margin: 0 0 0 10px;
}
.reco-name {
	font-size: 20px;
	padding: 0 0 10px;
}
.reco-desc {
	line-height: 1.7;
	padding: 0 0 15px;
}
.reco-info dl {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 13px;
	align-items: center;
	margin: 0 0 13px;
}
.reco-info dt {
	text-align: center;
	border: 1px solid;
	border-radius: 2em;
	font-size: 14px;
	background: #FFF6E5;
}
.reco-info dd {
	line-height: 1.2;
}
.reco-link {
	width: fit-content;
	margin: 0 0 0 auto;
}
@media screen and (min-width: 768px) {
	.reco-img img,
	.reco-noimg {
		border-radius: 30px;
	}
}

/* おすすめ商品 */
.pdt-reco-block {
	display: grid;
	row-gap: 60px;
	margin: 30px 0 0;
}
.pdt-reco-block .reco-img img,
.pdt-reco-block .reco-noimg {
	height: 62vw;
}
@media screen and (max-width: 767px) {
	.pdt-reco-block .reco-img.kaga::before {
		width: 30vw;
		height: 30vw;
	}
}
@media screen and (min-width: 768px) {
	.pdt-reco-block {
		grid-template-columns: 1fr 1fr;
		row-gap: 80px;
		column-gap: 5%;
		margin: 50px 0 0;
	}
	.pdt-reco-block .reco-img img,
	.pdt-reco-block .reco-noimg {
		height: 34vw;
	}
}
@media screen and (min-width: 1000px) {
	.pdt-reco-block {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.pdt-reco-block .reco-img img,
	.pdt-reco-block .reco-noimg {
		height: 248px;
	}
}

/* すべての商品 */
.pdt-all-read {
	margin: 0 8vw 50px 0;
}
.pdt-all-read i {
	color: #D3342E;
}
@media screen and (min-width: 768px) {
	.pdt-all-read {
		position: absolute;
		top: 10px;
		left: 240px;
		margin: 0;
	}
}
@media screen and (min-width: 900px) {
	.pdt-all-read {
		left: 280px;
	}
}

@media screen and (max-width: 1130px) {
	.pdt-all-wrap {
		padding: 0 0 0 30px!important;
	}
}
@media screen and (max-width: 767px) {
	.pdt-all-wrap {
		padding: 0 0 0 8vw!important;
	}
}
.pdt-all-block {
	margin: 35px 0 0;
}
.pdt-all-section {
	margin: 0 0 35px;
}
.pdt-all-title {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 1px dashed #133F03;
	padding: 0 10px 10px 0;
	margin: 0 0 30px;
}
@media screen and (min-width: 940px) {
	.pdt-all-title .scroll-arw {
	  display: none; /* 基本は非表示 */
	}
	.pdt-all-title .scroll-arw.is-show {
	  display: flex; /* 4件以上の時だけ表示 */
	}
}
@media screen and (max-width: 767px) {
	.pdt-all-title .scroll-arw {
		display: block;
	}
	.pdt-all-title .scroll-arw::after {
		margin: -8px 0 0;
	}
}
.pdt-all-list {
	display: flex;
	width: 100%;
	white-space: nowrap;
	gap: 25px;
	padding: 0 25px 10px 0;
}
.pdt-all-img {
	position: relative;
	width: 185px;
	flex: 0 0 auto;
}
.pdt-all-img a::after {
	content: '\f35a';
	font-family: "Font Awesome 7 Free";
	color: #D3342E;
	font-weight: 900;
	font-size: 1.5em;
	line-height: 1;
	position: absolute;
	bottom: 10px;
	right: 10px;
}
@media screen and (min-width: 768px) {
	.pdt-all-block {
		margin: 50px 0 0;
	}
	.pdt-all-section {
		margin: 0 0 80px;
	}
	.pdt-all-img {
		width: 280px;
	}
	.pdt-all-img a::after {
		font-size: 2.4em;
		bottom: 15px;
		right: 15px;
	}
	.pdt-all-list {
		gap: 35px;
		padding: 0 0 25px;
	}
}


/* 商品ページ
--------------------------------------------*/
article.category-item {
	margin: 0 0 50px;
	padding: 60px 8vw 150vw;
}
@media screen and (min-width: 768px) {
	article.category-item {
		max-width: 950px;
		margin: 0 auto 80px;
		padding: 80px 30px 700px;
		box-sizing: content-box;
	}
}

.item_page_title {
	font-size: 22px;
	margin: 0 0 1.5em;
	line-height: 1.6!important;
}
#itempage .itemimg {
	margin: 0 0 30px;
}
#img-box {
	width: 100%!important;
	margin-bottom: 0!important;
}
#itempage .detail-box {
	width: 100%;
	float: none;
}
#itempage .item-info {
	display: none;
	padding: 0;
}
/* おすすめ商品だけカートエリア表示 */
.category-itemreco #itempage .item-info {
	display: block;
}
.itemimg img,
.lum-lightbox.lum-open img {
	border-radius: 20px;
}
.itemsubimg img {
	border-radius: 15px;
}
.item-name, .itemcode {
	display: none;
}
.item-description {
	margin: 0 0 2em;
}
.item-description p {
	line-height: 2;
	font-size: 16px;
}
.item-info .skuform {
	background: #fff;
	border: 1px solid #133F03;
	border-radius: 20px;
	padding: 25px;
}
.item-info .skuname {
	font-size: 20px;
	font-family: "NotoSans Medium", "sans-serif";
	font-weight: normal;
	background: transparent;
	border-bottom: 1px dashed #133F03;
	padding: 0 0 .5em;
	margin: 0 0 .5em;
	min-height: auto;
}
.item-info .zaikostatus {
	float: none;
	text-align: right;
}
.item-info .field_price {
	line-height: 1.5;
}
.item-info .tax {
	color: #333;
}
.item-info .skubutton {
	background: #D3342E;
	border-radius: 10px;
}
.item-info .skubutton:hover {
	background: #D3544F;
}
@media screen and (max-width: 767px) {
	#itempage .itemsubimg a {
		width: 30%;
	}
	.item-info .c-box {
		text-align: center;
		padding: 10px 0 0;
	}
	.item-info .skubutton {
		padding: 20px 0;
		width: 100%;
		margin: 15px 0 0;
	}
}
@media screen and (min-width: 768px) {
	.item_page_title {
		font-size: 25px;
	}
	#itempage {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr;
		column-gap: 5%;
	}
	#img-box {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
		margin-bottom: 0!important;
	}
	#itempage .detail-box {
		grid-column: 2 / 3;
		width: 100%;
	}
	#itempage .item-info {
		grid-column: 2 / 3;
	}
	.itemimg img,
	.lum-lightbox.lum-open img {
		border-radius: 30px;
	}
	.item-info .skuform {
		border-radius: 30px;
		padding: 25px 25px 15px;
	}
	.item-info .quantity {
		margin-bottom: 15px;
	}
	.item-info .cart-button {
		margin: 0 0 0 20px;
	}
}

#secondary {
	padding: 0;
	border-top: none;
	margin-top: -150vw;
}
#secondary section {
	padding: 0;
}
.item-back {
	width: fit-content;
	margin: 0 auto 120px;
}
@media screen and (min-width: 768px) {
	#secondary {
		margin-top: -600px;
	}
}

/* 
--------------------------------------------*/
@media screen and (max-width: 767px) {
	
}
@media screen and (min-width: 768px) {
	
}