/* Figma ではこの2つのラベルだけ字間が 8%。 */
.timetable .eyebrow,
.about .eyebrow {
  letter-spacing: 0.08em;
}

@charset "utf-8";

/* ---------------------------------------------------------------------------
   Redesign HR Forum 2026 — セクション
--------------------------------------------------------------------------- */

/* ---- 協賛ロゴの帯 --------------------------------------------------------- */

/* 地色は持たない。下地は .hero__rest が持つ水面。 */
/* 設計ではカードが y=1060、高さ116。下の余白は KEYNOTE 側が持つ。 */
.logos {
  padding-block: clamp(56px, 11.1vw, 160px) 0;
}

.logos__track {
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  padding-block: 25px;   /* カードの高さを設計の116pxに合わせる */
  box-shadow: 0 4px 100px rgb(0 0 0 / 5%);
}

.logos__row {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.6vw, 80px);
  width: max-content;
  animation: marquee 34s linear infinite;
  scale: var(--logo-scale, 1);
  transform-origin: left center;
}

.marquee__set {
  display: flex;
  align-items: center;
  gap: inherit;
  flex: none;
}

/* 設計は各社の大きさをそろえていない。width/height 属性が設計の実寸なので、
   CSS では寸法を触らない（触ると属性より優先され、原寸で出てしまう）。 */
.logos__row img {
  object-fit: contain;
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.logos__row:hover {
  animation-play-state: paused;
}

/* ---- 装飾のかすみ（Figma の Mask group）----------------------------------- */

/*
  Vector 16 を 200 のぼかしでマスクにして、水の写真を抜いたもの。窓と写真の
  ずれは Figma の実測どおりに置く（cover に任せると写真の濃い中心が出る）。
  Figma には全部で5つあるが、OVERVIEW 左のひとつは窓と写真が重なっておらず
  何も映らないので置いていない。KEYNOTE のカードの背後には元々ない。
*/
.wash {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  opacity: 0.31;
  pointer-events: none;
  mask: url("../img/mask-wave.svg?v=1f3cb9ba") center / 100% 100% no-repeat;
}

.wash img {
  position: absolute;
  max-width: none;
  height: auto;
}

/* 558x372 の窓。写真 1270x1682 を (-356,-655) に置く。 */
.wash--message-top,
.wash--message-right {
  width: calc(558 / 1440 * 100vw);
  aspect-ratio: 558 / 372;
}

.wash--message-top img,
.wash--message-right img {
  left: calc(-356 / 558 * 100%);
  top: calc(-655 / 372 * 100%);
  width: calc(1270 / 558 * 100%);
}

/* 564x723 の窓。写真 1386x1836 を (-381,-923) に置く。 */
.wash--message-left,
.wash--overview-right,
.wash--overview-left {
  width: calc(564 / 1440 * 100vw);
  aspect-ratio: 564 / 723;
}

.wash--message-left img,
.wash--overview-right img {
  left: calc(-381 / 564 * 100%);
  top: calc(-923 / 723 * 100%);
  width: calc(1386 / 564 * 100%);
}

/* 位置は .voyage（設計 y2346 起点）と .overview（同 y10225 起点）から測る。 */
.wash--message-top {
  left: calc(1003 / 1440 * 100vw);
  top: calc((2281 - 2346) / 1440 * 100vw);
}

.wash--message-left {
  left: calc(-114 / 1440 * 100vw);
  top: calc((2820 - 2346) / 1440 * 100vw);
}

.wash--message-right {
  left: calc(834 / 1440 * 100vw);
  top: calc((3292 - 2346) / 1440 * 100vw);
}

.wash--overview-right {
  left: calc(932 / 1440 * 100vw);
  top: calc((10140 - 10225) / 1440 * 100vw);
}

/* この1枚だけ写真が 69.2° 回して置かれている。 */
.wash--overview-left {
  left: calc(-167 / 1440 * 100vw);
  top: calc((10985 - 10225) / 1440 * 100vw);
}

.wash--overview-left img {
  left: calc(913.8 / 564 * 100%);
  top: calc(-778.3 / 723 * 100%);
  width: calc(1386 / 564 * 100%);
  transform-origin: 0 0;
  rotate: 69.2deg;
}

/* ---- KEYNOTE SPEAKERS ----------------------------------------------------- */

.keynote {
  position: relative;
  overflow: hidden;
  /* 見出しは y=1336（ロゴ帯の下160px）、水の帯の下端 y=2346 で終わる。 */
  padding-block: clamp(56px, 11.1vw, 160px) clamp(48px, 7.9vw, 114px);
}

.keynote__lead {
  margin-top: 20px;
  font-size: clamp(32px, 0.79vw + 28.6px, 40px);
  font-weight: 700;
  line-height: 1.6;
}

.keynote__list {
  display: grid;
  /* 1200 の中に 314 の列を3つ、間は60。右端に AND MORE... が縦で立つ。 */
  grid-template-columns: repeat(3, 26.17%) auto;
  column-gap: 5%;
  margin-top: clamp(40px, 5.6vw, 80px);
}

/* Figma では3枚の右に -90° で立っている。 */
.keynote__more {
  letter-spacing: 0.08em;
  align-self: end;
  margin-bottom: -56px;
  margin-left: 20px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.person__portrait {
  position: relative;
  width: 93.63%;
  aspect-ratio: 294 / 354;
  margin-inline: 6.37% 0;
  display: grid;
  place-items: center;
}

/* Figma では写真枠の y242（枠は354）にローマ字が乗る。列の左端まで出る。 */
.person__romaji {
  position: absolute;
  left: -6.8%;
  top: 68.4%;
  margin: 0;
}

.person__portrait::after {
  /* 写真の外側に一本のリング。 */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ring-soft);
  border-radius: 999px;
}

.person__portrait img {
  width: 95.2%;
  height: 96%;
  object-fit: cover;
  border-radius: 999px;
}

.person__romaji {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--blue);
}

