section {
   overflow: hidden;
}

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

@media only screen and (max-width: 767px) {
   #key .photo {
      background-position: left 80% top;
   }
}

/* -- -- */
.txt {
   text-align: start;
}

@media only screen and (max-width: 767px) {
   .txt br {
      display: none;
   }

   .hgroup {
      width: 75vw;
      text-align: center;
      border-bottom: 1px solid #222;
      padding-bottom: 4vw;
      margin: 0 auto;
   }

   .hgroup h3 {
      font-weight: 700;
      font-size: 4.8vw;
      line-height: 1.2;
      letter-spacing: 0.1em;
      background-color: #b72e00;
      color: #fff;
      border-radius: 50px;
      padding: 2vw 0;
      margin: 0 auto;
      position: relative;
   }

   .hgroup h3:before {
      content: '';
      width: 0;
      height: 0;
      border-width: 12px 6.5px 0 6.5px;
      border-color: #b72e00 transparent transparent transparent;
      border-style: solid;
      position: absolute;
      top: 100%;
      left: calc(50% - 6.5px);
   }

   .hgroup h4 {
      font-weight: 800;
      font-size: 6.4vw;
      letter-spacing: 0;
      line-height: 1.5;
      padding: 8vw 0 2vw;
   }

   .hgroup .price {
      font-size: 4.8vw;
      letter-spacing: 0.1em;
      line-height: 1.2;
   }
}

@media only screen and (min-width: 768px) {
   .txt-c .txt {
      text-align: center;
   }

   .hgroup {
      max-width: 400px;
      text-align: center;
      border-bottom: 1px solid #222;
      padding-bottom: 37px;
   }

   .hgroup h3 {
      font-weight: 700;
      font-size: 24px;
      line-height: 30px;
      letter-spacing: 0.1em;
      background-color: #b72e00;
      color: #fff;
      border-radius: 50px;
      padding: 11px 0;
      margin: 0 auto;
      position: relative;
   }

   .hgroup h3:before {
      content: '';
      width: 0;
      height: 0;
      border-width: 12px 6.5px 0 6.5px;
      border-color: #b72e00 transparent transparent transparent;
      border-style: solid;
      position: absolute;
      top: 100%;
      left: 98px;
   }

   .hgroup h4 {
      font-weight: 800;
      font-size: 50px;
      letter-spacing: 0;
      line-height: 60px;
      padding: 50px 0 12px;
   }

   .hgroup .price {
      font-size: 20px;
      letter-spacing: 0.1em;
      line-height: 30px;
   }
}

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

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

   #sec1 .txt {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4vw;
      padding: 0 6.6vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      padding: 150px 4% 150px;
   }

   #sec1 .txt {
      width: 690px;
      height: 300px;
      font-size: 18px;
      line-height: 32px;
      margin: 0 auto;
   }

   #sec1 .txt p+p {
      margin-right: 33px;
   }
}

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

