@charset "UTF-8";
/* フェードインの初期状態 */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* スクロールして表示された時の状態 */
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 2番目の要素だけ少し遅らせる例 */
.fade-in-up:nth-child(2) {
  transition-delay: 0.2s;
}

.fade-in-up {
  width: 100%; /* 横幅を親要素に合わせる */
  display: block; /* ブロック要素として扱う */
}

/* 添付画像のように文字が中央に寄るのを防ぐ */
.fade-in-up table {
  margin-left: 0;
  margin-right: auto;
  width: 100% !important;
}


/* コンテナの設定 */
.profile-container {
  max-width: 900px;
  margin: 50px auto;
  padding: 0 20px;
}

/* 各行の設定（PCでは横並び、スマホでは縦） */
.profile-item {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee; /* 下線で区切る（テーブルより軽やか） */
  padding: 25px 0;
}

/* ラベル（左側） */
.profile-label {
  flex: 0 0 150px; /* 横幅固定 */
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

/* 内容（右側） */
.profile-content {
  flex: 1;
  color: #666;
  line-height: 1.8;
}

/* スマホ対応（768px以下で縦並び） */
@media screen and (max-width: 768px) {
  .profile-label {
    flex: 0 0 100%;
    margin-bottom: 10px;
  }
}

/* --- パララックス（フェードイン）アニメーション --- */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 順々に表示させるための時間差設定 */
.profile-item:nth-child(1) { transition-delay: 0.1s; }
.profile-item:nth-child(2) { transition-delay: 0.2s; }
.profile-item:nth-child(3) { transition-delay: 0.3s; }
.profile-item:nth-child(4) { transition-delay: 0.4s; }
.profile-item:nth-child(5) { transition-delay: 0.5s; }