*{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
  });
})