/*
 * Green Scape Calm 2.3
 * Welcart商品詳細ページ専用CSS
 *
 * 対象：#itempage のみ
 * 購入処理・SKU・カート送信には触れません。
 */

#itempage,
#itempage * {
	box-sizing: border-box;
}

#itempage {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.08fr);
	grid-template-areas:
		"image title"
		"image description"
		"thumbs purchase"
		"related related";
	gap: 22px 46px;
	width: min(1180px, calc(100% - 40px));
	margin: 54px auto 96px;
	color: #303832;
	font-family:
		"Hiragino Kaku Gothic ProN",
		"Yu Gothic",
		YuGothic,
		Meiryo,
		sans-serif;
	line-height: 1.8;
}

/* フォーム自体をグリッドの中身として扱う */
#itempage > form {
	display: contents;
}

/* メイン画像 */
#itempage .itemimg {
	grid-area: image;
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

#itempage .itemimg a {
	display: block;
	width: 100%;
}

#itempage .itemimg img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 680px;
	margin: 0 !important;
	object-fit: contain;
	background: #f6f6f2;
}

/* 商品名 */
#itempage > form > h3 {
	grid-area: title;
	align-self: end;
	margin: 0 !important;
	padding: 0 0 18px !important;
	border-bottom: 1px solid #dfe3dc !important;
	background: transparent !important;
	color: #18382b !important;
	font-family:
		"Yu Mincho",
		"Hiragino Mincho ProN",
		serif;
	font-size: clamp(27px, 3vw, 40px) !important;
	font-weight: 500 !important;
	letter-spacing: .04em;
	line-height: 1.45 !important;
}

/* 説明欄 */
#itempage .exp {
	grid-area: description;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	color: #3f4943;
	font-size: 14px;
}

#itempage .exp p {
	margin: 0 0 1.35em;
}

#itempage .exp h2,
#itempage .exp h3,
#itempage .exp h4 {
	margin: 1.8em 0 .7em;
	color: #244b38;
	line-height: 1.6;
}

#itempage .field {
	margin: 0 0 16px;
}

#itempage .field_name {
	margin-bottom: 3px;
	color: #687169;
	font-size: 12px;
}

#itempage .field_price,
#itempage .price {
	color: #18382b !important;
	font-size: 27px !important;
	font-weight: 700 !important;
	line-height: 1.3;
}

#itempage .field_cprice,
#itempage .cprice {
	color: #8b918c !important;
	font-size: 13px !important;
	text-decoration: line-through;
}

/* 購入欄 */
#itempage .skuform {
	grid-area: purchase;
	width: 100% !important;
	margin: 0 !important;
	padding: 24px !important;
	float: none !important;
	border: 1px solid #dfe3dc;
	border-radius: 12px;
	background: #f8f8f5;
	text-align: left !important;
}

#itempage .skuform > div {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: flex-start;
	margin-top: 0 !important;
}

#itempage input[type="text"],
#itempage input[type="number"],
#itempage select {
	min-height: 46px !important;
	padding: 8px 11px !important;
	border: 1px solid #cbd1c9 !important;
	border-radius: 7px !important;
	background: #fff !important;
	color: #303832 !important;
	font-size: 14px !important;
	box-shadow: none !important;
}

#itempage input[name^="quant"] {
	width: 78px !important;
	text-align: center;
}

#itempage input[type="submit"],
#itempage .skubutton {
	min-height: 48px !important;
	padding: 12px 23px !important;
	border: 1px solid #244b38 !important;
	border-radius: 7px !important;
	background: #244b38 !important;
	background-image: none !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
}

#itempage input[type="submit"]:hover,
#itempage .skubutton:hover {
	background: #fff !important;
	color: #244b38 !important;
}

/* SKU複数商品 */
#itempage .skumulti,
#itempage .item_option {
	width: 100% !important;
	border: 1px solid #dfe3dc !important;
	border-collapse: collapse !important;
	background: #fff !important;
}

#itempage .skumulti th,
#itempage .skumulti td,
#itempage .item_option th,
#itempage .item_option td {
	padding: 13px 11px !important;
	border: 1px solid #dfe3dc !important;
	vertical-align: middle !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}

#itempage .skumulti th,
#itempage .item_option th {
	background: #f2f3f0 !important;
	color: #445149 !important;
	font-weight: 700 !important;
}

#itempage .skumulti .price {
	font-size: 20px !important;
}

/* サブ画像 */
#itempage .itemsubimg {
	grid-area: thumbs;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

#itempage .itemsubimg a {
	display: block;
}

#itempage .itemsubimg img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	object-fit: cover;
	background: #f5f5f1;
}

/* 関連商品 */
#itempage .assistance_item {
	grid-area: related;
	width: 100%;
	margin-top: 58px;
	padding-top: 32px;
	border-top: 1px solid #dfe3dc;
}

#itempage .assistance_item > h3 {
	margin: 0 0 24px !important;
	padding: 0 !important;
	background: transparent !important;
	color: #18382b !important;
	font-family:
		"Yu Mincho",
		"Hiragino Mincho ProN",
		serif;
	font-size: 25px !important;
	font-weight: 500 !important;
}

#itempage .assistance_item ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#itempage .assistance_item li {
	margin: 0;
}

#itempage .assistance_item .listbox {
	height: 100%;
	padding: 16px;
	border: 1px solid #dfe3dc;
	background: #fff;
}

#itempage .assistance_item .slit,
#itempage .assistance_item .detail {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

#itempage .assistance_item .slit img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

#itempage .assistance_item .detail h4 {
	margin: 14px 0 8px;
	color: #244b38;
	font-size: 15px;
}

/* エラー */
#itempage .error_message:empty {
	display: none;
}

#itempage .error_message:not(:empty) {
	margin-top: 12px;
	padding: 12px 14px;
	border-left: 3px solid #b94e47;
	background: #fbefee;
	color: #913d37;
	font-size: 13px;
}

/* 商品ページでは親テーマのサイドバーを非表示 */
body.single #sidebar,
body.single .sidebar,
body.single aside.widget-area {
	display: none !important;
}

/* 親テーマの固定幅を解除 */
body.single #content,
body.single #main,
body.single .site-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

@media screen and (max-width: 900px) {
	#itempage {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"image"
			"thumbs"
			"description"
			"purchase"
			"related";
		gap: 24px;
	}

	#itempage > form {
		display: contents;
	}
}

@media screen and (max-width: 600px) {
	#itempage {
		width: calc(100% - 24px);
		margin: 34px auto 64px;
	}

	#itempage > form > h3 {
		font-size: 27px !important;
	}

	#itempage .itemsubimg {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	#itempage .assistance_item ul {
		grid-template-columns: 1fr;
	}

	#itempage .skuform {
		padding: 18px !important;
	}

	#itempage .skumulti {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}