<div class="headline--type12">
	<h2 class="headlineTitle">
		立体的な見出しのデザイン　テキストテキストテキストテキスト
	</h2>
</div>
                

.headline--type12 {
	display:block;
	text-align:center;
	.headlineTitle{
		font-size:1.1em;
		color:#FFF;
		text-align: center;
		padding:0.8em 1.5em;
		background: #666;
		box-shadow:0 1px 3px rgba(0,0,0,0.25);
		position: relative;
		display:inline-block;
		&::before,&::after{
			content: "";
			height: 0;
			width: 0;
			border: 0.4em solid transparent;
			border-top: 0.4em solid #333;
			position: absolute;
			top: 100%;
		}
		&::before {
			border-left: 0.4em solid #333;
			right: 0;
		}
		&::after {
			border-right: 0.4em solid #333;
			left: 0;
		}
	}
}