/* -- -- */
section *,
section *:before,
section *:after {
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
}

main {
   overflow: hidden;
}

.txt {
   text-align: justify;
}

@media only screen and (min-width: 768px) {
   .nav-fixed {
      position: fixed;
      top: 0;
   }
}

header {
   background: url("../img/menu/key-deco.jpg") no-repeat top right -50vw / 100% auto;
   padding-bottom: 10vw;
}

@media only screen and (min-width: 768px) {
   header {
      background: none;
      position: absolute;
      top: 110px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 40px);
      max-width: 1222px;
      z-index: 10;
   }

   header:before {
      display: none;
   }

   header .dis-flex-pc {
      justify-content: flex-start;
      align-items: flex-end;
   }

   header h1 {
      position: absolute;
      top: 16px;
      left: 118px;
      padding: 0;
   }

   header .logo {
      margin: 0 31px 0 0;
      width: 100px;
   }

   header .header-tel {
      text-align: left;
      width: auto;
      margin: 0 0 5px 0;
   }

   header .header-tel p:nth-child(2) {
      justify-content: flex-start;
   }
}

@media only screen and (max-width: 767px) {
   .wrap {
      padding: 0 5.33vw;
   }

   .txt br {
      display: none;
   }

   .h-25 {
      font-weight: 500;
      font-size: 5.4vw;
      line-height: 1.5;
      letter-spacing: 0;
   }

   .price {
      font-weight: 500;
      font-size: 5vw;
      line-height: 1.5;
      letter-spacing: 0;
   }

   .price small {
      font-size: 4vw;
      letter-spacing: 0;
   }

   .slick-dots {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      position: relative;
   }

   .slick-dots li {
      position: relative;
   }

   .slick-dots li button {
      display: block;
      width: 100%;
      height: 100%;
      color: transparent;
      border: 0;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0;
   }

   .slick-dots li.slick-active button {
      opacity: 1;
   }

   .slick-arrow {
      width: 10vw;
      height: 10vw;
      border: 0;
      color: transparent;
      position: absolute;
      z-index: 1;
      cursor: pointer;
      margin: 0;
   }

   .slick-prev {
      background: url("../img/menu/slider-prev.png") no-repeat center top/cover;
      left: -4vw;
   }

   .slick-next {
      background: url("../img/menu/slider-next.png") no-repeat center top/cover;
      right: -4vw;
   }
}

@media only screen and (min-width: 766px) {
   .h-25 {
      font-weight: 500;
      font-size: 25px;
      letter-spacing: 0em;
      line-height: 35px;
   }

   .price {
      font-weight: 500;
      font-size: 22px;
      letter-spacing: 0em;
      line-height: 35px;
   }

   .price small {
      font-size: 18px;
   }

   .slick-dots {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      position: relative;
   }

   .slick-dots li {
      display: block;
      padding: 0;
      position: relative;
   }

   .slick-dots li button {
      display: block;
      width: 100%;
      height: 100%;
      color: transparent;
      border: 0;
      border-radius: 0;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0;
   }

   .slick-dots li.slick-active button {
      opacity: 1;
   }

   .slick-arrow {
      width: 44px;
      height: 44px;
      border: 0;
      color: transparent;
      position: absolute;
      top: 51%;
      z-index: 1;
      cursor: pointer;
      transform: translateY(-50%);
      margin: 0;
   }

   .slick-arrow:hover {
      opacity: 0.7;
   }

   .slick-arrow.slick-prev {
      background: url("../img/menu/slider-prev.png") no-repeat center top/cover;
      left: -10px;
   }

   .slick-arrow.slick-next {
      background: url("../img/menu/slider-next.png") no-repeat center top/cover;
      right: -5px;
   }
}

@media only screen and (min-width: 1101px) {
   .slick-dots li:hover button {
      opacity: 1;
   }
}

/* -- -- */
#key {
   position: relative;
}

#key .wrap {
   z-index: inherit;
}

