@media only screen and (min-width: 768px) {
   header h1 {
      height: 725px;
      top: 145px;
   }

   .list-menu .ttl {
      font-size: 18px;
   }
}

#sec1 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      background: url("../img/index/sec1-deco-2_sp.png") no-repeat center bottom/100% auto;
      padding-bottom: 35vw;
   }

   #sec1 .box-1 {
      position: relative;
      z-index: 1;
   }

   #sec1 h2 {
      position: absolute;
      top: 75vw;
      right: 3.3vw;
      left: 15vw;
   }

   #sec1 h2>span {
      display: block;
      width: max-content;
      letter-spacing: 0;
   }

   #sec1 h2>span:last-child {
      margin-left: auto;
      text-shadow: 0 0 15px #000;
   }

   #sec1 h2 .bg {
      background: url("../img/shared/bg-pattern-03.jpg") repeat center top;
      line-height: 1;
      padding: 2vw 3vw 1vw;
   }

   #sec1 h2 .h-36 {
      font-size: 5vw;
   }

   #sec1 h2 .h-46 {
      font-size: 6vw;
   }

   #sec1 h2.h-56 {
      font-size: 8vw;
   }

   #sec1 .photo-1 {
      width: 100%;
      height: 128.4vw;
   }

   #sec1 .photo-2 {
      width: 70vw;
      position: absolute;
      bottom: -35vw;
      left: -10vw;
   }

   #sec1 .box-2 {
      background: url("../img/index/sec1-deco-1_sp.png") no-repeat center top/100% auto;
      padding-top: 40vw;
      padding-bottom: 8vw;
      position: relative;
   }

   #sec1 .box-2 figure {
      width: 84.8vw;
      margin-left: -5.3vw;
      padding-top: 18vw;
   }

   #sec1 .txt {
      background: url("../img/index/sec1-dot_sp.png") repeat center top/auto 45px;
      line-height: 45px;
      padding-bottom: 1px;
   }

   #sec1 h3 {
      font-size: 7.2vw;
      line-height: 1;
      position: absolute;
      bottom: 0;
      right: 8vw;
   }

   #sec1 h3>span {
      display: inline-block;
      background: url("../img/shared/bg-pattern-04.jpg") repeat center top;
      color: #2f1c07;
      padding: 3vw 0;
   }

   #sec1 h3>span:last-child {
      margin: 23vw 2vw 0 0;
   }

   #sec1 h3 .h-36 {
      font-size: 5.6vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      background: url("../img/index/sec1-deco-1.png") no-repeat top left;
      padding: 24px 0 93px;
   }

   #sec1:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/index/sec1-deco-2.png") no-repeat bottom 43px right;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec1 .box-1 {
      max-width: 1500px;
      margin: 0 auto;
      position: relative;
   }

   #sec1 .photo-1 {
      width: calc(50% + 323px);
      height: 845px;
      margin-left: auto;
   }

   #sec1 .photo-2 {
      width: calc(50% - 30px);
      position: absolute;
      bottom: -270px;
      left: 0;
   }

   #sec1 h2 {
      position: absolute;
      top: 247px;
      left: 72px;
   }

   #sec1 h2>span {
      display: inline-block;
      letter-spacing: 0;
   }

   #sec1 h2>span:last-child {
      padding: 20px 0 0 180px;
   }

   #sec1 h2 .bg {
      background: url("../img/shared/bg-pattern-03.jpg") repeat center top;
      letter-spacing: -0.05em;
      padding: 0 25px 0 28px;
   }

   #sec1 h2 .bg small {
      font-size: 37px;
   }

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

   #sec1 .box-2 figure {
      width: 647px;
      position: absolute;
      top: 190px;
      right: -147px;
   }

   #sec1 h3 {
      position: absolute;
      top: -204px;
      right: 153px;
      line-height: 60px;
   }

   #sec1 h3 span {
      line-height: inherit;
      letter-spacing: 0.1em;
   }

   #sec1 h3>span {
      display: inline-block;
      background: url("../img/shared/bg-pattern-04.jpg") repeat center top;
      color: #2f1c07;
      padding: 15px 0 23px;
   }

   #sec1 h3>span:last-child {
      margin: 150px 4px 0 0;
      padding-bottom: 5px;
   }

   #sec1 .txt {
      width: 417px;
      height: 530px;
      background: url("../img/index/sec1-dot.png") repeat top right;
      line-height: 52px;
      padding: 11px 0 0;
   }
}

#sec2 {
   position: relative;
}

