@charset "UTF-8";

#wrapper > header {
  padding: 8px clamp(80px, 8.25vw, 160px) 8px clamp(40px, 4.125vw, 80px);
  background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0  / 0));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

  nav ul {
    gap: 0 50px;
    
    a {
      text-shadow: .45px .45px 0 var(--black);
    }
  }
}



@media screen and (width <= 1024px) {
  body:has(nav.active) {
    overflow: hidden;

    .menu span {
      color: var(--black);
    }
  }

  .menu {
    display: flex;
    position: relative;
    cursor: pointer;
    z-index: 3;

    span {
      transition: color .5s;
    }
  }

  #wrapper > header {
    padding: 8px clamp(80px, 8.25vw, 160px);

    nav {
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      position: fixed;
      overflow: hidden;
      background: rgb(238 232 218 / 1) no-repeat center / cover;
      z-index: 2;
      scale: 0;
      opacity: 0;
      transform-origin: top right;
      transition: opacity .25s ease-out, scale .25s ease-out;
      
      &.active {
        scale: 1;
        opacity: 1;
      }
  
      & > ul.space-between {
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2em;
      }

      a {
        text-decoration: underline var(--sub-color);
        text-underline-offset: 10px;
        color: var(--main-color);
        text-shadow: none;
      }
  
    }
  }

}



@media screen and (width <= 768px) {
  #wrapper > header {
    padding: 8px clamp(var(--size_2), 5vw, var(--size_4));
  }
}





#wrapper > div .absolute:not(:has(h1)) {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background: linear-gradient(90deg, rgb(75 75 82 / 1) 0%, rgb(75 75 82 / .65) 34%, rgb(75 75 82 / 0) 57%);
  mix-blend-mode: multiply;
}

#wrapper > div .absolute:has(h1) {
  left: clamp(80px, 8.25vw, 160px);
  right: 0;
  top: 10vh;
  bottom: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 94px 0;

  h1 {
    line-height: 65px;
    letter-spacing: 5%;
    /* font-size: 34px; */

    .font_48 {
      /* font-size: 44px; */
    }
  }

  h1 + p {
    margin: 24px 0 0;
    line-height: 2.5em;
    letter-spacing: 5%;
  }

  div:has(> .btn) {
    gap: 18px 0;
    
    .btn {
      margin: 0;
      width: 435px;
      height: 60px;
  
      img {
        min-width: unset;
        min-height: unset;
      }
    }
  }
}



@media screen and (width <= 768px) {
  .height-100 {
    height: 80vh;
  }

  #wrapper > div .absolute:not(:has(h1)) {
    background: linear-gradient(90deg, rgb(75 75 82 / 1) 0%, rgb(75 75 82 / .65) 100%);
  }

  #wrapper > div .absolute:has(h1) {
    left: 50%;
    translate: -50% 0;
    right: auto;
    gap: 5vh 0;
    justify-content: flex-end;
    margin: 0 0 var(--size_5);

    h1 {
      font-size: 36px;
      line-height: 65px;
      width: fit-content;
      white-space: nowrap;

      & > span {
        font-size: 44px;
      }

      & + p {
        width: fit-content;
        margin: 1.5vh 0 0;
        line-height: 3.5vh;
      }

    }

    div:has(> .btn) {
      width: 100%;

      .btn {
        width: 100%;
        min-width: 340px;
        padding: 15px 17px;
      }
    }
  }
}




main > section:first-of-type {
  padding: var(--size_7) 0 var(--size_5);

  h2 {
    margin: 0 auto var(--size_4);
  }

  dl {
    width: 1024px;

    & > div {

      &:first-child {
        padding: 0 var(--size_5) 0 0;
      }

      &:nth-child(2) {
        padding: 0 var(--size_5);
      }

      &:last-child {
        padding: 0 0 0 var(--size_5);
      }

      .font_main-color {
        white-space: nowrap;
      }

      figcaption {
        margin: calc(var(--size_1) / 2) 0 0;
      }

      dd:last-of-type {
        margin: var(--size_1) 0 0;
        line-height: 30px;
      }
    }
  }
}



