グローバルナビをクリック時、文字が動く

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTMLとCSSを使用したポートフォリオサイトを制作しております。
最上部にnavタグで囲ったメニューボタンを作ったのですが、クリックしてページに移動した時に、
本来配置してある場所より上から出てくるような動きになってしまいます。
（上からビヨーンと定位置に戻るイメージです。）

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

エラーメッセージ

該当のソースコード

<<HTML>>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>愛知県 | 見立てイラストレーター 若宮ツナ</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- header -->
    <header class="header">
        <div class="header-inner">
            <nav class="header-nav">
                <ul class="nav-list">
                    <li class="nav-item"><a href="index.html">トップ</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="profile.html">わたしについて</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="illust.html">オリジナルイラスト</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="work.html">制作実績</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="flow.html">制作の流れ</a></li>
                    <li class="nav-item">/</li>
                    <li class="nav-item"><a href="#contact">お問い合わせ</a></li>
                </ul>    
            </nav>
        </div>
    </header>
    <!-- //header -->

    


<<css>>
/*---------------------------------------------*/
/*base*/
/*---------------------------------------------*/

*{
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-size: 1.2rem;
    letter-spacing: .1em;
    color: #636363;
}

img{
    width: 100%;
    vertical-align: bottom;
}

li{
    list-style: none;
}

.section-wrapper{
    padding: 100px 0 70px;
}

.section-inner{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

a{
    text-decoration: none;
    color: #636363;
}

/*---------------------------------------------*/
/*base*/
/*---------------------------------------------*/


/*---------------------------------------------*/
/*header*/
/*---------------------------------------------*/

.header{
    padding: 60px 0;  
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    transition: 0.5s;  
}

.header-inner{
    margin: 0 auto;
    max-width: 1200px;
}

.header-nav{
    width: 100%;
}

.header a{
    color: #636363;
    transition: 0.5s;
}

.header a:hover{
    color: #f4617c;
}

.nav-list{
    text-align: center;
    display: flex;
    justify-content: center;
}

.nav-item{
    margin-right: 30px;
    display: inline-block;
}

.nav-item a{
    font-size: 1.2rem;
}

.nav-item:last-child{
    margin-right: 0;
}

/*---------------------------------------------*/
/*header*/
/*---------------------------------------------*/

試したこと

グーグルフォントを使っていたので、その読みこみ時に起こるFlash Of Unstyled Text (FOUT)
という現象が原因かと思いグーグルフォントを消したのですが、現象は変わりませんでした。

reset.cssをリンクしたのが原因かと思いコメントアウトしてみたのですが変化なしでした。

どうぞご回答宜しくお願い致します。

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

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

omori3

2020/05/11 14:05

動きが再現できなかったんですが、移動後のページのhtml/cssも添付いただければ確認します。

58design

2020/05/11 14:18

大変申し訳ございません。移動後のページのhtml、cssを全てまとめた圧縮ファイルです。経験が浅くご迷惑おかけして申し訳ございませんが、圧縮解凍していただきご確認して頂けると幸いです。 https://18.gigafile.nu/0518-b1711d55e657e33ca6b2d055e7960956f

omori3

2020/05/11 14:29

ダウンロードしました！ありがとうございます。