@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap"); /* Google FontsからJosefin Sansをインポート */
.bg {
  display: flex; /* フレックスボックスを使用 */
  flex-direction: column; /* 子要素を縦方向に配置 */
  justify-content: center; /* 子要素を中央に配置 */
  position: relative; /* 相対位置 */
  overflow: hidden; /* 内容のはみ出しを隠す */
  width: 100%; /* 幅を全幅に設定 */
  height: 100vh; /* 高さを全高に設定 */
  color: #0b0b0b; /* テキストの色を白に設定 */
}

.bg.-visible:before {
  transform: translate(0, 0); /* 見える状態の時の変形を設定 */
}

.bg:before {
  display: block; /* ブロック要素として表示 */
  position: absolute; /* 絶対位置 */
  top: 0; /* 上からの位置を0に設定 */
  left: 0; /* 左からの位置を0に設定 */
  width: 100%; /* 幅を全幅に設定 */
  height: 100%; /* 高さを全高に設定 */
  background-color: #91ef99; /* 背景色を設定 */
  transform: translate(0, 100%); /* 初期状態の変形を設定 */
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s; /* 変形のトランジションを設定 */
  content: ""; /* 空のコンテンツを設定 */
}

/* テキストのスタイル */
.title {
  display: block; /* ブロック要素として表示 */
  color: #fff; /* テキストの色を白に設定 */
  font-family: "Josefin Sans", sans-serif; /* フォントファミリーを設定 */
  text-align: center; /* テキストを中央揃えに設定 */
}

.title span {
  display: block; /* ブロック要素として表示 */
  opacity: 0; /* 不透明度を0に設定 */
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity linear 0.7s; /* トランジションを設定 */
}

.title span:first-child {
  transform: translate(0, 40px); /* 初期状態の変形を設定 */
  font-size: 50px; /* フォントサイズを設定 */
  transition-delay: 0.25s; /* トランジションの遅延を設定 */
}

.title span:last-child {
  margin-top: 18px; /* 上部の余白を設定 */
  transform: translate(0, 30px); /* 初期状態の変形を設定 */
  font-size: 100px; /* フォントサイズを設定 */
  transition-delay: 0.45s; /* トランジションの遅延を設定 */
}

.bg.-visible .title span {
  opacity: 1; /* 不透明度を1に設定 */
  transform: translate(0, 0); /* 変形をリセット */
}

/****** Base style. ******/
body {
  margin: 0; /* マージンを0に設定 */
}

.default-card-color {
  border: 2px solid #3498db; /* デフォルトの青色の枠 */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.has-border-warning {
  border: 2px solid #ffae00; /* RUNTECKERのための黄色の枠 */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.anime-overlay {
  position: relative;
  width: 100%;
  height: 30px;
}

.block {
  width: 0;
  height: 50px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(0);
  transition: width 0.5s ease, transform 0.5s ease;
}

.highlighted-text {
  position: relative;
  font-size: 22px; /* テキストサイズを調整 */
  color: rgb(11, 11, 11); /* テキスト色を設定 */
}

.block.-visible {
  width: 200px;
  transform: translateY(-50%) translateX(0);
}

.block.-shrink {
  width: 0;
  transform: translateY(-50%) translateX(200px);
}