@charset "UTF-8";
/* CSS Document */


html{
max-width:100%;
margin: 0 auto;
min-height: 100vh;
scroll-behavior: smooth;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
mage-rendering: -webkit-optimize-contrast;
background: url("../img/backimg3.png");
}


body{
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
max-width: 1000px;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 40px;
background: #010010;
}



.pagination{
text-align: center;
margin: 0 auto;
padding: 0;
}

.pagination ul li{
list-style: none;
display: inline-block;
width: 15%;
max-width: 100%;
}

.pagination ul li a{
text-decoration: none;
}

.pagination a{
color: #fff;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 20px;
padding: 8px 16px;
text-decoration: none;
}

.arrow{
position: relative;
display: inline-block;
padding: 0 0 0  16px;
color: #fff;
vertical-align: middle;
text-decoration: none;
}

.arrow::before,
.arrow::after{
position: absolute;
top: 16px;
bottom: 0;
content: "";
vertical-align: middle;
}

.pagination a:hover{
color: #00F2FF;
transition: 1s all;
}

.directingright::before{
left: 70px;
box-sizing: border-box;
width: 7px;
height: 0px;
border: 7px solid transparent;
border-left: 7px solid #fff;

}

.directingleft::before{
left: -10px;
box-sizing: border-box;
width: 7px;
height: 1px;
border: 7px solid transparent;
border-left: 7px solid #fff;
transform: rotate(-180deg);
}

.mute_btn{
max-width:100%;
margin: 0 auto;
box-sizing: border-box;
background-color: #A1FFFC;
color: rgba(0,0,0,1.00);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: 45px;
width: 500px;
}

#box{
background-color: #A1FFFC;
}

#box.pink{
background-color: #FF82D2;
}

footer{
text-align: center;
margin: 0;
font-size: 20px;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
color: #fff;
font-weight: 200;
}

/*menu*/
.manu-der{
display: flex;
position: fixed;
cursor: pointer;
top:0;
right: 0;
z-index: 199;
}


.manu-der li{
margin-top: 12px;
padding: 7px;
text-align: center;
list-style: none;
width: 100px;
height: 40px;
background: #2100FF;
}

.manu-der a{
font-size: 20px;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 500;
color: #fff;
margin: 2px;
text-decoration: none;
}

.manu-der li:hover{
transition: 0.3s;
background: #5E73FF;
}


/*menu*/

/*menu*/




/*story*/
.story_senntaku{
max-width: 100%;
text-align: center;
color: #fff;
margin: 0 auto;

}

.game_none{
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
width: 450px;
margin-left: 90px;
}

.game_none h5{
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 400;
color: #fff;
font-size: 16px;
text-align:　left;
}

.stage{
text-align: center;
margin: 0 auto;
padding-top: 60px;
}

.stagedtn{
text-align: center;
margin: 0 auto;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 300;
color: #fff;
}

.stageserihu{
text-align: center;
margin: 0 auto;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 300;
color: #fff;
}

.stage-box img{
width: 250px;
height: 250px;
object-fit: cover;
border: 10px outset #394354;
transition: all .3s;
}

.stage-box img:hover{
filter: brightness(220%);
}

.grid{
text-align: center;
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
margin-top: 5%;

}

.startlines h5{
color: #fff;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 300;
text-align: center;
margin-top: 20px;
font-size:30px;
border-bottom: 2px solid #fff;
}

.tra{
width: 350px;
}

.startlines{
color: #fff;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 100;
text-align: center;
margin-top: 70px;
font-size:18px;
margin: 0 auto;
width: 720px;
}


/*story*/

/*sceeen game*/

#screen{
position: relative;
width: 800px;
height: 685px;
margin: 10px auto;
background-color: #000000;
border: double 4px #fff;
overflow: hidden;
}



#bgimg{
position: absolute;
width: 100%;
height: 80%;
left: 0px;
z-index: 1;
object-fit: cover;
}

#bgimg img{
width: 800px;
}

.itembox{
position: absolute;
top: 110px;
text-align: center;
z-index: 2;
}

.charastand{
position: absolute;
text-align: center;
overflow: hidden;
border-style:none;
z-index: 3;
}

.charastand img{
margin: 0;
padding: 0;
max-width: 100%;
}

.itembox img{
width: 450px;
margin-left: 170px;
}

