@charset "UTF-8";
@font-face{font-family:'rounded-mplus-1c-regular';src:url(rounded-mplus-1c-regular.ttf) format('truetype');}




/*--------------------------------*/
/*--------------------------------*/

/*　UIの色と角丸め　*/
#control,article,#hallowindow,#guidwindow{
border-radius:10px;
background-color:rgba(0,0,0,0.7);
}

/*　テキストの色と大きさ　*/
p{
font-size:18px;
color:white;
}

/*--------------------------------*/

html{
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

html, body, #main {
height:100%;
background:black;
}

audio{
display:none;
}

#main {
position: relative;
width:100%;
height:100%;
}

#contents{
width: 100vw;
height:100vh;
max-width:177.77vh;
max-height:56.25vw;
position: absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
min-width:1024px;
min-height:576px;
}

video{
width:100%;
position: absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
}

#txtwindow{
position:relative;
width:100%;
height:97%;
overflow:hidden;
position: absolute;
bottom: 0;
}

p{
font-family: "rounded-mplus-1c-regular";
cursor : default;
transform: rotate(0.028deg);
-o-transform: rotate(0.028deg);
-ms-transform: rotate(0.028deg);
-moz-transform: rotate(0.028deg);
-webkit-transform: rotate(0.028deg);
line-height:25px;
}

#txts{
position: absolute;
bottom: 0;
margin:10px;
}

nav{
position:absolute;
bottom:20px;
width:100%;
height:40px;
}

#control{
width:95%;
height:100%;
position:relative;
margin:0 auto;
}

article{
position:absolute;
bottom:70px;
left:10px;
width:300px;
height:500px;
}

#buttons_play{
position:absolute;
bottom:0;
right:160px;
width:160px;
height:40px;
text-align:right;
}

#buttons_camera{
position:absolute;
bottom:0;
right:320px;
width:240px;
height:40px;
text-align:right;
}


#buttons_voice1{
position:absolute;
bottom:50px;
right:74px;
width:64px;
height:64px;
text-align:right;
border-radius:10px;
background-color:rgba(0,0,0,0.7);"
}
#buttons_voice2{
position:absolute;
bottom:50px;
right:0px;
width:64px;
height:64px;
text-align:right;
border-radius:10px;
background-color:rgba(0,0,0,0.7);"
}









#buttons_slider{
position:absolute;
bottom:0;
right:80px;
width:80px;
height:40px;
text-align:center;
}

#slider{
width:60px;
height:40px;
padding:0px;
margin:0px;
}


#buttons_sys{
position:absolute;
bottom:0;
right:0;
width:80px;
height:40px;
text-align:right;
}

#chapter{
position:absolute;
bottom:0;
left:0;
width:400px;
height:40px;
vertical-align:middle;
display:table;
}

#chaptitle{
display:table-cell;
vertical-align:middle;
width:210px;
padding-left:15px;
color:white;
font-family: "rounded-mplus-1c-regular";
font-size:20px;
cursor : default;
transform: rotate(0.028deg);
-o-transform: rotate(0.028deg);
-ms-transform: rotate(0.028deg);
-moz-transform: rotate(0.028deg);
-webkit-transform: rotate(0.028deg);
display:table-cell;
vertical-align: middle;
}

#chapicons_wrap{
display:table-cell;
vertical-align:middle;
}

#tester,#autoplay,#autoplay_on,#ico_stop ,#repbutton,#ico_back,#ico_next,#cam1,#cam2,#cam3,#cam4,#fsstart,#fsend,#tohome,#fsstart_top,#fsend_top{
width:40px;
height:40px;
border:0px;
background-color:rgba(0,0,0,0);
background-image:url("testicon.png");
overflow:visible;
cursor:pointer;
}


#voice1,#voice2{
width:64px;
height:64px;
border:0px;
background-color:rgba(0,0,0,0);
background-image:url("testicon.png");
overflow:visible;
cursor:pointer;
}



#ico_stop{
background-image:url("stop.png");
}

#ico_back{
background-image:url("back.png");
}

#ico_next{
background-image:url("next.png");
}

#cam1{
background-image:url("video1.png");
}
#cam2{
background-image:url("video2.png");
}
#cam3{
background-image:url("video3.png");
}

#autoplay{
background-image:url("autoplay.png");
}
#autoplay_on{
background-image:url("autoplay_on.png");
}

