<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/reset.css">
</head>
<style>
section#home{height:100vh; }
h2{width:327px; position:sticky; top: 60px;}
h2 img{width: 100%; vertical-align: top;}
header{position:fixed; width:100%; height: 60px; background:#141e3c; z-index: 999;}
section{display: flex; align-items: flex-start;}
section:nth-child(n+2){width: 1200px; margin: auto; border: 1px solid #000;}
.contents{height: 150vh; background: #ccc; width: 873px;}
section:nth-child(even) .contents{background:yellow}
section:nth-child(odd) .contents{background:green}
</style>
<body>
<header>
</header>
<div class="wrap">
<section id="home">
<h2></h2>
</section>
<section>
<h2><img src="img/home_main_button_yyd.png" title="#"></h2>
<div class="contents"></div>
</section>
<section>
<div class="contents"></div>
<h2><img src="img/home_main_button_banpo.png" title="#"></h2>
</section>
<section>
<h2><img src="img/home_main_button_ddp.png" title="#"></h2>
<div class="contents"></div>
</section>
<section>
<div class="contents"></div>
<h2><img src="img/home_main_button_cgc.png" title="#"></h2>
</section>
<section>
<h2><img src="img/home_main_button_banpo.png" title="#"></h2>
<div class="contents"></div>
</section>
<section>
<div class="contents"></div>
<h2><img src="img/home_main_button_season_oil_tank.png" title="#"></h2>
</section>
<section>
<h2><img src="img/home_main_button_cm.png" title="#"></h2>
<div class="contents"></div>
</section>
</div>
</body>
</html>