#sec2 h2 .fnt-klee-one {
   font-weight: 600;
}

@media only screen and (max-width: 767px) {
   #sec2 {
      background: url("../img/index/sec2-deco-2_sp.png") no-repeat center bottom/100% auto;
      padding-bottom: 56.8vw;
   }

   #sec2:before {
      content: '';
      width: 100%;
      height: 128vw;
      background: url("../img/index/sec2-deco-1_sp.png") no-repeat center top/cover;
      position: absolute;
      top: -69.2vw;
      left: 0;
   }

   #sec2 .wrap {
      padding: 0 2.6vw;
   }

   #sec2 h2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: 8vw;
      line-height: 1;
      position: relative;
   }

   #sec2 h2:before {
      content: '';
      width: 56.5vw;
      height: 2.4vw;
      background: url("../img/index/sec2-deco-1.png") no-repeat center top/cover;
      position: absolute;
      top: 0;
      left: -22vw;
   }

   #sec2 h2 .bg {
      background: url("../img/index/sec2-h2-bg.jpg") no-repeat center top/cover;
      width: 19.6vw;
      font-weight: 400;
      font-size: 14.93vw;
      line-height: 19vw;
      text-align: center;
      padding-bottom: 1.5vw;
   }

   #sec2 h2 span {
      letter-spacing: 0;
   }

   #sec2 h2 span:nth-child(1) {
      letter-spacing: -0.1em;
   }

   #sec2 h2 span:nth-child(3) {
      margin-top: 2.8vw;
   }

   #sec2 h2 span:nth-child(4) {
      align-self: flex-end;
      padding-bottom: 2.8vw;
   }

   #sec2 .photos {
      padding: relative;
      padding-top: 8vw;
   }

   #sec2 .photos figure:nth-child(1) {
      width: 85vw;
   }

   #sec2 .photos figure:nth-child(2) {
      width: 73vw;
      margin-top: -19.3vw;
      margin-left: auto;
   }

   #sec2 .txt {
      padding: 14vw 2.6vw 0;
   }

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

@media only screen and (min-width: 768px) {
   #sec2 {
      background: url("../img/index/sec2-bg-img.png") no-repeat bottom right;
      padding-bottom: 632px;
   }

   #sec2:before {
      content: '';
      width: 100%;
      padding-top: 148%;
      background: url("../img/index/sec2-deco.png") no-repeat center top/cover;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -1;
   }

   #sec2 .photos {
      width: 700px;
      position: absolute;
      top: 96px;
      left: -300px;
      padding: 0 80px 298px 0;
   }

   #sec2 .photos figure:nth-child(2) {
      width: 442px;
      position: absolute;
      bottom: 0;
      right: 0;
   }

   #sec2 h2 {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      font-weight: 600;
      font-size: 49px;
      line-height: 121px;
      letter-spacing: 0.1em;
      text-align: right;
      position: relative;
   }

   #sec2 h2:before {
      content: '';
      width: 424px;
      height: 18px;
      background: url("../img/index/sec2-deco-1.png") no-repeat center top/cover;
      position: absolute;
      top: -5px;
      right: 362px;
   }

   #sec2 h2 span {
      letter-spacing: 0;
   }

   #sec2 h2 span:nth-child(1) {
      letter-spacing: -0.1em;
      padding: 7px 20px 0 0;
   }

   #sec2 h2 span:nth-child(2) {
      margin-right: 7px;
   }

   #sec2 h2 span:nth-child(3) {
      margin: 20px 10px 0 0;
   }

   #sec2 h2 span:nth-child(4) {
      padding-top: 34px;
   }

   #sec2 h2 .bg {
      background: url("../img/index/sec2-h2-bg.jpg") no-repeat center top/cover;
      width: 117px;
      height: 121px;
      font-weight: 400;
      font-size: 92px;
      line-height: 110px;
      text-align: center;
      box-sizing: border-box;
   }

   #sec2 .col {
      width: 547px;
      margin-left: auto;
      padding: 73px 10px 0 0;
   }

   #sec2 .button {
      padding: 94px 20px 0 0;
   }
}

