/*
Theme Name: 虚弱ちゃんのお部屋 v3 — Next (Cocoon Child)
Theme URI: https://kyojakuchan.com/
Description: v2（モーション版）を土台に、フルスクリーン・モーフメニュー／ページ遷移アニメ（View Transitions）／オートハイド・ヘッダー／アニメ下線＋マグネティック・ナビなど最先端の演出を追加した版。手描きの世界観はそのまま。3.1: CSSをstyle.cssに一本化。3.2: フロント先頭にスクロールスクラブ演出。3.3: 「虚弱ちゃんを応援したくなるサイト」構成へ再編。3.4: オープニングを動画なし（タイトル→コピー＋エフェクター写真）に刷新／吹き出しを手書きお団子ふきだし（fukidesign e1846）に統一／ヒーローにまんぼう追加・コピーをYomogi化／ブログカテゴリ3本化＋カテゴリ別吹き出し／「虚弱ちゃんの試行錯誤ブログ」表記／叩ける虚弱ちゃんの白枠修正＋プロフィール大画像もつつける化。3.7: ヘッダーを横向き/タブレットでもハンバーガーに統一／横向きのレスポンシブ調整／プロフィールにX・Instagram導線を復活／YouTube-SNSのYouTube枠を最新動画埋め込みに／全ページの主要要素をふわっと表示（reveal拡張）／ブログ一覧カードのまんぼう・ハート撤去。3.8: ノート地のメインビジュアルを廃止しオープニングへ集約（まんぼう＋キャッチコピー＋CTA）／オープニングを画面最上部から開始（ヘッダー分の空スクロール解消）／プロフィールの使用機材下にSNS導線／トップにh1とWebSite構造化データ。3.9: オープニングを縦横どちらの狭さにも収まる流動サイズに（見切れ・重なり解消）／1px目から演出が動く（ロード時アニメ打ち切り・演出中はヘッダーも動かさない）／サイト内遷移時は演奏動画セクションから開始。
Author: 虚弱ちゃん
Template: cocoon-master
Version: 3.9.0
Text Domain: cocoon-child-v3
*/
/* =========================================================
虚弱ちゃんのお部屋 — Design CSS
・.dc.html のインラインCSSをクラス化して集約（値は1pxも変更しない）
・画像固有の height/width のみ各 ![]()
の属性として保持
・クラスはすべて kj- プレフィックスで Cocoon と衝突回避
========================================================= */
/* ---------- Reset / Base ---------- */
:root{
--bg:#EFEAE1;
--paper:#FBF8F2;
--paper-white:#fff;
--text:#2B2A28;
--text-sub:#6E685F;
--text-sub2:#8A847A;
--text-soft:#5C564E;
--text-mute:#A8A296;
--line:#E6E1D7;
--line2:#EBE4D5;
--line3:#EAE4D8;
--accent-pink:#F2A6A0;
--accent-yellow:#F4D98B;
--btn-youtube:#E4322B;
--btn-youtube-soft:#F1908C;
--btn-latest:#BBD7E8;
--btn-x:#1A1A1A;
--ig-grad:linear-gradient(95deg,#515BD4,#DD2A7B 55%,#F58529);
--note-bg:repeating-linear-gradient(#FBF8F2 0, #FBF8F2 33px, #EBE4D5 33px, #EBE4D5 34px);
--content-max:1560px;
--kj-header-h:79px; /* .kj-header-inner の 78px ＋ 下境界 1px（v3.8: フロントの fixed ヘッダー用） */
/* v3.9: オープニングで中身を置いてよい帯。上=固定ヘッダーの下、下=SCROLLヒントの上。
タイトル/コピーはこの padding の内側に収まるので、どの画面比でも見切れ・重なりが出ない。 */
--kj-scrub-band-top:calc(var(--kj-header-h) + clamp(4px,1.4vh,14px));
--kj-scrub-band-bottom:clamp(70px,13vh,116px);
}
/* カテゴリーバッジ色（スラッグ対応） */
.kj-cat-c-tone{background:#F2A6A0 !important;}
.kj-cat-c-gear{background:#9DBE8F !important;}
.kj-cat-c-trouble{background:#7FB0CC !important;}
.kj-cat-c-zatsugaku{background:#B79FC4 !important;}
.kj-cat-c-other{background:#C9BFA9 !important;}
/* テーマ全体のベース（Cocoon の body 上に被せる） */
body.kj-front,
body.kj-sub{
background:#EFEAE1;
}
.kj-root{
width:100%;
overflow-x:hidden;
background:#EFEAE1;
font-family:'Zen Kaku Gothic New',sans-serif;
color:#2B2A28;
-webkit-font-smoothing:antialiased;
}
.kj-root *{box-sizing:border-box;}
.kj-root a{color:inherit;}
.kj-container{max-width:1560px;margin:0 auto;padding:0 48px;}
/* ---------- Loader（プログレスバー＋叩ける虚弱ちゃん） ---------- */
.kj-loader{
position:fixed;inset:0;z-index:9999;background:#EFEAE1;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
transition:opacity .6s ease;animation:fxLoaderOut .5s ease 3.6s forwards;
}
.kj-loader.done{opacity:0 !important;pointer-events:none;}
/* まんぼう：タップでぼこぼこ→途中で痛い顔→10発で消滅（挙動は effects.js） */
.kj-loader-mascot{width:96px;height:auto;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
.kj-loader-mascot.hit{animation:kjPunch .32s ease;}
.kj-loader-mascot.gone{animation:kjPoof .5s ease forwards;pointer-events:none;}
@keyframes kjPunch{0%{transform:scale(1)}35%{transform:scale(.8,.72) rotate(-7deg)}70%{transform:scale(1.1,1.06) rotate(4deg)}100%{transform:scale(1)}}
@keyframes kjPoof{35%{transform:scale(1.18) rotate(10deg);opacity:1}100%{transform:scale(0) rotate(50deg);opacity:0}}
/* プログレスバー（回転リング・「読み込み中」テキストは廃止） */
.kj-loader-bar{width:min(240px,58vw);height:8px;border-radius:6px;background:#E0DACC;overflow:hidden;}
.kj-loader-bar-fill{
display:block;height:100%;width:0;border-radius:inherit;
background:linear-gradient(90deg,#F2A6A0,#F4D98B 60%,#BBD7E8);
animation:kjLoadFill 3.2s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes kjLoadFill{0%{width:0}60%{width:78%}100%{width:96%}}
.kj-loader.done .kj-loader-bar-fill{animation:none;width:100%;transition:width .25s ease;}
/* 白背景つき虚弱ちゃん画像（通常/痛い顔）は multiply で紙面に馴染ませる */
.kj-root img[src*="kyojaku.png"],
.kj-root img[src*="kyojaku_itai.png"]{mix-blend-mode:multiply;}
/* ---------- Header ---------- */
.kj-site-header{
position:sticky;top:0;z-index:50;background:#FBF8F2;border-bottom:1px solid #E6E1D7;
transition:box-shadow .3s ease;
}
.kj-site-header.scrolled{box-shadow:0 6px 22px rgba(60,50,30,.10);}
.kj-header-inner{height:78px;display:flex;align-items:center;justify-content:space-between;}
.kj-logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.kj-logo-text{font-family:Yomogi,sans-serif;font-size:21px;font-weight:700;color:#2B2A28;letter-spacing:.5px;white-space:nowrap;}
.kj-gnav{display:flex;align-items:center;gap:24px;font-size:14.5px;font-weight:500;white-space:nowrap;}
.kj-gnav a{text-decoration:none;color:#4A463F;transition:opacity .25s ease;}
.kj-gnav a:hover{opacity:.55;}
.kj-gnav a.is-active{color:#2B2A28;font-weight:700;border-bottom:2px solid #F2A6A0;padding-bottom:5px;}
.kj-search-ico{margin-left:4px;}
.kj-menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.kj-menu-btn span{display:block;width:24px;height:2px;background:#2B2A28;}
/* モバイルメニュー（ハンバーガー展開） */
.kj-mobile-nav{display:none;flex-direction:column;background:#FBF8F2;border-bottom:1px solid #E6E1D7;padding:8px 0;}
.kj-mobile-nav.open{display:flex;}
.kj-mobile-nav a{padding:13px 48px;text-decoration:none;color:#2B2A28;font-size:15px;font-weight:500;border-top:1px solid #EFEAE1;}
.kj-mobile-nav a.is-active{color:#F2A6A0;font-weight:700;}
/* ---------- Main ---------- */
.kj-main{max-width:1560px;margin:0 auto;padding:0 48px;}
.kj-main--paper{padding-top:34px;}
/* ---------- Hero (full bleed) ---------- */
.kj-hero{
position:relative;width:100vw;margin-left:calc(50% - 50vw);
background:var(--note-bg);
border-bottom:1px solid #E6DFD0;box-shadow:0 4px 16px rgba(60,50,30,.05);overflow:hidden;
}
.kj-hero-inner{position:relative;max-width:1560px;margin:0 auto;padding:48px 72px 128px 92px;min-height:330px;}
.kj-ring{
position:absolute;left:20px;top:30px;bottom:30px;width:30px;
background:url(assets/paper/ring-binding-cut.png) repeat-y;background-size:30px auto;opacity:.95;
}
.kj-hero-inner .kj-ring{left:22px;}
.kj-decor{position:absolute;pointer-events:none;z-index:1;}
.kj-hero-sparkle{top:12px;left:436px;width:30px;opacity:.6;}
.kj-hero-note{top:24px;left:250px;width:22px;opacity:.5;}
.kj-hero-star{top:62px;left:566px;width:22px;opacity:.5;}
.kj-hero-content{position:relative;z-index:3;max-width:600px;}
/* タイトル上のマンボウ（つつける） */
.kj-hero-mascot-top{display:block;margin-bottom:6px;}
.kj-hero-eyebrow{font-family:Yomogi,sans-serif;font-size:19px;font-weight:700;color:#5C564E;letter-spacing:2px;margin-bottom:10px;}
/* キャッチコピーは「虚弱ちゃんのお部屋」と同じ Yomogi・マーカー無し */
.kj-hero-title{font-family:Yomogi,sans-serif;font-size:40px;font-weight:700;line-height:1.6;color:#2B2A28;letter-spacing:1px;}
.kj-hero-lead{margin:20px 0 0;font-size:15.5px;line-height:1.95;color:#6E685F;}
.kj-hero-cta{display:flex;gap:14px;margin-top:88px;align-items:center;}
/* Buttons */
.kj-btn-yt{
display:inline-flex;align-items:center;gap:9px;background:#E4322B;color:#fff;
padding:11px 20px;border-radius:9px;font-size:15px;font-weight:700;text-decoration:none;
box-shadow:0 3px 9px rgba(228,50,43,.42);
}
.kj-yt-chip{width:24px;height:24px;background:#fff;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;}
.kj-btn-latest{
display:inline-flex;align-items:center;background:#1A1A1A;color:#fff;
padding:11px 22px;border-radius:9px;font-size:15px;font-weight:700;text-decoration:none;
}
.kj-btn-ghost{
display:inline-flex;align-items:center;background:#fff;border:1px solid #E0DACE;color:#2B2A28;
padding:11px 24px;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none;
}
/* Mascot + speech bubble（手書きお団子ふきだし: assets/decor/fukidashi.svg / fukidesign e1846）
v3.5: 「まんぼうが話してる」ように、吹き出しを上・まんぼうをしっぽの真下に縦積み。
SVG のしっぽは下辺のほぼ中央（x≈335〜412/800）にあるため、まんぼうは中央揃えで
しっぽ直下に来る。既定の左右反転（しっぽやや右）に合わせて数px右に寄せる。 */
.kj-mascot-group{display:flex;flex-direction:column;align-items:center;}
.kj-mascot-group>img{margin-top:-7px;margin-left:10px;}
.kj-speech{
position:relative;isolation:isolate;background:none;border:none;
padding:10px 25px 22px;font-family:Yomogi,sans-serif;font-size:13.5px;color:#2B2A28;white-space:nowrap;
text-align:center;
}
/* ふきだし本体はSVG。既定はしっぽやや右（下のまんぼうに向く）＝左右反転で表示 */
.kj-speech::before{
content:"";position:absolute;inset:0;z-index:-1;
background:url(assets/decor/fukidashi.svg) no-repeat center / 100% 100%;
transform:scaleX(-1);
}
/* 旧: 行内配置時代の余白調整。縦積みでは吹き出し〜まんぼう間を詰めるため 0 に */
.kj-speech--mb18,.kj-speech--mb16,.kj-speech--mb14{margin-bottom:0;}
.kj-speech--center{font-size:13px;line-height:1.5;text-align:center;}
/* 旧CSS三角しっぽは廃止（SVGにしっぽが含まれる） */
.kj-speech-tail{display:none;}
.kj-flip{transform:scaleX(-1);}
/* 動画カード内の「最近の演奏！」まんぼう（v3.5: ヒーローから移設） */
.kj-mascot-video{
position:absolute;top:14px;right:26px;z-index:2;
display:flex;flex-direction:column;align-items:center;
}
.kj-mascot-video>img{margin-top:-7px;margin-left:10px;}
/* ---------- 最新の演奏動画（ヒーロー下に重なる白カード） ---------- */
.kj-video{
position:relative;z-index:6;margin-top:-78px;background:#fff;border-radius:14px;
box-shadow:0 6px 22px rgba(60,50,30,.10);padding:40px 32px 42px;text-align:center;
}
.kj-wave--center{margin:8px auto 0;}
.kj-video-lead{margin:18px 0 0;font-size:14.5px;line-height:2;color:#6E685F;}
.kj-video-frame{
position:relative;display:block;margin:28px auto 0;max-width:860px;aspect-ratio:16/9;
border-radius:12px;overflow:hidden;background:#0C0B0A;box-shadow:0 8px 26px rgba(60,50,30,.16);
}
.kj-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.kj-video-frame--fallback{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
color:#F6F1E7;font-size:15px;font-weight:700;text-decoration:none;letter-spacing:1px;
}
.kj-video-frame--fallback img{filter:invert(.92);}
/* v3.6: 3本（バタフライ / カルマ / 誘惑）を同サイズで横並び。曲名テロップは無し */
.kj-video-row{
display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
max-width:1180px;margin:28px auto 0;align-items:start;
}
.kj-video-row .kj-video-frame{margin:0;max-width:none;}
.kj-video-frame--sub{box-shadow:0 6px 18px rgba(60,50,30,.13);}
/* タブレット幅では3本並べると小さすぎるので縦積みに落とす */
@media(max-width:900px){
.kj-video-row{grid-template-columns:1fr;gap:18px;max-width:860px;}
}
.kj-video-actions{margin-top:26px;display:flex;justify-content:center;}
/* ---------- Category nav ---------- */
.kj-cat-grid{
position:relative;z-index:6;margin-top:-78px;background:#fff;border-radius:14px;
box-shadow:0 6px 22px rgba(60,50,30,.10);padding:30px 26px;display:flex;
}
/* 「主なコンテンツ」用: ヒーロー重なり無しの通常配置 */
.kj-contents{margin-top:62px;}
.kj-cat-grid--flat{margin-top:26px;}
.kj-cat-item{flex:1;text-align:center;padding:8px 14px;transition:transform .35s cubic-bezier(.2,.7,.2,1);text-decoration:none;color:inherit;}
.kj-cat-item + .kj-cat-item{border-left:1px solid #EFEAE1;}
.kj-cat-item:hover{transform:translateY(-7px);}
.kj-cat-ico{height:50px;display:flex;align-items:center;justify-content:center;}
.kj-cat-ico img{transition:transform .35s ease;}
.kj-cat-item:hover .kj-cat-ico img{transform:scale(1.13) rotate(-4deg);}
.kj-cat-title{font-size:16px;font-weight:700;margin-top:12px;}
.kj-cat-desc{font-size:12.5px;color:#8A847A;margin-top:7px;line-height:1.65;}
/* ---------- Section heads ---------- */
.kj-latest{margin-top:58px;}
.kj-secthead{display:flex;align-items:flex-end;justify-content:space-between;}
.kj-secthead--center{align-items:center;}
.kj-h2{margin:0;font-size:26px;font-weight:900;letter-spacing:.5px;}
.kj-wave{margin-top:8px;display:block;}
.kj-seeall{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#6E685F;text-decoration:none;}
/* ---------- Post grid (top) — 横スクロールカルーセル（最大10件・PCは4枚見せ） ---------- */
.kj-post-grid{
margin-top:26px;display:grid;grid-auto-flow:column;
grid-auto-columns:calc((100% - 66px) / 4); /* gap 22px×3 を引いて4等分 */
gap:22px;overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; /* Firefox: バー非表示 */
padding-bottom:6px;
}
.kj-post-grid::-webkit-scrollbar{display:none;} /* Safari/Chrome: バー非表示 */
.kj-post-grid > *{scroll-snap-align:start;}
.kj-post-card{
display:block;background:#fff;border-radius:12px;overflow:hidden;
box-shadow:0 3px 12px rgba(60,50,30,.06);text-decoration:none;color:#2B2A28;
transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.kj-post-card:hover{transform:translateY(-9px);box-shadow:0 18px 36px rgba(60,50,30,.17);}
.kj-pc-imgwrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:#EFEAE1;}
.kj-pc-imgwrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.kj-post-card:hover .kj-pc-imgwrap img{transform:scale(1.08);}
.kj-badge{position:absolute;top:12px;left:12px;padding:4px 12px;border-radius:6px;font-size:11.5px;font-weight:700;color:#fff;}
.kj-badge-inline{display:inline-block;padding:4px 12px;border-radius:6px;font-size:11.5px;font-weight:700;color:#fff;}
.kj-pc-body{padding:15px 16px 17px;}
.kj-pc-title{font-size:15px;font-weight:700;line-height:1.55;min-height:46px;}
.kj-pc-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
.kj-pc-date{font-size:13px;color:#A8A296;}
.kj-mini-mascot{opacity:.85;}
/* Pagination dots（カルーセル連動・クリックで移動） */
.kj-dots{margin-top:30px;display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap;}
.kj-dot{width:9px;height:9px;border-radius:50%;background:#D8D2C6;border:none;padding:0;cursor:pointer;transition:background .25s ease,transform .25s ease;}
.kj-dot:hover{transform:scale(1.3);}
.kj-dot.is-active{background:#F2A6A0;}
/* ---------- Profile section (front) ---------- */
.kj-profile{
margin-top:62px;display:flex;gap:50px;align-items:center;background:#FBF8F2;
border-radius:16px;padding:42px 48px;box-shadow:0 3px 16px rgba(60,50,30,.05);
}
.kj-profile-photo{position:relative;width:clamp(240px,30%,340px);flex:none;}
.kj-photo-main{width:100%;display:block;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.12);}
/* v3.5: トップ「虚弱ちゃんって？」のアイコンだけ白背景（透過まんぼう＋白地） */
.kj-photo-main--white{background:#fff;padding:26px;box-sizing:border-box;}
.kj-profile-photo .kj-photo-main{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.kj-profile-photo:hover .kj-photo-main{transform:scale(1.04);}
.kj-tape{position:absolute;top:-16px;left:-12px;width:96px;transform:rotate(-10deg);}
.kj-tape--pf{width:100px;}
.kj-clip{position:absolute;top:-12px;right:26px;width:34px;transform:rotate(8deg);}
.kj-clip--pf{right:28px;}
.kj-profile-body{flex:1;}
.kj-h2b{margin:0;font-size:22px;font-weight:900;}
.kj-profile-text{margin:18px 0 0;font-size:14.5px;line-height:1.95;color:#5C564E;}
.kj-profile-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:24px;flex-wrap:wrap;}
/* ---------- YouTube / SNS (front) ---------- */
.kj-snshome{margin-top:66px;}
.kj-snshome-lead{margin:12px 0 0;font-size:14.5px;color:#5C564E;}
.kj-h2-deco{display:flex;align-items:center;gap:12px;}
.kj-sns-grid{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.kj-sns-btn{display:flex;align-items:center;justify-content:center;gap:11px;color:#fff;padding:16px;border-radius:10px;font-size:16px;font-weight:700;text-decoration:none;}
.kj-sns-btn--yt{background:#E4322B;}
.kj-sns-btn--x{background:#1A1A1A;}
.kj-sns-btn--ig{background:linear-gradient(95deg,#515BD4,#DD2A7B 55%,#F58529);}
/* ---------- 使用機材（front） ---------- */
.kj-gsec{margin-top:62px;}
.kj-gsec-lead{margin:16px 0 0;font-size:14.5px;line-height:2;color:#6E685F;}
.kj-g-grid{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.kj-g-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px rgba(60,50,30,.06);}
.kj-g-thumb{position:relative;aspect-ratio:4/3;background:#F4F1EA;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.kj-g-thumb--cover img{width:100%;height:100%;object-fit:cover;display:block;}
.kj-g-thumb--contain img{max-width:72%;max-height:82%;object-fit:contain;display:block;}
.kj-g-thumb--icon img{height:64px;width:auto;opacity:.85;}
.kj-g-body{padding:16px 16px 18px;}
.kj-g-name{font-size:15px;font-weight:700;margin-top:10px;}
.kj-g-desc{margin:8px 0 0;font-size:12.5px;line-height:1.8;color:#8A847A;}
/* ---------- Footer ---------- */
.kj-footer{margin-top:66px;background:#FBF8F2;border-top:1px solid #E6E1D7;}
.kj-footer .kj-container{padding:48px 48px 30px;}
.kj-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}
.kj-footer-logo{display:flex;align-items:center;gap:11px;}
.kj-footer-logo span{font-family:Yomogi,sans-serif;font-size:19px;font-weight:700;letter-spacing:1px;}
.kj-footer-desc{margin:16px 0 0;font-size:12.5px;color:#8A847A;line-height:1.9;max-width:280px;}
.kj-footer-h{font-size:14px;font-weight:700;margin-bottom:14px;}
.kj-footer-list{list-style:none;margin:0;padding:0;font-size:13.5px;color:#5C564E;line-height:2.15;}
.kj-footer-list a{text-decoration:none;color:inherit;}
.kj-footer-sns{display:flex;gap:14px;align-items:center;}
.kj-copyright{border-top:1px solid #E6E1D7;margin-top:36px;padding-top:20px;text-align:center;font-size:12.5px;color:#A8A296;}
/* ---------- Paper sheet (blog / profile / sns) ---------- */
.kj-paper{
position:relative;background:var(--note-bg);border-radius:16px;
box-shadow:0 3px 16px rgba(60,50,30,.06);padding:48px 56px 54px 80px;overflow:hidden;
}
.kj-paper--blog{padding:44px 56px 52px 80px;}
.kj-divider{border-top:1px solid #E6E1D7;}
.kj-divider--28{margin:28px 0 0;}
.kj-divider--30{margin:30px 0 0;}
.kj-divider--44{margin:44px 0 0;}
/* ---------- Blog list ---------- */
.kj-breadcrumb{font-size:13px;color:#9A948A;}
.kj-bc-sep{margin:0 8px;}
.kj-bc-current{color:#5C564E;}
.kj-blog-head{display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
.kj-blog-title{margin:0;font-size:40px;font-weight:900;letter-spacing:2px;word-break:keep-all;} /* 改行は の位置のみ */
.kj-blog-desc{margin:14px 0 0;font-size:14.5px;line-height:1.9;color:#6E685F;max-width:620px;}
.kj-blog-cols{display:flex;gap:48px;margin-top:30px;align-items:flex-start;}
.kj-blog-aside{width:210px;flex:none;}
.kj-cat-list{list-style:none;margin:0;padding:0;font-size:14.5px;}
.kj-cat-list li{padding:11px 16px;border-radius:9px;color:#5C564E;}
.kj-cat-list li.is-active{background:#F3D9D6;color:#2B2A28;font-weight:700;}
.kj-cat-list a{text-decoration:none;color:inherit;display:block;}
.kj-tags-h{font-size:15px;font-weight:700;margin:28px 0 14px;}
.kj-tags{display:flex;flex-wrap:wrap;gap:9px;}
.kj-tag{border:1px solid #DCD5C8;border-radius:20px;padding:6px 14px;font-size:12.5px;color:#5C564E;text-decoration:none;}
.kj-post-list{flex:1;}
.kj-post-row{display:flex;gap:24px;align-items:center;text-decoration:none;color:#2B2A28;padding:22px 0;border-bottom:1px solid #EAE4D8;}
.kj-pr-img{width:212px;height:142px;flex:none;border-radius:8px;overflow:hidden;background:#EFEAE1;position:relative;}
.kj-pr-img img{width:100%;height:100%;object-fit:cover;display:block;}
.kj-pr-body{flex:1;}
.kj-pr-title{font-size:18px;font-weight:700;line-height:1.55;margin-top:12px;}
.kj-pr-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
.kj-pr-icons{display:inline-flex;align-items:center;gap:7px;}
/* Pager */
.kj-pager{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:34px;}
.kj-pager a,.kj-pager span{width:38px;height:38px;border-radius:9px;color:#5C564E;display:inline-flex;align-items:center;justify-content:center;font-size:14px;text-decoration:none;}
.kj-pager .is-current{background:#7D98A6;color:#fff;font-weight:700;}
.kj-pager .kj-pager-gap{width:auto;height:auto;color:#9A948A;padding:0 4px;}
.kj-pager .kj-pager-next{border:1px solid #DCD5C8;font-size:15px;}
/* ---------- Profile page ---------- */
.kj-pf-top{display:flex;gap:54px;align-items:center;}
.kj-pf-lead{flex:1;}
.kj-pf-h1{margin:0;font-size:32px;font-weight:900;letter-spacing:1px;}
.kj-pf-sub{font-size:23px;font-weight:700;line-height:1.5;margin-top:16px;}
.kj-pf-text{margin:22px 0 0;font-size:14.5px;line-height:1.95;color:#5C564E;}
.kj-pf-cta{display:flex;align-items:center;gap:18px;margin-top:30px;}
.kj-pf-photo{position:relative;width:340px;flex:none;}
.kj-pf-h2{font-size:21px;font-weight:900;}
.kj-pf-h2--a{margin:34px 0 0;}
.kj-pf-h2--b{margin:46px 0 0;}
.kj-act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:26px;}
.kj-act{display:flex;gap:14px;align-items:flex-start;}
.kj-act-title{font-size:16px;font-weight:700;}
.kj-act-text{margin:8px 0 0;font-size:13px;line-height:1.8;color:#7A746A;}
.kj-gear-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px;}
.kj-gear-thumb{background:#F4F1EA;border-radius:10px;height:160px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.kj-gear-thumb img{width:100%;height:100%;object-fit:cover;}
.kj-gear-thumb--contain img{height:150px;width:auto;object-fit:contain;}
.kj-gear-name{text-align:center;font-size:13.5px;color:#5C564E;margin-top:12px;}
/* v3.5: 使用機材は「ただいま更新中」プレースホルダ表示 */
.kj-gear-updating{
margin-top:24px;background:#F4F1EA;border-radius:10px;padding:34px 20px;
display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.kj-gear-updating-text{font-family:Yomogi,sans-serif;font-size:16px;font-weight:700;line-height:1.9;color:#5C564E;}
/* ---------- SNS page ---------- */
.kj-sns-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.kj-sns-h1{margin:0;font-size:30px;font-weight:900;letter-spacing:1px;}
.kj-sns-h1-lead{margin:14px 0 0;font-size:14.5px;line-height:1.9;color:#6E685F;}
.kj-sns-row{display:flex;gap:44px;align-items:center;padding:34px 0;border-bottom:1px solid #EAE4D8;}
.kj-sns-row--last{border-bottom:none;}
.kj-sns-col{flex:1;}
/* メディア（写真・埋め込み）を持たない行: ボタンの直後で締まるよう余白を詰める */
.kj-sns-row--nomedia .kj-sns-rowbtn{margin-top:18px;}
.kj-sns-rowhead{display:flex;align-items:center;gap:11px;}
.kj-sns-badge{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;}
.kj-sns-badge--yt{background:#E4322B;}
.kj-sns-badge--x{background:#1A1A1A;}
.kj-sns-badge--ig{background:linear-gradient(95deg,#515BD4,#DD2A7B 55%,#F58529);}
.kj-sns-rowname{font-size:21px;font-weight:800;}
.kj-sns-rowsub{font-size:12px;color:#9A948A;}
.kj-sns-note{margin:16px 0 0;font-size:14px;line-height:1.85;color:#5C564E;}
.kj-sns-rowbtn{display:inline-flex;align-items:center;gap:10px;color:#fff;padding:13px 26px;border-radius:9px;font-size:15px;font-weight:700;text-decoration:none;margin-top:22px;}
.kj-sns-rowbtn--yt{background:#E4322B;}
.kj-sns-rowbtn--x{background:#1A1A1A;}
.kj-sns-rowbtn--ig{background:linear-gradient(95deg,#515BD4,#DD2A7B 55%,#F58529);}
.kj-sns-rowbtn--ghost{background:#fff;border:1px solid #DCD5C8;color:#2B2A28;padding:13px 28px;}
.kj-sns-media{width:380px;flex:none;}
.kj-sns-media--video{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.12);}
.kj-sns-media--video img{width:100%;height:230px;object-fit:cover;display:block;}
.kj-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);}
.kj-play-tri{display:block;width:0;height:0;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px;}
.kj-tweet{border:1px solid #E6E1D7;border-radius:12px;padding:16px;background:#fff;}
.kj-tweet-head{display:flex;align-items:center;gap:10px;}
.kj-tweet-name{font-size:13px;font-weight:700;}
.kj-tweet-handle{color:#9A948A;font-weight:400;margin-left:6px;}
.kj-tweet-text{margin:12px 0 0;font-size:13.5px;line-height:1.7;color:#2B2A28;}
.kj-tweet-img{border-radius:8px;overflow:hidden;margin-top:12px;}
.kj-tweet-img img{width:100%;height:150px;object-fit:cover;display:block;}
.kj-tweet-tags{font-size:12.5px;color:#7F86C9;margin-top:10px;}
.kj-ig-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.kj-ig-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;}
.kj-sns-media--qr{display:flex;justify-content:center;}
.kj-qr{width:160px;height:160px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.1);}
/* ---------- 叩ける虚弱ちゃん（透過まんぼう＋ data-poke の大きい虚弱ちゃん） ---------- */
.kj-poke{cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
.kj-poke.hit{animation:kjPunch .32s ease;}
.kj-poke-cry{
position:fixed;z-index:9999;transform:translate(-50%,0);pointer-events:none;
font-family:Yomogi,sans-serif;font-size:14px;font-weight:700;color:#E58A83;
text-shadow:0 1px 0 #fff,0 0 6px rgba(255,255,255,.8);
animation:kjCryUp .85s ease-out forwards;
}
@keyframes kjCryUp{0%{opacity:0;transform:translate(-50%,4px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}
/* ---------- Animations ---------- */
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxLoaderOut{to{opacity:0;visibility:hidden}}
@keyframes fxDrift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(9deg)}}
@keyframes fxDrift2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(-11deg)}}
.kj-spin{animation:fxSpin 1s linear infinite;}
.kj-bob{animation:fxFloat 1.8s ease-in-out infinite;}
.kj-float4{animation:fxFloat 4s ease-in-out infinite;}
.kj-drift1{animation:fxDrift 5s ease-in-out infinite;}
.kj-drift2{animation:fxDrift2 6.5s ease-in-out infinite;}
.kj-drift3{animation:fxDrift 7.6s ease-in-out infinite;}
/* Reveal on scroll (transform only — opacity stays 1) */
.kj-reveal{transition:transform .8s cubic-bezier(.2,.7,.2,1);}
html.kj-fx-on .kj-reveal{transform:translateY(36px);}
.kj-reveal.in{transform:none !important;}
.kj-post-grid>.kj-reveal:nth-child(1){transition-delay:0s;}
.kj-post-grid>.kj-reveal:nth-child(2){transition-delay:.12s;}
.kj-post-grid>.kj-reveal:nth-child(3){transition-delay:.24s;}
.kj-post-grid>.kj-reveal:nth-child(4){transition-delay:.36s;}
/* v3.5: セクション内の要素を順番に出す stagger（.kj-reveal と併用、.in で発火）。
JS 失敗時は effects.js のフォールバックが .in を必ず付けるため消えっぱなしにならない */
html.kj-fx-on .kj-stagger>*{
opacity:0;transform:translateY(20px);
transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);
}
html.kj-fx-on .kj-stagger.in>*{opacity:1;transform:none;}
.kj-stagger.in>*:nth-child(1){transition-delay:.05s;}
.kj-stagger.in>*:nth-child(2){transition-delay:.15s;}
.kj-stagger.in>*:nth-child(3){transition-delay:.25s;}
.kj-stagger.in>*:nth-child(4){transition-delay:.35s;}
.kj-stagger.in>*:nth-child(5){transition-delay:.45s;}
.kj-stagger.in>*:nth-child(6){transition-delay:.55s;}
.kj-stagger.in>*:nth-child(7){transition-delay:.65s;}
/* Hover (card / button / zoom) */
.kj-fx-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;}
.kj-fx-card:hover{transform:translateY(-7px);box-shadow:0 16px 32px rgba(60,50,30,.15);}
.kj-fx-zoom{overflow:hidden;}
.kj-fx-zoom img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.kj-fx-card:hover .kj-fx-zoom img{transform:scale(1.06);}
.kj-fx-btn{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;}
.kj-fx-btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.18);filter:brightness(1.05);}
@media(prefers-reduced-motion:reduce){
html.kj-fx-on .kj-reveal{transform:none !important;}
html.kj-fx-on .kj-stagger>*{opacity:1 !important;transform:none !important;transition:none !important;}
.kj-root *{animation:none !important;}
}
/* =========================================================
Responsive
========================================================= */
/* --- 共通：ハンバーガー切替（front=880 / sub=760） --- */
@media(max-width:880px){
body.kj-front .kj-gnav{display:none !important;}
body.kj-front .kj-menu-btn{display:flex !important;}
body.kj-front .kj-footer-grid{grid-template-columns:1.4fr 1fr 1fr;}
}
@media(max-width:760px){
body.kj-sub .kj-gnav{display:none !important;}
body.kj-sub .kj-menu-btn{display:flex !important;}
body.kj-sub .kj-footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px;}
}
/* --- front: 〜600px スマホ --- */
@media(max-width:600px){
body.kj-front .kj-hero-inner{padding:28px 22px 34px 62px !important;}
body.kj-front .kj-hero-title{font-size:26px !important;}
/* 最新の演奏動画: SPは全幅寄りで大きく見せる
（v3.5: ヒーローからまんぼうが抜けて低くなったため、重なりはCTAを隠さない程度に） */
body.kj-front .kj-video{margin:-14px 0 0 0 !important;padding:26px 16px 32px !important;}
body.kj-front .kj-video-lead{font-size:13.5px !important;}
/* SPは「最近の演奏！」まんぼうを絶対配置にせず、見出しの上に中央で出す */
body.kj-front .kj-mascot-video{position:static !important;margin:0 auto 10px !important;}
body.kj-front .kj-video-row{grid-template-columns:1fr !important;gap:18px !important;}
body.kj-front .kj-cat-grid{flex-wrap:wrap !important;gap:6px 0 !important;}
body.kj-front .kj-cat-grid--flat{margin:22px 0 0 0 !important;}
body.kj-front .kj-cat-item{flex:0 0 50% !important;border-left:none !important;padding:14px 6px !important;}
body.kj-front .kj-g-grid{grid-template-columns:1fr 1fr !important;gap:14px !important;}
body.kj-front .kj-g-body{padding:12px 12px 14px !important;}
/* スマホ: カルーセルは1枚+次カードちら見せ（縦積みは廃止） */
body.kj-front .kj-post-grid{grid-auto-columns:76% !important;}
body.kj-front .kj-profile{flex-direction:column !important;align-items:flex-start !important;}
body.kj-front .kj-profile-photo{width:100% !important;max-width:none !important;}
body.kj-front .kj-sns-grid{grid-template-columns:1fr !important;}
body.kj-front .kj-footer-grid{grid-template-columns:1fr 1fr !important;gap:28px 20px !important;}
body.kj-front .kj-secthead{flex-direction:column !important;align-items:flex-start !important;gap:14px !important;}
}
/* --- sub pages: 〜760px --- */
@media(max-width:760px){
/* blog */
body.kj-sub .kj-blog-cols{flex-direction:column !important;gap:30px !important;}
body.kj-sub .kj-blog-aside{width:100% !important;}
body.kj-sub .kj-post-row{flex-direction:column !important;align-items:stretch !important;}
body.kj-sub .kj-post-row .kj-pr-img{width:100% !important;height:200px !important;}
body.kj-sub .kj-secthead{flex-direction:column !important;align-items:flex-start !important;gap:14px !important;}
/* paper padding（profile/sns=44 / blog=40） */
body.kj-sub .kj-paper{padding:36px 24px 44px 62px !important;}
body.kj-sub .kj-paper--blog{padding:36px 24px 40px 62px !important;}
/* profile */
body.kj-sub .kj-pf-top{flex-direction:column-reverse !important;gap:30px !important;align-items:flex-start !important;}
body.kj-sub .kj-pf-photo{width:100% !important;}
body.kj-sub .kj-act-grid{grid-template-columns:1fr !important;gap:24px !important;}
body.kj-sub .kj-gear-grid{grid-template-columns:1fr 1fr !important;}
/* sns */
body.kj-sub .kj-sns-row{flex-direction:column !important;gap:20px !important;align-items:flex-start !important;}
body.kj-sub .kj-sns-media{width:100% !important;}
}
/* =========================================================
▼▼▼ ここから旧 style-v2.css（Motion Layer）を統合 ▼▼▼
虚弱ちゃんのお部屋 — Motion Layer (v2)
・base の style.css を土台に、今風モーション & UI/UX 磨き込みを「上乗せ」する強化レイヤー。
・すべて additive。JS(motion.js)が付ける html.kj-motion 配下でのみ発火 → 非JS/失敗時は完全に素の見た目に戻る。
・prefers-reduced-motion は最下部で一括無効化。
手描き・ノート風のブランドは崩さず、"生きた紙面" を作るのが狙い。
========================================================= */
:root{
--v2-shadow-soft:0 10px 30px rgba(60,50,30,.10);
--v2-shadow-lift:0 26px 50px -12px rgba(60,50,30,.28);
--v2-ease:cubic-bezier(.2,.7,.2,1);
--v2-focus:#F2A6A0;
}
/* ---------- Accessibility: 一貫したフォーカスリング ---------- */
.kj-root a:focus-visible,
.kj-root button:focus-visible,
.kj-root input:focus-visible{
outline:3px solid var(--v2-focus);
outline-offset:3px;
border-radius:8px;
}
/* =========================================================
1. スクロール進行バー（上部・ブランドグラデ）
========================================================= */
.kj-progress{
position:fixed;top:0;left:0;height:3px;width:0;z-index:9998;
background:linear-gradient(90deg,#F2A6A0,#F4D98B 60%,#BBD7E8);
box-shadow:0 1px 8px rgba(242,166,160,.5);
transform-origin:left center;transition:opacity .3s ease;pointer-events:none;
}
/* =========================================================
2. ヘッダー：スクロールでガラス質（backdrop-blur + 半透明ペーパー）
========================================================= */
html.kj-motion .kj-site-header{
transition:box-shadow .3s ease,background-color .3s ease,backdrop-filter .3s ease,border-color .3s ease;
}
html.kj-motion .kj-site-header.scrolled{
background:rgba(251,248,242,.82);
-webkit-backdrop-filter:saturate(1.4) blur(12px);
backdrop-filter:saturate(1.4) blur(12px);
border-bottom-color:rgba(242,166,160,.35);
box-shadow:0 8px 28px rgba(60,50,30,.12);
}
/* ロゴのまんぼうが軽く息をする */
html.kj-motion .kj-logo img{transition:transform .4s var(--v2-ease);}
html.kj-motion .kj-logo:hover img{transform:rotate(-6deg) scale(1.08);}
/* =========================================================
3. ヒーロー：カーソル追従の 3D 紙面 + オーロラの淡い光
（signature：ここだけ大胆に。周りは静かに保つ）
========================================================= */
html.kj-motion .kj-hero{isolation:isolate;}
/* 奥に漂うオーロラ光（ピンク/イエロー/ブルーの淡いにじみ） */
html.kj-motion .kj-hero::before{
content:"";position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
background:
radial-gradient(38% 46% at 22% 30%,rgba(242,166,160,.30),transparent 70%),
radial-gradient(34% 40% at 78% 22%,rgba(244,217,139,.26),transparent 70%),
radial-gradient(40% 50% at 62% 84%,rgba(187,215,232,.28),transparent 72%);
filter:blur(8px);
animation:kjAurora 18s ease-in-out infinite alternate;
will-change:transform,opacity;
}
@keyframes kjAurora{
0% {transform:translate3d(0,0,0) scale(1);opacity:.85;}
50% {transform:translate3d(2.5%,-2%,0) scale(1.06);opacity:1;}
100%{transform:translate3d(-2%,1.5%,0) scale(1.03);opacity:.9;}
}
/* リングに柔らかな発光 */
html.kj-motion .kj-ring{filter:drop-shadow(0 0 14px rgba(242,166,160,.35));}
/* カーソル追従：--mx/--my（-1..1）を motion.js が供給 */
html.kj-motion .kj-hero-inner{perspective:1100px;}
html.kj-motion .kj-hero-content{
transform:rotateY(calc(var(--mx,0) * 3deg)) rotateX(calc(var(--my,0) * -2.4deg)) translateZ(0);
transform-style:preserve-3d;
transition:transform .5s var(--v2-ease);
will-change:transform;
}
/* 手描きドゥードルは深さ違いで視差（奥行き感） */
html.kj-motion .kj-hero-sparkle{transform:translate3d(calc(var(--mx,0) * 26px),calc(var(--my,0) * 20px),0);}
html.kj-motion .kj-hero-note {transform:translate3d(calc(var(--mx,0) * -20px),calc(var(--my,0) * 16px),0);}
html.kj-motion .kj-hero-star {transform:translate3d(calc(var(--mx,0) * 32px),calc(var(--my,0) * -14px),0);}
html.kj-motion .kj-hero-sparkle,
html.kj-motion .kj-hero-note,
html.kj-motion .kj-hero-star{transition:transform .6s var(--v2-ease);}
/* drift アニメと視差が競合しないよう、ラッパで視差・中身でdriftを分離 */
html.kj-motion .kj-hero-inner:hover .kj-drift1,
html.kj-motion .kj-hero-inner:hover .kj-drift2,
html.kj-motion .kj-hero-inner:hover .kj-drift3{animation-play-state:paused;}
/* =========================================================
4. スクロール・リビール強化（透過 + ぼかし + 立ち上がり）
base の .kj-reveal(translateY) に opacity/blur を上乗せ。effects.js / motion.js が .in を付与。
========================================================= */
html.kj-motion .kj-reveal{
opacity:0;filter:blur(6px);
transition:transform .85s var(--v2-ease),opacity .7s ease,filter .7s ease;
}
html.kj-motion .kj-reveal.in{opacity:1;filter:none;}
/* セクション見出しの波線が引かれるように出る */
html.kj-motion .kj-wave{
transform-origin:left center;transform:scaleX(0);
transition:transform .7s var(--v2-ease) .15s;
}
html.kj-motion .kj-reveal.in .kj-wave,
html.kj-motion .kj-secthead.in .kj-wave{transform:scaleX(1);}
/* =========================================================
5. 3D tilt カード（JS が transform を所有 → :hover の競合を無効化）
motion.js は hover:hover & pointer:fine の端末でのみ html に kj-motion-hover を付与。
========================================================= */
html.kj-motion-hover .kj-post-card,
html.kj-motion-hover .kj-cat-item,
html.kj-motion-hover .kj-gear-thumb,
html.kj-motion-hover .kj-profile-photo{
transform-style:preserve-3d;
transition:transform .35s var(--v2-ease),box-shadow .35s ease;
will-change:transform;
}
/* :hover の translate を JS に譲る（reset時のガクつき防止） */
html.kj-motion-hover .kj-post-card:hover{transform:none;}
html.kj-motion-hover .kj-cat-item:hover{transform:none;}
html.kj-motion-hover .kj-post-card.kj-tilting{box-shadow:var(--v2-shadow-lift);}
html.kj-motion-hover .kj-cat-item.kj-tilting{box-shadow:0 20px 40px -14px rgba(60,50,30,.22);border-radius:14px;}
/* 光沢（glare）：カーソル位置に淡いハイライト。post-card / gear-thumb は overflow:hidden で内側クリップ */
.kj-glare{
position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
opacity:0;transition:opacity .3s ease;mix-blend-mode:soft-light;
background:radial-gradient(180px 180px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.9),transparent 60%);
}
.kj-tilting .kj-glare{opacity:.55;}
/* =========================================================
6. マグネティック CTA & ボタンの磨き込み
========================================================= */
html.kj-motion .kj-fx-btn{will-change:transform;transition:transform .18s var(--v2-ease),box-shadow .25s ease,filter .25s ease;}
/* YouTube ボタン：ほんのり奥行きのあるグラデ */
html.kj-motion .kj-btn-yt{background:linear-gradient(180deg,#EF4C45,#D8261F);}
html.kj-motion .kj-btn-latest{background:linear-gradient(180deg,#2E2C29,#141414);}
html.kj-motion .kj-sns-btn{transition:transform .18s var(--v2-ease),box-shadow .25s ease,filter .25s ease;}
html.kj-motion .kj-sns-btn:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 14px 30px rgba(0,0,0,.20);filter:brightness(1.04);}
/* 押下の手応え */
html.kj-motion .kj-fx-btn:active,
html.kj-motion .kj-sns-btn:active{transform:translateY(-1px) scale(.985);}
/* カテゴリカードのアイコンに軽い浮き（tilt と併走） */
html.kj-motion .kj-cat-ico img{will-change:transform;}
/* =========================================================
7. 記事カードの仕上げ（バッジの立体感・画像の陰影）
========================================================= */
html.kj-motion .kj-badge,
html.kj-motion .kj-badge-inline{box-shadow:0 4px 10px rgba(60,50,30,.18);backdrop-filter:saturate(1.2);}
html.kj-motion .kj-pc-imgwrap::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,transparent 55%,rgba(43,42,40,.22));
opacity:0;transition:opacity .4s ease;
}
html.kj-motion .kj-post-card:hover .kj-pc-imgwrap::after{opacity:1;}
/* プロフィール写真：ホバーで軽く立つ（tilt が無い端末向けの保険） */
html.kj-motion .kj-photo-main{transition:transform .5s var(--v2-ease),box-shadow .5s ease;}
/* =========================================================
8. reduced-motion：モーションを一括で鎮める（見た目は素のまま可視）
========================================================= */
@media(prefers-reduced-motion:reduce){
html.kj-motion .kj-reveal{opacity:1 !important;filter:none !important;transform:none !important;}
html.kj-motion .kj-hero::before{animation:none !important;}
html.kj-motion .kj-hero-content,
html.kj-motion .kj-hero-sparkle,
html.kj-motion .kj-hero-note,
html.kj-motion .kj-hero-star{transform:none !important;transition:none !important;}
html.kj-motion .kj-wave{transform:none !important;}
.kj-glare{display:none !important;}
.kj-progress{display:none !important;}
}
/* 小さめ端末ではカーソル追従3Dは無効（ドゥードルはスクロール連動に譲るので transform は殺さない） */
@media(max-width:760px){
html.kj-motion .kj-hero-content{transform:none !important;}
html.kj-motion .kj-hero-inner{perspective:none;}
}
/* スクロール連動パララックス中は ambient drift を止めて JS の transform を優先 */
html.kj-scrollpx .kj-hero-sparkle,
html.kj-scrollpx .kj-hero-note,
html.kj-scrollpx .kj-hero-star{animation:none !important;}
/* =========================================================
9. スマホ最適化（v2 で base のレスポンシブを上書き）
・カテゴリー：3+1 の崩れた二段 → 1 行アイコンナビに。説明文はスマホ非表示（情報量を絞る）
・ヒーロー：CTA を縦積み・全幅でタップしやすく、吹き出し＋まんぼうを中央に整える
========================================================= */
@media(max-width:600px){
/* --- スマホは左右余白を詰める（base の 48px は狭い画面に広すぎる） --- */
body.kj-front .kj-main{padding-left:16px !important;padding-right:16px !important;}
.kj-footer .kj-container{padding-left:20px !important;padding-right:20px !important;}
/* --- カテゴリーナビ：横1行のアイコン＋短ラベル（説明文は隠す） --- */
body.kj-front .kj-cat-grid{
flex-wrap:nowrap !important;
padding:14px 4px !important;
margin-top:-40px !important;
gap:0 !important;
}
body.kj-front .kj-cat-item{
flex:1 1 0 !important;
min-width:0 !important;
border-left:none !important;
padding:10px 3px !important;
}
body.kj-front .kj-cat-item + .kj-cat-item{border-left:none !important;}
body.kj-front .kj-cat-ico{height:38px !important;}
body.kj-front .kj-cat-ico img{height:auto !important;width:auto !important;max-height:34px !important;}
body.kj-front .kj-cat-title{font-size:11px !important;margin-top:6px !important;line-height:1.3 !important;}
body.kj-front .kj-cat-desc{display:none !important;} /* 文字数が多いので画像＋ラベルのみ */
/* 「主なコンテンツ」（見出し付きフラット配置）はヒーロー重なり用の負マージンを打ち消す */
body.kj-front .kj-cat-grid--flat{margin-top:18px !important;}
/* --- ヒーロー：CTA 縦積み・全幅 --- */
body.kj-front .kj-hero-lead{font-size:14px !important;line-height:1.85 !important;}
body.kj-front .kj-hero-cta{
flex-direction:column !important;
align-items:stretch !important;
gap:10px !important;
margin-top:22px !important;
}
body.kj-front .kj-btn-yt,
body.kj-front .kj-btn-latest{width:100% !important;justify-content:center !important;}
/* ※ v3.5: ヒーローの「最近の演奏！」まんぼうは動画カード内（.kj-mascot-video）へ移設済み */
}
/* =========================================================
10. タッチ・モーション（スマホ強化）
・タップの沈み込み＋弾み（tilt が効かないタッチ端末の触感）
・登場をリッチに stagger（カテゴリー＝ロード時 / 記事＝スクロール時）
========================================================= */
/* --- タップの沈み込み＋弾み（ポインタ非対応＝タッチ端末） --- */
@media(hover:none){
.kj-root .kj-post-card,
.kj-root .kj-post-row,
.kj-root .kj-cat-item,
.kj-root .kj-sns-btn,
.kj-root .kj-fx-btn{
transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease !important;
-webkit-tap-highlight-color:transparent;
}
.kj-root .kj-post-card:active,
.kj-root .kj-post-row:active,
.kj-root .kj-cat-item:active,
.kj-root .kj-sns-btn:active,
.kj-root .kj-fx-btn:active{
transform:scale(.95) !important; /* 離すと spring ease で弾んで戻る */
transition-duration:.1s !important;
}
}
/* --- 登場 stagger：カテゴリーナビ
v3.5: ロード時ではなく「主なコンテンツ」がスクロールで見えたとき（.kj-contents.in）に
1枚ずつ順番に立ち上がる。tilt の inline transform と競合しないよう transition ではなく
animation 方式（終了後は fill 無しで解放）。 --- */
@keyframes kjRiseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.kj-motion .kj-contents:not(.in) .kj-cat-item{opacity:0;}
html.kj-motion .kj-contents.in .kj-cat-item{animation:kjRiseIn .6s var(--v2-ease) backwards;}
html.kj-motion .kj-contents.in .kj-cat-item:nth-child(1){animation-delay:.06s}
html.kj-motion .kj-contents.in .kj-cat-item:nth-child(2){animation-delay:.18s}
html.kj-motion .kj-contents.in .kj-cat-item:nth-child(3){animation-delay:.30s}
html.kj-motion .kj-contents.in .kj-cat-item:nth-child(4){animation-delay:.42s}
html.kj-motion .kj-contents.in .kj-cat-item:nth-child(5){animation-delay:.54s}
/* --- 登場 stagger：ブログ一覧の横長カード（スクロールで順番に） --- */
html.kj-motion .kj-post-list > .kj-reveal:nth-child(1){transition-delay:0s}
html.kj-motion .kj-post-list > .kj-reveal:nth-child(2){transition-delay:.08s}
html.kj-motion .kj-post-list > .kj-reveal:nth-child(3){transition-delay:.16s}
html.kj-motion .kj-post-list > .kj-reveal:nth-child(4){transition-delay:.24s}
html.kj-motion .kj-post-list > .kj-reveal:nth-child(5){transition-delay:.32s}
html.kj-motion .kj-post-list > .kj-reveal:nth-child(6){transition-delay:.40s}
@media(prefers-reduced-motion:reduce){
html.kj-motion .kj-contents .kj-cat-item{animation:none !important;opacity:1 !important;}
html.kj-scrollpx .kj-hero-sparkle,
html.kj-scrollpx .kj-hero-note,
html.kj-scrollpx .kj-hero-star{transform:none !important;}
}
/* =========================================================
11. 下層ページ（ブログ/記事/プロフィール/SNS）
・紙面の背景を「要素まで」ではなく横いっぱい(full-bleed)に
・記事(single)の本文タイポグラフィ
・スマホのレスポンシブ最適化
========================================================= */
/* --- 紙面背景を全幅に：カード見た目をやめ、::after で 100vw のノート背景を敷く --- */
.kj-main--paper .kj-paper{
background:transparent;
box-shadow:none;
border-radius:0;
overflow:visible; /* full-bleed をクリップさせない */
}
.kj-main--paper .kj-paper::after{
content:"";
position:absolute; top:0; bottom:0;
left:calc(50% - 50vw); width:100vw;
/* ヒーローと同じ背景：横罫線ペーパー＋ピンク/イエロー/ブルーの淡いオーロラ */
background:
radial-gradient(70% 380px at 18% 0%, rgba(242,166,160,.20), transparent 72%),
radial-gradient(62% 340px at 86% 0%, rgba(244,217,139,.18), transparent 72%),
radial-gradient(80% 420px at 55% 100%, rgba(187,215,232,.16), transparent 74%),
var(--note-bg);
border-top:1px solid #E6DFD0; border-bottom:1px solid #E6DFD0;
z-index:0; pointer-events:none;
}
.kj-main--paper .kj-paper > *{position:relative; z-index:1;}
/* リング綴じは全幅背景の左端（＝ページ左端）に寄せて“ノートらしさ”を保つ */
.kj-main--paper .kj-paper > .kj-ring{left:calc(50% - 50vw + 10px);}
/* --- 記事ページ（single） --- */
.kj-single-head{margin-top:14px;}
.kj-single .kj-badge-inline{display:inline-block;margin-bottom:12px;text-decoration:none;}
.kj-single-title{font-size:30px;font-weight:900;line-height:1.5;letter-spacing:.5px;margin:6px 0 0;}
.kj-single-meta{display:flex;align-items:center;justify-content:space-between;margin-top:16px;}
.kj-single-hero{margin:24px 0 6px;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(60,50,30,.14);max-width:900px;}
.kj-single-hero img{width:100%;height:auto;display:block;}
.kj-single-content{margin-top:26px;font-size:15.5px;line-height:2;color:#3A362F;max-width:760px;}
.kj-single-content > *:first-child{margin-top:0;}
.kj-single-content p{margin:0 0 1.4em;}
.kj-single-content h2{font-size:21px;font-weight:900;margin:1.9em 0 .7em;padding-left:14px;border-left:5px solid var(--accent-pink);line-height:1.5;}
.kj-single-content h3{font-size:17px;font-weight:800;margin:1.6em 0 .6em;}
.kj-single-content ul,.kj-single-content ol{margin:0 0 1.4em;padding-left:1.4em;}
.kj-single-content li{margin:.45em 0;}
.kj-single-content a{color:#C9736C;text-decoration:underline;}
.kj-single-content img{max-width:100%;height:auto;border-radius:10px;}
.kj-single-content blockquote{margin:1.4em 0;padding:12px 18px;background:rgba(255,255,255,.6);border-left:4px solid var(--accent-yellow);border-radius:8px;}
.kj-single-content strong{background:linear-gradient(transparent 62%,rgba(244,217,139,.55) 62%);font-weight:700;}
.kj-single-tags{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:34px;padding-top:22px;border-top:1px solid #E6E1D7;}
.kj-tags-h--inline{margin:0 4px 0 0;font-size:14px;font-weight:700;}
.kj-single-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:36px;flex-wrap:wrap;}
.kj-tags-empty{font-size:12.5px;color:#A8A296;}
/* --- スマホ最適化（≤600px）：下層ページ全般 --- */
@media(max-width:600px){
/* 全幅背景に合わせて main の左右余白は 0、余白は紙面側で持つ */
.kj-main--paper{padding-left:0 !important;padding-right:0 !important;padding-top:20px !important;}
/* base の body.kj-sub .kj-paper--blog / .kj-paper (!important) に勝つよう詳細度を上げる */
body.kj-sub .kj-main--paper .kj-paper{padding:26px 25px 36px 25px !important;}
/* ブログ見出し・説明: タイトルは 位置（虚弱ちゃんの/試行錯誤ブログ）で折り、
まんぼう＋吹き出しはタイトルの下の行に（右はみ出し防止） */
body.kj-sub .kj-blog-title{font-size:30px !important;}
body.kj-sub .kj-blog-head{flex-direction:column !important;align-items:flex-start !important;gap:14px !important;}
body.kj-sub .kj-blog-head .kj-mascot-group{align-self:flex-end;}
/* 記事ページ */
.kj-single-title{font-size:23px !important;}
.kj-single-content{font-size:15px !important;line-height:1.95 !important;}
.kj-single-foot{flex-direction:column !important;align-items:flex-start !important;}
/* プロフィール：CTA が右にはみ出す問題 → 折返し＆まんぼうを次行へ */
body.kj-sub .kj-pf-cta{flex-wrap:wrap !important;gap:14px !important;}
body.kj-sub .kj-pf-h1{font-size:27px !important;}
body.kj-sub .kj-pf-sub{font-size:19px !important;}
/* SNS：見出しのまんぼうを縦に、行を詰める */
body.kj-sub .kj-sns-page-head{flex-direction:column !important;align-items:flex-start !important;gap:14px !important;}
body.kj-sub .kj-sns-h1{font-size:26px !important;}
body.kj-sub .kj-tweet,
body.kj-sub .kj-sns-media{width:100% !important;}
}
/* =========================================================
12. ユーザー修正（スマホ中心。レイアウトは @media でPC不変）
========================================================= */
/* --- ボタン文字色：X / YouTube は必ず白（親テーマの a 色に負けないよう !important） --- */
.kj-root .kj-sns-btn--x,
.kj-root .kj-sns-btn--yt,
.kj-root .kj-sns-rowbtn--x,
.kj-root .kj-sns-rowbtn--yt,
.kj-root .kj-btn-latest,
.kj-root .kj-btn-yt{color:#fff !important;}
/* --- プロフィールの YouTube ボタンを他と統一（赤） --- */
.kj-root .kj-pf-cta .kj-btn-yt{
background:#E4322B !important;
box-shadow:0 3px 9px rgba(228,50,43,.42) !important;
}
/* --- ローダーのイースターエッグ文字（まんぼうタップで表示） --- */
.kj-loader-egg{
margin-top:4px;min-height:22px;
font-family:Yomogi,sans-serif;font-size:16px;color:#E58A83;letter-spacing:1px;
opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;
}
.kj-loader-egg.show{opacity:1;transform:none;}
/* --- スマホ（≤600px）：隙間除去・被り解消・左右パディング均等25px --- */
@media(max-width:600px){
/* ヘッダー/フッターとメインの隙間を詰める（下層のみ。TOPはメインとフッターの間に余白を確保） */
.kj-footer{margin-top:0 !important;}
body.kj-front .kj-footer{margin-top:48px !important;}
.kj-main--paper{padding-top:0 !important;}
body.kj-front .kj-snshome{margin-bottom:0 !important;}
/* ヘッダー：ロゴと三本線メニューの被りを解消（余白を詰め＋ロゴ微縮小） */
.kj-container{padding-left:18px !important;padding-right:18px !important;}
.kj-header-inner{gap:12px !important;}
.kj-logo{min-width:0 !important;flex:0 1 auto !important;}
.kj-logo img{height:38px !important;}
.kj-logo-text{font-size:16.5px !important;white-space:nowrap !important;}
.kj-menu-btn{flex:none !important;}
/* メインの左右パディングを均等 25px、ノートのリング(左だけの装飾)は非表示 → 右寄り解消 */
body.kj-sub .kj-main--paper .kj-paper{padding-left:25px !important;padding-right:25px !important;}
.kj-main--paper .kj-paper > .kj-ring,
body.kj-front .kj-hero .kj-ring{display:none !important;}
body.kj-front .kj-main{padding-left:25px !important;padding-right:25px !important;}
body.kj-front .kj-hero-inner{padding-left:25px !important;padding-right:25px !important;}
}
/* --- position:sticky を壊さないよう overflow-x を clip に（clip はスクロールコンテナを作らない）
→ スマホでヘッダーがスクロール追従しない不具合を解消 --- */
.kj-root{overflow-x:clip;}
/* =========================================================
13. 追加修正（PC/スマホ両方）
========================================================= */
/* --- 下層ページ：ヘッダー/フッターとの隙間（グレー帯・色変わり）を除去（PC含む） --- */
.kj-main--paper{padding-top:0 !important;}
body.kj-sub .kj-footer{margin-top:0 !important;}
/* --- ブログ記事カードを白背景に（後ろのクリーム紙面と差をつける）／PC・スマホ両方 --- */
.kj-post-row{
background:#fff !important;
border:1px solid #EFE9DC !important;
border-radius:12px !important;
box-shadow:0 3px 12px rgba(60,50,30,.07) !important;
padding:16px 20px !important;
margin-bottom:16px !important;
}
/* --- スマホ（≤600px）：ブログ一覧を2カラムグリッド（2記事ずつ収まるサイズ） --- */
@media(max-width:600px){
body.kj-sub .kj-post-list{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:12px !important;
align-items:start !important;
}
body.kj-sub .kj-post-row{
flex-direction:column !important;
padding:0 !important;
margin-bottom:0 !important;
overflow:hidden !important;
text-align:left !important;
}
body.kj-sub .kj-post-row .kj-pr-img{width:100% !important;height:104px !important;border-radius:0 !important;}
body.kj-sub .kj-pr-body{padding:9px 11px 12px !important;}
body.kj-sub .kj-pr-title{
font-size:13px !important;line-height:1.5 !important;margin-top:7px !important;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
body.kj-sub .kj-pr-meta{margin-top:8px !important;}
body.kj-sub .kj-pr-icons{display:none !important;}
body.kj-sub .kj-pager{grid-column:1 / -1 !important;}
}
/* =========================================================
▼▼▼ ここから旧 style-v3.css（Next Layer）を統合 ▼▼▼
虚弱ちゃんのお部屋 — Next Layer (v3)
v2 の上にさらに「最先端」演出を上乗せ。
1) ページ遷移アニメ（View Transitions API）
2) オートハイド・ヘッダー
3) ハンバーガー→× モーフ ＋ フルスクリーン・メニュー
4) アニメ下線 ＋ マグネティック・ナビ（PC）
すべて progressive enhancement。非対応/reduced-motion では素直に動作。
========================================================= */
/* =========================================================
1. ページ遷移アニメ（View Transitions API）
同一オリジンのページ移動をふわっとクロスフェード。対応ブラウザのみ。
========================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.38s; }
/* ヘッダーは遷移中も持続（チラつき防止） */
.kj-site-header{ view-transition-name: kj-header; }
/* =========================================================
2. オートハイド・ヘッダー（下で隠れ／上で即再表示）
========================================================= */
.kj-site-header{
transition:transform .45s var(--v2-ease), box-shadow .3s ease,
background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
z-index:65; /* フルスクリーンメニューより前面：ロゴと×を常にタップ可能に */
}
.kj-site-header.kj-hidden{ transform:translateY(-100%); }
/* =========================================================
3. ハンバーガー → × モーフ
========================================================= */
.kj-menu-btn{position:relative;z-index:66;}
.kj-menu-btn span{transition:transform .35s var(--v2-ease), opacity .2s ease;transform-origin:center;}
.kj-menu-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.kj-menu-btn.is-open span:nth-child(2){opacity:0;transform:scaleX(.4);}
.kj-menu-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* =========================================================
3b. フルスクリーン・メニュー
========================================================= */
.kj-fs-menu{
position:fixed;inset:0;z-index:60;
display:flex;flex-direction:column;
padding:96px 32px 36px;overflow-y:auto;
background:rgba(251,248,242,.97);
-webkit-backdrop-filter:blur(16px) saturate(1.2);
backdrop-filter:blur(16px) saturate(1.2);
opacity:0;visibility:hidden;transform:scale(1.03);
transition:opacity .4s ease, visibility .4s ease, transform .5s var(--v2-ease);
}
.kj-fs-menu.open{opacity:1;visibility:visible;transform:none;}
body.kj-menu-open{overflow:hidden;}
.kj-fs-nav{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:560px;margin:0 auto;}
.kj-fs-nav a{
display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:18px 6px;border-bottom:1.5px dashed #E2DACB;
font-family:Yomogi,sans-serif;font-size:30px;font-weight:700;letter-spacing:.5px;
color:#2B2A28;text-decoration:none;
opacity:0;transform:translateY(26px);
transition:opacity .5s ease, transform .55s var(--v2-ease);
transition-delay:calc(var(--i,1) * .07s);
}
.kj-fs-menu.open .kj-fs-nav a{opacity:1;transform:none;}
.kj-fs-nav a.is-active{color:#E58A83;}
.kj-fs-nav a .kj-fs-label{transition:background .3s ease;padding:0 2px;word-break:keep-all;} /* 改行は の位置のみ */
.kj-fs-nav a:hover .kj-fs-label,
.kj-fs-nav a:active .kj-fs-label{background:linear-gradient(transparent 58%,rgba(242,166,160,.5) 58%);}
.kj-fs-arrow{height:14px;width:auto;opacity:0;transform:translateX(-10px);transition:opacity .3s ease, transform .3s var(--v2-ease);}
.kj-fs-nav a:hover .kj-fs-arrow,
.kj-fs-nav a.is-active .kj-fs-arrow{opacity:.65;transform:none;}
.kj-fs-foot{
display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
width:100%;max-width:560px;margin:22px auto 0;
opacity:0;transform:translateY(20px);
transition:opacity .5s ease, transform .55s var(--v2-ease);
transition-delay:calc(var(--i,5) * .07s);
}
.kj-fs-menu.open .kj-fs-foot{opacity:1;transform:none;}
.kj-fs-sns{display:flex;gap:18px;align-items:center;}
.kj-fs-sns a{display:inline-flex;transition:transform .25s var(--v2-ease);}
.kj-fs-sns a:hover{transform:translateY(-3px) scale(1.08);}
.kj-fs-mascot{display:flex;flex-direction:column;align-items:center;}
.kj-fs-mascot>img{margin-top:-7px;margin-left:10px;}
/* =========================================================
4. アニメ下線 ＋ マグネティック・ナビ（PC）
========================================================= */
.kj-gnav{position:relative;}
/* 静的下線は廃止して、スライドする下線に置き換え */
.kj-gnav a.is-active{border-bottom:none !important;padding-bottom:0 !important;color:#2B2A28;font-weight:700;}
.kj-gnav a{transition:transform .2s var(--v2-ease), opacity .25s ease;}
.kj-nav-underline{
position:absolute;left:0;bottom:-5px;width:0;height:3px;
background:linear-gradient(90deg,#F2A6A0,#F4D98B);border-radius:3px;
opacity:0;transform:translateX(0);pointer-events:none;
transition:transform .35s var(--v2-ease), width .35s var(--v2-ease), opacity .3s ease;
}
/* =========================================================
5. reduced-motion / 小画面 の配慮
========================================================= */
@media (prefers-reduced-motion: reduce){
.kj-site-header,.kj-menu-btn span,.kj-fs-menu,.kj-fs-nav a,.kj-fs-foot,.kj-nav-underline,.kj-gnav a{
transition:none !important;
}
.kj-fs-menu.open .kj-fs-nav a,
.kj-fs-menu.open .kj-fs-foot{opacity:1 !important;transform:none !important;}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
}
@media(max-width:600px){
.kj-fs-nav a{font-size:26px;padding:15px 4px;}
.kj-fs-menu{padding:88px 22px 28px;}
}
/* =========================================================
▼▼▼ v3.1.1 追加: おすすめ固定表示 / X実ポスト埋め込み / 最新記事カルーセル補足
========================================================= */
/* --- おすすめ固定表示（タグ「おすすめ」）。PC=ブログ見出しの上 / SP=ジャンルの上 --- */
.kj-pin{display:flex;flex-direction:column;gap:10px;margin:16px 0 4px;}
.kj-pin-item{
display:flex;align-items:center;gap:12px;
background:#fff;border:1.5px solid #F2A6A0;border-radius:10px;
padding:8px 12px;text-decoration:none;color:#2B2A28;
box-shadow:0 3px 10px rgba(60,50,30,.08);
transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;
}
.kj-pin-item:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(60,50,30,.14);}
.kj-pin-badge{flex:none;background:#F2A6A0;color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:5px;}
.kj-pin-thumb{flex:none;width:56px;height:42px;border-radius:6px;overflow:hidden;background:#EFEAE1;}
.kj-pin-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.kj-pin-title{font-size:13.5px;font-weight:700;line-height:1.5;}
/* 出し分け: SP用はブログ2カラムが縦積みになる760px以下でのみ表示 */
.kj-pin--sp{display:none;}
@media(max-width:760px){
.kj-pin--pc{display:none;}
.kj-pin--sp{display:flex;margin:0 0 18px;}
}
/* --- X 実ポスト埋め込み（page-sns） --- */
.kj-tweet--live{padding:8px 8px 4px;}
.kj-tweet--live .twitter-timeline{
display:block;padding:10px 8px;font-size:13.5px;font-weight:700;color:#5C564E;text-decoration:none;
}
.kj-tweet--live iframe{border-radius:8px;}
/* =========================================================
▼▼▼ v3.5: フロント・オープニング
エフェクターボード写真（cover・黒帯なし・最初から薄く表示）の上に
まんぼう＋「虚弱ちゃんのお部屋」→ スクロールでキャッチコピーへ。
========================================================= */
.kj-scrub{
/* v3.8: コピー＋CTAが出切ったあと“見せたまま留まる”区間を作るため 130vh→150vh。
ボタンを演出内に置いた以上、出た瞬間に流れていくと押せないため。 */
position:relative;height:150vh;
width:100vw;margin-left:calc(50% - 50vw); /* .kj-main 内から全幅ブレイクアウト */
background:#0C0B0A;
}
.kj-scrub-stage{
/* v3.9: dvh（表示中のビューポート）に追従。svh 固定だと、スマホでURLバーが
引っ込んだ瞬間にステージだけ短いままになり、中身が上へズレて見える。 */
position:sticky;top:0;height:100vh;height:100svh;height:100dvh;
overflow:hidden;background:#0C0B0A;
}
/* エフェクターボード写真（v3.5）: cover で黒帯なし・最初から表示。
横画面=PC_エフェクター / 縦画面=スマホ_エフェクター を出し分け。
素の写真はガチャガチャするので ::after の黒スクリムで薄める（ズームのみ JS）。 */
.kj-scrub-bg{
position:absolute;inset:0;pointer-events:none;
background:url(assets/photo/fx-board-pc.jpg) center center / cover no-repeat;
transform:scale(1.06);will-change:transform;
}
@media (orientation: portrait){
.kj-scrub-bg{background-image:url(assets/photo/fx-board-sp.jpg);}
}
/* 薄めスクリム: 全体を沈めつつ、文字が乗る中央をさらに少し暗く */
.kj-scrub-bg::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(90% 80% at 50% 50%,rgba(12,11,10,.30) 0%,rgba(12,11,10,.62) 100%),
rgba(12,11,10,.38);
}
/* 最初に出すサイトタイトル（まんぼう＋タイトル、ロード時にふわっと立ち上がる） */
.kj-scrub-titlecard{
position:absolute;inset:0;display:flex;flex-direction:column;gap:clamp(6px,1.6vh,14px);
align-items:center;justify-content:center;
padding:var(--kj-scrub-band-top) clamp(14px,4vw,24px) var(--kj-scrub-band-bottom);
text-align:center;pointer-events:none;
font-family:Yomogi,sans-serif;font-size:clamp(22px,min(5vw,9vh),52px);font-weight:700;
color:#F6F1E7;letter-spacing:4px;
word-break:keep-all; /* 折返しは （「の」の後）だけ。変な位置で切れない */
text-shadow:0 2px 18px rgba(0,0,0,.55);
animation:kjScrubTitleIn 1.4s cubic-bezier(.2,.7,.2,1) .15s backwards;
}
/* 透過まんぼうは暗い線画のため、暗い写真の上では白線画に反転して見せる */
.kj-scrub-mascot{
height:clamp(38px,min(8vw,10vh),88px);width:auto;
filter:invert(.92) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
/* v3.6: サイト内からトップへ遷移したときは開始位置がヒーローになる（js/scrub.js の
リファラ判定で初期スクロールするだけ。オープニングDOM/演出はそのまま残る） */
@keyframes kjScrubTitleIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
/* スクロールで浮かぶキャッチコピー（タイトルと同じ Yomogi・マーカー無し） */
.kj-scrub-copy{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:clamp(6px,1.7vh,24px);
text-align:center;opacity:0;transform:translateY(26px);pointer-events:none;
padding:var(--kj-scrub-band-top) clamp(14px,4vw,24px) var(--kj-scrub-band-bottom);
font-family:Yomogi,sans-serif;font-size:clamp(19px,min(4.6vw,7.4vh),48px);font-weight:700;
color:#F6F1E7;letter-spacing:2px;line-height:1.7;
text-shadow:0 2px 18px rgba(0,0,0,.55);
}
/* キャッチコピー下に入る説明書き（少し小さめ・薄め・画面内に収まるサイズ） */
.kj-scrub-sub{
display:block;max-width:34em;
font-size:clamp(10.5px,min(2.4vw,2.6vh),17px);font-weight:500;letter-spacing:1px;line-height:1.75;
color:rgba(246,241,231,.72);
text-shadow:0 1px 10px rgba(0,0,0,.5);
}
/* スクロールヒント（マウス絵＋SCROLL表記） */
.kj-scrub-hint{
/* v3.9: 下の“ヒント帯”（--kj-scrub-band-bottom）の中だけに居る。
タイトル/コピー側はこの帯を padding で空けているので、どの画面比でも重ならない。 */
position:absolute;left:50%;bottom:clamp(10px,3.2vh,48px);transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.1vh,10px);
color:#F6F1E7;font-size:clamp(9.5px,1.4vh,11.5px);font-weight:700;letter-spacing:clamp(2px,.5vh,4px);
text-shadow:0 1px 8px rgba(0,0,0,.6);transition:opacity .4s ease;
}
.kj-scrub-mouse{
position:relative;width:clamp(17px,2.9vh,24px);height:clamp(27px,4.6vh,38px);
border:2px solid #F6F1E7;border-radius:13px;
box-shadow:0 1px 8px rgba(0,0,0,.4);
}
.kj-scrub-mouse::before{
content:"";position:absolute;left:50%;top:14%;margin-left:-1.5px;
width:3px;height:18%;border-radius:2px;background:#F6F1E7;
animation:kjWheel 1.6s ease-in-out infinite;
}
@keyframes kjWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(11px);opacity:0}100%{transform:translateY(0);opacity:0}}
/* v3.5: SCROLL ヒントは施主要望で出しっぱなし（.hide 運用は廃止） */
/* v3.9: スマホ/横向きの固定値上書きは撤去。サイズは上の clamp(min(vw,vh)) が
縦横どちらの狭さにも同時に効くため、メディアクエリ無しで1画面に収まる。
letter-spacing だけは狭い画面で詰める。 */
@media(max-width:480px){
.kj-scrub-copy{letter-spacing:1px;}
}
/* モーション控えめ設定 */
@media (prefers-reduced-motion: reduce){
.kj-scrub{height:110vh;}
.kj-scrub-titlecard{animation:none;}
.kj-scrub-mouse::before{animation:none;}
}
/* =========================================================
▼▼▼ v3.7: 施主要望（2026-07-22）
1. ヘッダーは横向き／タブレットでもハンバーガー（三点リーダー）に統一
2. 横向き〜タブレット幅（601〜1024px）のレスポンシブ崩れを整える
3. プロフィールに X / Instagram のアイコン導線
4. YouTube / SNS の「YouTube」枠を最新動画の埋め込みに
5. 全ページの主要要素を“ふわっと”立ち上げる（reveal を広げた分のスタッガー）
========================================================= */
/* --- 1. ハンバーガー切替を 1024px まで拡張（front / sub 共通） --- */
@media(max-width:1024px){
.kj-gnav{display:none !important;}
.kj-menu-btn{display:flex !important;}
}
/* --- 2. 横向き〜タブレット幅（601〜1024px）のレイアウト調整 --- */
@media(min-width:601px) and (max-width:1024px){
.kj-main{padding-left:30px !important;padding-right:30px !important;}
.kj-hero-inner{padding:40px 44px 96px 74px !important;}
body.kj-sub .kj-paper{padding-left:56px !important;padding-right:36px !important;}
/* フッター4カラムはタブレットで2カラムへ（横はみ出し解消） */
.kj-footer-grid{grid-template-columns:1.4fr 1fr !important;gap:30px 24px !important;}
/* SNS 行のメディアが窮屈にならないよう少し詰める */
.kj-sns-row{gap:28px !important;}
.kj-sns-media,.kj-sns-media--embed{width:320px !important;}
}
/* --- 3. プロフィール SNS アイコン --- */
.kj-pf-sns{display:inline-flex;align-items:center;gap:14px;}
.kj-pf-sns a{display:inline-flex;transition:transform .2s ease,opacity .2s ease;}
.kj-pf-sns a:hover{transform:translateY(-2px);opacity:.8;}
/* --- 4. YouTube / SNS の最新動画埋め込み枠（16:9・.kj-sns-media 幅を踏襲） --- */
.kj-sns-media--embed{position:relative;flex:none;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0C0B0A;box-shadow:0 6px 18px rgba(0,0,0,.12);}
.kj-sns-media--embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* --- 5. 広げた reveal のスタッガー（ヒーロー／ページ先頭を順にふわっと） --- */
html.kj-motion .kj-hero-content > .kj-reveal:nth-child(1){transition-delay:0s;}
html.kj-motion .kj-hero-content > .kj-reveal:nth-child(2){transition-delay:.07s;}
html.kj-motion .kj-hero-content > .kj-reveal:nth-child(3){transition-delay:.14s;}
html.kj-motion .kj-hero-content > .kj-reveal:nth-child(4){transition-delay:.21s;}
html.kj-motion .kj-hero-content > .kj-reveal:nth-child(5){transition-delay:.28s;}
html.kj-motion .kj-act-grid > .kj-reveal:nth-child(2){transition-delay:.08s;}
html.kj-motion .kj-act-grid > .kj-reveal:nth-child(3){transition-delay:.16s;}
/* =========================================================
▼▼▼ v3.8: 施主要望（2026-07-22）
1. ノート地のメインビジュアル（.kj-hero）を廃止 → オープニングの次は演奏動画
2. オープニング（スクラブ）内にキャッチコピー＋まんぼう＋CTA を集約
3. オープニングを画面最上部から開始（ヘッダー分の“空スクロール”を解消）
4. プロフィールの使用機材の下に X / Instagram 導線
========================================================= */
/* --- 3. 先頭のヘッダー分スライドを解消 -----------------------------------
従来: ヘッダー(78px+境界1px)が通常フローに居るためスクラブは 79px 下から始まり、
最初の 79px は「演出が始まらずページ全体が上へずれるだけ」の空スクロールだった。
変更: トップだけヘッダーを position:fixed にしてフローから外す。
→ スクラブが scrollY=0 で画面最上部に一致し、1px 目から演出が進む。
※ 下層ページは従来どおり sticky（コンテンツの上に空きが要るため）。
.kj-main の padding-top はヘッダーが浮いた分の受け皿。スクラブだけ負マージンで
それを打ち消して最上部へ出す（padding があるので負マージンが親へ抜けない＝
マージン相殺の事故も防げる）。?noscrub=1 でも下のセクションが隠れない。 */
body.kj-front .kj-site-header{position:fixed;top:0;left:0;right:0;}
body.kj-front .kj-main{padding-top:var(--kj-header-h);}
body.kj-front .kj-scrub{margin-top:calc(-1 * var(--kj-header-h));}
/* --- 1. ヒーロー廃止に伴う後続セクションの余白 ---------------------------
.kj-video / .kj-cat-grid の margin-top:-78px は「ヒーローに重ねる」ための値。
重なる相手（ヒーロー）が無くなったので、スクラブ直下は通常の余白に戻す。 */
body.kj-front .kj-video{margin-top:38px;}
/* --- 2. オープニング内の h1（旧 .kj-scrub-titlecard の文字と同じ見た目） --- */
.kj-scrub-title{
margin:0;font:inherit;letter-spacing:inherit;line-height:1.5;color:inherit;
word-break:keep-all;
}
/* --- 2. コピー側のまんぼう（タイトルが抜けたあとも居続ける） ---
v3.9: 高さも .kj-scrub-mascot と同じ流動サイズ（ひとまわり小さめ）。 */
.kj-scrub-mascot--copy{height:clamp(30px,min(6vw,7.4vh),64px);}
/* --- 2. コピー側の CTA（旧ヒーローのボタンを移設） ---
.kj-scrub-copy は pointer-events:none。表示中だけ押せるよう
js/scrub.js が copy 要素の pointer-events を auto/none で切り替え、
ボタン自身は常に auto にしておく（コピー非表示時は親が none なので押せない）。 */
.kj-scrub-cta{
display:flex;gap:clamp(8px,1.4vh,14px);align-items:center;justify-content:center;flex-wrap:wrap;
margin-top:clamp(0px,.6vh,6px);pointer-events:auto;
}
.kj-scrub-cta .kj-btn-yt,
.kj-scrub-cta .kj-btn-latest{
font-size:clamp(12px,min(2.2vw,2.3vh),15px);letter-spacing:.5px;
padding:clamp(7px,1.2vh,11px) clamp(13px,2vw,22px);
}
.kj-scrub-cta .kj-yt-chip{width:clamp(18px,3vh,24px);height:clamp(18px,3vh,24px);}
/* 暗い写真の上なので黒ボタンは輪郭を少し立てる */
.kj-scrub-cta .kj-btn-latest{border:1px solid rgba(246,241,231,.35);box-shadow:0 4px 14px rgba(0,0,0,.35);}
/* スマホ縦: CTA は縦積み（横幅が足りず折り返すため）。サイズは clamp 任せ。 */
@media(max-width:600px) and (orientation:portrait){
.kj-scrub-cta{width:100%;max-width:300px;flex-direction:column;}
.kj-scrub-cta .kj-btn-yt,
.kj-scrub-cta .kj-btn-latest{width:100%;justify-content:center;}
}
/* 旧ヒーローに重ねる用の -14px（v3.5 の @media(max-width:600px)）を打ち消す。
向きに関わらず必要なので portrait 条件は付けない。 */
@media(max-width:600px){
body.kj-front .kj-video{margin-top:22px !important;}
}
/* 画面が低いときだけ、コピー側のまんぼうは省く（タイトルのビートには居る）。
横1行ぶんの高さが浮き、コピー＋説明＋CTA が余裕で収まる。 */
@media (max-height:520px){
.kj-scrub-mascot--copy{display:none;}
}
/* --- 4. プロフィール: 使用機材の下の SNS 導線 --- */
.kj-pf-sns-foot{
display:flex;flex-direction:column;align-items:center;gap:12px;
margin-top:26px;padding:22px 20px;
background:#fff;border:1px solid var(--line2);border-radius:14px;
}
.kj-pf-sns-foot-lead{font-size:14px;font-weight:700;color:var(--text-soft);letter-spacing:.5px;}
.kj-pf-sns-foot .kj-pf-sns{gap:20px;}
.kj-pf-sns-foot .kj-pf-sns a{
width:52px;height:52px;border-radius:14px;align-items:center;justify-content:center;
background:var(--paper);border:1px solid var(--line2);
}