.txt {
   text-align: justify;
}

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

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

.key-parallax .slide-item1 {
   background: url("../img/concept/key-img1.jpg") no-repeat center top/cover;
}

.key-parallax .slide-item2 {
   background: url("../img/concept/key-img2.jpg") no-repeat center top/cover;
}

.key-parallax .slide-item3 {
   background: url("../img/concept/key-img3.jpg") no-repeat center top/cover;
}

#lead {
   position: relative;
}

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

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

@media only screen and (min-width: 768px) {
   #lead {
      background: transparent;
      padding: 240px 0 235px;
   }

   #lead .wrap {
      display: flex;
      justify-content: flex-end;
      gap: 60px;
      padding-right: 50px;
   }

   #lead .txt {
      width: 670px;
      padding-top: 38px;
   }
}

#sec1 {
   position: relative;
}

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

   #sec1:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/index/sec1-top-bg.png") no-repeat center top/200% auto;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec1 h2 {
      font-size: 5.3vw;
   }

   #sec1 figure {
      width: 50.8vw;
      margin: 0 auto;
      margin-top: 12vw;
   }

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

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

   #sec1 figure {
      width: 406px;
      margin: 43px auto 0;
   }

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

#sec2 {
   position: relative;
}

#sec2 .slick-slider,
#sec2 .slick-list,
#sec2 .slick-track,
#sec2 .slick-slide {
   width: 100%;
   height: 100%;
}

#sec2 .slick-slider {
   position: absolute;
   top: 0;
   left: 0;
}

#sec2 .slide-item1 {
   background: url("../img/concept/sec2-photo1.jpg") no-repeat center top/cover;
}

#sec2 .slide-item2 {
   background: url("../img/concept/sec2-photo2.jpg") no-repeat center top/cover;
}

#sec2 .slide-item3 {
   background: url("../img/concept/sec2-photo3.jpg") no-repeat center top/cover;
}

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

   #sec2 .slide-item3 {
      background-position: center left 70%;
   }

   #sec2 h2 {
      background: url("../img/concept/sec2-deco.png") no-repeat bottom left/auto 90%;
      width: 35vw;
   }

   #sec2 h2 span {
      display: block;
      font-size: 5vw;
      letter-spacing: 0.3em;
      text-align: right;
      padding-top: 4vw;
   }

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

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

   #sec2 .slick-dots {
      position: absolute;
      bottom: 6vw;
      left: 14vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 .slick-dots {
      position: absolute;
      bottom: 52px;
      left: 87px;
   }

   #sec2 .wrap {
      width: 100%;
      padding: 112px 90px 127px;
   }

   #sec2 .col {
      width: 421px;
   }

   #sec2 h2 {
      background: url("../img/concept/sec2-deco.png") no-repeat bottom left;
      width: 160px;
      padding: 0 0 10px 30px;
   }

   #sec2 h2 span {
      display: block;
      font-size: 22px;
      letter-spacing: 0.3em;
      text-align: right;
      padding-top: 30px;
   }

   #sec2 .txt {
      padding-top: 57px;
   }

   #sec2 .button {
      padding-top: 57px;
   }
}

#sec3 {
   position: relative;
}

#sec3 .slick-slider,
#sec3 .slick-list,
#sec3 .slick-track,
#sec3 .slick-slide {
   width: 100%;
   height: 100%;
}

#sec3 .slick-slider {
   position: absolute;
   top: 0;
   left: 0;
}

#sec3 .slide-item1 {
   background: url("../img/concept/sec3-photo1.jpg") no-repeat center top/cover;
}

