#key {
  background-image: url("../img/hanare-shop/key.jpg");
}

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

#sec1:before {
  content: '';
  width: 100vw;
  height: 100vw;
  background-image: url("../img/hanare-shop/sec1_deco1.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 80vw;
  z-index: -1;
}

#sec1:after {
  content: '';
  background-image: url("../img/shared/bg2.jpg");
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  bottom: 0;
  z-index: -3;
}

#sec1 .deco {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
}

#sec1 h2 {
  line-height: 14vw;
  margin-bottom: 8vw;
}

#sec1 h2 .fz48 {
  display: table;
  font-size: 7vw;
  letter-spacing: 0.1em;
  position: relative;
}

#sec1 h2 .fz48:before {
  content: '';
  height: 1px;
  background: #000;
  position: absolute;
  left: -6.7vw;
  right: 1vw;
  bottom: 2vw;
}

#sec1 h2 .fz56 {
  font-size: 8vw;
  letter-spacing: 0.1em;
}

#sec1 h2 .fz60 {
  line-height: 14vw;
}

#sec1 h2 .fz80 {
  font-size: 12vw;
  letter-spacing: 0.1em;
}

#sec1 .txt {
  margin-bottom: 10vw;
}

#sec1 .img {
  margin-right: -6.7vw;
}

@media screen and (min-width: 768px) {
  #sec1 {
    padding: 161px 0 72px;
  }
  #sec1:before {
    width: 615px;
    height: 452px;
    top: 82px;
  }
  #sec1 h2 {
    line-height: 60px;
    margin: 0 0 78px -120px;
  }
  #sec1 h2 .fz48 {
    font-size: 48px;
    letter-spacing: 0.05em;
    margin: 0 0 34px 11px;
  }
  #sec1 h2 .fz48:before {
    left: -30vw;
    right: 5px;
    bottom: 1px;
  }
  #sec1 h2 .fz56 {
    font-size: 56px;
    letter-spacing: 0.03em;
  }
  #sec1 h2 .fz60 {
    line-height: 60px;
    letter-spacing: -0.06em;
  }
  #sec1 h2 .fz80 {
    font-size: 80px;
    letter-spacing: 0.05em;
  }
  #sec1 .txt {
    width: 460px;
    margin: 84px 0 0 -104px;
  }
  #sec1 .img {
    width: 812px;
    height: 522px;
    margin-right: -250px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1500px) {
  #sec1 .deco {
    right: calc(50% - 750px);
  }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
  #sec1 h2 {
    margin-left: -80px;
  }
  #sec1 .txt {
    margin-left: -70px;
  }
}

#sec2 .blk1 {
  padding: 20vw 0;
  position: relative;
  z-index: 0;
}

#sec2 .blk1:before {
  content: '';
  width: 62vw;
  height: 100vw;
  background-image: url("../img/hanare-shop/sec2_deco1.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 16vw;
  z-index: -1;
}

#sec2 .blk1:after {
  content: '';
  background: #000;
  position: absolute;
  right: 0;
  top: 40vw;
  bottom: -20vw;
  left: 3.3vw;
  z-index: -2;
}

#sec2 .blk1 h2 {
  order: 2;
  font-size: 7vw;
  letter-spacing: 0.1em;
  line-height: 13vw;
  white-space: nowrap;
}

#sec2 .blk1 h2 .fz120 {
  font-size: 15vw;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 0px #7b7253, -1px -1px 0px #7b7253, 0px 0px 4px #5a512b;
}

#sec2 .blk1 h2 .r2 {
  margin-top: 10vw;
}

#sec2 .blk1 h2 .r3 {
  margin-top: 20vw;
}

#sec2 .blk1 .img1 {
  order: 1;
}

#sec2 .blk2 {
  padding-bottom: 20vw;
  position: relative;
  z-index: 1;
}

#sec2 .blk2:before {
  content: '';
  width: 105vw;
  height: 100vw;
  background-image: url("../img/hanare-shop/sec2_deco2.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  right: -21vw;
  top: 18vw;
  z-index: -1;
}

#sec2 .blk2:after {
  content: '';
  background: #000;
  position: absolute;
  right: 3.3vw;
  top: 10vw;
  bottom: 40vw;
  left: 0;
  z-index: -2;
}

#sec2 .blk2 .img-group {
  margin-bottom: 8vw;
}

#sec2 .blk2 .img-group .img2 {
  margin: 10vw 2vw 0 0;
}

#sec2 .blk2 .txt {
  padding: 0 6.7vw 8vw;
}

#sec2 .blk2 .floormap {
  padding: 0 3.3vw;
}

@media screen and (min-width: 768px) {
  #sec2 .blk1 {
    padding: 134px 0 34px;
  }
  #sec2 .blk1:before {
    width: 351px;
    height: 668px;
    top: 275px;
    right: calc(50% - 750px);
  }
  #sec2 .blk1:after {
    top: 299px;
    bottom: -127px;
    left: calc(50% - 570px);
  }
  #sec2 .blk1 .inner {
    max-width: 1394px;
    width: 100%;
    margin: 0 auto;
  }
  #sec2 .blk1 h2 {
    font-size: 52px;
    line-height: 70px;
    margin-right: 22px;
  }
  #sec2 .blk1 h2 .fz120 {
    font-size: 120px;
    margin-bottom: -2px;
  }
  #sec2 .blk1 h2 .r2 {
    margin: 101px 60px 0 0;
  }
  #sec2 .blk1 h2 .r3 {
    margin: 258px 56px 0 0;
  }
  #sec2 .blk1 .img1 {
    max-width: 929px;
    width: calc(100% - 380px);
    height: 639px;
    margin-top: 50px;
  }
  #sec2 .blk2 {
    padding-bottom: 102px;
  }
  #sec2 .blk2:before {
    width: 802px;
    height: 627px;
    right: auto;
    left: calc(50% - 569px);
    top: 85px;
  }
  #sec2 .blk2:after {
    right: calc(50% - 484px);
    top: 217px;
    bottom: 210px;
  }
  #sec2 .blk2 .inner {
    max-width: 1402px;
    width: 96%;
    margin: 0 auto;
  }
  #sec2 .blk2 .img-group {
    margin: 0 0 -40px 52px;
  }
  #sec2 .blk2 .img-group .img2 {
    margin: 70px 63px 0 0;
  }
  #sec2 .blk2 .txt {
    width: 530px;
    padding: 0;
    margin: 118px 102px 0 0;
  }
  #sec2 .blk2 .floormap {
    width: 674px;
    padding: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1480px) {
  #sec2 .blk1 h2 {
    margin: 0 62px 0 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
  #sec2 .blk2 .txt {
    margin-right: 30px;
  }
}

@media screen and (min-width: 768px) {
  #sec3-shop .blk2 {
    padding-bottom: 165px;
  }
}

@media screen and (min-width: 768px) {
  #access {
    padding-bottom: 157px;
  }
  #access .col-right .info dl dd {
    letter-spacing: 0.04em;
  }
}