@CHARSET "UTF-8";

body{
    background-color: #eee;
}

a{
	color: #52790f;
	text-decoration: none;
}
a:hover{
	color: #87b13c;
    text-decoration: underline;
    text-shadow: 1px 1px 1px rgba(25, 25, 25, .2);
}
a.red{
	color: #a71f1f;
}
a.red:hover{
	color: #c44141;
}
hr{
    border: 0;
    border-bottom: solid 1px #ddd;
}
iframe{
	width: 100%;
	border: 0;
}

.inner{
	margin: auto 1%;
}

.t-l{
	text-align: left;
}
.t-m{
    text-align: center;
}
.t-r{
    text-align: right;
}
.f-r{
	float: right;
}
.hidden{
    display: none;
}
.required{
	color: #cd0a0a;
}
.gray{
	color: #aaa;
}

input, select, button, textarea{
	margin-bottom: 5px;
	padding: 5px 1%;
	border: solid 1px #ccc;
	border-radius: 5px;
}
input:hover{
	border: solid 1px rgb(97, 198, 0);
	box-shadow: 0 0 5px rgba(97, 198, 0, .5);
}
input:focus{
	background: white;
	box-shadow: inset 0 3px 20px rgba(205, 205, 205, .7);
}
textarea{
	min-height: 5em;
}
input.f, textarea.f{
	width: 100%;
}
input.per30{
	width: 28%;
}
input.per50{
	width: 50%;
}
input.per70{
	width: 70%;
}
input.per80{
	width: 80%;
}
input[type=radio], input[type=checkbox]{
	width: auto;
}

/*
 * VALIDATA
 */
input.error {
	border: solid 1px #e65000;
}
label.error {
	padding: 2px 5px 1px 25px;
	line-height: 1.8em;
	color: #e65000;
	border: solid 1px #e65000;
	border-radius: 5px;
	display: block;
	background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ+Ih5AAAAFVBMVEUAAADNCgrNCgrNCgrNCgrNCgrNCgrvQT6uAAAABnRSTlMAELJKQNXC8HdKAAAARElEQVQI12PACpgNoAy1JKhAWhpEiClRTAHMMEtgS4YoSRQDK2JJAwIHIIMtLQGIgAy3tESxtBQgIw0MgIwwEJ2KxUIA9ZgOalGNqOUAAAAASUVORK5CYII=') 5px 6px no-repeat #fff7f4;
}
label.valid{
	line-height: 1.8em;
	color: #8cce3b;
	border: solid 1px #c3eb96;
	display: block;
	background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ+Ih5AAAAG1BMVEUAAACMzjuMzjuMzjuMzjuMzjuMzjuMzjuMzjv3wffsAAAACHRSTlMAMUKSSp5jbS5SK3IAAABRSURBVAjXY8AGXDs6QkA0ewcQFAAZHiBGC5ARAaQ5WoEMIN3A2AFmSDBIgBmNDIwdEBEBCTDDoqOxo6MZyNAAaW8CMthAjASQ0codHUZINgIA8T0b/kAlrUkAAAAASUVORK5CYII=') 5px 6px no-repeat #f5fceb;
}

