#key {
  background: url(../img/scene/key.jpg) no-repeat center/cover;
  height: 130vw;
}

#sec1 {
  padding: 20vw 0;
  position: relative;
}

#sec1::before {
  content: "";
  background: url(../img/scene/sec1_deco1.png) no-repeat right top/100% auto;
  position: absolute;
  top: 0;
  right: -10%;
  bottom: 0;
  width: 50%;
  z-index: -1;
}

#sec1::after {
  content: "";
  background: url(../img/scene/sec1_deco2.png) no-repeat left bottom/100% auto;
  position: absolute;
  top: 0;
  left: -19%;
  bottom: 0;
  width: 55%;
  z-index: -1;
}

#sec1 h2 {
  text-align: center;
  margin-bottom: 12vw;
}

#sec1 h2 img {
  width: 55%;
}

#sec1 .txt {
  margin-top: 5vw;
}

#sec1 h3 {
  text-align: center;
  margin: 10vw 0;
}

#sec1 h3 img {
  width: 55%;
}

#sec1 .box {
  border: 1px solid #000;
  position: relative;
  padding: 8vw 5% 8vw 10%;
}

#sec1 .box::before {
  content: "";
  border: 1px solid #000;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
}

#sec1 .box ul li {
  font-size: 16px;
  margin-bottom: 5px;
  letter-spacing: 0.14em;
}

#sec1 .box ul li:last-child {
  margin-bottom: 0;
}

#sec2 {
  padding-bottom: 50vw;
  position: relative;
}

#sec2::before {
  content: "";
  background: url(../img/scene/sec2_deco1.png) no-repeat 0 0/100% auto;
  position: absolute;
  top: -20vw;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#sec2::after {
  content: "";
  background: url(../img/scene/sec2_bg.png) no-repeat center bottom/100% auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#sec2 .gr::before {
  content: "";
  background: url(../img/scene/sec2_deco2.png) no-repeat left bottom/100% auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  bottom: 7vw;
  z-index: -1;
}

#sec2 .gr::after {
  content: "";
  background: url(../img/scene/sec2_deco3.png) no-repeat right bottom/100% auto;
  position: absolute;
  top: 0;
  right: -4%;
  width: 50%;
  bottom: -15vw;
  z-index: -1;
}

#sec2 h3 {
  margin: 10vw 0;
  text-align: center;
}

#sec2 h3 img {
  width: 35%;
}

#sec2 .item .gr-txt {
  margin-top: 5vw;
}

#sec2 .item .photo-gr {
  margin: 12vw 15% 0;
}

#sec2 .item .photo-gr span {
  width: 60%;
  margin-top: 4vw;
  display: inline-block;
}

#sec3 {
  padding: 15vw 0;
  position: relative;
  background: url(../img/scene/sec3_deco.png) no-repeat right bottom/45% auto;
}

#sec3 .row1 {
  padding-bottom: 15vw;
}

#sec3 .row1 h2 {
  margin-bottom: 12vw;
}

#sec3 .row1 .photo2 {
  margin: 10vw 0 5vw;
}

#sec3 .row2 .photo {
  margin: 12vw 0 5vw;
}

#sec4 {
  position: relative;
  padding: 20vw 0;
}

#sec4::before {
  content: "";
  background: url(../img/scene/sec4_bg.png) no-repeat center top/100% auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

#sec4::after {
  content: "";
  background: url(../img/scene/sec4_bg2.png) no-repeat center bottom/100% auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

#sec4 .row1 {
  padding-bottom: 13vw;
}

#sec4 .row1 .content .info-left h2 {
  margin-bottom: 8vw;
  width: 55%;
}

#sec4 .row1 .content .info-left .floormap {
  margin: 0 10%;
}

#sec4 .row1 .content .info-right {
  margin-top: 12vw;
}

#sec4 .row1 .content .info-right .floormap {
  margin: 0 10%;
}

#sec4 .row1 .content .info-right .gr-img {
  margin-top: 10vw;
}

#sec4 .row1 .content .info-right .gr-img li:not(:last-child) {
  margin-bottom: 5vw;
}

#sec4 .row2 .js-scroll img {
  padding: 0 5%;
}

