@charset "utf-8";

/* header */
header{
	position: relative;
	margin: 0 auto;
	background-color: #93837d;
}
header h1{
	position: relative;
	margin: 0 auto;
	padding: 40px 0;
	width: calc(100% - 100px);
	max-width: 720px;
}
header h1 img{
	position: relative;
	margin: 0 auto;
}

/* movie */
#movie{
	position: relative;
	margin: 0 auto;
}
#movie .movieWrap{padding-top: 48.76%;}
#movie .movieWrap #Btn_movie{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height:  100%;
	background-image: url("../images/index/movie_thum.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	cursor: pointer;
}
#movie .movieWrap #Btn_movie::after{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 38%;
	height: 38%;
	max-width: 120px;
	max-height: 120px;
	content: '';
	background-image: url("../images/index/movie_btn.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
	transition: all .3s ease-out;
}
#movie .movieWrap:hover #Btn_movie::after{opacity: .5;}


/* about */
#about{
	position: relative;
	margin: 0 auto;
	padding-bottom: 70px;
	background-color: #93837d;
}
#about .Box{
	position: relative;
	margin: 0 auto;
	max-width: 1200px;
}
#about .Box .Img{
	position: relative;
	margin: 0 auto;
}
#about .Box .txt{
	position: relative;
	width: calc(100% - 40px);
	margin: 30px auto;
}
#about .Box:last-child .txt{margin: 30px auto 0 auto;}

/* concept */
#concept{
	position: relative;
	margin: 0 auto;
	padding-bottom:70px;
	background-color: #b7b2ae;
}
#concept .Img{
	position: relative;
	margin: 0 auto;
	max-width: 1300px;
}
#concept .txt{
	position: relative;
	width: calc(100% - 40px);
	margin: 30px auto;
	max-width: 1200px;
}
#concept .txt:last-child{margin: 30px auto 0 auto;}

/* designer */
#designer{
	position: relative;
	margin: 0 auto;
	background-color: #93837d;
	padding-bottom:70px;
}
#designer .comWrap{
	position: relative;
	margin: 0 auto;
	max-width: 1200px;
}
#designer .comWrap .Img{
	position: relative;
	margin: 0 auto;
}
#designer .comWrap .txt{
	position: relative;
	margin: 0 auto;
}
#designer .comWrap .txt .name{
	position: relative;
	margin: 20px auto 10px auto;
	font-size: .17rem;
	font-weight: 500;
	width: calc(100% - 40px);
}
#designer .comWrap .txt .name span{
	position: relative;
	margin: 0;
	display: inline-block;
	opacity: 0;
	transform: translateY(10px) translate3d(0, 0, 0);
}
@keyframes contTxtanimation_Y {
	0% {
		transform: translateX(-10px);
		opacity: 0;
	}
	100% {
	  transform: translateX(0);
	  opacity: 1;
	}
}
#designer .comWrap .txt .profile{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	font-size: .12rem;
	line-height: 1.6em;
	padding: 20px;
	background-color: #af9b8e;
}
#designer .comTxt{
	position: relative;
	width: calc(100% - 40px);
	margin: 30px auto 50px auto;
}
#designer .comWrap:last-child .comTxt{margin: 30px auto 0 auto;}

/* photo */
#photo{
	position: relative;
	margin: 0 auto;
	padding: 80px 0 40px;
	/* background-color: #93837d; */
	background-color: #000;
}
#photo .photoWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
}
#photo .photoWrap .slick-slide{margin: 0 !important;}
#photo .slider{
	position: relative;
	z-index: 11;
}
#arrows, #arrowsP{
	position: absolute;
	display: block;
	top: 0;
	left: -20px;
	text-align: center;
	width: calc(100% + 40px);
	height: 90%;
	z-index: 10;
}
#arrowsP{
	left: -20px;
	height: 90%;
	width: calc(100% + 40px);
}
.slide-arrow{
    position: absolute;
	top:0;
	display: block;
	width: 12px !important;
	height: 100% !important;
}
.prev-arrow{top:0;transform:  rotate(180deg);left: 3px;}
.next-arrow{top:0;right: 3px;}
.slick-disabled, .slick-disabled{display: none !important;}
#photo .slick-slide img:hover, .prev-arrow:hover, .next-arrow:hover{cursor: pointer;opacity: .6;transition: all .3s ease-out;}
#photo .slick-dots{background-color: #000;}
.slick-dots li{
	color: #b7b2ae;
	cursor: pointer;
	z-index: 12;
}
.popUpImg .slick-dots li{color: #ffffff;}
.slick-dots li button{padding: 0;}
.slick-dots li button:before {
	background-color: #b7b2ae !important;
}
.slick-dots li button::after{
	position: absolute;
	top:-3px;
	left: -3px;
	width: 12px;
    height: 12px;
	border-radius: 100px;
	border: solid 1px #b7b2ae;
	content: '';
	display: block;
	opacity: 0;
}
.popUpImg .slick-dots li button::after{border: solid 1px #ffffff;}
.slick-dots li.slick-active button::after, .slick-dots li button:hover::after{cursor: pointer;opacity: 1 !important;transition: all .3s ease-out;}

/* information */
#information{
	position: relative;
	margin: 0 auto;
	padding-top: 30px; 
	padding-bottom:70px;
	background-color: #b7b2ae;
	text-align: center;
}
#information .infoWrap{
	position: relative;
	margin: 0 auto;
	padding: 40px;
	width: calc(100% - 120px);
	background-color: #ffffff;
	text-align: left;
	max-width: 900px;
}
#information .attention{
	position: relative;
	width: calc(100% - 40px);
	margin: 0 auto;
	padding: 30px 0;
}
#information .company{
	position: relative;
	margin: 30px auto 0 auto;
}
#information .company .logoImg{
	position: relative;
	margin: 40px auto 0 auto;
	width: 38%;
	max-width: 160px;
}
#information .company .copyraight{
	position: relative;
	margin: 20px auto 0 auto;
	font-size: .12rem;
}
#information a:link, #information a:visited{color: #000000;}
#information a:hover{color: #ffffff; }

