/* LLM Oops 下層ページ共通 v17(2026-10-10)。LP専用の装飾は studio.css に置き、ここには入れない */
/* LLM Oops 公開サイト共通 v17(2026-10-10・モノクロ) */
:root{
  --black:#0a0a0a; --black2:#131313; --white:#fff; --paper:#fafafa;
  --g1:#8a8a8a; --g2:#5e5e5e; --g3:#2a2a2a; --rule:#e2e2e2; --rule-d:#272727;
  --jp:"Yu Gothic Medium","Yu Gothic",YuGothic,"Hiragino Sans","Noto Sans JP",sans-serif;
  --jpb:"Yu Gothic","Yu Gothic Bold",YuGothic,"Hiragino Sans","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--jp);background:var(--white);color:var(--black);font-size:15px;line-height:2;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.bar{font-family:'Barlow',sans-serif}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
@media(max-width:700px){.wrap{padding:0 20px}}

/* ── 汎用 ─────────────────── */
.lbl{font-family:'Barlow';font-size:10.5px;letter-spacing:.2em;color:var(--g2);display:flex;align-items:center;gap:11px}
.lbl::before{content:"";width:7px;height:7px;background:var(--black);flex:none}
.lnk{font-family:'Barlow';font-size:12px;letter-spacing:.13em;background:var(--black);color:#fff;padding:15px 26px;display:inline-flex;gap:10px;align-items:center;border:1px solid var(--black);cursor:pointer}
.lnk:hover{background:#fff;color:var(--black)}
.lnk.o{background:transparent;color:var(--black)}
.lnk.o:hover{background:var(--black);color:#fff}
/* デモの表は横スクロール(LPの .scrollcue とは別物) */
.scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ── 下層ページ共通(2026-10-10) ─────────────────────────── */
.shead{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.shead .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:18px}
.slogo{display:block;line-height:1.15}
.slogo b{display:block;font-family:'Barlow';font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--black)}
.slogo span{display:block;font-family:'Barlow';font-size:9px;letter-spacing:.17em;color:var(--g1);margin-top:2px}
.snav{display:flex;align-items:center;gap:6px}
.snav a{font-family:'Barlow';font-size:11px;letter-spacing:.12em;color:var(--g2);padding:9px 13px}
.snav a:hover{color:var(--black)}
.snav a.sbtn{background:var(--black);color:#fff;border:1px solid var(--black);padding:10px 16px}
.snav a.sbtn:hover{background:#fff;color:var(--black)}
@media(max-width:620px){.snav a:not(.sbtn){display:none}}
.sfoot{background:var(--black);color:rgba(255,255,255,.45);padding:34px 0 46px;font-family:'Barlow';font-size:10.5px;letter-spacing:.12em;margin-top:0}
.sfoot .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.sfoot a:hover{color:#fff}
.phead{padding:76px 0 0}
@media(min-width:900px){.phead{padding:104px 0 0}}
.phead h1{font-family:var(--jpb);font-weight:700;font-size:clamp(26px,3.7vw,46px);line-height:1.5;margin-top:36px;letter-spacing:.005em}
.phead p{margin-top:24px;font-size:14px;color:var(--g2);max-width:42em;line-height:2.2}
.pbody{padding:68px 0 110px}
@media(min-width:900px){.pbody{padding:92px 0 150px}}
/* デモ・ツールの枠(旧ブランドを外した後の見え方を整える) */
body.framed{background:#fff}
body.framed main,body.framed .wrap-demo{max-width:1180px;margin:0 auto;padding:46px 24px 90px}
.demo-note{border-top:1px solid var(--rule);margin-top:56px;padding-top:26px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.demo-note p{font-size:13px;color:var(--g2);flex:1 1 280px;line-height:2}

/* 旧CSS(lp/v5/v6)の緑を打ち消す(2026-10-10) */
:root,html,body,html.v5,html.v6,body.v6{--accent:#0a0a0a!important;--accent-soft:#f2f2f2!important;--brand:#0a0a0a!important}
.brand-chip{background:#f2f2f2!important;color:var(--g2,#5e5e5e)!important}
.btn.primary{background:#0a0a0a!important;border-color:#0a0a0a!important;color:#fff!important}
.brand-mark,.nav-brand img{display:none!important}
/* デモ・ツールの表はスマホで横スクロール */
/* デモの表は専用の枠(.scroll)で横スクロールさせる */
.scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:760px){.panel,.card,.box{max-width:100%}}

/* iframe に埋め込まれた時は枠を隠す(2026-10-10) */
html.embed .shead,html.embed .sfoot{display:none!important}