/*
//************************************************************************
	Style Sheet
//************************************************************************
*/
/*
//===========================================================================
//     リセット
//===========================================================================
*/
*{
	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%;
} 

a{font-size:100%;}
a:link{		color:#3572b0; }
a:visited{	color:#3572b0; }
a:hover{	color:#3572b0; text-decoration:underline; }

/* フロート */
.floatLeft{	 float:left; }
.floatRight{ float:right; }
/* clearfix */
.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* 共通ヘッダーフッターとかで使ってるよ */
iframe{
	width:100%;
	overflow:hidden;
}

input[type="text"]:focus{/* 入力中 */
	/*background:rgba(255,255,0,0.1);*/
	background:#fff;
}

.textNowrap{
	/* はみ出る分の対策 */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}


/****** クリックで拡大用 ******/
.overarea{ cursor:pointer; }
/* .overlayと#cursor は bodyに勝手につきます */
.overlay{
	position: absolute;
	display: none;
	top: 0;
	width: 100%;
	height: 100%;
	_background: url(img/black.png);
	background: rgba(0,0,0,0.6);
	z-index:999;
}
#cursol{
	position: absolute;
	padding: 5px;
	color: #fff;
	background: #666;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 2px 2px 5px 0px #333;
	-moz-box-shadow: 2px 2px 5px 0px #333;
	box-shadow: 2px 2px 5px 0px #333;
	z-index:1001;
}

/****** 「.overarea_bt」クリックで次に続く「.overarea_main」が拡大 ******/
.overarea_bt{ cursor:pointer; }
.overarea_main{
	/*position: absolute;*/
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	/*padding:10px 60px;*/
	padding:0;
	text-align:center;
	
	border-radius: 15px;
	
	z-index:9999;
	display:none;
}

/* ホバーウィンドウ雛形 */
.hoverWindow{
	position: fixed;
	width:80%;
	height:80%;
	max-width:640px;
	margin:5% auto;
	padding:20px;
	text-align:center;
	background:rgba(255,255,255, 0.9);
	border-radius:4px;
	z-index:9999;
	
	overflow-y:scroll;
	
	color:#333;
	
	pointer-events:visiblePainted;
	
}
.hoverWindow td{
	border:none !important;
	border-bottom:1px solid #ccc !important;
	padding:20px !important;
	color:#333;
}
.hoverWindow td input[type="text"],
.hoverWindow td select,
.hoverWindow td option{
	color:#333;
}

/* リンク文字 短縮 */
a.urlOverflowTest{
	display:inline-block;
	overflow: hidden;
	width: 200px;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

/*
//======================================================================================================================================================
//     タブレット用 (画面の横幅が768pxまで)
//======================================================================================================================================================
@media screen and (max-width: 1080px){
*/
@media screen and (max-width: 768px){
	
	html {
		overflow-y: scroll;/* スクロールバーを出す(強制) */
	}
	
	/* 【ルーム内】プロジェクト一覧 エリア */
	#room-roomsArea{
		display:none;
		float:left;
		width:95%;
	}
	
	/* 【ルーム内】チャット エリア */
	#room-projectArea{
		display: block;
		float:none;
		width:100%;
		margin:0 auto;
		/*height:300px;*/
	}
	
	/* 【ルーム内】メンバー エリア */
	#room-membersArea{
		display: block;
		float:none;
		width:95%;
		max-width:none;
		height:150px;
		margin:0 auto;
		
		display: none;
	}
	/* 【ルーム内】縦幅MAX */
	#chatContents{
		height:auto;
		overflow-y:hidden;
	}
	
	/* チャットエリア */
	div.chatTable .chatTableTd{/* td */
		display:block;
	}
	div.chatTable .msg{/* 本文 */
		width:95%;
		margin:0 auto;
		padding-bottom:15px;
	}
	.chatTable.reply .msg{
		padding-bottom:10px;
	}
	div.chatTable .nameConts{/* ニックネーム上部 */
		padding-bottom:0;
	}
	
}


/*
//======================================================================================================================================================
//     スマートフォン用 (画面の横幅が640pxまで)
//======================================================================================================================================================
*/
@media screen and (max-width:640px){
	/* 個人設定ウィンドウ */
	.mySettingWindow{
		width:100%;
		border-radius:0px;
	}
	
	/* ヘッダーフローティング解除 */
	#headerArea{
		position: relative;
	}
	#mainContentsArea{
		margin-top:0;
	}
	
	.clipCopyResult{
		left:-220px;
		width:200px;
	}
	
	/* 【右側】選んだメールの本文 */
	.mailMesseConts{
		max-height:400px;
	}
	
}/****** スマホ用 ******/






































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


/* フォント縁取り(黒抜き) */
.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.red:hover{
	background:rgba(255, 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);
}



