html,body{overflow:hidden;margin:0}
header{background:#666}
header div::selection,footer::selection,i::selection,span::selection,a::selection,h1::selection{background:rgba(0,0,0,0)}
body,input{font-family:"Work Sans","Noto Sans JP",sans-serif;background:#2D2D2D;transition:opacity 0.5s;}
footer{font-family:Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospac,"Noto Sans JP"}
input:focus{outline: 0px solid transparent;}
input[type="checkbox"]{accent-color:#000;color:#fff}
.w_top_btns{position:fixed;top:0;left:0;width:100%;padding:5px 10px;height:20px;line-height:20px;background:#666;border-bottom: 1px solid #000;transition:0.2s;}
i.material-symbols-outlined{color:#aaa;cursor:pointer;font-size:18px}
i.material-symbols-outlined.on{color:#fff}
i#btn_mo_menu {font-size: 24px;position: relative;top: 4px;}


i{transition:0.2s}
i:hover{color:#fff !important}
i:active{transform:scale(0.9);color:#000}

span.material-symbols-outlined{position:relative;top:8px;margin: 0 5px;}

span.shikiri{margin:0 5px;display:inline-block;font-size:10px;position:relative;top:-6px;color:#ccc}

#btn_in_preview{color:#fff}
.off{color:#000 !important}

#w_main{margin-top:40px;height:calc(100vh - 68px)}


.text_input{
 height:16px;overflow:hidden;margin: 0;color:#ddd;background:#777;
 box-shadow: none;border:1px solid #888; position: relative;top: -4px;outline:0 !important;margin-left:0;padding-left:7px;padding-right:7px
}
.text_input:focus{background:#999;color:#fff}
#file_name{width:12em}

select{ height:24px;overflow:hidden;margin: 0;color:#ddd;background:#777;max-width:300px;
 box-shadow: none;border:1px solid #888; position: relative;top: -4px;outline:0 !important;margin-left:0;padding-left:7px;padding-right:7px
}

.clear{float:none;clear:both;}

.ssbar{transition:0.2s;overflow:auto;}
.ssbar::-webkit-scrollbar {width: 5px;height: 10px;}
.ssbar::-webkit-scrollbar-track {background:transparent;}
.ssbar:hover::-webkit-scrollbar-track {background: rgba(0,0,0,0.05);}
.ssbar::-webkit-scrollbar-thumb {background: rgba(0,0,0,0);border-radius:5px;}
.ssbar:hover::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.1);}

.hide{display:none !important;}

#in_preview{transition:opacity 0.2s;position:fixed;right:0;top:30px;background: #fff; width: 50%; z-index: 999; opacity: 0.5; height:calc(100vh - 50px);border:1px solid #ccc}
#in_preview:hover{opacity:1}

a{color:#ccc !important;text-decoration:none !important}

a.text_logo{transition:0.2s;position:fixed;top:6px;right:0;display:inline-block;font-size:16px;font-weight:700;margin:0 10px;color:#999;z-index:999;text-shadow: 0 0 1px #000;}
a.text_logo:hover{color:#fff;}

#info{background:#fff;z-index:9999;top:30px;right:0;height:calc(100vh - 60px);width:calc(50% - 40px);position:fixed;padding:20px;background:rgba(255,255,255,0.95)}
.inner{max-width:600px;margin:0 auto;}
h2{font-size:14px;margin:2em 0 0.5em;color:#333}
.dsc{font-size:12px;}
.dsc_f{font-size:12px;line-height:1.7em;text-align:center}
.dsc_f a{color:#666 !important}


header.mo_menu_open .btn_mo_menu{transform:rotate(180deg)}


.pc_only{display:block;}
.mo_only{display:none;}


@media (max-width:800px){
	.pc_only{display:none !important;}
	.mo_only{display:inline-block}
	
	a.text_logo{margin:0 auto;left:0;text-align:center;width:8em}
	#w_main{margin-top:5px;}
	.w_top_btns{top:-30px;z-index:9999;left:30px;border-bottom:0;padding:5px 0}
  .mo_menu_open .w_top_btns{top:0;}
	#file_name{width:6em;background:transparent;font-size:12px;}
	
	#info{width:calc(100% - 40px);opacity:1;}
}


#f_simple{width: 100%; text-align: center; height: 20px; position: fixed; bottom: 0; left: 0; line-height: 20px; font-size: 12px; color: #aaa;background: #666;}

label{color:#aaa;display:inline-block;font-size:12px;}
input[type="range"]{position:relative;top:4px;width:70px;margin:0 5px;filter:grayscale(1)}

i.material-symbols-outlined.toggle{font-size: 25px; position: absolute; margin-left: 5px;margin-top: -3px;}
i.material-symbols-outlined.toggle.on{color:#fff;}
i.material-symbols-outlined.toggle.off{color:#000;}

.h_label{font-size: 12px; font-weight: 500; color: #ccc; display: inline-block; position: relative; top: -5px;}

h1{
    font-size: 12px;
    font-weight: 500;
    color: #ccc;
    display: inline-block;
    position: relative;
    top: -5px;
}

.bgi{background-size:contain !important;background-position:center center !important;background-repeat:no-repeat !important}

/* オリジナルCSS */
.h_label.pc_only{display:none !important}
#btn_save,#btn_load,#btn_download,#btn_undo,#btn_redo,#file_name,#btn_preview,#shikiri_1,#btn_in_preview, #btn_play, #btn_pause, #btn_sp_up, #btn_sp_down, #btn_restart, #btn_vol_up, #btn_vol_down, #btn_reset{display:none}


#w_main{margin-top: 30px;  top: 0; position: absolute; width: 100%; left: 0; height: calc(100vh - 30px);}

   .text_block{display:inline-block;font-size:12px;padding:0.5em 1em;color:#f0f0f0;background:#444;border-radius:10px;margin:5px 2px; }
 .text_block._finish{color:#aaa}
 #text{ font-family: 'Noto Sans JP',sans-serif;font-weight: 300;padding:5px 10px;width:100%;height:calc(70vh - 100px);background:#444;color:#fff;box-sizing:border-box;outline:0 !important}

#text::placeholder{color:#aaa}

#w_blocks{max-height:calc(30vh - 20px) }

#w_btn_big{position:absolute;width:100%;left:0;right:0; text-align: center; top: 38px;}
#btn_play_big, #btn_pause_big{font-size:40px;}

.btn{cursor:pointer;}

.pc_only{display:inline-block;}

#w_main{margin-top:30px}

div{font-size:12px}

@media (max-width:800px){
#voice_menu{position:absolute;top: 80px;  margin-left: -10px;}
#voice_menu select{margin:5px 0}

#w_main{margin:50px 20px}
#w_range{margin:10px 0}
#mo_voice_menu{display:block;}
 #w_btn_big{top:175px;}
 #text{height:calc(50vh - 100px)}
}


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