/* fv */
body#top section.fv {
  position: relative;
  height: 250vh;

  &::after {
    content: "";
    display: block;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1;
    margin-top: -100vh;
    width: 100%;
    height: 100vh;
    /* aspect-ratio: 15 / 10; */
    background-color: rgba(0, 0, 0, .2);
    transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
    pointer-events: none;
  }

  &.active {
    &::after {
      background-color: rgba(0, 35, 40, .6);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }

    .concept {
      ol li {
        &:first-child {
          opacity: 0 !important;
        }

        &:last-child {
          opacity: 1 !important;

          h2,
          p {
            opacity: 1 !important;
            transform: unset !important;
            transition:
              opacity 1s .2s cubic-bezier(.7, .3, .55, 1),
              transform 4s .2s cubic-bezier(.11, .76, .26, 1);
          }

          .explanation {
            opacity: 1 !important;
            transform: unset !important;
            transition:
              opacity 1s .6s cubic-bezier(.7, .3, .55, 1),
              transform 2s .6s cubic-bezier(.11, .76, .26, 1);
          }
        }
      }

      figcaption {
        opacity: 0;
      }
    }
  }

  &.scroll {}

  #canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: var(--opacity);

    &.vis {
      opacity: 1;
    }

    canvas {
      height: 100% !important;
      object-fit: cover;
    }
  }

  .image {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100vh;
    /* aspect-ratio: 15 / 10; */
    /* opacity: 0; */
    /* transition: var(--opacity); */
    transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);

    figure {
      height: 100%;
    }

    img {
      object-fit: cover;
      /* display: none; */
    }

    @media all and (max-width: 768px) {
      img {
        object-fit: cover;
        /* display: none; */
      }
    }
  }

  .displacement {
    height: 100%;
  }

  .conceptContainer {
    position: relative;
    height: 250vh;
  }

  .concept {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
    margin-top: -100vh;
    width: 100%;
    height: 100vh;
    /* aspect-ratio: 15 / 10; */
    overflow: hidden;
    pointer-events: none;
    transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);

    .container {
      height: 100%;

      ol {
        position: relative;
        height: 100%;

        li {
          position: absolute;
          width: 100%;
          color: var(--bodycolor);
          transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);

          &:first-child {
            left: 50%;
            bottom: 4rem;
            transform: translateX(-50%);
            text-align: center;
            opacity: 1;
            width: 90%;
            max-width: 800px;

            h2 {
              font-size: 1.4rem;
              letter-spacing: .4rem;
            }

            p {
              letter-spacing: .2rem;
              text-shadow: 0px 0px 10px #000;
              position: relative;

              .big {
                font-size: 2.5rem;
              }

              .small {
                position: absolute;
                width: 3%;
                top: 58%;
                transform: translateY(-50%);
              }
            }
          }

          &:last-child {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 100%;
            opacity: 0;

            &>div {
              &.headcopy {
                h2 {
                  font-size: 1.2rem;
                  letter-spacing: .2rem;
                  text-align: center;
                  opacity: 0;
                  transform: translateX(-100px);
                  transition:
                    opacity 1s 0 cubic-bezier(.7, .3, .55, 1),
                    transform 1s 0 cubic-bezier(.11, .76, .26, 1);
                }

                p {
                  font-size: 2rem;
                  letter-spacing: .2rem;
                  opacity: 0;
                  transform: translateX(100px);
                  transition:
                    opacity 1s 0 cubic-bezier(.7, .3, .55, 1),
                    transform 1s 0 cubic-bezier(.11, .76, .26, 1);
                }
              }

              &.explanation {
                line-height: 2.5rem;
                opacity: 0;
                transform: translateY(100px);
                transition:
                  opacity 1s 0 cubic-bezier(.7, .3, .55, 1),
                  transform 1s 0 cubic-bezier(.11, .76, .26, 1);

                span {
                  display: inline-block;
                  line-height: 1em;
                  opacity: 0;
                }
              }
            }
          }
        }
      }
    }

    figcaption {
      position: absolute;
      right: 5px;
      bottom: 5px;
      font-size: 75%;
      color: var(--bodycolor);
      transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
    }

    .announce_wrap {
      background-color: #fff;
    }

    .headline {
      position: absolute;
      top: 10%;
      left: 4%;
      width: 12%;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;

      &.is-visible {
        opacity: 1;
        visibility: visible;
      }
    }

    @media all and (max-width: 768px) {
      .headline {
        top: 1%;
        left: 2%;
        width: 25%;

        /* p {
          font-size: 2rem;
          /* line-height: 1.8; */
        /* letter-spacing: .2rem; */

        .bg {
          padding: 0 0.5rem;

          .num {
            letter-spacing: .25rem;
          }

          .small {
            font-size: 1.2rem;
            padding-left: .5rem;
          }
        }
      }
    }
  }
}


body#top section.fv .video {
  position: sticky;
  left: 0;
  top: 0;
}

body#top section.fv video {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 15 / 10;
  opacity: 0;
  transition: var(--opacity);
}

body#top section.fv.end video {
  opacity: 0;
}

body#top section.fv.end .image {
  opacity: 1;
}

body#top section.fv button {
  position: absolute;
  left: 5px;
  bottom: 5px;
  z-index: 2;
  padding: .2rem 1rem;
  font-family: "EB Garamond", serif;
  font-size: 120%;
  color: var(--bodycolor);
  background-color: var(--leadcolor);
  border: none;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: var(--all);

}

body#top section.fv.play button {
  pointer-events: all;
  opacity: 1;
}

body#top section.fv.end button {
  pointer-events: all;
  opacity: 1;
}


/* usp */
body#top section.usp {
  position: relative;
  padding: 0;
  /* color: var(--bodycolor); */
  background-image: url(../img/top/usp_bg.webp);
  background-position: center bottom;
  background-size: cover;
  overflow: hidden;
}

