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

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

/* ヒーロー全体 */
.budget-hero{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);

background:linear-gradient(135deg,#2c7be5,#6ea8fe);
color:#fff;
padding:60px 20px;
text-align:center;
margin-bottom:40px;
border-radius:0;
	
position:relative;
overflow:hidden;
}

.budget-hero::before{
content:"";
position:absolute;
bottom:-60px;
left:-60px;
width:200px;
height:200px;
background:rgba(255,255,255,0.1);
border-radius:50%;
}

.hero-inner{
max-width:800px;
margin:0 auto;
}

.hero-title{
font-size:32px;
line-height:1.4;
font-weight:bold;
margin-bottom:16px;
}

.hero-desc{
font-size:15px;
line-height:1.6;
opacity:0.95;
}

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


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

.animate.active{
opacity:1;
transform:translateY(0);
}

/* 手書きメモ風タイトル*/
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);
}

/* グラフカードを紙っぽくする*/
.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;
}

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

/* クレジット（情報・出典） */
.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;
}

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


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


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

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

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

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

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

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

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

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

@media(max-width:768px){

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

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

}

/* 吹き出し（説明・強調） */
.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;
}

/* 吹き出しの三角 */
.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;
}
/* 一般会計と特別会計に分かれています */
.chart-desc{
text-align:center;
color:#666;
margin-bottom:20px;
}


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

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

}

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

width:140px;
height:140px;

margin:10px auto;

background: conic-gradient(
    transparent 0deg 40deg,   /* 0〜40度：透明 */
    #d9d9d9 40deg 120deg,     /* 40〜120度：グレー（回転後に280〜360度になる部分） */
    transparent 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;

}

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

.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){
.special-slice{
width:120px;
height:120px;
}
.slice-text{
font-size:16px;
}
}

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

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

.budget-drilldown::before{

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

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

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

.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;}
}

/*特別会計をスマホ閲覧時に大きく表示 */
@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;
}

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

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

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

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

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

@media(max-width:768px){

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

}

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

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

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

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

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

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

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

.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; }

/* 各ブロック */
.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;
}

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

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

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

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

/* ラベル（PCで確実表示） */
.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){

  .budget-100yen h2{
    font-size: 20px;
  }

  .yen-intro{
    font-size: 14px;
  }

  .yen-chart{
    flex-direction:column;
    height:auto;
    gap:10px; /* 間隔を少し広く */
    margin-bottom: 0;
    box-shadow: none;
  }

  .yen-item{
    width:100% !important;
    height:55px; /* 少し高く */
    flex-direction:row;
    justify-content:space-between;
    padding:0 15px; /* 余白を調整 */
    border-radius:10px; /* 角丸を調整 */

    /* アニメーション */
    transform:translateY(20px);
    opacity:0;
    animation:fadeUp 0.6s ease forwards;
  }

  /* 遅延 */
  .yen-item:nth-child(1){animation-delay:0.1s;}
  .yen-item:nth-child(2){animation-delay:0.2s;}
  .yen-item:nth-child(3){animation-delay:0.3s;}
  .yen-item:nth-child(4){animation-delay:0.4s;}
  .yen-item:nth-child(5){animation-delay:0.5s;}
  .yen-item:nth-child(6){animation-delay:0.6s;}

  /* テキスト整列 */
  .yen-item span{
    font-size:16px; /* 少し大きく */
    font-weight: bold;
    text-shadow: none;
  }

  /* 黄色ブロックの金額の色を調整 */
  .admin span {
    color: #333;
  }

  .yen-item p{
    position:static;
    color:#fff;
    font-size:14px; /* 少し大きく */
    font-weight: bold; /* 太く */
    margin:0;
    line-height:1.2;
    transform: none;
    width: auto;
  }

  /* 黄色ブロックのラベルの色を調整 */
  .admin p {
    color: #333;
  }

}

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

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

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

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

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