/*
//************************************************************************
	Style Sheet
//************************************************************************
*/
/*******************************************************************************************************************************/
/*                                                                                                                             */
/*  業務管理アプリ(ブラウザ版) デフォルトスタイル                                                                              */
/*                                                                                                                             */
/*******************************************************************************************************************************/
/* ヘッダー */
#headerArea{
	position:relative;
	width:100%;
	height: 35px;
	max-height: 35px;
	min-height: 35px;
	margin:0 auto;
	color:#fff;
	/*padding:8px 0 6px;*/
	padding:0px 0;
	background:rgba(32,80,129, 1);
	border-bottom:1px solid #2e3d54;
	
	/* 上部固定 */
	/*
	position: absolute;
	top:0;
	left:0;
	z-index:1;
	*/
	position: fixed;
	top:0;
	left:0;
	z-index:9999;
}
#headerArea > div{
	padding:0px 5px;
}
#headerArea a{/* ヘッダー内リンク(ログアウトとか) */
	display:inline-block;
	color:#fff;
	margin:0;
	/*
	padding:0;
	*/
	padding:6px 7px;
	cursor:pointer;
	position:relative;
}
#headerArea img{
	display: inline-block;
	margin: 0;
	padding: 0;
	width: auto;
	height: 24px;
}
#headerArea a:hover{
	background:rgba(52,100,149, 1);
	text-decoration:none;
}
/*
	#headerArea .icon-thunks{
		position:absolute;
		top:0;
		left:0;
	}
*/


/*【ヘッダー】 */
.headerFlex-wrap{
	display: flex;
	justify-content: space-between;/* 均等配置 */
	align-items: center;/* 縦位置：中央揃え */
	width:100%;
	height:100%;
	margin: 0;
	padding: 0 !important;
}
.headerFlex-left,
.headerFlex-center,
.headerFlex-right{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 10px;
	display: flex;
	align-items: baseline;/* 縦位置：ベースライン */
	align-items: center;/* 縦位置：中央揃え */
}
	.headerFlex-left{
	}
	.headerFlex-center{
		justify-content: center;
	}
	.headerFlex-right{
		flex-direction: row-reverse;
	}
		.headerFlex-right > li{
			padding: 0 4px;
		}


/* フッター */
/*
#footerArea *{
	text-align:center;
	margin:0 auto;
	
}
#footerArea{
	position:relative;
	width:100%;
	margin:0 auto;
	padding:8px 0;
	color:#707070 !important;
	background:rgba(245,245,245, 1);
	border-top:1px solid #ccc;
	text-align:center;
	margin-top:10px;
}
#footerArea > div{
	padding:0 10px;
	box-sizing: border-box;
}
#footerArea ul.footerList{
	display: block;
	width:100%;
	margin:0 auto 5px;
	text-align:center;
}
#footerArea ul.footerList li{
	display:inline-block;
	margin:0 auto;
	font-size:81.3%;
	text-align:center;
	white-space: nowrap;
}
#footerArea .footerList li:after{
	content: "|";
	margin-left: 10px;
	speak: none;
}
#footerArea .footerList li:last-child:after{
	content: "";
}
#footerArea ul.footerList li a{
	text-decoration:none;
	color:#707070 !important;
}
#footerArea ul.footerList li a:hover{
	text-decoration:underline;
}
*/



/* ヘッダー モバイル用各種担当表table */
/*
.headerMobaTable th,
.headerMobaTable td{
	font-size:75.0%;
	padding:0 2px;
}
*/
/* ツイッター全担当 */
/*
.headerMobaTable tr.qmaxTwitterList{
	position:relative;
	cursor:pointer;
}
.headerMobaTable tr.qmaxTwitterList div{
	display:none;
	position:absolute;
	top:90px;
	right:0px;
	z-index:9999;
	background:rgba(20,20,20,0.8);
	padding:8px;
	width:500px;
}
.headerMobaTable tr.qmaxTwitterList:hover div{
	display:block;
}
.headerMobaTable tr.qmaxTwitterList div span{
	color:#eee;
	line-height:130%;
	font-size:87.5%;
}
*/

/*【ヘッダー】各種リンク集 */
#headerMoreLinkConts{
	position:relative;
}
#headerMoreLinkConts > div{
	display:none;
	position:absolute;
	top:34px;
	left:-55px;
	background:rgba(20,20,20,0.8);
	padding:0px 0;
	width:295px;
	z-index:100;
	max-height:calc(100vh - 50px);
	overflow-x:hidden;
	overflow-y:scroll;
}
#headerMoreLinkConts:hover > div{
	display:block;
}

/*
*/
#headerMoreLinkConts > div li a img{
	height: 14px;
}
#headerMoreLinkConts > div li a{
	display:inline-block;
	padding:9px 14px;
	width:100%;
	color:#fff;
}
/* 区切り用 */
#headerMoreLinkConts > div li.__hr a{
	padding: 9px 2px;
	margin: 0;
	/* border-top: 1px solid rgba(255, 255, 255, 0.3); */
}
#headerMoreLinkConts > div li.__hr a:hover{
	background: transparent;
}


/*【新】ヘッダー名前エリア */
#headerNameConts{
	width: 220px;
	height: 25px;
	margin:auto;
	padding:2px 0;
	/*background:rgba(72,120,169, 1);*/
	background:rgba(255,255,255, 0.1);
	border-radius:3px;
}
#headerNameConts > a div{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-justify-content: center; /* Safari */
	justify-content:         center;
	-webkit-align-items: center; /* Safari */
	align-items:         center;
	width: 100%;
	height: 100%;
}
#headerNameConts > a{
	padding:0;
	margin:0;
	width: 100%;
	height: 100%;
}
#headerNameConts > a div img{
	padding: 0 5px;
	width: auto;
	height: 25px;
}
#headerNameConts > a div p.name{
	padding:0 5px;
	color:#fff;
}
#headerNameConts > a:hover{
	/*background:rgba(255,255,255, 0.3);*/
}

/* 下部バージョン表示 */
#versionView{
	position:absolute;
	bottom:2px;
	right:5px;
	font-size:81.3%;
	color:#aaa;
}


/* body */
#mainContentsArea{
	position:relative;
	/*padding:10px 5px;*/
	height:100%;
	min-height:90%;
	max-height:100%;
	
	/*padding-bottom:10px;*/
	
	/* 固定ヘッダー分ずらす */
	/*
	*/
	margin-top:36px;
}

/* 【ヘッダーステータス】ヘッダー下 ユーザーステータスエリア */
.masterStatusConts{
	position:relative;
	background:rgba(245, 245, 245, 1);
	border-bottom:1px solid #ccc;
	padding:2px 15px;
}
/* 【ヘッダーステータス】名前 */
.masterStatusConts p.name{
	
}
/* 【ヘッダーステータス】権限 */
.masterStatusConts p.authority{
	font-size:87.5%;
	color:#777;
}

 


/* ブラウザ内通知表示エリア */
#floatingInfoArea{
	position:fixed;
	width:250px;
	height:0px;
	top:20px;
	left:0px;
	z-index:10000;
}

/*【ログインページ】全体 */
#top-loginConts{
	position:relative;
	text-align:center;
	background:#fff;
	height:100%;
	background-image: url("../img/login/top01.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	
	padding-top:40px;
}

/*【ログインページ】タイトル文字画像 */
#top-loginConts .top-loginTitleImg{
	width:100%;
	padding:30px 0;
}
#top-loginConts .top-loginTitleImg img{
	margin:0 auto;
	width:190px;
	height:auto;
}
/*【ログインページ】フォーム部 */
#top-loginConts div.top-loginForm{
	position:relative;
	width:85%;
	max-width:420px;
	margin:0px auto;
	padding:20px 20px;
	font-size:125.0%;
	
	background:rgba(255,255,255, 0.6);
	background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.6), rgba(255,255,255,0.6) 4px, rgba(250,250,250,0.6) 0, rgba(250,250,250,0.6) 6px);
	border-radius:10px;
	box-shadow:3px 3px 8px rgba(0,168,255, 0.3);
	
}
/*
#top-loginConts div.top-loginForm:before{
	content:"　";
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
*/

/*【ログインページ】フォーム部 ログインボタン */
#top-loginConts .BT_base{
	width:300px;
	background:rgba(0, 168, 255, 1);
}


/* ログイン用inputタグ */
.logininput{
	border:1px solid #ccc;
	border-radius:5px;
	width:100%;
	max-width:500px;
	height:44px;
	line-height:44px;
	margin:4px auto;
	padding:10px;
}
.logininput:focus{/* 入力中 */
	/*background:rgba(255,255,0,0.1);*/
	background:#fff;
}

