* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Noto Serif JP', serif;
}

.wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

header {
    margin-top: 0px;
    margin-bottom: 50px;
}

header nav {
    position: absolute;
    position:fixed;
    line-height:150%;
}

header ul {
    display: flex;
    margin: 0;
    padding: 10px;
    margin-bottom: 150px;
}

.top {
    font-size: 12px;
    color: #888888;
    text-decoration: none;
}

.top:hover {
    color:#323232;
}

.black{
    color:#323232;
}

.box {
    margin-bottom:15px;
    margin-right: auto;
    margin-left: auto;
    width: 85%;
}

.essay{
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

.firsth1{
    margin-top:0px;
    margin-bottom:20px;
    font-size:20px;
    color:#000000;
}

h1 {
    margin-top:150px;
    margin-bottom:20px;
    font-size:20px;
    color:#000000;
}

p {
    font-size:14px;
    line-height:2.5;
    color:#323232;
}

.date{
    font-size: 12px;
    text-align:right;
    margin-top:15px;
}

.datelast{
    font-size: 12px;
    text-align:right;
    margin-top:15px;
    margin-bottom:180px;
}

.link {
    text-decoration: underline;
    font-size: 14px;
    color: #888888;
    padding-bottom: 1px;
    margin-top:10px;
}

.link:hover {
    text-decoration: none;
    color: #000000;
}

@media screen and (max-width: 700px) {
    h1{
        font-size:20px;
    }

    .wrapper{
        width:100%;
    }
    .setumei{
        font-size:15px;
        margin-left:4px;
        line-height: 2.0;
    }
    .image_a{
        width:100%;
    }
    .image_b{
        width:100%;
    }
    .nomble{
        font-size:12px;
    }
    nav{
        display:none;
    }
}

@media screen and (max-width: 700px) {
    .firsth1{
        font-size:20px;
    }
    .first{
        font-size:20px;
    }
    
    p{
        font-size:15px;
        line-height: 2.2;
    }
    
    .date{
        10px;
    }
    .essay{
        width:90%;
    }
    
    .kaigyou{
        display:none;
    }
    
  
 

}

@media screen and (min-width: 700px) {
    .kaigyou2{
        display:none;
    }
    h1{
        margin-top{
            100px;
        }
    }
    
 
    
}