/* =====================================================================
   LSGP KOBE サイト　トップ（lsgp.jp/）。元：mock/v2/C-top.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);  /* 顔写真の背後の淡い光 */

  /* --- 書体（明朝は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;

  /* --- 文字の段：特大2＋7段。文になっているものは --fs-2（14px）以上 --- */
  --fs-g1:clamp(240px,26vw,400px); /* 特大：章の主役の数字（1画面に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（章と章の間は 2×--sec ＝ PC128／スマホ96） --- */
  --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:440px; --w-logo-ft:160px; --w-facts:320px; --w-wall:1440px; --w-horizon:960px;
  --w-tix:560px; --w-stub:148px;
  --h-poster:600px;
  /* 特別講演のポスター（大河先生の写真 970×1200）：写真の上を切る量と、顎の下端の位置（写真の高さに対する割合）。名前・演題は顎より下に置く */
  --po-top:6%; --po-chin:73%;
  --w-pg-ph:224px;     /* 記念プログラムの演者写真の幅（PC。4:5） */
  --op-ig:.62;         /* Instagramの仮タイルの写真の濃さ */
  --w-jtab:36px;       /* 入会への固定タブの幅（縦書き。本文の左右の余白 --gut に収まる幅にして、本文にかからない） */
  --ic:40px;          /* 扱う領域のマーク（線は1.5px。40px角で描いてあるので、大きさを変えると線の太さも変わる） */
  /* --- 夜景の明るさ（同じ加工で、明るさだけ場所ごと） --- */
  --op-hero:.62; --op-fin:.42;
  /* --- 大会の章の背景（映画館の大スクリーンと登壇者）：顔写真と同じ2色調・暗め・うっすら --- */
  --op-cg:.32;
  --y-cg-screen:160px;  /* 写真のスクリーンの下端を、章の上端からどこに置くか（柱の下・大会名の上） */

  /* --- 囲み・ボタン（主・副・テキストリンクの3種） --- */
  --btn:56px; --btn-s:44px; --radius:2px; --radius-ph:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
@media (max-width:767px){
  :root{
    --fs-g1:40vw; --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;
    --h-poster:460px; --y-cg-screen:48px; --w-jtab:24px;
  }
}

/* ---------- 土台 ---------- */
*,::before,::after{box-sizing:border-box;letter-spacing:var(--ls)}  /* 字間は em のまま各要素で計算する */
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)} .g2{font-size:var(--fs-g2)}
.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)}
.small{font-size:var(--fs-2);line-height:var(--lh-small)}
.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;gap:var(--s3);font-size:var(--fs-2);color:var(--fg-2)}
.when .n5{color: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{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 i{font-style:normal}
.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)}
.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}.btns .jl{text-align:center}}

/* ---------- 章の柱：章番号＋英字＋和文、下に罫線（番号は折らない） ---------- */
.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;min-height:var(--btn-s);opacity:0;pointer-events:none;transition:opacity .3s}
.hd.on .hd-logo{opacity:1;pointer-events:auto}
.hd-logo img{height:var(--s4);width:auto;max-width:none}
.hd-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
/* ナビの項目は章の英字の名前（Josefin。大文字にせず字間も控えめにし、項目の間を広く取って区切りを見やすく。2026-10-10 生野先生） */
.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-family:var(--en);font-size:var(--fs-2);--ls:var(--ls-head);color:var(--fg-2);text-decoration:none;white-space:nowrap}
.hd-nav a:hover{color:var(--fg)}
.hd-nav .pc{display:none}
/* 大会LPへの入口：ボタンではなく「大会名のマーク」。淡い金・Josefin の2行組（上に小さく LSGP 15th Anniversary、下に Congress）。
   細い金の枠と → で押せることを示す。スマホは「LSGP」を外して幅を詰める */
.hd-nav .hd-mark{flex:none;gap:var(--s3);margin-left:var(--s2);padding:var(--s1) var(--s3);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:var(--radius);color:var(--gold);transition:border-color .2s,color .2s}
.hd-nav .hd-mark:hover{color:var(--gold-hover);border-color:var(--gold)}
.hm{display:grid;justify-items:center;gap:var(--s1);font-family:var(--en);line-height:var(--lh-num);text-transform:uppercase;white-space:nowrap}
.hm-1{font-size:var(--fs-1);--ls:var(--ls-label);padding-left:var(--ls-label)}  /* 字送りの右の余りを左にも足して、2行の中心をそろえる */
.hm-2{font-weight:var(--w-l);font-size:var(--fs-3);--ls:.32em;padding-left:.32em}
.hd-mark i{font-style:normal;font-family:var(--en);transition:transform .3s var(--ease)}
.hd-mark:hover i{transform:translateX(var(--s1))}
@media (max-width:899px){.hm-lsgp{display:none}.hd-nav .hd-mark{gap:var(--s2);padding-inline:var(--s2) var(--s3)}}
@media (min-width:900px){
  .hd-logo img{height:var(--s5)}
  .hd-nav{gap:var(--s4)}  /* 項目の間は広め（区切りを見やすく） */
  .hd-nav .pc{display:flex}
}
/* 900〜1199px：ナビの項目と大会のマークが1行に収まるよう、項目の間を詰め、マークの「LSGP」を省く */
@media (min-width:900px) and (max-width:1199px){.hd-nav{gap:var(--s2)}.hd-nav a{padding-inline:var(--s1)}.hm-lsgp{display:none}}

