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