@charset 'utf-8';

/* common
------------------------------------------------ */
#footer { margin-top: 0; }

@media screen and (max-width: 768px) {
	.fs-l-main { margin: 0; }
}

@media screen and (min-width: 769px) {
	.fs-l-main { display: block; margin-top: 0; padding: 0; max-width: inherit; }
}

/* about
------------------------------------------------ */
.about { position: relative; }

/* visual */
.about-visual { position: relative; width: 100%; height: calc(100vh - 52px); overflow: hidden; }
.about-visual-info { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; opacity: 0; z-index: 2; }
.about-visual-title { text-align: center; font-family: Aktiv Grotesk, sans-serif; font-size: 3.46666666667vw; font-weight: 400; letter-spacing: .12em; line-height: 1.2; color: #f2c3c3; }
.about-visual-copy { margin: 4vw auto 0; width: 87.3333333333%; }
.about-visual-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f8f8f8; }
.about-visual-bg picture { width: 100%; height: 100%; opacity: 0; }

/* explain */
.about-explain { position: relative; margin-top: 23.3333333333vw; }
.about-explain-title { text-align: center; font-family: Aktiv Grotesk, sans-serif; font-size: 1.4rem; font-weight: 400; letter-spacing: .075em; line-height: 1.2; color: #f2c3c3; }
.about-explain-title:after { content: ''; display: block; margin: 32px auto 0; width: 40px; height: 1px; background: #ccc; }
.about-explain-text { margin-top: 30px; text-align: center; font-size: 1.3rem; letter-spacing: .1em; line-height: 2; }
.about-explain-text p + p { margin-top: 18px; }

.about-explain-title.lazy-scroll,
.about-explain-text.lazy-scroll p { transition: cubic-bezier(.2,.2,.4,1) 1s; transform: translateY(40px); opacity: 0; }
.about-explain-title.lazy-scroll.done,
.about-explain-text.lazy-scroll.done p { transform: translateY(0); opacity: 1; }
.about-explain-text.lazy-scroll p:nth-of-type(2) { transition-delay: .2s; }
.about-explain-text.lazy-scroll p:nth-of-type(3) { transition-delay: .4s; }

/* images */
.about-images { position: relative; margin-top: 23.3333333333vw; }
.about-images-block { position: relative; }
.about-images-box { position: relative; }
.about-images-box--cover { position: relative; width: 100%; height: 0; overflow: hidden; }
.about-images-box--parallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.about-images-box--photo { position: relative; width: 100%; height: 100%; background: #f8f8f8; }
.about-images-slide { position: relative; width: 100%; }
.about-images-slide__frame {}
.about-images-slide__move {}
.about-images-slide--item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; z-index: 1; }
.about-images-slide--item.current { z-index: 2; }
.about-images-slide--cover { position: relative; width: 100%; height: 100%; background: #f8f8f8; }
.about-images-slide--cover img { position: absolute; top: 0; left: 0; }
.about-images-slide__control { display: flex; align-items: center; position: relative; margin-top: 5.06666666667vw; }
.about-images-slide__control span { display: flex; align-items: center; position: relative; font-family: Aktiv Grotesk, sans-serif; font-size: 2.93333333333vw; font-weight: 400; letter-spacing: .05em; line-height: 1.2; color: #999; }
.about-images-slide__control span:after { content: ''; display: inline-block; margin: 0 2.66666666667vw; width: 6.4vw; height: 1px; background: #ddd; vertical-align: top; }
.about-images-slide__control span:last-child:after { display: none; }
.about-images-slide__control .current { color: #d2afaf; }

.about-images-box--1 .about-images-box--cover { padding-bottom: 120%; }
.about-images-box--2 .about-images-box--cover { padding-bottom: 133.333333333%; }
.about-images-box--3 .about-images-box--cover { padding-bottom: 66.6666666667%; }
.about-images-box--4 .about-images-box--cover { padding-bottom: 133.333333333%; }
.about-images-box--5 .about-images-box--cover { padding-bottom: 120%; }
.about-images-box--6 .about-images-box--cover { padding-bottom: 66.6666666667%; }
.about-images-box--7 .about-images-box--cover { padding-bottom: 120%; }
.about-images-box--8 .about-images-box--cover { padding-bottom: 133.333333333%; }
.about-images-box--9 .about-images-box--cover { padding-bottom: 133.333333333%; }

.about-images-slide--item.moving { animation: hideCurrent cubic-bezier(.09,.5,.5,.9) 1s forwards; }
.about-images-slide--item.moving .about-images-slide--cover { animation: hideCoverCurrent cubic-bezier(.09,.5,.5,.9) 1s forwards; }
.about-images-slide--item.moving.current { animation: slideCurrent cubic-bezier(.09,.5,.5,.9) 1s forwards; }
.about-images-slide--item.moving.current .about-images-slide--cover { animation: slideCoverCurrent cubic-bezier(.09,.5,.5,.9) 1s forwards; }

.about-images-box.lazy-scroll,
.about-images-box.lazy-scroll .about-images-box--photo img,
.about-images-box.lazy-scroll .about-images-slide--cover img { transition: cubic-bezier(.2,.2,.4,1) 1s; }
.about-images-box.lazy-scroll { transform: translateY(40px); }
.about-images-box.lazy-scroll .about-images-box--photo img,
.about-images-box.lazy-scroll .about-images-slide--cover img { opacity: 0; }
.about-images-box.lazy-scroll.done { transform: translateY(0); }
.about-images-box.lazy-scroll.done .about-images-box--photo img,
.about-images-box.lazy-scroll.done .about-images-slide--cover img { opacity: 1; }

@keyframes slideCurrent {
	from {
		transform: translate(100%,0);
	}
	to {
		transform: translate(0,0);
	}
}

@keyframes slideCoverCurrent {
	from {
		transform: translate(-100%,0) scale(1.2,1.2);
	}
	to {
		transform: translate(0,0) scale(1,1);
	}
}

@keyframes hideCurrent {
	from {
		transform: translate(0,0);
	}
	to {
		transform: translate(-100%,0);
	}
}

@keyframes hideCoverCurrent {
	from {
		transform: translate(0,0);
	}
	to {
		transform: translate(100%,0);
	}
}

/* newarrival */
.about-newarrival { position: relative; margin-top: 21.3333333333vw; padding-bottom: 100%; width: 100%; height: 0; overflow: hidden; }
.about-newarrival > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.about-newarrival-title { position: absolute; top: 50%; left: 12.8vw; transform: translateY(-50%); padding: 3.73333333333vw 0; width: calc(100% - 25.6vw); background: rgba(210,175,175,.8); text-align: center; line-height: 1.2; color: #fff; z-index: 2; }
.about-newarrival-title span { display: block; }
.about-newarrival-title .en { font-family: Aktiv Grotesk, sans-serif; font-size: 3.73333333333vw; font-weight: 400; letter-spacing: .075em; }
.about-newarrival-title .ja { margin-top: 1.33333333333vw; font-size: 2.4vw; letter-spacing: .025em; }
.about-newarrival-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f8f8f8; }
.about-newarrival-bg picture { width: 100%; height: 100%; }

.about-newarrival.lazy-scroll,
.about-newarrival.lazy-scroll .about-newarrival-title,
.about-newarrival.lazy-scroll .about-newarrival-bg picture { transition: cubic-bezier(.2,.2,.4,1) 1s; }
.about-newarrival.lazy-scroll { transform: translateY(40px); }
.about-newarrival.lazy-scroll .about-newarrival-title,
.about-newarrival.lazy-scroll .about-newarrival-bg picture { opacity: 0; }
.about-newarrival.lazy-scroll.done { transform: translateY(0); }
.about-newarrival.lazy-scroll.done .about-newarrival-title,
.about-newarrival.lazy-scroll.done .about-newarrival-bg picture { opacity: 1; }

.device-click .about-newarrival-bg picture { transition: transform ease 4s; }
.device-click .about-newarrival > a:hover { opacity: 1; }
.device-click .about-newarrival > a:hover .about-newarrival-bg picture { transform: scale(1.05); }

@media screen and (max-width: 768px) {
	/* images */
	.about-images-block { margin-top: 21.3333333333vw; }
	.about-images-block:first-child { margin-top: 0; }
	.about-images-box { margin-top: 21.3333333333vw; }
	.about-images-box:first-child { margin-top: 0; }
	.about-images-subblock { margin-top: 21.3333333333vw; }
	.about-images-subblock:first-child { margin-top: 0; }
	.about-images-slide__control { justify-content: flex-end; margin-right: 4.26666666667vw; }

	.about-images-block--3 { margin-top: 18.6666666667vw; }

	.about-images-box--2 { margin-left: 12.8vw; width: calc(100% - 25.6vw); }
	.about-images-box--4 { margin-right: 20vw; width: calc(100% - 20vw); }
	.about-images-box--5 { margin-left: 21.3333333333vw; width: calc(100% - 25.6vw); }
	.about-images-box--7 { margin-left: 4.26666666667vw; width: calc(100% - 8.53333333334vw); }
	.about-images-box--9 { margin: 18.6666666667vw 0 0 12.8vw; width: calc(100% - 12.8vw); }
}

@media screen and (min-width: 769px) {
	/* visual */
	.about-visual { height: calc(100vh - 128px); }
	.about-visual-title { font-size: 1.4rem; }
	.about-visual-copy { margin-top: 18px; width: 655px; }

	/* explain */
	.about-explain { margin-top: 186px; }
	.about-explain-title { font-size: 2.4rem; }
	.about-explain-title:after { margin-top: 48px; width: 40px; }
	.about-explain-text { margin-top: 48px; font-size: 1.4rem; }
	.about-explain-text p + p { margin-top: 32px; }

	.about-explain-title.lazy-scroll,
	.about-explain-text.lazy-scroll p { transform: translateY(100px); }

	/* images */
	.about-images { margin-top: 192px; }
	.about-images-block { margin-top: 14.2857142857vw; }
	.about-images-block:first-child { margin-top: 0; }
	.about-images-slide__control { margin-top: 1.9298245614vw; }
	.about-images-slide__control span { font-size: 1.14035087719vw; }
	.about-images-slide__control span:after { margin: 0 1.05263157895vw; width: 2.63157894737vw; }

	.about-images-block--1 { display: flex; align-items: center; }
	.about-images-box--1 { width: 50%; }
	.about-images-box--2 { margin-left: 8.33333333333vw; width: 33.3333333333%; }
	.about-images-block--2 {}
	.about-images-box--3 { margin-left: auto; width: 76.1904761905%; }
	.about-images-block--3 { display: flex; }
	.about-images-box--4 { margin-top: 31.4285714286vw; width: 35.7142857143%; }
	.about-images-box--5 { margin-left: 5.95238095238vw; width: 50%; }
	.about-images-block--4 {}
	.about-images-box--6 { margin-right: auto; margin-left: auto; width: 88.2142857143%; }
	.about-images-block--5 { display: flex; flex-wrap: wrap; align-items: center; }
	.about-images-box--7 { margin-left: 8.33333333333vw; width: 50%; }
	.about-images-block--5 .about-images-subblock { margin-left: auto; width: 29.7619047619%; }
	.about-images-box--8 { width: 100%; }
	.about-images-box--9 { margin-top: 4.7619047619vw; width: 100%; }

	.about-images-box.lazy-scroll { transform: translateY(100px); }

	/* newarrival */
	.about-newarrival { margin-top: 240px; padding-bottom: 40.4761904762%; }
	.about-newarrival-title { left: 50%; transform: translate(-50%,-50%); padding: 30px 0 32px; width: 624px; }
	.about-newarrival-title .en { font-size: 2.4rem; }
	.about-newarrival-title .ja { margin-top: 4px; font-size: 1.2rem; }

	.about-newarrival.lazy-scroll { transform: translateY(100px); }
}