@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');


* {
  box-sizing:border-box;
}


body{
font-size:16px;
line-height:1.6;
font-family:'Kiwi Maru', sans-serif,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo; margin:0;
padding:0;
color:#472B0D;
background: #fff;
background-image:image-set(url(../images/bg_ptn.jpg) 1x, url(../images/bg_ptn_2x.jpg) 2x)
}


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

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



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

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

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



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

p{margin:0.5em 0; padding:0;}

header{}


h1 .header_cover{width:100%; display: block; height:auto; max-width:1280px; margin:0 auto;}

h2{font-size:1.2em; line-height: 2em; margin:1rem auto; padding:1rem;  max-width:780px;}
h2 span{background: #F5EF5C; padding:2px;}
h2, h3, h4, h5{font-weight:500;}


section{width:100%;}
.txtsmall{font-size:80%;}

.introduction div{background: #F5EF5C; width:100%; margin:-10px 0 0 0; padding:0;}
.introduction p{max-width:780px; margin:0 auto; padding:2em 1em 0 1em;}

.books{max-width:780px; margin:0 auto;}
.bookstitle{width:calc(100% - 20px); max-width:500px; margin:20px auto; display: block;}


.books > div{width:calc(100% - 20px); max-width:320px; margin:0 auto; padding:0;}
.books > div img{width:100%; display: block; height:auto; margin:0 auto;}


.eventinfo{background: #F5EF5C; width:100%; margin:-10px auto 0 auto; padding:0;}

.eventinfo h4 img{width:calc(100% - 20px); max-width:510px; display: block; margin:0 auto; padding:1em 0 0 0;}

.event_main{width:100%; height: auto; display: block; max-width:1024px; margin:0 auto;}

.speech{display: flex; align-items: center; margin: 0 auto 3em auto; width:calc(100% - 20px); display: none; }

.speech div {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 20px;
  border-radius: 30px;
  background-color: #ffffff;
  text-align: center;
  font-size:1.2em;
}

.speech div::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 6px 0 6px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}



.eventinfo p{padding:0.5rem 1rem;
    max-width:780px; margin:0 auto;}

.eventinfo p .mark{color:#fff; background: #5E9162; padding:3px 1rem; display: inline-block; border-radius: 16px; margin-bottom:10px;}

a.event-fuji{background: #5E9162; color:#fff; width:calc(100% - 20px); max-width:780px; text-align: center; display: block; margin:1em auto 0 auto; border-radius: 20px; padding:1em;}

a.event-fuji i{color:#F5EF5C; margin-left:20px;}


.storeinfo h5 img{width:calc(100% - 40px); max-width:380px; display: block; margin:2em auto;}

.storeinfo a{background: #F5EF5C; color:#5E9162; width:calc(100% - 20px); max-width:780px; text-align: center; display: block; margin:1em auto; border-radius: 20px; padding:1em; font-size:20px;}

.storeinfo a i{margin-left:20px;}

.storeinfo a span{color:#fff; font-size:0.8em; background:#5E9162; padding:2px 8px; border-radius: 8px; display: inline-block}

.store{text-align: center; color:#5E9162; border-radius: 28px; border:solid 2px #F5EF5C; background: #fff; padding:12px; width:calc(100% - 20px); max-width:780px; margin:0 auto 1em auto; font-size:20px;}

.tokuten{display: block; border:solid 1px #666; width:180px; height:auto; margin:10px auto;}




@media (min-width:780px){
}









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

/*　footer　*/

footer {
color:#000;
margin-top:120px;
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(94 145 98 / 1);
  opacity: .8;
    border-radius: 6px;
  width: 60px;
  height: 60px;
  border: none;
  color: rgb(245 239 92 / 1);
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:2rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: rgb(94 145 98 / 1);
    color: rgb(255 255 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;
}