@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Fraunces:wght@600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  /* === Bright Fun palette === */
  --bg:#fdfaff;
  --bg2:rgba(255,255,255,0.55);
  --bg3:rgba(255,255,255,0.35);
  --bg4:rgba(255,255,255,0.78);

  /* Vibrant color tokens */
  --pink:#ff5e8c;
  --hot-pink:#ff3d77;
  --coral:#ff8a65;
  --orange:#ff9f43;
  --yellow:#ffd166;
  --mint:#56e0a0;
  --green:#34d399;
  --teal:#5fe1bc;
  --cyan:#4ec3ff;
  --blue:#5b9bff;
  --purple:#9b6dff;
  --lavender:#c89bff;

  /* Primary accent: lively pink */
  --accent:#ff5e8c;
  --accent2:#ff8a65;
  --accent3:rgba(255,94,140,0.12);
  --glow:rgba(255,94,140,0.32);

  --tx:#1a1a2e;
  --tx2:rgba(26,26,46,0.62);
  --tx3:rgba(26,26,46,0.38);

  --border:rgba(255,255,255,0.85);
  --border2:rgba(255,255,255,0.6);
  --border3:rgba(0,0,0,0.06);

  --shadow:0 4px 24px rgba(155,109,255,0.1),0 1px 4px rgba(0,0,0,0.05);
  --shadow2:0 10px 36px rgba(255,94,140,0.22),0 2px 6px rgba(0,0,0,0.06);

  --glass:rgba(255,255,255,0.62);
  --glass-strong:rgba(255,255,255,0.86);
  --blur:blur(22px) saturate(160%);

  --r8:8px;--r12:12px;--r16:16px;--r20:20px;--r24:24px;--r99:99px;
  --tab-h:64px;
}

html,body{
  background:var(--bg);
  background-image:radial-gradient(ellipse 1000px 700px at 15% -5%,rgba(255,94,140,0.18),transparent 55%),radial-gradient(ellipse 900px 600px at 90% 5%,rgba(78,195,255,0.16),transparent 55%),radial-gradient(ellipse 900px 700px at 10% 100%,rgba(155,109,255,0.16),transparent 55%),radial-gradient(ellipse 800px 600px at 95% 95%,rgba(86,224,160,0.14),transparent 55%),linear-gradient(180deg,#fff7fb 0%,#fdfaff 50%,#f7fbff 100%);
  background-attachment:fixed;
  color:var(--tx);
  font-family:-apple-system,'Noto Sans JP','SF Pro Display',BlinkMacSystemFont,sans-serif;
  font-feature-settings:'palt' 1;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.005em;
  overflow-x:hidden;
}
body{padding-bottom:calc(var(--tab-h) + 12px);}

/* Ambient color orbs — vivid + playful */
body::before{
  content:'';position:fixed;
  top:-100px;left:-80px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(255,94,140,0.32),transparent 65%);
  filter:blur(70px);pointer-events:none;z-index:0;
  animation:float1 18s ease-in-out infinite;
}
body::after{
  content:'';position:fixed;
  top:25vh;right:-100px;width:440px;height:440px;
  background:radial-gradient(circle,rgba(78,195,255,0.3),transparent 65%);
  filter:blur(70px);pointer-events:none;z-index:0;
  animation:float2 22s ease-in-out infinite;
}
.ambient-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.ambient-orbs::before{
  content:'';position:absolute;
  bottom:-100px;left:30vw;width:420px;height:420px;
  background:radial-gradient(circle,rgba(155,109,255,0.3),transparent 65%);
  filter:blur(75px);
  animation:float3 20s ease-in-out infinite;
}
.ambient-orbs::after{
  content:'';position:absolute;
  top:55vh;right:25vw;width:380px;height:380px;
  background:radial-gradient(circle,rgba(255,209,102,0.28),transparent 65%);
  filter:blur(75px);
  animation:float4 24s ease-in-out infinite;
}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,30px) scale(1.08);}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,40px) scale(1.1);}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,-20px) scale(0.95);}}
@keyframes float4{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(50px,-30px) scale(1.05);}}

