@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@400;700&display=swap');



* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}




body{
font-size:18px;
line-height:1.6;
font-family:'Shippori Mincho', serif,'游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN';
font-weight: 400;
margin:0;
padding:0;
color:#333;
background: 
    linear-gradient(-45deg, #E7FFFF, #ffd3e6,#E7FFFF, #ffd3e6, #f0ffcf, #E7FFFF, #f0ffcf);
background-size:  300% 300%;
animation: gradient 10s ease infinite;
height: 100vh;
}




@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
 

/*さくら*/
.blossoms {
  position:fixed;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.blossoms2 {
  position:absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
    z-index: 10;
}


.blossoms li,.blossoms2 li {
  width: 24px;
  position: absolute;
  list-style: none;
  top: -50px;
  animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;   z-index: 10; 
}
.blossoms li img, .blossoms2 li img{width:100%;}
{width:100%;}

@keyframes fall {
  to {
    top: 120%;
  }
}

@keyframes fadeblossoms {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes rotate1 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(200px) rotate(-80deg) rotateX(180deg);
  }
}
@keyframes rotate2 {
  from {
    transform: translateX(200px) rotate(-45deg);
  }
  to {
    transform: translateX(0px) rotate(0deg);
  }
}
.blossoms li:nth-child(1) ,.blossoms2 li:nth-child(1){
  left: 0;
  animation: fall 10s linear infinite, rotate1 3s ease-in-out infinite alternate, fadeblossoms 10s linear 1;
}
.blossoms li:nth-child(2),.blossoms2 li:nth-child(2) {
  left: 5vw;
  animation: fall 15s linear infinite, rotate1 2s ease-in-out infinite alternate, fadeblossoms 15s linear 1;
}
.blossoms li:nth-child(3),.blossoms2 li:nth-child(3) {
  left: 15vw;
  animation: fall 9s linear infinite,
    rotate1 3.5s ease-in-out infinite alternate, fadeblossoms 9s linear 1;
}
.blossoms li:nth-child(4),.blossoms2 li:nth-child(4) {
  left: 30vw;
  animation: fall 8s linear infinite, rotate2 4s ease-in-out infinite alternate, fadeblossoms 8s linear 1;
}
.blossoms li:nth-child(5),.blossoms2 li:nth-child(5) {
  left: 40vw;
  animation: fall 10s linear infinite, rotate1 4s ease-in-out infinite alternate, fadeblossoms 10s linear 1;
}
.blossoms li:nth-child(6),.blossoms2 li:nth-child(6)  {
  left: 55vw;
  animation: fall 11s linear infinite, rotate2 3s ease-in-out infinite alternate, fadeblossoms 11s linear 1;
}
.blossoms li:nth-child(7),.blossoms2 li:nth-child(7) {
  left: 65vw;
  animation: fall 7s linear infinite,
    rotate2 3.5s ease-in-out infinite alternate, fadeblossoms 7s linear infinite, fadeblossoms 7s linear 1;
}
.blossoms li:nth-child(8) ,.blossoms2 li:nth-child(8){
  left: 80vw;
  animation: fall 7s linear infinite, rotate1 3s ease-in-out infinite alternate, fadeblossoms 4s linear 1;
}
.blossoms li:nth-child(9),.blossoms2 li:nth-child(9) {
  left: 20vw;
  animation: fall 9s linear infinite,
    rotate2 6s ease-in-out infinite alternate, fadeblossoms 7s linear 1;
}
.blossoms li:nth-child(10),.blossoms2 li:nth-child(10) {
  left: 85vw;
  animation: fall 15s linear infinite, rotate1 2s ease-in-out infinite alternate, fadeblossoms 15s linear 1;
}



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

a:hover{position:relative;
color: #182F63; 
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{margin:0 0 6em 0;　padding:0; display: block;}
article{margin:0;　padding:0; display: block;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}

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

#container{
    background-image: url(../images/komorebi.png);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}



h1{position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-image: url('../images/intro-bg-ill.jpg');
      background-size: cover;
      background-position: center;
}

h1 img{display: block; position: absolute; margin: auto; z-index: 50;}

.ill{position: absolute; font-size:10px; top:5px; left:5px;  text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);}

.header_maintitle{
top: 10vh; right:2vw; 
height:50vh; width:auto; }

.header_chatch01{
top: 11vh; left: 23vw;
max-width:30vw; height:auto;}

.header_chatch02{
top: 11vh; left: 2vw;
max-width:22vw; height:auto;}

