.p-history {
  --color-red: #9d0610;
  color: #000;
  letter-spacing: 0;
}

.p-history .c-detail-hero__title p {
  letter-spacing: 0.02em;
}

.p-history .c-detail-hero__title h1 {
  letter-spacing: 0.18em;
}

.p-history__timeline {
  padding: 6.25rem 0 5.625rem;
}

.p-history__timeline > h2, .p-history__future h2 {
  font-family: var(--font-serif);
  font-size: calc(35 / 16 * 1rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.p-history__timeline-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 36.25rem));
  gap: 2.5rem;
  margin-top: 4.375rem;
}

.p-history__timeline ol {
  position: relative;
}

.p-history__timeline li {
  display: grid;
  position: relative;
  grid-template-columns: 6.25rem 1fr;
  gap: 3.4375rem;
  min-height: 4.8125rem;
}

.p-history__timeline li::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 7.8125rem;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 50%;
  background: var(--color-red);
  transform: translateX(-50%);
}

.p-history__timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.4375rem;
  bottom: -0.4375rem;
  left: 7.8125rem;
  width: 0.125rem;
  background: var(--color-red);
  transform: translateX(-50%);
}

.p-history__timeline .p-history__item--tall {
  min-height: 9.625rem;
}

.p-history__timeline time {
  color: var(--color-red);
  font-size: calc(18 / 16 * 1rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  text-align: right;
}

.p-history__timeline li p {
  font-size: calc(18 / 16 * 1rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.p-history__photos {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7.5rem 0 9.0625rem;
}

.p-history__photos img {
  display: block;
  width: 100%;
}

.p-history__photo--negative {
  filter: grayscale(1) invert(1) brightness(0.64);
  opacity: 0.32;
}

.p-history__photo-sp {
  display: none;
}

.p-history__future {
  padding: 6.25rem 0 0;
  background: var(--color-gray);
}

.p-history__future .l-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 36.25rem));
  gap: 2.5rem;
  padding-bottom: 6.25rem;
  border-bottom: 0.0625rem solid var(--color-black);
}

.p-history__future .l-container > div:last-child {
  padding-top: 0.625rem;
}

.p-history__future p {
  font-size: calc(18 / 16 * 1rem);
  line-height: 1.667;
  letter-spacing: -0.01em;
}

.p-history__future h2 + p {
  margin-top: 5.3125rem;
}

.p-history__future p + p {
  margin-top: 5.625rem;
}

.p-history__future img {
  display: block;
  width: 100%;
}

.p-history__future img + img {
  margin-top: 2.1875rem;
}

.p-history .c-page-actions {
  background: var(--color-gray);
}

@media (min-width: 768px) {
  .p-history .c-detail-hero__title {
    padding-right: 1.875rem;
  }
}
@media (max-width: 767.98px) {
  .p-history__timeline-inner, .p-history__future .l-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .p-history__timeline > h2, .p-history__future h2 {
    font-size: calc(43.323077 / 16 * 1rem);
  }
  .p-history__timeline li {
    grid-template-columns: 6.4375rem 1fr;
    gap: 2.375rem;
    min-height: 5.625rem;
  }
  .p-history__timeline li::before, .p-history__timeline li:not(:last-child)::after {
    left: 7.1875rem;
  }
  .p-history__timeline .p-history__item--tall {
    min-height: 11.25rem;
  }
  .p-history__timeline li p, .p-history__future p {
    font-size: calc(25.6 / 16 * 1rem);
    line-height: 1.9;
  }
  .p-history__photos {
    display: none;
  }
  .p-history__photo-sp {
    display: block;
    position: relative;
    z-index: 2;
    grid-column: 1/-1;
    margin-bottom: calc(50 / 16 * 1rem);
    background: #fff;
  }
  .p-history__photo-sp img {
    display: block;
    width: 100%;
  }
}
.p-history-hero-title p {
  font-family: var(--font-en);
}

.p-history-breadcrumb {
  font-weight: 500;
}

@media (max-width: 767.98px) {
  .p-history__timeline time {
    font-size: calc(22 / 16 * 1rem);
  }
  .p-history__timeline li {
    grid-template-columns: calc(103 / 16 * 1rem) minmax(0, 1fr);
  }
  .p-history__timeline li > p {
    min-width: 0;
    padding-bottom: calc(25 / 16 * 1rem);
  }
}