#sec1 {
  padding: 15vw 0;
}

#sec1 h2 {
  margin-bottom: 5vw;
}

#sec1 .txt {
  padding: 5vw 0 8vw;
}

@media screen and (min-width: 768px) {
  #sec1 {
    padding: 136px 20px 153px;
  }

  #sec1 h2 {
    margin: -7px -131px 38px 0;
  }

  #sec1 .wrap {
    max-width: 1240px;
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #sec1 .info {
    width: 491px;
    position: static;
    margin-right: 41px;
  }

  #sec1 .photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
  }

  #sec1 .txt {
    padding: 0px 0 43px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1240px) {
  #sec1 h2 {
    margin-left: calc(52% - 30px);
  }

  #sec1 h2 img {
    max-width: 100%;
    height: auto;
  }

  #sec1 .info {
    margin-right: 0;
    width: calc(52% - 30px);
  }

  #sec1 .photo {
    width: 48%;
  }

  #sec1 .photo img {
    max-width: 100%;
    height: auto;
  }
}

#sec1_popup .wrap {
  text-align: justify;
}

#sec1_popup h2 {
  padding: 10vw 18% 10vw;
  text-align: center;
}

#sec1_popup .txt {
  padding-bottom: 25px;
}

#sec1_popup .photo {
  margin-bottom: 10vw;
  gap: 10px;
}

#sec1_popup .photo li {
  width: calc(50% - 5px);
}

@media screen and (min-width: 768px) {
  #sec1_popup .wrap {
    padding: 0 0;
  }

  #sec1_popup h2 {
    padding: 0 0 25px;
  }

  #sec1_popup .info {
    position: relative;
    max-width: 920px;
    margin: 0 auto 84px;
    padding: 47px 10px 14px 397px;
    min-height: 500px;
  }

  #sec1_popup .txt {
    padding-bottom: 0;
  }

  #sec1_popup .photo {
    margin-bottom: 0;
    position: absolute;
    top: 37px;
    left: 0px;
    gap: 10px;
    width: 334px;
  }

  #sec1_popup .photo li {
    width: 100%;
  }
}

#sec2 {
  background: url("../img/concept/sec2_bg.png") no-repeat 14vw 0/132%;
  padding: 11vw 0 10vw;
  position: relative;
  z-index: 1;
}

#sec2:after {
  z-index: -1;
  content: '';
  position: absolute;
  top: 55vw;
  left: 0;
  right: 0;
  bottom: -35vw;
  background: url("../img/concept/sec2_deco.png") no-repeat right 0/100%;
}

#sec2 h2 {
  width: 63%;
  margin: 0 auto -27vw;
  position: relative;
  z-index: 1;
}

#sec2 .txt {
  padding: 5vw 0 0;
}

@media screen and (min-width: 768px) {
  #sec2 {
    background-position: right 10px;
    background-size: auto;
    padding: 118px 20px 80px;
    text-align: center;
  }
}

@media screen and (min-width: 768px) and (max-width: 1500px) {
  #sec2 {
    background-position: calc(50% + 206px) 10px;
  }
}

@media screen and (min-width: 768px) {
  #sec2:after {
    top: 414px;
    height: 929px;
    bottom: auto;
    background-size: auto;
  }

  #sec2 h2 {
    width: auto;
    margin: 0 auto -303px;
  }

  #sec2 .photo {
    margin: 0 -70px;
  }

  #sec2 .txt {
    padding: 47px 0 0;
  }
}

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

#sec3 .deco {
  width: 40%;
  position: absolute;
  top: 27vw;
  left: -2vw;
  z-index: 2;
}

#sec3 h2 {
  position: relative;
  padding: 8vw 25% 0 0;
  margin-bottom: 5vw;
}

#sec3 h2:before {
  content: '';
  border-top: 1px solid #7c4f24;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 3%;
}

@media screen and (min-width: 768px) {
  #sec3 {
    padding: 30px 20px 0px;
  }

  #sec3 .deco {
    width: auto;
    top: -35px;
    left: calc(50% - 624px);
  }

  #sec3 .wrap {
    justify-content: flex-end;
    display: flex;
    max-width: 1149px;
  }

  #sec3 .info {
    width: 439px;
    min-height: 497px;
  }

  #sec3 .txt {
    padding: 0px 7px 0 10px;
  }

  #sec3 .js-fade {
    width: 564px;
    position: absolute;
    top: 0;
    right: calc(50% - 96px);
  }

  #sec3 .js-fade img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 768px) and (max-width: 1180px) {
  #sec3 .js-fade {
    max-width: 564px;
    right: 453px;
    width: 52%;
  }
}

@media screen and (min-width: 768px) {
  #sec3 h2 {
    padding: 0px 0 0;
    margin-bottom: 20px;
  }

  #sec3 h2:before {
    left: 8px;
  }
}

.sec-group {
  position: relative;
}

.sec-group:after {
  content: '';
  position: absolute;
  top: 250vw;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../img/concept/bg5.jpg") repeat center 0;
  z-index: 0;
}

