@charset "utf-8";

/*-------------------------------------
	common
-------------------------------------*/

br.sp { display: none; }
br.pc { display: block; }

.center { text-align: center !important; }
.right { text-align: right !important; }
.left { text-align: left !important; }

/* graph */
.graph-scroll { position: relative; color: #000; background:#F2F5F8; overflow: auto; }
.graph-scroll + .right,
.graph-unitY + .right { margin: 2rem 0 0; }
.graph-scroll .noData { padding: 4rem; text-align: center; }

.graph-note { margin: -0.5rem 0 1rem; font-size: 90%; font-weight: bold; text-align: right; }

.graph-unitX { padding: 1rem 2rem; font-size: 75%; background: #F2F5F8; }
.graph-unitY { position: relative;}
.graph-unitY span { position: absolute; top: -5rem; right: 2rem; font-size: 75%;}

.graph-elements { padding: 1rem 5rem 0; text-align: left; background:#F2F5F8; }
.graph-elements p { display: inline-block; position: relative; margin: 0 1rem 0 0; padding: 0 0 0 40px; }
.graph-elements span { display: block; position: absolute; top: 50%; left: 0; margin: -2px 0 0; width: 30px; height: 1px; background: #E60012; }
.graph-elements span.square { background: #BD4642; }
.graph-elements span.tri { background: #9CB454; }
.graph-elements span.x { background: #715A92; }
.graph-elements span.x:before,
.graph-elements span:after { content: ""; display: block; position: absolute; top: -1px; left: 14px; width: 3px; height: 3px; background: #E60012; border-radius: 5px; box-shadow: 0 0 0 2px #F2F5F8; }
.graph-elements span.square:after { top: -3px; left: 12px; width: 7px; height: 7px; background: #BD4642; border-radius: 0; box-shadow: none; }
.graph-elements span.tri:after { top: -5px; left: 11px; background: none; border-right: 5px solid transparent; border-bottom: 9px solid #9CB454; border-left: 5px solid transparent; border-radius: 0; box-shadow: none; }
.graph-elements span.x:after { top: -4px; left: 15px; width: 2px; height: 9px; background: #715A92; border-radius: 0; box-shadow: none; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.graph-elements span.x:before { top: -4px; left: 15px; width: 2px; height: 9px; background: #715A92; box-shadow: none; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.graph-elements + .graph-scroll .graph { padding-top: 1rem; }

.graphNumY { position: relative;}
.graphNumY .graphFixedY { position: absolute; top: 2rem; left: 0; width: 5rem; height: 200px; background: #F2F5F8; box-shadow: -1px 0 0 #DDD inset, 0 3rem 0 #F2F5F8, 0 -1rem 0 #f2f5f8; z-index: 100; transition: all ease 0.3s;}
.graphNumY.forBarChart .graphFixedY { top: 3rem; width: 6rem; height: 15rem;}
.graphNumY.noScroll .graphFixedY { background: none; box-shadow: none;}
.graphNumY .yNum { position: absolute; right: 0; padding: 0 0.5rem 0 0; font-size: 90%; transform: translateY(50%);}
.graphNumY + .graph-scroll .graph { padding-bottom: 8rem;}

.graph { padding: 2rem 3.5rem 7rem 5rem; min-width: 600px; }
.graph .chart { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 100%; height: 15rem; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; table-layout: fixed; }
.graph .cell { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; font-size: 90%; box-shadow: -1px 0 0 #DDD inset; }
.graph .xNum { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; position: static; width: 0; }
.graph .yNum,
.graph .yEnd { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; width: 0; }
.graph .num,
.graph .amount { position: absolute; left: 0; bottom: -2.2rem; transform: translateX(-50%); }
.graph .yNum .num { top: auto; transform: translate(calc(-100% - 0.5rem), 50%); }
.graph .cell:hover .num { font-weight: bold; }

.graph .period { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.graph .term { position: absolute; left: 0; width: 100%; height: 1px; background: #CCC; }

@media all and (-ms-high-contrast: none) {
.graph .yNum .num { margin-left: -0.5rem; transform: translate(-100%, 50%); }
}

/* ganttTable */
.ganttTable { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; color: #000; background:#F2F5F8; }
.ganttTable:first-of-type { padding: 4rem 0 0; }
.ganttTable:first-of-type .ganttTitles,
.ganttTable:first-of-type .graph,
.ganttTable:first-of-type .ganttTimes { padding-top: 0; border: none; }
.ganttTable:first-of-type .graph .chart .num { bottom: auto; top: -2.2rem; }
.ganttTable:last-of-type { padding: 0 0 4rem; }

.ganttTitles { padding: 1.5rem 0 0 2rem; border-top: 8px solid #FFF; }
.ganttTitles h5 { margin: 0; padding: 0.3rem 0.9rem 0.2rem; font-size: 1.2rem; background: #FFF; border: 1px solid #FF3B57; }
.ganttTitles h5.alart { color: #FFF; background: #FF3B57; }
.ganttTitles p { margin: 1rem 0 0; font-size: 1.2rem; font-weight: bold; }

.ganttTable .graph { padding: 1.5rem 2rem 1rem; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 500px; border-top: 8px solid #FFF; }
.ganttTable .graph .chart { height: 10rem; border-bottom: none; border-left: none; border-right: 1px solid #DDD; }
.ganttTable .graph .cell { box-shadow: 1px 0 0 #DDD inset; }
.ganttTable .graph .cell:hover .num { font-weight: normal; }
.ganttTable .graph .record { display: block; position: absolute; top: 2.9rem; height: 1.5rem; font-size: 0; opacity: .6; z-index: 1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.ganttTable .graph .record:hover { opacity: 1; }
.ganttTable .graph .record.working { background: #50779d; }
.ganttTable .graph .record.properly { top: 5.9rem; background: #67d366; }
.ganttTable .graph .record.altered { top: 5.9rem; background: #ff564f; }

.ganttTimes { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 1.5rem 2rem 0 0; width: 22rem; min-width: 22rem; border-top: 8px solid #FFF; }
.ganttTimes dt,
.ganttTimes dd { margin: 0.4rem 0 0; width: 50%; font-size: 1.2rem; }
.ganttTimes dd { margin: 0.9rem 0 0; }
.ganttTimes dt:nth-child(2n),
.ganttTimes dd:nth-child(2n) { text-align: right; }
.ganttTimes input[type=text] { margin: 0 0.4rem; padding: 0 0.6rem; width: 3rem; height: 2rem; font-size: 1.2rem; text-align: right; }
.ganttTimes input[type=text]:first-child { margin-left: 0; }

/* barChart */
.barChart { padding: 3rem 2rem 4rem 6rem; }
.barChart .cell { box-shadow: none; }
.barChart .num{ left: 50%; }
.barChart .bar { display: block; position: absolute; bottom: 0; left: 40%; width: 20%; background: #ff5643; opacity: .6; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.barChart .cell:hover .bar { font-weight: bold; opacity: 1; }
.barChart .amount { left: 50%; top: -1.5rem; bottom: auto; color: #2a4d6f; font-size: 80%; background: #f2f5f8; }

.barChart.month .bar { left: 38%; width: 24%; background: #ff6d2c; }
.barChart.date.barChart { min-width: 800px; }
.barChart.date .bar { left: 30%; width: 40%; background: #fcb255; }

/* lineChart */
.lineChart { min-width: 800px; }
.lineChart.graph .chart { height: 20rem; }
.lineChart .line { display: block; position: absolute; left: -1px; width: calc(100% + 2px); font-size: 0; background: url("/images/line.svg") center center no-repeat; background-size: 100% 100%; }
.lineChart .line:after {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	left: -1px;
	width: 3px;
	height: 3px;
	background: #E60012;
	border-radius: 5px;
	box-shadow: 0 0 0 2px #F2F5F8;
	z-index: 10;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.lineChart .yUp .line { background-image: url("/images/line2.svg"); }
.lineChart .yUp .line:after { top: auto; bottom: -2px; }
.lineChart .cell:hover .line:after { margin: -1px 0 0 -1px; width: 5px; height: 5px; }

.lineChart .line.square { background-image: url("/images/line-square.svg"); }
.lineChart .yUpSquare .line.square { background-image: url("/images/line2-square.svg"); }
.lineChart .line.square:after { top: -3px; left: -3px; width: 7px; height: 7px; background: #BD4642; border-radius: 0; box-shadow: none; }
.lineChart .yUpSquare .line.square:after { top: auto; bottom: -4px; }
.lineChart .cell:hover .line.square:after { width: 9px; height: 9px; }

.lineChart .line.tri { background-image: url("/images/line-tri.svg"); }
.lineChart .yUpTri .line.tri { background-image: url("/images/line2-tri.svg"); }
.lineChart .line.tri:after { top: -6px; left: -4px; background: none; border-right: 5px solid transparent; border-bottom: 9px solid #9CB454; border-left: 5px solid transparent; border-radius: 0; box-shadow: none; }
.lineChart .yUpTri .line.tri:after { top: auto; bottom: -4px; }
.lineChart .cell:hover .line.tri:after { margin: -2px 0 0 -2px; border-right-width: 7px; border-bottom-width: 11px; border-left-width: 7px; }

.lineChart .line.x { background-image: url("/images/line-x.svg"); }
.lineChart .yUpX .line.x { background-image: url("/images/line2-x.svg"); }
.lineChart .line.x:before {
	content: "";
	display: block;
	position: absolute;
	top: -4px;
	left: 0;
	width: 2px;
	height: 9px;
	background: #715A92;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.lineChart .line.x:after { top: -4px; left: 0; width: 2px; height: 9px; background: #715A92; border-radius: 0; box-shadow: none; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.lineChart .yUpX .line.x:before,
.lineChart .yUpX .line.x:after { top: auto; bottom: -4px; }
.lineChart .cell:hover .line.x:before,
.lineChart .cell:hover .line.x:after { margin: -0.5px 0 0 -0.5px; width: 3px; height: 11px; }

.lineChart .line.noWidth { width: 1px; background: #E60012; }
.lineChart .line.square.noWidth { background: #BD4642; }
.lineChart .line.tri.noWidth { background: #9CB454; }
.lineChart .line.x.noWidth { background: #715A92; }
.lineChart .line.noWidth.up:after { top: auto; bottom: -2px; }
.lineChart .line.noWidth.down:after { top: -1px; bottom: auto; }
.lineChart .line.square.noWidth.up:after { top: auto; bottom: -4px; }
.lineChart .line.square.noWidth.down:after { top: -3px; left: -3px; }
.lineChart .line.tri.noWidth.up:after { top: auto; bottom: -4px; }
.lineChart .line.tri.noWidth.down:after { top: -6px; left: -4px; }
.lineChart .line.x.noWidth.up:before,
.lineChart .line.x.noWidth.up:after { top: auto; bottom: -4px; }
.lineChart .line.x.noWidth.down:before,
.lineChart .line.x.noWidth.down:after { top: -4px; left: 0; }

@media all and (-ms-high-contrast: none) {
.lineChart .line { background: linear-gradient(to right top, transparent calc(50% - 0.5px), #E60012 calc(50% - 0.5px), #E60012 calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.lineChart .yUp .line { background: linear-gradient(to right bottom, transparent calc(50% - 0.5px), #E60012 calc(50% - 0.5px), #E60012 calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
}

.lineChart.graph .chart .yHeight000 { height: 1px; background: #E60012; box-shadow: 0 0 0 4px #F2F5F8; }
.lineChart.graph .chart .yHeight000.square { background: #BD4642; }
.lineChart.graph .chart .yHeight000.tri { background: #9CB454; }
.lineChart.graph .chart .yHeight000.x { background: #715A92; }

.lineChart .graphTip {
    display: block;
    position: absolute;
    left: 0;
    padding: 0.3rem 0.5rem; 
    color: #FFF;
	font-size: 1.2rem;
	line-height: 1.4;
    text-shadow: 0 0 5px #E60012, 0 0 10px #E60012;
    background: rgba(230, 0, 18, 0.5);
    border-radius: 3px;
	opacity: 0;
	pointer-events: none;
    white-space: nowrap;
    z-index: 110;
	transition: all ease 0.3s;
    transform: translate(-50%, calc(100% + 1.5rem));
}
.lineChart .graphTip:before {
    content: "";
    position: absolute;
    top: -1rem;
    left: 50%;
    margin: 0 0 0 -0.8rem;
    border: 0.8rem solid transparent;
    border-bottom: 1rem solid rgba(230, 0, 18, 0.5);
    border-top: 0;
}
.lineChart .graphTip.square { text-shadow: 0 0 5px #BD4642, 0 0 10px #BD4642; background: rgba(189, 70, 66, 0.7);}
.lineChart .graphTip.square:before { border-bottom: 1rem solid rgba(189, 70, 66, 0.7);}
.lineChart .graphTip.tri { text-shadow: 0 0 5px #9CB454, 0 0 10px #9CB454; background: rgba(156, 180, 84, 0.85);}
.lineChart .graphTip.tri:before { border-bottom: 1rem solid rgba(156, 180, 84, 0.85);}
.lineChart .graphTip.x { text-shadow: 0 0 5px #715A92, 0 0 10px #715A92; background: rgba(113, 90, 146, 0.7);}
.lineChart .graphTip.x:before { border-bottom: 1rem solid rgba(113, 90, 146, 0.7);}

.lineChart span:not(.square):not(.tri):not(.x):hover ~ .graphTip:not(.square):not(.tri):not(.x),
.lineChart span.square:hover ~ .graphTip.square,
.lineChart span.tri:hover ~ .graphTip.tri,
.lineChart span.x:hover ~ .graphTip.x { opacity: 1; pointer-events: auto;}

/* table */
.list-scroll { margin: 3rem -3rem 0; width: calc(100% + 6rem); overflow: auto; }

.list { min-width: 600px; font-size: 1.5rem; }
.list th { white-space: nowrap; }
.list th:first-child,
.list td:first-child { padding-left: 3rem; }
.list th:last-child,
.list td:last-child { padding-right: 3rem; }

.list.nohead td { padding-top: 2rem; padding-bottom: 2rem; line-height: 1.4; text-align: left; }
.list.nohead tr:first-child td { border-top: 2px solid #dee7f1; }
.list.nohead td:first-child { white-space: nowrap; }

.list .linkRow th,
.list .linkRow td { position: relative; padding: 0; }
.list .linkRow a { display: block; padding: 1.2rem 1.4rem; color: #003A70; }
.list .linkRow a:visited { color: #50779D; }
.list .linkRow a:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.list .linkRow:hover a { text-decoration: none; }


/*-------------------------------------
	page
-------------------------------------*/

/* login */
#login main { margin: 10rem 0 0; }
#login article section { margin: 0 auto 2rem; padding: 6rem; max-width: 540px; }
#login h1 { font-size: 2.6rem; text-align: center; }
#login h1 img { margin: 0 auto 2rem; max-width: 32.2rem; }

#login fieldset { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin: 4rem 0 2rem; }
#login fieldset legend { margin: 0 0 2rem; width: 100%; }
#login fieldset label { margin: 0; width: 14rem; line-height: 1; text-align: left; }
#login fieldset input { margin: 1rem 0; width: calc(100% - 14rem); }
#login .btn { min-width: 140px; height: 5rem; }
#login .remind { margin: 4rem 0 0; padding: 4rem 0 0; text-align: center; border-top: 1px dotted #8198af; }

#login.forgetpass fieldset label { width: 7rem; }
#login.forgetpass fieldset input { width: calc(100% - 7rem); }

#login footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0; max-width: 540px; }

/* workingTab */
#workingTab a { display: inline-block; margin: 0 0.5rem 0 0; padding: 0 2rem; min-width: 10rem; color: #003A70 !important; line-height: 3.8rem; text-align: center; text-decoration: none; border: 1px solid #003A70; }
#workingTab a.current { color: #FFF !important; background: #003A70; }
#workingTab a:not(.current):hover { background: #dee7f1; }
#workingTab + form .right,
#workingTab + .right { margin: -4rem 0 3rem; }
#workingTab.long + form .right { position: static; margin: 2rem 0 !important; }
#workingTab + form .right input:last-child,
#workingTab + .right input:last-child { margin-right: 0; }

#workingTab.long + form .right.long br { display: none; }

input.calendar,
input.time { margin: 0 0.5rem 0 0.6rem; padding-left: 3.6rem; width: 14.5rem; background: url("/images/icon-calendar.svg") 0.5rem center no-repeat; background-size: 24px; }
input.time { width: 10.2rem; background-image: url("/images/icon-time.svg"); }
input.calendar:nth-last-of-type(3) { margin-right: 1rem; }
input.calendar:hover,
input.calendar:focus { background-image: url("/images/icon-calendar-hover.svg");  }
input.time:hover,
input.time:focus { background-image: url("/images/icon-time-hover.svg");  }
input.calendar ~ .btn { margin: 0 0 0 0.5rem; vertical-align: baseline; }

input.calendar:first-child,
input.time:first-child { margin-left: 0; }
input.calendar:last-child,
input.time:last-child { margin-right: 0; }

.ui-widget.ui-widget-content { background: #FFF; border: 1px solid #8198af; box-shadow: 0 1rem 2rem rgba(0, 58, 112, 0.4); }
.ui-datepicker .ui-datepicker-header { position: relative; padding: 1.1rem 4rem; }
.ui-datepicker-title { font-size: 1.4rem; font-weight: bold; }

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { position: absolute; top: 0.5rem; left: 0.5rem; width: 2.6rem; height: 2.6rem; font-size: 0; background: url("/images/arrowL.svg") center no-repeat; background-size: 3rem; border: 1px solid #003A70; cursor: pointer; }
.ui-datepicker .ui-datepicker-next { left: auto; right: 0.5rem; background-image: url("/images/arrowR.svg"); }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background-color: #dee7f1; }

.ui-datepicker th { padding: 1rem; }
.ui-datepicker td { padding: 0; border: none !important; }
.ui-datepicker tr:nth-child(2n) td { background: #F2F5F8; }
.ui-datepicker tr:nth-child(2n+1) td { background: #FFF; }
.ui-datepicker tr:hover td { background: #e8f3ff; }

.ui-state-default { display: block; padding: 1rem; color: #003A70; text-decoration: none; }
.ui-state-default:not(.ui-state-active):hover { background: #FFF; box-shadow: 0 0 0 1px #003A70 inset, 0 0 1.5rem rgba(0, 58, 112, 0.2);}
.ui-state-active { color: #FFF; font-weight: bold; background: #003A70; }

/* status */
.status { margin: 3rem 0; text-align: right; }
.status input { margin: 0 0.5rem 0 1rem; width: 9rem; text-align: center; }
.status input:last-child { width: 6.6rem; }

/* option */
.option { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 2rem auto; max-width: 60rem; }
.option dt { margin: 0.5rem 0; width: 14rem; line-height: 4rem; }
.option dt:nth-child(4n-1) { width: 8rem; }
.option dd { margin: 0.5rem 0; width: calc(60% - 14rem); }
.option dd:nth-child(4n) { width: calc(40% - 8rem); }
.option input { margin: 0 0.8rem 0 0; width: 12rem; }

/* paging */
.paging { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 3rem 0 0; padding: 0; list-style: none; }
.paging li { margin: 0 0.5rem; }
.paging a { display: block; padding: 0 1rem; min-width: 4rem; height: 4rem; color: #003A70 !important; line-height: 4rem; text-align: center; text-decoration: none; background: none; border: 1px solid #003A70; border-radius: 3px; }
.paging a.current { color: #FFF !important; background: #003A70; }
.paging a:not(.current):hover { background: #dee7f1; }
.paging a.disabled { opacity: .6; pointer-events: none; }
.paging a img { margin: -0.1rem -0.4rem 0; width: 30px; vertical-align: middle; }

/* form */
.form { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 3rem; width: 100%; border-bottom: 2px solid #dee7f1; }
.form dt,
.form dd { padding: 1.2rem 2rem; width: calc(33.33% - 14rem); line-height: 1.2; vertical-align: top; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.form dt { padding: 2.4rem 2rem; width: 14rem; font-size: 1.4rem; font-weight: bold; background: #dee7f1; white-space: nowrap; }
.form dt:hover + dd,
.form dd:hover { background: #e8f3ff !important; }

.form dd.middle { width: calc(66.66% - 14rem); }
.form dd.large { width: calc(100% - 14rem); }
.form dd:nth-child(2),
.form dd:nth-child(4),
.form dd:nth-child(12) { background: #F2F5F8; }

.form dd input[type=text],
.form dd select,
.form dd textarea { width: 100%; }
.form dd label { margin-top: 1.2rem; }

/* talk */
#talkLog { padding: 3rem; background: #F2F5F8; }

#talkLog .date { display: inline-block; position: relative; margin: 2rem auto; padding: 0 2rem; color: #7B8E9D; font-size: 1.4rem; z-index: 1; }
#talkLog .date:before,
#talkLog .date:after { content: ""; position: absolute; top: 50%; left: -40%; margin: -2px 0 0; width: 180%; height: 1px; background: #9aa9b4; z-index: -2; }
#talkLog .date:after { top: 0; left: 0; width: 100%; height: 100%; background: #F2F5F8; z-index: -1; }

#talkForm .talkSend,
#talkLog .users { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; ms-flex-pack: justify; justify-content: space-between; margin: 0 0 2rem; }
#talkLog .users span { display: block; margin: 0.5rem 0 0; text-align: center; }

#talkLog .comments { position: relative; margin: 0 4rem 3rem 18rem; padding: 3rem 4rem; background: #F3F9FE; border: 1px solid #abc0d4; border-radius: 6px; }
#talkLog .comments:before,
#talkLog .comments:after { content: ""; position: absolute; top: 2rem; right: -28px; border: 18px solid transparent; border-left: 28px solid #abc0d4; border-right: none; }
#talkLog .comments:after { right: -26px; border-left-color: #F3F9FE; }
#talkLog .comments:last-child { margin-bottom: 0; }

#talkLog .comments.st { margin: 0 18rem 3rem 4rem; background: #FFF; opacity: 1; }
#talkLog .comments.st:before,
#talkLog .comments.st:after { right: auto; left: -28px; border-left: none; border-right: 28px solid #abc0d4; }
#talkLog .comments.st:after { right: auto; left: -26px; border-right-color: #FFF; }

#talkLog .comments .time { position: absolute; bottom: 0; left: -6rem; color: #7B8E9D; font-size: 1.4rem; }
#talkLog .comments.st .time { left: auto; right: -6rem; }

#talkForm p { margin: 0 0 2rem; }
#talkForm .right input { margin: 0 0 0 1.5rem; width: 16rem; text-align: center; }
#talkForm textarea { width: 100%; }
#talkForm .talkSend .file_up { text-align: left; }

/* newsDetail */
.newsDetail p { margin: 0 0 3rem; }
.newsDetail figure { margin: 0 0 3rem; text-align: left; }
.newsDetail .newsDate { margin: 0 0 1.5rem; color: #7B8E9D; }

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

/*-------------------------------------
	base
-------------------------------------*/

/* header */
header nav .subMenu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100vw;
	height: 0;
	background: #F2F5F8;
	box-shadow: 0 1rem 1rem rgba(0, 58, 112, 0.2);
	overflow: hidden;
	white-space: nowrap;
	z-index: 200;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
header nav .subMenu ul { margin: 0 auto; padding: 3rem 2rem; max-width: 1480px; }
header nav .subMenu li { margin: 0 2rem; }
header nav li:hover .subMenu { height: 110px; }


/*-------------------------------------
	page
-------------------------------------*/

.lineChart.noMinWidth { min-width: 800px !important;}

}

@media screen and (max-width: 1080px){

/*-------------------------------------
	base
-------------------------------------*/

/* header */
header { position: fixed; top: 0; left: 0; width: 100%; height: 8rem; background: rgba(255, 255, 255, 0.8); overflow: hidden; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
header:hover { background: #FFF; }
body:not(.open) .scrolled { height: 8rem; }
header .inner { position: relative; padding: 2rem 4rem; }

header #UserName { max-width: calc(100% - 5rem); }

header #menuTrigger {display: block;position: fixed;top:1.3rem;right: 1.5rem;width: 5rem;height:6rem;cursor: pointer;z-index: 100;}
header #menuTrigger a { display: block; padding:4rem 0 0; color: #000 !important; text-align: center; text-decoration: none; opacity: 1 !important; }
header #menuTrigger:before,
header #menuTrigger:after,
header #menuTrigger a:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #535353; border-radius: 2px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
header #menuTrigger:after { top: 14px; }
header #menuTrigger a:before { top: 28px; }

header #menuTrigger.active:before { -webkit-transform: translate(0, 14px) rotate(225deg); transform: translate(0, 14px) rotate(225deg); }
header #menuTrigger.active:after { opacity: 0; }
header #menuTrigger.active a:before { -webkit-transform: translate(0, -14px) rotate(-225deg); transform: translate(0, -14px) rotate(-225deg); }

header #menuTrigger span { display: block; }
header #menuTrigger span.close { display: none; }

header nav { position: absolute; top: 9rem; left: 0; margin: 0; padding: 0 0 2rem; width: 100%; max-height: calc(100vh - 9rem); overflow: auto; }
header nav > ul { display: block; margin: 0 4rem; border-bottom: 1px dotted #8198af; }
header nav li { margin: 0; border-top: 1px dotted #8198af; }
header nav a { padding: 1.5rem; }
header nav a:before { width: 3px; height: 100%; transform: scale(0,1); }
header nav a:hover:before { transform: scale(1,1); }

header nav .subMenu ul { -ms-flex-wrap: wrap; flex-wrap: wrap; border: none; }
header nav .subMenu li { margin: 0; width: 33.33%; border-top: 1px dotted #c5d6e6; }
header nav .subMenu li:nth-child(3n-1),
header nav .subMenu li:nth-child(3n-2) { border-right: 1px dotted #c5d6e6; }
header nav .subMenu li:first-child:last-child { width: 100% !important; border-right: none !important; }
header nav .subMenu a { padding-left: 3rem; font-size: 1.5rem; }

body.open { /* height: 100vh; overflow: hidden;  */}
.open #UserName { opacity: 1 !important; }
.open header { height: 100vh; background: #FFF; }

.open header #menuTrigger span { display: none; }
.open header #menuTrigger span.close { display: block; }

header nav .report { background: #cfdfef; }
header nav .report .subMenu .inner { padding: 0 2rem 2rem; }

#ReportDL { right: 8.5rem; padding: 1.5rem 3rem 0.5rem !important; }
#ReportDL:active,
#ReportDL:hover { padding: 2rem 3rem !important; }
#ReportDL h2 { width: 100%; white-space: nowrap; overflow: hidden; }

#ReportDL form { height: 0 !important; }
#ReportDL:active form,
#ReportDL:hover form { height: 14rem !important; }


/*-------------------------------------
	common
-------------------------------------*/

main { margin: 11rem 0 0; }


/*-------------------------------------
	page
-------------------------------------*/

/* workingTab */
#workingTab { white-space: nowrap; overflow: auto; }

#workingTab + form .right,
#workingTab + .right { position: static; margin: 2rem 0 0; text-align: left !important; }

/* form */
.form dt { padding: 2.4rem 1rem; width: 12rem; white-space: normal; }
.form dd { width: calc(50% - 12rem); }
.form dd.middle,
.form dd.large { width: calc(100% - 12rem); }
.form dd:nth-child(4),
.form dd:nth-child(12) { background: #FFF; }
.form dd:nth-child(2),
.form dd:nth-child(8),
.form dd:nth-child(10),
.form dd:nth-child(14) { background: #F2F5F8; }

}

@media screen and (max-width: 770px){

/*-------------------------------------
	base
-------------------------------------*/

th,
td { padding: 1rem 1.5rem; font-size: 1.4rem; }

/* header */
header .inner { padding: 2rem; }
header #UserName { max-width: calc(100% - 6.5rem); }

header nav > ul { margin: 0 2rem; }
header nav .subMenu li { width: 50%; border-right: none !important; }
header nav .subMenu li:nth-child(2n-1) { border-right: 1px dotted #c5d6e6 !important; }

/* footer */
footer #footInfo img { height: 3.6rem; }


/*-------------------------------------
	common
-------------------------------------*/

br.sp { display: block; }
br.pc { display: none; }

/* table */
.list th:first-child,
.list td:first-child { padding-left: 1.5rem; }
.list th:last-child,
.list td:last-child { padding-right: 1.5rem; }

.list.nohead td { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.graph-unitY span { top: -4rem;}


/*-------------------------------------
	page
-------------------------------------*/

/* workingTab */
#workingTab.long + form .right.long br { display: block; }
#workingTab.long + form .right.long br + input { margin-left: 0; }
#workingTab.long + form .right.long br ~ input,
#workingTab.long + form .right.long br ~ button { margin-top: 1rem; }

/* talk */
#talkLog .date { margin: 1rem 0; }
#talkLog .date:before { left: -30%; width: 160%; }

#talkLog .comments { margin: 0 2rem 3rem 8rem; padding: 2rem; }
#talkLog .comments:before,
#talkLog .comments:after { top: 2rem; right: -20px; border: 12px solid transparent; border-left: 20px solid #abc0d4; border-right: none; }
#talkLog .comments:after { right: -18px; border-left-color: #F3F9FE; }

#talkLog .comments.st { margin: 0 8rem 3rem 2rem; }
#talkLog .comments.st:before,
#talkLog .comments.st:after { right: auto; left: -20px; border-left: none; border-right: 20px solid #abc0d4; }
#talkLog .comments.st:after { right: auto; left: -18px; border-right-color: #FFF; }

}

@media screen and (max-width: 700px){

/*-------------------------------------
	base
-------------------------------------*/

/* header */
header { height: 7rem; }
header .inner { padding: 1.5rem; }

header #UserName { font-size: 1.2rem; }
header #UserName img { height: 1.2rem; }
header #UserName .btn { padding: 0 0.8rem; height: 2rem; font-size: 1.1rem; line-height: 1.8rem; }

header #menuTrigger { top: 0.5rem; right: 1rem; height: 5rem; }
header #menuTrigger a { font-size: 1.2rem; }
header #menuTrigger:before,
header #menuTrigger:after,
header #menuTrigger a:before { top: 10px; left: 15%; width: 70%; }
header #menuTrigger:after { top: 21px; }
header #menuTrigger a:before { top: 32px; }

header #menuTrigger.active:before { -webkit-transform: translate(0, 11px) rotate(225deg); transform: translate(0, 11px) rotate(225deg); }
header #menuTrigger.active a:before { -webkit-transform: translate(0, -11px) rotate(-225deg); transform: translate(0, -11px) rotate(-225deg); }

body:not(.open) .scrolled { height: 6rem; }

header nav { top: 7rem; max-height: calc(100vh - 7rem); }

header nav .report { background: #cfdfef; }
header nav .report .subMenu select { margin: 0 0 1rem; width: calc(100% - 5.4rem); }
header nav .report .subMenu .btn { width: 100%; }

/* Report */
#Report #ReportDL { width: 8rem; }
#Report #ReportDL:before { border-right-width: 4rem; border-left-width: 4rem; }

#Report #ReportDL h2 { font-size: 0; }
#Report #ReportDL h2:before,
#Report #ReportDL h2:after { bottom: -1.5rem; border-top-width: 1.8rem; border-right-width: 3.6rem; border-left-width: 3.6rem; }
#Report #ReportDL h2:after { bottom: -1.35rem; }

#Report #ReportDL:active,
#Report #ReportDL:hover { width: 22rem; }
#Report #ReportDL:active:before,
#Report #ReportDL:hover:before { border-right-width: 11rem; border-left-width: 11rem; }

#Report #ReportDL:active h2,
#Report #ReportDL:hover h2 { font-size: 2rem; }
#Report #ReportDL:active h2:before,
#Report #ReportDL:active h2:after,
#Report #ReportDL:hover h2:before,
#Report #ReportDL:hover h2:after { border-right-width: 10.6rem; border-left-width: 10.6rem; }

/* footer */
footer { margin: 4rem auto 0; padding: 0 2rem 2rem; }
footer #footInfo { -ms-flex-wrap: wrap; flex-wrap: wrap; }
footer #footInfo p:first-child { width: 100%; text-align: left; }
footer #footInfo li { margin: 2rem 2rem 2rem 0; }


/*-------------------------------------
	common
-------------------------------------*/

main { margin: 10rem 0 0; }

article { padding: 0; }
article > p { padding: 0 2rem; text-align: center; }
article section { margin: 0 0 3rem; padding: 2rem; }
article h2,
article h3 { margin: 0 0 2rem; padding-right: 0; }
article h3:before { left: -2rem; }
article h3 + form .right,
article h3 + .right { position: static; margin: -1rem 0 2rem !important; text-align: left !important; }

/* graph */
.ganttTitles,
.ganttTable .graph,
.ganttTimes { border-top-width: 5px; }

.graph-elements { padding: 1rem 2rem 0.5rem; }
.graph-elements p { font-size: 90%; }

/* table */
.list-scroll { margin: 2rem -2rem 0; width: calc(100% + 4rem); }

.list.nohead { min-width: 0; }
.list.nohead td { display: block; padding: 0.5rem 1.5rem 2rem; width: 100%; }
.list.nohead tr:first-child td { border: none; }
.list.nohead td:first-child { padding: 1rem 1.5rem 0; }
.list.nohead tr:nth-child(2n):last-child td:first-child { border: none; }


/*-------------------------------------
	page
-------------------------------------*/

/* paging */
.paging li:first-child a,
.paging li:last-child a { font-size: 0; }

/* option */
.option { max-width: 40rem; }
.option dt { width: 45% !important; }
.option dd { width: 55% !important; }

/* form */
.form { margin: 0 -2rem 2rem; width: calc(100% + 4rem); }
.form dt { padding: 1rem 1rem 0; width: 100%; background: none; }
.form dd { padding: 0.5rem 1rem 2rem; width: 100% !important; }
.form dt:nth-child(4n-1),
.form dd:nth-child(4n),
.form dt:hover + dd, .form dd:hover:nth-child(4n) { background: #FFF !important; }
.form dt:nth-child(4n-3),
.form dd:nth-child(4n-2),
.form dt:hover + dd, .form dd:nth-child(4n-2):hover { background: #F2F5F8 !important; }
.form dd label { margin-top: 0.5rem !important; }

/* newsDetail */
.newsDetail p,
.newsDetail figure { margin: 0 0 2rem; }
}

@media screen and (max-width: 500px){

/*-------------------------------------
	base
-------------------------------------*/

/* header */
header { height: 12rem; }
body:not(.open) .scrolled { height: 7rem; }

header #UserName { max-width: calc(100% - 5.5rem); }
header #UserName h1 { display: block; margin: 0 0 1rem; }
header #UserName p { display: block; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; }
.scrolled #UserName p { opacity: 0; }
.open #UserName p { opacity: 1; }

header nav { top: 12rem; max-height: calc(100vh - 12rem); }

/* footer */
footer #footInfo p.right { margin: 1rem 0 0; width: 100%; text-align: left !important; }
footer #footInfo .btn { width: calc(100% - 8rem); }

input.calendar,
input.time { padding-left: 2.4rem; width: calc(50% - 5.55rem); background-position: 0.2rem center; background-size: 18px; }
input.calendar ~ .btn { min-width: 0; }


/*-------------------------------------
	common
-------------------------------------*/

main { margin: 15rem 0 0; }


/*-------------------------------------
	page
-------------------------------------*/

/* login */
#login main { margin: 3rem 0 0; }
#login article section { padding: 4rem 2rem; }
#login h1 { font-size: 2rem; }
#login h1 img { margin: 0 auto 4rem; max-width: 70%; }
#login fieldset { margin: 4rem 0 1rem; }
#login fieldset label { width: 100% !important; }
#login fieldset input { margin: 0 0 2rem; width: 100% !important; }

#login footer { margin: 2rem auto 0; padding: 0 1rem; }

/* talk */
#talkLog { margin: 0 -2rem; padding: 2rem; width: calc(100% + 4rem); }
#talkLog .users img { width: 4.8rem; }

#talkLog .date { margin: 0; padding: 0 1.2rem; }
#talkLog .date:before { left: -20%; width: 140%; }

#talkLog .comments { margin: 3rem 0.5rem 4rem 4rem; padding: 2rem; }
#talkLog .comments:before,
#talkLog .comments:after { right: -20px; border: 12px solid transparent; border-left: 20px solid #abc0d4; border-right: none; }
#talkLog .comments:after { right: -18px; border-left-color: #F3F9FE; }

#talkLog .comments.st { margin: 3rem 4rem 4rem 0.5rem; }
#talkLog .comments.st:before,
#talkLog .comments.st:after { right: auto; left: -20px; border-left: none; border-right: 20px solid #abc0d4; }
#talkLog .comments.st:after { right: auto; left: -18px; border-right-color: #FFF; }

#talkLog .comments .time { bottom: auto; top: -2rem; left: 0; }
#talkLog .comments.st .time { left: auto; right: 0; }

#talkForm .talkSend { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#talkForm .talkSend .file_up { margin: 0 0 2rem; width: 100%; text-align: left; }

}

@media screen and (max-width: 410px){

input.calendar,
input.time { padding: 0; text-align: center; background: none !important; }
input.calendar ~ .btn { margin: 0; padding: 0 1.9rem; }

.paging a { min-width: 0; }
.paging li:first-child a,
.paging li:last-child a { padding: 0; }

.file_up label { margin-right: 15rem !important; }
.file_up label:after { right: -14.5rem; }
.file_up label .btn { padding: 0; min-width: 15rem; }
}
header #menuTrigger + nav{
	display: none !important;
}
.open header #menuTrigger.active + nav{
	display: block !important;
}