/*
Theme Name: Cocoon Child
Template: cocoon
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@700&display=swap');

/* ============================================================
   カラー変数
   ============================================================ */
:root {
  --main:        #1D9E75;
  --main-dark:   #0F6E56;
  --main-light:  #e8f6f2;
  --navy:        #0F6E56;
  --bg:          #f0f6fc;
  --border:      #e0e0e0;
  --text:        #333333;
  --muted:       #777777;
  --white:       #ffffff;
}

/* ============================================================
   ベース
   ============================================================ */
body {
  font-family: 'Noto Sans JP', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text);
  font-size: 15px;
  line-height: 1.9;
}

a { color: var(--main); text-decoration: none; }
a:hover { color: var(--main-dark); }

/* ============================================================
   全体レイアウト
   ============================================================ */

/* コンテナを全幅に */
#container,
#wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* コンテンツは中央寄せ */
#content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 16px !important;
}

#main {
  background: transparent !important;
}

/* ============================================================
   ヘッダー（全幅・横並び）
   ============================================================ */
#header-container {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--white) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#header-container-in {
  background: var(--white) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* サイト名 */
#site-name-text a,
.site-name-text a {
  color: var(--main-dark) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

#site-catch, .site-catch {
  font-size: 11px !important;
  color: var(--muted) !important;
}

/* ============================================================
   ヒーローエリア（コンテンツ上部ウィジェット）全幅
   ============================================================ */
#content-top {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ヒーローウィジェットの枠を消す */
.widget-index-top,
#content-top .widget {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* ============================================================
   カテゴリーカードウィジェットの枠を消す
   ============================================================ */
.index-list-top .widget,
.widget-index-top {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   記事カード
   ============================================================ */
.entry-card-wrap {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: box-shadow .2s, transform .2s !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.entry-card-wrap:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.1) !important;
  transform: translateY(-2px) !important;
}

.entry-card-thumb {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #dde3ea !important;
}

.entry-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .3s !important;
}

.entry-card-wrap:hover .entry-card-thumb img {
  transform: scale(1.04) !important;
}

.entry-card-content {
  padding: 12px 14px 14px !important;
  background: var(--white) !important;
  flex: 1 !important;
}

.entry-card-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.5 !important;
  margin-bottom: 6px !important;
}

.entry-card-wrap:hover .entry-card-title {
  color: var(--main) !important;
}

.entry-card-snippet {
  font-size: 11px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
}

.entry-card-date {
  font-size: 10px !important;
  color: #aaa !important;
}

/* カテゴリーバッジ */
.cat-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  color: var(--white) !important;
  background: var(--navy) !important;
}

/* ============================================================
   ページネーション
   ============================================================ */
.pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  background: var(--white) !important;
  margin: 2px !important;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--main) !important;
  border-color: var(--main) !important;
  color: var(--white) !important;
}

/* ============================================================
   サイドバー
   ============================================================ */
#sidebar { background: transparent !important; }

.widget {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

.widgettitle, .widget-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid var(--main) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 0 6px !important;
  margin-bottom: 14px !important;
}

/* 検索 */
.search-form { display: flex !important; }
.search-form input[type="search"] {
  flex: 1 !important;
  border: 1px solid var(--border) !important;
  border-right: none !important;
  border-radius: 3px 0 0 3px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  outline: none !important;
}
.search-form input[type="submit"] {
  background: var(--main) !important;
  border: none !important;
  border-radius: 0 3px 3px 0 !important;
  color: var(--white) !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
}

