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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_sps {
  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_sps {
  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_spsa {
  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_sps1 {
  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_sps2 {
  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_sps3 {
  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_sps4 {
  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_sps5 {
  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_sps6 {
  95.   width: 100%;
  96.   margin-bottom: 0px;
  97. }
  98. .box_sps7 {
  99.   width: 100%;
  100.   max-height: 300px;
  101.   border-radius: 6px;
  102.   margin: 0 auto;
  103.   position: absolute;
  104.   top: 0px;
  105. }
  106. .pexample_sps {
  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_sps2 {
  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-in6 {
  133.   margin-top: 2vw;
  134.   font-size: 26px;
  135.   font-weight: bold;
  136.   animation: slideIn 2s ease-out;
  137.   color: #0000ff;
  138.   z-index: 9999;
  139.   text-align: center;
  140.   font-weight: 600;
  141.   /*-webkit-text-stroke: 0.1px #fff; 
  142.   text-stroke: 0.1px #fff;*/
  143.   padding-left: 4%;
  144.   padding-right: 4%;
  145. }
  146. .slide-in7 {
  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-in5b {
  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_navi04 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_navi04 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_navi04 li {
  280.   text-align: center;
  281. }
  282. .cp_navi04 li:last-child {
  283.   border-bottom: none;
  284. }
  285. .cp_navi04 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_navi04 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: 4rem;
  301.   color: #ffffff;
  302. }
  304. .fit-picture_o {
  305.   width: 160px;
  306.   opacity: 0.6;
  307. }
  308. .fit-picture_n {
  309.   width: 40px;
  310.   margin-top: -2px;
  311. }
  312. </style>
  313. <html>
  314. <head>
  315.     <meta charset="utf-8">
  316.     <meta name="keywords" content="ナカトミ スポットクーラー">
  317.     <title>ナカトミヒーター</title>
  318.     <meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  319. </head>
  320. <body>
  321. <div class="main_box_sps">
  322.   <div class="box_sps">
  323.     <div class="box_sps1">
  324.     <details>
  325.       <summary>
  326.         <p class="example_cp">≡</p>
  327.       </summary>  
  328.       <div class="cp_navi04">
  329.         <ul>
  330.           <li><a href="https://www.nakatomishop.com/products/list?category_id=94" class="active">スタンダードシリーズ</a></li>
  331.           <li><a href="https://www.nakatomishop.com/products/detail/1336">SAC-2500</a></li>
  332.           <li><a href="https://www.nakatomishop.com/products/detail/1337">SAC-2500S</a></li>
  333.           <li><a href="https://www.nakatomishop.com/products/detail/1338">SAC-2500DS</a></li>
  334.           <li><a href="https://www.nakatomishop.com/products/detail/1339">SPC-2500(三相200V)</a></li> 
  335.           <li><a href="https://www.nakatomishop.com/products/detail/1340">SPC-2500S(三相200V)</a></li>
  336.           <li><a href="https://www.nakatomishop.com/user_data/2025spop"><font size="2rem">適合オプション品の確認はこちらから</font></a></li> 
  337.         </ul>
  338.       </div>
  339.     </details> 
  340.     </div>
  341.     <div class="box_spsa">
  342.       <div class="box_sps2">
  343.         <div class="box_sps4">
  344.           <div class="fadeslide">
  345.             <div>  
  346.               <a href="https://www.nakatomishop.com/products/detail/1336">
  347.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SAC-2500_SL2.png" width="300px" alt="スライドショー画像1"></a>
  348.             </div>
  349.             <div>   
  350.               <a href="https://www.nakatomishop.com/products/detail/1337">
  351.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SAC-2500S_SL2.png" width="300px" alt="スライドショー画像2"></a>
  352.             </div>
  353.             <div> 
  354.               <a href="https://www.nakatomishop.com/products/detail/1338">
  355.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SAC-2500DS_SL2.png" width="300px" alt="スライドショー画像3"></a>
  356.             </div>
  357.             <div> 
  358.               <a href="https://www.nakatomishop.com/products/detail/1339">
  359.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SPC-2500_SL2.png" width="300px" alt="スライドショー画像4"></a>
  360.             </div>
  361.             <div> 
  362.               <a href="https://www.nakatomishop.com/products/detail/1340">
  363.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SPC-2500S_SL2.png" width="300px" alt="スライドショー画像5"></a>
  364.             </div>
  365.             <div> 
  366.               <a href="https://www.nakatomishop.com/products/list?category_id=15">
  367.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_dct_300_300.png" width="300px" alt="スライドショー画像6"></a>
  368.             </div>
  369.             <div>  
  370.               <a href="https://www.nakatomishop.com/products/detail/1336">
  371.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SAC-2500_SL2.png" width="300px" alt="スライドショー画像7"></a>
  372.             </div>
  373.             <div>   
  374.               <a href="https://www.nakatomishop.com/products/detail/1337">
  375.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SAC-2500S_SL2.png" width="300px" alt="スライドショー画像8"></a>
  376.             </div>
  377.             <div> 
  378.               <a href="https://www.nakatomishop.com/products/detail/1338">
  379.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SAC-2500DS_SL2.png" width="300px" alt="スライドショー画像9"></a>
  380.             </div>
  381.             <div> 
  382.               <a href="https://www.nakatomishop.com/products/detail/1339">
  383.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SPC-2500_SL2.png" width="300px" alt="スライドショー画像10"></a>
  384.             </div>
  385.             <div> 
  386.               <a href="https://www.nakatomishop.com/products/detail/1340">
  387.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/SPC-2500S_SL2.png" width="300px" alt="スライドショー画像11"></a>
  388.             </div> 
  389.             <div> 
  390.               <a href="https://www.nakatomishop.com/products/list?category_id=15">
  391.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_dct_300_300.png" width="300px" alt="スライドショー画像6"></a>
  392.             </div>            
  393.           </div>
  394.           <script>
  395.             $(function(){
  396.               $(".slideshow-slide li").css({"position":"relative"});
  397.               $(".slideshow-slide li").hide().css({"position":"absolute"});
  398.               $(".slideshow-slide li:first").addClass("slide");
  399.               $(".slideshow-slide li:nth-child(2)").css({"display":"block"});
  400.               setInterval(function(){
  401.                 var $active = $(".slideshow-slide li.slide");
  402.                 var $next = $active.next("li").length?$active.next("li"):$(".slideshow-slide li:first");
  403.                 var $nextnext = $next.next("li");
  404.                 $active.fadeOut(0).removeClass("slide");
  405.                 $next.show().addClass("slide");
  406.                 $nextnext.css({"display":"block"});
  407.               },3000);
  408.             });
  409.           </script>
  410.         </div>  
  411.         <div class="box_sps3">
  412.           <div class="box_sps6">
  413.             <div class="slide-in6">全閉式ファンモーター搭載！スタンダードモデル
  414.             </div>
  415.           </div>
  416.           <div class="box_sps5">
  417.             <p class="pexample_sps">
  418.             <a href="https://www.nakatomishop.com/products/detail/1336">
  419.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2500S_150_200.png" width="100%" alt=""></a><p class="pexample_sps2">
  420.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">SAC-2500</p>
  421.           </div>
  422.           <div class="box_sps5">
  423.             <p class="pexample_sps">
  424.             <a href="https://www.nakatomishop.com/products/detail/1337">
  425.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2500S_150_200.png" width="100%" alt=""></a><p class="pexample_sps2">SAC-2500S</p>
  426.           </div>
  427.           <div class="box_sps5">
  428.             <p class="pexample_sps">
  429.             <a href="https://www.nakatomishop.com/products/detail/1338">
  430.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2500S_150_200.png" width="100%" alt=""></a><p class="pexample_sps2">
  431.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">SAC-2500DS</p>
  432.           </div>
  433.           <div class="box_sps5">
  434.             <p class="pexample_sps">
  435.             <a href="https://www.nakatomishop.com/products/detail/1339">
  436.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2500S_150_200.png" width="100%" alt=""></a><p class="pexample_sps2">SPC-2500</p>
  437.           </div>
  438.           <div class="box_sps5">
  439.             <p class="pexample_sps">
  440.             <a href="https://www.nakatomishop.com/products/detail/1340">
  441.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-2500S_150_200.png" width="100%" alt=""></a><p class="pexample_sps2">SPC-2500S</p>
  442.           </div>
  443.         </div>
  444.       </div>    
  445.     </div>    
  446.   </div>
  447. </div>
  448. </body>
  449. {% endblock %}