.header_batch{bottom:22vh; right:5vw; 
max-width:26vw; height:auto;}

.header_release{bottom:15vh; right:5vw; 
max-width:56vw; height:auto;
}

@media (min-width: 479px){
    
.header_maintitle{
top: -15vh; right:5vw; bottom: 0; 
height:70%; width:auto; }
    
.header_chatch01{
top: 8vh; left: 23vw;
max-width:30vw; height:auto;}

.header_chatch02{
top: 8vh; left: 2vw;
max-width:22vw; height:auto;}

.header_batch{bottom:10vh; right:5vw; 
max-width:20vw; height:auto;}

.header_release{bottom:15vh; right:30vw;
max-width:48vw; height:auto;
}

    
    
}


@media (min-width: 769px){
    
.header_maintitle{
top: -15vh; right: 0; bottom: 0; left: 0;
height:75%; width:auto;
}

.header_chatch01{
top: 7vh; left: 18vw;
max-width:14vw; height:auto;}

.header_chatch02{
top: 7vh; left: 5vw;
max-width:10.2vw; height:auto;}

.header_batch{bottom: 28vh; right:5vw; 
max-width:11vw; height:auto;}
.header_release{bottom:15vh; right:5vw;
max-width:28vw; height:auto; }  
    
}


h1.header_title{
    height:160px;
}


@media (min-width: 769px){
    
    h1.header_title{
    height:200px;
}
}

.header_title img{display: block; width:70%; max-width:480px; height:auto; margin:0; padding:30px 0 0 20px}


#story h2 ,#trial h2, #profile h2, #message h2,#charactor h2, #review h2, #voice h2, #news h2{padding:2em 0;}
section h2 img{display: block; width:calc(100% - 50px); max-width:420px; height:auto; margin:auto;}



/*========= ぼかしのためのCSS ===============*/

.container{
	filter: blur(8px);
}


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:rgba(255,223,231,0.8);/*背景を少し透過させる*/
    /*動き*/
	transition: all 0.5s;
    border:solid 8px #2545A0;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
	opacity: 1;
	z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    display: none;/*はじめは非表示*/
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:100%;
}

#g-nav.panelactive ul {
    display: block;
    margin:0; padding:0;
}
/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;  
    margin:0; padding:0;
}

#g-nav li a{
	color: #2545A0;
    font-size:1.2em;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
    width:calc(100% - 16px);
}

#g-nav li a:hover{
background: #fff;
}


/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9990;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 60px;
    height:60px;
    background:url(../images/icon_close.svg) top center / cover no-repeat;
}

.openbtn img{
    opacity: 1;
    transition: all 0.3s ease;
    width:60px; height:auto;
filter: drop-shadow(0px 0px 3px #5D6E93);}


.openbtn.active img{opacity: 0;}
	


#buy{width:calc(100% - 60px); max-width:980px;
    background:#2545A0; 
    color:#fff; 
    text-align: center; 
    box-shadow: 0px 0px 6px 2px rgba(35, 69, 160, 0.5); 
    transition: all 0.3s ease; 
    display: block; 
    padding:10px 5px;
border-radius: 12px 12px 0 0 ;
position: fixed;
bottom:0;
left: 50%; 
    transform: translateX(-50%);
 z-index: 999;
    
}

#buy:hover{box-shadow: 0px 0px 4px 1px rgba(35, 69, 160, 0.2);  bottom:-2px;}

#buy img{display: block; margin:auto; width:calc(100% - 20px;); max-width:180px; height:auto;}



@media (min-width:780px){
#buy img{width:calc(100% - 20px;); max-width:240px; 
}
}




.bg_white{ 
background: 
    url('../images/corner_left.svg') left 10px top 10px / 120px auto no-repeat,
    url('../images/corner_right.svg') right 10px bottom 10px / 120px auto no-repeat,
    #ffffff; /* 背景色は一番最後に書く */
}


/*あらすじ*/
#story > div{width:calc(100% - 50px); max-width:780px; margin: 0 auto; padding-bottom:4em;
}

#story > div p{background: url('../images/bgmark.svg') center center / 200px 200px no-repeat;}


#trial{padding-bottom:4em;}


#trial > div{width:calc(100% - 50px); max-width:780px; margin: 0 auto; padding:.5em; border: 1px solid #8DA5C9; text-align: center;}

#trial > div a{background:#2545A0; border-radius: 24px; color:#fff; padding:8px 16px; margin:1em; display: block;
    box-shadow: 0px 0px 6px 2px rgba(35, 69, 160, 0.5); 
    transition: all 0.3s ease; 
}

