@charset "UTF-8";

/* =========================================================
   DREAMSCAPE 5 — 基盤
   カラーは ds5-generative (src/app/scene.ts) の COLORS に合わせている
   ========================================================= */

:root {
  /* --- color --- */
  --c-bg:     #F0EFE9;
  --c-ink:    #2F2F32;
  --c-red:    #DB3A5E;
  --c-blue:   #2B5FAC;
  --c-cream:  #E9E4D7;
  --c-border: #B8B8B8;

  /* --- スケール単位 ---
     Figma の 1px = var(--u)。responsive.css で画面幅に追従させる。使い方: width: calc(var(--u) * 352); */
  --u: calc(100vw / 1440);

  /* --- type --- */
  /* kit xho2rpv 内の正式名。akzidenz-grotesk-next 本体は n2(Light)しか持たず
     Regular は -pro 側にある。日本語は dnp- 接頭辞つきが正しい (n4/n5/n6) */
  --f-en: "akzidenz-grotesk-next-pro", "Akzidenz-Grotesk Next", "Helvetica Neue", Arial, sans-serif;
  --f-ja: "dnp-shuei-gothic-gin-std", "DNP ShueiGoGinStd", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-ja);
  /* 本文だけはスケールから切り離し、ユーザーの文字サイズ設定を尊重する */
  font-size: 16px;
  line-height: 2.13; /* Figma: 15px / 32px */
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* =========================================================
   Header
   ========================================================= */

/* デザイン幅 1440 のステージ。1440 を超えたら中央に寄せ、
   両脇は背景色で埋める(絶対配置の基準もこの箱になる) */
.stage {
  position: relative;
  width: calc(var(--u) * 1440);
  margin-inline: auto;
}

.site-header {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.site-logo {
  position: absolute;
  top:  calc(var(--u) * 59);
  left: calc(var(--u) * 60);
  width: calc(var(--u) * 843);
  margin: 0;
  color: var(--c-ink);
}
.site-logo svg { width: 100%; height: auto; }

/* Figma は 3 カラム。中央カラムだけ About / News の 2 段になっている */
.global-nav {
  position: absolute;
  top:  calc(var(--u) * 73);
  left: calc(var(--u) * 1105);
  display: grid;
  grid-template-columns: calc(var(--u) * 96) calc(var(--u) * 88) auto;
  align-items: start;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 20);
  line-height: 1;
}
.global-nav__col { display: grid; row-gap: calc(var(--u) * 25); }
.global-nav a { transition: color .2s; }
.global-nav a:hover { color: var(--c-red); }

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  height: calc(var(--u) * 790);
  overflow: hidden;
}

/* ShapeTool のホスト。シーンの初期頂点はキャンバス全体 (1110.72 x 685.52) を
   ちょうど埋めるので、ホスト＝Figma のシェイプ枠でそのまま一致する。
   頂点は常に 0..W / 0..H にクランプされるため、モーフィングでもはみ出さない */
.hero__shape {
  position: absolute;
  top:  calc(var(--u) * 100);
  left: calc(var(--u) * 142);
  width:  calc(var(--u) * 1162);
  height: calc(var(--u) * 605);
  z-index: 0;
}

/* 右端の縦組み「Top」 */
.hero__totop {
  position: absolute;
  top:  calc(var(--u) * 400);
  left: calc(var(--u) * 1420);
  margin: 0;
  z-index: 1;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 13);
  line-height: 1;
  writing-mode: vertical-rl;
}

.hero__tagline {
  position: absolute;
  top:  calc(var(--u) * 605);
  left: calc(var(--u) * 1079);
  margin: 0;
  z-index: 1;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 46.119);
  line-height: 1;
  white-space: nowrap;
}

.hero__stamp {
  position: absolute;
  top:  calc(var(--u) * 705);
  left: calc(var(--u) * 60);
  width: calc(var(--u) * 60);
  margin: 0;
  z-index: 1;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 11);
  line-height: 1.2;
  letter-spacing: .02em;
}