/* カテゴリー・アーカイブ */
.widget_categories ul,
.widget_archive ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.widget_categories li,
.widget_archive li {
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.widget_categories li::before,
.widget_archive li::before {
  content: '▶' !important;
  font-size: 7px !important;
  color: var(--main) !important;
  flex-shrink: 0 !important;
}

.widget_categories a,
.widget_archive a { color: var(--text) !important; }

/* 新着・人気記事 */
.new-entry-card-wrap,
.popular-entry-card-wrap {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  align-items: flex-start !important;
}

.new-entry-card-thumb,
.popular-entry-card-thumb {
  flex-shrink: 0 !important;
  width: 72px !important;
  height: 48px !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: #dde3ea !important;
}

.new-entry-card-thumb img,
.popular-entry-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.new-entry-card-title,
.popular-entry-card-title {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* ============================================================
   記事ページ：タイトル・見出し・本文
   ============================================================ */
.entry-title, .article-title {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.6 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  padding: 0 0 16px !important;
  margin-bottom: 24px !important;
}

.entry-content h2, .article-body h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  background: var(--navy) !important;
  padding: 12px 18px 12px 20px !important;
  border-radius: 4px !important;
  border-left: 5px solid var(--main) !important;
  border-bottom: none !important;
  margin: 40px 0 20px !important;
  line-height: 1.4 !important;
}

.entry-content h3, .article-body h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--main) !important;
  background: var(--main-light) !important;
  border-left: 4px solid var(--main) !important;
  border-bottom: none !important;
  padding: 8px 14px !important;
  border-radius: 0 4px 4px 0 !important;
  margin: 32px 0 16px !important;
}

.entry-content h4, .article-body h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--main) !important;
  border-bottom: 2px solid var(--main) !important;
  padding: 0 0 6px !important;
  margin: 24px 0 12px !important;
  background: transparent !important;
}

.entry-content, .article-body {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: var(--text) !important;
}

.entry-content img, .article-body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px !important;
  display: block !important;
  margin: 20px auto !important;
}

.entry-content blockquote, .article-body blockquote {
  border-left: 4px solid var(--main) !important;
  background: var(--bg) !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  border-radius: 0 6px 6px 0 !important;
  font-style: normal !important;
}

.entry-content table, .article-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 24px 0 !important;
  font-size: 14px !important;
}

.entry-content th, .article-body th {
  background: var(--navy) !important;
  color: var(--white) !important;
  padding: 10px 14px !important;
}

.entry-content td, .article-body td {
  padding: 10px 14px !important;
  border: 1px solid var(--border) !important;
}

.entry-content tr:nth-child(even) td,
.article-body tr:nth-child(even) td {
  background: var(--bg) !important;
}

/* 目次 */
#toc {
  background: var(--main-light) !important;
  border: 1px solid var(--main) !important;
  border-radius: 6px !important;
  padding: 20px 24px !important;
  margin-bottom: 32px !important;
}
.toc-title { color: var(--main-dark) !important; font-weight: 700 !important; }
.toc-list a { color: var(--main-dark) !important; }

/* 前後記事ナビ */
.post-navi-link {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.post-navi-link:hover {
  border-color: var(--main) !important;
  color: var(--main) !important;
}

/* 関連記事 */
.related-entry-card-wrap {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: var(--white) !important;
}
.related-entry-card-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

/* ============================================================
   フッター
   ============================================================ */
#footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}
#footer a { color: var(--muted) !important; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 834px) {
  .entry-title, .article-title { font-size: 20px !important; }
  .entry-content h2, .article-body h2 { font-size: 17px !important; }
  .entry-content h3, .article-body h3 { font-size: 15px !important; }
  #content-top {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .ect-vertical-card.ect-3-columns,
  #list.ect-vertical-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .entry-title, .article-title { font-size: 18px !important; }
}

/* ============================================================
   記事カードグリッド（3カラム）
   ============================================================ */
.ect-vertical-card {
  width: 100% !important;
}

.ect-vertical-card.ect-3-columns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

.ect-vertical-card > .entry-card-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   カテゴリーカード・ヒーローの枠を消す
   ============================================================ */
.widget-index-top,
.index-list-top .widget,
#content-top .widget {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* プロフィールウィジェットの内枠・ボタンを非表示 */
.prof-icon-wrap,
.author-box-footer,
.author-follow-buttons,
.author-sns-buttons {
  display: none !important;
}

.author-box {
  border: none !important;
  box-shadow: none !important;
}

/* サイドバーの上部余白をなくす */
#sidebar {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#sidebar .widget:first-child {
  margin-top: 0 !important;
}