/* タイトル 季節別 */
	/* タイトル 正月3が日仕様 */
	#top-loginConts.newyear{
		background-image: url("../img/ui/season/newyear/top.png") !important;
	}
	#top-loginConts.newyear div.top-loginForm{
		background:none;
		box-shadow:none;
	}
	/* タイトル ハロウィーン仕様 */
	#top-loginConts.halloween{
		background-image: url("../img/login/top_halloween.png") !important;
		background-color:rgba(243,152,0, 1);
	}
	/* タイトル 秋仕様 */
	#top-loginConts.autumn{
		padding-top:60px;
		background-image: url("../img/ui/season/autumn/title11.png") !important;
		background-color:rgba(181,115,74, 1);
		background-size: 100% 100%;
	}
	#top-loginConts.autumn div.top-loginForm{
		background:none;
		box-shadow:none;
	}
	/* タイトル 冬仕様 */
	#top-loginConts.winter{
		background-image: url("../img/ui/season/winter/top_winter.png") !important;
		background-size: 100% 100%;
	}
	#top-loginConts.winter div.top-loginForm{
		box-shadow:none;
	}
	/* タイトル 令和仕様 */
	#top-loginConts.reiwa{
		background-image: url("../img/ui/season/reiwa/reiwa.jpg") !important;
		background-size: auto 100%;
	}
	#top-loginConts.reiwa div.top-loginForm{
		box-shadow:none;
	}
	
	/* お正月背景 - 紅白 */
	.body-newyear{
		background-color: #f77;
		background-image:
		repeating-linear-gradient(-90deg, #fff, #fff 100px,transparent 0, transparent 200px);
	}
	.body-newyear .lobbyTable td{
		background: rgba(255,255,255, 0.4);
	}





/* 【共通】トップメニュー */
.topMenuList{
	background:rgba(245, 245, 245, 1);
	border-bottom:1px solid #ccc;
	padding:0px 15px;
}
.topMenuList ul{
	width:100%;
}
.topMenuList li{
	position:relative;
	display:inline-block;
	float:left;
	font-size:87.5%;
	margin:0;
	padding:0;
}
.topMenuList li.right{
	float:right;
}
.topMenuList li a{
	display:block;
	margin:0;
	padding:10px 20px;
	color:#3572b0;
}
.topMenuList li a:hover{
	background:rgba(230,230,230, 0.9);
	text-decoration:none;
}
.topMenuList li.current a{
	font-weight:bold;
	color:#000;
}
.topMenuList li.current:before,/* 選択中の▲ */
.topMenuList li.current:after{/* 選択中の▲ */
	border: 8px solid transparent;
	border-style: outset outset solid;
	content: "";
	height: 0;
	left: 50%;
	margin-left: -10px;
	overflow: hidden;
	position: absolute;
	width: 0;
}
.topMenuList li.current:before{/* 選択中の▲ */
	border-bottom-color: #ccc;
	bottom: -0px;
}
.topMenuList li.current:after{/* 選択中の▲ */
	border-bottom-color: #fff;
	bottom: -1px;
}



/* 新着アイコンピカピカ */
@keyframes newMessageInfo-anim{
	  0%{ background:rgba(255,0,0, 0.7); }
	100%{ background:rgba(255,0,0, 0.5); }
}
@-webkit-keyframes newMessageInfo-anim{
	  0%{ background:rgba(255,0,0, 0.7); }
	100%{ background:rgba(255,0,0, 0.5); }
}
@-moz-keyframes newMessageInfo-anim{
	  0%{ background:rgba(255,0,0, 0.7); }
	100%{ background:rgba(255,0,0, 0.5); }
}
@-ms-keyframes newMessageInfo-anim{
	  0%{ background:rgba(255,0,0, 0.7); }
	100%{ background:rgba(255,0,0, 0.5); }
}
/* 新着アイコン */
.newMessageInfo{
	position:absolute;
	top:2px;
	left:0px;
	padding:3px 5px;
	color:#fff;
	font-size:87.5%;
	border-radius:15px;
	background:rgba(255,0,0, 0.7);
	
	display:none;
	
	animation-name: newMessageInfo-anim; /* ｱﾆﾒｰｼｮﾝ名 */
	animation-duration: 0.7s; /* 実行時間 */
	animation-iteration-count:infinite; /* 実行回数(infinite:無限) */
	animation-direction:alternate; /* alternate:反復する */
	
	-webkit-animation-name: newMessageInfo-anim; /* ｱﾆﾒｰｼｮﾝ名 */
	-webkit-animation-duration: 0.7s; /* 実行時間 */
	-webkit-animation-iteration-count:infinite; /* 実行回数(infinite:無限) */
	-webkit-animation-direction:alternate; /* alternate:反復する */
	
	-moz-animation-name: newMessageInfo-anim;
	-moz-animation-duration: 0.7s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:alternate; /* alternate:反復する */
	
	-ms-animation-name: newMessageInfo-anim;
	-ms-animation-duration: 0.7s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction:alternate; /* alternate:反復する */
}

/* 未読メッセージ溜まってきたときの表示 */
@keyframes newMessageEmphasisMsg-anim{
	  0%{ opacity: 1.0; }
	 60%{ opacity: 1.0; }
	100%{ opacity: 0.1; }
}
@-webkit-keyframes newMessageEmphasisMsg-anim{
	  0%{ opacity: 1.0; }
	 60%{ opacity: 1.0; }
	100%{ opacity: 0.1; }
}
@-moz-keyframes newMessageEmphasisMsg-anim{
	  0%{ opacity: 1.0; }
	 60%{ opacity: 1.0; }
	100%{ opacity: 0.1; }
}
@-ms-keyframes newMessageEmphasisMsg-anim{
	  0%{ opacity: 1.0; }
	 60%{ opacity: 1.0; }
	100%{ opacity: 0.1; }
}
.newMessageEmphasisMsg{
	position: absolute;
	top: 80%;
	left: 0;
	background: rgba(255,255,255, 0.95);
	border-radius: 8px;
	padding: 5px 8px;
	z-index: 100;
	font-size: 115%;
	word-break: keep-all;
	box-shadow:3px 3px 6px 1px rgba(20,20,20,0.5);
	
	animation:          newMessageEmphasisMsg-anim  1.3s ease-in-out 0s infinite alternate;
	-ms-animation:      newMessageEmphasisMsg-anim  1.3s ease-in-out 0s infinite alternate;
	-webkit-animation: "newMessageEmphasisMsg-anim" 1.3s ease-in-out 0s infinite alternate;
	-moz-animation:     newMessageEmphasisMsg-anim  1.3s ease-in-out 0s infinite alternate;
}
/* 未読全読み時に出るメッセージ */
#midokuAllClearMessage{
	text-align: center;
	padding: 30px 0;
}
/* 未読全読み時に出るメッセージ非表示用のクラス(付け外しする) */
#midokuAllClearMessage.hidden{
	display: none;
}

/* エラーメッセージ(主にログイン失敗) */
.messeError{
	position:relative;
	padding:15px;
	padding-left:55px;
	background:rgba(255,255,255,1);
	border:1px solid #d04437;
	border-radius:5px;
	margin:20px auto 30px;
	text-align:center;
}
.messeError:before{/* 左の塗りつぶし部 */
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	content: '';
	width:40px;
	background:rgba(208, 68, 55, 1);
}
.messeError:after{/* 左の塗りつぶし部 */
	position: absolute;
	left: 0;
	top: 0;
	content: "\002716";// ×
	color:#fff;
	width:40px;
	height:56px;
	line-height:56px;
}

/* 個人設定ウィンドウ */
#mySettingWindow{
	
}
#mySettingWindow h1{/* タイトル */
	font-size:143.8%;
}

#mySettingWindow div.ul{
	display:inline-table;
	margin:0 auto;
	width:100%;
}
#mySettingWindow div.ul:after{/* クリアフィクス */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#mySettingWindow div.li{
	display: table-cell;
	width:auto;
	height:60px;
	vertical-align: middle;
}
#mySettingWindow div.li.a{
	width:30%;
	text-align:left;
}
#mySettingWindow div.li.c{
	width:15%;
	margin:0 auto;
}
#mySettingWindow div.li input[type="file"]{
	width:200px;
}
#mySettingWindow .button,
.button{
	display:inline-block;
	padding:8px 15px;
	border:none;
	border-radius: 4px;
	color: #fff;
	font-size:112.5%;
	font-weight:bold;
	text-decoration: none;
	text-align:center;
	line-height:15px;
	background:rgba(53, 114, 176, 1);
	cursor:pointer;
	user-select:none
}
.button.disable{
	background:rgba(80, 80, 80, 1);
	cursor:default;
}
#mySettingWindow a.disable,
a.disable{
	background:rgba(80, 80, 80, 1);
}

/* 各ページの上部タイトル */
.pageTitle{
	padding:20px 0 10px;
	font-size:106.3%;
}

/* [工事中] の上部おしらせ */
.maintenanseInfo{
	position:fixed;
	top:20px;
	margin:0;
	padding:5px 0;
	width:100%;
	color:#333;
	text-align:center;
	z-index:99999;
	background:rgba(255,255,0, 0.8);
	pointer-events: none;
}
/* [工事中] の上部おしらせ */
.maintenanseInfo.red{
	background:rgba(255,0,0, 0.8);
}

/* ★ */
#mainContents,
#mainContentsChat{
	width:90%;
	height:100%;
	margin:0 auto;
	padding:0px 5px;
	font-size:125.0%;
	overflow-x:none;
	overflow-y:auto;
	
	width:calc(100% - 10%);
	height:calc(100% - 90px);
	padding:10px 5%;
}
#mainContentsChat{
	position:relative;
	width:100%;
	height:100%;
	padding:0;
	
	/*
	display:table;
	*/
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction:row;
	overflow-y:hidden;
}

/* チャット本文エリア */
#chatContents{
	width:100%;
	height: calc(100% - 252px);
	
	overflow-x:hidden;
	overflow-y:scroll;
}
#chatContents > div{
	width:100%;
}
#chatContents.noInput{
	height: calc(100% - 140px);
}

/* メンバーページ用Table */
.peopleTable{
	width:100%;
	max-width:100%;
	margin:0 auto;
}
.peopleTable tr{
	width:100%;
}
.peopleTable tr:hover{/* 個人クリック */
	cursor:pointer;
}
.peopleTable tr:first-child{/* タイトルtrはクリック出来ないからね */
	cursor:default;
}

.peopleTable tr td{
	/*border-bottom:1px solid rgb(239,239,239);*/
	border-bottom:1px solid rgb(219,219,219);
	padding:10px 10px 6px;
	font-size:81.3%;
	vertical-align:middle;
	width:20%;
}
.peopleTable tr:first-child td{/* 一番上の書き込み */
	/*border-top:1px solid rgb(239,239,239);*/
	border-top:1px solid rgb(219,219,219);
	white-space: nowrap;
}

.peopleTable td.right{
	text-align:right;
}
.peopleTable td.msg{/* 本文 */
	position:relative;
	width:auto;
	line-height:160%;
	/*word-break:break-all;*/
}
.peopleTable td.msg span.filesize{/* ファイルサイズ */
	color:#aaa;
	font-size:87.5%;
}
.peopleTable td.nameConts{/* ニックネーム */
	position:relative;
	padding-left:38px;
	text-align:left;
	
	width:100px;
	min-width:100px;
	max-width:100px;
	
	vertical-align:top;
	padding-top:10px;
	
	color:rgb(153, 153, 153);
	/* はみ出る分の対策 */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}

.peopleTable td.nameConts img{/* プロフィール画像 */
	position:absolute;
	top:5px;
	left:8px;
	/*
	margin-top:-12.5px;
	top:50%;
	*/
}



.peopleTable .mydata,/* 自分の書き込み */
.chatTable .mydata{/* 自分の書き込み */
	background:rgb(240,245,250);
}

