/* ============================================================
   MONSTER CAFE GROUP — 求人LP  /  styles
   Pink × Mint × colorful pop  /  cute concept-cafe recruiting
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Mochiy+Pop+One&family=Pacifico&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

:root{
  /* base */
  --pink:        #ff79b0;
  --pink-deep:   #f04c92;
  --pink-soft:   #ffd6e8;
  --pink-bg:     #fff2f8;

  --mint:        #4fd2bd;
  --mint-deep:   #1fae9a;
  --mint-soft:   #c4f3ea;
  --mint-bg:     #effdfa;

  /* extra colorful accents (beyond pink & mint) */
  --lav:   #b79bf2;   /* lavender  */
  --sky:   #6cc5f5;   /* sky blue  */
  --sun:   #ffd23f;   /* yellow    */
  --coral: #ff9270;   /* coral     */
  --navy:  #2c2a55;   /* uniform navy = ink */

  --ink:   #3a3357;
  --muted: #8a85a3;
  --paper: #fffafc;
  --line:  #ffd9ea;

  --shadow-sm: 0 6px 18px rgba(240,76,146,.12);
  --shadow-md: 0 14px 36px rgba(120,90,180,.16);

  --maxw: 500px;
  --font-ja: 'Zen Maru Gothic', system-ui, sans-serif;
  --font-en: 'Baloo 2', system-ui, sans-serif;
  --font-pop:'Mochiy Pop One', system-ui, sans-serif;
  --font-scr:'Pacifico', cursive;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-ja);
  color:var(--ink);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  /* colorful page backdrop visible around the column on wide screens */
  background:
    radial-gradient(circle at 12% 8%,  rgba(183,155,242,.30), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(108,197,245,.28), transparent 30%),
    radial-gradient(circle at 80% 82%, rgba(79,210,189,.30),  transparent 32%),
    radial-gradient(circle at 16% 90%, rgba(255,121,176,.30), transparent 32%),
    #ffeaf4;
  padding-bottom:84px;          /* fixed bar clearance */
}

/* dotted halftone overlay on the page backdrop */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.55) 1.4px, transparent 1.6px);
  background-size:14px 14px;
}

img{ display:block; max-width:100%; }

/* ---------- The centered “sheet” ---------- */
.sheet{
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--paper);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 24px 70px rgba(150,70,140,.25);
}

/* ============================================================
   Decorative materials (CSS only)
   ============================================================ */

/* four-point sparkle */
.spark{
  position:absolute; width:var(--s,22px); height:var(--s,22px);
  background:var(--c,#fff);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 5px rgba(255,255,255,.8));
  opacity:.92; pointer-events:none;
}
.spark.tw{ animation:tw 2.6s ease-in-out infinite; }
.spark:nth-of-type(2n).tw{ animation-delay:.7s; }
.spark:nth-of-type(3n).tw{ animation-delay:1.3s; }
@keyframes tw{ 0%,100%{ transform:scale(.7) rotate(0); opacity:.55 } 50%{ transform:scale(1.15) rotate(45deg); opacity:1 } }

/* heart blob */
.heart{
  position:absolute; pointer-events:none; color:var(--c,var(--pink));
  font-size:var(--s,20px); line-height:1; filter:drop-shadow(0 3px 4px rgba(240,76,146,.25));
}
.float{ animation:float 5s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(var(--r,0)) } 50%{ transform:translateY(-12px) rotate(var(--r,0)) } }

/* little confetti pill */
.pill-dot{ position:absolute; width:var(--s,16px); height:calc(var(--s,16px)*.45);
  border-radius:999px; background:var(--c,var(--lav)); opacity:.8; pointer-events:none; }

