@media only screen and (max-width: 767px) {
   #key {
      background: url("../img/menu/key_sp.jpg") no-repeat center/cover;
   }

   .txt br {
      display: none;
   }
}

@media only screen and (min-width: 768px) {
   #key {
      background: url("../img/menu/key.jpg") no-repeat center/cover;
   }
}

#sec1 {
   background: url("../img/shared/footer-bg.jpg") repeat center top;
   color: #fff;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 .col {
      background: url("../img/menu/sec1-deco.png") no-repeat bottom left/20vw auto;
      padding: 12vw 6.6vw 20vw;
   }

   #sec1 .sub {
      width: 36vw;
      position: relative;
      left: -4vw;
   }

   #sec1 h2 {
      font-size: 5.2vw;
      letter-spacing: 0.22em;
   }

   #sec1 .txt {
      padding-top: 6vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      display: flex;
   }

   #sec1 .col {
      background: url("../img/menu/sec1-deco.png") no-repeat bottom left;
      order: 1;
      padding: 97px 46px 177px 70px;
      box-sizing: border-box;
   }

   #sec1 .col .in {
      width: 550px;
      margin-left: auto;
   }

   #sec1 .sub {
      position: relative;
      left: -70px;
   }

   #sec1 h2 {
      letter-spacing: 0.22em;
   }

   #sec1 .txt {
      max-width: 495px;
      padding-top: 17px;
   }

   #sec1 figure {
      width: calc(100% - 616px);
      order: 2;
   }
}

@media only screen and (min-width: 1401px) {

   #sec1 .col,
   #sec1 figure {
      width: 50%;
   }
}

#sec2 {
   background: url("../img/shared/footer-bg.jpg") repeat center top;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec2 {
      padding-bottom: 20vw;
   }

   #sec2:before {
      content: '';
      background: url("../img/shared/body-bg.jpg") repeat center top;
      position: absolute;
      top: 0;
      right: 3vw;
      bottom: 10vw;
      left: 0;
   }

   #sec2 .wrap {
      padding-right: 9.6vw;
   }

   #sec2 .note {
      padding: 3vw 3vw 12vw;
      position: relative;
   }

   #sec2 .slider-fade {
      padding-top: 6vw;
   }

   #sec2 .price {
      padding-top: 6vw;
   }

   #sec2 .txt {
      padding-top: 4vw;
   }

   #sec2 .photo-1,
   #sec2 .photo-2 {
      padding-top: 8vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 {
      padding-bottom: 160px;
   }

   #sec2:before {
      content: '';
      width: calc(50% + 430px);
      background: url("../img/shared/body-bg.jpg") repeat center top;
      position: absolute;
      top: 0;
      bottom: 341px;
      left: 0;
   }

   #sec2 .note {
      padding: 18px 0 0 30px;
      position: relative;
   }

   #sec2 h2 {
      letter-spacing: 0.22em;
      line-height: 40px;
      padding-top: 74px;
   }

   #sec2 .slider-fade {
      margin-top: 40px;
   }

   #sec2 .slider-fade:before {
      content: '';
      width: 308px;
      height: 325px;
      background: url("../img/shared/footer-bg.jpg") repeat center top;
      position: absolute;
      top: -162px;
      left: -180px;
   }

   #sec2 .price {
      padding-top: 35px;
   }

   #sec2 .txt {
      padding-top: 5px;
   }

   #sec2 .photo-1 {
      width: 599px;
      position: absolute;
      bottom: 80px;
      left: -250px;
   }

   #sec2 .photo-2 {
      width: 550px;
      margin-left: auto;
      padding-top: 242px;
   }
}

