@charset "utf-8";

#mv {
	height: 360px;
	background: center top / cover no-repeat url(../../img/home/bg_mv.jpg);
	margin-bottom: 80px;
}
	#mv .mvLogo {
		width: 46px;
		margin: 0 auto;
		padding: 54px 0 20px;
	}
	#mv .mvTtl {
		text-align: center;
		font-size: 18px;
		color: #000;
		line-height: 1.777;
		margin-bottom: 15px;
	}
	#mv .mvImg {
		position: absolute;
		width: 88px;
		left: 50%;
		transform: translateX(-50%);
	}
		#mv .mvImg img {
			animation-delay: 1.5s;
		}

#lead {
	padding-top: 40px;
}
	#lead h3.secTtl {
		font-size: 23px;
		color: #000;
		letter-spacing: .075em;
		line-height: 1.75;
		text-align: center;
		margin-bottom: 70px;
	}
	#lead .bgGray1 {
		padding: 70px 0 60px;
	}
	#lead ul {
		margin: 0 auto 60px;
		position: relative;
		max-width: 272px;
	}
	#lead ul:after {
		content: '';
		position: absolute;
		bottom: -45px;
		width: 100%;
		height: 20px;
		background: url(../../img/home/lead_balloon.png) no-repeat;
		background-size: contain;
	}
		#lead ul li {
			position: relative;
			font-size: 16px;
			letter-spacing: .075em;
			line-height: 1.375;
			padding-left: 30px;
		}
		#lead ul li:before {
			content: '';
			position: absolute;
			top: 3px;
			left: 0;
			width: 21px;
			height: 18px;
			background: url(../../img/home/checkbox.png) no-repeat;
			background-size: contain;
		}
		#lead ul li:not(:last-child) {
			margin-bottom: 35px;
		}
	#lead .secTtl {
		font-size: 20px;
		color: #000;
		line-height: 1.8;
		text-align: center;
	}

#about {
	padding-top: 80px;
}
	#about .secTtl {
		margin-bottom: 20px;
	}
	#about .secInner > p {
		margin-bottom: 45px;
	}
	#about .secInner > .photo {
		width: 92.1875vw;
		margin: 0 calc(50% - 50vw);
		margin-left: auto;
		margin-bottom: 45px;
	}
	#about .secInner .flex {
		position: relative;
		padding-bottom: 50px;
	}
		#about .secInner .flex .txtWrap {
			width: 69%;
			letter-spacing: .02em;
		}
			#about .secInner .flex .txtWrap .why {
				font-size: 15px;
				color: #000;
				margin-bottom: 20px;
				line-height: 1.75;
			}
		#about .secInner .flex .spacer {
			width: 27.5%;
			max-width: 75px;
		}
		#about .secInner .flex .photo {
			position: absolute;
			width: 27.5%;
			max-width: 75px;
			right: 0;
			top: 5px;
			z-index: 2;
		}

#point {
}
	#point .bg {
		background: center top / cover no-repeat url(../../img/home/bg_point.jpg);
		padding: 50px 0 85px;
	}
	#point h3.secTtl {
		margin-bottom: 60px;
	}
	#point h3.secTtl strong {
		font-size: 32px;
	}
		#point ul {
			max-width: 272px;
			margin: 0 auto;
		}
			#point ul li{
				justify-content: flex-start;
				align-items: center;
			}
			#point ul li:not(:last-child){
				margin-bottom: 90px;
			}
				#point ul li .threePoint {
					position: relative;
					font-size: 24px;
					letter-spacing: .3em;
					line-height: 1;
					margin-right: 25px;
				}
				#point ul li .threePoint:before {
					content: '';
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 10px;
					width: 100px;
					height: 100px;
					background: url(../../img/home/point_circle.png) no-repeat;
					background-size: contain;
				}
				#point ul li .desc p {
					line-height: 1;
					font-size: 15px;
				}
				#point ul li .desc p:first-child {
					margin-bottom: 10px;
				}
	#point .inner {
		position: relative;
		width: 65.625%;
		margin: 0 auto;
		padding: 80px 0 180px;
	}
	#point .inner .secTtl {
		font-size: 20px;
		color: #000;
		line-height: 1.8;
		text-align: center;
		margin-bottom: 30px;
	}
	#point .inner span:after {
		content: '';
		position: absolute;
		bottom: 80px;
		left: 50%;
		transform: translateX(-50%);
		width: 190px;
		height: 50px;
		background: url(../../img/home/arrow_d.png) no-repeat;
		background-size: contain;
	}

