@charset "utf-8";

.table_wrap {}
.table_wrap table { width:100%; border-top:2px solid #1c1c1c; border-bottom: 1px solid #ddd; border-collapse: collapse; margin-bottom:30px;}
  table caption { width:0; height:0; font-size:0; line-height:0; overflow:hidden; text-indent:-9999px;}
  table th { padding:26px 15px 22px; background-color:#f6f6f6; border-right:1px solid #ddd; border-bottom:1px solid #ddd;  font-weight:500; font-size:2rem; color:#111; line-height:1.2em; }
  table td {padding: 20px 20px 16px;  border-top:1px solid #ddd; border-right:1px solid #ddd; font-weight:400; font-size:1.7rem; color:#222;  line-height:1.2em; text-align:left; }
  table td:last-child { border-right:none; }
  table td.last_border {border-right:1px solid #ddd;}
  table td.td_tit {background-color:#f6f6f6;}
  table td img {max-width:100%;}

.circWrap { position:relative; text-align: center;}
.circWrap ul.circUl { font-size:0; margin:0 -20px; }
.circWrap ul.circUl li { width:25%; display:inline-block;  padding:0 35px; margin-bottom:40px; position:relative; text-align:center; }
.circWrap ul.circUl li p {padding-top:30px; }
.circWrap ul.circUl li h3 { text-align:center; font-weight:700; padding-top:10px;}

.circWrap ul.circUl li .thumb{ width:100%; position:relative; height:0; padding-bottom:100%; }
.circWrap ul.circUl li .img_wap { width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%;border:1px solid #ddd; overflow:hidden;}
.circWrap ul.circUl li .img_wap:after { content:""; position:absolute; top:0; left:0;  width:100%; height:100%; border-radius:50%; transition: .2s;  border:18px solid transparent; }
.circWrap ul.circUl li:hover .img_wap:after{ border-color: rgba(228,228,228,.5); } 
.circWrap ul.circUl li .img_wap img { width:100%; height:100%; object-fit:cover;  }

@media screen and (max-width:1024px){
  .circWrap ul.circUl {margin:0 -15px; }
  .circWrap ul.circUl li { width:50%; padding:0 15px 10px; }
  
  .circWrap ul.circUl li .img_wap {border-radius:30px; }
  .circWrap ul.circUl li .img_wap:after { border-radius:30px; }
  .circWrap ul.circUl li .thumb{ padding-bottom:65%; }
}
@media screen and (max-width:768px){
  .table_wrap table th {padding:15px 10px 13px; font-size:1.6rem; }
  .table_wrap table td {padding:14px 5px 12px; font-size:1.4rem;}
}
@media screen and (max-width:560px){
  .table_wrap {overflow-x: scroll;}
  .table_wrap table {min-width:600px;}
  .circWrap ul.circUl li { width:100%; }
  .circWrap ul.circUl li:last-child {display:block;}
}