/* ============================================================================
   体験デモ（welconvo.com/demo/。2026年10月12日・ご本人の決定。設計は docs/次の実装_体験デモ.md）
   前半の .sd-* は、管理画面の営業の型の診断（dashboard/src/styles.css）の写し（ご本人「今の管理画面と同じもの」）。
   後半の .dm-* は、入力・6桁の番号・見本のサイトを見る画面。
   このページは CSP で style 属性を許していないので、見た目はすべてこのファイルに置く。
   ============================================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.7 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  background: #070A18; color: #EEF2FF; }
[hidden] { display: none !important; }
button, input { font: inherit; }

/* ============================================================================
   営業の型の診断（2026年10月4日・149・ご本人の指示「AI感のある、おしゃれなデザイン」「アイコン」「モーション」）
   画面いっぱいの暗い面に、ゆっくり動く光を置き、その上にすりガラスの板を重ねる。
   絵文字は使わない（アイコンはすべて SVG）。動きを減らす設定の方には、動きを止める。
   ============================================================================ */
.sd { position: fixed; inset: 0; z-index: 90; overflow-y: auto; color: #EEF2FF;
  background: radial-gradient(120% 90% at 10% 0%, #1B2350 0%, #0B1024 55%, #070A18 100%);
  animation: sd-fade .35s ease both; -webkit-font-smoothing: antialiased; }
.sd-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.sd-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.sd-orb.o1 { width: 520px; height: 520px; left: -140px; top: -160px; background: #2E6BFF; animation: sd-drift1 18s ease-in-out infinite alternate; }
.sd-orb.o2 { width: 460px; height: 460px; right: -120px; top: 18%; background: #7B5CFF; animation: sd-drift2 22s ease-in-out infinite alternate; }
.sd-orb.o3 { width: 380px; height: 380px; left: 30%; bottom: -200px; background: #14B8C9; opacity: .32; animation: sd-drift3 26s ease-in-out infinite alternate; }
.sd-grid { position: absolute; inset: 0; opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%); }

.sd-wrap { position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 40px 16px; }
.sd-card { position: relative; width: 100%; max-width: 760px; border-radius: 24px; padding: 28px 32px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(3,6,20,.55), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: sd-rise .55s cubic-bezier(.2,.8,.2,1) both; }

.sd-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sd-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #DCE4FF;
  background: linear-gradient(90deg, rgba(46,107,255,.28), rgba(123,92,255,.28));
  border: 1px solid rgba(160,175,255,.28); }
.sd-chip svg { width: 15px; height: 15px; color: #A9BBFF; animation: sd-twinkle 2.8s ease-in-out infinite; }
.sd-stepno { margin-left: auto; font-size: 12px; color: #9AA8D0; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.sd-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: #C9D3F2; cursor: pointer; font-size: 18px; line-height: 1; }
.sd-x:hover { background: rgba(255,255,255,.1); }

.sd-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 26px; }
.sd-bar i { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; position: relative; }
.sd-bar i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #4C8DFF, #9B7BFF); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.sd-bar i.on::after { transform: scaleX(1); }
.sd-bar i.now::after { transform: scaleX(1); background: linear-gradient(90deg, #4C8DFF, #9B7BFF, #4C8DFF);
  background-size: 200% 100%; animation: sd-flow 2.2s linear infinite; }

.sd-stage { position: relative; }
.sd-in-f { animation: sd-in-f .45s cubic-bezier(.2,.8,.2,1) both; }
.sd-in-b { animation: sd-in-b .45s cubic-bezier(.2,.8,.2,1) both; }

.sd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #8FA6FF; margin-bottom: 8px; }
.sd-title { font-size: 25px; line-height: 1.45; font-weight: 800; letter-spacing: .01em; color: #fff; }
.sd-sub { font-size: 14px; line-height: 1.8; color: #AEB9DA; margin-top: 6px; }

.sd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.sd-opt { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 16px 16px; border-radius: 16px; color: #EEF2FF;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  animation: sd-pop .5s cubic-bezier(.2,.8,.2,1) both; }
.sd-opt:hover { transform: translateY(-2px); background: rgba(255,255,255,.075); border-color: rgba(150,170,255,.45);
  box-shadow: 0 10px 30px rgba(46,107,255,.18); }
.sd-opt:focus-visible { outline: 2px solid #8FA6FF; outline-offset: 2px; }
.sd-opt .ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: #CFD9FF; background: linear-gradient(135deg, rgba(76,141,255,.28), rgba(155,123,255,.28));
  border: 1px solid rgba(170,185,255,.25); transition: transform .25s ease; }
.sd-opt:hover .ic { transform: scale(1.06) rotate(-3deg); }
.sd-opt .ic svg { width: 23px; height: 23px; }
.sd-opt .tx { flex: 1; min-width: 0; }
.sd-opt .lb { font-size: 15px; font-weight: 700; line-height: 1.5; }
.sd-opt .sb { font-size: 12.5px; color: #9AA8D0; margin-top: 2px; line-height: 1.6; }
.sd-opt .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25);
  display: grid; place-items: center; transition: all .2s ease; }
.sd-opt .ck svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.4); transition: all .25s cubic-bezier(.2,.8,.2,1); }
.sd-opt.sel { border-color: transparent; background: linear-gradient(rgba(23,30,66,.92), rgba(23,30,66,.92)) padding-box,
  linear-gradient(120deg, #4C8DFF, #9B7BFF) border-box; border: 1px solid transparent;
  box-shadow: 0 0 0 4px rgba(110,130,255,.14), 0 14px 34px rgba(76,141,255,.25); }
.sd-opt.sel .ck { background: linear-gradient(135deg, #4C8DFF, #9B7BFF); border-color: transparent; }
.sd-opt.sel .ck svg { opacity: 1; transform: none; }
.sd-opt.picked { animation: sd-picked .42s ease both; }

.sd-foot { display: flex; align-items: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.sd-foot .sp { flex: 1; }
.sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  padding: 12px 20px; border-radius: 12px; font-size: 14.5px; font-weight: 700; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, opacity .2s; }
.sd-btn svg { width: 17px; height: 17px; }
.sd-btn:disabled { opacity: .55; cursor: default; }
.sd-btn.pri { color: #fff; background: linear-gradient(120deg, #3B7BFF, #7B5CFF); background-size: 160% 100%;
  box-shadow: 0 10px 28px rgba(76,110,255,.38); }
.sd-btn.pri:hover:not(:disabled) { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 14px 34px rgba(110,100,255,.48); }
.sd-btn.pri svg { transition: transform .2s ease; }
.sd-btn.pri:hover svg { transform: translateX(3px); }
.sd-btn.gho { color: #C9D3F2; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.sd-btn.gho:hover { background: rgba(255,255,255,.1); }
.sd-btn.back svg { transform: scaleX(-1); }

/* はじめの画面 */
.sd-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 4px; }
.sd-core { position: relative; width: 132px; height: 132px; margin: 4px 0 22px; display: grid; place-items: center; }
.sd-core .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(150,170,255,.35);
  animation: sd-ring 3.2s ease-out infinite; }
.sd-core .ring.r2 { animation-delay: 1.07s; } .sd-core .ring.r3 { animation-delay: 2.14s; }
.sd-core .arc { position: absolute; inset: 10px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, #4C8DFF 75%, #9B7BFF 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: sd-spin 2.6s linear infinite; }
.sd-core .dot { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #7FA8FF, #5B4BFF 60%, #2A1F8F);
  box-shadow: 0 0 40px rgba(110,120,255,.7), inset 0 2px 10px rgba(255,255,255,.35);
  animation: sd-breathe 3.2s ease-in-out infinite; }
.sd-core .dot svg { width: 30px; height: 30px; color: #fff; }
/*  真ん中の玉の印は Welconvo のマーク（11/3 ご本人「このデモの中央の◇をアイコンに変えて」）。白くして、真ん中の星は抜いてある */
.sd-core .dot .sd-mark { display: block; width: 40px; height: 40px; background: #fff; -webkit-mask: url(/assets/brand/welconvo-mark.png?v=1) center / contain no-repeat; mask: url(/assets/brand/welconvo-mark.png?v=1) center / contain no-repeat; opacity: .95; } /* 11/8 ご本人「真ん中に W のロゴを」：前の Ainova の印のかわりに白い W */
.sd-feats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.sd-feat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-size: 13px;
  color: #D7DFFA; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  animation: sd-pop .55s cubic-bezier(.2,.8,.2,1) both; }
.sd-feat svg { width: 16px; height: 16px; color: #9DB2FF; }

/* 読み取り中 */
.sd-think { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 0 18px; }
.sd-think .sd-core { width: 150px; height: 150px; }
.sd-think-t { font-size: 16px; font-weight: 700; color: #fff; min-height: 1.6em; }
.sd-think-t span { display: inline-block; animation: sd-in-f .4s ease both; }
.sd-think-s { font-size: 12.5px; color: #8E9BC4; margin-top: 8px; letter-spacing: .12em; }
.sd-scan { width: 220px; height: 3px; border-radius: 3px; margin-top: 18px; overflow: hidden; background: rgba(255,255,255,.08); }
.sd-scan i { display: block; width: 40%; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #9B7BFF, transparent); animation: sd-scan 1.3s ease-in-out infinite; }

/* 結果 */
.sd-res-head { display: flex; align-items: center; gap: 20px; }
.sd-badge { position: relative; flex: none; width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #3B7BFF, #7B5CFF);
  box-shadow: 0 16px 40px rgba(90,100,255,.45), inset 0 1px 0 rgba(255,255,255,.35);
  animation: sd-badge .8s cubic-bezier(.2,1.3,.4,1) both; }
.sd-badge svg { width: 42px; height: 42px; }
.sd-badge::before { content: ""; position: absolute; inset: -8px; border-radius: 32px; border: 1px solid rgba(160,170,255,.4);
  animation: sd-ring 2.8s ease-out infinite; }
.sd-name { font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: .02em;
  background: linear-gradient(100deg, #FFFFFF 10%, #B9C8FF 50%, #D3B9FF 90%); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
.sd-catch { font-size: 14.5px; color: #C3CDEC; margin-top: 4px; line-height: 1.7; }
.sd-fit { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: #9DB2FF;
  padding: 4px 10px; border-radius: 999px; background: rgba(76,141,255,.14); border: 1px solid rgba(120,150,255,.25); }
.sd-fit svg { width: 13px; height: 13px; }
.sd-sec { margin-top: 24px; }
.sd-sec-t { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #8FA6FF; margin-bottom: 12px; }
.sd-sec-t svg { width: 15px; height: 15px; }
.sd-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; position: relative; }
.sd-flow::before { content: ""; position: absolute; left: 8%; right: 8%; top: 17px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #4C8DFF, #9B7BFF); transform-origin: left; animation: sd-draw 1s .25s cubic-bezier(.2,.8,.2,1) both; opacity: .6; }
.sd-step { position: relative; text-align: center; padding: 0 4px; animation: sd-pop .5s cubic-bezier(.2,.8,.2,1) both; }
.sd-step b { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  font-size: 14px; color: #fff; background: #151C3E; border: 2px solid #6C7DFF; box-shadow: 0 0 18px rgba(108,125,255,.5); }
.sd-step div { font-size: 13px; line-height: 1.7; color: #DCE3FA; margin-top: 10px; }
.sd-goals { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-goal { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px; font-size: 13px; font-weight: 600;
  color: #E3E9FF; background: rgba(123,92,255,.16); border: 1px solid rgba(160,140,255,.3); animation: sd-pop .5s cubic-bezier(.2,.8,.2,1) both; }
.sd-goal svg { width: 15px; height: 15px; color: #B7A6FF; }

/* ほかの型から選ぶ */
.sd-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.sd-types .sd-opt .rec { position: absolute; top: -9px; right: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #3B7BFF, #7B5CFF); }

/* 設定できた */
.sd-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 4px; }
.sd-okmark { width: 92px; height: 92px; margin-bottom: 18px; }
.sd-okmark circle { fill: none; stroke: url(#sdgrad); stroke-width: 4; stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: sd-stroke .7s cubic-bezier(.65,0,.45,1) forwards; }
.sd-okmark path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60; animation: sd-stroke .45s .55s cubic-bezier(.65,0,.45,1) forwards; }
.sd-next { margin-top: 18px; width: 100%; max-width: 520px; text-align: left; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,200,90,.08); border: 1px solid rgba(255,200,90,.28); font-size: 13.5px; line-height: 1.8; color: #F6E3B8; }

@keyframes sd-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sd-rise { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes sd-in-f { from { opacity: 0; transform: translateX(26px) } to { opacity: 1; transform: none } }
@keyframes sd-in-b { from { opacity: 0; transform: translateX(-26px) } to { opacity: 1; transform: none } }
@keyframes sd-pop { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes sd-picked { 0% { transform: scale(1) } 40% { transform: scale(.97) } 100% { transform: scale(1) } }
@keyframes sd-drift1 { to { transform: translate(120px, 90px) scale(1.1) } }
@keyframes sd-drift2 { to { transform: translate(-110px, 80px) scale(.92) } }
@keyframes sd-drift3 { to { transform: translate(-90px, -70px) scale(1.15) } }
@keyframes sd-flow { to { background-position: -200% 0 } }
@keyframes sd-twinkle { 0%,100% { transform: scale(1) rotate(0); opacity: 1 } 50% { transform: scale(.82) rotate(20deg); opacity: .7 } }
@keyframes sd-ring { from { transform: scale(.7); opacity: .9 } to { transform: scale(1.25); opacity: 0 } }
@keyframes sd-spin { to { transform: rotate(360deg) } }
@keyframes sd-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }
@keyframes sd-scan { from { transform: translateX(-110%) } to { transform: translateX(260%) } }
@keyframes sd-badge { from { opacity: 0; transform: scale(.4) rotate(-12deg) } to { opacity: 1; transform: none } }
@keyframes sd-draw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes sd-stroke { to { stroke-dashoffset: 0 } }

@media (max-width: 640px) {
  .sd-wrap { padding: 16px 16px 28px; align-items: flex-start; }
  .sd-card { padding: 22px 18px 20px; border-radius: 20px; }
  .sd-title { font-size: 21px; }
  .sd-opts, .sd-types { grid-template-columns: 1fr; }
  .sd-res-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sd-name { font-size: 26px; }
  .sd-flow { grid-template-columns: 1fr; gap: 10px; }
  .sd-flow::before { display: none; }
  .sd-step { display: flex; align-items: center; gap: 12px; text-align: left; }
  .sd-step div { margin-top: 0; }
  .sd-foot .sd-btn { flex: 1 1 auto; }
  .sd-foot .sp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sd *, .sd { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sd-orb { animation: none !important; }
}

/* ============================================================================
   体験デモの画面（.dm-*）
   ============================================================================ */
.dm-ic { display: contents; }
.dm-ic svg { width: 1em; height: 1em; }
.sd-chip .dm-ic svg { width: 15px; height: 15px; color: #A9BBFF; }
.sd-opt .ic .dm-ic svg { width: 23px; height: 23px; }
.sd-btn .dm-ic svg { width: 17px; height: 17px; }
.sd-badge .dm-ic svg { width: 42px; height: 42px; }
.sd-core .dot .dm-ic svg { width: 30px; height: 30px; color: #fff; }
.sd-feat .dm-ic svg, .sd-fit .dm-ic svg, .sd-sec-t .dm-ic svg { width: 15px; height: 15px; }
.sd-btn.back .dm-ic svg { transform: scaleX(-1); }
.sd-opts .dm-wide { grid-column: 1 / -1; }
.dm-center { justify-content: center; width: 100%; }
.dm-lead { margin-top: 22px; font-size: 14px; color: #C3CDEC; }
.dm-note-box { margin-top: 18px; padding: 12px 16px; border-radius: 12px; font-size: 14px;
  background: rgba(255,200,90,.08); border: 1px solid rgba(255,200,90,.28); color: #F6E3B8; }

.dm-form { margin-top: 18px; }
.dm-field { display: block; margin-top: 16px; }
.dm-lb { display: block; font-size: 13px; font-weight: 700; color: #DCE4FF; margin-bottom: 6px; }
.dm-hint { display: block; font-size: 12.5px; color: #8E9BC4; margin-top: 6px; line-height: 1.7; }
.dm-in { width: 100%; padding: 12px 14px; border-radius: 12px; color: #fff; font-size: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease; }
.dm-in::placeholder { color: #6F7BA3; }
.dm-in:focus { border-color: #8FA6FF; box-shadow: 0 0 0 4px rgba(110,130,255,.18); }
.dm-code { max-width: 260px; font-size: 28px; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.dm-err { color: #FFB4B4; font-size: 13px; margin-top: 6px; min-height: 0; }
.dm-err:empty { display: none; }
.dm-consent { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; margin-top: 20px;
  padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
  font-size: 13.5px; line-height: 1.8; color: #DCE3FA; }
.dm-consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: #7B5CFF; }
.dm-consent .dm-err { grid-column: 2; }
.dm-small { display: block; margin-top: 6px; font-size: 12.5px; color: #9AA8D0; }
.dm-small a { color: #A9BBFF; }
.dm-prog { margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); }
.dm-prog-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #DCE4FF; }
.dm-prog-t .dm-ic svg { width: 17px; height: 17px; color: #9DB2FF; }
.dm-prog .sd-scan { width: 100%; }
.dm-prog .sd-btn { margin-top: 10px; }
.sd-think .dm-prog { width: 100%; max-width: 420px; text-align: left; }
.sd-btn.dm-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.dm-keep { margin: 12px 2px 0; }
.dm-toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 12px; font-size: 14px; color: #fff; background: #1A2233;
  box-shadow: 0 14px 34px rgba(3,6,20,.4); animation: sd-pop .35s ease both; }
/* ご案内のボタンの欄（番号を待つ画面） */
.dm-cv { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); }
.dm-cv .dm-lb { margin-bottom: 2px; }
.dm-cv-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; align-items: flex-start; }
.dm-cv-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 36px; gap: 8px; width: 100%; }
.dm-cv-type { padding: 10px 10px; font-size: 14px; appearance: auto; }
.dm-cv-type option { color: #1A2233; }
.dm-cv-url { padding: 10px 12px; font-size: 14px; }
.dm-cv-x { border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.05); color: #C9D3F2; cursor: pointer; font-size: 18px; }
.dm-cv-x:hover { background: rgba(255,255,255,.1); }
@media (max-width: 640px) { .dm-cv-row { grid-template-columns: minmax(0, 1fr) 36px; } .dm-cv-url { grid-column: 1 / 2; } .dm-cv-x { grid-row: 1 / 3; grid-column: 2; } }
/* スマホの幅では、説明をサイトに重ねず、上の帯の下に並べる */
.dm-notes.inline { position: static; width: auto; padding: 8px 10px; gap: 8px; max-height: 42vh; overflow-y: auto; background: #0B1024; }
.dm-notes.inline .dm-note { font-size: 13px; padding: 10px 32px 10px 12px; }
.dm-noscript { color: #fff; text-align: center; padding: 40px 16px; }

/* 見本のサイトを見る画面 */
.dm-stage { position: fixed; inset: 0; display: flex; flex-direction: column; background: #0B1024; }
.dm-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex-wrap: wrap;
  background: #0B1024; border-bottom: 1px solid rgba(255,255,255,.1); }
.dm-bar .sp { flex: 1; }
.dm-brand { font-weight: 800; letter-spacing: .04em; color: #fff; }
.dm-co { font-size: 13px; color: #AEB9DA; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-pill { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; color: #DCE4FF;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-variant-numeric: tabular-nums; }
/* 残りの往復：あと1往復は黄色、0は赤で大きく（ご本人「もっと目立つように」） */
.dm-left.warn { color: #3A2600; background: #FFD66B; border-color: #FFD66B; font-weight: 800; }
.dm-left.done { color: #fff; background: #E5484D; border-color: #E5484D; font-weight: 800; font-size: 13.5px; padding: 6px 12px;
  box-shadow: 0 0 0 4px rgba(229,72,77,.25); }
.dm-left.bump { animation: dm-bump .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes dm-bump { 0% { transform: scale(1) } 40% { transform: scale(1.18) } 100% { transform: scale(1) } }
/* 購買意欲のゲージ（段階で色が変わる：情報収集＝青・検討中＝紫・購買意欲・高＝橙） */
.dm-heat { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; color: #DCE4FF; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); cursor: help; }
.dm-heat-l { color: #AEB9DA; }
.dm-heat { position: relative; cursor: default; }
.dm-q { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: transparent;
  color: #DCE4FF; font-size: 11.5px; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; margin-left: -4px; }
.dm-q:hover, .dm-q:focus-visible { background: rgba(255,255,255,.15); outline: none; }
.dm-pop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; width: 360px; max-width: calc(100vw - 24px);
  padding: 14px 16px; border-radius: 14px; white-space: normal; font-size: 13px; line-height: 1.75; color: #1A2233;
  background: #fff; border: 1px solid #DCE3FF; box-shadow: 0 18px 40px rgba(3,6,20,.35); }
.dm-pop b { display: block; font-size: 13.5px; margin-bottom: 4px; color: #1A2233; min-width: 0; text-align: left; }
.dm-pop p { margin: 6px 0 0; }
.dm-pop .dm-pop-cv { color: #3B4BD8; font-weight: 700; }
.dm-pop .dm-pop-st { color: #6B7689; font-size: 12px; }
.dm-heat-bar { position: relative; width: 80px; height: 8px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.12); }
.dm-heat-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px;
  background: linear-gradient(90deg, #4C8DFF, #7B9BFF); transition: width .8s cubic-bezier(.2,.8,.2,1), background .4s ease; }
/* ボタンを出す目安の位置（白い縦線） */
.dm-heat-bar em { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: #fff; border-radius: 2px; box-shadow: 0 0 4px rgba(255,255,255,.8); }
.dm-heat b { min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.dm-heat-st { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: rgba(76,141,255,.22); color: #CFD9FF; }
.dm-heat.s2 .dm-heat-bar i { background: linear-gradient(90deg, #4C8DFF, #9B7BFF); }
.dm-heat.s2 .dm-heat-st { background: rgba(155,123,255,.28); color: #E3D9FF; }
.dm-heat.s3 .dm-heat-bar i { background: linear-gradient(90deg, #9B7BFF, #FF9F43); }
.dm-heat.s3 .dm-heat-st { background: rgba(255,159,67,.3); color: #FFE2C4; }
.dm-seg { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); }
.dm-seg button { padding: 6px 12px; border: 0; background: transparent; color: #C9D3F2; cursor: pointer; font-size: 13px; white-space: nowrap; }
.dm-seg button + button { border-left: 1px solid rgba(255,255,255,.16); }
.dm-seg button.on { color: #fff; background: linear-gradient(120deg, #3B7BFF, #7B5CFF); }
.dm-show-sm { display: none; }
.dm-docs-full { display: none; }
@media (min-width: 1600px) { .dm-docs-full { display: inline; } .dm-docs-mid { display: none; } }
@media (max-width: 1499px) { .dm-hide-md { display: none !important; } }

.dm-view { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: stretch; background: #E9EDF5; }
.dm-view iframe { display: block; border: 0; background: #fff; }
.dm-view.pc iframe, .dm-view.native iframe { width: 100%; height: 100%; }
.dm-view.sp { align-items: center; padding: 18px; background: radial-gradient(120% 90% at 50% 0%, #1B2350 0%, #0B1024 60%, #070A18 100%); }
.dm-phone { position: relative; width: 390px; height: min(800px, 100%); padding: 34px 12px 14px; border-radius: 46px; background: #0d0f16;
  box-shadow: 0 30px 80px rgba(3,6,20,.6), inset 0 0 0 2px #2a2f3d; }
.dm-phone iframe { width: 100%; height: 100%; border-radius: 34px; }
/* 上の出っ張り（カメラ）は、画面の外の黒い縁に置く（サイトの見出しに重ねない） */
.dm-notch { position: absolute; top: 10px; left: 50%; width: 96px; height: 16px; margin-left: -48px; border-radius: 10px; background: #1c2030; z-index: 2; }

/* 案B：チャットの横に、1つずつ出す説明 */
.dm-notes { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 10px; width: 300px; pointer-events: none; }
.dm-view.pc .dm-notes { right: 440px; bottom: 28px; }
.dm-view.sp .dm-notes { left: calc(50% + 215px); bottom: 40px; }
.dm-view.native .dm-notes { left: 12px; right: 12px; top: 12px; width: auto; }
.dm-note { position: relative; pointer-events: auto; padding: 12px 34px 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.75;
  color: #1A2233; background: #fff; border: 1px solid #DCE3FF; box-shadow: 0 14px 34px rgba(10,20,50,.22);
  animation: sd-pop .45s cubic-bezier(.2,.8,.2,1) both; }
.dm-note .t { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #3B4BD8; margin-bottom: 2px; }
.dm-note.warn { border-color: #FEDF89; background: #FFFCF2; }
.dm-note.warn .t { color: #B54708; }
.dm-note-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: transparent; color: #6B7689; cursor: pointer; font-size: 16px; line-height: 1; }
.dm-note-x:hover { background: #F1F4FF; }

/* 終わり */
.dm-end { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(7,10,24,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-y: auto; }
.dm-end-card { max-width: 680px; background: linear-gradient(180deg, #1A2150, #10153A); }
.dm-end-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.dm-end-list .sd-feat { justify-content: flex-start; text-align: left; }

@media (max-width: 1180px) {
  .dm-view.sp .dm-notes { left: auto; right: 16px; }
}
@media (max-width: 1000px) {
  .dm-view.pc .dm-notes { right: auto; left: 16px; }
}
@media (max-width: 760px) {
  .dm-hide-sm { display: none !important; }
  .dm-docs-mid { display: none; }
  .dm-heat-l { display: none; }
  .dm-heat-bar { width: 64px; }
  .dm-show-sm { display: inline; }
  .dm-bar { gap: 8px; padding: 8px 10px; }
  .dm-co { max-width: 120px; }
  .dm-end-list { grid-template-columns: 1fr; }
}

/* このデモと本番の違い（10/17）。終わりの画面と同じ重ね方で、長い時は中だけ動く。
   白を基調にする（10/17 ご本人）。暗い色の決まり（.sd-card・.dm-end）を、この一覧の中だけ上書きする */
.dm-diff { z-index: 11; background: rgba(15,23,42,.38); }
.dm-diff .dm-diff-card { max-height: calc(100% - 24px); overflow-y: auto; max-width: 760px;
  background: #FFFFFF; border: 1px solid #E4E9F2; box-shadow: 0 24px 64px rgba(15,23,42,.22); }
.dm-diff .sd-eyebrow { color: #3B6BFF; }
.dm-diff .sd-title { color: #1A2233; }
.dm-diff .sd-sub { color: #5A6478; }
.dm-diff-list { display: grid; gap: 10px; margin-top: 16px; text-align: left; }
.dm-diff-item { background: #F6F8FC; border: 1px solid #E6EAF2; border-radius: 12px; padding: 10px 14px; }
.dm-diff-item.now { background: #FFF8E6; border-color: #F3C74F; }
.dm-diff-item b { display: block; color: #1A2233; font-size: 14px; margin-bottom: 4px; }
.dm-diff-item span { display: block; color: #4A5568; font-size: 13px; line-height: 1.75; white-space: pre-line; }