/*************************************************************/
/*****症例一覧*************************************************/
/*************************************************************/
#cases_wrap {
  width:100%;
  max-width:1000px;
  margin:0 auto;
}
#cases_wrap .case-block span.case-title {
    display:block;
    font-size:28px;
    color:gray;
    text-align:center;
    padding:10px;
}
#cases_wrap .case-block span.case-title::before {
    content:"-";
    display:inline-block;
    margin-right:25px;
    color:#17a4c0;
    transform:scaleX(4);
}
#cases_wrap .case-block span.case-title::after {
    content:"-";
    display:inline-block;
    margin-left:25px;
    color:#17a4c0;
    transform:scaleX(4);
}
#cases_wrap .case-block ul {
    width:100%;
    overflow:hidden;
    margin-bottom:40px;
}
#cases_wrap .case-block li {
    display:block;
    width:calc(100% / 3); /* 横列の数を変更する場合はここを修正 */
    padding:5px;
    float:left;
}
#cases_wrap .case-block a {
    text-decoration:none;
    transition:0.2s;
    overflow:hidden;
    display:block;
    border-radius:5px;
    background-color:#18a5c0;
    color:#333333;
    text-align:center;
    padding:20px;
    font-size:20px;
    letter-spacing: 1px;
    font-weight: 500;
    position:relative;
}
#cases_wrap .case-block a::after {
    content:" ";
    display:inline-block;
    border:5px solid transparent;
    border-left-color:white;
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
}
#cases_wrap .case-block a:hover {
    transform:scale(0.9);
    opacity:0.5;
}
#cases_wrap .case-block a span {
  color:#fff;
}
/*-- レスポンシブ設定 -*/
@media all and (max-width:780px) {

  #cases_wrap .case-block span.case-title {
    font-size: 4.75vw;
  }
  #cases_wrap .case-block li {
    width:50%;
  }
  #cases_wrap .case-block a {
    font-size: 3.5vw;
    letter-spacing: 1px;
  }
  #cases_wrap .case-block a::after {
    right:5px;
  }
  #cases_wrap .case-block ul {
    margin-bottom:20px;
    padding: 0 2%;
  }
}