@charset "utf-8";

/*
  第78回日本寄生虫学会南日本支部大会・第75回日本衛生動物学会南日本支部大会 合同大会
  meeting.css — Vitrine デザインシステム（_design/design.md 準拠・学会専用）
  トップページ：1画面ヒーロー（masthead + 黄金比 split + bottom bar）+ 本文。
*/

/* #region MARK:Tokens（Vitrine） */
:root {
  /* === Neutral Surface — sage-grey khaki === */
  --c-surface-base: #fcfcfc;
  --c-surface-1: hsl(70deg 9.09% 87.06% / 28%);
  --c-surface-2:       #C8CABE;
  --c-surface-sink:    #838878;
  --c-surface-inverse: #26261F;

  /* === Ink / Text === */
  --c-ink:         #26261F;
  --c-ink-80:      rgba(38, 38, 31, 0.80);
  --c-ink-64:      rgba(38, 38, 31, 0.64);
  --c-ink-48:      rgba(38, 38, 31, 0.48);
  --c-ink-on-sink: #26261F;
  --c-off-white:   #f6f6f6; /* オフホワイト：hero-screen の面 ＋ on-dark の文字（旧 --c-cream #F4F2EA から改名・値変更 2026-06-06） */

  /* === Brand / Accent === */
  --c-olive:      #6E6B52;
  --c-olive-deep: #4A4A38;
  --c-brass:      #8A7B4F;

  /* === Semantic === */
  --c-success: #5C7A5E;
  --c-warning: #B0852F;
  --c-error:   #9E4B3C;
  --c-info:    #4A6670;

  /* === Typography === */
  --ff-display:  "YakuHanJP", "Cormorant", "Cormorant Garamond", Georgia, serif;
  --ff-sans:     "YakuHanJP", "Archivo", system-ui, sans-serif;
  --ff-jp-serif: "YakuHanJP", "Zen Old Mincho", "Noto Serif JP", serif;
  --ff-jp:       "YakuHanJP", "Noto Sans JP", system-ui, sans-serif;
  --jp-scale: 1.08;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.875rem;
  --text-2xl:  clamp(2.25rem, 4vw, 3rem);
  --text-3xl:  clamp(3rem, 6vw, 4.5rem);
  --text-display: clamp(3.5rem, 9vw, 7rem);
  --text-hero: clamp(4rem, 12vw, 9rem);
  --text-hero-jp:    clamp(2.75rem, 8vw, 5.5rem);
  --text-display-en: clamp(1.75rem, 4.5vw, 3.25rem);
  --text-eyebrow-en: 0.875rem;
  --lh-hero:  0.98;
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.6;
  --lh-jp:    1.8;
  --ls-display: -0.01em;
  --ls-label:   0.22em;
  --ls-jp:      0.02em;

  /* === Spacing（8pt） === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* === Radius === */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(38, 38, 31, 0.06), 0 1px 1px rgba(38, 38, 31, 0.04);
  --shadow-md: 0 4px 12px rgba(38, 38, 31, 0.08), 0 2px 4px rgba(38, 38, 31, 0.05);
  --shadow-lg: 0 12px 32px rgba(38, 38, 31, 0.12), 0 4px 8px rgba(38, 38, 31, 0.06);

  /* === Motion === */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  /* === Vitrine specimen warp slider === */
  --slide-hold: 4s;
  --slide-trans: 2.5s;
}
/* #endregion */

/* #region MARK:Self-hosted Fonts (YakuHanJP — 約物アキ詰め) */
/*
 * YakuHanJP v4.1.1 — 教室サイト global.css 由来の @font-face を本サブサイトに踏襲。
 * unicode-range で約物のみ（、。「」『』（）【】〈〉《》〔〕・！？：；［］｛｝）に
 * 限定して読み込むため、本文フォント (Noto Sans JP / Zen Old Mincho) と衝突しない。
 * 400/500/700 のみ使用。JP フォントスタック (--ff-jp / --ff-jp-serif) の先頭に "YakuHanJP" を差し込み済。
 */
@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/yakuhanjp/YakuHanJP-Regular.woff2") format("woff2");
  unicode-range: U+3001, U+3002, U+3008, U+3009, U+300a, U+300b, U+300c, U+300d, U+300e, U+300f, U+3010, U+3011, U+3014, U+3015, U+30fb, U+ff01, U+ff08, U+ff09, U+ff1a, U+ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/yakuhanjp/YakuHanJP-Medium.woff2") format("woff2");
  unicode-range: U+3001, U+3002, U+3008, U+3009, U+300a, U+300b, U+300c, U+300d, U+300e, U+300f, U+3010, U+3011, U+3014, U+3015, U+30fb, U+ff01, U+ff08, U+ff09, U+ff1a, U+ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/yakuhanjp/YakuHanJP-Bold.woff2") format("woff2");
  unicode-range: U+3001, U+3002, U+3008, U+3009, U+300a, U+300b, U+300c, U+300d, U+300e, U+300f, U+3010, U+3011, U+3014, U+3015, U+30fb, U+ff01, U+ff08, U+ff09, U+ff1a, U+ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}
/* #endregion */

