@charset "UTF-8";

@font-face{
	font-family: 'apercu';
	font-style: normal;
	font-weight: 100;
	src: url("../font/apercu/apercu_regular_pro.eot");
	src: url("../font/apercu/apercu_regular_pro.eot?#iefix") format("embedded-opentype"), url("../font/apercu/apercu_regular_pro.woff") format("woff"), url("../font/apercu/apercu_regular_pro.ttf") format("truetype");
	/* Safari, Android, iOS */
}
body{
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
p{
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4{
	margin: 0;
	padding: 0;
	font-weight:normal;
}
img{
	width: 100%;
	vertical-align: bottom;
}
.pc-only{
	display: none;
}
a{
	color: #333333;
}
.clearfix:after {
	content: " ";
	display: block;
	clear: both;
}
.fade-in {
	opacity: 0;
	transform : translate(0, 15px);
	transition : all 0.5s;
}

.fade-in.scrollin{
	opacity: 1;
	transform: translate(0, 0);
}

/* ------------------------
 main_image
------------------------ */
#main_image{
	position: relative;
	width:100%;
	margin: 0 0 50px;
}
#main_image h1{
	position:absolute;
	top:46%;
	left: 0;
	right: 0;
	margin: auto;
	color:#fff;
	font-family:apercu;
	font-size:24px;
	text-align:center;
	letter-spacing:0.05em;
}
#main_image h1 div{
	margin-top:16px;
	font-size:12px;
	letter-spacing:0.01em;
}
#main_text{
	margin: 0 5% 100px;
	font-size: 12px;
	line-height: 180%;
}

/* ---------------------------------
 SCROLL IMAGE
--------------------------------- */
.motion-img,
.motion-img2{
	display: inline-block;
	position: relative;
	overflow: hidden;
	padding:0;
}
.motion-img:after {
	content: '';
	position: absolute;
	opacity: 1;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	background-color: #f7f4ef;
	-webkit-transform: translate3d(-101%, 0, 0);
	transform: translate3d(-101%, 0, 0);
}
.motion-img2:after {
	content: '';
	position: absolute;
	opacity: 1;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	background-color: #ffffff;
	-webkit-transform: translate3d(-101%, 0, 0);
	transform: translate3d(-101%, 0, 0);
}

.js-scroll.show .motion-img:after,
.js-scroll.show .motion-img2:after{
	transition-property: opacity, -webkit-transform;
	transition-property: transform, opacity;
	transition-property: transform, opacity, -webkit-transform;
	transition-duration: 0.5s;
	transition-delay: 0s;
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.js-scroll.done .motion-img:after,
.js-scroll.done .motion-img2:after{
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	transition-duration: 0.5s;
	transition-delay: 0s;
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transform: translate3d(103%, 0, 0);
	transform: translate3d(103%, 0, 0);
}

.motion-img .motion-inner,
.motion-img2 .motion-inner{
	display: inline-block;
	opacity: 0;
}

.js-scroll.done .motion-img .motion-inner,
.js-scroll.done .motion-img2 .motion-inner{
	opacity: 1;
}

/* ---------------------------------
 SCROLL
--------------------------------- */
.p-index-scroll {
	z-index:99996;
	position: absolute;
	bottom: 80px;
	width: 19px;
	right: 4%;
	height: 130px;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
}
.p-index-scroll-text {
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 12px;
	letter-spacing: 3px;
	color: #fff;
	font-family:apercu;
	line-height: 19px;
	padding-top: 25px;
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}
.p-index-scroll-bar-clip {
	position: absolute;
	overflow: hidden;
	width: 1px;
	background-color: #efefef;
	right: 9px;
	top: 90px;
	height: 100px;
}
.p-index-scroll-bar {
	position: absolute;
	width: 1px;
	top: -200px;
	right: 0;
	background-color: #000;
	height: 100px;
}
.p-index-scroll-bar {
	-webkit-animation: scroll-bar 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
	animation: scroll-bar 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
.p-index-scroll-bar {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
@keyframes scroll-text{
	0%{
		-webkit-transform:translateY(0);
		transform:translateY(0)
	}
	40%,50%{
		-webkit-transform:translateY(10px);
		transform:translateY(10px)
	}
	100%{
		-webkit-transform:translateY(0);
		transform:translateY(0)
	}
}
@keyframes scroll-bar{
	0%,5%{
		-webkit-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0)
	}
	100%{
		-webkit-transform:translate3d(0,510px,0);
		transform:translate3d(0,510px,0)
	}
}

/* ------------------------
 LINE UP
------------------------ */
#lineup h2{
	margin:0 0 20px;
	font-family:apercu;
	font-size:16px;
	text-align:center;
	letter-spacing:0.05em;
}
#lineup #lineup_list{
	display:flex;
	flex-wrap:wrap;
	margin:0 5% 100px;
}
#lineup #lineup_list li{
	position:relative;
	width:30.33%;
	margin:1.5%;
}
#lineup #lineup_list li:nth-child(4){
	margin-left:18.83%;
}
#lineup #lineup_list li .bg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.3;
}
#lineup #lineup_list li .lineup_text{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width:100%;
	color:#fff;
	text-align:center;
	font-family:apercu;
	font-size:10px;
}
#lineup #lineup_list li .lineup_text span{
	border-bottom:1px solid #fff;
}
#lineup #lineup_list li .lineup_text div{
	margin-top:7px;
}

