#key {
   background: url("../img/yakitori/key.jpg") no-repeat center/cover;
}

@media only screen and (max-width: 767px) {
   #key {
      background-position: center left 48%;
   }

   .txt br {
      display: none;
   }
}

#sec1 {
   position: relative;
}

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

   #sec1 .box {
      position: relative;
      padding-top: 21vw;
   }

   #sec1 .box+.box {
      margin-top: 12vw;
   }

   #sec1 .box h3 {
      width: 12vw;
      font-size: 6vw;
      letter-spacing: 0.22em;
      line-height: 2;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
   }

   #sec1 .box h3 span {
      color: #fff;
   }

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

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

   #sec1 .box {
      position: relative;
      padding-top: 114px;
   }

   #sec1 .box+.box {
      margin-top: 200px;
   }

   #sec1 .box h3 {
      width: 70px;
      font-size: 32px;
      letter-spacing: 0.22em;
      line-height: 70px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
   }

   #sec1 .box h3 span {
      color: #fff;
   }

   #sec1 .txt {
      text-align: center;
      padding-top: 47px;
   }

   #sec1 .txt p+p {
      padding-top: 37px;
   }
}

#sec2 {
   position: relative;
}

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

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

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

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

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

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

   #sec2 h2 .sub {
      width: 36vw;
      position: absolute;
      top: 80%;
      left: 80%;
   }

   #sec2 .wrap {
      padding: 0;
   }

   #sec2 [class*='photo'] {
      position: relative;
      margin-top: 12vw;
   }

   #sec2 [class*='photo'] figcaption {
      font-size: 4vw;
      letter-spacing: 0;
      position: absolute;
      top: 4vw;
      right: 4vw;
      color: #fff;
   }

   #sec2 [class*='photo'] figcaption span {
      display: block;
      width: 8vw;
      height: 8vw;
      border: 1px solid;
      box-sizing: border-box;
      text-align: center;
   }

   #sec2 [class*='photo'] figcaption span+span {
      border-top: 0;
   }

   #sec2 .photo-1 {
      width: 70vw;
      margin-left: 6.6vw;
   }

   #sec2 .photo-2 {
      width: 80vw;
      margin-left: auto;
   }

   #sec2 .photo-3 {
      width: 60vw;
      margin-top: -5vw;
   }

   #sec2 .photo-4 {
      width: 80vw;
      margin-top: 24vw;
   }

   #sec2 .photo-5 {
      width: 50vw;
      margin: 12vw auto 0;
      position: relative;
   }

   #sec2 .photo-5:before {
      content: '';
      width: 82%;
      height: 79%;
      background: url("../img/shared/bg-deco.jpg") repeat center top;
      position: absolute;
      top: 50%;
      left: 55%;
   }

   #sec2 .photo-6 {
      width: 80vw;
      margin-left: auto;
      margin-right: 3vw;
   }

   #sec2 .photo-7 {
      width: 80vw;
      margin-left: 3vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 .bg-parallax {
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url("../img/yakitori/sec2-parallax.jpg");
      min-height: 930px;
   }

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

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

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

   #sec2 h2 .sub {
      position: absolute;
      bottom: -55px;
      right: 0;
   }

   #sec2 .wrap {
      width: 100%;
      min-width: 1000px;
      max-width: 1500px;
      padding: 102px 0 106px;
   }

   #sec2 [class*='photo'] {
      position: relative;
   }

   #sec2 [class*='photo'] figcaption {
      line-height: 40px;
      letter-spacing: 0;
      position: absolute;
      top: 30px;
      right: 30px;
      color: #fff;
      text-align: center;
   }

   #sec2 [class*='photo'] figcaption span {
      display: block;
      width: 40px;
      height: 40px;
      border: 1px solid;
      box-sizing: border-box;
   }

   #sec2 [class*='photo'] figcaption span+span {
      border-top: 0;
   }

   #sec2 .photo-1 {
      width: calc(50% - 170px);
      margin-left: 100px;
   }

   #sec2 .photo-2 {
      width: 50%;
      position: absolute;
      top: 378px;
      right: 0;
   }

   #sec2 .photo-3 {
      width: 500px;
      margin: 304px auto 0;
      position: relative;
      left: -148px;
   }

   #sec2 .photo-4 {
      width: calc(50% - 100px);
      margin-top: 118px;
   }

   #sec2 .photo-5 {
      width: calc(50% - 380px);
      min-width: 200px;
      position: absolute;
      top: 1176px;
      right: 138px;
   }

   #sec2 .photo-5:before {
      content: '';
      width: 82.5%;
      height: 79.2%;
      background: url("../img/shared/bg-deco.jpg") repeat center top;
      position: absolute;
      top: 50%;
      left: 55%;
   }

   #sec2 .photo-6 {
      width: calc(50% - 100px);
      margin: 80px auto 0;
      position: relative;
      left: 175px;
   }

   #sec2 .photo-7 {
      width: 50%;
      margin-top: 100px;
      padding-left: 100px;
   }
}

