/* MABC LP の全スタイル。index.html と news.html が共有する。
   もとは index.html にインラインで置いていたものを、そのままの順序で切り出した。 */
:root{
  --bg:#0A0A0A;
  --surface:#121212;
  --surface-2:#171717;
  --line:#2E2E2E;
  --line-2:#474747;
  --fg:#FFFFFF;
  --body-fg:#E4E4E4;
  --muted:#9E9E9E;
  --pink:#F22D6C;
  --yellow:#FECE00;
  --nav-bg:rgba(10,10,10,.9);
  --nav-h:66px;
  /* 告知バーが浮いているぶんの高さ。JS が実測して上書きする。
     ここの値は JS が動かなかったときに header の余白として使われる */
  --upnext-h:62px;
  --float-shadow:0 10px 30px rgba(0,0,0,.5);
  /* MAP 資料システムのストライプ／アテンション（ファミリー感の共通部品） */
  --grad-stripe-blue:linear-gradient(90deg,#0275C2 0%,#0094A2 50%,#C4E0DF 100%);
  --grad-stripe-pink:linear-gradient(90deg,#FBDCEE 0%,#E92494 50%,#960883 100%);
  --grad-stripe-yellow:linear-gradient(90deg,#FECE00 0%,#FFE22E 50%,#FFF65C 100%);
  --grad-attention:linear-gradient(90deg,#4E237F 0%,#F22D6C 50%,#FC6E34 100%);
  --disp:"Heebo",sans-serif;
  --jp:"Noto Sans JP",sans-serif;
  --stripe12:linear-gradient(90deg,
    #0275C2 0 8.333%,#0094A2 8.333% 16.666%,#C4E0DF 16.666% 25%,
    #FFF65C 25% 33.333%,#FFE22E 33.333% 41.666%,#FECE00 41.666% 50%,
    #FC6E34 50% 58.333%,#F22D6C 58.333% 66.666%,#E92494 66.666% 75%,
    #FBDCEE 75% 83.333%,#960883 83.333% 91.666%,#4E237F 91.666% 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#0A0A0A;color-scheme:dark light}
/* .page が実際の塗り。body の background が外側から潰されても黒地が残る */
.page{background:#0A0A0A;min-height:100vh;position:relative;isolation:isolate}
body{
  background:#0A0A0A;color:var(--body-fg);
  font-family:var(--jp);font-weight:400;
  font-size:15px;line-height:1.95;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
a{color:inherit}
.map-stripe{display:flex;flex-direction:column;gap:5px}
.map-stripe span{display:block;height:6px}
.map-stripe .s1{background:var(--grad-stripe-blue)}
.map-stripe .s2{background:var(--grad-stripe-pink)}
.map-stripe .s3{background:var(--grad-stripe-yellow)}

/* MABC mark */
.mark{width:30px;height:30px;background:#16255C;position:relative;overflow:hidden;flex:none;outline:1px solid var(--line-2)}
.mark::after{content:"";position:absolute;left:-30%;bottom:-55%;width:160%;height:60%;background:#D22B2B;transform:rotate(-18deg)}
.mark span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:900;font-size:13px;letter-spacing:0;z-index:2}

nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
/* ロゴの組み。日本語の名称をワードマークの上に小さく載せる。
   grid にしているのは、狭い画面で「マークの右」から「ロゴ全体の上」へ
   置き方を変えるため（横に並べたままだと申込ボタンに幅が残らない） */
.brand{margin-right:auto;display:grid;grid-template-columns:auto auto;
  grid-template-areas:"mark sub" "mark name";align-items:center;column-gap:11px;row-gap:5px;
  font-family:var(--disp);font-weight:900;font-size:21px;letter-spacing:.06em;
  color:var(--fg);line-height:1;text-decoration:none}
.brand .mark{grid-area:mark}
.b-sub{grid-area:sub;align-self:end;font-family:var(--jp);font-weight:500;font-size:9.5px;
  letter-spacing:.04em;color:var(--muted);line-height:1}
.b-name{grid-area:name;align-self:start}
@media(max-width:560px){
  /* 日本語をマークごと上に逃がす。横幅はワードマーク列に依存しなくなる */
  .brand{grid-template-areas:"sub sub" "mark name";column-gap:9px;row-gap:4px;font-size:18px}
  .b-sub{align-self:center;font-size:8.5px;letter-spacing:.02em;white-space:nowrap}
  .b-name{align-self:center}
}
@media(max-width:380px){
  /* 最も狭いところ。日本語と申込ボタンが折り返すので両方詰める */
  .b-sub{font-size:8px;letter-spacing:0}
  nav .btn.sm.cta{padding:11px 15px;font-size:14px;white-space:nowrap}
}
.navlinks{display:flex;gap:26px;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--muted)}
.navlinks a{text-decoration:none;transition:color .2s}
.navlinks a:hover{color:var(--fg)}
@media(max-width:900px){.navlinks{display:none}}

/* 告知バー。ページの流れから外して画面に浮かせている（フローティング）。
   場所を取らないので、初期表示ぶんの余白は header 側の padding で確保する。
   下スクロールで畳み、上スクロールで戻す。

   外枠は高さ 0 の「留め具」。中身は absolute で浮かせている。
   fixed ではなく sticky なのは nav の上にカラーストライプがあるため。fixed だと
   ページ最上部（nav がまだ下にいる状態）でバーが nav に重なる。sticky なら
   スクロール前は nav の下に付き、nav が天井に貼り付いたら一緒に止まる。 */
.upnext{position:sticky;top:var(--nav-h);height:0;z-index:49}
.upnext .wrap{
  position:absolute;left:0;right:0;top:12px;
  display:flex;align-items:center;gap:0 18px;min-height:44px;padding:7px 18px;
  background:var(--nav-bg);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);box-shadow:var(--float-shadow);
  transition:transform .3s ease,opacity .3s ease
}
/* 引っ込めた状態。影のぶんも隠れるよう少し余分に持ち上げる */
.upnext.is-off .wrap{transform:translateY(calc(-100% - 26px));opacity:0;pointer-events:none}
.u-tag{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.16em;color:var(--pink);flex:none}
.u-i{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--body-fg);line-height:1.7;flex:none}
.u-ic{width:14px;height:14px;flex:none;color:var(--pink);margin-right:4px}
.u-i b{font-family:var(--jp);font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--muted);flex:none}
/* 見出しと中身は全角コロンで割る。2件とも同じ組みなので CSS 側に持たせる */
.u-i b::after{content:"："}
.u-i time{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--fg);white-space:nowrap}
.u-link{text-decoration:none;transition:color .2s}
.u-link:hover{color:var(--fg)}
.u-fixed{display:flex;align-items:center;gap:0 18px;flex:none;min-width:0}
.u-fixed .u-i+.u-i{border-left:1px solid var(--line-2);padding-left:18px}
/* バー右側の M&A ニュース。1件ずつ入れ替える。JS が中身を入れるまでは hidden */
.ticker{display:flex;align-items:center;gap:12px;min-width:0;flex:1;margin-left:auto;padding-left:18px;border-left:1px solid var(--line-2)}
.ticker[hidden]{display:none}
.t-tag{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.14em;color:var(--muted);flex:none;text-decoration:none;transition:color .2s}
.t-tag:hover{color:var(--fg)}
/* 高さを1行ぶんに固定した窓。中のカードを重ねて置き、表示するものだけ不透明にする */
.t-slot{position:relative;flex:1;min-width:0;height:21px}
.t-item{
  position:absolute;inset:0;display:flex;align-items:center;gap:9px;min-width:0;
  text-decoration:none;color:var(--body-fg);
  opacity:0;transform:translateY(5px);transition:opacity .45s ease,transform .45s ease;pointer-events:none
}
.t-item.on{opacity:1;transform:none;pointer-events:auto}
.t-item time{font-family:var(--disp);font-weight:700;font-size:11.5px;color:var(--muted);flex:none}
.t-item b{font-family:var(--jp);font-weight:700;font-size:12px;color:var(--fg);flex:none}
/* 省略記号を出すのは flex の子側。親（.t-item）に付けても効かない */
.t-deal{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-item:hover b,.t-item:hover .t-deal{color:var(--fg)}
.t-item:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* 狭い画面は1行に畳み、告知もニュースも同じ列を順ぐりに流す。
   切り替えるのは JS（.is-one を付ける）。JS が動かなかったときは
   下の 2 行組みのまま告知だけが出る＝読めなくなることはない */
.upnext.is-one .u-fixed{display:none}
.upnext.is-one .t-tag{display:none}
.upnext.is-one .ticker{flex-basis:auto;margin:0;padding:0;border:0}
/* 告知の複製。会社名ではなくラベルなので、ニュースと見分けが付く色にする */
.t-note b{color:var(--pink)}
.t-note time{font-size:13px;color:var(--fg)}

@media(max-width:900px){
  /* JS が動かなかったとき用の 2 行組み。.is-one が付けば上の指定が勝つ */
  .upnext .wrap{flex-wrap:wrap;gap:0 14px;padding:6px 16px 7px}
  .ticker{flex-basis:100%;margin-left:0;padding-left:0;border-left:0;
    border-top:1px solid var(--line);margin-top:5px;padding-top:6px}
  :root{--upnext-h:84px}
}
@media(max-width:640px){
  .u-tag{display:none}
  .u-i{font-size:12px;line-height:1.6}
  .u-fixed .u-i+.u-i{border-left:0;padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  .upnext .wrap{transition:none}
  .t-item{transition:none;transform:none}
}

.btn{display:inline-block;padding:14px 30px;background:var(--fg);color:var(--bg);text-decoration:none;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.06em;line-height:1;transition:background .2s}
.btn:hover{background:var(--yellow);color:#0A0A0A}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn.ghost:hover{background:transparent;border-color:var(--fg)}
.btn.sm{padding:10px 20px;font-size:14px}
.btn.cta{background:var(--grad-attention);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.btn.sm.cta{padding:12px 26px;font-size:15px}
.btn.cta:hover{background:var(--yellow);background-image:none;color:#0A0A0A}

/* signature: 12-stripe wipe.
   Default state is VISIBLE. JS adds .armed to hide, then removes it to reveal.
   If JS never runs, or the observer never fires, text is still readable. */
.redact{position:relative;display:inline-block}
.redact.one{white-space:nowrap}
.redact i{font-style:normal;opacity:1;transition:opacity .3s ease .44s}
.redact::after{
  content:"";position:absolute;left:-.08em;right:-.08em;top:.06em;bottom:.1em;
  background:var(--stripe12);transform:scaleX(0);transform-origin:right center;
  transition:transform .62s cubic-bezier(.72,0,.16,1);pointer-events:none
}
.redact.armed i{opacity:0;transition:none}
.redact.armed::after{transform:scaleX(1);transition:none}

/* 告知バーが浮いていて場所を取らないぶん、初期表示で重ならないよう上に足しておく。
   --upnext-h は JS が実測値で上書きする（バーを閉じたら 0 になる） */
header{padding:calc(44px + var(--upnext-h)) 0 0;position:relative;isolation:isolate}
/* 見出しが nav と告知バーの下に潜らないようにする */
section[id]{scroll-margin-top:calc(var(--nav-h) + var(--upnext-h) + 20px)}
/* 写真と暗幕を疑似要素で敷く。下端は地色に落とし切り、次のセクションとの境目を消す */
header::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(/assets/hero.jpg) left 45%/cover no-repeat}
header::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,#0A0A0A 0%,rgba(10,10,10,.93) 38%,rgba(10,10,10,.55) 72%,rgba(10,10,10,.35) 100%),
  linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,0) 26%,#0A0A0A 100%)}
/* モバイルは別の写真に差し替える。ヘッダーは 390×987 と極端に縦長で、横長写真を
   cover すると幅の 2 割しか見えず後頭部だけが残るため、縦位置に組んだ集合写真を使う */
@media(max-width:760px){
  header::before{background-image:url(/assets/hero-mobile.jpg);background-position:50% 22%}
  header::after{background:
    linear-gradient(180deg,rgba(10,10,10,.60) 0%,rgba(10,10,10,.82) 30%,rgba(10,10,10,.80) 55%,rgba(10,10,10,.90) 75%,#0A0A0A 94%)}
}
h1{font-family:var(--jp);font-weight:700;font-size:clamp(28px,5.6vw,54px);line-height:1.5;letter-spacing:.005em;margin:28px 0 0;color:var(--fg)}
.lede{margin-top:22px;max-width:44em;font-size:15.5px;line-height:2;color:var(--body-fg)}
/* リードは段落が続く。行送り自体は残しつつ、段落と段落の間だけ詰める */
.lede+.lede,.lede-list+.lede{margin-top:9px}
/* 現場で直面すること。ヒーローは写真の上なので、印はピンクの短い罫にする */
.lede-list{list-style:none;margin-top:9px;max-width:44em}
.lede-list li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.95;color:var(--body-fg)}
/* 1px だと行の高さの端数でにじんで色が飛ぶので 2px にしている */
.lede-list li::before{content:"";position:absolute;left:2px;top:1em;width:10px;height:2px;background:var(--pink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* 狭い幅では折り返さず2つ並べる。均等幅にして文字は折らない */
@media(max-width:520px){
  .cta-row{flex-wrap:nowrap;gap:10px}
  .cta-row .btn{flex:1;padding:14px 8px;font-size:13.5px;text-align:center;white-space:nowrap}
}
.stats{display:grid;grid-template-columns:repeat(2,1fr);margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.featured{margin-top:30px}
.featured .ftl{font-size:11px;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.featured .colist{font-size:13px;color:var(--body-fg)}
.stats div{padding:20px 0 22px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{font-family:var(--disp);font-weight:900;font-size:clamp(36px,6.2vw,58px);line-height:.95;display:block;color:var(--fg);letter-spacing:-.01em}
.stats small{display:block;margin-top:12px;font-size:11px;letter-spacing:.12em;color:var(--muted)}
@media(max-width:640px){
  .stats{grid-template-columns:1fr 1fr}
  .stats div{border-bottom:1px solid var(--line);padding:20px 0}
  .stats div:nth-child(2n){border-right:0}
  .stats div:nth-last-child(-n+2){border-bottom:0}
}

section{padding:42px 0}
.sec-label{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.2em;color:var(--muted);display:block;margin-bottom:12px}
/* 見出しの下に色帯を敷いていたが、7セクション全部に出ると装飾が勝つ。
   ストライプは MAP 由来のブランド要素なので、区切り帯と運営の写真だけに残す */
h2{font-family:var(--jp);font-weight:700;font-size:clamp(27px,5vw,44px);line-height:1.34;letter-spacing:.02em;color:var(--fg)}
.lead{margin-top:20px;font-family:var(--jp);font-weight:700;font-size:clamp(17px,2.7vw,25px);line-height:1.75;color:var(--fg);max-width:25em}
.sec-body{margin-top:14px;max-width:42em;line-height:2.15}
h3.block{font-family:var(--jp);font-weight:700;font-size:18px;color:var(--fg);margin-top:32px;padding-bottom:11px;border-bottom:1px solid var(--line-2);display:flex;align-items:baseline;gap:14px}
h3.block em{font-style:normal;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--muted)}
/* h3.block のぶら下がり。開催の様子と過去登壇者は勉強会の中身なので、
   見出しを一段落として左に罫線を引き、親子関係を見た目にも出す */
.subsec{margin-top:6px;padding-left:26px;border-left:1px solid var(--line)}
h4.sub{font-family:var(--jp);font-weight:700;font-size:14.5px;color:var(--fg);margin-top:28px;
  display:flex;align-items:center;gap:12px}
h4.sub::before{content:"";flex:none;width:14px;height:2px;background:var(--pink)}
@media(max-width:640px){
  /* 狭い画面で罫線ぶんの 26px は効くので、印だけ残して段差は消す */
  .subsec{padding-left:0;border-left:0}
}

/* メンバーの声。等幅の箱に5枚並べると量産物に見えるので、罫線だけで2段に流す。
   段組みなら1件ごとの長さがそのまま残り、揃いすぎない */
/* メンバーの声。縦に積むとスマホで画面を占有するので、横に流すカードにする。
   1枚を主役に、隣を覗かせて「まだ続く」ことを見せる */
.voices-label{margin-top:30px;font-family:var(--jp);font-weight:700;font-size:11.5px;letter-spacing:.08em;color:var(--pink)}
.pains{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 42px - 44px)/3);gap:14px;
  margin-top:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.pains::-webkit-scrollbar{display:none}
.pains:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.pain{scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);padding:20px 20px 18px}
.pain p{font-size:15px;line-height:1.95;font-weight:500;color:var(--fg)}
/* 出典はカードの下端に寄せる。文の長さが違っても足元が揃う */
.pain cite{margin-top:auto;padding-top:14px}
/* 出典。勉強会アンケートの回答なので、どこの声かを添える。
   人物アイコンを頭に置いて、どのカードも同じ位置に目印があるようにする。
   匿名の声なので絵柄は全件共通 */
.pain cite{display:flex;align-items:center;gap:9px;font-style:normal;
  font-size:12px;color:var(--muted);letter-spacing:.02em;line-height:1.5}
.pain cite svg{width:26px;height:26px;padding:4px;flex:none;
  border:1px solid var(--line-2);color:var(--muted)}
@media(max-width:860px){.pains{grid-auto-columns:calc((100% - 28px - 38px)/2)}}
@media(max-width:560px){
  /* 1枚を主役にして、右隣を覗かせる */
  .pains{grid-auto-columns:82%}
  .pain{padding:18px 17px 16px}
}
@media(prefers-reduced-motion:reduce){.pains{scroll-behavior:auto}}

.elig{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;margin-bottom:34px}
.elig>div{background:var(--surface);padding:28px 28px 32px;border-top:3px solid var(--fg)}
.elig>div.no{border-top-color:var(--line-2)}
.elig h3{font-family:var(--jp);font-size:15px;letter-spacing:.04em;color:var(--fg);font-weight:700}
.elig ul{list-style:none;margin-top:18px}
.elig li{padding-left:22px;position:relative;margin-bottom:10px;line-height:1.85;font-size:14.5px}
.elig li::before{content:"＋";position:absolute;left:0;color:var(--yellow);font-size:12px}
.elig .no li::before{content:"－";color:var(--muted)}
.elig .fine{margin-top:18px;font-size:12.5px;color:var(--muted);line-height:1.9}
@media(max-width:720px){.elig{grid-template-columns:1fr;gap:18px}}


/* organizer */
/* 写真の高さを本文にそろえる。4/5 のままだと本文より 200px 以上低く、
   左下が空いてしまうため、列を伸ばして写真側で切る */
.org{display:grid;grid-template-columns:230px 1fr;gap:40px;margin-top:36px;align-items:start}
/* 本文の高さまで引き伸ばさない。4:5 のまま置く */
.org-photo{background:var(--surface);border:1px solid var(--line);position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:4/5}
.org-photo::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--stripe12)}
.org-photo span{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.16em;color:var(--muted)}
.org-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
/* 氏名とソーシャルは同じ行に。名前の下に並べると本文の前に段が増える */
.org-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px}
.org-name{font-family:var(--jp);font-weight:700;font-size:clamp(25px,4vw,32px);color:var(--fg);line-height:1.3}
.org-name b{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--muted);margin-left:16px}
.org-title{font-size:12.5px;letter-spacing:.05em;color:var(--muted);margin-top:14px;line-height:1.95}
.org-bio{margin-top:28px;font-size:14.5px;line-height:2.1}
/* 同じセクションに写真の色帯があるので、こちらは1色の罫線にとどめる */
.org-quote{margin-top:30px;padding:24px 26px;background:var(--surface);border-left:3px solid var(--pink);font-weight:700;font-size:clamp(15px,2.2vw,17px);line-height:2;color:var(--fg)}
.org-links{display:flex;flex-wrap:wrap;gap:8px}
/* サービスのロゴを並べるアイコンリンク。氏名の横に置くので 36px に落とす */
.org-links a{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line-2);
  color:var(--muted);text-decoration:none;transition:.2s}
.org-links a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.org-links svg{width:17px;height:17px;display:block}
.org-links .wm{font-family:var(--jp);font-weight:700;font-size:11px;letter-spacing:-.01em;line-height:1}
@media(max-width:760px){
  .org{grid-template-columns:1fr;gap:22px}
  /* スマホでは名刺くらいの大きさに留める。人物写真で画面を1枚ぶん使わない */
  .org-photo{max-width:150px;min-height:0;aspect-ratio:4/5}
  .org-photo img{object-position:50% 30%}
}

/* companies */
.co-wrap{background:var(--surface);border:1px solid var(--line);padding:26px 26px;margin-top:26px}
.colist{display:flex;flex-wrap:wrap;font-size:13px;line-height:1.55;color:var(--fg)}
.colist span{position:relative;padding:3px 18px 3px 0;margin-right:2px}
.colist span::after{content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%) rotate(20deg);width:1px;height:14px;background:var(--line-2)}
.colist span:last-child::after{display:none}
.co-note{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.95}

/* 勉強会。回ごとのバナー写真を頭に載せたカードで並べる。
   ── 回を1つ増やすときは <li class="ev-card"> を1つ足すだけでよい ──
   バナー画像は 1200×630 で /assets/events/ に置き、.ev-banner の中身を
   <span class="ev-ph">VOL.05</span> から <img> に差し替える（詳細は同ディレクトリの README）*/
.evs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.ev-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line)}
/* 次回だけ枠色で立たせる。DONE のカードと同じ重さにしない */
.ev-card.next{border-color:var(--yellow)}
/* 比率は Peatix / Luma のカバー画像（920×450）に合わせてある。
   ここを変えると告知バナーの端が切れるので、素材の比率が変わらない限り触らない */
.ev-banner{position:relative;aspect-ratio:920/450;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.ev-banner img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
/* バナー全面を申込ページへのリンクにする。画像を包まず上に敷くのは、
   直近1件のカードで画像が position:absolute になり、包むと当たり判定が潰れるため */
.ev-bl{position:absolute;inset:0;z-index:1}
.ev-banner:has(.ev-bl:hover) img{transform:scale(1.03)}
.ev-bl:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px}
@media(prefers-reduced-motion:reduce){.ev-banner img{transition:none}
  .ev-banner:has(.ev-bl:hover) img{transform:none}}
/* 写真が入っていないカードにだけ MAP 由来の色帯を敷く。
   バナーは自前でデザインされているので、その上に重ねると邪魔になる */
.ev-banner:not(:has(img))::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--stripe12)}
.ev-ph{font-family:var(--disp);font-weight:900;font-size:clamp(22px,3.6vw,32px);letter-spacing:.04em;color:var(--line-2)}
/* 開催前の回。文字数があるぶん小さく組む */
.ev-ph.soon{font-size:clamp(14px,1.9vw,19px);letter-spacing:.18em;color:var(--yellow)}
.ev-in{display:flex;flex-direction:column;flex:1;padding:15px 16px 17px}
.ev-top{display:flex;align-items:center;gap:10px}
.ev-k{font-size:11.5px;letter-spacing:.09em;color:var(--muted)}
.ev-s{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.08em;
  color:var(--muted);border:1px solid var(--line-2);padding:2px 9px;white-space:nowrap;line-height:1.6}
