/* ===== 80〜90年代・シティポップの世界観トークン（2026-09-10 井埜さん「80-90s時代を意識したHPにしたい citypop感」）
   design-dna／anti-slop の決め事：色はトークン、書体は実名、動きは仕様で書く。ANALOG OFF と reduced-motion では動きだけ止める ===== */
:root{
  --sf-sun-1:#ffd07a; --sf-sun-2:#ff8a5b; --sf-sun-3:#ff5f9e; --sf-violet:#6a3df0; --sf-night:#1c1b3a; --sf-cream:#fff6d5; --sf-line:rgba(255,138,91,.55);
  --sf-display:"Arial Black","Helvetica Neue",Arial,"Hiragino Sans",sans-serif;
  --sf-mono:"Courier New",Courier,monospace;
  --sf-sunset-grad:linear-gradient(180deg,var(--sf-cream) 0%,var(--sf-sun-1) 46%,var(--sf-sun-3) 52%,var(--sf-violet) 100%);
  --sf-line-grad:linear-gradient(90deg,var(--sf-sun-2),var(--sf-sun-3) 45%,var(--sf-violet));
}
/* 1) 大見出しはテーマの白文字のまま（2026-09-10 井埜さん「これやだな」＝グラデーションのクローム題字は不採用） */
/* 2) 罫線：白の細線→夕景のグラデ線 */
.sf-rule,.sf-works-opening,.sf-works-bar,.sf-case-information dl>div,.sf-company-profile dl>div{border-image:var(--sf-line-grad) 1}
.sf-rule{height:1px;background:var(--sf-line-grad)!important;border:0}
.sf-works-bar span:last-child{font-family:var(--sf-mono);letter-spacing:.14em;color:var(--sf-sun-1)}
/* 3) 目印の小文字（eyebrow）：ネオンの桃色に */
.sf-eyebrow,.sf-head .sf-jp{color:var(--sf-sun-3)!important;letter-spacing:.16em!important}
/* 4) ボタン：ネオン枠。ホバーで夕景に点灯 */
.sf-works-contact a,.sf-contact-form .sf-form-submit input.wpcf7-submit,.sf-case-back a{position:relative;border:1px solid var(--sf-sun-2)!important;color:#fff!important;background:transparent!important;transition:box-shadow .35s,color .35s,background .35s}
.sf-works-contact a:hover,.sf-contact-form .sf-form-submit input.wpcf7-submit:hover,.sf-case-back a:hover{background:var(--sf-sun-2)!important;color:#1a1523!important;box-shadow:0 0 0 1px var(--sf-sun-3),0 0 26px rgba(255,95,158,.45)}
/* 5) トップ：テレビの下に地平線の光とグリッドの床（低負荷・静止） */
.sf-portal-pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34vh;pointer-events:none;z-index:0;
  background:radial-gradient(60% 90% at 50% 100%,rgba(255,138,91,.28),rgba(106,61,240,.14) 45%,transparent 70%),
  repeating-linear-gradient(90deg,transparent 0 calc(8.33% - 1px),rgba(255,138,91,.12) calc(8.33% - 1px) 8.33%),
  repeating-linear-gradient(180deg,transparent 0 22px,rgba(255,138,91,.14) 22px 23px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%);
  transform:perspective(600px) rotateX(58deg);transform-origin:50% 100%}
html.sf-analog-off .sf-portal-pin::after{opacity:.5}
/* 6) 記事・実績の日付と分類：モノスペースで VHS の印字風 */
.sf-card .sf-eyebrow,.sf-news-row time,.sf-work-caption p,.sf-voice-tile .sf-eyebrow,.sf-grid .ttl small{font-family:var(--sf-mono)!important;letter-spacing:.1em}
/* 7) ナビ：現在地とホバーに夕景の下線 */
.sf-header nav a{position:relative}
.sf-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--sf-line-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sf-header nav a:hover::after,.sf-header nav a[aria-current="page"]::after{transform:scaleX(1)}
/* 8) 選択色・スクロールバーも世界観に */
::selection{background:var(--sf-sun-3);color:#1a1523}
@media (prefers-reduced-motion:reduce){.sf-header nav a::after,.sf-works-contact a{transition:none}}

/* ===== 動きの演出（retro-motion.js） ===== */
/* A) ブラウン管の消灯・点灯 */
.sf-crt-veil{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:0}
.sf-crt-veil::before,.sf-crt-veil::after{content:"";position:absolute;left:0;right:0;height:50.5%;background:#000;transform:scaleY(0);will-change:transform}
.sf-crt-veil::before{top:0;transform-origin:50% 0}.sf-crt-veil::after{bottom:0;transform-origin:50% 100%}
.sf-crt-veil i{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 12px #fff;opacity:0;transform:scaleX(1);will-change:transform,opacity}
html.sf-crt-out .sf-crt-veil{opacity:1;pointer-events:auto}
html.sf-crt-out .sf-crt-veil::before,html.sf-crt-out .sf-crt-veil::after{animation:sfCrtClose .24s cubic-bezier(.55,0,.45,1) forwards}
html.sf-crt-out .sf-crt-veil i{animation:sfCrtLineOut .3s linear forwards}
html.sf-crt-in .sf-crt-veil{opacity:1}
html.sf-crt-in .sf-crt-veil::before,html.sf-crt-in .sf-crt-veil::after{animation:sfCrtOpen .36s cubic-bezier(.2,.8,.2,1) forwards}
html.sf-crt-in .sf-crt-veil i{animation:sfCrtLineIn .3s linear forwards}
@keyframes sfCrtClose{to{transform:scaleY(1)}}
@keyframes sfCrtLineOut{0%{opacity:0;transform:scaleX(1)}60%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(0)}}
@keyframes sfCrtOpen{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes sfCrtLineIn{0%{opacity:1;transform:scaleX(0)}35%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
/* B) チャンネル切替 OSD＋砂嵐2コマ */
.sf-ch-osd{position:fixed;top:22px;right:26px;z-index:9980;pointer-events:none;display:flex;gap:12px;align-items:baseline;font-family:"Courier New",Courier,monospace;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.8),0 0 1px #000;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s}
.sf-ch-osd .n{font-size:22px;font-weight:700;letter-spacing:.12em}.sf-ch-osd .t{font-size:12px;letter-spacing:.2em;opacity:.85}
.sf-ch-osd.is-on{opacity:1;transform:none}
.sf-ch-static{position:fixed;inset:0;z-index:9970;pointer-events:none;opacity:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");mix-blend-mode:screen}
.sf-ch-static.is-on{animation:sfStatic2 .12s steps(2) 1}
@keyframes sfStatic2{0%{opacity:.7}100%{opacity:0}}
/* C) VHSデッキ */
.sf-deck-osd{position:fixed;left:26px;top:22px;z-index:9980;pointer-events:none;font:700 20px "Courier New",Courier,monospace;letter-spacing:.14em;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.8);opacity:0;transition:opacity .12s}
.sf-deck-osd.is-on{opacity:.95}
/* D) ネオンの点きはじめ */
.sf-neon-on{animation:sfNeon 1.1s steps(1,end) 1}
@keyframes sfNeon{0%{box-shadow:none;opacity:.35}8%{opacity:1;box-shadow:0 0 0 1px var(--sf-sun-3),0 0 22px rgba(255,95,158,.45)}14%{opacity:.4;box-shadow:none}22%{opacity:1;box-shadow:0 0 0 1px var(--sf-sun-3),0 0 22px rgba(255,95,158,.45)}30%{opacity:.6;box-shadow:none}42%{opacity:1;box-shadow:0 0 0 1px var(--sf-sun-3),0 0 26px rgba(255,95,158,.5)}100%{opacity:1;box-shadow:none}}
html.sf-analog-off .sf-ch-osd,html.sf-analog-off .sf-ch-static,html.sf-analog-off .sf-deck-osd{display:none}
@media (max-width:700px){.sf-ch-osd{top:86px;right:14px}.sf-ch-osd .n{font-size:16px}.sf-ch-osd .t{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-deck-osd{left:14px;top:14px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.sf-crt-veil,.sf-ch-osd,.sf-ch-static,.sf-deck-osd{display:none}.sf-neon-on{animation:none}}
/* 背景に透ける80sゲームの要素（retro-bg.js） */
body.sf-wordpress{isolation:isolate}
.sf-retro-bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
html.sf-analog-off .sf-retro-bg{display:none}
/* 第2弾（retro-fx2.js）：走査線スイープ・テープカウンター・トラッキングノイズ・カードの奥行き */
.sf-scanband{position:fixed;left:0;right:0;top:-12%;height:10%;z-index:9975;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 45%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.14) 55%,rgba(255,255,255,0) 100%);mix-blend-mode:screen}
.sf-scanband.is-on{animation:sfScan .62s cubic-bezier(.3,.7,.3,1) 1}
@keyframes sfScan{0%{top:-12%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.sf-tape-osd{position:fixed;right:26px;bottom:22px;z-index:9980;pointer-events:none;display:flex;gap:10px;align-items:baseline;font:700 13px "Courier New",Courier,monospace;letter-spacing:.14em;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.85),0 0 1px #000;opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s}
.sf-tape-osd .c{font-size:18px}
.sf-tape-osd.is-on{opacity:.92;transform:none}
.sf-trackband{position:fixed;left:0;right:0;bottom:8%;height:14px;z-index:9976;pointer-events:none;opacity:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 3px,rgba(0,0,0,0) 3px 7px,rgba(120,220,255,.5) 7px 9px,rgba(0,0,0,0) 9px 16px);mix-blend-mode:screen}
.sf-trackband.is-on{animation:sfTrack .3s steps(4) 1}
@keyframes sfTrack{0%{opacity:.9;bottom:6%;transform:translateX(0)}50%{opacity:.6;bottom:22%;transform:translateX(-6px)}100%{opacity:0;bottom:40%;transform:translateX(5px)}}
.sf-works-collection .sf-work-tile figure,.sf-card-grid .sf-card .ph,.sf-editorial-card .ph{will-change:transform;transform-style:preserve-3d;backface-visibility:hidden}
html.sf-analog-off .sf-scanband,html.sf-analog-off .sf-tape-osd,html.sf-analog-off .sf-trackband{display:none}
@media (max-width:700px){.sf-tape-osd{right:14px;bottom:70px;font-size:11px}.sf-tape-osd .c{font-size:15px}}
@media (prefers-reduced-motion:reduce){.sf-scanband,.sf-tape-osd,.sf-trackband{display:none}}
@media (max-width:700px){body.sf-wordpress .sf-footer{padding-bottom:84px}}
/* 2026-09-10 撤去：CH OSD・FF/REW・テープカウンターは出さない */
.sf-ch-osd,.sf-deck-osd,.sf-tape-osd,.sf-ch-static{display:none!important}