/* =====================================================================
   JDA Design System : Institutional Editorial v2
   Direction A Sentinel refined. Authority via serif display
   (Noto Serif JP + Newsreader), restrained royal-blue accent,
   editorial hairlines, disciplined whitespace.
   ===================================================================== */

/* ---- Tokens ---- */
:root{
  --paper:#ffffff;        /* primary ground */
  --paper-2:#f4f6fb;      /* cool ivory section */
  --paper-3:#eaeef7;      /* soft blue panel */
  --card:#ffffff;         /* card surface */
  --ink:#0a1230;          /* deepened navy ink (headings) */
  --ink-2:#141a40;        /* secondary heading tone */
  --navy:#1b2660;
  --navy-ink:#242478;     /* brand */
  --navy-deep:#0d1232;    /* dark sections / footer / CTA */
  --blue:#2c50e0;         /* royal link/accent */
  --blue-bright:#3a5cf5;
  --sky:#6f88ff;
  --text:#2f3656;         /* body text (deeper slate) */
  --mute:#6a7393;         /* muted slate */
  --accent:#2c50e0;       /* single accent = JDA royal blue */
  --accent-soft:#e7edfd;
  --line:#e2e7f1;         /* primary hairline */
  --line-2:#cdd4e4;       /* stronger hairline */
  --line-3:#1a2050;       /* on-dark hairline */
  --green:#1f9d6b;

  /* Accent pop : 真鍮ゴールド。認証・権威の差し色。青を主役に保ち一点で使う */
  --seal:#c8901f;        /* vivid : シール/マーク/暗面/大字。面に載せる文字は濃紺 navy-ink */
  --seal-ink:#8f6410;    /* text-safe : 白地の文字・リンク・数値（AA 5.3） */
  --seal-soft:#fbf3e0;   /* tint : バッジ/帯の淡背景。本文は navy/text を使う */

  /* Form / state tokens（第6章 Part 4）: コントラストは node 実測で確定 */
  --line-field:#7e87a6;  /* 入力欄の通常時罫線 : 白/淡地で 3:1 を満たすヘアライン（WCAG 1.4.11、白3.56 淡3.29） */
  --text-soft:#5b637f;   /* ヘルパー/任意/カウンタ文字 : --card 5.94 / --paper-2 5.49 / --danger-soft 5.06 で 4.5:1 */
  --danger:#c0341d;      /* エラー : 罫線/文言/アイコン。白5.60 淡地5.18。赤単独に頼らず形状+文言を併用 */
  --danger-soft:#fbe9e6; /* エラーの淡背景/フォーカス輪郭。面のみに使い、文字は --danger か --ink */
  --green-soft:#eef7f2;  /* 成功バナーの淡背景。本文は --ink（--green は罫線3:1のみ） */
  --r-check:5px;         /* チェックボックスの角丸。ラジオは正円(50%)で形状区別 */

  /* Display serif pair (authority) + clean sans body (readability) */
  --ff-display-jp:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-display-latin:"Newsreader","Source Serif 4",Georgia,serif;
  --ff-display:var(--ff-display-jp);
  --ff-jp:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
  --ff-body:"Noto Sans JP","Inter",sans-serif;
  --ff-latin:"Inter","Newsreader",sans-serif;
  --ff-label:"Inter","Noto Sans JP",sans-serif; /* ラベル/キッカー : 欧文=Inter、和文=Noto Sans JP に振り分け */
  --ff-num:"Newsreader","Inter",Georgia,serif;
  --ff-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;

  --ease:cubic-bezier(0.2,0.8,0.2,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur:.5s;
  --space:clamp(5.5rem,4.5rem + 5vw,10rem);
  --space-sm:clamp(3.5rem,3rem + 2vw,5.5rem);

  /* Fluid spacing ladder : 全コンポーネントが参照する単一スケール（決め打ち値を置かない） */
  --space-3xs:0.25rem;   /* 4px  : 極小の隙間 */
  --space-2xs:0.5rem;    /* 8px  : アイコンと文字 */
  --space-xs:0.75rem;    /* 12px : 小要素間 */
  --space-s:1rem;        /* 16px : 標準の隙間 */
  --space-m:1.5rem;      /* 24px : カード列・グループ間 */
  --space-l:clamp(2rem,1.6rem + 1.2vw,2.75rem);   /* 32-44px : パネル内余白 */
  --space-xl:clamp(2.5rem,1.8rem + 2.5vw,4rem);   /* 40-64px : 大きめの間 */
  --space-2xl:var(--space-sm);   /* 56-88px  : セクション小 */
  --space-3xl:var(--space);      /* 88-160px : セクション */
  --gutter:clamp(2.5rem,1.5rem + 4vw,6rem);       /* 40-96px : カラム間ガター */

  --maxw:1240px;
  --maxw-text:44rem;
  --pad:clamp(1.5rem,1rem + 3.5vw,4.5rem);
  --r:14px;       /* panel radius */
  --r-sm:10px;
  --pill:999px;
  --header-h:86px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  /* 本文はフォント本来の字詰め（全角約物の標準アキ）を尊重。palt/calt は使わない。
     見出しの約物詰め（palt）は jda-web.css の集約ルールで個別に適用する。 */
  background:var(--paper);
  color:var(--text);
  line-height:1.85;
  font-size:16.5px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  letter-spacing:0.02em;
  overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.grain{display:none}
.page{position:relative;z-index:2}

/* ---- Institutional top accent bar ---- */
.top-rule{height:3px;background:linear-gradient(90deg,var(--navy-ink) 0%,var(--accent) 50%,var(--navy-ink) 100%);position:relative;z-index:60}

/* ---- Type helpers ---- */
.kicker{font-family:var(--ff-label);font-size:0.72rem;letter-spacing:0.22em;color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:0.8rem;text-transform:uppercase}
.kicker::before{content:"";width:28px;height:1px;background:var(--accent)}
.display{font-family:var(--ff-display);font-weight:600;line-height:1.22;letter-spacing:0.005em;color:var(--ink)}
.latin{font-family:var(--ff-latin);font-feature-settings:"tnum" 1,"lnum" 1}
.num-serif{font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1,"ss01" 1}
.accent{color:var(--accent)}

/* ---- Buttons (institutional pill, sharper feedback) ---- */
.btn{display:inline-flex;align-items:center;gap:0.65rem;font-family:var(--ff-body);font-size:0.94rem;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:all var(--dur) var(--ease);white-space:nowrap;border-radius:var(--pill);letter-spacing:0.02em}
.btn svg{width:1.05em;height:1.05em;transition:transform var(--dur) var(--ease)}
.btn-solid{background:var(--navy-ink);color:var(--paper);padding:0.95rem 1.9rem}
.btn-solid:hover{background:var(--accent);transform:translateY(-2px)}
.btn-solid:hover svg{transform:translateX(4px)}
.btn-light{background:var(--paper);color:var(--navy-ink);padding:0.95rem 1.9rem}
.btn-light:hover{background:var(--card);transform:translateY(-2px)}
.btn-outline{color:var(--ink);border-color:var(--line-2);padding:0.9rem 1.8rem;background:transparent}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn-outline:hover svg{transform:translateX(4px)}
/* link with reveal-from-left underline */
.link{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;color:var(--accent);transition:gap .3s var(--ease);position:relative;padding-bottom:2px;letter-spacing:0.02em}
.link::after{content:"";position:absolute;left:0;right:auto;bottom:0;width:0;height:1px;background:currentColor;transition:width .5s var(--ease)}
.link:hover{gap:0.85rem}
.link:hover::after{width:calc(100% - 1.5em)}
.link svg{width:1.05em;height:1.05em}
.arw svg,.go svg,.breadcrumb svg{width:1.05em;height:1.05em;flex-shrink:0;vertical-align:middle}

/* ---- Utility bar ---- */
.util{font-size:0.76rem;color:var(--mute);border-bottom:1px solid var(--line);background:var(--paper)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:42px;gap:1rem;flex-wrap:wrap}
.util .left{font-family:var(--ff-latin);letter-spacing:0.01em}
.util .right{display:flex;gap:1.3rem;align-items:center}
.util a:hover{color:var(--accent)}
.util .sep{width:1px;height:13px;background:var(--line-2)}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .4s var(--ease)}
.site-header.scrolled{box-shadow:0 14px 36px -28px rgba(10,18,48,0.32)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:var(--space-m)}
.brand{display:flex;align-items:center;gap:0.9rem;flex-shrink:0}
.brand img{height:42px;width:auto}
.brand .org{font-family:var(--ff-body);font-size:0.64rem;letter-spacing:0.18em;color:var(--ink);font-weight:600;line-height:1.55;border-left:1px solid var(--line-2);padding-left:0.85rem}
.nav-main{display:flex;align-items:center;gap:2.88rem;margin-left:auto}
.nav-list{display:flex;align-items:center;gap:clamp(1.4rem,0.7rem + 2vw,3.4rem)}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:0.34rem;font-family:var(--ff-body);font-size:0.84rem;font-weight:600;color:var(--ink);padding:0.55rem 0.2rem;white-space:nowrap;letter-spacing:0.02em;position:relative}
.nav-item>a::after{content:"";position:absolute;left:0.2rem;bottom:0;height:1.5px;width:0;background:var(--accent);transition:width .45s var(--ease)}
.nav-item:hover>a::after,.nav-item.current>a::after{width:calc(100% - 0.4rem)}
.nav-item:hover>a,.nav-item.current>a{color:var(--accent)}
.nav-item .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:0.4;transition:transform .3s}
.nav-item:hover .caret{transform:rotate(225deg) translateY(-1px)}
.dropdown{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);min-width:272px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 30px 64px -28px rgba(26,36,82,0.32);padding:0.7rem;opacity:0;visibility:hidden;transition:all .35s var(--ease);z-index:70}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.dropdown .dd-head{font-family:var(--ff-latin);font-size:0.68rem;letter-spacing:0.06em;color:var(--accent);font-weight:700;padding:0.5rem 0.8rem 0.7rem;text-transform:uppercase}
.dropdown a{display:flex;align-items:center;gap:0.7rem;padding:0.6rem 0.8rem;font-size:0.88rem;border-radius:7px;transition:all .25s;color:var(--text);font-weight:500}
.dropdown a .no{font-family:var(--ff-latin);font-size:0.72rem;color:var(--mute);min-width:1.6em}
.dropdown a:hover{background:var(--paper-2);color:var(--navy-ink)}
.nav-cta{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:20px;height:1.5px;background:var(--navy);transition:all .3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---- Drawer ---- */
.drawer{position:fixed;inset:0 0 0 auto;width:min(440px,92vw);background:var(--paper);z-index:90;transform:translateX(100%);transition:transform .5s var(--ease);overflow-y:auto;box-shadow:-20px 0 60px -30px rgba(26,36,82,0.4);padding:1.5rem var(--pad) 4rem}
.drawer.open{transform:translateX(0)}
.drawer-overlay{position:fixed;inset:0;background:rgba(26,36,82,0.32);backdrop-filter:blur(2px);z-index:80;opacity:0;visibility:hidden;transition:all .4s}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.drawer .acc{border-top:1px solid var(--line)}
.drawer .acc>button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0;font-family:var(--ff-body);font-size:1rem;font-weight:700;color:var(--navy);background:none;border:none;cursor:pointer;text-align:left}
.drawer .acc>button .pm{position:relative;width:14px;height:14px;flex-shrink:0}
.drawer .acc>button .pm::before,.drawer .acc>button .pm::after{content:"";position:absolute;background:var(--accent);transition:transform .3s}
.drawer .acc>button .pm::before{top:6px;left:0;width:14px;height:2px}
.drawer .acc>button .pm::after{top:0;left:6px;width:2px;height:14px}
.drawer .acc.open>button .pm::after{transform:scaleY(0)}
.drawer .acc .sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.drawer .acc.open .sub{grid-template-rows:1fr}
.drawer .acc .sub-inner{overflow:hidden}
.drawer .acc .sub a{display:block;padding:0.6rem 0 0.6rem 1rem;font-size:0.9rem;color:var(--mute);border-left:2px solid var(--line)}
.drawer .acc .sub a:hover{color:var(--accent);border-color:var(--accent)}
.drawer .drawer-cta{margin-top:2.2rem;display:flex;flex-direction:column;gap:0.9rem}