.peopleTable .time,/* 書き込み時間 */
.chatTable .time{/* 書き込み時間 */
	position:absolute;
	bottom:2px;
	right: 4px;
	
	padding:0;
	font-size:62.5%;
	color:rgb(200,200,200);
}

.peopleTable tr:hover td{
	background:rgba(230,230,230, 0.9);
}
.peopleTable td.trlink{
	cursor:pointer;
}
.peopleTable tr.peopleTable-title td{/* 項目名部だけhoverの色替えを無効化する */
	background:none;
}

/* 新UI */
div.chatTable{
	position:relative;
	width:100%;
	max-width:calc(100% - 20px);
	/*margin:0px auto;*/
	/*margin-right:10px;*/
	margin:0px 10px;
	margin-bottom:15px;
	padding:3px 0px 5px;
	background:rgb(246,246,246);
	/*border:2px solid #aaf;*/
	border-radius:20px 0 0 0;
	/*z-index:10;*/
}
div.chatTable .chatTableTd{/* td */
	display:table-cell;
	width:100%;
	font-size:81.3%;
	padding:8px 10px 20px;
	vertical-align:middle;
	/*border-bottom:1px solid rgb(219,219,219);*/
}
div.chatTable:first-child .chatTableTd{/* 一番上の書き込み */
	/*border-top:1px solid rgb(219,219,219);*/
}
div.chatTable .nameConts{/* ニックネーム上部 */
	position:relative;
	text-align:left;
	vertical-align:top;
	
	margin:0;
	padding:0;
	padding-top:5px;
	padding-left:10px;
	padding-bottom:20px;
	width:110px;
	min-width:110px;
	max-width:110px;
	
	color:rgb(153, 153, 153);
}
div.chatTable .nameConts p.name{/* 名前 */
	display:inline-block;
	margin:0;
	padding:0;
	padding-left:5px;
	padding-top:6px;
	vertical-align:top;
	font-size:81.3%;
	
	width:80px;
	min-width:80px;
	max-width:80px;
	/* はみ出る分の対策 */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}
div.chatTable .nameConts img{/* プロフィール画像 */
	display:inline-block;
	background:rgba(255,255,255,0.05);
}
div.chatTable .nameConts p.nickname{/* 二つ名 */
	position:absolute;
	top:0px;
	left:40px;
	margin:0;
	padding:0;
	font-size:62.5%;
	
	/* はみ出る分の対策 */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}

/* 返信ある時に線を出す(元メッセージ用) */
/*
div.chatTable.originReplyLine:after{
	content:" ";
	display:inline-block;
	width:4px;
	height:40px;
	background:rgb(153,153,153);
	position:absolute;
	bottom:-20px;
	left:15%;
	z-index:-1;
}
div.chatTable.originReplyLine:before{
	content:" ";
	display:inline-block;
	width:4px;
	height:40px;
	background:rgb(153,153,153);
	position:absolute;
	bottom:-20px;
	right:40px;
	z-index:-1;
}
*/

/* チャットエリア固定された分 */
div.chatTable.pinTweetConts{
	border-radius:0;
	padding:0;
	background:rgb(230,235,255);
}
div.chatTable.pinTweetConts .chatTableTd{
	/*padding-bottom:0;*/
	padding-top:7px;
}
/* 「固定ツイート」の文字 */
.pinTweet{
	font-size:75.0%;
	color:#999;
}

/* 固定ツイート(システムメッセージ) */
div.chatTable.pinTweetConts-System{
	background:rgb(230,255,235);
}

/* 重要 枠部分 */
div.chatTable.important{
	border:2px solid #f00;
	box-sizing:border-box;
	padding-top:9px;
}
/* 重要 のれん部分 */
div.chatTable > div.important{
	position:absolute;
	top:0;
	left:0;right:0;
	margin:auto;
	background:#f00;
	color:#fff;
	width:50px;
	font-size:87.5%;
	font-weight:bold;
	text-align:center;
	padding:2px;
	border-radius:0 0 4px 4px;
}



/*
.nicknameBtarea{
	position:absolute;
	width:100%;
	padding:0px 0 0px;
	bottom:-1px;
	z-index:50;
}
.nicknameBtarea ul{
	width:100%;
}
.nicknameBtarea a{
	font-size:75.0%;
	text-decoration:none;
}
.nicknameBtarea li{
	float:left;
	text-align:center;
	padding:0 5px 0 18px;
}
*/



/* 返信 承認 ボタン群 */
.responseArea{
	position:absolute;
	width:100%;
	padding:0px 0 0px;
	left:5px;
	bottom:2px;
}
.responseArea ul{
	width:100%;
}
.responseArea li{
	float:left;
	margin:0;
	padding:0;
	text-align:center;
	margin-right:10px;
	
	/* ボタンにする */
	display:inline-block;
	background:rgba(230,230,230, 0.9);
}
.responseArea li:hover{
	background:rgba(240,240,240, 0.9);
}
.responseArea li:active{
	background:rgba(220,220,220, 0.9);
}
.responseArea li a{
	font-size:75.0%;
	display:block;
	padding:3px 20px;
	margin:0;
	text-align:left;
	color:rgba(53, 114, 176, 1);
	text-decoration:none;
}
.responseArea li a.current{/* 選択中 */
	color:rgba(220,220,220, 1);
	background:rgba(53, 114, 176, 0.9);
}


/*
.nicknameBtarea:before{
	width:100%;
	
	content:" ";
	display:block;
	margin:4px auto;
	height:2px;
	background: -webkit-gradient( linear, left top, right top, from(#f8f8f8),to(#ddd));
	background: -moz-linear-gradient(left, #f8f8f8, #ddd);
	background: linear-gradient(to left, #f8f8f8 0%, #ddd 100%);
}
*/

/* 日付変更線 */
.chatTimeZone{
	position:relative;
	width:100%;
}
.chatTimeZone p{
	text-align:center;
	color:#999;
	font-size:81.3%;
	background:#fff;
	
	width:150px;
	
	margin:0 auto 13px;
	padding:3px 0;
}
.chatTimeZone:before{
	content:" ";
	display:inline-block;
	width:100%;
	height:1px;
	background:#bbb;
	position:absolute;
	top:50%;
	left:0;
	z-index:-1;
}

div.chatTable .msg{/* 本文 */
	position:relative;
	vertical-align:top;
	width:100%;
	line-height:160%;
	padding-left:0;
	padding-right:10px;
	word-break:break-all;
	
	overflow-wrap: break-word;
	max-width: 300px;/* 300に意味はない ないとなぜかoverflow-wrapが動かない */
}
div.chatTable .msg span.msgRemainder,/* 本文 折りたたみ部 */
div.chatTable .msg span.msgPartView{/* 本文 折りたたみ部 */
	font-size:100%;
	line-height:160%;
	width:100%;
	/*color:#a00;*//* test */
	overflow-x:none;
	overflow-y:none;
}
div.chatTable .msg span.msgRemainder{/* 本文 折りたたみ部 初期値消す */
	overflow:auto;
	display:none;
}
div.chatTable .msg h1{/* 本文 折りたたみ部 開閉リンク */
	/*display:inline-block;*/
	text-decoration:underline;
	cursor:pointer;
	
	font-size:100%;
	padding:5px 0;
	border-top:1px dashed #bbb;
	/*
	position:absolute;
	bottom:8px;
	left:0px;
	*/
}


.chatTable.mydata{/* 自分の書き込み */
	background:rgb(240,245,250);
}
.chatTable .msg .filesize{/* 添付ファイルサイズ */
	color:#aaa;
	font-size:87.5%;
}
.chatTable .msg .img-musimegane{/* 虫眼鏡 */
	display: inline-block;
	text-decoration: underline;
}

.chatTableTd .msgRewrite{/* 編集マーク */
	position:absolute;
	top:8px;
	left:-18px;
	/*
	top:30px;
	right:2px;
	*/
}
.chatTableTd .msgRewrite .edittime{/* 編集時間 */
	display:none;
	background:rgba(0,0,0, 0.7);
	color:#fff;
	padding:3px;
}
.chatTableTd .msgRewrite:hover .edittime{/* 編集時間 */
	display:block;
}
/* 削除済みのメッセージ */
.chatTable.deleted{
	background:rgba(200,200,200, 255);
}
/* 削除済みのメッセージです */
.chatTable .deletedMsg{
	position: absolute;
	top: 0;
	left: 10px;
	right: 0;
	margin: auto;
	color: #f00;
}
/* リプライ開閉ボタン */
.replyOpenBT{
	display:inline-block;
	position:absolute;
	top:-32px;
	right:100px;
	margin:0 auto;
	margin-left:25px;
	width:120px;
	padding:2px 0;
	text-align:center;
	color:#777;
	background:rgba(230,230,245, 255);
	border-radius:30px 30px 0 0;
	font-size:81.5%;
}
/* リプライデータ */
.chatTable.reply{
	margin-left:auto;
	margin-right:10px;
	/*background:rgba(0,255,0, 0.5);*/
	width:85%;
	max-width:85%;
	padding:0;
	border-radius:0 0 0 20px;
	z-index:auto;
}
.chatTable.reply .msg{
	/*padding:5px 0 2px;*/
	padding-bottom:0;
	line-height:120%;
}
.chatTable.reply .nameConts{/* ニックネーム上部 */
	padding-bottom:0;
}

.chatTable.reply:before{/* 接続線 */
	content:" ";
	display:inline-block;
	width:2px;
	height:40px;
	background:rgb(153,153,153);
	/*
	background: -webkit-gradient( linear, left top, left bottom, from(#f8f8f8),to(#ddd));
	background: -moz-linear-gradient(left, #f8f8f8, #ddd);
	background: linear-gradient(to left, #f8f8f8 0%, #ddd 100%);
	*/
	position:absolute;
	top:-20px;
	left:22px;
	z-index:-1;
}

/* Enterで送信 */
/*
.msgSendCaution{
	position:absolute;
	top:-12px;
	left:0;
	color:#ddd;
	font-size:14px;
}
*/


