@charset "UTF-8";
/* ==========================================================================
   筑波大学人文社会系 公開講演会 — 共通デザインシステム
   第一アクセント：筑波紫 #6a35ce   第二アクセント：筑波ブルー #3252aa
   このファイル 1 枚で一覧ページと第1〜4回の講演ページすべてを賄います。
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Space+Grotesk:wght@500;600;700&family=Lato:wght@400;700&display=swap');

:root {
  /* ---- アクセント ---- */
  --purple: #6a35ce;          /* 第一アクセント */
  --purple-bright: #8a5cf0;
  --purple-vivid: #a071ff;
  --purple-deep: #3d1b7d;
  --purple-ink: #1a0b35;
  --blue: #3252aa;            /* 第二アクセント */
  --blue-bright: #4f74d8;
  --blue-light: #7a9bd1;
  --focus: #ff9e1b;           /* フォーカス表示専用。装飾には使わない */

  /* ---- 無彩色 ---- */
  --ink: #1c1630;
  --ink-soft: #4b4467;
  --ink-faint: #6d6688;
  --paper: #f5f3fb;
  --surface: #ffffff;
  --line: #e4def3;
  --line-strong: #cfc7e6;

  /* ---- 派生 ---- */
  --grad: linear-gradient(118deg, var(--purple) 0%, var(--blue) 100%);
  --grad-vivid: linear-gradient(118deg, var(--purple-vivid) 0%, var(--purple) 45%, var(--blue) 100%);
  --shadow-sm: 0 1px 2px rgba(30, 15, 60, .05), 0 4px 14px rgba(30, 15, 60, .06);
  --shadow-md: 0 2px 6px rgba(30, 15, 60, .07), 0 14px 36px rgba(30, 15, 60, .11);
  --shadow-lg: 0 4px 10px rgba(30, 15, 60, .08), 0 28px 60px rgba(30, 15, 60, .18);
  --shadow-purple: 0 10px 26px rgba(106, 53, 206, .30);
  --radius: 16px;
  --radius-lg: 22px;
  --measure: 70ch;
  --dock-gutter: 112px;
  --ease: cubic-bezier(.22, .8, .26, 1);
  --ease-back: cubic-bezier(.34, 1.4, .5, 1);

  --font-display: 'Space Grotesk', 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', 'Lato', system-ui, sans-serif;
  --font-latin: 'Lato', 'Noto Sans JP', system-ui, sans-serif;

  /* 粒状のノイズ。平坦な面に質感を与える */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   基本
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* ドックは内容の上に浮かせる。左に余白は取らない */
  padding-left: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 紙面の地。紫→青をごく薄く流して全ページに共通の空気をつくる */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 6% 12%, rgba(106, 53, 206, .10), transparent 62%),
    radial-gradient(52rem 38rem at 100% 42%, rgba(50, 82, 170, .09), transparent 62%),
    radial-gradient(44rem 34rem at 40% 100%, rgba(138, 92, 240, .07), transparent 62%);
}

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

a { color: var(--purple); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--purple-deep); }

:is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(106, 53, 206, .18); }

[lang="en"], .en-text, .institution-en, .english-title { font-family: var(--font-latin); }

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 28px;
}

/* ドックが内容に重なる幅のときだけ、内側に逃がす */
@media (min-width: 861px) and (max-width: 1390px) {
  .container { padding-left: calc(var(--dock-gutter) + 14px); }
}

main { display: block; padding-bottom: 20px; }

.skip {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 2200;
  background: var(--surface);
  color: var(--purple);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  transition: top .2s var(--ease);
}
.skip:focus { top: 14px; }

/* ==========================================================================
   見出し・本文
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.45; letter-spacing: -.01em; }
h2, h3 { color: var(--purple-ink); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--purple-ink); }

.small { font-size: .85rem; color: var(--ink-faint); line-height: 1.75; }
.mail { overflow-wrap: anywhere; }

.highlight-text,
.highlight {
  font-weight: 700;
  color: var(--purple-deep);
  background: linear-gradient(transparent 62%, rgba(106, 53, 206, .18) 62%);
}

/* ==========================================================================
   スクロール進行バー
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 2100;
  background: var(--grad-vivid);
  box-shadow: 0 0 14px rgba(138, 92, 240, .7);
}

/* ==========================================================================
   ドックナビ（背景の上に浮かぶ）
   ========================================================================== */