@media screen and (min-width: 768px) {
  #sec1 {
    padding: 79px 0 120px;
  }

  #sec1::before {
    background: url(../img/scene/sec1_deco1.png) no-repeat;
    height: 428px;
    right: auto;
    left: calc(50% + 431px);
    bottom: auto;
    width: 710px;
  }

  #sec1::after {
    background: url(../img/scene/sec1_deco2.png) no-repeat;
    height: 764px;
    top: auto;
    right: calc(50% + 413px);
    bottom: -50px;
    left: auto;
    width: 724px;
  }

  #sec1 h2 {
    text-align: left;
    margin-bottom: 0;
    position: absolute;
    top: 90px;
    right: 2px;
  }

  #sec1 h2 img {
    width: auto;
  }

  #sec1 .photo {
    margin-left: -220px;
  }

  #sec1 .txt {
    margin: 59px auto 0;
    width: 660px;
    line-height: 55px;
    height: 350px;
  }

  #sec1 h3 {
    margin: 45px 0 42px;
  }

  #sec1 h3 img {
    width: auto;
  }

  #sec1 .box {
    padding: 57px 50px 66px 50px;
    margin: 0 115px;
    display: flex;
    justify-content: space-around;
  }

  #sec1 .box ul li {
    font-size: 22px;
    line-height: 45px;
    margin-bottom: 0;
  }

  #sec2 {
    padding: 33px 0 140px;
  }

  #sec2::before {
    background: url(../img/scene/sec2_deco1.png) no-repeat;
    width: 1971px;
    height: 732px;
    top: -299px;
    left: calc(50% - 987px);
    right: auto;
    bottom: auto;
  }

  #sec2::after {
    background: url(../img/scene/sec2_bg.png) no-repeat center bottom/cover;
    height: 661px;
    top: auto;
  }

  #sec2 .gr::before {
    background: url(../img/scene/sec2_deco2.png) no-repeat;
    height: 322px;
    top: auto;
    right: calc(50% + 517px);
    left: auto;
    width: 255px;
    bottom: 76px;
  }

  #sec2 .gr::after {
    background: url(../img/scene/sec2_deco3.png) no-repeat;
    height: 820px;
    top: auto;
    right: auto;
    left: calc(50% + 388px);
    width: 407px;
    bottom: -98px;
  }

  #sec2 h2 {
    position: absolute;
    top: -33px;
    right: -95px;
    z-index: 2;
  }

  #sec2 h3 {
    margin: 0;
    text-align: left;
    position: absolute;
    top: 163px;
    right: 55px;
  }

  #sec2 h3 img {
    width: auto;
  }

  #sec2 .photo {
    margin-left: -100px;
  }

  #sec2 .item {
    display: flex;
    justify-content: space-between;
    margin: 0 126px 0 37px;
  }

  #sec2 .item .gr-txt {
    margin-top: 45px;
    width: 480px;
  }

  #sec2 .item .gr-txt .btn-link {
    margin-top: 31px;
  }

  #sec2 .item .photo-gr {
    margin: -42px 0 0;
    width: 270px;
  }

  #sec2 .item .photo-gr span {
    width: auto;
    margin-top: 22px;
  }

  #sec3 {
    padding: 172px 0 120px;
    background: url(../img/scene/sec3_deco.png) no-repeat right bottom;
  }

  #sec3 .row1 {
    padding-bottom: 79px;
  }

  #sec3 .row1 h2 {
    margin: 0 0 80px -84px;
    position: relative;
    z-index: 2;
  }

  #sec3 .row1 .photo1 {
    position: absolute;
    top: -74px;
    right: -226px;
    left: 436px;
  }

  #sec3 .row1 .photo1 img {
    width: 100%;
    height: auto;
  }

  #sec3 .row1 .photo2 {
    margin: 0 0 0 -84px;
  }

  #sec3 .row1 .item {
    display: flex;
    justify-content: space-between;
    margin: 34px 62px 0 65px;
  }

  #sec3 .row1 .item .txt {
    width: 495px;
  }

  #sec3 .row1 .item .btn-link {
    margin-top: 39px;
  }

  #sec3 .row2 {
    position: relative;
  }

  #sec3 .row2 h2 {
    position: absolute;
    top: 110px;
    right: -90px;
    z-index: 2;
  }

  #sec3 .row2 .item {
    display: flex;
  }

  #sec3 .row2 .photo {
    margin: 0 53px 0 -220px;
    flex: 1;
  }

  #sec3 .row2 .photo img {
    width: 100%;
    height: auto;
  }

  #sec3 .row2 .txt {
    width: 377px;
    margin-top: 290px;
  }

  #sec4 {
    padding: 204px 0 169px;
  }

  #sec4::before {
    background: url(../img/scene/sec4_bg.png) no-repeat center top/cover;
    height: 544px;
    bottom: auto;
  }

  #sec4::after {
    content: "";
    background: url(../img/scene/sec4_bg2.png) no-repeat center bottom/cover;
    height: 459px;
    top: auto;
  }

  #sec4 .row1 {
    padding-bottom: 80px;
  }

  #sec4 .row1 .content {
    display: flex;
  }

  #sec4 .row1 .content .info-left {
    margin-right: 72px;
    width: 463px;
  }

  #sec4 .row1 .content .info-left h2 {
    margin-bottom: 37px;
    width: auto;
  }

  #sec4 .row1 .content .info-left .floormap {
    margin: 57px 0 0 86px;
  }

  #sec4 .row1 .content .info-right {
    margin: -36px -140px 0 0;
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
  }

  #sec4 .row1 .content .info-right .floormap {
    margin: -21px 0 0 13px;
    position: relative;
    z-index: 2;
  }

  #sec4 .row1 .content .info-right .gr-img {
    margin-top: 0;
  }

  #sec4 .row1 .content .info-right .gr-img li:not(:last-child) {
    margin-bottom: 23px;
  }

  #sec4 .row1 .content .info-right .gr-img li img {
    width: 100%;
    height: auto;
  }

  #sec4 .row2 .js-scroll img {
    padding: 0;
    width: 27vw;
    height: auto;
  }
}

@media screen and (max-width: 1460px) and (min-width: 768px) {
  #sec1 .photo {
    margin-left: calc(-50vw + 500px);
    margin-right: 360px;
  }

  #sec1 .photo img {
    width: 100%;
    height: auto;
  }

  #sec3 .row1 .photo1 {
    right: calc(-50vw + 500px);
  }

  #sec3 .row2 .photo {
    margin-left: calc(-50vw + 500px);
  }
}

@media screen and (max-width: 1299px) and (min-width: 768px) {
  #sec4 .row1 .content .info-right {
    margin-right: calc(-50vw + 500px);
  }
}