/* 型03 スポーティ ― 黒地・赤の斜めライン・太いゴシック・英字の数字。 */
:root {
  --bg: #0D0F12;
  --surface: #181B20;
  --surface-2: #20242B;
  --ink: #F2F3F5;
  --muted: #9AA2AE;
  --line: #2C313A;
  --brand: #E1251B;
  --brand-deep: #0D0F12;
  --brand-ink: #FFFFFF;
  --brand-soft: #2A1716;
  --accent: #E1251B;
  --accent-soft: #2A1E14;
  --ok: #3DDC84;
  --radius: 6px;
  --radius-sm: 4px;
  --btn-radius: 4px;
  --header-bg: #0D0F12;
  --splash-bg: #0D0F12;
  --hero-band: #0D0F12;
  --hero-band-height: 0px;
  --footer-bg: #07080A;
  --shadow: 0 0 0 1px #262A31;
  --f-display: "M PLUS 1", "Hiragino Sans", sans-serif;
  --f-body: "M PLUS 1", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-number: "Oswald", "M PLUS 1", sans-serif;
  --name-tracking: .06em;
  color-scheme: dark;
}
body { letter-spacing: .03em; }
.site-header { border-bottom: 2px solid var(--brand); }
.site-header .brand-mark, .splash-mark, .site-footer .brand-mark { color: #fff; }
.brand-name, .splash-company { font-weight: 900; font-style: normal; }
.brand-sub, .splash-en, .eyebrow { font-family: "Oswald", sans-serif; }
.site-tag { background: var(--brand); border-color: var(--brand); color: #fff; opacity: 1; border-radius: 2px; transform: skewX(-12deg); }

/* オープニング：赤い斜め帯が走る */
.splash { overflow: hidden; }
.splash::before {
  content: ""; position: absolute; left: -20%; right: -20%; top: 58%; height: 70px; background: var(--brand);
  transform: rotate(-12deg) translateX(-110%); animation: swipe .8s .2s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes swipe { to { transform: rotate(-12deg) translateX(0); } }
.splash-inner { position: relative; }
.splash-company { font-size: 32px; letter-spacing: .1em; transform: skewX(-8deg); }
.splash-rule { width: 60px; height: 4px; transform: skewX(-30deg); }
.splash-slogan { font-weight: 700; }

/* ヒーロー：斜めにカットした赤ライン */
.hero { background: linear-gradient(170deg, #1B1E23 0 210px, transparent 210px); position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; top: 196px; height: 10px; background: var(--brand); transform: skewY(-4deg); }
.hero .col { position: relative; z-index: 1; padding-top: 18px; }
.slogan-line { font-weight: 900; font-size: 15px; letter-spacing: .1em; text-align: left; color: #fff; padding-bottom: 12px; transform: skewX(-8deg); }
.slogan-line::before { content: ""; display: inline-block; width: 18px; height: 3px; background: var(--brand); vertical-align: middle; margin-right: 8px; }
.profile { border-top: 0; border-left: 4px solid var(--brand); }
.thanks { font-family: var(--f-body); }
.pf-top { grid-template-columns: 104px 1fr; gap: 14px; }
.pf-photo { width: 104px; border-radius: 2px; box-shadow: 6px 6px 0 var(--brand); background: #2A2E35; }
.pf-id h1 { font-weight: 900; font-size: 30px; transform: skewX(-8deg); transform-origin: left; }
.pf-facts li { border-radius: 2px; background: var(--surface-2); }
.pf-facts li.is-badge { background: var(--brand); color: #fff; border-color: var(--brand); }
.passion { font-family: var(--f-body); font-weight: 500; border-left-color: var(--brand); border-radius: 0; background: var(--surface-2); }
.passion .accent { color: #fff; font-weight: 900; }
.btn { font-weight: 900; }
.btn-primary { background: var(--brand); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.btn-secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.contact-lines a { color: #fff; }
.status { --st-bg: rgba(61,220,132,.08); }
.status[data-state="off"] { --st-bg: rgba(225,37,27,.1); }
.tabs { background: transparent; border-radius: 0; padding: 0; gap: 0; border-bottom: 2px solid var(--line); }
.tab { border-radius: 0; padding-block: 8px; font-weight: 900; }
.tab[aria-selected="true"] { background: transparent; color: #fff; box-shadow: inset 0 -3px 0 var(--brand); }
.stat-num { font-size: 28px; color: #fff; font-weight: 700; }
.stat-num small { color: var(--brand); }
.stats { border-color: var(--line); }
.chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px; }
.tile { border-radius: 4px; }
.tile-art { border-radius: 4px; background: var(--brand); transform: skewX(-8deg); }
.tile:nth-child(3n+2) .tile-art { background: #3A3F48; }
.tile:nth-child(3n) .tile-art { background: #6B7280; }
.sec-title { font-weight: 900; font-size: 22px; transform: skewX(-6deg); transform-origin: left; }
.post-featured { border-color: var(--brand); }
.post-tags { color: #FF6B5E; }
.avatar { background: #2A2E35; }
.more-btn { border-radius: 2px; }
.corp-banner { background: linear-gradient(110deg, var(--brand) 0 55%, #1B1E23 55%); }
.corp-banner-text strong { font-weight: 900; }
.dock { background: rgba(13,15,18,.9); }
.page-hero { background: linear-gradient(170deg, #1B1E23 0 80%, var(--brand) 80%); }
.page-hero h1 { font-weight: 900; }
.step::before { border-radius: 2px; transform: skewX(-8deg); }
.result { background: var(--surface-2); }