@charset "utf-8";

/*
******************************************************************
* top.css
******************************************************************
*/
body {
	min-width: 1366px;
	min-height: 920px;
}

#wrp-all {
	overflow: hidden;
	position: relative;
	min-width: 1366px;
	min-height: 920px;
	height: 920px;
}
.device-sp #wrp-all {
	min-height: 0;
	height: 920px;
}

/*
******************************************************************
* #contents
******************************************************************/
#bg-white {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 999;
}
#bg-main {
	position: fixed;
	background: url(../img/bg_01.png) no-repeat top center;
	background-size: cover;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.device-sp #bg-main {
	background-size: 100%;
}
#bg-main02 {
	position: absolute;
	background: url(../img/bg_02.png) no-repeat bottom left;
	background-size: 100%;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	z-index: 1;
	transition: all 0.8s ease-out;
	-webkit-transition: all 0.8s ease-out;
}
#bg-main02.action {
	opacity: 1;
}
#contents {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

#contents h1 {
	opacity: 0;
	position: absolute;
	top: 3%;
	left: 50%;
	z-index: 2;
	height: 100%;
	margin: 0 0 0 -6%;
}
#contents h1:not(:target) {
  opacity: 1\9;/*IE9用*/
}
#contents h1 img {
	width: auto;
	height: 38.44%;
}
#contents.action h1 {
	/*animation*/
	animation-name: title-anime;
	animation-duration: 0.4s;
	animation-timing-function: ease-in-out;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	/*Firefox*/
	-moz-animation-name: title-anime;
	-moz-animation-duration: 0.4s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-delay: 0.8s;
	-moz-animation-fill-mode: forwards;
	/*Chrome Safari*/
	-webkit-animation-name: title-anime;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 0.8s;
	-webkit-animation-fill-mode: forwards;
	/*Opera*/
	-o-animation-name: title-anime;
	-o-animation-duration: 0.4s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-delay: 0.8s;
	-o-animation-fill-mode: forwards;
	/*IE*/
	-ms-animation-name: title-anime;
	-ms-animation-duration: 0.4s;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-delay: 0.8s;
	-ms-animation-fill-mode: forwards;

}
@keyframes title-anime {
	0% {transform:scale3d(3,3,3);}
	70% {transform:scale3d(0.6,0.6,0.6);}
	100% {opacity: 1;transform:scale3d(1,1,1);}
}
@-moz-keyframes title-anime {
	0% {transform:scale3d(3,3,3);}
	70% {transform:scale3d(0.6,0.6,0.6);}
	100% {opacity: 1;transform:scale3d(1,1,1);}
}
@-webkit-keyframes title-anime {
	0% {transform:scale3d(3,3,3);}
	70% {transform:scale3d(0.6,0.6,0.6);}
	100% {opacity: 1;transform:scale3d(1,1,1);}
}
@-o-keyframes title-anime {
	0% {transform:scale3d(3,3,3);}
	70% {transform:scale3d(0.6,0.6,0.6);}
	100% {opacity: 1;transform:scale3d(1,1,1);}
}
@-ms-keyframes title-anime {
	0% {transform:scale3d(3,3,3);}
	70% {transform:scale3d(0.6,0.6,0.6);}
	100% {opacity: 1;transform:scale3d(1,1,1);}
}

#contents .btn {
	opacity: 0;
	position: absolute;
	bottom: 85px;
	right: 276px;
	width: 286px;
	height: 183px;
	transition: all 0.5s ease-out 0.5s;
	-webkit-transition: all 0.5s ease-out 0.5s;
}
#contents .btn a {
	display: block;
	overflow: hidden;
	position: relative;
	width: 286px;
	height: 183px;
	border: 2px solid #13ddec;
	box-sizing: border-box;
}
#contents .btn a:before,
#contents .btn a:after {
	display: block;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	box-shadow:0px 0px 25px 1px #13ddec inset;
	content: '';
	transition: ease 0.2s;
	-webkit-transition: ease 0.2s;
}
#contents .btn a:after {
	/*animation*/
	animation-name: machine-anime;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	/*Firefox*/
	-moz-animation-name: machine-anime;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-delay: 3s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	/*Chrome Safari*/
	-webkit-animation-name: machine-anime;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	/*Opera*/
	-o-animation-name: machine-anime;
	-o-animation-duration: 4s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-delay: 3s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	/*IE*/
	-ms-animation-name: machine-anime;
	-ms-animation-duration: 4s;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-delay: 3s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: normal;
}
#contents .btn a:hover:before {
	opacity: 1;
}
#contents .btn a .pm-flame {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}
#contents .btn a .pm-capture {
	display: block;
}
#contents .btn a .pm-capture img {
	transition: ease 0.2s;
	-webkit-transition: ease 0.2s;
}
#contents .btn a:hover .pm-capture img {
	transform:scale3d(1.2,1.2,1.2);
	-webkit-transform:scale3d(1.2,1.2,1.2);
}