/* ---------- 写真の処理：夜景は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画面目：ロゴ中央・キャッチ・大会への入口
   高さは --h-vp（読み込んだときの画面の高さ。index.html の <head> のスクリプトが入れる）。スクロールでアプリ内ブラウザのツールバーが縮んでも伸び縮みさせない
   ===================================================================== */
.hero{position:relative;min-height:var(--h-vp,100svh);display:grid;place-items:center;padding:calc(var(--hd) + var(--s4)) var(--gut) var(--s7);isolation:isolate;overflow:hidden;background:var(--bg-deep)}
.hero .photo img{object-position:56% 100%;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}
.hero .photo canvas{opacity:var(--op-hero)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(56% 46% at 50% 36%,color-mix(in srgb,var(--bg-deep) 88%,transparent),transparent 100%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 80%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 30%,transparent) 55%,color-mix(in srgb,var(--bg-deep) 70%,transparent) 100%)}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.hero h1{display:flex;flex-direction:column;align-items:center;gap:var(--s4);font-weight:var(--w-r)}
.hero-logo{width:min(64vw,var(--w-logo));height:auto}
.hero-15{font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-num);--ls:var(--ls-label);text-transform:uppercase;padding-left:var(--ls-label)}
.hero-catch{margin-top:var(--s5);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"}
.hero-catch .lat{font-weight:var(--w-r)}
.horizon{display:block;width:min(100%,var(--w-horizon));height:1px;margin-top:var(--s6);background:linear-gradient(90deg,transparent,var(--gold) 26%,var(--gold) 74%,transparent);transform-origin:50% 50%}
.hero .tix{margin-top:var(--s5)}
.dw{white-space:nowrap;font-family:var(--en);font-size:var(--fs-1);--ls:var(--ls-label);text-transform:uppercase;color:var(--fg-2)}
.hero-foot{position:absolute;left:0;right:0;bottom:var(--s4);text-align:center;color:var(--fg-2)}
@media (min-width:768px){
  .hero-foot{left:var(--gut);right:auto;text-align:left}
}
@media (max-width:767px){
  .hero{place-items:start center;padding-top:calc(var(--hd) + var(--s6))}
  .hero .photo img{object-position:62% 100%}
}

/* ---------- 大会への入口：チケット（券面＋金の半券。リンク先は大会LP。Peatixへ直接は飛ばさない） ----------
   PC：右に半券（--stub）。「詳細・チケット →」を1行。スマホ（599px以下）：半券を券面の下に回す */
.tix{--stub:var(--w-stub);--nr:var(--s2);display:grid;grid-template-columns:minmax(0,1fr) var(--stub);width:100%;max-width:var(--w-tix);text-decoration:none;color:var(--fg);text-align:left;
  -webkit-mask:radial-gradient(circle var(--nr) at calc(100% - var(--stub)) 0,#0000 calc(var(--nr) - .5px),#000 var(--nr)) top/100% 51% no-repeat,radial-gradient(circle var(--nr) at calc(100% - var(--stub)) 100%,#0000 calc(var(--nr) - .5px),#000 var(--nr)) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--nr) at calc(100% - var(--stub)) 0,#0000 calc(var(--nr) - .5px),#000 var(--nr)) top/100% 51% no-repeat,radial-gradient(circle var(--nr) at calc(100% - var(--stub)) 100%,#0000 calc(var(--nr) - .5px),#000 var(--nr)) bottom/100% 51% no-repeat}
.tix-body{display:grid;gap:var(--s1);padding:var(--s3) var(--s4);border:1px solid var(--line);border-right:0;background:color-mix(in srgb,var(--bg-deep) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* 券面の一番上：和文の大会名（生成り・はっきり）＋英字を小さく添える。幅があれば横、なければ下に回る */
.tix-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s3);margin-bottom:var(--s1)}
.tix-jp{font-family:var(--jp);font-weight:var(--w-m);font-size:var(--fs-4);line-height:var(--lh-head);--ls:var(--ls-head);color:var(--fg)}
.tix-en{font-family:var(--en);font-size:var(--fs-1);line-height:var(--lh-head);--ls:var(--ls-label);text-transform:uppercase;color:var(--fg-2)}
.tix-d{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s2);font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-head);white-space:nowrap}
.tix-v{font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
.tix-stub{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:0 var(--s2);background:var(--gold);color:var(--bg);font-weight:var(--w-m);font-size:var(--fs-3);line-height:var(--lh-num);--ls:var(--ls-num);white-space:nowrap;transition:background-color .2s}
.tix-stub::before{content:"";position:absolute;left:0;top:var(--s3);bottom:var(--s3);border-left:1px dashed color-mix(in srgb,var(--bg) 55%,transparent)}
.tix-stub i{font-style:normal;font-family:var(--en);transition:transform .3s var(--ease)}
.tix:hover .tix-stub{background:var(--gold-hover)}
.tix:hover .tix-stub i{transform:translateX(var(--s1))}
.tix-wide{max-width:none}
.tix-wide .tix-body{padding:var(--s4) var(--s5)}
@media (max-width:599px){
  .tix{grid-template-columns:minmax(0,1fr);grid-template-rows:auto var(--btn);
    -webkit-mask:radial-gradient(circle var(--nr) at 0 calc(100% - var(--btn)),#0000 calc(var(--nr) - .5px),#000 var(--nr)) left/51% 100% no-repeat,radial-gradient(circle var(--nr) at 100% calc(100% - var(--btn)),#0000 calc(var(--nr) - .5px),#000 var(--nr)) right/51% 100% no-repeat;
            mask:radial-gradient(circle var(--nr) at 0 calc(100% - var(--btn)),#0000 calc(var(--nr) - .5px),#000 var(--nr)) left/51% 100% no-repeat,radial-gradient(circle var(--nr) at 100% calc(100% - var(--btn)),#0000 calc(var(--nr) - .5px),#000 var(--nr)) right/51% 100% no-repeat}
  .tix-body{border-right:1px solid var(--line);border-bottom:0;padding:var(--s3)}
  .tix-wide .tix-body{padding:var(--s3)}
  .tix-stub::before{left:var(--s3);right:var(--s3);top:0;bottom:auto;border-left:0;border-top:1px dashed color-mix(in srgb,var(--bg) 55%,transparent)}
}
.tix-note{margin-top:var(--s3)}
.js .horizon{transform:scaleX(0);animation:grow 1.6s var(--ease) .3s forwards}
.js .hero .photo img,.js .hero .photo canvas{opacity:0;animation:light 2.4s ease .1s forwards}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes light{to{opacity:var(--op-hero)}}

/* =====================================================================
   01 大会（2画面目で大きく）：巨大な日付＋表 → 特別講演のポスター＋理事講演＋船
   ===================================================================== */
/* 章の上半分の背景：映画館の大スクリーンの前で講演する情景（/assets/img/congress-bg.webp・1456×816）。
   CSS の背景画像なので、ファイルが無いあいだは何も出ない。顔写真と同じ2色調・暗め・うっすら敷き、上下を地の色に溶かす。
   写真の中の配置（幅・高さに対する割合）：スクリーン 横23〜77%・縦4〜39%／登壇者 横47%・縦42〜55%／客席 縦45%から下。
   明るいスクリーンを文字の真後ろに置かない：スクリーンの下端（39%）を --y-cg-screen（柱の下・大会名の上の空いた所）に合わせる。
   大会名・日付・表の後ろは、登壇者のスポットライトと客席の暗い所になる */
.cg-hd{position:relative;isolation:isolate}
.cg-bg{position:absolute;inset:calc(var(--sec) * -1) 0 0;z-index:-1;overflow:hidden;pointer-events:none;opacity:var(--op-cg);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--sec),#000 calc(var(--y-cg-screen) + var(--s8)),transparent calc(var(--y-cg-screen) + var(--s8) * 3.5));
          mask-image:linear-gradient(180deg,transparent 0,#000 var(--sec),#000 calc(var(--y-cg-screen) + var(--s8)),transparent calc(var(--y-cg-screen) + var(--s8) * 3.5))}
.cg-bg::before{content:"";position:absolute;top:0;left:0;right:0;aspect-ratio:1456/816;
  background:url(/assets/img/congress-bg.webp) 50% 50%/cover no-repeat;
  transform:translateY(calc(var(--y-cg-screen) - 39%));filter:brightness(.72) url(#duo);  /* 39%＝写真の中のスクリーンの下端 */
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}  /* 写真の下端（客席）も溶かして、切れ目を出さない */
@media (max-width:767px){
  /* スマホ：写真を幅の2倍にして中央（登壇者とスポットライト）を切り出す。スクリーンは柱より上に出て、ほぼ見えない */
  .cg-bg::before{left:-50%;right:-50%}
}
.cg-name{font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-head);--ls:var(--ls-head)}
.cg-spread{margin-top:var(--s5);display:grid;gap:var(--s5)}
.cg-date{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--fs-g2)}
.cg-date .d{display:flex;flex-direction:column;gap:var(--s2)}
.cg-date .dw{margin:0;white-space:nowrap}
@media (min-width:768px){.cg-date .d{flex-direction:row;align-items:flex-start}.cg-date .dw{padding-top:var(--s2)}}
.dash{flex:none;width:.28em;height:1px;background:var(--fg-2);margin-top:.42em}
.facts{display:grid;align-content:end}
.facts>div{display:grid;grid-template-columns:4em 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)}
.cg-intro{margin-top:var(--blk);align-items:end}
@media (max-width:767px){.facts .pc-only{display:none}}
.cg-lead{color:var(--fg-2)}
.cg-lead b{font-weight:var(--w-r);color:var(--fg)}
/* 特別講演のポスター（写真が主役）＋理事講演＋船 */
.cg-grid{margin-top:var(--s6);display:grid;gap:var(--s5)}
/* 写真は幅いっぱい・上寄せで敷き、上の余白（--po-top）だけ切る。::before の高さ＝写真の上端から顎の下端（--po-chin）まで。
   名前・演題はその下に置くので、幅が変わっても顔と文字が重ならない（padding の % は幅基準。1200/970 は写真の縦横比） */
.poster{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--h-poster);margin-inline:calc(var(--gut) * -1);background:var(--bg-deep);text-decoration:none}
.poster::before{content:"";flex:none;padding-top:calc(1200 / 970 * (var(--po-chin) - var(--po-top)))}
.poster img{position:absolute;top:0;left:0;z-index:-2;width:100%;height:auto;aspect-ratio:970/1200;object-fit:cover;filter:brightness(.84) url(#duo);transform:translateY(calc(var(--po-top) * -1));transition:transform 1.2s var(--ease);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(var(--po-chin) - 8%),transparent calc(var(--po-chin) + 18%));mask-image:linear-gradient(180deg,#000 calc(var(--po-chin) - 8%),transparent calc(var(--po-chin) + 18%))}
.poster:hover img{transform:translateY(calc(var(--po-top) * -1)) scale(1.03)}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 55% at 50% 34%,transparent 35%,color-mix(in srgb,var(--bg-deep) 70%,transparent) 100%)}
.poster-in{width:100%;padding:var(--s5) var(--gut);background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--bg-deep) 72%,transparent) var(--s6),var(--bg-deep) 100%)}
.poster-name{margin-top:var(--s3);font-family:var(--mi);font-weight:var(--w-m);font-size:var(--fs-7);line-height:var(--lh-num);--ls:var(--ls-head)}
.poster-name small{font-size:var(--fs-4);margin-left:var(--s2);--ls:var(--ls-text)}
.poster-ttl{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--gold);font-weight:var(--w-m);line-height:var(--lh-head)}
.cg-item{display:grid;gap:var(--s2);align-content:start;padding-top:var(--s4);border-top:1px solid var(--line)}
.cg-item .h3~p{color:var(--fg-2)}
/* 理事講演：会長・ファカルティメンター7名・理事6名の14人の顔を小さく7人ずつ2段に（理事・ファカルティーの章と同じ切り抜き・明るさ）。スマホも7人ずつ */
.cg-faces{margin-top:var(--s2);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s1)}

