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

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