@charset "utf-8";

/* 共通テーブル */

table{
	width: 100%; height:auto;
	text-align: justify;
	text-justify: inter-ideograph;
	/*border-collapse:collapse; 隣接するセルのボーダーを重ねて表示します。*/
	}
	
table th{font-size: 12px;}
table td{font-size: 12px;}

table .r_bdnon{
	border-right: none;
}

table .b_bdnon{
	border-bottom: none !important;
}

.tb_thCnt th{text-align:center;}
.tb_trCnt tr{text-align:center;}
.tb_Cnter th,.tb_Cnter td{text-align:center !important;}

.bg_Gray01{background: #f1f3f5 !important;}
.bg_Gray02{background: #eceff2 !important;}
.bg_Gray03{background: #e7ebef !important;}

.tb_f16 td{font-size: 16px;}

.bd_bt_5px th, .bd_bt_5px td{ border-bottom: 5px #fff solid !important;}
.bd_bt_10px th, .bd_bt_10px td{ border-bottom: 10px #fff solid !important;}

/** th 固定スクロール **/
.fixed01{
  position: sticky;
  top: 0;
  color: #fff;
  background: #333;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}

/* 2cell */

table.tb_2cell tr th{
	width: 34%; height: auto;
	padding: 22px 16px 20px 18px;
	background: #d1d9e0/*#eaebf0*/;
	/*font-weight:bold;*/
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	}
	
table.tb_2cell tr td{
	width: 65%; height: auto;
	padding: 22px 16px 20px 18px;
	background: #f0f3f6/*#f4f5f7*/;
	border-bottom: 1px #fff solid;
	}

table.tb_2cell .titleTh th, table.tb_2cell .titleTh td {
	padding: 12px 10px 12px 16px;
	background: #7f91a2;
	color: #fff;
	text-align: center;
	/*font-weight: bold;*/
	border-bottom: 2px #fff solid;
	}
	
table.tb_2cell_s tr th{
	width: 24%; height: auto;
	padding: 22px 16px 20px 18px;
	background: #d1d9e0;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	}
	
table.tb_2cell_s tr td{
	width: 75%; height: auto;
	padding: 22px 16px 20px 18px;
	background: #f0f3f6;
	border-bottom: 1px #fff solid;
	}

table.tb_2cell_s .titleTh th, table.tb_2cell_s .titleTh td {
	padding: 12px 10px 12px 16px;
	background: #7f91a2;
	color: #fff;
	text-align: center;
	border-bottom: 2px #fff solid;
	}
	
	
/* flow */

.flowTb th{
	width: 12%; height: auto; vertical-align:text-top; 
	padding: 20px 0 23px 0; border-bottom: 1px solid #dfdfdf;}
.flowTb td{
	width: 88%; height: auto; padding: 20px 0 23px 0; border-bottom: 1px solid #dfdfdf; }
	
/* other cell */

table.tb_other tr th{
	padding: 22px 18px 20px 18px;
	background: #d1d9e0;
	/*font-weight:bold;*/
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	}
	
table.tb_other tr td{
	padding: 22px 10px 20px 10px;
	background: #f0f3f6/*#f4f5f9*/;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center;
	letter-spacing: 0.05px;
	}

table.tb_other .titleTh th, table.tb_other .titleTh td {
	padding: 15px 18px 13px 18px;
	background: #7f91a2;
	color: #fff;
	text-align: center;
	line-height: 120%;
	border-bottom: 2px #fff solid;
	}
	
/* free cell */

table.tb_free tr th{
	padding: 18px 18px 16px 18px;
	background: #d1d9e0;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center;
	}
	
table.tb_free tr td{
	padding: 18px 10px 16px 10px;
	background: #f4f5f9;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center;
	letter-spacing: 0.05px;
	}

table.tb_free .titleTh th, table.tb_free .titleTh td {
	padding: 15px 18px 13px 18px;
	background: #7f91a2;
	color: #fff;
	text-align: center;
	line-height: 120%;
	border-bottom: 2px #fff solid;
	}
	
/* price cell */

table.tb_price tr th{
	padding: 18px 18px 15px 18px;
	background: #d1d9e0;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	font-weight: bold;
	}
	
table.tb_price tr td{
	padding: 18px 10px 15px 10px;
	background: #f4f5f9;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center;
	letter-spacing: 0.05px;
	}

table.tb_price .titleTh th, table.tb_price .titleTh td {
	padding: 15px 18px 13px 18px;
	background: #7f91a2;
	color: #fff;
	text-align: center;
	line-height: 120%;
	border-bottom: 2px #fff solid;
	}
	
.pd_price th,.pd_price td{padding: 22px 18px 21px 18px !important;}

/* half cell 休暇予定表など */

table.tb_half tr th{
	padding: 18px 18px 16px 18px;
	background: #d1d9e0;
	/*font-weight:bold;*/
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center;
	}
	
table.tb_half tr td{
	padding: 18px 18px 16px 18px;
	background: #f0f3f6;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center;
	letter-spacing: 0.05px;
	}

table.tb_half .titleTh th, table.tb_half .titleTh td {
	padding: 15px 18px 13px 18px;
	background: #7f91a2;
	color: #fff;
	text-align: center;
	line-height: 120%;
	border-bottom: 2px #fff solid;
	width: 50%;
	}


	/* カラム数の変更 */
.colum2-4{
	column-count: 4;
}
	
<!-- table width指定 -->
<!-- 3box th34ｘtd32 | 4box th25ｘtd24 | 5box th20ｘtd19  -->

.pd_w12 th,.pd_w12 td{padding: 22px 12px 20px 12px !important;}

.tb_w11{width: 11%;}
.tb_w12{width: 12%;}
.tb_w13{width: 13%;}
.tb_w14{width: 14%;}
.tb_w15{width: 15%;}
.tb_w16{width: 16%;}
.tb_w18{width: 18%;}
.tb_w19{width: 19%;}
.tb_w20{width: 20%;}
.tb_w21{width: 21%;}
.tb_w22{width: 22%;}
.tb_w24{width: 24%;}
.tb_w25{width: 25%;}
.tb_w26{width: 26%;}
.tb_w27{width: 27%;}
.tb_w29{width: 29%;}
.tb_w30{width: 30%;}
.tb_w31{width: 31%;}
.tb_w32{width: 32%;}
.tb_w32{width: 33%;}
.tb_w34{width: 34%;}
.tb_w36{width: 36%;}
.tb_w37{width: 37%;}
.tb_w46{width: 46%;}
.tb_w49{width: 49%;}
.tb_w58{width: 58%;}
.tb_w74{width: 74%;}


@media only screen and (max-width: 768px) {
    table .sp-w10p{width:10%}
    table .sp-w20p{width:20%;}
    table .sp-w25p{width:25%;}
    table .sp-w30p{width:30%;}
    table .sp-w40p{width:40%;}
    table .sp-w50p{width:50%;}
    table .sp-w60p{width:60%;}
    table .sp-w70p{width:70%;}
    table .sp-w80p{width:80%;}
    table .sp-w90p{width:90%;}
    table .sp-w100p{width:100%;}

	
}

/* tb_blue */

table.tb_blue tr th{
	padding: 22px 18px 20px 18px;
	background: #d1d9e0;
	/*font-weight:bold;*/
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	}
	
table.tb_blue tr td{
	padding: 22px 10px 20px 10px;
	background: #f4f5f9;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center;
	letter-spacing: 0.05px;
	vertical-align:text-top;
	}

table.tb_blue .titleTh th {
	padding: 13px 18px 11px 18px;
	background: #458cb1;
	color: #fff;
	text-align: center;
	line-height: 120%;
	border-bottom: 2px #fff solid;
	}
	
table.tb_blue .titleTh td {
	padding: 13px 18px 11px 18px;
	background: #7f91a2;
	color: #fff;
	text-align: center;
	line-height: 120%;
	border-bottom: 2px #fff solid;
	}

/* server cell */

table.tb_server tr th{
	width: 108px; height: auto; /* w128px */
	padding: 22px 10px 20px 10px;
	background: #d1d9e0;
	/*font-weight:bold;*/
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	}
	
table.tb_server tr td{
	padding: 22px 10px 20px 10px;
	background: #f4f5f9;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center;
	letter-spacing: 0.05px;
	}

table.tb_server .titleTh th, table.tb_server .titleTh td {
	padding: 10px 5px 8px 5px;
	text-align: center;
	line-height: 120%;
	border-bottom: 2px #fff solid;
	}

.tb_w197{width: 177px;}
.tb_w90{width: 70px;}

/* server color */

.tb_dedicated .titleTh th,.tb_dedicated .titleTh td{
	background: #ffd24d !important; color:#333 !important;}
.tb_dedicated tr th { background: #ffe494 !important;}
.tb_dedicated tr td { background: #ffedb8 !important;}

.tb_vps .titleTh th,.tb_vps .titleTh td{
	background: #a3d900 !important; color:#333  !important;}
.tb_vps tr th { background: #c8e866 !important;}
.tb_vps tr td { background: #daf099 !important;}

.tb_win .titleTh th,.tb_win .titleTh td{
	background: #9ddcf0 !important; color:#333  !important;}
.tb_win tr th { background: #ceedf7 !important;}
.tb_win tr td { background: #def3fa !important;}

.tb_cloud .titleTh th,.tb_cloud .titleTh td{
	background: #4dd2ff !important; color:#333  !important;}
.tb_cloud tr th { background: #94e4ff !important;}
.tb_cloud tr td { background: #b8edff !important;}


/* managed cell */

table.tb_managed tr th{
	width: 232px; height: auto;
	padding: 17px 10px 15px 10px;
	background: #d1d9e0;
	/*font-weight:bold;*/
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	}
	
table.tb_managed tr td{
	width: 125px; height: auto;
	padding: 17px 10px 15px 10px;
	background: #f4f5f9;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	letter-spacing: 0.05px;
	}

table.tb_managed .titleTh th {
	padding: 10px 5px 8px 5px;
	border-bottom: 2px #fff solid;
	color:#fff;
	background: #7f91a2;
	}
	
table.tb_managed .titleTh td {
	padding: 12px 5px 10px 5px;
	border-bottom: 2px #fff solid;
	color:#fff;
	font-size: 13px !important;
	}
	
/* managed color */

.th_bg_fll{background:#0085b2 !important;}
.bg_Managed01{background:#cce7f0 !important;}
.th_bg_right{background:#85b200 !important;}
.bg_Managed02{background:#e7f0cc !important;}
.th_bg_self{background:#dda501 !important;}
.bg_Managed03{background:#f8edcc !important;}

.bg_gray_r{background:#ccc !important;}
.bg_red{background:#e81928 !important;}
.bg_red_r{background:#fce4e6 !important;}

.tr_bg_red th,.tr_bg_red td{background: #fdecec !important;}
.tr_bg_green th,.tr_bg_green td{background: #e8fceb !important;}
.tr_bg_blue th,.tr_bg_blue td{background: #dff6fa !important;}
.tr_bg_grey th,.tr_bg_grey td{background: #f2f2f2 !important;}

.th_pad01{padding: 5px 0 4px 0;}
.th_padbox{ width:100px; padding: 4px 5px 3px 5px; text-align:center;}

a:hover .th_bg_fll{background:#02afe9 !important;}
a:hover .th_bg_right{background:#99cc00 !important;}
a:hover .th_bg_self{background:#f6b802 !important;}


@media only screen and (max-width: 768px) {
    
    table.tb_other .titleTh th, 
    table.tb_other .titleTh td {
        padding: 15px 10px 13px 10px;
        background: #7f91a2;
        color: #fff;
        text-align: center;
        line-height: 120%;
        border-bottom: 2px #fff solid;
    }
    table.tb_other tr th {
        padding: 22px 10px 20px 10px;
        background: #d1d9e0;
        /* font-weight: bold; */
        border-right: 1px #fff solid;
        border-bottom: 1px #fff solid;
    }
    .flowTb th {
        width: 20%;
        height: auto;
        vertical-align: text-top;
        padding: 20px 15px 23px 0;
        border-bottom: 1px solid #dfdfdf;
    }
    .flowTb td {
        width: 80%;
        height: auto;
        padding: 20px 0 23px 0;
        border-bottom: 1px solid #dfdfdf;
    }
    table.tb_free .titleTh th, table.tb_free .titleTh td {
        padding: 15px 10px 13px 10px;
    }
    table.tb_free tr th,
    table.tb_free tr td {
        padding: 18px 10px 16px 10px;
    }
    
    table.tb_2cell tr th {
        padding: 22px 10px 20px 10px;
    }
    table.tb_2cell tr td {
        padding: 22px 10px 20px 10px;
    }
    table.tb_managed tr th{
        width:30% !important;
    }
    table.tb_managed tr td{
        width:23.33% !important;
        padding:17px 5px !important;
    }
    
        /** th 固定スクロール **/
    .fixed01{
        position: sticky;
        top: 55px;
        color: #fff;
        background: #333;
        &:before{
            content: "";
            position: absolute;
            top: -1px;
            left: -1px;
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
        }
    }

			/* カラム数の変更 */
			.colum2-4{
				column-count: 2;
			}
}