/* 返信対象メッセージエリアピカピカ */
@keyframes replyMessageArea-anim{
	  0%{ background:#9dbcfa; }
	100%{ background:#7e9fe4; }
}
@-webkit-keyframes replyMessageArea-anim{
	  0%{ background:#9dbcfa; }
	100%{ background:#7e9fe4; }
}
@-moz-keyframes replyMessageArea-anim{
	  0%{ background:#9dbcfa; }
	100%{ background:#7e9fe4; }
}
@-ms-keyframes replyMessageArea-anim{
	  0%{ background:#9dbcfa; }
	100%{ background:#7e9fe4; }
}

.replyMessageArea{
	animation-name: replyMessageArea-anim; /* ｱﾆﾒｰｼｮﾝ名 */
	animation-duration: 0.7s; /* 実行時間 */
	animation-iteration-count:infinite; /* 実行回数(infinite:無限) */
	animation-direction:alternate; /* alternate:反復する */
	
	-webkit-animation-name: replyMessageArea-anim; /* ｱﾆﾒｰｼｮﾝ名 */
	-webkit-animation-duration: 0.7s; /* 実行時間 */
	-webkit-animation-iteration-count:infinite; /* 実行回数(infinite:無限) */
	-webkit-animation-direction:alternate; /* alternate:反復する */
	
	-moz-animation-name: replyMessageArea-anim;
	-moz-animation-duration: 0.7s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:alternate; /* alternate:反復する */
	
	-ms-animation-name: replyMessageArea-anim;
	-ms-animation-duration: 0.7s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction:alternate; /* alternate:反復する */
}
.replyMessageArea .nameConts p.name,
.replyMessageArea .nameConts p.nickname{
	color:#fff;
}


/* 返信たち */
.replysMsgArea{
	position:relative;
	
	/*
	z-index:12;
	*/
}
.replysMsgArea.scroll{
	max-height:300px;
	overflow-y:auto;
}

/* 特殊部屋 そのメッセージのルーム名 */
.roomName-sp{
	width:95%;
	max-width:95%;
	margin:0px auto;
	margin-right:10px;
	
	font-size:87.5%;
	color:#777;
	
	/* はみ出る分の対策 */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
	
}
.roomName-sp :hover{/* その部屋へ飛べるよう */
	color:#555;
}
.roomName-sp a{/* その部屋へ飛べるよう */
	text-decoration:none;
}

/* Good&New専用 */
.goodnewConts{
	float:left;
	width:100px;
}


/* Rooms用Table */
.lobbyTable{
	/*table-layout:fixed;*/
	width:100%;
	margin:0 auto 40px;
	
}
.lobbyTable tr{
	width:100%;
}
.lobbyTable tr:hover td{
	background:rgba(230,230,230, 0.9);
}
.lobbyTable tr td{
	position:relative;
	border-bottom:1px solid #ccc;
	padding:15px;
	font-size:93.8%;
	white-space: nowrap;
}
.lobbyTable td.right{
	text-align:right;
}
.lobbyTable tr.lobbyTable-title td{/* 項目名部だけhoverの色替えを無効化する */
	background:none;
}

/* form aリンク */
.lobbyTable form a{
	color:rgba(53,114,176, 1);
}
.lobbyTable form a:hover{
	cursor:pointer;
	text-decoration:underline;
}
.lobbyTable td.trlink{
	cursor:pointer;
}

/* タイムラインテーブル(自分宛てメッセージ) */
/*
.timelineTable tr td{
	padding:6px 8px;
	font-size:75.0%;
}
*/


/* プライベートアイコン */
.room_private{
	
	
}

/* プロジェクト概要 */
.projectDiscriptoin{
	font-size:87.5%;
	color:#777;
	padding-left:6px;
}


/* ルーム内画像表示調整用 */
.uploadimg{
	width:50%;
	min-width:100px;
	max-width:260px;
	height:auto;
	padding-bottom:10px;
}
.uploadimg img{
	max-width: 260px;
	height: auto;
}
.uploadimg object{
	width:100%;
	height:auto;
}



/*【ルーム内】 チャットエリア */
#room-projectArea{
	/*float:left;*/
	/*
	display:table-cell;
	*/
	
	flex: 1;/* width:auto; をFlexで活かす */
	
	vertical-align: top;
	
	/*width:auto;*/
	width:100%;
	height:100%;
	position:relative;
	top:0;
	left:0;
	/*z-index:10;*/
}
/*【ルーム内】 チャットエリア下部 過去ログとかのエリア */
#room-projectArea .projectStatusBar{
	text-align:center;
	padding:10px 0;
	margin:0 auto;
	background:rgba(245, 245, 245, 1);
}
/*【ルーム内】チャットメッセージフォームエリア */
#id_chatform{
	position:relative;
	
	border:1px solid #ccc;
	
}

/*【ルーム内】ルーム一覧エリア */
#room-roomsArea{
	/*float:left;*/
	/*
	display:table-cell;
	*/
	
	vertical-align: top;
	position: relative;
	top:0; left:0;
	width:220px;
	min-width:220px;
	height:calc(100% - 70px);
	
	overflow-x:hidden;
	overflow-y:scroll;
	
	resize:horizontal;/* 横方向リサイズ可 */
}
#room-roomsArea li{/* ルーム名 */
	position:relative;
	/* はみ出る分の対策 */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
	
	padding:8px 0;
	padding-left:10px;
	padding-right:5px;
	
	font-size:87.5%;
	font-size:81.3%;
	/*background:rgba(0,255,0, 0.1);*/
	cursor:pointer;
}
#room-roomsArea li.current{/* 今いるルーム */
	font-weight:bold;
	background:rgb(230,235,250);
}
#room-roomsArea li:hover{/* ルーム名 */
	background:rgba(230,230,230, 0.9);
}
#room-roomsArea li a{
	text-decoration:none;
}
#room-roomsArea h1{/* 「ルーム一覧」見出し */
	margin:0 auto;
	padding:10px 0;
	font-size:106.3%;
	padding-left:10px;
	border-bottom:1px solid rgb(200,200,200);
}
#room-roomsArea h1.emboss{/* 「ルーム一覧」見出し 強調ver */
	background:rgba(240,240,240, 1);
	font-weight:bold;
}
#room-roomsArea h2{/* ルームカテゴリ名 */
	margin:0;
	padding:11px 0;
	padding-left:5px;
}
#room-roomsArea li img.liIcon{/* li内 名前の横のアイコン */
	display:inline-block;
	vertical-align:bottom;
	margin-right:4px;
}


/*【ルーム内】特別部屋リスト */
ul#room-spRoomList{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;/* 折り返す */
	justify-content: space-around;/* 均等配置 x */
	align-content: space-around;/* 均等配置 y */
	width:100%;
}
ul#room-spRoomList li{
	width:44%;
	min-width:44%;
	margin:4px auto;
	padding:0;
}
ul#room-spRoomList li a{
	display:inline-block;
	width:calc(100% - 8px);
	padding:5px 4px;
	padding-right:0;
	background:rgba(190,210,240, 1);
	border-radius:5px;
	color:#555;
	font-weight:bold;
}
ul#room-spRoomList li{
	padding:0;
}
ul#room-spRoomList li:hover{
	background:transparent;/* 打ち消す */
}



/*【ルーム内】メンバーエリア */
#room-membersArea{
	/*float:left;*/
	display:table-cell;
	vertical-align: top;
	
	position: relative;
	/*width:15%;*/
	width:150px;
	max-width:150px;
	
	/*max-width:200px;*/
	/*margin-left:18px;*/
	
	height:100%;
	overflow-y:none;
}

/*#room-membersArea ul.tabs{*//* 「メンバー一覧」 */
ul.tabs{/* 「メンバー一覧」 */
	position: relative;
	top:0px;
	left:0px;
	width:100%;
}
ul.tabs li{/* 「メンバー一覧」 */
	display: block;
	float: left;
	text-align: center;
	width: 50%;
	text-decoration:none;
	
	color:#000;
	/*padding:12px 0;*/ /*文字ver*/
	padding:6px 0; /*画像ver*/
	font-size:106.3%;
	border-bottom:1px solid rgb(200,200,200);
	cursor:pointer;
	/* はみ出る分の対策 */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}
ul.tabs li:hover{
	background:rgba(230,230,230, 0.9);
}
ul.tabs li.select{
	background:rgb(240,245,250);
}
ul.tabs li img{/* 画像ver */
	width:auto;
	height:29px;
	margin:0 auto;
}

/* タブコンテンツ中身 */
.tabContens{
	position:relative;
}
.tabContens > div{
	display:none;
}
.tabContens > div.select{
	display:block;
}
.tabContens li{
	position:relative;
	padding:6px 0;
	padding-left:5px;
	/* はみ出る分の対策 */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}
.tabContens li:hover{
	background:rgba(230,230,230, 0.9);
}
.tabContens li div{
	display:table-cell;
	vertical-align:middle;
	font-size:87.5%;
}

/* メンバーメニュー (マイトークの開始、二つ名の設定) */
.tabContens li.memberMenuButtonConts{
	overflow:visible;
}
.tabContens li div.memberMenu{
	display:none;
	position:absolute;
	width:100%;
	top:23px; left:0px;
	z-index:9999;
	background:rgba(245, 245, 245, 1);
	/*border:1px solid #333;*/
}
/* メンバーメニュー 各項目 */
.memberMenu{
	padding:5px 0;
}
.memberMenu h1{
	padding:7px 4px;
	font-size:87.5%;
}
.memberMenu h1:hover{
	background:rgb(210,210,255);
}