/* 船の写真は文の下（理事講演の顔写真と同じ並び）。四辺を羽のようにぼかして地の紺へ溶かし、四角い切れ目を出さない（2026-10-10 生野先生の指摘で、モックの四角から変更）。
   ぼかしは滑らかな S 字（0→.16→.5→.84→1）で、左 18%・右 12%（船の舳先を暗くしない）・上下 20%。横と縦のマスクを掛け合わせるので、角はさらに柔らかく落ちる。
   ぼけた分だけ見える幅が痩せるので、文の幅より少し外へ出す（PC は左右に --gap、スマホは画面の端まで） */
.ship{position:relative;margin-top:var(--s3);margin-inline:calc(var(--gap) * -1)}
.ship img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.16) 4.5%,rgba(0,0,0,.5) 9%,rgba(0,0,0,.84) 13.5%,#000 18%,#000 88%,rgba(0,0,0,.84) 91%,rgba(0,0,0,.5) 94%,rgba(0,0,0,.16) 97%,transparent 100%),
                     linear-gradient(180deg,transparent 0,rgba(0,0,0,.16) 5%,rgba(0,0,0,.5) 10%,rgba(0,0,0,.84) 15%,#000 20%,#000 78%,rgba(0,0,0,.84) 83.5%,rgba(0,0,0,.5) 89%,rgba(0,0,0,.16) 94.5%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.16) 4.5%,rgba(0,0,0,.5) 9%,rgba(0,0,0,.84) 13.5%,#000 18%,#000 88%,rgba(0,0,0,.84) 91%,rgba(0,0,0,.5) 94%,rgba(0,0,0,.16) 97%,transparent 100%),
                     linear-gradient(180deg,transparent 0,rgba(0,0,0,.16) 5%,rgba(0,0,0,.5) 10%,rgba(0,0,0,.84) 15%,#000 20%,#000 78%,rgba(0,0,0,.84) 83.5%,rgba(0,0,0,.5) 89%,rgba(0,0,0,.16) 94.5%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}  /* 2枚のマスクの重なった所だけ見せる（古い WebKit は source-in、標準は intersect） */
@media (max-width:767px){.ship{margin-inline:calc(var(--gut) * -1)}}
.cg-cta{margin-top:var(--s6);display:grid;justify-items:center}
.cg-cta .tix-note{text-align:center}
@media (min-width:900px){.cg-cta .tix{width:calc((100% - var(--gap) * 11) / 12 * 8 + var(--gap) * 7)}}
@media (min-width:900px){
  .cg-spread{grid-template-columns:minmax(0,1fr) var(--w-facts);align-items:end;gap:var(--s6)}
  .cg-h{grid-column:1/span 6}
  .cg-lead{grid-column:7/-1}
  .cg-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s5)}
  .poster{grid-column:1/span 6;grid-row:1/span 2;margin:0}
  .poster-in{padding:var(--s6)}
  .cg-day1{grid-column:8/-1;grid-row:1}
  .cg-night{grid-column:8/-1;grid-row:2}
}

