.section__wrapper {
  padding: 64px 80px;

}

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

.header__en {
  font-size: 3.2rem;
}

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


.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
  font-size: 128px;
}

/* フェードインアニメーションの定義 */
@keyframes fadeIn {
  0% {
    transform: translateY(2px);
    /* 少し下から上に移動 */
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    /* 元の位置に戻す */
  }
}




/* アバウト */
.about__title {
  font-size: 6.4rem;
  margin: 128px 0 96px;
  line-height: 0.8;
}

.about__title--span {
  font-size: 3.2rem;
}

.about__description {
  display: flex;
  align-items: center;
}

.about__description--text {
  flex-basis: 30%;
  /* flexアイテムの幅を割合で指定 */
  margin: 0 24px 0;
  line-height: 2;
}

.about__profile {
  flex-basis: 70%;
  /* flexアイテムの幅を割合で指定 */
}

.about__profile--image {
  margin-left: 80px;
  width: 100vw;
}

@media screen and (max-width: 960px) {
  .section__wrapper {
    padding: 48px 24px;
  }

  .about__title {
    font-size: 3.2rem;
    margin: 0;
  }

  .about__title--span {
    font-size: 1.6rem;
  }

  .about__profile--image {
    margin-left: 104px;
    /* 80px + 24px */
    width: 100vw;
  }

  .about__description {
    flex-direction: column-reverse;
    margin-top: 64px;
  }

  .about__description--text {
    margin: 0;
    flex-basis: unset;
    margin-top: 24px;
    font-size: 1.4rem;
  }

  .about__profile {
    flex-basis: unset;
  }

  .about__profile--image {
    margin-left: 0;
    width: 100%;
  }

}

/* アバウト終わり */


/* バイオグラフィー */
.biography {
  background-color: #595959;

}

.section__header {
  display: flex;
  align-items: baseline;
  margin-bottom: 64px;
}

.biography .header__en,
.biography .header__jp,
.biography p {
  color: #fff;
}


/* バイオグラフィー タイムライン */
.timeline * {
  color: #fff;
}

.timeline--item {
  display: flex;
}

.timeline--date {
  margin-right: 24px;
  margin-bottom: 64px;
  margin-top: 64px;
  opacity: 0;
}


.biography__timeline {
  display: flex;
  justify-content: center;
}

.timeline--event {
  position: relative;
  padding-left: 32px;
  padding-top: 64px;
}

.fade-in-text {
  opacity: 0;
}

/* アニメーションを適用する要素のスタイル */

.timeline--event .fade-in-text.is-visible {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
  /* 2秒間のフェードインアニメーション */
  animation-delay: 1.2s;
}

.timeline--date.fade-in-date.is-visible {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
  /* 2秒間のフェードインアニメーション */
  animation-delay: 1.2s;
}


.timeline--event.is-visible::after {
  content: '';
  width: 0;
  height: 1px;
  position: absolute;
  left: 0;
  top: 80px;
  animation: drawLine-x 0.8s ease-in-out forwards;
}

.timeline--item:nth-child(1) .timeline--event.is-visible::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 700%;
  animation: drawLine 1.4s ease-in-out forwards;
  /* アニメーションが1回だけ実行されるように設定 */
}

@media screen and (max-width: 960px) {
  .section__header {
    margin-bottom: 32px;
  }

  .timeline--event p {
    font-size: 1.4rem;
  }

  .timeline--event {
    position: relative;
    padding-left: 32px;
    padding-top: 24px;
  }

  .timeline--date {
    margin-right: 24px;
    margin-bottom: 48px;
    margin-top: 24px;
    font-size: 1.4rem;
  }

  .timeline--event.is-visible:after {
    content: '';
    width: 0;
    height: 1px;
    position: absolute;
    left: 0;
    top: 38px;
    animation: drawLine-x 0.8s ease-in-out forwards;
    opacity: 1;
  }

}



/* アニメーションを上から下に流れるように設定 */
@keyframes drawLine {
  0% {
    height: 0;
    background-color: #fff;
  }

  100% {
    height: 700%;
    background-color: #fff;
    opacity: 1;
  }
}