@media only screen and (min-width: 1331px) {
   #sec2 .wrap {
      width: 1280px;
   }

   #sec2 .photos {
      left: -60px;
   }
}

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

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

   #sec3 .bg-parallax {
      min-height: 86vw;
   }

   #sec3 .wrap {
      background: url("../img/index/sec3-deco-1_sp.png") no-repeat center top/100% auto;
   }

   #sec3 .logo {
      width: 25.6vw;
      margin: 0 auto;
      padding-top: 18.8vw;
   }

   #sec3 .txt {
      text-align: center;
      padding-top: 14vw;
   }

   #sec3 .txt br {
      display: block;
   }

   #sec3 .button {
      padding-top: 10vw;
   }

   #sec3 .photos {
      border: 10px solid #000;
      margin: 15vw 4vw 0;
      padding: 2vw;
      position: relative;
   }

   #sec3 .photos:before {
      content: '';
      width: 50vw;
      height: 100%;
      background: url("../img/index/sec3-deco-2_sp.png") no-repeat center top/cover;
      position: absolute;
      top: 0;
      left: 50%;
   }

   #sec3 .photos figure:last-child {
      padding-top: 2vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 {
      background: url("../img/index/sec3-bg-img-1.png") no-repeat bottom left;
      margin-bottom: 10px;
      padding-bottom: 83px;
   }

   #sec3:before {
      content: '';
      width: 100%;
      background: url("../img/index/sec3-deco-1.png") no-repeat top left, url("../img/index/sec3-deco-2.png") no-repeat top 310px right;
      position: absolute;
      top: 645px;
      bottom: 0;
      left: 0;
   }

   #sec3 .bg-parallax {
      background-image: url("../img/index/sec3-bg-img.jpg");
      min-height: 645px;
   }

   #sec3 .wrap {
      display: grid;
      grid-template-columns: 580px 1fr;
      align-items: flex-start;
      width: 100%;
      max-width: 1340px;
      padding-top: 110px;
   }

   #sec3 .col {
      padding: 30px 0 0;
   }

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

   #sec3 .button {
      padding-top: 85px;
   }

   #sec3 .photos {
      border: 20px solid #000;
      padding: 25px 20px 22px;
   }

   #sec3 .photos figure:not(:last-child) {
      padding-bottom: 20px;
   }
}

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

