<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<title>テストページ</title>
</head>
<body>
<!-- header -->
<header id="header">
<h1 class="site-title">
<a href="#">test page</a>
</h1>
<nav>
<ul>
<li><a href="#first">first</a></li>
<li><a href="#second">second</a></li>
<li><a href="#third">third</a></li>
</ul>
</nav>
</header>
<!-- Map -->
<section class="wrapper">
<iframe width="100%" height="300px" frameborder="0" allowfullscreen allow="geolocation" src="//umap.openstreetmap.fr/ja/map/map_896534?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=undefined&captionBar=false&captionMenus=true"></iframe><p><a href="//umap.openstreetmap.fr/ja/map/map_896534?scaleControl=false&miniMap=false&scrollWheelZoom=true&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=undefined&captionBar=false&captionMenus=true">フルスクリーン表示</a></p>
</section>
<!-- first -->
<section id="first" class="wrapper">
<h2 class="sec-title">takarasagashimap</h2>
<div class="flexbox">
<div><img src="canvas.png" alt=""></div>
<ul>
<li>aaaaaaaaaa</li>
<li>iiiテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ul>
</div>
</section>
<!-- second -->
<section id="second" class="wrapper">
<h2 class="sec-title">小見出し2</h2>
<div class="flexbox">
<div><img src="hiking.jpg" alt=""></div>
<ul>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ul>
</div>
</section>
<!-- third -->
<section id="third" class="wrapper">
<h2 class="sec-title">小見出し3</h2>
<div class="flexbox">
<div><img src="hiking.jpg" alt=""></div>
<ul>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ul>
</div>
</section>
</body>
</html>
