/* =====================================================================
   LSGP KOBE サイト　大会LP（lsgp.jp/15th/event/）。元：mock/v2/C-congress.html（案C。見た目・文言はモックと同じ）
   作法：1画面に「圧倒的に大きい細い数字」を1つだけ。ほかは小さく落とす。
   規則：下の :root の値だけを使う（例外は 0／1px の罫線／% と fr／em の字送り／縦横比／演出の倍率）。
   ===================================================================== */
:root{
  /* --- 色の役割 --- */
  --bg:#0B1630;        /* 地（濃紺） */
  --bg-deep:#060C1E;   /* 深い地：1画面目・最終・フッター */
  --bg-2:#14234A;      /* 面：顔写真の背景 */
  --paper:#F4EFE6;     /* 生成り：1ページに1か所だけ（参加費＝チケットの面） */
  --fg:#F4EFE6; --fg-2:rgba(244,239,230,.72); --line:rgba(244,239,230,.18);
  --ink:#1B1A17; --ink-2:#5B574F; --line-ink:rgba(27,26,23,.18);
  --gold:#D6C28E; --gold-hover:#E5D7B0; --gold-ink:#7A5C14; /* 金は線・章番号・日付・主ボタンだけ */
  --glow:rgba(214,194,142,.16);  /* 顔写真の背後の淡い光（15周年トップと同じ） */

  /* --- 書体（明朝は20px以上の和文見出しだけ。見出しの中の英数字は Josefin） --- */
  --en:"Josefin Sans","Noto Sans JP",sans-serif;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --mi:"Shippori Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;

  /* --- 文字の段：特大1＋7段。文になっているものは --fs-2（14px）以上 --- */
  --fs-g1:clamp(240px,26vw,400px); /* 特大：1画面目の日付・最後の日数 */
  --fs-g2:clamp(140px,16vw,240px); /* 特大・横長：背の低いスマホの日付 */
  --fs-7:64px;   /* 数字の見出し・大きな人名・早割の額 */
  --fs-6:40px;   /* 和文の大見出し（明朝） */
  --fs-5:26px;   /* 中見出し・価格・時刻 */
  --fs-4:19px;   /* リード・演題 */
  --fs-3:16px;   /* 本文・ボタン */
  --fs-2:14px;   /* 注記・肩書・ナビ（文の最小） */
  --fs-1:11px;   /* 英大文字の小ラベル（章番号の横と日程だけ） */
  --lh-g:.8; --lh-num:1.1; --lh-head:1.5; --lh-small:1.75; --lh-body:1.9;
  /* --- 字間：4種 --- */
  --ls-label:.2em; --ls-head:.06em; --ls-text:.04em; --ls-num:0em; --ls:var(--ls-text);
  --w-l:300; --w-r:400; --w-m:500;

  /* --- 余白：8段。章の上下は --sec --- */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --sec:64px; --blk:var(--s7);
  --max:1200px; --gut:40px; --gap:24px; --hd:64px;
  /* --- 寸法 --- */
  --w-logo-ft:160px; --h-kn:720px; --w-boat:880px; --w-flow-t:136px;
  /* --- 夜景の明るさ（同じ加工で、明るさだけ場所ごと） --- */
  --op-hero:.8; --op-fin:.42;
  /* --- 映画館の背景（15周年トップの大会の章と同じ写真・同じ加工） --- */
  --op-cg:.32;
  --y-cg-screen:160px;  /* 写真のスクリーンの下端を、章の上端からどこに置くか（柱の下・見出しの上） */
  /* --- 会場の章の背景（映画館の客席）：01 の章と同じ加工。スクリーンの下端の置き場所も同じ --- */
  --op-vn:.4; --y-vn-screen:128px;  /* スクリーンの下端を見出しの上端（約160px）から32px離す */

  /* --- 囲み・ボタン（主・副・テキストリンクの3種） --- */
  --btn:56px; --btn-s:44px; --radius:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
@media (max-width:767px){
  :root{
    --fs-g1:50vw; --fs-g2:26vw;
    --fs-7:44px; --fs-6:26px; --fs-5:20px; --fs-4:17px; --fs-3:15px; --fs-2:14px; --fs-1:11px;
    --sec:48px; --blk:var(--s6); --gut:24px; --gap:16px; --hd:56px;
    --w-flow-t:104px; --op-hero:.6; --y-cg-screen:48px; --y-vn-screen:48px;
  }
}

/* ---------- 土台 ---------- */
*,::before,::after{box-sizing:border-box;letter-spacing:var(--ls)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hd);background:var(--bg-deep)}
/* 和文は句読点・括弧・空白・<wbr> でだけ折る（keep-all。auto-phrase に頼らないので Safari でも同じ改行） */
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--jp);font-size:var(--fs-3);line-height:var(--lh-body);--ls:var(--ls-text);font-weight:var(--w-r);line-break:strict;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,dl,dd,ol,ul,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nw{white-space:nowrap}
.wrap{max-width:calc(var(--max) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}
.g12{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}
@media (min-width:900px){.g12{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}}
.sec{position:relative;padding-block:var(--sec)}

/* ---------- 文字の型 ---------- */
.g{display:block;font-family:var(--en);font-weight:var(--w-l);line-height:var(--lh-g);--ls:var(--ls-num);font-variant-numeric:lining-nums;white-space:nowrap}
.g1{font-size:var(--fs-g1)}
.n7{font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-7);line-height:var(--lh-num);--ls:var(--ls-num)}
.n5{font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-num);--ls:var(--ls-num)}
.n{font-family:var(--en);--ls:var(--ls-num)}
.lat{font-family:var(--en);font-weight:var(--w-r);--ls:var(--ls-text)} /* 明朝の見出しの中の英字（セリフ体にしない） */
.h2{font-family:var(--mi);font-weight:var(--w-m);font-size:var(--fs-6);line-height:var(--lh-head);--ls:var(--ls-head);font-feature-settings:"palt";text-wrap:balance}
.h2 .n{font-weight:var(--w-r)}
.h3{font-weight:var(--w-m);font-size:var(--fs-4);line-height:var(--lh-head);--ls:var(--ls-text)}
.lead{font-size:var(--fs-4);line-height:var(--lh-body)}
.mute{color:var(--fg-2)}
.lb{font-family:var(--en);font-weight:var(--w-r);font-size:var(--fs-1);line-height:var(--lh-head);--ls:var(--ls-label);text-transform:uppercase}
.jl{font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
.when{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s3);font-size:var(--fs-2);color:var(--fg-2)}
.when .n5{color:var(--gold)}
.dw{white-space:nowrap;font-family:var(--en);font-size:var(--fs-1);--ls:var(--ls-label);text-transform:uppercase;color:var(--fg-2)}
/* 英字の小さな札：金の細線＋Josefin の大文字（15周年トップの .soon-en と同じ見せ方）。Coming soon・Limited 80 */
.en-tag{display:inline-flex;align-items:center;gap:var(--s3);font-family:var(--en);font-weight:var(--w-r);font-size:var(--fs-1);line-height:var(--lh-head);--ls:var(--ls-label);text-transform:uppercase;color:var(--fg);white-space:nowrap}
.en-tag::before{content:"";width:var(--s5);height:1px;background:var(--gold)}
p{text-wrap:pretty}

