/* =====================================================================
   夢ふぉとのあゆみ（年表 / history-era）
   sotsugyoalbum.com /reason/history/ より移植・整理。
   ※ソースは assets/css/sass/modules/history.sass（手動同期）。
   このページで使う history-era 系はリテラル値のみで CSS 変数依存なし。
   ===================================================================== */

#history .history-page { background: #fdfaf6; }
#history .history-page--sazae { background: #f6e9e1; }

/* ===== メインビジュアル（全幅背景 cover ＋中央1200px inner ＋右上に縦書きタイトル）。
   /story/ と構成を統一し、ページ差は高さ（aspect-ratio）のみ ===== */
#history .history-mv {
  width: 100%;
  position: relative;
  aspect-ratio: 4 / 1; /* 高さ（history） */
  background: url("https://ik.imagekit.io/yumephoto/yumeportal/history/bg_history_mv.jpg?tr=n-base,w-1860,h-1016,q-70") center / cover no-repeat;
}

#history .history-mv-inner {
  /* aspect-ratio由来の高さに height:100% が解決されず潰れるため、絶対配置でMVを埋める */
  width: min(1200px, 100% - 48px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* 縦書きタイトルを inner の右上にぴったり（founder の band と同デザイン） */
#history .history-mv-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}
#history .history-mv-title span {
  box-sizing: border-box;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  /* 縁取り3px（参考サイト準拠・全ページ共通） */
  border: 3px solid #C7021E;
  font-size: clamp(24px, 3vw, 34px);
  padding: 22px 14px;
}
#history .history-mv-title span:first-child { background: #fff; color: #C7021E; }
#history .history-mv-title span:last-child { background: #C7021E; color: #fff; margin-top: 3.2em; font-size: clamp(30px, 3.6vw, 40px); }

#history .history-page .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

#history .history-era__header {
  background: #bc162d;
  color: #fff;
  text-align: center;
  padding: 24px 20px;
  display: grid;
  justify-items: center;
}

/* 帯上のロゴ（赤一色の素材を CSS フィルターで白抜き表示） */
#history .history-era__logo { width: auto; height: 28px; filter: brightness(0) invert(1); margin-bottom: 6px; }

/* h2 下（→英字）は詰める */
#history .history-era__jp { margin: 0 0 6px; font-size: 24px; font-weight: 700; line-height: 1.4; }
#history .history-era__en { margin: 0; font-size: 12px; letter-spacing: 0.2em; }

#history .history-era__body { position: relative; background: #f6e9e1; padding: 32px 0 60px; }
#history .history-era--light .history-era__body { background: #fff; }

#history .history-era__entries { position: relative; z-index: 1; }

/* タイムラインの縦罫線。リード上（赤帯〜リード間）には出さず、リード下〜年号〜次の赤帯へ続く */
#history .history-era__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #C7021E;
  transform: translateX(-50%);
  z-index: 0;
}
/* 最後の期は最終年で止める（年表より下に垂らさない） */
#history .history-era:last-of-type .history-era__line { bottom: 60px; }

/* グリコ風：画像＋年号＋テキストを縦に積み、年ごとに中央線の左右へ交互配置 */
#history .history-era__entry {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 50%;
  position: relative;
  margin-bottom: 0;
}
/* 奇数＝中央線の右側（線側＝左を揃える） */
#history .history-era__entry:nth-child(odd) { margin-left: 50%; align-items: flex-start; padding-left: 40px; }
/* 偶数＝中央線の左側（線側＝右を揃える） */
#history .history-era__entry:nth-child(even) { align-items: flex-end; padding-right: 40px; }
/* 中央線上のドット（年号の高さに合わせる） */
#history .history-era__entry:nth-child(odd) .history-era__year::before { content: ""; position: absolute; top: 50%; left: -40px; transform: translate(-50%, -50%); width: 13px; height: 13px; border-radius: 50%; background: #C7021E; }
#history .history-era__entry:nth-child(even) .history-era__year::before { content: ""; position: absolute; top: 50%; right: -40px; transform: translate(50%, -50%); width: 13px; height: 13px; border-radius: 50%; background: #C7021E; }

/* 旧・画像まとめ枠。画像は各リスト項目(li)へ移したため非表示 */
#history .history-era__media { display: none; }