/* #region MARK:Base（modern-normalize 補完 reset + Typography Reset — global.css 由来を Vitrine 用に調整） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  min-width: 0; /* flex/grid 子要素のはみ出し防止 */
}

html,
body {
  overflow-x: clip;
}

/* iOS Safari: 横向き回転時の自動文字拡大を抑止／フォーム widget・スクロールバーの配色を light 固定 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--ff-jp);
  background: var(--c-surface-base);
  color: var(--c-ink);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-jp);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 横はみ出し（100vw full-bleed）の抑制は html,body の overflow-x:clip に一本化。
     hidden は scroll container を生み position:sticky を壊す footgun のため body には付けない */
}

a {
  color: inherit;
}

/* Media */
img {
  max-width: 100%;
  display: block;
  height: auto;
  object-fit: cover;
  vertical-align: middle;
}

picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* [hidden] を復活（上の img/canvas 等の display:block が UA の [hidden]{display:none} を
   オリジン優先で打ち消すため明示的に再宣言。特異度 0,1,0 > 要素セレクタ 0,0,1 で確実に勝つ）。
   これが無いと WebGL 動作時に hidden のはずの .hero__fallback が canvas を覆い、
   ヒーローのワープ・スライダーが静止画に隠れて見えなくなる */
[hidden] {
  display: none;
}

/* Buttons & Form */
button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

label {
  display: inline-block;
  max-width: 100%;
}

/* Focus a11y (WCAG 2.4.7) */
a,
button,
input,
select,
textarea,
summary,
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: transparent;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--c-olive);
  outline-offset: 2px;
}

/* Typography Reset — 既定マージンを解除（意匠はクラスで付与） */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  font-weight: 500;
  margin: 0;
  line-height: var(--lh-tight);
}

p {
  margin: 0;
  overflow-wrap: anywhere;
}

dl,
dd {
  margin: 0;
}

figure {
  margin: 0;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

td,
th {
  word-break: break-all;
}
/* #endregion */

/* #region MARK:Hero screen（1画面：masthead + hero + bottom bar） */
.hero-screen {
  display: flex;
  flex-direction: column;
  /* min-height: 100svh; */
  background-color: var(--c-off-white);
  margin-bottom: var(--space-9);
}
/* #endregion */

/* #region MARK:Masthead（3分割：brand / center label / nav） */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto; /* mobile: brand | ハンバーガー */
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) clamp(1.25rem, 4vw, var(--space-7));
  /* border-bottom: 1px solid var(--c-surface-2); */
}

.masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--c-ink);
}

.masthead__brand-logo {
  display: block;
  width: 13rem;
  /* height: 1.75rem; */ /* base（モバイル） */
  /* max-width: 100%; */
}

/* ハンバーガー（モバイルのみ・44×44px） */
.masthead__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-self: end;
  position: relative;
  z-index: 60; /* ドロワー/バックドロップより前＝×として常にクリック可 */
}

.masthead__toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-ink);
  transition: transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

/* 開いたら × に */
body.nav-open .masthead__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
body.nav-open .masthead__toggle-bar:nth-child(2) {
  opacity: 0;
}
body.nav-open .masthead__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* モバイル: 右からのスライドインドロワー */
.masthead__nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(82vw, 320px);
  background: var(--c-surface-base);
  border-left: 1px solid var(--c-surface-2);
  padding: calc(var(--space-9) + var(--space-4)) var(--space-7) var(--space-7);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain; /* 内側スクロール終端で背景へ連鎖させない（iOS ラバーバンド/裏スクロール防止） */
  -webkit-overflow-scrolling: touch; /* iOS 慣性スクロール */
  z-index: 55;
}

body.nav-open .masthead__nav {
  transform: translateX(0);
}

.masthead__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.masthead__nav a {
  font-family: var(--ff-jp);
  font-size: var(--text-md);
  letter-spacing: 0.08em;
  color: var(--c-ink-80);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  padding-block: var(--space-1);
  transition: color var(--dur-fast) var(--ease-out);
}

.masthead__nav a:hover {
  color: var(--c-olive-deep);
}

.masthead__nav [aria-current="page"] {
  color: var(--c-olive);
  position: relative;
}

/* アクティブページ：モバイルは文字の左にドット */
.masthead__nav [aria-current="page"]::after {
  content: "";
  position: absolute;
  left: -0.95em;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-olive);
  transform: translateY(-50%);
}

/* ドロワー背景（タップで閉じる） */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(38, 38, 31, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
  z-index: 50;
}

body.nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
}

/* ドロワー展開中はスクロールロック */
body.nav-open {
  overflow: hidden;
}

