#sec1 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      padding: 15vw 0;
   }

   #sec1:before {
      content: '';
      width: 6.6vw;
      height: 180vw;
      background-color: #cabeb3;
      position: absolute;
      bottom: 0;
      left: 0;
   }

   #sec1 figure {
      margin: 0 -2.6vw;
   }

   #sec1 h2 {
      line-height: 1.5;
      color: #fff;
      position: absolute;
      top: 5vw;
      left: 10vw;
      text-shadow: 0 0 16px black, 0 0 16px black;
   }

   #sec1 h2 span {
      padding-left: 6vw;
   }

   #sec1 .txt {
      padding: 6vw 6.4vw 0;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      padding: 226px 0 60px;
   }

   #sec1:before {
      content: '';
      width: calc(50% - 370px);
      height: 790px;
      background-color: #cabeb3;
      position: absolute;
      bottom: 0;
      left: 0;
   }

   #sec1 h2 {
      color: #fff;
      line-height: 78px;
      position: absolute;
      top: 80px;
      left: 30px;
   }

   #sec1 h2 span {
      padding-left: 44px;
   }

   #sec1 .txt {
      width: 770px;
      margin-left: auto;
      padding-top: 67px;
   }
}

@media only screen and (min-width: 1241px) {
   #sec1 figure {
      width: 1230px;
      margin: 0 -115px;
   }

   #sec1 h2 {
      left: -38px;
   }
}

#sec2 {
   position: relative;
}

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

   #sec2 .note {
      padding-bottom: 6vw;
   }

   #sec2 .box figure {
      padding-bottom: 6vw;
   }

   #sec2 .box h2,
   #sec2 .box .price {
      text-align: center;
   }

   #sec2 .box .price {
      font-size: 5vw;
   }

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

   #sec2 .other {
      padding-top: 16vw;
   }

   #sec2 .other h3 {
      padding-bottom: 5vw;
   }
  #sec2 .other .price{
     font-size:4.5vw;
     margin-bottom:0vw;
  }
   #sec2 .other ul li {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgba(23, 24, 28, 0.3);
      padding: 2vw 6vw;
   }

   #sec2 .other ul li:first-child {
      border-top: 1px solid rgba(23, 24, 28, 0.3);
   }
}

@media only screen and (min-width: 768px) {
   #sec2 {
      padding: 108px 0 180px;
   }

   #sec2 .note {
      padding-bottom: 57px;
   }

   #sec2 h2 {
      width: 156px;
      height: 352px;
      line-height: 78px;
      margin-left: auto;
      padding-top: 148px;
   }

   #sec2 .box {
      position: relative;
      padding-bottom: 117px;
   }

   #sec2 .box figure {
      width: 944px;
      position: absolute;
      top: 0;
      left: -150px;
   }

   #sec2 .box .price {
      width: 132px;
      font-size: 25px;
      margin-left: auto;
   }

   #sec2 .box .txt {
      width: 785px;
      padding-top: 142px;
   }

   #sec2 .other {
      max-width: 874px;
      margin: 0 auto;
   }

   #sec2 .other h3 {
      padding-bottom: 23px;
   }
   #sec2 .other .price{
      margin-bottom:0;
   }

   #sec2 .other ul {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
      margin-top: 30px;
   }

   #sec2 .other ul li {
      width: 91px;
      border-left: 1px solid rgba(23, 24, 28, 0.3);
      padding: 39px 10px 27px;
   }

   #sec2 .other ul li:first-child {
      border-right: 1px solid rgba(23, 24, 28, 0.3);
   }

   #sec2 .other ul .h-20 {
      width: 56px;
      height: 253px;
      line-height: 56px;
      margin: 0 auto;
   }

   #sec2 .other ul .price {
      text-align: center;
   }
}

@media only screen and (min-width: 1241px) {
   #sec2 .box figure {
      left: -116px;
   }

   #sec2 .box .txt {
      padding-left: 50px;
   }
}

#sec3 {
   position: relative;
}

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

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

   #sec3 .box {
      margin: 0 -6.6vw;
   }

   #sec3 .box .price {
      font-size: 5.8vw;
      line-height: 1.5;
   }

   #sec3 .box .col {
      padding-top: 8vw;
   }

   #sec3 .box figure {
      margin: 0 -36vw;
   }
}

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

   #sec3 .wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
   }

   #sec3 h2 {
      width: 68px;
      height: 495px;
      padding: 143px 0 20px;
   }

   #sec3 .txt {
      width: 201px;
      height: 495px;
   }

   #sec3 .box {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      width: 100%;
      min-width: 1200px;
      max-width: 1500px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
   }

   #sec3 .box h3 {
      padding-top: 20px;
   }

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

   #sec3 .box .price span {
      font-size: 25px;
   }

   #sec3 .box .col:nth-child(odd) .in {
      max-width: 450px;
   }

   #sec3 .box .col:nth-child(odd) figure {
      margin-left: -250px;
   }

   #sec3 .box .col:nth-child(even) .in {
      max-width: 490px;
      margin-left: auto;
   }

   #sec3 .box .col:nth-child(even) figure {
      margin-right: -250px;
   }
}

