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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .main_box_spd {
  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_spd {
  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_spda {
  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_spd1 {
  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_spd2 {
  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_spd3 {
  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-left: -5%;
  75.       margin-bottom: 6%;
  76. }
  77. .box_spd4 {
  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: 20px;
  86. }
  87. .box_spd5 {
  88.       background-color: ;
  89.       width: calc(98% / 6 - 15px);
  90.       height: auto;
  91.       max-height: 160px;
  92.       z-index: 9;
  93.       margin-top: 10px;
  94. }
  95. .box_spd6 {
  96.       width: 100%;
  97. margin-bottom: 0px;
  98. }
  99. .box_spd7 {
  100.         width: 100%;
  101.         max-height: 300px;
  102.         border-radius: 6px;
  103.         margin: 0 auto;
  104.         position: absolute;
  105.         top: 0px;
  107.    }
  108. .pexample_spd {
  109.         font-size: 16px;
  110.         color: #ffffff;
  111.         font-weight: 500;
  112.         height: auto;
  113.         margin-left: px;
  114.         text-align: center;
  115.         margin-top: 10px;
  116.   }  
  117.   .pexample_spd2 {
  118.         font-size: 16px;
  119.         color: #000;
  120.         font-weight: 400;
  121.         height: auto;
  122.         margin-left: px;
  123.         text-align: center;
  124.         margin-top: 3px;
  125.   }   
  126. /*ビデオコントロール*/
  127.   video {
  128.     max-width: auto;
  129.     border-radius: 6px;
  130.      margin: 0 auto;
  131.     position: absolute;
  132.     top: 0px;
  133.    }
  134.   .slide-in10 {
  135.        margin-top: 2vw;
  136.         font-size: 26px;
  137.         font-weight: bold;
  138.         animation: slideIn 2s ease-out;
  139.         color: blue;
  140.         z-index: 9999;
  141.         text-align: center;
  142.         font-weight: 600;
  143.         /*-webkit-text-stroke: 0.1px #fff; 
  144.         text-stroke: 0.1px #fff;*/
  145.         padding-left: 4%;
  146.         padding-right: 4%;
  147.   }
  148.   .slide-in11 {
  149.         font-size: 21px;
  150.         font-weight: bold;
  151.         animation: slideIn 2s ease-out;
  152.         color: #006666;
  153.         z-index: 9999;
  154.         text-align: center;
  155.         font-weight: 600;
  156.         margin-top: -2px;
  157.   }
  158.       .slide-in5b {
  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.   .fadeslide {
  174.     position: relative;
  175.     width: 320px;
  176.     height: 320px;
  177.     overflow: hidden;
  178.     z-index: 0;
  179.   }
  180.   .fadeslide div {
  181.     position: absolute;
  182.     top: 0;
  183.     left: 0;
  184.   }
  185.   @keyframes slideIn {
  186.     0% {
  187.     transform: translateX(-100%);
  188.     opacity: 0;
  189.     }
  190.     100% {
  191.     transform: translateX(0);
  192.     opacity: 1;
  193.     }
  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. }
  254.     summary {
  255.       display: block;
  256.       list-style: none;
  257.       cursor: pointer;
  258.       color: #ffffff;
  259.      }
  260.     summary::-webkit-details-marker {
  261.       display:none;
  262.     }
  263.     
  264.      details {
  265.     margin: 0 auto;
  266.     margin-left: 0;
  268.      }
  269.     
  270. .cp_navi01 ul {
  271.   width: 260px;/*メニューの幅*/
  272.   margin-left: 20px;
  273.   margin: 0 auto;
  274.   padding: 0;
  275.   list-style-type: none;
  276.   background-color: #eeeeee;
  277.   border-radius: 4px 4px 4px 4px;
  278.   position: absolute;
  279. }
  280. .cp_navi01 li a {
  281.   display: block;
  282.   padding: 6px 16px;
  283.   text-decoration: none;
  284.   color: #000000;
  285.   transition: all .3s;
  286.   text-align: left;
  287. }
  288. .cp_navi01 li {
  289.   text-align: center;
  290. }
  291. .cp_navi01 li:last-child {
  292.   border-bottom: none;
  293. }
  294. .cp_navi01 li a.active {
  295.   margin: 0 auto;
  296.   margin-top: px;
  297.   color: #fff;
  298.   background-color: #1b2538;
  299.   border-radius: 4px 4px 0px 0px;
  300.   font-weight: 900;
  301. }
  302. .cp_navi01 li a:hover:not(.active) {
  303.   color: #ffffff;
  304.   background-color: #1b2538;
  305.   text-align: left;
  306. }
  307.     .example_cp {
  308.       display: inline;
  309.       font-size: 4rem;
  310.       color: #ffffff;
  311.     }
  312. .fit-picture_o {
  313.   width: 160px;
  314.   opacity: 0.6;
  315. }
  316. .fit-picture_n {
  317.   width: 40px;
  318.   height: 16px;
  319.   margin-top: -4px;
  320.   padding-right: 4px;
  321. }
  322. </style>
  323. <html>
  324. <head>
  325.     <meta charset="utf-8">
  326.     <meta name="keywords" content="ナカトミ 除湿器">
  327.     <title>ナカトミヒーター</title>
  328.     <meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  329. </head>
  330. <body>
  331. <div class="main_box_spd">
  332.   <div class="box_spd">
  333.     <div class="box_spd1">
  334.     <details>
  335.       <summary>
  336.         <p class="example_cp">≡</p>
  337.       </summary>  
  338.       <div class="cp_navi01">
  339.         <ul>
  340.           <li><a href="https://www.nakatomishop.com/products/list?category_id=36" class="active">除湿機　コンプレッサー式　</a></li>
  341.           <li><a href="https://www.nakatomishop.com/products/detail/1372">TFDM-25(天吊り/床置き式)</a></li>
  342.           <li><a href="https://www.nakatomishop.com/products/detail/106">DM-10(湿度制御付き)</a></li>
  343.           <li><a href="https://www.nakatomishop.com/products/detail/108">DM-15</a></li>
  344.           <li><a href="https://www.nakatomishop.com/products/detail/668">DM-15C(湿度制御付き)</a></li> 
  345.           <li><a href="https://www.nakatomishop.com/products/detail/667">DM-22</a></li>
  346.           <li><a href="https://www.nakatomishop.com/products/detail/109">DM-30(三相200V)</a></li>
  347.         </ul>
  348.       </div>
  349.     </details> 
  350.     </div>
  351.     <div class="box_spda">
  352.       <div class="box_spd2">
  353.         <div class="box_spd4">
  354.           <div class="fadeslide">
  355.             <div>  
  356.               <a href="https://www.nakatomishop.com/products/detail/1372">
  357.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/TFDM-25_SL2.png" width="320px" alt="スライドショー画像1"></a>
  358.             </div>
  359.             <div>   
  360.               <a href="https://www.nakatomishop.com/products/detail/106">
  361.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-10_SL2.png" width="320px" alt="スライドショー画像2"></a>
  362.             </div>
  363.             <div> 
  364.               <a href="https://www.nakatomishop.com/products/detail/108">
  365.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-15_SL2.png" width="320px" alt="スライドショー画像3"></a>
  366.             </div>
  367.             <div> 
  368.               <a href="https://www.nakatomishop.com/products/detail/668">
  369.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-15C_SL2.png" width="320px" alt="スライドショー画像4"></a>
  370.             </div>
  371.             <div> 
  372.               <a href="https://www.nakatomishop.com/products/detail/667">
  373.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-22_SL2.png" width="320px" alt="スライドショー画像5"></a>
  374.             </div>
  375.             <div> 
  376.               <a href="https://www.nakatomishop.com/products/detail/109">
  377.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-30_SL2.png" width="320px" alt="スライドショー画像6"></a>
  378.             </div>
  379.                         <div>  
  380.               <a href="https://www.nakatomishop.com/products/detail/1372">
  381.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/TFDM-25_SL2.png" width="320px" alt="スライドショー画像7"></a>
  382.             </div>
  383.             <div>   
  384.               <a href="https://www.nakatomishop.com/products/detail/106">
  385.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-10_SL2.png" width="320px" alt="スライドショー画像8"></a>
  386.             </div>
  387.             <div> 
  388.               <a href="https://www.nakatomishop.com/products/detail/108">
  389.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-15_SL2.png" width="320px" alt="スライドショー画像9"></a>
  390.             </div>
  391.             <div> 
  392.               <a href="https://www.nakatomishop.com/products/detail/668">
  393.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-15C_SL2.png" width="320px" alt="スライドショー画像10"></a>
  394.             </div>
  395.             <div> 
  396.               <a href="https://www.nakatomishop.com/products/detail/667">
  397.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-22_SL2.png" width="320px" alt="スライドショー画像11"></a>
  398.             </div>
  399.             <div> 
  400.               <a href="https://www.nakatomishop.com/products/detail/106">
  401.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25slider/DM-30_SL2.png" width="320px" alt="スライドショー画像12"></a>
  402.             </div>
  403.           </div>
  404.           <script>
  405.             $(function(){
  406.               $(".slideshow-slide li").css({"position":"relative"});
  407.               $(".slideshow-slide li").hide().css({"position":"absolute"});
  408.               $(".slideshow-slide li:first").addClass("slide");
  409.               $(".slideshow-slide li:nth-child(2)").css({"display":"block"});
  410.               setInterval(function(){
  411.                 var $active = $(".slideshow-slide li.slide");
  412.                 var $next = $active.next("li").length?$active.next("li"):$(".slideshow-slide li:first");
  413.                 var $nextnext = $next.next("li");
  414.                 $active.fadeOut(0).removeClass("slide");
  415.                 $next.show().addClass("slide");
  416.                 $nextnext.css({"display":"block"});
  417.               },3000);
  418.             });
  419.           </script>
  420.         </div>  
  421.         <div class="box_spd3">
  422.           <div class="box_spd6">
  423.             <div class="slide-in10">コンプレッサー式除湿器/パワフル除湿でカラッと爽快！
  424.             </div>
  425.         </div>
  426.         　<div class="box_spd5">
  427.             <p class="pexample_spd">
  428.             <a href="https://www.nakatomishop.com/products/detail/1372">
  429.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/TFDM-25_150_200.png" width="100%" alt=""></a><p class="pexample_spd2">
  430.                 <img class="fit-picture_n" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/nyuukamachi.png"><font color="red">NEW </font>TFDM-25</p>
  431.           </div>
  432.           <div class="box_spd5">
  433.             <p class="pexample_spd">
  434.             <a href="https://www.nakatomishop.com/products/detail/106">
  435.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DM-10_150_200.png" width="100%" alt=""></a><p class="pexample_spd2">DM-10</p>
  436.           </div>
  437.           <div class="box_spd5">
  438.             <p class="pexample_spd">
  439.             <a href="https://www.nakatomishop.com/products/detail/108">
  440.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DM-15_150_200.png" width="100%" alt=""></a><p class="pexample_spd2">DM-15</p>
  441.           </div>
  442.           <div class="box_spd5">
  443.             <p class="pexample_spd">
  444.             <a href="https://www.nakatomishop.com/products/detail/668">
  445.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DM-15C_150_200.png" width="100%" alt=""></a><p class="pexample_spd2">DM-15C</p>
  446.           </div>
  447.           <div class="box_spd5">
  448.             <p class="pexample_spd">
  449.             <a href="https://www.nakatomishop.com/products/detail/667">
  450.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer//DM-22_150_200.png" width="100%" alt=""></a><p class="pexample_spd2">DM-22</p>
  451.           </div>
  452.           <div class="box_spd5">
  453.             <p class="pexample_spd">
  454.             <a href="https://www.nakatomishop.com/products/detail/109">
  455.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/DM-30_150_200.png" width="100%" alt=""></a><p class="pexample_spd2">DM-30</p>
  456.           </div>
  457.         </div>
  458.       </div>
  459.     </div>    
  460.   </div>
  461. </div> 
  462. </body>
  463. {% endblock %}