app/template/default/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set body_class = 'front_page' %}
  5. {% block stylesheet %}
  6.   <link rel="stylesheet" href="{{ asset('assets/css/home.css') }}">
  7.   <link rel="stylesheet" href="{{ asset('assets/css/news-list.css') }}">
  8.   <link rel="stylesheet" href="{{ asset('assets/css/swiper-bundle.min.css') }}" defer>
  10.   <style>
  11.     .header-section {
  12.         display: none;
  13.     }
  14.     @media (max-width: 1200px) {
  15.         .header-section {
  16.             display: block;
  17.         }
  18.     }
  19.   </style>
  20. {% endblock %}
  22. {% block javascript %}
  23.     <!-- Swiper JS cdn -->
  24.   <script src="{{ asset('assets/js/swiper-bundle.min.js') }}" defer></script>
  25.   <script defer>
  26.   $(document).ready(function() {
  27.     // Product Slider
  28.     // loop needs slides >= slidesPerView * 2 (max slidesPerView is 3)
  29.     if (document.getElementById('bannerSliderId')) {
  30.       const bannerSlideCount = document.querySelectorAll('#bannerSliderId .swiper-slide').length;
  31.       new Swiper('#bannerSliderId', {
  32.         slidesPerView: 3,
  33.         spaceBetween: 16,
  34.         loop: bannerSlideCount >= 6,
  35.         centeredSlides: false,
  36.         breakpoints: {
  37.           1200: {
  38.             slidesPerView: 3,
  39.             spaceBetween: 16,
  40.           },
  41.           768: {
  42.             slidesPerView: 3,
  43.             spaceBetween: 16,
  44.           },
  45.           0: {
  46.             centeredSlides: true,
  47.             slidesPerView: 1.2,
  48.             spaceBetween: 16,
  49.           }
  50.         },
  51.         pagination: {
  52.           el: '.productSlider-pagination',
  53.           clickable: true,
  54.           bulletClass: 'productSlider-bullet',
  55.           bulletActiveClass: 'productSlider-bullet-active',
  56.         },
  57.         navigation: {
  58.           nextEl: '.productSlider-button-next',
  59.           prevEl: '.productSlider-button-prev',
  60.         },
  61.       });
  62.     }
  64.     const howToUseSwiper = new Swiper('#howToUseSwiperId', {
  65.       slidesPerView: 'auto',
  66.       spaceBetween: 20,
  67.       centeredSlides: false,
  68.       grabCursor: true,
  69.       freeMode: {
  70.         enabled: true,
  71.         sticky: false,
  72.       },
  73.       navigation: {
  74.         nextEl: '.slider-nav-next',
  75.         prevEl: '.slider-nav-prev',
  76.       },
  77.       on: {
  78.         init: function() {
  79.           updateProgressBar(this);
  80.         },
  81.         progress: function(swiper, progress) {
  82.           updateProgressBar(swiper);
  83.         },
  84.         slideChange: function() {
  85.           updateProgressBar(this);
  86.         },
  87.       },
  88.       breakpoints: {
  89.         1200: {
  90.           spaceBetween: 20,
  91.         },
  92.         0: {
  93.           spaceBetween: 12,
  94.         }
  95.       },
  96.     });
  98.     function updateProgressBar(swiper) {
  99.       const progressBar = document.querySelector('.slider-progress-bar');
  100.       if (!progressBar) return;
  102.       // Calculate progress based on scroll position
  103.       // Start from 60% and scale to 100%
  104.       const progress = swiper.progress || 0;
  105.       const percentage = 60 + (progress * 40);
  106.       progressBar.style.width = Math.min(percentage, 100) + '%';
  107.     }
  110.     setTimeout(() => {
  111.         // Banner Slide - Pure CSS animation, no Swiper needed
  112.         // Banner Slide Text - Pure CSS animation, no Swiper needed
  114.         // click spec table top item
  115.         const specTableTopItems = document.querySelectorAll('.spec-table-top-item');
  116.         specTableTopItems.forEach(item => {
  117.         item.addEventListener('click', () => {
  118.             specTableTopItems.forEach(item => {
  119.             item.classList.remove('spec-table-top-item-active');
  120.             });
  121.             item.classList.add('spec-table-top-item-active');
  123.             // show spec table body
  124.             document.querySelectorAll('.spec-table-body').forEach(item => {
  125.             if (item.id !== `spec_${item.dataset.id}`) {
  126.                 item.style.display = 'none';
  127.             }
  128.             });
  129.             document.getElementById(`spec_${item.dataset.id}`).style.display = 'flex';
  130.         });
  131.         });
  132.     }, 0);
  133. });
  134.   </script>
  135. {% endblock %}
  137. {% block main %}
  138. {% set totalQuantity = get_carts_total_quantity() %}
  140.   <!-- Banner Section -->
  141.   <div class="banner">
  143.     {# banner slide image #}
  144.     <div class="banner-slide-swiper-wrapper">
  145.       <div class="banner-slide-container" id="bannerSlideContainerId">
  146.         <div class="banner-slide-track">
  147.           <div class="banner-slide-item">
  148.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_long.webp') }}" alt="Banner Slide 1" >
  149.           </div>
  150.           <div class="banner-slide-item">
  151.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_long.webp') }}" alt="Banner Slide 2" >
  152.           </div>
  153.           <div class="banner-slide-item">
  154.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_long.webp') }}" alt="Banner Slide 3" >
  155.           </div>
  156.           {# Duplicate for seamless loop #}
  157.           <div class="banner-slide-item">
  158.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_long.webp') }}" alt="Banner Slide 1" >
  159.           </div>
  160.           <div class="banner-slide-item">
  161.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_long.webp') }}" alt="Banner Slide 2" >
  162.           </div>
  163.           <div class="banner-slide-item">
  164.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_long.webp') }}" alt="Banner Slide 3" >
  165.           </div>
  166.         </div>
  167.       </div>
  168.     </div>
  170.     {# banner slide text #}
  171.     <div class="banner-slide-swiper-wrapper banner-slide-text-swiper-text">
  172.       <div class="banner-slide-container" id="bannerSlideTextContainerId">
  173.         <div class="banner-slide-track banner-slide-track-reverse">
  174.           <div class="banner-slide-item">
  175.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}" alt="Banner Slide 1" >
  176.           </div>
  177.           <div class="banner-slide-item">
  178.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}" alt="Banner Slide 2" >
  179.           </div>
  180.           <div class="banner-slide-item">
  181.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}" alt="Banner Slide 3" >
  182.           </div>
  183.           {# Duplicate for seamless loop #}
  184.           <div class="banner-slide-item">
  185.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}" alt="Banner Slide 1" >
  186.           </div>
  187.           <div class="banner-slide-item">
  188.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}" alt="Banner Slide 2" >
  189.           </div>
  190.           <div class="banner-slide-item">
  191.             <img class="banner-slide-image" src="{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}" alt="Banner Slide 3" >
  192.           </div>
  193.         </div>
  194.       </div>
  195.     </div>
  196.     <!-- Decorative Text Left -->
  197.     <div class="banner__text-left">
  198.     </div>
  200.     <div class="container-desktop relative">
  201.       <!-- Logo Header -->
  202.       <div class="banner__logo">
  203.           <img src="{{ asset('assets/img/default/icons/logo.png') }}" alt="Logo">
  204.       </div>
  206.       <!-- Navigation Menu -->
  207.       <nav class="banner__nav">
  208.         {% if is_granted('ROLE_USER') %}
  209.           <a href="{{ url('mypage') }}" class="nav__item text-black">
  210.             <img src="{{ asset('assets/img/default/icons/icon-user.svg') }}" alt="User" class="nav__icon">
  211.             <span>マイページ</span>
  212.           </a>
  213.           <a href="{{ url('logout') }}" class="nav__item text-black">
  214.             <img src="{{ asset('assets/img/default/icons/icon-logout.svg') }}" alt="Logout" class="nav__icon">
  215.             <span>ログアウト</span>
  216.           </a>
  217.         {% else %}
  218.             <a href="{{ url('entry') }}" class="nav__item text-black">
  219.                 <img src="{{ asset('assets/img/default/icons/icon-edit.svg') }}" alt="Register" class="nav__icon">
  220.                 <span>会員登録</span>
  221.             </a>
  222.             <a href="{{ url('mypage_login') }}" class="nav__item text-black">
  223.                 <img src="{{ asset('assets/img/default/icons/icon-lock.svg') }}" alt="Login" class="nav__icon">
  224.                 <span>ログイン</span>
  225.             </a>
  226.         {% endif %}
  227.         <a href="{{ url('product_list') }}" class="nav__item nav__item--search text-black">
  228.           <img src="{{ asset('assets/img/default/icons/icon-search.svg') }}" alt="Search" class="nav__icon">
  229.           <span>商品を探す</span>
  230.         </a>
  231.         <a href="{{ url('cart') }}" class="nav__item text-black relative">
  232.           {% if totalQuantity > 0 %}
  233.             <span class="nav__item-badge">{{ totalQuantity|number_format }}</span>
  234.           {% endif %}
  235.           <img src="{{ asset('assets/img/default/icons/icon-cart.svg') }}" alt="Cart" class="nav__icon">
  236.           <span>カート</span>
  237.         </a>
  238.         <a href="{{ url('contact') }}" class="nav__item text-black">
  239.           <img src="{{ asset('assets/img/default/icons/icon-email.svg') }}" alt="Contact" class="nav__icon">
  240.           <span>お問い合わせ</span>
  241.         </a>
  242.         <a href="javascript:void(0);" onclick="linkToMypage()" class="nav__item nav__item--primary">
  243.           <img src="{{ asset('assets/img/default/icons/icon-charger.svg') }}" alt="Charge" class="nav__icon">
  244.           <span>ギガをチャージ</span>
  245.         </a>
  246.       </nav>
  247.     </div>
  249.     <!-- Decorative Text Right -->
  250.     <div class="banner__text-right">
  251.     </div>
  252.   </div>
  254.   <!-- slider section -->
  255.   {% if banners|length > 0 %}
  256.   <div class="slider">
  257.     <div class="swiper productSlider" id="bannerSliderId">
  258.       <div class="swiper-wrapper">
  259.         {% for Banner in banners %}
  260.           <div class="swiper-slide">
  261.             <div class="slider__card">
  262.               <a onclick="if ('{{ Banner.linkUrl }}') { window.open('{{ Banner.linkUrl }}', '_blank') }">
  263.                 <div class="slider__card-image">
  264.                   <img src="{{ asset(Banner.imagePath, 'save_image') }}" alt="{{ Banner.title }}">
  265.                 </div>
  266.               </a>
  267.             </div>
  268.           </div>
  269.         {% endfor %}
  270.       </div>
  271.       <!-- Pagination dots -->
  272.       <div class="swiper-pagination productSlider-pagination"></div>
  273.       <!-- Navigation buttons -->
  274.       <div class="productSlider-navigation">
  275.         <button class="productSlider-button productSlider-button-prev">
  276.           <img src="{{ asset('assets/img/default/icons/icon-arrow-left-nav.svg') }}" alt="Previous">
  277.         </button>
  278.         <button class="productSlider-button productSlider-button-next">
  279.           <img src="{{ asset('assets/img/default/icons/icon-arrow-right-nav.svg') }}" alt="Next">
  280.         </button>
  281.       </div>
  282.     </div>
  283.   </div>
  284.   {% endif %}
  286.   <!-- section 1 -->
  287.   <div class="section-1">
  288.     <div class="top-image-mobile">
  289.       <img src="{{ asset('assets/img/default/banner/right_banner.png') }}" alt="section-1" loading="lazy">
  290.     </div>
  291.     <div class="section-1-wrapper container-1200">
  292.       <div class="left_content">
  293.           <img class="left_content_image" src="{{ asset('assets/img/default/banner/top_banner.png') }}" alt="section-1" loading="lazy">
  294.           <div class="left_content_text container-desktop">
  295.             <p class="mb-8">CHEETAH WiFiとは契約、返却や月額料金なし、必要な時に必要な分ギガを買い切りで追加<br>チャージするだけですぐに利用できるポケットWiFiです。</p>
  296.             <p>追加できるギガは10GB・30GB・50GB・100GB、追加から365日間の有効期間があります。docomo・au・Softbankの３大キャリアはもちろん、主要な136カ国に対応しています。</p>
  297.           </div>
  298.           <div class="left_content_text container-mobile">
  299.             <p class="mb-8">CHEETAH WiFiとは契約、返却や月額料金なし、必要な時に必要な分ギガを買い切りで追加チャージするだけですぐに利用できるポケットWiFiです。</p>
  300.             <p>追加できるギガは10GB・30GB・50GB・100GB、追加から365日間の有効期間があります。docomo・au・Softbankの３大キャリアはもちろん、主要な136カ国に対応しています。</p>
  301.           </div>
  302.         </div>
  303.       <div class="right_content">
  304.         <img class="right_content_image" src="{{ asset('assets/img/default/banner/right_banner.png') }}" alt="section-1" loading="lazy">
  305.       </div>
  306.     </div>
  307.     <div class="curved-background"></div>
  308.   </div>
  310.   <!-- ranking section -->
  311.   <div class="ranking-section" id="ranking-section">
  312.     <div class="container-1200">
  313.     <div class="ranking-header-wrapper mb-40">
  314.       <div class="ranking-header mr-40">
  315.         <div class="title-base-subtitle">
  316.           <img src="{{ asset('assets/img/default/icons/icon-ranking.svg') }}" alt="Ranking" class="title-base-icon" loading="lazy">
  317.           <span>注目の商品</span>
  318.         </div>
  319.         <h2 class="title-base-title">PRODUCTS</h2>
  320.       </div>
  321.       <a href="{{ url('product_list') }}" class="btn-primary">
  322.         <span>商品一覧をみる</span>
  323.         <img src="{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}" alt="Arrow" class="btn-arrow-black" loading="lazy">
  324.       </a>
  325.     </div>
  327.     {% if top_ranking_products|length > 0 %}
  329.       <!-- Main Ranking Item (No.1) -->
  330.       {# <div class="ranking-main">
  331.         <div class="ranking-card ranking-card--large">
  332.           <a href="{{ url('product_detail', {'id': firstProduct.id}) }}">
  333.             <div class="ranking-card__image">
  334.               <img src="{{ asset(firstProduct.main_list_image|no_image_product, 'save_image') }}" alt="{{ firstProduct.name }}" loading="lazy">
  335.             </div>
  336.           </a>
  337.           <div class="ranking-card__badge">No.1</div>
  338.           <div class="ranking-card__favorite">
  339.             <img src="{{ asset('assets/img/default/icons/icon-heart.svg') }}" alt="Favorite" loading="lazy">
  340.           </div>
  341.         </div>
  343.         <div class="ranking-info">
  344.           <h3 class="ranking-info__title" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ firstProduct.name }}">{{ firstProduct.name }}</h3>
  345.           <div class="ranking-info__price">
  346.             <span class="price-symbol">¥</span>
  347.             <span class="price-amount">
  348.               {% if firstProduct.hasProductClass %}
  349.                 {% if firstProduct.getPrice02IncTaxMin == firstProduct.getPrice02IncTaxMax %}
  350.                   {{ firstProduct.getPrice02IncTaxMin|number_format }}
  351.                 {% else %}
  352.                   {{ firstProduct.getPrice02IncTaxMin|number_format }} ～ {{ firstProduct.getPrice02IncTaxMax|number_format }}
  353.                 {% endif %}
  354.               {% else %}
  355.                 {{ firstProduct.getPrice02IncTaxMin|number_format }}
  356.               {% endif %}
  357.             </span>
  358.             <span class="price-tax">(税込)</span>
  359.           </div>
  360.         </div>
  361.       </div> #}
  363.       <!-- Divider Line -->
  364.       <div class="ranking-divider"></div>
  366.       <!-- Ranking items (up to 4; missing IDs are skipped) -->
  367.       <div class="ranking-grid">
  368.         {% for Product in top_ranking_products %}
  369.           <div class="ranking-item">
  370.             <div class="ranking-card ranking-card--small">
  371.               <a href="{{ url('product_detail', {'id': Product.id}) }}">
  372.                 <div class="ranking-card__image">
  373.                   <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" loading="lazy">
  374.                 </div>
  375.               </a>
  376.               {# <div class="ranking-card__badge">No.{{ loop.index }}</div> #}
  377.               <div class="ranking-card__favorite">
  378.                 <img src="{{ asset('assets/img/default/icons/icon-heart.svg') }}" alt="Favorite" loading="lazy">
  379.               </div>
  380.             </div>
  381.             <div class="ranking-item__info">
  382.               <a href="{{ url('product_detail', {'id': Product.id}) }}">
  383.                 <h4 class="ranking-item__title" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ Product.name }}">{{ Product.name }}</h4>
  384.               </a>
  385.               <div class="ranking-item__price">
  386.                 <span class="price-symbol">¥</span>
  387.                 <span class="price-amount">
  388.                   {% if Product.hasProductClass %}
  389.                     {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  390.                       {{ Product.getPrice02IncTaxMin|number_format }}
  391.                     {% else %}
  392.                       {{ Product.getPrice02IncTaxMin|number_format }} ～ {{ Product.getPrice02IncTaxMax|number_format }}
  393.                     {% endif %}
  394.                   {% else %}
  395.                     {{ Product.getPrice02IncTaxMin|number_format }}
  396.                   {% endif %}
  397.                 </span>
  398.                 <span class="price-tax">(税込)</span>
  399.               </div>
  400.             </div>
  401.           </div>
  402.         {% endfor %}
  403.       </div>
  404.     {% else %}
  405.       <!-- Fallback nếu không có sản phẩm ranking -->
  406.     {% endif %}
  407.   </div>
  408.   </div>
  410.   <!-- banner 2 -->
  411.   <div class="banner-2">
  412.   </div>
  414.   <!-- news -->
  415.   <div class="news-section">
  416.     <div class="container-1200">
  417.       <div class="news-header">
  418.         <div class="news-title-wrapper">
  419.           <div class="title-base-subtitle" style="margin-top: 16px;">
  420.             <img src="{{ asset('assets/img/default/icons/icon-news.svg') }}" alt="News" class="title-base-icon" loading="lazy">
  421.             <span>お知らせ</span>
  422.           </div>
  423.           <h2 class="title-base-title news-title-desktop">NEWS</h2>
  424.           <a class="btn-primary news-list-btn news-list-btn-desktop" href="{{ url('news_list') }}">
  425.             <span>お知らせ一覧をみる</span>
  426.             <img src="{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}" alt="Arrow" class="btn-arrow-black" loading="lazy">
  427.           </a>
  428.         </div>
  430.         <div class="news-list-wrapper pt-0" id="news-list-id">
  431.             {% set NewsList = repository('Eccube\\Entity\\News').getList()|slice(0, 5) %}
  432.             <div class="news-list">
  433.             {% for News in NewsList %}
  434.                 <a href="{{ url('news_detail', {id: News.id}) }}" class="news-item">
  435.                   <div class="news-date container-desktop">{{ News.publishDate|date('Y.m.d') }}</div>
  436.                   <div class="news-title container-desktop text-black">
  437.                     <span class="text-black">{{ News.title }}</span>
  438.                   </div>
  439.                   <div class="news-wrapper-mobile container-mobile">
  440.                     <div class="news-date news-date-mobile">{{ News.publishDate|date('Y.m.d') }}</div>
  441.                     <div class="news-title news-title-mobile text-black">
  442.                       <span class="text-black">{{ News.title }}</span>
  443.                     </div>
  444.                   </div>
  445.                   <div class="news-arrow">
  446.                     <img src="{{ asset('assets/img/default/icons/icon-arrow-gray.svg') }}" alt="Arrow">
  447.                   </div>
  448.                 </a>
  449.             {% else %}
  450.                 <p class="no-news">お知らせはありません。</p>
  451.             {% endfor %}
  452.             </div>
  453.         </div>
  455.         <a class="btn-primary news-list-btn news-list-btn-mobile" href="{{ url('news_list') }}">
  456.           <span>お知らせ一覧をみる</span>
  457.           <img src="{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}" alt="Arrow" class="btn-arrow-black" loading="lazy">
  458.         </a>
  459.       </div>
  461.     </div>
  462.   </div>
  464.   <!-- feature section -->
  465.   <div class="feature-section">
  466.     <div class="container-1200">
  467.       <div class="feature-header mt-120 mb-40">
  468.         <div class="title-base-subtitle">
  469.           <img src="{{ asset('assets/img/default/icons/icon-features.svg') }}" alt="Feature" class="title-base-icon" loading="lazy">
  470.           <span>サービスの特徴</span>
  471.         </div>
  472.         <h2 class="title-base-title">FEATURES</h2>
  473.       </div>
  476.     </div>
  477.     <div class="container-1200 container-1200-desktop">
  478.       <div class="feature-grid">
  479.       <!-- Feature Card 1 -->
  480.       <div class="feature-card">
  481.         <div class="feature-card__icon">
  482.           <img src="{{ asset('assets/img/default/icons/icon-yen.svg') }}" alt="Yen" loading="lazy">
  483.         </div>
  484.         <div class="feature-card__content">
  485.           <div class="feature-card__badge">月額費用なし</div>
  486.           <p class="feature-card__description">必要な時だけチャージして使用可能</p>
  487.         </div>
  488.       </div>
  490.       <!-- Feature Card 2 -->
  491.       <div class="feature-card">
  492.         <div class="feature-card__icon">
  493.           <img src="{{ asset('assets/img/default/icons/icon-clock.svg') }}" alt="Clock" loading="lazy">
  494.         </div>
  495.         <div class="feature-card__content">
  496.           <div class="feature-card__badge">即時チャージ対応</div>
  497.           <p class="feature-card__description">マイページから24時間いつでも即チャージ</p>
  498.         </div>
  499.       </div>
  501.       <!-- Feature Card 3 -->
  502.       <div class="feature-card">
  503.         <div class="feature-card__icon">
  504.           <img src="{{ asset('assets/img/default/icons/icon-easy.svg') }}" alt="Easy" loading="lazy">
  505.         </div>
  506.         <div class="feature-card__content">
  507.           <div class="feature-card__badge">簡単すぐ使える</div>
  508.           <p class="feature-card__description">面倒な手続き不要、届いたらすぐ利用可能</p>
  509.         </div>
  510.       </div>
  512.       <!-- Feature Card 4 -->
  513.       <div class="feature-card">
  514.         <div class="feature-card__icon">
  515.           <img src="{{ asset('assets/img/default/icons/icon-world.svg') }}" alt="World" loading="lazy">
  516.         </div>
  517.         <div class="feature-card__content">
  518.           <div class="feature-card__badge">世界130カ国対応</div>
  519.           <p class="feature-card__description">海外でもそのまま使える</p>
  520.         </div>
  521.       </div>
  523.       <!-- Star Icon -->
  524.       <div class="feature-star">
  525.         <img src="{{ asset('assets/img/default/icons/icon-star.svg') }}" alt="Star" loading="lazy">
  526.       </div>
  527.       </div>
  528.     </div>
  529.   </div>
  531.   <!-- how to use section -->
  532.   <div class="how-to-use-section">
  533.     <div class="container-1200">
  534.       <div class="how-to-use-wrapper mt-120 mb-40">
  535.         <img class="how-to-use-header-image" src="{{ asset('assets/img/default/banner/how-to-use-header.png') }}" alt="how-to-use-header">
  536.         <div class="how-to-use-header mr-40">
  537.           <div class="title-base-subtitle">
  538.             <img src="{{ asset('assets/img/default/icons/icon-how-to-use.svg') }}" alt="How to Use" class="title-base-icon">
  539.             <span>チャージ方法</span>
  540.           </div>
  541.           <h2 class="title-base-title">HOW TO USE</h2>
  542.         </div>
  543.         <a href="{{ url('users_guide') }}" class="btn-primary">
  544.           <span>ご利用ガイドをみる</span>
  545.           <img src="{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}" alt="Arrow" class="btn-arrow-black">
  546.         </a>
  547.       </div>
  550.     </div>
  551.     <div class="how-to-use-slider container-1200">
  552.       <div class="swiper howToUseSwiper" id="howToUseSwiperId">
  553.         <div class="swiper-wrapper">
  554.           <!-- Slide 1 -->
  555.           <div class="swiper-slide">
  556.             <div class="step-card">
  557.               <div class="step-card__header">
  558.                 <div class="step-card__badge">STEP01</div>
  559.                 <h3 class="step-card__title">届いたその日から、すぐに使える</h3>
  560.               </div>
  561.               <div class="step-card__image">
  562.                 <img src="{{ asset('assets/img/default/banner/slider-1.png') }}" alt="Step 1">
  563.               </div>
  564.               <p class="step-card__description">初回購入時にデータがセットになっているため、端末が届いたら電源を入れるだけですぐにインターネットをご利用いただけます。面倒な開通手続きは一切ありません。</p>
  565.             </div>
  566.           </div>
  568.           <!-- Slide 2 -->
  569.           <div class="swiper-slide">
  570.             <div class="step-card">
  571.               <div class="step-card__header">
  572.                 <div class="step-card__badge">STEP02</div>
  573.                 <h3 class="step-card__title">データ残量はいつでも確認</h3>
  574.               </div>
  575.               <div class="step-card__image">
  576.                 <img src="{{ asset('assets/img/default/banner/slider-2.png') }}" alt="Step 2">
  577.               </div>
  578.               <p class="step-card__description">「あとどれくらい使えるかな？」と思ったら、24時間いつでもお客様専用の<a href="javascript:void(0);" onclick="linkToMypage()" class="">マイページ</a>で現在のデータ残量をご確認いただけます。</p>
  579.             </div>
  580.           </div>
  582.           <!-- Slide 3 -->
  583.           <div class="swiper-slide">
  584.             <div class="step-card">
  585.               <div class="step-card__header">
  586.                 <div class="step-card__badge">STEP03</div>
  587.                 <h3 class="step-card__title">オンラインで手軽に追加チャージ</h3>
  588.               </div>
  589.               <div class="step-card__image">
  590.                 <img src="{{ asset('assets/img/default/banner/slider-3.png') }}" alt="Step 3">
  591.               </div>
  592.               <p class="step-card__description">データ残量が少なくなってきたら、<a href="javascript:void(0);" onclick="linkToMypage()" class="">マイページ</a>から簡単に追加データを購入（チャージ）できます。お店へ行く必要もなく、すべてオンラインで完結します。</p>
  593.             </div>
  594.           </div>
  596.           <!-- Slide 4 -->
  597.           <div class="swiper-slide">
  598.             <div class="step-card">
  599.               <div class="step-card__header">
  600.                 <div class="step-card__badge">STEP04</div>
  601.                 <h3 class="step-card__title">購入後、待ち時間なしで即反映</h3>
  602.               </div>
  603.               <div class="step-card__image">
  604.                 <img src="{{ asset('assets/img/default/banner/slider-4.png') }}" alt="Step 4">
  605.               </div>
  606.               <p class="step-card__description">チャージしたデータは、購入手続き完了後すぐに反映されます。急にデータが必要になった時でも、待つことなくインターネットを使い続けられます。</p>
  607.             </div>
  608.           </div>
  609.         </div>
  610.       </div>
  612.       <!-- Navigation and Progress Bar -->
  614.       <div class="slider-controls">
  615.         <!-- Progress Bar -->
  616.         <div class="slider-progress">
  617.           <div class="slider-progress-bar"></div>
  618.         </div>
  620.         <!-- Navigation Buttons -->
  621.         <div class="slider-navigation">
  622.           <button class="slider-nav-btn slider-nav-prev">
  623.             <img src="{{ asset('assets/img/default/icons/icon-arrow-left-nav.svg') }}" alt="Previous">
  624.           </button>
  625.           <button class="slider-nav-btn slider-nav-next">
  626.             <img src="{{ asset('assets/img/default/icons/icon-arrow-right-nav.svg') }}" alt="Next">
  627.           </button>
  628.         </div>
  629.       </div>
  630.     </div>
  631.   </div>
  633.   <!-- my page section -->
  634.   <div class="my-page-section">
  635.     <div class="container-1200">
  636.       <div class="my-page-wrapper mt-120 mb-40">
  637.         <img class="my-page-header-image container-desktop" src="{{ asset('assets/img/default/banner/my-page-header.png') }}" alt="my-page-header" loading="lazy">
  638.         <div class="my-page-header mr-40">
  639.           <div class="title-base-subtitle">
  640.             <img src="{{ asset('assets/img/default/icons/icon-my-page.svg') }}" alt="My Page" class="title-base-icon" loading="lazy">
  641.             <span>マイページ機能について</span>
  642.           </div>
  643.           <h2 class="title-base-title">MY PAGE</h2>
  644.         </div>
  645.         <a href="{{ url('mypage') }}" class="btn-primary">
  646.           <span>マイページをみる</span>
  647.           <img src="{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}" alt="Arrow" class="btn-arrow-black" loading="lazy">
  648.         </a>
  649.       </div>
  650.        <div class="my-page-grid">
  651.          <!-- Card 1: ギガのリチャージ -->
  652.          <a class="my-page-card" onclick="linkToMypage()" href="javascript:void(0);">
  653.            <div class="my-page-card__image">
  654.              <img src="{{ asset('assets/img/default/banner/my-page-1.png') }}" alt="ギガのリチャージ" loading="lazy">
  655.            </div>
  656.            <div class="my-page-card__label">ギガのリチャージ</div>
  657.          </a>
  659.          <!-- Card 2: ギガ使用量、有効期間の確認 -->
  660.          <a class="my-page-card" onclick="linkToMypage()" href="javascript:void(0);">
  661.            <div class="my-page-card__image">
  662.              <img src="{{ asset('assets/img/default/banner/my-page-2.png') }}" alt="ギガ使用量、有効期間の確認" loading="lazy">
  663.            </div>
  664.            <div class="my-page-card__label">ギガ使用量、有効期間の確認</div>
  665.          </a>
  667.          <!-- Card 3: 購入情報の確認 -->
  668.          <a class="my-page-card" onclick="linkToHistoryOrder()" href="javascript:void(0);">
  669.            <div class="my-page-card__image">
  670.              <img src="{{ asset('assets/img/default/banner/my-page-3.png') }}" alt="購入情報の確認" loading="lazy">
  671.            </div>
  672.            <div class="my-page-card__label">購入情報の確認</div>
  673.          </a>
  675.          <!-- Card 4: サポート -->
  676.          <a class="my-page-card" href="{{ url('contact') }}">
  677.            <div class="my-page-card__image">
  678.              <img src="{{ asset('assets/img/default/banner/my-page-4.png') }}" alt="サポート" loading="lazy">
  679.            </div>
  680.            <div class="my-page-card__label">サポート</div>
  681.          </a>
  682.        </div>
  683.     </div>
  684.     <img src="{{ asset('assets/img/default/banner/my-page-header.png') }}" alt="My Page" class="my-page-header-mobile container-mobile" loading="lazy">
  685.   </div>
  687.   <!-- SPECIFICATIONS SECTION -->
  688.   <div class="specifications-section">
  689.     <div class="container-1200">
  690.       <div class="specifications-header mt-120 mb-40">
  691.         <div class="title-base-subtitle">
  692.           <img src="{{ asset('assets/img/default/icons/icon-specifications.svg') }}" alt="Specifications" class="title-base-icon" loading="lazy">
  693.           <span>商品スペック・仕様</span>
  694.         </div>
  695.         <h2 class="title-base-title">SPECIFICATIONS</h2>
  696.       </div>
  697.       <div class="specifications-wrapper">
  698.          <div class="specifications-left">
  699.            <div class="specifications-left-table mb-80">
  700.              <!-- Table Header -->
  701.              <div class="spec-table-header">
  702.                <h3>端末スペック</h3>
  703.              </div>
  705.              <div class="spec-table-top">
  706.                 <div class="spec-table-top-item spec-table-top-item-active" data-id="mr1">
  707.                   <div class="spec-table-top-item-text">MR1</div>
  708.                 </div>
  709.                 <div class="spec-table-top-item" data-id="u20">
  710.                   <div class="spec-table-top-item-text">U20</div>
  711.                 </div>
  712.                 {# TODO: tạm ẩn U3
  713.                 <div class="spec-table-top-item" data-id="u3">
  714.                   <div class="spec-table-top-item-text">U3</div>
  715.                 </div>
  716.                 #}
  717.              </div>
  719.              <!-- Table Body -->
  720.              <div class="spec-table-body" style="display: flex;" id="spec_mr1">
  721.               {% set specs = [
  722.                 { label: '最大接続数', value: '10台 (推奨5台)' },
  723.                 { label: 'サイズ', value: '125×68×12mm' },
  724.                 { label: '重量', value: '約133g' },
  725.                 { label: 'バッテリー', value: '3000mAh' },
  726.                 { label: '連続通信時間', value: '約13時間' },
  727.                 { label: '最大通信速度', value: '50Mbps/150Mbps' },
  728.                 { label: 'USBポート', value: 'Type-C（充電用）' },
  729.                 { label: 'WCDMA', value: 'バンド 1/2/4/5/8/19' },
  730.                 { label: 'GSM', value: '850/900/1800/1900' },
  731.                 { label: 'Wi-Fi', value: 'IEEE802.11b/g/n' }
  732.               ] %}
  733.                {% for spec in specs %}
  734.                  <div class="spec-table-row{% if spec.isLast is defined and spec.isLast %} spec-table-row--last{% endif %}">
  735.                    <div class="spec-table-label">{{ spec.label }}</div>
  736.                    <div class="spec-table-value">{{ spec.value|raw }}</div>
  737.                  </div>
  738.                {% endfor %}
  739.              </div>
  741.              <div class="spec-table-body" style="display: none;" id="spec_u20">
  742.               {% set specs = [
  743.                 { label: '最大接続数', value: '8台（推奨5台）' },
  744.                 { label: 'サイズ', value: '120×64×12mm' },
  745.                 { label: '重量', value: '約112g' },
  746.                 { label: 'バッテリー', value: '3000mAh' },
  747.                 { label: '連続通信時間', value: '約13時間' },
  748.                 { label: '最大通信速度', value: '50Mbps/150Mbps' },
  749.                 { label: 'USBポート', value: 'Type-C（充電用）' },
  750.                 { label: 'WCDMA', value: 'バンド 1/2/4/5/8/' },
  751.                 { label: 'GSM', value: '850/900/1800/1900' },
  752.                 { label: 'Wi-Fi', value: 'IEEE802.11b/g/n' }
  753.               ] %}
  754.                {% for spec in specs %}
  755.                  <div class="spec-table-row{% if spec.isLast is defined and spec.isLast %} spec-table-row--last{% endif %}">
  756.                    <div class="spec-table-label">{{ spec.label }}</div>
  757.                    <div class="spec-table-value">{{ spec.value|raw }}</div>
  758.                  </div>
  759.                {% endfor %}
  760.              </div>
  762.              <div class="spec-table-body" style="display: none;" id="spec_u3">
  763.               {% set specs = [
  764.                 { label: '最大接続数', value: '10台 (推奨 5台)' },
  765.                 { label: 'サイズ', value: '126×68×12mm' },
  766.                 { label: '重量', value: '約125 g' },
  767.                 { label: 'バッテリー', value: '3000mAh' },
  768.                 { label: '連続通信時間', value: '約12時間' },
  769.                 { label: '最大通信速度', value: '50Mbps/150Mbps' },
  770.                 { label: 'USBポート', value: 'Type-C (充電用)' },
  771.                 { label: 'WCDMA', value: 'バンド 1/2/4/5/6/8/9/19' },
  772.                 { label: 'GSM', value: '850/900/1800/1900' },
  773.                 { label: 'Wi-Fi', value: 'IEEE802.11b/g/n' }
  774.               ] %}
  775.                {% for spec in specs %}
  776.                  <div class="spec-table-row{% if spec.isLast is defined and spec.isLast %} spec-table-row--last{% endif %}">
  777.                    <div class="spec-table-label">{{ spec.label }}</div>
  778.                    <div class="spec-table-value">{{ spec.value|raw }}</div>
  779.                  </div>
  780.                {% endfor %}
  781.              </div>
  782.            </div>
  783.            <div class="specifications-left-image container-desktop-768">
  784.             <img src="{{ asset('assets/img/default/banner/specifi.png') }}" alt="Specifications Left Image" loading="lazy">
  785.            </div>
  786.          </div>
  787.          <div class="specifications-right">
  788.           <div class="specifications-top-image container-mobile-768 container-1200-full-mobile">
  789.             <img src="{{ asset('assets/img/default/banner/specifi_left.png') }}" alt="Specifications Left Image" loading="lazy">
  790.           </div>
  792.            <!-- Product Card 1: MR1 -->
  793.            <div class="product-card">
  794.              <div class="product-card__image">
  795.                <img src="{{ asset('assets/img/default/banner/spec_1.png') }}" alt="MR1" loading="lazy">
  796.                <div class="product-card__label">MR1</div>
  797.              </div>
  798.              <p class="product-card__description">契約不要、月額料金0円の国内外利用可能なクラウドSIM型Wi-Fiルーター３大キャリアに対応し、選べるギガをチャージして利用できます。</p>
  799.            </div>
  801.            <!-- Product Card 2: U20 -->
  802.            <div class="product-card">
  803.              <div class="product-card__image">
  804.                <img src="{{ asset('assets/img/default/banner/spec_2.png') }}" alt="U20" loading="lazy">
  805.                <div class="product-card__label">U20</div>
  806.              </div>
  807.              <p class="product-card__description">MR1に比べ価格が安く、液晶をなくした事で軽量、薄型を実現し、持ち運びが便利になりました。5GB〜100GBからギガを選び、期間は50日、100日、365日から選べます。30日間無制限プランも用意しています。</p>
  808.            </div>
  810.            <!-- Product Card 3: U3 -->
  811.            {# <div class="product-card">
  812.              <div class="product-card__image">
  813.                <img src="{{ asset('assets/img/default/banner/spec_3.png') }}" alt="U3" loading="lazy">
  814.                <div class="product-card__label">U3</div>
  815.              </div>
  816.              <p class="product-card__description">U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。</p>
  817.            </div> #}
  819.            <div class="specifications-bottom-image container-mobile-768 container-1200-full-mobile">
  820.             <img src="{{ asset('assets/img/default/banner/specifi_right.png') }}" alt="Specifications Right Image" loading="lazy">
  821.           </div>
  822.          </div>
  823.       </div>
  824.     </div>
  825.   </div>
  827.   <div class="text_footer_top">
  828.     <img src="{{ asset('assets/img/default/footer/footer-text-top.png') }}" alt="Footer Text Top" loading="lazy">
  829.   </div>
  831. {% endblock %}