.history-selected {
  position: relative;
  z-index: 64;
  width: 100vw;
  padding-top: 0;
  background: transparent;
  color: #050505;
  --history-edge: var(--edge, max(6vw, calc((100vw - 1320px) / 2)));
  --history-paper: #fff;
  --history-ink: #050505;
  --history-line: #ccc;
  --history-row-pad-y: .5rem;
  --history-row-pad-x: var(--history-edge);
  --history-card-pad-x: var(--history-row-pad-x);
  --history-card-pad-y: clamp(14px, 1.7vw, 28px);
  --history-card-offset-y: 20px;
  --history-card-bottom-feather: clamp(28px, 4.8vh, 58px);
  --history-scroll-length: 900vh;
  --history-corner: clamp(56px, 4.8vw, 76px);
  --section-marquee-gap: calc(clamp(52px, 7vh, 96px) + 30px);
  --section-card-gap: clamp(42px, 5.2vh, 54px);
  --section-heading-inset: clamp(12px, 1.6vh, 18px);
  --section-heading-height: clamp(54px, 4.15vw, 64px);
  --section-heading-y: calc(-1 * var(--section-heading-height) - 14px - var(--marquee-kiss, -2px) - var(--marquee-card-extra, 53px));
  --history-sticky-final-lift: 0px;
}

.history-selected *,
.history-selected *::before,
.history-selected *::after {
  box-sizing: border-box;
}

.history-selected img {
  display: block;
}

.history-selected__heading {
  position: absolute;
  top: var(--section-heading-y);
  left: var(--history-edge);
  z-index: 2;
  width: min(520px, calc(100vw - (var(--history-edge) * 2)));
  margin: 0;
  pointer-events: none;
}

.history-selected__eyebrow {
  margin: 0 0 var(--eyebrow-gap, 6px) var(--eyebrow-shift, 2px);
  color: var(--eyebrow-color, #555);
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: var(--eyebrow-size, clamp(15px,1.18vw,19px));
  font-weight: 300;
  line-height: 1;
  letter-spacing: .01em;
}
.history-selected__eyebrow b { font-weight: var(--eyebrow-bold-weight, 300); color: var(--eyebrow-bold-color, #555); }

.history-selected__title {
  margin: 0;
  color: var(--heading-color, #2d2d2d);
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(21px, 2vw, 34px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: .05em;
}

.history-selected__tabs {
  margin-top: 0;
}

.history-selected__wrapper {
  position: relative;
  height: var(--history-scroll-length);
  background: transparent;
}

.history-selected__list,
.history-selected__item {
  width: 100%;
}

.history-selected__sticky {
  position: sticky;
  z-index: 1;
  top: 0;
  width: 100%;
  overflow: hidden;
  background: transparent;
  border-radius: 0 0 var(--history-corner) var(--history-corner);
  will-change: transform;
}

.history-selected__row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: var(--history-row-pad-y) var(--history-row-pad-x);
  background: #fff;
  /* Safari個体差対策(2026-08-05): sticky(合成レイヤー)内で兄弟imageのtransformアニメが走ると、
     未昇格の子＝行テキストの描画を落とすMacがある（帯は白いまま文字だけ消える）。
     hotel-workのロゴ消え(2d2a9b1)と同病。恒等変換で行を単独レイヤーに昇格し常時描画させる。見た目不変。 */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.history-selected__row--head {
  min-height: 2.75rem;
  border-bottom: 1px solid var(--history-line);
  background: #fff;
}

.history-selected__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  color: inherit;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--history-line);
  overflow: hidden;
  background: transparent;
  outline: none;
}

.history-selected__item:focus-visible {
  box-shadow: inset 0 0 0 2px #050505;
}

.history-selected__image {
  position: relative;
  width: 0%;
  max-width: none;
  aspect-ratio: 2.39 / 1.1;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  will-change: width, transform;
}

.history-selected__item:last-child .history-selected__image {
  aspect-ratio: 2.39 / 1.42;
}


.history-selected__surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 0% 0%;
  will-change: transform;
}

.history-selected__surface img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: translate3d(0, 0, 0);
  filter: var(--history-photo-filter, none);
}

.history-selected__surface img[data-history-final-photo] {
  object-position: 50% 38%;
}

/* PC(≥1025px)のみ写真の見せる位置を下寄せ（モバイル/タブレット=max-width側は不変）。値は各era.lowerPC → --pc-obj */
@media (min-width: 1025px) {
  .history-selected__surface.is-lower-pc img { object-position: var(--pc-obj, 50% 80%); }
  .history-selected__surface.is-shift-left-pc img {
    transform: translate3d(-4%, 0, 0) scale(1.1);
    transform-origin: 50% 50%;
  }
}

/* 最後の写真の締め（50年の物語→次の世代へ）。写真下・中央。マーキー系と同じ Cormorant。 */
.history-selected__closing {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(8px, 2.4vh, 24px);
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  pointer-events: none;
}
.history-selected__closing span {
  font-family: "Helvetica Neue", "Arial", sans-serif;  /* 各セクションの英語アイブロウと同じフォント */
  font-weight: 300;                          /* 細く */
  font-size: clamp(9px, 1.05vw, 16px);       /* さらに小さく */
  letter-spacing: 0.14em;
  color: rgba(226, 220, 208, 0.9);           /* 真っ白→少しグレージュ */
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32);
  white-space: nowrap;
}

