/* =============================================================================
   rank-aio-checker.css
   出典: rank-aio-checker.html モック（tokens.css / base.css / components.css / checker.css）
   から、ヘッダー/フッター/デモ状態切替バー/埋め込みWebフォントを除いた実装分を移植。
   前提: 本サイトのテーマ（seo_times_2025）は html{font-size:62.5%} を既に適用しており、
   本ファイルの rem 指定（1rem=10px前提）はその値に依存する。別テーマで単体運用する場合は
   html{font-size:62.5%} 相当を用意すること。
   ========================================================================== */

:root {
  --rc-teal:        #4ec1b7;
  --rc-teal-dark:   #29877f;
  --rc-teal-ink:      #0e7a6e;
  --rc-teal-ink-dark: #0a5c52;
  --rc-teal-soft:   #e8f2f2;
  --rc-teal-wash:   #f5fbfb;
  --rc-blue:        #005bac;
  --rc-blue-wash:   #f4faff;
  --rc-red:         #de3030;

  --rc-black:       #000000;
  --rc-gray-d:      #888888;
  --rc-gray:        #b2b2b2;
  --rc-gray-2:      #d0d0d0;
  --rc-gray-l:      #f1f1f1;
  --rc-gray-wash:   #f5f6f6;

  --rc-text:        #313131;
  --rc-text-muted:  #666666;
  --rc-heading:     #222222;
  --rc-bg:          #ffffff;
  --rc-border:      #e5e5e5;
  --rc-link:        var(--rc-teal-ink);
  --rc-focus:       #0b7fbf;

  --rc-rank-good-bg: #0e7a6e;
  --rc-rank-good-fg: #ffffff;
  --rc-rank-mid-bg:  #b35200;
  --rc-rank-mid-fg:  #ffffff;
  --rc-rank-out-bg:  #c92a2a;
  --rc-rank-out-fg:  #ffffff;

  --rc-rank-good-tint: #e3f2f0;
  --rc-rank-mid-tint:  #fdefe0;
  --rc-rank-out-tint:  #fce8e8;

  --rc-font:    "Figtree","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  --rc-font-jp: "Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  --rc-font-en: "Figtree","Helvetica Neue",Arial,sans-serif;

  --rc-fw-regular: 400;
  --rc-fw-medium:  500;
  --rc-fw-bold:    700;

  --rc-lh-tight:   1.3;
  --rc-lh-base:    1.8;
  --rc-ls-base:    0.02em;
  --rc-ls-head:    0.03em;

  --rc-fs-base:    1.6rem;
  --rc-fs-sm:      1.3rem;
  --rc-fs-xs:      1.1rem;
  --rc-fs-lead:    1.8rem;

  --rc-container:        1200px;
  --rc-container-narrow: 900px;

  --rc-radius:     10px;
  --rc-radius-sm:  4px;
  --rc-radius-btn: 8px;
  --rc-radius-pill: 999px;

  --rc-shadow-sm:   1px 1px 4px rgba(0,0,0,.12);
  --rc-shadow:      0 5px 10px rgba(0,0,0,.15);
  --rc-shadow-card: 0 4px 22px rgba(0,0,0,.06);

  --rc-ease: .2s ease-in-out;
}

/* --- コンテナ --- */
.innerBox{ width:90%; max-width:var(--rc-container); margin-inline:auto; position:relative; }
.innerBox--narrow{ max-width:var(--rc-container-narrow); }
.rc-scope .innerBox{ box-sizing:border-box; width:100%; padding-inline:clamp(20px,4vw,48px); }

.rc-visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  .rc-hero *,.rc-checker *{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; }
}

/* --- テーマの見出し装飾を打ち消すリセット ---------------------------------
   多くの日本語向けWordPressテーマは h1〜h4 に独自の装飾（枠囲み・前後の括弧風
   疑似要素・背景等）をあてている。テーマCSSの読み込み順・詳細度によって
   本ツールの見出し(.en_jp / .rc-subhead 系)に意図しない枠や記号が乗ってしまうため、
   ツール内の見出しに限定してテーマの装飾を明示的に解除し、直後に本来のスタイルを
   !important で再適用する。 */
.rc-scope h1,.rc-scope h2,.rc-scope h3,.rc-scope h4{
  all:revert!important;
  box-sizing:border-box!important;
}
.rc-scope h1::before,.rc-scope h1::after,
.rc-scope h2::before,.rc-scope h2::after,
.rc-scope h3::before,.rc-scope h3::after{
  content:none!important;
}

