@charset "UTF-8";

/* ==========================================================================
   テーマ別ページ専用（/ja/conference/theme.html, /en/conference/theme.html）

   このファイルは theme.html だけが読み込む。conference_preview.css は
   コンファレンスTOP（/ja/conference/index.html）と共有しているため、
   テーマ別ページの都合で書き換えるとTOP側が壊れる。
   例: .conf-session-group は TOP では日付タブ連動で display:none され、
   conference-preview.js が .is-active を付けて1日分だけ出す。

   経緯: ここにある .theme-page スコープの指定はもともと
   conference_preview.css にあったが、abed33ca「stash復元時のコンフリクトを
   解決」で一括削除され、背景ブルー・4カラム・kicker・マップ等が失われていた。
   同じ事故を避けるため、テーマ別ページ固有の指定はこのファイルに集約する。

   読み込み順は conference_preview.css の後。
   ========================================================================== */

/* 日付アンカー（.nav_anc）クリック時、即ジャンプではなく滑らかにスクロールさせる */
html:has(.theme-page) {
  scroll-behavior: smooth;
}

/* ==========================================================================
   1. セッション一覧
   ========================================================================== */

/* Session List のみ単色（Conferenceカラー）背景。直接背景の上に乗るテキスト
   （見出し・説明文・日付見出し）は白系に切り替える。セッションカード自体は
   .conf-session が白背景の箱のため変更不要。
   index.html の Pickup Sessions は conference_preview.css のグラデーションのまま */
.theme-page .conf-sessions {
  margin-top: 40px;
  background: var(--conference);
}

.theme-page .conf-sessions__title {
  color: var(--color-white);
}

.theme-page .conf-sessions__desc {
  color: var(--conf-white-90);
}

/* 日付アンカーのナビ。直後の日付見出し（10月13日(火)）と詰まるため、
   HTML 側の .mgt20（上マージン）はやめて下マージンで離す */
.theme-page .nav_anc {
  margin-bottom: 32px;
}

/* 文字とアイコン（::before の丸囲みの矢印）をコンファレンスカラーにする。
   add.css の既定は #333 */
.theme-page .nav_anc li a {
  color: var(--conference);
}

.theme-page .nav_anc li a::before {
  border-color: var(--conference);
  color: var(--conference);
}

/* データ取得前後の表示切り替え（JS 未実行時は空のブロックが見えないよう隠す） */
.js-theme-tabs:empty,
.js-theme-groups:empty,
.js-theme-slider:empty {
  display: none;
}

.theme-empty {
  display: none;
  margin: 20px 0 0;
  padding: 32px 20px;
  background: var(--color-white);
  color: var(--conf-text-sub);
  font-size: 16px;
  text-align: center;
}

/* ---------- 日付ごとの縦並び全件表示 ----------
   .conf-session-group は index.html の Pickup Sessions（タブで1日ずつ切り替え）
   と共用のクラス。テーマ別ページは conference.theme.api.js が is-active を
   一切付与せず全日程を常時表示するため、.theme-page 配下だけ打ち消す。 */
.theme-page .conf-session-groups {
  display: block !important;
  overflow-x: visible !important;
}

.theme-page .conf-session-group {
  display: block !important;
  flex: none !important;
  margin: 0;
  scroll-margin-top: 110px;
}

.theme-page .conf-session-group + .conf-session-group {
  margin-top: 40px;
}

/* 日付見出し。左に日付、右に前後の日付ブロックへのアンカー */
.theme-page .conf-session-group__date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--conf-white-45);
}

.theme-page .conf-session-group__label {
  color: var(--color-white);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
}

.theme-page .conf-session-group__anchors {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-page .conf-session-group__anchor {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--conf-white-45);
  border-radius: 999px;
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.theme-page .conf-session-group__anchor:hover {
  background: var(--conf-white-90);
  border-color: var(--color-white);
  color: var(--conference);
}

.theme-page .conf-session-group__anchor .material-icons {
  font-size: 16px;
}

/* ---------- 各セッション行 ----------
   並びは「時刻 / 本文 / サムネイル」。サムネイルは右端。
   本文の先頭にセッションIDとステージを置く */
.theme-page .conf-session__thumb {
  order: 3;
  flex: 0 0 160px;
  width: 160px;
  margin: 0 0 0 16px;
  align-self: flex-start;
  overflow: hidden;
  border-radius: 4px;
  background: var(--conf-placeholder);
  aspect-ratio: 16 / 9;
}

.theme-page .conf-session__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme-page .conf-session__main {
  order: 2;
}

/* セッションID・ステージ。タイトルの真上に横並びで置く */
.theme-page .conf-session__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}

