/* ============================================================
   JAGAM Portfolio - style.css
   赤×黒のストリート/グラフィティ・エディトリアル
   ============================================================ */

/* --- ユーザー指定の5書体(自前ホスト) --- */
@font-face {
  font-family: "Dela Gothic One";
  src: url("../assets/fonts/DelaGothicOne-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FoglihtenBlackPcs";
  src: url("../assets/fonts/FoglihtenBlackPcs.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Escumasia";
  src: url("../assets/fonts/Escumasia-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Koruri";
  src: url("../assets/fonts/Koruri-Extrabold.ttf") format("truetype");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rounded Mplus 1c";
  src: url("../assets/fonts/RoundedMplus1c-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* --- 指定カラー --- */
  --red-dark: #64141F;
  --red: #E01F3C;
  --black: #101011;
  --surface: #1C1C1F;
  --border: #323235;
  --white: #EDEFF2;
  --green: #40D078;

  --muted: #8a8a90;

  /* --- フォントスタック(ユーザー指定の5書体に限定) ---
     Dela Gothic One / FoglihtenBlackPcs / Escumasia / Koruri Extrabold / Rounded M+ 1c */
  --font-display: "FoglihtenBlackPcs", serif;        /* プロフィール名JAGAMの装飾セリフ黒体 */
  --font-wm:      "Escumasia", serif;                /* 背景透かしJAGAM(ユーザー指定) */
  --font-heavy:   "Koruri", sans-serif;              /* 英字見出し(セクションタイトル/工程数字/小ラベル) */
  --font-impact:  "Dela Gothic One", sans-serif;     /* ヒーローJAGAM/メニューEN/バナーPORTFOLIO */
  --font-bold:    "Koruri", sans-serif;              /* 日本語ボールド(ボタン/タブ/バッジ/フォームラベル) */
  --font-body:    "Rounded Mplus 1c", sans-serif;    /* 本文/メニューJP副題/見出し下小書き */
  --font-hand:    "Rounded Mplus 1c", sans-serif;    /* 手書き風タグライン(5書体中の最も柔らかい丸ゴ) */

  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 韓国語モードは日本語系フォントをハングル対応フォントへ差し替え */
body.lang-ko {
  --font-impact: "Dela Gothic One", "Noto Sans KR", sans-serif; /* 英字はDela、ハングルのみNoto KRで拾う */
  --font-heavy: "Koruri", "Noto Sans KR", sans-serif; /* 小ラベルにハングルが入る場合の取りこぼし防止 */
  --font-bold: "Noto Sans KR", sans-serif;
  --font-body: "Noto Sans KR", sans-serif;
  --font-hand: "Noto Sans KR", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
  /* 透かし(nowrap)等のはみ出しで描画面が横に広がるのをルートで遮断
     (bodyのhiddenだけだとfixed要素の基準面が広がる環境がある) */
  overflow-x: clip;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.75;
  overflow-x: hidden;
  letter-spacing: .01em;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* --- グレイン/ノイズ --- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: linear-gradient(180deg, rgba(16,16,17,.62) 0%, rgba(16,16,17,0) 100%);
  /* 参照画像どおりスプラッシュ(ヒーロー)上ではヘッダーUIを出さない。
     スクロール(is-scrolled)かポートフォリオ(is-solid)で現れる。
     引き渡し前バグ調査で「ヒーロー上でハンバーガーが押せない」と指摘されたが、
     これは不具合ではなく上記の意匠指定によるもの。少しスクロールすればヘッダーは
     現れ、そこからメニューにも言語切替にも到達できるため元の指定に戻した(2026-07-25) */
  opacity: 0; pointer-events: none;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), opacity .4s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-solid {
  opacity: 1; pointer-events: auto;
  background: rgba(16,16,17,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
}
/* ヘッダー下線: 参照画像どおり左側に黒の市松チェッカー → 右はベタ赤 */
.header-underline {
  height: 6px; width: 100%;
  background:
    linear-gradient(90deg, rgba(224,31,60,0) 0%, rgba(224,31,60,0) 20%, var(--red) 38%),
    conic-gradient(#101011 90deg, transparent 0 180deg, #101011 0 270deg, transparent 0) left top / 6px 6px repeat,
    var(--red);
}
.logo-mark {
  display: block; width: 72px; height: 35px; /* 参照実測(1440コンプ換算): 約74×37 */
  background-color: var(--red);
  -webkit-mask: url("../assets/logo.png") no-repeat left center / contain;
  mask: url("../assets/logo.png") no-repeat left center / contain;
  filter: drop-shadow(0 0 16px rgba(224,31,60,.45));
}
.logo-center { position: absolute; left: 50%; transform: translateX(-50%); }
.header-back {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: rgba(28,28,31,.6); transition: .25s var(--ease);
}
.header-back svg { width: 20px; height: 20px; }
.header-back:hover { border-color: var(--red); color: var(--red); }

.header-right { display: flex; align-items: center; gap: 12px; }

/* ヘッダーナビ(PC) */
.header-nav { display: flex; align-items: center; gap: 26px; }
.header-nav a {
  font-family: var(--font-bold); font-size: 14px; letter-spacing: .04em;
  color: var(--white); position: relative; padding: 4px 0; white-space: nowrap;
  transition: color .2s var(--ease);
}
.header-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px;
  background: var(--red); box-shadow: 0 0 10px rgba(224,31,60,.5); transition: right .25s var(--ease);
}
.header-nav a:hover::after, .header-nav a.is-current::after { right: 0; }
.header-nav a.is-current { color: var(--red); }
.header-nav a:hover { color: var(--red); }

/* ヘッダーSNS(PC) */
.header-socials { display: flex; align-items: center; gap: 8px; }
.header-socials a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(28,28,31,.6);
  display: grid; place-items: center; color: var(--white); transition: .2s var(--ease);
}
.header-socials svg { width: 17px; height: 17px; }
.header-socials a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(224,31,60,.28); }

/* 言語切替 */
.lang-switch { display: flex; gap: 4px; background: rgba(28,28,31,.7); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.lang-btn {
  font-family: var(--font-heavy); font-size: 12px; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 999px; color: var(--muted);
  transition: .2s var(--ease);
}
.lang-btn.is-active { background: var(--red); color: var(--white); box-shadow: 0 4px 14px rgba(224,31,60,.4); }
.lang-btn:not(.is-active):hover { color: var(--white); }

/* 参照画像どおりヘッダーはロゴ+ハンバーガーのみ。ナビ/SNS/言語は全幅でメニュー内に集約 */
.header-nav, .header-socials, .site-header .lang-switch { display: none; }
/* 引き渡し前バグ修正1: 作品0件のとき#worksへのナビリンクを無効化した見た目
   (現状header-nav/footer-navは常時非表示のため実際に見える箇所はないが、
   将来ナビが見える変更が入っても壊れないよう安全側で用意しておく) */
a.is-disabled { opacity: .45; cursor: not-allowed; }

/* ハンバーガー(全幅で表示) */
/* 参照実測: ハンバーガーも横長のスタジアム型ピル(約84×42) */
.hamburger { display: grid; width: 84px; height: 42px; border-radius: 999px; background: var(--red); place-content: center; gap: 4px; box-shadow: 0 6px 18px rgba(224,31,60,.35); }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--white); transition: .3s var(--ease); }
.hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* メニュー(ユーザー指定: 全画面にせず右側ドロワーでスライド表示。四辺にハザード縞の額縁) */
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 1100;
  width: min(440px, 90vw);
  background: var(--red);
  display: flex; flex-direction: column;
  visibility: hidden; transform: translateX(102%);
  transition: transform .4s var(--ease), visibility .4s;
  overflow-y: auto; overscroll-behavior: contain;
  /* 四辺のハザード枠はborder-imageで固定(スクロールしても縁に残る)。comp額縁38.6px×k0.38≈16px */
  border: 16px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #101011 0 8px, var(--red) 8px 16px) 16;
  box-shadow: -18px 0 48px rgba(0, 0, 0, .45);
}
.mobile-nav.is-open { visibility: visible; transform: none; }

/* ドロワー化に伴い背面を暗くするバックドロップを復活(クリックで閉じる=app.js側で実装済み) */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(10, 8, 9, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* compを一様縮小k=0.38(@900px高)しvh連動でスケール。比率(JP/EN=0.58等)を厳守 */
.mobile-nav-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(12px, 2vh, 28px) 30px 0; }
.mnav-logo { display: block; width: clamp(44px, 5.75vh, 60px); height: clamp(23px, 3.05vh, 32px); background-color: #fff; -webkit-mask: url("../assets/logo.png") no-repeat left center / contain; mask: url("../assets/logo.png") no-repeat left center / contain; }
.mnav-langs { display: flex; gap: 6px; }
.mobile-nav .mnav-lang {
  min-width: clamp(40px, 5.4vh, 54px); height: clamp(28px, 3.8vh, 42px); padding: 0 8px;
  border: 1.5px solid rgba(255,255,255,.5); border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.8);
  font-family: var(--font-heavy); font-size: clamp(13px, 2.1vh, 20px); letter-spacing: .04em;
  display: grid; place-items: center; transition: .2s var(--ease); box-shadow: none;
}
.mobile-nav .mnav-lang:not(.is-active):hover { border-color: #fff; color: #fff; }
/* ユーザー指摘対応: 枠太さだけでは判別不能 → アクティブは白塗り反転(白ピル+赤文字)で明示 */
.mobile-nav .mnav-lang.is-active { background: #fff; color: var(--red); border-color: #fff; border-width: 1.5px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.mnav-logo, .mnav-close { flex-shrink: 0; }
.mnav-close { width: clamp(46px, 6.45vh, 64px); height: clamp(46px, 6.45vh, 64px); border-radius: 50%; background: #101011; color: #fff; display: grid; place-items: center; transition: transform .25s var(--ease); }
.mnav-close svg { width: clamp(15px, 2vh, 22px); height: clamp(15px, 2vh, 22px); stroke-width: 3.5; }
.mnav-close:hover { transform: rotate(90deg); }

/* 区切り帯(comp実測: 市松2段・帯幅70%地点からソリッド黒へグランジフェード) */
.menu-divider {
  --dvh: clamp(10px, 1.55vh, 22px);
  position: relative; z-index: 3; height: var(--dvh); flex-shrink: 0; margin: clamp(14px, 2.65vh, 38px) 30px clamp(24px, 4.45vh, 62px);
  background:
    linear-gradient(90deg, transparent 42%, rgba(16,16,17,.55) 56%, #101011 70%),
    conic-gradient(#101011 90deg, transparent 0 180deg, #101011 0 270deg, transparent 0) left top / var(--dvh) var(--dvh) repeat;
}
.menu-divider .checker, .menu-divider .bar { display: none; }

.mobile-nav-list { position: relative; z-index: 3; list-style: none; padding: clamp(8px, 1.55vh, 22px) 30px clamp(10px, 2vh, 30px); }
.mobile-nav-list > li { margin-bottom: clamp(26px, 5.3vh, 76px); opacity: 0; transform: translateY(22px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mobile-nav-list > li:last-child { margin-bottom: 0; }
.mobile-nav.is-open .mobile-nav-list > li { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(1) { transition-delay: .06s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(2) { transition-delay: .12s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(3) { transition-delay: .18s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(4) { transition-delay: .24s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(5) { transition-delay: .30s; }
.mobile-nav-list a { display: block; color: #fff; }
/* フォントはユーザー指定5書体から割当。comp比率を厳守: JP/EN=0.58・サブ/EN=0.33。
   vh基準+min()で狭幅保護。上限はドロワー内寸348pxに合わせる(EN44/JP26/サブ15) */
.mi-en { display: block; font-family: var(--font-impact); font-weight: 400; font-size: min(7.3vw, clamp(30px, 4.55vh, 44px)); line-height: 1; letter-spacing: .01em; transition: opacity .2s; }
.mi-jp { display: block; font-family: var(--font-body); font-weight: 400; font-size: min(3.5vw + 8px, clamp(18px, 2.65vh, 26px)); line-height: 1.3; margin-top: clamp(4px, .8vh, 11px); color: rgba(255,255,255,.92); }
.mobile-nav-list > li > a:hover .mi-en { opacity: .78; }
.mi-subs { margin: clamp(3px, .45vh, 7px) 0 0 8px; display: flex; flex-direction: column; gap: 0; }
.mi-subs a { font-family: var(--font-body); font-size: clamp(11px, 1.45vh, 15px); line-height: 1.45; color: rgba(255,255,255,.92); transition: color .2s; }
.mi-subs a:hover { color: #101011; }

/* 参照画像のメニューにSNS行はない(SNSはプロフィールセクションから) */
.mnav-socials { display: none; }

/* ============================================================
   ヒーロー
   ============================================================ */
.hero {
  position: relative; height: 100svh; min-height: 560px;
  display: grid; place-items: center; overflow: hidden;
}
/* 横向きスマホ等の低背ビューポートでは1画面に収める */
@media (max-height: 559px) {
  .hero { min-height: 100svh; }
}
/* mp4本体: ヒーロー全面をcover(画面いっぱい)。縦横比差で上下左右が見切れるのは許容(岡崎指定2026-07-11) */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.hero-video:not([src]) { display: none; }
/* YouTube背景(videoSrcの代替)。hero-bgの上・hero-shadeの下の層。
   レイヤー: 動画iframe(1) < 読込カバー(2)。 */
.hero-embed {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background-color: #121013;
}
/* 動画本体: 16:9をヒーロー全面にcover(画面いっぱい)。上下が見切れるのは許容 */
.hero-embed iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1;
  width: max(100vw, calc(100svh * 16 / 9));
  height: max(100svh, calc(100vw * 9 / 16));
  border: 0;
}
/* 読込中のYouTube UI(サムネ/再生ボタン/スピナー/透かし)を隠す前面カバー。
   再生開始(PLAYING)で is-hidden が付きフェードアウトする。 */
.hero-embed-cover {
  position: absolute; inset: 0; z-index: 2;
  background-color: #121013;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: opacity .6s ease;
}
.hero-embed-cover.is-hidden { opacity: 0; }
/* 参照画像: 黒ベースに四隅の赤いグレイングロー(中央は黒く沈む) */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(48% 55% at 3% 6%, rgba(224,31,60,.52), transparent 70%),
    radial-gradient(38% 45% at 0% 96%, rgba(190,26,52,.34), transparent 70%),
    radial-gradient(55% 68% at 102% 62%, rgba(224,31,60,.5), transparent 72%),
    radial-gradient(42% 45% at 96% 102%, rgba(230,36,64,.55), transparent 70%),
    #121013;
  background-size: 210% 210%, 200% 200%, 210% 210%, 200% 200%, 100% 100%;
  animation: heroShift 16s ease-in-out infinite;
}
/* グローに乗るディゾルブ粒(赤スペックル)。グロー形状のマスクで四隅に限定 */
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.88 0 0 0 0 0.12 0 0 0 0 0.23 0.9 0.9 0.9 0 -1.05'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23s)'/%3E%3C/svg%3E");
  opacity: .5;
  -webkit-mask-image:
    radial-gradient(50% 58% at 3% 6%, #000, transparent 72%),
    radial-gradient(40% 47% at 0% 96%, rgba(0,0,0,.7), transparent 72%),
    radial-gradient(57% 70% at 102% 62%, #000, transparent 74%),
    radial-gradient(44% 47% at 96% 102%, #000, transparent 72%);
  mask-image:
    radial-gradient(50% 58% at 3% 6%, #000, transparent 72%),
    radial-gradient(40% 47% at 0% 96%, rgba(0,0,0,.7), transparent 72%),
    radial-gradient(57% 70% at 102% 62%, #000, transparent 74%),
    radial-gradient(44% 47% at 96% 102%, #000, transparent 72%);
}
/* 全面の微細フィルムグレイン(overlay合成)。中央の暗化は.hero-shadeが担当 */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .22;
}
/* 中央(ロゴ背後)の暗化 */
.hero-shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(65% 55% at 50% 45%, rgba(0,0,0,.5), transparent 75%);
}
@keyframes heroShift {
  0%,100% { background-position: 0% 30%, 0% 100%, 100% 50%, 100% 100%, 0 0; }
  50%     { background-position: 20% 45%, 10% 85%, 85% 40%, 90% 88%, 0 0; }
}
.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 20px; }
.hero-logo {
  font-family: var(--font-impact); /* 参照画像どおりヒーローのJAGAMはDela Gothic One */
  font-size: clamp(56px, 11vw, 150px); /* 参照実測: ロゴ幅は画面幅の約53% */
  line-height: .9; color: var(--white);
  letter-spacing: .01em;
  text-shadow: 0 6px 40px rgba(0,0,0,.6);
}
.scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: grid; justify-items: center; gap: 11px;
  font-family: var(--font-heavy); font-weight: 400; font-size: 10px; letter-spacing: .14em; color: var(--white);
}
.chevrons { display: grid; gap: 2px; }
.chevrons i { width: 7px; height: 7px; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(45deg); animation: chev 1.6s var(--ease) infinite; }
.chevrons i:nth-child(2) { animation-delay: .2s; opacity: .5; }
.chevrons i:nth-child(3) { animation-delay: .4s; opacity: .35; }
@keyframes chev { 0%,100% { transform: rotate(45deg) translate(0,0); opacity: .3; } 50% { opacity: 1; } }

/* ============================================================
   セクション共通
   ============================================================ */
.section { padding: clamp(72px, 12vw, 130px) 0; position: relative; }
/* 参照実測(works/status共通): 見出しブロックは現行より約6px詰まっている */
.section-head { margin-bottom: 24px; }
/* comp実測: 見出しは数字・大見出し共通のディスプレイ体(--font-heavy)・赤い縦バーなし */
.section-title {
  font-family: var(--font-heavy); font-weight: 400;
  font-size: clamp(34px, 5vw, 60px); line-height: .95;
  letter-spacing: .02em; color: #F4F5F7;
  position: relative; display: inline-block;
}
/* Koruri Extrabold・岡崎指定2026-07-18。ko時は言語切替で--font-boldがNoto Sans KRになる */
.section-sub { font-family: var(--font-bold); font-weight: 800; color: var(--muted); font-size: 13px; letter-spacing: .04em; margin-top: 6px; }

/* ============================================================
   プロフィール
   ============================================================ */
.profile { position: relative; padding: clamp(90px, 14vw, 160px) 0 clamp(72px, 10vw, 120px); overflow: hidden; }
/* 参照画像どおり、JGAロゴを濃赤で名前の下半分に重ねて敷く透かし。
   profile-info基準の絶対配置なので、幅が変わっても常に名前に追従する */
/* z-indexを持たせない(スタッキングコンテキストを作らない)ことで、
   透かし(z:-1)はパネルの背面・名前(z:2)はハッチ帯の前面に個別に重なれる */
.profile-info { position: relative; --nfs: clamp(64px, 13.2vw, 190px); }
/* 透かしはテキスト「JAGAM」をEscumasia Regular(ユーザー指定)で敷く。リング等の追加装飾はなし。
   comp実測: fs=名前の2.29倍・名前インク左端+52px・色は--red-darkベタ。
   縦位置は中心固定(162px=1440時の実測中心)+translateYで、縮小時に上へ寄らず中央へ縮む。
   確定仕様(ユーザー指示2026-07-10): comp原寸のままA/Mはカード裏に隠れ、
   カードから飛び出す部分・ビューポート端で切れる部分はそのまま見せる。
   ≤900は1カラムで透かし全体を出すため、ビューポート内に収まるfs上限(下のmin)を維持 */
.profile-bgword {
  position: absolute; z-index: -1;
  left: calc(var(--nfs) * .26); top: 162px; transform: translateY(-50%);
  font-family: var(--font-wm); font-weight: 400; font-style: normal;
  --bgfs: min(calc(var(--nfs) * 2.29),
    calc((100vw - max(0px, 50vw - 720px) - clamp(24px, 3.89vw, 56px) - var(--nfs) * .26 - 24px) / 3.4));
  font-size: var(--bgfs);
  line-height: 1; letter-spacing: 0;
  color: var(--red-dark);
  white-space: nowrap; pointer-events: none; user-select: none;
}
/* ユーザー指示「AMは隠れていてもいいけど、ちゃんと表示してね。
   一部飛び出たりしてもいいから」(2026-07-10・5回目=確定仕様):
   ≥901pxはcomp原寸(2.29×nfs)。A/Mは不透明カードの裏に自然に隠れ、
   カードから飛び出す部分は遮蔽せずそのまま見せる(断片遮蔽clip-pathは撤去)。
   ビューポート外へのはみ出しは.profileのoverflow:hiddenが受ける */
@media (min-width: 901px) {
  .profile-bgword { --bgfs: calc(var(--nfs) * 2.29); }
}
/* minmax(0,1fr): nowrapの名前(min-content約730px)が左カラムを押し広げて
   カード列を潰すのを防ぐ(1frのauto下限対策)。名前はカラム境界を越えて重なるのが正 */
.profile-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
/* comp実測: 名前は約190px(キャップ高86px・インク幅712px)でカード左端に約20〜35px重なる(折り返さない)。
   z:2でハッチ帯・パネルより前面(comp: Mの末端が帯の上に乗る) */
/* FoglihtenBlackPcsは単一ウェイト。900指定だと合成ボールドで字形が崩れるため400 */
.profile-name { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 400; font-size: var(--nfs); line-height: .95; letter-spacing: .02em; white-space: nowrap; }
.profile-role { font-family: var(--font-bold); color: var(--muted); letter-spacing: .08em; font-size: 14px; margin-top: 4px; }
/* 参照実測(1440コンプ換算): SNSは円でなく横長のスタジアム型ピル(約100×48・間隔24px) */
.socials { display: flex; flex-wrap: wrap; gap: 24px; margin: 36px 0 22px; }
.social { width: 98px; height: 48px; border: 1px solid var(--border); border-radius: 999px; display: grid; place-items: center; background: var(--surface); transition: .25s var(--ease); }
.social svg { width: 22px; height: 22px; }
.social:hover { border-color: var(--red); color: var(--red); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(224,31,60,.25); }
/* 参照実測: 封筒アイコン+「：」+アドレス。本文より明るめ・大きめ */
.profile-mail {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--white); font-size: 19px; letter-spacing: .04em; margin-bottom: 26px;
  transition: color .25s var(--ease);
}
.profile-mail svg { width: 28px; height: 28px; flex: none; }
.profile-mail span::before { content: "："; }
.profile-mail:hover { color: var(--red); }
.profile-desc p { font-size: 16px; color: #cfcfd4; }
.profile-tags { font-family: var(--font-heavy); font-size: 12px; letter-spacing: .18em; color: var(--muted); margin: 14px 0 48px; }
/* 参照実測: バッジはコンパクト(高さ約30px)・文字は白系・枠はニュートラル */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-bold); font-size: 13px;
  padding: 6px 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--white);
}
.badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(64,208,120,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(64,208,120,.5); } 70% { box-shadow: 0 0 0 10px rgba(64,208,120,0); } 100% { box-shadow: 0 0 0 0 rgba(64,208,120,0); } }

/* ---- キャラクタービジュアル(comp実測・パネル636×420座標系) ----
   .visual-scene = 横長パネルそのもの。キャラは頭がパネル上200px・
   右指先が右27pxはみ出し、裾はパネル下+5pxでハードカット。
   重なりはDOM順: ハッチ < パネル < スパークル < キャラ < バッジ
   (筆アークswooshはユーザー指示で撤去・2026-07-10) */
.profile-visual { display: flex; justify-content: flex-end; }
/* comp実測(1440): 左右余白56px・パネル636pxは右余白56pxに寄る(左748/右1384)。
   パネル上端=名前キャップトップ+113px(=カラム上端+168px)。プロフィール節だけ
   コンテナを広げてcompの全幅レイアウトを再現する(モバイルは既存の1カラムを維持) */
@media (min-width: 901px) {
  .profile > .container { max-width: 1440px; padding: 0 clamp(24px, 3.89vw, 56px); }
  .profile-visual { margin-top: min(11.67vw, 168px); }
}
/* ハッチはmargin無しでも全幅で.profile内に収まる(375/901/1280/1440で反実仮想実測・クリップなし)。
   旧margin-right:5.2%は「はみ出しクリップ説」による誤修正で、バッジ左見切れ(543-628px帯)・
   1カラム中央ズレ・デスクトップのパネル縮小(636→600px)の回帰だけを生んでいたため撤去(2026-07-18) */
.visual-scene { position: relative; width: 100%; max-width: 636px; aspect-ratio: 636 / 420; }
/* パネル上辺+右辺のL字ハッチ帯(ユーザー確認済み: この全幅フレームが正)。
   「右上のストライプが切れて見える」(岡崎指定2026-07-18)の真因は、top/right 2要素の
   -45deg縞が角で約半周期(6.6px/周期14px)位相ズレして途切れて見えること+
   はみ出し量の不一致(top-4.9%/right4.7%)による右端2px段差。ヒーロー額縁と同じ
   1要素統合で解消: 1つのグラデーション=縞の位相が数学的に連続。はみ出しは4.7%に統一 */
.visual-hatch {
  position: absolute; top: -6.2%; bottom: 0; left: 0; right: -4.7%;
  background: repeating-linear-gradient(-45deg, rgba(220,40,70,.68) 0 6px, transparent 6px 14px);
  /* L字切り抜き: 上帯(高さ6.2/106.2=5.84%)+右帯(幅4.7/104.7=4.49%) */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 95.51% 100%, 95.51% 5.84%, 0 5.84%);
  /* 右帯の下方向フェード(旧--rightのmask 41/48/83%を統合座標系へ換算)。上帯(y<5.84%)は#000域で影響なし */
  -webkit-mask-image: linear-gradient(180deg, #000 0 44.4%, rgba(0,0,0,.4) 51% 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 44.4%, rgba(0,0,0,.4) 51% 84%, transparent 100%);
}
/* ユーザー支給スワッチ準拠(2026-07-10差し替え): クリムゾン円ドットの正方格子(circle 22px接触)
   +明ロゼ#DC4B5Eの星形隙間。旧card-bg.webp+黒フェードは廃止 */
.visual-panel {
  position: absolute; inset: 0;
  background-color: #DC4B5E;
  /* ユーザー指定「赤を8割黒を2割」+「グラデはPORTFOLIOバナー(.ph-redfield)を参考に」(2026-07-10):
     バナーの長いαランプ(25→100%)を縦に移植。黒ベタは上8%のみ、
     74%で完全に赤ドット格子へ溶け、知覚上の黒は上部約2割 */
  background-image:
    linear-gradient(184deg,
      rgb(8,4,6) 0%, rgb(8,4,6) 8%, rgba(8,4,6,.94) 12%,
      rgba(8,4,6,.85) 17%, rgba(8,4,6,.72) 23%, rgba(8,4,6,.58) 29%,
      rgba(8,4,6,.45) 35%, rgba(8,4,6,.32) 42%, rgba(8,4,6,.22) 49%,
      rgba(8,4,6,.12) 57%, rgba(8,4,6,.05) 65%, rgba(8,4,6,0) 74%),
    radial-gradient(circle closest-side, #CB1638 0 97%, transparent 100%);
  background-size: auto, 22px 22px;
}
/* ユーザー指定「ざらざら」: ヒーロー(.hero-bg::after)と同一値のフィルムグレイン(bf0.9/overlay/op.22)。
   ユーザー指定「赤8:黒2」: 上端の黒ベタ(〜8%)はマスクで除外し、遷移帯以降に乗せる */
.visual-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .22;
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, rgba(0,0,0,.6) 18%, #000 30%);
  mask-image: linear-gradient(180deg, transparent 8%, rgba(0,0,0,.6) 18%, #000 30%);
}
/* ユーザー指定「ノイズをもっと粗く」(参照=step-texディゾルブ帯の離散赤粒、2026-07-10):
   旧・雲状ノイズ(bf0.7赤スペックル+bf0.075黒スプレー+bf0.011雲)を全廃し、
   離散粒3層を1枚のSVG(636×420・パネルサイズ追従)に統合。
   レイヤーごとに縦帯マスクが必要なため、CSS maskでなくSVG内のmaskで帯制御:
   f1=まばら赤粒(bf.36/α=8ΣRGB-14.4) 8→34%帯 / f2=密赤粒(bf.28/-13.7) 14→46%帯 /
   f3=黒粒(bf.36/-13.4) 24→62%帯(赤側へ抜ける黒スペック)。
   ユーザー指定「粗くしすぎたのでもうちょっと細かく」でbfを×1.4(.26→.36/.20→.28)、
   「赤8:黒2」で帯を上部の黒→赤遷移部へ移動・赤フィールド(62%以降)は粒なし。
   background-size 100%でstep-tex同様パネル寸法に追従して伸縮する */
.visual-panel::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width=%27636%27%20height=%27420%27%3E%3Cdefs%3E%3Cfilter%20id=%27f1%27%20x=%270%27%20y=%270%27%20width=%27100%25%27%20height=%27100%25%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.36%27%20numOctaves=%272%27%20seed=%2723%27%2F%3E%3CfeColorMatrix%20type=%27matrix%27%20values=%270%200%200%200%200.796%200%200%200%200%200.086%200%200%200%200%200.22%208%208%208%200%20-14.4%27%2F%3E%3C%2Ffilter%3E%3Cfilter%20id=%27f2%27%20x=%270%27%20y=%270%27%20width=%27100%25%27%20height=%27100%25%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.28%27%20numOctaves=%272%27%20seed=%2741%27%2F%3E%3CfeColorMatrix%20type=%27matrix%27%20values=%270%200%200%200%200.796%200%200%200%200%200.086%200%200%200%200%200.22%208%208%208%200%20-13.7%27%2F%3E%3C%2Ffilter%3E%3Cfilter%20id=%27f3%27%20x=%270%27%20y=%270%27%20width=%27100%25%27%20height=%27100%25%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.36%27%20numOctaves=%272%27%20seed=%278%27%2F%3E%3CfeColorMatrix%20type=%27matrix%27%20values=%270%200%200%200%200.03%200%200%200%200%200.01%200%200%200%200%200.02%208%208%208%200%20-13.4%27%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id=%27g1%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%278%25%27%20stop-color=%27white%27%20stop-opacity=%270%27%2F%3E%3Cstop%20offset=%2715%25%27%20stop-color=%27white%27%20stop-opacity=%270.5%27%2F%3E%3Cstop%20offset=%2724%25%27%20stop-color=%27white%27%20stop-opacity=%270.7%27%2F%3E%3Cstop%20offset=%2734%25%27%20stop-color=%27white%27%20stop-opacity=%270%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id=%27g2%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%2714%25%27%20stop-color=%27white%27%20stop-opacity=%270%27%2F%3E%3Cstop%20offset=%2724%25%27%20stop-color=%27white%27%20stop-opacity=%270.55%27%2F%3E%3Cstop%20offset=%2734%25%27%20stop-color=%27white%27%20stop-opacity=%270.7%27%2F%3E%3Cstop%20offset=%2746%25%27%20stop-color=%27white%27%20stop-opacity=%270%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id=%27g3%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%2724%25%27%20stop-color=%27white%27%20stop-opacity=%270%27%2F%3E%3Cstop%20offset=%2736%25%27%20stop-color=%27white%27%20stop-opacity=%270.4%27%2F%3E%3Cstop%20offset=%2750%25%27%20stop-color=%27white%27%20stop-opacity=%270.25%27%2F%3E%3Cstop%20offset=%2762%25%27%20stop-color=%27white%27%20stop-opacity=%270%27%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id=%27m1%27%3E%3Crect%20width=%27636%27%20height=%27420%27%20fill=%27url(%23g1)%27%2F%3E%3C%2Fmask%3E%3Cmask%20id=%27m2%27%3E%3Crect%20width=%27636%27%20height=%27420%27%20fill=%27url(%23g2)%27%2F%3E%3C%2Fmask%3E%3Cmask%20id=%27m3%27%3E%3Crect%20width=%27636%27%20height=%27420%27%20fill=%27url(%23g3)%27%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20width=%27636%27%20height=%27420%27%20filter=%27url(%23f1)%27%20mask=%27url(%23m1)%27%2F%3E%3Crect%20width=%27636%27%20height=%27420%27%20filter=%27url(%23f2)%27%20mask=%27url(%23m2)%27%2F%3E%3Crect%20width=%27636%27%20height=%27420%27%20filter=%27url(%23f3)%27%20mask=%27url(%23m3)%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}
.visual-chara {
  position: absolute; top: -60.7%; bottom: -1.2%; left: -36.9%; right: -8.5%;
  /* z:3=名前(z:2)より前面(ユーザー指定: Mよりキャラが前)。wrapperが左に広いのでクリック透過必須 */
  z-index: 3; pointer-events: none;
  overflow: hidden; /* 下端ハードカット(右手指先はパネル右端+46pxまで出るためright拡張) */
  /* comp実測: 裾カットは5pxのソフトフェード */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 5px), transparent 100%);
}
/* comp実測(テンプレートマッチング・パス3根本修正): 描画幅=パネル×1.677。
   max-width:noneはグローバルimg{max-width:100%}の切り詰め解除(これが縮小・左寄りの根本原因だった)。
   頭頂=パネル上端-204px・右手指先=パネル右端+46px・bbox中心=パネル幅46.1%がcompと一致する */
.visual-chara img { position: absolute; top: -.3%; left: .8%; width: 115.3%; max-width: none; height: auto; }
.visual-badge {
  position: absolute; left: -12.3%; top: 70%; width: 28.3%; aspect-ratio: 1 / 1;
  z-index: 4; /* キャラ(z:3)より前面(comp: バッジはスカートの上に乗る) */
  border-radius: 50%;
  background: #b70d26 url("../assets/icon.png") center / 120% no-repeat;
}

/* ============================================================
   タブ
   ============================================================ */
/* 参照画像: タブは囲みコンテナなしの独立ピル。非アクティブは白アウトライン+白文字 */
.tabs { display: inline-flex; gap: 10px; padding: 0; margin-bottom: 20px; background: transparent; border: none; border-radius: 0; }
/* 参照実測: ピルは高さ約25pxのコンパクトサイズ */
.tab { font-family: var(--font-bold); font-weight: 800; font-size: 12px; letter-spacing: .06em; padding: 5px 16px; border-radius: 999px; border: 1px solid rgba(237,239,242,.75); color: var(--white); transition: .2s var(--ease); }
.tab.is-active { background: var(--red); border-color: var(--red); color: var(--white); box-shadow: 0 6px 16px rgba(224,31,60,.4); }
.tab:not(.is-active):hover { border-color: var(--red); color: var(--red); }
/* WORKS/portfolioタブ: SNSボタン(.social)と同じ縁・色。アクティブは赤#E01F3C(岡崎指定2026-07-18) */
[data-tabs="works"] .tab, [data-tabs="portfolio"] .tab { background: var(--surface); border: 1px solid var(--border); color: var(--white); transition: .25s var(--ease); }
[data-tabs="works"] .tab.is-active, [data-tabs="portfolio"] .tab.is-active { background: var(--red); border-color: var(--red); color: var(--white); box-shadow: none; }
[data-tabs="works"] .tab:not(.is-active):hover, [data-tabs="portfolio"] .tab:not(.is-active):hover { border-color: var(--red); color: var(--red); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(224,31,60,.25); }

/* ============================================================
   WORKS グリッド
   ============================================================ */
/* 参照画像(index): 1行構成=正方形イラスト2枚+ワイド動画1枚(4カラムで動画がspan2) */
.works-grid { display: flex; align-items: flex-start; gap: 12px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(44px, 6vw, 80px) 48px; }
/* 引き渡し前バグ修正1: 引き渡し直後で作品0件のときの空状態メッセージ。
   grid-column:1/-1でportfolio-gridの2カラムをまたいで中央に1行だけ表示する。
   派手な装飾はせず、既存の落ち着いたトーン(mutedカラー)に合わせる */
.portfolio-empty { grid-column: 1 / -1; text-align: center; padding: 64px 24px; color: var(--muted); font-size: 15px; }
.work-card { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.work-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; }
/* 参照画像: worksサムネのみ暗い面に右下から立ち上がる赤いグロー(ギャラリーはフラット) */
.works-grid .work-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(85% 75% at 78% 108%, rgba(224,31,60,.42), transparent 65%); }

/* worksグリッド専用: キャプションなしの直置きサムネ(角丸はPROGRESSカードと統一の12px)。
   枠は#323235(岡崎指定2026-07-18) */
/* max-width: カテゴリfilterで1〜2枚のとき flex-grow でカードが行全幅に膨張するのを防ぐ上限。
   正方形は3枚並び時の幅((100%-gap×2)/3)、映像は「すべて」表示時の幅(=(100%-24px)×16/(9+16+9)=×8/17)で頭打ち。
   3枚揃う通常時は上限=自然幅で行を充填、枚数不足時は左詰めで正常サイズを維持 */
/* 縁2px: サムネが縁の内側いっぱいに敷かれるため、1pxの#323235は明るい画像と黒背景#101011に
   挟まれて知覚できない(computedでは適用済みだった)。色は岡崎指定#323235のまま太さで視認性を確保(2026-07-18) */
.works-grid .work-card { border: 2px solid var(--border); border-radius: 12px; background: var(--surface); flex: 1 1 0; min-width: 0; max-width: calc((100% - 24px) / 3); }
.works-grid .work-thumb { aspect-ratio: 1 / 1; }
/* 映像は16:9フル表示(1280×720サムネはcoverでも切れない)。flex-growを縦横比16/9に比例させ、
   イラスト(正方形=grow:1)と同じ高さで横長に並べる(幅=高さ×16/9で自動決定・行幅も充填) */
.works-grid .work-card.is-movie { flex-grow: 1.7778; max-width: calc((100% - 24px) * 8 / 17); }
.works-grid .work-card.is-movie .work-thumb { aspect-ratio: 16 / 9; }
.works-grid .work-caption { display: none; }
/* 参照画像にカテゴリチップは無い(両ページ共通で非表示) */
.work-cat { display: none !important; }
.work-thumb-inner { position: absolute; inset: 0; transition: transform .5s var(--ease); }
.work-card:hover .work-thumb-inner { transform: scale(1.08); }
.work-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: 16px; opacity: 0; transition: opacity .3s var(--ease); background: linear-gradient(transparent, rgba(16,16,17,.85)); }
.work-card:hover .work-overlay { opacity: 1; }
/* 引き渡し前バグ修正7: キーボード操作(Tab)で来たときだけ分かるフォーカスリング。
   マウスクリック時(:focus-visibleではなくなるケース)は出さず、見た目は従来のまま */
.work-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.work-overlay .view { font-family: var(--font-heavy); font-size: 12px; letter-spacing: .16em; color: var(--red); }
/* 再生ボタン(.work-play)はユーザー指定(2026-07-11)で全ページ廃止(worksのみ→ギャラリー含む全面に拡大) */
.work-cat { position: absolute; z-index: 3; top: 14px; left: 14px; font-family: var(--font-heavy); font-size: 10px; letter-spacing: .14em; padding: 4px 9px; border-radius: 4px; background: rgba(16,16,17,.7); border: 1px solid var(--border); color: var(--white); }
.work-caption { padding: 14px 16px; }
.work-caption h3 { font-family: var(--font-bold); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }

/* 参照画像: 「>>> MORE」の左寄せベアテキストリンク(枠・ピルなし) */
.works-more { text-align: left; margin-top: 28px; }
.btn-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heavy); font-weight: 400; font-size: 12px; letter-spacing: .18em;
  color: var(--white); padding: 0; border: none; border-radius: 0;
  transition: color .2s var(--ease);
}
.btn-more:hover { color: var(--red); }

/* ============================================================
   STATUS
   ============================================================ */
/* 参照画像: 暗赤の細枠・フラットな面・コンパクトな縦リズム
   (角はキャラクターカード以外を丸めるユーザー指定によりスクエア→12pxへ変更・2026-07-11) */
.status-panel {
  position: relative; text-align: center; padding: 26px 28px 22px; border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--red-dark); overflow: hidden;
}
.status-state { display: inline-flex; align-items: center; gap: 10px; line-height: 1.2; font-family: var(--font-bold); font-weight: 800; font-size: clamp(22px, 2.5vw, 28px); letter-spacing: .02em; }
/* 参照画像: ドットはフラットな緑(常時グローなし。パルスのリングのみ) */
.status-state .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.status-state.is-closed .dot { background: var(--muted); box-shadow: none; animation: none; }
.status-note { color: var(--muted); margin-top: 6px; font-size: 14px; line-height: 1.5; }
.status-months { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin: 14px 0 6px; }
.month { font-family: var(--font-bold); font-weight: 800; font-size: clamp(22px, 2.5vw, 28px); line-height: 1.3; display: inline-flex; align-items: baseline; gap: 12px; }
/* 参照画像: マークはラベルと同サイズ・全て白のラテン文字X/O */
.month .mk { font-size: 1em; color: var(--white); }
.status-updated { font-size: 12px; color: var(--muted); letter-spacing: .1em; line-height: 1.5; }
.status-updated b { color: var(--muted); font-weight: 400; margin-left: 56px; }

/* ============================================================
   PROGRESS
   ============================================================ */
/* 参照画像: 縦長矩形カード(旗型ではない)+カード背面から上へはみ出す巨大赤数字+カード間の▶。
   カード面は不透明の縦グラデーション1枚(下端は背景--blackと同色化して同化)。
   旧・半透明ベース+赤粒ディゾルブ+フィルムグレインはザラザラ除去指定で撤去(2026-07-18) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 65px; max-width: 975px; margin: 96px auto 0; }
.step {
  position: relative; isolation: isolate;
  min-height: 372px;
  padding: 50px 13px 26px; border-radius: 12px;
  background: none; border: none; overflow: visible;
  transition: transform .35s var(--ease);
}
/* カード面テクスチャ: 背面の巨大数字が透けないよう不透明グラデーション1枚のみに簡素化
   (旧・フィルムグレイン層+赤粒ディゾルブ層(.step-dots)は撤去。ザラザラ除去・岡崎指定2026-07-18)。
   終端2ストップは背景--black(rgb(16,16,17))と同色にし、カード下端が背景と同化して滑らかに繋がる */
.step::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(180deg, rgb(147,17,38) 0%, rgb(137,17,37) 8%,
      rgb(92,19,35) 17%, rgb(72,20,34) 27%, rgb(62,20,32) 38%,
      rgb(48,20,28) 48%, rgb(36,20,25) 60%, rgb(28,20,24) 71%,
      rgb(16,16,17) 80%, rgb(16,16,17) 100%);
  border-radius: 12px;
  /* 下端同化フェード: グラデ自体が背景--black(16,16,17)と同色化済みだが、輪郭を確実に消すためマスクは維持 */
  -webkit-mask-image: linear-gradient(180deg, #000 64%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.42) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 64%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.42) 90%, transparent 100%);
}
/* フェードアウトライン: 上端の淡赤1px枠が下へ向かって透明化し背景へ溶ける。
   mask-composite(xor/exclude)でpadding-boxを抜き1pxの縁だけを残す(::afterは▶で使用中のため実子要素) */
.step-ring {
  position: absolute; inset: 0; pointer-events: none;
  border: 1px solid transparent; border-radius: 12px;
  background: linear-gradient(180deg, rgba(235,96,116,.8) 0%, rgba(205,60,80,.45) 40%,
    rgba(150,42,58,.2) 65%, transparent 88%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
/* カード間の赤い右向き三角形(カード高さの約52%位置) */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 52%; transform: translateY(-50%);
  right: calc(65px / -2 - 6px);
  width: 0; height: 0;
  border-left: 13px solid #DB2038;
  border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent;
}
.step:hover { transform: translateY(-6px); }
/* 巨大な赤ベタ数字: インク上端がカード上端から53px上。下部はカード背面で薄く透ける */
.step-num {
  position: absolute; top: -.68em; left: 8px; z-index: -2; /* 上6割はみ出し・下4割はカード背面 */
  font-family: var(--font-heavy); font-size: clamp(60px, 7.3vw, 105px); line-height: 1;
  color: #E0203A;
}
.step-title { font-family: var(--font-bold); font-size: clamp(19px, 1.8vw, 26px); font-weight: 700; margin: 0; text-align: center; }
.step-title::after { content: ""; display: block; width: 75px; height: 2px; margin: 22px auto 24px; background: rgba(255,255,255,.5); }
/* 参照どおり段落分け(\n\n)を反映するためpre-line。行間はかなり詰まっている */
.step-desc { font-size: 12px; color: #d8d8da; line-height: 1.35; white-space: pre-line; }

/* ============================================================
   CONTACT
   ============================================================ */
/* 参照画像: カードはコンテナ全幅・内側の左右余白が広い・フラット面・シャープ角 */
.contact-form { max-width: none; margin: 0 auto; padding: 28px clamp(24px, 9vw, 130px) 72px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.field { margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label { display: block; font-family: var(--font-heavy); font-size: 11px; letter-spacing: .12em; color: var(--red); margin-bottom: 4px; }
.field input, .field textarea {
  width: 100%; background: var(--black); border: 1px solid var(--border); border-radius: 4px;
  color: var(--white); font-family: var(--font-body); font-size: 16px; padding: 10px 14px; resize: vertical;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  /* 16px未満だとiOS Safariがフォーカス時に自動ズームするため16px固定 */
}
/* 参照実測: 単一行inputはtextareaより薄い(縦padding約6px) */
.field input { padding-top: 6px; padding-bottom: 6px; }
.field input::placeholder, .field textarea::placeholder { color: #6a6a70; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(224,31,60,.18); }
/* 参照画像: フラットな単色赤・控えめな影・高さ約40px */
.btn-submit { width: 100%; margin-top: 2px; padding: 9px 16px; border-radius: 999px; font-family: var(--font-bold); font-weight: 800; letter-spacing: .06em; font-size: 15px; color: var(--white); background: var(--red); box-shadow: 0 5px 12px rgba(0,0,0,.35); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.form-msg { margin-top: 16px; text-align: center; color: var(--green); font-size: 14px; min-height: 20px; }

/* ============================================================
   フッター
   ============================================================ */
/* 参照画像: フッターは赤ベタのバンド。白いJGAロゴ+▲TOPのみ(ナビ/SNS/©なし) */
.site-footer { position: relative; padding: 73px 24px 48px; text-align: center; background: var(--red); border-top: none; }
/* 上端から32pxを走る正方形ダッシュ列(comp実測: 18px角/周期36px・ほぼ不可視レベルの淡さ。位相はギャップ先行) */
.site-footer::before {
  content: ""; position: absolute; top: 32px; left: 0; right: 0; height: 18px;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(16,16,17,.04) 18px 36px);
}
.footer-logo { width: 135px; height: 72px; margin: 0 auto; background-color: #fff; -webkit-mask: url("../assets/logo.png") no-repeat center / contain; mask: url("../assets/logo.png") no-repeat center / contain; }

/* 参照画像に存在しない要素は非表示 */
.footer-nav, .footer-socials, .footer-copy { display: none; }

.footer-top { display: inline-grid; justify-items: center; gap: 2px; margin-top: 48px; font-family: var(--font-heavy); font-size: 11px; letter-spacing: .05em; color: #fff; transition: color .2s; }
.footer-top:hover { color: var(--black); }
/* comp実測: 線画の∧でなく塗りつぶしの小さな▲(約7×5px) */
.footer-top-chev { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-bottom: 5px solid currentColor; transform: none; }

/* ============================================================
   コピー完了トースト
   ============================================================ */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 14px);
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid var(--red);
  background: rgba(16, 16, 17, .94);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  max-width: calc(100vw - 40px);
  box-shadow: 0 10px 30px rgba(224, 31, 60, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 2500;
}
.copy-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   モーダル
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8,8,9,.82); backdrop-filter: blur(8px); }
.modal-box { position: relative; z-index: 1; width: 100%; max-width: 760px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transform: translateY(16px) scale(.98); transition: transform .35s var(--ease); box-shadow: 0 40px 80px rgba(0,0,0,.6); max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); overflow-y: auto; }
.modal.is-open .modal-box { transform: translateY(0) scale(1); }
.modal-stage { position: relative; }
.modal-media { width: 100%; aspect-ratio: 16/10; position: relative; overflow: hidden; max-height: 52svh; }
.modal-media .m-fill { position: absolute; inset: 0; }
.modal-media video { width: 100%; height: 100%; object-fit: cover; }
/* admin登録のイラスト本体: 16/10のステージ内で切らずに全体を見せる */
.modal-media img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.modal-info { padding: 22px 26px 28px; }
.modal-cat { font-family: var(--font-heavy); font-size: 11px; letter-spacing: .14em; color: var(--red); }
.modal-title { font-family: var(--font-bold); font-weight: 800; font-size: 22px; margin: 8px 0 10px; overflow-wrap: anywhere; }
.modal-desc { color: #c2c2c8; font-size: 15px; }
.modal-close { position: absolute; z-index: 4; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(16,16,17,.7); border: 1px solid var(--border); display: grid; place-items: center; transition: .2s var(--ease); }
.modal-close svg { width: 20px; height: 20px; }
.modal-close:hover { background: var(--red); border-color: var(--red); }
.modal-nav { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(16,16,17,.6); border: 1px solid var(--border); display: grid; place-items: center; transition: .2s var(--ease); }
.modal-nav svg { width: 22px; height: 22px; }
.modal-nav:hover { background: var(--red); border-color: var(--red); }
.modal-prev { left: 12px; } .modal-next { right: 12px; }

/* ============================================================
   PORTFOLIO ページ
   ============================================================ */
.page-portfolio { padding-top: 96px; }
/* ヘッダー下線はバナーの縞と重なるため出さない */
.page-portfolio .header-underline { display: none; }
/* ヘッダー左の赤い戻る三角形◀(comp実測33×37・左65px) */
.header-back-tri {
  width: 0; height: 0; flex-shrink: 0;
  border-top: 18px solid transparent; border-bottom: 18px solid transparent;
  border-right: 33px solid var(--red);
  transition: opacity .2s var(--ease);
}
.header-back-tri:hover { opacity: .75; }
/* comp(z_header)実測: ロゴ中央112×60・バーガー76×43(白線24×2 gap3)・左右余白65/41 */
.page-portfolio .header-inner { position: relative; padding: 18px 41px 18px 65px; }
.page-portfolio .logo { position: absolute; left: 50%; transform: translateX(-50%); }
.page-portfolio .logo-mark { width: 112px; height: 60px; -webkit-mask-position: center; mask-position: center; }
.page-portfolio .hamburger { width: 76px; height: 43px; gap: 3px; }
.page-portfolio .hamburger span { width: 24px; }

/* バナー全高238px。額縁(ストライプ枠)は撤去し内側グラデ(.portfolio-hero-inner)がそのまま見える(岡崎指定2026-07-18) */
.portfolio-hero {
  position: relative; height: clamp(150px, 16.5vw, 238px);
  padding: 0;
}
.portfolio-hero-inner {
  /* 左=黒→右=赤の横グラデ(岡崎指定2026-07-18) */
  position: relative; height: 100%; background: linear-gradient(90deg, var(--black) 0%, var(--red) 100%);
  display: grid; place-items: center; overflow: hidden;
}
/* グレインはヒーロー(.hero-bg::after)と同一値(ユーザー指定: ザラザラ具合をヒーローに統一)。
   bf0.9の極細フィルムグレイン・overlay合成・op.22 */
.ph-grain {
  position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .22;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 22%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.8) 82%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,.3) 0, rgba(0,0,0,.12) min(150px,23vw), transparent min(330px,51vw));
  mask-image:
    linear-gradient(90deg, transparent 22%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.8) 82%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,.3) 0, rgba(0,0,0,.12) min(150px,23vw), transparent min(330px,51vw));
}
/* comp実測でDela Gothic One確定(字幅比0.99-1.01・Iの上下バー一致)。1440時92.5px・字間.03em */
.portfolio-title {
  position: relative; z-index: 1; color: #F1EEF2;
  font-family: var(--font-impact); font-weight: 400;
  font-size: clamp(38px, 6.42vw, 93px);
  letter-spacing: .03em; line-height: 1;
  transform: translateY(2px); /* comp=内側中心の7px下。grid中央+2pxで一致 */
}
/* overflow-x: clip は全幅区切り帯(100vw)のスクロールバー分のはみ出し対策 */
.portfolio-body { padding-top: 12px; overflow-x: clip; }
/* 参照画像: 大型ピル3つをコンテナ全幅に等間隔分散 */
.tabs-portfolio { display: inline-flex; width: auto; justify-content: flex-start; gap: 10px; margin: 0 0 16px; }

/* タブ下の区切り線(細線#323235・岡崎指定2026-07-18)。参照どおり画面端まで全幅 */
.portfolio-tab-divider {
  height: 2px; margin: 0 calc(50% - 50vw) 60px;
  background: var(--border);
}

/* ギャラリーカード: 箱をやめてサムネ直置き+下にタイトル(参照画像準拠) */
.portfolio-grid .work-card { border: none; border-radius: 0; background: transparent; overflow: visible; }
.portfolio-grid .work-thumb { aspect-ratio: 16 / 9; border-radius: 12px; background: var(--surface); overflow: hidden; }
.portfolio-grid .work-caption { padding: 18px 0 0; }
.portfolio-grid .work-caption h3 { color: var(--white); font-size: 16px; }

/* ============================================================
   リビール・アニメーション
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in-view { opacity: 1; transform: none; }
/* 検証用(?noreveal): ヘッドレス撮影でIntersectionObserverが発火しない対策 */
.no-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
html.no-reveal { scroll-behavior: auto; } /* #フラグメント直ジャンプを確実にする */
/* 検証用: 縦長ウィンドウの全ページ撮影で100svhヒーローが伸びる対策 */
html.no-reveal .hero { height: 900px; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; gap: 34px; }
  .profile-visual { order: -1; justify-content: center; margin-right: 0; }
  /* 1カラムでは頭のはみ出し(パネル上60.7%=幅の40.1%)とバッジ下はみ出し分の余白を確保 */
  .visual-scene {
    max-width: 480px;
    margin-top: calc(min(100%, 480px) * .401);
    margin-bottom: calc(min(100%, 480px) * .12);
  }
  /* 透かしはprofile-info内に絶対配置なので、1カラムでも名前に自動追従する */
  /* 2列時は上段カードの下に下段の巨大番号(はみ出し約50px)が入るため縦gapを広く取る */
  .steps { grid-template-columns: repeat(2, 1fr); gap: 100px 20px; }
  .step:not(:last-child)::after { display: none; } /* 2列では▶を出さない */
  /* worksグリッドはflex行(正方形2枚+16:9映像1枚を同高)がそのまま縮小追従するため上書き不要 */
}
@media (max-width: 620px) {
  .container { padding: 0 18px; }
  .header-inner { padding: 14px 18px; } /* 本文の左右基準線(18px)と揃える */
  .hamburger { width: 64px; height: 38px; }
  .logo-mark { width: 60px; height: 29px; }
  .socials { gap: 12px; }
  .social { width: 72px; height: 42px; }
  .tab { padding: 5px 14px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 24px 20px; }
  .status-months { gap: 12px 20px; }
  /* バッジ円の左見切れ防止(ユーザー指摘2026-07-11): シーンは中央寄せ・コンテナ余白18pxのため
     left:-12.3%のままだとビューポート外へ出る。左端がビューポート8px内側までに制限。
     -10px=8px-余白18px / 516px=シーン上限480px+余白36px(シーン左の中央寄せ余りを加算)。
     621px以上はシーン左に十分な余白があり見切れないため従来値のまま */
  .visual-badge { left: max(-12.3%, calc(-10px - max(0px, (100vw - 516px) / 2))); }
  /* スマホは無理に横並びにせず1列で見せる(ギャラリーページのみ2列を維持)。
     縦積みは stretch で各カード全幅。イラストは全幅正方形・映像は全幅16:9 */
  .works-grid { flex-direction: column; align-items: stretch; gap: 16px; }
  .works-grid .work-card, .works-grid .work-card.is-movie { flex: none; max-width: none; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 14px; }
  .steps { grid-template-columns: 1fr; gap: 60px; }
  .step { padding: 42px 20px 22px; }
  .step-num { font-size: 60px; }
  .modal-nav { width: 38px; height: 38px; }
  .modal-prev { left: 4px; } .modal-next { right: 4px; }
  .portfolio-title { font-size: clamp(32px, 10.5vw, 54px); letter-spacing: .01em; }
  .portfolio-hero { height: clamp(110px, 26vw, 150px); }
}

/* 狭小スマホ: 横インセットのみ詰める(縦サイズはvh連動clampに任せる) */
@media (max-width: 420px) {
  .mobile-nav-head { padding: clamp(12px, 2vh, 28px) 18px 0; gap: 8px; }
  .mnav-langs { gap: 5px; }
  .mobile-nav .mnav-lang { min-width: 40px; padding: 0 8px; }
  .menu-divider { margin: clamp(14px, 2.65vh, 38px) 18px clamp(24px, 4.45vh, 62px); }
  .mobile-nav-list { padding: clamp(8px, 1.55vh, 22px) 18px clamp(10px, 2vh, 30px); }
}