/* ---- Hero (institutional editorial) ---- */
.hero{padding:clamp(4rem,3rem + 5vw,7rem) 0 var(--space);position:relative;overflow:hidden;background:var(--paper)}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.18fr 0.82fr;gap:var(--gutter);align-items:center}
.hero-tag{display:inline-flex;align-items:center;gap:0.65rem;margin-bottom:2rem;font-family:var(--ff-latin);font-size:0.74rem;letter-spacing:0.18em;color:var(--accent);text-transform:uppercase;font-weight:600;padding:0.45rem 0.9rem 0.45rem 0;border-left:2px solid var(--accent);padding-left:1rem}
.hero h1{font-family:var(--ff-display);font-weight:600;font-size:clamp(2.5rem,1.8rem + 3vw,4.1rem);line-height:1.26;letter-spacing:0.005em;color:var(--ink);margin-bottom:1.9rem}
.hero h1 .u{color:var(--accent);font-weight:700;position:relative}
.hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:0.04em;height:0.08em;background:var(--accent);opacity:0.18}
.hero .lede{font-family:var(--ff-body);font-size:clamp(1.04rem,0.98rem + 0.4vw,1.22rem);color:var(--text);max-width:38ch;margin-bottom:2.8rem;line-height:1.95;font-weight:400}
.hero-cta{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.hero-meta{margin-top:3.8rem;display:grid;grid-template-columns:repeat(3,auto);gap:0;justify-content:start;border-top:1px solid var(--line)}
.hero-meta .item{position:relative;padding:1.4rem 2rem 0 0;margin-right:2rem}
.hero-meta .item + .item{border-left:1px solid var(--line);padding-left:2rem}
.hero-meta .num{font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1;font-size:2.6rem;color:var(--ink);line-height:1;font-weight:500;letter-spacing:-0.01em}
.hero-meta .lab{font-size:0.76rem;color:var(--mute);margin-top:0.6rem;letter-spacing:0.04em;line-height:1.5}

/* hero visual : refined institutional seal panel */
.emblem{position:relative;display:flex;align-items:center;justify-content:center}
.seal-panel{position:relative;width:100%;aspect-ratio:5/6;background:var(--paper-2);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:2.4rem 2.2rem;overflow:hidden}
.seal-panel::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--navy-ink)}
.seal-panel::after{content:"";position:absolute;right:-30%;top:-40%;width:90%;height:90%;border:1px solid var(--line-2);border-radius:50%;pointer-events:none}
.seal-head{position:relative;display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--ff-latin);font-size:0.66rem;letter-spacing:0.16em;color:var(--mute);text-transform:uppercase;font-weight:600}
.seal-head .index{color:var(--ink);font-family:var(--ff-num);font-size:1.4rem;font-weight:500;letter-spacing:0.02em;line-height:1}
.seal-body{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.2rem;margin:1.5rem 0}
.seal-mark{width:min(58%,180px);aspect-ratio:1/1;border-radius:50%;background:var(--navy-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--paper);position:relative}
.seal-mark::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,0.22);border-radius:50%}
.seal-mark::after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,0.08);border-radius:50%}
.seal-mark .chk{width:38px;height:38px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:0.5rem;position:relative;z-index:1}
.seal-mark .chk svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.6}
.seal-mark .mark{font-family:var(--ff-latin);font-size:1.35rem;font-weight:700;letter-spacing:0.08em;line-height:1;position:relative;z-index:1}
.seal-mark .sub{font-size:0.5rem;letter-spacing:0.24em;color:rgba(255,255,255,0.65);margin-top:0.4rem;font-weight:600;position:relative;z-index:1}
.seal-cap{text-align:center}
.seal-cap .t1{font-family:var(--ff-display);font-weight:600;font-size:1.1rem;color:var(--ink);letter-spacing:0.02em}
.seal-cap .t2{font-size:0.76rem;color:var(--mute);margin-top:0.35rem;letter-spacing:0.04em}
.seal-badges{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-2);padding-top:1.2rem}
.seal-badge{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:0 0.4rem}
.seal-badge + .seal-badge{border-left:1px solid var(--line-2)}
.seal-badge .icn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.seal-badge .icn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5}
.seal-badge .lbl{font-size:0.7rem;color:var(--ink);font-weight:600;text-align:center;line-height:1.4}

