.kv-text {
  font-size: calc(10vw * var(--scale));
  letter-spacing: 0.1em;
}
#key-box .keyvisual li {
  height: 520px;
}

#key-box .keyvisual li img {
  -o-object-position: 65% 50%;
  object-position: 65% 50%;
  height: 520px;
}

#lead {
  padding: 20vw 0;
  position: relative;
}

#lead::before {
  content: "";
  background: url(../img/about/lead_deco1.png) no-repeat 0 0/100%;
  width: 100%;
  height: 90vw;
  left: 0;
  position: absolute;
  top: 0;
}

#lead .content h3 {
  font-size: 18px;
  line-height: 46px;
  margin-bottom: 15px;
}

#lead .content .txt {
  margin-bottom: 50px;
}

@media screen and (max-width:767px) {
  
  .kv-text {
    top: 16px;
  }
}

@media screen and (min-width: 768px) {
  .kv-text {
    font-size: 56px;
  }

  #key-box .keyvisual li {
    height: 850px;
  }

  #key-box .keyvisual li img {
    -o-object-position: 65% 50%;
    object-position: 65% 50%;
    height: 850px;
  }

  #lead {
    padding: 435px 0 50px;
  }

  #lead::before {
    width: 649px;
    height: 541px;
    left: calc(50% - 445px);
    top: 230px;
  }

  #lead .content {
    width: 375px;
  }

  #lead .content .txt {
    margin-bottom: 85px;
  }
  h1 {
  font-size: 56px;
  }
}

#about {
  padding: 10vw 0 20vw;
}

#about::before {
  top: 17vw;
}

#about::after {
  content: "";
  background: url(../img/about/about_deco1.png) no-repeat 0 0/100%;
  width: 80%;
  height: 160vw;
  left: 10%;
  top: 10%;
  position: absolute;
  z-index: -1;
}

#about h2 {
  width: -moz-max-content;
  width: max-content;
  writing-mode: vertical-rl;
  margin-left: auto;
  margin-bottom: 15vw;

}

#about .row .col-left h3 {
  font-size: 18px;
  line-height: 46px;
  margin-bottom: 20px;
}

#about .row .col-left .txt span {
  display: block;
  margin-bottom: 20px;
}

#about .row .col-right .photo-1 {
  margin-bottom: 20px;
}

#about .row .col-right .group-photo {
  display: flex;
}

#about .row .col-right .group-photo .photo-2 {
  margin-right: 20px;
}

@media screen and (min-width: 768px) {
  #about {
    padding: 125px 0 200px;
  }

  #about::before {
    top: 165px;
  }

  #about::after {
    width: 475px;
    height: 937px;
    left: calc(50% - 260px);
    top: 280px;
  }

  #about h2 {
    margin-right: 245px;
    margin-bottom: 155px;
  }

  #about .row .col-left {
    margin-top: 135px;
  }

  #about .row .col-left h3 {
    margin-bottom: 20px;
    writing-mode: vertical-rl;
    order: 2;
    height: -moz-max-content;
    height: max-content;
    margin-left: 20px;
  }

  #about .row .col-left .txt {
    order: 1;
  }

  #about .row .col-left .txt span {
    writing-mode: vertical-rl;
    height: 225px;
    margin-left: auto;
    margin-bottom: 45px;
  }

  #about .row .col-right {
    margin-right: -60px;
  }

  #about .row .col-right .photo-1 {
    margin-bottom: 75px;
    margin-right: -170px;
  }

  #about .row .col-right .group-photo {
    display: flex;
  }

  #about .row .col-right .group-photo .photo-2 {
    margin-right: 20px;
  }

  #about.animated::before {
    width: calc(50% + 265px);
  }
}

#iwasakiyama {
  padding: 15vw 0 20vw;
}

#iwasakiyama::after {
  top: 35vw;
}

#iwasakiyama::before {
  content: "";
  background: url(../img/about/iwasakiyama_deco1.png) no-repeat 0 0/100%;
  width: 80%;
  height: 150vw;
  left: 10%;
  top: 10%;
  position: absolute;
}