#merit {
	padding-top: 80px;
}
	#merit .secTtl {
		color: #fff;
	}
		#merit .secTtl .garamond {
			font-size: 25px;
		}

	#merit ul.meritList > li {
		padding: 45px 0;
	}
		#merit ul.meritList > li .secInner {
			position: relative;
		}
			#merit > ul > li .meritTtlWrap {
				position: absolute;
				top: 40px;
				z-index: 2;
			}
				#merit ul.meritList > li .meritTtlWrap .meritNum {
					font-size: 20px;
					color: #b2b2b2;
					line-height: 1;
					margin-bottom: 10px;
				}
				#merit ul.meritList > li .meritTtlWrap h4.meritTtl {
					font-size: 20px;
					line-height: 1;
				}
				#merit ul.meritList > li:nth-child(2) .meritTtlWrap h4.meritTtl.uLine {
					border-bottom: solid 1px #333;
				}
			#merit ul.meritList > li .photo {
				width: 68.75vw;
				margin: 0 calc(50% - 50vw);
				margin-left: auto;
				margin-bottom: 45px;
			}
	#merit ul.meritDetail {
		margin-top: 60px;
	}
	#merit ul.meritDetail li:not(:last-child) {
		margin-bottom: 40px;
	}
	#merit ul.meritDetail li .meritDetailNum {
		position: relative;
		font-size: 20px;
		line-height: 1;
		margin-bottom: 15px;
	}
	#merit ul.meritDetail li .meritDetailNum:after {
		content: '';
		position: absolute;
		top: calc(50% + 1px);
		transform: translateY(-50%);
		margin-left: 5px;
		width: 40px;
		height: 1px;
		background-color: #b2b2b2;
	}
	#merit ul.meritDetail li h5.meritDetailTtl {
		font-size: 18px;
		line-height: 1;
		margin-bottom: 15px;
	}


#repeat {
	padding-top: 80px;
}
	#repeat h3.secTtl {
		margin-bottom: 20px;
	}
	#repeat > .secInner p {
		margin-bottom: 40px;
	}
	#repeat > .secInner .photo {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
	}
	#repeat .bg {
		padding: 80px 0;
		background: center top / cover no-repeat url(../../img/home/bg_repeat.jpg);
	}
	#repeat .bg .repeatTtl {
		font-size: 20px;
		text-align: center;
		margin-bottom: 30px;
	}
		#repeat .bg .repeatTtl .uLine {
			border-color: #000;
		}
	#repeat .appealDesc {
		margin-bottom: 80px;
	}
	#repeat ul.repeatDetail {
		margin-bottom: 30px;
	}
	#repeat ul.repeatDetail li:not(:last-child) {
		margin-bottom: 40px;
	}
		#repeat ul.repeatDetail li .repeatDetailNum {
			position: relative;
			font-size: 20px;
			line-height: 1;
			margin-bottom: 15px;
		}
		#repeat ul.repeatDetail li .repeatDetailNum:after {
			content: '';
			position: absolute;
			top: calc(50% + 1px);
			transform: translateY(-50%);
			margin-left: 5px;
			width: 40px;
			height: 1px;
			background-color: #b2b2b2;
		}
		#repeat ul.repeatDetail li h5.repeatDetailTtl {
			font-size: 18px;
			line-height: 1;
			margin-bottom: 15px;
		}
		#repeat ul.repeatDetail + .photo {
			width: 91.911%;
			margin: 0 auto;
		}
	#repeat .bgGray3 {
		padding-bottom: 80px;
	}
		#repeat .bgGray3 .secInner .photoWrap {
			position: relative;
			margin-bottom: 20px;
		}
			#repeat .bgGray3 .secInner .photoWrap .photo {
				width: 100vw;
				margin: 0 calc(50% - 50vw);
			}
			#repeat .bgGray3 .secInner .photoWrap .repeatTtl {
				position: absolute;
				bottom: 15px;
				font-size: 20px;
			}
	#repeat .bgGray3 .secInner .designDesc {
		margin-bottom: 90px;
	}
	#repeat .bgGray3 .secInner .photos {
		position: relative;
	}
	#repeat .bgGray3 .secInner .photos .photo:nth-child(1) {
		position: absolute;
		right: 0;
		top: -60px;
		width: 50vw;
		margin: 0 calc(50% - 50vw);
		z-index: 2;
	}
	#repeat .bgGray3 .secInner .photos .photo:nth-child(2) {
		position: relative;
		width: 62.5vw;
		margin: 0 calc(50% - 50vw);
	}