body#top section.usp ol.point {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin-top: 1rem;
}

body#top section.usp ol.point li:nth-child(1) {
  color: #3c3c3c;
}

body#top section.usp ol.point li:nth-child(1)>p {
  font-size: 1.2rem;
}

body#top section.usp ol.point li:nth-child(1)>p sup {
  font-size: .6rem;
  vertical-align: top;
}

body#top section.usp ol.point li:nth-child(1)>div {
  display: flex;
  align-items: flex-end;
}

body#top section.usp ol.point li:nth-child(1)>div p:nth-child(1) {
  font-size: 1.2rem;
  line-height: 1rem;
}

body#top section.usp ol.point li:nth-child(1)>div p:nth-child(1) span {
  display: block;
  font-size: .9rem;
  line-height: 2rem;
  letter-spacing: .45rem;
}

body#top section.usp ol.point li:nth-child(1)>div p:nth-child(2) {
  font-size: 1.6rem;
  line-height: 1em;
}

body#top section.usp ol.point li:nth-child(1)>div p:nth-child(2) span.b {
  font-size: 2.6rem;
}

body#top section.usp ol.point li:nth-child(1)>div p:nth-child(2) span.n {
  margin-bottom: -.2rem;
  font-family: "EB Garamond", serif;
  font-size: 10rem;
  line-height: 0;
  color: var(--themecolor------);
  vertical-align: sub;
}

body#top section.usp ol.point li:nth-child(2) {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin-top: -1rem;
  color: var(--leadcolor------);
}

body#top section.usp ol.point li:nth-child(2) p {
  /* text-align: center; */
  letter-spacing: .1rem;
}

body#top section.usp ol.point li:nth-child(2) p:nth-child(1) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

body#top section.usp ol.point li:nth-child(2) p:nth-child(2) {
  display: flex;
  align-items: center;
}

body#top section.usp ol.point li:nth-child(2) p:nth-child(2)::before {
  content: "";
  display: inline-block;
  margin-right: .2rem;
  width: .5rem;
  height: 1em;
  border-top: var(--leadcolor------) solid 1px;
  border-bottom: var(--leadcolor------) solid 1px;
  border-left: var(--leadcolor------) solid 1px;
}

body#top section.usp ol.point li:nth-child(2) p:nth-child(2)::after {
  content: "";
  display: inline-block;
  margin-left: .2rem;
  width: .5rem;
  height: 1em;
  border-top: var(--leadcolor------) solid 1px;
  border-bottom: var(--leadcolor------) solid 1px;
  border-right: var(--leadcolor------) solid 1px;
}

body#top section.usp ol.point li:nth-child(2) p:nth-child(1) span.n {
  padding-bottom: .3rem;
  font-family: "EB Garamond", serif;
  font-size: 3rem;
}

body#top section.usp ol.point li:nth-child(2) p:nth-child(2) {
  font-size: 1.2rem;
  line-height: .5rem;
}

body#top section.usp ol.point li:nth-child(2) p:nth-child(2) span.n {
  font-family: "EB Garamond", serif;
  font-size: 1.6rem;
}

body#top section.usp ol.point li:nth-child(2) p:nth-child(2) sup {
  align-self: flex-start;
  font-size: .6rem;
}

/* announce_wrap */
body#top section.usp div.container {
  padding: 2rem 100px 1rem;
}

body#top section.usp div.announce_wrap {
  /* background-color: #fff; */
  text-align: center;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid var(--themecolor------);
  width: fit-content;
  margin: 0 auto;
  padding: 1% 2%;
  /* padding-block: 2%; */
}

body#top section.usp div.announce_wrap p {
  color: var(--themecolor------);
  font-family: "EB Garamond", serif;
  font-size: 2.6rem;
  letter-spacing: .18rem;
  font-weight: 600;
}

body#top section.usp div.announce_wrap .small {
  font-size: 1.8rem;
}

body#top section.usp div.announce_wrap .num {
  font-size: 3.2rem;
}



/* cfa */
body#top section.usp div.cfa {
  /* padding: 2rem 0 4rem 0; */
}

body#top section.usp div.cfa .container {
  padding: .5rem 100px;
  /* max-width: 800px; */
}

body#top section.usp div.cfa .merit {
  position: relative;
  margin-top: 1rem;
  /* padding-bottom: 1.5rem; */
  /* color: #3c3c3c; */
  border-top: var(--subcolor) solid 1px;
  border-bottom: var(--subcolor) solid 1px;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: var(--subcolor);
  }
}

body#top section.usp div.cfa .merit ol {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch;
  justify-content: space-between;
  padding: 1rem 0 .5rem 0;
}

body#top section.usp div.cfa .merit ol li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 1.1rem;
  line-height: 1.5rem;
  text-align: center;

  &:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

body#top section.usp div.cfa .merit ol li p span.n {
  font-family: "EB Garamond", serif;
  font-size: 2.4rem;
  letter-spacing: 0;
  color: var(--themecolor------);
}

body#top section.usp div.cfa .merit ol li p span.b {
  /* display: block; */
  font-size: 1.6rem;
  letter-spacing: .1rem;
  font-weight: 500;
  color: var(--themecolor------);
}

body#top section.usp div.cfa .merit ol li p span.s {
  font-size: 1rem;
  letter-spacing: .1rem;
}

body#top section.usp div.cfa .merit ol li p sup {
  position: relative;
  top: -0.5rem;
  font-size: .6rem;
}

body#top section.usp div.cfa .merit ol li:not(:nth-child(1)):nth-child(-n+4)::after {
  content: "";
  position: absolute;
  right: -2rem;
  top: 50%;
  width: 1px;
  height: 2.5rem;
  background-color: var(--maincolor);
  transform: translateY(-50%);
  /* clip-path: polygon(0 100%, calc(100% - 1px) 0, 100% 0, 0 calc(100% + 1px)); */
}

