結論
- Strata/Project-maya いずれもハードウェア要件が高すぎる
- DDR4/5 32 GiB とあるが実質 64GiB
- VRAM 12 GiB 以上 は事実上 RTX 3060 が最低限
- Maya は複数枚の GPU がほぼ前提
- 環境次第
- 4070 Ti + Strata html+css 出力に15分
- 4090 + Project-Maya 1時間以上
4070 Ti 12GiB + Strata
- https://github.com/Niko1221/Strata/blob/main/README.ja.md
- 選択できるモデルが少ないため、選べるモデルは小さい
- 処理は早く終わり、初回で15分ほど
- 修正を2回ほど指示すれば途中から処理が始められる 4分ほど
第2部 Project-Maya
必須環境
- Visual Studio C++
-
CUDA Tool kit
path は通してくれ(;`・Д・´)
設定など
- 初期セットアップは一番小さい構成しか通らなかったので、プローブした環境に対して変更なくエンター
- Thinking を OFF
- Context サイズも 32k のデフォルトで実施
- 出力される html はほぼ 4070 Ti と同じ内容
使ったプロンプト
あなたは熟練のフロントエンドエンジニア兼UI/UXデザイナーです。
往年の大型CD/DVDレンタルショップ(TSUTAYAやGEOのような世界観)を現代風のサイバー・ネオン調に再解釈した、スタイリッシュで少し派手目なWebサイトのトップページを作成してください。
外部ファイルへの依存をなくし、HTML、CSS(<style>)、最小限のJavaScript(<script>)をすべて含めた【単一のindex.htmlファイル】として完全なコードを出力してください。
コードの途中で「// 省略」やプレースホルダーを使わず、そのままブラウザで開いて動作する状態にしてください。
【デザインと機能の要件】
1. 全体トーン・配色
- ダークモード基調(漆黒〜ダークネイビー)。
- ネオンブルー、パープル、サイバーシアンのアクセントカラー。
- 暗闇でディスクやパッケージが発光するような近未来感とエンタメ感。
2. 構成要素
- ヘッダー:ショップロゴ(ネオン発光エフェクト)、ナビゲーションリンク、検索バー、カート/会員アイコン。
- ヒーローセクション:今週の注目作(ビッグバナー風)。グラデーション背景と浮遊感のあるアニメーション。
- カテゴリタブ:映画・ドラマ・邦楽・洋楽・アニメ(クリックでアクティブ表示が切り替わるUI)。
- ピックアップ棚(作品カード一覧):CDジャケットおよびDVD/Blu-rayパッケージを模したカードを最低6〜8点グリッド配置。
- フッター:レンタル利用案内、店舗検索リンク、コピーライト。
3. マウスオーバー(ホバー)演出【※少し派手目に実装してください】
- ジャケットカードにマウスを乗せた際、3D傾き効果(CSS transform: perspective / rotateY / translateY)とネオングロー(box-shadow)の強調。
- ディスク(CD/DVD)の飛び出し演出:ジャケットの後ろから円形の光沢ディスク(CSSグラデーションで表現)が回転しながら少しスライドアウトするアニメーション。
- ボタンやナビゲーションリンク:ホバー時に光が走るシマーエフェクトやボーダー発光。
4. 技術仕様
- 外部CSSフレームワーク(BootstrapやTailwind)は使わず、純粋なCSS(モダンCSS: Flexbox, CSS Grid, Custom Properties/CSS変数)で記述。
- 画像リンクが切れても崩れないよう、ジャケット画像にはプレースホルダー(SVG埋め込み、CSSによるスタイリッシュなグラデーションアートワーク、またはPlacehold.co等のダミー画像URL)を使用。
- レスポンシブ対応(スマホ〜デスクトップで崩れないグリッド)。
完全なHTMLコードのみをMarkdownのコードブロック形式で出力してください。
出来上がった html+css ファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NEON RENT|サイバー・レンタルショップ</title>
<style>
:root{
--bg-0:#03060f;
--bg-1:#070c1b;
--bg-2:#0b1122;
--card:#0d1424;
--ink:#f3f7ff;
--muted:#8fa1c8;
--cyan:#00f7ff;
--purple:#a855f7;
--magenta:#ff00d4;
--line:rgba(0,247,255,.18);
--line-strong:rgba(0,247,255,.45);
--glass:rgba(10,16,32,.66);
--shadow:0 18px 45px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;min-height:100vh;overflow-x:hidden;color:var(--ink);
background:linear-gradient(180deg,var(--bg-0),var(--bg-1) 45%,var(--bg-2));
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
}
body::before{
content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:screen;
background:repeating-linear-gradient(0deg,rgba(0,247,255,.035) 0 1px,transparent 1px 4px);
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px;position:relative;z-index:2}
/* ============ HEADER ============ */
header{
position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);
background:linear-gradient(180deg,rgba(3,6,15,.9),rgba(3,6,15,.62));
border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 20px}
.logo{
font-size:clamp(1.4rem,3vw,2rem);font-weight:900;letter-spacing:.14em;text-transform:uppercase;
color:#fff;text-shadow:0 0 6px rgba(0,247,255,.9),0 0 18px rgba(0,247,255,.55),0 0 34px rgba(168,85,247,.45);
}
.logo span{color:var(--cyan);text-shadow:0 0 10px rgba(0,247,255,.95),0 0 28px rgba(0,247,255,.65)}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a{
position:relative;overflow:hidden;padding:10px 14px;border-radius:999px;color:#c9d7ff;
border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:.35s;
}
nav a::before{
content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);transition:transform .75s;
background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.16) 40%,rgba(0,247,255,.38) 50%,rgba(255,255,255,.16) 60%,transparent 80%);
}
nav a:hover,nav a:focus-visible{color:#fff;border-color:var(--line-strong);box-shadow:0 0 18px rgba(0,247,255,.22),inset 0 0 18px rgba(168,85,247,.12)}
nav a:hover::before,nav a:focus-visible::before{transform:translateX(130%)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.search{position:relative}
.search input{
width:220px;max-width:100%;padding:11px 14px 11px 38px;border-radius:999px;
border:1px solid rgba(0,247,255,.22);background:rgba(8,12,24,.78);color:var(--ink);outline:none;transition:.3s;
}
.search input::placeholder{color:rgba(143,161,200,.75)}
.search input:focus{border-color:var(--cyan);box-shadow:0 0 22px rgba(0,247,255,.28);background:rgba(8,12,24,.92)}
.search::before{content:"";position:absolute;left:14px;top:50%;width:10px;height:10px;border:2px solid rgba(0,247,255,.85);border-radius:50%;transform:translateY(-50%);pointer-events:none}
.search::after{content:"";position:absolute;left:23px;top:calc(50% + 9px);width:8px;height:2px;background:var(--cyan);border-radius:2px;transform:rotate(45deg);transform-origin:left center;pointer-events:none;box-shadow:0 0 8px rgba(0,247,255,.8)}
.icon-btn{
position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
border:1px solid rgba(0,247,255,.22);background:rgba(8,12,24,.72);color:#c9d7ff;overflow:hidden;transition:.35s;
}
.icon-btn::before{
content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);transition:transform .7s;
background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.14) 40%,rgba(0,247,255,.32) 50%,rgba(255,255,255,.14) 60%,transparent 80%);
}
.icon-btn:hover,.icon-btn:focus-visible{color:#fff;border-color:var(--line-strong);box-shadow:0 0 18px rgba(0,247,255,.28)}
.icon-btn:hover::before,.icon-btn:focus-visible::before{transform:translateX(130%)}
.icon-btn.pop{animation:cartPop .45s ease}
.cart-icon{position:relative;width:18px;height:13px;border:2px solid currentColor;border-radius:0 0 7px 7px;margin-top:6px}
.cart-icon::before{content:"";position:absolute;top:-8px;left:2px;width:12px;height:8px;border:2px solid currentColor;border-bottom:0;border-radius:7px 7px 0 0}
.cart-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#03060f;background:linear-gradient(135deg,var(--cyan),var(--purple));border-radius:999px;box-shadow:0 0 12px rgba(0,247,255,.45)}
.user-icon{position:relative;width:18px;height:18px;border:2px solid currentColor;border-radius:50%;margin-bottom:6px}
.user-icon::after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:22px;height:12px;border:2px solid currentColor;border-bottom:0;border-radius:12px 12px 0 0}
/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding:84px 0 70px}
.hero-bg{position:absolute;inset:0;z-index:0;
background:
radial-gradient(1100px 620px at 18% 12%,rgba(0,247,255,.18),transparent 60%),
radial-gradient(900px 520px at 82% 18%,rgba(168,85,247,.24),transparent 58%),
radial-gradient(760px 420px at 50% 88%,rgba(255,0,212,.14),transparent 60%),
linear-gradient(180deg,rgba(3,6,15,.1),rgba(3,6,15,.45));
}
.hero-grid{
position:absolute;left:-20%;right:-20%;bottom:-10%;top:40%;z-index:0;pointer-events:none;opacity:.26;
background-image:linear-gradient(rgba(0,247,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.08) 1px,transparent 1px);
background-size:48px 48px;transform:perspective(800px) rotateX(62deg);transform-origin:top;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,transparent 96%);mask-image:linear-gradient(180deg,transparent,#000 30%,transparent 96%);
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}
.hero-tag{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid rgba(0,247,255,.35);background:rgba(0,247,255,.08);color:var(--cyan);font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 18px rgba(0,247,255,.18)}
.hero h1{margin:18px 0 14px;font-size:clamp(2.2rem,6vw,4.8rem);line-height:1.02;letter-spacing:.02em;color:#fff;text-shadow:0 0 10px rgba(0,247,255,.75),0 0 28px rgba(168,85,247,.55),0 0 60px rgba(255,0,212,.35)}
.hero p{max-width:560px;margin:0 0 24px;color:var(--muted);line-height:1.75}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;border:1px solid transparent;font-weight:800;letter-spacing:.04em;transition:.35s}
.btn::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-140%);transition:transform .8s;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.2) 40%,rgba(0,247,255,.42) 50%,rgba(255,255,255,.2) 60%,transparent 80%)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(140%)}
.btn-primary{color:#03060f;background:linear-gradient(135deg,var(--cyan),var(--purple));border-color:rgba(255,255,255,.25);box-shadow:0 12px 35px rgba(0,247,255,.22),0 0 24px rgba(168,85,247,.2)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 45px rgba(0,247,255,.32),0 0 38px rgba(168,85,247,.28)}
.btn-secondary{color:#dbe6ff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.btn-secondary:hover{color:#fff;border-color:var(--line-strong);box-shadow:0 0 24px rgba(0,247,255,.22),inset 0 0 20px rgba(168,85,247,.12);transform:translateY(-2px)}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;color:#9fb1d6;font-size:.92rem}
.hero-meta span{padding:7px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04)}
.hero-visual{position:relative;min-height:360px;display:grid;place-items:center}
.hero-package{position:relative;z-index:2;width:min(340px,80%);aspect-ratio:3/4}
.hero-case{position:absolute;inset:0;z-index:2;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 30px rgba(0,247,255,.18),0 0 65px rgba(168,85,247,.18);transform:perspective(900px) rotateY(-14deg) rotateX(7deg)}
.hero-case-art{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,#070b18 0%,#190f33 42%,#002030 100%)}
.hero-case-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 18%,rgba(255,0,212,.38),transparent 42%),radial-gradient(circle at 18% 82%,rgba(0,247,255,.42),transparent 45%),repeating-linear-gradient(135deg,rgba(0,247,255,.12) 0 2px,transparent 2px 18px)}
.hero-case-art::after{content:"NEON DRIVE 2099";position:absolute;z-index:3;left:18px;right:18px;bottom:18px;font-size:clamp(1rem,2vw,1.35rem);font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.95);text-shadow:0 0 8px rgba(0,247,255,.9),0 0 24px rgba(168,85,247,.6)}
.hero-case-shine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(120deg,transparent 28%,rgba(255,255,255,.13) 42%,transparent 58%)}
.hero-disc{position:absolute;right:8%;top:8%;width:74%;aspect-ratio:1;z-index:1;border-radius:50%;background:conic-gradient(from 0deg,#00f7ff,#a855f7,#ff00d4,#00f7ff);opacity:.82;box-shadow:0 0 30px rgba(0,247,255,.45),0 0 70px rgba(255,0,212,.35);animation:heroDiscSpin 18s linear infinite}
.hero-disc::before{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#03060f 0 58%,rgba(255,255,255,.18) 59%,transparent 62%);box-shadow:inset 0 0 12px rgba(0,0,0,.7)}
.hero-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 12%,rgba(255,255,255,.28) 18%,transparent 26% 100%)}
.orbit{position:absolute;border-radius:50%;border:1px solid rgba(0,247,255,.22);animation:orbitSpin 16s linear infinite}
.orbit.o1{width:420px;height:420px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg)}
.orbit.o2{width:320px;height:320px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg);border-color:rgba(168,85,247,.25);animation-duration:12s;animation-direction:reverse}
.orbit.o1::after,.orbit.o2::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.orbit.o2::after{background:var(--magenta);box-shadow:0 0 14px var(--magenta)}
/* ============ TICKER ============ */
.ticker{position:relative;z-index:2;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(0,247,255,.05);padding:12px 0}
.ticker-track{display:flex;gap:44px;width:max-content;animation:ticker 26s linear infinite;white-space:nowrap;font-weight:800;letter-spacing:.1em;color:#9fb1d6}
.ticker-track b{color:var(--cyan)}
.ticker-track .sep{color:var(--purple)}
/* ============ CATEGORY ============ */
.section{position:relative;z-index:2;padding:64px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.section-head h2{margin:0;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:900;letter-spacing:.02em;color:#fff;text-shadow:0 0 12px rgba(0,247,255,.4),0 0 30px rgba(168,85,247,.3)}
.section-head p{margin:6px 0 0;color:var(--muted)}
.section-head .link{color:var(--cyan);font-weight:800;position:relative;overflow:hidden;padding:6px 0}
.section-head .link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.section-head .link:hover::after{transform:scaleX(1)}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.tab{position:relative;overflow:hidden;padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#c9d7ff;font-weight:800;letter-spacing:.04em;transition:.35s}
.tab::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);transition:transform .7s;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.14) 40%,rgba(0,247,255,.32) 50%,rgba(255,255,255,.14) 60%,transparent 80%)}
.tab:hover::before{transform:translateX(130%)}
.tab:hover{color:#fff;border-color:var(--line-strong);box-shadow:0 0 18px rgba(0,247,255,.2)}
.tab.is-active{color:#03060f;background:linear-gradient(135deg,var(--cyan),var(--purple));border-color:transparent;box-shadow:0 0 22px rgba(0,247,255,.35),0 0 40px rgba(168,85,247,.25)}
/* ============ CARDS ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.card{position:relative;perspective:900px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card-inner{
position:relative;transform-style:preserve-3d;transform:rotateY(0) rotateX(0) translateZ(0);
border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
background:linear-gradient(160deg,#0b1122,#0d1424);
box-shadow:var(--shadow);transition:box-shadow .4s;
}
.card.is-hover{transform:translateY(-8px)}
.card.is-hover .card-inner{box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 28px rgba(0,247,255,.4),0 0 60px rgba(168,85,247,.3)}
.cover{position:relative;aspect-ratio:3/4;overflow:hidden}
.cover-art{position:absolute;inset:0;z-index:1}
.cover-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(0,0,0,.14) 0 2px,transparent 2px 20px),linear-gradient(180deg,transparent 45%,rgba(3,6,15,.65))}
.cover-title{position:absolute;z-index:3;left:14px;right:14px;bottom:14px;font-weight:900;font-size:1.05rem;line-height:1.25;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6),0 0 10px rgba(0,247,255,.4)}
.cover-sub{position:absolute;z-index:3;left:14px;top:12px;font-size:.72rem;letter-spacing:.14em;font-weight:800;color:rgba(255,255,255,.75);text-transform:uppercase}
.cover-shine{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.16) 45%,transparent 60%)}
.card.is-hover .cover-shine{opacity:1}
.disc{
position:absolute;z-index:2;top:16%;right:16%;width:64%;aspect-ratio:1;border-radius:50%;
background:conic-gradient(from 0deg,#00f7ff,#a855f7,#ff00d4,#00f7ff);
transform:translate(38%,0) scale(.9);opacity:0;box-shadow:0 0 22px rgba(0,247,255,.5),0 0 45px rgba(255,0,212,.35);
transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s;
}
.disc::before{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#03060f 0 58%,rgba(255,255,255,.18) 59%,transparent 62%);box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 12%,rgba(255,255,255,.28) 18%,transparent 26% 100%)}
.card.is-hover .disc{transform:translate(10%,-6%) scale(1);opacity:.95;animation:discSpin 6s linear infinite}
.card-info{padding:14px 16px 16px}
.card-title{margin:0 0 4px;font-size:1.02rem;font-weight:800;color:#fff}
.card-meta{margin:0 0 12px;color:var(--muted);font-size:.85rem}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-weight:900;color:var(--cyan);text-shadow:0 0 10px rgba(0,247,255,.4)}
.add{position:relative;overflow:hidden;padding:9px 14px;border-radius:999px;border:1px solid rgba(0,247,255,.32);background:rgba(0,247,255,.08);color:#c9f7ff;font-weight:800;font-size:.85rem;transition:.3s}
.add::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);transition:transform .6s;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.18) 40%,rgba(0,247,255,.4) 50%,rgba(255,255,255,.18) 60%,transparent 80%)}
.add:hover::before{transform:translateX(130%)}
.add:hover{color:#03060f;background:linear-gradient(135deg,var(--cyan),var(--purple));border-color:transparent;box-shadow:0 0 18px rgba(0,247,255,.4)}
.card.enter{opacity:0;transform:translateY(24px)}
.card.enter.in{opacity:1;transform:translateY(0);transition:opacity .6s,transform .6s}
/* ============ FEATURE STRIP ============ */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:44px}
.strip-item{position:relative;padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(0,247,255,.04));overflow:hidden}
.strip-item h3{margin:0 0 6px;font-size:1.05rem;color:#fff}
.strip-item p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.strip-item::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(180deg,var(--cyan),var(--purple));box-shadow:0 0 12px rgba(0,247,255,.5)}
/* ============ FOOTER ============ */
footer{position:relative;z-index:2;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(3,6,15,.4),rgba(3,6,15,.9));padding:48px 0 28px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.footer-brand .logo{font-size:1.6rem}
.footer-brand p{margin:12px 0 0;color:var(--muted);line-height:1.7;max-width:340px}
.footer-col h4{margin:0 0 14px;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.footer-col a{display:block;padding:6px 0;color:#b7c6e8;transition:.3s}
.footer-col a:hover{color:#fff;text-shadow:0 0 12px rgba(0,247,255,.5)}
.footer-bottom{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#7f91b8;font-size:.85rem}
/* ============ ANIMATIONS ============ */
@keyframes heroDiscSpin{to{transform:rotate(360deg)}}
@keyframes discSpin{to{transform:translate(10%,-6%) scale(1) rotate(360deg)}}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes cartPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-package{animation:floatY 7s ease-in-out infinite}
/* ============ RESPONSIVE ============ */
@media (max-width:960px){
.hero-inner{grid-template-columns:1fr;gap:34px}
.hero-visual{order:-1;min-height:320px}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.header-actions{width:100%;justify-content:flex-end}
.search input{width:100%}
.search{flex:1}
nav{order:3;width:100%}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-brand{grid-column:1/-1}
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.hero{padding:56px 0 48px}
}
@media (max-width:420px){
.footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.card.enter{opacity:1;transform:none}
}
</style>
</head>
<body>
<header>
<div class="header-inner">
<a class="logo" href="#top">NEON<span>RENT</span></a>
<nav>
<a href="#pickup">新作</a>
<a href="#pickup">映画</a>
<a href="#pickup">ドラマ</a>
<a href="#pickup">音楽</a>
<a href="#pickup">アニメ</a>
<a href="#footer">店舗検索</a>
</nav>
<div class="header-actions">
<div class="search">
<input id="searchInput" type="search" placeholder="タイトル / アーティスト検索" aria-label="検索" />
</div>
<button class="icon-btn" id="userBtn" aria-label="会員ページ"><span class="user-icon"></span></button>
<button class="icon-btn" id="cartBtn" aria-label="レンタルカート"><span class="cart-icon"></span><span class="cart-badge" id="cartCount">0</span></button>
</div>
</div>
</header>
<section class="hero" id="top">
<div class="hero-bg"></div>
<div class="hero-grid"></div>
<div class="wrap hero-inner">
<div>
<span class="hero-tag">今週の注目作</span>
<h1>NEON DRIVE 2099<br/>Blu-ray 発売中</h1>
<p>漆黒の街を駆けるサイバー・アクション。ディスクが暗闇で発光する、レンタルだけの限定パッケージ。今週は新作レンタルが最大30%OFF。</p>
<div class="hero-actions">
<button class="btn btn-primary" id="heroAdd">カートに追加</button>
<a class="btn btn-secondary" href="#pickup">作品一覧を見る</a>
</div>
<div class="hero-meta">
<span>★ 4.8 / 5.0</span>
<span>レンタル ¥390 / 泊</span>
<span>BLU-RAY + DVD</span>
<span>新着 120作品</span>
</div>
</div>
<div class="hero-visual">
<div class="orbit o1"></div>
<div class="orbit o2"></div>
<div class="hero-package">
<div class="hero-disc"></div>
<div class="hero-case">
<div class="hero-case-art"></div>
<div class="hero-case-shine"></div>
</div>
</div>
</div>
</div>
</section>
<div class="ticker">
<div class="ticker-track">
<span><b>今週の新着</b> 120タイトル</span><span class="sep">◆</span>
<span>新作レンタル <b>30%OFF</b></span><span class="sep">◆</span>
<span>Blu-ray <b>¥390</b>〜</span><span class="sep">◆</span>
<span>邦楽CD <b>¥190</b>〜</span><span class="sep">◆</span>
<span>アニメ一挙放送棚 <b>NEW</b></span><span class="sep">◆</span>
<span><b>今週の新着</b> 120タイトル</span><span class="sep">◆</span>
<span>新作レンタル <b>30%OFF</b></span><span class="sep">◆</span>
<span>Blu-ray <b>¥390</b>〜</span><span class="sep">◆</span>
<span>邦楽CD <b>¥190</b>〜</span><span class="sep">◆</span>
<span>アニメ一挙放送棚 <b>NEW</b></span><span class="sep">◆</span>
</div>
</div>
<section class="section" id="pickup">
<div class="wrap">
<div class="section-head">
<div>
<h2>PICKUP SHELF</h2>
<p>暗闇で光る、今週のおすすめタイトル。</p>
</div>
<a class="link" href="#pickup">すべて見る →</a>
</div>
<div class="tabs" id="tabs">
<button class="tab is-active" data-cat="all">ALL</button>
<button class="tab" data-cat="movie">映画</button>
<button class="tab" data-cat="drama">ドラマ</button>
<button class="tab" data-cat="jpop">邦楽</button>
<button class="tab" data-cat="kpop">洋楽</button>
<button class="tab" data-cat="anime">アニメ</button>
</div>
<div class="grid" id="grid"></div>
<div class="strip">
<div class="strip-item"><h3>新作レンタル</h3><p>入荷から2週間、新作タイトルは最大30%OFF。ディスクは毎回新品相当で提供。</p></div>
<div class="strip-item"><h3>返却もネオンで</h3><p>店舗の発光ドロップオフボックスへ。24時間対応の自動返却ゲート。</p></div>
<div class="strip-item"><h3>会員特典</h3><p>ポイントで人気タイトルを優先レンタル。ネオンパスで限定盤も。</p></div>
</div>
</div>
</section>
<footer id="footer">
<div class="wrap">
<div class="footer-grid">
<div class="footer-brand">
<a class="logo" href="#top">NEON<span>RENT</span></a>
<p>往年の大型レンタルショップを、ネオン発光の近未来空間へ。映画・ドラマ・音楽・アニメを、暗闇で光るディスクで。</p>
</div>
<div class="footer-col">
<h4>レンタル案内</h4>
<a href="#pickup">新作レンタル</a>
<a href="#pickup">DVD / Blu-ray</a>
<a href="#pickup">CD レンタル</a>
<a href="#pickup">返却方法</a>
</div>
<div class="footer-col">
<h4>店舗検索</h4>
<a href="#footer">店舗一覧</a>
<a href="#footer">最寄り店舗</a>
<a href="#footer">営業時間</a>
<a href="#footer">24hドロップオフ</a>
</div>
<div class="footer-col">
<h4>サポート</h4>
<a href="#footer">よくある質問</a>
<a href="#footer">会員サービス</a>
<a href="#footer">ポイント / 特典</a>
<a href="#footer">お問い合わせ</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2025 NEON RENT — サイバー・レンタルショップ</span>
<span>利用規約 ・ プライバシーポリシー ・ 特定商取引法に基づく表記</span>
</div>
</div>
</footer>
<script>
const ITEMS = [
{cat:"movie", title:"NEON DRIVE 2099", meta:"アクション / 2099 / 128min", price:"¥390", tags:["Blu-ray","DVD"], art:"linear-gradient(135deg,#001a26,#00f7ff 45%,#ff00d4 100%)"},
{cat:"movie", title:"MIDNIGHT GLITCH", meta:"SFスリラー / 2098 / 112min", price:"¥330", tags:["Blu-ray"], art:"linear-gradient(135deg,#120a24,#a855f7 50%,#00f7ff 100%)"},
{cat:"movie", title:"CHROME REQUIEM", meta:"ヒューマノイド / 2097 / 141min", price:"¥390", tags:["4K UHD","DVD"], art:"linear-gradient(135deg,#1a0616,#ff00d4 45%,#a855f7 100%)"},
{cat:"drama", title:"CYBER TOKYO NIGHTS", meta:"ドラマ / 全12話 / Season 2", price:"¥290", tags:["DVD BOX"], art:"linear-gradient(135deg,#04121f,#00f7ff 55%,#0b1122 100%)"},
{cat:"drama", title:"PHANTOM SIGNAL", meta:"ミステリー / 全8話", price:"¥260", tags:["Blu-ray"], art:"linear-gradient(135deg,#0b0620,#6b3fd6 50%,#00f7ff 100%)"},
{cat:"jpop", title:"HOLOGRAM LOVE", meta:"NEON SOUND / 邦楽CD", price:"¥190", tags:["CD"], art:"linear-gradient(135deg,#001016,#00f7ff 40%,#7cf5ff 100%)"},
{cat:"jpop", title:"SHINJUKU DREAM POP", meta:"シティポップ / 邦楽CD", price:"¥210", tags:["CD","LP"], art:"linear-gradient(135deg,#1b0a24,#ff00d4 50%,#ffd0f5 100%)"},
{cat:"kpop", title:"STARLIGHT ANTHEM", meta:"洋楽 / K-POP ALBUM", price:"¥240", tags:["CD"], art:"linear-gradient(135deg,#0a0620,#a855f7 45%,#f0c3ff 100%)"},
{cat:"kpop", title:"PULSE OF THE 80s", meta:"洋楽 / RETRO SYNTH", price:"¥220", tags:["CD","LP"], art:"linear-gradient(135deg,#120014,#ff00d4 50%,#ff6b9d 100%)"},
{cat:"anime", title:"MECHA CHRONICLE", meta:"アニメ / 全24話 / Blu-ray BOX", price:"¥490", tags:["Blu-ray BOX"], art:"linear-gradient(135deg,#00121f,#00b4ff 45%,#00f7ff 100%)"},
{cat:"anime", title:"GHOST CIRCUIT", meta:"アニメ / 全12話", price:"¥360", tags:["Blu-ray","DVD"], art:"linear-gradient(135deg,#0c0620,#7c3aed 50%,#00f7ff 100%)"},
{cat:"anime", title:"NEON YOKAI", meta:"アニメ / 全13話 / 限定盤", price:"¥520", tags:["Blu-ray BOX"], art:"linear-gradient(135deg,#160018,#ff00d4 40%,#00f7ff 100%)"}
];
const grid = document.getElementById("grid");
let cart = 0;
const cartCount = document.getElementById("cartCount");
const cartBtn = document.getElementById("cartBtn");
function badgeMarkup(tags){
return tags.map(t=>`<span class="badge">${t}</span>`).join("");
}
function render(filter){
grid.innerHTML = "";
const list = ITEMS.filter(it => filter === "all" || it.cat === filter);
list.forEach((it, i) => {
const card = document.createElement("article");
card.className = "card enter";
card.style.transitionDelay = (i * 45) + "ms";
card.innerHTML = `
<div class="card-inner">
<div class="cover">
<div class="cover-art" style="background:${it.art}"></div>
<div class="disc"></div>
<div class="cover-shine"></div>
<span class="cover-sub">${it.tags.join(" · ")}</span>
<span class="cover-title">${it.title}</span>
</div>
<div class="card-info">
<h3 class="card-title">${it.title}</h3>
<p class="card-meta">${it.meta}</p>
<div class="card-foot">
<span class="price">${it.price}〜</span>
<button class="add" data-add="${it.title}">レンタル</button>
</div>
</div>
</div>`;
grid.appendChild(card);
});
observeCards();
}
/* 3D tilt + hover glow + disc pop */
function bindTilt(card){
const inner = card.querySelector(".card-inner");
const cover = card.querySelector(".cover");
const apply = (x, y) => {
const rx = ((y - 0.5) * -14).toFixed(2);
const ry = ((x - 0.5) * 18).toFixed(2);
inner.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg) translateZ(18px)`;
cover.style.setProperty("--mx", (x * 100).toFixed(1) + "%");
};
card.addEventListener("pointerenter", () => card.classList.add("is-hover"));
card.addEventListener("pointermove", (e) => {
const r = card.getBoundingClientRect();
apply((e.clientX - r.left) / r.width, (e.clientY - r.top) / r.height);
});
card.addEventListener("pointerleave", () => {
card.classList.remove("is-hover");
inner.style.transform = "rotateY(0) rotateX(0) translateZ(0)";
});
}
/* reveal on scroll */
let revealObserver;
function observeCards(){
if(!revealObserver){
revealObserver = new IntersectionObserver((entries) => {
entries.forEach(en => { if(en.isIntersecting){ en.target.classList.add("in"); revealObserver.unobserve(en.target); } });
}, {threshold:.12});
}
grid.querySelectorAll(".card.enter:not(.in)").forEach(c => { revealObserver.observe(c); bindTilt(c); });
}
/* tabs */
document.getElementById("tabs").addEventListener("click", (e) => {
const tab = e.target.closest(".tab");
if(!tab) return;
document.querySelectorAll(".tab").forEach(t => t.classList.remove("is-active"));
tab.classList.add("is-active");
render(tab.dataset.cat);
});
/* search */
document.getElementById("searchInput").addEventListener("input", (e) => {
const q = e.target.value.trim().toLowerCase();
grid.innerHTML = "";
const list = ITEMS.filter(it => !q || it.title.toLowerCase().includes(q) || it.meta.toLowerCase().includes(q) || it.cat.includes(q));
list.forEach((it, i) => {
const card = document.createElement("article");
card.className = "card enter in";
card.innerHTML = `
<div class="card-inner">
<div class="cover">
<div class="cover-art" style="background:${it.art}"></div>
<div class="disc"></div>
<div class="cover-shine"></div>
<span class="cover-sub">${it.tags.join(" · ")}</span>
<span class="cover-title">${it.title}</span>
</div>
<div class="card-info">
<h3 class="card-title">${it.title}</h3>
<p class="card-meta">${it.meta}</p>
<div class="card-foot">
<span class="price">${it.price}〜</span>
<button class="add" data-add="${it.title}">レンタル</button>
</div>
</div>
</div>`;
grid.appendChild(card);
bindTilt(card);
});
if(!list.length){
grid.innerHTML = `<p style="color:var(--muted);grid-column:1/-1;text-align:center;padding:24px">該当タイトルが見つかりませんでした。</p>`;
}
});
/* cart */
function addToCart(){
cart++;
cartCount.textContent = cart;
cartBtn.classList.remove("pop");
void cartBtn.offsetWidth;
cartBtn.classList.add("pop");
}
grid.addEventListener("click", (e) => { if(e.target.closest(".add")) addToCart(); });
document.getElementById("heroAdd").addEventListener("click", addToCart);
render("all");
</script>
</body>
</html>
いじょ