/* ==========================================================================
雄喜晃株式会社 — Craft Layer（作り込み）v1 2026-09-04
--------------------------------------------------------------------------
01 重なるセクション（MVV）／ 02 横に流れる実績（LP・PCのみ）
03 画面全体の粒子 ／ 04 カーソルの光と「見る」（PCのみ）
05 見出しの太さがスクロールで呼吸する
★ style.css / motion.css / stage.css は触らない。読み込みは必ず最後。
★ 動き低減設定のときは全部止める（末尾にまとめてある）。
========================================================================== */
/* ---------- 03 粒子（フィルムグレイン） --------------------------------------
★ overlay で合成しているので、白い面にも紺の面にも同じだけ粒が乗る。
★ アニメーションはさせない。動かすと常時再描画になって端末が熱くなるうえ、
静止しているほうが「紙の質感」に近く上品。
★ 濃度はここの opacity だけで調整できる。上げすぎるとただの汚れになる。 */
.cf-grain{position:fixed;inset:0;z-index:9997;pointer-events:none;
opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:160px 160px}
@media(max-width:860px){ .cf-grain{opacity:.05} }
/* ---------- 04 カーソルの光（PCのみ・motion.css の .mo-cursor を拡張） -------
★ mix-blend-mode:screen なので、白いセクションでは何も起きず、
紺やダークなセクションの上でだけ光が差す。半透明の板を重ねるのとは違う。 */
.cf-spot{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
mix-blend-mode:screen;transition:opacity .6s ease;
background:radial-gradient(360px 360px at var(--sx,50%) var(--sy,50%),
rgba(224,133,81,.20) 0%,rgba(224,133,81,.06) 36%,transparent 70%)}
.cf-spot.is-on{opacity:1}
.cf-cur-label{position:absolute;left:-48px;top:-48px;width:96px;height:96px;
display:flex;align-items:center;justify-content:center;
font-size:.7rem;font-weight:700;letter-spacing:.1em;color:#fff;
opacity:0;transition:opacity .2s ease;pointer-events:none}
.mo-cursor.cf-view::before{transform:scale(2.5);background:rgba(217,120,67,.94);
border-color:transparent}
.mo-cursor.cf-view .cf-cur-label{opacity:1}
/* ---------- 05 見出しの太さが呼吸する ---------------------------------------
★ Noto Serif JP を可変フォント（wght 200..900）で読み込んでいることが前提。
静的ウェイトのままだと、ここは何も起きないだけで壊れはしない。 */
.cf-wght{font-variation-settings:'wght' var(--cf-w,600)}
/* ---------- 01 重なるセクション（MVV） --------------------------------------
★ グリッドをやめて縦積みにし、1枚ずつ sticky で貼り付ける。
縮み具合は craft.js が inline の transform で入れる（hover と喧嘩しない）。 */
.mvv-grid.cf-stack{display:block;margin-top:44px}
/* ★下の余白がそのまま「1枚が貼り付いていられる距離」になる。
26px だと一瞬で次が重なって積まれる感じが出ず、200px だと
貼り付く前の空白が目立つ。60px＋top を1枚ずつずらすのが釣り合う。
top のずらしは craft.js が inline で入れる。 */
.mvv-grid.cf-stack .mvv-card{position:sticky;top:112px;
max-width:820px;margin:0 auto 100px;
transform-origin:50% 0;background:#fff;
border-top:3px solid var(--color-accent,#d97843);
box-shadow:0 16px 44px rgba(10,37,64,.10);
opacity:1;transition:box-shadow .3s ease}
.mvv-grid.cf-stack .mvv-card:last-child{margin-bottom:0}
.mvv-grid.cf-stack .mvv-card:hover{box-shadow:0 20px 54px rgba(10,37,64,.15)}
@media(max-width:900px){
.mvv-grid.cf-stack .mvv-card{margin:0 auto 72px}
}
/* ---------- 02 横に流れる実績（/web-design・PCのみ） -------------------------
★ スマホは今までどおり指で横スワイプ。ここは 861px 以上でだけ効かせる。
★ 高さ（--cf-h）はカードの総幅から craft.js が計算して入れる。
決め打ちにすると実績が増えたときに途中で止まる。 */
@media(min-width:861px){
/* ★ .section.pf には overflow:hidden が入っていて、それがあると中の
position:sticky が「セクションの中で」貼り付く扱いになり、まったく効かない。
カードのはみ出しは .pf-marquee 側の overflow:hidden が切るので、
横流しにしている間だけ visible に戻す（クラスは craft.js が付ける）。
2026-09-04 実測：これが無いとカードが画面上へ流れて巨大な空白になる。 */
.section.cf-ovv{overflow:visible}
.pf-scroll.cf-h{position:relative;height:var(--cf-h,200vh)}
.pf-scroll.cf-h .pf-stick{position:sticky;top:92px;height:calc(100vh - 92px);
min-height:420px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.pf-scroll.cf-h .pf-marquee{width:100%}
.pf-scroll.cf-h .sec-head{margin-bottom:0}
/* PCでは横に流れるので「タップで詳細」の案内は下のバーに任せる */
.pf-scroll.cf-h ~ .container .pf-hint{display:none}
.pf-scroll.cf-h .pf-track{animation:none;will-change:transform}
.cf-hbar{width:min(420px,60%);height:2px;margin:0 auto;border-radius:2px;
background:rgba(10,37,64,.12);overflow:hidden}
.cf-hbar i{display:block;height:100%;width:10%;border-radius:2px;
background:var(--color-accent,#d97843);transition:width .12s linear}
.pf-scroll.cf-h ~ .container .pf-hint{opacity:.85}
}
@media(prefers-reduced-motion:reduce){
.cf-grain,.cf-spot{display:none}
.cf-wght{font-variation-settings:normal}
.mvv-grid.cf-stack{display:grid}
.mvv-grid.cf-stack .mvv-card{position:static;transform:none!important;opacity:1!important}
.pf-scroll.cf-h{height:auto}
.pf-scroll.cf-h .pf-stick{position:static;height:auto}
}
/* ---------- A 巨大CTAがマウスに反応（PCのみ） --------------------------------
★1文字ずつ span に割って、カーソルに近い文字だけ持ち上げ、太くする。
文字を割るので、既存の
と空白はそのまま残すこと。 */
.cf-ch{display:inline-block;will-change:transform;
transition:transform .45s cubic-bezier(.22,1,.36,1),font-variation-settings .45s ease}
/* ---------- B 右端の章立てインジケーター（PCのみ・幅1024px以上） -------------
★点は白いセクションでも紺のセクションでも見えるように、
常に薄い白の縁を持たせる。背景色ごとの出し分けはしない（判定が壊れやすい）。 */
.cf-chap{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:60;
display:none;flex-direction:column;gap:15px;align-items:flex-end;pointer-events:auto}
@media(min-width:1024px){ .cf-chap.is-ready{display:flex} }
.cf-chap a{display:flex;align-items:center;gap:10px;text-decoration:none;
font-size:.72rem;letter-spacing:.06em;color:var(--color-primary,#0a2540)}
.cf-chap i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;
background:rgba(120,138,158,.55);box-shadow:0 0 0 1.5px rgba(255,255,255,.55);
transition:background .3s ease,transform .3s ease}
.cf-chap span{opacity:0;transform:translateX(8px);white-space:nowrap;
background:rgba(255,255,255,.94);border:1px solid rgba(10,37,64,.08);
border-radius:50px;padding:4px 12px;box-shadow:0 6px 18px rgba(10,37,64,.12);
transition:opacity .28s ease,transform .28s ease}
.cf-chap a:hover i{background:var(--color-accent,#d97843)}
.cf-chap a:hover span,.cf-chap a:focus-visible span{opacity:1;transform:none}
.cf-chap a.is-on i{background:var(--color-accent,#d97843);transform:scale(1.55)}
.cf-chap a.is-on span{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.cf-ch{transition:none}
.cf-chap{display:none!important}
}