#sec3 .slide-item2 {
   background: url("../img/concept/sec3-photo2.jpg") no-repeat center top/cover;
}

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

   #sec3 .slide-item2 {
      background-position: center left 27%;
   }

   #sec3 h2 {
      background: url("../img/concept/sec2-deco.png") no-repeat bottom left/auto 90%;
      width: 35vw;
   }

   #sec3 h2 span {
      display: block;
      font-size: 5vw;
      letter-spacing: 0.3em;
      text-align: right;
      padding-top: 4vw;
   }

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

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

   #sec3 .slick-dots {
      position: absolute;
      bottom: 6vw;
      left: 14vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 .slick-dots {
      position: absolute;
      bottom: 50px;
      right: 60px;
   }

   #sec3 .wrap {
      width: 100%;
      padding: 174px 65px 165px;
   }

   #sec3 .col {
      width: 305px;
      margin-left: auto;
   }

   #sec3 h2 {
      background: url("../img/concept/sec2-deco.png") no-repeat bottom left 33px;
      width: 216px;
      margin-left: auto;
      padding: 0 37px 10px 30px;
   }

   #sec3 h2 span {
      display: block;
      font-size: 22px;
      letter-spacing: 0.3em;
      text-align: right;
      padding-top: 30px;
   }

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

#sec4 {
   position: relative;
}

#sec4 .hover-img {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

#sec4 .hover-img figure {
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 0.3s;
   position: absolute;
   top: 0;
   left: 0;
}

