@charset "UTF-8";
/* Google Fonts 読み込み（Inter / Zen Kaku） */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap");

/* フォント変数（英数=Inter / 日本語=Zen Kaku） */
:root{
  --font-sans-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --font-sans: var(--font-sans-latin), var(--font-sans-jp);
}

/* =============== Reset =============== */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,figure,dl,dd,ul,ol,li,fieldset,legend,button,input,select,textarea{margin:0;padding:0}
ul,ol{list-style:none}
blockquote::before,blockquote::after,q::before,q::after{content:''}
button,input,select,textarea{border:0;background:none;font:inherit;color:inherit;outline:none;appearance:none}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;height:auto;display:block}
article,aside,footer,header,nav,section,main,figure,figcaption{display:block}
body{
  font-family: var(--font-sans);        /* ← ここを Inter + Zen Kaku に変更 */
  font-weight: 500;                     /* Inter/Zen Kaku ともに 500 を本文基準に */
  font-size:16px; line-height:1.7; color:#111;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* 見出し・ナビは太めに */
h1,h2,h3,h4,h5,h6,.site-nav a{ font-family: var(--font-sans); font-weight:700; }

/* 英数をInter優先にしたい時のユーティリティ */
.u-latin{ font-family: "Inter", var(--font-sans-jp); }

/* =============== Vars =============== */
:root{ --header-h:64px; }

/* =============== Header =============== */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  z-index:1000; display:flex; align-items:center;
  background:transparent !important; color:#111; transition:color .2s ease;
}
.header-inner{ width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,28px); padding:10px clamp(16px,3vw,28px);
}

/* brand / logo */
.brand{ display:inline-flex; align-items:center; line-height:1; color:inherit }
.custom-logo,.brand img{ height:28px; width:auto; display:block }
@media (min-width:768px){ .custom-logo,.brand img{ height:34px } }

/* nav */
.site-nav{ margin-left:auto }
.site-nav .menu{ display:flex; align-items:center; gap:clamp(14px,2.4vw,32px) }
.site-nav a{ color:currentColor; letter-spacing:.02em }
.site-nav a:hover{ opacity:.86 }

/* ヒーロー上：白基準 + difference で背景に応じて自動反転 */
.site-header.blend-auto.on-hero{
  color:#fff;
  mix-blend-mode:difference;        /* 親にも掛ける */
}
.site-header.blend-auto.on-hero *{
  mix-blend-mode:difference;        /* 子にも掛ける（テキスト/画像/SVG全部反転） */
}

/* SVGロゴは currentColor を強制適用 */
.brand svg{ display:block; height:28px; width:auto }
@media (min-width:768px){ .brand svg{ height:34px } }
.brand svg *{ fill:currentColor !important; stroke:currentColor !important }

/* PNGロゴ利用時のフォールバック（ヒーロー上だけ白化） */
.site-header.on-hero .brand img{ filter:invert(1) brightness(1) }
.site-header:not(.on-hero) .brand img{ filter:none }

/* 本文押し下げ＋ヒーローを被せる */
main{ padding-top:var(--header-h) }
.hero-wrapper{ margin-top:calc(-1 * var(--header-h)) }

/* 管理バー回避 */
body.admin-bar .site-header{ top:32px }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px } }

/* （参考）ヒーローテキスト既存のフォント上書き：Playfair → サンセリフ運用に統一 */
.hero-copy .accent{ font-family: var(--font-sans); font-style:normal; letter-spacing:.02em }

/* =======================
   HUMAN-MADE風 基礎レイヤー
   ======================= */

/* ---- Design Tokens ---- */
:root{
  /* Color */
  --c-bg: #ffffff;
  --c-ink: #111111;
  --c-ink-2: #444;         /* サブ */
  --c-line: #eaeaea;       /* 罫線 */
  --c-accent: #111111;     /* 黒アクセント（HMは黒白強め） */

  /* Type scale (clampでレスポンシブ) */
  --fs-xxl: clamp(40px, 6.5vw, 88px);   /* ヒーロー・大見出し */
  --fs-xl:  clamp(28px, 4.2vw, 56px);   /* セクション見出し */
  --fs-lg:  clamp(20px, 2.4vw, 28px);   /* 中見出し */
  --fs-md:  clamp(16px, 1.6vw, 18px);   /* 本文ベース */
  --fs-sm:  clamp(12px, 1.2vw, 14px);   /* ラベルなど */

  /* Space scale (縦余白を広めに) */
  --sp-0: 0;
  --sp-1: clamp(6px, 0.8vw, 10px);
  --sp-2: clamp(10px, 1.2vw, 16px);
  --sp-3: clamp(16px, 1.8vw, 24px);
  --sp-4: clamp(24px, 2.6vw, 36px);
  --sp-5: clamp(32px, 3.4vw, 48px);
  --sp-6: clamp(48px, 5vw, 80px);
  --sp-7: clamp(64px, 7vw, 120px);

  /* Layout */
  --container: 1200px;      /* 既存containerと整合 */
  --container-wide: 1440px; /* ワイドセクション用 */

  /* Radius（角丸は大きめがHMの雰囲気に合う） */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-xxl: 48px;

  /* Motion */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --dur-quick: .2s;
  --dur: .5s;
}

