/* メインビジュアル */
.mv__wrapper {
  margin: 32px 80px;
}

.mv__title {
  font-size: 6.4rem;
  line-height: 1;
}

.mv__title--span {
  font-size: 4.8rem;
}


.mv__image__container {
  display: flex;
  margin-top: 64px;
  margin-bottom: 128px;
}

.mv__image {
  max-width: 560px;
  width: 50vw;
  margin: auto;
  opacity: 0;
  transform: translateY(20px);
  /* 初期位置を下に設定 */
  transition: all 2s ease-out;
  /* アニメーションの速度 */
}


/* 画像が可視状態になったときに適用されるクラス */
.mv__image.is-img__visible {
  opacity: 1;
  /* 可視状態に */
  transform: translateY(0);
  /* 元の位置に移動 */
}



@media screen and (max-width:960px) {

  /*画面サイズが960pxからはここを読み込む*/
  .mv__wrapper {
    margin: 64px 24px;
  }

  .mv__title {
    font-size: 3.2rem;
    line-height: 1.5;
  }

  .mv__title--span {
    font-size: 2.4rem;
  }

  .mv__image {
    width: calc(100% - 96px);
    margin: auto;
  }
}

@media screen and (max-width:560px) {

  /*画面サイズが560pxからはここを読み込む*/
  .mv__wrapper {
    margin: 16px 24px;
  }

}

/* アバウト */
.about {
  /* background-image: url("../image/about-image.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto; */
  position: relative;
  z-index: 0;
  overflow: hidden;
  /* 子要素のオーバーフローを隠す */
}

.about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../image/about-image.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
  /* 初期状態でズームイン */
  transition: transform 1s ease-out;
  /* スムーズなズームアウトアニメーション */
  z-index: -1;
}

.about.zoom-out::before {
  transform: scale(1);
  /* 通常サイズに戻す */
}

.about::after {
  content: "";
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.about__wrapper {
  margin: 0 80px;
  padding: 64px 0;
}

.about__container {
  max-width: 1440px;
  margin: 0 auto;

  opacity: 0;
  /* 初期は透明 */
  /* transform: translateY(20px); */
  /* 下に少し移動 */
  transition: opacity 2s ease-out, transform 2s ease-out;
  transition-delay: 0.7s;
  /* フェードインとスライドアップのアニメーションを2秒に設定 */
}

/* .about__container に .visible クラスが追加されたときのスタイル */
.about__container.visible {
  opacity: 1;
  /* 不透明に */
  transform: translateY(0);
  /* 元の位置に戻す */
}



.about--header__wrapper {
  display: flex;
  align-items: baseline;
  margin-bottom: 128px;
}

.about__header {
  color: #fff;
}

.about__header.en {
  font-size: 3.2rem;
}

.about__header.jp {
  font-size: 1.2rem;
  margin-left: 8px;
}

.about--discription {
  color: #fff;
  line-height: 2;
}

.about--discription__wrapper {
  padding: 32px 0;
}

.about--link__wrapper {
  margin-top: 128px;
  display: flex;
  justify-content: end;
}

.about--link__text {
  color: #fff;
  border-bottom: 1px solid #fff;
}



@media screen and (max-width:960px) {

  /*画面サイズが960pxからはここを読み込む*/
  .about__wrapper {
    margin: 0 24px;
    padding: 48px 0 64px;
  }

  .about {
    background-size: cover;
  }

  .about--header__wrapper {
    margin-bottom: 0;
  }

  .about__header.jp {
    font-size: 1rem;
    margin-left: 8px;
  }

  .about--discription {
    font-size: 1.4rem;
  }

  .about--link__text {
    font-size: 1.2rem;
    margin-right: 16px;
  }
}

/* アバウト終わり */