body{
    padding: 10px;
    margin: 20px;
    width: 90%;
    background-color: rgba(255, 255,224,1);
}

.items{
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-areas:
    "areaA areaA areaA"
    "areaC areaB areaB";
    border: 1px solid #000000;
}

.it1{
    background-color:rgba(0,255,0,0.5);
    grid-area: areaA;
    text-align:center;
    padding: 10px;
    border: 1px solid #000000;


}
.it2{
    background-color: rgba(0,0,255,0);
    grid-area: areaB;
    /* text-align:center; */
    font-size: 15px;
    padding:10px;
    border: 1px solid #000000;
    color: rgba(255,0,0,0.9);

}
.it3{
    
    background-color: rgba(0,255,0,0);
    grid-area: areaC;
    font-size: 12px;
    padding:10px;
    border: 1px solid #000000;
}
.sc{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
    "sc1 sc1"
    "sc2  sc3"
    "sc4  sc5"
    "sc6  sc7"
    "sc8 sc9"
    "sc10 sc11"
    "sc12 sc13"
    "sc14 sc15"
    "sc16 sc17";
    border: 1px solid #000000;
}
.sc1{
    grid-area: sc1;
    border: 1px solid rgba(255,0,0,0.3);
    text-align:center;
    background-color: rgba(255,230,230,1);
}
.sc2{
    grid-area: sc2;
    border: 1px solid rgba(255,0,0,0.3);
    padding:3px;
    font-size: 12px;
}
.sc3{
    grid-area: sc3;
    border: 1px solid rgba(255,0,0,0.3);
    padding-top: 10px;
    padding-bottom: 10px;
}
.sc4{
    grid-area: sc4;
    border: 1px solid rgba(255,0,0,0.3);
    padding:3px;
    color: blue;
    font-size: 12px;
}
.sc5{
    grid-area: sc5;
    border: 1px solid rgba(255,0,0,0.3);
    padding-top: 10px;
    padding-bottom: 10px;
    color: blue;
}
.sc6{
    grid-area: sc6;
    border: 1px solid rgba(255,0,0,0.3);
    padding:3px;
    font-size:12px;
}
.sc7{
    grid-area: sc7;
    border: 1px solid rgba(255,0,0,0.3);
    padding-top: 10px;
    padding-bottom: 10px;
}
.sc8{
    grid-area: sc8;
    border: 1px solid rgba(255,0,0,0.3);
    padding:3px;
    color: blue;
    font-size:12px;
}
.sc9{
    grid-area: sc9;
    border: 1px solid rgba(255,0,0,0.3);
    padding-top: 10px;
    padding-bottom: 10px;
    color: blue;
}
.sc10{
    grid-area: sc10;
    border: 1px solid rgba(255,0,0,0.3);
    padding:3px;
    font-size:12px;
}
.sc11{
    grid-area: sc11;
    border: 1px solid rgba(255,0,0,0.3);
    padding-top: 10px;
    padding-bottom: 10px;
}
.sc12{
    grid-area: sc12;
    border: 1px solid rgba(255,0,0,0.3);
    padding:3px;
    color: blue;
    font-size:12px;
}
.sc13{
    grid-area: sc13;
    border: 1px solid rgba(255,0,0,0.3);
    padding-top: 10px;
    padding-bottom: 10px;
    color: blue;
}
.sc14{
    grid-area: sc14;
    border: 1px solid rgba(255,0,0,0.3);
    padding:3px;
    font-size:12px;
}
.sc15{
    grid-area: sc15;
    border: 1px solid rgba(255,0,0,0.3);
    padding-top: 10px;
    padding-bottom: 10px;
}
.sc16{
    grid-area: sc16;
    border: 1px solid rgba(255,0,0,0.3);
    padding:3px;
    color:blue;
    font-size:12px;
}
.sc17{
    grid-area: sc17;
    border: 1px solid rgba(255,0,0,0.3);
    padding-top: 10px;
    padding-bottom: 10px;
    color: blue;
}



#day{
    color: rgba(255,0,0,1);
    font-size: 25px;

}
#hour{
    color: rgba(0,0,255,1);
    font-size: 25px;
}
#fun{
    color:rgba(255,0,0,1);
    font-size: 25px;
}
#byou{
    color:rgba(0,0,255,1);
    font-size: 25px;
}
/* li{
    font-size: 12px;
} */

.syusai{
    /* position:relative;
    top: px; */
    /* position: fixed;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    background-color:rgba(255,255,255,0.9); */
    position:relative;
    margin-top:10px;
    margin-bottom:3px;
    font-size: 15px;
    color:rgba(255,0,0,1);
    /* overflow: hidden; */
    animation-name: syusai;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay:0s;
    animation-iteration-count: 1;
    animation-direction: normal;
}
.syusai .goku{
    font-size:12px;
}
@keyframes syusai{
    0%{
        position: relative;
        left: -2000px;
        /* overflow:hidden; */
        white-space: nowrap;
        
        font-size: 300px;
        opacity:0.7;
        z-index:1;
    }
    100%{
        margin-bottom:3px;
        position:relative;
        left:0px;
        /* overflow: hidden; */
        white-space: nowrap;
        font-size:15px;
        opacity: 1;
    }
}

