body {
  width: 100%;
}

.top_visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: #f9ecd9;
}

/* 回転 */
.fluid {
  position: relative;
  width: 500px;
  height: 500px;
}
.fluid_obj {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
}
.fluid_obj.obj01 {
  background: #f8e193;
  animation: fluidrotate 20s ease 0s infinite;
}
.fluid_obj.obj02 {
  border: 2px solid #f0cf5e;
  animation: fluidrotate_04 20s ease 0s infinite;
}
@keyframes fluidrotate {
  0%,
  100% {
    border-radius: 59% 41% 26% 74% / 43% 56% 44% 57%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 59% 41% 26% 74% / 43% 56% 44% 57%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

@keyframes fluidrotate_02 {
  0%,
  100% {
    top: -20px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    top: 0px;
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
@keyframes fluidrotate_03 {
  0%,
  100% {
    bottom: 0px;
    right: 15px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    bottom: -15px;
    border-radius: 91% 9% 9% 91% / 43% 50% 50% 57%;
  }
  42% {
    border-radius: 91% 9% 9% 91% / 43% 50% 50% 57%;
  }
  56% {
    right: -10px;
    border-radius: 91% 9% 9% 91% / 43% 50% 50% 57%;
  }
  70% {
    border-radius: 91% 9% 9% 91% / 43% 50% 50% 57%;
  }
  84% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
}
@keyframes fluidrotate_04 {
  0%,
  100% {
    top: -15px;
    right: 15px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  28% {
    right: 35px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  42% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  56% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  70% {
    top: 0px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  84% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
}

.fluid {
  position: relative;
  width: 500px;
  height: 500px;
}
.fluid_obj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fluid_obj.obj01 {
  background: #fffae3;
  animation: fluidrotate 20s ease 0s infinite;
  position: relative;
}
.fluid_obj.obj02 {
  border: 2px solid rgba(51, 33, 0, 0.25);
  animation: fluidrotate_04 20s ease 0s infinite;
}
@keyframes fluidrotate {
  0%,
  100% {
    border-radius: 59% 41% 26% 74% / 43% 56% 44% 57%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 59% 41% 26% 74% / 43% 56% 44% 57%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

@keyframes fluidrotate_02 {
  0%,
  100% {
    top: -20px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    top: 0px;
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
@keyframes fluidrotate_03 {
  0%,
  100% {
    bottom: 0px;
    right: 15px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    bottom: -15px;
    border-radius: 91% 9% 9% 91% / 43% 50% 50% 57%;
  }
  42% {
    border-radius: 91% 9% 9% 91% / 43% 50% 50% 57%;
  }
  56% {
    right: -10px;
    border-radius: 91% 9% 9% 91% / 43% 50% 50% 57%;
  }
  70% {
    border-radius: 91% 9% 9% 91% / 43% 50% 50% 57%;
  }
  84% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
}
@keyframes fluidrotate_04 {
  0%,
  100% {
    top: -15px;
    right: 15px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  28% {
    right: 35px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  42% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  56% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  70% {
    top: 0px;
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  84% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
}

.contact_heading {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 100px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.contact_heading img {
  width: 100%;
}

.contact_form label {
  display: block;
  width: 400px;
  margin: 0 auto 25px auto;
  font-size: 14px;
}

.contact_form input {
  display: block;
  width: 400px;
  margin: 0 auto 62px auto;
  resize: none;
}

.contact_form textarea {
  display: block;
  width: 400px;
  height: 300px;
  margin: 0 auto 62px auto;
  resize: none;
}

#name {
  height: 20px;
}

.send_btn {
  background-image: url(../images/send_button@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 83px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 300px;
  height: 130px;
  margin-bottom: 100px;
  transition: 0.3s;
}

.send_btn:hover {
  transform: scale(1.1);
}

.send_btn button {
  opacity: 0;
  font-size: 16px;
  font-weight: bold;
  padding: 43px 115px;
  margin-top: 30px;
  cursor: pointer;
}

.send_btn a {
  position: absolute;
  top: 75px;
  margin-left: 5px;
  font-size: 14px;
}

.thanks_message {
  max-width: 488px;
  margin: 135px auto 0px auto;
}

.thanks_message h1 {
  margin-bottom: 75px;
  text-align: center;
}

.thanks_message p {
  line-height: 2;
  margin-bottom: 56px;
}

.thanks_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 300px;
  height: 130px;
  background-image: url(../images/send_button@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 83px;
  transition: 0.3s;
}

.thanks_btn:hover {
  transform: scale(1.1);
}

.thanks_btn p {
  position: absolute;
  top: 75px;
  margin-left: -55px;
  font-size: 14px;
}