@charset "UTF-8";
/* CSS Document */





.diary_body img{
display: block;
margin: 0 auto;
opacity: 1;
}

.diary_body h2{
display: block;
text-align: center;
margin: 0;
background-color:#f5f5f5;
border-top: 1px solid #ccc;
padding:  30px 0; 
}





.content{
display: block;
width: 90%;
margin: 0 auto;
}


.box1:after{
content:"　toppics!";
font-size: 1.2em;
font-family: 'Staatliches', cursive;
}






.diary_top{
text-align: center;
margin:  100px auto;
    width: 60%;

padding:  30px 0;
border-bottom: solid 1px #000;
}

.diary_top p{
line-height: 1.5em;
font-size: 10;
}


.diary_top a{
color: #000;
}



.custom-btn{
cursor: pointer;
background-color: #000;
color: #fff;
border: none;
padding: 10px 50px;
margin: 30px 0;
border-radius: 5px;
}




.area{

display: block;
margin: 0 auto;
padding-top: 200px;
width: 60%;

}


.area div:first-child{
position: relative;
height: auto;   
border: 1px solid #ccc;

}











.page-link{
padding: 0;
margin: 0;
display: flex;
justify-content: center;
margin-top: 2.5em;
}



.page-link  a{
display: block;
width: 100px;
text-decoration: none;
text-align: center;
padding: 10px 0px;
margin: 0 70px;
border: 1px solid #007FC9;
color: #007FC9;

}

.page-link a:last-of-type{
display: block;
color:#EB383B;
border: 1px solid #EB383B;
}




.page-link li a:hover{
color: #06233E;
box-shadow: 0.5px 1px 3px #82A7B6 inset;
background-color: #fff;
opacity: 0.8;
}



@media (max-width: 1400px){


    
.diary_top{
    width: 80%;
}
    

.area{
width: 80%;
}




}




@media (max-width: 800px){

.diary_body h2{
font-size: 0.8em;
}


.page-link  a{

padding: 10px;


}






}