@media only screen and (max-width: 767px) {
   #sec2 {
      display: flex;
      justify-content: center;
      gap: 4%;
      font-size: 14px;
      line-height: 24px;
      padding: 0 6.6vw 20vw;
   }

   #sec2 figure {
      width: 48%;
   }

   #sec2 .col {
      width: 48%;
   }

   #sec2 h2 {
      font-weight: 700;
   }

   #sec2 .txt {
      letter-spacing: 0.1em;
      line-height: 24px;
      padding-top: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 20px;
      padding: 0 4% 245px;
   }

   #sec2 figure {
      width: 210px;
   }

   #sec2 .col {
      width: 220px;
   }

   #sec2 h2 {
      font-weight: 700;
      font-size: 14px;
      position: relative;
      top: -10px;
   }

   #sec2 .txt {
      font-size: 14px;
      line-height: 24px;
      /* letter-spacing: 0.1em; */
      padding-top: 10px;
   }
}

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

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

   #sec3-1 .title {
      background: url("../img/menu/sec3-1-deco.png") no-repeat center top/100% auto;
      font-size: 14px;
      line-height: 24px;
   }

   #sec3-1 .title hr {
      border: 0;
      border-top: 1px solid #222;
      margin: 20vw 0;
   }

   #sec3-1 h2 {
      font-weight: 800;
      font-size: 9vw;
      letter-spacing: 0.1em;
      padding: 2vw;
   }

   #sec3-1 .photo {
      margin: 8vw -6.6vw 0;
   }

   #sec3-1 .box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5%;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      padding: 8vw 0;
   }

   #sec3-1 .box dt {
      width: 40%;
   }

   #sec3-1 .box dd {
      width: 55%;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      line-height: 24px;
      position: relative;
      /* padding: 2vw; */
      padding: 4vw;   }

   #sec3-1 .box dd:after {
      content: '';
      width: 5vw;
      height: 5vw;
      background: url("../img/menu/arrow-left.png") no-repeat center top/100% auto;
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
   }

   #sec3-1 .box dd br {
      display: none;
   }

   #sec3-1 .box-point {
      background-color: #f9f3e7;
      font-size: 14px;
      line-height: 26px;
      letter-spacing: 0.1em;
      margin-left: auto;
      padding: 8vw 4vw;
      box-sizing: border-box;
      position: relative;
   }

   #sec3-1 .box-point:after {
      content: '';
      width: 12vw;
      height: 15vw;
      background: url("../img/menu/icon-point.png") no-repeat center top/100% auto;
      position: absolute;
      top: -6vw;
      left: -4vw;
   }

   #sec3-1 .box-point h3 {
      font-weight: 700;
      font-size: 4vw;
      line-height: 1.2;
      letter-spacing: 0.05em;
      text-align: center;
      color: #8c0d00;
   }

   #sec3-1 .box-point h3 span {
      font-size: 6vw;
   }

   #sec3-1 .box-point dl {
      display: flex;
      flex-wrap: wrap;
      gap: 5%;
      padding-top: 5vw;
   }

   #sec3-1 .box-point dl dt {
      width: 40%;
      padding-top: 7px;
   }

   #sec3-1 .box-point dl dd {
      width: 55%;
      letter-spacing: 0.05em;
      line-height: 24px;
   }

   #sec3-1 .box-point dl dd br {
      display: none;
   }

   #sec3-1 .no {
      font-size: 4vw;
      line-height: 1.2;
      text-align: center;
      border-bottom: 1px solid #222;
      margin: 0 auto;
      padding: 20vw 0 4vw;
   }
}

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

   #sec3-1 .title {
      background: url("../img/menu/sec3-1-deco.png") no-repeat center top / 800px auto;
      margin-left: 4%;
   }

   #sec3-1 h2 {
      font-weight: 800;
      letter-spacing: 0.1em;
      padding-bottom: 10px;
      margin-bottom: 80px;
   }

   #sec3-1 hr {
      max-width: 700px;
      border: 0;
      border-top: 1px solid #222;
      margin: 200px auto 200px;
   }

   #sec3-1 .block {
      padding: 0 4%;
   }

   #sec3-1 .block .hgroup {
      margin-right: 4%;
      margin-left: auto;
   }

   #sec3-1 .box {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 44px;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      margin-top: -50px;
      padding-bottom: 70px;
   }

   #sec3-1 .box dt {
      width: 230px;
   }

   #sec3-1 .box dd {
      width: 245px;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      position: relative;
      padding: 14px 20px;
      line-height: 24px;
      /* letter-spacing: 0.1em; */
   }

   #sec3-1 .box dd:after {
      content: '';
      width: 27px;
      height: 24px;
      background: url("../img/menu/arrow-left.png") no-repeat center top/cover;
      position: absolute;
      top: 54px;
      right: 100%;
   }

   #sec3-1 .box-point {
      width: 610px;
      background-color: #f9f3e7;
      font-size: 14px;
      line-height: 26px;
      letter-spacing: 0.1em;
      margin-right: 8.4%;
      margin-left: auto;
      padding: 49px 30px;
      box-sizing: border-box;
      position: relative;
   }

   #sec3-1 .box-point:after {
      content: '';
      width: 90px;
      height: 112px;
      background: url("../img/menu/icon-point.png") no-repeat center top/cover;
      position: absolute;
      top: -50px;
      left: -10px;
   }

   #sec3-1 .box-point h3 {
      font-weight: 700;
      font-size: 18px;
      line-height: 30px;
      letter-spacing: 0.05em;
      text-align: center;
      color: #8c0d00;
   }

   #sec3-1 .box-point h3 span {
      font-size: 24px;
   }

   #sec3-1 .box-point dl {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      padding-top: 17px;
   }

   #sec3-1 .box-point dl dt {
      width: 215px;
      padding-top: 7px;
   }

   #sec3-1 .box-point dl dd {
      width: calc(100% - 243px);
      line-height: 24px;
      letter-spacing: 0.1em;
   }

   #sec3-1 .no {
      max-width: 700px;
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      border-bottom: 1px solid #222;
      margin: 0 auto;
      padding: 230px 0 34px;
   }
}

