/* renai-navi の記事UI
 *
 * 参考にしたのは「判断材料を数値で並べて、読者が自分で決められるようにする」という
 * 情報設計のほう。CSSは持ってきていない（他所のコードをコピーすると権利の問題になる）。
 *
 * WordPressのテーマと衝突しないよう、クラスはすべて rio- で始める。
 * 色はカスタムプロパティにまとめてあるので、ここだけ変えれば全体が変わる。
 */

:root {
  --rio-ink: #252525;          /* 本文。真っ黒より少し薄いほうが読みやすい */
  --rio-sub: #6b7280;
  --rio-line: #e5e9f0;
  --rio-bg: #eef4f8;           /* ページの地。カードを浮かせるための薄い色 */
  --rio-card: #ffffff;
  --rio-key: #c2185b;          /* 恋愛向けの主色。見出しと数値の強調に使う */
  --rio-key-d: #8e0038;
  --rio-cta: #e0457b;          /* 押させる色。主色より明るくして目を引かせる */
  --rio-cta-d: #c2185b;
  --rio-good: #1b8f5a;
  --rio-warn: #b45309;
  --rio-radius: 14px;
  --rio-shadow: 0 2px 14px rgba(31, 45, 61, .08);
}

/* ---- 広告表示。景表法で要る。目立たないが確実に読める位置と大きさにする ---- */
.rio-pr {
  font-size: .82rem; color: var(--rio-sub);
  background: #f7f8fa; border: 1px solid var(--rio-line);
  border-radius: 8px; padding: 8px 12px; margin: 0 0 14px;
}
.rio-asof { font-size: .82rem; color: var(--rio-sub); margin: 0 0 18px; }

/* ---- 冒頭の情報カード。数値を一目で見せる ---- */
.rio-card {
  background: var(--rio-card); border-radius: var(--rio-radius);
  box-shadow: var(--rio-shadow); padding: 26px 22px; margin: 0 0 22px;
}
.rio-card__name { font-size: 1.18rem; font-weight: 800; text-align: center; margin: 0 0 4px; }
.rio-card__logo { display: block; max-width: 168px; margin: 14px auto 10px; }

.rio-score { text-align: center; margin: 10px 0 18px; }
.rio-score__stars { color: #f5a623; font-size: 1.25rem; letter-spacing: 2px; }
.rio-score__num { font-weight: 800; margin-left: 6px; }
.rio-score__count { display: block; font-size: .84rem; color: var(--rio-sub); margin-top: 2px; }

/* 項目名と値。項目名を右寄せにすると、値の頭が揃って読みやすい */
.rio-spec { display: grid; grid-template-columns: max-content 1fr; gap: 9px 14px; margin: 0; }
.rio-spec dt { text-align: right; font-weight: 700; color: var(--rio-key); font-size: .92rem; }
.rio-spec dd { margin: 0; font-size: .95rem; }

/* ---- CTA ---- */
.rio-cta {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--rio-cta); color: #fff !important;
  text-align: center; font-weight: 800; font-size: 1.02rem;
  padding: 15px 18px; border-radius: 10px; text-decoration: none !important;
  box-shadow: 0 2px 0 var(--rio-cta-d); margin: 16px 0 0;
}
.rio-cta:hover { background: var(--rio-cta-d); box-shadow: 0 1px 0 var(--rio-cta-d); }
.rio-cta--ghost {
  background: #fff; color: var(--rio-cta) !important;
  border: 2px solid var(--rio-cta); box-shadow: none;
}

/* 追従バー。スマホだけ。記事が長いので、決めた瞬間に押せる場所が要る */
.rio-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--rio-line);
  padding: 10px 14px; box-shadow: 0 -2px 12px rgba(31, 45, 61, .1);
}
.rio-sticky .rio-cta { margin: 0; padding: 13px; font-size: .98rem; }
@media (min-width: 768px) { .rio-sticky { display: none; } }