#charastand1{
width: 550px;
left: 130px;
top: 300px;
image-rendering: -webkit-optimize-contrast;
}

#charastand2{
width: 450px;
left: -20px;
top: 50px;
image-rendering: -webkit-optimize-contrast;
}


#charastand3{
width: 400px;
left: 160px;
top: 25px;
image-rendering: -webkit-optimize-contrast;
}


#charastand4{
width: 450px;
left: 380px;
top: 30px;
image-rendering: -webkit-optimize-contrast;
}

#charastand5{
width: 350px;
left: 200px;
top: 35px;
image-rendering: -webkit-optimize-contrast;
}

#charastand6{
width: 350px;
left: -10px;
top: 20px;
image-rendering: -webkit-optimize-contrast;
}


#charastand7{
width: 200px;
left: 300px;
top: 198px;
image-rendering: -webkit-optimize-contrast;
}

#charastand8{
width: 390px;
left: 210px;
top: 5px;
image-rendering: -webkit-optimize-contrast;
}

#charastand9{
width: 500px;
left: 200px;
top: -15px;
z-index: 2;
image-rendering: -webkit-optimize-contrast;
}


#messbox{
position: absolute;
width: 800px;
height: 850px;
color: #fff;
z-index: 4;
left: -0px;
right: 0px;
margin: auto;
}

#messbox p{
color: #fff;
}

#srcbox{
margin-top: 490px;
border-top: solid 2px #fff;
background-color:  #000;
}

#finally{
width: 15px;
height: 15px;
border: 5px solid #fff;
transform: rotate(45deg);
z-index: 5;
margin-top: 120px;
border-color: #fff #fff transparent transparent;
margin-left: 710px;
position: absolute;
}

#textbox{
position: relative;
width: 750px;
height: 190px;
margin: -10px auto;
opacity: .9;
z-index: 4;
cursor: alias;
}

#text{
color: #fff;
text-shadow:1px 0 10px  #000;
font-size: 1.5rem;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 300;
}

.selectBox{
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-color: hsla(0,0%,0%,0.66);
display: none;
}

.select{
position: absolute;
width: 300px;
height: 60px;
left: 0;
right: 0;
margin: 0 auto;
background: rgba(0,0,0,0.14);
border: solid 3px #fff;
cursor: help;
}

#select1{
top: 50px;
}

#select2{
top: 200px;
}

#select3{
top: 350px;
}

#select4{
top: 10px;
left: -45px;
width: 80px;
height: 80px;
border-radius: 50%;
border: solid 2px #FF0004;
}

#select5{
top: 100px;
left: -200px;
width: 80px;
height: 80px;
border-radius: 50%;
border: solid 2px #FF0004;
}

#select6{
top: 200px;
left: -45px;
width: 80px;
height: 80px;
border-radius: 50%;
border: solid 2px #FF0004;
}


.selectText{
margin: 15px auto;
text-align: center;
color: #fff;
font-size: 1.2rem;
}


.gameoverBox{
position: absolute;
top: 0px;
width: 800px;
height: 800px;
background-image: url("../img/gameover.jpg");
background-size: contain;
background-repeat: no-repeat;
display: none;
}

.gameoverText{
margin: 15px auto;
display: inline-block;
padding: 0.8em 3em;
background-color: #dce9ff; 
box-shadow: 0 5px 0 #34333e; 
border-radius: 60px;
font-size: 1.2rem;
font-weight: 500;
color: #020011;
cursor: pointer;
text-decoration: none; 
}



.gameover{
position: absolute;
width: 300px;
height: 250px;
left: 0;
right: 0;
margin: 0 auto;
cursor: help;
}

.btn:hover {
  box-shadow: none;
  transform: translateY(5px);
}



#gameover1{
top: 550px;
left: 100px;
}

#gameover2{
top: 500px;
left: -430px;
}



.gameoverBox{
position: absolute;
top: 0px;
width: 800px;
height: 800px;
background-image: url("../img/gameover.jpg");
background-size: contain;
background-repeat: no-repeat;
display: none;
}

.gameoverText{
margin: 15px auto;
display: inline-block;
padding: 0.8em 3em;
background-color: #dce9ff; 
box-shadow: 0 5px 0 #34333e; 
border-radius: 60px;
font-size: 1.2rem;
font-weight: 500;
color: #020011;
cursor: pointer;
text-decoration: none; 
}



