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

@media only screen and (max-width: 767px) {
   #key {
      background-position: center left 40%;
   }

   .txt br {
      display: none;
   }
}

@media only screen and (min-width: 768px) {
   .header-child .box .logo {
      padding: 22px 0 98px;
   }

   .header-child .box .logo a {
      background-color: transparent;
      width: 350px;
      height: auto;
   }
}

#sec1 {
   position: relative;
}

.line-gr {
   position: relative;
}

.line-gr>* {
   background-color: #000;
   -webkit-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: 1s;
   transition-duration: 1s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
}

.line-gr .line-1,
.line-gr .line-3 {
   -webkit-transform: scaleY(0);
   transform: scaleY(0);
   -webkit-transform-origin: 50% 0;
   transform-origin: 50% 0;
}

.line-gr .line-2 {
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transform-origin: 0 50%;
   transform-origin: 0 50%;
}

.line-gr .line-1 {
   transition-delay: 0s;
}

.line-gr .line-2 {
   transition-delay: 1s;
}

.line-gr .line-3 {
   transition-delay: 2s;
}

.line-gr[style*="visible"] .line-1,
.line-gr[style*="visible"] .line-3 {
   -webkit-transform: scaleY(1);
   transform: scaleY(1);
}

.line-gr[style*="visible"] .line-2 {
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
}

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

   #sec1 h2 {
      width: 18vw;
      height: 65vw;
      font-weight: 400;
      font-size: 9.6vw;
      letter-spacing: 0.22em;
      line-height: 18vw;
      margin: 0 auto;
   }

   #sec1 h2 strong {
      font-size: 14vw;
   }

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

   .line-gr .line-1 {
      width: 1px;
      height: 100vw;
      position: absolute;
      bottom: -24vw;
      left: 0;
   }

   .line-gr .line-2 {
      height: 1px;
      position: absolute;
      top: 16vw;
      right: -4.4vw;
      left: -4.4vw;
   }

   .line-gr .line-3 {
      width: 1px;
      height: 100vw;
      position: absolute;
      top: 0;
      right: 0;
   }
}

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

   #sec1 h2 {
      width: 100px;
      height: 300px;
      font-weight: 400;
      font-size: 50px;
      line-height: 100px;
      letter-spacing: 0.22em;
      position: relative;
   }

   #sec1 h2 strong {
      font-size: 72px;
      letter-spacing: 0.22em;
   }

   #sec1 .txt {
      width: 380px;
      padding-top: 50px;
      padding-left: 100px;
   }

   #sec1 .txt p+p {
      padding-top: 15px;
   }

   #sec1 figure {
      width: 794px;
      position: absolute;
      top: -10px;
      right: -320px;
   }

   .line-gr .line-1 {
      width: 1px;
      height: 774px;
      position: absolute;
      bottom: -280px;
      left: calc(50% - 460px);
   }

   .line-gr .line-2 {
      height: 1px;
      position: absolute;
      top: 178px;
      right: 0;
      left: 50px;
   }

   .line-gr .line-3 {
      width: 1px;
      height: 800px;
      position: absolute;
      top: 80px;
      left: calc(50% + 460px);
   }
}

@media only screen and (min-width: 1301px) {
   #sec1 h2 {
      left: -100px;
   }

   #sec1 .txt {
      padding-left: 0;
   }

   #sec1 figure {
      right: -250px;
   }

   .line-gr .line-1 {
      left: calc(50% - 552px);
   }

   .line-gr .line-2 {
      left: 100px;
   }

   .line-gr .line-3 {
      left: calc(50% + 585px);
   }
}

#sec2 {
   position: relative;
}

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

   #sec2 h2 {
      width: 18vw;
      height: 60vw;
      font-weight: 700;
      font-size: 14vw;
      letter-spacing: 0.22em;
      line-height: 18vw;
      margin: 0 auto;
   }

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

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

