/* X Decision 紹介ページ（/bi）専用のスタイル。
   共通のトークン・部品は styles.css を使い、ここではこのページだけの部品を定義する。 */
:root{
  --surface-2: #ecf5f0;
  --warm: #c1843f;
  --warm-soft: #f3e6d2;
}

/* ---- ヒーロー（見出し＋動画） ---- */
.xd-hero{ padding:64px 0 56px; }
/* 製品名など、途中で改行させたくない語に付ける */
.nowrap{ white-space:nowrap; }

/* 左は見出し、右は補足文とボタン。下端をそろえて、左下に余白が残らないようにする。
   右の文章はこの高さに収まる長さ(3行程度)で書くこと。長くすると見出しより上にはみ出す。 */
.hero-intro{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; }
/* 幅が足りないとボタンが2段になって右側が縦に伸びるので、その手前で縦積みにする */
@media (max-width:1060px){ .hero-intro{ grid-template-columns:1fr; gap:4px; } }
.xd-hero .hero-ctas{ margin-top:26px; }
.hero-video{ margin:40px 0 0; }
.video-shell{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--border-strong); box-shadow:var(--shadow); background:#f5f9f6; aspect-ratio:16/9; max-width:100%; }
.video-shell video{ display:block; width:100%; height:100%; object-fit:cover; }
.video-toggle{ position:absolute; right:14px; bottom:14px; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(22,36,30,.72); color:#fff; font-size:12px; letter-spacing:-1px; display:flex; align-items:center; justify-content:center; }
.video-toggle:hover{ background:rgba(22,36,30,.88); }
.video-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* 動画の「拡大」ボタン（スマホで全画面再生するため）。
   一時停止ボタンの左隣に並べる。iOS Safari は要素の全画面化ができないため、
   JS 側で video.webkitEnterFullscreen() にフォールバックしている。 */
.video-expand{ right:62px; }
.video-expand svg{ display:block; }
.video-shell:fullscreen{ aspect-ratio:auto; width:100%; height:100%; border:none; border-radius:0; background:#000; }
.video-shell:-webkit-full-screen{ aspect-ratio:auto; width:100%; height:100%; border:none; border-radius:0; background:#000; }
.video-shell:fullscreen video{ object-fit:contain; }
.video-shell:-webkit-full-screen video{ object-fit:contain; }
.video-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
@media (max-width:700px){ .video-steps{ grid-template-columns:1fr 1fr; } }
.video-steps span{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2); }
.video-steps b{ width:22px; height:22px; flex:none; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hero-foot{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; margin-top:28px; }
@media (max-width:900px){ .hero-foot{ grid-template-columns:1fr; gap:0; } }
.hero-foot .hero-stats{ margin-top:0; }
.stat .n:not(.mono){ font-family:"Noto Sans JP",sans-serif; font-weight:700; font-size:22px; color:var(--accent); }
.status-line{ display:flex; align-items:flex-start; gap:10px; margin-top:26px; padding:14px 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px; font-size:13px; color:var(--ink-2); }
.status-line .dot{ width:6px; height:6px; border-radius:50%; margin-top:8px; flex:none; background:var(--warm); animation:pulse 2s ease-in-out infinite; }
.status-line b{ color:var(--ink); }

/* ---- 実際の画面（タブ＋画面モック） ---- */
.tabbar{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.tabbtn{ font-family:"Noto Sans JP",sans-serif; font-size:13.5px; font-weight:700; padding:10px 16px; border-radius:100px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); cursor:pointer; }
.tabbtn[aria-pressed="true"]{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tabbtn:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.tab-caption{ font-size:14px; color:var(--ink-2); margin:14px 2px 0; max-width:64ch; }
.frame-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.frame-hint{ display:none; font-size:11.5px; color:var(--muted); margin-top:8px; }
@media (max-width:960px){ .frame-hint{ display:block; } }
.appframe{ width:100%; background:var(--surface); border:1px solid var(--border-strong); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.appframe[hidden]{ display:none; }
.appframe-bar{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--grid); background:var(--surface-2); }
.appframe-bar .dots{ display:flex; gap:6px; flex:none; }
.appframe-bar .dots span{ width:9px; height:9px; border-radius:50%; background:var(--border-strong); }
.appframe-url{ flex:1; font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:4px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appframe-tag{ flex:none; font-size:11px; color:var(--warm); display:flex; align-items:center; gap:5px; }
.appframe-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--warm); }

  .xdframe .hb{ display:flex; flex-direction:column; gap:7px; }
  .xdframe .hr .hl{ display:flex; justify-content:space-between; gap:8px; font-size:10.5px; line-height:1.35; }
  .xdframe .hr .hn{ color:#4b5d54; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .xdframe .hr .hv{ color:#16241e; font-variant-numeric:tabular-nums; flex:none; }
  .xdframe .hbar{ height:11px; border-radius:2px 5px 5px 2px; margin-top:2px; }
  .xdframe .lg{ display:flex; gap:12px; font-size:10px; color:#4b5d54; margin-top:4px; }
  .xdframe .lg i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:0; }
  .xdframe .donut{ display:flex; flex-direction:column; align-items:center; gap:6px; }
  .xdframe .dl2{ width:100%; display:flex; flex-direction:column; gap:3px; font-size:10px; }
  .xdframe .dl2 div{ display:flex; gap:6px; align-items:center; }
  .xdframe .dl2 span{ flex:1; color:#4b5d54; white-space:nowrap; }
  .xdframe .dl2 i{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }
  .xdframe .dl2 b{ font-weight:500; color:#16241e; font-variant-numeric:tabular-nums; }
  .xdframe .dl2 em{ font-style:normal; color:#7c8c83; width:36px; text-align:right; font-variant-numeric:tabular-nums; }
  .xdframe .cap{ font-size:9.5px; color:#7c8c83; margin-top:4px; }
  .xdframe .hm{ border-collapse:separate; border-spacing:3px; font-size:10px; width:100%; }
  .xdframe .hm th{ font-weight:400; color:#7c8c83; text-align:right; padding:0 4px; white-space:nowrap; }
  .xdframe .hm tr:first-child th{ text-align:center; }
  .xdframe .hm td{ text-align:center; padding:3px 0; border-radius:3px; font-variant-numeric:tabular-nums; }
  .xdframe .hm td.na{ color:#9aab9f; background:#f5f9f6; }

  .xdframe{ min-width:900px; }
  .xdwin{ display:grid; background:#f5f9f6; color:#16241e; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; line-height:1.5; height:560px; }
  .xdwin.cols3{ grid-template-columns:200px minmax(0,1fr) 270px; }
  .xdwin.cols2{ grid-template-columns:200px minmax(0,1fr); }
  .xs{ background:#ecf5f0; border-right:1px solid #dde8e1; padding:12px 8px 8px; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
  .xs-brand{ display:flex; gap:7px; padding:0 6px 10px; }
  .xs-brand svg{ width:16px; height:16px; margin-top:2px; flex:none; }
  .xs-brand span{ display:block; font-weight:700; font-size:13px; }
  .xs-brand small{ display:block; font-size:10px; color:#3e6f5c; }
  .xs-new{ margin:0 4px; background:#3e6f5c; color:#fff; text-align:center; font-weight:700; font-size:12px; border-radius:6px; padding:6px; }
  .xs-t{ font-size:9.5px; font-weight:700; letter-spacing:.06em; color:#3e6f5c; padding:10px 8px 3px; }
  .xs-g{ margin-left:12px; border-left:1px solid #dde8e1; padding-left:5px; }
  .xs-i{ font-size:11.5px; color:#4b5d54; padding:3px 8px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .xs-i.on{ background:#c9e8d8; color:#3e6f5c; font-weight:700; }
  .xs-i b{ color:#3e6f5c; font-size:10px; }
  .xs-foot{ margin-top:auto; border-top:1px solid #dde8e1; padding-top:4px; }
  .xs-user{ display:flex; justify-content:space-between; align-items:center; gap:6px; padding:4px 8px 0; font-size:10.5px; color:#4b5d54; }
  .xs-user small{ display:block; font-size:9px; color:#9aab9f; }
  .xs-user span{ font-size:9px; border:1px solid #dde8e1; background:#fff; border-radius:4px; padding:0 5px; flex:none; }
  .xd-center{ display:flex; flex-direction:column; padding:16px 20px; gap:10px; min-width:0; }
  .xd-thread{ display:flex; flex-direction:column; gap:9px; }
  .xd-msg{ max-width:84%; padding:8px 12px; border-radius:12px; font-size:12.5px; line-height:1.65; }
  .xd-msg.user{ align-self:flex-end; background:#3e6f5c; color:#fff; border-bottom-right-radius:3px; }
  .xd-msg.ai{ align-self:flex-start; background:#fff; border:1px solid #dde8e1; border-bottom-left-radius:3px; }
  .xd-input{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; border:1px solid #c7dbd0; border-radius:10px; background:#fff; padding:7px 8px 7px 12px; font-size:12px; color:#9aab9f; }
  .xd-input b{ width:26px; height:26px; border-radius:50%; background:#3e6f5c; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
  .xd-panel{ background:#fff; border-left:1px solid #dde8e1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
  .xd-tabs{ display:flex; gap:4px; border-bottom:1px solid #dde8e1; padding:6px 8px 0; }
  .xd-tabs span{ font-size:11px; padding:4px 10px; color:#7c8c83; border-bottom:2px solid transparent; }
  .xd-tabs span.on{ color:#16241e; font-weight:700; border-color:#3e6f5c; }
  .xd-pbody{ padding:10px 12px 0; }
  .xd-ptitle{ font-size:10.5px; color:#4b5d54; padding-bottom:6px; }
  .xd-pick{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:10px 0 4px; font-size:9.5px; color:#7c8c83; }
  .xd-pick b{ font-weight:400; color:#16241e; border:1px solid #dde8e1; border-radius:4px; padding:0 6px; margin-right:5px; }
  .xd-pick i{ width:11px; height:11px; border-radius:3px; display:block; }
  .xd-pick i.sel{ outline:2px solid #3e6f5c; outline-offset:1px; }
  .xd-cond{ margin-top:8px; border-top:1px dashed #dde8e1; padding:8px 12px; }
  .xd-ch{ font-size:10.5px; font-weight:700; color:#4b5d54; display:flex; gap:6px; align-items:center; margin-bottom:5px; }
  .xd-ch em{ font-style:normal; font-size:9px; color:#fff; background:#3e6f5c; border-radius:100px; padding:0 7px; }
  .xd-cond dl{ margin:0; border:1px solid #3e6f5c; background:#ecf5f0; border-radius:6px; padding:5px 9px; font-size:10px; }
  .xd-cond dl div{ display:flex; gap:8px; padding:1px 0; }
  .xd-cond dt{ width:48px; flex:none; color:#7c8c83; }
  .xd-cond dd{ margin:0; }
  .xd-save{ padding:4px 12px 12px; }
  .xd-save span{ display:block; text-align:center; font-size:11.5px; font-weight:700; color:#3e6f5c; border:1px solid #c7dbd0; border-radius:6px; padding:6px; }
  .xd-page{ padding:14px 18px; min-width:0; overflow-y:auto; }
  .xd-back{ font-size:10.5px; color:#7c8c83; text-decoration:underline; }
  .xd-dhead{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-top:4px; }
  .xd-dhead h4, .xd-band h4{ margin:0; font-size:16px; font-family:inherit; }
  .xd-dhead p{ margin:0; font-size:10.5px; color:#7c8c83; }
  .xd-btns{ display:flex; gap:6px; flex:none; }
  .xd-btns span{ font-size:11px; font-weight:700; border-radius:6px; padding:5px 10px; white-space:nowrap; }
  .xd-btns .pri{ background:#3e6f5c; color:#fff; }
  .xd-btns .sec{ background:#fff; color:#3e6f5c; border:1px solid #c7dbd0; }
  .xd-note{ margin-top:8px; background:#ecf5f0; border-radius:6px; padding:6px 10px; font-size:10px; color:#4b5d54; line-height:1.6; }
  .xd-dcard{ margin-top:10px; display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:16px; background:#fff; border:1px solid #dde8e1; border-radius:8px; padding:12px 14px; }
  .xdframe .hb.big{ gap:12px; }
  .xdframe .hb.big .hl{ font-size:11.5px; }
  .xdframe .hb.big .hbar{ height:16px; }
  .xdframe .hb.sm{ gap:4px; }
  .xdframe .hb.sm .hbar{ height:8px; }
  .xd-addform{ border:1px solid #dde8e1; border-radius:8px; padding:10px; box-shadow:0 12px 28px -16px rgba(22,36,30,.3); font-size:10px; color:#4b5d54; }
  .xd-addform label{ display:block; margin:8px 0 3px; }
  .xd-addform p{ margin:4px 0 6px; color:#7c8c83; font-size:9.5px; }
  .xd-seg{ display:flex; gap:4px; }
  .xd-seg span{ flex:1; text-align:center; border:1px solid #dde8e1; border-radius:5px; padding:3px 0; }
  .xd-seg span.on{ background:#3e6f5c; border-color:#3e6f5c; color:#fff; font-weight:700; }
  .xd-sel{ border:1px solid #dde8e1; border-radius:5px; padding:4px 8px; color:#16241e; font-size:11px; }
  .xd-fnote{ background:#ecf5f0; border-radius:5px; padding:5px 7px; margin-bottom:8px; font-size:9.5px; line-height:1.55; }
  .xd-band{ margin-top:4px; display:flex; justify-content:space-between; align-items:center; background:#c9e8d8; border-radius:6px; padding:7px 12px; }
  .xd-band h4{ color:#3e6f5c; }
  .xd-band p{ margin:0; font-size:10px; }
  .xd-band span{ font-size:10.5px; background:#fff; border:1px solid #dde8e1; border-radius:5px; padding:2px 9px; color:#4b5d54; }
  .xd-grid{ margin-top:8px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .xd-tile{ background:#fff; border:1px solid #dde8e1; border-radius:8px; min-width:0; }
  .xd-tile.span3{ grid-column:span 3; }
  .xd-th{ padding:6px 10px 5px; border-bottom:1px solid #dde8e1; font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .xd-th small{ display:block; font-size:9px; color:#7c8c83; font-weight:400; }
  .xd-tb{ padding:7px 10px 8px; }
  .xd-tile.span3 .xd-tb .hm{ font-size:9.5px; }
  .xd-tile.span3 svg{ max-height:100px; }

/* ---- ロードマップ：完了済み ---- */
.rm.done{ background:var(--surface-2); }
.rm.done .tag{ color:var(--muted); }
.rm.done .tag::before{ content:"✓ "; color:var(--accent); }

/* ---- お問い合わせ ---- */
.xd-contact .info-row{ grid-template-columns:110px 1fr; }
.xd-contact .info-row .v a{ color:var(--accent); font-weight:700; text-decoration:none; word-break:break-all; }
.xd-contact .info-row .v a:hover{ text-decoration:underline; }

/* ---- 料金への導線（クリック計測用に .js-pricing / data-cta-location を付けてある） ---- */
.pricing-inline{ font-size:14px; color:var(--ink-2); margin:10px 2px 0; }
.pricing-inline a{ color:var(--accent); font-weight:700; text-decoration:none; }
.pricing-inline a:hover{ text-decoration:underline; }
.pricing-band{ margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--border); border-radius:18px; padding:22px 26px; }
.pricing-band .t{ font-family:"Shippori Mincho","Noto Sans JP",serif; font-weight:600; font-size:17px; }
.pricing-band .d{ font-size:13px; color:var(--ink-2); margin-top:4px; }
.pricing-band .btn{ flex:none; }
.pricing-cta-section{ padding:56px 0; }
.pricing-band.big{ margin-top:0; background:var(--surface); padding:28px 32px; box-shadow:var(--shadow); }
@media (max-width:600px){ .pricing-band{ padding:20px; } .pricing-band .btn{ width:100%; justify-content:center; } }
.xd-contact .info-row .v a{ color:var(--accent); font-weight:700; text-decoration:none; }