// ==================================================
// product detail pine
// ==================================================
// product_keyv
// --------------------------------------------------
.product_keyv.keyv_pine {
	.keyv_bg {
		box-shadow: 0 0 15rem 5rem rgba($trueblack,0.1) inset;
	}
	.keyv_bg01 {
		background-image: url(../img/products-detail/keyv_bg01.png);
		background-size: 100% 100%;
		height: 750px;
	}
	.keyv_bg02 {
		background: #f9f9f9;
		background-size: 100% 100%;
		height: 555px;
	}
	.product_img {
		img {
			width: 100%;
			height: 750px;
		}
		&_s {
			img {
				height: 555px;
			}
		}
	}
	.ttl {
		background: linear-gradient(
		to right, rgba($white,0.9) 70%, rgba($white,0) 100%
		);
		color: $accent;
		position: absolute;
		top: 30px;
		left: 0px;
		padding: 0.1em 0.4em;
		min-width: 9em;
		font-weight: normal;
		border: none;
		span {
			font-family: $subFontFamily;
			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(45);
		font-family: $subFontFamily;
		margin-top: 0.8em;
		&_n {
			color: #440044;
		}
		&:first-letter {
			@include fs(55);
		}
		small {
			display: block;
			@include fs(26);
		}
	}
	.lead {
		background: linear-gradient(
		to left, rgba($white,0.9) 90%, rgba($white,0) 100%
		);
		border: none;
		position: relative;
		margin-top: 15px;
		margin-left: -30px;
		margin-right: -30px;
		padding: 30px;
		color: $accent;
		@include fs(16);
		&_n {
			color: #440044;
		}
	}
	.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(19);
		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.4em 0 0.2em;
		// text-shadow: 1px 0 0 $priceRed;
		// @include fs(99);
		// font-family: $cormorantGaramond;

		margin: 0 0 0.2em;
		@include fs(67);

		&:after {
			content: "税込";
			display: block;
			position: absolute;
			@include fs(14);
			right: 0;
			bottom: -0.8em;
			text-shadow: none;
			font-family: $baseFontFamily;
			border: 1px solid $priceRed;
			padding: 0.2em 0.4em;
		}
		small {
			color: $priceRed;
			margin-right: 0.2em;

			// @include fs(60);
			// font-family: $EBGaramond;

			@include fs(60);
		}
	}
	.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;
			&:nth-child(3n) {
				margin-right: 0;
			}
			&.label {
				padding: 0.8em 0;
			}
			& > * {
				width: 50%;
				float: left;
				@include fs(18);
				padding: 0 0.4em;
				font-weight: bold;
			}
			.label {
				padding: 0.4em 0;
				@include fs(14);
			}
		}
		& > .colspan-2 {
			width: 66%;
			margin-right: 0;
			& > * {
				width: 75%;
			}
			& > .label {
				width: 25%;
			}
		}
	}
	.icon_wrap {
		@include clearfix;
		width: 100%;
		padding: 0 30px;
		margin-top: 4.8em;
		.icon {
			background: $white;
			color: #534c40;
			float: left;
			font-weight: bold;
			width: 18%;
			margin-right: 2.5%;
			text-align: center;
			line-height: 1.2;
			padding: 1.2em 0;
			&:nth-child(5n) {
				margin-right: 0;
			}
			span {
				display: block;
				@include fs(28);
			}
			small {
				display: block;
				@include fs(18);
			}
		}
	}
	.closing {
		background: $silver;
		padding-top: 15px;
		padding-bottom: 15px;
		.detail_wrap {
			padding-left: 15px;
		}
		.cv_detail_wrap {
			padding-right: 15px;
		}
		.sublead {
			@include fs(18);
		}
		.cv_detail {
			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);
			}
			th {
				padding-right: 1em;
				@include fs(12);
				font-weight: bold;
			}
		}
	}
}
@include ltMD {
	.product_keyv.keyv_pine {
		.keyv_bg01 {height: 625px;}
		.keyv_bg02 {height: 455px;}
		.lead_n {padding: 15px 30px;}
		.product_img {
			img {height: 625px;}
		}
		.price {
			// font-weight: normal;
			// text-shadow: 1px 1px 0 $priceRed;
			@include fs(60);
		}
		.icon_wrap {margin-top: 2em;}
	}
};
@include ltSM {
	.product_keyv.keyv_pine {
		.keyv_bg01 {
			height: 479px;
		}
		.keyv_bg02 {
			height: 345px;
		}
		.product_img {
			img {height: 479px;}
			&.product_img_s {
				img {height: 345px;}
			}
		}
		.catch {
			@include fs(40);
			&:first-letter {@include fs(50);}
			small {@include fs(20);}
		}
		.lead {
			margin-top: 1em;
			padding: 1em 2em;
			@include fs(14);
		}
		.label {@include fs(17);}
		.price {
			@include fs(50);
			small {@include fs(40);}
			margin: .2em 0 .5em;
			&::after {
				right: 0;
				bottom: -1.4em;
			}
		}
		.status {
			& > * {
				& > * {@include fs(16);}
				.label {@include fs(12);}
			}
		}
		.icon_wrap {
			.icon {
				padding: 0.4em 0;
				span {@include fs(24);}
				small {@include fs(14);}
			}
		}
		.closing {
			.sublead {@include fs(16);}
		}
	}
};
@include ltXS {
	.product_keyv.keyv_pine {
		.keyv_bg01 {
			// height: 479px;
		}
		.keyv_bg, .keyv_bg02 {
			height: auto;
		}
		.product_img {
			img {height: auto;}
			&.product_img_s {
				img {height: auto;}
			}
		}
		.catch {
			// @include fs(40);
			// &:first-letter {@include fs(50);}
			// small {@include fs(20);}
		}
		.lead {
			// margin-top: 1em;
			// padding: 1em 2em;
			// @include fs(14);
		}
		// .label {@include fs(17);}
		.price {
			// @include fs(50);
			// small {@include fs(40);}
			// margin: .2em 0 .5em;
			&::after {
				// right: 0;
				// bottom: -1.4em;
			}
		}
		.status {
			& > * {
				// & > * {@include fs(16);}
				// .label {@include fs(12);}
			}
		}
		.icon_wrap {
			.icon {
				// padding: 0.4em 0;
				// span {@include fs(24);}
				// small {@include fs(14);}
			}
		}
		.closing {
			// .sublead {@include fs(16);}
		}
	}
};
@include ltXXS {};

