@charset "UTF-8";

/********************************
FACE
********************************/
body#drv_410 #content #face{
	position:relative;
	padding-bottom:30%;
	background:#000;
}
body#drv_410 #content .hidePc{
	display:block;
}
body#drv_410 #content .hideSm{
	display:none;
}
@media only screen and (min-width:415px){
	body#drv_410 #content #face{
		padding:0;
	}
	body#drv_410 #content .hideSm{
		display:block;
	}
	body#drv_410 #content .hidePc{
		display:none;
	}
}

body#drv_410 #content #faceAnim{
	background:#000;
	position:relative;
	overflow:hidden;
	transform:translate(0, -69px);
}
body#drv_410 #content #faceAnim .anim{
	position:absolute;
	z-index:10;
}


/********************************
最初に登場する410
********************************/

/*#first410{
	top:50%;
	left:50%;
	width:40%;
	transform:translate(-41%, -77%);
	text-align:center;
	-webkit-animation: first410 3s ease-out both 1s;
	   -moz-animation: first410 3s ease-out both 1s;
		-ms-animation: first410 3s ease-out both 1s;
			animation: first410 3s ease-out both 1s;
}
@-webkit-keyframes first410 {
	0% {opacity:.7;}
	50% {opacity:.7;}
	100% {opacity:0;}
}
@-moz-keyframes first410{
	0% {opacity:.7;}
	50% {opacity:.7;}
	100% {opacity:0;}
}
@-ms-keyframes first410{
	0% {opacity:.7;}
	50% {opacity:.7;}
	100% {opacity:0;}
}
@keyframes first410 {
	0% {opacity:.7;}
	50% {opacity:.7;}
	100% {opacity:0;}
}*/



/********************************
メカをモチーフにした線画
********************************/
body#drv_410 #content #mechaLine{
	top:50%;
	left:50%;
	width:100%;
	transform:translate(-53.3%, -53.3%);
	transform-origin: center center;
	text-align:center;
	-webkit-animation: mechaLine 8s 1 ease-in-out forwards;
	   -moz-animation: mechaLine 8s 1 ease-in-out forwards;
		-ms-animation: mechaLine 8s 1 ease-in-out forwards;
			animation: mechaLine 8s 1 ease-in-out forwards;
}
@-webkit-keyframes mechaLine {
	0% {-webkit-transform:translate(-53.3%, -53.3%);}
	50% {opacity:1;}
	70%{opacity:1;-webkit-transform:translate(-53.3%, -53.3%);}
	100% {opacity:0;-webkit-transform:translate(-73.3%, -53.3%);}
}
@-moz-keyframes mechaLine {
	0% {-moz-transform:translate(-53.3%, -53.3%);}
	50% {opacity:1;}
	70%{opacity:1;-moz-transform:translate(-53.3%, -53.3%);}
	100% {opacity:0;-moz-transform:translate(-73.3%, -53.3%);}
}
@-ms-keyframes mechaLine {
	0% {-ms-transform:translate(-53.3%, -53.3%);}
	50% {opacity:1;}
	70%{opacity:1;-ms-transform:translate(-53.3%, -53.3%);}
	100% {opacity:0;-ms-transform:translate(-73.3%, -53.3%);}
}
@keyframes mechaLine {
	0% {transform:translate(-53.3%, -53.3%);}
	50% {opacity:1;}
	70%{opacity:1;transform:translate(-53.3%, -53.3%);}
	100% {opacity:0;transform:translate(-73.3%, -53.3%);}
}

/********************************
目がメカになったフクロウ
********************************/
body#drv_410 #content #owlRobot{
	top:50%;
	left:50%;
	width:100%;
	transform:translate(-95%, -55%);
	opacity:0;
	text-align:center;
	-webkit-animation: owlRobot 8s 1 ease-in-out;
	   -moz-animation: owlRobot 8s 1 ease-in-out;
		-ms-animation: owlRobot 8s 1 ease-in-out;
			animation: owlRobot 8s 1 ease-in-out;
	-webkit-animation-fill-mode:forwards;
	   -moz-animation-fill-mode:forwards;
		-ms-animation-fill-mode:forwards;
			animation-fill-mode:forwards;
}
@-webkit-keyframes owlRobot {
	0% {opacity:0;-webkit-transform:translate(-74%, -55%);}
	50%{opacity:0;}
	70% {opacity:1;-webkit-transform:translate(-74%, -55%);}
	100% {opacity:1;-webkit-transform:translate(-95%, -55%);}
}
@-moz-keyframes owlRobot {
	0% {opacity:0;-moz-transform:translate(-74%, -55%);}
	50%{opacity:0;}
	70% {opacity:1;-moz-transform:translate(-74%, -55%);}
	100% {opacity:1;-moz-transform:translate(-95%, -55%);}
}
@-ms-keyframes owlRobot {
	0% {opacity:0;-ms-transform:translate(-74%, -55%);}
	50%{opacity:0;}
	70% {opacity:1;-ms-transform:translate(-74%, -55%);}
	100% {opacity:1;-ms-transform:translate(-95%, -55%);}
}
@keyframes owlRobot {
	0% {opacity:0;transform:translate(-74%, -55%);}
	50%{opacity:0;}
	70% {opacity:1;transform:translate(-74%, -55%);}
	100% {opacity:1;transform:translate(-95%, -55%);}
}