/* footer */
footer{
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
	background: #fff;
}
footer ul{
	position: relative;
	margin: 0 auto;
}
footer ul li{
	position: relative;
	margin: 0 5% 0 0;
	width: 20%;
	max-width: 170px;
}
footer ul li img{max-width: 100%;}
footer ul li.nicolaLogo{max-width:150px;}


/* ----- pc ----- */
@media screen and (min-width: 1090px) {
	
	/* header */
	header h1{
		margin: 0 auto;
		padding: 120px 0;
	}


	/* about */
	#about{padding-bottom: 120px;}
	#about .Box .Img{
		margin: 0;
		width: calc(50% - 20px);
		max-width: 620px;
	}
	#about .Box .txt{
		margin: 30px 20px;
		width: calc(50% - 40px);
		max-width: 620px;
	}
	#about .Box:nth-child(3){flex-direction:row-reverse;transform: translateY(-80px);}
	#about .Box:nth-child(3) .txt{padding-bottom: 30px;}
	#about .Box:last-child .Img{width: 100%; max-width: 1200px;}
	#about .Box:last-child .txt{margin: 30px auto 0 auto; width: calc(100% - 40px);max-width: 1200px;}

	/* concept */
	#concept{padding-bottom:120px;}
	#concept .txt{margin: 30px auto 80px auto;width: calc(100% - 40px);max-width: 1160px}
	#concept .txt:last-child{margin: 30px auto 0 auto;}

	/* designer */
	#designer{padding-bottom:120px;}
	#designer .comWrap .Img{
		margin: 0;
		width: calc(50% - 20px);
		max-width: 570px;
	}
	#designer .comWrap .txt{
		margin: 30px 20px;
		width: calc(50% - 40px);
		max-width: 570px;
	}
	#designer .comWrap .txt .name{
		margin: 0 auto 20px auto;
		font-size: .24rem;
		width: calc(100% - 40px);
	}
	#designer .comWrap .txt .profile{
		width: calc(100% - 50px);
		font-size: .14rem;
		line-height: 1.6em;
		padding: 40px 25px;
	}
	#designer .comTxt{margin: 30px auto 100px auto;}
	#designer .comWrap:last-child .comTxt{margin: 30px auto 0 auto;}

	/* photo */
	#photo .photoWrap{width: calc(100% - 80px);}
	.slide-arrow{
		width: 20px !important;
	}
	.prev-arrow{left: 7px;}
	.next-arrow{right: 7px;}

	#arrows{
		left: -40px;
		width: calc(100% + 80px);
	}
	#arrowsP{
		left: -60px;
		height: 90%;
		width: calc(100% + 120px);
	}
	.slick-dots li{
		width: 18px;
		height: 18px;
		margin: 0 8px;
	}
	.slick-dots li button{
		width: 18px;
		height: 18px;
	}
	.slick-dots li button:before{
		width: 14px;
		height: 14px;
	}
	.slick-dots li button::after{
		top:-3px;
		left: -3px;
		width: 18px;
		height: 18px;
	}
	
	/* information */
	#information{padding-top: 40px; padding-bottom:120px;}
	#information .infoWrap{padding: 40px;}
	#information .attention{padding: 60px 0;}
	#information .company .logoImg{margin: 60px auto 0 auto;}
	#information .company .copyraight{
		margin: 30px auto 0 auto;
		font-size: .16rem;
	}

	/* footer */
	footer{padding: 60px 0;}

}