@media only screen and (max-width: 767px) {
   #key {
      margin-top: 0;
   }

   #key:before {
      content: '';
      width: 100%;
      background: url("../img/menu/key-bg.jpg") no-repeat center top/cover;
      position: absolute;
      top: 128.5vw;
      bottom: -65vw;
      left: 0;
   }

   #key .wrap {
      padding: 0;
      z-index: 1;
   }

   #key .photo1 {
      width: 100%;
   }

   #key .photo2 {
      width: 65%;
      padding-top: 8vw;
   }

   #key h2 {
      width: 35%;
      box-sizing: border-box;
      position: absolute;
      top: 75vw;
      right: 0;
      padding: 0 5.33vw;
   }

   #key .txt {
      width: 65%;
      box-sizing: border-box;
      padding: 8vw 0 0 5.33vw;
   }
}

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

   #key:before {
      content: '';
      width: 100%;
      height: 674px;
      background: url("../img/menu/key-bg.jpg") no-repeat center top/cover;
      position: absolute;
      bottom: -320px;
      left: 0;
   }

   #key h2 {
      position: absolute;
      top: -130px;
      right: -30px;
   }

   #key .photo1 {
      width: 1074px;
      margin-left: -250px;
   }

   #key .photo2 {
      width: 622px;
      position: absolute;
      top: 590px;
      right: -130px;
   }

   #key .txt {
      width: 482px;
      padding: 40px 0 0;
      position: relative;
      z-index: 2;
   }
}

@media only screen and (min-width: 1221px) {
   #key .wrap {
      width: 100%;
      max-width: 1200px;
   }

   #key h2 {
      right: 0;
   }

   #key .txt {
      padding-left: 80px;
   }

   #key .photo1 {
      margin-left: -150px;
   }

   #key .photo2 {
      right: -30px;
   }
}

/* --- --- */
#sec1 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 .box1 {
      padding-top: 8vw;
      position: relative;
   }

   #sec1 .box1:before {
      content: '';
      width: 150vw;
      height: 90vw;
      background: url("../img/menu/sec1-deco1.png") no-repeat center top/cover;
      position: absolute;
      top: -20vw;
      left: -5.33vw;
   }

   #sec1 .box1 h3 {
      width: 65%;
   }

   #sec1 .box1 .photo {
      width: 90%;
      margin-left: auto;
   }

   #sec1 .box1 .note {
      padding: 2vw 0 0 17%;
   }

   #sec1 .box2 {
      padding-top: 12vw;
   }

   #sec1 .box2 h2 {
      width: 80%;
   }

   #sec1 .box2 h3 {
      padding-top: 5vw;
      padding-right: 10%;
   }

   #sec1 .box2 .slick-slider {
      margin-top: 5vw;
   }

   #sec1 .box2 .slick-slider .slide {
      position: relative;
   }

   #sec1 .box2 .slick-slider .slide .text {
      background-color: #fff;
      color: #000;
      padding: 0.5vw 4vw;
      position: absolute;
      bottom: 0;
      right: 0;
   }

   #sec1 .box2 .slick-slider .slide .price {
      padding-left: 4vw;
   }

   #sec1 .box2 .slick-slider .slick-arrow {
      top: 34vw;
   }

   #sec1 .box2 .slick-slider .slick-dots {
      justify-content: center;
      gap: 2vw;
      background: url("../img/menu/body-bg.jpg") repeat center top;
      padding: 2vw;
   }

   #sec1 .box2 .slick-slider .slick-dots li {
      width: 25vw;
      height: 15vw;
   }

   #sec1 .box2 .slick-slider .slick-dots li:nth-child(1) {
      background: url("../img/menu/sec1-thumb1.jpg") no-repeat center top/cover;
   }

   #sec1 .box2 .slick-slider .slick-dots li:nth-child(1) button {
      background: url("../img/menu/sec1-thumb1_on.jpg") no-repeat center top/cover;
   }

   #sec1 .box2 .slick-slider .slick-dots li:nth-child(2) {
      background: url("../img/menu/sec1-thumb2.jpg") no-repeat center top/cover;
   }

   #sec1 .box2 .slick-slider .slick-dots li:nth-child(2) button {
      background: url("../img/menu/sec1-thumb2_on.jpg") no-repeat center top/cover;
   }

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

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

   #sec1 .wrap {
      width: 100%;
      max-width: 1140px;
   }

   #sec1 .box1 {
      text-align: right;
      margin-top: -23px;
      padding-right: 20px;
   }

   #sec1 .box1:before {
      content: '';
      width: 990px;
      height: 650px;
      background: url("../img/menu/sec1-deco1.png") no-repeat center top/cover;
      position: absolute;
      top: -113px;
      left: -90px;
   }

   #sec1 .box1 h3 {
      position: absolute;
      top: 80px;
      right: 500px;
      z-index: 1;
   }

   #sec1 .box1 .note {
      margin-top: -10px;
     position: relative;
     z-index: 2;
   }

   #sec1 .box2 {
      margin-top: -26px;
      position: relative;
   }

   #sec1 .box2 h3 {
      position: absolute;
      top: 169px;
      right: 0;
      z-index: 1;
   }

   #sec1 .box2 .slider-fade {
      width: 659px;
      position: absolute;
      top: 198px;
      left: 20px;
   }

   #sec1 .box2 .slider-fade .slide {
      position: relative;
   }

   #sec1 .box2 .slider-fade .slide .text {
      background-color: #fff;
      padding: 4px 14px 4px 12px;
      position: absolute;
      bottom: 93px;
      right: 16px;
   }

   #sec1 .box2 .slider-fade .slide .text .price {
      padding-left: 25px;
   }

   #sec1 .box2 .slider-fade .slick-dots {
      gap: 10px;
      background: url("../img/menu/body-bg.jpg") repeat center top;
      padding: 20px 0 0 22px;
      position: absolute;
      bottom: 0;
      right: -165px;
   }

   #sec1 .box2 .slider-fade .slick-dots li {
      width: 103px;
      height: 61px;
   }

   #sec1 .box2 .slider-fade .slick-dots li:nth-child(1) {
      background: url("../img/menu/sec1-thumb1.jpg") no-repeat center top/cover;
   }

   #sec1 .box2 .slider-fade .slick-dots li:nth-child(1) button {
      background: url("../img/menu/sec1-thumb1_on.jpg") no-repeat center top/cover;
   }

   #sec1 .box2 .slider-fade .slick-dots li:nth-child(2) {
      background: url("../img/menu/sec1-thumb2.jpg") no-repeat center top/cover;
   }

   #sec1 .box2 .slider-fade .slick-dots li:nth-child(2) button {
      background: url("../img/menu/sec1-thumb2_on.jpg") no-repeat center top/cover;
   }

   #sec1 .box2 .txt {
      width: 373px;
      margin-left: auto;
      padding: 144px 20px 122px 0;
   }
}