/* =========================================================
   News
   ========================================================= */

.news { position: relative; padding: calc(var(--u) * 142) 0 0; }

.news__heading {
  margin: 0 calc(var(--u) * 273) 0 0;
  text-align: right;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 87.328);
  line-height: 1;
  font-weight: 400;
  color: #3d3d3d;
}

/* 罫線は各項目の下だけ (見出しの直下には引かない) */
.news__list { margin: 0 calc(var(--u) * 273) 0 calc(var(--u) * 257); }
.news__item { border-bottom: 1px solid var(--c-border); }

.news__link {
  display: grid;
  gap: calc(var(--u) * 14);
  /* 下 30 は line-height 1.4 のぶんを差し引いた値。1 件 122px になる */
  padding: calc(var(--u) * 40) 0 calc(var(--u) * 30);
  transition: opacity .25s;
}
/* 見出しの箱と間隔が二重になるぶん、1 件目だけ上を詰める */
.news__item:first-child .news__link { padding-top: calc(var(--u) * 23); }
.news__link:hover { opacity: .55; }

.news__date,
.news__title {
  font-size: calc(var(--u) * 16);
  line-height: 1;
}
.news__date { font-family: var(--f-en); }
.news__title { line-height: 1.4; }

/* 枠線つきのボタン。View more / Submit などで使い回す */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;   /* Figma はテキスト左寄せ (左 24px) */
  min-width: calc(var(--u) * 236);
  height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 24);
  border: 1px solid var(--c-ink);
  border-radius: 0;
  background: none;
  color: var(--c-ink);
  font-family: var(--f-en);
  font-size: calc(var(--u) * 22.718);
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.btn:hover { background: var(--c-ink); color: var(--c-bg); }

.news__more { margin: calc(var(--u) * 51) 0 0 calc(var(--u) * 257); }

/* =========================================================
   Next Theme — 今回のテーマ紹介
   ========================================================= */

/* Figma の列: ラベル 91..202 / 見出し 272..510 / 本文 811..1287 */
.theme {
  display: grid;
  /* 3 列目は本文 476 + 追い込み分の余白 231 を足した幅にする。
     margin だけで送ると列幅がその分削られて本文が早く折り返してしまう */
  grid-template-columns: calc(var(--u) * 111) calc(var(--u) * 238) calc(var(--u) * 707);
  align-items: start;
  column-gap: calc(var(--u) * 70);
  padding: calc(var(--u) * 212) 0 0 calc(var(--u) * 91);
}

.theme__label {
  margin: 0;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 31);
  line-height: 1.22;
  color: #3d3d3d;
}

.theme__words {
  margin: calc(var(--u) * 107) 0 0;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 87.328);
  line-height: 1;
  font-weight: 400;
}

.theme__body {
  margin: calc(var(--u) * 107) 0 0 calc(var(--u) * 231);
  font-size: calc(var(--u) * 16);
  line-height: 1.4;
  color: #3d3d3d;
}
.theme__body p { margin: 0; }
.theme__body p + p { margin-top: 1.4em; }

/* 各セクションの見出し (Event Info / Titles / FAQ / Sponsors 共通) */
.sec-heading {
  margin: 0;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 84);
  line-height: 1;
  font-weight: 400;
}

/* 画面の外へはみ出す装飾シェイプ。ヒーローより控えめに、低 fps で回す */
.deco {
  position: absolute;
  width:  calc(var(--u) * 502);
  height: calc(var(--u) * 266);
  z-index: 0;
  pointer-events: none;
}

/* =========================================================
   Event Info
   ========================================================= */

.event { position: relative; padding: calc(var(--u) * 254) 0 calc(var(--u) * 86); }
/* .deco と詳細度が並ぶため :not() で除外する。
   これを外すと装飾が absolute を失ってフローを押し下げる */
.event > *:not(.deco) { position: relative; z-index: 1; }

