@charset "utf-8";

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

:root {
	--color: #333;
	--bg: #F5FAF6;
	--bg-hover: #DBF2DB;
	--border: #DDDDDD;
	--alert-color: #E34B27;
	--alert-color-hover: #ff7250;
	--alert-bg-hover: rgba(227, 75, 39, 0.2);
	--main-color: #15995C;
	--main-color-hover: #16B169;
	--main-bg: #15995C;
	--main-bg-hover: #16B169;
	--main-bg-current: #096b3d;
	--regist-color: #FDB02A;
	--regist-color-hover: #FAC66B;
	--back-color: #999999;
	--back-color-hover: #bbbbbb;
	--form-bg: #F2F2F2;
	--form-border: #DDDDDD;
	--form-border-focus: rgba(21, 153, 92, 0.6);
	--box-bg: #DBF2DB;
	--search-bg: #DBF2DB;
	--search-title-bg: rgba(21, 153, 92, 0.15);
	--inactive-color: #999999;
	--inactive-bg: #DDDDDD;
	--table-th-bg: #DBF2DB;
	--table-th-gray-bg: #EFEFEF;
	--table-td-bg: #F5FAF6;
	--table-td-change-bg: #DBF2DB;
	--table-subtd-bg: #F2F2F2;
	--list-bg: #DBF2DB;
	--list-remove-color: #DDDDDD;
	--list-remove-color-hover: #ccc;
	--btn-stop: #E34B27;
	--btn-stop-hover: #ff7250;
	--btn-start: #FDB02A;
	--btn-start-hover: #FAC66B;
	--outer-padding: 0 42px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	:root {
		--outer-padding: 0 15px;
	}
}

html {
	font-size: 14px;
}
body {
	font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	font-size: 14px;
	line-height: 1.35;
	color: var(--color);
	background-color: var(--bg);
	overflow-x: hidden;
}
body.pc_device {
	min-width: 1200px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	body {
		font-size: 12px;
	}
}

/* layout (display, position, width, height, z-index of large elements)
--------------------------------------------------------------------------*/
.inner {
	margin: 0 auto;
	max-width: 100%;
	padding: 0 42px;
	position: relative;
}
#modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3000;
}
#main {}

@media screen and (min-width: 651px) {
	.sp { display: none; }
}
@media screen and (max-width: 650px) {
	.pc { display: none; }
	#header {
		display: block;
	}
	#glbNav {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
	}
	#modal {
		z-index: 2000;
	}
}

/* block 
--------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 2rem 0;
	letter-spacing: 0;
	line-height: 1.6;
	font-weight: bold;
}
h1, .h1 { font-size: 24px; line-height: 1.3; font-weight: normal; }
h2, .h2 { font-size: 20px; line-height: 1.3; margin: 2.5em 0 1em 0; }
h3, .h3 { font-size: 18px; line-height: 1.35; margin: 3em 0 1.5em 0; }
h4, .h4 { font-size: 16px; line-height: 1.5; margin: 2em 0 0.5em 0; }
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 14px; }

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	h1, .h1 { font-size: 22px; }
	h2, .h2 { font-size: 20px; margin: 20px 0; }
	h2, .h2 {
		font-size: 140%;
		margin: 30px 0;
	}
	h3, .h3 { font-size: 12px; }
}

small {
	font-size: 65%;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0;
	color: #777;
	margin-left: 0.75em;
}
p {
	margin: 0 0 1.2em 0;
}

/* block
--------------------------------------------------------------------------*/
ul {
	margin: 1em 0;
	padding: 0 0 0 1.8em;
	list-style-type: disc;
}
ol {
	margin: 1em 0;
	padding: 0 0 0 2.2em;
}
li {
	margin-bottom: 0.25em;
}
dl {
	margin-top: 0;
	margin-bottom: 20px;
}
dt,
dd {
	line-height: 1.4;
	margin-left: 0;
}
dt {
	font-weight: bold;
}
dd + dt {
	margin-top: 1rem;
}

/* inline
--------------------------------------------------------------------------*/
strong {
	font-weight: bold;
	font-style: normal;
	color: var(--color);
}
em {
	font-style: italic;
}
sup {}
sub {}
img {
	margin: 0;
	padding: 0;
	max-width: 100%;
	vertical-align: bottom;
}

/* inline-block
--------------------------------------------------------------------------*/
a,
a:link,
a:visited {
	color: var(--color);
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a.noref {
	cursor: default;
	-webkit-tap-highlight-color: transparent;
}


/* buttons
------------------------------------------------------------------- */
a.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	width: 250px;
	height: 40px;
	line-height: 40px;
	max-width: 100%;
	padding: 0 0.5em;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--main-color);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	box-sizing: border-box;
}
a.btn.noref {
	cursor: default!important;
	background-color: var(--inactive-color)!important;
}
button.btn.insert,
input.btn.insert,
button.btn.regist,
input.btn.regist {
	color: var(--color);
	background-color: var(--regist-color);
}
button.btn.attention,
input.btn.attention {
	color: #fff;
	background-color: var(--alert-color);
}

button.btn.back,
input.btn.back {
	color: #fff;
	background-color: var(--back-color);
}

button.btn.addlist {
	width: 280px;
	color: var(--color);
	padding: 0;
	padding-right: 26px;
	background-color: transparent;
	background-image: url(../img/ico_addlist.svg);
	background-repeat: no-repeat;
	background-position: right -6px top -5px;
	background-size: 44px;
}
button.btn.addlist > span.label {
	display: block;
	border-radius: 6px;
	background-color: var(--regist-color);
}
button.btn.removelist {
	width: 280px;
	color: var(--color);
	padding: 0;
	padding-left: 26px;
	background-color: transparent;
	background-image: url(../img/ico_removelist.svg);
	background-repeat: no-repeat;
	background-position: left -6px top -5px;
	background-size: 44px;
}
button.btn.removelist > span.label {
	display: block;
	border-radius: 6px;
	background-color: var(--list-remove-color);
}