#feature {
	padding: 80px 0;
}
	#feature h3.secTtl {
		margin-bottom: 20px;
	}
	#feature .brand {
		margin-bottom: 80px;
	}
	#feature .brand  h4.subTtl {
		font-size: 18px;
		color: #000;
		line-height: 1.8;
		text-align: center;
		margin-bottom: 40px;
	}
	#feature .brand > p.txt {
		margin-bottom: 40px;
	}
	#feature .brand > .photo {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		margin-bottom: 40px;
	}
	#feature .comparison {
		padding: 80px 0;
	}
	#feature .comparison h4.subTtl {
		font-size: 20px;
		color: #000;
		line-height: 1.8;
		text-align: center;
		margin-bottom: 40px;
	}
	#feature .comparison .scrollTable {
		overflow-x: scroll;
		padding-bottom: 10px;
		margin: 0 calc(50% - 50vw);
		width: 92.5vw;
		margin-left: auto;
	}
		#feature .comparison .scrollTable::-webkit-scrollbar{
			height: 5px;
		}
		#feature .comparison .scrollTable::-webkit-scrollbar-track{
			background: #dbdad9;
		}
		#feature .comparison .scrollTable::-webkit-scrollbar-thumb{
			background: #666;
			border-radius: 5px;
		}
	#feature .comparison .scrollTable table {
		width: 565px;
		border-collapse: collapse;
		white-space: nowrap;
		background-color: #fff;
	}
		#feature .comparison .scrollTable thead {
			font-size: 14px;
		}
		#feature .comparison .scrollTable tbody {
			font-size: 12px;
		}
			#feature .comparison .scrollTable th,
			#feature .comparison .scrollTable td {
				border: solid 1px #cbcbcb;
				text-align: center;
				vertical-align: middle;
				line-height: 1.2;
				padding: 10px 0;
			}
			#feature .comparison .scrollTable th:nth-child(1),
			#feature .comparison .scrollTable td:nth-child(1) {
				width: 95px;
			}
			#feature .comparison .scrollTable th:nth-child(2),
			#feature .comparison .scrollTable td:nth-child(2) {
				width: 230px;
				background-color: #f4f4f4;
			}
			#feature .comparison .scrollTable th:nth-child(3),
			#feature .comparison .scrollTable td:nth-child(3) {
				width: 240px;
				background-color: #fcf7f8;
			}
			#feature .comparison .scrollTable th {
				color: #000;
			}
			#feature .comparison .scrollTable thead th:nth-child(2) {
				background-color: #d7d7d7;
			}
			#feature .comparison .scrollTable thead th:nth-child(3) {
				background-color: #e7c8ce;
			}
	#feature .topic {
		padding: 80px 0 0;
		position: relative;
	}
		#feature .topic h4.subTtl {
			position: absolute;
			top: 80px;
			z-index: 2;
			font-size: 18px;
			color: #000;
			line-height: 1.8;
			margin-bottom: 40px;
		}
			#feature .topic h4.subTtl strong {
				font-size: 25px;
				line-height: 1.1;
			}
		#feature .topic .photo.right {
		width: 62.5vw;
		margin: 0 calc(50% - 50vw);
		margin-left: auto;
		margin-top: 88px;
		margin-bottom: 50px;
		}
		#feature .topic p.txt {
			margin-bottom: 40px;
		}
		#feature .topic .photo.left {
		width: 92.1875vw;
		margin: 0 calc(50% - 50vw);
		margin-right: auto;
		}