.event .sec-heading { margin-left: calc(var(--u) * 272); }

/* Figma は -32 だが、あちらは静止した書き出し。こちらは形が変わり続けるので、
   右端がテキスト列 (x=445) に届かない位置まで逃がしておく */
.event__deco--l { left: calc(var(--u) * -70); top: calc(var(--u) * 779); }
.event__deco--r { left: calc(var(--u) * 1088); top: calc(var(--u) * 134); }

/* 行間 39 は Figma 実測。ここを広げると 2 行目が装飾シェイプに潜り込む */
.event__grid {
  display: grid;
  grid-template-columns: calc(var(--u) * 366) calc(var(--u) * 476);
  gap: calc(var(--u) * 39) 0;
  margin: calc(var(--u) * 90) 0 0 calc(var(--u) * 445);
}

.event__label {
  margin: 0 0 calc(var(--u) * 41);
  font-family: var(--f-en);
  font-size: calc(var(--u) * 20);
  line-height: 1;
}

.event__value {
  margin: 0;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 47.65);
  line-height: 1;
  white-space: nowrap;
}
/* 曜日や補足は大きい数字の右にベースラインを揃えて添える */
.event__sub {
  margin-left: calc(var(--u) * 12);
  font-size: calc(var(--u) * 20);
}
.event__note {
  margin-left: calc(var(--u) * 20);
  font-family: var(--f-ja);
  font-size: calc(var(--u) * 16);
}
.event__time {
  margin: calc(var(--u) * 17) 0 0;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 20);
  line-height: 1;
}
.event__value + .event__value { margin-top: calc(var(--u) * 17); }

/* 開催期間は 2 つの日付をダッシュでつなぐ */
.event__dash {
  display: inline-block;
  width: calc(var(--u) * 50);
  margin-left: calc(var(--u) * 8);
  border-top: 1px solid var(--c-ink);
  vertical-align: calc(var(--u) * 14);
}

.event__map {
  width:  calc(var(--u) * 364);
  height: calc(var(--u) * 183);
  margin-bottom: calc(var(--u) * 27);
  background: #d9d7d0;
  overflow: hidden;
}
.event__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.event__venue {
  margin: 0;
  font-family: var(--f-ja);
  font-size: calc(var(--u) * 20);
  line-height: 1.6;
}
.event__venue a {
  text-decoration: underline;
  text-underline-offset: calc(var(--u) * 6);
  transition: color .2s;
}
.event__venue a:hover { color: var(--c-red); }
.event__address {
  margin: calc(var(--u) * 23) 0 0;
  font-size: calc(var(--u) * 16);
  line-height: 2;
  color: #3d3d3d;
}

/* =========================================================
   Titles — 出展作品。テーマごとの 3 タブ
   ========================================================= */

.titles { padding-bottom: calc(var(--u) * 120); }

/* 見出しとタブを一体で追従させる。1 タブ約 40 作品あり縦に長いので、
   スクロール中もテーマを切り替えられるようにする */
.titles__bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-bg);
  padding: calc(var(--u) * 40) 0 0;
}

.titles__bar-inner {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 160);
  padding: 0 calc(var(--u) * 160);
}

.titles__heading {
  margin: 0;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 84);
  line-height: 1;
  font-weight: 400;
}

.titles__tabs {
  position: relative;
  display: flex;
  gap: calc(var(--u) * 115);
}

.titles__tab {
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  color: #3d3d3d;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 55.207);
  line-height: 1;
  cursor: pointer;
  opacity: .45;
  transition: opacity .3s;
}
.titles__tab:hover { opacity: .75; }
.titles__tab[aria-selected="true"] { opacity: 1; color: var(--c-ink); }

