app/template/user_data/campaign_introduce.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  4. <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:500,700,900&display=swap" rel="stylesheet">
  5. <style>
  6.   .introduce {
  7.     font-size: 150%;
  8.     font-family: 'M PLUS Rounded 1c', sans-serif;
  9.     font-weight: 500;
  10.   }
  12.   .introduce div {
  13.     width: 100%;
  14.     box-sizing: border-box;
  15.   }
  17.   .introduce img {
  18.     width: 100%;
  19.   }
  21.   .sec-wrapper {
  22.     margin-bottom: 30px;
  23.     padding: 3%;
  24.   }
  26.   .mainVisual {
  27.     margin-bottom: 30px;
  28.   }
  30.   .sec01 {
  31.     display: -webkit-flex;
  32.     display: flex;
  33.     -webkit-flex-flow: row wrap;
  34.     flex-flow: row wrap;
  35.     -webkit-justify-content: space-between;
  36.     justify-content: space-between;
  37.     -webkit-align-items: center;
  38.     align-items: center;
  39.     border: 4px dotted #ff9400;
  40.     padding: 5%;
  41.     border-radius: 10px;
  42.   }
  44.   .sec01 .description,
  45.   .sec01 .photo {
  46.     width: 100%;
  47.     font-weight: 700;
  48.   }
  50.   .sec02 {
  51.     padding: 5%;
  52.     background: #fff7af;
  53.   }
  55.   .sec02 .title {
  56.     margin-bottom: 0;
  57.   }
  59.   .sec02 .description {
  60.     padding: 3%;
  61.     background: #fff;
  62.     text-align: center;
  63.     background-image:
  64.       url("./image/sp_bg_sec02_01.png"),
  65.       /* 最前面の背景レイヤーの背景画像 */
  66.       url("./image/sp_bg_sec02_02.png");
  68.     background-repeat:
  69.       no-repeat,
  70.       /* 最前面の背景レイヤーに対応 */
  71.       no-repeat;
  73.     background-position:
  74.       3% center,
  75.       /* 最前面の背景レイヤーに対応 */
  76.       right 3% bottom 5%;
  78.     background-size:
  79.       auto 70%,
  80.       auto 50%;
  81.   }
  83.   .sec02 .description span {
  84.     background: #ffff52;
  85.     paddding: .25em;
  86.     color: #c00;
  87.     font-weight: 700;
  88.   }
  90.   .sec02 .description strong {
  91.     font-size: 150%;
  92.   }
  94.   .sec03 {
  95.     padding: 5%;
  96.     background: #fff7af;
  97.   }
  99.   .sec03 .title {
  100.     margin-bottom: .25em;
  101.   }
  103.   .sec03 .cell01 {
  104.     margin-bottom: 30px;
  105.   }
  107.   .sec03 .cell01:last-of-type {
  108.     margin-bottom: 0;
  109.   }
  111.   .sec03 dd {
  112.     text-align: center;
  113.   }
  115.   .link {
  116.     margin: 0 auto 60px;
  117.     text-align: center;
  118.   }
  120.   .sec04 {
  121.     padding: 5%;
  122.     background: #f0f0f0;
  123.   }
  125.   .sec04 .title {
  126.     margin-bottom: .25em;
  127.     font-size: 150%;
  128.     font-weight: 700;
  129.     text-align: center;
  130.     letter-spacing: .5em;
  131.   }
  133.   .sec04 .list01 {
  134.     width: 95%;
  135.     width: calc(100% - 1em);
  136.     padding-left: 1em;
  137.     list-style: inside;
  138.   }
  140.   .sec04 .list01 li {
  141.     margin-bottom: 1em;
  142.     list-style-type: disc;
  143.     font-size: 88.89%;
  144.   }
  146.   @media screen and (min-width: 768px) {
  147.     .introduce {
  148.       font-size: 125%;
  149.     }
  151.     .sec01 {
  152.       border: 6px dotted #ff9400;
  153.     }
  155.     .sec01 .description {
  156.       width: 60%;
  157.     }
  159.     .sec01 .photo {
  160.       width: 38%;
  161.     }
  163.     .sec02 {
  164.       padding: 3%;
  165.     }
  167.     .sec02 .description {
  168.       background-image:
  169.         url("./image/bg_sec02_01.png"),
  170.         /* 最前面の背景レイヤーの背景画像 */
  171.         url("./image/bg_sec02_02.png");
  173.       background-position:
  174.         3% center,
  175.         /* 最前面の背景レイヤーに対応 */
  176.         right 3% bottom 10%;
  178.       background-size:
  179.         auto 90%,
  180.         auto 80%;
  181.     }
  183.     .sec03 {
  184.       padding: 3%;
  185.     }
  187.     .sec03 dl {
  188.       display: -webkit-flex;
  189.       display: flex;
  190.       -webkit-flex-flow: row wrap;
  191.       flex-flow: row wrap;
  192.       -webkit-justify-content: space-between;
  193.       justify-content: space-between;
  194.       -webkit-align-items: stretch;
  195.       align-items: stretch;
  196.     }
  198.     .sec03 .cell01 {
  199.       width: 32%;
  200.     }
  202.     .sec03 dd {
  203.       text-align: left;
  204.       font-size: 90%;
  205.     }
  207.     .sec03 dd br {
  208.       display: none;
  209.     }
  211.     .link {
  212.       width: 60% !important;
  213.     }
  214.   }
  215. </style>
  216. <div class="introduce ec-ContentsRole">
  217.   <div class="mainVisual">
  218.     <picture>
  219.       <source media="(max-width: 767px)" type="image/webp"
  220.         srcset="{{ asset('assets/img/campaign/introduce/sp_mv.webp') }}">
  221.       <source media=" (max-width: 767px)" srcset="{{ asset('assets/img/campaign/introduce/sp_mv.png') }}">
  222.       <source type="image/webp" srcset="{{ asset('assets/img/campaign/introduce/mv.webp') }}">
  223.       <img src=" {{ asset('assets/img/campaign/introduce/mv.png') }}" alt="みんなで健康生活！ミリオンストア　お友達紹介キャンペーン" width="100%">
  224.     </picture>
  225.   </div>
  226.   <div class="sec01 sec-wrapper">
  227.     <div class="description">
  228.       ミリオンをいつもご愛顧くださっているお客様からお友達へお気に入りの商品をご紹介してみませんか？<br>
  229.       こだわりの国産緑黄色野菜ジュースやミリオンパワーなどのこだわり健康食品でお友達と健康生活を送りましょう！
  230.     </div>
  231.     <div class="photo">
  232.       <picture>
  233.         <source type="image/webp" srcset="{{ asset('assets/img/campaign/introduce/sp_img_sec01_01.webp') }}">
  234.         <img src=" {{ asset('assets/img/campaign/introduce/sp_img_sec01_01.png') }}" alt="家族の笑顔">
  235.       </picture>
  236.     </div>
  237.   </div>
  238.   <div class="sec02 sec-wrapper">
  239.     <h3 class="title">
  240.       <picture>
  241.         <source media="(max-width: 767px)" type="image/webp"
  242.           srcset="{{ asset('assets/img/campaign/introduce/sp_tit_sec02_01.webp') }}">
  243.         <source media=" (max-width: 767px)" srcset="{{ asset('assets/img/campaign/introduce/sp_tit_sec02_01.png') }}">
  244.         <source type="image/webp" srcset="{{ asset('assets/img/campaign/introduce/tit_sec02_01.webp') }}">
  245.         <img src=" {{ asset('assets/img/campaign/introduce/tit_sec02_01.png') }}" alt="キャンペーン特典">
  246.       </picture>
  247.     </h3>
  248.     <div class="description">
  249.       お友達をご紹介いただくと…<br>
  250.       <span><strong>1000円</strong>割引のクーポン</span>を<br>
  251.       プレゼント！
  252.     </div>
  253.   </div>
  254.   <div class="sec03 sec-wrapper">
  255.     <h3 class="title">
  256.       <picture>
  257.         <source media="(max-width: 767px)" type="image/webp"
  258.           srcset="{{ asset('assets/img/campaign/introduce/sp_tit_sec03_01.webp') }}">
  259.         <source media=" (max-width: 767px)" srcset="{{ asset('assets/img/campaign/introduce/sp_tit_sec03_01.png') }}">
  260.         <source type="image/webp" srcset="{{ asset('assets/img/campaign/introduce/tit_sec03_01.webp') }}">
  261.         <img src=" {{ asset('assets/img/campaign/introduce/tit_sec03_01.png') }}" alt="キャンペーン特典">
  262.       </picture>
  263.     </h3>
  264.     <dl>
  265.       <div class="cell01">
  266.         <dt>
  267.           <picture>
  268.             <source media="(max-width: 767px)" type="image/webp"
  269.               srcset="{{ asset('assets/img/campaign/introduce/sp_img_sec03_01.webp') }}">
  270.             <source media=" (max-width: 767px)"
  271.               srcset="{{ asset('assets/img/campaign/introduce/sp_img_sec03_01.png') }}">
  272.             <source type="image/webp" srcset="{{ asset('assets/img/campaign/introduce/img_sec03_01.webp') }}">
  273.             <img src=" {{ asset('assets/img/campaign/introduce/img_sec03_01.png') }}" alt="01.応募フォームに入力">
  274.           </picture>
  275.         </dt>
  276.         <dd>
  277.           応募フォームに入力
  278.         </dd>
  279.       </div>
  280.       <div class="cell01">
  281.         <dt>
  282.           <picture>
  283.             <source media="(max-width: 767px)" type="image/webp"
  284.               srcset="{{ asset('assets/img/campaign/introduce/sp_img_sec03_02.webp') }}">
  285.             <source media=" (max-width: 767px)"
  286.               srcset="{{ asset('assets/img/campaign/introduce/sp_img_sec03_02.png') }}">
  287.             <source type=" image/webp" srcset="{{ asset('assets/img/campaign/introduce/img_sec03_02.webp') }}">
  288.             <img src=" {{ asset('assets/img/campaign/introduce/img_sec03_02.png') }}" alt="02.お友達に1000円引クーポンをお届けします。">
  289.           </picture>
  290.         </dt>
  291.         <dd>
  292.           お友達に1000円引クーポンを<br>お届けします。
  293.         </dd>
  294.       </div>
  295.       <div class="cell01">
  296.         <dt>
  297.           <picture>
  298.             <source media="(max-width: 767px)" type="image/webp"
  299.               srcset="{{ asset('assets/img/campaign/introduce/sp_img_sec03_03.webp') }}">
  300.             <source media=" (max-width: 767px)"
  301.               srcset="{{ asset('assets/img/campaign/introduce/sp_img_sec03_03.png') }}">
  302.             <source type="image/webp" srcset="{{ asset('assets/img/campaign/introduce/img_sec03_03.webp') }}">
  303.             <img src=" {{ asset('assets/img/campaign/introduce/img_sec03_03.png') }}"
  304.               alt="03.お友達が購入するとあなたにも2000円クーポンをプレゼント！">
  305.           </picture>
  306.         </dt>
  307.         <dd>
  308.           お友達が購入すると<br>あなたにも1000円ポイント<br>プレゼント！
  309.         </dd>
  310.       </div>
  311.     </dl>
  312.   </div>
  313.   <div class="link">
  314.     <a href="https://million-store.com/wp/introduce/">
  315.       <picture>
  316.         <source media="(max-width: 767px)" type="image/webp"
  317.           srcset="{{ asset('assets/img/campaign/introduce/sp_btn_odr_01.webp') }}">
  318.         <source media=" (max-width: 767px)" srcset="{{ asset('assets/img/campaign/introduce/sp_btn_odr_01.png') }}">
  319.         <source type="image/webp" srcset="{{ asset('assets/img/campaign/introduce/btn_odr_01.webp') }}">
  320.         <img src=" {{ asset('assets/img/campaign/introduce/btn_odr_01.png" alt="早速お友達を紹介する?') }}">
  321.       </picture>
  322.     </a>
  323.   </div>
  324.   <div class="sec04 sec-wrapper">
  325.     <h3 class="title">注意事項</h3>
  326.     <ul class="list01">
  327.       <li>ご紹介する方はミリオンストアでのご購入履歴がある方のみです。<br>
  328.         （リンク＞＞<a href="{{ url('homepage') }}entry" target="_blank">会員登録はこちら</a>）
  329.       </li>
  330.       <li>ご紹介されるお友達は、ミリオンストアからメールが直接送られます。
  331.         事前にその旨をお伝えください。
  332.       </li>
  333.       <li>「お友達紹介キャンペーン」はミリオンストアでのお買い物のみ適用されます。</li>
  334.       <li>クーポンはミリオンストアでお使いいただけます。使用方法はご利用ガイドの「ポイント・クーポンについて」をご覧ください　（リンク＞<a
  335.           href="{{ url('homepage') }}shopping-guide#point">「ポイント・クーポンについて」</a>）</li>
  336.       <li>ご紹介する方またはご紹介されるお友達に送られるクーポン1000円分は1回のご購入金額が3000円（税抜）（送料別）以上からご利用いただけます。</li>
  337.       <li>クーポンの有効期限は1年間です。</li>
  338.       <li>定期コースにはクーポンを使用できません。</li>
  339.       <li>ご注文済み、発送済みの商品にはクーポンが使用できません。</li>
  340.       <li>クーポンを使用してご注文された商品が返品・キャンセルとなった場合でも、クーポンの再発行はできません。</li>
  341.       <li>ご紹介いただく人数に制限はございません。</li>
  342.       <li>お友達が同居のご家族、すでに購入履歴がある方、購入金額が3000円未満だった場合には、クーポンは発行・適用いたしかねます。</li>
  343.     </ul>
  344.   </div>
  345. </div>
  347. {% endblock %}