@charset "utf-8";
 
html,body,h1,p,ul,li{
margin:0;
padding: 0;
line-height: 1;
list-style: none;
font-family: sans-serif;
}
a{
text-decoration: none;
color:inherit;
}
body{
    background:url(../img/drop.gif) no-repeat right center/cover;
    background-blend-mode: hard-light;
} 


.container{
max-width:1200px;
height: 100vh;
margin: 0 auto;
position: relative;
}

/* ヘッダー */
header{
width: 40em;
height: 7em;
background: rgba(169, 170, 235, 0.6);
padding: 1em 2em;
/* 縦方向中心 */
position: absolute;
top:0;
bottom: 0;
left: 16px;
margin: auto;

} 

h1{
    font-size: 65px;
    font-family: 'Playfair Display', serif;
    margin-bottom: 10px;
}
 
/* Navigation */
.spnav,.btn{
    display: none;
}

.pcnav{
    position: absolute; 
    top: 1em;
    right: 1em;
}

.pcnav ul{
  display:flex;
}

.pcnav li{
    font-size: 1.5em;
    color:rgb(16, 9, 126);
    margin-left: 1em;
 }  

.pcnav a{
background: rgba(176, 224, 246, 0.6);
padding: 0.2em 0.5em;
}
.pcnav a:hover{
color: rgb(255, 255, 255);
background-color: rgb(77, 71, 161);

}
 
/* Footer */
footer{
    font-size: 1.5em;
    background: rgba(36, 38, 192, 0.6);
    position: absolute;
    bottom:1em;
    right: 1em;
    padding: 0 1em;
    }