@media (min-width: 1025px) {
  .masthead {
    grid-template-columns: auto auto;
    justify-content: start; /* ブランド＋nav を左に寄せる */
    gap: var(--space-6);
    padding: var(--space-7) clamp(1.25rem, 4vw, var(--space-7));
  }
  .masthead__brand-logo {
    /* height: 3.3rem; */ /* base 2.75rem の 1.2 倍（デスクトップのみ） */
    width: 20rem;
  }
  .masthead__toggle {
    display: none;
  }
  /* nav: ドロワー解除 → 通常のインライン表示へ戻す */
  .masthead__nav {
    position: static;
    width: auto;
    background: none;
    border: none;
    padding: 0;
    transform: none;
    overflow: visible;
    z-index: auto;
  }
  .masthead__nav ul {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(var(--space-3), 1.6vw, var(--space-5));
    justify-content: flex-start;
  }
  .masthead__nav a {
    font-size: var(--text-xs);
    padding-block: 0;
  }
  /* ドット: デスクトップは文字の下・中央。
   * nav ホバー時は JS が --dot-shift（ホバー項目への X 移動量）と --dot-opacity（減光）を更新し、
   * ホバーしている項目の真下へスライド。離れると変数リセットで元位置・不透明へ戻る。 */
  .masthead__nav [aria-current="page"]::after {
    left: 50%;
    top: calc(100% + 0.35em);
    transform: translateX(calc(-50% + var(--dot-shift, 0px)));
    opacity: var(--dot-opacity, 1);
    /* ドット追従はゆっくり目に＝base の 2 倍（離れて戻る動きも同速） */
    transition: transform calc(var(--dur-base) * 2) var(--ease-out),
      opacity calc(var(--dur-base) * 2) var(--ease-out);
  }
  .nav-backdrop {
    display: none;
  }
}
/* #endregion */

/* #region MARK:ヘッダー fixed ＋ スクロール縮小（デスクトップ・全6ページ） */
/* デスクトップではヘッダーを画面上部に固定。fixed は流れから外れるため、本文を「未スクロール時の
 * ヘッダー高さ（上下 padding var(--space-7)*2 ＋ ロゴ高 3.3rem = 9.3rem）」分だけ下げて潜り込みを防ぐ。
 *  - 下層ページ：masthead は body 直下 → body:has(> .masthead) に padding-top
 *  - index    ：masthead は .hero-screen 配下 → .hero-screen に同じ padding-top（地色 off-white に合わせて段差レス）
 * 少しスクロールしたら縦 padding を圧縮（→ var(--space-4)=1rem）。is-scrolled は js/meeting.js が body に付与。 */
@media (min-width: 1025px) {
  .masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--c-surface-base);
    transition: padding var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
  }
  /* index のヘッダーはヒーロー地（off-white）に合わせて段差を消す */
  .hero-screen .masthead {
    background: var(--c-off-white);
  }
  /* 本文の潜り込み防止（ヘッダー高さ分の余白）：下層ページは body、index は hero-screen に確保 */
  body:has(> .masthead) {
    padding-top: calc(var(--space-7) * 2 + 3.3rem);
  }
  .hero-screen {
    padding-top: calc(var(--space-7) * 2 + 3.3rem);
  }
  body.is-scrolled .masthead {
    padding-block: var(--space-4);
    box-shadow: var(--shadow-sm); /* 縮小時は微シャドウで本文と分離 */
  }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .masthead {
    transition: none; /* 動きを抑える設定では即時に切り替える */
  }
}
/* #endregion */

/* #region MARK:Hero — 左 61.8% コピー / 右 38.2% メディア（WebGL warp slider） */
.hero {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr; /* mobile: 縦積み */
  overflow: hidden;
  /* background-color: var(--c-off-white); */
}

@media (min-width: 1025px) {
  .hero {
    grid-template-columns: 61.8% 38.2%;
  }
}

/* --- 左：コピー（横組み・日本語主役） --- */
.hero__copy {
  /* order: 1; */
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  /* gap: var(--space-5); */
  padding: clamp(2.5rem, 5vw, var(--space-9)) clamp(1.5rem, 5vw, var(--space-8));
  position: relative;
  z-index: 1;
}

.hero__kicker {
  font-family: var(--ff-sans);
  font-size: 3.4vw;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-olive);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}



.hero__title {
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: 4.3vw; /* 調整用に vw 固定（後で微調整可） */
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  margin: 0;
  padding-left: 5%;
  position: relative;
  /* overflow: hidden; */
}


.hero__title:before {
  content: "";
  width: 9%;
  height: 1px;
  background: var(--c-olive);
  display: block;
  transform: rotateZ(
-45deg);
  transform-origin: 0;
  left: 0%;
  position: absolute;
  top: -7%;
}

.hero__title-em {
  display: inline-block;
  margin-top: 0.18em;
  color: var(--c-olive-deep);
  font-size: 0.8em;
}

.hero__sub {
  /* font-family: var(--ff-sans); */
  font-size: 3.5vw;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-64);
  margin: 0;
  white-space: nowrap;
  font-family: var(--ff-display);
  padding-left: 5%;
  margin-top: 0.8em;
}

.hero__sub sup {
  font-size: 0.6em;
}

/* 日本語の日付（ボーダーの下・欧文の上）。ボーダー線＋上部アキは hero__date 側に持たせる */
.hero__date {
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: 4.2vw;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  margin: 0;
  margin-top: 12vw;
  padding-left: 0;
  position: relative;
}

.hero__date::before {
  content: "";
  width: 9%;
  height: 1px;
  background: var(--c-olive);
  display: block;
  position: absolute;
  left: 0;
  top: -4vw;
}

/* 会場名：モバイルは日付の次行 / デスクトップは同行（全角アキ区切り） */
.hero__date-venue {
  display: block;
}

