@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
*{margin:0;padding:0;font-family: 'Noto Sans Japanese', sans-serif;}
html{height:100%;}
.clearfix:after{
    content:".";display: block;clear: both;
    height:0;visibility: hidden;
}
input{-webkit-appearance: none;}
input[type="checkbox"]{width:18px;height:18px;border:1px solid #000000;-webkit-appearance:checkbox;}
ul{list-style:none;}
p{text-align:left;}
a{color:#ffa500;}

/* common class */
.fl_l{float:left;}
.fl_r{float:right;}
.ta_l{text-align:left;}
.ta_r{text-align:right;}
.inner2p{padding:10px;}
.inner10{padding:10px;}
.mb10{margin-bottom:10px;}

.success{color:#0000ff;font-size:12px;}
.error{color:#ff0000;font-size:12px;}
.msg{background:rgba(255,255,255,0.6);border-radius:8px;padding:10px;margin-bottom:20px;}
.msg.success{border:2px solid #0000ff;}
.msg.error{border:2px solid #ff0000;}

/* error */
.error_main{width:64%;height:240px;float:left;}
.error_main.e401{background:url('../img/err/401.png') no-repeat right bottom;background-size:contain;}
.error_main.e403{background:url('../img/err/403.png') no-repeat right bottom;background-size:contain;}
.error_main.e404{background:url('../img/err/404.png') no-repeat right bottom;background-size:contain;}
.error_main.e500{background:url('../img/err/500.png') no-repeat right bottom;background-size:contain;}
.error_main.e503{background:url('../img/err/503.png') no-repeat right bottom;background-size:contain;}
.error_sub{width:36%;height:240px;float:left;background:url('../img/err/error.png') no-repeat left bottom;background-size:contain;}

.list_pager{margin:20px;}
.list_pager strong{display:block;color:#ffffff;background:#37abc8;text-align:center;border-radius:20px;width:40px;font-size:12px;line-height:12px;padding:14px 0px;margin:4px;float:left;}
.list_pager a{display:block;color:#ffffff;background:#ff8800;text-align:center;border-radius:20px;width:40px;font-size:12px;line-height:12px;padding:14px 0px;margin:4px;float:left;}

/* frame */
body{font-family: 'Noto Sans Japanese', sans-serif;font-size:14px;line-height:20px;z-index:0;background:url('../img/template/bgi.jpg') no-repeat center center fixed;background-size:cover;height:100%;}
#wrap{width:800px;position:relative;margin:auto;z-index:1;}
#header{color:#ffffff;background:rgba(0,0,0,0.6);padding-top:20px;margin-bottom:10px;}
#body{color:#111111;background:rgba(255,255,255,0.8);}
#footer{text-align:right;font-size:10px;line-height:28px;}

/* header */
#title{width:350px;margin:auto 20px;float:left;}
#title #logo{width:100%;height:85px;background:url('../img/template/logo.png') no-repeat center center;background-size:contain;}
#title #description{text-align:right;}
#title #description .company{font-size:12px;}

#top_navi{width:48%;float:right;text-align:right;margin-right:2%;}
#top_navi dd{display:inline-block;width:45%;height:20x;line-height:36px;text-align:center;margin:2%;}
#top_navi dd a{width:100%;height:100%;color:#ffa500;text-decoration:none;display:inline-block;border:1px solid #ffa500;border-radius:6px;font-size:12px;line-height:20px;transition:all 300ms cubic-bezier(1,0,0,1);}
#top_navi dd a:hover{color:#fff;border:1px solid #fff;}

#tool_navi{width:400px;float:left;}
#tool_navi dt{width:50%;height:40px;margin:2%;float:left;position:relative;}
#tool_navi dd{width:10%;height:40px;margin:2.5%;float:left;position:relative;}
#tool_navi dd a{display:block;width:100%;height:100%;position:absolute;top:0px;left:0px;}
#tool_navi dd.navi1 a{background:url('../img/template/tool_navi1.png') no-repeat center center;background-size:contain;}
#tool_navi dd.navi2 a{background:url('../img/template/tool_navi2.png') no-repeat center center;background-size:contain;}
#tool_navi dd.navi3 a{background:url('../img/template/tool_navi3.png') no-repeat center center;background-size:contain;}

#main_navi{width:400px;float:left;}
#main_navi li{width:20%;height:80px;margin:2.5%;float:left;position:relative;}
#main_navi li a{display:block;width:100%;height:100%;border-radius:40px;position:absolute;top:0px;left:0px;cursor:crosshair;}
#main_navi li.navi1 a{background:url('../img/template/main_navi1.png') no-repeat center center;background-size:contain;}
#main_navi li.navi2 a{background:url('../img/template/main_navi2.png') no-repeat center center;background-size:contain;}
#main_navi li.navi3 a{background:url('../img/template/main_navi3.png') no-repeat center center;background-size:contain;}
#main_navi li.navi4 a{background:url('../img/template/main_navi4.png') no-repeat center center;background-size:contain;}

#add_navi{width:400px;float:right;display:none;margin-bottom:10px;}
#add_navi dt{width:97%;margin:1%;text-align:center;background:rgba(0,0,0,0.6);}
#add_navi dd{width:31%;height:50px;line-height:50px;margin:1%;float:left;position:relative;}
#add_navi dd a{display:block;width:100%;height:100%;position:absolute;top:0px;left:0px;background:rgba(255,255,255,0.8);text-decoration:none;text-align:center;}
#add_navi dd a:hover{background:rgba(255,255,255,0.4);}

/* body */
.top_main_list{width:25%;float:left;}
.top_main_list > dt{text-align:center;}
.top_main_list.task > dt{color:#ffffff;background:#89a02c;}
.top_main_list.own > dt{color:#ffffff;background:#2c89a0;}
.top_main_list > dd{width:60%;float:right;}
.top_main_list .total .num{font-size:36px;}
.top_main_list .detail dl dt{width:50%;float:left;}
.top_main_list .detail dl dd{width:50%;float:left;}

.top_report_list{width:73%;float:right;}
.top_report_list thead th{border-bottom:dashed 1px #999999;text-align:center;}
.top_report_list tbody tr:hover{background:rgba(0,0,0,0.2);}
.top_report_list tbody td{border-bottom:dashed 1px #cccccc;padding:2px;overflow:hidden;}
.top_report_list tbody td.tag{text-align:center;}
.top_report_list tbody td.tag > span{display:block;width:40px;height:20px;font-size:12px;line-height:20px;text-align:center;border-radius:8px;margin:auto;}
.top_report_list tbody td.tag > span.usual{color:#ffffff;background:#2c89a0;}
.top_report_list tbody td.tag .important{color:#222222;background:#ffcc00;}
.top_report_list tbody td.tag .imidiate{color:#ffffff;background:#c83737;}

/* toppage */
.top_app_list li{width:183px;height:183px;margin:2px;border:4px solid #ffffff;border-radius:10px;background:rgba(0,0,0,0.6);float:left;}
.top_app_list li > a{display:block;width:100%;height:100%;}
.top_app_list li.gemini > a{background:url('../img/apps/gemini_icon.png') center center no-repeat;background-size:80%;}

@media screen and (max-width: 830px){
    .top_app_list li{width:21vw;height:21vw;margin:0.5vw;border:0.5vw solid #ffffff;}
}
@media screen and (max-width: 700px){
    .top_app_list li{width:28.5vw;}
}
@media screen and (max-width: 500px){
    .top_app_list li{width:44vw;height:30vw;}
}
@media screen and (max-height: 470px){
}

/*mypage*/
#mypage .app_list dd{width:183px;height:183px;margin:2px;border:4px solid #ffffff;border-radius:10px;background:rgba(0,0,0,0.6);float:left;}
#mypage .app_list dd > a{display:block;width:100%;height:100%;}

#login_form{width:300px;margin:auto;}
#login_form dl dd{margin-bottom:8px;}
#login_form input{width:90%;line-height:24px;padding:4px;border-radius:4px;border:none;}
#login_form input[type="checkbox"]{width:20px;height:20px;}
#login_form input[type="submit"]{color:#ffffff;background:#ffa500;line-height:30px;}

.mypage_user_setting .mail_confirm{display:none;}
.mypage_user_setting .pass_confirm{display:none;}

#account_edit_form{display:none;}

dl.company_list input[type="text"],dl.company_list input[type="date"]{width:100%;border-radius:4px;padding:4px;}
dl.company_list > dd{border:2px solid #555555;border-radius:8px;padding:6px;background:rgba(255,255,255,0.4);margin-bottom:8px;}
dl.company_list > dd input[type="submit"]{color:#ffffff;line-height:30px;width:46%;margin:2px 1%;padding:2px 1%;border-radius:6px;}
dl.company_list > dd input[type="submit"].update{background:rgba(137,160,44,1);}
dl.company_list > dd input[type="submit"].delete{background:rgba(200,55,55,1);}
dl.company_list > dd input[type="submit"].add{background:rgba(255,165,0,1);}

dl.company_list > dd .detail > dt{color:#ffffff;background:rgba(0,0,0,0.8);width:21%;margin:2px 1%;padding:2px 1%;float:left;clear:both;}
dl.company_list > dd .detail > dd{width:71%;margin:2px 1%;padding:2px 1%;float:left;}


dl.user_setting input[type="text"],dl.user_setting input[type="date"]{width:70%;border-radius:4px;padding:4px;}
dl.user_setting > dt{color:#ffffff;background:rgba(0,0,0,0.8);width:21%;margin:2px 1%;padding:2px 1%;float:left;clear:both;}
dl.user_setting > dd{width:71%;margin:2px 1%;padding:2px 1%;float:left;}
dl.user_setting > dd input[type="submit"]{color:#ffffff;line-height:30px;width:46%;margin:2px 1%;padding:2px 1%;border-radius:6px;}
dl.user_setting > dd input[type="submit"].update{background:rgba(137,160,44,1);}

dd.opt_list{border:2px solid #555555;border-radius:8px;padding:6px;margin:8px 0px;background:rgba(255,255,255,0.6);}
dd.opt_list div{width:29%;margin:1%;padding:1%;float:left;background:rgba(255,255,255,0.8);border-radius:6px;}
dd.opt_list div label{font-size:10px;}
dl.company_list .opt_list input[type="submit"]{color:#ffffff;line-height:20px;width:26%;margin:2px 1%;padding:2px 1%;border-radius:6px;}

#account_edit_form input[type="text"],#account_edit_form input[type="date"]{width:70%;border-radius:4px;padding:4px;}
#account_edit_form .name_field input[type="text"]{width:40%;border-radius:4px;padding:4px;}
#account_edit_form select{width:26%;border-radius:4px;padding:4px 1%;margin:4px 1%;}
#account_edit_form label{width:16%;padding:4px 1%;margin:4px 1%;text-align:right;}
#account_edit_form #belong_to_company{width:96%;}
#account_edit_form #belong_to_add_bt{width:26%;border-radius:4px;padding:4px 1%;margin:4px 8%;}
#account_edit_form > dl > dd{margin-bottom:8px;}
#account_edit_form #account_close{width:36%;margin:1% 4px;padding:1% 4px;border-radius:6px;color:#ffffff;background:rgba(200,55,55,1);}
#account_edit_form #account_submit{width:36%;margin:1% 4px;padding:1% 4px;border-radius:6px;color:#ffffff;background:rgba(137,160,44,1);}

select.shops_select,select.sections_select,select.positions_select,.belong_to_label,#belong_to_add_bt{display:none;}
#belong_to_value > span{display:inline-block;padding:4px 1%;margin:4px 1%;background:rgba(255,255,255,0.6);border-radius:6px;}
.belong_to_delete_bt{font-size:9px;padding:2px;border-radius:4px;color:#ffffff;background:rgba(200,55,55,1);}

#account_edit_list table{width:100%;}
#account_edit_list table thead tr th{font-size:10px;color:#ffffff;background:rgba(0,0,0,0.8);}
#account_edit_list table tbody tr{background:rgba(255,255,255,0.6);}
#account_edit_list table tbody tr:hover{background:rgba(255,255,0,0.4);}
#account_edit_list table tbody tr td{font-size:10px;border-left:1px dashed #999999;border-bottom:1px solid #999999;padding:2px;}
#account_edit_list table tbody tr td:first-child{border-left:none;}
#account_edit_list table tbody tr td input[type="button"]{font-size:10px;border-radius:4px;padding:2px 8px;color:#ffffff;border:none;}
#account_edit_list table tbody tr td input[type="button"].edit{background:rgba(137,160,44,1);width:100%;margin:4px auto;}
#account_edit_list table tbody tr td input[type="button"].delete{background:rgba(200,55,55,1);}
#account_edit_list table tbody tr td input[type="button"].send{background:rgba(255,165,0,1);width:100%;margin:4px auto;}
#account_edit_list table tbody tr td input[type="button"].add{background:rgba(137,160,44,1);display:block;margin:8px auto;}

#account_edit_form dt{color:#ffffff;background:rgba(0,0,0,0.6);margin:2px 1%;padding:2px 1%;}

.account_detail dt{color:#ffffff;background:rgba(0,0,0,0.6);margin:2px 1%;padding:2px 1%;}

@media screen and (min-width: 830px){
}

@media screen and (max-width: 830px){
    .inner2p{padding:2vw;}
    #wrap{width:96%;}
    #title{width:40%;}
    #tool_navi{width:50%;}
    #main_navi{width:50%;}
    #add_navi{width:99%;clear:both;margin:auto auto 10px auto;}
    #mypage .app_list dd{width:21vw;height:21vw;margin:0.5vw;border:0.5vw solid #ffffff;}
}
@media screen and (max-width: 700px){
    .top_report_list{display:block;}
    .top_report_list tbody{display:block;}
    .top_report_list thead{display:none;}
    .top_report_list tbody tr{display:block;border:1px solid #999999;padding:6px;border-radius:10px;margin-bottom:10px}
    .top_report_list tbody tr:after{
        content:".";display: block;clear: both;
        height:0;visibility: hidden;
    }
    .top_report_list tbody tr td{border-bottom:none;display:block;float:left;font-size:12px;}
    .top_report_list tbody tr td.date{width:44%;}
    .top_report_list tbody tr td.type{width:44%;}
    .top_report_list tbody tr td.subject{width:96%;}
    .top_report_list tbody tr td.author{width:44%;}
    .top_report_list tbody tr td.tag{width:24%;}
    .top_report_list tbody td.tag > span{width:90%;line-height:16px;height:16px;font-size:10px;}
    .top_report_list tbody td.tag > span.usual{display:none;}
    #mypage .app_list dd{width:28.5vw;}
}
@media screen and (max-width: 500px){
    #wrap{width:96vw;}
    #top_navi{width:90%;float:initial;margin:auto;}
    #title{width:90%;float:initial;margin:auto;}
    #tool_navi{width:100%;float:initial;margin:auto;}
    #main_navi{width:100%;float:initial;margin:auto;}
    .pc_view{display:none;}
    #add_navi{width:96vw;}
    #add_navi dt{width:94vw;margin:1vw;}
    #add_navi dd{width:30vw;height:50px;margin:1vw;}
    
    .top_main_list{width:initial;float:initial;}
    .top_main_list .total{width:46%;float:left;text-align:right;padding:2%;}
    .top_main_list .detail{width:50%;float:left;}
    .top_report_list{width:initial;float:initial;}
    #login_form{width:60%;}
    #mypage .app_list dd{width:44vw;height:30vw;}
    
    dl.user_setting > dt{width:96%;float:initial;}
    dl.user_setting > dd{width:96%;float:initial;}
}
@media screen and (max-height: 470px){
}