@charset "UTF-8";

/* ==========================================================================
   CEATEC 2026 トップページ（来場者向け）
   ページ構成: MV / News / Theme / Exhibition / Conference / Venue / Award / 併催
   ========================================================================== */

.top-2026 {
  --navy: #0a1a4a;
  --navy-2: #12245e;
  --navy-3: #17307a;
  --blue: #2a5bd7;
  --blue-2: #3a7bd5;
  --blue-light: #6da4ff;
  --pink: #e5006e;
  --pink-2: #ff2e8b;
  --gold: #8f7526;
  --gold-2: #c7a94a;
  --text: #1f2f59;
  --text-sub: #5a6a8a;
  --line: #d8dfec;

  /* コンテンツ左右の内側余白。1440px 超は中央寄せの余白（--gutter）が受け持つので 0、
     1440px 以下は下の @media で 30px を入れる */
  --pad: 0px;
  /* 基本コンテンツ領域(max-width: 1440px, 中央寄せ)の左端位置。
     ビューポートが 1440px 以下なら 0（＝画面端）になる */
  --gutter: max(0px, (100vw - 1440px) / 2);
  /* セクション(ビューポート幅いっぱい)の端からコンテンツ内側までの距離。
     背景を画面端まで出血させる要素（お知らせカード・タイムラインの罫線など）の基準に使う */
  --bleed: calc(var(--gutter) + var(--pad));

  overflow-x: hidden;
  color: var(--text);
  font-size: 16px;
  line-height: 1.9;
}

/* 1440px 以下は中央寄せの余白が無くなり本文が画面端に接するため、左右に 30px を確保する。
   --pad は共通インナー・ゴースト・出血計算がすべて参照しているので、ここ 1 か所で揃う */
@media screen and (max-width: 1440px) {
  .top-2026 {
    --pad: 30px;
  }
}

.top-2026 img {
  max-width: 100%;
  height: auto;
}

.top-2026 section {
  position: relative;
  overflow: hidden;
}

/* ---------- 共通インナー ---------- */

.mv__release {
    display: inline-flex;
    align-items: stretch;
    margin: 44px 0 0;
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, var(--conf-release-grad-start) 0%, var(--conf-release-grad-end) 100%);
}

