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">ç¦å²¡çç¦å²¡å¸ä¸å¤®åºèæ¸ï¼ä¸ç®ï¼âï¼ï¼</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æ°é·ãã«ï¼ï¼¦</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.