.ev-card.next .ev-s{color:#0A0A0A;background:var(--yellow);border-color:var(--yellow)}
.ev-d{font-family:var(--disp);font-weight:900;font-size:20px;letter-spacing:.02em;color:var(--fg);line-height:1.2;margin-top:9px}
.ev-d i{font-style:normal;font-family:var(--jp);font-size:11px;color:var(--muted);margin-left:6px}
/* 回ごとに項目名を揃える。ラベル幅を固定して、カードをまたいで頭が合うようにする */
.ev-meta{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.ev-meta>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline}
.ev-meta dt{font-size:10.5px;letter-spacing:.06em;color:var(--muted);line-height:1.7}
.ev-meta dd{font-size:14px;font-weight:700;line-height:1.65;color:var(--fg)}
/* 狭い幅ではラベル分の64pxが効いて「川上 宗一さ／ん」のように氏名が割れる。
   頭を揃える利点より読みにくさが勝つので、ラベルを上に逃がして本文に全幅を渡す */
@media(max-width:430px){
  .ev-meta>div{grid-template-columns:1fr;gap:1px}
}
.ev-note{font-size:12.5px;line-height:1.85;color:var(--muted);margin-top:7px}
/* リンクはカードの下端に揃える。テーマの長さが回ごとに違っても頭が揃う */
.ev-go{margin-top:auto;padding-top:14px}
.ev-go a{display:inline-block;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.06em;
  color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:.2s}
.ev-go a:hover{color:var(--fg);border-color:var(--fg)}
@media(max-width:860px){.evs{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.evs{grid-template-columns:1fr;gap:14px}}

/* トップの直近1件。バナーを横に置いて縦を使わない組みにする */
.evs-lead{display:block;margin-top:22px}
.evs-lead .ev-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
/* 行の高さは本文とバナーの高いほうで決まる。バナー側の下限は 920:450 の比率。
   ::before を同じセルに重ねて高さだけ作る（幅0でも padding-% は親幅で解決する） */
.evs-lead .ev-banner{aspect-ratio:auto;min-height:100%;grid-template-areas:"cell"}
.evs-lead .ev-banner::before{content:"";grid-area:cell;width:0;padding-top:48.9%}
.evs-lead .ev-banner .ev-ph{grid-area:cell}
.evs-lead .ev-banner img{position:absolute;inset:0}
.evs-lead .ev-in{padding:24px 26px 26px}
.evs-lead .ev-d{font-size:24px}
@media(max-width:760px){
  .evs-lead .ev-card{grid-template-columns:1fr}
  /* 縦積みでは高さを aspect-ratio で取れるので、上の重ね技を全部たたむ。
     ::before を残すと唯一のセルを占有し、静的配置に戻した img が
     暗黙行に落ちて overflow:hidden で消える */
  .evs-lead .ev-banner{aspect-ratio:920/450;min-height:0;grid-template-areas:none}
  .evs-lead .ev-banner::before{content:none}
  .evs-lead .ev-banner img{position:static}
  .evs-lead .ev-in{padding:15px 16px 17px}
  .evs-lead .ev-d{font-size:20px}
}

/* これまでの回。横に流す。カードの中身は上の .ev-card と同じ */
/* .evs の列指定を無効化しておく。残っていると1枚目だけ explicit 列に入り、
   横流しの幅計算が崩れる */
.evs.evs-track{grid-template-columns:none}
.evs-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px - 44px)/3);gap:16px;
  margin-top:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.evs-track::-webkit-scrollbar{display:none}
