@charset "utf-8";
/* はじめてライブチャット — 公開用スタイル（デザインシステムのトークンを展開） */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Archivo:wght@500;600;700;800&display=swap");
:root{
  /* --- brand pink (現サイトの linkTxtColor=#ff3399 が出典) --- */
  --pink-50:#fff5fa;--pink-100:#ffe6f2;--pink-200:#ffc7e2;--pink-300:#ff9ccb;
  --pink-400:#ff66ae;--pink-500:#ff3399;--pink-600:#e51b80;--pink-700:#b81265;--pink-800:#83094699;
  --pink-800:#830946;
  /* --- neutrals (わずかにプラム寄り) --- */
  --ink-900:#1e1621;--ink-800:#332838;--ink-700:#4c3f52;--ink-600:#6b5c71;
  --ink-500:#8b7d90;--ink-400:#b0a4b4;--ink-300:#d2c9d5;--ink-200:#e8e2ea;
  --ink-100:#f4f1f6;--ink-50:#faf8fb;--white:#ffffff;
  /* --- accent (現サイトの hover 色 #00ccff) --- */
  --cyan-500:#00ccff;--cyan-600:#00a4cc;--cyan-50:#e8fbff;
  /* --- semantic scales --- */
  --green-500:#12a06a;--green-50:#e7f8f1;
  --amber-500:#ff9500;--amber-50:#fff5e6;
  --red-500:#e0244d;--red-50:#fdeaee;
  --violet-500:#7b3fe4;--violet-50:#f1ebfe;  /* 2ショット料金の警告色（現サイト踏襲） */
  --gold-500:#f5b400;                        /* ★評価 */
  --rank-gold:#f0b429;--rank-silver:#a8b2bd;--rank-bronze:#c08457;

  /* --- semantic aliases --- */
  --brand:var(--pink-500);--brand-strong:var(--pink-600);--brand-soft:var(--pink-100);
  --brand-tint:var(--pink-50);--on-brand:var(--white);
  --text-heading:var(--ink-900);--text-body:var(--ink-800);--text-muted:var(--ink-600);
  --text-faint:var(--ink-500);--text-on-dark:var(--white);--text-link:var(--pink-600);
  --text-link-hover:var(--cyan-600);--text-price:var(--pink-700);
  --surface-page:var(--ink-50);--surface-card:var(--white);--surface-sunken:var(--ink-100);
  --surface-accent:var(--pink-50);--surface-dark:var(--ink-900);
  --border-subtle:var(--ink-200);--border-default:var(--ink-300);--border-brand:var(--pink-300);
  --focus-ring:var(--cyan-500);
  --status-safe:var(--green-500);--status-safe-bg:var(--green-50);
  --status-caution:var(--amber-500);--status-caution-bg:var(--amber-50);
  --status-danger:var(--red-500);--status-danger-bg:var(--red-50);
  --status-twoshot:var(--violet-500);--status-twoshot-bg:var(--violet-50);
  --status-info:var(--cyan-500);--status-info-bg:var(--cyan-50);
}

:root{
  --font-base:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-num:"Archivo","Noto Sans JP",sans-serif;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-black:900; /* @kind font */

  --fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-15:15px;--fs-16:16px;
  --fs-18:18px;--fs-20:20px;--fs-24:24px;--fs-28:28px;--fs-32:32px;--fs-40:40px;--fs-52:52px;

  --lh-tight:1.25; /* @kind font */
  --lh-snug:1.45; /* @kind font */
  --lh-body:1.85; /* @kind font */
  --lh-loose:2; /* @kind font */
  --ls-tight:-0.02em; /* @kind font */
  --ls-normal:0; /* @kind font */
  --ls-wide:0.04em; /* @kind font */

  /* semantic type roles */
  --type-hero:var(--fw-black) var(--fs-40)/var(--lh-tight) var(--font-base);
  --type-h1:var(--fw-black) var(--fs-32)/1.35 var(--font-base);
  --type-h2:var(--fw-bold) var(--fs-24)/1.4 var(--font-base);
  --type-h3:var(--fw-bold) var(--fs-18)/1.5 var(--font-base);
  --type-body:var(--fw-regular) var(--fs-15)/var(--lh-body) var(--font-base);
  --type-body-sm:var(--fw-regular) var(--fs-13)/1.75 var(--font-base);
  --type-label:var(--fw-bold) var(--fs-12)/1.4 var(--font-base);
  --type-price:var(--fw-bold) var(--fs-24)/1.1 var(--font-num);
  --type-rank:var(--fw-black) var(--fs-20)/1 var(--font-num);
}

:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;
  --gutter-mobile:16px;--gutter-desktop:24px;
  --content-max:1080px;--reading-max:680px;--sidebar-w:280px;
  --section-gap:var(--sp-12);--card-pad:var(--sp-5);--cell-pad-y:10px;--cell-pad-x:12px;
  --tap-min:44px;
}

:root{
  --r-2:2px;--r-4:4px;--r-6:6px;--r-8:8px;--r-12:12px;--r-16:16px;--r-pill:999px;
  --radius-card:12px;--radius-control:8px;--radius-chip:var(--r-pill);--radius-table:10px;
}

:root{
  --shadow-sm:0 1px 2px rgba(30,22,33,.06);
  --shadow-card:0 1px 3px rgba(30,22,33,.06),0 6px 16px -8px rgba(30,22,33,.12);
  --shadow-raised:0 2px 6px rgba(30,22,33,.08),0 16px 32px -12px rgba(30,22,33,.18);
  --shadow-brand:0 6px 16px -6px rgba(255,51,153,.45);
  --inset-hairline:inset 0 0 0 1px var(--border-subtle);
  --ring-focus:0 0 0 3px rgba(0,204,255,.45);
}

:root{
  --dur-fast:120ms; /* @kind other */
  --dur-base:180ms; /* @kind other */
  --dur-slow:280ms; /* @kind other */
  --ease-out:cubic-bezier(.2,.8,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
  --dur-fast:0ms; /* @kind other */
  --dur-base:0ms; /* @kind other */
  --dur-slow:0ms; /* @kind other */
}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--text-heading);margin:0 0 var(--sp-3)}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}
p{margin:0 0 var(--sp-4)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--pink-200);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--cyan-500)}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--r-4)}
strong,b{font-weight:var(--fw-bold);color:var(--text-heading)}
em{font-style:normal;background:linear-gradient(transparent 62%,var(--pink-200) 62%);font-weight:var(--fw-medium)}
small{font-size:var(--fs-12);color:var(--text-muted)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-14)}
th,td{padding:var(--cell-pad-y) var(--cell-pad-x);text-align:left;border-bottom:1px solid var(--border-subtle);vertical-align:top}
th{background:var(--surface-sunken);font-weight:var(--fw-bold);color:var(--text-heading);font-size:var(--fs-12)}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* --- layout utilities (レスポンシブ: PC/スマホ同等要件) --- */
:root{--bp-md:1000px;--bp-sm:640px}
.ds-shell{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-w);gap:var(--sp-8)}
.ds-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--sp-4)}
.ds-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--sp-4)}
.ds-media{display:grid;grid-template-columns:280px minmax(0,1fr)}
.ds-sitecard{display:grid;grid-template-columns:minmax(0,1fr)}
.ds-sitecard-row{display:grid;grid-template-columns:220px minmax(0,1fr)}
.ds-footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--sp-6)}
@media (max-width:1000px){.ds-shell{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.ds-media,.ds-sitecard-row{grid-template-columns:minmax(0,1fr)}}