.mv__release-label {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    background: var(--conf-navy-overlay-38);
    border-right: 1px solid var(--conf-white-45);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.mv__release-date {
    display: flex;
    align-items: baseline;
    align-self: center;
    gap: 0;
    padding: 10px 24px;
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* TOP MV内の「全セッション公開」バナー。マークアップは .conf-mv__release-label/date を
   流用しているが、conference_preview.css の --conf-* 変数（グラデーション背景等）が
   このページには無いため、.mv__release 配下だけ配色を独自に指定する */
.mv__release {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  /* 2枚目スライドの .top-mv--2 .top-mv__inner { text-shadow } は継承プロパティなので、
     ここで打ち消す（背景が塗りのボックスなのでシャドウは不要） */
  text-shadow: none;
}

.mv__release .mv__release-label {
  background: var(--ceatecblue);
}

.mv__release .mv__release-date {
  background: #fff;
  color: var(--ceatecblue);
}
.mv__release .mv__release-date .mv__release-num,
.mv__release .mv__release-date .mv__release-highlight {
  font-size: 24px;
}


/* NOTE: .top-exhibition__inner はここには含めない。Exhibition は右側ギャラリーを
   ビューポート右端まで出血させるため、専用の .top-exhibition__layout 側で
   左端位置だけをこの共通インナーと揃える形で個別に管理している（Exhibitionセクション参照） */
.top-2026 .top-mv__inner,
.top-2026 .top-news__inner,
.top-2026 .top-theme__inner,
.top-2026 .top-conference__inner,
.top-2026 .top-timeline__inner,
.top-2026 .top-venue__inner,
.top-2026 .top-award__inner,
.top-2026 .top-colocated__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* 基本コンテンツ領域の最大幅は 1440px。それを超える幅は中央寄せにする */
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
  /* 一括指定にすると各セクション側の padding-top を打ち消すため左右だけを指定する */
  padding-right: var(--pad);
  padding-left: var(--pad);
}

/* ---------- 共通見出し ---------- */
.top-label {
  position: relative;
  margin: 0 0 12px;
  padding-left: 16px;
  color: var(--text);
  /* デザインでは「・」付きのこの行が主見出しで、下の h2 が小さい副見出しになる */
  font-size: 28px;
  /* LINE Seed JP で読み込んでいる中で一番太いウェイト */
  font-weight: 800;
  line-height: 1.5;
}

.top-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.top-label--light {
  color: #fff;
}

/* デザインでは見出し前のドットの色がセクションごとに違い、
   それぞれのセクション内で使っているアクセントカラーに揃えてある */
.top-exhibition .top-label::before {
  background: #2e4ed2;
}

.top-conference .top-label::before {
  background: #2d86c0;
}

.top-award .top-label::before {
  background: #d9cd00;
}

.top-h2 {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.top-h2--light {
  color: #fff;
}

.top-desc {
  margin: 0;
  color: var(--text-sub);
  font-size: 16px;
  line-height: 1.9;
}

.top-desc--light {
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- 背景の大きな英字（ゴースト） ---------- */
.top-ghost {
  position: absolute;
  z-index: 1;
  /* 本文の左端に揃える。本文は 1440px の基本コンテンツ領域の左端 + 内側余白から始まる */
  left: calc(var(--gutter) + var(--pad));
  top: 0;
  display: block;
  white-space: nowrap;
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-size: clamp(48px, 12vw, 115px);
  line-height: 0.75;
  letter-spacing: 0.005em;
  pointer-events: none;
  user-select: none;
}

.top-ghost--light {
  color: rgba(255, 255, 255, 0.16);
}

.top-ghost--dark {
  color: rgba(31, 47, 89, 0.09);
}

/* ---------- 共通ボタン ---------- */
.top-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.top-btns--left {
  justify-content: flex-start;
}

.top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 180px;
  padding: 12px 26px;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.top-btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.top-btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  color: #fff;
}

.top-btn--sm {
  min-width: 0;
  padding: 12px 24px;
  font-size: 14px;
}

.top-btn--pink {
  background: var(--pink);
  box-shadow: 0 6px 20px rgba(229, 0, 110, 0.32);
}

.top-btn--navy {
  background: var(--navy);
}

.top-btn--outline {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.top-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.top-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

/* 白ベタ + 文字はセクションの背景色。Exhibition(#01056b)の上で使う想定。
   .top-btn:hover が color:#fff を当てるので、hover 側で色を戻している */
.top-btn--white {
  background: #fff;
  color: #01056b;
}

.top-btn--white:hover {
  color: #01056b;
}

/* デザインは彩度の高い山吹色地＋濃紺文字。アワードブロックのキーカラー */
.top-btn--gold {
  background: #d9cd00;
  color: var(--navy);
}

.top-btn--gold:hover {
  color: var(--navy);
}

.top-btn__ext {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 2px;
  position: relative;
}

.top-btn__ext::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

/* ==========================================================================
   ヘッダー（トップページのみ）
   デザインではヘッダー自身の背景を持たず、MV の絵がヘッダー位置まで続いた上に
   紺の半透明帯（共通の .header-title-2026 .header-2026）が乗る。
   共通ヘッダーを他ページで壊さないよう body.top-page に限定する
   ========================================================================== */

body.top-page .header-title-2026 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding-bottom: 0;
  background: transparent;
}

/* ヘッダー自前の動く背景と下端の波は、MV を透かすため出さない */
body.top-page .header-title-2026__bg,
body.top-page .header-title-2026__wave {
  display: none;
}

/* ==========================================================================
   MV
   ========================================================================== */

/* ---------- MV スライダー ----------
   .top-mv を 1 枚のスライドとして横に並べ、top-mv-slider.js が translateX で送る。
   スライドの増減は HTML の .top-mv を足し引きするだけでよい（ドットは JS が枚数ぶん生成する）。
   JS が動かない場合は 1 枚目だけが見える状態になる（内容は普通に読める） */
.top-mvslider {
  position: relative;
  overflow: hidden;
  cursor: grab;
}

.top-mvslider.is-dragging {
  cursor: grabbing;
}

.top-mvslider__track {
  display: flex;
  align-items: stretch;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.top-mvslider__track > .top-mv {
  flex: 0 0 100%;
  max-width: 100%;
}

.top-mvslider__nav {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 3;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.top-mvslider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.top-mvslider__dot:hover {
  background: rgba(255, 255, 255, 0.75);
}

.top-mvslider__dot.is-current {
  width: 28px;
  background: #fff;
}

/* 1枚目（キービジュアル）：既存の配色（青・紫）を明るく半透明にした「グラスリキッド」風の
   背景に、右側だけ会場写真(mv_img_01.webp)を薄く覗かせる。文字色は白→#333に切り替える
   （.top-mv__inner の色上書きは下の「1枚目の文字色」ブロック） */
.top-mv.top-mv--kv {
  background-color: #e9edfb;
  background-image: url("/2026/ja/images/mv_img_01.webp");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

/* ガラス越しに写真を透かす膜。左(文字側)を濃く・右(写真側)を薄くして可読性を確保し、
   backdrop-filter で写真自体をぼかして「グラスリキッド」の質感にする */
.top-mv--kv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg,
    rgba(197, 195, 230, 0.94) 0%,
    rgba(197, 198, 233, 0.88) 32%,
    rgba(193, 212, 235, 0.55) 65%,
    rgba(193, 206, 228, 0.22) 100%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* 写真の上では既存のガラス風の動く光(青・紫のぼかし玉)が馴染まないため出さない
   （.top-mv--photo .top-mv__bg と同じ考え方） */
.top-mv--kv .top-mv__bg {
  display: none;
}

/* 1枚目の文字色。他スライドは紺背景に白文字のままなので、ここだけ上書きする */
.top-mv--kv .top-mv__inner {
  color: #333;
}

.top-mv--kv .top-mv__co {
  color: rgba(51, 51, 51, 0.75);
}

.top-mv--kv .top-mv__title {
  text-shadow: none;
}

/* 2枚目以降の背景。差し替え時はこの色を各スライドの内容に合わせて変える。
   .top-mv 本体の background 指定がこの下に来るので、クラスを2つ重ねて詳細度で勝たせる */
/* 2枚目：会場の光をとらえた明るい写真。文字が沈むので .top-mv--photo の暗い膜と併用する
   （背景色は画像の読み込み前・読み込み失敗時の下地） */
.top-mv.top-mv--2 {
  background-color: #0b1a86;
  background-image: url("/2026/asset2026/images/mv_img_02.webp");
}

/* 3枚目：コンファレンス会場の写真を --conference の上に敷く。
   写真自体が暗いので膜は薄め。左右の円形ぼかし玉は使わず、左から右への
   グラデーション影(::before)だけで文字の可読性を確保する */
.top-mv.top-mv--3 {
  background-color: var(--conference);
  background-image: url("/2026/asset2026/images/mv_img_03.webp");
  background-repeat: no-repeat;
  background-position: center 35%;
  background-size: cover;
}

.top-mv--3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(6, 20, 44, 0.82) 0%, rgba(6, 20, 44, 0.5) 50%, rgba(6, 20, 44, 0.12) 100%);
}

/* 円形のぼかし玉・光の筋は出さない（.top-mv--photo .top-mv__bg と同じ考え方） */
.top-mv--3 .top-mv__bg {
  display: none;
}

/* 写真を敷くスライド用。使い方は
     <section class="top-mv top-mv--photo" style="background-image:url(/2026/ja/images/mv02.webp)">
   背景画像の上に暗いグラデーションを重ねて、白文字が読める明るさに落とす。
   文字側（.top-mv__inner）は共通インナーの z-index:2 で常にこの膜より上に来る */
.top-mv.top-mv--photo {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.top-mv--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 10, 40, 0.88) 0%, rgba(5, 10, 40, 0.6) 45%, rgba(5, 10, 40, 0.15) 100%);
}

/* 写真の上ではガラス風の動く光は邪魔になるので出さない */
.top-mv--photo .top-mv__bg {
  display: none;
}

/* 2枚目は暗い膜を敷かず、写真をそのまま見せる。文字はドロップシャドウで可読性を確保する */
.top-mv--2::before {
  content: none;
}

.top-mv--2 .top-mv__inner {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.top-mv--2 .top-mv__title {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.top-mv {
  position: relative;
  display: flex;
  align-items: center;
  /* 流用時に基本 16:9 に近い見た目・画面バランスになるよう、コンテンツ最大幅(1440px)基準で高さを確保
     （box-sizing:border-box のため、この値がそのまま外枠の高さになる） */
  min-height: 800px;
  /* 上余白はヘッダーが重なる分（約76px）を含む。デザインでは見出しの上端が 121px */
  padding: 130px 0 72px;
  background: linear-gradient(160deg, #16109b 0%, #101ca7 32%, #0754ad 70%, #073a94 100%);
  isolation: isolate;
}

.top-mv__bg {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.top-mv__glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, border-radius, opacity;
}

.top-mv__glow--1 {
  width: 58vw;
  height: 58vw;
  min-width: 540px;
  min-height: 540px;
  left: -18vw;
  bottom: -24vw;
  filter: blur(90px);
  background: radial-gradient(circle at 44% 42%, rgba(30, 0, 236, 1) 0%, rgba(30, 0, 236, 0.72) 30%, rgba(18, 30, 223, 0.25) 58%, rgba(18, 30, 223, 0) 76%);
  animation: top-mv-float-a 19s ease-in-out infinite;
}

.top-mv__glow--2 {
  width: 52vw;
  height: 52vw;
  min-width: 500px;
  min-height: 500px;
  left: 26vw;
  bottom: -22vw;
  filter: blur(82px);
  background: radial-gradient(circle at 48% 44%, rgba(9, 125, 115, 1) 0%, rgba(9, 119, 114, 0.78) 31%, rgba(6, 93, 110, 0.3) 58%, rgba(6, 93, 110, 0) 76%);
  animation: top-mv-float-b 23s ease-in-out infinite;
}

.top-mv__glow--3 {
  width: 34vw;
  height: 62vw;
  min-width: 340px;
  min-height: 580px;
  right: -12vw;
  bottom: -18vw;
  filter: blur(78px);
  background: radial-gradient(ellipse at 50% 48%, rgba(103, 94, 255, 0.98) 0%, rgba(86, 91, 255, 0.66) 34%, rgba(56, 84, 244, 0.2) 62%, rgba(56, 84, 244, 0) 78%);
  animation: top-mv-float-c 27s ease-in-out infinite;
}

.top-mv__glow--4 {
  width: 70vw;
  height: 70vw;
  min-width: 700px;
  min-height: 700px;
  right: -22vw;
  top: -32vw;
  opacity: 0.78;
  filter: blur(115px);
  background: radial-gradient(circle, rgba(26, 92, 255, 0.64) 0%, rgba(28, 72, 234, 0.3) 43%, rgba(28, 72, 234, 0) 75%);
  animation: top-mv-float-b 31s ease-in-out infinite reverse;
}

.top-mv__glow--5 {
  width: 30vw;
  height: 30vw;
  min-width: 300px;
  min-height: 300px;
  right: 4vw;
  bottom: 4%;
  opacity: 0.84;
  filter: blur(68px);
  background: radial-gradient(circle, rgba(149, 70, 255, 0.82) 0%, rgba(121, 68, 255, 0.36) 47%, rgba(121, 68, 255, 0) 74%);
  animation: top-mv-float-c 21s ease-in-out infinite;
}

.top-mv__glow--6 {
  width: 30vw;
  height: 30vw;
  min-width: 320px;
  min-height: 320px;
  left: 40vw;
  top: -8vw;
  opacity: 0.58;
  filter: blur(72px);
  background: radial-gradient(circle, rgba(41, 71, 255, 0.68) 0%, rgba(41, 71, 255, 0.25) 46%, rgba(41, 71, 255, 0) 75%);
  animation: top-mv-float-a 25s ease-in-out infinite reverse;
}

/* 流れる光の筋 */
.top-mv__streak {
  position: absolute;
  display: block;
  height: 42vh;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(38px);
  opacity: 0.55;
  will-change: transform, opacity;
}

.top-mv__streak--1 {
  width: 46vw;
  left: -10vw;
  top: 12%;
  background: linear-gradient(100deg, rgba(0, 224, 255, 0) 0%, rgba(0, 224, 255, 0.55) 45%, rgba(120, 160, 255, 0) 100%);
  transform: rotate(-16deg);
  animation: top-mv-streak-a 17s ease-in-out infinite;
}

.top-mv__streak--2 {
  width: 54vw;
  right: -14vw;
  top: 34%;
  background: linear-gradient(80deg, rgba(255, 255, 255, 0) 0%, rgba(180, 220, 255, 0.5) 50%, rgba(90, 120, 255, 0) 100%);
  transform: rotate(12deg);
  animation: top-mv-streak-b 22s ease-in-out infinite;
}

.top-mv__streak--3 {
  width: 40vw;
  left: 22vw;
  bottom: -6%;
  height: 30vh;
  background: linear-gradient(90deg, rgba(60, 255, 220, 0) 0%, rgba(60, 235, 220, 0.4) 50%, rgba(60, 120, 255, 0) 100%);
  transform: rotate(-6deg);
  animation: top-mv-streak-a 26s ease-in-out infinite reverse;
}

@keyframes top-mv-float-a {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    border-radius: 52% 48% 45% 55% / 50% 54% 46% 50%;
  }
  33% {
    transform: translate3d(6vw, -4vh, 0) scale(1.16) rotate(9deg);
    border-radius: 38% 62% 58% 42% / 62% 38% 62% 38%;
  }
  66% {
    transform: translate3d(-4vw, 5vh, 0) scale(0.94) rotate(-7deg);
    border-radius: 64% 36% 40% 60% / 36% 64% 36% 64%;
  }
}

@keyframes top-mv-float-b {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1.04) rotate(0deg);
    border-radius: 46% 54% 60% 40% / 44% 58% 42% 56%;
  }
  40% {
    transform: translate3d(-7vw, 4vh, 0) scale(1.24) rotate(-11deg);
    border-radius: 66% 34% 38% 62% / 60% 40% 60% 40%;
  }
  75% {
    transform: translate3d(5vw, -5vh, 0) scale(0.9) rotate(8deg);
    border-radius: 34% 66% 62% 38% / 40% 62% 38% 60%;
  }
}

@keyframes top-mv-float-c {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.96) rotate(0deg);
    border-radius: 58% 42% 42% 58% / 56% 44% 56% 44%;
  }
  30% {
    transform: translate3d(-5vw, -6vh, 0) scale(1.2) rotate(12deg);
    border-radius: 40% 60% 66% 34% / 34% 66% 34% 66%;
  }
  70% {
    transform: translate3d(6vw, 3vh, 0) scale(1.06) rotate(-9deg);
    border-radius: 62% 38% 34% 66% / 66% 34% 66% 34%;
  }
}

