/* JPSA金沢支部 — 「硝子を通る光」
   支部長・室野智生さんは室野硝子（1950年創業・金沢）の代表。上質の追求という光が、支部という硝子を通って
   四つの部会の色に分かれ、会員一人ひとりに届く。その絵をそのまま画面の骨組みにする。
   色: JPSA公式の紺 #012060 と金 #DFBE3D（キックオフスライドから実測）、硝子の白 #F3F7FC、四つの部会の光。
   書体: 本文 Zen Kaku Gothic New／掲げる言葉 Zen Old Mincho。
   寸法: 黄金比。8 13 21 34 55 89 144 */
:root{
  --navy:#012060; --navy-2:#0b2f7a; --night:#061437; --gold:#dfbe3d; --gold-2:#b8952a;
  --white:#ffffff; --pane:#f3f7fc; --pane-2:#e7eef8; --line:#c9d4e6;
  --ink:#14213d; --ink-2:#3e4a66; --ink-3:#6e7a94;
  --c-rinen:#dfbe3d; --c-soshiki:#4fb0e8; --c-family:#f08a6c; --c-noto:#3bc0a6;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sp1:8px; --sp2:13px; --sp3:21px; --sp4:34px; --sp5:55px; --sp6:89px; --sp7:144px;
  --w:980px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--gothic);font-size:1rem;line-height:1.9;font-feature-settings:"palt"}
a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--navy-2)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
img{max-width:100%;display:block}

/* ---------- 上部：紺の帯にJPSAの金の三角と支部名。タブは帯の中 ---------- */
header.site{background:var(--navy);color:var(--white);padding:var(--sp3) var(--sp3) 0}
header.site .in{max-width:var(--w);margin:0 auto;display:flex;align-items:center;gap:var(--sp2)}
header.site img{width:34px;height:auto}
header.site .en{font-family:var(--mincho);font-size:.8125rem;color:var(--gold);letter-spacing:.14em;margin:0;line-height:1.2}
header.site h1{font-family:var(--mincho);font-weight:500;font-size:1.272rem;letter-spacing:.14em;margin:0;line-height:1.2}
header.site h1 a{color:inherit;text-decoration:none}
nav.tabs{background:var(--navy);padding:var(--sp2) var(--sp3) 0;border-bottom:1px solid var(--line)}
nav.tabs .in{max-width:var(--w);margin:0 auto;display:flex;gap:var(--sp3);flex-wrap:wrap;font-size:.9375rem}
nav.tabs a{color:rgba(255,255,255,.78);text-decoration:none;padding:0 0 var(--sp1);border-bottom:3px solid transparent;letter-spacing:.06em}
nav.tabs a:hover{color:var(--white)}
nav.tabs a[aria-current="page"]{color:var(--white);border-bottom-color:var(--gold)}
nav.tabs a.staff{color:var(--gold)}

main{max-width:var(--w);margin:0 auto;padding:var(--sp5) var(--sp3) var(--sp6)}
h2{font-family:var(--mincho);font-weight:500;font-size:1.618rem;line-height:1.5;letter-spacing:.04em;margin:0 0 var(--sp3);color:var(--navy)}
h3{font-family:var(--mincho);font-weight:600;font-size:1.272rem;line-height:1.5;margin:0 0 var(--sp2);color:var(--navy)}
p{margin:0 0 var(--sp2)}
.small{font-size:.8125rem;color:var(--ink-3);line-height:1.8}
.lead{font-size:1.125rem;line-height:2}
.pre{white-space:pre-wrap;word-break:break-word}
.placeholder{color:var(--ink-3)}
section{margin:0 0 var(--sp6)}
section:last-of-type{margin-bottom:0}

/* 節の題：硝子の縁のような金の縦線を1本 */
.label{font-family:var(--mincho);font-size:1.272rem;color:var(--navy);letter-spacing:.08em;margin:0 0 var(--sp3);padding-left:var(--sp2);border-left:3px solid var(--gold);line-height:1.4}