/* =====================================================================
   02 LSGPとは（理念「Inputを確実にOutputする。」を章の主役に。Input／Output は Josefin、和文は明朝）
   ===================================================================== */
.motto{display:grid;gap:var(--s2);font-family:var(--mi);font-weight:var(--w-m);font-size:var(--fs-6);line-height:var(--lh-num);--ls:var(--ls-head);font-feature-settings:"palt"}
.motto-l{display:flex;align-items:baseline;white-space:nowrap}
.motto .lat{font-weight:var(--w-l);font-size:var(--fs-7);line-height:var(--lh-g);--ls:var(--ls-num);margin-right:.08em}
.motto-l+.motto-l{padding-left:1.6em}  /* 2行目を少し右へずらし、Input→Output の流れを見せる */
.ab-p>p+p{margin-top:var(--s3)}
.ac{margin-top:var(--blk);display:grid}
.ac>div{display:grid;gap:var(--s2);padding:var(--s4) 0;border-top:1px solid var(--line)}
.ac dt{font-weight:var(--w-m);font-size:var(--fs-4);line-height:var(--lh-head)}
.ac dd{color:var(--fg-2)}
/* 扱う領域：9つ。マーク（線画・金・--ic 角）＋和文。スマホ3列×3段、PCは横1列に9つ */
.dm{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);display:grid;gap:var(--s4)}
.dm-h{display:grid;gap:var(--s1)}
.dm-h .lb{color:var(--gold)}
.dm-t{font-size:var(--fs-4);font-weight:var(--w-m);line-height:var(--lh-head)}
.dm-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s3)}
.dm-list li{display:grid;justify-items:center;align-content:start;gap:var(--s2);text-align:center;font-size:var(--fs-2);line-height:var(--lh-head)}
.ic{width:var(--ic);height:var(--ic);color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
@media (min-width:900px){
  .dm-list{grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--s4) var(--s2)}
  .dm-list li{font-size:var(--fs-3)}
}
@media (min-width:900px){
  .ab-spread{align-items:end}
  .ab-h{grid-column:1/span 5}
  .ab-p{grid-column:7/-1}
  .ac{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
  .ac>div{padding-right:var(--s4);align-content:start}
}

/* =====================================================================
   03 2027年度 記念プログラム
   ===================================================================== */
.pg-head .lead{color:var(--fg-2)}
/* 一覧は写真が主役：スマホは 日付 → 写真（2列の4:5）→ 本文（写真が1枚の行は、写真の右に日付）。PCは 日付｜本文｜写真（1枚 --w-pg-ph・左端をそろえる） */
.pg{margin-top:var(--blk);display:grid}
.pg>li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--line)}
.pg .dt{display:flex;align-items:baseline;gap:var(--s2) var(--s3);flex-wrap:wrap}
.pg .kind{font-size:var(--fs-2);color:var(--fg-2)}
.pg .who{font-size:var(--fs-4);font-weight:var(--w-m);line-height:var(--lh-head)}
.pg .ttl{margin-top:var(--s2);color:var(--fg-2)}
.pg .fee{margin-top:var(--s2);font-size:var(--fs-2);color:var(--fg-2)}
/* 受付の予告：金の細線＋Josefin の小さな大文字（和文は添えない） */
.soon{margin-top:var(--s3);display:flex;align-items:center}
.soon-en{display:inline-flex;align-items:center;gap:var(--s3);font-family:var(--en);font-size:var(--fs-1);line-height:var(--lh-head);--ls:var(--ls-label);text-transform:uppercase;color:var(--fg);white-space:nowrap}
.soon-en::before{content:"";width:var(--s5);height:1px;background:var(--gold)}
.thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,var(--w-pg-ph)));gap:var(--s2);align-items:end}
@media (max-width:899px){
  .pg>li:has(.thumbs>.thumb:only-child){grid-template-columns:minmax(0,min(var(--w-pg-ph),calc(50% - var(--s1)))) minmax(0,1fr);column-gap:var(--s2)}
  .pg>li:has(.thumbs>.thumb:only-child) .dt{grid-column:2;grid-row:1;flex-direction:column;align-self:end;gap:var(--s2)}
  .pg>li:has(.thumbs>.thumb:only-child) .thumbs{grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr)}
  .pg>li:has(.thumbs>.thumb:only-child) .body{grid-column:1/-1}
}
.thumb{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 62% at 50% 40%,transparent 45%,color-mix(in srgb,var(--bg-deep) 62%,transparent) 100%)}  /* チラシから切った写真の背景の白い図形を、四隅だけ沈める */
.thumb img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,40%);transform:scale(var(--z,1.3));transform-origin:var(--fx,50%) var(--fy,40%);filter:url(#duo)}
/* 記念大会の行：大河先生の写真の横に、会長＋ファカルティメンター7名を小さく4人×2段 */
.pg-fac{display:grid;gap:var(--s2);align-content:end}
.pg-faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1)}
.pg>li.cg{border-top:1px solid var(--gold)}
.pg>li.cg .n7{color:var(--gold)}
.pg>li.cg .who{font-size:var(--fs-5)}
.sched{margin-top:var(--blk);border-top:1px solid var(--line)}
.sched summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--btn);cursor:pointer;list-style:none;font-weight:var(--w-m)}
.sched summary::-webkit-details-marker{display:none}
.sched summary::after{content:"+";font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);color:var(--gold)}
.sched[open] summary::after{content:"−"}
.months{display:grid;padding-bottom:var(--s3)}
.months li{display:grid;grid-template-columns:3em minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);align-items:baseline}
.months .mn{color:var(--fg-2)}
.months .ev{display:grid;gap:var(--s1);font-size:var(--fs-2);line-height:var(--lh-small)}
.months .ev>span{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:var(--s2)}
.months .ev .n{color:var(--fg-2)}
.months li.cg .mn{color:var(--gold)}
.months li.cg a{text-decoration-color:var(--gold)}
@media (min-width:900px){
  .pg-head .h2{grid-column:1/span 6}
  .pg-head .lead{grid-column:8/-1;align-self:end}
  .pg>li{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .pg .dt{grid-column:1/span 3;grid-row:1;flex-direction:column;gap:var(--s2);align-self:start}
  .pg .body{grid-column:4/span 4;grid-row:1}
  .pg .thumbs{grid-column:8/-1;grid-row:1;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,var(--w-pg-ph));justify-content:start}
  .months{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:var(--s7)}
  .months li{grid-template-columns:4em minmax(0,1fr)}
}

