*{margin:0;padding:0;}
.container {
	position: relative;
}
.visual_wrapper {
    overflow: hidden; /* 文字が写真外から出た時に消えるようにする（この記述は必須） */
	position:absolute;
	top:0;
	left:10%;
	width:90%;
	height:300px;
}
.visual_wrapper img{
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.text{
	z-index:1; /* 画像部分を「position:absolute;」で指定したので、文字を画像の上に重なるようにする */
	font-size:20px;
}
.font_color_white {
    position: relative; /*（この記述は必須）*/
    color: #fff;
    white-space: nowrap;
}
.font_color_black {
    z-index:-1; /* 重ね合わせの優先順位を最下位にする（この記述は必須） */
    position: relative; /*（この記述は必須）*/
    left: 0;
    top: 30px;
    white-space: nowrap;
}

//読み込み時の指定
$(function () {
	var mvh = $('.font_color_black').offset();
	$('.font_color_white').offset({
		top: mvh.top,
		left: mvh.left
	});
})

///テキストの位置変更、及び、横スクロール時の指定
$(window).resize(function() {
	var mvh = $('.font_color_black').offset();
	$('.font_color_white').offset({
		top: mvh.top,
		left: mvh.left
	});
})