/* ---------- 表紙：紺の夜に光が入る ---------- */
.hero{background:linear-gradient(180deg,var(--night) 0%,var(--navy) 70%,var(--navy-2) 100%);color:var(--white);margin:calc(-1 * var(--sp5)) calc(50% - 50vw) var(--sp6);padding:var(--sp6) var(--sp3) var(--sp5)}
body{overflow-x:clip}
.hero .in{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:1fr 1.618fr;gap:var(--sp5);align-items:center}
.hero h2{color:var(--white);font-size:clamp(1.9rem,4.6vw,2.618rem);line-height:1.35;letter-spacing:.06em;margin:0 0 var(--sp3)}
.hero h2 span{color:var(--gold)}
.hero p{color:rgba(255,255,255,.82);max-width:30em}
.hero .small{color:rgba(255,255,255,.6)}
.hero .cta{display:inline-block;margin-top:var(--sp2);font-size:1rem;color:var(--night);background:var(--gold);text-decoration:none;padding:var(--sp2) var(--sp4);letter-spacing:.08em;font-weight:700}
.hero .cta:hover{background:#f0d060}
.prism{width:100%;height:auto;display:block}
@media (max-width:760px){.hero .in{grid-template-columns:1fr;gap:var(--sp4)}}

/* 光の線のアニメーション（1回だけ。動きを減らす設定なら止める） */
.prism .beam{stroke-dasharray:400;stroke-dashoffset:400;animation:beam 1s ease-out .2s forwards}
.prism .ray{stroke-dasharray:500;stroke-dashoffset:500;animation:beam 1.1s ease-out forwards}
.prism .ray:nth-of-type(1){animation-delay:1s}.prism .ray:nth-of-type(2){animation-delay:1.1s}.prism .ray:nth-of-type(3){animation-delay:1.2s}.prism .ray:nth-of-type(4){animation-delay:1.3s}
.prism .lab{opacity:0;animation:show .6s ease-out 1.9s forwards}
@keyframes beam{to{stroke-dashoffset:0}}
@keyframes show{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.prism .beam,.prism .ray{animation:none;stroke-dashoffset:0}.prism .lab{animation:none;opacity:1}}

/* ---------- 硝子の板：中身を載せる面。影は使わず、上辺の白い1本が硝子の縁 ---------- */
.pane{background:var(--pane);border:1px solid var(--line);border-top:2px solid var(--white);padding:var(--sp4) var(--sp4) var(--sp3);margin:0 0 var(--sp3)}
.pane.dark{background:var(--night);color:var(--white);border-color:var(--navy-2)}
.pane.dark h3,.pane.dark .label{color:var(--white)}
.pane.dark .small{color:rgba(255,255,255,.62)}
@media (max-width:520px){.pane{padding:var(--sp3) var(--sp3) var(--sp2)}}

/* 支部長：写真は硝子の板に嵌める。金の縁 */
.leader{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--sp4);align-items:start}
.leader .photo{border:1px solid var(--gold);padding:6px;background:var(--white)}
.leader .photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}
.leader .name{font-family:var(--mincho);font-size:1.618rem;color:var(--navy);margin:var(--sp2) 0 0;letter-spacing:.1em;line-height:1.3}
.leader .name small{display:block;font-family:var(--gothic);font-size:.8125rem;color:var(--ink-3);letter-spacing:.04em;margin-top:4px}
.leader .glass{font-family:var(--mincho);color:var(--ink-2);font-size:.9375rem;margin-top:var(--sp2)}
.statement{font-family:var(--mincho);font-size:clamp(1.3rem,3.2vw,1.8rem);line-height:1.6;letter-spacing:.04em;color:var(--navy);margin:0 0 var(--sp3);text-wrap:balance}
@media (max-width:640px){.leader{grid-template-columns:1fr}.leader .photo{max-width:280px}}

