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="title-base-header mb-40">
  314.       <div class="title-base-subtitle">
  315.         <img src="{{ asset('assets/img/default/icons/icon-ranking.svg') }}" alt="Ranking" class="title-base-icon" loading="lazy">
  316.         <span>注目の商品</span>
  317.       </div>
  318.       <h2 class="title-base-title">RANKING</h2>
  319.     </div>
  321.     {% if top_ranking_products|length > 0 %}
  322.       {% set firstProduct = top_ranking_products[0] %}
  323.       {% set otherProducts = top_ranking_products|slice(1, 4) %}
  325.       <!-- Main Ranking Item (No.1) -->
  326.       <div class="ranking-main">
  327.         <div class="ranking-card ranking-card--large">
  328.           <a href="{{ url('product_detail', {'id': firstProduct.id}) }}">
  329.             <div class="ranking-card__image">
  330.               <img src="{{ asset(firstProduct.main_list_image|no_image_product, 'save_image') }}" alt="{{ firstProduct.name }}" loading="lazy">
  331.             </div>
  332.           </a>
  333.           <div class="ranking-card__badge">No.1</div>
  334.           <div class="ranking-card__favorite">
  335.             <img src="{{ asset('assets/img/default/icons/icon-heart.svg') }}" alt="Favorite" loading="lazy">
  336.           </div>
  337.         </div>
  339.         <div class="ranking-info">
  340.           <h3 class="ranking-info__title" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ firstProduct.name }}">{{ firstProduct.name }}</h3>
  341.           <div class="ranking-info__price">
  342.             <span class="price-symbol">¥</span>
  343.             <span class="price-amount">
  344.               {% if firstProduct.hasProductClass %}
  345.                 {% if firstProduct.getPrice02IncTaxMin == firstProduct.getPrice02IncTaxMax %}
  346.                   {{ firstProduct.getPrice02IncTaxMin|number_format }}
  347.                 {% else %}
  348.                   {{ firstProduct.getPrice02IncTaxMin|number_format }} ～ {{ firstProduct.getPrice02IncTaxMax|number_format }}
  349.                 {% endif %}
  350.               {% else %}
  351.                 {{ firstProduct.getPrice02IncTaxMin|number_format }}
  352.               {% endif %}
  353.             </span>
  354.             <span class="price-tax">(税込)</span>
  355.           </div>
  356.           <!-- View More Button -->
  357.           <div class="ranking-view-more">
  358.             <a href="{{ url('product_list') }}" class="btn-primary">
  359.               <span>商品一覧をみる</span>
  360.               <img src="{{ asset('assets/img/default/icons/icon-arrow-right.svg') }}" alt="Arrow" class="btn-arrow" loading="lazy">
  361.             </a>
  362.           </div>
  363.         </div>
  364.       </div>
  366.       <!-- Divider Line -->
  367.       <div class="ranking-divider"></div>
  369.       <!-- Other Ranking Items (No.2 - No.5) -->
  370.       <div class="ranking-grid">
  371.         {% for Product in otherProducts %}
  372.           <div class="ranking-item">
  373.             <div class="ranking-card ranking-card--small">
  374.               <a href="{{ url('product_detail', {'id': Product.id}) }}">
  375.                 <div class="ranking-card__image">
  376.                   <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" loading="lazy">
  377.                 </div>
  378.               </a>
  379.               <div class="ranking-card__badge">No.{{ loop.index + 1 }}</div>
  380.               <div class="ranking-card__favorite">
  381.                 <img src="{{ asset('assets/img/default/icons/icon-heart.svg') }}" alt="Favorite" loading="lazy">
  382.               </div>
  383.             </div>
  384.             <div class="ranking-item__info">
  385.               <a href="{{ url('product_detail', {'id': Product.id}) }}">
  386.                 <h4 class="ranking-item__title" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ Product.name }}">{{ Product.name }}</h4>
  387.               </a>
  388.               <div class="ranking-item__price">
  389.                 <span class="price-symbol">¥</span>
  390.                 <span class="price-amount">
  391.                   {% if Product.hasProductClass %}
  392.                     {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  393.                       {{ Product.getPrice02IncTaxMin|number_format }}
  394.                     {% else %}
  395.                       {{ Product.getPrice02IncTaxMin|number_format }} ～ {{ Product.getPrice02IncTaxMax|number_format }}
  396.                     {% endif %}
  397.                   {% else %}
  398.                     {{ Product.getPrice02IncTaxMin|number_format }}
  399.                   {% endif %}
  400.                 </span>
  401.                 <span class="price-tax">(税込)</span>
  402.               </div>
  403.             </div>
  404.           </div>
  405.         {% endfor %}
  406.       </div>
  407.     {% else %}
  408.       <!-- Fallback nếu không có sản phẩm ranking -->
  409.     {% endif %}
  410.   </div>
  411.   </div>
  413.   <!-- banner 2 -->
  414.   <div class="banner-2">
  415.   </div>
  417.   <!-- news -->
  418.   <div class="news-section">
  419.     <div class="container-1200">
  420.       <div class="news-header">
  421.         <div class="news-title-wrapper">
  422.           <div class="title-base-subtitle" style="margin-top: 16px;">
  423.             <img src="{{ asset('assets/img/default/icons/icon-news.svg') }}" alt="News" class="title-base-icon" loading="lazy">
  424.             <span>お知らせ</span>
  425.           </div>
  426.           <h2 class="title-base-title news-title-desktop">NEWS</h2>
  427.           <a class="btn-primary news-list-btn news-list-btn-desktop" href="{{ url('news_list') }}">
  428.             <span>お知らせ一覧をみる</span>
  429.             <img src="{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}" alt="Arrow" class="btn-arrow-black" loading="lazy">
  430.           </a>
  431.         </div>
  433.         <div class="news-list-wrapper pt-0" id="news-list-id">
  434.             {% set NewsList = repository('Eccube\\Entity\\News').getList()|slice(0, 5) %}
  435.             <div class="news-list">
  436.             {% for News in NewsList %}
  437.                 <a href="{{ url('news_detail', {id: News.id}) }}" class="news-item">
  438.                   <div class="news-date container-desktop">{{ News.publishDate|date('Y.m.d') }}</div>
  439.                   <div class="news-title container-desktop text-black">
  440.                     <span class="text-black">{{ News.title }}</span>
  441.                   </div>
  442.                   <div class="news-wrapper-mobile container-mobile">
  443.                     <div class="news-date news-date-mobile">{{ News.publishDate|date('Y.m.d') }}</div>
  444.                     <div class="news-title news-title-mobile text-black">
  445.                       <span class="text-black">{{ News.title }}</span>
  446.                     </div>
  447.                   </div>
  448.                   <div class="news-arrow">
  449.                     <img src="{{ asset('assets/img/default/icons/icon-arrow-gray.svg') }}" alt="Arrow">
  450.                   </div>
  451.                 </a>
  452.             {% else %}
  453.                 <p class="no-news">お知らせはありません。</p>
  454.             {% endfor %}
  455.             </div>
  456.         </div>
  458.         <a class="btn-primary news-list-btn news-list-btn-mobile" href="{{ url('news_list') }}">
  459.           <span>お知らせ一覧をみる</span>
  460.           <img src="{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}" alt="Arrow" class="btn-arrow-black" loading="lazy">
  461.         </a>
  462.       </div>
  464.     </div>
  465.   </div>
  467.   <!-- feature section -->
  468.   <div class="feature-section">
  469.     <div class="container-1200">
  470.       <div class="feature-header mt-120 mb-40">
  471.         <div class="title-base-subtitle">
  472.           <img src="{{ asset('assets/img/default/icons/icon-features.svg') }}" alt="Feature" class="title-base-icon" loading="lazy">
  473.           <span>サービスの特徴</span>
  474.         </div>
  475.         <h2 class="title-base-title">FEATURES</h2>
  476.       </div>
  479.     </div>
  480.     <div class="container-1200 container-1200-desktop">
  481.       <div class="feature-grid">
  482.       <!-- Feature Card 1 -->
  483.       <div class="feature-card">
  484.         <div class="feature-card__icon">
  485.           <img src="{{ asset('assets/img/default/icons/icon-yen.svg') }}" alt="Yen" loading="lazy">
  486.         </div>
  487.         <div class="feature-card__content">
  488.           <div class="feature-card__badge">月額費用なし</div>
  489.           <p class="feature-card__description">必要な時だけチャージして使用可能</p>
  490.         </div>
  491.       </div>
  493.       <!-- Feature Card 2 -->
  494.       <div class="feature-card">
  495.         <div class="feature-card__icon">
  496.           <img src="{{ asset('assets/img/default/icons/icon-clock.svg') }}" alt="Clock" loading="lazy">
  497.         </div>
  498.         <div class="feature-card__content">
  499.           <div class="feature-card__badge">即時チャージ対応</div>
  500.           <p class="feature-card__description">マイページから24時間いつでも即チャージ</p>
  501.         </div>
  502.       </div>
  504.       <!-- Feature Card 3 -->
  505.       <div class="feature-card">
  506.         <div class="feature-card__icon">
  507.           <img src="{{ asset('assets/img/default/icons/icon-easy.svg') }}" alt="Easy" loading="lazy">
  508.         </div>
  509.         <div class="feature-card__content">
  510.           <div class="feature-card__badge">簡単すぐ使える</div>
  511.           <p class="feature-card__description">面倒な手続き不要、届いたらすぐ利用可能</p>
  512.         </div>
  513.       </div>
  515.       <!-- Feature Card 4 -->
  516.       <div class="feature-card">
  517.         <div class="feature-card__icon">
  518.           <img src="{{ asset('assets/img/default/icons/icon-world.svg') }}" alt="World" loading="lazy">
  519.         </div>
  520.         <div class="feature-card__content">
  521.           <div class="feature-card__badge">世界130カ国対応</div>
  522.           <p class="feature-card__description">海外でもそのまま使える</p>
  523.         </div>
  524.       </div>
  526.       <!-- Star Icon -->
  527.       <div class="feature-star">
  528.         <img src="{{ asset('assets/img/default/icons/icon-star.svg') }}" alt="Star" loading="lazy">
  529.       </div>
  530.       </div>
  531.     </div>
  532.   </div>
  534.   <!-- how to use section -->
  535.   <div class="how-to-use-section">
  536.     <div class="container-1200">
  537.       <div class="how-to-use-wrapper mt-120 mb-40">
  538.         <img class="how-to-use-header-image" src="{{ asset('assets/img/default/banner/how-to-use-header.png') }}" alt="how-to-use-header">
  539.         <div class="how-to-use-header mr-40">
  540.           <div class="title-base-subtitle">
  541.             <img src="{{ asset('assets/img/default/icons/icon-how-to-use.svg') }}" alt="How to Use" class="title-base-icon">
  542.             <span>チャージ方法</span>
  543.           </div>
  544.           <h2 class="title-base-title">HOW TO USE</h2>
  545.         </div>
  546.         <a href="{{ url('users_guide') }}" class="btn-primary">
  547.           <span>ご利用ガイドをみる</span>
  548.           <img src="{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}" alt="Arrow" class="btn-arrow-black">
  549.         </a>
  550.       </div>
  553.     </div>
  554.     <div class="how-to-use-slider container-1200">
  555.       <div class="swiper howToUseSwiper" id="howToUseSwiperId">
  556.         <div class="swiper-wrapper">
  557.           <!-- Slide 1 -->
  558.           <div class="swiper-slide">
  559.             <div class="step-card">
  560.               <div class="step-card__header">
  561.                 <div class="step-card__badge">STEP01</div>
  562.                 <h3 class="step-card__title">届いたその日から、すぐに使える</h3>
  563.               </div>
  564.               <div class="step-card__image">
  565.                 <img src="{{ asset('assets/img/default/banner/slider-1.png') }}" alt="Step 1">
  566.               </div>
  567.               <p class="step-card__description">初回購入時にデータがセットになっているため、端末が届いたら電源を入れるだけですぐにインターネットをご利用いただけます。面倒な開通手続きは一切ありません。</p>
  568.             </div>
  569.           </div>
  571.           <!-- Slide 2 -->
  572.           <div class="swiper-slide">
  573.             <div class="step-card">
  574.               <div class="step-card__header">
  575.                 <div class="step-card__badge">STEP02</div>
  576.                 <h3 class="step-card__title">データ残量はいつでも確認</h3>
  577.               </div>
  578.               <div class="step-card__image">
  579.                 <img src="{{ asset('assets/img/default/banner/slider-2.png') }}" alt="Step 2">
  580.               </div>
  581.               <p class="step-card__description">「あとどれくらい使えるかな？」と思ったら、24時間いつでもお客様専用の<a href="javascript:void(0);" onclick="linkToMypage()" class="">マイページ</a>で現在のデータ残量をご確認いただけます。</p>
  582.             </div>
  583.           </div>
  585.           <!-- Slide 3 -->
  586.           <div class="swiper-slide">
  587.             <div class="step-card">
  588.               <div class="step-card__header">
  589.                 <div class="step-card__badge">STEP03</div>
  590.                 <h3 class="step-card__title">オンラインで手軽に追加チャージ</h3>
  591.               </div>
  592.               <div class="step-card__image">
  593.                 <img src="{{ asset('assets/img/default/banner/slider-3.png') }}" alt="Step 3">
  594.               </div>
  595.               <p class="step-card__description">データ残量が少なくなってきたら、<a href="javascript:void(0);" onclick="linkToMypage()" class="">マイページ</a>から簡単に追加データを購入（チャージ）できます。お店へ行く必要もなく、すべてオンラインで完結します。</p>
  596.             </div>
  597.           </div>
  599.           <!-- Slide 4 -->
  600.           <div class="swiper-slide">
  601.             <div class="step-card">
  602.               <div class="step-card__header">
  603.                 <div class="step-card__badge">STEP04</div>
  604.                 <h3 class="step-card__title">購入後、待ち時間なしで即反映</h3>
  605.               </div>
  606.               <div class="step-card__image">
  607.                 <img src="{{ asset('assets/img/default/banner/slider-4.png') }}" alt="Step 4">
  608.               </div>
  609.               <p class="step-card__description">チャージしたデータは、購入手続き完了後すぐに反映されます。急にデータが必要になった時でも、待つことなくインターネットを使い続けられます。</p>
  610.             </div>
  611.           </div>
  612.         </div>
  613.       </div>
  615.       <!-- Navigation and Progress Bar -->
  617.       <div class="slider-controls">
  618.         <!-- Progress Bar -->
  619.         <div class="slider-progress">
  620.           <div class="slider-progress-bar"></div>
  621.         </div>
  623.         <!-- Navigation Buttons -->
  624.         <div class="slider-navigation">
  625.           <button class="slider-nav-btn slider-nav-prev">
  626.             <img src="{{ asset('assets/img/default/icons/icon-arrow-left-nav.svg') }}" alt="Previous">
  627.           </button>
  628.           <button class="slider-nav-btn slider-nav-next">
  629.             <img src="{{ asset('assets/img/default/icons/icon-arrow-right-nav.svg') }}" alt="Next">
  630.           </button>
  631.         </div>
  632.       </div>
  633.     </div>
  634.   </div>
  636.   <!-- my page section -->
  637.   <div class="my-page-section">
  638.     <div class="container-1200">
  639.       <div class="my-page-wrapper mt-120 mb-40">
  640.         <img class="my-page-header-image container-desktop" src="{{ asset('assets/img/default/banner/my-page-header.png') }}" alt="my-page-header" loading="lazy">
  641.         <div class="my-page-header mr-40">
  642.           <div class="title-base-subtitle">
  643.             <img src="{{ asset('assets/img/default/icons/icon-my-page.svg') }}" alt="My Page" class="title-base-icon" loading="lazy">
  644.             <span>マイページ機能について</span>
  645.           </div>
  646.           <h2 class="title-base-title">MY PAGE</h2>
  647.         </div>
  648.         <a href="{{ url('mypage') }}" class="btn-primary">
  649.           <span>マイページをみる</span>
  650.           <img src="{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}" alt="Arrow" class="btn-arrow-black" loading="lazy">
  651.         </a>
  652.       </div>
  653.        <div class="my-page-grid">
  654.          <!-- Card 1: ギガのリチャージ -->
  655.          <div class="my-page-card">
  656.            <div class="my-page-card__image">
  657.              <img src="{{ asset('assets/img/default/banner/my-page-1.png') }}" alt="ギガのリチャージ" loading="lazy">
  658.            </div>
  659.            <div class="my-page-card__label">ギガのリチャージ</div>
  660.          </div>
  662.          <!-- Card 2: ギガ使用量、有効期間の確認 -->
  663.          <div class="my-page-card">
  664.            <div class="my-page-card__image">
  665.              <img src="{{ asset('assets/img/default/banner/my-page-2.png') }}" alt="ギガ使用量、有効期間の確認" loading="lazy">
  666.            </div>
  667.            <div class="my-page-card__label">ギガ使用量、有効期間の確認</div>
  668.          </div>
  670.          <!-- Card 3: 購入情報の確認 -->
  671.          <div class="my-page-card">
  672.            <div class="my-page-card__image">
  673.              <img src="{{ asset('assets/img/default/banner/my-page-3.png') }}" alt="購入情報の確認" loading="lazy">
  674.            </div>
  675.            <div class="my-page-card__label">購入情報の確認</div>
  676.          </div>
  678.          <!-- Card 4: サポート -->
  679.          <div class="my-page-card">
  680.            <div class="my-page-card__image">
  681.              <img src="{{ asset('assets/img/default/banner/my-page-4.png') }}" alt="サポート" loading="lazy">
  682.            </div>
  683.            <div class="my-page-card__label">サポート</div>
  684.          </div>
  685.        </div>
  686.     </div>
  687.     <img src="{{ asset('assets/img/default/banner/my-page-header.png') }}" alt="My Page" class="my-page-header-mobile container-mobile" loading="lazy">
  688.   </div>
  690.   <!-- SPECIFICATIONS SECTION -->
  691.   <div class="specifications-section">
  692.     <div class="container-1200">
  693.       <div class="specifications-header mt-120 mb-40">
  694.         <div class="title-base-subtitle">
  695.           <img src="{{ asset('assets/img/default/icons/icon-specifications.svg') }}" alt="Specifications" class="title-base-icon" loading="lazy">
  696.           <span>商品スペック・仕様</span>
  697.         </div>
  698.         <h2 class="title-base-title">SPECIFICATIONS</h2>
  699.       </div>
  700.       <div class="specifications-wrapper">
  701.          <div class="specifications-left">
  702.            <div class="specifications-left-table mb-80">
  703.              <!-- Table Header -->
  704.              <div class="spec-table-header">
  705.                <h3>端末スペック</h3>
  706.              </div>
  708.              <div class="spec-table-top">
  709.                 <div class="spec-table-top-item spec-table-top-item-active" data-id="mr1">
  710.                   <div class="spec-table-top-item-text">MR1</div>
  711.                 </div>
  712.                 <div class="spec-table-top-item" data-id="u20">
  713.                   <div class="spec-table-top-item-text">U20</div>
  714.                 </div>
  715.                 {# TODO: tạm ẩn U3
  716.                 <div class="spec-table-top-item" data-id="u3">
  717.                   <div class="spec-table-top-item-text">U3</div>
  718.                 </div>
  719.                 #}
  720.              </div>
  722.              <!-- Table Body -->
  723.              <div class="spec-table-body" style="display: flex;" id="spec_mr1">
  724.               {% set specs = [
  725.                 { label: '最大接続数', value: '10台 (推奨5台)' },
  726.                 { label: 'サイズ', value: '125×68×12mm' },
  727.                 { label: '重量', value: '約133g' },
  728.                 { label: 'バッテリー', value: '3000mAh' },
  729.                 { label: '連続通信時間', value: '約13時間' },
  730.                 { label: '最大通信速度', value: '50Mbps/150Mbps' },
  731.                 { label: 'USBポート', value: 'Type-C（充電用）' },
  732.                 { label: 'WCDMA', value: 'バンド 1/2/4/5/8/19' },
  733.                 { label: 'GSM', value: '850/900/1800/1900' },
  734.                 { label: 'Wi-Fi', value: 'IEEE802.11b/g/n' }
  735.               ] %}
  736.                {% for spec in specs %}
  737.                  <div class="spec-table-row{% if spec.isLast is defined and spec.isLast %} spec-table-row--last{% endif %}">
  738.                    <div class="spec-table-label">{{ spec.label }}</div>
  739.                    <div class="spec-table-value">{{ spec.value|raw }}</div>
  740.                  </div>
  741.                {% endfor %}
  742.              </div>
  744.              <div class="spec-table-body" style="display: none;" id="spec_u20">
  745.               {% set specs = [
  746.                 { label: '最大接続数', value: '8台（推奨5台）' },
  747.                 { label: 'サイズ', value: '120×64×12mm' },
  748.                 { label: '重量', value: '約112g' },
  749.                 { label: 'バッテリー', value: '3000mAh' },
  750.                 { label: '連続通信時間', value: '約13時間' },
  751.                 { label: '最大通信速度', value: '50Mbps/150Mbps' },
  752.                 { label: 'USBポート', value: 'Type-C（充電用）' },
  753.                 { label: 'WCDMA', value: 'バンド 1/2/4/5/8/' },
  754.                 { label: 'GSM', value: '850/900/1800/1900' },
  755.                 { label: 'Wi-Fi', value: 'IEEE802.11b/g/n' }
  756.               ] %}
  757.                {% for spec in specs %}
  758.                  <div class="spec-table-row{% if spec.isLast is defined and spec.isLast %} spec-table-row--last{% endif %}">
  759.                    <div class="spec-table-label">{{ spec.label }}</div>
  760.                    <div class="spec-table-value">{{ spec.value|raw }}</div>
  761.                  </div>
  762.                {% endfor %}
  763.              </div>
  765.              <div class="spec-table-body" style="display: none;" id="spec_u3">
  766.               {% set specs = [
  767.                 { label: '最大接続数', value: '10台 (推奨 5台)' },
  768.                 { label: 'サイズ', value: '126×68×12mm' },
  769.                 { label: '重量', value: '約125 g' },
  770.                 { label: 'バッテリー', value: '3000mAh' },
  771.                 { label: '連続通信時間', value: '約12時間' },
  772.                 { label: '最大通信速度', value: '50Mbps/150Mbps' },
  773.                 { label: 'USBポート', value: 'Type-C (充電用)' },
  774.                 { label: 'WCDMA', value: 'バンド 1/2/4/5/6/8/9/19' },
  775.                 { label: 'GSM', value: '850/900/1800/1900' },
  776.                 { label: 'Wi-Fi', value: 'IEEE802.11b/g/n' }
  777.               ] %}
  778.                {% for spec in specs %}
  779.                  <div class="spec-table-row{% if spec.isLast is defined and spec.isLast %} spec-table-row--last{% endif %}">
  780.                    <div class="spec-table-label">{{ spec.label }}</div>
  781.                    <div class="spec-table-value">{{ spec.value|raw }}</div>
  782.                  </div>
  783.                {% endfor %}
  784.              </div>
  785.            </div>
  786.            <div class="specifications-left-image container-desktop-768">
  787.             <img src="{{ asset('assets/img/default/banner/specifi.png') }}" alt="Specifications Left Image" loading="lazy">
  788.            </div>
  789.          </div>
  790.          <div class="specifications-right">
  791.           <div class="specifications-top-image container-mobile-768 container-1200-full-mobile">
  792.             <img src="{{ asset('assets/img/default/banner/specifi_left.png') }}" alt="Specifications Left Image" loading="lazy">
  793.           </div>
  795.            <!-- Product Card 1: MR1 -->
  796.            <div class="product-card">
  797.              <div class="product-card__image">
  798.                <img src="{{ asset('assets/img/default/banner/spec_1.png') }}" alt="MR1" loading="lazy">
  799.                <div class="product-card__label">MR1</div>
  800.              </div>
  801.              <p class="product-card__description">契約不要、月額料金0円の国内外利用可能なクラウドSIM型Wi-Fiルーター３大キャリアに対応し、選べるギガをチャージして利用できます。</p>
  802.            </div>
  804.            <!-- Product Card 2: U20 -->
  805.            <div class="product-card">
  806.              <div class="product-card__image">
  807.                <img src="{{ asset('assets/img/default/banner/spec_2.png') }}" alt="U20" loading="lazy">
  808.                <div class="product-card__label">U20</div>
  809.              </div>
  810.              <p class="product-card__description">MR1に比べ価格が安く、液晶をなくした事で軽量、薄型を実現し、持ち運びが便利になりました。5GB〜100GBからギガを選び、期間は50日、100日、365日から選べます。30日間無制限プランも用意しています。</p>
  811.            </div>
  813.            <!-- Product Card 3: U3 -->
  814.            {# <div class="product-card">
  815.              <div class="product-card__image">
  816.                <img src="{{ asset('assets/img/default/banner/spec_3.png') }}" alt="U3" loading="lazy">
  817.                <div class="product-card__label">U3</div>
  818.              </div>
  819.              <p class="product-card__description">U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。</p>
  820.            </div> #}
  822.            <div class="specifications-bottom-image container-mobile-768 container-1200-full-mobile">
  823.             <img src="{{ asset('assets/img/default/banner/specifi_right.png') }}" alt="Specifications Right Image" loading="lazy">
  824.           </div>
  825.          </div>
  826.       </div>
  827.     </div>
  828.   </div>
  830.   <div class="text_footer_top">
  831.     <img src="{{ asset('assets/img/default/footer/footer-text-top.png') }}" alt="Footer Text Top" loading="lazy">
  832.   </div>
  834. {% endblock %}