app/template/user_data/sending_cost.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% block stylesheet %}
  4.  <style>
  5.     .line-height{
  6.        padding-top:1rem;
  7.     }
  8.         .shipping-fee-table {
  9.             width: 100%;
  10.             border-collapse: collapse;
  11.             margin: 20px 0;
  12.             border: solid #e0e0e0 2px;
  13.     }
  15.         .shipping-fee-table th,
  16.         .shipping-fee-table td {
  17.             padding: 12px 16px;
  18.             text-align: left;
  19.             border-bottom: 1px solid #e0e0e0;
  20.         }
  22.         .shipping-fee-table th {
  23.             background-color: #f8f9fa;
  24.             font-weight: bold;
  25.             color: #333;
  26.             border-bottom: 2px solid #dee2e6;
  27.         }
  29.         .shipping-fee-table tr:nth-child(even) {
  30.             background-color: #f8f9fa;
  31.         }
  33.         .shipping-fee-table tr:hover {
  34.             background-color: #e3f2fd;
  35.         }
  37.         .prefecture-col {
  38.             width: 80%;
  39.         }
  41.         .fee-col {
  42.             width: 20%;
  43.             text-align: right;
  44.             font-weight: bold;
  45.             color: #d32f2f;
  46.         }
  48.         .shipping-fee-table tbody td {
  49.             font-size: 14px;
  50.         }
  52.         /* レスポンシブ対応 */
  53.         @media (max-width: 768px) {
  54.             .shipping-fee-table {
  55.                 font-size: 12px;
  56.             }
  57.             
  58.             .shipping-fee-table th,
  59.             .shipping-fee-table td {
  60.                 padding: 8px 12px;
  61.             }
  62.         }
  64.         /* Twigテンプレート用のコメント表示 */
  65.         .twig-comment {
  66.             background-color: #fff3cd;
  67.             border: 1px solid #ffeaa7;
  68.             padding: 15px;
  69.             margin: 20px 0;
  70.             border-radius: 4px;
  71.             font-family: 'Courier New', monospace;
  72.             font-size: 14px;
  73.             color: #856404;
  74.         }
  75.     </style>
  76. {% endblock %}
  77. {% block main %}
  79. <div class="header-container-simple">
  80.   <img src="/html/user_data/ContentImg/siopanda.png" alt="パン屋ロゴ" class="header-logo">
  81.   <h1 class="header-title">送料について</h1>
  82. </div>
  84. <div style="padding: 1rem;">
  85. <p class="line-height">5,000円（税込）以上の購入で送料無料です。<br>
  86. ※沖縄県と北海道へのお届けは別途1000円がかかります。</p>
  87. <p class="line-height">
  88. 送料無料の商品と単品商品は同時購入でも送料無料となります。<br>
  89. ※沖縄県と北海道へのお届けは別途1000円がかかります。
  90. ご購入後、送料を請求させていただきますのでご了承くださいませ。</p>
  91. <p class="line-height">単品商品は都道府県ごとに送料を設定しております。</p>
  92. </div>
  93. <div style="border-radius: 8px;padding: 1rem; ">
  94.     <table class="shipping-fee-table">
  95.         <thead>
  96.             <tr>
  97.                 <th class="prefecture-col">都道府県</th>
  98.                 <th class="fee-col">送料</th>
  99.             </tr>
  100.         </thead>
  101.         <tbody>
  102.             <tr>
  103.                 <td class="prefecture-col">北海道</td>
  104.                 <td class="fee-col">1,790円</td>
  105.             </tr>
  106.             <tr>
  107.                 <td class="prefecture-col">青森県、秋田県、岩手県</td>
  108.                 <td class="fee-col">1,100円</td>
  109.             </tr>
  110.             <tr>
  111.                 <td class="prefecture-col">宮城県、山形県、福島県</td>
  112.                 <td class="fee-col">1,000円</td>
  113.             </tr>
  114.             <tr>
  115.                 <td class="prefecture-col">茨城県、栃木県、群馬県、埼玉県、千葉県、神奈川県、東京都、山梨県、新潟県、長野県、富山県、石川県、福井県、静岡県、愛知県、三重県、岐阜県、大阪府、京都府、滋賀県、奈良県、和歌山県、兵庫県</td>
  116.                 <td class="fee-col">900円</td>
  117.             </tr>
  118.             <tr>
  119.                 <td class="prefecture-col">岡山県、広島県、山口県、鳥取県、島根県、香川県、徳島県、愛媛県、高知県</td>
  120.                 <td class="fee-col">1,000円</td>
  121.             </tr>
  122.             <tr>
  123.                 <td class="prefecture-col">福岡県、佐賀県、長崎県、熊本県、大分県、宮崎県、鹿児島県</td>
  124.                 <td class="fee-col">1,100円</td>
  125.             </tr>
  126.             <tr>
  127.                 <td class="prefecture-col">沖縄県</td>
  128.                 <td class="fee-col">1,990円</td>
  129.             </tr>
  130.         </tbody>
  131.     </table>
  132. </div>
  133. {% endblock %}