body {
    font-family: Comic Sans MS,Arial, sans-serif, あくあフォント;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh; /* 画面全体の高さ */
    
}

header {
background: #fff;
color: #000;
padding: 10px 50px;
height : 45px;
text-align: left;

}

header ul {
list-style: none;
padding: 0;

}

header ul li {
display: inline;
margin: 0 15px;
}

header ul li a {
color: #fff;
text-decoration: none;
}
main {
/* 背景画像を指定 */   
background-image: url('https://ironpotato.jp/img/sr311.jpg');
/* 背景画像を繰り返さない */    
background-repeat: no-repeat;
/* 画像を要素全体に拡大・縮小してフィット */
/*background-size: calc(100vh - 60px - 40px);*/
background-size: contain;
/* 画像の位置を中央に */
background-position: center;
/* 背景を固定（スクロールしても動かない）*/ 
background-attachment: fixed;
/*main の高さを確保（例: 100vh = 画面の高さ）*/
min-height: 50vh;
top: 250px;
flex: 1; /* 残りの高さを自動割り当て */
overflow: auto;
/*height: 400px; /* 固定高さ */
padding: 0px;
}

footer {
background: #2b06cc;
color: #fff;
text-align: center;
padding: 0, rem1;
/*display: flex;*/
}