@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap");

.title {
  display: flex;
  /* ブロック整形コンテキストからはみ出た要素を隠す */
  overflow: hidden;
  color: #aa8f7b;
  font-family: "Josefin Sans", sans-serif;
}

.title span {
  /* title class内のspan要素はブロック要素を生成し，通常のフローでは前後に改行が挿入される */
  display: block;
  /* x軸はそのままで，y軸方向に親要素の1.05倍移動 */
  /* 親要素のコンテンツ領域の高さはspan要素の高さと同じだから，span要素はtitle classの下にtitle classの高さの0.05倍だけ移動した位置に配置され，表示されなくなる */
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.title.-visible span {
  transform: translate(0, 0);
}

.title span:nth-child(2) {
  transition-delay: 0.06s;
}
.title span:nth-child(3) {
  transition-delay: 0.12s;
}
.title span:nth-child(4) {
  transition-delay: 0.18s;
}
.title span:nth-child(5) {
  transition-delay: 0.24s;
}
.title span:nth-child(6) {
  transition-delay: 0.30s;
}
.title span:nth-child(7) {
  transition-delay: 0.36s;
}
.title span:nth-child(8) {
  transition-delay: 0.42s;
}
.title span:nth-child(9) {
  transition-delay: 0.48s;
}
.title span:nth-child(10) {
  transition-delay: 0.54s;
}

body {
  /* body要素の内部要素の表示種別を指定する */
  /* 内部要素はブロック要素のように動作しつつ，そのコンテンツをフレックスボックスモデルに従ってレイアウトする */
  display: flex;
  /* body要素のコンテンツ領域の高さをビューポート高さの100%にする */
  /* height: 100vh; */
  /* フレックスコンテナーの主軸に沿って，中身のアイテムの間や周囲に間隔を配置する方法を定義する */
  /* アイテムを中央に寄せる */
  justify-content: center;
  /* フレックスボックスでは交差軸方向のアイテムの配置を制御する */
  /* アイテムを中央付近にまとめる */
  align-items: center;
  /* マージン領域を0にする */
  margin: 0;
}