/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 16 2026 | 07:48:50 */
/* =========================
　グラフで見る予算ページ
========================= */
/* デフォルトタイトル削除 */
.page-id-661 .page-header{
display:none;
}

/* パンくず削除 */
.page-id-661 #breadcrumb{
display:none;
}

/* =========================
　ヒーローエリア
========================= */
/* ヒーロー全体 */
.page-id-661 .budget-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #f7f9ff;
  border-bottom: 2px solid #dce8fa;
  padding: 60px 20px;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.page-id-661 .hero-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.page-id-661 .hero-sub {
  display: inline-block;
  background: #e6f1fb;
  color: #185fa5;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 14px;
  animation: fadeDown 0.6s ease both;
}

.page-id-661 .hero-title {
  font-size: 32px;
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: 16px;
  color: #1a1a2e;
  animation: fadeDown 0.7s 0.1s ease both;
}

.page-id-661 .hero-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  animation: fadeDown 0.7s 0.2s ease both;
}

/* 円グラフ装飾 */
.page-id-661 .pie-ring {
  position: absolute;
  border-radius: 50%;
  animation: spinIn 1s ease both, slowSpin 12s linear infinite;
}

.page-id-661 .pie-ring.p2 {
  animation: spinIn 1s 0.3s ease both, slowSpinR 16s linear infinite;
}

/* 棒グラフ装飾 */
.page-id-661 .bar-wrap {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.page-id-661 .bar-wrap span {
  display: block;
  width: 12px;
  border-radius: 3px 3px 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
}

.page-id-661 .bar-wrap span:nth-child(1) { animation: growBar 0.6s 0.3s ease both, breatheBar1 4s 1s ease-in-out infinite; }
.page-id-661 .bar-wrap span:nth-child(2) { animation: growBar 0.6s 0.4s ease both, breatheBar2 4s 1.3s ease-in-out infinite; }
.page-id-661 .bar-wrap span:nth-child(3) { animation: growBar 0.6s 0.5s ease both, breatheBar3 4s 1.6s ease-in-out infinite; }
.page-id-661 .bar-wrap span:nth-child(4) { animation: growBar 0.6s 0.6s ease both, breatheBar1 4s 1.9s ease-in-out infinite; }
.page-id-661 .bar-wrap span:nth-child(5) { animation: growBar 0.6s 0.7s ease both, breatheBar2 4s 2.2s ease-in-out infinite; }

/* 折れ線グラフ装飾 */
.page-id-661 .line-svg {
  opacity: 0;
  animation: fadeIn 1s 0.8s ease both;
}

/* 浮遊する数字 */
.page-id-661 .float-num {
  position: absolute;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
}

.page-id-661 .fn1 { animation: float1 5s 0s ease-in-out infinite; }
.page-id-661 .fn2 { animation: float2 6s 1s ease-in-out infinite; }
.page-id-661 .fn3 { animation: float3 4.5s 2s ease-in-out infinite; }
.page-id-661 .fn4 { animation: float1 5.5s 0.7s ease-in-out infinite; }

/* キーフレーム */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spinIn {
  from { opacity: 0; transform: scale(0) rotate(-180deg); }
  to   { opacity: 0.45; transform: scale(1) rotate(0deg); }
}

@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes slowSpinR {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes growBar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes breatheBar1 {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.75); }
}

@keyframes breatheBar2 {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.85); }
}

@keyframes breatheBar3 {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.6); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 0.3; }
}

@keyframes float1 {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(-4deg); }
  50%       { transform: translateY(-7px) rotate(-4deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px) rotate(3deg); }
  50%       { transform: translateY(-11px) rotate(3deg); }
}

@media (max-width: 768px) {
  .page-id-661 .hero-title { font-size: 24px; }
  .page-id-661 .budget-hero { padding: 40px 16px; }
}

