<div class="headline--type07">
  <h2 class="headlineTitle">
    左右にグラデーションのあしらいのある見出し　テキストテキスト
  </h2>
</div>
                

.headline--type07 {
  display:block;
  text-align:center;
  .headlineTitle{
    font-size:1.2em;
    display:inline-block;
    position:relative;
    z-index: 1;
    &::before,&::after{
      content: "";
      width: 4em;
      height: 1px;
      display: block;
      position: absolute;
      top: 50%;
      z-index: -1;
    }
    &::before{
      left:-5em;
      background: linear-gradient(-225deg, transparent, #333 80%, #333 100%);
    }
    &::after{
      right:-5em;
      background: linear-gradient(-45deg, transparent, #333 80%, #333 100%);
    }
  }
}