#sec4 .hover-img figure.is-active {
   opacity: 1;
}

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

   #sec4:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/concept/sec4-deco.png") no-repeat center top/100% auto;
      position: absolute;
      top: 0;
      left: 0;
   }

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

   #sec4 .box .col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 72vw;
      position: relative;
   }

   #sec4 .box .col+.col {
      margin-top: 16vw;
   }

   #sec4 .box .col:after {
      content: '';
      width: 12vw;
      height: 12vw;
      background: url("../img/concept/sec4-icon.png") no-repeat center top/cover;
      position: absolute;
      bottom: -6vw;
      left: 50%;
      transform: translateX(-50%);
   }

   #sec4 .box figure {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec4 .box figure:after {
      content: '';
      border: 1px solid #fff;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }

   #sec4 .box .no {
      width: 12vw;
      border-bottom: 1px solid;
      position: relative;
      z-index: 1;
      margin: 0 auto;
      padding-bottom: 0;
      color: #afafaf;
   }

   #sec4 .box h3 {
      position: relative;
      z-index: 1;
      padding-top: 8vw;
   }

   .modal-container .modal .no {
      display: flex;
      align-items: center;
      line-height: 1;
      letter-spacing: 0.3em;
      padding-bottom: 8vw;
   }

   .modal-container .modal .no dt {
      color: #afafaf;
      border-right: 1px solid;
      padding-right: 3vw;
   }

   .modal-container .modal .no dd {
      padding-left: 4vw;
   }

   .modal-container .modal h3 {
      text-align: left;
   }

   .modal-container .modal .modal-item1 .photo1 {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item1 .box {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item1 .box .photo figure:nth-child(1) {
      width: 80%;
      margin-left: auto;
   }

   .modal-container .modal .modal-item1 .box .photo figure:nth-child(2) {
      width: 80%;
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item1 .box .col {
      padding-top: 8vw;
   }

   .modal-container .modal .modal-item1 .box .txt {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item2 .photo1 {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item2 h3 {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item2 .photo2 {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item2 .txt {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item3 h2 {
      text-align: center;
   }

   .modal-container .modal .modal-item3 .photo1 {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item3 .box {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item3 .box .photo {
      display: flex;
      gap: 6vw;
   }

   .modal-container .modal .modal-item3 .box .photo figure:nth-child(1) {
      padding-top: 12vw;
   }

   .modal-container .modal .modal-item3 .box .col {
      padding-top: 6vw;
   }

   .modal-container .modal .modal-item3 .box .txt {
      padding-top: 6vw;
   }
}

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

   #sec4:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/concept/sec4-deco.png") no-repeat center top;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec4 .box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
      padding-top: 94px;
   }

   #sec4 .box .col {
      position: relative;
      padding: 83px 0 141px;
      cursor: pointer;
   }

   #sec4 .box .col:after {
      content: '';
      width: 72px;
      height: 72px;
      background: url("../img/concept/sec4-icon.png") no-repeat center top/cover;
      position: absolute;
      bottom: -36px;
      left: 50%;
      transform: translateX(-50%);
   }

   #sec4 .box figure {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec4 .box figure:after {
      content: '';
      border: 1px solid #fff;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }

   #sec4 .box .no {
      width: 50px;
      border-bottom: 1px solid;
      position: relative;
      z-index: 1;
      margin: 0 auto;
      padding-bottom: 0;
      color: #afafaf;
      line-height: 42px;
   }

   #sec4 .box h3 {
      position: relative;
      z-index: 1;
      padding-top: 50px;
   }

   .modal-container .modal .no {
      display: flex;
      align-items: center;
      line-height: 27px;
      letter-spacing: 0.3em;
      padding-bottom: 60px;
   }

   .modal-container .modal .no dt {
      color: #afafaf;
      border-right: 1px solid;
      padding-right: 20px;
   }

   .modal-container .modal .no dd {
      padding-left: 20px;
   }

   .modal-container .modal h3 {
      text-align: left;
      line-height: 50px;
   }

   .modal-container .modal .modal-item1 h2 {
      width: 120px;
      height: 380px;
      padding: 15px 0 0 180px;
   }

   .modal-container .modal .modal-item1 .photo1 {
      width: 521px;
      position: absolute;
      top: 140px;
      right: 50px;
   }

   .modal-container .modal .modal-item1 .box {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 60px;
      padding-top: 60px;
   }

   .modal-container .modal .modal-item1 .box .photo {
      width: 465px;
   }

   .modal-container .modal .modal-item1 .box .photo figure:nth-child(1) {
      padding-left: 60px;
   }

   .modal-container .modal .modal-item1 .box .photo figure:nth-child(2) {
      padding-top: 20px;
   }

   .modal-container .modal .modal-item1 .box .col {
      width: 326px;
   }

   .modal-container .modal .modal-item1 .box .txt {
      padding-top: 50px;
   }

   .modal-container .modal .modal-item2 h2 {
      width: 120px;
      height: 390px;
      margin-left: auto;
      padding: 15px 150px 0 0;
   }

   .modal-container .modal .modal-item2 .photo1 {
      width: 575px;
      position: absolute;
      top: 140px;
      left: 50px;
   }

   .modal-container .modal .modal-item2 .box {
      margin: 40px 55px 0 80px;
      position: relative;
   }

   .modal-container .modal .modal-item2 h3 {
      width: 100px;
      height: 234px;
      padding: 55px 119px 0;
   }

   .modal-container .modal .modal-item2 .photo2 {
      width: 510px;
      position: absolute;
      top: 0;
      right: 0;
   }

   .modal-container .modal .modal-item2 .photo3 {
      width: 353px;
      position: absolute;
      bottom: 0;
      left: 0;
   }

   .modal-container .modal .modal-item2 .txt {
      width: 360px;
      margin-left: auto;
      padding: 60px 50px 0 0;
   }

   .modal-container .modal .modal-item3 h2 {
      text-align: center;
   }

   .modal-container .modal .modal-item3 .photo1 {
      text-align: center;
      padding-top: 50px;
   }

   .modal-container .modal .modal-item3 .box {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 80px;
      padding-top: 50px;
   }

   .modal-container .modal .modal-item3 .box .photo {
      display: flex;
      justify-content: space-between;
      width: 465px;
   }

   .modal-container .modal .modal-item3 .box .photo figure:nth-child(1) {
      padding-top: 50px;
   }

   .modal-container .modal .modal-item3 .box .col {
      width: 405px;
   }

   .modal-container .modal .modal-item3 .box .txt {
      padding-top: 40px;
   }
}

#sec5 {
   position: relative;
}

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

   #sec5:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/concept/sec5-bg-img.jpg") no-repeat top left/200% auto;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec5 h2 small {
      display: block;
      font-size: 4.8vw;
      letter-spacing: 0.3em;
   }

   #sec5 h2 span {
      display: inline-block;
      vertical-align: baseline;
      font-size: 3vw;
      letter-spacing: 0.1em;
      margin-left: 1vw;
   }

   #sec5 .txt {
      letter-spacing: 0.12em;
      padding-top: 40px;
   }
}

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

   #sec5 .col {
      width: 430px;
      margin-left: auto;
   }

   #sec5 h2 {
      line-height: 44px;
   }

   #sec5 h2 small {
      display: block;
      font-size: 18px;
      letter-spacing: 0.3em;
   }

   #sec5 h2 span {
      display: inline-block;
      vertical-align: baseline;
      font-size: 14px;
      letter-spacing: 0.3em;
      margin-left: 18px;
   }

   #sec5 .txt {
      letter-spacing: 0.12em;
      padding-top: 40px;
   }
}

