@charset "UTF-8";

* {box-sizing: border-box;appearance: none;}	
html {
width: 100vw;
font-size: 1rem;
}
a {
 text-decoration: none;
}
	body {overflow-y: auto;
    overflow-x: hidden;
    font-size: 1rem;
    text-align: center;
    color: #292828;
    display: block;
    height: 100vh;
    width: 100vw;
    font-family: "Noto Sans JP";
    line-height:2rem;
    }
   /* スクロールスナップの設定 */
  .container {
  position: absolute;
  left: 0;
   /*background-color: #baeca1;*/
   overflow:auto;
   overflow-x:hidden;
   scroll-snap-type: y mandatory;
   height: 100vh;
   width: 100vw;
      }

  .area{position: relative;z-index: 18;
   overflow:hidden; 
  display: flex;
  align-items: center;
  scroll-snap-align: center;
  height: 100vh;
  width: 100vw;
  margin: 0 auto 0 auto ;
/*background-color: #eb0f0f;*/}

.video_map{
  position:absolute;
  top:0;
  left: 0; width:350vw;
  z-index: 18;}


  
  .video_map_box{
    overflow: hidden;
    display: block;
    position:fixed;
    top:0;
    left: 0;
   width:99%;
   height: 100vh;
  z-index: 18;
  /*background-color: #baeca1;*/}







.wrapper {
  position: relative;
  display: flex;
  flex-direction:column;
  margin: 0 auto 0 auto;
  height:72%;
  width:1200px;
/*background-color: rgba(233, 25, 25, 0.5);*/
overflow: hidden;
/*border-radius:15px;*/
}
.content{
   position: relative; 
  display: flex;
  align-items:center;
  justify-content:space-around;
  height:100%;
  width:100%;
  margin: 0 auto 0 auto ;
}
.content_foot{
  display: flex;
  align-items: center;
  justify-content:space-around;
  height:70vh;
  width:1200px;
  margin: 0 auto 0 auto ;
/*background-color: bisque;*/
}

.con_box_uper{position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 98%;
height:10%;

 }
 .con_box_map{

  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 70vh;
  /*background-color: rgba(212, 17, 17, 0.5);*/
 /* background-color:rgba(255,255,255,.5);*/
  }

.con_box{
position: relative;
display: flex;
justify-content: center;
width: 100%;
height: 77%;
/*background-color: #e2f10f;*/
/*background-color:rgba(255,255,255,.5);*/
}
.con_box_under{
  margin-top: 1%;
  margin-bottom: 1%;
  position: relative;
  display: flex;
align-items:center;
justify-content:center;
 width: 100%;
 height: 11%;
 /*background-color:rgba(255,255,255,.5);*/
}

/*--footer---------------------------------------------------*/

.area_footer{position: relative;
  overflow: hidden;
  background-color:rgba(67, 62, 85, 0.5);
    display: flex;
    align-items: center;
    z-index: 18;
    scroll-snap-align: center;
    height: 100vh;
    width: 100vw;
    /*background-color: #c3a1ec;*/}






    .wrapper_footer{
      margin: 0 auto 0 auto ;
        height:70%;
        width:1200px;
      overflow: hidden;
      border-radius:15px;
      /*background-color: antiquewhite;*/
      }
      .con_box_footer{
        position: relative;
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       /*background-color: #000;*/
      }


.qr{display: block;
  margin: 0 auto 0 auto;
  width: 80px;
  height: 80px;
  }

  .bunbun_footer{
padding-top: 10vh;
   font-size: 1rem;
   line-height: 1.5rem;
  color:#fff;
  overflow:hidden ; 
  width:100%;
  height:100%;
/*background-color: #baeca1;*/}

.foot{
color:#fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
/*background-color: #eca1cf;*/}





.small{font-size: 0.7rem;
line-height: 1rem;
background-color: #eca1cf;


}
/*--top-board--------------------------------------------------------------*/
.top-board{z-index: 19;
position: absolute;
top:0;
display: flex;
justify-content:space-around;
height: 15vh;
width: 100vw;
overflow: hidden;
/*background-color: rgb(0, 26, 255);*/}
.logo{position:relative;
  height: 100px;
  width:200px;
background-image: url(../images/common/jugemu2021.png);
background-size:cover; 
/*background-color: #000;*/}
.nav_pc{padding-top: 20px;
display: flex;
justify-content:space-around;
width: 1200px;
height:15vh;
/*background-color: rgb(160, 95, 151);*/}
/*--bottom-board--------------------------------------------------------------*/
.bottom-board{z-index: 19;
  position: absolute;
  bottom: 0;
  display: flex;
align-items: flex-end;
  height: 15vh; 
  width: 100vw;
/*background-color: red;*/
overflow: hidden;}
.bottom_nav_pc{z-index: 19;
  display: flex;
  justify-content:space-between;
  height:10vh;
  width: 90vw;
  margin: 0 auto 0 auto;
 /*background-color: rgb(160, 95, 151);*/}
