/**
 * 沿革・あすなろストーリー — Figma MF_Web History
 * 1440 固定値は history-page-1440.css
 */

.history-page {
  /* Figma 沿革タイムライン色（トークンのみから近似） */
  --history-body-muted: var(--ink-500);
  --history-era-1: color-mix(in srgb, var(--brand-primary) 78%, var(--ink-900));
  --history-era-2: color-mix(in srgb, var(--brand-secondary) 88%, var(--ink-900));
  --history-era-3: color-mix(
    in srgb,
    var(--brand-accent-yellow) 50%,
    var(--brand-accent-orange)
  );
  --history-line: color-mix(in srgb, var(--line-border) 85%, var(--ink-300));
  --history-inner: min(100%, 1100px);
}

/* ----- PageHero（Figma .pagehero） ----- */
.page-hero--history .page-hero__overlay-v,
.page-hero--philosophy .page-hero__overlay-v {
  background: linear-gradient(
    0deg,
    rgba(13, 13, 26, 0.7),
    rgba(0, 0, 0, 0) 50%,
    rgba(13, 13, 26, 0.2)
  );
}

.page-hero--history .page-hero__overlay-h,
.page-hero--philosophy .page-hero__overlay-h {
  background: linear-gradient(
    90deg,
    rgba(13, 13, 26, 0.4),
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0)
  );
}

.page-hero--history .page-hero__bottom-rule {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(237, 187, 5, 0.5) 50%,
    transparent
  );
}

/* 〜1023px — ヒーロー枠全面 cover（React .page-hero__media-img--history） */
.page-hero--history .page-hero__media-img--history {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 1023px) {
  .page-hero--history .page-hero__media-img--history {
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}

/* ----- 3つの創業期 ----- */
.history-page .history-journey {
  background-color: #fff;
  padding: var(--space-16) var(--space-6);
}

.history-page .history-journey__inner {
  max-width: var(--history-inner);
  margin: 0 auto;
}

.history-page .history-journey__header {
  text-align: center;
  margin-bottom: clamp(3rem, 8vw, 6rem);
}

.history-page .history-journey__eyebrow {
  margin: 0 0 var(--space-6);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  line-height: 16.5px;
  letter-spacing: 2.75px;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.history-page .history-journey__title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(1.5rem, calc(1.5rem + 0.5vw), 2rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
}

.history-page .history-journey__timeline {
  position: relative;
}

/* 中央縦線 — トラック（グレー）+ スクロールで載る創業期グラデーション */
.history-page .history-journey__line-stack {
  display: none;
}

.history-page .history-journey__line {
  pointer-events: none;
}

.history-page .history-era__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* 1024px+ — Figma 3カラム（写真 | 80px レール | テキスト） */
@media (min-width: 1024px) {
  .history-page .history-journey__timeline {
    position: relative;
    width: 100%;
    max-width: var(--history-inner);
    margin-inline: auto;
  }

  /* 中央縦線 — 各期グリッドの 80px 列中央（50%）に重ねる */
  .history-page .history-journey__line-stack {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 80px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .history-page .history-journey__line--track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin: 0;
    transform: translateX(-50%);
    background-color: var(--history-line);
  }

  .history-page .history-journey__line-clip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin: 0;
    margin-left: -1px;
    transform-origin: top center;
    overflow: hidden;
    z-index: 1;
    will-change: transform;
    transition: transform 0.15s linear;
  }

  .history-page .history-journey__line--fill {
    width: 2px;
    height: 100%;
    margin-inline: auto;
    background-color: var(--brand-primary);
  }

  .history-page .history-journey__timeline > .history-era {
    margin-bottom: 0;
  }

  .history-page .history-journey__timeline > .history-era + .history-era {
    margin-top: 0;
  }

  .history-page .history-era {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: clamp(360px, 42vw, 437.7px);
  }

  .history-page .history-era__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
    gap: 0;
    width: 100%;
    min-height: clamp(360px, 42vw, 437.7px);
  }

  .history-page .history-era__photo-wrap,
  .history-page .history-era__content-wrap,
  .history-page .history-era__rail {
    min-width: 0;
  }

  .history-page .history-era:not(.history-era--reverse) .history-era__photo-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  .history-page .history-era:not(.history-era--reverse) .history-era__rail {
    grid-column: 2;
    grid-row: 1;
  }

  .history-page .history-era:not(.history-era--reverse) .history-era__content-wrap {
    grid-column: 3;
    grid-row: 1;
  }

  .history-page .history-era--reverse .history-era__content-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  .history-page .history-era--reverse .history-era__rail {
    grid-column: 2;
    grid-row: 1;
  }

  .history-page .history-era--reverse .history-era__photo-wrap {
    grid-column: 3;
    grid-row: 1;
  }
}