/* ---------- 顔写真（切り抜きPNG。2色調で濃紺の面に置く。明るさは style の --b で1人ずつそろえる）
   顔の大きさ・位置がずれる写真だけ、style の --fz（拡大率）と --fo（拡大の中心の高さ）で合わせる ---------- */
/* 背景を切り抜いた演者写真（Canva で切り抜き、mock/v2/review/frame.swift で理事の顔と同じ 800x1000 の枠にそろえたもの）。理事の顔と同じ地と加工 */
.thumb.cut{background:radial-gradient(70% 52% at 50% 42%,var(--glow),transparent 70%),linear-gradient(180deg,var(--bg-2),var(--bg))}
.thumb.cut::after{display:none}
.thumb.cut img{object-fit:cover;object-position:50% 0;transform:scale(var(--fz,1.18));transform-origin:50% var(--fo,44%);filter:brightness(var(--b,1)) url(#duo)}
.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%)}

/* =====================================================================
   04 理事・ファカルティー（顔が主役。人数は書かない）
   ===================================================================== */
@media (min-width:900px){.pp-head .h2{grid-column:1/-1}}
.wall{margin-top:var(--blk);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s2);padding-inline:var(--gut);max-width:var(--w-wall);margin-inline:auto}
.grp,.grp ul{display:contents}
.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-3);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-side{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s1);grid-column:span 2;padding-left:var(--s2)}
.pp-side p{font-size:var(--fs-2);line-height:var(--lh-small);color:var(--fg-2)}
/* スマホ：3列。会長は1行を横に使う → ファカルティメンター7名（最後の行の空きに入会への案内）→ 理事 */
.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}
.pp-chair .nm{font-size:var(--fs-4)}
.grp-chair .grp-h{order:1} .grp-chair li{order:2}
.grp-fac .grp-h{order:3} .grp-fac li{order:4} .pp-side{order:5}
.grp-dir .grp-h{order:6} .grp-dir li{order:7}
@media (min-width:900px){
  .wall{grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s5) var(--s1)}
  .grp{display:grid;grid-template-columns:subgrid;align-content:start;row-gap:var(--s3)}
  .grp>*,.pp-side{order:0}
  .grp-chair{grid-column:1/2;grid-row:1}
  .grp-fac{grid-column:2/9;grid-row:1}
  .grp-dir{grid-column:1/7;grid-row:2}
  .pp-side{grid-column:7/9;grid-row:2;justify-content:space-between;padding:var(--s2) 0 var(--s2) var(--s4);border-top:1px solid var(--line)}
  .pp-chair{grid-column:auto}
  .pp-chair figure{display:block}
  .pp-chair .nm{font-size:var(--fs-3)}
  .pp figcaption{padding-inline:var(--s1)}
}

