@layer page {
  .history {
    color: #333333;
    font-feature-settings: normal;
  }
  @media screen and (min-width: 768px) {
    .p-hdr-page__ttl {
      min-height: 10.4em;
    }
  }
  @media screen and (max-width: 767px) {
    .p-hdr-page__ttl .is-125 {
      min-height: 7.2em;
    }
  }
  .history-unit {
    margin-top: 5.625rem;
  }
  @media screen and (max-width: 767px) {
    .history-unit {
      margin-top: 10.2564102564vw;
    }
  }
  .history-unit-b {
    margin-top: 4.0625rem;
  }
  @media screen and (max-width: 767px) {
    .history-unit-b {
      margin-top: 10.2564102564vw;
    }
  }
  .history-unit-a {
    margin-top: 3.5rem;
  }
  @media screen and (max-width: 767px) {
    .history-unit-a {
      margin-top: 10.2564102564vw;
    }
  }
  @media screen and (min-width: 768px) {
    .history-sec + .history-sec {
      margin-top: 6rem;
      padding-top: 4rem;
      border-top: 1px solid #D0CECE;
    }
  }
  @media screen and (max-width: 767px) {
    .history-sec + .history-sec {
      margin-top: 28.2051282051vw;
    }
  }
  @media screen and (min-width: 768px) {
    .history-row {
      display: grid;
      grid-template-columns: 1fr 34.125rem;
      gap: 3rem;
    }
  }
  @media screen and (max-width: 767px) {
    .history-row {
      display: flex;
    }
  }
  @media screen and (max-width: 767px) {
    .history-row {
      flex-direction: column-reverse;
      gap: 7.6923076923vw;
    }
  }
  @media screen and (min-width: 768px) {
    .history-row2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem;
    }
  }
  @media screen and (max-width: 767px) {
    .history-row2 {
      display: flex;
      flex-direction: column;
      gap: 6.6666666667vw;
    }
  }
  @media screen and (min-width: 768px) {
    .history-row3 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem;
    }
  }
  @media screen and (max-width: 767px) {
    .history-row3 {
      display: flex;
      flex-direction: column;
      gap: 6.6666666667vw;
    }
  }
  .history-hdr {
    margin-bottom: 2.125rem;
    color: var(--accent);
    letter-spacing: 0.3em;
  }
  @media screen and (max-width: 767px) {
    .history-hdr {
      margin-bottom: 5.641025641vw;
    }
  }
  .history-hdr__year {
    line-height: 1.1;
    margin-bottom: 1rem;
  }
  @media screen and (max-width: 767px) {
    .history-hdr__year {
      margin-bottom: 2.5641025641vw;
      font-size: 3.8461538462vw;
    }
  }
  .history-hdr__ttl {
    font-size: 1.5rem;
  }
  @media screen and (max-width: 767px) {
    .history-hdr__ttl {
      font-size: 4.6153846154vw;
      line-height: 1.7777777778;
    }
  }
  .history-text {
    font-family: var(--sans-serif);
    line-height: 2.2666666667;
    text-align: justify;
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
  }
  @media screen and (max-width: 767px) {
    .history-text {
      font-size: 3.3333333333vw;
      line-height: 2.1538461538;
    }
  }
  .history-text p + p {
    margin-top: 1.625rem;
  }
  @media screen and (max-width: 767px) {
    .history-text p + p {
      margin-top: 4.1025641026vw;
    }
  }
  .history-fig {
    position: relative;
  }
  @media screen and (min-width: 768px) {
    .history-fig {
      padding-top: 2.5rem;
    }
  }
  @media screen and (min-width: 768px) {
    .history-fig img {
      width: 100%;
    }
  }
  .history-fig__year {
    position: absolute;
    writing-mode: vertical-lr;
    transform: translateX(1.8125rem);
    letter-spacing: 0.2em;
    right: 0;
    top: 0;
    font-size: 2.8125rem;
    font-family: var(--en-serif);
    color: var(--accent);
    line-height: 1;
  }
  @media screen and (max-width: 767px) {
    .history-fig__year {
      transform: translate(3.8461538462vw, -10.2564102564vw);
      font-size: 7.6923076923vw;
    }
  }
  .history-fig__year span {
    display: inline-block;
    margin: 0.375rem 0;
    text-indent: -999px;
    overflow: hidden;
    height: 2.5rem;
    width: 1px;
    background: var(--accent);
  }
  @media screen and (min-width: 768px) {
    .history-fig__year span {
      transform: translateX(-0.0625rem);
    }
  }
  @media screen and (max-width: 767px) {
    .history-fig__year span {
      height: 6.1538461538vw;
    }
  }
  .history-fig__caption {
    text-align: right;
    color: var(--accent);
    font-family: var(--sans-serif);
    margin-top: 0.5rem;
  }
  @media screen and (max-width: 767px) {
    .history-fig__caption {
      font-size: 2.8205128205vw;
    }
  }
  .history-cont {
    font-size: 0.8125rem;
    font-family: var(--sans-serif);
    border-top: 1px solid #D0CECE;
  }
  @media screen and (max-width: 767px) {
    .history-cont + .history-cont {
      border-top: 0;
    }
  }
  .history-cont__item {
    border-bottom: 1px solid #D0CECE;
  }
  @media screen and (min-width: 768px) {
    .history-cont__item {
      display: grid;
      grid-template-columns: 6.625rem 1fr;
      gap: 1rem;
      padding: 0.9375rem 0;
    }
  }
  @media screen and (max-width: 767px) {
    .history-cont__item {
      padding: 3.0769230769vw 0 3.8461538462vw 0;
      font-size: 2.8205128205vw;
    }
  }
  .history-cont__date {
    display: flex;
    grid-template-columns: 3.75rem 1fr;
    gap: 0.8125rem;
  }
  .history-cont__date > * {
    display: block;
  }
  @media screen and (max-width: 767px) {
    .history-cont__date {
      margin-bottom: 2.0512820513vw;
    }
  }
  .history-cont__text {
    line-height: 2;
    letter-spacing: 0.1em;
  }
  .history-person,
  .history-person-a {
    font-family: var(--sans-serif);
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .history-person__name,
  .history-person-a__name {
    color: var(--accent);
    margin-bottom: 1.5384615385vw;
    font-size: 3.8461538462vw;
  }
  @media screen and (min-width: 768px) {
    .history-person__name,
    .history-person-a__name {
      margin-bottom: 0.875rem;
      font-size: 1.125rem;
    }
  }
  @media screen and (min-width: 768px) {
    .history-person__wtext {
      width: 15.125rem;
    }
  }
  @media screen and (max-width: 767px) {
    .history-person__wtext {
      width: 51.2820512821vw;
    }
  }
  .history-person__text {
    line-height: 2;
    text-align: justify;
    letter-spacing: 0.02em;
  }
  @media screen and (min-width: 768px) {
    .history-person__text {
      font-size: 0.8125rem;
    }
  }
  @media screen and (min-width: 768px) {
    .history-person__text {
      font-size: 0.8125rem;
    }
  }
  @media screen and (max-width: 767px) {
    .history-person__text {
      font-size: 2.8205128205vw;
    }
  }
  @media screen and (min-width: 768px) {
    .history-person__photo {
      width: 14.0625rem;
    }
  }
  @media screen and (max-width: 767px) {
    .history-person__photo {
      width: 26.6666666667vw;
    }
  }
  @media screen and (min-width: 768px) {
    .history-person-a__photo {
      width: 14.0625rem;
    }
  }
  @media screen and (max-width: 767px) {
    .history-person-a__photo {
      width: 26.6666666667vw;
    }
  }
  @media screen and (min-width: 768px) {
    .history-person-a__wtext {
      width: 48.5rem;
    }
  }
  @media screen and (max-width: 767px) {
    .history-person-a__wtext {
      width: 51.2820512821vw;
    }
  }
  @media screen and (min-width: 768px) {
    .history-person-a__text {
      line-height: 2.2666666667;
      font-size: 0.9375rem;
    }
  }
  @media screen and (max-width: 767px) {
    .history-person-a__text {
      font-size: 2.8205128205vw;
    }
  }
}