.person__name {
  margin-top: 28px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
}

.person__org {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.person__role {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft-a);
}

/* ---- MESSAGE -------------------------------------------------------------- */

/*
  航路の破線は Figma の PC 座標 x141–1586 / y2333–4425 にある。下端が4領域カードの
  下辺とちょうど重なるので、そこを合わせて敷けば縦線が列の位置に落ちる。
  横幅は 1440 に対する比で置くため、どの画面幅でも列と一致する。
*/
.voyage {
  position: relative;
  /* 設計では帯の上端 2346 から MESSAGE の枠 2407 まで 61px ある。 */
  padding-top: calc(61 / 1440 * 100vw);
  /* 航路は Figma でも 1440 の外（x1586）まで伸びていて、枠で切られている。 */
  overflow: hidden;
}

.voyage__route,
.voyage__guides {
  position: absolute;
  left: calc(141 / 1440 * 100%);
  bottom: 0;
  width: calc(1445 / 1440 * 100%);
  max-width: none;
  pointer-events: none;
}

/* 曲線は本文の後ろ。縦線は4領域のカードの前（Figma の重なり順）。 */
.voyage__route {
  z-index: 0;
}

.voyage__guides {
  z-index: 2;
}

/* 航路・縦線・かすみは絶対配置のままにする。 */
.voyage > *:not(.voyage__route):not(.voyage__guides):not(.wash) {
  position: relative;
  z-index: 1;
}

/*
  下の余白が大きいのは、ここに航路の破線とその先のマーカーが入るため。
  Figma では図の下端 3353 から4領域の上端 3915 まで 562px 空いている。
*/
.message {
  position: relative;
  padding-top: clamp(64px, 11.1vw, 160px);
  padding-bottom: clamp(96px, 39vw, 562px);
  background: transparent;
}

/* 設計では文章の塊だけ x=132（他は120）。 */
.message > .band__inner {
  padding-left: 12px;
}

.message__title {
  margin-top: 12px;
  font-size: clamp(24px, 0.4vw + 22.3px, 28px);
  font-weight: 700;
  line-height: 1.6;
}

.message__body {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 16px;
  font-weight: 500;
  line-height: 2.375;
}

/* ---- スリム化 ←羅針盤→ 再投資 --------------------------------------------- */

.balance {
  /* 円は画面の外まで出るので、ページに横スクロールを出さないよう切る。 */
  overflow: hidden;
  /* 本文の塊は y=2599〜2899、円の列は y=2999。 */
  margin-top: clamp(48px, 6.94vw, 100px);
}

.balance__row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin-inline: auto;
  gap: 76px;
}

/* 外輪は 354px の破線（Figma は 1px / dash [2,6]）。中の円は 340px。 */
.balance__side {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 354px;
  aspect-ratio: 1;
}

.balance__side::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ring-line, #e3e3e3);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 354 354'%3E%3Ccircle cx='177' cy='177' r='176.5' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='2 6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: background-color 0.4s var(--ease);
}

