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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_spo {
  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_spo {
  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_spoa {
  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_spo1 {
  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_spo2 {
  57.       display: flex;
  58.       flex-wrap: wrap;
  59.       justify-content: space-around;
  60.       width: 100%;
  62.       margin-top: -20px;
  63.       margin-left: 3vw;
  64.       margin-right: 3vw;
  65. }
  66. .box_spo3 {
  67.       display: flex;
  68.       flex-wrap: wrap;
  69.       justify-content: space-around;
  70.       background-color: ;
  71.       width: calc(118% / 2 - 5px);
  72.       min-width: 320px;
  73.       height: auto;
  74.       z-index: 1;
  75.       margin-bottom: 6%;
  76. }
  77. .box_spo4 {
  78.       /*background: linear-gradient(176deg,#00cccc 5%, #ffffff 15%, #ffffff 80%, #00cccc);*/
  79.       border-radius: 8px;
  80.       width: 340px;
  81.       height: 340px;
  82.       z-index: 1;
  83.       /*border: solid 1px #dcdcdc;*/
  84.       margin-bottom: 10px;
  85.       margin-top: 40px;
  86. }
  87. .box_spo5 {
  88.       background-color: ;
  89.       width: calc(100% / 6 - 2px);
  90.       height: auto;
  91.       max-height: 180px;
  92.       z-index: 9;
  93.       margin-top: 10px;
  94. }
  95. .box_spo6 {
  96.       width: 100%;
  97. margin-bottom: 0px;
  98. }
  99. .box_spo7 {
  100.         width: 100%;
  101.         max-height: 300px;
  102.         border-radius: 6px;
  103.         margin: 0 auto;
  104.         position: absolute;
  105.         top: 0px;
  106.    }
  107. .pexample_spo {
  108.         font-size: 16px;
  109.         color: #ffffff;
  110.         font-weight: 500;
  111.         height: auto;
  112.         margin-left: px;
  113.         text-align: center;
  114.         margin-top: 10px;
  115.   }  
  116.   .pexample_spo2 {
  117.          font-size: 16px;
  118.         color: #000;
  119.         font-weight: 400;
  120.         height: auto;
  121.         margin-left: px;
  122.         text-align: center;
  123.         margin-top: 3px;
  124.   }   
  125. /*ビデオコントロール*/
  126.   video {
  127.     max-width: auto;
  128.     border-radius: 6px;
  129.      margin: 0 auto;
  130.     position: absolute;
  131.     top: 0px;
  132.    }
  133.   .slide-in8 {
  134.         margin-top: 2vw;
  135.         font-size: 26px;
  136.         font-weight: bold;
  137.         animation: slideIn 2s ease-out;
  138.         color: #ffffff;
  139.         z-index: 9999;
  140.         text-align: center;
  141.         font-weight: 600;
  142.         /*-webkit-text-stroke: 0.1px #fff; 
  143.         text-stroke: 0.1px #fff;*/
  144.         padding-left: 4%;
  145.         padding-right: 4%;
  146.   }
  147.   .slide-in9 {
  148.         font-size: 21px;
  149.         font-weight: bold;
  150.         animation: slideIn 2s ease-out;
  151.         color: #006666;
  152.         z-index: 9999;
  153.         text-align: center;
  154.         font-weight: 600;
  155.         margin-top: -2px;
  156.   }
  157.   
  158.         .slide-in5c {
  159.         background-color: #fff;
  160.         border-radius: 25px; 
  161.         border: solid 1px #006666;
  162.         font-size: 16px;
  163.         font-weight: bold;
  164.         animation: slideIn 2s ease-out;
  165.         color: #fff;
  166.         z-index: 9999;
  167.         text-align: center;
  168.         font-weight: 400;
  169.         margin-top: 10px;
  170.         margin-bottom: 10px;
  171.       }  
  172.   
  173.   @keyframes slideIn {
  174.     0% {
  175.     transform: translateX(-100%);
  176.     opacity: 0;
  177.     }
  178.     100% {
  179.     transform: translateX(0);
  180.     opacity: 1;
  181.     }
  182.   }
  183. .fadeslide {
  184.     position: relative;
  185.     width: 320px;
  186.     height: 320px;
  187.     overflow: hidden;
  188.     z-index: 0;
  189.   }
  190.   .fadeslide div {
  191.     position: absolute;
  192.     top: 0;
  193.     left: 0;
  194.   }
  195.   .fadeslide div:nth-of-type(1) {
  196.     animation: fadeslide 60s 0s infinite both;
  197.     z-index: 12;
  198.   }
  199.   .fadeslide div:nth-of-type(2) {
  200.     animation: fadeslide 60s 5s infinite both;
  201.     z-index: 11;
  202.   }
  203.   .fadeslide div:nth-of-type(3) {
  204.     animation: fadeslide 60s 10s infinite both;
  205.     z-index: 10;
  206.   }
  207.   .fadeslide div:nth-of-type(4) {
  208.     animation: fadeslide 60s 15s infinite both;
  209.     z-index: 9;
  210.   }
  211.   .fadeslide div:nth-of-type(5) {
  212.     animation: fadeslide 60s 20s infinite both;
  213.     z-index: 8;
  214.   }
  215.   .fadeslide div:nth-of-type(6) {
  216.     animation: fadeslide 60s 25s infinite both;
  217.     z-index: 7;
  218.   }
  219.   .fadeslide div:nth-of-type(7) {
  220.     animation: fadeslide 60s 30s infinite both;
  221.     z-index: 6;
  222.   }      
  223.   .fadeslide div:nth-of-type(8) {
  224.     animation: fadeslide 60s 35s infinite both;
  225.     z-index: 5;
  226.   }      
  227.   .fadeslide div:nth-of-type(9) {
  228.     animation: fadeslide 60s 40s infinite both;
  229.     z-index: 4;
  230.   }      
  231.   .fadeslide div:nth-of-type(10) {
  232.     animation: fadeslide 60s 45s infinite both;
  233.     z-index: 3;
  234.   }      
  235.   .fadeslide div:nth-of-type(11) {
  236.     animation: fadeslide 60s 50s infinite both;
  237.     z-index: 2;
  238.   } 
  239.   .fadeslide div:nth-of-type(12) {
  240.     animation: fadeslide 60s 55s infinite both;
  241.     z-index: 1;
  242.   }       
  243. @keyframes fade_slide {
  244.   0% { left: 0; opacity: 0; }
  245.   6% { left: 0; opacity: 1; }
  246.   12% { left: 0; opacity: 1; }
  247.   18% { left: 0; opacity: 0; }
  248.   19% { left: 100%; opacity: 0; }
  249.   100% { left: 100%; opacity: 0; }
  250. }
  253.     summary {
  254.       display: block;
  255.       list-style: none;
  256.       cursor: pointer;
  257.       color: #ffffff;
  258.      }
  259.     summary::-webkit-details-marker {
  260.       display:none;
  261.     }
  262.     
  263.      details {
  264.     margin: 0 auto;
  265.     margin-left: 0;
  267.      }
  268.     
  269.     .cp_navi01 ul {
  270.       width: 260px;/*メニューの幅*/
  271.       margin-left: 20px;
  272.       margin: 0 auto;
  273.       padding: 0;
  274.       list-style-type: none;
  275.       background-color: #eeeeee;
  276.       border-radius: 4px 4px 4px 4px;
  277.       position: absolute;
  278.     }
  279.     .cp_navi01 li a {
  280.       display: block;
  281.       padding: 6px 16px;
  282.       text-decoration: none;
  283.       color: #000000;
  284.       transition: all .3s;
  285.       text-align: left;
  286.     }
  287.     .cp_navi01 li {
  288.       text-align: center;
  289.     }
  290.     .cp_navi01 li:last-child {
  291.       border-bottom: none;
  292.     }
  293.     .cp_navi01 li a.active {
  294.       margin: 0 auto;
  295.       margin-top: px;
  296.       color: #210be2;
  297.       background-color: #7df57d;
  298.       border-radius: 4px 4px 0px 0px;
  299.       font-weight: 900;
  300.     }
  301.     .cp_navi01 li a:hover:not(.active) {
  302.       color: #ffffff;
  303.       background-color: #1b2538;
  304.       text-align: left;
  305.     }
  306.     .example_cp {
  307.       display: inline;
  308.       font-size: 4rem;
  309.       color: #ffffff;
  310.     }
  311. .fit-picture_o {
  312.   width: 160px;
  313.   opacity: 0.6;
  314. }
  315. .fit-picture_n {
  316.   width: 40px;
  317.   margin-top: -2px;
  318. }
  319. </style>
  320. <html>
  321. <head>
  322.     <meta charset="utf-8">
  323.     <meta name="keywords" content="ナカトミ スポットクーラー">
  324.     <title>ナカトミヒーター</title>
  325.     <meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  326. </head>
  327. <body>
  329. <div class="main_box_spo">
  330.   <div class="box_spo">
  331.     <div class="box_spo1">
  332.       <details>
  333.       <summary>
  334.         <p class="example_cp">≡</p>
  335.       </summary>  
  336.       <div class="cp_navi01">
  337.         <ul>
  338.           <li><a href="https://www.nakatomishop.com/products/list?category_id=17" class="active">工場扇（全閉式）OPFシリーズ</a></li>
  339.           <li><a href="https://www.nakatomishop.com/products/detail/1330">OPF-45SZ</a></li>
  340.           <li><a href="https://www.nakatomishop.com/products/detail/1327">OPF-45SAZ</a></li>
  341.           <li><a href="https://www.nakatomishop.com/products/detail/1331">OPF-45WZ</a></li>
  342.           <li><a href="https://www.nakatomishop.com/products/detail/1328">OPF-45WAZ</a></li>
  343.           <li><a href="https://www.nakatomishop.com/products/detail/1329">OPF-45FAZ</a></li>
  344.           <li><a href="https://www.nakatomishop.com/products/list?category_id=27"><font size="2rem">交換用羽根こちらから</font></a></li> 
  345.         </ul>
  346.       </div>
  347.       </details> 
  348.     </div>  
  349.     <div class="box_spoa">        
  350.       <div class="box_spo2">
  351.         <div class="box_spo3">
  352.           <div class="box_spo6">
  353.             <div class="slide-in8">チリやホコリ等が侵入しにくい全閉式モーター！工場等の油気、油煙の多い場所でも保守性・信頼性の高いモーターです。
  354.             </div>
  355.           </div>
  356.           <div class="box_spo5">
  357.             <p class="pexample_spo">
  358.             <a href="https://www.nakatomishop.com/products/detail/1330">
  359.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OPF-45SZ_150_200.png" width="100%" alt=""></a><p class="pexample_spo2">OPF-45SZ</p>
  360.           </div>
  361.           <div class="box_spo5">
  362.             <p class="pexample_spo">
  363.             <a href="https://www.nakatomishop.com/products/detail/1327">
  364.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OPF-45SAZ_150_200.png" width="100%" alt=""></a><p class="pexample_spo2">OPF-45SAZ</p>
  365.           </div>
  366.           <div class="box_spo5">
  367.             <p class="pexample_spo">
  368.             <a href="https://www.nakatomishop.com/products/detail/1331">
  369.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OPF-45WZ_150_200.png" width="100%" alt=""></a><p class="pexample_spo2">OPF-45WZ</p>
  370.           </div>
  371.           <div class="box_spo5">
  372.             <p class="pexample_spo">
  373.             <a href="https://www.nakatomishop.com/products/detail/1328">
  374.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OPF-45WAZ_150_200.png" width="100%" alt=""></a><p class="pexample_spo2">OPF-45WAZ</p>
  375.           </div>
  376.           <div class="box_spo5">
  377.             <p class="pexample_spo">
  378.             <a href="https://www.nakatomishop.com/products/detail/1329">
  379.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OPF-45FAZ_150_200.png" width="100%" alt=""></a><p class="pexample_spo2">
  380.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png">OPF-45FAZ</p>
  381.           </div>
  382.         </div>
  383.         <div class="box_spo4">
  384.           <div class="fadeslide">
  385.             <div>  
  386.               <a href="https://www.nakatomishop.com/products/detail/1327">
  387.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45SZ_SL2.png" width="320px" alt="スライドショー画像1"></a>
  388.             </div>
  389.             <div>   
  390.               <a href="https://www.nakatomishop.com/products/detail/1330">
  391.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45SAZ_SL2.png" width="320px" alt="スライドショー画像2"></a>
  392.             </div>
  393.             <div> 
  394.               <a href="https://www.nakatomishop.com/products/detail/1328">
  395.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45WZ_SL2.png" width="320px" alt="スライドショー画像3"></a>
  396.             </div>
  397.             <div> 
  398.               <a href="https://www.nakatomishop.com/products/detail/1331">
  399.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45WAZ_SL2.png" width="320px" alt="スライドショー画像4"></a>
  400.             </div>
  401.             <div> 
  402.               <a href="https://www.nakatomishop.com/products/detail/1329">
  403.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45FAZ_SL2.png" width="320px" alt="スライドショー画像5"></a>
  404.             </div>
  405.             <div>  
  406.               <a href="https://www.nakatomishop.com/products/list?category_id=27">
  407.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_FF_SL2.png" width="320px" alt="スライドショー画像6"></a>
  408.             </div>
  409.             <div>  
  410.               <a href="https://www.nakatomishop.com/products/detail/1327">
  411.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45SZ_SL2.png" width="320px" alt="スライドショー画像7"></a>
  412.             </div>
  413.             <div>   
  414.               <a href="https://www.nakatomishop.com/products/detail/1330">
  415.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45SAZ_SL2.png" width="320px" alt="スライドショー画像8"></a>
  416.             </div>
  417.             <div> 
  418.               <a href="https://www.nakatomishop.com/products/detail/1328">
  419.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45WZ_SL2.png" width="320px" alt="スライドショー画像9"></a>
  420.             </div>
  421.             <div> 
  422.               <a href="https://www.nakatomishop.com/products/detail/1331">
  423.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45WAZ_SL2.png" width="320px" alt="スライドショー画像10"></a>
  424.             </div>
  425.             <div> 
  426.               <a href="https://www.nakatomishop.com/products/detail/1329">
  427.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OPF-45FAZ_SL2.png" width="320px" alt="スライドショー画像11"></a>
  428.             </div>
  429.             <div>  
  430.               <a href="https://www.nakatomishop.com/products/list?category_id=27">
  431.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/OP_FF_SL2.png" width="320px" alt="スライドショー画像12"></a>
  432.             </div>
  433.           </div>
  434.           <script>
  435.             $(function(){
  436.               $(".slideshow-slide li").css({"position":"relative"});
  437.               $(".slideshow-slide li").hide().css({"position":"absolute"});
  438.               $(".slideshow-slide li:first").addClass("slide");
  439.               $(".slideshow-slide li:nth-child(2)").css({"display":"block"});
  440.               setInterval(function(){
  441.                 var $active = $(".slideshow-slide li.slide");
  442.                 var $next = $active.next("li").length?$active.next("li"):$(".slideshow-slide li:first");
  443.                 var $nextnext = $next.next("li");
  444.                 $active.fadeOut(0).removeClass("slide");
  445.                 $next.show().addClass("slide");
  446.                 $nextnext.css({"display":"block"});
  447.               },3000);
  448.             });
  449.           </script>
  450.         </div>  
  451.       </div>
  452.     </div>    
  453.   </div>    
  454. </div>    
  455. </body>
  456. {% endblock %}