@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:#003258;
background: #b6e4ff;
background-image: url(../images/bg.png);
}



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;}


p{margin: 1em;}

#about img, #item img{display: block;}

#item{width:calc(100% - 2em); max-width:840px; margin:1em auto; text-align: center;}
#item img{display: block; width: 80%; height:auto; margin:auto; padding:1em;}
.book_item{max-width:320px;}
.eraser{max-width: 380px;}

@media not all and (max-width: 768px){ 
    #item{display: flex; align-items: flex-start; justify-content: center;}
}

#list h2{text-align: center; padding:.5em 0; color:#ff278e;}

#list, #about{width:90%; max-width:840px; border-radius: 16px; background: rgba(255,255,255, 0.6); margin:2em auto; padding:1em;}

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

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




.books h3{font-size:1.5em; line-height: 1.3em; color:#009abe; padding-top:1rem;}

.books h4,.books h5,.books h6{ display: inline-block; font-size:1em;
padding:.2em 0;}

.books h4, #newrelease h5{font-weight: 700;}
.books h6{font-weight: 400;}

.books {
display: flex; /* 横並び */
flex-direction: column;
margin:2rem auto;
width:100%;
max-width:780px;
width:90%; max-width:840px; border-radius: 16px; background: rgba(255,255,255, 0.6); padding:1em;
}

.books>div {
display: contents; 
}
.books p{margin:1em 0;}

@media not all and (max-width: 768px){   
.bookcover{margin:0;}    
.books{
justify-content: space-between; 
align-items: flex-start;
flex-wrap: wrap;
flex-direction:row;
}  
.books h4,.books h5,.books h6{margin-right:1em;
padding:1em 0;}
    
.books>div {
display:block;
width:65%;
    } 
.books p{margin:0 0 1em 0;}

.books .link a.btn__sample, .books .link a.btn__buy{width:180px; margin-right:.5em;}     
}



/*　footer　*/

footer {
color:#999;
margin-top:3vw;
padding: 20px 0;
}

footer .footer__copy {
    text-align: center;
    font-size: 12px;
}

footer .footer_link {
    margin: 10px 0;
}

footer .footer_link ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: -10px;
}

footer .footer_link ul li {
    list-style: none;
}

footer .footer_link ul li:not(:first-child)::before {
    content: "｜";
}



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

.caption{font-size:12px;}


/*page-top リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(6 37 161 / 0.8);
  opacity: .8;
  width: 50px;
  height: 50px;
  border: none;
  color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:2rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: rgb(6 37 161 / 1);
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 999;
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}