@media only screen and (min-width: 1250px) {
   #sec1 .box2 h3 {
      right: -63px;
   }

   #sec1 .box2 .txt {
      padding-right: 65px;
   }

   #sec1 .box2 .slider-fade {
      left: 0;
   }
}

/* --- --- */
#sec2 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec2 {
      background: url("../img/menu/sec2-deco.png") no-repeat center top 30vw/100% auto;
      padding: 10vw 0 12vw;
   }

   #sec2 h2 {
      width: 50%;
      margin: 0 auto;
      padding-right: 19vw;
   }

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

   #sec2 .slider-fade {
      margin-top: 8vw;
      padding-top: 16vw;
   }

   #sec2 .slider-fade .slide .text {
      background-color: #000;
      color: #fff;
      padding: 0.5vw 4vw;
      position: absolute;
      bottom: 0;
      right: 0;
   }

   #sec2 .slider-fade .slide .text .price {
      padding-left: 4vw;
   }

   #sec2 .slider-fade .slick-arrow {
      top: 40vw;
   }

   #sec2 .slider-fade .slick-dots {
      gap: 2vw;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec2 .slider-fade .slick-dots li {
      width: 20vw;
      height: 14vw;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(1) {
      background: url("../img/menu/sec2-thumb1.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(1) button {
      background: url("../img/menu/sec2-thumb1_on.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(2) {
      background: url("../img/menu/sec2-thumb2.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(2) button {
      background: url("../img/menu/sec2-thumb2_on.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(3) {
      background: url("../img/menu/sec2-thumb3.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(3) button {
      background: url("../img/menu/sec2-thumb3_on.jpg") no-repeat center top/cover;
   }
}

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

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

   #sec2 h2 {
      margin-left: -10px;
   }

   #sec2 .photo {
      position: absolute;
      top: 0;
      right: -250px;
   }

   #sec2 .slider-fade {
      width: 600px;
      position: absolute;
      bottom: 0;
      left: -20px;
   }

   #sec2 .slider-fade .slick-list {
      overflow: inherit;
   }

   #sec2 .slider-fade .slide {
      position: relative;
   }

   #sec2 .slider-fade .slide .text {
      width: max-content;
      background-color: #000;
      color: #fff;
      padding: 3px 26px 8px 23px;
      position: absolute;
      bottom: 20px;
      left: 100%;
      margin-left: -38px;
   }

   #sec2 .slider-fade .slide .text span {
      display: inline-block;
      vertical-align: middle;
   }

   #sec2 .slider-fade .slide .text .price {
      padding-left: 25px;
   }

   #sec2 .slider-fade .slick-prev {
      left: -13px;
   }

   #sec2 .slider-fade .slick-next {
      right: -8px;
   }

   #sec2 .slider-fade .slick-dots {
      gap: 8px;
      position: absolute;
      bottom: 100%;
      left: 0;
      margin-bottom: 15px;
   }

   #sec2 .slider-fade .slick-dots li {
      width: 103px;
      height: 61px;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(1) {
      background: url("../img/menu/sec2-thumb1.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(1) button {
      background: url("../img/menu/sec2-thumb1_on.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(2) {
      background: url("../img/menu/sec2-thumb2.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(2) button {
      background: url("../img/menu/sec2-thumb2_on.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(3) {
      background: url("../img/menu/sec2-thumb3.jpg") no-repeat center top/cover;
   }

   #sec2 .slider-fade .slick-dots li:nth-child(3) button {
      background: url("../img/menu/sec2-thumb3_on.jpg") no-repeat center top/cover;
   }

   #sec2 .txt {
      width: 389px;
      margin-left: auto;
      padding: 233px 0 87px;
   }
}

@media only screen and (min-width: 1200px) {
   #sec2 .slider-fade {
      width: 640px;
      left: -71px;
   }
}