/* ---- Trust strip (institutional badges) ---- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.strip .wrap{display:flex;align-items:center;gap:2rem;min-height:108px;justify-content:space-between;flex-wrap:wrap;padding-block:1.4rem}
.strip .lab{font-family:var(--ff-latin);font-size:0.7rem;letter-spacing:0.2em;color:var(--mute);white-space:nowrap;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:0.8rem}
.strip .lab::after{content:"";width:32px;height:1px;background:var(--line-2)}
.strip .logos{display:flex;gap:clamp(1.4rem,0.8rem + 1.5vw,2.6rem);align-items:center;flex-wrap:wrap}
.strip .logo-mark{display:inline-flex;align-items:center;gap:0.6rem;font-family:var(--ff-body);font-size:0.92rem;color:var(--navy);font-weight:600;letter-spacing:0.02em;opacity:0.85;transition:opacity .3s var(--ease)}
.strip .logo-mark:hover{opacity:1}
.strip .logo-mark .mk{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--ff-latin);font-size:0.68rem;font-weight:700;color:var(--navy-ink);background:var(--paper);flex-shrink:0}

/* ---- Section + heads ---- */
.sec{padding-block:var(--space);position:relative}
.sec-sm{padding-block:var(--space-sm)}
.sec.alt{background:var(--paper-2)}
.sec + .sec:not(.alt){border-top:1px solid var(--line)}
.sec-head{margin-bottom:4rem;max-width:64rem}
.sec-head.center{margin-left:0;margin-right:0;text-align:left}
.sec-head.center .kicker{justify-content:flex-start}
.sec-head h2{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.9rem,1.4rem + 1.8vw,2.9rem);line-height:1.3;color:var(--ink);margin-top:1.4rem;letter-spacing:0.01em}
.sec-head p{margin-top:1.5rem;color:var(--text);font-size:1.06rem;line-height:1.9;max-width:55ch}
.sec-head.center p{margin-left:0;margin-right:0}

/* ---- Feature blocks (institutional, borderless) ---- */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xl) var(--gutter)}
.feature{position:relative;padding-left:0;padding-top:1.4rem;border-top:1px solid var(--line-2)}
.feature::before{content:"";position:absolute;top:-1px;left:0;width:32px;height:1px;background:var(--accent)}
.feature .f-no{font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1;font-size:0.92rem;font-weight:500;color:var(--accent);letter-spacing:0.04em;display:block;margin-bottom:0.5rem}
.feature h3{font-family:var(--ff-display);font-size:1.4rem;font-weight:600;color:var(--ink);margin-bottom:0.8rem;letter-spacing:0.005em;line-height:1.4}
.feature p{font-size:0.96rem;color:var(--text);line-height:1.9;max-width:55ch}
/* 活動概要: 目的グループ / 活動グループ の区別 */
.act-group + .act-group{margin-top:clamp(3rem,2rem + 3vw,5rem)}
.act-group-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:var(--space-l)}
.act-group-head .gh-label{font-family:var(--ff-display);font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);font-weight:600;color:var(--ink);letter-spacing:0.04em}
.act-group-head .gh-count{font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1;font-size:0.86rem;color:var(--accent);font-weight:600;letter-spacing:0.06em}
/* 目的: 番号付きの宣言リスト（活動カードと異なる見せ方）*/
.goals{display:flex;flex-direction:column}
.goal{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,0.6rem + 1vw,1.8rem);padding:clamp(1.1rem,0.8rem + 0.8vw,1.6rem) 0;border-top:1px solid var(--line-2);align-items:baseline}
.goal:first-child{border-top:none;padding-top:0}
.goal .goal-no{font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1;font-size:clamp(1.2rem,1rem + 0.6vw,1.6rem);font-weight:600;color:var(--accent);line-height:1.5}
.goal .goal-txt{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.08rem,1rem + 0.5vw,1.4rem);color:var(--ink);line-height:1.75;margin:0;max-width:58ch}

/* ---- Editorial index (section directory) ---- */
.index{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-2)}
.idx{display:block;padding:2rem 1.8rem 2.2rem;border-bottom:1px solid var(--line);background:transparent;transition:background-color .7s var(--ease-out);position:relative}
.idx:not(:nth-child(3n)){border-right:1px solid var(--line)}
.idx:hover{background-color:var(--paper-2)}
.idx .ix-no{font-family:var(--ff-latin);font-size:0.82rem;font-weight:700;color:var(--accent);letter-spacing:0.04em}
.idx h3{font-family:var(--ff-display);font-size:1.24rem;font-weight:800;color:var(--ink);margin:0.8rem 0 0.6rem;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;letter-spacing:-0.01em;transition:color .45s var(--ease-out)}
.idx h3 .arw{color:var(--accent);opacity:0;transform:translateX(-8px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.idx:hover h3 .arw{opacity:1;transform:translateX(0)}
.idx:hover h3{color:var(--navy-ink)}
.idx p{font-size:0.9rem;color:var(--mute);line-height:1.8}
@media (prefers-reduced-motion:reduce){.idx,.idx h3,.idx h3 .arw{transition-duration:.01ms}}

/* ---- Card grid (section index children) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-m)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--space-l);transition:all var(--dur) var(--ease);display:flex;flex-direction:column;gap:0.8rem;position:relative}
.card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.card .c-no{font-family:var(--ff-latin);font-size:0.82rem;color:var(--accent);font-weight:700;letter-spacing:0.04em}
.card h3{font-family:var(--ff-display);font-size:1.22rem;font-weight:800;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:0.6rem;letter-spacing:-0.01em}
.card h3 .arw{color:var(--accent);transition:transform var(--dur) var(--ease)}
.card:hover h3 .arw{transform:translateX(5px)}
.card p{font-size:0.92rem;color:var(--text);line-height:1.85}

/* ---- Numbers row (editorial proof) ---- */
.numbers-sec{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.numbers-sec::before{content:"";position:absolute;top:-1px;left:0;width:120px;height:2px;background:var(--accent)}
.numbers-sec .wrap{padding-block:var(--space)}
.numbers-grid{display:grid;grid-template-columns:0.95fr 1.4fr;gap:var(--gutter);align-items:center}
.numbers-lead .quote{font-family:var(--ff-display);font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);line-height:1.6;color:var(--ink);font-weight:500;margin-top:1.5rem;letter-spacing:0.005em}
.numbers-lead .quote .hl{color:var(--accent);font-weight:600}
.numbers-lead .sign{color:var(--mute);font-size:0.78rem;margin-top:1.8rem;display:flex;align-items:center;gap:0.8rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;font-family:var(--ff-latin)}
.numbers-lead .sign::before{content:"";width:24px;height:1px;background:var(--accent)}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem 3rem}
.num-cell{border-top:1px solid var(--line-2);padding-top:1.2rem;position:relative}
.num-cell::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--accent)}
.num-cell .n{font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1;font-size:clamp(2.8rem,2.2rem + 1.8vw,3.8rem);font-weight:500;line-height:1;color:var(--ink);letter-spacing:-0.01em}
.num-cell .n em{font-style:normal;font-size:0.36em;color:var(--accent);font-weight:600;margin-left:0.2em;font-family:var(--ff-body);letter-spacing:0.02em}
.num-cell .l{font-size:0.86rem;color:var(--mute);margin-top:0.9rem;line-height:1.6;font-weight:500;letter-spacing:0.02em}

/* ---- News list ---- */
.news-list{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.news-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:1.8rem;align-items:center;padding:1.7rem 0.4rem;border-bottom:1px solid var(--line);transition:background .3s,padding .3s}
.news-row:hover{background:var(--paper-2);padding-left:1.1rem;padding-right:1.1rem}
.news-row .date{font-family:var(--ff-latin);font-size:0.9rem;color:var(--mute);font-weight:600}
.news-row .tag{font-family:var(--ff-latin);font-size:0.68rem;letter-spacing:0.06em;font-weight:700;padding:0.28rem 0.8rem;border-radius:var(--pill);background:transparent;color:var(--navy-ink);border:1px solid var(--line-2);white-space:nowrap;text-transform:uppercase}
.news-row .tag.press{color:var(--accent);border-color:var(--accent)}
.news-row .tag.report{color:var(--green);border-color:var(--green)}
.news-row .tag.guide{color:var(--blue);border-color:var(--blue)}
.news-row .ttl{font-size:1rem;color:var(--ink);font-weight:600}
.news-row:hover .ttl{color:var(--accent)}
.news-row .arw{color:var(--accent);opacity:0;transition:all .3s}
.news-row:hover .arw{opacity:1;transform:translateX(2px)}

