コーディングパーツ（見出し・リスト・お知らせ一覧・矢印・テーブル）

<h2 class="heading">見出しのタイトル</h2>

.heading {
    text-align: center;
    margin: 50px 0 30px;
    padding-bottom: 5px;
    position: relative;
}

.heading::after {
    position: absolute;
    content: "";
    height: 3px;
    line-height: 3px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    margin: auto;
    background-color: #81d8d1;
    border-radius: 1px;
}

<h2 class="heading">見出しのタイトル</h2>

.heading {
    padding: 0 0 0 10px;
    margin: 40px 0 20px;
    border-left: 8px solid #81d8d1;
}

<h2 class="heading">見出しのタイトル</h2>

.heading{
    text-align: center;
    font-size: 2rem;
    color: #192f60;
    padding: .4em;
    background: linear-gradient(-45deg, #fff 25%, #81d8d1 0, #81d8d1 50%, #fff 0, #fff 75%, #81d8d1 0);
    background-size: auto auto;
    background-color: ##81d8d1;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, #fff 5px, #fff 8px);
}

<ul class="list_ul">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

.list_ul li {
    line-height: 2;
    text-indent: -1.5em;
    margin-left: 1.5em;
}

.list_ul li::before {
    display: inline-block;
    text-indent: 0;
    content: '●';
    color: #81d8d1;
    -webkit-transform: scale(.8,.8);
    transform: scale(.8,.8);
    line-height: 1;
    vertical-align: .08em;
    width: 1.5em;
}

<ul class="list_ol">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

.list_ol {
  margin: 10px 0;
  counter-reset: num;
  text-indent: -1.7em;
}

.list_ol li {
  line-height: 2;
  margin-left: 1.7em;
}

.list_ol li::before {
  display: inline-block;
  text-indent: .43em;
  font-size: .8em;
  width: 1.4em;
  height: 1.3em;
  line-height: 1.6;
  counter-increment: num;
  content: counter(num) ".";
  color: #fff;
  margin-right: .5em;
  background-color: #db004c;
  border-radius: .7em;
}

.list_ol li a {
  color: #db004c;
  text-decoration: underline;
}

<ul class="list_info">
  <li class="list_info__item">
    <div class="list_info__time">
      <time datetime="0000-00-00">0000年00月00日</time>
    </div>
    <div class="list_info__txt"><a href="#">お知らせのタイトルお知らせのタイトル</a></div>
  </li>
  <li class="list_info__item">
    <div class="list_info__time">
      <time datetime="0000-00-00">0000年00月00日</time>
    </div>
    <div class="list_info__txt"><a href="#">長いときのお知らせのタイトルお知らせのタイトルお知らせのタイトルお知らせのタイトルお知らせのタイトルお知らせのタイトル</a></div>
  </li>
  <li class="list_info__item">
    <div class="list_info__time">
      <time datetime="0000-00-00">0000年00月00日</time>
    </div>
    <div class="list_info__txt"><a href="#">お知らせのタイトルお知らせのタイトルお知らせのタイトルお知らせのタイトル</a></div>
  </li>
</ul>

.list_info{
  &__item{
    padding: 1em 0;
    &:not(:first-child){
      border-top: 2px solid #707070;
    }
    @media only screen and (min-width: $tbwidth) {
      display: flex;
      justify-content: flex-start;
      padding: 30px 20px;
    }//tb
  }//&__item
  &__time{
    font-weight: bold;
    @media only screen and (max-width: $spwidth) {
      display: block;
    }//sp
    @media only screen and (min-width: $tbwidth) {
      width: 200px;
    }//tb
  }//time
  &__txt{   
    @media only screen and (min-width: $tbwidth) {
      flex: 1;
      a{
        transition: .3s;
        &:hover{
          color: #81d8d1;
          text-decoration: underline;
        }
      }//a
    }//tb
  }//&__txt
}//.list_info

<div class="arrow arrow_right">右の矢印</div>
<div class="arrow arrow_left">左の矢印</div>
<div class="arrow arrow_up">上の矢印</div>
<div class="arrow arrow_under">下の矢印</div>

.arrow{
  color: #fff;
  background: #333;
  position: relative;
  display: block;
  padding: 15px 20px 15px 40px;
  margin-bottom: 10px;
}
.arrow::before{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  position: absolute;
}

.arrow_right::before{
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 5px);
  left: 15px;
}
.arrow_left::before{
  border-bottom: solid 2px #fff;
  border-left: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 5px);
  left: 19px;
}
.arrow_up::before{
  border-top: solid 2px #fff;
  border-left: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 2px);
  left: 17px;
}
.arrow_under::before{
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(50% - 8px);
  left: 17px;
}

<table class="table1">
<tr>
<th>th 見出し</th>
<td>td 内容</td>
<td>td 内容</td>
</tr>
<tr>
<th>th 見出し</th>
<td>td 内容</td>
<td>td 内容</td>
</tr>
</table>

.table1 {
  width: 100%;
}
.table1 tr th {
  color: #fff;
  background: #707070;
}
.table1 tr td {
  border-bottom: 1px solid #ccc;
}
.table1 tr th, .table1 tr td {
  padding: .5em .8em;
}

@media only screen and (max-width: 768px) {
  .table1 tr th, .table1 tr td {
    display: block;
  }
  .table1 tr td{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
}

@media only screen and (min-width: 769px) {
  .table1 tr th {
    width: 200px;
    vertical-align: middle;
  }
  .table1 tr td {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
  .table1 tr:not(:first-child) th {
    border-top: 1px solid #ccc;
  }
  .table1 tr:first-child th {
    border-top: 1px solid #707070;
  }
  .table1 tr:last-child th {
    border-bottom: 1px solid #707070;
  }
}