.mac-dock {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11px 9px;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(243, 238, 255, .80));
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    0 24px 50px rgba(26, 11, 53, .26),
    0 4px 12px rgba(26, 11, 53, .14),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ガラスの上を光がゆっくり通過する。
   .mac-dock に overflow は掛けない（ツールチップと項目の拡大が切れるため）。
   光は要素をはみ出さないよう、背景の位置だけを動かして内側に閉じ込める */
.mac-dock::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
  background-repeat: no-repeat;
  background-size: 100% 320%;
  background-position: 0 210%;
  animation: sheen 7s ease-in-out infinite;
}

@keyframes sheen {
  0%, 62%   { background-position: 0 210%; }
  86%, 100% { background-position: 0 -110%; }
}

.dock-container { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }

.dock-item {
  position: relative;
  display: flex;
  width: 72px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(106, 53, 206, .07);
  color: var(--purple-deep);
  text-decoration: none;
  transition: transform .3s var(--ease-back), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}

.dock-item:hover { background: rgba(106, 53, 206, .16); color: var(--purple-deep); }

.dock-item.active {
  background: var(--grad-vivid);
  background-size: 180% 180%;
  color: #fff;
  box-shadow: var(--shadow-purple), inset 0 1px 0 rgba(255, 255, 255, .4);
  animation: shift 7s ease-in-out infinite alternate;
}

@keyframes shift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.dock-item.active::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .9);
}

.icon-text {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  letter-spacing: -.02em;
}

.dock-divider { width: 26px; height: 1px; margin: 3px auto; background: var(--line-strong); }

.dock-tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 13px;
  border-radius: 9px;
  background: var(--purple-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  transition: opacity .18s var(--ease), left .18s var(--ease);
}
.dock-item:hover .dock-tooltip { opacity: 1; visibility: visible; left: calc(100% + 14px); }

.mac-dock a:focus-visible { outline-offset: 2px; }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 104px 0 96px;
  background: linear-gradient(135deg, var(--purple-ink) 0%, var(--purple-deep) 38%, var(--purple) 66%, var(--blue) 100%);
  background-size: 180% 180%;
  color: #fff;
  animation: shift 18s ease-in-out infinite alternate;
}

/* 紫と青の光が別々の速さで漂う */
.header-gradient-glow {
  position: absolute;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(32rem 24rem at 18% 24%, rgba(160, 113, 255, .70), transparent 60%),
    radial-gradient(30rem 22rem at 76% 68%, rgba(79, 116, 216, .62), transparent 60%),
    radial-gradient(22rem 18rem at 52% 8%, rgba(255, 255, 255, .18), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes drift {
  from { transform: translate3d(-5%, -4%, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.16); }
}

.header-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(165deg, #000 6%, transparent 72%);
  -webkit-mask-image: linear-gradient(165deg, #000 6%, transparent 72%);
}

/* ゆっくり形を変える光のかたまり。紫面に有機的な動きを与える */
.header-grid::after {
  content: '';
  position: absolute;
  right: -8%;
  bottom: -46%;
  width: 46rem;
  height: 46rem;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(160, 113, 255, .10) 55%, transparent 72%);
  border-radius: 38% 62% 55% 45% / 45% 38% 62% 55%;
  animation: morph 26s ease-in-out infinite alternate;
  will-change: border-radius, transform;
}

@keyframes morph {
  from { border-radius: 38% 62% 55% 45% / 45% 38% 62% 55%; transform: rotate(0deg) scale(1); }
  to   { border-radius: 58% 42% 38% 62% / 62% 55% 45% 38%; transform: rotate(26deg) scale(1.1); }
}

/* カーソルに追従するスポットライト（JS が --hx / --hy を更新する） */
.header-content::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(26rem 26rem at var(--hx, 50%) var(--hy, 50%), rgba(255, 255, 255, .16), transparent 62%);
  transition: opacity .5s var(--ease);
}
header:hover .header-content::before { opacity: 1; }

.tsukuba-emblem {
  position: absolute;
  right: -9rem;
  top: -11rem;
  z-index: -1;
  width: 38rem;
  height: 38rem;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(255, 255, 255, .20), transparent 42%, rgba(160, 113, 255, .35) 68%, transparent 88%);
  animation: spin 60s linear infinite;
  will-change: transform;
}

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

/* 粒状のノイズで紫面の“ベタ塗り感”を消す */
header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: var(--noise);
}

/* 下端の発光ライン */
header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-vivid) 28%, #fff 50%, var(--blue-bright) 72%, transparent);
  opacity: .85;
}

