#header .group-btn-tel h1 {
  color: #fff;
}

#header .logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  #header .logo {
    width: 179px;
  }
}

#key {
  position: relative;
  padding: 40vw 0 20vw;
  color: #fff;
}

@media screen and (max-width: 767px) {
  #key {
    text-shadow: 0 0 10px #000, 0 0 10px #000;
  }
}

#key .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#key .group-ttl {
  height: 85vw;
  margin: 19vw 1vw 0 15vw;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

#key .group-ttl .ttl-jp {
  line-height: 1.5;
  letter-spacing: 0.2em;
}

#key .group-ttl .ttl-en {
  letter-spacing: 0.1em;
  font-size: 5vw;
  line-height: 1.5;
  margin: 27vw 0 0 3vw;
}

#key .title {
  position: relative;
  font-size: 5vw;
  letter-spacing: 0.1em;
  line-height: 2;
  margin: 0 0 6vw;
  text-align: center;
}

#key .txt {
  text-align: justify;
  position: relative;
  letter-spacing: 0.1em;
  margin: 0 var(--wrapPadding);
}

#key .txt+.txt {
  margin-top: 25px;
}

@media screen and (min-width: 768px) {
  #key {
    padding: 342px 0 119px;
  }

  #key .group-ttl {
    height: 542px;
    max-width: calc(100% - 200px);
    width: 1094px;
    margin: 0 auto;
  }

  #key .group-ttl .ttl-en {
    font-size: 30px;
    margin: 107px 0 0 25px;
  }

  #key .title {
    font-size: 21px;
    line-height: 46px;
    margin: 0 0 42px;
  }

  #key .txt {
    text-align: center;
    margin: 0;
  }

  #key .txt+.txt {
    margin-top: 29px;
  }
}

#sec1 {
  padding: 15vw 0 0;
}

#sec1 h2 {
  height: 30vw;
  text-align: center;
  line-height: 1.5;
  margin: 0 auto 12vw;
  width: 8.4vw;
  position: relative;
  letter-spacing: 0.2em;
}

#sec1 h2::before,
#sec1 h2:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1px;
  height: 20px;
  background: var(--cl-main);
}

#sec1 h2::before {
  top: 0;
}

#sec1 h2:after {
  bottom: 0;
}

#sec1 .group .video {
  height: 100vw;
  position: relative;
  overflow: hidden;
}

#sec1 .group .video iframe {
  position: absolute;
  width: 186.78%;
  height: 110%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#sec1 .group .txt {
  margin: 7vw 0 0;
  text-align: justify;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
  #sec1 .group .video iframe {
    position: absolute;
    width: 307%;
    height: 170%;
    top: 50%;
    left: 46%;
    transform: translate(-50%, -50%);
  }
}

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

  #sec1 .wrap {
    max-width: calc(100% - 200px);
    width: 1317px;
  }

  #sec1 h2 {
    height: 133px;
    margin: 0 auto 90px;
    width: 36px;
  }

  #sec1 h2::before,
  #sec1 h2:after {
    height: 20px;
  }

  #sec1 .group {
    color: #fff;
    position: relative;
  }

  #sec1 .group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    background: #000;
    z-index: 1;
  }

  #sec1 .group .video {
    height: 780px;
  }

  #sec1 .group .txt {
    position: absolute;
    z-index: 2;
    width: 460px;
    bottom: 55px;
    right: 49px;
    margin: 0;
  }
}

#sec2 {
  text-align: center;
  padding: 20vw 0 20vw;
}

#sec2 h2 {
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 767px) {
  #sec2 h2 {
    margin: 0 -4vw;
    font-size: 5vw;
  }
}

#sec2 .group-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 8vw 0 0;
}

#sec2 .group-img .img {
  margin: 1.5vw 0 0;
  width: 49%;
}

#sec2 h3 {
  font-size: 4vw;
  line-height: 1.5;
  margin: 10vw 0 5vw;
  letter-spacing: 0.15em;
}

#sec2 .txt {
  letter-spacing: 0.1em;
  text-align: justify;
}

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

  #sec2 .wrap {
    width: 1062px;
    max-width: calc(100% - 200px);
  }

  #sec2 h2 {
    position: absolute;
    top: 0;
    right: 0;
    text-align: left;
    letter-spacing: 0.2em;
  }

  #sec2 .group-img {
    width: 841px;
    max-width: calc(100% - 100px);
    margin: 0 auto;
    padding: 62px 0 0;
  }

  #sec2 .group-img .img {
    margin: 11px 0 0;
    width: 415px;
    max-width: calc(50% - 5.5px);
  }

  #sec2 h3 {
    font-size: 20px;
    margin: 156px 0 37px;
  }

  #sec2 .txt {
    text-align: inherit;
  }
}

#sec3 {
  background: url("../img/concept/s3_bg.jpg") no-repeat center right 40%/cover;
  color: #fff;
  padding: 20vw 0;
}

#sec3 h2 {
  line-height: 2.125;
  letter-spacing: 0.2em;
}

#sec3 .ttl-en {
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin: 4vw 0 10vw;
}

#sec3 .txt {
  letter-spacing: 0.1em;
}

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

  #sec3 .wrap {
    width: 914px;
  }

  #sec3 .ttl-en {
    margin: 21px 0 85px;
  }
}

#sec4 {
  padding: 15vw 0 0;
}

#sec4 h2 {
  letter-spacing: 0.2em;
  line-height: 2.4;
  height: 95vw;
  width: 26.88vw;
  margin: 0 auto;
}