/* ---------- ボタン（主＝金の面／副＝線／テキストリンク） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:var(--btn);padding:0 var(--s5);border:1px solid transparent;border-radius:var(--radius);font-family:var(--jp);font-weight:var(--w-m);font-size:var(--fs-3);line-height:var(--lh-num);--ls:var(--ls-head);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.btn i,.tl i{font-style:normal;transition:transform .3s var(--ease)}
.btn:hover i{transform:translateX(var(--s1))}
.btn-p{background:var(--gold);color:var(--bg)}
.btn-p:hover{background:var(--gold-hover)}
.btn-o{border-color:var(--fg-2);color:var(--fg)}
.btn-o:hover{border-color:var(--fg)}
.btn-sm{min-height:var(--btn-s);padding:0 var(--s4);font-size:var(--fs-2)}
.tl{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--btn-s);font-size:var(--fs-3);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--line)}
.tl:hover{text-decoration-color:currentColor}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}
/* 文中のリンク：見た目はそのまま、上下の余白で押せる高さを44px以上に（行の高さは変えない） */
main p a:not([class]),main small a:not([class]),main dd a:not([class]),main .ev a{padding-block:var(--s3)}
main p a.nw{padding-block:var(--s3)}
/* 申込ボタン＋すぐ下の小さな注記（Peatix・早割の期限） */
.apply{display:grid;gap:var(--s2);justify-items:start}
.apply-note{font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
/* 1画面目の早割のカウントダウン（数字だけ Josefin で少し大きく。2桁の時間・分・秒は幅を固定して揺れない） */
.apply-cd{font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2);white-space:nowrap}
.apply-cd .n{display:inline-block;min-width:1.2em;text-align:right;font-size:var(--fs-3);color:var(--fg);font-variant-numeric:tabular-nums}
.btn:focus-visible,.tl:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:767px){
  .btns{flex-direction:column;align-items:stretch}.btns .btn{width:100%}.btns .tl{justify-content:center}
  .apply{justify-items:stretch;text-align:center}.apply .btn{width:100%}
}

/* ---------- 章の柱：章番号＋英字＋和文、下に罫線（番号は折らない） ---------- */
.rh{display:flex;align-items:baseline;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--blk)}
.rh-no{flex:none;white-space:nowrap;font-family:var(--en);font-size:var(--fs-2);line-height:var(--lh-num);color:var(--gold)}
.rh-en{flex:none;white-space:nowrap;font-family:var(--en);font-size:var(--fs-1);line-height:var(--lh-num);--ls:var(--ls-label);text-transform:uppercase;color:var(--fg-2)}
.rh-jp{margin-left:auto;min-width:0;text-align:right;font-size:var(--fs-2);line-height:var(--lh-head);color:var(--fg-2)}

/* ---------- 固定ヘッダー（ロゴは小さく、トップへのリンクを兼ねる） ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:calc(var(--hd) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.hd.on{background:color-mix(in srgb,var(--bg-deep) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--line)}
.hd-in{height:var(--hd);display:flex;align-items:center;gap:var(--s4);padding-inline:var(--gut)}
.hd-logo{flex:none;text-decoration:none;display:flex;align-items:center;gap:var(--s3);min-height:var(--btn-s)}
.hd-logo img{height:var(--s4);width:auto;max-width:none}
.hd-logo span{font-family:var(--en);font-size:var(--fs-1);--ls:var(--ls-label);text-transform:uppercase;color:var(--fg-2);padding-top:var(--s1);display:none}
.hd-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.hd-nav a{display:flex;align-items:center;justify-content:center;min-height:var(--btn-s);min-width:var(--btn-s);padding-inline:var(--s2);font-size:var(--fs-2);color:var(--fg-2);text-decoration:none;white-space:nowrap}
/* ナビの項目は英字（Josefin。大文字にせず字間も控えめにし、項目の間を広く取って区切りを見やすく。2026-10-10 生野先生）。申込ボタンは除く */
.hd-nav a:not(.hd-cta){font-family:var(--en);--ls:var(--ls-head)}
.hd-nav a:hover{color:var(--fg)}
.hd-nav .pc{display:none}
.hd-nav .hd-cta{display:none;color:var(--bg);padding-inline:var(--s4)}
.hd-nav .hd-cta:hover{color:var(--bg)}
@media (min-width:900px){
  .hd-logo img{height:var(--s5)}
  .hd-nav{gap:var(--s4)}  /* 項目の間は広め（区切りを見やすく） */
  .hd-nav .pc{display:flex}
  .hd.cta .hd-nav .hd-cta{display:inline-flex}
}
/* 900〜1199px：ナビの項目と申込ボタンが1行に収まるよう、項目の間を詰める。ロゴの横の「15th Anniversary Congress」の文字は 1200px 以上でだけ出す */
@media (min-width:900px) and (max-width:1199px){.hd-nav{gap:var(--s2)}.hd-nav a{padding-inline:var(--s1)}}
@media (min-width:1200px){.hd-logo span{display:block}}