/*--btn--------------------------------------------------------------*/
.btn{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;*/} 

/*-----------------------------------------------------------------------------------------------------*/ 
.scale_pc
{display: flex;z-index: 19;
justify-content: center;
align-items: center;  
width: 25px;
height: 25px;
font-size: 0.7rem;
border-radius: 50%;
position: fixed;
z-index: 30;
left:10px;
top:10px;
background-color: #c3a1ec;}
/*----コンテンツ---------------------------------------------------*/
.character,.character_top{
position: relative;
z-index: 21;
cursor: pointer;
  width:250px;
  height:250px; 
  cursor: pointer;
  /*background-color: #432;*/
  }
 .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;}
/*----------------------------------------------------*/
.btn_next{position:absolute;
  bottom:10px;
  left: 10px;
  width: 100px;
  height: 100px;
 /*background-color: aquamarine; */}








  .btn_down,.btn_chara{
    position:relative;
    width: 100px;
    height: 100px;
   /*background-color: aquamarine; */
}

/*----------------------------------------------*/
/*--bunbun------------------------------------------*/
.bunbun{/*-- relativeなのでcharacter でワイズが影響する -------------------------------*/
position: relative;
width: 100%; height: 80%;
padding: 2%;
text-align: left;
overflow-y: auto;
overflow-x: hidden;
background-color:rgba(255, 255, 255,.7) ;
/*background-color: #baeca1;*/
}


/*---------------------------*/
.sub-menu::-webkit-scrollbar,.bunbun::-webkit-scrollbar,.container::-webkit-scrollbar,.box_memu::-webkit-scrollbar
{
  z-index: 35;
  position: relative;
  width: 1vw;
  }
  .sub-menu::-webkit-scrollbar-track,.bunbun::-webkit-scrollbar-track,.container::-webkit-scrollbar-track,.box_memu::-webkit-scrollbar-track{
  z-index: 35;
  position: relative;
  background-color: #e4e4e4;
  border-radius: 100px;
  }
  .sub-menu::-webkit-scrollbar-thumb ,.bunbun::-webkit-scrollbar-thumb ,.container::-webkit-scrollbar-thumb ,.box_memu::-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);}
 /*-------------------------------------------------*/
 .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;}
/*--p-------------------------------------------------------*/
  .p_top {position: absolute; top:-20%;left:-10%;}  
  .pm_top { position: absolute; top: -12%;left:0;}  
  .pw_top {position: absolute; top: -9%;left:0;}  
 /*----文の表示--------------------------------------------------*/
  .title_top{
display: flex;
flex-direction: column;
text-align: center;
font-size: 0.7rem;
line-height: 1rem;
margin-bottom: 1rem;
  padding: 0.7rem; 
  width: 100%;
  cursor:pointer; 
  box-shadow: 2px 3px 5px 1px #444;
  border-radius: 1rem 1rem 1rem 1rem;
  }
  .title_top:active{
  box-shadow: 0px 0px 0px 0px #444;
  }
  
  .title_top_2{display: flex;
    flex-direction: column;
  text-align: center;
  line-height: 16px;
  padding: 5px; margin-bottom: 10px;
  
  }



/*--虹-----------------------------------------------------------------*/
.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;}
     /*-------------------fade-out-------------fade-ii------------------------*/
     @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;
      }

/*---広告のスタイル-----------------------------------------------------------------------------*/
.ad_list{
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
/*background-color: #2d6aee*/;
height:25vh;}
.ad{position: relative;
width: 9vw;
height:7.47vw ; 
box-shadow: 2px 5px 10px 1px #444;
}