#repbutton{
background-image:url("replay.png");
}
#fsstart,#fsstart_top{
background-image:url("fullscreen_on.png");
}
#fsend,#fsend_top{
background-image:url("fullscreen_off.png");
}
#tohome{
background-image:url("home.png");
}
#voice1{
background-image:url("voice1.png");
}
#voice2{
background-image:url("voice2.png");
}
#voice3{
background-image:url("voice3.png");
}
#voice4{
background-image:url("voice4.png");
}

#fsstart_top,#fsend_top{
position:absolute;
bottom:10px;
right:10px;
}

.capicons,.capicons_now{
display:inline-block;
width:24px;
height:40px;
border:0px;
background-color:rgba(0,0,0,0);
background-image:url("page.png");
overflow:visible;
}

.capicons_now{
background-image:url("page_now.png");
}

#curtain {
position: absolute;
top: 0px;
width:100%;
height:100%;
z-index:100;
background:black;
}













.chapthumb{
width:25%;
height:33.3333%;
float:left;
opacity:0.7;

}

.chapthumb:hover{
opacity:1;
z-index:300;

}


#title{
width:50%;
height:50%;
float:left;
z-index:1;
}

#topwindow{
width:79.5%;
height:100%;
position:absolute;
left:10.25%;
top:0;
background:black;
display:none;
box-shadow:0px 0px 100px -15px #000;
}

#topwindow img{
width:100%
}



#top_background{
width:100%;
height:100%;
position:absolute;
top:0;
background-color:rgba(0,20,10,0.7);
background-image: url("background.png");
display:none;
}




/*

#menu{
text-align:right;
width:50%;
height:100%;
display:table-cell;;
vertical-align: middle;
}

#names{
text-align:left;
width:50%;
height:100%;
display:table-cell;;
vertical-align: middle;
border-left: dashed 1px #9d3272 ;
}

#menu_wrap{
width:50%;
height:50%;
position:absolute;
bottom:0;
right:0;
display:table;
}

*/




#menu{
text-align:right;
width:50%;
align-items: center;
border-right: dashed 1px #008888 ;
}

#names{
text-align:left;
width:50%;
}

#menu_wrap{
width:50%;
height:50%;
position:absolute;
bottom:0;
right:0;
display: flex;
justify-content: center;
align-items: center;
}






#menu_wrap p{
font-size:22px;
padding:10px;
}





.menu{
text-shadow: 0px 5px 20px #008888, 5px 0px 20px #008888, 0px -5px 20px #008888, -5px 0px 20px #008888;
cursor:pointer;
text-decoration: underline
}
.menu:hover{
text-shadow: 0px 5px 20px #00ffff, 5px 0px 20px #00ffff, 0px -5px 20px #00ffff, -5px 0px 20px #00ffff;
}

.notmenu{
text-shadow: 0px 5px 20px #008888, 5px 0px 20px #008888;
}

#titlefs{
position:absolute;
bottom:0;
right:0;
width:50px;
height:50px;
}






#hallowindow p{
position:absolute;
bottom:30px;
text-shadow:0px -1px 2px #000000,0px 1px 2px #000000,1px 0px 2px #000000,-1px 0px 2px #000000;
}
#guidwindow,#hallowindow{
width:50%;
position:absolute;
left:-3%;
top:5%;
bottom:5%;
display:none;
overflow:hidden;
padding:1%;
}

#guidwindow img{
width:30px;
vertical-align: middle;
padding-bottom: 3px;
}


#guidwindow p{
display:table-cell;
width:50%;
padding:0 5px;
color:#bbb;
}


#guidwindow_txt{
display:table;
width:100%;
margin-top:10px;
}






#fsstart{
display:inline;
}
#fsend{
display:none;
}

:-webkit-full-screen #fsstart {display:none;}
:-moz-full-screen #fsstart {display:none;}
:full-screen #fsstart {display:none;}
:fullscreen #fsstart {display:none;}
:-webkit-full-screen #fsend {display:inline;}
:-moz-full-screen #fsend {display:inline;}
:full-screen #fsend {display:inline;}
:fullscreen #fsend {display:inline;}


#fsstart_top{
display:inline;
}
#fsend_top{
display:none;
}

:-webkit-full-screen #fsstart_top {display:none;}
:-moz-full-screen #fsstart_top {display:none;}
:full-screen #fsstart_top {display:none;}
:fullscreen #fsstart_top {display:none;}
:-webkit-full-screen #fsend_top {display:inline;}
:-moz-full-screen #fsend_top {display:inline;}
:full-screen #fsend_top {display:inline;}
:fullscreen #fsend_top {display:inline;}