/* ── 比較・ランキングページ専用CSS ── */

/* ── フィルターチップ ── */
.chip-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 20px 6px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .72rem;
  cursor: pointer;
  background: var(--surface);
  color: var(--fg);
  transition: all .12s;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

/* ── 並び替えコントロール ── */
.ctrl {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ctrl-lbl {
  font-size: .72rem;
  color: var(--fg);
  font-weight: 700;
}
.sort-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: .7rem;
  cursor: pointer;
  background: var(--surface);
  color: var(--fg);
  transition: all .12s;
}
.sort-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.sort-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.count {
  font-size: .72rem;
  color: var(--fg);
  margin-left: auto;
}

/* ── ボタン ── */
.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 3px;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .13s;
  white-space: nowrap;
  line-height: 1.4;
}
.btn-a {
  background: var(--accent);
  color: var(--bg);
  border: 2px solid var(--accent);
}
.btn-a:hover {
  opacity: .8;
  color: var(--bg);
  text-decoration: none;
}
.btn-d {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
}
.btn-d:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* ── テーブルセクション ── */
.tbl-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 20px;
}
.swipe-bar {
  background: var(--hover);
  padding: 6px 12px;
  font-size: .7rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 3px;
  margin-bottom: 6px;
  transition: opacity .3s;
}
.swipe-arr {
  font-size: .9rem;
}
/* テーブル直前の取得日注記（2026-08-22 追加）
   料金・口コミ件数は動くので、いつ時点の値かを必ず書く */