.history-selected__surface::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .18) 42%, rgba(0, 0, 0, .48)),
    linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .22));
  pointer-events: none;
}

/* フィルムグレイン（AI再加工画像の質感補正）。is-grain の写真だけに適用。
   調整ノブ: --grain-opacity(強さ) / --grain-size(粒の粗さ・大きいほどザラザラ) / --grain-blend(overlay=強/soft-light=柔) */
.history-selected__surface.is-grain {
  --grain-opacity: 0.5;
  --grain-size: 300px;
  --grain-blend: overlay;
}
.history-selected__surface.tone-archive {
  --history-photo-filter: saturate(.7) sepia(.14) contrast(1.08) brightness(.94);
  --grain-opacity: .6;
  --grain-size: 220px;
}
.history-selected__surface.tone-modern {
  --history-photo-filter: saturate(.82) sepia(.04) contrast(1.08) brightness(.94);
  --grain-opacity: .36;
  --grain-size: 250px;
  --grain-blend: soft-light;
}
@media (min-width: 1025px) {
  .history-selected__surface.is-clean-pc {
    --history-photo-filter: saturate(.9) sepia(.02) contrast(1.04) brightness(.98);
    --grain-opacity: .16;
    --grain-size: 280px;
    --grain-blend: soft-light;
  }
}
.history-selected__surface.is-grain::before {
  content: "";
  position: absolute;
  z-index: 1;             /* img(0)の上・カード(2)の下。グラデ(::after)と同層 */
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: var(--grain-size) var(--grain-size);
  background-repeat: repeat;
  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-opacity);
  pointer-events: none;
}

.history-selected__card {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  color: #f4eee2;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
  visibility: hidden;
  transform: translate3d(2rem, 1rem, 0);
  transform-origin: 100% 0%;
  will-change: transform;
}

.history-selected__card-mask {
  position: absolute;
  inset: 0;
  padding: var(--history-card-pad-y) var(--history-card-pad-x);
  background: transparent;
  border: 0;
  overflow: hidden;
  --history-card-clip-top: 0%;
  --history-card-clip-right: 0%;
  --history-card-clip-bottom: 0%;
  --history-card-clip-left: 0%;
  clip-path: inset(var(--history-card-clip-top) var(--history-card-clip-right) var(--history-card-clip-bottom) var(--history-card-clip-left));
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--history-card-bottom-feather)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--history-card-bottom-feather)), rgba(0, 0, 0, 0) 100%);
  transform-origin: 0% 50%;
  will-change: clip-path;
}

.history-selected__card-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(0, 0fr) auto minmax(0, 2fr);
  column-gap: 1rem;
  align-items: center;
  width: 100%;
  height: 100%;
  visibility: visible;
  will-change: transform;
}

.history-selected__copy {
  display: flex;
  grid-column: 1 / 3;
  grid-row: 2;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(48ch, 100%);
  margin-top: 0;
}

