/* ============================================================
   ひとしずく — カスタムCSS
   配置場所: wp-content/themes/blocksy-child/assets/hitoshizuku.css
   読み込み: 子テーマ functions.php が wp_enqueue_scripts (優先度999) で enqueue
   ============================================================ */

/* --- 日本語タイポグラフィ ---
   日本站は中文站より行間と字幅を広く取る。モバイル比率が高いため
   本文は 15px 以下にしない。 */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-size: 15.5px;
  line-height: 2.0;
  letter-spacing: 0.03em;
  font-feature-settings: "palt";
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

/* 和文は英数字より一段大きく見えるため、数字の桁を詰める */
.hs-tbl td, .hs-tbl th, .woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
}

/* --- 配色: ひとしずく（一滴）= 水／雫をモチーフにした柔らかい和色 --- */
:root {
  --hs-ink:   #3a3a3a;  /* 本文。純黒 #000 は日本語では強すぎる */
  --hs-mist:  #f7f5f2;  /* 背景。生成り */
  --hs-drop:  #7ba7bc;  /* アクセント。浅葱色系 */
  --hs-line:  #e2ddd7;  /* 罫線 */
}

body { color: var(--hs-ink); }
a { color: var(--hs-drop); }

/* --- 規程ページの表 --- */
.hs-tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 14.5px;
  background: #fff;
  border: 1px solid var(--hs-line);
}

.hs-tbl th,
.hs-tbl td {
  border: 1px solid var(--hs-line);
  padding: 0.85em 1em;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}

.hs-tbl th {
  width: 32%;
  background: var(--hs-mist);
  font-weight: 600;
  white-space: nowrap;
}

.hs-tbl tr:nth-child(even) td { background: #fcfbfa; }

/* モバイルでは表を横スクロールさせず、ラベルを上に落とす */
@media (max-width: 599px) {
  .hs-tbl, .hs-tbl tbody, .hs-tbl tr, .hs-tbl th, .hs-tbl td { display: block; width: 100%; }
  .hs-tbl tr { margin-bottom: 1em; border: 1px solid var(--hs-line); }
  .hs-tbl th { width: 100%; white-space: normal; border-bottom: none; }
  .hs-tbl td { border-top: none; }
}

/* --- 見出し: 和文ECは細い下線＋左アクセントが定番 --- */
.entry-content h2 {
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--hs-line);
  margin-top: 2em;
}

.entry-content h3 {
  margin-top: 2.2em;
  padding-left: 0.7em;
  border-left: 3px solid var(--hs-drop);
}

.entry-content h4 {
  margin-top: 1.8em;
  color: var(--hs-drop);
}

/* --- 注記・補足 --- */
.hs-note {
  margin: 1.4em 0;
  padding: 0.9em 1.1em;
  background: var(--hs-mist);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.9;
  color: #5f5a54;
}

/* 関税・受取拒否など、特に読んでほしい箇所 */
.hs-warn {
  margin: 1.4em 0;
  padding: 1em 1.2em;
  background: #fdf6f2;
  border-left: 3px solid #d99a6c;
  border-radius: 0 6px 6px 0;
  font-size: 14.5px;
  line-height: 1.9;
}

/* --- リスト: 和文は行間を詰める --- */
.entry-content ul li,
.entry-content ol li {
  margin-bottom: 0.5em;
}

/* --- WooCommerce 微調整 --- */
/* 価格を主役にする。日本語ECは価格の視認性が離脱率に直結する */
.woocommerce ul.products li.product .price {
  color: var(--hs-ink) !important;
  font-size: 1.05em;
  font-weight: 600;
}

/* 送料無料の訴求バッジ（¥5,000以上） */
.hs-free-ship {
  display: inline-block;
  padding: 0.25em 0.7em;
  background: var(--hs-drop);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* ボタンを角丸に（日本のハンドメイド系サイトの定番） */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link,
.ct-header .ct-cart .ct-cart-total {
  border-radius: 999px !important;
}

/* --- 特定商取引法表記への導線をフッターで強調 --- */
.site-footer a[href*="tokushoho"] {
  font-weight: 600;
}