@charset "UTF-8";
/* =========================================================
   SY ENTERTAINMENT HP（JYP ENTERTAINMENT 準拠版）style.css
   正本: ホームページ制作/DESIGN_JYP準拠/DESIGN.md（2026-08-03 実測）

   設計の芯（実測値ベース）
   - 色は「黒 #101010 → #21252C → #42474E → #69727E → #868E9B → 罫線 #E5E8EB → 面 #F4F6F8」の
     7段グレースケールのみ。有彩色は最終CTAボタン1色だけ。
   - 文字サイズは 30/28/24/22/18/16/14/13/12 の9段固定。40px超は作らない。clamp() 不使用。
   - letter-spacing はブランド表記（ロゴ・社名）以外に指定しない（JYPは全DOMで1件のみ）。
   - 余白（margin/padding/gap/inset）は全て8の倍数。JYP実測の 62px/25px は山口さんルール（lp-production.md
     「余白のリズム＝8の倍数で統一」）を優先し 64px/24px へ寄せる。ルール衝突時は山口さんルールが上位。
   - 左右64px／グリッド列間24px／最大幅1330px（max-width は寸法であり余白リズムの対象外）。
   - 余白は「近接の原則」で4段の階層をつける（セクション間120px ＞ ブロック間64px ＞ リード→コンテンツ40px ＞ 見出し→リード8px）。
   - 影・角丸・グラデーションはゼロ。境界は1px罫線か面色差だけ。
   - 動きは「translateY(80px)+fade / 1s / cubic-bezier(.215,.61,.355,1)」の1種類と
     hover覆い rgba(0,0,0,.34) / .2s のみ。prefers-reduced-motion に対応する。
   - メディアクエリは 1300 / 1024 / 740 の3本だけ（JYPの78本方式は踏襲しない）。
   ========================================================= */

/* ---------- トークン ---------- */
:root{
  /* 7段グレースケール（DESIGN.md §2-1 実測値を基に、明暗の両端を内側へ寄せた版）
     山口さん指示「オフホワイトはもう気持ち白く・黒はもうちょっとグレー寄りに」に沿い、
     明側は #F9F9F8（暖色寄りの色味は1段だけ残す）、暗側は #2C2C2C。両端のコントラストは
     14.47:1 → 13.26:1（-8%）。中間グレー（罫線・面）も明側の移動に合わせて2〜3段持ち上げ、
     階段の間隔を維持している。本文系は白地・面地のどちらでも AA 4.5:1 以上。 */
  --white:#F9F9F8;      /* 基準面。純白をやめたオフホワイト */
  --ink:#1A1A1A;        /* 本文・最濃（白地で16.52:1） */
  --ink-head:#21252C;   /* 見出し（同14.60:1） */
  --ink-mid:#42474E;    /* 副文・小見出し（同8.89:1） */
  --ink-sub:#626B77;    /* 補助文（同5.13:1・面 --surface 上でも4.76:1でAA合格） */
  --ink-meta:#7F8794;   /* メタ表記（同3.44:1のため本文には使わない） */
  --line:#E1E4E5;       /* 罫線 */
  --surface:#EFF1F1;    /* 面（1段のみ） */
  /* ロゴ画像を載せるプレート専用の純白。CLIENTSの32点のロゴPNGは背景が不透明な純白のため、
     台紙をオフホワイトにすると画像の白地だけが四角く浮く。ここだけ #FFFFFF を残す
     （小面積かつ罫線で囲まれているのでチカチカの原因にはならない）。 */
  --plate:#FFFFFF;

  /* 反転面。DESIGN.md §2-2 の実測値は #0F0E0E だが、山口さん指示により純黒を避けた
     オフブラック（グレー寄り）を採用する。--rev-text の実効色は #CECECE で 8.87:1。
     A/B/C/D（#242424 / #2A2A2A / #2C2C2C / #2E2E2E）を実描画比較して #2C2C2C を採用。
     #2A2A2A は変化が分かりにくく、#2E2E2E は黒面の締まりが落ちて見える。 */
  --rev-bg:#2C2C2C;
  --rev-text:rgba(255,255,255,.77);
  --rev-line:rgba(255,255,255,.24);

  /* 有彩色は1色のみ。最終CTAボタンにだけ使う */
  --accent:#DDFF00;

  /* FIRST ONE ロゴ（白抜き）を白背景に置くためのグロウ。box-shadow ではなく filter の
     drop-shadow なので「影・角丸・グラデーションはゼロ」の設計ルールには抵触しない。
     2段構成：内側 2.5px/不透明 で輪郭を確実に出し、外側 7px/.55 で境界線に見えないよう散らす。
     2026-08-05 実描画比較（1.5/.88+4/.5 → 2/1+6/.6 → 2.5/1+7/.55 → 3/1+8/.55）で選定。
     1px系は線に見え、3px以上は "SY ENTAINMENT" の細字が潰れるため中間値を採用。 */
  --fo-glow:drop-shadow(0 0 2px rgba(17,17,17,.72)) drop-shadow(0 0 5px rgba(17,17,17,.4));

  /* 余白（DESIGN.md §4-3） */
  --inner:1330px;
  --article:930px;
  --pad-x:64px;
  /* 余白の階層（近接の原則）。全値を8の倍数に統一したうえで、段差を明確に保つ：
     セクション間 120px（= sec-y-top 72 + sec-y-bottom 48）
       ＞ セクション内ブロック間 64px（--blk-gap）
         ＞ リード文→コンテンツ 40px（--title-gap）
           ＞ 見出し→リード文 8px（--lead-gap / .sec-ja の margin-top）
     比率 15 : 8 : 5 : 1。「セクション間 : 見出し→リード = 15:1」で規定の 4:1 以上を満たす。
     2026-08-05: 160px は広すぎるとの指摘により 120px へ圧縮。各段を同率で縮め階層は維持した
     （1024px: 96px = 56+40 / 740px: 80px = 48+32。lead-gap 8px はどの幅でも据え置き）。 */
  --sec-y-top:72px;
  --sec-y-bottom:48px;
  --title-gap:40px;
  --lead-gap:8px;
  --grid-gap:24px;
  --blk-gap:64px;

  --font-en:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-ja:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,sans-serif;
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-ja);
  font-weight:400;
  font-size:14px;      /* JYP基準14px。和文本文だけ16pxに上げる */
  line-height:1.5;
  line-break:strict;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,table{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* フォーカスリング（機能的なものなので残す） */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.band-dark :focus-visible,
.drawer :focus-visible,
.site-footer :focus-visible{outline-color:var(--white)}

.nb{white-space:nowrap}
.br-sp{display:none}
.br-pc{display:inline}
.lead-seg{display:inline-block}

/* =========================================================
   ヘッダー（白地・左ロゴ＋右ナビ／1024px以下は中央ロゴ＋ハンバーガー）
   JYP: #header{position:fixed;padding:24px 62px;background:#fff}
   ========================================================= */
.site-head-sticky{position:sticky;top:0;z-index:70;background:var(--white)}
.site-header{
  position:relative;
  background:var(--white);
  padding:24px var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:84px;
  /* 2026-08-05: タグライン帯を削除したため、ヘッダー自身が本文との境界1px罫線を持つ */
  border-bottom:1px solid var(--line);
}
/* 2026-08-15 山口さん裁定: SY と ENTERTAINMENT は同サイズ・同字間・同ウェイトの1行組み。
   区別は色だけ（SY＝グレー --ink-sub #626B77 ／ ENTERTAINMENT＝黒 --ink）。
   同サイズなので上下揃え問題は消滅（align-items:center）。
   --ink-sub は地色 #F9F9F8 に対し 5.13:1 で全幅 AA 合格。 */
.brand{display:flex;align-items:center;color:var(--ink)}
.brand-main{
  display:inline-block;
  font-family:var(--font-en);
  font-weight:500;
  font-size:16px;
  letter-spacing:.28em;   /* ブランド表記のみ字間を許可 */
  line-height:1.2;
  text-indent:.28em;
  color:var(--ink-sub);
}
.brand-sub{
  display:inline-block;
  font-family:var(--font-en);
  font-weight:500;
  font-size:16px;
  letter-spacing:.28em;   /* ブランド表記のみ字間を許可 */
  line-height:1.2;
  text-indent:.28em;
  color:var(--ink);
  margin-left:2px;
}
.site-nav{display:block}
.site-nav-list{display:flex;align-items:center;gap:32px}
.site-nav-list a{
  display:inline-block;
  position:relative;
  padding:8px 0;
  font-family:var(--font-en);
  font-weight:500;
  font-size:14px;
  color:var(--ink-mid);
}
.site-nav-list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink-head);opacity:0;transition:opacity .2s;
}
.site-nav-list a:hover,
.site-nav-list a:focus-visible{color:var(--ink-head)}
.site-nav-list a:hover::after,
.site-nav-list a:focus-visible::after{opacity:1}
/* 多層化（2026-08-19）に伴い、現在地のページを下線1本で示す（JYPのタブ現在地と同じ手法） */
.site-nav-list a[aria-current="page"]{color:var(--ink-head);font-weight:700}
.site-nav-list a[aria-current="page"]::after{opacity:1}
.drawer-list a[aria-current="page"]{text-decoration:underline}

