@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&subset=japanese');
/*----------------------------------------------------
 default
----------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}
a { -webkit-tap-highlight-color: rgba(200,200,555,0.6); cursor: pointer;}
a:link { text-decoration: none; color: #5856A0; }
a:visited { text-decoration: none; color: #5856A0; }
img { vertical-align: top; }
li { list-style-type:none; }
h1, h2, h3 { font-weight: normal; }
/*----------------------------------------------------
 clearfix
----------------------------------------------------*/
.clr:after { content: ''; display: block; clear: both; }

/*----------------------------------------------------
 Body
----------------------------------------------------*/
html { min-height: 100%; position: relative;}
body {
	background-color:#E9EAEC;
	color: #464646;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: 100%;
}

/*----------------------------------------------------
 header
----------------------------------------------------*/
header{
	background-color: #192231;
	width: 100%;
	min-height: 40px;
	box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
	position: fixed;
	z-index: 100;
}
header .logo{
	width: 214px;
	padding: 9px 0 0 8px;
	float: left;
}
header .logo img{
	height: 22px;
}

header .btnArea{
	float: right;
	padding: 10px 24px 0 0;
	font-size: 0;
}

/* ----- userName ----- */
header .btnArea .userName{
	position: relative;
	display: inline-block;
	height: 20px;
	font-size: 14px;
	color: #FFF;
}
header .btnArea .userName > i{
	font-size: 20px;
	margin-right: 8px;
}
header .btnArea .userName a{
	font-size: 14px;
	color: #FFF;
	vertical-align: top;
}
header .btnArea .userName a i{
	font-size: 16px;
	margin-left: 8px;
}
header .btnArea .userName a:hover{
	color: #AAA;
}