/* 1280px+ — Figma 510px | 80px | 510px（1100px インナー） */
@media (min-width: 1280px) {
  .history-page .history-era {
    min-height: 437.7px;
  }

  .history-page .history-era__grid {
    grid-template-columns: minmax(0, 510px) 80px minmax(0, 1fr);
  }
}

.history-page .history-era__photo-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media (min-width: 1024px) {
  .history-page .history-era__photo-wrap {
    justify-content: flex-start;
    padding: clamp(var(--space-6), 4vw, 46px) 0 0 clamp(var(--space-4), 3vw, 50px);
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
  }

  .history-page .history-era--reverse .history-era__photo-wrap {
    justify-content: flex-end;
    padding: clamp(var(--space-6), 4vw, 46px) clamp(var(--space-4), 3vw, 50px) 0 0;
  }
}

.history-page .history-era__photo {
  position: relative;
  width: 100%;
  max-width: min(460px, 100%);
  aspect-ratio: 460 / 345;
  overflow: hidden;
  border-radius: 4px;
}

.history-page .history-era__photo-img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* 1280px+ — Figma 書き出しの写真トリミング位置 */
@media (min-width: 1280px) {
  .history-page .history-era__photo-img--1 {
    top: -0.34px;
    left: -30.5px;
    width: 510px;
    height: 347px;
  }

  .history-page .history-era__photo-img--2 {
    top: -9.03px;
    left: -22.5px;
    width: 551px;
    height: 367px;
  }

  .history-page .history-era__photo-img--3 {
    top: -138.72px;
    left: -53.59%;
    width: 215.43%;
    height: 660px;
  }
}

