.certificate-tag{
    margin-left: 1em;
}
.certificate-tag p{
    position: relative;
    padding: .25em 0 .5em .75em;
    border-left: 6px solid #3498db;
}
.certificate-tag p::after{
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 0;
    border-bottom: 1px solid #ccc;
}
.certificate-tag{

}
.certificate-tag ul li {
  position: relative;
  font-size: 0.9em;
  margin-left: 1.2em;
  line-height: 1.5em;
}
.certificate-tag ul li::after,
.certificate-tag ul li::before {
  display: block;
  content: '';
  position: absolute;
}
.certificate-tag ul li::after {
  top: 0.25em;
  left: -1.2em;
  width: 14px;
  height: 14px;
  background-color: #c9d2d8;
  border-radius: 100%;
    
}
.certificate-tag ul li::before {
  z-index: 2;
  top: 0.525em;
  left: -0.975em;
  width: 4px;
  height: 4px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.gather{
    font-weight:lighter;
    text-align: right;
    text-decoration: underline;
}

/*
    業務写真背景
-------------------*/
.productimage{
    width: 75%;
    padding: 1.5em;
    margin-bottom: 1em;
    left: 0;
    background-color: #F3F6F8;
    box-shadow: -2px 5px 5px #e8d3c7; /*影*/
    border-radius: 25px; /*角の丸み*/
}

/*
    業務説明枠
-------------------*/
.productcontainer{
    margin: 1em auto 1em 0.25em;
    padding: 0.75em;
    width: 75%;
    color: #333; /*文字色*/
    font-weight: bold;
    border: 7px solid #FA9B01; /*線の太さ・色*/
    background-color: #fff; /*背景色*/
    box-shadow: -2px 5px 5px #e8d3c7; /*影*/
    border-radius: 50px; /*角の丸み*/    
}
.productcontainer p{
    margin: 0.5em 0;
}
.productcontainer dt{
    font-size: 0.9em;
}
.productcontainer dd{
    font-size: 0.75em;
    margin-bottom: 1em;
    margin-left: 1em;
    font-weight: normal;
}

/*
    資格者table関連
-------------------*/
table.certificate-table {
	width: 100%;
	margin:1em 0 4em;
	border: 1px solid #ccc;
	border-spacing:0px;
	}
table.certificate-table tr th,
table.certificate-table tr td {
	text-align: center;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	/*padding: 3px;*/
	}
table.certificate-table thead tr {
	background: #c7ebc9;
	}
table.certificate-table tfoot tr {
	background: #86bd7e;
	color:#fff;
	}
table.certificate-table tbody.areaA tr {
	background: #ffc;
	}
table.certificate-table tbody.areaB tr {
	background: #e1f7fa;
	}
table.certificate-table tbody.areaC tr {
	background: #ffe9da;
	}
table.certificate-table tbody.areaD tr {
	background: #e1fae4;
	}



@media screen and (max-width: 481px) {  /*ここからメディアクエリ*/
/*
    業務写真
-------------------*/
.productimage{
    width: 90%;
    margin: 0 auto;
    padding: 1em;
}
/*
    業務説明枠
-------------------*/
h3 span{
     font-size: 0.75em;   
    }
.productcontainer{
    margin: 0.5em;
    width: 98%;
    }

    
table.certificate-table {
	border:none
	}
table.certificate-table thead {
	display: none;   /*theadは非表示に*/
	}
table.certificate-table tr {
	display: block;  /*trをブロックレベルに*/
	margin-bottom:.5em;
	border-bottom:1px solid #ccc;
	box-shadow:0 2px 2px #ddd;
	}
table.certificate-table tr td {
	display:block;  /*tdをブロックレベルに（セルをやめる）*/
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom:none;
	}
table.certificate-table tr td::before {   /*tdに擬似要素 ::before*/
	content: attr(aria-label);  /*aria-label属性の値をコンテンツに*/
	float: left;                /*テキストを左寄せにする*/
	font-weight:bold;
	padding-left:.7em
	}
table.certificate-table tr td::after {   /*クリアフィックス（コレは不要かもしれません）*/
	content:"";
	display:table;
	clear:both;
	}
table.certificate-table tbody th {
	display:block;  /*tbody内の thをブロックレベルに（セルをやめる）*/
	border:none;
	background:#666;
	color:white
	}
/*table.certificate-table tbody th::before {/*tbody内の thの前に エリア と追加*/
	/*content:"エリア"  
	}*/
table.certificate-table tbody.areaA th {
	color: #333
    }
table.certificate-table tbody.areaB th {
	color: #333
    }
table.certificate-table tbody.areaC th {
	color: #333
    }
table.certificate-table tbody.areaD th {
	color: #333
    }
table.certificate-table tfoot th {
	display:block;
	border:none;
	}
table.certificate-table tfoot td {
	border-top-color:white
	}
}