@charset "UTF-8";
/*
    Template: swell
    Theme Name: jpnsim-01 child
    Theme URI: https://jpnsim.com/
    Description: jpnsim.com（日本網卡通）用 SWELL子テーマ。既存 swell_child とは別テーマ。
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
   日本網卡通（jpnsim.com） 子テーマCSS
   デザイン方向 = A 信頼の中立比較（チャコール×ブルー／CTA暖色）
   ※色・レイアウト・ボタン色は「カスタマイザー」で設定する。
     このファイルには GUI で出来ない「①繁体字フォント ②比較表」だけを書く。
   ========================================================= */

/* 繁体字Webフォント（Google Fonts）。@import は @charset の次・通常ルールより前に置く */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');


/* =========================================================
   ① 繁体字フォント Noto Sans TC を本文・見出し全体に適用
   競合の多くはシステムフォント任せ＝ここを明示するのが安い差別化。
   日本語フォントだと台湾人読者に字形が「日本の漢字」に見えるのを防ぐ。
   ========================================================= */
body,
input, textarea, button, select,
.l-content, .c-postTitle, .p-postContent,
h1, h2, h3, h4, h5, h6,
.swell-block-button__link {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
               "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "palt";   /* 約物の余白を詰めて中文を読みやすく */
}


/* =========================================================
   ② 旗艦記事の比較表（10社比較・損益分岐など）
   使い方:
     テーブルブロックを選択 →「ブロック」設定の
     「高度な設定 > 追加CSSクラス」に  tbl-compare  と入力。
     さらにブロック設定で「テーブルを横スクロール可能にする」をON。
   おすすめ行は その行(<tr>)の追加CSSクラスに  is-best  を足すと黄色く強調。
   ========================================================= */
.tbl-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}
.tbl-compare th,
.tbl-compare td {
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  text-align: center;
  vertical-align: middle;
}

/* 色付きヘッダー行（チャコール＝方向Aのブランド色） */
.tbl-compare thead th {
  background: #1F2937;
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
}

/* ゼブラストライプ（奇数行に極薄グレー） */
.tbl-compare tbody tr:nth-child(odd)  { background: #F9FAFB; }
.tbl-compare tbody tr:nth-child(even) { background: #ffffff; }

/* 1列目（商品名/項目名）は左寄せ・太字、横スクロール時は固定列に */
.tbl-compare th:first-child,
.tbl-compare td:first-child {
  text-align: left;
  font-weight: 700;
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 1;
}
.tbl-compare tbody tr:nth-child(odd) td:first-child { background: #F9FAFB; }
.tbl-compare thead th:first-child {
  background: #1F2937;   /* ヘッダーの1列目もチャコールのまま */
  z-index: 2;
}

/* おすすめ行のハイライト（イメージカラー #FCCA00 の淡色＋左アクセントバー） */
.tbl-compare tr.is-best td {
  background: #FFF6D6 !important;
  font-weight: 700;
}
.tbl-compare tr.is-best td:first-child {
  box-shadow: inset 4px 0 0 #FCCA00;   /* 左に黄色のアクセント */
}

/* セル内の ○ × を色分け（任意：◎○を緑、×を赤に見せたいとき手動で使う） */
.tbl-compare .ok { color: #059669; font-weight: 700; }  /* span class="ok" */
.tbl-compare .ng { color: #DC2626; font-weight: 700; }  /* span class="ng" */

/* スマホで文字が詰まりすぎないよう微調整 */
@media (max-width: 600px) {
  .tbl-compare th,
  .tbl-compare td { padding: 9px 10px; font-size: 14px; }
}