app/template/default/Help/guide.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set sections = [
  3. 'ご注文手順',
  4. '送料・配送方法',
  5. 'お支払い方法',
  6. '会員登録について',
  7. '名入れサービス',
  8. '返品・交換・キャンセル・追加',
  9. '領収書の発行',
  10. '運営会社について',
  11. '海洋散骨について',
  12. ] %}
  13. {% block stylesheet %}
  14.     <style>
  15.         .heading:after {
  16.             transition: transform 0.4s;
  17.         }
  18.         .heading.is-open:after {
  19.             content: '-';
  20.             transform: rotate(-180deg);
  21.         }
  22.     </style>
  23. {% endblock %}
  24. {% block javascript %}
  25.     <script>
  26.         $(function () {
  27. $('.js-toggle-parent').click(function () {
  28. $(this).toggleClass('is-open');
  29. $(this).next('.js-toggle-child').slideToggle();
  30. });
  31. });
  32.     </script>
  33. {% endblock %}
  34. {% set breadcrumbs = [ {'name': 'ご利用ガイド'}] %}
  35. {% block main %}
  36.     <section class="px-6 pb-10 pt-[7.5rem] md:pt-20 md:pb-1 text-black">
  37.         <div class="mx-auto w-full max-w-[63rem]">
  38.             <h1 class="flex items-start gap-4 md:gap-2">
  39.                 <span class="block h-[7.5rem] w-0.5 bg-gradient-to-b from-[#ADAAA6] md:h-16 md:w-px"></span>
  40.                 <p class="text-[2rem] font-light leading-normal tracking-widest md:text-xl">
  41.                     ご利用ガイド</p>
  42.             </h1>
  43.         </div>
  44.     </section>
  45.     {{ include('Block/breadcrumb.twig') }}
  46.     <section class="px-6 pb-[7.5rem] md:pb-20 text-black">
  47.         <div class="mx-auto w-full max-w-[37rem] text-sm leading-loose">
  48.             <p class="mb-20">こちらをご覧になっても解決しない場合は、<a href="/contact" class="text-red underline hover">お問い合わせフォーム</a>よりお気軽にお問い合わせください。</p>
  49.             {% for section in sections %}
  50.                 <section class="grid {% if loop.last %} border-b border-black{% endif  %} ">
  51.                     <h2 id={{section}} class="heading flex justify-between items-center py-6 text-lg leading-normal font-medium border-t border-black after:content-['+'] js-toggle-parent hover">{{section}}</h2>
  52.                     <div class="hidden js-toggle-child">
  53.                         <div class="pb-6">
  54.                             {% if loop.index == 1 %}
  55.                                 <p>商品は以下の手順でご注文いただけます。</p>
  56.                                 <ul class="mt-6 grid [counter-reset:count]">
  57.                                     <li class="grid gap-3.5 py-6 [counter-increment:count] border-t border-[#F0EDE9]">
  58.                                         <h3 class="text-base leading-[1.8] font-medium before:content-[counter(count)'.']">
  59.                                             商品詳細ページにアクセスし、注文したい商品をカートに入れます。</h3>
  60.                                         <p>お位牌は1度につき1点のみカートに追加できます。2個以上注文したい場合は、1度カートに商品を入れてから商品詳細ページに戻り次の商品をカートに入れてください。</p>
  61.                                     </li>
  62.                                     <li class="grid gap-3.5 py-6 [counter-increment:count] border-t border-[#F0EDE9]">
  63.                                         <h3 class="text-base leading-[1.8] font-medium before:content-[counter(count)'.']">
  64.                                             カート内の商品をご確認の上、「レジへ進む」をクリックします。</h3>
  65.                                         <p>名入れを行う場合、ご注文の際に商品ページで名入れ「あり」をご選択ください。ご注文後に送信される「名入れについて」のメールにご希望の文言をご記入いただき、ご返信いただく流れとなります。<br>詳しくは
  66.                                         <a href="#名入れサービス" class="text-red underline hover">名入れサービス</a>をご覧ください。</p>
  67.                                     </li>
  68.                                     <li class="grid gap-3.5 py-6 [counter-increment:count] border-t border-[#F0EDE9]">
  69.                                         <h3 class="text-base leading-[1.8] font-medium before:content-[counter(count)'.']">
  70.                                             ログイン・会員登録を行なってください。</h3>
  71.                                         <p>会員登録せずに「ゲスト」として注文も可能です。<br>会員登録して頂くと、お得なクーポンが発行され(クーポンを発行していない時期もございます)、次回から住所などの入力が不要になるなど、便利な機能をご利用いただけます。ぜひご登録ください。
  72.                                         </p>
  73.                                     </li>
  74.                                     <li class="grid gap-3.5 py-6 [counter-increment:count] border-t border-[#F0EDE9]">
  75.                                         <h3 class="text-base leading-[1.8] font-medium before:content-[counter(count)'.']">
  76.                                             ご注文手続き画面で、お支払い方法・お届け先・クーポンの利用有無などを記入し、金額を確認の上、注文を確定させてください。</h3>
  77.                                         <p>お届け日のご指定はできません。<br>*お位牌のないご注文の場合<br>ご注文から【3~7日前後】で発送させて頂きます。
  78.                                         <br>*お位牌などの「名入れ」があるご注文の場合<br>【名入れ原稿確定から約3週間程度】お時間を頂きます。
  79.                                         <br>※長期休業の際は、通常よりもお時間を頂戴する場合がございます。<br>ご注文後、自動配信で注文確認メールを送信しております。12時間たってもメールが受信できない方はお電話(03-5579-5671)でご連絡ください。
  80.                                         </p>
  81.                                     </li>
  82.                                 </ul>
  83.                             {% elseif loop.index == 2 %}
  84.                                 <div class="grid gap-6">
  85.                                     <img alt="送料" src="{{asset('assets/img/delivery.jpg')}}"/>
  86.                                 </div>
  87.                             {% elseif loop.index == 3 %}
  88.                                 <p>クレジットカード・銀行振込からお選びいただけます。</p>
  89.                                 <ul class="grid [counter-reset:count]">
  90.                                     <li class="grid gap-3.5 py-6 [counter-increment:count] border-t border-[#F0EDE9]">
  91.                                         <h3 class="text-base font-medium leading-[1.8] before:content-[counter(count)'.']">
  92.                                             クレジットカード</h3>
  93.                                         <p>下記のクレジットカードでのお支払いが可能です。セキュリティーについては、個人情報が送受信されるページ(お問い合わせ・ショッピングカート)において、SSLによる暗号化通信を使用し、お客様の個人情報を外部から通信傍受できないよう対策を行っております。
  94.                                         </p>
  95.                                         <div class="grid gap-6 bg-sub-beige-pale p-2">
  96.                                             <dl class="grid gap-2.5">
  97.                                                 <dt>
  98.                                                     <h4 class="text-base font-bold leading-normal tracking-wider">●ご利用可能なクレジットカード
  99.                                                     </h4>
  100.                                                 </dt>
  101.                                                 <dd>
  102.                                                     <img alt="クレジットカード会社一覧" class="w-[19.5rem]" src="{{asset('assets/img/help/guide/credit_card.webp')}}"/>
  103.                                                 </dd>
  104.                                             </dl>
  105.                                             <dl class="grid gap-2.5">
  106.                                                 <dt>
  107.                                                     <h4 class="text-base font-bold leading-normal tracking-wider">●分割払いもご利用いただけます
  108.                                                     </h4>
  109.                                                 </dt>
  110.                                                 <dd>3回/5回/6回/10回/12回/15回/18回/20回/24回/リボ払い<br>※ クレジットカードの種類によってはご利用いただけない場合があります。<br>※ 分割・リボ手数料は、各カード会社に準じます。</dd>
  111.                                             </dl>
  112.                                         </div>
  113.                                         <div>
  114.                                             <p>クレジット決済でエラーとなる場合、下記内容をご確認の上、再度お試し頂けますようお願いします。</p>
  115.                                             <ul class="list-disc pl-4">
  116.                                                 <li>クレジットカードの番号が間違っている。(番号は半角数字で入力)</li>
  117.                                                 <li>クレジットカードの有効期限が切れている。</li>
  118.                                                 <li>セキュリティーコードの番号が間違っている。(番号は半角数字で入力)</li>
  119.                                                 <li>注文金額がクレジットカードのご利用限度枠を超えている。</li>
  120.                                                 <li>今回のご注文商品が高額になるため、ご利用のカード会社の制限が入った。</li>
  121.                                             </ul>
  122.                                         </div>
  123.                                     </li>
  124.                                     <li class="grid gap-3.5 py-6 [counter-increment:count] border-t border-[#F0EDE9]">
  125.                                         <h3 class="text-base font-medium leading-[1.8] before:content-[counter(count)'.']">
  126.                                             銀行振込</h3>
  127.                                         <p>注文画面より銀行振り込みをお選び頂けます。ログインした状態で注文画面にお進みください。<br><br>お振込み先は、ご注文後にお送りする注文内容確認メールにてご案内いたします。<br><br>商品の発送につきましては、ご入金確認後に手配をさせて頂きます。<br>お届けするエリアによりますが、ご入金後1週間程度でのお届けとなります。<br><br>振込手数料に関しては、お客様にご負担頂いております。<br><br>
  128.                                         </p>
  129.                                         <p><銀行振込をご利用いただく際のご注意><br>海洋散骨を含むご注文には、銀行振込をご利用いただけません。</p>
  130.                                         <hr class="h-[1px] border-none bg-[#F0EDE9]" />
  131.                                         <p>その他、決済方法についてのご質問などございましたら<a href="/contact" class="text-red underline">お問い合わせフォーム</a>・お電話(03-5579-5671)にご連絡ください。</p>
  132.                                     </li>
  133.                                 </ul>
  134.                             {% elseif loop.index == 4 %}
  135.                                 <p>
  136.                                     会員登録をすることで、次回以降ご連絡先の入力が不要になります。<br>
  137.                                     マイページでは、会員情報・お届け先住所の変更、ご注文履歴・お気に入りの確認などが行えます。<br>
  138.                                     入会費・年会費は無料です。
  139.                                 </p>
  140.                                 <h3 class="mt-12 text-base font-medium leading-[1.8]">●会員情報を変更する場合</h3>
  141.                                 <p class="mt-2">ログイン後、マイページ内で変更が必要な部分を変更してください。</p>
  142.                                 <h3 class="mt-12 text-base font-medium leading-[1.8]">●パスワードをお忘れの場合</h3>
  143.                                 <p class="mt-2">
  144.                                     <a href="/forgot" class="text-red underline">パスワードをお忘れの方</a>から、登録したメールアドレスを入力ください。<br>届いたメールに従って、パスワードを再発行してください。
  145.                                 </p>
  146.                                 <h3 class="mt-12 text-base font-medium leading-[1.8]">●退会する場合</h3>
  147.                                 <p class="mt-2 pb-6">マイページよりお手続きが可能です。</p>
  148.                             {% elseif loop.index == 5 %}
  149.                                 <h3 id="naire" class="mt-6 text-base font-medium leading-[1.8]">●名入れの手順について</h3>
  150.                                 <p class="mt-2">
  151.                                     名入れを行う場合、ご注文の際に商品ページで名入れ「あり」をご選択ください。ご注文後に送信される「名入れについて」のメールにご希望の文言をご記入いただき、ご返信いただく流れとなります。<br>※名入れは無料にて承ります。<br/>※名入れなしでもご注文頂けます。
  152.                                 </p>
  153.                                 <h4 class="mt-10 text-center text-sm font-medium leading-loose">【名入れ商品 作製開始までの流れ】</h4>
  154.                                 <p class="text-center">※名入れは無料にて承ります。</p>
  155.                                 <div class="mt-3 grid gap-2">
  156.                                     <dl class="border">
  157.                                         <dt class="bg-black text-center font-bold leading-[2.5] text-white tracking-widest">①【お客様】ご希望文言の送信</dt>
  158.                                         <dd class="p-4">ご注文後に自動送信される「名入れについて」のメールに、ご希望の文言を添えてご返信ください。</dd>
  159.                                     </dl>
  160.                                     <dl class="berore:text-center before:mb-2 before:grid before:place-items-center before:text-base before:font-medium before:content-['▼']">
  161.                                         <dt class="bg-black text-center font-bold leading-[2.5] text-white tracking-widest">②原稿作製</dt>
  162.                                         <dd class="border p-4">
  163.                                             いただいた内容を当店で確認の上、不備等がなければ名入れ原稿の作成に進みます。<br>原稿が完成しましたら、当店より「名入れ原稿のご確認について」のメールを送信いたします。
  164.                                         </dd>
  165.                                     </dl>
  166.                                     <dl class="berore:text-center before:mb-2 before:grid before:place-items-center before:text-base before:font-medium before:content-['▼']">
  167.                                         <dt class="bg-black text-center font-bold leading-[2.5] text-white tracking-widest">③【お客様】原稿のご確認</dt>
  168.                                         <dd class="border p-4">
  169.                                             メールに添付された原稿をご確認いただき、問題がなければ「名入れ原稿のご確認について」のメールに返信する形で確認完了の旨を当店までご連絡ください。</dd>
  170.                                     </dl>
  171.                                     <dl class="berore:text-center before:mb-2 before:grid before:place-items-center before:text-base before:font-medium before:content-['▼']">
  172.                                         <dt class="bg-black text-center font-bold leading-[2.5] text-white tracking-widest">④原稿の確定・商品作製開始</dt>
  173.                                         <dd class="border p-4">
  174.                                             お客様からのご返信を当店で確認でき次第原稿の確定とし、商品の作製に移ります。<br>※納期は通常【原稿確定から約3週間程度】となります</dd>
  175.                                     </dl>
  176.                                 </div>
  177.                                 <h3 class="mt-12 text-base font-medium leading-[1.8]">●各製品の仕様</h3>
  178.                                 <div class="mt-2.5 grid gap-4">
  179.                                     <dl class="border">
  180.                                         <dt class="bg-black text-center font-bold leading-[2.5] text-white tracking-widest">warm</dt>
  181.                                         <dd class="grid gap-2 p-4">
  182.                                             <div class="grid gap-4 grid-cols-[13.5rem_13.5rem] justify-center md:grid-cols-1">
  183.                                                 <img alt="お名前1段・生没年月日なしの場合" src="{{asset('assets/img/help/guide/warm_1.webp')}}"/>
  184.                                                 <img alt="お名前2段・生没年月日ありの場合" src="{{asset('assets/img/help/guide/warm_2.webp')}}"/>
  185.                                             </div>
  186.                                             <p>
  187.                                                 ①お名前<br>
  188.                                                 ・1段の場合<br>
  189.                                                 ひらがな・カタカナ・漢字・英数字:4文字まで<br>
  190.                                                 ・2段の場合<br>
  191.                                                 ひらがな・カタカナ・漢字・英数字:上段4文字まで/下段4文字まで<br>
  192.                                                 ②生没年月日<br>
  193.                                                 裏面に西暦でお入れできます。入れないことも可能です。<br>
  194.                                                 ●フォント<br>
  195.                                                 ・ひらがな・カタカナ・漢字:教科書体<br>
  196.                                                 ・英数字:Times New Roman Bold
  197.                                             </p>
  198.                                         </dd>
  199.                                     </dl>
  200.                                     <dl class="border">
  201.                                         <dt class="bg-black text-center font-bold leading-[2.5] text-white tracking-widest">days</dt>
  202.                                         <dd class="grid gap-2 p-4">
  203.                                             <div class="grid gap-4 grid-cols-[13.5rem_13.5rem] justify-center  md:grid-cols-1">
  204.                                                 <img alt="お名前1段・生没年月日なしの場合" src="{{asset('assets/img/help/guide/days_1.webp')}}"/>
  205.                                                 <img alt="お名前2段・生没年月日ありの場合" src="{{asset('assets/img/help/guide/days_2.webp')}}"/>
  206.                                             </div>
  207.                                             <p>
  208.                                                 ①お名前<br>
  209.                                                 ・1段の場合<br>
  210.                                                 ひらがな・カタカナ・漢字:6文字まで<br>
  211.                                                 英数字:8文字まで<br>・2段の場合<br>
  212.                                                 ひらがな・カタカナ・漢字:上段4文字まで/下段6文字まで<br>
  213.                                                 英数字:上段5文字まで/下段7文字まで<br><br>
  214.                                                 ②生没年月日<br>
  215.                                                 西暦でお入れできます。入れないことも可能です。<br><br>
  216.                                                 ●フォント<br>
  217.                                                 ほのか丸ゴシック
  218.                                             </p>
  219.                                         </dd>
  220.                                     </dl>
  221.                                 </div>
  222.                                 <h3 class="mt-12 text-base font-medium leading-[1.8]">●納期について</h3>
  223.                                 <p class="mt-2">
  224.                                     納期は通常【原稿確定から約3週間程度】となります。ご注文確認後、当店より土日祝除く3営業日に原稿確認のご連絡を差し上げます。その後納期の調整を行い、正式な納品日程をご案内します。<br>
  225.                                     連絡メールが届かない場合は、お手数ですがご連絡ください。<br>
  226.                                     ※お急ぎの場合は、有料で約7~10日程度でお届けします。ご要望の場合は、お電話でご連絡ください。<br>
  227.                                     ※原稿が確定するまでは作製を進められませんので、ご注意ください。<br>
  228.                                     ※2日以上ご返信がない場合は、お電話にてご連絡を差し上げる場合がございます。<br>
  229.                                     ※お盆・年末年始・ゴールデンウィークなどの長期休業の際は、通常よりもお時間を頂戴する場合がございます。予めご了承ください。
  230.                                 </p>
  231.                                 <h3 class="mt-12 text-base font-medium leading-[1.8]">●注意事項</h3>
  232.                                 <ul class="mt-2 list-disc pl-4">
  233.                                     <li>いずれの製品も、お名前と生没年月日を入れずにご注文頂くことが可能です。</li>
  234.                                     <li>各製品の仕様をご確認の上、ご注文ください。品質維持のため、原則各製品の仕様にて名入れを承ります。<br>※特別なご事情がある場合には、事前にお問い合わせください。尚、ご対応いたしかねる場合がございますので、予めご了承ください。</li>
  235.                                     <li>フォントやレイアウト、文字数などの特注対応はいたしかねます。</li>
  236.                                     <li>素材により文字色の見え方に多少の濃淡がございます。</li>
  237.                                     <li>天然素材を使用している製品は、木目や色合いなどが異なります。</li>
  238.                                     <li>個体のご指定はお受けしかねますので、ご了承ください。</li>
  239.                                     <li>カスタム商品の特性上、キャンセル・返品はお受けしかねます。</li>
  240.                                 </ul>
  241.                                 <div class="mt-10 flex items-start gap-4 pb-6">
  242.                                     <span class="block h-32 w-px bg-gradient-to-b from-[#ADAAA6]"></span>
  243.                                     <div class="grid gap-4">
  244.                                         <p class="font-medium leading-normal">お気軽にお問い合わせください</p>
  245.                                         <a href="tel:+03-5570-5671" class="flex items-center gap-1 pointer-events-none md:pointer-events-auto">
  246.                                             <img alt="" src="{{asset('assets/icon/phone.svg')}}" class="w-6">
  247.                                             <p class="font-notoserif text-2xl tracking-normal">03-5579-5671</p>
  248.                                         </a>
  249.                                         <p>受付時間/10:00~18:00(年末年始除く)</p>
  250.                                     </div>
  251.                                 </div>
  252.                             {% elseif loop.index == 6 %}
  253.                                 <h3 class="mt-6 text-base font-medium leading-[1.8]">●返品・交換について</h3>
  254.                                 <ul class="mt-2 list-disc pl-4">
  255.                                     <li>ご注文前に、必ず各商品ページ内の「注意事項」をご確認いただき、ご了承の上でご注文下さい。   </li>
  256.                                     <li>お客様都合による返品・交換について <br>原則承っておりませんので、ご了承下さい。</li>
  257.                                     <li>初期不良・配送事故による返品・交換について<br>商品の品質には万全の注意を払っておりますが、万が一不良や破損等がございましたら、商品到着日から7日以内にご連絡をお願いいたします。<br>ご注文内容や状況を確認し、対応させていただきます。返品・交換となる場合は、弊社にて送料を全額負担いたします。
  258.                                     </li>
  259.                                 </ul>
  260.                                 <p class="mt-4">
  261.                                     <br>※同一商品の良品との交換ができかねる場合がございます。その場合は返金での対応となります。
  262.                                     <br>※返品の場合は、弊社にて商品を受領後、返金のお手続きをさせていただきます。
  263.                                     <br>クレジットカード決済の場合は、ご請求締め日の都合により、注文の引き落としと返金の入金が前後する場合がございます。
  264.                                     <br>詳しくはクレジットカード会社に直接お問い合わせください。
  265.                                 </p>
  266.                                 <h3 class="mt-12 text-base font-medium leading-[1.8]">●キャンセルについて</h3>
  267.                                 <p class="mt-2">
  268.                                 原則、商品の発送前に限り、内容の変更を承ります。ただし、ご連絡をいただくタイミングによっては、対応いたしかねる場合がございます。原稿承諾後の名入れ商品のキャンセルはできません。 </p>
  269.                                 <h3 class="mt-12 text-base font-medium leading-[1.8]">●決済後の追加注文について</h3>
  270.                                 <p class="mt-2">
  271.                                     商品を決済後に追加でご注文される場合、システムの都合上、送料をおまとめすることはできません。<br>注文者や住所が同じ場合でも、決済の回数に応じて送料をご請求させて頂いておりますのでご了承ください。
  272.                                 </p>
  273.                             {% elseif loop.index == 7 %}
  274.                                 <p>
  275.                                     ・領収書は商品出荷メールに納品書とともに添付されております。<br/>
  276.                                     ・宛名はご注文者様のお名前になります。<br/>
  277.                                     ・但し書きは【商品のご購入代金として】となります。<br/>
  278.                                     ・ご指定の宛名や但し書きの指定はできませんのであらかじめご了承ください。<br/>
  279.                                     ・ご不明点等ございましたら弊社までご連絡ください。
  280.                                 </p>
  281.                             {% elseif loop.index == 8 %}
  282.                                 <p>
  283.                                     <a href="http://manaka-ltd.jp/profile/" class="text-red underline" target="_blank">会社概要<i class="fas fa-external-link-alt"></i>
  284.                                     </a>
  285.                                     のページをご覧ください。
  286.                                 </p>
  287.                             {% elseif loop.index == 9 %}
  288.                                 <p>
  289.                                     <a href="/sea_burial" class="text-red underline">海洋散骨</a>のページをご覧ください。
  290.                                 </p>
  291.                             {% endif %}
  292.                         </div>
  293.                     </div>
  294.                 </section>
  295.             {% endfor %}
  296.         </div>
  297.     </section>
  298. {% endblock %}