<div class="headline--type04">
  <h2 class="headlineTitle">
    見出しのタイトルが入りますテキストテキストテキスト
  </h2>
</div>
                

.headline--type04 {
  .headlineTitle{
    display:block;
    padding: 1em 0 0.8em;
    font-size:1.1em;
    line-height:1.4em;
    color:#000;
    position:relative;
    z-index:1;
    &::before{
      content: "";
      width:100vw;
      height:80%;
      display:block;
      background:linear-gradient(0deg,rgba(255,255,255,0) 0%,#EEE 100%);
      position: absolute;
      top: 0;
      left: 50%;
      margin-left:-50vw;
      z-index:-1;
    }
    &::after{
      content: "";
      width:50vw;
      height:calc(100% - 1em);
      display:block;
      background:linear-gradient(90deg,#EEE 0%,#EEE 90%,#CCC 100%);
      position: absolute;
      top: 0.5em;
      left: -0.8em;
      margin-left:-50vw;
      z-index:-1;
    }
  }
}