/* ---- Audience split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-m)}
.split-card{position:relative;border-radius:var(--r);overflow:hidden;padding:3.2rem 3rem;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--paper);transition:transform var(--dur) var(--ease)}
.split-card.biz{background:linear-gradient(152deg,#2b2b8a 0%,#1a2356 55%,#141a44 100%)}
.split-card.con{background:linear-gradient(152deg,#3a5cf5 0%,#2c50e0 50%,#1f3bb0 100%)}
.split-card::after{content:"";position:absolute;right:-12%;top:-30%;width:60%;height:80%;border-radius:50%;border:1px solid rgba(255,255,255,0.16)}
.split-card:hover{transform:translateY(-5px)}
.split-card .ix{position:relative;font-family:var(--ff-latin);font-size:0.78rem;letter-spacing:0.08em;color:rgba(255,255,255,0.7);margin-bottom:auto;font-weight:700}
.split-card h3{position:relative;font-family:var(--ff-display);font-size:1.8rem;font-weight:800;margin-bottom:1rem;letter-spacing:-0.01em}
.split-card p{position:relative;font-size:0.98rem;color:rgba(255,255,255,0.85);max-width:36ch;line-height:1.8}
.split-card .go{position:relative;margin-top:1.8rem;display:inline-flex;align-items:center;gap:0.6rem;font-size:0.92rem;font-weight:700}
.split-card:hover .go{gap:1rem}

/* ---- CTA band (institutional dark) ---- */
.cta{background-color:#f5f8fd;background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),url(../img/cta-bg.jpg);background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),image-set(url(../img/cta-bg.webp) type("image/webp"),url(../img/cta-bg.jpg) type("image/jpeg"));background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}
.cta .wrap{padding-block:var(--space);text-align:center;position:relative;z-index:1}
.cta .kicker{color:var(--accent);margin-bottom:1.5rem;justify-content:center;display:inline-flex}
.cta .kicker::before{background:var(--accent)}
.cta h2{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.8rem);color:var(--ink);line-height:1.3;letter-spacing:0.005em}
.cta p{color:var(--text);margin:1.5rem auto 2.8rem;max-width:42rem;font-size:1.04rem;line-height:1.9}
.cta .row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.cta .btn-outline{color:var(--navy-ink);border-color:rgba(36,36,120,0.4)}
.cta .btn-outline:hover{background:var(--navy-ink);color:#fff;border-color:var(--navy-ink)}

/* ---- Page header (editorial chapter style) ---- */
.page-header{padding:clamp(3rem,2.4rem + 3vw,5.5rem) 0 clamp(3.4rem,2.8rem + 3vw,6rem);border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:var(--paper-2)}
.breadcrumb{display:flex;align-items:center;gap:0.6rem;font-size:0.78rem;color:var(--mute);margin-bottom:2.2rem;flex-wrap:wrap;font-family:var(--ff-body)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:0.5}
.breadcrumb .cur{color:var(--ink);font-weight:600}
.page-header .ph-no{font-family:var(--ff-num);font-feature-settings:"tnum" 1;font-size:1rem;letter-spacing:0.04em;color:var(--accent);margin-bottom:1.2rem;font-weight:500;display:inline-flex;align-items:center;gap:0.7rem}
.page-header .ph-no::before{content:"";width:18px;height:1px;background:var(--accent)}
.page-header h1{font-family:var(--ff-display);font-weight:600;font-size:clamp(2.1rem,1.5rem + 2vw,3.2rem);color:var(--ink);line-height:1.22;letter-spacing:0.005em}
.page-header .ph-lead{margin-top:1.8rem;color:var(--text);font-size:clamp(1.04rem,0.98rem + 0.3vw,1.18rem);line-height:1.9;max-width:48ch}
/* About ページのヘッダー: ヒーロー画像を180度反転した背景（白文字。トップのヒーローと別の見え方）*/
/* 写真ヘッダー（about / news）: 白文字 + スクリム。共通スタイル */
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header{background-color:var(--navy-deep);background-size:cover;background-position:center;background-repeat:no-repeat;border-bottom-color:transparent}
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header .breadcrumb{color:rgba(255,255,255,0.72)}
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header .breadcrumb a{color:rgba(255,255,255,0.85)}
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header .breadcrumb a:hover{color:#fff}
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header .breadcrumb .cur{color:#fff}
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header .ph-no{color:rgba(255,255,255,0.92)}
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header .ph-no::before{background:rgba(255,255,255,0.6)}
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header h1{color:#fff}
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header .ph-lead{color:rgba(255,255,255,0.9)}
/* 背景画像は全ページ共通: 同一画像・同一の向き・同一スクリム（about / news / join / contact）*/
:is(.page-about,.page-news,.page-join,.page-contact,.page-symposium-apply) .page-header{background-image:linear-gradient(100deg,rgba(8,13,40,0.66) 0%,rgba(8,13,40,0.4) 42%,rgba(8,13,40,0.16) 78%,rgba(8,13,40,0.08) 100%),url(../img/hero-join.jpg);background-image:linear-gradient(100deg,rgba(8,13,40,0.66) 0%,rgba(8,13,40,0.4) 42%,rgba(8,13,40,0.16) 78%,rgba(8,13,40,0.08) 100%),image-set(url(../img/hero-join.webp) type("image/webp"),url(../img/hero-join.jpg) type("image/jpeg"))}

/* ---- Prose ---- */
.prose{max-width:none}
.prose h2{font-family:var(--ff-display);font-size:1.7rem;color:var(--ink);margin:3rem 0 1.2rem;font-weight:800;letter-spacing:-0.01em}
.prose h3{font-size:1.2rem;color:var(--navy);margin:2.2rem 0 0.8rem;font-weight:700}
.prose p{margin-bottom:1.5rem;color:var(--text);line-height:2}
.prose ul{margin:0 0 1.6rem;padding-left:0}
.prose ul li{position:relative;padding-left:1.7rem;margin-bottom:0.8rem;color:var(--text);line-height:1.85}
.prose ul li::before{content:"";position:absolute;left:0;top:0.78em;width:7px;height:7px;background:var(--accent);border-radius:50%}

/* ---- DL ---- */
.dl{border-top:1px solid var(--line-2)}
.dl .row{display:grid;grid-template-columns:220px 1fr;gap:1.8rem;padding:1.5rem 0.4rem;border-bottom:1px solid var(--line)}
.dl .row dt{font-weight:700;color:var(--navy);font-size:0.96rem}
.dl .row dd{color:var(--text);font-size:0.98rem;line-height:1.85}

/* ---- FAQ ---- */
.faq{max-width:none;interpolate-size:allow-keywords}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1.2rem;padding:1.7rem 1.2rem;font-weight:700;color:var(--ink);font-size:1.08rem;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--ff-latin);color:var(--accent);font-size:1.1rem;flex-shrink:0;font-weight:800}
.faq summary .pm{margin-left:auto;position:relative;width:14px;height:14px;flex-shrink:0;margin-top:0.4em}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--accent);transition:transform .3s}
.faq summary .pm::before{top:6px;left:0;width:14px;height:2px}
.faq summary .pm::after{top:0;left:6px;width:2px;height:14px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq .ans{padding:0 1.2rem 1.7rem 3.7rem;color:var(--text);line-height:2}
/* 開閉を滑らかに: ::details-content + interpolate-size で block-size 0→auto を補間。未対応(Safari/Firefox)は瞬時開閉に degrade */
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(0.32,0.72,0,1),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){.faq details::details-content{transition-duration:.01ms}}