#sec3 {
   position: relative;
}
#sec3 .slider-for h2 {
   position: absolute;
   top: 50px;
   left: 50px;
   z-index: 9;
}
#sec3 .slider-for .price {
   color: #fff;
   position: absolute;
   bottom: 50px;
   right: 50px;
   z-index: 9;
}
#sec3 .slider-for figure {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 .slider-nav {
      padding-bottom: 2vw;
   }

   #sec3 .slider-nav .slick-list {
      margin: 0 -1vw;
   }

   #sec3 .slider-nav .slick-track {
      transform: translate3d(0, 0, 0) !important;
   }

   #sec3 .slider-nav figure {
      height: 16vw;
      transition: all 0.3s;
      cursor: pointer;
      margin: 0 1vw;
   }

   #sec3 .slider-nav figure img {
      filter: grayscale(100%);
      transition: all 0.3s;
   }

   #sec3 .slider-nav figure:hover {
      opacity: 0.7;
   }

   #sec3 .slider-nav figure.slick-current img {
      filter: grayscale(0%);
   }

   #sec3 h2 {
      width: 16vw;
      color: #f1f0e8;
      font-size: 8vw;
      line-height: 2;
      text-align: center;
      position: absolute;
      top: 24vw;
      left: 6.6vw;
   }

   #sec3 h2 span {
      display: inline-block;
      width: 16vw;
      height: 16vw;
      border: 1px solid;
      box-sizing: border-box;
   }

   #sec3 h2 span+span {
      border-top: 0;
   }

   #sec3 .col {
      padding: 12vw 6.6vw;
   }

   #sec3 h3 {
      font-size: 5.6vw;
      letter-spacing: 0.22em;
      line-height: 2;
   }

   #sec3 .txt {
      padding-top: 4vw;
   }

   #sec3 .slider-for h2 {
   position: absolute;
   top: 5vw;
   left: 5vw;
   }
   #sec3 .slider-for .col2 {
   left: 20vw;
   }
   #sec3 .slider-for .price {
      bottom: 5vw;
      right: 5vw;
   }
   #sec3 .slider-for figure {
      position: relative;
   }

}

@media only screen and (min-width: 768px) {
   #sec3 .slider-for {
      width: calc(100% - 500px);
      position: absolute;
      top: 0;
      right: 0;
   }

   #sec3 .slider-for figure {
      height: 650px;
   }

   #sec3 .slider-nav {
      width: 860px;
      position: absolute;
      bottom: 0;
      left: 100px;
      z-index: 1;
   }

   #sec3 .slider-nav .slick-list {
      margin: 0 -5px;
   }

   #sec3 .slider-nav .slick-track {
      transform: translate3d(0, 0, 0) !important;
   }

   #sec3 .slider-nav figure {
      width: 331px;
      height: 210px;
      transition: all 0.3s;
      cursor: pointer;
      margin: 0 5px;
   }

   #sec3 .slider-nav figure img {
      filter: grayscale(100%);
      transition: all 0.3s;
   }

   #sec3 .slider-nav figure:hover {
      opacity: 0.7;
   }

   #sec3 .slider-nav figure.slick-current img {
      filter: grayscale(0%);
   }

   #sec3 h2 {
      width: 80px;
      font-size: 58px;
      letter-spacing: 0;
      line-height: 80px;
      position: absolute;
      top: 50px;
      left: 550px;
      color: #fff;
   }

   #sec3 h2 span {
      display: inline-block;
      width: 80px;
      height: 80px;
      border: 1px solid;
      box-sizing: border-box;
      margin-right: -1px;
      margin-bottom: -1px;
      padding-top: 12px;
   }

   #sec3 .col {
      width: 396px;
      text-align: center;
      padding: 122px 0 276px 70px;
   }

   #sec3 h3 {
      font-size: 25px;
      letter-spacing: 0.1em;
   }

   #sec3 .price {
      padding-top: 16px;
   }

   #sec3 .txt {
      padding-top: 34px;
   }
}