.nav-toggle{
  display:none;
  position:absolute;
  top:50%;right:var(--pad-x);
  transform:translateY(-50%);
  width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;gap:8px;
}
.nav-toggle-bar{display:block;width:25px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{background:var(--white)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(8px) rotate(-45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(45deg)}

/* アンカー着地位置がsticky headerに隠れないよう確保（ヘッダー実高 85px） */
section[id]{scroll-margin-top:96px}

/* =========================================================
   ドロワー（全画面メニュー・JYP #jypMenu 準拠：opacity 0→1 / .4s）
   ========================================================= */
.drawer{
  position:fixed;inset:0;z-index:80;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .4s;
}
.drawer.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.drawer-backdrop{position:absolute;inset:0;background:var(--rev-bg);opacity:0;transition:opacity .4s}
.drawer.is-open .drawer-backdrop{opacity:1}
.drawer-panel{
  position:absolute;top:0;right:0;
  width:100%;height:100%;
  background:var(--rev-bg);
  padding:24px var(--pad-x) 48px;
  overflow-y:auto;
  display:flex;flex-direction:column;
  opacity:0;
  transition:opacity .4s;
}
.drawer.is-open .drawer-panel{opacity:1}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;min-height:84px}
.drawer-brand{font-family:var(--font-en);font-size:13px;letter-spacing:.3em;color:var(--white)}
.drawer-close{position:relative;width:44px;height:44px}
.drawer-close span{position:absolute;top:50%;left:50%;width:22px;height:2px;background:var(--white)}
.drawer-close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.drawer-close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
.drawer-list{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:var(--inner);width:100%;margin-inline:auto}
.drawer-list li{border-bottom:1px solid var(--rev-line)}
.drawer-list li:first-child{border-top:1px solid var(--rev-line)}
.drawer-list a{
  display:block;
  padding:16px 0;
  font-family:var(--font-en);
  font-weight:700;
  font-size:22px;
  color:var(--white);
}
.drawer-list a:hover{text-decoration:underline}
.drawer-cta{
  display:block;max-width:420px;margin:32px auto 0;padding:16px;
  text-align:center;font-size:14px;font-weight:700;
  background:var(--white);color:var(--ink);
}

/* =========================================================
   帯・コンテナ
   ========================================================= */
.band{position:relative;width:100%;padding:var(--sec-y-top) 0 var(--sec-y-bottom)}
.band-light{background:var(--white);color:var(--ink)}
.band-mid{background:var(--surface);color:var(--ink)}
.band-dark{background:var(--rev-bg);color:var(--rev-text)}
.band-dark a{color:var(--white)}
.inner{width:100%;max-width:var(--inner);margin-inline:auto;padding-inline:var(--pad-x)}

/* 旧・ギザギザ帯（repeating-linear-gradient）と円周ライン（border-radius:50%）は
   グラデーション／角丸の全廃方針により非表示にする（HTMLは変更しない） */
.zigzag,
.circle-deco{display:none}

/* =========================================================
   セクション見出し（30/700・タイトル下90px）
   ========================================================= */
.sec-head{margin-bottom:var(--title-gap)}
.sec-en{
  font-family:var(--font-en);
  font-weight:700;
  font-size:30px;
  line-height:1.5;
  color:var(--ink-head);
}
.sec-ja{margin-top:var(--lead-gap);font-size:14px;font-weight:400;color:var(--ink-mid);word-break:auto-phrase;text-wrap:balance}
.sec-head--dark .sec-en{color:var(--white)}
.sec-head--dark .sec-ja{color:var(--rev-text)}

/* ロゴ見出し（FAN MOTION / FIRST ONE）
   2ロゴは素材ごとに「マークや説明文の占める割合」が違うため、単純に同じ max-height を
   与えると文字の大きさが揃わない。実測した「大文字の高さ ÷ 画像高」（FAN MOTION 白抜き版
   51.2% ／ FIRST ONE 39.2%）から逆算して個別に max-height を割り当て、
   2ロゴの「文字の大きさ」を揃える。1440 では大文字高 約56px（120 / 144px）で揃う。 */
.sec-en--logo{display:block}
.sec-en--logo img{display:block;max-height:108px;max-width:100%;width:auto;object-fit:contain}
.sec-en--logo-fm img{max-height:108px}
.sec-en--logo-fo img{max-height:128px;filter:var(--fo-glow)}

/* =========================================================
   ボタン（hoverは覆い rgba(0,0,0,.34) を .2s で出すだけ）
   ========================================================= */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 32px;
  font-size:14px;font-weight:700;
  border:1px solid transparent;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.34);opacity:0;transition:opacity .2s;
}
.btn:hover::after,
.btn:focus-visible::after{opacity:1}
.btn-primary{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-primary:hover{background:var(--ink-mid);border-color:var(--ink-mid)}
.btn-primary::after{background:rgba(255,255,255,.12)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost::after{background:rgba(0,0,0,.08)}
/* 唯一の有彩色。最終CTA（ACHIEVEMENT / CONTACT）の2箇所のみ。
   2026-08-05 可読性修正: 2箇所とも .band-dark の中にあり、`.band-dark a{color:#fff}`（詳細度 0,1,1）が
   `.btn-lime`（0,1,0）に勝って「ライム地×白文字＝コントラスト1.14:1」で読めなくなっていた。
   同等以上の詳細度を持つセレクタで黒文字を確定させる（#DDFF00×#101010 = 16.7:1）。 */
.btn-lime,
.band-dark a.btn-lime,
.band-dark .btn-lime{background:var(--white);color:var(--ink);border-color:var(--white)}

/* =========================================================
   01 FV（STARTO ENTERTAINMENT 型・トップページ専用）
   2026-08-19 シンさん指示: 初回表示は画面中央にロゴを横幅いっぱいで巨大表示。
   見出し・リード文・CTAはFVから撤去。スクロールでロゴが縮んでヘッダー左の定位置へ収束する。
   収束は script.js が .fv-lockup に transform を与えて行う（JS無効時は静止した巨大ロゴのまま）。
   背景は差し替え用の画像スロット assets/fv_visual.jpg（素材未着のため白単色。実画像が届いたらこのファイルを上書き）。
   ロゴは「SY＝グレー／ENTERTAINMENT＝黒」の固定色なので、写真が来ても字が沈まないよう
   白地の上に画像を不透明度で重ねて明度を確保する（べた塗りの重ね。グラデーションは使わない）。
   ========================================================= */
.fv{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding:0;
  overflow:hidden;
  background:var(--white);
}
.fv-visual{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.55;
}
/* JS無効・prefers-reduced-motion 時はFVの中に収まったまま動かない */
.fv-lockup{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding-inline:var(--pad-x);
  pointer-events:none;
}
/* JSが収束演出を担当するときだけ画面固定に切り替える */
.fv-lockup.is-scrollfx{position:fixed;z-index:75;will-change:transform}
/* 「横幅いっぱい」の巨大表示。SYENTERTAINMENT の15文字ぶんの送り幅（字面0.68em＋字間0.28em＝
   約0.96em × 15 ≒ 14.4em）から逆算し、左右余白を除いた幅にちょうど収まる文字サイズを算出する。
   分母をわずかに大きめ（14.8）に取り、書体差で右端がはみ出さない側へ倒している。 */
.fv-lockup-inner{
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
  transform-origin:0 0;
  font-size:calc((100vw - (var(--pad-x) * 2)) / 14.8);
}
/* ヘッダーロゴと同一のフォント・ウェイト・字間。違うのはサイズだけ＝縮小で完全に重なる */
.fv-brand-main,.fv-brand-sub{
  display:inline-block;
  font-family:var(--font-en);
  font-weight:500;
  font-size:1em;
  letter-spacing:.28em;
  text-indent:.28em;
  line-height:1.2;
}
.fv-brand-main{color:var(--ink-sub)}
.fv-brand-sub{color:var(--ink);margin-left:2px}
/* 収束後はヘッダーの実ロゴ（リンク）に主役を渡す。両者は同寸なので入れ替えは見えない */
/* 2026-08-20 山口さん指摘: 差し替え時のチカつき対策。フェードさせず同一フレームで瞬時に入れ替える（両ロゴは同座標に重なるため無フェードが正しい） */
.fv-scroll .brand{opacity:0}
.fv-scroll.is-brand-docked .brand{opacity:1}

/* =========================================================
   01-A MVV（VISION / MISSION / VALUE・FV直下）
   文言はシンさん提示の原文どおり。掲載順も提示順（VISION→MISSION→VALUE）に従う。
   ========================================================= */
.mvv-list{border-top:1px solid var(--line)}
.mvv-item{
  display:grid;grid-template-columns:240px 1fr;gap:48px;
  padding:48px 0;border-bottom:1px solid var(--line);
}
.mvv-item .sec-en{font-size:24px}
.mvv-statement{
  font-size:24px;font-weight:700;line-height:1.8;color:var(--ink-head);
  max-width:var(--article);text-wrap:pretty;
}
.mvv-body{
  margin-top:16px;font-size:16px;line-height:1.8;color:var(--ink-mid);
  max-width:var(--article);text-wrap:pretty;
}

/* =========================================================
   01-C CONTENTS（各下層ページへの入口カード・トップページ）
   ========================================================= */
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.entry-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);padding:32px 24px;
  color:var(--ink);
}
.entry-card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34);opacity:0;transition:opacity .2s}
.entry-card{position:relative;overflow:hidden}
.entry-card:hover::after,.entry-card:focus-visible::after{opacity:.04}
.entry-en{font-family:var(--font-en);font-weight:700;font-size:22px;line-height:1.5;color:var(--ink-head)}
.entry-ja{margin-top:var(--lead-gap);font-size:14px;line-height:2;color:var(--ink-mid);flex:1}
.entry-more{
  margin-top:24px;align-self:flex-start;
  font-family:var(--font-en);font-size:13px;color:var(--ink-head);
  border-bottom:1px solid var(--ink-head);padding-bottom:8px;
}