/* ----- userMenu ----- */
header .btnArea .userName .userMenu{
	display:none;
	box-sizing: border-box;
	background-image: url("/img/balloon_top.png"),url("/img/balloon_btm.png");
	background-repeat: no-repeat;
	background-position: top left, bottom left;
	width: 152px;
	padding: 20px 0 14px;
	position: absolute;
	top: 24px;
	left: 40%;
	margin-left: -76px;
	z-index: 10;
}
header .btnArea .userName .userMenu li{
	box-sizing: border-box;
	background-image: url("/img/balloon_midd.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 152px;
	height: 32px;
	padding: 0 6px 0 4px;
}
header .btnArea .userName .userMenu li a{
	display: block;
	padding: 9px 12px;
	color: #FFF;
	font-size: 13px;
	line-height: 1;
}
header .btnArea .userName .userMenu li a i{
	margin: 0 8px 0 0;
}
header .btnArea .userName .userMenu li a:hover{
	background-color: #546672;
}
.spMenu{display: none;}


/*----------------------------------------------------
 .sidebar
----------------------------------------------------*/
.sidebar{
	background-color: #D7DBDD;
	width: 200px;
	height: 100%;
	padding: 40px 0 0;
	position: fixed;
	z-index: 50;
	box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
}
.sidebar nav .mainNavi{
	width: 100%;
}
.sidebar nav .mainNavi li a{
	display: block;
	background-color: #D7DBDD;
	padding: 11px 0 11px 8px;
	color: #464646;
	font-weight: 500;
}
.sidebar nav .mainNavi li a i{
	font-size: 16px;
	margin-right: 6px;
}
.sidebar nav .mainNavi li a.indent{
	padding: 11px 0 11px 32px;
}
.sidebar nav .mainNavi li a.select,
.sidebar nav .mainNavi li a:hover{
	background-color: #B6BDC0;
	color: #5856A0;
}

.sidebar nav .mainNavi li a.systemManag:hover {
    background-color: #D7DBDD;
    cursor: default;
    color: #464646;
}
.sidebar nav .mainNavi li{
	position: relative;
}
.sidebar nav .mainNavi li .acpt{
	position:absolute;
	top: 7px;
	right: 3px;
	display: block;
	padding: 1px 2px 3px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: #F42D3C;
	border: 1px solid #F42D3C;
	border-radius: 50%;
}

/*----------------------------------------------------
 main
----------------------------------------------------*/
main{
	box-sizing: border-box;
	width: 100%;
	padding: 0 24px 0 224px;
	position: absolute;
	top: 48px;
	/*overflow-y: auto;*/
}

/*----------------------------------------------------
 .pageHeader
----------------------------------------------------*/
.pageHeader{
	box-sizing: border-box;
	width: 100%;
	padding: 16px 0 8px;
	border-bottom: 1px solid #A3A3A3;
}
.pageHeader h2{
	font-size: 24px;
	line-height: 1.4;
	font-weight: 500;
	padding: 8px 0 0 8px;
	float: left;
}
.pageHeader h2 i{
	margin-right: 8px;
}

/*----------------------------------------------------
 contentsHeader
----------------------------------------------------*/
main .contentsHeader{
	width:100%;
	margin: 0 0 16px;
}
main .contentsHeader a.newProject{
	padding: 7px 24px 7px 8px;
	margin: 0;
	font-size: 18px;
	border-radius: 18px;
}
main .contentsHeader a.newProject i{
	font-size: 20px;
	margin-right: 16px;
}
main .contentsHeader .comment{
	padding: 0 0 16px;
	border-bottom: 1px dotted #464646;
}

main .contents{
	padding: 16px 0 24px;
}


/*----------------------------------------------------
 ボタン
----------------------------------------------------*/
button.btn,
a.btn{
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: #FFF;
	padding: 8px 16px;
	margin: 0 8px;
	border-radius: 16px;
	cursor: pointer;
}

button[type="submit"]{
	display: inline-block;
	background-color: transparent;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: #FFF;
	padding: 8px 16px;
	margin: 0 8px;
	border-radius: 16px;
	cursor: pointer;
	border: 0;
}

/* ----- color -----*/
/* 紫 */
.btn.violet{ background-color: #7270B7;}
.btn.violet:hover{ background-color: #5856A0;}

/* 青 */
.btn.blue{ background-color: #3DAEDA;}
.btn.blue:hover{ background-color: #2895BD;}

/* 赤 */
.btn.red{ background-color: #F95866;}
.btn.red:hover{ background-color: #E33E4A;}

/* 黄 */
.btn.yellow{ background-color: #FFE11A;}
.btn.yellow:hover{ background-color: #E4C903;}

/* 緑 */
.btn.green{ background-color: #8EBF52;}
.btn.green:hover{ background-color: #759F40;}

/* 金 */
.btn.gold{ background-color: #F7BB43;}
.btn.gold:hover{ background-color: #F1AB18;}

/* 灰 */
.btn.gray{ background-color: #BAC5CB;}
.btn.gray:hover{ background-color: #A0ADB4;}

/* 青灰 */
.btn.blueGray{ background-color: #768BA2; }
.btn.blueGray:hover{ background-color: #4C6583;}

/*----------------------------------------------------
 .projectWrap
----------------------------------------------------*/
.projectWrap{
	font-size: 0;
}

/* ----- projectBox ----- */
.projectBox{
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	width: 256px;
	margin: 0 24px 24px 0;
	border: 1px solid #D9D9D9;
	border-radius: 3px;
}

/* ----- favoIcon ----- */
.projectBox .favoIcon{
	display: block;
	font-size: 24px;
	line-height: 1;
	position: absolute;
	top: 6px;
	right: 8px;
	z-index: 5;
}
.projectBox a.favoIcon.hide i.fas,
.projectBox a.favoIcon i.far{
	display: none;
}
.projectBox a.favoIcon.hide i.far,
.projectBox a.favoIcon i.fas{
	display: inline-block;
}

.projectBox a.favoIcon{
	color: #F2C514;
}
.projectBox a.favoIcon.hide{
	color: #D9D9D9;
}
.projectBox a.favoIcon:hover{
	color: #F2C514;
}

.projectBox a.favoIcon.hide.disable:hover {
    color: #D9D9D9;
}

/* ----- teamIcon ----- */
.projectBox .teamIcon{
	background-color: #3F637D;
	border-radius: 3px;
	padding: 0 4px;
	color: #FFF;
	font-size: 13px;
	font-weight: 500;
	position: absolute;
	top: 154px;
	right: 8px;
	z-index: 5;
}
.projectBox .teamIcon.hide{
	display: none;
}

/* ----- imageArea ----- */
.projectBox > div{
	box-sizing: border-box;
}
.projectBox .imageArea{
	display: block;
	position: relative;
	background-color: #F3F3F3;
	height: 180px;
}
.projectBox .imageArea img{
	max-width: 95%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(-50%, -50%);
}
.projectBox .imageArea:hover {
	background-color: #EFEFEF;
}

/* ----- detailArea ----- */
.projectBox .detailArea{
	background-color: #FFF;
	padding: 12px 8px;
	text-align: left;
}
.projectBox .detailArea .projectName{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 8px;
}
.projectBox .detailArea .date{
	color: #A3A3A3;
	font-size: 13px;
	margin: 0 0 8px;
}
.projectBox .detailArea .userName{
	font-size: 13px;
}

/* ----- menuIcon ----- */
.projectBox .projectMenu .menuIcon{
	position: absolute;
	bottom: 8px;
	right: 8px;
}
.projectBox .projectMenu .menuIcon a{
	display: block;
	color: #A3A3A3;
	font-size: 20px;
	padding: 0 12px;
}
.projectBox .projectMenu .menuIcon a:hover{
	color: #5D93B5;
}

/* ----- projectMenu ----- */
.projectBox .projectMenu{
	position: relative;
}
.projectBox .projectMenu .menuBalloon{
	display:none;
	box-sizing: border-box;
	background-image: url("/img/balloon_top.png"),url("/img/balloon_btm.png");
	background-repeat: no-repeat;
	background-position: top left, bottom left;
	width: 152px;
	padding: 20px 0 14px;
	position: absolute;
	top: 0px;
	right: -55px;
	z-index: 10;
}
.projectBox .projectMenu .menuBalloon li{
	box-sizing: border-box;
	background-image: url("/img/balloon_midd.png");
	background-repeat: repeat-y;
	background-position: 0 0;
	width: 152px;
	min-height: 32px;
	padding: 0 6px 0 4px;
}
.projectBox .projectMenu .menuBalloon li a{
	display: block;
	padding: 9px 12px;
	color: #FFF;
	font-size: 13px;
	line-height: 1;
}
.projectBox .projectMenu .menuBalloon li a i{
	margin: 0 8px 0 0;
}
.projectBox .projectMenu .menuBalloon li a:hover{
	background-color: #546672;
}
.projectBox .notHref{
	cursor: default;
}

/*----------------------------------------------------
 .teamManag
----------------------------------------------------*/
.teamManagWrap h3{
	font-size: 20px;
	color: #5D93B5;
	margin: 0 0 8px;
}
/* ----- invitation ----- */
#invitation{
	max-width: 752px;
	font-size: 0;
	padding: 0 0 16px;
}
#invitation input{
	box-sizing: border-box;
	width: calc(100% - 152px);
	padding: 10px 8px;
	font-size: 16px;
	border-radius: 4px;
	border: 1px solid #464646;
}
input[placeholder]::-webkit-input-placeholder{color: #D9D9D9;}
input[placeholder]:-ms-input-placeholder{color: #D9D9D9;}
input[placeholder]::-moz-placeholder{color: #D9D9D9;}

#invitation select{
	box-sizing: border-box;
	width: 136px;
	padding: 8px 8px 12px;
	margin: 0 0 0 16px;
	font-size: 14px;
	border-radius: 4px;
	border: 1px solid #464646;
}
#invitation .btnArea{
	text-align: center;
}

#invitation button[type="submit"]{
	background-color: #5D93B5;
	width: 160px;
	font-size: 18px;
	padding: 11px 0;
	margin: 16px;
	border-radius: 20px;
}
#invitation button[type="submit"]:hover{
	background-color: #3F637D;
}

#invitation a.cancel{
	background-color: #A3A3A3;
	width: 160px;
	font-size: 18px;
	padding: 11px 0;
	margin: 16px;
	border-radius: 20px;
}
#invitation a.cancel:hover{
	background-color: #464646;
}


/* ----- sharedUser ----- */
.sharedUser{
	padding: 16px 0 24px;
	border-top: 1px dotted #464646;
}

.sharedUser .userList{
	max-width: 752px;
	border-top: 1px solid #A3A3A3;
	background-color: #FFF;
}

.memberReadonly {
    text-decoration: none !important;
    cursor: default;
    pointer-events: none;
}
/* --- userWrap --- */
.userWrap{
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding: 16px;
	font-size: 0;
	border-bottom: 1px solid #A3A3A3;
}
#invitation .userWrap{
	background-color: #FFF;
	border-top: 1px solid #A3A3A3;
	margin: 16px 0 0;
}

.userWrap > div{
	display: inline-block;
}
.userWrap .deleteBtn{
	display: block;
	position: absolute;
	top: 20px;
	right: 16px;
	opacity: 0.6;
}
.userWrap .deleteBtn:hover{
	opacity: 1;
}

.select-teamPosition{
	border-radius: 4px !important;
    border: 1px solid #464646 !important;
}

.userWrap .userRole{
	position: absolute;
	font-size: 13px;
	margin-left: 88px;
}
.userWrap .userShareMode{
	margin-top: 22px;
}



/* --- userData --- */
.userWrap .userData{
	box-sizing: border-box;
	position: relative;
	width: calc(100% - 244px);
	font-size: 0;
	padding: 0 8px 0 40px;
}
.userWrap .userData > div{
	display: inline-block;
	font-size: 13px;
	line-height: 1.3;
	padding: 0 8px 4px;
}
.userWrap .userData .userIcon{
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
}
.userWrap .userData .email{
	width: 100%
}
.userWrap .userData .plan{
	font-weight: 500;
}
.userWrap .userData .plan.free{ color: #6DC174;}
.userWrap .userData .plan.personal{ color: #5D93B5;}
.userWrap .userData .plan.team{ color: #3F637D;}
.userWrap .userData .plan.custom{ color: #F2C514;}

/* --- btnArea --- */
.userWrap .btnArea{
	box-sizing: border-box;
	position: relative;
	background-color: #E9EAEC;
	width: 204px;
	height: 24px;
	font-size: 0;
	margin: 4px 40px 0 0;
	border-radius: 12px;
	vertical-align: top;
}

.userWrap .btnArea a.status{
	display: inline-block;
	background-color: #E9EAEC;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: #A3A3A3;
	padding: 5px 16px;
	margin: 0;
	border-radius: 12px;
	-webkit-appearance: none;
}

.userWrap .btnArea a.btn{
	display: inline-block;
	background-color: #E9EAEC;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: #A3A3A3;
	padding: 5px 16px;
	margin: 0;
	border-radius: 12px;
}
.userWrap .btnArea a.btn:hover{
	color: #464646;
}
.userWrap .btnArea a.allShareBtn.select{
	background-color: #6DC174;
	color: #FFF;
}
.userWrap .btnArea a.selectShareBtn.select{
	background-color: #5D93B5;
	color: #FFF;
}

/* --- projectList --- */
.userWrap .projectList{
	box-sizing: border-box;
	background-color: #E9EAEC;
	width: 100%;
	padding: 8px;
	margin: 8px 0 0;
}
#invitation .userWrap .projectList{
	background-color: transparent;
	padding: 0;
}
.userWrap .projectList h5{
	font-size: 12px;
	font-weight: 500;
	margin: 0 0 8px 0;
}
.userWrap .projectList .comment{
	font-size: 13px;
}
.userWrap .projectList .noProject{
	font-size: 13px;
	font-weight: 500;
	color: #E96048;
}
.userWrap .ui{
	font-size: 0;
}
.userWrap .projectList li{
	display: inline-block;
	font-size: 13px;
	margin: 0 4px 8px;
}
.userWrap .projectList li a{
	display: block;
    color: #337ab7;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 4px;
    -webkit-appearance: none;
}
.userWrap .projectList li a.share{
	background-color: #F2C514;
	color: #FFF;
	font-weight: 500;
}


/*----------------------------------------------------
 .accountManag
----------------------------------------------------*/
.accountManag .contentsHeader{
	margin: 0;
}
.accountManag .contentsHeader a.btn{
	background-color: #6DC174;
	color: #589A5A;
	margin: 0 8px 16px;
}
.accountManag .contentsHeader a.select,
.accountManag .contentsHeader a.btn:hover{
	color: #FFF;
}

/* --- accountInfo --- */
.accountManag #accountInfo .wrap{
	padding: 0 0 24px;
	border-bottom: 1px dotted #464646;
}
.accountManag #accountInfo .row{
	max-width: 576px;
	padding: 11px 0;
	font-size:0;
	margin-left: 0;
    margin-right: 0;
}
.accountManag #accountInfo .row label{
	display: inline-block;
	width: 200px;
	font-size: 16px;
	font-weight: 500;
	color: #3F637D;
	line-height: 32px;
	vertical-align: top;
}
.accountManag #accountInfo .row .email{
	box-sizing: border-box;
	display: inline-block;
	width: calc(100% - 200px);
	padding: 6px 0;
	font-size: 16px;
}
.accountManag #accountInfo .row input{
	box-sizing: border-box;
	width: calc(100% - 200px);
	padding: 7px 8px;
	font-size: 14px;
	border-radius: 4px;
	border: 1px solid #464646;
}
.accountManag #accountInfo .passChange .notes{
	padding: 16px 0 8px;
}
.accountManag #accountInfo button.accountUpdate{
	background-color: #5D93B5;
	margin: 24px 0;
}
.accountManag #accountInfo button.accountUpdate:hover{
	background-color: #3F637D;
}

/* --- useDetail --- */
.accountManag #useDetail .row{
	border-top: 1px dotted #464646;
	padding: 20px 0;
	font-size:0;
	margin-left: 0;
    margin-right: 0;
}
.accountManag #useDetail .row.right{
	padding: 8px 0;
	text-align: right;
}
.accountManag #useDetail .row label{
	display: inline-block;
	width: 144px;
	font-size: 16px;
	font-weight: 500;
	color: #3F637D;
	line-height: 24px;
	vertical-align: bottom;
}
.accountManag #useDetail .row div{
	display: inline-block;
	font-size: 14px;
}
.accountManag #useDetail .row a.btn{
	background-color: #5D93B5;
	padding: 4px 16px 6px;
	font-size: 14px;
}
.accountManag #useDetail .row a.btn:hover{
	background-color: #3F637D;
}
.accountManag #useDetail .row .cancellationLink{
	font-size: 14px;
	font-weight: 500;
	color: #5D93B5;
}
.accountManag #useDetail .row .cancellationLink:hover{
	color: #3F637D;
	text-decoration: underline;
}