/* 1024–1279px — 写真の Figma オフセットを抑え、中央列へはみ出さない */
@media (min-width: 1024px) and (max-width: 1279px) {
  .history-page .history-era__photo-img--1,
  .history-page .history-era__photo-img--2,
  .history-page .history-era__photo-img--3 {
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* Figma .container8: 80px 列の中央にノードドット */
.history-page .history-era__rail {
  position: relative;
  display: none;
}

.history-page .history-era__node {
  display: none;
}

@media (min-width: 1024px) {
  .history-page .history-era__rail {
    display: block;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    z-index: 3;
  }

  /* 区切りごとの重複縦線は非表示（中央 .history-journey__line-stack に一本化） */
  .history-page .history-era__rail::after {
    display: none;
  }

  /* 直径14px · 白塗り · 2.5px 枠 — 80px レール列の中央（縦線と同一 X） */
  .history-page .history-era__node {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    border: 2.5px solid var(--history-line);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    pointer-events: none;
  }

  .history-page .history-era--era-1 .history-era__node {
    border-color: var(--history-era-1);
  }

  .history-page .history-era--era-2 .history-era__node {
    border-color: var(--history-era-2);
  }

  .history-page .history-era--era-3 .history-era__node {
    border-color: var(--history-era-3);
    top: 58px;
    transform: translate(-50%, 0);
  }
}

.history-page .history-era__content-wrap {
  display: flex;
  align-items: flex-start;
  padding: var(--space-10) 0;
}

@media (min-width: 1024px) {
  .history-page .history-era__content-wrap {
    padding: clamp(var(--space-8), 5vw, 64px) clamp(var(--space-4), 2vw, 0) 0;
    box-sizing: border-box;
  }

  .history-page .history-era--reverse .history-era__content-wrap {
    justify-content: flex-end;
    padding-inline: 0 clamp(var(--space-4), 2vw, 0);
  }

  .history-page .history-era__content {
    max-width: min(360px, 100%);
  }
}

.history-page .history-era__content {
  max-width: 360px;
}

.history-page .history-era__content--right {
  text-align: right;
}

.history-page .history-era__period-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.history-page .history-era__period-row--both-lines {
  justify-content: flex-end;
}

.history-page .history-era__period-line {
  width: 36px;
  height: 1px;
  background-color: color-mix(in srgb, var(--ink-300) 55%, var(--line-border));
  flex-shrink: 0;
}

.history-page .history-era__period {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  line-height: 16.5px;
  letter-spacing: 1.32px;
  color: var(--ink-300);
}

.history-page .history-era__name {
  margin: 0 0 8px;
  font-family: var(--font-jp);
  font-size: clamp(2rem, calc(1.6rem + 2vw), 2.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.76px;
}

.history-page .history-era--era-1 .history-era__name {
  color: var(--history-era-1);
}

.history-page .history-era--era-2 .history-era__name {
  color: var(--history-era-2);
}

.history-page .history-era--era-3 .history-era__name {
  color: var(--history-era-3);
}

.history-page .history-era__photo-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .history-page .history-journey__timeline > .history-era {
    margin-bottom: var(--space-12);
  }

  .history-page .history-journey__timeline > .history-era:last-child {
    margin-bottom: 0;
  }

  .history-page .history-era__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-height: 0;
  }

  /* テキスト → 写真（第1・第3期は DOM が写真先のため order で上にテキスト） */
  .history-page .history-era__content-wrap {
    order: 1;
    padding: 0;
    width: 100%;
  }

  .history-page .history-era__photo-wrap {
    order: 2;
    padding: 0;
    width: 100%;
    justify-content: stretch;
  }

  .history-page .history-era__rail {
    display: none;
  }

  .history-page .history-era--reverse .history-era__content-wrap {
    justify-content: flex-start;
  }

  .history-page .history-era__content {
    max-width: 100%;
  }

  .history-page .history-era__content--right {
    text-align: left;
  }

  .history-page .history-era__period-row--both-lines {
    justify-content: flex-start;
  }

  /* 3期とも同一枠（460×345 比率） */
  .history-page .history-era__photo {
    width: 100%;
    max-width: none;
    aspect-ratio: 460 / 345;
    margin-inline: 0;
  }

  .history-page .history-era__photo-img,
  .history-page .history-era__photo-img--1,
  .history-page .history-era__photo-img--2,
  .history-page .history-era__photo-img--3 {
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

@media (max-width: 767px) {
  .history-page .history-journey {
    padding: var(--space-12) var(--space-6);
  }

  .history-page .history-era__name {
    font-size: clamp(1.625rem, calc(1.45rem + 1.2vw), 2rem);
    line-height: 1.35;
  }
}

.history-page .history-era__tagline {
  margin: 0 0 24px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-500) 72%, var(--ink-300));
}

.history-page .history-era__desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  color: var(--ink-700);
}

/* ----- 歩みの記録 ----- */
.history-page .history-milestones {
  background-color: var(--surface-paper);
  padding: var(--space-16) var(--space-6);
}

.history-page .history-milestones__inner {
  width: 100%;
  max-width: var(--history-inner);
  margin: 0 auto;
}

