/* アクセシビリティ用 */
.visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;border:0!important;
}

/* タブコンテナ */
.tab-container{position:relative;display:flex;align-items:center;width:100%;margin-bottom:10px;}
.scroll-btn{
  background:#f4f4f4;border:1px solid #ccc;border-radius:50%;
  width:32px;height:32px;display:flex;justify-content:center;align-items:center;
  cursor:pointer;transition:background .3s;flex-shrink:0;
}
.scroll-btn:hover{background:#ddd;}
.scroll-btn.hidden{display:none;}
.scroll-btn.left{margin-right:5px;}
.scroll-btn.right{margin-left:5px;}

.tab-buttons{
  display:flex;gap:10px;overflow-x:auto;white-space:nowrap;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1;
}
.tab-buttons::-webkit-scrollbar{display:none;}
.tab-buttons .tab-btn{
  padding:10px 20px;
  border:1px solid #1258a6;
  background:#e6f0fa;
  color:#000;
  cursor:pointer;
  font-size:14px;
  border-radius:5px;
  transition:background .3s;
  flex-shrink:0;
  font-weight:600;
}
.tab-buttons .tab-btn:hover{
  background:#d0e4f7;
}
.tab-buttons .tab-btn[aria-selected="true"],
.tab-buttons .tab-btn.active{
  background:#1258a6;
  color:#fff;
}

/* チャート領域 */
.chart-wrapper{display:none;}
.chart-wrapper.active{display:block;}
.chart-wrapper iframe{width:100%;height:70vh;min-height:300px;max-height:900px;border:none;}
.chart-description{font-size:14px;color:#000;margin:10px 0;line-height:1.6;}

/* =========================================
   タブ下の余白・チャート内の余白
   ========================================= */

/* タブ〜チャート全体の余白を最小化 */
.tab-container,
.tab-buttons {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* タブ直下のチャート領域 */
.chart-wrapper {
  margin-top: 0.8em !important; /* ← タブと見出しの距離 */
  padding-top: 0 !important;
  gap: 0 !important;
}

/* 見出し（タイトル） */
.chart-wrapper h3 {
  margin-top: 0 !important;
  margin-bottom: 0.8em !important; /* ← 見出しと説明の距離 */
}

/* 説明文 */
.chart-wrapper .chart-description {
  margin-top: 0 !important;
  margin-bottom: 1em !important; /* ← 説明とチャートの距離 */
}

/* チャート本体 */
.chart-wrapper iframe,
.chart-wrapper img {
  margin-top: 0 !important;
  margin-bottom: 0.8em !important; /* ← チャート下の余白 */
  display: block;
}