/* --- planChange --- */
.accountManag #planChange{
	border-top: 1px dotted #464646;
	padding: 24px 0;
}
.accountManag #planChange .container{
	display: table;
	table-layout: fixed;
	max-width: 800px;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
}
.accountManag #planChange .planBox{
	display: table-cell;
	background-color: #FFF;
	vertical-align: top;
	text-align: center;
	width: 25%;
	border: 1px solid #A3A3A3;
	border-right: 0;
}
.accountManag #planChange .planBox.custom{
	border-right: 1px solid #A3A3A3;
}

.accountManag #planChange .planBox .ttl{
	padding: 6px 0 8px;
	font-size: 14px;
	color: #FFF;
}
.accountManag #planChange .planBox .ttl p{
	font-size: 20px;
	font-weigth: 500;
}
.accountManag #planChange .planBox.free .ttl{background-color: #6DC174;}
.accountManag #planChange .planBox.personal .ttl{background-color: #5D93B5;}
.accountManag #planChange .planBox.team .ttl{background-color: #3F637D;}
.accountManag #planChange .planBox.custom .ttl{background-color: #F2C514;}

.accountManag #planChange .planBox .price{
	box-sizing: border-box;
	min-height: 82px;
	padding: 8px 0;
	font-size: 20px;
	font-weight: 600;
}
.accountManag #planChange .planBox.free .price{ color: #6DC174;}
.accountManag #planChange .planBox.personal .price{ color: #5D93B5;}
.accountManag #planChange .planBox.team .price{ color: #3F637D;}
.accountManag #planChange .planBox.custom .price{ color: #464646; font-size: 16px;}