.evs-track:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.evs-track .ev-card{scroll-snap-align:start}
@media(max-width:860px){.evs-track{grid-auto-columns:calc((100% - 32px - 38px)/2)}}
@media(max-width:560px){.evs-track{grid-auto-columns:82%}}
@media(prefers-reduced-motion:reduce){.evs-track{scroll-behavior:auto}}

/* 横に流す列の操作系。ドットを中央、矢印を右に置いて列の下にまとめる。
   見出しの行に矢印を置くと、どの列を動かすのかが離れて分かりにくい */
.trackbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:16px}
.trackbar .tdots{grid-column:2}
.trackbar .cnav{grid-column:3;justify-self:end;margin-left:0}
/* 位置を示すドット。今いる1つだけ伸ばす */
.tdots{display:flex;justify-content:center;gap:7px}
.tdots button{width:18px;height:4px;padding:0;border:0;cursor:pointer;
  background:var(--line-2);transition:background .3s ease,width .3s ease}
.tdots button.on{width:30px;background:var(--fg)}
.tdots button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
/* 狭い画面では矢印を出さない（指で送れる）。ドットは残す */
@media(max-width:520px){.trackbar .cnav{display:none}}

/* 登壇者カード：写真 → 会社／氏名・肩書 → 登壇テーマ → Profile リンク */
/* カードの丈は中身ぶん。既定の stretch だと、1枚プロフィールを開いた時に
   隣の閉じたカードまで一緒に伸びて、そちらに大きな空きができる */