.balance__disc {
  position: relative;
  display: grid;
  place-content: center;
  width: 340px;
  aspect-ratio: 1;
  border-radius: 50%;
  text-align: center;
}

/*
  塗りだけが薄い。文字は薄くならないので、背景を別の層にして不透明度を振る。
  Figma の paint.opacity は平常 0.26、マウスが来た側だけ 1.0。
*/
.balance__disc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  opacity: 0.26;
  /* Figma の BACKGROUND_BLUR 35.4 */
  backdrop-filter: blur(17.7px);
  transition: opacity 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.balance__side[data-side="slim"] .balance__disc::before {
  background: radial-gradient(circle 262px at 110% 38%, #a5eaff, #74e9cc);
}

.balance__side[data-side="invest"] .balance__disc::before {
  background: radial-gradient(circle 465px at 83% -49%, #87d7ff, #aaabff);
}

.balance[data-active="slim"] .balance__side[data-side="slim"] .balance__disc::before,
.balance[data-active="invest"] .balance__side[data-side="invest"] .balance__disc::before {
  opacity: 1;
  backdrop-filter: none;
  box-shadow: 0 21px 60px rgb(0 0 0 / 20%);
}

/* ポインタのある側だけリングを赤くする。 */
.balance[data-active="slim"] .balance__side[data-side="slim"],
.balance[data-active="invest"] .balance__side[data-side="invest"] {
  --ring-line: var(--ring);
}

.balance__word {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
}

.balance__note {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft-a);
}

/*
  枠は 270px（Figma の配置枠）。SVG は 960 の外へ出る方位の文字と円を含むので、
  その分だけ大きく描いて左上へずらす。Figma 側もクリップしていない。
*/
.balance__rose {
  position: relative;
  flex: none;
  width: 270px;
  aspect-ratio: 1;
}

.balance__rose svg {
  position: absolute;
  left: calc(-40 / 960 * 100%);
  top: calc(-61 / 960 * 100%);
  /* base.css の max-width:100% に当たると 960 の枠まで縮んで位置がずれる。 */
  width: calc(1035 / 960 * 100%);
  max-width: none;
  height: auto;
  overflow: visible;
}


/* 羅針盤はポインタのある側へ向く（balance.js が --rose を書き換える）。 */
#rose-dial {
  transform: rotate(var(--rose, 0deg));
  transition: transform 1.1s var(--ease);
}

/* ---- 4領域 ---------------------------------------------------------------- */

/*
  Figma の下地は 360x724 の帯（#F3F3F3 → #E2E1FA）で、下端がちょうど
  North Star の帯の上端と同じ色・同じ位置。節ごとに敷くと段差が出るので、
  節全体にかけて次の帯の色で終える。
*/
.domains {
  padding-bottom: clamp(48px, 5vw, 96px);
  background: linear-gradient(to bottom, var(--page) 0%, var(--lavender) 100%);
  /* 英字ラベルは列からはみ出す前提の飾りなので、外にこぼれた分は切る。 */
  overflow: hidden;
}

.domains__grid {
  display: grid;
  /* minmax(0,1fr) にしないと、はみ出す英字ラベルの幅まで列が広がる。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 1440px);
  margin-inline: auto;
}

.domain {
  position: relative;
  /* 設計では 360 の列に 264 の中身を x=36 から置き、文字は左そろえ。 */
  padding: calc(80 / 1440 * 100vw) calc(60 / 1440 * 100vw) 0 calc(36 / 1440 * 100vw);
  text-align: left;
}


/* 列の境目の縦線は .voyage__route の中にある（Figma では航路と地続き）。 */

/*
  Figma では列の最初の要素なので、見出し・アイコン・本文より後ろに来る。
  絶対配置のままだと前に出てしまうので、兄弟側も位置指定して順番で決める。
*/
.domain > *:not(.domain__en) {
  position: relative;
}

