/* 読み込み前 */
body.top {
  --easing-out: cubic-bezier(0.55, 0.05, 0.22, 0.99);
  --easing: cubic-bezier(0.3, 0.015, 0.12, 1);
  --delay: 0.5s;
  --duration:.5s;
  --section-radius: 2rem;
  --bg-color: #f1f2f4;
  &:not(.is-loaded) {
    cursor: wait;

    #renewal-wrap {
      opacity: 0;
      position: relative;
    }

    .p-loading-fade-in {
      opacity: 0;
    }
    .p-loading-scale-in {
      opacity: 0;
      scale: 0.8;
    }
  }
  &.is-loaded {
    cursor: inherit;
    #renewal-wrap {
      opacity: 1;
      &:before {
        opacity: 1;
      }
    }
    .p-loading-fade-in {
      opacity: 1;
    }
    .p-loading-scale-in {
      opacity: 1;
      scale: 1;
    }
  }
}

body.top #renewal-wrap {
  transition: opacity 0.3s var(--easing-out);
  transition-property: background-color, opacity;
  position: relative;
  border: none !important;

  @media(min-width:1024px){
    background-color: transparent !important;
  }
  @media(max-width:1023px){
    background-color: #EDEDF0;
  }

  &:before {
    border-radius: var(--section-radius) var(--section-radius) 0 0;
    content: "";
    border-top: 1px solid #dadfe0;
    pointer-events: none;
    background-color: var(--bg-color);
    opacity: 0;
    position: absolute;
    inset: 0;
    transition: opacity var(--duration) var(--delay) var(--easing);
  }
}

.p-loading-fade-in {
  transition: opacity var(--duration) var(--delay) var(--easing);
}
.p-loading-scale-in {
  transition: 1s var(--delay) var(--easing);
  transition-property: scale, opacity;
}

@media (min-width: 1024px) {
  body.top .l-header:not(.is-fixed) {
    translate: 0 -4rem;
    position: relative;
    z-index: var(--header-index);
  }
}

@media (min-width: 1024px) {

}

.p-top-fv {
  .p-slide-up-wrapper {
    display: inline-block;
    clip-path: inset(-30% 0 -5%);
  }
}

.p-slide-up {
  translate: 0 1.5lh;
  display: inline-block;
  transition: translate 0.76s 0.3s cubic-bezier(0.3, 0.015, 0.12, 1);

  .is-loaded & {
    translate: 0 0;
  }
}