h2 {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 1.4em;
  margin-bottom: 1em;
  border: none;
  font-size:2.2rem;  
  line-height: 1.3; /* または normal */
}
h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 140px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #4b49cb;
}



h3{
    margin: 12px 0 0 0;
}



.scroll-x {
    width: 100%;
    overflow-x: auto; /* 横スクロールを許可 */
    overflow-y: hidden; /* 縦スクロールは非表示 */
    -webkit-overflow-scrolling: touch; /* スマホでの滑らかなスクロール */
    border: 1px solid #ddd; /* 必要なら枠 */
    padding-bottom: 8px; /* スクロールバーとの間隔 */
}

.scroll-x img {
    display: block;
    height: 460px;
    max-width: none; /* ←これが重要（画像を縮めない） */
}


/* ====== ランキング ====== */
/* === 全体構造 === */
.ranking-section {
  margin: 0 auto;
  padding: 1rem;
}


/* === グリッド構造 === */
.ranking-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}

/* === 1位を大きく表示 === */
.ranking-item.ranking-1 {
  grid-row: span 2;
  background: #fff;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.ranking-item.ranking-1 .ranking-image {
    aspect-ratio: 4/3;
    background: #ddd;
    display: flex;                /* ← フレックスボックスにする */
    align-items: center;          /* ← 垂直方向の中央揃え */
    justify-content: center;      /* ← 水平方向の中央揃え */
    text-align: center;           /* ← テキストが複数行になったときも中央に */
}
.ranking-item.ranking-1 .ranking-image img {
    width: 220px;
}

.ranking-item.ranking-1 .ranking-number {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #e1b654;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranking-item.ranking-1 .ranking-content {
  padding: 0.75rem 1rem 1rem;
}