/* Figma では 90° 回して列の左端に立てている（横に寝かせていない）。 */
.domain__en {
  position: absolute;
  /* 90° 回した結果、文字は列の左端 48px の帯に収まる。 */
  left: 0;
  top: 0;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(22px, 2.6vw + 5px, 48px);
  font-weight: 500;
  line-height: 1;
  color: transparent;
  /* Figma は横方向の白→#E4E3F9。しかも右端が枠の 177% 先にあるので、
     見えている範囲はほぼ白のまま、右へいくほどわずかに藤色が差す。 */
  background: linear-gradient(to right, #fff 0%, #e4e3f9 177%);
  background-clip: text;
}

.domain__ja {
  margin-top: 0;
  font-size: clamp(18px, 1.67vw, 24px);
  font-weight: 700;
  line-height: 1.6;
}

.domain__icon {
  display: grid;
  place-items: center;
  height: calc(184 / 1440 * 100vw);
  min-height: 120px;
  margin-block: 12px;
}

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

/* アイコン待ちの仮置き。届いたら .domain__icon img に差し替える。 */
.domain__icon[data-placeholder]::after {
  content: attr(data-placeholder);
  display: grid;
  place-items: center;
  width: min(100%, 160px);
  aspect-ratio: 1;
  border: 1px dashed var(--muted);
  border-radius: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.domain__text {
  font-size: clamp(13px, 1.11vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

/* ---- What is our North Star? ---------------------------------------------- */

.northstar {
  overflow: hidden;
  padding-block: 26px;
  background: linear-gradient(to bottom, var(--lavender), var(--lavender-deep));
  border-block: 1px solid rgb(255 255 255 / 60%);
}

.northstar__row {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: marquee 30s linear infinite;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(48px, 6.94vw, 100px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* ---- TIME TABLE ----------------------------------------------------------- */

.timetable {
  /* 設計では白い枠 4579、見出し 4739、枠の下端 6170。 */
  padding-block: clamp(56px, 11.1vw, 160px) clamp(40px, 6.25vw, 90px);
  /*
    Figma では画像が左右反転（m00=-1, m02=1440）で枠いっぱいに置かれ、
    塗りの不透明度が 0.33。白地に 33% で乗るので白っぽく見える。
  */
  background:
    linear-gradient(rgb(255 255 255 / 67%), rgb(255 255 255 / 67%)),
    url("../img/timetable-bg.webp?v=1b91e19d") center / 100% 100% no-repeat,
    #fff;
}

.timetable__list {
  display: grid;
  gap: 12px;
  /* 見出しの塊 4739..4812 のあと、一覧は 4860 から。カードは 1140 幅。 */
  margin-top: clamp(28px, 3.33vw, 48px);
  padding-inline: clamp(0px, 2.08vw, 30px);
}

.slot {
  display: grid;
  grid-template-columns: 106px 16px 78px 1fr auto;
  /* 設計のカードは 1140x142 で、中身はすべて上下中央。 */
  min-height: 142px;
  align-items: center;
  gap: 0 40px;
  padding: 0 41px;
  border-radius: 12px;
  background: #fff;
  /* 白地に白いカードなので、影だけで浮かせる。 */
  box-shadow: 0 4px 40px rgb(0 0 0 / 10%);
  backdrop-filter: blur(10px);
}

.slot__label {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue);
}

/* 丸印と、次の枠へ続く縦線。 */
.slot__mark {
  position: relative;
  align-self: stretch;
}

.slot__mark::before {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, var(--blue) 0 4px, transparent 4px);
}

.slot__mark::after {
  content: "";
  position: absolute;
  top: calc(50% + 8px);
  bottom: -12px;
  left: 7px;
  width: 1px;
  background: var(--blue);
}

.slot:last-child .slot__mark::after {
  display: none;
}

.slot__time {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  padding-top: 30px;
}

.slot__body {
  padding-top: 30px;
}

.slot__topic {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cta);
}

.slot__title {
  margin-top: 10px;
  font-size: clamp(17px, 0.4vw + 15.3px, 20px);
  font-weight: 700;
  line-height: 1.45;
}

.slot__note {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-soft-a);
}

.slot__people {
  display: flex;
  gap: 32px;
  justify-self: end;
}

.slot__person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 155px;
}

.slot__person img {
  width: 70px;
  height: 92px;
  flex: none;
  object-fit: cover;
  border-radius: 999px;
}

.slot__person b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.slot__person span {
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft-a);
}

/* ---- SPEAKERS ------------------------------------------------------------- */

.speakers {
  /* 見出しは前の枠から 160px 下。 */
  padding-block: clamp(56px, 10.76vw, 155px) clamp(56px, 11.1vw, 160px);
  background: var(--page);
}

.speakers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 3.4vw, 40px);
  /* 設計では写真の枠（248）の上端が 6535。 */
  margin-top: clamp(40px, 4.1vw, 59px);
}