/* ---- 比較表。横に長いので枠内でスクロールさせる。ページ本体は動かさない ---- */
.rio-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px; }
.rio-table table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .92rem; }
.rio-table th, .rio-table td { border: 1px solid var(--rio-line); padding: 10px 12px; text-align: left; }
.rio-table thead th { background: var(--rio-key); color: #fff; font-weight: 700; white-space: nowrap; }
.rio-table tbody tr:nth-child(even) { background: #fafbfd; }
.rio-table td.rio-num { text-align: right; font-variant-numeric: tabular-nums; }
/* 1列目は横スクロール中も残す。何の行か分からなくなるのを防ぐ */
.rio-table th:first-child, .rio-table td:first-child {
  position: sticky; left: 0; background: inherit;
}
.rio-table thead th:first-child { background: var(--rio-key); }

/* ---- 良い点・気になる点。片方だけ書くと信用されない ---- */
.rio-pros, .rio-cons { border-radius: 10px; padding: 16px 18px; margin: 0 0 14px; }
.rio-pros { background: #f0f9f4; border-left: 5px solid var(--rio-good); }
.rio-cons { background: #fff8f0; border-left: 5px solid var(--rio-warn); }
.rio-pros h4, .rio-cons h4 { margin: 0 0 8px; font-size: 1rem; }
.rio-pros h4 { color: var(--rio-good); }
.rio-cons h4 { color: var(--rio-warn); }
.rio-pros ul, .rio-cons ul { margin: 0; padding-left: 1.15em; }
.rio-pros li, .rio-cons li { margin: 5px 0; }

/* ---- 向いていない人。先に外す ---- */
.rio-notfor {
  background: #f7f8fa; border: 1px dashed var(--rio-line);
  border-radius: 10px; padding: 16px 18px; margin: 0 0 20px;
}
.rio-notfor h4 { margin: 0 0 8px; font-size: 1rem; color: var(--rio-sub); }

/* ---- よくある質問 ---- */
.rio-faq { border-top: 1px solid var(--rio-line); }
.rio-faq details { border-bottom: 1px solid var(--rio-line); padding: 13px 2px; }
.rio-faq summary { cursor: pointer; font-weight: 700; list-style: none; padding-right: 22px; position: relative; }
.rio-faq summary::-webkit-details-marker { display: none; }
.rio-faq summary::after { content: "＋"; position: absolute; right: 2px; color: var(--rio-key); }
.rio-faq details[open] summary::after { content: "−"; }
.rio-faq p { margin: 10px 0 2px; color: #3f4551; }

/* ---- 診断への入り口 ---- */
.rio-entry { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 22px; }
@media (min-width: 640px) { .rio-entry { grid-template-columns: 1fr 1fr; } }
.rio-entry a {
  display: block; background: var(--rio-card); border: 1px solid var(--rio-line);
  border-radius: 12px; padding: 16px 18px; text-decoration: none !important;
  color: var(--rio-ink) !important; box-shadow: var(--rio-shadow);
}
.rio-entry a:hover { border-color: var(--rio-key); }
.rio-entry b { display: block; color: var(--rio-key); margin-bottom: 4px; }
.rio-entry span { font-size: .88rem; color: var(--rio-sub); line-height: 1.7; }

/* ---- レーダー。軸の根拠がある数値だけを入れる ---- */
.rio-radar { display: block; max-width: 320px; margin: 18px auto 6px; }
.rio-radar__note { font-size: .78rem; color: var(--rio-sub); text-align: center; margin: 0 0 4px; }

/* 本文の読みやすさ。行間は詰めすぎない */
.rio-body { line-height: 1.95; color: var(--rio-ink); }
.rio-body h2 {
  font-size: 1.24rem; font-weight: 800; margin: 2.2em 0 .8em;
  padding: 12px 0 12px 15px; border-left: 5px solid var(--rio-key);
  background: linear-gradient(90deg, #fdf2f6 0%, rgba(253, 242, 246, 0) 100%);
}
.rio-body h3 {
  font-size: 1.08rem; font-weight: 700; margin: 1.9em 0 .6em;
  padding-bottom: 7px; border-bottom: 2px solid var(--rio-line);
}


/* ---- ヘッダ・フッタ・本文の器 ---- */
.rio-head { background:#fff; border-bottom:1px solid var(--rio-line); padding:12px 16px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.rio-head__logo { font-weight:900; font-size:1.1rem; color:var(--rio-key)!important;
  text-decoration:none!important; }
.rio-head__nav { display:flex; gap:14px; flex-wrap:wrap; }
.rio-head__nav a { font-size:.9rem; color:var(--rio-ink)!important; text-decoration:none!important; }
.rio-head__nav a:hover { color:var(--rio-key)!important; }
.rio-wrap { max-width:760px; margin:0 auto; padding:22px 16px 96px; }
.rio-foot { background:#fff; border-top:1px solid var(--rio-line); padding:22px 16px 90px;
  text-align:center; font-size:.86rem; }
.rio-foot a { color:var(--rio-ink)!important; }
.rio-foot__c { color:var(--rio-sub); margin:8px 0 0; }
body { margin:0; background:var(--rio-bg);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif; }
h1 { font-size:1.36rem; line-height:1.6; margin:0 0 16px; }

.rio-updated { margin-top:2.4em; padding-top:12px; border-top:1px solid var(--rio-line); }


/* ---- 日本語の折り返し ----
 * 既定では文字単位で折り返すので、「メール」が「メ／ール」に切れ、行頭に「ー」が来る。
 * 「お問い合／わせ」のように語の途中でも切れる。実測で24件出た。
 *
 *   line-break: strict     行頭に来てはいけない文字（ー ゃ 、 。 ）を止める
 *   word-break: auto-phrase 日本語を**文節**で折り返す。助詞だけが行頭に落ちるのも減る
 *   text-wrap: pretty      最終行が1〜2文字だけ残るのを避ける
 *   text-wrap: balance     見出しの行の長さを揃える
 *
 * auto-phrase / pretty は対応していないブラウザでは無視されるだけで、
 * 従来と同じ折り返しに戻る。壊れない。
 */
html {
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: break-word;   /* 長いURLだけは枠内で折る */
}
p, li, dd, dt, td, th, figcaption, summary, .rio-entry span {
  text-wrap: pretty;
}
h1, h2, h3, h4, .rio-cta, .rio-card__name, .rio-entry b {
  text-wrap: balance;
}
/* 表の中は狭いので、語の途中で切らせない */
.rio-table th, .rio-table td { word-break: keep-all; }
/* リンクの文字が途中で切れると読み違える */
a { word-break: auto-phrase; }


/* ---- 運営者情報などの表 ----
 * 比較表(.rio-table)は横に長いので枠内スクロールにしているが、
 * 運営者情報にそれを使うと**メールアドレスが切れて読めなくなる**（実際に切れた）。
 * こちらは幅を広げず、値のほうを折り返す。
 */
.rio-info table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rio-info th, .rio-info td { border: 1px solid var(--rio-line); padding: 10px 12px; text-align: left; }
.rio-info th { background: #f7f8fa; width: 6.5em; font-weight: 700; white-space: nowrap; }
/* メールやURLは、枠に入らないときだけ語の途中で折る。
 * **word-break:break-all を書くと日本語まで1文字ずつ折れる。**
 * overflow-wrap:anywhere だけにして、日本語は html の auto-phrase に任せる */
.rio-info td { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .rio-info th { width: 5.5em; font-size: .88rem; }
}


/* ---- 診断 ---- */
.rio-shindan { background:var(--rio-card); border-radius:var(--rio-radius);
  box-shadow:var(--rio-shadow); padding:24px 20px; margin:0 0 24px; }
.rio-q__head { display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.rio-q__no { font-size:.84rem; color:var(--rio-sub); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.rio-q__bar { flex:1; height:6px; background:var(--rio-line); border-radius:3px; overflow:hidden; }
.rio-q__fill { height:100%; background:var(--rio-key); transition:width .25s; }
.rio-q__text { font-size:1.06rem; font-weight:700; margin:0 0 18px; text-wrap:balance; }
.rio-q__choice { display:block; width:100%; box-sizing:border-box; text-align:left;
  background:#fff; border:2px solid var(--rio-line); border-radius:12px;
  padding:15px 17px; margin:0 0 11px; font-size:.98rem; line-height:1.7;
  cursor:pointer; color:var(--rio-ink); font-family:inherit;
  word-break:auto-phrase; }
.rio-q__choice:hover { border-color:var(--rio-key); background:#fff8fb; }
.rio-q__back { background:none; border:none; color:var(--rio-sub);
  font-size:.88rem; cursor:pointer; padding:8px 0; font-family:inherit; }
.rio-q__back:hover { color:var(--rio-key); }

.rio-res__lead { font-size:.86rem; color:var(--rio-sub); text-align:center; margin:0; }
.rio-res__type { font-size:2.1rem; font-weight:900; text-align:center;
  color:var(--rio-key); letter-spacing:.08em; margin:2px 0 20px; }
.rio-res__axes, .rio-res__clash { list-style:none; padding:0; margin:0 0 18px; }
.rio-res__axes li, .rio-res__clash li { border-top:1px solid var(--rio-line); padding:13px 0; }
.rio-res__axes b, .rio-res__clash b { color:var(--rio-key); display:block; margin-bottom:5px; }
.rio-res__axes p, .rio-res__clash p { margin:0; font-size:.94rem; line-height:1.85; }
.rio-res__even { font-size:.82rem; color:var(--rio-sub); margin-left:6px; }
.rio-res__note { font-size:.88rem; color:var(--rio-sub); margin:0 0 10px; }


/* ---- 横スクロールする表に「まだ先がある」ことを見せる ----
 * スマホで表が枠に収まらないとき、**列があること自体に気づけない。**
 * 実際に「仲人型」の列が見えないまま読まれる状態だった。
 * 端の影で続きがあることを示し、スクロールすると影が消える。
 */
.rio-table {
  background:
    linear-gradient(to right, var(--rio-bg) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--rio-bg) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(31,45,61,.16), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(31,45,61,.16), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
.rio-table__hint {
  font-size: .8rem; color: var(--rio-sub); margin: -14px 0 18px; text-align: right;
}
.rio-table__hint::before { content: "← → "; }


/* ---- 相性チェック ---- */
.rio-ai__form { display:grid; gap:12px; grid-template-columns:1fr; margin:0 0 18px; }
@media (min-width:520px){ .rio-ai__form{ grid-template-columns:1fr 1fr; } }
.rio-ai__pick label { display:block; font-size:.86rem; color:var(--rio-sub); margin:0 0 5px; }
.rio-ai__sel { width:100%; box-sizing:border-box; padding:12px 14px; font-size:1rem;
  border:2px solid var(--rio-line); border-radius:10px; background:#fff;
  font-family:inherit; color:var(--rio-ink); }
.rio-ai__sel:focus { border-color:var(--rio-key); outline:none; }
.rio-ai__lead { font-size:1.05rem; font-weight:700; margin:0 0 6px; }
.rio-ai__note { font-size:.88rem; color:var(--rio-sub); margin:0 0 16px; }
.rio-ai__hint { font-size:.86rem; color:var(--rio-sub); margin:14px 0 0; }
.rio-ai__list { list-style:none; padding:0; margin:0 0 18px; }
.rio-ai__list li { border-top:1px solid var(--rio-line); padding:13px 0; }
.rio-ai__list b { display:block; color:var(--rio-key); margin-bottom:5px; }
.rio-ai__list p { margin:0 0 6px; font-size:.94rem; line-height:1.85; }
.rio-ai__sub { font-size:.88rem; color:var(--rio-sub); }


/* ---- 順位表 ----
 * 順位は「金額の軸」にしか付けない。数値が根拠なので、根拠の内訳を同じセルに出す。
 * 内訳が別の場所にあると、読者は順位を確かめられない。
 */
.rio-table--rank table { min-width: 680px; }
.rio-table--rank td.rio-rank {
  width: 3.2em; text-align: center; font-weight: 900; font-size: 1.15rem;
  color: var(--rio-key); font-variant-numeric: tabular-nums;
}
.rio-table--rank tbody tr:nth-child(1) td.rio-rank,
.rio-table--rank tbody tr:nth-child(2) td.rio-rank,
.rio-table--rank tbody tr:nth-child(3) td.rio-rank { color: #fff; background: var(--rio-key); }
.rio-plan { color: var(--rio-sub); font-size: .84rem; }
/* 内訳。折り返しても読めるよう、記号の前後で切れてよい幅にする */
.rio-breakdown {
  display: block; margin-top: 4px; color: var(--rio-sub);
  font-size: .78rem; font-weight: 400; line-height: 1.5; text-align: right;
}

/* ---- 出典 ----
 * 数値を出したら、どこから取ったかと、いつ取ったかを必ず添える。
 * 料金は変わるので、取得日の無い金額は読者にとって確かめようがない。
 */
.rio-src {
  background: #f7f8fa; border: 1px solid var(--rio-line); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 20px; font-size: .84rem;
}
.rio-src h4 { margin: 0 0 6px; font-size: .9rem; color: var(--rio-sub); }
.rio-src ul { margin: 0; padding-left: 1.15em; }
.rio-src li { margin: 3px 0; word-break: break-all; }
.rio-src a { color: var(--rio-key-d); }

.rio-src li{ margin:8px 0; word-break:normal; }
.rio-src a{ font-weight:700; }
/* URLと取得日は根拠として残す。ただし読む順は「どこの何か」が先 */
.rio-src__meta{ display:block; font-size:.78rem; color:var(--rio-sub); word-break:break-all; margin-top:2px; }