/* --- --- */
#sec3 {
   position: relative;
}

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

   #sec3:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/menu/sec3-deco.png") no-repeat center top/100% auto;
      position: absolute;
      top: -50vw;
      right: 0;
      z-index: -1;
   }

   #sec3 h2 {
      width: 90%;
   }

   #sec3 .set1 .photo1 {
      margin-top: 4vw;
      position: relative;
   }

   #sec3 .set1 .photo1 .text {
      background-color: #000;
      color: #fff;
      padding: 0.5vw 4vw;
      position: absolute;
      bottom: 0;
      right: 0;
   }

   #sec3 .set1 .photo1 .text .price {
      padding-left: 4vw;
   }

   #sec3 .set1 .photo2 {
      margin-top: 8vw;
      position: relative;
   }

   #sec3 .set1 .photo2 .text {
      position: absolute;
      top: 0;
      right: 0;
   }

   #sec3 .set1 .photo2 .text span {
      display: inline-block;
      background-color: #000;
      color: #fff;
      padding: 0.5vw 4vw;
      margin-bottom: 2vw;
   }

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

   #sec3 .set2 {
      padding-top: 12vw;
   }

   #sec3 .set2 h3 {
      width: 80%;
      margin: 0 auto;
      padding-bottom: 4vw;
   }

   #sec3 .set2 ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8vw 4%;
   }

   #sec3 .set2 ul li {
      width: 48%;
   }

   #sec3 .set2 ul li .text {
      text-align: center;
      border-bottom: 1px solid #8e8e8e;
      padding: 2vw 0;
   }

   #sec3 .set2 ul li .text span {
      display: block;
   }
}

