@charset "utf-8";

/* 共通テーブル */

table {
	width: 100%;
	height:auto;
	border-collapse:collapse;
}

table th{font-size: 13px;}
table td{font-size: 13px;}

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_02 tr th{
	width: 34%; height: auto;
	padding: 12px 16px 10px 18px;
	background: #d1d9e0/*#eaebf0*/;
	/*font-weight:bold;*/
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	}

table.tb_2cell_02 tr td{
	width: 65%; height: auto;
	padding: 12px 16px 10px 18px;
	background: #f0f3f6/*#f4f5f7*/;
	border-bottom: 1px #fff solid;
	}

table.tb_2cell .titleTh th, table.tb_2cell .titleTh td,table.tb_2cell_02 .titleTh th ,table.tb_2cell_02 .titleTh td {
	padding: 12px 10px 12px 16px;
	background: #5b6f82/*#7f91a2*/;
	color: #fff;
	text-align: center;
	/*font-weight: bold;*/
	border-bottom: 2px #fff solid;
	}

table.tb_2cell_s tr th{
	width: 30%; height: auto;
	padding: 16px 24px;
	background: #d1d9e0;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	}

table.tb_2cell_s tr td{
	width: 75%; height: auto;
	padding: 16px 24px;
	background: #f0f3f6;
	border-bottom: 1px #fff solid;
	}

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

table.tb_2cell_s2 tr th {
	width: 25%;
	height: auto;
	padding: 16px 24px;
	background: #d1d9e0;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
}
@media (max-width: 480px) {
	table.tb_2cell_s2 tr th {
		padding: 16px 8px;
	}
}
table.tb_2cell_s2 tr td {
	width: 75%;
	height: auto;
	padding: 16px 24px;
	background: #f0f3f6;
	border-bottom: 1px #fff solid;
}

table.tb_2cell_s2 .titleTh th,
table.tb_2cell_s2 .titleTh td {
	padding: 16px 24px;
	background: #5b6f82
		/*#7f91a2*/
	;
	color: #fff;
	text-align: center;
	border-bottom: 2px #fff solid;
}

.columns2_gap2em{
	column-count: 2;
	column-gap: 2em;
}
@media (max-width: 480px) {
.columns2_gap2em {
		column-count: 1;
	}
}
.columns2_gap2em li {
	margin-bottom: 4px;
}

li.standard {
	position: relative;
}
.standard::after {
	position: absolute;
	content: '';
	display: inline-block;
	width: 32px;
	height: 18px;
	background: url(/images/icon/icon_standard.svg) no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin-left: 6px;
	top: 50%;
	transform: translateY(-50%);
}

/* flow */

.flowTb th{
	width: 16%; 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;
	line-height: 160%;
	/*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: #5b6f82/*#7f91a2*/;
	color: #fff;
	text-align: center;
	line-height: 140%;
	border-bottom: 2px #fff solid;
	}

table.tb_free tr th {
	padding: 18px 18px 16px 18px;
	background: #e7ebf0;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center;
}

table.tb_free tr td{
	padding: 18px 10px 16px 10px;
	background: #f0f3f6;
	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: #5b6f82/*#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: #5b6f82/*#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: #5b6f82/*#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;
	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: #5b6f82/*#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;
	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 cell */

table.tb_server tr th {
	width: 108px;
	height: auto;
	/* w128px */
	padding: 22px 10px 20px 10px;
	background: #d1d9e0;
	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: #fcce4f !important;
	color: #333 !important;
}

.tb_vps .titleTh th,
.tb_vps .titleTh td {
	background: #f7c2c2 !important;
	color: #333 !important;
}

.tb_cfb .titleTh th,
.tb_cfb .titleTh td {
	background: #60dda5 !important;
	color: #333 !important;
}
.tb_seedscloud .titleTh th,
.tb_seedscloud .titleTh td {
	background: #91c5f3 !important;
	color: #333 !important;
}

.tb_win .titleTh th,
.tb_win .titleTh td {
	background: #83e3e3 !important;
	color: #333 !important;
}

.tb_cloud .titleTh th,
.tb_cloud .titleTh td {
	background: #d9bdef !important;
	color: #333 !important;
}

.tb_idcf .titleTh th,
.tb_idcf .titleTh td {
	background: #8dc5d5 !important;
	color: #333 !important;
}

/* managed cell */
table.tb_managed tr th{
	width: 232px; height: auto;
	padding: 17px 10px 15px 10px;
	background: #d1d9e0;
	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: #5b6f82/*#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;}
.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: #5b6f82/*#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;
			}
}

/* 表組の中に縦書き */
.vertical-table th,
.vertical-table td {
	position: relative;
}

.vertical-table .text-container {
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	text-orientation: upright;
	width: 100%;
	letter-spacing: .4em;
}

.vertical th{
	padding: 18px 10px 16px 10px !important;
}


.table-container2 {
	overflow-x: auto;
	/* 横スクロールを有効にする */
	margin-bottom: 10px;
	/* 下にマージンを追加して、他の要素との間隔を確保 */
}

/* ウィンドウ幅が小さくなった時に横スクロール */
.table-scroll {
	width: 100%;
	/* テーブルの幅を100%に設定 */
	border-collapse: collapse;
	/* ボーダーの重なりを避ける */
}

.table-scroll th,
.table-scroll td {
	padding: 16px;
	/* セルの内側の余白 */
	border: 1px solid #fff;
	/* セルの境界線 */
	text-align: left;
	/* テキストを左揃え */
}

.table-scroll th {
	background: #e7ebf0;
	/* ヘッダーの背景色 */
	font-weight: bold;
	/* ヘッダーのフォントを太字に */
}
.table-scroll td {
	background: #f0f3f6;
}

.theader th{
	background: #5b6f82;
	color: #fff;
}

.table-scroll th .icon {
	margin-right: 2px;
	/* アイコンとテキストの間に余白を追加 */
	vertical-align: middle;
	/* アイコンをテキストの中間に揃える */
}

@media (max-width: 600px) {
	.table-scroll th,
	.table-scroll td {
		white-space: nowrap;
		/* セルのテキストを折り返さない */
	}
}

.icon-cell::before {
	content: '★';
	left: 0;
	top: 0;
	color: #e95d2c;
	width: 1em;
	/* アイコンの幅 */
	text-align: center;
	/* アイコンの位置を中央に */
	margin-right: 0.5em;
	/* テキストとの間隔 */
}