app/template/user_data/howto_index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  4.     <div
  5.         class="sub-container">
  6.         <!-- SUB H1 -->
  7.         <div
  8.             class="sub-h1Wrap">
  9.             {# 必要に応じて増やしてください #}
  10.             <h1 class="sub-h1">{{title}}</h1>
  11.         </div>
  12.         <!-- /SUB H1 -->
  13.         <div
  14.             class="l-container">
  15.             <!-- パンくずリスト -->
  16.             <ol class="sub-breadcrumbs">
  17.                 <li>
  18.                     <a href="{{ url('homepage') }}">HOME</a>
  19.                 </li>
  20.                 {# 必要に応じて増やしてください #}
  21.                 <li>{{title}}</li>
  22.             </ol>
  23.             <!-- /パンくずリスト -->
  24.             <div
  25.                 class="l-2ColumnContainer">
  26.                 <!-- メインコンテンツ -->
  27.                 <div
  28.                     class="l-main">
  30.                     <!-- PAGE CONTENTS -->
  31.                     <div
  32.                         class="howto howtoIndex">
  33.                         <!-- 印鑑の選び方ガイド -->
  34.                         <section class="howtoIndex-guide">
  35.                             <h2 class="mod-hl-01">
  36.                                 <span class="isJp">印鑑の選び方ガイド</span>
  37.                             </h2>
  38.                             <p class="howtoIndex-guide-text">どの印鑑を選べばいいか分からない…という方にも安心して目的にあった印鑑をお選びいただけるような印鑑の選び方やポイントをご説明していきます。</p>
  40.                             <!-- 印鑑を購入する流れ -->
  41.                             <section class="howtoIndex-guide-flow">
  42.                                 <h3 class="mod-hl-02">
  43.                                     <span class="isJp">印鑑を購入する流れ</span>
  44.                                 </h3>
  45.                                 <div class="flowContainer">
  46.                                     <div class="flowBox">
  47.                                         <h4 class="flowBox-hl">
  48.                                             <span class="isNumber">STEP1</span>
  49.                                             <span class="isJp">印鑑の用途を明確にする</span>
  50.                                         </h4>
  51.                                         <div class="flowBox-body">
  52.                                             <div class="flowBox-img">
  53.                                                 <img src="{{ asset('assets/img/howto/index/flow_01.jpg') }}" alt="" class="imgFit">
  54.                                             </div>
  55.                                             <p class="flowBox-text">印鑑には実印・銀行印・認印の３種類あります。それぞれの用途によって印鑑を使い分ける事をオススメしています。まずは「必要な印鑑は何か？」をお決めください。</p>
  56.                                             <a href="{{ url('homepage') }}user_data/howto_private" class="flowBox-link">印鑑の種類についてはコチラ</a>
  57.                                         </div>
  58.                                     </div>
  60.                                     <div class="flowBox">
  61.                                         <h4 class="flowBox-hl">
  62.                                             <span class="isNumber">STEP2</span>
  63.                                             <span class="isJp">印材を選ぶ</span>
  64.                                         </h4>
  65.                                         <div class="flowBox-body">
  66.                                             <div class="flowBox-img">
  67.                                                 <img src="{{ asset('assets/img/howto/index/flow_02.jpg') }}" alt="" class="imgFit">
  68.                                             </div>
  69.                                             <p class="flowBox-text">印鑑の種類が決まったら、次は印材（印鑑の素材）選びです。印材は用途によって適材が変わりますが、オススメや人気の傾向を参考にお選びください。</p>
  70.                                             <a href="{{ url('homepage') }}user_data/howto_material" class="flowBox-link">印材についてはコチラ</a>
  71.                                         </div>
  72.                                     </div>
  74.                                     <div class="flowBox">
  75.                                         <h4 class="flowBox-hl">
  76.                                             <span class="isNumber">STEP3</span>
  77.                                             <span class="isJp">印鑑のサイズを選ぶ</span>
  78.                                         </h4>
  79.                                         <div class="flowBox-body">
  80.                                             <div class="flowBox-img">
  81.                                                 <img src="{{ asset('assets/img/howto/index/flow_03.jpg') }}" alt="" class="imgFit">
  82.                                             </div>
  83.                                             <p class="flowBox-text">印鑑選びではサイズも重要となります。印鑑の種類や一般的なオススメサイズを踏まえた上しっくりくるサイズをお選びください。</p>
  84.                                             <a href="#howtoIndex-guide-choose-imgContainer" class="flowBox-link">
  85.                                                 印鑑のサイズについてはコチラ</a>
  86.                                         </div>
  87.                                     </div>
  89.                                     <div class="flowBox">
  90.                                         <h4 class="flowBox-hl">
  91.                                             <span class="isNumber">STEP4</span>
  92.                                             <span class="isJp">印鑑の書体を選ぶ</span>
  93.                                         </h4>
  94.                                         <div class="flowBox-body">
  95.                                             <div class="flowBox-img">
  96.                                                 <img src="{{ asset('assets/img/howto/index/flow_04.jpg') }}" alt="" class="imgFit">
  97.                                             </div>
  98.                                             <p class="flowBox-text">印鑑の用途や印材・サイズが決まれば残るは書体です。書体も用途によりオススメが異なります。ふさわしい書体を選びましょう。</p>
  99.                                             <a href="{{ url('homepage') }}user_data/howto_nagaemozi" class="flowBox-link">印鑑の書体についてはコチラ</a>
  100.                                         </div>
  101.                                     </div>
  103.                                     <div class="flowBox">
  104.                                         <h4 class="flowBox-hl">
  105.                                             <span class="isNumber">STEP5</span>
  106.                                             <span class="isJp">ご注文とお支払い</span>
  107.                                         </h4>
  108.                                         <div class="flowBox-body">
  109.                                             <div class="flowBox-img">
  110.                                                 <img src="{{ asset('assets/img/howto/index/flow_05.jpg') }}" alt="" class="imgFit">
  111.                                             </div>
  112.                                             <p class="flowBox-text">最後にご注文手続きです。カートに入れ、ご注文確認画面へお進みください。お支払いにはPayPay、カード払いと多数ご用意しております。</p>
  113.                                             <a href="{{ url('help_guide') }}#guideIndex-payment" class="flowBox-link">お支払いについてはコチラ</a>
  114.                                         </div>
  115.                                     </div>
  117.                                     <div class="flowBox">
  118.                                         <h4 class="flowBox-hl">
  119.                                             <span class="isNumber">STEP6</span>
  120.                                             <span class="isJp">商品のお届け</span>
  121.                                         </h4>
  122.                                         <div class="flowBox-body">
  123.                                             <div class="flowBox-img">
  124.                                                 <img src="{{ asset('assets/img/howto/index/flow_06.jpg') }}" alt="" class="imgFit">
  125.                                             </div>
  126.                                             <p class="flowBox-text">印鑑をお受け取りになりましたら、彫刻ミスや不良がないかご確認ください。万一不備がございましたら交換対応いたしますのでご連絡ください。</p>
  127.                                             <a href="{{ url('help_guide') }}#guideIndex-returnExchange" class="flowBox-link">お商品のお届け・返品についてはコチラ</a>
  128.                                         </div>
  129.                                     </div>
  130.                                 </div>
  132.                                 <div class="flow-linkContainer">
  133.                                     <a href="{{ url('homepage') }}user_data/howto_private" class="mod-btn-02">
  134.                                         <span class="btnInner">個人印鑑の選び方はこちらから</span>
  135.                                     </a>
  136.                                     <a href="{{ url('homepage') }}user_data/howto_corporation" class="mod-btn-02">
  137.                                         <span class="btnInner">法人印鑑の選び方はこちらから</span>
  138.                                     </a>
  139.                                 </div>
  140.                             </section>
  141.                             <!-- /印鑑を購入する流れ -->
  143.                             <!-- 印鑑の選び方 -->
  144.                             <section class="howtoIndex-guide-choose">
  145.                                 <h3 class="mod-hl-02">
  146.                                     <span class="isJp">印鑑の選び方</span>
  147.                                 </h3>
  149.                                 <ul
  150.                                     class="howto-choose-list">
  151.                                     <!-- 実印 -->
  152.                                     <li class="listItem">
  153.                                         <div class="listItem-header">
  154.                                             <div class="listItem-header-img">
  155.                                                 <div class="imgInner">
  156.                                                     <img src="{{ asset('assets/img/top/tab_use_header_01.jpg') }}" width="420" height="233" alt="" class="imgObjectFitCover" loading="lazy">
  157.                                                 </div>
  158.                                             </div>
  159.                                             <em class="listItem-header-hl">実印</em>
  160.                                         </div>
  161.                                         <p class="listItem-detail">
  162.                                             自動車や住宅の購入、ローン設定、保険金の受領など主に大きなお金が動く契約の際に、<em>本人であることの証明に使う</em>。
  163.                                         </p>
  164.                                         <div class="listItem-body">
  165.                                             <div class="listItem-imageBlock">
  166.                                                 <div class="listItem-img">
  167.                                                     <img src="{{ asset('assets/img/top/tab_use_image_01.jpg') }}" width="150" height="150" alt="" class="imgFit" loading="lazy">
  168.                                                 </div>
  169.                                                 <p class="listItem-imageBlock-text">読みにくい<span class="d-inlineBlock">書体が</span><br>オススメ</p>
  170.                                             </div>
  171.                                         </div>
  172.                                     </li>
  173.                                     <!-- /実印 -->
  175.                                     <!-- 銀行印 -->
  176.                                     <li class="listItem">
  177.                                         <div class="listItem-header">
  178.                                             <div class="listItem-header-img">
  179.                                                 <div class="imgInner">
  180.                                                     <img src="{{ asset('assets/img/top/tab_use_header_02.jpg') }}" width="420" height="233" alt="" class="imgObjectFitCover" loading="lazy">
  181.                                                 </div>
  182.                                             </div>
  183.                                             <em class="listItem-header-hl">銀行印</em>
  184.                                         </div>
  185.                                         <p class="listItem-detail">
  186.                                             信用金庫や銀行等の金融機関に口座を作成する際に登録する印鑑。<em>偽造されない工夫が必要</em>。
  187.                                         </p>
  188.                                         <div class="listItem-body">
  189.                                             <div class="listItem-imageBlock">
  190.                                                 <div class="listItem-img">
  191.                                                     <img src="{{ asset('assets/img/top/tab_use_image_02.jpg') }}" width="150" height="150" alt="" class="imgFit" loading="lazy">
  192.                                                 </div>
  193.                                                 <p class="listItem-imageBlock-text">読みにくい<span class="d-inlineBlock">書体が</span><br>オススメ</p>
  194.                                             </div>
  195.                                         </div>
  196.                                     </li>
  197.                                     <!-- /銀行印 -->
  199.                                     <!-- 認印 -->
  200.                                     <li class="listItem">
  201.                                         <div class="listItem-header">
  202.                                             <div class="listItem-header-img">
  203.                                                 <div class="imgInner">
  204.                                                     <img src="{{ asset('assets/img/top/tab_use_header_03.jpg') }}" width="420" height="233" alt="" class="imgObjectFitCover" loading="lazy">
  205.                                                 </div>
  206.                                             </div>
  207.                                             <em class="listItem-header-hl">認印</em>
  208.                                         </div>
  209.                                         <p class="listItem-detail">
  210.                                             押印する書類や伝票への内容を確認したことを示すために押すなど、日常的に使用される印鑑。
  211.                                         </p>
  212.                                         <div class="listItem-body">
  213.                                             <div class="listItem-imageBlock">
  214.                                                 <div class="listItem-img">
  215.                                                     <img src="{{ asset('assets/img/top/tab_use_image_03.jpg') }}" width="150" height="150" alt="" class="imgFit" loading="lazy">
  216.                                                 </div>
  217.                                                 <p class="listItem-imageBlock-text">読みやすい<span class="d-inlineBlock">書体が</span><br>オススメ</p>
  218.                                             </div>
  219.                                         </div>
  220.                                     </li>
  221.                                     <!-- /認印 -->
  222.                                 </ul>
  224.                                 <div class="howtoIndex-guide-choose-imgContainer" id="howtoIndex-guide-choose-imgContainer">
  225.                                     <div class="imgBox">
  226.                                         <picture class="imgBox-img">
  227.                                             <source srcset="{{ asset('assets/img/howto/index/choose_01_sp.png') }}" media="(max-width: 1023px)">
  228.                                             <img src="{{ asset('assets/img/howto/index/choose_01.png') }}" width="1320" height="830" alt="" class="imgFit" loading="lazy">
  229.                                         </picture>
  230.                                         <a href="{{ url('product_list') }}?category_id=12" class="mod-btn-03 imgBox-link">
  231.                                             <span class="btnInner">個人印鑑 実印の商品一覧へ</span>
  232.                                         </a>
  233.                                     </div>
  235.                                     <div class="imgBox">
  236.                                         <picture class="imgBox-img">
  237.                                             <source srcset="{{ asset('assets/img/howto/index/choose_02_sp.png') }}" media="(max-width: 1023px)">
  238.                                             <img src="{{ asset('assets/img/howto/index/choose_02.png') }}" width="1320" height="370" alt="" class="imgFit" loading="lazy">
  239.                                         </picture>
  240.                                         <a href="{{ url('product_list') }}?category_id=80" class="mod-btn-03 imgBox-link">
  241.                                             <span class="btnInner">個人印鑑 銀行印の商品一覧へ</span>
  242.                                         </a>
  243.                                     </div>
  245.                                     <div class="imgBox">
  246.                                         <picture class="imgBox-img">
  247.                                             <source srcset="{{ asset('assets/img/howto/index/choose_03_sp.png') }}" media="(max-width: 1023px)">
  248.                                             <img src="{{ asset('assets/img/howto/index/choose_03.png') }}" width="1320" height="370" alt="" class="imgFit" loading="lazy">
  249.                                         </picture>
  250.                                         <a href="{{ url('product_list') }}?category_id=81" class="mod-btn-03 imgBox-link">
  251.                                             <span class="btnInner">個人印鑑 認印の商品一覧へ</span>
  252.                                         </a>
  253.                                     </div>
  254.                                 </div>
  255.                             </section>
  256.                             <!-- /印鑑の選び方 -->
  257.                         </section>
  258.                         <!-- /印鑑の選び方ガイド -->
  260.                         <!-- 印鑑のお役立ち知識 -->
  261.                         <section class="howtoIndex-useful">
  262.                             <h2 class="mod-hl-01">
  263.                                 <span class="isJp">印鑑のお役立ち知識</span>
  264.                             </h2>
  265.                             <div class="howtoIndex-usefulContainer">
  266.                                 <div class="usefulBox">
  267.                                     <h3 class="mod-hl-04 usefulBox-hl">永江文字の書体について</h3>
  268.                                     <div class="usefulBox-img">
  269.                                         <img src="{{ asset('assets/img/howto/index/useful_01.jpg') }}" width="640" height="324" alt="" class="imgFit" loading="lazy">
  270.                                     </div>
  271.                                     <p class="usefulBox-text">印鑑の書体選びに迷っている方へ、さまざまな種類の書体を一覧で紹介します。<br>実印、銀行印、認印それぞれに適した書体をお伝えします。</p>
  272.                                     <a href="{{ url('homepage') }}user_data/howto_nagaemozi" class="mod-btn-01 usefulBox-more">
  273.                                         <span class="btnInner">永江文字の書体についてを見る</span>
  274.                                     </a>
  275.                                 </div>
  277.                                 <div class="usefulBox">
  278.                                     <h3 class="mod-hl-04 usefulBox-hl">印鑑の種類について</h3>
  279.                                     <div class="usefulBox-img">
  280.                                         <img src="{{ asset('assets/img/howto/index/useful_02.jpg') }}" width="640" height="324" alt="" class="imgFit" loading="lazy">
  281.                                     </div>
  282.                                     <p class="usefulBox-text">個人の印鑑には実印・銀行印・認印の3種類があります。<br>それぞれの用途に合わせた印鑑をご紹介しております。</p>
  283.                                     <a href="{{ url('homepage') }}user_data/howto_private" class="mod-btn-01 usefulBox-more">
  284.                                         <span class="btnInner">印鑑の種類を見る</span>
  285.                                     </a>
  286.                                 </div>
  288.                                 <div class="usefulBox">
  289.                                     <h3 class="mod-hl-04 usefulBox-hl">印材について</h3>
  290.                                     <div class="usefulBox-img">
  291.                                         <img src="{{ asset('assets/img/howto/index/useful_03.jpg') }}" width="640" height="324" alt="" class="imgFit" loading="lazy">
  292.                                     </div>
  293.                                     <p class="usefulBox-text">印材には黒水牛や柘だけでなく、環境対応印材やチタンといった様々な種類がございます。<br>材質別に7種類に分けてそれぞれの特色をご紹介しております。</p>
  294.                                     <a href="{{ url('homepage') }}user_data/howto_material" class="mod-btn-01 usefulBox-more">
  295.                                         <span class="btnInner">印材についてを見る</span>
  296.                                     </a>
  297.                                 </div>
  299.                                 <div class="usefulBox">
  300.                                     <h3 class="mod-hl-04 usefulBox-hl">印鑑登録・印鑑証明とは？</h3>
  301.                                     <div class="usefulBox-img">
  302.                                         <img src="{{ asset('assets/img/howto/index/useful_04.jpg') }}" width="640" height="324" alt="" class="imgFit" loading="lazy">
  303.                                     </div>
  304.                                     <p class="usefulBox-text">印鑑登録と印鑑証明のそれぞれの違いについて、また印鑑登録が必要な場面についてご説明しています。</p>
  305.                                     <a href="{{ url('homepage') }}user_data/howto_toroku" class="mod-btn-01 usefulBox-more">
  306.                                         <span class="btnInner">印鑑登録・印鑑証明を見る</span>
  307.                                     </a>
  308.                                 </div>
  310.                                 <div class="usefulBox">
  311.                                     <h3 class="mod-hl-04 usefulBox-hl">印鑑供養について</h3>
  312.                                     <div class="usefulBox-img">
  313.                                         <img src="{{ asset('assets/img/howto/index/useful_05.jpg') }}" width="640" height="324" alt="" class="imgFit" loading="lazy">
  314.                                     </div>
  315.                                     <p class="usefulBox-text">長く使ってきた印鑑に感謝の気持ちを込めて整理する儀式、印鑑供養。<br>永江印祥堂では皆様に代わりご供養させていただいております。</p>
  316.                                     <a href="{{ url('homepage') }}user_data/howto_kuyou" class="mod-btn-01 usefulBox-more">
  317.                                         <span class="btnInner">印鑑供養についてを見る</span>
  318.                                     </a>
  319.                                 </div>
  320.                             </div>
  321.                         </section>
  322.                         <!-- /印鑑のお役立ち知識 -->
  323.                     </div>
  324.                     <!-- /PAGE CONTENTS -->
  326.                 </div>
  327.                 <!-- /メインコンテンツ -->
  330.                 <!-- サイドメニュー -->
  331.                 {{ include('Block/l_sub.twig', ignore_missing = true) }}
  332.                 <!-- /サイドメニュー -->
  333.             </div>
  334.         </div>
  335.     </div>
  336. {% endblock %}