app/template/user_data/shopping_guide_regular.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  4. <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/about.css') }}" media="all">
  5. <div class="regular ec-ContentsRole">
  6.   <div class="breadcrumb">
  7.     <ol itemscope itemtype="https://schema.org/BreadcrumbList">
  8.       <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  9.         <a itemprop="item" href="{{ url('homepage') }}">
  10.           <span itemprop="name">ミリオンストア・トップページ</span></a>
  11.         <meta itemprop="position" content="1" />
  12.       </li>
  13.       <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  14.         <a itemprop="item" href="{{ url('homepage') }}shopping-guide/">
  15.           <span itemprop="name">ご利用ガイド</span></a>
  16.         <meta itemprop="position" content="2" />
  17.       </li>
  18.       <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="last">
  19.         <a itemprop="item" href="{{ url('homepage') }}shopping-guide/regular/">
  20.           <span itemprop="name">定期購入のご案内</span></a>
  21.         <meta itemprop="position" content="3" />
  22.       </li>
  23.     </ol>
  24.   </div>
  25.   <div class="mainVisual">
  26.     <picture>
  27.       <!-- <source media="(max-width: 767px)" type="image/webp"
  28.         srcset="{{ asset('assets/img/shopping-guide/regular/mv_sp.webp') }}, {{ asset('assets/img/shopping-guide/regular/mv_sp@2x.webp') }} 2x">
  29.       <source media="(max-width: 767px)"
  30.         srcset="{{ asset('assets/img/shopping-guide/regular/mv_sp.png') }}, {{ asset('assets/img/shopping-guide/regular/mv_sp@2x.png') }} 2x"> -->
  31.       <source type="image/webp"
  32.         srcset="{{ asset('assets/img/shopping-guide/regular/mv_pc.webp') }} 1x, {{ asset('assets/img/shopping-guide/regular/mv_pc@2x.webp') }} 2x">
  33.       <source
  34.         srcset="{{ asset('assets/img/shopping-guide/regular/mv_pc.png') }} 1x, {{ asset('assets/img/shopping-guide/regular/mv_pc@2x.png') }} 2x">
  35.       <img src="{{ asset('assets/img/shopping-guide/regular/mv_pc.png') }}" alt="お得なお買い物のチャンス!定期購入コース">
  36.     </picture>
  37.   </div>
  38.   <div class="sec01 sec-wrapper">
  39.     <div class="mb50">
  40.       <picture>
  41.         <!-- <source media="(max-width: 767px)" type="image/webp"
  42.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_01_sp.webp') }}, {{ asset('assets/img/shopping-guide/regular/img_sec01_01_sp@2x.webp') }} 2x">
  43.         <source media="(max-width: 767px)"
  44.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_01_sp.png') }}, {{ asset('assets/img/shopping-guide/regular/img_sec01_01_sp@2x.png') }} 2x"> -->
  45.         <source type="image/webp"
  46.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_01_pc.webp') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec01_01_pc@2x.webp') }} 2x">
  47.         <source
  48.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_01_pc.png') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec01_01_pc@2x.png') }} 2x">
  49.         <img src="{{ asset('assets/img/shopping-guide/regular/img_sec01_01_pc.png') }}"
  50.           alt="定期購入ってなに？その都度注文する手間が省けて、ご希望に合わせて定期的に商品をお届けする便利でお得なサービスです。">
  51.       </picture>
  52.     </div>
  53.     <div class="mb50">
  54.       <picture>
  55.         <!-- <source media="(max-width: 767px)" type="image/webp"
  56.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_02_sp.webp') }}, {{ asset('assets/img/shopping-guide/regular/img_sec01_02_sp@2x.webp') }} 2x">
  57.         <source media="(max-width: 767px)"
  58.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_02_sp.png') }}, {{ asset('assets/img/shopping-guide/regular/img_sec01_02_sp@2x.png') }} 2x"> -->
  59.         <source type="image/webp"
  60.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_02_pc.webp') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec01_02_pc@2x.webp') }} 2x">
  61.         <source
  62.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_02_pc.png') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec01_02_pc@2x.png') }} 2x">
  63.         <img src="{{ asset('assets/img/shopping-guide/regular/img_sec01_02_pc.png') }}" alt="あったらいいな…と思ったことはないですか？">
  64.       </picture>
  65.     </div>
  66.     <div class="mb20">
  67.       <picture>
  68.         <!-- <source media="(max-width: 767px)" type="image/webp"
  69.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_03_sp.webp') }}, {{ asset('assets/img/shopping-guide/regular/img_sec01_03_sp@2x.webp') }} 2x">
  70.         <source media="(max-width: 767px)"
  71.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_03_sp.png') }}, {{ asset('assets/img/shopping-guide/regular/img_sec01_03_sp@2x.png') }} 2x"> -->
  72.         <source type="image/webp"
  73.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_03_pc.webp') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec01_03_pc@2x.webp') }} 2x">
  74.         <source
  75.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec01_03_pc.png') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec01_03_pc@2x.png') }} 2x">
  76.         <img src="{{ asset('assets/img/shopping-guide/regular/img_sec01_03_pc.png') }}"
  77.           alt="1つでも当てはまったら定期購入コースはいかがですか？">
  78.       </picture>
  79.     </div>
  80.   </div>
  82.   <div class="sec02 sec-wrapper">
  83.     <div class="mb50">
  84.       <picture>
  85.         <!-- <source media="(max-width: 767px)" type="image/webp"
  86.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_01_sp.webp') }}, {{ asset('assets/img/shopping-guide/regular/img_sec02_01_sp@2x.webp') }} 2x">
  87.         <source media="(max-width: 767px)"
  88.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_01_sp.png') }}, {{ asset('assets/img/shopping-guide/regular/img_sec02_01_sp@2x.png') }} 2x"> -->
  89.         <source type="image/webp"
  90.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_01_pc.webp') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec02_01_pc@2x.webp') }} 2x">
  91.         <source
  92.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_01_pc.png') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec02_01_pc@2x.png') }} 2x">
  93.         <img src="{{ asset('assets/img/shopping-guide/regular/img_sec02_01_pc.png') }}" alt="定期購入のメリット">
  94.       </picture>
  95.     </div>
  96.     <div class="mb20">
  97.       <picture>
  98.         <!-- <source media="(max-width: 767px)" type="image/webp"
  99.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_02_sp.webp') }}, {{ asset('assets/img/shopping-guide/regular/img_sec02_02_sp@2x.webp') }} 2x">
  100.         <source media="(max-width: 767px)"
  101.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_02_sp.png') }}, {{ asset('assets/img/shopping-guide/regular/img_sec02_02_sp@2x.png') }} 2x"> -->
  102.         <source type="image/webp"
  103.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_02_pc.webp') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec02_02_pc@2x.webp') }} 2x">
  104.         <source
  105.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_02_pc.png') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec02_02_pc@2x.png') }} 2x">
  106.         <img src="{{ asset('assets/img/shopping-guide/regular/img_sec02_02_pc.png') }}" alt="1. 通常購入の最大18%割引！">
  107.       </picture>
  108.     </div>
  109.     <div class="mb20">
  110.       <picture>
  111.         <!-- <source media="(max-width: 767px)" type="image/webp"
  112.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_03_sp.webp') }}, {{ asset('assets/img/shopping-guide/regular/img_sec02_03_sp@2x.webp') }} 2x">
  113.         <source media="(max-width: 767px)"
  114.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_03_sp.png') }}, {{ asset('assets/img/shopping-guide/regular/img_sec02_03_sp@2x.png') }} 2x"> -->
  115.         <source type="image/webp"
  116.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_03_pc.webp') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec02_03_pc@2x.webp') }} 2x">
  117.         <source
  118.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_03_pc.png') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec02_03_pc@2x.png') }} 2x">
  119.         <img src="{{ asset('assets/img/shopping-guide/regular/img_sec02_03_pc.png') }}"
  120.           alt="2.通常送料770円（税込）→330円（税込）に! 3.代引手数料330円（税込）→無料に!">
  121.       </picture>
  122.     </div>
  123.     <div class="mb20">
  124.       <picture>
  125.         <!-- <source media="(max-width: 767px)" type="image/webp"
  126.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_04_sp.webp') }}, {{ asset('assets/img/shopping-guide/regular/img_sec02_04_sp@2x.webp') }} 2x">
  127.         <source media="(max-width: 767px)"
  128.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_04_sp.png') }}, {{ asset('assets/img/shopping-guide/regular/img_sec02_04_sp@2x.png') }} 2x"> -->
  129.         <source type="image/webp"
  130.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_04_pc.webp') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec02_04_pc@2x.webp') }} 2x">
  131.         <source
  132.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec02_04_pc.png') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec02_04_pc@2x.png') }} 2x">
  133.         <img src="{{ asset('assets/img/shopping-guide/regular/img_sec02_04_pc.png') }}" alt="4. 定期購入と同時購入で12%割引！">
  134.       </picture>
  135.     </div>
  136.   </div>
  138.   <div class="sec03 priceList sec-wrapper">
  139.     <h3 class="priceTit">
  140.       <picture>
  141.         <!-- <source media="(max-width: 767px)" type="image/webp"
  142.             srcset="{{ asset('assets/img/shopping-guide/regular/img_sec03_01_sp.webp') }}, {{ asset('assets/img/shopping-guide/regular/img_sec03_01_sp@2x.webp') }} 2x">
  143.           <source media="(max-width: 767px)"
  144.             srcset="{{ asset('assets/img/shopping-guide/regular/img_sec03_01_sp.png') }}, {{ asset('assets/img/shopping-guide/regular/img_sec03_01_sp@2x.png') }} 2x"> -->
  145.         <source type="image/webp"
  146.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec03_01_pc.webp') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec03_01_pc@2x.webp') }} 2x">
  147.         <source
  148.           srcset="{{ asset('assets/img/shopping-guide/regular/img_sec03_01_pc.png') }} 1x, {{ asset('assets/img/shopping-guide/regular/img_sec03_01_pc@2x.png') }} 2x">
  149.         <img src="{{ asset('assets/img/shopping-guide/regular/img_sec03_01_pc.png') }}" alt="定期購入 とくとくコース 商品価格一覧表">
  150.       </picture>
  151.     </h3>
  152.     <dl>
  153.       <div class="box-top-itemlist">
  154.         <dt class="itemTitle">
  155.           <a href="{{ url('homepage') }}vegetable-juice/">
  156.             <picture>
  157.               <source media="(max-width:767px)"
  158.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_yj.png')}}">
  159.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_yj@2x.png')}}" alt="国産緑黄色野菜ジュース">
  160.             </picture>
  161.           </a>
  162.         </dt>
  163.         <dd class="itemPrice">
  164.           <picture>
  165.             <source media="(max-width:767px)" srcset="{{ asset('assets/img/shopping-guide/regular/img_price_yj.png')}}">
  166.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_yj@2x.png')}}">
  167.           </picture>
  168.         </dd>
  169.       </div>
  170.       <div class="box-top-itemlist">
  171.         <dt class="itemTitle">
  172.           <a href="{{ url('homepage') }}juice/blueberry/">
  173.             <picture>
  174.               <source media="(max-width:767px)"
  175.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_bc.png')}}">
  176.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_bc@2x.png')}}" alt="ブルーベリー＆クランベリー">
  177.             </picture>
  178.           </a>
  179.         </dt>
  180.         <dd class="itemPrice">
  181.           <picture>
  182.             <source media="(max-width:767px)" srcset="{{ asset('assets/img/shopping-guide/regular/img_price_bc.png')}}">
  183.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_bc@2x.png')}}">
  184.           </picture>
  185.         </dd>
  186.       </div>
  187.       <div class="box-top-itemlist">
  188.         <dt class="itemTitle">
  189.           <a href="{{ url('homepage') }}healthfood/millionpower/">
  190.             <picture>
  191.               <source media="(max-width:767px)"
  192.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_mp.png')}}">
  193.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_mp@2x.png')}}" alt="ミリオンパワー">
  194.             </picture>
  195.           </a>
  196.         </dt>
  197.         <dd class="itemPrice">
  198.           <picture>
  199.             <source media="(max-width:767px)" srcset="{{ asset('assets/img/shopping-guide/regular/img_price_mp.png')}}">
  200.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_mp@2x.png')}}">
  201.           </picture>
  202.         </dd>
  203.       </div>
  204.       <div class="box-top-itemlist">
  205.         <dt class="itemTitle">
  206.           <a href="{{ url('homepage') }}healthfood/millionpower-sg/">
  207.             <picture>
  208.               <source media="(max-width:767px)"
  209.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_sg.png')}}">
  210.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_sg@2x.png')}}" alt="ミリオンパワーSG">
  211.             </picture>
  212.           </a>
  213.         </dt>
  214.         <dd class="itemPrice">
  215.           <picture>
  216.             <source media="(max-width:767px)" srcset="{{ asset('assets/img/shopping-guide/regular/img_price_sg.png')}}">
  217.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_sg@2x.png')}}">
  218.           </picture>
  219.         </dd>
  220.       </div>
  221.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  222.         <dt class="itemTitle">
  223.           <a href="{{ url('homepage') }}healthfood/millionpower-hg/">
  224.             <picture>
  225.               <source media="(max-width:767px)"
  226.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_hg.png')}}">
  227.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_hg@2x.png')}}" alt="ミリオンパワーHG">
  228.             </picture>
  229.           </a>
  230.         </dt>
  231.         <dd class="itemPrice">
  232.           <picture>
  233.             <source media="(max-width:767px)" srcset="{{ asset('assets/img/shopping-guide/regular/img_price_hg.png')}}">
  234.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_hg@2x.png')}}">
  235.           </picture>
  236.         </dd>
  237.       </div>
  238.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  239.         <dt class="itemTitle">
  240.           <a href="{{ url('homepage') }}healthfood/psyche/">
  241.             <picture>
  242.               <source media="(max-width:767px)"
  243.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_psyre.png')}}">
  244.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_psyre@2x.png')}}" alt="プシュケー・レギュラー">
  245.             </picture>
  246.           </a>
  247.         </dt>
  248.         <dd class="itemPrice">
  249.           <picture>
  250.             <source media="(max-width:767px)"
  251.               srcset="{{ asset('assets/img/shopping-guide/regular/img_price_psyre.png')}}">
  252.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_psyre@2x.png')}}">
  253.           </picture>
  254.         </dd>
  255.       </div>
  256.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  257.         <dt class="itemTitle">
  258.           <a href="{{ url('homepage') }}healthfood/psyche/">
  259.             <picture>
  260.               <source media="(max-width:767px)"
  261.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_psy.png')}}">
  262.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_psy@2x.png')}}" alt="プシュケー・ハイグレード">
  263.             </picture>
  264.           </a>
  265.         </dt>
  266.         <dd class="itemPrice">
  267.           <picture>
  268.             <source media="(max-width:767px)"
  269.               srcset="{{ asset('assets/img/shopping-guide/regular/img_price_psy.png')}}">
  270.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_psy@2x.png')}}">
  271.           </picture>
  272.         </dd>
  273.       </div>
  274.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  275.         <dt class="itemTitle">
  276.           <a href="{{ url('homepage') }}healthfood/collagen/">
  277.             <picture>
  278.               <source media="(max-width:767px)"
  279.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_co.png')}}">
  280.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_co@2x.png')}}" alt="ミリオンのコラーゲン">
  281.             </picture>
  282.           </a>
  283.         </dt>
  284.         <dd class="itemPrice">
  285.           <picture>
  286.             <source media="(max-width:767px)" srcset="{{ asset('assets/img/shopping-guide/regular/img_price_co.png')}}">
  287.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_co@2x.png')}}">
  288.           </picture>
  289.         </dd>
  290.       </div>
  291.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  292.         <dt class="itemTitle">
  293.           <a href="{{ url('homepage') }}healthfood/aozakana/">
  294.             <picture>
  295.               <source media="(max-width:767px)"
  296.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_ao.png')}}">
  297.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_ao@2x.png')}}" alt="さらさら青魚">
  298.             </picture>
  299.           </a>
  300.         </dt>
  301.         <dd class="itemPrice">
  302.           <picture>
  303.             <source media="(max-width:767px)" srcset="{{ asset('assets/img/shopping-guide/regular/img_price_ao.png')}}">
  304.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_ao@2x.png')}}">
  305.           </picture>
  306.         </dd>
  307.       </div>
  308.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  309.         <dt class="itemTitle">
  310.           <a href="{{ url('homepage') }}healthfood/5252milk/">
  311.             <picture>
  312.               <source media="(max-width:767px)"
  313.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_52bl.png')}}">
  314.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_52bl@2x.png')}}" alt="甘さひかえめこつこつミルク">
  315.             </picture>
  316.           </a>
  317.         </dt>
  318.         <dd class="itemPrice">
  319.           <picture>
  320.             <source media="(max-width:767px)"
  321.               srcset="{{ asset('assets/img/shopping-guide/regular/img_price_52bl.png')}}">
  322.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_52bl@2x.png')}}">
  323.           </picture>
  324.         </dd>
  325.       </div>
  326.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  327.         <dt class="itemTitle">
  328.           <a href="{{ url('homepage') }}healthfood/shikisima-ginger">
  329.             <picture>
  330.               <source media="(max-width:767px)"
  331.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_shiki.png')}}">
  332.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_shiki@2x.png')}}" alt="四季島酵素ジンジャー">
  333.             </picture>
  334.           </a>
  335.         </dt>
  336.         <dd class="itemPrice">
  337.           <picture>
  338.             <source media="(max-width:767px)"
  339.               srcset="{{ asset('assets/img/shopping-guide/regular/img_price_shiki.png')}}">
  340.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_shiki@2x.png')}}">
  341.           </picture>
  342.         </dd>
  343.       </div>
  344.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  345.         <dt class="itemTitle">
  346.           <a href="{{ url('homepage') }}healthfood/kyushu-aojiru">
  347.             <picture>
  348.               <source media="(max-width:767px)"
  349.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_kyuao.png')}}">
  350.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_kyuao@2x.png')}}" alt="おいしい九州青汁">
  351.             </picture>
  352.           </a>
  353.         </dt>
  354.         <dd class="itemPrice">
  355.           <picture>
  356.             <source media="(max-width:767px)"
  357.               srcset="{{ asset('assets/img/shopping-guide/regular/img_price_kyuao.png')}}">
  358.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_kyuao@2x.png')}}">
  359.           </picture>
  360.         </dd>
  361.       </div>
  362.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  363.         <dt class="itemTitle">
  364.           <a href="{{ url('homepage') }}goods/neteruma-ni">
  365.             <picture>
  366.               <source media="(max-width:767px)"
  367.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_neteru.png')}}">
  368.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_neteru@2x.png')}}" alt="寝てるま～に">
  369.             </picture>
  370.           </a>
  371.         </dt>
  372.         <dd class="itemPrice">
  373.           <picture>
  374.             <source media="(max-width:767px)"
  375.               srcset="{{ asset('assets/img/shopping-guide/regular/img_price_neteru.png')}}">
  376.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_neteru@2x.png')}}">
  377.           </picture>
  378.         </dd>
  379.       </div>
  380.       <div class="box-top-itemlist box-itemlist-reg-readmore">
  381.         <dt class="itemTitle">
  382.           <a href="{{ url('homepage') }}goods/hot-bubble">
  383.             <picture>
  384.               <source media="(max-width:767px)"
  385.                 srcset="{{ asset('assets/img/shopping-guide/regular/tit_price_hb90.png')}}">
  386.               <img src="{{ asset('assets/img/shopping-guide/regular/tit_price_hb90@2x.png')}}" alt="ホットバブルプロ">
  387.             </picture>
  388.           </a>
  389.         </dt>
  390.         <dd class="itemPrice">
  391.           <picture>
  392.             <source media="(max-width:767px)"
  393.               srcset="{{ asset('assets/img/shopping-guide/regular/img_price_hb90.png')}}">
  394.             <img src="{{ asset('assets/img/shopping-guide/regular/img_price_hb90@2x.png')}}">
  395.           </picture>
  396.         </dd>
  397.       </div>
  398.       <button class="readmore-reg">&nbsp;</button>
  399.     </dl>
  400.   </div>
  401. </div>
  402. <style>
  403.   .sec-wrapper {
  404.     padding: 5%;
  405.     text-align: center;
  406.   }
  408.   .sec01 {
  409.     background-color: #f8f7f1;
  410.   }
  412.   .sec02 {
  413.     padding-top: 15%;
  414.     background: url("{{ asset('assets/img/shopping-guide/regular/bg_sec02_top_pc.png')}}") #f4e9e4 center top no-repeat;
  415.     background-size: 100% auto;
  416.   }
  418.   .priceList {
  419.     padding-top: 15%;
  420.     background: url("/html/template/million01/assets/img/shopping-guide/regular/bg_sec03_top_pc.png") #fffad7 center top no-repeat;
  421.     background-size: 100% auto;
  422.   }
  424.   .priceList dd {
  425.     margin-bottom: 0;
  426.   }
  428.   .priceTit {
  429.     margin-bottom: 10px;
  430.   }
  432.   .itemTitle {
  433.     background: #e98d01;
  434.   }
  436.   .readmore-reg {
  437.     position: relative;
  438.     width: 100%;
  439.     margin: 1em auto;
  440.     display: block;
  441.     background-color: #aaa;
  442.     color: #fff;
  443.     padding: 1em 0;
  444.     line-height: 1;
  445.     border: none;
  447.     &::after {
  448.       content: " ";
  449.       position: absolute;
  450.       width: 20px;
  451.       height: 20px;
  452.       border-top: solid 3px #fff;
  453.       border-right: solid 3px #fff;
  454.       -ms-transform: rotate(135deg);
  455.       transform: rotate(135deg);
  456.       -webkit-transform: rotate(135deg);
  457.       right: 0;
  458.       left: 0;
  459.       top: 0;
  460.       bottom: 0;
  461.       margin: auto;
  462.       -webkit-transition: 0.5s;
  463.       -o-transition: 0.5s;
  464.       transition: 0.5s;
  465.       -erbkit-transition: 0.5s;
  466.     }
  467.   }
  469.   .on-click {
  470.     color: transparent !important;
  471.   }
  473.   .on-click:after {
  474.     -ms-transform: rotate(-45deg);
  475.     transform: rotate(-45deg);
  476.     -webkit-transform: rotate(-45deg);
  477.     top: 0.5em;
  478.   }
  480.   .box-itemlist-reg-readmore {
  481.     display: none;
  482.   }
  484.   @media screen and (min-width: 768px) {}
  486.   @media screen and (min-width: 1024px) {}
  487. </style>
  488. <script>
  489.   $(function () {
  490.     $(".readmore-reg").on("click", function () {
  491.       $(this).toggleClass("on-click");
  492.       $(".box-itemlist-reg-readmore").slideToggle(500);
  493.     });
  494.   });
  495. </script>
  497. {% endblock %}