.header-content { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 6px 16px 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
  animation: ping 2.6s ease-out infinite;
}

@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.institution-en {
  margin: 0 0 26px;
  max-width: 54ch;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}

header h1 {
  margin: 0 0 20px;
  max-width: 22ch;
  font-size: clamp(2.2rem, 5.6vw, 3.9rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(26, 11, 53, .35);
}

header h1 span {
  display: block;
  margin-top: 14px;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .88);
  text-shadow: none;
}

.english-title {
  position: relative;
  max-width: 62ch;
  margin: 0 0 26px;
  padding-left: 20px;
  font-size: clamp(.98rem, 1.5vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
}
.english-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: .35em;
  bottom: .35em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--purple-vivid), #fff);
}

.speaker-line {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.8vw, 1.26rem);
  font-weight: 600;
  line-height: 1.6;
}
.speaker-line span {
  display: block;
  font-family: var(--font-body);
  font-size: .8em;
  font-weight: 400;
  color: rgba(255, 255, 255, .82);
}

.event-line {
  display: inline-flex;
  align-items: center;
  /* 直後のバッジと同じ行に並ぶので、右と下に余白を持たせる */
  margin: 0 18px 16px 0;
  vertical-align: middle;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: .01em;
}

.online-badge, .status-past {
  display: inline-block;
  margin: 0 0 10px;
  vertical-align: middle;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.online-badge { background: rgba(255, 255, 255, .96); color: var(--purple-deep); }
.online-badge span { font-weight: 400; color: var(--ink-soft); }

/* 終了した回の表示 */
.status-past { margin-top: 10px; }
.status-past {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .42);
  color: #fff;
  box-shadow: none;
}
.status-past span { font-weight: 400; color: rgba(255, 255, 255, .8); }

header a:not(.action) { color: #fff; }
header .actions { margin-top: 26px; }

/* ==========================================================================
   講師プロフィール
   ========================================================================== */
.profile-section {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
  margin: -54px 0 48px;
  padding: 34px 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

/* カード上辺を紫→青のラインで縁取る */
.profile-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--grad-vivid);
}

.profile-image-container {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}

/* 回転するグラデーションの輪 */
.profile-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--purple-vivid), var(--blue), var(--purple), var(--purple-vivid));
  animation: spin 14s linear infinite;
}
.profile-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper);
  display: block;
  animation: spin 14s linear infinite reverse;
}

.profile-glow {
  position: absolute;
  inset: -20%;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(138, 92, 240, .38) 0%, rgba(50, 82, 170, 0) 70%);
  animation: pulse 5s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { transform: scale(.9); opacity: .5; }
  to   { transform: scale(1.14); opacity: 1; }
}

.profile-decor {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px dashed var(--line-strong);
}
.profile-decor:nth-of-type(1) { inset: -14px; animation: spin 34s linear infinite; }
.profile-decor:nth-of-type(2) { inset: -27px; border-style: dotted; animation: spin 52s linear infinite reverse; }

.profile-info-container { min-width: 0; }

.profile-info-container > .small {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--purple);
}

.profile-name {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--purple-ink);
}
.profile-name span { font-size: .72em; color: var(--blue); }

.profile-title { margin: 0; font-size: .98rem; line-height: 1.75; color: var(--ink-soft); }
.profile-title span { font-size: .92em; color: var(--ink-faint); }

/* ==========================================================================
   2 言語並列レイアウト
   ========================================================================== */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: start;
}

.japanese-side, .english-side { min-width: 0; }
.english-side { --side: var(--blue); }
.japanese-side { --side: var(--purple); }
.japanese-side > *, .english-side > * { margin-bottom: 24px; }
.japanese-side > *:last-child, .english-side > *:last-child { margin-bottom: 0; }

/* 2 面を薄いパネルに載せ、紫（日本語）と青（英語）で役割を見分けやすくする */
@media (min-width: 981px) {
  .japanese-side, .english-side {
    padding: 26px;
    border-radius: var(--radius-lg);
  }
  .japanese-side {
    background: linear-gradient(165deg, rgba(106, 53, 206, .085), rgba(106, 53, 206, .02));
    border: 1px solid rgba(106, 53, 206, .13);
  }
  .english-side {
    background: linear-gradient(165deg, rgba(50, 82, 170, .085), rgba(50, 82, 170, .02));
    border: 1px solid rgba(50, 82, 170, .13);
  }
}


