.Concept {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 80vh;
}
.under01 {
  background: -moz-linear-gradient(transparent 70%, #006887 70%) !important;
  /* font-size: 20px; */
}

.under02 {
  background: -moz-linear-gradient(transparent 70%, #e60012 70%);
}

.under03 {
  background: -moz-linear-gradient(transparent 70%, white 70%);
}

.circle {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0px 10px 0px;
}

.circle h1,
.circle ul {
  text-align: center;
}

.circle h1 {
  margin-bottom: 20px;
}
.circle ul {
  list-style-type: none;
  padding: 0;
  margin-top: 0;
}

.circle li {
  margin: 5px;
  font-size: larger;
}

.health {
  color: white;
  position: absolute;
  top: 50px;
  left: 100px;
}
.sustainable {
  color: black;
  position: absolute;
  top: 10px;
  right: 100px;
}
.comfotable {
  color: white;
  position: absolute;
  top: 250px;
}

/*横幅が1000px以下になった際の指定*/
@media only screen and (max-width: 1000px) {
  .Concept {
    flex-direction: column;
    height: 150vh;
    /* margin: 0 50px 0 50px; */
  }

  .circle {
    margin: 5px 0px;
  }

  .health {
    position: static;
  }
  .sustainable {
    position: static;
  }
  .comfotable {
    position: static;
  }
}

/*========= 流体シェイプを動かす ===============*/
.fluid01 {
  width: 50vh; /*横幅*/
  height: 40vh; /*縦幅*/
  /*背景色 */
  /* background: #e60012;  */
  background-image: radial-gradient(
    circle farthest-corner at 17.1% 22.8%,
    rgba(226, 24, 24, 1) 0%,
    rgba(160, 6, 6, 1) 90%
  );
  animation: fluidrotate 30s ease 0s infinite; /*アニメーションの設定*/
}

.fluid02 {
  width: 45vh; /*横幅*/
  height: 45vh; /*縦幅*/
  /*背景色*/
  /* background: #006887;  */
  background-image: linear-gradient(
    93.2deg,
    rgba(24, 95, 246, 1) 14.4%,
    rgba(27, 69, 166, 1) 90.8%
  );

  animation: fluidrotate 30s ease 0s infinite; /*アニメーションの設定*/
}

.fluid03 {
  width: 50vh; /*横幅*/
  height: 40vh; /*縦幅*/
  /*背景色*/
  /* background: #d2d7da;  */
  background-image: linear-gradient(
    93.2deg,
    rgba(108, 147, 238, 0.37) 0%,
    rgb(236, 236, 236) 100.2%
  );

  animation: fluidrotate 30s ease 0s infinite; /*アニメーションの設定*/
}

@keyframes fluidrotate {
  0%,
  100% {
    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% {
    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%;
  }
}