#trial > div a:hover{box-shadow: 0px 0px 4px 1px rgba(35, 69, 160, 0.2);}



#charactor > div{    
border:solid 1px #8DA5C9;
    border-radius: 12px;
    background: #fff;
    width:calc(100% - 50px);
    max-width:680px; height:800px;
    margin:0 auto;
}




/*著者メッセージ*/
#message >div{
border:solid 1px #8DA5C9;
box-shadow: 0px 0px 8px 2px rgba(35, 69, 160, 0.15);
    background: #fff;
    margin:0 auto;
    width:calc(100% - 50px);
    max-width:680px; height:400px;
}

/*レビュー*/

#review > div{width:calc(100% - 50px); max-width:780px; margin: 0 auto; 
}
#review > div p{background: url('../images/bgmark.svg') center center / 200px 200px no-repeat;}

#review div p .reviewer{display: block; text-align: center; font-size:1.4em; color:#2545A0; padding-bottom:.5em;}
#review div p .reviewer span{display: inline-block; font-size:.8em; padding-left:10px;}

a.more{width:calc(100% - 20px); max-width:380px;
  background: url('../images/link_frame.svg') center center / contain no-repeat, #2545A0;  
    color:#fff; 
    text-align: center; 
    box-shadow: 0px 0px 6px 2px rgba(35, 69, 160, 0.5); 
    transition: all 0.3s ease; 
    display: block; 
    margin:4em auto 0 auto; 
    padding:20px;
    font-size:1.2em;
}

@media (min-width: 479px){
a.more{max-width:580px;   
    background: url('../images/link_frame_l.svg') center center / contain no-repeat, #2545A0; }  
}

a.more:hover{box-shadow: 0px 0px 4px 1px rgba(35, 69, 160, 0.2);}


/*書店員感想*/

#voice{padding-bottom:4em;}
#voice > div{width:calc(100% - 50px); max-width:780px; margin: 0 auto; 
}
#voice div p{background: url('../images/bgmark.svg') center center / 200px 200px no-repeat; width:calc(100% - 100px); margin:auto;}

#voice div p span{display: block; text-align: right; font-size:0.8em; color:#2545A0;}

/*お知らせ*/
#news{}
#news ul{margin:0 auto; padding:0; list-style: none; width:calc(100% - 50px); max-width:780px;}
#news li{margin:10px auto; padding:12px; list-style: none; background: #fff; display: flex; align-items: flex-start;}

#news a li{margin:10px auto; padding:12px; list-style: none; background: #fff; border: 1px solid #8DA5C9; display: flex; align-items: flex-start; 	transition: all 0.5s; color:#333;}

#news a li:hover{border:1px solid #2545A0;}

#news li .update{color:#2545A0; margin-right:.5em}

/*アコーディオンタイトル*/
.more_news {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    transition: all .5s ease;
  background: url('../images/link_frame.svg') center center / contain no-repeat, #2545A0;  
    color:#fff; 
    text-align: center; 
    box-shadow: 0px 0px 6px 2px rgba(35, 69, 160, 0.5); 
    display: block; 
    margin:2em auto 0 auto; 
    padding:20px;
    font-size:1.2em;
}

