<div class="imageButton--type007">
  <a href="#">
    <figure class="button__image"><img src="画像のパス" width="" height="" alt="" /></figure>
    <p class="button__label">ボタンのラベルのテキスト</p>
    <p class="button__title">ボタンタイトルのテキスト</p>
  </a>
</div>
                

.imageButton--type006 {
  a{
    display:block;
    position:relative;
    z-index:1;
    >.button__image{
      overflow:hidden;
      img{
        width:100%;
        height:auto;
        transition: transform 0.3s ease;
        z-index:-1;
      }
    }
    &::before{
      content: "";
      width: 0.8em;
      height: 0.8em;
      display: block;
      background: url("/img/icon/chevron-circle-right.svg") no-repeat center center;
      background-size: 100% auto;
      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
          hue-rotate(228deg) brightness(106%) contrast(101%);
      position: absolute;
      bottom:0.5em;
      left:0.7em;
      z-index:1;
    }
    >.button__image{
      width:100%;
      height:100%;
      border:#FFF solid 0.25em;
      box-shadow:0px 0px 0.3em -0.2em #000;
      figcaption{
        width:25%;
        height:94.5%;
        font-size:0.9em;
        text-align:left;
        color:#FFF;
        line-height:1.3;
        display:flex;
        justify-content:center;
        align-content:center;
        flex-wrap:wrap;
        background:rgba(0,0,0,.5);
        position:absolute;
        top:0.3em;
        right:0.3em;
        transition: all .2s ease;
        writing-mode: vertical-rl;
        font-feature-settings:initial;
      }
    }
    &:hover{
      >.button__image{
        figcaption{
          width:calc(100% - 0.5em);
          background:rgba(0,0,0,.8);
        }
      }
    }
  }
}
@media print, screen and (min-width: 768px) {
  .imageButton--type006 a{
    &::before{
      bottom:1em;
      left:1.3em;
    }
    >.button__image figcaption{
      font-size:1.1em;
      line-height:1.6;
    }
  }
}