/* ═══════════════════════════════════════
   MUSE Design Tokens — 全ページ共通
   ═══════════════════════════════════════ */

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

:root{
  /* Typography */
  --fd:'Sora',sans-serif;
  --fb:'Plus Jakarta Sans',sans-serif;
  --fm:'Space Mono',monospace;
  --fj:'Noto Sans JP',sans-serif;
  --fjs:'Noto Serif JP',serif;

  /* Easing */
  --smooth:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.175,.885,.32,1.275);

  /* Layout */
  --slit:3px;

  /* Colors — Light */
  --bg:#EEF2FA;
  --w:#FFFFFF;--w2:#FAFBFE;--w3:#F3F6FC;--w4:#E8EEF8;
  --bl:#2563EB;--bl2:#1D4ED8;--bl3:#3B82F6;--bl4:#60A5FA;--bl5:#93C5FD;
  --bld:#0D2A7A;

  /* Colors — Dark scale */
  --k:#080D1A;--k2:#141C30;--k3:#263048;--k4:#4A5878;
  --k5:#7A8AA6;--k6:#B0BDD4;--k7:#D6DEE8;

  /* Logo */
  --logo-fg:#2B3A67;

  /* Grain textures (CSS native) */
  --grain-fine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  --grain-coarse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.50' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");

  /* Spacing */
  --sp-hero-top:clamp(100px,13vh,148px);
  --sp-hero-bottom:clamp(36px,5vh,56px);
  --sp-section:clamp(28px,4vh,44px);
  --sp-page-bottom:clamp(44px,6vh,76px);
  --sp-inner:clamp(28px,3.5vw,48px);
  --sp-wrap:clamp(28px,5vw,56px);
  --pad:var(--sp-inner);

  /* Shadow */
  --shadow-section:0 12px 32px -6px rgba(10,25,70,.30),0 3px 4px rgba(10,25,70,.12);
}

html{scroll-behavior:smooth}

body{
  font-family:var(--fj);
  color:var(--k3);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  position:relative;
}

/* Body grain overlay */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    var(--grain-fine),
    linear-gradient(180deg,transparent 0%,rgba(200,210,228,.12) 50%,rgba(212,220,233,.08) 100%);
  background-size:200px 200px,100% 100%;
  opacity:.06;mix-blend-mode:multiply;
}

/* ═══ 共通ラッパー ═══ */
.wrap{
  max-width:1240px;margin:0 auto;
  padding:0 var(--sp-wrap);
  position:relative;z-index:1;
}

/* ═══ スクロールリビール ═══ */
.--reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--smooth),transform 1s var(--smooth);
}
.--reveal.--in{opacity:1;transform:none}

/* ═══ Geometric 3D shapes（青カード共通） ═══ */
@keyframes geoRotate{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes geoMorph{
  0%,100%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}
  25%{border-radius:70% 30% 30% 70%/70% 70% 30% 30%}
  50%{border-radius:30% 70% 70% 30%/70% 30% 30% 70%}
  75%{border-radius:70% 30% 30% 70%/30% 70% 70% 30%}
}
.geo-container{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.geo-shape{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  border:1px solid currentColor;opacity:.18;pointer-events:none;
}
.geo-s1{
  width:clamp(160px,70%,320px);height:clamp(160px,70%,320px);
  color:rgba(255,255,255,.35);
  animation:geoMorph 15s ease-in-out infinite,geoRotate 20s linear infinite;
}
.geo-s2{
  width:clamp(120px,55%,260px);height:clamp(120px,55%,260px);
  border-radius:50%;border-width:2px;
  color:rgba(255,255,255,.2);
  animation:geoRotate 25s linear infinite reverse;
}
.geo-s3{
  width:clamp(180px,80%,360px);height:clamp(180px,80%,360px);
  color:rgba(255,255,255,.12);
  animation:geoRotate 30s linear infinite;
  transform:translate(-50%,-50%) rotate(45deg);
}
.geo-s1.--dark{color:rgba(37,88,232,.2)}
.geo-s2.--dark{color:rgba(107,126,156,.15)}
.geo-s3.--dark{color:rgba(37,88,232,.08)}

/* ═══ ページヒーロー共通 ═══ */
.pg-hero{
  padding:var(--sp-hero-top) clamp(20px,3vw,40px) var(--sp-hero-bottom);
  position:relative;background:var(--w);box-shadow:var(--shadow-section);
}
.pg-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--grain-fine),linear-gradient(155deg,transparent 20%,rgba(212,220,233,.3) 60%,rgba(168,181,204,.18) 100%);
  background-size:200px 200px,100% 100%;opacity:.45;mix-blend-mode:multiply;
}
.pg-hero__inner{max-width:1240px;margin:0 auto;position:relative;z-index:1}
.pg-hero__ey{
  font-family:var(--fm);font-size:clamp(6px,.5vw,8px);
  letter-spacing:.36em;text-transform:uppercase;color:var(--k6);
  display:flex;align-items:center;gap:12px;margin-bottom:clamp(16px,2vh,28px);
}
.pg-hero__ey::before{content:'';width:26px;height:1px;background:var(--k7);flex-shrink:0}
.pg-hero__title{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(48px,7vw,96px);letter-spacing:-.04em;line-height:.85;color:var(--k);
}
.pg-hero__title .--dot{color:var(--bl)}
.pg-hero__title-sub{
  font-family:var(--fm);font-size:clamp(8px,.65vw,10px);
  letter-spacing:.28em;text-transform:uppercase;color:var(--k6);margin-top:clamp(10px,1.2vh,16px);
}
.pg-hero__title-ja{
  font-family:var(--fjs);font-size:clamp(14px,1.2vw,18px);font-weight:500;
  letter-spacing:.08em;color:var(--k4);margin-top:clamp(12px,1.5vh,20px);
}
.pg-hero__date{
  font-family:var(--fm);font-size:clamp(8px,.65vw,10px);
  letter-spacing:.28em;text-transform:uppercase;color:var(--k6);margin-top:clamp(10px,1.2vh,16px);
}
@media(max-width:767px){
  .pg-hero{padding:clamp(120px,15vh,160px) clamp(20px,5vw,32px) clamp(44px,6vh,64px)}
  .pg-hero__title{font-size:clamp(36px,10vw,56px)}
}