@charset "utf-8";

/* ----------------------------
Detail
-------------------------------*/

.product-slider-area {
	width: 100%;
	margin-bottom: 25px;
	position: relative;
}
.product-slider-area .bx-wrapper {
	margin-bottom: 0;
}
.product-slider-wrapper {
	width: 100%;
}
.product-info-area {
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 10px;
	justify-content: flex-start;
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
	padding-inline: 15px;
}
.section h2.product-name {
	border-bottom: none;
	padding: 0;
	margin-bottom: 0;
	vertical-align: bottom;
	font-size: 100%;
	font-size: 14px !important;
	font-weight: normal !important;
	line-height: 1.5;
}
.review-group {
	width: auto;
	display: flex;
	align-items: center;
	line-height: 1;
	justify-content: flex-end;
}
.review-group .reviewRate {
	margin: 0;
}
.review-group .reviewCount {
	margin-top: 4px;
}

.product-total {
	width: 100%;
	background: rgb(217 217 217 / 40%);
	padding: 15px 20px;
	display: flex;
	flex-flow: column;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 5px;
}
.product-total-price-area,
.product-total-carriage-area {
	width: 100%;
	display: flex;
	align-items: baseline;
	gap: 5px;
	justify-content: space-between;
}
.product-carriage-price {
	font-size: 16px;
	font-weight: 600;
}
.product-carriage-price > small {
	font-size: 14px;
	padding-left: 2px;
	font-weight: normal;
}
.product-total-price {
	color: #f44336;
	font-size: 22px;
	font-weight: 600;
}
.product-total-price > small {
	font-size: 14px;
	padding-left: 2px;
	font-weight: normal;
}
.product-code {
	width: 100%;
	padding-inline: 15px;
	text-align: right;
	margin-bottom: 15px;
	font-size: 12px;
	color: #888;
}

.product-option-area {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	gap: 15px;
	padding-inline: 15px;
	margin-bottom: 30px;
}
.product-option-area h4 {
	font-size: 16px;
}
.product-option-wrapper {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	gap: 10px;
}
.product-option-wrapper select {
	padding-right: 60px !important;
}

