@charset "utf-8";

.test_waku{
height:130px;
padding:10px;
margin:0px;
background-color:#FFF;
position:relative;
top:0px;
left:0px;
border-left:1px solid #AAA;
border-right:1px solid #AAA;
border-bottom:2px dotted #000;
}

.test_waku2{
height:340px;
padding:10px;
margin:0px;
background-color:#FFF;
position:relative;
top:0px;
left:0px;
border-left:1px solid #AAA;
border-right:1px solid #AAA;
border-bottom:2px dotted #000;
}
.test_waku2:hover > div.minibox{
width:150px;
}

.test_waku3{
height:130px;
padding:10px;
margin:0px;
background-color:#FFF;
position:relative;
top:0px;
left:0px;
border-left:1px solid #AAA;
border-right:1px solid #AAA;
border-bottom:2px dotted #000;
}
.test_waku3:hover > div.minibox{
width:150px;
}

.tw_stt{
border-top:1px solid #AAA;
}
.tw_end{
border-bottom:1px solid #AAA;
}

.test_waku > h4,.test_waku2 > h4,.test_waku3 > h4{
width:50px;
height:15px;
line-height:15px;
text-align:center;
font-size:12px;
color:#030;
background:#DDD;
background:rgba(200,200,200,0.5);
padding:8px;
margin:0;
position:absolute;
top:0px;
right:0px;
}

.t1tx{
position:absolute;
bottom:4px;
left:4px;
}
.t2tx{
position:absolute;
bottom:4px;
left:4px;
}


#tri_test_01{
background-color:#00F;
font-size:50px;
text-align:center;
line-height:60px;
color:#F00;
width:60px;
height:60px;
position:relative;
top:10px;
left:10px;
padding:10px;
margin:0px;

overflow:hidden;

-webkit-transition:width 1s linear 0s,height 1s linear 1s,font-size 1s linear 2s,background-color 1s linear 3s,color 1s linear 4s,left 1s linear 5s,top 1s linear 6s,-webkit-transform 1s linear 7s;
transition:width 1s linear 0s,height 1s linear 1s,font-size 1s linear 2s,background-color 1s linear 3s,color 1s linear 4s,left 1s linear 5s,top 1s linear 6s,transform 1s linear 7s;
}

.test_waku:hover > #tri_test_01{
width:120px;
height:80px;
font-size:150px;
background-color:#F00;
color:#00F;
left:5px;
top:0px;
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

.minibox{
background-color:#00F;
font-size:10px;
text-align:right;
line-height:10px;
color:#FF0;
width:30px;
height:10px;
position:relative;
top:25px;
left:0px;
padding:0px;
margin:0px;
}
.minibox_0{
background-color:rgba(255,255,255,0);
font-size:10px;
text-align:left;
line-height:20px;
height:40px;
position:relative;
top:25px;
left:0px;
padding:0px;
margin:0px;
}

#tri_test_02{
-webkit-transition:all 1s linear 0s;
transition:all 1s linear 0s;
}
#tri_test_02b{
-webkit-transition:all 1s linear 0.1s;
transition:all 1s linear 0.1s;
}
#tri_test_02c{
-webkit-transition:all 1s linear 0.2s;
transition:all 1s linear 0.2s;
}
#tri_test_02d{
-webkit-transition:all 1s linear 0.3s;
transition:all 1s linear 0.3s;
}
#tri_test_02e{
-webkit-transition:all 1s linear 0.4s;
transition:all 1s linear 0.4s;
}
#tri_test_02f{
-webkit-transition:all 1s linear 0.5s;
transition:all 1s linear 0.5s;
}
#tri_test_02g{
-webkit-transition:all 1s linear 0.6s;
transition:all 1s linear 0.6s;
}
#tri_test_02h{
-webkit-transition:all 1s linear 0.7s;
transition:all 1s linear 0.7s;
}
#tri_test_02i{
-webkit-transition:all 1s linear 0.8s;
transition:all 1s linear 0.8s;
}
#tri_test_02j{
-webkit-transition:all 1s linear 0.9s;
transition:all 1s linear 0.9s;
}
#tri_test_02k{
-webkit-transition:all 1s linear 1s;
transition:all 1s linear 1s;
}

#tri_test_03{
-webkit-transition:width 0s linear;
transition:width 0s linear;
}
#tri_test_03b{
-webkit-transition:width 0.1s linear;
transition:width 0.1s linear;
}
#tri_test_03c{
-webkit-transition:width 0.2s linear;
transition:width 0.2s linear;
}
#tri_test_03d{
-webkit-transition:width 0.3s linear;
transition:width 0.3s linear;
}
#tri_test_03e{
-webkit-transition:width 0.4s linear;
transition:width 0.4s linear;
}
#tri_test_03f{
-webkit-transition:width 0.5s linear;
transition:width 0.5s linear;
}
#tri_test_03g{
-webkit-transition:width 0.6s linear;
transition:width 0.6s linear;
}
#tri_test_03h{
-webkit-transition:width 0.7s linear;
transition:width 0.7s linear;
}
#tri_test_03i{
-webkit-transition:width 0.8s linear;
transition:width 0.8s linear;
}
#tri_test_03j{
-webkit-transition:width 0.9s linear;
transition:width 0.9s linear;
}
#tri_test_03k{
-webkit-transition:width 1s linear;
transition:width 1s linear;
}
#tri_test_03l{
background:rgba(255,0,0,1);
-webkit-transition:width 2s linear;
transition:width 2s linear;
}

#tri_test_04{
-webkit-transition:all 2s linear -1s;
transition:all 2s linear -1s;
}
#tri_test_04b{
-webkit-transition:all 2s linear;
transition:all 2s linear;
}
#tri_test_04c{
-webkit-transition:all 1s linear;
transition:all 1s linear;
}
#tri_test_04d{
-webkit-transition:all 2s linear -2s;
transition:all 2s linear -2s;
}