/* file */
label.file {
	width: 80px;
	margin: auto;
}
label.file img {
	width: 40px;
}
label.file input[type="file"] {
	display: none;
}
label.file span.upload {
	margin-left: auto;
	text-decoration: underline;
}
label.file span.img {
	display: block;
	width: 40px;
	height: 40px;
	background-image: url(../img/prof_img.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

label.file.movie {
	width: 111px;
}
label.file video {
	background-color: var(--form-bg);
	width: 71px;
	height: 40px;
}

/* file.csv */
label.file.csv {
	width: 100%;
}
label.file.csv input[type="file"] {
	display: none;
}
label.file.csv span.upload {
	margin: 0;
	padding: 0 1em;
	display: block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: var(--form-bg);
	border: 1px solid var(--form-border);
	border-radius: 6px;
	text-decoration: none;
}
label.file.csv span.upload:empty {
	color: var(--inactive-color);
}
label.file.csv span.upload:empty:before {
	display: block;
	content: 'ファイルを選択';
	height: 40px;
	line-height: 40px;
	padding: 0;
}

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

	a.btn,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		transition: background-color 0.1s linear;
	}

	a.btn:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover,
	a.btn:focus,
	button:focus,
	input[type="submit"]:focus,
	input[type="reset"]:focus,
	input[type="button"]:focus {
		outline: 0;
		background-color: var(--main-color-hover);
	}

	label.file {
		transition: opacity 0.1s linear;
	}
	label.file:hover {
		opacity: 0.8;
	}

	label.file.csv span.upload {
		transition: color 0.1s linear, background-color 0.1s linear;
	}
	label.file.csv span.upload:hover {
		color: var(--color);
	}
	label.file.csv span.upload:hover {
		background-color: #fff;
	}

	button.btn.insert:hover,
	button.btn.insert:focus,
	input.btn.insert:hover,
	input.btn.insert:focus,
	button.btn.regist:hover,
	button.btn.regist:focus,
	input.btn.regist:hover,
	input.btn.regist:focus {
		background-color: var(--regist-color-hover);
	}
	button.btn.attention:hover,
	button.btn.attention:focus,
	input.btn.attention:hover,
	input.btn.attention:focus {
		background-color: var(--alert-color-hover);
	}
	button.btn.back:hover,
	button.btn.back:focus,
	input.btn.back:hover,
	input.btn.back:focus {
		background-color: var(--back-color-hover);
	}

	button.btn.addlist,
	button.btn.removelist {
		transition: opacity 0.1s linear;
	}
	button.btn.addlist:hover,
	button.btn.addlist:focus,
	button.btn.removelist:hover,
	button.btn.removelist:focus {
		opacity: 0.8;
	}
}
@media screen and (max-width: 980px) {}
@media screen and (max-width: 800px) {}
@media screen and (max-width: 650px) {
	a.btn,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
	}
}

/* Forms
--------------------------------------------------------------------------*/
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	max-width: 100%;
	height: 40px;
	padding: 0 10px;
	background: var(--form-bg);
	border: 1px solid var(--form-border);
	border-radius: 6px;
	box-shadow: none;
	box-sizing: border-box;
}
input[type=radio],
input[type=checkbox] {
	width: 25px;
	height: 25px;
	opacity: 0;
}
input[type=radio] + span.label:before,
input[type=checkbox] + span.label:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 25px;
	height: 25px;
	border-radius: 6px;
	background-color: var(--form-bg);
	border: 1px solid var(--form-border);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px;
}
input[type=checkbox]:checked + span.label:before {
	background-image: url(../img/ico_checked.svg);
}
input[type=radio] + span.label:before {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
input[type=radio]:checked + span.label:after {
	content: '';
	position: absolute;
	top: 6px;
	left: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--main-color);
}
textarea {
	min-height: 280px;
	padding-top: 6px;
	padding-bottom: 6px;
}
select {
	width: 220px;
	background-image: url(../img/ico_dropdown.svg);
	background-repeat: no-repeat;
	background-size: 13px;
	background-position: right 7px center;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border-color: var(--form-border);
	outline: 0;
	background-color: #fff;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--form-border-focus);
}
label,
legend {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 25px;
	margin-right: 20px;
	margin-bottom: .5rem;
	cursor: pointer;
}
legend {
	font-weight: bold;
}
fieldset {
	padding: 0;
	border-width: 0;
}

/* width */
input.small,
select.small {
	width: 100px;
}
input.mini,
select.mini {
	width: 65px;
}
select.month {
	width: 150px;
}
input[type="text"].medium {
	width: 246px;
}
input[type="text"].long {
	width: 345px;
}
#dataTable select[name="notice_format"] {
	width: 170px;
}