/* 【新】プロジェクト内タイトルエリア */
#chatTitleArea{
	position:relative;
	width:calc(100% - 20px);
	padding:5px 10px;
	
	background:rgba(240,240,240, 1);
	border-bottom: 1px solid #ccc;
	
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	
}
/*【新】名前は右揃えで横に並べたい */
#chatTitleArea #chatTitleElem{
	margin-right: auto;
	width:100%;
}
#chatTitleArea #chatTitleElem span.title{
	/* タイトル */
	display:inline-block;
}
#chatTitleArea #chatTitleElem span.description{
	/* 説明 */
	display:inline-block;
	font-size:75.0%;
	color:#888;
	width:100%;
}
/* 【新】プロジェクト内タイトルエリア タイトル文字 */
/* 名前の横のアイコン */
#chatTitleArea #chatTitleElem img.liIcon{
	display:inline-block;
	vertical-align:bottom;
	margin-right:4px;
}
/* 【新】ルーム内メンバーリスト表示ボタン */
.bt_memberList{
	position:relative;
	cursor:pointer;
	padding:4px 8px;
	background:rgba(250,250,250, 1);
	background:rgba(190,210,240, 1);
	/*border:1px solid #f00;*/
	border-radius:15px;
	color:#555;
	font-size:87.5%;
	font-weight:bold;
	margin:0 10px 0 1px;
}
/* 全面黒バック */
.bt_memberList-conts{
	position:fixed;
	top:0;
	left:0;
	z-index:9998;
	
	display: -webkit-flex;
	display: flex;
	
	width:100%;
	height:100%;
	background:rgba(0,0,0, 0.3);
	
	visibility:hidden;
	opacity: 0;
	filter: alpha(opacity=0);
}
/* リストウィンドウ 本体 */
.bt_memberList-conts > div{
	display:block;
	position:relative;
	
	width:auto;
	height:80%;
	max-height:600px;
	overflow-y:scroll;
	margin:auto;
	
	background:#fff;
	border-radius:5px;
	box-shadow:3px 3px 6px 1px rgba(20,20,20,0.5);
	z-index:9999;
}
/* リストウィンドウ メンバーリスト群 */
.bt_memberList-conts .bt_memberList-conts-list{
	display: -webkit-flex;
	display: flex;
	overflow-y:auto;
	padding:0 5px;
}
/* h1 ウィンドウ上部 新メンバー一覧タイトル「詳細」 */
/* h2 ウィンドウ下部 */
.bt_memberList-conts h1,
.bt_memberList-conts h2{
	text-align:left;
	font-weight:bold;
	padding:12px 0px;
	padding-left:15px;
	background:rgba(245, 245, 245, 1);
	border-bottom:1px solid #bbb;
	color:#555;
	border-radius:5px 5px 0 0;
}
.bt_memberList-conts h2{
	border-top:1px solid #bbb;
	border-bottom:none;
	border-radius:0 0 5px 5px;
	text-align:center;
	padding:8px 0px;
}

/* メンバーリスト 権限ごとul */
.bt_memberList-conts ul{
	width:200px;
	max-height:50%;
	padding-bottom:20px;
	margin-top:5px;
	overflow-x:hidden;
}
/* メンバーリスト 各権限名 */
.bt_memberList-conts ul li:first-child{
	font-weight:bold;
	color:#666;
	padding:5px;
}
/* メンバー行の左に余白 */
.bt_memberList-conts ul li.memberMenuButtonConts{
	padding-left:15px;
}
/* ログインマーク アバター 名前 を横並びにする */
.bt_memberList-conts ul li.memberMenuButtonConts div{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	padding:2px 0;
	cursor:pointer;
}
.bt_memberList-conts ul li.memberMenuButtonConts div:hover{
	background:rgba(230,230,230, 0.9);
}

/* 【新】ルーム内メンバーリスト表示ボタン 招待用 */
.bt_memberList.invite{
	background:rgba(53, 114, 176, 1);
	color:#fff;
}

/*【新】ファイルリスト */
.bt_memberList-conts.fileList-conts ul{
	width:100%;
}
.bt_memberList-conts.fileList-conts ul li{
	width:100%;
	font-size:68.8%;
}
.bt_memberList-conts.fileList-conts ul li:hover{
	background:rgba(230,230,230, 0.9);
}
/*【新】ファイルリスト ファイル名 */
.bt_memberList-conts.fileList-conts .fileName{
	display:inline-block;
	width:90%;
	font-size:100.0%;
	float:left;
}
/*【新】ファイルリスト マウスオーバーで画像ウィンドウ出す */
.bt_memberList-conts.fileList-conts li .hoverImg{
	position:absolute;
	top:0;
	left:100%;
	display:none;
	z-index:100000;
	padding:4px;
	background:#fff;
	border-radius:3px;
	box-shadow:3px 3px 6px 1px rgba(20,20,20,0.5);
}
.bt_memberList-conts.fileList-conts li:hover .hoverImg{
	display:block;
}
.bt_memberList-conts.fileList-conts li .hoverImg span{
	font-size:87.5%;
	text-decoration:underline;
}




/* ドラッグ&ドロップ出来るエリア */
.dropArea{
	position:relative;
	top:0;
	left:0;
	/*z-index:20;*/
}
	/* firefoxのみ */
	@-moz-document url-prefix() {
		.dropArea{
			width:100%;
			height:100%;
			overflow:hidden;
		}
	}

.previewArea{/* プレビューエリア */
	text-align:center;
}
.previewArea img{/* プレビュー画像 */
	margin:0 auto;
	text-align:center;
}
/* ドラッグ&ドロップに対するメッセージエリア */
.dropMessage{
	width:50%;
	margin:0 auto;
	padding:0;
	padding-bottom:10px;
	position:relative;
	display:none;
}
.dropMessage a.exitBT{
	position:absolute;
	top:0;
	left:0;
}
/* ドロップフィールドにファイルを持って行こうとしてる時のエフェクト */
.dropArea_hover{
	box-sizing: border-box;
	border-radius:3px;
	/*
	赤
	border:2px solid #faa;
	background:rgba(255,0,0, 0.05);
	*/
	border:2px solid #aaf;
	background:rgba(0,0,255, 0.1);
	opacity: 0.7;
	filter: alpha(opacity=70);
}


/* 入力フィールドForm */
.inputFieldBase{
	padding:0;
	margin:0 auto;
	text-align:center;
}
.inputFieldBase input[type="submit"]{/* submitボタン */
	padding:10px 15px;
	border:none;
	border-radius: 4px;
	margin:0 5px;
	vertical-align:top;
}
/* 入力フィールド基本 */
.inputBase{
	display:inline-block;
	width:50%;
	max-width:800px;
	height:35px;
	margin:0 5px;
	padding:10px;
	border:1px solid #ccc;
	border-radius:5px;
}
.inputBase:focus{/* 入力中 */
	background:rgba(255,255,0,0.1);
}

.inputBase.reply{
	border-color:#99f;
}


/* 入力フィールドチャット用 inputBaseの拡張 */
textarea.inputBase{
	line-height:20px;
}
/*【ルーム内】メインチャット専用拡張 */
#chatInputField{
	width:100%;
	min-width: 300px;
	max-height: 380px;
	margin:0;
	border-radius:0;
	border:none;
	border-bottom:1px solid #ccc;
}

/*【ルーム内】入力フィールド サブエリアベース */
#id_chatformSubButtons{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-justify-content: flex-start; /* Safari */
	justify-content:         flex-start;
	-webkit-align-items: center; /* Safari */
	align-items:         center;
	
	width:97%;
	padding:4px;
	margin:0 auto;
}
/*【ルーム内】入力フィールド サブボタンベース */
#id_chatformSubButtons .subbutton{
	display:inline-block;
	margin:0 4px;
	padding:4px;
	border-style:none;
	border-radius:4px;
	background:rgba(43,94,166, 1);
	background:rgba(190,210,240, 1);
	cursor:pointer;
	color: #555;
}
#id_chatformSubButtons .subbutton span,
#id_chatformSubButtons .subbutton img{
	font-size:100%;
	font-weight:bold;
	height:18px;
	line-height:18px;
	margin:0;
	padding:0;
	width:auto;
	user-select: none;
}
#id_chatformSubButtons .subbutton:hover{
	background:rgba(210,230,255, 1);
}
#id_chatformSubButtons .subbutton:active{
	background:rgba(140,170,200, 1);
}
/*【ルーム内】入力フィールド サブボタン 送信 */
#id_chatformSubButtons .chatSubmitBT{
	background:rgba(53, 114, 176, 1);
	color: #fff;
	padding-left:15px;
	padding-right:15px;
}
/*【ルーム内】入力フィールド サブボタン 右寄せ */
#id_chatformSubButtons .flexItemRight{
	margin-left:auto;
}
#id_chatformSubButtons .chatSubmitBT.votingDisable{
	background:rgba(80, 80, 80, 1);
	cursor:default;
}

/* ファイル入力inpu */
/*
#id_chatformSubButtons .inputFile{
	display:inline-block;
	margin:0;
	padding:0;
	vertical-align: top;
	
}
*/

