/*----------------------------------------------------
　index.html
----------------------------------------------------*/

.div_item{
	background-color: #F0F0F0;/*Before、After全体の背景色(グレー)*/
}
/*BeforeとAfterのボックス*/
.remote4u_box{
	display: flex;
	justify-content: flex-start;/*左から並べる*/
	margin:1em;
}

.remote4u_img_box{
	display: flex;
	justify-content: center;/*左から並べる*/
	margin:1em;
}

/*左側のボックス BeforeとAfterの共通箇所*/
.remote4u_left_box{
	width: 25%;
	height: 50px;
	font-weight: 700;
	text-align: center;
	line-height:50px;
	color:#FFF;/*共通の文字色*/
}

/*Beforeの場合*/
.remote4u_left_box.before{
	background-color:#4682B4;/*Beforeの背景色*/
	border:1px solid #4682B4;/*Beforeの線の色*/
}
/*Afterの場合*/
.remote4u_left_box.after{
	background-color:#FF8C00;/*Afterの背景色*/
	border:1px solid #FF8C00;/*Afterの線の色*/
}

/*右側のボックス BeforeとAfterの共通箇所*/
.remote4u_right_box{
	width: 75%;
	height: 50px;
	font-weight: 700;
	/* padding-left:0.5em; */
	padding-left:0.3em;
	background-color:#FFF;/*共通の背景色*/
	color:#333;/*共通の文字色*/
}

/*1行の場合*/
.remote4u_right_box.line_1{
	/* line-height: 50px; */
	line-height:48px;
	padding-right:0.3em;
}
/*2行の場合*/
.remote4u_right_box.line_2{
	/* line-height: 25px; */
	line-height:1;
	padding-top:0.3em;
	padding-right:0.3em;
}

@media only screen and (max-width: 768px) {
	.remote4u_right_box.line_1{
	line-height:1;
	padding-top:0.3em;
	}
	.remote4u_right_box.line_2{
	line-height:1;
	padding-top:0.3em;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
.remote4u_right_box.line_1,.remote4u_right_box.line_2{
	/* line-height: 2; */
	line-height:1;
	padding-top:0.3em;
	}
	.remote4u_right_box.line_3{
	padding-top:0.1em;
	}
}

/*Beforeの場合*/
.remote4u_right_box.before{
	border:1px solid #4682B4;/*Beforeの線の色*/
}
/*Afterの場合*/
.remote4u_right_box.after{
	border:1px solid #FF8C00;/*Afterの線の色*/
}

/* 下三角(▼) */
.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:0.5em 0;
}


/*----------------------------------------------------
　プラン紹介
----------------------------------------------------*/
/*全プラン共通*/
.remote4u_plan_title{
	color:#F8F8FF;
	width:180px;
	font-weight: bold;
	text-align: center;
	padding:8px;
}
.remote4u_plan_title .c-text{/*刷新にて追加*/
	margin-top:0;
}

@media only screen and (max-width: 768px) {
.remote4u_plan_title {
	width:100%;
	}
}

/*アルファベットの文字サイズ*/
.remote4u_plan_title .big_txt{
	font-size: 180%;
	font-weight: bold;
}

/*プレミアムプラン*/
.remote4u_plan_title.premium,ul.icon-area li.premium{
	background-color: #e60012;/*プレミアムの背景の色*/
}
/*スタンダードプラン*/
.remote4u_plan_title.standard,ul.icon-area li.standard{
	background-color: #0081cc;/*スタンダードの背景の色*/
}
/*エントリープラン*/
.remote4u_plan_title.entry,ul.icon-area li.entry{
	background-color: #45b035;/*エントリーの背景の色*/
}

/*goodのアイコン*/
.bg_good{
	background-color: #425ba8;
}

/*----------------------------------------------------
　プラン紹介、機能紹介共通
----------------------------------------------------*/

