@charset "utf-8";
/* concept page
 * ========================================================================== */
/* page-ttl */
.page-ttl {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  height: 100vh;
}
.page-ttl h2 {
  position: relative;
  opacity: 0;
  z-index: 2;
}
.page-ttl .bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6%;
  right: -6%;
  z-index: 0;
  transform: scale(1.06);
  background: url('../img/mv_pc.jpg') no-repeat center bottom / cover;
}
.page-ttl.is-bg-anim .bg {
  animation: scaleDown 5s ease-in-out forwards;
}
.page-ttl .caption {
  position: absolute;
  right: 20px;
  bottom: 10px;
  z-index: 2;
  font-size: 14px;
  color: #fff;
}
/* concept */
#concept {
  position: relative;
  background: url(../img/concept_bg_pc.jpg) no-repeat center / cover;
  text-align: center;
  aspect-ratio: 1366 / 1950;
}
#concept .c-inner {
  position: relative;
  margin: auto;
  width: 90%;
  max-width: 817px;
}
#concept h2 img,
#concept .txt {
  opacity: 0;
  transform: translateY(18px);
}
#concept h2 img:nth-of-type(2) {
  display: block;
  margin-bottom: 100px;
}
#concept h2 img:first-of-type {
  margin: -50px 0 20px;
}
#concept .txt {
  margin-bottom: 30px;
  color: #fff;
  font-size: 22px;
  text-align: left;
  letter-spacing: 2px;
}
#concept .caption {
  position: absolute;
  left: 20px;
  bottom: 10px;
  z-index: 2;
  font-size: 14px;
  color: #fff;
}
/* exterior */
.exterior {
  position: relative;
  margin-top: -2px;
}
.exterior .caption {
  position: absolute;
  right: 20px;
  bottom: 10px;
  z-index: 2;
  font-size: 14px;
  color: #fff;
}
/* pr */
#pr {
  position: relative;
  background: url(../img/pr_bg_pc.jpg) no-repeat center / cover;
  aspect-ratio: 1366 / 3181;
}
#pr .txt {
  opacity: 0;
  transform: translateY(18px);
}
#pr .img,
#pr .txt-jp,
#pr .txt-en {
  position: absolute;
}
#pr .txt {
  padding: 0 5px;
  font-size: 24px;
  letter-spacing: 3px;
}
#pr .txt .tcy {
  text-combine-upright: all;
}
#pr .groove {
  position: relative;
  aspect-ratio: 1366 / 1557;
}
#pr .fusion {
  position: relative;
  aspect-ratio: 1366 / 1623;
}
#pr .groove .txt-en {
  top: 18.2%;
  left: 19.1%;
  width: 75.4%;
  z-index: 5;
}
#pr .groove .txt-jp {
  top: 37.3%;
  left: 10%;
  writing-mode: vertical-rl;
  z-index: 10;
}
#pr .groove .img01 {
  top: 10.6%;
  left: 6.2%;
  width: 17.8%;
}
#pr .groove .img02 {
  top: 35.5%;
  right: 0;
  width: 60%;
}
#pr .groove .img03 {
  left: 0;
  bottom: 0;
  width: 50.7%;
}
#pr .groove .img04 {
  right: 0;
  bottom: 0;
  width: 49.3%;
}
#pr .fusion .txt-en {
  top: 9.2%;
  left: 8.9%;
  width: 66.9%;
  z-index: 5;
}
#pr .fusion .txt-jp {
  top: 23.7%;
  right: 15.5%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  z-index: 10;
}
#pr .fusion .img01 {
  top: 4.3%;
  right: 3.5%;
  width: 26.7%;
}
#pr .fusion .img02 {
  top: 30.6%;
  left: 3.1%;
  width: 20.3%;
}
#pr .fusion .img03 {
  top: 57.6%;
  right: 0.1%;
  width: 15.8%;
}
#pr .fusion .img04 {
  top: 44.6%;
  left: 0;
  width: 73.2%;
}
#pr .fusion .img05 {
  bottom: 0;
  left: 0;
  width: 100%;
}
#pr .caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
}
#pr .groove .img02 .caption,
#pr .groove .img04 .caption,
#pr .fusion .img01 .caption {
  left: auto;
  right: 10px;
}
#pr .caption span {
  font-size: 15px;
}
@media screen and (max-width: 1024px) {
  /* concept */
  #concept .c-inner {
    width: 82%;
  }
  #concept h2 img:nth-of-type(2) {
    margin-bottom: 60px;
  }
  #concept .txt {
    margin-bottom: 20px;
  }
  /* pr */
  #pr .txt {
    font-size: 20px;
  }
}
@media screen and (max-width: 960px) {
  /* page-ttl */
  .page-ttl h2 img {
    max-height: 100px;
  }
  /* concept */
  #concept .c-inner {
    width: 90%;
  }
  #concept h2 img:nth-of-type(2) {
    margin-bottom: 30px;
  }
  #concept .txt {
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 1px;
  }
  /* pr */
  #pr .txt {
    padding: 0 2px;
    font-size: 14px;
  }
  #pr .caption {
    font-size: 10px;
  }
  #pr .fusion .img03 .caption {
    left: 5px;
    bottom: 5px;
    font-size: 8px;
  }
  #pr .caption span {
    font-size: 9px;
  }
}
@media screen and (max-width: 619px) {
  /* page-ttl */
  .page-ttl {
    height: calc(100vh - 70px);
  }
  .page-ttl h2 img {
    max-height: 90px;
  }
  .page-ttl .bg {
    background: url('../img/mv_sp.jpg') no-repeat center bottom / cover;
  }
  .page-ttl .caption {
    bottom: 30px;
    font-size: 11px;
  }
  /* concept */
  #concept {
    background: url(../img/concept_bg_sp.jpg) no-repeat center / cover;
    aspect-ratio: 375 / 800;
  }
  #concept .c-inner {
    width: 86%;
  }
  #concept h2 img:nth-of-type(2) {
    margin-bottom: 40px;
  }
  #concept h2 img:first-of-type {
    margin: -20px 0 20px;
  }
  #concept .txt {
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: .5px;
  }
  #concept .caption {
    left: 10px;
    font-size: 11px;
  }
  /* pr */
  #pr {
    background: url(../img/pr_bg_sp.jpg) no-repeat top center / contain;
    aspect-ratio: 375 / 2169;
  }
  #pr .txt {
    padding: 0 4px;
    font-size: 14px;
    letter-spacing: 2px;
  }
  #pr .groove {
    aspect-ratio: 375 / 1033;
  }
  #pr .fusion {
    aspect-ratio: 375 / 1136;
  }
  #pr .groove .txt-en {
    top: 5.8%;
    left: 8%;
    width: 82.9%;
  }
  #pr .groove .txt-jp {
    top: 15.7%;
    left: auto;
    right: 8%;
  }
  #pr .groove .img01 {
    top: 15.7%;
    left: 5.3%;
    width: 29.6%;
  }
  #pr .groove .img02 {
    top: 39.6%;
    left: 0;
    right: auto;
    width: 94.6%;
  }
  #pr .groove .img03 {
    left: auto;
    right: 0;
    bottom: 0;
    width: 94.6%;
  }
  #pr .groove .img04 {
    left: 5.3%;
    right: auto;
    bottom: 23.5%;
    width: 65.3%;
  }
  #pr .fusion .txt-en {
    top: 13.9%;
    left: 8.5%;
    width: 73.3%;
  }
  #pr .fusion .txt-jp {
    top: 28.5%;
    right: 5.8%;
  }
  #pr .fusion .img01 {
    top: 4.5%;
    right: 5.3%;
    width: 53.3%;
  }
  #pr .fusion .img02 {
    top: 22.5%;
    width: 41.6%;
  }
  #pr .fusion .img03 {
    top: 33.1%;
    left: 21.5%;
    right: auto;
    width: 23.4%;
  }
  #pr .fusion .img04 {
    top: auto;
    bottom: 40.7%;
    left: 0;
    width: 100%;
  }
  #pr .caption {
    font-size: 10px;
  }
  #pr .groove .img04 .caption {
    left: 10px;
    right: auto;
  }
  #pr .groove .img02 .caption,
  #pr .groove .img03 .caption {
    left: auto;
    right: 10px;
  }
  #pr .fusion .img01 .caption {
    top: 5px;
    bottom: auto;
    left: 10px;
    right: auto;
  }
  /* exterior */
  .exterior {
    position: relative;
  }
  .exterior .caption {
    right: 10px;
    bottom: 10px;
    font-size: 11px;
  }
}