.gameover{
position: absolute;
width: 300px;
height: 250px;
left: 0;
right: 0;
margin: 0 auto;
cursor: help;
}

.btn:hover {
  box-shadow: none;
  transform: translateY(5px);
}



#gameover1{
top: 550px;
left: 100px;
}

#gameover2{
top: 500px;
left: -430px;
}



.gameoclearBox{
position: absolute;
top: 0px;
width: 800px;
height: 800px;
background-image: url("../img/gameclear.jpg");
background-size: contain;
background-repeat: no-repeat;
display: none;
}

.gameoclearText{
margin: 15px auto;
display: inline-block;
padding: 0.8em 3em;
background-color: #dce9ff; 
box-shadow: 0 5px 0 #34333e; 
border-radius: 60px;
font-size: 1.2rem;
font-weight: 500;
color: #020011;
cursor: pointer;
text-decoration: none; 
}



.gameoclear{
position: absolute;
width: 300px;
height: 250px;
left: 0;
right: 0;
margin: 0 auto;
cursor: help;
}

.btn:hover {
  box-shadow: none;
  transform: translateY(5px);
}



#gameoclear1{
top: 550px;
left: 350px;
}

#gameoclear2{
top: 550px;
left: -200px;
}





.show{
display: block;
z-index: 10;
}

.none{
display: none;
}

@keyframes fadein{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.fadein{
animation-name: fadein;
animation-fill-mode: forwards;
animation-duration: .5s;
animation-timing-function: ease;
}
@keyframes fadeout{
    0%{
        opacity: 1;
    }100%{
        opacity: 0;
    }
}
.fadeout{
animation-name: fadeout;
animation-fill-mode: forwards;
animation-duration: .5s;
animation-timing-function: ease;
}
@keyframes fadeoutin{
    0%{
        opacity: 1;
    }50%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.fadeoutin{
animation-name: fadeoutin;
animation-fill-mode: forwards;
animation-duration: .0.5s;
animation-timing-function: ease;
}
/*sceeen game*/


@media screen and (max-width:400px){

/*sceeen game*/

#screen{
position: relative;
width: 350px;
height: 575px;
margin: 10px auto;
background-color: #000000;
overflow: hidden;
}

.mute_btn{
max-width:100%;
margin: 0 auto;
box-sizing: border-box;
background-color: #A1FFFC;
color: rgba(0,0,0,1.00);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: 45px;
width: 300px;
font-size: 13px;
}

#box{
background-color: #A1FFFC;
}

#box.pink{
background-color: #FF82D2;
}
#bgimg{
position: absolute;
width: 100%;
height: 50%;
left: 0px;
z-index: 1;
object-fit: cover;
}

#bgimg img{
width: 350px;
}

	
.itembox{
position: absolute;
width: 300px;
height: 780px;
top: 4px;
left: -75px;
text-align: center;
z-index: 4;
}

.charaposition{
position: absolute;
text-align: center;
overflow: hidden;
border-style:none;
z-index: 3;
}

.charaposition img{
margin: 0;
padding: 0;
max-width: 100%;
}

.itembox img{
width: 320px;
margin-left: 90px;
top: 180px;
}

#charastand1{
width: 360px;
left: 15px;
top: 250px;
image-rendering: -webkit-optimize-contrast;
}

#charastand2{
width: 250px;
left: -60px;
top: 80px;
image-rendering: -webkit-optimize-contrast;
}

#charastand3{
width: 300px;
left: 15px;
top: 55px;
z-index: 2;
}

#charastand4{
width: 250px;
left: 160px;
top: 80px;
image-rendering: -webkit-optimize-contrast;
}

#charastand5{
width: 280px;
left: 35px;
top: 10px;
image-rendering: -webkit-optimize-contrast;
}

#charastand6{
width: 190px;
left: -30px;
top: 100px;
image-rendering: -webkit-optimize-contrast;
}
    
#charastand7{
width: 150px;
left: 100px;
top: 50px;
image-rendering: -webkit-optimize-contrast;
}

#charastand8{
width: 300px;
left: 20px;
top: 15px;
image-rendering: -webkit-optimize-contrast;
}

#charastand9{
width: 340px;
left: 30px;
top: -15px;
z-index: 2;
image-rendering: -webkit-optimize-contrast;
}

#messbox{
position: absolute;
width: 370px;
height: 850px;
z-index: 4;
left: -5px;
right: 0px;
margin: auto;
}

