:root{
  --purple:#4a1f8f;
  --purple-d:#2a0f57;
  --yellow:#ffe500;
  --ink:#111;
  --paper:#fffaf0;
  --pink:#ff3d7f;
  --en:"Anton",sans-serif;
  --ja-impact:"Dela Gothic One",sans-serif;
  --ja:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--purple);color:#fff;font-family:var(--ja);font-weight:500;line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,3vw,32px);pointer-events:none}
.hd a{pointer-events:auto;text-decoration:none}
.hd__logo{display:flex;flex-direction:column;line-height:1;color:#fff;mix-blend-mode:difference}
.hd__ja{font-family:var(--ja-impact);font-size:24px;letter-spacing:.08em}
.hd__en{font-family:var(--en);font-size:11px;letter-spacing:.3em;margin-top:4px}
.hd__ig{background:var(--ink);color:#fff;font-weight:900;font-size:14px;padding:12px 20px;border-radius:999px;border:2px solid #fff;box-shadow:4px 4px 0 var(--yellow);transition:transform .2s,box-shadow .2s}
.hd__ig:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--yellow)}
@media (max-width:600px){.hd__ig span{display:none}.hd__ig{padding:10px 16px}}

/* hero */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--purple);display:flex;align-items:center}
.hero__rays,.cta__rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.07) 0 6deg,transparent 6deg 18deg);animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__inner{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:110px clamp(16px,4vw,48px) 80px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:24px}
.hero__copy{margin:0;font-family:var(--ja-impact);font-weight:400;font-size:clamp(64px,11vw,168px);line-height:1.02;transform:skewY(-6deg) rotate(-2deg);position:relative;z-index:3}
.hero__line{display:block;color:#fff;text-shadow:5px 5px 0 var(--ink),-3px -3px 0 var(--pink);opacity:0;transform:translateX(-60px) scale(1.2);animation:pop .7s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:var(--d)}
.hero__line--y{color:var(--yellow)}
@keyframes pop{to{opacity:1;transform:none}}
.hero__lead{grid-column:1;margin:28px 0 0;font-weight:900;font-size:clamp(14px,1.6vw,19px);line-height:2.1;position:relative;z-index:3;opacity:0;animation:fade .8s 1s forwards}
mark{background:var(--ink);color:#fff;padding:3px 10px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.is-y{background:var(--yellow);color:var(--ink)}
@keyframes fade{to{opacity:1}}
.hero__photo{grid-column:2;grid-row:1/3;margin:0;position:relative;z-index:2;transform:rotate(4deg);border:10px solid #fff;border-bottom-width:44px;box-shadow:14px 14px 0 var(--ink);opacity:0;animation:drop 1s .3s cubic-bezier(.2,1.3,.4,1) forwards}
.hero__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
@keyframes drop{from{opacity:0;transform:translateY(-80px) rotate(-8deg)}to{opacity:1;transform:rotate(4deg)}}
.badge{position:absolute;z-index:4;right:clamp(8px,5vw,60px);bottom:40px;width:clamp(110px,14vw,170px);aspect-ratio:1;background:var(--yellow);border-radius:50%;color:var(--ink);display:grid;place-items:center;box-shadow:6px 6px 0 var(--ink)}
.badge svg{position:absolute;inset:0;animation:spin 14s linear infinite}
.badge text{font-family:var(--en);font-size:17px;letter-spacing:2px;fill:var(--ink)}
.badge span{font-family:var(--ja-impact);font-size:clamp(34px,4.4vw,54px)}
.hero__scroll{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:var(--en);letter-spacing:.4em;font-size:12px;opacity:.8}
.hero__scroll::after{content:"";display:block;width:2px;height:34px;background:#fff;margin:6px auto 0;animation:line 1.6s infinite}
@keyframes line{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:820px){
  .hero__inner{grid-template-columns:1fr;padding-top:96px}
  .hero__photo{grid-column:1;grid-row:auto;width:88%;margin:18px 0 0 auto}
  .hero__lead{margin-top:18px}
  .badge{bottom:auto;top:96px;right:16px}
}

/* photo stream (右から左へ流れる) */
.stream{position:relative;background:var(--pink);padding:60px 0 70px;overflow:hidden;border-block:4px solid var(--ink)}
.stream::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 18px,var(--yellow) 18px 36px)}
.stream__row{display:flex;width:max-content;gap:34px;padding:14px 0;animation:flow 70s linear infinite}
.stream__row--slow{animation-duration:95s;margin-top:18px}
.stream:hover .stream__row{animation-play-state:paused}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.polaroid{position:relative;flex:none;width:clamp(200px,22vw,300px);background:#fff;padding:10px 10px 38px;box-shadow:8px 8px 0 rgba(0,0,0,.35);transform:rotate(var(--r,0deg));transition:transform .3s}
.polaroid:hover{transform:rotate(0) scale(1.06);z-index:2}
.polaroid::before{content:"";position:absolute;top:-16px;left:50%;width:70px;height:26px;margin-left:-35px;background:rgba(255,229,0,.85);transform:rotate(-4deg)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.polaroid--wide img{aspect-ratio:4/3}
.polaroid--wide{width:clamp(260px,28vw,380px)}

/* common */
.tag{display:inline-block;font-family:var(--en);font-size:15px;letter-spacing:.3em;background:var(--yellow);color:var(--ink);padding:4px 16px;transform:rotate(-3deg);box-shadow:4px 4px 0 var(--ink)}
.tag--w{background:#fff}
.is-y{color:var(--yellow)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s cubic-bezier(.2,1,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* about */
.about{background:var(--paper);color:var(--ink);padding:110px clamp(16px,6vw,80px);text-align:center}
.about .is-y{color:var(--ink);background:var(--yellow);padding:0 .2em}
.about__title{font-family:var(--ja-impact);font-weight:400;font-size:clamp(40px,7vw,96px);line-height:1.25;margin:28px 0;transform:skewY(-3deg)}
.about__title span{display:inline-block}
.about__text{max-width:760px;margin:0 auto;font-size:clamp(15px,1.7vw,18px);line-height:2.1}
.nums{list-style:none;padding:0;margin:60px auto 0;max-width:960px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nums li{background:var(--purple);color:#fff;padding:26px 10px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(-1.5deg)}
.nums li:nth-child(2){transform:rotate(1.5deg);background:var(--ink)}
.nums b{display:block;font-family:var(--en),var(--ja-impact);font-weight:400;font-size:clamp(40px,6vw,72px);line-height:1;color:var(--yellow)}
.nums b small{font-family:var(--ja-impact);font-size:.45em;margin-left:4px}
.nums span{font-weight:900;font-size:14px}
@media (max-width:640px){.nums{grid-template-columns:1fr}}

/* points */
.points{background:var(--ink);padding:100px clamp(16px,5vw,64px);text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:1200px;margin:50px auto 0;text-align:left}
.card{position:relative;background:#fff;color:var(--ink);padding:12px 12px 26px;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--purple)}
.card:nth-child(2){margin-top:40px;box-shadow:10px 10px 0 var(--pink)}
.card:nth-child(3){box-shadow:10px 10px 0 var(--yellow)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card__no{position:absolute;top:-26px;left:-14px;font-family:var(--en);font-size:56px;line-height:1;color:var(--yellow);-webkit-text-stroke:2px var(--ink);transform:rotate(-8deg);z-index:2}
.card h3{font-family:var(--ja-impact);font-weight:400;font-size:24px;margin:18px 6px 6px;line-height:1.4}
.card p{margin:0 6px;font-size:15px}
@media (max-width:860px){.cards{grid-template-columns:1fr;gap:48px}.card:nth-child(2){margin-top:0}}

/* practice */
.practice{background:var(--purple);padding:110px clamp(16px,6vw,80px);max-width:none}
.practice>*{max-width:920px;margin-left:auto;margin-right:auto}
.practice__title{font-family:var(--ja-impact);font-weight:400;font-size:clamp(34px,5.6vw,72px);line-height:1.3;margin:24px auto 36px}
.practice__title span{display:block}
.practice__title span:last-child{color:var(--yellow)}
.info{display:grid;grid-template-columns:8em 1fr;margin:0 auto;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.info dt,.info dd{margin:0;padding:18px 20px;border-bottom:2px dashed #ccc}
.info dt{font-weight:900;background:var(--yellow)}
.info dt:nth-last-of-type(1),.info dd:last-child{border-bottom:none}
.info small{color:#555}
@media (max-width:560px){.info{grid-template-columns:1fr}.info dt{border-bottom:none;padding-bottom:6px}}
.note{font-size:14px;opacity:.9;margin-top:22px}
.maplink{display:inline-block;margin-top:6px;font-weight:900;color:var(--yellow)}
.maplink,.practice .reveal.maplink{display:block}
.jupiter{margin-top:70px;border:3px dashed rgba(255,255,255,.6);padding:26px 28px}
.jupiter__label{margin:0;font-size:13px;font-weight:900;color:var(--yellow);letter-spacing:.1em}
.jupiter h3{font-family:var(--ja-impact);font-weight:400;font-size:28px;margin:4px 0 6px}
.jupiter p{margin:0 0 10px;font-size:15px}
.jupiter a{font-weight:900}

/* cta */
.cta{position:relative;overflow:hidden;background:var(--pink);color:#fff;text-align:center;padding:120px clamp(16px,5vw,64px) 130px}
.cta__rays{background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.12) 0 6deg,transparent 6deg 18deg)}
.cta>*{position:relative}
.cta__small{font-family:var(--en);letter-spacing:.4em;margin:0}
.cta__title{font-family:var(--ja-impact);font-weight:400;font-size:clamp(36px,6.6vw,90px);line-height:1.3;margin:12px 0 30px;text-shadow:5px 5px 0 var(--ink)}
.cta__title span{display:inline-block}
.cta__list{list-style:none;padding:0;margin:0 auto 26px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px}
.cta__list li{background:var(--ink);font-weight:900;padding:6px 16px;font-size:15px}
.cta__list li::before{content:"✔ ";color:var(--yellow)}
.cta__note{display:table;background:#fff;color:var(--ink);font-weight:900;font-size:clamp(12px,3.5vw,16px);line-height:1.5;white-space:nowrap;margin:4px auto 38px;padding:8px 16px;border:3px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink)}
.cta__btn{display:inline-flex;flex-direction:column;align-items:center;background:var(--yellow);color:var(--ink);text-decoration:none;font-family:var(--ja-impact);font-size:clamp(26px,4vw,44px);line-height:1.3;padding:22px clamp(28px,6vw,70px);border:4px solid var(--ink);border-radius:20px;box-shadow:10px 10px 0 var(--ink);transition:transform .2s,box-shadow .2s;animation:wiggle 3s infinite}
.cta__btn:hover{transform:translate(-3px,-3px);box-shadow:14px 14px 0 var(--ink);animation:none}
.cta__btn-sub{font-family:var(--ja);font-weight:900;font-size:14px}
.cta__btn-id{font-family:var(--en);font-size:16px;letter-spacing:.08em;margin-top:4px}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-3deg)}92%{transform:rotate(3deg)}95%{transform:rotate(-2deg)}}

/* footer */
.ft{background:var(--ink);text-align:center;padding:50px 16px 40px}
.ft__sns{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-weight:900}
.ft__sns a{text-decoration:none;border-bottom:2px solid var(--yellow)}
.ft__name{font-family:var(--ja-impact);font-size:22px;margin:26px 0 0}
.ft__copy{font-family:var(--en);letter-spacing:.15em;font-size:12px;opacity:.6;margin:4px 0 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__line,.hero__lead,.hero__photo,.reveal{opacity:1;transform:none}
}
@media (max-width:600px){
  .stream{padding:40px 0 46px}
  .polaroid{width:150px;padding:7px 7px 26px}
  .polaroid--wide{width:200px}
  .stream__row{gap:22px}
}