<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;
		}
	}
}