/* =========================================================
   02 ACHIEVEMENT
   ========================================================= */
.ach-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ach-cta{margin-top:var(--title-gap);text-align:center}
.ach-left{text-align:center}
.ach-headbox{display:block;padding:0 0 24px;border-bottom:1px solid var(--rev-line)}
.ach-headbox-en{font-family:var(--font-en);font-weight:700;font-size:24px;line-height:1.5;color:var(--white)}
.ach-headbox-ja{margin-top:8px;font-size:13px;color:var(--rev-text)}
.ach-total-label{margin-top:32px;font-family:var(--font-en);font-size:12px;color:var(--rev-text)}
.ach-total-num{
  margin-top:8px;
  font-family:var(--font-en);font-weight:700;font-size:30px;line-height:1.2;
  color:var(--white);font-variant-numeric:tabular-nums;
}
.ach-total-cap{margin-top:8px;font-size:14px;color:var(--rev-text)}
.ach-list{border-top:1px solid var(--rev-line)}
.ach-list li{padding:24px 0;border-bottom:1px solid var(--rev-line)}
.ach-list-label{display:block;font-size:13px;color:var(--rev-text)}
.ach-list-num{
  display:inline-block;margin-top:8px;
  font-family:var(--font-en);font-weight:700;font-size:24px;line-height:1.2;
  color:var(--white);font-variant-numeric:tabular-nums;
}
.ach-list-text{display:block;margin-top:8px;font-size:16px;font-weight:700;color:var(--white)}
.ach-list-unit{display:inline-block;margin-left:8px;font-size:13px;color:var(--rev-text)}
.ach-list li:last-child .ach-list-unit{display:block;margin:8px 0 0;line-height:1.8}