/* =====================================================================
   05 入会のご案内（ここだけ生成り）
   ===================================================================== */
.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{color:var(--ink-2)}
.paper .btn-p{background:var(--gold-ink);color:var(--paper)}
.paper .btn-o{border-color:var(--ink-2);color:var(--ink)}
.paper .btn-o:hover{border-color:var(--ink)}
.paper .tl{text-decoration-color:var(--line-ink)}
.jn-l .lead{margin-top:var(--s4)}
.ben{margin-top:var(--s5);display:grid;border-bottom:1px solid var(--line-ink)}
.ben li{display:grid;grid-template-columns:var(--s7) minmax(0,1fr);gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--line-ink);align-items:baseline}
.ben .n5{color:var(--gold-ink)}
.ben b{display:block;font-weight:var(--w-m);font-size:var(--fs-4);line-height:var(--lh-head)}
.ben p{margin-top:var(--s1);color:var(--ink-2)}
.tb{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tb caption{text-align:left;padding-bottom:var(--s3);font-weight:var(--w-m);caption-side:top}
.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:last-child{text-align:right}
.tb td{text-align:right;white-space:nowrap}
.tb .u{font-size:var(--fs-2);margin-left:var(--s1)}
.jn-r .btns{margin-top:var(--s5)}
.jn-obs{margin-top:var(--s4)}
@media (min-width:900px){
  .jn{align-items:start}
  .jn-l{grid-column:1/span 6}
  .jn-r{grid-column:8/-1;padding-top:var(--s2)}
}

/* =====================================================================
   06 15年の歩み（スクリーン型。2026-10-09 生野先生の決定）
   柱の下に、LSGP紹介動画を映画のスクリーンのような横長の枠（元の動画の比率 1280:552）で、色・ぼかしそのまま・音なしで流す。
   その下に、左に「15」と「2012 — 2027」、右に年表3点（2012 発足／2022 10周年記念大会／2027 15周年記念大会）。見出しの文は置かない
   動画は assets/video の LSGP紹介動画を、黒帯を切って軽くした /assets/video/lsgp-movie.mp4（スマホは幅720の lsgp-movie-sp.mp4）。動きを減らす設定の人には止めた1枚（poster）だけ
   ===================================================================== */
.yr-screen{margin-top:var(--s6);aspect-ratio:1280/552;overflow:hidden;background:#000;box-shadow:0 40px 120px -60px rgba(214,194,142,.35)}
.yr-screen video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.yr-screen{margin-inline:calc(var(--gut) * -1)}}  /* スマホは画面の端まで広げる */
.yr-foot{padding-top:var(--s6);display:grid;gap:var(--s5)}
.yr-num .g{margin-left:-.05em}
.yr-num .g small{font-size:.3em;line-height:1;vertical-align:top;margin-left:.02em;--ls:.02em}  /* 「15」だけでは分からないので「15th」に（2026-10-10 生野先生） */
.yr-span{margin-top:var(--s2);color:var(--fg-2)}
.ms{display:grid;align-content:end}
.ms li{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:var(--s3);align-items:baseline;padding:var(--s2) 0;border-top:1px solid var(--line)}
.ms .n5{color:var(--fg-2)}
.ms p{color:var(--fg-2)}
.ms li:last-child .n5,.ms li:last-child p{color:var(--gold)}
@media (min-width:900px){
  .yr-foot{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
  .yr-num{grid-column:1/span 6}
  .ms{grid-column:8/-1}
}

/* =====================================================================
   07 Instagram（@lsgpkobe の投稿。埋め込みの方法が決まるまでは、ページ内の写真を2色調で薄くした固定のタイル。押すと Instagram へ）
   正方形のタイル。スマホ2列×2段（4枚）、600px〜は3列×2段、PCは6枚を1列
   ===================================================================== */
.ig-follow{color:inherit;text-decoration:none}  /* 見出し＝フォローへのリンク。矢印は本文の .tl と同じ →。最後の語と矢印は離れない（.nb） */
.ig-follow .nb{white-space:nowrap}
.ig-follow i{display:inline-block;margin-left:.45em;font-style:normal;font-weight:var(--w-l);font-size:.78em;animation:ig-nudge 2s var(--ease) infinite}  /* 矢印は乗せなくてもずっと右を指し続ける（2026-10-10 生野先生） */
@keyframes ig-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(.32em)}}
.ig-follow:hover .lat{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--line)}
.ig-r{display:grid;justify-items:start;gap:var(--s1)}
.ig-id{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--btn-s);font-family:var(--en);font-weight:var(--w-l);font-size:var(--fs-5);line-height:var(--lh-num);--ls:var(--ls-num);text-decoration:none}
.ig-id .ic{width:var(--s4);height:var(--s4)}   /* 24px角で描いたマーク（線1.5px） */
.ig-grid{margin-top:var(--blk);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1);text-decoration:none}
.ig-tile{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-2)}
.ig-tile img{width:100%;height:100%;object-fit:cover;filter:url(#duo);opacity:var(--op-ig);transition:opacity .4s,transform 1.2s var(--ease)}
.ig-tile:hover img{opacity:1;transform:scale(1.03)}
.ig-tile.plain img{object-fit:contain;padding:22%;filter:none;opacity:.9}
.ig-tile:nth-child(n+5){display:none}
.ig-embed{margin-top:var(--blk)}  /* 連携サービスの埋め込み（config.js の instagramEmbed）が入るときは、固定タイルの代わりにここに出る */
@media (min-width:600px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ig-tile:nth-child(n+5){display:block}}
@media (min-width:900px){
  .ig-head{align-items:end}
  .ig-head .h2{grid-column:1/span 7}
  .ig-r{grid-column:9/-1;justify-items:end;padding-bottom:var(--s1)}
  .ig-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* =====================================================================
   最終：開催までの日数（特大）＋大会への主ボタン（奥付は大会LPだけ）
   ===================================================================== */
.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 .h2{--ls:var(--ls-text)}
.fin-sub{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--gold);color:var(--fg-2)}
.fin-cta{margin-top:var(--s6);display:grid;gap:var(--s4);justify-items:start}
@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)}
}

