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

Open in your IDE?
  1. {% block main %}
  3. <style>
  5. .main_box_g {
  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_g {
  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: solid 1px #dcdcdc;#}
  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_ga {
  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_g1 { 
  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_g2 {
  57.   width: auto;
  58.   height: auto;
  59.   text-align: left;
  60. }
  61. .box_g3 { 
  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. /*空欄用*/
  72. .box_g4 { 
  73.   display: flex;    
  74.   flex-wrap: wrap;
  75.   justify-content: space-around;      
  76.   width: 150px;
  77.   height: 150px;
  78.   background-color: #fff;    
  79.   margin-top: 20px;
  80.   margin-bottom: 10px;
  81.   margin-left: 6px;
  82. }
  83. .box_g5 { 
  84.   display: flex;    
  85.   flex-wrap: wrap;
  86.   width: 300px;
  87.   height: 150px;
  88.   border: ;
  89.   background-color: #999;    
  90.   margin-top: 20px;
  91.   margin-bottom: 10px;
  92.   margin-left: 9px;
  93. }
  94. .pexample_g1 {
  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_g2 {
  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_g3 {
  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_g4 {
  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. }
  136. .fit-picture_a {
  137.   width: 160px;
  138. }
  139. .fit-picture_b {
  140.   width: 300px;
  141.   height: 150px;
  142.   margin-bottom: 5px;
  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>
  155. <div class="main_box_g">
  156.     <div class="box_ga">
  157.         <div class="box_g">
  158.             <p class="pexample_g1"><font color="red">NAKATOMI SHOP 限定モデル</font></p>
  159.             <div class="box_g5">
  160.             <a href="https://www.nakatomishop.com/products/detail/1395">
  161.             <img class="fit-picture_b" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2500LTD_150_300.png"></a>
  162.             <p class="pexample_g2">
  163.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">SAC-2500LTD</p>    
  164.             </div>
  165.             <div class="box_g5">
  166.             <a href="https://www.nakatomishop.com/products/detail/1396">
  167.             <img class="fit-picture_b" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2900LTD_150_300.png"></a>
  168.             <p class="pexample_g2">
  169.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">SAC-2900LTD</p>    
  170.             </div>
  171.             <div class="box_g2">  
  172.             <a href="https://www.nakatomishop.com/products/list?category_id=92">
  173.             <p class="pexample_g4">【30周年記念モデル】直販限定品へ移動</p></a>
  174.             </div>   
  175.         </div>
  176.         {#<div class="box_g">
  177.             <p class="pexample_g1">スタンダードモデル</p>
  178.             <div class="box_g1">
  179.             <a href="https://www.nakatomishop.com/products/detail/1336">
  180.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2500_300_300.png"></a>    
  181.             <p class="pexample_g2">
  182.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">SAC-2500</p>    
  183.             </div>
  184.             <div class="box_g1">
  185.             <a href="https://www.nakatomishop.com/products/detail/1338">
  186.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2500DS_300_300.png"></a>    
  187.             <p class="pexample_g2">
  188.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">SAC-2500DS</p>    
  189.             </div>
  190.             <div class="box_g1">
  191.             <a href="https://www.nakatomishop.com/products/detail/1339">
  192.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-2500_300_300.png"></a>    
  193.             <p class="pexample_g2">SPC-2500(三相200V)</p>    
  194.             </div>
  195.             <div class="box_g1">
  196.             <a href="https://www.nakatomishop.com/products/detail/1340">
  197.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-2500S_300_300.png"></a>    
  198.             <p class="pexample_g2">SPC-2500S(三相200V)</p>    
  199.             </div>            
  200.             <div class="box_g2">  
  201.             <a href="https://www.nakatomishop.com/products/list?category_id=95">
  202.             <p class="pexample_g4">【スタンダードシリーズ】一覧へ移動</p></a>
  203.             </div>   
  204.         </div>#}   
  205.         <div class="box_g">
  206.             <p class="pexample_g1">ご使用用途に合わせて選べる</p>
  207.             <div class="box_g1">
  208.             <a href="https://www.nakatomishop.com/products/detail/520">
  209.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/HMC-25_300_300.png"></a>    
  210.             <p class="pexample_g2">HMC-25</p>    
  211.             </div>
  212.             <div class="box_g1">
  213.             <a href="https://www.nakatomishop.com/products/detail/661">
  214.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/PFC-3_300_300.png"></a>    
  215.             <p class="pexample_g2">PFC-3</p>    
  216.             </div>
  217.             <div class="box_g1">
  218.             <a href="https://www.nakatomishop.com/products/detail/201">
  219.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2500C_300_300.png"></a>    
  220.             <p class="pexample_g2">SAC-2500C</p>    
  221.             </div>
  222.             <div class="box_g1">
  223.             <a href="https://www.nakatomishop.com/products/detail/449">
  224.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-25FC_300_300.png"></a>    
  225.             <p class="pexample_g2">SAC-25FC</p>    
  226.             </div>            
  227.             <div class="box_g2">  
  228.             <a href="https://www.nakatomishop.com/products/list?category_id=95">
  229.             <p class="pexample_g4">【特殊スポットクーラー】一覧へ移動</p></a>
  230.             </div>   
  231.         </div>   
  232.         <div class="box_g">
  233.             <p class="pexample_g1">小型DCクーラー</p>
  234.             <div class="box_g1">
  235.             <a href="https://www.nakatomishop.com/products/detail/694">
  236.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SDC-033_300_300.png"></a>    
  237.             <p class="pexample_g2">
  238.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">SDC-033</p>    
  239.             </div>
  240.             <div class="box_g1">
  241.             <a href="https://www.nakatomishop.com/products/detail/695">
  242.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SDC-034_300_300.png"></a>    
  243.             <p class="pexample_g2">
  244.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">SDC-034</p>    
  245.             </div>       
  246.             <div class="box_g1">
  247.             <a href="https://www.nakatomishop.com/products/list?category_id=15">
  248.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_dct_300_300.png"></a>    
  249.             <p class="pexample_g2">各種ダクト</p>    
  250.             </div>       
  251.             <div class="box_g1">
  252.             <a href="https://www.nakatomishop.com/products/list?category_id=16">
  253.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_FL_300_300.png"></a>    
  254.             <p class="pexample_g2">各種フィルター</p>    
  255.             </div>   
  256.             <div class="box_g2">  
  257.             <a href="https://www.nakatomishop.com/products/list?category_id=70">
  258.             <p class="pexample_g4">【小型DCクーラー】一覧へ移動</p></a>
  259.             </div>      
  260.         </div>           
  261.         <div class="box_g">
  262.             <p class="pexample_g1">選べる移動式エアコン</p>
  263.             <div class="box_g1">
  264.             <a href="https://www.nakatomishop.com/products/detail/551">
  265.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/MAC-10_300_300.png"></a>
  266.             <p class="pexample_g2">
  267.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/kanbai.png"><s>MAC-10</s></p>    
  268.             </div>
  269.             <div class="box_g1">
  270.             <a href="https://www.nakatomishop.com/products/detail/1370">
  271.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/MAC-20N_300_300.png"></a>
  272.             <p class="pexample_g2">
  273.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">MAC-20N</p>    
  274.             </div>       
  275.             <div class="box_g1">
  276.             <a href="https://www.nakatomishop.com/products/detail/1371">
  277.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/MAC-25N_300_300.png"></a>    
  278.             <p class="pexample_g2">
  279.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">MAC-25N</p>    
  280.             </div>       
  281.             <div class="box_g1">
  282.             <a href="https://www.nakatomishop.com/products/list?category_id=9">
  283.             <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_etc_300_300.png"></a>    
  284.             <p class="pexample_g2">その他</p>    
  285.             </div>   
  286.             <div class="box_g2">  
  287.             <a href="https://www.nakatomishop.com/products/list?category_id=96">
  288.             <p class="pexample_g4">【移動式エアコン】一覧へ移動</p></a>
  289.             </div>      
  290.         </div>           
  291.     </div>   
  292. </div>
  294. {% endblock %}