/* =========================================================
   01-B BUSINESS SCHEME（円図解・ヒーロー直後）
   正本プロトタイプ: ホームページ制作/円図解プロトタイプ/public/index.html
   構造・座標・白黒はプロトタイプのまま。差し替えたのはアニメーションだけ:
   (a) ゆらぎは周期（--wx/--wy）そのまま・移動量2px・スケール振幅±.016
   (b) hoverで2倍に拡大する演出は廃止 → 光スイープ＋ポップに置換
   (c) 光スイープとポップは同一 duration・同一開始で「ポップしながら光が通る」
   (d) 発火は hover/focus のみ（周期発火は2026-08-15山口さん指示で廃止。.is-firing のCSSは互換で残置・JSからは付与しない）
   ※ 色は白黒のみ。ギザギザ・斜線の区切り帯（repeating-linear-gradient）は使わない
   ========================================================= */
.scheme-figwrap{max-width:1000px;margin-inline:auto}
.scheme-fig{width:100%;height:auto;display:block;overflow:visible}
.scheme-note{margin-top:24px;text-align:center;font-size:14px;color:var(--ink-sub)}

.scheme-fig .node{outline:none}
.scheme-fig .node text{
  text-anchor:middle;dominant-baseline:central;
  font-weight:500;pointer-events:none;paint-order:stroke;
}
.scheme-fig .t-solid circle{fill:var(--ink);stroke:none}
.scheme-fig .t-solid text{fill:var(--white)}
.scheme-fig .t-thick circle{fill:none;stroke:var(--ink);stroke-width:1.5;pointer-events:all}
.scheme-fig .t-thick text{fill:var(--ink)}
.scheme-fig .t-thin circle{fill:none;stroke:var(--ink-meta);stroke-width:1;pointer-events:all}
.scheme-fig .t-thin text{fill:var(--ink-mid)}

/* ゆらぎ。transform-box:view-box + transform-origin で円の中心を軸にする */
.scheme-fig .wx,.scheme-fig .wy,.scheme-fig .pop{transform-box:view-box;transform-origin:var(--cx) var(--cy)}
.scheme-fig .wx{animation:scheme-wobX var(--wx) ease-in-out infinite alternate;animation-delay:var(--dx)}
.scheme-fig .wy{animation:scheme-wobY var(--wy) ease-in-out infinite alternate;animation-delay:var(--dy)}
/* 移動量はプロトタイプ（5px / scale±.06）の約1/2.5。周期は変えない＝細やかな漂いになる */
@keyframes scheme-wobX{
  0%  {transform:translateX(2px) scale(1)}
  50% {transform:translateX(1px) scale(.984)}
  100%{transform:translateX(0)   scale(1.016)}
}
@keyframes scheme-wobY{
  0%  {transform:translateY(0)}
  100%{transform:translateY(2px)}
}

/* 光スイープ：円形クリップの中を、幅広でぼかしの効いた光の帯が左上→右下へ通過する。
   帯の幅はグラデーションのストップ（12%/50%/88%）で稼ぎ、エッジは feGaussianBlur で溶かす。
   細いシャープな線に見えないこと（発注者指摘への対応）。 */