body#top section.usp div.cfa .merit ol li:nth-child(1) {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: .5rem;
  color: var(--themecolor------);

  p {
    position: relative;

    &:nth-child(1) {
      &::after {
        content: "";
        position: absolute;
        right: -2rem;
        top: 45%;
        width: 1px;
        height: 2.5rem;
        background-color: var(--maincolor);
        transform: translateY(-50%);
      }
    }
  }
}

body#top section.usp div.cfa .merit p.annotation {
  margin-top: .5rem;
  font-size: .6rem;
  text-align: right;
  letter-spacing: .05rem;
}

body#top section.usp div.cfa .sale {
  font-size: clamp(1rem, 2vw, 2rem);
  color: var(--bodycolor);
  background-color: var(--leadcolor);
}

body#top section.usp div.cfa .sale figure {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  column-gap: 0;
  margin: auto;
  padding: 1rem 0;
  max-width: 1400px;
  font-size: clamp(1rem, 2vw, 2rem);
}

body#top section.usp div.cfa .sale figure picture {
  display: contents;
}

body#top section.usp div.cfa .sale figure picture img {
  width: calc(100% - clamp(8rem, 16vw, 16rem));
}

body#top section.usp div.cfa .sale figure figcaption {
  position: relative;
  right: unset;
  /* bottom: clamp(.2rem, .5vw, .5rem); */
  width: calc(100% - clamp(8rem, 16vw, 16rem));
  font-size: 40%;
  line-height: 1rem;
  text-align: justify;
}


/* body#top section.usp div.cfa .sale .list {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(2rem, 3vw, 3rem);
  margin: auto;
  padding: 1rem 0;
  max-width: 1400px;
  font-size: clamp(1rem, 2vw, 2rem);
}
body#top section.cfa .sale .list p {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
body#top section.cfa .sale .list .annotation {
  margin-left: clamp(-2rem, -2vw, -1rem);;
  font-size: 40%;
  line-height: 2em;
}
body#top section.cfa .sale .list p .t {
  display: inline-block;
  padding: .3rem .5rem .5rem;
  letter-spacing: .1rem;
  line-height: 1em;
  color: var(--subcolor-);
  border: var(--leadcolor----) solid 1px;
  background-color: #f8f8f8;
}
body#top section.cfa .sale .list p .n {
  display: contents;
  font-family: "perpetua_l";
  font-size: 160%;
  letter-spacing: .1rem;
  color: var(--leadcolor);
  color: #f8ecbb;
} */

body#top section.usp div.cfa .information {
  margin: 4rem 0;
}

body#top section.usp div.cfa .information .title {
  font-family: "perpetua_l";
  font-size: 1rem;
  letter-spacing: .2rem;
  color: var(--leadcolor);
  text-align: center;
}

body#top section.usp div.cfa .information .text {
  margin-top: .5rem;
  padding: .75rem 0;
  font-size: 1.8rem;
  line-height: 1.8rem;
  letter-spacing: .4rem;
  text-align: center;
}

body#top section.usp div.cfa .information ol {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 1rem;

  li {
    width: 16rem;

    a {
      display: block;
      padding: .5em 0;
      font-size: 1.2rem;
      text-align: center;
      color: var(--bodycolor);
      transition: var(--opacity);

      &:hover {
        opacity: .6;

        p {
          span.ar {
            right: 10px;
            width: 20px;
          }
        }
      }

      p {
        position: relative;

        span.ar {
          position: absolute;
          right: -10px;
          top: 50%;
          width: 40px;
          height: 1px;
          background-color: var(--bodycolor);
          transition: var(--all);

          &:before {
            content: "";
            position: absolute;
            top: calc(50% - 1px);
            right: 0;
            width: 5px;
            height: 1px;
            background-color: var(--bodycolor);
            transform: rotate(45deg);
            transform-origin: calc(100% - 1px) 50%;
          }
        }
      }
    }

    &.request {
      a {
        background-color: var(--leadcolor------);
      }
    }

    &.reserve {
      a {
        background-color: var(--themecolor------);
      }
    }
  }
}


/* body#top section.usp div.cfa .information a {
  position: relative;
  display: block;
  transition: var(--button);
}
body#top section.usp div.cfa .information a:hover {
  background-color: var(--themecolor);
}
body#top section.usp div.cfa .information a p span.ar {
  position: absolute;
  right: 0;
  top: 50%;
  width: 60px;
  height: 1px;
  background-color: var(--subcolor);
  transition: var(--all);
}
body#top section.usp div.cfa .information a p span.ar::before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 10px;
  height: 1px;
  background-color: var(--subcolor);
  transform: rotate(45deg);
  transform-origin: calc(100% - 1px) 50%;
}
body#top section.usp div.cfa .information a:hover p span.ar {
  right: -20px;
} */

body#top section.usp div.cfa .information .holiday {
  margin: 3rem auto 0;
  padding: .5rem 1rem;
  text-align: center;
  background-color: #f8f8f8;
  border-bottom: var(--subcolor) solid 1px;

  &.r {
    color: #ca0000;
    background-color: transparent;
    border: #ca0000 solid 1px;
  }
}