@media (min-width: 479px){
.more_news{max-width:580px;   
    background: url('../images/link_frame_l.svg') center center / contain no-repeat, #2545A0; }  
}

.more_news:hover{box-shadow: 0px 0px 4px 1px rgba(35, 69, 160, 0.2);
position:relative;
top:2px;}

/*アイコンの＋と×*/
.more_news::before,
.more_news::after{
    position: absolute;
    content:'';
    width: 16px;
    height: 2px;
    background-color: #8DA5C9;
}
.more_news::before{
    top:48%;
    left: 48px;
    transform: rotate(0deg);
    
}
.more_news::after{    
    top:48%;
    left: 48px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.more_news.close::before{
	transform: rotate(45deg);
}

.more_news.close::after{
	transform: rotate(-45deg);
}


/*アコーディオンで現れるエリア*/
.news_backno {
    display: none;/*はじめは非表示*/
    margin-top:2em;
}


/*著者プロフィール*/
#profile{padding-bottom:4em;}

#profile >div {width:calc(100% - 50px); max-width:780px; margin: 0 auto; 
overflow: hidden;
}

#profile h3{font-size:2em; font-weight:400; margin:0 auto 1em auto; text-align: center; width:5em; color:#2545A0;}
#profile h3 span{font-size:12px; display: block; border-top:solid 1px #8DA5C9;}

#profile p{background: url('../images/bgmark.svg') center center / 200px 200px no-repeat;}

#profile .website{display: flex; justify-content: center; text-align: center; margin-top:2em}
#profile .website a{display: inline-block; padding:4px 18px; border:solid 1px #2545A0; border-radius: 20px; color:#2545A0; font-size:.8em; margin:6px; 
 transition: all 0.5s; color:#333;}
#profile .website a:hover{background: #2545A0;color:#fff}

.frame {
    position: relative;
    border: 1px solid #8DA5C9;
    padding: 1.5em;
}
.frame:before,
.frame:after,
.frame-circle:before,
.frame-circle:after {
    position: absolute;
    display: block;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    content: "";
    background-color: #fff ;
    border: 1px solid #8DA5C9;
}
.frame:before {
    top: -12px;
    left: -12px;
}
.frame:after {
    top: -12px;
    right: -12px;
}
.frame-circle:before {
    right: -12px;
    bottom: -12px;
}
.frame-circle:after {
    left: -12px;
    bottom: -12px;
}



/*レビュースライド*/

.swiper .voice-slider{width:100%; padding:0;}
.swiper .voice-slider .swiper-button-next{width:40px; height:auto; color:#2545A0;}

.swiper-button-prev,
.swiper-button-next {
color:#2545A0;
width:20px;
height:20px;
}


/*書店員レビュー*/


.voice_list div{margin:2em auto; padding:1em 0}
.voice_list div p{width:100%!important;}
.voice_list div span{padding:1em 0}

ul.voice_nav{list-style: none; margin:1em auto 4em auto; width:100%; max-width:920px; display: flex; flex-wrap: wrap; justify-content: center;}

ul.voice_nav li{width:140px;
    margin:10px; 
    padding:8px 0;
    font-size:1.2em;
    display: inline-block; 
    text-align: center; 
    border:solid 2px #2545A0; color:#2545A0;
    background: url('../images/link_frame_m.svg') center center / contain no-repeat;} 

ul.voice_nav li.school{width:300px;
    background: url('../images/link_frame_m2.svg') center center / contain no-repeat;
} 

ul.voice_nav a li{
    border:none;
    background: url('../images/link_frame_m.svg') center center / contain no-repeat, #2545A0;
    color:#fff; 
    box-shadow: 0px 0px 6px 2px rgba(35, 69, 160, 0.5); 
    transition: all 0.3s ease; 
}

ul.voice_nav a li.school{
    background: url('../images/link_frame_m2.svg') center center / contain no-repeat, #2545A0;
        color:#fff; 
} 


ul.voice_nav li a:hover{box-shadow: 0px 0px 4px 1px rgba(35, 69, 160, 0.2);}


@media (min-width: 479px){
ul.voice_nav li{
    width:200px;
    padding:16px 0;
    font-size:1.2em;}
    
ul.voice_nav li.school{width:420px;
}   
}


/*コミックスライド*/


#comic{

}

#comic h2{ text-align: center}

#swiper2{margin:auto; border: 1px solid #8DA5C9;}

     .comicreview .swiper-slide {
        text-align: center;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
         background:#fff;
      }

      .comicreview .swiper-slide img {
        display: block;
        object-fit: cover;
        width:100%; height:auto;
      }

.comicend{width:100%; height:auto;}

.swiper-wrap{position:relative;  width: calc(100% - 20px); max-width:740px;  padding:0 40px 30px 40px;
  left: 50%;
  transform: translateX(-50%);}

.swiper-wrap .swiper-button-next, .swiper-wrap .swiper-button-prev{
background:#2545A0; color:#fff; 
padding:6px; width:30px;
height:30px; border-radius: 50%;
}

.swiper-wrap .swiper-pagination{
    bottom:0; font-size:12px; 
    background:#fff; color:#2545A0; 
    padding:3px; border-radius: 16px;  
    width:4em; left: 50%;
  transform: translateX(-50%);
}



#sns{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}
#sns ul{display: flex; justify-content: center; list-style: none; flex-wrap: wrap; margin:0; padding:0;}
#sns ul li{display: inline-block; border:solid 1px #2545A0; background: #fff; color:#333; padding:0.5em 2em; margin:6px; text-align: center;
}
#sns ul .xlink li::before{
  content: "";
  display: inline-block;  
  background-image: url('../images/xlogo-black.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.2em;
  height: 1.2em;
  transform: translateY(4px);
}

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






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

/*　footer　*/

footer {
color:#000;
margin:60px 0 0 0;
padding: 20px 0  120px 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;}