#key {
  background-image: url("../img/concept/key.jpg");
}

#key .key-ttl {
    text-transform: uppercase;
    font-size: 5vw;
    line-height: 10vw;
    letter-spacing: 0.14em;
    position: absolute;
    left: 4%;
    top: 1vw;
    z-index: 1;
}

@media screen and (min-width: 768px) {
  #key .key-ttl {
    font-size: 52px;
    line-height: 60px;
    right: calc(50% - 508px);
    bottom: 75px;
      left: auto;
      top: auto;
  }
}
#sec1 {
  padding-top: 8vw;
  position: relative;
}

#sec1:before {
  content: "";
  height: 80vw;
  background-image: url("../img/concept/sec1_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
}

#sec1:after {
  content: "";
  width: 40%;
  height: 120vw;
  background: rgb(209 181 105 / 20%);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}

#sec1 h2 {
  white-space: nowrap;
    color: #fff;
}

#sec1 .s1-js .slick-slide {
  padding: 0 1.5vw;
}

#sec1 .s1-js .slide1 {
  margin-top: 7vw;
}

#sec1 .s1-js .slide3,
#sec1 .s1-js .slide5 {
  margin-top: 15vw;
}


@media screen and (max-width: 767px) {
    #sec1 h2{
            margin: 0 8% 14vw auto;
    }
#sec1 h2 .r2 {
  margin-top: 3.7em;
        position: relative;
}
  #sec1 h2 .r2:after {
          content: "";
        height: 40px;
    width: 1px;
    background: #fff;
    position: absolute;
    right: 16px;
    bottom: -47px;
  }
    #sec1 .txt {
    margin: 21vw 3% 10vw;
    text-align: justify;
    }
}

@media screen and (min-width: 768px) {
  #sec1 {
    padding-top: 146px;
  }
  #sec1:before {
    height: 902px;
  }
  #sec1:after {
    width: calc(50% - 275px);
    height: 1220px;
  }
    #sec1 .wrap{
        margin: 0 60px 100px auto;
    }
  #sec1 .col {
        width: 452px;
    margin: 0 0 0 auto;
  }
  #sec1 h2 {
      
  }
    #sec1 h2 .r2{
  margin-left: 4.2em;
        position: relative;
    }
  #sec1 h2 .r2:after {
          content: "";
    height: 1px;
    width: 149px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 19px;
  }
  #sec1 .txt {
    margin:44px 0 0;
  }
  #sec1 .s1-js .slick-slide {
    padding: 0 18px;
  }
  #sec1 .s1-js .slide1 {
    margin-top: 95px;
  }
  #sec1 .s1-js .slide3,
  #sec1 .s1-js .slide5 {
    margin-top: 133px;
  }
}

#sec2 {
  position: relative;
  padding: 30vw 0 25vw;
}

#sec2:before {
  content: "";
      width: 26%;
    background: rgb(209 181 105 / 20%);
    position: absolute;
    right: 0;
    top: -50vw;
  bottom: 0;
  z-index: -2;
}

#sec2 h2 {
  white-space: nowrap;
  position: relative;
}

#sec2 h2 .r2 {
  position: relative;
        margin-left: 6em;
}

#sec2 h2:before{
        height: 1px;
       width: 105%;
    position: absolute;
    content: "";
    background: #978767;
    bottom: -0.5em;
    left: -9%;
}


#sec2 .txt {
  padding: 0 3%;
}

#sec2 .row1 {
  margin: 15vw 0;
}

#sec2 .row1 .title h3 {
  margin-left: 6vw;
  order: 2;
        font-size: 8.6vw;
}

#sec2 .row1 .title .eng-ttl {
  order: 1;
}

#sec2 .row1 .title .eng-ttl span:before {
  left: -1.5vw;
}

#sec2 .row1 .img {
  margin: 6vw 0 5vw;
  position: relative;
}

#sec2 .row2 {
  position: relative;
}


#sec2 .row2 .title h3 {
  margin-right: 7vw;
        font-size: 8.6vw;
}

#sec2 .row2 .img {
  margin: 6vw 0 5vw;
  position: relative;
  z-index: 0;
}


@media screen and (min-width: 768px) {
  #sec2 {
    padding: 179px 0 96px;
  }
  #sec2:before {
    width: calc(50% - 350px);
    top: -106px;
    bottom: 284px;
  }
  #sec2 .txt {
    padding: 0;
  }
    
#sec2 h2:before{
    width: 842px;
    left: -8em;
}
  #sec2 .row1 {
    margin: 83px 0 0;
  }
  #sec2 .row1 .title {
    float: right;
    margin-right: 27px;
          margin-top: 38px;
  }
  #sec2 .row1 .title h3 {
    margin-left: 38px;
          font-size: 41px;
  }
  #sec2 .row1 .title .eng-ttl {
    padding-top: 4px;
  }
  #sec2 .row1 .title .eng-ttl span:before {
    left: -12px;
    top: -3px;
  }
  #sec2 .row1 .img {
    width: 680px;
    float: left;
    margin:0 0 0 -60px;
  }
  #sec2 .row1 .txt {
    height: 407px;
    float: right;
    margin: 7px 101px 0 0;
  }
  #sec2 .row2:before {
    width: 419px;
    height: 480px;
    top: 48px;
    left: 432px;
  }
  #sec2 .row2 .title {
    float: left;
    margin: 120px 0 0 0;
  }
  #sec2 .row2 .title h3 {
       margin-right: 32px;
          font-size: 41px;
  }
  #sec2 .row2 .title .eng-ttl {
    padding-top: 7px;
  }
  #sec2 .row2 .title .eng-ttl span {
    margin-right: 7px;
  }
  #sec2 .row2 .img {
        width: 680px;
    float: right;
    margin: 0 -35px 0 0;
  }
  #sec2 .row2 .txt {
        width: 300px;
    float: left;
    margin-top: 38px;
  }
}

