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


/*****************************/
/*         z-index一覧        	*/
/*         #scene:1        		*/
/*         #scene_inner:1       	 */
/*         .scene_backside:2        */
/*         #charactor:3        	*/
/*         #command:4       	 */
/*         #battle_window:5       	 */
/*         #sub_window:6       	 */
/*         #sub_window_nego_choice:7       	 */
/*         #move_window:8       	 */
/*         #command_window:9        */
/*         #sub_window_note1:10       	 */
/*****************************/


/*general*/
html,body{
	font-family: 'Helvetica Neue',Helvetica,Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
	-webkit-overflow-scrolling: touch;
	background: #000;
}

h2{
	color: #fff;
}
#main{
	padding: 2%;
    font-size: 1.2em;
    border-radius: 15px;
	max-width: 85%;
    margin: 3% auto;
}
a{
	color: #fff;
	text-decoration: none;
}
a:hover{
	color: aqua;
	text-decoration: none;
}
#footer{
    color: #fff;
    margin: 0 auto;
    display: block;
    width: 20%;
    text-align: center;
}


#scene{
	width: 100vw;
	height: 100vh;
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
}
#scene_inner{
	width: 100vw;
	height: 100vh;
	z-index: 1;
	position: relative;
	top: 0;
	left: 0;
}
.scene_img,
.scene_img_for_road{
	width: 100%;
	background: #000;
	position: absolute;
}
#scene img{
	object-fit: cover;
    width: 100%;
    height: 100vh;
	opacity: 0.8;
    filter: blur(3px);
}
.scene_fadeout{
	animation:scene_fadeoutAnime 0.8s forwards;
	opacity:1;
}
@keyframes scene_fadeoutAnime{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
.scene_fadein{
	animation:scene_fadeinAnime 0.8s backwards;
	animation-delay: 0.8s;
	opacity:0;
}
@keyframes scene_fadeinAnime{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.scene_backside{
	z-index:2;
}
#charactor{
	width: 100vw;
	height: 100vh;
	z-index: 3;
	position: fixed;
	top: 0;
	left: 0;
}
.charactor_inner{
	width: 100%;
}
#charactor img{
	object-fit: contain;
    width: 100%;
    height: 100vh;
}
#command{
	width: 100vw;
	height: 100vh;
	z-index: 4;
	position: fixed;
	top: 0;
	left: 0;
}
#command img{
	object-fit: contain;
}
#command #command_game_title{
	position: fixed;
    top: 0;
    left: 0;
    background: #444;
    color: #fff;
    padding: 5px 8px;
    border-radius: 0 0 5px 0;
}
#command #command_scene_name{
	position: fixed;
	top: calc(1em + 15px);
    left: 0;
    background: #444;
    color: #fff;
    padding: 5px 8px;
    border-radius: 0 0 5px 0;
}
.command_right_up{
	position: fixed;
    top: 0;
    right: 0;
	width: 150px;
    background: #444;
    padding: 5px 8px;
	text-align: center;
    border-radius: 0 0 0 5px;
}
#command #command_menu{
    background: #444;
    color: #fff;
    padding: 5px 8px;
	margin: 5px;
    cursor: pointer;
}
#command #command_move{
    background: #444;
    color: #fff;
    padding: 5px 8px;
	margin: 5px;
    cursor: pointer;
}
#command #command_enemy,
#command #command_gacha{
    background: #444;
    color: #fff;
    padding: 5px 8px;
	margin: 5px;
    cursor: pointer;
}

/* コマンドウィンドウ */
#command_window{
	z-index: 9;
    position: fixed;
    width: 84vw;
    height: 90vh;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    padding: 5vh 8vw;
}
#command_window_inner{}
#command_window_menu{
	background: #fff;
    padding: 2% 3%;
}
#command_window_menu_close{
	position: fixed;
    right: 9vw;
    font-size: 200%;
    top: 6vh;
    cursor: pointer;
}
.command_window_menu_ttl{
	font-size: 120%;
    font-weight: bold;
    text-align: center;
    width: 100%;
    display: block;
}
.command_window_menu_status_ttl,
.command_window_menu_item_ttl,
.command_window_menu_equip_ttl{
	font-size: 120%;
    font-weight: bold;
}
.command_window_menu_status_inner{
	padding: 1% 2%;
}
.command_window_menu_status_hp_wrap{margin: 10px;}
.command_window_menu_status_hp_ttl{
	background: #7c7c7c;
    padding: 2px 5px;
    box-sizing: border-box;
    margin: 3px;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}