.hero__meta {
  font-family: var(--ff-display);
  font-size: 3.2vw;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-80);
  margin: 0;
  white-space: nowrap;
  margin-top: 0.5em;
}


.hero__cta-wrap {
  margin-top: 1.9vw;
}

/* セカンダリボタン（2番目に目立つ）：アウトライン pill + アロー（design.md §3.1 Primary 準拠） */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em; /* vw スケールに追従させるため em 基準 */
  font-family: var(--ff-sans);
  font-size: 3.4vw; /* トップ CTA だけ vw 指定＝ヒーローの流体スケールに合わせる（padding は em で追従。desktop は別途上書き） */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-ink);
  text-decoration: none;
  border: 1px solid var(--c-olive);
  border-radius: var(--radius-md);
  padding: 0.9em 1.8em;
  min-height: 44px; /* WCAG タップターゲット（vw が小さい時の下限） */
  background: transparent;
  transition: background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* ラベルは Noto Sans JP で描画し .trim-noto-sans-jp の実測値とフォントを一致させる
 * （--ff-sans は日本語グリフを持たず system-ui 落ちするとトリム量がズレるため） */
.hero__cta-label {
  font-family: var(--ff-jp);
}

.hero__cta-mark {
  width: 0;
  height: 0;
  /* 三角マークも em 基準にして CTA の vw フォントサイズと一体でスケール（旧 8px/5px 相当の比） */
  border-left: 0.55em solid var(--c-brass);
  border-top: 0.34em solid transparent;
  border-bottom: 0.34em solid transparent;
  transition: transform var(--dur-base) var(--ease-out), border-left-color var(--dur-base) var(--ease-out);
}

.hero__cta:hover {
  background: var(--c-olive-deep);
  color: var(--c-off-white);
  border-color: var(--c-olive-deep);
}

.hero__cta:hover .hero__cta-mark {
  transform: translateX(3px);
  border-left-color: var(--c-off-white); /* 暗転した地で三角を視認 */
}

.hero__cta:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 2px;
}

/* === デスクトップ用 font-size 上書き（base=モバイルの「後ろ」に置いて確実に勝たせる） === */
@media (min-width: 1025px) {
  .hero__title {
    font-size: 2.5vw;
    white-space: nowrap;
  }

  .hero__kicker {
    font-size: 1.1vw; /* 後で調整 */
  }

  .hero__sub {
    font-size: 1.1vw; /* 後で調整 */
    padding-left: 5%;
    font-size: 1.7vw;
  }

  .hero__date {
    font-size: 1.6vw;
    margin-top: 6vw;
  }

  .hero__date::before {
    top: -2vw;
  }

  .hero__date-venue {
    display: inline;
  }

  .hero__date-venue::before {
    content: "　"; /* desktop: 全角アキで日付と区切る */
  }

  .hero__meta {
    font-size: 1.2vw; /* 後で調整 */
    /* margin-top: -1vw; */
  }

  .hero__cta-wrap {
    font-size: 1.2vw; /* 後で調整 */
  }

  .hero__cta {
    font-size: 1.2vw; /* トップ CTA の vw 指定（desktop。base 3.4vw を上書き） */
  }

}

/* --- 右：メディア（WebGL warp slider・断ち落とし） --- */
.hero__media {
  /* order: 0; */ /* mobile では画像を上に */
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  /* background: var(--c-ink); */
  min-height: clamp(300px, 42svh, 760px);
  align-self: center;
  transform: scale(0.9) translateY(-9%);
}

/* === デスクトップ専用コピー（base=モバイルと同属性。ここを編集してデスクトップだけ調整） === */
@media (min-width: 1025px) {
  .hero__media {
    order: 2; /* desktop では右へ */
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 50%;
    /* background: var(--c-ink); */
    min-height: 0;
    align-self: center;
    transform: scale(1.0) translateX(-3%);
  }

  .hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    /* border-radius: 50%; */
  }

  .hero__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__seal {
    position: absolute;
    left: -60px;
    top: 50%;
    width: 120px;
    height: 120px;
    transform: translateY(-50%);
    color: var(--c-brass);
    opacity: 0.9;
    pointer-events: none;
    animation: seal-spin 42s linear infinite;
  }

  .hero__seal svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero__seal text {
    fill: currentColor;
    font-family: var(--ff-sans);
    font-size: 9px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
  }
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  /* border-radius: 50% 0 0 50%; */
}

.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 回転シール（真鍮・境界に straddle） */
.hero__seal {
  position: absolute;
  /* left: -60px; */
  /* top: 50%; */
  aspect-ratio: 1;
  width: 33vw;
  height: auto;
  transform: translateY(-50%);
  color: var(--c-brass);
  opacity: 0.9;
  pointer-events: none;
  animation: seal-spin 42s linear infinite;
  right: 0;
  bottom: -36vw;
  /* font-family: var(--ff-display); */
}

@media (min-width: 1025px) {

.hero__seal {width: 11vw;left: auto;bottom: -2vw;top: auto;right: -6vw;}

  
}