.history-page .history-milestones__header {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.history-page .history-milestones__eyebrow {
  margin: 0 0 var(--space-8);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  line-height: 16.5px;
  letter-spacing: 0.2115em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.history-page .history-milestones__title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(1.5rem, calc(1.5rem + 0.5vw), 2rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
}

.history-page .history-milestones__list {
  border-top: 1px solid rgba(13, 13, 26, 0.08);
  overflow: visible;
}

/* Figma .container73 — リスト末尾の区切り線 */
.history-page .history-milestones__list-end {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  border-top: 1px solid rgba(13, 13, 26, 0.08);
}

.history-page .history-milestones__item {
  box-sizing: border-box;
  border-top: 1px solid rgba(13, 13, 26, 0.08);
  padding-top: 33px;
  overflow: visible;
}

.history-page .history-milestones__item:first-child {
  border-top: none;
  padding-top: 33px;
}

/* Figma .container3 / .container29 — 年号行 + 写真（427.3px） */
.history-page .history-milestones__item--media {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 0;
}

@media (min-width: 1024px) {
  .history-page .history-milestones__item--media {
    min-height: 427.3px;
  }
}

/* Figma .container9 / .container69 — テキストのみ（95px） */
.history-page .history-milestones__item:not(.history-milestones__item--media) {
  padding-bottom: 0;
}

.history-page .history-milestones__item:last-child {
  padding-bottom: 33px;
}

.history-page .history-milestones__row {
  display: grid;
  grid-template-columns: 123px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.history-page .history-milestones__year {
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.history-page .history-milestones__year--muted {
  color: rgba(13, 13, 26, 0.6);
}

.history-page .history-milestones__year--era-1 {
  color: var(--history-era-1);
}

.history-page .history-milestones__year--era-2 {
  color: var(--history-era-2);
}

.history-page .history-milestones__year--era-3 {
  color: var(--history-era-3);
}

.history-page .history-milestones__body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.history-page .history-milestones__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 11px;
  flex-shrink: 0;
}

.history-page .history-milestones__event {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink-900);
}

@media (max-width: 768px) {
  .history-page .history-milestones {
    padding-inline: var(--space-6);
  }

  /*
   * 1行目: 年号（1954年）
   * 2行目: ・（ドット）+ 本文を横並び・本文は通常折り返し
   */
  .history-page .history-milestones__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .history-page .history-milestones__year {
    flex: none;
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    line-height: 1.2;
    white-space: nowrap;
  }

  .history-page .history-milestones__year::after {
    content: "年";
    font-size: 0.72em;
    font-weight: 900;
    letter-spacing: 0;
  }

  .history-page .history-milestones__body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
  }

  .history-page .history-milestones__dot {
    margin-top: 0.45em;
    flex-shrink: 0;
  }

  .history-page .history-milestones__event {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-body-m);
    line-height: 1.75;
    white-space: normal;
    overflow: visible;
  }

  .history-page .history-milestones__figure {
    margin-left: 0;
    max-width: 100%;
  }
}

.history-page .history-milestones__figure {
  margin: 0 0 0 123px;
  max-width: 512px;
}

.history-page .history-milestones__item--media .history-milestones__figure {
  margin-top: 0;
}

.history-page .history-milestones__figure-img {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 512px;
  height: 287.8px;
  aspect-ratio: 512 / 288;
}

.history-page .history-milestones__figure-img-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-page .history-milestones__figure-img-el--1954 {
  top: -243.5px;
  left: -50.97%;
  width: 172.95%;
  height: 664px;
  max-width: none;
}

.history-page .history-milestones__figure-img-el--2001 {
  top: -48.81px;
  left: -0.16%;
  width: 100.25%;
  height: 385px;
  max-width: none;
}

.history-page .history-milestones__figure-img-el--2018 {
  top: -55.12px;
  left: -42.83px;
  width: 587px;
  height: 391px;
  max-width: none;
}

.history-page .history-milestones__caption {
  margin: 12px 0 0;
  font-family: var(--font-jp);
  font-size: 11px;
  line-height: 16.5px;
  color: rgba(74, 74, 104, 0.4);
}

/* ----- 創業者の物語 ----- */
.history-page .history-founder {
  background-color: #fff;
  padding: var(--space-16) var(--space-6);
}

.history-page .history-founder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: var(--history-inner);
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 1024px) {
  .history-page .history-founder__grid {
    grid-template-columns: 334px minmax(0, 718px); /* React .container 718px */
    gap: 48px; /* React --history-founder-grid-gap: 3rem（写真と本文の間隔） */
  }
}

.history-page .history-founder__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 334 / 548;
}

.history-page .history-founder__photo-img {
  position: absolute;
  top: 0;
  left: -245px;
  width: 822px;
  height: 548px;
  max-width: none;
  object-fit: cover;
}

.history-page .history-founder__eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  line-height: 16.5px;
  letter-spacing: 0.2115em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.history-page .history-founder__title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-h2-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
}

.history-page .history-founder__lead {
  margin: var(--space-4) 0 var(--space-8);
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  line-height: 19.5px;
  letter-spacing: 0.04em;
  color: var(--history-body-muted);
}