// product_introduce
// --------------------------------------------------
.product_introduce {
	margin-bottom: 3em;
	.ttl {
		@include fs(30);
		text-align: center;
		font-weight: bold;
		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: $silver;
		position: relative;
		&_n {
			color: #440044;
		}
		.detail {
			width: 50%;
			padding: 2.0em 2.0em 0;
			@include fs(18);
			.subttl {
				@include fs(36);
				font-weight: bold;
				margin-top: 0.4em;
				margin-bottom: 1em;
			}
		}
		.thumb {
			width: 50%;
			position: relative;
			padding-top: 65%*0.5;
			img {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		&::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(2n-1) {
			.detail {float: right;}
			.thumb {float: left;}
		}
		&:nth-child(2n) {
			.detail {float: left;}
			.thumb {float: right;}
		}
		&: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;
		padding: 2rem
		8rem;
	}
	.support {
		width: 25%;
		float: left;
		text-align: center;
		color: $accent;
		padding: 0 .8em;
		.icon {
			max-width: 200px;
			margin: 0 auto;
			border-radius: 50%;
			box-shadow: 2px 2px 2px rgba($black,0.2);
			overflow: hidden;
		}
		.subttl {
			@include fs(24);
			font-weight: bold;
			margin: 0.4em 0;
		}
		.lead {
			@include fs(18);
			line-height: 1.2;
		}
	}
	.support_block {
		margin-bottom: 4em;
		dl {
			border: 10px solid $lightgrey;
			background: $white;
			padding: 1.5em 2em;
			margin: 0 4em 1em;
			&.light1 {border-color: $light1;}
			&.light2 {border-color: $light2;}
			&.light3 {border-color: $light3;}
			&.light4 {border-color: $light4;}
		}
		dt {
			@include clearfix;
			padding-bottom: 4px;
			span {
				display: block;
				float: left;
				@include fs(24);
				padding-top: 0.6em;
				font-weight: bold;
				width: calc(100% - 60px - 1em);
			}
			.icon {
				display: block;
				float: left;
				width: 60px;
				border-radius: 50%;
				box-shadow: 2px 2px 2px rgba($black,0.2);
				margin-right: 1em;
			}
		}
		dd {
			@include fs(18);
			margin-top: 1em;
		}
	}
	// feedback
	// --------------------------------------------------
	.board {
		background: #E6D8C8;
		margin: 4em 5em;
		border-radius: 50px;
		padding: 7em 4em 4em;
		.ttl {
			@include fs(40);
		}
		.paper {
			background: $white;
			padding: 5em 5em 1.4em;
			position: relative;
			&:before {
				content: "";
				display: block;
				position: absolute;
				top: -3em;
				left: 50%;
				margin-left: -20em;
				width: 40em;
				height: 6em;
				border: 5px solid $white;
				border-radius: 40px;
				box-shadow: 0 5px 0 #ddd,0 5px 0 #ddd inset,;
			}
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: -4.1em;
				left: 50%;
				margin-left: -15em;
				width: 30em;
				height: 3em;
				background: $white;
				border-bottom: 1.5em solid #ddd;
			}
		}
	}
	.voice {
		background: $silver;
		padding: 4em;
		letter-spacing: 0em;
		margin-bottom: 4em;
		.voice_cont {
			width: 65%;
			.voice_ttl {
				@include fs(22);
				margin: 1em 0;
				line-height: 2;
				color: $darkgrey;
				&:after {
					content: "";
					display: block;
					width: 100px;
					height: 1px;
					background: $lightgrey;
				}
			}
			.voice_txt {
				@include fs(16);
			}
		}
		.voice_img {
			width: 35%;
			text-align: center;
			padding-top: 20px;
			padding-left: 4em;
			img {
				border: 5px solid $white;
				border-radius: 50%;
			}
			.user {
				margin: 1em 0;
				@include fs(16);
				font-weight: 400;
				small {
					@include fs(14);
					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);
		}
	}
}
@include ltMD {
	// product_introduce
	// --------------------------------------------------
	.product_introduce {
		.ttl {
			small {
			}
		}
		.thumb_list {
			li {
				a {
					&:hover {
					}
					img {
					}
					span {
						text-align: center;
						small {
						}
					}
				}
				.headding {
				}
			}
			&.layout01 li {
			}
			&.layout02 li {
			}
			&.layout03 li {
			}
			&.layout04 li {
			}
		}
		.point_wrap {}
		.point {
			.detail {
				.subttl {
				}
			}
			.thumb {
				img {
				}
			}
			&::before {
			}
			&:nth-child(2n-1) {
			}
			&:nth-child(2n) {
			}
		}
		&.intro_set {
			.row {
			}
			.ttl {
			}
			.lead {
			}
		}
		// support_detail
		// --------------------------------------------------
		.support_detail {
			padding: 2rem
		}
		.support {
			.icon {
			}
			.subttl {
			}
			.lead {
			}
		}
		.support_block {
			dl {
			}
			dt {
				span {
					padding-top: 0.8em;
				}
				.icon {
				}
			}
			dd {
			}
		}
		// feedback
		// --------------------------------------------------
		.board {
			margin: 2em 3em;
			.ttl {
			}
			.paper {
				&:before {
				}
				&:after {
				}
			}
		}
		.voice {
			.voice_cont {
				.voice_ttl {
					&:after {
					}
				}
				.voice_txt {
				}
			}
			.voice_img {
				img {
				}
				.user {
					small {
					}
				}
			}
		}
		// inner_spec
		// --------------------------------------------------
		&.inner_spec {
			.row {
			}
			.col > div {
			}
			.ttl {
			}
			.spec_box {
			}
			.chart {
			}
			.lead {
			}
		}
	}
};
@include ltSM {
	// product_introduce
	// --------------------------------------------------
	.product_introduce {
		.ttl {
			small {
			}
		}
		.thumb_list {
			li {
				a {
					&:hover {
					}
					img {
					}
					span {
						text-align: center;
						small {
						}
					}
				}
				.headding {
				}
			}
			&.layout01 li {
			}
			&.layout02 li {
			}
			&.layout03 li {
			}
			&.layout04 li {
			}
		}
		.point_wrap {}
		.point {
			.detail {
				.subttl {
					margin-bottom: 0.2em;
				}
				.lead {
					@include fs(14);
				}
			}
			.thumb {
				img {
				}
			}
			&::before {
				width: 100px;
				height: 50px;
				background-size: 100px 50px;
				margin-left: -50px;
				font-size: 42px;
				line-height: 44px;
			}
			&:nth-child(2n-1) {
			}
			&:nth-child(2n) {
			}
		}
		&.intro_set {
			.row {
			}
			.ttl {
			}
			.lead {
			}
		}
		// support_detail
		// --------------------------------------------------
		.support_detail {
			padding: 0;
		}
		.support {
			padding: 0 0.5em;
			.icon {
			}
			.subttl {
			}
			.lead {
				@include fs(16);
			}
		}
		.support_block {
			margin-bottom: 1em;
			dl {
				margin: 0 0 1em;
			}
			dt {
				span {
					padding-top: 1.0em;
				}
				.icon {
				}
			}
			dd {
			}
		}
		// feedback
		// --------------------------------------------------
		.board {
			margin: 1em 0;
			padding: 4em 2em 2em;
			.ttl {
			}
			.paper {
				padding: 3em 2em 1em;
				&:before {
					top: -2.2em;
					margin-left: -15em;
					width: 30em;
					height: 4.5em;
				}
				&:after {
					top: -2.8em;
					margin-left: -10em;
					width: 20em;
					height: 2em;
					border-bottom: 1em solid #ddd;
				}
			}
		}
		.voice {
			padding: 2em;
			margin-bottom: 2em;
			.voice_cont {
				width: 70%;
				.voice_ttl {
					&:after {
					}
				}
				.voice_txt {
				}
			}
			.voice_img {
				width: 30%;
				padding-left: 2em;
				img {
				}
				.user {
					small {
					}
				}
			}
		}
		// inner_spec
		// --------------------------------------------------
		&.inner_spec {
			.row {
			}
			.col > div {
			}
			.ttl {
			}
			.spec_box {
			}
			.chart {
			}
			.lead {
			}
		}
	}
};
@include ltXS {};
@include ltXXS {};