.hero__seal svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__seal text {
  fill: currentColor;
  font-family: var(--ff-sans);
  font-size: 9px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

@keyframes seal-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* base（上）＝モバイル定義。desktop 差分は `@media (min-width: 1025px)` 側で上書きする */

@media (prefers-reduced-motion: reduce) {
  .hero__seal {
    animation: none;
  }
}
/* #endregion */

/* #region MARK:Bottom bar（タグライン + スライドカウンタ） */
.botbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) clamp(1.25rem, 4vw, var(--space-7));
  border-top: 1px solid var(--c-surface-2);
}

.botbar__tag {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-olive);
}

.botbar__count {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--c-ink-64);
  font-variant-numeric: tabular-nums;
}
/* #endregion */

/* #region MARK:本文（container / block / info / timeline / footer） */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, var(--space-8));
}

main.container {
  padding-block: 0 var(--space-10);
}

.block {
  margin-bottom: var(--space-9);
}

.block:last-child {
  margin-bottom: 0;
}

.block__heading {
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-surface-2);
}

.info {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

@media (min-width: 1025px) {
  .info {
    grid-template-columns: 8rem 1fr;
  }
}

.info dt {
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-olive);
  align-self: baseline;
}

.info dd {
  margin: 0;
  color: var(--c-ink);
}

.timeline {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc; /* Base のリスト reset を打ち消してマーカー表示 */
}

.timeline li {
  margin-bottom: var(--space-3);
  line-height: var(--lh-jp);
}

.timeline li::marker {
  color: var(--c-brass);
}

.timeline a {
  color: var(--c-olive-deep);
  text-underline-offset: 0.2em;
}

/* カーキ帯フッター（参照画像：左タグ / 中央縦罫 / 右に座標・クリーム文字・full-bleed） */
.site-foot {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone ホームインジケータ分だけカーキ帯を延長 */
  background: var(--c-surface-sink);
  color: var(--c-off-white);
  border-top: 1px solid rgba(244, 242, 234, 0.28);
}

.site-foot__inner {
  display: grid;
  grid-template-columns: 1fr; /* mobile: 縦積み */
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-7) clamp(1.5rem, 5vw, var(--space-8));
}

.site-foot__left {
  justify-self: start;
}

.site-foot__name {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  line-height: var(--lh-jp);
  color: var(--c-off-white);
}

.site-foot__copy {
  margin: var(--space-2) 0 0;
  font-family: var(--ff-display);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 242, 234, 0.72);
}

.site-foot__divider {
  display: none; /* mobile: 非表示 / desktop で表示 */
  justify-self: center;
  width: 1px;
  height: clamp(48px, 9vh, 88px);
  background: rgba(244, 242, 234, 0.45);
}

.site-foot__org {
  justify-self: start;
  text-align: left;
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  line-height: var(--lh-jp);
  color: var(--c-off-white);
}

@media (min-width: 1025px) {
  .site-foot__inner {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-5);
    padding-block: clamp(2.5rem, 7vh, 5rem);
  }
  .site-foot__divider {
    display: block;
  }
  .site-foot__org {
    justify-self: end;
    text-align: right;
  }
}
/* #endregion */

/* #region MARK:ページヘッダー（下層ページ共通の見出しブロック） */
/* 文字は本文カラム（.container フロー内）に置いたまま、背景だけ ::before で
 * ウィンドウ幅いっぱい（full-bleed）に描く。100vw のスクロールバー差は装飾背景側に逃げ、
 * 本文の整列は通常フローで保証される。
 * 紙テクスチャ＝SVG fractalNoise のグレイン（中立色・opacity 0.09）を淡セージ地に重ねる。 */
.page-head {
  position: relative;
  z-index: 0;
  margin-bottom: var(--space-9);
  padding-block: var(--space-7);
}

.page-head::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  /* border-block: 1px solid var(--c-surface-2); */
  background-color: hsl(70deg 9.09% 87.06% / 28%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='0.09'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.page-head__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--ff-sans);
  font-size: var(--text-eyebrow-en);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-olive);
  font-family: var(--ff-display);
}

.page-head__title {
  margin: 0;
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-jp);
  color: var(--c-ink);
}

.page-head__lead {
  /* max-width: 64ch; */
  margin: var(--space-5) 0 0;
  font-family: var(--ff-jp);
  font-size: var(--text-md);
  line-height: var(--lh-jp);
  color: var(--c-ink-64);
  text-align: justify;
}

/* デスクトップ: page-head の最低高さを確保＋タイトルを 1 段階大きく（base text-xl=1.875rem → 2.25rem） */
@media (min-width: 1025px) {
  .page-head {
    min-height: 19rem;
  }
  .page-head__title {
    font-size: 2.25rem;
  }
}
/* #endregion */

/* #region MARK:ご案内（guide）本文 — 番号付き小見出し / 本文 / リスト */
/* guide ページの上下余白は標準の 6 割（トークン参照のまま 0.6 倍） */
main.container.guide {
  padding-block: 0 calc(var(--space-9));
}

.guide-item {
  margin-top: var(--space-8);
}

.guide-item:first-of-type {
  margin-top: var(--space-6);
}

/* 番号付き h3：brass の Cormorant 数字 ＋ 明朝の見出し */
.guide-item__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

.guide-item__num {
  flex: none;
  /* font-family: var(--ff-display); */
  /* font-size: var(--text-xl); */
  /* line-height: 1; */
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
}