/* ---------- 写真の処理：夜景は2色調＋粒子（800px の写真の粗さを隠す）。ページ内で同じ加工 ---------- */
.photo{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bg-deep)}
.photo img{width:100%;height:100%;object-fit:cover;filter:url(#duo-night) blur(1px);transform:scale(1.04)}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* =====================================================================
   1画面目：巨大な日付＋神戸港の夜景＋金の水平線＋下端に3つの演目
   高さは --h-vp（読み込んだときの画面の高さ。index.html の <head> のスクリプトが入れる）。スクロールでアプリ内ブラウザのツールバーが縮んでも伸び縮みさせない
   ===================================================================== */
.cv{position:relative;min-height:var(--h-vp,100svh);display:flex;flex-direction:column;isolation:isolate;overflow:hidden;background:var(--bg-deep)}
.cv .photo{left:auto;width:64%}
.cv .photo img{object-position:62% 50%;opacity:var(--op-hero)}
/* 夜景の動き（water.js）：canvas は写真と同じ位置・同じ明るさ・同じ点灯の演出。描けたら（.water）<img> と入れ替える。配置・2色調・ぼかしはシェーダー側で同じにしている */
.photo canvas{position:absolute;inset:0;width:100%;height:100%;visibility:hidden}
.photo.water canvas{visibility:visible}
.photo.water img{visibility:hidden}
.cv .photo canvas{opacity:var(--op-hero)}
.cv::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,var(--bg-deep) 34%,color-mix(in srgb,var(--bg-deep) 40%,transparent) 62%,color-mix(in srgb,var(--bg-deep) 10%,transparent) 100%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 50%,transparent) 0%,transparent 30%,transparent 62%,var(--bg-deep) 100%)}
.cv-in{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;padding-top:calc(var(--hd) + var(--s5));padding-bottom:var(--s6)}
.cv-h1{font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-head);--ls:var(--ls-head)}
.cv-h1 b{font-weight:var(--w-r);color:var(--gold);margin-right:var(--s2)}
.cv-catch{margin-top:var(--s3);font-family:var(--mi);font-weight:var(--w-m);font-size:var(--fs-6);line-height:var(--lh-head);--ls:var(--ls-text);font-feature-settings:"palt"}
.cv-y{margin-top:var(--s5);font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-num);color:var(--gold)}
.cv-date{margin-top:var(--s3);display:flex;align-items:flex-start;gap:var(--s4);font-size:var(--fs-g1)}
.cv-date .d{display:flex;align-items:flex-start;gap:var(--s2)}
.cv-date .dw{padding-top:var(--s3)}
.dash{flex:none;width:.28em;height:1px;background:var(--fg-2);margin-top:.42em}
/* 金の水平線（港の水面）：日付の下端を、画面の左端から写真の側へ溶かして通す */
.cv-foot{position:relative;margin-top:var(--s5);padding-top:var(--s4);display:grid;gap:var(--s4)}
.cv-foot::before{content:"";position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 6%,var(--gold) 46%,color-mix(in srgb,var(--gold) 30%,transparent) 76%,transparent)}
.cv-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4)}
.cv-meta dt{font-size:var(--fs-2);color:var(--fg-2);line-height:var(--lh-head)}
.cv-meta dd{font-size:var(--fs-4);line-height:var(--lh-head)}
.cv-meta dd small{display:block;font-size:var(--fs-2);color:var(--fg-2)}
.cv-meta .days{display:flex;align-items:baseline;gap:var(--s2);white-space:nowrap}
.cv-meta .days .n5{font-size:var(--fs-5)}
/* 下端の帯：3つの演目（ページ内リンク） */
.lineup{border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg-deep) 70%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lineup ol{display:grid}
.lineup li+li{border-top:1px solid var(--line)}
.lineup a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 var(--s3);padding:var(--s3) 0;text-decoration:none}
.lineup .w{grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);font-size:var(--fs-2);line-height:var(--lh-head);color:var(--fg-2)}
.lineup .w .n{font-size:var(--fs-4);color:var(--gold)}
.lineup .w .tm{font-family:var(--en);--ls:var(--ls-num);white-space:nowrap}  /* 時刻（幅が足りなければ次の行へ） */
.lineup b{grid-column:1;font-weight:var(--w-m);font-size:var(--fs-3);line-height:var(--lh-head)}
.lineup b span{white-space:nowrap}
.lineup i{grid-column:2;grid-row:1/span 2;font-style:normal;font-family:var(--en);color:var(--gold);transition:transform .3s var(--ease)}
.lineup a:hover i{transform:translateY(var(--s1))}
@media (min-width:900px){
  .cv-foot{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--s6)}
  .cv-meta{grid-template-columns:auto auto;justify-content:start;gap:var(--s7)}
  .lineup ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lineup li+li{border-top:0;border-left:1px solid var(--line);padding-left:var(--s5)}
  .lineup a{padding:var(--s4) var(--s4) var(--s4) 0}
}
@media (max-width:767px){
  .cv .photo{width:100%}
  .cv .photo img{object-position:64% 50%}
  .cv::before{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 70%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 35%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 85%,transparent) 72%,var(--bg-deep) 100%)}
  .cv-in{justify-content:flex-start;padding-bottom:var(--s5)}
  .cv-catch{font-size:var(--fs-6)}
  .cv-date{flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
  .cv-date .dash{display:none}
  .cv-date .dw{padding-top:var(--s2)}
  .lineup ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lineup li+li{border-top:0;border-left:1px solid var(--line);padding-left:var(--s2)}
  .lineup a{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);padding:var(--s3) 0}
  .lineup b span{display:block}
  .lineup .w .n{font-size:var(--fs-3)}
  .lineup b{font-size:var(--fs-2);line-height:var(--lh-head)}
  .lineup i{display:none}
}
/* 背の低いスマホ（iPhone SE、LINE などのアプリ内ブラウザ。高さ720px以下）では日付を1行にして、主ボタンを1画面目に入れる。
   高さで切り替えるメディアクエリは使わない（アプリ内ブラウザはスクロールで高さが変わり、途中で並びが切り替わってしまう）。判定は読み込んだときの高さ（.short-vp） */