/* halftone wedge used inside hero */
.dotfield{ background-image:radial-gradient(var(--c,#fff) 22%, transparent 24%); background-size:12px 12px; }

/* CSS ribbon/bow */
.bow{ position:relative; width:var(--s,40px); height:calc(var(--s,40px)*.7); pointer-events:none; filter:drop-shadow(0 3px 3px rgba(0,0,0,.12)); }
.bow::before,.bow::after{ content:""; position:absolute; top:0; width:46%; height:100%;
  background:var(--c,var(--pink)); }
.bow::before{ left:0; border-radius:60% 30% 50% 40%/60% 50% 50% 40%; transform:skewY(8deg); }
.bow::after{ right:0; border-radius:30% 60% 40% 50%/50% 60% 40% 50%; transform:skewY(-8deg); }
.bow i{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:24%; height:70%;
  background:color-mix(in oklab, var(--c,var(--pink)) 80%, black); border-radius:40%; z-index:2; }

/* ============================================================
   Header
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:400;
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:linear-gradient(100deg, var(--pink) 0%, var(--pink) 46%, var(--mint) 100%);
  box-shadow:0 4px 16px rgba(240,76,146,.25);
}
.topbar .logo{ display:flex; align-items:center; gap:9px; color:#fff; }
.topbar .logo .mk{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--pink-deep); font-size:15px; box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.topbar .logo b{ font-family:var(--font-en); font-weight:800; font-size:16px; letter-spacing:.02em; line-height:1;
  text-shadow:0 1px 1px rgba(0,0,0,.15); }
.topbar .logo span{ display:block; font-size:9px; letter-spacing:.22em; opacity:.92; }
.topbar .tg{ font-family:var(--font-en); font-weight:700; font-size:11px; color:var(--pink-deep);
  background:#fff; padding:5px 12px; border-radius:999px; box-shadow:0 2px 0 rgba(0,0,0,.06);white-space:nowrap; }

/* ============================================================
   Generic section bits
   ============================================================ */
.sec{ position:relative; padding:14px 18px; }

.sec-head{ text-align:center; margin-bottom:18px; position:relative; z-index:2; }
.sec-head .en{
  font-family:var(--font-en); font-weight:800; font-size:13px; letter-spacing:.22em;
  color:var(--pink); text-transform:uppercase; display:inline-flex; gap:8px; align-items:center;
}
.sec-head .en::before,.sec-head .en::after{ content:"✦"; font-size:11px; color:var(--mint-deep); }
.sec-head h2{ font-size:26px; font-weight:900; color:var(--ink); margin-top:2px; letter-spacing:.02em; }
.sec-head h2 .hl{ color:var(--pink-deep); }
.sec-head .ribbon-line{ width:46px; height:5px; border-radius:5px; margin:12px auto 0;
  background:linear-gradient(90deg,var(--pink),var(--mint)); }

/* buttons */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:56px; padding:0 18px;
  font-family:var(--font-ja); font-weight:700; font-size:16px;
  border-radius:999px; cursor:pointer; text-decoration:none; border:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{ transform:translateY(2px); }
.btn-pink{ color:#fff; background:linear-gradient(180deg,#ff8fbd,var(--pink-deep));
  box-shadow:0 7px 0 #c93b78, 0 12px 22px rgba(240,76,146,.35); }
.btn-pink:active{ box-shadow:0 3px 0 #c93b78, 0 7px 16px rgba(240,76,146,.3); }
.btn-mint{ color:#fff; background:linear-gradient(180deg,#5fe0cc,var(--mint-deep));
  box-shadow:0 7px 0 #149b88, 0 12px 22px rgba(31,174,154,.3); }
.btn-mint:active{ box-shadow:0 3px 0 #149b88,0 7px 16px rgba(31,174,154,.28); }
.btn-line{ color:#fff; background:linear-gradient(180deg,#5fd66e,#2bb14a);
  box-shadow:0 7px 0 #1d8a39, 0 12px 22px rgba(43,177,74,.28); }
.btn-line:active{ box-shadow:0 3px 0 #1d8a39,0 7px 16px rgba(43,177,74,.26); }
.btn-ghost{ color:var(--pink-deep); background:#fff; border:2.5px solid var(--pink-soft);
  box-shadow:0 5px 0 var(--pink-soft); }
.btn .ic{ font-size:18px; }

.cta-stack{ display:flex; flex-direction:column; gap:12px; }

/* image button */
.btn-img{ display:block; border:none; background:none; padding:0; cursor:pointer;
  transition:transform .12s ease, filter .12s ease; }
.btn-img img{ width:100%; filter:drop-shadow(0 7px 14px rgba(150,70,140,.22)); }
.btn-img:hover{ transform:translateY(-2px); }
.btn-img:active{ transform:translateY(1px); filter:brightness(.97); }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip{ display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 14px;
  border-radius:999px; font-size:13px; font-weight:700; color:#fff; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; background:linear-gradient(180deg,#ffe3f1,#ffeef7); }
.hero .mv{ width:100%; position:relative; z-index:2; }
.hero-cta{ position:relative; z-index:3; padding:10px 18px 12px;
  background:linear-gradient(180deg,#ffeef7, #fff7fb); }
.hero-cta .sub{ text-align:center; font-weight:700; color:var(--pink-deep); font-size:14px; margin-bottom:12px; }
.hero-cta .sub b{ font-family:var(--font-en); }

/* scrolling marquee strip under hero */
.marquee{ overflow:hidden; background:var(--navy); color:#fff; padding:9px 0;
  font-family:var(--font-en); font-weight:700; letter-spacing:.04em; }
.marquee .track{ display:inline-flex; gap:26px; white-space:nowrap; animation:mq 18s linear infinite; padding-left:26px; }
.marquee .track span{ font-size:13px; display:inline-flex; align-items:center; gap:10px; }
.marquee .track span::after{ content:"♥"; color:var(--pink); }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* POINT ribbon graphic (replaces marquee) */
.point-ribbon{ background:linear-gradient(180deg,#fff7fb,#f1fdfa); padding:8px 14px 4px; text-align:center; }
.point-ribbon img{ width:100%; max-width:460px; margin:0 auto;
  filter:drop-shadow(0 10px 22px rgba(150,70,140,.14)); }

/* ============================================================
   CONCEPT
   ============================================================ */
.concept{ background:
   linear-gradient(180deg, #fff7fb 0%, #f1fdfa 100%); }
.concept-img{ position:relative; z-index:2; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-md); }
.concept-img img{ width:100%; }
.lead{ text-align:center; font-size:15px; font-weight:500; color:var(--ink); margin-bottom:26px; }
.lead b{ color:var(--pink-deep); }

.brand-card{ position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-md);
  margin-bottom:18px; background:#fff; }
.brand-card img{ width:100%; }
.brand-card.pink{ outline:4px solid #fff; box-shadow:0 0 0 6px var(--pink-soft), var(--shadow-md); }
.brand-card.mint{ outline:4px solid #fff; box-shadow:0 0 0 6px var(--mint-soft), var(--shadow-md); }
.brand-foot{ display:flex; align-items:center; gap:10px; padding:12px 16px; }
.brand-foot.pink{ background:var(--pink-bg); }
.brand-foot.mint{ background:var(--mint-bg); }
.brand-foot .tag{ font-family:var(--font-en); font-weight:800; font-size:13px; padding:3px 12px; border-radius:999px; color:#fff; }
.brand-foot.pink .tag{ background:var(--pink); }
.brand-foot.mint .tag{ background:var(--mint-deep); }
.brand-foot p{ font-size:12.5px; font-weight:500; color:var(--muted); line-height:1.6; }

/* ============================================================
   WORKS / uniforms
   ============================================================ */
.works{ background:#fff7fb; }
.uni-card{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:18px;
  background:#fff; border:3px solid #fff; }
.uni-card img{ width:100%; }
.uni-head{ display:flex; align-items:center; gap:10px; padding:12px 14px 4px; }
.uni-head .dot{ width:14px; height:14px; border-radius:50%; }
.uni-head b{ font-family:var(--font-en); font-weight:800; font-size:16px; }

/* ============================================================
   SALARY
   ============================================================ */
.salary{ position:relative; background:linear-gradient(180deg,#eafcf8, #fff2f8); }
.pay-card{ position:relative; z-index:2; text-align:center;
  background:#fff; border-radius:28px; padding:30px 20px 26px;
  box-shadow:0 0 0 6px #fff, 0 0 0 10px var(--mint-soft), var(--shadow-md); }
.pay-card .kicker{ display:inline-block; font-weight:700; color:#fff; background:var(--pink);
  padding:4px 16px; border-radius:999px; font-size:13px; letter-spacing:.08em; }
.pay-card .big{ font-family:var(--font-en); font-weight:800; line-height:.92; margin:10px 0 2px;
  font-size:84px; color:var(--pink-deep);
  text-shadow:3px 3px 0 #ffd6e8, 6px 6px 0 rgba(79,210,189,.35); }
.pay-card .big small{ font-size:30px; }
.pay-card .big .over{ font-family:var(--font-scr); font-size:34px; color:var(--mint-deep); margin-left:4px; text-shadow:none; }
.pay-card .note{ font-size:13px; color:var(--muted); font-weight:500; }
.pay-img{ position:relative; z-index:2; margin-bottom:18px; }
.pay-img img{ width:100%; filter:drop-shadow(0 12px 24px rgba(150,70,140,.16)); }
.pay-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; position:relative; z-index:2; }
.pay-stats .st{ border-radius:16px; padding:12px 6px; color:#fff; }
.pay-stats .st .n{ font-family:var(--font-en); font-weight:800; font-size:22px; line-height:1; }
.pay-stats .st .l{ font-size:11px; font-weight:700; margin-top:3px; }

/* ============================================================
   POINTS (9 reasons)
   ============================================================ */
.points{ background:linear-gradient(180deg,#fff2f8,#f1fdfa); }
.pt-img{ position:relative; z-index:2; }
.pt-img img{ width:100%; filter:drop-shadow(0 12px 26px rgba(150,70,140,.16)); }
.pt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px; position:relative; z-index:2; }
.pt{ position:relative; background:#fff; border-radius:20px; padding:16px 14px 15px;
  box-shadow:var(--shadow-sm); border:2px solid #fff; overflow:hidden; }
.pt::before{ content:""; position:absolute; right:-26px; top:-26px; width:74px; height:74px; border-radius:50%;
  background:var(--ac,var(--pink-soft)); opacity:.18; }
.pt .no{ font-family:var(--font-en); font-weight:800; font-size:30px; line-height:1; color:var(--ac,var(--pink)); }
.pt .ic{ position:absolute; top:13px; right:13px; font-size:22px; }
.pt h3{ font-size:15px; font-weight:900; color:var(--ink); margin:4px 0 8px; line-height:1.3; }
.pt p{ font-size:11.5px; font-weight:500; color:var(--muted); line-height:1.65; }
.pt .bar{ width:30px; height:4px; border-radius:4px; background:var(--ac,var(--pink)); margin-bottom:8px; }

/* full-width feature point */
.pt.wide{ grid-column:1 / -1; display:flex; align-items:center; gap:14px; }
.pt.wide .no{ font-size:40px; }
.pt.wide .txt h3{ margin-top:0; }

/* ============================================================
   WORKS / お仕事内容
   ============================================================ */
.jobinfo{ background:linear-gradient(180deg,#fff7fb 0%, #f1fdfa 100%); text-align:center; padding-bottom:34px; }
.jobinfo .sec-head{ margin-bottom:30px; }
.job-script{ font-family:var(--font-scr); font-size:46px; color:var(--ink); line-height:1; display:block; }
.job-sub{ font-size:14px; font-weight:700; letter-spacing:.34em; color:var(--muted); margin-top:8px; padding-left:.34em; }
.job-hero{ position:relative; z-index:2; font-size:23px; font-weight:900; line-height:1.7;
  color:var(--pink-deep); margin:0 auto 28px; letter-spacing:.01em; text-wrap:balance; }
.job-note{ position:relative; z-index:2; font-size:14px; font-weight:500; line-height:1.95;
  color:var(--ink); max-width:23em; margin:0 auto 16px; text-align:left; }
.job-note:last-child{ margin-bottom:0; }
.job-note .hl{ color:var(--pink); font-weight:700; }

/* ============================================================
   RECRUIT table
   ============================================================ */
.recruit{ background:#fff7fb; }
.kv{ width:100%; border-collapse:separate; border-spacing:0; border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-sm); background:#fff; position:relative; z-index:2; font-size:14px; }
.kv tr{ border-bottom:1px solid var(--line); }
.kv th{ width:6.6em; text-align:left; vertical-align:top; font-weight:700; color:var(--pink-deep);
  background:var(--pink-bg); padding:14px 14px; border-bottom:2px solid #fff; white-space:nowrap; }
.kv td{ vertical-align:top; padding:14px 14px; border-bottom:1px solid var(--line); font-weight:500; }
.kv tr:last-child th, .kv tr:last-child td{ border-bottom:none; }
.kv .em{ color:var(--pink-deep); font-weight:700; }

/* ============================================================
   ACCESS
   ============================================================ */
.access{ background:linear-gradient(180deg,#f1fdfa,#fff2f8); }
.loc-img{ margin-bottom:0; position:relative; z-index:2; }
/* the locations-image-only ACCESS block: trim vertical padding */
.access:has(> .loc-img:last-of-type){ padding-top:20px; padding-bottom:20px; }
.loc-img img{ width:100%; }
.loc-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:26px; position:relative; z-index:2; }
.loc{ text-align:center; }
.loc .circle{ aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.12); border:3px solid #fff; }
.loc .circle .en{ font-family:var(--font-en); font-weight:700; font-size:10px; letter-spacing:.08em; opacity:.95; }
.loc .circle .ja{ font-family:var(--font-pop); font-size:19px; line-height:1; margin-top:1px; }

.store{ background:#fff; border-radius:20px; box-shadow:var(--shadow-sm); padding:14px; margin-bottom:14px;
  position:relative; z-index:2; border:2px solid #fff; }
.store .top{ display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.store .areatag{ font-family:var(--font-en); font-weight:700; font-size:10px; color:#fff; padding:3px 10px; border-radius:999px; }
.store h3{ font-size:16px; font-weight:900; }
.store .addr{ font-size:12px; color:var(--muted); font-weight:500; margin-bottom:10px; }
.ph-row{ display:grid; grid-template-columns:1fr 0.62fr; gap:8px; align-items:stretch; }
.ph{ border-radius:12px;
  background:
    repeating-linear-gradient(45deg, rgba(255,121,176,.10) 0 9px, rgba(79,210,189,.10) 9px 18px);
  display:grid; place-items:center; }
.ph:not(.vid){ aspect-ratio:auto; overflow:hidden; }
.ph img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
/* スマホ縦動画スロット（9:16） */
.ph.vid{ aspect-ratio:9/16; background:
    repeating-linear-gradient(45deg, rgba(108,197,245,.12) 0 9px, rgba(183,155,242,.12) 9px 18px);
  position:relative; }
.ph.vid::after{ content:"▶"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); font-size:24px; color:rgba(255,255,255,.95);
  background:rgba(44,42,85,.55); width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; }
.ph.vid span{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); text-align:center; line-height:1.4; }
/* real video filling the slot */
.ph.vid.has-video{ background:#000; overflow:hidden; }
.ph.vid.has-video::after{ display:none; }
.ph.vid.has-video video{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }
.ph span{ font-family:'Courier New',monospace; font-size:11px; color:var(--muted);
  background:rgba(255,255,255,.85); padding:3px 9px; border-radius:6px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--navy); color:#fff; text-align:center; padding:40px 18px 36px; }
.footer .logo{ display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer .logo .mk{ width:38px; height:38px; border-radius:50%; background:#fff; color:var(--pink-deep);
  display:grid; place-items:center; font-size:18px; }
.footer .logo b{ font-family:var(--font-en); font-weight:800; font-size:20px; }
.footer .logo span{ font-size:9px; letter-spacing:.24em; opacity:.7; display:block; }
.footer p{ font-size:11px; opacity:.65; line-height:1.8; }
.footer .mini{ margin-top:14px; }

/* ============================================================
   Fixed bottom bar
   ============================================================ */
.fixbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--maxw);
  z-index:500; display:flex; gap:8px; padding:9px 12px 11px; align-items:center;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  box-shadow:0 -6px 22px rgba(150,70,140,.18); border-top:2px solid var(--pink-soft); }
.fixbtn{ display:block; transition:transform .12s ease, filter .12s ease; }
.fixbtn img{ display:block; height:54px; width:auto; filter:drop-shadow(0 4px 8px rgba(150,70,140,.22)); }
.fixbtn:first-child{ flex:1 1 auto; min-width:0; }
.fixbtn:first-child img{ width:100%; height:54px; object-fit:contain; }
.fixbtn.form{ flex:0 0 auto; }
.fixbtn:hover{ transform:translateY(-2px); }
.fixbtn:active{ transform:translateY(1px); filter:brightness(.97); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .spark.tw,.float,.marquee .track{ animation:none; }
}

@media (max-width:360px){
  .pay-card .big{ font-size:70px; }
  .sec-head h2{ font-size:23px; }
}

@media (max-width:480px){
  .topbar .logo b{ font-size:13px; }
}