/* 画像。縦積みで年号の上に置く */
#history .history-era__media img { height: 100px; width: auto; max-width: 100%; flex-shrink: 0; filter: drop-shadow(0 10px 16px rgba(90, 76, 70, 0.35)); }
/* 個別の画像サイズ調整（srcのファイル名で指定） */
#history .history-era__media img[src*="history_1998"] { height: 400px; }
#history .history-era__media img[src*="history_2008"] { height: 200px; }
#history .history-era__media img[src*="2018_meijinohito"] { height: 200px; }
/* PC/SP出し分け（picture）。ラッパーはレイアウトに影響させない */
#history .history-era__media picture { display: contents; }
/* 画像も文章も無い枠は高さを取らない */
#history .history-era__media.is-empty { width: 100%; }
/* 一回り小さく表示したい画像用。左右中央に配置 */
#history .history-era__media--sm { align-items: center; }
#history .history-era__media--sm img { max-width: 100%; }
/* さらに小さく表示したい画像用（例：2006）。左右中央に配置 */
#history .history-era__media--xs { align-items: center; }
#history .history-era__media--xs img { max-width: 100%; }
/* ロゴなど最小表示用（例：2019 コドモン）。左右中央に配置 */
#history .history-era__media--xxs { align-items: center; }
#history .history-era__media--xxs img { max-width: 100%; border-radius: 0; filter: none; }
/* 上下をトリミング（中央基準で切り抜き）。例：2008。aspect-ratioで切り抜き量を調整 */
#history .history-era__media--crop img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center -62px; }

/* 年号はテキスト側の見出し（グリコ風）。中央線上のドットは entry 側で付与 */
#history .history-era__year {
  font-size: 40px;
  font-weight: 700;
  color: #C7021E;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 4px 0 10px;
  position: relative;
}

/* h3 26px / line-height 1.4、本文・リストは全ビューポート 16px / line-height 1.8 */
#history .history-era__content { width: 100%; }
#history .history-era__content h3 { margin: 0 0 12px; color: #C7021E; font-size: 26px; line-height: 1.4; }
#history .history-era__content p { margin: 0; font-size: 16px; line-height: 1.8; letter-spacing: 0.1em; text-align: justify; color: #5a4c46; }
#history .history-era__content ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8em; }
#history .history-era__content li { font-size: 16px; line-height: 1.6; letter-spacing: 0.1em; text-align: left; color: #5a4c46; }
/* 画像（上）→ テキスト（下）の縦積み。画像は左寄せ・高さ100px */
#history .history-era__content li img { display: block; height: 100px; width: auto; max-width: none; margin: 24px 0 12px 0; filter: drop-shadow(0 3px 7px rgba(90, 76, 70, 0.28)); }
/* 個別の高さ調整（srcのファイル名で指定） */
#history .history-era__content li img[src*="history_1998"] { height: 300px; }
#history .history-era__content li img[src*="history_2006"] { height: 80px; }
#history .history-era__content li img[src*="history_2008"] { height: 200px; }
#history .history-era__content li img[src*="history_2011"] { height: 100px; }
#history .history-era__content li img[src*="history_2015"] { height: 42px; }
#history .history-era__content li img[src*="history_2016"] { height: 200px; }
#history .history-era__content li img[src*="history_2018"] { height: 140px; }
#history .history-era__content li img[src*="2020_corona"] { height: 193px; }
#history .history-era__content li img[src*="2020_logo_totttte"] { height: 83px; }
#history .history-era__content li img[src*="2021personal"] { height: 178px; }
#history .history-era__content li img[src*="history2017"] { height: 120px; }
#history .history-era__content li img[src*="2017_uniform"] { height: 140px; }
#history .history-era__content li img[src*="2013_pimory"] { height: 170px; }
#history .history-era__content li img[src*="2022_omoide"] { height: 128px; }
#history .history-era__content li img[src*="history_2023"] { height: 200px; }
#history .history-era__content li img[src*="2017_myself"] { height: 200px; }
#history .history-era__content li img[src*="history_2025"] { height: 200px; }
#history .history-era__content li img[src*="2025_sotsualcloud"] { height: 200px; }
#history .history-era__content li img[src*="2024_noto"] { height: 140px; }
/* 左側（偶数）entryの画像は中央線側＝右寄せにして揃える（右側/奇数は左寄せのまま） */
#history .history-era__entry:nth-child(even) .history-era__content li img { margin-left: auto; }
/* 書籍画像は外側に少し傾ける（右エリア/奇数=右回転、左エリア/偶数=左回転） */
#history .history-era__entry:nth-child(odd) .history-era__content li img[src*="2011_yumechan_ehon"],
#history .history-era__entry:nth-child(odd) .history-era__content li img[src*="2018_meijinohito"],
#history .history-era__entry:nth-child(odd) .history-era__content li img[src*="2021_album-therapy"] { transform: rotate(10deg); }
#history .history-era__entry:nth-child(even) .history-era__content li img[src*="2011_yumechan_ehon"],
#history .history-era__entry:nth-child(even) .history-era__content li img[src*="2018_meijinohito"],
#history .history-era__entry:nth-child(even) .history-era__content li img[src*="2021_album-therapy"] { transform: rotate(-5deg); }
/* テキスト本体。・はテキスト側に付ける */
#history .history-era__content li .li-txt { display: block; position: relative; padding-left: 1.2em; }
#history .history-era__content li .li-txt::before { content: "・"; position: absolute; left: 0; color: #C7021E; }
#history .history-era__content a { color: #C7021E; text-decoration: underline; }
/* ・項目の下に1段下げで続くサブ行は14px */
#history .history-era__content .li-sub { font-size: 14px; }
/* 画像を横並び（例：2025 新レイアウトの比較2枚） */
#history .history-era__content .li-imgs-row { display: flex; gap: 12px; align-items: flex-end; margin: 24px 0 12px 0; }
#history .history-era__content .li-imgs-row img { margin: 0; }