@media only screen and (min-width: 768px) {
   #sec2 h2 {
      width: 100px;
      height: 265px;
      font-weight: 600;
      font-size: 72px;
      letter-spacing: 0.22em;
      line-height: 100px;
      margin-left: auto;
      padding: 102px 0 192px;
      position: relative;
      left: -70px;
   }

   #sec2 .photo-1 {
      width: 1000px;
      position: absolute;
      top: 0;
      left: -200px;
   }

   #sec2 .photo-2 {
      width: 698px;
      position: absolute;
      bottom: 0;
      right: -200px;
   }

   #sec2 .txt {
      width: 456px;
      height: 283px;
      position: relative;
      padding-bottom: 57px;
   }
}

@media only screen and (min-width: 1301px) {
   #sec2 h2 {
      left: 50px;
   }

   #sec2 .txt {
      left: -42px;
   }
}

#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3:before {
      content: '';
      width: 50%;
      height: 100%;
      background: #bcbcbc;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec3 .wrap {
      padding: 0;
   }

   #sec3 h2 {
      width: 18vw;
      height: 100vw;
      font-weight: 600;
      font-size: 14vw;
      line-height: 18vw;
      letter-spacing: 0.22em;
      text-align: center;
      margin: 0 auto;
      position: relative;
   }

   #sec3 h2 span {
      display: block;
      width: 100%;
      position: absolute;
      top: 6.6vw;
      bottom: 0;
      left: 0;
   }

   #sec3 h2 .white {
      left: 0;
      color: #fff;
   }

   #sec3 h2 .black {
      width: 50%;
      overflow: hidden;
      left: 50%;
   }

   #sec3 .box figure {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vw;
      position: relative;
   }

   #sec3 .box figure img {
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec3 .box figcaption {
      color: #fff;
      position: relative;
      padding: 6.6vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3:before {
      content: '';
      width: 50%;
      height: 100%;
      background: #bcbcbc;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec3 .wrap {
      width: 100%;
   }

   #sec3 h2 {
      width: 100px;
      height: 722px;
      font-weight: 600;
      font-size: 72px;
      line-height: 100px;
      letter-spacing: 0.22em;
      text-align: center;
      margin: 0 auto;
      position: relative;
   }

   #sec3 h2 span {
      display: block;
      width: 100%;
      position: absolute;
      top: 50px;
      bottom: 0;
      left: 0;
   }

   #sec3 h2 .white {
      left: 0;
      color: #fff;
   }

   #sec3 h2 .black {
      width: 50%;
      overflow: hidden;
      left: 50%;
   }

   #sec3 .box {
      display: flex;
   }

   #sec3 .box figure {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 650px;
      position: relative;
   }

   #sec3 .box figure img {
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec3 .box figcaption {
      max-width: 350px;
      color: #fff;
      position: relative;
   }
}

#sec4 {
   position: relative;
}

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

   #sec4 h2 {
      font-weight: 600;
      font-size: 6vw;
      line-height: 2;
      letter-spacing: 0.22em;
   }

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

   #sec4 .txt {
      text-align: justify;
   }

   #sec4 .photo-1 {
      width: 70vw;
      margin: 0 auto;
      padding-bottom: 12vw;
   }

   #sec4 .photo-2 {
      width: 50vw;
      padding-top: 12vw;
      position: relative;
      left: -6.6vw;
   }

   #sec4 .photo-3 {
      width: 70vw;
      margin-left: auto;
      padding-top: 12vw;
      position: relative;
      left: 6.6vw;
   }
}

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

   #sec4 .wrap {
      padding-bottom: 80px;
   }

   #sec4 h2 {
      font-weight: 600;
      font-size: 40px;
      line-height: 70px;
      letter-spacing: 0.22em;
      padding-top: 74px;
   }

   #sec4 .txt {
      font-weight: 500;
      padding-top: 45px;
   }

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

   #sec4 .photo-1 {
      width: 243px;
      position: absolute;
      top: 0;
      right: -250px;
   }

   #sec4 .photo-2 {
      width: 377px;
      position: absolute;
      top: 186px;
      left: -250px;
   }

   #sec4 .photo-3 {
      width: 450px;
      position: absolute;
      bottom: 0;
      right: -180px;
   }
}