/* ============================================================
  ▼ レスポンシブ設定（モバイル / デスクトップ表示切替）
============================================================ */

/* デスクトップ用：600px 以上でサイドバーを非表示 */
@media screen and (min-width: 600px) {
  .md-sidebar {
    display: none !important;
  }
}

/* モバイル用：599px 以下で本文の余白を最適化 */
@media screen and (max-width: 599px) {
  .md-content {
    padding: 0 !important;
    margin-top: 0 !important;
  }
}

.md-content h1:first-of-type {
  display: none !important;
}


/* ============================================================
  ▼ ヘッダー、メニューなどグローバルUIのカスタマイズ
============================================================ */

/* 常にヘッダーを非表示 */
.md-header,
.md-header__button {
  display: none !important;
}

.fake-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #5572ae;
  color: white;
  padding: 12px;
  text-align: center;
}

.fake-header .fake-logo {
  height: 40px;
  vertical-align: middle;
  margin-right: 8px;
}

.fake-header .fake-title {
  font-size: 1.4em;
  font-weight: bold;
  vertical-align: middle;
}








body::before {
  content: "";
  position: fixed;       /* 上部に固定 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 144px;         /* 上部の高さ */
  background-color: #888888;
  z-index: 50;           /* ボタンやヘッダーより下に置く場合は調整 */
  pointer-events: none;  /* 背景なのでクリックを妨げない */
}








/* ============================================================
  ▼ 本文・コンテンツエリアの調整
============================================================ */

body, h1, h2, h3, h4, h5, h6, p, span, div {
  font-weight: bold !important;
}



h2 {
  display: inline-block;
  width: 14em;     
  margin-top: 0.8em;
  font-size: 1em;
  border-bottom: 4px solid  #5572ae;
  border-left: 12px solid #5572ae;   /* 左の縦線 */
  padding-left: 0.5em;
  padding-bottom: 0.1em;
}



.md-content,
.md-content__inner,
.md-main,
.md-main__inner {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.md-content {
  margin-top: 56px !important; /* fake-header + button-grid分 */
}

.md-content__inner {
  padding-left: 1.5em !important;
  padding-right: 1.5em !important;
}

.md-content h1:first-of-type {
  margin-top: 20px !important;
}

.md-content h1 {
  margin-top: 0.2em !important;
  margin-bottom: 0.3em !important;
}


.md-content p {
  margin-top: 0.2em !important;
  margin-bottom: 0.5em !important;
}

.md-content h2 {
  margin-top: 20px; /* 好きな値に調整 */
}










/* ============================================================
  ▼ サイドバー（左 / 右）カスタマイズ
============================================================ */

/* 左サイドバー非表示 */
.md-sidebar {
  display: none !important;
}

/* 右サイドバーをボタンの下に固定表示 */
.md-sidebar--secondary {
  position: fixed;
  top: 140px;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: #f9f9f9;
  padding: 10px;
  border-top: 1px solid #ccc;
  overflow-x: auto;
  white-space: nowrap;
}





/* ============================================================
  ▼ ボタンUI（グリッド型メニュー）
============================================================ */

/* ===== ボタンエリア ===== */
.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: sticky;
  top: 64px;
  width: 100vw;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  z-index: 100;
  overflow-x: hidden;
  margin-left: -1.5em !important;
  margin-right: -1.5em !important;
}

/* ===== 各ボタン ===== */
.button,
.button:link,
.button:visited,
.button:hover,
.button:active {
  display: block;
  padding: 5px 0.5em !important;
  margin: 0 !important;
  background-color: #ababab;
  color: white !important;
  text-align: center;
  text-decoration: none !important;
  font-weight: bold;
  font-size: 1em !important;
  border: 3px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  opacity: 1 !important;
}

.button:hover {
  background-color: #888888;
}







/* ▼ ドロップダウン設定 ▼ */
.dropdown {
  position: relative;
  display: flex;     /* ← flexは残してOK */
  justify-content: center; /* ボタン中央寄せに変更（任意） */
  z-index: 302;
}

.dropdown-toggle {
  width: 33.33vw;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  padding: 7px 0;
}