.speakers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px;align-items:start}
.sp{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.sp-photo{aspect-ratio:1/1;background:var(--surface-2);position:relative;display:grid;place-items:center;overflow:hidden}
.sp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sp-photo span{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--muted)}
.sp-body{padding:16px 15px 18px;display:flex;flex-direction:column;flex:1}
/* 社名と肩書は長さがまちまちで、そのままだと折り返しの行数でカードの丈がずれる。
   一番長いものに合わせて行数を予約し、どのカードも同じ高さに揃える。
   （ウィルソン・ラーニング ワールドワイド株式会社 が 2行、狭い画面では 3行） */
.sp .co{font-family:var(--jp);font-weight:700;font-size:13px;line-height:1.5;color:var(--fg);min-height:3em}
.sp .nm{font-family:var(--jp);font-weight:700;font-size:14px;line-height:1.45;color:var(--fg);margin-top:8px}
.sp .ro{font-size:10.5px;letter-spacing:.03em;color:var(--muted);margin-top:7px;line-height:1.65;min-height:1.65em}
/* 登壇回はタグとして扱う。本文ではなくラベルなので枠で囲って独立させる */
.sp .tp{display:inline-block;align-self:flex-start;margin-top:11px;padding:4px 9px;border:1px solid var(--line-2);
  font-size:10.5px;letter-spacing:.04em;line-height:1.5;color:var(--body-fg)}
