/*
Theme Name:		Welcart Mode Child Theme
Template:		welcart_mode
Theme URI:		https://www.welcart.com/archives/12623.html
Author:			Welcart Inc.
Author URI:		https://www.welcart.com/
Description:	Mode Child is the Welcart Mode Child Theme.
Version:		1.0.0
License:		GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Tags:			responsive-layout, mode, one-columns, left-sidebar or right-sidebar
Requires at least: 5.6
Requires PHP: 7.4 - 8.1
*/

/* 送料表のコンテナ */
.shipping-table-container {
  max-width: 600px; /* PCで見ても広がりすぎないサイズ */
  margin: 0 auto;
  font-family: sans-serif;
  color: #333;
}

/* テーブル本体のスタイル */
.shipping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden; /* 角丸を適用するため */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 軽い影で浮かせる */
}

/* ヘッダーのスタイル */
.shipping-table th {
  background-color: #5a2a4b; /* カシスをイメージした落ち着いた色 */
  color: #fff;
  font-weight: bold;
  padding: 12px 10px;
  text-align: left;
  border-bottom: 2px solid #3c1c32;
}

/* セルのスタイル */
.shipping-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

/* 最後の行の線を消す */
.shipping-table tbody tr:last-child td {
  border-bottom: none;
}

/* しましまの背景色（偶数行）で見やすく */
.shipping-table tbody tr:nth-child(even) {
  background-color: #fcfcfc;
}

/* 各カラムの微調整 */
.shipping-table .area-name {
  font-weight: bold;
  white-space: nowrap; /* エリア名は改行させない */
  width: 20%;
}

.shipping-table .pref-name {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  width: 55%;
}

.shipping-table .price {
  font-weight: bold;
  text-align: right; /* 金額は右揃えが基本 */
  white-space: nowrap;
  color: #e60012; /* 金額を少し目立たせる場合。不要なら #333 に */
  width: 25%;
}

/* 注記のスタイル */
.shipping-note {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
  text-align: right;
}

/* スマホ向けの微調整（画面幅が480px以下の場合） */
@media screen and (max-width: 480px) {
  .shipping-table {
    font-size: 13px;
  }
  .shipping-table th, 
  .shipping-table td {
    padding: 8px 6px;
  }
  .shipping-table .pref-name {
    font-size: 11px;
  }
}