/*h3の下のアイコン 親要素*/
ul.icon-area {
	display: flex;
	justify-content: space-between;/*最初と最後の子要素を両端に配置、残りの要素は均等に配置*/
	flex-wrap: wrap;/*子要素を折り返して、上から下へ複数行に並べる*/
}

/*h3の下のアイコン 子要素 共通*/
ul.icon-area li{
	flex-basis: calc((100% - 40px) /6);/*1つの項目の幅＝全体から空白分の40pxを引いた残りの幅を6等分にする*/
	/* font-size:75%; 刷新にて変更*/
	color:#fff;/*白*/
	font-weight: 700;
	text-align: center;
	margin-top:5px;
	padding:3px 0;
	letter-spacing: 0.1em;/*文字間隔*/
}

@media only screen and (max-width: 768px) {
ul.icon-area li{
	flex-basis: calc((100% - 20px) /4);/*スマホ時：1つの項目の幅＝全体から空白分の20pxを引いた残りの幅を3等分にする*/
}
ul.icon-area li{
	font-size:72%;
	letter-spacing: 0em;/*文字間隔*/
	}
}

/*ワイヤ*/
ul.icon-area li.wire{
	background-color: #f0b400;
	border-radius:2em;/*角丸*/
}

/*形彫*/
ul.icon-area li.die{
	background-color: #3797d4;
	border-radius:2em;/*角丸*/
	letter-spacing: 0.3em;
}

/*イントラ*/
ul.icon-area li.intra{
	border: 1px solid #00536e;
	color: #00536e;
}

/*非該当 共通*/
ul.icon-area li.bg_none{
	background-color: #e2e1e6;
	border: none;
	color:#fff;
}
ul.icon-area li.pc_none{
	display:none;
}
@media only screen and (max-width: 768px) {
ul.icon-area li.pc_none{
	display:inline;
}
}


/*刷新にて追加*/
.bg_good.remote4u_good{
	font-size:inherit;
}
.remote4u_plan_text{
	margin-top:0;
}
.remote4u-normal_list{
    margin-bottom:16px;
}
.remote4u-normal_list ul li,.remote4u-normal_list ol li {
    font-size: 100%;
	list-style-type: disc;
	line-height: 1.5;
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin-bottom: 4px;
    margin-left: 20px;
    padding-right: 8px;
}
.c-text.remote4u_notes-nomal{
	margin-top:0;
}
.remote4u_notes-nomal{
    line-height: 1.5;
    margin-bottom: 0.4em;
    text-indent: -1.2em;
    padding-left: 1.2em;
}

/*ドキュメントリンクテーブル用*/
.fa-heading_table_content.remote4u_doclink_table td, .fa-heading_table_content.remote4u_doclink_table th {
    vertical-align: middle;
}

/*プランの指定は、プラン紹介のタイトルと同じCSSを使用 ※上部参照*/

/*----------------------------------------------------
　機能紹介共通
----------------------------------------------------*/

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

/*グレーのボックス*/
.remote4u_fun_box{
	width:70%;
	margin:50px auto 20px;
	background-color: #F0F0F0;
	padding:2em;
}

@media only screen and (max-width: 768px) {
.remote4u_fun_box{
	width:auto;
}
}


/*グレーのボックス内のタイトル*/
.remote4u_fun_box_title{
	/* font-size:100%; */
	font-size:16px;
	font-weight: 700;
	border-bottom: 1px solid #9fa0a0;/*下線*/
	margin-bottom:10px;
}

/*背景有りのタイトルテキスト共通*/
.fun_icon{
	color: #FFF;
	/* font-size: 80%; */
	font-weight: 800;
	padding: 3.5px 10px;
	text-align: center;
	display: inline-block;
	letter-spacing: 0.1em;
	margin-top:10px
}

@media only screen and (max-width: 768px) {
.fun_icon{
	font-size: 90%;
}
}

/*業務効率化*/
.bg_efficiency{
	background-color: #006c2d;
}

/*人材サポート*/
.bg_support{
	background-color: #be0008;	
}