.sp .profile{margin-top:auto;padding-top:16px}
.sp .profile a{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.05em;text-decoration:none;color:var(--fg)}
.sp .profile a:hover{color:var(--pink)}
/* 経歴つきのカードは <details>。カード全体を summary にしてどこを押しても開くようにする。
   マーカー消しは list-style と ::-webkit-details-marker の両方が要る（Safari 対策） */
.sp.has-bio{cursor:pointer}
.sp.has-bio>summary{display:flex;flex-direction:column;flex:1;list-style:none}
/* 開いたら summary は伸ばさない。列で一番背の高いカードに合わせて grid が
   全カードを引き伸ばすため、flex:1 のままだと余白を summary が吸って、
   「プロフィール －」と経歴の間に大きな空きができる */
.sp.has-bio[open]>summary,.sp.has-bio[open] .sp-body{flex:none}
.sp.has-bio>summary::-webkit-details-marker{display:none}
.sp.has-bio>summary:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.sp.has-bio .sp-body::after{content:"プロフィール ＋";display:block;margin-top:12px;font-size:10.5px;text-decoration:underline;text-underline-offset:3px;
  letter-spacing:.06em;color:var(--muted)}
.sp.has-bio[open] .sp-body::after{content:"プロフィール －"}
.sp.has-bio:hover .sp-body::after{color:var(--fg)}
.sp .bio{margin:0 13px;padding:12px 0 16px;border-top:1px solid var(--line-2);
  font-size:11px;line-height:1.85;color:var(--muted)}
