/* Password is Daijoubu — shared style (index.html / hello.html) */
:root{
  --blue:#3680ff; --blue-l:#80d0ff; --navy:#1e2c50; --muted:#78869f;
  --green:#2ebe6e; --line:#ced8ea; --field:#f6f9ff; --chrome:#eef3fb;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#2a3f98}
html,body{min-height:100%}
body{overflow-y:auto}
body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  color:var(--navy);
  background:
    radial-gradient(circle at 82% 12%,rgba(255,244,214,.75),transparent 34%),
    linear-gradient(180deg,#84c4ff 0%,#c4e2ff 42%,#ffe8de 60%,#6896e4 61.5%,#3f5fc0 80%,#2a3f98 100%);
  background-attachment:fixed;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:88px 16px 120px; overflow-x:hidden; position:relative;
}

/* ---------- background layers ---------- */
.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,.15) 60%,transparent 72%);
  animation:float linear infinite}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-120vh)}}
.cloud{position:absolute;width:90px;height:44px;background:#fff;border-radius:50%;opacity:.8;filter:blur(3px);
  box-shadow:44px -16px 0 8px #fff,96px 0 0 -2px #fff,48px 14px 0 6px #fff;animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-220px)}to{transform:translateX(calc(100vw + 220px))}}
.eq{position:fixed;left:0;right:0;bottom:22px;height:80px;display:flex;justify-content:center;align-items:flex-end;gap:6px;z-index:0;pointer-events:none}
.eq i{display:block;width:22px;background:rgba(255,255,255,.28);border-radius:2px 2px 0 0;animation:eq 1.2s ease-in-out infinite alternate}
@keyframes eq{from{height:8px}to{height:var(--h,60px)}}

/* ---------- logo / badge ---------- */
.logo{position:fixed;top:22px;right:28px;width:110px;z-index:3}
.pill{position:fixed;top:22px;left:24px;z-index:3;background:#fff;color:#1e3c8c;font-weight:800;font-size:14px;
  padding:8px 18px;border-radius:999px;letter-spacing:.3px;box-shadow:0 4px 14px rgba(30,50,120,.15)}

/* ---------- floating chips (PC) ---------- */
.chip{position:fixed;z-index:1;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(30,50,120,.25);animation:bob 4s ease-in-out infinite}
.chip svg{width:38px;height:38px}
@keyframes bob{50%{transform:translateY(-10px)}}

/* ---------- browser window ---------- */
.win{position:relative;z-index:2;width:100%;max-width:920px;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(30,50,120,.38);animation:pop .7s cubic-bezier(.2,.8,.3,1.15) both}
@keyframes pop{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
.chrome{height:46px;background:var(--chrome);border-bottom:1px solid #d6deec;display:flex;align-items:center;gap:8px;padding:0 16px}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
.url{flex:1;min-width:0;margin-left:14px;height:30px;border-radius:15px;background:#fff;border:1px solid #d4dcea;
  display:flex;align-items:center;gap:8px;padding:0 14px;font-size:14px;color:#5a6882;white-space:nowrap;overflow:hidden}
.url i{width:12px;height:12px;border:2px solid #3caa64;border-radius:50%;flex:none}
.url span{overflow:hidden;text-overflow:ellipsis}
.chrome-btn{height:30px;padding:0 16px;border-radius:15px;border:1px solid #d6deec;background:#e1e8f6;color:#5a6882;
  font-weight:700;font-size:13px;font-family:inherit;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;flex:none}
.chrome-btn:hover{background:#ff7878;color:#462e46}

.body{display:flex;min-height:400px}
.left{width:36%;color:#fff;padding:30px 34px;display:flex;flex-direction:column;
  background:linear-gradient(150deg,#3680ff 0%,#5aa8ff 55%,#80d0ff 100%)}
.brand{font-size:40px;font-weight:900;letter-spacing:.3px;line-height:1.1}
.tag{font-size:15px;opacity:.92;margin-top:4px}
.badge{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:16px}
.ring{width:156px;height:156px;border-radius:50%;background:rgba(255,255,255,.27);border:3px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;animation:breath 2.4s ease-in-out infinite}
.ring svg{width:78px;height:78px}
@keyframes breath{50%{transform:scale(1.05)}}
.blab{font-weight:800;font-size:21px;margin-top:16px}
.bsub{font-size:14px;opacity:.9;margin-top:2px}

.right{flex:1;padding:42px 56px 34px}
h1{font-size:34px;font-weight:900;line-height:1.2}
.lead{font-size:15px;color:var(--muted);margin:6px 0 18px}
.field-label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px}
.input{width:100%;height:50px;border-radius:10px;border:2px solid var(--line);background:var(--field);padding:0 16px;
  font-size:18px;color:var(--navy);font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(54,128,255,.15)}
.input[type=password]{letter-spacing:4px}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.err{min-height:22px;font-size:13px;color:#e0465a;margin-top:6px}
.btn{width:100%;height:52px;border:0;border-radius:12px;background:var(--green);color:#fff;font-size:19px;font-weight:800;
  font-family:inherit;cursor:pointer;margin-top:4px;transition:transform .1s,filter .2s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(2px);filter:brightness(.85)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:#5a6882}
.row label{display:flex;align-items:center;gap:8px;cursor:pointer}
.row input{width:18px;height:18px;accent-color:var(--blue)}
.link{color:var(--blue);background:none;border:0;font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.note{font-size:11px;color:#a0abc0;margin-top:20px;line-height:1.6}

/* ---------- hello ---------- */
.hello{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px 24px}
.hello .big{font-size:clamp(40px,7.5vw,72px);font-weight:900;line-height:1.25;color:var(--blue);
  text-shadow:0 4px 0 #dbe8ff}
.hello .big span{display:inline-block;animation:hop 1.8s ease-in-out infinite}
.hello .big span:nth-child(2){animation-delay:.2s}
@keyframes hop{50%{transform:translateY(-8px)}}
.hello .msg{margin-top:20px;font-size:clamp(15px,2.2vw,18px);line-height:1.8;color:var(--navy);font-weight:500;
  animation:pop .8s .3s both}
.hello .msg p+p{margin-top:12px}
.hello .msg2{margin-top:12px;font-size:clamp(14px,2vw,16px);color:var(--blue);font-weight:800;animation:pop .8s .6s both}
.logo:hover{transform:scale(1.06);transition:transform .2s}
.signed{display:inline-flex;align-items:center;gap:6px;margin-top:22px;padding:8px 18px;border-radius:20px;
  background:#e6f7ee;color:var(--green);font-weight:800;font-size:15px}
.confetti{position:fixed;z-index:5;pointer-events:none;font-size:24px;animation:rise 2.8s ease-out forwards}
@keyframes rise{to{transform:translateY(-75vh) rotate(25deg);opacity:0}}

footer{position:fixed;bottom:6px;left:0;right:0;text-align:center;font-size:11px;color:rgba(255,255,255,.8);z-index:1}

/* ---------- responsive ---------- */
@media (max-width:1180px){ .chip{display:none} }
@media (max-width:720px){
  body{padding:76px 16px 110px;justify-content:flex-start}
  .logo{top:18px;right:16px;width:84px}
  .pill{top:18px;left:16px;font-size:12px;padding:6px 14px}
  .body{flex-direction:column;min-height:0}
  .left{width:100%;padding:20px 22px}
  .brand{font-size:30px}
  .tag{font-size:13px}
  .badge{flex-direction:row;gap:16px;margin:14px 0 0;padding:0;text-align:left}
  .ring{width:72px;height:72px;border-width:2px}
  .ring svg{width:36px;height:36px}
  .blab{margin-top:0;font-size:18px}
  .right{padding:26px 22px 24px}
  h1{font-size:28px}
  .chrome{padding:0 12px;gap:6px}
  .url{margin-left:8px;font-size:12px;padding:0 10px}
  .eq i{width:12px}
  .eq{gap:4px;height:60px}
}