
:root{--c-main:#1e2a8a;--c-main-d:#141d63;--c-accent:#ffaa00;--c-accent-text:#3a2a00;--c-bg:#f3f5fb;--c-card:#fff;--c-text:#1f2540;--c-sub:#667088;--c-line:#dde1ee;--c-err:#c0392b;--c-ok:#1f8a4c;--c-side:#141d63;--c-side-text:#cfd6f5;--c-side-hover:#26338f;--c-th:#eceffa;--c-disabled:#b9bfd4;--c-night1:#0f1b5c;--c-night2:#2a63c9}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--c-text);background:var(--c-bg);line-height:1.6}
a{color:var(--c-main)}
h1{font-size:1.25rem;margin:0 0 .75rem}h2{font-size:1.05rem;margin:1.2rem 0 .5rem}
.m-header{background:var(--c-main);color:#fff;padding:.7rem 1rem;display:flex;justify-content:space-between;align-items:center}
.m-header a{color:#fff;text-decoration:none;font-weight:700}
.m-wrap{max-width:480px;margin:0 auto;padding:1rem}
.m-nav{display:flex;background:#fff;border-bottom:1px solid var(--c-line)}
.m-nav a{flex:1;text-align:center;padding:.6rem 0;font-size:.85rem;text-decoration:none;color:var(--c-sub)}
.card{background:var(--c-card);border-radius:12px;padding:1rem;margin-bottom:1rem;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.big{font-size:2.2rem;font-weight:800;color:var(--c-main);line-height:1.1}
.sub{color:var(--c-sub);font-size:.85rem}
.badge{display:inline-block;background:var(--c-accent);color:var(--c-accent-text);border-radius:999px;padding:.1rem .7rem;font-weight:700;font-size:.85rem}
.btn{display:block;width:100%;background:var(--c-main);color:#fff;border:0;border-radius:10px;padding:.8rem;font-size:1rem;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--c-main-d)}.btn.sec{background:#fff;color:var(--c-main);border:1px solid var(--c-main)}.btn.danger{background:var(--c-err)}
.btn[disabled]{background:var(--c-disabled);cursor:not-allowed}
label{display:block;font-weight:700;font-size:.9rem;margin:.7rem 0 .2rem}
input,select,textarea{width:100%;padding:.65rem;border:1px solid var(--c-line);border-radius:8px;font-size:1rem;background:#fff;font-family:inherit}
.err{background:#fdecea;color:var(--c-err);padding:.7rem;border-radius:8px;margin-bottom:1rem}
.ok{background:#e8f6ee;color:var(--c-ok);padding:.7rem;border-radius:8px;margin-bottom:1rem}
.row{display:flex;justify-content:space-between;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--c-line)}
.row:last-child{border-bottom:0}.plus{color:var(--c-ok);font-weight:700}.minus{color:var(--c-err);font-weight:700}
.reward img{width:100%;border-radius:8px;margin-bottom:.5rem}
.pop{text-align:center;animation:pop .6s ease}@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.rankup{background:var(--c-accent);color:var(--c-accent-text);border-radius:12px;padding:.8rem;text-align:center;font-weight:800;margin-bottom:1rem}
.stack>*+*{margin-top:.6rem}
/* 管理画面 */
body.admin{font-size:14px}
.a-side{position:fixed;left:0;top:0;bottom:0;width:190px;background:var(--c-side);padding:1rem .8rem;overflow:auto}
.a-side a{display:block;color:var(--c-side-text);text-decoration:none;padding:.4rem .6rem;border-radius:6px}.a-side a:hover{background:var(--c-side-hover)}
.a-side .t{color:#fff;font-weight:800;margin-bottom:1rem}
.a-main{margin-left:190px;padding:1.2rem 1.6rem;max-width:1200px}
table{border-collapse:collapse;width:100%;background:#fff;margin-bottom:1rem}
th,td{border:1px solid var(--c-line);padding:.4rem .6rem;text-align:left;vertical-align:top}th{background:var(--c-th)}
.a-main .btn{display:inline-block;width:auto;padding:.4rem 1rem;font-size:.9rem}
.a-main input,.a-main select,.a-main textarea{width:auto;min-width:200px;padding:.4rem}
.a-main textarea{width:100%;max-width:600px}
form.inline{display:inline}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.bar{background:var(--c-main);height:14px;border-radius:3px}
/* 会員トップ（ランディング） */
.hero{background:linear-gradient(170deg,var(--c-night1),var(--c-night2));color:#fff;text-align:center;padding:1.6rem 1rem 1.2rem}
.hero .logo{font-size:2.6rem;font-weight:800;margin:0;letter-spacing:.05em}
.hero .tag{margin:.2rem 0;font-size:.95rem;opacity:.9}
.hero .catch{display:inline-block;background:var(--c-accent);color:var(--c-accent-text);font-weight:800;border-radius:999px;padding:.2rem 1rem;margin:.6rem 0 1rem}
.hero img{max-width:62%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.hero .btn{max-width:320px;margin:.5rem auto 0}.hero .btn.sec{border-color:#fff;background:transparent;color:#fff}
.lp-sec{margin-bottom:1.6rem}.lp-sec h2{border-left:5px solid var(--c-accent);padding-left:.6rem}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;background:#fff;border-radius:12px;padding:.8rem .8rem .8rem 3rem;margin-bottom:.6rem;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.steps li:before{content:counter(s);position:absolute;left:.8rem;top:.8rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--c-accent);color:var(--c-accent-text);font-weight:800;text-align:center;line-height:1.7rem}
.products{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.products .card{text-align:center;margin:0}.products img{max-width:100%;height:auto}
.series{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.series img{width:100%;height:auto;border-radius:4px}
details{background:#fff;border-radius:10px;padding:.6rem .8rem;margin-bottom:.5rem}summary{font-weight:700;cursor:pointer}
.m-footer{text-align:center;color:var(--c-sub);font-size:.8rem;padding:1rem 1rem 2rem}.m-footer img{height:auto}
.m-footer .marks{display:flex;justify-content:center;align-items:center;gap:.8rem;margin-top:.5rem}
