app/template/bynoiezam/Block/new_item.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  12. {% block javascript %}
  13.     <script>
  14.         {% set arrowLeft = asset('assets/icon/slick-arrow-left-white.svg') %}
  15.         {% set arrowRight = asset('assets/icon/slick-arrow-right-white.svg') %}
  16.         $(function() {
  17.             $('.ec-newItemRole__list').slick({
  18.                 slidesToShow: 4,
  19.                 dots: false,
  20.                 arrows: true,
  21.                 autoplay: false,
  22.                 speed: 300,
  23.                 infinite: false,
  24.                 appendArrows: $('.item-arrows'),
  25.                 prevArrow: '<button type="button" class="btn"><img src="{{ arrowLeft }}" alt=""></button>',
  26.                 nextArrow: '<button type="button" class="btn btn-juliet"><img src="{{ arrowRight }}" alt=""></button>',
  27.                 responsive: [{
  28.                     breakpoint: 768,
  29.                     settings: {
  30.                       slidesToShow: 2
  31.                     }
  32.                 }]
  33.             });
  34.             $('.ec-campaignRole__List').slick({
  35.                 slidesToShow: 4,
  36.                 dots: false,
  37.                 arrows: true,
  38.                 autoplay: false,
  39.                 speed: 300,
  40.                 infinite: false,
  41.                 appendArrows: $('.campaign-arrows'),
  42.                 prevArrow: '<button type="button" class="btn"><img src="{{ arrowLeft }}" alt=""></button>',
  43.                 nextArrow: '<button type="button" class="btn btn-juliet"><img src="{{ arrowRight }}" alt=""></button>',
  44.                 responsive: [{
  45.                     breakpoint: 768,
  46.                     settings: {
  47.                       slidesToShow: 2
  48.                     }
  49.                 }]
  50.             });
  51.             $('.ec-rankingRole__List').slick({
  52.                 slidesToShow: 4,
  53.                 dots: false,
  54.                 arrows: true,
  55.                 autoplay: false,
  56.                 speed: 300,
  57.                 infinite: false,
  58.                 appendArrows: $('.ranking-arrows'),
  59.                 prevArrow: '<button type="button" class="btn"><img src="{{ arrowLeft }}" alt=""></button>',
  60.                 nextArrow: '<button type="button" class="btn btn-juliet"><img src="{{ arrowRight }}" alt=""></button>',
  61.                 responsive: [{
  62.                     breakpoint: 768,
  63.                     settings: {
  64.                       slidesToShow: 2
  65.                     }
  66.                 }]
  67.             });
  68.             $(".ec-headerCategoryAreaSp__heading").on("click", function() {
  69.                 $(this).next().slideToggle();
  70.                 if($(this).hasClass('active')) {
  71.                     $(this).find('img').attr('src','{{ asset("assets/icon/side-arrow-right-gray.svg") }}');
  72.                     $(this).removeClass('active');
  73.                 } else {
  74.                     $(this).find('img').attr('src','{{ asset("assets/icon/side-arrow-down-gray.svg") }}');
  75.                     $(this).addClass('active');
  76.                 }
  77.             });
  78.             $(".ec-headerCategoryAreaSp .ec-itemNav__nav a").on("click", function() {
  79.                 if($(this).hasClass('active')) {
  80.                     $(this).find('img').attr('src','{{ asset("assets/icon/side-arrow-right-gray.svg") }}');
  81.                     $(this).removeClass('active');
  82.                 } else {
  83.                     $(this).css({
  84.                         'border':'none'
  85.                     });
  86.                     $(this).find('img').attr('src','{{ asset("assets/icon/side-arrow-down-gray.svg") }}');
  87.                     $(this).addClass('active');
  88.                 }
  89.             });
  90.         });
  91.     </script>
  92. {% endblock javascript %}
  93. {# 2カラムレイアウト: 抽選バナー画像 + ゲーミングPC見積もりシミュレーター #}
  94. <!-- ▼バナー -->
  95. <div class="ec-role">
  96.     <div class="ec-banner ec-banner--two-column">
  97.         <!-- 左バナー: 毎月抽選 -->
  98. <div class="ec-banner__item ec-banner__item--lottery">
  99.     <a href="https://noiezam.com/nzcustomplugin/supergamingpc" class="lottery-banner-link">
  100.         <div class="lottery-banner-stylish">
  101.             <!-- 背景装飾 -->
  102.             <div class="lottery-banner-bg">
  103.                 <div class="lottery-circle lottery-circle1"></div>
  104.                 <div class="lottery-circle lottery-circle2"></div>
  105.                 <div class="lottery-circle lottery-circle3"></div>
  106.             </div>
  107.             
  108.             <!-- 光のライン -->
  109.             <div class="lottery-light-lines">
  110.                 <div class="light-line line1"></div>
  111.                 <div class="light-line line2"></div>
  112.                 <div class="light-line line3"></div>
  113.             </div>
  114.             
  115.             <!-- コンテンツ -->
  116.             <div class="lottery-content">
  117.                 <div class="lottery-badge">
  118.                     <span class="badge-icon">🎯</span>
  119.                     <span class="badge-text">毎月抽選</span>
  120.                 </div>
  121.                 <h2 class="lottery-main-title">
  122.                     赤字覚悟の<br>ゲーミングPC
  123.                 </h2>
  124.                 <div class="lottery-tags">
  125.                     <div class="lottery-tag tag-limited">
  126.                         <span class="tag-icon">⚡</span>
  127.                         台数限定
  128.                     </div>
  129.                     <div class="lottery-tag tag-entry">
  130.                         <span class="tag-icon">👉</span>
  131.                         今すぐエントリー
  132.                     </div>
  133.                 </div>
  134.             </div>
  135.         </div>
  136.     </a>
  137. </div>
  138.         
  139.         <!-- 右バナー: 見積もりシミュレーター -->
  140.         <div class="ec-banner__item ec-banner__item--simulator">
  141.             <a href="https://noiezam.com/estimate/simulator" class="simulator-banner-link">
  142.                 <div class="simulator-banner-compact">
  143.                     <div class="simulator-banner-compact__bg">
  144.                         <div class="circle circle1"></div>
  145.                         <div class="circle circle2"></div>
  146.                     </div>
  147.                     <div class="simulator-banner-compact__content">
  148.                         <h2 class="simulator-banner-compact__title">ゲーミングPC見積もりシミュレーター</h2>
  149.                         <p class="simulator-banner-compact__subtitle">パーツを選んで簡単見積</p>
  150.                         <div class="simulator-banner-compact__icons">
  151.                             <span class="icon">🎮</span>
  152.                             <span class="icon">⚡</span>
  153.                             <span class="icon">💰</span>
  154.                             <span class="icon">✨</span>
  155.                         </div>
  156.                         <div class="simulator-banner-compact__cta">今すぐ始める!</div>
  157.                     </div>
  158.                 </div>
  159.             </a>
  160.         </div>
  161.     </div>
  162. </div>
  163. <!-- ▲バナー -->
  165. <style>
  166. /* ========================================
  167.    画像の超強力鮮明化設定（800px画像用に最適化）
  168. ======================================== */
  170. /* 基本の画像鮮明化 - すべてのコンテンツ画像に適用 */
  171. .ec-contentRole__listItem img {
  172.     /* 最高品質のレンダリング */
  173.     image-rendering: -webkit-optimize-contrast;
  174.     image-rendering: -moz-crisp-edges;
  175.     image-rendering: crisp-edges;
  176.     image-rendering: high-quality;
  177.     
  178.     /* ブラウザのスムージングを無効化 */
  179.     -ms-interpolation-mode: nearest-neighbor;
  180.     
  181.     /* GPU アクセラレーションで鮮明化 */
  182.     backface-visibility: hidden;
  183.     -webkit-backface-visibility: hidden;
  184.     transform: translateZ(0) scale(1.0);
  185.     -webkit-transform: translateZ(0) scale(1.0);
  186.     transform-style: preserve-3d;
  187.     -webkit-transform-style: preserve-3d;
  188.     
  189.     /* アンチエイリアシング最適化 */
  190.     -webkit-font-smoothing: subpixel-antialiased;
  191.     -moz-osx-font-smoothing: grayscale;
  192.     
  193.     /* シャープネス強化フィルター */
  194.     filter: contrast(1.08) saturate(1.05) brightness(1.01);
  195.     -webkit-filter: contrast(1.08) saturate(1.05) brightness(1.01);
  196.     
  197.     /* 最大幅の確保 */
  198.     width: 100%;
  199.     height: auto;
  200.     display: block;
  201.     
  202.     /* サブピクセルレンダリング */
  203.     -webkit-perspective: 1000;
  204.     perspective: 1000;
  205. }
  207. /* Slickスライダー専用の超強力鮮明化 */
  208. .ec-rankingRole__List .ec-contentRole__listItem img,
  209. .ec-newItemRole__list .ec-contentRole__listItem img,
  210. .ec-campaignRole__List .ec-contentRole__listItem img {
  211.     /* さらに強力なシャープネス */
  212.     filter: contrast(1.1) saturate(1.08) brightness(1.02) unsharp-mask(1.5);
  213.     -webkit-filter: contrast(1.1) saturate(1.08) brightness(1.02);
  214.     
  215.     /* 縮小時の最高品質アルゴリズム */
  216.     image-rendering: -webkit-optimize-contrast;
  217.     image-rendering: high-quality;
  218.     
  219.     /* 完全なGPUアクセラレーション */
  220.     will-change: transform;
  221.     transform: translate3d(0, 0, 0) scale(1.0);
  222.     -webkit-transform: translate3d(0, 0, 0) scale(1.0);
  223. }
  225. /* Slickスライド内の画像（アクティブスライド） */
  226. .slick-slide img {
  227.     image-rendering: -webkit-optimize-contrast;
  228.     image-rendering: crisp-edges;
  229.     backface-visibility: hidden;
  230.     transform: translateZ(0);
  231.     filter: contrast(1.08) saturate(1.05);
  232. }
  234. /* アクティブなスライドの画像をさらに鮮明に */
  235. .slick-active img {
  236.     filter: contrast(1.1) saturate(1.08) brightness(1.02);
  237.     image-rendering: high-quality;
  238. }
  240. /* Slickクローンの画像も同様に処理 */
  241. .slick-cloned img {
  242.     image-rendering: -webkit-optimize-contrast;
  243.     backface-visibility: hidden;
  244.     transform: translateZ(0);
  245. }
  247. /* リンク要素内の画像（ホバー時も鮮明に） */
  248. .ec-contentRole__listItem a img {
  249.     transition: transform 0.3s ease, filter 0.3s ease;
  250. }
  252. .ec-contentRole__listItem a:hover img {
  253.     /* ホバー時はさらに鮮明に */
  254.     filter: contrast(1.12) saturate(1.1) brightness(1.03);
  255.     transform: translateZ(0) scale(1.02);
  256. }
  258. /* 高解像度ディスプレイ用の追加設定 */
  259. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  260.     .ec-contentRole__listItem img {
  261.         /* Retinaディスプレイでさらに鮮明化 */
  262.         filter: contrast(1.12) saturate(1.1) brightness(1.02);
  263.         image-rendering: -webkit-optimize-contrast;
  264.     }
  265. }
  267. /* WebKit/Blink専用の最適化 */
  268. @supports (-webkit-appearance: none) {
  269.     .ec-contentRole__listItem img {
  270.         -webkit-backface-visibility: hidden;
  271.         -webkit-transform: translateZ(0) scale(1.0);
  272.         -webkit-font-smoothing: subpixel-antialiased;
  273.     }
  274. }
  276. /* Firefox専用の最適化 */
  277. @-moz-document url-prefix() {
  278.     .ec-contentRole__listItem img {
  279.         image-rendering: -moz-crisp-edges;
  280.         image-rendering: crisp-edges;
  281.     }
  282. }
  284. /* 画像読み込み完了後の鮮明化 */
  285. .ec-contentRole__listItem img[src] {
  286.     opacity: 1;
  287.     animation: sharpen 0.3s ease-in;
  288. }
  290. @keyframes sharpen {
  291.     0% {
  292.         filter: blur(0.5px);
  293.     }
  294.     100% {
  295.         filter: contrast(1.08) saturate(1.05) brightness(1.01);
  296.     }
  297. }
  299. /* ========================================
  300.    共通レイアウト
  301. ======================================== */
  302. .ec-banner--two-column {
  303.     display: flex;
  304.     gap: 20px;
  305.     justify-content: center;
  306.     align-items: stretch;
  307.     flex-wrap: wrap;
  308. }
  310. .ec-banner__item {
  311.     flex: 1;
  312.     min-width: 320px;
  313.     max-width: 600px;
  314. }
  316. /* ========================================
  317.    左バナー: モダンな抽選バナー
  318. ======================================== */
  319. .lottery-banner-link {
  320.     display: block;
  321.     text-decoration: none;
  322.     height: 100%;
  323. }
  325. .lottery-banner-stylish {
  326.     background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #0a0a0a 100%);
  327.     border-radius: 15px;
  328.     padding: 25px 30px;
  329.     height: 256px;
  330.     display: flex;
  331.     align-items: center;
  332.     box-shadow: 0 10px 35px rgba(0,0,0,0.5);
  333.     position: relative;
  334.     overflow: hidden;
  335.     transition: transform 0.3s ease, box-shadow 0.3s ease;
  336. }
  338. .lottery-banner-stylish:hover {
  339.     transform: translateY(-5px);
  340.     box-shadow: 0 15px 45px rgba(255,0,100,0.4);
  341. }
  343. /* 背景装飾 */
  344. .lottery-banner-bg {
  345.     position: absolute;
  346.     width: 100%;
  347.     height: 100%;
  348.     top: 0;
  349.     left: 0;
  350.     z-index: 1;
  351. }
  353. .lottery-circle {
  354.     position: absolute;
  355.     border-radius: 50%;
  356.     opacity: 0.15;
  357. }
  359. .lottery-circle1 {
  360.     width: 200px;
  361.     height: 200px;
  362.     background: radial-gradient(circle, rgba(255,0,100,0.2) 0%, transparent 70%);
  363.     top: -80px;
  364.     right: -50px;
  365.     animation: float-lottery 8s ease-in-out infinite;
  366. }
  368. .lottery-circle2 {
  369.     width: 150px;
  370.     height: 150px;
  371.     background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  372.     bottom: -60px;
  373.     left: -40px;
  374.     animation: float-lottery 10s ease-in-out infinite reverse;
  375. }
  377. .lottery-circle3 {
  378.     width: 120px;
  379.     height: 120px;
  380.     background: radial-gradient(circle, rgba(255,0,100,0.15) 0%, transparent 70%);
  381.     top: 50%;
  382.     left: 30%;
  383.     animation: pulse-lottery 6s ease-in-out infinite;
  384. }
  386. @keyframes float-lottery {
  387.     0%, 100% { transform: translate(0, 0) scale(1); }
  388.     50% { transform: translate(20px, -20px) scale(1.1); }
  389. }
  391. @keyframes pulse-lottery {
  392.     0%, 100% { transform: scale(1); opacity: 0.15; }
  393.     50% { transform: scale(1.3); opacity: 0.25; }
  394. }
  396. /* 光のライン */
  397. .lottery-light-lines {
  398.     position: absolute;
  399.     width: 100%;
  400.     height: 100%;
  401.     top: 0;
  402.     left: 0;
  403.     z-index: 1;
  404. }
  406. .light-line {
  407.     position: absolute;
  408.     height: 2px;
  409.     background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  410.     animation: slide-light 3s ease-in-out infinite;
  411. }
  413. .line1 {
  414.     width: 40%;
  415.     top: 20%;
  416.     left: -40%;
  417.     animation-delay: 0s;
  418. }
  420. .line2 {
  421.     width: 50%;
  422.     top: 50%;
  423.     left: -50%;
  424.     animation-delay: 1s;
  425. }
  427. .line3 {
  428.     width: 35%;
  429.     top: 75%;
  430.     left: -35%;
  431.     animation-delay: 2s;
  432. }
  434. @keyframes slide-light {
  435.     0% { left: -50%; opacity: 0; }
  436.     50% { opacity: 1; }
  437.     100% { left: 100%; opacity: 0; }
  438. }
  440. /* コンテンツ */
  441. .lottery-content {
  442.     position: relative;
  443.     z-index: 2;
  444.     width: 100%;
  445.     display: flex;
  446.     flex-direction: column;
  447.     gap: 12px;
  448. }
  450. /* バッジ */
  451. .lottery-badge {
  452.     display: inline-flex;
  453.     align-items: center;
  454.     gap: 6px;
  455.     background: rgba(255,255,255,0.1);
  456.     color: #fff;
  457.     font-size: 1.2em;
  458.     font-weight: 900;
  459.     padding: 6px 20px;
  460.     border-radius: 50px;
  461.     box-shadow: 0 0 0 2px rgba(255,0,100,0.5), 0 6px 25px rgba(0,0,0,0.3);
  462.     border: 2px solid rgba(255,0,100,0.8);
  463.     width: fit-content;
  464.     backdrop-filter: blur(10px);
  465.     animation: glow-badge 2s ease-in-out infinite;
  466. }
  468. @keyframes glow-badge {
  469.     0%, 100% { 
  470.         box-shadow: 0 0 0 2px rgba(255,0,100,0.5), 0 6px 25px rgba(0,0,0,0.3);
  471.         border-color: rgba(255,0,100,0.8);
  472.     }
  473.     50% { 
  474.         box-shadow: 0 0 0 2px rgba(255,0,100,0.8), 0 8px 35px rgba(255,0,100,0.4);
  475.         border-color: rgba(255,0,100,1);
  476.     }
  477. }
  479. .badge-icon {
  480.     font-size: 1.1em;
  481.     animation: rotate-icon 3s ease-in-out infinite;
  482. }
  484. @keyframes rotate-icon {
  485.     0%, 100% { transform: rotate(0deg); }
  486.     50% { transform: rotate(15deg); }
  487. }
  489. /* メインタイトル */
  490. .lottery-main-title {
  491.     font-size: 2.3em;
  492.     font-weight: 900;
  493.     color: #fff;
  494.     text-shadow: 
  495.         3px 3px 0 rgba(0,0,0,0.5),
  496.         0 0 40px rgba(255,0,100,0.5);
  497.     line-height: 1.15;
  498.     letter-spacing: 2px;
  499.     margin: 0;
  500. }
  502. /* タグエリア */
  503. .lottery-tags {
  504.     display: flex;
  505.     gap: 10px;
  506.     flex-wrap: wrap;
  507. }
  509. .lottery-tag {
  510.     display: inline-flex;
  511.     align-items: center;
  512.     gap: 5px;
  513.     font-size: 1em;
  514.     font-weight: 900;
  515.     padding: 6px 16px;
  516.     border-radius: 25px;
  517.     border: 2px solid rgba(255,255,255,0.7);
  518.     letter-spacing: 0.5px;
  519. }
  521. .tag-limited {
  522.     background: rgba(255,255,255,0.08);
  523.     color: #fff;
  524.     box-shadow: 0 0 0 2px rgba(255,255,255,0.2), 0 5px 20px rgba(0,0,0,0.3);
  525.     border: 2px solid rgba(255,255,255,0.3);
  526.     backdrop-filter: blur(10px);
  527.     animation: pulse-limited 2s ease-in-out infinite;
  528. }
  530. @keyframes pulse-limited {
  531.     0%, 100% { 
  532.         transform: scale(1);
  533.         border-color: rgba(255,255,255,0.3);
  534.     }
  535.     50% { 
  536.         transform: scale(1.03);
  537.         border-color: rgba(255,255,255,0.5);
  538.     }
  539. }
  541. .tag-entry {
  542.     background: linear-gradient(135deg, #ff0064 0%, #ff0050 100%);
  543.     color: #fff;
  544.     box-shadow: 0 5px 25px rgba(255,0,100,0.5), inset 0 -2px 0 rgba(0,0,0,0.2);
  545.     border: 2px solid rgba(255,255,255,0.3);
  546.     animation: shake-entry 3s ease-in-out infinite;
  547. }
  549. @keyframes shake-entry {
  550.     0%, 100% { 
  551.         transform: translateX(0);
  552.         box-shadow: 0 5px 25px rgba(255,0,100,0.5), inset 0 -2px 0 rgba(0,0,0,0.2);
  553.     }
  554.     25% { transform: translateX(-3px); }
  555.     50% { 
  556.         box-shadow: 0 5px 30px rgba(255,0,100,0.7), inset 0 -2px 0 rgba(0,0,0,0.2);
  557.     }
  558.     75% { transform: translateX(3px); }
  559. }
  561. .tag-icon {
  562.     font-size: 1.1em;
  563. }
  565. /* ========================================
  566.    右バナー: 見積もりシミュレーター
  567. ======================================== */
  568. .simulator-banner-link {
  569.     display: block;
  570.     text-decoration: none;
  571.     height: 100%;
  572. }
  574. .simulator-banner-compact {
  575.     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  576.     border-radius: 10px;
  577.     padding: 20px 20px;
  578.     height: 100%;
  579.     min-height: 200px;
  580.     display: flex;
  581.     align-items: center;
  582.     justify-content: center;
  583.     box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  584.     position: relative;
  585.     overflow: hidden;
  586.     transition: transform 0.3s ease, box-shadow 0.3s ease;
  587. }
  589. .simulator-banner-compact:hover {
  590.     transform: translateY(-5px);
  591.     box-shadow: 0 15px 40px rgba(0,212,255,0.4);
  592. }
  594. /* 背景装飾 */
  595. .simulator-banner-compact__bg {
  596.     position: absolute;
  597.     width: 100%;
  598.     height: 100%;
  599.     top: 0;
  600.     left: 0;
  601.     overflow: hidden;
  602.     z-index: 1;
  603. }
  605. .simulator-banner-compact .circle {
  606.     position: absolute;
  607.     border-radius: 50%;
  608.     opacity: 0.1;
  609. }
  611. .simulator-banner-compact .circle1 {
  612.     width: 150px;
  613.     height: 150px;
  614.     background: #00d4ff;
  615.     top: -50px;
  616.     right: -50px;
  617.     animation: float-compact 6s ease-in-out infinite;
  618. }
  620. .simulator-banner-compact .circle2 {
  621.     width: 100px;
  622.     height: 100px;
  623.     background: #ff00ff;
  624.     bottom: -30px;
  625.     left: -30px;
  626.     animation: float-compact 8s ease-in-out infinite reverse;
  627. }
  629. @keyframes float-compact {
  630.     0%, 100% { transform: translateY(0px); }
  631.     50% { transform: translateY(-20px); }
  632. }
  634. /* コンテンツ */
  635. .simulator-banner-compact__content {
  636.     position: relative;
  637.     z-index: 2;
  638.     text-align: center;
  639.     width: 100%;
  640. }
  642. .simulator-banner-compact__title {
  643.     font-size: 1.6em;
  644.     font-weight: bold;
  645.     background: linear-gradient(90deg, #00d4ff, #ff00ff, #ffff00);
  646.     background-size: 200% 200%;
  647.     -webkit-background-clip: text;
  648.     background-clip: text;
  649.     -webkit-text-fill-color: transparent;
  650.     animation: gradient-shift-compact 3s ease infinite;
  651.     margin-bottom: 8px;
  652.     line-height: 1.3;
  653. }
  655. @keyframes gradient-shift-compact {
  656.     0% { background-position: 0% 50%; }
  657.     50% { background-position: 100% 50%; }
  658.     100% { background-position: 0% 50%; }
  659. }
  661. .simulator-banner-compact__subtitle {
  662.     color: #ffffff;
  663.     font-size: 0.95em;
  664.     margin-bottom: 15px;
  665.     opacity: 0.9;
  666. }
  668. .simulator-banner-compact__icons {
  669.     display: flex;
  670.     justify-content: center;
  671.     gap: 12px;
  672.     margin-bottom: 15px;
  673. }
  675. .simulator-banner-compact__icons .icon {
  676.     font-size: 1.8em;
  677.     animation: bounce-compact 2s ease-in-out infinite;
  678. }
  680. .simulator-banner-compact__icons .icon:nth-child(1) { animation-delay: 0s; }
  681. .simulator-banner-compact__icons .icon:nth-child(2) { animation-delay: 0.2s; }
  682. .simulator-banner-compact__icons .icon:nth-child(3) { animation-delay: 0.4s; }
  683. .simulator-banner-compact__icons .icon:nth-child(4) { animation-delay: 0.6s; }
  685. @keyframes bounce-compact {
  686.     0%, 100% { transform: translateY(0); }
  687.     50% { transform: translateY(-8px); }
  688. }
  690. .simulator-banner-compact__cta {
  691.     display: inline-block;
  692.     padding: 10px 28px;
  693.     background: linear-gradient(135deg, #00d4ff, #ff00ff);
  694.     color: white;
  695.     font-size: 1em;
  696.     font-weight: bold;
  697.     border-radius: 25px;
  698.     box-shadow: 0 5px 15px rgba(255,0,255,0.4);
  699.     animation: glow-compact 2s ease-in-out infinite;
  700. }
  702. @keyframes glow-compact {
  703.     0%, 100% { box-shadow: 0 5px 15px rgba(255,0,255,0.4); }
  704.     50% { box-shadow: 0 5px 20px rgba(0,212,255,0.6); }
  705. }
  707. /* ========================================
  708.    レスポンシブ対応
  709. ======================================== */
  710. @media (max-width: 768px) {
  711.     .ec-banner--two-column {
  712.         flex-direction: column;
  713.         align-items: center;
  714.     }
  715.     
  716.     .ec-banner__item {
  717.         max-width: 100%;
  718.         width: 100%;
  719.     }
  720.     
  721.     .simulator-banner-compact {
  722.         padding: 25px 15px;
  723.         min-height: 220px;
  724.     }
  725.     
  726.     .simulator-banner-compact__title {
  727.         font-size: 1.4em;
  728.     }
  729.     
  730.     .simulator-banner-compact__icons .icon {
  731.         font-size: 1.5em;
  732.     }
  733. }
  734. </style>
  736. <!-- ▲バナー -->
  737. <!-- ▼トピック -->
  738. <div class="ec-role">
  739.     <div class="ec-rankingRole ec-contentRole">
  740.         <div class="ec-secHeading">
  741.             <div>
  742.                 <span class="ec-secHeading__en">{{ 'GAMING PC'|trans }}</span>
  743.                 <img src="{{ asset('assets/icon/slash.svg') }}" alt="" class="ec-slash is-pc">
  744.                 <span class="ec-secHeading__ja">{{ 'おすすめゲーミングPC'|trans }}</span>
  745.             </div>
  746.             <div class="ranking-arrows content-arrows"></div>
  747.         </div>
  748.         <div class="ec-rankingRole__List">
  749.             <div class="ec-contentRole__listItem">
  750.                 <a href="{{ url('product_detail', {'id': '523'}) }}">
  751.                     <img src="{{ asset('/html/user_data/SpecialItem/timesell01.jpg') }}">
  752.                     <p class="ec-contentRole__listItemTitle">{{ '大特価'|trans }}</p>
  753.                     <p class="ec-contentRole__listItemPrice">{{ '¥126,000~'|trans }}</p>
  754.                 </a>
  755.             </div>
  756.             <div class="ec-contentRole__listItem">
  757.                 <a href="{{ url('product_detail', {'id': '522'}) }}">
  758.                     <img src="{{ asset('/html/user_data/SpecialItem/timesell02.jpg') }}">
  759.                     <p class="ec-contentRole__listItemTitle">{{ 'Ryzen7 9800X3D搭載'|trans }}</p>
  760.                     <p class="ec-contentRole__listItemPrice">{{ '¥315,000~'|trans }}</p>
  761.                 </a>
  762.             </div>
  763.             <div class="ec-contentRole__listItem">
  764.                 <a href="{{ url('product_detail', {'id': '297'}) }}">
  765.                     <img src="{{ asset('/html/user_data/SpecialItem/700ryzen.jpg') }}">
  766.                     <p class="ec-contentRole__listItemTitle">{{ 'モンハン推奨PC"G級"'|trans }}</p>
  767.                     <p class="ec-contentRole__listItemPrice">{{ '¥222,000~'|trans }}</p>
  768.                 </a>
  769.             </div>
  770.             <div class="ec-contentRole__listItem">
  771.                 <a href="{{ url('product_detail', {'id': '120'}) }}">
  772.                     <img src="{{ asset('/html/user_data/other/blank.png') }}">
  773.                     <p class="ec-contentRole__listItemTitle">{{ 'のいえあ侍オリジナルファンWH'|trans }}</p>
  774.                     <p class="ec-contentRole__listItemPrice">{{ '¥3,800~'|trans }}</p>
  775.                 </a>
  776.             </div>
  777.         </div>
  778.     </div>
  779. </div>
  780. <!-- ▲トピック -->
  781. <!-- ▼期間限定商品 -->
  782. <div class="ec-role">
  783.     <div class="ec-newItemRole ec-contentRole">
  784.         <div class="ec-secHeading">
  785.             <div>
  786.                 <span class="ec-secHeading__en">{{ 'SPECIAL'|trans }}</span>
  787.                 <img src="{{ asset('assets/icon/slash.svg') }}" alt="" class="ec-slash is-pc">
  788.                 <div class="ec-secHeading__ja">{{ '期間限定商品'|trans }}</div>
  789.             </div>
  790.             <div class="item-arrows content-arrows"></div>
  791.         </div>
  792.         <div class="ec-newItemRole__list ec-contentRole__list">
  793.             <div class="ec-contentRole__listItem">
  794.                 <a href="{{ url('product_list') }}?category_id={{ 25 }}">
  795.                     <img src="{{ asset('/html/user_data/SpecialItem/sp02.jpg') }}">
  796.                     <p class="ec-contentRole__listItemTitle">{{ 'お買い得品'|trans }}</p>
  797.                 </a>
  798.             </div>
  799.             <div class="ec-contentRole__listItem">
  800.                 <a href="{{ url('product_detail', {'id': '281'}) }}">
  801.                     <img src="{{ asset('/html/user_data/device/248BLACK.jpg') }}">
  802.                     <p class="ec-contentRole__listItemTitle">{{ 'PX248WAVE[ブラック]'|trans }}</p>
  803.                     <p class="ec-contentRole__listItemPrice">{{ '￥25,800'|trans }}</p>
  804.                 </a>
  805.             </div>
  806.             <div class="ec-contentRole__listItem">
  807.                 <a href="{{ url('product_detail', {'id': '279'}) }}">
  808.                     <img src="{{ asset('/html/user_data/device/248WHITE.jpg') }}">
  809.                     <p class="ec-contentRole__listItemTitle">{{ 'PX248WAVE[ホワイト]'|trans }}</p>
  810.                     <p class="ec-contentRole__listItemPrice">{{ '￥25,800'|trans }}</p>
  811.                 </a>
  812.             </div>
  813.             <div class="ec-contentRole__listItem">
  814.                 <a href="{{ url('product_detail', {'id': '129'}) }}">
  815.                     <img src="{{ asset('/html/user_data/SpecialItem/0926194749_6512b6d55162a.jpg') }}">
  816.                     <p class="ec-contentRole__listItemTitle">{{ 'Thermaltake Core P6 TG [Green]'|trans }}</p>
  817.                     <p class="ec-contentRole__listItemPrice">{{ '￥13,000'|trans }}</p>
  818.                 </a>
  819.             </div>
  820. {#            <div class="ec-contentRole__listItem">
  821.                 <a href="{{ url('product_detail', {'id': '121'}) }}">
  822.                     <img src="{{ asset('/html/user_data/SpecialItem/sp01.jpg', 'save_image') }}">
  823.                     <p class="ec-contentRole__listItemTitle">{{ '"X"フォロワー1万人突破記念'|trans }}</p>
  824.                     <p class="ec-contentRole__listItemPrice">{{ ''|trans }}</p>
  825.                     <p class="ec-contentRole__listItemPrice">{{ '￥110,000~'|trans }}</p>
  826.                 </a>
  827.             </div>
  828. #}
  829.             <div class="ec-contentRole__listItem">
  830.                 <a href="{{ url('product_detail', {'id': '119'}) }}">
  831.                     <img src="{{ asset('/html/user_data/other/blank.jpg') }}">
  832.                     <p class="ec-contentRole__listItemTitle">{{ '準備中'|trans }}</p>
  833.                     <p class="ec-contentRole__listItemPrice">{{ ''|trans }}</p>
  834.                 </a>
  835.             </div>
  836.                         <div class="ec-contentRole__listItem">
  837.                 <a href="{{ url('product_detail', {'id': '119'}) }}">
  838.                     <img src="{{ asset('/html/user_data/other/blank.jpg') }}">
  839.                     <p class="ec-contentRole__listItemTitle">{{ '準備中'|trans }}</p>
  840.                     <p class="ec-contentRole__listItemPrice">{{ ''|trans }}</p>
  841.                 </a>
  842.             </div>
  843.         </div>
  844.     </div>
  845. </div>
  846. <!-- ▲期間限定商品 -->
  847. <!-- ▼コラボPC -->
  848. <div class="ec-role">
  849.     <div class="ec-campaignRole ec-contentRole">
  850.         <div class="ec-secHeading">
  851.             <div>
  852.                 <span class="ec-secHeading__en">{{ 'COLLABO'|trans }}</span>
  853.                 <img src="{{ asset('assets/icon/slash.svg') }}" alt="" class="ec-slash is-pc">
  854.                 <span class="ec-secHeading__ja">{{ 'コラボPC'|trans }}</span>
  855.             </div>
  856.             <div class="campaign-arrows content-arrows"></div>
  857.         </div>
  858.         <div class="ec-campaignRole__List">
  859.             <div class="ec-contentRole__listItem">
  860.                 <a href="{{ url('product_list') }}?category_id={{ 45 }}">
  861.                     <img src="{{ asset('/html/user_data/Category/collabo/suzune.jpg') }}">
  862.                     <p class="ec-contentRole__listItemTitle">{{ 'すず音'|trans }}</p>
  863.                     <p class="ec-contentRole__listItemPrice">{{ '￥160,000~'|trans }}</p>
  864.                 </a>
  865.             </div>
  866.             <div class="ec-contentRole__listItem">
  867.                 <a href="{{ url('product_list') }}?category_id={{ 31 }}">
  868.                     <img src="{{ asset('/html/user_data/Category/collabo/FqnocOEaUAEPiD7 1.jpg') }}">
  869.                     <p class="ec-contentRole__listItemTitle">{{ '眠田イナ'|trans }}</p>
  870.                     <p class="ec-contentRole__listItemPrice">{{ '￥160,000~'|trans }}</p>
  871.                 </a>
  872.             </div>
  873.             <div class="ec-contentRole__listItem">
  874.                 <a href="{{ url('product_list') }}?category_id={{ 33 }}">
  875.                     <img src="{{ asset('/html/user_data/Category/collabo/888.jpg') }}">
  876.                     <p class="ec-contentRole__listItemTitle">{{ 'ねくすと'|trans }}</p>
  877.                     <p class="ec-contentRole__listItemPrice">{{ '￥160,000~'|trans }}</p>
  878.                 </a>
  879.             </div>
  880. {#            <div class="ec-contentRole__listItem">
  881.                 <a href="{{ url('product_list') }}?category_id={{ 32 }}">
  882.                     <img src="{{ asset('/html/user_data/Category/collabo/logo02.png', 'save_image') }}">
  883.                     <p class="ec-contentRole__listItemTitle">{{ 'せきめ'|trans }}</p>
  884.                     <p class="ec-contentRole__listItemPrice">{{ '￥160,000~'|trans }}</p>
  885.                 </a>
  886.             </div>#}
  887.         </div>
  888.     </div>
  889. </div>
  890. <!-- ▲コラボPC -->
  892. <!-- ▼SPバナー -->
  893. <div class="ec-banner3 is-sp">
  894.     <a href="https://www.youtube.com/@noiezam" target="_blank" rel="noopener">
  895.     <img src="{{ asset('/html/user_data/TOP/leftside/Left-banner012.png') }}" alt="のいえあ侍　Youtube　動画"></a>
  896. <br><br>
  897.     <a tabindex="-1">
  898.     <img src="{{ asset('/html/user_data/TOP/leftside/ELSA.jpg') }}" alt="エルザジャパン正規販売代理店"></a>
  899. <br><br>
  900.     <a tabindex="-1">
  901.     <img src="{{ asset('/html/user_data/TOP/leftside/wtwwtwtw.png') }}" alt="pixio ゲーミングモニター"></a>
  902. <br><br>
  903.     <a href="https://twitter.com/gajiro15" target="_blank" rel="noopener">
  904.     <img src="{{ asset('/html/user_data/TOP/leftside/gaji.jpg') }}" alt="ガジロー"></a>
  905. </div>
  906. <!-- ▲SPバナー -->
  907. <!-- ▼SPカテゴリー -->
  908. {% set Categories = repository('Eccube\\Entity\\Category').getList() %}
  909. {% macro tree(Category) %}
  910.     {% from _self import tree %}
  911.     <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  912.         {{ Category.name }}
  913.         <img src="{{ asset('assets/icon/side-arrow-right-gray.svg') }}" alt="">
  914.     </a>
  915.     {% if Category.children|length > 0 %}
  916.         <ul>
  917.             {% for ChildCategory in Category.children %}
  918.                 <li>
  919.                     {{ tree(ChildCategory) }}
  920.                 </li>
  921.             {% endfor %}
  922.         </ul>
  923.     {% endif %}
  924. {% endmacro %}
  925. {# @see https://github.com/bolt/bolt/pull/2388 #}
  926. {% from _self import tree %}
  927. <div class="ec-headerCategoryAreaSp is-sp">
  928.     <div class="ec-headerCategoryAreaSp__heading">
  929.         <p>{{ 'カテゴリ一覧'|trans }}</p>
  930.     </div>
  931.     <div class="ec-itemNav">
  932.         <ul class="ec-itemNav__nav">
  933.             <li class="ec-sideCategoryList__all">
  934.                 <a href="{{ url('product_list') }}?category_id=">全ての商品</a>
  935.             </li>
  936.             {% for Category in Categories %}
  937.                 <li>
  938.                     {{ tree(Category) }}
  939.                 </li>
  940.             {% endfor %}
  941.         </ul>
  942.     </div>
  943. </div>
  944. <!-- ▲SPカテゴリー -->