/* 掲げるものの表：横罫 */
table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.85}
th,td{text-align:left;vertical-align:top;padding:var(--sp2) var(--sp2) var(--sp2) 0;border-bottom:1px solid var(--line)}
th{font-weight:700;color:var(--navy);white-space:nowrap;width:8em;font-family:var(--mincho)}
thead th{font-family:var(--gothic);font-size:.8125rem;letter-spacing:.06em;color:var(--ink-3);border-bottom:1px solid var(--navy);width:auto}
td .duty{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.6}
td.statement-td{font-family:var(--mincho);font-weight:600;font-size:1.272rem;letter-spacing:.08em;color:var(--navy)}
.scroll-x{overflow-x:auto}
table.sched td{white-space:nowrap}
table.sched td.note{white-space:normal;color:var(--ink-2);font-size:.875rem}
table.sched tr.kick td{color:var(--navy);font-weight:700}

/* 支部長のことば：便箋。金の罫は左に1本だけ */
.words{margin:var(--sp3) 0 var(--sp2);padding:var(--sp3) var(--sp3) var(--sp2);background:var(--white);border-left:3px solid var(--gold)}
.words .label{border:0;padding:0;font-size:1rem;margin-bottom:var(--sp1)}
.words p{margin:0 0 var(--sp1)}
.words .by{text-align:right;font-family:var(--mincho);font-size:.9375rem;color:var(--ink-2);margin:var(--sp2) 0 0}
.words .by:empty{display:none}

/* 名前と肩書 */
.who{font-family:var(--mincho);font-weight:600;font-size:1.05rem;margin:0 0 var(--sp2);color:var(--navy)}
.who small{display:block;font-family:var(--gothic);font-weight:400;font-size:.8125rem;color:var(--ink-3);letter-spacing:.04em;margin-top:2px}

/* ---------- 学び：三枚の硝子 ---------- */
.learn{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp3)}
.learn .pane{margin:0;display:flex;flex-direction:column}
.learn .pane p:last-child{margin-top:auto}
.learn h3{font-size:1.125rem}
@media (max-width:760px){.learn{grid-template-columns:1fr}}

/* 能力開発の5段階と二つの壁 */
.steps{display:flex;align-items:stretch;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);margin:var(--sp2) 0 var(--sp3);background:var(--white)}
.steps .step{flex:1 1 0;padding:var(--sp3) var(--sp1);text-align:center;border-left:1px solid var(--line)}
.steps .step:first-child{border-left:0}
.steps .step b{font-family:var(--mincho);font-weight:600;font-size:1.125rem;display:block;line-height:1.3;color:var(--navy)}
.steps .step small{display:block;font-size:.75rem;color:var(--gold-2);margin-top:4px;letter-spacing:.06em}
.steps .step.now{background:#fff8dc}
.steps .wall{flex:0 0 auto;width:34px;position:relative;background:var(--navy)}
.steps .wall span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);writing-mode:vertical-rl;color:var(--white);font-size:.75rem;letter-spacing:.2em;white-space:nowrap}
@media (max-width:520px){
  .steps{flex-direction:column;border-top:0;border-bottom:0}
  .steps .step{border-left:0;border-top:1px solid var(--line);padding:var(--sp2)}
  .steps .step:first-child{border-top:1px solid var(--navy)}
  .steps .step:last-child{border-bottom:1px solid var(--navy)}
  .steps .wall{width:auto;height:34px}
  .steps .wall span{writing-mode:horizontal-tb}
}

/* 13の原則：13本の光の帯。順番そのものが意味なので番号を出す */
ol.principles{list-style:none;padding:0;margin:var(--sp2) 0 0;counter-reset:p;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp1) var(--sp3)}
ol.principles li{counter-increment:p;display:flex;align-items:baseline;gap:var(--sp2);padding:var(--sp1) 0;border-bottom:1px solid var(--line);font-family:var(--mincho);font-size:1.05rem;color:var(--navy)}
ol.principles li::before{content:counter(p);font-family:var(--gothic);font-size:.75rem;color:var(--gold-2);min-width:1.6em;letter-spacing:.04em}