/* アンケート作成エリア */
.votingWarp{
	border-top:1px solid #ccc;
	width:calc(100% -10px);
	margin:5px auto;
	padding:5px;
	text-align:left;
}
	.votingWarp *{ color:#333; }
	.votingWarp > h1{ vertical-align:top; }
	.votingWarp > h1 > img{ display:inline-block; }
	
.votingCotns{
	width:80%;
	margin:5px auto;
}
	/*【アンケート】質問内容 */
	.votingCotns > textarea{
		resize: none;
		width:100%;
		height:80px;
		min-height:100px;
		margin:5px auto;
		padding:2px;
		line-height:1.5em;
	}
	/*【アンケート】質問 */
	.votingCotns > ul{
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		max-width:610px;
		padding:2px 0;
		background:rgba(128,128,128, 0.2);
	}
	.votingCotns > ul li{
		margin:5px auto;
		width:220px;
		max-width:220px;
	}
		.votingCotns > ul li input{
			width:100%;
		}
	
	/*【アンケート】投票期間 */
	.votingPeriodConts{
		padding:5px;
	}
	.votingPeriodConts select{
		margin-left:10px;
	}
	.votingPeriodConts h1,
	.votingPeriodConts h2{
		display:inline-block;
		color:#444;
		padding:0 5px;
	}
	/*【アンケート】送信ボタン */
	.votingCotns .submitConts{
		width:100%;
		text-align:right;
	}
	.votingCotns .submitConts .button{
		color:#efefef;
	}


/*【アンケート回答】 */
.votingAnswerWarp{
	padding:0 30px;
	padding-bottom:15px;
}
	.votingAnswerWarp .answerList{
		margin-bottom:10px;
	}
	.votingAnswerWarp .answerList li,
	.votingAnswerWarp .answerDoneList li{
		padding:5px 0;
	}
	.votingAnswerWarp .vote,
	.votingAnswerWarp .endtime{
		color:#777;
		font-size:75.0%;
		padding:0 5px;
		padding-left:10px;
	}
	/*【アンケート】結果 */
	.votingAnswerWarp .answerDoneList li{
		width:50%;
		margin:8px 0;
		padding:0px 0;
	}
	.votingAnswerWarp .answerDoneList li .votegauge{
		position:relative;
		width:20%;
		margin:0px 0;
		padding:12px 0;
		background:rgba(128,128,128, 0.4);
		border-radius:6px 0 0 6px;
	}
		.votingAnswerWarp .answerDoneList li .votegauge.win{
			background:rgba(128,128,255, 0.4);
		}
	.votingAnswerWarp .answerDoneList li .voteinfo{
		position:absolute;
		min-width:300px;
		white-space: nowrap;
		top:6px; left:0;
	}
	/*【アンケート】結果 % */
	.votingAnswerWarp .answerDoneList li .votingrate{
		font-weight:bold;
		padding:0 8px;
	}

/* メンションリスト */
.mentionArea{
	position:absolute;
	top:0;
	left:0;
	text-align:left;
	background:rgba(255,255,255, 1);
	z-index:99;
	margin-top:20px;
	border:1px solid #ccc;
	height:300px;
	
	overflow-y:scroll;
	
	/* 初期：非表示 */
	display:none;
}
.mentionArea li{
	padding:5px 10px;
	padding-right:100px;
}
.mentionArea li:hover{
	background:rgba(230,230,230, 1);
	cursor:pointer;
}
.mentionArea li.selected{
	background:rgba(230,230,230, 1);
}
.mentionArea li div{
	display:table-cell;
	vertical-align:middle;
}


/* メンション表示用 */
.isMention{
	display:inline-block;
	padding:4px 3px 2px;
	padding-right:5px;
	margin-bottom:2px;
	border:1px solid #ccc;
	border-radius:5px;
	background:rgba(245,245,245, 1);
	font-size:100.0%;
}
.isMention.myself{
	color:#fff;
	border:1px solid #3b73af;
	background:rgba(59,115,175, 1);
}
/* メンションがリンクの中に入ってしまったら無効化する */
/* 意味なかった */
/*
div.chatTable .msg a .isMention{
	display:inline;
	padding:0;
	margin:0;
	background:transparent;
	border:none;
}
*/



/* メンションリスト */
.stampArea{
	position:absolute;
	/*display:table;*/
	top:0;
	left:0;
	text-align:left;
	background:rgba(255,255,255, 1);
	z-index:99;
	margin-top:20px;
	border:1px solid #ccc;
	min-width:200px;
	min-height:300px;
	max-width:90%;
	
	overflow-x:hidden;
	overflow-y:scroll;
	
	/* 初期：非表示 */
	display:none;
}
.stampArea li{
	float:left;
	width:100px;
	height:100px;
	min-width:50px;
	min-height:50px;
	max-height:100px;
	padding:10px;
	overflow: hidden;
	
	/*
	display:table-cell;
	*/
	vertical-align:middle;
}
.stampArea li img{
	width:100%;
	/*height:100%;*/
	height:auto;
	overflow: hidden;
}
.stampArea li:hover{
	background:rgba(238,238,238, 0.6);
}
.stampArea li:hover img{
	opacity: 0.7;
	filter: alpha(opacity=70);
}


/* ログイン状態のマーク */
.loginStatusMark_active,
.loginStatusMark_away,
.loginStatusMark_offline{
	font-size:93.8%;
	text-shadow:
		 1px  1px 0px rgba(0,0,0,0.3),
		-1px  1px 0px rgba(0,0,0,0.3),
		 1px -1px 0px rgba(0,0,0,0.3),
		-1px -1px 0px rgba(0,0,0,0.3)
	;
}
.loginStatusMark_active{/* アクティブ */
	color:rgba(0,255,0, 1);
}
.loginStatusMark_away{/* 退席中 */
	color:rgba(230,230,0, 1);
}
.loginStatusMark_offline{/* オフライン */
	/*color:rgba(255,0,0, 1);*/
	color:rgba(150,150,150, 0.5);
}



/* ローカルリンク強調 */
.rocalLink{
	cursor:pointer;
	text-decoration:underline;
	color:#00f;
}
.clipCopyResult{
	/*
	position:relative;
	top:0px;
	right:0px;
	*/
	
	display:inline-table;
	position:relative;
	top:0px;
	left:-320px;
	
	width:300px;
	height:50px;
	margin-bottom:10px;
	background:rgba(30,30,30, 1);
	opacity:0.95;
	
	animation:          clipCopyResult-anim  3.5s ease-in-out 0s 1;
	-ms-animation:      clipCopyResult-anim  3.5s ease-in-out 0s 1;
	-webkit-animation: "clipCopyResult-anim" 3.5s ease-in-out 0s 1;
	-moz-animation:     clipCopyResult-anim  3.5s ease-in-out 0s 1;
}
.clipCopyResult:before{/* かざり線 */
	position:absolute;
	top:0px;
	left:0px;
	content: '';
	width:100%;
	height:100%;
	margin:-1px;
	border:1px solid #fff;
	box-shadow : 0px 0 0 1px rgba(30,30,30, 1);
}
.clipCopyResult:after{/* 影 */
	position:absolute;
	top:0px;
	left:0px;
	content: '';
	width:100%;
	height:100%;
	box-shadow : 2px 2px 20px 2px rgba(30,30,30, 0.8);
}
@keyframes clipCopyResult-anim{
	  0%{ }
	  5%{ left:0px; }
	 70%{ opacity:1; }
	 99%{ opacity:0; left:0px; }
	100%{ opacity:0; display:none; }
}
@-webkit-keyframes clipCopyResult-anim{
	  0%{ }
	  5%{ left:0px; }
	 70%{ opacity:1; }
	 99%{ opacity:0; left:0px; }
	100%{ opacity:0; display:none; }
}
@-moz-keyframes clipCopyResult-anim{
	  0%{ }
	  5%{ left:0px; }
	 70%{ opacity:1; }
	 99%{ opacity:0; left:0px; }
	100%{ opacity:0; display:none; }
}
@-ms-keyframes clipCopyResult-anim{
	  0%{ }
	  5%{ left:0px; }
	 70%{ opacity:1; }
	 99%{ opacity:0; left:0px; }
	100%{ opacity:0; display:none; }
}
.clipCopyResult div.img{/* お知らせアイコン */
	display:inline-block;
	float:left;
	width:auto;
	height:25px;
	margin:0;
	padding:12.5px 0 0px 17px;
}
.clipCopyResult div img{/* お知らせアイコン画像 */
	width:auto;
	height:100%;
}
.clipCopyResult div.msg{/* お知らせ本文 */
	display:table-cell;
	float:left;
	margin:0;
	padding:12.5px 7px 10px 7px;
	vertical-align:middle;
	color:#fff;
}



/* 書き込みのバツボタンエリア */
.chatBatuBT{
	position:absolute;
	top:15px;
	right:3px;
	margin-top:-12.5px;
	
	z-index:9999;
	opacity: 0.9;
}
.chatBatuBT a{
	display:none;
	box-shadow:3px 3px 6px 1px rgba(20,20,20,0.5);
}
div.chatTable:hover .chatBatuBT a{
	display:block;/* 表示 */
}


/* メッセージクイックボタン */
.quickButtonsArea{
	position:absolute;
	top:0px;
	right:0px;
	
	/*background:rgba(0,0,128,0.1);*/
	width:calc(100% - 20px);
	height:30px;
	padding:0 10px;
	
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-justify-content: flex-end; /* Safari */
	justify-content:         flex-end;
	-webkit-align-items: center; /* Safari */
	align-items:         center;
	
	pointer-events: none;
}
.quickButtonsArea .quickBTs{/* ボタンエリア */
	margin-left:12px;
	pointer-events: auto;
}
.quickButtonsArea .quickBTs .BT_base2{/* ボタン実態 */
	box-shadow:3px 3px 6px 1px rgba(20,20,20,0.5);
}
div.chatTable .quickBTs a{
	display:none;
}
div.chatTable:hover .quickBTs a{
	display:block;/* 表示 */
}


/* 読んだよボタン */
.chatReadBT{
	position:absolute;
	top:15px;
	right:3px;
	margin-top:-12.5px;
	
	z-index:9999;
	opacity: 0.95;
}
.chatReadBT a{
	display:none;
	box-shadow:3px 3px 6px 1px rgba(20,20,20,0.5);
}
div.chatTable:hover .chatReadBT a{
	display:block;/* 表示 */
}

/* 読みました表示 */
.readInfo{
	display:none;
	position:absolute;
	top:0;
	right:0;
	/*background: rgba(255,0,0, 0.3);*/
	width:30px;
	height:30px;
}
.readInfo.current{
	display:block;
}
.readInfo h1{
/*
	content: "";
	position:absolute;
	top:0;
	right:0;
	width:20px;
	height:20px;
	background: rgba(0,0,255, 0.3);
*/
	position:absolute;
	top:0; right:0;
	width:0; height:0;
	content: "";
	
	border-top: 15px solid #f55;
	border-right: 15px solid #f55;
	border-bottom: 15px solid transparent;
	border-left: 15px solid transparent;
}
.readInfo p{
	position:absolute;
	top:2px; right:0;
	font-size:14px;
	color:#fff;
	width:71%;
	text-align:center;
}
.chatReadBT:hover .readInfo{
	opacity:0.3;
}


/* プロジェクト作成,メンバー追加フォーム */
.createTableForm{
	display:inline-table;
	width:90%;
	margin:0 auto;
}
.createTableForm .tr{
	display:table-row;
	color:#000;
	width:100%;
	margin:0 auto;
}
.createTableForm div.right,
.createTableForm div.left{
	display:table-cell;
	padding:10px 0;
	vertical-align:middle;
	text-align: left;
	width:50%;
	margin:auto;
	border-bottom:1px solid #ccc;
}
.createTableForm div.left{
	padding-left:50px;
}
.createTableForm div.right{
}
.createTableForm input[type="radio"]{
	margin:10px 0;
}



/* マウス追従簡易表示ウィンドウ */
.simpleFloatingWindow{
	display:none;/* デフォルト非表示 */
	
	position:fixed;
	top:0;
	left:0;
	min-width:100px;
	min-height:50px;
	background:rgba(0,0,0, 0.7);
	z-index:9999;
	
	padding:5px;
	margin:0;
	text-align:left;
	font-size:93.8%;
	line-height:1.2;
	color:#eee;
	
	border:1px solid #eee;
	border-radius:3px;
	box-shadow:2px 2px 4px #666;
}
/*
.simpleFloatingWindowViewBT{
	
}
.simpleFloatingWindowViewBT:hover .simpleFloatingWindow{
	display:none;
}
*/



/* アメーバ天気予報 */
#room-roomsArea .amebaStatusConts a{
	color:#444;
}
#room-roomsArea .amebaStatusConts h1 a{
	color:#222;
}
#room-roomsArea .amebaStatusConts li{
	width:100%;
	font-size:87.5%;
	padding:2px 0;
}
#room-roomsArea .amebaStatusConts ul:hover{
	cursor:help;/* カーソルを虫眼鏡に */
}
#room-roomsArea .amebaStatusConts li:hover{
	background:transparent;/* 打ち消す */
	cursor:help;/* カーソルを虫眼鏡に */
}



