:root{--ink:#142643;--muted:#5f6f86;--line:#e2e8f1;--paper:#f3f6fb;--blue:#0755ae;--blue-d:#05468f;--blue-soft:#e8f1fd;--line-green:#06c755;--warn:#9a5b00;--warn-bg:#fff3df;--radius:18px}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:#f5f8fc;line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:var(--blue)}
.wrap{max-width:480px;margin:0 auto;padding:0 16px 40px}
.wide{max-width:1100px}
.top{display:flex;align-items:center;gap:8px;padding:14px 0 6px}
/* 左上はリアリー公式ロゴ（357×72の透過PNG。比率を保って幅だけ決める）。右にこの画面の名前 */
.logo{display:block;flex:none;width:128px;height:auto;aspect-ratio:357/72}
.top b{min-width:0;font-size:14px;line-height:1.35;letter-spacing:.02em;padding-left:10px;border-left:1px solid var(--line);word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:359px){.logo{width:112px}.top b{font-size:13px;padding-left:8px}}
@media (min-width:880px){.logo{width:152px}.top b{font-size:15px}}
.top .sp{flex:1}
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.tag.kari{background:var(--warn-bg);color:var(--warn)}
.tag.blue{background:var(--blue-soft);color:var(--blue)}
h1{font-size:24px;line-height:1.45;margin:14px 0 6px;letter-spacing:.01em}
.lead{color:var(--muted);font-size:14px;margin:0 0 18px}
.card{background:#fff;border-radius:var(--radius);box-shadow:0 1px 2px #1426430a,0 10px 28px #1426430d;padding:20px}
/* 入口 */
.entries{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 22px}
.entry{display:grid;justify-items:center;gap:8px;text-decoration:none;color:var(--ink);text-align:center}
.entry .disc{width:100%;max-width:170px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;gap:2px;color:#fff;box-shadow:0 10px 24px #0755ae33;transition:transform .15s}
.entry:hover .disc,.entry:focus-visible .disc{transform:translateY(-2px)}
.entry:focus-visible{outline:none}
.entry:focus-visible .disc{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--blue)}
.entry .disc b{font-size:34px;line-height:1}
.entry .disc span{font-size:13px;font-weight:700}
.entry.q10 .disc{background:linear-gradient(150deg,#2b7fd8,#0755ae)}
.entry.q30 .disc{background:linear-gradient(150deg,#13928e,#0a5f76)}
.entry small{font-size:12.5px;color:var(--muted);line-height:1.5}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.type{border-radius:12px;padding:10px 8px;color:#fff;font-size:12.5px;font-weight:700;text-align:center;line-height:1.4}
.note{font-size:12.5px;color:var(--muted);line-height:1.7;margin:14px 0 0}
.note li{margin:2px 0}
/* 開始のファーストビュー（キャラクター画像3:4＋問数＋スタート。タイトルは画像の中にあるので、見出しは読み上げ用だけ） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero{position:relative;left:50%;transform:translateX(-50%);width:min(1040px,calc(100vw - 32px));display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "act" "copy";gap:12px;margin:2px 0 22px}
.hero-copy{grid-area:copy;display:grid;gap:6px}
.hero-label{font-size:12.5px;font-weight:700;color:var(--blue);margin:0}
.hero-lead{font-size:14px;color:var(--muted);margin:0;line-height:1.65}
.hero-photo{grid-area:photo;position:relative;margin:0 auto;width:min(100%,360px);aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#fff}
.hero-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:6px;padding:6px;background:#fff}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-act{grid-area:act;display:grid;gap:10px;align-content:start}
@media (min-width:880px){
  .hero{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"photo copy" "photo act";column-gap:48px;row-gap:16px;align-items:end;margin:16px 0 40px}
  .hero-photo{width:100%;max-width:520px;margin:0}
  .hero-copy{align-self:end}
  .hero-act{align-self:start}
  .hero-lead{font-size:15.5px}
}
/* 回答後の受け取り画面（FVのキャラクター画像の上の段・下の段を帯にして使う） */
.done{position:relative;left:50%;transform:translateX(-50%);width:min(1040px,calc(100vw - 32px));display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "bottom";gap:14px;margin:2px 0 18px}
.done-cast{position:static;padding:0;background-color:#e6edf6;background-image:url("FVキャラクター.png");background-repeat:no-repeat;background-size:100% auto;border-radius:8px}
.done-cast-top{grid-area:top;aspect-ratio:1086/512;background-position:center top}
.done-cast-bottom{grid-area:bottom;aspect-ratio:1086/551;background-position:center bottom}
.done-main{grid-area:main;display:grid;gap:10px;align-content:start}
.done-title{font-size:26px;line-height:1.35;margin:0;font-weight:800;color:var(--ink)}
.done-line{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:180px}
.done-line span{height:5px;border-radius:2px}
.done-why{font-size:14.5px;line-height:1.7;margin:0;color:var(--ink)}
.demo-flag{font-size:12.5px;line-height:1.6;margin:0;color:var(--warn);background:var(--warn-bg);border-radius:6px;padding:8px 10px}
.done .btn.line{border-radius:8px}
.done .nav{margin-top:0}
@media (min-width:880px){
  .done{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"top main" "bottom main";column-gap:48px;row-gap:10px;align-items:start;margin:16px 0 30px}
  .done-main{align-self:center;gap:14px}
  .done-title{font-size:36px}
  .done-why{font-size:15.5px}
}
.t6{margin:6px 0 18px}
.t6 h2{font-size:17px;margin:0 0 8px}
.t6 ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.t6 li{background:#fff;border-left:6px solid var(--c);border-radius:6px;padding:9px 12px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.t6 li b{display:block;color:var(--ink);font-size:15px}
.t6 .note{margin-top:8px}
/* 開始の操作 */
.start-box{display:grid;gap:12px;margin:4px 0 10px}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk{appearance:none;text-align:left;border:2px solid var(--line);background:#fff;border-radius:8px;padding:12px 12px;cursor:pointer;display:grid;gap:2px}
.pk b{font-size:15.5px}
.pk small{font-size:12px;color:var(--muted);line-height:1.5}
.pk[aria-checked="true"]{border-color:var(--blue);background:var(--blue-soft)}
.pk[aria-checked="true"] b{color:var(--blue)}
.pk:focus-visible{outline:3px solid #9cbcf0;outline-offset:2px}
.btn.start{width:100%;flex:none;font-size:17px;padding:15px 18px;border-radius:8px;box-shadow:none}
.direct{font-size:12.5px;color:var(--muted);margin:2px 0 10px}
.fv{text-align:left}
.fv-title{font-size:28px;line-height:1.35;margin:4px 0 8px;letter-spacing:.02em}
.fv-resume{font-size:13.5px;color:var(--blue);font-weight:700;margin:0 0 10px}
.fv-btns{display:grid;gap:10px}
.fv .note{margin-top:14px}
.fv-link{display:inline-block;margin-top:10px;font-size:13px}
/* 設問 */
.prog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin:8px 0 10px}
.bar{flex:1;height:8px;border-radius:999px;background:#dde6f3;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:999px;transition:width .25s}
.qno{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.08em}
.qtext{font-size:19px;font-weight:700;line-height:1.55;margin:4px 0 16px}
.opts{display:grid;gap:10px}
.opt{appearance:none;text-align:left;width:100%;border:2px solid var(--line);background:#fff;border-radius:14px;padding:13px 14px;font-size:15.5px;line-height:1.5;cursor:pointer;display:flex;gap:10px;align-items:center;transition:border-color .12s,background .12s}
.opt::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #b7c4d6;background:#fff}
.opt:hover{border-color:#b9cdea}
.opt:focus-visible{outline:3px solid #9cbcf0;outline-offset:2px}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft)}
.opt[aria-pressed="true"]::before{border-color:var(--blue);background:radial-gradient(circle,var(--blue) 45%,#fff 50%)}
.scale .opt{padding:11px 14px;font-size:15px}
.nav{display:flex;gap:10px;margin-top:18px}
.btn{appearance:none;border:0;border-radius:999px;padding:13px 18px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:6px}
.btn.main{flex:1;background:var(--blue);color:#fff}
.btn.main:disabled{background:#b8c6da;cursor:not-allowed}
.btn.sub{background:#fff;color:var(--blue);border:2px solid #cfdcef}
.btn.line{width:100%;background:var(--line-green);color:#fff;font-size:16px;padding:15px 18px}
.btn:focus-visible{outline:3px solid #9cbcf0;outline-offset:2px}
.warn{color:#b3403f;font-size:13px;margin:10px 0 0;min-height:1.4em}
.reset{display:inline-block;margin-top:18px;font-size:13px;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.chip{appearance:none;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font-size:13.5px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:700}
.chip:focus-visible{outline:3px solid #9cbcf0;outline-offset:2px}
.ptitle{font-weight:700;font-size:14.5px;margin:12px 0 0}
.receive{text-align:center}
.receive svg{width:120px;height:120px;margin:4px auto 8px;display:block}
.demo-note{background:var(--warn-bg);color:var(--warn);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.6;margin:14px 0 0;text-align:left}
/* LINEデモ */
.band{position:sticky;top:0;z-index:5;background:#fff4dc;color:#7a4a00;border-bottom:1px solid #f0d9a8;text-align:center;font-weight:700;font-size:13px;padding:8px 12px}
.demo-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:22px;align-items:start;margin-top:14px}
.phone{width:100%;max-width:340px;margin:0 auto;border-radius:34px;background:#13233d;padding:9px;box-shadow:0 14px 34px #14264330}
.screen{border-radius:26px;overflow:hidden;background:#8fa6cf;display:flex;flex-direction:column;height:620px}
.sb{display:flex;justify-content:space-between;color:#fff;font-size:11px;padding:6px 18px 2px;background:#13233d}
.lh{display:flex;align-items:center;gap:8px;background:#fff;padding:9px 12px;font-size:13.5px}
.lh b{flex:1;text-align:center;font-weight:700}
.talk{flex:1;overflow-y:auto;padding:10px 8px 14px;overscroll-behavior:contain}
.row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;align-items:start}
.av{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:14px}
.msg{background:#fff;border-radius:16px;padding:11px 12px;font-size:13.5px;line-height:1.6;color:#333;overflow-wrap:anywhere}
.msg .l{white-space:pre-wrap;min-height:1.6em}
.msg .gap{min-height:.8em}
.msg hr{border:0;border-top:2px solid #9a9a9a;margin:6px 4px}
.msg .nm{background:#fff1c9;border-radius:4px;padding:0 3px}
.lbtn{display:block;width:100%;margin-top:10px;border:0;border-radius:8px;background:#2b7cc0;color:#fff;font-weight:700;font-size:13.5px;padding:10px 8px;cursor:pointer}
.ib{display:flex;align-items:center;gap:8px;background:#fff;padding:9px 12px;font-size:12px;color:#9aa8bb}
.ib i{flex:1;font-style:normal;background:#f1f4f8;border-radius:999px;padding:5px 12px}
.side h2{font-size:17px;margin:0 0 6px}
.side p{margin:0 0 10px;font-size:14px;color:var(--muted)}
.scores{display:grid;gap:7px;margin:8px 0 4px}
.sc{display:grid;grid-template-columns:7.5em minmax(0,1fr) 3.2em;gap:8px;align-items:center;font-size:13px}
.sc .b{height:10px;border-radius:999px;background:#e6ecf5;overflow:hidden}
.sc .b i{display:block;height:100%;border-radius:999px}
.sc .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.rules{font-size:12.5px;color:var(--muted);margin:6px 0 0;padding-left:1.2em}
.rules li{margin:3px 0}
.rail{display:flex;gap:16px;overflow-x:auto;padding:6px 4px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rail:focus-visible{outline:3px solid #9cbcf0;outline-offset:2px}
.mini{flex:0 0 250px;scroll-snap-align:start;display:grid;gap:6px}
.mini .cap{margin:0;font-size:12px;color:var(--muted);line-height:1.45;height:2.9em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mini .cap b{display:block;color:var(--ink);font-size:13px}
.mini .phone{max-width:250px;border-radius:28px;padding:7px}
.mini .screen{height:520px;border-radius:22px}
.mini .msg{font-size:12.5px}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin:34px 0 4px}
.sec-h h2{font-size:18px;margin:0}
.sec-h p{margin:0;font-size:13px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:20;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:820px){.demo-grid{grid-template-columns:minmax(0,1fr)}.screen{height:560px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}