/* ==========================================================================
   yosoIQ design system  v2
   データが主役の解析メディア。数値は tabular-nums で桁を揃える。
   ========================================================================== */

:root{
  color-scheme: dark light;

  /* base */
  --bg:        #0b0f14;
  --bg-soft:   #111720;
  --panel:     #141b25;
  --panel-2:   #1a222e;
  --line:      #26303d;
  --line-soft: #1d2733;

  /* text */
  --fg:        #e8eef6;
  --fg-dim:    #a9b6c6;
  --fg-mute:   #7d8b9c;

  /* accent */
  --accent:    #4cc9f0;
  --accent-2:  #7bf1a8;
  --accent-3:  #ffd166;
  --danger:    #ff6b81;
  --accent-ink:#04121a;

  --radius:   16px;
  --radius-s: 10px;
  --shadow:   0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --ring:     0 0 0 1px var(--line);

  --maxw: 1000px;
  --maxw-narrow: 748px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:        #fbfcfd;
    --bg-soft:   #f2f5f9;
    --panel:     #ffffff;
    --panel-2:   #f5f8fb;
    --line:      #dfe6ee;
    --line-soft: #eaeff5;

    --fg:        #101923;
    --fg-dim:    #4a5a6b;
    --fg-mute:   #6d7c8d;

    --accent:    #0a7ea4;
    --accent-2:  #12855a;
    --accent-3:  #a8700a;
    --danger:    #c2334d;
    --accent-ink:#ffffff;

    --shadow: 0 1px 2px rgba(16,25,35,.06), 0 12px 28px -14px rgba(16,25,35,.22);
  }
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:
    radial-gradient(1100px 520px at 50% -12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.8;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:3px }
img{ max-width:100% ; height:auto }
b,strong{ font-weight:700; color:var(--fg) }

::selection{ background:color-mix(in srgb, var(--accent) 30%, transparent) }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px }
.narrow{ max-width:var(--maxw-narrow) }

/* ---------------------------------------------------------------- header */
.site-head{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .inner{
  max-width:var(--maxw); margin:0 auto; padding:13px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.logo{
  font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--fg);
  display:inline-flex; align-items:center; gap:2px;
}
.logo:hover{ text-decoration:none }
.logo b{
  background:linear-gradient(96deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.site-nav{ display:flex; gap:6px; flex-wrap:wrap }
.site-nav a{
  color:var(--fg-dim); font-size:14px; font-weight:500;
  padding:6px 11px; border-radius:999px; line-height:1.5;
}
.site-nav a:hover{
  color:var(--fg); background:var(--panel-2); text-decoration:none;
}
.site-nav a[aria-current="page"]{ color:var(--fg); background:var(--panel-2) }

/* ---------------------------------------------------------------- hero */
.hero{ text-align:center; padding:64px 0 40px }
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding:5px 13px; border-radius:999px; margin-bottom:18px;
}
.hero h1{
  font-size:clamp(30px, 5.4vw, 50px); line-height:1.24; margin:0 0 18px;
  font-weight:800; letter-spacing:-.025em;
}
.hero h1 .grad{
  background:linear-gradient(96deg, var(--accent), var(--accent-2) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  color:var(--fg-dim); font-size:clamp(15px, 2.2vw, 17.5px);
  max-width:600px; margin:0 auto; line-height:1.85;
}

/* ---------------------------------------------------------------- cards */
.grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(266px, 1fr));
  gap:18px; padding:14px 0;
}
.card{
  position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:206px;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent 65%);
  opacity:0; transition:opacity .2s ease;
}
a.card{ transition:transform .18s cubic-bezier(.2,.7,.3,1), border-color .18s ease, box-shadow .18s ease }
a.card:hover{
  transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
  text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.7);
}
a.card:hover::before{ opacity:1 }
.card .ico{ font-size:30px; line-height:1 }
.card h2{ font-size:19px; margin:15px 0 7px; color:var(--fg); letter-spacing:-.01em }
.card p{ color:var(--fg-dim); font-size:14.5px; margin:0 0 18px; flex:1; line-height:1.75 }
.card.soon{ opacity:.72 }

.tag{
  align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:4px 11px; border-radius:999px; line-height:1.6;
}
.tag.on{
  background:color-mix(in srgb, var(--accent-2) 16%, transparent); color:var(--accent-2);
  border:1px solid color-mix(in srgb, var(--accent-2) 32%, transparent);
}
.tag.soon{
  background:color-mix(in srgb, var(--fg-mute) 14%, transparent); color:var(--fg-mute);
  border:1px solid color-mix(in srgb, var(--fg-mute) 26%, transparent);
}
.cta{
  display:inline-flex; align-items:center; gap:7px; width:fit-content; margin-top:15px;
  background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:14px; padding:10px 17px; border-radius:var(--radius-s);
}
.cta:hover{ text-decoration:none; filter:brightness(1.08) }

