update css

layouts/blog_main/list.html

@@ -30,6 +30,8 @@
 
       <div class="process">
         <img class="house_img" src="/img/blog/house.png" alt="">
+        <img class="star_green" src="/img/blog/star_green.png" alt="">
+        <img class="star_yellow" src="/img/blog/star_yellow.png" alt="">
         <img class="ruler_img" src="/img/blog/ruler2.png" alt="">
         <img class="line_01" src="/img/blog/Vector01.png" alt="">
 
@@ -165,6 +167,7 @@
             <div class="bg_img"></div>
             <img src="/img/blog/line_first.png" alt="" class="line_right" style="top: -282px; height: auto;">
             <img src="/img/blog/line_left.png" alt="" class="line_left">
+            <img src="/img/blog/tree1.png" alt="" class="logo_01">
           </div>
 
           <!-- 02 -->
@@ -269,6 +272,7 @@
             <div class="bg_img"></div>
             <!-- <img src="/img/blog/Vector.png" alt=""> -->
             <img src="/img/blog/line_left.png" alt="" class="line_left">
+            <img src="/img/blog/tree2.png" alt="" class="logo_01">
           </div>
 
           <!-- 04 -->
@@ -339,6 +343,7 @@
             <div class="bg_img"></div>
             <!-- <img src="/img/blog/Vector.png" alt=""> -->
             <img src="/img/blog/line_right.png" alt="" class="line_right">
+            <img src="/img/blog/search.png" alt="" class="logo_02">
           </div>
 
           <!-- 05 -->
@@ -428,6 +433,7 @@
             <div class="bg_img"></div>
             <!-- <img src="/img/blog/Vector.png" alt=""> -->
             <img src="/img/blog/line_left.png" alt="" class="line_left">
+            <img src="/img/blog/tree3.png" alt="" class="logo_01">
           </div>
 
           <!-- 06 -->
@@ -568,6 +574,7 @@
             <div class="bg_img"></div>
             <!-- <img src="/img/blog/Vector.png" alt=""> -->
             <img src="/img/blog/line_end.png" alt="" class="line_left" style="height: auto;">
+            <img src="/img/blog/cube.png" alt="" class="logo_03">
           </div>
 
           <!-- 08 -->
@@ -696,6 +703,8 @@
 
       <div class="process">
         <img class="house_img" src="/img/blog/house.png" alt="">
+        <img class="star_green" src="/img/blog/star_green.png" alt="">
+        <img class="star_yellow" src="/img/blog/star_yellow.png" alt="">
 
         <div class="container process_mb">
           <div class="row w-100">

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -188,32 +188,17 @@ img {
   display: none !important;
 }
 
-// .qa-banner,
-// .blog-banner,
-// .brand-banner,
-// .store-banner,
-// .design-banner,
-// .news-page-banner,
-// .collection-banner,
-// .room-planner-banner {
-//   padding: 175px 0;
-//   background-size: cover;
-//   background-position: center;
-//   background-repeat: no-repeat;
-//   image-rendering: -webkit-optimize-contrast;
-// }
-
-// @media (max-width: 991px) {
-//   .qa-banner,
-//   .blog-banner,
-//   .store-banner,
-//   .design-banner,
-//   .room-planner-banner {
-//     background-position: bottom -50px right 50%;
-//   }
-// }
+@keyframes star {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.3);
+  }
+}
 
 /* 共通樣式 end */
