@charset "UTF-8";

html {
  font-size: 10px;
}

@media screen and (max-width: 1400px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}

/*-------------------------
 Fade
-------------------------*/
#feature .fadeLeft {
  opacity: 0;
  transform: translateX(40px);
  transition: all 1s ease-out;
}

#feature .fadeLeft.active {
  opacity: 1;
  transform: translateX(0);
}

#feature .fadeRight {
  opacity: 0;
  transform: translateX(-40px);
}

#feature .fadeRight.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 1s ease-out;
}

/*-------------------------
 Content
-------------------------*/
.area-header {
  width: 100%;
}

#feature {
  box-sizing: border-box;
  overflow: clip;
  position: relative;
  font-family: 'Yu Gothic', '游ゴシック', 'YuGothic', '游ゴシック体',
    'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', Meiryo, メイリオ,
    Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt" 1;
  width: 100%;
  color: #413e4d;
  padding-bottom: 8rem;
}

#feature a {
  transition: all 0.3s ease-in-out;
  display: block;
  transform: none;
  text-decoration: none;
}

#feature a:hover {
  opacity: .7;
}

#feature img,
svg,
video {
  width: 100%;
  height: auto;
  display: block;
}

#feature .hero {
  width: 98rem;
  margin: 0 auto;
}

#feature .flex {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

/*-------------------------
 image / TEXT
-------------------------*/
#feature .hero .logo {
  width: 21.5rem;
  margin: 5.6rem auto 0 0;
}

#feature .hero .hero__img {
  width: 40rem;
  margin: 0 0 0 auto;
}

#feature .hero .hero__img02 {
  width: 52rem;
  margin: -11.8rem 0 0 16rem;
  position: relative;
  z-index: 20;
}

#feature .hero h2 {
  font-size: 6rem;
  letter-spacing: 0.036em;
  line-height: 1.75;
  text-align: left;
  margin: -0.6rem 0 0 0;
  padding-left: 0.1rem;
  font-family: "forma-djr-micro", sans-serif;
  font-weight: 300;
  font-style: normal;
}

#feature .hero .hero__ttl p {
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 2;
  margin: 1.1rem 0 0 0;
}

#feature .hero .hero__text02 {
  font-size: 1.6rem;
  margin: 5.1rem auto 0;
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: center;
}