@charset "utf-8";

body {
  font-family: serif;
  background-color: #333;
  color: #fff;
}

*,
*::before,
*::after {
  box-sizing: content-box;
}

header {
  padding: 50px;
}

/*  */
@keyframes titleAnimation {
  0% {
    letter-spacing: .3em;
    opacity: 0;
  }
}
header h1 {
  font-size: 70px;
  font-weight: bold;
  margin-bottom: 60px;
  white-space: nowrap;
  animation: titleAnimation 1.5s;
}

main {
  max-width: 1000px;
  width: 100%;
  margin: 50px auto;
}


/* 下からふわっと表示 start */
/* .contents li {
  position: relative;
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}
.contents li.show {
  opacity: 1;
  transform: none;
} */
/* 下からふわっと表示 end */


/* パーツごとにふわっと表示 start */
.contents li {
  position: relative;
}

.contents li.show h2,
.contents li.show p,
main .contents li.show img  /* 読み込みの優先度を上げるために[main]つけた */ {
  transform: none;
  opacity: 1;
}

.contents h2 {
  opacity: 0;
  transform: translateY(20px); /* 下から */
  transition: 1s;
}

.contents p {
  opacity: 0;
  /* transform: translateX(20px); */ /* 右横から */
  transform: translateY(20px); /* 下から */
  transition: 1s;
}

/* 下から */
/* .contents img {
  opacity: 0;
  transform: translateX(-20px);
  transition: 1s;
} */

/* 奇数 左下から 0.5秒遅れて表示 */
.contents li:nth-of-type(odd) img {
  opacity: 0;
  transform: translate(-20px, 20px);
  transition: 1s .5s;
}

/* 偶数 右下から 0.5秒遅れて表示 */
.contents li:nth-of-type(even) img {
  opacity: 0;
  transform: translate(20px, 20px);
  transition: 1s .5s;
}
/* パーツごとにふわっと表示 end */


.contents li:not(:first-of-type) {
  margin-top: 200px;
}

.contents li:nth-of-type(odd) .contentsText {
  right: 0;
}

.contents li:nth-of-type(even) .contentsText {
  display: flex;
  align-items: start;
}

.contents li:nth-of-type(even) img {
  margin-left: auto;
}

.contents .contentsText {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  top: 40px;
}

.contents h2 {
  font-size: 50px;
  font-weight: bold;
  white-space: nowrap;
  background-color: rgba(20, 20, 20, .8);
  padding: 10px 20px;
  line-height: 1.4;
  letter-spacing: .05em;
  border-radius: 5px;
}

.contents p {
  line-height: 1.6;
  background-color: #555;
  font-stretch: 14px;
  max-width: 340px;
  padding: 15px;
  margin-top: 30px;
  background-repeat: 5px;
}

.contents img {
  display: block;
  width: 70%;
  border-radius: 5px;
}