@keyframes top-mv-streak-a {
  0%, 100% {
    transform: translate3d(-6vw, 0, 0) rotate(-16deg) scaleX(1);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(10vw, 5vh, 0) rotate(-9deg) scaleX(1.18);
    opacity: 0.7;
  }
}

@keyframes top-mv-streak-b {
  0%, 100% {
    transform: translate3d(5vw, 0, 0) rotate(12deg) scaleX(1.1);
    opacity: 0.3;
  }
  50% {
    transform: translate3d(-8vw, -6vh, 0) rotate(5deg) scaleX(0.92);
    opacity: 0.65;
  }
}

.top-mv__inner {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* キービジュアルを置くスライド（.top-mv--kv）だけ「左テキスト + 右画像」の横並びにする */
.top-mv--kv .top-mv__inner {
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.top-mv__body {
  flex: 1 1 0%;
  min-width: 0;
}

/* 背景ではなく実体の画像として置く。元画像は透過 PNG(webp) なので背景の紺がそのまま透ける */
.top-mv__visual {
  flex: 0 0 auto;
  width: clamp(220px, 30vw, 600px);
  margin: 0;
}

.top-mv__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.top-mv.is-current .top-mv__visual {
  animation: top-fade-up 1s ease-out 0.2s both;
}

.top-mv__title {
  margin: 0;
  margin-top: auto;
  font-size: clamp(39px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}

.top-mv__lead {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.top-mv__date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.top-mv__co {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.top-mv__co .jms_logo {
  width: 250px;
  max-width: 100%;
  height: auto;
}

.top-mv__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 13px;
  margin-top: 24px;
}
.top-mv__btns .btn_registration{
  margin-left: 0;
  margin-right: 0;
  max-width: 300px;
}

/* MVのボタンはデザイン上、幅を文字量に合わせた角丸長方形（ピル型ではない） */
.top-mv__btns .top-btn {
  min-width: 0;
  padding: 10px 18px;
  border-radius: 5px;
}

/* MV内のみ配色を上書き（--pink/--outline の定義自体は他ページと共有のため触らない） */
.top-mv__btns .top-btn--pink {
  background: linear-gradient(100deg, #0b1a86 0%, #1146d8 100%);
  box-shadow: none;
}

.top-mv__btns .top-btn--outline {
  background: #070a67;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* MV の文字送り。スライドが表示されたときに毎回再生されるよう .is-current に紐づける
   （JS が動かないときはアニメーションなしでそのまま見える） */
.top-mv.is-current .top-mv__title { animation: top-fade-up 1s ease-out both; }
.top-mv.is-current .top-mv__lead  { animation: top-fade-up 1s ease-out 0.12s both; }
.top-mv.is-current .top-mv__date  { animation: top-fade-up 1s ease-out 0.24s both; }
.top-mv.is-current .top-mv__co    { animation: top-fade-up 1s ease-out 0.3s both; }
.top-mv.is-current .top-mv__btns  { animation: top-fade-up 1s ease-out 0.4s both; }

@keyframes top-fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   News & Topics / テーマ 共有背景（柔らかいリング状モーション、bg_rings.html を移植）
   News と Theme はこの .top-newstheme に内包され、背景を共有する
   ========================================================================== */

.top-newstheme {
  --page-bg: #f4f4f4;
  position: relative;
  overflow: hidden;
  background: var(--page-bg);
}

.top-newstheme__rings {
  /* リングの再生速度。各アニメーションの秒数にこの係数を掛けている。
     1 = 移植時の速さ / 0.5 = 2倍速。値を下げるほど速くなる（ここ 1 か所で全リングを調整できる） */
  --nt-speed: 0.5;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

/* お知らせカードを上端に寄せた分、背景の大きな英字を置く余地がないため非表示
   （デザインでもこの位置にゴースト文字はない） */
.top-newstheme__ghost {
  display: none;
}

.top-newstheme__rings .ring {
  position: absolute;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.top-newstheme__rings .ring-inner {
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform;
}

.top-newstheme__rings .ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.top-newstheme__rings .ring-yellow-lg .shape-fill,
.top-newstheme__rings .ring-pink-lg .shape-fill,
.top-newstheme__rings .ring-blue-lg .shape-fill {
  filter: blur(36px);
  opacity: .82;
}

.top-newstheme__rings .ring-green .shape-fill,
.top-newstheme__rings .ring-orange .shape-fill {
  filter: blur(28px);
  opacity: .84;
}

.top-newstheme__rings .ring-red-sm .shape-fill,
.top-newstheme__rings .ring-purple .shape-fill,
.top-newstheme__rings .ring-blue-sm .shape-fill {
  filter: blur(20px);
  opacity: .86;
}

.top-newstheme__rings .shape-stroke {
  filter: blur(8px);
  opacity: .38;
}

.top-newstheme__rings .ring-red-sm {
  width: 352px; height: 368px; left: 2vw; top: -5%;
  animation: nt-drift-red-sm calc(10s * var(--nt-speed)) ease-in-out infinite alternate;
}
.top-newstheme__rings .ring-red-sm .ring-inner { animation: nt-pulse-red-sm calc(7s * var(--nt-speed)) ease-in-out infinite alternate; }

.top-newstheme__rings .ring-yellow-lg {
  width: 712px; height: 688px; left: -8vw; top: 4%;
  animation: nt-drift-yellow-lg calc(14s * var(--nt-speed)) ease-in-out infinite alternate;
}
.top-newstheme__rings .ring-yellow-lg .ring-inner { animation: nt-pulse-yellow-lg calc(9s * var(--nt-speed)) ease-in-out infinite alternate; }

.top-newstheme__rings .ring-green {
  width: 592px; height: 488px; left: -10vw; top: 51%;
  animation: nt-drift-green calc(13s * var(--nt-speed)) ease-in-out infinite alternate;
}
.top-newstheme__rings .ring-green .ring-inner { animation: nt-pulse-green calc(8s * var(--nt-speed)) ease-in-out infinite alternate; }

.top-newstheme__rings .ring-purple {
  width: 392px; height: 240px; left: 30vw; top: -5%;
  animation: nt-drift-purple calc(9s * var(--nt-speed)) ease-in-out infinite alternate;
}
.top-newstheme__rings .ring-purple .ring-inner { animation: nt-pulse-purple calc(6.5s * var(--nt-speed)) ease-in-out infinite alternate; }

.top-newstheme__rings .ring-pink-lg {
  width: 640px; height: 600px; left: 52vw; top: -12%;
  animation: nt-drift-pink-lg calc(15s * var(--nt-speed)) ease-in-out infinite alternate;
}
.top-newstheme__rings .ring-pink-lg .ring-inner { animation: nt-pulse-pink-lg calc(10s * var(--nt-speed)) ease-in-out infinite alternate; }

.top-newstheme__rings .ring-blue-sm {
  width: 368px; height: 352px; right: -7vw; top: 0;
  animation: nt-drift-blue-sm calc(11s * var(--nt-speed)) ease-in-out infinite alternate;
}
.top-newstheme__rings .ring-blue-sm .ring-inner { animation: nt-pulse-blue-sm calc(7.5s * var(--nt-speed)) ease-in-out infinite alternate; }

.top-newstheme__rings .ring-blue-lg {
  width: 648px; height: 552px; left: 38vw; top: 34%;
  animation: nt-drift-blue-lg calc(12s * var(--nt-speed)) ease-in-out infinite alternate;
}
.top-newstheme__rings .ring-blue-lg .ring-inner { animation: nt-pulse-blue-lg calc(8.5s * var(--nt-speed)) ease-in-out infinite alternate; }

.top-newstheme__rings .ring-orange {
  width: 472px; height: 512px; left: 65vw; top: 59%;
  animation: nt-drift-orange calc(13s * var(--nt-speed)) ease-in-out infinite alternate;
}
.top-newstheme__rings .ring-orange .ring-inner { animation: nt-pulse-orange calc(9s * var(--nt-speed)) ease-in-out infinite alternate; }

@keyframes nt-drift-red-sm {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(36px,40px,0) rotate(8deg); }
  50% { transform: translate3d(-24px,64px,0) rotate(-6deg); }
  75% { transform: translate3d(30px,24px,0) rotate(10deg); }
  100% { transform: translate3d(56px,72px,0) rotate(16deg); }
}
@keyframes nt-drift-yellow-lg {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(56px,-32px,0) rotate(-6deg); }
  50% { transform: translate3d(36px,44px,0) rotate(8deg); }
  75% { transform: translate3d(84px,-16px,0) rotate(-4deg); }
  100% { transform: translate3d(110px,36px,0) rotate(12deg); }
}
@keyframes nt-drift-green {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(50px,-28px,0) rotate(-8deg); }
  50% { transform: translate3d(16px,36px,0) rotate(10deg); }
  75% { transform: translate3d(72px,-40px,0) rotate(-4deg); }
  100% { transform: translate3d(96px,20px,0) rotate(14deg); }
}
@keyframes nt-drift-purple {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(32px,20px,0) rotate(6deg); }
  50% { transform: translate3d(-16px,36px,0) rotate(-8deg); }
  75% { transform: translate3d(24px,12px,0) rotate(4deg); }
  100% { transform: translate3d(48px,40px,0) rotate(12deg); }
}
@keyframes nt-drift-pink-lg {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(-44px,32px,0) rotate(-6deg); }
  50% { transform: translate3d(-76px,68px,0) rotate(8deg); }
  75% { transform: translate3d(-20px,16px,0) rotate(-4deg); }
  100% { transform: translate3d(-104px,56px,0) rotate(14deg); }
}
@keyframes nt-drift-blue-sm {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(-28px,32px,0) rotate(-6deg); }
  50% { transform: translate3d(-52px,60px,0) rotate(8deg); }
  75% { transform: translate3d(-20px,12px,0) rotate(-2deg); }
  100% { transform: translate3d(-68px,48px,0) rotate(12deg); }
}
@keyframes nt-drift-blue-lg {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(32px,-24px,0) rotate(6deg); }
  50% { transform: translate3d(-24px,44px,0) rotate(-10deg); }
  75% { transform: translate3d(60px,-10px,0) rotate(8deg); }
  100% { transform: translate3d(84px,52px,0) rotate(18deg); }
}
@keyframes nt-drift-orange {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(-28px,-36px,0) rotate(6deg); }
  50% { transform: translate3d(-56px,16px,0) rotate(-8deg); }
  75% { transform: translate3d(-16px,-52px,0) rotate(4deg); }
  100% { transform: translate3d(-72px,-24px,0) rotate(14deg); }
}

