/* JPSA金沢支部 公開ページ・メンバー専用ページの見た目（2026-10-22 社長指示「黄金比・やわらかい書体・参加したくなるおしゃれ感」）
   黄金比 φ = 1.618
   文字の大きさ … 1rem を基準に φ の累乗（0.786 / 1 / 1.272 / 1.618 / 2.058 / 2.618 / 3.33）
   余白 … フィボナッチ数（5・8・13・21・34・55・89・144）
   割り付け … 1 : 1.618（38.2% と 61.8%） */
:root{
  --phi:1.618;
  --f-xs:.786rem; --f-s:.889rem; --f-m:1rem; --f-l:1.272rem; --f-xl:1.618rem; --f-2x:2.058rem; --f-3x:2.618rem; --f-4x:3.33rem;
  --s1:5px; --s2:8px; --s3:13px; --s4:21px; --s5:34px; --s6:55px; --s7:89px; --s8:144px;
  --paper:#faf7f2; --card:#ffffff; --ink:#1d2640; --muted:#5a6377; --line:#ebe5da;
  --navy:#0b2a5b; --navy2:#16407f; --gold:#d9a92b; --gold-soft:#f8ecc8;
  --biz:#d9a92b; --soshiki:#3f9fd8; --family:#ee8466; --noto:#2fb397;
  --round:21px; --round-s:13px;
  --shadow:0 1px 2px rgba(20,30,60,.05),0 8px 34px rgba(20,30,60,.07);
  --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --en:"Outfit","Zen Maru Gothic",sans-serif;
  --w:1144px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--maru);font-weight:500;font-size:16px;line-height:1.8;letter-spacing:.03em;font-feature-settings:"palt"}
@media (min-width:900px){body{font-size:17px}}
a{color:var(--navy2);text-underline-offset:3px}
img{max-width:100%}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--s4)}
@media (max-width:620px){.wrap{padding:0 16px}}

/* 入口の帯 */
.kzbar{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.86);backdrop-filter:saturate(1.4) blur(13px);-webkit-backdrop-filter:saturate(1.4) blur(13px);border-bottom:1px solid var(--line)}
.kzbar .in{max-width:var(--w);margin:0 auto;padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3)}
.kzbar .nm{margin-right:auto;display:flex;align-items:center;gap:var(--s2);color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.06em}
.kzbar .nm img{width:34px;height:34px;border-radius:50%}
.kzbar .nm span{font-family:var(--en);font-size:var(--f-xs);color:var(--muted);font-weight:500;letter-spacing:.14em;display:block;line-height:1.2}
.doors{display:flex;gap:var(--s2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px}
.door{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:var(--f-s);font-weight:700;white-space:nowrap;transition:background .25s,color .25s}
.door small{font-weight:500;font-size:var(--f-xs);opacity:.75}
.door:hover{color:var(--ink)}
.door.on{background:var(--navy);color:#fff}
.door.mem.on{background:var(--gold);color:#2a1d00}
@media (max-width:620px){
  .kzbar .in{flex-wrap:wrap;padding:var(--s2) 16px var(--s3)}
  .kzbar .nm{width:100%}
  .doors{width:100%}.door{flex:1;justify-content:center;padding:8px 6px}
  .door small{display:none}
}

/* 見出しのかたち */
.eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--en);font-size:var(--f-xs);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--s3)}
.eyebrow::before{content:"";width:21px;height:2px;border-radius:2px;background:currentColor}
.eyebrow em{font-style:normal;font-family:var(--maru);letter-spacing:.12em;color:var(--muted);text-transform:none;font-weight:500}
h1,h2,h3{font-family:var(--maru);color:var(--ink);margin:0;font-weight:700;letter-spacing:.04em}
.h2{word-break:keep-all;font-size:clamp(var(--f-xl),4.2vw,var(--f-3x));line-height:1.38;margin-bottom:var(--s4)}
.lead{color:var(--muted);max-width:38em;margin:0}
.small{font-size:var(--f-s);color:var(--muted)}
section.sec{padding:var(--s7) 0 0}
@media (max-width:620px){section.sec{padding-top:var(--s6)}}
.split{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s5);align-items:end;margin-bottom:var(--s5)}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:var(--s3)}}