/********************************
序章のテキスト
********************************/
body#drv_410 #content #txDanchigai{
	top:50%;
	left:50%;
	transform:translate(9%,-191%);
	opacity:0;
	width:40%;
	z-index:11;
	text-align:center;
	-webkit-animation: txDanchigai 5s 1 ease-out 1s;
	   -moz-animation: txDanchigai 5s 1 ease-out 1s;
		-ms-animation: txDanchigai 5s 1 ease-out 1s;
			animation: txDanchigai 5s 1 ease-out 1s;
}

@-webkit-keyframes txDanchigai{
	0% {opacity:1;}
	30% {opacity:1;}
	70% {opacity:1;}
	100% {opacity:0;}
}
@-moz-keyframes txDanchigai{
	0% {opacity:1;}
	30% {opacity:1;}
	70% {opacity:1;}
	100% {opacity:0;}
}
@-ms-keyframes txDanchigai{
	0% {opacity:1;}
	30% {opacity:1;}
	70% {opacity:1;}
	100% {opacity:0;}
}
@keyframes txDanchigai {
	0% {opacity:1;}
	30% {opacity:1;}
	70% {opacity:1;}
	100% {opacity:0;}
}


/********************************
序章のテキスト
********************************/
/*
#txPrologue{
	top:50%;
	left:50%;
	transform:translate(97%, -844%);
	opacity:0;
	width:52%;
	z-index:11;
	text-align:center;
	-webkit-animation: txPrologue 5s 1 ease-out 1s;
	   -moz-animation: txPrologue 5s 1 ease-out 1s;
		-ms-animation: txPrologue 5s 1 ease-out 1s;
			animation: txPrologue 5s 1 ease-out 1s;
}

@-webkit-keyframes txPrologue{
	0% {opacity:1;}
	30% {opacity:1;}
	70% {opacity:1;}
	100% {opacity:0;}
}
@-moz-keyframes txPrologue{
	0% {opacity:1;}
	30% {opacity:1;}
	70% {opacity:1;}
	100% {opacity:0;}
}
@-ms-keyframes txPrologue{
	0% {opacity:1;}
	30% {opacity:1;}
	70% {opacity:1;}
	100% {opacity:0;}
}
@keyframes txPrologue {
	0% {opacity:1;}
	30% {opacity:1;}
	70% {opacity:1;}
	100% {opacity:0;}
}

#txPrologue .txParts{
	position:relative;
	width:8%;
}
*/
/********************************
目に色がはいったフクロウ
********************************/
body#drv_410 #content #owlEyeColor{
	top:50%;
	left:50%;
	width:100%;
	transform:translate(-95%, -55%);
	opacity:0;
	text-align:center;
	-webkit-animation: owlEyeColor 6s 1 ease-out 7s;
	   -moz-animation: owlEyeColor 6s 1 ease-out 7s;
		-ms-animation: owlEyeColor 6s 1 ease-out 7s;
			animation: owlEyeColor 6s 1 ease-out 7s;
}

@-webkit-keyframes owlEyeColor {
	0% {opacity:0;}
	60% {opacity:1;}
	100% {opacity:0;}
}
@-moz-keyframes owlEyeColor{
	0% {opacity:0;}
	60% {opacity:1;}
	100% {opacity:0;}
}
@-ms-keyframes owlEyeColor{
	0% {opacity:0;}
	60% {opacity:1;}
	100% {opacity:0;}
}
@keyframes owlEyeColor {
	0% {opacity:0;}
	60% {opacity:1;}
	100% {opacity:0;}
}

