#top_gimmick{
	position : absolute; width : 790px; height : 349px;
	background-color : #000000; color : #ffffff;
	overflow : hidden;
}
#top_gimmick *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin : 0px; padding : 0px; border : 0px;
}
/*** 
*
*  Layer
*
***/
#top_gimmick > *[name^="layer"]{
	display : none; position : absolute;
	top : 0px; left : 0px; height : 100%; width : 100%;
	overflow : hidden; 
}
#top_gimmick > [name="layer_wait"]{
	display : block;
	padding : 15px;
}
#top_gimmick > [name="layer_no_support"]{
	padding : 15px;
}
#top_gimmick > [name="layer_white"]{
	background-color : #ffffff;
	z-index : 999;
}
#top_gimmick > [name="layer_black"]{
	background-color : #000000;
	z-index : 999;
}
#top_gimmick > [name="layer_flont"]{
	z-index : 998;
}
#top_gimmick > [name="layer_flont"] [name^="element"]{
	display : none;
}
/*** 
*
*  Side botton
*
***/
#top_gimmick > [name="layer_flont"] [name="element_btn"]{
	display : block; position : absolute;
	top : 50%; right : 25px; width : 8px; height : 115px;
	margin-top : -58px;
}
#top_gimmick > [name="layer_flont"] [name="element_btn"] > div {
	width : 8px; height : 8px;
	padding : 15px 0px;
	background-repeat: no-repeat;
	background-image : url(../images/index/gimmick/maru.png);
	-moz-background-size:8px 8px;
	background-size:8px 8px;
	cursor : pointer;
}
#top_gimmick > [name="layer_flont"] [name="element_btn"] > div.on{
	background-image : url(../images/index/gimmick/maru_active.png);
}
#top_gimmick > [name="layer_flont"] [name="element_btn"] > div:hover{
	background-image : url(../images/index/gimmick/maru_active.png);
}
/*** 
*
*  Scroll botton
*
***/
#top_gimmick > [name="layer_flont"] [name="element_scroll"]{
	position : absolute ; width : 140px;
	margin-left : -70px; bottom : 0px; left : 50%; 
}
#top_gimmick > [name="layer_flont"] [name="scroll_btn"]{
	position : relative; width : 37px; height : 27px; left : 70px;
	margin-left : -19px;
	background-repeat: no-repeat;
	background-image : url(../images/index/gimmick/gimic_scroll.png);
	-moz-background-size:37px 18px;
	background-size:37px 18px;
}
/* //--- scroll btn class --- */
#top_gimmick > [name="layer_flont"] [name="scroll_btn"].up{
	-moz-transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
#top_gimmick > [name="layer_flont"] [name="scroll_btn"].down{
	-moz-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
/* --- scroll btn class// --- */
/* //--- scroll btn animation --- */
#top_gimmick > [name="layer_flont"] [name="scroll_btn"].animation_move{
	-webkit-animation-name: scroll_btn_animetion_move;
	-webkit-animation-duration: 1000ms;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: scroll_btn_animetion_move;
	-moz-animation-duration: 1000ms;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	-ms-animation-name: scroll_btn_animetion_move;
	-ms-animation-duration: 1000ms;
	-ms-animation-timing-function: linear;
	-ms-animation-iteration-count: infinite;
	
	-o-animation-name: scroll_btn_animetion_move;
	-o-animation-duration: 1000ms;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite;
	
	animation-name: scroll_btn_animetion_move;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count : infinite;
}
@-webkit-keyframes scroll_btn_animetion_move {
	0%  { background-position: 0px 0px; -webkit-opacity: 0; }
	100%{ background-position: 0px 9px; -webkit-opacity: 1; }
}
@-moz-keyframes scroll_btn_animetion_move{
	0%  { background-position: 0px 0px; -moz-opacity: 1; /* Firefox 1.5以下, Netscape */ }
	100%{ background-position: 9px; -moz-opacity: 0; /* Firefox 1.5以下, Netscape */ }
}
@-ms-keyframes scroll_btn_animetion_move {
	0%  { background-position: 0px 0px;-ms-filter: "alpha(opacity=1)"; /* IE 8 */ -ms-filter: "alpha(opacity=1)"; /* IE 8 */ }
	100%{ background-position: 0px 9px; -ms-filter: "alpha(opacity=0)"; /* IE 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */}
}
@-o-keyframes scroll_btn_animetion_move {
	0%  { background-position: 0px 0px; opacity: 1; /* Standard: Firefox 1.5以上, Opera, Safari */}
	100%{ background-position: 0px 9px; opacity: 0; /* Standard: Firefox 1.5以上, Opera, Safari */ }
}
@keyframes scroll_btn_animetion_move {
	0%  { background-position: 0px 0px; opacity: 1; /* Standard: Firefox 1.5以上, Opera, Safari */ }
	100%{ background-position: 0px 9px; opacity: 0; /* Standard: Firefox 1.5以上, Opera, Safari */ }
}
/* --- scroll btn animation//--- */
#top_gimmick > [name="layer_flont"] [name="scroll_text"]{
	position : relative; width : 116px; height : 11px; left : 70px;
	margin-left : -58px;
	margin-top : 6px;
	margin-bottom : 10px;
	background-repeat: no-repeat;
	background-image : url(../images/index/gimmick/scroll_text.png);
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
/*** 
*
*  Top
*
***/
#top_gimmick > [name="layer_flont"] [name="element_top"]{
	position : absolute; width : 100%; height : 100%;
	display : block;
}
#top_gimmick > [name="layer_flont"] [name="element_top"] > * {
	position : absolute; display : block;
}
#top_gimmick > [name="layer_flont"] [name="element_top"] [name="element_logo"]{
	width : 178px; height : 79px;
	margin-top : -45px; margin-left : -82px; top : 50%; left : 50%;
	background-repeat: no-repeat;
	background-image : url(../images/index/gimmick/logo.png);
	-moz-background-size:100% 100%;
	background-size:100% 100%;	
}
/* --- logo class ---// */
#top_gimmick > [name="layer_flont"] [name="element_top"] [name="element_logo"].out_fream{
	width : 3382px; height : 1501px;
	margin-left : -1690px; margin-top : -900px;
}
/* --- logo class ---// */
/* //--- logo animation --- */
#top_gimmick > [name="layer_flont"] [name="element_top"] [name="element_logo"].animation_out_fream{
	-webkit-transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
	-moz-transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
	-ms-transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
	-o-transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
	transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