@keyframes nt-pulse-red-sm { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1.16)} }
@keyframes nt-pulse-yellow-lg { 0%{transform:scale(1)} 50%{transform:scale(1.10)} 100%{transform:scale(1.18)} }
@keyframes nt-pulse-green { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1.14)} }
@keyframes nt-pulse-purple { 0%{transform:scale(1)} 50%{transform:scale(1.10)} 100%{transform:scale(1.20)} }
@keyframes nt-pulse-pink-lg { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1.16)} }
@keyframes nt-pulse-blue-sm { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1.16)} }
@keyframes nt-pulse-blue-lg { 0%{transform:scale(1)} 50%{transform:scale(1.10)} 100%{transform:scale(1.20)} }
@keyframes nt-pulse-orange { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1.16)} }

/* ==========================================================================
   News & Topics
   ========================================================================== */

/* デザインではカードがMV下端にほぼ密着するため、上の余白はほぼ取らない */
.top-news {
  position: relative;
  z-index: 2;
  padding: 8px 0 12px;
  /* インナーの左右内側からビューポート端までの距離。背景を画面端まで伸ばすのに使う */
  --news-bleed: var(--bleed);
}

/* デザインでは 1 枚のカードではなく、見出し側と一覧側で背景が分かれ、
   それぞれ画面の左端・右端まで伸びる。背景のリングを透かすため不透明にはしない */
.top-news__card {
  display: flex;
  align-items: stretch;
  gap: 9px;
}

.top-news__head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin-left: calc(-1 * var(--news-bleed));
  padding: 16px 36px 16px var(--news-bleed);
  /* 外側は画面端まで出血するので、角丸は切れ目に面した内側だけに付ける */
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.55);
}

.top-news__title {
  margin: 0;
  color: var(--text);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
}

/* デザインには縦罫線も行間の罫線もないため、区切りは余白と背景の切れ目だけで表現する */
.top-news__list {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0 calc(-1 * var(--news-bleed)) 0 0;
  padding: 8px var(--news-bleed) 8px 36px;
  border-radius: 8px 0 0 8px;
  background: rgba(255, 255, 255, 0.55);
}

.top-news__item a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.top-news__item a:hover {
  background: #f6f8fc;
}

.top-news__date {
  flex-shrink: 0;
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.top-news__cats {
  flex-shrink: 0;
}

.top-news__cat {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--navy-3);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.top-news__text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ==========================================================================
   テーマ / 開催概要
   ========================================================================== */

.top-theme {
  position: relative;
  z-index: 2;
  padding: 28px 0 60px;
  text-align: center;
}

.top-theme__title {
  margin: 0;
  color: #14161c;
  font-size: clamp(37px, 4.7vw, 66px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* NOTE: テーマロゴは 547x103 の PNG を SVG で包んだ画像（＝ベクターではない）。
   style.css のグローバル img { width:100% } のままだと 1440px 幅で約 1104px まで
   引き伸ばされ 2 倍拡大でボケるため、原寸 547px を上限にする */
.top-theme__title img {
  width: 547px;
  max-width: 100%;
  height: auto;
}

.top-theme__sub {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.top-theme__body {
  margin: 26px 0 0;
}

.top-theme__body p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text);
}

.top-theme__body p:last-child {
  margin-bottom: 0;
}

/* ---------- 開催概要カード ---------- */
.top-outline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}

.top-outline__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 104px;
  padding: 16px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 18px rgba(31, 47, 89, 0.07);
  text-align: center;
}

