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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_spr {
  4.   display: flex;
  5.   flex-wrap: wrap;
  6.   justify-content: space-around;
  7.   width: auto;
  8.   height: auto;
  9.   display: flex;
  10.   margin-left: auto;
  11.   margin-right: auto;
  12.   background-color: ;
  13.   border-radius: px;
  14.   z-index: 9999;
  15.   position: relative;
  16.   background-size: cover;
  17. }
  18. .box_spr {
  19.   display: flex;
  20.   flex-wrap: wrap;
  21.   justify-content: space-around;
  22.   background-image: url("https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/sm2025_top.png"); 
  23.   width: 100%;
  24.   text-align: center;
  25.   margin-top: px;
  26.   margin-left: auto;
  27.   margin-right: auto;
  28.   margin-bottom: px;
  29.   position: relative;
  30.   border-radius: px;
  31.   background-size: cover;
  32. }
  33. .box_spra {
  34.   display: flex;
  35.   flex-wrap: wrap;
  36.   justify-content: space-around;    
  37.   width: 100%;  
  38.   height: auto; 
  39.   padding-left: 4%;
  40.   padding-right: 4%;
  41.   {#position: relative;#}/*sliderに重ねる場合使用*/
  42.   {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  43. }
  44. .box_spr1 {
  45.   display: flex;
  46.   flex-wrap: wrap;
  47.   justify-content: space-around;
  48.   width: 100%;
  49.   height: 40px;
  50.   margin-top: 6px;
  51.   margin-left: 5px;
  52.   margin-right: 5px; 
  53.   border-radius: 6px;
  54.   z-index: 999;
  55. }
  56. .box_spr2 {
  57.   display: flex;
  58.   flex-wrap: wrap;
  59.   justify-content: space-around;
  60.   width: 100%;
  61.   margin-top: -20px;
  62.   margin-left: 3vw;
  63.   margin-right: 3vw;
  64. }
  65. .box_spr3 {
  66.   display: flex;
  67.   flex-wrap: wrap;
  68.   justify-content: space-around;
  69.   background-color: ;
  70.   width: calc(118% / 2 - 5px);
  71.   min-width: 320px;
  72.   height: auto;
  73.   z-index: 1;
  74.   margin-bottom: 6%;
  75. }
  76. .box_spr4 {
  77.   /*background: linear-gradient(176deg,#00cccc 5%, #ffffff 15%, #ffffff 80%, #00cccc);*/
  78.   border-radius: 8px;
  79.   width: 340px;
  80.   height: 340px;
  81.   z-index: 1;
  82.   /*border: solid 1px #dcdcdc;*/
  83.   margin-bottom: 10px;
  84.   margin-top: 20px;
  85. }
  86. .box_spr5 {
  87.   background-color: ;
  88.   width: calc(100% / 6 - 2px);
  89.   height: auto;
  90.   max-height: 180px;
  91.   z-index: 9;
  92.   margin-top: 10px;
  93. }
  94. .box_spr6 {
  95.   width: 100%;
  96.   margin-bottom: 0px;
  97. }
  98. .box_spr7 {
  99.   width: 100%;
  100.   max-height: 300px;
  101.   border-radius: 6px;
  102.   margin: 0 auto;
  103.   position: absolute;
  104.   top: 0px;
  105. }
  106. .pexample_spr {
  107.   font-size: 16px;
  108.   color: #ffffff;
  109.   font-weight: 500;
  110.   height: auto;
  111.   margin-left: px;
  112.   text-align: center;
  113.   margin-top: 10px;
  114. }  
  115. .pexample_spr2 {
  116.   font-size: 16px;
  117.   color: #000;
  118.   font-weight: 400;
  119.   height: auto;
  120.   margin-left: px;
  121.   text-align: center;
  122.   margin-top: 3px;
  123. }   
  124. /*ビデオコントロール*/
  125.   video {
  126.   max-width: auto;
  127.   border-radius: 6px;
  128.   margin: 0 auto;
  129.   position: absolute;
  130.   top: 0px;
  131. }
  132. .slide-in4 {
  133.   margin-top: 2vw;
  134.   font-size: 26px;
  135.   font-weight: bold;
  136.   animation: slideIn 2s ease-out;
  137.   color: #66cdaa; 
  138.   z-index: 9999; 
  139.   text-align: center;
  140.   font-weight: 600;
  141.   /*-webkit-text-stroke: 0.2px #fff; 
  142.   text-stroke: 0.2px #fff;*/
  143.   padding-left: 4%;
  144.   padding-right: 4%;
  145. }
  146. .slide-in5 {
  147.   font-size: 21px;
  148.   font-weight: bold;
  149.   animation: slideIn 2s ease-out;
  150.   color: #006666;
  151.   z-index: 9999;
  152.   text-align: center;
  153.   font-weight: 600;
  154.   margin-top: -2px;
  155. }
  156. .slide-in5a {
  157.   background-color: #fff;
  158.   border-radius: 25px; 
  159.   border: solid 1px #006666;
  160.   font-size: 16px;
  161.   font-weight: bold;
  162.   animation: slideIn 2s ease-out;
  163.   color: #fff;
  164.   z-index: 9999;
  165.   text-align: center;
  166.   font-weight: 400;
  167.   margin-top: 10px;
  168.   margin-bottom: 10px;
  169. }
  170. @keyframes slideIn {
  171.     0% {
  172.     transform: translateX(-100%);
  173.     opacity: 0;
  174.     }
  175.     100% {
  176.     transform: translateX(0);
  177.     opacity: 1;
  178.     }
  179.   }
  180. .fadeslide {
  181.     position: relative;
  182.     width: 320px;
  183.     height: 320px;
  184.     overflow: hidden;
  185.     z-index: 0;
  186.   }
  187.   .fadeslide div {
  188.     position: absolute;
  189.     top: 0;
  190.     left: 0;
  191.   }
  192.   .fadeslide div:nth-of-type(1) {
  193.     animation: fadeslide 60s 0s infinite both;
  194.     z-index: 12;
  195.   }
  196.   .fadeslide div:nth-of-type(2) {
  197.     animation: fadeslide 60s 5s infinite both;
  198.     z-index: 11;
  199.   }
  200.   .fadeslide div:nth-of-type(3) {
  201.     animation: fadeslide 60s 10s infinite both;
  202.     z-index: 10;
  203.   }
  204.   .fadeslide div:nth-of-type(4) {
  205.     animation: fadeslide 60s 15s infinite both;
  206.     z-index: 9;
  207.   }
  208.   .fadeslide div:nth-of-type(5) {
  209.     animation: fadeslide 60s 20s infinite both;
  210.     z-index: 8;
  211.   }
  212.   .fadeslide div:nth-of-type(6) {
  213.     animation: fadeslide 60s 25s infinite both;
  214.     z-index: 7;
  215.   }
  216.   .fadeslide div:nth-of-type(7) {
  217.     animation: fadeslide 60s 30s infinite both;
  218.     z-index: 6;
  219.   }      
  220.   .fadeslide div:nth-of-type(8) {
  221.     animation: fadeslide 60s 35s infinite both;
  222.     z-index: 5;
  223.   }      
  224.   .fadeslide div:nth-of-type(9) {
  225.     animation: fadeslide 60s 40s infinite both;
  226.     z-index: 4;
  227.   }      
  228.   .fadeslide div:nth-of-type(10) {
  229.     animation: fadeslide 60s 45s infinite both;
  230.     z-index: 3;
  231.   }      
  232.   .fadeslide div:nth-of-type(11) {
  233.     animation: fadeslide 60s 50s infinite both;
  234.     z-index: 2;
  235.   } 
  236.   .fadeslide div:nth-of-type(12) {
  237.     animation: fadeslide 60s 55s infinite both;
  238.     z-index: 1;
  239.   }        
  240. @keyframes fadeslide {
  241.   0% { left: 0; opacity: 0; }
  242.   3% { left: 0; opacity: 1; }
  243.   6% { left: 0; opacity: 1; }
  244.   9% { left: 0; opacity: 0; }
  245.   10% { left: 100%; opacity: 0; }
  246.   100% { left: 100%; opacity: 0; }
  247. }
  248. summary {
  249.   display: block;
  250.   list-style: none;
  251.   cursor: pointer;
  252.   color: #ffffff;
  253.  }
  254. summary::-webkit-details-marker {
  255.   display:none;
  256. }
  257.  details {
  258.   margin: 0 auto;
  259.   margin-left: 0;
  260. }
  261. .cp_navi03 ul {
  262.   width: 260px;/*メニューの幅*/
  263.   margin-left: 20px;
  264.   margin: 0 auto;
  265.   padding: 0;
  266.   list-style-type: none;
  267.   background-color: #eeeeee;
  268.   border-radius: 4px 4px 4px 4px;
  269.   position: absolute;
  270. }
  271. .cp_navi03 li a {
  272.   display: block;
  273.   padding: 6px 16px;
  274.   text-decoration: none;
  275.   color: #000000;
  276.   transition: all .3s;
  277.   text-align: left;
  278. }
  279. .cp_navi03 li {
  280.   text-align: center;
  281. }
  282. .cp_navi03 li:last-child {
  283.   border-bottom: none;
  284. }
  285. .cp_navi03 li a.active {
  286.   margin: 0 auto;
  287.   margin-top: px;
  288.   color: #fff;
  289.   background-color: #1b2538;
  290.   border-radius: 4px 4px 0px 0px;
  291.   font-weight: 900;
  292. }
  293. .cp_navi03 li a:hover:not(.active) {
  294.   color: #ffffff;
  295.   background-color: #1b2538;
  296.   text-align: left;
  297. }
  298. .example_cp {
  299.   display: inline;
  300.   font-size: 3rem;
  301.   color: #ffffff;
  302. }
  303. .fit-picture_o {
  304.   width: 160px;
  305.   opacity: 0.6;
  306. }
  307. .fit-picture_n {
  308.   width: 40px;
  309.   margin-top: -2px;
  310. }
  311. </style>
  312. <html>
  313.   <head>
  314.     <meta charset="utf-8">
  315.       <meta name="keywords" content="ナカトミ スポットクーラー">
  316.       <title>ナカトミヒーター</title>
  317.     <meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  318.   </head>
  319. <body>
  320. <div class="main_box_spr">
  321.   <div class="box_spr">
  322.     <div class="box_spr1">
  323.     <details>
  324.       <summary>
  325.         <p class="example_cp">≡</p>
  326.       </summary>  
  327.       <div class="cp_navi03">
  328.         <ul>
  329.           <li><a href="https://www.nakatomishop.com/products/list?category_id=76" class="active">新商品R32シリーズ</a></li>
  330.           <li><a href="https://www.nakatomishop.com/products/detail/1364">SAC-18</a></li>
  331.           <li><a href="https://www.nakatomishop.com/products/detail/1366">SAC-27HCS</a></li>
  332.           <li><a href="https://www.nakatomishop.com/products/detail/1351">SAC-30</a></li>
  333.           <li><a href="https://www.nakatomishop.com/products/detail/1352">SAC-30S</a></li>
  334.           <li><a href="https://www.nakatomishop.com/products/detail/1365">SPC-30WS</a></li>
  335.           <li><a href="https://www.nakatomishop.com/products/detail/1353">SPC-34</a></li>
  336.           <li><a href="https://www.nakatomishop.com/products/detail/1354">SAC-34S</a></li>
  337.           <li><a href="https://www.nakatomishop.com/products/detail/1367">SPC-30S(三相200V)</a></li>
  338.           <li><a href="https://www.nakatomishop.com/products/detail/1355">SPC-48S(三相200V)</a></li>
  339.           <li><a href="https://www.nakatomishop.com/products/detail/1356">SPC-68(三相200V)</a></li>
  340.           <li><a href="https://www.nakatomishop.com/products/detail/1369">SPC-100B(三相200V)</a></li>
  341.           <li><a href="https://www.nakatomishop.com/user_data/2025spop"><font size="2rem">適合オプション品の確認はこちらから</font></a></li> 
  342.         </ul>
  343.       </div>
  344.       </details> 
  345.     </div>
  346.     <div class="box_spra">
  347.       <div class="box_spr2">
  348.         <div class="box_spr3">
  349.           <div class="box_spr6">
  350.             <div class="slide-in4">環境に配慮したR32冷媒!全閉式ファンモーター搭載!プレミアムモデル
  351.             </div>
  352.           </div>
  353.           <div class="box_spr5">
  354.             <p class="pexample_spr">
  355.             <a href="https://www.nakatomishop.com/products/detail/1364">
  356.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-18_150_200.png" width="100%" alt=""></a><p class="pexample_spr2"><font color="red">NEW </font>SAC-18</p></p>
  357.           </div>
  358.           <div class="box_spr5">
  359.             <p class="pexample_spr">
  360.             <a href="https://www.nakatomishop.com/products/detail/1366">
  361.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-27HCS_150_200.png" width="100%" alt=""></a><p class="pexample_spr2"><font color="red">NEW </font>SAC-27HCS</p></p>
  362.           </div>
  363.           <div class="box_spr5">
  364.             <p class="pexample_spr">
  365.             <a href="https://www.nakatomishop.com/products/detail/1365">
  366.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30WS_150_200.png" width="100%" alt=""></a><p class="pexample_spr2"><font color="red">NEW </font>SAC-30WS</p></p>
  367.           </div>
  368.           <div class="box_spr5">
  369.             <p class="pexample_spr">
  370.             <a href="https://www.nakatomishop.com/products/detail/1367">
  371.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-30S_150_200.png" width="100%" alt=""></a><p class="pexample_spr2"><font color="red">NEW </font>SPC-30S</p></p>
  372.           </div>
  373.           <div class="box_spr5">
  374.             <p class="pexample_spr">
  375.             <a href="https://www.nakatomishop.com/products/detail/1369">
  376.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-100B_150_200.png" width="100%" alt=""></a><p class="pexample_spr2">
  377.                 <font color="red">NEW </font>SPC-100B</p></p>
  378.           </div>
  379.         </div>
  380.         <div class="box_spr4">
  381.           <div class="fadeslide">
  382.             <div>  
  383.               <a href="https://www.nakatomishop.com/products/detail/1364">
  384.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-18_SL2.png" width="320px" alt="スライドショー画像1"></a>
  385.             </div>
  386.             <div>   
  387.               <a href="https://www.nakatomishop.com/products/detail/1351">
  388.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30_SL2.png" width="320px" alt="スライドショー画像2"></a>
  389.             </div>
  390.             <div> 
  391.               <a href="https://www.nakatomishop.com/products/detail/1352">
  392.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30S_SL2.png" width="320px" alt="スライドショー画像3"></a>
  393.             </div>
  394.             <div> 
  395.               <a href="https://www.nakatomishop.com/products/detail/1365">
  396.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30WS_SL2.png" width="320px" alt="スライドショー画像4"></a>
  397.             </div>
  398.             <div> 
  399.               <a href="https://www.nakatomishop.com/products/detail/1366">
  400.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-27HCS_SL2.png" width="320px" alt="スライドショー画像5"></a>
  401.             </div>
  402.             <div> 
  403.               <a href="https://www.nakatomishop.com/products/detail/1353">
  404.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-34_SL2.png" width="320px" alt="スライドショー画像6"></a>
  405.             </div>            
  406.             <div> 
  407.               <a href="https://www.nakatomishop.com/products/detail/1354">
  408.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-34S_SL2.png" width="320px" alt="スライドショー画像7"></a>
  409.             </div>            
  410.             <div> 
  411.               <a href="https://www.nakatomishop.com/products/detail/1367">
  412.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-30S_SL2.png" width="320px" alt="スライドショー画像8"></a>
  413.             </div>            
  414.             <div> 
  415.               <a href="https://www.nakatomishop.com/products/detail/1355">
  416.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-48S_SL2.png" width="320px" alt="スライドショー画像9"></a>
  417.             </div>            
  418.             <div> 
  419.               <a href="https://www.nakatomishop.com/products/detail/1356">
  420.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-68_SL2.png" width="320px" alt="スライドショー画像10"></a>
  421.             </div>            
  422.             <div> 
  423.               <a href="https://www.nakatomishop.com/products/detail/1369">
  424.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-100B_SL2.png" width="320px" alt="スライドショー画像11"></a>
  425.             </div>    
  426.             <div> 
  427.               <a href="https://www.nakatomishop.com/products/list?category_id=15">
  428.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_dct_300_300.png" width="320px" alt="スライドショー画像12"></a>
  429.             </div>                   
  430.           </div>
  431.           <script>
  432.             $(function(){
  433.               $(".slideshow-slide li").css({"position":"relative"});
  434.               $(".slideshow-slide li").hide().css({"position":"absolute"});
  435.               $(".slideshow-slide li:first").addClass("slide");
  436.               $(".slideshow-slide li:nth-child(2)").css({"display":"block"});
  437.               setInterval(function(){
  438.                 var $active = $(".slideshow-slide li.slide");
  439.                 var $next = $active.next("li").length?$active.next("li"):$(".slideshow-slide li:first");
  440.                 var $nextnext = $next.next("li");
  441.                 $active.fadeOut(0).removeClass("slide");
  442.                 $next.show().addClass("slide");
  443.                 $nextnext.css({"display":"block"});
  444.               },3000);
  445.             });
  446.           </script>
  447.         </div>
  448.       </div>
  449.     </div>    
  450.   </div>    
  451. </div>
  452.     </body>
  453. {% endblock %}