#sec3 {
  position: relative;
  padding: 0 0 25vw;
}

#sec3 .row1{
    position: relative;
}
#sec3 h2 {
    margin: 0 auto;
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 18vw 0 7vw;
        font-size: 7vw;
}

#sec3 .img-grp {
  flex-wrap: wrap;
  margin: 0 -6%;
        position: relative;
    z-index: 2;
}

#sec3 .img-grp .img1 {
  width: 52%;
  position: relative;
  z-index: 1;
  margin: 7vw 0 0 0;
}

#sec3 .img-grp .img2 {
  width: 46%;
}

#sec3 .img-grp .img3 {
  width: 41%;
  margin: 4.3vw 0 0 5vw;
}

#sec3 .img-grp .img4 {
  width: 52%;
  margin: -9vw 0 0 0;
}

#sec3 ul {
  margin-top: 12vw;
}

#sec3 ul .btn-link {
  max-width: none;
  width: 280px;
  margin-bottom: 9vw;
  padding: 0;
}

#sec3 ul .btn-link a {
  width: 250px;
  margin: 0 auto;
  color: #222;
}

   #sec3 .txt span{
    display: block;
       text-align: right;
    }
@media screen and (max-width: 767px) {
#sec3 .row1:before {
    background: url(../img/shared/bg_b.jpg) repeat;
    position: absolute;
    content: "";
    left: 0;
    z-index: -1;
    right: 0;
    top: 0;
    height: 642px;
    width: 100%;
}
    #sec3 .txt {
    margin: 0 3% 7vw;
    color: #fff;
        text-align: justify;
}
    #sec3 ul .btn-link a {
    width: 100%;
    }
    #sec3 ul .btn-link {
    width: 90%;
    }
}

@media screen and (min-width: 768px) {
  #sec3 {
    padding: 100px 0 162px;
  }
    #sec3 .row1:before {
    content: "";
    width: 1px;
    background: #978767;
    position: absolute;
    transform: rotate(-53deg);
        z-index: 3;
       height: 1340px;
    top: -1037px;
    left: -200px;
}
  #sec3 h2 {
       margin: 0 0 0 auto;
    white-space: nowrap;
    position: relative;
    padding: 32px 47px 68px 0;
    font-size: 34px;
  }
#sec3 h2:before{
    background: url(../img/shared/bg_b.jpg) repeat;
    position: absolute;
    content: "";
    top: 0;
    z-index: -1;    
        right:-30px;
    top: -100px;
    height: 1272px;
    width: 900px;
}
    
  #sec3 .txt {
        width: 697px;
    margin: 77px 0px 0 auto;
  }
  #sec3 .img-grp {
    margin: 0 -250px 0 -152px;
  }
  #sec3 .img-grp .img1 {
    width: 759px;
    margin: 86px 0 0 0;
  }
  #sec3 .img-grp .img2 {
        width: 563px;
    margin-right: 30px;
  }
    #sec3 .img-grp .img2 img{
        width: 100%;
        height: auto;
    }
  #sec3 .img-grp .img3 {
    width: 516px;
    margin: 75px 0 0 145px;
  }
  #sec3 .img-grp .img4 {
    width: 602px;
    margin: -136px 88px 0 0;
  }
  #sec3 ul {
    margin: 102px 0 0 34px;
  }
  #sec3 ul .btn-link {
    margin: 0 auto;
    padding: 0;
    width: auto;
  }
  #sec3 ul .btn-link a {
       width: 330px;
  }
}

#sec4 {
  position: relative;
        background: url(../img/concept/sec4_bg.jpg) no-repeat center top / 182%, #23120b;
    background-position-x: -27vw;
}
#sec4:before {
    content: "";
    width: 1px;
        height: 292px;
    background: #978767;
    position: absolute;
    top: -195px;
    left: 293px;
    transform: rotate(45deg);
}
#sec4 h2 { 
    margin-bottom: 1.5em;
}

#sec4 .box .col {
  padding: 5vw 3% 21vw;
}
#sec4 .box .col .txt {
      padding: 17vw 3% 5vw;
}

#sec4 .box .btn-link {
        max-width: none;
    padding: 0;
    margin: 0 6%;
    width: auto;
}

@media screen and (max-width: 767px) {
    
#sec4 h2 { 
    position: absolute;
    right: 6%;
    top: 10%;
    }
#sec4 h3 { 
        margin: 10% 11% 0 auto;
    }
}

@media screen and (min-width: 768px) {
  #sec4 {
        margin: 0;
    padding: 180px 0;
  background: url("../img/concept/sec4_bg.jpg") no-repeat center center / cover;
  }
   #sec4:before {
        height: 812px;
    top: -500px;
    left: auto;
    right: 275px;
}
  #sec4 .box .col {
       width: 410px;
    padding: 0;
    margin: 0 90px 0 auto;
  }
  #sec4 .box .col .txt {
    padding: 0;
      margin: 40px 0;
  }
  #sec4 .box .btn-link.dot {
    margin: 0;
    max-width: 268px;
        padding: 0;
  }
  #sec4 .box .btn-link.dot a {
    padding-right: 5px;
  }
  #sec4 .box .btn-link.dot a:after {
    bottom: -2px;
  }
}