/* 型04 スマートBtoB ― 白・黒・鮮やかな青。影より線で区切る、整理された見た目。 */
:root {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #F3F5F8;
  --ink: #0E1116;
  --muted: #5C6573;
  --line: #E3E7ED;
  --brand: #2B5BFF;
  --brand-deep: #0E1116;
  --brand-soft: #EAF0FF;
  --accent: #00A99D;
  --accent-soft: #E3F6F4;
  --ok: #00A99D;
  --radius: 12px;
  --radius-sm: 8px;
  --btn-radius: 8px;
  --header-bg: rgba(255,255,255,.92);
  --header-ink: var(--ink);
  --splash-bg: #0E1116;
  --hero-band: transparent;
  --hero-band-height: 0px;
  --footer-bg: #0E1116;
  --shadow: 0 0 0 1px var(--line);
  --f-display: "Inter", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --f-body: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-number: "Inter", sans-serif;
  --name-tracking: .08em;
}
body { letter-spacing: .01em; }
.site-header { border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-header .brand-mark { color: var(--ink); }
.brand-name { letter-spacing: .02em; }
.site-tag { border-color: var(--line); opacity: 1; color: var(--muted); }
.splash-mark, .site-footer .brand-mark { color: #fff; }
.splash { background-image: radial-gradient(rgba(43,91,255,.35) 1px, transparent 1px); background-size: 18px 18px; }
.splash-company { letter-spacing: .04em; }
.splash-rule { background: var(--brand); width: 24px; height: 3px; border-radius: 2px; }
.splash-slogan { font-weight: 500; letter-spacing: .06em; }

/* 写真は中央の丸、名前は大きく中央。上に青いグラデの帯 */
.hero { background: linear-gradient(180deg, var(--brand-soft) 0 120px, var(--bg) 120px); }
.hero .col { padding-top: 16px; }
.slogan-line { color: var(--brand); font-weight: 700; font-size: 12px; letter-spacing: .1em; }
.profile { border-top: 0; padding: 18px 16px 16px; gap: 12px; }
.thanks { font-family: var(--f-body); order: 2; border-bottom: 0; padding: 0; }
.pf-top { order: 1; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 10px; }
.pf-photo { width: 104px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.photo-note { bottom: 8px; left: 16px; right: 16px; border-radius: 999px; }
.pf-id { justify-items: center; }
.pf-role { color: var(--brand); font-weight: 700; }
.pf-id h1 { font-size: 26px; }
.pf-facts { justify-content: center; }
.pf-facts li { background: var(--surface); }
.pf-facts li.is-badge { color: var(--brand); }
.passion { order: 3; font-family: var(--f-body); border-left: 0; border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; }
.passion .accent { color: var(--ink); }
.pf-contact { order: 4; }
.pf-links { order: 5; }
.tabs, .tpanel { order: 6; }
.btn { letter-spacing: .04em; }
.btn-secondary { box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet { background: var(--surface); }
.stat-num { color: var(--ink); font-size: 24px; }
.stat-num small { color: var(--brand); }
.chip { background: var(--surface); border: 1px solid var(--line); }
.tile { border-radius: var(--radius); }
.tile-art { background: var(--brand-soft); border-radius: 10px; }
.tile-art svg path, .tile-art svg rect, .tile-art svg circle { stroke: var(--brand); }
.tile:nth-child(3n+2) .tile-art, .tile:nth-child(3n) .tile-art { background: var(--brand-soft); }
.eyebrow { color: var(--brand); letter-spacing: .16em; }
.sec-title { font-size: 18px; letter-spacing: .02em; }
.post-featured { border: 1px solid var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.corp-banner { background: #0E1116; }
.corp-art { color: var(--brand); }
.corp-banner-text strong { letter-spacing: .04em; }
.page-hero { background: #0E1116; }
.page-hero .eyebrow { color: #7FA0FF; }
.back { color: var(--ink); }