/*お客様の声*/
.fun_icon.bg_voice{
	background-color: #9fa0a0;
	border:1px solid #9fa0a0;
}

/*Good*/
.fun_icon.bg_good{
	background-color: #425ba8;
	border:1px solid #425ba8;
}

/*お客様の声、Good共通 説明文のボックス*/
.remote4u_fun_textbox{
	padding:0.8em;
}

/*お客様の声*/
.remote4u_fun_textbox.voice{
	border:1px solid #9fa0a0;
	background-color: #fff;
}

/*Good*/
.remote4u_fun_textbox.good{
	border:1px solid #d3edfb;
	background-color: #d3edfb;
}

/*----------------------------------------------------
　メール通知機能
----------------------------------------------------*/

/* メール通知導入効果事例表 */
.mailnotification_effect_box{
	width: 60%;
	margin: 0 auto;
}
@media only screen and (max-width: 768px) {
.mailnotification_effect_box{
	width: auto;
}
}

/* メール通知導入効果事例表 */
.mailnotification_effect_fbox{
	display: flex;
}
@media only screen and (max-width: 768px) {
.mailnotification_effect_fbox{
	flex-direction: column;
}
}

/* メール通知導入効果事例表(項目） */
.mailnotification_effect_fbox_item{
	background-color:  #d3edfb;
	width: 100%;
	margin: 0.5em;
}
@media only screen and (max-width: 768px) {
.mailnotification_effect_fbox_item{
	margin: 5px 0;
}
}

/* メール通知導入効果事例表(導入効果事例) */
.mail_notif_effect_title{
	background-color: #87ceeb;
	text-align: center;
	padding: 0.2em;
}
/* メール通知導入効果事例表(導入効果事例)テキスト */
.mail_notif_effect_title.text{
	font-size: 150%;
	font-weight: 800;
}
/* メール通知導入効果事例表(機械アイドル時間) */
.mail_notif_effect_idletime{
	text-align: center;
	padding:0.2em 0;
}
/* メール通知導入効果事例表(短縮効果) */
.mail_notif_effect_timesave{
	text-align: center;
	line-height: 150%;
	margin-top: 25px;
}
@media only screen and (max-width: 768px) {
.mail_notif_effect_timesave{
	width:auto;
}
}

/* メール通知導入効果事例表(短縮効果)テキストサブジェクト */
.mail_notif_effect_timesave_text_sbj{
	color: #dc143c;
	font-weight: 800;
	font-size: 120%;
}
/* メール通知導入効果事例表(短縮効果)テキスト(パーセンテージ部分) */
.mail_notif_effect_timesave_text_percentage{
	color: #dc143c;
	font-weight: 800;
	font-size: 150%;
}

/*----------------------------------------------------
　自動配信レポート機能
----------------------------------------------------*/

.autorepo-image_box{
	max-width: 627px;
	margin:0 auto;
}

.autorepo-text{
	text-align: left;
	font-size:75%;
}

/*----------------------------------------------------
　WEBレポート機能
----------------------------------------------------*/
.webrepo_box{
	/* font-size:80%; */
	font-size:16px;
	border:1px solid #9fa0a0;
	/* width:100%; */
	width:fit-content;
	text-align: center;
	margin:10px auto;
	padding:5px 8px;
	/* max-width: 480px; */
}


/*----------------------------------------------------
　iQ Care Remote4U接続拡張
----------------------------------------------------*/
.exp_box {
	flex-basis: 50%;
}
@media only screen and (max-width: 768px) {
.exp_box {
	flex-basis: 100%;
}
}

/*接続拡張(背景有りのタイトルテキスト)*/
.exp_icon{
	color: #fff;
	/* font-size: 70%; */
	font-weight: 800;
	padding: 4px 10px;
	text-align: center;
	/* display:inline-block; */
	margin-top:10px;
	width:fit-content;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}


/*接続拡張タイトル(クラウド版)*/
.bg_exp_title_clowd{
	background-color: #000000;
}