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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_f {
  4.   display: flex;    
  5.   flex-wrap: wrap;
  6.   justify-content: space-around;    
  7.   width: 100%;
  8.   height: auto;
  9.   position: relative;
  10.         margin-top: 25px;
  11.       margin-bottom: 100px;
  12. }
  13. .box_f {
  14.   display: flex;
  15.   flex-wrap: wrap;
  16.   background-color: #fff;
  17.   width:calc(100% / 4 - 20px);  
  18.   width: 315px;
  19.   height: auto; 
  20.   {#border: solid 1px #dcdcdc;#}
  21.   margin-left: 10px;
  22.   margin-right: 10px;
  23.   margin-top: 10px;
  24.   margin-bottom: 10px;
  25.   {#position: relative;#}/*sliderに重ねる場合使用*/
  26.   {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  27. }
  28. .box_fa {
  29.     display: flex;
  30.     flex-wrap: wrap;
  31.     justify-content: space-around;    
  32.     background-color: bule;
  33.     width: auto;  
  34.     height: auto; 
  35.     text-align: center;
  36.     padding-left: auto;
  37.     padding-right: auto;
  38.     {#position: relative;#}/*sliderに重ねる場合使用*/
  39.     {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  40.   }
  41. .box_f1 { 
  42.   display: flex;    
  43.   flex-wrap: wrap;
  44.   justify-content: space-around;      
  45.   width: 150px;
  46.   height: 150px;
  47.   background-color: ;    
  48.   margin-top: 10px;
  49.   margin-bottom: 10px;
  50.   margin-left: 6px;
  51. }
  52. .box_f2 {
  53.   width: auto;
  54.   height: auto;
  55.   text-align: left;
  56. }
  57. .box_f3 {
  58.   background-color: ;    
  59.   display: flex;
  60.   flex-wrap: wrap;
  61.   width: 300px;    
  62.   height: 300px;    
  63.   margin-top: 20px;
  64.   margin-right: auto; 
  65.   margin-left: auto;
  66. }
  67. /*空欄用*/
  68. .box_f4 { 
  69.   display: flex;    
  70.   flex-wrap: wrap;
  71.   justify-content: space-around;      
  72.   width: 150px;
  73.   height: 150px;
  74.   background-color: #fff;    
  75.   margin-top: 20px;
  76.   margin-bottom: 10px;
  77.   margin-left: 6px;
  78. }
  79. /*.box_f5 { 
  80.   display: flex;    
  81.   flex-wrap: wrap;
  82.   width: 300px;
  83.   height: 150px;
  84.   border: ;
  85.   background-color: #999;    
  86.   margin-top: 20px;
  87.   margin-bottom: 10px;
  88.   margin-left: 9px;
  89. }*/
  90. .pexample_f1 {
  91.   color: #008080; 
  92.   margin: 0 auto;
  93.   margin-top: 6px;    
  94.   margin-bottom: -6px;
  95.   margin: left;    
  96.   width: 100%;     
  97.   height: 20px;
  98.   font-weight: 500;
  99.   margin-left: 10px;
  100. }
  101. .pexample_f2 {
  102.   color: #000;    
  103.   margin-top: 2px; 
  104.   font-size: 12px;
  105.   margin: left;  
  106.   margin-left: 10px;
  107.   width: auto;     
  108.   height: 20px;
  109.   font-weight: 400;
  110. }
  111. .pexample_f3 {
  112.   color: #4682b4;    
  113.   margin-top: -10px;    
  114.   font-size: 12px;
  115.   margin: left;    
  116.   width: 300px;     
  117.   height: 12px;
  118.   font-weight: 400;
  119. }
  120. .pexample_f4 {
  121.   text-align: left;    
  122.   margin: left;    
  123.   margin-left: 10px;
  124.   color: #4682b4;    
  125.   margin-top: 20px;
  126.   margin-bottom: 10px;
  127.   font-size: 12px;
  128.   width: 300px;     
  129.   height: 20px;
  130.   font-weight: 400;
  131. }
  132. .fit-picture_a {
  133.   width: 160px;
  134. }
  135. .fit-picture_o {
  136.   width: 160px;
  137.   opacity: 0.6;
  138. }
  139. .fit-picture_n {
  140.   width: 40px;
  141.   height: 16px;
  142.   margin-top: -4px;
  143.   padding-right: 4px;
  144. }
  145. </style>
  146. <div class="main_box_f">
  147.   <div class="box_fa">
  148.     <div class="box_f">
  149.       <p class="pexample_f1">環境に配慮したR32冷媒ガス</p>
  150.       <div class="box_f3">
  151.         <iframe width="300" src="https://www.youtube.com/embed/lffCGePRrhM" title="ナカトミ NAKATOMI スポットクーラー【プレミアム】SAC-30/SAC-30S(自動首振り付き)" 
  152.         frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  153.         referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>ナカトミスポットクーラー R32シリーズ
  154.       </div>
  155.       <div class="box_f2">  
  156.         <a href="https://www.nakatomishop.com/products/list?category_id=1">
  157.         <p class="pexample_f4">【スポットクーラー】一覧へ移動</p></a>
  158.       </div>   
  159.     </div>  
  160.     <div class="box_f">
  161.       <p class="pexample_f1">プレミアムモデル -R32シリーズ-</p>
  162.       <div class="box_f4">
  163.         <a href="https://www.nakatomishop.com/products/detail/1351">
  164.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30_300_300.png"></a>
  165.         <p class="pexample_f2">SAC-30</p>    
  166.       </div>
  167.       <div class="box_f4">
  168.         <a href="https://www.nakatomishop.com/products/detail/1352">
  169.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30S_300_300.png" ></a>    
  170.         <p class="pexample_f2">SAC-30S</p>    
  171.       </div>
  172.       <div class="box_f4">
  173.         <a href="https://www.nakatomishop.com/products/detail/1353">
  174.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-34_300_300.png"></a>    
  175.         <p class="pexample_f2">SAC-34</font></p>    
  176.       </div>
  177.       <div class="box_f4">
  178.         <a href="https://www.nakatomishop.com/products/detail/1354">
  179.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-34S_300_300.png"></a>    
  180.         <p class="pexample_f2">SAC-34S</p>    
  181.       </div>
  182.       <div class="box_f2">  
  183.         <a href="https://www.nakatomishop.com/products/list?category_id=76">
  184.         <p class="pexample_f4">【R32シリーズ】一覧へ移動</p></a>
  185.       </div>   
  186.     </div>   
  187.     <div class="box_f">
  188.       <p class="pexample_f1">プレミアムモデル-R32シリーズ-</p>
  189.       <div class="box_f4">
  190.         <a href="https://www.nakatomishop.com/products/detail/1366">
  191.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-27HCS_300_300.png"></a>
  192.         <p class="pexample_f2"><font size="2px" color="red">NEW　</font>SAC-27HCS</p>    
  193.       </div>
  194.       <div class="box_f4">
  195.         <a href="https://www.nakatomishop.com/products/detail/1365">
  196.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30WS_300_300.png"></a>    
  197.         <p class="pexample_f2"><font size="2px" color="red">NEW　</font>SAC-30WS</p>    
  198.       </div>
  199.       <div class="box_f4">
  200.         <a href="https://www.nakatomishop.com/products/detail/1364">
  201.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-18_300_300.png"></a>    
  202.         <p class="pexample_f2"><font size="2px" color="red">NEW　</font>SAC-18</p>    
  203.       </div>
  204.       <div class="box_f4">
  205.         <a href="https://www.nakatomishop.com/user_data/2025spop">
  206.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_300_300.png" width="100px" height="150px"></a>    
  207.         <p class="pexample_f2">OP適合表</p>    
  208.       </div>
  209.       <div class="box_f2">  
  210.         <a href="https://www.nakatomishop.com/products/list?category_id=76">
  211.           <p class="pexample_f4">【R32シリーズ】一覧へ移動</p></a>
  212.       </div>   
  213.     </div>   
  214.     <div class="box_f">
  215.       <p class="pexample_f1">プレミアムモデル-R32-<font color="#c71585">【三相200Vタイプ】</font></p>
  216.       <div class="box_f4">
  217.         <a href="https://www.nakatomishop.com/products/detail/1367">
  218.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-30S_300_300.png"></a>
  219.         <p class="pexample_f2"><font size="2px" color="red">NEW　</font>SPC-30S</p>    
  220.       </div>
  221.       <div class="box_f4">
  222.         <a href="https://www.nakatomishop.com/products/detail/1355">
  223.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-48S_300_300.png"></a>    
  224.         <p class="pexample_f2">SPC-48S</p>    
  225.       </div>
  226.       <div class="box_f4">
  227.         <a href="https://www.nakatomishop.com/products/detail/1356">
  228.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-68_300_300.png"></a>    
  229.         <p class="pexample_f2">SPC-68</p>    
  230.       </div>
  231.       <div class="box_f4">
  232.         <a href="https://www.nakatomishop.com/products/detail/1369">
  233.           <img class="fit-picture_a" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-100B_300_300.png"></a>    
  234.         <p class="pexample_f2">
  235.             <font size="2px" color="red">NEW　</font>SPC-100B</p>    
  236.       </div>
  237.       <div class="box_f2">  
  238.         <a href="https://www.nakatomishop.com/products/list?category_id=97">
  239.           <p class="pexample_f4">【R32シリーズ】一覧へ移動</p></a>
  240.       </div>   
  241.     </div>
  242.   </div>    
  243. </div>
  244. {% endblock %}