MVの画像とテキスト分離

recruit/assets/css/style.css

@@ -599,40 +599,18 @@ div.main-contents-header .main-MV-sp img {vertical-align: bottom;width: 100%;hei
 @media (min-width: 960px) {
 @media (min-width: 960px) {
 div.main-contents-header .main-MV {position: relative;}
 div.main-contents-header .main-MV {position: relative;}
   div.main-contents-header .main-MV {position: relative;}
   div.main-contents-header .main-MV {position: relative;}
-  
+  div.main-contents-header .main-MV img {vertical-align: bottom;width: 100%;height: 100%;}
   div.main-contents-header .main-MV .mv-circle,
   div.main-contents-header .main-MV .mv-circle,
   div.main-contents-header .main-MV .mv-text01,
   div.main-contents-header .main-MV .mv-text01,
-  div.main-contents-header .main-MV .mv-text02 {position: absolute;top: 50%;left: 50%;}
-  
-  div.main-contents-header .main-MV .mv-circle {margin-top: -11.4%;margin-left: -15%;}
-  div.main-contents-header .main-MV .mv-text01 {margin-top: -11.4%;}
-  div.main-contents-header .main-MV .mv-text02 {}
-  
-  
+  div.main-contents-header .main-MV .mv-text02 {display: block; position: absolute;top:0;left: 0;right: 0; bottom: 0;width: 100%;}
 }
 }
-
-/* 
-
-
-
-
-
-          <span class="mv-circle"><img src="/recruit/assets/img/common/mv_circle.png" width="180" height="180" alt=""/></span>
-          <span class="mv-text01"><img src="/recruit/assets/img/common/mv_text01.png" width="696" height="44" alt=""/></span>
-          <span class="mv-text02"><img src="/recruit/assets/img/common/mv_text02.png" width="543" height="86" alt=""/></span>
-
-
-
-
-
-
-
-
--------------------------------------------- */
-
 @media (max-width: 959px) {
 @media (max-width: 959px) {
-  div.main-contents-header .main-MV-pc {display: none;}
   div.main-contents-header .main-MV-sp {display: block;}
   div.main-contents-header .main-MV-sp {display: block;}
+  div.main-contents-header .main-MV-pc,
+  div.main-contents-header .main-MV .mv-circle,
+  div.main-contents-header .main-MV .mv-text01,
+  div.main-contents-header .main-MV .mv-text02 {display: none;}
+
   .main-contents-inner {padding: 5px 0;}
   .main-contents-inner {padding: 5px 0;}
 }
 }
 .sec-main {padding: 108px 15px;}
 .sec-main {padding: 108px 15px;}

recruit/index.html

@@ -78,6 +78,9 @@ gtag('config', '');
         <h1 class="main-MV">
         <h1 class="main-MV">
           <span class="main-MV-pc"><img class="w-100" src="/recruit/assets/img/common/mv.png" alt="亰王の家事代行【京王線・井の頭線沿線にお住まいの方々の暮らしに役立つお手伝い】「ありがとう」を一番近くで感じるお仕事です"/></span>
           <span class="main-MV-pc"><img class="w-100" src="/recruit/assets/img/common/mv.png" alt="亰王の家事代行【京王線・井の頭線沿線にお住まいの方々の暮らしに役立つお手伝い】「ありがとう」を一番近くで感じるお仕事です"/></span>
           <span class="main-MV-sp"><img src="/recruit/assets/img/common/mv_sp.png" width="750" height="550" alt=""/></span>
           <span class="main-MV-sp"><img src="/recruit/assets/img/common/mv_sp.png" width="750" height="550" alt=""/></span>
+          <span class="mv-circle"><img src="/recruit/assets/img/common/mv_circle.png" alt=""/></span>
+          <span class="mv-text01"><img src="/recruit/assets/img/common/mv_text01.png" alt=""/></span>
+          <span class="mv-text02"><img src="/recruit/assets/img/common/mv_text02.png" alt=""/></span>
         </h1>
         </h1>
       <!-- /.main-contents-header --></div>
       <!-- /.main-contents-header --></div>