.history-selected__meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: .42rem;
  margin: 0 0 clamp(12px, 1.7vh, 22px);
  color: rgba(244, 238, 226, .82);
  font-family: Inter, "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
  font-size: clamp(.7rem, .72vw, .84rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.history-selected__card-title {
  max-width: 24em;
  margin: 0 0 clamp(12px, 1.8vh, 22px);
  color: #f7f1e6;
  /* サイト共通の見出しフォントに統一（旧: Yu Mincho だけ他セクションと別書体だった） */
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(1.16rem, 1.5vw, 1.58rem);
  line-height: 1.34;
  font-weight: 500;
  letter-spacing: .02em;
}

.history-selected__body {
  max-width: 42ch;
  margin: 0;
  color: rgba(247, 241, 230, .9);
  font-family: Inter, "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
  font-size: clamp(.82rem, .86vw, .96rem);
  line-height: 1.76;
  letter-spacing: .02em;
}

/* scroll インジケーター(copy内・body下)。card-inner の scale で body と全く同じ縮み方。viewportは body 同様 clamp で追従 */
.history-selected__scroll {
  display: inline-flex;       /* 幅を「scroll」の文字幅にフィット→ブロックは左寄せのまま */
  flex-direction: column;
  align-items: center;        /* 矢印を「scroll」の中央下に */
  gap: clamp(6px, .9vh, 12px);
  margin-top: clamp(22px, 4.4vh, 60px);
  color: rgba(247, 241, 230, .8);
  font-family: Inter, "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  letter-spacing: .14em;
  line-height: 1;
}
.history-selected__scroll-ic {
  width: clamp(24px, 2.5vw, 36px);   /* もっと大きく */
  height: auto;
  animation: historyScrollBob 1.8s ease-in-out infinite;
}
@keyframes historyScrollBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .history-selected__scroll-ic { animation: none; } }

.history-selected__body--mobile,
.history-selected__date-mobile {
  display: none;
}

.history-selected__facts {
  display: flex;
  grid-column: 4 / 6;
  grid-row: 2;
  justify-self: stretch;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: .46rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(247, 241, 230, .82);
  font-family: Inter, "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
  font-size: clamp(.62rem, .68vw, .8rem);
  line-height: 1.42;
  letter-spacing: .035em;
  transform: translate3d(0, clamp(12px, 3vh, 34px), 0);
}

