.opening-animation-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--kobutsuya-blue);
  z-index: 10000;
  transition: .5s;

  .opening-animation-inner-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .logo-container {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      @media screen and (max-width: 750px) {
        flex-direction: column;
        gap: var(--margin-1);
      }

      .circle-logo {
        width: calc(var(--base-fs) * 250);
        height: calc(var(--base-fs) * 250);
        transition: .5s;

        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .text-logo {
        width: 0;
        overflow: hidden;
        transition: .5s;

        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }
}

.opening-animation-container {
  &.animated {
    .logo-container {
      .circle-logo {
        width: calc(var(--base-fs) * 100);
        height: calc(var(--base-fs) * 100);
        margin-right: calc(var(--base-fs) * 15);
      }

      .text-logo {
        width: calc(var(--base-fs) * 387);

        @media screen and (max-width: 750px) {
          width: calc(var(--base-fs) * 150);
        }
      }
    }
  }
}

.opening-animation-container {
  &.removed {
    opacity: 0;
    user-select: none;
  }
}