.accountManag #planChange .planBox .price p{
	font-size: 16px;
	font-weight: 400;
	color: #464646;
}
.accountManag #planChange .planBox.custom .price p{
	font-size: 14px;
}
.accountManag #planChange .planBox .price strong{
	font-size: 32px;
}
.accountManag #planChange .planBox a.btn{
	width: 85%;
	padding: 8px 0;
	margin: 0;
}
.accountManag #planChange .planBox.free a.btn{ background-color: #6DC174;}
.accountManag #planChange .planBox.personal a.btn{ background-color: #5D93B5;}
.accountManag #planChange .planBox.team a.btn{ background-color: #3F637D;}
.accountManag #planChange .planBox.custom a.btn{ background-color: #F2C514;}
.accountManag #planChange .planBox a.btn.current{ background-color: #D9D9D9; color: #A3A3A3; cursor: default;}

.accountManag #planChange .planBox.free a.btn:hover{ background-color: #589A5A;}
.accountManag #planChange .planBox.personal a.btn:hover{ background-color: #3F637D;}
.accountManag #planChange .planBox.team a.btn:hover{ background-color: #2D3D4A;}
.accountManag #planChange .planBox.custom a.btn:hover{ background-color: #D9B317;}
.accountManag #planChange .planBox a.btn.current:hover{ background-color: #D9D9D9; color: #A3A3A3;}