/* ---- Tiers ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-m)}
.tier{border:1px solid var(--line);border-radius:var(--r);padding:var(--space-l);background:var(--card);display:flex;flex-direction:column;transition:all var(--dur) var(--ease)}
.tier.featured{background:var(--navy-ink);color:var(--paper);border-color:transparent}
.tier:hover{transform:translateY(-5px)}
.tier .t-name{font-family:var(--ff-display);font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-0.01em}
.tier.featured .t-name{color:var(--paper)}
.tier .t-tag{font-family:var(--ff-latin);font-size:0.74rem;letter-spacing:0.06em;color:var(--accent);font-weight:700;margin-bottom:1.2rem;text-transform:uppercase}
.tier .t-desc{font-size:0.94rem;color:var(--text);margin:0.7rem 0 1.6rem;line-height:1.8}
.tier.featured .t-desc{color:rgba(255,255,255,0.78)}
.tier ul{margin-bottom:2rem;flex:1}
.tier ul li{position:relative;padding-left:1.7rem;margin-bottom:0.8rem;font-size:0.92rem;line-height:1.7}
.tier ul li::before{content:"";position:absolute;left:0;top:0.5em;width:8px;height:8px;background:var(--accent);border-radius:50%}
.tier.featured ul li::before{background:var(--paper)}
/* Phase カード背景画像: Phase1/2=明るい画像+白ウォッシュ(濃紺文字)、Phase3=濃いブルー画像+ダークスクリム(白文字) */
.tier--p1,.tier--p2,.tier--p3{background-size:cover;background-position:center;background-repeat:no-repeat}
.tier--p1{background-image:linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),url(../img/phase-1.jpg);background-image:linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),image-set(url(../img/phase-1.webp) type("image/webp"),url(../img/phase-1.jpg) type("image/jpeg"))}
.tier--p2{background-image:linear-gradient(rgba(255,255,255,0.58),rgba(255,255,255,0.58)),url(../img/phase-2.jpg);background-image:linear-gradient(rgba(255,255,255,0.58),rgba(255,255,255,0.58)),image-set(url(../img/phase-2.webp) type("image/webp"),url(../img/phase-2.jpg) type("image/jpeg"))}
.tier.featured.tier--p3{background-image:linear-gradient(rgba(8,13,40,0.42),rgba(8,13,40,0.42)),url(../img/phase-3.jpg);background-image:linear-gradient(rgba(8,13,40,0.42),rgba(8,13,40,0.42)),image-set(url(../img/phase-3.webp) type("image/webp"),url(../img/phase-3.jpg) type("image/jpeg"));background-size:cover;background-position:center;background-repeat:no-repeat}
.tier.featured.tier--p3 .t-tag{color:#fff}

/* ---- Forms ---- */
.form{max-width:none;display:grid;gap:var(--space-m)}
.form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-status{font-size:0.92rem;line-height:1.7;margin:0;min-height:1.2em}
.form-status.sending{color:var(--mute)}
.form-status.ok{color:var(--accent);font-weight:600}
.form-status.err{color:#c0392b;font-weight:600}
.form .field{display:flex;flex-direction:column;gap:0.6rem}
.form label{font-size:0.9rem;font-weight:700;color:var(--navy)}
.form label .req{color:var(--accent);font-size:0.72rem;font-weight:600;margin-left:0.4rem;letter-spacing:0.04em}
.form label .opt{color:var(--text-soft);font-size:0.72rem;font-weight:600;margin-left:0.4rem;letter-spacing:0.04em}
.form .field-hint{font-size:0.82rem;color:var(--text-soft);line-height:1.7;margin-top:-0.15rem}
.form input,.form select,.form textarea{font-family:var(--ff-body);font-size:0.98rem;padding:0.95rem 1.1rem;border:1.5px solid var(--line-field);border-radius:var(--r-sm);background:var(--card);color:var(--text);transition:border-color .3s,box-shadow .3s}
.form input::placeholder,.form textarea::placeholder{color:var(--mute);opacity:1}
.form input:hover:not(:focus):not(:disabled),.form select:hover:not(:focus):not(:disabled),.form textarea:hover:not(:focus):not(:disabled){border-color:var(--mute)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form textarea{resize:vertical;min-height:150px}
/* select : ネイティブ維持 + ヘアラインのカスタムキャレット。フォーカスでキャレットも accent へ */
.form select{appearance:none;-webkit-appearance:none;padding-right:2.8rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236a7393' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1rem center}
.form select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232c50e0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* error : 罫線太化 + 三角アイコン + 文言の三重符号化（色のみに依存しない） */
.form .field--error input,.form .field--error select,.form .field--error textarea,.form input[aria-invalid="true"],.form select[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:var(--danger);border-width:2px}
.form .field--error input:focus,.form .field--error select:focus,.form .field--error textarea:focus,.form [aria-invalid="true"]:focus{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.form .field-error-msg{display:flex;align-items:flex-start;gap:0.4rem;font-size:0.84rem;line-height:1.7;color:var(--danger);margin-top:0.1rem}
.form .field-error-msg::before{content:"";flex:0 0 auto;width:1.05em;height:1.05em;margin-top:0.15em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1L1 14h14L8 1z' stroke='%23c0341d' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.5M8 11.6v.01' stroke='%23c0341d' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.form .form-error-summary{border:1.5px solid var(--danger);background:var(--danger-soft);border-radius:var(--r-sm);padding:1.1rem 1.3rem;margin-bottom:var(--space-m)}
.form .form-error-summary h2,.form .form-error-summary p{color:var(--ink)}
.form .form-error-summary a{color:var(--danger);font-weight:600;text-decoration:underline}
/* success : 罫線 --green(3:1) + 本文 --ink。--green は文字には使わない */
.form .field--success input,.form .field--success select,.form .field--success textarea{border-color:var(--green)}
.form .form-success{border:1.5px solid var(--green);background:var(--green-soft);border-radius:var(--r-sm);padding:1.1rem 1.3rem;color:var(--ink);display:flex;align-items:flex-start;gap:0.5rem}
/* disabled : opacity を使わず 背景+破線罫線+カーソル+セマンティクスで多重符号化（文字コントラスト維持） */
.form input:disabled,.form select:disabled,.form textarea:disabled,.form .field--disabled input,.form [aria-disabled="true"]{background:var(--paper-2);border-style:dashed;border-color:var(--line-field);color:var(--text-soft);cursor:not-allowed}
.form input:read-only,.form textarea:read-only{background:var(--paper-2);border-style:solid;border-color:var(--line);cursor:default}
/* checkbox / radio : 罫線区切りリスト行、行全体タップ可、行高44px以上。選択はマーク形状で示す */
.form fieldset{border:none;margin:0;padding:0}
.form legend{font-size:0.9rem;font-weight:700;color:var(--navy);padding:0;margin-bottom:0.6rem}
.form .field-check,.form .field-radio{display:flex;flex-direction:column;gap:0}
.form .field-check label,.form .field-radio label{display:flex;align-items:center;gap:0.75rem;min-height:44px;padding:0.5rem 0.4rem;border-bottom:1px solid var(--line);font-size:0.95rem;font-weight:500;color:var(--text);cursor:pointer;transition:background .2s}
.form .field-check label:hover,.form .field-radio label:hover{background:var(--paper-2)}
.form .field-check input[type="checkbox"],.form .field-radio input[type="radio"]{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:1.25rem;height:1.25rem;margin:0;padding:0;border:1.5px solid var(--line-field);background:var(--card);cursor:pointer;transition:border-color .2s,background .2s;display:grid;place-content:center}
.form .field-check input[type="checkbox"]{border-radius:var(--r-check)}
.form .field-radio input[type="radio"]{border-radius:50%}
.form .field-check input[type="checkbox"]:checked,.form .field-radio input[type="radio"]:checked{border-color:var(--accent)}
.form .field-check input[type="checkbox"]:checked::before{content:"";width:0.7rem;height:0.7rem;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%232c50e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form .field-radio input[type="radio"]:checked::before{content:"";width:0.65rem;height:0.65rem;border-radius:50%;background:var(--accent)}
.form .field-check input:focus-visible,.form .field-radio input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form .field-count{align-self:flex-end;font-size:0.78rem;color:var(--text-soft);font-variant-numeric:tabular-nums;margin-top:0.2rem}
/* submit : disabled は淡塗り+不可カーソル（彩度落としではなく塗り替え）。loading は spinner */
.form .btn-solid:disabled,.form .btn-solid[aria-disabled="true"]{background:var(--line-2);color:var(--text);cursor:not-allowed;transform:none}
.form .btn--loading{position:relative;color:transparent;pointer-events:none}
.form .btn--loading::after{content:"";position:absolute;top:50%;left:50%;width:1.1em;height:1.1em;margin:-0.55em 0 0 -0.55em;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:jda-spin .7s linear infinite}
@keyframes jda-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.form .btn--loading{color:#fff}.form .btn--loading::after{display:none}}
/* autofill : ブラウザ既定の黄背景を白へ塗り替え、ヘアライン外観を維持 */
.form input:-webkit-autofill,.form input:-webkit-autofill:hover,.form input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px var(--card) inset;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
/* forced-colors : SVG キャレット/チェックが消えても境界と選択をシステム色で担保 */
@media (forced-colors:active){
  .form input,.form select,.form textarea{border-color:CanvasText}
  .form .field-check input:checked,.form .field-radio input:checked{border-color:Highlight}
  .form .field-check input[type="checkbox"]:checked::before,.form .field-radio input[type="radio"]:checked::before{background:Highlight}
}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-m)}
.login-card{max-width:440px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:3rem 2.4rem}
.login-card h2{font-family:var(--ff-display);font-size:1.6rem;color:var(--ink);text-align:center;margin-bottom:0.6rem;font-weight:800}
.login-card .sub{text-align:center;color:var(--mute);font-size:0.9rem;margin-bottom:2.2rem}

/* ---- Sitemap ---- */
.sitemap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 3.5rem}
.sitemap-col h3{font-family:var(--ff-display);font-size:1.2rem;color:var(--ink);padding-bottom:0.8rem;border-bottom:2px solid var(--line-2);margin-bottom:1.2rem;display:flex;align-items:baseline;gap:0.8rem;font-weight:800}
.sitemap-col h3 .no{font-family:var(--ff-latin);font-size:0.85rem;color:var(--accent);font-weight:700}
.sitemap-col a{display:block;padding:0.45rem 0;font-size:0.94rem;color:var(--text)}
.sitemap-col a.top{font-weight:700;color:var(--navy)}
.sitemap-col a.sub{color:var(--mute);padding-left:1.3rem;font-size:0.9rem;position:relative}
.sitemap-col a.sub::before{content:"";position:absolute;left:0;top:1.15em;width:8px;height:1px;background:var(--line-2)}
.sitemap-col a:hover{color:var(--accent)}

/* ---- Footer ---- */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,0.66);position:relative;z-index:2}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.footer-top{padding:clamp(4rem,3.4rem + 3vw,6rem) 0 3.4rem;display:grid;grid-template-columns:1.3fr 2fr;gap:3.5rem}
.footer-brand img{height:38px;margin-bottom:1.6rem}
.footer-brand .desc{font-size:0.88rem;line-height:1.95;max-width:45ch;color:rgba(255,255,255,0.58)}
.footer-brand .addr{margin-top:1.8rem;font-size:0.8rem;color:rgba(255,255,255,0.7);font-family:var(--ff-latin);line-height:1.8}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem 1.6rem}
.footer-col h4{font-family:var(--ff-latin);font-size:0.74rem;letter-spacing:0.06em;color:#fff;font-weight:700;margin-bottom:1.1rem;padding-bottom:0.7rem;border-bottom:1px solid rgba(255,255,255,0.14);text-transform:uppercase}
.footer-col a{display:block;font-size:0.86rem;padding:0.36rem 0;color:rgba(255,255,255,0.6);transition:color .25s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.14);padding:1.8rem 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom .links{display:flex;gap:var(--space-m);flex-wrap:wrap;font-size:0.8rem}
.footer-bottom .copy{font-size:0.8rem;color:rgba(255,255,255,0.7);font-family:var(--ff-latin)}

/* ---- Two-column (values / body split) ---- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:start}
.two-col .lead-h{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);line-height:1.3;color:var(--ink);letter-spacing:-0.015em}
.two-col .lead-h .kicker{display:flex;margin-bottom:1.2rem}
.values{display:flex;flex-direction:column;gap:var(--space-m);margin-top:2rem}
.value{display:grid;grid-template-columns:auto 1fr;gap:1.1rem}
.value .vm{width:8px;height:8px;margin-top:0.5rem;border-top:1.7px solid var(--accent);border-right:1.7px solid var(--accent);transform:rotate(45deg);flex-shrink:0}
.value .vt{font-weight:700;color:var(--ink);font-size:1rem}
.value .vd{color:var(--mute);font-size:0.92rem;line-height:1.7;margin-top:0.15rem}
.bodycopy p{color:var(--text);margin-bottom:1.3rem;line-height:2;font-size:1rem}
.bodycopy p:last-child{margin-bottom:0}

/* ---- Numbered accordion (details) ---- */
.accordion{border-top:1px solid var(--line-2)}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-m);align-items:center;padding:1.4rem 1.2rem}
.accordion summary::-webkit-details-marker{display:none}
.accordion .ac-no{font-family:var(--ff-latin);font-size:0.95rem;font-weight:700;color:var(--accent);letter-spacing:0.02em;transition:color .55s cubic-bezier(0.32,0.72,0,1)}
.accordion .ac-t{font-family:var(--ff-display);font-size:clamp(1.2rem,1rem + 0.7vw,1.55rem);font-weight:700;color:var(--ink);letter-spacing:-0.01em;transition:color .55s cubic-bezier(0.32,0.72,0,1)}
.accordion .ac-pm{position:relative;width:16px;height:16px;flex-shrink:0}
.accordion .ac-pm::before,.accordion .ac-pm::after{content:"";position:absolute;background:var(--accent);transition:transform .44s cubic-bezier(0.32,0.72,0,1)}
.accordion .ac-pm::before{top:7px;left:0;width:16px;height:2px}
.accordion .ac-pm::after{top:0;left:7px;width:2px;height:16px}
.accordion details.is-open .ac-pm::after{transform:scaleY(0)}
.accordion details.is-open .ac-pm::before{transform:rotate(180deg)}
.accordion summary{cursor:pointer}
.accordion summary:hover .ac-t{color:var(--accent)}
.accordion summary:hover .ac-no{color:var(--ink)}
.accordion details.is-open .ac-no{color:var(--ink)}
.accordion .ac-body{display:grid;grid-template-columns:1fr 1fr;gap:2rem 10rem;padding:0 1.2rem 2rem 4.2rem}
.accordion .ac-body .desc{color:var(--text);line-height:1.95;font-size:0.96rem}
.accordion .ac-sub{display:flex;flex-direction:column;gap:0.8rem}
.accordion .ac-sub a,.accordion .ac-sub div{display:flex;align-items:center;gap:0.7rem;color:var(--ink);font-size:0.92rem;font-weight:500}
.accordion .ac-sub .vm{width:7px;height:7px;border-top:1.6px solid var(--accent);border-right:1.6px solid var(--accent);transform:rotate(45deg);flex-shrink:0}
.accordion .ac-more{margin-top:0.4rem}

/* ---- Feature list + visual ---- */
.feature-list{display:flex;flex-direction:column;gap:1.9rem}
.feature-list .fl{display:grid;grid-template-columns:auto 1fr;gap:1.2rem}
.feature-list .fl .ic{width:44px;height:44px;border-radius:11px;background:var(--paper-3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feature-list .fl .ic svg{width:22px;height:22px;stroke:var(--navy-ink);fill:none;stroke-width:1.6}
.feature-list .fl .ft{font-family:var(--ff-display);font-weight:700;color:var(--ink);font-size:1.12rem;margin-bottom:0.35rem}
.feature-list .fl .fd{color:var(--mute);font-size:0.92rem;line-height:1.75}
.visual{position:relative;border-radius:var(--r);background:linear-gradient(155deg,var(--navy-ink),var(--navy-deep));min-height:420px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.visual::after{content:"";position:absolute;right:-14%;top:-24%;width:60%;height:80%;border-radius:50%;border:1px solid rgba(255,255,255,0.14)}
.visual .v-seal{position:relative;width:min(60%,210px);aspect-ratio:1/1;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.2);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.visual .v-seal .mark{font-family:var(--ff-latin);font-size:1.7rem;font-weight:800;letter-spacing:0.04em}
.visual .v-seal .sub{font-size:0.56rem;letter-spacing:0.2em;color:var(--sky);margin-top:0.5rem;font-weight:600}

/* ---- Testimonials ---- */
.tmnls{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-m)}
.tmnl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--space-l);display:flex;flex-direction:column;gap:1.3rem;transition:all var(--dur) var(--ease)}
.tmnl:hover{transform:translateY(-4px)}
.tmnl .qm{font-family:var(--ff-latin);font-size:2.4rem;line-height:0.6;color:var(--accent);font-weight:800}
.tmnl .quote{color:var(--text);line-height:1.85;font-size:0.96rem;flex:1}
.tmnl .who{display:flex;align-items:center;gap:0.85rem;border-top:1px solid var(--line);padding-top:1.2rem}
.tmnl .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--navy-ink));flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--ff-latin);font-weight:700;font-size:0.95rem;overflow:hidden}
.tmnl .av img{width:100%;height:100%;object-fit:cover;display:block}
.tmnl .nm{font-weight:700;color:var(--ink);font-size:0.92rem}
.tmnl .rl{color:var(--mute);font-size:0.8rem;margin-top:0.1rem}