#srcbox{
margin-top: 370px;
border-top: solid 2px #fff;
background-color:  #000;
}

#finally{
width: 15px;
height: 15px;
border: 5px solid #fff;
transform: rotate(45deg);
z-index: 5;
margin-top: 130px;
border-color: #fff #fff transparent transparent;
margin-left: 280px;
position: absolute;
}
    
    
#textbox{
width: 330px;
height: 190px;
margin: 10px auto;
opacity: .9;
z-index: 4;
cursor: alias;
}

#text{
color: #fff;
text-shadow:1px 0 10px  #000;
font-size: 0.8rem;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 400;
}

.selectBox{
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-color: hsla(0,0%,0%,0.66);
display: none;
}

.select{
position: absolute;
width: 200px;
height: 60px;
left: 0;
right: 0;
margin: 0 auto;
background: rgba(0,0,0,0.14);
border: solid 2px #fff;
cursor: help;
}

#select1{
top: 50px;
border: solid 5px #fff;
}

#select2{
top: 200px;
border: solid 5px #fff;
}

#select3{
top: 350px;
border: solid 5px #fff;
}
    
#select4{
top: 10px;
left: -45px;
width: 50px;
height: 50px;
background: rgba(0,0,0,0.00);
border-radius: 50%;
border: solid 3px #FF0004;
}

#select5{
top: 100px;
left: -200px;
width: 50px;
height: 50px;
background: rgba(0,0,0,0.00);
border-radius: 50%;
border: solid 3px #FF0004;
}

#select6{
top: 100px;
left: -45px;
width: 50px;
height: 50px;
background: rgba(0,0,0,0.00);
border-radius: 50%;
border: solid 3px #FF0004;
}



.selectText{
margin: 15px auto;
text-align: center;
color: #fff;
font-size: 1.0rem;
}



.gameoverBox{
position: absolute;
top: 0px;
width: 370px;
height: 850px;
background-image: url("../img/gameover2.jpg");
background-size: contain;
background-repeat: no-repeat;
display: none;
}

.gameoverText{
margin: 15px auto;
display: inline-block;
padding: 0.8em 3em;
background-color: #dce9ff; 
box-shadow: 0 5px 0 #34333e; 
border-radius: 60px;
font-size: 1.2rem;
font-weight: 500;
color: #020011;
cursor: pointer;
text-decoration: none; 
}



.gameover{
position: absolute;
width: 300px;
height: 250px;
left: 0;
right: 0;
margin: 0 auto;
cursor: help;
}

.btn:hover {
  box-shadow: none;
  transform: translateY(5px);
}



#gameover1{
top: 450px;
left: 85px;
}

#gameover2{
top: 500px;
left: -430px;
}



.gameoclearBox{
position: absolute;
top: 0px;
width: 370px;
height: 850px;
background-image: url("../img/gameclear2.jpg");
background-size: contain;
background-repeat: no-repeat;
display: none;
}

.gameoclearText{
margin: 15px auto;
display: inline-block;
padding: 0.8em 3em;
background-color: #dce9ff; 
box-shadow: 0 5px 0 #34333e; 
border-radius: 60px;
font-size: 0.7rem;
font-weight: 500;
color: #020011;
cursor: pointer;
text-decoration: none; 
}



.gameoclear{
position: absolute;
width: 150px;
height: 80px;
left: 0;
right: 0;
margin: 0 auto;
cursor: help;
}

.btn:hover {
  box-shadow: none;
  transform: translateY(5px);
}



#gameoclear1{
top: 350px;
left: 160px;
}

#gameoclear2{
top: 350px;
left: -200px;
}



.show{
display: block;
z-index: 10;
}

.none{
display: none;
}

@keyframes fadein{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.fadein{
animation-name: fadein;
animation-fill-mode: forwards;
animation-duration: .5s;
animation-timing-function: ease;
}
@keyframes fadeout{
    0%{
        opacity: 1;
    }100%{
        opacity: 0;
    }
}
.fadeout{
animation-name: fadeout;
animation-fill-mode: forwards;
animation-duration: .5s;
animation-timing-function: ease;
}
@keyframes fadeoutin{
    0%{
        opacity: 1;
    }50%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
.fadeoutin{
animation-name: fadeoutin;
animation-fill-mode: forwards;
animation-duration: .5s;
animation-timing-function: ease;
}


}