.command_window_menu_status_hp_bar{}
.command_window_menu_status_mp_wrap{margin: 10px;}
.command_window_menu_status_mp_ttl{
	background: #7c7c7c;
    padding: 2px 5px;
    box-sizing: border-box;
    margin: 3px;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}
.command_window_menu_status_mp_bar{}
.command_window_menu_status_power_wrap{
	display: inline-block;
    margin: 10px;
}
.command_window_menu_status_power_ttl{
	background: #7c7c7c;
    padding: 2px 12px;
    box-sizing: border-box;
    margin: 3px;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}
.command_window_menu_status_power_value{}
.command_window_menu_status_quickness_wrap{
	display: inline-block;
    margin: 10px;
}
.command_window_menu_status_quickness_ttl{
	background: #7c7c7c;
    padding: 2px 5px;
    box-sizing: border-box;
    margin: 3px;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}
.command_window_menu_status_quickness_value{}
.command_window_menu_status_diffence_wrap{
	display: inline-block;
    margin: 10px;
}
.command_window_menu_status_diffence_ttl{
	background: #7c7c7c;
    padding: 2px 5px;
    box-sizing: border-box;
    margin: 3px;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}
.command_window_menu_status_diffence_value{}


/* サブウィンドウ */
#sub_window{
	z-index: 6;
    position: fixed;
    width: 84vw;
    height: 90vh;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    padding: 5vh 8vw;
	overflow-y: scroll;
}
#sub_window_inner{}
#move_window{
	background: #fff;
    padding: 0.5% 1%;
	z-index: 8;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 20vw;
	border-radius: 15px 0 0 0;
}
.move_window_ttl{
	font-size: 120%;
    font-weight: bold;
    text-align: center;
    width: 100%;
    display: block;
}
.move_window_for_outside_wrap,
.move_window_for_gohome_wrap,
.move_window_for_forward_wrap,
.move_window_for_backward_wrap,
.move_window_for_where_wrap{
	display: inline-block;
    margin: 2%;
    box-sizing: border-box;
}
.move_window_for_outside_btn,
.move_window_for_gohome_btn,
.move_window_for_forward_btn,
.move_window_for_backward_btn,
.move_window_for_where_btn{
	display: block;
    background: #2196F3;
    color: #fff;
    font-weight: bold;
    padding: 15px 18px;
	cursor: pointer;
	box-sizing: border-box;
}
.move_window_for_outside_btn:active,
.move_window_for_gohome_btn:active,
.move_window_for_forward_btn:active,
.move_window_for_backward_btn:active,
.move_window_for_where_btn:active{
    background: #1D6CAA;
    color:  rgba(255,255,255,0.8);
	outline :2px solid #fff;
	outline-offset :-2px;
}
.move_window_for_forward_btn_active{
    background: #1D6CAA;
    color:  rgba(255,255,255,0.8);
	outline :2px solid #fff;
	outline-offset :-2px;
}


#battle_window{
	background: #fff;
    padding: 0.5% 1%;
	z-index: 5;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 20vw;
	border-radius: 15px 0 0 0;
}
.battle_window_ttl{
	font-size: 120%;
    font-weight: bold;
    text-align: center;
    width: 100%;
    display: block;
}
.battle_window_attack_wrap,
.battle_window_nego_wrap,
.battle_window_item_wrap,
.battle_window_escape_wrap{
	display: inline-block;
    margin: 2%;
    box-sizing: border-box;
}
.battle_window_attack_btn,
.battle_window_nego_btn,
.battle_window_item_btn,
.battle_window_escape_btn{
	display: block;
    background: #ff4e4e;
    color: #fff;
    font-weight: bold;
    padding: 15px 18px;
	cursor: pointer;
	box-sizing: border-box;
}
.battle_window_attack_btn:active,
.battle_window_nego_btn:active,
.battle_window_item_btn:active,
.battle_window_escape_btn:active{
    background: #dd3d3d;
    color:  rgba(255,255,255,0.8);
	outline :2px solid #fff;
	outline-offset :-2px;
}



