ヘッダーとメインが重なる

前提

ヘッダーとメインが重なってしまい、下の文字がヘッダーのトップビューと重なってしまいます。

実現したいこと

ヘッダーのposition relatibeは変更せずに、メインを重ならないようにしたい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html

<header class="header"> <div class="container"> <div class="area-logo area-logo-header"> <h1><a href="#">創作</a></h1> </div> <nav class="nav-header"> <ul class="list-nav-header"> <li><a href="#area-news">お 知 ら せ</a></li> <li><a href="#area-sweets">商 品 の ご 紹 介</a></li> <li><a href="#shop">店 舗 の ご 案 内</a></li> </ul> </nav> </div> <!-- ./container --> <!-- トップビュー -----------------> <div class="area-top-view"> <div class="container"> <a class="botton-store" href="">オンラインストアを見る</a> </div> <!-- ./container --> </div><!-- ./area-top-view --></header> <main> <!-- お知らせ -----------------> <div class="container"> <section id="area-news"> <div class="head-news"> <h2 class="ttl"><span class="japanese">お 知 ら せ</span><span class="english">News</span></h2> </div> <dl class="news-wrapper"> <dt>2020.12.22</dt><dd>ホームページをリニューアルしました。</dd> <dt>2020.11.22</dt><dd>【季節限定】米ころんを発売いたしました。</dd> <dt>2020.8.28</dt><dd>【店舗受取】十三夜お月見団子、予約受付中です。</dd> <dt>2020.5.4</dt><dd>【春限定】桜葉が香る、春の訪れを感じる「桜どら焼き」、完売しました！</dd> <dt>2020.4.7</dt><dd>【おすすめ】 端午の節句に家族団らん！鯉のぼりと信玄餅セット、販売しました！</dd> </dl> </section><!-- area-news --></main>

css

/* ヘッダー ----------------------------------*/header { width: 100%; height: 600px; position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end;} header > .container { margin-top: 60px; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }/* ロゴ */.area-logo-header > h1{ margin-left: 60px; margin-right: 80px; }.area-logo > h1 { font-size: 40px; color: #FFFFFF; letter-spacing: 0.3em; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }/* ナビ */.list-nav-header { margin: 0 -17.5px;}.list-nav-header > li{ color: #FFFFFF; font-size: 16px; line-height: 16px; padding: 0 17.5px;}/* ボタン */.botton-store { color: #FFFFFF; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position: absolute; bottom: 30px; left: 48px; background: #FFFFFF33 0% 0% no-repeat padding-box; opacity: 0.9; height: 257px; width: 68px; outline : 1px solid #CCCCCC; /* 線の太さ・線状・色 */ outline-offset : -8px ;/* どれだけ内側に線を表示したいかを負の値で指定 */ display: flex; align-items: center; justify-content: center; letter-spacing: 1.7px;}/* トップビュー */.header { background-image: url(code-step-img/mainvisual-pcd); background-repeat: no-repeat; background-position: 80% 20%; background-size: cover; background-color: #CCCCCC; height: 100vh;} /* お知らせ ----------------------------------*/ main { background-color: #E6E2D7; }.ttl { font-size: 36px; letter-spacing: 0; font-weight: 400; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}.ttl > .english { font-size: 0.875rem;}#area-sweets > img { height: 426px; width: 639px;}

試したこと

ネットで調べたが、わからなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。