@media only screen and (min-width: 767px){
#toc_container{
border-top: solid 8px 
#6bb6ff;
background:#f9f9f9 !important;
}
p.toc_title {
font-size:24px;
color:#6bb6ff;
position:relative;
left:-39% !important;
top:10px;
}
ul.toc_list li a {
font-size:16px;
font-weight:bold;
color:#777;
}
ul.toc_list li a:hover{
color:#f05689;
text-decoration:none;
}

.toc_list ul li a {
font-size:16px;
font-weight:normal;
color:#888;
}
.toc_list ul li a:hover {
color:#f05689;
text-decoration:none;
}
span.toc_toggle{
font-size: 14px !important;
}
span.toc_toggle a{
font-size: 14px;
color:#6bb6ff;
}
#toc_container .toc_title::before {
display: inline-block;
color: #fff;
font-family: FontAwesome;
font-size: 20px;
line-height: 50px;
content: "\f0ca";
}
#toc_container .toc_title:before {
display:inline-block; width: 50px;
height: 50px;
border-radius: 50%;
background:#6bb6ff;
margin-right:8px;
}
#toc_container li a{
border-top-width:0px;
line-height:30px;
}
}
@media only screen and (max-width: 766px){

#toc_container{
border-top: solid 8px 
#6bb6ff;
background:#f9f9f9 !important;
}

#toc_container .toc_title:before{
content: "\f0f6";
font-family: FontAwesome;
display: inline-block;
margin-right:5px;
width: 1.2em;
color:#6bb6ff;
}

p.toc_title {
text-align: center;
font-size:17px;
color:#6bb6ff;
}

ul.toc_list li a {
font-size:16px;
font-weight:bold;
line-height: 2em;
color:#777;
text-decoration:none;
}
ul.toc_list li a:hover{
color:#6bb6ff;
}

.toc_list ul li a {
font-size:14px;
font-weight:normal;
color:#888;
text-decoration:none;
}
}
#sitemap_list li:before{
width: 0;
height: 0;
}
@media only screen and (max-width: 480px) {
.tscroll table{
 width:100%;
 margin-bottom: .5em;
}
.tscroll{
 overflow: auto;
 margin-bottom: 2em;
}
.tscroll::-webkit-scrollbar{
 height: 5px;
}
.tscroll::-webkit-scrollbar-track{
 background: #F1F1F1;
}
.tscroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}
}
/*テーブルの横スクロールのためのCSSはここから*/
 table{ 
    width:100%;
}
.scroll{
    overflow: auto;
    white-space:nowrap;
}
.scroll::-webkit-scrollbar{
    height: 15px;
}
.scroll::-webkit-scrollbar-track{
    background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
    background: #bbb;
}
 /*テーブルの横スクロールのためのCSSはここまで
  * .entry-content .table-scroll { border:1px dashed red !important; }
  * .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  width: 100%;
  border: 1px dashed red; /* ←確認用の線。動いたら消してOK */
}