@media(max-width:900px){
  .two-col{grid-template-columns:1fr;gap:2.5rem}
  .accordion .ac-body{grid-template-columns:1fr;gap:1.4rem;padding-left:0.4rem}
  .tmnls{grid-template-columns:1fr}
}

/* ---- Hero photo ---- */
.hero-photo{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo .badge{position:absolute;left:1.1rem;bottom:1.1rem;right:1.1rem;background:rgba(255,255,255,0.94);backdrop-filter:blur(8px);border-radius:12px;padding:0.85rem 1rem;display:flex;align-items:center;gap:0.75rem}
.hero-photo .badge .chk{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-photo .badge .chk svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2.6}
.hero-photo .badge .bt{font-size:0.82rem;font-weight:700;color:var(--ink)}
.hero-photo .badge .bs{font-size:0.7rem;color:var(--mute);margin-top:0.1rem}

/* ---- Media rows (editorial composition + text) ---- */
.media-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:center}
.media-row + .media-row{margin-top:clamp(3.5rem,2.5rem + 3vw,6rem)}
.media-row.reverse .m-text{order:2}
.media-row.reverse .m-edit{order:1}
.media-row .m-text .kicker{margin-bottom:1.1rem}
.media-row .m-text h3{font-family:var(--ff-display);font-size:clamp(1.55rem,1.2rem + 1.2vw,2.15rem);font-weight:600;color:var(--ink);line-height:1.36;letter-spacing:0.005em;margin-bottom:1.1rem}
.media-row .m-text p{color:var(--text);line-height:1.95;margin-bottom:1.5rem;max-width:40ch}
.media-row .m-list{display:flex;flex-direction:column;gap:0.85rem;margin-bottom:1.7rem}
.media-row .m-list div{display:flex;align-items:center;gap:0.8rem;color:var(--ink);font-weight:500;font-size:0.96rem}
.media-row .m-list .vm{width:7px;height:7px;border-top:1.6px solid var(--accent);border-right:1.6px solid var(--accent);transform:rotate(45deg);flex-shrink:0}