@media (max-width:767px){
  .short-vp .cv-in{padding-top:calc(var(--hd) + var(--s4))}
  .short-vp .cv-y{margin-top:var(--s4)}
  .short-vp .cv-date{flex-direction:row;gap:var(--s2);font-size:var(--fs-g2)}
  .short-vp .cv-date .dash{display:block}
  .short-vp .cv-date .d{flex-direction:column;gap:var(--s1)}
  .short-vp .cv-date .dw{padding-top:0}
  .short-vp .cv-foot{margin-top:var(--s4)}
}
.js .cv .photo img,.js .cv .photo canvas{opacity:0;animation:lightcv 2.4s ease .1s forwards}
@keyframes lightcv{to{opacity:var(--op-hero)}}

/* =====================================================================
   01 この大会について（会の説明・映画館・2日間の流れ）
   ===================================================================== */
.ab-r .lead{color:var(--fg-2)}
.facts{display:grid;align-content:start}
.facts>div{display:grid;grid-template-columns:5em minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.facts dt{font-size:var(--fs-2);color:var(--fg-2);line-height:var(--lh-body)}
.facts dd{font-size:var(--fs-3)}
.facts dd small{display:block;font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
.ab-r .facts{margin-top:var(--s5)}
.tt-h{margin-top:var(--blk);font-weight:var(--w-m);font-size:var(--fs-4);line-height:var(--lh-head)}
/* 章の上半分の背景：映画館の大スクリーンの前で講演する情景（/assets/img/congress-bg.webp・1456×816）。
   15周年トップの大会の章（C-top.html の .cg-bg）と同じ写真・同じ加工・同じ位置合わせ。写真の中の配置はそちらのコメント。
   スクリーンの下端（39%）を --y-cg-screen に合わせ、見出しと文の後ろは登壇者のスポットライトと客席の暗い所にする。
   下はタイムテーブルの見出しの手前で地の色に溶かす。
   写真は <img>（brightness＋#duo の2色調）。cinema.js が動けば同じ箱の <canvas> に同じ色で描き（.water）、スポットライトのもやを動かす */
.ab-hd{position:relative;isolation:isolate}
.ab-bg{position:absolute;inset:calc(var(--sec) * -1) 0 calc(var(--blk) * -1);z-index:-1;overflow:hidden;pointer-events:none;opacity:var(--op-cg);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--sec),#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 var(--sec),#000 55%,transparent 100%)}
.ab-bg>img,.ab-bg>canvas{display:block;position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:1456/816;
  transform:translateY(calc(var(--y-cg-screen) - 39%));  /* 39%＝写真の中のスクリーンの下端 */
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.ab-bg>img{max-width:none;object-fit:cover;filter:brightness(.72) url(#duo)}  /* max-width:none：スマホで幅 200% にするため（土台の img{max-width:100%} を外す） */
.ab-bg>canvas{visibility:hidden}
.ab-bg.water>canvas{visibility:visible}
.ab-bg.water>img{visibility:hidden}
@media (max-width:767px){
  /* スマホ：写真を幅の2倍にして中央（登壇者とスポットライト）を切り出す（トップと同じ） */
  .ab-bg>img,.ab-bg>canvas{left:-50%;width:200%}
}
.tt{margin-top:var(--s4);display:grid;gap:var(--s5)}
.tt-day{border-top:1px solid var(--gold);padding-top:var(--s4)}
.tt-day h4{display:flex;align-items:baseline;gap:var(--s3);margin:0;font-weight:var(--w-r)}
.tt-day h4 span+span{font-size:var(--fs-2);color:var(--fg-2)}
.tt-day ol{margin-top:var(--s3);display:grid}
.tt-day li{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);align-items:baseline}
.tt-day .t{font-size:var(--fs-2);color:var(--fg-2);white-space:nowrap}
.tt-day .t .n{font-size:var(--fs-4);color:var(--fg)}
.tt-day b{font-weight:var(--w-m);display:block}
.tt-day small{display:block;font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
.tt-day small a{color:var(--fg)}
@media (max-width:767px){
  .tt{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3)}
  .tt-day h4{flex-direction:column;gap:var(--s1)}
  .tt-day li{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .tt-day .t{white-space:normal}
}
@media (min-width:900px){
  .ab-h{grid-column:1/span 6}  /* 見出しを2行に（15周年トップの大会の章と同じ6列） */
  .ab-r{grid-column:7/-1}
  .tt{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}
}

/* =====================================================================
   02 特別講演：人物ポスター（写真を右端まで＋明朝の縦書きの名前）
   ===================================================================== */
.kn-ph{position:relative;isolation:isolate;margin-inline:calc(var(--gut) * -1);aspect-ratio:1;overflow:hidden;background:var(--bg-2)}
.kn-ph img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:42% 22%;filter:brightness(.8) url(#duo)}
.kn-ph::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(70% 60% at 42% 40%,transparent 30%,color-mix(in srgb,var(--bg-deep) 85%,transparent) 100%),
  linear-gradient(270deg,color-mix(in srgb,var(--bg-deep) 70%,transparent) 0%,transparent 34%),
  linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--bg-deep) 85%,transparent) 100%)}
/* 縦書きの名前（邦画のポスターの組み方） */
.kn-vname{position:absolute;top:var(--s5);right:var(--s4);writing-mode:vertical-rl;font-family:var(--mi);font-weight:var(--w-m);font-size:var(--fs-7);line-height:var(--lh-num);--ls:var(--ls-label);text-shadow:0 2px var(--s4) color-mix(in srgb,var(--bg-deep) 60%,transparent)}
.kn-vname small{font-size:var(--fs-4);--ls:var(--ls-text);margin-top:var(--s3)}
.kn-vname::before{content:"";position:absolute;top:0;bottom:0;right:calc(var(--s3) * -1);width:1px;background:linear-gradient(180deg,var(--gold),transparent)}
.kn-cap{position:absolute;left:var(--s4);bottom:var(--s3);font-size:var(--fs-2);color:var(--fg-2)}
.kn-name{font-weight:var(--w-m);font-size:var(--fs-4);line-height:var(--lh-head);margin-top:var(--s3)}
.kn-title{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.kn-h{margin-top:var(--s2);font-weight:var(--w-m);font-size:var(--fs-5);line-height:var(--lh-head)}
.kn-title .en{margin-top:var(--s2);font-family:var(--en);font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
/* 抄録：原文を本文として。1行は全角35字前後（PCは左の6列）、行間は本文の段、段落のあいだは1行弱。
   長い地の文なので、ここだけ和文を字の間でも折る（keep-all を外す）。両端そろえ */
.more{border-top:1px solid var(--line)}
.more:last-child{border-bottom:1px solid var(--line)}
.abs{margin-top:var(--s5)}
.more summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--btn);cursor:pointer;list-style:none;font-size:var(--fs-2);color:var(--fg-2)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);color:var(--gold)}
.more[open] summary::after{content:"−"}
.more .in{padding-bottom:var(--s4);display:grid;gap:var(--s3);font-size:var(--fs-2);line-height:var(--lh-body);color:var(--fg-2)}
.abs .in{gap:var(--s4);font-size:var(--fs-3);color:var(--fg)}
.abs .in p{word-break:normal;text-align:justify}
.car li{display:grid;grid-template-columns:3.5em minmax(0,1fr);gap:var(--s2)}
@media (min-width:900px){
  .kn-g{align-items:start}
  .kn-t{grid-column:1/span 6;grid-row:1}
  .kn-ph{grid-column:8/-1;grid-row:1;position:sticky;top:calc(var(--hd) + var(--s5));margin:0 calc((100vw - min(100vw, var(--max) + var(--gut) * 2)) / -2 - var(--gut)) 0 0;aspect-ratio:auto;height:min(var(--h-kn),calc(var(--h-vp,100svh) - var(--hd) - var(--s6)))}
  .kn-vname{top:var(--s6);right:var(--s7)}
  .kn-cap{left:var(--s5);bottom:var(--s4)}
}

/* =====================================================================
   03 理事講演（会長とファカルティメンターの顔写真を並べる。登壇者・演題は Coming soon）
   ===================================================================== */
.d1-tm{margin-top:var(--s2);display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s3);font-size:var(--fs-2);color:var(--fg-2)}
.d1-tm .n5{color:var(--fg)}
.d1-r .h2{margin-bottom:var(--s4)}
.d1-soon{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s2) var(--s4)}
/* 理事・ファカルティーの紹介へのリンク：スマホは最後の行の空き（2列分）の下端、PCは顔写真の下の右端 */
.d1-more{grid-column:span 2;display:flex;align-items:flex-end}
@media (max-width:767px){.d1-more .tl{font-size:var(--fs-2)}}  /* 2列分の幅に1行で収める */
/* 顔写真：15周年トップの理事・ファカルティーの章（.wall）と同じ並び・同じ加工（.face）。明るさは style の --b。
   スマホ：3列。会長は1行を横に使う → ファカルティメンター7名。PC：8列の1行（会長1列＋ファカルティメンター7列） */