main > section:nth-of-type(2) {

  & > div {
    gap: var(--size_2);
    grid-template-columns: 636fr 445fr;
    
    .font_sub-color.font_24.bold_700 {
      margin: 0 auto var(--size_2);
    }

    p:last-of-type {
      margin: var(--size_2) 0 0;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}



main > section:nth-of-type(3) {

  & > div {
    gap: var(--size_3);
    grid-template-columns: 550fr 519fr;

    p:has(.font_140) {
      width: 318px;
      margin: var(--size_5) 0 0;
      line-height: 1;
      letter-spacing: 0;
      
      & + p {
        margin: var(--size_2) 0 0;
        width: 318px;
      }
    }
  }

  & > ul {
    margin: var(--size_4) auto;
    gap: var(--size_3);
    grid-template-columns: repeat(2, minmax(340px, 1fr));
  }
}



main > div:nth-of-type(1) {
  text-align: center;
  background: var(--white-color);

  & > img {
    height: 100%;
    object-fit: cover;
    object-position: bottom;
  }

  & > p {
    left: 0;
    right: 0;
    z-index: 1;
    margin: 160px 0 0;
    line-height: 1.625em;
    letter-spacing: 5%;
  }
}



main > section:nth-of-type(4) {

  & > ul {
    width: 1028px;
    margin: var(--size_5) auto 0;

    li > img {
      width: 60%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    li > div {
      width: 40%;

      .border-bottom {
        padding: 0 0 var(--size_2) 0;
        margin: 0 0 var(--size_2) 0;
      }

      dl {
        line-height: 30px;
        letter-spacing: 5%;

        dt::before {
          content: "■";
          display: inline-block;
        }

        dd:not(:last-of-type) {
          margin: 0 0 var(--size_2);
        }
      }
    }
  }
}



main > section:nth-of-type(5) {

  & > ol {
    grid-template-columns: 326fr 10fr 326fr 10fr 326fr;
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "first before second after third"
      "first ... second ... third";
    gap: 0 var(--size_1);
    margin: var(--size_4) auto 0;

    &::before,
    &::after {
      content: url(../images/icon_arrow.svg);
      display: inline-block;
      align-self: center;
    }

    &::before {
      grid-area: before;
    }

    &::after {
      grid-area: after;
    }

    li {

      &:nth-child(1) {
        grid-area: first;
      }

      &:nth-child(2) {
        grid-area: second;
      }

      &:nth-child(3) {
        grid-area: third;
      }

      h4 {
        margin: var(--size_2) 0 0;
        padding: 0 0 var(--size_2) 0;
        line-height: 1.625em;
        letter-spacing: 5%;
      }

      p {
        margin: var(--size_2) 0 0;
      }
    }
  }
}



main > section:nth-of-type(6) {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    width: 55%;
    min-height: 460px;
    right: 0;
    top: 0;
    background: url(../images/section_05-01.webp) no-repeat right bottom / cover;
  }

    &::after {
    content: "";
    position: absolute;
    width: 55%;
    min-height: 460px;
    left: 44.95%;
    top: 0;
    background: linear-gradient(90deg, rgb(248 246 241 / 1) 0%, rgba(248 246 241 / 0) 24%);
  }

  header {
    position: relative;
    z-index: 1;

    & > p {
      width: 45%;
    }
    
    & > p:last-of-type {
      margin: var(--size_3) 0 var(--size_6);
    }
  }

  & > ul li {

    & > hgroup {
      margin: var(--size_3) 0 0;
      padding: 0 0 var(--size_2);
      letter-spacing: 5%;
    }

    & > p {
      padding: var(--size_2) 0 0;
    }
  }
}



main > section:nth-of-type(7) {
  & > dl {
    margin: var(--size_4) auto;

    & > div {

      &:nth-child(1) {
        padding: 0 var(--size_4) 0 0;
      }

      &:nth-child(2) {
        padding: 0 var(--size_4);
      }

      &:nth-child(3) {
        padding: 0 0 0 var(--size_4);
      }

      figcaption {
        margin: var(--size_1) 0;
        line-height: 30px;
        letter-spacing: 5%;
      }

      dd:last-of-type {
        margin: var(--size_2) 0 0;
      }
    }
  }
}



main > section:nth-of-type(7) + div {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    min-height: 358px;
    right: 0;
    top: 0;
    background: url(../images/section_06-01.webp) no-repeat right center / cover;
  }

  &::after {
    content: "";
    position: absolute;
    width: 100%;
    min-height: 358px;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, rgb(27 94 69 / 1) 50%, rgb(27 94 69 / 0) 62%);
  }

  & > div {
    position: relative;
    z-index: 1;
    width: clamp(720px, 75%, 1466px);
    margin: 0 auto;
    padding: var(--size_6) 0 var(--size_10);

    & > p {
      line-height: 1.625em;
      letter-spacing: 5%;
    }
  }

  & > ul {
    position: relative;
    z-index: 1;

    & > li {
      width: clamp(480px, 36.5%, 698px);
      translate: 0 -50px;

      figure {
        margin: 0 0 25px;
      }

      .btn {
        min-width: 412px;
        margin: 15px auto ;
        letter-spacing: 0;
      }
    }
  }

  & > p {
    padding: 35px 0;
    line-height: 2em;
    letter-spacing: 10%;
  }
}



