@media only screen and (max-width: 767px) {
   main:before {
      content: '';
      width: 100%;
      height: 100vw;
      background-image: linear-gradient(to bottom, rgba(4, 3, 3, 0.8), transparent);
      position: absolute;
      top: 0;
      left: 0;
   }

   .txt br {
      display: none;
   }
}

@media only screen and (min-width: 768px) {
   main:before {
      content: '';
      width: 100%;
      height: 1920px;
      background-image: linear-gradient(to bottom, rgba(4, 3, 3, 0.8), transparent);
      position: absolute;
      top: 0;
      left: 0;
   }
}

#sec1 {
   position: relative;
}

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

   #sec1 h2 {
      height: 110vw;
      margin: 0 auto;
      line-height: 2;
      margin-top: 60px;
   }

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

   #sec1 .photo-2 {
      width: 60vw;
      margin-left: auto;
   }

   #sec1 .photo-3 {
      width: 80vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 h2 {
      width: 240px;
      height: 600px;
      margin-left: auto;
      padding: 113px 124px 0 0;
   }

   #sec1 .photo-1 {
      width: 750px;
      position: absolute;
      top: 100px;
      left: -250px;
   }

   #sec1 .photo-2 {
      width: 447px;
      position: absolute;
      top: 600px;
      right: -250px;
   }

   #sec1 .photo-3 {
      width: 650px;
      padding-top: 67px;
      margin-left: -10px;
   }
}

#sec2 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec2 .txt {
      padding-top: 6vw;
   }
}

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

   #sec2 .txt {
      max-width: 797px;
      margin: 0 auto;
      padding-top: 20px;
   }
}

#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 h2 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50vh;
      font-size: 6.4vw;
      position: sticky;
      top: 0;
      z-index: 1;
   }

   #sec3 figure {
      height: 50vh;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 h2 {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 45vw;
      position: sticky;
      top: 130px;
      z-index: 1;
      transition: transform .2s linear;
      transform-origin: center center;
   }

   #sec3 figure {
      width: 100%;
   }
}

#sec4,
#sec5,
#sec6,
#sec7 {
   position: relative;
}

@media only screen and (max-width: 767px) {

   #sec4,
   #sec5,
   #sec6,
   #sec7 {
      padding-bottom: 15vw;
   }

   #sec4 .box,
   #sec5 .box,
   #sec6 .box,
   #sec7 .box {
      position: relative;
   }

   #sec4 h2,
   #sec5 h2,
   #sec6 h2,
   #sec7 h2 {
      text-align: center;
      position: absolute;
      top: 33vw;
      right: 0;
      left: 0;
      z-index: 1;
   }

   #sec4 figure,
   #sec5 figure,
   #sec6 figure,
   #sec7 figure {
      height: 70vw;
   }

   #sec4 h3,
   #sec5 h3,
   #sec6 h3,
   #sec7 h3 {
      font-weight: 400;
      font-size: 5vw;
      line-height: 2;
      letter-spacing: 0.08em;
      text-align: center;
      padding-top: 8vw;
   }

   #sec4 .txt,
   #sec5 .txt,
   #sec6 .txt,
   #sec7 .txt {
      padding: 6vw 4vw 0;
   }

   #sec4 {
      padding-top: 15vw;
   }
}

@media only screen and (min-width: 768px) {

   #sec4,
   #sec5,
   #sec6,
   #sec7 {
      display: flex;
      align-items: center;
      height: 850px;
   }

   #sec4:before,
   #sec5:before,
   #sec6:before,
   #sec7:before {
      content: '';
      width: 62%;
      height: 100%;
      background-image: linear-gradient(to right, #000, transparent);
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.8;
   }

   #sec4 .box,
   #sec5 .box,
   #sec6 .box,
   #sec7 .box {
      width: 452px;
      position: relative;
      padding: 0 50px;
   }

   #sec4 h2,
   #sec5 h2,
   #sec6 h2,
   #sec7 h2 {
      text-align: center;
   }

   #sec4 h2 span,
   #sec5 h2 span,
   #sec6 h2 span,
   #sec7 h2 span {
      display: inline-block;
      font-size: 24px;
      line-height: 40px;
      letter-spacing: 0.08em;
      padding-bottom: 28px;
   }

   #sec4 .txt,
   #sec5 .txt,
   #sec6 .txt,
   #sec7 .txt {
      padding-top: 28px;
   }

   #sec4 {
      background: url("../img/concept/sec4-bg-img.jpg") no-repeat center top/cover;
   }

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

   #sec6 {
      background: url("../img/concept/sec6-bg-img.jpg") no-repeat center top/cover;
   }

   #sec7 {
      background: url("../img/concept/sec7-bg-img.jpg") no-repeat center top/cover;
   }
}

