/* ============================================================
   Uranai Toolkit — フロント表示（デザイントークン準拠）
   ============================================================ */
:root{
  --ut-main:#6C5CE7;
  --ut-main-dark:#5546C8;
  --ut-sub:#A78BFA;
  --ut-sub-pale:#EDE9FB;
  --ut-navy:#221C48;
  --ut-gold:#C9962E;
  --ut-line:#E6E3F2;
  --ut-cta:#D6437A; /* コンバージョンボタン（モックアップのピンク系） */
  --ut-cta-dark:#B93365;
}

/* ---------- ボタン ---------- */
.ut-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:170px;padding:12px 24px;border-radius:999px;
  font-weight:700;font-size:14px;letter-spacing:.04em;text-decoration:none;
  transition:opacity .15s,background .15s;
}
.ut-btn-main{
  background:var(--ut-cta);color:#fff!important;
  box-shadow:0 4px 12px rgba(214,67,122,.32);
}
.ut-btn-main:hover{background:var(--ut-cta-dark)}
.ut-btn-sub{
  border:1.5px solid var(--ut-main);color:var(--ut-main)!important;background:#fff;
}
.ut-btn-sub:hover{background:var(--ut-sub-pale)}
.ut-btn:focus-visible{outline:3px solid var(--ut-main);outline-offset:2px}

/* ---------- PR表記 ---------- */
.ut-pr-notice{
  background:#FBF6EA;border:1px solid #EBDCB8;color:#7A6230;
  border-radius:8px;padding:8px 14px;font-size:12px;margin:0 0 20px;
}