body#top section.usp {
  h2 {
    padding: .3rem 0 .5rem;
    font-size: 1.4rem;
    line-height: 1em;
    letter-spacing: .2rem;
    text-align: center;
    color: var(--bodycolor);
    background-color: var(--leadcolor);
  }

  div.\31 floor {
    margin-top: -2rem;

    .container {
      padding: unset;
    }

    .\31 floor_btn {
      margin: auto;
      max-width: 540px;
      transition: var(--opacity);

      &:hover {
        opacity: .6;
      }

      a {
        position: relative;
        z-index: 0;
        display: block;
        background-color: #dfe1e5;
        outline: var(--bodycolor) solid 1px;
        outline-offset: -4px;

        figure {
          video {
            position: relative;
            z-index: -1;
            width: 100%;
          }

          figcaption {
            color: var(--bodycolor);
            bottom: 5px;
            right: 10px;
          }

          span {
            position: absolute;
            bottom: 5px;
            left: 10px;
            font-size: .6rem;
            line-height: 1em;
            color: var(--bodycolor);
          }
        }

        div {
          padding: 1rem 0 2rem;

          p {
            font-size: 1.6rem;
            text-align: center;

          }

          button {
            display: block;
            margin: 1rem auto 0;
            padding: .5rem 2rem;
            font-family: "perpetua_l";
            font-size: .8rem;
            letter-spacing: .2rem;
            color: var(--bodycolor);
            background-color: #959fab;
            border: unset;
            pointer-events: none;

            &::after {
              display: none;
            }
          }
        }
      }

      .annotation {
        font-size: .6rem;
        letter-spacing: .05rem;
      }
    }

    ol {
      &.buttons {
        display: flex;
        gap: 2rem;
        padding: 2rem 0 4rem;

        li {
          width: calc(50% - 2rem);
          background-color: var(--bodycolor);

          a {
            transition: var(--opacity);

            &:hover {
              opacity: .6;
            }

            figure {
              figcaption {
                color: var(--maincolor);
              }
            }
          }
        }
      }
    }
  }

  .bnr_area {
    max-width: 700px;
    width: 90%;
    margin: 0 auto 5%;

    @media all and (max-width: 768px) {
      width: 95%;
    }

    .bnr {
      transition: var(--opacity);

      @media (any-hover: hover) {
        &:hover {
          opacity: .6;
        }
      }
    }
  }

  .owner_btn {
    margin: auto;
    max-width: 540px;
    transition: var(--opacity);

    &:hover {
      opacity: .6;
    }

    a {
      position: relative;
      z-index: 0;
      display: block;
      background-color: #dfe1e5;
      outline: var(--bodycolor) solid 1px;
      outline-offset: -4px;

      figure {
        z-index: -1;

        figcaption {
          color: var(--bodycolor);
          bottom: 5px;
          right: 10px;
        }
      }

      div {
        padding: 1rem 0 2rem;

        p {
          font-size: 1.6rem;
          text-align: center;

        }

        button {
          display: block;
          margin: 1rem auto 0;
          padding: .5rem 2rem;
          font-family: "perpetua_l";
          font-size: .8rem;
          letter-spacing: .2rem;
          color: var(--bodycolor);
          background-color: #959fab;
          border: unset;
          pointer-events: none;

          &::after {
            display: none;
          }
        }
      }
    }
  }

  div.\31 floor {
    margin-top: 2rem;

    .container {
      padding: unset;
    }

    .\31 floor_btn {
      margin: auto;
      max-width: 540px;
      transition: var(--opacity);

      &:hover {
        opacity: .6;
      }

      a {
        position: relative;
        z-index: 0;
        display: block;
        background-color: #dfe1e5;
        outline: var(--bodycolor) solid 1px;
        outline-offset: -4px;

        figure {
          video {
            position: relative;
            z-index: -1;
            width: 100%;
          }

          figcaption {
            color: var(--bodycolor);
            bottom: 5px;
            right: 10px;
          }

          span {
            position: absolute;
            bottom: 5px;
            left: 10px;
            font-size: .6rem;
            line-height: 1em;
            color: var(--bodycolor);
          }
        }

        div {
          padding: 1rem 0 2rem;

          p {
            font-size: 1.6rem;
            text-align: center;

            span {
              display: block;
              font-size: 80%;
            }
          }

          button {
            display: block;
            margin: 1rem auto 0;
            padding: .5rem 2rem;
            font-family: "perpetua_l";
            font-size: .8rem;
            letter-spacing: .2rem;
            color: var(--bodycolor);
            background-color: #959fab;
            border: unset;
            pointer-events: none;

            &::after {
              display: none;
            }
          }
        }
      }

      .annotation {
        font-size: .6rem;
        letter-spacing: .05rem;
      }
    }

    ol {
      &.buttons {
        display: flex;
        gap: 2rem;
        padding: 2rem 0 4rem;

        li {
          width: calc(50% - 2rem);
          background-color: var(--bodycolor);

          a {
            transition: var(--opacity);

            &:hover {
              opacity: .6;
            }

            figure {
              figcaption {
                color: var(--maincolor);
              }
            }
          }
        }
      }
    }
  }
}


/* concept */
body#top section.concept {
  padding: 4rem 0 14rem;
  background-image: url(../img/top/concept_bg.webp);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

body#top section.concept h2 {
  font-family: "perpetua_l";
  font-size: 1rem;
  letter-spacing: .2rem;
  color: var(--leadcolor);
  text-align: center;
}

body#top section.concept .headcopy {
  font-size: 1.8rem;
  letter-spacing: .2rem;
  text-align: center;
}

body#top section.concept .bodycopy {
  margin-top: 2rem;
  font-size: 1.1rem;
  line-height: 2.4rem;
  text-align: center;
}

body#top section.concept .bodycopy sup {
  position: relative;
  top: -0.5rem;
  font-size: .6rem;
}

/* */
.jarallax {
  .jarallax-img {
    position: absolute !important;
  }

  &.in-view {
    .jarallax-img {
      position: fixed !important;
      transition: transform .4s var(--easeOutSine);
    }
  }
}