/* --- 見出し ---
   下記は .rc-scope h1〜h4 のリセットより詳細度を上げる必要があるため、
   （クラス数で比較され上のリセットに勝つよう）.rc-scope を前置して定義する。 */
.rc-scope .en_jp{
  display:grid!important; gap:.15em!important;
  font-family:var(--rc-font-en)!important;
  font-size:clamp(2.8rem,7vw,5rem)!important;
  font-weight:var(--rc-fw-bold)!important;
  letter-spacing:var(--rc-ls-head)!important;
  line-height:1.05!important; color:var(--rc-heading)!important;
  margin:0 0 clamp(20px,4vw,36px)!important;
  padding:0!important; border:0!important; background:none!important;
  overflow-wrap:break-word;
}
.en_jp .en{ line-height:1; }
.en_jp .jp{
  order:-1; position:relative; padding-left:1.4em;
  font-family:var(--rc-font-jp);
  font-size:clamp(1.4rem,3.4vw,1.8rem); font-weight:var(--rc-fw-medium);
  letter-spacing:.04em; line-height:1.4; color:var(--rc-text);
}
.en_jp .jp::before{
  content:""!important; position:absolute; left:0; top:.28em;
  width:.83em; height:.83em; border-radius:50%; background:var(--rc-teal);
}

.rc-scope .rc-subhead{
  display:block!important;
  font-family:var(--rc-font-jp)!important; font-weight:var(--rc-fw-bold)!important;
  font-size:clamp(1.8rem,3vw,2.2rem)!important; line-height:1.5!important; color:var(--rc-heading)!important;
  letter-spacing:.02em!important;
  margin:0 0 clamp(16px,3vw,24px)!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important;
}
.rc-scope .rc-subhead--bar{ padding-left:.7em!important; border-left:5px solid var(--rc-teal)!important; }

