@charset "UTF-8";
/* --------------------------------------------------
	section size
-------------------------------------------------- */
.p-history {
  /* sec-history
  ---------------------------------------------------------------------------- */
}
.p-history .c-page-head .l-inner:after {
  background: url("../img/history/page-ttl.jpg") no-repeat center center;
}
.p-history .sec-history {
  padding: 4rem 0 8rem 0;
  box-sizing: border-box;
  /* 左右のカードはクリックで送れるので、ホバーで反応させる */
  /* 隣の非アクティブカードは、コピーがアクティブ時の最大高さを超えたら下端をフェードして見切る。
     （縮小されてもコピーは逆スケールで実寸のまま出るので、放っておくと目盛りまで伸びる） */
  /* 新デザインにカルーセル上の年号は無い。年号はタイムライン側（.current-year）だけ */
  /* カード内のコピー（Figma 3338:10406 / 3338:10399）。
     カード全体は scale で縮むが、文字はデザイン上サイズが変わらない（本文は常に14px、
     見出しだけ 16→24px）ので、逆スケールを掛けて実寸を保つ。幅も視覚上の写真幅に合わせる。 */
  /* 見出しは折り返してすべて出す（省略しない）。枠は2行分を下限に確保する */
  /* 本文は Body/M＝16px（PC/SP共通・docs/typography.md）。長いカードは省略せず全文を出す */
  /* Figma 3338:10402 / 3338:10409：32px の caret を、アクティブカードの左右 16px の位置に置く */
  /* 新デザインではコピーがカード内（.event-copy）に移ったので、カルーセル外の旧コピーは出さない。
     文言は #activeTitle / #activeBody をスクリーンリーダー向けに残す。 */
  /* 目盛りは整数座標に絶対配置する。flexのspace-betweenだと2px幅のバーが端数位置に並び、
     全部同じ高さにした途端モアレになって間隔がバラバラに見える */
  /* Figmaの段差（56/44/36/32）を現在位置に追従させる。縦は56pxの枠の中でセンター */
}
@media screen and (max-width: 767px) {
  .p-history .sec-history {
    padding: 0 0 6rem 0;
  }
}
.p-history .sec-history .l-inner {
  max-width: 120rem;
}
@media screen and (max-width: 767px) {
  .p-history .sec-history .l-inner {
    max-width: inherit;
  }
}
.p-history .sec-history .history-title {
  font-size: 3.2rem;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-history .sec-history .history-title {
    font-size: 2.8rem;
    line-height: 1.4;
    font-weight: 500;
  }
}
.p-history .sec-history .txt {
  color: #808080;
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 400;
}
.p-history .sec-history .history-carousel {
  position: relative;
  /* カルーセルだけ画面幅いっぱいに広げる。左右のカードが .page の1200pxで
     途中で切れると、文字が途中で断ち切られて見えるため */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /*      --card-w: 560px;*/
  --card-w: 420px;
  /*      --nav-top: 286px;*/
  --nav-top: 20.6rem;
  --timeline-top: 478px;
  --active-bar-x: 2.4rem;
  --stage-year-top: 3rem;
  --stage-year-h: 7.6rem;
  padding: 0 0 2.4rem;
  margin-top: 3.2rem;
}
@media screen and (max-width: 767px) {
  .p-history .sec-history .history-carousel {
    --card-w: 100%;
    --nav-top: 5rem;
    --timeline-top: 478px;
  }
}
.p-history .sec-history .stage {
  position: relative;
  height: 70rem; /* JSが実測で上書き（カードの動きに合わせて毎フレーム更新するのでトランジションは持たせない） */
  overflow: hidden;
  cursor: grab;
  /* 奥行きはカードのサイズ差＋下方向のオフセットで表現する（Figma 3338:10391 準拠）。
     回転・パースはデザインに無いのでかけない */
  touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.p-history .sec-history .stage.is-dragging {
  cursor: grabbing;
}
.p-history .sec-history .history-carousel.is-scrubbing .event-card,
.p-history .sec-history .history-carousel.is-scrubbing .event-year,
.p-history .sec-history .history-carousel.is-scrubbing .photo,
.p-history .sec-history .history-carousel.is-scrubbing .timeline-bar,
.p-history .sec-history .history-carousel.is-scrubbing .current-year,
.p-history .sec-history .history-carousel.is-gliding .event-card,
.p-history .sec-history .history-carousel.is-gliding .event-year,
.p-history .sec-history .history-carousel.is-gliding .photo,
.p-history .sec-history .history-carousel.is-gliding .timeline-bar,
.p-history .sec-history .history-carousel.is-gliding .current-year {
  transition: none;
}
.p-history .sec-history .event-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  width: 420px;
  border-radius: 0;
  opacity: var(--opacity, 1);
  transform: translate3d(var(--x, 0), var(--y, 0), var(--depth, 0px)) rotateY(var(--rotate-y, 0deg)) rotateX(var(--rotate-x, 0deg)) scale(var(--scale, 1));
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease;
  z-index: var(--z, 1);
  will-change: transform, opacity;
}
.p-history .sec-history .stage.is-dragging .event-card {
  transition: none;
}
.p-history .sec-history .event-card.is-hidden {
  pointer-events: none;
}
.p-history .sec-history .event-card:not(.is-main) {
  cursor: pointer;
}
.p-history .sec-history .event-card:not(.is-main):hover {
  opacity: calc(var(--opacity, 1) + 0.3);
  opacity: calc(var(--opacity, 1) + 0);
}
.p-history .sec-history .event-card:not(.is-main):hover .photo {
  box-shadow: 0 1.8rem 3rem rgba(0, 0, 0, 0.16);
}
.p-history .sec-history .event-card:not(.is-main) .event-copy {
  /* コピーは逆スケールで実寸表示されるので、見た目の高さを --copy-max に収めるには
     レイアウト上の上限に scale を掛ける */
  max-height: calc(var(--copy-max, 9999px) * var(--scale, 1));
  overflow: hidden;
  /*      -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 72%, transparent 100%);*/
}
.p-history .sec-history .event-year {
  height: var(--year-h, 112px);
  margin: 0 0 var(--year-gap, 20px);
  color: #d81b27;
  font-family: "Noto Serif JP", serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  opacity: var(--year-opacity, 1);
  text-align: center;
  transform: translateY(var(--year-y, 0px)) scale(var(--year-scale, 1));
  transform-origin: center bottom;
  transition: height 680ms cubic-bezier(0.16, 1, 0.3, 1), margin-bottom 680ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease, transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  visibility: hidden;
}
.p-history .sec-history .stage-year {
  display: none;
}
.p-history .sec-history .stage-year--legacy {
  position: absolute;
  top: var(--stage-year-top);
  left: 50%;
  z-index: 1600;
  display: flex;
  width: var(--card-w);
  height: var(--stage-year-h);
  justify-content: center;
  overflow: hidden;
  color: #d81b27;
  font-family: "Noto Serif JP", serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.p-history .sec-history .year-digit {
  display: inline-block;
  width: 0.6em;
  height: 1.2em;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.p-history .sec-history .year-digit-track {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 0, 0);
  transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.p-history .sec-history .stage-year.is-rolling .year-digit-track {
  transform: translate3d(0, calc(var(--roll-steps, 0) * -1.2em), 0);
}
.p-history .sec-history .year-digit-track span {
  display: block;
  height: 1.2em;
  line-height: 1.2;
}
.p-history .sec-history .photo {
  position: relative;
  width: 100%;
  height: var(--photo-h, 294px);
  overflow: hidden;
  background: #c4c4c4;
  box-shadow: 0 1.8rem 3rem rgba(0, 0, 0, var(--photo-shadow, 0));
  transform: translateZ(0);
  transition: height 680ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 680ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media screen and (max-width: 767px) {
  .p-history .sec-history .photo {
    height: 14rem;
  }
}
.p-history .sec-history .photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-history .sec-history .photo.is-contain img {
  -o-object-fit: contain;
     object-fit: contain;
}
.p-history .sec-history .photo.is-logo {
  border: 1px solid #dedede;
  background: #fff;
}
.p-history .sec-history .photo.is-logo img {
  position: absolute;
  top: 12%;
  left: 24%;
  width: 52%;
  height: 76%;
  -o-object-fit: contain;
     object-fit: contain;
}
.p-history .sec-history .photo.is-contain-dark {
  background: #0f030d;
}
.p-history .sec-history .photo.is-contain-dark img {
  -o-object-fit: contain;
     object-fit: contain;
}
.p-history .sec-history .photo.is-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #c4c4c4;
}
.p-history .sec-history .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.p-history .sec-history .event-copy {
  /* 幅はJSが --copy-w（画面上の実寸px）で与える。アクティブカードだけ写真より広げて
     見出し・本文の行数を減らし、カルーセル全体を1画面に収める。
     カードより広くなるので、はみ出す分を左マージンで戻して中央に置く */
  width: var(--copy-w, calc(100% * var(--scale, 1)));
  margin: 2.4rem 0 0;
  margin-left: calc((100% - var(--copy-w, calc(100% * var(--scale, 1)))) / 2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(0.3rem + 0.5rem * var(--front, 0));
  /* 高さは中身なり。以前は「見出し2行＋本文3行」を下限に確保していたが、
     タイムラインがアクティブカードの高さに追従するようになったので、
     下限を持つとその分がそのまま余白として残ってしまう。 */
  transform: scale(calc(1 / var(--scale, 1)));
  transform-origin: top center;
}
.p-history .sec-history .event-copy-title {
  margin: 0;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(1.6rem + 0.8rem * var(--front, 0));
  font-weight: 500;
  line-height: calc(1.8 - 0.4 * var(--front, 0));
  text-align: center;
  overflow-wrap: anywhere;
  /* 日本語は文節単位で折る（「〜し／た」のような不自然な位置で切れないように）。
     未対応ブラウザでは従来どおりの自動折り返しになる */
  word-break: auto-phrase;
  text-wrap: balance;
}
.p-history .sec-history .event-copy-title.is-university {
  font-size: 16px;
}
.p-history .sec-history .event-copy-body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
  /*      word-break: auto-phrase;   /* 文節で折る 
        text-wrap: pretty;         /* 最終行に1〜2文字だけ残さない */
}
.p-history .sec-history .control-row {
  position: absolute;
  inset: 0 0 auto;
  height: 0;
  height: 100%;
  pointer-events: none;
  z-index: 997;
}
.p-history .sec-history .nav-button {
  position: absolute;
  top: var(--nav-top);
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease;
}
.p-history .sec-history .nav-button img {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
}
.p-history .sec-history #prevButton {
  left: max(0.8rem, 50% - var(--card-w) / 2 - 4.8rem);
}
.p-history .sec-history #nextButton {
  left: min(100% - 4rem, 50% + var(--card-w) / 2 + 1.6rem);
}
.p-history .sec-history .nav-button:hover,
.p-history .sec-history .nav-button:focus-visible {
  outline: none;
  opacity: 0.6;
  transform: translateY(-1px);
}
.p-history .sec-history .nav-button:disabled {
  cursor: default;
  opacity: 0.32;
  transform: none;
}
.p-history .sec-history .timeline-control {
  position: absolute;
  top: 55.5rem;
  top: var(--timeline-top);
  top: auto;
  bottom: 0;
  left: 50%;
  width: min(98rem, 100vw - 8rem); /* Figma 3338:10420 の目盛り幅 980px */
  min-width: 0;
  overflow: visible;
  pointer-events: auto;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .p-history .sec-history .timeline-control {
    top: auto;
    bottom: 0;
  }
}
.p-history .sec-history .active-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.p-history .sec-history .active-copy h2 {
  margin: 0 0 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.1rem;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: break-word;
}
.p-history .sec-history .active-copy p {
  margin: 0;
  color: #616161;
  font-size: 1.3rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.p-history .sec-history .timeline-ui {
  position: relative;
  width: min(98rem, 100%);
  margin: 0 auto;
  padding-top: 66px; /* 追従年号の帯 58px + 隙間 8px（Figma 3338:10420 準拠） */
}
.p-history .sec-history .current-year {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  color: #d81b27;
  font-family: "Noto Serif JP", serif;
  font-size: 4.8rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  transform: translateX(-50%);
  transition: opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  white-space: nowrap;
}
.p-history .sec-history .bar-wrap {
  position: relative;
  margin-top: 0;
  height: 5.6rem;
  overflow: visible;
  cursor: pointer;
  touch-action: none;
}
.p-history .sec-history .bar-track {
  position: relative;
  height: 5.6rem;
  pointer-events: none;
}
.p-history .sec-history .bar-end-label {
  position: absolute;
  top: 50%;
  color: #808080;
  font-family: "Noto Serif JP", serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.p-history .sec-history .bar-end-label.is-start {
  left: 0;
}
.p-history .sec-history .bar-end-label.is-end {
  right: 0;
}
.p-history .sec-history .timeline-bar {
  position: absolute;
  top: calc((5.6rem - var(--bar-h, 3.2rem)) / 2);
  display: block;
  width: 2px !important;
  height: var(--bar-h, 3.2rem);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bar-color, #d9d9d9);
  transition: height 180ms cubic-bezier(0.22, 0.61, 0.36, 1), top 180ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-history .sec-history .timeline-bar::before {
  content: "";
  position: absolute;
  inset: -1.2rem -0.4rem;
}
.p-history .sec-history .timeline-bar:hover,
.p-history .sec-history .timeline-bar:focus-visible {
  background: #b7192b;
  outline: none;
}
.p-history .sec-history .timeline-segments {
  position: absolute;
  inset: -1.4rem 0 -1.4rem;
  z-index: 2;
  display: grid;
  background: transparent;
  grid-template-columns: repeat(var(--event-count), minmax(0, 1fr));
}
.p-history .sec-history .timeline-segment {
  min-width: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.p-history .sec-history .timeline-segment:focus-visible {
  outline: 1px solid #d81b27;
  outline-offset: 0.4rem;
}
@media screen and (max-width: 767px) {
  .p-history .sec-history {
    /* 追従年号もSPは1段落とす（48→32px）。帯の高さも文字に合わせて詰める */
    /* PCと同じ見え方にする。40pxだと現在位置の赤バー56pxが枠から上下にはみ出す */
    /* カード見出しはSPだけ1段落とす（Heading/H3/SP＝20px。非アクティブは14px）。
       本文は PC/SP 共通の16pxなのでここでは触らない */
    /* caret は Figma の 32px 固定。SPでもサイズは変えず、はみ出さない位置に寄せるだけ */
  }
  .p-history .sec-history .stage {
    height: 650px;
    height: 37rem;
  }
  .p-history .sec-history .event-card {
    width: min(82vw, 32rem);
  }
  .p-history .sec-history .photo {
    box-shadow: 0 1.2rem 1.8rem rgba(0, 0, 0, var(--photo-shadow, 0));
  }
  .p-history .sec-history .event-year {
    margin-bottom: 1.4rem;
    font-size: 6.4rem;
  }
  .p-history .sec-history .stage-year {
    font-size: 5.4rem;
  }
  .p-history .sec-history .active-copy {
    width: 100%;
    height: 21.4rem;
    padding: 0 1.6rem;
    box-sizing: border-box;
  }
  .p-history .sec-history .active-copy h2 {
    margin-bottom: 2rem;
    font-size: 1.9rem;
    line-height: 1.5;
  }
  .p-history .sec-history .timeline-ui {
    margin: 2rem auto 0;
    padding-top: 6.4rem; /* 年号 40px + 隙間 8px */
  }
  .p-history .sec-history .current-year {
    font-size: 3.2rem;
  }
  .p-history .sec-history .bar-wrap {
    height: 5.6rem;
  }
  .p-history .sec-history .bar-track {
    height: 5.6rem;
  }
  .p-history .sec-history .active-copy p {
    min-height: 0;
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .p-history .sec-history .control-row {
    inset: 0 0 auto;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .p-history .sec-history .control-row {
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  .p-history .sec-history .event-copy-title {
    font-size: calc(1.4rem + 0.6rem * var(--front, 0));
  }
  .p-history .sec-history #prevButton {
    left: max(0px, 50% - var(--card-w) / 2 - 3.6rem);
  }
  .p-history .sec-history #nextButton {
    left: min(100% - 3.4rem, 50% + var(--card-w) / 2 + 0.4rem);
  }
  .p-history .sec-history .timeline-control {
    width: min(420px, 100vw - 32px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-history .sec-history .event-card,
  .p-history .sec-history .event-year,
  .p-history .sec-history .photo,
  .p-history .sec-history .timeline-bar,
  .p-history .sec-history .current-year,
  .p-history .sec-history .active-copy,
  .p-history .sec-history .year-digit-track,
  .p-history .sec-history .nav-button {
    transition: none;
  }
}