/* アクティブなタブの右肩に乗る赤い図形。タブ間はスライドで移動する */
.titles__marker {
  position: absolute;
  top: calc(var(--u) * -21);
  left: 0;
  width:  calc(var(--u) * 78);
  height: calc(var(--u) * 42);
  color: var(--c-red);
  pointer-events: none;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.titles__marker svg { width: 100%; height: 100%; }

.titles__rule {
  margin: calc(var(--u) * 30) calc(var(--u) * 74) 0;
  border: 0;
  border-top: 1px solid var(--c-border);
}

.titles__grid {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--u) * 352));
  gap: calc(var(--u) * 40) calc(var(--u) * 32);
  padding: calc(var(--u) * 133) calc(var(--u) * 160) 0;
}

.title-card[hidden] { display: none; }

/* リンクの有無で a / div が入れ替わるので、間隔はこの箱で持つ */
.title-card__inner {
  display: grid;
  gap: calc(var(--u) * 16);
  align-content: start;
}

.title-card__thumb {
  aspect-ratio: 352 / 198;
  overflow: hidden;
  background: #e3e1da;
}
.title-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.title-card__inner:hover .title-card__thumb img { transform: scale(1.04); }

.title-card__body {
  display: grid;
  gap: calc(var(--u) * 8);
  font-family: var(--f-ja);
  font-weight: 700;
  line-height: 1.6;
}
.title-card__name    { margin: 0; font-size: calc(var(--u) * 26); }
.title-card__creator { margin: 0; font-size: calc(var(--u) * 16); }

/* =========================================================
   FAQ
   ========================================================= */

.faq { padding: calc(var(--u) * 252) 0 0; }
.faq .sec-heading { text-align: center; }

.faq__list {
  margin: calc(var(--u) * 65) calc(var(--u) * 139);
  border-top: 1px solid var(--c-border);
}
.faq__item { border-bottom: 1px solid var(--c-border); }

/* details/summary で開閉する。JS なしでも動く */
.faq__q {
  display: grid;
  grid-template-columns: calc(var(--u) * 38) 1fr calc(var(--u) * 20);
  align-items: start;
  gap: calc(var(--u) * 0);
  padding: calc(var(--u) * 24) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: calc(var(--u) * 15);
  line-height: 2.13;
  color: #3d3d3d;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__mark {
  font-family: var(--f-en);
  font-weight: 400;
  font-size: calc(var(--u) * 16);
}

/* 十字を回して +/− を切り替える */
.faq__toggle {
  position: relative;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  margin-top: calc(var(--u) * 6);
  justify-self: end;
}
.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--c-ink);
  transition: transform .3s;
}
.faq__toggle::after { transform: rotate(90deg); }
.faq__item[open] .faq__toggle::after { transform: rotate(0deg); }

.faq__a {
  display: grid;
  grid-template-columns: calc(var(--u) * 38) 1fr;
  padding: 0 0 calc(var(--u) * 30);
  font-size: calc(var(--u) * 15);
  line-height: 2.13;
  color: #3d3d3d;
}
.faq__a p { margin: 0; }

/* =========================================================
   Sponsors
   ========================================================= */

.sponsors { padding: calc(var(--u) * 180) calc(var(--u) * 159) 0; }

.sponsors__grid {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--u) * 352));
  gap: calc(var(--u) * 32);
  margin-top: calc(var(--u) * 65);
}

.sponsor {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(var(--u) * 245);
  padding: calc(var(--u) * 40);
  background: #fff;
}
.sponsor img { max-height: 100%; width: auto; object-fit: contain; }

/* ランク名とその下線は左上に置く */
.sponsor__rank {
  position: absolute;
  top:  calc(var(--u) * 16);
  left: calc(var(--u) * 16);
  padding-bottom: calc(var(--u) * 3);
  border-bottom: 1px solid var(--c-ink);
  font-family: var(--f-en);
  font-size: calc(var(--u) * 20);
  line-height: 1;
}

/* =========================================================
   Newsletter / Contact
   ========================================================= */

.cta {
  display: grid;
  grid-template-columns: calc(var(--u) * 483) 1fr;
  gap: calc(var(--u) * 107);
  padding: calc(var(--u) * 127) calc(var(--u) * 160) 0;
}

