/* ============================================================
   デザイントークン
   ============================================================ */
:root {
  --color-background: #0a0a0a;
  --color-surface: #161616;
  --color-surface-strong: #1e1e1e;
  --color-border: #2a2a2a;
  --color-text: #f2f2f2;
  --color-text-secondary: #a7a7a7;
  --color-text-muted: #858585;
  --color-accent: #ff6a00;
  --color-accent-hover: #ff9134;
  --color-light-surface: #f5f5f5;
  --color-on-light: #0a0a0a;
  --color-focus: #ffb06f;
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Noto Sans JP", system-ui, sans-serif;
  --type-display: clamp(3.5rem, 16vw, 9rem);
  --type-heading-xl: clamp(3.25rem, 11vw, 8rem);
  --type-heading-lg: clamp(2.25rem, 7vw, 4.5rem);
  --type-heading-md: clamp(1.5rem, 4vw, 2rem);
  --type-body: 1rem;
  --type-caption: .75rem;
  --type-label: .8125rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --header-height: 4rem;
  --container: 90rem;
  --transition-fast: 180ms ease;
  --transition-medium: 420ms cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   基本・共通
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); background: var(--color-background); }
body { margin: 0; overflow-x: hidden; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--type-body); line-height: 1.8; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 200; top: var(--space-4); left: var(--space-4); padding: var(--space-3) var(--space-4); transform: translateY(-160%); background: var(--color-text); color: var(--color-background); font-weight: 700; }
.skip-link:focus { transform: none; }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: var(--space-24); }
.section-heading { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 var(--space-4); margin-bottom: var(--space-12); border-top: 2px solid var(--color-accent); padding-top: var(--space-4); }
.section-heading p { grid-row: 1 / 3; margin: 0; color: var(--color-accent); font-family: var(--font-display); font-size: 1.25rem; line-height: 1; }
.section-heading h2 { margin: 0; font-family: var(--font-display); font-size: var(--type-heading-lg); font-weight: 400; line-height: .9; letter-spacing: .01em; }
.section-heading span { color: var(--color-text-secondary); font-size: var(--type-caption); font-weight: 700; letter-spacing: .14em; }
.section-heading--dark h2 { color: var(--color-on-light); }
.section-heading--dark span { color: #5d5d5d; }
.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: var(--space-8); border: 1px solid transparent; padding: .75rem 1.5rem; font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; line-height: 1; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.button--primary { background: var(--color-accent); color: var(--color-on-light); }
.button--primary:hover { background: var(--color-accent-hover); }
.button:active { transform: translateY(1px); }
.button--outline { border-color: var(--color-text); }
.button--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.button[aria-disabled="true"] { cursor: not-allowed; border-color: #707070; background: transparent; color: var(--color-text-secondary); }
.reveal { opacity: 0; transform: translateY(2rem); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header { position: fixed; z-index: 100; inset: 0 0 auto; display: flex; height: var(--header-height); align-items: center; justify-content: space-between; padding-inline: var(--space-4); transition: background var(--transition-medium); }
.site-header.is-scrolled, .site-header.is-menu-open { background: rgb(10 10 10 / 92%); backdrop-filter: blur(14px); }
/* backdrop-filter は fixed 子要素の包含ブロックを作るため、メニュー展開中は解除する（.site-nav の全画面表示が崩れる）。 */
.site-header.is-menu-open { backdrop-filter: none; }
.site-header__logo { position: relative; z-index: 102; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .05em; line-height: 1; }
.site-header__logo span { color: var(--color-accent); }
.menu-toggle { position: relative; z-index: 102; width: 3rem; height: 3rem; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { position: absolute; left: .75rem; width: 1.5rem; height: 2px; background: var(--color-text); transition: transform var(--transition-fast), top var(--transition-fast); }
.menu-toggle span:first-child { top: 1.15rem; }
.menu-toggle span:last-child { top: 1.8rem; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 1.5rem; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 1.5rem; transform: rotate(-45deg); }
.site-nav { position: fixed; z-index: 101; inset: 0; display: flex; visibility: hidden; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); opacity: 0; background: var(--color-background); transition: visibility var(--transition-medium), opacity var(--transition-medium); }
.site-nav.is-open { visibility: visible; opacity: 1; }
.site-nav a { position: relative; font-family: var(--font-display); font-size: 2.5rem; line-height: 1; letter-spacing: .04em; }
.site-nav a::after { position: absolute; right: 0; bottom: -.3rem; left: 0; height: 2px; transform: scaleX(0); background: var(--color-accent); content: ""; transition: transform var(--transition-fast); }
.site-nav a:hover::after, .site-nav a[aria-current="location"]::after { transform: scaleX(1); }
.site-nav a:active { color: var(--color-accent-hover); }
.site-header--static { background: rgb(10 10 10 / 92%); backdrop-filter: blur(14px); }
.site-header__links { display: flex; align-items: center; gap: var(--space-6); font-family: var(--font-body); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.site-header__links a { position: relative; padding-block: var(--space-2); }
.site-header__links a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; transform: scaleX(0); background: var(--color-accent); content: ""; transition: transform var(--transition-fast); }
.site-header__links a:hover::after, .site-header__links a[aria-current="page"]::after { transform: scaleX(1); }

/* ============================================================
   ヒーロー
   ============================================================ */
.hero { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #000; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 15%) 20%, rgb(0 0 0 / 92%) 100%), linear-gradient(90deg, rgb(0 0 0 / 85%) 0%, transparent 80%); }
.hero__content { position: relative; z-index: 1; display: flex; width: min(calc(100% - 2rem), var(--container)); min-height: 100vh; min-height: 100dvh; flex-direction: column; align-items: flex-start; justify-content: flex-end; margin-inline: auto; padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-16); }
.hero__eyebrow { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--type-label); letter-spacing: .16em; line-height: 1.5; }
.hero__eyebrow span { display: block; color: var(--color-text-secondary); font-family: var(--font-body); font-size: .6875rem; font-weight: 700; }
.hero h1 { margin: 0; line-height: .85; }
.hero__name-ja { display: block; font-size: var(--type-display); font-weight: 900; letter-spacing: -.08em; white-space: nowrap; }
.hero__name-en { display: block; margin-top: var(--space-3); font-family: var(--font-display); font-size: clamp(1.1rem, 5vw, 2rem); font-weight: 400; letter-spacing: .17em; }
.hero__lead { max-width: 34rem; margin: var(--space-3) 0 0; color: var(--color-text-secondary); font-size: .75rem; font-weight: 700; line-height: 1.7; }
.hero__catch { margin: var(--space-6) 0; font-size: clamp(1.35rem, 5.5vw, 2.75rem); font-weight: 900; line-height: 1.35; letter-spacing: -.04em; }
/* minmax(0, 1fr) にしないと、nowrap の中身が min-content 幅を押し上げて
   グリッド全体が親からはみ出す（狭い画面で最終セルが欠ける）。
   狭い画面では数字とラベルを縦積みにして確実に収める。 */
.hero__record { display: grid; width: 100%; max-width: 43rem; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid rgb(255 255 255 / 35%); }
.hero__record span { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: .1rem; padding: var(--space-2) var(--space-1); border-right: 1px solid rgb(255 255 255 / 25%); font-family: var(--font-display); font-size: .6875rem; letter-spacing: .04em; white-space: nowrap; }
.hero__record span:last-child { border: 0; }
.hero__record b { font-size: 1.4rem; font-weight: 400; }
.hero__metrics { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 var(--space-6); padding: 0; color: var(--color-text-secondary); font-size: .6875rem; list-style: none; }
.hero__metrics b { color: var(--color-text); }
.scroll-cue { display: none; }

/* ============================================================
   次戦・直近結果
   ============================================================ */
.next-fight { background: var(--color-surface); }
.fight-card { position: relative; border: 1px solid var(--color-border); background: var(--color-background); padding: var(--space-8) var(--space-4); text-align: center; }
.fight-card__status { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--color-text-secondary); font-size: var(--type-label); font-weight: 700; letter-spacing: .16em; }
.fight-card__status::before, .fight-card__status::after { width: 2rem; height: 1px; background: var(--color-accent); content: ""; }
.fight-card__vs { margin: var(--space-6) 0 0; color: var(--color-text-muted); font-family: var(--font-display); font-size: 1rem; letter-spacing: .2em; }
.fight-card__opponent { margin: 0; font-family: var(--font-display); font-size: var(--type-heading-xl); font-weight: 400; line-height: 1; letter-spacing: .12em; }
.fight-card__meta { display: grid; max-width: 40rem; margin: var(--space-8) auto 0; border-top: 1px solid var(--color-border); text-align: left; }
.fight-card__meta div { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.fight-card__meta dt { color: var(--color-text-muted); font-family: var(--font-display); letter-spacing: .12em; }
.fight-card__meta dd { margin: 0; font-weight: 700; }
.fight-card__social { margin: var(--space-6) 0 0; color: var(--color-text-secondary); font-size: .8125rem; }
.fight-card__social a { text-decoration: underline; text-underline-offset: .3em; }
.fight-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.countdown { display: grid; max-width: 42rem; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: var(--space-8) auto 0; background: var(--color-border); }
.countdown span { background: var(--color-surface); padding: var(--space-4) var(--space-2); font-size: .6875rem; letter-spacing: .1em; }
.countdown b { display: block; color: var(--color-accent); font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; line-height: 1; }
.latest-result { border-top: 1px solid var(--color-border); }
.latest-card { display: grid; border-block: 1px solid var(--color-border); }
.latest-card__date { margin: 0; padding: var(--space-4) 0; color: var(--color-text-secondary); font-family: var(--font-display); letter-spacing: .12em; }
.latest-card__main { padding: var(--space-8) 0; }
.latest-card__main h3 { margin: 0; font-size: var(--type-heading-md); line-height: 1.35; }
.latest-card__main h3 span { display: block; margin-bottom: var(--space-2); color: var(--color-text-muted); font-family: var(--font-display); font-size: 1rem; font-weight: 400; letter-spacing: .08em; }
.latest-card__main p { margin: var(--space-3) 0 0; color: var(--color-text-secondary); }
.latest-card__story { padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.latest-card__story strong { display: block; font-size: 1.25rem; }
.latest-card__story a { display: inline-block; margin-top: var(--space-4); color: var(--color-accent); font-family: var(--font-display); letter-spacing: .08em; }

/* ============================================================
   プロフィール
   ============================================================ */
.profile { background: var(--color-surface); }
.profile__lead { display: grid; gap: var(--space-10); }
.profile__photo { position: relative; margin: 0; }
.profile__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 22% center; }
.profile__intro p { margin: 0 0 var(--space-5); color: #d0d0d0; }
.profile__rank { display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--color-border); color: var(--color-text) !important; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .06em; line-height: 1; }
.profile__rank strong { color: var(--color-accent); font-size: 4rem; font-weight: 400; }
.profile__facts { display: grid; margin: var(--space-12) 0 0; border-top: 1px solid var(--color-border); }
.profile__facts div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.profile__facts dt { color: var(--color-text-secondary); font-size: .8125rem; }
.profile__facts dd { margin: 0; font-weight: 700; }

/* ============================================================
   戦績
   ============================================================ */
.record__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); }
.record-stat { min-width: 0; background: var(--color-background); padding: var(--space-6) var(--space-2); text-align: center; }
.record-stat:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--color-border); }
.record-stat__number { display: block; color: var(--color-text-muted); font-family: var(--font-display); font-size: clamp(4rem, 20vw, 12rem); font-weight: 400; line-height: .8; }
.record-stat--wins .record-stat__number { color: var(--color-accent); }
.record-stat__label { display: block; margin-top: var(--space-3); font-family: var(--font-display); font-size: clamp(.8rem, 3vw, 1.35rem); letter-spacing: .06em; }
.record__history { margin-top: var(--space-16); }
.record__history h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--type-heading-md); font-weight: 400; letter-spacing: .06em; }
/* 紹介文の署名 */
.profile__sign { margin-top: var(--space-6); font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .08em; }