#sec4 .row {
   background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
   position: relative;
}

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

   #sec4 .row {
      padding: 14.6vw 5.4vw;
   }

   #sec4 .logo {
      width: 50vw;
      margin: 0 auto;
   }

   #sec4 .txt {
      line-height: 25px;
      padding-top: 8vw;
   }

   #sec4 .button {
      padding-top: 10vw;
   }

   #sec4 .button a {
      background-image: url("../img/index/sec4-ushi-btn-bg.png");
   }

   #sec4 .ushi .photos {
      width: 64.8vw;
      margin: 0 auto;
      padding-top: 10vw;
   }

   #sec4 .ushi .photos figure:last-child {
      padding-top: 4vw;
   }

   #sec4 .burger {
      margin-top: 8vw;
   }

   #sec4 .burger .button {
      padding-top: 3.4vw;
   }

   #sec4 .burger .button p {
      padding-top: 6.6vw;
   }

   #sec4 .burger figure {
      width: 64.8vw;
      margin: 0 auto;
      padding-top: 10vw;
   }

   .popup-burger .logo {
      width: 50vw;
      margin: 0 auto;
   }

   .popup-burger .tel {
      color: #5e4d3c;
      margin: 6vw 2.6vw 0;
      padding: 3vw 0;
   }

   .popup-burger .tel small {
      display: inline-block;
      font-size: 12px;
      line-height: 14px;
   }

   .popup-burger .txt-info {
      letter-spacing: 0;
      line-height: 21px;
      text-align: left;
      padding-top: 8vw;
   }

   .popup-burger .txt-info dl {
      display: grid;
      grid-template-columns: 90px 1fr;
      border-bottom: 1px solid #d7d0c4;
      padding-bottom: 12px;
   }

   .popup-burger .txt-info dl+dl {
      padding-top: 12px;
   }

   .popup-burger .txt-info dl dd a {
      border-bottom: 1px solid;
   }

   .popup-burger .txt-info dl dd a:hover {
      border-color: transparent;
   }

   .popup-burger .photos {
      width: 64.8vw;
      margin: 0 auto;
      padding-top: 10vw;
   }

   .popup-burger .photos figure:last-child {
      padding-top: 4vw;
   }
}

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

   #sec4 .ushi {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 46px;
      padding: 100px 20px 107px;
   }

   #sec4 .ushi:before {
      content: '';
      width: 380px;
      height: 532px;
      background: url("../img/index/sec4-deco-1.png") no-repeat center top/cover;
      position: absolute;
      top: 215px;
      right: -50px;
   }

   #sec4 .ushi .logo {
      width: 280px;
      margin: 0 auto;
   }

   #sec4 .ushi .txt {
      width: calc(100% - 450px);
      position: relative;
   }

   #sec4 .ushi .button {
      padding-top: 50px;
   }

   #sec4 .ushi .button a {
      background-image: url("../img/index/sec4-ushi-btn-bg.png");
      height: 67px;
   }

   #sec4 .ushi .button a:hover {
      background-image: url("../img/index/sec4-ushi-btn-bg_on.png"), url("../img/index/sec4-ushi-btn-bg.png");
   }

   #sec4 .ushi .photos {
      display: flex;
      justify-content: center;
      gap: 28px;
      width: 100%;
      box-sizing: border-box;
   }

   #sec4 .burger {
      display: flex;
      justify-content: center;
      gap: 54px;
      margin-top: 30px;
      padding: 113px 20px 80px;
   }

   #sec4 .burger:before {
      content: '';
      width: 340px;
      height: 512px;
      background: url("../img/index/sec4-deco-2.png") no-repeat center top/cover;
      position: absolute;
      top: -45px;
      left: -50px;
   }

   #sec4 .burger figure {
      width: calc(100% - 605px);
   }

   #sec4 .burger .col {
      width: 550px;
      position: relative;
   }

   #sec4 .burger .logo {
      width: 280px;
      margin: 0 auto;
   }

   #sec4 .burger .txt {
      padding-top: 44px;
   }

   #sec4 .burger .button {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      padding-top: 38px;
   }

   #sec4 .burger .button a {
      background-image: url("../img/index/sec4-burger-btn-bg.png");
      width: 100%;
      height: 67px;
   }

   #sec4 .burger .button a:hover {
      background-image: url("../img/index/sec4-burger-btn-bg_on.png"), url("../img/index/sec4-burger-btn-bg.png");
   }

   .popup-burger .head {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 60px;
   }

   .popup-burger .logo {
      width: 280px;
   }

   .popup-burger .tel {
      width: 370px;
      font-size: 16px;
   }

   .popup-burger .tel small {
      display: inline-block;
      font-size: 14px;
      line-height: 17px;
   }

   .popup-burger .txt-info {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      text-align: left;
      line-height: 26px;
      padding-top: 60px;
   }

   .popup-burger .txt-info dl {
      display: grid;
      grid-template-columns: 135px 1fr;
      border-bottom: 1px solid #d7d0c4;
      padding-bottom: 12px;
   }

   .popup-burger .txt-info dl+dl {
      padding-top: 12px;
   }

   .popup-burger .txt-info dl dd a {
      border-bottom: 1px solid;
   }

   .popup-burger .txt-info dl dd a:hover {
      border-color: transparent;
   }

   .popup-burger .photos {
      display: flex;
      justify-content: center;
      gap: 40px;
      padding-top: 60px;
   }
}

@media only screen and (min-width: 1271px) {
   #sec4 .ushi {
      gap: 46px 75px;
   }

   #sec4 .ushi .txt {
      width: 585px;
   }

   #sec4 .burger figure {
      width: 520px;
   }
}

@media only screen and (min-width: 1401px) {
   #sec4 .ushi .photos {
      padding: 0 60px;
   }
}

#sec5 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec5 {
      background: url("../img/index/sec5-bg_sp.jpg") no-repeat center top/cover;
      padding: 17vw 0;
   }

   #sec5 .wrap {
      padding: 0 2.6vw;
   }

   #sec5 h2 {
      width: max-content;
      color: #2f1c07;
      font-weight: 600;
      font-size: 8vw;
      letter-spacing: 0;
      line-height: 1;
      background: url("../img/index/sec5-icon.png") no-repeat center left/8.9vw auto;
      margin: 0 auto;
      padding-left: 11vw;
   }

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

@media only screen and (min-width: 768px) {
   #sec5 {
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      padding: 102px 0 150px;
   }

   #sec5:before {
      content: '';
      width: 100%;
      background: url("../img/index/sec5-bg.png") no-repeat center top/cover;
      position: absolute;
      top: -222px;
      bottom: 0;
      left: 0;
   }

   #sec5 h2 {
      color: #2f1c07;
      font-weight: 600;
      font-size: 45px;
      letter-spacing: 0;
      line-height: 45px;
      background: url("../img/index/sec5-icon.png") no-repeat center left/51px auto;
      padding-left: 70px;
   }

   #sec5 figure {
      margin-right: -1px;
      padding-top: 62px;
   }
}