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

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