PageSourceSearch

https://duqcyofficial.netlify.app/

html duqcyofficial.netlify.app collected 2026-10-03 10:40:09 UTC 66,531 bytes, 1,313 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=0f85f177-57a0-47e7-937b-059592b89795
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>Duqcy - Official Website</title>
10    <link rel="preconnect" href="https://fonts.googleapis.com">
11    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=Noto+Sans+JP:wght@300;400;700;900&display=swap" rel="stylesheet">
13    <style>
14        :root {
15            --acid: #D0EB16;
16            --acid-dim: rgba(208,235,22,0.15);
17            --acid-mid: rgba(208,235,22,0.5);
18            --bg: #080808;
19            --bg2: #0f0f0f;
20            --text-muted: rgba(208,235,22,0.55);
21        }
22
23        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
24
25        html { scroll-behavior: smooth; }
26
27        body {
28            background: var(--bg);
29            color: var(--acid);
30            font-family: 'Noto Sans JP', sans-serif;
31            overflow-x: hidden;
32        }
33
34        /* ── GRAIN OVERLAY ── */
35        body::before {
36            content: '';
37            position: fixed;
38            inset: 0;
39            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
40            pointer-events: none;
41            z-index: 9998;
42            opacity: 0.35;
43        }
44
45        /* ── LOADER ── */
46        #loader {
47            position: fixed;
48            inset: 0;
49            background: #000;
50            z-index: 9999;
51            display: flex;
52            align-items: center;
53            justify-content: center;
54            flex-direction: column;
55            overflow: hidden;
56            transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.86,0,0.07,1);
57        }
58        #loader.loaded { transform: translateY(-100%); }
59        #loader.loaded .loader-inner { opacity: 0; transition: opacity 0.3s; }
60
61        .loader-logo-img { width: 220px; animation: neonFlicker 3s infinite; }
62
63        /* full-bleed background video */
64        .loader-video-bg {
65            position: absolute;
66            inset: 0;
67            width: 100%;
68            height: 100%;
69            overflow: hidden;
70        }
71        .loader-video-bg video {
72            position: absolute;
73            top: 50%; left: 50%;
74            width: 100%;
75            height: 100%;
76            object-fit: cover;
77            transform: translate(-50%, -50%) scale(1.02);
78            filter: saturate(1.15) contrast(1.05);
79            animation: loaderVideoIn 1.8s cubic-bezier(0.16,1,0.3,1) both;
80        }
81        /* darkening + color-wash gradients so UI stays legible */
82        .loader-video-bg::before {
83            content: '';
84            position: absolute;
85            inset: 0;
86            background:
87                radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0.92) 100%),
88                linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 22%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.85) 100%);
89            z-index: 1;
90        }
91        /* moving CRT scanlines over the video for texture */
92        .loader-video-bg::after {
93            content: '';
94            position: absolute;
95            inset: 0;
96            background: repeating-linear-gradient(
97                to bottom,
98                rgba(0,0,0,0) 0px,
99                rgba(0,0,0,0) 2px,
100                rgba(0,0,0,0.18) 3px,
101                rgba(0,0,0,0) 4px
102            );
103            background-size: 100% 4px;
104            mix-blend-mode: overlay;
105            animation: scanShift 8s linear infinite;
106            z-index: 2;
107        }
108
109        .loader-inner {
110            position: relative;
111            z-index: 3;
112            display: flex;
113            flex-direction: column;
114            align-items: center;
115            width: 100%;
116        }
117        .loader-scanline {
118            width: min(280px, 60vw);
119            height: 2px;
120            background: rgba(208,235,22,0.12);
121            margin-top: 40px;
122            border-radius: 99px;
123            overflow: hidden;
124        }
125        .loader-bar {
126            height: 100%;
127            width: 0;
128            background: #C9337B;
129            box-shadow: 0 0 12px #C9337B, 0 0 24px rgba(201,51,123,0.3);
130            animation: loadBar 1.6s cubic-bezier(0.86,0,0.07,1) forwards;
131        }
132        .loader-label {
133            font-family: 'Space Mono', monospace;
134            font-size: 11px;
135            letter-spacing: 0.5em;
136            color: #C9337B;
137            margin-top: 18px;
138            animation: pulse 1.2s ease-in-out infinite;
139        }
140
141        @keyframes loadBar { 0%{width:0} 60%{width:65%} 100%{width:100%} }
142        @keyframes neonFlicker {
143            0%,19%,21%,23%,25%,54%,56%,100% { opacity:1; filter:drop-shadow(0 0 14px rgba(208,235,22,0.6)); }
144            20%,24%,55% { opacity:0.5; filter:drop-shadow(0 0 2px rgba(208,235,22,0.1)); }
145        }
146        @keyframes pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
147        @keyframes loaderVideoIn {
148            0% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
149            100% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
150        }
151        @keyframes scanShift {
152            0% { background-position-y: 0; }
153            100% { background-position-y: 200px; }
154        }
155
156
157        /* ── HEADER ── */
158        header {
159            position: fixed;
160            top: 0; left: 0; right: 0;
161            z-index: 500;
162            background: rgba(8,8,8,0.92);
163            backdrop-filter: blur(12px);
164            border-bottom: 1px solid rgba(208,235,22,0.12);
165        }
166        .header-inner {
167            max-width: 1200px;
168            margin: 0 auto;
169            padding: 0 24px;
170            height: 64px;
171            display: flex;
172            align-items: center;
173            justify-content: space-between;
174        }
175        .logo-img { height: 36px; cursor: pointer; transition: filter 0.3s; }
176        .logo-img:hover { filter: drop-shadow(0 0 10px var(--acid)); }
177
178        nav { display: flex; gap: 0; }
179        .nav-btn {
180            background: none;
181            border: none;
182            cursor: pointer;
183            font-family: 'Space Mono', monospace;
184            font-size: 11px;
185            font-weight: 700;
186            letter-spacing: 0.15em;
187            color: var(--text-muted);
188            padding: 8px 14px;
189            transition: color 0.2s, text-shadow 0.2s;
190            position: relative;
191        }
192        .nav-btn::after {
193            content: '';
194            position: absolute;
195            bottom: 0; left: 50%; right: 50%;
196            height: 1px;
197            background: var(--acid);
198            transition: left 0.2s, right 0.2s;
199        }
200        .nav-btn:hover, .nav-btn.active {
201            color: var(--acid);
202            text-shadow: 0 0 8px var(--acid);
203        }
204        .nav-btn.active::after, .nav-btn:hover::after { left: 14px; right: 14px; }
205
206        /* ── MOBILE NAV ── */
207        .mobile-nav {
208            display: none;
209            position: fixed;
210            bottom: 0; left: 0; right: 0;
211            z-index: 500;
212            background: rgba(8,8,8,0.96);
213            backdrop-filter: blur(12px);
214            border-top: 1px solid rgba(208,235,22,0.12);
215            padding: 6px 0 env(safe-area-inset-bottom, 0);
216        }
217        .mobile-nav-inner { display: flex; justify-content: space-around; }
218        .mobile-nav-btn {
219            background: none;
220            border: none;
221            cursor: pointer;
222            font-family: 'Space Mono', monospace;
223            font-size: 9px;
224            font-weight: 700;
225            letter-spacing: 0.1em;
226            color: var(--text-muted);
227            padding: 10px 8px;
228            transition: color 0.2s;
229        }
230        .mobile-nav-btn.active { color: var(--acid); text-shadow: 0 0 6px var(--acid); }
231
232        @media (max-width: 768px) {
233            nav { display: none; }
234            .mobile-nav { display: block; }
235        }
236
237        /* ── MAIN ── */
238        main { padding-top: 64px; padding-bottom: 80px; min-height: 100vh; }
239        @media (min-width: 769px) { main { padding-bottom: 24px; } }
240
241        /* ── SECTIONS ── */
242        .section { display: none; }
243        .section.active { display: block; }
244
245        @keyframes fadeUp {
246            from { opacity: 0; transform: translateY(28px); }
247            to { opacity: 1; transform: translateY(0); }
248        }
249        .section.active { display: block; }
250        .section.animating { animation: fadeUp 0.5s ease-out forwards; }
251
252        /* ── HOME ── */
253        #home {
254            min-height: calc(100vh - 64px);
255            display: flex;
256            align-items: center;
257            justify-content: center;
258            position: relative;
259            overflow: hidden;
260        }
261        .home-bg-lines {
262            position: absolute;
263            inset: 0;
264            background-image:
265                repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(208,235,22,0.04) 80px),
266                repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(208,235,22,0.03) 80px);
267            pointer-events: none;
268        }
269        .home-center {
270            text-align: center;
271            position: relative;
272            z-index: 1;
273            padding: 40px 24px;
274        }
275        .home-logo { width: min(480px, 85vw); }
276        .home-genre {
277            font-family: 'Space Mono', monospace;
278            font-size: clamp(12px, 2.5vw, 18px);
279            letter-spacing: 0.5em;
280            color: var(--text-muted);
281            margin-top: 28px;
282        }
283        .home-from {
284            font-family: 'Space Mono', monospace;
285            font-size: clamp(10px, 2vw, 14px);
286            letter-spacing: 0.45em;
287            color: rgba(208,235,22,0.35);
288            margin-top: 10px;
289        }
290        .home-cta {
291            display: inline-block;
292            margin-top: 48px;
293            border: 1px solid var(--acid);
294            padding: 13px 36px;
295            font-family: 'Space Mono', monospace;
296            font-size: 12px;
297            letter-spacing: 0.3em;
298            font-weight: 700;
299            color: var(--acid);
300            background: transparent;
301            cursor: pointer;
302            transition: background 0.25s, color 0.25s, box-shadow 0.25s;
303            position: relative;
304            overflow: hidden;
305        }
306        .home-cta::before {
307            content: '';
308            position: absolute;
309            inset: 0;
310            background: var(--acid);
311            transform: scaleX(0);
312            transform-origin: left;
313            transition: transform 0.25s ease;
314            z-index: -1;
315        }
316        .home-cta:hover { color: #000; box-shadow: 0 0 20px rgba(208,235,22,0.35); }
317        .home-cta:hover::before { transform: scaleX(1); }
318
319        /* corner decoration */
320        .corner-deco {
321            position: absolute;
322            width: 60px; height: 60px;
323            border-color: var(--acid);
324            border-style: solid;
325            opacity: 0.25;
326        }
327        .corner-deco.tl { top: 80px; left: 24px; border-width: 1px 0 0 1px; }
328        .corner-deco.tr { top: 80px; right: 24px; border-width: 1px 1px 0 0; }
329        .corner-deco.bl { bottom: 24px; left: 24px; border-width: 0 0 1px 1px; }
330        .corner-deco.br { bottom: 24px; right: 24px; border-width: 0 1px 1px 0; }
331
332        /* ── PAGE HEADER ── */
333        .page-header {
334            padding: 64px 24px 40px;
335            max-width: 1200px;
336            margin: 0 auto;
337            border-bottom: 1px solid rgba(208,235,22,0.1);
338            margin-bottom: 48px;
339        }
340        .page-title {
341            font-family: 'Bebas Neue', sans-serif;
342            font-size: clamp(52px, 10vw, 96px);
343            letter-spacing: 0.08em;
344            line-height: 1;
345            color: var(--acid);
346        }
347        .page-title-label {
348            font-family: 'Space Mono', monospace;
349            font-size: 11px;
350            letter-spacing: 0.4em;
351            color: var(--text-muted);
352            margin-bottom: 8px;
353        }
354
355        /* ── ABOUT ── */
356        .about-container {
357            max-width: 1200px;
358            margin: 0 auto;
359            padding: 0 24px 80px;
360            display: grid;
361            grid-template-columns: 1fr 1fr;
362            gap: 60px;
363            align-items: start;
364        }
365        @media (max-width: 768px) { .about-container { grid-template-columns: 1fr; gap: 36px; } }
366
367        .about-img-wrap { position: relative; }
368        .about-img {
369            width: 100%;
370            aspect-ratio: 4/3;
371            object-fit: cover;
372            display: block;
373            filter: grayscale(15%) contrast(1.05);
374            border: 1px solid rgba(208,235,22,0.2);
375        }
376        .about-img-frame {
377            position: absolute;
378            top: 10px; left: 10px; right: -10px; bottom: -10px;
379            border: 1px solid rgba(208,235,22,0.12);
380            pointer-events: none;
381            z-index: -1;
382        }
383        .about-text { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
384        .about-body {
385            font-size: 15px;
386            line-height: 2;
387            color: rgba(208,235,22,0.75);
388            font-weight: 300;
389        }
390        .social-row { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
391        .social-link {
392            display: flex;
393            align-items: center;
394            gap: 12px;
395            font-family: 'Space Mono', monospace;
396            font-size: 12px;
397            letter-spacing: 0.1em;
398            color: var(--text-muted);
399            text-decoration: none;
400            transition: color 0.2s, text-shadow 0.2s;
401        }
402        .social-link:hover { color: var(--acid); text-shadow: 0 0 8px var(--acid); }
403        .social-link svg { flex-shrink: 0; }
404
405        .about-videos {
406            max-width: 1200px;
407            margin: 0 auto;
408            padding: 0 24px 80px;
409        }
410        .about-videos-label {
411            font-family: 'Space Mono', monospace;
412            font-size: 11px;
413            letter-spacing: 0.15em;
414            color: var(--text-muted);
415            margin-bottom: 16px;
416        }
417        .about-videos-grid {
418            display: grid;
419            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
420            gap: 24px;
421        }
422        .about-video-wrap {
423            position: relative;
424            width: 100%;
425            aspect-ratio: 16/9;
426            border: 1px solid rgba(208,235,22,0.2);
427            background: #000;
428        }
429        .about-video-wrap iframe {
430            position: absolute;
431            inset: 0;
432            width: 100%;
433            height: 100%;
434        }
435
436        /* ── LIVE ── */
437        .live-container { max-width: 900px; margin: 0 auto; padding: 0 24px 80px; display: flex; flex-direction: column; gap: 3px; }
438        .live-row {
439            display: grid;
440            grid-template-columns: 180px 1fr auto;
441            align-items: center;
442            gap: 24px;
443            padding: 24px;
444            border: 1px solid rgba(208,235,22,0.12);
445            transition: border-color 0.25s, background 0.25s;
446            position: relative;
447            overflow: hidden;
448        }
449        .live-row::before {
450            content: '';
451            position: absolute;
452            left: 0; top: 0; bottom: 0;
453            width: 3px;
454            background: var(--acid);
455            transform: scaleY(0);
456            transform-origin: bottom;
457            transition: transform 0.25s ease;
458        }
459        .live-row:hover { border-color: rgba(208,235,22,0.35); background: rgba(208,235,22,0.03); }
460        .live-row:hover::before { transfor
460m: scaleY(1); }
461        .live-row.past { opacity: 0.4; }
462        @media (max-width: 600px) {
463            .live-row { grid-template-columns: 1fr; gap: 10px; }
464        }
465        .live-date {
466            font-family: 'Space Mono', monospace;
467            font-size: 13px;
468            font-weight: 700;
469            letter-spacing: 0.05em;
470        }
471        .live-event { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.08em; line-height: 1.1; }
472        .live-venue { font-size: 12px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.05em; }
473        .live-address { font-size: 11px; color: rgba(208,235,22,0.3); margin-top: 2px; }
474        .badge {
475            font-family: 'Space Mono', monospace;
476            font-size: 9px;
477            font-weight: 700;
478            letter-spacing: 0.15em;
479            border: 1px solid currentColor;
480            padding: 4px 8px;
481            white-space: nowrap;
482            align-self: flex-start;
483        }
484        .badge.fin { color: var(--text-muted); }
485        .badge.soon { color: var(--acid); border-color: var(--acid); }
486        .badge.upcoming {
487            color: #000;
488            background: var(--acid);
489            border-color: var(--acid);
490            box-shadow: 0 0 10px rgba(208,235,22,0.4);
491        }
492
493        /* ── MUSIC ── */
494        .music-container { max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }
495        .music-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: rgba(208,235,22,0.1); }
496        .music-card {
497            background: var(--bg);
498            padding: 0;
499            overflow: hidden;
500            transition: transform 0.3s;
501            position: relative;
502        }
503        .music-card:hover { z-index: 2; transform: scale(1.015); }
504        .music-thumb {
505            width: 100%;
506            aspect-ratio: 1;
507            object-fit: cover;
508            display: block;
509            filter: grayscale(20%);
510            transition: filter 0.4s;
511        }
512        .music-card:hover .music-thumb { filter: grayscale(0%); }
513        .music-info { padding: 20px 22px; }
514        .music-type {
515            font-family: 'Space Mono', monospace;
516            font-size: 10px;
517            letter-spacing: 0.3em;
518            color: var(--text-muted);
519            margin-bottom: 6px;
520        }
521        .music-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.06em; }
522        .music-embed { padding: 0 22px; margin-bottom: 0; }
523        .music-links { display: flex; gap: 12px; padding: 16px 22px 22px; flex-wrap: wrap; }
524        .music-link {
525            font-family: 'Space Mono', monospace;
526            font-size: 10px;
527            letter-spacing: 0.12em;
528            color: var(--acid);
529            text-decoration: none;
530            border-bottom: 1px solid rgba(208,235,22,0.3);
531            padding-bottom: 1px;
532            transition: border-color 0.2s, text-shadow 0.2s;
533        }
534        .music-link:hover { border-color: var(--acid); text-shadow: 0 0 6px var(--acid); }
535
536        /* ── MEMBERS ── */
537        .members-container { max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }
538        .members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: rgba(208,235,22,0.1); }
539        .member-card {
540            background: var(--bg);
541            overflow: hidden;
542            position: relative;
543            cursor: default;
544        }
545        .member-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; }
546        .member-img {
547            width: 100%;
548            height: 100%;
549            object-fit: cover;
550            display: block;
551            filter: grayscale(40%) contrast(1.1);
552            transition: filter 0.4s, transform 0.5s;
553        }
554        .member-card:hover .member-img { filter: grayscale(0%) contrast(1.05); transform: scale(1.04); }
555        .member-overlay {
556            position: absolute;
557            inset: 0;
558            background: linear-gradient(to top, rgba(8,8,8,0.7) 0%, transparent 60%);
559        }
560        .member-info { padding: 18px 20px; }
561        .member-name { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 0.07em; }
562        .member-role {
563            font-family: 'Space Mono', monospace;
564            font-size: 10px;
565            letter-spacing: 0.2em;
566            color: var(--text-muted);
567            margin-top: 2px;
568        }
569        .member-sns { display: flex; gap: 10px; margin-top: 12px; }
570        .member-sns-link {
571            display: flex; align-items: center; justify-content: center;
572            width: 32px; height: 32px;
573            border: 1px solid rgba(208,235,22,0.2);
574            color: var(--text-muted);
575            text-decoration: none;
576            transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
577        }
578        .member-sns-link:hover {
579            color: var(--acid);
580            border-color: var(--acid);
581            box-shadow: 0 0 10px rgba(208,235,22,0.2);
582        }
583
584        /* ── NEWS ── */
585        .news-container { max-width: 820px; margin: 0 auto; padding: 0 24px 80px; }
586        .news-list { display: flex; flex-direction: column; gap: 0; }
587        .news-item {
588            display: grid;
589            grid-template-columns: 120px 1fr;
590            gap: 24px;
591            padding: 28px 0;
592            border-bottom: 1px solid rgba(208,235,22,0.08);
593            align-items: start;
594            transition: background 0.2s;
595        }
596        @media (max-width: 500px) { .news-item { grid-template-columns: 1fr; gap: 8px; } }
597        .news-date {
598            font-family: 'Space Mono', monospace;
599            font-size: 11px;
600            letter-spacing: 0.1em;
601            color: var(--text-muted);
602            padding-top: 4px;
603        }
604        .news-title { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--acid); margin-bottom: 6px; }
605        .news-body { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
606
607        /* ── CONTACT ── */
608        .contact-container { max-width: 820px; margin: 0 auto; padding: 0 24px 80px; display: flex; flex-direction: column; gap: 56px; }
609        .contact-section-label {
610            font-family: 'Space Mono', monospace;
611            font-size: 10px;
612            letter-spacing: 0.4em;
613            color: var(--text-muted);
614            margin-bottom: 12px;
615        }
616        .contact-email {
617            font-family: 'Bebas Neue', sans-serif;
618            font-size: 28px;
619            letter-spacing: 0.08em;
620            color: var(--acid);
621        }
622        .social-icons { display: flex; gap: 20px; margin-top: 8px; }
623        .social-icon {
624            display: flex;
625            align-items: center;
626            justify-content: center;
627            width: 48px; height: 48px;
628            border: 1px solid rgba(208,235,22,0.2);
629            color: var(--text-muted);
630            transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
631            text-decoration: none;
632        }
633        .social-icon:hover {
634            color: var(--acid);
635            border-color: var(--acid);
636            box-shadow: 0 0 14px rgba(208,235,22,0.2);
637        }
638
639        /* ── HOME SOCIAL ICONS ── */
640        .home-social-icons {
641            display: flex;
642            gap: 16px;
643            justify-content: center;
644            margin-top: 32px;
645        }
646        .home-social-icon {
647            display: flex;
648            align-items: center;
649            justify-content: center;
650            width: 48px; height: 48px;
651            border: 1px solid rgba(208,235,22,0.2);
652            color: var(--text-muted);
653            transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
654            text-decoration: none;
655        }
656        .home-social-icon:hover {
657            color: var(--acid);
658            border-color: var(--acid);
659            box-shadow: 0 0 14px rgba(208,235,22,0.25);
660        }
661
662        /* ── FOOTER ── */
663        footer {
664            border-top: 1px solid rgba(208,235,22,0.08);
665            padding: 28px 24px;
666            text-align: center;
667        }
668        .footer-text {
669            font-family: 'Space Mono', monospace;
670            font-size: 10px;
671            letter-spacing: 0.3em;
672            color: rgba(208,235,22,0.2);
673        }
674
675        /* ── GOODS ── */
676        .goods-container { max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }
677        .goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1px; background: rgba(208,235,22,0.1); }
678        .goods-card {
679            background: var(--bg);
680            overflow: hidden;
681            position: relative;
682            transition: transform 0.3s;
683        }
684        .goods-card:hover { z-index: 2; transform: scale(1.012); }
685        .goods-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; }
686        .goods-img {
687            width: 100%;
688            height: 100%;
689            object-fit: cover;
690            display: block;
691            filter: grayscale(15%);
692            transition: filter 0.4s;
693        }
694        .goods-card:hover .goods-img { filter: grayscale(0%); }
695        .goods-sold-overlay {
696            position: absolute;
697            inset: 0;
698            background: rgba(8,8,8,0.55);
699            display: flex;
700            align-items: center;
701            justify-content: center;
702        }
703        .goods-sold-stamp {
704            font-family: 'Bebas Neue', sans-serif;
705            font-size: 48px;
706            letter-spacing: 0.12em;
707            color: #ff3b3b;
708            border: 3px solid #ff3b3b;
709            padding: 6px 20px;
710            opacity: 0.92;
711            transform: rotate(-12deg);
712            text-shadow: 0 0 20px rgba(255,59,59,0.4);
713            box-shadow: 0 0 20px rgba(255,59,59,0.2);
714        }
715        .goods-info { padding: 22px 24px; }
716        .goods-label {
717            font-family: 'Space Mono', monospace;
718            font-size: 10px;
719            letter-spacing: 0.3em;
720            color: var(--text-muted);
721            margin-bottom: 6px;
722        }
723        .goods-name { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 0.06em; line-height: 1.1; margin-bottom: 16px; }
724        .goods-price-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
725        .goods-price-single {
726            font-family: 'Space Mono', monospace;
727            font-size: 22px;
728            font-weight: 700;
729            color: var(--acid);
730            letter-spacing: 0.02em;
731        }
732        .goods-price-single.sold { color: rgba(208,235,22,0.3); text-decoration: line-through; }
733        .goods-sold-tag {
734            font-family: 'Space Mono', monospace;
735            font-size: 10px;
736            font-weight: 700;
737            letter-spacing: 0.2em;
738            color: #ff3b3b;
739            border: 1px solid #ff3b3b;
740            padding: 4px 10px;
741            box-shadow: 0 0 8px rgba(255,59,59,0.2);
742        }
743        .goods-price-table {
744            display: flex;
745            gap: 0;
746            border: 1px solid rgba(208,235,22,0.2);
747            overflow: hidden;
748        }
749        .goods-price-cell {
750            flex: 1;
751            display: flex;
752            flex-direction: column;
753            align-items: center;
754            justify-content: center;
755            padding: 14px 12px;
756            gap: 4px;
757            border-right: 1px solid rgba(208,235,22,0.12);
758            position: relative;
759            transition: background 0.2s;
760        }
761        .goods-price-cell:last-child { border-right: none; }
762        .goods-price-cell.highlight { background: var(--acid-dim); }
763        .goods-price-qty {
764            font-family: 'Bebas Neue', sans-serif;
765            font-size: 36px;
766            letter-spacing: 0.06em;
767            line-height: 1;
768            color: var(--acid);
769        }
770        .goods-price-qty-label {
771            font-family: 'Space Mono', monospace;
772            font-size: 9px;
773            letter-spacing: 0.2em;
774            color: var(--text-muted);
775        }
776        .goods-price-amount {
777            font-family: 'Space Mono', monospace;
778            font-size: 13px;
779            font-weight: 700;
780            color: var(--acid);
781            letter-spacing: 0.05em;
782            margin-top: 4px;
783        }
784        .goods-price-best {
785            font-family: 'Space Mono', monospace;
786            font-size: 8px;
787            letter-spacing: 0.2em;
788            color: #000;
789            background: var(--acid);
790            padding: 2px 6px;
791            position: absolute;
792            top: 0;
793            left: 50%;
794            transform: translateX(-50%);
795        }
796
797        /* ── SCROLLBAR ── */
798        ::-webkit-scrollbar { width: 4px; }
799        ::-webkit-scrollbar-track { background: var(--bg); }
800        ::-webkit-scrollbar-thumb { background: rgba(208,235,22,0.3); border-radius: 2px; }
801    </style>
802</head>
803<body>
804
805    <div id="loader">
806        <div class="loader-video-bg">
807            <video src="duqcy_loading.mp4" autoplay muted loop playsinline></video>
808        </div>
809        <div class="loader-inner">
810            <div class="loader-scanline"><div class="loader-bar"></div></div>
811            <div class="loader-label">LOADING...</div>
812        </div>
813    </div>
814
815    <header>
816        <div class="header-inner">
817            <img src="https://i.imgur.com/WADPXIt.png" alt="Duqcy" class="logo-img" onclick="showSection('home')">
818            <nav>
819                <button class="nav-btn active" onclick="showSection('home')">HOME</button>
820                <button class="nav-btn" onclick="showSection('about')">ABOUT</button>
821                <button class="nav-btn" onclick="showSection('live')">LIVE</button>
822                <button class="nav-btn" onclick="showSection('music')">MUSIC</button>
823                <button class="nav-btn" onclick="showSection('goods')">GOODS</button>
824                <button class="nav-btn" onclick="showSection('members')">MEMBERS</button>
825                <button class="nav-btn" onclick="showSection('news')">NEWS</button>
826            </nav>
827        </div>
828    </header>
829
830    <div class="mobile-nav">
831        <div class="mobile-nav-inner">
832            <button class="mobile-nav-btn active" onclick="showSection('home')">HOME</button>
833            <button class="mobile-nav-btn" onclick="showSection('about')">ABOUT</button>
834            <button class="mobile-nav-btn" onclick="showSection('live')">LIVE</button>
835            <button class="mobile-nav-btn" onclick="showSection('music')">MUSIC</button>
836            <button class="mobile-nav-btn" onclick="showSection('goods')">GOODS</button>
837            <button class="mobile-nav-btn" onclick="showSection('members')">MEMBERS</button>
838            <button class="mobile-nav-btn" onclick="showSection('news')">NEWS</button>
839        </div>
840    </div>
841
842    <main>
843
844        <div id="home" class="section active">
845            <div style="min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;">
846                <div class="home-bg-lines"></div>
847                <div class="corner-deco tl"></div>
848                <div class="corner-deco tr"></div>
849                <div class="corner-deco bl"></div>
850                <div class="corner-deco br"></div>
851                <div class="home-center">
852                    <img src="https://i.imgur.com/WADPXIt.png" alt="Duqcy" class="home-logo">
853                    <p class="home-genre">NEO ACID JAZZ</p>
854                    <p class="home-from">FROM FUKUOKA</p>
855                    <button class="home-cta" onclick="showSection('about')">EXPLORE MORE</button>
856                    <div class="home-social-icons">
857                        <a href="https://www.instagram.com/duqcy_fukuoka" target="_blank" rel="noopener" class="home-social-icon" title="Instagram">
858                            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
858<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
859                        </a>
860                        <a href="https://x.com/duqcy202" target="_blank" rel="noopener" class="home-social-icon" title="X / Twitter">
861                            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
862                        </a>
863                        <a href="https://www.tiktok.com/@duqcy" target="_blank" rel="noopener" class="home-social-icon" title="TikTok">
864                            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>
865                        </a>
866                        <a href="mailto:[email protected]" class="home-social-icon" title="Email">
867                            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
868                        </a>
869                    </div>
870                </div>
871            </div>
872        </div>
873
874        <div id="about" class="section">
875            <div class="page-header">
876                <p class="page-title-label">001 / ABOUT</p>
877                <h2 class="page-title">ABOUT</h2>
878            </div>
879            <div class="about-container">
880                <div class="about-img-wrap">
881                    <img src="https://i.imgur.com/mOSM6kW.jpeg" alt="Duqcy Band" class="about-img">
882                    <div class="about-img-frame"></div>
883                </div>
884                <div class="about-text">
885                    <p class="about-body">
886                        2025年5月、福岡にて結成。大学生4人からなる4ピースネオアシッドジャズバンド。バンド名は、男子児童が発する「デュクシ」という言葉に由来し、「遊び心を忘れない」という信念を胸に刻むために名付けられた。
887                    </p>
888                    <p class="about-body">
889                        アシッドジャズの再解釈をテーマに、ファンク、ロック、ポップスのエッセンスを自在に取り込み、ジャンルの境界を越えるサウンドを構築。各メンバーが持つ異なる音楽的ルーツから生まれる個性的なフレーズが、緻密に組み上げられたアンサンブルの中で有機的に絡み合う。そこには、バンド名が示す通り少年のような無邪気さと大胆な遊び心が交錯し、唯一無二のグルーブが立ち上がる。
890                    </p>
891                    <p class="about-body">
892                        福岡という街から放たれる彼らの音楽は、都会的な洗練と地方都市特有の熱量が共存し、聴く者の感性を軽やかに、そして力強く揺さぶる。
893                    </p>
894                    <div class="social-row">
895                        <a href="https://www.instagram.com/duqcy_fukuoka" target="_blank" rel="noopener" class="social-link">
896                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
896<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
897                            @duqcy_fukuoka
898                        </a>
899                        <a href="https://x.com/duqcy202" target="_blank" rel="noopener" class="social-link">
900                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
901                            @duqcy202
902                        </a>
903                        <a href="https://www.tiktok.com/@duqcy" target="_blank" rel="noopener" class="social-link">
904                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>
905                            @duqcy
906                        </a>
907                    </div>
908                </div>
909            </div>
910            <div class="about-videos">
911                <p class="about-videos-label">VIDEO</p>
912                <div class="about-videos-grid">
913                    <div class="about-video-wrap">
914                        <iframe src="https://www.youtube.com/embed/8Rq0tNcHFGQ" title="Duqcy Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
915                    </div>
916                    <div class="about-video-wrap">
917                        <iframe src="https://www.youtube.com/embed/KKPbUR2ReEM" title="Duqcy Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
918                    </div>
919                </div>
920            </div>
921        </div>
922
923        <div id="live" class="section">
924            <div class="page-header">
925                <p class="page-title-label">002 / LIVE</p>
926                <h2 class="page-title">LIVE SCHEDULE</h2>
927            </div>
928            <div class="live-container">
929
930                <div class="live-row past">
931                    <div>
932                        <div class="live-date">2026 / 03 / 03</div>
933                        <div style="font-family:'Space Mono',monospace;font-size:10px;color:rgba(208,235,22,0.3);margin-top:2px;">TUE</div>
934                    </div>
935                    <div>
936                        <div class="live-event">SHAKE UP!!</div>
937                        <div class="live-venue">Fukuoka graf</div>
938                        <div class="live-address">福岡市中央区舞鶴1丁目8-38 WAVE BLDG 5F</div>
939                    </div>
940                    <span class="badge fin">FIN</span>
941                </div>
942
943                <div class="live-row past">
944                    <div>
945                        <div class="live-date">2026 / 06 / 17</div>
946                        <div style="font-family:'Space Mono',monospace;font-size:10px;color:rgba(208,235,22,0.3);margin-top:2px;">WED</div>
947                    </div>
948                    <div>
949                        <div class="live-event">Wing-Stong「"ほぼ"西日本ツアー」</div>
950                        <div class="live-venue">LIVEHOUSE Queblic</div>
951                        <div class="live-address">福岡市中央区大名2-6-39ジラソーレビルB1F</div>
952                    </div>
953                    <span class="badge fin">FIN</span>
954                </div>
955
956                <div class="live-row past">
957                    <div>
958                        <div class="live-date">2026 / 07 / 25</div>
959                        <div style="font-family:'Space Mono',monospace;font-size:10px;color:rgba(208,235,22,0.3);margin-top:2px;">SAT</div>
960                    </div>
961                    <div>
962                        <div class="live-event">HOMEPARTY vol.4</div>
963                        <div class="live-venue">Fukuoka garf</div>
964                        <div class="live-address">福岡市中央区舞鶴1丁目8-38 WAVE BLDG 5F</div>
965                    </div>
966                    <span class="badge fin">FIN</span>
967                </div>
968
969                <div class="live-row past">
970                    <div>
971                        <div class="live-date">2026 / 07 / 29</div>
972                        <div style="font-family:'Space Mono',monospace;font-size:10px;color:rgba(208,235,22,0.3);margin-top:2px;">WED</div>
973                    </div>
974                    <div>
975                        <div class="live-event">森音</div>
976                        <div class="live-venue">livehouse&club peace</div>
977                        <div class="live-address">福岡県福岡市中央区荒戸1丁目9−22</div>
978                    </div>
979                    <span class="badge fin">FIN</span>
980                </div>
981
982                <div class="live-row past">
983                    <div>
984                        <div class="live-date">2026 / 08 / 18</div>
985                        <div style="font-family:'Space Mono',monospace;font-size:10px;color:rgba(208,235,22,0.3);margin-top:2px;">TUE</div>
986                    </div>
987                    <div>
988                        <div class="live-event">火曜中華街 part.5 文明開華</div>
989                        <div class="live-venue">public space 四次元</div>
990                        <div class="live-address">〒810-0001 福岡市中央区天神4-4-30新郷ビル2F</div>
991                    </div>
992                    <span class="badge fin">FIN</span>
993                </div>
994
995            </div>
996        </div>
997
998        <div id="music" class="section">
999            <div class="page-header">
1000                <p class="page-title-label">003 / MUSIC</p>
1001                <h2 class="page-title">MUSIC</h2>
1002            </div>
1003            <div class="music-container">
1004                <div class="music-grid">
1005
1006                    <div class="music-card">
1007                        <img src="https://i.imgur.com/zvxxS1k.jpeg" alt="Mustard" class="music-thumb">
1008                        <div class="music-info">
1009                            <div class="music-type">3RD SINGLE</div>
1010                            <div class="music-title">Mustard</div>
1011                        </div>
1012                        <div class="music-embed">
1013                            <iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0" height="152" style="width:100%;border-radius:4px;background:transparent;" src="https://embed.music.apple.com/jp/album/mustard/6782066907?i=6782066913"></iframe>
1014                        </div>
1015                        <div class="music-links">
1016                            <a href="https://music.apple.com/jp/album/mustard/6782066907?i=6782066913" target="_blank" rel="noopener" class="music-link">Apple Music</a>
1017                        </div>
1018                    </div>
1019
1020                    <div class="music-card">
1021                        <img src="https://i.imgur.com/AJQXqc2.png" alt="WWW" class="music-thumb">
1022                        <div class="music-info">
1023                            <div class="music-type">2ND SINGLE</div>
1024                            <div class="music-title">WWW</div>
1025                        </div>
1026                        <div class="music-embed">
1027                            <iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0" height="152" style="width:100%;border-radius:4px;background:transparent;" src="https://embed.music.apple.com/jp/album/www/1889454186?i=1889454190"></iframe>
1028                        </div>
1029                        <div class="music-links">
1030                            <a href="https://music.apple.com/jp/album/www/1889454186?i=1889454190" target="_blank" rel="noopener" class="music-link">Apple Music</a>
1031                        </div>
1032                    </div>
1033
1034                    <div class="music-card">
1035                        <img src="https://i.imgur.com/CpLOIBw.png" alt="Room202" class="music-thumb">
1036                        <div class="music-info">
1037                            <div class="music-type">1ST SINGLE</div>
1038                            <div class="music-title">
1038Room202</div>
1039                        </div>
1040                        <div class="music-embed">
1041                            <iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0" height="152" style="width:100%;border-radius:4px;background:transparent;" src="https://embed.music.apple.com/jp/album/room202-single/1822233927"></iframe>
1042                        </div>
1043                        <div class="music-links">
1044                            <a href="https://open.spotify.com/intl-ja/album/1jGKTBx0AUFAZYsDooHtot" target="_blank" rel="noopener" class="music-link">Spotify</a>
1045                            <a href="https://music.apple.com/jp/album/room202-single/1822233927" target="_blank" rel="noopener" class="music-link">Apple Music</a>
1046                            <a href="https://music.youtube.com/playlist?list=OLAK5uy_kJIm5jC_zKi3pKSK4jg0rWICrFtbmtj8s" target="_blank" rel="noopener" class="music-link">YouTube</a>
1047                        </div>
1048                    </div>
1049
1050                    <div class="music-card">
1051                        <img src="https://i.imgur.com/HDBcMgz.png" alt="Trailer Gauche" class="music-thumb">
1052                        <div class="music-info">
1053                            <div class="music-type">1ST EP</div>
1054                            <div class="music-title">Trailer Gauche</div>
1055                        </div>
1056                        <div class="music-embed">
1057                            <iframe allow="autoplay *; encrypted-media *; fullscreen *" frameborder="0" height="152" style="width:100%;border-radius:4px;background:transparent;" src="https://embed.music.apple.com/jp/album/trailer-gauche-ep/1857520094"></iframe>
1058                        </div>
1059                        <div class="music-links">
1060                            <a href="https://open.spotify.com/intl-ja/album/6ERChP0VFixahZD7NetDEN" target="_blank" rel="noopener" class="music-link">Spotify</a>
1061                            <a href="https://music.apple.com/jp/album/trailer-gauche-ep/1857520094" target="_blank" rel="noopener" class="music-link">Apple Music</a>
1062                            <a href="https://music.youtube.com/playlist?list=OLAK5uy_lDRvVbouDcycw_k_0OcFrwHc_DeMRm1us" target="_blank" rel="noopener" class="music-link">YouTube</a>
1063                        </div>
1064                    </div>
1065
1066                </div>
1067            </div>
1068        </div>
1069
1070        <div id="goods" class="section">
1071            <div class="page-header">
1072                <p class="page-title-label">004 / GOODS</p>
1073                <h2 class="page-title">GOODS</h2>
1074            </div>
1075            <div class="goods-container">
1076                <div class="goods-grid">
1077
1078                    <div class="goods-card">
1079                        <div class="goods-img-wrap">
1080                            <img src="https://i.imgur.com/dWKxSMW.jpeg" alt="Trailer Gauche Lighter" class="goods-img">
1081                            <div class="goods-sold-overlay">
1082                                <div class="goods-sold-stamp">SOLD OUT</div>
1083                            </div>
1084                        </div>
1085                        <div class="goods-info">
1086                            <div class="goods-label">GOODS / LIGHTER</div>
1087                            <div class="goods-name">Trailer Gauche Lighter</div>
1088                            <div class="goods-price-row">
1089                                <span class="goods-price-single sold">Â¥500</span>
1090                                <span class="goods-sold-tag">SOLD OUT</span>
1091                            </div>
1092                        </div>
1093                    </div>
1094
1095                    <div class="goods-card">
1096                        <div class="goods-img-wrap">
1097                            <img src="https://i.imgur.com/wR5cepZ.jpeg" alt="Album jacket sticker" class="goods-img">
1098                        </div>
1099                        <div class="goods-info">
1100                            <div class="goods-label">GOODS / STICKER</div>
1101                            <div class="goods-name">Album Jacket Sticker</div>
1102                            <div class="goods-price-table">
1103                                <div class="goods-price-cell">
1104                                    <div class="goods-price-qty">1</div>
1105                                    <div class="goods-price-qty-label">PIECE</div>
1106                                    <div class="goods-price-amount">Â¥200</div>
1107                                </div>
1108                                <div class="goods-price-cell highlight">
1109                                    <div class="goods-price-qty">3</div>
1110                                    <div class="goods-price-qty-label">PIECES</div>
1111                                    <div class="goods-price-amount">Â¥500</div>
1112                                </div>
1113                            </div>
1114                        </div>
1115                    </div>
1116
1117
1118                    <div class="goods-card">
1119                        <div class="goods-img-wrap">
1120                            <img src="https://i.imgur.com/x7SDEAj.jpeg" alt="ODD COIN CASE" class="goods-img">
1121                        </div>
1122                        <div class="goods-info">
1123                            <div class="goods-label">GOODS / COIN CASE</div>
1124                            <div class="goods-name">ODD COIN CASE</div>
1125                            <div class="goods-price-row">
1126                                <span class="goods-price-single">Â¥700</span>
1127                            </div>
1128                        </div>
1129                    </div>
1130
1131                </div>
1132            </div>
1133        </div>
1134
1135        <div id="members" class="section">
1136            <div class="page-header">
1137                <p class="page-title-label">005 / MEMBERS</p>
1138                <h2 class="page-title">MEMBERS</h2>
1139            </div>
1140            <div class="members-container">
1141                <div class="members-grid">
1142                    <div class="member-card">
1143                        <div class="member-img-wrap">
1144                            <img src="https://i.imgur.com/6d9OMI9.jpeg" alt="Dorori" class="member-img">
1145                            <div class="member-overlay"></div>
1146                        </div>
1147                        <div class="member-info">
1148                            <div class="member-name">Dorori</div>
1149                            <div class="member-role">VOCAL / GUITAR</div>
1150                            <div class="member-sns">
1151                                <a href="https://x.com/Dorori__kenkyo" target="_blank" rel="noopener" class="member-sns-link" title="X">
1152                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
1153                                </a>
1154                                <a href="https://www.instagram.com/dorori_eriashi" target="_blank" rel="noopener" class="member-sns-link" title="Instagram">
1155                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
1156                                </a>
1157                            </div>
1158                        </div>
1159                    </div>
1160                    <div class="member-card">
1161                        <div class="member-img-wrap">
1162                            <img src="https://i.imgur.com/KDjL5zG.jpeg" alt="Iso" class="member-img">
1163                            <div class="member-overlay"></div>
1164                        </div>
1165                        <div class="member-info">
1166                            <div class="member-name">Iso</div>
1167                            <div class="member-role">BASS</div>
1168                            <div class="member-sns">
1169                                <a href="https://x.com/bass_hink" target="_blank" rel="noopener" class="member-sns-link" title="X">
1170                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
1171                                </a>
1172                                <a href="https://www.instagram.com/bass_hink/" target="_blank" rel="noopener" class="member-sns-link" title="Instagram">
1173                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
1173<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
1174                                </a>
1175                            </div>
1176                        </div>
1177                    </div>
1178                    <div class="member-card">
1179                        <div class="member-img-wrap">
1180                            <img src="https://i.imgur.com/4e9BzFB.jpeg" alt="Rintaro" class="member-img">
1181                            <div class="member-overlay"></div>
1182                        </div>
1183                        <div class="member-info">
1184                            <div class="member-name">Rintaro</div>
1185                            <div class="member-role">DRUMS</div>
1186                            <div class="member-sns">
1187                                <a href="https://x.com/loeudr" target="_blank" rel="noopener" class="member-sns-link" title="X">
1188                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
1189                                </a>
1190                                <a href="https://www.instagram.com/loeudr" target="_blank" rel="noopener" class="member-sns-link" title="Instagram">
1191                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
1192                                </a>
1193                            </div>
1194                        </div>
1195                    </div>
1196                    <div class="member-card">
1197                        <div class="member-img-wrap">
1198                            <img src="https://i.imgur.com/yFnGiTa.jpeg" alt="Takumi" class="member-img">
1199                            <div class="member-overlay"></div>
1200                        </div>
1201                        <div class="member-info">
1202                            <div class="member-name">Takumi</div>
1203                            <div class="member-role">KEYBOARD / SYNTH</div>
1204                            <div class="member-sns">
1205                                <a href="https://x.com/takumi_duqcy" target="_blank" rel="noopener" class="member-sns-link" title="X">
1206                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
1206<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
1207                                </a>
1208                                <a href="https://www.instagram.com/taku.04.u" target="_blank" rel="noopener" class="member-sns-link" title="Instagram">
1209                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
1210                                </a>
1211                            </div>
1212                        </div>
1213                    </div>
1214                </div>
1215            </div>
1216        </div>
1217
1218        <div id="news" class="section">
1219            <div class="page-header">
1220                <p class="page-title-label">006 / NEWS</p>
1221                <h2 class="page-title">NEWS</h2>
1222            </div>
1223            <div class="news-container">
1224                <div class="news-list">
1225                    <div class="news-item">
1226                        <div class="news-date">2026.07.15</div>
1227                        <div>
1228                            <div class="news-title">3rd Single「Mustard」配信開始</div>
1229                            <div class="news-body">各サブスクリプションサービスにて配信開始!</div>
1230                        </div>
1231                    </div>
1232                    <div class="news-item">
1233                        <div class="news-date">2026.04.22</div>
1234                        <div>
1235                            <div class="news-title">2nd Single「WWW」配信開始</div>
1236                            <div class="news-body">各種サブスクリプションサービスにて配信開始!</div>
1237                        </div>
1238                    </div>
1239                    <div class="news-item">
1240                        <div class="news-date">2026.01.08</div>
1241                        <div>
1242                            <div class="news-title">early Reflection 12月度マンスリーアーティスト選出</div>
1243                            <div class="news-body">DIGLE MAGAZINEにてインタビュー掲載中!</div>
1244                        </div>
1245                    </div>
1246                    <div class="news-item">
1247                        <div class="news-date">2025.12.24</div>
1248                        <div>
1249                            <div class="news-title">1st EP「Trailer Gauche」配信開始</div>
1250                            <div class="news-body">各種サブスクリプションサービスにて配信開始!</div>
1251                        </div>
1252                    </div>
1253                    <div class="news-item">
1254                        <div class="news-date">2025.10.22</div>
1255                        <div>
1256                            <div class="news-title">新曲「Kalmia」先行配信開始</div>
1257                            <div class="news-body">各種サブスクリプションサービスにて配信開始!</div>
1258                        </div>
1259                    </div>
1260                    <div class="news-item">
1261                        <div class="news-date">2025.07.06</div>
1262                        <div>
1263                            <div class="news-title">1st Single「Room202」配信開始</div>
1264                            <div class="news-body">各種サブスクリプションサービスにて配信開始!</div>
1265                        </div>
1266                    </div>
1267                </div>
1268            </div>
1269        </div>
1270
1271    </main>
1272
1273    <footer>
1274        <p class="footer-text">© 2026 DUQCY. ALL RIGHTS RESERVED.</p>
1275    </footer>
1276
1277    
1277<script>
1278        // Loader
1279        window.addEventListener('load', () => {
1280            setTimeout(() => {
1281                const loader = document.getElementById('loader');
1282                loader.classList.add('loaded');
1283                setTimeout(() => { loader.style.display = 'none'; }, 850);
1284            }, 1600);
1285        });
1286
1287        function showSection(id) {
1288            // Instantly hide all sections
1289            document.querySelectorAll('.section').forEach(s => {
1290                s.classList.remove('active', 'animating');
1291                s.style.display = 'none';
1292            });
1293
1294            const el = document.getElementById(id);
1295            if (el) {
1296                el.style.display = 'block';
1297                // Force reflow before adding animation class
1298                void el.offsetWidth;
1299                el.classList.add('active', 'animating');
1300            }
1301
1302            document.querySelectorAll('.nav-btn').forEach(b => {
1303                b.classList.toggle('active', b.getAttribute('onclick') === `showSection('${id}')`);
1304            });
1305            document.querySelectorAll('.mobile-nav-btn').forEach(b => {
1306                b.classList.toggle('active', b.getAttribute('onclick') === `showSection('${id}')`);
1307            });
1308
1309            window.scrollTo({ top: 0, behavior: 'smooth' });
1310        }
1311    </script>
1311
1312</body>
1313</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.