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


* {
  box-sizing:border-box;
}


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:#fff;
height:100%;

background: url(../images/bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


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

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



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

@media (max-width: 780px){
.pc{display: none;}
.smp{display: block;}  
}

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



section,article{margin:2em 0;　padding:0; display: block;}
h1,h2,h3,h4{margin:0; padding:0;}

h1 img, h2 img, h3 img, h4 img{display: block; margin:auto;}


section{width:100%; max-width:780px; margin:0 auto; box-sizing: border-box;}
.txtsmall{font-size:80%;}



.contents{width:100%; max-width:780px;
margin:0 auto; padding:0; 
}

.jf_ill03, .jf_ill04, .jf_ill05{display:block; position:fixed;  height:auto; z-index: 100}

.jf_ill01, .jf_ill02, .jf_ill06{display:block; position:fixed;  height:auto; z-index: -100}


.jf_ill01{display:block; width:160px; height:auto;
top:-2%; left:-80px;}

.jf_ill02{display:block; width:120px; height:auto;
top:10%; left:85%;}

.jf_ill03{display:block; width:110px; height:auto;
top:25%; left:-60px;}

.jf_ill04{display:block; width:60px; height:auto;
top:50%; left:90%;}

.jf_ill05{display:block; width:180px; height:auto;
top:80%; left:-70px;}

.jf_ill06{display:block; width:200px; height:auto;
top:40%; left:90%;}


@media (min-width: 780px){
    
.jf_ill01{width:240px; left:12%;}
.jf_ill02{width:140px; left:80%;}
.jf_ill03{width:140px; top:30%; left:10%;}
.jf_ill04{left:78%;}
.jf_ill05{width:200px; top:85%; left:10%;}
.jf_ill06{top:60%;}
    
}



.shake {
    	animation: 
		floating-y 6s infinite alternate ease-in-out,
		floating-x 10s infinite alternate ease-in-out,
		floating-rotate 6s infinite alternate ease-in-out,
        size 6s infinite alternate ease-in-out;
   
}

.shake2 {
	animation: 
		floating-y2 12s infinite alternate ease-in-out,
		floating-x2 3s infinite alternate ease-in-out,
		floating-rotate2 3s infinite alternate ease-in-out,
    size 6s infinite alternate ease-in-out;
}

/* ふわふわ1 */
@keyframes floating-y {
	0% { translate: 0 -20px; }
	100% { translate: 0 20px; }
}

@keyframes floating-x {
	0% { transform: translateX(-10px); }
	100% { transform: translateX(10px); }
}

@keyframes floating-rotate {
	0% { rotate: -5deg; }
	100% { rotate: 5deg; }
}

@keyframes size{    
	0% { transform:scaleY(0.8); }
	100% { transform:scaleY(1); } 
}


/* ふわふわ2 */
@keyframes floating-y2 {
	0% { translate: 0 -40px; }
	100% { translate: 0 40px; }
}


@keyframes floating-x2 {
	0% { transform: translateX(-5px); }
	100% { transform: translateX(8px); }
}


@keyframes floating-rotate2 {
	0% { rotate: -3deg; }
	100% { rotate: 5deg; }
}

@keyframes size{    
	0% { transform:scaleY(0.8); }
	100% { transform:scaleY(1); } 
}


header{margin:0 auto; padding:0; display: block; 
padding:2em 0;}

header h1{margin:0 auto 1em auto; padding:0;}
header h1 img{width:calc(100% - 20px); max-width:720px; height:auto}

#present, #books{padding:2em 0;}

#present h2{margin:0 auto;}
#present h2 img{width:calc(100% - 40px); max-width:540px; height:auto; display: block; margin:0 auto;}

.present_item{width:calc(100% - 40px); max-width:680px; height:auto; display: block; margin:0 auto;}

#present p{margin:1em auto; padding:2em;}


/*対象店舗*/

#list{padding:2em 1em}

@media (min-width: 780px){
#list{padding:2em}
}
    
#list h3 img{width:calc(100% - 60px); max-width:300px; height:auto; display: block; margin:0 auto;} 

.storelist{border: solid 1px #fff; border-radius: 16px; margin:1.5em 1em; padding:5px; font-size:1.4em}

.storelist ul{margin:0; padding:1.5em; background: #fff; border-radius: 13px; }

.storelist p{text-align: center; color:#6face3;}

/*新刊*/


#books{padding:1em 1em 4em 1em}

@media (min-width: 780px){

#books{padding:2em 2em 6em 2em}
    
    }

#books h4 img{width:calc(100% - 60px); max-width:300px; height:auto; display: block; margin:0 auto;}

.bookcover{width:80%; height:auto; display: block; margin:0 auto; max-width:300px;}

#books p{margin:0; padding:20px;}

#books .title{font-size:1.5em; line-height: 1.3em; color:#6face3; padding:2rem 1rem 1rem 1rem;}

#books .auther, #books .price{
    display: inline-block; 
    font-size:1em; padding:0.5rem 1rem;}

#books .auther{font-weight: 700;}
#books .price{font-weight: 400; }



.btn_buy a {
    background: #6face3;
    border-radius: 6px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 1em auto;
    max-width: 300px;
    padding: 10px 25px;
    color: #2a3751;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.btn_buy a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn_buy a:hover {
  background: #fff;
  color: #2a3751;
}
.btn_buy a:hover:after {
  right: 1.4rem;
}








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

/*　footer　*/

footer {
color:#000;
margin-top:80px;
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:3rem auto;
    background: transparent;
}

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


/*page-top リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(169 235 255 / 1);
  opacity: .8;
    border-radius: 32px;
  width: 60px;
  height: 60px;
  border: none;
  color: rgb(44 67 143 / 1);
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:2rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: rgb(44 67 143 / 1);
    color: rgb(169 235 255 / 1);
}

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

/*　左の動き　*/

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

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

/*　右の動き　*/

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


.inview.fadein {
	opacity: 0;
	transition-duration: .5s;
}
.inview.fadein.active {
	opacity: 1;
}

.inview.fadeup {
	opacity: 0;
	transition-duration: .8s;
	transform: translateY(30px);
}
.inview.fadeup.active {
	opacity: 1;
	transform: translateY(0px);
}

.inview.fadeleft {
	opacity: 0;
	transition-duration: .5s;
	transform: translateX(-50px);
}
.inview.fadeleft.active {
	opacity: 1;
	transform: translateX(0px);
    transition-delay: .5s;
}





/* -- SVG CSS -- */


.row{
  width:100%;
  padding:0;
  margin:0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position:relative;
 background-color:#2a3751;
}

.svg-separator{
  display: block;
  background: 0 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  -webkit-transform: translateY(-100%) translateY(2px);
  transform: translateY(-100%) translateY(2px);
  width: 100%;
}
.svg-separator.bottom{
  top: auto;
  bottom: 0;
}



/* -- Row BG Color -- */

.light-grey{background-color:#ecf0f1;}
.dark-blue{background-color:#2a3751;}