/* --- logo animation ---//*/
#top_gimmick > [name="layer_flont"] [name="element_top"] [name="element_card"]{
	position : absolute; display : block;
	width : 790px; height : 349px; left : 395px; top : 175px;
	margin-left : -395px;  margin-top : -175px; 
	border-style : solid;
	border-color : transparent;
	border-width : 30px 15px 0px 15px;
	/* 225 * 3 = 675, 675 + 20 */
}
#top_gimmick > [name="layer_flont"] [name="element_top"] [name="element_card"] > [name="1"]{
	position : absolute; width : 100%; height : 100%;
	background-repeat: no-repeat;
	background-image : url(../images/index/gimmick/card_a.png);
	-moz-background-size:contain;
	background-size:contain;	
}
#top_gimmick > [name="layer_flont"] [name="element_top"] [name="element_card"] > [name="2"]{
	position : absolute; width : 100%; height : 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image : url(../images/index/gimmick/card_b.png);
	-moz-background-size:contain;
	background-size:contain;	
}
#top_gimmick > [name="layer_flont"] [name="element_top"] [name="element_card"] > [name="3"]{
	position : absolute; width : 100%; height : 100%;
	background-repeat: no-repeat;
	background-position: right;
	background-image : url(../images/index/gimmick/card_c.png);
	-moz-background-size:contain;
	background-size:contain;
}
/* //--- card class --- */
#top_gimmick > [name="layer_flont"] [name="element_top"] [name="element_card"].out_fream{
	width : 3160px ; height : 1396px;
	margin-left : -1580px; margin-top : -698px;
}
/* --- card class ---// */
/* //--- card animation --- */
#top_gimmick > [name="layer_flont"] [name="element_top"] [name="element_card"].animation_out_fream{
	-webkit-transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
	-moz-transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
	-ms-transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
	-o-transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
	transition:all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
