/* 1) ここを変えるだけで記事全体の色が変わります */
:root {
  --main: #1e88e5;

  /* color-mixが使えない環境なら下の4行は消して固定値でOK */
  --main-900: color-mix(in oklab, var(--main) 92%, black);
  --main-700: color-mix(in oklab, var(--main) 80%, black);
  --main-300: color-mix(in oklab, var(--main) 30%, white);
  --main-100: color-mix(in oklab, var(--main) 12%, white);
  --main-50: color-mix(in oklab, var(--main) 8%, white);
  --main-30: color-mix(in oklab, var(--main) 3%, white);
}

/* ▼ “負けない”ように具体性を上げたセレクタ（html body ～） */

/* 見出しの左線 */
html body .entry-content :is(h2) {
  position: relative;
  padding-left: .9em;
  background-color:var(--main) !important;
margin-top:3.2em !important;
}

.h2modoki::before, h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no)::before,
.h2modoki::before, h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no)::after{
border-top:10px solid var(--main) !important;
}

html body .entry-content :is(h3) {
color:var(--main) !important;
background-color:var(--main-100) !important;
border-top: 1px solid var(--main) !important;
border-bottom: 1px solid var(--main) !important;
}

html body .wp-block-table table thead th{
background-color:var(--main);
font-weight:bold;
}
table thead tr{
background-color:initial;
}

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th, #wp-calendar:not(.has-background) thead tr th, table thead tr th, table thead tr:first-child th{
color:var(--main);
}

/* 本文リンク */
html body .entry-content a {
  color: var(--main) !important;
  text-decoration-color: var(--main-300) !important;
  text-underline-offset: .2em;
}
html body .entry-content a:hover,
html body .entry-content a:focus {
  color: var(--main-700) !important;
  text-decoration-color: var(--main-700) !important;
}

/* WPボタン */
html body .wp-block-button .wp-block-button__link {
  background: var(--main) !important;
  border: 1px solid var(--main-700) !important;
}
html body .wp-block-button .wp-block-button__link:hover {
  background: var(--main-700) !important;
}

/* テーブル境界線・ヘッダー */
html body .wp-block-table table,
html body .wp-block-table th,
html body .wp-block-table td {
  border-color: var(--main-300) !important;
}
html body .wp-block-table thead th {
  background: var(--main-100) !important;
}

/* 引用の左線 */
html body .entry-content blockquote {
  border-left-color: var(--main) !important;
}

/* リストのカスタムマーカー */
html body .entry-content ul {
  list-style: none;
  padding-left: 1.2em;
}
html body .entry-content ul > li {
  position: relative;
}

/* 区切り線 */
html body .entry-content hr {
  border-color: var(--main-300) !important;
}

#footer-wrapper{
background-color:var(--main) !important;
}

/* センター寄せ */
.center, .center a{
  text-align: center !important;
  display: flex;
  justify-content: center;
}

/* フォント関係 */
.small{
  font-size: 12px !important;
}
.strong{
  font-weight: bold;
  font-size:1.2;
}
.red{
  font-weight: bold;
  color: #cc0000;
}
.green{
  font-weight: bold;
  color:#22c55e;
}

/* レスポンシブ対応 */
/* Start of Selection */
.sp-only{
  display: none;
}

@media (max-width: 767px) {
  .sp-only{
    display: block;
  }
}

@media (max-width: 390px) {
  .sp-s-only--none{
    display: none;
  }
}
.sp-s-only--none{
  display: inline-block !important;
}

/* End of Selection */

/*****************************/
/* スクロールテーブル table-v2 */
/*****************************/

/* 横スクロール用の枠 */
.table-v2 {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}



/* テーブル本体 */
.table-v2 table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 920px; /* 調整用 */
}

/* セル共通 */
.table-v2 th,
.table-v2 td {
  padding: .6em .3em;
  border: 1px solid #e5e7eb;
  background: #fff;
  vertical-align: middle;

}

/* 1行目（ヘッダー行）を上に固定 */
.table-v2 thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc; /* 背景色 */
  font-size:16px !important;
  white-space: nowrap;
  color: var(--main) !important;
}

.table-v2 td.mark {
  text-align: center !important;
}
.table-v2 td {
  text-align: left !important;
  white-space: normal !important;
}

/* 1列目を左に固定 */
.table-v2 th:first-child,
.table-v2 td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}

