/*=================
Basic style
==================*/
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #212022;
}
body {
  margin: 0;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  width: 100%;
}
h1,
h2,
p {
  margin: 0;
}
/*===================
animation01
====================*/
.animation01 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.border_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15vw;
  height: 15vw;
}
.line {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #845b46;
  opacity: 0;
}
.line01 {
  top: 0;
  left: 100%;
  width: 0.15vw;
  height: 15.15vw;
  transform-origin: bottom;
  animation: animation01_line01 0.2s linear 0.3s forwards;
}
.line03 {
  top: 0;
  left: 0;
  width: 0.15vw;
  height: 15.15vw;
  transform-origin: bottom;
  animation: animation01_line01 0.2s linear 0.6s forwards;
}
@keyframes animation01_line01 {
  0% {
    transform: scale3d(1, 0, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}
.line02 {
  top: 100%;
  left: 0;
  width: 15.15vw;
  height: 0.15vw;
  transform-origin: right;
  animation: animation01_line02 0.2s linear 0.4s forwards;
}
.line04 {
  top: 0;
  left: 0;
  width: 15.15vw;
  height: 0.15vw;
  transform-origin: left;
  animation: animation01_line02 0.2s linear 0.8s forwards;
}
@keyframes animation01_line02 {
  0% {
    transform: scale3d(0, 1, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}
.circle {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.2vw;
  height: 1.2vw;
  border: 0.1vw solid #fff;
  border-radius: 50%;
  opacity: 0;
}
.circle01 {
  top: 96%;
  left: 96%;
  margin: 0 auto;
  animation: animation01_circle 0.3s linear 0.3s forwards;
}
.circle02 {
  top: 96%;
  left: -99%;
  margin: 0 auto;
  animation: animation01_circle 0.3s linear 0.45s forwards;
}
.circle03 {
  top: -4%;
  left: -99%;
  margin: 0 auto;
  animation: animation01_circle 0.3s linear 0.65s forwards;
}
.circle04 {
  top: -4%;
  left: 96%;
  margin: 0 auto;
  animation: animation01_circle 0.3s linear 0.85s forwards;
}
@keyframes animation01_circle {
  0% {
    transform: scale3d(0, 0, 1);
    opacity: 1;
  }
  40% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  60% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(0, 0, 1);
    opacity: 1;
  }
}

.wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 13.5vw;
  height: 13.5vw;
  overflow: hidden;
}
.wave_wrapper {
  width: 200%;
  height: 150%;
  position: absolute;
  top: -25%;
  right: 0;
  bottom: 0;
  left: -50%;
  margin: 0 auto;
  animation: animation01_wave_wrapper 1s linear 1s forwards;
}
@keyframes animation01_wave_wrapper {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.wave_box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform-origin: bottom;
  animation: animation01_wave_box 1s linear 1s forwards;
  opacity: 0;
}
@keyframes animation01_wave_box {
  0% {
    transform: scale3d(1, 0, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}
.animation_line {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  background-color: #fff;
  opacity: 0;
}
.animation_line_wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.animation_line01 {
  top: -15%;
  left: 0;
  width: 0.2vw;
  height: 0.7vw;
  animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
  transform-origin: top;
}
.animation_line02_wrapper {
  transform: rotate(45deg);
}
.animation_line02 {
  top: -35%;
  left: 0;
  width: 0.2vw;
  height: 0.7vw;
  animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
  transform-origin: top;
}
@keyframes animation_line01 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-1.5vw);
    opacity: 1;
  }
}
.animation_line03 {
  top: 50%;
  left: 110%;
  width: 0.7vw;
  height: 0.2vw;
  animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
  transform-origin: right;
}
.animation_line04_wrapper {
  transform: rotate(45deg);
}
.animation_line04 {
  top: 50%;
  left: 128%;
  width: 0.7vw;
  height: 0.2vw;
  animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
  transform-origin: right;
}
@keyframes animation_line03 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(1.5vw);
    opacity: 1;
  }
}
.animation_line05 {
  top: 110%;
  left: 0;
  width: 0.2vw;
  height: 0.7vw;
  animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
  transform-origin: bottom;
}
.animation_line06_wrapper {
  transform: rotate(45deg);
}
.animation_line06 {
  top: 128%;
  left: 0;
  width: 0.2vw;
  height: 0.7vw;
  animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
  transform-origin: bottom;
}
@keyframes animation_line05 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1.5vw);
    opacity: 1;
  }
}
.animation_line07 {
  top: 50%;
  left: -130%;
  width: 0.7vw;
  height: 0.2vw;
  animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
  transform-origin: left;
}
.animation_line08_wrapper {
  transform: rotate(45deg);
}
.animation_line08 {
  top: 50%;
  left: -162%;
  width: 0.7vw;
  height: 0.2vw;
  animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
  transform-origin: left;
}
@keyframes animation_line07 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-1.5vw);
    opacity: 1;
  }
}

.rhombus {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rhombus 0.2s linear 2.2s forwards;
}
@keyframes rhombus {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(45deg);
  }
}
.rhombus_small {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rhombus_small 0.4s linear 2.55s forwards;
}
@keyframes rhombus_small {
  0% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  99% {
    transform: scale3d(0.15, 0.15, 0.15);
    opacity: 1;
  }
  100% {
    transform: scale3d(0.15, 0.15, 0.15);
    opacity: 0;
  }
}

/*===================
animation02
====================*/
.animation02 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.rhombus_box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 40vw;
  height: 40vw;
  animation: rhombus_box 0.4s linear 3.55s forwards;
}
.rhombus_item_wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 2.1vw;
  height: 2.1vw;
  opacity: 0;
}
.rhombus_item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 2.1vw;
  height: 2.1vw;
  background-color: #fff;
  transform: rotate(45deg);
}
.rhombus_item01_wrapper {
  animation: rhombus_item01 0.5s linear 2.95s forwards;
}

