/*
Theme Name: OnePress Child
Theme URI: https://www.famethemes.com/themes/onepress/
Template: onepress
Author: FameThemes
Author URI: http://www.famethemes.com
Description: OnePress is an outstanding creative and flexible WordPress one page theme well suited for business website, portfolio, digital agency, product showcase, freelancers and everyone else who appreciate good design. The theme overall is an elegant and classic one, a fine example of Bootstrap 4 WordPress theme which compatibility with latest version of WooCommerce. (Live preview : https://demos.famethemes.com/onepress)
Tags: one-column,two-columns,left-sidebar,right-sidebar,custom-menu,featured-images,full-width-template,sticky-post,theme-options,threaded-comments,translation-ready,e-commerce,blog,portfolio
Version: 2.2.8.1639094988
Updated: 2021-12-10 09:09:48

*/

/* 電気料金比較テーブル */
.energy-rate-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 24px 0;
}

.energy-rate-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  background: #fff;
  border: 2px solid #207a3a;
}

.energy-rate-table th,
.energy-rate-table td {
  border: 1px solid #d7e7dc;
  padding: 9px 12px;
  vertical-align: middle;
}

.energy-rate-table thead th {
  background: linear-gradient(180deg, #eaf6ee 0%, #d9efdf 100%);
  color: #207a3a;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid #207a3a;
}

.energy-rate-table tbody th {
  background: #f6fbf7;
  color: #207a3a;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.energy-rate-table td.category-item {
  background: #fff;
  font-weight: 500;
}

.energy-rate-table td.unit {
  text-align: center;
  white-space: nowrap;
  color: #555;
}

.energy-rate-table td.price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
font-size: 1.3em;
}

.energy-rate-table td.note {
  text-align: center;
  color: #444;
}

.energy-rate-table tbody tr:nth-child(even) td {
  background: #fffaf0;
}

.energy-rate-table tbody tr:hover td,
.energy-rate-table tbody tr:hover th {
  background: #fff3f5;
}

.energy-rate-table .section-row th,
.energy-rate-table .section-row td {
  border-top: 2px solid #207a3a;
}

.energy-rate-table .accent-text {
  color: #e9667d;
  font-weight: 700;
}

/* のおがたエナジー列 */
.energy-rate-table .nogata-col {
  background: #eef8f1;
  border-left: 2px solid #207a3a;
  border-right: 2px solid #207a3a;
}

/* のおがたエナジー列のヘッダー */
.energy-rate-table thead .nogata-col {
  background: linear-gradient(180deg, #dff2e6 0%, #ccebd6 100%);
  color: #207a3a;
  font-weight: 700;
}

/* のおがたエナジー列の金額 */
.energy-rate-table td.nogata-col.price {
  color: #207a3a;
  font-weight: 700;
}

/* のおがたエナジー列で割安を強調する金額 */
.energy-rate-table td.nogata-col.accent-text {
  color: #e9667d;
  font-weight: 700;
}

/* 偶数行でも、のおがたエナジー列の背景を維持 */
.energy-rate-table tbody tr:nth-child(even) td.nogata-col {
  background: #f4fbf6;
}

/* ホバー時：のおがたエナジー列 */
.energy-rate-table tbody tr:hover td.nogata-col {
  background: #e3f5e8;
}

/* ホバー時：通常セル */
.energy-rate-table tbody tr:hover td:not(.nogata-col),
.energy-rate-table tbody tr:hover th {
  background: #fff3f5;
}

@media screen and (max-width: 768px) {
  .energy-rate-table {
    font-size: 14px;
    min-width: 720px;
  }

  .energy-rate-table th,
  .energy-rate-table td {
    padding: 8px 10px;
  }
}

/* 目次全体 */
.toc-box {
  max-width: 920px;
  margin: 24px auto;
  padding: 22px 26px;
  background: #f8fbf8;
  border: 1px solid #d9e8d9;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* 目次タイトル */
.toc-box .toc-title {
  margin: 0 0 18px;
  padding-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
  color: #1f1f1f;
  text-align: center;
  border-bottom: 2px solid #2f8f46;
}

/* リスト初期化 */
.toc-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 各項目 */
.toc-box li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* カテゴリ見出し */
.toc-box .toc-section {
  display: block;
  width: 100%;
  clear: both;
  margin: 24px 0 12px;
  padding: 10px 14px;
  font-weight: 700;
  color: #1f1f1f;
  background: #e8f3e8;
  border-left: 5px solid #2f8f46;
  border-radius: 6px;
  font-size: 15px;
}

/* 最初のカテゴリだけ上余白を消す */
.toc-box .toc-section:first-child {
  margin-top: 0;
}

/* リンク項目：PC・スマホ共通で2列表示 */
.toc-box li:not(.toc-section) {
  display: inline-block;
  width: calc(50% - 5px);
  vertical-align: top;
}

/* リンク */
.toc-box a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 6px 8px 0;
  padding: 11px 12px 11px 32px;
  color: #24763a;
  background: #ffffff;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid #e0ece0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* 左の小アイコン */
.toc-box a::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: #2f8f46;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* ホバー時 */
.toc-box a:hover {
  color: #ffffff;
  background: #2f8f46;
  border-color: #2f8f46;
  padding-left: 36px;
}

/* ホバー時の小アイコン */
.toc-box a:hover::before {
  background: #ffffff;
}

/* ページ内リンクのズレ対策 */
html {
  scroll-behavior: smooth;
}

/* 固定ヘッダー分だけジャンプ位置を下げる */
[id^="mokuji"] {
  scroll-margin-top: 120px;
}

/* スマホ対応：スマホでも2列表示 */
@media screen and (max-width: 700px) {
  .toc-box {
    margin: 20px auto;
    padding: 16px 12px;
    border-radius: 10px;
  }

  .toc-box .toc-title {
    margin-bottom: 14px;
    padding-bottom: 10px;
    font-size: 20px;
  }

  .toc-box .toc-section {
    margin: 20px 0 10px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .toc-box li:not(.toc-section) {
    display: inline-block;
    width: calc(50% - 5px);
    vertical-align: top;
  }

  .toc-box a {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0 4px 8px 0;
    padding: 9px 8px 9px 24px;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 7px;
  }

  .toc-box a::before {
    left: 10px;
    top: 50%;
    width: 5px;
    height: 5px;
    transform: translateY(-50%);
  }

  .toc-box a:hover {
    padding-left: 26px;
  }

  [id^="mokuji"] {
    scroll-margin-top: 100px;
  }
}