/* -----------------------
  routine
----------------------- */
.routine {
  background: url(../img/routine_bg.png) no-repeat center top / 100%;
}

.routine_01,
.routine_02,
.routine_ttl {
  display: grid;
  place-items: center;
  position: relative;
}

.routine_01 p,
.routine_02 p,
.routine_ttl p,
.routine_ttl h2 {
  grid-area: 1 / 1;
  align-self: start;
}

.routine_01 p:nth-child(2),
.routine_01 p:nth-child(3) {
  position: absolute;
  top: min(calc(18 / 960 * 100vw), 18px);
  right: min(calc(482 / 960 * 100vw), 482px);
  width: min(calc(161 / 960 * 100vw), 161px);
}

.routine_01 p:nth-child(3) {
  right: min(calc(26 / 960 * 100vw), 26px);
}

.routine_02 p:nth-child(2),
.routine_02 p:nth-child(3) {
  align-self: end;
}

.routine_02 .circle {
  position: absolute;
  top: min(calc(40 / 960 * 100vw), 40px);
  left: max(calc(-94 / 960 * 100vw), -94px);
  width: min(calc(339 / 960 * 100vw), 339px);
  animation: rotate 8s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}