.accountManag #planChange .planBox .detail{
	text-align: left;
	padding: 8px 12px;
	font-size: 13px;
}

.accountManag #planChange .notes{
	border-top: 1px dotted #464646;
	padding: 16px 0;
	margin: 24px 0 0;
}
.accountManag #planChange .notes p{
	font-size: 16px;
	font-weight: 500;
	color: #E95F47;
	margin: 0 0 16px;
}

/* --- issueInvoice --- */
.accountManag #issueInvoice{
	border-top: 1px dotted #464646;
	border-bottom: 1px dotted #464646;
	padding: 24px 0;
}
.accountManag #issueInvoice h5{
	color: #3F637D;
	margin: 0 0 16px;
}
.accountManag #issueInvoice table{
	min-width: 600px;
}
.accountManag #issueInvoice .tableWrap{
	overflow: auto;
}
.accountManag #issueInvoice table th,
.accountManag #issueInvoice table td{
	border: 1px solid #A3A3A3;
	text-align: center;
	padding: 6px;
	vertical-align: middle;
}
.accountManag #issueInvoice table th{
	background-color: #D9D9D9;
	border-bottom: 2px solid #A3A3A3;
	font-weight: 400;
}
.accountManag #issueInvoice table td{
	background-color: #FFF;
}
.accountManag #issueInvoice table td a.btn{
	background-color: #5D93B5;
	padding: 5px 16px;
	font-size: 14px;
	margin: 0;
}
.accountManag #issueInvoice table td a.btn:hover{
	background-color: #3F637D;
}
.accountManag #issueInvoice table td:nth-child(2){
	max-width: 240px;
	text-align: left;
}
.accountManag #issueInvoice table td:nth-child(6),
.accountManag #issueInvoice table td:nth-child(7){
	width: 64px;
}