#sec4 {
   background: url("../img/shared/footer-bg.jpg") repeat center top;
   color: #fff;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec4 {
      padding-bottom: 20vw;
   }

   #sec4:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/menu/sec4-deco.png") no-repeat center top 4vw/94% auto;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec4 h2 {
      width: 12vw;
      height: 110vw;
      margin: 0 auto;
      padding: 25vw 0 8vw;
   }

   #sec4 .box-1 {
      display: grid;
      gap: 12vw;
   }

   #sec4 .box-1 .col {
      position: relative;
   }

   #sec4 .box-1 h3 {
      font-size: 5vw;
      letter-spacing: 0;
      position: absolute;
      top: 4vw;
      right: 4vw;
      color: #fff;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }

   #sec4 .box-1 .col:nth-child(2) h3 {
      right: auto;
      left: 4vw;
   }

   #sec4 .box-1 h3 span {
      display: inline-block;
      width: 10vw;
      height: 10vw;
      border: 1px solid;
      box-sizing: border-box;
      padding-top: 2vw;
   }

   #sec4 .box-1 h3 span+span {
      border-top: 0;
   }

   #sec4 .box-1 .price {
      padding-top: 6vw;
   }

   #sec4 .box-1 .txt {
      padding-top: 6vw;
   }

   #sec4 .box-2 {
      padding-top: 12vw;
   }

   #sec4 .box-2 .note {
      padding: 2vw 0 4vw;
   }

   #sec4 .box-2 dl {
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
   }
}

@media only screen and (min-width: 768px) {
   #sec4 {
      padding: 150px 0 120px;
   }

   #sec4:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/menu/sec4-deco.png") no-repeat center top 66px;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec4 .wrap {
      width: 100%;
      min-width: 1000px;
      max-width: 1300px;
   }

   #sec4 h2 {
      width: 70px;
      height: 500px;
      position: absolute;
      top: 230px;
      left: 50%;
      transform: translateX(-50%);
      letter-spacing: 0.22em;
   }

   #sec4 .box-1 {
      display: flex;
      justify-content: space-between;
      gap: 70px;
   }

   #sec4 .box-1 .col {
      width: 530px;
      position: relative;
   }

   #sec4 .box-1 .col h3 {
      right: 30px;
   }

   #sec4 .box-1 .col+.col {
      margin-top: 150px;
   }

   #sec4 .box-1 .col+.col h3 {
      right: auto;
      left: 30px;
   }

   #sec4 .box-1 h3 {
      line-height: 40px;
      letter-spacing: 0;
      position: absolute;
      top: 41px;
      color: #fff;
   }

   #sec4 .box-1 h3 span {
      display: inline-block;
      width: 40px;
      height: 40px;
      border: 1px solid;
      box-sizing: border-box;
      padding-top: 4px;
   }

   #sec4 .box-1 h3 span+span {
      border-top: 0;
   }

   #sec4 .box-1 .price {
      padding-top: 26px;
   }

   #sec4 .box-1 .txt {
      padding-top: 12px;
   }

   #sec4 .box-2 {
      max-width: 1000px;
      margin: 0 auto;
      padding-top: 70px;
   }

   #sec4 .box-2 .list-menu {
      padding-top: 23px;
   }

   #sec4 .box-2 .list-menu dl {
      letter-spacing: 0;
      border-bottom-color: rgba(255, 255, 255, 0.5);
   }
}

#bnr {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #bnr {
      height: 80vw;
      margin-bottom: 2vw;
   }

   #bnr:after {
      content: '';
      border: 1px solid #fff;
      position: absolute;
      top: 2vw;
      right: 2vw;
      bottom: 2vw;
      left: 2vw;
   }

   #bnr h2 {
      color: #f1f0e8;
      line-height: 6vw;
      letter-spacing: 0.6em;
      line-height: 2;
      text-align: center;
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      transform: translateY(-50%);
   }

   #bnr h2 span {
      font-size: 8vw;
   }

   #bnr .button {
      position: absolute;
      bottom: 8vw;
      right: 2vw;
   }

   #bnr .button a {
      width: 50vw;
   }

   #bnr .bnr-href {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }
}

