/* 案件339 デモ動画の解説サイト — panhouse.jp 版（/demo/）。本体の /assets/style.css の後に読む。
   本体のトークン（--blue --navy --orange --ink --ink-soft --ink-mute --bg --line --blue-pale --orange-pale
   --font-jp --font-num --r-section --r-card --r-sm --shadow-card --edge）だけで塗る。紙・墨・朱・明朝は使わない
   （岡本 2026-09-13 A＝本体に統一）。全部 .demo-root 配下にスコープし、本体のグローバル（.chip .sec-head 等）は上書きで打ち消す。
   Vercel 版（style.css・紙墨）と展示会モード loop.html（loop.css）とは別物。 */

.demo-root { padding: 175px var(--edge) 0; color: var(--ink); font-family: var(--font-jp); font-size: 15px; line-height: 1.9; }
.demo-root .wrap { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.demo-root a { color: var(--blue); }
.demo-root a:hover { text-decoration: underline; text-underline-offset: .2em; }
.demo-root h1, .demo-root h2, .demo-root h3 { font-weight: 700; line-height: 1.4; color: var(--ink); }
.demo-root .mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.demo-root .seal { color: var(--orange); font-weight: 700; }
.demo-root .vessel { display: inline-block; font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-pale); border-radius: 999px; padding: 2px 10px; }
.demo-root .variant { font-size: 12.5px; color: var(--ink-mute); margin-left: .6em; }
.demo-root > .wrap > footer { margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-mute); }

/* ---- 見出し（本体の .page-head / .sec-sub と同じ骨格） */
.demo-root .top { padding: 0 0 40px; }
.demo-root .top .kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--ink); }
.demo-root .top .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.demo-root .top h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.35; letter-spacing: .01em; }
.demo-root .top .sub { max-width: 680px; margin: 26px 0 0; font-size: 15px; line-height: 2.1; color: var(--ink-soft); }
.demo-root .top .howto { max-width: 680px; margin: 12px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
.demo-root .top .jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.demo-root .top .jump a { padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); background: #e9edf2; transition: background .2s, color .2s; }
.demo-root .top .jump a:hover { text-decoration: none; color: var(--blue); background: #dde6ee; }
.demo-root .sec-head { margin: 72px 0 22px; padding: 0; position: static; z-index: auto; }
.demo-root .sec-head h2 { font-size: 26px; letter-spacing: .01em; }
.demo-root .sec-head h2 small { display: inline-block; margin-left: 1em; font-weight: 500; font-size: 13px; color: var(--ink-mute); }
.demo-root .sec-head p { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.demo-root .list { scroll-margin-top: 16px; }

/* ---- 絞り込み（本体の .na-tabs と同じ札） */
.demo-root .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 24px; }
.demo-root .filters .flabel { margin: 0 6px 0 10px; font-size: 12px; font-weight: 700; color: var(--ink-mute); }
.demo-root .filters button { all: unset; cursor: pointer; padding: 8px 18px; border-radius: 999px; font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--ink-soft); background: #e9edf2; transition: background .2s, color .2s; }
.demo-root .filters button:hover { color: var(--blue); background: #dde6ee; }
.demo-root .filters button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.demo-root .filters button:focus-visible { outline: 3px solid rgba(0, 132, 190, .24); outline-offset: 2px; }

/* ---- 一覧のカード（本体の .wl-card / .work-card と同じ白カード） */
.demo-root .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.demo-root .card { display: flex; flex-direction: column; color: var(--ink); background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 14px 14px 20px; transition: transform .3s; }
.demo-root .card:hover { text-decoration: none; transform: translateY(-4px); }
.demo-root .card[hidden] { display: none; }
.demo-root .card .thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--r-sm); background: var(--bg); }
.demo-root .card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.demo-root .card .dur { position: absolute; right: 8px; bottom: 8px; font-size: 12px; line-height: 1; padding: 5px 8px; background: rgba(6, 41, 64, .82); color: #fff; border-radius: var(--r-sm); }
.demo-root .card .body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 4px 0; }
.demo-root .card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.demo-root .card .tag { font-size: 11.5px; font-weight: 700; color: var(--blue); padding: 2px 10px; background: var(--blue-pale); border-radius: 999px; }
.demo-root .card .ttl { display: block; font-weight: 700; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.demo-root .card .ttl .num { margin-right: .5em; font-size: 13px; font-weight: 700; color: var(--blue); }
.demo-root .card:hover .ttl { color: var(--blue); }
.demo-root .card .desc { display: -webkit-box; margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.demo-root .card .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.demo-root .chip { display: inline-block; font-size: 12px; line-height: 1.6; padding: 2px 10px; border-radius: 999px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); }
.demo-root .chip:hover { color: var(--ink-soft); border-color: var(--line); }
.demo-root .chip.seal { color: var(--orange); background: var(--orange-pale); border-color: transparent; font-weight: 700; }
.demo-root .chip .mono { font-size: 12px; }
.demo-root .card .foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--ink-mute); }
.demo-root .card .foot:empty { display: none; }
.demo-root .card .has-short { color: var(--blue); font-weight: 700; }
.demo-root .cards.small { gap: 20px 18px; }
.demo-root .cards.small .card .ttl { font-size: 15px; }
.demo-root .cards.small .card .desc, .demo-root .cards.small .card .tags, .demo-root .cards.small .card .chips { display: none; }
.demo-root .list .empty { margin: 24px 0 0; font-size: 14px; color: var(--ink-soft); }

