// ==================================================
// product_keyv page style setting
// ==================================================
@use "sass:math";

.product_keyv {
	margin-bottom: 40px;
	.keyv_thumb {
		border: 1px solid $silver;
	}
	.ttl {
		@include fs(30);
		font-weight: 400;
		border-bottom: 4px solid $sub;
		margin-bottom: 10px;
		small {
			@include fs(20);
		}
	}
	.subttl {
		@include fs(30);
		font-weight: 400;
		color: $accent;
		margin-top: 5px;
		&_n {
			color: #440044;
		}
		margin-bottom: 10px;
		small {
			display: block;
			@include fs(22);
		}
	}
	.lead {
		@include fs(18);
		border: 4px solid $white;
		padding: 10px;
		margin-bottom: 10px;
	}
	.sublead {
		@include fs(16);
	}
	// plum
	// ----------------------------------------
	&.plum {
	}
	.notice {
		display: inline-block;
		padding: .4em .8em;
		background: $cvColor;
		color: $white;
		font-weight: bold;
	}
}

// ==================================================
// compornent
// ==================================================
// cv_area
// ----------------------------------------
.cv_area {
	background: $midsilver;
	padding: 20px 0;
	.cv_inner {
		background: $white;
		padding: 40px;
		margin: 20px 0;
	}
	.ttl {
		@include fs(60);
		color: $accent;
		text-align: center;
		font-weight: bold;
		&:after {
			content: "";
			display: block;
			width: 0;
			height: 0;
			margin: 0 auto;
			border-top: 40px solid $accent;
			border-left: 70px solid transparent;
			border-right: 70px solid transparent;
		}
	}
	.l-boxl {
		width: 50%;
		padding-right: 20px;
	}
	.cv_thumb {
		li {
			border: 1px solid $lightgrey;
			width: 100%*math.div(160, 510);
			margin-left: 2.8%;
			margin-bottom: 2.8%;
			float: left;
			box-sizing: border-box;
			&:first-child {
				width: 100%;
				margin-left: 0;
			}
			&:nth-child(3n-1) {
				margin-left: 0;
			}
		}
	}
	.l-boxr {
		width: 50%;
		padding-left: 20px;
	}
	.subttl {
		@include fs(40);
		font-weight: bold;
		line-height: 1.4;
		margin-bottom: 10px;
		small {
			@include fs(24);
			display: block;
		}
	}
	.kana {
		border: 1px solid $lightgrey;
		color: $darkgrey;
		padding: 5px 10px;
		margin-bottom: 10px;
	}
	.icons {
		display: none;
		background: $midsilver;
		@include clearfix;
		padding: 0 10px;
		border-radius: 4px;
		margin-bottom: 10px;
		li {
			float: left;
			text-align: center;
			padding: 10px;
			line-height: 1.2;
			img {
				display: block;
				width: 60px;
				border-radius: 50%;
				box-shadow: 2px 2px 2px rgba($black,0.1);
				margin-bottom: 5px;
			}
		}
	}
	.cv_detail {
		width: 100%;
		caption {
			text-align: center;
			@include fs(20);
			padding: 5px;
			background: $lightgrey;
		}
		th {
			@include fs(12);
			font-weight: bold;
			border: none;
			border-bottom: 1px solid $lightgrey;
			padding-left: 0;
			padding-right: 0;
			vertical-align: top;
			width: 20%;
		}
		td {
			@include fs(14);
			border: none;
			border-bottom: 1px solid $lightgrey;
			padding-left: 0;
			padding-right: 0;
		}
	}
	.price_area {
		text-align: right;
		clear: both;
		.label {
			@include fs(24);
			display: inline-block;
			color: $white;
			background: $cvColor;
			text-align: center;
			border-radius: 4px;
			padding: 0.2em 0.4em;
			font-weight: bold;
			line-height: 1.2;
		}
		b {
			@include fs(55);
			display: inline-block;
			color: #e60012;
			font-weight: bold;
			margin-left: 0.2em;
		}
		.price {
			@include fs(55);
			display: inline-block;
			color: #e60012;
			font-weight: bold;
		}
		small {
			color: $white;
			background: #e60012;
			border-radius: 4px;
			padding: 0.2em 0.4em;
			font-weight: bold;
		}
		&.normal_price {
			text-align: center;
			border: 2px solid LightSeaGreen;
			width: 50%;
			margin-top: 20px;
			border-radius: 4px;
			float: right;
			position: relative;
			&:after {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				display: block;
				left: 50%;
				margin-left: -1.6em;
				border-top: 0.8em solid LightSeaGreen;
				border-left: 1.6em solid transparent;
				border-right: 1.6em solid transparent;
			}
			.label {
				@include fs(16);
				padding: 2px 8px 0;
				background: LightSeaGreen;
				border-radius: 2px;
			}
			b {
				@include fs(18);
				margin-left: 4px;
				color: $midgrey;
			}
			.price {
				@include fs(20);
				// margin-left: 4px;
				text-decoration: line-through;
				color: $midgrey;
			}
		}
	}
	.description {
		border: 2px solid Coral;
		margin-top: 1.6em;
		margin-bottom: 1em;
		border-radius: 4px;
		position: relative;
		padding: 0.8em;
		background: #fee;
		&:after {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			display: block;
			left: 50%;
			margin-left: -1.6em;
			bottom: -0.8em;
			border-top: 0.8em solid Coral;
			border-left: 1.6em solid transparent;
			border-right: 1.6em solid transparent;
		}
		p {
			@include fs(15);
		}
		.btn {
			border: none;
			display: inline-block;
			background: Coral;
			border-radius: 4px;
			padding: 0.2em 1em;
			color: $white;
			font-weight: bold;
			&:hover {
				@include opacity(0.8);
			}
		}
		small {
			margin: 0.4em 0;
			display: block;
			line-height: 1.4;
		}
	}
	.option_area {
		p,label {
			@include fs(20);
			.num {
				color: $sub;
			}
		}
		select {
			width: 100%;
			margin-bottom: 10px;
		}
	}
	.quantity,.quantity2 {
		background: $midsilver;
		@include fs(16);
		@include clearfix;
		padding: 5px 10px;
		border-radius: 4px;
		margin-bottom: 20px;
		dt,dd {
			float: left;
			margin: 5px 0;
		}
		dt {
			clear: both;
			padding-top: 3px;
		}
		input {
			padding: 2px 4px;
			border-radius: 2px;
			border: 1px solid $lightgrey;
			width: 80px;
		}
	}
	#cartbtn_default,.cartbtn_default {
		a {
			color: $white;
			display: block;
			background-image: url(../img/common/icon_cv_addcart.png);
			background-repeat: no-repeat;
			background-position: 0.8em center;
			background-color: $sub;
			@include fs(26);
			text-indent: 5.5em;
			border-radius: 6px;
			line-height: 1.2em;
			padding: 15px;
			&:hover {
				background-color: #a41515;
			}
			small {
				display: block;
				@include fs(16);
			}
		}
	}
	// options
	// ----------------------------------------
	.classlist {
		@include fs(18);
		ul {
			@include clearfix;
			margin-bottom: 1em;
			li {
				float: left;
			}
			select {
				@include fs(16);
			}
		}
	}
	// variation
	// ----------------------------------------
	.variation {
		padding-top: 1.6em;
		border-bottom: 1px solid $lightgrey;
		& > li {
			padding: 1.6em 0;
			border-top: 1px solid $lightgrey;
			@include clearfix;
		}
		.classlist {
			ul {
				display: inline-block;
				margin-bottom: 0;
			}
			text-align: right;
		}
		.thumb {
			width: 130px;
			float: left;
			a {
				display: block;
				border: 1px solid $lightgrey;
			}
		}
		.product_detail {
			background: $silver;
			border-radius: 0.2em;
			width: 370px;
			padding: 0.8em;
			margin: 0 0.8em;
			float: left;
			dl {
				@include clearfix;
				@include fs(14);
				line-height: 1.2;
				font-weight: bold;
			}
			dt {
				float: left;
				background: $darkgrey;
				color: $white;
				padding: 0.2em 0.4em 0;
				border: 1px solid $darkgrey;
			}
			dd {
				float: left;
				background: $white;
				color: $darkgrey;
				padding: 0.2em 0.4em 0;
				border: 1px solid $darkgrey;
			}
			caption {
				background: none;
				padding: 0.2em 0 0;
				text-align: left;
				border-bottom: 1px solid $lightgrey;
				@include fs(16);
			}
			th,td {
				padding: 0.2em 0 0.3em;
				@include fs(14);
			}
		}
		.cart_area {
			float: left;
			.price_area_wrap {
				width: 535px;
				@include clearfix;
				text-align: right;
				.caret {
					color: $grey;
					display: inline-block;
					@include fs(30);
				}
			}
			.price_area {
				display: inline-block;
				border: none;
				width: auto;
				float: none;
				margin-top: 0;
				padding: 0;
				&:after {
					content: none;
					border: none;
				}
				.label {
					@include fs(14);
					border-radius: 0.2em;
				}
				b, .price {
					@include fs(36);
					line-height: 1;
				}
				&.normal_price {
					b, .price {
						@include fs(26);
					}
				}
			}
			.add_cart {
				@include clearfix;
			}
			.quantity,.quantity2 {
				width: 120px;
				height: 5em;
				float: left;
				border-radius: 6px;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				border: 2px solid $sub;
				padding: 0.1em;
				margin-bottom: 0;
				dt,dd {
					text-align: center;
					float: none;
				}
			}
			#cartbtn_default,.cartbtn_default {
				width: 415px;
				height: 5em;
				float: left;
				a {
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					text-indent: 4em;
					background-image: url(../img/common/icon_cv_addcart_s.png);
					@include fs(24);
					line-height: 1.3;
					small {
						@include fs(16);
					}
				}
			}
		}
		.valiation_notice {
			clear: both;
			margin-top: 0.4em;
			background: red;
			color: white;
			font-weight: bold;
			padding: 0.2em 0.4em 0;
			border-radius: 4px;
			@include fs(16);
		}
	}
}
@include ltMD {
	.cv_area {
		// variation
		// ----------------------------------------
		.variation {
			.thumb {
				width: 115px;
			}
			.product_detail {
				width: 270px;
			}
			.cart_area {
				.price_area_wrap {
					width: 435px;
				}
				.quantity,.quantity2 {
					height: 70px;
				}
				#cartbtn_default,.cartbtn_default {
					height: 70px;
					width: 325px;
					a {
						text-indent: 3.2em;
						@include fs(24);
					}
				}
			}
		}
	}
};
@include ltSM {
	.cv_area {
		.price_area {
			&.normal_price {width: 60%;}
			.label {@include fs(20);}
			b {@include fs(36);}
			.price {@include fs(40);}
			small {
				display: inline-block;
				@include fs(12);
			}
		}
		#cartbtn_default,
		.cartbtn_default {
			a {
				text-align: center;
				background-image: none;
				text-indent: 0;
			}
		}
		// variation
		// ----------------------------------------
		.variation {
			.thumb {
				width: 105px;
			}
			.product_detail {
				width: 520px;
				margin-right: 0;
			}
			.cart_area {
				padding-top: 0.8em;
				width: 100%;
				.price_area_wrap {
					width: 220px;
					float: left;
					padding-top: 0.6em;
					.caret {
						display: none;
					}
				}
				.price_area {
					display: block;
					text-align: left;
				}
				.add_cart {
					float: right;
				}
				.quantity {
					height: 68px;
				}
				#cartbtn_default,.cartbtn_default {
					width: 300px;
					height: 68px;
					a {
						text-indent: 3.5em;
					}
				}
				.valiation_notice {
					float: right;
				}
			}
		}
	}
};
@include ltXS {};
@include ltXXS {};

// favorite button
// ----------------------------------------
.favorite_btn {
	clear: both;
	padding-top: 1em;
	.btn_favorite {
		@include fs(26);
		background: Coral;
		color: $white;
		display: block;
		text-align: center;
		border-radius: 6px;
		line-height: 1.2em;
		padding: 15px;
		&:hover {
			background: #f79544;
		}
	}
	#add_favorite_product {
		@include fs(24);
		background: OrangeRed;
		color: $white;
		display: block;
		text-align: center;
		border-radius: 6px;
		line-height: 1.2em;
		padding: 15px 0;
		&:hover {
			background: Coral;
		}
	}
}
@include ltMD {};
@include ltSM {};
@include ltXS {};
@include ltXXS {};
// ==================================================
// Text here
// ==================================================
// Text here
// ----------------------------------------
@include ltMD {};
@include ltSM {};
@include ltXS {};
@include ltXXS {};