@charset "utf-8";

.font-size-2rem{
    font-size: 2rem;
}

#in-all-chara{
  margin: 0px;
    padding: 0px;
    width: 100vw;
    bottom: 0;
}

.in-text{
padding:20vh 0 20vh 0;
  opacity: 1;
}

.in-box{
  width: auto;
  background-color:rgba(255,255,255,0.7);
border-radius: 20px; 
margin:10px;
}

.in-gakkou{
  width: auto;
  max-width:12rem;
  background-color:rgba(255,255,255,0.7);
border-radius: 20px; 
margin:0px auto;
}

.to-offcanvas{
    position: fixed;
    left: 0rem;
    top: 4rem;
}

#in-img{
    width: 100vmax;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
}



.in-offcanvas-transition-enter-from{opacity: 0;}
.in-offcanvas-transition-enter-to{opacity: 1;}
.in-offcanvas-transition-enter-active{transition:opacity 10s;}

.in-text-transition-enter-from{opacity: 0;}
.in-text-transition-enter-to{opacity: 1;}
.in-text-transition-enter-active{transition:opacity 10s;}

.in-img-enter-from{opacity: 0;}
.in-img-enter-to{opacity: 1;}
.in-img-enter-active{transition:opacity 0s;}
.in-img-leave-from{opacity: 1;}
.in-img-leave-to{opacity: 0;}
.in-img-leave-active{transition:opacity 5s;}