#iwasakiyama h2 {
  writing-mode: vertical-rl;
  height: -moz-max-content;
  height: max-content;
  width: -moz-max-content;
  width: max-content;
  margin-bottom: 10vw;
}

#iwasakiyama .row-1 {
  margin-bottom: 50px;
}

#iwasakiyama .row-1 .col-left {
  margin-bottom: 20px;
  margin-left: -5.5%;
}

#iwasakiyama .row-1 .col-right h3 {
  font-size: 18px;
  line-height: 46px;
  margin-bottom: 20px;
}

#iwasakiyama .row-2 .col-right {
  margin-bottom: 20px;
}

#iwasakiyama .row-2 .col-left h3 {
  font-size: 18px;
  line-height: 46px;
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
  #iwasakiyama {
    padding: 80px 0 260px;
  }

  #iwasakiyama::after {
    top: 215px;
  }

  #iwasakiyama::before {
    width: 856px;
    height: 613px;
    left: calc(50% - 280px);
    top: auto;
    bottom: 315px;
  }

  #iwasakiyama h2 {
    margin-bottom: 95px;
    margin-left: 215px;
    letter-spacing: 3px;
  }

  #iwasakiyama .row-1 {
    margin-bottom: 90px;
  }

  #iwasakiyama .row-1 .col-left {
    margin-bottom: 20px;
    margin-left: -330px;
    margin-right: 24px;
  }

  #iwasakiyama .row-1 .col-right {
    width: 385px;
    margin: 60px 40px 0 0;
  }

  #iwasakiyama .row-1 .col-right h3 {
    font-size: 18px;
    line-height: 46px;
    margin-bottom: 30px;
  }

  #iwasakiyama .row-2 .col-right {
    margin-bottom: 20px;
    order: 2;
    margin-right: -170px;
    margin-left: 24px;
  }

  #iwasakiyama .row-2 .col-left {
    order: 1;
    width: 385px;
    margin: 65px 0 0 50px;
  }

  #iwasakiyama .row-2 .col-left h3 {
    font-size: 18px;
    line-height: 46px;
    margin-bottom: 20px;
  }

  #iwasakiyama .row-2 .col-left .txt {
    line-height: 30px;
  }

  #iwasakiyama.animated::after {
    width: calc(50% + 90px);
  }
}

.scroll-parallax {
  height: 60vw;
}

.scroll-parallax img {
  height: 60vw;
}

@media screen and (min-width: 768px) {
  .scroll-parallax {
    height: 300px;
  }

  .scroll-parallax img {
    height: 300px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
  }
}

#feature {
  padding: 20vw 0;
  position: relative;
  background: url(../img/about/feature_deco1.png) no-repeat center top 25vw/90%;
}

#feature::before {
  content: "";
  background: #fff;
  height: 1px;
  position: absolute;
  left: 0;
  top: 30vw;
  width: 0;
}

#feature::after {
  content: "";
  background: #fff;
  height: 1px;
  position: absolute;
  right: 0;
  top: 30vw;
  width: 0;
}

#feature h2 {
  writing-mode: vertical-rl;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto 20vw;
}

#feature .row {
  margin-bottom: 50px;
}

#feature .row .col-left {
  margin-bottom: 40px;
}

#feature .row .col-right h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

#feature.animated::before {
  width: 37%;
  transition: 2s;
}

#feature.animated::after {
  width: 37%;
  transition: 2s;
}

@media screen and (min-width: 768px) {
  #feature {
    padding: 290px 0 340px;
    background: url(../img/about/feature_deco1.png) no-repeat left calc(50% + 185px) top 575px/auto;
  }

  #feature::before {
    top: 350px;
  }

  #feature::after {
    top: 350px;
  }

  #feature h2 {
    writing-mode: vertical-rl;
    width: -moz-max-content;
    width: max-content;
    margin: 0 auto 115px;
  }

  #feature .row {
    margin-bottom: 85px;
  }

  #feature .row .col-left {
    margin-bottom: 40px;
    margin-left: 45px;
    margin-right: 24px;
  }

  #feature .row .col-right {
    width: 375px;
    margin: 60px 55px 0 0;
  }

  #feature .row .col-right h3 {
    width: -moz-max-content;
    width: max-content;
    height: -moz-max-content;
    height: max-content;
    font-size: 18px;
    margin: 0 auto 95px;
    writing-mode: vertical-rl;
    letter-spacing: 4px;
  }

  #feature .btn-t1 a {
    margin: 0 auto;
  }

  #feature.animated::before {
    width: 50%;
    transition: 2s;
  }

  #feature.animated::after {
    width: calc(50% - 160px);
    transition: 2s;
  }
}

