@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
.fv {
  position: relative;
  padding: 27.9% 0;
  /* パネル切り替えのアニメーション */
}
.fv__img, .fv__txtTop, .fv__txtBottom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  letter-spacing: 0.1em;
}
.fv__img {
  width: 60%;
}
.fv__txtTop {
  font-size: 3vw;
  top: 43%;
}
.fv__txtBottom {
  font-size: 3vw;
  top: 61%;
}
.fv__scroll {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.fv__scrollTxt {
  font-size: 1.5vw;
  letter-spacing: 0.1em;
}
.fv__scrollIcon {
  width: 25%;
  margin-top: 10%;
  animation: scrollarr 1.2s ease infinite;
}
@keyframes scrollarr {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  10% {
    opacity: 1;
    transform: translate(0, 0);
  }
  75% {
    opacity: 1;
    transform: translate(0, 1rem);
  }
  100% {
    opacity: 0;
    transform: translate(0, 1rem);
  }
}

.about {
  background-image: url(../common/img/about-bg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 6% 0;
}
.about__txt {
  font-size: 1.2vw;
  line-height: 2;
  width: 60%;
  margin: 3% auto 0;
}

.design {
  padding: 6% 0 10%;
  position: relative;
}
.design__img {
  position: absolute;
  width: 20%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.design__listWrapper {
  width: 70%;
  margin: 6% auto 0;
}
.design__list {
  display: flex;
  justify-content: space-between;
}
.design__list:nth-child(2) {
  margin-top: 8%;
}
.design__item {
  width: 33%;
  text-align: center;
}
.design__itemTtl {
  font-size: 2vw;
  letter-spacing: 0.1em;
}
.design__itemSubTtl {
  font-size: 1.2vw;
  margin-top: 5%;
  display: block;
  color: #B61C26;
  text-align: unset;
}
.design__itemIcon {
  width: 10.852%;
  margin: 5% auto 0;
}
.design__itemTxt {
  font-size: 1.2vw;
  line-height: 1.3;
  margin-top: 5%;
  text-align: left;
  letter-spacing: 0.2em;
}
.design__itemTxt span {
  color: #B61C26;
}

@media screen and (max-width: 1024px) {
  .fv {
    height: 85vh;
    padding: 0;
  }
  .fv__img {
    width: 80%;
  }
  .fv__txtTop, .fv__txtBottom {
    font-size: 6vw;
  }
  .fv__txtTop {
    top: 46%;
  }
  .fv__txtBottom {
    top: 56%;
  }
  .fv__scrollTxt {
    font-size: 5.5vw;
  }
  .about {
    padding: 15% 0;
  }
  .about__txt {
    font-size: 3.5vw;
    line-height: 2;
    width: 90%;
    margin: 5% auto 0;
  }
  .about__listWrapper {
    width: 90%;
    margin: 10% auto 0;
  }
  .about__list {
    font-size: 2.5vw;
  }
  .about__kome {
    font-size: 3.5vw;
    margin-top: 8%;
  }
  .design {
    padding: calc(NaN * 1F);
  }
  .design__img {
    width: 45%;
    top: 30%;
    right: 0;
    left: auto;
    transform: translate(0);
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
  }
  .design__listWrapper {
    width: 90%;
    margin: 12% auto 0;
  }
  .design__list {
    display: block;
  }
  .design__list:nth-child(2) {
    margin-top: 15%;
  }
  .design__top {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
  }
  .design__topInner {
    margin-left: 4%;
  }
  .design__item {
    width: 100%;
    text-align: left;
  }
  .design__item:nth-child(n+2) {
    margin-top: 15%;
  }
  .design__itemTtl {
    font-size: 4.5vw;
  }
  .design__itemSubTtl {
    font-size: 3.5vw;
    margin-top: 10%;
  }
  .design__itemIcon {
    width: 12%;
    margin: 0;
  }
  .design__itemTxt {
    font-size: 3.5vw;
    line-height: 2;
    margin-top: 8%;
  }
  .works__list {
    width: 90%;
    margin-top: 12%;
    display: block;
  }
  .works__item {
    width: 100%;
  }
  .works__item:nth-child(n+2) {
    margin-top: 18%;
  }
  .works__itemTtl {
    font-size: 4.5vw;
  }
  .works__btn {
    margin: 16% auto 0;
  }
  .works__btn a {
    font-size: 6.5vw;
  }
  .works__btnIcon {
    width: 10vw;
    height: 10vw;
  }
}/*# sourceMappingURL=front-page.css.map */