button{
	padding-left: 10px;
	font-weight: bold;
	cursor: pointer;
}
button.cencel{
	color: #555;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 1.0);
	border: solid 1px #888;
	background: #ddd;
	background: -moz-linear-gradient(top, rgb(217, 217, 217) 0%, rgba(193, 193, 193, 1.0) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(217, 217 , 217, 1.0)), color-stop(100%,rgba(193, 193, 193, 1.0))); 
	background: -webkit-linear-gradient(top, rgb(217, 217, 217) 0%,rgb(193, 193, 193) 100%); 
	background: -o-linear-gradient(top, rgba(217, 217 ,217 , 1.0) 0%,rgba(193, 193, 193, 1.0) 100%); 
	background: -ms-linear-gradient(top, rgba(217, 217 ,217 , 1.0) 0%,rgba(193, 193, 193, 1.0) 100%); 
	background: linear-gradient(top, rgba(217, 217 ,217 , 1.0) 0%,rgba(193, 193, 193, 1.0) 100%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8);
}
button.cencel:hover{
	color: #666;
	border: solid 1px #888;
	background: #eee;
	background: -moz-linear-gradient(top, rgb(232, 232, 232) 0%, rgba(208, 208, 208, 1.0) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 232 , 232, 1.0)), color-stop(100%,rgba(208, 208, 208, 1.0))); 
	background: -webkit-linear-gradient(top, rgb(232, 232, 232) 0%,rgb(208, 208, 208) 100%); 
	background: -o-linear-gradient(top, rgba(232, 232 ,232 , 1.0) 0%,rgba(208, 208, 208, 1.0) 100%); 
	background: -ms-linear-gradient(top, rgba(232, 232 ,232 , 1.0) 0%,rgba(208, 208, 208, 1.0) 100%); 
	background: linear-gradient(top, rgba(232, 232 ,232 , 1.0) 0%,rgba(208, 208, 208, 1.0) 100%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8);
}
button.cencel:active{
	color: #555;
	text-shadow: 0 1px 1px rgba(95, 95, 95, .6);
	background: rgba(164, 205 ,90 , 1.0);
	background: -moz-linear-gradient(top, rgba(173, 173, 173, 1.0) 0%, rgba(193, 193 , 193, 1.0) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(173, 173, 173, 1.0)), color-stop(100%,rgba(193, 193 , 193, 1.0))); 
	background: -webkit-linear-gradient(top, rgba(173, 173, 173, 1.0) 0%,rgba(193, 193 , 193, 1.0) 100%); 
	background: -o-linear-gradient(top, rgba(173, 173, 173, 1.0) 0%,rgba(193, 193 , 193, 1.0) 100%); 
	background: -ms-linear-gradient(top, rgba(173, 173, 173, 1.0) 0%,rgba(193, 193 , 193, 1.0) 100%); 
	background: linear-gradient(top, rgba(173, 173, 173, 1.0) 0%,rgba(193, 193 , 193, 1.0) 100%);
	box-shadow: inset 0 1px 1px rgba(55, 55, 55, .3);
}
button.submit{
	color: rgb(60, 121, 0);
	text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
	border: solid 1px rgb(70, 140, 0);
	background: rgb(164, 205 ,90);
	background: -moz-linear-gradient(top, rgba(164, 205 , 90, 1.0) 0%, rgba(144, 196, 85, 1.0) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164, 205 , 90, 1.0)), color-stop(100%,rgba(144, 196, 85, 1.0))); 
	background: -webkit-linear-gradient(top, rgba(164, 205 ,90 , 1.0) 0%,rgba(144, 196, 85, 1.0) 100%); 
	background: -o-linear-gradient(top, rgba(164, 205 ,90 , 1.0) 0%,rgba(144, 196, 85, 1.0) 100%); 
	background: -ms-linear-gradient(top, rgba(164, 205 ,90 , 1.0) 0%,rgba(144, 196, 85, 1.0) 100%); 
	background: linear-gradient(top, rgba(164, 205 ,90 , 1.0) 0%,rgba(144, 196, 85, 1.0) 100%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);
}
button.submit:hover{
	color: rgb(67, 136, 0);
	background: rgb(177, 224, 93);
	background: -moz-linear-gradient(top, rgba(177, 224, 93, 1.0) 0%, rgba(153, 209, 90, 1.0) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(177, 224, 93, 1.0)), color-stop(100%,rgba(153, 209, 90, 1.0))); 
	background: -webkit-linear-gradient(top, rgba(177, 224, 93, 1.0) 0%,rgba(153, 209, 90, 1.0) 100%); 
	background: -o-linear-gradient(top, rgba(177, 224, 93, 1.0) 0%,rgba(153, 209, 90, 1.0) 100%); 
	background: -ms-linear-gradient(top, rgba(177, 224, 93, 1.0) 0%,rgba(153, 209, 90, 1.0) 100%); 
	background: linear-gradient(top, rgba(177, 224, 93, 1.0) 0%,rgba(153, 209, 90, 1.0) 100%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
}
button.submit:active{
	color: rgb(60, 121, 0);
	text-shadow: 0 1px 1px rgba(155, 155, 155, .6);
	background: rgba(164, 205 ,90 , 1.0);
	background: -moz-linear-gradient(top, rgba(144, 196, 85, 1.0) 0%, rgba(164, 205 , 90, 1.0) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(144, 196, 85, 1.0)), color-stop(100%,rgba(164, 205 , 90, 1.0))); 
	background: -webkit-linear-gradient(top, rgba(144, 196, 85, 1.0) 0%,rgba(164, 205 , 90, 1.0) 100%); 
	background: -o-linear-gradient(top, rgba(144, 196, 85, 1.0) 0%,rgba(164, 205 , 90, 1.0) 100%); 
	background: -ms-linear-gradient(top, rgba(144, 196, 85, 1.0) 0%,rgba(164, 205 , 90, 1.0) 100%); 
	background: linear-gradient(top, rgba(144, 196, 85, 1.0) 0%,rgba(164, 205 , 90, 1.0) 100%);
	box-shadow: inset 0 1px 1px rgba(55, 55, 55, .3);
}