/* ---------- ランキング ---------- */
.ut-rank{list-style:none;margin:24px 0;padding:0;counter-reset:none}
.ut-rank-item{
  position:relative;display:flex;gap:14px;background:#fff;
  border:1px solid var(--ut-line);border-radius:14px;
  padding:18px 16px;margin-bottom:14px;box-shadow:0 2px 12px rgba(34,28,72,.07);
}
.ut-rank-top{border-width:2px}
.ut-rank-1{border-color:#E4C468}
.ut-rank-2{border-color:#C4C9D6}
.ut-rank-3{border-color:#D9A87A}
.ut-rank-no{
  flex:0 0 36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:17px;background:#F5F6FA;color:#6B6880;
}
.ut-rank-1 .ut-rank-no{background:linear-gradient(140deg,#E9B84E,#F6D98A);color:#5A4310}
.ut-rank-2 .ut-rank-no{background:linear-gradient(140deg,#B9BECF,#E2E5EE);color:#4A4F60}
.ut-rank-3 .ut-rank-no{background:linear-gradient(140deg,#C98A5B,#E4B08A);color:#59300F}
.ut-rank-main{flex:1;min-width:0}
.ut-rank-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ut-rank-logo img{width:64px;height:64px;object-fit:contain;border-radius:8px;border:1px solid var(--ut-line);background:#fff}
.ut-rank-name{font-size:17px;font-weight:700;color:var(--ut-navy)}
.ut-stars{display:flex;align-items:center;gap:6px;margin-top:6px}
.ut-stars-bg{position:relative;color:#DDD9EC;font-size:16px;line-height:1;letter-spacing:1px}
.ut-stars-fill{
  position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  color:#F0B429;letter-spacing:1px;
}
.ut-stars-num{font-weight:700;color:var(--ut-navy);font-size:15px}
.ut-stars-count{font-size:12px;color:#6B6880}
.ut-rank-features{list-style:none;margin:10px 0 12px;padding:0;font-size:13.5px}
.ut-rank-features li{
  position:relative;padding-left:20px;margin-bottom:3px;color:#333;
}
.ut-rank-features li::before{
  content:"✓";position:absolute;left:0;color:var(--ut-main);font-weight:700;
}

/* ---------- 比較表 ---------- */
.ut-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
.ut-compare{
  border-collapse:collapse;width:100%;min-width:560px;background:#fff;font-size:13.5px;
}
.ut-compare th,.ut-compare td{
  border:1px solid var(--ut-line);padding:11px 12px;text-align:center;vertical-align:middle;
}
.ut-compare thead th{
  background:var(--ut-navy);color:#fff;font-weight:700;font-size:14px;
}
.ut-compare thead th.ut-compare-corner{background:var(--ut-main)}
.ut-compare tbody th{
  background:var(--ut-sub-pale);color:var(--ut-navy);font-weight:700;text-align:left;
  position:sticky;left:0;min-width:110px;
}
.ut-compare tbody tr:nth-child(even) td{background:#FAFAFD}
.ut-compare .ut-btn{min-width:0;padding:9px 16px;font-size:12.5px;white-space:nowrap}

@media (max-width:600px){
  .ut-rank-item{padding:14px 12px}
  .ut-rank-name{font-size:15px}
  .ut-btn{width:100%;min-width:0}
  .ut-compare .ut-btn{width:auto}
}

/* ---------- 監修者ボックス ---------- */
.ut-supervisor-box{
  display:flex;gap:14px;align-items:flex-start;background:var(--ut-sub-pale);
  border:1px solid #DCD4F5;border-radius:14px;padding:16px;margin:20px 0;
}
.ut-sup-avatar img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #fff;display:block}
.ut-sup-noimg{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--ut-sub),var(--ut-main));color:#fff;font-weight:700}
.ut-sup-label{font-size:10.5px;color:var(--ut-gold);font-weight:700;letter-spacing:.12em;margin:0}
.ut-sup-name{font-size:14.5px;font-weight:700;color:var(--ut-navy);margin:2px 0 0}
.ut-sup-name a{color:var(--ut-main)}
.ut-sup-role{font-size:12px;font-weight:500;color:#6B6880}
.ut-sup-text{font-size:12.5px;color:#333;margin:6px 0 0;line-height:1.7}
.ut-sup-profile{background:#fff;border-color:var(--ut-line)}
.ut-sup-profile .ut-sup-avatar img{width:96px;height:96px}

/* ---------- 評価項目（◎○△） ---------- */
.ut-rank-grades{
  display:grid;grid-template-columns:1fr;gap:6px;margin:12px 0;padding:12px;
  background:var(--ut-sub-pale);border-radius:10px;
}
.ut-grade{display:flex;align-items:flex-start;gap:8px;font-size:12.5px}
.ut-grade-icon{
  flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:14px;background:#fff;
}
.ut-grade-excellent .ut-grade-icon{color:#1E8449;border:1.5px solid #1E8449}
.ut-grade-good .ut-grade-icon{color:#2E7D6B;border:1.5px solid #6FBF9A}
.ut-grade-fair .ut-grade-icon{color:var(--ut-gold);border:1.5px solid var(--ut-gold)}
.ut-grade-body{display:flex;flex-direction:column}
.ut-grade-label{font-weight:700;color:var(--ut-navy)}
.ut-grade-note{color:#6B6880;font-size:11.5px;margin-top:1px}

/* ---------- メリット・デメリット ---------- */
.ut-rank-proscons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.ut-rank-pros,.ut-rank-cons{list-style:none;margin:0;padding:10px 12px;border-radius:10px;font-size:12px}
.ut-rank-pros{background:#EFF8F2;border:1px solid #CFEBDA}
.ut-rank-cons{background:#FBF6EA;border:1px solid #EBDCB8}
.ut-pc-head{font-weight:700;font-size:11px;letter-spacing:.06em;margin-bottom:5px}
.ut-rank-pros .ut-pc-head{color:#1E8449}
.ut-rank-cons .ut-pc-head{color:#9A7412}
.ut-rank-pros li:not(.ut-pc-head),.ut-rank-cons li:not(.ut-pc-head){position:relative;padding-left:16px;margin-top:3px;line-height:1.5}
.ut-rank-pros li:not(.ut-pc-head)::before{content:"✓";position:absolute;left:0;color:#1E8449;font-weight:700}
.ut-rank-cons li:not(.ut-pc-head)::before{content:"△";position:absolute;left:0;color:#9A7412;font-weight:700}

@media (max-width:480px){
  .ut-rank-proscons{grid-template-columns:1fr}
}

/* ---------- 広告枠 ---------- */
.ut-ad{margin:26px auto;text-align:center;max-width:100%;overflow:hidden}
.ut-ad-label{display:block;font-size:10px;color:#9A94B8;letter-spacing:.1em;margin-bottom:4px}
@media (max-width:767px){ .ut-ad-no-sp{display:none} }
@media (min-width:768px) and (max-width:1023px){ .ut-ad-no-tab{display:none} }
@media (min-width:1024px){ .ut-ad-no-pc{display:none} }

/* ---------- ランキング記事 ---------- */
.ut-rp-criteria{
  background:var(--ut-sub-pale);border-radius:12px;padding:14px 16px;margin:20px 0;font-size:13px;
}
.ut-rp-criteria-head{font-weight:700;color:var(--ut-navy);font-size:12.5px;margin:0 0 4px;letter-spacing:.04em}
.ut-rp-criteria p{margin:0}
.ut-rp-reason{
  background:#FBF9F2;border-left:3px solid var(--ut-gold);border-radius:0 8px 8px 0;
  padding:10px 14px;margin:12px 0;font-size:13px;
}
.ut-rp-reason-head{font-weight:700;color:#7A6230;font-size:12px;margin:0 0 3px}
.ut-rp-reason p{margin:0;line-height:1.7}
.ut-rp-box{border-radius:12px;padding:16px 18px;margin:20px 0;font-size:13.5px}
.ut-rp-box-head{font-weight:700;margin:0 0 8px;font-size:14px}
.ut-rp-box ul{list-style:none;margin:0;padding:0}
.ut-rp-box li{position:relative;padding-left:20px;margin-top:5px;line-height:1.7}
.ut-rp-recommend{background:#EFF8F2;border:1px solid #CFEBDA}
.ut-rp-recommend .ut-rp-box-head{color:#1E8449}
.ut-rp-recommend li::before{content:"✓";position:absolute;left:0;color:#1E8449;font-weight:700}
.ut-rp-caution{background:#FDF3F3;border:1px solid #ECC7C7}
.ut-rp-caution .ut-rp-box-head{color:#B23A3A}
.ut-rp-caution li::before{content:"！";position:absolute;left:0;color:#B23A3A;font-weight:700}
.ut-rp-related{margin-top:36px;padding-top:22px;border-top:1px solid var(--ut-line)}