/* ============================================================================
kg-light.css — KAGVYA v3派生(kagvya2) 白グレー・トンマナ (Perfume準拠)
----------------------------------------------------------------------------
目的: 「色味のみ」の入れ替え。レイアウト・寸法・モーション(duration/easing/
keyframe/transform)は一切触らない。color / background / border-color /
filter(色変換) / 色のみの opacity だけを上書きする。
最後に読み込む単独レイヤー = 1行を外せば元のダークに完全復帰する。
----------------------------------------------------------------------------
★ 参照元 perfume-web.jp の実コードから抽出した実値 (2026-07-28 取得)
assets/css/style.css / common.css / assets/img/background@2x.jpg
----------------------------------------------------------------------------
#ffffff body::before (ページ遷移フェード) / .c-list__category__list / .c-btn3:hover
#000000 本文既定色・.c-btn2/.c-btn4 地・.c-btn5 枠・.c-video-slide__all 地
#555555 .c-post__content p / .c-card__detail / .c-mainvisual__news 地
#888888 .c-members__name__jp / .wp-caption-text
#cccccc .c-news__item border-bottom / :first-child border-top / hr
#ebebeb 1px solid #ebebeb (汎用枠)
#f7f7f7 .c-discography-modal__wrapper / .c-download-modal__wrapper 地
#f0f0f0 .c-list__selector 地
#444444 footer 地 (白文字・見出しは opacity .5)
#333333 .c-gnavi__tooltip a:hover 地
opacity .5 .c-gnavi__sns a / .c-gnavi__title / .c-footer__copy (副次要素の減光)
opacity .3 .c-news__type::before ("|" 区切り)
rgba(0,0,0,.3) .c-video-slide__item a (映像スクリム)
rgba(0,0,0,.2) .c-video-slide__info (映像の下部タイトル帯)
black .c-loading (プリローダは本家も「黒」) / .c-video-slide / .c-banner::before
canvas main{background-image:url(background@2x.jpg); background-size:100% 100%}
= 淡い虹色オフホワイト。実JPEGの対角実測値:
(0,0)#f1f6f8 (1,1)#f2f4f8 (2,2)#f4f0f1 (3,3)#f7f2f0 (4,4)#fbf9f1
→ 同値の CSS グラデーションで自作再現(先方画像は不使用)。
----------------------------------------------------------------------------
★ 本家が「暗いまま」の要素は暗いまま踏襲する(=白一色にはしない):
プリローダ(c-loading=黒) / 映像タイル(c-video-slide=黒地+白文字) /
Video All ボタン(黒地白文字) / バナー(黒地+白文字)。
============================================================================ */
:root{
/* --- Perfume 実値パレット --- */
--pf-white:#ffffff;
--pf-ink:#000000;
--pf-ink2:#555555;
--pf-mute:#888888;
--pf-rule:#cccccc;
--pf-rule2:#ebebeb;
--pf-surface:#f7f7f7;
--pf-surface2:#f0f0f0;
--pf-dark:#444444;
--pf-canvas:linear-gradient(135deg,#f1f6f8 0%,#f2f4f8 25%,#f4f0f1 50%,#f7f2f0 75%,#fbf9f1 100%);
/* --- KAGVYA トークンの差し替え(v3ダーク → Perfume白グレー) ---
v3: bg #070809 / bg2 #0c0d11 / ink #ECE7DD / mute #8a857a
line rgba(236,231,221,.14) / red #c41a2e / gold #d4a542 */
--kg-bg:#ffffff; /* 本家 body/ページ地 */
--kg-bg2:#f7f7f7; /* 本家 modal wrapper = 面の微差 */
--kg-ink:#000000; /* 本家 本文既定色 */
--kg-mute:#888888; /* 本家 c-members__name__jp */
--kg-line:#cccccc; /* 本家 c-news__item 罫線 */
--kg-red:#000000; /* 本家 NEWS の種別(Media/Release)は黒。差し色なし */
--kg-gold:#555555; /* hover の減光色。本家 c-post__content p と同値 */
/* NEWS 行のメタ(日付/種別)。本家は日付・種別・本文とも黒(#000)。
階層を付けたい場合はここだけ #888888 等に変える。 */
--kg-news-meta:#000000;
}
/* ============================================================
1. ベース面 — 本家 main の淡い虹色オフホワイトを再現
============================================================ */
html,body,.page{background:var(--pf-white)!important;color:var(--pf-ink)!important;}
::selection{background:var(--pf-ink)!important;color:var(--pf-white)!important;}
::-moz-selection{background:var(--pf-ink)!important;color:var(--pf-white)!important;}
/* 本家: main{background-image:url(background@2x.jpg);background-size:100% 100%}
KAGVYA の は本家 main と同じ位置づけ。 */
.container-main{
background-color:var(--pf-white)!important;
background-image:var(--pf-canvas)!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
background-attachment:scroll!important;
}
/* セクションは透過にして上のキャンバスを通す(不透明白で塗り潰さない) */
.main-section,.section-main,.section-header,.main-meta,
.cm-section,#news.cm-section,#profile.cm-section,#video.cm-section,.kg-fc-section,
.pn-page,.pv-vpage{background-color:transparent!important;background-image:none!important;}
/* ============================================================
2. ヘッダー — 本家 .c-header は白地・黒文字・SNSは opacity .5
============================================================ */
.page-header{
background:rgba(255,255,255,.94)!important;
box-shadow:0 1px 0 rgba(0,0,0,.08)!important;
}
.page-header .header-nav ul li a,
.page-header .header-nav a.is-active{color:var(--pf-ink)!important;}
.page-header .header-nav ul li a:hover,
.page-header .header-nav a.is-active:hover{color:var(--pf-ink2)!important;}
/* JP/EN: 本家 gnavi の副次要素と同じ「.5 で沈める」 */
.page-header .header-lang a{color:rgba(0,0,0,.5)!important;}
.page-header .header-lang a:hover,
.page-header .header-lang a.is-active{color:var(--pf-ink)!important;}
.page-header .header-lang span{color:rgba(0,0,0,.35)!important;}
/* ヘッダーのロゴは黒（2026-07-28 ボス判断: 金も試したが「やっぱ黒」）。
本家 perfume-web.jp のヘッダーも黒ワードマーク。金webp を brightness(0) で黒シルエット化（画像は差し替えない）。
※プリローダ / FANCLUB は黒地なので金のまま。 */
.page-header .header-logo img,
.page-header .header-logo span img{filter:brightness(0)!important;}
/* SNS アイコン(svg の fill が #ECE7DD 直書き → 白地で消える)。黒化 + 本家と同じ opacity .5 */
.page-header .header-aside img{filter:brightness(0)!important;opacity:.5!important;}
.page-header .header-aside a:hover img{opacity:1!important;}
/* ============================================================
3. ハンバーガー / 全画面ナビ — 本家 .c-gnavi も同じキャンバス地
============================================================ */
.page-nav .nav-main{
background-color:var(--pf-white)!important;
background-image:var(--pf-canvas)!important;
background-repeat:no-repeat!important;background-size:100% 100%!important;
}
.page-nav .nav-main::before,.page-nav .nav-main::after{background:var(--pf-white)!important;}
.page-nav .nav-main ul li{border-top-color:var(--pf-rule)!important;}
.page-nav .nav-main ul li:last-of-type{border-bottom-color:var(--pf-rule)!important;}
.page-nav .nav-main ul li a,
.page-nav .nav-main ul li a.is-active{color:var(--pf-ink)!important;background:transparent!important;}
.page-nav .nav-main small{color:var(--pf-mute)!important;}
.nav-button button span,
.nav-button button.is-active span:nth-of-type(1),
.nav-button button.is-active span:nth-of-type(3){background:var(--pf-ink)!important;}
/* ============================================================
4. HERO — 画像はそのまま。地色(万一の隙間)のみ白グレーに
============================================================ */
.main-video#visual,.container-main--index .main-video{background-color:var(--pf-surface)!important;}
/* ============================================================
5. NEWS — 本家 .c-news: 日付/種別/本文とも #000、罫線 #cccccc、
"|" は opacity .3。ボタンは c-btn1(黒枠→hover 黒地白文字)。
============================================================ */
.pn-item{border-color:var(--pf-rule)!important;}
.pn-item:first-child{border-top-color:var(--pf-rule)!important;}
.pn-date{color:var(--kg-news-meta)!important;}
.pn-type{color:var(--kg-news-meta)!important;}
.pn-type::before{color:var(--pf-ink)!important;} /* opacity .3 は元のまま=本家同値 */
.pn-tit{color:var(--pf-ink)!important;}
.pn-item a:hover .pn-tit{color:var(--pf-ink)!important;} /* ★元は #fff = 白地で消える */
.pn-item a::after{border-top-color:var(--pf-ink)!important;border-right-color:var(--pf-ink)!important;}
/* hover のグレーオーバーレイ(#626162)は中立色なのでそのまま使える */
.kg-newsall{border-color:var(--pf-ink)!important;color:var(--pf-ink)!important;}
.kg-newsall:hover{background:var(--pf-ink)!important;color:var(--pf-white)!important;}
.pn-back a{color:var(--pf-ink)!important;border-bottom-color:var(--pf-rule)!important;}
.pn-back a:hover{color:var(--pf-ink2)!important;border-bottom-color:var(--pf-ink2)!important;}
/* ============================================================
6. PROFILE — 本家 .c-members: 名前=黒 / かな=#888888 / Birth・Blood=黒
============================================================ */
.pp-image{background-color:var(--pf-surface)!important;}
.pp-name{color:var(--pf-ink)!important;}
.pp-name__jp{color:var(--pf-mute)!important;}
.pp-birth,.pp-blood{color:var(--pf-ink)!important;} /* ★元は rgba(236,231,221,.8) */
/* ============================================================
7. VIDEO — 本家 .c-video-slide は「黒いまま」。周囲だけ白に。
スクリム rgba(0,0,0,.3) / 情報帯 rgba(0,0,0,.2) / Video All 黒地白文字。
============================================================ */
.pv-item{background:#000!important;}
.pv-cover{background:rgba(0,0,0,.3);} /* 本家実値(.32→.3) */
.pv-item:hover .pv-cover{background:rgba(0,0,0,.16);}
.pv-swiper .pv-cover{background:transparent;} /* ambient 再生中は素通し(元のまま) */
.pv-swiper .pv-item:hover .pv-cover{background:rgba(0,0,0,.14);}
.pv-info{background:rgba(0,0,0,.2)!important;color:var(--pf-white)!important;} /* 本家実値(.34→.2) */
.pv-all{background:#000!important;color:var(--pf-white)!important;}
.pv-all:hover{background:#1a1a1a!important;}
/* 本家 .c-video-slide .slick-arrow{background-color:transparent} = 情報帯と一体に見せる */
.pv-arrow{background:transparent!important;}
.pv-arrow:hover{background:rgba(0,0,0,.35)!important;}
.pv-arrow::before{border-top-color:var(--pf-white)!important;border-right-color:var(--pf-white)!important;}
.pv-counter{color:var(--pf-white)!important;}
.pv-play{border-color:var(--pf-white)!important;}
.pv-play i{border-left-color:var(--pf-white)!important;}
/* ============================================================
8. FANCLUB — 本家 .c-banner 同様「暗いバナー + 白文字」を維持。
枠ドロー(lorenzobocchi 機構)の色だけ 金 → 白(on-color)。
============================================================ */
.kg-fc{background:#000!important;border-color:#272727!important;} /* lorenzobocchi 実値・元のまま */
.kg-fc__corner{background:#ffffff!important;} /* 同上(on-color)・元のまま */
/* ★枠線ドローの色も脱色しない = 元の KAGVYA gold #d4a542 のまま（2026-07-28 ボス指示）。
--kg-gold トークンは白グレー化で #555555 に変わっているので、ここは実値で固定する。 */
.kg-fc__hl{background:#d4a542!important;}
.kg-fc__label{color:var(--pf-white)!important;}
/* ★ロゴは脱色しない = 元の金ワードマークのまま（2026-07-28 ボス指示）。
黒地なので金はそのまま映える。白化(brightness(0) invert(1))は取り止め。 */
/* ============================================================
9. フッター — 本家 .c-footer__copy は opacity .5 相当のグレー
============================================================ */
.page-footer{background:transparent!important;} /* border-top は theme 側で既に none */
.page-footer a{color:var(--pf-ink)!important;}
.page-footer a:hover{color:var(--pf-ink2)!important;}
.footer-copyright small{color:var(--pf-mute)!important;}
.footer-aside img{filter:brightness(0)!important;opacity:.5!important;}
.footer-aside a:hover img{opacity:1!important;}
.footer-pagetop a{color:var(--pf-ink)!important;border-bottom-color:var(--pf-rule)!important;}
.footer-pagetop a:hover{color:var(--pf-ink2)!important;border-bottom-color:var(--pf-ink2)!important;}
/* ============================================================
10. 見出し / 汎用テキスト
============================================================ */
.header-title h2 strong,.section-header h2 strong,
#news .header-title h2 strong,#profile .header-title h2 strong,#video .header-title h2 strong,
.pn-page-tit,.pv-vpage-tit{color:var(--pf-ink)!important;}
a{color:var(--pf-ink);}
a:hover{color:var(--pf-ink2);}
/* ★重要 — 「暗いまま残す要素」の中の文字は白に固定する。
theme-kagvya.css の総当たり `body,p,span,small,strong,em,a,h1..,li,figcaption,time,mark
{color:var(--kg-ink)}` は要素セレクタなので、親に色が付いていても子の span/em を
直接塗り替える。--kg-ink を黒にした結果、黒地ブロック内の
・FANCLUB ラベル(kg-textfx が1文字ずつ span 分割)
・VIDEO タイトル(kg-rise の内側 span)
・スライドカウンター "01 / 02" の em
が黒地に黒で消えた。子孫まで明示的に白へ戻す。 */
.kg-fc,.kg-fc *,
.pv-info,.pv-info *,
.pv-counter,.pv-counter *,
.pv-all,.pv-all *{color:var(--pf-white)!important;}
.pv-item--soon .pv-soon{color:var(--pf-mute)!important;}
/* ============================================================
11. プリローダ / 画面表示演出 / ページ遷移
・プリローダ: 本家 .c-loading{background-color:black} = 黒のまま踏襲。
ロゴのみ 金 → 白(本家ロゴは白)。
・hbars: 黒プリローダからの続きなので黒のまま。
・内部遷移カーテン: 本家のページ遷移は body::before{#fff} の白フェード
→ .kxn を黒 → 白へ。
============================================================ */
/* ★プリローダのロゴも脱色しない = 元の金ワードマークのまま（2026-07-28 ボス指示）。
★あわせて重要: ここに `filter:…!important` を置くと、退場時の
`.kg-load.is-hide .kg-load__logo{animation:kg-blur-in}` が動く filter を
!important が上書きして **blur-in(0→2px, 2拍) が丸ごと殺される**
（CSSカスケードでは author !important > animation）。ロゴに filter を書かないこと。 */
.kxn{background:var(--pf-white)!important;}
/* ============================================================
12. グレイン — ★白地では「地色を暗くしない」合成に変える
------------------------------------------------------------
問題(2026-07-28 実測): `grain.png` は平均 #525252(=82) のグレー・ノイズ。
これを normal 合成で重ねると、暗い地の上では“持ち上がって”フィルムグレインに
見えるが、**白い地の上ではただの灰色のヴェール**になる。
実測 = 背景 `#f4f1f3` → `#ebe8ea`（全チャンネル -9 / **輝度 -7.30%**）。
ボスの「Perfumeより少し暗く見える」はこれが原因（グラデーション自体は本家JPEGと
平均ΔRGB 2.75・平均輝度差 -0.08% で一致していた）。
------------------------------------------------------------
対処: overlay 合成の中立点は 0.5(=128)。`brightness(1.56)` で grain.png の平均を
82 → 127.9 ≒ 128 に持ち上げると、**明暗どちらにも偏らずテクスチャだけが乗る**。
opacity は「ざらつき量」を元と同等にする値へ (実測 σ: 元 3.23 → overlay .40 で 3.01)。
★テクスチャ画像・keyframes・尺(0.9s steps(10))は一切不変。合成方法と量だけ。
実測結果: 背景 `#f3f1f3`（輝度差 -0.18% = ほぼゼロ）でざらつきは同等。
※ overlay は真っ黒の上では効かないので、FANCLUB の黒箱・映像タイルの上には
グレインが乗らなくなる（元は僅かに乗っていた）。白ページ側を優先した判断。
============================================================ */
.site-grain{mix-blend-mode:overlay;opacity:.40;}
.site-grain__tile{filter:brightness(1.56);}
@media (max-width:720px){.site-grain{opacity:.20;}}