@charset "UTF-8";
/**********************************************************************
				RESET
**********************************************************************/
html, body { width: 100%; height: 100%; -webkit-font-smoothing: antialiased;}
html,body,div,span,
applet,object,iframe,
h2,h1,h2,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol,ul,li {
	list-style: none;
	}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
	}
h2,h1,h2,h4,h5,h6,strong,h2 em,h1 em, h2 em,h4 em,h5 em,h6 em,strong em,h2 a,h1 a,h2 a,h4 a,h5 a,h6 a {
	font-weight: bold;
	}
        
* {
	box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
}
button:focus { outline: none;}
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    border: 0;
}
input:focus,
textarea:focus,
select:focus { outline: none;}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ebfaff inset;
    -webkit-text-fill-color: #231815;
}
input {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    -webkit-appearance: checkbox;
    appearance: checkbox;
    cursor: pointer;
}
/* clear */
ul:after,
ol:after {
    content: ".";
    clear: both;
    display: block;
    font-size: 0.1em;
    height: 0.1px;
    line-height: 0;
    visibility: hidden;
    width: 0.1px;
} 
.clear { clear:both;}
/* forIE clear */
.clear {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    width: 0;
}
a img,
a:hover img { backface-visibility: hidden; zoom: 1;}
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/**********************************************************************
				BASE
**********************************************************************/
body {
    background-color: #002;
    color: #575757;
    font-family: "Noto Sans Japanese", sans-serif;
    font-size: 15px;
    line-height: 26px;
    overflow-x: hidden;
}
body.dtbody{
    background-color: rgb(253, 253, 237);
    color: #646060;
}
body.modal { background-color: #fff;}
.floatL { float: left; left: 0;}
.floatR { float: right; right: 0;}
.PCnone { display: none!important;}
/*-- TEXT SIZE --*/
.fontSS { font-size: 12px; line-height: 18px;}
.fontS { font-size: 13px; line-height: 23px;}
.fontM { font-size: 17px; letter-spacing: 0;}
.fontL { font-size: 20px; letter-spacing: 0.1rem; line-height: 30px;}
.fontLL { font-size: 30px; letter-spacing: 0.2rem; line-height: 50px;}
/*-- TEXT STYLE --*/
.fontJP { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Noto Sans Japanese", serif; font-weight: bold;}
.fontJPmin { font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}
.fontEN { font-family: 'Josefin Sans', sans-serif; letter-spacing: 0.2rem;}
.bld { font-weight: bold;}
/*-- TEXT ALIGN --*/
.textL { text-align: left!important;}
.textR { text-align: right!important;}
.textC { text-align: center!important;}
/*-- TEXT COLOR --*/
.clrWH { color: #fff;}
.clrBK { color: #231815;}
.clrNV { color: #1f2f54;}
.clrR { color: #b62905;}
.clrGR { color: #595757;}
.clrBL { color: #4667b1;}
/*-- ANIMATION --*/
a, .fade, a img, input[type="submit"], .button {
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
/*-- LINK --*/
a { color: #231815; text-decoration: none; outline: none!important;}
.txtLink { text-decoration: underline; color: #3245ea; display: inline-block;}
.button {
    width: 100%;
    max-width: 300px;
    display: block;
    background-color: #232e8a;
    color: #fff;
    font-weight: bold;
    height: 50px;
    line-height: 48px;
    font-size: 17px;
    text-align: center;
    margin: 20px auto 0;
    border-radius: 3px;
    cursor: pointer;
}
.button.black { background-color: #2f3f4e;}
.button.red { background-color: #dc4e41;}
.button.white { border: 1px #52565a solid; background-color: #fff; color: #2f3f4e;}
.button:hover { background-color: #3c4ccc;}
.button.black:hover { background-color: #46596b;}
.button.red:hover { background-color: #ff4231;}
.button.white:hover { background-color: #e2ebff;}
.button.back {
    padding: 0 25px 0 50px;
    background-position: left 20px center;
    background-image: url('/images/buttonArrowL.svg');
}
.button.add {
    background-image: url('/images/btnAdd.svg');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center left 20px;
    padding-left: 15px;
}
/*-- ALL --*/
.PCnone { display: none;}
.mainCnt { width: 85%; max-width: 1200px; margin: 0 auto;}
.box {
    background-color: #fff;
    border: 1px #dedede solid;
    padding: 20px 30px 25px;
    border-radius: 2px;
    margin-bottom: 20px;
}
.box.modalbase { border: none; padding: 0; border-radius: 0; margin-bottom: 0;}
.box.blue { background-color: #cdd0e0;}
.box .title {
    padding: 10px 0 15px 0;
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 20px;
    font-weight: bold;
    color: darkgoldenrod;
    border-bottom: 1px #dedede solid;
}
.box.blue .title {  border-bottom: 1px #979a9c solid;}
.box .title .endList {
    background-color: #b3b3b4;
    color: #fff;
    font-size: 13px;
    height: 30px;
    width: auto;
    padding: 0 30px 0 13px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    float: right;
    margin-top: -5px;
    background-image: url('/images/btnArrow_btmWH.svg');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center right 10px;
}
/*-------- FORM --------*/
input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"],
input[type="datetime-local"], input[type="date"], input[type="time"], input[type="password"],
textarea, select {
    font-family: "Noto Sans Japanese", sans-serif;
    width: 100%;
    background-color: #f7f7f7;
    border: 1px #c7c8c8 solid;
    border-radius: 2px;
    padding: 8px;
    font-size: 15px;
    line-height: 23px;
}
select, input[type="datetime-local"], input[type="date"], input[type="time"] { cursor: pointer; height: 42px;}
input[type="submit"] { cursor: pointer;}
input::placeholder, textarea::placeholder { color: #a0a0a0;}
input[type=radio] { display: none;}
input[type=radio]:checked + label { background-color: #475399; color: #fff; border: 1px solid #475399;}
.label {
    display: inline-block;
    margin: 0 1px;
    width: 90px;
    height: 40px;
    line-height: 39px;
    color: #626d77;
    text-align: center;
    cursor: pointer;
    border: 1px solid #626d77;
    border-radius: 3px;
    margin-bottom: 5px;
}
/*-------- MODAL WINDOW --------*/
.modal_wrap input[type="checkbox"] { display: none;}
.modal_overlay {
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	opacity: 0;
	transition: opacity 0.5s, transform 0s 0.5s;
	transform: scale(0);
}
.modal_trigger {
	position: absolute;
	width: 100%;
	height: 100%;
}
.modal_content {
    position: relative;
    align-self: center;
    width: 95%;
    max-width: 950px;
    max-height: 90%;
    padding: 40px;
    box-sizing: border-box;
    background: #fff;
    line-height: 1.4em;
    transition: 0.5s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.modal_wrap input:checked ~ .modal_overlay{
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s;
}
.modalBtn { width: 100%; text-align: center; margin-top: 20px;}
.modalBtn .button { width: 46%; max-width: 150px; margin: 1%; display: inline-block;}
/**********************************************************************
				HEADER
**********************************************************************/
header .accountname { height: 70px; margin-left: 10px; color: #fff;}
header .accountname img {
    height: 70px;
    padding: 12px;
    border-radius: 70px;
    vertical-align: middle;
}
header .accountname div {
    position: absolute;
    top: 0;
    width: auto;
    max-width: 50%;
    height: 70px;
    padding-left: 80px;
    padding-top: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
header .accountname div span {
    display: block;
    font-size: 12px;
    color: #b9b9b9;
    line-height: 20px;
    margin-bottom: -5px;
    min-height: 13px;
}
/**********************************************************************
				FOOTER
**********************************************************************/
footer {
    width: 100%;
    margin: 60px 0 20px;
    padding-top: 10px;
    border-top: 1px #c7c7c7 solid;
    font-size: 12px;
    color: #999;
}
footer .footLogo { width: 60px; height: 30px; float: right;}
.footLink {
    width: 350px;
    float: right;
    text-align: right;
    padding: 0 40px;
}
.footLink a {
    text-decoration: underline;
    margin: 0 5px;
    color: #232e8a;
}
/**********************************************************************
				MYPAGE TOP
**********************************************************************/
#pageName h1 {
    background-color: #c7d6f9;
    padding: 15px 20px 17px;
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 20px;
}
#newsCnt { background-color: #fffde9;}
#newsCnt ul li a {
color: #dc4e41;
    text-decoration: underline;
    background-image: url('/images/icon/news.svg');
    background-repeat: no-repeat;
    background-position: left 5px;
    background-size: 15px;
    padding-left: 20px;
}
#reminder ul li { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px #dedede solid;}
#reminder ul li .status {
    background-color: #b3b3b4;
    color: #fff;
    font-size: 11px;
    display: inline-block;
    width: 60px;
    height: 30px;
    text-align: center;
    margin-right: 10px;
    border-radius: 2px;
    padding: 0 0 0 5px;
    border: 0;
    font-weight: bold;
    background-image: url(/images/btnArrow_btmWH.svg)!important;
    background-repeat: no-repeat!important;
    background-size: 8px!important;
    background-position: center right 7px!important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#reminder ul li p { display: inline-block; margin-left: 15px;}
#reminder form {
    border: 2px #232e8a solid;
    margin: 10px 0 5px;
}
#reminder form #datetime { width: 235px; height: 40px; float: left;}
#reminder form input[type="datetime-local"] {
    background-color: #e2ebff;
    width: 60%;
    font-size: 15px;
    padding: 8px 5px 8px 40px;
    border: 0;
    border-right: 2px #232e8a solid;
    float: left;
    background-image: url('/images/icon/datepick.svg');
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center left 10px;
}
#reminder form textarea {
    width: calc(100% - 275px);
    height: 40px;
    border: 0;
    float: left;
    resize: none;
}
#reminder form input[type="submit"] {
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    background-color: #232e8a;
    background-image: url('/images/btnPlusWH.svg');
    background-size: 15px;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 0;
}
#mypagePlan .slick-list.draggable {
    width: calc(100% - 70px);
    margin: 0 auto 20px;
}
#mypagePlan .slick-slide { margin: 0 10px; outline: none;}
#mypagePlan .planSlide .box .title { font-size: 20px; display: block;}
#mypagePlan .slick-arrow {
    text-indent: -9999px;
    background-color: #cdd0e0;
    width: 25px;
    height: 70px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -35px;
    background-image: url('/images/btnArrow_lftBK.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 6px;
}
#mypagePlan .slick-arrow.slick-next { left: inherit; right: 0; background-image: url('/images/btnArrow_rgtBK.svg');}
#mypagePlan .planSlide ul li a {
    padding: 6px 10px;
    display: block;
    color: #232e8a;
    background-image: url(/images/btnArrow_rgtBK.svg);
    background-position: center right 15px;
    background-repeat: no-repeat;
    background-size: 6px;
}
#mypagePlan .planSlide ul li:nth-child(odd) a { background-color: #e9ecf3;}
#mypagePlan .planSlide ul li a:hover { background-color: #cdd0e0;}
#activity { margin-top: 50px;}
/**********************************************************************
				LOGIN
**********************************************************************/
#login { margin-top: 10vh;}
#login .mainCnt { width: 95%; max-width: 1100px; margin: 0 auto;}
#login .loginLogo { margin: 0 auto 60px; display: block;}
#login .box { width: 47.5%; padding: 30px 40px; min-height: 460px;margin: 0 auto;}
#login .box.blue .text { font-size: 14px; line-height: 23px;}
#login small { color: #595757; font-size: 13px;}
input.login {
    width: 100%;
    background-color: #f7f7f7;
    border: 1px #c7c8c8 solid;
    border-radius: 2px;
    padding: 10px;
    font-size: 15px;
    line-height: 15px;
}
.loginBtn {
    width: 100%;
    display: block;
    background-color: #1f2f54;
    color: #fff;
    font-weight: bold;
    height: 50px;
    line-height: 40px;
    font-size: 17px;
    text-align: center;
    margin-top: 10px;
    border-radius: 3px;
}
.loginBtn:hover { background-color: #3c4ccc;}
.loginBtn.google {
    background-color: #dc4e41;
    line-height: 50px;
    background-image: url('/images/icon/google.svg');
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center left calc(50% - 125px);
    padding-left: 30px;
    margin: 20px 0 20px;
}
.loginBtn.google:hover { background-color: #ff4231;}
.loginBtn.signup {
    background-color: #fff;
    color: #232e8a;
    line-height: 50px;
    margin: 30px 0;
}
.loginBtn.signup:hover { background-color: #fff;}
#login .txtLink { width: 100%; text-align: center;}
.signup .text b { display: block; font-size: 16px; margin-bottom: 10px;}
/*-------- PASSWORD RESET --------*/
#login .box.center { margin: 0 auto;}
#login .box.center .txtLink { margin-top: 20px;}
/*-------- SIGN UP FORM --------*/
#login .box.signupform { width: 100%;}
.signupform .imgCnt { width: 25%; float: left; margin-top: 30px; text-align: center;}
.signupform .imgCnt img {
    width: 100%;
    max-width: 200px;
    display: block;
    margin: 10px auto;
}
#login h1{
    font-size: xx-large;
    margin: 50px auto;
    text-align: center;
}
.signupform .imgCnt input[type="file"] { margin-top: 20px; font-size: 12px;}
.signupform .profCnt { width: 75%; float: right; margin-top: 30px; padding: 0 3%;}
.signupform .loginBtn { max-width: 300px; margin: 30px auto 20px;}
.frame_form {
    height: 150px;
    overflow: auto;
    margin-bottom: 20px;
    border: 1px #ddd solid;
    padding: 3%;
    background-color: #f5f5f5;
}
.req {
    background-color: #dc4e41;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px 2px;
    border-radius: 2px;
    margin-left: 10px;
}
.signupform .cell .skillCnt {
    width: 32%;
    height: auto;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: top;
}
.signupform .cell .skillCnt .label {
    border: 0;
    width: 100%;
    height: auto;
    text-align: left;
    padding: 10px 5px 10px 35px;
    line-height: 20px;
    margin: 0;
    color: #000;
}
.signupform .cell .skillCnt input[type="checkbox"] { position: absolute; margin: 10px;}
.signupform .cell .skillCnt input[type="checkbox"]:checked + label { background-color: #e9ecf3;}
.signupform .imgCnt .sub { padding: 20px; margin-top: 30px; border: 1px #dedede solid;}
/**********************************************************************
				WORKS
**********************************************************************/
#works { position: relative;}
.button.worksAdd {
    position: absolute;
    top: -10px;
    right: 0;
    margin: 0;
    max-width: 150px;
    background-image: url(/images/icon/add.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center left 23px;
    padding-left: 25px;
}
.filter { width: 100%;}
.filter a {
    display: inline-block;
    width: 10%;
    min-width: 100px;
    height: 50px;
    line-height: 46px;
    background-color: #fff;
    border-top: 3px #2f3f4e solid;
    border-right: 1px #dedede solid;
    border-left: 1px #dedede solid;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.filter a.all { border-top: 3px #2f3f4e solid;}
.filter a.jyutyu { border-top: 3px #dc4e41 solid;}
.filter a.seikyu { border-top: 3px #232e8a solid;}
.filter a.nyukin { border-top: 3px #009688 solid;}
.filter a.mikakutei { border-top: 3px #5a83ab solid;}
.filter a.cancel { border-top: 3px #b3b3b4 solid;}
.filter a.all.active { background-color: #2f3f4e; border-right: 1px #2f3f4e solid; border-left: 1px #2f3f4e solid; color: #fff;}
.filter a.jyutyu.active { background-color: #dc4e41; border-right: 1px #dc4e41 solid; border-left: 1px #dc4e41 solid; color: #fff;}
.filter a.mikakutei.active { background-color: #5a83ab; border-right: 1px #5a83ab solid; border-left: 1px #5a83ab solid; color: #fff;}
.filter a.seikyu.active { background-color: #232e8a; border-right: 1px #232e8a solid; border-left: 1px #232e8a solid; color: #fff;}
.filter a.nyukin.active { background-color: #009688; border-right: 1px #009688 solid; border-left: 1px #009688 solid; color: #fff;}
.filter a.cancel.active { background-color: #b3b3b4; border-right: 1px #b3b3b4 solid; border-left: 1px #b3b3b4 solid; color: #fff;}
.searchCnt {
    background-color: #cdd0e0;
    width: 100%;
    padding: 20px 30px;
    margin-bottom: 8px;
}
.searchCnt form { width: calc(100% - 320px); float: right;}
.searchCnt p.text {
    display: block;
    width: 120px;
    float: left;
    line-height: 38px;
    font-weight: bold;
    font-size: 13px;
}
.searchCnt input[type="search"] {
    background-color: #fff;
    border: 1px #c7c8c8 solid;
    width: calc(100% - 205px);
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}
.searchCnt input[type="submit"] {
    background-color: #2f3f4e;
    background-image: url('/images/icon/search.svg');
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center left 12px;
    width: 80px;
    height: 38px;
    border-radius: 2px;
    padding-left: 20px;
    color: #fff;
    font-weight: bold;
}
.monthlySelect {
    width: 200px;
    height: 30px;
    float: left;
    position: relative;
    margin-top: 5px;
}
.miteiBtn {
    background-color: #fff;
    font-size: 13px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    width: 80px;
    text-align: center;
    border-radius: 2px;
    margin: 5px 0 0 10px;
}
.monthlySelect a {
    background-color: #2f3f4e;
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('/images/btnArrow_lftWH.svg');
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: center center;
}
.monthlySelect a.next { background-image: url('/images/btnArrow_rgtWH.svg'); left: inherit; right: 0;}
.monthlySelect p {
    width: 100%;
    height: 30px;
    line-height: 29px;
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1rem;
}
.worksList .box { margin-bottom: -1px; padding: 20px 20px 15px;}
.worksList .box .title.list {
    font-size: 17px;
    color: #000;
    border-bottom: 0;
    padding: 0 0 0 20px;
    margin-bottom: 5px;
    width: calc(100% - 410px);
    float: left;
}
.worksList .box .title a { text-decoration: underline;}
.worksList .title .cate {
    background-color: #b3b3b4;
    color: #fff;
    font-size: 16px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    padding: 9px 12px;
    border-radius: 2px;
}
.worksList .jyutyu .title .cate, .worksList .jyutyu p.cate{ background-color: #dc4e41;}
.worksList .mikakutei .title .cate, .worksList .mikakutei p.cate { background-color: #5a83ab;}
.worksList .seikyu .title .cate, .worksList .seikyu p.cate { background-color: #232e8a;}
.worksList .nyukin .title .cate, .worksList .nyukin p.cate { background-color: #009688;}
.worksList select.cate {
    color: #fff;
    font-size: 13.5px;
    padding: 0 10px;
    border-radius: 2px;
    border: 0;
    height: 35px;
    width: 100px;
    float: left;
    margin: 5px 0;
    font-weight: bold;
    background-image: url('/images/btnArrow_btmWH.svg')!important;
    background-repeat: no-repeat!important;
    background-size: 10px!important;
    background-position: center right 7px!important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.worksList p.cate {
    color: #fff;
    font-size: 13.5px;
    padding: 0 10px;
    border-radius: 2px;
    border: 0;
    height: 35px;
    width: 100px;
    float: left;
    margin: 5px 0;
    font-weight: bold;
    line-height: 30px;
    background-repeat: no-repeat!important;
    background-size: 10px!important;
    background-position: center right 7px!important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #b3b3b4;
}
.worksList .title .cmpchk {
    color: #FFF;
    float: right;
    font-weight: normal;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 2px;
    background-color: #bb46ca;
    clear: both;
}
.worksList .title .date { color: #999; float: right; font-weight: normal; font-size: 13px;}
.worksList li .worksData,
.worksList li dl { width: calc(100% - 410px); float: left; padding-left: 20px;}
.worksList li dl .cell { width: 32%; padding-right: 20px; display: inline-block; vertical-align: top; margin-bottom: 5px;}
.worksList li dl dt {
    background-color: #e9ecf3;
    width: 100px;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    float: left;
}
.worksList li dl dd { width: calc(100% - 110px); float: right; font-size: 13px; line-height: 20px; word-break: break-all;}
.worksList li .worksData p {
    font-size: 13px;
    color: #797979;
    display: inline-block;
    padding-left: 22px;
    margin-right: 20px;
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center left;
}
.worksList li .worksData p.date { background-image: url('/images/icon/calendar.svg');}
.worksList li .worksData p.client { background-image: url('/images/icon/client.svg');}
.worksList li .worksData p.chpdf { background-image: url('/images/icon/uriage.svg'); float: right;margin-right: 0;}
.worksList li .btnCnt { width: 200px; float: right; text-align: center; margin-top: -20px;}
.worksList li .qrCnt { width: 100px; float: right; margin-top: -40px;margin-bottom: -20px;}
.worksList li .btnCnt .button {
    width: 46%;
    margin: 0 1.5%;
    display: inline-block;
    height: 40px;
    line-height: 38px;
    vertical-align: top;
}
/*-------- WORKS SINGLE --------*/
.worksList.single .box .title.list {
    width: calc(100% - 100px);
    padding: 10px 0 12px 20px;
}
.chk_none{
    height: 28px;
    padding: 0 8px;
    line-height: 22px;
    font-weight: normal;
    margin: 0px 0 0;
    float: right;
    font-size: 15px;
    color: #131828;
    border-radius: 3px;
    background-color: #d3dbe2;
    border: #4d4e54 solid 2px;
    cursor: pointer;
    text-decoration: none !important;
}

.chk_act{
    height: 22px;
    padding: 0 8px;
    line-height: 21px;
    font-weight: normal;
    float: right;
    font-size: 11px;
    color: #FFF;
    border-radius: 3px;
    background-color: #064aa1;
    position: absolute;
    top: -22px;
    right: 0;
}

.chk_act_h{
    height: 22px;
    padding: 0 8px;
    line-height: 21px;
    font-weight: normal;
    margin: 0;
    float: right;
    font-size: 11px;
    color: #FFF;
    border-radius: 3px;
    background-color: #064aa1;
}
/**********************************************************************
				WORKS ADD
**********************************************************************/
#worksadd .mainClm { width: 67%; float: left;}
#worksadd .sideClm { width: 31.5%; float: right;}
#worksadd .cell { margin-bottom: 20px;}
#worksadd .cell.half { width: 49%;}
#worksadd .cell.onethird { width: 32%; margin-right: 2%;}
#worksadd .cell.onethird.last { margin-right: 0;}
#worksadd .cell.date { width: 210px;}
#worksadd .cell.time { width: 190px; margin-left: 10px;}
#worksadd .cell.hours { width: calc(100% - 420px);}
#worksadd .cell.post { width: 170px;}
#worksadd .cell.address { width: calc(100% - 180px);}
#worksadd .cell.starttime { width: 100px; margin-left: 10px;}
#worksadd .cell.breaktime { width: 100px; margin-left: 10px;}
#worksadd .cell.breaktime input { width: 80px; margin-right: 3px;}
#worksadd .cell.amount input { width: 200px; margin-right: 5px;}
.celltitle { font-weight: bold; font-size: 14px; color: #475399;}
input[type="text"].workstitle {
    background-color: #fffde9;
    font-size: 18px;
    margin-bottom: 15px;
}
input[type="text"].hours { width: 50px; margin-right: 5px;}
.button.add.daytime { margin: 0 0 30px;}
input[type="text"].post { width: 150px; margin-right: 5px;}
input[type="text"].address { width: calc(100% - 175px);}
#jyutyu:checked + label { background-color: #dc4e41; color: #fff; border: 1px solid #dc4e41;}
#mikakutei:checked + label { background-color: #5a83ab; color: #fff; border: 1px solid #5a83ab;}
#seikyu:checked + label { background-color: #232e8a; color: #fff; border: 1px solid #232e8a;}
#nyukin:checked + label { background-color: #009688; color: #fff; border: 1px solid #009688;}
#cancel:checked + label { background-color: #b3b3b4; color: #fff; border: 1px solid #b3b3b4;}
#worksadd textarea { height: 150px; line-height: 22px;}
#worksadd .sideClm .cell { margin-bottom: 10px;}
.addBtnCnt { text-align: center; margin: 20px 0;}
.addBtnCnt .button { display: inline-block; margin: 5px; vertical-align: top;}
#docUpload li, #photoUpload li { background-color: #e9ecf3; padding: 10px; margin-bottom: 10px;}
/*-------- WORKS CLIENT --------*/
#worksadd .worksClient li dl .cell { margin-bottom: 5px;}
#worksadd .worksClient li dl .cell.address { width: 100%; margin-bottom: 0;}
.indexList { margin-bottom: 10px;}
.indexList p, indexList a { display: inline-block;}
.indexList a { padding: 2px 10px; border: 1px #dedede solid; margin: 2px; background-color: #fff;}
.worksClient li dl { width: calc(100% - 110px);}
.worksClient li .btnCnt { width: 100px;}
.worksClient li .btnCnt .button { width: 100%; margin: 25px 0 0;}
.modal .worksList .box { padding: 20px;}
.modal .searchCnt form { width: 100%;}
.modal .button.worksAdd { top: 0;}
.modal .box .title { padding: 15px 0;}
.modal input[type="text"].workstitle { margin-bottom: 0;}
/*-------- WORKS ADD CONFIRM --------*/
.confirmCnt { background-color: #e9ecf3; padding: 5px 10px; min-height: 36px; position: relative;}
#worksadd.confirm .cell { margin-bottom: 10px;}
/*-------- WORKS ADD COMPLETE --------*/
.complete .btnCnt { text-align: center; margin: 30px 0 20px;}
/**********************************************************************
			WORKS SINGLE
**********************************************************************/
.worksList.single .box { border-left: 1px #dedede solid!important; margin-bottom: 20px;}
.estimation { background-color: #e2ebff; padding: 10px; border: 1px #dedede solid; margin-bottom: 5px;}
.estimation .cnt { width: 70%; float: left;}
.estimation .cnt select {
    font-size: 12px;
    padding: 0 5px;
    height: 25px;
    width: 70px;
    float: left;
    margin-right: 5px;
    background-color: #fff;
}
.estimation .name { font-weight: bold;}
.estimation .name span {
    font-size: 11px;
    width: 40px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background-color: #232e8a;
    display: inline-block;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: text-bottom;
}
.estimation .price { clear: both;}
.estimation .button {
    width: 25%;
    height: 40px;
    line-height: 38px;
    font-weight: normal;
    margin: 5px 0 0;
    float: right;
    font-size: 15px;
}
.ducList li {
    width: 140px;
    display: inline-block;
    vertical-align: top;
    margin: 10px 5px;
    text-align: center;
    background-color: #e9ecf3;
    padding: 10px;
}
.ducList li img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100px;
}
.ducList li p {
    font-size: 13px;
    line-height: 20px;
    color: #4e5fea;
    text-decoration: underline;
}
.dlBtn {
    background-color: #2f3f4e;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    padding: 1px 7px 3px;
    border-radius: 2px;
    display: inline-block;
    margin-top: 5px;
}
/**********************************************************************
			MITSUMORI
**********************************************************************/
.calculation {
    width: 100%;
    padding: 20px;
    display: block;
    background-color: #e9ecf3;
    text-align: left;
    margin: 20px 0;
}
.calculation .add { float: left; margin-left: 5px;}
.calculation .total { width: 220px; float: right; text-align: right;}
.calculation .total p { border-bottom: 1px #acb8c3 solid; padding: 8px 5px;}
.calculation .total p.final {
    font-size: 25px;
    padding: 15px 5px;
    font-weight: bold;
    border-bottom: 0;
}
.calculation .total .celltitle { float: left;}
#calcList { width: 100%;}
#calcList input, #calcList select { background-color: #fff;}
#calcList tr { border-bottom: 1px #acb8c3 solid;}
#calcList th { padding: 10px 5px; font-weight: normal;}
#calcList th.th1 { width: calc(100% - 400px);}
#calcList th.th2 { width: 100px;}
#calcList th.th3 { width: 60px;}
#calcList th.th4 { width: 80px;}
#calcList th.th5 { width: 60px; text-align: center;}
#calcList th.th6 { width: 100px; text-align: right;}
#calcList tr#tr1 { border-bottom: 2px #232e8a solid;}
#calcList tr#tr1 th { font-weight: bold;}
.toolBtn { margin-bottom: 20px;}
.toolBtn .button {
    display: inline-block;
    font-size: 13px;
    width: 140px;
    height: 40px;
    line-height: 37px;
    margin: 0 0 3px;
}
/**********************************************************************
			HOUKOKUSYO
**********************************************************************/
.tab_item {
    width: calc(100%/3);
    height: 50px;
    border: 1px #dedede solid;
    border-bottom: 3px solid #2f3f4e;
    background-color: #ffffff;
    line-height: 50px;
    font-size: 16px;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
    cursor: pointer;
}
.tab_item:hover { background-color: #e2ebff;}
input[name="tab_item"] { display: none;}
.tab_content { display: none; overflow: hidden;}
#report:checked ~ #report_content,
#photo:checked ~ #photo_content,
#doc:checked ~ #doc_content {
display: block;
}
.tabs input:checked + .tab_item {
    background-color: #2f3f4e;
    color: #fff;
    border: 0;
}
.calculation.houkoku { margin: 3px 0;}
.calculation.houkoku #calcList .th1,
.calculation.houkoku #calcList .th2 { width: 200px;}
.calculation.houkoku .th5 .button {
    margin-top: 0;
    height: 40px;
    line-height: 38px;
    font-size: 14px;
}
#photoUpload .view_box { width: 200px; height: auto; float: left; padding: 10px;}
#photoUpload .view_box input { width: 100%; cursor: pointer;}
#photoUpload .img_view img, #photoUpload .view_box img {
    max-width: 100%;
    max-height: 100px;
    margin: 5px auto;
    display: block;
}
#photoUpload .img_del {
    background-color: #2f3f4e;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    width: 100px;
    text-align: center;
    border-radius: 2px;
    display: block;
    margin: 0 auto;
}
#photoUpload .cnt { width: calc(100% - 200px); float: right;}
#photoUpload .cnt select { width: 45%; float: left; background-color: #fff; margin-bottom: 5px;}
#photoUpload .cnt input[type="text"] { width: 53%; margin-bottom: 5px; float: right; background-color: #fff;}
#photoUpload .cnt input[type="text"]:disabled { background-color: #e9ecf3;}
#photoUpload .cnt textarea { height: 100px; background-color: #fff;}
#docUpload li .dlBtn { float: right;}
/**********************************************************************
				CALENDAR
**********************************************************************/
#calendar { position: relative;}
#calendar .button.worksAdd { top: -70px;}
#calendar .tab_item { max-width: 300px;}
#calendar .tab_content { width: 100%;}
.calendarTitle { margin-bottom: 20px;}
.calendarTitle p {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}
.calendarTitle .button {
    display: inline-block;
    margin: 0 3px;
    width: 110px;
    font-weight: normal;
    font-size: 15px;
    height: 40px;
    line-height: 38px;
    vertical-align: middle;
}
.weekCnt { width: 100%; border: 1px #dedede solid; border-bottom: 0; position: relative;}
.weekCnt .dayTitle { width: 100%; height: 120px; border-bottom: 1px #dedede solid;}
.weekCnt .dayTitle span { font-size: 14px;}
.weekCnt .dayTitle p { font-size: 35px; font-weight: bold; float: left;}
.weekCnt .dayTitle li {
    width: calc((100% - 51px) / 7);
    height: 100%;
    float: left;
    border-left: 1px #dedede solid;
    padding: 10px;
    position: relative;
}
.weekCnt .dayTitle li.blank { width: 50px; border-left: 0; position: relative;}
.weekCnt .dayTitle li.blank span { color: #ababab; font-size: 13px; position: absolute; bottom: 15px;}
.weekCnt .timeTable { width: 100%;}
.weekCnt .timeTable .parent { width: calc((100% - 51px) / 7); float: left; border-left: 1px #dedede solid;}
.weekCnt .timeTable .parent.blank { width: 50px; border-left: 0;}
.weekCnt .timeTable .child li { width: 100%; height: 40px; border-bottom: 1px #dedede solid; position: relative;}
.weekCnt .timeTable .parent.blank .child li { color: #ababab; font-size: 13px; text-align: center; line-height: 15px;}
.weekCnt li.today { background-color: #f3f7ff;}
.weekCnt li.end { opacity: 0.5;}
.schedule {
    background-color: #475399;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 5px 8px;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    z-index: 1;
    overflow: hidden;
}
.schedule.jyutyu { background-color: #dc4e41;}
.schedule.seikyu { background-color: #232e8a;}
.schedule.nyukin { background-color: #009688;}
.schedule.mikakutei { background-color: #5a83ab;}
.schedule.cancel { background-color: #b3b3b4;}
.weekCnt .dayTitle li .schedule { bottom: 0;top: inherit; height: 25px; white-space: nowrap;}
.scheduleAdd .schedule { cursor: pointer;}
.scheduleAdd:hover li { background-color: #e2ebff;}
#worksadd.calendar, #worksadd.calendarPrivate { margin-bottom: 40px;}
#worksadd.calendar .button { margin: 0 auto;}
#worksadd.calendarPrivate input[type="datetime-local"] { width: 210px; margin-bottom: 5px;}
.weekCnt.monthCnt { border-left: 0; border-bottom: 0; height: auto;}
.weekCnt.monthCnt .dayTitle { height: 150px;}
.weekCnt.monthCnt li .others { font-size: 12px; color: #757575;}
.weekCnt.monthCnt .dayTitle li { width: 14.28%;}
.weekCnt.monthCnt .dayTitle li .schedule {
    position: relative;
    bottom: inherit;
    top: inherit;
    height: 25px;
    margin-top: 5px;
}
.weekCnt.monthCnt .dayTitle li a,
.weekCnt.monthCnt .dayTitle li .scheduleAdd.text {
    font-size: 12px;
    line-height: 14px;
    display: block;
    text-decoration: underline;
    margin-top: 3px;
    cursor: pointer;
}
.weekCnt.monthCnt .dayTitle li a:hover { color: #dc4e41;}
.weekCnt.monthCnt .dayTitle li a .jyutyu { color: #dc4e41; font-size: 14px;}
.weekCnt.monthCnt .dayTitle li a .seikyu { color: #232e8a; font-size: 14px;}
.weekCnt.monthCnt .dayTitle li a .nyukin { color: #009688; font-size: 14px;}
.weekCnt.monthCnt .dayTitle li a .mikakutei { color: #5a83ab; font-size: 14px;}
.weekCnt.monthCnt .dayTitle li a .cancel { color: #b3b3b4; font-size: 14px;}
.weekCnt.monthCnt .scdList { width: 100%; overflow: hidden; white-space: nowrap;}
.weekCnt.day3Cnt .dayTitle li { width: calc((100% - 51px) / 3);}
.weekCnt.day3Cnt .timeTable .parent { width: calc((100% - 51px) / 3);}
.weekCnt.day3Cnt .dayTitle li.blank,
.weekCnt.day3Cnt .timeTable .parent.blank{ width: 50px;}
/**********************************************************************
			SALES MANAGEMENT
**********************************************************************/
.searchCnt.aggregation form { width: 100%;}
.searchCnt.aggregation p.text { width: 90px; font-size: 16px;}
.searchCnt.aggregation input[type="date"] { width: 180px; display: inline-block; background-color: #fff; margin: 0 3px;}
.searchCnt.aggregation input[type="submit"] {
    background-image: url('/images/icon/calculator.svg');
    background-size: 18px;
    height: 41px;
    display: inline-block;
    vertical-align: top;
    padding-left: 25px;
}
.salestotal { text-align: right; padding: 20px; border-bottom: 1px #dedede solid;}
.salestotal span { font-size: 25px; font-weight: bold; margin-left: 20px;}
.salesList { margin-bottom: 20px;}
.salesList li { border-bottom: 1px #dedede solid; padding: 15px 0;}
.salesList li p { display: inline-block; line-height: 22px; vertical-align: top;}
.salesList li p.day { width: 120px;}
.salesList li p.name { width: calc(100% - 320px);}
.salesList li p.price { width: 175px; text-align: right;}
/**********************************************************************
				CLIENT
**********************************************************************/
#client { position: relative;}
#client .button.worksAdd { top: -70px;}
#client .searchCnt form { width: 100%;}
#client .worksClient li dl { width: calc(100% - 200px);}
#client .worksClient li .btnCnt { width: 200px; margin-top: 5px;}
#client .worksList li dl .cell { width: 49%;}
#client .worksList li dl .cell.address { width: 100%;}
#client .worksClient li .btnCnt .button { width: 46%; margin: 1.5%; display: inline-block; vertical-align: top;}
#clientAdd .first { margin-top: 20px;}
#clientAdd .addBtnCnt { margin: 40px 0;}
/**********************************************************************
				USERS
**********************************************************************/
#client.users .worksClient li dl { width: calc(100% - 350px);}
#client.users .worksClient li .planCnt {
    width: 230px;
    float: left;
    text-align: center;
    line-height: 20px;
    background-color: #e2ebff;
    padding: 15px;
    border: 1px #dedede solid;
    margin-top: 15px;
}
#client.users .worksClient li .btnCnt { width: 100px; margin-top: 18px;}
#client.users .worksClient li .btnCnt .button { width: 100%;}

/**********************************************************************
				CONTACT
**********************************************************************/
#login .box.contact { width: 100%; margin-bottom: 50px;}
/**********************************************************************
			COMPANY / POLICY
**********************************************************************/
.companyList { width: 100%; max-width: 700px; margin: 0 auto 40px;}
.companyList div { padding: 15px 0; border-bottom: 1px #ececec solid;}
.companyList dt {
    float: left;
    font-weight: bold;
    font-size: 15px;
    color: #475399;
}
.companyList dd { padding-left: 150px;}
.policy b { color: #232e8a;}
.companyList.policy { max-width: none;}
.companyList.policy dd { padding-left: 250px;}
.textLinks { margin: 20px 0; text-align: center;}
.textLinks a { font-size: 13px; text-decoration: underline; margin: 0 5px; color: #232e8a;}
/**************************************** SMALL PC (1200px↓) ****************************************/
@media screen and (max-width:1200px) {
/*-------- HOUKOKUSYO --------*/
.houkoku #calcList th.th1 { width: calc(100% - 305px);}
.houkoku #calcList th.th2 { width: 120px;}
.houkoku #calcList th.th3 { width: 50px;}
.houkoku #calcList th.th4 { width: 80px;}
.houkoku #calcList th.th5 { width: 55px;}
}
/**************************************** TABLET (1023px↓) ****************************************/
@media screen and (max-width:1023px) {
/*-------- LOGIN --------*/
#login .box { width: 100%;}
#login .mainCnt { margin: 50px auto;}
.signupform .cell .skillCnt { width: 49%;}
/*-------- WORKS --------*/
.button.worksAdd { top: -70px;}
.filter a { font-size: 14px; min-width: 90px;}
.worksList li dl .cell { width: 100%; margin-bottom: 3px;}
.modal .worksList li dl .cell { width: 49%; padding-right: 20px; display: inline-block;}
.modal .worksList li dl .cell.address { width: 100%; margin-bottom: 0;}
/*-------- WORKS ADD --------*/
#worksadd .mainClm, #worksadd .sideClm { width: 100%;}
/*-------- MITSUMORI --------*/
#calcList th.th1 { width: calc(100% - 360px);}
#calcList th.th2 { width: 100px;}
#calcList th.th3 { width: 50px;}
#calcList th.th4 { width: 70px;}
#calcList th.th5 { width: 40px;}
#calcList th.th6 { width: 100px; text-align: right;}
/*-------- USERS --------*/
#client.users .worksClient li dl { width: calc(100% - 230px);}
}
/**************************************** SP (767px↓) ****************************************/
@media screen and (max-width:767px) {
.PCnone { display: inherit!important;}
.SPnone { display: none!important;}
/*-------- BASE --------*/
span.call { text-decoration: underline; color: #3245ea; display: inline-block;}
body { font-size: 14px; line-height: 23px;}
#pageName h1 {
    padding: 10px 15px 13px;
    font-size: 18px;
    line-height: 16px;
    margin-bottom: 15px;
}
.box { padding: 15px 20px 20px; margin-bottom: 15px;}
.box .title .endList { font-size: 10px;}
.modal_content { padding: 20px;}
/*-------- HEADER --------*/
header .accountname { height: 50px; margin-left: 0;}
header .accountname img { height: 50px; padding: 10px;}
header .accountname div {
    max-width: calc(100% - 65px);
    height: 50px;
    padding-left: 50px;
    padding-top: 5px;
}
/*-------- FOOTER --------*/
footer .footLogo { width: 45px;}
.footLink {
    width: 100%;
    float: none;
    margin: 40px 0 20px;
    text-align: center;
    clear: both;
    padding: 0;
}
/*-------- MY PAGE --------*/
#reminder ul li p { display: block; margin-left: 0;}
#reminder form #datetime {
    width: 100%;
    border-right: none;
    border-bottom: 2px #232e8a solid;
}
#reminder form textarea { width: calc(100% - 40px); font-size: 14px; line-height: 23px; padding: 8px;}
#mypagePlan .slick-slider { padding-bottom: 40px;}
#mypagePlan .slick-list.draggable { width: 100%; margin: 0 auto;}
#mypagePlan .slick-slide { margin: 0;}
#mypagePlan .slick-arrow {
    top: inherit;
    bottom: 0;
    width: 70px;
    height: 25px;
    left: 50%;
    margin-left: -80px;
}
#mypagePlan .slick-arrow.slick-next { right: 50%; margin-right: -80px;}
#activity { margin-top: 30px;}
/*-------- LOGIN --------*/
#login { margin-top: 30px;}
#login .loginLogo { width: 170px; margin: 0 auto 30px;}
#login .mainCnt { width: 100%; margin: 40px auto 0;}
#login .box { margin: 0; border: none; padding: 30px 30px 40px;}
/*-------- SIGN UP FORM --------*/
.signupform .imgCnt { margin-top: 0;}
.signupform .imgCnt, .signupform .profCnt, .signupform .profCnt .cell { width: 100%; padding: 0;}
.signupform .imgCnt img { max-width: 150px;}
/*-------- WORKS --------*/
#works .worksAdd,
#client .button.worksAdd,
#calendar .button.worksAdd {
    top: -54px;
    height: 39px;
    line-height: 38px;
    font-size: 14px;
    max-width: 110px;
    background-size: 15px;
    background-position: center left 15px;
    padding-left: 23px;
}
.filter a {
    font-size: 13px;
    min-width: 50px;
    width: 32.6%;
    height: 40px;
    line-height: 38px;
}
.searchCnt { padding: 15px;}
.searchCnt input[type="search"] {
    width: calc(100% - 70px);
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    margin-bottom: 2px;
}
.searchCnt input[type="submit"] {
    width: 70px;
    height: 40px;
    float: right;
    padding-left: 25px;
}
.monthlySelect { width: calc(100% - 90px); margin: 0 0 15px; max-width: inherit;}
.miteiBtn { margin: 0 0 15px 10px;}
.worksList .box .title { font-size: 17px; line-height: 23px;}
.worksList .box .title.list {
    font-size: 16px;
    padding: 0 0 0 15px;
    margin-bottom: 5px;
    width: calc(100% - 80px);
}
.worksList select.cate { font-size: 12px; padding: 0 5px; height: 30px; width: 80px;}
.worksList p.cate { font-size: 12px; padding: 0 5px; height: 30px; width: 80px;}
.worksList li .title .date { float: none; display: block; margin-top: 0;}
.worksList li .worksData,
.worksList li dl { width: 100%; padding-left: 0;}
.worksList li .btnCnt { width: 100%; margin-top: 15px;}
.worksList li .qrCnt { width: 100px; margin:15px auto;}
.searchCnt form { width: 100%;}
/*-------- WORKS ADD --------*/
#worksadd .cell.half,
#worksadd .cell.date,
#worksadd .cell.time,
#worksadd .cell.hours,
#worksadd .cell.address { width: 100%; margin: 0 0 15px;}
/*-------- WORKS CLIENT --------*/
.modal .worksList li dl .cell { width: 100%;}
.modal .worksClient li .btnCnt .button { margin-top: 0;}
.complete .btnCnt .button { display: inline-block; margin: 10px;}
/*-------- WORKS ADD COMPLETE --------*/
.complete .btnCnt .button { margin: 10px 0;}
/*-------- WORKS SINGLE --------*/
.ducList li { width: calc(50% - 15px);}
.addBtnCnt .button { margin: 0 0 20px;}
/*-------- MITSUMORI --------*/
#worksadd .cell.onethird { width: 100%; margin-right: 0;}
#calcList th { width: 100%; display: block; padding: 1%;}
#calcList th.th1 { width: 100%; margin-top: 10px;}
#calcList th.th2 { width: 50%; float: left;}
#calcList th.th3 { width: 20%; float: left;}
#calcList th.th4 { width: 30%; float: left;}
#calcList th.th5 { width: 25%; float: left; margin-bottom: 10px;}
#calcList th.th6 { width: 75%; float: left; margin-bottom: 10px;}
.calculation .total { width: 100%; margin-top: 15px;}
.toolBtn { margin-bottom: 10px;}
.toolBtn .button { font-size: 10px; width: 32.6%;}
/*-------- HOUKOKUSYO --------*/
#worksadd .cell.starttime { width: 80px; margin-left: 0; margin-right: 10px;}
#worksadd .cell.breaktime { margin-left: 0; margin-right: 10px;}
.calculation.houkoku #calcList .th1,
.calculation.houkoku #calcList .th2 { width: 100%;}
.houkoku #calcList th.th4 { width: 100px;}
.houkoku #calcList th.th5 { width: 55px; margin: 24px 0 15px; float: right;}
#photoUpload .view_box { width: 100%;}
#photoUpload .cnt { width: 100%;}
/*-------- SALES MANAGEMENT --------*/
.searchCnt.aggregation input[type="date"].date1 { width: calc(100% - 90px); margin: 0 0 5px;}
.searchCnt.aggregation input[type="date"].date2 { width: calc(100% - 95px); margin: 0 0 0 3px;}
.searchCnt.aggregation input[type="submit"] { background-size: 15px; font-size: 15px; padding-left: 30px; background-position: center left 10px;}
.salestotal { padding: 15px 0 10px;}
.salesList li p.day, .salesList li p.name, .salesList li p.price { width: 100%;}
/*-------- CLIENT --------*/
#client .worksClient li dl,
#client .worksClient li .btnCnt { width: 100%; margin: 0;}
#client .worksList li dl .cell { width: 100%;}
#client .worksList li dl dt { width: 70px;}
#client .worksList li dl dd { width: calc(100% - 80px);}
/*-------- USERS --------*/
#client.users .worksClient li dl { width: 100%;}
#client.users .worksList li dl dt { width: 100px;}
#client.users .worksList li dl dd { width: calc(100% - 110px);}
#client.users .worksClient li .planCnt {
    margin: 10px 0 0;
    padding: 15px 10px;
    width: auto;
    min-width: 150px;
    font-size: 13px;
}
#client.users .worksClient li .btnCnt { width: 70px; margin: 10px 0 0;}
/*-------- CALENDAR --------*/
.ac-container { padding: 5px 20px; margin-bottom: 5px;}
.ac-container label {
    width: 100%;
    font-size: 18px;
    height: 40px;
    line-height: 36px;
    font-weight: bold;
    position: relative;
    display: block;
    cursor: pointer;
}
.ac-container label:after,
.ac-container input:checked ~ label::after {
    content: "∨";
    color: #999;
    font-size: 13px;
    margin-left: 5px;
    vertical-align: 3px;
}
.ac-container input:checked ~ label::after { content:"∧";}
.ac-container input { display: none;}
.ac-container div{
   background: rgba(255, 255, 255, 0.5);
   margin-top: -1px;
   overflow: hidden;
   height: 0px;
   position: relative;
   transition: 
   height 0.3s ease-in-out, 
   box-shadow 0.6s linear;
}
.ac-container input:checked ~ div{ transition: height 0.5s ease-in-out 0.1s linear; }
.ac-container input:checked ~ div.acCnt { height: 330px;}
.monthCalendar { width: 100%; margin-top: 15px;}
.monthCalendar th {
    width: 14.28%;
    height: 45px;
    display: inline-table;
    position: relative;
}
.monthCalendar th.end { opacity: 0.5;}
.monthCalendar th.today { background-color: #f3f7ff;}
.monthCalendar th.active { background-color: #e2ebff;}
.monthCalendar .week th { height: 30px; color: #717171;}
.monthCalendar th span {
    font-size: 15px;
    font-weight: bold;
    position: relative;
    top: 5px;
}
.monthCalendar th a { display: block; width: 100%; height: 100%;}
.scheduleP { font-size: 8px; color: #475399;}
.scheduleP.jyutyu { color: #dc4e41;}
.scheduleP.seikyu { color: #232e8a;}
.scheduleP.nyukin { color: #009688;}
.scheduleP.mikakutei { color: #5a83ab;}
.scheduleP.cancel { color: #b3b3b4;}
#activeDay .weekCnt .dayTitle { height: 70px;}
#activeDay .weekCnt .dayTitle li, #activeDay .weekCnt .timeTable .parent { width: calc(100% - 50px);}
#activeDay .weekCnt .dayTitle li.blank, #activeDay .weekCnt .timeTable .parent.blank { width: 50px;}
#activeDay .calendarTitle { margin-bottom: 10px; text-align: center;}
#activeDay .calendarTitle.bottom { margin-top: 10px;}
#activeDay .calendarTitle .button { width: 100px; font-size: 13px; height: 30px; line-height: 28px;}
/*-------- COMPANY / POLICY --------*/
.textLinks { padding-bottom: 20px;}
.companyList dt, .companyList dd, .companyList.policy dd { width: 100%; float: none; padding: 0;}
}
.reserved_tbl {width: 100%; margin-top: 10px;;}
.reserved_tbl td, .reserved_tbl th{
    background: white;
    border: 1px #dedede solid;
    width: 10%;
}
.reserved_tbl th.wid{width: 15%;}
.weekPageArea{overflow: hidden;}
.weekPrev , .weekNext{
    width: 85px;
    margin: 10px auto;
    border: 1px #dedede solid;
    background-color: #fff;
    color: #475399; }
.weekPrev{float: left;}
.weekNext{float: right;}
.reservedTd{
    font-size: large;
    color: #999;
    margin: 11px auto;
    overflow: hidden;
    padding: 5px;
    text-align: center;
}
.reservedTd a{
    color: rgb(250, 86, 27);
}