app/template/default/Guide/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {# Set custom variables for default frame #}
  4. {% set title = custom_params.page_title|default('Guide') %}
  5. {% set subtitle = custom_params.page_description|default('') %}
  6. {% set body_class = custom_params.custom_css_class|default('guide-page') %}
  8. {% block stylesheet %}
  9.     <link rel="stylesheet" href="{{ asset('assets/css/guide.css') }}">
  10. {% endblock %}
  12. {% block main %}
  13.   <!-- breadcrumb section -->
  14.   <div class="breadcrumb-section">
  15.     <div class="container-1360 border-box px-40">
  16.       <nav class="breadcrumb">
  17.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  18.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  19.         <a href="{{ url('users_guide') }}" class="breadcrumb__item text-black">ご利用ガイド</a>
  20.       </nav>
  21.     </div>
  22.   </div>
  24.   <!-- guide section -->
  25.   <div class="container-1200">
  26.     <div class="guide-wrapper">
  27.       <!-- Guide Title Section -->
  28.       <div class="top-header-title-section">
  29.         <div class="top-header-icon-text">
  30.           <div class="top-header-icon-text">
  31.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  32.               <path d="M10.0029 0.996338C12.4879 0.996572 14.5028 3.0113 14.5029 5.49634C14.5029 5.96914 14.4282 6.42468 14.293 6.85278C14.3151 6.85262 14.3372 6.85181 14.3594 6.85181C15.6124 6.85181 16.7991 7.11621 17.7031 7.59106C18.7348 8.13332 19.3047 8.90428 19.3047 9.76001V17.9426C19.3047 18.3149 19.0079 18.6145 18.6387 18.6145H17.1123C17.0222 18.6145 16.9319 18.594 16.8477 18.5588C16.2052 18.2834 15.3418 18.0959 14.3594 18.0959C12.6443 18.096 11.2806 18.667 10.8359 19.2971C10.8243 19.3119 10.8124 19.3264 10.8008 19.344C10.6061 19.5841 10.3129 19.7248 10.002 19.7249C9.69096 19.7249 9.39704 19.5843 9.20215 19.344C9.19053 19.3264 9.17861 19.3118 9.16699 19.2971C8.72195 18.6671 7.35857 18.0959 5.64355 18.0959C4.66679 18.096 3.80358 18.2834 3.1582 18.5588C3.07692 18.594 2.98654 18.6145 2.89648 18.6145H1.36426C0.99815 18.6144 0.699219 18.3148 0.699219 17.9426V9.76001C0.699219 8.9042 1.26872 8.13333 2.30078 7.59106C3.20474 7.11626 4.39069 6.85186 5.64355 6.85181C5.6659 6.85181 5.68863 6.85262 5.71094 6.85278C5.5758 6.42477 5.50293 5.96902 5.50293 5.49634C5.50305 3.01116 7.51772 0.996338 10.0029 0.996338ZM5.64355 8.13013C4.60577 8.13018 3.70187 8.33513 3.04785 8.63989C2.37045 8.95344 1.96387 9.36733 1.96387 9.76001V17.1399C2.07137 17.0726 2.18465 17.008 2.30078 16.9465C2.88505 16.6389 3.58595 16.4221 4.34766 16.3049C4.76606 16.2434 5.20185 16.2073 5.64355 16.2073C6.10576 16.2073 6.56295 16.2463 6.99902 16.3137C7.73435 16.4338 8.41467 16.6476 8.98438 16.9465C9.10351 17.008 9.21677 17.0726 9.32129 17.1399V9.94458C8.11866 9.76193 7.07261 9.10374 6.38086 8.16724C6.14408 8.14378 5.89752 8.13013 5.64355 8.13013ZM14.3594 8.13013C14.1059 8.13013 13.8602 8.14312 13.624 8.16626C12.9319 9.10359 11.8854 9.76232 10.6816 9.94458V17.1399C10.7863 17.0725 10.9004 17.0081 11.0195 16.9465C11.5573 16.6624 12.1999 16.4545 12.8975 16.3342C13.3655 16.2522 13.8566 16.2073 14.3594 16.2073C14.8826 16.2073 15.3944 16.255 15.877 16.343C16.5543 16.4661 17.1769 16.6711 17.7031 16.9465C17.8193 17.008 17.9327 17.0725 18.04 17.1399V9.76001C18.04 9.37319 17.6414 8.96223 16.9785 8.64868C16.3216 8.34092 15.4087 8.13013 14.3594 8.13013ZM14.3594 14.1125C15.2954 14.1125 16.2003 14.2687 16.959 14.5559L16.9561 15.1887C16.2263 14.8693 15.3159 14.6985 14.3594 14.6985C13.3537 14.6985 12.3916 14.8897 11.6475 15.2385V15.1887L11.6504 14.5959C12.4293 14.2825 13.3799 14.1125 14.3594 14.1125ZM5.64453 14.1125C6.62416 14.1126 7.57147 14.2833 8.35059 14.594V15.2356C7.60345 14.8869 6.64728 14.6985 5.64453 14.6985C4.68235 14.6985 3.7579 14.8723 3.02832 15.1975L3.03027 14.5618C3.79198 14.2687 4.70254 14.1125 5.64453 14.1125ZM14.3594 11.928C15.2983 11.928 16.2052 12.0861 16.9639 12.3733V13.0061C16.2342 12.6867 15.3185 12.5139 14.3594 12.5139C13.3564 12.5139 12.3935 12.7042 11.6494 13.053V12.4143C12.4285 12.1008 13.3797 11.928 14.3594 11.928ZM5.64355 11.928C6.62313 11.928 7.57051 12.1008 8.34961 12.4114V13.05C7.60249 12.7044 6.64624 12.5139 5.64355 12.5139C4.68432 12.5139 3.76276 12.6896 3.0332 13.009L3.03516 12.3762C3.79389 12.0862 4.70454 11.928 5.64355 11.928ZM5.64355 9.74731C6.6261 9.74731 7.57433 9.91702 8.35352 10.2307V10.8704C7.60645 10.5216 6.64939 10.3333 5.64355 10.3333C4.68712 10.3333 3.76865 10.507 3.03906 10.8264L3.04199 10.1897C3.80072 9.9026 4.70754 9.74736 5.64355 9.74731ZM14.3604 9.74731C15.302 9.74736 16.2122 9.90257 16.9736 10.1926L16.9707 10.8293C16.2382 10.5069 15.3225 10.3333 14.3604 10.3333C13.3573 10.3333 12.3946 10.5216 11.6533 10.8704V10.2307C12.4325 9.91701 13.3806 9.74735 14.3604 9.74731ZM10.001 6.8313C9.78104 6.83133 9.5981 6.90129 9.45312 7.04126C9.30842 7.1812 9.23633 7.36153 9.23633 7.5813C9.23642 7.8011 9.30639 7.98327 9.44629 8.12817C9.59126 8.27315 9.77604 8.34592 10.001 8.34595C10.221 8.34595 10.4038 8.27317 10.5488 8.12817C10.6936 7.9833 10.7655 7.801 10.7656 7.5813C10.7656 7.36146 10.6936 7.18122 10.5488 7.04126C10.4038 6.90126 10.221 6.8313 10.001 6.8313ZM9.26562 2.64575L9.31152 3.89087L9.53613 6.26099H10.4658L10.6914 3.89087L10.7363 2.64575H9.26562Z" fill="#00A854"/>
  33.             </svg>
  35.             <span class="top-header-text">ご利用ガイド</span>
  36.           </div>
  37.         </div>
  38.         <h1 class="top-header-title">USERS GUIDE</h1>
  39.       </div>
  41.       <!-- guide content section -->
  42.       <div class="guide-content-section">
  43.         <!-- Tab Navigation -->
  44.         <div class="guide-tabs-wrapper">
  45.           <div class="guide-tabs">
  46.             <a class="guide-tab" href="#charge">
  47.               <span class="guide-tab-text">チャージについて</span>
  48.               <div class="guide-tab-indicator"></div>
  49.             </a>
  50.             <a class="guide-tab" href="#warranty">
  51.               <span class="guide-tab-text">保証について</span>
  52.               <div class="guide-tab-indicator"></div>
  53.             </a>
  54.             <a class="guide-tab" href="#shipping">
  55.               <span class="guide-tab-text">配送について</span>
  56.               <div class="guide-tab-indicator"></div>
  57.             </a>
  58.             <a class="guide-tab" href="#order">
  59.               <span class="guide-tab-text">ご注文・お支払いについて</span>
  60.               <div class="guide-tab-indicator"></div>
  61.             </a>
  62.             <div id="guide-tab-content-id"></div>
  63.           </div>
  64.         </div>
  66.         <!-- Tab Content -->
  67.         <div class="guide-tab-content">
  68.           <!-- Charge Tab Content -->
  69.           <div class="guide-tab-panel" id="charge">
  70.             <div class="guide-section-header">
  71.               <h2 class="guide-section-title">チャージ（データ追加）について</h2>
  72.             </div>
  74.             <div class="guide-steps">
  75.               <!-- Step 1 -->
  76.               <div class="guide-step">
  77.                 <div class="guide-step-header">
  78.                   <div class="guide-step-info">
  79.                     <div class="guide-step-badge">STEP01</div>
  80.                     <h3 class="guide-step-title">届いたその日から、すぐに使える</h3>
  81.                   </div>
  82.                 </div>
  83.                 <div class="guide-step-image">
  84.                   <img src="{{ asset('assets/img/default/banner/slider-tiny-1.png') }}" alt="Step 1" />
  85.                 </div>
  86.                 <p class="guide-step-description">
  87.                   初回購入時にデータがセットになっているため、端末が届いたら電源を入れるだけですぐにインターネットをご利用いただけます。面倒な開通手続きは一切ありません。
  88.                 </p>
  89.               </div>
  91.               <!-- Step 2 -->
  92.               <div class="guide-step">
  93.                 <div class="guide-step-header">
  94.                   <div class="guide-step-info">
  95.                     <div class="guide-step-badge">STEP02</div>
  96.                     <h3 class="guide-step-title">データ残量はいつでも確認</h3>
  97.                   </div>
  98.                 </div>
  99.                 <div class="guide-step-image">
  100.                   <img src="{{ asset('assets/img/default/banner/slider-tiny-2.png') }}" alt="Step 2" />
  101.                 </div>
  102.                 <p class="guide-step-description">
  103.                   「あとどれくらい使えるかな？」と思ったら、24時間いつでもお客様専用の<a href="{{ url('mypage') }}" class="">マイページ</a>で現在のデータ残量をご確認いただけます。
  104.                 </p>
  105.               </div>
  107.               <!-- Step 3 -->
  108.               <div class="guide-step">
  109.                 <div class="guide-step-header">
  110.                   <div class="guide-step-info">
  111.                     <div class="guide-step-badge">STEP03</div>
  112.                     <h3 class="guide-step-title">オンラインで手軽に追加チャージ</h3>
  113.                   </div>
  114.                 </div>
  115.                 <div class="guide-step-image">
  116.                   <img src="{{ asset('assets/img/default/banner/slider-tiny-3.png') }}" alt="Step 3" />
  117.                 </div>
  118.                 <p class="guide-step-description">
  119.                   データ残量が少なくなってきたら、<a href="{{ url('mypage') }}" class="">マイページ</a>から簡単に追加データを購入（チャージ）できます。お店へ行く必要もなく、すべてオンラインで完結します。
  120.                 </p>
  121.               </div>
  123.               <!-- Step 4 -->
  124.               <div class="guide-step">
  125.                 <div class="guide-step-header">
  126.                   <div class="guide-step-info">
  127.                     <div class="guide-step-badge">STEP04</div>
  128.                     <h3 class="guide-step-title">購入後、待ち時間なしで即反映</h3>
  129.                   </div>
  130.                 </div>
  131.                 <div class="guide-step-image">
  132.                   <img src="{{ asset('assets/img/default/banner/slider-tiny-4.png') }}" alt="Step 4" />
  133.                 </div>
  134.                 <p class="guide-step-description">
  135.                   チャージしたデータは、購入手続き完了後すぐに反映されます。急にデータが必要になった時でも、待つことなくインターネットを使い続けられます。
  136.                 </p>
  137.               </div>
  138.             </div>
  139.           </div>
  141.           <!-- Warranty Tab Content -->
  142.           <div class="guide-tab-panel" id="warranty">
  143.             <div class="guide-section-header">
  144.               <h2 class="guide-section-title">保証について</h2>
  145.             </div>
  147.             <div class="guide-info-sections">
  148.               <!-- Warranty Coverage -->
  149.               <div class="guide-info-section">
  150.                 <div class="guide-info-header">
  151.                   <div class="guide-info-icon"></div>
  152.                   <h3 class="guide-info-title">保証対応について</h3>
  153.                 </div>
  154.                 <p class="guide-info-description">
  155.                   以下のケースに該当する場合は同等品と交換、もしくは、返金対応とさせて頂きます。
  156.                 </p>
  157.                 <div class="guide-info-list">
  158.                   <div class="guide-info-item">
  159.                     <div class="guide-info-bullet"></div>
  160.                     <p class="guide-info-text">商品到着後30日以内にご連絡をいただき、弊社の方で動作不良が確認できた場合。</p>
  161.                   </div>
  162.                 </div>
  163.               </div>
  165.               <!-- Warranty Exclusions -->
  166.               <div class="guide-info-section">
  167.                 <div class="guide-info-header">
  168.                   <div class="guide-info-icon"></div>
  169.                   <h3 class="guide-info-title">保証対象外について</h3>
  170.                 </div>
  171.                 <div class="guide-info-list">
  172.                   <div class="guide-info-item">
  173.                     <div class="guide-info-bullet"></div>
  174.                     <p class="guide-info-text">バッテリーの経年劣化を理由とした不具合（バッテリーの状態は弊社では対応いたしかねます）</p>
  175.                   </div>
  176.                   <div class="guide-info-item">
  177.                     <div class="guide-info-bullet"></div>
  178.                     <p class="guide-info-text">色や傷、汚れなどが思っていた状態と違ったなどの理由</p>
  179.                   </div>
  180.                   <div class="guide-info-item">
  181.                     <div class="guide-info-bullet"></div>
  182.                     <p class="guide-info-text">ご申告頂いた故障内容が弊社で確認出来ない場合</p>
  183.                   </div>
  184.                   <div class="guide-info-item">
  185.                     <div class="guide-info-bullet"></div>
  186.                     <p class="guide-info-text">商品を配送中のトラブルによる故障や紛失（配送中のトラブルに関しては、配送業者へご連絡をお願い致します）</p>
  187.                   </div>
  188.                   <div class="guide-info-item">
  189.                     <div class="guide-info-bullet"></div>
  190.                     <p class="guide-info-text">ご購入時に商品に付属している付属品（箱、説明書、ケーブル、充電器など）を紛失されている場合</p>
  191.                   </div>
  192.                   <div class="guide-info-item">
  193.                     <div class="guide-info-bullet"></div>
  194.                     <p class="guide-info-text">お客様のご都合、過失による場合</p>
  195.                   </div>
  196.                 </div>
  197.               </div>
  198.             </div>
  199.           </div>
  201.           <!-- Shipping Tab Content -->
  202.           <div class="guide-tab-panel" id="shipping">
  203.             <div class="guide-section-header">
  204.               <h2 class="guide-section-title">配送について</h2>
  205.             </div>
  207.             <div class="guide-info-sections">
  208.               <!-- Shipping Fee -->
  209.               <div class="guide-info-section">
  210.                 <div class="guide-info-header">
  211.                   <div class="guide-info-icon"></div>
  212.                   <h3 class="guide-info-title">送料</h3>
  213.                 </div>
  214.                 <p class="guide-info-description">
  215.                   送料無料<br>
  216.                   ※同一の住所からの注文が複数の場合、同梱させていただく場合があります。
  217.                 </p>
  218.               </div>
  220.               <!-- Shipping Method -->
  221.               <div class="guide-info-section">
  222.                 <div class="guide-info-header">
  223.                   <div class="guide-info-icon"></div>
  224.                   <h3 class="guide-info-title">配送業者・方法</h3>
  225.                 </div>
  226.                 <p class="guide-info-description">
  227.                   ヤマト運輸／宅急便 または ネコポス（ポスト投函）
  228.                 </p>
  229.               </div>
  231.               <!-- Shipping Options -->
  232.               <div class="guide-info-section">
  233.                 <div class="guide-info-header">
  234.                   <div class="guide-info-icon"></div>
  235.                   <h3 class="guide-info-title">配送オプション</h3>
  236.                 </div>
  237.                 <p class="guide-info-description">
  238.                   日付指定などが行えるか
  239.                 </p>
  240.               </div>
  242.               <!-- Shipping Timeline -->
  243.               <div class="guide-info-section">
  244.                 <div class="guide-info-header">
  245.                   <div class="guide-info-icon"></div>
  246.                   <h3 class="guide-info-title">出荷目安</h3>
  247.                 </div>
  248.                 <p class="guide-info-description">
  249.                   平日15時までのご注文で即日発送いたします。お届けの目安は本州であれば翌日、北海道は翌々日、沖縄は3日程度です。
  250.                 </p>
  251.               </div>
  252.             </div>
  253.           </div>
  255.           <!-- Order Tab Content -->
  256.           <div class="guide-tab-panel" id="order">
  257.             <div class="guide-section-header">
  258.               <h2 class="guide-section-title">ご注文・お支払いについて</h2>
  259.             </div>
  261.             <div class="guide-info-sections">
  262.               <!-- Credit Card -->
  263.               <div class="guide-info-section">
  264.                 <div class="guide-info-header">
  265.                   <div class="guide-info-icon"></div>
  266.                   <h3 class="guide-info-title">クレジットカード</h3>
  267.                 </div>
  268.                 <p class="guide-info-description">
  269.                   VISA、MASTER、JCB、AMEX、ダイナースクラブのクレジットカードがご利用可能です。
  270.                 </p>
  271.               </div>
  273.               <!-- PayPay -->
  274.               <div class="guide-info-section">
  275.                 <div class="guide-info-header">
  276.                   <div class="guide-info-icon"></div>
  277.                   <h3 class="guide-info-title">PayPay</h3>
  278.                 </div>
  279.                 <p class="guide-info-description">
  280.                   お支払いにはPayPayのアカウントが必要となります。
  281.                 </p>
  282.               </div>
  284.               <!-- Convenience Store -->
  285.               <div class="guide-info-section">
  286.                 <div class="guide-info-header">
  287.                   <div class="guide-info-icon"></div>
  288.                   <h3 class="guide-info-title">コンビニ決済</h3>
  289.                 </div>
  290.                 <p class="guide-info-description">
  291.                   コンビニ決済は、セブンイレブン、ファミリーマート、ローソン、セイコーマート、ミニストップでお支払いが可能です。
  292.                 </p>
  293.               </div>
  295.               <!-- Cash on Delivery -->
  296.               <div class="guide-info-section">
  297.                 <div class="guide-info-header">
  298.                   <div class="guide-info-icon"></div>
  299.                   <h3 class="guide-info-title">代金引換</h3>
  300.                 </div>
  301.                 <div class="guide-info-description">
  302.                   <p>代金引換をお選びの際は代金引換手数料として別途下記の料金が必要となります。</p>
  303.                   <p>代金引換手数料：+500円<br>商品代金が30,000円未満の場合、個数口に関係なく1口加算</p>
  304.                   <p>代金引換手数料：+1,000円<br>商品代金が30,000円を超える場合、個数口に関係なく1口加算</p>
  305.                 </div>
  306.               </div>
  308.               <!-- Bank Transfer -->
  309.               <div class="guide-info-section">
  310.                 <div class="guide-info-header">
  311.                   <div class="guide-info-icon"></div>
  312.                   <h3 class="guide-info-title">銀行振込</h3>
  313.                 </div>
  314.                 <div class="guide-info-description">
  315.                   <p>前払いのみです。お振込みの手数料はお客様のご負担となります。</p>
  316.                   <p>【振込先】<br>
  317.                   銀行名：PayPay銀行<br>
  318.                   支店名：ビジネス営業部<br>
  319.                   口座種別：普通預金<br>
  320.                   口座番号：1909151<br>
  321.                   口座名義：カ) シーグラム</p>
  322.                 </div>
  323.       </div>
  325.               <!-- Large Orders -->
  326.               <div class="guide-info-section">
  327.                 <div class="guide-info-header">
  328.                   <div class="guide-info-icon"></div>
  329.                   <h3 class="guide-info-title">30万円以上のご注文について</h3>
  330.                 </div>
  331.                 <p class="guide-info-description">
  332.                   ご注文1回あたりの合計金額が30万円以上の場合、決済手続きが行えません。<br>
  333.                   合計金額を30万円未満に調整のうえ、お手続きをお願いいたします。
  334.                 </p>
  335.               </div>
  336.             </div>
  337.           </div>
  338.         </div>
  339.     </div>
  340.     </div>
  341.   </div>
  342. {% endblock %}