/* --- ボタン --- */
.rc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--rc-font); font-weight:var(--rc-fw-bold);
  text-decoration:none; text-align:center; line-height:1.4;
  border:2px solid transparent; border-radius:var(--rc-radius-btn);
  padding:.9em 1.8em; cursor:pointer; transition:all var(--rc-ease);
  min-height:52px;
}
.rc-btn:disabled{ opacity:.5; cursor:not-allowed; }
.rc-btn .rc-btn__arrow{ font-size:1.1em; line-height:1; transform:translateY(1px); }
.rc-btn--primary{ background:var(--rc-teal-ink); color:#fff; border-color:var(--rc-teal-ink); box-shadow:var(--rc-shadow-sm); }
.rc-btn--primary:hover,.rc-btn--primary:focus-visible{ background:var(--rc-teal-ink-dark); border-color:var(--rc-teal-ink-dark); color:#fff; }
.rc-btn--lg{ font-size:1.8rem; padding:1.05em 2.2em; min-height:60px; border-radius:var(--rc-radius-pill); }
.rc-btn--ghost{ background:#fff; color:var(--rc-teal-ink); border-color:var(--rc-teal-ink); }
.rc-btn--ghost:hover,.rc-btn--ghost:focus-visible{ background:var(--rc-teal-ink); color:#fff; }
.rc-btn--neutral{ background:#fff; color:var(--rc-heading); border-color:var(--rc-gray-2); }
.rc-btn--neutral:hover,.rc-btn--neutral:focus-visible{ border-color:var(--rc-gray-d); background:var(--rc-gray-wash); }
.rc-btn--block{ width:100%; }

/* --- チップ / タグ --- */
.rc-chip{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:1.3rem; font-weight:var(--rc-fw-medium); line-height:1;
  padding:.5em .9em; border-radius:var(--rc-radius-pill);
  background:var(--rc-teal-soft); color:var(--rc-teal-ink); white-space:nowrap;
}
.rc-chip svg,.rc-chip .rc-chip__ico{ width:1.1em; height:1.1em; }
.rc-chip--solid{ background:var(--rc-teal-ink); color:#fff; }
.rc-chip--muted{ background:var(--rc-gray-wash); color:var(--rc-text-muted); }
.rc-chip--outline{ background:#fff; border:1px solid var(--rc-gray-2); color:var(--rc-text); }

.rc-tag{
  display:inline-block; font-size:1.05rem; font-weight:var(--rc-fw-bold);
  letter-spacing:.04em; line-height:1; padding:.4em .6em; border-radius:var(--rc-radius-sm);
  vertical-align:middle;
}
.rc-tag--input{ background:var(--rc-teal-ink); color:#fff; }
.rc-tag--ai{ background:#eef4ff; color:var(--rc-blue); border:1px solid #cfe0f5; }

/* --- カード / パネル --- */
.rc-card{ background:#fff; border:1px solid var(--rc-border); border-radius:var(--rc-radius); box-shadow:var(--rc-shadow-card); }
.rc-card__body{ padding:clamp(20px,4vw,40px); }

/* --- 注記 / アラート --- */
.rc-note{ font-size:1.2rem; line-height:1.8; color:var(--rc-text-muted); }
.rc-note--list{ display:grid; gap:.5em; padding-left:1.2em; list-style:disc; }
.rc-note--list li{ display:list-item; }

.rc-alert{ display:flex; gap:.8em; align-items:flex-start; border-radius:var(--rc-radius); padding:16px 18px; font-size:1.5rem; line-height:1.7; }
.rc-alert__ico{ flex:0 0 auto; width:1.4em; height:1.4em; margin-top:.1em; }
.rc-alert--danger{ background:var(--rc-rank-out-tint); border:1px solid #f2c0c0; color:#8f1d1d; }
.rc-alert--danger strong{ color:var(--rc-red); }
.rc-alert--info{ background:var(--rc-blue-wash); border:1px solid #cfe4f7; color:#0d3b66; }
.rc-alert--warn{ background:var(--rc-rank-mid-tint); border:1px solid #f0d2ad; color:#7a3c00; }
.rc-alert--warn strong{ color:var(--rc-rank-mid-bg); }
.rc-alert--ok{ background:var(--rc-rank-good-tint); border:1px solid #bfe3dd; color:#0f5f56; }

/* --- ヒーロー --- */
.rc-hero{ background:linear-gradient(180deg,var(--rc-teal-wash) 0%,#fff 100%); }
.rc-hero .innerBox{ padding-block:clamp(36px,6vw,64px); }
.rc-hero__lead{ max-width:62ch; margin-top:8px; font-size:var(--rc-fs-lead); line-height:1.9; color:var(--rc-text); }
.rc-hero__points{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

/* --- ツールの器 --- */
.rc-checker{ position:relative; }
.rc-checker .innerBox{ padding-block:clamp(24px,4vw,40px); }
.rc-state{ display:none; }
.rc-state[data-active="true"]{ display:block; animation:rc-fade .35s ease-in-out; }
@keyframes rc-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* --- 初期：フォーム --- */
.rc-form__grid{ display:grid; gap:20px; }
@media (min-width:720px){ .rc-form__grid{ grid-template-columns:1fr 1fr; } }
.rc-field{ display:grid; gap:8px; }
.rc-field__label{ font-weight:var(--rc-fw-bold); font-size:1.5rem; color:var(--rc-heading); display:flex; align-items:center; gap:.5em; }
.rc-req{ font-size:1.05rem; font-weight:var(--rc-fw-bold); color:#fff; background:var(--rc-red); border-radius:var(--rc-radius-sm); padding:.25em .5em; line-height:1; }
.rc-input{
  width:100%; background:#fff; color:var(--rc-text);
  border:1.5px solid var(--rc-gray-2); border-radius:var(--rc-radius-btn);
  padding:.85em 1em; font-size:1.6rem; line-height:1.5; transition:border-color var(--rc-ease), box-shadow var(--rc-ease);
}
.rc-input::placeholder{ color:#767676; }
.rc-input:hover{ border-color:var(--rc-gray-d); }
.rc-input:focus{ border-color:var(--rc-teal-ink); box-shadow:0 0 0 3px rgba(14,122,110,.25); }
.rc-input[aria-invalid="true"]{ border-color:var(--rc-red); box-shadow:0 0 0 3px rgba(222,48,48,.18); }
.rc-field__hint{ font-size:1.2rem; color:var(--rc-text-muted); }
.rc-field__error{ font-size:1.25rem; color:var(--rc-red); font-weight:var(--rc-fw-medium); min-height:1.2em; }

.rc-autokw{
  display:flex; gap:.7em; align-items:flex-start;
  margin-top:20px; padding:14px 16px; border-radius:var(--rc-radius);
  background:#eef4ff; border:1px solid #d7e5f8; color:#123c66; font-size:1.35rem; line-height:1.7;
}
.rc-autokw .rc-autokw__ico{ flex:0 0 auto; width:22px; height:22px; margin-top:2px; }
.rc-autokw b{ color:var(--rc-blue); }

.rc-form__cta{ display:grid; gap:12px; margin-top:26px; justify-items:center; }
.rc-form__cta .rc-btn{ width:100%; max-width:420px; }
.rc-form__chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:4px; }
.rc-form__reassure{ font-size:1.2rem; color:var(--rc-text-muted); text-align:center; }

/* --- ローディング --- */
.rc-loading{ text-align:center; padding-block:clamp(20px,4vw,36px); }
.rc-loading__spinner{
  width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
  border:5px solid var(--rc-teal-soft); border-top-color:var(--rc-teal);
  animation:rc-spin 1s linear infinite;
}
@keyframes rc-spin{ to{ transform:rotate(360deg); } }
.rc-loading__title{ font-weight:var(--rc-fw-bold); font-size:1.9rem; color:var(--rc-heading); }
.rc-loading__sub{ margin-top:6px; color:var(--rc-text-muted); font-size:1.35rem; }
.rc-steps{ display:grid; gap:12px; max-width:460px; margin:26px auto 0; padding:0; list-style:none !important; text-align:left; counter-reset:none; }
.rc-steps > li{ list-style:none !important; }
.rc-step{
  display:flex; align-items:center; gap:14px; padding:12px 16px !important;
  border:1px solid var(--rc-border); border-radius:var(--rc-radius);
  background:#fff; color:var(--rc-text-muted); transition:all var(--rc-ease);
  list-style:none !important;
}
.rc-step::marker{ content:none; }
/* テーマ側 style.css の「ol > li:before { content:counter(number); ... }」は
   list-styleとは無関係のCSSカウンター実装のため、ここで明示的に打ち消す */
.rc-step::before{ content:none !important; display:none !important; }
.rc-step__dot{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--rc-gray-2); font-size:1.2rem; font-weight:var(--rc-fw-bold);
  color:var(--rc-gray-d); background:#fff;
}
.rc-step__label{ font-size:1.45rem; font-weight:var(--rc-fw-medium); }
.rc-step[data-status="active"]{ border-color:var(--rc-teal); background:var(--rc-teal-wash); color:var(--rc-heading); }
.rc-step[data-status="active"] .rc-step__dot{ border-color:var(--rc-teal-ink); color:var(--rc-teal-ink); }
.rc-step[data-status="done"]{ color:var(--rc-heading); border-color:var(--rc-teal-soft); }
.rc-step[data-status="done"] .rc-step__dot{ background:var(--rc-teal-ink); border-color:var(--rc-teal-ink); color:#fff; }

/* --- 結果 --- */
.rc-result__head{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:baseline; justify-content:space-between; }
.rc-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

.rc-table-wrap{ margin-top:22px; border:1px solid var(--rc-border); border-radius:var(--rc-radius); overflow:hidden; }
.rc-table{ width:100%; border-collapse:collapse; font-size:1.45rem; }
.rc-table thead th{
  background:var(--rc-teal-ink); color:#fff; font-weight:var(--rc-fw-bold);
  text-align:left; padding:14px 16px; font-size:1.35rem; letter-spacing:.02em; white-space:nowrap;
}
.rc-table tbody td{ padding:16px; border-top:1px solid var(--rc-border); vertical-align:top; }
.rc-table tbody tr:nth-child(even){ background:var(--rc-gray-wash); }
.rc-kw{ font-weight:var(--rc-fw-bold); color:var(--rc-heading); font-size:1.55rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5em; }

.rc-rank{
  display:inline-flex; align-items:baseline; gap:.15em;
  font-family:var(--rc-font-en); font-weight:var(--rc-fw-bold);
  padding:.4em .8em; border-radius:var(--rc-radius-pill); line-height:1;
  font-size:1.7rem; letter-spacing:.01em; white-space:nowrap;
}
.rc-rank__unit{ font-family:var(--rc-font-jp); font-size:.62em; font-weight:var(--rc-fw-bold); }
.rc-rank--good{ background:var(--rc-rank-good-bg); color:var(--rc-rank-good-fg); }
.rc-rank--mid{ background:var(--rc-rank-mid-bg);  color:var(--rc-rank-mid-fg); }
.rc-rank--out{ background:var(--rc-rank-out-bg);  color:var(--rc-rank-out-fg); font-size:1.45rem; }

.rc-aio-shown{ font-weight:var(--rc-fw-bold); font-size:1.45rem; }
.rc-aio-shown[data-shown="yes"]{ color:var(--rc-teal-ink); }
.rc-aio-shown[data-shown="no"]{ color:var(--rc-text-muted); }

.rc-cite{ font-size:1.4rem; line-height:1.6; }
.rc-cite--none{ color:var(--rc-red); font-weight:var(--rc-fw-bold); display:flex; align-items:center; gap:.4em; }
.rc-cite--na{ color:#767676; font-weight:var(--rc-fw-bold); }
.rc-cite__competitors{ margin-top:6px; font-size:1.15rem; color:var(--rc-text-muted); font-weight:var(--rc-fw-regular); }
.rc-cite__competitors b{ color:var(--rc-text); font-weight:var(--rc-fw-medium); }
.rc-cite__competitors code{ font-family:var(--rc-font-en); background:var(--rc-gray-wash); border-radius:3px; padding:.1em .4em; }

.rc-aio-summary{ margin-top:20px; }

.rc-diagnosis{ margin-top:22px; border-radius:var(--rc-radius); border:1px solid var(--rc-border); overflow:hidden; }
.rc-diagnosis__head{ background:var(--rc-teal-wash); padding:14px 20px; font-weight:var(--rc-fw-bold); font-size:1.6rem; color:var(--rc-heading); display:flex; align-items:center; gap:.6em; }
.rc-diagnosis__badge{ flex:none; font-size:1.1rem; padding:.35em .7em; border-radius:var(--rc-radius-pill); background:var(--rc-teal-ink); color:#fff; font-weight:var(--rc-fw-bold); white-space:nowrap; }
.rc-diagnosis__badge--alert{ background:var(--rc-rank-out-bg); }
.rc-diagnosis__badge--warn{ background:var(--rc-rank-mid-bg); }
.rc-diagnosis__badge--ok{ background:var(--rc-rank-good-bg); }
.rc-diagnosis__body{ padding:18px 20px; font-size:1.5rem; line-height:1.9; }
.rc-diagnosis__body p + p{ margin-top:.8em; }
.rc-diagnosis__body em{ font-style:normal; font-weight:var(--rc-fw-bold); color:var(--rc-teal-ink); }

/* 結果CTAブロック */
.rc-cta-block{
  margin-top:30px; border-radius:var(--rc-radius);
  background:linear-gradient(135deg,var(--rc-teal-ink) 0%,var(--rc-teal-ink-dark) 100%);
  color:#fff; padding:clamp(22px,4vw,34px); text-align:center; box-shadow:var(--rc-shadow);
}
.rc-cta-block__title{ font-size:clamp(1.9rem,3.4vw,2.4rem); font-weight:var(--rc-fw-bold); line-height:1.5; }
.rc-cta-block__sub{ margin-top:8px; font-size:1.4rem; line-height:1.8; opacity:.95; }
.rc-cta-block__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:22px; }
.rc-cta-block .rc-btn--primary{ background:#fff; color:var(--rc-teal-ink); border-color:#fff; }
.rc-cta-block .rc-btn--primary:hover,.rc-cta-block .rc-btn--primary:focus-visible{ background:#f0fbf9; color:var(--rc-teal-ink-dark); border-color:#f0fbf9; }

/* クロスリンク（高評価） */
.rc-crosslink{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  margin-top:22px; padding:16px 20px; border:1px dashed var(--rc-gray-2);
  border-radius:var(--rc-radius); background:#fff;
}
.rc-crosslink__txt{ font-size:1.4rem; color:var(--rc-text); flex:1 1 260px; line-height:1.7; }
.rc-crosslink__txt b{ color:var(--rc-heading); }

.rc-caution{ margin-top:22px; padding:16px 18px; background:var(--rc-gray-wash); border-radius:var(--rc-radius); }
.rc-caution__title{ font-size:1.25rem; font-weight:var(--rc-fw-bold); color:var(--rc-text); margin-bottom:.5em; }

/* --- インラインCTA（AIOアラート直後の軽いリンク） --- */
.rc-inline-cta{ margin:16px 0 0; text-align:center; }
.rc-inline-cta a{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--rc-teal-ink); border:1.5px solid var(--rc-teal-ink);
  color:#fff; font-weight:var(--rc-fw-bold); font-size:1.4rem;
  padding:.65em 1.5em; border-radius:var(--rc-radius-pill); text-decoration:none;
  box-shadow:var(--rc-shadow-sm);
  transition:background .15s, color .15s, transform .15s;
}
.rc-inline-cta a:hover,.rc-inline-cta a:focus-visible{
  background:var(--rc-teal-ink-dark); border-color:var(--rc-teal-ink-dark); color:#fff;
}
.rc-inline-cta a span{ transition:transform .15s ease-in-out; }
.rc-inline-cta a:hover span{ transform:translateX(3px); }

/* --- エラー --- */
.rc-error{ text-align:center; padding-block:clamp(24px,5vw,44px); }
.rc-error__ico{ width:64px; height:64px; margin:0 auto 18px; color:var(--rc-red); }
.rc-error__title{ font-size:2rem; font-weight:var(--rc-fw-bold); color:var(--rc-heading); }
.rc-error__msg{ margin-top:10px; color:var(--rc-text-muted); font-size:1.5rem; line-height:1.8; }
.rc-error__actions{ margin-top:24px; display:flex; justify-content:center; }

/* --- レスポンシブ：順位表 → カード --- */
@media (max-width:640px){
  .rc-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .rc-table,.rc-table tbody,.rc-table tr,.rc-table td{ display:block; width:100%; }
  .rc-table-wrap{ border:0; }
  .rc-table tbody tr{
    border:1px solid var(--rc-gray-2); border-radius:var(--rc-radius);
    margin-bottom:14px; background:#fff!important; overflow:hidden;
    box-shadow:var(--rc-shadow-sm);
  }
  .rc-table tbody td{ border:0; border-top:1px solid var(--rc-border); padding:12px 14px; display:grid; grid-template-columns:9.5em 1fr; gap:10px; align-items:center; }
  .rc-table tbody td:first-child{ border-top:0; background:var(--rc-teal-wash); }
  .rc-table tbody td::before{
    content:attr(data-label); font-size:1.2rem; font-weight:var(--rc-fw-bold);
    color:var(--rc-text-muted); font-family:var(--rc-font-jp);
  }
  .rc-table tbody td:first-child::before{ align-self:start; }
  .rc-kw{ font-size:1.45rem; }

  /* バッジ（診断：〜）と見出し文を横並びにすると、狭い画面ではバッジ側が
     flexの縮小対象になり文字が見切れてしまうため、縦積みにする。 */
  .rc-diagnosis__head{ flex-direction:column; align-items:flex-start; gap:.5em; }
}
@media (max-width:380px){
  .rc-table tbody td{ grid-template-columns:1fr; gap:4px; }
  .rc-table tbody td::before{ margin-bottom:2px; }
}

/* 右側サイドバナー（PC: 右カラム / SP: 下に縦積み） */
.rc-layout{display:flex;align-items:flex-start;gap:20px;width:100%;box-sizing:border-box;position:relative}
.rc-layout>.rc-scope{flex:1 1 auto;min-width:0}
.rc-banner-slots{flex:0 0 260px;width:260px;display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
.rc-banner-slots__item{width:100%;box-sizing:border-box;border-radius:8px;overflow:hidden;display:block}
.rc-banner-slots__item img{display:block;width:100%;height:auto}
.rc-banner-slots__item--placeholder{border:2px dashed #b2b2b2;display:flex;align-items:center;justify-content:center;color:#888;font-size:1.2rem;font-weight:500;text-align:center;line-height:1.4;padding:10px;aspect-ratio:2/1}
@media screen and (max-width:1263px){
  .rc-layout{padding-inline:20px}
}
/* テーマのコンテンツ幅より広く使い、ツール本体の幅を確保する */
@media screen and (min-width:1264px){
  .rc-layout{width:1200px;left:50%;transform:translateX(-50%)}
}
@media screen and (max-width:960px){
  .rc-layout{flex-direction:column;align-items:stretch}
  .rc-banner-slots{flex:none;width:90%;max-width:400px;margin:0 auto;position:static}
}