.ranking-item.ranking-1 .ranking-name {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.ranking-item.ranking-1 .ranking-desc {
  color: #444;
}
.ranking-item.ranking-1 .ranking-desc td {  
    font-size: 1.2rem; 
}

/* === 2〜5位 === */
.ranking-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.ranking-item .ranking-image {
  aspect-ratio: 4/3;
  background: #ddd;
  flex-shrink: 0;
    display: flex;                /* ← フレックスボックスにする */
    align-items: center;          /* ← 垂直方向の中央揃え */
    justify-content: center;      /* ← 水平方向の中央揃え */
    text-align: center;           /* ← テキストが複数行になったときも中央に */
}

.ranking-item .ranking-number {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: #aaa;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranking-item.ranking-2 .ranking-number { background: #bbb; }
.ranking-item.ranking-3 .ranking-number { background: #d18f36; }
.ranking-item.ranking-4 .ranking-number { background: #6b6b6b; }
.ranking-item.ranking-5 .ranking-number { background: #6b6b6b; }

.ranking-item .ranking-content {
  padding: 0.5rem;
}

.ranking-item .ranking-name {
  /*font-size: 1.1rem;*/
  font-weight: bold;
}

.ranking-item .ranking-desc {
  color: #555;
}
/* === スマホ表示 === */
@media (max-width: 768px) {
    .ranking-section {
    padding: 0.1rem;
    }

  .ranking-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .ranking-item.ranking-1 {
    grid-row: auto;
  }
  
    .ranking-item.ranking-1 .ranking-desc td {  
        font-size: 1rem; 
    }

  /* ← ここが変更ポイント！ */
  .ranking-item {
    flex-direction: row;
    align-items: center;
  }

  .ranking-item .ranking-image {
    width: 40%;
    aspect-ratio: auto;
    height: 100%;
    text-align: center;
  }
   .ranking-item .ranking-image img {
    max-width: 100%;    /* 横幅はボックスに合わせる */
    max-height: 100%;   /* 縦幅もボックスに合わせる */
    object-fit: contain; /* 画像の縦横比を維持しながら収める */
  }


  .ranking-item .ranking-content {
    width: 60%;
    padding: 0.5rem 0.75rem;
  }

  .ranking-item .ranking-number {
    top: 0.4rem;
    left: 0.4rem;
  }
}
/* ====== ランキング（終了） ====== */

/* —— 追加スタイル —— */


/* ランキングカード間の余白をやや広めに */
.ranking-grid {
    gap: 1rem; /* 既存と重複してもOK */
    margin-bottom: 1.5rem;
}

/* ranking-desc のテーブルを小さめにして合計を強調 */
.ranking-desc table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: .4rem; 
}
.ranking-desc td { 
    padding: 2px 6px; 
    font-size: 1rem; 
    vertical-align: middle; 
    font-weight: bold;
}
.ranking-desc .total-row td { 
    font-weight: 700; 
    font-size: 1.1rem; 
    color: #c92b2b; 
}

/* 6〜10位用テーブル：全体をコンパクトに、でも見やすく */
.ranking-table-wrapper { margin-bottom: 1.5rem; }
.ranking_table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ranking_table th, .ranking_table td { border: 1px solid #eee; padding: .45rem .6rem; text-align: center; }
.ranking_table th { background: #fff; font-weight: 600; }

.ranking_table tbody tr:last-child {
    border-bottom: solid 3px #fff;
}
.ranking_table tbody tr:nth-child(even) {
    background-color: #fff; /* 奇数行よりほんの少し濃い */
}

.ranking_table tbody tr:nth-child(odd) {
    background-color: #f3f5f7;
}

.ranking_table img { border-radius: 4px; }

/* 合計を1〜10位で共通して赤太字にするクラス */
.highlight-total { color: #c92b2b; font-weight: 700; }

/* 11位以下用（最初は非表示） */
.hidden-ranking { display: none; margin-top: 1rem; }
.ranking_table.compact th, .ranking_table.compact td { padding: .35rem .5rem; font-size: .9rem; }

/* ボタンデザイン */
.show-more-wrapper { text-align: center; margin-top: .75rem; }
.show-more-btn {
    padding: .5rem .9rem;
    border-radius: 6px;
    border: 1px solid #cfcfcf;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}
.show-more-btn:active { transform: translateY(1px); }

/* グラフ周り */
.ranking-graph-wrapper { margin-top: 1.75rem; text-align: center; }
.ranking-graph-wrapper img { 
    max-width: 100%; 
    height: auto;
    border-radius: 8px; 
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
 }

/* モバイル微調整 */
@media (max-width: 768px) {
    .ranking-desc td { font-size: .8rem; }
    .ranking_table th, .ranking_table td { font-size: .85rem; padding: .4rem .5rem; }
}

/* 行ホバー時はほんのり明るくして可読性アップ */
.ranking_table tbody tr:hover {
    background-color: rgb(230, 233, 236);
    transition: background-color 0.15s ease;
}



.change-up {
    color: #4b49cb;
    font-weight: bold;
}

.change-down {
    color: #d33;
    font-weight: bold;
}



/* 今月のデータと、先月からの増減の切替 */
.change-only {
  display: none;
}
.show-change .change-only {
  display: inline;
}
.show-change .value-only {
  display: none;
}
/* 増減がない場合の文字を灰色に */
.change-zero {
    color: #555;
}
.change-none {
    color: #999;
    font-size: 0.8rem;
}

.toggle-btn {
  padding: .5em 1em;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}



   /*********** トグル（メインの上書き） *************/

.toggle_label {
  width: 45px;
  height: 20px;
  background: var(--main_color);
}

.toggle_label:after {
  width: 20px;
  height: 20px;
  background: #fff;
}

.toggle_input:checked + .toggle_label {
  background-color: #d44242;
}

.toggle_input:checked + .toggle_label:after {
  left: 25px;
}

.toggle_button {
  width: 45px;
  height: 20px;
}
/*トグルを入れているテーブルのスタイル*/

.toggle_table tr td{
    border-radius:6px;
    text-align:center;
    padding: 0px 10px;
    font-weight: bold;
}

/*********** トグル（終わり） *************/