// ==================================================
// product detail pine
// ==================================================
// product_keyv
// --------------------------------------------------
.product_keyv.keyv_pine {
	.keyv_bg {
		box-shadow: 0 0 15rem 5rem rgba($trueblack,0.1) inset;
		height: auto;
		@include clearfix;
		padding-bottom: 10px;
	}
	.keyv_bg01 {
		background-image: url(../img/products-detail/keyv_bg01.png);
		background-size: 100% 100%;
		// height: 479px;
	}
	.keyv_bg02 {
		background: #f9f9f9;
		background-size: 100% 100%;
		// height: 345px;
		height: auto;
	}
	.product_img {
		img {
			width: 100%;
			// height: 479px;
			height: auto;
		}
		&_s {
			img {
				// height: 345px;
				height: auto;
			}
		}
	}
	.icon_wrap {margin-top: 2em;}
	.ttl {
		background: linear-gradient(
		to right, rgba($white,0.9) 70%, rgba($white,0) 100%
		);
		color: $accent;
		padding: 0.1em 0.4em;
		min-width: 8em;
		font-weight: normal;
		border: none;
		span {
			text-shadow: 2px 2px 2px rgba($trueblack,0.4);
		}
		small {
			letter-spacing: 0.1em;
			margin-right: 0.8em;
		}
		&.size-s {
			@include fs(32);
			small {@include fs(18);}
		}
		&.size-m {
			@include fs(38);
			small {@include fs(22);}
		}
		&.size-l {
			@include fs(45);
			small {@include fs(25);}
		}
	}
	.detail {
		padding: 0 15px;
	}
	.catch {
		color: $accent;
		@include fs(40);
		font-weight: 400;
		&_n {
			color: #440044;
		}
		&:first-letter {
			@include fs(50);
		}
		small {
			display: block;
			@include fs(20);
		}
	}
	.lead {
		background: $white;
		border: none;
		position: relative;
		padding: .4em 1em;
		color: $accent;
		margin-top: 1em;
		@include fs(14);
		&_n {
			color: #440044;
			padding: .4em 1em;
		}
	}
	.default_price {
		@include fs(18);
		b {
			@include fs(20);
		}
	}
	.default_price {
		text-align: right;
	}
	.price_wrap {
		text-align: right;
	}
	.label {
		display: inline-block;
		padding: 0.2em 0.4em;
		background: #FD8937;
		text-align: center;
		color: $white;
		font-weight: bold;
		@include fs(17);
		border-radius: 4px;
		line-height: 1.2;
	}
	.price {
		display: inline-block;
		padding-left: 0.2em;
		line-height: 1;
		font-weight: bold;
		color: $priceRed;
		position: relative;
		letter-spacing: -0.02em;
		margin: 0 0 0.2em;
		@include fs(50);
		margin: .2em 0 .5em;
		&:after {
			content: "税込";
			display: block;
			position: absolute;
			@include fs(14);
			right: 0;
			bottom: -1.4em;
			text-shadow: none;
			font-family: $baseFontFamily;
			border: 1px solid $priceRed;
			padding: 0.2em 0.4em;
		}
		small {
			color: $priceRed;
			margin-right: 0.2em;
			@include fs(40);
		}
	}
	.status {
		@include clearfix;
		color: #7B4333;
		.label {
			background: #7B4333;
			border-radius: 0;
		}
		& > * {
			display: block;
			float: left;
			width: 32%;
			margin-right: 2%;
			margin-bottom: 0.4em;
			@include clearfix;
			box-sizing: border-box;
			&:nth-child(3n) {
				margin-right: 0;
			}
			&.label {
				padding: 0.8em 0;
			}
			& > * {
				box-sizing: border-box;
				width: 50%;
				float: left;
				@include fs(14);
				padding: 0 0.4em;
				font-weight: bold;
			}
			.label {
				padding: 0.4em 0;
				@include fs(12);
			}
		}
		& > .colspan-2 {
			width: 66%;
			margin-right: 0;
			& > * {
				width: 75%;
			}
			& > .label {
				width: 25%;
			}
		}
	}
	.icon_wrap {
		@include clearfix;
		width: 100%;
		padding: 0 0 1em;
		margin: 1em 0;
		.icon {
			background: $white;
			color: #534c40;
			float: left;
			font-weight: bold;
			width: 18%;
			margin-right: 2.5%;
			text-align: center;
			line-height: 1.2;
			padding: 0.4em 0;
			&:nth-child(5n) {
				margin-right: 0;
			}
			span {
				display: block;
				@include fs(24);
			}
			small {
				display: block;
				@include fs(14);
			}
		}
	}
	.closing {
		background: $silver;
		padding-top: 15px;
		padding-bottom: 15px;
		.detail_wrap {}
		.cv_detail_wrap {}
		.sublead {
			@include fs(16);
		}
		.cv_detail {
			width: 100%;
			margin: 20px 0;
			caption {
				text-align: center;
				background: $lightgrey;
				@include fs(20);
				padding: 0.2em;
			}
			th,td {
				border-left: none;
				border-right: none;
				padding-top: 0.4em;
				padding-bottom: 0.4em;
				padding-left: 0;
				padding-right: 0;
				@include fs(14);
				border-bottom: 1px solid $lightgrey;
			}
			th {
				padding-right: 1em;
				@include fs(12);
				font-weight: bold;
			}
		}
	}
}

