<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>周辺観光地 - 酒田図鑑</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
display: flex;
justify-content: center;
background: #eee;
font-family: sans-serif;
}
.screen {
width: 393px;
height: 852px;
position: relative;
background: linear-gradient(37deg, #9FE7FF 0%, #6072F8 100%);
overflow: hidden;
}
.title-wrapper {
position: absolute;
top: 115px;
width: 100%;
text-align: center;
}
.title {
font-size: 36px;
font-weight: bold;
}
.subtitle {
margin-top: 10px;
font-size: 20px;
}
.map-wrapper {
position: absolute;
left: 32px;
top: 292px;
width: 330px;
height: 330px;
border: 3px solid black;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: 0;
}
/* 下部バーとアイコン代用 */
.bottom-bar {
position: absolute;
top: 786px;
left: -13px;
width: 420px;
height: 66px;
border: 2.5px solid black;
background: white;
}
.bottom-icon {
position: absolute;
cursor: pointer;
font-size: xx-large;
text-align: center;
border-radius: 8px;
}
.icon-left {
width: 48px;
height: 48px;
left: 32px;
top: 795px;
background: gray;
}
.icon-center {
width: 48px;
height: 48px;
left: 171px;
top: 795px;
background: gray;
}
.icon-right {
width: 48px;
height: 48px;
left: 293px;
top: 795px;
background: gray;
}
</style>
</head>
<body>
<div class="screen">
<!-- タイトル -->
<div class="title-wrapper">
<div class="title">周辺観光地</div>
<div class="subtitle">
ミッションに関係する場所を表示します
</div>
</div>
<!-- Google Map（APIキー不要） -->
<div class="map-wrapper">
<iframe
src="https://www.google.com/maps?q=山形県酒田市&z=13&output=embed"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<!-- 下部バー -->
<div class="bottom-bar"></div>
<!-- アイコン代用 -->
<button class="bottom-icon icon-left" onclick="location.href='mission.html'">⚔</button>
<button class="bottom-icon icon-center" onclick="location.href='tabibito.html'">📕</button>
<button class="bottom-icon icon-right" onclick="location.href='kanko.html'">📍</button>
</div>
</body>
</html>