#history {
  padding: 20vw 0 0;
  background: url(../img/shared/pt2.jpg);
  color: #242424;
  position: relative;
}

#history::before {
  content: "";
  background: url(../img/about/history_deco1.png) no-repeat 0 0/100%;
  width: 90%;
  height: 100vw;
  left: 5%;
  position: absolute;
}

#history h2 {
  margin-bottom: 10vw;
  text-align: center;
}

#history .content-history {
  position: relative;
}

#history .content-history .border-line1 {
  display: block;
  position: absolute;
  left: 30px;
  top: 0;
  width: 1px;
  height: 0;
  background: #242424;
}

#history dl {
  display: flex;
  margin-bottom: 80px;
}

#history dl dt {
  width: 90px;
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
  background: url(../img/shared/pt2.jpg);
  position: relative;
  z-index: 1;
}

#history dl dd {
  width: calc(100% - 90px);
  padding: 10px 0;
}

#history dl h3 {
  font-size: 18px;
  line-height: 46px;
  margin-bottom: 15px;
}

#history dl .txt {
  margin-bottom: 20px;
}

#history dl .btn-t1 a {
  width: 250px;
  margin: 20px 0;
  border-color: #242424;
}

#history dl .btn-t1 a::after {
  background: #242424;
}

#history dl .photo-3 {
  margin-bottom: 20px;
}

#history .box .group-1 {
  position: relative;
}
#history .box .group-1 .photo-bg {
  background: url(../img/about/history_bg1.jpg) no-repeat right top/cover ;
  background-position: right;
  /* background-position: -108px; */
  color: #fff;
  height: 50vh;
  min-height: 300px;
}

/* 
#history .box .group-1 .photo-bg {
  margin: 0 -50%;
} */

#history .box .group-1 {
  background: url();
}

#history .box .group-1 h3 {
  writing-mode: vertical-rl;
  font-size: 18px;
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  position: absolute;
  color: #fff;
}

#history .box .group-2 {
  padding: 10vw 5% 20vw;
}