label{
	padding-left: 3px;
}

/*
 * Global
 */
footer{
	padding-left: 230px;
	text-align: center;
}
header, footer.login, menu{
    color: #dcdcdc;
    background: url('img/bg_black.png') #3e3e3e;
}
header .inner, footer.login .inner{
    padding: 0 1%;
}
header.regist .inner{
	width: 1002px;
	padding: 0;
	margin: 0 auto;
}
/*
 * header
 */
header{
    width: 100%;
    height: 55px;
    border-bottom: solid 1px #3b3b3b;
    box-shadow: 1px 1px 7px rgba(25, 25, 25, .7);
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}
header .logo h3, header .logo img{
	height: 36px;
    margin-top: 10px;
    line-height: 1.8;
    left: 0;
}
header .logo h3{
    color: #dcdcdc;
    text-shadow: 0 0 5px rgba(50, 50, 50, .3);
}
header h3, header img{
    opacity: .9;
}
header h3:hover, header img:hover{
	opacity: 1.0;
}
header .account{
    margin: 10px 0;
    font-size: 14px;
    display: inline-block;
    float: right;
    clear: both;
}
header .account img{
    width: 35px;
    height: 35px;
    border: solid 1px white;
    border-radius: 5px;
    display: block;
    float: left;
}
header .account h5, header .account > ul{
    padding-left: 43px;
	margin-bottom: 0;
    text-align: left;
    color: white;
    line-height: 1.4;
    display: block;
}
header .account > ul > li{
    margin-right: 5px;
    display: inline;
	position: relative;
}
header .account > ul > li > a:hover{
    text-decoration: none;
}
header .register{
	margin: 25px 2%;
    font-size: 14px;
    display: inline-block;
    position: absolute;
    right: 0;
    clear: both;
}
header .register a{
	color: #dcdcdc;
}
header .register a:hover{
	color: white;
}
.account-panel{
    padding: 5px;
    font-size: 90%;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 10px #333;
    position: fixed;
}
.account-panel hr{
    margin-bottom: .2em;
}
.account-panel a{
    color: #666;
}
.account-panel a:hover{
    text-decoration: none;
}
/*
 * login - footer
 */

