/*======================================

	Structure Module

=======================================*/
html,
body {
	width: 100%;
	min-width: 950px;
	height: 100%;
	min-height: 650px;
}
html {
	font-size: 62.5%; /* remの基準となるサイズ｜10px */
	position: relative; /* footerを固定する為に */
}
body {
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	font-size: 1.4rem;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	color: #fff;

	-webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	/*
	導入検討
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: always;
	text-rendering: optimizeLegibility;
	text-align: justify;
	*/
}
.name {
	display: none;
}

.loading {
	position: fixed;
	z-index: 15;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: .8s opacity ease-out 0s,0s z-index .8s;
	background: #fff;
}
.load .loading {
	z-index: -1;
	opacity: 0;
}
.rotate {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -19px 0 0 -19px;
	animation: spin 1s linear infinite;
	border: 5px solid #b3bcc5;
	border-right-color: transparent;
	border-radius: 50%;
}
@keyframes spin {
	0% {
		transform: rotate(0deg);   opacity: .2;
	}
	50% {
		transform: rotate(180deg); opacity: 1.0;
	}
	100% {
		transform: rotate(360deg); opacity: .2;
	}
}
/*======================================

	header

=======================================*/
.header {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: #fff;
}
.logo {
	position: absolute;
	top: 7px;
	left: 10px;
}
.nav {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -254px;
}
.nav ul {
	font-size: 0;
}
.nav li {
	display: inline-block;
	margin: 0 35px;
}
.nav li span {
	display: block;
	padding-bottom: 12px;
	cursor: pointer;
	transition: .6s all ease-out;
	border-bottom: 2px solid #fff;
}
.page_top .nav li:nth-child(1) span {
	border-bottom: 2px solid #000;
}
.page_concept .nav li:nth-child(2) span {
	border-bottom: 2px solid #000;
}
.page_movie .nav li:nth-child(3) span {
	border-bottom: 2px solid #000;
}
.page_lookbook .nav li:nth-child(4) span {
	border-bottom: 2px solid #000;
}
/*======================================

	opening

=======================================*/
.opening {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	transition: .8s all ease-out;
}
.open .opening {
	opacity: 0;
}
.start .opening {
	display: none;
}
.door_wrap {
	position: absolute;
	z-index: 1;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
	min-width: 100%;
	min-height: 100%;
	margin: auto;
}
.door {
	position: absolute;
	z-index: 2;
	top: 43.46%;
	left: 46.52%;
	width: 7.26%;
	height: 26.07%;
	content: "";
	cursor: pointer;
}
/*.knob {
	position: absolute;
	top: 40%;
	left: 46.1%;
	width: 7.84%;
	height: 2%;
	background: url(../img/pct_otd.png) no-repeat left top / 100% auto;
}
.knob img {
	width: 100%;
	height: auto;
}*/
.bg img {
	position: absolute;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
	min-width: 100%;
	min-height: 100%;
	margin: auto;
	z-index: -1;
}
/*======================================

	open

=======================================*/
.door_open {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: .8s opacity ease-out;
	opacity: 0;
	background: url(../img/bg_open.jpg) no-repeat center center / cover;
}
.open .door_open {
	z-index: 2;
	opacity: 1;
}
/*======================================

	top

=======================================*/
.top {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 2.5s opacity ease-out;
	opacity: 0;
	background: url(../img/bg_top.jpg) no-repeat center center / cover;
}
.start .top {
	z-index: 1;
}
.page_top .top {
	z-index: 3;
	opacity: 1;
}
.top h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 518px;
	margin-top: -33px;
	margin-left: -259px;
	padding-top: 50px;
	transition: 1.5s opacity 1s;
	opacity: 0;
}
.page_top .top h2 {
	opacity: 1;
}
/*.top h2 {
	width: 54.4%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -5%;
	margin-left: -27.2%;
	padding-top: 50px;
}*/
/*======================================

	concept

=======================================*/
.concept {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 2.5s opacity ease-out;
	opacity: 0;
	background: url(../img/bg_concept.jpg) no-repeat center center / cover;
}
.start .concept {
	z-index: 1;
}
.page_concept .concept {
	z-index: 4;
	opacity: 1;
}
.concept .inner {
	display: table;
	width: 475px;
	height: 100%;
	margin: 0 auto;
}
.concept_body {
	display: table-cell;
	box-sizing: border-box;
	width: 545px;
	height: 100%;
	padding-top: 50px;
	vertical-align: middle;
}
.concept h3 {
	font-size: 0;
	line-height: 0;
	margin-bottom: 36px;
}
.concept p {
	font-size: 14px;
	line-height: 1.8;
	text-align: justify;
	letter-spacing: .3px;
}
/*======================================

	movie

=======================================*/
.movie {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 2.5s opacity ease-out;
	opacity: 0;
	background: url(../img/bg_movie.jpg) no-repeat center center / cover;
}
.start .movie {
	z-index: 1;
}
.page_movie .movie {
	z-index: 5;
	opacity: 1;
}
.movie .inner {
	display: table;
	width: 600px;
	height: 100%;
	margin: 0 auto;
}
.movie_body {
	display: table-cell;
	box-sizing: border-box;
	height: 100%;
	padding-top: 50px;
	vertical-align: middle;
}
.movie h3 {
	font-size: 0;
	line-height: 0;
	margin-bottom: 30px;
	text-align: center;
}
.movie_player {
	position: relative;
	width: 600px;
}
.movie_player .thumb {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	cursor: pointer;
	transition: .3s opacity ease-out 0s,0s z-index 0s;
	opacity: 1;
}
.movie_player .thumb.now {
	z-index: -1;
	transition: .8s opacity ease-out 0s,0s z-index .8s;
	opacity: 0;
}
.movie_player .thumb img {
	width: 100%;
	height: auto;
}
.movie_player {
	margin-bottom: 30px;
}
/*======================================

	lookbook

=======================================*/
.lookbook {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	transition: 2.5s opacity ease-out;
	opacity: 0;
}
.start .lookbook {
	z-index: 1;
}
.page_lookbook .lookbook {
	z-index: 6;
	opacity: 1;
}
.lookbook .inner {
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	width: 100%;
	height: 600px;
	margin-top: -300px;
}
.lookbook h3 {
	font-size: 0;
	line-height: 0;
	margin-bottom: 30px;
	padding-top: 50px;
	text-align: center;
}