#voice {
	padding: 80px 0;
}
	#voice h3.secTtl {
		margin-bottom: 30px;
	}
	#voice ul.salonList li:not(:last-child) {
		margin-bottom: 40px;
	}
		#voice ul.salonList li .photo {
			margin-bottom: 20px;
		}
		#voice ul.salonList li .salonName {
			font-size: 18px;
			color: #000;
			line-height: 1;
			margin-bottom: 5px;
		}
		#voice ul.salonList li .salonInfo {
			position: relative;
			font-size: 11px;
			color: #a3a3a3;
			margin-bottom: 30px;
			justify-content: flex-start;
		}
		#voice ul.salonList li .salonInfo:after {
			content: '';
			position: absolute;
			left: 0;
			bottom: -15px;
			width: 50px;
			height: 1px;
			line-height: 1;
			background-color: #b2b2b2;
		}
			#voice ul.salonList li .salonInfo p:first-child {
				margin-right: 15px;
			}

#support {
	padding: 80px 0 40px;
	background: center top / cover no-repeat url(../../img/home/bg_support.jpg);
}
	#support h4.subTtl {
		font-size: 18px;
		color: #000;
		line-height: 1.8;
		text-align: center;
		margin-bottom: 30px;
	}
	#support .understand .photo {
		margin-bottom: 30px;
	}
	#support .truth .photo {
		margin-bottom: 40px;
	}
	#support p {
		margin-bottom: 40px;
	}

#lineup {
	padding: 80px 0 80px;
}
	#lineup h3.secTtl {
		margin-bottom: 30px;
		line-height: 1.4;
	}
		#lineup h3.secTtl span {
			font-size: 14px;
		}
	#lineup .secInner {
		margin-bottom: 30px;
	}
	.thumbnailWrap {
		position: relative;
		width: 100%;
		padding-top: 62.5%;
		margin-bottom: 40px;
		background: center top / cover no-repeat url(../../img/home/bg_lineup.jpg);
	}
		.thumbnail-list {
			position: absolute;
			width: 75%;
			left: 50%;
			transform: translateX(-50%);
			bottom: -20px;
		}
		.thumbnail-item:nth-child(1),
		.thumbnail-item:nth-child(4) {
			width: 18.75%;
		}
		.thumbnail-item:nth-child(2),
		.thumbnail-item:nth-child(3) {
			width: 22.916%;
		}
		.thumbnail-item:nth-child(5) {
			width: 16.666%;
		}
	#lineup .tips {
		font-size: 12px;
		color: #999;
		text-align: center;
		line-height: 1;
		margin-bottom: 20px;
	}
	.sliderWrap {
		width:93.75%;
		margin: 0 auto;
		position: relative;
	}
		.slick-slider {
			position: static;
			width: 83.333%;
			margin: 0 auto;
		}
			.slide-item {
				padding: 0 0.4%;
			}
				.productName {
					font-size: 18px;
					line-height: 1.2;
					letter-spacing: .025em;
					margin-bottom: 15px;
				}
				.productCapacity {
					font-size: 11px;
					color: #a3a3a3;
					line-height: 1;
					letter-spacing: .025em;
					margin-bottom: 10px;
				}
				.productDesc {
					margin-bottom: 30px;
				}
					.productDesc p {
						font-size: 11px;
						color: #666;
						line-height: 1.7;
						letter-spacing: .025em;
					}
					.slide-item:nth-child(1) .productDesc p {
						width: 65%;
						font-size: 11px;
						color: #666;
						line-height: 1.7;
						letter-spacing: .025em;
					}
					.slide-item:nth-child(1) .productDesc .photo {
						width: 20%;
					}
				.productBtn {
					display: block;
					width: 100%;
					text-align: center;
					line-height: 40px;
					border: solid 1px #c2c2c2;
					background-color: #fff;
					position: relative;
					box-sizing: border-box;
				}
				.productBtn:after {
					content: '';
					position: absolute;
					top: 50%;
					transform: translateY(-50%) rotate(45deg);
					right: 30px;
					width: 6px;
					height: 6px;
					border-top: solid 1px #333;
					border-right: solid 1px #333;
					box-sizing: border-box;
				}
			.slick-prev,
			.slick-next {
				display: block;
				font-size: 0;
				line-height: 0;
				padding: 0;
				cursor: pointer;
				color: transparent;
				border: none;
				outline: none;
				position: absolute;
				top: 2%;
				background: url(../../img/home/slider_arrow.png) no-repeat;
				background-size: contain;
				width: 8px;
				height: 32px;
			}
			.slick-prev {
				left: 0;
				transform: scaleX(-1);
			}
			.slick-next {
				right: 0;
			}
			.slick-dots {
				display: flex;
				justify-content: space-between;
				width: 200px;
				margin: 15px auto 0;
			}
				.slick-dots li button {
					font-size: 0;
					line-height: 0;
					display: block;
					cursor: pointer;
					color: transparent;
					border: 0;
					outline: none;
					background: transparent;
					width: 8px;
					height: 8px;
					border-radius: 50%;
					background-color: #c2c2c2;
					padding: 0;
				}
				.slick-dots li.slick-active button {
					background-color: #940322;
				}