@media only screen and (min-width: 768px) {
   #bnr {
      height: 500px;
      margin-bottom: 10px;
      transition: all 0.3s;
      position: relative;
   }

   #bnr:hover {
      opacity: 0.7;
   }

   #bnr:after {
      content: '';
      border: 1px solid #fff;
      position: absolute;
      top: 20px;
      right: 20px;
      bottom: 20px;
      left: 20px;
   }

   #bnr .img-obj {
      position: absolute;
      top: 0;
      left: 0;
   }

   #bnr h2 {
      color: #f1f0e8;
      line-height: 43px;
      letter-spacing: 0.6em;
      text-align: center;
      position: absolute;
      top: 206px;
      right: 0;
      left: 90px;
   }

   #bnr h2 span {
      font-size: 38px;
   }

   #bnr .button {
      position: absolute;
      bottom: 40px;
      right: 20px;
   }

   #bnr .button a {
      padding-right: 20px;
      padding-left: 20px;
      font-size: 18px;
   }

   #bnr .bnr-href {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }
}

#sec5 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec5 {
      padding-bottom: 20vw;
   }

   #sec5 .bg-parallax {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vw;
   }

   #sec5 h2 {
      color: #f1f0e8;
      font-size: 8vw;
      line-height: 2;
      text-align: center;
      position: relative;
      top: 4vw;
   }

   #sec5 h2 .txt-vertical {
      width: 16vw;
   }

   #sec5 h2 .txt-vertical span {
      display: inline-block;
      width: 16vw;
      height: 16vw;
      border: 1px solid;
      box-sizing: border-box;
   }

   #sec5 h2 .txt-vertical span+span {
      border-top: 0;
   }

   #sec5 h2 .sub {
      width: 30vw;
      position: absolute;
      top: -14vw;
      left: -14vw;
   }

   #sec5 .box-1,
   #sec5 .box-2 {
      padding-top: 12vw;
   }

   #sec5 .box-1 h3,
   #sec5 .box-2 h3 {
      padding-top: 6vw;
   }

   #sec5 .box-3 {
      padding-top: 12vw;
   }

   #sec5 .box-3 .note {
      padding: 2vw 0 4vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec5 {
      padding-bottom: 108px;
   }

   #sec5 .bg-parallax {
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url("../img/menu/sec5-bg-img.jpg");
      min-height: 930px;
   }

   #sec5 h2 {
      color: #f1f0e8;
      font-size: 58px;
      line-height: 80px;
      text-align: center;
      position: relative;
   }

   #sec5 h2 .txt-vertical span {
      display: inline-block;
      width: 80px;
      height: 80px;
      border: 1px solid;
      box-sizing: border-box;
   }

   #sec5 h2 .txt-vertical span+span {
      border-top: 0;
   }

   #sec5 h2 .sub {
      width: 130px;
      position: absolute;
      top: -50px;
      left: -67px;
   }

   #sec5 .box-1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 100px 0 0;
   }

   #sec5 .box-1 .col {
      width: 410px;
   }

   #sec5 .box-1 h3 {
      letter-spacing: 0.22em;
   }

   #sec5 .box-1 .txt {
      padding-top: 20px;
   }

   #sec5 .box-1 figure {
      width: 650px;
      margin-left: -150px;
   }

   #sec5 .box-2 {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: center;
   }

   #sec5 .box-2 .col {
      width: 410px;
   }

   #sec5 .box-2 h3 {
      letter-spacing: 0.22em;
   }

   #sec5 .box-2 .txt {
      padding-top: 20px;
   }

   #sec5 .box-2 figure {
      width: 650px;
      margin-right: -150px;
   }

   #sec5 .box-3 {
      padding-top: 80px;
   }

   #sec5 .box-3 .list-menu {
      padding-top: 36px;
   }
}