/* サイドバーの上部余白をメインカラムに合わせる */
#sidebar {
  padding-top: 5px !important;
}

#main {
  padding: 5px 12px !important;
}

/* サイドバー新着・人気記事 */
.new-entry-card,
.popular-entry-card {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.new-entry-card-thumb,
.popular-entry-card-thumb {
  flex-shrink: 0 !important;
  width: 72px !important;
  height: 48px !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.new-entry-card-thumb img,
.popular-entry-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.new-entry-card-title,
.popular-entry-card-title {
  flex: 1 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.widget-entry-card-content {
  margin-left: 0 !important;
}

/* コメント欄を非表示 */
#comments,
.comment-area,
.comments-area {
  display: none !important;
}

/* ============================================================
   テーブル：比較表
   ============================================================ */
.table-compare {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.table-compare th {
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.table-compare th:first-child {
  background: var(--main-dark);
  text-align: left;
}

.table-compare th.recommend {
  background: var(--main);
  position: relative;
}

.table-compare th.recommend::after {
  content: 'おすすめ';
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #c8eedd;
  margin-top: 2px;
}

.table-compare td {
  padding: 11px 16px;
  border-bottom: 1px solid #e8f0f8;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
}

.table-compare td:first-child {
  font-weight: 700;
  color: var(--navy);
  background: #f5f9ff;
  text-align: left;
}

.table-compare tr:last-child td { border-bottom: none; }
.table-compare tr:hover td { background: var(--bg); }
.table-compare tr:hover td:first-child { background: #e8f2ff; }
.badge-good { background: #e0f5ef; color: var(--main-dark); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.badge-bad  { background: #fef0ee; color: #c06050; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }

/* ============================================================
   テーブル：リスト型
   ============================================================ */
.table-list {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.table-list thead th {
  background: var(--main);
  color: #fff;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.table-list thead th:last-child { text-align: center; }

.table-list td {
  padding: 11px 16px;
  border-bottom: 1px solid #e8f0f8;
  font-size: 13px;
  vertical-align: middle;
}

.table-list tr:last-child td { border-bottom: none; }
.table-list tr:nth-child(even) td { background: #f8fbff; }
.table-list tr:hover td { background: var(--bg); }

.rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  padding: 0 6px;
}

.rank-1 { background: #c8a000; }
.rank-2 { background: #999; }
.rank-3 { background: #c07050; }

/* テーブルレスポンシブ */
@media (max-width: 600px) {
  .table-compare, .table-list { font-size: 12px; }
  .table-compare th, .table-compare td,
  .table-list thead th, .table-list td { padding: 8px 10px; }
}

.okcheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.okcheck::before {
  content: '✓';
  line-height: 1;
}

.ngcross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e05050;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.ngcross::before {
  content: '✕';
  line-height: 1;
}

/* ============================================================
   ボックス類・CSS
   ============================================================ */

/* simple-box1：左ボーダー */
.simple-box1 {
  border-left: 4px solid var(--main);
  background: var(--main-light);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.8;
}

/* simple-box2：枠線 */
.simple-box2 {
  border: 1.5px solid #b8ddd4;
  background: #f4faf8;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.8;
}

/* ============================================================
   コンセプトボックス（共通）
   ============================================================ */
.concept-box1,
.concept-box2,
.concept-box3,
.concept-box4,
.concept-box5,
.concept-box6 {
  position: relative;
  border-radius: 10px;
  padding: 22px 18px 16px;
  margin: 28px 0 20px;
  font-size: 14px;
  line-height: 1.8;
}

.concept-box1::before,
.concept-box2::before,
.concept-box3::before,
.concept-box4::before,
.concept-box5::before,
.concept-box6::before {
  position: absolute;
  top: -12px;
  left: 16px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 20px;
  letter-spacing: .04em;
  color: #fff;
}

/* concept-box1：ポイント（ティール） */
.concept-box1 {
  border: 1.5px solid #9FE1CB;
  background: #f2fbf8;
}
.concept-box1::before {
  content: '✔  ポイント';
  background: var(--main);
}

/* concept-box2：注意（アンバー） */
.concept-box2 {
  border: 1.5px solid #f5c88a;
  background: #fffbf4;
}
.concept-box2::before {
  content: '⚠  注意';
  background: #d4900a;
}

/* concept-box3：良い例（ブルー） */
.concept-box3 {
  border: 1.5px solid #a8c8f0;
  background: #f4f8ff;
}
.concept-box3::before {
  content: '○  良い例';
  background: #3a7abf;
}

/* concept-box4：悪い例（ローズ） */
.concept-box4 {
  border: 1.5px solid #f0a8b4;
  background: #fff6f7;
}
.concept-box4::before {
  content: '✕  悪い例';
  background: #c04050;
}

/* concept-box5：まとめ（ティール濃いめ） */
.concept-box5 {
  border: 1.5px solid #5DCAA5;
  background: #edf9f5;
}
.concept-box5::before {
  content: '📋  まとめ';
  background: var(--main-dark);
}

/* concept-box6：体験談（パープル） */
.concept-box6 {
  border: 1.5px solid #c4aee8;
  background: #faf6ff;
}
.concept-box6::before {
  content: '💬  体験談';
  background: #7a50c0;
}

/* ============================================================
   テキストマーカー・カラーテキスト
   ============================================================ */
.marker {
  background: linear-gradient(transparent 55%, #ffe566 55%);
  padding: 0 2px;
  font-weight: 700;
}

.marker-green {
  background: linear-gradient(transparent 55%, #a8ecd4 55%);
  padding: 0 2px;
  font-weight: 700;
}

.marker-pink {
  background: linear-gradient(transparent 55%, #ffc0cb 55%);
  padding: 0 2px;
  font-weight: 700;
}

.c-main  { color: var(--main);      font-weight: 700; }
.c-teal  { color: var(--main-dark); font-weight: 700; }
.c-red   { color: #c04050;          font-weight: 700; }

/* ============================================================
   テーブル：比較表
   ============================================================ */
.table-compare {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.table-compare th {
  background: var(--main);
  color: #fff;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.table-compare th:first-child {
  background: var(--main-dark);
  text-align: left;
}

.table-compare th.recommend {
  background: var(--main-dark);
  position: relative;
}

.table-compare th.recommend::after {
  content: 'おすすめ';
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #c8eedd;
  margin-top: 2px;
}

.table-compare td {
  padding: 11px 16px;
  border-bottom: 1px solid #e8f0f8;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
}

.table-compare td:first-child {
  font-weight: 700;
  color: var(--main-dark);
  background: #f5faf8;
  text-align: left;
}

.table-compare tr:last-child td { border-bottom: none; }
.table-compare tr:hover td { background: var(--main-light); }
.table-compare tr:hover td:first-child { background: #ddf2ea; }

/* ✓ / ✗ */
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.check::before { content: '✓'; line-height: 1; }

.ng-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e05050;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.ng-mark::before { content: '✕'; line-height: 1; }

.badge-good {
  background: var(--main-light);
  color: var(--main-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.badge-bad {
  background: #fef0ee;
  color: #c06050;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

/* ============================================================
   テーブル：リスト型
   ============================================================ */
.table-list {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.table-list thead th {
  background: var(--main);
  color: #fff;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.table-list thead th:last-child { text-align: center; }

.table-list td {
  padding: 11px 16px;
  border-bottom: 1px solid #e8f0f8;
  font-size: 13px;
  vertical-align: middle;
}

.table-list tr:last-child td { border-bottom: none; }
.table-list tr:nth-child(even) td { background: #f5faf8; }
.table-list tr:hover td { background: var(--main-light); }

.rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--main);
  padding: 0 6px;
}

.rank-1 { background: #c8a000; }
.rank-2 { background: #999; }
.rank-3 { background: #c07050; }
.point  { font-size: 11px; color: var(--main); font-weight: 700; }

/* テーブルレスポンシブ */
@media (max-width: 600px) {
  .table-compare, .table-list { font-size: 12px; }
  .table-compare th, .table-compare td,
  .table-list thead th, .table-list td { padding: 8px 10px; }
}