html{
    height: 100%;
}

p.kaisetsu
{
   color            : red  ; 
   background-color : white;
}

td.login_td
{
  align            : center;  
  color            : white ;
  background-color : red   ;
}

td.logout_td
{
  align            : center;  
  color            : white ;
  background-color : green ;
}

table.right
{
  right-margin : 0;
  left-margin  : auto;
}

.animation {
    position: relative;
    width :100px;
}
 
.animation > li {
    position: absolute;
    list-style: none;
    visibility: hidden;
    animation: anime_slider_fade 60s 0s infinite;
}
.animation > li:nth-of-type(1) {
    animation-delay: 0s;
}

.animation > li:nth-of-type(2) {
    animation-delay: 4s;
}
.animation > li:nth-of-type(3) {
    animation-delay: 8s;
}

.animation > li:nth-of-type(4) {
    animation-delay: 12s;
}
.animation > li:nth-of-type(5) {
    animation-delay: 16s;
}
.animation > li:nth-of-type(6) {
    animation-delay: 20s;
}
.animation > li:nth-of-type(7) {
    animation-delay: 24s;
}
.animation > li:nth-of-type(8) {
    animation-delay: 28s;
}
.animation > li:nth-of-type(9) {
    animation-delay: 32s;
}
.animation > li:nth-of-type(10) {
    animation-delay: 36s;
}
.animation > li:nth-of-type(11) {
    animation-delay: 40s;
}
.animation > li:nth-of-type(12) {
    animation-delay: 44s;
}
.animation > li:nth-of-type(13) {
    animation-delay: 48s;
}
.animation > li:nth-of-type(14) {
    animation-delay: 52s;
}
.animation > li:nth-of-type(15) {
    animation-delay: 56s;
}
 
@keyframes anime_slider_fade {
    0% {
        visibility: visible;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    48.3% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}