@media only screen and (min-width: 1400px) {
   #sec3-1 .box {
      margin-top: -100px;
   }
}

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

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

   #sec3-2 .photo {
      margin: 8vw -6.6vw 0;
   }

   #sec3-2 .box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5%;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      padding: 8vw 0;
   }

   #sec3-2 .box dt {
      width: 40%;
   }

   #sec3-2 .box dd {
      width: 55%;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      line-height: 24px;
      position: relative;
      /* padding: 2vw; */
      padding: 4vw;
   }

   #sec3-2 .box dd:after {
      content: '';
      width: 5vw;
      height: 5vw;
      background: url("../img/menu/arrow-right.png") no-repeat center top/100% auto;
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
   }

   #sec3-2 .box dd br {
      display: none;
   }

   #sec3-2 .box-check {
      background-color: #f9f3e7;
      font-size: 14px;
      line-height: 26px;
      letter-spacing: 0.1em;
      margin-left: auto;
      padding: 8vw 4vw;
      box-sizing: border-box;
      position: relative;
   }

   #sec3-2 .box-check:after {
      content: '';
      width: 12vw;
      height: 15vw;
      background: url("../img/menu/icon-check.png") no-repeat center top/100% auto;
      position: absolute;
      top: -6vw;
      left: -4vw;
   }

   #sec3-2 .box-check h3 {
      font-weight: 700;
      font-size: 4vw;
      line-height: 1.2;
      letter-spacing: 0.05em;
      text-align: center;
      color: #8c0d00;
   }

   #sec3-2 .box-check h3 span {
      font-size: 6vw;
   }

   #sec3-2 .box-check dl {
      display: flex;
      flex-wrap: wrap;
      gap: 5%;
      padding-top: 5vw;
   }

   #sec3-2 .box-check dl dt {
      width: 40%;
      padding-top: 7px;
   }

   #sec3-2 .box-check dl dd {
      width: 55%;
      letter-spacing: 0.05em;
      line-height: 24px;
   }

   #sec3-2 .box-check dl dd br {
      display: none;
   }

   #sec3-2 .no {
      font-size: 4vw;
      line-height: 1.2;
      text-align: center;
      border-bottom: 1px solid #222;
      margin: 0 auto;
      padding: 20vw 0 4vw;
   }
}

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

   #sec3-2 .block {
      padding: 0 4%;
   }

   #sec3-2 .hgroup {
      max-width: 440px;
   }

   #sec3-2 .hgroup h3 {
      max-width: 400px;
   }

   #sec3-2 .photo {
      margin-top: -47px;
   }

   #sec3-2 .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 37px;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      padding: 0 8% 54px 0;
   }

   #sec3-2 .box dt {
      width: 266px;
   }

   #sec3-2 .box dd {
      width: 290px;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      position: relative;
      padding: 14px 20px;
      line-height: 24px;
      /* letter-spacing: 0.1em; */
   }

   #sec3-2 .box dd:after {
      content: '';
      width: 27px;
      height: 29px;
      background: url("../img/menu/arrow-right.png") no-repeat center top/cover;
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
   }

   #sec3-2 .box-check {
      width: 605px;
      background-color: #f9f3e7;
      font-size: 14px;
      line-height: 26px;
      letter-spacing: 0.1em;
      padding: 48px 30px 55px;
      margin-left: 2.4%;
      box-sizing: border-box;
      position: relative;
   }

   #sec3-2 .box-check:after {
      content: '';
      width: 95px;
      height: 109px;
      background: url("../img/menu/icon-check.png") no-repeat center top/cover;
      position: absolute;
      top: -40px;
      left: -25px;
   }

   #sec3-2 .box-check h3 {
      font-weight: 700;
      font-size: 18px;
      line-height: 30px;
      letter-spacing: 0.05em;
      text-align: center;
      color: #8c0d00;
   }

   #sec3-2 .box-check h3 span {
      font-size: 24px;
   }

   #sec3-2 .box-check dl {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      padding-top: 15px;
   }

   #sec3-2 .box-check dl dt {
      width: 200px;
      padding-top: 7px;
   }

   #sec3-2 .box-check dl dd {
      width: calc(100% - 228px);
      line-height: 24px;
      letter-spacing: 0.1em;
   }

   #sec3-2 .no {
      max-width: 700px;
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      border-bottom: 1px solid #222;
      margin: 0 auto;
      padding: 226px 0 34px;
   }
}