@media (min-width: 1px) {
	input[type=radio],
	input[type=checkbox] {
		margin-right: 10px;
	}
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	input[type="email"],
	input[type="number"],
	input[type="search"],
	input[type="text"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	textarea,
	select {
		 /*border-width: 0.5px;*/
	}
	input[type=radio],
	input[type=checkbox] {
		/* margin-right: 5px; */
	}
}

/* table
------------------------------------------------------------------- */
table {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
}
table tr th,
table tr td {
	padding: 0.75em 1em;
	text-align: center;
	vertical-align: middle;
	font-size: 13px;
}
table tr > *:first-child {
	border-left: 0;
}
table tr td > *:first-child { margin-top: 0; }
table tr td > *:last-child { margin-bottom: 0; }

table tr th {
	height: 50px;
	white-space: nowrap;
	border-left: 1px solid var(--border);
	background-color: var(--table-th-bg);
}
table tr th:first-child {
	border-left: 0;
}

table tr td {
	height: 70px;
	transition: background-color 0.1s linear;
}
table tr:nth-child(2n) td {
	background-color: var(--table-td-bg);
}
table tr.edit td {
	background-color: rgba(219, 242, 219, 0.5);
}

table tr th.id {
	width: 80px;
}
table tr th.name {
	width: 380px;
}
table tr th.img {
	width: 130px;
}
table tr th.btn {
	width: 96px;
}
table tr th.number {
	width: 100px;
}

table tr td > .field {
	display: flex;
	align-items: center;
}
table tr td > .field label {
	margin-bottom: 0;
}
table tr td > .field label > span.label {
	white-space: nowrap;
}
table tr td > .field.targetgroup span.label {
	display: block;
	max-width: 235px;
	font-size: 12px;
}
table tr td > .field.targetgroup input[type="button"] {
	margin-left: auto;
}
table tr td > .field.targetgroup .changelist {
	display: none;
}

table td input[type="text"],
table td input[type="password"] {
	width: 150px;
}
table td input[type="email"] {
	width: 200px;
}
table td a.btn,
table td input[type="button"] {
	width: 70px;
	font-size: 14px;
}
table td input[type="button"].stop {
	background-color: var(--btn-stop);
}
table td input[type="button"].start {
	background-color: var(--btn-start);
}
table td input[type="button"].delete {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	padding: 0;
	background-color: transparent;
	background-image: url(../img/ico_delete.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
table td input[type="button"].delete[disabled] {
	background-color: transparent!important;
	background-image: url(../img/ico_delete_disabled.svg)!important;
	cursor: default!important;
}

/* width */
table td input.small,
table td select.small {
	width: 100px;
}
table td input.mini,
table td select.mini {
	width: 65px;
}

/* readonly */
table td input[type="text"][readonly],
table td input[type="email"][readonly],
table td input[type="password"][readonly],
table td select[readonly] {
	opacity: 1;
	border-color: transparent;
	background-color: transparent;
}

/* disabled */
table td input[type="text"][disabled],
table td input[type="email"][disabled],
table td input[type="password"][disabled],
table td select[disabled] {
	opacity: 1;
	border-color: transparent;
	background-color: transparent;
}
table td select[disabled] {
	opacity: 1;
	background-image: none;
}
table td input[type="button"][disabled].update,
table td input[type="button"][disabled].start,
table td input[type="button"][disabled].stop {
	cursor: default;
	background-color: var(--inactive-color);
}

/* change */
table tr.change td {
	background-color: var(--table-td-change-bg);
}

/* inactive */
table tr.inactive td {
	color: var(--inactive-color);
	background-color: var(--inactive-bg);
}
table tr.inactive td span.status {
	display: block;
	text-align: left;
	color: var(--alert-color);
	padding-left: 1em;
	margin-top: -10px;
}

/* prof */
table th[data-type="prof"],
table td[data-type="prof"] {
	display: none;
}

@media screen and (min-width : 651px) {
	table td input[type="button"].stop:hover {
		background-color: var(--btn-stop-hover);
	}
	table td input[type="button"].start:hover {
		background-color: var(--btn-start-hover);
	}
	table td input[type="button"].delete:hover {
		background-color: var(--alert-bg-hover);;
	}
}
@media screen and (max-width : 650px) {
	table tr th,
	table tr td {
		font-size: 10px;
		border-top-width: 0.5px;
		border-left-width: 0.5px;
	}
}

/* div.table
------------------------------------------------------------------- */
div.table {
	display: table;
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
}
div.table .thead,
div.table .tbody {
	display: table-row-group;
}
div.table .tr {
	display: table-row;
}
div.table .th,
div.table .td {
	display: table-cell;
	padding: 0.75em 1em;
	text-align: center;
	vertical-align: middle;
	font-size: 13px;
}
div.table .th {
	font-weight: bold;
}
div.table .tr > *:first-child {
	border-left: 0;
}
div.table .tr .td > *:first-child { margin-top: 0; }
div.table .tr .td > *:last-child { margin-bottom: 0; }

div.table .tr .th {
	height: 50px;
	white-space: nowrap;
	border-left: 1px solid var(--border);
	background-color: var(--table-th-bg);
}
div.table .tr .th:first-child {
	border-left: 0;
}

div.table .tr .td {
	height: 70px;
	transition: background-color 0.1s linear;
}
div.table .tr:nth-child(2n) .td {
	background-color: var(--table-td-bg);
}
div.table .tr.edit .td {
	background-color: rgba(219, 242, 219, 0.5);
}

div.table .tr .th.id {
	width: 80px;
}
div.table .tr .th.name {
	width: 380px;
}
div.table .tr .th.img {
	width: 130px;
}
div.table .tr .th.btn {
	width: 96px;
}
div.table .tr .th.number {
	width: 100px;
}

div.table .tr .td > .field {
	display: flex;
	align-items: center;
}
div.table .tr .td > .field label {
	margin-bottom: 0;
}
div.table .tr .td > .field label > span.label {
	white-space: nowrap;
}
div.table .tr .td > .field.targetgroup span.label {
	display: block;
	width: 235px;
	font-size: 12px;
	padding-right: 14px;
	text-align: left;
}
div.table .tr .td > .field.targetgroup input[type="button"] {
	margin-left: auto;
	flex-shrink: 0;
}
div.table .tr .td > .field.targetgroup .changelist {
	display: none;
}
div.table .tr .td > .field.sync {}
div.table .tr .td > .field.sync pre {
	width: 6em;
}
div.table .tr .td > .field.sync .sync_guide {
	margin-left: auto;
	width: 18px;
	height: 18px;
	line-height: 14px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	border: 2px solid;
	border-radius: 50%;
	margin-left: 5px;
	color: var(--inactive-color);
	transition: color 0.07s linear, background-color 0.07s linear, border-color 0.07s linear;
}
div.table .tr .td > .field.sync .sync_guide:hover {
	background-color: var(--inactive-color);
	border-color: var(--inactive-color);
	color: #fff;
}

div.table .td input[type="text"],
div.table .td input[type="password"] {
	width: 150px;
}
div.table .td input[type="email"] {
	width: 200px;
}
div.table .td a.btn,
div.table .td input[type="button"] {
	width: 70px;
	font-size: 14px;
}
div.table .td input[type="button"].stop {
	background-color: var(--btn-stop);
}
div.table .td input[type="button"].start {
	background-color: var(--btn-start);
}
div.table .td input[type="button"].delete {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	padding: 0;
	background-color: transparent;
	background-image: url(../img/ico_delete.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* width */
div.table .td input.small,
div.table .td select.small {
	width: 100px;
}
div.table .td input.mini,
div.table .td select.mini {
	width: 65px;
}

/* readonly */
div.table .td input[type="text"][readonly],
div.table .td input[type="email"][readonly],
div.table .td input[type="password"][readonly],
div.table .td select[readonly] {
	opacity: 1;
	border-color: transparent;
	background-color: transparent;
}

/* disabled */
div.table .td input[type="text"][disabled],
div.table .td input[type="email"][disabled],
div.table .td input[type="password"][disabled],
div.table .td select[disabled] {
	opacity: 1;
	border-color: transparent;
	background-color: transparent;
	background-image: none;
}
div.table .td select[disabled][name="notice_day"] {
	display: none;
}
div.table .td input[type="button"][disabled].update,
div.table .td input[type="button"][disabled].start,
div.table .td input[type="button"][disabled].stop {
	cursor: default;
	background-color: var(--inactive-color);
}

#dataTable .noitem {
	display: none;
	width: 100%;
	height: 54px;
	align-items: center;
	justify-content: center;
}
#dataTable.noitem .noitem {
	display: flex;
}

/* change */
div.table .tr.change .td {
	background-color: var(--table-td-change-bg);
}

/* inactive */
div.table .tr.inactive .td {
	color: var(--inactive-color);
	background-color: var(--inactive-bg);
}
div.table .tr.inactive .td span.status {
	display: block;
	text-align: left;
	color: var(--alert-color);
	padding-left: 1em;
	margin-top: -10px;
}

/* prof */
div.table .th[data-type="prof"],
div.table .td[data-type="prof"] {
	display: none;
}

@media screen and (min-width : 651px) {
	div.table .td input[type="button"].stop:hover {
		background-color: var(--btn-stop-hover);
	}
	div.table .td input[type="button"].start:hover {
		background-color: var(--btn-start-hover);
	}
	div.table .td input[type="button"].delete:hover {
		background-color: var(--alert-bg-hover);;
	}
}
@media screen and (max-width : 650px) {
	div.table .tr .th,
	div.table .tr .td {
		font-size: 10px;
		border-top-width: 0.5px;
		border-left-width: 0.5px;
	}
}

/* datepicker
------------------------------------------------------------------- */
.value.input-group.date {
	display: flex;
}
.value.input-group.date span.input-group-addon {
	margin-left: 13px;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background-color: var(--form-bg);
	background-image: url(../img/ico_calendar.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px;
}

.datepicker {
	position: absolute;
	background-color: #fff;
	border-radius: 6px;
	border: 1px solid var(--border);
	box-shadow: 0 0 6px rgba(0,0,0,0.16);
}
.datepicker table tr td,
.datepicker table tr th {
	border-radius: 0;
}
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active:active {
	background-color: var(--main-bg);
}
.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
	background-color: #BDE5C8;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {}

/* header
------------------------------------------------------------------- */
#header {}
#header .row {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 65px;
	padding: 0 42px;
}
#header > .row > * {
	flex-shrink: 0;
	min-width: 1px;
}
#header .col {
	display: flex;
	align-items: stretch;
}

#header .row.global {
	background-color: #fff;
}
#header .row.sub {
	height: 30px;
	background-color: var(--main-color);
	color: #fff;
}

/* logo */
#header .col.logo img {
	width: auto;
	height: 40px;
}
#header .col.logo a {
	display: flex;
	align-items: center;
	width: 100%;
}
#header .col.logo span.title {
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#header .col.logo img + span.title {
	margin-left: 8px;
}
/* gnav */
#header .col.gnav {
	margin-left: auto;
}

