@charset "utf-8";
/* --------------------------------
アニメーション css コンテンツ用
-------------------------------- */
/*delightersで設定*/

/* --------------------------------
アニメーション css ボタン用
-------------------------------- */
@keyframes move1 {
 0% {
 height: 100%; 
 bottom: 0;
 }
 54% {
 height: 0; 
 bottom: 100%;
 }
 55% {
 height: 0; 
 bottom: 0;
 }
 100% {
 height: 100%; 
 bottom: 0;
 }
}

@keyframes move2 {
 0% {
 width: 0;
 left: 0;
 }
 50% {
 width: 100%; 
 left: 0;
 }
 100% {
 width: 0; 
 left: 100%;
 }
}

@keyframes move3 {
 0% {
 height: 100%; 
 top: 0;
 }
 54% {
 height: 0; 
 top: 100%;
 }
 55% {
 height: 0; 
 top: 0;
 }
 100% {
 height: 100%; 
 top: 0;
 }
}

@keyframes move4 {
 0% {
 width: 0; 
 right: 0;
 }
 55% {
 width: 100%; 
 right: 0;
 }
 100% {
 width: 0; 
 right: 100%;
 }
}

@media (min-width: 880px) {
a.tdb-white,
a.tdb-gray{
    position: relative;
}

.tdb-l1,
.tdb-l2,
.tdb-l3,
.tdb-l4{
 display: block;
 position: absolute;
    }
.tdb-l1,
.tdb-l2,
.tdb-l3,
.tdb-l4{
 background-color: #000000;
    }
.tdb-l1{
 left: 0px;
 bottom: 0px;
 width: 1px;
    }
.tdb-l2{
 left: 0px;
 top: 0px;
 height: 1px;
    }
.tdb-l3{
 right: 0px;
 top: 0px;
 width: 1px;
    }
.tdb-l4{
 right: 0px;
 bottom: 0px;
 height: 1px;
    }
a.tdb-gray:hover{
    border:1px solid #F0F0F0;
}
a.tdb-white:hover{
    border:1px solid #FFFFFF;
}
a.tdb-white:hover .tdb-l1,
a.tdb-gray:hover .tdb-l1{
 animation: move1 1500ms infinite ease;
    }
a.tdb-white:hover .tdb-l2,
a.tdb-gray:hover .tdb-l2{
 animation: move2 1500ms infinite ease;
    }
a.tdb-white:hover .tdb-l3,
a.tdb-gray:hover .tdb-l3{
 animation: move3 1500ms infinite ease;
    }
a.tdb-white:hover .tdb-l4,
a.tdb-gray:hover .tdb-l4{
 animation: move4 1500ms infinite ease;
    }

}/*end min-width: 880px*/