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

Open in your IDE?
  1. <style>
  2.     .ec-areaNotice-top {
  3.         max-width: 1130px;
  4.         margin: 24px auto;
  5.         padding: 0 16px;
  6.     }
  7.     .ec-areaNotice-top__inner {
  8.         display: flex;
  9.         align-items: flex-start;
  10.         gap: 16px;
  11.         padding: 20px 24px;
  12.         background: #f8f9fa;
  13.         border-left: 4px solid #1a6fcf;
  14.         border-radius: 0 8px 8px 0;
  15.     }
  16.     .ec-areaNotice-top__icon {
  17.         font-size: 28px;
  18.         line-height: 1;
  19.         flex-shrink: 0;
  20.         margin-top: 2px;
  21.     }
  22.     .ec-areaNotice-top__body {
  23.         flex: 1;
  24.     }
  25.     .ec-areaNotice-top__title {
  26.         font-size: 15px;
  27.         font-weight: bold;
  28.         color: #1a6fcf;
  29.         margin: 0 0 8px;
  30.     }
  31.     .ec-areaNotice-top__text {
  32.         font-size: 13px;
  33.         color: #444;
  34.         line-height: 1.8;
  35.         margin: 0;
  36.     }
  37.     .ec-areaNotice-top__text strong {
  38.         color: #222;
  39.         font-weight: bold;
  40.     }
  41.     .ec-areaNotice-top__link {
  42.         display: inline-block;
  43.         margin-top: 10px;
  44.         font-size: 13px;
  45.         color: #1a6fcf;
  46.         text-decoration: underline;
  47.     }
  48.     .ec-areaNotice-top__link:hover {
  49.         color: #0d4fa0;
  50.     }
  51.     @media (max-width: 767px) {
  52.         .ec-areaNotice-top__inner {
  53.             flex-direction: column;
  54.             gap: 10px;
  55.             padding: 14px 16px;
  56.         }
  57.         .ec-areaNotice-top__icon {
  58.             font-size: 22px;
  59.         }
  60.     }
  61. </style>
  63. <div class="ec-areaNotice-top">
  64.     <div class="ec-areaNotice-top__inner">
  65.         <div class="ec-areaNotice-top__icon">📍</div>
  66.         <div class="ec-areaNotice-top__body">
  67.             <p class="ec-areaNotice-top__title">施工対応エリアについて</p>
  68.             <p class="ec-areaNotice-top__text">
  69.                 当店の施工サービスは、<strong>山梨県全域</strong>および<strong>長野県諏訪エリア（諏訪市・岡谷市・茅野市・諏訪郡）</strong>を対象としております。<br>
  70.                 上記エリア外のお客様には、商品のみのご購入が可能でございます。ご不明な点がございましたら、お気軽にお問い合わせください。
  71.             </p>
  72.             <a class="ec-areaNotice-top__link" href="/contact">エリア外のお客様・ご相談はこちら →</a>
  73.         </div>
  74.     </div>
  75. </div>