/* ---------- 四つの部会：光の帯 ---------- */
.spectrum{display:grid;gap:var(--sp2)}
.band{display:grid;grid-template-columns:14px 1fr;gap:var(--sp3);background:var(--pane);border:1px solid var(--line);border-top:2px solid var(--white)}
.band .bar{background:var(--c)}
.band .body{padding:var(--sp3) var(--sp3) var(--sp3) 0}
.band .name{font-family:var(--mincho);font-size:1.272rem;color:var(--navy);margin:0;line-height:1.3;letter-spacing:.06em}
.band .name small{display:inline-block;margin-left:var(--sp2);font-family:var(--gothic);font-size:.8125rem;color:var(--ink-3);letter-spacing:.04em}
.band .lead-name{font-size:.9375rem;color:var(--ink-2);margin:4px 0 var(--sp2)}
.band table{margin-top:var(--sp1)}
.band th{width:6em}
.band.rinen{--c:var(--c-rinen)}.band.soshiki{--c:var(--c-soshiki)}.band.family{--c:var(--c-family)}.band.noto{--c:var(--c-noto)}

/* ---------- 予定と残り日数 ---------- */
.event{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--sp3);align-items:start;padding:var(--sp3) 0;border-top:1px solid var(--line)}
.event:last-child{border-bottom:1px solid var(--line)}
.event .when{font-family:var(--mincho);font-size:1.272rem;line-height:1.4;margin:0;color:var(--navy)}
.event .when small{display:block;font-family:var(--gothic);font-size:.8125rem;color:var(--ink-2);margin-top:2px}
.event .what{margin:0}
.event .what b{font-weight:700}
@media (max-width:480px){.event{grid-template-columns:1fr;gap:var(--sp1)}}
.countdown{font-family:var(--mincho);color:var(--navy);font-size:1.05rem;margin:0 0 var(--sp2)}
.countdown b{font-size:2.618rem;color:var(--gold-2);line-height:1;margin:0 4px;font-weight:500}
.btn{display:inline-block;font-size:.9375rem;letter-spacing:.06em;color:var(--white);background:var(--navy);text-decoration:none;padding:var(--sp1) var(--sp3);margin-top:var(--sp2);border:0;cursor:pointer;font-family:inherit}
.btn:hover{color:var(--white);background:var(--navy-2)}
.btn.gold{color:var(--night);background:var(--gold);font-weight:700}
.btn.gold:hover{background:#f0d060}

/* 番号つきの約束（順番に意味がある） */
ol.vows{list-style:none;padding:0;margin:0;counter-reset:v}
ol.vows li{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--sp2);padding:var(--sp3) 0;border-bottom:1px solid var(--line)}
ol.vows li::before{counter-increment:v;content:counter(v);font-family:var(--mincho);font-size:1.618rem;color:var(--gold-2);line-height:1.1}
ol.vows li b{display:block;font-family:var(--mincho);font-weight:600;font-size:1.125rem;margin-bottom:4px;color:var(--navy)}
ol.vows li span{grid-column:2;color:var(--ink-2);font-size:.9375rem}

/* 3ヶ月の循環 */
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);margin:var(--sp3) 0;background:var(--white)}
.cycle div{padding:var(--sp3) var(--sp2);border-left:1px solid var(--line)}
.cycle div:first-child{border-left:0}
.cycle b{display:block;font-family:var(--mincho);font-size:1.125rem;margin-bottom:4px;color:var(--navy)}
.cycle span{font-size:.8125rem;color:var(--ink-2);line-height:1.6;display:block}
@media (max-width:480px){.cycle{grid-template-columns:1fr 1fr}.cycle div:nth-child(3){border-left:0}.cycle div:nth-child(n+3){border-top:1px solid var(--line)}}