#sub_window_gacha{
	background: #fff;
    padding: 2% 3%;
}
#sub_window_gacha_close{
	position: fixed;
    right: 10vw;
    font-size: 200%;
    top: 6vh;
    cursor: pointer;
}
.sub_window_gacha_ttl{
	font-size: 120%;
    font-weight: bold;
}
.sub_window_gacha_once_wrap,
.sub_window_gacha_fifth_wrap,
.sub_window_gacha_msg_wrap,
.sub_window_gacha_bury_wrap{
	display: inline-block;
    margin: 2%;
    box-sizing: border-box;
}
.sub_window_gacha_once_btn,
.sub_window_gacha_fifth_btn,
.sub_window_gacha_bury_btn{
    background: #f44336;
    color: #fff;
    font-weight: bold;
    padding: 15px 18px;
	cursor: pointer;
}
.sub_window_gacha_msg_content{
	
}
#sub_window_move_where{
	background: #fff;
    padding: 2% 3%;
}
#sub_window_move_where_close{
	position: fixed;
    right: 10vw;
    font-size: 200%;
    top: 6vh;
    cursor: pointer;
}
.sub_window_move_for_where_btns{
	display: inline-block;
    margin: 2%;
    box-sizing: border-box;
}
.sub_window_move_for_where_btn_inner{
	display: block;
    background: #2196F3;
    color: #fff;
    font-weight: bold;
    padding: 15px 18px;
    cursor: pointer;
}
#sub_window_nego{
	background: #fff;
    padding: 2% 3%;
}
#sub_window_nego_close{
	position: fixed;
    right: 10vw;
    font-size: 200%;
    top: 6vh;
    cursor: pointer;
}
#sub_window_nego_choice{
	z-index: 7;
    position: fixed;
    width: 84vw;
    height: 90vh;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    padding: 5vh 8vw;
	overflow-y: scroll;
}
#sub_window_nego_choice_close{
	position: fixed;
    right: 10vw;
    font-size: 200%;
    top: 6vh;
    cursor: pointer;
}
.sub_window_nego_choice_wrap{
	background: #fff;
    padding: 2% 3%;
}
#sub_window_goods{
	background: #fff;
    padding: 2% 3%;
}
#sub_window_goods_close{
	position: fixed;
    right: 10vw;
    font-size: 200%;
    top: 6vh;
    cursor: pointer;
}
div[class^="sub_window_goods_btn"] {
	display: block;
    background: #2196F3;
    color: #fff;
    font-weight: bold;
    padding: 15px 18px;
    cursor: pointer;
}
.sub_window_goods_inner{
	display: inline-block;
    margin: 2%;
    box-sizing: border-box;
}
#sub_window_note1{
	background: #fff;
    padding: 2% 3%;
	z-index: 10;
}
#sub_window_note1_close{
	position: fixed;
    right: 10vw;
    font-size: 200%;
    top: 6vh;
    cursor: pointer;
}
.sub_window_note1_txt{font-size: 150%;}


/***汎用スタイル***/
.disp{
	visibility:visible;
}
.hide{
	visibility: hidden;
	display: none;
}
.meter {
  /* display: inline-block; */
  box-sizing: content-box;
  height: 10px; /* Can be anything */
  position: relative;
  margin: 0 0 0 20px; /* Just for demo spacing */
  background: #555;
  border-radius: 25px;
  padding: 3px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43, 194, 83);
  background-image: linear-gradient(
    center bottom,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.meter > span:after,
.animate > span > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
.animate > span:after {
  display: none;
}
@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
.orange > span {
  background: #00ff00;
}
.nostripes > span > span,
.nostripes > span::after {
  background-image: none;
}