@charset "UTF-8";
* 共通部分--------------------------- */
* {box-sizing: border-box;appearance: none;}	


.aka-l{
  /*--蛍光ペンみどり--*/
  background:linear-gradient(transparent 60%, rgba(249, 47, 6, .5) 60%);}
  
  .daidai-l{
  /*--蛍光ペン橙--*/
  background:linear-gradient(transparent 60%, rgba(242, 146, 3, 0.5) 60%);}
  
  .yellow-l{/*--蛍光黄--*/
   background:linear-gradient(transparent 60%, rgba(235, 232, 23, 0.5) 60%);}
  
   .green-l{
  /*--蛍光ペンみどり--*/
  background:linear-gradient(transparent 60%, rgba(99, 223, 16, 0.5) 60%);}
  
  .blue-l{
  /*--蛍光ペン青--*/
  background:linear-gradient(transparent 60%, rgba(10, 153, 236, 0.5) 60%);}
  
  .D_blue-l{
  /*--蛍光ペン紺--*/
  background:linear-gradient(transparent 60%, rgba(12, 2, 102,.5) 60%);}
  
  .D_murasaki-l{
  /*--蛍光ペン紫
  --*/
  background:linear-gradient(transparent 60%, rgba(97, 3, 114,.5) 60%);}
  .futoi{font-weight: bold;}
  .red{color: red;}

.dot_1::before {
  content: '';
  display: inline-block;
  position: relative;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  background-color:rgba(106, 189, 228, 0.8); 
  border-radius: 50%;
  }
  .small_font{font-size: 0.7rem;line-height: 1rem;}

/*---------------------------------------------------------------------*/
a {
 text-decoration: none;
}
.kaisei-decol-regular {
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
}

.library_P{
position: relative;
display: flex;
justify-content:center;
font-weight: bold ;
line-height: 1.5rem;
font-size: 1rem;
border-radius: 15px; 
background-color: rgb(180, 226, 240);
width: 100%;
margin-bottom: 2rem;
} 
html {width: 100vw;
	overflow-x: hidden;
	font-size:1rem;
}

body{
width:100vw;
margin: 0 auto;
font-family: "Noto Sans JP";
color: #432;
line-height:2rem;
/*--stickyはoverfllowと使えない-------*/
}
/*----- 大きな背景画像 start--------*/
.big-bg {
display: flex;
position: relative;
justify-content: center;
background-size:cover;
background-position:top;
width: 100vw;
height: 35vh;
}

.big-bg_landing {
display: flex;
position: relative;
justify-content: center;
background-size:cover;
background-position:top;
margin: 0px auto 0 auto;
width: 100vw;
height: 50vh;
}
.yomiage{
clear: both;  
cursor:pointer;
padding-top:1rem;}

.big-bg-narrow{
position: fixed;
top:0;
left: 0;
width: 100vw;
height: 15vh;
/*background-color:rgba(236, 182, 182, 0.5);*/
z-index: 20;
}
.nav_pc{
position:relative;
display: flex;
align-items: center;
justify-content:space-around;
width: 50vw;
height:15vh;
/*background-color: rgb(105, 95, 160);*/}
.btn_cover{display: block;
  position:relative;z-index: 19;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
 background-color:rgba(255,255,255,.8);
}