main > section:nth-of-type(8) {
  & > div {
    grid-template-columns: 557fr 524fr;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
    }
  }
}



@media screen and (width <= 768px) {

  main > section:nth-of-type(1)  {
    padding: var(--size_3) 0 var(--size_7);

    & > .font_main-color.font_40.bold_700 {
      margin: 0 auto var(--size_2);

      font-size: 30px;
      line-height: 1.5em;
      letter-spacing: 5%;

      & > .font_48 {
        font-size: 30px;
      }
    }

    dl {
      width: 80%;
      grid-template-columns: auto;
      padding: 35px var(--size_2);

      & > div {
        
        &:has([class]) {
          border: none;
          padding: 0;
        }
        
        &.separator {
          border-bottom: 1px solid var(--sub-color);
        }

        &:nth-child(1) {
          padding: 0 0 var(--size_4);
        }

        &:nth-child(2) {
          padding: var(--size_4) 0;
        }

        &:nth-child(3) {
          padding: var(--size_4) 0 0;
        }

        figcaption {
          font-size: 16px;
        }

        .font_main-color {
          font-size: 22px;
          margin: var(--size_2) 0;
        }

        dd:last-of-type {
          font-size: 16px;
        }

      }
    }
  }



  main > section:nth-of-type(2),
  main > section:nth-of-type(3) {

    & > div {
      width: 100%;
      grid-template-columns: auto;

      & > div {
        width: 80%;
        margin: 0 auto;

        .font_main-color.font_40.bold_700 {
          font-size: 24px;
          line-height: var(--size_3);
          letter-spacing: 0;

          & > .font_48 {
            font-size: 32px;
            line-height: 45px;
          }
        }
  
        .font_sub-color.font_24.bold_700 {
          font-size: var(--size_2);
          line-height: var(--size_3);
          margin: var(--size_2) 0 var(--size_6);

          & ~ p {
            font-size: 16px;
            text-align: justify;
            text-align-last: left;

            &:last-of-type {
              margin: var(--size_3) 0 var(--size_6);
            }
          }
        }
      }
    }
  }



  main > section:nth-of-type(2) {
    padding: calc(var(--size_4) + 5px) 0 0;

    & > div {
      
      & > img {
        /* max-width: none; */
        display: block;
        margin: 0 auto;
      }
    }
  }



  main > section:nth-of-type(3) {
    padding: calc(var(--size_4) + 5px) 0 var(--size_10);

    & > div {

      & > img {
        display: block;
        width: 80%;
        margin: 0 auto;
      }

      p:has(.font_140) {
        font-size: var(--size_6);

        & + p {
          font-size: 16px;
        }
      }
    }

    & > ul {
      grid-template-columns: auto;
      margin: var(--size_7) auto;

      li {
        width: 90%;
        margin: 0 auto;
        
        img {
          width: var(--size_5);;
          align-self: flex-start;
        }

        p {
          width: calc(100% - var(--size_5) - var(--size_2));
        }
      }

      & + p.font_main-color.font_40.bold_700 {
        width: 80%;
        text-align: left;
        font-size: 24px;
        line-height: var(--size_3);
        letter-spacing: 0;

        & .font_48 {
          font-size: 32px;
          line-height: 45px;
        }
      }
    }
  }



  main > div:nth-of-type(1) {
    min-height: 50vh;

    & > p.font_40.bold_700 {
      margin:  var(--size_3) 0 0;
      font-size: 24px;
      line-height: var(--size_3);
      letter-spacing: 0;

      & .font_48 {
        font-size: 32px;
        line-height: 45px;
      }
    }

    & > img {
      width: 100%;
      height: 100%;
      min-height: 50vh;
      object-fit: cover;
      object-position: bottom;
    }
  }



  main > section:nth-of-type(4) {

    & > h3 {

      & ~ p.font_main-color.font_40.bold_700 {
        width: 80%;
        font-size: 24px;
        line-height: var(--size_3);
        letter-spacing: 0;

        & .font_48 {
          font-size: 24px;
        }

        & ~ p {
          width: 80%;
          font-size: 16px;
          text-align: justify;
          text-align-last: left;
          margin: var(--size_2) auto var(--size_4);
        }
      }
    }

    & > ul {
      width: 80%;

      li {
        flex-direction: column;
      
        & > img,
        & > div {
          width: 100%;
        }

        & > div {
          
          & > h4 {
            font-size: 24px;
            line-height: var(--size_4);
            letter-spacing: 0;
          }

          & > p {
            font-size: 18px;
            line-height: 35px;
            letter-spacing: 5%;
          }

          & > dl {
            font-size: 14px;
            line-height: 25px;
            letter-spacing: 5%;
          }
        }
      }
    }
  }



  main > section:nth-of-type(5) {
    & > h3 ~ p.font_main-color.font_40.bold_700 {
      width: 80%;
      font-size: 24px;
      line-height: var(--size_3);
      letter-spacing: 0;
      
      & + p {
        width: 80%;
        margin: var(--size_1) auto var(--size_2);
        font-size: 16px;
        line-height: var(--size_2);
        letter-spacing: 0;
      }
    }

    & > ol {
      width: 80%;
      grid-template-columns: auto;
      grid-template-rows: repeat(5, auto);
      grid-template-areas:
        "first"
        "before"
        "second"
        "after"
        "third";
      gap: var(--size_2);

      &::before,
      &::after {
        justify-self: center;
        rotate: 90deg;
      }

      & li {
        h4 {
          font-size: 24px;
          line-height: var(--size_3);
          letter-spacing: 0; 
        }

        p {
          font-size: 14px;
          line-height: 25px;
          letter-spacing: 5%;
          text-align: justify;
          text-align-last: left;
        }

        img {
          display: block;
          margin: 0 auto;
        }
      }
    }
  }



  main > section:nth-of-type(6) {

    &::before {
        width: 55%;
        min-height: 400px;
        background: url(../images/section_05-01.webp) no-repeat 87.5% bottom / cover;
    }

    &::after {
        width: 55.05%;
        min-height: 400px;
        background: linear-gradient(90deg, rgb(248 246 241 / 1) 0%, rgb(248 246 241 / .8) 30%, rgba(248 246 241 / 0) 60%);
    }


    & header {
      
      & > h3 + p {
        width: 80%;
        padding: 0 0 0 10%;
        font-size: 24px;
        
        & > span {
          font-size: 32px;
        }
        
        & + p:last-of-type {
          width: 60%;
          padding: 0 0 0 10%;
          margin: var(--size_2) 0 var(--size_9);
          line-height: 25px;
          font-size: 14px;
        }
      }
    }

    & > ul {
      width: 80%;
      grid-template-columns: auto;
      gap: var(--size_5);

      & > li img {
        display: block;
        margin: 0 auto;
      }

      & > li hgroup {
        padding: 0 0 var(--size_1);

        h4 {
          font-size: 24px;
          line-height: var(--size_4);
          letter-spacing: 0;

          & + p.font_sub-color.font_24.bold_700 {
            font-size: var(--size_2);
            line-height: var(--size_3);
            letter-spacing: 5%;
          }
        }
      }

      & > li p {
        padding: var(--size_1) 0 0;
        font-size: 16px;
        line-height: var(--size_3);
        letter-spacing: 0;
        text-align: justify;
        text-align-last: left;
      }
    }
  }



  main > section:nth-of-type(7) {
    & > h3 ~ p {
      width: 90%;

      &.font_main-color.font_40.bold_700 {
        font-size: 24px;
        line-height: var(--size_3);
        letter-spacing: 0;

        & > .font_48 {
          font-size: 32px;
          line-height: 45px;
        }

        & + p.font_18 {
          font-size: 14px;
          line-height: 25px;
          letter-spacing: 5%;
          margin: var(--size_2) auto 0;
        }
      }
    }

    & > dl {
      width: 80%;
      grid-template-columns: auto;
      padding: var(--size_4) var(--size_3);

      & > div {

        &.separator {
          border: none;
          border-bottom: 1px solid var(--sub-color);
        }

        &:nth-child(1) {
          padding: 0 0 var(--size_5);
        }

        &:nth-child(2) {
          padding: var(--size_5) 0;
        }

        &:nth-child(3) {
          padding: var(--size_5) 0 0;
        }

        figcaption {
          font-size: 18px;
          letter-spacing: 10%;
        }

        dd.font_main-color.text-center.font_24.bold_700 {
          font-size: 20px;
          letter-spacing: 0;

          & + dd {
            font-size: 14px;
            line-height: 25px;
            letter-spacing: 5%;
          }
        }
      }
    }
  }



  main > section:nth-of-type(7) + div {

    &::before {
      min-height: 390px;
      background: url(../images/section_06-01-sp.webp) no-repeat 15% bottom / cover;
    }

    & > div {
      width: 100%;
      padding: var(--size_4) 0 var(--size_2) var(--size_2);

      & > p:nth-of-type(1) {
        font-size: 24px;
        line-height: 30px;
        letter-spacing: 0;
      }

      & > p:nth-of-type(2) {
        margin: var(--size_4) 0 0;
        width: 13em;
        font-size: 14px;
        line-height: 25px;
        letter-spacing: 5%;
      }
    }

    & > ul {
      flex-direction: column;
      align-items: center;
      gap: var(--size_5);

      & > li {
        width: 90%;
        translate: 0 var(--size_6);
        padding: var(--size_4) var(--size_2);

        .btn {
          min-width: 280px;
          padding: var(--size_2);
          gap: var(--size_1);
          font-size: 18px;
          line-height: 28px;
          letter-spacing: 0;

        }
        
        &:first-child .btn {
          font-size: 16px;
        }

        & > figure {
          margin: 0;

          & > figcaption.font_sub-color.font_24.bold_700 {
            font-size: 20px;
            letter-spacing: 0;
            letter-spacing: 10%;
          }
        }

        & > .font_main-color.font_24.bold_700 {
          font-size: 20px;
          letter-spacing: 0;
          margin: var(--size_1) 0 var(--size_2);
        }

        small.font_16 {
          font-size: 14px;
          line-height: 25px;
          letter-spacing: 5%;
        }
      }
    }

    & > p {
      width: 90%;
      margin: var(--size_7) auto 0;
      font-size: 24px;
      line-height: var(--size_3);
      letter-spacing: 0;

      & .font_40 {
        font-size: 32px;
        line-height: 45px;        
      } 
    }
  }



  main > section:nth-of-type(8) {
    & > h3 ~ div {
      width: 90%;
      grid-template-columns: auto;
      grid-template-rows: auto 1fr;
      gap: var(--size_4);

      & .font_main-color.font_40.bold_700 {
        font-size: 24px;
        line-height: var(--size_3);
        letter-spacing: 0;

        & + p {
          margin: var(--size_4) auto 0;
          font-size: 14px;
          line-height: 25px;
          letter-spacing: 5%;
          text-align: justify;
          text-align-last: left;
        }
      }

      & > img {
        max-width: none;
        width: 100%;
        height: auto;
      }



    }
  }
}




