/**既存部分修正**/
	.cont_inner{ box-sizing: border-box; padding: 0 10px; margin: 0 0 50px 0;}


	main #right_column { margin-top: 80px;}
	@media screen and (min-width: 768px){
		#wrap { width:100%; max-width: 1220px;margin: 10px auto;}
		#container {width:100%; max-width: 1220px; box-sizing: border-box;}
		main #right_column {width: 100%;flex: 1;box-sizing: border-box;margin: 0 auto;}
		#pankuzu {padding: 0 15px;box-sizing: border-box; }
		.page-content { width: 100%; max-width: 920px; margin: 0 auto; padding: 15px 15px; box-sizing: border-box;}
	}

	.page-content {box-sizing: border-box;}
	.page-content h2.item_title,
	.page-content h3.item_title { font-size: 20px; background: #0202e5; color: #fff; padding: 0.6em 1em; font-weight: bold; margin: 0 0 15px 0; line-height: 1.3;}
	@media screen and (min-width: 768px){
		.page-content h2.item_title,
		.page-content h3.item_title { font-size: 23px; line-height: 1.6; margin-bottom: 20px;}
	}

	.rank_base{ border: solid 3px #00A0E9; border-radius: 14px; width: 100%; max-width: 920px; padding: 28px 18px; box-sizing: border-box; margin: 0 auto 30px auto; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06);}
	.rank_head{ margin-bottom: 18px;}
	.rank_head h1{ font-size: 22px; font-weight: bold; margin: 0 0 10px 0; line-height: 1.5;}
	.rank_update{ text-align: right; font-size: 13px; color: #666; margin: 0 0 10px 0;}

	.rank_toc{ background: #f4f7ff; border: solid 1px #c9d6ff; border-radius: 10px; padding: 14px 14px; margin: 14px 0 24px 0;}
	.rank_toc p{ margin: 0 0 8px 0; font-weight: bold; color: #0202e5;}
	.rank_toc ul{ margin: 0; padding-left: 1.2em;}
	.rank_toc li{ margin: 6px 0;}
	.rank_toc a{ color: #0202e5; text-decoration: underline;}

	.rank_section{ margin: 0 0 28px 0;}
	.rank_section h2{ font-weight: bold;margin: 0 0 12px 0;border-left: solid 5px #00a0e9;
	line-height: 1.4;background-color: #00a0e9;max-width: 500px;padding: 10px;border-radius: 10px;
    color: white; border-left: solid 5px #00A0E9; line-height: 1.4;}
	.rank_section h3{ font-size: 20px; font-weight: bold;margin: 25px 15px 15px 15px;line-height: 1.4;font-family: sans-serif;border-bottom: 2px solid #000;}
	.rank_section p{ margin: 0 0 10px 0; line-height: 1.9; color: #222;}

	.rank_list{ margin: 0 0 10px 0; padding-left: 1.2em; line-height: 1.9;}
	.rank_list li{ margin: 6px 0;}

	.rank_table_wrap{ overflow-x: auto; margin-top: 10px;}
	.rank_table{ width: 100%; border-collapse: collapse; max-width: 500px;margin:0 auto; font-family: sans-serif;}
	.rank_table th, .rank_table td{ border: solid 1px #ddd; padding: 10px 10px; vertical-align: middle; }
	.rank_table th{ background: #f7f7ff; font-weight: bold; }
	.rank_badge{ display: inline-block; padding: 3px 10px; border-radius: 999px; border: solid 1px #00A0E9; color: #00A0E9; font-weight: bold; font-size: 12px; background: #fff;}
	.rank_table .num{  }

	.case_box{ border: solid 1px #d7e6ff; border-radius: 12px; padding: 20px 14px 50px; margin: 50px 0; background: #fbfdff;}
	.case_box h4{ margin: 0 0 8px 0; font-size: 18px; font-weight: bold; color: #0202e5;}
	.case_box h5{ margin: 0 0 8px 0; font-size: 16px; font-weight: bold; color: #6161ddff;}
	.case_box .case_flow{ margin: 0; padding-left: 1.2em; line-height: 1.9;}
	.case_box .case_flow li{ margin: 20px 0;}
	.case_box .case_tip{ margin: 10px 0 0 0; padding: 10px 12px; background: #f4f7ff; border-radius: 10px; border: solid 1px #c9d6ff; color: #222; line-height: 1.8;}

	.attention_box{ border: solid 2px #00A0E9; border-radius: 12px; padding: 14px 14px; background: #f8fbff;}
	.attention_box ul{ margin: 0; padding-left: 1.2em; line-height: 1.9;}
	.attention_box li{ margin: 6px 0;}


  .rank_head h2{
  background: #00A0E9;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 18px 12px;
  border-radius: 10px;
  margin: 0 0 18px 0;
  line-height: 1.5;
}
tbody {
    text-align: center;
    font-size: 24px;
}


	@media screen and (max-width: 768px){
		.rank_base{ padding: 20px 14px; border-radius: 10px;}
		.rank_head h1{ font-size: 19px;}
		.rank_head h2{font-size: 19px;padding: 14px 10px;}
		.rank_section h3{ font-size: 18px;}
		.rank_table{ min-width: 560px;}
		.case_box .case_flow{padding:20px 0;}
	}

/* バナー（大枠説明） */
.rank_banner{ margin: 10px 0 14px 0; }
.rank_banner img{ width: 100%; height: auto; border-radius: 12px; display: block; }

/* スワイプ領域 */
.rank_swipe{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 12px 4px;
  margin: 0 -4px;
}
.rank_swipe_track{
  display: flex;
  gap: 12px;
  padding: 0 6px;
}

/* 1ランク=1カード（縦ゾーニング） */
.rank_card{
  scroll-snap-align: start;
  flex: 0 0 88%;
  max-width: 420px;
  background: #fff;
  border: solid 1px #d7e6ff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 14px 14px 12px 14px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px){
  .rank_card{ flex-basis: 46%; }
  .rank_swipe{ overflow: visible; }
  .rank_swipe_track{ flex-wrap: wrap; }
}

/* ヘッダーゾーン：エンブレム / ランク名 / 付与率 */
.rank_card_head{
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: solid 1px #eef4ff;
  margin-bottom: 10px;
}

.rank_emblem{
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
}
.rank_emblem img{
  max-width: 70px;
  object-fit: contain;
  display: block;
}

.rank_head_txt{ flex: 1; min-width: 0; }
.rank_name{ margin: 0; font-size: 17px; font-weight: bold; line-height: 1.2; }
.rank_sub{ margin: 4px 0 0 0; font-size: 13px; color: #555; line-height: 1.3; }

.rank_rate{
  text-align: right;
  flex: 0 0 auto;
}
.rank_rate_label{ margin: 0; font-size: 12px; color: #666; }
.rank_rate_val{ margin: 2px 0 0 0; font-size: 20px; font-weight: bold; color: #0202e5; }

/* 主要情報ゾーン：金額/タイミングなどを縦に整理 */
.rank_kv{ margin: 0; }
.rank_kv_row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: solid 1px #f1f5ff;
}
.rank_kv_row:first-child{ border-top: none; }
.rank_kv dt{ margin: 0; font-size: 13px; color: #444; }
.rank_kv dd{ margin: 0; font-size: 14px; font-weight: bold; color: #222; white-space: nowrap; }

/* ドット（簡易） */
.rank_dots{
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 6px 0;
}
.rank_dots .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d9e6ff;
}
.rank_dots .dot.is_active{ background: #00A0E9; }

/* ─────────────────────────────
   rank_swipe をスマホだけ表示
   （PC/タブレットは非表示）
───────────────────────────── */

/* デフォルト（PC側）：非表示 */
.rank_swipe,
.rank_dots{
  display: none;
}

/* スマホ（767px以下）のみ表示 */
@media screen and (max-width: 767px){
  .rank_swipe{ display: block; }
  .rank_dots{ display: flex; } /* 既存の flex 指定を活かす */
}

/* もし同じセクション内に「PC用テーブル」が残るなら、スマホ時だけ隠す */
@media screen and (max-width: 767px){
  .rank_table_wrap{ display: none; }
}

/* 逆に、PC用テーブルをPCで表示したい場合（必要なら） */
@media screen and (min-width: 768px){
  .rank_table_wrap{ display: block; }
}


/* ─────────────────────────────
   rank_table_wrap をタブレット以上で表示
   （768px以上で表示 / 767px以下は非表示）
───────────────────────────── */

/* デフォルト（スマホ側）：非表示 */
.rank_table_wrap{
  display: none;
}

/* タブレット以上：表示 */
@media screen and (min-width: 768px){
  .rank_table_wrap{
    display: block;
  }
}

/* もしスマホ用のスワイプカードを併設しているなら、
   タブレット以上はスワイプ側を非表示にする */
@media screen and (min-width: 768px){
  .rank_swipe,
  .rank_dots{
    display: none;
  }
}

/* 逆にスマホのみはスワイプを表示する場合（確認用） */
@media screen and (max-width: 767px){
  .rank_swipe{ display: block; }
  .rank_dots{ display: flex; }
}

/* テーブル内：エンブレム＋ランク名を中央寄せ */
.rank_table td .t-emblem{
  display: flex;
  flex-direction: column;
  align-items: center;   /* 横方向中央 */
  justify-content: center;
  gap: 6px;
  max-width: 125px;
  margin: 0 auto;
}

/* 画像も中央に */
.rank_table td .t-emblem img{
  display: block;


}


/* ==========================
   事例：ランク推移（視覚）
========================== */
.case_timeline{
  display: flex;
  align-items: normal;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 30px 0;
}

.rank_step{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: solid 1px #8f9fc4;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.rank_step_img{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
}

.rank_step_img img{
  max-width: 72px;
  height: auto;
  display: block;
}

.rank_step_name{
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
}

.rank_step_meta{
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #555;
  line-height: 1.2;
}

.rank_arrow{
  font-size: 18px;
  font-weight: bold;
  color: #00A0E9;
  display: flex;
  align-items: center;
}

.rank_arrow.is_note{
  font-size: 12px;
  font-weight: bold;
  color: #0202e5;
  background: #ffffff;
  border: solid 1px #c9d6ff;
  padding: 6px 10px;
  border-radius: 999px;
}

/* 状態（色で直感） */
.rank_step.is_up{ border-color: #00A0E9; }
.rank_step.is_keep{ border-color: #1d8fff; }
.rank_step.is_down{ border-color: #E4007F; }

/* ==========================
   事例：テキスト強調
========================== */
.case_flow_fix{
  margin-top: 8px;
}

.hl{
  background: linear-gradient(transparent 55%, #ffe07a 0%);
  padding: 0 3px;
}

.hl_money{
  background: linear-gradient(transparent 55%, #bfe4ff 0%);
  padding: 0 3px;
  font-weight: bold;
}

.hl_up{
  color: #00A0E9;
  font-weight: bold;
}

.hl_keep{
  color: #1d8fff;
  font-weight: bold;
}

.hl_down{
  color: #E4007F;
  font-weight: bold;
}

.hl_zero{
  color: #E4007F;
  font-weight: bold;
  background: linear-gradient(transparent 55%, #ffd1e6 0%);
  padding: 0 3px;
}

.hl_point{
  background: linear-gradient(transparent 55%, #ffd700 0%);
  padding: 0 3px;
  font-weight: bold;
}

.note_small{
  font-size: 12px;
  color: #666;
  margin-left: 4px;
}



/* SP：縦向きにして矢印を「↓」表示 */
@media screen and (max-width: 767px){

  /* タイムラインを縦並びに */
  .case_timeline{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* ステップは幅100%のまま */
  .rank_step{
    width: 100%;
  }

  /* いったん非表示にしていた矢印を表示に戻す */
  .rank_arrow{
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    padding: 4px 0;
  }

  /* 横矢印の文字をスマホだけ「↓」に差し替え */
  .rank_arrow{
    font-size: 0; /* 元の「→」を消す */
  }
  .rank_arrow::before{
    content: "↓";
    font-size: 20px;
    color: #00A0E9;
    font-weight: bold;
  }

  /* （翌年も維持）などの注釈は矢印と同じ列に自然に収める */
  .rank_arrow.is_note{
    display: inline-block;
    margin: 6px auto;
    font-size: 12px;       /* ここは文字なので 0 にしない */
    padding: 6px 10px;
  }
  .rank_arrow.is_note::before{
    content: "";           /* is_note は「↓」にしない */
    font-size: 0;
  }
}


/* 大きめ独自カラーのボタン */
.btn--custom.btn--xl {
  font-size: 1.3rem;
  padding: 1.1rem 2.8rem;
  border-radius: 10px;
  font-weight: bold;
  background-color: #fb8100;
  color: white; 
  border: 2px solid #FFD700;
  box-shadow: 0 6px 14px rgba(30, 58, 138, 0.4);
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
}

/* ホバー時 */
.btn--custom.btn--xl:hover {
  background-color: #153074; /* 濃くする */
  color: #FFF8DC; /* 文字を少し明るく */
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(30, 58, 138, 0.5);
}

/* クリック時 */
.btn--custom.btn--xl:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(30, 58, 138, 0.35);
}

/* 中央寄せ */
.btn-wrap--large {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
    .small { font-size: .92rem; color: #000000; }