/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 0;
    padding-bottom: 5px;
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, 'MS PGothic', arial, helvetica, sans-serif;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 20px;
    padding-right: 20px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* タイトル：Tableベース */
table.header_base{
    border-spacing:0;
    width:100%;
	text-align: left;
}
/* タイトル：Tableデータ */
table.header_base .scansnap_cloud_logo {
    background-color:#4088FF;
    width: 80px;
    color:white;
	text-align:center;
	vertical-align:middle;
    border-top-left-radius: 8px; 
    border-bottom-left-radius: 8px;
}
/* タイトル：ロゴ・イメージ */
table.header_base .logo{
    max-width: 48px;
    height: 48px;
}
/* タイトル：Tableデータ */
table.header_base .scansnap_cloud_title {
	padding-left: 5px;
    background-color:#4088FF;
    color:white;
	font-size:28px;
	text-align: left;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* タイトル：文字列 */
table.header_base .title_scloud{
    font-weight:bold;
}

.SignalArea {
	margin-top : 15px;
	margin-left : 3%;
	margin-right : 3%;
	width : 94%;
}

/* サービス状態のタイトルTableベース */
table.sig_title_base {
    border-spacing:0;
	width : 100%;
	text-align: center;
}
/* サービス状態のタイトルTableデータ */
table.sig_title_base .sig_title{
	padding-top: 5px;
	padding-bottom: 5px;
    background-color:#C0DEFF;
    color:black;
	text-align:center;
    border-radius: 8px; 
}
/* サービス状態のタイトルTableデータ */
table.sig_title_base .signal_title{
    font-size:20px;
    font-weight:bold;
	vertical-align:middle;
}
/* サービス状態のタイトル:日時 */
table.sig_title_base .signal_datetime{
	padding-left: 15px;
    font-size:16px;
	vertical-align:middle;
}

/* サービス状態のTableベース */
table.signal_base {
    border-spacing:0;
    margin:15px auto 5px auto;
	width : auto;
	text-align: center;
}
/* サービス状態アイコン域のTableデータ */
table.signal_base .signal_img_area{
	padding-left: 1px;
	padding-right: 15px;
	vertical-align:middle;
}
/* サービス状態アイコン */
table.signal_base .signal_img {
    width: 50px;
}

/* サービス状態メッセージ域のTableベース */
table.signal_base .signal_message_area {
	padding-left: 5px;
	padding-right: 5px;
    font-size:18px;
	text-align:left;
}

/* サービス別詳細状態の表示域 */
.ServiceDetailArea {
	margin-left : 3%;
	margin-right : 3%;
	width : 94%;
	text-align: center;
}

/* サービス別詳細状態のタイトルTableベース */
table.dtl_service_title_base {
    border-spacing:0;
	width : 100%;
	text-align: center;
}
/* サービス別詳細状態のタイトルTableデータ */
table.dtl_service_title_base .dtl_service_sig_title{
	padding-top: 5px;
	padding-bottom: 5px;
    background-color:#C0DEFF;
    color:black;
	text-align: center;
    border-radius: 8px;
}
/* サービス別詳細状態のタイトルTableデータ */
table.dtl_service_title_base .dtl_service_signal_title{
    font-size:20px;
    font-weight:bold;
	vertical-align:middle;
}

/* サービス別詳細状態のTableベース */
table.dtl_service_base {
	border:1px solid #000000 ;
    border-spacing:0;
	margin-top : 10px;
	margin-left : auto;
	margin-right : auto;
	width : auto;
	text-align: center;
	vertical-align:middle;
}
/* サービス別詳細状態のヘッダ：サービス */
table.dtl_service_base .dtl_td_h_service{
	border:1px solid #000000 ;
	padding-top: 4px;
	padding-bottom: 4px;
    background-color:#C0DEFF;
    font-size:16px;
	text-align: center;
	vertical-align:middle;
}
/* サービス別詳細状態のヘッダ：状態 */
table.dtl_service_base .dtl_td_h_status{
	border:1px solid #000000 ;
	padding-top: 4px;
	padding-bottom: 4px;
    background-color:#C0DEFF;
    font-size:16px;
	text-align: center;
	vertical-align:middle;
}
/* サービス別詳細状態のデータ：サービス名 */
table.dtl_service_base .dtl_td_d_service{
	border:1px solid #000000 ;
    padding:2px 40px 2px 20px;
	text-align:left;
	vertical-align:middle;
}
/* サービス別詳細状態のデータ：状況 */
table.dtl_service_base .dtl_td_d_status{
	border:1px solid #000000 ;
	padding-left: 15px;
	padding-right: 15px;
	text-align:center;
	vertical-align:middle;
}
/* サービス別詳細状態の状況アイコン */
table.dtl_service_base .ext_td_d_status img {
	display:block;
	max-width: 32px;
	max-height: 32px;
}

/* サービス別詳細状態説明ベース */
table.dtl_service_exp_base {
    border-spacing:0;
    margin:10px auto 15px auto;
	width : auto;
	text-align: left;
	vertical-align:middle;
}

/* サービス別詳細状態の説明：正常アイコン */
table.dtl_service_exp_base .exp_td_normal_img{
	text-align: center;
	vertical-align:middle;
}
/* サービス別詳細状態の説明：正常アイコン：データ */
table.dtl_service_exp_base .exp_normal_img {
	display:block;
	max-width: 32px;
	height: 32px;
}

/* サービス別詳細状態の説明：正常説明 */
table.dtl_service_exp_base .exp_td_normal{
	padding-left: 5px;
    font-size:16px;
	text-align:left;
	vertical-align:middle;
}
/* サービス別詳細状態の説明：異常アイコン */
table.dtl_service_exp_base .exp_td_abnormal_img{
	padding-left: 35px;
	text-align: center;
	vertical-align:middle;
}
/* サービス別詳細状態の説明：異常アイコン：データ */
table.dtl_service_exp_base .exp_error_img {
	display:block;
	max-width: 32px;
	height: 32px;
}
/* サービス別詳細状態の説明：異常説明 */
table.dtl_service_exp_base .exp_td_abnormal{
	padding-left: 5px;
    font-size:16px;
	text-align:left;
}
/* サービス別詳細状態の説明：警告アイコン：データ */
table.dtl_service_exp_base .exp_warning_img {
	display:block;
	max-width: 32px;
	height: 32px;
}
/* サービス別詳細状態の説明：警告説明 */
table.dtl_service_exp_base .exp_td_warning{
	padding-left: 5px;
    font-size:16px;
	text-align:left;
}
/* サービス別詳細状態の説明：メンテナンスアイコン：データ */
table.dtl_service_exp_base .exp_maintenance_img {
	display: block;
	max-width: 32px;
	height: 32px;
}
	/* サービス別詳細状態の説明：メンテナンス説明 */
table.dtl_service_exp_base .exp_td_maintenance {
	padding-left: 5px;
	font-size: 16px;
	text-align: left;
}

/* 外部サービス状態の表示域 */
.ExternalServiceArea {
	margin-left : 3%;
	margin-right : 3%;
	width : 94%;
	text-align: center;
}

/* 外部サービス状態のタイトルTableベース */
table.ext_service_title_base {
    border-spacing:0;
	width : 100%;
	text-align: center;
}
/* 外部サービス状態のタイトルTableデータ */
table.ext_service_title_base .ext_service_sig_title{
	padding-top: 5px;
	padding-bottom: 5px;
    background-color:#C0DEFF;
    color:black;
	text-align: center;
    border-radius: 8px;
}
/* 外部サービス状態のタイトルTableデータ */
table.ext_service_title_base .ext_service_signal_title{
    font-size:20px;
    font-weight:bold;
	vertical-align:middle;
}

/* 外部サービス状態のTableベース */
table.ext_service_base {
	border:1px solid #000000 ;
    border-spacing:0;
	margin-top : 10px;
	margin-left : auto;
	margin-right : auto;
	width : auto;
	text-align: center;
	vertical-align:middle;
}
/* 外部サービス状態のヘッダ：サービス */
table.ext_service_base .ext_td_h_service{
	border:1px solid #000000 ;
	padding-top: 4px;
	padding-bottom: 4px;
    background-color:#C0DEFF;
    font-size:16px;
	text-align: center;
	vertical-align:middle;
}
/* 外部サービス状態のヘッダ：状態 */
table.ext_service_base .ext_td_h_status{
	border:1px solid #000000 ;
	padding-top: 4px;
	padding-bottom: 4px;
    background-color:#C0DEFF;
    font-size:16px;
	text-align: center;
	vertical-align:middle;
}
/* 外部サービス状態のヘッダ：日時 */
table.ext_service_base .ext_td_h_datetime{
	border:1px solid #000000 ;
	padding-top: 4px;
	padding-bottom: 4px;
    background-color:#C0DEFF;
    font-size:16px;
	text-align: center;
	vertical-align:middle;
}
/* 外部サービス状態のデータ：ロゴ */
table.ext_service_base .ext_td_d_service{
	border:1px solid #000000 ;
    padding:2px 40px 2px 20px;
	text-align:left;
	vertical-align:middle;
}
/* 外部サービス状態のデータ：状況 */
table.ext_service_base .ext_td_d_status{
	border:1px solid #000000 ;
	padding-left: 15px;
	padding-right: 15px;
	text-align:center;
	vertical-align:middle;
}
/* 外部サービス状態のデータ：日時 */
table.ext_service_base .ext_td_d_datetime{
	border:1px solid #000000 ;
	padding-left: 15px;
	padding-right: 35px;
    font-size:16px;
	text-align:left;
	vertical-align:middle;
}
/* 外部サービス状態のサービス名テキスト */
table.ext_service_base .ext_td_d_service {
	border: 1px solid #000000;
	padding-left: 15px;
	padding-right: 35px;
	font-size: 16px;
	text-align: center;
	vertical-align: middle;
}
/* 外部サービス状態のロゴアイコン */
table.ext_service_base .ext_logo_img {
	display:block;
	max-width: 200px;
	max-height: 36px;
}
/* 外部サービス状態の状況アイコン */
table.ext_service_base .ext_td_d_status img {
	display:block;
	max-width: 32px;
	max-height: 32px;
}

/* 外部サービス状態の説明ベース */
table.ext_service_exp_base {
    border-spacing:0;
    margin:10px auto 15px auto;
	width : auto;
	text-align: left;
	vertical-align:middle;
}

/* 外部サービス状態の説明：正常アイコン */
table.ext_service_exp_base .exp_td_normal_img {
	padding-left: 35px;
	text-align: center;
	vertical-align: middle;
}
/* 外部サービス状態の説明：正常アイコン：データ */
table.ext_service_exp_base .exp_normal_img {
	display:block;
	max-width: 32px;
	height: 32px;
}

/* 外部サービス状態の説明：正常説明 */
table.ext_service_exp_base .exp_td_normal{
	padding-left: 5px;
    font-size:16px;
	text-align:left;
	vertical-align:middle;
}
/* 外部サービス状態の説明：異常アイコン */
table.ext_service_exp_base .exp_td_abnormal_img{
	padding-left: 35px;
	text-align: center;
	vertical-align:middle;
}
/* 外部サービス状態の説明：異常アイコン：データ */
table.ext_service_exp_base .exp_error_img {
	display:block;
	max-width: 32px;
	height: 32px;
}
/* 外部サービス状態の説明：異常説明 */
table.ext_service_exp_base .exp_td_abnormal{
	padding-left: 5px;
    font-size:16px;
	text-align:left;
}
/* 外部サービス状態の説明：警告アイコン：データ */
table.ext_service_exp_base .exp_warning_img {
	display:block;
	max-width: 32px;
	height: 32px;
}
/* 外部サービス状態の説明：警告説明 */
table.ext_service_exp_base .exp_td_warning{
	padding-left: 5px;
    font-size:16px;
	text-align:left;
}
/* 外部サービス状態の説明：異常アイコン */
table.ext_service_exp_base .exp_td_warning_img {
	padding-left: 35px;
	text-align: center;
	vertical-align: middle;
}
/* 外部サービス状態の説明：警告アイコン：データ */
table.ext_service_exp_base .exp_maintenance_img {
	display: block;
	max-width: 32px;
	height: 32px;
}
/* 外部サービス状態の説明：警告説明 */
table.ext_service_exp_base .exp_td_maintenance {
	padding-left: 5px;
	font-size: 16px;
	text-align: left;
}
/* 外部サービス状態の説明：異常アイコン */
table.ext_service_exp_base .exp_td_maintenance_img {
	padding-left: 35px;
	text-align: center;
	vertical-align: middle;
}

/* タブスタイル */
.tabbox {
    margin-top:15px;
	margin-left : 3%;
	margin-right : 3%;
    background-color:white;
    font-size:0;    /* inline-blockの隙間を無くすため必要 */
	/*width : 94%;*/
}

/* お知らせタブ域のTableデータ */
.info_tab_base{
    display:inline-block;
    margin-top: 0;
    background-color:white;
    color:black;
    font-size:20px;
}

/* タブデザイン */
.info_tab_base .tab_button{
    float: left;
    /*height:24px;*/
    width:200px;
    margin-right:12px;
    padding-top:2px;
    /*padding-bottom:2px;*/

    text-align: center;    /* 中央寄せ */
    text-decoration:none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: black;
}

.info_tab_base .tab_button.show{
    background-color: #C0DEFF;
    font-weight:bold;
}
.info_tab_base .tab_button.show:hover{
    opacity:0.9;
}
.info_tab_base .tab_button.hide{
    background-color:cornflowerblue;
    color:darkblue;
}
.info_tab_base .tab_button.hide:hover{
    color:white;
    font-weight:bold;
    opacity:0.9;
}
/* タブデザイン ここまで */

/* お知らせタブ域のTableデータ */
.info_area_base {
    display:block;
    border-spacing:0;
    border: solid #C0DEFF;
    font-size:20px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-width: 24px 2px 2px 2px;
}

/* お知らせ域のTableベース */
table.info_base{
    border-spacing:0;
	width: 100%;
    height:auto;
	text-align: center;
}

table.history_base{
    border-spacing:0;
	width: 100%;
    height:auto;
	text-align: center;
}

/* お知らせ域のTableデータ */
table.info_base .info_area{
    font-size:16px;
	text-align:left;
}

table.history_base .history_area{
    font-size:16px;
	text-align:left;
}

/* dl書式の記事デザイン */
dl {
    padding:0;
    margin:0;
    font-size:13px;
	padding-bottom:10px;
}
dt{
	/*float: left;*/
    padding-top:2px;
    padding-left:2%;
    border-top: 1px dotted grey;
}
dd{
    padding-top:2px;
    margin-left:7%;
    margin-right:1%;
}

/* ul書式の記事デザイン */
ul{
    padding:0;
    margin:0;
    position:relative;
    font-size:14px;
	padding-bottom:10px;
}
ul li{
    line-height: 1.2;
    padding: 0.5rem 5% 0.5rem 5%;
    border-bottom: dashed 1px silver;
    list-style-type: none;
}

/* フッダー域 */
.footer_div {
	margin-top : 3px;
	margin-left : 3%;
	margin-right : 3%;
	width : 94%;
	bottom: 0;
	padding-bottom: 5px;
	text-align:center;
    font-size:16px;
}

/* 罫線 */
.hr_line {
	width : 100%;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}