app/template/user_data/health_trend_beta_carotene.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  4. <link rel="preconnect" href="https://fonts.googleapis.com">
  5. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  6. <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
  7. <div class="ec-ContentsRole">
  8.   <div class="breadcrumb">
  9.     <ol itemscope itemtype="https://schema.org/BreadcrumbList">
  10.       <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  11.         <a itemprop="item" href="{{ url('homepage') }}">
  12.           <span itemprop="name">ミリオンストア・トップページ</span></a>
  13.         <meta itemprop="position" content="1" />
  14.       </li>
  15.       <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  16.         <a itemprop="item" href="{{ url('homepage') }}health-trend/">
  17.           <span itemprop="name">健康トレンド図鑑</span></a>
  18.         <meta itemprop="position" content="2" />
  19.       </li>
  20.       <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="last">
  21.         <a itemprop="item" href="{{ url('homepage') }}health-trend/beta-carotene/">
  22.           <span itemprop="name">β-カロテンで今日からできる美肌作り
  23.           </span></a>
  24.         <meta itemprop="position" content="3" />
  25.       </li>
  26.     </ol>
  27.   </div>
  28.   <!-- contents -->
  29.   <div class="dashsyoku kosugi-maru-regular">
  30.     <h1 class="ttl-level-01">
  31.       <picture>
  32.         <!-- <source media="(max-width: 767px)" type="image/webp" srcset="{{ asset('assets/img/health-trend/beta-carotene/mv_sp.webp') }}, {{ asset('assets/img/health-trend/beta-carotene/mv_sp@2x.webp') }} 2x">
  33.             <source media="(max-width: 767px)" srcset="{{ asset('assets/img/health-trend/beta-carotene/mv_sp.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/mv_sp@2x.jpg') }} 2x"> -->
  34.         <source type="image/webp"
  35.           srcset="{{ asset('assets/img/health-trend/beta-carotene/mv_pc.webp') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/mv_pc@2x.webp') }} 2x">
  36.         <source
  37.           srcset="{{ asset('assets/img/health-trend/beta-carotene/mv_pc.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/mv_pc@2x.jpg') }} 2x">
  38.         <img src="{{ asset('assets/img/health-trend/beta-carotene/mv_pc.jpg') }}" alt="β-カロテンで今日からできる美肌作り" width="100%">
  39.       </picture>
  40.     </h1>
  42.     <div class="content">
  43.       <div class="area-cmn-01 sec01">
  44.         <div class="sec-cmn-01 mt30">
  45.           <div class="box-txt-01 mb30">
  46.             <p>鏡を見るたびに気になるシミ、何とかしたいと思っていませんか？</p>
  47.             <p>そんなシミにお悩みの方にぜひ知っていただきたい栄養素があります。</p>
  48.             <p>それが近年美容業界で注目されている「β-カロテン(ベータカロテン)」です。</p>
  49.             <p>今回は、β-カロテンがシミにどのように働きかけるのか、美肌との関わりを詳しく解説します。</p>
  50.           </div>
  51.           <div class="box-img-01">
  52.             <picture>
  53.               <!-- <source media="(max-width: 767px)" type="image/webp" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_01_sp.webp') }}, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_01_sp@2x.webp') }} 2x">
  54.                 <source media="(max-width: 767px)" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_01_sp.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_01_sp@2x.jpg') }} 2x"> -->
  55.               <source type="image/webp"
  56.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_01_pc.webp') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_01_pc@2x.webp') }} 2x">
  57.               <source
  58.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_01_pc.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_01_pc@2x.jpg') }} 2x">
  59.               <img src="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_01_pc.jpg') }}" alt="憂鬱な表情で鏡を見る女性"
  60.                 width="100%">
  61.             </picture>
  62.           </div>
  63.           <h2 class="ttl-level-02">
  64.             <picture>
  65.               <!-- <source media="(max-width: 767px)" type="image/webp" srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_01_sp.webp') }}, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_01_sp@2x.webp') }} 2x">
  66.                     <source media="(max-width: 767px)" srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_01_sp.png') }}, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_01_sp@2x.png') }} 2x"> -->
  67.               <source type="image/webp"
  68.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_01_pc.webp') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_01_pc@2x.webp') }} 2x">
  69.               <source
  70.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_01_pc.png') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_01_pc@2x.png') }} 2x">
  71.               <img src="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_01_pc.png') }}" alt="β-カロテンって、そもそも何？"
  72.                 width="100%">
  73.             </picture>
  74.           </h2>
  75.           <div class="box-txt-01">
  76.             <p>β-カロテンは、私たちの体にとってとても大切な栄養素の一つです。</p>
  77.             <p>人参やパプリカなど、鮮やかな色の野菜や果物に多く含まれています。</p>
  78.             <p>β-カロテンは、体内でビタミンAに変換されるというの優れている特徴を持っています。</p>
  79.             <p>ビタミンAは、肌のターンオーバーを促進し、粘膜を保護する働きがあります。</p>
  80.           </div>
  81.           <div class="box-img-01">
  82.             <picture>
  83.               <!-- <source media="(max-width: 767px)" type="image/webp" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_02_sp.webp') }}, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_02_sp@2x.webp') }} 2x">
  84.                 <source media="(max-width: 767px)" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_02_sp.png') }}, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_02_sp@2x.png') }} 2x"> -->
  85.               <source type="image/webp"
  86.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_02_pc.webp') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_02_pc@2x.webp') }} 2x">
  87.               <source
  88.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_02_pc.png') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_02_pc@2x.png') }} 2x">
  89.               <img src="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_02_pc.png') }}" alt="ターンオーバーのしくみ"
  90.                 width="100%">
  91.             </picture>
  92.           </div>
  93.           <h2 class="ttl-level-02">
  94.             <picture>
  95.               <!-- <source media="(max-width: 767px)" type="image/webp" srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_02_sp.webp') }}, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_02_sp@2x.webp') }} 2x">
  96.                     <source media="(max-width: 767px)" srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_02_sp.png') }}, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_02_sp@2x.png') }} 2x"> -->
  97.               <source type="image/webp"
  98.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_02_pc.webp') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_02_pc@2x.webp') }} 2x">
  99.               <source
  100.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_02_pc.png') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_02_pc@2x.png') }} 2x">
  101.               <img src="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec01_02_pc.png') }}"
  102.                 alt="ベータカロテンがシミに効くって本当？" width="100%">
  103.             </picture>
  104.           </h2>
  105.           <div class="box-txt-01">
  106.             <p>近年、様々な研究でベータカロテンがシミ予防に役立つ可能性が示唆されています。</p>
  107.             <p>これは、ベータカロテンの強力な抗酸化作用が、シミの原因となる活性酸素を消去し、
  108.               メラニン生成を抑制することで、シミの予防に繋がると考えられているためです。</p>
  109.           </div>
  110.           <div class="box-img-01">
  111.             <picture>
  112.               <!-- <source media="(max-width: 767px)" type="image/webp" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_03_sp.webp') }}, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_03_sp@2x.webp') }} 2x">
  113.                 <source media="(max-width: 767px)" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_03_sp.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_03_sp@2x.jpg') }} 2x"> -->
  114.               <source type="image/webp"
  115.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_03_pc.webp') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_03_pc@2x.webp') }} 2x">
  116.               <source
  117.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_03_pc.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec01_03_pc@2x.jpg') }} 2x">
  118.               <img src="{{ asset('assets/img/health-trend/beta-carotene/img_sec01_03_pc.jpg') }}" alt="色白な女性"
  119.                 width="100%">
  120.             </picture>
  121.           </div>
  122.         </div>
  123.       </div>
  124.       <div class="area-cmn-01 sec02">
  125.         <div class="sec-cmn-01">
  126.           <h2 class="ttl-level-02">
  127.             <picture>
  128.               <!-- <source media="(max-width: 767px)" type="image/webp" srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec02_01_sp.webp') }}, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec02_01_sp@2x.webp') }} 2x">
  129.                         <source media="(max-width: 767px)" srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec02_01_sp.png') }}, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec02_01_sp@2x.png') }} 2x"> -->
  130.               <source type="image/webp"
  131.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec02_01_pc.webp') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec02_01_pc@2x.webp') }} 2x">
  132.               <source
  133.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec02_01_pc.png') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/ttl_sec02_01_pc@2x.png') }} 2x">
  134.               <img src="{{ asset('assets/img/health-trend/beta-carotene/ttl_sec02_01_pc.png') }}" alt="βカロテンを手軽に摂るには？ "
  135.                 width="100%">
  136.             </picture>
  137.           </h2>
  138.           <div class="box-txt-01">
  139.             <p>β-カロテンを効果的に摂るには、バランスの取れた食事が大切です。</p>
  140.             <p>特に、緑黄色野菜を積極的に摂ることがおすすめです。</p>
  141.             <p>具体的には、人参、パプリカ、ほうれん草など、彩りの良い野菜はβ-カロテンが豊富に含まれています。これらの野菜を毎日少しずつでも摂るように心がけましょう。</p>
  142.           </div>
  143.           <div class="box-img-01">
  144.             <!-- <source media="(max-width: 767px)" type="image/webp" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_01_sp.webp') }}, {{ asset('assets/img/health-trend/beta-carotene/img_sec02_01_sp@2x.webp') }} 2x">
  145.                     <source media="(max-width: 767px)" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_01_sp.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec02_01_sp@2x.jpg') }} 2x"> -->
  146.             <source type="image/webp"
  147.               srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_01_pc.webp') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec02_01_pc@2x.webp') }} 2x">
  148.             <source
  149.               srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_01_pc.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec02_01_pc@2x.jpg') }} 2x">
  150.             <img src="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_01_pc.jpg') }}" alt="緑黄色野菜"
  151.               width="100%">
  152.           </div>
  153.         </div>
  154.         <div class="sec-cmn-01">
  155.           <div class="box-txt-01">
  156.             <p>また、忙しい中でも手軽にβ-カロテンを摂る方法として野菜ジュースもおすすめです。</p>
  157.             <p>特に「ミリオンの国産緑黄色野菜ジュース」は、国産の新鮮な野菜をたっぷり使用し、独自の製法で作った濃厚な味わいの野菜ジュースです。</p>
  158.           </div>
  159.         </div>
  160.         <div class="sec-cmn-01">
  161.           <div class="box-txt-01">
  162.             <p>今回は、β-カロテンとシミの関係性について詳しく解説しました。</p>
  163.             <p>β-カロテンは、シミ予防だけでなく肌の健康維持にも役立つ栄養素です。</p>
  164.             美肌のためには、β-カロテンを含むバランスの取れた食事を心がけることはもちろん、適度な運動や十分な睡眠も大切です。</p>
  165.             β-カロテン豊富な食材やジュースを食卓にプラスして、さらに輝く美肌を目指しましょう！</p>
  166.             </p>
  167.           </div>
  168.           <div class="box-img-01">
  169.             <picture>
  170.               <!-- <source media="(max-width: 767px)" type="image/webp" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_02_sp.webp') }}, {{ asset('assets/img/health-trend/beta-carotene/img_sec02_02_sp@2x.webp') }} 2x">
  171.                     <source media="(max-width: 767px)" srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_02_sp.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec02_02_sp@2x.jpg') }} 2x"> -->
  172.               <source type="image/webp"
  173.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_02_pc.webp') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec02_02_pc@2x.webp') }} 2x">
  174.               <source
  175.                 srcset="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_02_pc.jpg') }} 1x, {{ asset('assets/img/health-trend/beta-carotene/img_sec02_02_pc@2x.jpg') }} 2x">
  176.               <img src="{{ asset('assets/img/health-trend/beta-carotene/img_sec02_02_pc.jpg') }}" alt="野菜ジュースを飲む笑顔の女性"
  177.                 width="100%">
  178.             </picture>
  179.           </div>
  180.         </div>
  181.       </div>
  182.     </div>
  183.   </div>
  184. </div>
  185. <style>
  186.   .warning {
  187.     width: 100%;
  188.     padding: 2%;
  189.     background-color: #ffffbf;
  190.     text-align: center;
  191.     border-radius: 10px;
  192.     box-sizing: border-box;
  193.   }
  195.   .sale-price {
  196.     color: #c00;
  197.   }
  199.   .normal-price {
  200.     font-size: 80%;
  201.   }
  203.   .kosugi-maru-regular {
  204.     font-family: "Kosugi Maru", system-ui;
  205.     font-weight: 400;
  206.     font-style: normal;
  207.   }
  209.   .content {
  210.     font-size: 150%;
  211.     line-height: 1.5;
  212.   }
  214.   h1,
  215.   h2,
  216.   h3,
  217.   h4,
  218.   h5,
  219.   h6,
  220.   th {
  221.     margin: 0;
  222.     font-size: 100%;
  223.   }
  225.   .ttl-level-01,
  226.   .ttl-level-02 {
  227.     margin-bottom: 10px;
  228.   }
  230.   .ttl-level-03 {
  231.     margin-bottom: .5em;
  232.     padding-bottom: .25em;
  233.     border-bottom: 4px dotted #ffa266;
  234.     font-size: 150%;
  235.     color: #ffa266;
  236.   }
  238.   .box-img-01 {
  239.     margin: 1em auto;
  240.   }
  242.   .sec-cmn-01 {
  243.     padding: 0 3%;
  244.     margin: 2em auto;
  245.   }
  247.   .area-cmn-01.sec04 {
  248.     padding: 5%;
  249.     background-color: #f4ede7;
  251.   }
  253.   .sec04 .ttl-level-02-2 {
  254.     margin-bottom: .25em;
  255.     font-size: 150%;
  256.     font-weight: bold;
  257.   }
  259.   @media screen and (min-width: 768px) {
  261.     .sec-cmn-01 {
  262.       width: 80%;
  263.     }
  265.     .cartWrapper {
  266.       font-size: 75%;
  267.     }
  268.   }
  269. </style>
  270. {% endblock %}