.accountManag #issueInvoice .pagerArea{
	margin: 16px 0;
	max-width: 736px;
	text-align: center;
}
.accountManag #issueInvoice .pagerArea ul{
	font-size: 0;
}
.accountManag #issueInvoice .pagerArea li{
	display:inline-block;
	font-size: 20px;
	color: #A3A3A3;
	margin: 0 6px;
	vertical-align: top;
}
.accountManag #issueInvoice .pagerArea li a{
	display: block;
	opacity: 0.5;
}
.accountManag #issueInvoice .pagerArea li a:hover{
	opacity: 1;
}
.accountManag #issueInvoice .pagerArea li a img{
	padding: 4px;
}
.accountManag #issueInvoice .pagerArea li.slash{
	margin: 0 4px;
}
/*----------------------------------------------------
 .paymentMethods
----------------------------------------------------*/
.paymentMethods .contentsHeader{
	padding: 0 0 16px;
	margin: 0 0 24px;
	border-bottom: 1px dotted #464646;
	font-size: 18px;
	font-weight: 500;
	color: #5D93B5;
}
.paymentMethods #paymentMethods form{
	max-width: 752px;
}

.paymentMethods #paymentMethods .wrap{
}

.paymentMethods #paymentMethods .wrap .title{
	background-color: #D9D9D9;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	border: 1px solid #A3A3A3;
}

.paymentMethods #paymentMethods .wrap .row{
	background-color: #FFF;
	font-size: 0;
	text-align: left;
	margin: 0;
	border: 1px solid #A3A3A3;
}

.paymentMethods #paymentMethods .row:last-child{
	border-top: 0;
}