@media only screen and (min-width: 1400px) {
   #sec3-2 .box {
      margin-top: -27px;
   }

   #sec3-2 .box-check:after {
      top: -65px;
   }
}

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

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

   #sec3-3 .photo {
      margin: 8vw -6.6vw 0;
   }

   #sec3-3 .box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5%;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      padding: 8vw 0;
   }

   #sec3-3 .box dt {
      width: 40%;
   }

   #sec3-3 .box dd {
      width: 55%;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      line-height: 24px;
      position: relative;
      /* padding: 2vw; */
      padding: 4vw;
   }

   #sec3-3 .box dd:after {
      content: '';
      width: 5vw;
      height: 5vw;
      background: url("../img/menu/arrow-left1.png") no-repeat center top/100% auto;
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
   }

   #sec3-3 .box dd br {
      display: none;
   }

   #sec3-3 .box-good {
      background-color: #f9f3e7;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      margin-left: auto;
      padding: 8vw 4vw;
      box-sizing: border-box;
      position: relative;
   }

   #sec3-3 .box-good:after {
      content: '';
      width: 12vw;
      height: 15vw;
      background: url("../img/menu/icon-good.png") no-repeat center top/100% auto;
      position: absolute;
      top: -6vw;
      left: -4vw;
   }

   #sec3-3 .box-good h3 {
      font-weight: 700;
      font-size: 4vw;
      line-height: 1.2;
      letter-spacing: 0.05em;
      text-align: center;
      color: #8c0d00;
   }

   #sec3-3 .box-good h3 span {
      font-size: 6vw;
   }

   #sec3-3 .box-good dl {
      display: flex;
      flex-wrap: wrap;
      gap: 5%;
      padding-top: 5vw;
   }

   #sec3-3 .box-good dl dt {
      width: 40%;
      padding-top: 7px;
   }

   #sec3-3 .box-good dl dd {
      width: 55%;
      letter-spacing: 0.05em;
      line-height: 24px;
   }

   #sec3-3 .box-good dl dd br {
      display: none;
   }

   #sec3-3 .no {
      font-size: 4vw;
      line-height: 1.2;
      text-align: center;
      border-bottom: 1px solid #222;
      margin: 0 auto;
      padding: 20vw 0 4vw;
   }
}

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

   #sec3-3 .block {
      padding: 0 4%;
   }

   #sec3-3 .hgroup {
      margin-right: 4%;
      margin-left: auto;
   }

   #sec3-3 .box {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 29px;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      padding-bottom: 110px;
   }

   #sec3-3 .box dt {
      width: 290px;
   }

   #sec3-3 .box dd {
      width: 315px;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      position: relative;
      padding: 14px 20px;
      margin-top: 18px;
      line-height: 24px;
      /* letter-spacing: 0.1em; */
   }

   #sec3-3 .box dd:after {
      content: '';
      width: 27px;
      height: 29px;
      background: url("../img/menu/arrow-left1.png") no-repeat center top/cover;
      position: absolute;
      top: 42px;
      right: 100%;
   }

   #sec3-3 .box-good {
      width: 550px;
      background-color: #f9f3e7;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      margin-right: 4%;
      margin-left: auto;
      padding: 49px 30px;
      box-sizing: border-box;
      position: relative;
   }

   #sec3-3 .box-good:after {
      content: '';
      width: 105px;
      height: 103px;
      background: url("../img/menu/icon-good.png") no-repeat center top/cover;
      position: absolute;
      top: -60px;
      left: -20px;
   }

   #sec3-3 .box-good h3 {
      font-weight: 700;
      font-size: 18px;
      line-height: 30px;
      letter-spacing: 0.05em;
      text-align: center;
      color: #8c0d00;
   }

   #sec3-3 .box-good h3 span {
      font-size: 24px;
   }

   #sec3-3 .box-good dl {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      padding-top: 17px;
   }

   #sec3-3 .box-good dl dt {
      width: 240px;
      padding-top: 7px;
   }

   #sec3-3 .box-good dl dd {
      width: calc(100% - 270px);
      line-height: 24px;
      /* letter-spacing: 0.1em; */
   }

   #sec3-3 .no {
      max-width: 700px;
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      border-bottom: 1px solid #222;
      margin: 0 auto;
      padding: 222px 0 34px;
   }
}

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

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

   #sec4 .slider-fade {
      margin-top: 8vw;
      position: relative;
   }

   #sec4 .slider-fade:before {
      content: '';
      width: 20vw;
      height: 12vw;
      background: url("../img/menu/sec4-deco.png") no-repeat center top/100% auto;
      position: absolute;
      top: -4vw;
      right: -6.6vw;
      z-index: 1;
   }

   #sec4 .slider-fade:after {
      content: '';
      width: 20vw;
      height: 12vw;
      background: url("../img/menu/sec4-deco.png") no-repeat center top/100% auto;
      position: absolute;
      bottom: -4vw;
      left: -6.6vw;
   }

   #sec4 .slider-fade .slick-dots {
      justify-content: center;
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      margin-top: 4vw;
   }

   #sec4 .slider-fade figure img {
      width: 100%;
      max-width: inherit;
   }

   #sec4 .box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5%;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      margin-top: 12vw;
   }

   #sec4 .box dt {
      width: 45%;
   }

   #sec4 .box dd {
      width: 50%;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      line-height: 24px;
      position: relative;
      /* padding: 2vw; */
      padding: 4vw;
      margin-top: 18px;
   }

   #sec4 .box dd:after {
      content: '';
      width: 5vw;
      height: 6vw;
      background: url("../img/menu/arrow-left2.png") no-repeat center top/cover;
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
   }

   #sec4 .box dd br {
      display: none;
   }
}

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

   #sec4 .slider-fade {
      width: 80%;
      margin: 130px 0 0 5.7%;
      position: relative;
   }

   #sec4 .slider-fade:before {
      content: '';
      width: 260px;
      height: 151px;
      background: url("../img/menu/sec4-deco.png") no-repeat center top/cover;
      position: absolute;
      top: -50px;
      right: -50px;
      z-index: 1;
   }

   #sec4 .slider-fade:after {
      content: '';
      width: 260px;
      height: 151px;
      background: url("../img/menu/sec4-deco.png") no-repeat center top/cover;
      position: absolute;
      bottom: -50px;
      left: -50px;
   }

   #sec4 .slider-fade .slick-dots {
      justify-content: center;
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      margin-top: 20px;
   }

   #sec4 .slider-fade figure img {
      width: 100%;
      max-width: inherit;
   }

   #sec4 .box {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 44px;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      margin-top: 130px;
   }

   #sec4 .box dt {
      width: 251px;
      padding-bottom: 6px;
   }

   #sec4 .box dd {
      width: calc(100% - 295px);
      max-width: 455px;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      position: relative;
      padding: 14px 20px;
      margin-top: 18px;
      line-height: 24px;
      /* letter-spacing: 0.1em; */
   }

   #sec4 .box dd:after {
      content: '';
      width: 27px;
      height: 34px;
      background: url("../img/menu/arrow-left2.png") no-repeat center top/cover;
      position: absolute;
      top: 34px;
      right: 100%;
   }
}

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

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

   #sec5 .video {
      width: 100%;
      padding-top: 56.25%;
      margin-top: 12vw;
      position: relative;
   }

   #sec5 .video iframe {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec5 .box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5%;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      padding: 8vw 0;
   }

   #sec5 .box dt {
      width: 40%;
   }

   #sec5 .box dd {
      width: 55%;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      line-height: 24px;
      position: relative;
      /* padding: 2vw; */
      padding: 4vw;
   }

   #sec5 .box dd:after {
      content: '';
      width: 5vw;
      height: 5vw;
      background: url("../img/menu/arrow-right1.png") no-repeat center top/100% auto;
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
   }

   #sec5 .box dd br {
      display: none;
   }

   #sec5 .box-point {
      background-color: #f9f3e7;
      font-size: 14px;
      line-height: 26px;
      letter-spacing: 0.1em;
      margin-left: auto;
      padding: 8vw 4vw;
      box-sizing: border-box;
      position: relative;
   }

   #sec5 .box-point:after {
      content: '';
      width: 12vw;
      height: 15vw;
      background: url("../img/menu/icon-point.png") no-repeat center top/100% auto;
      position: absolute;
      top: -6vw;
      left: -4vw;
   }

   #sec5 .box-point h3 {
      font-weight: 700;
      font-size: 4vw;
      line-height: 1.2;
      letter-spacing: 0.05em;
      text-align: center;
      color: #8c0d00;
   }

   #sec5 .box-point h3 span {
      font-size: 6vw;
   }

   #sec5 .box-point dl {
      display: flex;
      flex-wrap: wrap;
      gap: 5%;
      padding-top: 5vw;
   }

   #sec5 .box-point dl dt {
      width: 40%;
      padding-top: 7px;
   }

   #sec5 .box-point dl dd {
      width: 55%;
      letter-spacing: 0.05em;
      line-height: 24px;
   }

   #sec5 .box-point dl dd br {
      display: none;
   }
}

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

   #sec5 .hgroup {
      margin-right: 4%;
      margin-left: auto;
   }

   #sec5 .video {
      width: 80%;
      padding-top: 45.25%;
      margin: 100px auto 0;
      position: relative;
   }

   #sec5 .video iframe {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec5 .box {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 24px;
      font-size: 14px;
      line-height: 26px;
      /* letter-spacing: 0.1em; */
      margin-top: 84px;
      padding-right: 4%;
   }

   #sec5 .box dt {
      width: 249px;
      padding-top: 70px;
   }

   #sec5 .box dd {
      width: 286px;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      position: relative;
      padding: 14px 20px;
      margin-top: 18px;
      line-height: 24px;
      /* letter-spacing: 0.1em; */
   }

   #sec5 .box dd:after {
      content: '';
      width: 28px;
      height: 28px;
      background: url("../img/menu/arrow-right1.png") no-repeat center top/cover;
      position: absolute;
      top: 41px;
      left: 100%;
   }

   #sec5 .box-point {
      width: 600px;
      background-color: #f9f3e7;
      font-size: 14px;
      line-height: 26px;
      letter-spacing: 0.1em;
      margin-top: 20px;
      margin-left: 9.7%;
      padding: 45px 30px 53px;
      box-sizing: border-box;
      position: relative;
   }

   #sec5 .box-point:after {
      content: '';
      width: 90px;
      height: 112px;
      background: url("../img/menu/icon-point.png") no-repeat center top/cover;
      position: absolute;
      top: -55px;
      left: -10px;
   }

   #sec5 .box-point h3 {
      font-weight: 700;
      font-size: 18px;
      line-height: 30px;
      letter-spacing: 0.05em;
      text-align: center;
      color: #8c0d00;
   }

   #sec5 .box-point h3 span {
      font-size: 24px;
   }

   #sec5 .box-point dl {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      padding-top: 17px;
   }

   #sec5 .box-point dl dt {
      width: 215px;
      padding-top: 7px;
   }

   #sec5 .box-point dl dd {
      width: calc(100% - 243px);
      line-height: 24px;
      /* letter-spacing: 0.1em; */
   }
}

