/* Shared CSS for Michigaeru Pastel Kinetic design system
   v10 lineage — pastel + kinetic + 「面白いを、つくる」 */

:root{
  --bg:#f2f7f0;
  --paper:#e8eee5;
  --ink:#1f2a20;
  --fg:#2d3a2e;
  --fg-muted:#6b7569;
  --mint:#c6f0de;
  --mint-deep:#7cc6a5;
  --peach:#ffd6c7;
  --peach-deep:#e89c7d;
  --sky:#c5e4f3;
  --sky-deep:#7db8d6;
  --lavender:#f0dcee;
  --lavender-deep:#b985c9;
  --yellow:#ffc857;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--fg);
  font-family:"Outfit","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-feature-settings:"palt" 1,"kern" 1;
  -webkit-font-smoothing:antialiased;letter-spacing:.005em;overflow-x:hidden;
}
p,li{line-height:1.85}
h1,h2,h3,h4{letter-spacing:-.025em;line-height:1;font-weight:900}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1320px;margin:0 auto;padding:0 48px;position:relative}
.tabular{font-variant-numeric:tabular-nums}

/* ───── Header ───── */
.site-header{position:sticky;top:18px;z-index:50;margin:18px 32px 0}
.site-header-inner{
  max-width:1240px;margin:0 auto;
  background:rgba(255,255,255,.78);backdrop-filter:blur(18px);
  border:1px solid rgba(45,58,46,.08);border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 18px 11px 26px;
  box-shadow:0 6px 22px rgba(45,58,46,.06);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:15px;letter-spacing:-.01em}
.brand .dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #b2e6cf, var(--mint-deep));box-shadow:0 1px 4px rgba(124,198,165,.5)}
.brand small{font-size:10px;letter-spacing:.22em;color:var(--fg-muted);font-weight:600;text-transform:uppercase;margin-left:8px}
.nav{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600}
.nav a{padding:8px 14px;border-radius:999px;color:rgba(45,58,46,.72);transition:background .15s, color .15s}
.nav a:hover{background:rgba(45,58,46,.05);color:var(--fg)}
.nav a.current{background:rgba(45,58,46,.08);color:var(--fg)}
.nav .cta{background:var(--ink);color:var(--bg);padding:11px 22px;font-weight:800;letter-spacing:.04em}
.nav .cta:hover{background:var(--fg)}

/* ───── Buttons ───── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:18px 30px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:.02em;transition:transform .25s, box-shadow .25s}
.btn-primary{background:var(--ink);color:var(--bg);box-shadow:0 8px 24px rgba(31,42,32,.18)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02)}
.btn-ghost{color:var(--fg);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--mint-deep);padding:18px 8px}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 8px 24px rgba(255,200,87,.3);font-weight:900}

/* ───── Marquees ───── */
.marquee{
  padding:36px 0;overflow:hidden;
  font-size:110px;font-weight:900;line-height:1;letter-spacing:-.025em;
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
}
.marquee.mint{background:var(--mint);color:var(--ink)}
.marquee.peach{background:var(--peach);color:var(--ink)}
.marquee.sky{background:var(--sky);color:var(--ink)}
.marquee.lav{background:var(--lavender);color:var(--ink)}
.marquee.yellow{background:var(--yellow);color:var(--ink)}
.marquee.stroke-band{background:var(--bg);color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.marquee.dark{background:var(--ink);color:var(--bg)}
.marquee .track{display:inline-flex;gap:54px;white-space:nowrap;animation:scroll 28s linear infinite;align-items:center;will-change:transform}
.marquee.dark .star{background:var(--yellow)}
.marquee .star{display:inline-block;width:46px;height:46px;background:currentColor;border-radius:50%;flex-shrink:0}
.marquee .blob{display:inline-block;width:60px;height:46px;background:currentColor;border-radius:55% 45% 60% 40% / 50% 60% 40% 50%;flex-shrink:0}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ───── Page Header (sub-pages) ───── */
.page-hero{padding:60px 0 100px;position:relative;overflow:hidden}
.page-hero-blob{position:absolute;border-radius:50%;filter:blur(40px);z-index:0;opacity:.55}
.page-hero .container{position:relative;z-index:1}
.page-crumbs{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);font-weight:700}
.page-crumbs a{color:var(--fg-muted)}
.page-crumbs a:hover{color:var(--fg)}
.page-crumbs .sep{opacity:.4}
.page-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border:1px solid rgba(45,58,46,.08);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mint-deep);margin-top:36px}
.page-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint-deep);box-shadow:0 0 0 4px rgba(124,198,165,.2)}
.page-title{
  margin-top:36px;
  font-size:clamp(48px,11vw,168px);line-height:.92;letter-spacing:-.04em;font-weight:900;
  display:flex;align-items:baseline;gap:clamp(10px,1.5vw,30px);flex-wrap:wrap;
}
.page-title .stroke{color:transparent;-webkit-text-stroke:2px var(--ink)}
.page-title .yellow-hl{display:inline-block;background:var(--yellow);padding:0 .04em;border-radius:14px;line-height:.92}
.page-title .mint-hl{display:inline-block;background:var(--mint);padding:0 .04em;border-radius:14px;line-height:.92}
.page-title .peach-hl{display:inline-block;background:var(--peach);padding:0 .04em;border-radius:14px;line-height:.92}
.page-lead{margin-top:40px;font-size:18px;line-height:1.92;max-width:680px;color:rgba(45,58,46,.85)}
.page-lead em{font-style:normal;background:linear-gradient(transparent 65%, var(--mint) 65%, var(--mint) 92%, transparent 92%);padding:0 4px;font-weight:600}