.scheme-fig .gleam{opacity:0}
.scheme-fig .gleam-band{
  transform-box:view-box;transform-origin:0 0;
  transform:translate(calc(var(--gl) * -1),calc(var(--gl) * -1));
}
.scheme-fig .pop-on:hover .gleam,
.scheme-fig .pop-on:focus-visible .gleam,
.scheme-fig .pop-on.is-firing .gleam{opacity:1}
/* ポップと光スイープは duration・開始タイミングを揃える＝「ポップしながら光が通る」 */
.scheme-fig .pop-on:hover .gleam-band,
.scheme-fig .pop-on:focus-visible .gleam-band,
.scheme-fig .pop-on.is-firing .gleam-band{animation:scheme-gleam .9s cubic-bezier(.33,0,.25,1) forwards}
.scheme-fig .pop-on:hover .pop,
.scheme-fig .pop-on:focus-visible .pop,
.scheme-fig .pop-on.is-firing .pop{animation:scheme-pop .9s cubic-bezier(.34,1.56,.64,1)}
.scheme-fig .pop-on:hover .wx,.scheme-fig .pop-on:hover .wy,
.scheme-fig .pop-on:focus-visible .wx,.scheme-fig .pop-on:focus-visible .wy{animation-play-state:paused}
.scheme-fig .pop-on:focus-visible circle{stroke:var(--ink)}
@keyframes scheme-gleam{
  from{transform:translate(calc(var(--gl) * -1),calc(var(--gl) * -1))}
  to  {transform:translate(var(--gl),var(--gl))}
}
@keyframes scheme-pop{
  0%  {transform:scale(1)}
  40% {transform:scale(1.06)}
  100%{transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .scheme-fig .wx,.scheme-fig .wy{animation:none !important}
  .scheme-fig .pop{animation:none !important}
  .scheme-fig .gleam{display:none}
}

/* =========================================================
   03 CLIENTS
   ========================================================= */
/* 2026-08-12 シンさんMTG確定 + 発注者フィードバック（「列車すぎる」）:
   参画企業ロゴは自動カルーセル（マーキー）。
   白タイル・枠・罫線は一切使わず、地色の上をロゴ画像だけが等間隔で流れる形にする
   （background / border / box-shadow を .cm-seg li に付けないこと）。
   高さ基準で正規化（height 固定・width は成り行き）し、間隔は広めに取る。
   .cm-track の中に同一内容の .cm-seg を2枚並べ、translateX 0 → -50%（＝セグメント1枚分）でループ。
   2枚のセグメントは必ず同一内容にすること（幅が食い違うとつなぎ目が飛ぶ）。
   2026-08-19 シンさん指示（D項）:
   - 速度は 30秒/周 → 60秒/周（PC・SPとも）。「ロゴが読めないまま流れる」への対応。
   - 両端は mask-image のフェードで境界を曖昧にする。DESIGN.md の「グラデーション禁止」に対する
     山口さん明示の例外（適用箇所はここだけ・色を作るためではなく可視領域の減衰のため）。
   - SPは2段（上5社／下5社）。段ごとに animation-delay をずらして開始位置を変える。 */
/* .inner の左右パディング分だけ外へ逃がし、ロゴが切れる位置を本文の端ではなく
   コンテンツ枠の端に持っていく */
.client-marquee{width:auto;margin-inline:calc(var(--pad-x) * -1)}
.cm-row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 88px,#000 calc(100% - 88px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 88px,#000 calc(100% - 88px),transparent 100%);
}
.cm-row+.cm-row{margin-top:8px}
/* PCは1段10社。SPの2段はPCでは出さない（下の 740px 以下で入れ替える） */
.cm-row--sp{display:none}
.cm-track{
  display:flex;flex-wrap:nowrap;width:max-content;
  animation:cm-scroll 60s linear infinite;
}
/* 2段目は1周の1/3ぶん先行させ、上下で同じロゴが縦に並ばないようにする */
/* 2026-08-20 山口さん指示: SP下段は逆向きに流す（同方向だと気持ち悪い） */
.cm-row--sp2 .cm-track{animation-direction:reverse;animation-delay:-20s}
/* hoverで一時停止（読ませたい社を止めて見られるようにする） */
.cm-row:hover .cm-track,
.cm-row:focus-within .cm-track{animation-play-state:paused}
.cm-seg{display:flex;flex-wrap:nowrap;align-items:center;flex:0 0 auto}
.cm-seg li{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  height:96px;
  padding-right:88px;   /* ロゴ間の余白（8の倍数）。タイルではなく間隔で区切る */
}
/* 高さで正規化し幅は成り行き。極端に横長のロゴだけ max-width で頭を押さえる */
.cm-seg img{height:40px;width:auto;max-width:260px;object-fit:contain}
@keyframes cm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 動きを減らす設定では静止した折り返し並びに落とす（重複セグメントは非表示） */
@media (prefers-reduced-motion:reduce){
  .cm-row{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .cm-row--sp{display:none}
  .cm-track{animation:none;width:100%;flex-wrap:wrap}
  .cm-seg[data-dup]{display:none}
  .cm-seg{flex-wrap:wrap;width:100%;justify-content:center}
  .cm-seg li{height:88px;padding:0 44px}
}
.clients-note{margin-top:24px;font-size:13px;color:var(--ink-sub)}

/* =========================================================
   04 MISSION
   ========================================================= */
.mission-body{
  max-width:var(--article);
  font-size:16px;line-height:1.8;color:var(--ink-head);
  word-break:auto-phrase;text-wrap:pretty;
}
.mission-quote{
  max-width:var(--article);margin-top:32px;
  font-size:24px;font-weight:700;line-height:1.8;color:var(--ink-head);
}

/* =========================================================
   05 SERVICE
   ========================================================= */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
/* 2026-08-19（C項）1枚削除により主力サービスは2つ。
   3列のまま1枠空けると欠けて見えるので、2列でセンターに収める */
.svc-grid--2{grid-template-columns:repeat(2,1fr);max-width:var(--inner);margin-inline:auto}
.svc-card{background:var(--white);border:1px solid var(--line);padding:32px 24px;display:flex;flex-direction:column}
.svc-no{font-family:var(--font-en);font-size:13px;color:var(--ink-sub)}
.svc-name{margin-top:8px;font-size:18px;font-weight:700;color:var(--ink-head)}
/* 2026-08-05 山口さん指摘により3枚とも白（--white）の台座に統一。
   FIRST ONE のみ白抜き（文字が白）の正規ロゴなので、白台座では filter のグロウで輪郭を補う
   （--fo-glow / 詳細は変数定義箇所のコメント）。他2枚は濃色／カラーなので補正不要。 */
/* ロゴを主役サイズに引き上げるため、台座はカード内側パディング（24px）ぶん左右に
   はみ出させて有効幅を稼ぐ（台座色＝カード色なので見た目上の箱は増えない）。 */
.svc-logo{margin:24px -16px;padding:24px 0;display:flex;align-items:center;justify-content:center;min-height:144px;background:var(--white)}
.svc-logo img{max-height:80px;max-width:100%;width:auto;object-fit:contain}
/* 2ロゴの「文字の大きさ」を揃えるための個別指定（見出しロゴと同じ考え方）。
   1440 では大文字高 約37px で揃う。 */
.svc-logo--fm img{max-height:80px}
.svc-logo--fo img{max-height:96px;filter:var(--fo-glow)}
.svc-body{font-size:14px;line-height:2;color:var(--ink-mid);text-wrap:pretty;flex:1}
.svc-link{
  margin-top:24px;align-self:flex-start;
  font-family:var(--font-en);font-size:13px;color:var(--ink-head);
  border-bottom:1px solid var(--ink-head);padding-bottom:8px;
}

/* =========================================================
   06 MERIT
   ========================================================= */
.merit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.merit-card{border:1px solid var(--line);padding:32px 24px}
.merit-no{font-family:var(--font-en);font-size:12px;color:var(--ink-sub)}
.merit-name{margin-top:8px;font-size:18px;font-weight:700;color:var(--ink-head)}
.merit-en{font-family:var(--font-en);font-size:12px;color:var(--ink-sub);margin-top:0}
.merit-body{margin-top:16px;font-size:14px;line-height:2;color:var(--ink-mid);text-wrap:pretty}

/* =========================================================
   中間CTA
   ========================================================= */
.cta-slim{padding:56px 0}
/* 2026-08-20 山口さん指示: 文言とボタンを離しすぎない（space-between廃止・中央にまとめる） */
.cta-slim-inner{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.cta-slim-text{font-size:18px;font-weight:700;color:var(--ink-head)}

/* =========================================================
   共通ブロック（セクション内の小ブロック）
   ========================================================= */
.blk{margin-top:var(--blk-gap)}
.blk-head{margin-bottom:32px}
.blk-head--mt{margin-top:56px}
.blk-head h3{font-size:22px;font-weight:700;line-height:1.5;word-break:auto-phrase;text-wrap:balance}
.blk-head p{margin-top:var(--lead-gap);font-size:14px;line-height:2;color:var(--ink-mid);text-wrap:pretty}
.blk-note{margin-top:24px;font-size:14px;line-height:2;color:var(--ink-mid)}
.band-dark .blk-head h3{color:var(--white)}
.band-dark .blk-head p,
.band-dark .blk-note{color:var(--rev-text)}
.blk-note--light{color:var(--ink-mid)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap);margin-top:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.grid-3--mt{margin-top:var(--grid-gap)}

.tile{border:1px solid var(--line);padding:24px}
.tile h4{font-size:16px;font-weight:700;line-height:1.6;color:var(--ink-head)}
.tile p{margin-top:8px;font-size:14px;line-height:2;color:var(--ink-mid);text-wrap:pretty}
.tile ul{margin-top:16px}
.tile li{position:relative;padding-left:16px;font-size:14px;color:var(--ink-mid);line-height:2}
.tile li::before{content:"";position:absolute;left:0;top:.9em;width:6px;height:1px;background:var(--ink-mid)}
.tile-en{font-family:var(--font-en);font-size:12px;color:var(--ink-sub);margin-left:8px}
.tile-catch{font-size:13px;color:var(--ink-sub)}
.tile-term{margin-top:8px;font-size:12px;color:var(--ink-sub)}
.tile-plus{margin-top:16px;font-size:14px;font-weight:700;color:var(--ink-head)}
.tile-note{margin-top:8px;font-size:12px;color:var(--ink-sub)}
.tile--slim{text-align:center;padding:24px}
.tile--fig img{margin-bottom:16px;width:100%;object-fit:cover;border:1px solid var(--line)}
.fig-frame{border:1px solid var(--line);padding:24px}

/* 反転面（.band-dark 内）は白箱を置かず、罫線と反転文字だけで組む */
.band-dark .tile{border-color:var(--rev-line)}
.band-dark .tile h4,
.band-dark .tile-plus{color:var(--white)}
.band-dark .tile p,
.band-dark .tile li,
.band-dark .tile-catch,
.band-dark .tile-term,
.band-dark .tile-note,
.band-dark .tile-en{color:var(--rev-text)}
.band-dark .tile li::before{background:var(--rev-text)}

/* =========================================================
   07 FAN MOTION
   ========================================================= */
.fm-lead-wrap{margin-bottom:0}
.fm-badge{display:inline-block;padding:8px 16px;border:1px solid var(--rev-line);font-size:12px;color:var(--rev-text)}
.fm-catch{margin-top:16px;font-size:24px;font-weight:700;line-height:1.5;color:var(--white)}
.fm-lead{margin-top:var(--lead-gap);font-size:14px;line-height:2;color:var(--rev-text);text-wrap:pretty}

.fm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.fm-step{border:1px solid var(--rev-line);padding:24px}
.fm-step-no{display:inline-block;font-family:var(--font-en);font-size:12px;border:1px solid var(--rev-line);padding:8px 16px;color:var(--rev-text)}
.fm-step h3{margin-top:16px;font-size:16px;font-weight:700;color:var(--white)}
.fm-step p{margin-top:8px;font-size:14px;line-height:2;color:var(--rev-text);text-wrap:pretty}

.fm-results-label{margin-top:56px;font-size:14px;font-weight:700;color:var(--white)}
.fm-results{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:var(--lead-gap)}
.fm-result{border:1px solid var(--rev-line);padding:24px}
.fm-r-cap{font-size:12px;color:var(--rev-text)}
.fm-r-metric{margin-top:8px;font-size:13px;color:var(--rev-text)}
.fm-r-num{font-family:var(--font-en);font-weight:700;font-size:28px;line-height:1.2;margin-top:0;color:var(--white)}
.fm-r-num small{font-family:var(--font-ja);font-size:14px;font-weight:400;margin-left:0}

.pointchips{display:flex;flex-wrap:wrap;gap:16px}
.pchip{display:inline-flex;align-items:center;gap:8px;padding:16px 24px;border:1px solid var(--rev-line);font-size:14px;color:var(--rev-text)}
.pchip--on{border-color:var(--white);color:var(--white)}
.pchip--muted{opacity:.55}
.pchip-no{font-family:var(--font-en);font-size:12px}

.buzz{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--grid-gap)}
.bz{border:1px solid var(--rev-line);padding:24px 16px}
.bz-co{font-size:13px;color:var(--rev-text)}
.bz-n{font-family:var(--font-en);font-weight:700;font-size:24px;line-height:1.2;margin-top:8px;color:var(--white)}
.bz-n small{font-family:var(--font-ja);font-size:13px;font-weight:400;margin-left:0}
.bz-l{margin-top:8px;font-size:12px;color:var(--rev-text)}

/* =========================================================
   08 FIRST ONE
   ========================================================= */
.fo-lead-wrap{margin-bottom:var(--title-gap)}
.fo-def{font-size:24px;font-weight:700;line-height:1.5;color:var(--ink-head)}
.fo-lead{margin-top:var(--lead-gap);font-size:16px;line-height:1.8;color:var(--ink-mid);max-width:var(--article)}
.fo-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.fo-step{border:1px solid var(--line);padding:32px 24px}
.fo-step-no{font-family:var(--font-en);font-size:12px;color:var(--ink-sub)}
.fo-step h3{margin-top:16px;font-size:18px;font-weight:700;color:var(--ink-head)}
.fo-step p{margin-top:16px;font-size:14px;line-height:2;color:var(--ink-mid);text-wrap:pretty}

.shin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}
.shin{border:1px solid var(--line);background:var(--surface);padding:24px}
.shin-tag{display:inline-block;background:var(--ink);color:var(--white);font-size:12px;padding:8px 16px}
.shin p{margin-top:16px;font-size:14px;line-height:2;color:var(--ink-mid);text-wrap:pretty}

