/*
 * Ignition Compass（page-ignition-compass.php）専用スタイル。
 * クライアント納品の compass.css を元にしている。差分移植のため構成は納品版のまま。
 * 画像は ../img/ を参照。Galano Grotesque は末尾で本サイト同梱のフォントを読み込む
 */
:root{
  --ink:#111111; --ink-2:#555555; --ink-3:#9A9A9A;
  --paper:#FFFFFF; --paper-2:#F3F5FB; --line:#E5E5E5; --line-2:#CFCFCF;
  --blue:#003CB4;--accent-2:#538FD3; --blue-deep:#111111;
  --current:#003CB4; --current-bg:#FBF1EA;
  --tech-bg:rgba(0,60,179,.2); --tech-fg:#003CB3;
  --reg-bg:rgba(0,125,50,.2); --reg-fg:#007D32;
  --beh-bg:rgba(150,37,0,.2); --beh-fg:#962500;
  --str-bg:rgba(137,137,0,.2); --str-fg:#898900;
  --radius:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--paper);line-height:1.85;font-size:15.5px;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.wrap{max-width:740px;margin:0 auto;padding:0 22px}
.wrap-wide{max-width:1140px;margin:0 auto;padding:0 22px}
.narrow{max-width:none}
.mono{font-family:'IBM Plex Mono',monospace}
/* header */
header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:50}
.hd{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0}
.hd .logo{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.hd .logo b{color:var(--blue)}
.hd .by{font-size:11.5px;color:var(--ink-3)}
/* hero */
.hero{padding:44px 0 44px;min-height:48vh;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.25) 100%),url('../img/hero-bg.jpg') center/cover no-repeat}
.hero .wrap{width:100%}
.conduit{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.conduit::after{content:"";position:absolute;top:0;left:-15%;width:15%;height:2px;background:linear-gradient(90deg,transparent,var(--current),transparent);animation:flow 4.5s linear infinite}
@keyframes flow{to{left:110%}}
@media (prefers-reduced-motion:reduce){.conduit::after{animation:none;left:20%}}
.hero h1{font-family:'Noto Sans JP',sans-serif;font-weight:900;font-size:clamp(28px,4.4vw,44px);line-height:1.62;letter-spacing:.06em}
.hero h1 .u{display:inline-block}
.hero .sub{margin-top:44px;color:var(--ink-2)}
.hero .sub b{color:var(--ink);font-weight:700}
/* sections */
section{padding:66px 0;border-top:1px solid var(--line)}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:clamp(26px,3.6vw,36px);letter-spacing:.04em;color:var(--current);margin-bottom:6px}
.eyebrow::after{content:"";display:block;width:100%;height:1px;background:var(--line);margin-top:18px}
h2{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:clamp(19px,2.6vw,25px);line-height:1.6;margin-bottom:24px;letter-spacing:.04em}
.letter p{margin-bottom:1.4em;color:var(--ink-2)}
.letter p b{color:var(--ink)}
/* circuit */
.circuit{background:var(--paper-2)}
.circ-wrap{max-width:100%;margin:48px auto 52px}
.circ{width:100%;height:auto;display:block;max-width:820px;margin:0 auto}
@keyframes circflow{to{stroke-dashoffset:-48}}
@media (prefers-reduced-motion:reduce){}
.circ text{font-family:'Noto Sans JP',sans-serif}
.circ .mono{font-family:'IBM Plex Mono',monospace}
.circ .v-lab{font-size:24px;font-weight:600;fill:var(--ink)}
.circ .i-lab{font-size:17px;font-weight:600;fill:var(--current)}
.circ .r-group{font-size:15px;fill:var(--ink)}
.circ .hit{fill:transparent;cursor:pointer}
.rnode:hover .zig{stroke-width:3}
@media(max-width:480px){}
.vri{display:grid;grid-template-columns:1fr;gap:16px;margin:30px 0}
@media(max-width:760px){.vri{grid-template-columns:1fr}}
.vri .cell{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.vri .sym{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;color:var(--blue);display:flex;align-items:baseline;gap:9px}
.vri .sym small{font-size:12.5px;color:var(--ink-3);font-weight:500;font-family:'Noto Sans JP',sans-serif;flex:1;min-width:0;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.vri h3{font-size:16px;margin:12px 0 12px}
.vri .story{background:var(--paper);border:1px solid var(--blue);border-radius:8px;padding:16px 20px;margin-top:4px}
.vri .story p{font-size:13px;line-height:2.05;letter-spacing:.01em;color:var(--ink-2)}
.vri .inote{font-size:10.5px;color:var(--ink-3);margin:4px 0 2px;line-height:1.7}
.formula{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:18px;color:var(--ink-3);margin:6px 0 2px}
.formula b{color:var(--current)}
/* matrix */
.cswitch{display:flex;gap:8px;margin:20px 0 4px;flex-wrap:wrap}
.cbtn{font-family:inherit;font-size:13px;font-weight:700;padding:9px 18px;border:1.5px solid var(--line-2);background:var(--paper);border-radius:999px;cursor:pointer;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.cbtn[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cbtn .soon-tag{font-size:9.5px;font-weight:500;border:1px solid currentColor;border-radius:3px;padding:1px 5px;opacity:.75}
.c-empty{border:1px dashed var(--line-2);border-radius:6px;padding:46px 22px;text-align:center;margin-top:16px}
.c-empty .cname{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--ink-3);display:block;margin-bottom:12px}
.c-empty p{font-size:13.5px;color:var(--ink-2);max-width:480px;margin:0 auto;line-height:2}
.readnav{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;margin:28px 0 0}
.readnav-label{color:var(--ink-3)}
.readnav .sep{color:var(--line-2)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin:16px 0 0}
.legend .hint{margin-left:auto;color:var(--ink-3)}
@media(max-width:640px){.legend .hint{margin-left:0}}
.legend .sw{display:inline-block;width:22px;height:13px;border:1.5px solid var(--line-2);border-radius:4px;vertical-align:-2px;margin-right:6px}
.legend .sw.dash{border-style:dashed;border-color:var(--current)}
.row-block{border:1px solid var(--line);border-radius:4px;margin:26px 0;overflow:hidden;background:var(--paper)}
.row-hd{padding:20px 22px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.row-hd h3{font-size:19px;font-weight:700}
.row-hd .vnote{font-size:12.5px;color:var(--ink-2);margin-top:5px}
.row-hd .vnote b{color:var(--current);font-weight:700;margin-right:6px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--paper-2);position:relative}
.tab{flex:1;padding:11px 4px 9px;text-align:center;background:none;border:none;cursor:pointer;font-family:inherit;border-bottom:2.5px solid transparent;color:var(--ink-3)}
.tab .en{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;display:block}
.tab .jp{font-size:10.5px;display:block;margin-top:1px}
.tab .n{font-size:10.5px;color:var(--ink-3)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue);background:var(--paper)}
.tab:hover{color:var(--ink)}
.tabs .nowline{position:absolute;top:8px;bottom:8px;left:50%;width:2px;background:var(--current);border-radius:2px}
.hypo-note{display:none;align-items:center;gap:10px;padding:9px 22px;font-size:11.5px;color:var(--current);background:var(--current-bg);border-bottom:1px solid var(--line)}
.hypo-note::before,.hypo-note::after{content:"";flex:1;height:1px;background:var(--current);opacity:.5}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px 22px 24px}
@media(max-width:760px){.cards{grid-template-columns:1fr;padding:16px 14px 18px}}
.card{border:1.5px solid var(--line-2);border-radius:var(--radius);padding:17px 17px 13px;background:var(--paper);display:flex;flex-direction:column}
.card.hypo{border-style:dashed;border-color:#E7B394}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}
.badges{display:flex;gap:5px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:5px;border:none;cursor:pointer;font-family:inherit}
.badge.tech{background:var(--tech-bg);color:var(--tech-fg)}
.badge.reg{background:var(--reg-bg);color:var(--reg-fg)}
.badge.beh{background:var(--beh-bg);color:var(--beh-fg)}
.badge.str{background:var(--str-bg);color:var(--str-fg)}
.badge.hypo-tag{background:none;border:1px solid var(--line-2);color:var(--ink-2);cursor:default}
.card .time{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.card h4{font-size:15.5px;font-weight:700;line-height:1.6}
.card .narr{font-size:12.8px;color:var(--ink-2);line-height:1.8;margin-top:5px}
.ideas{margin-top:11px;padding:10px 13px;background:var(--paper-2);border-radius:6px}
.ideas-t{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--ink-3);display:block;margin-bottom:4px}
.ideas ul{margin:0;padding-left:1.15em}
.ideas li{font-size:12px;color:var(--ink-2);line-height:1.75}
.card-cta{display:block;text-align:center;margin-top:10px;padding:9px 8px;border:1px solid var(--ink);color:var(--ink);font-size:12px;font-weight:700;text-decoration:none;border-radius:3px}
.card-cta:hover{background:var(--ink);color:#fff}
.card .foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line);margin-top:13px;font-size:11.5px}
.card .drv{color:var(--ink-2)}
.srcbtn{background:none;border:none;color:var(--blue);cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:500;padding:0;white-space:nowrap}
.srcbtn::after{content:" ▾"}
.card.open .srcbtn::after{content:" ▴"}
.detail{display:none;margin-top:12px;background:var(--paper-2);border-radius:8px;padding:13px 14px;font-size:12.5px;line-height:1.85}
.card.open .detail{display:block}
.detail h5{font-size:12px;color:var(--ink);margin:9px 0 3px}
.detail h5:first-child{margin-top:0}
.detail p{color:var(--ink-2)}
.detail a{font-size:12px;display:block;overflow-wrap:anywhere}
.detail .tier{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-3);margin-right:4px}
.excerpt-note{padding:0 22px 18px;font-size:11.5px;color:var(--ink-3)}
/* matrix table */
.mtx{overflow-x:auto;border:1px solid var(--line);border-radius:6px;margin-top:44px;background:var(--paper)}
.mtx{width:min(900px,calc(100vw - 40px));position:relative;left:50%;transform:translateX(-50%)}
.mtx-grid{display:grid;grid-template-columns:172px repeat(4,minmax(178px,1fr));min-width:884px}
.mtx-grid>div{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:10px 10px 12px;min-width:0}
.mtx-h{background:var(--paper-2);padding:9px 10px!important;border-bottom:1.5px solid var(--line-2)!important}
.mtx-h .en{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;display:block}
.mtx-h .jp{font-size:10px;color:var(--ink-3)}
.state-soon{border-left:2px solid var(--current)!important}
.hypoflag{display:block;font-size:9px;color:var(--current);margin-top:2px}
.rowhd{position:sticky;left:0;background:var(--paper);z-index:2;border-right:1px solid var(--line-2)!important}
.rowhd h3{font-size:14.5px;font-weight:700;line-height:1.5}
.rowhd .vnote{font-size:10.5px;color:var(--ink-2);margin-top:5px;line-height:1.65}
.rowhd .ex{display:inline-block;font-size:9.5px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:3px;padding:1px 5px;margin-top:6px}
.mini{display:block;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line-2);border-radius:6px;padding:8px 9px;margin-bottom:8px;cursor:pointer;font-family:inherit}
.mini:hover{border-color:var(--ink)}
.mini.hypo{border-style:dashed;border-color:var(--accent-2)}
.mini-t{font-size:12px;font-weight:700;line-height:1.55;display:block;color:var(--ink)}
.mini-m{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center;margin-top:5px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:2px;display:inline-block}
.dot.tech{background:var(--tech-fg)}.dot.reg{background:var(--reg-fg)}.dot.beh{background:var(--beh-fg)}.dot.str{background:var(--str-fg)}
.mtx-empty{font-size:11px;color:var(--ink-3)}
@media(max-width:760px){
 .mtx{overflow-x:visible;width:auto!important;left:auto!important;transform:none!important;position:static!important}
 .mtx-grid{display:block;min-width:0}
 .mtx-grid>.mtx-h{display:none}
 .mtx-grid>div{border-right:none}
 .mtx-grid>.rowhd{position:static!important;border-right:none!important;background:var(--paper-2);border-top:2px solid var(--line-2);padding:14px 14px 10px}
 .mtx-grid>.rowhd h3{font-size:16px}
 .mtx-grid>.rowhd .vnote{font-size:12px}
 .mtx-grid>.state-already,.mtx-grid>.state-now,.mtx-grid>.state-soon,.mtx-grid>.state-horizon{padding:2px 14px 10px}
 .mtx-grid>.state-already::before,.mtx-grid>.state-now::before,.mtx-grid>.state-soon::before,.mtx-grid>.state-horizon::before{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--ink-3);margin:10px 0 6px}
 .mtx-grid>.state-already::before{content:"ALREADY"}
 .mtx-grid>.state-now::before{content:"NOW"}
 .mtx-grid>.state-horizon::before{content:"HORIZON"}
 .mtx-grid>.state-soon{border-left:none!important;border-top:2px solid var(--current)!important}
 .mtx-grid>.state-soon::before{content:"SOON"}
 .mtx-grid>[class^="state-"]:has(>.mtx-empty){display:none}
 .mini{width:100%}
}
.crit-link{background:none;border:none;color:var(--blue);text-decoration:underline;cursor:pointer;font-family:inherit;font-size:12.5px;padding:0}
.crit h5{font-size:13px;margin:14px 0 4px}
.crit p,.crit li{font-size:13px;color:var(--ink-2);line-height:1.9}
.crit ol{padding-left:1.4em}
.crit .h4x{font-size:16.5px;font-weight:700;margin-bottom:6px}
.rt{border:1px solid var(--line);border-radius:8px;padding:13px 14px;margin-top:10px}
.rt.rt-focus{border-color:var(--ink)}
.rt .rt-def{font-weight:500;color:var(--ink);margin:7px 0 4px}
.rt p{margin-bottom:3px}
.axis{display:block;font-size:10px;color:var(--ink-2);font-weight:500;line-height:1.8}
.badge.sm{font-size:9.5px;padding:2px 6px;border-radius:4px;cursor:default;font-weight:700}
/* modal */
.modal{position:fixed;inset:0;background:rgba(17,17,17,.45);display:none;z-index:100;overflow-y:auto;padding:16px}
.modal.open{display:block}
.modal-inner{background:var(--paper);max-width:580px;border-radius:8px;padding:22px;margin:5vh auto;position:relative}
.modal-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:22px;color:var(--ink-3);cursor:pointer;line-height:1;padding:6px}
.modal-inner .card{border:none;padding:0}
.excos{margin-top:9px;padding:9px 13px;border:1px solid var(--line);border-radius:6px}
.excos p{font-size:12.5px;font-weight:500;margin-top:2px;line-height:1.7}
/* questions */
.qs{counter-reset:q}
.q-item{border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:64px 1fr;gap:14px}
.q-item:last-of-type{border-bottom:1px solid var(--line)}
.q-item .no{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;color:var(--line-2)}
.q-item h3{font-size:17px;font-weight:700;line-height:1.6}
.q-item p{font-size:13.5px;color:var(--ink-2);margin-top:4px}
#events{margin-top:34px}
.evt{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding:18px 2px}
.evt:last-child{border-bottom:1px solid var(--line)}
.evt .dt{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-2)}
.evt h3{font-size:15.5px;font-weight:700;line-height:1.6}
.evt h3 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.evt h3 a:hover{border-color:var(--ink)}
.evt .pl{font-size:12px;color:var(--ink-3);margin-top:3px}
.evt .st{font-size:11px;font-weight:700;border:1px solid var(--ink);border-radius:999px;padding:3px 11px;white-space:nowrap}
.evt .st.soon{border-color:var(--current);color:var(--current)}
@media(max-width:640px){.evt{grid-template-columns:1fr;gap:5px}}
.cta{display:inline-block;margin-top:12px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:16px 28px;border-radius:2px;letter-spacing:.03em;text-decoration:none;line-height:1.6}
.cta:hover{background:#333}
/* footer */
#eventsSection{padding-bottom:22px}
footer{padding:14px 0 50px;font-size:12.5px;color:var(--ink-3)}
.f-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.f-top .upd{font-family:'IBM Plex Mono',monospace;font-size:11.5px}
footer a{color:var(--ink-2);margin-right:16px}
@media(max-width:430px){
  .tab .en{font-size:11.5px}
  .tab .jp{font-size:9.5px}
  .hero h1{letter-spacing:.03em}
  .q-item{grid-template-columns:44px 1fr}
  .q-item .no{font-size:20px}
}
.mocknote{background:var(--current-bg);border:1px solid #F2C9AE;border-radius:8px;padding:9px 14px;font-size:11.5px;color:#8A4A22;margin:18px auto 0;max-width:1016px}
/* 英語ヒーロー: フレーズ単位固定を解き、デバイス幅に応じた語単位の折返しにする */
.hero h1.flow .u{display:inline}

/* --- 本番ヘッダー --- */
.ic-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.ic-hwrap{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1100px;margin:0 auto;padding:0 20px;height:54px}
.ic-logo{display:flex;align-items:center;text-decoration:none}
.ic-logo img{height:22px;width:auto;display:block}
.ic-lang{display:inline-flex;border:1px solid var(--line-2);border-radius:7px;overflow:hidden}
.ic-lang a{padding:6px 13px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--ink-2);text-decoration:none;line-height:1;letter-spacing:.03em}
.ic-lang a+a{border-left:1px solid var(--line-2)}
.ic-lang a.on{background:var(--current);color:#fff}
.ic-lang a:not(.on):hover{background:var(--paper-2)}
@media(max-width:760px){.ic-hwrap{height:48px;padding:0 14px}.ic-logo img{height:19px}.ic-lang a{padding:6px 11px}}

/* --- Galano Grotesque（本サイト同梱。英語ページの見出しに使う。design-tokens.json の en_heading） --- */
@font-face{font-family:'GalanoGrotesque-SemiBold';font-display:swap;src:url('../../../frontend/dist/fonts/galano_grotesque/3954FF_12_0.woff2') format('woff2'),url('../../../frontend/dist/fonts/galano_grotesque/3954FF_12_0.woff') format('woff')}
@font-face{font-family:'GalanoGrotesque-Medium';font-display:swap;src:url('../../../frontend/dist/fonts/galano_grotesque/3954FF_F_0.woff2') format('woff2'),url('../../../frontend/dist/fonts/galano_grotesque/3954FF_F_0.woff') format('woff')}
:lang(en) .hero h1,:lang(en) h2{font-family:'GalanoGrotesque-SemiBold','Inter',sans-serif;font-weight:600;letter-spacing:.01em}
:lang(en) .hero h1{line-height:1.3}
:lang(en) .vri h3,:lang(en) .q-item h3,:lang(en) .evt h3,:lang(en) .rowhd h3{font-family:'GalanoGrotesque-Medium','Inter',sans-serif;font-weight:500}