.table-scroll > table {
  width: max-content;
  min-width: 800px; /* 表の列数に合わせて600〜1000に調整 */
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
  white-space: nowrap;
}
/* ▼最終手段：スマホ時は全テーブルを横スクロール化する */
@media (max-width: 799px) {
  /* テーブルそのものをスクロール可能なブロックに */
  table,
  .wp-block-table table {
    display: block !important;
    width: max-content !important;     /* 内容幅ぶんだけ横に広がる */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
  /* 親側が overflow:hidden だとスクロールが潰れるので保険 */
  .entry-content,
  .post,
  .article,
  .content,
  .wp-block-table {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
}
/* 楽天ボタン（少しワイン寄りの赤） */
.kaerebalink-box .shoplinkrakuten a,
.cstmreba .shoplinkrakuten a {
  background: #d46a6a !important; /* 落ち着いた赤 */
  color: #fff !important;
  border-radius: 4px;
  padding: 6px 12px;
  text-decoration: none;
}

/* Amazonボタン（やわらかいゴールド寄りオレンジ） */
.kaerebalink-box .shoplinkamazon a,
.cstmreba .shoplinkamazon a {
  background: #e6a74d !important; /* ゴールド感あるオレンジ */
  color: #fff !important;
  border-radius: 4px;
  padding: 6px 12px;
  text-decoration: none;
}

/* Yahooボタン（落ち着いたブルーグレー） */
.kaerebalink-box .shoplinkyahoo a,
.cstmreba .shoplinkyahoo a {
  background: #5b8dbd !important; /* 落ち着きある青 */
  color: #fff !important;
  border-radius: 4px;
  padding: 6px 12px;
  text-decoration: none;
}
/* Yahoo! ボタン */
.kaerebalink-box .shoplinkyahoo a,
.cstmreba .shoplinkyahoo a {
  position: relative;
  background: #5b8dbd !important; /* 落ち着いたブルー */
  color: #fff !important;
  border-radius: 6px;
  padding: 10px 16px !important;
  display: inline-block;
  font-size: 0 !important;         /* 元テキスト非表示 */
  line-height: 1.4 !important;
  min-width: 120px;                /* Amazon・楽天と同じ幅に固定 */
  text-align: center;
  box-sizing: border-box;
}

/* 擬似要素で「Yahoo!」だけ表示 */
.kaerebalink-box .shoplinkyahoo a::after,
.cstmreba .shoplinkyahoo a::after {
  content: "Yahoo!";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
/* 3つのボタン幅を統一 */
.kaerebalink-box .shoplinkrakuten a,
.kaerebalink-box .shoplinkamazon a,
.kaerebalink-box .shoplinkyahoo a,
.cstmreba .shoplinkrakuten a,
.cstmreba .shoplinkamazon a,
.cstmreba .shoplinkyahoo a {
  min-width: 120px;   /* ここで全てのボタンの幅を揃える */
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
}
/* ───────── 3ボタン共通のサイズを統一 ───────── */
.kaerebalink-box .shoplinkrakuten a,
.kaerebalink-box .shoplinkamazon a,
.kaerebalink-box .shoplinkyahoo a,
.cstmreba .shoplinkrakuten a,
.cstmreba .shoplinkamazon a,
.cstmreba .shoplinkyahoo a {
  display: inline-flex;            /* 縦横中央揃え用 */
  align-items: center;
  justify-content: center;
  min-width: 120px;                /* 幅を統一（好みで 130〜140 に調整可） */
  min-height: 40px;                /* ★ 高さを統一：足りなければ 44〜48 に上げる */
  padding: 8px 16px;               /* 余白は控えめに */
  box-sizing: border-box;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
}

/* ───────── Yahoo! だけ「Yahoo!」に置き換え ───────── */
.kaerebalink-box .shoplinkyahoo a,
.cstmreba .shoplinkyahoo a {
  font-size: 0 !important;         /* 元の長い文言を不可視に */
  line-height: 1 !important;
}

.kaerebalink-box .shoplinkyahoo a::after,
.cstmreba .shoplinkyahoo a::after {
  content: "Yahoo!";
  font-size: 14px;                 /* 実際に見せる文字サイズ */
  font-weight: 700;
  color: #fff;
  /* inline-flexの中央揃えが効くように position は使わない */
}
/* STORKの表をスマホで詰める */
.entry-content table,
.post table {
  width: 100% !important;
  min-width: 0 !important;      /* ← これで無駄な横の余白を消す */
  table-layout: auto !important;
  border-collapse: collapse;
  display: table !important;     /* もし display:block が当たっていたら打ち消す */
}

.entry-content th,
.entry-content td {
  width: auto !important;        /* 固定幅を解除 */
  padding: 8px;
  white-space: nowrap;           /* 折り返さずに横スクロールで見せる */
}

/* ラッパーがある場合の横スクロール */
.entry-content .table-wrap,
.entry-content .scrollable,
.entry-content .table-scroll,
.entry-content table::-webkit-scrollbar { /* スクロールバー関連は任意 */
  -webkit-overflow-scrolling: touch;
}
.entry-content .table-wrap,
.entry-content .scrollable,
.entry-content .table-scroll {
  overflow-x: auto;
}

/* モバイルだけ少し詰める */
@media (max-width: 600px) {
  .entry-content th,
  .entry-content td {
    padding: 6px;
    font-size: 14px;
  }
  .entry-content table {
    min-width: 0 !important;     /* 念のため再指定 */
  }
}
/* 表がPCでも横スクロールできるようにする */
.table-scroll {
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}