/* ▼ ドロップダウン中身 ▼ */
.dropdown-content {
  display: none;
  position: absolute;
  top: 98%;
  right: 0;                   /* 右寄せに合わせる */
  width: 33.33vw;             /* ボタンと同じ幅 */
  z-index: 500;
}

.dropdown-content .button {
  display: block;
  width: 100%;
  border-top: 3px solid rgba(0, 0, 0, 0.1);  /* ← 追加 */
  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
  padding-left: 0.2em !important;
  padding-right: 0.2em !important;
}

/* openクラスで表示 */
.dropdown.open .dropdown-content {
  display: block;
}

/* ▼ ドロップダウン背景（隙間解消・灰色バック） */
.dropdown::before {
  content: "";
  position: absolute;
  top: 98%;                /* ← 少し上から始める（隙間を防ぐ） */
  left: 0;
  width: 100%;
  height: calc(100% + 10em);  /* ← 少し長めに（下も確実に覆う） */
  background-color: #ababab;
  z-index: 499;
  display: none;
}

/* open 時だけ表示 */
.dropdown.open::before {
  display: block;
}

/* sticky部分のoverflowを修正（重要） */
.button-grid {
  overflow: visible !important;
}








/* ============================================================
  ▼ カスタム目次ナビゲーション
============================================================ */

/* カスタム目次ナビゲーション（改良版） */
.custom-toc {
  position: static;           /* fixed をやめる */
  margin-top: 15px;           /* ボタンとの間隔 */
  background-color: #bfbfbf;
  border: 2px solid #707070;
  padding: 10px;
  padding-right: 20%;         /* 右側の余白 */
  display: flex;
  flex-direction: column;
  z-index: 301;
}




/* ============================================================
  ▼ タイトル付き画像フレーム（frame-text）
============================================================ */

/*.frame-text {
  position: relative !important;
  text-align: center !important;
  display: inline-block !important;
  width: 100% !important;
  margin-top: 0.3em !important;
  margin-bottom: 0.5em !important;
}

.frame-text img {
  width: 100% !important;
  display: block !important;
  z-index: 1 !important;
}

.frame-text span {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  padding-left: 0.5em;
  font-size: 1.3em !important;
  color: black !important;
  font-weight: bold !important;
  z-index: 2 !important;
  display: block !important;
  text-align: left !important;
}*/

/* ============================================================
  ▼ スクロールバー非表示（全ブラウザ対応）
============================================================ */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  display: none;
}

/* Firefox */
html {
  scrollbar-width: none;
  -ms-overflow-style: none; /* IE, Edge (レガシー) */
}

/* ============================================================
  ▼ 表の見た目
============================================================ */

.table-wrapper {
  width: 100%;
}

.pokemon-header,
.pokemon-row {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ccc;
}

.pokemon-header {
  font-weight: bold;
  background: #eee;
}

.col {
  padding: 1px 4px;      /* 上下1px、左右4px */
  line-height: 2;      /* 少し行間をとると文字が潰れにくい */
  text-align: center;
  white-space: nowrap;
}




.col.number { width: 10%; }
.col.icon   { width: 12%; }
.col.name   { width: 28%; }
.col.type1  { width: 9%; }
.col.type2  { width: 9%; }
.col.hp     { width: 12%; }
.col.atk    { width: 12%; }
.col.style  { width: 8%; }
.col.learn  { width: 25%; }


/* ヘッダーと行の格子 */
.pokemon-header,
.pokemon-row {
  border: 1px solid #ccc;       /* 行の外枠・境界 */
  display: flex;
}

/* 列ごとに縦線を追加 */
.pokemon-header .col,
.pokemon-row .col {
  border-right: 1px solid #ccc; /* 列の境界 */
  padding: 2px 4px;
  text-align: center;
  white-space: nowrap;
}

/* 最後の列の右線を消す */
.pokemon-header .col:last-child,
.pokemon-row .col:last-child {
  border-right: none;
}


/* アイコンと名前の境界線を消す */
.pokemon-header .icon,
.pokemon-row .icon {
  border-right: none;
}