.d1-wall{margin-top:var(--blk);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s2)}
.d1-grp,.d1-grp ul{display:contents}
.d1-grp-h{grid-column:1/-1;padding-top:var(--s2);border-top:1px solid var(--line);font-size:var(--fs-2);font-weight:var(--w-m);line-height:var(--lh-head)}
.pp figcaption{margin-top:var(--s2);line-height:var(--lh-head)}
.pp .nm{display:block;font-size:var(--fs-2);font-weight:var(--w-m);white-space:nowrap}
.pp .rl{display:block;margin-top:var(--s1);font-family:var(--en);font-weight:var(--w-r);font-size:var(--fs-1);line-height:var(--lh-head);--ls:var(--ls-label);text-transform:uppercase;color:var(--gold)}  /* 職種は英字（Doctor／Technician。2026-10-09 依頼者の指定） */
.pp .af{display:block;margin-top:2px;font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}  /* 所属（staff_info.md の役職欄から医院・ラボ名だけ） */
.pp-chair{grid-column:1/-1}
.pp-chair figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s3);align-items:end}
@media (min-width:900px){
  .d1{align-items:start}
  .d1-l{grid-column:1/span 4}
  .d1-r{grid-column:5/-1}
  .d1-wall{grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s3) var(--s1)}
  .d1-grp{display:grid;grid-template-columns:subgrid;grid-row:1;align-content:start;row-gap:var(--s3)}
  .d1-grp-chair{grid-column:1/2}
  .d1-grp-fac{grid-column:2/-1}
  .d1-grp-dir{grid-column:1/7;grid-row:2}  /* 理事6名は2段目の左6列。右の2列に紹介へのリンク */
  .d1-more{grid-column:7/-1;grid-row:2;justify-content:flex-end}
  .pp-chair{grid-column:auto}
  .pp-chair figure{display:block}
  .pp figcaption{padding-inline:var(--s1)}
}

