app/template/user_data/vegetable_juice_sdgs_episode.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  4. <div class="ec-ContentsRole">
  5.   <div class="mainVisual">
  6.     <picture>
  7.       <source media="(min-width: 768px)" type="image/webp" srcset="image/mv_pc.webp, image/mv_pc@2x.webp 2x">
  8.       <source media="(min-width: 768px)" srcset="image/mv_pc.png, image/mv_pc@2x.png 2x">
  9.       <source type="image/webp" srcset="image/mv_sp.webp 1x, image/mv_sp@2x.webp 2x">
  10.       <source srcset="image/mv_sp.png 1x, image/mv_sp@2x.png 2x">
  11.       <img src="image/mv_sp.png" alt="SDGs達成のため、「食品ロス」を減らそう、なくそう。">
  12.     </picture>
  13.   </div>
  14.   <div class="content">
  15.     <div id="sec01" class="sec01">
  16.       <section>
  17.         <h2>
  18.           <picture>
  19.             <source media="(min-width: 768px)" type="image/webp"
  20.               srcset="image/ttl_sec01_01_pc.webp, image/ttl_sec01_01_pc@2x.webp 2x">
  21.             <source media="(min-width: 768px)" srcset="image/ttl_sec01_01_pc.png, image/ttl_sec01_01_pc@2x.png 2x">
  22.             <source type="image/webp" srcset="image/ttl_sec01_01_sp.webp 1x, image/ttl_sec01_01_sp@2x.webp 2x">
  23.             <source srcset="image/ttl_sec01_01_sp.png 1x, image/ttl_sec01_01_sp@2x.png 2x">
  24.             <img src="image/ttl_sec01_01_sp.png" alt="日本と世界の食品ロスについて">
  25.           </picture>
  26.         </h2>
  27.         <div class="block02 mt0">
  28.           <p>食品ロスとは、本来食べることができるのに、捨てられてしまう食品のこと。
  29.             近年、日本を含む先進国では多くの食品ロスが発生しています。</p>
  31.           <p>原材料を栽培し、調理・加工で様々なエネルギーを使って食べられる状態にしたにもかかわらず、賞味期限が過ぎた食材は捨てられてしまいます。そして食材を廃棄するために、さらなるエネルギーと費用が必要になります。</p>
  33.           <p>このサイクルにより、資源やエネルギーが無駄遣いされてしまうのです。</p>
  34.         </div>
  35.         <div>
  36.           <picture>
  37.             <source media="(min-width: 768px)" type="image/webp"
  38.               srcset="image/img_sec01_01_pc.webp, image/img_sec01_01_pc@2x.webp 2x">
  39.             <source media="(min-width: 768px)" srcset="image/img_sec01_01_pc.png, image/img_sec01_01_pc@2x.png 2x">
  40.             <source type="image/webp" srcset="image/img_sec01_01_sp.webp 1x, image/img_sec01_01_sp@2x.webp 2x">
  41.             <source srcset="image/img_sec01_01_sp.png 1x, image/img_sec01_01_sp@2x.png 2x">
  42.             <img src="image/img_sec01_01_sp.png" alt="捨てられる食糧">
  43.           </picture>
  44.         </div>
  45.       </section>
  46.       <section class="area01 pb30">
  47.         <div class="block01 mt0">
  48.           <div>
  49.             <picture>
  50.               <source media="(min-width: 768px)" type="image/webp"
  51.                 srcset="image/img_sec01_02_pc.webp, image/img_sec01_02_pc@2x.webp 2x">
  52.               <source media="(min-width: 768px)" srcset="image/img_sec01_02_pc.png, image/img_sec01_02_pc@2x.png 2x">
  53.               <source type="image/webp" srcset="image/img_sec01_02_sp.webp 1x, image/img_sec01_02_sp@2x.webp 2x">
  54.               <source srcset="image/img_sec01_02_sp.png 1x, image/img_sec01_02_sp@2x.png 2x">
  55.               <img src="image/img_sec01_02_sp.png" alt="国民1人当たりの食品ロス量 1日124g 年間45kg">
  56.             </picture>
  57.           </div>
  58.           <div class="block02">
  59.             <p>農林水産省発表、2019年総務省人口推計の食糧需給表を見ると国民1人当たり食品ロス量は1日124g（お茶碗1杯のごはん相当）、年間約45kg（年間1人当たりの米の消費量相当）とあります。
  60.               その総合計は年間570万tにも上ります。</p>
  61.           </div>
  62.           <div>
  63.             <picture>
  64.               <source media="(min-width: 768px)" type="image/webp"
  65.                 srcset="image/img_sec01_03_pc.webp, image/img_sec01_03_pc@2x.webp 2x">
  66.               <source media="(min-width: 768px)" srcset="image/img_sec01_03_pc.png, image/img_sec01_03_pc@2x.png 2x">
  67.               <source type="image/webp" srcset="image/img_sec01_03_sp.webp 1x, image/img_sec01_03_sp@2x.webp 2x">
  68.               <source srcset="image/img_sec01_03_sp.png 1x, image/img_sec01_03_sp@2x.png 2x">
  69.               <img src="image/img_sec01_03_sp.png" alt="年間食品ロス 570万トン">
  70.             </picture>
  71.           </div>
  72.           <div class="block02">
  73.             <p><small>※出典元　<a href="https://
  74.               www.maff.go.jp/j/shokusan/recycle/syoku_loss/161227_4.html" target="_blank">農林水産省 食品ロスとは</a></small></p>
  75.           </div>
  76.         </div>
  77.       </section>
  78.     </div>
  79.     <div id="sec02" class="sec02">
  80.       <h2 class="mr0 ml0">
  81.         <picture>
  82.           <source media="(min-width: 768px)" type="image/webp"
  83.             srcset="image/ttl_sec02_01_pc.webp, image/ttl_sec02_01_pc@2x.webp 2x">
  84.           <source media="(min-width: 768px)" srcset="image/ttl_sec02_01_pc.png, image/ttl_sec02_01_pc@2x.png 2x">
  85.           <source type="image/webp" srcset="image/ttl_sec02_01_sp.webp 1x, image/ttl_sec02_01_sp@2x.webp 2x">
  86.           <source srcset="image/ttl_sec02_01_sp.png 1x, image/ttl_sec02_01_sp@2x.png 2x">
  87.           <img src="image/ttl_sec02_01_sp.png" alt="なぜこれほど食品ロスが出てしまうのか">
  88.         </picture>
  89.       </h2>
  90.       <div class="block01">
  91.         <div class="box01">
  92.           <h3>1.規格外品の廃棄</h3>
  93.           <p>農家の方々が丹精込めて作った野菜たち。しかし、形が悪い、葉の色が悪い、大きさが整っていないなど様々な理由により「規格外」となってしまいます。<br>
  94.             この「規格外」の野菜たちは、販売のルートには入れず、一部、加工食品に使われることもありますが、そのほとんどを、生産者側で処分することになります。</p>
  95.         </div>
  96.         <div class="photo">
  97.           <picture>
  98.             <source media="(min-width: 768px)" type="image/webp"
  99.               srcset="image/img_sec02_01_pc.webp, image/img_sec02_01_pc@2x.webp 2x">
  100.             <source media="(min-width: 768px)" srcset="image/img_sec02_01_pc.png, image/img_sec02_01_pc@2x.png 2x">
  101.             <source type="image/webp" srcset="image/img_sec02_01_sp.webp 1x, image/img_sec02_01_sp@2x.webp 2x">
  102.             <source srcset="image/img_sec02_01_sp.png 1x, image/img_sec02_01_sp@2x.png 2x">
  103.             <img src="image/img_sec02_01_sp.png" alt="プレゼント付きクロスワード">
  104.           </picture>
  105.         </div>
  106.       </div>
  107.       <div class="block01">
  108.         <div class="box01">
  109.           <h3>2.需要ギャップが出てしまう</h3>
  110.           <p>きれいな規格内の野菜だけがたくさん採れたとしても、需要量以上の購入は見込めません。<br>
  111.             需要数を上回った野菜（過剰生産）は、買い手がつかない。もしくは市場に出た後に、廃棄されてしまうのです。</p>
  112.         </div>
  113.         <div class="photo">
  114.           <picture>
  115.             <source media="(min-width: 768px)" type="image/webp"
  116.               srcset="image/img_sec02_02_pc.webp, image/img_sec02_02_pc@2x.webp 2x">
  117.             <source media="(min-width: 768px)" srcset="image/img_sec02_02_pc.png, image/img_sec02_02_pc@2x.png 2x">
  118.             <source type="image/webp" srcset="image/img_sec02_02_sp.webp 1x, image/img_sec02_02_sp@2x.webp 2x">
  119.             <source srcset="image/img_sec02_02_sp.png 1x, image/img_sec02_02_sp@2x.png 2x">
  120.             <img src="image/img_sec02_02_sp.png" alt="プレゼント付きクロスワード">
  121.           </picture>
  122.         </div>
  123.       </div>
  124.       <div class="block01">
  125.         <div class="box01">
  126.           <h3>3.賞味期限・消費期限</h3>
  127.           <p>賞味期限とは、その日まで「品質が保たれ、おいしく食べられます」という期限。
  128.             消費期限は、袋や容器を開けないままで、書かれた保存方法を守って保存していた場合に、この「年月日」まで、「安全に食べられる期限」のこと。</p>
  130.           <p>
  131.             基本的に、量販店や、レストランなどでは「賞味期限が切れたら廃棄」となっているため、まだ食べられるにもかかわらず捨てられてしまう食材が多くなっています。
  132.             とくに野菜類は、生鮮食品のため賞味期限が早く、廃棄量も多くなってしまいます。</p>
  133.         </div>
  134.         <div class="photo">
  135.           <picture>
  136.             <source media="(min-width: 768px)" type="image/webp"
  137.               srcset="image/img_sec02_03_pc.webp, image/img_sec02_03_pc@2x.webp 2x">
  138.             <source media="(min-width: 768px)" srcset="image/img_sec02_03_pc.png, image/img_sec02_03_pc@2x.png 2x">
  139.             <source type="image/webp" srcset="image/img_sec02_03_sp.webp 1x, image/img_sec02_03_sp@2x.webp 2x">
  140.             <source srcset="image/img_sec02_03_sp.png 1x, image/img_sec02_03_sp@2x.png 2x">
  141.             <img src="image/img_sec02_03_sp.png" alt="プレゼント付きクロスワード">
  142.           </picture>
  143.         </div>
  144.       </div>
  145.       <div class="block01">
  146.         <div>
  147.           <h3>4.3分の1ルール</h3>
  148.           <div class="mb30">
  149.             <picture>
  150.               <source media="(min-width: 768px)" type="image/webp"
  151.                 srcset="image/img_sec02_04_pc.webp, image/img_sec02_04_pc@2x.webp 2x">
  152.               <source media="(min-width: 768px)" srcset="image/img_sec02_04_pc.png, image/img_sec02_04_pc@2x.png 2x">
  153.               <source type="image/webp" srcset="image/img_sec02_04_sp.webp 1x, image/img_sec02_04_sp@2x.webp 2x">
  154.               <source srcset="image/img_sec02_04_sp.png 1x, image/img_sec02_04_sp@2x.png 2x">
  155.               <img src="image/img_sec02_04_sp.png" alt="プレゼント付きクロスワード">
  156.             </picture>
  157.           </div>
  158.           <p>賞味期限切れの商品が店頭に並ぶのを避けるために1990年代に始まったとされるルールでメーカー、小売り、消費者の3社が賞味期限を3分の1に分けあう。
  159.             という考え方から生まれ定着したルールです。</p>
  160.           <p>例えば、製造日から数えて6ヶ月先が賞味期限の食品の場合、最初の2ヶ月以内に卸業者は小売店に納品しなければなりません。
  161.             そこから1日でも過ぎてしまうと、返品されてしまいます。</p>
  162.           <p>さらに賞味期限の2か月前をすぎてしまうと撤去や値引きの対象になり、それでも残ったものは廃棄となります。
  163.             近年ではこの3分の1ルールを見直す動きも出てきました。</p>
  164.         </div>
  165.       </div>
  166.       <div class="block01 mb0">
  167.         <div class="box01">
  168.           <h3>5.食べ残し</h3>
  169.           <p>同じく農林水産省の食品ロスの表を見ると、事業系食品ロスと家庭系食品ロスに分けられ。
  170.             事業系食品ロスはさらに4種に分けられます。
  171.             食品製造業・・128万t
  172.             食品卸売業・・14万t
  173.             食品小売業・・64万t
  174.             外食産業・・・103万t</p>
  175.         </div>
  176.         <div class="photo">
  177.           <picture>
  178.             <source media="(min-width: 768px)" type="image/webp"
  179.               srcset="image/img_sec02_05_pc.webp, image/img_sec02_05_pc@2x.webp 2x">
  180.             <source media="(min-width: 768px)" srcset="image/img_sec02_05_pc.png, image/img_sec02_05_pc@2x.png 2x">
  181.             <source type="image/webp" srcset="image/img_sec02_05_sp.webp 1x, image/img_sec02_05_sp@2x.webp 2x">
  182.             <source srcset="image/img_sec02_05_sp.png 1x, image/img_sec02_05_sp@2x.png 2x">
  183.             <img src="image/img_sec02_05_sp.png" alt="プレゼント付きクロスワード">
  184.           </picture>
  185.         </div>
  186.         <div class="w100">
  187.           <p>ここで注目したいのは外食産業の廃棄量。全食品ロスの18％にも上ります。<br>
  188.             レストランや食堂などではごはんの量や、たべるおかずの量を自分で選ぶことができるので、残す人は少ないでしょう。<br>
  189.             しかし、冠婚葬祭の場で提供される食べ物や、宴会・飲み会などで出される料理などは、なかなか全部食べ切れないことが殆どです。</p>
  190.         </div>
  191.       </div>
  192.       <div>
  193.         <picture>
  194.           <source media="(min-width: 768px)" type="image/webp"
  195.             srcset="image/img_sec02_06_pc.webp, image/img_sec02_06_pc@2x.webp 2x">
  196.           <source media="(min-width: 768px)" srcset="image/img_sec02_06_pc.png, image/img_sec02_06_pc@2x.png 2x">
  197.           <source type="image/webp" srcset="image/img_sec02_06_sp.webp 1x, image/img_sec02_06_sp@2x.webp 2x">
  198.           <source srcset="image/img_sec02_06_sp.png 1x, image/img_sec02_06_sp@2x.png 2x">
  199.           <img src="image/img_sec02_06_sp.png" alt="国民1人当たりの食品ロス量">
  200.         </picture>
  201.       </div>
  202.     </div>
  203.     <div id="sec03" class="sec03 pb30 mb30">
  204.       <div>
  205.         <picture>
  206.           <source media="(min-width: 768px)" type="image/webp"
  207.             srcset="image/img_sec03_01_pc.webp, image/img_sec03_01_pc@2x.webp 2x">
  208.           <source media="(min-width: 768px)" srcset="image/img_sec03_01_pc.png, image/img_sec03_01_pc@2x.png 2x">
  209.           <source type="image/webp" srcset="image/img_sec03_01_sp.webp 1x, image/img_sec03_01_sp@2x.webp 2x">
  210.           <source srcset="image/img_sec03_01_sp.png 1x, image/img_sec03_01_sp@2x.png 2x">
  211.           <img src="image/img_sec03_01_sp.png" alt="管理栄養士もおすすめ。こつこつミルク">
  212.         </picture>
  213.       </div>
  214.       <div class="block01 mt0">
  215.         <p>ミリオンの野菜ジュースは独自の製法「温野菜ピューレ製法」を使っているため、
  216.           野菜の皮を余すことなく使用しています。
  217.           さらに、野菜の皮と実の間にはたくさんの大切な栄養が凝縮されています。
  218.           栄養たっぷりの美味しい国産緑黄色野菜ジュースは、
  219.           まさに現代の食品ロスを防止できる、SDGSな野菜ジュースなのです。</p>
  221.         <p> ＜リンク＞<br>
  222.           <a href="https://million-store.com/vegetable-juice/development-episode/">＞＞非常識な野菜の話</a><br><br>
  223.           <a href="https://million-store.com/vegetable-juice/">＞＞国産緑黄色野菜ジュースの詳細はこちら</a>
  224.         </p>
  226.         </p>
  227.       </div>
  228.     </div>
  229.     <!--{include file="`$smarty.const.TEMPLATE_REALDIR`/frontparts/bloc/nav_lp_yj.tpl"}-->
  230.   </div>
  231.   <!--{include file="`$smarty.const.TEMPLATE_REALDIR`/frontparts/bloc/btn_sns.tpl"}-->
  232.   <style>
  233.     #container {
  234.       width: 100%;
  235.     }
  237.     #main_column.colnum1 {
  238.       max-width: 1000px;
  239.     }
  241.     .content {
  242.       margin: 0 auto;
  243.       font-size: 4.267vw;
  244.     }
  246.     .content div {
  247.       box-sizing: border-box;
  248.     }
  250.     .sec-wrapper {
  251.       margin-bottom: 2em;
  252.     }
  254.     .sec-wrapper section {
  255.       margin-bottom: 20px;
  256.       line-height: 1.6;
  257.     }
  259.     .colnum1 img {
  260.       width: 100%;
  261.       max-width: 100%;
  262.       height: auto;
  263.     }
  265.     .btn a,
  266.     .btn a:link,
  267.     .btn a:visited,
  268.     .btn a:hover {
  269.       display: block;
  270.       padding: 1em 0;
  271.       box-sizing: border-box;
  272.       border: 1px solid #A9ABAD;
  273.       border-radius: 5px;
  274.       -moz-border-radius: 5px;
  275.       -webkit-border-radius: 5px;
  276.       border-radius: 5px;
  277.       background: #098003;
  278.       background: -webkit-linear-gradient(#098003 0%, #135e0f 100%);
  279.       background: -o-linear-gradient(#098003 0%, #135e0f 100%);
  280.       background: linear-gradient(#098003 0%, #135e0f 100%);
  281.       color: #FFF;
  282.       font-weight: bold;
  283.       text-decoration: none;
  284.       text-align: center;
  285.       text-shadow: 0 -1px 1px rgba(0, 0, 0, 1);
  286.       cursor: pointer;
  287.       -webkit-transition: opacity 0.5s ease-in;
  288.       -moz-transition: opacity 0.5s ease-in;
  289.       position: relative;
  290.     }
  292.     a.btn,
  293.     a.btn:link,
  294.     a.btn:visited,
  295.     a.btn:hover {
  296.       position: relative;
  297.       padding: 0;
  298.       color: #FFF;
  299.       font-size: 100%;
  300.       font-weight: bold;
  301.       text-decoration: none;
  302.       text-align: center;
  303.       width: 100%;
  304.       /* padding: 1em calc(50% - 3.6em) 1em calc(50% - 2.6em); */
  305.       line-height: 3;
  306.       text-shadow: 0 -1px 1px rgba(0, 0, 0, 1);
  307.       border: 1px solid #A9ABAD;
  308.       border-radius: 5px;
  309.       -moz-border-radius: 5px;
  310.       -webkit-border-radius: 5px;
  311.       display: inline-block;
  312.       box-sizing: border-box;
  313.       background: #098003;
  314.       background: -webkit-linear-gradient(#098003 0%, #135e0f 100%);
  315.       background: -o-linear-gradient(#098003 0%, #135e0f 100%);
  316.       background: linear-gradient(#098003 0%, #135e0f 100%);
  317.       cursor: pointer;
  318.       -webkit-transition: opacity 0.5s ease-in;
  319.       -moz-transition: opacity 0.5s ease-in;
  320.     }
  322.     /* .btn a:before,.btn a:link:before, .btn a:visited:before, .btn a:hover:before, */
  323.     a.btn:before,
  324.     a.btn:link:before,
  325.     a.btn:visited:before,
  326.     a.btn:hover:before {
  327.       width: 1em;
  328.       height: 1em;
  329.       margin: auto;
  330.       padding-right: .5em;
  331.       font-size: 100%;
  332.       color: #fff;
  333.       content: "\f07a";
  334.       font-family: "Font Awesome 5 Pro";
  335.       speak: none;
  336.       font-style: normal;
  337.       font-weight: 700;
  338.       font-variant: normal;
  339.       text-transform: none;
  340.       line-height: 1;
  341.       -webkit-font-smoothing: antialiased;
  342.       -moz-osx-font-smoothing: grayscale;
  343.     }
  345.     .content h2 {
  346.       margin-bottom: 0;
  347.       box-sizing: border-box;
  348.       font-size: 1em;
  349.       line-height: 1;
  350.       background: none;
  351.     }
  353.     h3 {
  354.       margin-bottom: .5em;
  355.       box-sizing: border-box;
  356.       color: #d4832b;
  357.       font-weight: bold;
  358.       font-size: 125%;
  359.       line-height: 1;
  360.     }
  362.     .subTitle {
  363.       margin-bottom: .5em;
  364.       padding: .25em 0 .25em .25em;
  365.       border-bottom: #122a88 solid 1px;
  366.       background-size: auto 100%;
  367.       color: #122a88;
  368.       font-size: 150%;
  369.       font-weight: normal;
  370.       letter-spacing: .1em;
  371.     }
  373.     .block01 {
  374.       width: 90%;
  375.       margin: 1em auto;
  376.       padding: 5%;
  377.       border-radius: 10px;
  378.       background-color: #fff;
  379.     }
  381.     .block02 {
  382.       width: 85%;
  383.       margin: 1em auto;
  384.     }
  386.     .sec01 {
  387.       background-color: #fdde81;
  388.     }
  390.     p {
  391.       margin-bottom: 1em;
  392.     }
  394.     .sec01 .area01 {
  395.       background-color: #f9f5e5;
  396.     }
  398.     .sec02 {
  399.       background-color: #fbe9dc;
  400.     }
  402.     .sec03 {
  403.       background-color: #ebe6e2;
  404.     }
  406.     .sec02 .block01 {
  407.       padding: 7.5%;
  408.     }
  410.     .sec02 .photo {
  411.       width: 75%;
  412.       margin: auto;
  413.     }
  415.     .navLpYj {
  416.       font-size: 100%;
  417.     }
  419.     @media screen and (min-width: 768px) {
  420.       .content {
  421.         font-size: 2.347vw;
  422.       }
  424.       .sec02 .block01 {
  425.         display: -webkit-flex;
  426.         display: flex;
  427.         -webkit-flex-flow: row wrap;
  428.         flex-flow: row wrap;
  429.         -webkit-justify-content: space-between;
  430.         justify-content: space-between;
  431.         -webkit-align-items: flex-start;
  432.         align-items: flex-start;
  433.       }
  435.       .sec02 .block01 {
  436.         padding: 5%;
  437.       }
  439.       .sec02 .box01 {
  440.         width: 60%;
  441.       }
  443.       .sec02 .block01:nth-of-type(even) .box01 {
  444.         order: 3;
  445.       }
  447.       .sec02 .photo:nth-of-type(even) .photo {
  448.         order: 2;
  449.       }
  451.       .sec02 .photo {
  452.         width: 38%;
  453.       }
  454.     }
  456.     @media screen and (min-width: 1024px) {
  457.       #container {
  458.         width: 1000px;
  459.       }
  461.       .content {
  462.         font-size: 24px;
  463.       }
  464.     }
  465.   </style>
  466. </div>
  467. {% endblock %}