@charset "utf-8";
@use "bootstrap" as bs;


/* layout
-------------------------------------------------------*/
body{
	position: relative;

	&:after{
		@include bs.transition;
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		opacity: 1;
		z-index: 100;
	}

	&.onload{
		&:after{
			opacity: 0;
			display: none;
		}
	}
}

.common-sec-btn{
	width: 230px;
	height: 40px;
	margin: 0 auto;

	a{
		position: relative;
		@include bs.flexbox;
		@include bs.flexset(center,center);
		width: 100%;
		height: 100%;
		color: white;
		font-size: 1.4rem;
		border: 1px solid #b9b9b9;
		border-radius: 2px;
		text-align: center;
		@include bs.transition;

		&:after{
			@include bs.arrow(5px, 1px, #b9b9b9, 0, -50%, right);
			top: 50%;
			right: 10px;
		}
	}
}


.sec-hero{
	margin-bottom: 100px;
	
	// .hero-title {
	// 	@include bs.absolute-center(0,0);
	// 	left: 10vw;
	// 	bottom: 20vh;
	// 	width: 460px;
	// 	height: 300px;
	// 	z-index: 10;

	// 	p {
	// 		position: relative;
	// 		color: #676767;
	// 		font-size: 4.6rem;
	// 		line-height: 1.6;
	// 		letter-spacing: 0.1em;

	// 		&::after {
	// 			@include bs.absolute-center(0, 0);
	// 			content: "Order Made";
	// 			top: 0;
	// 			left: 0;
	// 			color: #f4f4f4;
	// 			font-family: bs.$font-family-whisper;
	// 			font-size: 14.3rem;
	// 			z-index: -1;
	// 		}
	// 	}

	// 	span {
	// 		display: block;
	// 		margin-top: 50px;
	// 		color: #676767;
	// 		font-size: 1.8rem;
	// 		letter-spacing: 0.4em;
	// 		line-height: 2;
	// 	}
	// }

	.top-head-swiper {
		.swiper-container {
			width: 100%;
			height: 56vw;
			margin-left: auto;
			margin-right: 0 !important;
			overflow: hidden;

			.swiper-wrapper {
				li {
					position: relative;
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center;
					// background-image: linear-gradient(180deg, transparent 0 30%, #FFF 70% 100%);

					a {
						display: block;
						width: 100%;
						height: 100%;
					}
					
					&::before {
						@include bs.full-width;
						// background:linear-gradient(-90deg, rgba(255, 255, 255, 0) 0 30%, #FFF 70% 100%);
						// background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, #FFF 70% 100%);
						// background: -mozlinear-gradient(180deg, rgba(255, 255, 255, 0) 0 30%, #FFF 70% 100%);
						// background: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 30%, #FFF 70% 100%);
					}

					&::after {
						@include bs.full-width;
						background:linear-gradient(to top, rgba(255, 255, 255, 0) 80%, #FFF);
						background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 80%, #FFF);
						background: -mozlinear-gradient(bottom, rgba(255, 255, 255, 0) 80%, #FFF);
						background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0) 80%, #FFF);
					}
				}
			}
		}

		.swiper-custom-fraction {
			position: relative;
			bottom: 50px !important;
			width: 200px;
			margin:0 auto;
			z-index: 1;
			
			.fraction-num {
				@include bs.flexbox;
				@include bs.flexset(space-around,center);
				width: 80%;
				margin: 0 auto;
				text-align: center;
				
				span {
					color: #7b7b7b;
					font-size: 1.7rem;
					text-align: center;
				}
			}

			&::before,&::after {
				@include bs.absolute-center(0%, 50%);
				top: 50%;
				font-size: 1.7rem;
				z-index: 100;
			}

			&::before {
				content: "<";
				left: 0%;
			}

			&::after {
				content: ">";
				right: 0;
			}
		}

		.swiper-pagination {
			position: inherit !important;
			max-width: 1000px;
			margin: 0 auto;

			.swiper-pagination-bullet {
				max-width: 100px !important;
				width: 20%;
				height: 4px !important;
				border-radius: 0 !important;
				margin: 0 5px;

				&.swiper-pagination-bullet-active {
					background-color: #4a4a4a !important;
				}
			}
		}
	}
}

.sec-concept{
	margin-bottom: 130px;

	.scrl-sec-inner{
		.concept-wrapper{
			ul {
				max-width: 1200px;
				width: 96%;
				margin: 0 auto;

				li {
					@include bs.flexbox;
					@include bs.justify(space-between);
					
					&:not(:last-child) {
						margin-bottom: 70px;
					}

					&:first-child {
						figure {
							width: 38%;
							margin-left: -30px;

							&::before {
								content: "";
								display: block;
								padding-top: 120%;
							}
						}

						p {
							width: 57%;
						}
					}

					&:last-child {
						figure {
							width: 43%;
							margin-right: -70px;

							&::before {
								content: "";
								display: block;
								padding-top: 98%;
							}
						}

						p {
							width: 55%;
						}
					}

					figure {
						position: relative;

						img {
							@include bs.image-block;
							object-fit: cover;
						}
					}

					p {
						font-size: 1.6rem;
						line-height: 2;

						.large {
							font-size: 2.2rem;
						}

						.small {
							display: block;
							font-size: 1.2rem;
							line-height: 1.7;
						}
					}
				}
			}
		}
	}
}

.sec-lineup{
	margin-bottom: 100px;

	.scrl-sec-inner{
		.lineup-wrapper{
			ul {
				max-width: 1000px;
				width: 96%;
				margin: 0 auto;
				@include bs.flexbox;
				@include bs.justify(space-between);

				li {
					display: flex;
					flex-direction: column;
					width: 47%;
					
					&:not(:nth-last-child(-n+2)) {
						margin-bottom: 80px;
					}

					figure {
						position: relative;
						width: 100%;

						&::before {
							content: "";
							display: block;
							padding-top: 100%;
						}

						img {
							@include bs.image-block;
							object-fit: cover;
						}
					}

					dl {
						margin-bottom: 25px;
						dt {
							margin-bottom: 20px;
							font-size: 2.6rem;
							text-align: center;
							
							span {
								color: #7b7b7b;
								display: block;
								font-family: bs.$font-family-whisper;
								margin-top: 10px;
							}
						}
						
						dd {
							font-family: bs.$font-family-sans;
							font-size: 1.6rem;
							line-height: 1.3;
						}
					}

					.lineup-btn{
						width: 260px;
						height: 40px;
						margin: 0 auto;
						margin-top: auto;

						&.long {
							width: 320px;
						}

						a{
							position: relative;
							@include bs.flexbox;
							@include bs.flexset(center,center);
							width: 100%;
							height: 100%;
							font-size: 1.4rem;
							border: 1px solid #b9b9b9;
							border-radius: 2px;
							text-align: center;
							@include bs.transition;

							&:after{
								@include bs.arrow(5px, 1px, #b9b9b9, 0, -50%, right);
								top: 50%;
								right: 10px;
							}
						}
					}
				}
			}

		}
	}
}

.sec-common {
	padding: 135px 0;

	.scrl-sec-inner{
		max-width: 1000px;
		width: 96%;
		margin: 0 auto;

		.section-title-wrapper {
			.section-title {
				color: white;

				p {
					color: white;
				}
			}
		}
		.common-wrapper{
			p {
				margin-bottom: 40px;
				color: white;
				font-family: bs.$font-family-sans;
				font-size: 1.6rem;
				line-height: 1.6;
				text-align: center;
			}

		}
	}
}

.sec-story {
	background: url(../images/story_pc.jpg) center / cover no-repeat;
}

.sec-omoi {
	background: url(../images/omoi_pc.jpg) center / cover no-repeat;
}

.sec-news{
	padding: 100px 0;

	.scrl-sec-inner{
		max-width: 1000px;
		width: 96%;
		margin: 0 auto;
		@include bs.flexbox;
		@include bs.align-items(center);

		.section-title-wrapper {
			width: 200px;
			margin-right: 55px;
			
			.section-title {
				margin-bottom: 40px;
				text-align: center;
				
				h2 {
					margin-bottom: 15px;
					font-size: 2.6rem;
				}

				p {
					font-size: 3.2rem;
				}
			}


			.list_btn {
				position: relative;
				display: block;
				margin: 0 auto;
				text-align: center;

				span {
					position: relative;
					padding-right: 50px;
					font-size: 1.4rem;
							
					&::before {
						content: "";
						display: block;
						width: 30px;
						height: 30px;
						@include bs.absolute-center(0%, 50%);
						top: 50%;
						right: 0%;
						background: url(../common/images/list-btn.svg) no-repeat top center/contain;
					}
				}

			}
		}

		.news-wrapper {
			a {
				position: relative;
				display: block;
				padding: 30px 0;
				border-bottom: 1px solid #dfdfdf;
				@include bs.transition;
				
				&:first-child {
					border-top: 1px solid #dfdfdf;
				}
				
				dl {
					@include bs.flexbox;
					@include bs.align-items(center);
					
					dt {
						width: 130px;
						font-family: bs.$font-family-sans;
						font-size: 1.4rem;
					}
	
					dd {
						-webkit-flex: 1;
						flex: 1;
						font-family: bs.$font-family-sans;
						font-size: 1.6rem;
						line-height: 1.56;
	
					}
				}
			}
		}
	}
}

.sec-service{
	margin-bottom: 120px;

	.scrl-sec-inner{
		.service-wrapper{
			ul {
				li {
					@include bs.flexbox;
					@include bs.align-items(center);
					
					&:first-child {
						.service-back {
							background: url(../images/quolity.jpg) center / cover no-repeat;
						}
					}

					&:nth-child(2) {
						.service-back {
							background: url(../images/afterservice.jpg) center / cover no-repeat;
						}
					}

					&:last-child {
						.service-back {
							background: url(../images/design.jpg) center / cover no-repeat;
						}
					}

					.service-back {
						width: 50%;
						height: 450px;
						// padding-top: 64%;
					}

					.service-inner {
						width: 50%;
						padding: 30px;

						dl {
							margin-bottom: 25px;
	
							dt {
								margin-bottom: 20px;
								font-size: 2.6rem;
								text-align: center;
	
								span {
									color: #7b7b7b;
									display: block;
									font-family: bs.$font-family-whisper;
									margin-top: 10px;
								}
							}
	
							dd {
								font-family: bs.$font-family-sans;
								font-size: 1.55rem;
								line-height: 1.75;
								letter-spacing: -0.02em;
								text-align: center;
							}
						}
	
						.service-btn{
							width: 260px;
							height: 40px;
							margin: 0 auto;
	
							a{
								position: relative;
								@include bs.flexbox;
								@include bs.flexset(center,center);
								width: 100%;
								height: 100%;
								font-size: 1.4rem;
								border: 1px solid #b9b9b9;
								border-radius: 2px;
								text-align: center;
								@include bs.transition;
	
								&:after{
									@include bs.arrow(5px, 1px, #b9b9b9, 0, -50%, right);
									top: 50%;
									right: 10px;
								}
							}
						}
					}
				}
			}

		}
	}
}

.sec-recommned{ 
	margin-bottom: 100px;

	.scrl-sec-inner{
		.recommned-title-wrapper {
			margin-bottom: 25px;
			
			h2 {
				font-family: bs.$font-family-whisper;
				font-size: 6.6rem;
				text-align: center;
			}
		}

		.tab{
			margin-bottom: 30px;
			@include bs.flexbox;
			@include bs.justify(center);
			
			&__item{
			padding: 0 20px;
			cursor: pointer;

			span {
				display: inline-block;
				padding-bottom: 10px;
				font-size: 1.7rem;
				text-align: center;
			}

			&--active{
				span {
					color: #ed9a00;
					border-bottom: 1px solid #ed9a00;
				}
			}
		}
		}

		.main-slider{
			display: none;

			&--active{
				display: block;
			}

			&__slide{
				a {
					display: block;
					width: 100%;
					height: 100%;
				}
				
				figure {
					position: relative;
					width: 100%;
					margin-bottom: 15px;
					
					&::before {
						content: "";
						display: block;
						padding-top: 100%;
					}
					
					img {
						@include bs.image-block;
						object-fit: cover;
					}
				}

				dl {
					text-align: center;
				
					dt {
						margin-bottom: 10px;
						font-size: 1.8rem;
						letter-spacing: -0.02em;
						line-height: 1.4;
					}
					
					dd {
						font-size: 2rem;
					
						span {
							font-size: 1.3rem;
						}
					}
				}
			}

			.swiper-button {
				@include bs.absolute-center(0,50%);
				top: 35%;
				width: 70px;
				height: 90px;
				background: url(../common/images/swiper-prev.svg) center/contain no-repeat;
				cursor: pointer;
				z-index: 10;

				&.prev {
					left: 1%;
				}

				&.next {
					right: 1%;
					background: url(../common/images/swiper-next.svg) center/contain no-repeat;
				}
			}
		}
	}
}

@media screen and (min-width: 1500px){
	.sec-recommned{ 
		.scrl-sec-inner{	
			.main-slider{	
				.swiper-button {
					top: 42%;
	
					&.prev {
						left: 2%;
					}
	
					&.next {
						right: 2%;
					}
				}
			}

		}
	}
}

@media screen and (max-width: 1499px){
	.sec-recommned{ 
		.scrl-sec-inner{	
			.main-slider{	
				.swiper-button {
					top: 42%;

					&.prev {
						left: 13.5%;
					}
	
					&.next {
						right: 13.5%;
					}
				}
			}

		}
	}
}

@media screen and (max-width: 1199px){
	.sec-recommned{ 
		.scrl-sec-inner{	
			.main-slider{	
				.swiper-button {
					top: 42%;

					&.prev {
						left: 3%;
					}
	
					&.next {
						right: 3%;
					}
				}
			}

		}
	}
}

@media screen and (max-width: 1400px){
	.sec-concept{
		.scrl-sec-inner{
			.concept-wrapper{
				ul {
					max-width: 1000px;
	
					li {
	
						&:first-child {
							figure {
								width: 38%;
								margin-left: 0;

							}
	
							p {
								width: 60%;
							}
						}
	
						&:last-child {
							figure {
								width: 40%;
								margin-right: 0;
							}
	
							p {
								width: 58%;
							}
						}
	
						figure {
							position: relative;
	
							img {
								@include bs.image-block;
								object-fit: cover;
							}
						}
	
						p {
							font-size: 1.6rem;
							line-height: 2;
	
							.large {
								font-size: 2.2rem;
							}
	
							.small {
								display: block;
								font-size: 1.2rem;
								line-height: 1.7;
							}
						}
					}
				}
			}
		}
	}
}

@media screen and (min-width: 1000px){
/* ------------------------------------------------------*/

.sec-concept{
	margin-bottom: 130px;

	.scrl-sec-inner{
		.concept-wrapper{
			ul {
				li {
					&:nth-of-type(even) {
						figure {
							order: 1;
						}

						p {
							text-align: right;
						}
					}
				}
			}
		}
	}
}

.sec-lineup{
	.scrl-sec-inner{
		.lineup-wrapper{
			ul {
				li {
					.lineup-btn{
						a{
							&:hover {
								border: 1px transparent;
								background-color: #8d8d8d;
								color: white;
								@include bs.transition;
								
								&:after{
									@include bs.arrow(px, 1px, white, 0, -50%, right);
								}
							}
						}
					}
				}
			}

		}
	}
}

.common-sec-btn {
	a{
		&:hover {
			border: 1px transparent;
			background-color: #8d8d8d;
			color: white;
			@include bs.transition;
			
			&:after{
				@include bs.arrow(5px, 1px, white, 0, -50%, right);
			}
		}
	}
}

.sec-news{
	.scrl-sec-inner{
		.news-wrapper {
			-webkit-flex: 1;
			flex: 1;

			a {
				&:hover {
					@include bs.transition;
					opacity: 0.6;
				}
			}
		}
	}
}

.sec-service{
	margin-bottom: 120px;

	.scrl-sec-inner{
		.service-wrapper{
			ul {
				li {
					
					&:nth-child(odd) {
						.service-back {
							order: 1;
						}
					}

					.service-inner {
						.service-btn{
							a{
								@include bs.transition;

								&:hover {
									border: 1px transparent;
									background-color: #8d8d8d;
									color: white;
									@include bs.transition;
									
									&:after{
										@include bs.arrow(5px, 1px, white, 0, -50%, right);
										@include bs.transition;
									}
								}
							}
						}
					}
				}
			}

		}
	}
}


}


@media screen and (max-width: 768px){

	.sec-recommned {
		.scrl-sec-inner{
			.main-slider{
				.swiper-button {
					display: none;
				}
			}
		}
	}



}


@media screen and (max-width: 999px){
/* ------------------------------------------------------*/
.common-sec-btn{
	a{
		font-size: 1rem;

		&:after{
			@include bs.arrow(7px, 1px, #b9b9b9, 0, -50%, right);
		}
	}
}

.sec-hero{
	margin-bottom: 50px;
	
	// .hero-title {
	// 	left: 7vw;
	// 	bottom: 40vh;
	// 	width: 80%;
	// 	height: auto;

	// 	p {
	// 		position: relative;
	// 		font-size: 3.3rem;

	// 		&::after {
	// 			top: 30px;
	// 			font-size: 6.15rem;
	// 		}
	// 	}

	// 	span {
	// 		margin-top: 25px;
	// 		font-size: 1.3rem;
	// 		letter-spacing: 0.2em;
	// 	}
	// }

	.top-head-swiper {
		.swiper-container {
			height: 110vw;

			.swiper-wrapper {
				li {
					// &::before {
					// 	// background:linear-gradient(-90deg, transparent 0 30%, #FFF 85% 100%);
					// }

					&::after {
						background:linear-gradient(to top, rgba(255, 255, 255, 0) 85%, #FFF);
						background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 85%, #FFF);
						background: -mozlinear-gradient(bottom, rgba(255, 255, 255, 0) 85%, #FFF);
						background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0) 85%, #FFF);
					}
				}
			}
		}

		.swiper-custom-fraction {
			position: relative;
			bottom: 30px !important;
			width: 135px;
			
			.fraction-num {
				span {
					font-size: 1rem;
					text-align: center;
				}
			}

			&::before,&::after {
				@include bs.absolute-center(0%, 50%);
				top: 50%;
				font-size: 1.7rem;
				z-index: 100;
			}

			&::before {
				content: "<";
				left: 0%;
			}

			&::after {
				content: ">";
				right: 0;
			}
		}

		.swiper-pagination {
			.swiper-pagination-bullet {
				width: 60px;
				height: 2px !important;
			}
		}
	}
}

.sec-concept{
	margin-bottom: 80px;

	.scrl-sec-inner{
		.concept-wrapper{
			ul {
				li {
					&:not(:last-child) {
						margin-bottom: 35px;
					}

					&:first-child {
						figure {
							width: 70%;
							margin: 20px auto 0;
						}

						p {
							width: 100%;
						}
					}

					&:last-child {
						figure {
							width: 70%;
							margin: 20px auto 0;
						}

						p {
							width: 100%;
						}
					}

					figure {
						order: 1;
					}

					p {
						font-size: 1.15rem;
						line-height: 1.7;
						text-align: left;
						letter-spacing: -0.03em;

						.large {
							font-size: 1.6rem;
						}

						.small {
							display: block;
							font-size: 1rem;
							line-height: 1.4;
						}
					}
				}
			}
		}
	}
}

.sec-lineup{
	margin-bottom: 45px;

	.scrl-sec-inner{
		.lineup-wrapper{
			ul {
				li {
					width: 100%;
					
					&:not(:last-child) {
						margin-bottom: 50px;
					}

					figure {
						width: 70%;
						margin: 0 auto;
					}

					dl {
						margin-bottom: 15px;
						dt {
							margin-bottom: 10px;
							font-size: 1.8rem;
						}
						
						dd {
							font-size: 1rem;
							line-height: 1.3;
						}
					}

					.lineup-btn{
						width: 230px;

						&.long {
							width: 300px;
						}

						a{
							font-size: 1rem;
						}
					}
				}
			}

		}
	}
}

.sec-common {
	padding: 100px 0;

	.scrl-sec-inner{
		.common-wrapper{
			p {
				margin-bottom: 20px;
				font-size: 1rem;
				line-height: 1.5;
			}

		}
	}
}

.sec-news{
	padding: 45px 0 30px;

	.scrl-sec-inner{
		.section-title-wrapper {
			position: relative;
			width: 100%;
			margin: 0;
			
			.section-title {
				width: 100%;
				margin: 0px;
				text-align: center;
				
				h2 {
					margin-bottom: 10px;
					font-size: 1.8rem;
				}

				p {
					font-size: 2.1rem;
				}
			}


			.list_btn {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);

				span {
					padding-right: 30px;
					font-size: 1rem;
							
					&::before {
						width: 15px;
						height: 15px;
					}
				}

			}
		}

		.news-wrapper {
			width: 100%;
			margin-top: 10px;

			a {
				padding: 20px 0;
				
				dl {
					@include bs.flexbox;
					@include bs.align-items(center);
					
					dt {
						width:75px;
						font-size: 1rem;
					}
	
					dd {
						font-size: 1.2rem;
						line-height: 1.4;
	
					}
				}
			}
		}
	}
}

.sec-service{
	margin-bottom: 50px;

	.scrl-sec-inner{
		.service-wrapper{
			ul {
				li {
					.service-back {
						width: 96%;
						height:60vw;
						margin: 0 auto;
						order: -1;
					}

					.service-inner {
						width: 100%;
						
						dl {
							margin-bottom: 25px;
	
							dt {
								margin-bottom: 25px;
								font-size: 1.8rem;
	
								span {
									margin-top: 10px;
									font-size: 2.1rem;
								}
							}
	
							dd {
								font-size: 1rem;
								line-height: 1.4;
							}
						}
	
						.service-btn{
							width: 230px;
							height: 40px;
							margin: 0 auto;
	
							a{
								font-size: 1rem;
	
								&:after{
									@include bs.arrow(7px, 1px, #b9b9b9, 0, -50%, right);
								}
							}
						}
					}
				}
			}

		}
	}
}

.sec-recommned{ 
	margin-bottom: 50px;

	.scrl-sec-inner{
		.recommned-title-wrapper {
			margin-bottom: 15px;
			
			h2 {
				font-size: 3.3rem;
			}
		}

		.tab{
			margin-bottom: 20px;
			
			&__item{
			padding: 0 15px;

			span {
				padding-bottom: 5px;
				font-size: 1.3rem;
			}
		}
		}

		.main-slider{
			&__slide{
				dl {
					dt {
						margin-bottom: 5px;
						font-size: 1.2rem;
						line-height: 1.3;
					}
					
					dd {
						font-size: 1.2rem;
					
						span {
							font-size: 1rem;
						}
					}
				}
			}

			.swiper-button {
				@include bs.absolute-center(0,50%);
				top: 35%;
				width: 70px;
				height: 90px;
				background: url(../common/images/swiper-prev.svg) center/contain no-repeat;
				cursor: pointer;
				z-index: 10;

				&.prev {
					left: 1%;
				}

				&.next {
					right: 1%;
					background: url(../common/images/swiper-next.svg) center/contain no-repeat;
				}
			}
		}
	}
}

}