/* =====================================================================
   04 記念懇親会 ナイトクルーズ（船の写真を大きく、ふちを紺へ溶かす＋乗船までの縦の時刻表）
   ===================================================================== */
.boat{position:relative;max-width:var(--w-boat);margin:0 auto;aspect-ratio:592/255;overflow:hidden}
.boat img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
/* 船の動き（ship.js）：canvas は写真と同じ位置。描けたら（.water）<img> と入れ替える。配置（cover・scale）はシェーダー側で同じにしている */
.boat canvas{position:absolute;inset:0;width:100%;height:100%;visibility:hidden}
.boat.water canvas{visibility:visible}
.boat.water img{visibility:hidden}
.boat::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--bg) 0%,transparent 14%,transparent 86%,var(--bg) 100%),
  linear-gradient(180deg,var(--bg) 0%,transparent 16%,transparent 64%,var(--bg) 100%)}
.cz-top{position:relative;margin-top:calc(var(--s6) * -1);align-items:end}
.cz-lead{color:var(--fg-2)}
.cz-body{margin-top:var(--blk);align-items:start}
.cz-facts .n5{color:var(--fg)}
/* お料理：英字をメニューの書き方で（Josefin の細字）。和文は小さく添える */
.menu-en{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-head);--ls:var(--ls-head)}
.menu-en span{white-space:nowrap}
.menu-en .amp{color:var(--fg-2)}
.cz-apply{display:flex;margin-top:var(--s3)}
.flow-h{font-size:var(--fs-2);color:var(--fg-2);margin-bottom:var(--s3)}
.flow li{position:relative;display:grid;grid-template-columns:var(--w-flow-t) minmax(0,1fr);gap:var(--s4);padding-bottom:var(--s4);align-items:baseline}
.flow li::before{content:"";position:absolute;left:calc(var(--w-flow-t) + var(--s2));top:var(--s3);width:var(--s2);height:var(--s2);border-radius:50%;background:var(--bg);border:1px solid var(--gold)}
.flow li::after{content:"";position:absolute;left:calc(var(--w-flow-t) + var(--s3) - 1px);top:calc(var(--s3) + var(--s2));bottom:0;width:1px;background:var(--line)}
.flow li:last-child::after{display:none}
.flow li.hl::before{background:var(--gold)}
.flow .t{text-align:right;font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-num);white-space:nowrap}
.flow .hl .t{font-size:var(--fs-7);color:var(--gold)}
.flow .x{padding-left:var(--s4)}
.flow .x b{display:block;font-weight:var(--w-m)}
.flow .x small{display:block;font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
@media (min-width:900px){
  .cz-h{grid-column:1/span 5}
  .cz-lead{grid-column:7/-1}
  .cz-facts{grid-column:1/span 6}
  .flow{grid-column:8/-1}
}
@media (max-width:767px){
  .boat{max-width:none}
  .boat::after{background:linear-gradient(180deg,var(--bg) 0%,transparent 12%,transparent 62%,var(--bg) 100%)}
  .cz-top{margin-top:calc(var(--s4) * -1)}
}

/* =====================================================================
   05 参加費（生成り＝チケットの面。切り取り線は1本だけ）
   ===================================================================== */
.paper{background:var(--paper);color:var(--ink)}
.paper .rh{border-color:var(--line-ink)}
.paper .rh-no{color:var(--gold-ink)}
.paper .rh-en,.paper .rh-jp,.paper .jl,.paper .mute,.paper .apply-note{color:var(--ink-2)}
.paper .btn-p{background:var(--gold-ink);color:var(--paper)}
.paper .btn-p:hover{background:var(--ink)}
.paper .tl{text-decoration-color:var(--line-ink)}
.fe-l .h2{margin-bottom:var(--s4)}
.ink-facts{display:grid}
.ink-facts>div{display:grid;grid-template-columns:4em minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line-ink)}
.ink-facts dt{font-size:var(--fs-2);color:var(--ink-2);line-height:var(--lh-body)}
/* 早割のカウントダウン（2026-10-10 生野先生：早割をもう少しアピール。日は大きく、時間・分・秒は中くらいの Josefin。単位は小さな和文） */
.eb{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--gold-ink)}
.eb .lb{color:var(--gold-ink)}
.eb-h{margin-top:var(--s2);font-weight:var(--w-m);font-size:var(--fs-4);line-height:var(--lh-head)}
.eb-cd{margin-top:var(--s2);display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s4);font-family:var(--en);font-weight:var(--w-l);--ls:var(--ls-num);font-variant-numeric:tabular-nums;line-height:var(--lh-num)}
.eb-cd .d{font-size:var(--fs-7);color:var(--ink)}
.eb-cd .t{display:flex;align-items:baseline;gap:0 var(--s3);font-size:var(--fs-5)}
.eb-cd .n2{display:inline-block;min-width:1.25em;text-align:right}
.eb-cd .u{font-family:var(--jp);font-weight:var(--w-r);font-size:var(--fs-2);color:var(--ink-2);margin-left:var(--s1)}
.fe-member{margin-top:var(--s4);padding:var(--s4) 0 0;border-top:1px solid var(--ink)}
.fe-member b{font-weight:var(--w-m);display:block;font-size:var(--fs-4)}
.fe-member .tl{margin-top:var(--s1)}
.tb{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tb th,.tb td{padding:var(--s3) 0;border-top:1px solid var(--line-ink);text-align:left;font-weight:var(--w-r);vertical-align:baseline}
.tb thead th{padding-top:0;border-top:0;font-size:var(--fs-2);color:var(--ink-2)}
.tb thead th+th{text-align:right}
.tb td{text-align:right;white-space:nowrap;padding-left:var(--s3)}
.tb .n5{font-size:var(--fs-5)}
.tb .n7{color:var(--ink)}
.tb .u{font-size:var(--fs-2);margin-left:var(--s1)}
.tb .party th,.tb .party td{border-top:1px solid var(--ink)}
.tb .free{font-size:var(--fs-3)}
.tb .reg{color:var(--ink-2)}
/* 記念懇親会の定員：英字の札（Limited 80）＋和文の小さな添え書き */
.tb .cap{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--s3);margin-top:var(--s1)}
.tb .cap-jp{font-size:var(--fs-2);color:var(--ink-2)}
.paper .en-tag{color:var(--ink)}
.paper .en-tag::before{background:var(--gold-ink)}
.fe-r .apply{margin-top:var(--s5)}
.perf{display:none}
@media (min-width:900px){
  .fe-l{grid-column:1/span 4}
  .fe-r{grid-column:6/-1}
  #fee{overflow:hidden}
  .perf{--w:min(100%, calc(var(--max) + var(--gut) * 2));display:block;position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--ink-2);
    left:calc((100% - var(--w)) / 2 + var(--gut) + (var(--w) - var(--gut) * 2 - var(--gap) * 11) / 12 * 4.5 + var(--gap) * 4)}
  .perf::before,.perf::after{content:"";position:absolute;left:calc(var(--s4) / -2);width:var(--s4);height:var(--s4);border-radius:50%;background:var(--bg)}
  .perf::before{top:calc(var(--s4) / -2)} .perf::after{bottom:calc(var(--s4) / -2)}
}
@media (max-width:767px){.tb .n7{font-size:var(--fs-6)}}