/************************************************************************************************************************/
/*	Windowsのようなウィンドウ基礎	*/
/************************************************************************************************************************/
.windowBase{
	display:none;/* デフォルト非表示(JSでONにする) */
	position:fixed;
	top:0;
	left:0;
	min-width:200px;
	min-height:50px;
	background:rgba(0,0,0, 0.7);
	z-index:9999;
	
	padding:5px;
	margin:0;
	text-align:left;
	font-size:93.8%;
	line-height:1.2;
	color:#eee;
	
	border:1px solid #eee;
	border-radius:3px;
	box-shadow:2px 2px 4px #666;
}
.windowBase h1{
	border-bottom:1px solid #bbb;
	padding:2px 0;
}
.windowBase h1 a{
	cursor:move;
}
.windowBase a{
	color:#fff !important;
	text-decoration:none !important;
}
.windowBase .amebaStatusConts{
	
}
.windowBase .amebaStatusConts li{
	width:100%;
	font-size:100%;
	padding:3px 0;
}

/************************************************************************************************************************/
/*	ガントチャート用	*/
/************************************************************************************************************************/
table.ganttTable{
	/*
	width:100%;
	*/
	margin:10px auto;
	table-layout: fixed;
}

table.ganttTable td{/* セル共通 */
	font-size:87.5%;
	margin:0;
	padding:2px;
	padding-top:1px;
	border:1px solid rgba(0,0,0,1);
	white-space: nowrap;
}

table.ganttTable td.maincell{/* メインセル */
	text-align:center;
	width:23px;
	height:23px;
	min-width:23px;
	min-height:23px;
	max-width:23px;
	max-height:23px;
	width: expression(this.width >= "23px" ? "23px" : "23px");
	height: expression(this.height >= "23px" ? "23px" : "23px");
	
	line-height:23px;
	border:1px solid rgba(0,0,0, 0.2);
	padding:0;
	/* 23+1+1 = 25 */
	cursor:default;
}
table.ganttTable td.maincell:hover{/* メインセル:hover */
	background:rgba(200,200,255, 0.3) !important;
	border:1px solid rgba(150,150,255, 0.3) !important;
}
table.ganttTable td.maincell:active{/* メインセル:active */
	background:rgba(200,200,255, 0.4) !important;
	border:1px solid rgba(150,150,255, 0.4) !important;
}

table.ganttTable tr.caption td{/* 項目名セル */
	/*
	width:100px;
	height:22px;
	*/
	padding:0 5px;
}
table.ganttTable td.saturday{/* 土曜の色 */
	background:rgba(0,0,255, 0.15);
}
table.ganttTable td.sunday{/* 日曜の色 */
	background:rgba(255,0,0, 0.15);
}

table.ganttTable td.workday{/* 作業日 (ステータス:未着手) */
	background:rgba(0,0,0, 0.15);
}

table.ganttTable td.status_A{/* [ステータス]作業中 */
	background:rgba(0,255,0, 0.15);
}
table.ganttTable td.status_B{/* [ステータス]確認中 */
	background:rgba(255,0,255, 0.15);
}
table.ganttTable td.status_C{/* [ステータス]完了 */
	background:rgba(230,230,0, 0.4);
}


/************************************************************************************************************************/
/*	リリースノート用	*/
/************************************************************************************************************************/
.releaseNoteArea{
	width:80%;
	margin:0 auto;
}
.releaseNoteArea h1{
	position:relative;
	font-size:125.0%;
	padding:20px 0 5px;
}
.releaseNoteArea h1:after{
	content:" ";
	display:inline-block;
	width:100%;
	height:1px;
	background:#bbb;
	z-index:-1;
}
.releaseNoteArea h1 span.time{ /* リリース日 */
	position:absolute;
	bottom:5px;
	right:2px;
	font-size:68.8%;
	color:#777;
}
.releaseNoteArea h1 span.new{ /* 今日更新ならちょっと強調する */
	position:relative;
	top:-5px;
	left:2px;
	font-size:68.8%;
	color:#f55;
}
.releaseNoteArea ul{
	margin-left:35px;
}
.releaseNoteArea li{
	list-style-type:disc;
	padding:5px 0;
}
.releaseNoteArea li:hover{
	background:rgba(240,240,240, 1);
	cursor:default;
}
/* リンクなら */
.releaseNoteArea a:hover{
	text-decoration:none;
}
.releaseNoteArea a li:hover{
	cursor:pointer;
}




/*
//======================================================================================================================================================
//     プログラマー専用ページ用
//======================================================================================================================================================
*/
.php-ul{
	
}
.php-ul > div{
	position:relative;
	cursor:pointer;
	background:rgba(230,230,230, 0.9);
	padding:20px 10px;
}
.php-ul > div.editing{
	background:rgba(255,220,220, 0.9);
}
.php-ul > div:hover{
	background:rgba(240,240,240, 0.9);
}
.php-ul > div:active{
	background:rgba(220,220,220, 0.9);
}
.php-ul > div > *{
	display:inline-block;
}


.php-ul > div > h2{         visibility: hidden;}
.php-ul > div.editing > h2{ visibility: visible;}

.php-ul > div > h3{
	margin-left:15px;
}

.php-ul > div > h4{
	position:absolute;
	bottom:15px;
	right:3px;
	font-size:11px;
	color:#999;
}

.php-ul > div > h5{
	position:absolute;
	bottom:2px;
	right:4px;
	font-size:11px;
	color:#888;
}




/*
//======================================================================================================================================================
//     日報確認ページ用
//======================================================================================================================================================
*/
/* 【左側】日報送信一覧 全体 */
.reportListConts{
	width:35%;
	max-width:400px;
	height:100%;
	overflow-y:scroll;
}
/* 【左側】日報送信一覧 表示切り替えフォーム */
.reportListConts form{
	padding:5px 0;
}

/* 【左側】日報送信一覧 日付ごと */
.reportListConts > div{
	padding:0px 0;
	padding-bottom:5px;
	/*border-bottom:1px solid #aaa;*/
}
/* 【左側】日報送信一覧 日付タイトル */
.reportListConts > div > h1{
	padding:10px 0;
	font-weight:bold;
	font-size:121.4%;
	background:rgba(32,80,129, 0.4);
	text-align:center;
}
.reportListConts > div > h1:myself{
	background:rgba(32,129,80, 0.3);
}
.reportListConts > div > h1:hover{
	background:rgba(32,80,129, 0.3);
}
.reportListConts > div > h1:active{
	background:rgba(32,80,129, 0.5);
}

/* 【左側】日報送信一覧 人間リスト */
.reportListConts li{
	padding:5px 0;
	padding-left:7px;
	cursor:pointer;
}
.reportListConts li.myself{
	background:rgba(205,255,232,1);
}
.reportListConts li:hover{
	background:rgba(229,243,255,1);
}
.reportListConts li.current{
	background:rgba(205,232,255,1);
}

/* 【右側】選んだメールの表示エリア */
.mailDetailConts{
/*
	position:fixed;
	top:0;
	right:0;
*/
	width:65%;
	
}

/* 【右側】選んだメールの詳細 */
.mailInfoConts{
	margin:5px 5px;
	margin:0;
	margin-bottom:5px;
	padding:5px 15px;
	/*border-radius:10px;*/
	background:rgba(230,230,230,1);
}
.mailInfoConts td{
	padding:1px 0;
	font-size:92.9%;
}
/* 【右側】選んだメールの本文 */
.mailMesseConts{
	padding:0 10px;
	height:100%;
	overflow-y:scroll;
	font-size:92.9%;
	line-height:1.2;
	text-decoration:none;
	color:#000;
	
	height:calc(100% - 130px);
}
/* 【右側】日報本文内の改行の高さ */
.mailMesseConts br{
	line-height:1;
}
/*【右側】日報選択 */
.dRepoSelectButtonConts{
	width:100%;
	margin:0 auto;
}
.dRepoSelectButtonConts li{
	width:50%;
	float:left;
	cursor:pointer;
	margin:0 auto;
	padding:0;
}
.dRepoSelectButtonConts li a{
	display:block;
	width:90%;
	text-align:center;
	background:rgba(200,200,200,0.9);
	padding:10px;
	margin:0px auto;
	margin-bottom:10px;
	pointer-events: none;
}
.dRepoSelectButtonConts li:hover a{
	background:rgba(200,200,200, 0.8);
}
.dRepoSelectButtonConts li:active a{
	background:rgba(200,200,200, 1.0);
}



/* 新メニュー用 エリア */
.menuButtonConts{
	position:absolute;
	top:15px;
	right:3px;
	margin-top:-12.5px;
	/*width:0;*/
	
	z-index:9998;
}
.menuButtonConts a{
	display:none;
	box-shadow:3px 3px 6px 1px rgba(20,20,20,0.5);
}
div.chatTable:hover .menuButtonConts a{
	display:block;/* 表示 */
}
/*
.menuButtonConts .menuButton{
	width:100px;
	height:6px;
}
*/
.menu{
	position:fixed;
	top:0;
	left:-320px;
	height:100%;
	
	/*width:270px;*/
	min-width:270px;
	max-width:100%;
	
	margin: auto;
	padding:0px 0;
	padding-top:35px;/* ヘッダー分ずらす */
	color:#555;
	/*
	background:rgba(40,40,40, 0.5);
	background:rgba(32,80,129, 1);
	background:rgba(193,193,193, 1);
	background:rgba(241,241,241, 1);
	*/
	background:rgba(245,245,245, 1);
	z-index:9998;
	text-align:center;
	
	/*border-right:1px solid #f00;*/
	box-shadow: 2px 0px 3px 3px rgba(0,0,0,0.2);
	
	overflow-y:auto;
	
}

