/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*	Style Sheet */
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*******************************************************************************************************************************/
/*                                                                                                                             */
/*  業務管理アプリ(ブラウザ版) デフォルトスタイル                                                                              */
/*                                                                                                                             */
/*******************************************************************************************************************************/
/*===========================================================================*/
/*   ▼CSSリセット▼                                                         */
/*===========================================================================*/
*{
	margin: 0;
	padding: 0;
	/*border: 0;*/
	font-size: 16px;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	font-family:'メイリオ','Meiryo','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka','ＭＳ Ｐゴシック',sans-serif;
	text-decoration: none;
	list-style-type:none;
	letter-spacing: normal;
}
img{
	display:block;
}
* html body{
	background: url(null) fixed;/* IE6用 */
} 
html {
	overflow-y: scroll;/* スクロールバーを出す(強制) */
	overflow-y: hidden;/* スクロールバーを消す */
}
html, body{
	height: 100%;
}
body{
	position: relative;
}
a{font-size:100%;}
a:link{		color:#3572b0; }
a:visited{	color:#3572b0; }
a:hover{	color:#3572b0; text-decoration:underline; }
/*===========================================================================*/
/*     ▲CSSリセットここまで▲                                                */
/*===========================================================================*/



/*
//======================================================================================================================================================
//     アニメーション 他
//======================================================================================================================================================
*/

/* フォント縁取り(黒抜き) */
.fontEdge{
	color:#000;
	text-shadow:
		 1px  1px 0px #fff,
		-1px  1px 0px #fff,
		 1px -1px 0px #fff,
		-1px -1px 0px #fff
	;
}

/* フォント縁取り(白抜き) */
.fontEdge_w{
	color:#fff;
	text-shadow:
		 1px  1px 0px #000,
		-1px  1px 0px #000,
		 1px -1px 0px #000,
		-1px -1px 0px #000
	;
}



/* 太字にする */
.fontBold{
	font-weight:bold;
}


/* 汎用ボタン */
.BT_base:link, .BT_base:visited{
	color: #fff;
}
.BT_base{
	display:inline-block;
	min-width: 100px;
	padding:12px 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;
}
.BT_base:hover{
	background:rgba(43, 94, 166, 1);
	text-decoration:none;
}
.BT_base:active{
	background:rgba(48, 109, 171, 1);
	text-decoration:none;
}

/*.BT_base.isDisable{*/
.isDisable{
	background:rgba(150,150,150, 1) !important;
}

/* 汎用ボタン 赤ver */
.BT_base.red{
	background:rgba(176, 53, 50, 1);
}
/* 汎用ボタン 赤ver */
.BT_base.yellow{
	background:rgba(196, 196, 20, 1);
}



/* 汎用ボタン2 */
.BT_base2:link, .BT_base2:visited{
	color: #fff;
}
.BT_base2{
	display:inline-block;
	padding:5px;
	border:none;
	border-radius: 4px;
	color: #fff;
	font-size:106.3%;
	font-weight:bold;
	text-decoration: none;
	text-align:center;
	line-height:15px;
	background:rgba(53, 114, 176, 1);
	cursor:pointer;
}
.BT_base2:hover{
	background:rgba(43, 94, 166, 1);
	text-decoration:none;
}
.BT_base2:active{
	background:rgba(48, 109, 171, 1);
	text-decoration:none;
}
.BT_base2.red{
	background:rgba(176, 53, 50, 1);
}
.BT_base2.pink{
	/*background:rgba(250, 105, 134, 1);*/
	background-color: #FFB6C1;
}
.BT_base2.pink:hover{
	background-color: #FFC7D2;
	color:red;
}
.BT_base2.non{
	background:rgba(100,100,100, 1);
}





/*
//======================================================================================================================================================
//     Qin
//======================================================================================================================================================
*/
#qinWrapper{
	width: 100%;
	height: 100%;
	background: rgba(255,200,200, 0.5);
}


/* Qin起動演出 */
#startUpQinEffect{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(255, 235, 196);
}
/* 起動演出ロゴ */
#startUpQinEffect img{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	opacity: 0;
}