.ad:active{
width: 9vw;
height:7.47vw ; 
box-shadow: 0 0 0 0 #444;
}
.bottom_K{
width: 100%;
position:relative;
display: flex;
align-items: center;
flex-direction: column;
/* background-color: #6f6;*/
}
.ad_A{/*--300x250--*/ 
position:relative;
display: flex;
width:300px;height:250px;
box-shadow: 2px 5px 10px 1px #444;
margin: 1%;
cursor:pointer;
}
.ad_A:active{
  box-shadow: 0px 0p 0px 0px #444;  cursor:pointer }

.ad_B{/*--468x60--*/
  position:relative;
  width:468px;height:60px;
  box-shadow: 2px 5px 10px 1px #444;
  cursor:pointer;}
  /*.ad_B:active{
    box-shadow: 0px 0px 0px 0px #444;}*/
    
.ad_C{/*-234x60---*/
position:relative;
width:234px;height:60px;
margin: 1%;
/*box-shadow: 2px 5px 10px 1px #444;*/
cursor:pointer;}

/*ad_C:active{
  box-shadow: 0px 0px 0px 0px #444;}*/

.ad_D{/*-350x160---*/
position:relative;
width:350px;height:160px;
/*box-shadow: 2px 5px 10px 1px #444;*/
cursor:pointer;
}
/*.ad_D:active{
   box-shadow: 0px 0px 0px 0px #444; }*/

.play_stop{
position: absolute;
bottom:0;
right: 40%; left: 40%; font-size: 0.7rem;line-height: 0.8rem;
color: blue;background-color: rgba(255,255,255,0.8);}  

.name_top{position: absolute;
top:0;
right: 10%; left: 10%; font-size: 0.7rem;line-height: 0.8rem;
color: #000;background-color: rgba(255,255,255,0.8);}  

.name_bottom{
  position: absolute;
  bottom: 0;
  width:95%;
  font-size: 0.7rem;line-height: 0.8rem;
  color: blue;
  background-color: rgba(255,255,255,0.8);}  

  /*-------------------fade-out-------------fade-ii------------------------*/
  @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;
    }






 /*--限定表示-start--------*/
 .pc{display:block;}
 .mob{display: none;}
 .scale_mob{display:none;}
 .top-board_mob,.menu,.bottom-board_mob{display:none;}
 .mob_advertisement_1{display:none;}
.header_ham{display: none;}
 /*--限定表示-end-------*/

@media screen and (max-width: 599px){/*599x以下に適用*/
/*--限定表示-start-------*/
.mob{display:block;}
.pc{display:none;}
.top-board{display:none;}
.bottom-board{display: none;}
.scale_pc{display:none;}
.top-board_mob,.menu,.bottom-board_mob{display:block;}

/*--限定表示-end-------*/
.scale_mob{display: flex;
justify-content: center;
align-items: center;  
width: 25px;
height: 25px;
font-size: 0.7rem;
border-radius: 50%;
position: fixed;
z-index: 30;
right:10px;
top:30px;
background-color: #baeca1;}
/*--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);*/}
  .bottom-board_mob{ 
    z-index: 19;
    position: absolute;
    bottom:1vh;
    left:0;
    display: flex;
  justify-content: space-around;
    height: 3vh;
    width: 100vw;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1rem;
  /*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.7rem;
line-height: 1rem;
box-shadow:2px 2px 2px #444;
}
      .menu:hover:active,.menu_bottom:hover:active{border: none;}
      
      #menu_1:hover{
      background-image:url(../images/common/bg_00.jpg);
      background-size: cover;
      position: relative;
      z-index: 23;
              }
      #menu_2:hover{
      background-image:url(../images/common/b_1.jpg);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_3:hover{
      background-image:url(../images/common/b_2.png);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_4:hover{
      background-image:url(../images/common/b_3.png);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_5:hover{
      background-image:url(../images/common/b_4.jpg);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_6:hover{
      background-image:url(../images/common/b_6.png);
      background-size: cover;
      position: relative;
      z-index: 23;
      }
      #menu_7:hover{
      background-image:url(../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;
                } 
/*--nav mob end------------------------------------------------------*/
.wrapper{display: flex;
  flex-direction: column;
  margin: 0 auto 0 auto ;
    height:95%;
    width:100%;
  overflow: hidden;
  }
  .area{overflow: hidden;
  display: flex;
   align-items: center;
  z-index: 18;
  scroll-snap-align: center;
  height: 100%;
  width: 100%;
    }  






.content{position: relative;
  display: flex;
flex-direction: column;
  height:55%;
  width:98%;
/*background-color: bisque;*/
}
.content_foot{
  height:100%;
  width:100%;
  margin: 0 auto 0 auto ;
/*background-color: bisque;*/
}









.msg{/*background-color: #444;*/
cursor: pointer;
z-index: 20;
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);

width:75%;
height: 60%;
display: block;
background-image: url(../images/common/jugemu2021_5.png);
background-size: cover;}
.msg:active{background-image: url(../images/common/jugemu2021_2.png);}

.ppp{opacity: 1;
  cursor: pointer;
  z-index:18;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
width:100%;
height: 100%;
display: block;
background-image: url(../images/common/jugemu2021_6.png);
background-position: bottom;
background-size: cover;
border-radius: 15px 15px 15px 15px;
box-shadow: 2px 5px 10px 1px #444;}

.con_box_uper{
  width: 98%;
  height: 10%;
 }
.con_box{
 width: 98%;
 height: 65%;
}





.con_box_footer{position: relative;

  width: 98vw;
 height: 100%;
/* background-color: #e2f10f;*/}

 .character{
   position: absolute;
  top:5%;
margin: 0 auto 0 auto ;
  z-index: 21;
  cursor: pointer;
  width:80px;
  height:80px; 
  cursor: pointer;
 /* background-color: rgb(255, 0, 106);*/
  }
  .character_top{
    position: absolute;
    left: 0;
    z-index: 21;
    cursor: pointer;
    width:120px;
    height:120px; 
    cursor: pointer; }

   .mob_advertisement_1{
    display: block;
    width: 30vw;
height: 25vw;
    
   /* background-color:red*/ ;
    position: absolute;
    left: 15vw;
    bottom:2vh;
  ;}
#mob_advertisement_1{background-image: 
 url(https://pub.a8.net/a8v2/A8ImageAction.do?eid=s00000012477&id=202104221055179890);
background-size: cover;box-shadow: 2px 5px 10px 1px #444;
}
aside{display: none;}
article{margin-left: 0;
width: 100%;}
aside p{padding:  6px 6px;}

/*--ham---------------------------------------------------------------*/

.header_ham{position: absolute;
  display: block;
   padding-top:3vh; 
}

       
/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 60vh;
  position: fixed;
  flex-direction: column;
  top: 3vh;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(255, 255, 255, 0.9);
  transition: .5s;
}



/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}
.box_memu{/*background-color: #0bd;*/
padding-top: 10px;
padding-bottom:10px;
text-align: left;
height: 35vh;
width: 98%;
overflow-y: auto;
overflow-x: hidden;
}

  .sub-title{font-size:1rem;
    border-bottom: 2px #0bd solid;
    font-weight: normal;
    text-align: center;
    width: 98%;
    
    }
    aside p{padding:  6px 6px;}
    .sub-menu{
padding-left:10px ;


    margin-bottom: 30px;}
   
    .solid_a{border-bottom: 1px #432 dotted;}
    .sub-menu a{
      text-align: left;
     color:#432;
     font-size:1rem;
    padding: 5px;
    display: block;}



    .sub-menu a:hover{color: #0dd;}


    .ad_list{
 
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: space-around;
           /*background-color: #2d6aee*/;
      height:25vh;}
.ad,.ad:active{
  width: 30vw;
height:25vw ;
}

/*---ham--------------------------------------------------*/


.library_P{position:absolute;top:0;left: 0;right: 0;} 

.bunbun_footer{
  padding-top: 10vh;
     font-size: 0.8rem;
     line-height: 1.3rem;
    color:#fff;
    overflow:hidden ; 
    width:100%;
    height:100%;
  /*background-color: #baeca1;*/}



.btn_chara{
position:relative;
 width: 100px;
 height: 100px;
/*background-color: aquamarine;*/
}
 .p_top {position: absolute; top:-45%;left:0;}  
.pm_top { position: absolute; top: -12%;left:0;}  
.pw_top {position: absolute; top: -9%;left:0;}  

.koukoku_A{/*--300x250--*/ 
  position:relative;
  display: flex;
  margin: 0 auto 0 auto ;  
  width:300px;height:250px;
  box-shadow: 2px 5px 10px 1px #444;
  cursor:pointer;
  }
  
  .koukoku_B{/*--468x60--*/
    width:80%;height:9.6%;
    }
  
  .koukoku_C{/*-234x60---*/
    position:relative;
    margin: 20px 50px 0 auto;  
    width:234px;height:60px;
    box-shadow: 2px 5px 10px 1px #444;
    cursor:pointer;}
  
    .koukoku_D{/*-350x160---*/
      position:relative;
      margin: 20px auto 0 auto ;  
      width:350px;height:160px;
      box-shadow: 2px 5px 10px 1px #444;
      cursor:pointer;
  }
  .ad_C{/*-234x60---*/
    position:relative;
    width:40vw; height:10.24vw;
    margin: 1%;
    cursor:pointer;}





}