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

Open in your IDE?
  1. {#
  2. トップページ用 選ばれる理由ブロック
  3. 配置先: EC-CUBE管理画面 → コンテンツ管理 → ブロック管理 → 新規作成
  4. ブロック名: reasons_block
  5. #}
  7. <section class="nz-top-reasons">
  8.     <style>
  9.     .nz-top-reasons {
  10.         padding: 60px 20px;
  11.         background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  12.         color: #fff;
  13.     }
  14.     .nz-top-reasons-inner {
  15.         max-width: 1100px;
  16.         margin: 0 auto;
  17.     }
  18.     .nz-top-reasons-title {
  19.         text-align: center;
  20.         margin-bottom: 50px;
  21.     }
  22.     .nz-top-reasons-title-en {
  23.         display: block;
  24.         font-size: 12px;
  25.         font-weight: 600;
  26.         letter-spacing: 2px;
  27.         margin-bottom: 8px;
  28.         opacity: 0.8;
  29.     }
  30.     .nz-top-reasons-title-ja {
  31.         display: block;
  32.         font-size: 28px;
  33.         font-weight: 700;
  34.     }
  35.     .nz-top-reasons-grid {
  36.         display: grid;
  37.         grid-template-columns: repeat(3, 1fr);
  38.         gap: 30px;
  39.     }
  40.     @media (max-width: 768px) {
  41.         .nz-top-reasons-grid {
  42.             grid-template-columns: 1fr;
  43.             gap: 25px;
  44.         }
  45.     }
  46.     .nz-top-reason-card {
  47.         text-align: center;
  48.         padding: 30px 20px;
  49.     }
  50.     .nz-top-reason-number {
  51.         display: inline-block;
  52.         width: 50px;
  53.         height: 50px;
  54.         line-height: 50px;
  55.         background: #f4b942;
  56.         color: #1e3c72;
  57.         border-radius: 50%;
  58.         font-size: 24px;
  59.         font-weight: 700;
  60.         margin-bottom: 20px;
  61.     }
  62.     .nz-top-reason-icon {
  63.         font-size: 48px;
  64.         margin-bottom: 15px;
  65.     }
  66.     .nz-top-reason-title {
  67.         font-size: 20px;
  68.         font-weight: 700;
  69.         margin: 0 0 15px;
  70.     }
  71.     .nz-top-reason-desc {
  72.         font-size: 14px;
  73.         line-height: 1.8;
  74.         margin: 0;
  75.         opacity: 0.9;
  76.     }
  77.     </style>
  78.     
  79.     <div class="nz-top-reasons-inner">
  80.         <h2 class="nz-top-reasons-title">
  81.             <span class="nz-top-reasons-title-en">WHY CHOOSE US</span>
  82.             <span class="nz-top-reasons-title-ja">選ばれる3つの理由</span>
  83.         </h2>
  84.         
  85.         <div class="nz-top-reasons-grid">
  86.             <div class="nz-top-reason-card">
  87.                 <span class="nz-top-reason-number">1</span>
  88.                 <div class="nz-top-reason-icon">🎨</div>
  89.                 <h3 class="nz-top-reason-title">世界一の美配線</h3>
  90.                 <p class="nz-top-reason-desc">
  91.                     見えない部分にこそこだわりを。<br>
  92.                     整然とした配線は、エアフローを最適化し<br>
  93.                     パフォーマンスと耐久性を高めます。
  94.                 </p>
  95.             </div>
  96.             
  97.             <div class="nz-top-reason-card">
  98.                 <span class="nz-top-reason-number">2</span>
  99.                 <div class="nz-top-reason-icon">👤</div>
  100.                 <h3 class="nz-top-reason-title">顔が見える安心感</h3>
  101.                 <p class="nz-top-reason-desc">
  102.                     大手量販店と違い、店主NOIEが<br>
  103.                     直接対応・制作を行います。<br>
  104.                     誰が作ったか分かる安心感をお届けします。
  105.                 </p>
  106.             </div>
  107.             
  108.             <div class="nz-top-reason-card">
  109.                 <span class="nz-top-reason-number">3</span>
  110.                 <div class="nz-top-reason-icon">🛡️</div>
  111.                 <h3 class="nz-top-reason-title">充実のサポート</h3>
  112.                 <p class="nz-top-reason-desc">
  113.                     購入後も安心のサポート体制。<br>
  114.                     修理・メンテナンス・アップグレード相談まで<br>
  115.                     長くお付き合いいたします。
  116.                 </p>
  117.             </div>
  118.         </div>
  119.     </div>
  120. </section>