/* タイプ1とタイプ2の境界線を消す */
.pokemon-header .type1,
.pokemon-row .type1 {
  border-right: none;
}



/* ヘッダー背景色 */
.pokemon-header {
  background-color: #eee;
  font-weight: bold;
}

/* ソート可能列（番号 / HP / ATK） */
.pokemon-header .number,
.pokemon-header .hp,
.pokemon-header .atk {
  color: #0056b3;              /* 青色 */
  font-weight: bold;
  cursor: pointer;              /* 手の形に */
}

/* ホバー時の効果 */
.pokemon-header .number:hover,
.pokemon-header .hp:hover,
.pokemon-header .atk:hover {
  color: #0056b3;               /* 濃い青に変化 */
}




/* タイプごとの背景色 */
.pokemon-row .type1,
.pokemon-row .type2,
.pokemon-header .type1,
.pokemon-header .type2 {
  border-radius: 4px;
  padding: 0px;
  color: black; /* 文字色 */
  text-align: center;
}

/* タイプ別カラー（例、あとで調整可） */
.type-normal { background-color:rgba(180, 180, 180, 0.3); }   /* 草 */
.type-grass { background-color: rgba(120, 200, 120, 0.3); }   /* 草 */
.type-poison { background-color: rgba(180, 120, 180, 0.3); }  /* 毒 */
.type-fire { background-color: rgba(255, 120, 80, 0.3); }     /* 炎 */
.type-water { background-color: rgba(100, 150, 255, 0.3); }   /* 水 */
.type-electric { background-color: rgba(255, 255, 120, 0.3); } /* 電気 */
.type-ice { background-color: rgba(120, 220, 255, 0.3); }      /* 氷 */
.type-fighting { background-color: rgba(200, 80, 80, 0.3); }   /* 格闘 */
.type-ground { background-color: rgba(210, 180, 100, 0.3); }   /* 地面 */
.type-flying { background-color: rgba(160, 160, 255, 0.3); }   /* 飛行 */
.type-psychic { background-color: rgba(255, 120, 180, 0.3); }  /* エスパー */
.type-bug { background-color: rgba(180, 200, 80, 0.3); }        /* 虫 */
.type-rock { background-color: rgba(180, 160, 120, 0.3); }      /* 岩 */
.type-ghost { background-color: rgba(140, 120, 180, 0.3); }     /* ゴースト */
.type-dragon { background-color: rgba(120, 120, 255, 0.3); }    /* ドラゴン */
.type-dark { background-color: rgba(100, 80, 80, 0.3); }        /* 悪 */
.type-steel { background-color: rgba(180, 180, 200, 0.3); }     /* 鋼 */
.type-fairy { background-color: rgba(255, 180, 200, 0.3); }     /* フェアリー */


.col.icon {
  line-height: 0;
}


/* ============================================================
  ▼ 技ページ（ポケモンページから流用したものもある）
============================================================ */

/* 技一覧テーブル全体 */
.move-header,
.move-row {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ccc;
}

/* ヘッダー */
.move-header {
  font-weight: bold;
  background: #eee;
  background-color: #eee;
}

/* 列共通設定 */
.move-col {
  padding: 0px !important;
  line-height: 2;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid #ccc;
  pointer-events: auto;
}

/* 習得ポケモン欄（3列固定 + サイズ可変） */
.move-col.learn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 常に3列固定 */
  gap: 4px 4px;
  justify-items: start;   /* 左寄せ配置 */
  align-items: center;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.move-col.learn a {
  display: block;
}

.move-col.learn img {
  display: block;
  width: clamp(20px, 5vw, 40px);   /* スマホで20px、PCで最大40px */
  height: clamp(20px, 5vw, 40px);  /* 正方形を維持 */
  object-fit: contain;
  background: none !important;
  border: none !important;
}





/* 最後の列の右線を消す */
.move-col:last-child {
  border-right: none;
}

/* 各列の幅 */
.move-col.icon   { width: 7%; }
.move-col.name   { width: 30%; }
.move-col.type1  { width: 13%; }
.move-col.atk    { width: 10%; }
.move-col.wait   { width: 10%; }
.move-col.status { width: 10%; }
.move-col.learn  { width: 20%; }