@keyframes machine-anime {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes machine-anime {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes machine-anime {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
@-o-keyframes machine-anime {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
@-ms-keyframes machine-anime {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
#contents .machine {
	opacity: 0;
	position: relative;
	float: right;
	width: 259px;
	transition: all 0.5s ease-out 0.5s;
	-webkit-transition: all 0.5s ease-out 0.5s;
}
#contents .machine:after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/machine_glow.png) no-repeat 0 0;
	background-size: 100%;
	content: '';
	/*animation*/
	animation-name: machine-anime;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	/*Firefox*/
	-moz-animation-name: machine-anime;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-delay: 3s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	/*Chrome Safari*/
	-webkit-animation-name: machine-anime;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	/*Opera*/
	-o-animation-name: machine-anime;
	-o-animation-duration: 4s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-delay: 3s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	/*IE*/
	-ms-animation-name: machine-anime;
	-ms-animation-duration: 4s;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-delay: 3s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: normal;
}

#contents .machine img {
	opacity: 0;
	width: 259px;
	transition: ease 1.0s;
	-webkit-transition: ease 1.0s;
}

#contents.action .btn,
#contents.action .machine,
#contents.action .machine img,
#contents.action .banner_box {
	opacity: 1;
}

.cara {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-right: -1%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transform: translate(-250px,0);
	-webkit-transform: translate(-250px,0);
}
.cara img {
	position: absolute;
	right: 0;
	bottom: 0;
	width: auto;
	height: 97.5%;
}
.action .cara {
	opacity: 1;
	transform:translate(0,0);
	-webkit-transform:translate(0,0);
}

.det_box {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 30px;
	z-index: 2;
/*	height: 540px;*/
}
.det_inner {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}
.banner_box {
	opacity: 0;
	width: 1000px;
	margin: 0 auto;
	padding: 0 35px 15px;
	text-align: right;
	box-sizing: border-box;
	transition: all 0.5s ease-out 0.5s;
	-webkit-transition: all 0.5s ease-out 0.5s;
}
.banner_box a {
	display: inline-block;
}
.banner_box a + a {
	margin-left: 20px;
}

/*
******************************************************************
* .modal-video
******************************************************************/
.modal-video {
    background-color: rgba(0,0,0,0.8);
}
.modal-video-movie-wrap {
    margin-top: 56px;
}
.modal-video-close-btn {
	display: block;
	position: absolute;
	top: -56px;
	right: 0;
	z-index: 2;
	width: 179px;
	height: 50px;
	text-indent: -9999px;
	background: url(../img/v_close.png) no-repeat top 0 left 0;
	background-size: 100%;
	cursor: pointer;
}
.modal-video-close-btn:hover {
	background-position: top -50px left 0;
}

.modal-video-close-btn:hover:not(:target) {
	background-position: top -51px left 0\9;/*IE9用*/
}

.modal-video-close-btn:before,
.modal-video-close-btn:after {
	content: none;
}

/*
******************************************************************
* sns_btn
******************************************************************/
#contents .sns_btn {
	display: block;
	position: absolute;
	bottom: 32px;
	right: 276px;
	opacity: 0;
	transition: all 0.5s ease-out 0.5s;
	-webkit-transition: all 0.5s ease-out 0.5s;
	z-index: 10;
	text-align: right;
	box-sizing: border-box;
}
#contents.action .sns_btn {
	opacity: 1;
}
#contents .sns_btn ul {
	display: inline-block;
}
#contents .sns_btn ul li {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
}