.sp .bio p + p{margin-top:9px}
@media(max-width:760px){.speakers{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){
  .speakers{grid-template-columns:1fr 1fr;gap:12px}
  /* 幅が半分になるぶん、長い社名は3行・肩書は2行まで伸びる */
  .sp .co{min-height:4.5em}
  .sp .ro{min-height:3.3em}
  .sp-body{padding:14px 13px 16px}
}
/* 開催の様子。枚数が増えても縦に伸びないよう横スクロールにする。
   スナップ幅は grid-auto-columns 側で決まるので、figure を足すだけで増やせる */
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 42px - 44px)/3);gap:14px;
  margin-top:18px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.shots figure{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line)}
/* height 属性は CSS の高さとして効いてしまうため、明示的に auto へ戻して aspect-ratio を活かす */
.shots img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.shots figure{overflow:hidden}
.cnav{margin-left:auto;display:flex;gap:8px;align-self:center}
.cbtn{width:36px;height:36px;display:grid;place-items:center;padding:0;background:transparent;
  border:1px solid var(--line-2);color:var(--fg);cursor:pointer;transition:.2s}
.cbtn svg{width:18px;height:18px;display:block}
.cbtn:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cbtn:disabled{opacity:.28;cursor:default}
@media(max-width:760px){.shots{grid-auto-columns:calc((100% - 28px - 38px)/2)}}
@media(max-width:520px){.shots{grid-auto-columns:82%}}
@media(prefers-reduced-motion:reduce){.shots{scroll-behavior:auto}}
/* 関連コンテンツ。等幅カードを並べるのをやめ、写真と本文でブロックを組む */
.rel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:36px;align-items:start;margin-top:30px}
.rel-cast{margin-top:40px}
.rel-body .n{font-family:var(--jp);font-weight:700;font-size:12.5px;letter-spacing:.08em;color:var(--muted)}
.rel-logo{display:block;height:64px;width:auto;max-width:100%;object-fit:contain;object-position:left center;background:#fff;padding:12px 18px;margin-top:12px}
.rel-logo.talk{height:58px}
.rel-body p{margin-top:20px;font-size:14.5px;line-height:2.05}
.rel .fact{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.rel .fact dt{font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.rel .fact dd{margin-top:4px;font-size:14px;font-weight:500;color:var(--fg);line-height:1.3}
.rel .fact dd b{font-family:var(--disp);font-weight:900;font-size:22px;letter-spacing:-.01em;margin-right:2px}
.rel .go{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.rel .go a{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em;text-decoration:none;border:1px solid var(--line-2);color:var(--fg);padding:9px 18px;transition:.2s;line-height:1.2}
.rel .go a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* MAP。写真と説明を1つの箱に入れ、間に切れ目を作らない。
   写真の列は grid の stretch で本文の高さに合わせて伸びる（object-fit:cover で吸収） */
.rel-map{gap:0;background:var(--surface);border:1px solid var(--line);align-items:stretch}
.mapshow{position:relative;overflow:hidden;background:#000}
/* 高さは 3:2 の余白で作る。aspect-ratio だと中身が絶対配置だけのときに
   grid の stretch と解釈が割れる実装があり、高さ 0 に潰れることがある */
.mapshow::before{content:"";display:block;padding-top:66.667%}
.mapslides{position:absolute;inset:0}
/* 全部を重ねて置き、表示する1枚だけ不透明にする。
   1枚目には HTML の側で .on を付けてあるので、JS が動かなくても写真は出る */
.mapslides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .9s ease}
.mapslides img.on{opacity:1}
/* 写真の上に置く操作系。地色に関わらず写真の上なので、暗い半透明で固定する */
.mapnav{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;z-index:2}
.mapnav .cbtn{background:rgba(10,10,10,.5);backdrop-filter:blur(6px);border-color:rgba(255,255,255,.4);color:#fff}
.mapnav .cbtn:hover:not(:disabled){background:#fff;color:#0A0A0A;border-color:#fff}
.mapdots{position:absolute;left:16px;bottom:24px;display:flex;gap:6px;z-index:2}
.mapdots i{display:block;width:16px;height:3px;background:rgba(255,255,255,.4);transition:.35s ease}
.mapdots i.on{background:#fff;width:26px}
/* ポッドキャストは MAP と同じ組みだが、アイキャッチに文字が載っているので
   trimming が起きないよう 16:9 のまま。列は伸ばさず上端で揃える */
.rel-cast .mapshow{align-self:start;background:var(--surface-2)}
.rel-cast .mapshow::before{padding-top:56.25%}
.rel-cast .mapslides img{object-fit:contain}
/* アイキャッチは白地なので、白いドットだと消える。こちらだけ濃色にする */
.rel-cast .mapdots i{background:rgba(10,10,10,.3)}
.rel-cast .mapdots i.on{background:#0A0A0A}
.rel-map .rel-body{padding:32px 32px 30px;display:flex;flex-direction:column;align-items:flex-start}
/* flex の子は既定で列幅いっぱいに伸びる。ロゴは白地を敷いているので、
   伸ばすと本文幅ぶんの白い帯になってしまう。文字物だけ幅を戻す */
.rel-map .rel-body>p,.rel-map .rel-body>.rel-meta{align-self:stretch}
.rel-map .rel-body p{max-width:40em}
/* 実績とリンクはカードの下端に寄せる。本文の長さが変わっても足元が揃う */
.rel-map .rel-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 34px;margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
.rel-map .fact{margin-top:0;padding-top:0;border-top:0}
.rel-map .go{margin-top:0}
@media(max-width:860px){
  .rel{grid-template-columns:1fr;gap:26px}
  .rel-map{gap:0}
  .rel-cast{margin-top:30px}
}
@media(max-width:520px){
  .rel-map .rel-body{padding:24px 20px 22px}
  .mapdots{left:12px;bottom:20px}
  .mapdots i{width:11px}
  .mapdots i.on{width:18px}
}
@media(prefers-reduced-motion:reduce){.mapslides img{transition:none}}

/* FAQ。JS 無しで開閉できるよう <details>。マーカー消しは list-style と
   ::-webkit-details-marker の両方が要る（Safari 対策） */
.faq{margin-top:24px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;
  padding:17px 4px;font-family:var(--jp);font-weight:700;font-size:15px;line-height:1.75;
  color:var(--fg);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--disp);font-weight:900;font-size:13px;
  color:var(--pink);flex:none;line-height:2}
/* 開閉の印。右端に寄せる */
.faq summary::after{content:"＋";margin-left:auto;padding-left:16px;flex:none;
  font-size:14px;line-height:1.9;color:var(--muted)}
.faq details[open]>summary::after{content:"−"}
.faq summary:hover{color:var(--pink)}
.faq summary:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
/* 答えは flex にしない。中にリンクを置くと、それが別の flex アイテムになって
   文章が段に割れてしまう。印は絶対配置で置き、本文は素の文章のままにする */
.faq .a{position:relative;padding:0 4px 20px 27px;max-width:52em;
  font-size:14px;line-height:2.05;color:var(--body-fg)}
.faq .a::before{content:"A";position:absolute;left:4px;top:0;
  font-family:var(--disp);font-weight:900;font-size:13px;color:var(--muted);line-height:2.2}
.faq .a a{color:var(--fg);text-underline-offset:3px}
.faq-cta{margin-top:30px}
@media(max-width:520px){
  .faq summary{font-size:14.5px;gap:11px;padding:15px 2px}
  .faq .a{padding:0 2px 18px 22px;font-size:13.5px}
  .faq .a::before{left:2px}
}

/* 参加企業の M&A ニュース（リリース一覧） */
.news{list-style:none;margin-top:20px;border-top:1px solid var(--line)}
.news li{display:grid;grid-template-columns:118px 1fr 52px;gap:20px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line)}
.news time{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.news .txt{min-width:0}
.news .co{display:block;font-weight:700;font-size:13px;color:var(--fg);line-height:1.5}
.news .deal{display:block;margin-top:4px;font-size:14px;color:var(--body-fg);line-height:1.7}
.news .ir{display:grid;place-items:center;justify-self:end;width:52px;height:52px;border:1px solid var(--line-2);color:var(--fg);transition:.2s}
.news .ir svg{width:24px;height:24px}
.news .ir:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* 公開1か月以内の記事に付く印。日付から JS が判定するため、手で付け外しする必要はない */
.news .badge{display:inline-block;margin-left:8px;padding:2px 8px;background:var(--grad-attention);color:#fff;font-family:var(--disp);font-weight:900;font-size:10px;letter-spacing:.1em;vertical-align:2px}
/* 見出しのすぐ下に置く一覧リンク。中身を見る前に「他にもある」と分かるようにする */
.sec-more{margin-top:12px}
.sec-more a{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--fg);
  text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:.2s}
.sec-more a::after{content:"›";font-family:var(--disp);font-weight:700;font-size:15px;line-height:1}
.sec-more a:hover{border-color:var(--fg)}
.sec-more span{color:var(--muted);font-size:12px}
.news-more{margin-top:18px}
.news-more a{display:inline-block;font-size:13.5px;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:.2s}
.news-more a:hover{border-color:var(--fg)}
.news-more span{color:var(--muted);font-size:12.5px}
@media(max-width:700px){
  .news li{grid-template-columns:1fr 44px;gap:6px 14px;padding:16px 2px}
  .news time{grid-column:1}
  .news .ir{grid-column:2;grid-row:1 / span 2;align-self:center;width:44px;height:44px}
  .news .txt{grid-column:1}
}
/* モバイル用メニュー。JS 無しで開閉できるよう <details> を使い、
   リンクを押したときだけ閉じる処理をスクリプト末尾に足している */
.mnav{display:none;position:relative}
.mnav>summary{list-style:none;width:44px;height:44px;display:grid;align-content:center;gap:5px;justify-items:center;cursor:pointer;border:1px solid var(--line-2)}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary span{display:block;width:20px;height:2px;background:var(--fg);transition:.2s}
.mnav[open]>summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav[open]>summary span:nth-child(2){opacity:0}
.mnav[open]>summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav-panel{position:fixed;top:66px;right:0;width:min(260px,78vw);background:var(--nav-bg);backdrop-filter:blur(12px);border-left:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;padding:6px 0}
.mnav-panel a{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--fg);text-decoration:none;padding:14px 22px}
.mnav-panel a:hover{background:var(--surface)}
@media(max-width:900px){.mnav{display:block}}

.gitem{scroll-snap-align:start}

/* 食事会の3形式。箱で囲うと説明が長く見えるので、アイコンと一行だけ横に並べる */
/* 見出しの罫線のすぐ下に各項目の上罫線が来ると線が二重に見えるので、
   横罫線はやめて列と列のあいだを縦罫線で割る */
.fmt{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px}
.fmt li{display:flex;gap:13px;align-items:flex-start;padding:2px 30px 2px 0}
.fmt li+li{border-left:1px solid var(--line);padding-left:30px}
.fmt li:last-child{padding-right:0}
.fmt svg{width:22px;height:22px;flex:none;margin-top:2px;color:var(--pink)}
.fmt b{display:block;font-family:var(--jp);font-weight:700;font-size:14.5px;line-height:1.5;color:var(--fg)}
.fmt span{display:block;margin-top:5px;font-size:12.5px;line-height:1.7;color:var(--muted)}
@media(max-width:820px){
  /* 縦積みでは縦罫線が意味を成さないので横罫線に戻す。
     1件目には引かない（見出しの罫線と二重になるため） */
  .fmt{grid-template-columns:1fr}
  .fmt li{padding:16px 0}
  .fmt li:first-child{padding-top:0}
  .fmt li+li{border-left:0;padding-left:0;border-top:1px solid var(--line)}
}

/* h3.block の下に置く小見出し。.lead を流用すると 25px になって節の見出しに見える */
.luma-lead{margin-top:26px;font-family:var(--jp);font-weight:700;font-size:15px;color:var(--fg);line-height:1.7}
.block-body{margin-top:18px}
.luma{margin-top:14px;border:1px solid var(--line);background:var(--surface);padding:8px}
.luma iframe{display:block;width:100%;height:440px;border:0;background:var(--surface)}
.luma-cap{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:16px 12px 8px;font-size:12.5px;color:var(--muted)}
.luma-cap a{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.05em;color:var(--fg);text-decoration:none}

/* ロゴはブランド規定に従い、地色に関わらず白地の上に置く */
/* 説明文込みのロゴ（.n ラベルを持たないカード）。ラベル1行ぶん下げて隣のカードと頭を揃える */

.join{background:var(--surface-2);padding:0 0 66px;margin-top:0}
.join .band{height:5px;background:var(--stripe12)}
.join .wrap{padding-top:62px}
.join h2{max-width:20em}
/* 40em だと3行になる。48em で2行に収まり、これ以上広げても行数は変わらない
   （幅いっぱいでも2行のまま1行75字になるだけ）ので、ここで止める */
.join p{margin-top:26px;max-width:48em;line-height:2.15;font-size:15px}
.join .btn{margin-top:36px}

footer{padding:36px 0;font-size:12.5px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
footer .fbrand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:900;font-size:16px;letter-spacing:.06em;color:var(--fg)}
footer .flinks{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em}
footer .flinks a{text-decoration:none}
footer .flinks a:hover{color:var(--fg)}

/* ── ライトテーマ ──
   配色は MAP 資料用システム（白背景 / 黒見出し / #1A1A1A 本文）に準拠。
   data-theme が無ければ OS 設定に追従、あれば手動指定が勝つ。 */
:root[data-theme="light"]{
    --bg:#FFFFFF;
    --surface:#F4F4F4;
    --surface-2:#EDEDED;
    --line:#E2E2E2;
    --line-2:#C4C4C4;
    --fg:#000000;
    --body-fg:#1A1A1A;
    --muted:#6B6B6B;
    --pink:#C81C5C;
    --nav-bg:rgba(255,255,255,.9);
    --float-shadow:0 8px 26px rgba(0,0,0,.14);
  color-scheme:light;
}
html[data-theme="light"],html[data-theme="light"] body,html[data-theme="light"] .page{background:#FFFFFF}
html[data-theme="light"] .mark{outline:none}
/* 白基調では文字が濃色になるため、ヒーローの暗幕を白系に差し替える */
html[data-theme="light"] header::after{background:
  linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,.94) 38%,rgba(255,255,255,.62) 72%,rgba(255,255,255,.42) 100%),
  linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 26%,#FFFFFF 100%)}
@media(max-width:760px){html[data-theme="light"] header::after{background:
    linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.84) 30%,rgba(255,255,255,.82) 55%,rgba(255,255,255,.92) 75%,#FFFFFF 94%)}}
:root[data-theme="dark"]{color-scheme:dark}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#FFFFFF;
    --surface:#F4F4F4;
    --surface-2:#EDEDED;
    --line:#E2E2E2;
    --line-2:#C4C4C4;
    --fg:#000000;
    --body-fg:#1A1A1A;
    --muted:#6B6B6B;
    --pink:#C81C5C;
    --nav-bg:rgba(255,255,255,.9);
    --float-shadow:0 8px 26px rgba(0,0,0,.14);
  }
  html:not([data-theme="dark"]),
  html:not([data-theme="dark"]) body,
  html:not([data-theme="dark"]) .page{background:#FFFFFF}
  html:not([data-theme="dark"]) .mark{outline:none}
  html:not([data-theme="dark"]) header::after{background:
  linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,.94) 38%,rgba(255,255,255,.62) 72%,rgba(255,255,255,.42) 100%),
  linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 26%,#FFFFFF 100%)}
}
@media (prefers-color-scheme: light) and (max-width:760px){
  html:not([data-theme="dark"]) header::after{background:
    linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.84) 30%,rgba(255,255,255,.82) 55%,rgba(255,255,255,.92) 75%,#FFFFFF 94%)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .redact i{opacity:1;transition:none}
  .redact::after{transform:scaleX(0);transition:none}
}