@charset "UTF-8";

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
CSS information

style_sp.css
スマートフォン用のスタイル記述


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


html, body {
height : 100% ;
}
body {
margin : 0 ;
padding : 0 ;
position: relative ;
min-width : 281px ;
min-height : 142px ;
background-color : #bdbdbd ;
-webkit-animation : bg_body 10s ease 0s normal 1 forwards ;
-ms-animation : bg_body 10s ease 0s normal 1 forwards ;
-moz-animation : bg_body 10s ease 0s normal 1 forwards ;
animation : bg_body 10s ease 0s normal 1 forwards ;
}
@-webkit-keyframes bg_body { 
from {
background-color : #bdbdbd ;
}
45% {
background-color : #bdbdbd ;
}
53% {
background-color : #fdfdfd ;
}
to {
background-color : #fdfdfd ;
}
}






.bg_top_1 {
position : absolute ;
margin : 0 auto ;
width : 100% ; height : 100% ;
background :
url(../img/bg_dip_01.png) -210px -720px no-repeat ; /*(上_ブラックジャック)*/
-webkit-animation : bg_top_1 15s linear 1.5s normal infinite forwards ;
-ms-animation : bg_top_1 15s linear 1.5s normal infinite forwards ;
-moz-animation : bg_top_1 15s linear 1.5s normal infinite forwards ;
animation : bg_top_1 15s linear 1.5s normal infinite forwards ;
transform : translate3d(0,0,0) ; /*動きをスムーズに*/
z-index : 10 ;
}
@-webkit-keyframes bg_top_1 { 
from {
background :
url(../img/bg_dip_01.png) -210px 720px no-repeat ; /*(上_ブラックジャック)*/
}
to {
background :
url(../img/bg_dip_01.png) -210px -1200px no-repeat ; /*(上_ブラックジャック)*/
}
}
	


.bg_top_2 {
position : absolute ;
margin : 0 auto ;
width : 100% ; height : 100% ;
background :
url(../img/bg_dip_02.png) 260px 800px no-repeat; /*(中_カーテンコール)*/
-webkit-animation : bg_top_2 19s linear 0s normal infinite forwards ;
-ms-animation : bg_top_2 19s linear 0s normal infinite forwards ;
-moz-animation : bg_top_2 19s linear 0s normal infinite forwards ;
animation : bg_top_2 19s linear 0s normal infinite forwards ;
z-index : 9 ;
transform : translate3d(0,0,0) ; /*動きをスムーズに*/
}
@-webkit-keyframes bg_top_2 { 
from {
background :
url(../img/bg_dip_02.png) 270px 800px no-repeat; /*(中_カーテンコール)*/
}
to {
background :
url(../img/bg_dip_02.png) 270px -900px no-repeat; /*(中_カーテンコール)*/
}
}

.bg_top_3 {
position : absolute ;
margin : 0 auto ;
width : 100% ; height : 100% ;
background :
url(../img/bg_dip_03.png) -60px -200px no-repeat; /*(中_ジオスコープ)*/
-webkit-animation : bg_top_3 22s linear 0s normal infinite forwards ;
-ms-animation : bg_top_3 22s linear 0s normal infinite forwards ;
-moz-animation : bg_top_3 22s linear 0s normal infinite forwards ;
animation : bg_top_3 22s linear 0s normal infinite forwards ;
z-index : 8 ;
}
@-webkit-keyframes bg_top_3 { 
from {
background :
url(../img/bg_dip_03.png) -60px 800px no-repeat; /*(中_ジオスコープ)*/
}
to {
background :
url(../img/bg_dip_03.png) -60px -200px no-repeat; /*(中_ジオスコープ)*/
}
}

.bg_top_4 {
position : absolute ;
margin : 0 auto ;
width : 100% ; height : 100% ;
background :
url(../img/bg_dip_04.png) 160px -300px no-repeat; /*(下_ミリオチェック)*/
-webkit-animation : bg_top_4 40s linear 0s normal infinite forwards ;
-ms-animation : bg_top_4 40s linear 0s normal infinite forwards ;
-moz-animation : bg_top_4 40s linear 0s normal infinite forwards ;
animation : bg_top_4 40s linear 0s normal infinite forwards ;
z-index : 8 ;
}
@-webkit-keyframes bg_top_4 { 
from {
background :
url(../img/bg_dip_04.png) 170px 900px no-repeat; /*(下_ミリオチェック)*/
}
to {
background :
url(../img/bg_dip_04.png) 170px -300px no-repeat; /*(下_ミリオチェック)*/
}
}