/********************************
最終形のフクロウ
********************************/
body#drv_410 #content #owlBgFinal{
	top:50%;
	left:50%;
	width:100%;
	transform:translate(-95%, -55%);
	opacity:0;
	text-align:center;
	-webkit-animation: owlBgFinal 3s 1 ease-out 8s;
	   -moz-animation: owlBgFinal 3s 1 ease-out 8s;
		-ms-animation: owlBgFinal 3s 1 ease-out 8s;
			animation: owlBgFinal 3s 1 ease-out 8s;
	-webkit-animation-fill-mode:forwards;
	   -moz-animation-fill-mode:forwards;
		-ms-animation-fill-mode:forwards;
			animation-fill-mode:forwards;
}
@-webkit-keyframes owlBgFinal{
	0% {opacity:0;}
	100% {opacity:1;}
}
@-moz-keyframes owlBgFinal{
	0% {opacity:0;}
	100% {opacity:1;}
}
@-ms-keyframes owlBgFinal{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes owlBgFinal {
	0% {opacity:0;}
	100% {opacity:1;}
}


/********************************
光
********************************/
body#drv_410 #content #shine{
	top:50%;
	left:50%;
	opacity:0;
	margin:-58% 0px 0px -73%;
	width:100%;
	text-align:center;
	-webkit-animation: shine 2s 1 ease-out 9s;
	   -moz-animation: shine 2s 1 ease-out 9s;
		-ms-animation: shine 2s 1 ease-out 9s;
			animation: shine 2s 1 ease-out 9s;
	-webkit-animation-fill-mode:forwards;
	   -moz-animation-fill-mode:forwards;
		-ms-animation-fill-mode:forwards;
			animation-fill-mode:forwards;
	-webkit-transform-origin:50% 50%;
	   -moz-transform-origin:50% 50%;
		-ms-transform-origin:50% 50%;
			transform-origin:50% 50%;
}

@-webkit-keyframes shine {
	0% {opacity:0; transform:rotate(0);}
	50% {opacity:1;}
	100% {opacity:0;transform:rotate(180deg);}
}
@-moz-keyframes shine {
	0% {opacity:0; transform:rotate(0);}
	50% {opacity:1;}
	100% {opacity:0;transform:rotate(180deg);}
}
@-ms-keyframes shine {
	0% {opacity:0; transform:rotate(0);}
	50% {opacity:1;}
	100% {opacity:0;transform:rotate(180deg);}
}
@keyframes shine {
	0% {opacity:0; transform:rotate(0);}
	50% {opacity:1;}
	100% {opacity:0;transform:rotate(180deg);}
}


body#drv_410 #content #shine02{
	top:50%;
	left:50%;
	opacity:0;
	margin:-58% 0px 0px -73%;
	width:100%;
	text-align:center;
	-webkit-animation: shine02 2s 1 ease-out 10s;
	   -moz-animation: shine02 2s 1 ease-out 10s;
		-ms-animation: shine02 2s 1 ease-out 10s;
			animation: shine02 2s 1 ease-out 10s;
	-webkit-animation-fill-mode:forwards;
	   -moz-animation-fill-mode:forwards;
		-ms-animation-fill-mode:forwards;
			animation-fill-mode:forwards;
	-webkit-transform-origin:50% 50%;
	   -moz-transform-origin:50% 50%;
		-ms-transform-origin:50% 50%;
			transform-origin:50% 50%;
}

@-webkit-keyframes shine02 {
	0% {opacity:0; -webkit-transform:rotate(0) scale(.5,.5);}
	50% {opacity:1;}
	100% {opacity:0;-webkit-transform:rotate(90deg) scale(2,2);}
}
@-moz-keyframes shine02 {
	0% {opacity:0; -moz-transform:rotate(0) scale(.5,.5);}
	50% {opacity:1;}
	100% {opacity:0;-moz-transform:rotate(90deg) scale(2,2);}
}
@-ms-keyframes shine02 {
	0% {opacity:0; -ms-transform:rotate(0) scale(.5,.5);}
	50% {opacity:1;}
	100% {opacity:0;-ms-transform:rotate(90deg) scale(2,2);}
}
@keyframes shine02 {
	0% {opacity:0; transform:rotate(0) scale(.5,.5);}
	50% {opacity:1;}
	100% {opacity:0;transform:rotate(90deg) scale(2,2);}
}


/********************************
キャッチコピー
********************************/
body#drv_410 #content #txCatch{
	top:40%;
	left:45%;
	transform:translate(0, -52%);
	width:52%;
	z-index:200;
	text-align:center;
}
body#drv_410 #content #txCatch .txParts{
	position:relative;
	opacity:0;
}
body#drv_410 #content .anim img {
    display: block;
    margin: 2% auto;
}
body#drv_410 #content #safety {
	width:25%;	
	}