/* ---------------------------------------------------------------- KPI */
.kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(148px,1fr)); gap:12px;
  margin:26px 0 8px;
}
.kpi{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:16px 18px;
}
.kpi .n{
  display:block; font-size:27px; font-weight:800; letter-spacing:-.03em; line-height:1.2;
  font-variant-numeric:tabular-nums; color:var(--fg);
}
.kpi .n small{ font-size:15px; font-weight:700; color:var(--fg-dim); margin-left:2px }
.kpi .l{ display:block; font-size:12.5px; color:var(--fg-mute); margin-top:4px }

/* ---------------------------------------------------------------- sections */
.sec{ padding:40px 0 6px }
.sec h2.t{ font-size:21px; margin:0 0 5px; letter-spacing:-.015em }
.sec p.sub{ color:var(--fg-dim); font-size:14.5px; margin:0 0 20px }

/* ---------------------------------------------------------------- posts */
.posts{ display:grid; gap:13px; padding:4px 0 }
.post{
  display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px;
  transition:border-color .18s ease, transform .18s cubic-bezier(.2,.7,.3,1);
}
.post:hover{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
  transform:translateY(-2px); text-decoration:none;
}
.post h3{ margin:0 0 6px; font-size:17px; color:var(--fg); letter-spacing:-.012em; line-height:1.6 }
.post p{ margin:0; color:var(--fg-dim); font-size:14px; line-height:1.7 }
.post .meta{ color:var(--fg-mute); font-size:12px; margin-bottom:7px; letter-spacing:.02em }

/* ---------------------------------------------------------------- article */
article{ padding:12px 0 10px }
article h1{
  font-size:clamp(25px, 4.2vw, 35px); line-height:1.4; margin:14px 0 12px;
  font-weight:800; letter-spacing:-.025em;
}
article h2{
  font-size:20px; margin:44px 0 12px; letter-spacing:-.015em; line-height:1.5;
  padding-bottom:9px; border-bottom:1px solid var(--line);
}
article h3{ font-size:16.5px; margin:28px 0 7px; letter-spacing:-.01em }
article p{ font-size:16px; color:var(--fg); line-height:1.92; margin:0 0 17px }
article ul,article ol{ padding-left:1.35em; margin:0 0 18px }
article li{ font-size:16px; margin-bottom:9px; line-height:1.85 }
article .lead{
  font-size:17.5px; color:var(--fg-dim); line-height:1.85;
  padding-left:16px; border-left:3px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.meta{ color:var(--fg-mute); font-size:13px; letter-spacing:.02em }

/* ---------------------------------------------------------------- tables */
.tablewrap{
  overflow-x:auto; margin:22px 0; border:1px solid var(--line);
  border-radius:var(--radius-s); background:var(--panel);
}
table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:380px }
th,td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft) }
th{
  background:var(--panel-2); font-size:12.5px; font-weight:700; color:var(--fg-dim);
  letter-spacing:.03em; white-space:nowrap; position:sticky; top:0;
}
td{ font-variant-numeric:tabular-nums; color:var(--fg) }
tbody tr:last-child td, tr:last-child td{ border-bottom:none }
tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 5%, transparent) }
td.num{ text-align:right }
.rank{ color:var(--fg-mute); font-size:13px; width:1%; white-space:nowrap }

/* 数値バー（表セル内の比率表示） */
.bar{ display:flex; align-items:center; gap:9px; min-width:132px }
.bar .track{
  flex:1; height:7px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--fg-mute) 20%, transparent); min-width:52px;
}
.bar .fill{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.bar .v{ font-variant-numeric:tabular-nums; font-weight:700; min-width:52px; text-align:right }
.bar.dim .fill{ background:color-mix(in srgb, var(--fg-mute) 55%, transparent) }

/* ---------------------------------------------------------------- callouts */
.note{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:17px 19px; margin:24px 0;
  font-size:14.5px; color:var(--fg-dim); line-height:1.8;
}
.note b{ color:var(--fg) }
.note.accent{
  background:color-mix(in srgb, var(--accent) 8%, var(--panel-2));
  border-color:color-mix(in srgb, var(--accent) 30%, var(--line));
}
.note.warn{
  background:color-mix(in srgb, var(--accent-3) 9%, var(--panel-2));
  border-color:color-mix(in srgb, var(--accent-3) 32%, var(--line));
}

.about{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; margin:40px 0 8px;
}
.about h3{ margin:0 0 9px; font-size:17px; letter-spacing:-.01em }
.about p{ color:var(--fg-dim); margin:0; font-size:14.5px; line-height:1.8 }

/* ---------------------------------------------------------------- footer */
footer{
  border-top:1px solid var(--line); margin-top:56px; padding:30px 0 56px;
  color:var(--fg-mute); font-size:13px;
}
footer .fl{ display:flex; gap:8px 20px; flex-wrap:wrap; margin-bottom:14px }
footer a{ color:var(--fg-dim) }
footer a:hover{ color:var(--fg) }

@media (max-width:560px){
  .hero{ padding:44px 0 30px }
  .site-head .inner{ padding:11px 16px }
  .wrap{ padding:0 16px }
  article p, article li{ font-size:15.5px }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}