@charset "UTF-8";
.p-item-history {
  padding-top: 7.4rem;
  padding-bottom: 18rem;
  background-color: #fafafa;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  .p-item-history {
    overflow-x: hidden;
  }
}
.p-item-history__inner {
  margin: 0 auto;
}
.p-item-history__columns {
  display: grid;
  grid-template-columns: 1fr 6rem 1fr;
  align-items: start;
  margin-top: 16rem;
}
.p-item-history__col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.p-item-history__axis {
  position: relative;
  align-self: stretch;
  margin: -8rem auto;
}
.p-item-history__axis::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0.2rem;
  background: #222;
  transform: translateX(-50%);
}
.p-item-history__cap {
  position: absolute;
  left: 50%;
  width: 1.8rem;
  height: 1.8rem;
  border: 0.2rem solid #222;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  z-index: 2;
}
.p-item-history__cap--top {
  top: 0;
  transform: translate(-50%, -50%);
}
.p-item-history__cap--bottom {
  bottom: 0;
  transform: translate(-50%, 50%);
}
.p-item-history__entry {
  position: relative;
  width: 100%;
}
.p-item-history__connector {
  position: absolute;
  top: 1.8rem;
  left: 0;
  right: 0;
  z-index: 1;
  height: 0.2rem;
  background-image: repeating-linear-gradient(90deg, rgba(34, 34, 34, 0.65), rgba(34, 34, 34, 0.65) 0.4rem, transparent 0.2rem, transparent 0.6rem);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 100% 0.2rem;
}
.p-item-history__connector::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  width: 1.8rem;
  height: 1.8rem;
  background: #222;
  border-radius: 50%;
}
.p-item-history__entry--left .p-item-history__connector {
  left: 0;
  right: -3rem;
  transform-origin: right center;
}
.p-item-history__entry--left .p-item-history__connector::before {
  left: 0;
  right: auto;
}
.p-item-history__entry--left .p-item-history__year {
  margin: auto;
  text-align: left;
  width: 100%;
  left: 8%;
}
.p-item-history__entry--left .p-item-history__year img {
  width: 23rem;
  height: auto;
}
.p-item-history__entry--right .p-item-history__connector {
  left: -3rem;
  right: 0;
  transform-origin: left center;
}
.p-item-history__entry--right .p-item-history__connector::before {
  right: 0;
  left: auto;
}
.p-item-history__entry--right .p-item-history__year {
  margin: auto;
  text-align: right;
  width: 100%;
  right: 8%;
}
.p-item-history__entry--right .p-item-history__year img {
  width: 23rem;
  height: auto;
}
.p-item-history__col--left {
  margin-top: 30rem;
}
.p-item-history__col--left .p-item-history__name {
  text-align: left;
  margin-left: 2.1rem;
}
.p-item-history__col--left .p-item-history__card {
  margin: auto;
}
.p-item-history__col--right .p-item-history__name {
  text-align: right;
  margin-right: 2.1rem;
}
.p-item-history__col--right .p-item-history__card {
  margin: auto;
}
.p-item-history__year {
  font-family: "Adobe Devanagari";
  position: absolute;
  top: -7.2rem;
  margin: 0;
  font-size: 9.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #e8e8e8;
  line-height: 1;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.p-item-history__name {
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 1.8rem;
  line-height: 3.5rem;
  letter-spacing: 0%;
  margin: 2.2rem 0;
  color: #000;
}
.p-item-history__text {
  margin: 2.4rem 1rem 1.2rem 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.5rem;
  color: #000;
}
.p-item-history__text span {
  font-weight: 700;
  display: block;
  margin: 1rem 0 1.5rem;
  line-height: 1.5em;
}
.p-item-history__media {
  position: relative;
  aspect-ratio: 4/3;
  background: #d8d8d8;
  overflow: visible;
  display: block;
  width: calc(100% - 2.1rem);
  height: calc(100% - 1.6rem);
}
.p-item-history__img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}
.p-item-history__hatch {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: block;
  max-width: none;
  max-height: none;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: top left;
  transform: scale(0.22);
  width: calc(100% / 0.22);
  height: calc(100% / 0.22);
}
.p-item-history__media--left {
  margin-left: 2.1rem;
  margin-top: 1.6rem;
}
.p-item-history__media--left .p-item-history__hatch {
  left: -2.1rem;
  top: -1.6rem;
}
.p-item-history__media--right {
  margin-right: 2.1rem;
  margin-bottom: 1.6rem;
}
.p-item-history__media--right .p-item-history__hatch {
  right: -2.1rem;
  bottom: -1.6rem;
  transform-origin: bottom right;
}
.p-item-history__more {
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 700;
  color: #000;
  padding: 0.6rem 1rem;
  background: rgba(130, 216, 213, 0.75);
  margin: 0 1rem;
}
.p-item-history__more::after {
  content: "→";
}
.p-item-history__col--left .p-item-history__more {
  margin-left: 2.1rem;
  margin-right: auto;
}
.p-item-history__col--right .p-item-history__more {
  margin-left: auto;
  margin-right: 2.1rem;
}