/* ローディング用 */
.nowLoadingWrap{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0, 0.4);
	z-index:100000;
	
	display:none;
}
	.nowLoadingConts{
		position:relative;
		displau:inline-block;
		background:rgba(255,255,255, 0.8);
		width:100%;
		height:calc(88px + 15px);
		top:50%;
		margin-top:-44px;
	}
	.nowLoadingProgress{
		display:none;
		position:absolute; bottom:-60px; left:5px; right:0;
		margin:auto auto;
		width:100%;
		text-align:center;
		font-weight:bold;
		background:rgba(255,255,255, 0.8);
		padding:10px 0;
	}
	.nowLoadingPhilosophy{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #777;
	}


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

/* Qin内システム通知 */
.systemNoticeCont{
	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: systemNoticeCont-anim  3.5s ease-in-out 0s 1;
}
	.systemNoticeCont: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);
	}
	.systemNoticeCont: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 systemNoticeCont-anim{
		  0%{ }
		  5%{ left:0px; }
		 70%{ opacity:1; }
		 99%{ opacity:0; left:0px; }
		100%{ opacity:0; display:none; }
	}
	.systemNoticeCont div.img{/* お知らせアイコン */
		display:inline-block;
		float:left;
		width:auto;
		height:25px;
		margin:0;
		padding:12.5px 0 0px 17px;
	}
	.systemNoticeCont div img{/* お知らせアイコン画像 */
		width:auto;
		height:100%;
	}
	.systemNoticeCont div.msg{/* お知らせ本文 */
		display:table-cell;
		float:left;
		margin:0;
		padding:12.5px 7px 10px 7px;
		vertical-align:middle;
		color:#fff;
	}

/*====================================================================*/
/* 全体レイアウト設定 */
/*====================================================================*/
/* 全体 */
#qinContainer{
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;/* アイテムを垂直方向に上から下へと配置する。 */
	overflow: hidden;
}
	/* ヘッダー */
	#headerWrap{
		width: 100%;
		height: 30px;
		min-height: 30px;
		max-height: 30px;
		flex-shrink: 0;
		flex-basis: 30px;
		background: rgba(255,0,0, 1);
	}
	/* フッター */
	#footerWrap{
		width: 100%;
		height: 15px;
		min-height: 15px;
		max-height: 15px;
		flex-shrink: 0;
		flex-basis: 15px;
		background: rgba(0,0,255, 1);
	}
	/* メインコンテンツ */
	#mainContentWrap{
		position: relative;
		width: 100%;
		height: 100%;
		max-height: 100%;
		background: rgba(0,255,0, 1);
		flex-grow: 1;/* flex 領域の残りすべて使う */
		flex-basis: fit-content;
		
		display: flex;
	}
		/* メインコンテンツ 各カテゴリ */
		#roomsCont,
		#mainChatCont,
		#threadCont{
			height: calc(100% - 30px);/* ヘッダー分減らす */
		}
		/* メインコンテンツ / ルーム一覧 */
		#roomsCont{
			min-width: 200px;
			resize: horizontal;/* 横幅リサイズを許可 */
			overflow-y: scroll;
			background: rgba(255,128,128, 1);
		}
		/* メインコンテンツ / メインチャット */
		#mainChatCont{
			width: auto;
			min-width: 400px;
			resize: horizontal;/* 横幅リサイズを許可 */
			overflow-y: scroll;
			background: rgba(128,128,255, 1);
		}
		/* メインコンテンツ / スレッド */
		#threadCont{
			flex-grow: 1;/* flex 領域の残りすべて使う */
			min-width: 200px;
			overflow-y: scroll;
			background: rgba(128,255,128, 1);
		}



/*====================================================================*/
/*  */
/*====================================================================*/
/* ルーム一覧 */
#roomsCont{
	background: rgba(255,0,255,1);
}
	/* ルーム一つ一つ */
	.roomLitsArea li{
		padding: 10px 0;
	}
	.roomLitsArea li:hover{
		background: rgba(0,0,255,1);
		cursor: pointer;
	}
	/* ルーム一覧 / ルームアイコン */
	.roomLitsArea li h1{
		
	}
	/* ルーム一覧 / ルーム名 */
	.roomLitsArea li h2{
		padding-left: 15px;
	}