#header h1 {
	font-size: 15px;
	font-weight: bold;
	margin: 0;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	#header {}
	#header .row {
		padding: 0;
		height: auto;
	}
	#header .row.global {
		flex-wrap: wrap;
	}
	#header .row.global .col.logo {
		order: 1;
		width: 146px;
	}
	body.home #header .row.global .col.logo {
		width: auto;
	}

	#header .col.logo {
		height: 50px;
	}
	#header .col.logo span.title {
		font-size: 10px;
	}
	#header .col.logo img + span.title {
		margin-left: 5px;
	}
	#header .col.logo a {
		padding: 0 6px 0 12px;
	}
	#header .row.global .col.cnav {
		width: calc(100% - 146px);
		order: 2;
		flex-shrink: 1;
		flex-grow: 1;
	}
	#header .row.global .col.gnav {
		order: 3;
		width: 100%;
		margin: 0;
		border-top: 1px solid var(--border);
	}
	#header .col.logo img {
		height: 24px;
	}

	#header .row.sub {
		height: auto;
	}
}

/* glbNav
--------------------------------------------------------------------------*/
ul.gnav {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
}
ul.gnav li,
ul.gnav li a {
	display: block;
	font-weight: bold;
}
ul.gnav li {
	padding: 0;
	margin: 0;
}
ul.gnav li > a {
	text-decoration: none;
	white-space: nowrap;
	text-align: center;
	line-height: 65px;
	padding: 0 27px;
	position: relative;
}

ul.gnav li.active a {
	position: relative;
	background-color: rgba(0,0,0,0.05);
}
ul.gnav li.current a {
	position: relative;
	background-color: var(--main-color);
	color: #fff;
}

@media screen and (min-width : 651px) {
	ul.gnav li a {
		transition: background-color 0.1s linear;
	}
	ul.gnav li a:hover {
		background-color: var(--bg-hover);
	}
}
ul.gnav li[class*="current"] a {}

@media screen and (max-width: 980px) {}
@media screen and (min-width: 651px) {}
@media screen and (max-width: 800px) {}
@media screen and (max-width: 650px) {
	ul.gnav {
		width: 100%;
	}
	ul.gnav > li {
		width: calc(100% / 3);
		border-left: 1px solid var(--border);
	}
	ul.gnav li > a {
		padding: 0;
		height: 40px;
		line-height: 40px;
	}
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {}

/* cmnNav
------------------------------------------------------------------- */
#cmnNav {}

ul.cnav {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
}
ul.cnav li,
ul.cnav li a {
	display: block;
	font-weight: bold;
}
ul.cnav li {
	padding: 0;
	margin: 0;
}
ul.cnav li > a {
	text-decoration: none;
	white-space: nowrap;
	text-align: center;
	line-height: 65px;
	padding: 0 27px;
	position: relative;
}

ul.cnav li.ico > a {
	position: relative;
	font-size: 12px;
	padding-top: 35px;
	line-height: 30px;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center top 14px;
}
ul.cnav li.ico.setting > a {
	background-image: url(../img/ico_setting.svg);
}
ul.cnav li.ico.regist > a {
	background-image: url(../img/ico_regist.svg);
}

ul.cnav li.active a {
	position: relative;
	background-color: rgba(0,0,0,0.05);
}
ul.cnav li.current a {
	position: relative;
	background-color: var(--main-color);
	color: #fff;
}
ul.cnav li.current.ico.setting > a {
	background-image: url(../img/ico_setting_white.svg);
}
ul.cnav li.current.ico.regist > a {
	background-image: url(../img/ico_regist_white.svg);
}

ul.cnav li.prof > a {
	display: flex;
	align-items: stretch;
	padding: 0;
	padding-right: 1em;
	height: 65px;
}
ul.cnav li.prof div.photo {
	display: flex;
	align-items: center;
	padding: 0 14px;
}
ul.cnav li.prof div.photo img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
ul.cnav li.prof div.txt {
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-align: left;
}
ul.cnav li.prof span {
	display: block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
ul.cnav li.prof span.name {
	margin-top: auto;
}
ul.cnav li.prof span.dept {
	margin-top: 4px;
	margin-bottom: auto;
	font-size: 12px;
	color: var(--inactive-color);
}

ul.cnav li.feeling {
	width: 70px;
	position: relative;
}
ul.cnav li.feeling > a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	background-image: url(../img/ico_arrow_down.svg);
	background-position: left 42px center;
	background-repeat: no-repeat;
	background-size: 11px;
}
ul.cnav li.feeling > a:after {
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 22px);
	content: '';
	width: 20px;
	height: 20px;
	background-image: url(../img/feeling_normal.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 20px;
}
ul.cnav li > a.opened {
	background-color: var(--bg-hover);
}

ul.cnav li.feeling[data-feeling="normal"] > a:after { background-image: url(../img/feeling_normal.svg); }
ul.cnav li.feeling[data-feeling="good"] > a:after { background-image: url(../img/feeling_good.svg); }
ul.cnav li.feeling[data-feeling="bad"] > a:after { background-image: url(../img/feeling_bad.svg); }
ul.cnav li.feeling[data-feeling="angry"] > a:after { background-image: url(../img/feeling_angry.svg); }
ul.cnav li.feeling[data-feeling="surprised"] > a:after { background-image: url(../img/feeling_surprised.svg); }

ul.cnav li.feeling > ul.feelings {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	list-style-type: none;
	padding: 0;
	margin: 0;
	background-color: #fff;
	border: 1px solid var(--border);
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	z-index: 1;
}
ul.cnav li.feeling > ul.feelings > li {
	margin: 0;
}
ul.cnav li.feeling > ul.feelings > li > a {
	display: block;
	height: 40px;
	background-image: url(../img/feeling_normal.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 20px;
	position: relative;
}
ul.cnav li.feeling > ul.feelings > li[data-feeling="normal"] > a { background-image: url(../img/feeling_normal.svg); }
ul.cnav li.feeling > ul.feelings > li[data-feeling="good"] > a { background-image: url(../img/feeling_good.svg); }
ul.cnav li.feeling > ul.feelings > li[data-feeling="bad"] > a { background-image: url(../img/feeling_bad.svg); }
ul.cnav li.feeling > ul.feelings > li[data-feeling="angry"] > a { background-image: url(../img/feeling_angry.svg); }
ul.cnav li.feeling > ul.feelings > li[data-feeling="surprised"] > a { background-image: url(../img/feeling_surprised.svg); }

ul.cnav li.feeling > ul.feelings > li.selected > a {
	cursor: default;
}

@media screen and (min-width : 651px) {
	ul.cnav li > a {
		transition: background-color 0.1s linear;
	}
	ul.cnav li > a:hover {
		background-color: var(--bg-hover);
	}
	ul.cnav li.feeling > ul.feelings > li > a {
		transition: background-color 0.1s linear;
	}
	ul.cnav li.feeling > ul.feelings > li > a:hover {
		background-color: var(--form-bg);
	}
}
@media screen and (max-width: 650px) {
	ul.cnav {
		max-width: 100%;
		margin-left: auto;
	}
	ul.cnav > li {
		flex-shrink: 0;
		border-left: 1px solid var(--border);
	}
	ul.cnav li > a {
		padding: 0;
		height: 40px;
		line-height: 40px;
	}
	ul.cnav li.ico {
		width: 50px;
	}
	ul.cnav li.prof {
		width: calc(100% - 145px);
		flex-grow: 1;
		flex-shrink: 10;
	}
	ul.cnav li.prof > a {
		height: 50px;
		padding-right: 0.5em;
	}
	ul.cnav li.prof div.photo {
		width: 50px;
		padding: 0;
		justify-content: center;
	}
	ul.cnav li.prof div.photo img {
		width: 40px;
	}
	ul.cnav li.prof div.txt {
		width: calc(100% - 50px);
	}
	ul.cnav li.prof span.name {
		font-size: 10px;
	}
	ul.cnav li.prof span.dept {
		font-size: 8px;
		margin-top: 3px;
	}
	ul.cnav li.feeling {
		width: 45px;
		background-position: center;
	}
	ul.cnav li.feeling > a {
		background-image: none;
	}
	ul.cnav li.feeling > a:after {
		top: calc(50% - 10px);
		left: calc(50% - 11px);
	}
}

#cmnNav ul.cnav > li {
	border-left: 1px solid var(--border);
}

#cmnNav ul.cnav > li ul.sub {
	display: none;
	margin: 0;
	padding: 0;
	background-color: #fff;
	z-index: 1000;
}
#cmnNav ul.cnav > li ul.sub > li > a {
	line-height: 45px;
}