.paymentMethods #paymentMethods .row label{
	box-sizing: border-box;
	display: inline-block;
	width: 200px;
	padding: 16px 24px;
	font-size: 14px;
	vertical-align: top;
}
.paymentMethods #paymentMethods .row .content{
	box-sizing: border-box;
	display: inline-block;
	font-size: 14px;
	padding: 16px 24px;
	border-left: 1px solid #A3A3A3;
}

.paymentMethods #paymentMethods .row .content input{
	box-sizing: border-box;
	width: 200px;
	padding: 7px 8px;
	font-size: 14px;
	border-radius: 4px;
	border: 1px solid #464646;
}
.paymentMethods #paymentMethods .row .content .example{
	padding: 4px 0 0;
	font-size: 12px;
	color: #A3A3A3;
}

.paymentMethods #paymentMethods .row .content select{
	box-sizing: border-box;
	padding: 7px 8px;
	font-size: 14px;
	border-radius: 4px;
	border: 1px solid #464646;
}
.paymentMethods #paymentMethods .row .content span{
	margin: 0 16px 0 2px;
}

/* --- information --- */
.paymentMethods #paymentMethods .information{
	position: relative;
	font-weight: 500;
	text-align: left;
	margin: 16px 0 8px;
}
.paymentMethods #paymentMethods .information.center{
	text-align: center;
	margin: 16px 0 56px;
}
.paymentMethods #paymentMethods .information.center:after{
	content: "";
	display: block;
	width: 0px;
	height: 0px;
	border: 32px solid transparent;
	border-top: 32px solid #F2C514;
	position: absolute;
	top: 24px;
	left: 50%;
	margin-left: -32px;
}

/* --- btnArea --- */
.paymentMethods #paymentMethods .btnArea{
	text-align: center;
	font-size: 0;
	margin: 32px 0 0;
}

.paymentMethods #paymentMethods .btnArea a.btn{
	width: 144px;
	padding: 12px 0;
	margin: 0 16px;
	border-radius: 20px;
}
.paymentMethods #paymentMethods .btnArea a.cancel{
	background-color: #A3A3A3;
}
.paymentMethods #paymentMethods .btnArea a.cancel:hover{
	background-color: #464646;
}
.paymentMethods #paymentMethods .btnArea a.confirmation,
.paymentMethods #paymentMethods .btnArea a.revise{
	background-color: #5D93B5;
}
.paymentMethods #paymentMethods .btnArea a.confirmation:hover,
.paymentMethods #paymentMethods .btnArea a.revise:hover{
	background-color: #3F637D;
}





/**********************************************************/
/*モックのためのCSS*/
#mock{
	position: fixed;
	bottom: 0;
	right: 0;
}
#mock a{
	display: block;
	width: 80px;
	padding: 10px 0;
	background-color: red;
	color: #FFF;
	text-align: center;
}
/**********************************************************/

.pageHeader .planData{
	font-size: 0;
	text-align: right;
	float: right;
}
.pageHeader .planData > div{
	display: inline-block;
	line-height: 1;
}
.pageHeader .planData .plan{
	padding: 5px 8px;
	margin: 0 8px 4px;
	color: #FFF;
	font-size:14px;
	font-weight: 500;
	border-radius: 4px;
}
.pageHeader .planData .projectCount{
	color: #5D93B5;
	font-size:16px;
	font-weight: 500;
	margin: 0 16px 4px;
}
.pageHeader .planData .projectCount .remainsCount{
	display: inline-block;
	background-color: #FFF;
	padding: 6px 16px;
	margin: 0 4px 0;
	font-size:18px;
	border-radius: 4px;
}
.pageHeader .planData p{
	font-size:13px;
}