@media only screen and (min-width: 1400px) {
   #sec5 .box-point {
      margin-top: -22px
   }
}

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

@media only screen and (max-width: 767px) {
   #sec6 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1vw 5%;
      padding: 54vw 6.6vw 20vw;
   }

   #sec6 figure {
      width: 40%;
   }

   #sec6 .col {
      width: 55%;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      line-height: 24px;
      padding: 3.5vw;
      position: relative;
   }

   #sec6 .col:after {
      content: '';
      width: 5vw;
      height: 6vw;
      background: url("../img/menu/arrow-left3.png") no-repeat center top/100% auto;
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
   }

   #sec6 h2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50vw;
      height: 50vw;
      background-color: #b72e00;
      font-weight: 700;
      font-size: 6vw;
      line-height: 1.5;
      letter-spacing: 0.2em;
      text-align: center;
      color: #fff;
      border-radius: 50%;
      position: absolute;
      bottom: 100%;
      left: -23vw;
      z-index: 1;
      margin-bottom: 4vw;
   }

   #sec6 .txt {
      text-align: left;
      line-height: 30px;
   }

   #sec6 .note {
      width: 100%;
      font-size: 12px;
   }
}

@media only screen and (min-width: 768px) {
   #sec6 {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 50px;
      padding: 0 4% 305px 4%;
   }

   #sec6 figure {
      width: calc(40% - 50px);
      position: relative;
      top: -5px;
      align-self: center;
   }

   #sec6 .col {
      width: 60%;
      border: 2px solid #81807f;
      box-sizing: border-box;
      border-radius: 20px;
      font-size: 18px;
      line-height: 32px;
      padding: 140px 25px 25px;
      align-self: flex-end;
      position: relative;
   }

   #sec6 .col:after {
      content: '';
      width: 26px;
      height: 34px;
      background: url("../img/menu/arrow-left3.png") no-repeat center top/cover;
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
   }

   #sec6 h2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 200px;
      background-color: #b72e00;
      font-weight: 700;
      font-size: 24px;
      line-height: 36px;
      letter-spacing: 0.2em;
      text-align: center;
      color: #fff;
      border-radius: 50%;
      position: absolute;
      top: -120px;
      left: -32px;
      z-index: 1;
   }

   #sec6 .col .txt {
      line-height: 32px;
   }

   #sec6 .note {
      width: 100%;
      font-size: 12px;
   }
}