@media screen and (min-width : 651px) {
	#cmnNav ul.cnav > li.prof ul.sub {
		opacity: 0;
	}
	#cmnNav ul.cnav > li.prof:hover ul.sub {
		display: block;
		animation-duration: 0.1s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
		animation-name: fadeIn;
	}
}
@media screen and (max-width : 650px) {
	ul.cnav > li {
		height: 50px;
	}
	ul.cnav li.ico > a {
		height: 50px;
		padding-top: 24px;
		line-height: 26px;
		background-size: 16px;
		background-position: center top 9px;
		font-size: 10px;
	}
}
@media screen and (max-width : 374px) {
	#header .row.global .col.logo {
		width: 54px;
	}
	#header .col.logo span.title {
		display: none;
	}
	#header .row.global .col.cnav {
		width: calc(100% - 54px);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* subNav
------------------------------------------------------------------- */
#subNav {}

ul.snav {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
}
ul.snav > li,
ul.snav > li > a {
	display: block;
}
ul.snav > li {
	padding: 0 1em;
	margin: 0;
}
ul.snav > li:last-child {
	margin-right: 0;
}
ul.snav > li > a {
	position: relative;
	padding: 0;
	height: 30px;
	line-height: 30px;
	background-color: var(--main-bg);
	color: #fff;
	text-decoration: none;
}
ul.snav > li > a:before {
	content: '';
	display: block;
	width: 1px;
	height: 14px;
	position: absolute;
	top: 8px;
	left: -1em;
	border-left: 1px solid #fff;
}
/* ul.snav > li > a:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: transparent;
} */
ul.snav > li:first-child {
	padding-left: 0;
}
ul.snav > li:first-child > a:before {
	display: none;
}

ul.snav > li.current {
	font-weight: bold;
}
ul.snav > li.current > a:after {
	/* background-color: #fff; */
}

@media screen and (min-width : 651px) {
	ul.snav > li:not(.current) > a {
		transition: background-color 0.1s linear;
	}
	ul.snav > li:not(.current) > a:after {
		transition: background-color 0.05s linear;
	}
	ul.snav > li:not(.current) > a:hover:after {
		background-color: #fff;
	}
}

@media screen and (min-width: 651px) {}
@media screen and (max-width: 650px) {
	#subNav {
		width: 100%;
	}
	ul.snav {
		width: 100%;
		flex-wrap: wrap;
	}
	ul.snav > li {
		width: calc(100% / 3);
		padding: 0;
	}
	ul.snav > li > a {
		text-align: center;
		height: 35px;
		line-height: 35px;
	}
	ul.snav > li > a:before,
	ul.snav > li > a:after {
		display: none;
	}
	ul.snav > li.current > a {
		background-color: var(--bg-hover);
		color: var(--main-color);
	}
}

/* search
------------------------------------------------------------------- */
#search {
	padding: 0 42px;
	background-color: var(--search-bg);
}
#search .outer {
	width: 100%;
	display: flex;
	align-items: stretch;
}

#search .col {}
#search .col > *:first-child { margin-top: 0; }
#search .col > *:last-child { margin-bottom: 0; }

#search .col.title {
	display: flex;
	align-items: stretch;
	background-color: var(--search-title-bg);
	color: var(--main-color);
}
#search .col.title h2 {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	line-height: 1;
	padding: 0 12px;
	background-color: transparent;
	color: var(--main-color);
}
#search .col.title h2 span {
	padding-top: 22px;
	background-image: url(../img/ico_search_color.svg);
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: center top;
	font-size: 12px;
	white-space: nowrap;
	font-weight: normal;
	text-align: center;
}

#search .col.selector {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 12px 0;
}
#search .col.title + .col.selector {
	padding-left: 12px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	#search {
		padding: 0 10px;
	}
	#search .col.selector {
		padding: 7px 0;
	}
}

/* search - field
------------------------------------------------------------------- */
.search .field {
	padding: 6px;
	display: flex;
	align-items: center;
}
#search.flexwidth .col.selector .field {
	min-width: 212px;
	width: auto;
}
.search .field .label {
	padding-right: 10px;
	white-space: nowrap;
	flex-grow: 0;
	flex-shrink: 0;
}
.search .field .value {
	width: 100%;
	display: flex;
	align-items: center;
}
.search .field .value label {
	margin-right: 10px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	.search .field {
		padding: 5px;
	}
	.search .field .value select {
		width: 100%;
	}
}

/* field.group_member
------------------------------- */
.search .field.group_member {
	width: auto;
}
.search .field.group_member .value {
	width: 250px;
}
.search .field.group_member .value select {
	width: 100%;
}
.search .field.group_member .value + .value {
	width: 280px;
	padding-left: 30px;
	background-repeat: no-repeat;
	background-position: left 12px center;
	background-size: 7px;
	background-image: url(../img/ico_arrow.svg);
}
@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	.search .field.group_member {
		width: 100%;
	}
	.search .field.group_member .value {
		width: calc((100% - 24px) / 2);
	}
	.search .field.group_member .value + .value {
		width: calc(((100% - 24px) / 2) + 24px);
		padding-left: 24px;
		background-position: left 7px center;
	}
}

/* field.month
------------------------------- */
.search .field.month .value {
	width: 150px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {}

/* field.range
------------------------------- */
.search .field.range {
	width: auto;
}
.search .field.range .rangelabel {
	flex-shrink: 0;
	flex-grow: 0;
	text-align: center;
	padding: 0 8px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	.search .field.range {
		width: 100%;
	}
	.search .field.range .value {
		flex-grow: 1;
	}
}

/* field.sort
------------------------------- */
.search .field.sort {
	width: auto;
	margin-left: auto;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	.search .field.sort {
		width: 220px;
	}
	.search .field.sort .value {
		width: 100%;
	}
}

/* main
------------------------------------------------------------------- */
#main {
	padding: 40px 0 60px 0;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	#main {
		padding: 15px 0 45px 0;
	}
}

/* area
------------------------------------------------------------------- */
#main div.area {}

#main div.area .outer {
	margin: auto;
}
#main div.area .box {
	margin: auto;
	background-color: #fff;
	border: 1px solid var(--border);
	border-radius: 6px;
}
#main div.area .row {}
#main div.area .row + .row {
	margin-top: 24px;
}
#main div.area .box + .row {
	margin-top: 24px;
}
#main div.area .row > *:first-child { margin-top: 0; }
#main div.area .row > *:last-child { margin-bottom: 0; }