/* Editorial composition blocks (replaces fake photos) */
.m-edit{position:relative;aspect-ratio:4/3.4;border:1px solid var(--line-2);background:var(--paper);padding:clamp(1.6rem,1rem + 1.5vw,2.4rem);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.m-edit::before{content:"";position:absolute;top:0;left:0;width:80px;height:2px;background:var(--accent)}
.edit-head{display:flex;align-items:flex-start;gap:1rem;font-family:var(--ff-latin);font-size:0.7rem;letter-spacing:0.18em;color:var(--mute);text-transform:uppercase;font-weight:600}
.edit-head .edit-idx{font-family:var(--ff-num);font-size:1.4rem;font-weight:500;color:var(--accent);letter-spacing:0.04em;line-height:1;letter-spacing:0}
.edit-head .edit-lbl{margin-top:0.4em}
.edit-quote{font-family:var(--ff-display);font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:500;color:var(--ink);line-height:1.45;letter-spacing:0.005em;border:none;padding:0;margin:1.4rem 0;quotes:none}
.edit-quote::before{content:"";display:block;width:24px;height:1px;background:var(--accent);margin-bottom:1.2rem}
.edit-foot{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.edit-stat .n{font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1;font-size:2rem;font-weight:500;color:var(--ink);line-height:1}
.edit-stat .n em{font-style:normal;font-size:0.5em;color:var(--accent);font-weight:600;margin-left:0.2em;font-family:var(--ff-body)}
.edit-stat .l{font-size:0.74rem;color:var(--mute);margin-top:0.5rem;letter-spacing:0.04em}
/* dark variant */
.edit-dark{background:var(--navy-deep);border-color:transparent;color:rgba(255,255,255,0.92)}
.edit-dark::before{background:var(--accent)}
.edit-dark .edit-head{color:rgba(255,255,255,0.55)}
.edit-dark .edit-head .edit-idx{color:#fff}
.edit-mono{font-family:var(--ff-mono);font-size:0.86rem;display:flex;flex-direction:column;gap:0.85rem;margin:1.6rem 0}
.edit-mono .mono-row{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:0.7rem}
.edit-mono .mono-k{color:rgba(255,255,255,0.55);letter-spacing:0.06em;text-transform:uppercase;font-size:0.7rem;font-weight:500}
.edit-mono .mono-v{color:#fff;font-family:var(--ff-num);font-feature-settings:"tnum" 1,"lnum" 1;font-size:1.2rem;font-weight:500}
.edit-mono .mono-v em{font-style:normal;font-size:0.55em;color:var(--accent);font-weight:600;margin-left:0.2em;font-family:var(--ff-body)}
.edit-cap{font-size:0.78rem;color:rgba(255,255,255,0.55);padding-top:1rem;border-top:1px solid rgba(255,255,255,0.12);letter-spacing:0.04em}

/* ---- News cards (with thumbnail) ---- */
.news-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-m)}
.news-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:all var(--dur) var(--ease)}
.news-card:hover{transform:translateY(-5px)}
.news-card .thumb{aspect-ratio:16/10;overflow:hidden}
.news-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.news-card:hover .thumb img{transform:scale(1.04)}
.news-card .nc-body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:0.7rem;flex:1}
.news-card .nc-meta{display:flex;align-items:center;gap:0.7rem}
.news-card .date{font-family:var(--ff-label);font-size:0.78rem;color:var(--mute);font-weight:600;font-feature-settings:"tnum" 1;letter-spacing:0.01em;white-space:nowrap}
.news-card .tag{font-family:var(--ff-latin);font-size:0.64rem;letter-spacing:0.04em;font-weight:700;padding:0.22rem 0.6rem;border-radius:var(--pill);color:var(--navy-ink);border:1px solid var(--line-2);text-transform:uppercase}
.news-card .tag.press{color:var(--accent);border-color:var(--accent)}
.news-card .tag.report{color:var(--green);border-color:var(--green)}
.news-card .tag.guide{color:var(--blue);border-color:var(--blue)}
.news-card .nc-title{font-size:0.94rem;color:var(--ink);font-weight:600;line-height:1.55;flex:1}
.news-card:hover .nc-title{color:var(--accent)}

@media(max-width:980px){.media-row{grid-template-columns:1fr;gap:2rem}.media-row.reverse .m-text{order:1}.media-row.reverse .m-img{order:2}.news-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.news-cards{grid-template-columns:1fr}}

/* ===================== Component Gallery additions ===================== */

/* ---- Alert (重要なお知らせバナー) ---- */
.alert-banner{background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:0.86rem;color:var(--ink);position:relative;z-index:60}
.alert-banner .wrap{display:flex;align-items:center;gap:1rem;min-height:46px;flex-wrap:wrap;padding-top:0.55rem;padding-bottom:0.55rem}
.alert-banner .ab-tag{font-family:var(--ff-latin);font-size:0.66rem;letter-spacing:0.12em;font-weight:700;color:#fff;background:var(--accent);padding:0.2rem 0.6rem;border-radius:var(--pill);text-transform:uppercase;white-space:nowrap}
.alert-banner .ab-msg{color:var(--ink);font-weight:500}
.alert-banner .ab-link{margin-left:auto;display:inline-flex;align-items:center;gap:0.4rem;color:var(--accent);font-weight:700;font-size:0.84rem;transition:color .3s var(--ease)}
.alert-banner .ab-link svg{width:1em;height:1em;transition:transform .3s var(--ease)}
.alert-banner .ab-link:hover svg{transform:translateX(3px)}

/* ---- Icon button (used by search trigger) ---- */
.icon-btn{width:42px;height:42px;border-radius:var(--pill);border:1px solid var(--line-2);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;transition:all .3s var(--ease)}
.icon-btn:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---- Search input + popover (header) ---- */
.search{position:relative}
.search summary{list-style:none}
.search summary::-webkit-details-marker{display:none}
.search[open] .search-pop{opacity:1;visibility:visible;transform:translateY(0)}
.search-pop{position:absolute;top:calc(100% + 12px);right:0;min-width:320px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 30px 60px -24px rgba(15,24,56,0.32);padding:1rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease);z-index:80}
.search-form{display:flex;align-items:center;gap:0.4rem}
.search-form input{flex:1;font-family:var(--ff-body);font-size:0.95rem;padding:0.7rem 0.9rem;border:1.5px solid var(--line-field);border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink);outline:none;transition:border-color .25s}
.search-form input:focus{border-color:var(--accent);background:var(--card)}
.search-form button{padding:0.7rem 1rem;border:none;background:var(--navy-ink);color:#fff;border-radius:var(--r-sm);font-weight:700;font-size:0.86rem;cursor:pointer}
.search-form button:hover{background:var(--accent)}
.search-hints{margin-top:0.8rem;display:flex;flex-wrap:wrap;gap:0.4rem}
.search-hints span{font-size:0.74rem;color:var(--mute);font-weight:500}
.search-hints a{font-size:0.74rem;padding:0.2rem 0.65rem;border:1px solid var(--line);border-radius:var(--pill);color:var(--text);background:var(--paper-2);transition:all .25s}
.search-hints a:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Stepper (相談・通報の流れ) ---- */
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;counter-reset:step;list-style:none}
.stepper .step{position:relative;padding:0 1.4rem 0 0}
.stepper .step::before{content:"";position:absolute;left:18px;right:0;top:18px;height:2px;background:var(--line-2);z-index:0}
.stepper .step:last-child::before{display:none}
.stepper .step-num{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;background:var(--card);border:2px solid var(--accent);color:var(--accent);font-family:var(--ff-latin);font-weight:800;font-size:0.92rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem}
.stepper .step.done .step-num{background:var(--accent);color:#fff}
.stepper .step-title{font-family:var(--ff-display);font-weight:700;font-size:1.1rem;color:var(--ink);margin-bottom:0.5rem;letter-spacing:0.04em}
.stepper .step-desc{font-size:0.9rem;color:var(--text);line-height:1.8;max-width:22ch}

/* ---- Pagination ---- */
.pagination{display:flex;align-items:center;justify-content:center;gap:0.4rem;margin-top:2.5rem}
.pagination a,.pagination .ellipsis{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--ff-latin);font-size:0.88rem;color:var(--text);font-weight:600;background:var(--card);transition:all .25s}
.pagination .ellipsis{border:none;background:transparent;color:var(--mute)}
.pagination a:hover{border-color:var(--ink);color:var(--ink)}
.pagination a.current{background:var(--navy-ink);color:#fff;border-color:var(--navy-ink)}
.pagination .nav-arrow{padding:0 0.9rem;gap:0.4rem}
.pagination .nav-arrow.disabled{opacity:0.35;pointer-events:none}

/* ---- Tabs (segmented links) ---- */
.tabs{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--pill);padding:4px;background:var(--paper-2)}
.tabs a{padding:0.55rem 1.2rem;font-size:0.88rem;font-weight:600;color:var(--text);border-radius:var(--pill);transition:all .25s}
.tabs a:hover{color:var(--ink)}
.tabs a.active{background:var(--card);color:var(--ink);border:1px solid var(--line)}

