/* =============================================================
   比較サイト部品CSS（parts.css）
   店舗ページ・エリアページ・TOPを自作するときに、
   このクラスを付けるだけで「それっぽい部品」になる。
   色やサイズは style.css の :root（デザイントークン）に連動。
   ============================================================= */

/* -------------------------------------------------------------
   ① ランキングカード
   使い方：
   <div class="ranking-card">
     <div class="ranking-badge is-1">1位</div>
     <div class="ranking-card-body">
       <h3 class="ranking-card-name">店舗名</h3>
       <div class="star-rating"><span class="star-rating-fill" style="width:90%">★★★★★</span>★★★★★</div>
       <p>紹介文…</p>
       <a class="btn btn-cta" href="#">公式サイトを見る</a>
     </div>
   </div>
   ------------------------------------------------------------- */
.ranking-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 24px;
  margin: 0 0 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.ranking-badge {
  position: absolute;
  top: -12px;
  left: 16px;
  padding: 3px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--accent); /* 4位以下は普通のアクセント色 */
}
.ranking-badge.is-1 { background: #c9a227; } /* 1位＝金 */
.ranking-badge.is-2 { background: #8e9aa5; } /* 2位＝銀 */
.ranking-badge.is-3 { background: #a06a3c; } /* 3位＝銅 */
.ranking-card-name { font-size: 20px; margin: 4px 0 8px; }
.ranking-card-name a { text-decoration: none; }

/* -------------------------------------------------------------
   ② 星評価（★5段階。中の style="width:◯%" で割合を調整）
      例：★4.5なら width:90%
   ------------------------------------------------------------- */
.star-rating {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  color: #d9dde2;            /* 下地＝グレーの星 */
  letter-spacing: 2px;
}
.star-rating-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f5a623;            /* 上に重ねる金色の星 */
}
.star-rating .rating-number { /* 星の横に「4.5」など数字を出したいとき */
  color: #f5a623;
  font-weight: 700;
  margin-left: 6px;
  letter-spacing: 0;
}

/* -------------------------------------------------------------
   ③ 比較表（スマホでは横スクロール）
   使い方：<div class="table-scroll"><table class="compare-table">…</table></div>
   ------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 0 0 1.6em; -webkit-overflow-scrolling: touch; }
.compare-table {
  width: 100%;
  min-width: 640px;          /* 狭い画面では横スクロールさせる */
  border-collapse: collapse;
  font-size: 14px;
  background: var(--bg);
}
.compare-table th, .compare-table td {
  border: 1px solid var(--border);
  padding: 12px 14px;
  text-align: center;
  vertical-align: middle;
}
.compare-table thead th {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.compare-table tbody th { background: var(--accent-pale); color: var(--accent); }
.compare-table .is-recommend { background: #fff8e6; } /* イチオシ列を目立たせる */

/* -------------------------------------------------------------
   ④ 料金表
   使い方：<table class="price-table">…</table>
   ------------------------------------------------------------- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0 0 1.6em;
}
.price-table th, .price-table td {
  border: 1px solid var(--border);
  padding: 12px 16px;
  text-align: left;
}
.price-table th { background: var(--accent-pale); color: var(--accent); width: 35%; }
.price-table .price { font-weight: 700; color: var(--accent); }

/* -------------------------------------------------------------
   ⑤ ボタン（CTA＝申込み/公式サイト用、LINE風）
   使い方：<a class="btn btn-cta" href="#">公式サイトを見る</a>
           <a class="btn btn-line" href="#">LINEで相談する</a>
   ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: .15s;
}
.btn:hover { opacity: .85; }
.btn-cta {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 0 var(--accent-dark);
}
.btn-line {
  background: #06c755;       /* LINEの緑 */
  color: #fff;
  box-shadow: 0 2px 0 #05a648;
}
.btn-block { display: block; } /* 横いっぱいに広げたいとき追加 */

/* -------------------------------------------------------------
   ⑥ 囲みボックス（補足＝note ／ 注意＝warn）
      背景色で見せる（線のアクセントは使わない）。入れ子は1段まで。
   ------------------------------------------------------------- */
.box-note, .box-warn {
  padding: 16px 20px;
  border-radius: var(--radius);
  margin: 0 0 1.6em;
  font-size: 15px;
}
.box-note { background: var(--accent-pale); }   /* 補足＝うすい青 */
.box-warn { background: #fdf6dd; }              /* 注意＝うすい黄 */
.box-note .box-title, .box-warn .box-title { font-weight: 700; display: block; margin-bottom: 4px; }
.box-note .box-title { color: var(--accent); }
.box-warn .box-title { color: #8a6d1a; }