@keyframes drawLine-x {
  0% {
    background-color: #fff;
  }

  100% {
    width: 24px;
    background-color: #fff;
  }
}

/* 各イベントのアニメーション開始を遅延させて、連続的な流れを作成 */
.timeline--item:nth-child(1) .timeline--event::after {
  animation-delay: 1s;
}

.timeline--item:nth-child(2) .timeline--event::after {
  animation-delay: 1.1s;
  /* 0.5秒遅延 */
}

.timeline--item:nth-child(3) .timeline--event::after {
  animation-delay: 1.2s;
  /* 1秒遅延 */
}

.timeline--item:nth-child(4) .timeline--event::after {
  animation-delay: 1.3s;
  /* 1.5秒遅延 */
}

.timeline--item:nth-child(5) .timeline--event::after {
  animation-delay: 1.4s;
  /* 2秒遅延 */
}

.timeline--item:nth-child(6) .timeline--event::after {
  animation-delay: 1.5s;
  /* 2.5秒遅延 */
}

.timeline--item:nth-child(7) .timeline--event::after {
  animation-delay: 1.6s;
  /* 3秒遅延 */
}

/* /* バイオグラフィー タイムライン 終わり */
/* バイオグラフィー終わり */



/* スキル */
.skills--items {
  background-color: #eeee;
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 32px;
  width: calc((100% - 96px) / 3);
}

.skills--items__container {
  display: flex;
  justify-content: space-between;
}

.skills--items__img {
  /* margin: 0 auto;
  padding: 24px; */
  max-width: 50%;
  display: flex;
  justify-content: center;
}

.skills .header__en,
.skills .header__jp,
.skills p {
  color: #595959;
}

.skills .header__en,
.skills .header__jp {
  margin: 0;
  text-align: center;
}

.skills .header__en {
  margin: 0;
  text-align: center;
}

.skills .header__jp {
  margin-left: 8px;
}

.skills--items__header {
  margin-bottom: 48px;
}

.skills--items__header .header__en {
  font-size: 2.4rem;
}

.skills--items__header .header__jp {
  font-size: 1.2rem;
  margin: 0;
}

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



  /* タイムライン */
  .timeline--event p {
    font-size: 1.4rem;
  }

  /* タイムライン終わり */

  .skills--items__container {
    flex-direction: column;
  }

  .skills--items {
    padding: 32px;
    width: calc(100% - 128px);
    align-items: center;
    margin: 0 auto 32px;
  }

  .skills--items:last-child {
    margin-bottom: 0;
  }

  .skills--items__description p {
    font-size: 1.4rem;
  }

}

/* スマホ */
@media screen and (max-width: 560px) {
  .timeline--item:nth-child(1) .timeline--event.is-visible::before {
    width: 0;
  }

  .timeline--event.is-visible:after {
    top: 0;
    left: -32px;
  }

  .skills--items {
    width: 100%;
  }

  .timeline {
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }

  .timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    opacity: 0;
    /* 線の幅 */
    height: 100%;
    /* 線の高さを親要素と同じにする */
    background-color: #fff;
    /* 線の色 */
    transform-origin: top;
    /* アニメーションの起点を上に設定 */
    animation: drawBorder 2s ease-in-out forwards;
    /* アニメーションを適用 */
  }

  /* border-leftを下に描くアニメーション */
  @keyframes drawBorder {
    0% {
      transform: scaleY(0);
      /* 初期状態は高さが0 */
      width: 1px;
    }

    100% {
      transform: scaleY(1);
      /* 最終状態は高さが100% */
      opacity: 1;
      width: 1px;
    }
  }



  .timeline--item {
    margin-left: 32px;
    flex-direction: column;
  }

  .timeline--date {
    margin-right: 0;
    margin-bottom: 0;
    line-height: 1;
  }

  .timeline--event {
    padding-left: 0;
    padding-top: 0;

  }

  .timeline--event:after {
    left: -32px;
    top: 0;
  }

  .timeline--item:first-child .timeline--date {
    margin-top: 0;
  }

  .timeline--item:nth-child(1) .timeline--event::before {
    all: unset;
  }

  .skills--items__img {
    width: 60%;
  }

}


/* スキル終わり */