@charset "UTF-8";

.sells__content {
	a {
		text-decoration: none;
	}
	.sells__list--detail,
	.sells__detail--inner {
		background-color: #fff;
		padding: 15px 4vw;
		.image {
			width: 300px;
			height: 300px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: var(--color-neutral);
			margin: 0 auto;
			.product-image-item {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			img {
				max-height: 100%;
				margin: auto;
			}
		}
		.detail {
			margin-top: 15px;
		}
		.more {
			text-align: right;
			margin-top: 15px;
		}
	}
	.sells__list {
		li {
			&+li {
				margin-top: 20px;
			}
		}
	}
	#product-image {
		margin-bottom: 30px;
		div {
			height: 100%;
		}
	}
	.slick-slider .slick-track,
	.slick-slider .slick-list {
		height: 100%;
	}
	.slick-dots li button {
		display: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
		padding: 0;
		border: none;
		background-color: transparent;
	}
	.slick-dots li {
		background-color: #999;
		border-radius: 50px;
		width: 12px;
		height: 12px;
	}
	.slick-dots li.slick-active {
		background-color: var(--color-primary);
	}
	div.content__title--secondary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0;
		h3 {
			font-size: var(--font-s);
			line-height: 1.6;
			font-weight: 600;
		}
		.status {
			display: inline-block;
			text-align: center;
			background-color: #fff;
			border-radius: 50px;
			padding: 2px 10px;
			margin-left: 10px;
			span {
				white-space: nowrap;
				line-height: 1.75;
				font-weight: 600;
				font-size: 14px;
				color: var(--color-primary);
			}
		}
	}
	p {
		&+p {
			margin-top: 1em
		}
	}
	.sells__detail--bottom {
		padding-top: 30px;
		dt {
			position: relative;
			line-height: 1.5;
			padding-left: 20px;
			&:before {
				content: "";
				display: block;
				width: 12px;
				height: 12px;
				background-color: var(--color-secondary);
				border-radius: 50px;
				position: absolute;
				top: 6px;
				left: 0;
				margin: auto;
			}
		}
	}
	.cart__product {
		display: flex;
		align-items: center;
		gap: 10px;
		p {
			font-size: var(--font-3xs);
			&+p {
				margin-top: .5em
			}
		}
		.cart__product--image {
			width: 90px;
			height: 90px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: var(--color-neutral);
			img {
				max-height: 100%;
				max-width: 100%;
				width: auto;
				height: auto;
				object-fit: contain;
				margin: auto;
			}
		}
	}
	input[type=number] {
		min-width: 100px;
		width: 100%;
		font-size: var(--font-m);
		padding: 10px 10px;
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 5px;
	}
	.form__wrap {
		background-color: var(--color-primary-bg);
		padding: 15px 4vw;
		margin-top: 15px;
		form {
			width: 100%;
			fieldset {
				display: flex;
				align-items: center;
				input[type=number] {
					margin-left: 10px;
				}
				&+div {
					text-align: center;
					margin-top: 15px;
				}
			}
		}
	}
	.content__table {
		th, td {
			padding: 10px;
		}
		&.cart {
			.cart__product {
				display: flex !important;
				align-items: center !important;
				gap: 10px !important;
			}
			.cart__product--image {
				flex-shrink: 0 !important;
			}
			input[type=number] {
				margin-bottom: 8px;
			}
			td {
				&:first-of-type {
					width: 50%;
				}
				&:nth-of-type(2),
				&:nth-of-type(3) {
					text-align: center;
				}
			}
			.subtotal,
			.postage {
				background-color: #F5F5F5;
				td {
					&:last-of-type {
						text-align: right;
					}
				}
			}
			.total {
				border-top: 2px solid var(--color-primary);
				td {
					font-weight: 600;
					&:last-of-type {
						text-align: right;
					}
				}
			}
		}
		.button {
			&.minute {
				width: 70px;
				a, button, input {
					font-size: var(--font-2xs);
				}
			}
		}
	}
	@media (min-width: 768px) {
		.sells__list--detail,
		.sells__detail--top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 15px;
			.detail {
				width: calc(100% - 320px);
				margin: 0 0 0 20px;
			}
		}
		.sells__detail--inner {
			.detail,
			.image {
				width: calc((100% - 20px) / 2);
				height: 392px;
			}
		}
		.sells__list {
			li {
				&+li {
					margin-top: 50px;
				}
			}
		}
		.form__wrap {
			background-color: var(--color-primary-bg);
			padding: 30px;
			margin-top: 20px;
			form {
				display: flex;
				align-items: center;
				justify-content: space-between;
				fieldset,
				>div {
					width: 50%;
				}
				fieldset {
					&+div {
						text-align: right;
					}
				}
			}
		}
		.cart__product {
			display: flex;
			align-items: center;
			gap: 1em;
			p {
				font-size: var(--font-s);
			}
			.cart__product--image {
				width: 90px;
				height: 90px;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: var(--color-neutral);
				img {
					max-height: 100%;
					max-width: 100%;
					width: auto;
					height: auto;
					object-fit: contain;
					margin: auto;
				}
			}
		}
		.content__table {
			.button {
				&.minute {
					width: 100px;
					a, button, input {
						font-size: var(--font-xs);
					}
				}
			}
			&.cart {
				.cart__product {
					display: flex !important;
					align-items: center !important;
					gap: 1em !important;
				}
				.cart__product--image {
					flex-shrink: 0 !important;
				}
				input[type=number] {
					margin: 0 5px 0 0;
				}
				.total {
					td {
						font-size: var(--font-l);
					}
				}
			}
			.number-form {
				.flex-pc {
					display: flex;
					align-items: center;
				}
			}
		}
	}
	@media (min-width: 1120px) {
		.sells__list--detail,
		.sells__detail--inner {
			padding: 30px;
		}
		div.content__title--secondary {
			h3 {
				font-size: var(--font-l);
				line-height: 1.75;
			}
			.status {
				padding: 4px 15px;
				span {
					font-size: 16px;
				}
			}
		}
	}
}