/*.lookbook .inner {
	display: table;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	position: relative;
}
.lookbook_body {
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	position: relative;
}*/
/* 設定 */
.slide_all {
	position: relative;
	width: 720px;
	margin: 0 auto;
}
.slide_wrap {
	position: absolute;
	left: 50%;
	width: 2160px;
	margin-left: -1080px;
}
.slide_body {
	width: 100%;
}
.slide {
	position: relative;
	width: 720px;
}
.slide:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	transition: .8s opacity ease-out;
	background: rgba(233, 233, 233, .7);
}
.active-slide:before {
	opacity: 0;
}
.slide img {
	width: 100%; vertical-align: bottom;
}
/* 装飾 */
.bx-controls-direction,
.bx-pager {
	text-align: center;
}
.bx-controls-direction a,
.bx-pager-item {
	display: inline-block;
}
.btn_prev {
	position: absolute;
	top: 50%;
	left: 15px;
	margin-top: 17px;
	transition: .3s all ease-out;
	opacity: .6;
}
.btn_prev:hover {
	opacity: 1;
}
.btn_next {
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: 17px;
	transition: .3s all ease-out;
	opacity: .6;
}
.btn_next:hover {
	opacity: 1;
}
.slide_control p {
	cursor: pointer;
}

.copyright {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 20;
	opacity: 0;
	transition: 1.2s all ease-out;
}
@media screen and (max-height:720px){
	.page_lookbook .copyright {
		top: 690px;
		height: 26px;
	}
}

.load .copyright {
	opacity: 1;
}