「100vw」が、レスポンシブ時のとある幅以下になると効かなくなる

いつもお世話になっております。
この度CSSについて質問させてください。

#####やりたいこと
PCでもスマホでも、背景画像を
width:100vw;
height:100vh;
のメインビジュアルエリアを作りたい。

#####実際のコード

HTML
1<body>
2<header>
3<!-- ヘッダー  -->
4	<h1>サイトタイトル</h1>
5</header>
6<!-- メインビジュアル -->
7<div class="box">
8    <div class="bgImg src1"></div>
9</div>
10<div class="main_wrap">
11	<div id="concept">
12		<h2>CONCEPT</h2>
13		<div class="concept_text">
14    		<p>コンテンツ内容</p>
15		</div>
16	</div>
17	<div class="service">
18<!--省略-->
19</body>

css
1html, body, h1, h2{
2	margin: 0;
3}
4
5body{
6    width : 100% ;
7}
8
9/*ヘッダー */
10header {
11    position: absolute;
12    z-index: 2;
13}
14
15/* --- 全体のBOX定義 ---------------------------------------- */
16.box {
17  position: absolute;
18  top: 0;
19  width  : 100vw;
20  height     : 100vh;
21  margin     : auto;
22  overflow   : hidden;
23}
24
25/* --- MVの指定 ------------------------------------------- */
26.box .bgImg {
27  position   : absolute;
28  top        : 0;
29  left       : 0;
30  bottom     : 0;
31  right      : 0;
32  opacity    : 0;
33}
34
35/* --- 背景画像 ----------------- */
36.box .src1 {
37  background-image : url(../img/sample.jpg);   /* 背景の画像を指定 */
38  background-size : cover;
39  background-position: center 40%;
40}