Sliderを設置

recruit/assets/css/style.css

@@ -422,8 +422,12 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbf2f6', end
 }
 @media (max-width: 959px) {
   .sec-box-circle.d-pc-block { display: none!important;}
-  .sec-box-img-list.d-sp-block { display: flex!important;margin-left: -15px;margin-right: -15px;}
-  .sec-box-img-list.d-sp-block li img {width: 100%;}
+  #howtoSlideBox {margin-top: 40px;width: calc(100% + 30px) ;margin-left: -15px;margin-right: -15px;}
+
+  
+  
+  
+  
 }
 
 /*  page-top
@@ -879,8 +883,13 @@ transition: opacity 0.6s ease;
 /* #recruit
 -------------------------------------------- */
 @media (max-width: 959px) {
+#recruit02 {padding-bottom: 0;}
 #recruit02 .sec-main-top h2.ttl-h2-center img {width: 145px;height:31px;}
 }
 
 
 
+
+
+
+

recruit/index.html

@@ -194,10 +194,13 @@
           <li data-aos="fade-right" data-aos-delay="500" data-aos-anchor-placement="top-bottom"><img src="/recruit/assets/img/common/img-howto03.png" width="240" height="240" alt="" /></li>
           <li data-aos="fade-right" data-aos-delay="600" data-aos-anchor-placement="top-bottom"><img src="/recruit/assets/img/common/img-howto04.png" width="240" height="240" alt="" /></li>
          </ul>
-         <ul class="sec-box-img-list d-sp-block">
-          <li data-aos="fade-right" data-aos-delay="300" data-aos-anchor-placement="top-bottom"><img src="/recruit/assets/img/common/img-howto01-sp.png" alt="" /></li>
-          <li data-aos="fade-right" data-aos-delay="400" data-aos-anchor-placement="top-bottom"><img src="/recruit/assets/img/common/img-howto02-sp.png" alt="" /></li>
-         </ul>
+
+          <div id="howtoSlideBox" class="carousel slide d-sp-block" data-ride="carousel">
+            <div class="carousel-inner">
+              <div class="carousel-item active"><img class="w-50" src="/recruit/assets/img/common/img-howto01-sp.png" alt="" /><img class="w-50" src="/recruit/assets/img/common/img-howto02-sp.png" alt="" /></div>
+              <div class="carousel-item"><img class="w-50" src="/recruit/assets/img/common/img-howto03-sp.png" alt="" /><img class="w-50" src="/recruit/assets/img/common/img-howto04-sp.png" alt="" /></div>
+            </div>
+          </div>
 
         </div>
        </div><!-- /.sec-main -->

recruit/index03.html

@@ -194,11 +194,42 @@
           <li data-aos="fade-right" data-aos-delay="500" data-aos-anchor-placement="top-bottom"><img src="/recruit/assets/img/common/img-howto03.png" width="240" height="240" alt="" /></li>
           <li data-aos="fade-right" data-aos-delay="600" data-aos-anchor-placement="top-bottom"><img src="/recruit/assets/img/common/img-howto04.png" width="240" height="240" alt="" /></li>
          </ul>
-         <ul class="sec-box-img-list d-sp-block">
-          <li data-aos="fade-right" data-aos-delay="300" data-aos-anchor-placement="top-bottom"><img src="/recruit/assets/img/common/img-howto01-sp.png" alt="" /></li>
-          <li data-aos="fade-right" data-aos-delay="400" data-aos-anchor-placement="top-bottom"><img src="/recruit/assets/img/common/img-howto02-sp.png" alt="" /></li>
-         </ul>
 
+          <div id="howtoSlideBox" class="carousel slide d-sp-block" data-ride="carousel">
+            <div class="carousel-inner">
+              <div class="carousel-item active"><img class="w-50" src="/recruit/assets/img/common/img-howto01-sp.png" alt="" /><img class="w-50" src="/recruit/assets/img/common/img-howto02-sp.png" alt="" /></div>
+              <div class="carousel-item"><img class="w-50" src="/recruit/assets/img/common/img-howto03-sp.png" alt="" /><img class="w-50" src="/recruit/assets/img/common/img-howto04-sp.png" alt="" /></div>
+            </div>
+          </div>
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
         </div>
        </div><!-- /.sec-main -->
       </section>
@@ -668,10 +699,36 @@
    }, speed, 'swing');
    return false;
   });
-  $(".dropdown").on("mouseover", function() {
-   $(".dropdown-menu").fadeIn();
-  });
 
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
+   
  </script>
 </body>