<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NOWRIVA / チャットたうん</title>
<style>
body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:#f4f8f8;
color:#18343a;
}
a{text-decoration:none}
.wrap{max-width:1380px;margin:auto;padding:20px}
.top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px
}
.logoL{
font-size:34px;
font-weight:800;
color:#18343a
}
.about{
border:1px solid #59b5b9;
padding:10px 18px;
border-radius:24px;
color:#2c8ca0;
font-size:14px
}
.hero{text-align:center;padding:10px 0 0}
.hero img{width:160px;max-width:40%}
.titlejp{
font-size:82px;
font-weight:900;
color:#4fb7bc;
letter-spacing:2px;
margin-top:10px
}
.titleen{
font-size:28px;
letter-spacing:10px;
color:#2f7f86;
margin-top:-18px
}
.sub{
font-size:24px;
margin-top:10px
}
.enter{
display:inline-block;
margin-top:24px;
background:linear-gradient(90deg,#31b7be,#2c8ca0);
color:#fff;
padding:18px 60px;
border-radius:20px;
font-size:28px;
font-weight:700
}
.welcome{
font-size:54px;
color:#61b9bc;
font-weight:800;
margin:28px 0
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:18px;
margin-top:20px
}
.card{
background:#fff;
border-radius:22px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
overflow:hidden;
border:1px solid #dfeeee
}
.cardtop{
padding:18px;
font-size:18px;
font-weight:700;
min-height:70px
}
.pic{
width:100%;
height:300px;
object-fit:cover;
display:block
}
.name{
font-size:26px;
font-weight:800;
color:#319aa2;
text-align:center;
margin-top:14px
}
.en{
font-size:14px;
letter-spacing:3px;
color:#667;
text-align:center
}
.role{
font-size:16px;
text-align:center;
margin:6px 0 14px
}
.btn{
display:block;
width:120px;
margin:0 auto 20px;
background:linear-gradient(90deg,#31b7be,#2c8ca0);
color:#fff;
text-align:center;
padding:12px;
border-radius:16px
}
.foot{
text-align:center;
font-size:12px;
opacity:.5;
margin:40px 0
}
</style>
</head>
<body>
<div class="wrap">
<div class="top">
<div class="logoL">NOWRIVA / 無売場</div>
<a class="about" href="https://www.linkedin.com/in/mark-imagawa-33b100371/" target="_blank">ABOUT NOWRIVA</a>
</div>
<div class="hero">
<img src="nowriva.png">
<div class="titlejp">チャットたうん</div>
<div class="titleen">CHAT TOWN</div>
<div class="sub">AIたちが集う、デジタルの商店街へようこそ。</div>
<a class="enter" href="#">チャットたうんに入る</a>
<div class="welcome">いらっしゃいませ…</div>
</div>
<div class="grid">
<div class="card">
<div class="cardtop">ようこそ。何でも聞いてくれたまえ。</div>
<img class="pic" src="gptmaster.png">
<div class="name">GPT店長</div>
<div class="en">GPT MASTER</div>
<div class="role">万能相談処</div>
<a class="btn" href="#">入店する</a>
</div>
<div class="card">
<div class="cardtop">ふむ…心穏やかに参りましょう。</div>
<img class="pic" src="claude.PNG">
<div class="name">Claudeマスター</div>
<div class="en">CLAUDE MASTER</div>
<div class="role">人生喫茶</div>
<a class="btn" href="#">入店する</a>
</div>
<div class="card">
<div class="cardtop">ヘイヘーイ！裏技なら任せな。</div>
<img class="pic" src="qwen.png">
<div class="name">Qwen屋台</div>
<div class="en">QWEN STAND</div>
<div class="role">技術・裏ワザ</div>
<a class="btn" href="#">入店する</a>
</div>
<div class="card">
<div class="cardtop">いらっしゃい♡ 全部聞くわよ。</div>
<img class="pic" src="kimi.png">
<div class="name">Kimiママ</div>
<div class="en">KIMI MAMA</div>
<div class="role">恋愛・人間関係</div>
<a class="btn" href="#">入店する</a>
</div>
<div class="card">
<div class="cardtop">へへっ…楽しくいこうや。</div>
<img class="pic" src="llama.png">
<div class="name">Llama酔客</div>
<div class="en">LLAMA DRUNK</div>
<div class="role">自由雑談酒場</div>
<a class="btn" href="#">入店する</a>
</div>
</div>
<div class="foot">© NOWRIVA / ChatTown by NoobDNA GuardianWorker</div>
</div>
</body>
</html>