#sec4 {
   position: relative;
}

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

   #sec4 h2 {
      font-size: 6vw;
      text-align: center;
   }

   #sec4 figure,
   #sec4 .txt {
      padding-top: 6vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec4 {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 194px;
   }

   #sec4 .wrap {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      max-width: 1400px;
      margin: 0;
   }

   #sec4 h2,
   #sec4 .txt {
      width: 50%;
      text-align: center;
   }

   #sec4 h2 {
      font-size: 30px;
      order: 1;
   }

   #sec4 .txt {
      order: 4;
   }

   #sec4 .photo-1 {
      width: 50%;
      order: 2;
   }

   #sec4 .photo-2 {
      width: 50%;
      order: 3;
   }
}

@media only screen and (min-width: 1201px) {
   #sec4 h2 {
      font-size: 40px;
   }
}

#sec5 {
   position: relative;
}

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

   #sec5:before {
      content: '';
      width: 6.6vw;
      height: 40vw;
      background-color: #a8998b;
      position: absolute;
      top: 0;
      right: 0;
   }

   #sec5 h2 {
      width: 27.2vw;
      height: 40vw;
      margin: 0 auto;
      padding-top: 8vw;
   }

   #sec5 .photo-2,
   #sec5 .button {
      padding-top: 8vw;
   }

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

@media only screen and (min-width: 768px) {
   #sec5 {
      padding: 166px 0 140px;
   }

   #sec5:before {
      content: '';
      width: calc(50% - 502px);
      height: 400px;
      background-color: #a8998b;
      position: absolute;
      top: 0;
      right: 0;
   }

   #sec5 .photo-1 {
      width: 967px;
      position: absolute;
      top: 0;
      left: -300px;
   }

   #sec5 h2 {
      width: 156px;
      height: 407px;
      line-height: 78px;
      margin-left: auto;
      padding-top: 408px;
   }

   #sec5 .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
   }

   #sec5 .photo-2 {
      width: 500px;
   }

   #sec5 .txt {
      width: 458px;
   }

   #sec5 .button {
      padding-top: 140px;
   }
}

@media only screen and (min-width: 1241px) {
   #sec5 h2 {
      padding-right: 40px;
   }

   #sec5 .photo-1 {
      left: -150px;
   }

   #sec5 .photo-2 {
      width: 600px;
      padding-left: 18px;
   }
}

#sec6 {
   position: relative;
}

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

   #sec6 .photo {
      background: url("../img/alacarte/sec6-bg-img.jpg") no-repeat top right -28vw/200% auto;
      padding: 125vw 0 8vw;
   }

    #sec6 h2 {
      width: 27.2vw;
      height: 84vw;
      margin: 0 auto;
    }

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

   #sec6 .box-2 {
      padding-top: 15vw;
   }

   #sec6 .box-2 h3 {
      padding-top: 8vw;
   }

   #sec6 .button {
      padding-top: 8vw;
   }
}

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

   #sec6 .photo {
      background: url("../img/alacarte/sec6-bg-img.jpg") no-repeat center/cover;
      padding: 228px 0 40px;
   }

   #sec6 h2 {
      width: 156px;
      height: 600px;
      line-height: 78px;
      padding-left: 30px;
   }

   #sec6>.wrap {
      padding: 112px 0 0;
   }

   #sec6 .box-1 {
      position: relative;
      padding-bottom: 120px;
   }

   #sec6 .box-1 figure {
      width: 800px;
      position: absolute;
      top: 0;
      left: -150px;
   }

   #sec6 .box-1 .txt {
      width: 320px;
      height: 450px;
      margin-left: auto;
      padding: 107px 0 23px;
   }

   #sec6 .box-2 {
      position: relative;
      padding: 27px 0;
   }

   #sec6 .box-2 figure {
      width: 751px;
      position: absolute;
      top: 0;
      right: -200px;
   }

   #sec6 .box-2 .txt {
      width: 410px;
      padding-top: 38px;
   }

   #sec6 .button {
      padding-top: 141px;
   }
}

@media only screen and (min-width: 1241px) {
   #sec6 .box-1 figure {
      left: -55px;
   }

   #sec6 .box-1 .txt {
      padding-right: 38px;
   }

   #sec6 .box-2 figure {
      right: -60px;
   }
}