@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:#000;
background-image: linear-gradient(0deg, #8cd4ff, #ccecff);
height:100%;
}



#bg1, #bg2 {
	z-index:50;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/bg1.png) repeat 0 0 scroll;
    position:fixed;
}

#bg2 {
	z-index:49;
	background-image:url(../images/bg2.png);
}



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

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



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

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

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



section,article{margin:0;　padding:0;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
p{.5em 0;}

header{padding:0; margin:0; position:relative;
z-index: 100; background: rgb(255 255 255 / 80%);}

header h1{width:100%; max-width:1280px; height:auto; overflow-x: hidden; margin:0 auto;}

header img{width:100%; height:auto; display: block;}

.txtsmall{font-size:80%;}

#books{
background-color: rgb(6 125 206 / 80%);
background-repeat: no-repeat;
background-image: image-set(url(../images/books.png) 1x, url(../images/books@2x.png) 2x);
background-position: top left;
color:#fff;
padding:1.5rem;
position:relative;
z-index: 100;
}

#books h2, #audio h3, #music h4{ 
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
color:#ff0;
font-size:1.6rem;}


#books img.bookcover{display: block;
width:100%; height:auto; max-width:280px;
margin:1rem auto;
}

#books .story span{background:#ff0; color:#000; padding:1px 3px; font-weight:700; font-size:.8rem; display: inline-block; margin-bottom:.5rem;}


#audio, #music, #comment{position:relative;
    z-index: 100;
background-image: image-set(url(../images/news.png) 1x, url(../images/news@2x.png) 2x);
background-repeat: no-repeat;
background-position: top left;
}

#audio{background-color:rgb(255 255 255 / 80%);}

#audio h3{position: relative; z-index: 150; top:1.5rem; margin-left:12px;}
#audio h3 span.deco{background: rgb(16 87 167 / 100%); padding:1px 5px; line-height: 2em; }

#audio .audio_photo{display: block; width:100%; max-width:500px; position: relative; top:-160px; z-index: 120;}



#audio .audio_info{margin-top:-150px; padding:1rem;}

a.outlink{border:solid 1px rgb(16 87 167 / 100%); display: inline-block; padding:10px 20px; background: #fff;}

a.outlink img{display: block; width:auto; height:24px;}

#audio a.outlink img {height:28px;}



#music{background-color: rgb(6 125 206 / 80%);
color:#fff; padding:1.5rem; 
}
#music p.chatch{font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

#music p.chatch{font-size:1.2em;}
#music p.chatch span{font-size:1.4em;}
#music h4{line-height: 1em;
    font-size:2.2em;
    background: rgb(16 87 167 / 100%);
    padding:12px 20px 4px 20px;
    width:8em;
    text-align: center; line-height: 2rem;
margin:auto;}
#music h4 span{font-size:1rem;}
#music p.sale, #music p.cd{font-weight: 700; font-size:1.2rem;}
#music p.sale span{font-size:1.8rem;}
#music .jacket{display: block; width:100%; max-width:400px; border:solid 1px #fff; margin:auto;
box-shadow: 10px 10px 0px 0px rgb(0 0 0 / 30%);}
#music p.cd{margin-top:2rem;}
#music p.cd span{background: #fff; padding:0 5px; color:rgb(16 87 167 / 100%);}


#comment{padding:1.5rem 1.5rem 3rem 1.5rem; background-color:rgb(255 255 255 / 80%);}

#comment .container{margin:auto;}

.comment{font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400; color: rgb(16 87 167 / 100%); padding: 0 1rem; border-radius: 12px; border:solid 1px rgb(16 87 167 / 100%); 
background:rgb(255 255 255 / 90%);
display: inline-block;
position: absolute;
top:360px; box-sizing: border-box;
font-size:1.2em;
margin: 1em 2em 1em 1em;
}

#comment p{padding:6px;}

#comment p.chatch{background: #ff0;}

#comment .comment_photo{display: block; width:100%; max-width:320px; margin:1rem auto; position: relative;}




@media (max-width: 360px){
    #audio h3{font-size:20px;}
    #audio .audio_photo{top:-124px;}
    #audio .audio_info{margin-top:-110px;}
}


@media (min-width: 767px){
    #books, #audio, #music, #comment{
    } 
    
#audio .audio_info>div, #music .music_info{text-align: center;}
#music p{text-align: center;}
}



@media (min-width: 980px){

.container{
     max-width:980px; margin:0 auto;
    }
    
#audio .audio_photo{top:-125px;
   left: 250px;
}
#audio .audio_info{margin-top:-100px;}
    

a.outlink img{height:32px;}
#audio a.outlink img {height:38px;}  
    
#books .container{display: flex;
    align-items: flex-start;
    justify-content:flex-start;}

    #books .container>div{margin-left:2rem;}
    #comment .comment_photo{margin:1rem auto 1rem auto;}
    #comment .comment{position: absolute;
  left:50%;
  transform: translate(-50%);
}  
    
#comment p.chatch{
text-align: center;}

}



.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(255 255 0 / 0.9);
  opacity: .8;
  width: 200px;
  height: 50px;
  border: none;
  color: #000;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:2rem;
	transition:all 0.3s;
}

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

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: calc(50% - 100px);
	bottom:160px;
	z-index: 999;
	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);
  }
}


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