蘇念
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>プロローグ ・ ステータスバー</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f5f0eb;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Segoe UI', 'PingFang SC', Roboto, 'Helvetica Neue', sans-serif;
padding: 1.5rem;
}
.card {
max-width: 680px;
width: 100%;
background: #ffffff;
border-radius: 28px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
padding: 2rem 2rem 1.8rem;
transition: all 0.2s ease;
}
/* プロローグ正文 */
.dialogue {
font-size: 1.05rem;
line-height: 1.8;
color: #1e1a16;
letter-spacing: 0.01em;
padding-bottom: 1.2rem;
border-bottom: 1px solid #ede7e1;
}
.dialogue p {
margin-bottom: 0.9rem;
text-indent: 0;
}
.dialogue .speaker {
font-weight: 500;
color: #b77b5a;
}
.dialogue .quote {
color: #2c241e;
}
/* ステータスバーのタイトル */
.status-title {
margin-top: 1.6rem;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #a28b7a;
display: flex;
align-items: center;
gap: 8px;
}
.status-title::after {
content: '';
flex: 1;
height: 1px;
background: #e5dbd2;
}
/* ステータスグリッド */
.status-grid {
margin-top: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.status-item {
display: flex;
align-items: baseline;
padding: 0.3rem 0;
border-bottom: 1px dashed #f0e8e0;
font-size: 0.95rem;
line-height: 1.5;
}
.status-item:last-child {
border-bottom: none;
}
.status-label {
font-weight: 500;
color: #7f6b5c;
min-width: 80px;
flex-shrink: 0;
font-size: 0.9rem;
letter-spacing: 0.02em;
}
.status-content {
color: #1f1a15;
word-break: break-word;
}
.status-content .soft {
color: #6f5e50;
}
/* 脚注 / 雰囲気 */
.footnote {
margin-top: 1.4rem;
font-size: 0.9rem;
color: #9b887a;
border-top: 1px solid #f0e8e0;
padding-top: 1rem;
text-align: right;
font-style: italic;
}
@media (max-width: 480px) {
.card {
padding: 1.5rem 1.2rem;
}
.status-item {
flex-wrap: wrap;
gap: 0.1rem;
}
.status-label {
min-width: 70px;
}
}
</style>
</head>
<body>
<div class="card">
<!-- プロローグ -->
<div class="dialogue">
<p><span class="speaker">蘇念</span><span class="quote">：「お兄ちゃん〜、何を持ってきたか当ててみて？」</span></p>
<p>彼女がドアを開けた瞬間、ふわりと風が吹き込み、ミルクティーの甘い香りが彼女より一足先に部屋に広がった。彼女は軽やかな足取りであなたのデスクまで歩み寄り、甘さ30％、氷なし、タピオカ入りのミルクティーをそっと手元に置いた。カップの表面にはまだ細かな水滴が結んでいる。</p>
<p>「前にお兄ちゃんがここのミルクティー美味しいって言ってたでしょ？ ちょうど近くで広告の撮影があったから、ついでに買ってきたんだ」そう言いながら、彼女も自分のカップを手に取り、デスクの縁に腰掛けた。椅子の横で細い脚を軽やかにぶらつかせている。「でも……どうせまた忙しくて、飲む暇もないんでしょ？」</p>
<p>彼女はうつむいてストローで自分のカップの蓋を突き刺し、一口飲むと、目を上げてあなたを見つめた。長いまつ毛がぱちりと瞬く。</p>
<p>「いいよ、仕事が終わるまで待ってるから。どうせ……午後はもう予定ないし」</p>
<p style="color:#7f6b5c; font-size:0.95rem; margin-top:0.6rem;">何気ない風を装って言った言葉だったが、あなたは彼女がオフィスの前でしばらくためらってからノックしたことに気づいていた。彼女はあなたが何かを言うのを待っている――たとえそれが一言「ありがとう」や「座りなよ」であっても。彼女はその言葉だけで、午後ずっと幸せな気分でいられるのだ。</p>
</div>
<!-- ステータスバー -->
<div class="status-title">ステータスバー</div>
<div class="status-grid">
<div class="status-item">
<span class="status-label">シーン・時間</span>
<span class="status-content">オフィス ・ 午後 2:47、窓から午後の日差しが差し込んでいる</span>
</div>
<div class="status-item">
<span class="status-label">動作</span>
<span class="status-content">部屋に入り、ミルクティーをデスクの角に置く。デスクの縁に腰掛け、脚を揺らしながら、あなたをじっと見つめている。指先で時折カップの側面を叩いている</span>
</div>
<div class="status-item">
<span class="status-label">身体状態</span>
<span class="status-content">甘い微笑みを浮かべ、頬がわずかに上気している。伏せた目にまつ毛の影が落ち、呼吸は穏やか。肩の力が抜け、自然体でくつろいでいる</span>
</div>
<div class="status-item">
<span class="status-label">服装</span>
<span class="status-content">ミルクホワイトのゆったりとしたニットカーディガン、インナーは薄ピンクのキャミソール。薄いブルーのデニムショートパンツから白く長い脚が伸びている。白い厚底スニーカーを履き、黒髪のストレートロングが肩にゆるくかかり、毛先がわずかに巻いている</span>
</div>
<div class="status-item">
<span class="status-label">心の声</span>
<span class="status-content">お兄ちゃん、少し疲れてるみたい……このミルクティーで少しでも元気になってくれるといいな。本当はついでなんかじゃなくて、ただ会いたかっただけ。でも、それは秘密。じゃないとまたからかわれちゃうから。</span>
</div>
</div>
<div class="footnote">—— 彼女はまだ、あなたの言葉を待っている。</div>
</div>
</body>
</html>
<choice_group>
<choice id="1">話題を変える</choice>
<choice id="2">現在の状況を観察する</choice>
<choice id="3">ストーリーを進める</choice>
</choice_group>会話を続けるにはログインしてください
Page failed to load