/* PC閲覧時に背景のグラフ4つのサイズを大きくする */
@media (min-width: 769px) {

  /* 左上の円グラフ：左上をどっしり埋める */
  .page-id-661 .budget-hero .pie-ring:first-of-type {
    width: 460px !important;
    height: 460px !important;
    top: -160px !important;
    left: -120px !important;
  }

  .page-id-661 .budget-hero .pie-ring:first-of-type > div {
    width: 240px !important;
    height: 240px !important;
  }

  /* 左下の円グラフ：左下に大きく */
  .page-id-661 .budget-hero .pie-ring.p2 {
    width: 300px !important;
    height: 300px !important;
    bottom: -80px !important;
    left: 160px !important;
  }

  .page-id-661 .budget-hero .pie-ring.p2 > div {
    width: 156px !important;
    height: 156px !important;
  }

 /* 右下の棒グラフ：さらに大きく・「56.9万円」に少し重なる位置へ */
  .page-id-661 .budget-hero .bar-wrap:first-of-type {
    right: 20px !important;
    bottom: 0px !important;
    gap: 16px !important;
    align-items: flex-end !important;
  }
  .page-id-661 .budget-hero .bar-wrap:first-of-type span { width: 70px !important; }
  .page-id-661 .budget-hero .bar-wrap:first-of-type span:nth-child(1) { height: 280px !important; }
  .page-id-661 .budget-hero .bar-wrap:first-of-type span:nth-child(2) { height: 420px !important; }
  .page-id-661 .budget-hero .bar-wrap:first-of-type span:nth-child(3) { height: 200px !important; }
  .page-id-661 .budget-hero .bar-wrap:first-of-type span:nth-child(4) { height: 350px !important; }
  .page-id-661 .budget-hero .bar-wrap:first-of-type span:nth-child(5) { height: 240px !important; }

  /* 右上の棒グラフ：さらに大きく・「2369」に少し重なる位置へ */
  .page-id-661 .budget-hero .bar-wrap:last-of-type {
    top: 0px !important;
    right: 200px !important;
    gap: 12px !important;
    align-items: flex-end !important;
  }
  .page-id-661 .budget-hero .bar-wrap:last-of-type span { width: 50px !important; }
  .page-id-661 .budget-hero .bar-wrap:last-of-type span:nth-child(1) { height: 160px !important; }
  .page-id-661 .budget-hero .bar-wrap:last-of-type span:nth-child(2) { height: 260px !important; }
  .page-id-661 .budget-hero .bar-wrap:last-of-type span:nth-child(3) { height: 120px !important; }

  /* 折れ線グラフ：左中央あたりに大きく */
  .page-id-661 .budget-hero .line-svg {
    width: 200px !important;
    height: 110px !important;
    top: auto !important;
    bottom: 60px !important;
    left: 80px !important;
  }

  /* 浮遊数字：四隅に大きく配置 */
  .page-id-661 .budget-hero .fn1 {
    font-size: 90px !important;
    right: 120px !important;
    top: 10px !important;
  }

  .page-id-661 .budget-hero .fn2 {
    font-size: 54px !important;
    bottom: 30px !important;
    left: 320px !important;
  }

  .page-id-661 .budget-hero .fn3 {
    font-size: 44px !important;
    top: 20px !important;
    left: 260px !important;
  }

  .page-id-661 .budget-hero .fn4 {
    font-size: 36px !important;
    bottom: 10px !important;
    right: 120px !important;
  }

}