/* =====================================================================
   06 申込の流れ・キャンセル規定・よくある質問
   ===================================================================== */
.ap-h{font-weight:var(--w-m);font-size:var(--fs-4);line-height:var(--lh-head)}
.steps{margin-top:var(--s4);display:grid}
.steps li{display:grid;grid-template-columns:3em minmax(0,1fr);gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--line)}
.steps .n5{color:var(--gold)}
.steps b{display:block;font-weight:var(--w-m)}
.steps p{font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2);margin-top:var(--s1)}
.faq{margin-top:var(--s4);border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:2em minmax(0,1fr) auto;gap:var(--s2);align-items:baseline;padding:var(--s3) 0;min-height:var(--btn);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--en);color:var(--gold)}
.faq summary::after{content:"+";font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-num);color:var(--gold)}
.faq details[open] summary::after{content:"−"}
.faq .a{display:grid;grid-template-columns:2em minmax(0,1fr);gap:var(--s2);padding:0 0 var(--s4);font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
.faq .a::before{content:"A";font-family:var(--en);color:var(--fg-2)}
@media (min-width:900px){
  .ap-l{grid-column:1/span 5}
  .ap-r{grid-column:7/-1}
}

/* =====================================================================
   07 会場（背景に映画館の客席の写真をうっすら。神戸港の写真は最後の1か所だけ）
   章の背景：/assets/img/venue-bg.webp（1401×900。467×300 の元写真を3倍に拡大したもの。元は assets/photos/映画館の客席.png）。
   01 の章の映画館の情景と同じ2色調・暗め・うっすら＋粒子（拡大の粗さを隠す）。
   写真の中の配置（幅・高さに対する割合）：スクリーン 横12〜47%・縦32〜50%／客席 縦50%から下。
   スクリーンの下端（50%）を --y-vn-screen（柱の下・見出しの上）に合わせ、見出しと表は暗い客席の上に乗せる。上下は地の色に溶かす
   ===================================================================== */
#venue{isolation:isolate;overflow:hidden}
.vn-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:var(--op-vn);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--sec),#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 var(--sec),#000 55%,transparent 100%)}
.vn-bg::before{content:"";position:absolute;top:0;left:0;right:0;aspect-ratio:1401/900;
  background:url(/assets/img/venue-bg.webp) 50% 50%/cover no-repeat;
  transform:translateY(calc(var(--y-vn-screen) - 50%));filter:brightness(.72) url(#duo) blur(1px);  /* 50%＝写真の中のスクリーンの下端 */
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}  /* 写真の下端（客席）も溶かして、切れ目を出さない */
.vn-bg::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media (max-width:767px){
  /* スマホ：写真を幅の2倍にして中央を切り出す（01 の章と同じ） */
  .vn-bg::before{left:-50%;right:-50%}
}
.vn-l .jl{margin-top:var(--s3)}
.vn-r .ln{display:block}
.vn-r .tl{margin-top:var(--s1)}
@media (min-width:900px){
  .vn{align-items:start}
  .vn-l{grid-column:1/span 5}
  .vn-r{grid-column:7/-1}
}

/* =====================================================================
   08 大会長あいさつ（文は仮置き。顔写真は15周年トップと同じ2色調。明るさは style の --b）
   ===================================================================== */
.face{position:relative;aspect-ratio:4/5;overflow:hidden;background:radial-gradient(70% 52% at 50% 42%,var(--glow),transparent 70%),linear-gradient(180deg,var(--bg-2),var(--bg))}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(var(--b,1)) url(#duo);transform:scale(var(--fz,1.18));transform-origin:50% var(--fo,44%)}
/* スマホ：顔写真を1/3幅、名前を横に。PC：左に顔写真、右に文 */
.gr-fig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s3);align-items:end}
.gr-fig figcaption{font-weight:var(--w-m);font-size:var(--fs-4);line-height:var(--lh-head)}
.gr-fig figcaption small{display:block;font-weight:var(--w-r);font-size:var(--fs-2);color:var(--fg-2)}
.gr-r .h2{margin-bottom:var(--s5)}
/* 本文はゴシックのまま。1文ずつ行を立て、段落の間と最後の1行の前を少し空けて詩の行のように */
.quote{display:grid;gap:var(--s4);font-size:var(--fs-3);line-height:var(--lh-body)}
.quote .ln{display:block}
.quote .quote-end{margin-top:var(--s4);color:var(--fg)}
.quote p:not(.quote-end){color:var(--fg-2)}
.note{margin-top:var(--s5);font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
@media (min-width:900px){
  .gr{align-items:start}
  .gr-l{grid-column:1/span 3}
  .gr-r{grid-column:5/-1;padding-top:var(--s2)}
  .gr-fig{display:block}
  .gr-fig figcaption{margin-top:var(--s3)}
}

/* =====================================================================
   最終：開催までの日数（特大）＋大会の奥付
   ===================================================================== */
.fin{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-deep);padding:var(--s8) 0}
.fin .photo img{object-position:50% 60%;opacity:var(--op-fin)}
.fin::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg-deep) 55%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 80%,transparent) 100%)}
.fin .lb{color:var(--gold)}
.fin-top{display:grid;gap:var(--s5)}
.cd{margin-top:var(--s4)}
.cd .pre{display:block;font-size:var(--fs-4)}
.cd .num{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s3)}
.cd .g{margin-left:-.05em}
.cd .u{font-size:var(--fs-5)}
.fin-h{--ls:var(--ls-text)}
.cr{margin-top:var(--s6);display:grid;border-top:1px solid var(--gold)}
.cr>div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line);align-items:baseline}
.cr dt{font-size:var(--fs-2);color:var(--fg-2)}
.cr dd{font-size:var(--fs-3)}
.fin-cta{margin-top:var(--s6);display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s4) var(--s5)}
@media (min-width:900px){
  .fin-top{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:var(--s7)}
  .fin-h{padding-bottom:var(--s5)}
  .cr{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}  /* 6項目を3列×2行に */
  .cr>div{grid-template-columns:1fr;gap:var(--s1);padding:var(--s4) 0}
}
@media (max-width:767px){.fin-cta{flex-direction:column;align-items:stretch}.fin-cta .btns{width:100%}}