/* --- card animation ---//*/
/*** 
*
*  Text
*
***/
#top_gimmick > [name="layer_flont"] [name="element_text"]{
	position : absolute; top : 50%; left : 35px;
	padding : 16px 18px 16px 18px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-o-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	overflow : hidden;
	cursor : pointer;
}
/* //--- text class --- */
#top_gimmick > [name="layer_flont"] [name="element_text"].text_1{
	width : 395px; height : 104px; margin-top : -52px; padding-right : 27px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"].text_2{
	width : 318px; height : 104px; margin-top : -52px; padding-right : 27px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"].text_3{
	width : 343px; height : 104px; margin-top : -52px; padding-right : 30px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"].text_4{
	width : 378px; height : 104px; margin-top : -52px;
}
/* --- text class ---// */
/* //--- effect --- */
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="effect_line_1"]{
	display : none; position : absolute ; width : 0px; height : 0px; top : 0px; left : 0px;
	border-top : solid 2px #ffffff; border-right : solid 2px #ffffff;
	z-index : 1;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="effect_line_2"]{
	display : none; position : absolute ; width : 0px; height : 0px; bottom : 0px; right : 0px;
	border-bottom : solid 2px #ffffff; border-left : solid 2px #ffffff;
	z-index : 1;
}
/* --- effect ---// */
/* //--- effect class --- */
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name^="effect_line"].hide{
	width : 0px; height : 0px;
	opacity: 0; /* Standard: Firefox 1.5以上, Opera, Safari */
	filter: alpha(opacity=0); /* IE 8以下 */
	-ms-filter: "alpha(opacity=0)"; /* IE 8 */
	-khtml-opacity: 0; /* Safari 1.x */
	-moz-opacity: 0; /* Firefox 1.5以下, Netscape */
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name^="effect_line"].show{
	width : 100%; height : 100%;
	opacity: 1; /* Standard: Firefox 1.5以上, Opera, Safari */
	filter: alpha(opacity=1); /* IE 8以下 */
	-ms-filter: "alpha(opacity=1)"; /* IE 8 */
	-khtml-opacity: 1; /* Safari 1.x */
	-moz-opacity: 1; /* Firefox 1.5以下, Netscape */
}
/* --- effect class ---// */
/* //--- effect animation --- */
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name^="effect_line"].animation_show_line{
	-webkit-transition:width 95ms linear, height 75ms linear 95ms;
	-moz-transition:width 95ms linear, height 75ms linear 95ms;
	-ms-transition:width 95ms linear, height 75ms linear 95ms;
	-o-transition:width 15ms linear, height 75ms linear 95ms;
	transition:width 95ms linear, height 75ms linear 95ms;
}
/* --- effect animation ---//*/
/* //--- arrow --- */
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_arrow"]{
	position : absolute; width : 25px; height : 28px;
	background-repeat: no-repeat;
	background-image : url(../images/index/gimmick/text_arrow.png);
	-moz-background-size:25px 28px;
	background-size:25px 28px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"].text_1 > [name="element_arrow"]{
	top : 20px; left : 396px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"].text_2 > [name="element_arrow"]{
	top : 18px; left : 318px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"].text_3 > [name="element_arrow"]{
	top : 19px; left : 348px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"].text_4 > [name="element_arrow"]{
	top : 19px; left : 260px;
}
/* --- arrow ---// */
/* //--- arrow class --- */
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_arrow"].end{
	right : 18px;
	opacity: 1; /* Standard: Firefox 1.5以上, Opera, Safari */
	filter: alpha(opacity=1); /* IE 8以下 */
	-ms-filter: "alpha(opacity=1)"; /* IE 8 */
	-khtml-opacity: 1; /* Safari 1.x */
	-moz-opacity: 1; /* Firefox 1.5以下, Netscape */
}
/* --- arrow class ---// */
/* //--- arrow animation --- */
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_arrow"].animation_move{
	-webkit-animation-name: arrow_animetion_move;
	-webkit-animation-duration: 800ms;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;

	-moz-animation-name: arrow_animetion_move;
	-moz-animation-duration: 800ms;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: 1;

	-ms-animation-name: arrow_animetion_move;
	-ms-animation-duration: 800ms;
	-ms-animation-timing-function: linear;
	-ms-animation-iteration-count: 1;
	
	-o-animation-name: arrow_animetion_move;
	-o-animation-duration: 800ms;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: 1;
	
	animation-name: arrow_animetion_move;
	animation-duration: 800ms;
	animation-timing-function: linear;
	animation-iteration-count : 1;
}
@-webkit-keyframes arrow_animetion_move {
	0%  { -webkit-opacity: 0; }
	100%{ -webkit-opacity: 1; }
}
@-moz-keyframes arrow_animetion_move{
	0%  { -moz-opacity: 1; /* Firefox 1.5以下, Netscape */ }
	100%{ -moz-opacity: 0; /* Firefox 1.5以下, Netscape */ }
}
@-ms-keyframes arrow_animetion_move {
	0%  { -ms-filter: "alpha(opacity=1)"; /* IE 8 */ -ms-filter: "alpha(opacity=1)"; /* IE 8 */ }
	100%{ -ms-filter: "alpha(opacity=0)"; /* IE 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */}
}
@-o-keyframes arrow_animetion_move {
	0%  { opacity: 1; /* Standard: Firefox 1.5以上, Opera, Safari */}
	100%{ opacity: 0; /* Standard: Firefox 1.5以上, Opera, Safari */ }
}
@keyframes arrow_animetion_move {
	0%  { opacity: 1; /* Standard: Firefox 1.5以上, Opera, Safari */ }
	100%{ opacity: 0; /* Standard: Firefox 1.5以上, Opera, Safari */ }
}
/* --- arrow animation ---// */
/* //--- strings --- */
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] {
	position : absolute; width : 100%; height : 100%;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] *{
	display : none; 
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > *{
	position : absolute; width : 100%; height : 100%;
	background-repeat: no-repeat;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name="1"] > *{
	background-image : url(../images/index/gimmick/text_a.png);
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name="2"] > *{
	background-image : url(../images/index/gimmick/text_b.png);
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name="3"] > *{
	background-image : url(../images/index/gimmick/text_c.png);
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name="4"] > *{
	background-image : url(../images/index/gimmick/text_d.png);
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name]{
	position : absolute; width : 100%;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name$="-1"]{
	background-position : 0px 0px;
	height : 39px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name$="-2"]{
	background-position : 0px -39px;
	height : 33px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name$="-3"]{
	background-position : 0px -72px;
	height : 32px;
}
/* //--- strings --- */
/* //--- string class --- */
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name].hide{
	opacity: 0; /* Standard: Firefox 1.5以上, Opera, Safari */
	filter: alpha(opacity=0); /* IE 8以下 */
	-ms-filter: "alpha(opacity=0)"; /* IE 8 */
	-khtml-opacity: 0; /* Safari 1.x */
	-moz-opacity: 0; /* Firefox 1.5以下, Netscape */
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name$="-1"].hide{
	display : block; top : 10px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name$="-2"].hide{
	display : block; top : 45px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name$="-3"].hide{
	display : block; top : 79px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name].show{
	opacity: 1; /* Standard: Firefox 1.5以上, Opera, Safari */
	filter: alpha(opacity=1); /* IE 8以下 */
	-ms-filter: "alpha(opacity=1)"; /* IE 8 */
	-khtml-opacity: 1; /* Safari 1.x */
	-moz-opacity: 1; /* Firefox 1.5以下, Netscape */
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name$="-1"].show{
	display : block; top : 0px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name$="-2"].show{
	display : block; top : 39px;
}
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name$="-3"].show{
	display : block; top : 72px;
}
/* --- string class ---// */
/* //--- string animation --- */
#top_gimmick > [name="layer_flont"] [name="element_text"] > [name="element_strings"] > [name] > [name].animation_show_text{
	-webkit-transition:all 350ms ease-out;
	-moz-transition:all 350ms ease-out;
	-ms-transition:all 350ms ease-out;
	-o-transition:all 350ms ease-out;
	transition:all 350ms ease-out;
}
/* --- string animation ---// */
/*** 
*
*  Circle
*
***/
#top_gimmick > [name="layer_flont"] [name="element_circle"]{
	position : absolute; width : 548px; height : 534px;
	background-image : url(../images/index/gimmick/circle_base.png);
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}
#top_gimmick > [name="layer_flont"] [name="element_circle"] > * {
	display : none;
}
#top_gimmick > [name="layer_flont"] [name="element_circle"] > [name="1"]{
	position : absolute;
	background-image : url(../images/index/gimmick/circle_a.png);
	-moz-background-size:100% 100%;
	background-size:100% 100%;
	width : 100%;
	height : 100%;
}
#top_gimmick > [name="layer_flont"] [name="element_circle"] > [name="2"]{
	position : absolute;
	background-image : url(../images/index/gimmick/circle_b.png);
	-moz-background-size:100% 100%;
	background-size:100% 100%;
	width : 100%;
	height : 100%;
}
#top_gimmick > [name="layer_flont"] [name="element_circle"] > [name="3"]{
	position : absolute;
	background-image : url(../images/index/gimmick/circle_c.png);
	-moz-background-size:100% 100%;
	background-size:100% 100%;
	width : 100%;
	height : 100%;
}
#top_gimmick > [name="layer_flont"] [name="element_circle"] > [name="4"]{
	position : absolute;
	background-image : url(../images/index/gimmick/circle_d.png);
	-moz-background-size:100% 100%;
	background-size:100% 100%;
	width : 100%;
	height : 100%;
}
/*** 
*
*  Background
*
***/
#top_gimmick > [name="layer_background_01"]{
	background-image : url(../images/index/gimmick/bg_red.jpg);
}
#top_gimmick > [name="layer_background_02"]{
	background-image : url(../images/index/gimmick/scene_a.jpg);
}
#top_gimmick > [name="layer_background_03"]{
	background-image : url(../images/index/gimmick/scene_b.jpg);
}
#top_gimmick > [name="layer_background_04"]{
	background-image : url(../images/index/gimmick/scene_c.jpg);
}
#top_gimmick > [name="layer_background_05"]{
	background-image : url(../images/index/gimmick/scene_d.jpg);
}