body#top section:not(.fv) ol.iv {
  li {
    position: relative;
    /* display: flex; */
    width: 100%;

    figure {
      height: 100%;

      picture {
        display: block;
        height: 100%;

        img {
          height: 100%;
          object-fit: cover;
          transition: transform 3.6s .0s cubic-bezier(.11, .76, .26, 1);
        }
      }
    }

    figcaption {
      position: absolute;
      right: 5px;
      bottom: 5px;
      z-index: 1;
      font-size: .6rem;
      line-height: 1em;
      text-align: right;
      color: var(--bodycolor);
    }

    p {
      position: absolute;
      font-size: 2rem;
      line-height: 3rem;
      letter-spacing: .3rem;
      color: var(--bodycolor);
      text-shadow: 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1);
      opacity: 0;
    }

    &.in-view {
      img {
        transform: scale(1);
      }

      p {
        opacity: 1;
      }
    }
  }
}

body#top section:not(.fv) figure figcaption {
  color: var(--bodycolor);
}

body#top section:not(.fv) {
  >.title {
    >div {
      &:not(.images) {
        h2 {
          font-family: "perpetua_l";
          font-size: 1.4rem;
          letter-spacing: .2rem;
          color: var(--leadcolor------);
        }

        .explanation {
          margin-top: 1rem;
          font-size: 1.4rem;
          line-height: 2rem;
          letter-spacing: .3rem;

          sup {
            position: relative;
            top: -0.5rem;
            left: -1rem;
            font-size: .6rem;
          }
        }
      }
    }
  }

  button {
    position: relative;
    margin-top: 2rem;
    padding-right: 2.5rem;
    font-family: "perpetua_l";
    font-size: 1rem;
    letter-spacing: .2rem;
    color: var(--leadcolor------);
    background: none;
    border: unset;
    cursor: pointer;
    transition: var(--opacity);

    &::after {
      content: "";
      position: absolute;
      left: -.5rem;
      bottom: -.5rem;
      width: 10.5rem;
      height: 2px;
      background-color: var(--leadcolor------);
    }

    span.ar {
      position: absolute;
      right: 0;
      top: 50%;
      width: 1rem;
      height: 1px;
      background-color: var(--leadcolor------);
      transition: var(--all);

      &:before {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        width: 5px;
        height: 1px;
        background-color: var(--leadcolor------);
        transform: rotate(45deg);
        transform-origin: calc(100% - 1px) 50%;
      }
    }

    &:hover {
      opacity: .6;

      span.ar {
        right: -1rem;
      }
    }
  }
}


/* location */
body#top section.location {
  background-color: #ebecef;
  overflow: hidden;

  ol {
    display: flex;

    li {
      width: 50%;
      height: 150vh;

      figure {
        picture {}
      }

      figcaption {}

      p {
        transform: translateY(-50%);
      }

      &:first-child {
        p {
          top: 50%;
          right: 5px;
        }
      }

      &:last-child {
        p {
          top: 50%;
          left: 5px;
        }
      }
    }
  }

  >.title {
    display: flex;
    align-items: center;
    height: 40vw;

    >div {
      width: 50%;

      &:not(.images) {
        padding-left: calc((100vw - 1000px) / 2);
      }

      &.images {
        position: relative;
        height: 100%;

        figure {
          &:first-child {
            position: absolute;
            left: 0;
            top: 3rem;
            width: 30%;
          }

          &:last-child {
            position: absolute;
            right: 0;
            bottom: 3rem;
            width: 70%;
          }
        }
      }
    }
  }

  >.explanation {
    display: flex;
    height: 43.8vw;
    margin-top: -2.5vw;

    >div {
      width: 50%;

      &.images {
        position: relative;

        figure {
          position: absolute;
          left: 0;
          top: 0;
          width: 33vw;
          height: 43.82vw;

          video {
            width: 100%;
          }
        }
      }

      &:not(.images) {
        align-self: center;
        margin-top: -2.5rem;

        p {
          font-size: 1rem;
          line-height: 3rem;
          letter-spacing: .2rem;
        }
      }
    }
  }
}


body#top main div.bg {
  padding: 2rem 0;
  background-color: #aab0ba;
}


/* design */
body#top section.design {
  background-color: #f0ebe5;
  overflow: hidden;

  ol {
    li {
      height: 150vh;

      figure {}

      figcaption {}

      p {
        right: 5px;
        bottom: 1.5rem;
      }
    }
  }

  >.title {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-top: 6rem;
    height: 33vw;
    background-color: #f0ebe5;
    z-index: 1;

    >div {
      width: 50%;

      &:not(.images) {
        padding-left: 8rem;
      }
    }
  }

  >.explanation {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 6rem;
    height: 17.7vw;
    background-color: #f0ebe5;

    >div {
      width: 50%;

      &.images {
        position: relative;

        figure {
          position: absolute;
          left: 0;
          top: 0;
          width: 25vw;
        }
      }

      &:not(.images) {}
    }
  }
}


/* plan */
body#top section.plan,
body#top section.access {
  padding: 4rem 0;
  overflow: hidden;

  ol.iv {
    li {
      width: 90vw;
      height: 22.276vw;

      figure {
        video {
          width: 100%;
        }
      }
    }
  }

  >.title {
    display: flex;
    align-items: center;
    margin-top: 6rem;
    height: 31vw;

    >div {
      width: 50%;

      &:not(.images) {
        padding-left: 8rem;

        .explanation,
        button {
          color: var(--bodycolor);

          span.ar,
          span.ar::before {
            background-color: var(--bodycolor);
          }
        }
      }
    }
  }
}

body#top section.plan {
  ol {
    &.iv {
      li {
        figure {
          figcaption {
            color: var(--maincolor);
          }
        }
      }
    }

    &.buttons {
      display: flex;
      gap: 2rem;
      padding: 4rem 0;

      li {
        width: calc(50% - 2rem);
        background-color: var(--bodycolor);

        a {
          transition: var(--opacity);

          &:hover {
            opacity: .6;
          }

          figure {
            figcaption {
              color: var(--maincolor);
            }
          }
        }
      }
    }
  }
}

/* achievement */
body#top section.achievement {
  padding: 4rem 0;
}