footer.login{
	min-height: 150px;
	padding: 0;
	border-top: solid 1px #3b3b3b;
	box-shadow: 0 -5px 5px rgba(25, 25, 25, .35);
	position: relative;
}
footer.login .copyright{
	width: 96%;
	margin-bottom: .5em;
	text-align: center;
	position: absolute;
	bottom: 0px;
}
footer.regist{
	padding-left: 0;
}
footer.regist .copyright{
	text-align: center;
	color: #999;
	text-shadow: 1px 1px 1px white;
}

/*
 * wrap
 */
.wrap{
    width: auto;
    height: 100%;
}
.wrap .window{
    padding-top: 56px;
    padding-left: 230px;
}
.wrap-regist{
	padding-top: 56px;
}
.wrap-regist .regist{
	max-width: 1002px;
	margin: 1em auto .5em auto;
}
.wrap-login{
	width: 100%;
	height: 468px;
	padding-top: 55px;
	background: url('img/bg_login_x1024.png') no-repeat;
	background-position: right 45px;
    position: relative;
}
.login-card{
    width: 62%;
    max-width: 600px;
    margin: 0;
	color: #dcdcdc;
	text-align: left;
	background: rgba(0, 0, 0, .65);
	border: solid 1px #333;
	border-radius: 7px;
	box-shadow: 0px 0px 15px rgba(50, 50, 50, .7);
	overflow: hidden;
	clear: both;
    position: absolute;
    left: 77px;
    bottom: 100px;
}
.login-card .login-panel{
	padding: 1em 7%;
	border: solid 1px rgba(255, 255, 255, .2);
	border-radius: 5px;
}
.login-card h4{
	color: #dcdcdc;
	text-shadow: 0 3px 3px rgba(0, 0, 0, .5);
}
.login-card input{
	width: 36%;
	margin-bottom: 1em;
    margin-right: 1%;
	line-height: 1.6;
	box-shadow: none;
}
.login-card input:hover {
	border: solid 1px #fff;
}
.login-card button{
	width: 19%;
    height: auto;
}
.login-card span.option{
	width: auto;
	padding-top: 0;
}
.login-card .forget{
    margin: 0 10px; 
}

/*
 * MENU
 */
menu{
    width: 230px;
    height: 100%;
    box-shadow: 1px 1px 7px rgba(25, 25, 25, .7);
    position: fixed;
}
menu .search{
    height: 45px;
    margin-top: 56px;
    text-align: center;
    border-bottom: solid 1px #373737;
    overflow: hidden;
}
menu .search input{
    width: 80%;
    padding-left: 10px;
    margin-top: 9px;
    line-height: 1.6;
    border-radius: 15px;
    box-shadow: none;
}
menu > ul > li{
    padding: 8px 0 8px 35px;
    color: #aaa;
    border-top: solid 1px #515151;
    border-bottom: solid 1px #373737;
}
menu > ul > li.hover, menu > ul > li:hover{
    color: #dcdcdc;
    background-color: rgba(55, 55, 55, .5);
    cursor: pointer;
}
menu ul.sub{
    background-color: #484848;
    box-shadow: 1px 1px 7px rgba(55, 55, 55, .4) inset, 1px -1px 7px rgba(55, 55, 55, .4) inset;
    display: none;
}
menu ul.sub li{
    padding: 8px 0 8px 30px;
    font-size: 90%;
    color: #aaa;
    border-top: solid 1px #363636;
    cursor: pointer;
}
menu ul.sub li.hover, menu ul.sub li:hover{
    color: #dcdcdc;
}
menu ul.sub li.hover{
    color: rgb(164, 205 ,90);
}
menu ul.sub li:hover{
    background-color: #404040;
}
menu .ver{
    text-align: center;
    color: #333;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(155, 155, 155, .3), 0 -1px 1px rgba(0, 0, 0, .7);
    border-top: solid 1px #515151;
}

/*
 * ページ
 * h: title
 * f: full
 * l: long
 * m: middle
 * s: short
 */