.rhombus_item02_wrapper {
  animation: rhombus_item02 0.5s linear 2.95s forwards;
}
@keyframes rhombus_item01 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-18.5vw);
    opacity: 1;
  }
}
@keyframes rhombus_item02 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(18.5vw);
    opacity: 1;
  }
}
@keyframes rhombus_box {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.double_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.double_wrapper02 {
  position: relative;
  width: 100%;
  height: 100%;
  animation: double_content forwards;
  opacity: 0;
}
.double_wrapper01 {
  display: block;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
}
.double_wrapper01::before {
  content: "";
  display: block;
  position: absolute;
  background: #212022;
  z-index: 2;
}
.double_wrapper01::after {
  content: "";
  display: block;
  position: absolute;
  background: #212022;
  z-index: 3;
}
/*============
dotted circle
============*/
.dotted02 {
  top: 0;
  animation-delay: 4.2s;
}
.dotted_hide {
  position: absolute;
  width: 31vw;
  height: 31vw;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}
.dotted01 {
  width: 30vw;
  height: 30vw;
  border: dotted 0.5vw #fff;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.dotted_right::before {
  content: "";
  display: block;
  position: absolute;
  background: #212022;
  z-index: 3;
}
.dotted_right::before {
  top: 0;
  left: 0;
  width: 32vw;
  height: 32vw;
  transform-origin: left 16vw;
  animation: rotate-circle-right 0.5s linear 4.2s forwards;
}
.dotted_right {
  position: absolute;
  width: 16vw;
  height: 32vw;
  z-index: 1;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.dotted01::after {
  top: -1vw;
  left: -17vw;
  width: 32vw;
  height: 32vw;
  transform-origin: right 16vw;
  animation: rotate-circle-left01 0.5s linear 4.2s forwards;
}
@keyframes rotate-circle-left01 {
  0% {
    transform: rotate(0deg);
    background: #212022;
    opacity: 1;
  }
  50% {
    transform: rotate(-180deg);
    background: #212022;
    opacity: 1;
  }
  50.01% {
    transform: rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg);
    opacity: 0;
  }
}
/*============
white circle
============*/
.white02 {
  top: -100%;
  animation-delay: 4.7s;
}
.white01 {
  width: 29vw;
  height: 29vw;
  background: #fff;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.white01::before {
  top: 0;
  left: 14.5vw;
  width: 29vw;
  height: 29vw;
  transform-origin: left 14.5vw;
  animation: rotate-circle-right 0.3s linear 4.7s forwards;
}
.white01::after {
  top: 0;
  left: -14.5vw;
  width: 29vw;
  height: 29vw;
  transform-origin: right 14.5vw;
  animation: rotate-circle-left 0.3s linear 4.7s forwards;
}
@keyframes rotate-circle-left {
  0% {
    transform: rotate(0deg);
    background: #212022;
  }
  50% {
    transform: rotate(-180deg);
    background: #212022;
  }
  50.01% {
    transform: rotate(-360deg);
    background: #fff;
  }
  100% {
    transform: rotate(-360deg);
    background: #fff;
  }
}
/*============
gray circle
============*/
.gray02 {
  top: -200%;
  animation-delay: 4.8s;
}
.gray01 {
  width: 8vw;
  height: 8vw;
  background: #808184;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gray01::before {
  top: 0;
  left: 4vw;
  width: 8vw;
  height: 8vw;
  background: #fff;
  transform-origin: left 4vw;
  animation: rotate-circle-right 0.5s linear 4.8s forwards;
}
.gray01::after {
  top: 0;
  left: -4vw;
  width: 8vw;
  height: 8vw;
  background: #fff;
  transform-origin: right 4vw;
  animation: rotate-circle-left03 0.5s linear 4.8s forwards;
}
@keyframes rotate-circle-left03 {
  0% {
    transform: rotate(0deg);
    background: #fff;
  }
  50% {
    transform: rotate(-180deg);
    background: #fff;
  }
  50.01% {
    transform: rotate(-360deg);
    background: #808184;
  }
  100% {
    transform: rotate(-360deg);
    background: #808184;
  }
}
/*============
orange circle
============*/
.orange02 {
  top: -300%;
  animation-delay: 5.3s;
}
.orange01 {
  width: 27vw;
  height: 27vw;
  background: #f47141;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.orange01::before {
  top: 0;
  left: 13.5vw;
  width: 27vw;
  height: 27vw;
  background: #fff;
  transform-origin: left 13.5vw;
  animation: rotate-circle-right 0.5s linear 5.3s forwards;
}
.orange01::after {
  top: 0;
  left: -13.5vw;
  width: 27vw;
  height: 27vw;
  background: #fff;
  transform-origin: right 13.5vw;
  animation: rotate-circle-left02 0.5s linear 5.3s forwards;
}
@keyframes rotate-circle-left02 {
  0% {
    transform: rotate(0deg);
    background: #fff;
  }
  50% {
    transform: rotate(-180deg);
    background: #fff;
  }
  50.01% {
    transform: rotate(-360deg);
    background: #f47141;
  }
  100% {
    transform: rotate(-360deg);
    background: #f47141;
  }
}

@keyframes double_content {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotate-circle-right {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}

.name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  height: 30vw;
  animation: name 1s cubic-bezier(0.165, 0.84, 0.44, 1) 5.9s forwards;
  opacity: 0;
}
.name p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2vw;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  letter-spacing: 0.1em;
}
.name_circle01 {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
}
.name_circle02 {
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
}
@keyframes name {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}