.product-amount-area {
	padding-inline: 15px;
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 30px;
	width: 100%;
}
.amout-change-box {
	width: auto;
	display: flex;
	gap: 10px;
	align-items: center;
}
.amount-input-wrapper {
	width: 80px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.amount-input-wrapper input {
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 16px;
}

.product-option-note {
	padding-inline: 15px;
	margin-bottom: 30px;
	width: 100%;
	font-size: 13px;
}

.product-btn-area {
	width: 100%;
	padding-inline: 15px;
	display: flex;
	flex-flow: column;
	gap: 20px;
	align-items: center;
	margin-bottom: 15px;
}

.btn-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: #f2c120;
	font-weight: 600;
	height: 90px;
	font-size: 16px;
	position: relative;
	letter-spacing: 0.05em;
	border: none;
}
.btn-soldout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: #ddd;
	color: #888;
	font-weight: 600;
	height: 90px;
	font-size: 16px;
	position: relative;
	letter-spacing: 0.05em;
	border: none;
}
.btn-submit > svg,
.btn-soldout > svg {
	position: absolute;
	right: 20px;
	width: 25px;
	height: auto;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.link-contact {
	width: auto;
	display: flex;
	justify-content: flex-end;
	padding-inline: 15px;
	margin-bottom: 30px;
	align-items: center;
	gap: 3px;
	line-height: 1;
	font-size: 12px;
}
.link-contact > svg {
	position: relative;
	width: 12px;
	height: auto;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.anchor-btn-box {
	width: 100%;
	display: none;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	padding-inline: 15px;
	margin-bottom: 30px;
	position: relative;
}

.anchor-btn-box > a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	background: #337ab7;
	color: #fff !important;
	height: 40px;
	font-size: 12px;
	position: relative;
	line-height: 1;
	letter-spacing: 0.05em;
	padding-inline: 12px;
}

.anchor-btn-box > a > svg {
	position: absolute;
	right: 10px;
	width: 14px;
	height: auto;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

#spec.itemdetail2,
table#review {
	scroll-margin-top: 46px;
}
@media screen and (max-width: 768px) {
	.section h2.product-name {
		margin-bottom: 15px;
	}
	.makeshop-option-wrap {
		width: 100%;
	}
	label.makeshop-option-select-wrap {
		width: 100%;
	}
	.anchor-btn-box {
		display: grid;
	}
	.di-sm-btn-area {
		align-items: center;
	}

	.cart-container {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		padding-block: 20px;
		max-width: 500px;
		margin: 0 auto;
	}
	.cart-container * {
		box-sizing: border-box;
	}

	.cart-ttl {
		width: 100%;
		padding-inline: 10px;
		margin-bottom: 20px;
		font-size: 16px;
		text-align: left;
		font-weight: 500;
	}
	.cart-list {
		width: 100%;
		display: flex;
		flex-flow: column;
		gap: 10px;
		justify-content: flex-start;
		position: relative;
		overflow: hidden;
		margin-bottom: 20px;
	}
	.cart-list-item {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		gap: 25px;
		padding-block: 20px;
		padding-inline: 15px;
	}
	.cart-item-img-area {
		width: 100%;
		display: flex;
		gap: 20px;
		align-items: flex-start;
		justify-content: space-between;
	}
	.cart-item-img {
		width: 120px;
		height: auto;
		aspect-ratio: 1 / 1;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		flex-shrink: 0;
	}
	.cart-item-img img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.cart-item-name {
		width: 100%;
		font-size: 12px;
	}

	.cart-item-price-area {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		gap: 10px;
	}
	.cart-item-price-group {
		width: 100%;
		background: rgb(217 217 217 / 40%);
		padding: 15px;
		display: flex;
		align-items: center;
		gap: 10px;
		justify-content: space-between;
	}
	.delete-btn-box {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	.btn-delete {
		color: #22a0e9 !important;
		line-height: 1;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.unit-price {
		color: #f44336;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: -0.03em;
	}
	.unit-price small {
		font-size: 12px;
		padding-left: 2px;
		font-weight: normal;
	}

	.amout-change-box {
		width: auto;
		display: flex;
		gap: 5px;
		align-items: center;
	}
	.amount-input-wrapper {
		width: 35px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.amount-input-wrapper input {
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.basket-price-box {
		width: auto;
		display: flex;
		gap: 10px;
		align-items: center;
	}
	.basket-price {
		color: #f44336;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: -0.03em;
	}
	.basket-price > small {
		font-size: 12px;
		padding-left: 2px;
		font-weight: normal;
	}
	.btn-mount-change {
		width: 40px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #444;
		color: #fff !important;
		padding: 5px;
		font-size: 12px;
	}

	.cart-item-option-area {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		gap: 0;
	}
	.cart-item-option-area h4 {
		font-size: 16px;
	}
	.cart-item-option-wrapper .option {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		gap: 10px;
	}
	.cart-item-option-wrapper .option select {
		padding-right: 60px !important;
	}

	.cart-total {
		width: 100%;
		background: rgb(217 217 217 / 40%);
		padding: 15px 20px;
		display: flex;
		flex-flow: column;
		gap: 10px;
		align-items: flex-start;
		margin-bottom: 15px;
	}
	.cart-total-price-area {
		width: 100%;
		display: flex;
		align-items: baseline;
		gap: 10px;
		justify-content: space-between;
	}
	.cart-total-price {
		color: #f44336;
		font-size: 22px;
		font-weight: 600;
	}
	.cart-total-price > small {
		font-size: 14px;
		padding-left: 2px;
		font-weight: normal;
	}

	.cart-btn-area {
		width: 100%;
		padding: 15px 20px;
		display: flex;
		flex-flow: column;
		gap: 20px;
		align-items: center;
		margin-bottom: 20px;
	}

	.btn-submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		background: #f2c120;
		font-weight: 600;
		height: 90px;
		font-size: 16px;
		position: relative;
		letter-spacing: 0.05em;
	}
	.btn-submit > svg {
		position: absolute;
		right: 20px;
		width: 25px;
		height: auto;
		aspect-ratio: 1 / 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-amazon-pay {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.btn-amazon-pay .amazonButton {
		width: 100% !important;
		margin: 0;
	}

	.btn-shopping {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		background: #337ab7;
		color: #fff !important;
		height: 55px;
		font-size: 16px;
		position: relative;
		line-height: 1;
		letter-spacing: 0.05em;
	}

	.btn-line {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		background: #06c755;
		color: #fff !important;
		font-weight: 600;
		height: 90px;
		font-size: 16px;
		position: relative;
		gap: 5px;
		letter-spacing: 0.05em;
	}
	.btn-line > svg {
		position: relative;
		width: 40px;
		height: auto;
		aspect-ratio: 1 / 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tel-box {
		width: 100%;
		border: 2px solid #337ab7;
		display: flex;
		flex-flow: column;
		align-items: center;
	}
	.tel-box > span {
		width: 100%;
		background: #337ab7;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff !important;
		height: 35px;
	}
	.tel-box > div {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30px 15px;
		flex-flow: column;
		gap: 5px;
		text-align: center;
	}
	.tel-box > div > a {
		font-size: 24px;
		font-weight: bold;
		line-height: 1;
		color: #337ab7;
	}
	.tel-box > div > span {
		font-size: 13px;
	}
	.no-item-box {
		width: 100%;
		height: 150px;
		background: rgb(217 217 217 / 40%);
		padding: 15px 20px;
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: center;
	}

	.cart-item-option-wrapper > li {
		list-style: none;
	}
	.cart-item-option-wrapper optgroup {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		gap: 5px;
	}
	.cart-item-option-wrapper optgroup option {
		width: 100%;
		text-align: left;
		font-size: 14px;
		white-space: pre-wrap;
	}
	.cart-item-option-wrapper optgroup option:nth-of-type(2) {
		background: #f2f2f2;
		padding: 6px 8px;
	}

	/* ---- Sort ----- */
	.cat-sort-area-wrapper {
		display: none;
	}
}