.tbl-note {
  max-width: 860px;
  margin: 0 auto 6px;
  padding: 0 20px;
  font-size: .7rem;
  color: var(--muted, #777);
  line-height: 1.6;
}

.tbl-outer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl-outer table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.tbl-outer th,
.tbl-outer td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.tbl-outer thead th {
  background: var(--hover);
  font-weight: 700;
  font-size: .72rem;
  white-space: nowrap;
  color: var(--fg);
}
.tbl-outer tbody tr:hover {
  background: var(--hover);
}
.tbl-outer tbody tr {
  cursor: default;
}

/* テーブル列幅 */
.c-name { min-width: 100px; }
.c-tags { min-width: 100px; }
.c-sp   { min-width: 180px; font-size: .72rem; }
.c-price{ min-width: 80px;  white-space: nowrap; }
.c-rev  { min-width: 90px; }
.c-btn  { min-width: 130px; white-space: nowrap; }
.c-svc  { min-width: 132px; }

/* ── サービス名セル内のボタン（2026-08-22 右端列から移動）──
   スマホで横スクロールせずに押せるよう、サービス名の直下に縦積みで置く。
   従来の .c-btn 列は denwa-uranai から削除済み。
   .c-btn 自体は他ページが使う可能性があるため定義は残している。 */
.svc-btns { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
/* ── 先生名セル内のボタン（2026-08-22 サービス記事も右端列から移動）──
   文言は「口コミへ」(btn-d/自サイトの先生記事) と
         「プロフィールへ」(btn-a/公式プロフィール) で統一する。 */
.t-btns { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.t-btns .btn { width: 100%; padding: 6px 8px; font-size: .72rem; }
.svc-btns .btn { width: 100%; padding: 6px 8px; font-size: .72rem; }
.c-tchr { min-width: 100px; }
.c-bonus{ min-width: 120px; }
.c-badge{ min-width: 80px; }

/* JSで生成されるセル内要素 */
.t-nm   { font-weight: 700; margin-bottom: 2px; }
.t-kana { font-size: .65rem; color: var(--fg); }
.price-n { font-weight: 700; }
.price-u { font-size: .72rem; color: var(--fg); }
.rev-star { color: var(--accent); font-weight: 700; }
.rev-cnt  { font-size: .72rem; color: var(--fg); }

/* タグ（テーブル内） */
.tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: .62rem;
  font-weight: 700;
  margin: 1px 1px 1px 0;
  border: 1px solid currentColor;
}
.tag-fukuen   { color: #b44; }
.tag-twinray  { color: #48b; }
.tag-furin    { color: #855; }
.tag-enmusubi { color: #585; }
.tag-kekkon   { color: #a83; }
.tag-shigoto  { color: #876; }
.tag-katamoi  { color: #d88; }
.tag-kimochi  { color: #68a; }
.tag-kazoku   { color: #678; }
.tag-kinen    { color: #a97; }
.tag-uwaki    { color: #866; }
.tag-ryakudatsu{ color: #858; }
.tag-rikon    { color: #868; }

/* ── 口コミ一覧 ── */
.revlist-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px;
}
.revlist-h2 {
  font-size: 1.05rem;
  font-weight: 800;
  padding: .5em .8em;
  background: var(--hover);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  margin-bottom: 12px;
  line-height: 1.4;
}
.revlist-desc {
  font-size: .82rem;
  color: var(--fg);
  margin-bottom: 16px;
  line-height: 1.75;
}
.revlist-more-btn {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 14px auto 0;
  padding: 9px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: transparent;
  color: var(--accent);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all .13s;
}
.revlist-more-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

/* JSで生成される口コミカード */
.review-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--surface);
}
.rev-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.rev-text {
  font-size: .85rem;
  line-height: 1.75;
  margin-bottom: 4px;
}
.rev-date {
  font-size: .68rem;
  color: var(--fg);
}

/* ── コンテンツ展開セクション ── */
.content-section {
  max-width: 860px;
  margin: 20px auto 0;
  padding: 0 20px;
}
.sec-head {
  font-size: 1.05rem;
  font-weight: 800;
  padding: .5em .8em;
  background: var(--hover);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  margin-bottom: 0;
  line-height: 1.4;
}
.content-body-wrap {
  position: relative;
  overflow: hidden;
}
.content-body {
  max-height: 260px;
  overflow: hidden;
  transition: max-height .4s ease;
}
.content-body.open {
  max-height: none;
  overflow: visible;
}

/* 展開コンテンツ内の記事スタイル */
.article {
  padding: 20px 0;
  font-size: .88rem;
  line-height: 1.85;
}
.article p { margin-bottom: .9em; }
.article h2 {
  font-size: 1.05rem; font-weight: 800;
  margin: 1.8em 0 .7em;
  padding: .5em .8em;
  background: var(--hover); border-left: 3px solid var(--accent);
  border-radius: 2px; line-height: 1.4;
}
.article h3 {
  font-size: .95rem; font-weight: 700;
  margin: 1.4em 0 .5em;
  padding-bottom: .3em; border-bottom: 1px solid var(--border);
}
.article ul, .article ol { padding-left: 1.4em; margin-bottom: 1em; }
.article li { margin-bottom: .4em; }
.article blockquote {
  border-left: 3px solid var(--accent); padding: .6em 1em; margin: 1em 0;
  background: var(--hover); font-size: .88em;
}
.article blockquote cite { display: block; font-size: .72rem; margin-top: .4em; color: var(--fg); }
.article strong { font-weight: 700; }
.article dl { margin-bottom: 1em; }
.article dt { font-weight: 700; margin-top: 1em; }
.article dd { padding-left: 1em; margin-bottom: .5em; }
.article table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.article table th,
.article table td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  font-size: .8rem;
  text-align: left;
  vertical-align: top;
}
.article table thead th {
  background: var(--hover);
  font-weight: 700;
}
.cta-inline {
  display: block;
  text-align: center;
  padding: 12px;
  background: var(--hover);
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-weight: 700;
  font-size: .88rem;
  margin: 20px 0;
  text-decoration: none;
}
.cta-inline:hover { background: var(--accent); color: var(--bg); text-decoration: none; }
.pexels-fig { margin: 20px 0; }
.pexels-fig img { width: 100%; max-width: 800px; height: auto; display: block; margin: 0 auto; border-radius: 4px; }

.content-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}
.content-fade.gone, .more-wrap.gone { display: none; }
.more-wrap {
  text-align: center;
  padding: 14px 20px 20px;
  max-width: 860px;
  margin: 0 auto;
}
.more-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 9px 24px;
  border-radius: 3px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .13s;
}
.more-btn:hover { background: var(--accent); color: var(--bg); }

/* ── 記事一覧 ── */
.art-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}
.art-sec-title {
  font-size: 1.05rem;
  font-weight: 800;
  padding: .5em .8em;
  border-left: 4px solid var(--accent);
  margin-bottom: 16px;
  line-height: 1.4;
}
.art-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.art-list li { display: block; }
.al-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg);
  transition: color .12s;
}
.al-link:hover { text-decoration: none; }
.al-link:hover .al-title { color: var(--accent); }
.al-tag {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 7px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-size: .6rem;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
  margin-top: 3px;
}
.al-body {
  flex: 1;
  min-width: 0;
}
.al-title {
  font-size: .85rem;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.5;
  transition: color .12s;
}

/* ── レスポンシブ ── */
@media(max-width:600px) {
  .ctrl { gap: 6px; }
  .sort-btn { font-size: .65rem; padding: 3px 7px; }
  .c-sp { min-width: 140px; }
  .c-svc { min-width: 118px; }
  .svc-btns { gap: 4px; margin-top: 6px; }
  .svc-btns .btn { padding: 5px 6px; font-size: .68rem; }
  .t-btns { gap: 4px; margin-top: 6px; }
  .t-btns .btn { padding: 5px 6px; font-size: .68rem; }
  .c-name { min-width: 118px; }
}

/* ══════════════════════════════════════════
   以下 2026-08-15 追加：JS動的生成部分のスタイル
   （口コミカード・比較表の中身・記事内比較表）
   ══════════════════════════════════════════ */

/* ── 口コミカード（Supabaseから動的生成）── */
.rv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 12px 14px; margin-bottom: 10px; }
.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; font-size: .74rem; }
.rv-svc { color: var(--accent); font-weight: 700; text-decoration: none; }
.rv-svc:hover { text-decoration: underline; }
.rv-teacher, .rv-teacher-nm { font-weight: 700; color: var(--fg); text-decoration: none; }
a.rv-teacher:hover, a.rv-teacher-nm:hover { color: var(--accent); text-decoration: underline; }

/* ── 口コミカードの導線（2026-08-22 追加）──
   「押せると分からない」という指摘への対応。
   色だけだとモバイルで気づかれないため、リンクの場合は常時下線を出す。
   span（内部記事が無い先生）には下線を付けない＝押せないことが見た目で分かる。 */
a.rv-teacher, a.rv-teacher-nm { text-decoration: underline; text-underline-offset: 2px; }
span.rv-teacher, span.rv-teacher-nm { text-decoration: none; cursor: default; }

/* 名前リンクを見落としても拾えるカード下部の導線。行全体をタップ領域にする */
.rv-more { display: block; margin-top: 10px; padding: 8px 0; font-size: .78rem;
           font-weight: 700; color: var(--accent); text-decoration: underline;
           text-underline-offset: 2px; }
.rv-more:hover { opacity: .75; color: var(--accent); }
.rv-stars { color: var(--accent); letter-spacing: .05em; }
.rv-date { color: #888; font-size: .68rem; margin-left: auto; }
.rv-body { font-size: .82rem; line-height: 1.8; color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.rv-del { border: 1px solid var(--border); background: transparent; color: #888; font-size: .64rem; padding: 2px 6px; border-radius: 2px; cursor: pointer; }
.rv-del:hover { border-color: #c66; color: #c66; }
.revlist-empty { font-size: .82rem; color: #888; text-align: center; padding: 20px 0; }

/* ── 比較表の中身（JSでtbodyに描画）── */
.svc-nm { font-weight: 700; font-size: .84rem; line-height: 1.4; }
.svc-sub { font-size: .68rem; color: #777; margin-top: 2px; }
.tchr-nm { font-weight: 700; font-size: .8rem; line-height: 1.4; }
.tchr-sp { font-size: .66rem; color: #777; line-height: 1.5; margin-top: 2px; }
.tchr-hint { font-size: .68rem; color: #999; }
.bonus { display: inline-block; font-size: .72rem; font-weight: 700; color: #b4453a; background: #fdf0ee; border: 1px solid #f0d5d0; border-radius: 2px; padding: 2px 6px; line-height: 1.4; }
.bdg { display: inline-block; font-size: .62rem; font-weight: 700; border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px; margin: 1px 2px 1px 0; white-space: nowrap; }
.bdg-c { color: #3a7a5a; }
.bdg-a { color: #3a6a9a; }
.bdg-k { color: #8a5a2a; }

/* ── 記事本文内の比較表 ── */
.cmp-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.cmp-table td, .cmp-table th { padding: 8px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; line-height: 1.6; }
.cmp-table thead td, .cmp-table thead th { background: var(--hover); font-weight: 700; white-space: nowrap; }
.cmp-table tbody tr:hover { background: var(--hover); }

/* ── 不足していたタグ色 ── */
.tag-enkiri { color: #777; }
.tag-hikiyose { color: #5a8; }
.tag-musubi { color: #585; }

/* ------------------------------------------------------------
   ページ見出し（2026-08-23 追加）
   ピラー・INDEX・比較ページには h1 が無かった。
   記事ページは .art-title を使うが、こちらは別テンプレートで
   最初から h1 が置かれていなかった。
   ★title と同じ文字列を入れないこと。title は31字前後の制約があるが
     h1 には無い。h1 のほうが自然な日本語で書ける。
   ------------------------------------------------------------ */
.page-h1{
  /* compare.css には main の定義が無く、各セクションが個別に中央寄せしている。
     ここに max-width と padding を書かないと、h1 だけ画面左端に張り付く。
     ★portal.css 側は main が効いているので、あちらには書かないこと。 */
  max-width:860px;
  margin:4px auto 16px;
  padding:0 20px;
  font-size:1.25rem;
  font-weight:800;
  line-height:1.5;
  letter-spacing:-.01em;
}
@media (max-width:600px){ .page-h1{ font-size:1.08rem } }

/* 運営会社の表示（2026-08-28）
   ★読者は20社を比べているつもりでも、運営元は17。
     同じ会社が複数サービスを出している事実を隠さないための表示。
   色は common.css の既存トークンを使う。独自色を足すとダークモードで崩れる。 */
.svc-co { font-size: 11px; color: var(--fg-888); line-height: 1.45; margin: 2px 0 5px; }
.svc-g  { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 3px;
          background: var(--hover); color: var(--fg-666);
          border: 1px solid var(--border); font-size: 10px; white-space: nowrap; }
.grp-note { margin: 16px 0 0; padding: 13px 15px; border-left: 3px solid var(--border);
            background: var(--surface); border-radius: 0 4px 4px 0;
            font-size: 13px; line-height: 1.9; color: var(--fg-333); }
.grp-note p { margin: 0 0 9px; }
.grp-note p:last-child { margin-bottom: 0; }
.grp-note .grp-h { font-weight: 700; color: var(--fg-111); }