/* fv */
body#top section#fv {
  position: relative;
  height: unset;
  aspect-ratio: 640 / 307;
  background-color: var(--maincolor);
  video {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: var(--opacity);
  }
  .image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* transition: opacity 2s ease-in-out; */
    figure {
      height: 100%;
      figcaption {
        padding: .2rem;
        background-color: rgba(0,0,0,.6);
      }
    }
  }
  button {
    position: absolute;
    right: 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); */
  }
  &.fade {
    video {
      /* opacity: 0; */
    }
    .image {
      transition: opacity 1.3s var(--easeInSine);
      opacity: 1;
    }
    button {
      &.skip {
        pointer-events: none;
        opacity: 0;
      }
      &.repeat {
        pointer-events: all;
        opacity: 1;
      }
    }
  }
  &.play {
    video {
      opacity: 1;
    }
    .image {
      transition: none;
      opacity: 0;
    }
    button {
      &.skip {
        pointer-events: all;
        opacity: 1;
      }
      &.repeat {
        pointer-events: none;
        opacity: 0;
      }
    }
  }
  &.end {
    /* video {
      opacity: 0;
    } */
    /* .image {
      opacity: 1;
    } */
    button {
      &.skip {
        pointer-events: all;
        opacity: 1;
      }
    }
  }
}

body#top section#usp {
  padding: 3rem 0;
  color: var(--bodycolor);
  background-color: var(--maincolor);
  ol {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    li {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      padding: 0 3rem;
      min-height: 6em;
      font-size: 1.6rem;
      p {
        position: relative;
        line-height: 3rem;
        letter-spacing: .1rem;
        text-align: center;
        &.bb {
          /* font-size: 160%;
          line-height: 4rem;
          letter-spacing: .2rem; */
          font-size: 140%;
          line-height: 3rem;
          letter-spacing: .2rem;
        }
        &.b {
          font-size: 140%;
          line-height: 3rem;
          letter-spacing: .2rem;
        }
        n {
          font-family: "EB Garamond", serif;
          font-size: 160%;
          letter-spacing: .1rem;
        }
        sup {
          position: absolute;
          top: -.6rem;
          font-size: 60%;
        }
        &:has(sup) {
          margin: 1rem 0 0;
          &:nth-child(2) {
            margin: 2rem 0 0;
          }
        }
      }
      &:nth-child(n+2) {
        align-items: flex-start;
      }
      &:nth-child(-n+3) {
        border-right: var(--subcolor) solid 1px;
      }
      &:nth-child(4) {
        &>div {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      }
    }
  }
}

body#top section.information-section {
  margin: unset;
  padding: 8rem 0 4rem;
  color: var(--bodycolor);
  background-color: var(--maincolor);
  .information-ttl {
    color: var(--bodycolor);
  }
}