/* ───── Footer ───── */
footer.site{
  background:var(--ink);color:var(--bg);
  padding:140px 0 50px;position:relative;overflow:hidden;
}
.foot-cta{text-align:center;padding-bottom:80px;border-bottom:1px solid rgba(242,247,240,.12);margin-bottom:64px}
.foot-cta .pre{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--yellow);font-weight:700}
.foot-cta h2{margin-top:24px;font-size:148px;font-weight:900;letter-spacing:-.035em;line-height:.96}
.foot-cta h2 .stroke{color:transparent;-webkit-text-stroke:2px var(--bg)}
.foot-cta h2 .yellow-hl{display:inline-block;background:var(--yellow);color:var(--ink);padding:0 .04em;border-radius:18px;line-height:.92}
.foot-cta a.btn{display:inline-flex;margin-top:48px;background:var(--yellow);color:var(--ink);padding:24px 44px;border-radius:999px;font-weight:900;font-size:16px;letter-spacing:.04em;box-shadow:0 10px 32px rgba(255,200,87,.3)}
.foot-body{display:grid;grid-template-columns:1.2fr 1.5fr;gap:60px}
.foot-body h3{font-size:24px;font-weight:900;letter-spacing:-.01em}
.foot-body small{display:block;margin-top:6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,247,240,.5);font-weight:600}
.foot-body .desc{margin-top:22px;max-width:380px;font-size:14px;color:rgba(242,247,240,.7)}
.foot-body .addr{margin-top:28px;font-size:12px;line-height:1.85;color:rgba(242,247,240,.55)}
.foot-links{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.foot-links h4{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,247,240,.5);margin-bottom:18px}
.foot-links a{display:block;font-size:13px;padding:5px 0;color:rgba(242,247,240,.85)}
.foot-legal{margin-top:60px;padding-top:28px;border-top:1px solid rgba(242,247,240,.12);display:flex;justify-content:space-between;font-size:11px;color:rgba(242,247,240,.55);gap:24px;flex-wrap:wrap}
.foot-legal a{margin-right:18px}

/* ───── Section headings (common) ───── */
.section-pre{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:700}
.section-pre::before{content:"";width:36px;height:1px;background:currentColor}
.section-pre.mint{color:var(--mint-deep)}
.section-pre.peach{color:var(--peach-deep)}
.section-pre.sky{color:var(--sky-deep)}
.section-pre.lav{color:var(--lavender-deep)}

/* ───── Hamburger button (shared) ───── */
.nav-toggle{
  display:none;
  width:40px;height:40px;padding:0;border:none;background:transparent;
  align-items:center;justify-content:center;cursor:pointer;position:relative;
}
.nav-toggle span{
  position:absolute;left:10px;width:20px;height:2px;background:var(--ink);border-radius:99px;
  transition:transform .25s, opacity .25s, top .25s;
}
.nav-toggle span:nth-child(1){top:13px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:25px}
.site-header.is-open .nav-toggle span:nth-child(1){top:19px;transform:rotate(45deg)}
.site-header.is-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.is-open .nav-toggle span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* ───── SP (max-width:768px) — shared layout ───── */
@media (max-width:768px){
  .container{padding:0 20px}

  /* Header — switch to hamburger */
  .site-header{margin:12px 12px 0;top:12px}
  .site-header-inner{padding:10px 12px 10px 20px}
  .brand{font-size:13px}
  .brand small{display:none}
  .nav{display:none}
  .nav-toggle{display:flex}
  .site-header.is-open .nav{
    display:flex;flex-direction:column;gap:4px;align-items:stretch;
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:rgba(255,255,255,.96);backdrop-filter:blur(18px);
    border:1px solid rgba(45,58,46,.08);border-radius:24px;
    padding:14px;box-shadow:0 12px 40px rgba(45,58,46,.12);
  }
  .site-header.is-open .nav a{
    padding:14px 18px;text-align:center;font-size:15px;border-radius:14px;
  }
  .site-header.is-open .nav .cta{margin-top:6px}

  /* Marquees */
  .marquee{font-size:46px;padding:18px 0}
  .marquee .track{gap:24px}
  .marquee .star{width:22px;height:22px}
  .marquee .blob{width:28px;height:22px}

  /* Buttons */
  .btn{padding:16px 24px;font-size:13px}

  /* Page hero (sub-pages) */
  .page-hero{padding:30px 0 60px}
  .page-hero-blob{filter:blur(28px)!important}
  .page-title{
    font-size:clamp(48px,14vw,80px);flex-direction:column;gap:8px;
    white-space:normal;align-items:flex-start;
  }
  .page-title .lead-small{
    font-size:14px;max-width:100%;margin-bottom:0;line-height:1.7;
    padding:14px 16px;background:rgba(255,255,255,.6);border-radius:14px;
    letter-spacing:.02em;
  }
  .page-title .stroke{-webkit-text-stroke-width:1.5px}
  .page-title .yellow-hl,
  .page-title .mint-hl,
  .page-title .peach-hl{padding:0 .06em}
  .page-lead{font-size:15px;margin-top:28px}
  .page-crumbs{font-size:10px}
  .page-eyebrow{margin-top:24px;font-size:10px}

  /* Footer */
  footer.site{padding:80px 0 36px}
  .foot-cta{padding-bottom:50px;margin-bottom:44px}
  .foot-cta h2{font-size:clamp(40px,12vw,68px)}
  .foot-cta h2 .stroke{-webkit-text-stroke-width:1.5px}
  .foot-cta a.btn{margin-top:32px;padding:18px 32px;font-size:14px}
  .foot-body{grid-template-columns:1fr;gap:44px}
  .foot-links{grid-template-columns:1fr 1fr;gap:28px}
  .foot-legal{flex-direction:column;gap:12px}

  /* Section pre */
  .section-pre{font-size:10px}
}