@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:#5F4533;
background-color:#C3DFE5;
background-image:url(../images/bg.jpg);
}



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 50px auto;}

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



p{padding: 1em;}


h2 img{display: block; width:90%; height:auto; max-width:480px; margin:3em auto 0 auto;}

#about{width:90%; height:auto; max-width:680px; margin:-1em auto 1em auto; background: #F4F1D3;  border-radius: 16px;
padding:2em 1em 1em 1em;}

.caption{font-size:12px; text-align: left; width: 100%; height:auto; max-width:600px; margin:0 auto; padding:0 1em; box-sizing: border-box;}


#about img{display: block;}


#about .item {display: flex; justify-content: center; align-items: center;}
#about .item img{width:90%; height:auto; margin:15px auto;}
#about .item img.item01{width:50%; max-width:300px; height:auto; border-radius: 12px;}
#about .item img.item02{width:40%; max-width:250px; height:auto;}

@media (max-width: 480px){

}


#list h3{text-align: center; padding:12px 20px; color:#fff; background: #E56559; display: block; border-radius: 16px; width:200px; margin:-3em auto 0 auto; line-height: 1;}

#list{width:90%; max-width:840px; border-radius: 16px; background: #fff; margin:5em auto 2em auto; padding:1em; border:solid 3px #E56559;}

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

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





.books h3{font-size:1.5em; line-height: 1.3em; color:#E56559; 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%;
width:90%; max-width:840px; border-radius: 16px; background: #E1EDEF; 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-around; 
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;
}



/*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);
  }
}