#history .box .group-2 h3 {
  font-size: 18px;
  line-height: 46px;
  margin-bottom: 20px;
}



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

  #history::before {
    width: 1069px;
    height: 506px;
    left: calc(50% - 625px);
    top: 115px;
  }

  #history h2 {
    text-align: left;
    writing-mode: vertical-rl;
    margin: 0 auto 100px;
  }

  #history .content-history {
    position: relative;
  }

  #history .content-history .border-line1 {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }

  #history dl {
    margin-bottom: 80px;
    position: relative;
    font-size: 18px;
    line-height: 46px;
  }

  #history dl dt {
    width: 90px;
    padding: 10px 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    letter-spacing: 3px;
  }

  #history dl dd {
    width: calc(100% - 90px);
    padding: 10px 0;
  }

  #history dl h3 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  #history dl .txt {
    margin-bottom: 20px;
  }

  #history dl .btn-t1 a {
    width: 250px;
    margin: 20px 0;
    border-color: #242424;
  }

  #history dl .btn-t1 a::after {
    background: #242424;
  }

  #history dl .photo-3 {
    margin-bottom: 20px;
  }

  #history .dl1 {
    margin-bottom: 75px;
  }

  #history .dl1 dd {
    width: -moz-max-content;
    width: max-content;
    margin-left: auto;
    margin-right: 155px;
    margin-top: 50px;
  }

  #history .dl2 {
    margin-bottom: 175px;
  }

  #history .dl2 dd {
    width: 570px;
    text-align: center;
    margin-top: 50px;
  }

  #history .dl3 {
    margin-bottom: 195px;
  }

  #history .dl3 dd {
    width: 380px;
    margin-left: auto;
    margin-right: 65px;
    margin-top: 52px;
  }

  #history .dl3 dd h3 {
    margin-bottom: 25px;
  }

  #history .dl3 dd .txt {
    font-size: 15px;
    line-height: 32px;
  }

  #history .dl3 dd .photo-1 {
    position: absolute;
    right: calc(50% + 50px);
    top: 75px;
  }

  #history .dl4 {
    margin-bottom: 275px;
  }

  #history .dl4 dd {
    width: 380px;
    margin-left: 95px;
    margin-top: 50px;
  }

  #history .dl4 dd .txt {
    font-size: 15px;
    line-height: 32px;
  }

  #history .dl4 dd .photo-2 {
    position: absolute;
    left: calc(50% + 50px);
    top: 75px;
  }

  #history .dl5 {
    display: block;
    margin-bottom: 60px;
  }

  #history .dl5 .photo-3 {
    margin-top: 55px;
    width: -moz-max-content;
    width: max-content;
    margin-left: auto;
    margin-right: -25px;
    padding-bottom: 30px;
    background: url(../img/shared/pt2.jpg);
  }

  #history .dl5 .content {
    position: absolute;
    width: 330px;
    color: #fff;
    right: 90px;
    bottom: 70px;
  }

  #history .dl5 .content h3 {
    margin-bottom: 5px;
  }

  #history .dl5 .content .txt {
    font-size: 15px;
    line-height: 32px;
  }

  #history .dl6 dd {
    width: 380px;
    margin-left: auto;
    margin-right: 65px;
    margin-top: 65px;
  }

  #history .dl6 dd .txt {
    font-size: 15px;
    line-height: 32px;
    margin-bottom: 50px;
  }

  #history .dl6 dd .btn-t1 a {
    width: 280px;
    margin-left: 20px;
    padding: 5px 0;
  }

  #history .dl6 dd .photo-4 {
    position: absolute;
    right: calc(50% + 55px);
    top: 90px;
  }

  #history .box .group-1 .photo-bg {
    margin: 0;
    height: 750px;
  }

  #history .box .group-1 .photo-bg img {
    height: 750px;
    width: 100%;
  }

  #history .box .group-1 h3 {
    left: calc(50% + 80px);
    transform: translateX(-50%);
    top: 180px;
  }

  #history .box .group-2 {
    padding: 160px 0 190px;
  }

  #history .box .group-2 .content {
    display: flex;
    justify-content: space-between;
    width: 670px;
    margin: 0 auto;
    padding-left: 175px;
  }

  #history .box .group-2 h3 {
    margin-bottom: 20px;
    writing-mode: vertical-rl;
    order: 2;
    letter-spacing: 2px;
  }

  #history .box .group-2 .txt {
    display: flex;
    flex-direction: row-reverse;
    order: 1;
  }

  #history .box .group-2 .txt span {
    display: block;
    writing-mode: vertical-rl;
    margin-left: 30px;
    height: -moz-max-content;
    height: max-content;
  }
}

@media screen and (min-width: 768px) and (max-width: 1136px) {
  #history .dl1 dd {
  margin-right: 0;
  margin-top: 62px;
  }
  #history .dl1 dd,
  #history .dl3 dd,
  #history .dl6 dd {
    margin-left: calc(50% + 24px);
  }
  
  #history .dl4 dd {
    margin-right: calc(50% + 24px);
    margin-left: auto;
  }
  
  #history .dl2 dd {
    margin-right: auto;
    margin-top: 62px;
  }
}


@media (min-width: 768px) and (max-width: 1300px) {
  #about h2 {
    margin-right: 225px;
  }

  #iwasakiyama .row-1 .col-right {
    margin: 60px 20px 0 0;
  }

  #iwasakiyama .row-2 .col-left {
    margin: 65px 0 0 10px;
  }

  #about .row .col-right {
    margin-right: 0;
  }

  #about .row .col-right .photo-1 {
    margin-right: 0;
    margin-bottom: 40px;
  }

  #about .row .col-left {
    margin-top: 75px;
    margin-right: 20px;
  }

  #about .row .col-right .group-photo {
    width: 90%;
  }
}

/*# sourceMappingURL=about.css.map */