body#top section.achievement .container {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem 4rem;
  border-top: var(--leadcolor------) solid 2px;
  border-bottom: var(--leadcolor------) solid 2px;
}

body#top section.achievement .container>figure {
  width: 30%;
}

body#top section.achievement .container>div {
  display: flex;
  flex-direction: column;
  width: calc(70% - 2rem);
}

body#top section.achievement .container>div p {
  padding: .5rem;
  font-family: "perpetua_l";
  font-size: 1.2rem;
  letter-spacing: .2rem;
  text-align: center;
  color: #1F2C5F;

  span {
    display: block;
    font-family: YakuHanJP, 'Noto Serif JP', serif;
    font-size: 120%;
    color: var(--bodycolor);
  }
}

body#top section.achievement .logo {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 1rem;
  width: 100%;
}

body#top section.achievement .logo img {
  height: 37px;
}

body#top section.achievement button {
  width: fit-content;
  align-self: center;
  color: var(--bodycolor);

  span.ar {
    background-color: var(--bodycolor);

    &::before {
      background-color: var(--bodycolor);
    }
  }

}

body#top section.achievement .button button span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: none;
  transition: var(--all);
}

body#top section.achievement .button:hover button span {
  color: var(--themecolor-);
  transform: translateX(-.5em);
}

body#top section.achievement .button button span::before {
  content: "";
  position: absolute;
  left: 6rem;
  top: 50%;
  width: 0;
  height: 1px;
  background-color: var(--themecolor-);
  transition: var(--all);
}

body#top section.achievement .button:hover button span::before {
  width: 100%;
}


.modaal-overlay {
  z-index: 888887;
}

.modaal-wrapper {
  z-index: 888888;
}

.modaal-inner-wrapper {
  padding: 60px 0 0 0;
}

.modaal-container {
  width: calc(100% - 70px);
  height: calc(100% - 50px);
  max-width: 1200px;
  background-color: #181878;
}

.modaal-wrapper .modaal-close {
  border-radius: unset;
}

.modaal-wrapper .modaal-close:focus:after,
.modaal-wrapper .modaal-close:focus:before,
.modaal-wrapper .modaal-close:hover:after,
.modaal-wrapper .modaal-close:hover:before {
  background: #181878
}

.modaal-wrapper .modaal-close:after,
.modaal-close:before {
  top: 5px;
  left: 23px;
  width: 2px;
  height: 40px;
}