.pageHeader .planData.free .plan{ background-color: #6DC174;}
.pageHeader .planData.free .projectCount .remainsCount{ color: #6DC174;}

.pageHeader .planData.personal .plan{ background-color: #5D93B5;}
.pageHeader .planData.personal .projectCount .remainsCount{ color: #5D93B5;}

.pageHeader .planData.team .plan{ background-color: #3F637D;}
.pageHeader .planData.team .projectCount .remainsCount{ color: #3F637D;}

.pageHeader .planData.custom .plan{ background-color: #F2C514;}
.pageHeader .planData.custom .projectCount .remainsCount{ color: #F2C514;}

.btn-grey{
    background-color: #546672 !important;
}

.btn-grey:hover{
    background-color: #2D3D4A !important;
}

.error {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.error-message{
    color: #a94442;
    font-size: 14px;
}

.success {
    border-color: #ebccd1;
    color: #3c763d;
    background-color: #dff0d8;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

header .btnArea a.upgrade {
    background-color: #F2C514;
    font-size: 13px;
    padding: 5px 16px;
    margin: -12px 32px 0 0;
}

.btnArea a.upgrade {
    background-color: #F2C514;
    font-size: 18px;
    padding: 5px 16px;
    margin: 0 32px 0 0;
}

header .btnArea a.upgrade:hover, .btnArea a.upgrade:hover {
    background-color: #D9B317;
}

/* pagination */
.paginationWrap{
    margin: 8px 0;
}
.pagination>li{
	font-size: 16px;
}
.pagination>li>a,
.pagination>li>span{
	width: 24px;
	padding: 4px 0;
	margin-left: 4px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	background-color: #FFF;
	border: 1px solid #DDE1E3;
	border-radius: 3px;
	float: left;
}
.pagination>li:last-child>a,
.pagination>li:last-child>span{
	border-radius: 3px;
}

.pagination li:first-child a{
	background-color: #E9EAEC;
	width: auto;
	padding: 0 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	text-align: left;
	border: none;
}
.pagination li:first-child a:hover{
	background-color: #E9EAEC;
	border: none;
}
.pagination li:nth-child(2) a{
	background-color: #90A4AD;
	border: 1px solid #90A4AD;
}
.pagination>li>a:hover,
.pagination>.active>a,
.pagination>li>span:hover{
	color: #FFF;
	background-color: #90A4AD;
	border: 1px solid #90A4AD;
}


/* listTable */
.listTableWrap{
	margin-top: 8px;
}
.listTableWrap table{
	table-layout: fixed;
	width: 100%;
}
.listTable th,
.listTable td{
	border: 1px solid #A3A3A3;
	min-height: 26px;
	padding: 3px;
	margin: 0;
	vertical-align: middle;
}
.listTable th{
	background-color: #D9D9D9;
	font-weight: 500;
	text-align: center;
	border-bottom-width: 2px;
}

.listTable td{
	word-break: break-all;
}

.listTable tr:nth-child(odd){
	background-color: #F3F3F3;
}
.listTable .action {
	padding: 6px;
}
.detailBtn{
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: #FFF;
	padding: 3px 16px 5px;
	border-radius: 12px;
	cursor: pointer;
	background-color: #5D93B5;
}
.detailBtn:hover{
	background-color: #3F637D;
}

.btn.notSave {
	background-color: #aaaaaa !important;
	cursor: not-allowed;
}

/*table-BusinessHearing*/

.table-BusinessHearing {
	margin-bottom: 0;
}

.table-BusinessHearing th{
	/*border-bottom: 1.5px solid #464646 !important;*/
	border: none !important;
}

.table-BusinessHearing td, .table-BusinessHearing th{
	padding: 5px;
}

.table-BusinessHearing tbody{
	border: none !important;
}

.table-BusinessHearing .icon{
	width: 20px;
}

.table-BusinessHearing .btn.blue, .table-BusinessHearing .btn.green{
	padding: 5px 15px;
	font-size: 12px;
	min-width: auto;
}

.table-BusinessHearing div.tik{
	color: red;
	font-size: 18px;
	font-weight: bold;
	line-height: 0.8;
	width: 20px;
	display: inline-block;
}

.table-BusinessHearing tr.child td{
	border: none;
}

.table-BusinessHearing tr.child{
	display: none;
}

.table-BusinessHearing tbody tr.color{
     background-color: #F6F6F6;
}

.table-BusinessHearing .text-muted{
	color: #BABABA !important;
}

.table-BusinessHearing tr.child td:nth-child(2){
	padding-left: 28px;
}

.table-scroll{
    /*overflow-y: overlay;*/
    overflow-x: hidden;
    max-height: 420px;
    border-top: 1.5px solid #464646;
    border-bottom: 1px solid #464646;
}

.table-scroll-popup{
	max-height: 300px;
}

.table-scroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.table-scroll::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}

.table-scroll::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}