/*----------------------------------------------------
　共通
----------------------------------------------------*/
/*ドキュメントリンクテーブル用*/
.fa-heading_table_content.remote4u_doclink_table td, .fa-heading_table_content.remote4u_doclink_table th {
    vertical-align: middle;
}
.remote4u_notes-nomal{
    line-height: 1.5;
    margin-bottom: 0.4em;
    text-indent: -1.2em;
    padding-left: 1.2em;
}
.link_button{
	display: inline-block;
	padding: 3px 10px;
	background-color: #eee;
	border: 1px solid #c8c8c8;
	text-align: center;
	margin-left: auto;
}


/*----------------------------------------------------
　機能紹介共通
----------------------------------------------------*/
/*活用事例 グレーボックス*/
.remote4u_fun_box_ex{
	background-color:#F0F0F0;
	padding:20px;
}

.remote4u_fun_box_ex_txt{
	font-size:100%;
	font-weight: 800;
}

/*活用事例 ネイビーのテキストボックス*/
.fun_caption{
	color: #FFF;
	background-color: #375372;
	padding: 5px 10px;
	text-align: center;
	display: inline-block;
	letter-spacing: 0.1em;
}

@media only screen and (max-width: 768px) {
.fun_caption{
	width:100%;
	padding: 5px 0;
}
}

/*活用事例 ネイビーのボックスのテキスト(フォントサイズ：通常)*/
.fun_cap_font_n{
	font-size: 80%;
	font-weight: 800;
}
/*活用事例 ネイビーのボックスのテキスト(フォントサイズ：大)*/
.fun_cap_font_b{
	font-size: 130%;
	font-weight: 800;
}


/*----------------------------------------------------
　ダッシュボード
----------------------------------------------------*/

/*ログイン画面コメント枠*/
.login_disp_cmt_box{
	width:50%;
	margin:2px auto 2px;
}
@media only screen and (max-width: 768px) {
.login_disp_cmt_box{
	width:auto;
}
}

/*ログイン画面コメント*/
.login_disp_cmt{
	width:auto;
	text-align:left;
}
@media only screen and (max-width: 768px) {
.login_disp_cmt{
	width:auto;
}
}

/*角丸*/
.rad-area{
	font-size:90%;
	color:#fff;/*白*/
	font-weight: 700;
	text-align: center;
	padding:3px 0;
	letter-spacing: 0.1em;/*文字間隔*/
	border-radius:2em;/*角丸*/
}

/*正常稼働(ダッシュボード)*/
.rad-area.ok{
	background-color: #45b035;
	letter-spacing: 0.3em;
	width: 100%;
}

/*異常(ダッシュボード)*/
.rad-area.ng{
	background-color: #c82d3f;
	letter-spacing: 0.3em;
	width: 100%;
}

/*白のボックス(ダッシュボード)*/
.remote4u_fun_box_dashboard{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: #FFF;
	width:90%;
	margin:20px auto 0;
}
.remote4u_fun_box_dashboard .div_item{	
	width:calc((100% - 60px)/3);
	box-sizing: border-box;
	padding:20px;
	text-align: center;
}

@media only screen and (max-width: 768px) {
.remote4u_fun_box_dashboard{
	width:100%;
	justify-content: center;
	}
.remote4u_fun_box_dashboard .div_item{	
	width:100%;
}
}
@media only screen and (min-width: 769px) and (max-width: 820px) {
.remote4u_fun_box_dashboard{
	width:100%;
	justify-content: center;
	}
.remote4u_fun_box_dashboard .div_item{
	width:calc((100% - 30px)/3);
	padding:20px 6px;
}
}

/*----------------------------------------------------
　リモート診断
----------------------------------------------------*/

.remote4u_fun_imagetitle{
	display: flex;
	justify-content: center;
}
.remote4u_fun_imagetitle div{
	width: 444px;
	max-width: 444px;
}
@media only screen and (max-width: 768px) {
.remote4u_fun_imagetitle div{
	width:100%;
}
	}

/*画像の下の紹介文 左寄せのテキストボックスを中心に配置する*/
.remote4u_fun_imagetext{
	display: flex;
	justify-content: center;
}

.remote4u_fun_box_diagnosis{
	text-align: center;
	width:25%;
	margin-top:20px
}
@media only screen and (max-width: 768px) {
.remote4u_fun_box_diagnosis{
	width:100%;
}
	}

/* 事例フロー要素領域・幅 */
.example_w{
	width: 30%;
}
@media only screen and (max-width: 768px) {
.example_w{
	width:100%;
	margin:20px auto;
	text-align: center;
}
}

/* フレックス */
.simple_fbox{
	display: flex;
	margin-top:20px;
}
@media only screen and (max-width: 768px) {
.simple_fbox{
	flex-direction: column;
}
}

/* 事例フロー三角領域・高さ */
.example_triangle_h{
	height: 100%;
	margin:0 10px
}
@media only screen and (max-width: 768px) {
.example_triangle_h{
	height: 20px;
}
}

/* 事例フロー三角 */
/* 三角 */
.triangle{
	width: 0;
	height: 0;
	border-left: 20px solid #c0c0c0;
	border-bottom: 30px solid transparent;
	border-top: 30px solid transparent;
}
@media only screen and (max-width: 768px) {
.triangle{
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-top: 20px solid #c0c0c0;
}
}

/* 三角(配置) */
.remote4u_trianglebox{
	display: flex;
	justify-content: center;/*真ん中から並べる*/
	margin:5em 0;
}
@media only screen and (max-width: 768px) {
.remote4u_trianglebox{
	display: flex;
	justify-content: center;/*真ん中から並べる*/
	margin:0.5em 0;
}
}