@charset "UTF-8";
/*!
*/
/* =========================================================
 * 菱形の枠作成
 * @ 12 GRID SYSTEM
 * 大きさは別途指定、背景画像（菱形背景）も別途指定
 * ====================================================== */
.diamonds {
	position: relative;
	width: 100%;
	background-image: url(/content/dam/nttcom/cmn/img/bg_silver.png);/*とりあえず灰色の背景を適用*/
	background-size: cover;
}
.diamonds:after {
	display: block;
	content: "";
	width: 100%;
	padding-bottom: 100%;
}
.diamonds_inner {
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
}
.diamonds_inner-centering {
	display: table;
	width: 100%;
	height: 100%;
	table-layout:fixed;
}
.diamonds_inner-centering div {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}


/*
中身を上下左右中央揃え
<div class="diamonds">
	<div class="diamonds_inner">
		<div class="diamonds_inner-centering">
			<div>
				HやPなど
			</div>
		</div>
	</div>
</div>

中身を上下左右中央揃えは特にしない
<div class="diamonds">
	<div class="diamonds_inner">
		<div>
			HやPなど
		</div>
	</div>
</div>

*/