@charset "utf-8";

#main-area{
	background-image: url('../img/background/race_img.PNG'); /* 背景画像のパス */
	background-repeat: repeat-y; /* 縦方向に画像を繰り返す */
	background-position: left top; /* 画像を左上に配置 */
	background-size: 3% auto; 
}

.profile {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0;
}

/* プロフィール画像のアニメーション */
.anime-image {
  position: relative;
  width: 45%; /* 必要に応じて調整 */
  aspect-ratio: 1 / 1; /* 縦横比を1:1にする */
  overflow: hidden; /* 画像がコンテナからはみ出さないように */
}

.anime-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
	object-fit: contain; /* 縦横比を維持し、全体を表示 */
  /* アニメーションの設定を変更 */
	 animation: fadeInOut 12s ease-in-out forwards;
}

.anime-image img.fixed {
  opacity: 1; /* 1つ目の画像は常に表示される */
  animation: none; /* 1つ目の画像にはアニメーションを適用しない */
}

.anime-image img:nth-child(2) {
  animation-delay: 1s; /* 2秒後に表示 */
}

.anime-image img:nth-child(3) {
  animation-delay: 2s; /* 4秒後に表示 */
}

.anime-image img:nth-child(4) {
  animation-delay: 3s; /* 6秒後に表示 */
}

/*========= 本文のレイアウト =========*/
.text-content {
width: 45%;
box-sizing: border-box; /* paddingも含めて要素が収まるように */
text-align: left; /* 必要に応じて中央揃え */
padding: 20px;
}

/*========= sns iconのレイアウト =========*/
#sns-text ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
}

#sns-text ul li {
	margin: 20px 10px;
}

#sns-text ul li a img {
	width: 40px;
	height: auto;
}

@keyframes fadeInOut {
  0%, 15% { opacity: 0; }   /* 最初は非表示 */
  20%, 100% { opacity: 1; } /* 最後に非表示にする */
}


/* スマホ用のレイアウト調整 */
@media (max-width: 768px) {
  h3{
    margin: 0;
  }
  
  .profile {
      display: flex;
      flex-direction: column; /* 縦並び */
      align-items: stretch; /* 要素を横幅いっぱいにする */
      padding: 0;
  }
  
  .profile img {
    width: 100%;
    object-fit: cover; /* 必要に応じて画像の表示方法を調整します */
    /* padding:20px; */
  }
  
  .profile .text-content {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    order: 2; /* テキストを画像の下に配置 */
    width: 100%; /* テキストも横幅いっぱいに */
    box-sizing: border-box; /* paddingも含めて要素が収まるように */
    text-align: left; /* 必要に応じて中央揃え */
    padding: 20px;
  }
  
  .profile .textbox {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  .anime-image {
  order: 1; /* アニメ画像を最初に表示 */
  width: 100%; /* 横幅いっぱいに広げる */
  margin-bottom: 20px; /* 下に余白を追加 */
  }
  
  .anime-image img {
      width: 100%; /* 画像が横幅いっぱいになる */
      height: auto;
  
  }
  }