#ani1 .ani1{
    
    font-size:30px;
    width: 50px;
    height: 40px;
    padding-top:10px;
    background-color: blue;
    color: rgb(255,255,255);
    text-align:center;
    /* vertical-align: middle; */
    /* padding-top: 20px; */
    animation-name: idou1;
    animation-duration: 20s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes idou1{
    0%{
        background-color: red;
       
    }

    
    100%{
        position:relative;
        left: 0px;
        background-color:blue;
       
    }
}

#ani1 .ani2{
    
     font-size:30px;
    width: 50px;
    height: 40px;
    padding-top:10px;
    background-color: red;
    color: rgb(255,255,255);
    text-align:center;
    /* vertical-align: middle; */
    /* padding-top: 20px; */
    animation-name: idou2;
    animation-duration: 15s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes idou2{
    0%{
        position: relative;
        top: 500px;
        left: 500px;
        background-color: blue;
        opacity:0;
        border-radius: 50%;
    }
    20%{
        position: relative;
        top:200px;
        left:-100px;
        border-radius:50%;
    }
    50%{
        position:relative;
        top:0px;
        left:0px;
        background-color:blue;
        border-radius: 50%;
    }
    100%{
        
        background-color:red;
        opacity:1;
        border-radius:0%;
    }
}

#ani1 .ani3{
     font-size:30px;
    width: 50px;
    height: 40px;
    padding-top:10px;
    background-color: blue;
    color: rgb(255,255,255);
    text-align:center;
    /* vertical-align: middle; */
    /* padding-top: 20px; */
    animation-name: idou3;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes idou3{
    0%{
        background-color: red;
    }
    100%{
        background-color:blue;
    }
}

#ani1 .ani4{
     font-size:30px;
    width: 50px;
    height: 40px;
    padding-top:10px;
    background-color: blue;
    color: rgb(255,255,255);
    text-align:center;
    /* vertical-align: middle; */
    /* padding-top: 20px; */
    animation-name: idou4;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 4s;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes idou4{
    0%{
        background-color: red;
    }
    100%{
        background-color:blue;
    }
}

#ani1 .ani5{
     font-size:30px;
    width: 50px;
    height: 40px;
    padding-top:10px;
    background-color: blue;
    color: rgb(255,255,255);
    text-align:center;
    /* vertical-align: middle; */
    /* padding-top: 20px; */
    animation-name: idou5;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 5s;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes idou5{
    0%{
        background-color: red;
    }
    100%{
        background-color:blue;
    }
}

#ani1 .ani6{
     font-size:30px;
    width: 50px;
    height: 40px;
    padding-top:10px;
    background-color: blue;
    color: rgb(255,255,255);
    text-align:center;
    /* vertical-align: middle; */
    /* padding-top: 20px; */
    animation-name: idou6;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 6s;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes idou6{
    0%{
        background-color: red;
    }
    100%{
        background-color:blue;
    }
}

#syoukou .syoukou1{
    font-size: 13px;
    animation-name: syoukou;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes syoukou{
    0%{
       
        color: red;
    }
    
    100%{
        
        color: rgb(0,0,0);
    }
}

#syoukou .syoukou2{
    font-size: 13px;
    animation-name: syoukou2;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes syoukou2{
    0%{
       
        color: red;
    }
    
    100%{
        
        color: rgb(0,0,0);
    }
}

#syoukou .syoukou3{
    font-size: 13px;
    animation-name: syoukou3;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 4s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes syoukou3{
    0%{
       
        color: red;
    }
    
    100%{
       
        
        color: rgb(0,0,0);
    }
}
.link1{
    position: fixed;
    bottom: 20px;
    display: flex;
    /* top:50px; */
    text-decoration: none;
    color: rgb(255,255,255);
    left:2px;
    background-color:rgba(255,0,0,0.7);
    border-radius:5px;
    padding:10px;
    animation-name: link1;
    animation-duration: 20s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
.link1 a{
    text-decoration: none;
    color: rgb(255,255,255);
}
@keyframes link1{
    0%{
        position: fixed;
        bottom: 10px;
        left:2px;
        opacity:1;
    }
    10%{
        position: fixed;
        bottom: 20px;
        left:2px;
    }
    20%{
        position: fixed;
        bottom: 10px;
        left:2px;
    }
    30%{
        position:fixed;
        bottom: 20px;
        left:2px;
    }
    40%{
        position: fixed;
        bottom: 10px;
        left:2px;
    }
     50%{
        position:fixed;
        bottom: 20px;
        left:2px;
        opacity:0;
    }
    60%{
        position: fixed;
        bottom: 10px;
        left:2px;
    }
    70%{
        position:fixed;
        bottom: 20px;
        left:2px;
    }
    80%{
        position: fixed;
        bottom: 10px;
        left:2px;
    }
    90%{
        position:fixed;
        bottom: 20px;
        left:2px;
    }
    100%{
        position:fixed;
        bottom: 10px;
        left:2px;
        opacity:1;
    }
}
.nlink{
    position: fixed;
    display: flex;
    top:0px;
    left:0px;
    background-color:blue;
    color: white;

}
.kaijyou img{
    width: 100%;
}
.kaijyou{
    width:100%;
    position: relative;
}
.kaijyou .kaijyoutext{
    position: absolute;
    top:50%;
    left: 41%;
    z-index: 110;
    color: red;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color:rgba(255,255,255,0.7);
    font-size: 1.5vw;
}