#flow {
	padding: 0 0 60px;
}
	#flow .bgGray1 {
		padding: 80px 0;
		position: relative;
		z-index: -2;
	}
	#flow h3.secTtl {
		margin-bottom: 30px;
		line-height: 1.4;
	}
		#flow h3.secTtl span {
			font-size: 14px;
		}
	#flow .secInner > p {
		margin-bottom: 30px;
	}
		#flow ol {
			position: relative;
		}
		#flow ol:after {
			content: '';
			position: absolute;
			top: 5px;
			left: 5px;
			width: 1px;
			height: 100%;
			background: center top / cover no-repeat url(../../img/home/flow_line.png);
			z-index: -1;
		}
			#flow ol li:not(:last-child) {
				margin-bottom: 30px;
			}
				#flow ol li .flowStep {
					padding-left: 14.7%;
					position: relative;
					font-size: 18px;
					color: #000;
					line-height: 1;
					margin-bottom: 10px;
				}
				#flow ol li .flowStep:after {
					content: '';
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
					width: 11px;
					height: 11px;
					border-radius: 5.5px;
					background-color: #ececeb;
					border: solid 1px #940322;
					box-sizing: border-box;
					z-index: 2;
				}
				#flow ol li .flowDesc {
					padding-left: 14.7%;
					font-size: 12px;
				}
	#flow .subTtl {
		padding-top: 80px;
		font-size: 18px;
		color: #000;
		text-align: center;
		line-height: 1.8;
	}


/* コンバージョンエリア */
.cv {
	padding: 50px 0 80px;
	background: center top / cover no-repeat url(../../img/home/bg_cv.jpg);
}
	.cv .secTtl {
		margin-bottom: 10px;
	}
	.cv .photo {
		margin-bottom: 10px;
	}
	.cv p {
		text-align: center;
		font-size: 20px;
		color: #000;
		line-height: 1.75;
		margin-bottom: 30px;
	}
		.cv p strong {
			color: #940322;
			border-color: #940322;
		}
	.cv .cvBtn {
		position: relative;
		width: 100%;
		margin: 20px auto 0;
		font-size: 14px;
		line-height: 60px;
		letter-spacing: .1em;
		text-align: center;
		background: #333;
	}
	.cv .cvBtn:after {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
		right: 30px;
		width: 9px;
		height: 9px;
		border-top: solid 1px #fff;
		border-right: solid 1px #fff;
	}
		.cv .cvBtn a {
			display: block;
			color: #fff;
		}