/* ==========================================================================
   カード
   ========================================================================== */
.content-card, .details {
  position: relative;
  overflow: hidden;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

/* 上辺のアクセント線がホバーで左から伸びる */
.content-card::before, .details::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--grad-vivid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

/* カーソルを追う光。JS が --mx / --my を更新する */
.content-card::after, .details::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 0%), rgba(138, 92, 240, .13), transparent 68%);
  transition: opacity .35s var(--ease);
}

.content-card:hover, .details:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.content-card:hover::before, .details:hover::before { transform: scaleX(1); }
.content-card:hover::after, .details:hover::after { opacity: 1; }

/* 光は本文の背面に置く（文字の上に膜がかからないように） */
.content-card > *, .details > * { position: relative; z-index: 1; }

.content-card h2, .content-card h3,
.details h2, .details h3 {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--purple-ink);
}
/* 見出しの下線のうち左側だけをアクセント色に */
.content-card h2::after, .content-card h3::after,
.details h2::after, .details h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--side, var(--purple));
}

.content-card h2 a, .content-card h3 a { text-decoration: none; }
.content-card h2 a:hover, .content-card h3 a:hover { text-decoration: underline; }

.abstract { max-width: var(--measure); }
.abstract p { color: var(--ink); }

/* ---- 講演詳細（3/ 4/ は dl、1/ 2/ は ul） ---- */
.details dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 22px;
  margin: 0;
}
.details dt {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--side, var(--purple));
  padding-top: .3em;
}
.details dd { margin: 0; font-weight: 500; }

/* li の中身は <i>絵文字</i> + <strong>見出し</strong> + 本文。
   grid にすると子要素が1つずつセルに入って崩れるため、絵文字だけ絶対配置にする */
.details ul { list-style: none; margin: 0; padding: 0; }
.details li {
  position: relative;
  padding: 10px 0 10px 2.1rem;
  border-bottom: 1px dashed var(--line);
}
.details li:last-child { border-bottom: 0; }
.details li i {
  position: absolute;
  left: 0;
  top: 10px;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.75;
}
.details li strong {
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--side, var(--purple));
  margin-right: .5em;
}

/* ---- タグ ---- */
.tag {
  display: inline-block;
  margin: 0 7px 9px 0;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(106, 53, 206, .05);
  color: var(--purple-deep);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.6;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-back), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tag:hover {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--shadow-purple);
}

/* ==========================================================================
   ボタン
   ========================================================================== */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }

.action, .button010 a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 12px;
  background: var(--grad-vivid);
  background-size: 180% 180%;
  color: #fff;
  font-family: var(--font-display);
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-purple);
  transition: transform .3s var(--ease-back), box-shadow .3s var(--ease), background-position .5s var(--ease);
}

.action::after, .button010 a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, .42) 50%, transparent 82%);
  transform: translateX(-110%);
  transition: transform .65s var(--ease);
}
.action:hover, .button010 a:hover {
  color: #fff;
  transform: translateY(-3px);
  background-position: 100% 50%;
  box-shadow: 0 18px 38px rgba(106, 53, 206, .40);
}
.action:hover::after, .button010 a:hover::after { transform: translateX(110%); }

.action.secondary {
  background: var(--surface);
  color: var(--blue);
  border: 1.5px solid var(--blue);
  box-shadow: none;
}
.action.secondary:hover { background: var(--blue); color: #fff; box-shadow: 0 14px 30px rgba(50, 82, 170, .32); }

.button010 { margin-top: 22px; }
header .button010 a { box-shadow: 0 12px 30px rgba(0, 0, 0, .34); }

/* 受付終了などの静的な表示 */
.status-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
  background: rgba(106, 53, 206, .04);
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
}
.status-note::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

/* ==========================================================================
   参加登録の QR
   ========================================================================== */