/* ホバー時（ATK列） */
.move-header .atk:hover {
  color: #003f7f;
  pointer-events: auto;
}

.move-header .atk {
  color: #0056b3;
  font-weight: bold;
  cursor: pointer;
}

/* データ側ATK列 */
.move-row .atk {
  color: inherit;
  font-weight: normal;
  cursor: default;
  text-decoration: none;
  user-select: none;
  pointer-events: none;
}

/* ホバー時（タイプ列） */
.move-header .type1:hover {
  color: #003f7f;
}

.move-header .type1 {
  color: #0056b3;
  font-weight: bold;
  cursor: pointer;
}

.move-row .type1 {
  color: inherit;
  font-weight: normal;
  cursor: default;
  text-decoration: none;
  user-select: none;
  pointer-events: none;
  border-radius: 4px;
  text-align: center;
}

/* ホバー時（名前列） */
.move-header .name:hover {
  color: #003f7f;
  cursor: pointer;
}

.move-header .name {
  color: #0056b3;
  font-weight: bold;
  cursor: pointer;
}

/* ホバー時（待ち時間列） */
.move-header .wait:hover {
  color: #003f7f;
}

.move-header .wait {
  color: #0056b3;
  font-weight: bold;
  cursor: pointer;
}

.move-row .wait {
  color: inherit;
  font-weight: normal;
  cursor: default;
  text-decoration: none;
  user-select: none;
  pointer-events: none;
  text-align: center;
}

/* 状態アイコンを余白ゼロで2列配置 */
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  justify-items: center;
  align-items: center;
}

.status-grid img {
  width: 100%;
  max-width: 20px;
  height: auto;
  display: block;
}

/* 行間と余白を最適化 */
.move-row, .pokemon-row {
  line-height: normal;
  padding: 0;
  margin: 0;
}

/* ヘッダーも同様 */
.move-header, .pokemon-header {
  padding: 0;
  margin: 0;
}

/* アイコン画像の余白削除 */
.move-col.icon img,
.col.icon img {
  display: block;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* ポケモン図鑑の紫斜線領域を技ページでは無効化 */
.move-col.learn img,
.move-col.icon img {
  background: none !important;
  border: none !important;
}

.move-col.icon,
.move-col.learn {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pokemon-row .col.icon::after,
.move-row .move-col.icon::after {
  display: none !important;
}

/* トグルスイッチ */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #007bff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.hidden {
  display: none !important;
}



/* ============================================================
  ▼ レシピページ
============================================================ */



/* 全体のリスト */
.custom-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 0;
}

/* 黄色枠のカード全体（リンク＋コメント） */
.custom-recipe-block {
  background: #fdeed5;   /* 黄色い枠 */
  padding: 8px 10px;
  border-radius: 10px;
}

/* リンク部分（画像＋レシピ名） */
.custom-recipe-item {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* 画像 */
.custom-recipe-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  margin-right: 12px;
}

/* レシピ名：青色リンク */
.custom-recipe-title {
  font-size: 1rem;
  font-weight: bold;
  color: #0056b3;
}

/* コメント（ただの文章） */
.custom-recipe-comment {
  font-size: 0.85rem;
  color: #444;
  margin: 4px 0 0 62px; /* 画像下に揃える */
}

/* セル内の画像（大きさの違いをそのまま反映させる） */
.recipe-cell img {
  width: auto;
  height: auto;
  max-width: 128px;   /* ← 128より大きい画像だけ縮む */
  max-height: 128px;
  display: block;
}


/* より "カードの幅で変化" を出したいなら追加（任意） */
.custom-recipe-item img {
  width: auto;
  height: auto;
  max-width: 55px;      /* 一覧の画像上限 */
  max-height: 55px;
  display: block;
}




























.recipe-rank-container {
  display: flex;
  /*justify-content: flex-end;  右端に寄せる */
  align-items: center;
  gap: 10px;
}