/* 宣言シート・注意書き・資料一覧 */
.sheet{white-space:pre-wrap;word-break:break-word;font-family:var(--gothic);font-size:.9375rem;line-height:2;background:var(--pane);border:1px solid var(--line);padding:var(--sp3) var(--sp3) var(--sp4);margin:0 0 var(--sp2)}
.copy-row{display:flex;align-items:center;gap:var(--sp2);margin:0 0 var(--sp2)}
button.copy,form.logout-me button{font:inherit;font-size:.8125rem;letter-spacing:.06em;color:var(--navy);background:transparent;border:1px solid var(--navy);padding:5px var(--sp2);cursor:pointer}
button.copy:hover{background:var(--navy);color:var(--white)}
.copy-ok{font-size:.8125rem;color:var(--ink-2)}
.note{border-left:3px solid var(--gold);padding:2px 0 2px var(--sp2);color:var(--ink-2);font-size:.9375rem}
ul.files{list-style:none;padding:0;margin:0}
ul.files li{padding:var(--sp2) 0;border-bottom:1px solid var(--line)}
ul.files li:last-child{border-bottom:0}
ul.files .meta{display:block;font-size:.75rem;color:var(--ink-3)}
.tag{font-size:.75rem;color:var(--ink-3);letter-spacing:.06em;margin-right:6px}

/* 目的（理念経営実践チーム） */
.aim{border-top:1px solid var(--navy);padding-top:var(--sp3)}
.aim .no{font-family:var(--mincho);font-size:1.618rem;color:var(--gold-2);line-height:1;margin:0 0 var(--sp1)}
.aim .statement{font-size:clamp(1.05rem,3vw,1.4rem);line-height:1.9;margin:0 0 var(--sp3)}
.aim .statement em{font-style:normal;border-bottom:2px solid var(--gold);padding-bottom:1px}
.aim + .aim{margin-top:var(--sp4)}
.gloss{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--sp2) var(--sp3);font-size:.9375rem;line-height:1.85}
.gloss dt{font-weight:700;color:var(--navy);margin:0}
.gloss dd{margin:0;color:var(--ink-2)}
@media (max-width:480px){.gloss{grid-template-columns:1fr;gap:2px var(--sp2)} .gloss dd{margin-bottom:var(--sp2)}}
.cover{margin:0 0 var(--sp6)}
.cover .en{font-family:var(--mincho);font-size:.9375rem;color:var(--gold-2);letter-spacing:.2em;margin:0 0 var(--sp2)}
.cover h2{font-size:clamp(1.9rem,5vw,2.618rem);line-height:1.3;letter-spacing:.06em;margin:0 0 var(--sp3)}
.cover .rule{width:55px;height:3px;background:var(--gold);margin:0 0 var(--sp3)}
.cover p{max-width:34em}
.cover .was{margin-top:var(--sp3)}

/* インテグレートの層（旧図・マイページで使う）：下ほど根本で広い */
.strata{margin:var(--sp3) 0 0;border-bottom:2px solid var(--navy)}
.strata .layer{display:grid;grid-template-columns:8em 1fr;gap:var(--sp2);padding:var(--sp2) 0;border-top:1px solid var(--line);align-items:start}
.strata .layer p{margin:0}
.strata .layer .who{font-size:1rem;margin:0}
.strata .layer.me{margin-left:34%}
.strata .layer.bukai{margin-left:21%;border-left:4px solid var(--c,var(--line));padding-left:var(--sp2)}
.strata .layer.shibu{margin-left:8%}
.strata .layer.jpsa{margin-left:0;background:var(--pane);border-top:1px solid var(--navy)}
@media (max-width:520px){.strata .layer{grid-template-columns:1fr;gap:2px}.strata .layer.me{margin-left:21%}.strata .layer.bukai{margin-left:13%}.strata .layer.shibu{margin-left:5%}}

/* 脚 */
footer.site{max-width:var(--w);margin:0 auto;padding:0 var(--sp3) var(--sp5);color:var(--ink-3);font-size:.8125rem;display:flex;justify-content:space-between;align-items:center;gap:var(--sp2);flex-wrap:wrap}
footer.site form{margin:0}
footer.site button{font:inherit;font-size:.8125rem;color:var(--ink-3);background:transparent;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){br.pc{display:none}}

