@charset "utf-8";
:root{
	/*メイン画像影*/
	--main_shadow-color:0px 0px 6px 3px #915146;
	--back_op:0.5;
}
*{margin: 0px; padding: 0px;}
html{
	scrollbar-base-color :rgba(255,255,255,1);
}
body{
	background-color : #123456;
	overflow : hidden;
	user-select: none
}
img{
	display: block;
	vertical-align:bottom;
}
#window_title{
	width:80%;
	margin-right: auto;
    margin-left : auto;
	font-size : 150%;
	text-align : center;
	color : #000000;
	background : #ffffffDD;
}
#Main_Canvas{
	display: block;
	position: relative;
	top :0;
	left :0;
	width : 100%;
	height: 100vh;
	z-index: 1;
}
#fade_effect{
	top : 0px;
	left : 0px;
	width : 100%;
	height: 100vh;
	position: absolute;
	z-index: 10000;
	display: block;
	pointer-events: none;
}
.home_icon{
	
}
#list_brack{
	position : fixed;
	z-index :1001;
	top: 0;
	left : 0;
	width : 100%;
	height : 100%;
	opacity : 0.7;
}
@media screen and (orientation: portrait) {/* 縦向き */
#home_window{
	top : 0px;
	left : 0px;
	width : 100%;
	height: 50vh;
	position: absolute;
	z-index: 0;
}
#home_window img{
	width : 100%;
	height: 100vh;
	opacity: var(--back_op);
}
.home_icon_lineA{
	top: 0;
	left: 50%;
	width : 100%;
	height: 30vh;
	position: absolute;
	z-index: 11;
}
.home_icon_lineB{
	top: 25%;
	left: 25%;
	width : 100%;
	height: 60vh;
	position: absolute;
	z-index: 12;
}
.home_icon_rowC{
	width : 80%;
	height: 23vh;
	transform: translate(-50%, 0);
	float : left;
	border-radius: 5px;
	margin: 1%;
	background-color : #ffffff;
	cursor: pointer;
}
.home_icon_rowC:hover{
	background-color : #ff8888;
}
.home_icon_rowA{
	width : auto;
	height: 70%;
}
.home_icon_rowA img{
	width : auto;
	height: 100%;
}
.home_icon_row{
	width : 47%;
	height: 23vh;
	transform: translate(-50%, 0);
	float : left;
	border-radius: 5px;
	margin: 1%;
	background-color : #ffffff;
	cursor: pointer;
}
.home_icon_row:hover{
	background-color : #ff8888;
}
.home_icon_row img{
	width : auto;
	height: 70%;
}
.home_text{
	width : auto;
	height: 30%;
}
.home_text img{
	width : auto;
	height: 100%;
}
#left_space{
	top : 0px;
	left : 0px;
	width : 50%;
	height: 100vh;
	position: absolute;
	z-index: 51;
}
#right_space{
	top : 0px;
	right : 0px;
	width : 50%;
	height: 100vh;
	position: absolute;
	z-index: 52;
}
#left_button_space{
	width : 98%;
	height: 98%;
	margin: 1%;
	vertical-align: bottom;
	background-color : #88ff88;
	border-radius: 5px;
}
#right_button_space{
	width : 98%;
	height: 98%;
	margin: 1%;
	vertical-align: bottom;
	background-color : #88ff88;
	border-radius: 5px;
}
#chapta_back_space{
	bottom: 2px;
	left : 1%;
	width : 48%;
	height: 13vh;
	position: absolute;
	z-index: 61;
	display: block;
	background-color : #8888ff;
	border-radius: 5px;
}
#chapta_back_space img{
	height: 100%;
	margin: 0;
	pointer-events: none;
}
#chapta_next_space{
	bottom: 2px;
	right : 1%;
	width : 48%;
	height: 13vh;
	position: absolute;
	z-index: 62;
	display: block;
	background-color : #8888ff;
	border-radius: 5px;
}
#chapta_next_space img{
	height: 100%;
	margin: 0;
	float: right;
	pointer-events: none;
}
#left_button_space:active{
	filter: hue-rotate(180deg);
}
#right_button_space:active{
	filter: hue-rotate(180deg);
}
#chapta_back_space:active{
	filter: hue-rotate(180deg);
}
#chapta_next_space:active{
	filter: hue-rotate(180deg);
}
#icon_back{
	bottom : 15vh;
	left : 2px;
	position: absolute;
	z-index: 53;
	pointer-events: none;
}
#icon_back img{
	width : 20vw;
	display:inline
}
#icon_next{
	bottom : 15vh;
	right : 2px;
	position: absolute;
	z-index: 54;
	pointer-events: none;
}
#icon_next img{
	width : 20vw;
	display:inline
}
#menu_space{
	bottom: 15vh;
	right : 25%;
	width : 24%;
	height: 13vh;
	position: absolute;
	z-index: 71;
	display: block;
	background-color : #ffffff;
	border-radius: 5px;
}
#menu_space img{
	height: 13vh;
	margin:auto;
	pointer-events: none;
}
#sound_space{
	bottom: 15vh;
	left : 25%;
	width : 24%;
	height: 13vh;
	position: absolute;
	z-index: 72;
	display: block;
	background-color : #ffffff;
	border-radius: 5px;
}
#sound_space img{
	height: 13vh;
	margin:auto;
	pointer-events: none;
}
#image_space{
	top : 4vh;
	left: 0;
	right: 0;
	margin: auto;
	width : 100%;
	position: absolute;
	z-index: 102;
	display: block;
}
#image_space img{
	width : 100%;
	display: block;
}
#preimage_space{
	top : 4vh;
	left: 0;
	right: 0;
	margin: auto;
	width : 100%;
	position: absolute;
	z-index: 101;
	display: block;
}
#preimage_space img{
	width : 100%;
	display: block;
}
#back_space{
	top : 4vh;
	left: 0;
	right: 0;
	margin: auto;
	width : 100%;
	position: absolute;
	z-index: 100;
	display: block;
}
#back_space img{
	width : 100%;
	display: block;
	box-shadow:var(--main_shadow-color);
}
#list_main{
	top : 0px;
	left : 0px;
}
#list_subA{
	position : absolute;
	top : 8vh;
	z-index :1002;
	margin: 0 1%;
	width : 98%;
	height: 91vh;
	overflow: auto;
}
#list_subB{
	
}
#list_subC{
	position : absolute;
	top : 0px;
	left : 0px;
	z-index :1003;
	margin: 2px 0px;
	width : 98%;
	height: 8vh;
	font-size:3vh;
	text-align: center;
}
#list_box_main{
	width : 68%;
	height: 7vh;
	margin: 2px 1%;
	border-radius: 5px;
	background : #ffffff;
	float : left;
}
#list_boxA{
	
}
#list_boxB{
	width : 28%;
	height: 7vh;
	margin: 2px 1%;
	border-radius: 5px;
	background : #aaaaff;
	float : left;
}
.list_img{
	width : 48%;
	margin: 0.5%;
	padding: 0.5%;
	float : left;
	background : #ffffff;
}
.list_img:hover{
	background-color : #ff8888;
}
.list_img img{
	width : 100%;
}
#list_subA02{
	position : absolute;
	top : 8vh;
	z-index :1002;
	height: 90vh;
}
.menu_list_base{
	width : 32%;
	height: 90vh;
	margin: 0.5%;
	float : left;
	background : #ffffff;
	border-radius: 5px;
	overflow: auto;
}
.menu_sub_title{
	width : 99%;
	margin: 0.5%;
	float : left;
	background : #ccffcc;
	border-radius: 5px;
	text-align: center;
}
.menu_button_frame{
	width : 99%;
	height: 13vh;
	margin: 1% 0.5%;
	float : left;
	background : #ccccff;
	border-radius: 5px;
}
.menu_button_frame_left img{
	width : 49%;
	height: 13vh;
	margin: 0.5%;
	float : left;
	pointer-events: none;
}
.menu_button_frame_right img{
	width : 49%;
	height: 13vh;
	margin: 0.5%;
	float : right;
	pointer-events: none;
}
.slide_text_box{
	width : 99%;
	height: 12vh;
	font-size:8vh;
	margin: 0.5%;
	margin: auto;
	text-align: center;
}
.menu_button_frame_top{
	width : 99%;
	height: 13vh;
	font-size:3vh;
	text-align: center;
}
.menu_button_frame_top img{
	height: 9vh;
	margin:auto;
	display: block;
	pointer-events: none;
}
#help_main{
	position : absolute;
	top : 0;
	left : 0px;
	z-index :500;
	float : left;
	width : 100%;
	height:4vh;
}
#help_main br{
	display: none;
}
#help_page{
	text-align: left;
	float : left;
	width : 50%;
	height:4vh;
	background : #ff8888;
}
#help_timer{
	text-align: left;
	float : left;
	width : 50%;
	height:4vh;
	background : #bbbb44;
}
#help_page:active{
	filter: hue-rotate(180deg);
}
#help_timer:active{
	filter: hue-rotate(180deg);
}
}/* 縦向き */
@media screen and (orientation: landscape) {/* 横向き */
#home_window{
	top: 0;
	left: 0;
	width : 100%;
	height: 100vh;
	position: absolute;
	z-index: 0;
}
#home_window img{
	width : 100%;
	height: 100vh;
	opacity: var(--back_op);
}
.home_icon_lineA{
	top: 0;
	left: 50%;
	width : 100%;
	height: 30vh;
	position: absolute;
	z-index: 11;
}
.home_icon_lineB{
	top: 33%;
	left: 17.5%;
	width : 100%;
	height: 60vh;
	position: absolute;
	z-index: 12;
}
.home_icon_rowC{
	width : 50%;
	height: 28vh;
	transform: translate(-50%, 0);
	float : left;
	border-radius: 5px;
	margin: 1%;
	background-color : #ffffff;
	cursor: pointer;
}
.home_icon_rowC:hover{
	background-color : #ff8888;
}
.home_icon_rowA{
	width : auto;
	height: 70%;
}
.home_icon_rowA img{
	width : auto;
	height: 100%;
}
.home_icon_row{
	width : 30%;
	height: 28vh;
	transform: translate(-50%, 0);
	float : left;
	border-radius: 5px;
	margin: 1%;
	background-color : #ffffff;
	cursor: pointer;
}
.home_icon_row:hover{
	background-color : #ff8888;
}
.home_icon_row img{
	width : auto;
	height: 70%;
}
.home_text{
	width : auto;
	height: 30%;
}
.home_text img{
	width : auto;
	height: 100%;
}
#left_space{
	top : 0px;
	left : 0px;
	width : 50%;
	height: 100vh;
	position: absolute;
	z-index: 51;
	display: block;
}
#right_space{
	top : 0px;
	right : 0px;
	width : 50%;
	height: 100vh;
	position: absolute;
	z-index: 52;
	display: block;
}
#left_button_space{
	width : 98%;
	height: 98%;
	margin: 1%;
	display: block;
	background-color : #88ff88;
	border-radius: 5px;
}
#right_button_space{
	width : 98%;
	height: 98%;
	margin: 1%;
	display: block;
	background-color : #88ff88;
	border-radius: 5px;
}
#chapta_back_space{
	top : 2vh;
	left : 1%;
	width : 40%;
	height: 13vh;
	position: absolute;
	z-index: 61;
	display: block;
	background-color : #8888ff;
	border-radius: 5px;
}
#chapta_back_space img{
	width : 6vw;
	height: 13vh;
	margin: 0;
	pointer-events: none;
}
#chapta_next_space{
	top : 2vh;
	right : 1%;
	width : 40%;
	height: 13vh;
	position: absolute;
	z-index: 62;
	display: block;
	background-color : #8888ff;
	border-radius: 5px;
}
#chapta_next_space img{
	width : 6vw;
	height: 13vh;
	margin: 0;
	float : right;
	pointer-events: none;
}
#left_button_space:active{
	filter: hue-rotate(180deg);
}
#right_button_space:active{
	filter: hue-rotate(180deg);
}
#chapta_back_space:active{
	filter: hue-rotate(180deg);
}
#chapta_next_space:active{
	filter: hue-rotate(180deg);
}
#icon_back{
	top : 50%;
	left : 2px;
	transform: translate(0, -50%);
	position: absolute;
	z-index: 53;
	pointer-events: none;
}
#icon_back img{
	width : 8vw;
	height: auto;
}
#icon_next{
	top : 50%;
	right : 2px;
	transform: translate(0, -50%);
	position: absolute;
	z-index: 54;
	pointer-events: none;
}
#icon_next img{
	width : 8vw;
	height: auto;
}
#menu_space{
	bottom: 2vh;
	right : 1%;
	width : 40%;
	height: 13vh;
	position: absolute;
	z-index: 71;
	display: block;
	background-color : #ffffff;
	border-radius: 5px;
}
#menu_space img{
	width : 6vw;
	height: 13vh;
	float : right;
	pointer-events: none;
}
#sound_space{
	bottom: 2vh;
	left : 1%;
	width : 40%;
	height: 13vh;
	position: absolute;
	z-index: 72;
	display: block;
	background-color : #ffffff;
	border-radius: 5px;
}
#sound_space img{
	width : 6vw;
	height: 13vh;
	pointer-events: none;
}
#image_space{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	z-index: 102;
}
#image_space img{
	height: 100vh;
	display: block;
}
#preimage_space{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	z-index: 101;
}
#preimage_space img{
	height: 100vh;
	display: block;
	opacity: 0;
}
#back_space{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	z-index: 100;
}
#back_space img{
	height: 100vh;
	display: block;
	box-shadow:var(--main_shadow-color);
}
#list_main{
	top : 0px;
	left : 0px;
}
#list_subA{
	position : absolute;
	top : 8vh;
	z-index :1002;
	margin: 0px 1%;
	width : 98%;
	height: 90vh;
	overflow: auto;
}
#list_subB{
	
}
#list_subC{
	position : absolute;
	top : 0px;
	left : 0px;
	z-index :1003;
	margin: 0px 1%;
	width : 98%;
	height: 8vh;
	font-size:5vh;
	text-align: center;
}
#list_box_main{
	width : 68%;
	height: 7vh;
	margin: 2px 1%;
	border-radius: 5px;
	background : #ffffff;
	float : left;
}
#list_boxA{
	
}
#list_boxB{
	width : 28%;
	height: 7vh;
	margin: 2px 1%;
	border-radius: 5px;
	background : #aaaaff;
	float : left;
}
.list_img{
	width : 23%;
	margin: 0.5%;
	padding: 0.5%;
	float : left;
	background : #ffffff;
}
.list_img:hover{
	background-color : #ff8888;
}
.list_img img{
	width : 100%;
}
#list_subA02{
	position : absolute;
	top : 8vh;
	z-index :1002;
	height: 90vh;
}
.menu_list_base{
	width : 19%;
	height: 90vh;
	margin: 0.5%;
	float : left;
	background : #ffffff;
	border-radius: 5px;
	overflow: auto;
}
.menu_sub_title{
	width : 99%;
	margin: 0.5%;
	float : left;
	background : #ccffcc;
	border-radius: 5px;
	text-align: center;
}
.menu_button_frame{
	width : 99%;
	height: 13vh;
	margin: 1% 0.5%;
	float : left;
	background : #ccccff;
	border-radius: 5px;
}
.menu_button_frame_left img{
	width : 49%;
	height: 13vh;
	margin: 0.5%;
	float : left;
	pointer-events: none;
}
.menu_button_frame_right img{
	width : 49%;
	height: 13vh;
	margin: 0.5%;
	float : right;
	pointer-events: none;
}
.slide_text_box{
	width : 99%;
	height: 12vh;
	font-size:10vh;
	margin: 0.5%;
	margin: auto;
	text-align: center;
}
.menu_button_frame_top{
	width : 99%;
	height: 13vh;
	font-size:3vh;
	text-align: center;
}
.menu_button_frame_top img{
	height: 9vh;
	margin:auto;
	display: block;
	pointer-events: none;
}
#help_main{
	position : absolute;
	bottom : 2vh;
	left : 0px;
	z-index :81;
	float : left;
	margin: 0px 1%;
	width : 20%;
}
#help_page{
	text-align: left;
	margin: 1% 0;
	background : #ff8888;
	border-radius: 5px;
}
#help_timer{
	text-align: left;
	margin: 1% 0;
	background : #bbbb44;
	border-radius: 5px;
}
#help_page:active{
	filter: hue-rotate(180deg);
}
#help_timer:active{
	filter: hue-rotate(180deg);
}
}/* 横向き */