/* ---------- カウントダウンの時計（数字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);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-sp{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--fs-2);color:var(--fg-2)}
.ft-sp b{font-weight:var(--w-r);width:100%}
.ft-sp span{white-space:nowrap}
.ft-bt{margin-top:var(--s3);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))}
  .ft-sp b{width:auto}
}

/* ---------- スマホの固定バー（ページ内の主ボタンが見えている間は隠す） ---------- */
.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;gap:var(--s2);padding-inline:var(--s3);--ls:var(--ls-text)}
@media (max-width:374px){.sticky{gap:var(--s2)}}
.sticky .t span{white-space:nowrap}
@media (max-width:899px){.sticky{display:flex}}

/* ---------- 入会への小さな固定タブ（生成り＝入会の色。入会のご案内の章が見えている間は隠す。閉じるボタンは付けない） ----------
   PC・スマホとも画面の右端・縦の中央に縦書きのタブ。幅は左右の余白（--gut）以内なので本文にかからない。
   下端の固定バーとも離れる */
.jtab{position:fixed;z-index:55;right:0;top:50%;display:flex;align-items:center;justify-content:center;width:var(--w-jtab);padding:var(--s3) 0;writing-mode:vertical-rl;background:var(--paper);color:var(--ink);border-radius:var(--radius) 0 0 var(--radius);box-shadow:0 var(--s1) var(--s4) color-mix(in srgb,var(--bg-deep) 55%,transparent);font-size:var(--fs-2);font-weight:var(--w-m);line-height:var(--lh-num);--ls:var(--ls-head);text-decoration:none;white-space:nowrap;transform:translateY(-50%);transition:transform .35s var(--ease),color .2s}
.jtab:hover{color:var(--gold-ink)}
.jtab.off{transform:translate(calc(100% + var(--s5)),-50%)}  /* 影ごと画面の外へ */


/* ---------- 演出（控えめ。日程・会場・ボタンは最初から表示） ---------- */
.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 .horizon{transform:none;animation:none}
  .js .hero .photo img,.js .hero .photo canvas{opacity:var(--op-hero);animation:none}
  .btn i,.poster img,.jtab{transition:none}
  .ig-follow i{animation:none}
}