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

Open in your IDE?
  1. {% block main %}
  3. <style>
  5. .box_main_a {
  6.   background-color: ;    
  7.   width: auto;
  8.   height: 100%;
  9.   margin-top: 10px;
  10.   margin-right: auto;
  11.   margin-left: auto;
  12.   border-radius: 6px;
  13.   {#position: relative;#}/*sliderに重ねる場合使用*/
  14.   {#z-index: 9999;#}/*sliderに重ねる場合使用*/
  15. }
  16. /*svg control*/
  17. .container_a {
  18.   background-color: ;    
  19.   width: 25vh;
  20.   height: auto;
  21.   margin-right: auto;
  22.   margin-left: auto;
  23.   z-index: 9999;
  24. }
  25. .box_b1 {
  26.   background-color: ;    
  27.   position: absolute;    
  28.   height: 1px;
  29.   justify-content: center;
  30.   align-items: center;
  31.   border-radius: 6px;
  32.   z-index: 999;
  34. }
  35. .box_b2 {
  36.   width: 100%;
  37.   height: auto;
  38.   border-radius: 6px;
  39.   border: solid 1px #fff;
  40.   cursor: pointer;
  41. }
  42. .box_b3 {
  43.   width: 100%;
  44.   height: auto;
  45.   margin-top: -24px;
  46.   padding-right: 10px;
  47.   border-radius: 6px;
  48.   color: #fff;
  49.   text-align: right;
  50.   font-weight: 700;
  51.   
  52. }
  53. </style>
  54. <head>
  55.     <meta charset="utf-8">
  56.     <meta name="keywords" content="ナカトミ、ナカトミショップ、エアーテック、AIRTEC">
  57.     <title>AIRTEC</title>
  58.     <meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
  59. </head>
  60. <body>
  61. <div class="ec-role">
  62.     <div class="box_main_a">{#/*sp pc height comtrol*/#}
  63.         <div class="box_b1">
  64.             <div class="container_a">{#/*svg control*/#}
  65.             <?xml version="1.0" encoding="utf-8"?>
  66.             <!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  67.             <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 270" style="enable-background:new 0 0 800 270;" xml:space="preserve">
  68.                 <style type="text/css">
  69.                     .st0{fill:#FFFFFF;}
  70.                     .st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2.4475;}
  71.                     .st2{fill:#002727;}
  72.                 </style>
  73.             <g id="wrap_all" data-name="SVG全体をグループ">
  74.                 <path class="st0" d="M29.85,177.67c0-52.67,38.05-88.7,104.08-88.7c23.44,0,39.06,4.28,55.94,7.06c0,16.38,0.5,32.26,1.76,47.63 l-8.57,0.5c-6.3-28.48-23.94-45.11-49.14-45.11c-36.29,0-64.26,34.02-64.26,77.11c0,44.35,30.49,77.62,65.52,77.62 c24.7,0,42.08-16.13,48.13-44.35l8.57,0.5c-1.01,15.88-1.01,31-0.76,46.87c-23.94,4.03-38.3,7.06-56.95,7.06 C63.11,263.86,29.85,226.56,29.85,177.67z"/>
  75.                 <path class="st0" d="M110.75,54.99c6.32,8.37,12.35,16.57,16.73,26.17c-5.53,0.28-8.29,0.53-13.71,1.26 c-1.17-1.86-1.77-2.78-3-4.63c-2.08,0.29-3.12,0.45-5.18,0.8c0.76,1.92,1.15,2.88,1.97,4.79c-5.4,0.94-8.06,1.53-13.2,2.93 c-5.33-8.03-10.03-17.52-13.06-26.67C90.91,57.44,100.94,55.88,110.75,54.99z M108.1,73.19c-2.27-2.86-5-6.41-8.3-10.61 c0.77,5.29,1.92,9.09,2.88,11.46C104.84,73.66,105.92,73.49,108.1,73.19z"/>
  76.                 <path class="st0" d="M147.33,54.01c-1.59,10.83-2.39,16.25-3.98,27.08c-5.42-0.23-8.15-0.23-13.57-0.03 c-1.4-10.84-2.1-16.26-3.51-27.1C134.69,53.65,138.92,53.66,147.33,54.01z"/>
  77.                 <path class="st0" d="M155.74,54.5c5.92,0.44,8.87,0.74,14.7,1.51c9.71,1.29,16.02,2.78,19.14,3.74c3.12,0.96,5.27,2.21,6.4,3.67 c1.13,1.46,0.64,3.23-1.32,5.29c-1.79,1.88-3.62,2.98-5.44,3.31c-1.82,0.33-4.53,0.11-8.24-0.54c3.02,1.04,4.78,2,5.39,2.8 c0.6,0.8,0.81,1.46,0.65,1.96c-0.16,0.5-1.17,1.73-3.03,3.68c-2.43,2.55-3.65,3.83-6.08,6.38c-4.62-1.26-7-1.8-11.83-2.69 c2.2-3.41,3.29-5.12,5.49-8.54c0.88-1.37,1.17-2.27,0.86-2.7c-0.32-0.42-1.6-0.84-3.86-1.2c-2.58,4.7-3.87,7.05-6.46,11.75 c-5.26-0.83-7.94-1.14-13.33-1.54C151.56,70.65,152.95,65.26,155.74,54.5z M173.98,61.34c-1.27,2.32-1.91,3.48-3.18,5.8 c1.97,0.31,3.41,0.45,4.32,0.38c0.92-0.07,1.75-0.66,2.47-1.79c0.36-0.56,0.54-0.85,0.91-1.41c0.52-0.81,0.46-1.42-0.2-1.83 C177.63,62.09,176.19,61.69,173.98,61.34z"/>
  78.                 <path class="st0" d="M251.75,84 273,51.55 268.53,44.84 281.11,36.17 314.11,83.44 301.25,91.55 279.43,58.27 255.66,92.11 252.03,89.59,252 84     "/>
  79.                  <path class="st0" d="M321.11,36.17 335.65,36.17 335.65,89.03 333.41,90.99 319.43,90.99 319.43,40.93,322 35     "/>
  80.                 <path class="st0" d="M405.01,36.17c1.12,0,34.12,0,34.12,0s12.59,6.99,21.26,6.71v3.08h-26.85v42.51h-10.63l-1.12-41.67h-16.78 V36.17z"/>
  81.                 <path class="st0" d="M467.93,36.73c0.84,0,33.28-0.56,33.28-0.56l-3.36,6.15l-17.9-0.56v43.91h20.42l4.48,5.59h-34.4 c0,0-5.59,0.56-5.31-6.15l-1.12-45.31L467.93,36.73z"/>
  82.                 <path class="st0" d="M542.61,36.17L546.8,44c0,0-13.98-4.75-22.93,7.27c-8.95,12.03,2.8,34.12,26.57,30.48l-8.39,10.35 c0,0-32.16,7.55-35.52-29.09c0,0-0.84-27.97,37.2-25.73"/>
  83.                 <path class="st0" d="M491.99,54.63 480.8,63.3 489.75,73.09 500.65,65.82,492 55    "/>
  84.             </g>
  85.             <g id="wrap_a" data-name="SVG全体をグループ">
  86.                 <path class="st1" d="M252 101 H415"/>
  87.             </g>
  88.             <g id="wrap_b" data-name="SVG全体をグループ">
  89.                 <path class="st1" d="M252 109 H550"/>
  90.             </g>
  91.             <g id="wrap_all" data-name="SVG全体をグループ">
  92.                 <path class="st0" d="M278.59,73.65 267.68,84.55 278.03,93.5 288.94,85.12,279 74     "/>
  93.                 <path class="st1" d="M354.39,36.17l31.88,0.28c24.61,17.06,1.12,29.93,1.12,29.93l17.06,15.1l-14.26,10.35 c0,0-15.94-20.7-18.74-23.21c-2.8-2.52-5.03,0.56-5.03,0.56l2.8,21.54h-15.38l-3.91-3.91V39.53 C351.59,35.61,354.39,36.17,354.39,36.17z M365.29,40.09l0.56,25.17c0,0,13.98,0.84,15.66-12.58 c1.68-13.43-17.06-11.47-17.06-11.47"/>
  94.                 <path class="st0" d="M201.95,255.51v-38.62h559.02c-132.23,3.83-264.32,11.42-396.28,22.74 C310.42,244.29,256.18,249.58,201.95,255.51z"/>
  95.                 <path class="st0" d="M185.02,183.28c0,6.55-0.25,11.19-0.76,13.92c-0.51,2.73-2.09,5.22-4.75,7.47c-2.66,2.26-6.25,3.99-10.78,5.2 c-4.53,1.21-9.8,1.81-15.82,1.81c-5.71,0-10.84-0.57-15.39-1.71s-8.21-2.85-10.98-5.14c-2.77-2.28-4.42-4.77-4.94-7.45 s-0.79-7.39-0.79-14.1v-11.16c0-6.55,0.25-11.19,0.76-13.92c0.5-2.73,2.09-5.22,4.75-7.47c2.66-2.26,6.25-3.99,10.78-5.2 c4.53-1.21,9.8-1.81,15.82-1.81c5.71,0,10.84,0.57,15.39,1.71c4.55,1.14,8.21,2.85,10.98,5.14c2.77,2.28,4.42,4.77,4.94,7.45 c0.53,2.69,0.79,7.39,0.79,14.1V183.28z M157.27,161.85c0-3.03-0.27-4.97-0.82-5.82c-0.55-0.85-1.68-1.27-3.39-1.27 c-1.45,0-2.56,0.34-3.33,1.03c-0.77,0.69-1.15,2.71-1.15,6.06v30.45c0,3.79,0.25,6.12,0.76,7.01c0.5,0.89,1.68,1.33,3.53,1.33 c1.89,0,3.1-0.51,3.63-1.53c0.53-1.02,0.79-3.45,0.79-7.29V161.85z"/>
  96.                  <path class="st0" d="M280.99,145.1v65.22h-24.26l-0.03-44.03l-9.66,44.03h-17.2l-10.18-43.02l-0.03,43.02h-24.26V145.1h35.91 c1.07,3.92,2.16,8.54,3.29,13.86l3.94,16.59l6.38-30.45H280.99z"/>
  97.                 <path class="st0" d="M292.13,145.1h27.95c7.56,0,13.37,0.36,17.44,1.09c4.06,0.73,7.12,1.77,9.16,3.14 c2.04,1.37,3.43,3.03,4.15,4.98c0.72,1.95,1.09,4.96,1.09,9.04v5.68c0,4.16-0.7,7.2-2.11,9.1c-1.41,1.91-3.99,3.37-7.75,4.39 c-3.76,1.02-8.67,1.53-14.73,1.53h-7.45v26.26h-27.75V145.1z M319.88,156.25v16.6c0.79,0.03,1.47,0.04,2.04,0.04 c2.55,0,4.32-0.38,5.31-1.15c0.99-0.77,1.48-2.36,1.48-4.77v-5.36c0-2.23-0.57-3.68-1.71-4.35 C325.86,156.59,323.49,156.25,319.88,156.25z"/>
  98.                  <path class="st0" d="M359.9,145.1h19.64c13.1,0,21.96,0.31,26.6,0.93c4.64,0.62,8.42,2.2,11.34,4.73 c2.92,2.54,4.38,6.59,4.38,12.15c0,5.08-1.03,8.49-3.1,10.23c-2.07,1.75-6.13,2.79-12.19,3.14c5.49,0.83,9.18,1.95,11.07,3.34 c1.89,1.4,3.07,2.68,3.53,3.85c0.46,1.17,0.69,4.38,0.69,9.65v17.2h-25.77v-21.67c0-3.49-0.45-5.65-1.35-6.49 c-0.9-0.83-3.26-1.25-7.09-1.25v29.41H359.9V145.1z M387.65,156.25v14.5c3.12,0,5.31-0.26,6.56-0.79c1.25-0.52,1.88-2.22,1.88-5.1 v-3.59c0-2.07-0.6-3.42-1.81-4.07C393.06,156.58,390.86,156.25,387.65,156.25z"/>
  99.                 <path class="st0" d="M432.6,145.1h46.27v13.05h-18.52v12.37h17.34v12.41h-17.34v14.34h20.37v13.05H432.6V145.1z"/>
  100.                 <path class="st0" d="M547.5,164.83h-25.77V160c0-2.26-0.33-3.69-0.99-4.31c-0.66-0.62-1.76-0.93-3.3-0.93 c-1.67,0-2.93,0.42-3.79,1.25c-0.86,0.83-1.29,2.1-1.29,3.79c0,2.18,0.48,3.82,1.44,4.92c0.92,1.1,3.53,2.43,7.84,3.99 c12.35,4.48,20.13,8.16,23.34,11.03c3.21,2.87,4.81,7.51,4.81,13.9c0,4.65-0.89,8.07-2.67,10.27c-1.78,2.2-5.22,4.05-10.32,5.54 c-5.1,1.49-11.03,2.24-17.8,2.24c-7.43,0-13.77-0.86-19.02-2.58c-5.25-1.72-8.69-3.91-10.32-6.57c-1.63-2.66-2.44-6.43-2.44-11.32 v-4.27h25.77v7.94c0,2.44,0.36,4.02,1.09,4.71c0.73,0.7,2.01,1.05,3.86,1.05s3.22-0.44,4.12-1.33c0.9-0.89,1.35-2.2,1.35-3.95 c0-3.84-0.86-6.35-2.57-7.53c-1.76-1.18-6.09-3.16-12.99-5.92c-6.9-2.79-11.47-4.82-13.71-6.08c-2.24-1.26-4.1-3.01-5.57-5.24 c-1.47-2.23-2.21-5.08-2.21-8.54c0-5,1.04-8.65,3.13-10.96c2.09-2.31,5.46-4.12,10.12-5.42c4.66-1.3,10.28-1.95,16.88-1.95 c7.21,0,13.35,0.71,18.42,2.14c5.08,1.42,8.44,3.22,10.09,5.38c1.65,2.16,2.47,5.83,2.47,11.02V164.83z"/>
  101.                 <path class="st0" d="M617.31,164.83h-25.77V160c0-2.26-0.33-3.69-0.99-4.31c-0.66-0.62-1.76-0.93-3.3-0.93 c-1.67,0-2.93,0.42-3.79,1.25c-0.86,0.83-1.29,2.1-1.29,3.79c0,2.18,0.48,3.82,1.44,4.92c0.92,1.1,3.53,2.43,7.84,3.99 c12.35,4.48,20.13,8.16,23.34,11.03c3.21,2.87,4.81,7.51,4.81,13.9c0,4.65-0.89,8.07-2.67,10.27c-1.78,2.2-5.22,4.05-10.32,5.54 c-5.1,1.49-11.03,2.24-17.8,2.24c-7.43,0-13.77-0.86-19.02-2.58c-5.25-1.72-8.69-3.91-10.32-6.57c-1.63-2.66-2.44-6.43-2.44-11.32 v-4.27h25.77v7.94c0,2.44,0.36,4.02,1.09,4.71c0.73,0.7,2.01,1.05,3.86,1.05s3.22-0.44,4.12-1.33c0.9-0.89,1.35-2.2,1.35-3.95 c0-3.84-0.86-6.35-2.57-7.53c-1.76-1.18-6.09-3.16-12.99-5.92c-6.9-2.79-11.47-4.82-13.71-6.08c-2.24-1.26-4.1-3.01-5.57-5.24 c-1.47-2.23-2.21-5.08-2.21-8.54c0-5,1.04-8.65,3.13-10.96c2.09-2.31,5.46-4.12,10.12-5.42c4.66-1.3,10.28-1.95,16.88-1.95 c7.21,0,13.35,0.71,18.42,2.14c5.08,1.42,8.44,3.22,10.09,5.38c1.65,2.16,2.47,5.83,2.47,11.02V164.83z"/>
  102.                 <path class="st0" d="M691.73,183.28c0,6.55-0.25,11.19-0.76,13.92c-0.51,2.73-2.09,5.22-4.75,7.47c-2.66,2.26-6.25,3.99-10.78,5.2 c-4.53,1.21-9.8,1.81-15.82,1.81c-5.71,0-10.84-0.57-15.39-1.71c-4.55-1.14-8.21-2.85-10.98-5.14c-2.77-2.28-4.42-4.77-4.94-7.45 s-0.79-7.39-0.79-14.1v-11.16c0-6.55,0.25-11.19,0.76-13.92c0.5-2.73,2.09-5.22,4.75-7.47c2.66-2.26,6.25-3.99,10.78-5.2 c4.53-1.21,9.8-1.81,15.82-1.81c5.71,0,10.84,0.57,15.39,1.71c4.55,1.14,8.21,2.85,10.98,5.14c2.77,2.28,4.42,4.77,4.94,7.45 c0.53,2.69,0.79,7.39,0.79,14.1V183.28z M663.98,161.85c0-3.03-0.27-4.97-0.82-5.82c-0.55-0.85-1.68-1.27-3.4-1.27 c-1.45,0-2.56,0.34-3.33,1.03c-0.77,0.69-1.15,2.71-1.15,6.06v30.45c0,3.79,0.25,6.12,0.76,7.01c0.5,0.89,1.68,1.33,3.53,1.33 c1.89,0,3.1-0.51,3.63-1.53c0.53-1.02,0.79-3.45,0.79-7.29V161.85z"/>
  103.                 <path class="st0" d="M702.08,145.1h19.64c13.1,0,21.96,0.31,26.6,0.93c4.64,0.62,8.42,2.2,11.34,4.73 c2.92,2.54,4.38,6.59,4.38,12.15c0,5.08-1.03,8.49-3.1,10.23c-2.07,1.75-6.13,2.79-12.19,3.14c5.49,0.83,9.18,1.95,11.07,3.34 c1.89,1.4,3.07,2.68,3.53,3.85c0.46,1.17,0.69,4.38,0.69,9.65v17.2h-25.77v-21.67c0-3.49-0.45-5.65-1.35-6.49 c-0.9-0.83-3.26-1.25-7.09-1.25v29.41h-27.75V145.1z M729.83,156.25v14.5c3.12,0,5.31-0.26,6.56-0.79c1.25-0.52,1.88-2.22,1.88-5.1 v-3.59c0-2.07-0.6-3.42-1.81-4.07C735.24,156.58,733.04,156.25,729.83,156.25z"/>
  104.             </g>
  105.                 <circle class="st2" cx="218.09" cy="233.56" r="5.08"/>
  106.                 <circle class="st2" cx="234.78" cy="233.56" r="5.08"/>
  107.             </svg>
  108.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1">
  109.                 <defs>
  110.                     <style>
  111.                         #wrap_all path {
  112.                         fill: #fff;
  113.                         stroke: #fff;
  114.                         stroke-width: 1px;
  115.                         animation: svg 8s ease-in both ;
  116.                         }
  117.                         #wrap_a path {
  118.                         fill: #fff;
  119.                         stroke: #fff;
  120.                         stroke-width: 7px;
  121.                         animation: svg 5s ease-in both ;
  122.                         }
  123.                         #wrap_b path {
  124.                         fill: #fff;
  125.                         stroke: #fff;
  126.                         stroke-width: 2px;
  127.                         animation: svg 5s ease-in both ;
  128.                         }
  129.                         @keyframes svg {
  130.                         0% {
  131.                         fill: transparent;
  132.                         stroke-dasharray: 3000px;
  133.                         stroke-dashoffset: 3000px;
  134.                         }
  135.                         20%{
  136.                         stroke-dashoffset: 0;
  137.                         }
  138.                         30%{
  139.                         fill: transparent;
  140.                         }
  141.                         50%{
  142.                         fill: #fff;
  143.                         }
  144.                         }
  145.                     </style>
  146.                 </defs>
  147.                 <g id="wrap_all" data-name="SVG全体をグループ">
  148.                  <!--  PATH 情報 省略 -->
  149.                 </g>
  150.             </svg>
  151.             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 116 116" style="">
  152.             <!-- cxはx軸の中心 cyはy軸の中心 rは半径 -->
  153.             </div>
  154.         </div>
  155.         <div class="box_b2">
  156.             <a href="{{ url('homepage') }}user_data/airtec">
  157.             <img src="{{ url('homepage') }}html/user_data/assets/img/AIRTEC/AIRTEC_shoptop_1080_300.png" style="border-radius:6px 6px 6px 6px;"></a>
  158.             <a href="{{ url('homepage') }}user_data/airtec">
  159.             <div class="box_b3">START! AIRTEC</div></a>
  160.         </div>    
  161.     </div>  
  162. </div>
  163. <script>
  164.     //javascript
  165.     window.innerHeight
  166. </script>
  167. </body>
  169. {% endblock %}