@charset "utf-8";

/*
******************************************************************
* MJP common.css
******************************************************************
*/
.comingsoon { opacity: 0.2;}

#loading {
	background: #000;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: table;
	text-align: center;
}
#loading .bg {
	display: table-cell;
	vertical-align: middle;
}

html {
	background: #000;
}
body {
	min-width: 1086px;
	min-height: 930px;
	height: 100%;
}

.fl { float: left;}
.fr { float: right;}

#wrp-all {
	position: relative;
}

.bgImg {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	min-width: 1400px;
	z-index: 0;
}

#border-fix {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
}

.border1,
.border2,
.border3,
.border4,
.border5,
.border6 {
	background-color: #1ee6c6;
	display: block;
	position: fixed;
	z-index: 10;
}

.border4,
.border5,
.border6{
	background-color: #9292f7;
}
.border1 {
	width: 28px;
	height: 0;
	left: 0;
	bottom: 50.322%;
}
.border2 {
	width: 0;
	height: 28px;
	left: 0;
	top: 0;
}
.border3 {
	width: 28px;
	height: 0;
	right: 0;
	top: 0%;
}
.border4 {
	width: 28px;
	height: 0%;
	right: 0;
	top: 50.322%;
}
.border5 {
	width: 0;
	height: 28px;
	right: 0;
	bottom: 0;
}
.border6 {
	width: 28px;
	height: 0;
	left: 0;
	bottom: 0%;
}

header {
	position: fixed;
	width: 1000px;
	top: 57px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}
header:after {
	content: "";
	display: block;
	clear: both;
}
header div {
	opacity: 0;
	float: left;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
header div a:hover {
	opacity: 0.7
}
header div.show {
	opacity: 1;
}
header nav {
	opacity: 0;
	float: right;
	display: inline-block;
	margin-top: 32px;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
header nav.show {
	opacity: 1;
}
header nav ul li {
	display: inline-block;
	vertical-align: middle;
	margin-left: 20px;
}
.sns__btn {
	float: none;
	position: absolute;
	right: 0;
	bottom: -30px;
	z-index: 1;
}
.sns__btn div {
	opacity: 1;
}
.sns__btn li {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
}

#first-view {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
#first-view h1 img {
	opacity: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	z-index: 2;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#first-view h1 img.show {
	opacity: 1;
}
#first-view .cara img {
	opacity: 0;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#first-view .cara img.show {
	opacity: 1;
}
#first-view .catch img {
	opacity: 0;
	position: absolute;
	left: 48px;
	bottom: 68px;
	z-index: 1;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#first-view .catch img.show {
	opacity: 1;
}
#first-view .scroll-btn {
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 88px;
	margin: auto;
	text-align: center;
	z-index: 2;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#first-view .scroll-btn.show {
	opacity: 1;
}
#first-view .scroll-btn a {
	display: inline-block;
}
#first-view .scroll-btn a .txt {
	margin-bottom: 12px;
}
@-moz-keyframes arrowAnime {
	0% {top:0;}
	100% {top:10px;opacity: 0;}
}
@-webkit-keyframes arrowAnime {
	0% {top:0;}
	100% {top:10px;opacity: 0;}
}
#first-view .scroll-btn a .arrow {
	position: relative;
	-moz-animation-name: arrowAnime;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-name: arrowAnime;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
#first-view .scroll-btn a:hover .arrow {
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}


#contents {
	position: relative;
	text-align: center;
	z-index: 1;
}
#contents .inner {
	width: 1000px;
	margin: 0 auto;
}
#contents .next-btn {
	margin: 135px 0 115px;
}
#contents .next-btn a:hover {
	opacity: 0.7;
}


footer {
	position: relative;
	margin: 0 auto;
	width: 1000px;
	padding-bottom: 80px;
	z-index: 1;
}
small {
	font-size: 12px;
	color: #ffffff;
	line-height: 21px;
}

/*
******************************************************************
* utility
******************************************************************/
/* hover すると色相回転 */
.hover-hue {
	-webkit-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}
.hover-hue:hover {
	-webkit-filter: hue-rotate(-30deg);
	-moz-filter: hue-rotate(-30deg);
	-o-filter: hue-rotate(-30deg);
	-ms-filter: hue-rotate(-30deg);
	filter: hue-rotate(-30deg);
}

/* 要素アクション */
*[data-sf] {
	opacity: 0;
}
*[data-sf="toggle"] {
	opacity: 1;
}