/* =========================
  SP
========================= */
@media (max-width: 767px) {
  .p-item-history {
    padding-bottom: 13rem;
  }
  .p-item-history .p-item-history__axis.pc {
    display: none;
  }
  .p-item-history .p-item-history__axis.sp {
    display: block;
  }
  .p-item-history__columns {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8rem;
    margin-top: 10rem;
    margin-left: 1.5rem;
  }
  .p-item-history__columns .p-item-history__year img {
    width: 17rem;
  }
  .p-item-history__year {
    top: -7.5rem;
  }
  .p-item-history__more {
    margin-left: auto;
    margin-right: 1rem;
  }
  .p-item-history__col--left .p-item-history__more, .p-item-history__col--right .p-item-history__more {
    margin-left: auto;
    margin-right: 1rem;
  }
  .p-item-history .p-item-history__axis.sp {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: -6rem 0;
    align-self: auto;
  }
  .p-item-history__col {
    display: contents;
  }
  .p-item-history__col--left {
    margin-top: 0;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(1) {
    order: 1;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(1) {
    order: 2;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(2) {
    order: 3;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(2) {
    order: 4;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(3) {
    order: 5;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(3) {
    order: 6;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(4) {
    order: 7;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(4) {
    order: 8;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(5) {
    order: 9;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(5) {
    order: 10;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(6) {
    order: 11;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(6) {
    order: 12;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(7) {
    order: 13;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(7) {
    order: 14;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(8) {
    order: 15;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(8) {
    order: 16;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(9) {
    order: 17;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(9) {
    order: 18;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(10) {
    order: 19;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(10) {
    order: 20;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(11) {
    order: 21;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(11) {
    order: 22;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(12) {
    order: 23;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(12) {
    order: 24;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(13) {
    order: 25;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(13) {
    order: 26;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(14) {
    order: 27;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(14) {
    order: 28;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(15) {
    order: 29;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(15) {
    order: 30;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(16) {
    order: 31;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(16) {
    order: 32;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(17) {
    order: 33;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(17) {
    order: 34;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(18) {
    order: 35;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(18) {
    order: 36;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(19) {
    order: 37;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(19) {
    order: 38;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(20) {
    order: 39;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(20) {
    order: 40;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(21) {
    order: 41;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(21) {
    order: 42;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(22) {
    order: 43;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(22) {
    order: 44;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(23) {
    order: 45;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(23) {
    order: 46;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(24) {
    order: 47;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(24) {
    order: 48;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(25) {
    order: 49;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(25) {
    order: 50;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(26) {
    order: 51;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(26) {
    order: 52;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(27) {
    order: 53;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(27) {
    order: 54;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(28) {
    order: 55;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(28) {
    order: 56;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(29) {
    order: 57;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(29) {
    order: 58;
  }
  .p-item-history .p-item-history__col--right > .p-item-history__entry:nth-child(30) {
    order: 59;
  }
  .p-item-history .p-item-history__col--left > .p-item-history__entry:nth-child(30) {
    order: 60;
  }
  .p-item-history__connector {
    left: 0 !important;
    right: 0 !important;
  }
  .p-item-history__connector::before {
    right: 0 !important;
    left: auto !important;
  }
  .p-item-history .p-item-history__col--left .p-item-history__connector {
    transform-origin: left center;
  }
  .p-item-history__entry {
    padding-left: 3rem;
  }
  .p-item-history__media {
    width: calc(100% - 2.6rem);
    height: calc(100% - 1.3rem);
  }
  .p-item-history .p-item-history__media--left {
    margin-left: 2.6rem;
    margin-top: 1.3rem;
  }
  .p-item-history .p-item-history__media--left .p-item-history__hatch {
    left: -2.6rem;
    top: -1.3rem;
  }
  .p-item-history__media--right {
    margin-right: 2.6rem;
    margin-bottom: 1.3rem;
  }
  .p-item-history__media--right .p-item-history__hatch {
    right: -2.6rem;
    bottom: -1.3rem;
    top: auto;
    left: auto;
    transform-origin: bottom right;
    width: calc((100% / 0.22) + 8rem);
    height: calc(100% / 0.22);
  }
}
/* =========================
  アニメーション
========================= */
#twenty-anniv-history .p-item-history__axis::before {
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform 5s ease, opacity 0.2s ease;
  will-change: transform;
}
#twenty-anniv-history.is-axis-draw .p-item-history__axis::before {
  transform: translateX(-50%) scaleY(1);
  opacity: 1;
}
#twenty-anniv-history.is-axis-draw .p-item-history__cap {
  opacity: 1;
}

.p-item-history__connector {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

.p-item-history__entry.is-connector-draw .p-item-history__connector {
  transform: scaleX(1);
  opacity: 1;
}