/* =========================
   メインコンテンツ背景装飾
========================= */
/* ページ全体にドット背景 */
.page-id-661 {
  background-color: #f7f9ff;
  background-image: radial-gradient(#c5d9f5 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* グラフカードは白に */
.page-id-661 .chart-box {
  background: #ffffff !important;
}

/* =========================
   カード上部のカラーライン
========================= */
#chart-main     { border-top: 4px solid #2c7be5 !important; }
#chart-special  { border-top: 4px solid #f8961e !important; }
#chart-bar      { border-top: 4px solid #69db7c !important; }
#chart-revenue  { border-top: 4px solid #4dabf7 !important; }
#chart-expense  { border-top: 4px solid #ff6b6b !important; }
#person-budget  { border-top: 4px solid #ffd43b !important; }

/* =========================
   chart-boxと同じ装飾を3セクションに適用
========================= */
.page-id-661 .budget-per-person,
.page-id-661 .budget-100yen {
  background: #ffffff !important;
  padding: 30px !important;
  border-radius: 14px !important;
  border: 2px solid #e3e7ef !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08) !important;
  position: relative !important;
}

/* 右上の赤丸装飾 */
.page-id-661 .budget-per-person::before,
.page-id-661 .budget-100yen::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  width: 16px !important;
  height: 16px !important;
  background: #ff6b6b !important;
  border-radius: 50% !important;
  opacity: 0.6 !important;
}

/* カード上部のカラーライン（3セクション） */

.page-id-661 .budget-per-person { border-top: 4px solid #ffd43b !important; }
.page-id-661 .budget-100yen   { border-top: 4px solid #f8961e !important; }

/* =========================
   当初予算の比較テーブルの装飾
========================= */
.page-id-661 .budget-table {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.page-id-661 .budget-table th,
.page-id-661 .budget-table td {
  background: #ffffff;
}

.page-id-661 .budget-table th {
  background: #e6f1fb !important;
  color: #185fa5;
}

/* 合計行の装飾 */
.budget-table-total td {
  font-weight: bold;
  background: #e6f1fb !important;
  color: #185fa5;
  border-top: 2px solid #2c7be5;
}

/* 注釈の装飾 */
.page-id-661 .budget-table-note {
  font-size: 0.85rem;      /* 少し小さくして補足情報であることを示す */
  color: #666666;          /* 文字色は少し薄めに */
  margin-top: 8px;         /* テーブルとの間隔 */
  text-align: right;       /* 右寄せ（表の右端に合わせる） */
  line-height: 1.5;
}

/* スマホ表示の時は左寄せにする場合（お好みで） */
@media (max-width: 768px) {
  .page-id-661 .budget-table-note {
    text-align: left;
    padding: 0 10px;
  }
}

/*  スマホ対応 */
@media (max-width: 768px) {
  .page-id-661 {
    background-size: 20px 20px;
  }
}

/* =========================
　「令和8年度の一般会計は 2369億円」の帯デザイン（カードとは別）
========================= */
/* 本体 */
.page-id-661 .lead {
  background: linear-gradient(135deg, #e6f1fb, #f0f8ff);
  border-radius: 12px;
  padding: 24px 28px;
  text-align: center;
  border: 1.5px solid #b5d4f4;
  position: relative;
  overflow: hidden;
  margin: 50px auto;
}

/* 装飾の丸 */
.page-id-661 .lead::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(44, 123, 229, 0.08);
}

/* 上の説明テキスト（小さく） */
.page-id-661 .lead-main {
  font-size: 16px;
  color: #666;
  display: inline-block;
  margin-bottom: 3px;
}

/* メイン数値（大きく強調） */
.page-id-661 .big-number {
  display: inline;
  font-size: 70px;   /* ← ここを大きく */
  font-weight: 800;
  color: #2c7be5;
  line-height: 1.1;
}

/* 補足テキスト */
.page-id-661 .lead-sub {
  font-size: 18px;
  color: #888;
  margin-top: 3px;
  display: inline-block;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .page-id-661 .lead {
    padding: 20px 16px;
  }

  .page-id-661 .big-number {
    font-size: 40px;
  }
}

/* =========================
グラフアニメーション
========================= */
.page-id-661 .animate{
opacity:0;
transform:translateY(40px);
transition:all 1s ease;
}

.page-id-661 .animate.active{
opacity:1;
transform:translateY(0);
}

/* 手書きメモ風タイトル*/
.page-id-661 h1.budget-titile{
display:inline-block;
padding:10px 18px;
background:#fff9c4;
border-radius:6px;
box-shadow:0 3px 6px rgba(0,0,0,0.15);
transform:rotate(-1deg);
}

/* グラフカードを紙っぽくする*/
.page-id-661 .chart-box{
background:#ffffff;
padding:30px;
border-radius:14px;
border:2px solid #e3e7ef;
box-shadow:
0 4px 8px rgba(0,0,0,0.08);
position:relative;
}

.page-id-661 .chart-box::before{
content:"";
position:absolute;
top:8px;
right:12px;
width:16px;
height:16px;
background:#ff6b6b;
border-radius:50%;
opacity:0.6;
}

/* クレジット（情報・出典） */
.page-id-661 .budget-credit{
font-size:13px;
color:#444;
background:#f8f9fb;
border:1px solid #e3e6ef;
padding:12px 16px;
margin-bottom:20px;
border-radius:6px;
line-height:1.6;
}

.page-id-661 .budget-credit a{
color:#2c7be5;
text-decoration:underline;
}


/* 注意書き（下） */
.page-id-661 .budget-note{
font-size:13px;
color:#666;
margin-top:30px;
padding:12px 16px;
background:#fafafa;
border-radius:6px;
line-height:1.6;
}


/* 予算インフォグラフィック */
.page-id-661 .budget-section{
max-width:1000px;
margin:auto;
padding:40px 20px;
}

.page-id-661 .lead{
font-size:24px;
text-align:center;
margin:40px 0;
}

.page-id-661 .big-number{
font-size:48px;
font-weight:bold;
color:#2c7be5;
}

.page-id-661 .budget-grid{
display:grid;
grid-template-columns:1fr;
gap:50px;
margin-top:40px;
}

.page-id-661 .chart-box{
background:#fafafa;
padding:30px;
border-radius:12px;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.page-id-661 .budget-table{
width:100%;
border-collapse:collapse;
margin-top:30px;
}

.page-id-661 .budget-table th,
.page-id-661 .budget-table td{
padding:12px;
border-bottom:1px solid #ddd;
text-align:center;
}

.page-id-661 .budget-table th{
background:#f3f3f3;
}

@media(max-width:768px){

.page-id-661 .budget-grid{
grid-template-columns:1fr;
}

.page-id-661 .big-number{
font-size:36px;
}

}

/* 吹き出し（説明・強調） */
.page-id-661 .budget-comment{
background:#e8f2ff;
border-left:5px solid #2c7be5;
padding:14px 16px;
border-radius:10px;
margin:20px 0;
font-size:15px;
line-height:1.7;
position:relative;
}

/* 吹き出しの三角 */
.page-id-661 .budget-comment::before{
content:"";
position:absolute;
top:-8px;
left:20px;
border-width:0 8px 8px 8px;
border-style:solid;
border-color:transparent transparent #e8f2ff transparent;
}
/* 一般会計と特別会計に分かれています */
.page-id-661 .chart-desc{
text-align:center;
color:#666;
margin-bottom:20px;
}


/* スマホ対応 */
@media(max-width:768px){

.page-id-661 .chart-box canvas{
max-width:100%;
}

}

/* 特別会計スライス */
.page-id-661 .special-slice{

width:140px;
height:140px;

margin:10px auto;

background: conic-gradient(
    #ffffff 0deg 30deg,   /* 0〜30度：白色 */
    #d9d9d9 30deg 120deg,     /* 30〜120度：グレー（回転後に270〜360度になる部分） */
    #ffffff 120deg 360deg /* 120〜360度：ここを白色に戻すのがポイント！ */
  );

border-radius:50%;

box-shadow:0 10px 15px rgba(0,0,0,0.15);

animation:floatSlice 3s ease-in-out infinite;

display:flex;
align-items:center;
justify-content:center;

}

/* テキスト */
.page-id-661 .special-slice{
transform:rotate(-120deg);
font-weight:bold;
font-size:18px;
color:#555;
}

.page-id-661 .special-slice span {
  /* 親の -120deg を打ち消すために 120deg 回転させる */
  transform: rotate(120deg);
  
  /* inline要素は transform が効かないため、block系に指定します */
  display: inline-block; 
}

/* ふよふよアニメーション */
@keyframes floatSlice{
	
0%{
transform:rotate(-120deg) translateY(0px);
}

50%{
transform:rotate(-120deg) translateY(-10px);
}

100%{
transform:rotate(-120deg) translateY(0px);
}
}

/* 特別会計スライスSP対応 */
@media(max-width:768px){
.page-id-661 .special-slice{
width:120px;
height:120px;
}
.page-id-661 .slice-text{
font-size:16px;
}
}

/* ドリルダウン構造 */
.page-id-661 .budget-drilldown{
text-align:center;
margin:10px 0 30px 0;
position:relative;
}

.page-id-661 .drill-line{
width:2px;
height:60px;
background:#ccc;
margin:0 auto;
position:relative;
}

.page-id-661 .budget-drilldown::before{

content:"";
position:absolute;
top:-30px;
left:50%;
width:2px;
height:30px;
background:#ccc;
transform:translateX(-50%);
}

/* 下へスクロール */
.page-id-661 .scroll-indicator{
display:block;
width:100%;
text-align:center;

font-size:13px;
opacity:0.9;
animation:scrollBounce 1.5s infinite;
letter-spacing:1px;
}

.page-id-661 .scroll-indicator span{
display:inline-block;
}

@keyframes scrollBounce{
0%{ transform:translateY(0); opacity:0.7;}
50%{ transform:translateY(10px); opacity:1;}
100%{ transform:translateY(0); opacity:0.7;}
}

/* 冒頭用のスマホ閲覧時にだけ見えるスクロール（PC非表示） */
.page-id-661 .scroll-indicator-sp {
    display: none;
}

/* スマホ閲覧時（画面幅767px以下）に表示 */
@media screen and (max-width: 767px) {
 .page-id-661 .scroll-indicator-sp {
    display: block;
    width:100%;
    text-align:center;
    font-size:13px;
    opacity:0.9;
    animation:scrollBounce 1.5s infinite;
    letter-spacing:1px;
}

.page-id-661 .scroll-indicator-sp span{
display:inline-block;
}
    }
}


/* 特別会計をスマホ閲覧時に大きく表示 */
@media (max-width: 768px) {
  #chart-special canvas {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* 棒グラフ */
#chart-bar {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

.page-id-661 .budgetbar-title{
	margin-top:30px;
}


/* 区民1人あたり予算 */
.page-id-661 .budget-per-person{
margin-top:60px;
text-align:center;
}

.page-id-661 .perperson-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:30px;
}

.page-id-661 .perperson-card{
background:#f7f9fc;
padding:30px;
border-radius:12px;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.page-id-661 .perperson-title{
font-size:18px;
margin-bottom:10px;
}

.page-id-661 .perperson-number{
font-size:40px;
font-weight:bold;
color:#2c7be5;
}

@media(max-width:768px){

.page-id-661 .perperson-grid{
grid-template-columns:1fr;
}

}

/* 追加する注釈のスタイル */
.page-id-661 .perperson-note {
  margin-top: 20px;
  font-size: 13px;       /* 少し小さめ */
  color: #777;           /* 少し薄めのグレー */
  line-height: 1.6;
  text-align: right;    /* 右寄せにすると「注釈らしさ」が出ます */
}

@media(max-width:768px){
  .page-id-661 .perperson-grid{
    grid-template-columns:1fr;
  }
  /* スマホの時は中央寄せの方が見栄えが良い場合が多いです */
  .page-id-661 .perperson-note {
    text-align: center;
    font-size: 12px;
  }
}

/* =========================
100円グラフ（視認性強化版）
========================= */

.page-id-661 .budget-100yen {
  margin: 60px 0;
  text-align: center;
}

.page-id-661 .budget-100yen h2 {
  font-size: 26px; /* 少し大きく */
  font-weight: bold; /* 太く */
  margin-bottom: 15px; /* 余白を調整 */
  color: #333; /* 色を濃く */
}

.page-id-661 .yen-intro {
  margin-bottom: 30px; /* 余白を調整 */
  color: #444; /* 色を少し濃く */
  font-size: 16px; /* 少し大きく */
  font-weight: 500; /* やや太く */
}

/* ===== PC表示 ===== */

.page-id-661 .yen-chart {
  display: flex;
  height: 80px; /* グラフ自体を少し高くして文字を配置しやすく */
  border-radius: 15px; /* 角丸を調整 */
  position: relative;
  margin-bottom: 80px; /* 下にラベルが表示されるスペースを確保 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 軽い影で立体感を */
}

/* 各ブロックの角丸を維持するための工夫 */
.yen-item:first-child { border-radius: 15px 0 0 15px; }
.yen-item:last-child { border-radius: 0 15px 15px 0; }

/* 各ブロック */
.page-id-661 .yen-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: relative;

  /* アニメーション初期 */
  transform: scaleX(0);
  transform-origin: left;
  animation: growBar 1s ease forwards;
}

/* 遅延（順番に伸びる） */
.page-id-661 .yen-item:nth-child(1){animation-delay:0.1s;}
.page-id-661 .yen-item:nth-child(2){animation-delay:0.2s;}
.page-id-661 .yen-item:nth-child(3){animation-delay:0.3s;}
.page-id-661 .yen-item:nth-child(4){animation-delay:0.4s;}
.page-id-661 .yen-item:nth-child(5){animation-delay:0.5s;}
.page-id-661 .yen-item:nth-child(6){animation-delay:0.6s;}

/* 幅 */
.page-id-661 .welfare{ width:50%; background:#ff6b6b; }
.page-id-661 .education{ width:14%; background:#4dabf7; }
.page-id-661 .infrastructure{ width:13%; background:#74c0fc; }
.page-id-661 .admin{ width:11%; background:#ffd43b; color:#333; } /* 黄色は文字色を暗く */
.page-id-661 .health{ width:8%; background:#69db7c; }
.page-id-661 .other{ width:4%; background:#adb5bd; }

/* 金額 */
.page-id-661 .yen-item span {
  font-weight: 900; /* とても太く */
  font-size: 18px; /* 大きく */
  z-index: 2;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 文字に影をつけて可読性アップ */
}

/* 黄色ブロックの金額の色を調整 */
.page-id-661 .admin span {
  color: #333;
  text-shadow: none;
}

/* ラベル（PCで確実表示） */
.page-id-661 .yen-item p {
  position: absolute;
  top: 90px; /* グラフが高くなった分、位置を調整 */
  width: 130px; /* 幅を少し広く */
  font-size: 14px; /* 大きく */
  font-weight: bold; /* 太く */
  color: #222; /* 色を濃く */
  line-height: 1.3;
  text-align: center;
  margin: 0;
}

/* ===== スマホ ===== */
@media (max-width: 768px) {

  /* 横棒グラフレイアウトに切り替え */
  .page-id-661 .yen-chart {
    flex-direction: column !important;
    height: auto !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .page-id-661 .yen-item {
    width: 100% !important;
    height: 44px !important;
    border-radius: 6px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 12px !important;
    transform: scaleX(1) !important; /* PC用アニメーションリセット */
    animation: fadeUp 0.6s ease forwards !important;
  }

  /* 金額に比例した横幅をmax-widthで表現 */
  .page-id-661 .yen-item.welfare        { max-width: 100% !important; }
  .page-id-661 .yen-item.education      { max-width: 28% !important; }
  .page-id-661 .yen-item.infrastructure { max-width: 26% !important; }
  .page-id-661 .yen-item.admin          { max-width: 22% !important; }
  .page-id-661 .yen-item.health         { max-width: 16% !important; }
  .page-id-661 .yen-item.other          { max-width: 8% !important; }

  .page-id-661 .yen-item span {
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

.page-id-661 .yen-item p {
  position: static !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-left: 8px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

  .page-id-661 .yen-item.admin span { color: #7a5c00 !important; }
  .page-id-661 .yen-item.admin p    { color: #7a5c00 !important; }

/* 一定幅以下はラベルを外に出す */
.page-id-661 .yen-item.education,
.page-id-661 .yen-item.infrastructure,
.page-id-661 .yen-item.admin,
.page-id-661 .yen-item.health,
.page-id-661 .yen-item.other {
  position: relative !important;
}

/* ラベルを右外へ */
.page-id-661 .yen-item.education p,
.page-id-661 .yen-item.infrastructure p,
.page-id-661 .yen-item.admin p,
.page-id-661 .yen-item.health p,
.page-id-661 .yen-item.other p {
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  color: #333 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

  .page-id-661 .yen-item.health span,
  .page-id-661 .yen-item.other span {
    color: #fff !important;
  }
}

.page-id-661 .yen-item span {
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ===== アニメーション ===== */

@keyframes growBar{
  to{
    transform:scaleX(1);
  }
}

@keyframes fadeUp{
  to{
    transform:translateY(0);
    opacity:1;
  }
}
/* =========================
   歳入・歳出
========================= */
.page-id-661 .budget-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .page-id-661 .budget-compare {
    grid-template-columns: 1fr;
  }

  /* 歳入だけに適用（歳出は指定しない） */
  #chart-revenue canvas {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    display: block !important;
  }
}