.history-page .history-founder__text {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.history-page .history-founder__text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  color: var(--ink-900);
}

.history-page .history-founder__quote {
  margin: 0;
  padding: 4px 0 0 23px;
  border-left: 3px solid color-mix(in srgb, var(--history-era-1) 22%, transparent);
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  line-height: 30px;
  color: var(--history-era-1);
}

/* ----- あすなろストーリー ----- */
.history-page .history-asunaro {
  display: grid;
  overflow: hidden;
  min-height: 420px;
}

.history-page .history-asunaro__media,
.history-page .history-asunaro__content {
  grid-row: 1;
  grid-column: 1;
}

.history-page .history-asunaro__media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.history-page .history-asunaro__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 42% 38%;
}

.history-page .history-asunaro__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(26, 26, 46, 0.7) 0%,
    rgba(26, 26, 46, 0.4) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.history-page .history-asunaro__content {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  padding-block: var(--space-16);
}

/* 写真フルブリード上のテキスト — layout-inset で 1024px+ 左右 80px・1400 枠内に揃える */
.history-page .history-asunaro__content.layout-inset {
  max-width: var(--layout-frame);
  margin-inline: auto;
  text-align: left;
}

.history-page .history-asunaro__eyebrow,
.history-page .history-asunaro__title,
.history-page .history-asunaro__text {
  max-width: 43.625rem; /* Figma 698px */
}

.history-page .history-asunaro__eyebrow {
  margin: 0 0 var(--space-6);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: 0.2115em;
  text-transform: uppercase;
  color: var(--brand-accent-yellow);
}

.history-page .history-asunaro__title {
  margin: 0 0 var(--space-8);
  font-family: var(--font-jp);
  font-size: clamp(1.5rem, calc(1.5rem + 0.5vw), 2rem);
  font-weight: 700;
  line-height: 1.47;
  color: #fff;
}

.history-page .history-asunaro__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-page .history-asunaro__text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 33px;
  color: rgba(255, 255, 255, 0.8);
}

/* ===== 1024px+ Figma 1400 固定値 ===== */
/**
 * 沿革ページ — Figma 1400（1024px+）
 */
@media (min-width: 1024px) {
  .history-page .history-journey {
    padding: 112px var(--layout-inline-lg) 0;
  }

  .history-page .history-journey__header {
    margin-bottom: 96px;
  }

  .history-page .history-journey__title {
    font-size: 32px;
    line-height: 48px;
  }

  .history-page .history-era__name {
    font-size: 2.75rem;
    line-height: 57.2px;
  }

  .history-page .history-milestones {
    padding: 128px var(--layout-inline-lg) 64px;
    overflow: visible;
  }

  .history-page .history-milestones__inner {
    max-width: min(100%, 1100px);
  }

  .history-page .history-milestones__header {
    margin-bottom: 64px;
  }

  .history-page .history-milestones__title {
    font-size: 32px;
    line-height: 48px;
  }

  .history-page .history-milestones__row {
    gap: 32px;
  }

  .history-page .history-milestones__body {
    max-width: 744.7px;
  }

  .history-page .history-founder {
    padding: 121px var(--layout-inline-lg);
  }

  .history-page .history-founder__title {
    font-size: 24px;
    line-height: 36px;
  }

  .history-page .history-asunaro {
    min-height: 666px;
  }

  .history-page .history-asunaro__content.layout-inset {
    padding-inline: var(--layout-inline-lg);
    padding-block: 114px;
  }

  .history-page .history-asunaro__title {
    font-size: 34px;
    line-height: 50px;
  }

}

/* [Excel row38] 1024px+ — React .page-hero--history ≥1024 と一致
   横幅100%基準・上下トリミング（translateY -64% / object-position center 24%） */
@media (min-width: 1024px) {
  .page-hero--history .page-hero__media-img--history {
    inset: auto;
    top: 44%;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    transform: translateY(-64%);
    transform-origin: center center;
    object-fit: cover;
    object-position: center 24%;
  }
}


/* ==========================================================
   [Excel指摘 / 沿革ページ]
   ========================================================== */