/* 残りの2名は中央に寄せる（Figma の並び）。 */
.speakers__grid--last {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 66.6%);
  margin-inline: auto;
  margin-top: clamp(32px, 3.4vw, 40px);
}

.speaker {
  display: grid;
  /* 写真の行は実寸、カードは残りいっぱい（列の高さをそろえるため）。 */
  grid-template-rows: auto 1fr;
  align-content: start;
  justify-items: center;
}

/* 写真はカードの上端に 48px 重なる（Figma の配置）。 */
.speaker__card {
  width: 100%;
  margin-top: -48px;
  padding: 73px 25px 25px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 4px 40px rgb(0 0 0 / 10%);
}

.speaker__portrait {
  position: relative;
  width: 248px;
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.speaker__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ring);
  border-radius: 999px;
}

.speaker__portrait img {
  width: 96.8%;
  height: 96.8%;
  object-fit: cover;
  border-radius: 999px;
}

.speaker__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}

.speaker__org {
  margin-top: 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--blue);
}

.speaker__role {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.speaker__bio {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

/* ---- ABOUT ---------------------------------------------------------------- */

.about {
  /* 白い帯は 9299..10225、中身は 9459..10065（上下とも160）。 */
  padding-block: clamp(56px, 11.1vw, 160px);
  background: #fff;
}

.about__inner {
  display: grid;
  grid-template-columns: 614fr 486fr;
  gap: clamp(32px, 4vw, 100px);
  align-items: center;
}

.about__logo {
  width: 368px;
  max-width: 100%;
  margin-top: 20px;
}

.about__pitch {
  margin-top: 32px;
  font-size: clamp(18px, 1.67vw, 24px);
  font-weight: 700;
  line-height: 1.6;
}

.about__body {
  margin-top: 20px;
  max-width: 560px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--muted);
}

.about__clients {
  margin-top: 40px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}

.about__clients dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.about__clients dd {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

/* 幅が変わっても上下が真円のままになるよう、半径は縦横それぞれの比で指定する。 */
.about__art img {
  width: 100%;
  aspect-ratio: 486 / 606;
  object-fit: cover;
  /* Figma は四隅とも半径1000（＝幅の半分で頭打ち）。上下が半円のカプセル。 */
  border-radius: 50% / 40.1%;
}

/* ---- OVERVIEW ------------------------------------------------------------- */

.overview {
  position: relative;
  /* 帯は 10225..11272、中身は 10385..11112（上下とも160）。 */
  padding-block: clamp(56px, 11.1vw, 160px);
  background: linear-gradient(to bottom, var(--sky), var(--lavender));
}

/* 下端で次のセクションの濃い藤色へ溶かす（Figma の Rectangle 82）。 */
.overview {
  overflow: hidden;
}

.overview::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 453px;
  max-height: 43%;
  background: linear-gradient(to bottom, rgb(147 173 227 / 0%), var(--deep));
  pointer-events: none;
}

/* かすみは絶対配置のまま置く（下の一括指定に巻き込まれると流れに入ってしまう）。 */
.overview > *:not(.wash) {
  position: relative;
  z-index: 1;
}

.overview__table {
  width: min(100%, 800px);
  margin: clamp(32px, 2.78vw, 40px) auto 0;
  border-radius: 12px;
  background: var(--card);
  backdrop-filter: blur(50px);
  box-shadow: 0 4px 100px rgb(0 0 0 / 5%);
  overflow: hidden;
}

.overview__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 0 40px;
  /* 設計の行は 82.5px（FORMAT だけ 113.5）。 */
  min-height: 82.5px;
  padding: 16px 40px;
}

.overview__row + .overview__row {
  border-top: 1px solid var(--rule);
}

.overview__row dt {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.overview__row dd {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.overview__row dd small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* ---- 申込フォーム --------------------------------------------------------- */

.entry__title {
  margin-top: 14px;
  font-size: clamp(24px, 0.79vw + 20.6px, 32px);
  font-weight: 700;
  line-height: 1.6;
}

.entry__lead {
  margin-top: 18px;
  font-size: clamp(14px, 0.2vw + 13.1px, 16px);
  font-weight: 500;
  color: rgb(0 0 0 / 60%);
}

/*
  中身は FanGrowth の iframe。高さは先方が postMessage で決めるので、
  カードは固定高にせず伸ばす。別オリジンなので中の見た目は変えられない。
*/
.entry__card {
  width: min(100% - 2 * var(--gutter), 800px);
  margin: clamp(32px, 3vw, 56px) auto 0;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 24px 60px rgb(15 9 21 / 16%);
}

.entry__card #fg-form {
  display: block;
  width: 100%;
  border: 0;
}

.entry__loading {
  padding: 48px 0;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.entry__loading a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
}

.entry__notes {
  width: min(100% - 2 * var(--gutter), 800px);
  margin: 24px auto 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.9;
  color: rgb(0 0 0 / 40%);
}

/* ---- FAQ ------------------------------------------------------------------ */

.faq__list {
  width: min(100% - 2 * var(--gutter), 800px);
  margin: clamp(32px, 3vw, 56px) auto 0;
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(15 9 21 / 16%);
}

.faq__item + .faq__item {
  border-top: 1px solid var(--rule);
}

.faq__q {
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 28px 40px;
  text-align: left;
}

.faq__q > span:first-child {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--cta);
}