.recipe-rank img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  position: relative;
  top: -5px;
}

.recipe-rank {
  display: flex;
  align-items: center;
  gap: 3px; /* アイコンと数字の間 */
}

.recipe-rank .rank-number {
  font-size: 1.6em; /* 数字サイズを変更 */
  font-weight: bold; /* 太さも調整可能 */
}






/* レシピ全体のまとまり */
.recipe-block {
  border-radius: 12px;
  padding: 1em;
  margin: 1em 1em;
  background: #fdeed5;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.08);

  max-width: 600px;  /* ← ここで最大幅を指定 */
  margin-right: auto; /* 中央寄せ */
}

/* レシピ見出し */
.recipe-block h3 {
  margin-top: 0;  
}




/* 5×3 のマス目（材料エリア） */
.recipe-grid {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 行間10px */
}

/* 材料5つをまとめた長方形 */
.recipe-row {
  display: flex;
  gap: 0; /* セル間の隙間をなくす */
  border-radius: 12px;       /* 丸みを維持 */
  overflow: hidden;           /* 丸み部分で切れるように */
  background: #ffcc65;        /* 一体化した背景 */

  max-width: 600px;  /* ← ここで最大幅を指定 */
  margin-left: auto;  /* 中央寄せ */
  margin-right: auto; /* 中央寄せ */
}

.recipe-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.recipe-cell:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.recipe-cell:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.recipe-cell img {
  width: auto;
  height: auto;
  max-width: 70%;   /* ← “拡大しない” のがポイント */
  max-height: 70%;  /* ← “拡大しない” のがポイント */
  display: block;
}







/* 仲間にできるポケモン（4列の幅いっぱいに広げる） */
.recipe-pokemon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;               /* ← 横いっぱいに広げる */
  max-width: none;           /* ← 幅制限を解除 */
  justify-items: center;     /* 各セルの中央揃え */
}


/* 各ポケモン + 確率のコンテナ */
.pokemon-chance {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1em;
}

/* アイコンサイズ調整 */
.pokemon-chance img {
  margin-top: 1.5em;
  width: 40px;
  height: auto;
}






/* ============================================================
  ▼ ポケモンページ全体
============================================================ */

.poke-stats {
  background-color: transparent !important;
  border-collapse: collapse;
  font-size: 2em
}




.poke-type-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.poke-stats {
  display: flex;
  flex-direction: column;
}

.poke-stats tr {
  display: flex;
  align-items: center;
}

.poke-stats td {
  display: flex;
  align-items: center;
  padding-right: 8px;
}

.poke-type {
  font-size: 1em;
}


.poke-type {
  font-size: 2em;
}


.stat-icon {
  width: 80px;  /* アイコンを大きくしたい場合は調整 */
  height: auto;
  vertical-align: middle;
  margin-right: 1%;
}


/* ▼ レシピ */

.recipe-section {
  background-color: #fdeed5;  /* ほんのり背景 */
  border-radius: 5px;
  padding: 5px 8px;
  margin: 12px 0;
}

.recipe-item {
  padding: 1px 0;
  font-size: 16px;
}




.recipe-icon {
  width: 24px;   /* アイコンを小さめに */
  height: 24px;
  object-fit: contain; /* 縦横比維持 */
}



/* ▼ タイプ */


.type-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0px 4px; /* 余白を大きく */
  font-weight: bold;
  font-size: 25px; /* 文字サイズを大きく */
  color: white;
  border: 3px solid; /* 枠線を太く */
  border-radius: 12px;
  text-align: center;
  font-family: sans-serif;
  border: none !important;
}


/* 八角形風にする */
.type-label.octagon {
  clip-path: polygon(
    30% 0%, 70% 0%, 
    100% 30%, 100% 70%, 
    70% 100%, 30% 100%, 
    0% 70%, 0% 30%
  );
  padding: 4px;
}