/* ---- Base ---- */
html{ scroll-behavior: smooth; }
body{
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: var(--fs-md);
  letter-spacing:.02em;
}

/* コンテナ */
.container,
.container-narrow,
.container-wide{
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.container{ max-width: var(--container); }
.container-wide{ max-width: var(--container-wide); }
.container-narrow{ max-width: 880px; }

/* ---- Typography（HMはコントラスト強め・余白広め） ---- */
.h-xxl{ font-size: var(--fs-xxl); line-height: .98; letter-spacing:-.01em; }
.h-xl { font-size: var(--fs-xl);  line-height: 1.05; letter-spacing:-.005em; }
.h-lg { font-size: var(--fs-lg);  line-height: 1.2; }
.lead { font-size: clamp(18px, 2vw, 22px); line-height:1.7; color: var(--c-ink-2); }
.meta { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing:.08em; }

/* 行間と段落の流れを整えるヘルパー */
.flow > * + *{ margin-top: var(--sp-3); }
.flow-lg > * + *{ margin-top: var(--sp-4); }

/* ---- Section rhythm ---- */
.section{ padding-block: var(--sp-6); }
.section-tight{ padding-block: var(--sp-5); }
.section-hero{ padding-block: var(--sp-7); }

/* ---- Buttons（黒白・最小限） ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  height: 48px; padding: 0 18px;
  font-weight:700; border-radius: 999px;
  border:1px solid var(--c-ink); color:var(--c-ink); background:#fff;
  transition: transform var(--dur-quick) var(--e-out), background var(--dur-quick) var(--e-out), color var(--dur-quick) var(--e-out);
}
.btn:hover{ transform: translateY(-1px); background: var(--c-ink); color:#fff; }
.btn--ghost{ background: transparent; }

/* ---- Links（下線はホバーのみ） ---- */
.link{ position:relative; text-decoration:none; }
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin:left;
  transition: transform var(--dur) var(--e-out);
}
.link:hover::after{ transform: scaleX(1); }

/* ---- Grid（カードの“間”を詰めるユーティリティ） ---- */
.grid{ display:grid; gap: var(--sp-3); }
.grid-gapless{ display:grid; gap: 0; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:1024px){ .grid-4{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:640px){  .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr);} }

/* ---- Card（黒背景・大きめ角丸。ホバーで白反転） ---- */
.card{
  position:relative; isolation:isolate;
  border-radius: var(--r-xl);
  background:#000; color:#fff;
  overflow:hidden;
  transition: background var(--dur) var(--e-out), color var(--dur) var(--e-out), transform var(--dur-quick) var(--e-out);
}
.card:hover{ background:#fff; color:#111; transform: translateY(-2px); }
.card__media{ position:relative; aspect-ratio:3/4; }
.card__media > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(1);
  transition: filter var(--dur) var(--e-out), transform var(--dur) var(--e-out);
}
.card:hover .card__media > img{ filter: grayscale(0); transform: scale(1.03); }
.card__body{ padding: var(--sp-3); background: transparent; }
.card__title{ font-size: clamp(16px, 2vw, 20px); font-weight:800; line-height:1.2; }
.card__meta{ font-size: var(--fs-sm); opacity:.75; }

/* （SNIPSのスタッフカードに適用）
   .staff-card → .card、.staff-card__thumb → .card__media、
   .staff-card__body → .card__body に近いルックを移植 */
.staff-grid{ gap:0 !important; }         /* 隙間なし */
.staff-card{ border:none !important; border-radius: var(--r-xl) !important; overflow:hidden; background:#000; color:#fff; }
.staff-card:hover{ background:#fff; color:#111; }
.staff-card__thumb .cover{ filter: grayscale(1); transition: filter var(--dur) var(--e-out), transform var(--dur) var(--e-out); }
.staff-card:hover .staff-card__thumb .cover{ filter: grayscale(0); transform: scale(1.03); }
.staff-card__body{ background: transparent; }

/* ---- Reveal Animations（静かな出現） ---- */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity var(--dur) var(--e-out), transform var(--dur) var(--e-out); }
.reveal.is-inview{ opacity:1; transform: none; }
.reveal-delay-1{ transition-delay: .06s; }
.reveal-delay-2{ transition-delay: .12s; }
.reveal-delay-3{ transition-delay: .18s; }

/* reduced motion 配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .card__media > img,
  .card:hover{ transform:none !important; }
}

/* フル幅コンテナ */
.container-fluid{
  max-width: none;
  width: 100%;
  padding-inline: 0; /* 余白ゼロ＝エッジまで広げる */
}

/* スタッフアーカイブの見出しやフィルターだけは左右に余白を戻す */
.staff-archive .page-title,
.staff-archive .staff-filter,
.staff-archive .group-title{
  padding-inline: clamp(16px, 4vw, 40px);
}

/* カードグリッドは完全フルブリード（隙間なし） */
.staff-archive .staff-grid{
  margin: 0;
  gap: 0 !important;
}