.sec-group:before {
  content: '';
  position: absolute;
  top: -50vw;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../img/concept/bg.png") repeat-x 0 0/47%;
  z-index: 0;
}

#sec4 {
  padding: 10vw 0 17vw;
  position: relative;
  z-index: 2;
  background: url("../img/concept/sec4_tit.png") no-repeat 0 0/20vw, url("../img/concept/sec4_deco.png") no-repeat -50vw bottom/190%;
}

#sec4 h2 {
  width: 95%;
  margin: 8vw auto 8vw;
}

#sec4 .photo2 li {
  width: 58%;
}

#sec4 .photo2 li:nth-child(2) {
  width: 38%;
  margin: 25vw 0 5vw 0;
}

@media screen and (min-width: 768px) {
  #sec4 {
    padding: 113px 20px 100px;
    background-size: auto, auto;
    background-position: 0 0, right 392px;
  }

  #sec4 h2 {
    width: auto;
    margin: 0;
    position: absolute;
    top: 19px;
    right: calc(50% - -171px);
    z-index: 1;
  }

  #sec4 .wrap {
    max-width: 1500px;
  }

  #sec4 .info {
    position: relative;
    max-width: 1180px;
    margin: 31px auto 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 60px 0 0;
  }

  #sec4 .txt {
    order: -1;
    max-width: 530px;
    margin-left: calc(50% + 32px);
  }

  #sec4 .photo1 {
    margin-left: calc(50% - 48px);
    height: 555px;
  }

  #sec4 .photo2 {
    position: static;
  }

  #sec4 .photo2 li {
    width: auto;
  }

  #sec4 .photo2 li:nth-child(1) {
    position: absolute;
    top: 0;
    right: calc(50% + 64px);
  }

  #sec4 .photo2 li:nth-child(2) {
    width: auto;
    margin: 78px 0 0;
    margin-left: calc(50% + -6px);
  }
}

#sec5 {
  position: relative;
  z-index: 2;
  padding-bottom: 25vw;
}

#sec5 .js-fade {
  margin-bottom: 5vw;
}

#sec5 .js-fade .object-fit-cover-pc {
  position: relative;
}

#sec5 .js-fade .object-fit-cover-pc span {
  color: #fff;
  letter-spacing: 0.05em;
  font-size: 5.8vw;
  line-height: 1.4;
  position: absolute;
  z-index: 1;
  left: 2vw;
  bottom: 2vw;
}

#sec5 h2 {
  width: 22%;
  margin: 0 auto 10vw;
}

@media screen and (min-width: 768px) {
  #sec5 {
    padding: 18px 20px 192px;
  }

  #sec5 .wrap {
    max-width: 1066px;
    padding: 6px 0 0px 0;
  }

  #sec5 .js-fade {
    margin-bottom: 0;
    width: calc(50% + 166px);
  }

  #sec5 .js-fade .slick-dots {
    bottom: 28px;
    right: 27px;
  }

  #sec5 .js-fade .object-fit-cover-pc {
    height: 488px;
  }

  #sec5 .js-fade .object-fit-cover-pc span {
    font-size: 30px;
    left: 28px;
    bottom: 17px;
  }

  #sec5 .txt {
    height: 358px;
    position: absolute;
    top: 46px;
    right: 131px;
  }

  #sec5 h2 {
    width: auto;
    margin: 0;
    position: absolute;
    top: 20px;
    right: 16px;
    border-right: 1px solid #7c4f24;
  }
}

#sec6 {
  background: url("../img/concept/sec6_bg.jpg") no-repeat center/cover;
  padding: 15vw 0;
  color: #fff;
  position: relative;
}

#sec6 .photo {
  width: 59%;
  position: absolute;
  top: -23vw;
  right: -5vw;
}

#sec6 h2 {
  padding: 0 26vw 5vw 0;
}

@media screen and (min-width: 768px) {
  #sec6 {
    padding: 104px 20px 121px;
  }

  #sec6 .photo {
    width: auto;
    top: -294px;
    right: 0;
  }

  #sec6 .wrap {
    max-width: 943px;
  }

  #sec6 h2 {
    padding: 0 0 15px;
    border-right: 1px solid #7c4f24;
    margin-left: -8px;
  }
}

#sec7 {
  background: url("../img/concept/sec7_deco.png") no-repeat 0 0/100%;
  padding: 15vw 0;
}

#sec7 .banner {
  margin: 0 -5vw 0 -10vw;
}

#sec7 .banner li {
  width: 50%;
  position: relative;
}

#sec7 .banner li:nth-child(1):before {
  background: url("../img/concept/smoke.png") no-repeat 0 0/100%;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  mix-blend-mode: screen;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  #sec7 {
    background-size: auto;
    background-position: 0 0;
    padding: 86px 20px 76px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1500px) {
  #sec7 {
    background-position: center 0;
  }
}

@media screen and (min-width: 768px) {
  #sec7 .banner {
    justify-content: center;
  }

  #sec7 .banner li {
    width: auto;
  }
}