/* ---- 3つの重要性（白カード・番号は本体の .work-card .num） */
.demo-root .vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.demo-root .vcards > li { display: flex; flex-direction: column; padding: 28px 26px 22px; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.demo-root .vcards .gkey { margin: 0 0 12px; font-family: var(--font-num); font-weight: 300; font-size: 40px; line-height: 1; color: var(--blue); }
.demo-root .vcards h3 { font-size: 19px; line-height: 1.5; }
.demo-root .vcards .closing { margin: 10px 0 12px; padding-left: 12px; border-left: 3px solid var(--blue); font-size: 14.5px; font-weight: 700; line-height: 1.8; }
.demo-root .vcards .evi { margin: 0 0 12px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.demo-root .vcards .evi .mono { font-size: 14px; font-weight: 700; color: var(--blue); }
.demo-root .vcards .forms { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.demo-root .vcards .forms li { display: block; padding: 1px 8px; font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.demo-root .vcards .minihead { margin: auto 0 4px; font-size: 12px; font-weight: 700; color: var(--ink-mute); }
.demo-root .vcards .mini { border-top: 1px solid var(--line); }
.demo-root .vcards .mini li a { display: grid; grid-template-columns: 64px 2.2em minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.demo-root .vcards .mini li a:hover { text-decoration: none; color: var(--blue); }
.demo-root .vcards .mini img { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; }
.demo-root .vcards .mini .num { font-size: 12px; font-weight: 700; color: var(--blue); }
.demo-root .vcards .mini .ttl { font-size: 14px; font-weight: 700; }

/* ---- 動画の見方 */
.demo-root .kata-list { counter-reset: k; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 6px 26px; }
.demo-root .kata-list li { display: grid; grid-template-columns: 2.2em 6em minmax(0, 1fr); gap: 0 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); counter-increment: k; }
.demo-root .kata-list li:last-child { border-bottom: 0; }
.demo-root .kata-list li::before { content: counter(k, decimal-leading-zero); font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--blue); }
.demo-root .kata-list .cname { font-weight: 700; font-size: 16px; }
.demo-root .kata-list .cdesc { font-size: 14px; color: var(--ink-soft); line-height: 1.9; }

/* ---- 締め（本体の Contact ブロックと同じ紺の板） */
.demo-root .close { margin-top: 72px; padding: 48px clamp(24px, 4vw, 56px); border-radius: var(--r-section); background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); color: #fff; }
.demo-root .close h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.5; color: #fff; }
.demo-root .close p { max-width: 52em; margin: 16px 0 0; font-size: 15px; line-height: 2; color: rgba(255, 255, 255, .88); }
.demo-root .close .seal { color: #fff; border-bottom: 2px solid var(--orange); }

/* ---- 本ページ（動画＋解説＋章立て） */
.demo-root .crumb { margin: 0 0 18px; font-size: 13px; font-weight: 600; }
.demo-root .story { scroll-margin-top: 100px; }
.demo-root .bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; }
.demo-root .bar .num { font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--blue); }
.demo-root .bar h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; }
.demo-root .bar .spacer { flex: 1; }
.demo-root .bar .deep { font-size: 12.5px; font-weight: 600; }
.demo-root .ver { display: inline-flex; gap: 4px; padding: 3px; background: #e9edf2; border-radius: 999px; }
.demo-root .ver button { all: unset; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.4; padding: 5px 14px; border-radius: 999px; color: var(--ink-soft); }
.demo-root .ver button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.demo-root .ver button:disabled { cursor: default; color: var(--ink-mute); }
.demo-root .stage video { display: block; width: 100%; aspect-ratio: 16/9; background: #062940; border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.demo-root .novideo { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-mute); }
.demo-root .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 40px; padding-top: 28px; }
.demo-root .cmd { margin: 0 0 18px; padding: 14px 18px; font-size: 14.5px; line-height: 1.7; color: var(--ink); background: var(--blue-pale); border-left: 3px solid var(--blue); border-radius: var(--r-sm); white-space: pre-wrap; word-break: break-all; }
.demo-root dl.facts { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.demo-root dl.facts dt { font-size: 13px; font-weight: 700; color: var(--ink-mute); padding-top: 2px; }
.demo-root dl.facts dd { margin: 0; }
.demo-root .facts .chip { margin-top: 5px; }
.demo-root .meta { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-mute); }
.demo-root .speaker { display: none; }
.demo-root .speaker .line { margin: 0 0 20px; font-size: 22px; line-height: 1.7; font-weight: 700; }
.demo-root .speaker .line .lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.demo-root .chapters h3 { display: flex; align-items: center; gap: 10px; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.demo-root .chapters h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.demo-root .chapter-list li button { all: unset; cursor: pointer; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 9px 6px; border-bottom: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-family: inherit; }
.demo-root .chapter-list li button:hover { background: #fff; }
.demo-root .chapter-list li button .mark { width: 8px; height: 8px; border: 2px solid var(--line-blue); border-radius: 50%; }
.demo-root .chapter-list li.current button { color: var(--blue); }
.demo-root .chapter-list li.current button .mark { background: var(--blue); border-color: var(--blue); }
.demo-root .chapter-list li button .cname { font-size: 14.5px; font-weight: 600; }
.demo-root .chapter-list li button .t { font-family: var(--font-num); font-size: 12.5px; color: var(--ink-mute); }
.demo-root .prevnext-row { display: flex; justify-content: space-between; gap: 20px; margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.demo-root .related { margin-top: 56px; }
.demo-root .related h3 { font-size: 18px; margin-bottom: 18px; }
.demo-root .related h3 small { margin-left: 1em; font-weight: 500; font-size: 12.5px; color: var(--ink-mute); }

/* ---- 講演者モード（?p=1）— 解説の欄を台詞メモ3点に。文字を1.5倍 */
body.speaker-mode .demo-root .notes { display: none; }
body.speaker-mode .demo-root .speaker { display: block; }
body.speaker-mode .demo-root .speaker .line { font-size: 34px; line-height: 1.6; }
body.speaker-mode .demo-root .chapter-list li button .cname { font-size: 21px; }
body.speaker-mode .demo-root .chapter-list li button .t { font-size: 16px; }
body.speaker-mode .demo-root .chapter-list li button { padding: 11px 6px; }

/* ---- 幅 */
@media (max-width: 1000px) {
  .demo-root .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .demo-root .vcards { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .demo-root .two-col { grid-template-columns: 1fr; gap: 30px; }
  .demo-root .speaker .line { font-size: 19px; }
  body.speaker-mode .demo-root .speaker .line { font-size: 27px; }
  .demo-root .kata-list { padding: 4px 18px; }
  .demo-root .kata-list li { grid-template-columns: 2.2em minmax(0, 1fr); }
  .demo-root .kata-list .cdesc { grid-column: 2; }
}
@media (max-width: 767px) {
  .demo-root .wrap { padding: 0 20px; }
  .demo-root .sec-head { margin-top: 56px; }
}
@media (max-width: 720px) {
  .demo-root { padding-top: 120px; }
}
@media (max-width: 640px) {
  .demo-root .cards { grid-template-columns: 1fr; }
  .demo-root .close { padding: 36px 24px; }
  .demo-root .prevnext-row { flex-direction: column; }
}

/* ---- 動画の見方（2系列）・締めのリンク・見方の1枚（/demo/mikata/）— 2026-09-13 世界観を1枚に揃える */
.demo-root .kata-h { margin: 26px 0 8px; font-size: 16px; font-weight: 700; }
.demo-root .kata-h small { margin-left: 1em; font-weight: 500; font-size: 12.5px; color: var(--ink-mute); }
.demo-root .close .more { margin-top: 24px; font-size: 15px; }
.demo-root .close .more a { color: #fff; font-weight: 700; border-bottom: 2px solid var(--orange); }
.demo-root .close .more a:hover { text-decoration: none; opacity: .85; }
.demo-root.mikata-page .wrap { max-width: 1000px; }
.demo-root .mikata { margin-top: 8px; }
.demo-root .mikata h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.4; margin: 0 0 8px; }
.demo-root .mikata h2 { font-size: 20px; margin: 40px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.demo-root .mikata .sub { color: var(--ink-soft); font-size: 14px; line-height: 2; margin: 0 0 16px; }
.demo-root .mikata .one { font-size: 17px; font-weight: 700; line-height: 1.7; padding: 14px 20px; border-left: 5px solid var(--orange); background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-card); margin: 16px 0; }
.demo-root .mikata .one.two { border-left-color: var(--blue); }
.demo-root .mikata table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; margin: 10px 0; table-layout: fixed; background: #fff; }
.demo-root .mikata th, .demo-root .mikata td { padding: 9px 12px; vertical-align: top; border-bottom: 1px solid var(--line); text-align: left; }
.demo-root .mikata th { font-weight: 700; background: var(--bg); color: var(--ink-soft); }
.demo-root .mikata table.law th:nth-child(1), .demo-root .mikata table.law td:nth-child(1) { width: 22%; }
.demo-root .mikata table.law th:nth-child(2), .demo-root .mikata table.law td:nth-child(2) { width: 36%; }
.demo-root .mikata table.out th:nth-child(1), .demo-root .mikata table.out td:nth-child(1) { width: 48%; }
.demo-root .mikata .L { color: var(--blue); } .demo-root .mikata .R { color: var(--orange); }
.demo-root .mikata .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.demo-root .mikata .kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0 14px; }
.demo-root .mikata .kpi .n { font-family: var(--font-num); font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--blue); }
.demo-root .mikata .kpi .l { font-size: 12.5px; color: var(--ink-soft); }
.demo-root .mikata .next { background: var(--blue-pale); border-left: 5px solid var(--blue); border-radius: var(--r-sm); padding: 14px 20px; margin-top: 26px; font-size: 15px; line-height: 1.9; }
.demo-root .mikata ul { margin: 6px 0; padding-left: 18px; } .demo-root .mikata li { margin: 4px 0; }
.demo-root .mikata-foot { margin-top: 30px; font-size: 14px; color: var(--ink-soft); line-height: 1.9; }
@media (max-width: 720px) { .demo-root .mikata .cols2 { grid-template-columns: 1fr; } .demo-root .mikata .kpi { grid-template-columns: repeat(2, 1fr); } .demo-root .mikata table { font-size: 12.5px; } .demo-root .mikata th, .demo-root .mikata td { padding: 6px 6px; } }
.demo-root .vcards .forms li.rest { background: transparent; border-color: transparent; color: var(--ink-mute); }