.guide-text {
  margin: var(--space-3) 0 0;
  font-family: var(--ff-jp);
  font-size: var(--text-base);
  line-height: var(--lh-jp);
  color: var(--c-ink-80);
  text-align: justify;
}

/* 時間ルールなどの強調行：オリーブの罫で引き締める */
/* 時間ルール＝標本ラベル風タイムチップ（TIME ラベル＋区切り罫＋等幅数字＋微シャドウ） */
.guide-text--emphasis {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--c-surface-2);
  border-left: 3px solid var(--c-olive);
  border-radius: 0;
  background: var(--c-surface-1);
  box-shadow: var(--shadow-sm);
  color: var(--c-ink);
  font-size: var(--text-md);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}



.guide-list {
  margin: var(--space-4) 0 0;
  padding-left: 1.2em;
  list-style: disc;
}

.guide-list li {
  margin-bottom: var(--space-2);
  line-height: var(--lh-jp);
  color: var(--c-ink-80);
}

.guide-list li::marker {
  color: var(--c-brass);
}

/* dl 直後に本文が続くときの間隔 */
.guide-item .info + .guide-text {
  margin-top: var(--space-5);
}
/* #endregion */

/* #region MARK:プログラム（program）本文 — 日付ブロック / セッション / 演題 / 進行 */
/* guide と同じ上下余白（標準の 6 割）。日付＝.block__heading、各セッションを .session で束ねる。 */
main.container.program {
  padding-block: 0 calc(var(--space-9));
}

/* セッション（会務・Session・特別企画 を束ねる単位） */
.session {
  margin-top: var(--space-8);
}

.session:first-of-type {
  margin-top: var(--space-6);
}

/* セッション見出し：brass の Cormorant 数字（Session のみ）＋ 明朝の名称。
 * guide-item__title と同系統の意匠で揃える。 */
.session__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

.session__num {
  flex: none;
  /* font-family: var(--ff-display); */
  /* font-size: var(--text-xl); */
  /* line-height: 1; */
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
}

/* 座長行：オリーブの小ラベル調 */
.session__chair {
  margin: 0 0 var(--space-5);
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--c-olive);
}

/* 演題リスト：時刻｜本文の標本ラベル風 grid（時刻は brass の等幅数字で左カラムに整然と並ぶ） */
.talk-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.talk {
  display: grid;
  grid-template-columns: 1fr; /* mobile: 時刻を上に縦積み */
  gap: var(--space-1) var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-surface-2);
}

.talk:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.talk__time {
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.talk__title {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--text-base);
  line-height: var(--lh-jp);
  color: var(--c-ink);
}

.talk__author {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-64);
}

@media (min-width: 1025px) {
  .talk {
    grid-template-columns: 4.5rem 1fr;
    gap: var(--space-5);
  }
  .talk__time {
    padding-top: 0.15em; /* 本文 1 行目とベースラインを合わせる微調整 */
  }
}

/* 進行（会務・受付・休憩・特別企画など）：範囲時刻チップ＋内容 */
.run-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.run {
  display: grid;
  grid-template-columns: 1fr; /* mobile: 縦積み */
  gap: var(--space-1) var(--space-5);
  margin: 0;
  color: var(--c-ink-80);
}

.run__time {
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.run__desc {
  font-family: var(--ff-jp);
  font-size: var(--text-base);
  line-height: var(--lh-jp);
}

/* セッション内/外に単発で置く進行行（休憩・受付・閉会挨拶）の上アキ */
.run--standalone {
  margin-top: var(--space-5);
}

@media (min-width: 1025px) {
  .run {
    grid-template-columns: 9rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}
/* #endregion */

/* #region MARK:特別講演（lecture）— 演題カード */
/* page-head（特別講演）直下に置く 1 演題ぶんのカード。演題＝h2、演者を続け、所属/日時は info、
 * 主な著書は guide-item / guide-list を流用して見た目を guide と揃える。 */
.lecture__kicker {
  margin: 0 0 var(--space-3);
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-olive);
}

.lecture__title {
  margin: 0 0 var(--space-5);
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-jp);
  color: var(--c-ink);
}

/* 演者：明朝で大きめ・下罫で著書ブロックと分離 */
.lecture__speaker {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--c-surface-2);
  font-family: var(--ff-jp-serif);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

.lecture__speaker-name {
  font-size: 1.15em;
}
/* #endregion */

/* #region MARK:お問い合わせフォーム（form） */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 42rem;
  margin: var(--space-6) 0 0;
}

/* 姓・名はデスクトップで横並び（下のメディアクエリで 2 カラム化） */
.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.form__label {
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-olive);
}

/* 必須バッジ（olive 小タグ・ラベル文言の前に置く）。状態は input の required で SR へ伝わるため視覚バッジは aria-hidden 運用 */
.form__req {
  margin-right: var(--space-2);
  padding: 0.1em 0.5em;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-off-white);
  background: var(--c-olive);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  transition: background-color var(--dur-fast) var(--ease-out);
}