/* スクロールで各年（entry）を順に湧き上がらせる（founder同様。.is-reveal はJSが付与＝no-JSでは常時表示） */
#history .history-page.is-reveal .history-era__entry { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
#history .history-page.is-reveal .history-era__entry.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #history .history-page.is-reveal .history-era__entry { opacity: 1; transform: none; transition: none; }
}

/* このページだけ footer 上部の装飾（footer::before）を消す */
#history footer::before { display: none; }
#history footer { margin-top: 40px; }

@media screen and (max-width: 767.5px) {
  #history .history-mv { aspect-ratio: auto; min-height: 280px; }
  #history .history-mv-title span { font-size: 20px; padding: 14px 9px; }
  #history .history-mv-title span:last-child { font-size: 24px; }
  /* 罫線は年号の1桁目と2桁目の間（1998なら1と9の間）を通す */
  #history .history-era__line { left: 40px; }
  /* スマホは1カラム縦積み（従来どおり）。左右交互配置は無効化 */
  #history .history-era__entry { width: 100%; margin-bottom: 40px; }
  #history .history-era__entry:nth-child(odd) { margin-left: 0; padding-left: 40px; align-items: stretch; }
  #history .history-era__entry:nth-child(even) { padding-right: 0; padding-left: 40px; align-items: stretch; }
  /* スマホは罫線(left:40px)上にドット。年号は40px+コンテナ24px=64px位置なので -24px で罫線上 */
  #history .history-era__entry:nth-child(odd) .history-era__year::before { left: -24px; }
  #history .history-era__entry:nth-child(even) .history-era__year::before { right: auto; left: -24px; transform: translate(-50%, -50%); }
  /* 年号は左寄せ見出し */
  #history .history-era__year { order: 1; font-size: 32px; letter-spacing: 0; margin: 0; }
  /* テキスト・画像は線の右へインデント。画像は最後 */
  #history .history-era__content { order: 2; padding-left: 0; }
  /* スマホは1カラムなので左エリア画像も左寄せに戻す */
  #history .history-era__entry:nth-child(even) .history-era__content li img { margin-left: 0; }
  /* スマホは画面幅で頭打ち。比率維持のため object-fit: contain（潰さない） */
  #history .history-era__content li img[src] { width: auto; height: auto; max-width: 100%; max-height: 180px; }
  /* 書籍はスマホでは傾けず、小さめ（max-height 130px） */
  #history .history-era__entry:nth-child(odd) .history-era__content li img[src*="2011_yumechan_ehon"],
  #history .history-era__entry:nth-child(odd) .history-era__content li img[src*="2018_meijinohito"],
  #history .history-era__entry:nth-child(odd) .history-era__content li img[src*="2021_album-therapy"],
  #history .history-era__entry:nth-child(even) .history-era__content li img[src*="2011_yumechan_ehon"],
  #history .history-era__entry:nth-child(even) .history-era__content li img[src*="2018_meijinohito"],
  #history .history-era__entry:nth-child(even) .history-era__content li img[src*="2021_album-therapy"] { transform: none; max-height: 130px; }
  /* 横並び画像はスマホで縦積み */
  #history .history-era__content li .li-imgs-row { flex-direction: column; align-items: flex-start; }
  #history .history-era__media { order: 3; width: 100%; padding-left: 32px; align-items: flex-start; margin-bottom: 0; }
  #history .history-era__media img[src*="history_1998"] { height: 200px; }
  #history .history-era__media--crop img { object-position: center -48px; }
}