#key {
  background: url(../img/menu/key.jpg) no-repeat center top/cover;
  height: 130vw;
}
#sec1 {
  padding: 20vw 0;
  background: url(../img/menu/sec1_deco2.png) no-repeat right top/45% auto,
    url(../img/menu/sec1_bg.png) no-repeat center bottom/100% auto;
  position: relative;
}
#sec1::before {
  content: "";
  background: url(../img/menu/sec1_deco1.png) no-repeat 0 0/100% auto;
  position: absolute;
  top: 0;
  left: -10%;
  width: 65%;
  height: 35vw;
  z-index: -1;
}
#sec1 .content .info-left h2 {
  margin: 12vw 0 10vw;
}
#sec1 .content .info-left .photo2 {
  margin: 10vw 0 6vw;
}
#sec2 {
  padding: 20vw 0 17vw;
  background: url(../img/menu/sec2_deco.png) no-repeat right top/45% auto,
    url(../img/shared/bg_black.jpg) repeat center 0;
  color: #fff;
}
#sec2 h2 {
  text-align: center;
}
#sec2 h2 img {
  width: 65%;
}
#sec2 .note {
  margin: 8vw 0 10vw;
}
#sec2 .content .item {
  margin-bottom: 10vw;
}
#sec2 .content .item:last-child {
  margin-bottom: 0;
}
#sec2 .content .item .photo {
  position: relative;
}
#sec2 .content .item .photo::before {
  content: "";
  background: url(../img/shared/deco2.png) repeat center 0;
  position: absolute;
}
#sec2 .content .item .gr-txt {
  margin-top: 13vw;
}
#sec2 .content .item1 .photo::before {
  top: -8vw;
  left: -6%;
  width: 22%;
  bottom: 17vw;
}
#sec2 .content .item1 .gr-txt {
  margin-top: 7vw;
}
#sec2 .content .item2 .photo::before {
  left: -6%;
  width: 60%;
  height: 30vw;
  bottom: -6vw;
}
#sec2 .content .item3 .photo::before {
  right: -6%;
  width: 60%;
  height: 30vw;
  bottom: -6vw;
}
#sec3 {
  background: url(../img/menu/sec3_deco.png) no-repeat left top/45% auto,
    url(../img/menu/sec3_bg.jpg) repeat center 0;
  color: #fff;
  padding: 20vw 0;
}
#sec3 .row1 {
  padding-bottom: 10vw;
}
#sec3 .row1 h2 {
  text-align: center;
}
#sec3 .row1 h2 img {
  width: 40%;
}
#sec3 .row1 .note {
  margin: 7vw 0 10vw;
}
#sec3 .row1 .item .gr-txt {
  margin-top: 7vw;
}
#sec3 .row2 .sl-fade .slick-dots {
  margin-top: 3vw;
}
#sec3 .row2 .sl-fade .item .detail {
  margin-top: 7vw;
  min-height: 56vw;
}
#sec3 .row2 .sl-fade .item .detail .price-box {
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
#sec3 .row2 .sl-fade .item .detail .price-box dt {
  margin-bottom: 1.5vw;
}
#sec3 .row2 .sl-fade .item .detail .price-box dt span {
  font-size: 4.8vw;
  letter-spacing: 0.14em;
}
#sec3 .row2 .sl-fade .item .detail .price-box dt small {
  font-size: 4vw;
  letter-spacing: 0.14em;
}
#sec3 .row2 .btn-popup a {
  font-size: 6vw;
  background: url(../img/shared/btn_bg.jpg) repeat center 0;
  position: relative;
}
#sec3 .row2 .btn-popup a::after {
  content: "";
  background: url(../img/menu/icon_popup.png) no-repeat 0 0/100% auto;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 7%;
}
.popup-sec3 {
  background: url(../img/shared/bg.jpg) repeat center 0;
  padding: 20vw 4% 20vw;
}
.popup-sec3 .remodal-close {
  background: url(../img/menu/x.png) no-repeat;
  width: 18px;
  height: 18px;
  top: 15px;
  right: 15px;
}
.popup-sec3 .row h2 img {
  width: 55%;
}
.popup-sec3 .row .note {
  margin: 7vw 0 5vw;
}
.popup-sec3 .row .content .col .item .txt-sub {
  margin-bottom: 13px;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 25px;
}
.popup-sec3 .row .content .col .item h3 {
  margin-bottom: 12px;
}
.popup-sec3 .row .content .col .item .list dl {
  display: flex;
  justify-content: space-between;
  line-height: 25px;
  padding: 10px 0;
  border-bottom: 1px solid #000;
}
.popup-sec3 .row .content .col .item .list dl dt {
  text-align: left;
  letter-spacing: 0.14em;
}
.popup-sec3 .row .content .col .item .list dl dd {
  text-align: right;
  letter-spacing: 0.14em;
}
.popup-sec3 .row .content .col .item .list dl .pdt {
  padding-top: 22px;
}
.popup-sec3 .row1 .content .col .item {
  padding-bottom: 10vw;
}
.popup-sec3 .row1 .content .col .item1 h3 img {
  width: 6%;
}
.popup-sec3 .row1 .content .col .item2 h3 img {
  width: 20%;
}
.popup-sec3 .row1 .content .col .item3 h3 img {
  width: 26%;
}
.popup-sec3 .row1 .content .col .item4 h3 img {
  width: 35%;
}
.popup-sec3 .row1 .content .col .item5 h3 img {
  width: 17%;
}
.popup-sec3 .row1 .content .col .item6 h3 img {
  width: 37%;
}
.popup-sec3 .row2 h2 img {
  width: 39%;
}
.popup-sec3 .btn-close {
  border: 1px solid #000;
  color: #000;
  background: none;
  font-size: 18px;
  font-weight: 400;
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  max-width: 50%;
  margin: 15vw auto 0;
}
.popup-sec3 .btn-close span {
  letter-spacing: 0.14em;
  line-height: 25px;
  padding: 11px 0;
  display: inline-block;
}
.popup-sec3 .btn-close span img {
  margin-left: 25px;
  width: 15px;
  height: auto;
  position: relative;
  top: -3px;
}
@media screen and (min-width: 768px) {
  #sec1 {
    padding: 124px 0 148px;
    background: url(../img/menu/sec1_deco2.png) no-repeat right top;
  }
  #sec1::before {
    background: url(../img/menu/sec1_deco1.png) no-repeat;
    right: calc(50% + 262px);
    left: auto;
    width: 770px;
    height: 482px;
  }
  #sec1::after {
    content: "";
    background: url(../img/menu/sec1_bg.png) no-repeat center bottom/cover;
    height: 507px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
  #sec1 .content {
    display: flex;
    justify-content: space-between;
  }
  #sec1 .content .info-left {
    width: 470px;
  }
  #sec1 .content .info-left h2 {
    margin: 57px 0 48px;
  }
  #sec1 .content .info-left .txt {
    margin-right: 14px;
  }
  #sec1 .content .info-left .photo2 {
    margin: 64px 0 0 -80px;
  }
  #sec1 .content .info-right {
    width: 500px;
  }
  #sec1 .content .info-right .photo {
    margin-right: -150px;
  }
  #sec1 .content .info-right .txt {
    margin: 43px -4px 0 77px;
  }
  #sec1 .content .info-right .btn-link {
    margin: 50px 0 0 77px;
  }
  #sec2 {
    padding: 129px 0 122px;
    background: url(../img/menu/sec2_deco.png) no-repeat right top,
      url(../img/shared/bg_black.jpg) repeat center 0;
  }
  #sec2 h2 img {
    width: auto;
  }
  #sec2 .note {
    margin: 49px 0 50px;
  }
  #sec2 .content .item {
    margin-bottom: 90px;
    display: flex;
    justify-content: space-between;
  }
  #sec2 .content .item .photo {
    margin-left: -68px;
  }
  #sec2 .content .item .gr-txt {
    margin-top: 107px;
    width: 290px;
  }
  #sec2 .content .item .gr-txt .txt {
    margin-right: -5px;
  }
  #sec2 .content .item1 .photo::before {
    top: -60px;
    left: -110px;
    width: 220px;
    bottom: 111px;
  }
  #sec2 .content .item1 .gr-txt {
    margin-top: 177px;
  }
  #sec2 .content .item2 {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  #sec2 .content .item2 .photo {
    margin: 0 -143px 0 0;
    flex: 1;
  }
  #sec2 .content .item2 .photo img {
    width: 100%;
    height: auto;
  }
  #sec2 .content .item2 .photo::before {
    left: -100px;
    width: 67.6056338028%;
    height: 220px;
    bottom: -30px;
  }
  #sec2 .content .item2 .gr-txt {
    margin: 127px 53px 0 0;
    width: 380px;
  }
  #sec2 .content .item3 .photo::before {
    right: -100px;
    width: 479px;
    height: 220px;
    bottom: -30px;
  }
  #sec2 .content .item3 .gr-txt .price-box {
    flex-direction: column;
    justify-content: flex-end;
    text-align: right;
  }
  #sec2 .content .item3 .gr-txt .price-box dt {
    margin: 0 9px 5px 0;
  }
  #sec3 {
    background: url(../img/menu/sec3_deco.png) no-repeat left top,
      url(../img/menu/sec3_bg.jpg) repeat center 0;
    padding: 100px 0 130px;
  }
  #sec3 .row1 {
    padding-bottom: 100px;
  }
  #sec3 .row1 h2 img {
    width: auto;
  }
  #sec3 .row1 .note {
    margin: 49px 0 90px;
  }
  #sec3 .row1 .item {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  #sec3 .row1 .item .gr-txt {
    margin-top: 84px;
    width: 360px;
  }
  #sec3 .row1 .item .photo {
    width: 597px;
    margin-right: -39px;
  }
  #sec3 .row2 .wrap {
    max-width: 1460px;
  }
  #sec3 .row2 .sl-fade {
    display: flex;
    justify-content: space-between;
  }
  #sec3 .row2 .sl-fade .item {
    width: calc(33.3333333333% - 16.6666666667px);
  }
  #sec3 .row2 .sl-fade .item .photo img {
    width: 100%;
    height: auto;
  }
  #sec3 .row2 .sl-fade .item .detail {
    margin-top: 26px;
    min-height: auto;
  }
  #sec3 .row2 .sl-fade .item .detail .price-box {
    line-height: 61px;
    margin-bottom: 10px !important;
  }
  #sec3 .row2 .sl-fade .item .detail .price-box dt {
    margin-bottom: 0;
  }
  #sec3 .row2 .sl-fade .item .detail .price-box dt span {
    font-size: 25px;
  }
  #sec3 .row2 .sl-fade .item .detail .price-box dt small {
    font-size: 18px;
    display: block;
    margin: -20px 0 -3px -13px;
  }
  #sec3 .row2 .sl-fade .item .detail .price-box dd {
    position: static;
  }
  #sec3 .row2 .sl-fade .item .detail .txt {
    padding: 0 10px;
  }
  #sec3 .row2 .sl-fade .item.item2 .detail .txt {
    padding: 0;
  }
  #sec3 .row2 .btn-popup {
    margin: 56px auto 0;
  }
  #sec3 .row2 .btn-popup a {
    font-size: 20px;
  }
  #sec3 .row2 .btn-popup a::after {
    right: 15px;
  }
  .popup-sec3 {
    padding: 125px 10px 95px;
    max-width: 1300px;
  }
  .popup-sec3 .remodal-close {
    top: 20px;
    right: 20px;
  }
  .popup-sec3 .row h2 img {
    width: auto;
  }
  .popup-sec3 .row .note {
    margin: 47px 0 44px;
  }
  .popup-sec3 .row .content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .popup-sec3 .row .content .col {
    width: 470px;
  }
  .popup-sec3 .row .content .col .item h3 {
    margin-bottom: 12px;
  }
  .popup-sec3 .row .content .col .item h3 img {
    width: auto !important;
  }
  .popup-sec3 .row .content .col .item .txt-sub {
    margin-bottom: 18px;
    font-size: 15px;
    letter-spacing: 0.14em;
  }
  .popup-sec3 .row .content .col .item .list dl {
    padding: 12px 0;
  }
  .popup-sec3 .row .content .col .item .list dl .pdt {
    padding-top: 25px;
  }
  .popup-sec3 .row1 {
    padding-bottom: 68px;
  }
  .popup-sec3 .row1 .content .col .item {
    padding-bottom: 39px;
  }
  .popup-sec3 .row1 .content .col .item:last-child {
    padding-bottom: 0;
  }
  .popup-sec3 .row2 h2 img {
    width: auto;
  }
  .popup-sec3 .row2 .note {
    margin: 50px 0 33px;
  }
  .popup-sec3 .row2 .content .col {
    width: 320px;
  }
  .popup-sec3 .btn-close {
    max-width: 204px;
    margin: 91px auto 0;
    font-size: 25px;
    cursor: pointer;
  }
  .popup-sec3 .btn-close span {
    padding: 18px 0;
  }
  .popup-sec3 .btn-close span img {
    margin-left: 9px;
    width: 18px;
    top: -4px;
    right: -15px;
  }
  .popup-sec3 .btn-close:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 1499px) and (min-width: 768px) {
  #sec3 .row2 .wrap {
    max-width: 100%;
    padding: 0 25px;
  }
}
@media screen and (max-width: 1299px) and (min-width: 768px) {
  #sec1 .content .info-right .photo {
    margin-right: calc(-50vw + 500px);
  }
  #sec1 .content .info-right .photo img {
    width: 100%;
    height: auto;
  }
  #sec2 .content .item2 .photo {
    margin-right: calc(-50vw + 500px);
  }
}
@media screen and (max-width: 1219px) and (min-width: 768px) {
  #sec3 .row2 .sl-fade .item .detail .price-box {
    font-size: 32px;
  }
  #sec3 .row2 .sl-fade .item .detail .price-box dt span {
    font-size: 22px;
  }
  #sec3 .row2 .sl-fade .item .detail .price-box dt small {
    font-size: 15px;
  }
}