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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  12. {% block stylesheet %}
  13.     <style>
  14.         /* Base Footer Role */
  15.         .ec-footerRole {
  16.             background-color: #F1F5E0;
  17.         }
  19.         /* Upper Footer Section */
  20.         .ec-footerRole__upper {
  21.             font-size: 12px !important;
  22.             display: flex;
  23.             flex-wrap: wrap;
  24.             justify-content: space-between;
  25.             background-color: #F1F5E0;
  26.             gap: 20px;
  27.             padding: 20px 15px;
  28.         }
  30.         @media only screen and (min-width: 768px) {
  31.             .ec-footerRole__upper {
  32.                 padding: 0 100px 20px;
  33.             }
  34.         }
  36.         /* Footer Title */
  37.         .ec-footerTitle {
  38.             width: 100%;
  39.         }
  41.         .ec-footerTitle .ec-footerTitle__copyright {
  42.             font-size: 12px !important;
  43.         }
  45.         /* Footer Navigation */
  46.         .ec-footerNavi {
  47.             padding-left: 10px;
  48.             margin-left: 0;
  49.             margin-bottom: 0;
  50.             list-style: none;
  51.             background-color: #ABCD03;
  52.             display: block;
  53.         }
  55.         .ec-footerNavi_copyright {
  56.             color: #000000;
  57.             font-size: 12px;
  58.             list-style: none;
  59.             padding: 0;
  60.             margin: 0;
  61.             flex: 1;
  62.             min-width: 250px;
  63.             max-width: 400px;
  64.             display: flex;
  65.             flex-direction: column;
  66.             align-items: center;
  67.         }
  69.         .ec-footerNavi__title {
  70.             font-size: 14px;
  71.             font-weight: bold;
  72.             margin-bottom: 10px;
  73.             color: #596F00;
  74.             border-top: 2px solid #ABCD03;
  75.             padding-top: 10px;
  76.         }
  78.         .ec-footerNavi__text {
  79.             font-weight: bold;
  80.             color: #000000;
  81.         }
  83.         /* Footer Navigation Link Line */
  84.         .ec-footerNavi_link_line {
  85.             text-align: center;
  86.             padding: 20px 0;
  87.             color: #000000;
  88.             display: none;
  89.             background-color: #ABCD03;
  90.         }
  92.         .ec-footerNavi_link_line a {
  93.             color: #000000;
  94.             text-decoration: none;
  95.             font-size: 14px;
  96.             padding: 0 10px;
  97.         }
  99.         .ec-footerNavi_link_line a:hover {
  100.             text-decoration: underline;
  101.         }
  103.         .ec-footerNavi_copyright .ec-footerNavi__title {
  104.             align-self: flex-start;
  105.             width: 100%;
  106.             font-size: 12px;
  107.         }
  109.         .ec-footerNavi_copyright__item {
  110.             font-size: 11px;
  111.             align-self: flex-start;
  112.             width: 100%;
  113.         }
  115.         .ec-footerNavi_payment__item {
  116.             font-size: 12px;
  117.             align-self: flex-start;
  118.             width: 100%;
  119.         }
  121.         /* Credit Image */
  122.         .credit-image {
  123.             display: flex;
  124.             justify-content: center;
  125.             align-items: center;
  126.             margin-top: 10px;
  127.             width: 100%;
  128.         }
  130.         .credit-image img {
  131.             max-width: 300px;
  132.             width: 100%;
  133.             margin: 0 auto;
  134.         }
  136.         /* Company Section */
  137.         .company {
  138.             display: none;
  139.         }
  141.         /* Media Queries */
  142.         @media only screen and (min-width: 768px) {
  143.             .ec-footerNavi_link_line {
  144.                 display: block;
  145.             }
  147.             .ec-footerTitle {
  148.                 margin-top: initial;
  149.             }
  151.             .ec-footerNavi {
  152.                 display: none;
  153.             }
  155.             .ec-footerNavi_copyright {
  156.                 width: initial;
  157.                 max-width: 400px;
  158.             }
  159.         }
  161.         @media only screen and (min-width: 1024px) {
  162.             .company {
  163.                 display: block;
  164.             }
  165.             .ec-footerRole__upper {
  166.                 display: flex;
  167.                 flex-wrap: wrap;
  168.                 justify-content: space-between;
  169.                 gap: 20px;
  170.                 padding: 0 100px 20px;
  171.             }
  172.         }
  173.     </style>
  174. {% endblock %}
  183. <div class="ec-footerRole">
  184.     <div class="ec-footerRole__upper">
  185.         <ul class="ec-footerNavi_copyright company">
  186.             <li class="ec-footerNavi__title">運営会社</li>
  187.             <li class="ec-footerNavi__text">株式会社前方後円墳</li>
  188.             <li class="ec-footerNavi__link">
  189.                 <a href="https://kofun.co.jp/" rel="noopener noreferrer">kofun.co.jp</a>
  190.             </li>
  191.         </ul>
  192.         <ul class="ec-footerNavi_copyright">
  193.             <li class="ec-footerNavi__title">お支払い方法</li>
  194.             <li class="ec-footerNavi_payment__item">
  195.                 {{ 'front.block.footer.payment_method'|trans }}
  196.             </li>
  197.             <li class="credit-image">
  198.                 <img src="{{ asset('img_credit.png', 'save_image') }}" alt="クレジットカード">
  199.             </li>
  200.         </ul>
  201.         <ul class="ec-footerNavi_copyright">
  202.             <li class="ec-footerNavi__title">商標について</li>
  203.             <li class="ec-footerNavi_copyright__item">
  204.                 {{ 'front.block.footer.kofun_trademark'|trans }}
  205.             </li>
  206.             <li class="ec-footerNavi_copyright__item">
  207.                 {{ 'front.block.footer.zenpokoenfun_trademark'|trans }}
  208.             </li>
  209.             <li class="ec-footerNavi_copyright__item">
  210.                 {{ 'front.block.footer.kofun_no_madoguchi_trademark'|trans }}
  211.             </li>
  212.             <li class="ec-footerNavi_copyright__item">
  213.                 {{ 'front.block.footer.iikofun_trademark'|trans }}
  214.             </li>
  215.         </ul>
  216.     </div>
  217.     <div class="ec-footerRole__inner">
  218.         {# デスクトップ表示 #}
  219.         <div class="ec-footerNavi_link_line">
  220.             |<a href="{{ url('about') }}">{{ 'front.block.footer.about_us'|trans }}</a>
  221.             |<a href="{{ url('contact') }}">{{ 'front.block.footer.inquiry'|trans }}</a>
  222.             |<a href="{{ url('privacy') }}">{{ 'front.block.footer.privacy_policy'|trans }}</a>
  223.             |<a href="{{ url('tradelaw') }}">{{ 'front.block.footer.act_on_specified_commercial_transactions'|trans }}</a>|
  224.         </div>
  225.         {# モバイル表示 #}
  226.         <ul class="ec-footerNavi">
  227.             <li class="ec-footerNavi__link">
  228.                 <a href="{{ url('about') }}">{{ 'front.block.footer.about_us'|trans }}</a>
  229.             </li>
  230.             <li class="ec-footerNavi__link">
  231.                 <a href="{{ url('contact') }}">{{ 'front.block.footer.inquiry'|trans }}</a>
  232.             </li>
  233.             <li class="ec-footerNavi__link">
  234.                 <a href="{{ url('privacy') }}">{{ 'front.block.footer.privacy_policy'|trans }}</a>
  235.             </li>
  236.             <li class="ec-footerNavi__link">
  237.                 <a href="{{ url('tradelaw') }}">{{ 'front.block.footer.act_on_specified_commercial_transactions'|trans }}</a>
  238.             </li>
  239.         </ul>
  240.         <div class="ec-footerTitle">
  241.             <div class="ec-footerTitle__copyright">COPYRIGHT© 2024 ZENPOKOENFUN ALL RIGHT RESERVED.</div>
  242.         </div>
  243.     </div>
  244. </div>