/* わだち アプリ共通（LP と同じ配色） */
:root{--b:#1F4E9C;--r:#C8402E;--y:#FFD83A;--n:#16243F;--g:#F2F5FA;--line:#D8DFEA;--muted:#5B6476;}
*{box-sizing:border-box}
body{margin:0;background:var(--g);color:#1F2633;font-family:"M PLUS 1p","Hiragino Sans","Noto Sans JP",sans-serif;font-size:16px;line-height:1.8;}
a{color:var(--b)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px;}
header.top{background:#fff;border-bottom:4px solid var(--b);}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:8px;flex-wrap:wrap;}
header.top img{height:44px;display:block;}
header.top nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;}
main{padding-block:28px 56px;}
h1{font-size:clamp(22px,3vw,28px);color:var(--n);margin:0 0 16px;font-weight:900;text-wrap:balance;}
h2{font-size:19px;color:var(--n);margin:0 0 10px;font-weight:900;}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 20px;}
.card+.card{margin-top:16px;}
.cardhd{background:var(--b);color:#fff;font-weight:900;padding:10px 16px;margin:-18px -20px 14px;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:4px;padding:10px 18px;font:inherit;font-weight:800;cursor:pointer;text-decoration:none;background:var(--b);color:#fff;}
.btn.red{background:var(--r);} .btn.ghost{background:#fff;color:var(--b);border:1px solid var(--b);} .btn.big{padding:16px 32px;font-size:19px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--y);outline-offset:2px;}
label{display:block;font-weight:700;font-size:14px;margin:10px 0 4px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:4px;font:inherit;background:#fff;}
.flash{background:#E8F4EC;border:1px solid #9CCFAE;padding:10px 14px;border-radius:4px;margin-bottom:16px;}
.errors{background:#FDECEA;border:1px solid #F0A8A0;padding:10px 14px;border-radius:4px;margin-bottom:16px;}
.muted{color:var(--muted);font-size:14px;}
.pill{display:inline-block;font-size:12px;font-weight:800;padding:1px 10px;border-radius:999px;background:var(--g);color:var(--n);border:1px solid var(--line);}
.pill.ai{background:#FFF6D6;border-color:#E8C95A;}
.menu-list{list-style:none;margin:0;padding:0;}
.menu-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dotted var(--line);}
.menu-list li:first-child{border-top:0;}
.menu-list .min{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.menu-list .done .task{text-decoration:line-through;color:var(--muted);}
.menu-list input[type=checkbox]{width:22px;height:22px;accent-color:var(--b);}
.bubble{background:#fff;border:2px solid var(--b);border-radius:10px;padding:12px 14px;position:relative;}
.bubble b{color:var(--r);margin-right:6px;}
table.simple{width:100%;border-collapse:collapse;font-size:14px;}
table.simple th,table.simple td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top;}
.ok{color:#2E7D4F;font-weight:800;} .ng{color:var(--r);font-weight:800;}
.code{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:18px;letter-spacing:.08em;background:var(--g);padding:2px 8px;border-radius:4px;}
.bars{width:100%;height:auto;display:block;}
/* 自習室 */
.room{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start;}
.screen{background:var(--n);border-radius:10px;padding:12px;color:#EEE8DC;}
.screen-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:0 4px 10px;color:#C9D2E3;gap:8px;}
.timer{font-size:22px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
/* 自分は真ん中（ほかの枠は自動でまわりに並ぶ） */
.tiles .tile.me{grid-column:2;grid-row:2;}
.tile{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#2A3A5C;}
.tile video,.tile svg{width:100%;height:100%;object-fit:cover;display:block;}
.tile .nm{position:absolute;left:4px;bottom:4px;font-size:11px;background:rgba(22,36,63,.78);color:#fff;padding:0 8px;border-radius:3px;}
.tile.me{outline:3px solid #E06A55;}
.tile .pen{transform-origin:50px 62px;animation:write 2.4s ease-in-out infinite;}
@keyframes write{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.tile .pen{animation:none;}}
@media (max-width:820px){.room{grid-template-columns:1fr;}}

.tile .report{position:absolute;right:6px;top:6px;border:0;border-radius:4px;background:rgba(255,255,255,.85);color:var(--r);font-size:14px;line-height:1;padding:5px 7px;cursor:pointer;}
.tile .report:focus-visible{outline:3px solid var(--y);}
dialog::backdrop{background:rgba(22,36,63,.55);}
table.slots th,table.slots td{text-align:center;padding:4px;}
.slotcell{display:block;margin:0;padding:4px;cursor:pointer;}
.slotcell input{width:20px;height:20px;accent-color:var(--b);}
.slotwrap{overflow:auto;max-height:520px;}
table.slots th{position:sticky;top:0;background:#fff;}
table.slots td.closed{color:#C3C9D4;background:#F7F8FA;}

/* 規約・プライバシーポリシー */
.legal h1 { font-size: 24px; margin: 0 0 12px; }
.legal h2 { font-size: 17px; margin: 22px 0 6px; padding-left: 8px; border-left: 4px solid var(--b); }
.legal p, .legal li { line-height: 1.9; }
.legal ol, .legal ul { padding-left: 1.4em; }
.legal table { border-collapse: collapse; width: 100%; }
.legal th, .legal td { border: 1px solid #D5DCE8; padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--g); width: 30%; font-weight: 700; }
.legal .draft-note { background: #FFF6DA; border: 1px solid #E8D28A; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
.foot { margin: 40px 0 24px; font-size: 13px; text-align: center; }
.foot a { margin: 0 8px; }
.pay-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.plan-card { border: 1px solid #D5DCE8; border-radius: 8px; padding: 12px 14px; }
.plan-card.on { border: 2px solid var(--b); background: var(--g); }
.plan-card h3 { margin: 0 0 4px; }
.plan-card .price { font-size: 22px; font-weight: 900; margin: 0; }
.plan-card .price small { font-size: 13px; font-weight: 400; }
.plan-card ul { padding-left: 1.2em; margin: 6px 0; }

.option-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #D5DCE8; }