+
 /* header start */
 .navbar {
   background-color: var(--second-color);
@@ -355,6 +340,7 @@ img {
 }
 
 /* header end */
+
 /* slick start */
 .slick-dots {
   bottom: 115px;
@@ -1639,13 +1625,13 @@ img {
     background: linear-gradient(transparent 30%, #f0f6dd 70%);
   }
 }
-.bg-ruler-img{
+.bg-ruler-img {
   margin-top: -55px;
 }
 .room-planner-service2 {
   font-family: NSJP-500;
   font-size: 28px;
- 
+
   mark {
     padding: 2px 1px;
     border-radius: 2%;
@@ -1664,67 +1650,60 @@ img {
   font-size: 28px;
   color: #649e2e;
 }
-.room-planner-service-icon-box{
+.room-planner-service-icon-box {
   margin-top: 30px;
   width: 650px;
   padding: 0 20px;
   text-align: center;
   @media screen and (max-width: 767px) {
     width: 80%;
-    margin:30px auto;
+    margin: 30px auto;
     padding: 0 10px;
   }
 }
-.room-planner-service-icon-box2{
+.room-planner-service-icon-box2 {
   margin-top: 30px;
   width: 650px;
   padding: 0 20px;
   text-align: center;
-  p{
+  p {
     @media screen and (max-width: 767px) {
-      color:#2b2b2b !important;
-     
+      color: #2b2b2b !important;
     }
-    
   }
   @media screen and (max-width: 767px) {
     width: 85%;
-    margin:30px auto;
+    margin: 30px auto;
     padding: 0 10px;
-   
   }
-  .icon-radius-img04{
+  .icon-radius-img04 {
     margin-top: 10px;
     width: 68px;
     @media screen and (max-width: 767px) {
       margin-top: 15px;
       width: 41px;
     }
-
   }
-  .icon-radius-img05{
+  .icon-radius-img05 {
     margin-top: 10px;
     width: 58px;
     @media screen and (max-width: 767px) {
       margin-top: 15px;
       width: 35px;
     }
- 
   }
-  .icon-radius-img06{
+  .icon-radius-img06 {
     margin-top: 10px;
     width: 66px;
     @media screen and (max-width: 767px) {
       // margin-top: 15px;
       width: 40px;
     }
-
   }
 }
-.room-planner-service-icon-box,.room-planner-service-icon-box2{
- 
-
-  .room-planner-service-icon-box-item{
+.room-planner-service-icon-box,
+.room-planner-service-icon-box2 {
+  .room-planner-service-icon-box-item {
     @media screen and (max-width: 767px) {
       margin-top: 15px;
     }
@@ -1743,9 +1722,9 @@ img {
     height: 120px;
     margin: 0 auto;
     @media screen and (max-width: 767px) {
-     width: 72px;
-     height: 72px;
-     padding: 5px;
+      width: 72px;
+      height: 72px;
+      padding: 5px;
     }
     img {
       // margin-top: 10%;
@@ -1753,27 +1732,27 @@ img {
       height: auto;
       object-fit: cover;
     }
-    .icon-radius-img01{
+    .icon-radius-img01 {
       margin-top: 10px;
       width: 55px;
       @media screen and (max-width: 767px) {
         margin-top: 15px;
         width: 33px;
-       }
+      }
     }
-    .icon-radius-img02{
+    .icon-radius-img02 {
       margin-top: 10px;
       width: 71px;
       @media screen and (max-width: 767px) {
         width: 42px;
-       }
+      }
     }
-    .icon-radius-img03{
+    .icon-radius-img03 {
       margin-top: 10px;
       width: 56px;
       @media screen and (max-width: 767px) {
         width: 33.6px;
-       }
+      }
     }
   }
 }
@@ -1784,7 +1763,7 @@ img {
   @media screen and (max-width: 767px) {
     margin-top: 50px;
     padding: 15px 0;
-    }
+  }
   .room-planner-process-house {
     position: absolute;
     left: 100px;
@@ -1799,9 +1778,9 @@ img {
       left: 100px;
       top: -100px;
       width: 199px;
-      }
+    }
   }
-  .room-planner-process-star-green{
+  .room-planner-process-star-green {
     position: absolute;
     left: 100px;
     top: -70px;
@@ -1818,9 +1797,9 @@ img {
     @media screen and (max-width: 767px) {
       left: 100px;
       top: -70px;
-      }
+    }
   }
-  .room-planner-process-star-yellow{
+  .room-planner-process-star-yellow {
     position: absolute;
     left: 300px;
     top: -100px;
@@ -1836,8 +1815,8 @@ img {
     }
     @media screen and (max-width: 767px) {
       left: 300px;
-    top: -100px;
-      }
+      top: -100px;
+    }
   }
   .room-planner-process-ruler2 {
     width: 118px;
@@ -1845,16 +1824,15 @@ img {
     top: -70px;
     right: 100px;
     @media screen and (max-width: $table) {
-     width: 100px;
-     top: -50px;
-    right: 50px;
-
+      width: 100px;
+      top: -50px;
+      right: 50px;
     }
     @media screen and (max-width: 767px) {
-     top:580px;
-     right: 20px;
-     width: 118px;
-     }
+      top: 580px;
+      right: 20px;
+      width: 118px;
+    }
   }
   .room-planner-process-box {
     width: 60%;
@@ -1868,59 +1846,59 @@ img {
     @media screen and (max-width: $table) {
       width: 80%;
     }
-    .room-planner-process-box_line_01{
+    .room-planner-process-box_line_01 {
       position: absolute;
       width: 48vw;
-      top:40px;
-      right:100px;
+      top: 40px;
+      right: 100px;
       @media screen and (max-width: $table) {
         width: 60vw;
       }
       @media screen and (max-width: 767px) {
-       display: none;
-        }
+        display: none;
+      }
     }
     @media screen and (max-width: 767px) {
       width: 90%;
       margin-top: 80px;
-      }
-      @media screen and (max-width: 375px) {
-        width: 90%;
-        }
-    .col-6{
+    }
+    @media screen and (max-width: 375px) {
+      width: 90%;
+    }
+    .col-6 {
       position: relative;
-      .room-planner-process-box_mb_line{
+      .room-planner-process-box_mb_line {
         display: none;
         background-repeat: no-repeat;
         background-image: url(/img/blog/mobile_line_01.png);
         width: 40vw;
         position: absolute;
-        top:32%;
+        top: 32%;
         left: 60%;
         height: 6px;
         z-index: 10px;
         @media screen and (max-width: 767px) {
-        display: block;
+          display: block;
         }
       }
-      .room-planner-process-box_mb_line2{
+      .room-planner-process-box_mb_line2 {
         display: none;
         background-repeat: no-repeat;
         background-size: contain;
         background-image: url(/img/room_planner/mb_line_02.png);
         width: 100%;
         position: absolute;
-        top:90%;
+        top: 90%;
         left: -50%;
         height: 125px;
         z-index: 10px;
         @media screen and (max-width: 767px) {
           display: block;
-          }
+        }
       }
       @media screen and (max-width: 767px) {
-       margin-bottom: 50px;
-        }
+        margin-bottom: 50px;
+      }
     }
     .room-planner-process-icon-number {
       position: absolute;
@@ -1962,12 +1940,12 @@ img {
 .bg-F0F6DD {
   background: #f0f6dd;
 }
-.tree2-img{
+.tree2-img {
   @media screen and (max-width: 767px) {
-   display: none;
+    display: none;
   }
 }
-.room_planner-sales-service{
+.room_planner-sales-service {
   margin-top: 30px;
 }
 .room_planner-sales-service-box {
@@ -1981,15 +1959,13 @@ img {
   @media screen and (max-width: 767px) {
     width: 100%;
     margin: 0 auto;
-
-    }
+  }
   .room-planner-service-content {
     margin-top: 50px;
     height: 188px;
     @media screen and (max-width: 767px) {
       width: 60%;
       margin: 50px auto;
-  
     }
     p {
       margin-bottom: 0.9rem;
@@ -2007,8 +1983,7 @@ img {
   border-left: 4px dotted #e0ee79;
   position: relative;
   @media screen and (max-width: 767px) {
-  display: none;
-
+    display: none;
   }
 }
 .room-planner-service-5-service-inf {
@@ -2032,23 +2007,23 @@ img {
     font-size: 28px;
   }
 }
-.room_planner-sales-service-left-text{
+.room_planner-sales-service-left-text {
   margin-top: 30px;
   @media screen and (max-width: $table) {
     margin-top: 50px;
-     }
-     @media screen and (max-width: 767px) {
-      margin-top: 30px;
-       }
+  }
+  @media screen and (max-width: 767px) {
+    margin-top: 30px;
+  }
 }
-.room_planner-sales-service-right-text{
+.room_planner-sales-service-right-text {
   margin-top: 50px;
   @media screen and (max-width: $table) {
-   margin-top: 0;
-    }
-    @media screen and (max-width: 767px) {
-      margin-top: 50px;
-       }
+    margin-top: 0;
+  }
+  @media screen and (max-width: 767px) {
+    margin-top: 50px;
+  }
 }
 
 .room_planner-sales-service-CTA {
@@ -2090,15 +2065,14 @@ img {
   font-family: NSJP-700;
   font-size: 36px;
   @media screen and (max-width: 767px) {
-   font-size: 28px;
-
+    font-size: 28px;
   }
 }
-.steup-mb-title{
+.steup-mb-title {
   font-family: NSJP-700;
   font-family: "Quicksand", sans-serif;
   font-size: 28px;
-  color:#78B142;
+  color: #78b142;
 }
 // .dottedline{
 //   border-style: dotted;
@@ -2123,7 +2097,7 @@ img {
   right: 180px;
   bottom: -50px;
   @media screen and (max-width: 767px) {
-   display: none;
+    display: none;
   }
 }
 // 電腦版
@@ -2135,8 +2109,8 @@ img {
   }
   @media screen and (max-width: 767px) {
     display: none;
-   }
-   .main-content-bg-line {
+  }
+  .main-content-bg-line {
     position: absolute;
     top: -95px;
     right: -90px;
@@ -2145,7 +2119,6 @@ img {
     @media screen and (max-width: 1200px) {
       width: 36vw;
     }
- 
   }
   .bg01-hand {
     margin-top: -100px;
@@ -2156,43 +2129,40 @@ img {
     right: 30px;
     bottom: -130px;
   }
-  .step2{
+  .step2 {
     margin-top: -50px;
     @media screen and (max-width: 1200px) {
       margin-top: -30px;
-     }
+    }
   }
-  .step1-0{
+  .step1-0 {
     width: 40%;
   }
-  .step1-1{
+  .step1-1 {
     width: 90%;
     margin-left: 30px;
   }
-  .step3{
+  .step3 {
     width: 90%;
     margin-top: 30px;
-   
-  
   }
-  .step4{
+  .step4 {
     width: 60%;
     margin-right: 50px;
-     margin-top:-30px;
+    margin-top: -30px;
   }
-  .step5{
-     margin-top:30px;
+  .step5 {
+    margin-top: 30px;
   }
-  .step5-2{
+  .step5-2 {
     margin-right: 70px;
-     margin-top:-50px;
+    margin-top: -50px;
   }
-  .meihaochengjia{
-    width:130px;
-    position: absolute; 
-    right:30px;
-     top:20px;
-   
+  .meihaochengjia {
+    width: 130px;
+    position: absolute;
+    right: 30px;
+    top: 20px;
   }
   .room-planner-process-main-box {
     width: 95%;
@@ -2205,35 +2175,35 @@ img {
       border-radius: 16px;
       @media screen and (max-width: 1200px) {
         padding: 10px;
-       }
-      .step04_direction{
+      }
+      .step04_direction {
         position: absolute;
-        left:-50px;
-        top:50px;
+        left: -50px;
+        top: 50px;
         z-index: -1;
       }
-      .step03_direction{
+      .step03_direction {
         position: absolute;
-        left:-50px;
-        top:150px;
+        left: -50px;
+        top: 150px;
         z-index: -1;
       }
-      .step02_direction{
+      .step02_direction {
         position: absolute;
-        left:-50px;
-        bottom:150px;
+        left: -50px;
+        bottom: 150px;
         z-index: -1;
       }
-      .step01_direction{
+      .step01_direction {
         position: absolute;
-        right:-50px;
-        top:50px;
+        right: -50px;
+        top: 50px;
         z-index: -1;
       }
-      .step05_direction{
+      .step05_direction {
         position: absolute;
-        right:-50px;
-        top:180px;
+        right: -50px;
+        top: 180px;
         z-index: -1;
       }
     }
@@ -2286,10 +2256,10 @@ img {
       }
     }
   }
-  .room-planner-process-main-star-green{
+  .room-planner-process-main-star-green {
     position: absolute;
-    bottom:10px;
-    right:150px;
+    bottom: 10px;
+    right: 150px;
     animation-name: star;
     animation-duration: 1s;
     animation-delay: 0;
@@ -2297,10 +2267,10 @@ img {
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
   }
-  .room-planner-process-main-star-line{
+  .room-planner-process-main-star-line {
     position: absolute;
-    bottom:10px;
-    right:5px;
+    bottom: 10px;
+    right: 5px;
     animation-name: star;
     animation-duration: 1s;
     animation-delay: 0;
@@ -2308,10 +2278,10 @@ img {
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
   }
-  .room-planner-process-main-star-yellow{
+  .room-planner-process-main-star-yellow {
     position: absolute;
-    right:-15px;
-    top:50px;
+    right: -15px;
+    top: 50px;
     animation-name: star;
     animation-duration: 2s;
     animation-delay: 0;
@@ -2337,32 +2307,31 @@ img {
   font-weight: 700;
   font-size: 24px;
 }
-.room-planner-process-main-chenjia{
-
-background: #FFE35F;
-width: 150px;
-border-radius: 100px;
-padding: 5px 15px;
-color:#736357;
-font-family: NSJP-700;
-margin: 50px auto;
-font-size: 24px;
+.room-planner-process-main-chenjia {
+  background: #ffe35f;
+  width: 150px;
+  border-radius: 100px;
+  padding: 5px 15px;
+  color: #736357;
+  font-family: NSJP-700;
+  margin: 50px auto;
+  font-size: 24px;
 }
 // 手機版
-.section-room-planner-process-mb-main{
+.section-room-planner-process-mb-main {
   @media screen and (min-width: $desktop) {
     display: none;
-   }
+  }
   @media screen and (max-width: 991px) {
     display: block;
-   }
+  }
 }
-.room-planner-process-mb-main{
+.room-planner-process-mb-main {
   .room-planner-process-main-title-box {
     width: 100%;
     padding: 10px;
     margin: 30px auto;
-  
+
     .room-planner-process-main-title {
       text-align: center;
       font-style: oblique;
@@ -2372,7 +2341,7 @@ font-size: 24px;
       letter-spacing: 5px;
       @media screen and (max-width: 375px) {
         font-size: 32px;
-       }
+      }
       // font-style: oblique 20deg;
     }
   }
@@ -2406,25 +2375,25 @@ font-size: 24px;
   }
   .accordion-body {
     padding: 0;
-}
-  .accordion-button:focus{
+  }
+  .accordion-button:focus {
     background: #fff;
     box-shadow: none;
   }
-  .accordion-item{
-    border-top: 1.5px solid #E0EE79 !important;
+  .accordion-item {
+    border-top: 1.5px solid #e0ee79 !important;
     border-left: none;
     border-right: none;
     border-bottom: none;
-    .accordion-button{
+    .accordion-button {
       padding-top: 30px;
     }
   }
-  .accordion-button:not(.collapsed){
+  .accordion-button:not(.collapsed) {
     background: #fff;
     box-shadow: none;
   }
-  .accordion-button::after{
+  .accordion-button::after {
     background-image: url(/img/room_planner/open.png);
   }
   .accordion .accordion-button:not(.collapsed)::after {
@@ -2434,14 +2403,14 @@ font-size: 24px;
     background-position: center;
     transform: none;
   }
-  .accordion-header{
+  .accordion-header {
     padding-bottom: 15px;
   }
 }
-.room-planner-process-mb-main{
+.room-planner-process-mb-main {
   width: 95%;
   margin: 0 auto;
-  }
+}
 .room-planner {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -2474,8 +2443,7 @@ font-size: 24px;
   margin: 100px auto;
   @media screen and (max-width: 767px) {
     width: 100%;
-  margin: 50px auto;
-
+    margin: 50px auto;
   }
 }
 
@@ -2931,6 +2899,48 @@ font-size: 24px;
         max-width: 35vw;
       }
     }
+    .star_green {
+      width: 20px;
+      position: absolute;
+      top: -60px;
+      left: 90px;
+      animation-name: star;
+      animation-duration: 1s;
+      animation-delay: 0;
+      animation-iteration-count: infinite;
+      animation-direction: alternate;
+      animation-timing-function: ease-in-out;
+      @media (max-width: 767px) {
+        left: 30vw;
+        top: -4%;
+      }
+    }
+    .star_yellow {
+      width: 20px;
+      position: absolute;
+      top: -85px;
+      left: 280px;
+      animation-name: star;
+      animation-duration: 1s;
+      animation-delay: 0;
+      animation-iteration-count: infinite;
+      animation-direction: alternate-reverse;
+      animation-timing-function: linear;
+      @media (max-width: 1199px) {
+        left: 24%;
+      }
+      @media (max-width: 991px) {
+        left: 27%;
+        top: -15%;
+      }
+      @media (max-width: 767px) {
+        left: 60vw;
+        top: -7%;
+      }
+      @media (max-width: 475px) {
+        left: 67vw;
+      }
+    }
     .ruler_img {
       position: absolute;
       top: -70px;
@@ -3259,6 +3269,39 @@ font-size: 24px;
             height: 620px;
           }
         }
+
+        .logo_01,
+        .logo_02,
+        .logo_03 {
+          position: absolute;
+          width: 70px;
+          @media (max-width: 991px) {
+            display: none;
+          }
+        }
+
+        .logo_01 {
+          left: -43%;
+          top: 150px;
+          @media (max-width: 1199px) {
+            left: -90%;
+          }
+        }
+        .logo_02 {
+          right: -45%;
+          top: 80px;
+          @media (max-width: 1199px) {
+            right: -90%;
+            top: 60px;
+          }
+        }
+        .logo_03 {
+          right: -45%;
+          top: -250px;
+          @media (max-width: 1199px) {
+            right: -90%;
+          }
+        }
       }
     }
     .topic_list {