@media only screen and (min-width: 768px) {
   #sec3:before {
      content: '';
      width: 792px;
      height: 762px;
      background: url("../img/menu/sec3-deco.png") no-repeat center top/cover;
      position: absolute;
      top: -312px;
      right: 0;
      z-index: -1;
   }

   #sec3 .wrap {
      width: 100%;
      max-width: 1200px;
   }

   #sec3 h2 {
      text-align: right;
      padding-right: 100px;
      position: relative;
      z-index: 1;
   }

   #sec3 .set1 {
      position: relative;
   }

   #sec3 .set1 .photo1 {
      width: 870px;
      position: absolute;
      top: 64px;
      left: 0;
   }

   #sec3 .set1 .photo1 .text {
      background-color: #000;
      color: #fff;
      position: absolute;
      top: 152px;
      right: -195px;
      padding: 4px 14px 4px 12px;
   }

   #sec3 .set1 .photo1 .text .price {
      padding-left: 25px;
   }

   #sec3 .set1 .photo2 {
      background: url("../img/menu/body-bg.jpg") repeat center top;
      width: 541px;
      margin-left: auto;
      padding: 9px 0 0 11px;
      position: absolute;
      bottom: 0;
      right: 10px;
      z-index: 1;
   }

   #sec3 .set1 .photo2 .text {
      position: absolute;
      top: -58px;
      right: 0;
   }

   #sec3 .set1 .photo2 .text span {
      display: inline-block;
      background-color: #000;
      color: #fff;
      padding: 4px 19px 7px 19px;
      margin-bottom: 9px;
   }

   #sec3 .set1 .photo2 .text .price {
      padding: 2px 23px 3px 22px;
   }

   #sec3 .set1 .txt {
      width: 500px;
      padding: 423px 0 43px 10px;
   }

   #sec3 .set2 {
      padding: 50px 0 132px;
   }

   #sec3 .set2 h3 {
      text-align: center;
      padding-bottom: 33px;
      padding-left: 8px;
   }

   #sec3 .set2 ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 0 20px;
   }

   #sec3 .set2 ul li {
      width: calc(25% - 15px);
   }

   #sec3 .set2 ul li .text {
      text-align: center;
      border-bottom: 1px solid #8e8e8e;
      padding: 7px 0 0;
   }

   #sec3 .set2 ul li .text .price {
      padding-left: 5px;
   }
}

@media only screen and (min-width: 1221px) {
   #sec3 .set1 .txt {
      padding-left: 100px;
   }

   #sec3 .set1 .photo2 {
      right: 38px;
   }

   #sec3 .set1 .photo2 .text {
      right: -23px;
   }

   #sec3 .set2 ul {
      gap: 26px;
      padding: 0;
   }

   #sec3 .set2 ul li {
      width: 280px;
   }

   #sec3 .set2 ul li .text .price {
      padding-left: 25px;
   }
}

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

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

   #sec4 h2 {
      width: 80%;
      padding-bottom: 4vw;
      margin-left: -2vw;
   }

   #sec4 .photo {
      width: 100%;
      background: url("../img/menu/sec4-photo.jpg") no-repeat center top/cover;
      box-sizing: border-box;
      padding: 4vw;
   }

   #sec4 .photo .inner {
      background-color: rgba(0, 0, 0, 0.65);
      padding: 8vw 4vw;
   }

   #sec4 .photo h3 {
      font-weight: 500;
      font-size: 5vw;
      line-height: 1.5;
      border-top: 1px solid;
      border-bottom: 1px solid;
      text-align: center;
      padding: 2vw 0;
   }

   #sec4 .photo dl {
      display: flex;
      flex-wrap: wrap;
      padding-top: 15px;
   }

   #sec4 .photo dl+dl {
      padding-top: 4px;
   }

   #sec4 .photo dl dt {
      width: 50px;
   }

   #sec4 .photo dl dd {
      width: calc(100% - 50px);
   }

   #sec4 .photo .note {
      line-height: 25px;
      padding: 15px 0 0;
   }

   #sec4 .txt {
      padding-top: 8vw;
   }
}

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

   #sec4 .wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      flex-direction: row-reverse;
      gap: 103px;
      max-width: 100%;
   }

   #sec4 h2 {
      position: absolute;
      top: 73px;
      left: 50%;
      margin-left: -525px;
   }

   #sec4 .photo {
      width: calc(50% + 20px);
      background: url("../img/menu/sec4-photo.jpg") no-repeat center top/cover;
      box-sizing: border-box;
      padding: 72px 20px 33px;
   }

   #sec4 .photo .inner {
      width: 100%;
      max-width: 548px;
      background-color: rgba(0, 0, 0, 0.65);
      box-sizing: border-box;
      padding: 43px 50px 30px;
      margin: 0 auto;
   }

   #sec4 .photo h3 {
      font-weight: 500;
      font-size: 20px;
      line-height: 35px;
      border-top: 2px solid;
      border-bottom: 2px solid;
      text-align: center;
   }

   #sec4 .photo dl {
      display: flex;
      flex-wrap: wrap;
      padding: 15px 0 0 22px;
   }

   #sec4 .photo dl+dl {
      padding-top: 3px;
   }

   #sec4 .photo dl dt {
      width: 61px;
   }

   #sec4 .photo dl dd {
      width: calc(100% - 61px);
   }

   #sec4 .photo .note {
      line-height: 25px;
      padding: 15px 0 0 22px;
   }

   #sec4 .txt {
      width: 385px;
      padding-top: 240px;
   }
}

