app/template/default/Block/footer.twig line 1

Open in your IDE?
  1. <style>
  2. /*全てに適用*/    
  4. /*ウィンドウ幅が767px以上の場合に適用*/
  5. @media screen and (min-width: 767px) { 
  6.     .footer{
  7.         background-color: #333;
  8.         color: #FFF;
  9.         padding-top: 50px;
  10.         font-weight: bold;
  11.     }
  12.     .footer_pc{
  13.     }
  14.     .footer_sp{
  15.         display: none;
  16.     }
  17.     .footer_logo{
  18.         float: right;
  19.         margin: 100px 20px 5px 0;
  20.     }
  21.     .copyright{
  22.         text-align: right;
  23.         margin-right: 20px;
  24.         font-weight: lighter;
  25.     }
  26.     .sp_br{
  27.         display: none;
  28.     }
  29.     }
  30. /*ウィンドウ幅が最大767pxまでの場合に適用*/
  31. @media screen and (max-width: 767px) { 
  32.     .footer{
  33.         background-color: #333;
  34.         color: #FFF;
  35.         padding-top: 0;
  36.         font-weight: bold;
  37.     }
  38.     .footer_pc{
  39.         display: none;
  40.     }
  41.     .footer_sp{
  42.         margin: 0 50px 0 8%;
  43.     }
  44.     .footer_logo{
  45.         margin: 0 0 0 44%;
  46.     }
  47.     .copyright{
  48.         text-align: center;
  49.         margin-right: 20px;
  50.         font-weight: lighter;
  51.     }
  52.     .sp_br{
  53.         display: block;
  54.     }
  55.     }
  57. </style>
  59. <footer class="footer">
  60.     <ul class="footer_pc" style="float: left; margin: 0 50px 0 25%;">
  61.         <li><a href="/" style="color: #fff;">ホーム</a></li>
  62.         <li><a href="/products/list?category_id=40" style="color: #fff;">商品一覧</a></li>
  63.         {#<li><a href="/guide" style="color: #fff;">ご利用ガイド</a></li>#}
  64.         <li><a href="https://multipure.co.jp/" target="_blank" style="color: #fff;">ブランドサイト</a></li>
  65.     </ul>
  66.     <ul class="footer_pc" style="float: left; margin-right: 50px;">
  67.         <li><a href="/products/list?category_id=40" style="color: #fff;">カウンタートップ浄水器</a></li>
  68.         <li><a href="/products/list?category_id=41" style="color: #fff;">ビルトイン浄水器</a></li>
  69.         <li>&nbsp;&nbsp;<span style="font-weight: lighter;"><a href="/user_data/builtin_select01" style="color: #fff;">浄水器本体から選ぶ</a></span></li>
  70.         <li>&nbsp;&nbsp;<span style="font-weight: lighter;"><a href="/user_data/builtin_select02" style="color: #fff;">水栓から選ぶ</a></span></li>
  71.         <li>&nbsp;&nbsp;<span style="font-weight: lighter;"><a href="/user_data/builtin_select03" style="color: #fff;">すでに水栓をお持ちの場合</a></span></li>
  72.         <li><a href="/products/list?category_id=42" style="color: #fff;">レンタル浄水器</a></li>
  73.         {#<li>&nbsp;&nbsp;<span style="font-weight: lighter;"><a href="/contact_works" style="color: #fff;">取付工事のご相談・受付</a></span></li>#}
  74.         <li><a href="/products/list?category_id=43" style="color: #fff;">浴室シャワー</a></li>
  75.         <li><a href="/products/list?category_id=44" style="color: #fff;">交換カートリッジ</a></li>
  76.         <li><a href="/products/list?category_id=10" style="color: #fff;">部品</a></li>
  77.         <li><a href="/products/list?category_id=89" style="color: #fff;">工事費のお支払い</a></li>
  78.     </ul>
  79.     <ul class="footer_pc" style="float: left; margin-right: 50px;">
  80.         <li><a href="https://multipure.co.jp/tokusyo/" target="_blank" style="color: #fff;">特定商取引に関する表記</a></li>
  81.         <li><a href="https://multipure.co.jp/privacy" target="_blank" style="color: #fff;">プライバシーポリシー</a></li>
  82.         <li><a href="https://multipure.co.jp/company/" target="_blank" style="color: #fff;">会社概要</a></li>
  83.     </ul>
  84.     <br style="clear: both;">
  85.     
  86.     <ul class="footer_sp" style="">
  87.         <li><a href="/" style="color: #fff;">ホーム</a></li>
  88.         <li><a href="/products/list" style="color: #fff;">商品一覧</a></li>
  89.         {#<li><a href="/guide" style="color: #fff;">ご利用ガイド</a></li>#}
  90.         <li><a href="https://multipure.co.jp/" target="_blank" style="color: #fff;">ブランドサイト</a></li>
  91.         <li><a href="/products/list?category_id=40" style="color: #fff;">カウンタートップ浄水器</a></li>
  92.         <li><a href="/products/list?category_id=41" style="color: #fff;">ビルトイン浄水器</a></li>
  93.         <li>&nbsp;&nbsp;<span style="font-weight: lighter;"><a href="/user_data/builtin_select01" style="color: #fff;">浄水器本体から選ぶ</a></span></li>
  94.         <li>&nbsp;&nbsp;<span style="font-weight: lighter;"><a href="/user_data/builtin_select02" style="color: #fff;">水栓から選ぶ</a></span></li>
  95.         <li>&nbsp;&nbsp;<span style="font-weight: lighter;"><a href="/user_data/builtin_select03" style="color: #fff;">すでに水栓をお持ちの場合</a></span></li>
  96.         <li><a href="/products/list?category_id=42" style="color: #fff;">レンタル浄水器</a></li>
  97.         {#<li>&nbsp;&nbsp;<span style="font-weight: lighter;"><a href="/contact_works" style="color: #fff;">取付工事のご相談・受付</a></span></li>#}
  98.         <li><a href="/products/list?category_id=43" style="color: #fff;">浴室シャワー</a></li>
  99.         <li><a href="/products/list?category_id=44" style="color: #fff;">交換カートリッジ</a></li>
  100.         <li><a href="/products/list?category_id=10" style="color: #fff;">部品</a></li>
  101.         <li><a href="/products/list?category_id=89" style="color: #fff;">工事費のお支払い</a></li>
  102.         <li><a href="https://multipure.co.jp/tokusyo/" target="_blank" style="color: #fff;">特定商取引に関する表記</a></li>
  103.         <li><a href="https://multipure.co.jp/privacy" target="_blank" style="color: #fff;">プライバシーポリシー</a></li>
  104.         <li><a href="https://multipure.co.jp/company/" target="_blank" style="color: #fff;">会社概要</a></li>
  105.     </ul>
  106.     <img src="/html/user_data/img/logo2.jpg" alt=""  class="footer_logo">
  107.     <br style="clear: both;">
  108.     <p class="copyright">Copyright (C) 2010-2020 Multi-Pure Japan Corporation<br class="sp_br"> All right Reserved</p>
  110. </footer>