.btn{display: block;
  position:relative;z-index: 19;
  width: 80px;
  height: 80px;
  border-radius:50%;
/* background-color: aquamarine;*/
  border-bottom: 2px solid #444;}
.btn:active{border: none;} 
.btn_top {/*-文字-*/position: absolute; width:100px; top: -30px;left: -10px; /*background-color: blue;*/} 
.btn_bottom {/*-文字-*/position: absolute; width:100px; top: 80px;left: -10px; /*background-color: blue;*/
display: flex;justify-content: center;} 



#big-img{background-image:url(../image/common/big_bg.png);}

.logo {
  position: absolute;
	left:1rem;
	top:1rem;
	width:10rem;
}

.mannaka{
display: flex;
align-items:center;
margin-bottom: 50px;
}
/*--top-board・bottom-board-start---------------------------------------->*/
.top-board_pc{z-index: 20;
position:fixed;
left:0;
right:0;
display: flex;
justify-content:center;
align-items: center;
height: 15vh;
width: 100vw;
overflow: hidden;
/*background-color: rgb(255, 255, 255,0.8);*/
}

 .top-board_mob,.menu,.bottom-board_mob{display:none;}
.nav_wrap{
width: 90vw;
height: 15vh;
position: relative;
display: flex;
justify-content:space-around;
align-items: center;
}



/*----- .main_content-------*/
.wrap {
position: relative;
width: 80vw;
display: grid;
grid-template-columns: 3fr 1fr;
margin: 0 auto 0 auto;
z-index: 15;
}

.main_content {
display: block;
position: relative;
width: 60vw;
z-index: 18;
}

.main_content_landing {
display: block;
position: relative;
width: 80vw;
z-index: 18;

}
.side{
display: block;
position: relative;
width: 20vw;
z-index: 18;
}



.chapter{
position: relative;
display: flex;
flex-direction: column;
min-height: 70vh;
overflow: hidden;
z-index: 18;
padding: 1vh 1vh 1vh 1vh;
}

.chapter_pht{
position: relative;
display: flex;
flex-direction: column;
min-height: 70vh;
overflow: hidden;
z-index: 18;
padding: 16vh 1vh 1vh 1vh;
}
.chapter_top_pht{
position: relative;
display: flex;
flex-direction: column;
min-height: 35vh;
overflow: hidden;
z-index: 18;
padding: 3vh 1vh 1vh 1vh;
}

/*--title start------------------------------*/	
.title-box{margin-left: 1rem;
position:relative;
display: flex;
flex-direction: column;
}
.post-title {font-family:"Noto Sans JP";
font-size: 2rem;
}
.post-cat{font-size:1rem;}
.audio{width: 100%;
height: 100%;}


/*-----------------------------------------*/
.container_title{
width: 100%;	
display: flex;
justify-content:flex-start;
position: relative;
display: flex;	
height: 7rem;
margin-bottom:2rem;
}
.post-box-cover{
position: relative;  
height:9rem;
}

.post-box{
position:relative;
display: flex;
width:14rem;
height:7rem;
/*box-shadow: 2px 5px 5px 1px #444;*/
}
/*.post-box:active{
box-shadow: 0 0 0 0 #444;
}*/
.post{
position:relative;
display: flex;
justify-content:center;
display: block;
margin: 0.5rem;
width:6rem;
height:6rem;
border: 0;
}
.under_post-box{
position: absolute;
bottom:0;
line-height: 2rem;
font-size: 0.8rem;  
text-align: center;
/*background-color: aqua;*/


}



.bun{padding: 1rem 1rem 5rem 1rem;
word-break: keep-all;
font-size: 1rem;
line-height: 1.5rem;

}
/*--side start----------------------------------*/		


.side_content {
margin-top: 1vh;	
position: sticky;
top: 50px;
text-align: center;
}

.side_content_pht {
margin-top: 1vh;	
position: sticky;
top: 17vh;
text-align: center;
z-index: 18;
}




.sub-title{font-size:1.375rem;
padding: 0 8px 8px;
border-bottom: 2px  rgb(180, 226, 240) solid;
font-weight: normal;
/*background-color:rgba(255, 255, 255, 0.7)*/
}
.sub-menu{
	margin-bottom: 60px;
	list-style: none;
}
.sub-menu li{
border-bottom: 1px #ddd solid; 
}
.sub-menu a{
color: #432;
padding: 10px;
display: block;
}
.sub-menu a:hover{color:rgba(223, 164, 124,1)}
.ad_list{
 
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* background-color: #2d6aee;*/
  height:25vh;}
.ad{position: relative;
width: 8vw;
height:6.64vw ; 
box-shadow: 2px 5px 10px 1px #444;
}
.ad:active{

  box-shadow: 0 0 0 0 #444;
  }
   .p_top {position: absolute; top:-30%;left:0;}  
  .pm_top { position: absolute; top: -12%;left:0;}  
  .pw_top {position: absolute; top: -9%;left:0;}  
 
/*---side end----------------------*/
.img-cover_R{
text-align: center;  
position: relative; 
float: right;	
width: 7rem;	
height:8rem;
/*background-color: aqua;*/
}

.img-cover_L{
text-align: center;  
position: relative; 
float: left;	
width: 7rem;	
height:8rem;
/*background-color: aqua;*/
}

.img {
position: relative;
width: 6rem;
height:6rem;
margin: 0.5rem;
box-shadow: 2px 5px 10px 1px #444;
border-radius: 50%;
/*background-image: url(../image/character/1.png);*/
background-color:rgba(223, 164, 124,.5);
background-size: cover;
}
.img:active {
box-shadow: 0 0 0 1px #444;}
/*--page to top--*/

.under{
position: absolute;
right:0;
left:0;
bottom:0;
line-height: 1rem;
font-size: 0.8rem;  
/*background-color: aqua;*/
}
/*----------------------------------------*/
#topup_wrap{z-index:25;
display: block;
width: 5rem;
height: 5rem;
position: fixed;
right: 25px;
bottom:25px;
background-size: cover;
background-repeat: no-repeat;
background-color: rgba(246, 118, 144,.7);
border-radius: 50%;
box-shadow: 2px 5px 10px 1px #444;}
#topup_wrap:active {
box-shadow: 0 0 0 1px #444;}
#ring_wrap{z-index:25;
	display: block;
	width: 5rem;
	height: 5rem;
	position: fixed;
	left: 25px;
	bottom:25px;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: rgba(144, 246, 118, 0.7);
border-radius: 50%;
box-shadow: 2px 5px 10px 1px #444;}
#ring_wrap:active {
box-shadow: 0 0 0 1px #444;}
/*--フッター start-----------------------*/
footer{
position: relative;
width: 100vw;
min-height:50vh;
text-align: center;
padding: 20px 0;
background-color:rgba(0,0,0,.5);
}
footer p{
color: #efe6d5;
font-size: 1.275rem;
}
small,.small_font{color: #efe6d5;
font-size: 0.875rem;}

.qr{display: block;
  margin: 0 auto 0 auto;
  width: 80px;
  height: 80px;
  }
/*---fadeOut start--------------------------------------------------------*/
   @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
      }
      .fade-out {
      animation: fadeOut 3s forwards;
      /*display: inline-block;*/
      }
    
      @keyframes fade-in {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
      }
      .fade-in {
      animation: fadeIn 3s forwards;
      opacity: 1;
      }
 /*---fadeOut end------------------------------------------------------------*/

/*---ladingから移植--start----------------------------------------------------*/
/*.wrapper {
  position: relative;
  margin: 0 auto 0 auto ;
  height:70%;
  width:100%;
background-color: #eca1c0;
overflow: hidden;
}*/
 .content,.content_foot{
  display: flex;
  align-items: center;
  justify-content:center;
  height:70vh;
  width:70vw;
  margin: 0 auto 0 auto ;
/*background-color: rgb(226, 128, 8);*/
}



.con_box{
position: relative;
display: flex;
justify-content:center;
 width: 50vw;
height: 25vw;
/*background-color: #e2f1;*/}
.video{ 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
height: 90%;
width: 90%;
}




.character{
position: relative;
z-index: 21;
cursor: pointer;
  width:200px;
  height:200px; 
  cursor: pointer;
  }

.character_top{
position: absolute;
z-index: 21;
left: 20px;
bottom: 20px;
cursor: pointer;
  width:200px;
  height:200px; 
  cursor: pointer;
  }




/*----.con_box_top{
  position: absolute;
  top:0;
 width: 100%;
 height: 50%;
 display: flex;
 align-items: center;
 background-color: #eca1cf;}-----*/
 .border-radius{border-radius:20px 20px 20px 20px;}
 .con_box_top_2{

  position: absolute;
  top:51%;
  width: 100%;
 height: 50%;
 display: flex;
 align-items: center;
/*background-color: #baeca1;*/}
.bunbun{
top:0;
width: 90%; height: 90%;
word-break: keep-all;
text-align: left;
overflow-y: auto;
overflow-x: hidden;}
/*---------------------------*/
.bunbun::-webkit-scrollbar,.container::-webkit-scrollbar
{
  z-index: 35;
  position: relative;
  width: 1vw;
  }
  .bunbun::-webkit-scrollbar-track,.container::-webkit-scrollbar-track{
  z-index: 35;
  position: relative;
  background-color: #e4e4e4;
  border-radius: 100px;
  }
  .bunbun::-webkit-scrollbar-thumb ,.container::-webkit-scrollbar-thumb {
  z-index: 35;
  position: relative;
  border-radius: 100px;

  background-image: linear-gradient(180deg, #ebc0e8 0%, #a7ccf0 99%);
  box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);}

.GoStop{position: absolute;bottom:-1rem;
  display:flex;justify-content:center;left: 0; right: 0; 
   color:blue;font-weight: bold;font-size: 0.9rem;line-height: 1rem;}

@keyframes slide-animation_001 {
	0% {
		opacity: 0;
		transform: scale(1.0);
	}
	1% {
		opacity: 1;
	}
	16% {
		opacity: 1;
	}
	25% {
		opacity: 0;
		transform: scale(1.1);
	}
	100% {
		opacity: 0;
	}
}
@keyframes slide-animation_002 {
	0% {
		opacity: 0;
	}

	16% {
		opacity: 0;
		transform: scale(1.1);
	}

	38% {
		opacity: 1;
	}

	43% {
		opacity: 0;
		transform: scale(1.0);
	}

	100% {
		opacity: 0;
	}
}

@keyframes slide-animation_003 {
	0% {
		opacity: 0;
	}

	38% {
		opacity: 0;
		opacity: 0;
		transform: scale(1.0);
	}

	62% {
		opacity: 1;
	}

	67% {
		opacity: 0;
		transform: scale(1.1);
	}

	100% {
		opacity: 0;
	}
}

@keyframes slide-animation_004 {
	0% {
		opacity: 0;
	}

	62% {
		opacity: 0;
		transform: scale(1.1);
	}

	76% {
		opacity: 1;
	}

	95% {
		opacity: 0.5;
		transform: scale(1.0);
	}

	100% {
		opacity: 0;

	}}



.btn_next{position:absolute;
  top:10px;
  right: 10px;
  width: 80px;
  height: 80px;
 background-color: aquamarine;}


  .btn_down{
	position:absolute;
    bottom:0;
    right:1rem;
    width: 80px;
    height: 80px;
  /* background-color: rgb(161, 127, 255); */
}
/*.chapter_pht{background-color: #ebc0e8;}

.chapter{background-color: #c3c0eb;}*/



 @media screen and (max-width: 599px){/*599x以下に適用*/
 .chapter_pht{
padding: 4vh 1vh 1vh 1vh;
} 
.chapter_top_pht{
min-height: 50vh;
}

/*--限定表示-start-------*/
.mob{display:block;}
.pc{display:none;}
.top-board_pc{display:none;}
.bottom-board_pc{display: none;}
.scale_pc{display:none;}
.top-board_mob,.menu,.bottom-board_mob{display:block;}

/*--限定表示-end-------*/
/*--nav mob start-----------------------------------------------------*/
.top-board_mob{ 
  z-index: 19;
  position: absolute;
  top:0;
  left:0;
  display: flex;
justify-content: space-around;
  height: 3vh;
  width: 100vw;
  overflow: hidden;
  /*background-color: rgb(0, 26, 255);*/}


.menu{
background-color: rgb(244,243,242,.5);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
text-align: center;
width: 19.5vw;
height:3vh;
color:#000;
font-size: 0.8rem;
line-height: 3vh;
box-shadow:2px 2px 2px #444;
}
      .menu:hover:active,.menu_bottom:hover:active{border: none;}
      
      #menu_1:hover{
      background-image:url(../../photo-book/images/common/bg_00.jpg);
      background-size: cover;
      position: relative;
      z-index: 23;
              }
      #menu_2:hover{
      background-image:url(../../photo-book/images/common/b_1.jpg);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_3:hover{
      background-image:url(../../photo-book/images/common/b_2.png);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_4:hover{
      background-image:url(../../photo-book/images/common/b_3.png);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_5:hover{
      background-image:url(../../photo-book/images/common/b_4.jpg);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_6:hover{
      background-image:url(../../photo-book/images/common/b_6.jpg);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_7:hover{
      background-image:url(../../photo-book/images/common/b_5.png);
      background-size: cover;
      position: relative;
      z-index: 23;
     }
      #menu_8:hover{
     background-image:url(../images/pictuer_img/neco_1.png);
     background-size: cover;
     position: relative;
     z-index: 23;
    } 
.library_P{/*--ok--*/
width: 95%;
margin-bottom: 2rem;
line-height: 3vh;
font-size: 0.9rem;
margin: 0 auto 0 auto
}
html {/*--ok--*/
font-size:0.8rem;
width: 100vw;
}
body{
width: 100vw;  
line-height:1.2rem;
/*--stickyはoverfllowと使えない-------*/
}
/*----- 大きな背景画像 start--------*/
#big-img{background-image:url(../image/common/big_bg_mob.png);}
.logo {
top:5vw;
left: 40vw;
width: 20vw;
height: 13.32vw;
}
/*----- .main_content-------*/
.wrap {/*--ok--*/
width: 100vw; 
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
overflow-x: hidden;
}
.main_content {
display: block;
position: relative;
width: 100vw;
z-index: 18;
}
.side{
display: none;
}
.chapter,.chapter_pht,.chapter_top_pht{/*--ok--*/
width: 100vw;
margin: 0 auto 0 auto;
/*background-color: #a7ccf0;*/}
.content{display:flex;flex-direction: column;}
/*--title start------------------------------*/	
.post-title {/*--ok--*/
font-size: 1.0rem;
line-height: 1.5rem;
}
.post-cat{/*--ok--*/
	font-size:1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;}
.audio{/*--ok--*/
	width: 100%;
height: 2rem;}
.post-box{/*--ok--*/
display: flex;
width:100%;
justify-content:space-around ;
height:6rem;
}
.title-box{width:50%;
position:relative;
display: flex;
flex-direction: column;
}
.post{/*--ok--*/
margin: 0.5rem;
width:5rem;
height:5rem;}
/*--side start----------------------------------*/		
.side {/*--ok--*/display: none;}
/*---side end----------------------*/
.img_R1 {/*--ok--*/
width: 5rem;
height:5rem;
margin: 0.7rem;}
.img_R1>p{margin-top:5rem; margin-left:2rem;}
/*--page to top--*/
#topup_wrap{/*--ok--*/
width: 4rem;
height: 4rem;
right: 1rem;
bottom:1rem;}
#ring_wrap{/*--ok--*/
	width: 4rem;
	height: 4rem;
	left: 1rem;
	bottom:1rem;}
/*--フッター start-----------------------*/
footer p{/*--ok--*/font-size: 1rem;}
small{/*--ok--*/font-size: 0.75rem;}
.btn_chara{
position:relative;
width: 100px;
height: 100px;
/*background-color: aquamarine;*/
}
.btn_down{
position:absolute;
right:0;
bottom:0;}
.slider {width: 98%; height:40%; margin: 0 0;padding-top: 10vh;
/*background-color: rgb(221, 0, 85);*/
}

/*--nav mob start-----------------------------------------------------*/
.top-board_mob{ 
  z-index: 19;
  position: fixed;
  left:0;
  display: flex;
justify-content: space-around;
  height: 3vh;
  width: 100vw;
  overflow: hidden;
 /* background-color: rgb(0, 26, 255,.4);*/}
  .bottom-board_mob{ 
    z-index: 19;
    position: fixed;
    bottom:0.5vh;
    left:0;
    display: flex;
  justify-content: space-around;
    height: 3vh;
    width: 100vw;
    overflow: hidden;
    font-size: 0.7rem;
/*background-color: rgb(0, 26, 255,.4);*/}

.character_top{
position: absolute;
z-index: 21;
left: 10px;
bottom: 10px;
cursor: pointer;
  width:70px;
    height:70px; 
  cursor: pointer;
 /* background-color: #432;*/
  }




.big-bg_landing {
width: 100vw;
height: 50vw;
}
.wrapper {
  position: relative;
  margin: 0 auto 0 auto ;
  min-height:60vh;
  width:100vw;
/*background-color: #eca1c0;*/
overflow: hidden;
}
.bunbun{/*background-color: #432;*/
position: absolute;
top:0;
width: 90%; height: 90%;
padding: 5%;
text-align: left;
overflow-y: auto;
overflow-x: hidden;}
/*----------------------*/
.con_box{margin-top: 2vh;
position: relative;
display: flex;
justify-content:center;
 width: 95vw;
height: 47.5vw;
/*background-color: #e2f1*/
overflow: hidden;}
.video{ 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
height: 90%;
width: 90%;
}

.character{
position: relative;
z-index: 21;
cursor: pointer;
  width:150px;
  height:150px; 
  cursor: pointer;
  }






 }