.menu li{
	position:relative;
	padding:20px 0;
	text-align:center;
	border-bottom:1px solid #ccc;
}

/* 設定メニュー内 通知音ボタン */
/*
.menu li .js-notiSetSEGroup{
	width:100%;
	margin:0 auto;
	text-align:center;
}
.menu li .js-notiSetSEGroup a{
	display:inline;
	width:100px;
	margin:0 auto;
}
*/








/*
//======================================================================================================================================================
//     来客アラート用
//======================================================================================================================================================
*/
#visitorAlertConts{
	content: "　";
	position:fixed; top:0; left:0;
	width:100%; height:100%;
	text-align:center;
	background: #000;
	z-index:9999;
}
	/* 開始演出 */
	#visitorAlertContsA_A,
	#visitorAlertContsA_B{
		content: "　";
		position:fixed; top:150%; left:0;
		width:100%; height:100%;
		text-align:center;
		z-index:-1;
	}
	/* 赤色斜め */
	#visitorAlertContsA_A:before {
	  content: '';
	  position: absolute; top:0; left:0;
	  width:120%; height:150%;
	  margin:3% -10% 0;
	  background: #fa1122;
	  -webkit-transform-origin: left center;
	  -ms-transform-origin: left center;
	  transform-origin: left center;
	  -webkit-transform: rotate(3deg); 
	  -ms-transform: rotate(3deg);
	  transform: rotate(3deg);
	  z-index: -1;
	}
	/* 黄色斜め */
	#visitorAlertContsA_A.yellow:before {
	  background: #fffb40;
	}
	/* 青斜め */
	#visitorAlertContsA_A.blue:before {
	  background: #00f;
	}
	/* 緑斜め */
	#visitorAlertContsA_A.green:before {
	  background: #0f0;
	}
	/* 黒色斜め */
	#visitorAlertContsA_B:before{
	  content: '';
	  position: absolute; top:0; left:0;
	  width:150%; height:300%;
	  margin:3% -10% 0;
	  background: #000;
	  -webkit-transform-origin: left center;
	  -ms-transform-origin: left center;
	  transform-origin: left center;
	  -webkit-transform: rotate(-3deg);
	  -ms-transform: rotate(-3deg);
	  transform: rotate(-3deg);
	  z-index: -1;
	}
	
	/* 来客襲来 お約束の方 画像 */
	img#visitorAlertTitleImage{
		position:fixed;
		top:0; left:0;
		width:60%;
		height:auto;
	}
	
	/* 「来客襲来」文字 */
	#visitorAlertTitle{
		position:fixed;
		top:0; left:0;
		width:calc(90% - 100px);
		padding:15px 40px;
		margin:30px auto 10px;
		text-align:left;
		-webkit-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);
		white-space: nowrap;/* 改行しない */
		/*
		height:20%;
		border:5px solid #fe0;
		background:#222;
		*/
	}
	#visitorAlertTitle > li{
		display:inline-block;
		position:relative; top:0; left:0;
		/*font-family: 'Sawarabi Mincho', sans-serif;*//* Webフォント Sawarabi Mincho */
		font-family: 'Sawarabi Gothic', sans-serif;/* Webフォント Sawarabi Gothic */
		font-size:220px;
		/*
		font-size:100%;
		*/
		font-weight:bold;
		font-style: italic;
		vertical-align:top;
		user-select: none;/* 文字選択不可 */
		white-space: nowrap;/* 改行しない */
		color:#fff;
		margin:0 8px;
		text-shadow: #ff5bcf 10px -7px 7px,
					 #56bbff -7px  8px 7px,
					rgb(0, 0, 0) 10px 0px 0px, rgb(0, 0, 0) 9.95004px 0.998334px 0px, rgb(0, 0, 0) 9.80067px 1.98669px 0px, rgb(0, 0, 0) 9.55336px 2.9552px 0px, rgb(0, 0, 0) 9.21061px 3.89418px 0px, rgb(0, 0, 0) 8.77583px 4.79426px 0px, rgb(0, 0, 0) 8.25336px 5.64642px 0px, rgb(0, 0, 0) 7.64842px 6.44218px 0px, rgb(0, 0, 0) 6.96707px 7.17356px 0px, rgb(0, 0, 0) 6.2161px 7.83327px 0px, rgb(0, 0, 0) 5.40302px 8.41471px 0px, rgb(0, 0, 0) 4.53596px 8.91207px 0px, rgb(0, 0, 0) 3.62358px 9.32039px 0px, rgb(0, 0, 0) 2.67499px 9.63558px 0px, rgb(0, 0, 0) 1.69967px 9.8545px 0px, rgb(0, 0, 0) 0.707372px 9.97495px 0px, rgb(0, 0, 0) -0.291995px 9.99574px 0px, rgb(0, 0, 0) -1.28844px 9.91665px 0px, rgb(0, 0, 0) -2.27202px 9.73848px 0px, rgb(0, 0, 0) -3.2329px 9.463px 0px, rgb(0, 0, 0) -4.16147px 9.09297px 0px, rgb(0, 0, 0) -5.04846px 8.63209px 0px, rgb(0, 0, 0) -5.88501px 8.08496px 0px, rgb(0, 0, 0) -6.66276px 7.45705px 0px, rgb(0, 0, 0) -7.37394px 6.75463px 0px, rgb(0, 0, 0) -8.01144px 5.98472px 0px, rgb(0, 0, 0) -8.56889px 5.15501px 0px, rgb(0, 0, 0) -9.04072px 4.2738px 0px, rgb(0, 0, 0) -9.42222px 3.34988px 0px, rgb(0, 0, 0) -9.70958px 2.39249px 0px, rgb(0, 0, 0) -9.89993px 1.4112px 0px, rgb(0, 0, 0) -9.99135px 0.415807px 0px, rgb(0, 0, 0) -9.98295px -0.583741px 0px, rgb(0, 0, 0) -9.8748px -1.57746px 0px, rgb(0, 0, 0) -9.66798px -2.55541px 0px, rgb(0, 0, 0) -9.36457px -3.50783px 0px, rgb(0, 0, 0) -8.96758px -4.4252px 0px, rgb(0, 0, 0) -8.481px -5.29836px 0px, rgb(0, 0, 0) -7.90968px -6.11858px 0px, rgb(0, 0, 0) -7.25932px -6.87766px 0px, rgb(0, 0, 0) -6.53644px -7.56803px 0px, rgb(0, 0, 0) -5.74824px -8.18277px 0px, rgb(0, 0, 0) -4.90261px -8.71576px 0px, rgb(0, 0, 0) -4.00799px -9.16166px 0px, rgb(0, 0, 0) -3.07333px -9.51602px 0px, rgb(0, 0, 0) -2.10796px -9.7753px 0px, rgb(0, 0, 0) -1.12153px -9.93691px 0px, rgb(0, 0, 0) -0.123887px -9.99923px 0px, rgb(0, 0, 0) 0.87499px -9.96165px 0px, rgb(0, 0, 0) 1.86512px -9.82453px 0px, rgb(0, 0, 0) 2.83662px -9.58924px 0px, rgb(0, 0, 0) 3.77978px -9.25815px 0px, rgb(0, 0, 0) 4.68517px -8.83455px 0px, rgb(0, 0, 0) 5.54374px -8.32267px 0px, rgb(0, 0, 0) 6.34693px -7.72764px 0px, rgb(0, 0, 0) 7.0867px -7.0554px 0px, rgb(0, 0, 0) 7.75566px -6.31267px 0px, rgb(0, 0, 0) 8.34713px -5.50686px 0px, rgb(0, 0, 0) 8.8552px -4.64602px 0px, rgb(0, 0, 0) 9.27478px -3.73877px 0px, rgb(0, 0, 0) 9.6017px -2.79415px 0px, rgb(0, 0, 0) 9.83268px -1.82162px 0px, rgb(0, 0, 0) 9.96542px -0.830894px 0px;
	}
	
	/* どの来客か判断する画像 */
	img#visitorAlert_VisitorImage{
		position:fixed;
		right:-5%; bottom:0px;
		margin:20px;
		pointer-events: none;
		
		width:75%;
		min-width:300px;
		height:auto;
	}


/*
//======================================================================================================================================================
//     Yアラート用
//======================================================================================================================================================
*/
#yalertConts{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(255,0,0, 0.0);/* アニメーションで制御 */
	content: "　";
	z-index:9999;
	
	text-align:center;
}
#yalertConts div,
#yalertConts img{
	margin:0 auto;
	padding:0;
}
#yalertConts #yalertTitle{
	width:80%;
	padding:15px 0;
	margin:30px auto 10px;
	border:5px solid #fe0;
	background:#222;
}
#yalertConts #yalertTitle > span{
	font-size:30px;
	font-weight:bold;
	color:#fe0;
}

#yalertConts #yalertImg{
	position:relative;
	top:220px;
}
#yalertConts #yalertImg img{
	max-width:537px;
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}



/*
//======================================================================================================================================================
//     通知OFFアイコン
//======================================================================================================================================================
*/
/* プロジェクト内、ルーム一覧の通知OFFアイコン */
#room-roomsArea .iconNotNotification{
	display: inline-block;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 0;
	left: 33px;
}
/* プロジェクト内、現在のプロジェクト名の所用 */
#chatTitleArea #chatTitleElem span.title .iconNotNotification{
	display: inline-block;
	width: 15px;
	height: 15px;
	padding-left: 5px;
}
/* ルーム内 */
.lobbyTable .iconNotNotification{
	display: inline-block;
	width: 15px;
	height: 15px;
	padding-left: 5px;
}

















/*
//======================================================================================================================================================
//
//     タブレット用 (画面の横幅が768pxまで)
//
//======================================================================================================================================================
*/
@media screen and (max-width: 768px){
	
	#mainContents,
	#mainContentsChat{
		height:100%;
		overflow-y:visible;
	}
}