body#residence section#fv {
  background-color: var(--expcolor);
}

body#residence section#cfa {
  padding-bottom: 8rem;
  background-color: var(--expcolor);
  figure {
    figcaption {
      right: unset;
      bottom: unset;
      left: 8rem;
      bottom: 2rem;
    }
  }
}

body#residence section#layout {
  .bg {
    padding-bottom: 10rem;
    background-image: url(../img/residence/layout_bg.webp);
    background-position: center;
    background-size: cover;
    & > .container {
      & > figure {
        figcaption {
          right: unset;
          left: 10px;
          color: var(--maincolor);
        }
      }
      h2 {

      }
      .explanation {
        margin-top: 4rem;
      }
      .iao {
        position: relative;
        margin-top: 5rem;
        padding: 5rem 10rem;
        background-image: url(../img/residence/iao_bg.webp);
        background-position: center;
        background-size: cover;
        .logo {
          position: absolute;
          right: 10rem;
          top: 5rem;
          width: 20%;
        }
        .bodycopy {
          margin-top: 3rem;
        }
        .explanation {
          margin-top: 2rem;
          line-height: clamp(2rem, 1.333rem + 1.39vw, 3rem);
        }
        ol {
          display: flex;
          margin-top: 4rem;
          li {

          }
        }
      }
    }
  }
}

body#residence section#lounge {
  overflow: hidden;
  & > figure {
    .title {
      position: absolute;
      left: 5%;
      top: 3%;
      z-index: 2;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10rem;
      letter-spacing: .6rem;
      color: RGBA(255,255,255,.4);
    }
  }
  .bg {
    padding-top: 10rem;
    color: var(--bodycolor);
    background-image: url(../img/residence/lounge_bg.webp);
    background-position: center;
    background-size: cover;
    .container {
      & > h2 {
      }
      & > .explanation {
        margin-top: 10rem;
        text-align: center;
      }
      ol {
        display: flex;
        flex-direction: column;
        gap: 10rem;
        padding: 10rem 0;
        li {
          position: relative;
          display: flex;
          gap: 4rem;
          align-items: center;
          figure {
            width: 140%;
          }
          div {
            position: relative;
            .bodycopy {

            }
            .explanation {
              margin-top: 2rem;
              line-height: clamp(2rem, 1.333rem + 1.39vw, 3rem);
            }
          }
          &.reverse {
            flex-direction: row-reverse;
          }
          &:nth-child(1) {
            figure {
              margin-left: -5%;
            }
            div {
              .logo {
                position: absolute;
                right: 0;
                top: 10%;
                width: 20%;
                transform: translateY(-50%);
              }
              .bodycopy {
                line-height: clamp(2.4rem, 1.6rem + 1.67vw, 3.6rem);
              }
              .explanation {
                width: 90%;
              }
            }
          }
          &:nth-child(2) {
            figure {
              margin-right: -5%;
            }
            div {
              .logo {
                width: 50%;
              }
              .bodycopy {
                margin-top: 1.5rem;
              }
              .explanation {
              }
            }
          }
          &:nth-child(3) {
            figure {
            }
            div {
              .logo {
                width: 40%;
              }
              .bodycopy {
                margin-top: 1.5rem;
              }
              .explanation {
              }
            }
          }
          &:nth-child(-n+2) {
            &::before {
              content: "";
              position: absolute;
              bottom: -5rem;
              left: 0;
              width: 100%;
              height: 1px;
              background-color: var(--subcolor);
            }
          }
        }
      }
    }
  }
}



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


}



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

  body#residence section#cfa {
    padding-bottom: 4rem;
    figure {
      figcaption {
        right: 1rem;
        bottom: 0;
      }
    }
  }

  body#residence section#layout {
    .bg {
      padding-bottom: 5rem;
      & > .container {
        & > figure {
        }
        h2 {
          font-size: 4vw;
          line-height: 3rem;
        }
        .explanation {
          margin-top: 2rem;
        }
        .iao {
          margin-top: 3rem;
          padding: 2rem;
          .logo {
            position: relative;
            right: unset;
            top: unset;
            width: 40%;
          }
          .bodycopy {
            margin-top: 2rem;
          }
          .explanation {
          }
          ol {
            flex-direction: column;
            li {
            }
          }
        }
      }
    }
  }

  body#residence section#lounge {
    & > figure {
      .title {
        font-size: 20vw;
      }
    }
    .bg {
      padding-top: 5rem;
      .container {
        & > h2 {
          font-size: 4vw;
          line-height: 3rem;
        }
        & > .explanation {
          margin-top: 5rem;
        }
        ol {
          gap: 5rem;
          padding: 5rem 0;
          li {
            flex-direction: column;
            figure {
              width: 100%;
            }
            div {
              .bodycopy {
              }
              .explanation {
              }
            }
            &.reverse {
              flex-direction: column;
            }
            &:nth-child(1) {
              figure {
                margin-left: unset;
              }
              div {
                .logo {
                  right: 1rem;
                  top: -2rem;
                  transform: unset;
                }
                .bodycopy {
                }
                .explanation {
                }
              }
            }
            &:nth-child(2) {
              figure {
                margin-right: unset;
              }
              div {
                .logo {
                  width: 70%;
                }
                .bodycopy {
                }
                .explanation {
                }
              }
            }
            &:nth-child(3) {
              figure {
              }
              div {
                .logo {
                }
                .bodycopy {
                }
                .explanation {
                }
              }
            }
            &:nth-child(-n+2) {
              &::before {
                bottom: -2.5rem;
              }
            }
          }
        }
      }
    }
  }

}