/* ---------- カウントダウンの時計（数字1桁ずつ固定幅。秒が変わっても横に揺れない。色は控えめ） ---------- */
[hidden]{display:none!important}
.clock{font-family:var(--en);font-weight:var(--w-l);font-variant-numeric:tabular-nums;--ls:var(--ls-num);white-space:nowrap}
.clock .dg{display:inline-block;width:.62em;text-align:center}
.clock .cl{display:inline-block;width:.32em;text-align:center}
.cd-clock{display:block;margin-top:var(--s3);font-size:var(--fs-5);line-height:var(--lh-num);color:var(--fg-2)}

/* ---------- フッター（大会の協賛はまだ「案」なので載せない） ---------- */
.ft{background:var(--bg-deep);border-top:1px solid var(--line);padding:var(--s6) 0 calc(var(--s8) + env(safe-area-inset-bottom,0px))}
.ft-brand img{width:var(--w-logo-ft);height:auto}
.ft-ph{margin-top:var(--s4);font-family:var(--mi);font-weight:var(--w-m);font-size:var(--fs-4);--ls:var(--ls-head)}
.ft-brand .small{margin-top:var(--s2);font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
.ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
.ft-nav a{display:flex;align-items:center;min-height:var(--btn-s);font-size:var(--fs-2);color:var(--fg-2);text-decoration:none}
.ft-nav a:hover{color:var(--fg)}
.ft-bt{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);font-size:var(--fs-2);color:var(--fg-2)}
.ft-bt a{display:inline-flex;align-items:center;min-height:var(--btn-s);text-decoration:none}
@media (min-width:900px){
  .ft{padding-bottom:var(--s6)}
  .ft-brand{grid-column:1/span 5}
  .ft-nav{grid-column:7/-1;grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- スマホの固定バー（ページ内の主ボタンが見えている間は隠す） ---------- */
.sticky{position:fixed;inset:auto 0 0;z-index:60;display:none;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom,0px)) var(--gut);background:color-mix(in srgb,var(--bg-deep) 94%,transparent);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .3s var(--ease)}
.sticky.on{transform:none}
.sticky .t{flex:1;min-width:0;line-height:var(--lh-head)}
.sticky .t b{display:block;font-family:var(--en);font-weight:var(--w-r);font-size:var(--fs-3);white-space:nowrap}
.sticky .t span{display:block;font-size:var(--fs-2);color:var(--fg-2)}
.sticky .btn{flex:none}
@media (max-width:899px){.sticky{display:flex}}


/* ---------- 演出（控えめ。日程・会場・ボタンは最初から表示） ---------- */
.js .rv{opacity:.08;transform:translateY(.05em);transition:opacity 1.2s ease,transform 1.2s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .cv .photo img,.js .cv .photo canvas{opacity:var(--op-hero);animation:none}
  .btn i,.lineup i{transition:none}
}