section.page{
	margin-top: 1em;
	border: solid 1px #ccc;
	border-radius: 5px;
    background-color: white;
    box-shadow: 1px 1px 7px rgba(25, 25, 25, .3);
    overflow: hidden;
}
section.page h4{
	padding: 7px 2% 5px 2%;
	margin-bottom: 0;
	font-weight: normal;
	color: #333;
    text-shadow: 1px 1px 2px white;
    border-bottom: solid 1px #ccc;
	background: rgb(235, 235 ,235);
	background: -moz-linear-gradient(top, rgba(255, 255 ,255 , 1.0) 0%, rgba(235, 235, 235, 1.0) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255 ,255 , 1.0)), color-stop(100%,rgba(235, 235, 235, 1.0))); 
	background: -webkit-linear-gradient(top, rgba(255, 255 ,255 , 1.0) 0%,rgba(235, 235, 235, 1.0) 100%); 
	background: -o-linear-gradient(top, rgba(255, 255 ,255 , 1.0) 0%,rgba(235, 235, 235, 1.0) 100%); 
	background: -ms-linear-gradient(top, rgba(255, 255 ,255 , 1.0) 0%,rgba(235, 235, 235, 1.0) 100%); 
	background: linear-gradient(top, rgba(255, 255 ,255 , 1.0) 0%,rgba(235, 235, 235, 1.0) 100%);
}
section.page .close{
	width: 25px;
	color: #999;
	font-weight: bold;
	text-align: center;
	border: solid 1px #ccc;
	border-radius: 3px;
	background: white;
	display: block;
	cursor: pointer;
	position: absolute;
	top: 6px;
	right: 1%;
}
section.page article{
    width: 96%;
	padding: 1em 2% 0 2%;
    font-size: 90%;
	border-top: none;
    color: #555;
    word-break: break-all;
}
section.page article form > dl, section.page article fieldset > dl{
    margin-bottom: 1em;
    width: auto;
}
section.page article dl dt, section.page article dl dd{
    display: inline-block;
    vertical-align: top;
}
section.page article dl dt > span, section.page article dl dd > span{
    width: 100%;
    display: inline-block;
}
section.page article input,
section.page article textarea{
    max-width: 98%;
}
section.page article label{
	margin-right: 10px;
}
section.page article dl dd > span > ul li{
	width: 150px;
	margin-right: 10px;
	text-align: center;
	vertical-align: top;
	display: inline-block;
}
section.page article dl dd > span ul li img{
	width: 150px;
	margin-bottom: 5px;
	border: solid 1px white;
	box-shadow: 0px 0px 7px rgba(55, 55, 55, .5);
	background: white;
}
section.page article dl dt.h{
    width: 19%;
}
section.page article dl dd.l{
    width: 80%;
}
section.page article dl dd.f{
	width: 100%
}
section.page article dl dd.m{
	width: 50%
}
section.page article dl dd.s{
	width: 29%;
}
section.page article fieldset{
	width: 96%;
	margin-bottom: 1em;
	padding: 1em 2% 0 2%;
	border: solid 1px #ddd;
	border-radius: 5px;
}
section.page article fieldset legend{
	padding: 0 5px;
	color: #ccc;
}
section.page article p.des{
	margin: .5em 0 0;
	color: #999;
	display: block;
}
section.page article p.sum{
	padding: 5px 2%;
	margin-bottom: 0;
	border-radius: 5px;
	background-color: #f3f3f3;
	display: block;
}
section.page article fieldset > iframe{
	height: 500px;
}
section.page table{
	width: 100%;
	font-size: 90%;
	border: solid 1px #ccc;
	border-top: 0;
	border-radius: 5px;
	border-collapse: collapse;
	border-spacing: none;
	overflow: hidden;
}
section.page table th, section.page table td{
	padding: .5em 1%;
	color: #555;
	text-align: left;
	border: solid 1px #ccc;
}
section.page table th{
	border-top: 0;
}
section.page table tbody tr:nth-child(2n-1) {
	background-color: #f9f9f9;
}
section.page table tbody tr:hover{
	background-color: #eee;
}
section.page hr{
	margin-bottom: 1em;
}