@media only screen and (min-width: 1400px) {
   #sec6 {
      padding-right: 11.6%;
   }

   #sec6 .col {
      width: 710px;
      padding: 22px 25px 25px 200px;
   }

   #sec6 figure {
      width: calc(100% - 760px);
   }
}

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

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

   #sec7 .title {
      background: url("../img/menu/sec7-photo1.jpg") no-repeat center top/cover;
      height: 100vw;
      color: #fff;
      text-align: right;
      margin: 0 -6.6vw;
   }

   #sec7 h2 {
      font-weight: 700;
      font-size: 8vw;
      line-height: 1.5;
      letter-spacing: 0.05em;
      padding: 4vw 6.6vw 0 0;
      text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
   }

   #sec7 h2 span {
      font-size: 10vw;
   }

   #sec7 .photo1 {
      margin: 8vw -3vw 0 -7vw;
   }

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

   #sec7 .txt p+p {
      padding-top: 4vw;
   }

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

   #sec7 .photo2 {
      display: flex;
      gap: 2vw;
      padding-top: 8vw;
   }
}

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

   #sec7 .title {
      background: url("../img/menu/sec7-photo1.jpg") no-repeat center top/cover;
      height: 740px;
      color: #fff;
      text-align: right;
   }

   #sec7 h2 {
      font-weight: 700;
      font-size: 60px;
      line-height: 76px;
      letter-spacing: 0.05em;
      padding: 33px 4% 0 0;
      text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
   }

   #sec7 h2 span {
      font-size: 70px;
   }

   #sec7 .photo1 {
      padding-top: 108px;
   }

   #sec7 .box {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      padding: 35px 7.7% 0 0;
   }

   #sec7 h4 {
      font-weight: 700;
      font-size: 30px;
      line-height: 1.75;
      letter-spacing: 0.05em;
      padding: 33px 4% 30px 0;
   }
   #sec7 .txt p+p {
      padding-top: 30px;
   }

   #sec7 .photo2 {
      display: flex;
      flex-wrap: wrap;
      gap: 50px;
      padding: 150px 7.7% 0 0;
   }

   #sec7 .photo2 li {
      width: calc(50% - 25px);
   }

   #sec7 .photo2 li img {
      width: 100%;
      max-width: inherit;
   }
}

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

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

   #sec8 h2 {
      font-size: 8vw;
      line-height: 1.5;
      letter-spacing: 0.1em;
      text-align: center;
   }

   #sec8 h2 small {
      display: block;
      font-size: 14px;
   }

   #sec8 .list-menu {
      background-color: #f3f3f3;
      padding: 4vw;
   }

   #sec8 .list-menu .col:first-child h4:first-child {
      padding-top: 0;
   }

   #sec8 .list-menu h4 {
      margin-bottom: 8vw;
      padding-top: 12vw;
   }

   #sec8 .list-menu dl {
      padding-top: 12px;
      padding-bottom: 12px;
   }

   #sec8 .list-menu dl+dl {
      padding-top: 12px;
   }

   #sec8 .block {
      padding-top: 12vw;
   }

   #sec8 .block h3 {
      font-weight: 500;
      font-size: 6vw;
      line-height: 1.2;
      letter-spacing: 0.1em;
      padding-bottom: 4vw;
   }

   #sec8 .note-bottom {
      font-size: 12px;
   }
}