#sec6 {
   background: #000;
   position: relative;
}

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

   #sec6:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/concept/sec6-deco.jpg") no-repeat center top/150% auto, url("../img/concept/sec6-bg-img.jpg") no-repeat center bottom/100% auto;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec6 h2 {
      width: 25.6vw;
      height: 75vw;
      margin: 0 auto;
   }

   #sec6 .photo {
      margin: 0 -7vw;
   }

   #sec6 .photo figure {
      position: relative;
   }

   #sec6 .photo figure:nth-child(1) {
      width: 70%;
      margin-top: 12vw;
   }

   #sec6 .photo figure:nth-child(1):after {
      content: '';
      width: 100%;
      height: 100%;
      border: 1px solid #fff;
      position: absolute;
      bottom: 6vw;
      left: 6vw;
      box-sizing: border-box;
   }

   #sec6 .photo figure:nth-child(2) {
      width: 70%;
      margin-top: 6vw;
      margin-left: auto;
   }

   #sec6 .photo figure:nth-child(2):before {
      content: '';
      width: 100%;
      height: 100%;
      border: 1px solid #fff;
      position: absolute;
      top: 6vw;
      left: 6vw;
      box-sizing: border-box;
   }

   #sec6 .photo figure:nth-child(3) {
      width: 70%;
      margin: 16vw auto 0;
   }

   #sec6 .photo figure:nth-child(3):before {
      content: '';
      width: 100%;
      height: 100%;
      border: 1px solid #fff;
      position: absolute;
      right: 6vw;
      bottom: 6vw;
      box-sizing: border-box;
   }

   #sec6 .button {
      padding-top: 4vw;
   }

   #sec6 .button li {
      padding-top: 4vw;
   }

   #sec6 .button a {
      font-size: 3.6vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec6 {
      padding: 212px 0 487px;
   }

   #sec6:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/concept/sec6-deco.jpg") no-repeat center top/100% auto, url("../img/concept/sec6-bg-img.jpg") no-repeat center bottom/100% auto;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec6 h2 {
      width: 160px;
      height: 360px;
      line-height: 80px;
      padding: 160px 0 0 130px;
   }

   #sec6 .photo figure {
      position: absolute;
   }

   #sec6 .photo figure:nth-child(1) {
      width: 514px;
      top: 67px;
      right: 70px;
   }

   #sec6 .photo figure:nth-child(1):after {
      content: '';
      width: 583px;
      height: 379px;
      border: 1px solid #fff;
      position: absolute;
      top: -67px;
      left: 30px;
      box-sizing: border-box;
   }

   #sec6 .photo figure:nth-child(2) {
      width: 529px;
      top: 472px;
      right: -105px;
   }

   #sec6 .photo figure:nth-child(2):before {
      content: '';
      width: 376px;
      height: 312px;
      border: 1px solid #fff;
      position: absolute;
      top: 120px;
      left: 220px;
      box-sizing: border-box;
   }

   #sec6 .photo figure:nth-child(3) {
      width: 399px;
      top: 700px;
      left: -30px;
   }

   #sec6 .photo figure:nth-child(3):before {
      content: '';
      width: 438px;
      height: 614px;
      border: 1px solid #fff;
      position: absolute;
      top: -40px;
      left: -73px;
      box-sizing: border-box;
   }

   #sec6 .button {
      padding-top: 560px;
   }

   #sec6 .button li+li {
      padding-top: 22px;
   }

   #sec6 .button a {
      max-width: 500px;
      margin-left: auto;
   }
}