/* 入力が valid（必須を満たす）になったら「必須」→「必須 ✓OK」＋緑バッジへ。
 * 視覚のみの肯定フィードバック（バッジは aria-hidden）。緑は semantic token --c-success（#5C7A5E）。
 * バッジ地に対する文字は #fff で AA 確保（#5C7A5E × #fff ＝ 4.77:1） */
.form__row:has(.form__control:valid) .form__req {
  color: #fff;
  background: var(--c-success);
}

.form__row:has(.form__control:valid) .form__req::after {
  content: " ✓OK";
}

/* 下線型インプット（design.md §3.2＝Vitrine は罫線・余白で律する：枠なし・地透明・border-bottom のみ） */
.form__control {
  width: 100%;
  font-family: var(--ff-jp);
  font-size: var(--text-base); /* iOS: 16px 未満だと focus 時に自動ズームするため 16px(1rem) を死守 */
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-surface-1); /* 淡い面で「入力できる領域」と一目でわかる affordance（Vitrine の余白・罫の方針は維持） */
  -webkit-appearance: none; /* iOS Safari の角丸・内側シャドウ等ネイティブ装飾を除去 */
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--c-surface-2); /* 下線アクセントは継続（focus で olive） */
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; /* 上だけ角丸＝下線をシャープに残す */
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.form__control::placeholder {
  color: var(--c-ink-48);
}

/* iOS/Safari のオートフィル黄色背景を打ち消す（地＝surface-base に合わせる） */
.form__control:-webkit-autofill,
.form__control:-webkit-autofill:hover,
.form__control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f4f4f3 inset; /* 入力欄の面（--c-surface-1 を surface-base に重ねた近似値）に合わせて黄色背景を打ち消す */
  -webkit-text-fill-color: var(--c-ink);
  caret-color: var(--c-ink);
  transition: background-color 9999s ease-out 0s; /* 黄色フラッシュ遅延の定番ハック */
}

/* focus で面が白く浮き上がり、下線が olive に＝アクティブな欄が明確になる */
.form__control:focus-visible {
  outline: none;
  background-color: var(--c-surface-base);
  border-bottom-color: var(--c-olive);
}

/* Windows ハイコントラスト：下罫の色変化は system color に潰されるため outline で focus を担保 */
@media (forced-colors: active) {
  .form__control:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }
}

/* 操作後にだけ不正状態を示す（:invalid と違いロード直後は赤くしない）。エラー色 #c53030＝白地 6.5:1 で AA 合格。
 * aria-invalid は JS（meeting.js）が検証結果として付与＝送信時にまとめて赤罫を立てる経路も担保する */
.form__control:user-invalid,
.form__control[aria-invalid="true"] {
  border-bottom-color: #c53030;
}

/* インラインのエラーメッセージ（JS が文言を流し込む）。role="alert" で SR へ通知。空の間は表示しない */
.form__error {
  display: block;
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: #c53030;
}

.form__error:empty {
  display: none;
}

/* プライバシーポリシー同意の案内文（送信＝同意とみなす旨。チェックボックスは設けない） */
.form__note {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-80);
  margin-top: 2rem;
}

/* ハニーポット（bot 用の囮フィールド）。画面外へ完全に隠す。
 * aria-hidden は付けない＝focusable 要素を内包すると WCAG 4.1.2（axe aria-hidden-focus）違反になるため。
 * 利用者には「空欄のまま」ラベルで案内し、tabindex=-1・autocomplete=off でタブ順・自動入力から除外する。 */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信中（二重送信防止）。ラベル文言は JS が「送信中…」へ差し替える */
.form__submit.is-submitting {
  pointer-events: none;
  opacity: 0.7;
  cursor: wait;
}

textarea.form__control {
  min-height: 8rem;
  resize: vertical;
  line-height: var(--lh-jp);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
}

/* 送信＝サイト共通のアウトライン CTA（hero__cta と同意匠：hover で olive-deep 反転＋off-white） */
.form__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-olive);
  border-radius: var(--radius-md);
  padding: 0.9em 2.4em;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* ラベルは Noto Sans JP で描画し trim 実測値とフォントを一致させる（hero__cta と同手法） */
.form__submit .trim-noto-sans-jp {
  font-family: var(--ff-jp);
}

.form__submit:hover {
  background: var(--c-olive-deep);
  color: var(--c-off-white);
  border-color: var(--c-olive-deep);
}

.form__submit:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 2px;
}

/* ボタン内アイコン（Lucide ライン・約 1em）。送信は brass アクセント → hover で off-white */
.form__btn-icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.form__submit .form__btn-icon {
  color: var(--c-brass);
  transition: color var(--dur-base) var(--ease-out);
}

/* #region MARK:お問い合わせ CTA（Google フォームへ・別ウィンドウ。§3.1 Primary 準拠＝form__submit と同意匠） */
.form-cta {
  margin-top: var(--space-5);
}

.form-cta__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-ink);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--c-olive);
  border-radius: var(--radius-md);
  padding: 0.9em 2.4em;
  min-height: 44px;
  transition: background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.form-cta__link .trim-noto-sans-jp {
  font-family: var(--ff-jp);
}

.form-cta__link:hover {
  background: var(--c-olive-deep);
  color: var(--c-off-white);
  border-color: var(--c-olive-deep);
}

.form-cta__link:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 2px;
}