body#top section#cfa {
  padding-bottom: 4rem;
  text-align: center;
  color: var(--bodycolor);
  background-color: var(--maincolor);
  &>.container {
    padding-bottom: 10rem;
    .cv_button {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 85px;
      margin: auto;
      padding: 0 60px;
      p {
        max-width: 480px;
        width: 100%;
        height: 70px;
        &+p {
          margin-left: 19px;
        }
        &.reserve {
          background-color: var(--color_gray04);
        }
        &.entry {
          background-color: var(--color_gray02);
        }
        a {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 70px;
          color: var(--color_white);
          font-size: 2.0rem;
          text-decoration: none;
          transition: background-color .2s ease-out;
          &:hover {
            background-color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
    .explanation {
      font-size: 2rem;
      letter-spacing: .2rem;
      line-height: 3rem;
    }
  }
}

body#top section#topMenu {
  & > div {
    position: relative;
    .title {
      position: absolute;
      left: 0;
      z-index: 2;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10rem;
      color: RGBA(255,255,255,.4);
      writing-mode: vertical-rl;
    }
    figure {
      .explanation {
        position: absolute;
        z-index: 1;
        font-size: 1.8rem;
        line-height: 4rem;
        letter-spacing: .8rem;
        color: var(--bodycolor);
      }
    }
    .more {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 5rem;
      right: 0;
      padding: 2rem;
      font-size: 1.8rem;
      color: var(--bodycolor);
      cursor: pointer;
      .ar {
        position: relative;
        left: 0;
        display: inline-block;
        margin-top: .5rem;
        margin-left: 1rem;
        width: 20rem;
        height: 1px;
        background-color: var(--bodycolor);
        transition: var(--all);
        &::before {
          position: absolute;
          right: 0;
          content: "";
          width: 2rem;
          height: 1px;
          background-color: var(--bodycolor);
          transform-origin: right;
          transition: var(--all);
          transform: rotate(40deg);
        }
      }
      &:hover {
        .ar {
          left: 1rem;
        }
      }
    }
    &.location {
      figure {
        .explanation {
          top: 43%;
          right: 15%;
        }
      }
    }
    &.residence {
      .title {
        top: 33%;
      }
      figure {
        &.set1 {
          .explanation {
            top: 10%;
            left: 10%;
          }
        }
        &.set2 {
          .explanation {
            top: 8%;
            left: 50%;
          }
        }
      }
    }
    &.plan {
      figure {
        .explanation {
          top: 8%;
          left: 15%;
        }
      }
    }
  }
}



@media all and (min-width: 769px) and (max-width: 1280px) {

  body#top section#usp {
    ol {
      flex-wrap: wrap;
      li {
        align-items: center !important;
        width: 50%;
        min-height: 8em;
        p {
          &.bb {
            font-size: 160%;
          }
          &.b {
            font-size: 160%;
          }
          n {
          }
        }
        &:nth-child(2) {
          gap: .5rem;
          border-right: unset;
        }
        &:nth-child(n+3) {
          border-top: var(--subcolor) solid 1px;
        }
      }
    }
  }

}



@media all and (min-width: 769px) and (max-width: 1000px) {


}



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

  body#top section#fv {
    aspect-ratio: 1 / 1;
    video {
    }
    .image {
      transition: opacity 1.5 var(--easeInOutSine);
      figure {
        figcaption {
        }
      }
    }
    button {
    }
    &.fade {
      video {
      }
      .image {
      }
      button {
        &.skip {
        }
        &.repeat {
        }
      }
    }
    &.play {
      video {
      }
      .image {
      }
      button {
        &.skip {
        }
        &.repeat {
        }
      }
    }
    &.end {
      button {
        &.skip {
        }
      }
    }
  }


  body#top section.information-section {
    padding: 4rem 0 2rem;
    .information-ttl {
      font-size: 4.5vw;
    }
  }

  body#top section#usp {
    padding: 2rem 0;
    ol {
      flex-direction: column;
      li {
        padding: 0 2%;
        width: 100%;
        min-height: unset;
        p {
          font-size: 4vw;
          &.bb {
          }
          &.b {
          }
          n {
          }
          sup {
          }
          &:has(sup) {
            &:nth-child(2) {
            }
          }
        }
        &:nth-child(2) {
          align-items: center;
        }
        &:nth-child(n+2) {
          align-items: center;
        }
        &:nth-child(-n+3) {
          margin-bottom: 2rem;
          padding-bottom: 2rem;
          border-right: unset;
          border-bottom: var(--subcolor) solid 1px;
        }
      }
    }
  }

  body#top section#cfa {
    &>.container {
      padding-bottom: 6rem;
      .cv_button {
        height: 16vw;
        padding: 0 5.4vw;
        p {
          max-width: 480px;
          width: 100%;
          height: 11.2vw;
          &+p {
          }
          &.reserve {
          }
          &.entry {
          }
          a {
            height: 100%;
            font-size: 3.73vw;
          }
        }
      }
      .explanation {
        font-size: 3.73vw;
      }
    }
  }

  body#top section#topMenu {
    & > div {
      .title {
        font-size: 15vw;
        line-height: 1em;
      }
      figure {
        .explanation {
          font-size: 4vw;
          line-height: 3rem;
          letter-spacing: .4rem;
        }
      }
      .more {
          bottom: 3rem;
          font-size: 4vw;
        .ar {
          width: 10rem;
          &::before {
          }
        }
      }
      &.location {
        figure {
          .explanation {
            top: 10%;
            right: 50%;
            transform: translateX(50%);
            text-align: center;
          }
        }
      }
      &.residence {
        .title {
        }
        figure {
          &.set1 {
            .explanation {
            }
          }
          &.set2 {
            .explanation {
              left: 20%;
            }
          }
        }
      }
      &.plan {
        figure {
          .explanation {
            left: 20%;
          }
        }
      }
    }
  }

}