/* 戦績の凡例。オレンジのラインが何を指すかを明示する */
.record__legend { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); color: var(--color-text-secondary); font-size: .75rem; }
.record__legend-mark { display: block; width: 3px; height: 1.1rem; flex: none; background: var(--color-accent); }

.record__history h3 span { color: var(--color-text-secondary); font-family: var(--font-body); font-size: .75rem; }
.fight-row { position: relative; display: grid; gap: var(--space-4); margin-bottom: var(--space-3); border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-5) var(--space-4); }
.fight-row--highlight { border-left: 3px solid var(--color-accent); }
.fight-row__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fight-row__no { color: var(--color-text-muted); font-family: var(--font-display); font-size: 1.25rem; }
.result-badge { display: inline-flex; min-width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; font-weight: 900; line-height: 1; }
.result-badge--win { background: var(--color-accent); color: var(--color-on-light); }
.result-badge--loss { background: #6f6f6f; color: #fff; }
.result-badge--draw { border: 1px solid var(--color-text); }
.fight-row__date { margin-left: auto; color: var(--color-text-secondary); font-family: var(--font-display); letter-spacing: .08em; }
.fight-row__opponent h4 { margin: 0; font-size: 1.35rem; }
.fight-row__opponent p, .fight-row__detail p { margin: 0; color: var(--color-text-secondary); font-size: .8125rem; }
.fight-row__detail strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; letter-spacing: .05em; }
.fight-row__title { margin: 0; color: var(--color-text-secondary); font-size: .8125rem; }
.fight-row details { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.fight-row summary { width: max-content; cursor: pointer; color: var(--color-text-secondary); font-size: .75rem; font-weight: 700; }
.fight-row details p { margin: var(--space-2) 0 0; font-family: var(--font-display); letter-spacing: .07em; }

/* ============================================================
   ギャラリー
   ============================================================ */
.gallery { background: var(--color-surface); }
.gallery__filters { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); overflow-x: auto; }
.gallery__filters button { min-width: 4rem; min-height: 2.75rem; border: 1px solid var(--color-border); background: transparent; cursor: pointer; font-size: .75rem; font-weight: 700; letter-spacing: .08em; transition: border-color var(--transition-fast), color var(--transition-fast); }
.gallery__filters button:hover { border-color: var(--color-text-secondary); }
.gallery__filters button:active { border-color: var(--color-accent-hover); color: var(--color-accent-hover); }
.gallery__filters button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; gap: var(--space-2); }
.gallery__item { position: relative; overflow: hidden; border: 0; padding: 0; background: var(--color-surface-strong); cursor: zoom-in; }
.gallery__grid figure.gallery__item { margin: 0; cursor: default; }
/* 拡大できない写真のラベルは常時表示せず、他の写真と同じくホバー時のみ出す。 */
.gallery__grid figure.gallery__item span { background: rgb(10 10 10 / 78%); padding: var(--space-1) var(--space-2); }
.gallery__item:nth-child(1), .gallery__item:nth-child(4) { grid-column: span 2; }
.gallery__item:nth-child(1) { grid-row: span 2; }
.gallery__item:nth-child(5) { max-width: 500px; cursor: default; }
.gallery__item:first-child img { object-position: 62% center; }
.gallery__item[hidden] { display: none; }
.gallery__grid.is-filtered .gallery__item:not([hidden]) { grid-column: span 1; grid-row: span 2; }
.gallery__grid.is-filtered[data-visible-count="1"] { grid-template-columns: 1fr; }
.gallery__grid.is-filtered[data-visible-count="1"] .gallery__item:not([hidden]) { grid-column: 1; min-height: 24rem; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease, filter 500ms ease; }
.gallery__item:hover img { transform: scale(1.025); filter: brightness(.78); }
.gallery__item:active img { transform: scale(1.01); filter: brightness(.7); }
.gallery__grid figure.gallery__item:hover img { transform: none; filter: none; }
.gallery__item span { position: absolute; bottom: var(--space-3); left: var(--space-3); opacity: 0; color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; transition: opacity var(--transition-fast); }
.gallery__item:hover span, .gallery__item:focus-visible span { opacity: 1; }