.type-label.type-normal   { background: #666666; }
.type-label.type-grass    { background: #2a8f2a; }
.type-label.type-poison   { background: #7d1b7e; }
.type-label.type-fire     { background: #d41c1c; }
.type-label.type-water    { background: #1a4fd4; }
.type-label.type-electric { background: #d4c01a; }
.type-label.type-ice      { background: #1ac4d4; }
.type-label.type-fighting { background: #8b1a1a; }
.type-label.type-ground   { background: #a26f1a; }
.type-label.type-flying   { background: #4b4bd4; }
.type-label.type-psychic  { background: #d41ac4; }
.type-label.type-bug      { background: #7b8b1a; }
.type-label.type-rock     { background: #8b6f4b; }
.type-label.type-ghost    { background: #4b1a7b; }
.type-label.type-dragon   { background: #1a1ac4; }
.type-label.type-dark     { background: #1a1a1a; }
.type-label.type-steel    { background: #6f6f8b; }
.type-label.type-fairy    { background: #d41a8b; }







/* ───────────────
  覚える技用テーブルCSS（タイプ列追加）
──────────────── */

.move-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
  font-family: Arial, sans-serif;
}

.move-header,
.move-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

.move-header {
  background-color: rgba(0, 0, 0, 0.05);
  font-weight: bold;
  border-bottom: 2px solid #aaa;
  background-color: #eee;
}

.move-header .col,
.move-row .col {
  padding: 4px 6px;
  text-align: left;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* セル幅設定（%指定） */
.col.move-name   { width: 45%; }
.col.move-type   { width: 6%; }
.col.move-power  { width: 12%; }
.col.move-time   { width: 10%; }
.col.move-effect { width: 27%; }

/* 技名のアイコン */
.move-name img {
  vertical-align: middle;
  margin-right: 3px;
}

/* 技名整列 */
.move-name {
  display: flex;
  align-items: center;
}

/* タイプ列整列 */
.move-type {
  display: flex;
  align-items: center;
}

/* タイプラベル */
.type-label-large {
  font-size: 25px;
  padding: 0px 4px;
  min-width: 70px;
  height: 35px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.type-label-small {
  font-size: 0.7em !important;
  height: auto !important;
  min-width: auto !important;
  padding: 1px 3px;
  border-radius: 4px;
}



/* 攻撃力・待ち時間・効果整列 */
.move-power,
.move-time,
.move-effect {
  white-space: normal;
}

/* 行ホバー */
.move-row:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.move-effect {
  display: flex;
  align-items: center;
  gap: 3px; /* アイコン間の余白 */
}

.effect-icon {
  width: 20px;     /* アイコンの幅 */
  height: 20px;    /* アイコンの高さ */
  object-fit: contain; /* 形崩れ防止 */
}






/* ポケモンページ・技ページ共通でアイコン高さを40pxに統一 */
.poke-stats .stat-icon,
.move-stats .stat-icon {
  height: 40px;      /* 高さを固定 */
  width: auto;       /* 幅は自動調整 */
  vertical-align: middle;
  margin-right: 1%;
}






/* ▼ ページ全体コンテナ */

.be-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ▼ 進化ヘッダー */

.evolution-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap; /* 折り返し禁止 */
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  overflow-x: hidden; /* 横スクロール防止 */
  box-sizing: border-box;
}

.evo-box {
  text-align: center !important;
  flex: 1 1 calc((100% - 2 * 30px) / 3) !important;
  max-width: calc((100% - 40px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央揃え */
}

.evo-box img {
  width: 100% !important;
  max-width: 150px !important; /* 最大サイズ150px */
  height: auto !important;
  display: block !important;
}

.evo-name, .evo-level {
  max-width: 150px; /* 画像サイズに合わせる */
  word-wrap: break-word;
  text-align: center;
}


.arrow {
  font-size: 20px !important;
  font-weight: bold !important;
  color: black !important;
  flex: 0 0 20px; /* 固定幅 */
  text-align: center;
}








/* 全体センタリング */
.evo-eevee-tree {
  text-align: center;
  margin: 20px auto;
}

/* イーブイ中央寄せ強制 */
.eevee-center {
  display: flex;
  flex-direction: column;
  align-items: center;      /* ここで中央揃え */
  justify-content: center;  /* さらに中央揃え */
  margin-bottom: 10px;
}



/* 縦線（必要に応じて使う） */
.eevee-branch {
  width: 100%;
  height: 20px;
  border-left: 2px solid #ccc;
  margin: 0 auto 10px auto;
}

/* 下の3進化グループ */
.eevee-children {
  display: flex;
  justify-content: center;     /* 全体を中央揃え */
  gap: 40px;
  margin-top: 10px;
}

.evo-box {
  text-align: center;
}

.evo-level {
  font-size: 0.8rem;
  margin-top: 4px;
  color: #666;
}





/* ▼ イーブイ専用：横幅を詰める */
.evo-eevee-tree .evo-box {
  flex: 0 0 auto !important;
}

/* ▼ 下3体の間隔を狭める */
.eevee-children {
  gap: 20px;  /* 必要なら10pxへ */
}

/* ▼ 画像サイズ調整（任意） */
.evo-eevee-tree .evo-box img {
  max-width: 110px !important;   /* 150 → 110 に縮める */
}


/* ▼ イーブイだけテキストを広く使わせる */
.eevee-center .evo-level,
.eevee-center .evo-name {
  max-width: none !important;
  width: auto !important;
  white-space: nowrap; /* ← 改行したくなければ追加 */
}


/* イーブイの画像も 3 進化と同じルールで縮める */
.evo-eevee-tree img {
  width: 100%;
  max-width: 110px;   /* お好みの最大サイズ、110～150の間で調整可 */
  height: auto;
}

/* シャワーズ・サンダース・ブースター */
.evo-eevee-tree .evo-box img {
  max-width: 150px !important;
  width: 100% !important;
}








/* ▼ ビンゴ部分 */


.bingo-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0; /* 隙間を完全削除 */
  width: 100% !important;
}

.bingo-label {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 2px 0;
}

.bingo-row {
  display: flex;
  align-items: stretch;
  gap: 0; /* 隙間削除 */
  width: 100%;
  position: relative;
}

.bingo-cell {
  flex: 1;
  min-height: 40px;
  background: #bfd6fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  word-break: break-word;
  padding: 2px;
  margin: 0;
  box-sizing: border-box;
}

.bingo-cell.clicked {
  background-color: #77b2ff !important;
}

.arrow.small {
  flex: 0 0 auto; /* サイズ固定 */
  width: 16px; /* 必要に応じ調整 */
  font-size: 12px !important;
  color: black;
  align-self: center;
  text-align: center;
  margin: 0; /* 余白削除 */
  padding: 0; /* 余白削除 */
  z-index: 10;
  position: relative;
}




/* ============================================================
  ▼ 特に強いポケモン特集（3匹）ページ用
============================================================ */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 10px 0;
}

.feature-card {
  border-radius: 12px;
  padding: 10px;
  background-color: #fdeed5;
}

.feature-header {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.feature-icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.feature-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feature-name {
  font-size: 1.15rem;
  font-weight: 800;
}


.feature-block {
  margin-top: 10px;
}

.feature-label {
  font-weight: 800;
  margin-bottom: 6px;
}

.feature-move {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.feature-move-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}



.feature-tm {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.feature-tm-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
}


.featurebingo-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2;
  width: 100% !important;
  margin-bottom: 10px;
}

.featurebingo-label {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 2px 0;
}

.featurebingo-row {
  display: flex;
  align-items: stretch;
  gap: 0; /* 隙間削除 */
  width: 100%;
  position: relative;
}


.featurebingo-cell {
  flex: 1;
  min-height: 40px;
  background: #bfd6fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  word-break: break-word;
  padding: 2px;
  margin: 2;
  box-sizing: border-box;
}

.topic-title {
  font-size: 1.2em;   /* 1.2倍 */
  font-weight: bold;  /* 太字 */
  padding: 10px 0px;
}



.text-attention {
  color: #d60000;              /* 赤文字 */
  font-weight: bold;           /* 少し太字 */
  text-decoration: underline;  /* 下線 */
}







/* =========================
  ▼ ステージ（3カラム：左でかアイコン / 中3行 / 右円グラフ）
========================= */

.stage-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px !important;   /* 14 → 16 にするだけ */
  padding: 10px 0;
}

.stage-card{
  border-radius: 12px;
  padding: 10px;
  background: #fdeed5;
}

/* 3カラム本体 */
.stage-body-3col{
  display: grid;
  grid-template-columns: 72px 1fr 92px; /* ← 左を広げる */
  gap: 8px;
  align-items: center;
}

/* 左：でかいアイコン（3行分の高さ相当） */
.stage-bigicon{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* 中：3行 */
.stage-mid{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 6px;
}

/* 1行 */
.stage-line{
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
  white-space: nowrap;
}

/* 1行目 */
.stage-main{
  font-size: 1.05rem;
  font-weight: 900;
}

/* ボーナス（既存の .type-fire などを流用） */
.stage-bonus{
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.8rem;
}

/* 数値 */
.k{
  font-size: 0.82rem;
  color: #666;
  font-weight: 800;
}
.v{
  font-size: 1.05rem;
  font-weight: 900;
  color: #111;
}

/* 右：円グラフ */
.stage-pie{
  width: 92px;
  height: 92px;
  display: block;
  background: #fff;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}



/* 左列：アイコン + ボーナス */
.stage-leftcol{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  /* 上に詰める */
  gap: 2px;                     /* ← 隙間は最小限（0〜2pxで調整可） */
}


/* アイコンは上寄せで小さめ */
.stage-bigicon{
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
}

/* ボーナスは4文字分の幅を確保（最大4文字想定） */
.stage-leftcol .stage-bonus{
  min-width: 4ch;        /* ← 4文字ぶん確保 */
  box-sizing: border-box;
  text-align: center;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 0.78rem;
  white-space: nowrap;   /* 改行させない */
  line-height: 1.1;
}


.stage-card{
  margin-bottom: 14px !important; /* feature-grid の gap と同じ */
}




/* ============================================================
  ▼ スイッチ
============================================================ */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #007bff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}


.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #007bff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}








/* ============================================================
  ▼ 汎用スタイル（背景・ボックスなど）
============================================================ */

body {
  background-color: #DBDBDB;
  background-repeat: repeat;
  background-size: auto;
}

.white-box {
  background-color: #707070;
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bg-yellow {
  background-color: #5572ae;
  padding: 0.2em 0.4em;
}



.dropdown {
  position: relative;
}

.dropdown::before {
  content: "";
  position: absolute;
  top: 98%;                /* ← 少し上から始める（隙間を防ぐ） */
  left: 0;
  width: 100%;
  height: calc(100% + 10em);  /* ← 少し長めに（下も確実に覆う） */
  background-color: #ababab;
  z-index: 499;
  display: none;
}

/* open 時だけ表示 */
.dropdown.open::before {
  display: block;
}













/* ========== 個体値ツール ========== */

.iv-tool {
  margin: 20px auto;
  padding: 16px;
  max-width: 650px;
  background: #fffaf0;
  border-radius: 14px;
  border: 1px solid #f2d5a5;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

/* タイトル */
.iv-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: bold;
  color: #d47b2c;
  text-align: center;
}

/* 各入力エリアの配置 */
.iv-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 行 */
.iv-row {
  width: 100%;
}

/* 2カラム行 */
.iv-row-2col {
  display: flex;
  gap: 12px;
}

.iv-row-2col > div {
  flex: 1;
}

/* ラベル */
.iv-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: bold;
  color: #6d4c41;
}

/* 入力フォーム */
.iv-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e0c9a8;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
}

.iv-input:focus {
  outline: none;
  border-color: #f4a742;
  box-shadow: 0 0 0 2px rgba(244,167,66,0.3);
}

/* ボタン周り */
.iv-actions {
  margin-top: 18px;
  text-align: center;
}

/* ボタン（div 型） */
.iv-button {
  display: inline-block;
  padding: 10px 28px !important;
  background: #f4a742 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer !important;
  transition: 0.2s;
  user-select: none;
}

.iv-button:hover {
  background: #e49328 !important;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .iv-row-2col {
    flex-direction: column;
  }
}