@import url(../plugin/kickstart/css/tiptip.css);
html{background-color: #666; height: 100%; max-height: 100% !important;}
body{font-size: 0.750em; background-color: #666 !important; height: 100%; font-family: "ヒラギノ角ゴ Pro W3", HiraKakuPro-W3, Osaka,"メイリオ", Meiryo, verdana, "MS UI Gothic", arial, sans-serif !important;}
h1{display: none;}
h2{font-size: 1.250em;}
h3{font-size: 1.125em;}
h3 a{display: block;}
h4{background-color: #808080; padding: 8px; color: #FFF; border-radius: 8px 8px 0 0; margin: 0px; box-shadow: 1px 1px 2px #ddd;}
h4.collapse{cursor: pointer;}
h5{font-size: 1.2em; font-weight: normal; margin:10px;}
h6{}
a img{border-style: none;}
a img:hover{opacity: 0.8; box-shadow: 0px 0px 20px #E7FC56;}
a.button{padding: 5px 10px; cursor: pointer; margin: 0 1px; text-decoration: none; white-space: nowrap; display:inline-block;}
ul {margin: 0;}
ol {padding: 0; margin-left: 20px;}
li {list-style: none;}

button{border: none;padding: 5px 10px; cursor: pointer; margin:0 5px 0 1px;}
button:hover{background-color: #0080DF;}
button.narrow{padding: 2px 10px;}
button.right{margin-right: 10px;}
.btn-disabled{opacity: 0.7;}
p.ui-state-default{	margin: 2px 1px; position: relative; padding: 4px 2px; cursor: pointer; float: left;}
p i{margin: 0 4px;}
.left{float: left;}
.right{float: right;}
.clear{clear: both;}
.tRight{text-align: right;}
.center{text-align: center;}
.none{display: none;}
.nw{white-space: nowrap;}
.il{display: inline;}

.modal {
	display:	none;
	position:   fixed;
	z-index:	1000;
	top:		0;
	left:	   0;
	height:	 100%;
	width:	  100%;
	background: rgba( 225, 225, 225, .5 ) url('loading.png') 
	50% 50% 
	no-repeat;
	}
body.loading {
	overflow: hidden;
	}
body.loading .modal {
	display: block;
	}

dl{margin:0;}
dt{/*margin: 5px 0 0 0;*/ font-size: 0.8em;}
dd{margin-left: 0;}
input{margin: 5px 0; cursor: pointer; max-width: 100%;}
label{cursor: pointer; margin-right:5px;}
textarea{max-width: 100%; height:160px;}

table {width: 100%;}
table tbody {color: #4B4B4B;}
table tbody tr{line-height: 200%;}
table tbody tr:hover{}
/*tbody tr:nth-child(even) {background:#F3F3F3;}*/
/*tbody tr:nth-child(odd) {background:#fff;}*/
/*th{padding: 0px 5px; font-size:0.9em;}*/
th{padding: 0px;font-size:0.9em;}
td{padding: 0px;}
table.tablesorter thead tr .header { background-image: url(../plugin/tablesorter/themes/blue/bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer;}
table.tablesorter thead tr .headerSortDown{background-image: url("../plugin/tablesorter/themes/blue/asc.gif"); }
table.tablesorter thead tr .headerSortUp{background-image: url("../plugin/tablesorter/themes/blue/desc.gif"); }

/*----header----*/
.navbar{ /*position:fixed;*/ top:0; left:0; width:100%; color: #fff; z-index: 5000; background-color: #666;}
.navbar ul {display: inline-block; margin: 0; padding: 0;}
.navbar li {display: inline-block;}
.navbar div.hide-phone{height: 41px;}
.btnMenu{vertical-align: top; margin-top: 5px;}
.btnMenu p{padding: 4px 4px;}
.btnMenu span{padding-right: 5px;}
.btnMenu a{height: 18px;}
#btnMbMenu{font-size: 2em; margin: 5px 10px 0 0; text-decoration: none; color: #D8D8D8;}
#btnMbMenu:hover{cursor: pointer;}
#mbMenu {width: 100%; margin-top: -5px;}
#mbMenu li{display: block; background: #666; border-top: 1px solid #4B4B4B; border-bottom: 1px solid #4B4B4B;}
#mbMenu li:hover{background-color: #A2A2A2; }
#mbMenu li a{display:block; color: #fff; text-decoration: none; padding: 10px; }

.submenu {padding: 0; margin-top:10px;}
.submenu li{margin-bottom: 3px; display: inline-block; text-align: center; vertical-align: top;}
.submenu li button{padding:10px 12px; font-size:1.5em;}
.submenu li div{width: 130px; font-size: 1.0em; margin-top: 2px;}

/*----footer----*/
#footer {background-color: #666; color:#fff; text-align: center; margin:0; bottom: 0; width: 100%;}

/*----チュートリアル----*/
.introjs-overlay{position: fixed !important;}
.introjs-helperLayer{position: fixed !important; opacity: 0.8;}

/*----共通----*/
.contents {}
.slider{height: 300px;}
.info{border-radius: 10px; font-family:fantasy; font-size: 1.2em; padding: 5px 10px; float: left;}
.description{border: 1px dashed #A3A3A3; padding: 20px 10px 10px; margin-top: -10px; margin-bottom:10px;/*width: 98%;*/ background-color: #efefef;}
.descTab{width: 100px; text-align: center; border-top: none !important; z-index: 1; position: relative; top: -1px; float: right; padding:15px 10px 5px; cursor: pointer;}
.desNarrow{/*width: 90%;*/}
.descAlert{background-color: #FFCFCF !important; background-image: none !important;}
#AttAlert,#importAlert{margin-top: 30px; padding: 30px;}
.help:hover{cursor: pointer;}
.loading{background-image: url("../images/loading-l.gif"); background-repeat: no-repeat;background-position: center; width: 100%;min-height : 300px;}
.loading-sub{background-image: url("../images/loading-l.gif"); background-repeat: no-repeat;background-position: center; width: 100%;min-height : 70px;}
.loading-btn{background-image: url("../images/loading-l.gif"); background-repeat: no-repeat;background-position: center;}
.div-header,.div-body{padding: 5px;}
.accordion{height: 100%;}
.ui-accordion .ui-accordion-content{padding: 0 !important;}

.loadingScr{
	width: 100%;
	height: 100%;
	background-color: rgba(84, 84, 84, 0.77);
	position: fixed;
	top: 0;
	left: 0;
}

.setArea{border: 1px solid #C0C0C0;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	border-bottom-right-radius: 9px;
	border-bottom-left-radius: 9px;
	box-shadow: #DDD 3px 3px 3px;
}
/*.detailArea{padding:10px; border:none; border-radius: 0 0 9px 9px;}*/
.detailArea{padding:8px; border:none; border-radius: 0 0 9px 9px; /*height: -webkit-fill-available;*/ height: -webkit-fit-content;}
.detailArea ul{padding-left:18px;}
.detailArea dl dd div{display: inline-block;}
.scrollToTop{margin:10px 0 10px; float:right;}
.scrollToTop a{text-decoration: none;}
/*----サイドメニュー----*/
#sideResist{background-color: #873084; padding: 30px 10px; color: #fff; margin-bottom: 5px; border-radius: 5px;}
#sideResist:hover{background-color: #B418AF;}
#sideResist a{display: block;color: #fff;}
#loginStatus{background-color: #584F3B; padding: 20px 10px; color: #fff; margin-bottom: 5px; border-radius: 5px;}
#loginStatus input[type="text"],#loginStatus input[type="password"],#loginStatus input[type="email"]{width: 100%;}
#swPwFgt:hover{cursor: pointer;}
#sideMenu ul{margin: 0 0 20px 0; padding-left : 0;}
#sideMenu li {background-color: #306287; margin-bottom: 1px; padding: 10px 5px;}
#sideMenu li a{color: #fff; text-decoration: none; display: block;}

table headerSortUp {}

/*----契 約----*/
#ContractFlow p{padding: 6px 10px;}
#ContractFlow div{padding: 6px 10px;}
.flow-now{color: #F00 !important;}

.usMl,.usFx{text-align: right;}
.mlSuccess div{text-align: center;}

/*----home----*/
.eCaption{text-decoration: underline; cursor: pointer;}
.slick-prev, .slick-next{background-color: #ddd !important;}
#usageHistory table{width: 100%;}
#sysinfo table{width: 100%;}
#sysinfo table tbody tr{cursor: pointer;}
.bannerArea{text-align: center; margin-top: 30px;}
.banner{text-align: center; display: inline-block;}
#status li{margin-bottom: 5px;}
.stsHdr{width: 100px; display: inline-block;}
.resBarLabel{position: absolute; padding:5px; left:40%;}
.resBar {height: 27px;}

#modalSysInfo #caption{font-weight:bold;}
#modalSysInfo #postDate{text-align: right; font-size:0.8em;}
#modalSysInfo #comment{width: 100%;}


/*----連絡先一覧----*/
.notRdy{background-color: #FFB0B0 !important;}
#expCsvFrm{display: inline-block; text-shadow: 1px 1px 1px #DDD;}
/*----csv取り込み一覧----*/
#contactList,#sampleContactList{width: 100%; margin: 10px 0;}
.impCk{text-align:center;}

/*----イベント一覧----*/
#eventList, #sampleEventList table {width: 100%;}
#eventList th,#eventList td{padding: 10px 5px;}
#eventList td{cursor: pointer;}
#eventList tr{line-height: 100%;}
#eventList tr.ehdr:hover{background-color: #EEE;}
#eventList tr.eDtl td{padding:10px 40px;}
#eventList .dDate{width:120px; white-space: nowrap;}
#eventList .dHour{width:80px; white-space: nowrap;}
#eventList .oldEvt{background-color: #ddd;}
#eventList .noRec{text-align: center; padding: 30px 0;}
/*
#eventList tr:nth-child(even){background-color: #f5f5f5;}
#eventList tr.ehdr:hover{background-color: #fce2b5;}
*/
#btnEvtDtl {z-index: 10;}
/*----*/
/*
#caption{width: 90%;}
#comment{width: 90%; height: auto;}
*/
#atch{display: inline-flex; padding-left: 10px;}
#atch li{margin-right: 5px;}
#atch i{color:#BD006A; cursor: pointer;}
#atch i:hover{color: #FA75B5;}

.content{/*padding-bottom:3em !important;*/}
#psnList{width: 100%;}
#psnList:not(i){font-size: 0.9em;}
.psnListCNm{display: table-cell;}
.psnListWd{display: table-cell;}
.psnListNr{display: none;}

.unSelected{background-color: #ccc !important;}
.dupErr{background-color: #F77;}

.require{color:#F00; vertical-align: super;}
.remove{cursor: pointer;}
.remove:hover{color: red;}

.attBtnArea li{display: inline; margin-right: 20px;}
#attList{margin: 10px 0;}
#attList th,#attList td.att {text-align: center;}
#attList th.sEvt {padding: 5px 20px;}
#attList td.att{cursor: pointer;}
.att0{color: #0080DF; font-weight: bold;}
.att1{color: #df0000; font-weight: bold;}
.att2{color: #339933; font-weight: bold;}
.att3{color: #ff9900; font-weight: bold;}
.att5{color: #57b65f; font-weight: bold;}
.attDtl{padding:10px; border: none; border-radius: 0 0 9px 9px;}
.attDtl p.attDisp{margin-left: 20px;}
.attArea dt{font-size:1.2em;}
.icsDlArea{padding: 20px 10px;}
.att textarea{
	height: -webkit-fill-available;
	width: -webkit-fill-available;
	}
#attnTxtEdt .ate p{
	/*width:100%;*/
	}
#attnTxtEdt .ate input{
	display:none;
	/*width:100%;*/
	}
#ans span{
	font-size: xx-small;
	}
#ans dd input[name$=Date]{
	width: 6em;;
	}
#attnPrmEdt .ate p{
	/*width:100%;*/
	}
#attnPrmEdt .ate input{
	display:none;
	/*width:100%;*/
	}

.tblCount {margin: 10px 0;}
.tblCount th,.tblCount td {text-align: center;}
.tblCount th.sEvt {padding: 5px 20px;}
.tblCount td{cursor: pointer;}

#upload {width: auto !important;}
#uplConArea{position: absolute; right: 60px;}
#uplConArea i {display: inline-block !important; color: inherit !important;}

/*----送信グループ編集----*/
#gListAll th.no{width: 52px;}
#gListAll th.ed{width: 104px; text-align: center;}
#gListAll th.gn{width: auto;}
#gListAll th.ml,#gListAll th.fx,#gListAll th.ot{width: 66px;}
#gListAll tr{cursor: pointer;}
#sendGpArea ul{padding-left: 5px;}
#sendGpArea li{display: block; float: left;}
#sendGpArea select{margin-right: 10px;}
#sendGpArea ul:after{clear: both;}
#sendGroup {margin-bottom: 5px;}
.dropCon{min-height: 150px !important;}
.nameToGrp{height:100%; cursor: pointer;}

/*----送信----*/
.btnArea{margin-top:10px;}
.btnArea button{margin-top:5px;}
.conListCNm{display: table-cell;}
.conListWd{display: table-cell;}
.conListNr{display: none;}
#allChgArea ul{padding-left: 5px;}
#allChgArea li{display: block; float: left;}
#allChgArea select{margin-right: 10px;}
#allChgArea ul:after{clear: both;}
.mfxSendRcd{font-size: 2em; float: left;}
.btnSendArea{text-align: center;}
#btnSend,#btnTestSend,#btnSendScad{width: 100px; height: 60px; margin-top: 0;}
#uCon #psnList{width: 100%;}
#attNDesc{margin-top: 30px; padding: 30px;}

/*----プレビュー----*/
.sendToArea{padding:10px;}
#prevArea{
	overflow-y: scroll;
	max-height: 200px;
}
#prevArea hr{border: 1px dashed;}
.prevHeader{margin-bottom: 10px;}
.prevHeader dl{margin: 2px 0;}
.prevHeader dt,.prevHeader dd{display: inline-block;}
.prevHeader dt{padding: 2px 4px; margin-right: 2px;}
.prevBody .alert{color: #F00;}
#prevTabs-1,#prevTabs-2{max-height: 270px;}

/*----メールテンプレ編集----*/
#mailTitle{width: 100%;}
#uMlTmpEditArea *{display: block;}
#uMlTmpEditArea input, #uMlTmpEditArea textarea{width: 100%; margin: 0 0 5px;}
#defAleatMsg{margin-left: 10px;}
#insTmpArea {margin-bottom: 3px;}
span.btnInsTmp{display: inline-block !important; padding: 0 5px; cursor: pointer;}

/*----回答----*/
 .subDate { font-size: 0.8em;}
/*----設定----*/
.lbRadio {margin-right: 20px;}

/*----新規----*/
.arrow{text-align: center;}
.arrow i{color: #3ba0e3;}
/*----modal----*/
#modal{display: none;}

.ui-dialog{max-width: 97%;}
.ui-widget{font-family: "ヒラギノ角ゴ Pro W3", HiraKakuPro-W3, Osaka,"メイリオ", Meiryo, verdana, "MS UI Gothic", arial, sans-serif !important;}

/*----ﾌﾟﾛｸﾞﾚｽﾊﾞｰ----*/
.ui-progressbar { position: relative; }
#progressDesc {text-align: center;}
.progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; }

.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31%; }
.col_5  { width: 40%; }
.col_6  { width: 48.0%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

/*---- 画像 ----*/
.imgWrap{width: 200px;height: 80px; overflow: hidden; margin:0 auto;}
.imgWrap img{
	width: 200px;
	height: 80px;
	max-width: none;
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	     -o-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	        transition: all 1s ease;
}
.imgWrap img:hover{width: 220px; height: 88px;}
@media all and (min-width: 768px) and (max-width: 1024px) {
	.grid{max-width: 100%;}
}
@media all and (min-width: 480px) and (max-width: 768px) {
	.grid{max-width: 100%;}
	.btnMenu span{display: none;}
	.psnListNr{display: table-cell; text-align: center;}
	#attList {font-size: 0.8em;}
	#attList .attCNm{display: none;}
	#contactList{font-size:0.8em;}
	.conListCNm{display: none;}
	.conListWd{display: none;}
	.conListNr{display: table-cell; text-align: center;}
}

@media all and (max-width:480px){
	.ui-widget .ui-widget{font-size: 0.9em;}
	button{margin-top:3px;}
	.submenu {padding: 0;}
	.submenu li{margin-bottom: 3px; display: inline-block; text-align: left; vertical-align: top;}
	.submenu li button{padding:5px 7px; font-size:1.0em;}
	.submenu li div{ display: inline-block; font-size: 1.0em; margin-top: 2px;}
	.resBarLabel{left:0;}
	#psnList button{padding: 2px 4px; margin: 0px 2px 0px 1px;}
	.psnListNr{display: table-cell; text-align: center;}
	#contactList{font-size:0.8em;}
	.conListCNm{display: none;}
	.conListWd{display: none;}
	.conListNr{display: table-cell; text-align: center;}
	#attList {font-size: 0.8em;}
	#attList .attCNm{display: none;}
	#btnSend, #btnTestSend{margin-top:0;}
}

.dataContainer{
	position: relative;
}
.dataContainer thead tr{
	/*position: absolute; top:0; left:0;*/
}
.dataContainer thead tr th{text-align: center; }
.dataContent{min-height:80px}
.dataContent2{min-height:80px}

/*追加*/
#setAreaG{
	min-height:300px;
}
#setAreaS,#setAreaE{
	min-height:200px;	
}
#psnList tr{
	cursor:pointer;
}
.fieldDiv{
    padding: 10px;
    border: 1px solid silver;
}
#settingDiv fieldset{
	margin: 15px 0 20px 0;
	background: none;
}
#settingDiv legend{
	background: none;
}
.settingFld{
	margin: 0 !important;
}
.settingFld legend{
	border: 0;
	padding: 0;	
}
.magnifier{
	background: white;
}

	@media screen and (max-width: 610px) {
		.Ptool {
			display: none;
			}
		}

	/*------------------------------------------------------------------------------@media screen
	@media screen and (max-width : 768px) {
		.AdmMgr-header{
			position: fixed;
			}
	}*/

	@media print {
		article, section {
		height:100vh; 
		margin: 0 !important; 
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden;
		}
	}

	section:last-child {
		page-break-after: avoid;
		}

.toggle {
    position: relative;
	}
.field {
    width: 100%;
    padding: 15px;
    border: 0;
    border: 1px solid #e5e5e5;
    font-size: 14px;
	margin-bottom: 10px
	}
.toggle .field {
    padding-right: 80px;
	}
.btn {
    display: flex;
    align-items: center;
	}
.toggle .btn {
    position: absolute;
    right: -4px;
    top: 5px;
    padding: 2px 4px;
    border-radius: 5px;
    background: #e5e5e5;
	}
.btn-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
	}
.btn-label {
    font-size: 18px;
    cursor: pointer;
	}
.toggle .btn-label {
    width: 30px;
    text-align: center;
	}
.noto-serif {
	font-family: 'Noto Serif JP', serif !important;
	}
.roboto {
	font-family: 'Roboto', sans-serif !important;
	}
.noto-sans {
	font-family: 'Noto Sans JP', sans-serif !important;
	}
.open-sans {
	font-family: 'Open Sans', sans-serif !important;
	}
.lato {
	font-family: 'Lato', sans-serif !important;
	}
.merriweather {
	font-family: 'Merriweather', serif !important;
	}
.oswald {
	font-family: 'Oswald', sans-serif !important;
	}
.pacifico {
	font-family: 'Pacifico', cursive !important;
	}
.lobster {
	font-family: 'Lobster', cursive !important;
	}
.amatic {
	font-family: 'Amatic SC', cursive !important;
	}
.patrick-hand {
	font-family: 'Patrick Hand', cursive !important;
	}
.sawarabi-mincho {
	font-family: 'Sawarabi Mincho', serif !important;
	}
.kaushan-script {
	font-family: 'Kaushan Script', cursive !important;
	}