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

Open in your IDE?
  1. {% block main %}
  3. <style>
  5. .main_box_r {
  6.   display: flex;    
  7.   flex-wrap: wrap;
  8.   justify-content: space-around;    
  9.   width: 100%;
  10.   height: auto;
  11.   background-color: ;
  12.   position: relative;
  13.   margin-top: 25px;
  14.   margin-bottom: 100px;
  15. }
  16. .box_r {
  17.   display: flex;
  18.   flex-wrap: wrap;
  19.   background-color: #fff;
  20.   width:calc(100% / 4 - 20px);  
  21.   width: 315px;
  22.   height: auto; 
  23.   border: ;
  24.   margin-left: 10px;
  25.   margin-right: 10px;
  26.   margin-top: 10px;
  27.   margin-bottom: 10px;
  28.   {#position: relative;#}/*sliderに重ねる場合使用*/
  29.   {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  30. }
  31. .box_ra {
  32.     display: flex;
  33.     flex-wrap: wrap;
  34.     justify-content: space-around;    
  35.     background-color: bule;
  36.     width: auto;
  37.     height: auto; 
  38.     text-align: center;
  39.     padding-left: auto;
  40.     padding-right: auto;
  41.     {#position: relative;#}/*sliderに重ねる場合使用*/
  42.     {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  43. }
  45. .box_r1 { 
  46.   display: flex;    
  47.   flex-wrap: wrap;
  48.   justify-content: space-around;      
  49.   width: 150px;
  50.   height: 150px;
  51.   background-color: ;    
  52.   margin-top: 10px;
  53.   margin-bottom: 10px;
  54.   margin-left: 6px;
  55. }
  56. .box_r2 {
  57.   width: auto;
  58.   height: auto;
  59.   text-align: left;
  60. }
  61. .box_r3 {
  62.   background-color: ;    
  63.   display: flex;
  64.   flex-wrap: wrap;
  65.   width: 300px;    
  66.   height: 300px;    
  67.   margin-top: 20px;
  68.   margin-right: auto; 
  69.   margin-left: auto;
  70. }
  71. .box_r4 { 
  72.   display: flex;    
  73.   flex-wrap: wrap;
  74.   justify-content: space-around;      
  75.   width: 150px;
  76.   height: 150px;
  77.   background-color: #fff;    
  78.   margin-top: 20px;
  79.   margin-bottom: 10px;
  80.   margin-left: 6px;
  81. }
  82. .box_r5 { 
  83.   display: flex;    
  84.   flex-wrap: wrap;
  85.   width: 300px;
  86.   height: 150px;
  87.   border: ;
  88.   background-color: #999;    
  89.   margin-top: 20px;
  90.   margin-bottom: 10px;
  91.   margin-left: 9px;
  92. }
  94. .pexample_r1 {
  95.   color: #008080; 
  96.   margin: 0 auto;
  97.   margin-top: 6px;    
  98.   margin-bottom: -6px;
  99.   margin: left;    
  100.   width: 100%;     
  101.   height: 20px;
  102.   font-weight: 500;
  103.   margin-left: 10px;
  104. }
  105. .pexample_r2 {
  106.   color: #000;    
  107.   margin-top: 2px; 
  108.   font-size: 12px;
  109.   margin: left;  
  110.   margin-left: 10px;
  111.   width: auto;     
  112.   height: 20px;
  113.   font-weight: 400;
  114. }
  115. .pexample_r3 {
  116.   color: #4682b4;    
  117.   margin-top: -10px;    
  118.   font-size: 12px;
  119.   margin: left;    
  120.   width: 300px;     
  121.   height: 12px;
  122.   font-weight: 400;
  123. }
  124. .pexample_r4 {
  125.   text-align: left;    
  126.   margin: left;    
  127.   margin-left: 10px;
  128.   color: #4682b4;    
  129.   margin-top: 20px;
  130.   margin-bottom: 10px;
  131.   font-size: 12px;
  132.   width: 300px;     
  133.   height: 20px;
  134.   font-weight: 400;
  135. }
  137. .fit-picture_a {
  138.   width: 150px;
  139. }
  140. .fit-picture_b {
  141.   width: 300px;
  142.   height: 150px;
  143. }
  144. .fit-picture_o {
  145.   width: 160px;
  146.   opacity: 0.6;
  147. }
  148. .fit-picture_n {
  149.   width: 40px;
  150.   height: 16px;
  151.   margin-top: -4px;
  152.   padding-right: 4px;
  153. }
  154. </style>
  156. <div class="main_box_r">
  157.     <div class="box_ra">
  158.         <div class="box_r">
  159.             <p class="pexample_r1">天吊り/床置き式　除湿機</p>
  160.             <div class="box_r3">
  161.             <a href="https://www.nakatomishop.com/products/detail/1372">
  162.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/TFDM-25_POP_300_300.png"></a>   
  163.             <p class="pexample_r2">
  164.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">TFDM-25</p>    
  165.             </div>
  166.             <div class="box_r2">  
  167.             <a href="https://www.nakatomishop.com/products/list?category_id=36">
  168.             <p class="pexample_r4">【除湿機】一覧へ移動</p></a>
  169.             </div>   
  170.         </div>   
  171.         <div class="box_r">
  172.             <p class="pexample_r1">除湿機</p>
  173.             <div class="box_r1">
  174.             <a href="https://www.nakatomishop.com/products/detail/106">
  175.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DM-10_300_300.png"></a>    
  176.             <p class="pexample_r2">DM-10</p>    
  177.             </div>
  178.             <div class="box_r1">
  179.             <a href="https://www.nakatomishop.com/products/detail/108">
  180.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DM-15_300_300.png"></a>    
  181.             <p class="pexample_r2">DM-15</p>    
  182.             </div>
  183.             <div class="box_r1">
  184.             <a href="https://www.nakatomishop.com/products/detail/667">
  185.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DM-22_300_300.png"></a>    
  186.             <p class="pexample_r2">DM-22</p>    
  187.             </div>
  188.             <div class="box_r1">
  189.             <a href="https://www.nakatomishop.com/products/detail/109">
  190.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DM-30_300_300.png"></a>    
  191.             <p class="pexample_r2">DM-30<font color="#0000cd"><b>【三相200V】</b></font></p>    
  192.             </div>    
  193.             <div class="box_r2">  
  194.             <a href="https://www.nakatomishop.com/products/list?category_id=36">
  195.             <p class="pexample_r4">【除湿機】一覧へ移動</p></a>
  196.             </div>   
  197.         </div>   
  198.         <div class="box_r">
  199.             <p class="pexample_r1">オプション品</p>
  200.             <div class="box_r1">
  201.             <a href="https://www.nakatomishop.com/products/list?category_id=102">
  202.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF20_25F_FL_150_150.png"></a>    
  203.             <p class="pexample_r2">換気扇交換用フィルター</p>    
  204.             </div>            
  205.             <div class="box_r1">
  206.             <a href="https://www.nakatomishop.com/products/list?category_id=99">
  207.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_BF_300_300.png"></a>    
  208.             <p class="pexample_r2">ビッグファン交換用羽根</p>    
  209.             </div>
  210.             <div class="box_r1">
  211.             <a href="https://www.nakatomishop.com/products/list?category_id=27">
  212.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_FF_300_300.png"></a>    
  213.             <p class="pexample_r2">工場扇-交換用羽根</p>    
  214.             </div>       
  215.             <div class="box_r1">
  216.             <a href="https://www.nakatomishop.com/products/list?category_id=61">
  217.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_CF_300_300.png"></a>    
  218.             <p class="pexample_r2">エレメント/フィルター</p>    
  219.             </div>     
  220.             <div class="box_r2">  
  221.             <a href="https://www.nakatomishop.com/products/list?category_id=31">
  222.             <p class="pexample_r4">【大型冷風扇】一覧へ移動</p></a>
  223.             </div>   
  224.         </div>        
  225.         <div class="box_r">
  226.             <p class="pexample_r1">オプション品</p>
  227.             <div class="box_r1">
  228.             <a href="https://www.nakatomishop.com/products/list?category_id=15">
  229.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_dct_300_300.png"></a>    
  230.             <p class="pexample_r2">各種ダクト</p>    
  231.             </div>       
  232.             <div class="box_r1">
  233.             <a href="https://www.nakatomishop.com/products/list?category_id=16">
  234.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_FL_300_300.png"></a>    
  235.             <p class="pexample_r2">各種フィルター</p>    
  236.             </div>   
  237.             <div class="box_r1">
  238.             <a href="https://www.nakatomishop.com/products/list?category_id=9">
  239.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_etc_300_300.png"></a>    
  240.             <p class="pexample_r2">その他</p>    
  241.             </div>   
  242.             <div class="box_r1">
  243.             <a href="https://www.nakatomishop.com/user_data/2025spop">
  244.                 <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_300_300.png"></a>    
  245.             <p class="pexample_r2">OP適合表</p>    
  246.             </div>
  247.             <div class="box_r2">  
  248.             <a href="https://www.nakatomishop.com/products/list?category_id=32">
  249.             <p class="pexample_r4">【ミスト発生機】一覧へ移動</p></a>
  250.             </div>   
  251.         </div>      
  252.     </div>   
  253. </div>
  255. {% endblock %}