/* ------------------------
 ITEM
------------------------ */
.item h2{
	margin:0 0 20px;
	text-align:center;
	font-size:16px;
	font-family:apercu;
	letter-spacing:0.05em;
}
.item h2 span{
	padding:0 0 5px;
	border-bottom:1px solid #000;
	font-size:20px;
}
.item h2 div{
	margin:25px 0;
}
.item_main{
	margin: 0 5% 20px;
}
.item .credit{
	margin: 0 5% 50px;
	text-align:center;
	font-family:apercu;
	font-size:12px;
}
.item .item_sub{
	display:flex;
	margin: 0 5% 20px;
}
.item .item_sub li:first-child{
	margin-right: 3%;
}
.item .item_text{
	margin: 0 5% 60px;
	font-size:12px;
	line-height:180%;
}
.item h3{
	margin:0 0 20px;
	text-align:center;
	font-size:16px;
	font-family:apercu;
	letter-spacing:0.05em;
}
.item .styling_list{
	display:flex;
	margin:0 0 30px;
}
.swiper-button-prev,
.swiper-button-next{
	width:12px;
	height:18px;
	background-size:12px 18px;
	margin-top:-9px;
}
a.btn_coordinate {
	display:block;
	margin: 0 auto 120px;
	padding:15px 0;
	width: 50%;
	font-size: 12px;
	border:1px solid #000;
	text-decoration:none;
	font-family:apercu;
	text-align:center;
	letter-spacing:0.01em;
}

/* ------------------------
 SELECT BRAND
------------------------ */
#selectbrand{
	margin:0 0 100px 0;
	padding:100px 0 30px;
	background:#f7f4ef;
}
#selectbrand h2{
	margin:0 0 10px;
	text-align:center;
	font-size:18px;
	font-family:apercu;
	letter-spacing:0.05em;
}
#selectbrand .selectbrand_line{
	display:block;
	margin:0 auto 60px;
	width:40px;
	border-bottom:1px solid #000;
	text-align:center;
}
#selectbrand h3{
	margin:0 0 10px;
	text-align:center;
	font-size:18px;
	font-family:apercu;
	letter-spacing:0.05em;
}
#selectbrand h3 span{
	font-size:16px;
}
#selectbrand h3 span.h3_brand{
	padding-right:4px;
	font-size:12px;
}
#selectbrand h3 div{
	margin:5px 0 20px 0;
}
#selectbrand .brand_image{
	margin:0 0 20px 0;
}
#selectbrand .brand_text{
	margin:0 5% 70px;
	font-size:12px;
	line-height:180%;
}
#selectbrand .ttl_insta{
	margin:10px 0 0 0;
}

/* ------------------------
 footer
------------------------ */
.btn_allitem {
	display: block;
	margin: 0 auto 140px;
	padding: 20px 0;
	width: 90%;
	text-decoration: none;
	text-align: center;
	border: 1px solid #000;
	font-family: apercu;
	font-size: 14px;
	letter-spacing:0.05em;
}
footer {
  margin: 70px 0 0 0;
}
footer img {
  display: block;
  width: 100px;
  margin: 0 auto;
}
footer p {
  margin: 20px 0 15px 0;
  text-align: center;
  font-size: 11px;
  font-family: apercu;
}

/* ------------------------
 PC
------------------------ */
@media screen and (min-width:560px) {
	.pc-only {
		display: block;
	}
	.sp-only {
		display: none;
	}
	#wrapper{
		margin:0 auto;
		width:1060px;
	}
	a{
		transition: 0.3s ;
	}
	a:hover{
		opacity: 0.8;
	}

	/* ------------------------
	 PC main_image
	------------------------ */
	#main_image{
		position: relative;
		width:100%;
		height:700px;
		margin: 0 0 50px;
		overflow:hidden;
	}
	#main_text {
		padding: 0 0 50px 0;
		line-height: 200%;
		text-align: center;
	}

	/* ------------------------
	 PC SCROLL
	------------------------ */
	.p-index-scroll {
		display: block;
		position: absolute;
		bottom: 50px;
	}
	.p-index-scroll-text {
		color: #000;
	}


	/* ------------------------
	 PC LINEUP
	------------------------ */
	#lineup #lineup_list{
		display:flex;
		flex-wrap:wrap;
		margin:0 5% 100px;
	}
	#lineup #lineup_list li{
		width:17%;
		margin:1.5%;
	}
	#lineup #lineup_list li:nth-child(4){
		margin-left:1.5%;
	}
	#lineup #lineup_list li .bg{
		transition: 0.3s ;
	}

	/* ------------------------
	 PC item
	------------------------ */
	.item_main{
		width: 500px;
		margin: 0 auto 30px;
	}
	.item .credit{
		margin: 0 0 80px;
		text-align:center;
	}
	.item .item_sub{
		width: 600px;
		margin: 0 auto 20px;
	}
	.item .item_text{
		width: 600px;
		margin: 0 auto 100px;
	}
	.item .styling_list{
		margin:0 auto 50px;
		width:640px;
	}
	a.btn_coordinate {
		margin: 0 auto 180px;
		padding:20px 0;
		width: 300px;
	}
	a:hover.btn_coordinate {
		border: 1px solid #999999;
	}

	/* ------------------------
	 PC SELECT BRAND
	------------------------ */
	#selectbrand #selectbrand_pc{
		display:flex;
		padding:0 20px;
	}
	#selectbrand #selectbrand_pc .brand{
		margin:0 10px;
		width:320px;
	}
	#selectbrand .brand_text{
		margin:0 10px 70px;
		font-size:12px;
	}

	/* ------------------------
	 footer
	------------------------ */
	.btn_allitem {
		margin: 40px auto 60px;
		width: 500px;
		font-size: 14px;
	}
	a:hover.btn_allitem {
		border: 1px solid #666666;
	}

}