.table-wrapper {
  overflow-x: auto;
  padding: 10px;
  -webkit-overflow-scrolling: touch; 
}

.comparison-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  table-layout: fixed;
}

.comparison-table th,
.comparison-table td {
  border: 1px solid #ccc;
  padding: 12px;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  font-size: clamp(12px, 1.6vw, 16px);
}

/* --- ヘッダー部（ネイビーに変更） --- */
.title-row th {
  background-color: #1A2B4C; 
  color: #fff;
  font-weight: bold;
  font-size: clamp(14px, 2vw, 20px);
}

/* --- 1位の列（枠線をゴールドにして特別感を演出） --- */
.comparison-table tr td:first-child {
  background-color: #fdfbf5; /* ほんの少しだけアイボリー */
  border: 2px solid #D4AF37; /* リッチゴールド */
  font-size: clamp(13px, 1.8vw, 18px); 
}

.comparison-table tr td:nth-child(2),
.comparison-table tr td:nth-child(3) {
  font-size: clamp(12px, 1.4vw, 15px);
}

.header-row td,
.btn-row td { border: none !important; }

.left-align td { text-align: left !important; padding-left: 14px; }
.odd { background-color: #ffffff; }

.plan-name { font-weight: bold; margin-top: 5px; font-size: clamp(13px, 1.8vw, 17px); color: #1A2B4C;}
.official-btn { width: 100px; height: auto; }
.crown-img { width: 30px; height: auto; }
.icon-img { width: 80px; height: auto; margin: 5px 0; }

.star-wrapper { display: inline-flex; align-items: center; max-width: 100%; overflow: hidden; white-space: nowrap; }
.star-score { font-size: clamp(11px, 1.4vw, 14px); margin-left: 4px; white-space: nowrap; }
.star-vertical { display: flex; flex-direction: column; align-items: center; }
.star-vertical .star-line { white-space: nowrap; }
.star-vertical .score-line { font-size: clamp(11px, 1.4vw, 14px); margin-top: 4px; }
.star-icon { width: 20px; height: auto; margin: 0 1px; }

.only-pc { display: block; }
.only-sp { display: none; }

@media screen and (max-width: 768px) {
  .comparison-table { font-size: clamp(11px, 1.5vw, 13px); }
  .star-icon { width: 14px; }
}

/* --- 3カラム表用のオレンジボタン --- */
.orange-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #ff7b00, #ff5500);
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
  font-size: clamp(11px, 1.4vw, 13px);
  padding: 8px 4px;
  border-radius: 10px; 
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  width: 100%;
  box-sizing: border-box;
  margin: 5px auto;
  transition: transform 0.2s;
}
.orange-table-btn:hover { transform: translateY(-2px); }
.orange-table-btn i { margin-right: 4px; }
.r18-mark-small {
  background: #fff; color: #ff3333; font-size: clamp(9px, 1.1vw, 10px);
  padding: 2px 4px; border-radius: 3px; margin-left: 4px; font-weight: bold;
}


/* ===================================================
   テーブル内の画像巨大化・はみ出し防止リセット
=================================================== */
/* 親の rank.css の width:100% を強制ブロック */
.comparison-table img.crown-img {
    width: 28px !important;
    max-width: 28px !important;
    height: auto !important;
    margin: 0 auto;
    display: inline-block;
}

.comparison-table img.icon-img {
    width: 65px !important; /* スマホで3列収まる最適なサイズ */
    max-width: 100% !important;
    height: auto !important;
    margin: 5px auto !important;
    border-radius: 12px;
}

/* テーブルがスマホ画面からはみ出さないように調整 */
.comparison-table {
    min-width: 100% !important; /* 過去の固定幅(500px等)を解除 */
    width: 100% !important;
    table-layout: fixed;
}

.comparison-table td, 
.comparison-table th {
    padding: 6px 4px !important; /* スマホで3列収めるために余白を最適化 */
    word-break: break-all;
}