/* プロジェクト一覧「招待中」ぴかぴか */
.anim-cateInvite{
	
	animation:         anim_cateInvite_proc 0.5s linear 0s infinite alternate;
	-ms-animation:     anim_cateInvite_proc 0.5s linear 0s infinite alternate;
	-webkit-animation: anim_cateInvite_proc 0.5s linear 0s infinite alternate;
	-moz-animation:    anim_cateInvite_proc 0.5s linear 0s infinite alternate;
}
	@keyframes anim_cateInvite_proc{
		      0%{ background:rgba(255,30,30, 0.0); }
		99.9%,to{ background:rgba(255,30,30, 0.7); }
	}
	@-webkit-keyframes "anim_cateInvite_proc"{
		      0%{ background:rgba(255,30,30, 0.0); }
		99.9%,to{ background:rgba(255,30,30, 0.7); }
	}
	@-moz-keyframes anim_cateInvite_proc{
		      0%{ background:rgba(255,30,30, 0.0); }
		99.9%,to{ background:rgba(255,30,30, 0.7); }
	}
	@-ms-keyframes anim_cateInvite_proc{
		      0%{ background:rgba(255,30,30, 0.0); }
		99.9%,to{ background:rgba(255,30,30, 0.7); }
	}









/* アコーディオン */
/* 可動エリアは初めは消しとく */
.acMenuBT{
	/*
	display:inline-block;
	height:auto;
	padding:5px 10px;
	text-align:center;
	background:rgba(211,220,227, 1);
	*/
	cursor:pointer;
}

.acMenuBT + div,
.acMenuBT + table,
.acMenuBT + ul{
	overflow:auto;
	display:none;
}
.acMenuBT + div.defOpen,
.acMenuBT + table.defOpen,
.acMenuBT + ul.defOpen{
	overflow:visible;
	display:block;
}






































.section- {
  position: absolute;
  top: 0;
  width:50%;
}
.section-radio {
  display: none;
}
.section-name {
  position: relative;
  z-index: 10;
  /* 他、選択されていない時のCSSを記述 */
	border-bottom:1px solid rgb(200,200,200);
	
  width:100%;
	text-align: center;
	/* はみ出る分の対策 */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}
.section-two {
}
.section-three {
}
.section-radio:checked + .section-name {
  /* 選択された時のCSSを記述 */
}

.section-content {
  display: none;
}

.section-radio:checked ~ .section-content {
  display: block;
}








/* ===================================================================================== */
/* お絵かき用 */
/* ===================================================================================== */
/* お絵かきボタン用 */
#id_chatformSubButtons .oekakiBT{
	
}
/* お絵かき用 バック用 */
.oekakiWapper{
	position:fixed;
	top:40px;
	left:0;
	width:100%;
	height:calc(100% - 40px);
	background:rgba(0,0,0, 0.4);
	background:rgba(240,245,250, 1);
	z-index:999;
	overflow-x:hidden;
	overflow-y:hidden;
	
	/* 初期：非表示 */
	display:none;
}
/* お絵かき用canvas を囲むよう */
.oekakiWapper > div.oekakiCanvasWarp{
	position:relative;
	background:rgba(240,245,250, 1);
	top:0px;
	left:0;
	right:0;
	margin:0 auto;
	width:640px;
	height:480px;
	/*
	width: calc(100% - 20px);
	height: calc(100% - 100px);
	*/
	padding:10px;
	border-radius:5px;
	box-shadow:3px 3px 8px #444;
	
	padding-top:40px;/* ツールボタン設置用スペース */
	
	overflow-x:hidden;
	overflow-y:hidden;
}
/* お絵かき用canvas */
.oekakiWapper > div.oekakiCanvasWarp canvas{
	background:#fff;
	border:2px solid #555;
	
	/*
	width:100%;
	height:100%;
	*/
	padding:0;
	margin:0;
}
/* お絵かき用 ドロップフィールドにファイルを持って行こうとしてる時のエフェクト (お絵かき用) */
.oekakiWapper > div.oekakiCanvasWarp canvas.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);
}

/* お絵かき用 色々ウィンドウベース */
.oekakiWapper .oekakiWindow{
	position:absolute;
	/*
	top:50%;
	left:0;
	*/
	width:120px;
	height:150px;
	border:2px solid #555;
	padding:0;
	margin:0;
	background:#fff;
	/*
	border-radius:5px;
	box-shadow:3px 3px 8px #444;
	*/
}



/*****************************************************************************************************************************/
/* 点滅 */
/*****************************************************************************************************************************/
.optionView_A.chatTable{
	color:#f00 !important;
	background-color:#ff0 !important;
}
	.optionView_A{
		-webkit-animation:anim-optionView_A 0.8s ease-in-out infinite alternate;
		-moz-animation:anim-optionView_A 0.8s ease-in-out infinite alternate;
		animation:anim-optionView_A 0.8s ease-in-out infinite alternate;
	}
	@-webkit-keyframes anim-optionView_A{
	    0% {opacity:1;}
	    30% {opacity:1;}
	    100% {opacity:0.4;}
	}
	@-moz-keyframes anim-optionView_A{
	    0% {opacity:1;}
	    30% {opacity:1;}
	    100% {opacity:0.4;}
	}
	@keyframes anim-optionView_A{
	    0% {opacity:1;}
	    30% {opacity:1;}
	    100% {opacity:0.4;}
	}