.faq__q > span:nth-child(2) {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.faq__sign {
  position: relative;
  width: 24px;
  height: 24px;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 16px;
  height: 1px;
  background: var(--blue);
  transition: transform 0.3s var(--ease);
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__q[aria-expanded="true"] .faq__sign::after {
  transform: rotate(0deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.faq__q[aria-expanded="true"] + .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  display: grid;
  grid-template-columns: 34px 1fr;
  padding: 0 40px 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
}

.faq__a p::before {
  content: "A";
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--blue);
}

/* ---- フッター ------------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  /* 設計のフッターは 1440x93、左右の余白は 32px。 */
  padding: 31px 32px;
  background: #fff;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-footer__brand b {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.site-footer__host {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--note);
}

.site-footer__host img {
  width: 125px;
}

.site-footer__meta {
  text-align: right;
  font-size: 12px;
}

.site-footer__meta a {
  font-weight: 700;
}

.site-footer__meta small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: rgb(0 0 0 / 44%);
}

/* ---- 狭い画面 ------------------------------------------------------------- */

@media (width <= 1080px) {
  .slot {
    grid-template-columns: 96px 32px 78px 1fr;
    gap: 0 24px;
    padding: 24px;
  }

  .slot__people {
    grid-column: 3 / -1;
    padding-top: 16px;
  }
}

@media (width <= 900px) {
  /* ロゴは設計の実寸で並ぶので、狭い画面では帯ごと縮める。 */
  :root {
    --logo-scale: 0.7;
  }

  .balance__row {
    gap: 40px;
  }

  .balance__side {
    width: 484px;
  }

  .balance__disc {
    width: 472px;
  }

  .balance__rose {
    width: 128px;
    /* SP では羅針盤が左右の円に少しかぶる。 */
    margin-inline: -44px;
  }

  .balance__word {
    font-size: 24px;
  }

  .message__route {
    top: -120px;
    width: 720px;
  }

  .keynote__list {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* SP では AND MORE... は横書きで中央（Figma の SP 配置）。 */
  .keynote__more {
    writing-mode: horizontal-tb;
    align-self: auto;
    margin: 0;
  }

  .speakers__grid,
  .speakers__grid--last {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .speaker {
    max-width: 420px;
  }

  .domains__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about__inner {
    grid-template-columns: 1fr;
  }

  .about__art {
    order: -1;
  }

  .overview__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 24px;
  }

  .faq__q,
  .faq__a p {
    padding-inline: 24px;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__meta {
    text-align: left;
  }
}

@media (width <= 560px) {
  /* Figma の SP には英字ラベルがない。 */
  .domain__en {
    display: none;
  }

  /* SPEAKERS と ENTRY FORM は SP では左揃え（Figma の配置）。 */
  .speakers .section-head,
  .entry .section-head {
    text-align: left;
  }

  .entry .section-head,
  .faq .section-head {
    width: min(100% - 2 * var(--gutter), 800px);
    margin-inline: auto;
  }

  .slot {
    grid-template-columns: 24px 1fr;
    gap: 0 16px;
  }

  .slot__label {
    grid-column: 2;
    padding-top: 0;
  }

  .slot__mark {
    grid-row: 1 / -1;
  }

  .slot__mark::before {
    top: 4px;
  }

  .slot__mark::after {
    top: 28px;
    bottom: -24px;
  }

  .slot__time,
  .slot__body,
  .slot__people {
    grid-column: 2;
    padding-top: 10px;
  }

  .slot__people {
    flex-wrap: wrap;
    gap: 16px;
  }

  .domains__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .domain::before,
  .domain:nth-child(even)::before {
    display: none;
  }
}