.history-selected__facts li {
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.history-selected__facts--mobile,
.history-selected__theme-mobile {
  display: none;
}

/* 年表 Theme 列は「日本語のテーマ名」＝カード見出しと同じ文言。数字(Era/Year)は Inter の
   tabular-nums のまま、この列だけサイト共通の見出し書体に揃える。 */
.history-selected__theme-desktop,
.history-selected__theme-mobile {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 500;
  letter-spacing: .03em;
}

.history-selected__cell {
  min-width: 0;
  font-family: Inter, "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Safari個体差対策(2026-08-05): 行(__row)の昇格に加え、文字を持つ葉要素も昇格。
     hotel-workのロゴ消え修正(2d2a9b1)で実機解消した形（leaf要素へのtranslateZ+backface）に揃える。見た目不変。 */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.history-selected__cell--right {
  text-align: right;
}

.history-selected__placeholder {
  width: 100%;
  height: 100%;
}

.history-selected__marquee {
  position: relative;
  z-index: 0;
  width: 100vw;
  margin: var(--section-card-gap) 0 calc(var(--section-card-gap) + var(--marquee-card-extra, 53px));
  overflow: hidden;
  pointer-events: none;
}

.history-selected__marquee-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: historySelectedMarq 80s linear infinite;
}

.history-selected__marquee-track span {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(156px, 20.4vw, 360px);
  line-height: 1.05;
  letter-spacing: .005em;
  color: rgba(43, 43, 43, .18);
  white-space: nowrap;
  padding-right: clamp(34px, 4vw, 90px);
}

@keyframes historySelectedMarq {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 991px) {
  .history-selected {
    --history-row-pad-x: 1.5rem;
    --history-scroll-length: 760vh;
  }

  .history-selected__hide-tablet {
    display: none;
  }

  .history-selected__row {
    grid-template-columns: 1fr 1fr 1fr;
  }

}

@media (max-width: 1024px) {   /* 767→1024: iPad縦(〜1024)までモバイル版§8(モバイル/デスクトップ変種の切替含む)を適用。デスクトップ版テキストが漏れる不具合を解消 */
  .history-selected {
    --history-row-pad-x: var(--history-edge);
    --history-card-pad-x: var(--history-edge);
    --history-card-pad-y: 1.15rem;
    --history-card-bottom-feather: 42px;
    --history-scroll-length: 720vh;
    --history-corner: 42px;
    --history-edge: 5vw;
    --section-marquee-gap: 86px;
    --section-card-gap: 86px;
    --section-heading-inset: 12px;
    --section-heading-height: 50px;
    --section-heading-y: calc(var(--section-heading-inset) - var(--section-marquee-gap) - 15px);   /* SP: 全体15px詰め(eyebrowをマーキーへ15px寄せ=161)。PC幅は不変 */
    padding-top: 0;
  }

  .history-selected__heading {
    width: calc(100vw - (var(--history-edge) * 2));
  }

  .history-selected__title {
    font-size: clamp(20px, 5vw, 26px);
    line-height: 1.18;
    letter-spacing: .03em;
    white-space: nowrap;
  }

  .history-selected__tabs {
    margin-top: 0;
  }

  .history-selected__hide-mobile {
    display: none;
  }

  .history-selected__row {
    grid-template-columns: 6.6rem minmax(0, 1fr) 2.7rem;
    gap: .35rem;
  }

  .history-selected__row--head {
    min-height: 2.5rem;
  }

  .history-selected__cell {
    font-size: .82rem;
    overflow: visible;
    text-overflow: clip;
  }

  .history-selected__theme-desktop {
    display: none;
  }

  .history-selected__theme-mobile {
    display: inline;
  }

  .history-selected__image {
    aspect-ratio: 1 / 1.04;
  }

  .history-selected__item:last-child .history-selected__image {
    aspect-ratio: 1 / 1.18;
  }


  .history-selected__surface {
    width: 100vw;
  }

  .history-selected__card {
    inset: 0;
    width: auto;
    transform-origin: 0% 100%;
  }

  .history-selected__card-mask {
    padding: var(--history-card-pad-y) var(--history-card-pad-x);
    background: transparent;
    border: 0;
    --history-card-clip-right: 0%;
    --history-card-clip-bottom: 0%;
    transform-origin: 0% 100%;
  }

  .history-selected__card-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    align-content: stretch;
    height: 100%;
    column-gap: 0;
  }

  .history-selected__copy {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: auto auto 1fr auto;
    align-self: stretch;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .history-selected__meta {
    grid-row: 1;
    flex-direction: row;
    justify-content: space-between;
    gap: .7rem;
    margin: 0;
    color: rgba(247, 241, 230, .78);
    font-size: .56rem;
  }

  .history-selected__card-title {
    grid-row: 2;
    max-width: 100%;
    margin: .54rem 0 0;
    color: #f7f1e6;
    font-size: .92rem;
    line-height: 1.3;
  }

  .history-selected__date-desktop,
  .history-selected__body--desktop,
  .history-selected__facts--desktop {
    display: none;
  }

  .history-selected__date-mobile {
    display: inline;
  }

  .history-selected__body--mobile {
    display: -webkit-box;
    grid-row: 4;
    align-self: end;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 24em;
    margin: 0 0 .62rem;
    color: rgba(247, 241, 230, .88);
    font-size: .66rem;
    line-height: 1.5;
    letter-spacing: .01em;
  }

  .history-selected__facts--mobile {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .18rem .55rem;
    margin: .6rem 0 0;
    color: rgba(247, 241, 230, .78);
    overflow: visible;
    font-size: .48rem;
    line-height: 1.32;
    transform: none;
  }

  .history-selected__facts--mobile li {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .history-selected__marquee {
    margin: var(--section-card-gap) 0 var(--section-card-gap);
  }

  .history-selected__marquee-track span {
    font-size: clamp(88px, 25vw, 150px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-selected__wrapper {
    height: auto;
  }

  .history-selected {
    --history-sticky-final-lift: 0px;
  }

  .history-selected__sticky {
    position: relative;
    top: auto;
    transform: none !important;
  }

  .history-selected__image {
    width: 100% !important;
    transform: none !important;
  }

  .history-selected__surface {
    transform: none !important;
  }

  .history-selected__card {
    visibility: visible !important;
    transform: none !important;
  }

  .history-selected__card-mask {
    clip-path: inset(0) !important;
  }

  .history-selected__card-inner {
    visibility: visible !important;
    transform: none !important;
  }

  .history-selected__marquee-track {
    animation: none;
  }

}