<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=393, initial-scale=1.0">
<title>あらすじ - 酒田図鑑</title>
<style>
body {
margin: 0;
font-family: "Roboto", sans-serif;
background: #000;
display: flex;
justify-content: center;
}
.screen {
width: 393px;
height: 852px;
background: linear-gradient(37deg, #9FE7FF 0%, #6072F8 100%);
display: flex;
flex-direction: column;
overflow: hidden;
}
.hero {
width: 100%;
height: 280px;
object-fit: cover;
}
.story {
flex: 1;
padding: 24px 20px;
display: flex;
align-items: center;
justify-content: center;
}
.story-card {
background: rgba(255, 255, 255, 0.85);
border-radius: 24px;
padding: 28px 20px;
text-align: center;
color: #444;
line-height: 1.6;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.story-card span {
color: #F8C525;
font-weight: 600;
}
.story-card .title {
font-size: 22px;
margin-bottom: 12px;
}
.story-card .text {
font-size: 16px;
}
.start {
padding: 24px;
}
.start button {
width: 100%;
height: 60px;
border-radius: 50px;
border: none;
font-size: 24px;
font-weight: 700;
letter-spacing: 2px;
background: #fff;
color: #000;
cursor: pointer;
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
transition: transform 0.1s, box-shadow 0.1s;
}
.start button:active {
transform: translateY(2px);
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
</style>
</head>
<body>
<div class="screen">
<img class="hero" src="logo.png" alt="酒田図鑑">
<div class="story">
<div class="story-card">
<div class="title">
ここは酒田の街
</div>
<div class="text">
あなたは<br>
<span>“記憶のかけら”</span>を集める旅人。<br><br>
ミッションを受け、街を巡り、<br>
写真でその証を残せ。<br><br>
冒険は、今始まる。
</div>
</div>
</div>
<div class="start">
<button onclick="location.href='mission.html'">GO!!</button>
</div>
</div>
</body>
</html>