/* title */
#main div.area .row.title {
	text-align: center;
}
#main div.area .row.title h1,
#main div.area .row.title h2 {
	font-size: 20px;
	font-weight: bold;
}

/* field */
#main div.area .row.field {}
#main div.area .row.field .col {}
#main div.area .row.field .col + .col {
	margin-top: 26px;
}
#main div.area .row.field .col > .label {
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: bold;
}
#main div.area .row.field .col label .label {
	margin-bottom: 0;
}
#main div.area .row.field .col.filter .value {
	display: flex;
	align-items: center;
}
#main div.area .row.field .col.filter .value span.next {
	display: block;
	width: 28px;
	height: 40px;
	background-image: url(../img/ico_arrow.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 7px;
}
#main div.area .row.field .col .value.has_suffix {
	display: flex;
	align-items: center;
}
#main div.area .row.field .col .value.has_suffix span.suffix {
	margin-left: 1em;
	font-weight: bold;
}

/* error */
#main div.area .row.field .col:not(.has_error) .msg {
	display: none;
}
#main div.area .row.field .col.has_error .msg {
	padding-top: 0.5em;
}
#main div.area .row.field .col.has_error .msg span.error {
	color: var(--alert-color);
}

/* action */
#main div.area .row.action {
	display: flex;
	justify-content: center;
	text-align: center;
}
#main div.area .row.action input[type="button"] + input[type="button"],
#main div.area .row.action input[type="button"] + input[type="submit"] {
	margin-left: 20px;
}

/* error */
#main div.area .row.error {
	text-align: center;
	color: var(--alert-color);
	font-weight: bold;
}
#main div.area .row.field .col.has_error .value input[type="text"],
#main div.area .row.field .col.has_error .value textarea,
#main div.area .row.field .col.has_error .value select {
	background-color: var(--alert-bg-hover);
	color: var(--alert-color);
	border-color: var(--alert-color);
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {}

/* area.login
------------------------------------------------------------------- */
#main div.area.login {
	margin-top: 20px;
}
#main div.area.login .outer {
	width: 540px;
	max-width: 100%;
}
#main div.area.login .box {
	padding: 34px 30px 52px 30px;
}
#main div.area.login .row.field .col > .label {
	font-size: 14px;
	margin-bottom: 5px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	#main div.area.login {
		padding: 0 15px;
	}
}

/* area.regist
------------------------------------------------------------------- */
#main div.area.regist {}
#main div.area.regist .outer {
	width: 750px;
	max-width: 100%;
}
#main div.area.regist .box {
	padding: 34px 30px 52px 30px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	#main div.area.regist {
		margin-top: 0;
		padding: 0 15px;
	}
}

/* area.mode
------------------------------------------------------------------- */
#main div.area.mode {
	margin-bottom: 30px;
}
#main div.area.mode .outer {
	max-width: 100%;
	padding: 0 42px;
}
#main div.area.mode ul.mode {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
}
#main div.area.mode ul.mode > li {
	margin: 0;
}
#main div.area.mode ul.mode > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 13px;
	min-width: 114px;
	height: 48px;
	border: 1px solid var(--border);
	border-radius: 6px;
	border-radius: 6px 0 0 6px;
	font-weight: bold;
	font-size: 12px;
}
#main div.area.mode ul.mode > li + li > a {
	border-left: 0;
	border-radius: 0;
}
#main div.area.mode ul.mode > li:last-child > a {
	border-radius: 0 6px 6px 0;
}
#main div.area.mode ul.mode > li > a:before {
	content: '';
	display: block;
	width: 14px;
	height: 20px;
	margin-right: 6px;
	background-image: url(../img/ico_member.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
}
#main div.area.mode ul.mode > li.group > a:before {
	width: 24px;
	background-size: 24px;
	background-image: url(../img/ico_group.svg);
}
#main div.area.mode ul.mode > li.dept > a:before {
	width: 17px;
	background-size: 17px;
	background-image: url(../img/ico_dept.svg);
}
#main div.area.mode ul.mode > li.graph > a:before {
	width: 19px;
	background-size: 19px;
	background-image: url(../img/ico_graph.svg);
}
#main div.area.mode ul.mode > li.list > a:before {
	width: 21px;
	background-size: 21px;
	background-image: url(../img/ico_list.svg);
}


#main div.area.mode ul.mode > li.current > a {
	background-color: var(--bg-hover);
}

@media screen and (min-width : 651px) {
	#main div.area.mode ul.mode > li > a {
		transition: background-color 0.1s linear;
	}
	#main div.area.mode ul.mode > li > a:hover {
		background-color: var(--bg-hover);
	}
}
@media screen and (max-width : 650px) {}

/* area.tab
------------------------------------------------------------------- */
#main div.area.tab {
	margin-top: 30px;
	margin-bottom: 36px;
}
#main div.area.tab .outer {
	max-width: 100%;
	padding: 0 42px;
}
#main div.area.tab ul.tab {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	width: 100%;
	border-bottom: 1px solid var(--border);
}
#main div.area.tab ul.tab > li {
	margin: 0;
}
#main div.area.tab ul.tab > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	position: relative;
}
#main div.area.tab ul.tab > li.current > a {
	color: var(--main-color);
}
#main div.area.tab ul.tab > li.current > a:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 3px;
	background-color: var(--main-color);
}

@media screen and (min-width : 651px) {
	#main div.area.tab ul.tab > li > a {
		transition: color 0.1s linear;
	}
	#main div.area.tab ul.tab > li > a:hover {
		color: var(--main-color);
	}
}
@media screen and (max-width : 650px) {
	#main div.area.tab .outer {
		padding: 0 15px;
	}
}

/* area.add
------------------------------------------------------------------- */
#main div.area.add {
	margin-bottom: 30px;
}
#main div.area.add .outer {
	max-width: 100%;
	padding: 0 42px;
}
#main div.area.add .box {}
#main div.area.add .row {}
#main div.area.add .row.tab {
	display: flex;
	align-items: center;
}
#main div.area.add .row.tab a.tab {
	width: 220px;
	max-width: 100%;
	height: 50px;
	line-height: 50px;
	white-space: nowrap;
	font-size: 18px;
	font-weight: bold;
	padding-left: 22px;
	border-radius: 6px;
	background-color: var(--box-bg);
	background-image: url(../img/ico_opener.svg);
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 22px;
}
#main div.area.add.opening .row.tab a.tab {
	border-radius: 6px 6px 0 0;
}
#main div.area.add.opened .row.tab a.tab {
	border-radius: 6px 6px 0 0;
	background-image: url(../img/ico_closer.svg);
}
#main div.area.add .row.tab span.desc {
	margin-left: 18px;
}

#main div.area.add .row.entry {
	display: none;
	margin-top: 0;
	padding: 30px 20px 25px 20px;
	background-color: var(--box-bg);
	border-radius: 0 6px 6px 6px;
}
#main div.area.add .row.entry .cols {
	display: flex;
	align-items: stretch;
}
#main div.area.add .row.entry .col {
	display: flex;
	align-items: stretch;
}
/* bulk */
#main div.area.add .row.entry .cols .col.bulk {
	width: 400px;
	flex-shrink: 0;
}
#main div.area.add .row.entry .cols .col.bulk form {
	display: flex;
	align-items: stretch;
}
#main div.area.add .row.entry .cols .col.bulk .field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	width: 100%;
	height: auto;
}
#main div.area.add .row.entry .cols .col.bulk .field > .label {
	margin-bottom: 14px;
}
#main div.area.add .row.entry .cols .col.bulk .field > .value span.prefix {
	display: block;
	margin-left: 14px;
}
#main div.area.add .row.entry .cols .col.bulk .action {
	margin: 0 auto;
	margin-top: auto;
	padding-top: 27px;
}

