app/template/default/FAQ/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('よくある質問') %}
  5. {% set body_class = custom_params.custom_css_class|default('faq-page') %}
  8. {% block stylesheet %}
  9.     <link rel="stylesheet" href="{{ asset('assets/css/faq.css') }}">
  10. {% endblock %}
  12. {% block main %}
  14.   <!-- breadcrumb section -->
  15.   <div class="breadcrumb-section">
  16.     <div class="container-1360 border-box px-40">
  17.       <nav class="breadcrumb">
  18.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  19.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  20.         <a href="{{ url('faq') }}" class="breadcrumb__item text-black">よくある質問</a>
  21.       </nav>
  22.     </div>
  23.   </div>
  25.   <!-- faq section -->
  26.   <div class="container-1200">
  27.     <div class="faq-wrapper">
  28.       <!-- FAQ Title Section -->
  29.       <div class="top-header-title-section">
  30.         <div class="top-header-icon-text">
  31.           <div class="top-header-icon-text">
  32.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  33.               <path d="M3.30811 3.25757C6.5109 -0.440162 12.1045 -0.837808 15.8022 2.36499C19.4997 5.56783 19.8992 11.1632 16.6948 14.8591C15.296 16.4731 13.4401 17.4552 11.4868 17.7869C11.2808 17.8218 11.1201 17.9889 11.1021 18.197L10.9976 19.3982C10.9624 19.8026 10.4481 19.952 10.2017 19.6296L8.94678 17.9841C8.875 17.89 8.76789 17.8282 8.65088 17.8103C7.05636 17.5667 5.50942 16.8858 4.20068 15.7517C0.50299 12.5489 0.103733 6.95362 3.30811 3.25757ZM9.93604 4.87866C7.78875 4.87878 6.3092 6.41203 6.30908 9.05249C6.30908 9.82743 6.43786 10.5156 6.67432 11.0994C7.21958 12.4432 8.58608 13.2719 10.0356 13.2283C10.0406 13.2283 10.0471 13.2289 10.0552 13.2273C10.9163 13.2004 11.7284 12.8652 12.3433 12.3074L13.7427 13.2126C13.7897 13.2428 13.8524 13.2294 13.8843 13.1824L14.4058 12.3757C14.436 12.3288 14.4225 12.2643 14.3755 12.2341L13.0601 11.3835C13.1197 11.2707 13.1762 11.1549 13.2231 11.0339C13.4429 10.4652 13.564 9.80063 13.564 9.05249C13.5638 6.42367 12.0835 4.87866 9.93604 4.87866ZM9.93506 6.26929C11.141 6.26955 11.9076 7.3114 11.9077 9.05249C11.9077 9.60789 11.8345 10.0957 11.7007 10.5056L11.1255 10.1335C11.0786 10.1037 11.015 10.1171 10.9849 10.1638L10.4634 10.9714C10.4333 11.0184 10.4467 11.0819 10.4937 11.1121L11.104 11.5066C10.7898 11.8054 10.395 11.9664 9.93506 11.9666C8.72877 11.9666 7.96143 10.8712 7.96143 9.05249C7.96152 7.30951 8.73052 6.26929 9.93506 6.26929Z" fill="#00A854"/>
  34.             </svg>
  36.             <span class="top-header-text">よくある質問</span>
  37.           </div>
  38.         </div>
  39.         <h1 class="top-header-title">FAQ</h1>
  40.       </div>
  42.       <!-- faq content section -->
  43.       <div class="faq-content-section">
  44.         <!-- Tab Navigation -->
  45.         <div class="faq-tabs-wrapper">
  46.           <div class="faq-tabs">
  47.             <a class="faq-tab active" href="#usage">
  48.               <span class="faq-tab-text">利用について</span>
  49.               <div class="faq-tab-indicator"></div>
  50.             </a>
  51.             <a class="faq-tab" href="#purchase">
  52.               <span class="faq-tab-text">ご購入・配送・発送について</span>
  53.               <div class="faq-tab-indicator"></div>
  54.             </a>
  55.             <a class="faq-tab" href="#charge">
  56.               <span class="faq-tab-text">追加チャージについて</span>
  57.               <div class="faq-tab-indicator"></div>
  58.             </a>
  59.             <a class="faq-tab" href="#trouble">
  60.               <span class="faq-tab-text">故障・不良について</span>
  61.               <div class="faq-tab-indicator"></div>
  62.             </a>
  63.           </div>
  64.         </div>
  66.         <!-- Tab Content -->
  67.         <div class="faq-tab-content">
  68.           <!-- 利用について -->
  69.           <div class="faq-section" id="usage">
  70.             <div class="faq-title-section">
  71.               <h2 class="faq-title">利用について</h2>
  72.             </div>
  73.             <div class="faq-accordion" id="faq-accordion-1"></div>
  74.           </div>
  76.           <!-- ご購入・配送・発送について -->
  77.           <div class="faq-section" id="purchase">
  78.             <div class="faq-title-section">
  79.               <h2 class="faq-title">ご購入・配送・発送について</h2>
  80.             </div>
  81.             <div class="faq-accordion" id="faq-accordion-2"></div>
  82.           </div>
  84.           <!-- 追加チャージについて -->
  85.           <div class="faq-section" id="charge">
  86.             <div class="faq-title-section">
  87.               <h2 class="faq-title">追加チャージについて</h2>
  88.             </div>
  89.             <div class="faq-accordion" id="faq-accordion-3"></div>
  90.           </div>
  92.           <!-- 故障・不良について -->
  93.           <div class="faq-section" id="trouble">
  94.             <div class="faq-title-section">
  95.               <h2 class="faq-title">故障・不良について</h2>
  96.             </div>
  97.             <div class="faq-accordion" id="faq-accordion-4"></div>
  98.           </div>
  99.         </div>
  100.       </div>
  102.     </div>
  104.   </div>
  106.   <script>
  107.     const mypageLink = `<a href="javascript:void(0);" onclick="linkToMypage()">マイページ</a>`;
  108.     const contactLink = `<a href="{{ url('contact') }}">お問い合わせ</a>`;
  110.     const faqData1 = [
  111.       {
  112.         question: "契約や解約・返却、その他の手続きは必要ですか？",
  113.         answer: "すべて不要です。<br>ギガ付きでお届けするため、端末をご購入いただくだけでご利用いただけます。"
  114.       },
  115.       {
  116.         question: "月額費用や、購入時の本人確認証は必要ですか？",
  117.         answer: "必要ありません。<br>契約不要の買切り商品のため、未成年の方や、スマホの契約ができない方もご利用可能です。"
  118.       },
  119.       {
  120.         question: "有効期間はいつからですか？",
  121.         answer: "WiFiルーターの電源を入れてから開始します。<br>追加チャージの場合は現在お使いのギガがなくなるか、有効期間を過ぎてから新たに有効期間カウントされます。"
  122.       },
  123.       {
  124.         question: "ギガを使い切る、有効期間を過ぎるとどうなりますか？",
  125.         answer: `ギガを使い切るか、有効期間を過ぎるとインターネットがご利用できなくなります。<br>${mypageLink}で追加ギガをご購入いただくと再度インターネットがご利用いただけます。<br>※ギガがチャージされた後本体の再起動をしてください。`
  126.       },
  127.       {
  128.         question: "ギガの残量の確認はできますか？",
  129.         answer: `${mypageLink}でギガ残量や有効期間の確認ができます。`
  130.       },
  131.       {
  132.         question: "IMEI番号が知りたい",
  133.         answer: "液晶付きモデルのMR1の場合<br>・ルーターの電源を入れる<br>・3回横にスライドする<br>・【端末情報】にIMEI番号(3551から始まる15桁の数字)の記載があります。<br><br>液晶なしモデルのU20の場合<br>背面のシールにIMEI番号(8617から始まる15桁の数字)の記載があります。"
  134.       },
  135.       {
  136.         question: "法人での利用を検討しています",
  137.         answer: `請求書、納品書の発行可能です。<br>数台から数百台のご購入にも対応しておりますので${contactLink}ください。`
  138.       },
  139.       {
  140.         question: "海外で使えますか？",
  141.         answer: "【MR1】【U20】は136の国と地域に対応しています。<br>渡航先の国を指定して海外ギガを購入できます。<br>現地で電源オンするとGPSで国を特定し日本と同じようにご利用可能です。"
  142.       },
  143.       {
  144.         question: "SIMを入れた場合、クラウドSIMとどちらが優先されますか？",
  145.         answer: "端末の設定で手動で切替が可能です。物理SIM/クラウドSIMの自動切換えはされません。"
  146.       },
  147.       {
  148.         question: "保証はありますか？",
  149.         answer: "・新品：1年保証<br>・アウトレット品、Amazon整備品：6か月(180日)<br>※自然故障のみ対象となり、新品は修理、その他は交換対応となります。"
  150.       }
  151.     ];
  153.     const faqData2 = [
  154.       {
  155.         question: "領収書は発行できますか？",
  156.         answer: "会員登録をして商品をご購入いただいた場合は、マイページの「購入履歴」より領収書を発行いただけます。<br>会員登録をされずにご購入される場合で、領収書をご希望の方は、ご注文時のお問い合わせ欄に「領収書希望」とご記入ください。<br>また、宛名にご希望がある場合は、あわせてお問い合わせ欄へご記入ください。<br>特にご指定がない場合は、ご注文者様のお名前を宛名として発行いたします。"
  157.       },
  158.       {
  159.         question: "どのようにいつ届きますか？",
  160.         answer: "追加チャージは配送商品はございません。<br>モバイルルーター本体をご購入いただいた場合はヤマト運輸の宅急便かネコポス(ポスト投函)でお届けします。<br>送料は当社負担いたします。<br>平日15時までに決済完了したご注文は当日発送します。<br>お届けの目安は本州であれば翌日、北海道は翌々日、沖縄は3～5日程度です。"
  161.       },
  162.       {
  163.         question: "配送状況を確認できますか？",
  164.         answer: `発送完了メールに記載の問い合わせ番号でご確認ください。<br>ヤマト運輸<br><a href="https://toi.kuronekoyamato.co.jp/cgi-bin/tneko" target="_blank" rel="noopener noreferrer">https://toi.kuronekoyamato.co.jp/cgi-bin/tneko</a>`
  165.       },
  166.       {
  167.         question: "配送時間の指定はできますか？",
  168.         answer: "指定はできません。<br>宅急便の場合、ご不在の場合は不在票が届きますのでヤマト運輸にご連絡お願いします。"
  169.       }
  170.     ];
  172.     const faqData3 = [
  173.       {
  174.         question: "追加ギガチャージはどうやってやりますか？",
  175.         answer: `${mypageLink}でご希望のギガ数をお選びいただき購入可能です。<br>ギガ数と有効期間を選択していただき、IMEI番号の入力をお願いします。<br>お支払いはクレジットカード、銀行振込(バーチャル口座)、コンビニ払い、PayPayに対応しています。`
  176.       },
  177.       {
  178.         question: "追加チャージはいつ反映されますか？",
  179.         answer: "決済完了後、最短15分以内に追加ギガが反映されます。<br>※銀行振込(バーチャル口座)・コンビニ払いは、反映までに数時間程かかる場合がございます。"
  180.       },
  181.       {
  182.         question: "ギガがまだ残っている状態でも追加ギガを購入できますか？",
  183.         answer: "ご購入可能です。<br>ストック分として反映されます。"
  184.       }
  185.     ];
  187.     const faqData4 = [
  188.       {
  189.         question: "インターネット通信が遅い・つながらない",
  190.         answer: "以下の改善策をお試しください。<br>1. WiFiルーター・スマートフォン等の端末の再起動<br>2. スマートフォン等のWiFi設定の削除の後、再設定<br>3. WiFiルーターのネットワーク最適化または初期化<br>お試しいただき改善されない場合はお問い合わせください。"
  191.       },
  192.       {
  193.         question: "電源が入らない・充電が出来ない",
  194.         answer: `パソコン等のUSBではなく、直接コンセントから30分程度充電していただき、30秒以上長押ししてください。<br>お試しいただき改善されない場合は${contactLink}ください。`
  195.       },
  196.       {
  197.         question: "急に通信ができなくなった",
  198.         answer: `ご利用ギガの有効期間、もしくは使い切った可能性があります。<br>${mypageLink}にてご確認ください。<br>ギガがない場合は、追加ギガをチャージすると再度利用できます。<br>解決しない場合は${contactLink}ください。`
  199.       },
  200.       {
  201.         question: "ギガの減りが早い気がする",
  202.         answer: "通信量が増える原因になりやすい操作は以下の通りです。<br>ご利用の端末設定もあわせてご確認ください。<br>・OSやアプリの自動アップデート<br>・高画質での動画視聴<br>・写真や動画のバックアップ<br><br>対策として、以下の設定・操作をお勧めします。<br>・接続機器の各種設定変更<br>・使わない時間は端末の電源を切る（長押しで完全OFF）"
  203.       }
  204.     ];
  206.     function randerFaqItem(faqData) {
  207.       return `<div class="faq-item">
  208.             <div class="faq-question">
  209.               <div class="faq-question-content">
  210.                 <div class="faq-question-label">
  211.                   <span class="faq-label-text">質問</span>
  212.                 </div>
  213.                 <div class="faq-question-text">${faqData.question}</div>
  214.               </div>
  215.             <button class="faq-toggle-btn">
  216.               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  217.               <path d="M7.99805 3.23145L7.99707 3.23242L7.99609 3.23145L1.96289 9.26563L3.4707 10.7734L7.99707 6.24707L12.5234 10.7734L14.0313 9.26562L7.99805 3.23145Z" fill="black"/>
  218.               </svg>
  219.             </button>
  220.             </div>
  221.             <div class="faq-answer">
  222.               <div class="faq-answer-content">
  223.                 <div class="faq-answer-label">
  224.                   <span class="faq-label-text faq-label-text-white">回答</span>
  225.                 </div>
  226.                 <div class="faq-answer-text">
  227.                   <p>${faqData.answer}</p>
  228.                 </div>
  229.               </div>
  230.             </div>
  231.           </div>
  232.           `
  233.     }
  235.     function renderFaqSection(data, selector) {
  236.       const container = document.querySelector(selector);
  237.       data.forEach(item => {
  238.         container.innerHTML += randerFaqItem(item);
  239.       });
  240.     }
  242.     renderFaqSection(faqData1, '#faq-accordion-1');
  243.     renderFaqSection(faqData2, '#faq-accordion-2');
  244.     renderFaqSection(faqData3, '#faq-accordion-3');
  245.     renderFaqSection(faqData4, '#faq-accordion-4');
  247.     // FAQ Accordion Functionality
  248.     document.addEventListener('DOMContentLoaded', function() {
  249.       const faqItems = document.querySelectorAll('.faq-item');
  250.       const faqTabs = document.querySelectorAll('.faq-tab');
  251.       const faqSections = document.querySelectorAll('.faq-section');
  253.       faqItems.forEach(item => {
  254.         const question = item.querySelector('.faq-question');
  255.         const answer = item.querySelector('.faq-answer');
  257.         question.addEventListener('click', function() {
  258.           const isActive = item.classList.contains('active');
  260.           if (isActive) {
  261.             // Capture real height first so close doesn't stall on unused max-height
  262.             answer.style.maxHeight = answer.scrollHeight + 'px';
  263.             // Force reflow before collapsing
  264.             void answer.offsetHeight;
  265.             item.classList.remove('active');
  266.             answer.classList.remove('active');
  267.             answer.style.maxHeight = '0px';
  268.           } else {
  269.             item.classList.add('active');
  270.             answer.classList.add('active');
  271.             answer.style.maxHeight = answer.scrollHeight + 'px';
  272.           }
  273.         });
  275.         answer.addEventListener('transitionend', function(e) {
  276.           if (e.propertyName !== 'max-height') return;
  277.           if (item.classList.contains('active')) {
  278.             // Allow content to grow after open animation finishes
  279.             answer.style.maxHeight = 'none';
  280.           }
  281.         });
  282.       });
  284.       function setActiveTab(hash) {
  285.         faqTabs.forEach(tab => {
  286.           tab.classList.toggle('active', tab.getAttribute('href') === hash);
  287.         });
  288.       }
  290.       faqTabs.forEach(tab => {
  291.         tab.addEventListener('click', function(e) {
  292.           e.preventDefault();
  293.           const targetId = this.getAttribute('href');
  294.           const target = document.querySelector(targetId);
  295.           if (!target) return;
  297.           setActiveTab(targetId);
  298.           target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  299.           history.replaceState(null, '', targetId);
  300.         });
  301.       });
  303.       const observer = new IntersectionObserver((entries) => {
  304.         entries.forEach(entry => {
  305.           if (entry.isIntersecting) {
  306.             setActiveTab('#' + entry.target.id);
  307.           }
  308.         });
  309.       }, {
  310.         rootMargin: '-30% 0px -55% 0px',
  311.         threshold: 0
  312.       });
  314.       faqSections.forEach(section => observer.observe(section));
  316.       if (window.location.hash) {
  317.         setActiveTab(window.location.hash);
  318.       }
  319.     });
  320.   </script>
  321. {% endblock %}