#sec3 {
   background: url("../img/yakitori/sec3-bg-img.jpg") no-repeat center top/cover;
   color: #fff;
   position: relative;
   height: 100vh;
}

#sec3 .overlay {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #000;
   opacity: 0;
}

#sec3 .wrap {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   z-index: 1;
}

#sec3 .text {
   transform: translateY(100vh);
}

@media only screen and (max-width: 767px) {
   #sec3 h2 {
      font-size: 5.3vw;
   }

   #sec3 h3 {
      line-height: 1.2;
      padding-top: 6vw;
   }

   #sec3 h3 span {
      font-size: 4vw;
   }

   #sec3 .price {
      padding-top: 3vw;
   }

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

@media only screen and (min-width: 768px) {
   #sec3 h3 {
      line-height: 35px;
      padding-top: 50px;
   }

   #sec3 h3 span {
      font-size: 20px;
   }

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

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

@media only screen and (min-width: 768px) and (min-height: 700px) {
   #sec3 h3 {
      padding-top: 90px;
   }

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

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

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

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

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

   #sec4 h2 {
      width: 24vw;
      height: 125vw;
      margin: 0 auto;
   }

   #sec4 h2 span {
      padding-top: 16vw;
   }

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

   #sec4 .box-1 h3 {
      position: absolute;
      top: 10vw;
      right: 4vw;
   }

   #sec4 .box-1 h3 span {
      display: inline-block;
      width: 12vw;
      height: 9vw;
      border: 1px solid;
      padding-top: 3vw;
   }

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

   #sec4 .box-1 .price {
      position: absolute;
      top: 48vw;
      right: 4vw;
   }

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

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

   #sec4 .box-2:before {
      content: '';
      width: 24vw;
      height: 25vw;
      background: url("../img/yakitori/sec4-deco.png") no-repeat center top/cover;
      position: absolute;
      top: 0;
      left: -6.6vw;
   }

   #sec4 .box-2 .list-menu {
      gap: 15px;
      padding-top: 4vw;
   }
}

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

   #sec4 .wrap:before {
      content: '';
      width: 244px;
      height: 258px;
      background: url("../img/yakitori/sec4-deco.png") no-repeat center top/cover;
      position: absolute;
      top: 490px;
      left: -250px;
   }

   #sec4 h2 {
      width: 140px;
      height: 600px;
      position: absolute;
      top: 40px;
      right: 0;
      letter-spacing: 0.22em;
   }

   #sec4 h2 span {
      padding-top: 61px;
   }

   #sec4 .box-1 {
      width: 900px;
      position: relative;
      left: -100px;
   }

   #sec4 .box-1 h3 {
      line-height: 40px;
      letter-spacing: 0;
      position: absolute;
      top: 420px;
      right: 35px;
   }

   #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 {
      position: absolute;
      top: 553px;
      right: 15px;
   }

   #sec4 .box-1 .txt {
      width: 652px;
      margin-left: auto;
      padding-top: 28px;
   }

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

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

@media only screen and (min-width: 1241px) {
   #sec4 .wrap {
      padding: 0 40px;
   }

   #sec4 .wrap:before {
      left: -150px;
   }

   #sec4 h2 {
      right: 18px;
   }

   #sec4 .box-1 {
      left: 0;
   }
}

#sec5 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec5 {
      background: url("../img/yakitori/sec5-bg-img.jpg") no-repeat top right/152% auto, url("../img/shared/footer-bg.jpg") repeat center top;
      color: #fff;
      border-bottom: 1px solid;
   }

   #sec5 .col {
      padding: 85vw 6.6vw 15vw;
   }

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

@media only screen and (min-width: 768px) {
   #sec5 {
      background: url("../img/yakitori/sec5-bg-img.jpg") no-repeat center top/cover;
      color: #fff;
      padding: 137px 0 147px;
   }

   #sec5 .col {
      width: 450px;
   }

   #sec5 h2,
   #sec5 .txt {
      width: 390px;
      margin-left: auto;
   }

   #sec5 h2 {
      letter-spacing: 0.15em;
   }

   #sec5 .txt {
      padding-top: 27px;
   }

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

   #sec5 .button a {
      display: flex;
      justify-content: flex-end;
   }
}

@media only screen and (min-width: 1401px) {
   #sec5 .col {
      width: 550px;
   }
}