app/template/user_data/media.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  4. <div class="mainVisual">
  5.   <div class="btn">
  6.     <a href="/wp/contact-media/">
  7.       <picture>
  8.         <source media="(max-width: 749px)" srcset="image/sp_btn_inquiry.png') }}">
  9.         <img src=" {{ asset('assets/img/media/btn_inquiry.png') }}" alt="雑誌・メディア掲載お問い合わせはこちら">
  10.       </picture>
  11.     </a>
  12.   </div>
  13. </div>
  14. <div class="content">
  15.   <div class="sec-wrapper">
  16.     <div class="outer">
  17.       <dl class="list">
  18.         <dt class="photo"><img src=" {{ asset('assets/img/media/img_media_202407.jpg') }}" alt="婦人公論2020年12月8日号"></dt>
  19.         <dd class="description">
  20.           <table>
  21.             <tr>
  22.               <td class="head">企画</td>
  23.               <td class="item">メディア掲載</td>
  24.             </tr>
  25.             <tr>
  26.               <td class="head">メディア名</td>
  27.               <td class="item">家庭画報美味便り</td>
  28.             </tr>
  29.             <tr>
  30.               <td class="head">公開日</td>
  31.               <td class="item">2024年夏号</td>
  32.             </tr>
  33.             <tr>
  34.               <td class="head">コーナー名</td>
  35.               <td class="item">夏を乗り切るウェルネスフード</td>
  36.             </tr>
  37.             <tr>
  38.               <td class="head">掲載商品</td>
  39.               <td class="item">野菜ジュース</td>
  40.             </tr>
  41.           </table>
  42.         </dd>
  43.         <dd class="btn">
  44.           <a href="/vegetable-juice/">商品ページへ</a>
  45.         </dd>
  46.       </dl>
  47.     </div>
  48.   </div>
  49.   <div class="sec-wrapper">
  50.     <div class="outer">
  51.       <dl class="list">
  52.         <dt class="photo"><img src=" {{ asset('assets/img/media/img_media_20201203.jpg') }}" alt="婦人公論2020年12月8日号"></dt>
  53.         <dd class="description">
  54.           <table>
  55.             <tr>
  56.               <td class="head">企画</td>
  57.               <td class="item">メディア掲載</td>
  58.             </tr>
  59.             <tr>
  60.               <td class="head">メディア名</td>
  61.               <td class="item">婦人公論</td>
  62.             </tr>
  63.             <tr>
  64.               <td class="head">公開日</td>
  65.               <td class="item">2020年12月8日号</td>
  66.             </tr>
  67.             <tr>
  68.               <td class="head">コーナー名</td>
  69.               <td class="item">国産野菜ジュースで体を元気に</td>
  70.             </tr>
  71.             <tr>
  72.               <td class="head">掲載商品</td>
  73.               <td class="item">野菜ジュース</td>
  74.             </tr>
  75.           </table>
  76.         </dd>
  77.         <dd class="btn">
  78.           <a href="/vegetable-juice/">商品ページへ</a>
  79.         </dd>
  80.       </dl>
  81.     </div>
  82.   </div>
  83.   <div class="sec-wrapper">
  84.     <div class="outer">
  85.       <dl class="list">
  86.         <dt class="photo"><img src=" {{ asset('assets/img/media/img_20200716.jpg') }}" alt="TOKYO MX TV ひるキュン!"></dt>
  87.         <dd class="description">
  88.           <table>
  89.             <tr>
  90.               <td class="head">企画</td>
  91.               <td class="item">バラエティ番組</td>
  92.             </tr>
  93.             <tr>
  94.               <td class="head">メディア名</td>
  95.               <td class="item">村上マヨネーズのツッコませて頂きます!</td>
  96.             </tr>
  97.             <tr>
  98.               <td class="head">公開日</td>
  99.               <td class="item">2020.07.15</td>
  100.             </tr>
  101.             <tr>
  102.               <td class="head">コーナー名</td>
  103.               <td class="item">りんごちゃんの朝のルーティーン紹介</td>
  104.             </tr>
  105.             <tr>
  106.               <td class="head">掲載商品</td>
  107.               <td class="item">ミリオンパワー</td>
  108.             </tr>
  109.           </table>
  110.         </dd>
  111.         <dd class="btn">
  112.           <a href="/healthfood/millionpower/">商品ページへ</a>
  113.         </dd>
  114.       </dl>
  115.     </div>
  116.   </div>
  117.   <div class="sec-wrapper">
  118.     <div class="outer">
  119.       <dl class="list">
  120.         <dt class="photo"><img src=" {{ asset('assets/img/media/img_20190124.jpg') }}" alt="TOKYO MX TV ひるキュン!"></dt>
  121.         <dd class="description">
  122.           <table>
  123.             <tr>
  124.               <td class="head">企画</td>
  125.               <td class="item">ニュース</td>
  126.             </tr>
  127.             <tr>
  128.               <td class="head">メディア名</td>
  129.               <td class="item">ニコニコニュース</td>
  130.             </tr>
  131.             <tr>
  132.               <td class="head">公開日</td>
  133.               <td class="item">2019.1.24</td>
  134.             </tr>
  135.             <tr>
  136.               <td class="head">カテゴリ</td>
  137.               <td class="item">ビジネスニュース</td>
  138.             </tr>
  139.             <tr>
  140.               <td class="head">掲載商品</td>
  141.               <td class="item">健康飲料12缶セット</td>
  142.             </tr>
  143.           </table>
  144.         </dd>
  145.         <dd class="btn">
  146.           <a href="/campaign/jyuunikan/">商品ページへ</a>
  147.         </dd>
  148.       </dl>
  149.     </div>
  150.   </div>
  151.   <div class="sec-wrapper">
  152.     <div class="outer">
  153.       <dl class="list">
  154.         <dt class="photo"><img src=" {{ asset('assets/img/media/img_2018110501.jpg') }}" alt="TOKYO MX TV ひるキュン!"></dt>
  155.         <dd class="description">
  156.           <table>
  157.             <tr>
  158.               <td class="head">企画</td>
  159.               <td class="item">商品紹介</td>
  160.             </tr>
  161.             <tr>
  162.               <td class="head">メディア名</td>
  163.               <td class="item">TOKYO MX TV ひるキュン!</td>
  164.             </tr>
  165.             <tr>
  166.               <td class="head">公開日</td>
  167.               <td class="item">2018.10.31</td>
  168.             </tr>
  169.             <tr>
  170.               <td class="head">コーナー名</td>
  171.               <td class="item">ひるキュンショッピング</td>
  172.             </tr>
  173.             <tr>
  174.               <td class="head">掲載商品</td>
  175.               <td class="item">モアジュール・ボリュームアップスプレー</td>
  176.             </tr>
  177.           </table>
  178.         </dd>
  179.         <dd class="btn">
  180.           <a href="/select/morejour/">商品ページへ</a>
  181.         </dd>
  182.       </dl>
  183.     </div>
  184.   </div>
  185.   <div class="sec-wrapper">
  186.     <div class="outer">
  187.       <dl class="list">
  188.         <dt class="photo"><img src=" {{ asset('assets/img/media/img_2018101701.png') }}" alt="メナージュケリー2018春号"></dt>
  189.         <dd class="description">
  190.           <table>
  191.             <tr>
  192.               <td class="head">企画</td>
  193.               <td class="item">メディア掲載</td>
  194.             </tr>
  195.             <tr>
  196.               <td class="head">メディア名</td>
  197.               <td class="item">メナージュケリー</td>
  198.             </tr>
  199.             <tr>
  200.               <td class="head">号数・掲載日</td>
  201.               <td class="item">2018春号</td>
  202.             </tr>
  203.             <tr>
  204.               <td class="head">コーナー名</td>
  205.               <td class="item">目指せ「年齢不詳」な40代</td>
  206.             </tr>
  207.             <tr>
  208.               <td class="head">掲載商品</td>
  209.               <td class="item">モアジュール</td>
  210.             </tr>
  211.           </table>
  212.         </dd>
  213.         <dd class="btn">
  214.           <a href="/select/morejour/"> 商品ページへ</a>
  215.         </dd>
  216.       </dl>
  217.     </div>
  218.   </div>
  219.   <div class="sec-wrapper">
  220.     <div class="outer">
  221.       <dl class="list">
  222.         <dt class="photo"><img src=" {{ asset('assets/img/media/img_2018102203.jpg') }}" alt="懸賞なび2017年8月号"></dt>
  223.         <dd class="description">
  224.           <table>
  225.             <tr>
  226.               <td class="head">企画</td>
  227.               <td class="item">メディア掲載</td>
  228.             </tr>
  229.             <tr>
  230.               <td class="head">メディア名</td>
  231.               <td class="item">懸賞なび</td>
  232.             </tr>
  233.             <tr>
  234.               <td class="head">号数・掲載日</td>
  235.               <td class="item">2017年8月号</td>
  236.             </tr>
  237.             <tr>
  238.               <td class="head">コーナー名</td>
  239.               <td class="item">食品・飲料プレゼント</td>
  240.             </tr>
  241.             <tr>
  242.               <td class="head">掲載商品</td>
  243.               <td class="item">フルベリ</td>
  244.             </tr>
  245.           </table>
  246.         </dd>
  247.         <dd class="btn">
  248.           <a href="/healthfood/fruberry/">商品ページへ</a>
  249.         </dd>
  250.       </dl>
  251.     </div>
  252.   </div>
  253.   <div class="sec-wrapper">
  254.     <div class="outer">
  255.       <dl class="list">
  256.         <dt class="photo"><img src=" {{ asset('assets/img/media/img_2018102202.jpg') }}" alt="あきたタウン情報TOWNJOHO2017年6月号">
  257.         </dt>
  258.         <dd class="description">
  259.           <table>
  260.             <tr>
  261.               <td class="head">企画</td>
  262.               <td class="item">メディア掲載</td>
  263.             </tr>
  264.             <tr>
  265.               <td class="head">メディア名</td>
  266.               <td class="item">あきたタウン情報TOWNJOHO</td>
  267.             </tr>
  268.             <tr>
  269.               <td class="head">号数・掲載日</td>
  270.               <td class="item">2017年6月号</td>
  271.             </tr>
  272.             <tr>
  273.               <td class="head">コーナー名</td>
  274.               <td class="item">今月のプレゼント</td>
  275.             </tr>
  276.             <tr>
  277.               <td class="head">掲載商品</td>
  278.               <td class="item">フルベリ</td>
  279.             </tr>
  280.           </table>
  281.         </dd>
  282.         <dd class="btn">
  283.           <a href="/healthfood/fruberry/">商品ページへ</a>
  284.         </dd>
  285.       </dl>
  286.     </div>
  287.   </div>
  288.   <div class="sec-wrapper">
  289.     <div class="outer">
  290.       <dl class="list">
  291.         <dt class="photo"><img src=" {{ asset('assets/img/media/img_2018102201.jpg') }}" alt="VOCE2014年11月号"></dt>
  292.         <dd class="description">
  293.           <table>
  294.             <tr>
  295.               <td class="head">企画</td>
  296.               <td class="item">メディア掲載</td>
  297.             </tr>
  298.             <tr>
  299.               <td class="head">メディア名</td>
  300.               <td class="item">VOCE</td>
  301.             </tr>
  302.             <tr>
  303.               <td class="head">号数・掲載日</td>
  304.               <td class="item">2014年11月号</td>
  305.             </tr>
  306.             <tr>
  307.               <td class="head">コーナー名</td>
  308.               <td class="item">美容的アロエパワーを探る</td>
  309.             </tr>
  310.             <tr>
  311.               <td class="head">掲載商品</td>
  312.               <td class="item">アロエ＆グレープフルーツ</td>
  313.             </tr>
  314.           </table>
  315.         </dd>
  316.         <dd class="btn">
  317.           <a href="/juice/aloe/">商品ページへ</a>
  318.         </dd>
  319.       </dl>
  320.     </div>
  321.   </div>
  322.   <!-- <div class="sec-wrapper">
  323.         <div class="outer">
  324.             <dl class="list">
  325.                 <dt class="photo"><img src=" {{ asset('assets/img/media/img_2018101702.png') }}" alt="ラジオ広告"></dt>
  326.                 <dd class="description">
  327.                     <table>
  328.                         <tr>
  329.                             <td class="head">企画</td>
  330.                             <td class="item">ラジオ広告</td>
  331.                         </tr>
  332.                         <tr>
  333.                             <td class="head">メディア名</td>
  334.                             <td class="item">ラジオ大阪</td>
  335.                         </tr>
  336.                         <tr>
  337.                             <td class="head">号数・掲載日</td>
  338.                             <td class="item">2018.10.17</td>
  339.                         </tr>
  340.                         <tr>
  341.                             <td class="head">コーナー名</td>
  342.                             <td class="item">番組名：－</td>
  343.                         </tr>
  344.                         <tr>
  345.                             <td class="head">掲載商品</td>
  346.                             <td class="item">国産緑黄色野菜ジュース</td>
  347.                         </tr>
  348.                     </table>
  349.                 </dd>
  350.                 <dd class="btn">
  351.                     <a href="/vegetable-juice/"> 商品ページへ</a>
  352.                 </dd>
  353.             </dl>
  354.         </div>
  355.     </div> -->
  356. </div>
  357. <style>
  358.   #container {
  359.     width: 100%;
  360.   }
  362.   #main_column.colnum1 {
  363.     margin: 0 auto 30px;
  364.     width: 100%;
  365.   }
  367.   #container table {
  368.     margin: 15px auto 0;
  369.     border-top: 1px solid #343434;
  370.     border-left: 1px solid #343434;
  371.   }
  373.   #container table td {
  374.     padding: 4px;
  375.     border-right: 1px solid #343434;
  376.     border-bottom: 1px solid #343434;
  377.   }
  379.   .mainVisual {
  380.     position: relative;
  381.     width: 88%;
  382.     margin: 0 auto;
  383.     height: 0;
  384.     padding: 58.67% 0 0;
  385.     background: url("/html/template/million01/assets/img/media/sp_mv.png") center top no-repeat;
  386.     background-size: 100% auto;
  387.   }
  389.   .mainVisual .btn {
  390.     width: 90%;
  391.     position: absolute;
  392.     left: 5%;
  393.     bottom: 3%;
  394.   }
  396.   .mainVisual .btn img {
  397.     width: 100%;
  398.   }
  400.   .content {
  401.     width: 88%;
  402.     margin: 0 auto;
  403.   }
  405.   .sec-wrapper {
  406.     position: relative;
  407.     width: 100%;
  408.     padding: 20px 9%;
  409.     background: #fffcd0;
  410.     box-sizing: border-box;
  411.   }
  413.   .sec-wrapper:nth-of-type(even) {
  414.     background: #e5ffe9;
  415.   }
  417.   .outer {
  418.     margin-bottom: 0;
  419.   }
  421.   .list {
  422.     display: -webkit-flex;
  423.     display: flex;
  424.     -webkit-flex-flow: row wrap;
  425.     flex-flow: row wrap;
  426.     -webkit-justify-content: space-between;
  427.     justify-content: space-between;
  428.     -webkit-align-items: center;
  429.     align-items: center;
  430.   }
  432.   .list .photo {
  433.     width: 25%;
  434.     order: 1;
  435.   }
  437.   .list .description {
  438.     width: 100%;
  439.     order: 3;
  440.   }
  442.   .list .description .title {
  443.     width: 34%;
  444.   }
  446.   .list .description .item {
  447.     width: 66%;
  448.   }
  450.   .list .btn {
  451.     width: 75%;
  452.     order: 2;
  453.   }
  455.   .list .btn a {
  456.     display: block;
  457.     width: 62%;
  458.     margin-left: auto;
  459.     padding: 1em 0;
  460.     border-radius: 5px;
  461.     background-image: -moz-linear-gradient(90deg, #489000 0%, #6bd500 100%);
  462.     background-image: -webkit-linear-gradient(90deg, #489000 0%, #6bd500 100%);
  463.     background-image: -ms-linear-gradient(90deg, #489000 0%, #6bd500 100%);
  464.     box-sizing: border-box;
  465.     color: #fff;
  466.     font-weight: bold;
  467.     text-align: center;
  468.     text-decoration: none;
  469.   }
  471.   .list .btn a::before {
  472.     display: inline-block;
  473.     content: "▲";
  474.     transform: rotate(90deg);
  475.   }
  478.   @media screen and (min-width: 768px) {
  479.     .mainVisual {
  480.       background: url("/html/template/million01/assets/img/media/mv.png") center top no-repeat;
  481.       background-size: 100% auto;
  482.     }
  484.     .mainVisual .btn {
  485.       width: 53%;
  486.       position: absolute;
  487.       right: 3.5%;
  488.       bottom: 3.5%;
  489.       left: inherit;
  490.     }
  492.     .sec-wrapper {
  493.       padding: 20px 3.33%;
  494.     }
  496.     .list {
  497.       -webkit-align-items: stretch;
  498.       align-items: stretch;
  499.     }
  501.     .list .photo {
  502.       width: 20%;
  503.     }
  505.     .list .description {
  506.       width: 77%;
  507.       margin-bottom: 10px;
  508.       order: 2;
  509.       font-size: 1.5rem;
  510.     }
  512.     #container table {
  513.       margin: 0 auto;
  514.       border-top: 1px solid #343434;
  515.       border-left: 1px solid #343434;
  516.     }
  518.     .list .description .title {
  519.       width: 34%;
  520.     }
  522.     .list .description .item {
  523.       width: 66%;
  524.     }
  526.     .list .btn {
  527.       width: 100%;
  528.       order: 3;
  529.       font-size: 1.125rem;
  530.       ;
  531.     }
  533.     .list .btn a {
  534.       width: 23%;
  535.       padding: .75em 0;
  536.     }
  537.   }
  539.   @media screen and (min-width: 1024px) {
  540.     #container {
  541.       width: 1000px;
  542.     }
  544.     .mainVisual {
  545.       width: 100%;
  546.       padding: 66.67% 0 0;
  547.     }
  549.     .content {
  550.       width: 100%;
  551.     }
  553.     .sec-wrapper {}
  555.   }
  556. </style>
  558. {% endblock %}