.table-v2 td:first-child {
background-color:var(--main-30);
text-align: center !important;
}

/* 交点（左上セル）は最前面に */
.table-v2 thead th:first-child {
  z-index: 4;
}
/* 比較表 */
.table-v2 thead th.rank1{
  background-color: var(--main) !important;
  color: #fff !important;
}

/*****************************/
/* 見出しありテーブル table-v3 */
/*****************************/

/* 横スクロール用の枠 */
.table-v3 {
  display: block;

}



/* テーブル本体 */
.table-v3 table {
  border-collapse: separate;
  border-spacing: 0;
  width:100%;
}

/* セル共通 */
.table-v3 th,
.table-v3 td {
  padding: .9em .3em;
  border: 1px solid #e5e7eb;
  background: #fff;
  vertical-align: middle;
}
.va-top{
  vertical-align: top !important;
}
/*見出し行*/
.table-v3 .title-td{
  text-align: center !important;
  background-color: #f7f7f7 !important;
  font-weight: bold !important;
}
/* 1行目（ヘッダー行）を上に固定 */
.table-v3 thead th {
  background: #f8fafc; /* 背景色 */
  font-size:14px !important;
  color: var(--main) !important;
}

.table-v3 td.mark {
  text-align: center !important;
}
.table-v3 td {
  text-align: left !important;
  white-space: normal !important;
}

/* 1列目を左に固定 */
.table-v3 th:first-child,
.table-v3 td:first-child {
}

.table-v3 td:first-child {

}

/* 交点（左上セル）は最前面に */
.table-v3 thead th:first-child {
  z-index: 4;
}
/* 比較表 */
.table-v3 thead th.rank1{
  background-color: var(--main) !important;
  color: #fff !important;
}

/* CTAボタン */
@media (max-width: 767px) {
  .table-v3 .st-mybtn a{
    padding:.8em .6em !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    font-size:12px !important;
  }
}

/* 評価記号のスタイル */
.mark {
  padding:.9em .5em !important;
}

.mark-excellent {
  color: #22c55e; /* 緑色 - 優秀 */
  font-size: 32px !important;
  text-align: center !important;
  font-weight: bold;
  display: inline-block;
}

.mark-good {
  color: #3b82f6; /* 青色 - 良好 */
  font-size: 32px !important;
  text-align: center !important;
  font-weight: bold;
  display: inline-block;
}

.mark-fair {
  color: #aa0000; /* オレンジ色 - 普通 */
  font-size: 32px !important;
  text-align: center !important;
  font-weight: bold;
  display: inline-block;
}
.mark-text{
  font-size: 12px !important;
  color: #666 !important;
  line-height: 100% !important;
}

/* 長文の折り返し表示 */
.table-v3 td {
  white-space: normal;
  word-wrap: break-word;
  max-width: 200px;
}

/* 吹き出し関連 */
.st-kaiwa-area, .st-kaiwa-area2{
  padding-top: 0 !important;
}

.st-kaiwa-hukidashi-content p{
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.st-kaiwa-hukidashi{
  padding:14px !important;
}

/* ボックス */
.main-box{
  border-color:var(--main) !important;
  background-color: var(--main-30) !important;
  border-radius: 8px !important;
}
.main-box .st-mybox-title-text,
.main-box i{
  color: var(--main) !important;
}
.main-box ol li::before{
  background-color: var(--main) !important;
}

/* 比較表 */
.table-v3 thead th.rank1{
  background-color: var(--main) !important;
  color: #fff !important;
}
html body .cta-cell{
  padding-top:2em !important;
  padding-bottom: 2em !important;
}
html body .cta-cell a, html body .cta a{
  color:#fff !important;
}
td.rank1{
  background-color: #fffef0;
}
.cta-text{
  text-align: center;
}
html body .cta-text a{
  color: var(--main) !important;
}

/* タブ切り替え */
.st-tabs__tab-text{
  font-size:12px !important;
  line-height: 110% !important;
}
.st-tabs.is-style-default .st-tabs__tab-list{
  padding-left: 0;
}

/* アコーディオン */
.st-btn-open{
  background-color: var(--main-100);
}
.st-slidebox-btn-text{
  font-weight: bold;
}
.st-tabs__tab-list-item.is-selected{
  background-color: var(--main-300) !important;
}

/* フッター */
#st-text-logo a{
  pointer-events: none;
  cursor: default;
}