#sec8 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec8 {
      background: url("../img/concept/sec8-bg-img.jpg") no-repeat top right/100% auto;
      padding: 15vw 0;
   }

   #sec8:before {
      content: '';
      width: 100%;
      background-color: #21201f;
      position: absolute;
      top: 0;
      bottom: 30vw;
      left: 0;
      z-index: -1;
   }

   #sec8 h2 {
      width: 14vw;
      height: 70vw;
      margin: 0 auto;
   }

   #sec8 .box-1 {
      padding-bottom: 12vw;
   }

   #sec8 .box-1 h3 {
      font-size: 5.3vw;
      padding-top: 8vw;
   }

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

   #sec8 .box-2 {
      padding-bottom: 12vw;
   }

   #sec8 .box-2 .txt {
      padding-top: 6vw;
   }
      #sec8 .box-2 h3 {
      font-size: 5.3vw;
      padding-top: 8vw;
   }

   #sec8 .box-2 .photo-2 {
      width: 70vw;
      margin: 0 auto;
      padding-top: 8vw;
   }

   #sec8 .box-2 .photo-3 {
      padding-top: 8vw;
   }

   #sec8 .bnr {
      display: grid;
      gap: 4vw;
      padding: 0 4vw;
   }

   #sec8 .bnr a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 60vw;
      font-weight: 400;
      font-size: 6.4vw;
      line-height: 1.5;
      letter-spacing: 0.05em;
      padding-top: 6vw;
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      text-align: center;
      padding-bottom: 6vw;
   }

   #sec8 .bnr a:after{
      content: '詳しくはこちら';
      background: url('../img/shared/btn-arrow.png') no-repeat center right / auto 7px;
      display: block;
      width: max-content;
      font-size: 4vw;
      line-height: 1;
      margin: 5vw auto 0;
      padding-right: 20px;
   }

   #sec8 .bnr a img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
   }

   #sec8 .bnr a span {
      display: block;
      font-weight: 700;
      font-size: 3vw;
      letter-spacing: 0.15em;
      line-height: 1;
      padding-bottom: 6vw;
   }

   #sec8 .bnr a span:before {
      content: '';
      display: block;
      width: 0;
      height: 4vw;
      border-left: 1px solid #fff;
      margin: 0 auto 2vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec8 {
      background: url("../img/concept/sec8-bg-img.jpg") no-repeat top right;
      padding-bottom: 130px;
   }

   #sec8:before {
      content: '';
      width: 100%;
      background-color: #21201f;
      position: absolute;
      top: 0;
      bottom: 340px;
      left: 0;
      z-index: -1;
   }

   #sec8 h2 {
      width: 80px;
      height: 400px;
      margin: 0 auto;
      padding: 140px 0 43px;
   }

   #sec8 h2 span {
      font-size: 44px;
   }

   #sec8 .box-1 {
      position: relative;
      padding: 240px 0 76px;
   }

   #sec8 .box-1 figure {
      width: 949px;
      position: absolute;
      top: 0;
      right: -250px;
   }

   #sec8 .box-1 h3 {
      letter-spacing: 0.08em;
      line-height: 60px;
      position: relative;
   }

      #sec8 .box-2 h3 {
      letter-spacing: 0.08em;
      line-height: 60px;
      position: relative;
      margin-left: 710px;
      margin-bottom: -39px;
   }

   #sec8 .box-1 .txt {
      width: 550px;
      position: relative;
      padding-top: 30px;
   }

   #sec8 .box-2 {
      position: relative;
      padding-bottom: 108px;
   }

   #sec8 .box-2 .txt {
      width: 342px;
      margin-left: auto;
      padding-top: 60px;
   }

   #sec8 .box-2 .photo-1 {
      width: 750px;
      position: absolute;
      top: 0;
      left: -195px;
   }

   #sec8 .box-2 .photo-2 {
      width: 400px;
      position: absolute;
      top: 262px;
      right: -155px;
   }

   #sec8 .box-2 .photo-3 {
      width: 800px;
      padding: 535px 0 0 64px;
   }

   #sec8 .bnr {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 35px;
      max-width: 1335px;
      margin: 0 auto;
   }

   #sec8 .bnr a {
      display: block;
      height: 420px;
      font-weight: 400;
      font-size: 36px;
      line-height: 40px;
      letter-spacing: 0.05em;
      position: relative;
      z-index: 1;
      text-align: center;
      padding-top: 95px;
      box-sizing: border-box;
   }

   #sec8 .bnr a:after{
      content: '詳しくはこちら';
      background: url('../img/shared/btn-arrow.png') no-repeat center right / auto 7px;
      display: block;
      width: max-content;
      font-size: 16px;
      margin: 20px auto 0;
      padding-right: 20px;
   }

   #sec8 .bnr a img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
   }

   #sec8 .bnr a span {
      display: block;
      font-weight: 700;
      font-size: 12px;
      line-height: 20px;
      padding-bottom: 40px;
   }

   #sec8 .bnr a span:before {
      content: '';
      width: 0;
      height: 30px;
      border-left: 1px solid #fff;
      display: block;
      margin: 0 auto 4px;
   }
}

@media only screen and (min-width: 1241px) {
   #sec8 .wrap {
      width: 1110px;
   }

   #sec8 .box-1 figure {
      right: -195px;
   }

   #sec8 .box-2 .txt {
      width: 394px;
   }

   #sec8 .box-2 .photo-1 {
      left: -145px;
   }

   #sec8 .box-2 .photo-2 {
      right: -105px;
   }

   #sec8 .box-2 .photo-3 {
      padding-left: 118px;
   }
}