.glass{
  background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

/* NAV */
.p-nav{
  height:56px;display:flex;align-items:center;padding:0 16px;gap:12px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid rgba(255,255,255,0.6);
  position:sticky;top:0;z-index:50;
}
.p-nav-logo{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;letter-spacing:0.06em;background:linear-gradient(135deg,#ff5e8c 0%,#9b6dff 35%,#4ec3ff 70%,#56e0a0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.p-nav-title{font-size:0.95rem;font-weight:700;color:var(--tx);}
.p-nav-back{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-size:0.8rem;text-decoration:none;padding:5px 12px;border-radius:var(--r99);background:rgba(255,94,140,0.1);border:1px solid rgba(255,94,140,0.22);transition:all 0.15s;font-weight:600;}
.p-nav-back:hover{background:rgba(255,94,140,0.18);}

/* TABBAR — Floating Glass Pill */
.p-tabbar{
  position:fixed;
  bottom:calc(8px + env(safe-area-inset-bottom,0));
  left:10px;right:10px;
  z-index:100;
  /* PCではスマホ幅に合わせて中央寄せ */
  max-width:420px;
  margin:0 auto;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(40px) saturate(190%);-webkit-backdrop-filter:blur(40px) saturate(190%);
  border:1px solid rgba(255,255,255,0.95);
  border-radius:26px;
  box-shadow:
    0 12px 40px rgba(155,109,255,0.20),
    0 4px 14px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(155,109,255,0.06);
  display:flex;align-items:stretch;
  padding:6px 4px;
}
.p-tab{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;
  color:rgba(26,26,46,0.5);
  font-size:0.55rem;font-weight:700;letter-spacing:0.02em;
  font-family:'Noto Sans JP',sans-serif;
  padding:7px 2px 6px;
  position:relative;
  transition:all 0.22s cubic-bezier(0.4,0,0.2,1);
  border-radius:18px;
  border:none;background:none;cursor:pointer;
  min-width:0;
}
.p-tab:hover{color:rgba(26,26,46,0.78);background:rgba(155,109,255,0.04);}
.p-tab.active{
  color:#ff5e8c;
  background:linear-gradient(135deg,
    rgba(255,94,140,0.14) 0%,
    rgba(155,109,255,0.14) 50%,
    rgba(78,195,255,0.10) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,94,140,0.18),
    0 2px 10px rgba(255,94,140,0.12);
}
.p-tab.active::before{display:none;}
.p-tab-icon{
  font-size:1.22rem;line-height:1;
  filter:grayscale(55%) opacity(0.55);
  transition:filter 0.22s ease, transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.p-tab.active .p-tab-icon{
  filter:grayscale(0%) opacity(1) drop-shadow(0 2px 4px rgba(255,94,140,0.38));
  transform:scale(1.15) translateY(-1px);
}
@media (max-width:380px){
  .p-tabbar{left:6px;right:6px;border-radius:22px;padding:5px 3px;}
  .p-tab{font-size:0.52rem;padding:6px 1px 5px;}
  .p-tab-icon{font-size:1.14rem;}
}

/* CONTAINER */
.p-wrap{max-width:680px;margin:0 auto;padding:1.25rem 1rem;position:relative;z-index:1;}

/* GLASS CARDS */
.p-card{
  background:var(--glass-strong);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,0.88);
  box-shadow:var(--shadow);
  border-radius:var(--r20);padding:1.25rem;margin-bottom:0.875rem;
  position:relative;overflow:hidden;
  transition:transform 0.25s ease,box-shadow 0.25s ease;
}
.p-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.95),transparent);}
.p-card.accent{
  background:linear-gradient(135deg,rgba(255,94,140,0.1),rgba(155,109,255,0.06));
  border:1px solid rgba(255,94,140,0.28);
}

.p-label{font-size:0.6rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px;}

/* INPUTS */
.p-input,.p-select,.p-textarea{
  width:100%;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.85);
  border-radius:var(--r12);padding:10px 14px;
  color:var(--tx);font-size:0.88rem;
  font-family:'Noto Sans JP',sans-serif;outline:none;
  transition:all 0.15s;box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.p-input:focus,.p-select:focus,.p-textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,94,140,0.18);
  background:rgba(255,255,255,0.92);
}
.p-input::placeholder,.p-textarea::placeholder{color:var(--tx3);}
.p-textarea{resize:vertical;line-height:1.7;}
.p-select{cursor:pointer;}