/* =========================================================
   12 PRESIDENT
   ========================================================= */
.pres-catch{font-size:24px;font-weight:700;line-height:1.5;color:var(--white)}
.pres-lead{margin-top:var(--lead-gap);font-size:14px;line-height:2;color:var(--rev-text);max-width:var(--article);text-wrap:pretty}
.president .grid-3.pres-grid{margin-top:var(--title-gap)}
.pres-creators-label{margin-top:32px;font-family:var(--font-en);font-size:12px;color:var(--rev-text)}
.pres-creators{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;margin-bottom:40px}
.pres-creators span{border:1px solid var(--rev-line);font-size:13px;padding:8px 16px;color:var(--rev-text)}

/* =========================================================
   13 WORKS
   ========================================================= */
.case-list{margin-top:8px}
.case-row{
  display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start;
  padding:48px var(--pad-x);
  border-top:1px solid var(--line);
}
.case-row:last-child{border-bottom:1px solid var(--line)}
.case-row:nth-child(even) .case-stage{order:2}
.case-row:nth-child(even){grid-template-columns:1fr 340px}
.case-stage{width:300px;height:560px;display:flex;align-items:center;justify-content:center}
.case-shot{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain}
/* 画像を持たない事例行はテキスト1カラムで収める */
.case-row.case-row--noshot,
.case-row.case-row--noshot:nth-child(even){grid-template-columns:1fr}
.case-row--noshot .case-text{max-width:var(--article)}
.case-client{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.case-name{font-size:18px;font-weight:700;color:var(--ink-head)}
.case-tag{border:1px solid var(--line);font-size:12px;padding:8px 16px;color:var(--ink-sub)}
.case-quote{margin-top:16px;font-size:16px;line-height:1.8;color:var(--ink-head)}
.case-body{margin-top:16px;font-size:14px;line-height:2;color:var(--ink-mid);text-wrap:pretty}
.case-result{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.rp{border:1px solid var(--line);font-size:13px;padding:8px 16px;color:var(--ink-mid)}
.rp b{color:var(--ink-head);font-weight:700}

/* =========================================================
   14 PRODUCE
   ========================================================= */
.produce-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.produce-card{border:1px solid var(--line);padding:32px 24px;text-align:center}
.produce-cat{font-size:12px;color:var(--ink-sub)}
.produce-num{font-family:var(--font-en);font-weight:700;font-size:28px;line-height:1.2;margin-top:8px;color:var(--ink-head)}
.produce-num small{font-family:var(--font-en);font-size:18px;margin-left:0}
.produce-unit{margin-top:8px;font-size:12px;color:var(--ink-sub)}
.produce-note{margin-top:16px;font-size:12px;color:var(--ink-sub)}

/* =========================================================
   15 PROFILE
   ========================================================= */
.profile-inner{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start}
/* 2026-08-19（E項）代表プロフィール写真。素材は 1254×1254 のモノクロ原本を無加工で使用し、
   トリミングのみ object-fit:cover で行う（改変禁止）。枠は1px罫線・角丸/影なし。 */
.p-photo{margin-bottom:24px;border:1px solid var(--line)}
.p-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.p-role{font-size:13px;color:var(--ink-sub)}
.p-name{margin-top:8px;font-size:24px;font-weight:700;color:var(--ink-head)}
.p-name-en{font-family:var(--font-en);font-size:13px;color:var(--ink-sub);margin-top:8px}
.p-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.p-badge{border:1px solid var(--line);font-size:12px;padding:8px 16px;color:var(--ink-mid)}
.p-badge b{color:var(--ink-head);font-weight:700}
.p-main h3{font-size:16px;font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--line);color:var(--ink-head)}
.p-bio{margin-top:16px;font-size:14px;line-height:2;color:var(--ink-mid);text-wrap:pretty}
.p-bio+.p-bio{margin-top:24px}

/* =========================================================
   16 COMPANY
   ========================================================= */
.company-table{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.company-table th,.company-table td{
  border-bottom:1px solid var(--line);
  padding:16px 24px;text-align:left;font-size:14px;line-height:1.9;vertical-align:top;
}
.company-table th{width:180px;font-weight:700;color:var(--ink-head);background:var(--surface)}
.company-table td{color:var(--ink-mid)}
.company-table li{position:relative;padding-left:16px}
.company-table li::before{content:"";position:absolute;left:0;top:.9em;width:6px;height:1px;background:var(--ink-mid)}

/* =========================================================
   17 CONTACT / フッター
   ========================================================= */
/* お問い合わせページは本文が1セクションだけで短いため、
   反転面が画面の高さまで伸びてフッターが最下部に付くようにする（白の空きを作らない） */
.page-contact{display:flex;flex-direction:column;min-height:100vh}
.page-contact main{flex:1;display:flex;flex-direction:column}
.page-contact .contact{flex:1}

.contact-catch{font-size:28px;font-weight:700;line-height:1.5;color:var(--white)}
.contact-lead{margin-top:var(--lead-gap);font-size:14px;line-height:2;color:var(--rev-text);word-break:auto-phrase;text-wrap:balance}
.contact .btn{margin-top:var(--title-gap)}

/* 2026-08-20 山口さん指示: CTA帯（band-mid=--surface）とフッターを同背景に。境界の罫線も不要 */
.site-footer{background:var(--surface);color:var(--ink-sub);padding:24px 0;margin-top:0}
.site-footer .inner{display:flex;align-items:center;justify-content:center}
/* ヘッダーロゴと同じ「SY＝グレー／ENTERTAINMENT＝黒」の1行表記に統一 */
.footer-brand{display:flex;align-items:baseline;font-family:var(--font-en);color:var(--ink)}
.fb-main{font-size:15px;font-weight:500;letter-spacing:.28em;text-indent:.28em;color:var(--ink-sub)}
.fb-sub{margin-left:2px;font-size:15px;font-weight:500;letter-spacing:.28em;text-indent:.28em;color:var(--ink)}
.footer-tag{font-size:13px;color:var(--ink-sub)}
.footer-copy{font-family:var(--font-en);font-size:12px;color:var(--ink-sub);text-align:center}
/* 多層化に伴うフッターナビ（全ページ共通・ヘッダーナビと同じ4項目） */
.footer-nav{display:flex;flex-wrap:wrap;gap:24px}
.footer-nav a{font-family:var(--font-en);font-size:13px;color:var(--ink-mid)}
.footer-nav a:hover{color:var(--ink-head);text-decoration:underline}

/* =========================================================
   お問い合わせモーダル
   ========================================================= */
.contact-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.contact-modal[hidden]{display:none}
.contact-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.51)}
.contact-modal-panel{position:relative;background:var(--white);color:var(--ink);padding:32px;max-width:420px;width:100%;text-align:center;border:1px solid var(--line)}
.contact-modal-title{font-size:16px;font-weight:700;color:var(--ink-head)}
.contact-modal-text{margin-top:16px;font-size:14px;color:var(--ink-mid)}
.contact-modal-close{margin-top:24px;min-height:44px;padding:0 24px;background:var(--ink);color:var(--white);font-size:14px;font-weight:700}

