@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;
background-image: url(../images/bg_flame.png),linear-gradient(0deg, #2C438F, #5B5FA2);
background-attachment: scroll, fixed;
    background-size:contain, cover;
background-repeat: repeat-y, no-repeat;
height:100%;
}


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

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



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


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


.contents{box-shadow: 0 0 10px #161A30; width:100%; max-width:780px;
margin:0 auto; padding:0; background:rgba(91 95 162 / 0.8);}

header{margin:0 auto; padding:0; display: block; background-image: url(../images/main.jpg);
background-repeat: no-repeat; background-position: top; background-size: cover; padding:2em 0; height:100vw;}

@media (min-width:780px){
    header{height:100vh;  min-height: 800px;}    
}


header h1{margin:0 auto; padding:0;}

header img{width:calc(100% - 20px); height:auto; display: block;}
header img.title_01{width:60%; max-width:330px; margin:0 auto;}
header img.title_02{width:100%; max-width:740px; margin:0 auto;}
header img.title_03{width:30%; max-width:230px; margin:0; position: relative; top:-40px; left:10px}

#flame, #howto, #books{padding:20px 0;}

#flame h2{margin:0 auto;}
#flame h2 img{width:calc(100% - 20px); max-width:620px; height:auto; display: block; margin:0 auto;}

#flame p{max-width:600px; margin:1em auto; padding:1em;}

.present{width:90%; max-width:600px; background: #A9EBFF; border-top-left-radius: 30px; border-bottom-right-radius: 30px; padding:1em; position: relative; margin:50px auto 30px auto;} 

.present img{width:100%; height:auto; display: block;}
.present img.present_01{width:70%; max-width: 320px; 
   position: absolute;
   top: -20px;
   left: 50%; transform: translateX(-50%);
}
.present h3{padding-bottom:20px;}

.present img.present_03{width:90%; max-width: 400px; margin:auto;}
.present_flame{border:solid 1px #2C438F; margin:20px auto; background: #E7F4F7; position: static; width:80%; max-width: 400px;}


#howto img{height:auto; display: block;}
#howto h4 img{width:calc(100% - 40px); max-width:360px; margin:0 auto;}
.howto_movie{width:calc(100% - 60px); max-width:360px; margin:2em auto 1em auto;}

#howto .instagram_icon, #howto .tiktok_icon{width:auto; max-height:35px; margin:20px auto;}

.tictok_effect{padding:3px 10px; border:solid 1px #A9EBFF;  
    border-radius: 6px;}

.tictok_effect a.vt{background: #A9EBFF;
    border-radius: 16px;
    padding: 0 10px;
    color: #2C438F;
    display: inline-block; margin:0 6px;
}

#howto article{background: rgb(255 255 255 /0.1); border-radius: 12px; padding:10px; margin:1em;}
#howto article div.step{margin:1em; display: flex; align-items: flex-start;}
#howto article div.step img{width:80px;}
#howto article div.step p{margin:0 1em; padding:0;}

#howto .grid{
 width: 80%; /* 伸縮する横幅 */
 max-width: 326px; /* 最大の横幅 */
 margin: auto; /* 画面の中央に配置 */;
} 

.instagram-media, .tiktok-embed{
    min-width: 100% !important;
    margin: 0 -1px !important;
    border-right: none !important;
    border-left: none !important;
}


/*新刊*/

#books{margin:20px auto;}
#books h5 img{width:calc(100% - 40px); max-width:400px; margin:0 auto; height: auto; display: block;}

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

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

#books .title{font-size:1.5em; line-height: 1.3em; color:#A9EBFF; padding:1em 0;}

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

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

#books .story{border-top:solid 1px #E7F4F7; margin-top:1em; padding-top:10px;}

#books article {
display: flex; /* 横並び */
flex-direction: column;
margin:1rem auto;
width:100%;
max-width:780px;
padding:1rem;
}
#books article>div {
display: contents; 
}



.btn_buy a {
    background: #A9EBFF;
    border-radius: 6px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 300px;
    padding: 10px 25px;
    color: #2C438F;
    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: #2C438F;
  color: #A9EBFF;
}
.btn_buy a:hover:after {
  right: 1.4rem;
}


@media not all and (max-width: 768px){   
.bookcover{margin:0;}    
#books article {
justify-content: space-between; 
align-items: flex-start;
flex-wrap: wrap;
flex-direction:row;
}  
#books .auther, #books .price{margin-right:1em;
padding:.5em 0;}
    
#books article>div {
display:block;
width:calc(100% - 240px);
} 
    
}






.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(169 235 255 / 1);
  opacity: .8;
    border-radius: 6px;
  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;
}