body {
  margin: 0 auto;
  font-family: sans-serif;
  background: #000;
  color: #fff;
  line-height: 1.8;
  max-width: 1200px;
}

.container {
  max-width: 630px;
  margin: 0 auto;
  padding: 40px 20px 150px;
}

/* 表示切替 */
.pc-only { display: block; }
.sp-only { display: none; }

/* ヒーロー */
.hero {
padding:0 10px;
}
.hero img {
  width: 100%;
  display: block;
}

/* ギャラリー */
.gallery {
  display: flex;
  gap: 10px;
  padding: 0 10px;
}

.gallery img {
  width: calc(25% - 7.5px);
}

/* タイトル */
.title {
  text-align: center;
  padding: 60px 20px 20px;
}

.title h1 {
  font-size: 42px;
  margin: 0;
}

.title p {
  color: #aaa;
  letter-spacing: 2px;
}

/* 年表 */
.timeline-wrap {
  position: relative;
  overflow: visible;
}

.timeline-item {
  margin-bottom: 40px;
  max-width: 600px;
}

.timeline-item img {
  width: 100%;
  margin-top: 10px;
  border-radius: 6px;
}

/* PC浮かせ画像 */
.float-img {
  position: absolute;
  width: 140px;
}

.float-img img {
  width: 100%;
}

/* 左ライン */
.img1, .img3, .img5, .img7, .img10,  .img14 {
  left: -140px;
}

/* 右ライン */
.img2, .img4, .img6, .img8, .img9, .img11, .img12, .img13,.img15, .img16 {
  right: -140px;
}

/* 詰めた配置 */
.img1 {top: 40px;}
.img2 {top: 40px;}
.img3 {top: 240px;}
.img4 {top: 200px;}
.img5 {top: 440px;}
.img6 {top: 430px;}
.img7 {top: 660px;}
.img8 {top: 720px;}
.img9 {top: 844px;}
.img10 {top: 940px;}
.img11 {top: 950px;}
.img12 {top: 851px;right: 180px;}
.img13 {top: 850px;right: 20px;}
.img14 {top: 1060px;}
.img15 {top: 1137px;right: 20px;}
.img16 {top: 1090px;}

/* スマホ */
@media (max-width: 767px) {


  .pc-only { display: none; }
  .sp-only { display: block; }

  .container {
    padding: 40px 20px;
}

  .timeline-item {
    max-width: 100%;
  }


  .sp-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }

  .sp-row img {
    width: 49%;
  }

  .sp-small {
    width: 60% !important;
    display: block;
    margin: 10px auto 0;
  }


}