/* 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;word-break:keep-all;overflow-wrap:anywhere}
/* 日本語強調 span 内では絶対改行しない (例: 「選ぼう。」「取り扱い。」など) */
h1 .accent, h2 .accent,
h1 .mint-hl, h1 .peach-hl, h1 .sky-hl, h1 .lav-hl, h1 .yellow-hl,
h2 .mint-hl, h2 .peach-hl, h2 .sky-hl, h2 .lav-hl, h2 .yellow-hl,
h1 .stroke, h2 .stroke,
.ceo h2 em{
  display:inline-block;
  word-break:keep-all;
  white-space:nowrap;
}
/* スマホ画面ですべり止めないと逆にはみ出す時のみ wrap 許可 */
@media (max-width:480px){
  h1 .stroke, h2 .stroke,
  h1 .accent, h2 .accent{
    white-space:normal;
    word-break:keep-all;
  }
}
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}
}

/* ═══════════════════════════════════════════
   軽量アニメーション (anim.js と連動)
   prefers-reduced-motion で全停止
   ═══════════════════════════════════════════ */

/* A-1: Stagger Letters 登場アニメ(JSがフェードアップ後に Wave+Magnetic 開始) */
h1.kinetic .char,
h1.page-title .char{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em);
  animation:charIn .9s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*40ms) forwards;
  will-change:transform,opacity;
}
@keyframes charIn{
  to{opacity:1;transform:translateY(0)}
}
/* JSが char を制御開始したら .js-anim を付与し、CSS animation を停止 */
h1.kinetic.js-anim .char,
h1.page-title.js-anim .char{
  animation:none;
  opacity:1;
}

/* C-6: ページ遷移カーテン (パステル5色ストライプ) */
.page-curtain{
  position:fixed;left:0;top:0;width:100%;height:100%;
  z-index:9999;pointer-events:none;
  display:flex;
  background:transparent;
}
.page-curtain > div{
  flex:1;
  transform:translateY(100%);
  transition:transform .55s cubic-bezier(.7,0,.3,1);
  will-change:transform;
}
/* 5色: mint / peach / sky / lavender / yellow */
.page-curtain > div:nth-child(1){ background:var(--mint); }
.page-curtain > div:nth-child(2){ background:var(--peach); }
.page-curtain > div:nth-child(3){ background:var(--sky); }
.page-curtain > div:nth-child(4){ background:var(--lavender); }
.page-curtain > div:nth-child(5){ background:var(--yellow); }
/* 入場(下から上): 左→右にずらして登場 */
.page-curtain.in > div:nth-child(1){ transform:translateY(0); transition-delay:0ms; }
.page-curtain.in > div:nth-child(2){ transform:translateY(0); transition-delay:60ms; }
.page-curtain.in > div:nth-child(3){ transform:translateY(0); transition-delay:120ms; }
.page-curtain.in > div:nth-child(4){ transform:translateY(0); transition-delay:180ms; }
.page-curtain.in > div:nth-child(5){ transform:translateY(0); transition-delay:240ms; }
/* 退場(上に抜ける): 右→左にずらして抜ける */
.page-curtain.out > div:nth-child(5){ transform:translateY(-100%); transition-delay:0ms; }
.page-curtain.out > div:nth-child(4){ transform:translateY(-100%); transition-delay:60ms; }
.page-curtain.out > div:nth-child(3){ transform:translateY(-100%); transition-delay:120ms; }
.page-curtain.out > div:nth-child(2){ transform:translateY(-100%); transition-delay:180ms; }
.page-curtain.out > div:nth-child(1){ transform:translateY(-100%); transition-delay:240ms; }

/* Vertical Hero Sphere (下層ページ page-hero アクセント) */
.page-hero-sphere{
  position:absolute;right:5%;top:50%;
  width:280px;height:280px;
  z-index:1;pointer-events:none;
  transform:translateY(-50%);
  opacity:.8;
}
@media (max-width:1024px){
  .page-hero-sphere{width:220px;height:220px;right:2%}
}
@media (max-width:768px){
  .page-hero-sphere{
    width:160px;height:160px;
    right:-20px;top:30px;transform:none;
    opacity:.7;
  }
}
@media (prefers-reduced-motion:reduce){
  .page-hero-sphere{display:none}
}