/* ============================================================
   ブログ
   ============================================================ */
.blog { background: var(--color-background); }
.blog-teaser { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.blog-teaser__lead { margin: 0; color: var(--color-text-secondary); }
#blog-latest, .blog-recent { width: 100%; max-width: 56rem; }
.blog-teaser__card { display: block; width: 100%; border: 1px solid var(--color-border); padding: var(--space-6); background: var(--color-surface); transition: border-color var(--transition-fast), background var(--transition-fast); }
.blog-teaser__card:hover { border-color: var(--color-accent); background: var(--color-surface-strong); }
.blog-teaser__label { margin: 0 0 var(--space-6); color: var(--color-accent); font-family: var(--font-display); letter-spacing: .12em; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--type-caption); letter-spacing: .1em; }
.blog-card__meta span { border-left: 1px solid var(--color-border); padding-left: var(--space-3); color: var(--color-text-secondary); font-family: var(--font-body); font-weight: 700; letter-spacing: .08em; }
.blog-teaser__card h3 { margin: var(--space-4) 0 0; font-size: var(--type-heading-md); font-weight: 900; line-height: 1.35; letter-spacing: -.02em; }
.blog-card__excerpt { margin: var(--space-4) 0 0; color: var(--color-text-secondary); }
.blog-card__more { display: inline-block; margin-top: var(--space-6); color: var(--color-accent); font-family: var(--font-display); font-size: var(--type-label); letter-spacing: .1em; }
.blog-recent__label { margin: 0 0 var(--space-3); color: var(--color-accent); font-family: var(--font-display); letter-spacing: .12em; }
.blog-recent__list { margin: 0; border-top: 1px solid var(--color-border); padding: 0; list-style: none; }
.blog-recent__list li { border-bottom: 1px solid var(--color-border); }
.blog-recent__list a { display: flex; min-height: 44px; flex-direction: column; justify-content: center; gap: var(--space-1); padding: var(--space-3) var(--space-2); }
.blog-recent__list time { flex: 0 0 auto; color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--type-caption); letter-spacing: .1em; }
.blog-recent__list span { min-width: 0; overflow-wrap: anywhere; font-weight: 700; line-height: 1.6; transition: color var(--transition-fast); }
.blog-recent__list a:hover span { color: var(--color-accent); }
.blog-head { padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16); border-bottom: 1px solid var(--color-border); }
.blog-head__eyebrow { margin: 0; color: var(--color-accent); font-size: var(--type-label); font-weight: 700; letter-spacing: .14em; }
.blog-head h1 { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: var(--type-heading-xl); font-weight: 400; line-height: .9; letter-spacing: .01em; }
.blog-head__lead { max-width: 44rem; margin: var(--space-8) 0 0; color: var(--color-text-secondary); }
.blog-list { border-top: 1px solid var(--color-border); }
.blog-card { display: grid; gap: var(--space-5); border-bottom: 1px solid var(--color-border); padding: var(--space-6) var(--space-4); transition: background var(--transition-fast); }
.blog-card:hover { background: var(--color-surface); }
.blog-card__content h2 { margin: 0; font-size: var(--type-heading-md); font-weight: 900; line-height: 1.35; letter-spacing: -.02em; }
.article { padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-24); }
.article .container { width: min(calc(100% - 2rem), 44rem); margin-inline: auto; }
.breadcrumb { color: var(--color-text-muted); font-size: var(--type-caption); }
.breadcrumb a { transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-accent); }
.article__head { margin-top: var(--space-12); border-top: 2px solid var(--color-accent); padding-top: var(--space-5); }
.article__head h1 { margin: var(--space-5) 0 0; font-size: clamp(2rem, 7vw, 3.5rem); font-weight: 900; line-height: 1.25; letter-spacing: -.04em; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--type-label); letter-spacing: .1em; }
.article__category { border: 1px solid var(--color-border); padding: var(--space-1) var(--space-3); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--type-caption); font-weight: 700; letter-spacing: .06em; }
.article__body { margin-top: var(--space-12); }
.article__body p { margin: 0 0 var(--space-6); font-size: 1.0625rem; line-height: 2.1; }
.article__figure { margin: 0 0 var(--space-8); }
.article__figure img { display: block; width: 100%; height: auto; }
.article__link a { color: var(--color-accent); text-decoration: underline; text-underline-offset: .3em; }
.article__share { margin-top: var(--space-12); border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.article__share p { margin: 0 0 var(--space-3); }
.article__share p:last-child { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.article__share a { color: var(--color-accent); text-decoration: underline; text-underline-offset: .3em; }
.article-nav { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-12); border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.article-nav a { display: flex; flex-direction: column; border: 1px solid var(--color-border); padding: var(--space-4); transition: border-color var(--transition-fast), background var(--transition-fast); }
.article-nav a:hover { border-color: var(--color-accent); background: var(--color-surface); }
.article-nav small { color: var(--color-text-muted); font-size: var(--type-caption); font-weight: 700; }
.article-nav span { margin-top: var(--space-1); font-weight: 700; }
.article-nav__list { text-align: center; }

/* ============================================================
   SNS・スポンサー・フッター
   ============================================================ */
.sns { overflow: hidden; background: var(--color-background); }
.sns__inner { display: grid; gap: var(--space-8); }
.sns__lead { margin: 0; color: var(--color-text-secondary); font-size: .9375rem; }
.sns__links { display: grid; gap: var(--space-3); }
/* サービス名とアカウント名を併記し、どこへ飛ぶリンクか分かるようにする */
.sns__link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); border: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); transition: border-color var(--transition-fast), background var(--transition-fast); }
.sns__link:hover { border-color: var(--color-accent); background: var(--color-surface); }
.sns__link:active { border-color: var(--color-accent-hover); }
.sns__icon { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; background: var(--color-surface-strong); }
.sns__link:hover .sns__icon { background: var(--color-accent); color: var(--color-on-light); }
.sns__icon svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.sns__meta { display: grid; gap: .1rem; }
.sns__meta b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; letter-spacing: .06em; line-height: 1.2; }
.sns__meta small { color: var(--color-text-secondary); font-size: .8125rem; }
.sns__arrow { color: var(--color-text-muted); font-size: 1.1rem; }
.sns__link:hover .sns__arrow { color: var(--color-accent); }
.sponsor { border-top: .75rem solid var(--color-surface-strong); background: var(--color-light-surface); color: var(--color-on-light); }
.sponsor__logos { display: grid; grid-template-columns: 1fr; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; border-left: 1px solid #d2d2d2; }
.sponsor__logo { display: flex; min-height: 6.5rem; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; padding: var(--space-3); background: #fff; color: #666; font-family: var(--font-display); letter-spacing: .12em; }
/* ロゴは縦横比を保ったまま、マス目に収まる範囲で表示する。
   width / height は実寸をHTML側で指定しているため、拡大・縮小しても比率は変わらない。 */
.sponsor__logo img { width: auto; height: auto; max-width: 100%; max-height: 7rem; object-fit: contain; }
/* 上段（ご支援いただいているスポンサー）は枠もロゴも大きく見せる。 */
.sponsor__logos--primary .sponsor__logo { min-height: 8.5rem; padding: var(--space-5); }
.sponsor__logos--primary .sponsor__logo img { max-height: 6rem; }
/* 下段は数が多いため、スマートフォンでは2列に並べる。 */
.sponsor__logos--support { grid-template-columns: repeat(2, 1fr); margin-top: var(--space-8); }
.sponsor__logos--support .sponsor__logo img { max-height: 4rem; }
/* 最終行の空きを埋めるマス目。既定（2列）では、はみ出す分を隠しておく。 */
.sponsor__logo--filler { display: none; }
.sponsor__logo--filler-narrow { display: flex; }
.sponsor__logo--placeholder::before { width: 2.25rem; height: 1px; background: #ccc; content: ""; }
.sponsor__logo[href]:hover { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.sponsor__recruit { display: grid; margin-top: var(--space-16); border-top: 1px solid #bdbdbd; padding-top: var(--space-8); }
.sponsor__eyebrow { color: #606060; font-family: var(--font-display); letter-spacing: .14em; }
.sponsor__recruit h3 { margin: var(--space-3) 0 var(--space-6); font-size: var(--type-heading-lg); font-weight: 900; line-height: 1.15; letter-spacing: -.06em; }
.sponsor__recruit-body > p { max-width: 46rem; margin: 0; line-height: 2; }
.sponsor__recruit .button { margin-top: var(--space-5); background: var(--color-on-light); color: var(--color-light-surface); }
.sponsor__recruit .button:hover:not([aria-disabled="true"]) { background: var(--color-accent); color: var(--color-on-light); }
.sponsor__recruit .button[aria-disabled="true"] { border-color: #6b6b6b; background: transparent; color: #555; }
.sponsor__notice { margin: var(--space-2) 0 0; color: #5a5a5a; font-size: .75rem; line-height: 1.7; }
/* スポンサー申し込み窓口（公式LINE）。QRとボタンを横並びにする。 */
.sponsor__line { display: flex; margin-top: var(--space-5); flex-wrap: wrap; align-items: center; gap: var(--space-5); }
/* スマートフォンでは自分の画面のQRを読み取れないため、既定では隠してボタンに集約する。 */
.sponsor__qr { display: none; flex: 0 0 auto; border: 1px solid #d2d2d2; padding: var(--space-2); background: #fff; line-height: 0; }
.sponsor__qr img { width: 7.5rem; height: auto; }
.sponsor__qr:hover { border-color: var(--color-accent); }
.sponsor__line-body { flex: 1 1 14rem; }
.sponsor__line-body .button { margin-top: 0; }
/* LINEブランドカラー。緑地に白文字で、ひと目でLINEだと分かるようにする。 */
.sponsor__recruit .button--line { border-color: #06c755; background: #06c755; color: #fff; }
.sponsor__recruit .button--line:hover:not([aria-disabled="true"]) { border-color: #05a445; background: #05a445; color: #fff; }
/* QRの案内文はQRが見えている画面でのみ意味があるため、QRを隠す幅では非表示にする。 */
.sponsor__notice--qr { display: none; }
.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-12); }
.site-footer__inner { display: grid; gap: var(--space-8); color: var(--color-text-secondary); font-size: .6875rem; line-height: 1.7; }
.site-footer__logo { color: var(--color-text); font-family: var(--font-display); font-size: 1.8rem; line-height: .9; letter-spacing: .06em; }
.site-footer p { margin: 0 0 var(--space-2); }
.site-footer__top { width: max-content; border-bottom: 1px solid var(--color-text-secondary); font-family: var(--font-display); font-size: .8125rem; letter-spacing: .1em; }

/* ============================================================
   ライトボックス
   ============================================================ */
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; padding: 0; background: rgb(0 0 0 / 94%); color: #fff; }
.lightbox[open] { display: grid; grid-template-columns: 3.5rem 1fr 3.5rem; place-items: center; }
.lightbox::backdrop { background: rgb(0 0 0 / 88%); }
.lightbox figure { display: grid; max-width: min(78rem, calc(100vw - 7rem)); max-height: 88vh; margin: 0; place-items: center; }
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.lightbox figcaption { padding-top: var(--space-3); color: #c5c5c5; font-size: .75rem; text-align: center; }
.lightbox button { border: 0; background: transparent; cursor: pointer; }
.lightbox__close { position: fixed; z-index: 2; top: var(--space-4); right: var(--space-4); width: 3rem; height: 3rem; font-size: 2rem; }
.lightbox__nav { width: 3rem; height: 3rem; font-size: 2.5rem; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (min-width: 600px) {
  .sponsor__qr { display: block; }
  .sponsor__notice--qr { display: block; }
}

@media (min-width: 768px) {
  :root { --header-height: 4.5rem; --type-display: clamp(5.5rem, 11vw, 10rem); }
  .container, .hero__content { width: min(calc(100% - 4rem), var(--container)); }
  .section { padding-block: var(--space-32); }
  .site-header { padding-inline: var(--space-8); }
  .hero__catch br { display: none; }
  .hero__record span { flex-direction: row; align-items: baseline; gap: .4rem; padding: var(--space-3); font-size: .875rem; }
  .hero__record b { font-size: 1.8rem; }
  .fight-card { padding: var(--space-12); }
  .latest-card { grid-template-columns: 10rem 1fr minmax(18rem, .7fr); align-items: stretch; }
  .latest-card__date { padding: var(--space-8); }
  .latest-card__main { border-inline: 1px solid var(--color-border); padding: var(--space-8); }
  .latest-card__story { border-top: 0; padding: var(--space-8); }
  .profile__lead { grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); align-items: start; }
  .profile__photo { position: sticky; top: calc(var(--header-height) + var(--space-6)); }
  .profile__photo img { aspect-ratio: 4 / 5; object-position: 42% 30%; }
  .profile__facts { grid-template-columns: repeat(2, 1fr); }
  .profile__facts div:nth-child(odd) { padding-right: var(--space-6); }
  .profile__facts div:nth-child(even) { border-left: 1px solid var(--color-border); padding-left: var(--space-6); }
  .record__summary { grid-template-columns: 1.2fr repeat(3, 1fr); align-items: stretch; }
  .record-stat:first-child { grid-column: auto; border-right: 1px solid var(--color-border); border-bottom: 0; }
  .record-stat__number { font-size: clamp(6rem, 12vw, 11rem); }
  /* 日付／対戦相手／結果バッジ／決着／区分 の5カラム。
     バッジと決着詳細は別カラムに分けること（同一セルに置くと重なる）。 */
  .fight-row { grid-template-columns: 6rem minmax(8rem, 1fr) 2.75rem 8rem minmax(9rem, 1.1fr); align-items: center; }
  .fight-row__top { display: contents; }
  .fight-row__no { display: none; }
  .fight-row__date { grid-column: 1; grid-row: 1; margin: 0; }
  .fight-row__opponent { grid-column: 2; grid-row: 1; }
  .fight-row__top .result-badge { grid-column: 3; grid-row: 1; }
  .fight-row__detail { grid-column: 4; grid-row: 1; }
  .fight-row__title { grid-column: 5; grid-row: 1; }
  .fight-row details { grid-column: 5; grid-row: 2; border: 0; padding: 0; }
  .gallery__grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 11rem; gap: var(--space-3); }
  .gallery__item:nth-child(1) { grid-column: 1 / 8; grid-row: span 3; }
  .gallery__item:nth-child(2) { grid-column: 8 / 13; grid-row: span 2; }
  .gallery__item:nth-child(3) { grid-column: 8 / 11; grid-row: span 2; }
  .gallery__item:nth-child(4) { grid-column: 1 / 8; grid-row: span 2; }
  .gallery__item:nth-child(5) { grid-column: 11 / 13; grid-row: span 2; }
  .gallery__item:nth-child(6) { grid-column: 1 / 5; grid-row: span 2; }
  .gallery__item:nth-child(7) { grid-column: 5 / 9; grid-row: span 2; }
  .gallery__item:nth-child(8) { grid-column: 9 / 13; grid-row: span 2; }
  .gallery__grid.is-filtered { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 14rem; }
  .gallery__grid.is-filtered .gallery__item:not([hidden]) { grid-column: span 1; grid-row: span 2; }
  .gallery__grid.is-filtered[data-visible-count="1"] { max-width: 56rem; grid-template-columns: 1fr; }
  .blog-teaser__card { padding: var(--space-10); }
  .blog-recent__list a { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-6); padding-inline: var(--space-4); }
  .blog-recent__list time { flex-basis: 7rem; }
  .blog-card { grid-template-columns: 8rem 1fr; gap: var(--space-8); padding: var(--space-8); }
  .article .container { width: min(calc(100% - 4rem), 44rem); }
  .article-nav { display: grid; grid-template-columns: 1fr 10rem 1fr; align-items: stretch; }
  .article-nav__newer { grid-column: 1; }
  .article-nav__list { grid-column: 2; }
  .article-nav__older { grid-column: 3; text-align: right; }
  .sns__inner { grid-template-columns: 1fr minmax(20rem, .8fr); align-items: center; gap: var(--space-12); }
  .sns__lead { font-size: 1rem; }
  .sponsor__logos { grid-template-columns: repeat(4, 1fr); }
  .sponsor__logos--primary { grid-template-columns: repeat(3, 1fr); }
  .sponsor__logos--primary .sponsor__logo { min-height: 10rem; }
  .sponsor__logos--primary .sponsor__logo img { max-height: 7rem; }
  .sponsor__logos--support .sponsor__logo img { max-height: 4.5rem; }
  /* 4列になるため、埋めるマス目をすべて表示する。 */
  .sponsor__logo--filler { display: flex; }
  .sponsor__recruit { grid-template-columns: minmax(17rem, .8fr) minmax(24rem, 1.2fr); }
  .sponsor__recruit .sponsor__eyebrow, .sponsor__recruit h3 { grid-column: 1; }
  .sponsor__recruit-body { grid-column: 2; grid-row: 1 / 3; }
  .site-footer__inner { grid-template-columns: 1fr 2fr auto; align-items: end; }
}

/* 画面の高さが条件のため min-width では表現できず、ここだけ max-width を使う。
   縦の短い端末で、ヒーローの中身が1画面に収まらなくなるのを防ぐ調整。 */
@media (max-width: 767px) and (max-height: 720px) {
  .hero__content { padding-bottom: var(--space-6); }
  .hero__eyebrow { margin-bottom: var(--space-2); }
  .hero__name-ja { font-size: clamp(3rem, 14vw, 4rem); }
  .hero__catch { margin-block: var(--space-3); font-size: 1.2rem; }
  .hero__record span { padding-block: var(--space-1); font-size: .625rem; }
  .hero__record b { font-size: 1.15rem; }
  .hero__metrics { margin-block: var(--space-2) var(--space-3); }
  .hero .button { min-height: 2.75rem; }
}

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .site-nav { position: static; display: flex; visibility: visible; flex-direction: row; gap: var(--space-8); opacity: 1; background: none; }
  .site-nav a { font-family: var(--font-body); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; }
  .hero__image { object-position: 55% center; }
  .hero__content { padding-bottom: var(--space-16); }
  .hero__catch { margin: var(--space-6) 0; }
  .scroll-cue { position: absolute; z-index: 2; right: var(--space-8); bottom: var(--space-8); display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); font-family: var(--font-display); font-size: .625rem; letter-spacing: .18em; writing-mode: vertical-rl; }
  .scroll-cue i { width: 1px; height: 3rem; background: var(--color-text-secondary); animation: scroll-line 1.8s ease-in-out infinite; transform-origin: top; }
  .section-heading { grid-template-columns: 3rem 1fr auto; }
  .section-heading p { grid-row: auto; }
  .section-heading span { align-self: center; }
}

@media (min-width: 1440px) {
  .site-header { padding-inline: max(var(--space-8), calc((100vw - var(--container)) / 2)); }
  .hero__content { padding-bottom: var(--space-20); }
  .profile__intro { padding: var(--space-8); }
  .gallery__grid { grid-auto-rows: 13rem; }
}

@keyframes scroll-line { 0%, 100% { transform: scaleY(.25); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}