.theme-page .conf-session__meta .conf-session__code {
  display: inline-block;
}

.theme-page .conf-session__meta .conf-session__place {
  text-align: left;
}

/* タイトルの font-size 指定を外す。conference_preview.css は TOP と共有で、
   .conf-session__title に 14px（1119px以下は 13px）が入っている。
   共有側を消すと TOP の一覧まで変わるため、テーマ別ページだけ継承に戻す
   （継承値は 16px。実測で body / .conf-session__main とも 16px） */
.theme-page .conf-session__title {
  font-size: inherit;
}

/* ステージ名。共有側の --conf-meta（淡いブルーグレー）は白背景で読みにくいため、
   色指定をやめて本文の色を継承させる。文字サイズは共有側の 12px のまま */
.theme-page .conf-session__place {
  color: inherit;
}

/* セッションIDのバッジ。共有側の --conf-code-bg（#afbecd）は白文字との
   コントラストが 1.9:1 しかなく読めないため、コンファレンスブルーにする */
.theme-page .conf-session__code {
  background: var(--conference);
}

/* セッションタイトルへのリンク（一覧の見た目は維持） */
.conf-session__title a {
  color: inherit;
  text-decoration: none;
}

.conf-session__title a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   2. 見出しの英字小見出し（kicker）
   ========================================================================== */

/* 見出し（h3）内側に入れる英字の小見出し行。
   JA版のみで使用（EN版は見出し自体が既に英語のため重複を避けて付けない） */
.theme-kicker {
  display: block;
  margin: 0 0 4px;
  color: var(--conf-heading);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* ==========================================================================
   3. ステージの位置（マップ）
   ========================================================================== */

.theme-map {
  background: var(--conf-panel);
}

.theme-map__inner {
  padding: 5px 40px 56px;
  text-align: center;
}

.theme-map__figure {
  margin: 20px 0 0;
}

.theme-map__figure img {
  display: block;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

/* ==========================================================================
   4. ほかのテーマを見る
   ========================================================================== */

/* ホバーの浮き上がり（.conf-theme:hover）は conference_preview.css 側で共通定義 */

/* 「ほかのテーマ」カードの Session Theme 0X */
.conf-theme__num {
  display: block;
  color: var(--conf-accent-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* テーマ一覧カードをリンク化したぶんの見た目リセット */
.conf-theme__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.theme-others .conf-themes__inner {
  padding-top: 5px;
}

/* 表示中のテーマを除いた残り4件固定のため、.conf-themes__list 標準の3列
   （4件だと3+1で割り切れない）ではなく横4列で1行に収める。
   タブレット・SPは既存の .conf-theme 挙動（2列→1列）に揃える */
.theme-others .conf-theme {
  flex: 0 0 calc(25% - 15px);
}

/* ==========================================================================
   6. ブレークポイント
   ========================================================================== */

@media screen and (max-width: 1119px) {
  /* 共有側の .conf-session__title は 1119px 以下で 13px になるため、
     ここでも継承に戻し直す */
  .theme-page .conf-session__title {
    font-size: inherit;
  }

  .theme-map__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .theme-others .conf-theme {
    flex-basis: calc(50% - 10px);
  }
}

@media screen and (max-width: 767px) {
  .theme-page .conf-session-group__label {
    font-size: 19px;
  }

  .theme-page .conf-session-group__anchor-text {
    display: none;
  }

  .theme-page .conf-session-group__anchor {
    padding: 4px 6px;
  }

  /* SPは時刻カラムと本文に幅を残したいので、PCの160pxより絞る */
  .theme-page .conf-session__thumb {
    flex-basis: 96px;
    width: 96px;
    margin-left: 12px;
  }

  .theme-map__inner {
    padding: 40px 20px 48px;
  }

  .theme-others .conf-theme {
    flex-basis: 100%;
  }
}