app/template/myufull1/Subscription/index.twig line 1

Open in your IDE?
  1. {% extends 'full_width_frame.twig' %}
  3. {% block main %}
  4. <h1 class="visual">
  5.   <img src="{{ asset('assets/img/page/subscription/visual_pc.jpg') }}" class="is-desktop__block img-fluid mx-auto" alt="続けるからこそ実感できる！うるおいのある陶器のようなツヤ肌。定期便 定期購入 定期購買のご案内">
  6.   <img src="{{ asset('assets/img/page/subscription/visual_sp.jpg') }}" class="is-mobile__block img-fluid" alt="続けるからこそ実感できる！うるおいのある陶器のようなツヤ肌。定期便 定期購入 定期購買のご案内">
  7. </h1>
  9. <div class="container">
  10.   <section class="sec1 mt0 pt0">
  11.     <div class="container-md is-desktop__block w90p mx-auto">
  12.       <div class="media">
  13.         <img src="{{ asset('assets/img/page/subscription/sec1-icon.png') }}" class="align-self-center mr-3 img-fluid" alt="定期便 定期購入 定期購買とは？">
  14.         <div class="media-body align-self-center">
  15.           <p class="lh20 fs18">
  16.             定期便とは、1回のお申し込みで自動的に商品をお届けするサービスです。<br>
  17.             買い忘れの心配がなく、送料無料※やポイントが還元されるなどのうれしい特典があります。<br>
  18.             お届けの間隔は毎月1回、隔月（2か月に1回）のお届けからお選びいただけます。
  19.           </p>
  20.           <ul class="ul-note fs12">
  21.             <li>沖縄県・北海道の一部地域、又は離島にお住まいの方については、送料が加算される場合がございます。その場合、当社にてご注文確認後、お客様に送料を追加したご請求金額をメールにてご連絡いたします。</li>
  22.           </ul>
  23.         </div>
  24.       </div>
  25.     </div>
  27.     <div class="is-mobile__block">
  28.       <img src="{{ asset('assets/img/page/subscription/sec1-icon.png') }}" class="mb-3 img-fluid mx-auto d-block icon-what" alt="定期便 定期購入 定期購買とは？">
  29.       <p class="lh15 fs18">
  30.         定期便とは、1回のお申し込みで自動的に商品をお届けするサービスです。<br>
  31.         買い忘れの心配がなく、送料無料※やポイントが還元されるなどのうれしい特典があります。<br>
  32.         お届けの間隔は毎月1回、隔月（2か月に1回）のお届けからお選びいただけます。
  33.       </p>
  34.       <ul class="ul-note fs12">
  35.         <li>沖縄県・北海道の一部地域、又は離島にお住まいの方については、送料が加算される場合がございます。その場合、当社にてご注文確認後、お客様に送料を追加したご請求金額をメールにてご連絡いたします。大変お手数ですが、同意いただける場合はメールにご返信をお願いいたします。</li>
  36.       </ul>
  37.     </div>
  38.   </section>
  39. </div>
  41. <section class="sec2">
  42.   <h2 class="container"><img src="{{ asset('assets/img/page/subscription/sec2-title.png') }}" class="img-fluid" alt="メリットたくさん！定期便 定期購入 定期購買でうれしい特典"></h2>
  44.   <div class="container">
  45.     <article class="merit-1 pink">
  46.       <div class="media is-desktop__flex">
  47.         <img src="{{ asset('assets/img/page/subscription/sec2-merit1_pc.png') }}" class="mr-5 img-fluid" alt="メリット1">
  48.         <div class="media-body align-self-center">
  49.           <h5><img src="{{ asset('assets/img/page/subscription/sec2-a1.png') }}" class="img-fluid" alt="10%ポイント還元！"></h5>
  50.           <div class="media">
  51.             <div class="media-body align-self-center">
  52.               定期便のお客さまは、ミューフル公式オンラインショップで1ポイント＝１円から使えるポイントが毎回商品購入額の10％分貯まります！貯まったポイントで他の商品をお得に購入できます！
  53.             </div>
  54.             <img src="{{ asset('assets/img/page/subscription/sec2-icon1.png') }}" class="align-self-center ml-5" alt="">
  55.           </div>
  56.         </div>
  57.       </div>
  59.       <div class="is-mobile__block">
  60.         <img src="{{ asset('assets/img/page/subscription/sec2-merit1_sp.png') }}" class="img-fluid img-merit" alt="メリット1">
  61.         <h5><img src="{{ asset('assets/img/page/subscription/sec2-a1.png') }}" class="img-fluid" alt="10%ポイント還元！"></h5>
  63.         <p class="mb-2">
  64.           定期便のお客さまは、ミューフル公式オンラインショップで1ポイント＝１円から使えるポイントが毎回商品購入額の10％分貯まります！貯まったポイントで他の商品をお得に購入できます！
  65.         </p>
  66.         <img src="{{ asset('assets/img/page/subscription/sec2-icon1.png') }}" alt="" class="img-fluid d-block mx-auto">
  67.       </div>
  68.     </article>
  70.     <article class="merit-2 green">
  71.       <div class="media is-desktop__flex">
  72.         <img src="{{ asset('assets/img/page/subscription/sec2-merit2_pc.png') }}" class="mr-5 img-fluid" alt="メリット2">
  73.         <div class="media-body align-self-center">
  74.           <h5><img src="{{ asset('assets/img/page/subscription/sec2-a2.png') }}" class="img-fluid" alt="ずっと送料無料！"></h5>
  75.           <div class="media">
  76.             <div class="media-body align-self-center">
  77.               通常、送料がかかる商品でも定期便のお客様はずっと送料無料<sup>※</sup>でお届け！
  78.               <ul class="ul-note fs12">
  79.                 <li>沖縄県・北海道の一部地域、又は離島にお住まいの方については、送料が加算される場合がございます。その場合、当社にてご注文確認後、お客様に送料を追加したご請求金額をメールにてご連絡いたします。</li>
  80.               </ul>
  81.             </div>
  82.             <img src="{{ asset('assets/img/page/subscription/sec2-icon2.png') }}" class="align-self-center ml-5" alt="">
  83.           </div>
  84.         </div>
  85.       </div>
  87.       <div class="is-mobile__block">
  88.         <img src="{{ asset('assets/img/page/subscription/sec2-merit2_sp.png') }}" class="img-fluid img-merit" alt="メリット2">
  89.         <h5><img src="{{ asset('assets/img/page/subscription/sec2-a2.png') }}" class="img-fluid" alt="ずっと送料無料！"></h5>
  91.         <p class="mb-3">
  92.           通常、送料がかかる商品でも定期便のお客様はずっと送料無料<sup>※</sup>でお届け！
  93.         </p>
  94.         <img src="{{ asset('assets/img/page/subscription/sec2-icon2.png') }}" alt="" class="img-fluid d-block mx-auto mb-3">
  95.         <ul class="ul-note fs12">
  96.           <li>沖縄県・北海道の一部地域、又は離島にお住まいの方については、送料が加算される場合がございます。その場合、当社にてご注文確認後、お客様に送料を追加したご請求金額をメールにてご連絡いたします。</li>
  97.         </ul>
  98.       </div>
  99.     </article>
  101.     <article class="merit-3 pink">
  102.       <div class="media is-desktop__flex">
  103.         <img src="{{ asset('assets/img/page/subscription/sec2-merit3_pc.png') }}" class="mr-5 img-fluid" alt="メリット3">
  104.         <div class="media-body align-self-center">
  105.           <h5><img src="{{ asset('assets/img/page/subscription/sec2-a3.png') }}" class="img-fluid" alt="バースデー 誕生日月 プレゼント"></h5>
  106.           <div class="media">
  107.             <div class="media-body align-self-center">
  108.               定期便のお客さま限定で、お誕生日月にミューフル商品がお得に購入できるバースデークーポンやプレゼントなどを進呈いたします！
  109.             </div>
  110.             <img src="{{ asset('assets/img/page/subscription/sec2-icon3.png') }}" class="align-self-center ml-5" alt="">
  111.           </div>
  112.         </div>
  113.       </div>
  115.       <div class="is-mobile__block">
  116.         <img src="{{ asset('assets/img/page/subscription/sec2-merit3_sp.png') }}" class="img-fluid img-merit" alt="メリット3">
  117.         <h5><img src="{{ asset('assets/img/page/subscription/sec2-a3.png') }}" class="img-fluid" alt="バースデー 誕生日月 プレゼント"></h5>
  119.         <p class="mb-3">
  120.           定期便のお客さま限定で、お誕生日月にミューフル商品がお得に購入できるバースデークーポンやプレゼントなどを進呈いたします！
  121.         </p>
  122.         <img src="{{ asset('assets/img/page/subscription/sec2-icon3.png') }}" alt="" class="img-fluid d-block mx-auto">
  123.       </div>
  124.     </article>
  126.     <article class="merit-4 green">
  127.       <div class="media is-desktop__flex">
  128.         <img src="{{ asset('assets/img/page/subscription/sec2-merit4_pc.png') }}" class="mr-5 img-fluid" alt="メリット4">
  129.         <div class="media-body align-self-center">
  130.           <h5><img src="{{ asset('assets/img/page/subscription/sec2-a4.png') }}" class="img-fluid" alt="特別キャンペーンにご招待"></h5>
  131.           <div class="media">
  132.             <div class="media-body align-self-center">
  133.               定期便のお客さまだけに特別キャンペーンのご案内をお送りいたします！
  134.             </div>
  135.             <img src="{{ asset('assets/img/page/subscription/sec2-icon4.png') }}" class="align-self-center ml-5" alt="">
  136.           </div>
  137.         </div>
  138.       </div>
  140.       <div class="is-mobile__block">
  141.         <img src="{{ asset('assets/img/page/subscription/sec2-merit4_sp.png') }}" class="img-fluid img-merit" alt="メリット4">
  142.         <h5><img src="{{ asset('assets/img/page/subscription/sec2-a4.png') }}" class="img-fluid" alt="特別キャンペーンにご招待"></h5>
  144.         <p class="mb-3">
  145.           定期便のお客さまだけに特別キャンペーンのご案内をお送りいたします！
  146.         </p>
  147.         <img src="{{ asset('assets/img/page/subscription/sec2-icon4.png') }}" alt="" class="img-fluid d-block mx-auto">
  148.       </div>
  149.     </article>
  151.     <article class="merit-5 pink">
  152.       <div class="media is-desktop__flex">
  153.         <img src="{{ asset('assets/img/page/subscription/sec2-merit5_pc.png') }}" class="mr-5 img-fluid" alt="メリット5">
  154.         <div class="media-body align-self-center">
  155.           <h5><img src="{{ asset('assets/img/page/subscription/sec2-a5_pc.png') }}" class="img-fluid" alt="いつでも安心の正規品をお手元に"></h5>
  156.           <p>メーカーからの直送なので、いつでも安心の正規品が届きます。</p>
  157.           <img src="{{ asset('assets/img/page/subscription/sec2-icon5.png') }}" class="mt-4 img-fluid" alt="">
  158.         </div>
  159.       </div>
  161.       <div class="is-mobile__block">
  162.         <img src="{{ asset('assets/img/page/subscription/sec2-merit5_sp.png') }}" class="img-fluid img-merit" alt="メリット5">
  163.         <h5><img src="{{ asset('assets/img/page/subscription/sec2-a5_sp.png') }}" class="img-fluid" alt="いつでも安心の正規品をお手元に"></h5>
  165.         <p class="mb-3">
  166.           メーカーからの直送なので、いつでも安心の正規品が届きます。
  167.         </p>
  168.         <img src="{{ asset('assets/img/page/subscription/sec2-icon5.png') }}" alt="" class="img-fluid d-block mx-auto">
  169.       </div>
  170.     </article>
  171.   </div>
  172. </section>
  174. <div class="container">
  175.   <section class="sec3">
  176.     <h2><img src="{{ asset('assets/img/page/subscription/sec3-title.png') }}" class="img-fluid d-block mx-auto mb-5" alt="多くのお客様が定期便をご利用されています！"></h2>
  177.     <img src="{{ asset('assets/img/page/subscription/sec3-graph_pc.png') }}" class="img-fluid is-desktop__block mx-auto" alt="お買い物件数のうち、3件に1件以上が定期便">
  178.     <img src="{{ asset('assets/img/page/subscription/sec3-graph_sp.png') }}" class="img-fluid is-mobile__block mx-auto" alt="お買い物件数のうち、3件に1件以上が定期便">
  180.     <ul class="ul-note fs12 text-left mt-3 w50p-md-up mx-auto">
  181.       <li>2019年8～9月、ミューフル公式オンラインショップの購入件数から当社算出</li>
  182.     </ul>
  184.     <article class="reveiw-wrapper mt-5 pl-md-5 pr-md-5">
  185.       <h2 class="mt-4 mb-4"><img src="{{ asset('assets/img/page/subscription/sec3-headline.png') }}" class="img-fluid d-block mx-auto" alt="定期便ご利用のお客様の声"></h2>
  187.       <div class="card-columns">
  188.         <div class="card mt-md-11">
  189.           <div class="card-body">
  190.             <p class="card-text">買い忘れや足りなくなる心配がないので、安心してミューフルのお手入れが続けられます。</p>
  191.             <div class="name">30代　N.Y様</div>
  192.           </div>
  193.         </div>
  194.         
  195.         <div class="card">
  196.           <div class="card-body">
  197.             <p class="card-text">定期便は、パソコン操作が苦手な私にとって一度の注文で済むのでとても助かります。</p>
  198.             <div class="name">50代　K.S様</div>
  199.           </div>
  200.         </div>
  201.         
  202.         <div class="card">
  203.           <div class="card-body">
  204.             <p class="card-text">毎月、重たい商品が自宅まで届くのですごく楽です！</p>
  205.             <div class="name">50代　M.S様</div>
  206.           </div>
  207.         </div>
  208.         
  209.         <div class="card">
  210.           <div class="card-body">
  211.             <p class="card-text">ミューフルを長く続けたいので定期便を利用しています。<br>便利でありがたいです。</p>
  212.             <div class="name">40代　H.H様</div>
  213.           </div>
  214.         </div>
  215.         
  216.         <div class="card">
  217.           <div class="card-body">
  218.             <p class="card-text">ポイントがもらえる特典があるのがうれしいです。</p>
  219.             <div class="name">30代　N.A様</div>
  220.           </div>
  221.         </div>
  222.       </div>
  223.     </article>
  225.   </section>
  226. </div>
  228. <section class="sec4 bg-gray">
  229.   <div class="container">
  230.     <h2 class="w60p-md-up mx-auto text-center">
  231.       <div class="headline-border is-desktop__block">はじめやすいから続けやすい！</div>
  232.       <div class="headline-border is-mobile__block">はじめやすいから</div>
  233.       <div class="headline-border is-mobile__block">続けやすい！</div>
  234.       <div class="headline-border">定期便のポイント</div>
  235.       <img src="{{ asset('assets/img/page/subscription/sec4-title-icon.png') }}" class="icon-headline" alt="">
  236.     </h2>
  238.     <div class="w80p-md-up mx-auto">
  239.       <div class="sec4-box">
  240.         <img src="{{ asset('assets/img/page/subscription/sec4-icon-point1.png') }}" class="img-fluid d-block icon-point" alt="ポイント1">
  241.         <h3>継続は気軽にはじめられる3回からOK！</h3>
  242.         <p>ミューフルの良さを知っていただくため、まずは３回継続して商品をお使いください。</p>
  243.         <img src="{{ asset('assets/img/page/subscription/sec4-p1-img.png') }}" class="img-fluid d-block" alt="">
  244.       </div>
  246.       <div class="sec4-box">
  247.         <img src="{{ asset('assets/img/page/subscription/sec4-icon-point2.png') }}" class="img-fluid d-block icon-point" alt="ポイント2">
  248.         <h3>お届け間隔が選べる！</h3>
  249.         <p>商品のお届け間隔は、「月1回」「２ヶ月に1回」よりお選びいただけます。<br>もちろん途中で変更もOK！また、お電話やメール等でお届け間隔の変更も可能です。</p>
  250.         <img src="{{ asset('assets/img/page/subscription/sec4-p2-img.png') }}" class="img-fluid d-block" alt="">
  251.       </div>
  253.       <div class="sec4-box">
  254.         <img src="{{ asset('assets/img/page/subscription/sec4-icon-point3.png') }}" class="img-fluid d-block icon-point" alt="ポイント3">
  255.         <h3>スキップや解約もOK！</h3>
  256.         <p class="mb-0">使いきれなかった、まだ少し余っている…という場合も大丈夫。<br>「マイページ」からスキップ（次回分）ができます。3回目のお届け以降はご解約も可能です。</p>
  257.         <ul class="ul-note fs12 mb-4">
  258.           <li>3回目の定期便お受け取り以降可能</li>
  259.         </ul>
  260.         <img src="{{ asset('assets/img/page/subscription/sec4-p3-img_pc.png') }}" class="img-fluid is-desktop__block" alt="">
  261.         <img src="{{ asset('assets/img/page/subscription/sec4-p3-img_sp.png') }}" class="img-fluid is-mobile__block" alt="">
  262.         <p>スキップやご解約のお手続きは「ご注文履歴」の対象商品「詳細を見る」よりお願いいたします。</p>
  263.       </div>
  264.     </div>
  265.   </div>
  266. </section>
  269. <section class="sec5">
  270.   <h2 class="mx-auto text-center">《 定期便対象商品 》</h2>
  272.   <article>
  273.     <h3 class="bg-headline pink"><div class="container text-center text-md-left">〈スキンケア商品〉</div></h3>
  275.     <div class="container list-product">
  276.       <div class="row row-cols-2 row-cols-md-5">
  277.         <div class="col">
  278.           <a href="/products/detail/65" title="定期便 ナチュラルシリーズPN 3点セット">
  279.             <div class="card">
  280.               <img src="{{ asset('assets/img/page/subscription/sec5-p_pn3set.png') }}" class="card-img-top" alt="ナチュラルシリーズPN 3点セット">
  281.               <div class="card-body">
  282.                 <h5 class="card-title">ナチュラルシリーズPN<br>3点セット</h5>
  283.               </div>
  284.             </div>
  285.           </a>
  286.         </div>
  288.         <div class="col">
  289.           <a href="/products/detail/63" title="定期便 ナチュラルシリーズPN PNクレンジング">
  290.             <div class="card">
  291.               <img src="{{ asset('assets/img/page/subscription/sec5-p_pnc.png') }}" class="card-img-top" alt="ナチュラルシリーズPN PNクレンジング">
  292.               <div class="card-body">
  293.                 <h5 class="card-title">ナチュラルシリーズPN<br>PNクレンジング</h5>
  294.               </div>
  295.             </div>
  296.           </a>
  297.         </div>
  299.         <div class="col">
  300.           <a href="/products/detail/56" title="定期便 ナチュラルシリーズPN PNローション">
  301.             <div class="card">
  302.               <img src="{{ asset('assets/img/page/subscription/sec5-p_pnl.png') }}" class="card-img-top" alt="ナチュラルシリーズPN PNローション">
  303.               <div class="card-body">
  304.                 <h5 class="card-title">ナチュラルシリーズPN<br>PNローション</h5>
  305.               </div>
  306.             </div>
  307.           </a>
  308.         </div>
  310.         <div class="col">
  311.           <a href="/products/detail/48" title="定期便 ナチュラルシリーズPN PNパック">
  312.             <div class="card">
  313.               <img src="{{ asset('assets/img/page/subscription/sec5-p_pnp.png') }}" class="card-img-top" alt="ナチュラルシリーズPN PNパック">
  314.               <div class="card-body">
  315.                 <h5 class="card-title">ナチュラルシリーズPN<br>PNパック</h5>
  316.               </div>
  317.             </div>
  318.           </a>
  319.         </div>
  321.         <div class="col">
  322.           <a href="/products/detail/46" title="定期便 ミューフル UVジェルPN">
  323.             <div class="card">
  324.               <img src="{{ asset('assets/img/page/subscription/sec5-p_uv-gel.png') }}" class="card-img-top" alt="ミューフル UVジェルPN">
  325.               <div class="card-body">
  326.                 <h5 class="card-title">ミューフル<br>UVジェルPN</h5>
  327.               </div>
  328.             </div>
  329.           </a>
  330.         </div>
  332.         <div class="col">
  333.           <a href="/products/detail/58" title="定期便 ベーシックシリーズMB MBローション">
  334.             <div class="card">
  335.               <img src="{{ asset('assets/img/page/subscription/sec5-p_mbl.png') }}" class="card-img-top" alt="ベーシックシリーズMB MBローション">
  336.               <div class="card-body">
  337.                 <h5 class="card-title">ベーシックシリーズMB<br>MBローション</h5>
  338.               </div>
  339.             </div>
  340.           </a>
  341.         </div>
  343.         <div class="col">
  344.           <a href="/products/detail/50" title="定期便 ベーシックシリーズMB MBパック">
  345.             <div class="card">
  346.               <img src="{{ asset('assets/img/page/subscription/sec5-p_mbp.png') }}" class="card-img-top" alt="ベーシックシリーズMB MBパック">
  347.               <div class="card-body">
  348.                 <h5 class="card-title">ベーシックシリーズMB<br>MBパック</h5>
  349.               </div>
  350.             </div>
  351.           </a>
  352.         </div>
  354.         <div class="col">
  355.           <a href="/products/detail/54" title="定期便 ミューフル ROSE EX">
  356.             <div class="card">
  357.               <img src="{{ asset('assets/img/page/subscription/sec5-p_rose-ex.png') }}" class="card-img-top" alt="ミューフル ROSE EX">
  358.               <div class="card-body">
  359.                 <h5 class="card-title">ミューフル<br>ROSE EX</h5>
  360.               </div>
  361.             </div>
  362.           </a>
  363.         </div>
  365.         <div class="col">
  366.           <a href="/products/detail/52" title="定期便 EGF配合 エクストラエッセンスPN">
  367.             <div class="card">
  368.               <img src="{{ asset('assets/img/page/subscription/sec5-p_egf.png') }}" class="card-img-top" alt="EGF配合 エクストラエッセンスPN">
  369.               <div class="card-body">
  370.                 <h5 class="card-title">EGF配合<br>エクストラエッセンスPN</h5>
  371.               </div>
  372.             </div>
  373.           </a>
  374.         </div>
  376.         <div class="col">
  377.           <a href="/products/detail/44" title="定期便 オイルフリー ファンデーション マリンカラー">
  378.             <div class="card">
  379.               <img src="{{ asset('assets/img/page/subscription/sec5-p_marine-color.png') }}" class="card-img-top" alt="オイルフリー ファンデーション マリンカラー">
  380.               <div class="card-body">
  381.                 <h5 class="card-title">オイルフリー<br>ファンデーション<br>マリンカラー</h5>
  382.               </div>
  383.             </div>
  384.           </a>
  385.         </div>
  387.       </div>
  388.     </div>
  389.   </article>
  391.   <article>
  392.     <h3 class="bg-headline green"><div class="container text-center text-md-left">〈インナーケア商品〉</div></h3>
  394.     <div class="container list-product">
  395.       <div class="list-product row row-cols-2 row-cols-md-5">
  397.         <div class="col">
  398.           <a href="/products/detail/36" title="定期便 ワカワカ">
  399.             <div class="card">
  400.               <img src="{{ asset('assets/img/page/subscription/sec5-p_wakawaka.png') }}" class="card-img-top" alt="ワカワカ">
  401.               <div class="card-body">
  402.                 <h5 class="card-title">ワカワカ</h5>
  403.               </div>
  404.             </div>
  405.           </a>
  406.         </div>
  408.         <div class="col">
  409.           <a href="/products/detail/32" title="定期便 クルクミン99 & ルテイン">
  410.             <div class="card">
  411.               <img src="{{ asset('assets/img/page/subscription/sec5-p_crucmin.png') }}" class="card-img-top" alt="クルクミン99 & ルテイン">
  412.               <div class="card-body">
  413.                 <h5 class="card-title">クルクミン99 & ルテイン</h5>
  414.               </div>
  415.             </div>
  416.           </a>
  417.         </div>
  419.         <div class="col">
  420.           <a href="/products/detail/34" title="定期便 ベルスヴェルト">
  421.             <div class="card">
  422.               <img src="{{ asset('assets/img/page/subscription/sec5-p_bells-velt.png') }}" class="card-img-top" alt="ベルスヴェルト">
  423.               <div class="card-body">
  424.                 <h5 class="card-title">ベルスヴェルト</h5>
  425.               </div>
  426.             </div>
  427.           </a>
  428.         </div>
  430.         <div class="col">
  431.           <a href="/products/detail/38" title="定期便 KOUSO">
  432.             <div class="card">
  433.               <img src="{{ asset('assets/img/page/subscription/sec5-p_kouso.png') }}" class="card-img-top" alt="KOUSO">
  434.               <div class="card-body">
  435.                 <h5 class="card-title">KOUSO</h5>
  436.               </div>
  437.             </div>
  438.           </a>
  439.         </div>
  441.         <div class="col">
  442.           <a href="/products/detail/42" title="定期便 ミューフルザクロ">
  443.             <div class="card">
  444.               <img src="{{ asset('assets/img/page/subscription/sec5-p_zakuro.png') }}" class="card-img-top" alt="ミューフルザクロ">
  445.               <div class="card-body">
  446.                 <h5 class="card-title">ミューフルザクロ</h5>
  447.               </div>
  448.             </div>
  449.           </a>
  450.         </div>
  452.       </div>
  453.     </div>
  454.   </article>
  456.   <article>
  457.     <h3 class="bg-headline blue"><div class="container text-center text-md-left">〈ヘアケア商品〉</div></h3>
  459.     <div class="container list-product">
  460.       <div class="row row-cols-2 row-cols-md-5">
  462.         <div class="col">
  463.           <a href="/products/detail/16" title="定期便 サブナEX ダブルローズ">
  464.             <div class="card">
  465.               <img src="{{ asset('assets/img/page/subscription/sec5-p_sabuna.png') }}" class="card-img-top" alt="サブナEX ダブルローズ">
  466.               <div class="card-body">
  467.                 <h5 class="card-title">サブナEX<br>ダブルローズ</h5>
  468.               </div>
  469.             </div>
  470.           </a>
  471.         </div>
  473.         <div class="col">
  474.           <a href="/products/detail/12" title="定期便 FGF-7配合 ヘアソープ">
  475.             <div class="card">
  476.               <img src="{{ asset('assets/img/page/subscription/sec5-p_fgf-soap.png') }}" class="card-img-top" alt="FGF-7配合 ヘアソープ">
  477.               <div class="card-body">
  478.                 <h5 class="card-title">FGF-7配合<br>ヘアソープ</h5>
  479.               </div>
  480.             </div>
  481.           </a>
  482.         </div>
  484.         <div class="col">
  485.           <a href="/products/detail/14" title="定期便 FGF-7配合 ヘアサプリ">
  486.             <div class="card">
  487.               <img src="{{ asset('assets/img/page/subscription/sec5-p_fgf-suppli.png') }}" class="card-img-top" alt="FGF-7配合 ヘアサプリ">
  488.               <div class="card-body">
  489.                 <h5 class="card-title">FGF-7配合<br>ヘアサプリ</h5>
  490.               </div>
  491.             </div>
  492.           </a>
  493.         </div>
  495.       </div>
  496.     </div>
  497.   </article>
  499. </section>
  501. <section class="sec6 bg-gray">
  502.   <div class="container">
  503.     <h2><img src="{{ asset('assets/img/page/subscription/sec6-title.png') }}" class="img-fluid d-block mx-auto" alt="ご注文方法＆ご注文の流れ"></h2>
  505.     <article class="step">
  506.       <h3>①定期便を希望される商品ページへ</h3>
  507.       <div class="step-wrapper">
  508.         <p>
  509.           定期便を希望する商品から、「定期便（毎月）」「定期便（２ヶ月毎）」いずれかを選択し、カートに入れてくだい。
  510.         </p>
  511.         <ul class="ul-note">
  512.           <li>会員登録がお済みでない方は、<a href="{{ url('entry') }}" class="color-dark-pink">新規会員登録</a>をお願いいたします。</li>
  513.         </ul>
  514.         <img src="{{ asset('assets/img/page/subscription/sec6-img1_pc.png') }}" class="img-fluid is-desktop__block" alt="「定期便（毎月）」または「定期便（２ヶ月毎）」を選択">
  515.         <img src="{{ asset('assets/img/page/subscription/sec6-img1_sp.png') }}" class="img-fluid is-mobile__block" alt="「定期便（毎月）」または「定期便（２ヶ月毎）」を選択">
  516.       </div>
  517.     </article>
  519.     <div class="icon-caret-down"><i class="fas fa-caret-down fa-7x color-pink"></i></div>
  521.     <article class="step">
  522.       <h3>②ショッピングカートへ</h3>
  523.       <div class="step-wrapper">
  524.         <p>
  525.           レジにお進みください。「ご注文手続き」画面で、お届け日とお届け時間をご指定いただき、「ご注文内容のご確認」画面にて「決済する」ボタンを押してください。
  526.         </p>
  527.         <img src="{{ asset('assets/img/page/subscription/sec6-img2_pc.png') }}" class="img-fluid is-desktop__block" alt="「お届け日」、「お届け時間」を選択">
  528.         <img src="{{ asset('assets/img/page/subscription/sec6-img2_sp.png') }}" class="img-fluid is-mobile__block" alt="「お届け日」、「お届け時間」を選択">
  529.       </div>
  530.     </article>
  532.     <div class="text-center"><i class="fas fa-caret-down fa-7x color-pink"></i></div>
  534.     <article class="step">
  535.       <h3>③クレジットカード決済へ</h3>
  536.       <div class="step-wrapper">
  537.         <p>
  538.           「クレジットカード情報入力」画面にてお支払いされるクレジットカード情報をご入力ください。最後に「支払いを行う」ボタンを押すと購入が完了します。
  539.         </p>
  540.         <img src="{{ asset('assets/img/page/subscription/sec6-img3_pc.png') }}" class="img-fluid is-desktop__block" alt="クレジットカード情報を入力">
  541.         <img src="{{ asset('assets/img/page/subscription/sec6-img3_sp.png') }}" class="img-fluid is-mobile__block" alt="クレジットカード情報を入力">
  542.       </div>
  543.     </article>
  545.     <h3 class="all-set">ご注文完了</h3>
  547.     <div class="text-center"><i class="fas fa-caret-down fa-7x color-pink"></i></div>
  549.     <article class="step">
  550.       <h3>④定期便スタート</h3>
  551.       <div class="step-wrapper">
  552.         <p>
  553.           お客様が指定した日時に商品をお届けいたします。
  554.         </p>
  555.         <img src="{{ asset('assets/img/page/subscription/sec6-img4.png') }}" class="img-fluid d-block mx-auto" alt="">
  556.       </div>
  557.     </article>
  558.     
  559.     <div class="text-center"><i class="fas fa-caret-down fa-7x color-pink"></i></div>
  561.     <div class="notification">
  562.       <div class="notification-wrapper">
  563.         <h4>〈ご登録内容に変更がある場合〉</h4>
  564.         <p><span class="color-red bold">次回お届け日の10日前まで</span>に「マイページ」より変更のお手続きをお願いいたします。</p>
  565.         <ul>
  566.           <li>お名前・ご住所・電話番号・お届け先</li>
  567.           <li>クレジットカード情報の変更</li>
  568.           <li>スキップ（次回分の停止）※3回目のお届け移行より可能</li>
  569.           <li>解約のお手続き※3回目のお届け以降より可能</li>
  570.         </ul>
  571.         <ul class="ul-note">
  572.           <li>クレジットカード情報の変更・スキップ・解約のお手続きはご注文履歴の対象商品の「詳細を見る」ボタンより<u>商品ごとに</u>おこなって頂ますようお願い致します。</li>
  573.         </ul>
  574.       </div>
  575.       <div class="navigator"><img src="{{ asset('assets/img/page/subscription/sec6-icon-charactor.png') }}" class="img-fluid" alt=""></div>
  576.     </div>
  577.   </div>
  578. </section>
  580. <section class="sec7">
  581.   <div class="container">
  582.     <h2 class="w70p-md-up mx-auto text-center mt-5">
  583.       <div class="headline-border is-desktop__block">定期便について詳しく知りたい</div>
  584.       <div class="headline-border is-mobile__block">定期便について</div>
  585.       <div class="headline-border is-mobile__block">詳しく知りたい</div>
  586.       <div class="headline-border">困ったときはこちら</div>
  587.       <img src="{{ asset('assets/img/page/subscription/sec7-title-icon.png') }}" class="icon-headline" alt="">
  588.     </h2>
  590.     <div class="w80p-md-up mx-auto">
  591.       <a href="/static/subscription" class="btn btn-caret-right__before btn-lg mb-3">定期便ガイド</a>
  592.       <p class="mb-5">
  593.         定期便のお買い物に関する内容を記載しております。<br>
  594.         定期便をされる方は必ずご一読いただきますようお願いいたします。
  595.       </p>
  597.       <a href="/help/faq#nav-purchase@collapsePurchase9" class="btn btn-caret-right__before btn-lg mb-3">よくあるご質問</a>
  598.       <p>
  599.         お買い物や定期便、ミューフル商品に関してお客様よりよくいただくご質問をまとめています。
  600.       </p>
  602.       <p class="mt-2 mb-5">
  603.         その他お問い合わせ、商品の使用方法、お困りごとや不安などについては、以下へお問い合わせください。
  604.       </p>
  606.       <ul class="list-unstyled">
  607.         <li class="media">
  608.           <a href="/products/list?category_id=8" title="『スキンケア商品』の定期便はこちら">
  609.             <img src="{{ asset('assets/img/page/subscription/sec7-icon-skincare.png') }}" class="align-self-center mr-3 img-fluid" alt="">
  610.           </a>
  611.           <div class="media-body align-self-center pink">
  612.             <a href="/products/list?category_id=8" title="『スキンケア商品』の定期便はこちら">
  613.               <h5><i class="fas fa-caret-right fa-2x"></i>『スキンケア商品』の定期便はこちら</h5>
  614.             </a>
  615.           </div>
  616.         </li>
  617.         <li class="media my-3">
  618.           <a href="/products/list?category_id=10" title="『インナーケア商品』の定期便はこちら">
  619.             <img src="{{ asset('assets/img/page/subscription/sec7-icon-innercare.png') }}" class="align-self-center mr-3 img-fluid" alt="">
  620.           </a>
  621.           <div class="media-body align-self-center green">
  622.             <a href="/products/list?category_id=10" title="『インナーケア商品』の定期便はこちら">
  623.               <h5 class="mt-0 mb-1"><i class="fas fa-caret-right fa-2x color-green"></i>『インナーケア商品』の定期便はこちら</h5>
  624.             </a>
  625.           </div>
  626.         </li>
  627.         <li class="media">
  628.           <a href="/products/list?category_id=9" title="『ヘアケア商品』の定期便はこちら">
  629.             <img src="{{ asset('assets/img/page/subscription/sec7-icon-haircare.png') }}" class="align-self-center mr-3 img-fluid" alt="">
  630.           </a>
  631.           <div class="media-body align-self-center blue">
  632.             <a href="/products/list?category_id=9" title="『ヘアケア商品』の定期便はこちら">
  633.               <h5 class="mt-0 mb-1"><i class="fas fa-caret-right fa-2x color-blue"></i>『ヘアケア商品』の定期便はこちら</h5>
  634.             </a>
  635.           </div>
  636.         </li>
  637.       </ul>
  638.   </div>
  640.   </div>
  641. </section>
  642. {% endblock %}