/* タイトル（英字 + 日本語ラベル + 下線）はカード上端に揃え、その下の内容
   （日付・住所・MAPボタン・併催ロゴ等、カードごとに要素数が違う）はカード
   ごとの残り高さの中で上下中央になるようにする。
   ラベル直後の要素に margin-top:auto、カード最後の要素に margin-bottom:auto
   を付けると、その間の空きが均等に配分されて「タイトル下〜カード下端」の
   範囲内でグループとして中央寄せになる（要素数がカードごとに違っても揃う） */
.top-outline__label + * {
  margin-top: auto;
}

.top-outline__item > *:last-child {
  margin-bottom: auto;
}

/* 日本語ラベルの上に置く薄い英字。読み上げは日本語ラベルだけで足りるので
   HTML 側で aria-hidden にしてある */
.top-outline__en {
  color: rgba(31, 47, 89, 0.3);
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.top-outline__label {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 8px;
  color: var(--text-sub);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.top-outline__label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform: translateX(-50%);
}

.top-outline__year {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  line-height: 1.4;
}

.top-outline__main {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.45;
}

.top-outline__note {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.6;
}

.top-outline__map {
  /* カード内で横いっぱいに広げる（クリック領域をカード幅に合わせる） */
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 4px 16px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.top-outline__map:hover {
  opacity: 0.85;
  color: #fff;
}

/* NOTE: JMSロゴのSVGはviewBoxのみで width/height を持たないため、幅を明示して高さを比率から出す */
.top-outline__item--logo a {
  display: block;
  width: 100%;
  max-width: 192px;
}

.top-outline__item--logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Exhibition
   ========================================================================== */

/* デザインの背景はほぼ均一な濃紺。奥行きだけ淡いラジアルで足す */
.top-exhibition {
  padding: 0;
  background:
    radial-gradient(85% 120% at 82% 16%, rgba(46, 78, 210, 0.42) 0%, rgba(46, 78, 210, 0) 62%),
    #01056b;
}

/* テキスト左端は他セクションの共通インナーと揃え、
   ギャラリー右端だけはビューポート右端まで出血させる非対称レイアウト */
.top-exhibition__layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 0 auto;
  max-width: 1440px;
  /* 左右の余白は共通インナーと同じ基準に合わせる */
  padding-right: var(--pad);
  padding-left: var(--pad);
}

/* 上の余白はテキスト列だけに持たせる。ギャラリーはデザイン同様セクション上下いっぱいまで使う */
.top-exhibition__inner {
  flex: 0 0 auto;
  width: 50%;
  padding-top: 62px;
  padding-bottom: 56px;
}

/* ---------- 出展の様子カルーセル(縦回転スライドショー) ----------
   5枚のスライドを縦一列に重ね、中央(data-pos="0")を最大表示する。
   data-pos は top-exhibition-carousel.js が2秒ごとに -2〜2 で振り直し、
   transform/opacity の transition で滑らかに送る */
.top-exhibition__carousel {
  /* オフセット量はCSS変数化。ブレークポイント側はこの変数だけ上書きすればよい */
  --slide-w: 230px;
  --shift-x1: 107px;
  --shift-y1: 150px;
  --scale1: 0.74;
  --shift-x2: 172px;
  --shift-y2: 230px;
  --scale2: 0.55;
  position: relative;
  flex: 1 1 auto;
  height: 360px;
  min-width: 0;
  overflow: hidden;
}

.top-exhibition__slides {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-exhibition__slide {
  position: absolute;
  left: 58%;
  top: 50%;
  width: var(--slide-w);
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(8, 20, 60, 0.28);
  /* 「ふわっと」感: ゆっくり滑らかに減速する easeOutExpo 系カーブ + やや長めの尺 */
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease-out;
}

.top-exhibition__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-exhibition__slide[data-pos="0"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 5;
}

.top-exhibition__slide[data-pos="-1"] {
  transform: translate(calc(-50% - var(--shift-x1)), calc(-50% - var(--shift-y1))) scale(var(--scale1));
  opacity: 0.68;
  z-index: 4;
}

.top-exhibition__slide[data-pos="1"] {
  transform: translate(calc(-50% - var(--shift-x1)), calc(-50% + var(--shift-y1))) scale(var(--scale1));
  opacity: 0.68;
  z-index: 4;
}

.top-exhibition__slide[data-pos="-2"],
.top-exhibition__slide[data-pos="2"] {
  opacity: 0.45;
  z-index: 3;
}

.top-exhibition__slide[data-pos="-2"] {
  transform: translate(calc(-50% - var(--shift-x2)), calc(-50% - var(--shift-y2))) scale(var(--scale2));
}

.top-exhibition__slide[data-pos="2"] {
  transform: translate(calc(-50% - var(--shift-x2)), calc(-50% + var(--shift-y2))) scale(var(--scale2));
}

/* ==========================================================================
   Conference & Event
   ========================================================================== */

/* デザインでは会場写真を敷いた暗い背景。セクション全体に画像を敷き、
   タイムライン部分だけ別画像にならないよう .top-timeline 側は透過させて重ねる */
.top-conference {
  background: linear-gradient(180deg, rgba(4, 8, 24, 0.92) 0%, rgba(6, 11, 33, 0.95) 100%),
    url("/2026/ja/application/outline/images/img_feature_conference.webp") center/cover no-repeat;
  /* インナー内側からビューポート右端までの距離。写真と5つの柱を画面右端まで伸ばすのに使う */
  --conf-bleed: var(--bleed);
}

.top-conference__inner {
  /* 背景のゴースト文字（Conference）に見出しが被らない高さを確保する */
  padding-top: 60px;
  padding-bottom: 28px;
}

/* デザインでは見出しと写真の上端が揃い、写真の下端がそのままアコーディオンの上端になる */
.top-conference__head {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 36px;
  /* 見出しが写真より縦に長くなる幅でも写真を下端まで伸ばし、隙間を作らない */
  align-items: stretch;
}

/* 写真の元比率のままだと見出し側より縦に伸びるため、比率を固定して高さを揃える。
   デザインでは右端がビューポート右端まで出血するため、インナーの右余白ぶん外へ出す */
.top-conference__photo {
  margin: 0 calc(-1 * var(--conf-bleed)) 0 0;
  aspect-ratio: 20 / 5;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.top-conference__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 5つの柱（アコーディオン） ---------- */
/* デザインでは写真と同じく右端がビューポート右端まで出血する。
   カード自体の幅はインナー内に収めたいので、出す分は padding-right で埋め戻す */
.top-pillars {
  display: flex;
  gap: 0;
  list-style: none;
  /* デザインでは写真の下端に接する */
  margin: 0 calc(-1 * var(--conf-bleed)) 0 0;
  padding: 0 var(--conf-bleed) 0 0;
  /* 自動送りで選択が移ると下の内容がずれるため高さを固定する。min-height だと
     遷移の途中で本文側が瞬間的に240pxを超えようとした分だけ帯自体の高さが伸び縮み
     してガタつくため、height 固定 + overflow:hidden ではみ出しごと隠す */
  height: 240px;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  background: #fff;
}

.top-pillar {
  flex: 1 1 0%;
  padding: 20px 18px;
  border-left: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: flex-grow 0.4s ease, background-color 0.25s ease, color 0.25s ease;
}

.top-pillar:first-child {
  border-left: none;
}

/* デザインでは選択中の柱だけ、番号を左に置いて右に見出しを回り込ませる */
.top-pillar.is-active {
  /* デザイン実測で選択中の柱は他の約2.7倍幅。左右パディング分を含むため grow は 3.2 */
  flex-grow: 3.2;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-content: start;
  background: #2d86c0;
  color: #fff;
}

.top-pillar.is-active .top-pillar__num {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.top-pillar.is-active .top-pillar__title {
  grid-column: 2;
  grid-row: 1;
}

/* 本文とタグは番号の下まで回り込ませずカード幅いっぱいに置く */
.top-pillar.is-active .top-pillar__desc,
.top-pillar.is-active .top-pillar__tags {
  grid-column: 1 / -1;
}

.top-pillar__num {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--conference);
}

.top-pillar.is-active .top-pillar__num {
  color: #fff;
}

/* デザインでは英語が小さな添え、その下の日本語が主となる見出し */
.top-pillar__title {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(90, 106, 138, 0.65);
}

.top-pillar.is-active .top-pillar__title {
  color: rgba(255, 255, 255, 0.7);
}

.top-pillar__title span {
  display: block;
  margin-top: 3px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

.top-pillar.is-active .top-pillar__title span {
  color: #fff;
}

/* 非選択時は幅が狭く行数が増えるため、非表示にしてもレイアウトに残ると
   行全体の高さを押し上げてしまう。選択中の柱でのみ描画する。
   NOTE: display:none → block の切り替えと同じタイミングで opacity を変えても
         transition は効かない（適用前フレームが存在しないため）。展開直後は
         opacity:0 のまま隠れた状態で display:block にし、幅が広がりきった頃に
         JS が付ける .is-revealed で初めて opacity をアニメーションさせる
         （＝本文が狭い柱の中で折り返してガタつくのを防ぐ。top-pillars-accordion.js 参照） */
.top-pillar__desc {
  display: none;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.top-pillar__tags {
  display: none;
  margin: 24px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.top-pillar.is-active .top-pillar__desc,
.top-pillar.is-active .top-pillar__tags {
  display: block;
}

.top-pillar.is-active.is-revealed .top-pillar__desc,
.top-pillar.is-active.is-revealed .top-pillar__tags {
  opacity: 1;
}

/* ---------- タイムライン ---------- */
/* 背景画像は親 .top-conference 側に敷いてあるので、ここでは重ねない */
.top-timeline {
  position: relative;
  padding: 40px 0 48px;
}

.top-timeline__title {
  margin: 0 0 28px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.top-timeline__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  /* 円の上に置くイラスト（最大 103px + 余白 10px）と、開催期間の円が上に張り出す分
     （(220-140)/2 = 40px）を、見出しとの間に確保する */
  margin: 120px 0 0;
  padding: 0;
}

/* デザインの線は画面左端から始まり、最後の円の右端で終わる */
.top-timeline__list::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--bleed));
  /* 右端は最後の円の中心（列幅の 1/10 位置）から半径分だけ手前 */
  right: calc(10% - 70px);
  /* 円の中心 = 直径 140px の半分 */
  top: 70px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.top-timeline__item {
  position: relative;
  padding-top: 162px;
  text-align: center;
  color: #fff;
}

/* 節目のイラスト。円の真上に、画像の下端が円の上端に接する形で置く。
   translateY(-100%) にしているので、画像ごとに高さが違っても同じ指定で揃う。
   style.css のグローバル img { width:100% } に負けないよう width を明示する */
/* デザインではイラストの下端が円の上端にわずかに重なる。円(z-index:1)より奥に置いて、
   重なった分は円に隠れるようにする */
.top-timeline__illust {
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 0;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 2;
}

/* 開催期間だけはデザイン上、会場のイラストが円の下寄りに原寸(191px)で入り、
   円より幅が広いぶん左右の裾は円からはみ出す（カンプ実測: 下端は円の下端より 15px 上）。
   円（.top-timeline__date）の子にしているので、円を基準に位置が決まる */
.top-timeline__illust--main {
  top: auto;
  bottom: 15px;
  z-index: 2;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
}

/* デザインでは塗りつぶしの円。既定は水色、開催期間だけ濃紺で一回り大きく、最後は白。
   日付は「8月6日（木）」で 1 行に収める（grid の行トラックごと中央寄せして、
   曜日は数字とベースラインを合わせる） */
.top-timeline__date {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  display: grid;
  grid-auto-flow: column;
  align-items: baseline;
  align-content: center;
  justify-content: center;
  column-gap: 2px;
  width: 140px;
  height: 140px;
  margin: 0;
  border-radius: 50%;
  background:var(--conference);
  line-height: 1.3;
  cursor: pointer;
  transition: transform 0.25s ease;
}

/* 横並び時のみホバーで拡大。円の上だけでなく項目全体でも反応させる */
@media screen and (min-width: 768px) {
  .top-timeline__item:hover .top-timeline__date,
  .top-timeline__date:hover {
    transform: translateX(-50%) scale(1.35);
  }
}

.top-timeline__item.is-main .top-timeline__date {
  /* 大きくした分を上に逃がして線の中心を他の円と揃える */
  width: 220px;
  height: 220px;
  margin-top: -40px;
  /* 円の下側はイラストの居場所なので、日付は上寄りに置く */
  padding-bottom: 72px;
  background: var(--ceatecblue);
}

/* 開催期間の円は「CEATEC 2026」が主役なので、日付はそれより小さくする */
.top-timeline__item.is-main .top-timeline__date span,
.top-timeline__item.is-main .top-timeline__date em {
  font-size: 18px;
  font-weight: 800;
}

/* 円を大きくすると下のイベント名が円に隠れるため、デザインどおり円の中（日付の下）に置く。
   縦積みになる SP では円の右に並ぶ通常のラベルのままにする */
@media screen and (min-width: 768px) {
  .top-timeline__item.is-main .top-timeline__text {
    position: absolute;
    top: 50px;
    left: 50%;
    z-index: 2;
    width: 200px;
    margin: 0;
    transform: translateX(-50%);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
  }
}

.top-timeline__item:last-child .top-timeline__date {
  background: #fff;
  color: var(--navy);
}

/* 英語版は日付の語が長く（August 6 / September など）円の中に 1 行では収まらないため、
   日本語と同じ 1 行組みにはせず 2 行に分ける */
body.en .top-timeline__date {
  grid-auto-flow: row;
  justify-items: center;
  row-gap: 0;
}

.top-timeline__date span {
  font-size: 20px;
  font-weight: 800;
}

.top-timeline__date em {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
}

.top-timeline__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.top-timeline .top-btns {
  justify-content: center;
  margin-top: 28px;
}

/* ==========================================================================
   会場マップ・展示エリア
   ========================================================================== */

.top-venue {
  padding: 48px 0 44px;
  background: #fff;
}

.top-venue__inner {
  padding-top: 60px;
}

/* 会場マップ。コンテンツ幅いっぱいまで広がると大きすぎるので上限を決めて中央に置く */
.top-venue__map {
  max-width: 1000px;
  margin: 0 auto;
}

/* デザインは枠線付きカードではなく、左端の色罫線だけで区切る列組み */
.top-areas {
  display: grid;
  /* EN は5枚とも均等割り */
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

/* JA は「一般展示（General Exhibits）」の見出しが長く折り返しやすいため
   1枚目を広めに、残り4枚をその分細くする */
body.ja .top-areas {
  grid-template-columns: 1.5fr repeat(4, 0.875fr);
}

.top-area {
  --area-color: var(--navy);
  display: flex;
  flex-direction: column;
  padding: 4px 20px 4px 18px;
  border-left: 3px solid var(--area-color);
  background: #fff;
}

.top-area--general    { --area-color: #0c1a49; }
.top-area--x          { --area-color: #7C3AED; }
.top-area--next       { --area-color: #E53ABC; }
.top-area--global     { --area-color: #00D2B4; }
.top-area--conference { --area-color: #2E86C1; }

.top-area__title {
  margin: 0 0 16px;
  color: var(--area-color);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.top-area__title span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
}

/* デザインは「エリア色の丸ピンアイコン + 小さい Hall + 大きいホール番号」。
   文字はエリア色ではなく本文色で、塗りのピル型バッジは使わない */
.top-area__hall {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

/* Material Icons Round の location_on(U+E0C8)。font-family と display:inline-flex は
   add.css の `*::before, *::after` 指定が効くのでここでは指定しない。
   合字（content:"location_on"）ではなくコードポイントで入れる（liga 設定に依存させないため） */
.top-area__hall::before {
  content: "\e0c8";
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--area-color);
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

.top-area__badge {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* 「国際会議場」のようにホール番号を持たない場合は、この文字が主役になる */
.top-area__badge--wide {
  font-size: 17px;
  font-weight: 800;
}

.top-area__desc {
  flex: 1;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-sub);
}

.top-area__btn {
  display: block;
  padding: 8px 8px;
  border-radius: 8px;
  background: var(--area-color);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.top-area__btn:hover {
  opacity: 0.85;
  color: #fff;
}

/* ==========================================================================
   CEATEC AWARD
   ========================================================================== */

/* 右側にトロフィー写真を配置。写真自体が左側で濃紺へ馴染むよう作られているため、
   right / auto 100% で右端に揃えるだけでテキスト側との境目は写真側で処理される */
.top-award {
  padding: 0px 0 56px;
  background:
    radial-gradient(72% 120% at 84% 24%, rgba(58, 116, 214, 0.34) 0%, rgba(58, 116, 214, 0) 60%),
    url("/ja/images/bg_award.webp") right center / auto 100% no-repeat,
    #000248;
}

.top-award__inner {
  padding-top: 60px;
}

.top-award .top-btn--gold {
  min-width: 196px;
}

/* ==========================================================================
   併催 / CO-LOCATED EVENT
   ========================================================================== */

.top-colocated {
  /* ロゴ列の幅とギャップ。本文(併催)がこの分だけ右から始まるので、
     ゴーストの左位置も同じ値を見て揃える（下の .top-colocated .top-ghost） */
  --colo-logo: 210px;
  --colo-gap: 36px;
  padding: 0px 0 40px;
  background: #fff;
}

/* 併催だけは本文がロゴ列の右から始まるため、ゴーストも本文の左端に合わせる */
.top-colocated .top-ghost {
  left: calc(var(--gutter) + var(--pad) + var(--colo-logo) + var(--colo-gap));
}

.top-colocated__inner {
  display: grid;
  grid-template-columns: var(--colo-logo) 1fr;
  gap: var(--colo-gap);
  align-items: center;
  /* ロゴ枠のほうが背が高く、見出しは行の中央に寄るためゴースト分を多めに確保する */
  padding-top: 48px;
}

.top-colocated__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* グリッドは align-items: center なので、ロゴ枠だけ行の高さ（＝右側の本文の高さ）まで伸ばす。
     中のロゴ画像は flex の中央寄せで枠の中心に残る */
  align-self: stretch;
  margin: 0;
  padding: 12px 8px;
  background: #fff;
}

.top-colocated__logo img {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
}

/* デザインでは箇条書きではなく、縦罫線で区切った横並びの情報列 */
.top-colocated__info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-colocated__info li {
  padding-left: 14px;
  border-left: 3px solid #9fa8ba;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}
.top-colocated__info li h4 {
  font-weight: 800;
}

/* 「会期 Dates」の英字は見出しの飾り。ゴースト文字と同じ Montserrat の細身イタリックにして、
   日本語より一段小さく淡くする（読ませる情報は日本語側という前提） */
.top-colocated__info li h4 span {
  margin-left: 6px;
  color: var(--text-sub);
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.top-colocated .top-btn--navy {
  min-width: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 1080px) {
  /* 折り返すと右端出血が崩れるため、この幅からはインナー内に収める。
     自動送りも止まるので高さの下限も不要 */
  .top-pillars {
    flex-wrap: wrap;
    margin-right: 0;
    padding-right: 0;
    min-height: 0;
    border-radius: 8px;
  }

  .top-pillar {
    flex-basis: 50%;
    border-top: 1px solid var(--line);
  }

  .top-pillar:nth-child(odd) {
    border-left: none;
  }

  /* 素の .top-pillar は flex:1 1 0%（grow:1）、選択中はさらに .is-active の
     grow:3.2 が乗る。2列折り返しでは5枚目だけ行に相方がおらず、grow が
     0より大きいと余った50%分を独り占めして幅100%になってしまう。他の柱は
     2つ1組で常に50%幅から動けないため、5枚目だけ文字の折り返しが減って
     高さが変わり、選択替えのたびに下の内容がガタつく。
     折り返しレイアウトでは grow を両方とも 0 に打ち消し、全員 flex-basis:50%
     の幅で固定する（5枚目だけ相方がいない分は空きスペースのまま） */
  .top-pillar,
  .top-pillar.is-active {
    flex-grow: 0;
  }

  .top-areas,
  body.ja .top-areas {
    grid-template-columns: repeat(3, 1fr);
  }

  .top-outline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 900px) {
  .top-conference__head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* 1カラムになるので写真の右出血を戻す */
  .top-conference__photo {
    margin-right: 0;
    aspect-ratio: 5 / 2;
    border-radius: 8px;
  }

  /* 1列あたりが狭くなり円同士が接するため、この幅帯だけ一回り小さくする。
     100px の円に「10月30日(金)」を 1 行では入れられないので日付は 2 行に戻す */
  .top-timeline__date {
    grid-auto-flow: row;
    justify-items: center;
    row-gap: 0;
    width: 100px;
    height: 100px;
  }

  .top-timeline__date span {
    font-size: 17px;
  }

  .top-timeline__date em {
    font-size: 13px;
  }

  .top-timeline__item.is-main .top-timeline__date {
    width: 150px;
    height: 150px;
    margin-top: -25px;
  }

  .top-timeline__item.is-main .top-timeline__date span,
  .top-timeline__item.is-main .top-timeline__date em {
    font-size: 14px;
  }

  /* 円が 150px なので、折り返して 2 行にならない大きさに抑える */
  .top-timeline__item.is-main .top-timeline__text {
    top: 36px;
    width: 150px;
    font-size: 16px;
    white-space: nowrap;
  }

  /* 円が一回り小さくなるので、イラストも同じ比率（原寸の約 0.68 倍）で縮める。
     絵ごとに原寸が違うので、まとめて 1 つの値にせず個別に指定する。
     max-width は `.top-2026 img`(0,1,1) に負けるので width で指定すること */
  .top-timeline__item:nth-child(1) .top-timeline__illust {
    width: 89px;
  }

  .top-timeline__item:nth-child(2) .top-timeline__illust {
    width: 77px;
  }

  .top-timeline__item:nth-child(3) .top-timeline__illust {
    width: 82px;
  }

  .top-timeline__illust--main {
    top: auto;
    bottom: 10px;
    width: 130px;
  }

  .top-timeline__item.is-main .top-timeline__date {
    padding-bottom: 48px;
  }

  .top-timeline__list {
    margin-top: 100px;
  }

  .top-timeline__list::before {
    top: 50px;
    right: calc(10% - 50px);
  }

  .top-timeline__item {
    padding-top: 122px;
  }

  /* 縦積みになり本文が左端から始まるので、ゴーストのずらしも戻す */
  .top-colocated {
    --colo-logo: 0px;
    --colo-gap: 0px;
  }

  .top-colocated__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .top-colocated__logo {
    max-width: 260px;
  }

  /* 縦積みになるので、2 枚の背景をそれぞれ左右両端まで伸ばす */
  .top-news__card {
    flex-direction: column;
    gap: 2px;
  }

  /* 左右とも画面端に接するため角丸は見えず、付けると端が欠けるので外す */
  .top-news__head {
    margin-right: calc(-1 * var(--news-bleed));
    padding: 18px var(--news-bleed) 14px;
    border-radius: 0;
  }

  .top-news__list {
    margin-left: calc(-1 * var(--news-bleed));
    padding-left: var(--news-bleed);
    border-radius: 0;
  }


  /* テキストとギャラリーを縦積みにし、出血レイアウトをやめて左右対称の余白に戻す */
  .top-exhibition__layout {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 48px var(--pad) 0;
  }

  .top-exhibition__inner {
    width: auto;
    padding-top: 0;
  }

  .top-exhibition__carousel {
    --slide-w: 220px;
    --shift-x1: 100px;
    --shift-y1: 170px;
    --shift-x2: 160px;
    --shift-y2: 208px;
    height: 440px;
  }
}

@media screen and (max-width: 767px) {
  .top-2026 {
    font-size: 16px;
  }

  /* SP は横に並べる余地がないので、キービジュアルはテキストの下に回す */
  .top-mv--kv .top-mv__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* align-items:flex-start だと .top-mv__body は中身に合わせた fit-content 幅になり、
     右の余白（SNSバー分の padding-right）を無視して伸びてしまう。明示的に幅いっぱいに
     広げ、中の日時テキストが正しい幅で折り返される（＝SNSバーに潜り込まない）ようにする */
  .top-mv__body {
    width: 100%;
  }

  /* 上の幅固定で .top-mv__co（併催：+ ロゴ画像）の1行あたりの余裕も減るため、
     テキストが「併」「催：」と1文字ずつ折り返される前に、ロゴ側を次の行へ逃がす */
  .top-mv__co {
    flex-wrap: wrap;
  }

  .top-mv__visual {
    width: 62%;
    max-width: 360px;
    margin: 0 auto;
  }

  /* 画面右に常時固定表示される SNS 縦バー（footer.php の .side_list_social、
     幅42〜52px）に日時・会場等のテキストが潜り込むため、その分だけ右側に余白を確保する。
     スライド2・3は .top-mv__body を持たず .top-mv__inner 直下にテキストが並ぶため、
     全スライド共通の .top-mv__inner 側に付ける。
     NOTE: 共通インナーの `.top-2026 .top-mv__inner { padding-right: var(--pad) }`
           （特異度 0,2,0）に勝つため、こちらも .top-2026 を付けて特異度を揃える */
  .top-2026 .top-mv__inner {
    padding-right: 70px;
  }

  .top-ghost {
    font-size: clamp(29px, 8.6vw, 42px);
    white-space: normal;
  }

  .top-newstheme__rings .ring-red-sm { width:220px; height:232px; left:-10vw; top:-4%; }
  .top-newstheme__rings .ring-yellow-lg { width:420px; height:408px; left:-45vw; top:8%; }
  .top-newstheme__rings .ring-green { width:360px; height:300px; left:-38vw; top:61%; }
  .top-newstheme__rings .ring-purple { width:220px; height:136px; left:38vw; top:-2%; }
  .top-newstheme__rings .ring-pink-lg { width:380px; height:352px; left:48vw; top:3%; }
  .top-newstheme__rings .ring-blue-sm { width:220px; height:208px; right:-30vw; top:8%; }
  .top-newstheme__rings .ring-blue-lg { width:420px; height:352px; left:28vw; top:39%; }
  .top-newstheme__rings .ring-orange { width:280px; height:300px; left:59vw; top:70%; }

  .top-newstheme__rings .ring-yellow-lg .shape-fill,
  .top-newstheme__rings .ring-pink-lg .shape-fill,
  .top-newstheme__rings .ring-blue-lg .shape-fill { filter: blur(28px); }
  .top-newstheme__rings .ring-green .shape-fill,
  .top-newstheme__rings .ring-orange .shape-fill { filter: blur(23px); }
  .top-newstheme__rings .ring-red-sm .shape-fill,
  .top-newstheme__rings .ring-purple .shape-fill,
  .top-newstheme__rings .ring-blue-sm .shape-fill { filter: blur(17px); }
  .top-newstheme__rings .shape-stroke { filter: blur(6px); }

  .top-news {
    padding: 48px 0 28px;
  }

  .top-news__title {
    font-size: 27px;
  }

  .top-mv {
    min-height: 0;
    /* 重なるヘッダー(約70px)を避ける上余白 */
    padding: 100px 0 72px;
  }

  .top-mv__date {
    gap: 8px;
    margin-top: 24px;
    font-size: 17px;
  }

  .top-mv__btns .top-btn {
    flex: 1 1 140px;
    min-width: 0;
  }

  .top-label {
    font-size: 23px;
  }

  .top-h2 {
    font-size: 20px;
  }

  .top-desc br {
    display: none;
  }

  .top-theme {
    padding: 56px 0 64px;
  }

  .top-theme__body p br {
    display: none;
  }

  .top-outline {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .top-exhibition,
  .top-venue,
  .top-award,
  .top-colocated {
    padding: 64px 0 68px;
  }

  .top-exhibition__layout {
    padding: 56px var(--pad) 0;
  }

  .top-exhibition__carousel {
    --slide-w: 168px;
    --shift-x1: 76px;
    --shift-y1: 128px;
    --shift-x2: 122px;
    --shift-y2: 162px;
    height: 340px;
  }

  .top-venue__inner,
  .top-award__inner,
  .top-colocated__inner {
    padding-top: 72px;
  }

  /* この幅ではゴーストが3行になるため、見出しに被らないよう余白を多めに取る */
  .top-venue__inner {
    padding-top: 96px;
  }

  .top-conference__inner {
    padding-top: 56px;
    padding-bottom: 48px;
  }

  .top-pillars {
    flex-direction: column;
    /* PC横並び用の height:240px 固定はここでは不要（5枚を縦に積むと収まらない）。
       各柱は自身の中身（選択中だけ本文が増える）に応じて縦アコーディオンとして
       高さが伸び縮みしてよいので auto に戻す */
    height: auto;
  }

  .top-pillar {
    flex-basis: auto;
    border-left: none;
  }

  .top-pillar.is-active {
    flex-grow: 0;
  }

  .top-areas,
  body.ja .top-areas {
    grid-template-columns: 1fr;
  }

  .top-timeline {
    padding: 48px 0 56px;
  }

  .top-timeline__list {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
  }

  /* 縦積みでは円の横にラベルが来るレイアウトなので、イラストの置き場所が無い */
  .top-timeline__illust {
    display: none;
  }

  .top-timeline__list::before {
    left: 48px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 1px;
    height: auto;
  }

  .top-timeline__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 0;
    text-align: left;
  }

  /* 76px の円に「8月6日（木）」を 1 行では入れられないので、SP だけ 2 行に戻す */
  .top-timeline__date {
    position: static;
    transform: none;
    flex-shrink: 0;
    grid-auto-flow: row;
    justify-items: center;
    row-gap: 0;
    width: 76px;
    height: 76px;
  }

  /* 円からはみ出さないよう、SP は文字を一段小さくして左右に逃げしろを持たせる */
  .top-timeline__date {
    padding: 0 6px;
  }

  /* 「10月30日」が円の中で折り返さないよう、日付側だけ nowrap にする
     （is-main の期間表記は長いので折り返しを許す） */
  .top-timeline__date span {
    font-size: 13px;
    white-space: nowrap;
  }

  .top-timeline__date em {
    font-size: 12px;
  }

  .top-timeline__item.is-main .top-timeline__date span,
  .top-timeline__item.is-main .top-timeline__date em {
    font-size: 12px;
  }

  /* 縦並びでは大きさを変えると円の中心が線からずれるため、色だけで区別する */
  .top-timeline__item.is-main .top-timeline__date {
    width: 76px;
    height: 76px;
    margin-top: 0;
  }

  .top-news__item a {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 16px 0;
  }

  .top-news__text {
    flex: 1 1 100%;
  }

  .top-btn {
    min-width: 0;
    width: 100%;
    padding: 12px 20px;
  }

  .top-btns {
    flex-direction: column;
    align-items: stretch;
  }
}

/* MVの「来場事前登録／聴講予約受付開始」バナーは、ラベル(可変)+日付(nowrap)を
   横並びにする幅がこの下では足りず、日付側は縮まないためラベル側だけが
   極端に圧縮されて1文字ずつ折り返される。縦積みにして両方に幅を確保する */
@media screen and (max-width: 480px) {
  .mv__release {
    flex-direction: column;
    align-self: flex-start;
    width: 100%;
  }

  .mv__release-label,
  .mv__release-date {
    flex-shrink: 0;
    width: 100%;
  }

  .mv__release-date {
    justify-content: flex-start;
  }
}

/* ---------- 動きを減らす設定への配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
  /* スライド送り自体は止めない（送られないと他のスライドを見る手段が無くなるため）。
     横滑りの動きだけ消して、瞬時に切り替える */
  .top-mvslider__track {
    transition: none;
  }

  .top-mv__glow,
  .top-mv__streak,
  .top-mv__title,
  .top-mv__lead,
  .top-mv__date,
  .top-mv__co,
  .top-mv__btns {
    animation: none !important;
  }

  /* カルーセル自体は止めない(内容が切り替わらないと閲覧者には壊れて見える)。
     スライド・拡大縮小のような大きな動きだけを取り除き、位置の切り替えは
     transformを瞬時に、不透明度だけふわっと長めにフェードさせる */
  .top-exhibition__slide {
    transition: opacity 0.7s ease-out;
  }
}