// product_introduce
// --------------------------------------------------
.product_introduce {
	margin-bottom: 3em;
	.ttl {
		@include fs(22);
		text-align: center;
		font-weight: 500;
		padding-bottom: 1em;
		color: $accent;
		&_n {
			color: #440044;
		}
		small {
			@include fs(20);
			margin-left: 1em;
		}
	}
	.thumb_list {
		@include clearfix;
		li {
			float: left;
			margin-bottom: 10px;
			overflow: hidden;
			a {
				display: block;
				position: relative;
				padding-top: 65%;
				cursor: pointer;
				&:hover {
					@include opacity(0.8);
				}
				img {
					position: absolute;
					top: 0;
					width: 100%;
				}
				span {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					background: rgba($white,0.9);
					border-bottom: 2px solid $sub;
					z-index: 1;
					// text-align: center;
					@include fs(16);
					padding: 0.8em 0.8em;
					line-height: 1.2;
					small {
						display: block;
					}
				}
			}
			.headding {
				text-align: center;
				font-weight: bold;
				@include fs(20);
			}
		}
		&.layout01 li {
			margin-right: 0;
			width: 100%;
		}
		&.layout02 li {
			margin-right: 1%;
			width: 49.5%;
			&:nth-child(2n) {margin-right: 0;}
		}
		&.layout03 li {
			margin-right: 1.25%;
			width: 32.5%;
			&:nth-child(3n) {margin-right: 0;}
		}
		&.layout04 li {
			margin-right: 1.3333%;
			width: 24%;
			&:nth-child(4n) {margin-right: 0;}
		}
	}
	.point_wrap {}
	.point {
		@include clearfix;
		color: $accent;
		background: $white;
		position: relative;
		&_n {
			color: #440044;
		}
		.detail {
			padding: 10px;
			@include fs(18);
			.subttl {
				@include fs(30);
				font-weight: 400;
			}
		}
		.thumb {
			padding: 0 10px 10px;
		}
		// &::before {
		// 	position: absolute;
		// 	content: "";
		// 	display: block;
		// 	width: 123px;
		// 	height: 64px;
		// 	background: url(../img/products-detail/bg_point.png);
		// 	background-size: 123px 64px;
		// 	left: 50%;
		// 	margin-left: -62px;
		// 	text-align: center;
		// 	color: $white;
		// 	line-height: 55px;
		// 	font-size: 50px;
		// 	font-family: $EBGaramond;
		// 	font-style: italic;
		// 	z-index: 1;
		// }
		// &_n::before {
		// 	background-image: url(../img/products-detail/bg_point_n.png);
		// }
		// &:nth-child(1)::before {content: "1";}
		// &:nth-child(2)::before {content: "2";}
		// &:nth-child(3)::before {content: "3";}
		// &:nth-child(4)::before {content: "4";}
		// &:nth-child(5)::before {content: "5";}
		// &:nth-child(6)::before {content: "6";}
		// &:nth-child(7)::before {content: "7";}
		// &:nth-child(8)::before {content: "8";}
		// &:nth-child(9)::before {content: "9";}
		// &:nth-child(10)::before {content: "10";}
	}
	&.intro_set {
		.row {
			background: $silver;
		}
		.ttl {
			padding: 0.8em 0 0.4em;
			border-bottom: 4px double #E4D9D6;
			margin-bottom: 0.4em;
		}
		.lead {
			@include fs(16);
			text-align: center;
			margin-bottom: 1em;
		}
	}
	// support_detail
	// --------------------------------------------------
	.support_detail {
		@include clearfix;
		margin-bottom: 10px;
	}
	.support {
		box-sizing: border-box;
		width: 50%;
		float: left;
		text-align: center;
		color: $accent;
		padding: 0 .8em;
		.icon {
			max-width: 90px;
			margin: 0 auto;
			border-radius: 50%;
			box-shadow: 2px 2px 2px rgba($black,0.2);
			overflow: hidden;
		}
		.subttl {
			@include fs(20);
			font-weight: bold;
			margin: 0.4em 0;
		}
		.lead {
			@include fs(16);
			line-height: 1.2;
		}
	}
	.support_block {
		margin-bottom: 4em;
		dl {
			border: 4px solid $lightgrey;
			background: $white;
			padding: 10px;
			margin-bottom: 10px;
			&.light1 {border-color: $light1;}
			&.light2 {border-color: $light2;}
			&.light3 {border-color: $light3;}
			&.light4 {border-color: $light4;}
		}
		dt {
			display: flex;
			align-items: center;
			span {
				@include fs(22);
				font-weight: 500;
			}
			.icon {
				display: block;
				width: 60px;
				border-radius: 50%;
				box-shadow: 2px 2px 2px rgba($black,0.2);
				margin-right: 1em;
			}
		}
		dd {
			@include fs(16);
			margin-top: 1em;
		}
	}
	// feedback
	// --------------------------------------------------
	.board {
		background: #E6D8C8;
		border-radius: 20px;
		padding: 45px 10px 10px;
		.ttl {
			@include fs(30);
		}
		.paper {
			background: $white;
			padding: 3em 2em 1em;
			position: relative;
			&:before {
				content: "";
				display: block;
				position: absolute;
				top: -25px;
				left: 50%;
				margin-left: -120px;
				width: 240px;
				height: 40px;
				border: 5px solid $white;
				border-radius: 40px;
				box-shadow: 0 5px 0 #ccc,0 5px 0 #ccc inset,;
				box-sizing: border-box;
			}
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: -35px;
				left: 50%;
				margin-left: -100px;
				width: 200px;
				height: 15px;
				background: $white;
				border-bottom: 15px solid #ccc;
			}
		}
	}
	.voice {
		background: $silver;
		padding: 10px;
		letter-spacing: 0em;
		margin-bottom: 10px;
		.voice_cont {
			width: 100%;
			.voice_ttl {
				@include fs(22);
				margin: .4em 0;
				line-height: 2;
				color: $darkgrey;
				&:after {
					content: "";
					display: block;
					width: 100%;
					height: 1px;
					background: $lightgrey;
				}
			}
			.voice_txt {
				@include fs(16);
			}
		}
		.voice_img {
			display: flex;
			align-items: center;
			p {
				width: 30%;
				margin-left: 10%;
			}
			img {
				border: 5px solid $white;
				border-radius: 50%;
			}
			.user {
				width: 50%;
				@include fs(20);
				font-weight: 400;
				small {
					@include fs(16);
					color: $grey;
				}
			}
		}
	}
	// inner_spec
	// --------------------------------------------------
	&.inner_spec {
		.row {
			background: #E4D9D6;
		}
		.col > div {
			margin-top: 15px;
		}
		.ttl {
			padding: 0.8em 0 0.4em;
			border-bottom: 4px double $lightgrey;
			margin-bottom: 1em;
		}
		.spec_box {
			padding: 0 20px;
		}
		.chart {
			width: 50%;
			padding: 0 15px;
			float: left;
		}
		.lead {
			clear: both;
			margin: 1em 0;
			padding: 1em 0;
			text-align: center;
			@include fs(16);
		}
	}
}

.popup_mypage {
	margin-top: 70px;
	br {
		display: none;
	}
	p {
		background: $silver;
		padding: 1em;
	}
}
.popup_cart {
	margin-bottom: -80px;
	padding: 1em;
	box-shadow: 0 4px 4px rgba(0,0,0,0.2);
}