/* ---------- マイページ ---------- */
form.identify{display:grid;gap:var(--sp2);max-width:420px;margin:var(--sp3) 0}
form.identify select,form.identify input,.chal textarea,.pyr textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--white);border:1px solid var(--line);padding:var(--sp1) var(--sp2);width:100%;line-height:1.7}
form.identify select{appearance:none;-webkit-appearance:none}
form.identify .btn{justify-self:start}
form.logout-me{margin:var(--sp2) 0 0}
.actions{display:flex;align-items:center;gap:var(--sp2);margin:var(--sp2) 0 0}
button.btn{font:inherit;border:0;cursor:pointer}

/* アチーブメントピラミッド：左に固定の形（SVG）、右に中身。段の色は所属部会の光 */
.pyr{display:grid;grid-template-columns:1fr 1.618fr;column-gap:var(--sp4);align-items:start;margin:var(--sp3) 0 0}
.pyr-fig{position:sticky;top:var(--sp3)}
.pyr-svg{width:100%;height:auto;display:block}
.pyr-lab{font-family:var(--mincho);font-size:15px;letter-spacing:.08em}
.pyr-lab.on{fill:#ffffff;font-weight:600}
.pyr-lab.off{fill:#3e4a66;font-size:12px;font-family:var(--gothic);letter-spacing:.04em}
.pyr-lab.brace{fill:#b8952a;font-size:12px;letter-spacing:.2em}
.pyr-lab.ground{fill:#012060;font-size:13px;letter-spacing:.16em}
.pyr-body .tier{padding:0 0 var(--sp2);margin:0 0 var(--sp2);border-bottom:1px solid var(--line)}
.pyr-body .tier b,.pyr-body .tier label{display:block;font-family:var(--mincho);font-weight:600;font-size:1.05rem;margin-bottom:5px;color:var(--navy)}
.pyr-body .tier p{margin:0;white-space:pre-wrap;word-break:break-word}
.pyr-body small.tag{display:inline-block;font-family:var(--gothic);font-weight:400;font-size:.7rem;letter-spacing:.08em;color:var(--gold-2);margin-left:8px;vertical-align:1px}
@media (max-width:640px){.pyr{grid-template-columns:1fr;row-gap:var(--sp3)} .pyr-fig{position:static;max-width:340px;margin:0 auto}}
.chal{display:grid;gap:var(--sp1);margin:var(--sp2) 0 0}
.chal label{font-weight:700;color:var(--navy);font-size:.9375rem;margin-top:var(--sp2)}
label.share{display:block;font-size:.9375rem;margin:0 0 var(--sp2)}
.mate{padding:var(--sp3) 0;border-top:1px solid var(--line)}
.mate h3{margin-bottom:2px}
.mate .gloss{margin:var(--sp2) 0}
.mate .declare{margin-top:var(--sp2)}

/* 期の進み：光の帯が満ちていく */
.progress{margin:var(--sp2) 0 var(--sp3)}
.progress .track{height:10px;background:var(--pane-2);border:1px solid var(--line)}
.progress .fill{height:100%;background:linear-gradient(90deg,var(--gold-2),var(--gold));width:0;transition:width 1.2s ease-out}
.progress .meta{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--ink-3);margin-top:4px}

/* ---------- 宣言の壁：会員一人ひとりが硝子の一枚 ---------- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp3)}
.tile{background:var(--pane);border:1px solid var(--line);border-top:4px solid var(--c,var(--navy));padding:var(--sp3)}
.tile .name{font-family:var(--mincho);font-size:1.125rem;color:var(--navy);margin:0;line-height:1.3}
.tile .meta{font-size:.8125rem;color:var(--ink-3);margin:0 0 var(--sp2)}
.tile .vision{font-family:var(--mincho);font-size:1.05rem;line-height:1.8;margin:0 0 var(--sp2);white-space:pre-wrap;word-break:break-word}
.tile .declare{font-size:.9375rem;margin:0;padding-top:var(--sp2);border-top:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.tile .declare b{color:var(--navy)}
.tile.rinen{--c:var(--c-rinen)}.tile.soshiki{--c:var(--c-soshiki)}.tile.family{--c:var(--c-family)}.tile.noto{--c:var(--c-noto)}

/* スタッフ */
table.roster input,table.roster select{font:inherit;font-size:.875rem;width:100%;border:1px solid var(--line);background:var(--white);padding:4px 6px}
table.roster td{padding-right:6px}
form.member-add{display:grid;grid-template-columns:repeat(5,1fr) auto;gap:var(--sp1);align-items:end;margin:var(--sp2) 0}
form.member-add input,form.member-add select{font:inherit;font-size:.875rem;border:1px solid var(--line);background:var(--white);padding:6px 8px;width:100%}
@media (max-width:640px){form.member-add{grid-template-columns:1fr 1fr}}
.cfg-group{padding:var(--sp3) 0;border-top:1px solid var(--line)}
.cfg-group h3{margin-bottom:var(--sp1)}
.cfg-group label{display:block;font-weight:700;color:var(--navy);font-size:.9375rem;margin-top:var(--sp2)}
.cfg-group textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--white);border:1px solid var(--line);padding:var(--sp1) var(--sp2);width:100%;line-height:1.7;margin-top:4px}

/* 見に来る申し込み（外向き） */
form.identify.guest{max-width:520px}
form.identify.guest label{display:block;font-size:.9375rem;font-weight:700;color:var(--navy)}
form.identify.guest label input,form.identify.guest label select,form.identify.guest label textarea{display:block;margin-top:5px;font-weight:400;color:var(--ink)}
form.identify.guest textarea{font:inherit;font-size:1rem;background:var(--white);border:1px solid var(--line);padding:var(--sp1) var(--sp2);width:100%;line-height:1.7}
form.identify .req{font-size:.7rem;color:var(--gold-2);margin-left:6px;font-weight:400;letter-spacing:.08em}
form.identify .hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

/* ---------- 入口（入る／アカウントを作る／合言葉）：紺の夜。中身の量で崩れない1枚のカード ---------- */
body.gate{background:linear-gradient(180deg,var(--night),var(--navy) 70%,var(--navy-2));color:var(--white);min-height:100vh}
main.gate{max-width:none;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp4) var(--sp3)}
.gate .card{max-width:400px;width:100%;padding:var(--sp3) 0}
.gate .card.wide{max-width:480px}
.gate .card img{width:55px;height:auto;margin:0 0 var(--sp2)}
.gate .card .en{font-family:var(--mincho);color:var(--gold);font-size:.875rem;letter-spacing:.2em;margin:0 0 var(--sp1)}
.gate .card h1{font-family:var(--mincho);font-weight:500;font-size:1.618rem;letter-spacing:.12em;margin:0 0 var(--sp2);line-height:1.3;color:var(--white)}
.gate .card .rule{width:55px;height:3px;background:var(--gold);margin:0 0 var(--sp3)}
.gate .card .sub{color:rgba(255,255,255,.78);font-size:.9375rem;line-height:1.85;margin:0 0 var(--sp3)}
.gate .card label{display:block;font-size:.8125rem;color:rgba(255,255,255,.7);letter-spacing:.06em;margin:0 0 var(--sp2)}
.gate .card input,.gate .card select{display:block;width:100%;box-sizing:border-box;padding:10px 0;margin-top:2px;font:inherit;font-size:1rem;border:0;border-bottom:1px solid rgba(255,255,255,.55);background:transparent;color:var(--white);letter-spacing:.04em;outline:none;border-radius:0}
.gate .card select{appearance:none;-webkit-appearance:none}
.gate .card select option{color:var(--ink)}
.gate .card input:focus,.gate .card select:focus{border-bottom-color:var(--gold)}
.gate .card input::placeholder{color:rgba(255,255,255,.4)}
.gate .card button{font:inherit;font-size:.9375rem;letter-spacing:.12em;color:var(--night);background:var(--gold);border:0;padding:13px 34px;cursor:pointer;font-weight:700;margin-top:var(--sp2)}
.gate .card button:hover{background:#f0d060}
.gate .card button:disabled{opacity:.6;cursor:default}
.gate .card .err{color:#ffb3a3;font-size:.875rem;margin:0 0 var(--sp2)}
.gate .card .hint{color:rgba(255,255,255,.6);font-size:.8125rem;line-height:1.8;margin:var(--sp4) 0 0}
.gate .card .hint a{color:var(--gold)}

/* 支部長のことば（Discordより）：日付つきの短い引用を並べる */
.quotes{list-style:none;padding:0;margin:0}
.quotes li{padding:var(--sp2) 0;border-bottom:1px solid var(--line);font-family:var(--mincho);font-size:1.05rem;line-height:1.9}
.quotes li:last-child{border-bottom:0}
.quotes li small{display:block;font-family:var(--gothic);font-size:.75rem;color:var(--ink-3);letter-spacing:.06em;margin-top:2px}

/* 満席への道：席が光で埋まっていく */
.seats{display:grid;grid-template-columns:repeat(25,1fr);gap:3px;margin:var(--sp2) 0}
.seats span{aspect-ratio:1/1;background:var(--pane-2);border:1px solid var(--line)}
.seats span.on{background:var(--gold);border-color:var(--gold-2)}
.seats-meta{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--ink-3)}
.seats-big{font-family:var(--mincho);color:var(--navy);font-size:1.05rem;margin:0 0 var(--sp1)}
.seats-big b{font-size:2.618rem;color:var(--gold-2);font-weight:500;line-height:1;margin:0 4px}

/* 上部の帯：名前と役割 */
header.site .me{margin-left:auto;text-align:right;font-size:.8125rem;color:rgba(255,255,255,.75);line-height:1.5}
header.site .me b{display:block;color:var(--white);font-weight:500;font-size:.9375rem}
@media (max-width:520px){header.site .me{display:none}}
footer.site a{color:var(--ink-3)}

/* ---------- 会議 ---------- */
.meeting{margin-bottom:var(--sp3)}
.meeting-head{display:flex;align-items:baseline;gap:var(--sp2);flex-wrap:wrap}
.meeting-head h3{margin:0}
.aud{font-size:.75rem;letter-spacing:.06em;padding:2px 8px;border:1px solid var(--line);color:var(--ink-3)}
.aud.member{border-color:var(--c-noto);color:#1f8a72}.aud.partner{border-color:var(--c-family);color:#b5533a}.aud.staff{border-color:var(--gold-2);color:var(--gold-2)}
.rec-row{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap;margin:var(--sp2) 0 var(--sp1)}
.rec-row input[type=date]{font:inherit;font-size:.9375rem;border:1px solid var(--line);background:var(--white);padding:6px 8px}
main > section.pane{padding:var(--sp3)}
.cfg-group label textarea{display:block}

/* ---------- 掲示板 ---------- */
nav.cats{display:flex;gap:var(--sp2);flex-wrap:wrap;margin:var(--sp2) 0 0;font-size:.9375rem}
nav.cats a{text-decoration:none;color:var(--ink-2);padding:2px 0;border-bottom:2px solid transparent}
nav.cats a.on{color:var(--navy);border-bottom-color:var(--gold)}
.post{background:var(--pane);border:1px solid var(--line);border-top:2px solid var(--white);padding:var(--sp3);margin:0 0 var(--sp3)}
.post.pinned{border-left:3px solid var(--gold)}
.post-head{display:flex;align-items:baseline;gap:var(--sp2);flex-wrap:wrap}
.post-head h3{margin:0;font-size:1.125rem}
.post .cat{font-size:.75rem;color:var(--ink-3);letter-spacing:.06em}
.post .pin{font-size:.75rem;color:var(--gold-2)}
.replies{margin-top:var(--sp2);border-top:1px solid var(--line);padding-top:var(--sp2)}
.reply{padding:var(--sp1) 0 var(--sp1) var(--sp2);border-left:2px solid var(--line);margin:0 0 var(--sp2)}
.reply p{margin:0 0 4px}
.reply-form{display:grid;grid-template-columns:1fr auto;gap:var(--sp1);align-items:end}
.reply-form textarea{font:inherit;font-size:.9375rem;border:1px solid var(--line);background:var(--white);padding:6px 8px;width:100%}