app/template/default/Block/top_glossary_6.twig line 1

Open in your IDE?
  1. {% block main %}
  3. <style>
  5. .main_box_l {
  6.   display: flex;    
  7.   flex-wrap: wrap;
  8.   justify-content: space-around;    
  9.   width: 100%;
  10.   height: auto;
  11.   position: relative;
  12.   margin-top: 25px;
  13.   margin-bottom: 100px;
  14. }
  15. .box_l {
  16.   display: flex;
  17.   flex-wrap: wrap;
  18.   background-color: #fff;
  19.   width:calc(100% / 4 - 20px);  
  20.   width: 315px;
  21.   height: auto; 
  22.   {#border: solid 1px #dcdcdc;#}
  23.   margin-left: 10px;
  24.   margin-right: 10px;
  25.   margin-top: 10px;
  26.   margin-bottom: 10px;
  27.   {#position: relative;#}/*sliderに重ねる場合使用*/
  28.   {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  29. }
  30. .box_la {
  31.     display: flex;
  32.     flex-wrap: wrap;
  33.     justify-content: space-around;    
  34.     background-color: bule;
  35.     width: auto;  
  36.     height: auto; 
  37.     text-align: center;
  38.     padding-left: auto;
  39.     padding-right: auto;
  40.     {#position: relative;#}/*sliderに重ねる場合使用*/
  41.     {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  42.   }
  43. .box_l1 { 
  44.   display: flex;    
  45.   flex-wrap: wrap;
  46.   justify-content: space-around;      
  47.   width: 150px;
  48.   height: 150px;
  49.   background-color: ;    
  50.   margin-top: 20px;
  51.   margin-bottom: 10px;
  52.   margin-left: 6px;
  53. }
  54. .box_l2 {
  55.   width: 100%;
  56.   height: auto;
  57.   text-align: left;
  58. }
  59. .box_l3 { 
  60.   background-color: ;    
  61.   display: flex;
  62.   flex-wrap: wrap;
  63.   width: 300px;    
  64.   height: 300px;    
  65.   margin-top: 20px;
  66.   margin-right: auto; 
  67.   margin-left: auto;
  68. }
  69. }
  70. .box_l4 { 
  71.   display: flex;    
  72.   flex-wrap: wrap;
  73.   justify-content: space-around;      
  74.   width: 150px;
  75.   height: 150px;
  76.   background-color: #fff;    
  77.   margin-top: 20px;
  78.   margin-bottom: 10px;
  79.   margin-left: 6px;
  80. }
  81. .box_l5 { 
  82.   display: flex;    
  83.   flex-wrap: wrap;
  84.   width: 300px;
  85.   height: 150px;
  86.   border: ;
  87.   background-color: #999;    
  88.   margin-top: 20px;
  89.   margin-bottom: 10px;
  90.   margin-left: 9px;
  91. }
  92. .pexample_l1 {
  93.   color: #008080; 
  94.   margin: 0 auto;
  95.   margin-top: 6px;    
  96.   margin-bottom: -6px;
  97.   margin: left;    
  98.   width: 100%;     
  99.   height: 20px;
  100.   font-weight: 500;
  101.   margin-left: 10px;
  102. }
  103. .pexample_l2 {
  104.   color: #000;    
  105.   margin-top: 2px; 
  106.   font-size: 12px;
  107.   margin: left;  
  108.   margin-left: 10px;
  109.   width: auto;     
  110.   height: 20px;
  111.   font-weight: 400;
  112. }
  113. .pexample_l3 {
  114.   color: #4682b4;    
  115.   margin-top: -10px;    
  116.   font-size: 12px;
  117.   margin: left;    
  118.   width: 300px;     
  119.   height: 12px;
  120.   font-weight: 400;
  121. }
  122. .pexample_l4 {
  123.   text-align: left;    
  124.   margin: left;    
  125.   margin-left: 10px;
  126.   color: #4682b4;    
  127.   margin-top: 20px;
  128.   margin-bottom: 10px;
  129.   font-size: 12px;
  130.   width: 300px;     
  131.   height: 20px;
  132.   font-weight: 400;
  133. }
  134. .fit-picture_a {
  135.   width: 160px;
  136. }
  137. .fit-picture_o {
  138.   width: 150px;
  139.   opacity: 0.5;
  140. }
  141. .fit-picture_n {
  142.   width: 40px;
  143.   margin-top: -2px;
  144. }
  145. </style>
  146. <div class="main_box_l">
  147.     <div class="box_la">
  148.         <div class="box_l">
  149.             <p class="pexample_l1">サーキュレーターで直進性の風を</p>
  150.             <div class="box_l5">
  151.             <a href="https://www.nakatomishop.com/products/list?category_id=100">
  152.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/CIRCULATING_POP_150_300.png"></a>    
  153.             <p class="pexample_l2">サーキュレーター</p> 
  154.             </div>
  155.             <div class="box_l1">
  156.             <a href="https://www.nakatomishop.com/products/detail/93">
  157.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/CV-3510_300_300.png"></a>    
  158.             <p class="pexample_l2">CV-3510</p>  
  159.             </div>
  160.             <div class="box_l1">
  161.             <a href="https://www.nakatomishop.com/products/detail/94">
  162.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/CV-3530_300_300.png"></a>    
  163.             <p class="pexample_l2">CV-3530</p>  
  164.             </div>    
  165.             <div class="box_l2">  
  166.             <a href="https://www.nakatomishop.com/products/list?category_id=100">
  167.             <p class="pexample_l4">【サーキュレーター】一覧へ移動</p></a>
  168.             </div>   
  169.         </div>
  170.         <div class="box_l">
  171.             <p class="pexample_l1">大型・ＤＣ首振りサーキュレーター</p>
  172.             <div class="box_l3">
  173.             <a href="https://www.nakatomishop.com/products/detail/1373">
  174.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DCS-600C_300_300.png"></a>    
  175.             <p class="pexample_l2">
  176.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">DCS-600C</p> 
  177.             </div>
  178.             <div class="box_l2">  
  179.             <a href="https://www.nakatomishop.com/products/list?category_id=100">
  180.             <p class="pexample_l4">【サーキュレーター】一覧へ移動</p></a>
  181.             </div>   
  182.         </div>   
  183.         <div class="box_l">
  184.             <p class="pexample_l1">まっすぐ強力な風を送る</p>
  185.             <div class="box_l1">
  186.             <a href="https://www.nakatomishop.com/products/detail/1374">
  187.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SJF-450TW_300_300.png"></a>    
  188.             <p class="pexample_l2">
  189.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">SJF-450TW</p>  
  190.             </div>
  191.             <div class="box_l1">
  192.             <a href="https://www.nakatomishop.com/products/detail/1375">
  193.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/NJF-560S_300_300.png"></a>    
  194.             <p class="pexample_l2">
  195.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">NJF-560S</p>  
  196.             </div>           
  197.             <div class="box_l5">
  198.             <a href="https://www.nakatomishop.com/products/list?category_id=29">
  199.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/JETFAN_POP_150_300.png"></a>    
  200.             <p class="pexample_l2">ジェットファン</p> 
  201.             </div>
  202.             <div class="box_l2">  
  203.             <a href="https://www.nakatomishop.com/products/list?category_id=29">
  204.             <p class="pexample_l4">【循環送風機】一覧へ移動</p></a>
  205.             </div>   
  206.         </div>
  207.         <div class="box_l">
  208.             <p class="pexample_l1">超強力送風-三相200V-</p>
  209.             <div class="box_l5">
  210.             <a href="https://www.nakatomishop.com/products/list?category_id=29">
  211.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BWF_POP_150_300.png"></a>    
  212.             <p class="pexample_l2">大型風洞扇【準備中】</p> 
  213.             </div>
  214.             <div class="box_l1">
  215.             {#<a href="https://www.nakatomishop.com/products/detail/1382">#}
  216.             <img class="fit-picture_o" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BWF-60N_300_300.png">{#</a>#} 
  217.             <p class="pexample_l2">
  218.                 {#<img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">#}BWF-60N【準備中】</p>  
  219.             </div>
  220.             <div class="box_l1">
  221.             {#<a href="https://www.nakatomishop.com/products/detail/1383">#}
  222.             <img class="fit-picture_o" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/BWF-80N_300_300.png">{#</a>#}
  223.             <p class="pexample_l2">
  224.                 {#<img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">#}BWF-80N【準備中】</p>  
  225.             </div>
  226.             <div class="box_l2">  
  227.             <a href="https://www.nakatomishop.com/products/list?category_id=29">
  228.             <p class="pexample_l4">【循環送風機】一覧へ移動</p></a>
  229.             </div>   
  230.         </div>
  231.     </div>   
  232. </div>
  234. {% endblock %}