@charset "UTF-8";

/* fadeup */
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* アニメーション */
.fadeup {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.effect {
  opacity: 0;
}

/* パララックス */

#luxy {
  position: relative;
  overflow: hidden;
}

#luxy.aboutus01 {
  width: 41.5vw;
  height: 43.3vw !important;
}

.content01 {
  width: 37vw;
  height: 20.6vw; /* 高さを調整 */
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

#bg-img01 {
  width: 100%;
  height: 150%;
  background-image: url(../img/aboutus_01.jpg);
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 0; /* ここを調整 */
}

.content02 {
  width: 21.5vw;
  height: 22.5vw; /* 高さを調整 */
  overflow: hidden;
  position: absolute;
  top: 14vw;
  right: 0;
}

#bg-img02 {
  width: 100%;
  height: 150%;
  background-image: url(../img/aboutus_02.jpg);
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 0; /* ここを調整 */
}

@media screen and (max-width: 780px) {
  #luxy.aboutus01 {
    width: 100%;
    height: 120vw !important;
  }

  .content01 {
    width: 60vw;
    height: 39.6vw;
  }

  .content02 {
    width: 47.5vw;
    height: 55vw;
    top: 34vw;
  }
}

@media screen and (max-width: 480px) {
  .content02 {
    top: 28vw;
  }
}

#luxy.aboutus02 {
  width: 55.4vw;
  height: 19.2vw;
  position: absolute;
  bottom: -9.23vw;
  left: 15%;
}

.content03 {
  width: 55.4vw;
  height: 19.2vw;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
}

#bg-img03 {
  width: 100%;
  height: 140%;
  background-image: url(../img/aboutus_03.jpg);
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 0; /* ここを調整 */
}

@media screen and (max-width: 780px) {
  #luxy.aboutus02 {
    width: 59vw;
    height: 36vw;
    bottom: calc(100% - 39vw);
    left: calc(100% - 59vw);
  }

  .content03 {
    width: 59vw;
    height: 36vw;
    bottom: calc(100% - 39vw);
  }

  #bg-img03 {
    height: 110%;
  }
}

@media screen and (max-width: 480px) {
  #luxy.aboutus02 {
    bottom: calc(100% - 50vw);
  }

  .content03 {
    bottom: calc(100% - 38vw);
  }
}

.content04 {
  width: 100%;
  /* height: 50.7vw; */
  height: 50.7vw;
  overflow: hidden;
  bottom: 0;
  right: 0;
  max-width: 510px;
  max-height: 550px;
}

#bg-img04 {
  width: 100%;
  height: 120%;
  background-image: url(../img/thermo_technology.jpg);
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 0; /* ここを調整 */
}

@media screen and (max-width: 780px) {
  .content04 {
    height: 114vw;
    max-height: 1000px;
    max-width: 1000px;
  }

  #bg-img04 {
    width: 100%;
    height: 150%;
    background-image: url(../img/thermo_technology.jpg);
    background-size: cover;
    background-position: top;
    position: absolute;
    top: 0; /* ここを調整 */
  }
}

#luxy.product01 {
  position: absolute;
  right: 0;
  top: 0;
  width: 46vw;
  height: 55.5vw;
  max-height: 700px;
}

.content05 {
  width: 46vw;
  height: 50.5vw;
  overflow: hidden;
  top: 0;
  right: 0;
  max-height: 550px;
}

#bg-img05 {
  width: 100%;
  height: 120%;
  background-image: url(../img/product.jpg);
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 0; /* ここを調整 */
}

@media screen and (max-width: 780px) {
  #luxy.product01 {
    position: relative;
    width: 100%;
    height: 65vw;
    max-width: 800px;
    max-height: 1000px;
    margin-top: 60px;
  }

  .content05 {
    width: 100%;
    height: 65vw;
    max-width: 800px;
    max-height: 1000px;
  }
}

.content06 {
  width: 100%;
  height: 19.2vw;
  top: 0;
  right: 0;
  position: relative;
}

#bg-img06 {
  width: 100%;
  height: 100vh;
  background-image: url(../img/tech-bottom.jpg);
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 0; /* ここを調整 */
}

@media screen and (max-width: 780px) {
  .content06 {
    width: 100%;
    height: 53.5vw;
  }

  #bg-img06 {
    width: 100%;
    height: 100vh;
    background-image: url(../img/tech-bottom.jpg);
    background-size: cover;
    background-position: top;
    position: absolute;
    top: 0; /* ここを調整 */
  }
}

#luxy.contact01 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.content07 {
  width: 100%;
  height: 700px;
  top: 0;
  right: 0;
  position: relative;
}

#bg-img07 {
  width: 100%;
  height: 90vh;
  background-image: url(../img/contact.jpg);
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 0; /* ここを調整 */
}

@media screen and (max-width: 780px) {
  #luxy.contact01 {
    position: relative;
  }

  .content07 {
    width: 100%;
    height: 64vw;
  }

  #bg-img07 {
    width: 100%;
    height: 90vh;
    background-image: url(../img/contact.jpg);
    background-size: cover;
    background-position: top;
    position: absolute;
    top: 0; /* ここを調整 */
  }
}

#luxy.aboutthermory {
  width: 50%;
}

.content08 {
  width: 100%;
  height: 100%;
}

#bg-img08 {
  width: 100%;
  height: 120%;
  background-image: url(../img/about-themory.jpg);
  background-size: cover;
}

@media screen and (max-width: 780px) {
  #luxy.aboutthermory {
    width: 100%;
    height: 300px;
    overflow: hidden;
  }

  .content08 {
    width: 100%;
    height: 300px;
  }

  #bg-img08 {
    width: 100%;
    height: 140%;
    background-image: url(../img/about-themory.jpg);
    background-size: cover;
    background-position: center;
  }
}

#luxy.cladding {
  width: 50%;
}

#bg-img09 {
  width: 100%;
  height: 120%;
  background-image: url(../img/cladding.png);
  background-size: cover;
}

@media screen and (max-width: 780px) {
  #luxy.cladding {
    width: 100%;
    height: 300px;
    overflow: hidden;
  }

  .content08 {
    width: 100%;
    height: 300px;
  }

  #bg-img09 {
    width: 100%;
    height: 140%;
    background-image: url(../img/cladding.png);
    background-size: cover;
    background-position: center;
  }
}

#luxy.decking {
  width: 50%;
}

#bg-img10 {
  width: 100%;
  height: 120%;
  background-image: url(../img/decking.png);
  background-size: cover;
}

@media screen and (max-width: 780px) {
  #luxy.decking {
    width: 100%;
    height: 300px;
    overflow: hidden;
  }

  .content08 {
    width: 100%;
    height: 300px;
  }

  #bg-img10 {
    width: 100%;
    height: 140%;
    background-image: url(../img/decking.png);
    background-size: cover;
    background-position: center;
  }
}

#luxy.sauna {
  width: 50%;
}

#bg-img11 {
  width: 100%;
  height: 120%;
  background-image: url(../img/sauna_technology.jpg);
  background-size: cover;
}

@media screen and (max-width: 780px) {
  #luxy.sauna {
    width: 100%;
    height: 300px;
    overflow: hidden;
  }

  .content08 {
    width: 100%;
    height: 300px;
  }

  #bg-img11 {
    width: 100%;
    height: 140%;
    background-image: url(../img/sauna_technology.jpg);
    background-size: cover;
    background-position: center;
  }
}