.qr {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(106, 53, 206, .05), rgba(50, 82, 170, .05));
}
.qr img {
  width: 124px;
  height: 124px;
  flex: none;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.qr figcaption {
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.qr figcaption strong { display: block; color: var(--purple-deep); }

/* ==========================================================================
   図版（feature）
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin: 40px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s var(--ease);
}
.feature:hover { box-shadow: var(--shadow-md); }
.feature img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.feature:hover img { transform: scale(1.05); }
.feature.egypt img { object-fit: contain; background: var(--purple-ink); }
.feature.egypt:hover img { transform: none; }
.feature-copy { padding: 34px 36px; align-self: center; }
.feature-copy h2 { margin: 0 0 6px; font-size: 1.4rem; font-weight: 600; color: var(--purple-ink); }
.feature-copy > p[lang="en"] { margin: 0 0 20px; color: var(--blue); font-size: .95rem; }
.feature figcaption { margin-top: 18px; font-size: .78rem; line-height: 1.7; color: var(--ink-faint); }

/* 共催ロゴ */
.sponsors { margin: 0 0 40px; text-align: center; }
.sponsors p { margin: 0; }
.sponsors img {
  height: 74px;
  width: auto;
  max-width: 100%;
  margin: 10px 22px;
  vertical-align: middle;
  transition: transform .3s var(--ease-back);
}
.sponsors a:hover img { transform: translateY(-4px) scale(1.03); }

/* ==========================================================================
   一覧ページ
   ========================================================================== */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.cards article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cards article:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-between;
  padding: 16px 26px;
  background: var(--grad-vivid);
  background-size: 180% 180%;
  color: #fff;
  font-family: var(--font-display);
  font-size: .94rem;
  font-weight: 600;
  animation: shift 9s ease-in-out infinite alternate;
}
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: var(--noise);
}
.band span { position: relative; }

/* 過去回の帯は落ち着かせ、今年の回を目立たせる */
.badge.past { background: rgba(28, 22, 48, .07); color: var(--ink-soft); }

.cards article.past .band { background: linear-gradient(118deg, var(--purple-ink), var(--purple-deep)); animation: none; }

.cards .body { display: flex; flex: 1; flex-direction: column; padding: 28px 26px; }

.speaker { display: flex; gap: 18px; align-items: center; }
.speaker img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  padding: 3px;
  background: var(--grad);
  transition: transform .35s var(--ease-back);
}
.cards article:hover .speaker img { transform: scale(1.07) rotate(-3deg); }
.speaker strong { display: block; font-family: var(--font-display); font-size: 1.22rem; color: var(--purple-ink); }
.speaker p { margin: 0; line-height: 1.6; }

.cards .body h3 {
  margin: 22px 0 8px;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--purple-ink);
}
.subtitle { margin: 0 0 12px; color: var(--ink-soft); }
.en-title { margin: 0 0 22px; font-size: .92rem; line-height: 1.7; color: var(--blue); }

.venue { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(106, 53, 206, .09);
  color: var(--purple-deep);
  font-size: .83rem;
  font-weight: 700;
}

.card-actions { display: grid; gap: 10px; margin-top: 20px; }

.link {
  display: flex;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--grad-vivid);
  background-size: 180% 180%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-purple);
  transition: transform .3s var(--ease-back), box-shadow .3s var(--ease), background-position .5s var(--ease);
}
.link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, .42) 50%, transparent 82%);
  transform: translateX(-110%);
  transition: transform .65s var(--ease);
}
.link:hover { color: #fff; transform: translateY(-3px); background-position: 100% 50%; box-shadow: 0 18px 38px rgba(106, 53, 206, .38); }
.link:hover::after { transform: translateX(110%); }

.link.secondary {
  background: var(--surface);
  color: var(--blue);
  border: 1.5px solid var(--blue);
  box-shadow: none;
}
.link.secondary:hover { background: var(--blue); color: #fff; box-shadow: 0 14px 30px rgba(50, 82, 170, .3); }

/* 節見出し */
main > h2, main > section:not(.profile-section) > h2 {
  position: relative;
  margin: 52px 0 26px;
  padding-left: 18px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--purple-ink);
}
main > h2::before, main > section:not(.profile-section) > h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 5px;
  border-radius: 5px;
  background: var(--grad-vivid);
}
main > h2:first-child { margin-top: 40px; }

