app/template/default/Block/w_top_glossary_1.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/25winter/wi2025_top_reflect_h250.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: 8%;
  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-left: -5%;
  75.   margin-bottom: 6%;
  76. }
  77. .box_spr4 {
  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_spr5 {
  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_spr6 {
  96.   width: 100%;
  97.   margin-bottom: 0px;
  98. }
  99. .box_spr7 {
  100.   width: 100%;
  101.   max-height: 300px;
  102.   border-radius: 6px;
  103.   margin: 0 auto;
  104.   position: absolute;
  105.   top: 0px;
  106. }
  107. .pexample_spr {
  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_spr2 {
  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-in4 {
  134.   margin-top: 2vw;
  135.   font-size: 26px;
  136.   font-weight: bold;
  137.   animation: slideIn 2s ease-out;
  138.   color: #ff4500; 
  139.   z-index: 9999; 
  140.   text-align: center;
  141.   font-weight: 600;
  142.   /*-webkit-text-stroke: 0.2px #fff; 
  143.   text-stroke: 0.2px #fff;*/
  144.   padding-left: 4%;
  145.   padding-right: 4%;
  146. }
  147. .slide-in5 {
  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. .slide-in5a {
  158.   background-color: #fff;
  159.   border-radius: 25px; 
  160.   border: solid 1px #006666;
  161.   font-size: 16px;
  162.   font-weight: bold;
  163.   animation: slideIn 2s ease-out;
  164.   color: #fff;
  165.   z-index: 9999;
  166.   text-align: center;
  167.   font-weight: 400;
  168.   margin-top: 10px;
  169.   margin-bottom: 10px;
  170. }
  171. @keyframes slideIn {
  172.     0% {
  173.     transform: translateX(-100%);
  174.     opacity: 0;
  175.     }
  176.     100% {
  177.     transform: translateX(0);
  178.     opacity: 1;
  179.     }
  180.   }
  181. .fadeslide {
  182.     position: relative;
  183.     width: 320px;
  184.     height: 320px;
  185.     overflow: hidden;
  186.     z-index: 0;
  187.   }
  188.   .fadeslide div {
  189.     position: absolute;
  190.     top: 0;
  191.     left: 0;
  192.   }
  193.   .fadeslide div:nth-of-type(1) {
  194.     animation: fadeslide 60s 0s infinite both;
  195.     z-index: 12;
  196.   }
  197.   .fadeslide div:nth-of-type(2) {
  198.     animation: fadeslide 60s 5s infinite both;
  199.     z-index: 11;
  200.   }
  201.   .fadeslide div:nth-of-type(3) {
  202.     animation: fadeslide 60s 10s infinite both;
  203.     z-index: 10;
  204.   }
  205.   .fadeslide div:nth-of-type(4) {
  206.     animation: fadeslide 60s 15s infinite both;
  207.     z-index: 9;
  208.   }
  209.   .fadeslide div:nth-of-type(5) {
  210.     animation: fadeslide 60s 20s infinite both;
  211.     z-index: 8;
  212.   }
  213.   .fadeslide div:nth-of-type(6) {
  214.     animation: fadeslide 60s 25s infinite both;
  215.     z-index: 7;
  216.   }
  217.   .fadeslide div:nth-of-type(7) {
  218.     animation: fadeslide 60s 30s infinite both;
  219.     z-index: 6;
  220.   }      
  221.   .fadeslide div:nth-of-type(8) {
  222.     animation: fadeslide 60s 35s infinite both;
  223.     z-index: 5;
  224.   }      
  225.   .fadeslide div:nth-of-type(9) {
  226.     animation: fadeslide 60s 40s infinite both;
  227.     z-index: 4;
  228.   }      
  229.   .fadeslide div:nth-of-type(10) {
  230.     animation: fadeslide 60s 45s infinite both;
  231.     z-index: 3;
  232.   }      
  233.   .fadeslide div:nth-of-type(11) {
  234.     animation: fadeslide 60s 50s infinite both;
  235.     z-index: 2;
  236.   } 
  237.   .fadeslide div:nth-of-type(12) {
  238.     animation: fadeslide 60s 55s infinite both;
  239.     z-index: 1;
  240.   }        
  241. @keyframes fadeslide {
  242.   0% { left: 0; opacity: 0; }
  243.   3% { left: 0; opacity: 1; }
  244.   6% { left: 0; opacity: 1; }
  245.   9% { left: 0; opacity: 0; }
  246.   10% { left: 100%; opacity: 0; }
  247.   100% { left: 100%; opacity: 0; }
  248. }
  249. summary {
  250.   display: block;
  251.   list-style: none;
  252.   cursor: pointer;
  253.   color: #ffffff;
  254.  }
  255. summary::-webkit-details-marker {
  256.   display:none;
  257. }
  258.  details {
  259.   margin: 0 auto;
  260.   margin-left: 0;
  261. }
  262. .cp_navi03 ul {
  263.   width: 260px;/*メニューの幅*/
  264.   margin-left: 20px;
  265.   margin: 0 auto;
  266.   padding: 0;
  267.   list-style-type: none;
  268.   background-color: #eeeeee;
  269.   border-radius: 4px 4px 4px 4px;
  270.   position: absolute;
  271. }
  272. .cp_navi03 li a {
  273.   display: block;
  274.   padding: 6px 16px;
  275.   text-decoration: none;
  276.   color: #000000;
  277.   transition: all .3s;
  278.   text-align: left;
  279. }
  280. .cp_navi03 li {
  281.   text-align: center;
  282. }
  283. .cp_navi03 li:last-child {
  284.   border-bottom: none;
  285. }
  286. .cp_navi03 li a.active {
  287.   margin: 0 auto;
  288.   margin-top: px;
  289.   color: #fff;
  290.   background-color: #1b2538;
  291.   border-radius: 4px 4px 0px 0px;
  292.   font-weight: 900;
  293. }
  294. .cp_navi03 li a:hover:not(.active) {
  295.   color: #ffffff;
  296.   background-color: #1b2538;
  297.   text-align: left;
  298. }
  299. .example_cp {
  300.   display: inline;
  301.   font-size: 3rem;
  302.   color: #ffffff;
  303. }
  304. .fit-picture_o {
  305.   width: 160px;
  306.   opacity: 0.6;
  307. }
  308. .fit-picture_n {
  309.   width: 40px;
  310.   height: 16px;
  311.   margin-top: -4px;
  312.   padding-right: 4px;
  313. }
  314. </style>
  315. <html>
  316.   <head>
  317.     <meta charset="utf-8">
  318.       <meta name="keywords" content="ナカトミ スポットクーラー">
  319.       <title>ナカトミヒーター</title>
  320.     <meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  321.   </head>
  322. <body>
  323. <div class="main_box_spr">
  324.   <div class="box_spr">
  325.     <div class="box_spr1">
  326.     <details>
  327.       <summary>
  328.         <p class="example_cp">≡</p>
  329.       </summary>  
  330.       <div class="cp_navi03">
  331.         <ul>
  332.           <li><a href="https://www.nakatomishop.com/products/list?category_id=35" class="active">遠赤外線ヒーター</a></li>
  333.           <li><a href="https://www.nakatomishop.com/products/detail/1400">FIH-10RS(100V)</a></li>
  334.           <li><a href="https://www.nakatomishop.com/products/detail/1401">FIH-10RC(100V/天吊り)</a></li>
  335.           <li><a href="https://www.nakatomishop.com/products/detail/1402">FIH-15RS(単相200V)</a></li>
  336.           <li><a href="https://www.nakatomishop.com/products/detail/1403">FIH-15RC(単相200V/天吊り)</a></li>
  337.           <li><a href="https://www.nakatomishop.com/products/detail/245">IFH-20TP(三相200V)</a></li>
  338.           <li><a href="https://www.nakatomishop.com/products/detail/246">IFH-30TP(三相200V)</a></li>
  339.           <li><a href="https://www.nakatomishop.com/products/list?category_id=54"><font size="2rem">電源コード(オプション)はこちらから</font></a></li> 
  340.         </ul>
  341.       </div>
  342.       </details> 
  343.     </div>
  344.     <div class="box_spra">
  345.       <div class="box_spr2">
  346.         <div class="box_spr3">
  347.           <div class="box_spr6">
  348.             <div class="slide-in4">遠赤外線が体の芯から温める！
  349.             </div>
  350.           </div>
  351.           <div class="box_spr5">
  352.             <p class="pexample_spr">
  353.             <a href="https://www.nakatomishop.com/products/detail/1400">
  354.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-10RS_150_200.png" width="100%" alt=""></a>
  355.             <p class="pexample_spr2"><font color="red">NEW </font>FIH-10RS</p>
  356.             </p>
  357.           </div>
  358.           <div class="box_spr5">
  359.             <p class="pexample_spr">
  360.             <a href="https://www.nakatomishop.com/products/detail/1401">
  361.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-10RC_150_200.png" width="100%" alt=""></a>
  362.             <p class="pexample_spr2"><font color="red">NEW </font>FIH-10RC</p>
  363.             </p>
  364.           </div>
  365.           <div class="box_spr5">
  366.             <p class="pexample_spr">
  367.             <a href="https://www.nakatomishop.com/products/detail/1402">
  368.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-15RS_150_200.png" width="100%" alt=""></a>
  369.             <p class="pexample_spr2"><font color="red">NEW </font>FIH-15RS</p>
  370.             </p>
  371.           </div>
  372.           <div class="box_spr5">
  373.             <p class="pexample_spr">
  374.             <a href="https://www.nakatomishop.com/products/detail/1403">
  375.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-15RC_150_200.png" width="100%" alt=""></a>
  376.             <p class="pexample_spr2"><font color="red">NEW </font>FIH-15RC</p>
  377.             </p>
  378.           </div>
  379.           <div class="box_spr5">
  380.             <p class="pexample_spr">
  381.             <a href="https://www.nakatomishop.com/products/detail/245">
  382.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/IFH-20TP_150_200.png" width="100%" alt=""></a>
  383.             <p class="pexample_spr2">IFH-20TP</p>
  384.             </p>
  385.           </div>
  386.           <div class="box_spr5">
  387.             <p class="pexample_spr">
  388.             <a href="https://www.nakatomishop.com/products/detail/246">
  389.             <img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/IFH-30TP_150_200.png" width="100%" alt=""></a>
  390.             <p class="pexample_spr2">IFH-30TP</p>
  391.             </p>
  392.           </div>
  393.         </div>
  394.         <div class="box_spr4">
  395.           <div class="fadeslide">
  396.             <div>  
  397.               <a href="https://www.nakatomishop.com/products/detail/1400">
  398.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-10RS_POP_SL.png" width="320px" alt="スライドショー画像1"></a>
  399.             </div>
  400.             <div>   
  401.               <a href="https://www.nakatomishop.com/products/detail/1401">
  402.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-10RC_POP_SL.png" width="320px" alt="スライドショー画像2"></a>
  403.             </div>
  404.             <div> 
  405.               <a href="https://www.nakatomishop.com/products/detail/1402">
  406.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-15RS_POP_SL.png" width="320px" alt="スライドショー画像3"></a>
  407.             </div>
  408.             <div> 
  409.               <a href="https://www.nakatomishop.com/products/detail/1403">
  410.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-15RC_POP_SL" width="320px" alt="スライドショー画像4"></a>
  411.             </div>
  412.             <div> 
  413.               <a href="https://www.nakatomishop.com/products/detail/245">
  414.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/IFH-20TP_POP_SL" width="320px" alt="スライドショー画像5"></a>
  415.             </div>
  416.             <div> 
  417.               <a href="https://www.nakatomishop.com/products/detail/246">
  418.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/IFH-30TP_POP_SL" width="320px" alt="スライドショー画像6"></a>
  419.             </div>            
  420.             <div> 
  421.               <a href="https://www.nakatomishop.com/products/detail/1400">
  422.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-10RS_POP_SL" width="320px" alt="スライドショー画像7"></a>
  423.             </div>            
  424.             <div> 
  425.               <a href="https://www.nakatomishop.com/products/detail/1401">
  426.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-10RC_POP_SL" width="320px" alt="スライドショー画像8"></a>
  427.             </div>            
  428.             <div> 
  429.               <a href="https://www.nakatomishop.com/products/detail/1402">
  430.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-15RS_POP_SL" width="320px" alt="スライドショー画像9"></a>
  431.             </div>            
  432.             <div> 
  433.               <a href="https://www.nakatomishop.com/products/detail/1403">
  434.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/FIH-15RC_POP_SL" width="320px" alt="スライドショー画像10"></a>
  435.             </div>            
  436.             <div> 
  437.               <a href="https://www.nakatomishop.com/products/detail/245">
  438.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/IFH-20TP_POP_SL" width="320px" alt="スライドショー画像11"></a>
  439.             </div>    
  440.             <div> 
  441.               <a href="https://www.nakatomishop.com/products/detail/246">
  442.               <img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/IFH-30TP_POP_SL" width="320px" alt="スライドショー画像12"></a>
  443.             </div>                   
  444.           </div>
  445.           <script>
  446.             $(function(){
  447.               $(".slideshow-slide li").css({"position":"relative"});
  448.               $(".slideshow-slide li").hide().css({"position":"absolute"});
  449.               $(".slideshow-slide li:first").addClass("slide");
  450.               $(".slideshow-slide li:nth-child(2)").css({"display":"block"});
  451.               setInterval(function(){
  452.                 var $active = $(".slideshow-slide li.slide");
  453.                 var $next = $active.next("li").length?$active.next("li"):$(".slideshow-slide li:first");
  454.                 var $nextnext = $next.next("li");
  455.                 $active.fadeOut(0).removeClass("slide");
  456.                 $next.show().addClass("slide");
  457.                 $nextnext.css({"display":"block"});
  458.               },3000);
  459.             });
  460.           </script>
  461.         </div>
  462.       </div>
  463.     </div>    
  464.   </div>    
  465. </div>
  466.     </body>
  467. {% endblock %}