/* ---- Part 5 a11y enhancements（開示集合 / ステッパー / タブ / ページネーション）---- */
/* FAQ : hover と開状態の背景フィードバック + 開いている行の左罫（blur/spread 0 の inset 罫線。drop shadow ではない） */
.faq details[open]>summary{box-shadow:inset 3px 0 0 var(--accent)}
/* 連番アコーディオン : JS 無効時の details[open] フォールバック + 開いている行の左罫 */
.accordion details[open] .ac-pm::after{transform:scaleY(0)}
.accordion details[open] .ac-pm::before{transform:rotate(180deg)}
.accordion details[open] .ac-no{color:var(--ink)}
.accordion details[open]>summary{box-shadow:inset 3px 0 0 var(--accent)}
/* ステッパー : コネクタを 3:1 達成のヘアライン(--line-field 3.56)へ、完了区間は accent。現在/利用不可の状態を追加 */
.stepper .step::before{background:var(--line-field)}
.stepper .step.done::before{background:var(--accent)}
.stepper .step.current .step-num{background:var(--accent-soft);border-color:var(--accent);color:var(--navy-ink)}
.stepper .step.is-disabled .step-num{border-color:var(--line-2);color:var(--mute)}
/* タブ : pill 形状に合わせた focus、非アクティブ hover の背景差 */
.tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--pill)}
.tabs a:not(.active):hover{background:var(--card)}
/* ページネーション : 濃色塗りの current に focus が重なっても見える二重リング（白ハロー13.14 + accent6.30） */
.pagination a.current:focus-visible{outline:2px solid #fff;outline-offset:-3px;box-shadow:0 0 0 2px var(--accent)}
/* forced-colors : 背景で描く記号・状態色をシステム色でフォールバック（意図的。左罫の inset 罫は高コントラスト時は記号で代替） */
@media (forced-colors:active){
  .faq summary .pm::before,.faq summary .pm::after,.accordion .ac-pm::before,.accordion .ac-pm::after{background:CanvasText}
  .pagination a.current{forced-color-adjust:auto;border:1px solid CanvasText}
}

/* ---- Icon system（インライン SVG・currentColor で着色） ---- */
.ico{display:inline-flex;width:1.5rem;height:1.5rem;color:inherit;flex:0 0 auto}
.ico svg{width:100%;height:100%;display:block}
.ico-sm{width:1.15rem;height:1.15rem}
.ico-lg{width:2.25rem;height:2.25rem}
.ico-circle{display:inline-flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--paper-2);color:var(--navy-ink);flex:0 0 auto}
.ico-circle svg{width:1.7rem;height:1.7rem;display:block}
.ico-circle.is-cert{background:var(--seal-soft);color:var(--seal-ink)}

/* ---- Empty state ---- */
.empty{max-width:32rem;margin:3rem auto;text-align:center;padding:2.4rem 1.6rem}
.empty .empty-ico{width:64px;height:64px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem}
.empty .empty-ico svg{width:28px;height:28px;stroke:var(--mute);fill:none;stroke-width:1.5}
.empty h3{font-family:var(--ff-display);font-size:1.25rem;font-weight:700;color:var(--ink);margin-bottom:0.6rem;letter-spacing:0.04em}
.empty p{color:var(--mute);font-size:0.92rem;line-height:1.8;margin-bottom:1.4rem}

/* ---- Tooltip ---- */
/* F87回避: ::after の attr(data-tip) ではなく実DOM要素(role=tooltip)+aria-describedby で内容をATへ露出。 */
/* トリガは button、hover と focus-within の両方で表示、バブル直下に橋を渡しホバー可能(WCAG 1.4.13)。Esc閉じは実装時にJSで付与。 */
.tip{position:relative;display:inline-block}
.tip-trigger{font:inherit;color:inherit;background:none;border:none;padding:0;border-bottom:1px dotted var(--mute);cursor:help}
.tip-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.tip-pop{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);min-width:max-content;max-width:18rem;background:var(--navy-deep);color:#fff;font-size:0.78rem;font-weight:500;line-height:1.6;padding:0.55rem 0.8rem;border-radius:6px;box-shadow:0 12px 30px -16px rgba(15,24,56,0.4);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:60}
.tip-pop::after{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
.tip:hover .tip-pop,.tip:focus-within .tip-pop{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (forced-colors:active){.tip-pop{background:Canvas;color:CanvasText;border:1px solid CanvasText}}

/* ---- Part 6 : 暗面のフォーカス可視（accent は navy-deep 上 2.90 で 1.4.11 未達 → 白 outline 18.27） ---- */
.site-footer a:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:760px){
  .stepper{grid-template-columns:1fr;gap:var(--space-m)}
  .stepper .step{padding:0}
  .stepper .step::before{display:none}
  .search-pop{position:fixed;left:1rem;right:1rem;top:auto;min-width:0}
  .alert-banner .ab-link{margin-left:0}
}

/* ---- Serif heading optical tuning (Noto Serif JP / Newsreader) ---- */
.display,.hero h1,.sec-head h2,.two-col .lead-h,.media-row .m-text h3,.accordion .ac-t,
.card h3,.idx h3,.feature h3,.tier .t-name,.page-header h1,.cta h2,.numbers-lead .quote,
.sitemap-col h3,.prose h2,.split-card h3,.login-card h2,.faq summary{letter-spacing:0.005em;font-weight:600;font-feature-settings:"palt" 1}
.hero h1{font-weight:600;letter-spacing:0.005em;line-height:1.26}
.numbers-lead .quote{font-weight:500;letter-spacing:0.005em;line-height:1.55}
.sec-head h2{font-weight:600}
.card h3,.idx h3,.feature h3{font-weight:600}
.split-card h3,.cta h2{font-weight:600;letter-spacing:0.005em}

/* ---- Reveal (refined timing/curve) ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition-duration:.01ms !important}.reveal{opacity:1;transform:none}}

/* ---- Responsive ---- */
@media(max-width:1180px){
  .nav-list{display:none}
  .burger{display:flex}
  .nav-cta .btn-solid{display:none}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .emblem{max-width:360px;margin:0 auto}
  .features{grid-template-columns:1fr}
  .index{grid-template-columns:1fr}
  .idx:not(:nth-child(3n)){border-right:none}
  .numbers-grid{grid-template-columns:1fr;gap:2.5rem}
  .split{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .nums{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .sitemap-grid{grid-template-columns:1fr}
  .form .row2{grid-template-columns:1fr}
  .news-row{grid-template-columns:auto 1fr;gap:0.5rem 1rem}
  .news-row .arw{display:none}
  .dl .row{grid-template-columns:1fr;gap:0.3rem}
  .util .left{display:none}
}