@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* tag */
*{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;}
input[type="radio"]{width:18px;height:18px;border:1px solid #000000;-webkit-appearance:radio;}
ul{list-style:none;}
p{text-align:left;}
h2{line-height:2.4em;color:#ffffff;background:rgba(41,171,226,0.6);text-align:center;border-radius:2px;margin-bottom:6px;}
h3{line-height:1.8em;color:#ffffff;background:rgba(137,160,44,0.6);text-align:center;border-radius:2px;margin-bottom:6px;}
textarea{resize: vertical;}
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;}
.red{color:#ff0000;}

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

.sp_view{display:none;}

#mordal_lock{display:none;width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0,0,0,0.6);z-index:5;}
#mordal{display:none;width:80%;height:100%;position:fixed;left:0px;right:0px;top:0px;margin:auto;background:rgba(0,0,0,0.6);z-index:7;}
#mordal > div{display:none;}

ul.page_navi{width:100%;height:40px;}
ul.page_navi li{width:13%;height:30px;border:1px solid #ffa500;box-sizing:border-box;float:left;margin:5px 0.5%;border-radius:2px;line-height:30px;text-align:center;}
ul.page_navi li.left{width:13%;margin:5px 2% 5px 0px;}
ul.page_navi li.right{width:13%;margin:5px 0% 5px 2%;}
ul.page_navi li.current{font-weight:bold;color:#ffffff;background:#ffa500;}
ul.page_navi li a{width:100%;height:100%;display:block;margin:0px;padding:0px;border-radius:2px;color:#ff8800;background:rgba(255,255,255,0.4);text-decoration:none;}
ul.page_navi li a:hover{background:rgba(255,255,255,0.6);}

.skip_change{text-align:right;}
.skip_change select{width:60px;padding:2px;border-radius:4px;text-align:center;}
.skip_change input{width:60px;padding:4px;border-radius:4px;text-align:center;color:#ffffff;background:#ffa500;border:none;}

/* frame */
body{font-size:14px;line-height:20px;z-index:0;color:#fff;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:120px;margin-bottom:20px;}
#body{color:#fff;background:rgba(0,0,0,0.8);}
#footer{text-align:right;font-size:10px;line-height:28px;color:#fff;}

/* 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:50%;float:right;}
#top_navi dd{width:46%;height:36x;line-height:36px;text-align:center;float:left;margin:2%;}
#top_navi dd a{width:100%;height:100%;color:#ffffff;background:#ff6600;text-decoration:none;display:block;}

#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 */
    /* mypage */
table.common_table{width:100%;}
table.common_table > caption > a{color:#d00;}
table.common_table > tbody > tr{border-bottom:1px dashed #ddd;}
table.common_table tr > th{padding:4px;}
table.common_table tr > td{padding:4px;}

#search_form dd{width:50%;float:left;}
#search_form dd label{display:block;width:30%;padding:3px 0px;color:#ffffff;background:#555555;text-align:center;margin-bottom:6px;float:left;margin:2px auto;}
#search_form dd input,#search_form dd select{padding:4px 0.5%;margin:0px 1%;width:64%;border-radius:6px;line-height:1.6em;margin:2px auto;}
#search_form dd.date input{width:26%;}
#search_form dd.submit{width:100%;text-align:center;padding:12px 0px;}
#search_form dd.submit input{color:#ffffff;background:#ffa500;}

.setting_list dt{width:40%;clear:both;float:left;padding:6px 0px;color:#ffffff;background:#555555;text-align:center;margin-bottom:6px;line-height:1.6em;}
.setting_list dd{width:25%;float:left;}
.setting_list dd input,.setting_list dd select{padding:4px 0.5%;margin:0px 1%;width:97%;border-radius:6px;line-height:1.6em;margin:2px 1%;}
.setting_list dd input[type="checkbox"]{width:20px;height:20px;margin-left:5%;}
.setting_list dd.password{width:100%;margin-bottom:10px;display:none;}
.setting_list dd.password label{display:block;width:48%;padding:0px 1%;text-align:right;float:left;}
.setting_list dd.password input{width:46%;float:left;}
.setting_list dd.submit{width:100%;text-align:center;padding:12px 0px;}
.setting_list dd.submit input{color:#ffffff;background:#ffa500;width:68%;}

.help_index dt{padding:4px;margin:4px;color:#ffffff;background:rgba(255,120,0,0.8);}
.help_index dd{padding:8px;margin:4px;color:#ffffff;background:rgba(0,0,0,0.7);border-radius:8px;margin-bottom:20px;display:none;}
.help_index dd a{color:#ff8800;}
.help_index dd img{width:60px;margin:6px;}
.help_index dd .alert{color:#ffa500;font-size:12px;padding:4px;}

.common_table{width:100%;margin-bottom:20px;}
.common_table > caption{color:#fff;background:#f80;text-align:center;border-radius:4px;margin-bottom:10px;padding:4px;}
.common_table > thead > tr > th{color:#fff;background:#555;text-align:center;padding:4px;}
.common_table > tbody > tr{border-bottom:1px dashed #555;}
.common_table > tbody > tr:hover{background:rgba(255,255,255,0.6);}
.common_table > tbody > tr > td{text-align:center;padding:4px;}

    /* detail & edit */
.lynx_edit dt{width:20%;float:left;clear:both;padding:3px 0px;color:#ffffff;background:#555555;text-align:center;margin-bottom:6px;border-bottom:1px dashed #555555;position:relative;}
.lynx_edit dt .description{position:absolute;top:3px;right:3px;width:16px;height:16px;
background:url('../img/template/tool_navi3.png') no-repeat center center;background-size:contain;}
.lynx_edit dt .description .text{position:absolute;left:-206px;top:-28px;width:200px;height:60px;background:rgba(255,255,255,0.6);border-radius:6px;color:#000000;padding:3px;overflow:auto;display:none;}
.lynx_edit dd{width:76%;float:left;padding:3px 2%;border-bottom:1px dashed #555555;margin-bottom:6px;position:relative;}
.lynx_edit dd span.tag{display:block;width:40px;height:20px;font-size:12px;line-height:20px;text-align:center;border-radius:8px;float:left;margin:0px 2px;}
.lynx_edit dd span.tag.urgent{color:#ffffff;background:#c83737;}
.lynx_edit dd span.tag.important{color:#222222;background:#ffcc00;}
.lynx_edit dd span.belong_to{display:block;width:45%;background:rgba(255,255,255,0.4);padding:6px 2%;margin:0.5%;border-radius:6px;float:left;}
.lynx_edit dd span.checked_val{display:block;width:45%;background:rgba(255,255,255,0.4);padding:6px 2%;margin:0.5%;border-radius:6px;float:left;position:relative;}
.lynx_edit dd span.checked_val input{width:20px;height:20px;border-radius:4px;}
.lynx_edit dd span.checked_val label{width:100%;height:100%;position:absolute;}

.lynx_edit dt.error{background:#c83737;}
.lynx_edit dd.error input,.lynx_edit dd.error select,.lynx_edit dd.error textarea{background:#ffeeaa;}

.lynx_edit input[type="text"],.lynx_edit input[type="date"],.lynx_edit input[type="mail"],.lynx_edit select,.lynx_edit textarea{padding:4px;width:100%;border-radius:6px;line-height:1.6em;}
.lynx_edit .units > div{position:relative;}
.lynx_edit .units input.url{width:80%;}
.lynx_edit .units input.bt{width:20px;height:20px;position:absolute;border-radius:10px;color:#ffffff;font-size:16px;line-height:20px;}
.lynx_edit .units input.add{right:30px;top:0px;background:#ff8800;}
.lynx_edit .units input.delete{right:00px;top:0px;background:#2c89a0;display:none;}
.lynx_edit textarea{height:4.8em;}
.lynx_edit label.flgs{display:inline-block;width:16%;text-align:right;}
.lynx_edit select.flgs{width:30%;}

@media screen and (min-width: 830px){
}
@media screen and (max-width: 830px){
/* common class */
    .inner2p{padding:2vw;}
    
/* frame */
    #wrap{width:96%;}
    #header{padding-top:60px;}
    
/* header */
    #title{width:40%;}
    #tool_navi{width:50%;}
    #main_navi{width:50%;}
    #add_navi{width:99%;clear:both;margin:auto auto 10px auto;}
}
@media screen and (max-width: 700px){
/* common class */
    .pc_view{display:none;}
    .sp_view{display:initial;}
/* header */
    #tool_navi dt{font-size:12px;}
    
/* body */
    
    /* detail */
    
    #search_form dd.value{width:100%;}
    #search_form dd.date{width:100%;}
}
@media screen and (max-width: 500px){
    #wrap{width:96vw;}
    #title{width:90%;float:initial;margin:auto;}
    #title #logo{width:100%;height:50px;}
    #title #description{font-size:12px;}
    #title #description .company{font-size:10px;}
    #top_navi{width:90%;float:initial;margin:auto;}
    #tool_navi{width:100%;float:initial;margin:auto;}
    #main_navi{width:100%;float:initial;margin:auto;}
    
    #add_navi{width:96vw;}
    #add_navi dt{width:94vw;margin:1vw;}
    #add_navi dd{width:30vw;height:50px;margin:1vw;}
    
    /* detail */
}
@media screen and (max-height: 470px){
}