@media only screen and (min-width: 1201px) {
   #sec4 .wrap {
      gap: 136px;
   }

   #sec4 h2 {
      margin-left: -555px;
   }

   #sec4 .photo {
      padding: 72px 10px 33px 0;
   }

   #sec4 .photo .inner {
      padding: 43px 77px 30px 74px;
   }
}

/* --- --- */
#sec5 {
   background: url("../img/menu/sec5-bg.jpg") no-repeat center top/cover;
   position: relative;
}

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

   #sec5 .photo dd {
      background: url("../img/menu/sec5-bg.jpg") no-repeat center top/cover;
      padding: 2vw 0 0 2vw;
      margin: -8vw 0 0 8vw;
      position: relative;
      z-index: 1;
   }

   #sec5 h2 {
      width: 36%;
      margin: 0 auto;
      padding-top: 2vw;
   }

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

   #sec5 ul {
      padding-top: 8vw;
   }

   #sec5 ul li+li {
      padding-top: 4vw;
   }

   #sec5 .btn-link:after {
      content: '';
      width: 16px;
      height: 14px;
      background: url("../img/menu/icon-blank.png") no-repeat center top/cover;
      position: absolute;
      top: 18px;
      left: 70px;
   }
}

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

   #sec5 h2 {
      position: absolute;
      top: 70px;
      right: 0;
      z-index: 1;
   }

   #sec5 .photo {
      position: relative;
      margin: 0 -85px;
   }

   #sec5 .photo dt {
      width: 830px;
   }

   #sec5 .photo dd {
      width: 591px;
      background: url("../img/menu/sec5-bg.jpg") no-repeat center top/cover;
      position: absolute;
      bottom: -285px;
      right: 54px;
      padding: 10px 0px 0 10px;
   }

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

   #sec5 ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
      padding-top: 81px;
   }

   #sec5 .btn-link {
      width: 381px;
      -webkit-clip-path: polygon(100% 0, 100% 46px, 350px 100%, 0 100%, 0 0);
      clip-path: polygon(100% 0, 100% 46px, 350px 100%, 0 100%, 0 0);
   }

   #sec5 .btn-link:before {
      width: 325px;
   }

   #sec5 .btn-link:after {
      content: '';
      width: 21px;
      height: 18px;
      background: url("../img/menu/icon-blank.png") no-repeat center top/cover;
      position: absolute;
      top: 26px;
      left: 120px;
   }

   #sec5 .btn-link i {
      left: 325px;
   }

   #sec5 .btn-link:hover {
      opacity: 0.7;
   }
}

/* --- --- */
.menu-modal {
   background: url("../img/menu/body-bg.jpg") repeat center top;
   color: #000;
}

