@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700;800&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');



body{
font-size:16px;
line-height:1.6;
font-family:'Zen Kaku Gothic New', sans-serif,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo; margin:0;
padding:0;
color:#333;
background: #C7DBC1;
background-image: url(../images/bgptn.png);
background-image: image-set(url(../images/bgptn.png) 1x, url(../images/bgptn@2x.png) 2x);
background-image: -webkit-image-set(url(../images/bgptn.png) 1x, url(../images/bgptn@2x.png) 2x);
}



a {
  text-decoration: none;
  color: #0625a1; transition: all 300ms 0s ease;
}

a:hover{position:relative;
top:1px;
}



.pc{display: block;}
.smp{display: none;}

@media (max-width: 480px){
.pc{display: none;}
.smp{display: block;}
body{font-size:14px;}
}

section,article{margin:0;　padding:0; box-sizing: border-box;}
h1,h2,h3,h4,h5{margin:0; padding:0; font-weight:700;}
header{padding:0; margin:0; box-sizing: border-box;}

#top{margin:120px auto 0 auto;}

#top img{width:100%; height:auto; max-width: 780px; display: block; margin:20px auto 0 auto;}



p{margin: 1em;}

#about, #books, #list{width:90%; height:auto; max-width:840px; margin:1em auto 6em auto; background:#fff; 
padding:0; border:solid 1px #704D00;
}
#about img{display: block;}
#about .item{display: block; width:90%; max-width:300px; height:auto; margin:1em auto;}

#about h2, #books h2, #list h2{text-align: center; padding:0; height:80px; margin:0 0 1em 0;
background: url(../images/frame.png)  no-repeat top center / cover ;
background-image: image-set(url(../images/frame.png) 1x, url(../images/frame@2x.png) 2x);
background-image: -webkit-image-set(url(../images/frame.png) 1x, url(../images/frame@2x.png) 2x);}

#about h2 img, #books h2 img, #list h2 img{display: block; margin:-20px auto 1em auto; width:90%; max-width: 350px; padding: 0;}
#about p{padding:1em;}
.attention{font-size:.8rem; padding:1em 0;}

#books > div img{display: block; width:120px; height:auto; margin-bottom:10px; float:left;}

@media (min-width: 480px){
    #about h2, #books h2, #list h2 {height:120px;}
#books > div{display: flex; flex-wrap: wrap; justify-content:center; align-items: flex-start;}
#books article{width:340px;} 
#books > div img{width:160px;}
}

#books article{margin:10px 15px; padding:10px; display: block; clear:both;}

.bookstitle{font-weight: bold; color:#DE0048; margin-bottom:12px; font-size:1.1em;}


.booksauther span, .booksill span{font-size:11px; margin-left:10px;}


#list ul, #list li{margin:1em; padding:0; list-style: none;}
#list li{display: inline-block; margin:.5em 1em; padding:2px 12px; background: #E4E8C8; border-radius: 14px;}




.copyright{text-align: center; font-size:12px; margin-top:3em;}





.share-button{display: flex;
    justify-content: center;
    margin:2vw auto;
    background: transparent;
}

.caption{font-size:12px;}


/*page-top リンクの形状*/
#page-top a{

	background-color:rgb(255 255 135 / 0.8);

}

#page-top a:hover{
	background: rgb(255 255 135 / 1);
}