/* クイズツール 共通デザイン（顧客向けページ用）。play の配信ビューは別（play/index.html 内）。 */
:root{
  --ink:#2b3a6b; --muted:#6a7094; --ground:#f8ece3; --surface:#ffffff; --line:#e8d5cb; --outline:#2b3a6b;
  --primary:#3f729c; --primary-d:#2d5a80; --primary-soft:#dce9f3;
  --yellow:#f0c96a; --yellow-d:#c99b2e; --ok:#3d8a5a; --ok-soft:#dcefe2; --danger:#c4455e; --danger-soft:#fbe3e8; --warn-soft:#fbeec8;
  --blue:#cfe1ee; --green:#d3e8d8; --pink:#f7d5e0; --sun:#f8e6b9; --lilac:#dcd7f5;
  --radius:22px; --font:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;background:
  radial-gradient(circle at 0 0,#bcd5e3 0 120px,transparent 121px) fixed,
  radial-gradient(circle at 100% 0,#f1dfa6 0 120px,transparent 121px) fixed,
  radial-gradient(circle at 0 100%,#bfdcc5 0 110px,transparent 111px) fixed,
  radial-gradient(circle at 100% 100%,#f0bfd0 0 110px,transparent 111px) fixed,
  var(--ground);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.75;font-weight:500}
a{color:var(--primary-d)}
h1,h2,h3{line-height:1.4;margin:0;font-weight:900}
h1{font-size:28px}h2{font-size:21px}h3{font-size:18px}
p{margin:0 0 .8em}
.page{max-width:720px;margin:0 auto;padding:0 18px 64px}
.page.wide{max-width:1040px}

/* 上のバー */
.top{background:#fffaf5;color:var(--ink);border-bottom:3px solid var(--line)}
.top .in{max-width:1040px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top .brand{font-weight:900;font-size:20px;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.top .brand i{display:inline-block;width:.85em;height:.85em;border-radius:50%;background:var(--yellow);border:2px solid var(--outline);margin-right:.5em;vertical-align:-.05em}
.top nav{display:flex;gap:6px;flex-wrap:wrap}
.top nav a,.top nav button{color:var(--ink);text-decoration:none;font:inherit;font-weight:700;padding:6px 14px;border-radius:999px;background:none;border:0;cursor:pointer}
.top nav a:hover,.top nav button:hover{background:var(--primary-soft)}
.top nav .on{background:var(--primary);color:#fff}
.top nav .on:hover{background:var(--primary-d)}
.top .sp{flex:1}
.hero{padding:34px 0 18px}
.hero p{color:var(--muted);margin:.5em 0 0}

/* カード */
.card{background:var(--surface);border-radius:var(--radius);padding:24px;margin:0 0 18px;border:3px solid var(--line);box-shadow:0 6px 0 #ecdcd3}
.card h2{margin-bottom:.4em}
.card.flat{box-shadow:none;border:1px solid var(--line)}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:10px 22px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:900;font-size:16px;cursor:pointer;text-decoration:none;line-height:1.3}
.btn:hover{border-color:var(--primary);color:var(--primary-d)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;border-color:var(--outline);box-shadow:0 4px 0 var(--outline)}
.btn.primary:hover{background:var(--primary-d);color:#fff}
.btn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--outline)}
.btn.big{min-height:60px;font-size:19px;padding:12px 32px}
.btn.danger{color:var(--danger);border-color:#efc3be}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.btn.small{min-height:38px;padding:6px 14px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.block{display:flex;width:100%}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* フォーム */
label{display:block;font-weight:900;margin:18px 0 6px}
label .hint,.hint{font-weight:500;color:var(--muted);font-size:14px}
.hint{display:block;margin:-2px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{width:100%;min-height:50px;padding:11px 14px;font:inherit;font-weight:500;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px}
textarea{line-height:1.6}
input:focus,textarea:focus,select:focus{border-color:var(--primary)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;margin:18px 0 0}
.check input{width:24px;height:24px;margin:3px 0 0;flex:none;accent-color:var(--primary)}

/* 文言・状態 */
.note{color:var(--muted);font-size:15px}
.msg{border-radius:12px;padding:12px 16px;margin:14px 0 0;font-weight:700}
.msg:empty{display:none}
.msg.err{background:var(--danger-soft);color:var(--danger)}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.msg.warn{background:var(--warn-soft);color:#6e5200}
.pill{display:inline-block;font-size:13px;font-weight:900;padding:2px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary-d);vertical-align:middle}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:#7a5a00}.pill.ng{background:var(--danger-soft);color:var(--danger)}
.chip{display:block;word-break:break-all;background:var(--primary-soft);border-radius:12px;padding:12px 16px;font-weight:700;color:var(--ink)}
.codebig{font-size:34px;font-weight:900;letter-spacing:.18em;color:var(--primary-d)}

/* 手順（番号は本当に順番があるときだけ使う） */
.steps{list-style:none;margin:0 0 26px;padding:0;position:relative}
.steps>li{position:relative;padding-left:76px;padding-bottom:22px}
.steps>li:last-child{padding-bottom:0}
.steps>li::before{content:"";position:absolute;left:25px;top:52px;bottom:-4px;width:4px;background:var(--line);border-radius:2px}
.steps>li:last-child::before{display:none}
.steps .num{position:absolute;left:0;top:0;width:54px;height:54px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:900;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--yellow-d);border:2px solid var(--outline)}
.steps li.done .num{background:var(--ok);color:#fff;box-shadow:0 3px 0 #2b6a43}
.steps .body{background:var(--surface);border-radius:var(--radius);padding:20px 22px;border:3px solid var(--line);box-shadow:0 6px 0 #ecdcd3}
.steps li.done .body{background:#fbfffd}
.steps h2{font-size:20px;margin-bottom:.3em}
@media(max-width:520px){.steps>li{padding-left:0;padding-top:64px}.steps>li::before{left:25px;top:54px;bottom:auto;height:10px}.steps .num{top:0}}

/* 表 */
.tablewrap{overflow-x:auto}
table.list{width:100%;border-collapse:collapse;font-size:15px}
table.list th{text-align:left;font-weight:900;color:var(--muted);font-size:13px;padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
table.list td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.list tr:last-child td{border-bottom:0}
table.list tr.click{cursor:pointer}table.list tr.click:hover{background:var(--primary-soft)}

/* 折りたたみ */
details.more{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 22px;margin:0 0 18px}
details.more summary{cursor:pointer;font-weight:900;padding:16px 0;list-style:none;display:flex;align-items:center;gap:10px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"▸";transition:transform .15s}
details.more[open] summary::before{transform:rotate(90deg)}
details.more .inner{padding:0 0 18px}
pre.log{background:var(--ink);color:#d8e0ff;padding:14px;border-radius:12px;white-space:pre-wrap;font-size:13px;line-height:1.6;overflow:auto;max-height:260px}

/* ダイアログ */
.modal{position:fixed;inset:0;background:#2b3a6b99;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:28px 14px;z-index:40}
.modal>div{background:#fff;border-radius:20px;padding:26px;width:100%;max-width:600px;box-shadow:0 20px 60px #0004}
.modal h2{margin-bottom:.6em}

.hp{position:absolute;left:-9999px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:520px){body{font-size:16px}h1{font-size:24px}.card{padding:18px}}

/* タイル（メニュー） */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin:0 0 22px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;min-height:170px;padding:20px 20px 18px;border-radius:26px;border:3px solid var(--outline);color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer;background:var(--blue);box-shadow:0 7px 0 #2b3a6b2e;transition:transform .12s,box-shadow .12s}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 0 #2b3a6b2e}
.tile:active{transform:translateY(4px);box-shadow:0 2px 0 #2b3a6b2e}
.tile .ic{width:64px;height:64px;border-radius:50%;background:#fff;border:3px solid var(--outline);display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1;flex:none}
.tile .tt{font-size:21px;font-weight:900;line-height:1.3;margin-top:6px}
.tile .ds{font-size:14.5px;font-weight:700;color:#2b3a6bcc;line-height:1.5}
.tile.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:20px;min-height:140px;background:var(--primary);color:#fff;box-shadow:0 8px 0 var(--outline)}
.tile.wide .ds{color:#fffffff0}.tile.wide .tt{font-size:26px;margin:0}
.tile.wide .ic{width:84px;height:84px;font-size:44px;background:var(--yellow)}
.tile.wide:hover{box-shadow:0 11px 0 var(--outline)}.tile.wide:active{box-shadow:0 3px 0 var(--outline)}
.tile.green{background:var(--green)}.tile.pink{background:var(--pink)}.tile.sun{background:var(--sun)}.tile.lilac{background:var(--lilac)}.tile.blue{background:var(--blue)}
.tile .tag{position:absolute;top:14px;right:14px;background:#fff;border:2px solid var(--outline);border-radius:999px;padding:1px 12px;font-size:13px;font-weight:900}
@media(max-width:600px){.tiles{grid-template-columns:1fr 1fr;gap:12px}.tile{min-height:150px;padding:16px}.tile .ic{width:54px;height:54px;font-size:27px}.tile .tt{font-size:18px}.tile.wide{flex-direction:column;align-items:flex-start;gap:8px}.tile.wide .ic{width:64px;height:64px;font-size:34px}}

/* はじめての方へ（順番がある案内） */
.first{background:#fffaf0;border:3px dashed #e5c97c;border-radius:20px;padding:14px 18px;margin:0 0 20px}
.first b{display:block;margin-bottom:6px}
.first ol{list-style:none;margin:0;padding:0;display:flex;gap:10px 18px;flex-wrap:wrap}
.first li{display:flex;align-items:center;gap:8px;font-weight:700}
.first li span{width:30px;height:30px;border-radius:50%;background:var(--yellow);border:2px solid var(--outline);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px}
.setrow .go{white-space:nowrap}