@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: linear-gradient(180deg, rgba(184, 255, 189, 1), rgba(110, 241, 255, 0.2)),url(../images/bg_ill.jpg);
  background-size: cover;
background-repeat: no-repeat;
    background-position: center;
}



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: 640px; display: block; margin:20px auto;}



p{margin: 1em;}

#about{width: 100%; height:auto; max-width:840px; margin:1em auto; display: flex; justify-content: center; align-items: center;}


@media (max-width: 480px){
#about{display: block;}
}

#about img{display: block;}
.candy{width:85%; height:auto; max-width:320px; margin:auto;}

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

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

#list{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{text-align: center; 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;}     
}


.tobikiri{padding:3px 16px; display:block; background: #fff466; border-radius: 16px; font-size:1.2rem; text-align: center; width:80%; margin:auto;}


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