/*
 * DEBUG
 */
section.debug{
    width: 80%;
    margin: auto;
}

/*
 * REGIST
 */
section.regist article{
	width: 94%;
	padding: 1em 3% 0 3%;
}
section.regist h3{
	padding: 1.5em 0 .5em 3%;
	font-size: 130%;
	color: #76ad1c;
	display: inline-block;
}
section.regist article h5{
	font-size: 110%;
}

/*
 * UPLOAD
 */
section.upload ul{
	width: 100%;
	list-style: none;
}
section.upload ul li{
	width: 20%;
	max-width: 182px;
	height: 180px;
	margin: .5em 1%;
	vertical-align: middle;
	border: solid 1px white;
	display: inline-block;
	overflow: hidden;
	position: relative;
}
section.upload ul li:hover, section.upload ul li.hover{
	border: solid 1px #777;
	border-radius: 5px;
	background: rgba(55, 55, 55, .3);
}
section.upload ul li img{
	max-width: 90%;
	max-height: 100%;
	margin: 5px auto;
	border: solid 1px white;
	box-shadow: 0px 0px 7px rgba(55, 55, 55, .5);
	background: white;
	display: block;
}
section.upload ul li span{
	width: 100%;
	margin-top: .2em;
	text-align: center;
	word-break: break-all;
	display: block;
	position: absolute;
	top: 140px;
}
section.upload ul li input{
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 140px;
}
section.upload div.upload_delete{
	padding: 2px 10px;
	color: white;
	border-bottom-left-radius: 5px;
	background: rgba(55, 55, 55, .7);
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

/*
 *
 */
.select_file_panel{
	width: 100%;
	height: 100%;
	background-color: rgba(55, 55, 55, .6);
	position: fixed;
	top: 0;
	left: 0;
}
.select_file_panel > div{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
section.select_file{
	background: rgb(235, 235, 235);
}
section.select_file h4{
	border-bottom: 0;
}
section.select_file article{
	width: 94%;
	margin: auto;
	border: solid 1px #ccc;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(55, 55, 55, .4) inset;
	background: white;
}
section.select_file ul li{
	margin: .5em 2%;
}
section.select_file div.contral{
	margin: 10px 1% 5px;
	text-align: right;
}

/*
 * ICON
 */
.icon-16{
    padding-left: 18px;
    color: #dcdcdc;
    background-repeat: no-repeat;
    background-position: left 2px;
}
.icon-16:hover{
    color: white;
}
.icon-account{
    background-image: url('./img/icon_16_account.png');
}
.icon-account:hover{
    background-image: url('./img/icon_16_account_o.png');
}
.icon-help{
    background-image: url('./img/icon_16_help.png'); 
}
.icon-help:hover{
    background-image: url('./img/icon_16_help_o.png'); 
}
.icon-18{
	background-repeat: no-repeat;
	background-position: 10px center;
}
.icon-setting{
	background-image: url('./img/icon_18_setting.png');
}
.icon-setting:hover, .icon-setting_hover{
	background-image: url('./img/icon_18_setting_o.png');
}
.icon-media{
	background-image: url('./img/icon_18_media.png');
}
.icon-media:hover, .icon-media_hover{
	background-image: url('./img/icon_18_media_o.png');
}
.icon-user{
	background-image: url('./img/icon_18_user.png');
}
.icon-user:hover, .icon-user_hover{
	background-image: url('./img/icon_18_user_o.png');
}
.icon-project{
	background-image: url('./img/icon_18_project.png');
}
.icon-project:hover, .icon-project_hover{
	background-image: url('./img/icon_18_project_o.png');
}