/* ══════════════════════════════════════════════════ 2026-09-11 Journal ＝「飛行機で世界を旅する」横スクロールのアーケード画面 （井埜さん「飛行機とか世界旅してるレトロアーケードゲームにすればいいかも」） 画像・JSなし。CSSと小さなSVGだけ。 ══════════════════════════════════════════════════ */ body.sf-journal-on .sf-retro-bg,body.single-journal .sf-retro-bg, body.post-type-archive-journal .sf-retro-bg, body.tax-journal_cat .sf-retro-bg{opacity:0!important} .sf-jfly{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden} .sf-jfly i,.sf-jfly span{position:absolute;display:block} /* 空：夜明けの高度9,800ft */ .sf-jfly-sky{inset:0} .sf-jfly-sky{background:linear-gradient(180deg,#0b1236 0%,#1b2560 26%,#463a76 46%,#8a5270 60%,#c87a5c 72%,#e8a862 84%,#f6d28e 100%)} /* 星（上空だけ） */ .sf-jfly-stars{inset:0 0 62% 0; background-image: radial-gradient(1.3px 1.3px at 14% 24%,rgba(255,255,255,.8) 50%,transparent 51%), radial-gradient(1.2px 1.2px at 33% 58%,rgba(255,255,255,.6) 50%,transparent 51%), radial-gradient(1.4px 1.4px at 52% 16%,rgba(255,255,255,.75) 50%,transparent 51%), radial-gradient(1.2px 1.2px at 68% 44%,rgba(143,184,201,.7) 50%,transparent 51%), radial-gradient(1.3px 1.3px at 81% 22%,rgba(255,255,255,.7) 50%,transparent 51%), radial-gradient(1.2px 1.2px at 92% 52%,rgba(255,255,255,.55) 50%,transparent 51%); animation:sfJflyTwinkle 6s ease-in-out infinite} @keyframes sfJflyTwinkle{0%,100%{opacity:.5}50%{opacity:.95}} /* 雲：ドットの塊が右から左へ */ .sf-jfly-clouds{left:0;right:0;top:18%;height:34%;opacity:.5; background-image: radial-gradient(28px 9px at 10% 30%,rgba(255,255,255,.55) 50%,transparent 51%), radial-gradient(40px 11px at 34% 62%,rgba(255,255,255,.42) 50%,transparent 51%), radial-gradient(24px 8px at 58% 24%,rgba(255,255,255,.5) 50%,transparent 51%), radial-gradient(46px 12px at 78% 70%,rgba(255,255,255,.38) 50%,transparent 51%), radial-gradient(30px 9px at 95% 40%,rgba(255,255,255,.45) 50%,transparent 51%); background-size:200% 100%;animation:sfJflyDrift 42s linear infinite} @keyframes sfJflyDrift{from{background-position:0 0}to{background-position:-200% 0}} /* 遠景：世界の山と遺跡（富士山・ピラミッド・万里の長城）*/ .sf-jfly-far{left:0;right:0;bottom:18%;height:20%;opacity:.8; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221100%22%20height%3D%22170%22%20viewBox%3D%220%200%201100%20170%22%3E%3Cpath%20fill%3D%22%233b3157%22%20d%3D%22M0%20170%20L80%2054%20L164%20170%20Z%22%2F%3E%3Cpath%20fill%3D%22%23eef1f6%22%20d%3D%22M62%2084%20L80%2054%20L98%2084%20L88%2088%20L80%2078%20L71%2090%20Z%22%2F%3E%3Cpath%20fill%3D%22%23463a63%22%20d%3D%22M210%20170%20L282%2078%20L354%20170%20Z%22%2F%3E%3Cpath%20fill%3D%22%23a8895f%22%20d%3D%22M420%20170%20L482%2066%20L544%20170%20Z%22%2F%3E%3Cpath%20fill%3D%22%2398794f%22%20d%3D%22M530%20170%20L572%2096%20L614%20170%20Z%22%2F%3E%3Cpath%20fill%3D%22%23a8895f%22%20d%3D%22M604%20170%20L634%20120%20L664%20170%20Z%22%2F%3E%3Cpath%20fill%3D%22%233b3157%22%20d%3D%22M720%20170%20L748%20118%20L790%20130%20L824%2096%20L866%20112%20L902%2086%20L940%20110%20L976%20170%20Z%22%2F%3E%3Cg%20fill%3D%22%23332a4d%22%3E%3Crect%20x%3D%22818%22%20y%3D%22106%22%20width%3D%2214%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22896%22%20y%3D%2296%22%20width%3D%2214%22%20height%3D%2224%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23463a63%22%20d%3D%22M1000%20170%20L1050%2092%20L1100%20170%20Z%22%2F%3E%3Cpath%20fill%3D%22%23eef1f6%22%20opacity%3D%22.8%22%20d%3D%22M1036%20112%20L1050%2092%20L1064%20112%20L1056%20115%20L1050%20106%20L1043%20116%20Z%22%2F%3E%3C%2Fsvg%3E");background-repeat:repeat-x;background-position:0 bottom;background-size:auto 100%; animation:sfJflyPanFar 60s linear infinite} @keyframes sfJflyPanFar{from{background-position-x:0}to{background-position-x:-1100px}} /* 近景：世界の名所（鳥居・五重塔・東京タワー・スカイツリー・大阪城・エッフェル塔・自由の女神・ビッグベン・ピサの斜塔・オペラハウス・モアイ・タージマハル）*/ .sf-jfly-near{left:0;right:0;bottom:5%;height:25%; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221400%22%20height%3D%22200%22%20viewBox%3D%220%200%201400%20200%22%3E%3Crect%20x%3D%220%22%20y%3D%22176%22%20width%3D%221400%22%20height%3D%2224%22%20fill%3D%22%23231a3a%22%2F%3E%3Cg%20fill%3D%22%23c2483a%22%3E%3Crect%20x%3D%2224%22%20y%3D%2292%22%20width%3D%22104%22%20height%3D%2211%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%22108%22%20width%3D%22120%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22103%22%20width%3D%2213%22%20height%3D%2273%22%2F%3E%3Crect%20x%3D%22101%22%20y%3D%22103%22%20width%3D%2213%22%20height%3D%2273%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237a4a3c%22%3E%3Crect%20x%3D%22196%22%20y%3D%2266%22%20width%3D%226%22%20height%3D%2220%22%2F%3E%3Crect%20x%3D%22168%22%20y%3D%2286%22%20width%3D%2262%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%22182%22%20y%3D%2295%22%20width%3D%2234%22%20height%3D%2214%22%2F%3E%3Crect%20x%3D%22163%22%20y%3D%22109%22%20width%3D%2272%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%22179%22%20y%3D%22118%22%20width%3D%2240%22%20height%3D%2215%22%2F%3E%3Crect%20x%3D%22158%22%20y%3D%22133%22%20width%3D%2282%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%22176%22%20y%3D%22142%22%20width%3D%2246%22%20height%3D%2216%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22158%22%20width%3D%2294%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%22174%22%20y%3D%22167%22%20width%3D%2250%22%20height%3D%229%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23c2483a%22%3E%3Crect%20x%3D%22182%22%20y%3D%2297%22%20width%3D%2234%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%22179%22%20y%3D%22120%22%20width%3D%2240%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%22176%22%20y%3D%22144%22%20width%3D%2246%22%20height%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23d05a42%22%3E%3Crect%20x%3D%22330%22%20y%3D%2234%22%20width%3D%227%22%20height%3D%2224%22%2F%3E%3Cpath%20d%3D%22M296%20176%20L326%2058%20L341%2058%20L371%20176%20L353%20176%20L335%2078%20L318%20176%20Z%22%2F%3E%3Crect%20x%3D%22306%22%20y%3D%22120%22%20width%3D%2255%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22316%22%20y%3D%2288%22%20width%3D%2235%22%20height%3D%229%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23e8e2d6%22%3E%3Crect%20x%3D%22311%22%20y%3D%22130%22%20width%3D%2245%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23b6c3cf%22%3E%3Crect%20x%3D%22452%22%20y%3D%2214%22%20width%3D%225%22%20height%3D%2228%22%2F%3E%3Cpath%20d%3D%22M436%20176%20L448%2060%20L466%2060%20L478%20176%20L464%20176%20L457%2070%20L450%20176%20Z%22%2F%3E%3Crect%20x%3D%22440%22%20y%3D%2296%22%20width%3D%2234%22%20height%3D%2211%22%2F%3E%3Crect%20x%3D%22444%22%20y%3D%2252%22%20width%3D%2226%22%20height%3D%2211%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23e6e0d4%22%3E%3Crect%20x%3D%22552%22%20y%3D%22146%22%20width%3D%2292%22%20height%3D%2230%22%2F%3E%3Crect%20x%3D%22562%22%20y%3D%22122%22%20width%3D%2272%22%20height%3D%2224%22%2F%3E%3Crect%20x%3D%22572%22%20y%3D%22100%22%20width%3D%2252%22%20height%3D%2222%22%2F%3E%3Crect%20x%3D%22582%22%20y%3D%2282%22%20width%3D%2232%22%20height%3D%2218%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%234f7a63%22%3E%3Crect%20x%3D%22546%22%20y%3D%22140%22%20width%3D%22104%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%22556%22%20y%3D%22116%22%20width%3D%2284%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%22566%22%20y%3D%2294%22%20width%3D%2264%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%22576%22%20y%3D%2276%22%20width%3D%2244%22%20height%3D%228%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23d8b45a%22%3E%3Crect%20x%3D%22594%22%20y%3D%2266%22%20width%3D%228%22%20height%3D%2212%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237c8290%22%3E%3Crect%20x%3D%22748%22%20y%3D%2222%22%20width%3D%226%22%20height%3D%2222%22%2F%3E%3Cpath%20d%3D%22M710%20176%20L740%2058%20L762%2058%20L792%20176%20L772%20176%20L754%2092%20L748%2092%20L730%20176%20Z%22%2F%3E%3Crect%20x%3D%22720%22%20y%3D%22120%22%20width%3D%2262%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22732%22%20y%3D%2284%22%20width%3D%2238%22%20height%3D%229%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%236fae9a%22%3E%3Crect%20x%3D%22866%22%20y%3D%22144%22%20width%3D%2252%22%20height%3D%2232%22%2F%3E%3Crect%20x%3D%22876%22%20y%3D%22126%22%20width%3D%2232%22%20height%3D%2218%22%2F%3E%3Crect%20x%3D%22886%22%20y%3D%2286%22%20width%3D%2213%22%20height%3D%2240%22%2F%3E%3Crect%20x%3D%22882%22%20y%3D%2272%22%20width%3D%2221%22%20height%3D%2214%22%2F%3E%3Crect%20x%3D%22901%22%20y%3D%2252%22%20width%3D%227%22%20height%3D%2222%22%2F%3E%3Crect%20x%3D%22895%22%20y%3D%2244%22%20width%3D%2219%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%22872%22%20y%3D%2294%22%20width%3D%2214%22%20height%3D%227%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23f2c94c%22%3E%3Crect%20x%3D%22902%22%20y%3D%2246%22%20width%3D%225%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23b39a72%22%3E%3Crect%20x%3D%22982%22%20y%3D%2270%22%20width%3D%2232%22%20height%3D%22106%22%2F%3E%3Crect%20x%3D%22974%22%20y%3D%2258%22%20width%3D%2248%22%20height%3D%2213%22%2F%3E%3Crect%20x%3D%22990%22%20y%3D%2242%22%20width%3D%2216%22%20height%3D%2216%22%2F%3E%3Crect%20x%3D%22996%22%20y%3D%2228%22%20width%3D%226%22%20height%3D%2214%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23f4e9cf%22%3E%3Ccircle%20cx%3D%22998%22%20cy%3D%2284%22%20r%3D%2210%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23231a3a%22%3E%3Crect%20x%3D%22997%22%20y%3D%2278%22%20width%3D%222%22%20height%3D%227%22%2F%3E%3Crect%20x%3D%22998%22%20y%3D%2283%22%20width%3D%226%22%20height%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ddd2ba%22%20transform%3D%22rotate%28-8%201100%20176%29%22%3E%3Crect%20x%3D%221082%22%20y%3D%2276%22%20width%3D%2236%22%20height%3D%22100%22%2F%3E%3Crect%20x%3D%221076%22%20y%3D%2268%22%20width%3D%2248%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%221078%22%20y%3D%22100%22%20width%3D%2244%22%20height%3D%227%22%2F%3E%3Crect%20x%3D%221078%22%20y%3D%22128%22%20width%3D%2244%22%20height%3D%227%22%2F%3E%3Crect%20x%3D%221078%22%20y%3D%22154%22%20width%3D%2244%22%20height%3D%227%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23e8e4da%22%3E%3Cpath%20d%3D%22M1160%20176%20Q1176%20106%201214%20176%20Z%22%2F%3E%3Cpath%20d%3D%22M1198%20176%20Q1216%2092%201256%20176%20Z%22%2F%3E%3Cpath%20d%3D%22M1240%20176%20Q1256%20118%201286%20176%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%238a8177%22%3E%3Cpath%20d%3D%22M1312%20176%20L1312%20122%20Q1312%20100%201332%20100%20Q1352%20100%201352%20122%20L1352%20176%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%235c554d%22%3E%3Crect%20x%3D%221319%22%20y%3D%22126%22%20width%3D%227%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%221338%22%20y%3D%22126%22%20width%3D%227%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%221325%22%20y%3D%22146%22%20width%3D%2214%22%20height%3D%225%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23efe9dd%22%3E%3Crect%20x%3D%221362%22%20y%3D%22140%22%20width%3D%2238%22%20height%3D%2236%22%2F%3E%3Cpath%20d%3D%22M1368%20140%20Q1381%20106%201394%20140%20Z%22%2F%3E%3Crect%20x%3D%221379%22%20y%3D%2296%22%20width%3D%225%22%20height%3D%2211%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:repeat-x;background-position:0 bottom;background-size:auto 100%; animation:sfJflyPanNear 34s linear infinite} @keyframes sfJflyPanNear{from{background-position-x:0}to{background-position-x:-1400px}} /* 海：波 */ .sf-jfly-sea{left:0;right:0;bottom:0;height:8%; background:linear-gradient(180deg,#10203c 0%,#0a1730 100%); box-shadow:inset 0 1px 0 rgba(143,184,201,.45)} .sf-jfly-sea::after{content:"";position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2220%22%20viewBox%3D%220%200%20160%2020%22%3E%3Cg%20fill%3D%22%238fb8c9%22%20opacity%3D%22.32%22%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%2244%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%2284%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%22112%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%22136%22%20y%3D%228%22%20width%3D%2214%22%20height%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:repeat; animation:sfJflyPanSea 12s linear infinite} @keyframes sfJflyPanSea{from{background-position-x:0}to{background-position-x:-160px}} /* 飛行機：左から右へ、ゆっくり上下に揺れる */ .sf-jfly-plane{top:8%;left:-12%;width:148px;height:86px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); animation:sfJflyCross 30s linear infinite,sfJflyBob 4.5s ease-in-out infinite} .sf-jfly-plane svg{width:100%;height:100%;display:block} @keyframes sfJflyCross{from{left:-12%}to{left:112%}} @keyframes sfJflyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* HUD：高度と距離 */ .sf-jfly-hud{top:14px;left:0;right:0;text-align:center; font:700 8px/1 "Press Start 2P","Courier New",monospace;letter-spacing:.14em;color:rgba(242,237,226,.42)} .sf-jfly-hud b{color:rgba(242,165,121,.6);font-weight:700;margin:0 8px 0 22px} .sf-jfly-hud b:first-child{margin-left:0} .sf-jfly-foot{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,transparent,rgba(10,8,24,.42) 45%,rgba(10,8,24,.78));pointer-events:none} .sf-jfly-scan{inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.16) 1px 3px);opacity:.6} @media(prefers-reduced-motion:reduce){.sf-jfly-plane,.sf-jfly-clouds,.sf-jfly-far,.sf-jfly-near,.sf-jfly-sea::after,.sf-jfly-stars{animation:none!important}.sf-jfly-plane{left:14%}} html.sf-analog-off .sf-jfly,body.sf-analog-off .sf-jfly{display:none} @media(max-width:700px){ .sf-jfly-plane{width:88px;height:52px;top:7%} .sf-jfly-hud{font-size:6.5px;letter-spacing:.08em;top:10px} .sf-jfly-hud b{margin:0 5px 0 12px} .sf-jfly-clouds{top:16%;height:30%} } /* ── 2026-09-11 井埜さん「ジャーナルのとこにはUFOとか出てきても面白いけど」 「UFOはもっと早く出てきていいよ。UFOっぽい動きして」 すーっと来て、ピタッと止まり、直角に瞬間移動して、最後は一瞬で飛び去る ── */ .sf-jfly-ufo{position:absolute;display:block;width:86px;height:48px;right:-14%;top:14%; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%2240%22%20viewBox%3D%220%200%2072%2040%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%237ee0c8%22%3E%3Crect%20x%3D%2226%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%228%22%20width%3D%2228%22%20height%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23c9f6ec%22%20opacity%3D%22.7%22%3E%3Crect%20x%3D%2228%22%20y%3D%225%22%20width%3D%226%22%20height%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23c6ccd8%22%3E%3Crect%20x%3D%2210%22%20y%3D%2212%22%20width%3D%2252%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2217%22%20width%3D%2268%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2223%22%20width%3D%2252%22%20height%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%238f97a8%22%3E%3Crect%20x%3D%222%22%20y%3D%2221%22%20width%3D%2268%22%20height%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20x%3D%2212%22%20y%3D%2227%22%20width%3D%227%22%20height%3D%224%22%20fill%3D%22%23f2c94c%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%2227%22%20width%3D%227%22%20height%3D%224%22%20fill%3D%22%23e8574a%22%2F%3E%3Crect%20x%3D%2252%22%20y%3D%2227%22%20width%3D%227%22%20height%3D%224%22%20fill%3D%22%234a7fd8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-size:contain; filter:drop-shadow(0 0 16px rgba(126,224,200,.5)); animation:sfUfoMove 26s infinite 3s,sfUfoHover 1.1s ease-in-out infinite} @keyframes sfUfoMove{ 0% {right:-14%;top:14%;opacity:0;animation-timing-function:cubic-bezier(.1,.8,.2,1)} 2% {opacity:1} 10% {right:16%;top:14%;animation-timing-function:steps(1,end)} /* 急停止してホバリング */ 17% {right:16%;top:14%;animation-timing-function:cubic-bezier(.9,0,.1,1)} 19% {right:16%;top:6%;animation-timing-function:steps(1,end)} /* 直角に上へ瞬間移動 */ 25% {right:16%;top:6%;animation-timing-function:cubic-bezier(.9,0,.1,1)} 27% {right:44%;top:6%;animation-timing-function:steps(1,end)} /* 横へ一瞬で */ 33% {right:44%;top:6%;animation-timing-function:cubic-bezier(.9,0,.1,1)} 35% {right:44%;top:21%;animation-timing-function:steps(1,end)} /* 真下へ */ 56% {right:44%;top:21%;animation-timing-function:cubic-bezier(.9,0,.1,1)} /* ここで光線＋宇宙人 */ 58% {right:70%;top:10%;animation-timing-function:steps(1,end)} 65% {right:70%;top:10%;animation-timing-function:cubic-bezier(.9,0,.2,1)} 68% {right:70%;top:24%;animation-timing-function:steps(1,end)} 75% {right:70%;top:24%;animation-timing-function:cubic-bezier(.85,0,.1,1)} 78% {right:96%;top:5%;opacity:1;animation-timing-function:cubic-bezier(.7,0,.1,1)} 81% {right:126%;top:1%;opacity:1} /* 一瞬で飛び去る */ 82%,100%{right:126%;top:1%;opacity:0}} /* 小刻みなホバリング */ @keyframes sfUfoHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} /* 光線（真下へ降りて止まっている間に落ちる） */ .sf-jfly-beam{position:absolute;display:block;width:130px;height:calc(71vh - 44px);right:-14%;top:14%; margin-top:44px;margin-right:-22px; background:linear-gradient(180deg,rgba(126,224,200,.5),rgba(126,224,200,.16) 55%,transparent); clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);opacity:0;transform-origin:50% 0; animation:sfUfoMove 26s infinite 3s,sfUfoBeam 26s infinite 3s} @keyframes sfUfoBeam{ 0%,36%{opacity:0;transform:scaleY(.2)} 38%{opacity:1;transform:scaleY(1)} 54%{opacity:1;transform:scaleY(1)} 56%{opacity:0;transform:scaleY(.3)} 100%{opacity:0;transform:scaleY(.2)}} @media(prefers-reduced-motion:reduce){.sf-jfly-ufo,.sf-jfly-beam{animation:none!important}.sf-jfly-ufo{right:30%;top:12%;opacity:1}.sf-jfly-beam{opacity:0}} @media(max-width:700px){ .sf-jfly-ufo{width:56px;height:31px} .sf-jfly-beam{width:86px;height:calc(71vh - 30px);margin-top:30px;margin-right:-15px} } /* ── 2026-09-11 井埜さん「したから宇宙人出てきてもいいかも　たまに」 画面の下からひょっこり顔を出して、手を振ってから引っ込む。88秒に1回 ── */ .sf-jfly-alien{position:absolute;display:block;width:56px;height:72px;left:14%;bottom:0; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2252%22%20viewBox%3D%220%200%2040%2052%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%236fcf97%22%3E%3Crect%20x%3D%2211%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23f2c94c%22%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%225%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2225%22%20y%3D%220%22%20width%3D%225%22%20height%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237ee08f%22%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%2224%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2230%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2222%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2228%22%20width%3D%2216%22%20height%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230f1620%22%3E%3Crect%20x%3D%229%22%20y%3D%2213%22%20width%3D%229%22%20height%3D%227%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2213%22%20width%3D%229%22%20height%3D%227%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%22.85%22%3E%3Crect%20x%3D%2211%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%233f8f5a%22%3E%3Crect%20x%3D%2217%22%20y%3D%2224%22%20width%3D%226%22%20height%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%236fcf97%22%3E%3Crect%20x%3D%2213%22%20y%3D%2232%22%20width%3D%2214%22%20height%3D%2214%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%234aa876%22%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%228%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237ee08f%22%3E%3Crect%20x%3D%226%22%20y%3D%2230%22%20width%3D%227%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2226%22%20width%3D%224%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237ee08f%22%3E%3Crect%20x%3D%2227%22%20y%3D%2234%22%20width%3D%227%22%20height%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-size:contain; transform:translateY(110%);opacity:0; filter:drop-shadow(0 -2px 8px rgba(126,224,143,.45)); animation:sfAlienPeek 88s ease-in-out infinite 26s,sfAlienWave 0.9s steps(2,end) infinite} @keyframes sfAlienPeek{ 0%,4%{transform:translateY(110%);opacity:0} 6%{transform:translateY(4%);opacity:1} 8%{transform:translateY(14%);opacity:1} 10%{transform:translateY(0);opacity:1} 15%{transform:translateY(0);opacity:1} 17%{transform:translateY(16%);opacity:1} 20%{transform:translateY(110%);opacity:0} 100%{transform:translateY(110%);opacity:0}} /* 手を振る（左右にわずかに傾く） */ @keyframes sfAlienWave{0%{rotate:0deg}100%{rotate:-4deg}} /* 2体目：反対側から、別の周期で */ .sf-jfly-alien2{position:absolute;display:block;width:44px;height:57px;right:22%;bottom:0;left:auto; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2252%22%20viewBox%3D%220%200%2040%2052%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%236fcf97%22%3E%3Crect%20x%3D%2211%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23f2c94c%22%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%225%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2225%22%20y%3D%220%22%20width%3D%225%22%20height%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237ee08f%22%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%2224%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2230%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2222%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2228%22%20width%3D%2216%22%20height%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230f1620%22%3E%3Crect%20x%3D%229%22%20y%3D%2213%22%20width%3D%229%22%20height%3D%227%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2213%22%20width%3D%229%22%20height%3D%227%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%22.85%22%3E%3Crect%20x%3D%2211%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%233f8f5a%22%3E%3Crect%20x%3D%2217%22%20y%3D%2224%22%20width%3D%226%22%20height%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%236fcf97%22%3E%3Crect%20x%3D%2213%22%20y%3D%2232%22%20width%3D%2214%22%20height%3D%2214%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%234aa876%22%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%228%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237ee08f%22%3E%3Crect%20x%3D%226%22%20y%3D%2230%22%20width%3D%227%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2226%22%20width%3D%224%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237ee08f%22%3E%3Crect%20x%3D%2227%22%20y%3D%2234%22%20width%3D%227%22%20height%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-size:contain; transform:translateY(110%);opacity:0; filter:drop-shadow(0 -2px 8px rgba(126,224,143,.4)); animation:sfAlienPeek2 112s ease-in-out infinite 64s} @keyframes sfAlienPeek2{ 0%,5%{transform:translateY(110%);opacity:0} 7%{transform:translateY(10%);opacity:1} 12%{transform:translateY(2%);opacity:1} 14%{transform:translateY(110%);opacity:0} 100%{transform:translateY(110%);opacity:0}} @media(prefers-reduced-motion:reduce){.sf-jfly-alien,.sf-jfly-alien2{animation:none!important;opacity:0!important}} @media(max-width:700px){ .sf-jfly-alien{width:38px;height:49px;left:8%} .sf-jfly-alien2{width:30px;height:39px;right:14%} } /* ── 2026-09-11 井埜さん「UFOから宇宙人出てきても面白いけど」 UFO がホバリングして光線を落とす間に、宇宙人が光線の中をゆっくり降りてくる。 着地したあと少しあたりを見回して、光線とともに消える。UFOと同じ26秒の周期に合わせる ── */ .sf-jfly-drop{position:absolute;display:block;width:40px;height:52px;right:44%;top:21%; margin-top:44px;margin-right:23px;--sf-drop:calc(71vh - 96px); background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2252%22%20viewBox%3D%220%200%2040%2052%22%20shape-rendering%3D%22crispEdges%22%3E%3Cg%20fill%3D%22%236fcf97%22%3E%3Crect%20x%3D%2211%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%220%22%20width%3D%223%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23f2c94c%22%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%225%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2225%22%20y%3D%220%22%20width%3D%225%22%20height%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237ee08f%22%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%2224%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2230%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2222%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2228%22%20width%3D%2216%22%20height%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230f1620%22%3E%3Crect%20x%3D%229%22%20y%3D%2213%22%20width%3D%229%22%20height%3D%227%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2213%22%20width%3D%229%22%20height%3D%227%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%22.85%22%3E%3Crect%20x%3D%2211%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%233f8f5a%22%3E%3Crect%20x%3D%2217%22%20y%3D%2225%22%20width%3D%226%22%20height%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%236fcf97%22%3E%3Crect%20x%3D%2213%22%20y%3D%2232%22%20width%3D%2214%22%20height%3D%2213%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%234aa876%22%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%228%22%20height%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237ee08f%22%3E%3Crect%20x%3D%228%22%20y%3D%2234%22%20width%3D%225%22%20height%3D%224%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2234%22%20width%3D%225%22%20height%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237ee08f%22%3E%3Crect%20x%3D%2214%22%20y%3D%2245%22%20width%3D%224%22%20height%3D%225%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2245%22%20width%3D%224%22%20height%3D%225%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-size:contain; filter:drop-shadow(0 0 10px rgba(126,224,200,.7));opacity:0; animation:sfAlienDrop 26s infinite 3s} @keyframes sfAlienDrop{ 0%,37%{opacity:0;transform:translateY(0) scale(.4)} 38.5%{opacity:1;transform:translateY(0) scale(.55)} /* UFOの底から出る */ 46%{opacity:1;transform:translateY(var(--sf-drop)) scale(1)} /* 地面に降り立つ */ 52%{opacity:1;transform:translateY(var(--sf-drop)) scale(1)} /* あたりを見回す */ 55%{opacity:1;transform:translateY(0) scale(.55)} /* 光線で吸い上げられて戻る */ 56%,100%{opacity:0;transform:translateY(0) scale(.4)}} @media(prefers-reduced-motion:reduce){.sf-jfly-drop{animation:none!important;opacity:0!important}} @media(max-width:700px){.sf-jfly-drop{width:28px;height:36px;margin-top:30px;margin-right:14px;--sf-drop:calc(71vh - 66px)}}