@media only screen and (max-width: 767px) {
   .menu-modal {
      padding: 12vw 0;
   }

   .menu-modal .ttl {
      text-align: center;
   }

   .menu-modal h2 {
      font-weight: 500;
      font-size: 8vw;
      line-height: 1.5;
      letter-spacing: 0;
      color: #222;
   }

   .menu-modal .note {
      padding-top: 4vw;
   }

   .menu-modal .menu-list {
      padding-top: 2vw;
   }

   .menu-modal .menu-list .item {
      padding-top: 8vw;
   }

   .menu-modal .menu-list .item h3 {
      font-weight: 500;
      font-size: 18px;
      line-height: 35px;
      text-align: center;
   }

   .menu-modal .menu-list .item dl {
      display: flex;
      flex-wrap: wrap;
      text-align: left;
      border-bottom: 1px solid #c3c3c3;
      padding-top: 15px;
   }

   .menu-modal .menu-list .item dl dt {
      flex: auto;
   }

   button.remodal-close {
      background: url("../img/menu/close1.png") no-repeat center top/cover;
      width: 10vw;
      height: 10vw;
      top: 2vw;
      right: 2vw;
   }

   button.remodal-cancel {
      background: url("../img/menu/close2.png") no-repeat center top/cover;
      width: 20vw;
      height: 6vw;
      min-width: inherit;
      margin-top: 12vw;
      padding: 0;
   }

   button.remodal-cancel:hover {
      background: url("../img/menu/close2.png") no-repeat center top/cover;
   }
}

@media only screen and (min-width: 768px) {
   .remodal {
      max-width: 1250px;
   }

   .remodal-wrapper {
      padding: 20px;
   }

   .menu-modal {
      padding: 70px 0;
   }

   .menu-modal .ttl {
      text-align: center;
   }

   .menu-modal h2 {
      font-weight: 500;
      font-size: 45px;
      line-height: 50px;
      letter-spacing: 0;
      color: #222;
   }

   .menu-modal .note {
      padding-top: 15px;
   }

   .menu-modal .menu-list {
      display: flex;
      flex-wrap: wrap;
      gap: 80px;
      padding-top: 20px;
   }

   .menu-modal .menu-list .col {
      width: 460px;
   }

   .menu-modal .menu-list .item {
      padding-top: 40px;
   }

   .menu-modal .menu-list .item h3 {
      font-weight: 500;
      font-size: 18px;
      line-height: 35px;
      text-align: center;
   }

   .menu-modal .menu-list .item dl {
      display: flex;
      flex-wrap: wrap;
      text-align: left;
      border-bottom: 1px solid #c3c3c3;
      padding-top: 15px;
   }

   .menu-modal .menu-list .item dl dt {
      flex: auto;
   }

   button.remodal-close {
      background: url("../img/menu/close1.png") no-repeat center top/cover;
      width: 50px;
      height: 50px;
      top: 10px;
      right: 10px;
   }

   button.remodal-close:hover {
      opacity: 0.7;
   }

   button.remodal-cancel {
      background: url("../img/menu/close2.png") no-repeat center top/cover;
      width: 110px;
      height: 35px;
      min-width: inherit;
      margin-top: 80px;
      padding: 0;
   }

   button.remodal-cancel:hover {
      background: url("../img/menu/close2.png") no-repeat center top/cover;
      opacity: 0.7;
   }
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  #key h2{
    top: -110px;
    right: 20px;
    width: 153px;
  }
  #key .txt{
    width: 425px;
    padding-left: 20px;
  }
  #key:before{
    height: 740px;
  }
  #key .photo2{
    top: 569px;
    right: -127px;
  }
  #sec1 .box2 .slider-fade{
    width: 550px;
  }
  #sec1 .box2 .slider-fade .slick-dots{
    bottom: -45px;
  }
  #sec2 .slider-fade{
    left: 20px;
    width: 545px;
  }
  #sec3 .set1 .photo1 .text{
    right: -100px;
  }
  #sec3 .set1 .txt{
    padding-left: 20px;
    width: 390px;
  }
  #sec4 .photo{
    width: calc(46% + 20px);
  }
  #sec4 h2{
    margin-left: -470px;
  }
  #sec4 .txt{
    padding-top: 165px;
  }
  #sec4 .photo .inner{
    padding: 43px 15px 30px;
  }
  #sec5 h2{
    right: 10px;
  }
  #sec5 .txt{
    padding-left: 20px;
    width: 370px;
  }
  .menu-modal .menu-list{
    gap: 40px;
    justify-content: center;
  }
  .menu-modal .menu-list .col{
    width: 390px;
  }
}