<style type="text/css">

/*
.cover{
position:relative;
bottom:100vh;
left:100vw;
z-index:2;
}
*/

.cover{
position:relative;
z-index:2;
   
  /* 画像を常に天地左右の中央に配置 */
background-position: center center;
   
  /* 画像をタイル状に繰り返し表示しない */
background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
background-color: #464646;
}

.name{
position:absolute;
color:tomato;
font-size:45px;
left:45px;
top:45%;
z-index:3;
}

.introduction{
background-color:rgba(0,0,0,0.5);
color:white;
font-size:12px;
height:auto;
width:57%;    
padding:60px 60px 60px 60px;
text-align:left;
position:absolute;
bottom:150px;
right:0px;
z-index:4;
}

.footnote{
position: absolute;
bottom:0;
z-index:5;
background-color:black;
font-size:12px;
color:white;
width:100vw;
padding:20px;
margin:0;
text-align:center;
}

.work{
top:100vh;
position:absolute;
margin:0;
z-index:1;
}

.oddnumber{
text-align:center;
margin:0px; 
padding: 150px; 
background-image: linear-gradient(To Bottom, #fdfcfb 0%, lightgrey 80%);
z-index:1;

}
    
.evennumber{
text-align:center;
margin:0px; 
padding: 150px; 
background-image: linear-gradient(To Bottom, #fdfcfb 0%, lightgrey 80%);
} 

img.img1{
margin:0px;
}

img.img2{
margin:10px;
}

img.img3{
margin:40px;
}

p{
text-align:left;
padding:20px;
}

ul {
list-style-type: none;
margin:0;
padding:0;
overflow: hidden;
background-color:black;
width:100%;
position:fixed;
z-index:6;
text-align:center;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

li {
float:left;
}


li a {
display:block;
color: snow;
text-align: center;
padding:24px 26px;
text-decoration:none;
}

li a:hover:not(.active){
background-color:#a9bce2;
}

body{
padding:0;
margin:0;
}

</style>