@charset "UTF-8";
body { 
	margin: 0 auto; 
	max-width: 1200px; 
}

h1 { 
	font-size: 140%; 
	margin: 8px 0; 
}

#product-wrap {
	font-size: 14px;
	line-height: 1.6em;

	p {
		line-height: 1.6em;
	}
	h2 {
		color: brown;
		font-size: 120%;
	}
	hr {
		margin: 5px;
	}

	#review-score {
		font-size: 14px;
		margin-bottom: 5px;
		line-height: 1em;

		a {
			text-decoration: none;
		}
	}

	.innerdiv {
		border: 1px solid gray;
		padding: 6px;
		background-color: #FEFFAF;
		margin-bottom: 10px;
	}

	.prod {
		float: left;
		margin-bottom: 10px;
		margin-right: 10px;
		text-align: center;
		width: 400px;
		max-width: 400px;
		width: 50%;

		div.sp-thumbnail-container {
			border: 1px solid lightgray;
		}
		div.sp-selected-thumbnail {
			border: 2px solid orange;
		}
		img {
			width: 100%;
		}

		#prod-slider {
			position: relative;

			.sp-previous-arrow:before,
			.sp-previous-arrow:after,
			.sp-next-arrow:before,
			.sp-next-arrow:after {
				background-color: lightgray;
			}

			.thumbnails {
				margin-top: 10px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.thumbnails-item {
					border: 2px solid lightgray;
					margin: 0 2px;
				}
				.current {
					border: 2px solid orange;
				}
			}
		}
	}

	.option-select {
		margin-left: 410px;
		margin-left: 52%;

		p.sale {
			color: red;
			font-size: 120%;
			font-weight: bold;
			margin: 0 0 5px;
			padding: 0;

			#about-waribiki {
				background: whitesmoke;
				border: 1px solid slategray;
				color: slategray;
				display: inline-block;
				font-size: 12px;
				font-weight: normal;
				line-height: 1em;
				margin-left: 1em;
				padding: 3px;
				text-decoration: none;
			}
		}

		.cartbox {
			background: #eff4f8;
			border: 1px dotted #ffb062;
			padding: 0.8em;

			p {
				line-height: 1.4em;
			}
			input[type="image"] {
				margin-left: 10px;
				vertical-align: bottom;
			}
			select {
				font-size: 1.4em;
			}

			.btn-favorite {
				display: inline-block;
				cursor: pointer;
				width: 89px;
				height: 35px;
				vertical-align: bottom;
				background-image: url('/images/page/favorite_on.png');

				&[data-delete="1"] {
					background-image: url('/images/page/favorite_off.png');
				}
			}

			.item-select {
				font-family: Arial, sans-serif;
				margin-bottom: 0.5em;
				position: relative;
				text-align: left;

				input {
					left: 1em;
					margin-top: 36px;
					position: absolute;

					&:checked + label {
						background: #FFE4B5;
					}
				}

				label {
					display: inline-block;
					font-weight: normal;
					line-height: 150%;
					margin: 0;
					padding-left: 3em;
					width: 100%;

					.name {
						display: block;
						font-size: 1.1em;
						font-weight: bold;
					}
					.getpoint {
						font-size: 12px;
					}
					.price-line {
						padding: 20px 0 3px;

						* {
							vertical-align: middle;
						}

						del {
							display: inline-block;
							font-size: 18px;
							position: relative;

							&:before {
								content: "通常価格";
								content: "お電話価格";
								font-size: 11px;
								font-weight: normal;
								position: absolute;
								top: -18px;
								white-space: nowrap;
							}
						}

						span.price {
							display: inline-block;
							font-size: 22px;
							position: relative;

							&:before {
								content: "WEB価格";
								font-size: 12px;
								font-weight: normal;
								position: absolute;
								top: -18px;
								white-space: nowrap;
							}
						}
					}
				}
			}

			span.normalprice {
				text-decoration: line-through;
			}
			span.productSpecialPrice,
			span.productSalePrice,
			.stockWarning,
			span.coming {
				color: #ff0000;
				font-weight: bold;
			}
			span.productSpecialPriceSale {
				color: #ff0000;
				text-decoration: line-through;
			}
			span.productPriceDiscount,
			.inputRequirement {
				font-size: 11px;
				color: #FF0000;
			}

			.cartbox-description {
				color: dimgray;
				font-weight: 0.9em;
				max-width: 400px;
				text-align: left;

				p {
					margin: 10px 0 0;
				}
			}

			#register-arrival-notice {
				border: 2px solid orangered;
				background: white;
				color: orangered;
				display: inline-block;
				font-weight: bold;
				padding: 5px;
				text-decoration: none;

				&:hover {
					opacity: 0.5;
				}
			}
		}

		.option-select-lower {
			margin: 10px 0;
			padding: 0 10px;

			.write-review {
				display: inline-block;

				a {
					border: 2px solid brown;
					color: brown;
					display: block;
					font-size: 11px;
					height: 100%;
					line-height: 1.2em;
					padding: 3px 4px;
					text-decoration: none;

					&:hover {
						border-color: sandybrown;
						color: sandybrown;
					}
				}
			}

			.link-btn {
				height: 42px;
				line-height: 1.2em;
				min-width: 58px;
				margin: 8px 0 3px;
				padding: 3px 0;
				vertical-align: middle;
				width: 60px;
			}
		}
	}

	.review-block {
		margin: 10px 0;
		padding: 0 20px;

		.review-text {
			border: 1px solid darkgray;
			border-radius: 5px;
			margin: 3px 0 0;
			padding: 10px;
		}
	}

	.related {
		margin: 0 5px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.related-box {
		border: 1px solid orange;
		border-radius: 5px;
		line-height: 1.4em;
		display: inline-block;
		min-height: 260px;
		margin: 5px;
		overflow: hidden;
		text-align: center;
		vertical-align: top;
		white-space: normal;
		width: 140px;

		p {
			margin: 5px 0;
			padding: 0;
			line-height: 1.4em;

			&.h4_text {
				margin: 0;
			}
		}
		h4 {
			font-size: 100%;
			font-weight: normal;
			margin: 0;
			padding: 0;
		}
	}

	.recipe-list {
		margin: 0 5px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.recipe-block {
		display: inline-block;
		height: 170px;
		line-height: 1.4em;
		max-height: 170px;
		width: 150px;
		margin: 5px;
		vertical-align: top;
		white-space: normal;

		a {
			text-decoration: none;
		}
	}

	.recipe-image {
		background-size: 150px auto !important;
		display: block;
		width: 150px;
		height: 115px;
		margin: auto;
	}

	.recipe-title {
		color: brown;
		display: block;
		font-weight: bold;
		max-height: 38px;
		overflow-y: hidden;
	}

	.recipe-by {
		color: gray;
		font-size: 0.8em;
	}

	.video-wrapper {
		width: 420px;
		max-width: 95%;
		margin: 10px;
		padding: 0 10px;
	}

	.video-container {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;

		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	#product-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 2%;

		#product-footer-l,
		#product-footer-r {
			background: whitesmoke;
			padding: 10px;
			width: 49%;

			h2 {
				font-size: 20px;
				margin: 10px 0 20px;
			}
			p {
				margin: 10px 0;
				padding: 0;
			}
		}

		#product-footer-l {
			img {
				max-width: 100%;
				height: auto;
				margin-bottom: 10px;
			}
		}
	}

	.souryou-tbl {
		th, td {
			padding: 10px 0;
		}
	}

	.acc-ctl {
		display: none;
	}

	#product-nav {
		display: none;
	}

	#eisei-block {
		display: table;
		margin: 10px 0;
		padding: 0 10px;
		width: 100%;

		#eisei-block-a,
		#eisei-block-b {
			display: table-cell;
			padding: 0 10px;
			width: 50%;

			table, tr, td {
				border: 1px solid black;
			}

			#eisei-block-tbl {
				font-size: 12px;
				margin: auto;
				max-width: 320px;
				width: 100%;

				.eisei-block-tbl-elm,
				.eisei-block-tbl-val {
					border: 1px solid black;
					display: block;
					float: left;
					margin: -1px 0 0 -1px;
					padding: 2px;
					white-space: nowrap;
				}

				.eisei-block-tbl-elm {
					padding-left: 5px;
					width: 28%;
				}

				.eisei-block-tbl-val {
					padding-right: 5px;
					text-align: right;
					width: 22%;
				}
			}
		}

		#eisei-block-b {
			border-left: 3px dotted gray;

			#eisei-block-b-h {
				margin-bottom: 5px;
				text-align: center;
			}
		}
	}

	#lo-info {
		border: 1px solid lightgrey;
		border-radius: 3px;
		background: whitesmoke;
		padding: 5px 1.6em;

		#lo-info-up {
			display: block;
			text-indent: -1em;
		}
	}
}

.pop-product-image {
	background: white;
	padding: 5px;
	text-align: center;

	img {
		max-width: 100%;
	}

	.pop-product-image-close {
		padding-top: 5px;
	}
}

/* 原産国ポップアップ */
div.popinfo {
	background-color: #ebffc8;
	border: 1px #019901 solid;
	max-width: 400px;
	text-align: left;
	z-index: 5;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5), inset 0px -1px 0px rgba(255, 255, 255, 0.7);
}

#eiyoupop {
	padding: 5px;

	h4 {
		font-weight: bold;
		margin: 5px 0 10px;
		padding: 0 10px;
	}

	table, tr, td {
		border: 1px solid black;
		margin: auto;
	}

	td {
		padding: 2px 5px;
		text-align: center;
		width: 100px;
	}
}