/* ヒーロー：61.8 : 38.2 */
.hero{margin-top:var(--s5);position:relative;overflow:hidden;border-radius:var(--s5);background:radial-gradient(120% 140% at 100% 0%,#24539c 0%,var(--navy) 46%,#071d42 100%);color:#fff;display:grid;grid-template-columns:1.618fr 1fr;min-height:420px}
.hero .txt{padding:var(--s6) var(--s6) var(--s6);position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
.hero .eyebrow{color:#f2cf6b}
.hero h1{color:#fff;font-size:clamp(1.618rem,3.6vw,var(--f-3x));word-break:keep-all;overflow-wrap:anywhere;line-height:1.42;letter-spacing:.05em}
.hero h1 .gl{background:linear-gradient(transparent 62%,rgba(217,169,43,.55) 62%);padding:0 2px}
.hero .who{margin:var(--s4) 0 0;color:rgba(255,255,255,.78);font-size:var(--f-s)}
.hero .cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.hero .art{position:relative}
.hero .art{overflow:hidden}
.hero .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 72%}
.hero .art img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 38.2%,#000 61.8%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 38.2%,#000 61.8%);opacity:.92}
.hero .badge{position:absolute;right:var(--s4);bottom:var(--s4);z-index:3;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);border-radius:var(--round);padding:var(--s3) var(--s4);text-align:center}
.hero .badge b{display:block;font-family:var(--en);font-size:var(--f-2x);font-weight:600;line-height:1.1;letter-spacing:.02em}
.hero .badge span{font-size:var(--f-xs);opacity:.85}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;border-radius:var(--s4)}
  .hero .txt{padding:var(--s5) var(--s4) var(--s4)}
  .hero h1{font-size:5.9vw;letter-spacing:.02em}
  .hero .art{height:233px}
  .hero .art img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 38.2%);mask-image:linear-gradient(180deg,transparent 0%,#000 38.2%)}
}
.btn{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-radius:999px;font-weight:700;text-decoration:none;font-size:var(--f-m);transition:transform .25s,box-shadow .25s,background .25s;border:0;cursor:pointer;font-family:inherit;letter-spacing:.04em}
.btn:hover{transform:translateY(-2px)}
.btn.gold{background:var(--gold);color:#2a1d00;box-shadow:0 8px 21px rgba(217,169,43,.35)}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn.navy{background:var(--navy);color:#fff}
.btn .ar{font-family:var(--en)}

/* 理念・スローガン（38.2 : 61.8） */
.pillars{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s4);margin-top:var(--s4)}
.pillar{background:var(--card);border-radius:var(--round);padding:var(--s5);box-shadow:var(--shadow)}
.pillar .k{font-family:var(--en);font-size:var(--f-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.pillar b{display:block;font-size:var(--f-xl);margin:var(--s2) 0;letter-spacing:.06em}
.pillar p{margin:0;color:var(--muted);font-size:var(--f-s)}
.pillar.dark{background:var(--gold-soft)}
@media (max-width:820px){.pillars{grid-template-columns:1fr}.pillar{padding:var(--s4)}}

/* お知らせカード */
.news{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.news a{display:grid;grid-template-columns:89px 1fr;gap:var(--s4);align-items:start;background:var(--card);border-radius:var(--round);padding:var(--s4);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s}
.news a:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(20,30,60,.05),0 13px 34px rgba(20,30,60,.11)}
.news .d{width:89px;height:89px;border-radius:50%;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--en);line-height:1.1;justify-self:center}
.news .d b{font-size:var(--f-xl);font-weight:600}
.news .d small{font-size:var(--f-xs);color:var(--muted);letter-spacing:.1em}
.news .hot .d{background:var(--gold);color:#2a1d00}.news .hot .d small{color:#5a4400}
.news h3{font-size:var(--f-l);line-height:1.5;margin:var(--s1) 0 var(--s2)}
.news p{margin:0;color:var(--muted);font-size:var(--f-s);line-height:1.75}
.news .go{display:inline-block;margin-top:var(--s2);font-family:var(--en);font-size:var(--f-xs);font-weight:600;letter-spacing:.16em;color:var(--navy2)}
@media (max-width:820px){.news{grid-template-columns:1fr}.news a{grid-template-columns:55px 1fr;gap:var(--s3);padding:var(--s4) var(--s3)}.news .d{width:55px;height:55px}.news .d b{font-size:var(--f-l)}}

/* 日程のチップ */
.dates{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.dates div{background:var(--card);border-radius:var(--round);padding:var(--s4) var(--s3);text-align:center;box-shadow:var(--shadow);position:relative}
.dates b{display:block;font-family:var(--en);font-weight:600;font-size:var(--f-3x);line-height:1;color:var(--navy);letter-spacing:.01em}
.dates span{display:block;margin-top:var(--s2);font-size:var(--f-xs);color:var(--muted);letter-spacing:.12em}
.dates .next{background:var(--navy)}
.dates .next b{color:#fff}.dates .next span{color:#f2cf6b}
.dates .next::after{content:"NEXT";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:#2a1d00;font-family:var(--en);font-size:.68rem;font-weight:700;letter-spacing:.2em;padding:2px 10px;border-radius:999px}
@media (max-width:620px){.dates{grid-template-columns:1fr 1fr}.dates b{font-size:var(--f-2x)}}

/* 情報の行 */
.list{margin-top:var(--s4);background:var(--card);border-radius:var(--round);box-shadow:var(--shadow);overflow:hidden}
.list .it{display:grid;grid-template-columns:89px 1fr auto;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.list .it:first-child{border-top:0}
.list a.it:hover{background:#fdfbf6}
.list .k{font-family:var(--en);font-size:var(--f-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.list b{display:block;font-size:var(--f-m)}
.list span{display:block;color:var(--muted);font-size:var(--f-s);line-height:1.7}
.list .ar{font-family:var(--en);color:var(--navy2);font-size:var(--f-l)}
.list .big b{font-family:var(--en);font-size:var(--f-xl);letter-spacing:.06em}
@media (max-width:620px){.list .it{grid-template-columns:1fr auto;gap:var(--s1) var(--s3);padding:var(--s4)}.list .k{grid-column:1/-1}}

/* 組織図 */
.org{display:grid;gap:var(--s4)}
.org .top{background:var(--navy);color:#fff;border-radius:var(--round);padding:var(--s5) var(--s4);text-align:center;position:relative;overflow:hidden}
.org .top small{font-family:var(--en);letter-spacing:.24em;color:#f2cf6b;font-size:var(--f-xs);text-transform:uppercase}
.org .top b{display:block;font-size:var(--f-2x);letter-spacing:.14em;margin-top:var(--s1)}
.org .top p{margin:var(--s2) 0 0;font-size:var(--f-s);color:rgba(255,255,255,.75)}
.org .dept{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s4)}
.org .box{background:var(--card);border-radius:var(--round);padding:var(--s5) var(--s4) var(--s4);box-shadow:var(--shadow)}
.org .box h3{font-family:var(--en);font-size:var(--f-xs);letter-spacing:.2em;color:var(--muted);font-weight:600;text-transform:uppercase}
.org .box h3 em{font-style:normal;font-family:var(--maru);letter-spacing:.1em;margin-left:6px}
.org .box .vp{font-size:var(--f-l);font-weight:700;margin:var(--s2) 0 var(--s3)}
.org .box .vp small{font-size:var(--f-xs);color:var(--muted);margin-right:var(--s2);font-weight:500}
.org .box ul{list-style:none;padding:0;margin:0}
.org .box li{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-top:1px dashed var(--line);font-size:var(--f-s)}
.org .box li span{font-weight:700;color:var(--ink);white-space:nowrap}
.org .box .small{margin:var(--s3) 0 0}
.org .cap{text-align:center;margin:var(--s3) 0 0}
.org .grp{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.org .grp div{background:var(--card);border-radius:var(--round);padding:var(--s4) var(--s3);text-align:center;box-shadow:var(--shadow);font-size:var(--f-s);border-top:5px solid var(--c,var(--biz))}
.org .grp div b{display:block;font-size:var(--f-l)}
@media (max-width:820px){.org .dept{grid-template-columns:1fr}.org .grp{grid-template-columns:1fr 1fr}}

/* 四つのグループ */
.cbiz{--c:var(--biz)}.csoshiki{--c:var(--soshiki)}.cfamily{--c:var(--family)}.cnoto{--c:var(--noto)}
.groups{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.gcard{background:var(--card);border-radius:var(--round);padding:var(--s5);box-shadow:var(--shadow);position:relative;overflow:hidden}
.gcard::before{content:"";position:absolute;right:-55px;top:-55px;width:144px;height:144px;border-radius:50%;background:var(--c);opacity:.13}
.gcard .lab{display:inline-block;background:var(--c);color:#fff;font-size:var(--f-xs);font-weight:700;letter-spacing:.12em;padding:3px var(--s3);border-radius:999px}
.gcard.cbiz .lab{color:#2a1d00}
.gcard h3{font-size:var(--f-xl);margin:var(--s3) 0 0}
.gcard .ld{margin:0;color:var(--muted);font-size:var(--f-s)}
.gcard .vs{margin:var(--s4) 0 0;font-size:var(--f-l);line-height:1.62;font-weight:700;color:var(--navy)}
.gcard .vs small{display:block;font-size:var(--f-s);color:var(--muted);font-weight:500;margin-top:var(--s2);line-height:1.75}
.gcard ol{margin:var(--s4) 0 0;padding:0;list-style:none;counter-reset:g}
.gcard ol li{counter-increment:g;display:grid;grid-template-columns:34px 1fr;gap:var(--s2);font-size:var(--f-s);padding:6px 0}
.gcard ol li::before{content:counter(g);width:26px;height:26px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-family:var(--en);font-weight:600;font-size:var(--f-xs);color:var(--ink)}
.gcard .tbd{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-radius:var(--round-s);background:var(--paper);color:var(--muted);font-size:var(--f-s)}
.gcard .when{margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px dashed var(--line);font-size:var(--f-s);color:var(--muted)}
.gcard .when b{color:var(--ink);font-family:var(--en);font-weight:600;letter-spacing:.04em}
@media (max-width:820px){.groups{grid-template-columns:1fr}.gcard{padding:var(--s4)}}

/* 一年 */
.year{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)}
.year .c{background:var(--card);border-radius:var(--round);padding:var(--s4) var(--s2) var(--s3);text-align:center;box-shadow:var(--shadow);position:relative}
.year .c b{display:block;font-family:var(--en);font-weight:600;font-size:var(--f-xl);line-height:1.1;color:var(--ink)}
.year .c span{display:inline-flex;align-items:center;gap:5px;font-size:var(--f-xs);color:var(--muted);margin-top:var(--s2)}
.year .c span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,#b9b2a5)}
.year .c.past{opacity:.5}
.year .c.now{background:var(--gold-soft);outline:2px solid var(--gold)}
.year .c.now::after{content:"NEXT";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:#2a1d00;font-family:var(--en);font-size:.68rem;font-weight:700;letter-spacing:.2em;padding:2px 10px;border-radius:999px}
@media (max-width:820px){.year{grid-template-columns:repeat(3,1fr)}}

/* 参加をうながす帯 */
.join{margin-top:var(--s7);border-radius:var(--s5);background:linear-gradient(135deg,#fff6dd 0%,#fdebd9 61.8%,#f9e1e8 100%);padding:var(--s6) var(--s5);display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s5);align-items:center}
.join h2{font-size:clamp(var(--f-xl),3.6vw,var(--f-2x));line-height:1.5}
.join p{margin:var(--s3) 0 0;color:var(--muted)}
.join .act{display:flex;flex-direction:column;gap:var(--s3);align-items:stretch}
.join .btn{justify-content:center}
@media (max-width:820px){.join{grid-template-columns:1fr;padding:var(--s5) var(--s4);border-radius:var(--s4)}}

/* 表（メンバー専用の配属表） */
.mx-wrap{overflow-x:auto;background:var(--card);border-radius:var(--round);box-shadow:var(--shadow);margin-top:var(--s4)}
.mx{border-collapse:collapse;width:100%;min-width:680px;font-size:var(--f-s)}
.mx th,.mx td{padding:var(--s3);text-align:left;vertical-align:top;line-height:1.75;border-top:1px solid var(--line)}
.mx thead th{border-top:0;background:var(--paper);font-weight:700;position:relative}
.mx thead th::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:0;height:3px;border-radius:3px;background:var(--c,transparent)}
.mx small{display:block;font-weight:500;font-size:var(--f-xs);color:var(--muted)}
.mx tbody th{width:10em;color:var(--navy)}

/* 合言葉のフォーム */
.gate{max-width:420px;margin:var(--s7) auto 0;background:var(--card);border-radius:var(--s5);padding:var(--s6) var(--s5);box-shadow:var(--shadow);text-align:center}
.gate .lock{width:55px;height:55px;border-radius:50%;background:var(--gold-soft);display:grid;place-items:center;margin:0 auto var(--s4);font-size:1.4rem}
.gate h1{font-size:var(--f-xl);line-height:1.5}
.gate form{display:grid;gap:var(--s3);margin-top:var(--s5)}
.gate input{font:inherit;font-size:var(--f-l);text-align:center;letter-spacing:.2em;padding:var(--s3);border:1.5px solid var(--line);border-radius:var(--round-s);background:var(--paper);color:var(--ink)}
.gate input:focus{outline:none;border-color:var(--gold);background:#fff}
.gate .err{color:#b4442a;font-size:var(--f-s);margin:0;min-height:1.5em}
.gate .small{margin:var(--s4) 0 0}
@media (max-width:620px){.gate{margin-top:var(--s5);padding:var(--s5) var(--s4)}}

footer.ft{margin-top:var(--s7);padding:var(--s5) 0 var(--s6);border-top:1px solid var(--line);text-align:center;font-size:var(--f-s);color:var(--muted)}
footer.ft .en{font-family:var(--en);letter-spacing:.2em;font-size:var(--f-xs);display:block;margin-top:var(--s2)}

/* はじめての方へ（三つの解説） */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.tcard{background:var(--card);border-radius:var(--round);padding:var(--s5) var(--s4);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--s3)}
.tcard .k{margin:0;font-family:var(--en);font-size:var(--f-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tcard h3{font-size:var(--f-l)}
.tcard p{margin:0;font-size:var(--f-s);color:var(--muted);line-height:1.8}
.tcard .q{color:var(--navy);font-weight:700;font-size:var(--f-m);line-height:1.7;padding-left:var(--s3);border-left:3px solid var(--gold)}
.tcard .more{margin-top:auto;font-weight:700;font-size:var(--f-s);text-decoration:none}
@media (max-width:820px){.trio{grid-template-columns:1fr}}

/* ふわっと現れる（動きを控える設定の方は止める） */
.anim .rise{opacity:0;transform:translateY(21px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.anim .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.anim .rise{opacity:1;transform:none;transition:none}.btn,.news a{transition:none}}