.cta__heading {
  margin: 0;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 48);
  line-height: 1.2;
  font-weight: 400;
  color: #3d3d3d;
}
.cta__lead {
  margin: calc(var(--u) * 12) 0 0;
  font-size: calc(var(--u) * 16);
  line-height: 2;
}

.newsletter__field {
  margin: calc(var(--u) * 47) 0 0;
  padding: 0 0 calc(var(--u) * 12);
  border: 0;
  border-bottom: 1px solid var(--c-ink);
  width: 100%;
  background: none;
  color: var(--c-ink);
  font-family: var(--f-en);
  font-size: calc(var(--u) * 20);
}
.newsletter__field::placeholder { color: #8f8d87; }
.newsletter__submit { margin-top: calc(var(--u) * 40); min-width: calc(var(--u) * 213); }

/* Contact 側は帯の中で「Contact Us」が横に流れ続ける */
.contact {
  position: relative;
  display: grid;
  align-content: center;
  gap: calc(var(--u) * 24);
  height: calc(var(--u) * 293);
  padding: 0 calc(var(--u) * 40);
  overflow: hidden;
  background: var(--c-ink);
  color: #fff;
}
.contact__marquee {
  position: absolute;
  top: calc(var(--u) * 22);
  left: 0;
  display: flex;
  width: max-content;
  font-family: var(--f-en);
  font-size: calc(var(--u) * 120);
  line-height: 1;
  color: rgba(255, 255, 255, .14);
  animation: contact-slide 18s linear infinite;
}
.contact__marquee span { padding-right: calc(var(--u) * 40); }
@keyframes contact-slide { to { transform: translateX(-50%); } }

.contact__lead {
  position: relative;
  margin: 0;
  font-size: calc(var(--u) * 16);
  line-height: 2;
}
.contact .btn {
  position: relative;
  border-color: #fff;
  color: #fff;
  min-width: calc(var(--u) * 213);
}
.contact .btn:hover { background: #fff; color: var(--c-ink); }

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  margin-top: calc(var(--u) * 205);
  border-top: 1px solid var(--c-border);
  padding: calc(var(--u) * 116) calc(var(--u) * 160) calc(var(--u) * 80);
}

.site-footer__top {
  display: grid;
  grid-template-columns: calc(var(--u) * 482) calc(var(--u) * 169) calc(var(--u) * 202) 1fr;
  align-items: start;
}

.site-footer__logo { width: calc(var(--u) * 241); color: var(--c-ink); }

.site-footer__nav { display: grid; gap: calc(var(--u) * 24); }
.site-footer__nav a {
  font-family: var(--f-en);
  font-size: calc(var(--u) * 20);
  line-height: 1;
  transition: color .2s;
}
.site-footer__nav a:hover { color: var(--c-red); }

.site-footer__sns-label {
  margin: 0 0 calc(var(--u) * 31);
  font-family: var(--f-en);
  font-size: calc(var(--u) * 15);
  line-height: 1;
}
.site-footer__sns { display: flex; gap: calc(var(--u) * 20); }
.site-footer__sns a { display: block; width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.site-footer__sns svg { width: 100%; height: 100%; }

.site-footer__bottom {
  display: grid;
  grid-template-columns: calc(var(--u) * 482) calc(var(--u) * 169) calc(var(--u) * 202) 1fr;
  margin-top: calc(var(--u) * 140);
  font-family: var(--f-en);
  font-size: calc(var(--u) * 14);
  line-height: 1.7;
}
.site-footer__bottom p { margin: 0; }

/* 動きを抑える設定の環境ではアニメーションを止める(JS 側でも pause する) */
@media (prefers-reduced-motion: reduce) {
  .hero__shape canvas { animation: none !important; }
  .titles__marker,
  .title-card__thumb img { transition: none; }
  .contact__marquee { animation: none; }
}