@charset "utf-8";
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 10;
    background-color: #fff;
/*    display: flex;*/
    display: inline-block;
    text-align: center;
    align-items: center;
    justify-content: center;
    animation: fadeOut 2.5s 3s forwards;
}

@keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      visibility: hidden;
    }
}

.circle-background {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    text-align: center;
}

.circle {
    font-size: 120px;
    font-family: "Times New Roman","Noto Serif Japanese";
    color: green;
    width: 120px;
    height: 120px;
    left: 50%;
    top: 50%;
    display: inline-block;
    border-radius: 50%;
    border: solid 5px green; /*上下5pxのボーダー*/
    text-align: center;
    margin: auto auto;
    line-height: 130px; /*円の高さ-上下のボーダー*/
}
.circle {
    opacity: 0;
    animation: logo_fade 3.8s 0.3s forwards;
}

@keyframes logo_fade {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }

    60% {
      opacity: 1;
      transform:translateY(0);
    }

    100% {
      opacity: 0;
    }
}