/* 節見出しは紫→青のグラデーション文字に（対応しない環境では通常色のまま） */
@supports (-webkit-background-clip: text) {
  main > h2, main > section:not(.profile-section) > h2 {
    background: linear-gradient(100deg, var(--purple-ink) 0%, var(--purple) 55%, var(--blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}


/* ==========================================================================
   フッター
   ========================================================================== */
footer {
  position: relative;
  overflow: hidden;
  margin-top: 64px;
  padding: 50px 0 56px;
  background: var(--purple-ink);
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
}
.footer-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 62px 62px;
}
footer::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--grad-vivid);
}
footer::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18rem;
  width: 44rem;
  height: 30rem;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 92, 240, .3), transparent 65%);
}
.footer-content { position: relative; }
footer p { margin: 8px 0; line-height: 1.8; }
footer strong { color: #fff; }
footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: var(--blue-light); }
footer .small { color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   出現アニメーション
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  will-change: opacity, transform;
}
.reveal.from-left  { transform: translate3d(-34px, 14px, 0) scale(.985); }
.reveal.from-right { transform: translate3d(34px, 14px, 0) scale(.985); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ヘッダーの読み込み時アニメーション。
   JS に依存すると読み込み失敗時に内容が消えるため、CSS だけで完結させる
   （animation-fill-mode: both なので開始前は透明、終了後は表示のまま） */
.header-content > * { animation: rise .85s var(--ease) both; }
.header-content > *:nth-child(1) { animation-delay: .05s; }
.header-content > *:nth-child(2) { animation-delay: .13s; }
.header-content > *:nth-child(3) { animation-delay: .21s; }
.header-content > *:nth-child(4) { animation-delay: .29s; }
.header-content > *:nth-child(5) { animation-delay: .37s; }
.header-content > *:nth-child(6) { animation-delay: .45s; }
.header-content > *:nth-child(7) { animation-delay: .53s; }
.header-content > *:nth-child(8) { animation-delay: .61s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --dock-gutter: 100px; }
  .dock-item { width: 64px; height: 52px; }
  .icon-text { font-size: 14px; }
  .profile-section { grid-template-columns: 180px 1fr; gap: 30px; padding: 30px; }
  .profile-image-container { width: 180px; height: 180px; }
}

/* 画面が低いときは項目を縮める（overflow は使わない：ツールチップと拡大が切れるため） */
@media (min-width: 861px) and (max-height: 760px) {
  .dock-item { width: 60px; height: 46px; }
  .icon-text { font-size: 13px; }
  .dock-container { gap: 6px; }
}

@media (max-width: 980px) {
  .split-layout { grid-template-columns: 1fr; gap: 24px; }
  .english-side { padding-top: 26px; border-top: 2px solid var(--line); }
  .feature { grid-template-columns: 1fr; }
  .feature img { min-height: 260px; }
  .reveal.from-left, .reveal.from-right { transform: translateY(26px) scale(.985); }
}

/* ドックを画面下の横並びに */
@media (max-width: 860px) {
  :root { --dock-gutter: 0px; }
  body { padding-bottom: 112px; }
  .mac-dock {
    left: 50%;
    top: auto;
    bottom: 12px;
    transform: translateX(-50%);
    flex-direction: row;
    max-width: calc(100vw - 20px);
    padding: 8px 10px;
  }
  .mac-dock::after { animation: none; }
  .dock-container { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 7px; row-gap: 7px; }
  .dock-item { width: 58px; height: 48px; }
  .dock-item.active::after { right: 50%; top: auto; bottom: 5px; margin: 0 -2.5px 0 0; }
  .dock-divider { display: none; }
  .dock-tooltip { display: none; }
  header { padding: 72px 0 66px; }
  .profile-section { margin-top: -40px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; padding-bottom: 160px; }
  .container { padding-inline: 20px; }
  .cards { grid-template-columns: 1fr; }
  .profile-section {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
    margin-top: -30px;
    padding: 28px 22px;
  }
  .profile-image-container { width: 150px; height: 150px; }
  .content-card, .details { padding: 22px 20px; }
  .feature-copy { padding: 26px 22px; }
  .details dl { grid-template-columns: 1fr; gap: 2px 0; }
  .details dd { margin-bottom: 10px; }
  .actions { flex-direction: column; align-items: stretch; }
  .action, .button010 a { width: 100%; }
  .qr { flex-direction: column; text-align: center; }
  .sponsors img { height: 54px; margin: 8px 12px; }
  header h1 { max-width: none; }
}

/* ==========================================================================
   動きを減らす設定の尊重
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    /* delay を残すと fill-mode: both で開始前の状態（透明）が続いてしまう */
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* ヘッダーの入場は完全に無効化し、最初から表示する */
  .header-content > * { animation: none !important; opacity: 1; transform: none; }
  .scroll-progress { display: none; }
}

@media print {
  body { padding: 0; background: #fff; }
  .mac-dock, .scroll-progress, .skip { display: none; }
  .reveal { opacity: 1; transform: none; }
  .header-content > * { animation: none; opacity: 1; transform: none; }
  header { animation: none; }
}