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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block stylesheet %}
  4.     <style>
  5.         summary {
  6.             display: block;
  7.         }
  8.         summary::-webkit-details-marker {
  9.             display: none;
  10.         }
  12.         summary:after {
  13.             transition: transform 0.4s;
  14.         }
  15.         details[open] summary:after {
  16.             content: '－';
  17.             transform: rotate(-180deg);
  18.         }
  19.     </style>
  20. {% endblock %}
  22. {% set items =[
  23.     {
  24.         title:'商品について',
  25.         faqs:[
  26.             {
  27.                 question:'サイズや形は全て同じですか？',
  28.                 answer:'天然の素材を使用し、全て手仕事での制作のため、色や形が一つ一つわずかながらも異なります。サイトと全く同じものはご用意できませんので、ご了承ください。',
  29.             },
  30.         ]
  31.     },
  32.     {
  33.         title:'色について',
  34.         faqs:[
  35.             {
  36.                 question:'掲載と同じ色の商品が届きますか？',
  37.                 answer:'商品の画像はできるだけ実物に近い色を再現するよう注意しておりますが、お客様のご覧になっているパソコンや携帯のモニタ環境等により画面上ご覧になっている色や素材感と実際の商品が異なって見える場合がございます。\nなお、色や素材感などのイメージ違いより万が一ご返品となった場合につきましては、お客様の送料ご負担となりますのでご了承ください。',
  38.             },
  39.         ]
  40.     },
  41.     {
  42.         title:'サービス内容について',
  43.         faqs:[
  44.             {
  45.                 question:'領収書の発行はできますか？',
  46.                 answer:'ご注文の際、備考欄に【領収書希望の旨】と【宛名】【但し書き】をご記入ください。商品に領収書を同封させて頂きます。\n詳しくは、<a href="/guide?id=領収書の発行" class="hover underline">ご利用ガイド</a>をご覧ください。',
  47.             },
  48.         ]
  49.     },
  51. ] %}
  53. {% set breadcrumbs = [{'name': 'よくあるご質問'}] %}
  55. {% block main %}
  56.     <section class="px-6 pb-10 pt-[7.5rem] md:pt-20 md:pb-1 text-black">
  57.         <div class="mx-auto w-full max-w-[63rem]">
  58.             <h1 class="flex items-start gap-4 md:gap-2">
  59.                 <span class="block h-[7.5rem] w-0.5 bg-gradient-to-b from-[#ADAAA6] md:h-16 md:w-px"></span>
  60.                 <p class="text-[2rem] font-light leading-normal tracking-widest md:text-xl">
  61.                     よくあるご質問</p>
  62.             </h1>
  63.         </div>
  64.     </section>
  65.     {{ include('Block/breadcrumb.twig') }}
  66.     <section class="md:pt-6 px-6 pb-[7.5rem] md:pb-20 text-black">
  67.         <div class="mx-auto w-full max-w-[37rem] text-sm leading-loose">
  68.             <p>こちらを読んでも解決しない場合は、お気軽に<a href="/contact" class="text-red underline">お問い合わせ</a>ください。<br>
  69.                 できるかぎり迅速に回答させて頂きます。</p>
  70.             <div class="mt-20">
  71.                 {% for item in items %}
  72.                     <div class="mt-16">
  73.                         <h3 class="text-xl leading-normal font-medium">{{item.title}}</h3>
  74.                         {% for faq in item.faqs %}
  75.                             <details class="border-y border-black mt-6">
  76.                                 <summary class="hover py-6 font-medium after:content-['＋'] flex items-center justify-between">Q.
  77.                                     {{faq.question}}</summary>
  78.                                 <div>
  79.                                     <p class="pb-6 whitespace-pre-wrap">{{faq.answer|raw|nl2br}}</p>
  80.                                 </div>
  81.                             </details>
  82.                         {% endfor %}
  83.                     </div>
  84.                 {% endfor %}
  85.             </div>
  86.         </div>
  88.     </section>
  89. {% endblock %}