@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: #c7e8fb;
}




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



p{margin: 1em;}

#about{width: calc(100% - 10px); max-width:740px; margin:2em auto; box-sizing: border-box;}

#about > div {
    position: relative;
    padding:1em 1.5em;
    background: #fff;   
}
#about > div:before,#about > div:after{ 
    content:'';
    width: 16px;
    height: 16px;
    position: absolute;
    display: inline-block;
}
#about > div:before{
    border-left: solid 1px #004fa4;
    border-top: solid 1px #004fa4;
    top:0;
    left: 0;
}
#about > div:after{
    border-right: solid 1px #004fa4;
    border-bottom: solid 1px #004fa4;
    bottom:0;
    right: 0;
}
#about > div p {
    margin: 0; 
    padding: 0;
}

.button {
  color: #fff;
  padding: 1em 1.5em;
  display: block;
  border-radius: 50px;
  text-align: center;
  background-size: 180% auto;
  transition: all .3s ease-out;
  width:12em;
margin:2em auto;
}
.button:hover {
  background-position: right center;
}
.gradient {
  background-image: linear-gradient(to right, #ffb5ff 0%, #4ecbff 100%);
}

#review{max-width: 900px; margin:2em auto;}
#review article{margin:3em auto;}

#review article img{display: block; height:auto;}

.review_txt{font-size:16px;}
.h_review{max-width:350px;}

.profile{width:300px; margin:auto;}
.photo{width:100%;}

.profile > div {
    position: relative;
    font-size:12px;
    padding:1em 1.5em;
    margin:1em 0;
}
.profile > div:before,.profile > div:after{ 
    content:'';
    width: 16px;
    height: 16px;
    position: absolute;
    display: inline-block;
}
.profile > div:before{
    border-left: solid 1px #004fa4;
    border-top: solid 1px #004fa4;
    top:0;
    left: 0;
}
.profile > div:after{
    border-right: solid 1px #004fa4;
    border-bottom: solid 1px #004fa4;
    bottom:0;
    right: 0;
}
.profile > div p {
    margin: 0; 
    padding: 0;
}

.profile span{font-size:16px}

.profile .sns{ color: #fff;
  padding: 2px 8px;
  display: inline-block;
  border-radius: 16px;
  text-align: center;
  background-size: 180% auto;
  transition: all .3s ease-out;
  margin:5px 5px 0 5px;
}
.profile .sns:hover {
  background-position: right center;
}


@media (min-width: 480px){
#review article{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between}
.review_txt{width:calc(100% - 340px);}

}


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


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

.caption{font-size:12px;}


/*page-top リンクの形状*/
#page-top a{
	background-color:rgb(0 79 164 / 0.7);
}

#page-top a:hover{
	background: rgb(0 79 164 / 1);
}