/* 末尾アイコン＝外部リンク（別ウィンドウ）。brass → hover off-white、↗ 方向へ微移動 */
.form-cta__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: var(--c-brass);
  transition: color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.form-cta__link:hover .form-cta__icon {
  color: var(--c-off-white);
  transform: translate(2px, -2px);
}
/* #endregion */

.form__submit:hover .form__btn-icon {
  color: var(--c-off-white);
}

/* リセット＝控えめなテキストボタン（枠なし・olive・hover で olive-deep）。送信より一段引いた存在感 */
.form__reset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--ff-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-olive);
  background: transparent;
  border: none;
  padding: 0.9em 0.4em;
  min-height: 44px; /* WCAG タップターゲット */
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.form__reset .trim-noto-sans-jp {
  font-family: var(--ff-jp);
}

.form__reset:hover {
  color: var(--c-olive-deep);
}

.form__reset:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 2px;
}

@media (min-width: 1025px) {
  .form__grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* #endregion */

/* #region MARK:テキストリンク（link / link--external） */
.link {
  color: var(--c-olive-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}

.link:hover {
  color: var(--c-brass);
}

/* 外部リンクは末尾に小さな矢印 */
.link--external::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.25em;
  color: var(--c-brass);
  font-size: 0.85em;
}
/* #endregion */

/* #region MARK:地図埋め込み（Google Maps iframe ＋ 経路リンク） */
.map {
  margin-top: var(--space-6);
}

.map__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* aspect-ratio で高さ確保＝CLS 防止 */
  border: 1px solid var(--c-surface-2);
  border-radius: var(--radius-md);
}

.map__link {
  margin: var(--space-4) 0 0;
}
/* #endregion */

/* #region MARK:Utilities（汎用クラス — global.css 由来） */

/* Visually hidden — スクリーンリーダーのみに伝える */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* レスポンシブ改行：スマホのみ <br class="br-sm"> で改行（モバイルファースト記法） */
.br-sm {
  display: inline;
}

/* レスポンシブ可視性ユーティリティ（xs = ~767px・モバイルファースト記法） */
.visible-xs-inline-block {
  display: inline-block;
}

.hidden-xs {
  display: none;
}

@media (min-width: 1025px) {
  .br-sm {
    display: none;
  }
  .visible-xs-inline-block {
    display: none;
  }
  .hidden-xs {
    display: revert;
  }
}

/* JP ベースライントリム（k-jp-font-trim / Noto Sans JP 実測値）
 * 使い方: <span class="trim-noto-sans-jp">日本語</span>（flex 直下は不可・内側 span でラップ）
 * --lh で line-height 上書き可（例: style="--lh: 1.2;"） */
.trim-noto-sans-jp {
  --k-top: 0.423;
  --k-bot: 0.686;
  display: inline-block;
  line-height: var(--lh, 1.5);
}

.trim-noto-sans-jp::before,
.trim-noto-sans-jp::after {
  content: "";
  display: block;
  height: 0;
}

.trim-noto-sans-jp::before {
  margin-bottom: calc((var(--k-top) - var(--lh, 1.5) / 2) * 1em);
}

.trim-noto-sans-jp::after {
  margin-top: calc((var(--k-bot) - var(--lh, 1.5) / 2) * 1em);
}
/* #endregion */

/* #region MARK:ページ先頭へ戻るボタン（右下固定・Vitrine） */
/*
 * 全6ページ共通のフローティングボタン。ファーストビューを超えてスクロールすると出現
 * （js/meeting.js の IntersectionObserver が番兵を監視して .is-visible を付与）。
 * 意匠はヒーローCTA（.hero__cta）と同系統＝オリーブ枠 ＋ hover で olive-deep 反転、
 * アイコンは真鍮の上向き矢印。地は教室サイト（cyan）と混ぜず Vitrine トークンのみで構成。
 */
.to-top {
  position: fixed;
  /* viewport-fit=cover 環境（iPhone）でホームインジケータ／ノッチに被らないよう safe-area を加算 */
  right: calc(clamp(1rem, 4vw, 2rem) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(1rem, 4vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 40; /* masthead toggle(60)/nav(55)/backdrop(50) より下＝ドロワー展開中は隠れる */
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 8vw, 3rem);
  height: clamp(2.75rem, 8vw, 3rem); /* WCAG 2.5.5 タップターゲット 44px 以上 */
  border: 1px solid var(--c-olive);
  border-radius: var(--radius-pill);
  background: var(--c-off-white);
  color: var(--c-ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  /* 既定は不可視＋フォーカス不可。.is-visible が付くまで隠す */
  opacity: 0;
  visibility: hidden;
  translate: 0 0.5rem;
  transition: opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out),
    translate var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.to-top__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-brass);
  transition: transform var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.to-top:hover {
  background: var(--c-olive-deep);
  color: var(--c-off-white);
  border-color: var(--c-olive-deep);
}

.to-top:hover .to-top__icon {
  color: var(--c-off-white);
  transform: translateY(-2px);
}

.to-top:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    translate: 0 0;
    transition: opacity var(--dur-fast) linear,
      visibility var(--dur-fast) linear;
  }
  .to-top:hover .to-top__icon {
    transform: none;
  }
}
/* #endregion */