body#drv_410 #content #and {
	width:13%;
	clear:both;
	}
body#drv_410 #content #high-definition {
	width:60%;
	clear:both;
	margin-top:5%;
	}



body#drv_410 #content #txCatch #safety {
	-webkit-animation: safety .1s 1 linear 10s forwards;
	   -moz-animation: safety .1s 1 linear 10s forwards;
	    -ms-animation: safety .1s 1 linear 10s forwards;
	        animation: safety .1s 1 linear 10s forwards;
}
@-webkit-keyframes safety {0% {opacity:0;} 100% {opacity:1;}}
@-moz-keyframes safety    {0% {opacity:0;} 100% {opacity:1;}}
@-ms-keyframes safety     {0% {opacity:0;} 100% {opacity:1;}}
@keyframes safety         {0% {opacity:0;} 100% {opacity:1;}}

body#drv_410 #content #txCatch #and {
	-webkit-animation: and .1s 1 linear 10.4s forwards;
	-moz-animation: and .1s 1 linear 10.4s forwards;
	-ms-animation: and .1s 1 linear 10.4s forwards;
	animation: and .1s 1 linear 10.4s forwards;
}
@-webkit-keyframes and {0% {opacity:0;}100% {opacity:1;}}
@-moz-keyframes and {0% {opacity:0;}100% {opacity:1;}}
@-ms-keyframes and {0% {opacity:0;}100% {opacity:1;}}
@keyframes and {0% {opacity:0;}100% {opacity:1;}}

body#drv_410 #content #txCatch #high-definition  {
	-webkit-animation: high- .1s 1 linear 10.8s forwards;
	-moz-animation: high- .1s 1 linear 10.8s forwards;
	-ms-animation: high- .1s 1 linear 10.8s forwards;
	animation: high- .1s 1 linear 10.8s forwards;
}
@-webkit-keyframes high- {0% {opacity:0;}100% {opacity:1;}}
@-moz-keyframes high- {0% {opacity:0;}100% {opacity:1;}}
@-ms-keyframes high- {0% {opacity:0;}100% {opacity:1;}}
@keyframes high- {0% {opacity:0;}100% {opacity:1;}}




/********************************
フルハイビジョンのロゴとテキスト
********************************/
body#drv_410 #content #txFullHiVision{
	top:50%;
	left:46%;
	transform:translate(116%, 173%);
	opacity:0;
	width:15%;
	color:#fff;
	font-size:50px;
	text-align:center;
	-webkit-animation: txFullHiVision 1s 1 ease-out 12s;
	   -moz-animation: txFullHiVision 1s 1 ease-out 12s;
		-ms-animation: txFullHiVision 1s 1 ease-out 12s;
			animation: txFullHiVision 1s 1 ease-out 12s;
	-webkit-animation-fill-mode:forwards;
	   -moz-animation-fill-mode:forwards;
		-ms-animation-fill-mode:forwards;
			animation-fill-mode:forwards;
}

@-webkit-keyframes txFullHiVision{
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:1;}
}
@-moz-keyframes txFullHiVision{
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:1;}
}
@-ms-keyframes txFullHiVision{
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:1;}
}
@keyframes txFullHiVision {
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:1;}
}


/********************************
ベースの黒地
********************************/
body#drv_410 #content #animBase{
	width:100%;
	opacity:1;
	text-align:center;
}

/*FOR IE8/9*/
body#drv_410 #content #first410,
body#drv_410 #content #mechaLine,
body#drv_410 #content #owlRobot,
body#drv_410 #content #txDanchigai,
body#drv_410 #content #owlEyeColor,
body#drv_410 #content #shine,
body#drv_410 #content #shine02,
body#drv_410 #content #first410:not(:target),
body#drv_410 #content #mechaLine:not(:target),
body#drv_410 #content #owlRobot:not(:target),
body#drv_410 #content #txDanchigai:not(:target),
body#drv_410 #content #owlEyeColor:not(:target),
body#drv_410 #content #shine:not(:target),
body#drv_410 #content #shine02:not(:target){
	display:none\9;
}

body#drv_410 #content #owlBgFinal,
body#drv_410 #content #txFullHiVision,
body#drv_410 #content #txCatch,
body#drv_410 #content #txCatch .txParts,
body#drv_410 #content #owlBgFinal:not(:target),
body#drv_410 #content #txFullHiVision:not(:target),
body#drv_410 #content #txCatch:not(:target),
body#drv_410 #content #txCatch .txParts:not(:target){
	opacity:1\9;
}