/* =========================================================
   動き（JYP §8：入場は1種類・hoverは覆いのみ）
   ========================================================= */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.is-visible{
  opacity:1;transform:translateY(0);
  transition:transform .7s cubic-bezier(.215,.61,.355,1),opacity .7s ease-out;
}
/* delayは0.2s刻みで最大2段（JYPの .on_delay.tp2 / .tp3 相当） */
.reveal.is-visible.tp2{transition-delay:.12s}
.reveal.is-visible.tp3{transition-delay:.24s}

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

/* =========================================================
   レスポンシブ（1300 / 1024 / 740 の3本のみ）
   ========================================================= */
@media (max-width:1300px){
  :root{--pad-x:40px}
  .case-row{grid-template-columns:280px 1fr;gap:40px}
  .case-row:nth-child(even){grid-template-columns:1fr 280px}
  .case-stage{width:260px;height:480px}
  .buzz{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1024px){
  :root{--pad-x:24px;--sec-y-top:56px;--sec-y-bottom:40px;--title-gap:32px;--blk-gap:48px}

  /* 2026-08-20 山口さん指示: SPでもヘッダー追従（sticky解除をやめる） */
  /* 2026-08-20 山口さん指示: SPもロゴは左上に収める（中央寄せをやめ、PCと同じ左寄せに） */
  .site-header{justify-content:space-between;min-height:76px;padding:16px var(--pad-x)}
  .brand{text-align:left}
  .site-nav{display:none}
  .nav-toggle{display:flex}
  /* 2026-08-20: SPヘッダーもsticky化したためアンカー着地をヘッダー高ぶん下げる */
  section[id]{scroll-margin-top:76px}

  .sec-en{font-size:28px}
  .sec-en--logo img{max-height:88px}
  .sec-en--logo-fm img{max-height:88px}
  .sec-en--logo-fo img{max-height:100px}

  .mvv-item{grid-template-columns:1fr;gap:16px;padding:40px 0}
  .entry-grid{grid-template-columns:1fr}

  .ach-inner{grid-template-columns:1fr;gap:32px}
  .svc-grid,.merit-grid,.fm-steps,.fm-results,.fo-steps,.grid-3{grid-template-columns:repeat(2,1fr)}
  .produce-grid{grid-template-columns:repeat(2,1fr)}
  .profile-inner{grid-template-columns:1fr;gap:32px}
  .case-row{grid-template-columns:240px 1fr;gap:32px}
  .case-row:nth-child(even){grid-template-columns:1fr 240px}
  .case-stage{width:220px;height:410px}
}

@media (max-width:740px){
  :root{--pad-x:16px;--sec-y-top:48px;--sec-y-bottom:32px;--title-gap:24px;--blk-gap:40px;--grid-gap:16px}
  .br-sp{display:inline}
  .br-pc{display:none}

  .brand-main{font-size:13px}
  .brand-sub{font-size:13px}

  .sec-en{font-size:24px}
  .sec-en--logo img{max-height:56px}
  .sec-en--logo-fm img{max-height:56px}
  /* 見出しロゴが 80px まで縮む幅では、px 固定のグロウが相対的に太くなり輪郭線に見え始める。
     ロゴの縮小率に合わせてグロウも細める（SERVICEカードは 96px のままなので据え置き）。 */
  .sec-en--logo-fo img{max-height:72px;filter:drop-shadow(0 0 1.5px rgba(17,17,17,.72)) drop-shadow(0 0 4px rgba(17,17,17,.4))}

  .mvv-statement{font-size:18px}
  .mvv-body{font-size:14px}
  .entry-en{font-size:18px}

  .mission-quote{font-size:18px}
  .fm-catch,.fo-def,.pres-catch{font-size:18px}
  .contact-catch{font-size:22px}
  .blk-head h3{font-size:18px}
  .cta-slim-text{font-size:16px}

  .svc-grid,.merit-grid,.fm-steps,.fm-results,.fo-steps,.grid-2,.grid-3,
  .shin-grid{grid-template-columns:1fr}
  .buzz,.produce-grid{grid-template-columns:repeat(2,1fr)}
  /* SPは間隔と高さを詰める（タイル・枠は引き続き付けない） */
  .cm-seg li{height:72px;padding-right:56px}
  .cm-seg img{height:32px;max-width:180px}
  /* 2026-08-19（D項）SPは2段組み（上5社／下5社）に切り替える */
  .cm-row--pc{display:none}
  .cm-row--sp{display:block}
  /* 2026-08-20 山口さん指示: SPはもう少しだけ速く（60s→45s/周・上下同速で対向） */
  .cm-track{animation-duration:45s}
  .cm-row--sp2 .cm-track{animation-delay:-15s}
  .cm-row{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  }

  .case-row{grid-template-columns:1fr;gap:24px;padding:32px var(--pad-x)}
  .case-row:nth-child(even){grid-template-columns:1fr}
  .case-row:nth-child(even) .case-stage{order:0}
  .case-stage{width:100%;max-width:260px;height:420px;margin-inline:auto}

  .company-table th,.company-table td{display:block;width:100%}
  .company-table th{border-bottom:0;padding-bottom:0}
  .company-table td{padding-top:8px}

  .cta-slim{padding:40px 0}
  .cta-slim-inner{flex-direction:column;align-items:stretch}
  .cta-slim-inner .btn{width:100%}

  .drawer-list a{font-size:18px}
}

/* 2026-08-20 山口さん指示: FAN MOTION / FIRST ONE はナビ表面に出さず SERVICE 配下に織り込む */
.site-nav-list > li{position:relative}
.subnav{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:160px;padding:8px 0;background:var(--white);border:1px solid var(--line);list-style:none;margin:0;z-index:80}
.site-nav-list > li:hover .subnav,
.site-nav-list > li:focus-within .subnav{display:block}
.subnav a{display:block;padding:10px 16px;font-size:12px;letter-spacing:.08em;white-space:nowrap;color:var(--ink);text-decoration:none}
.subnav a:hover{background:var(--surface)}
.drawer-sublist{list-style:none;margin:0;padding:0 0 0 24px}
.drawer-sublist a{font-size:13px;letter-spacing:.08em;opacity:.85}