/* row39: 1954「歩みの記録」写真が極端に拡大され人物が切れていた
   → フルカバー＋中央寄せにして全体が見えるよう修正（位置%は調整可） */
.history-page .history-milestones__figure-img-el--1954 {
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* row43: 年表のドットを縦ラインでつなぐ（1024px以上）
   ※年号の色（era別 濃紺/ティール）はコード上すでに正しいので変更不要 */
@media (min-width: 1024px) {
  .history-page .history-milestones__list {
    position: relative;
  }
  .history-page .history-milestones__list::before {
    content: "";
    position: absolute;
    left: 159px;            /* 年号列123px + gap32px + ドット中心4px。ズレる場合はこの値を調整 */
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(13, 13, 26, 0.12);
    z-index: 0;
    pointer-events: none;
  }
  .history-page .history-milestones__dot {
    position: relative;
    z-index: 1;             /* ドットを線の上に重ねる */
  }
}

/* [r38] 1954写真がタイムライン縦ラインを越えてしまう問題
   → 図をイベント本文の開始位置(年123px + gap32px + ドット8px + 本文gap24px = 187px)に揃え、
     縦ライン(159px)より右に配置する */
@media (min-width: 1024px) {
  .history-page .history-milestones__figure {
    margin-left: 187px;
  }
}

/* ==========================================================
   [Excel row49/50/63] React のブレイクポイント専用ルールを移植
   （WP に 768〜1023 タブレット帯が無く、タブレットがモバイル兼用に
   流れてレイアウトが崩れていたのを是正）
   ========================================================== */

/* row49: 創業期 — 768〜1023 はテキスト→写真の1列＋写真幅上限
   （React @media 768-1023 .history-era） */
@media (min-width: 768px) and (max-width: 1023px) {
  .history-page .history-journey__timeline > .history-era {
    margin-bottom: var(--space-10);
  }
  .history-page .history-era__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: stretch;
  }
  .history-page .history-era__content-wrap {
    order: 1;
    width: 100%;
  }
  .history-page .history-era__photo-wrap {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }
  .history-page .history-era--reverse .history-era__content-wrap,
  .history-page .history-era--reverse .history-era__photo-wrap {
    justify-content: flex-start;
  }
  .history-page .history-era__photo {
    width: 100%;
    max-width: min(24rem, 72%); /* --history-era-photo-max-w-tablet */
    aspect-ratio: 460 / 345;
    height: auto;
    margin-inline: 0;
  }
}

/* row50: 創業者の物語 — 768〜1023 は写真左・本文右（Figma 334×548 縦長比）
   （React @media 768-1023 .history-founder） */
@media (min-width: 768px) and (max-width: 1023px) {
  .history-page .history-founder__grid {
    grid-template-columns: minmax(0, clamp(15rem, 31vw, 18.75rem)) minmax(0, 1fr); /* --history-founder-photo-w-tablet */
    gap: var(--space-8);
    align-items: start;
  }
  .history-page .history-founder__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 334 / 548;
    min-height: 0;
  }
  .history-page .history-founder__photo-img {
    inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-position: center 22%;
  }
}

/* row63: 歩みの記録 — モバイルの写真を全幅 16:10・cover に
   （React @media (max-width:768px) .history-milestones__figure 系） */
@media (max-width: 767px) {
  .history-page .history-milestones__figure {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
  .history-page .history-milestones__figure-img {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
  }
  .history-page .history-milestones__figure-img-el,
  .history-page .history-milestones__figure-img-el--1954,
  .history-page .history-milestones__figure-img-el--2001,
  .history-page .history-milestones__figure-img-el--2018 {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
  }
}

/* row50（補完）: 創業者の物語 — モバイル(≤767)は写真を横長バナー化
   （React @media (max-width:1023px) .history-founder__photo 系。WPはデスクトップ用
   822px/-245px クロップが流用され縦長で崩れていたのを是正） */
@media (max-width: 767px) {
  .history-page .history-founder__photo {
    width: 100%;
    height: clamp(220px, 38vw, 320px);
    aspect-ratio: auto;
    min-height: 0;
  }
  .history-page .history-founder__photo-img {
    inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
  }
}