/* BUTTONS — vibrant gradients */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--r99);font-size:0.85rem;font-weight:700;font-family:'Noto Sans JP',sans-serif;cursor:pointer;border:none;transition:all 0.15s;white-space:nowrap;}
.p-btn-primary{background:linear-gradient(135deg,#ff5e8c 0%,#ff8a65 50%,#ffd166 100%);color:#fff;box-shadow:0 6px 20px rgba(255,94,140,0.45),inset 0 1px 0 rgba(255,255,255,0.3);}
.p-btn-primary:hover{box-shadow:0 10px 28px rgba(255,94,140,0.55);transform:translateY(-1px);}
.p-btn-primary:active{transform:scale(0.97);}
.p-btn-primary:disabled{opacity:0.45;cursor:not-allowed;box-shadow:none;transform:none;}
.p-btn-ghost{background:rgba(255,255,255,0.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--tx2);border:1px solid rgba(255,255,255,0.88);box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.p-btn-ghost:hover{background:rgba(255,255,255,0.9);color:var(--tx);}
.p-btn-full{width:100%;}

/* BADGES — colorful */
.p-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r99);font-size:0.65rem;font-weight:700;}
.p-badge-accent,.p-badge-pink{background:rgba(255,94,140,0.14);color:#d6447a;border:1px solid rgba(255,94,140,0.28);}
.p-badge-green{background:rgba(86,224,160,0.16);color:#0d8d5e;border:1px solid rgba(86,224,160,0.32);}
.p-badge-gold,.p-badge-yellow{background:rgba(255,209,102,0.22);color:#a07a13;border:1px solid rgba(255,209,102,0.45);}
.p-badge-red{background:rgba(255,94,140,0.16);color:#c93360;border:1px solid rgba(255,94,140,0.32);}
.p-badge-blue{background:rgba(78,195,255,0.18);color:#1180c7;border:1px solid rgba(78,195,255,0.36);}
.p-badge-purple{background:rgba(155,109,255,0.16);color:#7041d9;border:1px solid rgba(155,109,255,0.32);}
.p-badge-orange{background:rgba(255,138,101,0.18);color:#cc5a30;border:1px solid rgba(255,138,101,0.32);}

/* CHIPS */
.p-chip{padding:5px 14px;border-radius:var(--r99);font-size:0.75rem;font-weight:600;cursor:pointer;background:rgba(255,255,255,0.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.85);color:var(--tx2);transition:all 0.15s;white-space:nowrap;font-family:'Noto Sans JP',sans-serif;box-shadow:0 2px 6px rgba(0,0,0,0.04);}
.p-chip:hover{border-color:rgba(255,94,140,0.4);color:var(--accent);transform:translateY(-1px);}
.p-chip.on{background:linear-gradient(135deg,#ff5e8c,#9b6dff);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(155,109,255,0.4);}

/* PROGRESS */
.p-progress-bar{height:4px;background:rgba(0,0,0,0.06);border-radius:var(--r99);overflow:hidden;}
.p-progress-fill{height:100%;background:linear-gradient(90deg,#ff5e8c,#9b6dff,#4ec3ff);border-radius:var(--r99);transition:width 0.4s ease;box-shadow:0 0 8px rgba(155,109,255,0.5);}

/* SPINNER */
.p-spin{width:22px;height:22px;border:2px solid rgba(0,0,0,0.08);border-top-color:var(--accent);border-radius:50%;animation:pspin 0.8s linear infinite;}
@keyframes pspin{to{transform:rotate(360deg);}}
.p-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:12px;color:var(--tx3);font-size:0.85rem;}

/* EMPTY */
.p-empty{text-align:center;padding:3rem 2rem;color:var(--tx3);}
.p-empty-icon{font-size:2.5rem;margin-bottom:0.75rem;opacity:0.5;}
.p-empty-text{font-size:0.85rem;}

/* TOAST */
.p-toast{position:fixed;bottom:calc(var(--tab-h) + 12px);left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#1a1a2e,#2e1a3e);backdrop-filter:blur(16px);border-radius:var(--r99);padding:8px 20px;font-size:0.82rem;color:#fff;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:200;white-space:nowrap;box-shadow:0 8px 28px rgba(155,109,255,0.4);border:1px solid rgba(255,255,255,0.18);font-weight:600;}
.p-toast.show{opacity:1;}

/* MODAL */
.p-modal-overlay{position:fixed;inset:0;background:rgba(26,26,46,0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity 0.2s;}
.p-modal-overlay.open{opacity:1;pointer-events:all;}
.p-modal{background:rgba(255,255,255,0.92);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,0.95);border-radius:var(--r24);width:100%;max-width:420px;padding:1.5rem;box-shadow:0 26px 70px rgba(155,109,255,0.25);}
.p-modal-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;margin-bottom:1rem;color:var(--tx);}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,94,140,0.5),rgba(155,109,255,0.5));border-radius:2px;}

::selection{background:rgba(255,94,140,0.3);color:var(--tx);}

/* UTILITY */
.flex{display:flex;}.items-center{align-items:center;}.justify-between{justify-content:space-between;}
.gap-2{gap:8px;}.gap-3{gap:12px;}.gap-1{gap:4px;}
.mb-2{margin-bottom:10px;}.mb-3{margin-bottom:16px;}.mb-4{margin-bottom:24px;}
.w-full{width:100%;}.text-sm{font-size:0.85rem;}.text-xs{font-size:0.75rem;}
.text-accent{color:var(--accent);}.text-muted{color:var(--tx2);}.text-dim{color:var(--tx3);}
.font-bold{font-weight:700;}
.z1{position:relative;z-index:1;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:480px){.grid-2{grid-template-columns:1fr;}}

.site-foot{max-width:720px;margin:0.5rem auto 5.5rem;padding:1rem;text-align:center;position:relative;z-index:1;}
.site-foot a{color:rgba(124,92,255,0.85);font-size:0.72rem;font-weight:700;text-decoration:none;margin:0 0.5rem;}
.site-foot a:hover{text-decoration:underline;}
.site-foot .foot-meta{display:block;margin-top:0.5rem;font-size:0.62rem;color:rgba(26,26,46,0.4);}