/* 注文確認ページのボタン上部余白 */
.sells__content {
	section + .form__content {
		margin-top: 40px;
	}
}

@media (min-width: 768px) {
    body.sells .sells__detail--top {
        align-items: flex-start !important;
    }

	#product-image.textbook-slide {
		width: calc((100% - 20px) / 2);
		height: 500px;
	}
}

/* 商品画像のスライドアニメーション（右から左） */
.slide-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
}

.slide-page {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slide-page img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* 商品画像のスライドコンテナ */
#product-image.textbook-slide {
	position: relative;
	width: 300px;
	height: 400px;
	background-color: var(--color-neutral);
}

/* ドットインジケーター */
.slide-dots {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 60px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	z-index: 1000;
}

.slide-dots .dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #999999;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.slide-dots .dot.active {
	background-color: var(--color-primary);
}

.slide-dots .dot:hover {
	background-color: #0004ff;
}

.slide-dots .dot.active:hover {
	background-color: var(--color-primary);
}

/* Cart product layout fix - Match prototype design */
/* CRITICAL: Override all styles for cart images */

/* Product container - force horizontal layout */
.cart__product {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 12px !important;
	width: 100% !important;
}

/* Image container - force small size */
.cart__product--image {
	width: 60px !important;
	height: 80px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	display: block !important;
	overflow: hidden !important;
	background-color: transparent !important;
	position: relative !important;
}

/* Image itself - force 60px width */
.cart__product--image > img {
	width: 60px !important;
	height: auto !important;
	max-width: 60px !important;
	max-height: 80px !important;
	min-width: 60px !important;
	min-height: auto !important;
	block-size: auto !important;
	inline-size: 60px !important;
	object-fit: contain !important;
	object-position: top left !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
}

/* Text container */
.cart__product > div:not(.cart__product--image) {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	gap: 4px !important;
}

.cart__product p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	font-size: var(--font-3xs) !important;
}

.cart__product p:first-child {
	font-weight: 500 !important;
}

/* PC version */
@media (min-width: 768px) {
	.cart__product--image {
		width: 80px !important;
		height: 100px !important;
		min-width: 80px !important;
		max-width: 80px !important;
	}

	.cart__product--image > img {
		width: 80px !important;
		max-width: 80px !important;
		max-height: 100px !important;
		min-width: 80px !important;
		inline-size: 80px !important;
	}

	.cart__product {
		gap: 15px !important;
	}

	.cart__product p {
		font-size: var(--font-s) !important;
	}
}