@media all and (max-width: 768px) {

  body#top section.fv {
    margin-top: 60px;
    height: 200vh;

    .video {
      video {}
    }

    .image {
      top: 60px;
      /* height: 60vh; */
      height: calc(100dvh - 112px);

      img {}
    }

    &::after {
      top: 60px;
      /* margin-top: -60vh;
      height: 60vh; */
      margin-top: calc(-100dvh + 60px);
      height: calc(100dvh - 112px);
    }

    &.active {
      .image {
        /* height: 60vh; */
        height: calc(100dvh - 112px);
      }

      &::after {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }
    }

    .concept {
      top: 60px;
      /* margin-top: -60vh;
      height: 60vh; */
      margin-top: calc(-100dvh + 60px);
      height: calc(100dvh - 112px);

      .container {
        ol {
          li {
            &:first-child {
              bottom: 2rem;
              width: 100%;

              h2 {
                font-size: .8rem;
                letter-spacing: .2rem;
              }

              /* p {
                font-size: 1.8rem;
                letter-spacing: .2rem;

                .small {
                  font-size: 1.2rem;
                }
              } */

              p {
                position: relative;

                .big {
                  font-size: 1.8rem;
                }

                .small {
                  position: absolute;
                  width: 5%;
                  bottom: 0;
                  top: unset;
                  transform: unset;
                  /* top: 100%; */
                  /* transform: translateY(-50%); */
                }
              }
            }

            &:last-child {
              flex-direction: column;
              gap: 1rem;
              justify-content: center;

              &>div {
                &.headcopy {
                  margin-top: 0;

                  h2 {
                    font-size: .8rem;
                    letter-spacing: .2rem;
                  }

                  p {
                    font-size: 1.2rem;
                    letter-spacing: .2rem;
                  }
                }

                &.explanation {
                  font-size: .7rem;
                  line-height: 1.8rem;
                }
              }
            }
          }
        }
      }
    }
  }

  /* usp */
  @keyframes fvAttach {
    from {
      transform: translateY(-140vh);
    }

    to {
      transform: translateY(0);
    }
  }

  body#top section.usp {
    padding: 5% 0;
    /* animation: fvAttach linear both;
    animation-timeline: scroll(y root);
    animation-range: 0 calc(140vh); */

    /* position: fixed;
    top: calc(60px + 60vh);
    z-index: 1;
    width: 100%;
    &.relative {
      position: relative;
      top: 0;
    } */
  }

  body#top section.usp ol.point {
    margin-top: unset;
  }

  body#top section.usp ol.point li {}

  body#top section.usp ol.point li:nth-child(1)>p {
    font-size: .8rem;
  }

  body#top section.usp ol.point li:nth-child(1)>div {
    flex-direction: column;
    align-items: flex-start
  }

  body#top section.usp ol.point li:nth-child(1)>div p:nth-child(1) {
    font-size: .9rem;
  }

  body#top section.usp ol.point li:nth-child(1)>div p:nth-child(1) span {
    display: inline-block;
    letter-spacing: .1rem;
  }

  body#top section.usp ol.point li:nth-child(1)>div p:nth-child(2) {
    font-size: 1.2rem;
    line-height: 0;
  }

  body#top section.usp ol.point li:nth-child(1)>div p:nth-child(2) span.b {
    font-size: 1.6rem;
  }

  body#top section.usp ol.point li:nth-child(1)>div p:nth-child(2) span.n {
    font-size: 4rem;
  }

  body#top section.usp ol.point li:nth-child(2) {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
  }

  body#top section.usp ol.point li:nth-child(2) p {
    line-height: 1.5rem;
    letter-spacing: 0;
  }

  body#top section.usp ol.point li:nth-child(2) p:nth-child(1) {
    font-size: 1.4rem;
  }

  body#top section.usp ol.point li:nth-child(2) p:nth-child(2) {
    font-size: 1rem;
    line-height: 0;
  }

  /* announce_wrap */
  body#top section.usp div.container {
    padding: 2%;
  }

  /* announce_wrap */

  body#top section.usp div.announce_wrap {
    /* padding-block: 4% 0%; */
    padding: 1% 0;
    margin: 5% auto 0;
    width: 90%;
  }

  body#top section.usp div.announce_wrap p {
    font-size: 1.4rem;
  }

  body#top section.usp div.announce_wrap .small {
    font-size: 1rem;
  }

  body#top section.usp div.announce_wrap .num {
    font-size: 1.8rem;
  }


  /* cfa */
  body#top section.usp div.cfa {
    padding: 1rem 0;
  }

  body#top section.usp div.cfa .container {
    padding: 2%;
  }

  body#top section.usp div.cfa .merit {
    &::after {
      display: none;
    }
  }

  body#top section.usp div.cfa .merit ol {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  body#top section.usp div.cfa .merit ol {
    gap: .8rem;
    justify-content: center;
  }

  body#top section.usp div.cfa .merit ol li {
    gap: 1rem;
    width: 100%;
  }

  body#top section.usp div.cfa .merit ol li:first-child {
    display: flex;
    flex-direction: column;

    p {
      padding-bottom: .5rem;

      &:nth-child(1) {
        &::after {
          right: unset;
          top: unset;
          left: -5%;
          bottom: 0;
          width: 110%;
          height: 1px;
          background-color: var(--subcolor);
          transform: unset;
        }
      }

    }
  }

  body#top section.usp div.cfa .merit ol li:nth-child(1) {
    margin-bottom: unset !important;
    padding-bottom: unset !important;
  }

  body#top section.usp div.cfa .merit ol li:not(:last-child) {
    padding-bottom: .5rem;
    width: 90%;
    border-bottom: var(--subcolor) solid 1px;
  }

  body#top section.usp div.cfa .merit ol li:not(:nth-child(1)):nth-child(-n+4)::after {
    display: none;
  }

  body#top section.usp div.cfa .merit ol li p span.b {
    display: inline-block;
  }

  body#top section.usp div.cfa .merit p.annotation {
    margin-top: 1rem;
    width: 96%;
    text-align: right;
  }

  body#top section.usp div.cfa .sale figure {}

  body#top section.usp div.cfa .sale figure picture img {
    width: calc(100% - clamp(4rem, 8vw, 8rem));
  }

  body#top section.usp div.cfa .sale figure figcaption {
    width: calc(100% - clamp(4rem, 8vw, 8rem));
    font-size: 55%;
    line-height: 1rem;
  }


  /* body#top section.cfa .sale .list {
    flex-direction: column;
    align-items: unset;
    gap: .4rem;
    padding: 1rem;
    max-width: unset;
    font-size: clamp(1rem, 4.8vw, 4.8rem);
  }
  body#top section.cfa .sale .list p {
    justify-content: space-between;
    gap: .5rem;
  }
  body#top section.cfa .sale .list p f {
    &:nth-child(1) {
      width: clamp(9rem, 30vw, 13rem);
    }
    &:nth-child(2) {
      width: clamp(8rem, 28vw, 12rem);
      text-align: right;
    }
    &:nth-child(3) {
      width: clamp(12rem, 38vw, 16rem);
      text-align: right;
    }
  }
  body#top section.cfa .sale .list .annotation {
    text-align: right;
  }
  body#top section.cfa .sale .list p .t {
    display: block;
    margin-right: unset;
    padding: .2em 0 .3rem;
    width: 100%;
    font-size: 80%;
    letter-spacing: normal;
    text-align: center;
  }
  body#top section.cfa .sale .list p .n {
    font-size: 125%;
  } */

  body#top section.usp div.cfa .information {
    margin: 2rem 0 0;
  }

  body#top section.usp div.cfa .information .text {
    font-size: 1.4rem;
    line-height: 1.2rem;
  }

  body#top section.usp div.cfa .information a p span.ar {
    width: 30px;
  }

  body#top section.usp div.cfa .information .holiday {
    margin: 2rem auto 0;
  }

  body#top section.usp div.cfa .information ol {
    gap: .5rem;
    margin-top: .5rem;

    li {
      width: 50%;

      a {
        padding: .5rem 0;
        font-size: .8rem;

        p {
          span.ar {
            right: 10px;
            width: 20px;
          }
        }
      }
    }
  }

  body#top section.usp {
    h2 {
      font-size: 1rem;
      letter-spacing: .1rem;
    }

    .owner_btn {
      padding: 2%;

      a {
        figure {
          figcaption {
            /* top: 74%; */
          }
        }

        div {
          padding: .6rem 0 1.2rem;

          p {
            font-size: 1.2rem;
          }

          button {
            margin: .5rem auto 0;
            padding: .3rem 1rem;
            font-size: .6rem;
          }
        }
      }
    }

    div.\31 floor {
      margin-top: 1rem;

      .container {
        padding: 2%;
      }

      .\31 floor_btn {
        a {
          figure {
            figcaption {
              /* top: 74%; */
            }
          }

          div {
            padding: .6rem 0 1.2rem;

            p {
              font-size: 1.2rem;
            }

            button {
              margin: .5rem auto 0;
              padding: .3rem 1rem;
              font-size: .6rem;
            }
          }
        }

      }

      ol {
        &.buttons {
          padding: 1rem 2% 0;
          flex-direction: column;
          gap: 1rem;

          li {
            width: 100% !important;
            height: 100%;
          }
        }
      }
    }
  }

  /* concept */
  body#top section.concept {
    padding: 2rem 0 12rem;
    background-attachment: unset;
  }

  body#top section.concept .headcopy {
    font-size: 1.4rem;
  }

  body#top section.concept .bodycopy {
    font-size: .9rem;
    line-height: 1.8rem;
    letter-spacing: 0;
  }


  /* */
  body#top section:not(.fv) ol.iv {
    overflow: hidden;

    li {
      width: 100%;
      height: calc(100dvh - 52px);
      transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);

      figure {
        picture {
          position: relative;
          height: calc(100dvh - 52px);
          transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);

          img {
            /* height: unset; */
          }
        }
      }

      figcaption {
        bottom: calc(5px + (var(--sab) * .65));
      }

      p {
        bottom: calc(52px + 1.5rem);
        font-size: 1rem;
        letter-spacing: .1rem;
        line-height: 1.5rem;

        span {
          position: relative;
          left: .5rem;
          top: -.5rem;
        }
      }
    }
  }

  body#top section:not(.fv) figure figcaption {}

  body#top section:not(.fv) {
    >.title {
      flex-direction: column;
      gap: 2rem;
      height: unset;

      >div {
        padding: 2rem 1rem !important;
        width: 100%;

        &:not(.images) {
          h2 {
            font-size: 1rem;
          }

          .explanation {
            margin-top: .5rem;
            font-size: 1rem;
            line-height: 1.5rem;
            letter-spacing: .2rem;
          }
        }
      }
    }

    >.explanation {
      button {
        position: absolute;
        right: 2rem;
        margin-top: 1rem;
        font-size: .8rem;

        &::after {}

        span.ar {
          &::before {}
        }
      }
    }
  }


  .jarallax {
    .jarallax-img {}

    &.in-view {
      .jarallax-img {
        transition: unset;
      }
    }
  }

  /* .js-parallax {
    img {
      transform: scale(1.1);
    }
  } */

  /* location */
  body#top section.location {
    ol {
      flex-direction: column;

      li {
        figure {
          picture {}
        }

        figcaption {}

        p {
          right: unset !important;
          bottom: unset !important;
          top: 15vh !important;
          left: 50% !important;
          letter-spacing: .3rem !important;
          writing-mode: vertical-rl;
          transform: translateX(-50%);
        }

        &:first-child {
          p {}
        }

        &:last-child {
          p {}
        }
      }
    }

    >.title {
      gap: unset;

      >div {
        width: 100%;
        height: unset;

        &:not(.images) {}

        &.images {
          display: flex;
          align-items: flex-start;
          padding: 0 1rem !important;

          figure {
            &:first-child {
              position: relative;
              top: 0;
              width: 30%;
            }

            &:last-child {
              position: relative;
              right: 0;
              bottom: unset;
              margin-top: 4rem;
              width: 70%;
            }
          }
        }
      }
    }

    >.explanation {
      display: flex;
      gap: 1rem;
      margin-top: unset;

      >div {
        &.images {
          width: 33vw;

          figure {
            width: 100%;
          }
        }

        &:not(.images) {
          width: unset;

          p {
            font-size: .8rem;
            line-height: 1.5rem;
            letter-spacing: 0;
          }
        }
      }
    }
  }


  /* design */
  body#top section.design {
    ol {
      li {
        figure {
          picture {
            img {}
          }
        }

        figcaption {}

        p {
          bottom: unset !important;
          top: 13vh;

          span {}
        }
      }

      &:first-child {}

      &:last-child {
        li {
          p {
            top: 28vh;
            right: 15%;
            writing-mode: vertical-rl;
          }
        }
      }
    }

    >.title {
      margin-top: unset;

      >div {
        padding: 2rem 1rem 0 !important;

        &:not(.images) {}
      }
    }

    >.explanation {
      >div {
        &.images {
          figure {
            width: 100%;
          }
        }

        &:not(.images) {}
      }
    }
  }


  /* plan */
  body#top section.plan,
  body#top section.access {
    padding: 2rem 0;

    ol {
      &.iv {
        li {
          height: 20vw;
        }
      }
    }

    >.title {
      margin-top: unset;

      >div {
        padding: 2rem 1rem 0 !important;

        &:not(.images) {

          .explanation,
          button {

            span.ar,
            span.ar::before {}
          }
        }
      }
    }
  }

  body#top section.plan {
    ol {
      &.buttons {
        padding: 2rem 2% 0;
        flex-direction: column;
        gap: 1rem;

        li {
          width: 100% !important;
          height: 100%;
        }
      }
    }
  }

  /* achievement */
  body#top section.achievement {
    padding: 2rem 0;
  }

  body#top section.achievement .container {
    gap: .5rem;
    padding: 2rem 2%;
  }

  body#top section.achievement .container>figure {
    width: calc(50vw - .5rem);
  }

  body#top section.achievement .container>div {}

  body#top section.achievement .container>div p {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .5rem;
    padding: unset;
    font-size: .8rem;

    span {
      display: inline-block;
    }
  }

  body#top section.achievement .logo {
    flex-direction: column;
    gap: 10px;
  }

  body#top section.achievement .logo img {
    height: 1.6rem;
  }

  body#top section.achievement button {
    position: relative;
    right: unset;

    span.ar {
      &::before {}
    }
  }

  body#top section.achievement .button button span {}

  body#top section.achievement .button:hover button span {}

  body#top section.achievement .button button span::before {}

  body#top section.achievement .button:hover button span::before {}


  .modaal-inner-wrapper {
    padding: 40px 10px 10px;
  }

  .modaal-container {
    width: 100%;
    height: calc(100% - 10px);
  }

  .modaal-wrapper .modaal-close {
    right: 0;
    top: 0;
  }


}