@media only screen and (min-width: 768px) {
   #sec8 {
      padding: 0 8% 250px 0;
   }

   #sec8 h2 {
      font-size: 60px;
      line-height: 60px;
      letter-spacing: 0.1em;
   }

   #sec8 h2 small {
      font-size: 14px;
      padding-left: 20px;
   }

   #sec8 .list-menu {
      background-color: #f3f3f3;
   }

   #sec8 .block {
      box-sizing: border-box;
      padding-top: 48px;
   }

   #sec8 .block+.block {
      padding-top: 100px;
   }

   #sec8 .block h3 {
      font-size: 36px;
      line-height: 36px;
      letter-spacing: 0.1em;
      padding-bottom: 35px;
   }

   #sec8 .block .list-menu {
      display: flex;
      flex-wrap: wrap;
      gap: 50px;
      padding: 46px 4%;
   }

   #sec8 .block .list-menu .col {
      width: calc(50% - 25px);
   }

   #sec8 .block .list-menu dl {
      padding: 32px 30px 29px;
   }

   #sec8 .block .list-menu dl:first-child {
      padding-top: 0;
   }

   #sec8 .block .list-menu01 h4:not(:first-child) {
      margin-top: 38px;
   }

   #sec8 .block .list-menu01 dl {
      padding: 10px 30px;
   }

   #sec8 .block .list-menu01 dl:first-child {
      padding-top: 0;
   }

   #sec8 .note-bottom {
      font-size: 12px;
   }
}