.bg_top_5 {
position : absolute ;
margin : 0 auto ;
width : 100% ; height : 100% ;
background :
url(../img/bg_dip_05_sp.png) 260px -300px no-repeat; /*(カモ)*/
-webkit-animation : bg_top_5 38s linear 0s normal infinite forwards ;
-ms-animation : bg_top_5 38s linear 0s normal infinite forwards ;
-moz-animation : bg_top_5 38s linear 0s normal infinite forwards ;
animation : bg_top_5 38s linear 0s normal infinite forwards ;
z-index : 8 ;
}
@-webkit-keyframes bg_top_5 { 
from {
background :
url(../img/bg_dip_05_sp.png) 230px 1300px no-repeat; /*(下_ミリオチェック)*/
}
to {
background :
url(../img/bg_dip_05_sp.png) 230px -300px no-repeat; /*(下_ミリオチェック)*/
}
}






.bg_top_box {
position : absolute ;
margin : 0 auto ;
width :100% ; height : 100% ;
-webkit-animation : bg_top_box 7s ease 0s normal 1 forwards ;
-ms-animation : bg_top_box 7s ease 0s normal 1 forwards ;
-moz-animation : bg_top_box 7s ease 0s normal 1 forwards ;
animation : bg_top_box 7s ease 0s normal 1 forwards ;
background-color : #bdbdbd ;
opacity : 0 ;
z-index :11 ;
} 
@-webkit-keyframes bg_top_box  { 
from {
background-color : #bdbdbd ;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
60%{
background-color : #bdbdbd ;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
67%{
background-color : #fff ;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
to {
background-color : #fff ;
filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
}
@keyframes bg_top_box  { 
from {
background-color : #bdbdbd ;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
60%{
background-color : #bdbdbd ;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
67%{
background-color : #fff ;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
to {
background-color : #fff ;
filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
}
@-moz-keyframes bg_top_box  { 
from {
background-color : #bdbdbd ;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
60%{
background-color : #bdbdbd ;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
67%{
background-color : #fff ;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
to {
background-color : #fff ;
filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
}
















.intro_logo {
margin: -150px 0 0 -190px;
position : absolute ; top : 50% ; left : 50% ; 
width : 380px;
height : 270px;
/*border : 1px #ddd solid ;*/
background :
url(../img/brush_last.png) 203px 138px no-repeat, /*(3_上)*/
url(../img/brush_1.png) -78px 130px no-repeat, /*(2_中)*/
url(../img/brush_1.png) 287px -28px no-repeat; /*(1_下)*/

-webkit-animation : intro_logo 3s ease-out 1s normal 1 forwards ;
-ms-animation : intro_logo 3s ease-out 1s normal 1 forwards ;
-moz-animation : intro_logo 3s ease-out 1s normal 1 forwards ;
animation : intro_logo 3s ease-out 1s normal 1 forwards ;
transform : translate3d(0,0,0) ; /*動きをスムーズに*/
z-index : 100 ;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@-webkit-keyframes intro_logo { 
from {
background :
url(../img/brush_last.png) 203px 138px no-repeat, /*(3_上)*/
url(../img/brush_1.png) -78px 130px no-repeat, /*(2_中)*/
url(../img/brush_1.png) 287px -28px no-repeat; /*(1_下)*/
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
5% {
background :
url(../img/brush_last.png) 203px 138px no-repeat, /*(3_上)*/
url(../img/brush_1.png) -78px 130px no-repeat, /*(2_中)*/
url(../img/brush_1.png) 190px -28px no-repeat; /*(1_下)*/
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
30% {
background :
url(../img/brush_last.png) 203px 138px no-repeat, /*(3_上)*/
url(../img/brush_1.png) -78px 130px no-repeat, /*(2_中)*/
url(../img/brush_1.png) 190px -28px no-repeat; /*(1_下)*/
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
35% {
background :
url(../img/brush_last.png) 203px 138px no-repeat, /*(3_上)*/
url(../img/brush_1.png) -15px 70px no-repeat, /*(2_中)*/
url(../img/brush_1.png) 190px -28px no-repeat; /*(1_下)*/
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
45% {
background :
url(../img/brush_last.png) 203px 138px no-repeat, /*(3_上)*/
url(../img/brush_1.png) -15px 70px no-repeat, /*(2_中)*/
url(../img/brush_1.png) 190px -28px no-repeat; /*(1_下)*/
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
52% {
background :
url(../img/brush_last.png) 12px -85px no-repeat, /*(3_上)*/
url(../img/brush_1.png) -15px 70px no-repeat, /*(2_中)*/
url(../img/brush_1.png) 190px -28px no-repeat; /*(1_下)*/
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
85% {     /*全体移動*/
margin: -150px 0 0 -190px;
background :
url(../img/brush_last.png) 12px -85px no-repeat, /*(3_上)*/
url(../img/brush_1.png) -15px 70px no-repeat, /*(2_中)*/
url(../img/brush_1.png) 190px -28px no-repeat; /*(1_下)*/
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
to {
margin: -170px 0 0 -190px;
background :
url(../img/brush_last.png) 12px -85px no-repeat, /*(3_上)*/
url(../img/brush_1.png) -15px 70px no-repeat, /*(2_中)*/
url(../img/brush_1.png) 190px -28px no-repeat; /*(1_下)*/
filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/




.logo {
margin: -225px 0 0 -90px;
position : absolute ; top : 50% ; left : 50% ; 
width : 201px;
height : 118px;
-webkit-animation : logo 1s ease 6s normal 1 forwards ;
-ms-animation : logo 1s ease 6s normal 1 forwards ;
-moz-animation : logo 1s ease 6s normal 1 forwards ;
animation : logo 1s ease 6s normal 1 forwards ;
opacity : 0 ;
transform : translate3d(0,0,0) ; /*動きをスムーズに*/
z-index : 200 ;
}
@-webkit-keyframes logo { 
from {
margin: -215px 0 0 -90px;
filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
50% {
margin: -225px 0 0 -90px;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
to {
margin: -225px 0 0 -90px;
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}



.btn_about {
margin: 30px 0 0 -55px;
position : absolute ; top : 50% ; left : 50% ; 
width : 105px;
height : 105px;
-webkit-animation : btn_about 3s linear 0s normal infinite forwards ;
-ms-animation : btn_about 3s linear 0s normal infinite forwards ;
-moz-animation : btn_about 3s linear 0s normal infinite forwards ;
animation : btn_about 3s linear 0s normal infinite forwards ;
z-index : 300 ;
}
@-webkit-keyframes btn_about { 
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

.btn_about2 {
margin: 30px 0 0 -55px;
position : absolute ; top : 50% ; left : 50% ; 
width : 105px;
height : 105px;
-webkit-animation : btn_about2 4.7s linear 0s normal infinite forwards ;
-ms-animation : btn_about2 4.7s linear 0s normal infinite forwards ;
-moz-animation : btn_about2 4.7s linear 0s normal infinite forwards ;
animation : btn_about2 4.7s linear 0s normal infinite forwards ;
z-index : 300 ;
}
@-webkit-keyframes btn_about2 { 
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}

.btn_about_off {
margin: 30px 0 0 -55px;
position : absolute ; top : 50% ; left : 50% ; 
width : 105px;
height : 105px;
z-index : 300 ;
}

.btn_about_box {
margin: 20px 0 0 -55px;
position : absolute ; top : 50% ; left : 50% ; 
width : 110px;
height : 110px;
z-index : 300 ;
-webkit-animation : btn_about_box 2s linear 6.5s normal 1 forwards ;
-ms-animation : btn_about_box 2s linear 6.5s normal 1 forwards ;
-moz-animation : btn_about_box 2s linear 6.5s normal 1 forwards ;
animation : btn_about_box 2s linear 6.5s normal 1 forwards ;
z-index : 300 ;
opacity : 0 ;
}
@-webkit-keyframes btn_about_box { 
0% {
filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}


.top_txt {
margin: 240px 0 0 -70px;
position : absolute ; top : 50% ; left : 50% ; 
z-index : 3280 ;
-webkit-animation : btn_about_box 1s linear 7.3s normal 1 forwards ;
-ms-animation : btn_about_box 1s linear 7.3s normal 1 forwards ;
-moz-animation : btn_about_box 1s linear 7.3s normal 1 forwards ;
animation : btn_about_box 1s linear 7.3s normal 1 forwards ;
z-index : 300 ;
opacity : 0 ;
text-align : center ;
color : #aaa ;
font : normal 10px/13px 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}
@-webkit-keyframes btn_about_box { 
0% {
filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}