app/template/default/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set body_class = 'home-page js-home-page' %}
  3. {% set title = '' %}
  4. {% block main %}
  5. <section class="mv" id="mv">
  6.   <div class="mv__img" id="mv-img">
  7.     <!--
  8.     <img src="/assets/img/mv.png" alt="" />
  9.     -->
  10.   </div>
  11.   <div class="mv__overlay" id="mv-overlay"></div>
  12.   <div
  13.     class="mv__logo"
  14.     id="mv-logo"
  15.     data-img="/assets/img/mv-logo.png"
  16.   ></div>
  17.   <div id="mv-logo-text" class="mv__logo__text">
  18.     <img src="/assets/img/logo.svg" alt="">
  19.   </div>
  20. </section>
  21. <section style="padding: 200px 0 20px 0; background: linear-gradient(180deg, #f8f8f8 0%, #ffffff 100%);">
  22.   <div class="container">
  23.     <div style="max-width: 900px; margin: 0 auto; text-align: center;">
  24.       <h2 style="font-size: 30px; font-weight: bold; color: #333; margin-bottom: 18px; letter-spacing: 0.1em;">
  25.         ぷろたんに紹介されました
  26.       </h2>
  27.       <p style="font-size: 16px; color: #666; margin-bottom: 40px; line-height: 1.8;">
  28.         YouTuberぷろたん氏にアルコバーナーをご紹介いただきました
  29.       </p>
  30.       <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);">
  31.         <iframe 
  32.           style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
  33.           src="https://www.youtube.com/embed/uJtM4VjgPbs?si=fq53u2SMxSZSNklv&amp;start=1644"
  34.           title="ぷろたん - アルコバーナー紹介" 
  35.           frameborder="0" 
  36.           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  37.           allowfullscreen>
  38.         </iframe>
  39.       </div>
  40.     </div>
  41.   </div>
  42. </section>
  43. <section class="about">
  44.   <div class="container">
  45.     <div class="about__content inview">
  46.       <h1 class="about__caution">
  47.         <div class="about__caution__text1">アルコバーナーの公式ECサイトです</div>
  48.         <div class="about__caution__text2">新商品切替に伴い現在予約購入になります。発送は2月上旬です。</div>
  49.         <br>
  50.         <a href="news/20/" class="btn -chevron">新パッケージについてはこちら</a> 
  51.         <br>
  52.         <a href="news/19/" class="btn -chevron">アルコバーナーの歴史についてはこちら</a>
  53.         <br>
  54.         <a href="news/18/" class="btn -chevron">クーポンの使用方法についてはこちら</a>
  55.         <br>
  56.       </h1>
  57.       <h2 class="about__title">ABOUT</h2>
  58.       <h3 class="about__sub-title">
  59.         アルコールとうまくお付き合いしたい方へ
  60.       </h3>
  61.       <div class="about__text">
  62.         <p>
  63.           アルコバーナーは、30年にわたる研究開発の結果と<br
  64.             class="sp"
  65.           />科学的検証に裏付けられた栄養補助食品(サプリメント)です。<br />高性能バクテリア<br
  66.             class="sp"
  67.           />de Faire Medical独自のAB001™️フォーミュラを配合<br />ビタミンB12配合でアクティブな毎日と<br
  68.             class="sp"
  69.           />必要不可欠な生活プロセスをサポートします。
  70.         </p>
  71.         <small>
  72.           ※栄養補助食品の吸収のされ方は人それぞれ異なり、<br
  73.             class="sp"
  74.           />さまざまな内的・外的要因に左右されます。
  75.         </small>
  76.       </div>
  77.     </div>
  78.   </div>
  79.   <div class="about__img inview">
  80.     <div class="img-wrap"><img src="/assets/img/about/about_v_1.jpg" alt="" /></div>
  81.     <div class="img-wrap"><img src="/assets/img/about/about_v_2.jpg" alt="" /></div>
  82.     <div class="img-wrap"><img src="/assets/img/about/about_v_3.jpg" alt="" /></div>
  83.     <div class="img-wrap"><img src="/assets/img/about/about_v_4.jpg" alt="" /></div>
  84.   </div>
  85. </section>
  86. <section class="product">
  87.   <div class="product__head inview">
  88.     <div class="container product__container">
  89.       <h2 class="product__title">PRODUCT</h2>
  90.       <p class="product__intro">
  91.         ※18歳未満のお子様、妊娠中または授乳中の女性には適しません。
  92.         <br />※薬を服用されている方、持病のある方は、<br
  93.           class="sp"
  94.         />かかりつけ医や専門医にご相談されることをお勧めします。<br />※栄養補助食品の吸収のされ方は人それぞれ異なり、<br
  95.           class="sp"
  96.         />さまざまな内的・外的要因に左右されます。
  97.       </p>
  98.     </div>
  99.   </div>
  100.   {% for product in products %}
  101.     <div class="product__row inview">
  102.       <div class="product__img">
  103.         <img src="{{ asset(product.main_list_image|no_image_product, 'save_image') }}" alt="{{ product.name }}" />
  104.       </div>
  105.       <div class="product__info">
  106.         <h3 class="product__name">{{ product.name }}</h3>
  107.         <p class="product__price">
  108.           {% if product.subscription_discount_rate is defined and product.subscription_discount_rate > 0 %}
  109.             {% set discount_rate = product.subscription_discount_rate %}
  110.             {% set original_price = product.getPrice02IncTaxMin %}
  111.             {% set discounted_price = (original_price * (100 - discount_rate) / 100)|round(0, 'floor') %}
  112.             <span style="color: red; font-weight: bold; margin-right: 10px;">-{{ discount_rate }}%</span>
  113.             <span>{{ discounted_price|price }}(税込)</span>
  114.             <br>
  115.             <span style="font-size: 0.9em; color: #999;">参考価格:
  116.             <span style="text-decoration: line-through;">{{ original_price|price }}(税込)</span>
  117.             </span>
  118.           {% else %}
  119.             {{ product.getPrice02IncTaxMin|price }}(税込)
  120.           {% endif %}
  121.         </p>
  122.         <p class="product__text">
  123.           原材料:
  124.           米ぬか加工食品乳酸菌酵母含有米ぬか発酵物、
  125.           デキストリン、ビタミンB12
  126.           ミルクシスル、HMPC(カプセル)
  127.         </p>
  128.         <div class="product__btns">
  129.           <div class="product__btn">
  130.             <a href="{{ url('product_detail', {'id': product.id}) }}" class="btn">予約購入</a>
  131.             <p style="color: red; padding: 5px 0; font-size: 12px;text-align: center;">※ こちらの商品は2月上旬にお届け予定です。</p>
  132.           </div>
  133.           {% if subMap[product.id] is defined %}
  134.           <div class="product__btn">
  135.             <a href="{{ url('product_detail', {'id': subMap[product.id]}) }}" class="btn">予約購入</a>
  136.             <p style="color: red; padding: 5px 0; font-size: 12px;text-align: center;">※ こちらの商品は2月上旬にお届け予定です。</p>
  137.           </div>
  138.           {% endif %}
  139.         </div>
  140.       </div>
  141.     </div>
  142.   {% endfor %}
  143. </section>
  144. {% if (IS_PROD) %}
  145. <section class="news">
  146.   <div class="container news__container">
  147.     <div class="news__content inview">
  148.       <h2 class="news__title">NEWS</h2>
  149.       <div class="news__slider">
  150.         <div class="splide js-news-slider" role="group">
  151.           <div class="splide__track">
  152.             <ul class="splide__list">
  153.               {% for blog in news %}
  154.               <li class="splide__slide news__slide">
  155.                 <div class="news__slide-thumb">
  156.                   {% if blog.getMainListImage %}
  157.                     <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  158.                   {% else %}
  159.                     <img src="/assets/img/news-slide-01.jpg" alt="" />
  160.                   {% endif %}
  161.                 </div>
  162.                 <div class="news__slide-content">
  163.                   <time class="news__slide-time">{{ blog.release_date|date('Y.m.d')}}</time>
  164.                   <h3 class="news__slide-title">{{ blog.getTitle|length > 45 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.getTitle|raw }}</h3>
  165.                   <p class="news__slide-excerpt">
  166.                   {{ blog.getBody|length > 60 ? blog.getBody|striptags|replace({('&nbsp;'):' '})|slice(0, 60)|raw ~ '...' : blog.getBody|striptags|raw }}
  167.                   </p>
  168.                   <a href="{{ url('cm_blog_pro_page_detail', {'id': blog.slug ? blog.slug : blog.id}) }}" class="news__slide-link">View more</a>
  169.                 </div>
  170.               </li>
  171.               {% endfor %}
  172.             </ul>
  173.           </div>
  174.         </div>
  175.       </div>
  176.       <div class="news__btn">
  177.         <a href="/news" class="btn -chevron">View ALL</a>
  178.       </div>
  179.     </div>
  180.   </div>
  181. </section>
  182. {% endif %}
  183. <section class="dev-voice">
  184.   <div class="container">
  185.     <div class="dev-voice__content inview">
  186.       <h2 class="dev-voice__title">
  187.         <span>DEVELOPER VOICE</span>
  188.         <span>開発者の声</span>
  189.       </h2>
  190.       <div class="dev-voice__content__inner">
  191.         <div class="dev-voice__img">
  192.           <img src="/assets/img/developer.jpg" alt="" />
  193.         </div>
  194.         <div class="dev-voice__content__inner__text">
  195.           <h3 class="dev-voice__sub-title">
  196.             アルコバーナーは<br class="pc" />
  197.             スウェーデンの生物化学者・微生物学者<br class="pc" />
  198.             Johan de Faire教授によって開発されました。
  199.           </h3>
  200.           <div class="dev-voice__text">
  201.             <p>
  202.             1990年代から、ヒト消化器系を調節する目的で片球菌属を体系化することを主な研究課題とし、日本で研究が始まりました。<br />
  203.             米ぬかから抽出した天然の善玉菌を使い、動物のお腹の中の菌のバランスを整え、健康を増進させるものです。<br class="pc" />
  204.             動物では副作用が見られなかった為、ヒトによる長期安全性試験を開始しました。<br />
  205.             副作用や有害反応は、一般的に使用される薬【抗炎症薬、心臓薬、抗生物質など】と併用しても検出されず、<br class="pc" />
  206.             15年間以上多くの国で健康な人々がこの研究に参加し、有害事象は一つも報告されませんでした。
  207.             </p>
  208.           </div>
  209.         </div>
  210.       </div>
  211.     </div>
  212.   </div>
  213. </section>
  214. {% endblock %}