/* Blob Drift: 視認できるレベルに強化(範囲倍・周期半減・濃度UP) */
.hero-blob, .page-hero-blob{
  animation:blobDrift 12s ease-in-out infinite alternate;
  will-change:transform;
  opacity:.85 !important;
}
.hero-blob.b1, .page-hero-blob:nth-of-type(1){ animation-duration:13s; animation-delay:0s; }
.hero-blob.b2, .page-hero-blob:nth-of-type(2){ animation-duration:17s; animation-delay:-5s; animation-name:blobDrift2; }
.hero-blob.b3, .page-hero-blob:nth-of-type(3){ animation-duration:15s; animation-delay:-9s; animation-name:blobDrift3; }
@keyframes blobDrift{
  0%   { transform:translate(0,0) scale(1); }
  25%  { transform:translate(140px,-80px) scale(1.25); }
  50%  { transform:translate(-100px,60px) scale(.85); }
  75%  { transform:translate(80px,100px) scale(1.15); }
  100% { transform:translate(-60px,-40px) scale(1.05); }
}
@keyframes blobDrift2{
  0%   { transform:translate(0,0) scale(1); }
  25%  { transform:translate(-120px,80px) scale(1.2); }
  50%  { transform:translate(100px,-60px) scale(.9); }
  75%  { transform:translate(-80px,-100px) scale(1.25); }
  100% { transform:translate(60px,80px) scale(1.1); }
}
@keyframes blobDrift3{
  0%   { transform:translate(0,0) scale(1); }
  25%  { transform:translate(100px,120px) scale(1.18); }
  50%  { transform:translate(-120px,-80px) scale(1.28); }
  75%  { transform:translate(80px,-100px) scale(.88); }
  100% { transform:translate(-60px,100px) scale(1.12); }
}

/* A-2: Section Reveal */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change:transform,opacity;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
/* Tile / value-cell / tl-step / biz-block / ci-row は順次表示の stagger も追加 */
.tile.reveal,
.value-cell.reveal,
.tl-step.reveal,
.biz-block.reveal,
.ci-row.reveal{
  transition-delay:calc(var(--reveal-i,0)*60ms);
}

/* A-3: Magnetic Tile - JSが style.transform を直接更新するので CSS は transition のみ */
@media (hover:hover) and (pointer:fine){
  a.tile{
    transition:transform .15s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  }
}

/* SP独自アニメ: タッチデバイスのみ Tap Squish + Ripple */
@media (hover:none) and (pointer:coarse){
  a.tile,
  .nav .cta,
  .btn,
  .topic{
    transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
  }
  a.tile:active,
  .nav .cta:active,
  .btn:active,
  .topic:active{
    transform:scale(.96) !important;
  }
  /* SPでHero文字にもタップ反応 */
  h1.kinetic .char:active,
  h1.page-title .char:active{
    transform:scale(1.3) translateY(-.2em) !important;
    transition:transform .15s cubic-bezier(.68,-0.6,.32,1.6);
  }
}

/* Tap Ripple (タップ位置から波紋が広がる) */
.tap-ripple{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  background:rgba(255,255,255,.55);
  mix-blend-mode:overlay;
  animation:rippleExpand .65s ease-out forwards;
  will-change:transform,opacity;
}
@keyframes rippleExpand{
  0%   { transform:translate(-50%,-50%) scale(0);   opacity:.7; }
  100% { transform:translate(-50%,-50%) scale(2.5); opacity:0;  }
}
/* SP用: 親要素を positioning スコープに */
@media (hover:none) and (pointer:coarse){
  a.tile, .btn, .nav .cta, .topic{
    position:relative;
    overflow:hidden;
  }
}

/* B-2: Marquee 交差 + Hover 加速 */
/* 偶数番目のマーキー(.marquee.peach / .marquee.lav / .marquee.dark)は反転 */
.marquee.peach .track,
.marquee.lav .track,
.marquee.dark .track{
  animation-direction:reverse;
}
/* 速度バリエーション(マーキーごとに微妙に違う) */
.marquee.mint .track{ animation-duration:24s; }
.marquee.peach .track{ animation-duration:32s; }
.marquee.sky .track{ animation-duration:26s; }
.marquee.lav .track{ animation-duration:30s; }
.marquee.yellow .track{ animation-duration:22s; }
.marquee.stroke-band .track{ animation-duration:36s; }
.marquee.dark .track{ animation-duration:28s; }

/* Hoverで爆速化 + パーティクル位置で「掴んでる」感 */
.marquee{ transition:background-color .3s; }
.marquee .track{
  transition:animation-duration .6s ease-out;
}
.marquee:hover .track{
  animation-duration:6s !important;
}


/* prefers-reduced-motion: 全停止 */
@media (prefers-reduced-motion:reduce){
  h1.kinetic .char,
  h1.page-title .char{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  a.tile{ transform:none !important; }
  .hero-blob, .page-hero-blob{ animation:none !important; }
  .page-curtain{ display:none !important; }
}