/* タイトル＆説明：左位置を統一 */
.history {
 --story-left: 45px;
 padding: 160px 0;
}

.story-head {
 margin-bottom: 12px;
}

.history .section-lead {
 max-width: 680px;
 margin: 0 60px 40px;
 line-height: 1.7;
 font-size: 17px;
}

/* 年バー */
.yearbar-wrap {
 position: relative;
 margin: 2px 0 6px;
}

.yearlist {
 display: flex;
 overflow-x: auto;
 scrollbar-width: none;
 -webkit-overflow-scrolling: touch;
 /* 帯を端まで伸ばすため左右パディング・ギャップなし */
 padding: 0 0 12px 0;
 gap: 0;
 touch-action: pan-x;
 user-select: none;
 -webkit-user-select: none;
}

.yearlist::-webkit-scrollbar {
 display: none;
}

/* 年セル：帯は ::after、左右は密着（連結） */
.year {
 position: relative;
 flex: 1 1 0; /* 非スクロール時は均等幅 */
 min-width: 120px; /* これ以下には縮めない（安全幅） */
 text-align: center;
 white-space: nowrap;
 cursor: pointer;
 user-select: none;
 color: #b7b7b7;
 font-size: 48px;
 font-weight: 800;
 padding-bottom: 16px; /* 帯のための下余白 */
}
/* 年の文字余白は内側spanで付ける → 帯幅に影響しない */
.year .year-txt {
 display: inline-block;
 padding: 0 16px;
 transform-origin: 50% 100%;
}

.year:first-child .year-txt {
 padding-left: 0;
}
/* 左端をピッタリ */
.year:last-child .year-txt {
 padding-right: 0;
}

.year.active .year-txt {
 transform: scale(1.3);
}

/* 帯（セル幅＝帯幅） */
.year::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 10px;
 border-radius: 0;
 pointer-events: none;
 background: #e4e4e4; /* 薄グレー */
}

.year:nth-child(odd)::after {
 background: #9a9a9a;
}
/* 濃/薄 交互 */

/* 選択年：文字＆帯を黄色に */
.year.active {
 color: #ffbe3b;
}

.year.active::after {
 background: #ffbe3b;
}

/* ── スクロールモード：常に“6本見せる”幅に固定 ── */
.yearlist.scrollable .year {
 flex: 0 0 calc(100% / var(--visible-cols, 6)); /* 6分割幅で固定 */
 min-width: auto; /* 固定幅に合わせる */
}

/* カード */
.cards-wrap {
 /* 4枚 * カード幅 + 3つのギャップ + 左右パディング分で“箱”を狭くする */
 --cards-visible: 4; /* 同時表示枚数（PC） */
 --card-w: 260px; /* 1枚の横幅 */
 --card-gap: 24px; /* カード間の隙間 */
 --cards-pad: 24px; /* scroller の左右パディング */
 max-width: 80%;
 margin-inline: auto;
 position: relative; /* 既存 */
 margin-top: 6px; /* 既存 */
 z-index: 1; /* 既存 */
}

.cards-scroller {
 display: flex;
 gap: 24px;
 overflow-x: auto;
 padding: 8px 36px;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}

.card {
 flex: 0 0 clamp(220px, 22vw, 280px);
 scroll-snap-align: start;
 border: 0px solid #ddd;
 border-radius: 0px;
 background: #fff;
 overflow: hidden;
}

.card img {
 width: 100%;
 height: 160px;
 object-fit: cover;
 display: block;
}

.card .meta {
 padding: 12px;
}

.card .title {
 font-weight: 700;
 margin-bottom: 4px;
 margin-left: -10px;
}

.card .text {
 font-size: 0.9rem;
 color: #555;
 margin-left: -10px;
}

.card a {
 color: inherit;
 text-decoration: none;
}

/* 矢印（画像） */
.cards-nav {
 position: absolute;
 top: 30%;
 transform: translateY(-50%);
 width: 44px;
 height: 44px;
 border: none;
 border-radius: 9999px;
 background: transparent;
 cursor: pointer;
 display: none;
 background-repeat: no-repeat;
 background-position: center;
 background-size: 34px;
 z-index: 1;
}

.cards-nav.left {
 left: -50px;
 background-image: url("/img/larrow.png");
}

.cards-nav.right {
 right: -50px;
 background-image: url("/img/rarrow.png");
}

.cards-wrap.scrollable .cards-nav {
 display: block;
}

.card video {
 width: 100%;
 height: 160px;
 object-fit: cover;
 display: block;
}

/* ローディングオーバーレイ */
.cards-wrap {
 position: relative;
}

.cards-loading {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(255, 255, 255, 0.6);
 backdrop-filter: saturate(1.2) blur(1px);
 z-index: 2;
}

.cards-loading[hidden] {
 display: none;
}

.spinner {
 width: 34px;
 height: 34px;
 border: 3px solid #e2e2e2;
 border-top-color: #ffbe3b;
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
}

@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}

/* 年バーのクリックを邪魔しない */
.year::after {
 pointer-events: none;
}

.yearbar-wrap,
.yearlist,
.year {
 position: relative;
 z-index: 5;
 align-items: flex-end;
}

.yearlist {
 touch-action: pan-x;
 user-select: none;
 -webkit-user-select: none;
}

/* 手の形に統一（標準） */
a:hover,
.year:hover,
.cards-nav:hover,
.card.is-link:hover {
 /* ← 後述JSで付ける補助クラス */
 cursor: pointer;
}

/* オリジナル画像のカーソル（PNG推奨、座標はホットスポット） */
a:hover,
.year:hover,
.cards-nav:hover,
.card.is-link:hover {
 cursor: url("/img/cursor-link.png") 12 2, pointer;
}

/* クリック中に別のカーソルにしたい場合（任意） */
a:active,
.year:active,
.cards-nav:active,
.card.is-link:active {
 cursor: url("/img/cursor-link-press.png") 12 2, pointer;
}

#yearbar-wrap {
 position: relative;
 --halo-size: 120px;
}
/* 年バーは少し小さめ */
#cards-wrap {
 position: relative;
 --halo-size: 160px;
}

/* タブレット */
@media (max-width: 768px) {
 .history {
  padding-block: 140px 100px;
 }
 .history .section-lead {
  max-width: unset;
  font-size: 16px;
  margin: 0 30px 40px;
 }
 .year {
  font-size: 35px;
 }
 .year.active {
  font-size: 40px;
 }
 .year .year-txt {
  padding: 0 12px;
 }
 .year.active .year-txt {
  transform: scale(1);
 }
 #yearbar-wrap,
 #cards-wrap {
  transform: scale(1);
  transform-origin: top center; /* 左上基準で縮小 */
 }
}

/* スマホ */
@media (max-width: 600px) {
 .history {
  padding-block: 120px 60px;
 }
 .history .section-lead {
  font-size: min(15.7px, 4.18vw);
  margin: 0 20px 20px;
 }
 .year {
  font-size: min(28px, 7.17vw);
 }
 .year.active {
  font-size: min(32px, 8.2vw);
 }
 .cards-nav {
  width: 36px;
  height: 36px;
 }
 .cards-nav.left {
  left: -40px;
 }
 .cards-nav.right {
  right: -40px;
 }
}