footer {
  padding: var(--size_9) 0 var(--size_8);

  img + p {
    margin: var(--size_2) 0 var(--size_5);
  }

  ul {
    gap: 0 clamp(30px, 4.5vw, 65px);
    margin: 0 0 var(--size_8);
    line-height: 30px;
    letter-spacing: 5%;
  }
}



@media screen and (width <= 1024px) {
  
}



@media screen and (width <= 768px) {
  footer {
    ul {
      gap: 0 clamp(12px, 3.5vw, 15px);

      li a {
        font-size: 14px;
        line-height: 25px;
        letter-spacing: 5%;
      }
    }
  }
}



@media screen and (min-width: 769px) and (max-width: 1024px) {

  main .font_40 {
    font-size: 1.875rem;
  }

  main .font_48 {
    font-size: 2.25rem;
  }

  main .font_38 {
    font-size: 1.875rem;
  }

  main .font_140 {
    font-size: 92px;
  }

  main > section:first-of-type dl {
    width: clamp(720px, 75%, 1466px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--size_4) var(--size_3);
  }

  main > section:first-of-type dl > div:first-child {
    padding: 0 var(--size_2) 0 0;
  }

  main > section:first-of-type dl > div:nth-child(2) {
    padding: 0 var(--size_2);
  }

  main > section:first-of-type dl > div:last-child {
    padding: 0 0 0 var(--size_2);
  }

  main > section:first-of-type dl > div .font_main-color {
    white-space: normal;
  }

  main > section:nth-of-type(4) > ul {
    width: clamp(720px, 75%, 1466px);
  }

  main > section:nth-of-type(7) > dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  main > section:nth-of-type(7) > dl > div:nth-child(1) {
    padding: 0 var(--size_2) 0 0;
  }

  main > section:nth-of-type(7) > dl > div:nth-child(2) {
    padding: 0 var(--size_2);
  }

  main > section:nth-of-type(7) > dl > div:nth-child(3) {
    padding: 0 0 0 var(--size_2);
  }

  main > div:nth-of-type(1) > p {
    margin: 100px 0 0;
  }

  main > section:nth-of-type(6) > ul {
    gap: var(--size_2);
  }

  main > section:nth-of-type(6) > ul li hgroup h4 {
    font-size: 28px;
    letter-spacing: 0;
  }

  main > section:nth-of-type(7) + div > ul {
    flex-direction: column;
    align-items: center;
    gap: var(--size_5);
  }

  main > section:nth-of-type(7) + div > ul > li {
    width: min(80%, 520px);
    translate: 0 -30px;
  }

  main > section:nth-of-type(7) + div > ul > li .btn {
    min-width: 0;
    width: 100%;
  }
}



#orientation-lock {
  display: none;
}

@media screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #orientation-lock {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;
    justify-content: center;
    align-items: center;
    padding: var(--size_4);
    background: var(--main-color);
    color: var(--white);
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
  }

  #orientation-lock .orientation-lock__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size_2);
  }

  #orientation-lock .material-symbols-outlined {
    font-size: 64px;
    animation: rotate-hint 2.5s ease-in-out infinite;
  }

  #orientation-lock p {
    line-height: 1.8;
    letter-spacing: 5%;
  }

  #orientation-lock p:first-of-type {
    font-size: 1.25rem;
    font-weight: 700;
  }

  #orientation-lock small {
    font-size: .8rem;
    opacity: .85;
  }

  body {
    overflow: hidden;
  }
}

@keyframes rotate-hint {
  0%, 40% {
    transform: rotate(0deg);
  }

  60%, 100% {
    transform: rotate(-90deg);
  }
}