#sec4 .video {
  position: relative;
  height: 100vw;
  overflow: hidden;
}

#sec4 .video iframe {
  position: absolute;
  width: 186.78%;
  height: 120%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#sec4 .img {
  margin: 8vw 25vw 8vw;
  overflow: hidden;
}

#sec4 .txt {
  text-align: justify;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 768px) {
  #sec4 .video iframe {
    width: 300%;
    height: 148%;
    left: 46%;
  }
}

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

  #sec4 .wrap {
    width: 1132px;
  }

  #sec4 h2 {
    position: absolute;
    top: 67px;
    line-height: 55px;
    height: 430px;
    left: calc(50% + 358px);
    margin: 0;
    width: auto;
  }
}

@media screen and (min-width: 768px) and (max-width: 1150px) {
  #sec4 h2 {
    left: auto;
    right: 100px;
  }
}

@media screen and (min-width: 768px) {
  #sec4 .video {
    max-width: 724px;
    width: calc(50% + 183px);
    margin: 0 calc(50% - 183px) 0 auto;
    height: 602px;
  }

  #sec4 .img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 324px;
    height: 418px;
    max-width: calc(50% - 242px);
    margin: 0;
  }

  #sec4 .txt {
    padding: 0 0 17px;
    width: 570px;
    margin: 81px 0 0 calc(50% - 467px);
  }
}

#sec5 {
  margin: 12vw 0 0;
  padding: 8vw 0 0;
  text-align: center;
}

#sec5 .ttl-en {
  color: #4c4944;
  font-size: 5.8vw;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

#sec5 h2 {
  text-align: left;
  margin: 4vw auto 0;
  width: 8.4vw;
  letter-spacing: 0.1em;
  height: 85vw;
}

#sec5 .txt {
  letter-spacing: 0.1em;
  text-align: justify;
}

#sec5 .group-btn {
  margin: 10vw 0 0;
}

#sec5 .group-btn .btn-link {
  margin: 0 auto;
}

#sec5 .group-btn .btn-link+.btn-link {
  margin-top: 8vw;
}

@media screen and (min-width: 768px) {
  #sec5 {
    margin: 100px 0 0;
    padding: 80px 0 0;
  }

  #sec5 .ttl-en {
    font-size: 26px;
  }

  #sec5 h2 {
    text-align: left;
    margin: 27px auto 0;
    width: 36px;
    letter-spacing: 0.2em;
    height: 398px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
  #sec5 h2 {
    letter-spacing: 0.1em;
  }
}

@media screen and (min-width: 768px) {
  #sec5 .txt {
    letter-spacing: 0.1em;
    text-align: inherit;
  }

  #sec5 .group-btn {
    display: flex;
    justify-content: center;
    margin: 70px 0 0;
  }

  #sec5 .group-btn .btn-link {
    margin: 0;
  }

  #sec5 .group-btn .btn-link+.btn-link {
    margin-top: 0;
    margin-left: 53px;
  }
}

#sec6 {
  margin: 20vw 0 0;
  position: relative;
  padding: 0 0 20vw;
}

#sec6::before {
  content: "";
  position: absolute;
  top: 130vw;
  right: var(--wrapPadding);
  left: var(--wrapPadding);
  height: 1px;
  background: #292521;
  opacity: 0.2;
}

#sec6 .group-img {
  position: relative;
}

#sec6 .group-img h2,
#sec6 .txt_name {
  position: absolute;
  left: 0;
  right: 0;
  top: 12vw;
  margin: 0 auto;
  color: #fff;
  z-index: 2;
  font-size: 6vw;
  width: 12vw;
  line-height: 2;
  letter-spacing: 0.2em;
  height: 40vw;
}

#sec6 .txt_name {
  width: auto;
  height: auto;
  font-size: 13px;
  top: 102vw;
  text-align: center;
}

#sec6 .txt_name span {
  font-size: 16px;
}

#sec6 .group-content {
  padding: 10vw 0 0;
}

#sec6 .group-content .txt {
  text-align: justify;
  letter-spacing: 0.03em;
}

#sec6 .group-content .txt+.txt {
  text-align: left;
  margin-top: 25px;
  width: 100%;
}

#sec6 .group-content .txt+.txt span {
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  #sec6 .txt_name {
    top: 657px;
    text-align: start;
    padding-left: 17px;
  }

  #sec6 {
    margin: 184px 0 0;
    padding: 0 0 187px;
  }

  #sec6::before {
    top: 168px;
    right: 0;
    left: auto;
    width: calc(50% + 485px);
    max-width: calc(100% - 100px);
  }

  #sec6 .wrap {
    width: 1132px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
  }

  #sec6 .group-img {
    width: calc(50% - 3px);
    max-width: calc(100% - 488px);
  }

  #sec6 .group-img .img {
    width: 100%;
    height: 700px;
    overflow: hidden;
  }

  #sec6 .group-img .img+.img {
    height: 460px;
    margin: 30px 0;
  }

  #sec6 .group-img .img:last-child {
    margin-bottom: 20px;
  }

  #sec6 .group-img h2 {
    top: 93px;
    font-size: 25px;
    width: 50px;
  }

  #sec6 .group-content {
    padding: 0 0 11px;
    width: 488px;
  }

  #sec6 .group-content .txt {
    width: 412px;
  }

  #sec6 .group-content .txt+.txt {
    margin-top: 31px;
    width: 412px;
  }

  #sec6 .group-content .txt+.txt span {
    font-size: 21px;
  }
}