/* single */
#main div.area.add .row.entry .cols .col.single {
	flex-grow: 1;
	flex-shrink: 10;
}
#main div.area.add .row.entry .cols .col.single .action {
	margin-right: auto;
}


#main div.area.add .row.entry .cols .col + .col {
	margin-left: 20px;
}
#main div.area.add .row.entry .cols .col .box {
	width: 100%;
	padding: 32px 24px;
}
#main div.area.add .row.entry .cols .col .box > *:first-child { margin-top: 0; }
#main div.area.add .row.entry .cols .col .box > *:last-child { margin-bottom: 0; }

#main div.area.add .row.entry .box {
	display: flex;
	flex-wrap: wrap;
	padding: 23px 18px 30px 18px;
	margin: 0;
}

#main div.area.add .row.entry .box .fields {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
#main div.area.add .row.entry .box .field {
	margin: 11px 6px;
	height: 40px;
}
#main div.area.add .row.entry .box .field {
	display: flex;
	align-items: center;
}
#main div.area.add .row.entry .box .field > .label {
	padding-right: 10px;
}
#main div.area.add .row.entry .box .field > .value {
	display: flex;
	align-items: center;
}
#main div.area.add .row.entry .box .field > .value label {
	margin-bottom: 0;
}
#main div.area.add .row.entry .box .field > .value select[name="notice_day"][disabled] {
	opacity: 0;
}
#main div.area.add .row.entry .box .field > .value select + select {
	margin-left: 12px;
}

/* targetgroup */
#main div.area.add .row.entry .box .field.targetgroup span.label {
	display: block;
	max-width: 235px;
	font-size: 12px;
}
#main div.area.add .row.entry .box .field.targetgroup .changelist {
	display: none;
}
#main div.area.add .row.entry .box .field.targetgroup input[type="button"] {
	margin-left: auto;
	width: 70px;
	margin-left: 15px;
}
#main div.area.add .row.entry .box .field.targetgroup input[type="button"][disabled] {
	background-color: var(--inactive-color);
}


#main div.area.add .row.entry .box .action {
	margin: 11px 6px 11px auto;
}
#main div.area.add .row.entry .box .action.full {
	width: 100%;
	text-align: center;
	margin: 0;
	margin-top: 19px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	#main div.area.add {
		margin-top: 0;
		padding: 0 15px;
	}
}

/* area.data
------------------------------------------------------------------- */
#main div.area.data {}
#main div.area.data .outer {
	max-width: 100%;
	padding: 0 42px;
}
#main div.area.data .box {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
#main div.area.data .box.ps.ps--active-x {
	padding-bottom: 19px;
}

/* scroll */
.ps__rail-x {
	width: 100%!important;
	max-width: 100%!important;
	height: 7px!important;
	left: max(100%);
}
.ps__rail-y {
	height: 100%!important;
	max-height: 100%!important;
	width: 7px!important;
	top: max(100%);
}
.ps__rail-x,
.ps__rail-y {
	opacity: 1!important;
	background-color: #EFEFEF;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
	opacity: 1!important;
	background-color: #EFEFEF;
}
.ps__thumb-x,
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
	opacity: 1!important;
	height: 7px;
	background-color: var(--main-bg);
}

.ps__thumb-y {
	width: 7px;
	bottom: 0;
}
.ps__thumb-y,
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
	opacity: 1!important;
	width: 7px;
	background-color: var(--main-bg);
}
.ps__thumb-y {
	width: 7px;
	bottom: 0;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	#main div.area.data {
		margin-top: 0;
		padding: 0 15px;
	}
	#main div.area.data .outer {
		padding: 0;
	}
}

/* area.picker
------------------------------------------------------------------- */
#main div.area.picker {}
#main div.area.picker .outer {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: auto;
	margin: auto;
	max-width: 100%;
	padding: 0 42px;
}
#main div.area.picker .row {
	display: flex;
}
#main div.area.picker .row > .col > *:first-child { margin-top: 0; }
#main div.area.picker .row > .col > *:last-child { margin-bottom: 0; }

#main div.area.picker .row > .col h2 {
	font-size: 18px;
	margin-bottom: 14px;
}

#main div.area.picker .row > .col.from,
#main div.area.picker .row > .col.to {
	width: 430px;
	background-color: var(--list-bg);
	padding: 16px 20px 20px;
}
#main div.area.picker .row > .col.from {}
#main div.area.picker .row > .col.to {}
#main div.area.picker .row > .col.action {
	width: 290px;
	margin-left: 65px;
	margin-right: 65px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#main div.area.picker .row > .col.action button.btn.addlist {
	margin-top: auto;
}
#main div.area.picker .row > .col.action button.btn.removelist {
	margin-top: 28px;
	margin-bottom: auto;
}

#main div.area.picker .box {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
#main div.area.picker .box + .box {
	margin-top: 12px;
}

#main div.area.picker .box.filter {
	padding: 12px 20px;
}
#main div.area.picker .box.filter .field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#main div.area.picker .box.filter .field + .field {
	margin-top: 8px;
}
#main div.area.picker .box.filter input[type="text"] {
	width: 100%;
}

#main div.area.picker .box.picker {
	/* height: 440px; */
	/* overflow-x: hidden; */
	/* overflow-y: auto; */
}
#main div.area.picker .box select {
	width: 100%;
	height: 440px;
	padding: 0;
	border: 0;
	position: relative;
}
#main div.area.picker .box select option {
	height: 42px;
	padding: 11px 16px;
	background-color: #fff;
	position: relative;
}
#main div.area.picker .box select option.even {
	background-color: var(--table-td-bg);
}
#main div.area.picker .box select option:checked,
#main div.area.picker .box select option:focus,
#main div.area.picker .box select option:active {
	background-color: var(--list-bg)!important;
}
#main div.area.picker .box select option:disabled {
	display: none;
}
#main div.area.picker .box select option.unmatch {
	display: none;
}

#main div.area.picker .row.action {
	justify-content: center;
}

#main div.area.picker .box.ps.ps--active-y {
	padding-right: 19px;
}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	#main div.area.picker {
		margin-top: 0;
		padding: 0 15px;
	}
	#main div.area.picker .outer {
		padding: 0;
	}
}

/* area.pager
------------------------------------------------------------------- */
#main div.area.pager {
	margin-top: 30px;
}
#main div.area.pager .outer {
	max-width: 100%;
	padding: 0 42px;
}
div.pager_digest {
	display: block;
	text-align: center;
	margin-bottom: 24px;
}
ul.pager {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}
ul.pager > li {
	margin: 0;
}
ul.pager > li + li {
	margin-left: 8px;
}
ul.pager > li > a,
ul.pager > li > span {
	display: block;
	border: 1px solid var(--border);
	border-radius: 6px;
	background-color: #fff;
	padding: 0 1em;
	min-width: 40px;
	line-height: 38px;
	height: 40px;
	white-space: nowrap;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: var(--inactive-color);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 7px;
}
ul.pager > li.current > span {
	color: var(--main-color);
	background-color: var(--bg-hover);
}
ul.pager > li.prev > a {
	background-image: url(../img/ico_arrow_prev.svg);
}
ul.pager > li.prev > span {
	background-image: url(../img/ico_arrow_prev_off.svg);
}
ul.pager > li.next > a {
	background-image: url(../img/ico_arrow_next.svg);
}
ul.pager > li.next > span {
	background-image: url(../img/ico_arrow_next_off.svg);
}