@media only screen and (min-width: 1400px) {
   #sec8 .block .list-menu {
      gap: 50px 140px;
   }

   #sec8 .block .list-menu .col {
      width: calc(50% - 70px);
   }
}

/* -- -- */
#sec9 {
   border: 1px solid #222;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec9 {
      padding: 6.6vw;
   }

   #sec9 .photo {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
   }

   #sec9 .photo figure {
      width: calc(50% - 5px);
   }

   #sec9 .photo figure:first-child {
      width: 100%;
   }

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

   #sec9 h2 {
      font-weight: 700;
      font-size: 6.6vw;
      line-height: 1.5;
      letter-spacing: 0.2em;
   }

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

@media only screen and (min-width: 768px) {
   #sec9 {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
      padding: 87px 4% 100px;
   }

   #sec9 .photo {
      display: flex;
      flex-wrap: wrap;
      gap: 19px;
      width: calc(100% - 420px);
      max-width: 640px;
      padding-top: 13px;
   }

   #sec9 .photo figure {
      width: calc(50% - 10px);
   }

   #sec9 .photo figure:first-child {
      width: 100%;
   }

   #sec9 .col {
      width: 390px;
   }

   #sec9 h2 {
      font-weight: 700;
      font-size: 50px;
      line-height: 70px;
      letter-spacing: 0;
      text-align: right;
   }

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

@media only screen and (min-width: 1201px) {
   #sec9 {
      gap: 70px;
      padding: 87px 7.7% 100px;
   }

   #sec9 .photo {
      width: calc(100% - 460px);
   }
}

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

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

   #sec10 .list-menu {
      background-color: #f3f3f3;
      padding: 4vw;
   }

   #sec10 .list-menu .col:first-child h4:first-child {
      padding-top: 0;
   }

   #sec10 .list-menu h4 {
      margin-bottom: 8vw;
      padding-top: 12vw;
   }

   #sec10 .list-menu dl {
      padding-top: 12px;
      padding-bottom: 12px;
   }

   #sec10 .list-menu dl+dl {
      padding-top: 12px;
   }

   #sec10 .list-menu .note {
      text-align: right;
      padding-top: 10px;
   }

   #sec10 .block {
      padding-top: 12vw;
   }

   #sec10 .block h3 {
      font-weight: 500;
      font-size: 6vw;
      line-height: 1.2;
      letter-spacing: 0.1em;
      padding-bottom: 4vw;
   }

   #sec10 .note-bottom {
      font-size: 12px;
   }
}

@media only screen and (min-width: 768px) {
   #sec10 {
      padding: 246px 8% 200px 0;
   }

   #sec10 .block {
      box-sizing: border-box;
   }

   #sec10 .block+.block {
      padding-top: 95px;
   }

   #sec10 .block h3 {
      font-weight: 500;
      font-size: 36px;
      line-height: 36px;
      letter-spacing: 0.1em;
      padding-bottom: 35px;
   }

   #sec10 .list-menu {
      display: flex;
      flex-wrap: wrap;
      gap: 50px;
      background-color: #f3f3f3;
      padding: 46px 4% 50px;
   }

   #sec10 .list-menu .col {
      width: calc(50% - 25px);
   }

   #sec10 .list-menu dl {
      padding: 32px 30px 29px;
   }

   #sec10 .list-menu dl:first-child {
      padding-top: 0;
   }

   #sec10 .list-menu.colx3 {
      gap: 50px 36px;
   }

   #sec10 .list-menu.colx3 .col {
      width: calc(33.33% - 24px);
   }

   #sec10 .list-menu.colx3 h4 {
      padding-bottom: 7px;
      margin-bottom: 6px;
   }

   #sec10 .list-menu.colx3 h4:not(:first-child) {
      margin-top: 38px;
   }

   #sec10 .list-menu.colx3 dl {
      padding: 10px 20px 9px;
   }

   #sec10 .list-menu.colx3 dl:first-child {
      padding-top: 0;
   }

   #sec10 .list-menu1 h4 {
      font-size: 20px;
   }

   #sec10 .list-menu .note {
      text-align: right;
      padding-top: 10px;
   }

   #sec10 .note-bottom {
      font-size: 12px;
   }
}

@media only screen and (min-width: 1400px) {
   #sec8 .block .list-menu {
      gap: 50px 140px;
   }

   #sec8 .block .list-menu .col {
      width: calc(50% - 70px);
   }
}

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

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

@media only screen and (min-width: 768px) {
   #sec11 figure {
      width: 92%;
   }
}