@media screen and (min-width : 651px) {
	ul.pager > li > a {
		transition: color 0.1s linear, background-color 0.1s linear;
	}
	ul.pager > li > a:hover {
		background-color: var(--bg-hover);
	}
}
@media screen and (max-width : 650px) {
	#main div.area.pager {
		margin-top: 0;
		padding: 0 15px;
	}
	#main div.area.pager .outer {
		padding: 0;
	}
}

/* refresh
------------------------------- */
.refresh {
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-name: refresh;
}
@keyframes refresh {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* modal
------------------------------------------------------------------- */
#modal {
	display: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.5);
}
#modal .outer {
	display: flex;
	width: 100%;
	height: 100%;
}

#modal .box {
	position: relative;
	margin: auto;
	width: 700px;
	max-width: calc(100% - 20px);
	min-height: 310px;
	max-height: 560px;
	padding: 20px;
	padding-top: 60px;
	padding-bottom: 90px;
	border-radius: 6px;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
	background-color: #fff;
	border: 1px solid var(--border);
}
#modal .title {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 16px;
}
#modal .msg {
	width: 100%;
	position: relative;
	max-height: 340px;
	overflow-y: auto;
}
#modal p {
	width: 100%;
	color: var(--color);
	margin: auto;
	font-size: 16px;
}
#modal table {
	width: auto;
	margin: 10px 0 20px;
}
#modal table th,
#modal table td {
	padding: 0.5em 1em;
	background-color: transparent;
	height: auto;
	text-align: left;
	font-size: 16px;
}
#modal table th {
	padding-left: 0;
}
#modal table td {
	padding-right: 0;
}
#modal table td input[type="text"] {
	width: 100%;
}
#modal table tr.separate th,
#modal table tr.separate td {
	padding-top: 1em;
}
#modal table td textarea {
	min-height: 100px;
}
#modal p.error {
	color: var(--alert-color);
}
#modal div.btns {
	display: flex;
	margin-top: 20px;
}
#modal div.btns .btn + .btn {
	margin-left: 20px;
}
#modal a.btn.cancel {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 40px;
	height: 40px;
	background-image: url(../img/ico_cancel.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	background-color: transparent;
}
#modal[data-type="checkbox"] .box {
	height: 550px;
	padding-top: 60px;
	-webkit-overflow-scrolling: touch;
}
#modal[data-type="checkbox"] h2 {
	margin: 0;
	width: 100%;
	margin-bottom: auto;
	font-size: 16px;
	text-align: left;
	padding-left: 50px;
}
#modal[data-type="checkbox"] .changelist {
	width: 100%;
	height: 300px;
	padding-left: 50px;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}
#modal[data-type="checkbox"] .changelist label {
	margin: 0;
	height: 42px;
	padding: 0 8px;
}
#modal[data-type="checkbox"] .changelist .inbox label:nth-child(2n) {
    background-color: var(--table-td-bg);
}
#modal[data-type="checkbox"] .changelist input[type=checkbox] + span.label:before {
	top: 8px;
}
#modal[data-type="checkbox"] .btn.save {
	margin-top: auto;
}

#modal input[type="button"] {}

@media screen and (min-width : 651px) {}
@media screen and (max-width : 650px) {
	#modal[data-type="delete"] .box {
		padding-bottom: 40px;
	}
	#modal table {
		width: 270px;
		margin-left: auto;
		margin-right: auto;
	}
	#modal table th,
	#modal table td {
		padding: 0.25em 1em;
	}
	#modal table th {
		font-size: 14px;
		padding-left: 0;
		padding-right: 0;
	}
	#modal table td {
		font-size: 16px;
		padding-right: 0;
	}
	#modal table td input[type="text"],
	#modal table td textarea {
		font-size: 14px;
	}
	#modal table td input[type="text"] {
		height: 36px;
	}
	#modal table td textarea {
		min-height: 78px;
	}
	#modal div.btns {
		margin-top: 40px;
		flex-direction: column;
	}
	#modal table + div.btns {
		margin-top: 20px;
	}
	#modal div.btns .btn + .btn {
		margin-top: 20px;
		margin-left: 0;
	}
}

/* loading
------------------------------------------------------------------- */
#main,
#dataTable table,
#dataTable .table {
	position: relative;
}
#main:after,
#dataTable table:after,
#dataTable .table:after {
	transition: all 0.1s linear;
}
#main.loading:before,
#dataTable table.loading:before,
#dataTable .table.loading:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.5);
	z-index: 10;
}
#main.loading:after,
#dataTable table.loading:after,
#dataTable .table.loading:after {
	content: '';
	position: absolute;
	top: calc(50% - 13px);
	left: calc(50% - 13px);

	background-color: #025492;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	margin: 2px;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	border: 2px solid #025492;
	border-bottom-color: transparent;
	height: 26px;
	width: 26px;
	background: transparent !important;
	display: inline-block;
	-webkit-animation: rotate 0.75s 0s linear infinite;
	animation: rotate 0.75s 0s linear infinite;
}
@keyframes rotate {
	0% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(180deg) scale(0.6); }
	100% { transform: rotate(360deg) scale(1); }
}

/* error
------------------------------------------------------------------- */
#main div.area.error .outer {
	margin: 50px auto 0;
	width: 800px;
	max-width: calc(100% - 84px);
	padding: 70px 30px;
	text-align: center;
	border: 1px solid var(--form-border);
	background-color: rgba(255,255,255,0.5);
}
#main div.area.error .outer > *:first-child { margin-top: 0; }
#main div.area.error .outer > *:last-child { margin-bottom: 0; }
#main div.area.error .outer p {
	font-size: 20px;
}

@media screen and (max-width : 650px) {
	#main div.area.error .outer {
		margin: 20px auto 0;
		max-width: calc(100% - 40px);
	}
	#main div.area.error .outer p {
		font-size: 16px;
	}
}

/* sync_guide
------------------------------------------------------------------- */
#modal[data-type="sync_guide"] .box {
	max-height: 600px;
	padding-bottom: 20px;
}
#modal[data-type="sync_guide"] .msg {
	max-height: 400px;
}
.sync_guide ol {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 20px;
}
.sync_guide ol > li {
	text-align: left;
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 15px 0;
	border-top: 1px solid var(--border);
}
.sync_guide ol > li h3 {
	font-size: 15px;
	font-weight: normal;
	width: 70%;
	flex-shrink: 0;
	flex-grow: 1;
	margin: 0;
}
.sync_guide ol > li p {
	flex-grow: 1;
	flex-shrink: 1;
	margin-left: auto;
	text-align: right;
}
.sync_guide ol > li p img {}


/* clf
--------------------------------------------------------------------------*/
.clf:before,
.clf:after {
	display: table;
	content: " ";
}
.clf:after {
	clear: both;
}