:root{
  --bg:#05070e;
  --bg-soft:#0a0e1a;
  --txt:#eef1f8;
  --mut:#a3afc6;
  --faint:#66708a;
  --line:rgba(255,255,255,.10);
  --teal:#7af0d8; --indigo:#9aa4ff; --pink:#f3b6f7;
  --serif:"Fraunces","Hiragino Mincho ProN",Georgia,serif;
  --sans:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans); background:var(--bg); color:var(--txt);
  line-height:1.9; font-weight:400; letter-spacing:.01em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px;}
.col{max-width:660px;margin:0 auto;}

/* ---------- nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:14px;
  max-width:1080px;margin:0 auto;padding:24px 26px;}
.nav .mark{display:flex;align-items:center;gap:11px;text-decoration:none;}
.nav .mark img{width:32px;height:32px;border-radius:9px;}
.nav .mark span{font-family:var(--serif);font-size:20px;font-weight:500;color:var(--txt);letter-spacing:.02em;}
.langtoggle{margin-left:auto;display:flex;gap:4px;}
.langtoggle button{background:rgba(255,255,255,.04);color:var(--mut);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;font-family:var(--sans);font-size:12px;letter-spacing:.05em;cursor:pointer;transition:.2s;}
.langtoggle button.on{color:var(--bg);background:var(--txt);border-color:transparent;}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:120px 26px 90px;overflow:hidden;}
.hero .bg{position:absolute;inset:-4%;z-index:0;
  /* 背景はWebP（1756KB→199KB）。PNGも残してあるが、保険で二重に書くと
     両方読み込まれて逆に重くなるため書かない（WebPは2020年以降のブラウザなら対応） */
  background:
    radial-gradient(72% 56% at 50% 44%, rgba(5,7,14,.5), transparent 72%),
    linear-gradient(180deg, rgba(5,7,14,.28), rgba(5,7,14,.30) 48%, rgba(5,7,14,.92)),
    url('hero.webp') center/cover no-repeat,
    #05070e;
  animation:heroDrift 44s ease-in-out infinite alternate;will-change:transform;}
@keyframes heroDrift{0%{transform:scale(1.04) translate3d(0,0,0);}100%{transform:scale(1.12) translate3d(-1.5%,-2%,0);}}
.hero .aurora{position:absolute;inset:-25%;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:screen;filter:blur(46px);
  background:
    radial-gradient(38% 30% at 28% 38%, rgba(122,240,216,.55), transparent 60%),
    radial-gradient(42% 30% at 74% 42%, rgba(243,182,247,.5), transparent 60%),
    radial-gradient(40% 32% at 54% 30%, rgba(154,164,255,.55), transparent 60%);
  animation:auroraFlow 22s ease-in-out infinite;will-change:transform,opacity;}
/* ▼オーロラの動き「しっかり流れる」版。元に戻すには下のauroraFlowを使う行を
   「animation:auroraDrift 28s ease-in-out infinite alternate;」に変えればOK（元の控えめ版） */
@keyframes auroraDrift{0%{transform:translate3d(-3%,0,0) rotate(-1deg) scale(1);}100%{transform:translate3d(4%,3%,0) rotate(1.5deg) scale(1.14);}}
@keyframes auroraFlow{
  0%{transform:translate3d(-9%,-3%,0) rotate(-3deg) scale(1.06);opacity:.6;}
  25%{transform:translate3d(5%,3%,0) rotate(1.5deg) scale(1.24);opacity:.95;}
  50%{transform:translate3d(10%,5%,0) rotate(3deg) scale(1.14);opacity:.74;}
  75%{transform:translate3d(-3%,2%,0) rotate(.5deg) scale(1.26);opacity:.92;}
  100%{transform:translate3d(-9%,-3%,0) rotate(-3deg) scale(1.06);opacity:.6;}
}
.hero .stars{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero .glowcursor{position:absolute;width:520px;height:520px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(154,164,255,.16), transparent 62%);transform:translate(-50%,-50%);opacity:0;transition:opacity .6s ease;}
.hero .orb{animation:orbBreathe 6.5s ease-in-out infinite;will-change:transform;}
.hero .brand{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4.2vw,46px);
  letter-spacing:.06em;line-height:1;color:var(--txt);margin-top:18px;}
.hero .bkana{font-family:var(--sans);font-size:12.5px;letter-spacing:.4em;color:var(--mut);margin-top:9px;}
@keyframes orbBreathe{0%,100%{transform:scale(1);box-shadow:0 18px 70px rgba(154,164,255,.4);}50%{transform:scale(1.045);box-shadow:0 26px 96px rgba(154,164,255,.62);}}

/* photo section with dark veil for legible text */
.photo{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;}
.photo::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(5,7,14,.82),rgba(5,7,14,.68) 50%,rgba(5,7,14,.9));}
.photo.soft-veil::before{background:linear-gradient(180deg,rgba(5,7,14,.74),rgba(5,7,14,.5) 50%,rgba(5,7,14,.84));}
.photo>*{position:relative;z-index:1;}
.hero .inner{position:relative;z-index:1;width:100%;max-width:760px;margin-inline:auto;text-align:center;}
.hero .orb{width:132px;height:132px;border-radius:33px;margin:0 auto 28px;display:block;
  box-shadow:0 22px 90px rgba(154,164,255,.5);}
.closeorb{width:88px;height:88px;border-radius:22px;margin:0 auto 26px;display:block;
  box-shadow:0 18px 70px rgba(154,164,255,.45);animation:orbBreathe 6.5s ease-in-out infinite;}
.eyebrow{font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:.36em;
  text-transform:uppercase;color:var(--mut);}
.eyebrow.ja{letter-spacing:.22em;}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5.4vw,60px);line-height:1.2;
  letter-spacing:.04em;margin:22px 0 0;color:var(--txt);word-break:keep-all;text-align:center;}
/* JA hero: each phrase on its own centered line so it never breaks at an odd spot */
body.lang-ja .hero h1 span{display:block;text-align:center;}
.hero h1 em{font-style:italic;
  background:linear-gradient(110deg,var(--teal),var(--indigo) 55%,var(--pink));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero .sub{font-family:var(--sans);font-size:clamp(16.5px,2vw,19px);color:var(--mut);max-width:540px;margin:26px auto 0;line-height:1.9;}
.scrollhint{position:absolute;bottom:30px;left:0;right:0;z-index:1;text-align:center;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);animation:floaty 2.6s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);opacity:.6;}50%{transform:translateY(6px);opacity:1;}}

/* ---------- buttons ---------- */
.cta{display:inline-flex;align-items:center;gap:9px;margin-top:34px;padding:14px 30px;border-radius:999px;
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.02em;cursor:pointer;text-decoration:none;
  color:#06120f;background:linear-gradient(110deg,var(--teal),var(--indigo));
  box-shadow:0 10px 34px rgba(122,240,216,.22);transition:transform .25s ease,box-shadow .25s ease;}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(122,240,216,.32);}
.cta.ghost{color:var(--txt);background:transparent;border:1px solid var(--line);box-shadow:none;}
.cta.ghost:hover{border-color:rgba(255,255,255,.3);}

/* ---------- sections ---------- */
section{padding:clamp(76px,10vw,118px) 0;position:relative;}
.band{padding-top:0!important;padding-bottom:0!important;min-height:62vh;display:flex;align-items:center;}
.kicker{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--teal);opacity:.9;}
.kicker.ja{letter-spacing:.2em;}
h2.big{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,50px);line-height:1.24;letter-spacing:-.005em;margin:16px 0 0;word-break:keep-all;text-wrap:balance;}
h2.big em{font-style:italic;
  background:linear-gradient(110deg,var(--teal),var(--pink));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.body{font-family:var(--sans);font-size:17px;color:var(--mut);margin-top:22px;line-height:1.95;}
.center{text-align:center;}

/* soft background utility */
.soft{background:var(--bg-soft);}
/* empathy — quiet full-width statement */
.empathy{background:var(--bg-soft);}
.empathy .col>p{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.6vw,38px);line-height:1.5;color:var(--txt);}
.empathy .dim{color:var(--faint);font-size:clamp(16px,4.6vw,22px);}

/* ritual steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:60px;}
@media(max-width:720px){.steps{grid-template-columns:1fr;gap:14px;}}
.step{border-top:1px solid var(--line);padding-top:24px;}
.step .ph{margin-bottom:20px;}
.step .n{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--faint);}
.step h3{font-family:var(--serif);font-weight:500;font-size:25px;margin:8px 0 10px;letter-spacing:.01em;}
.step p{font-family:var(--sans);font-size:16px;color:var(--mut);line-height:1.85;}

/* story — full-bleed quote banner (16:9 on desktop, 4:5 on phones) */
.storyband{margin-top:46px;line-height:0;}
.storyband picture img{width:100%;height:auto;display:block;}
body.lang-en .storyband picture[data-lang="en"],
body.lang-ja .storyband picture[data-lang="ja"]{display:block;}
/* full-bleed composed image banner (text baked into image) */
.imgband{padding:0!important;line-height:0;}
.imgband picture img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 84%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 84%, transparent 100%);}
/* language-swapped media must render as block when active */
body.lang-en .quoteimg[data-lang="en"],body.lang-ja .quoteimg[data-lang="ja"],
body.lang-en .imgband picture[data-lang="en"],body.lang-ja .imgband picture[data-lang="ja"]{display:block;}

/* showcase split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:36px;}}

/* values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px;}
@media(max-width:720px){.values{grid-template-columns:1fr;gap:28px;}}
.value h3{font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:10px;}
.value p{font-family:var(--sans);font-size:16px;color:var(--mut);line-height:1.85;}

/* closing */
.closing{text-align:center;}
.madein{margin-top:30px;font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(110deg,var(--teal),var(--indigo) 60%,var(--pink));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.madein.ja{text-transform:none;letter-spacing:.12em;}

/* image placeholder */
.featimg{width:100%;display:block;border-radius:22px;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.45);}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--line);border-radius:20px;background:rgba(255,255,255,.02);
  color:var(--faint);font-size:13px;letter-spacing:.06em;line-height:1.6;padding:24px;}
.ph.sq{aspect-ratio:1/1;}
.ph.phone{aspect-ratio:9/19;max-width:300px;margin:0 auto;border-radius:38px;padding:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0a0e1a;
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 60px rgba(154,164,255,.12);}
.ph.phone img{border-radius:inherit;}
.ph.wide{aspect-ratio:16/10;}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}

/* how it works — real app screens */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:62px;}
@media(max-width:820px){.shots{grid-template-columns:1fr;gap:54px;max-width:340px;margin-left:auto;margin-right:auto;}}
.shot{margin:0;}
.shot .ph.phone{max-width:264px;}
.shot figcaption{text-align:center;margin-top:26px;max-width:300px;margin-left:auto;margin-right:auto;}
.shot figcaption h3{font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:8px;letter-spacing:.01em;}
.shot figcaption p{font-family:var(--sans);font-size:15px;color:var(--mut);line-height:1.8;}
.shots .shot:nth-child(2){transition-delay:.12s;}
.shots .shot:nth-child(3){transition-delay:.24s;}

/* feature icon row */
.feats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:74px auto 0;max-width:780px;}
@media(max-width:720px){.feats{grid-template-columns:repeat(2,1fr);gap:34px 18px;}}
.feat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;}
.feat .fi{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:rgba(122,240,216,.06);color:var(--teal);
  box-shadow:0 0 30px rgba(122,240,216,.10);}
.feat .fi svg{width:24px;height:24px;}
.feat b{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--txt);letter-spacing:.02em;line-height:1.4;}

/* footer */
.footer{border-top:1px solid var(--line);padding:44px 0 72px;
  display:flex;gap:24px;flex-wrap:wrap;align-items:center;font-family:var(--sans);font-size:15px;}
.footer .fmark{display:flex;align-items:center;gap:9px;text-decoration:none;}
.footer .fmark img{width:26px;height:26px;border-radius:8px;}
.footer .fmark span{font-family:var(--serif);font-size:17px;color:var(--txt);}
.footer a{color:var(--mut);text-decoration:none;}
.footer a:hover{color:var(--teal);}
/* 特定商取引法の表記は法律上必要だが、目立たせるものではない。フッターの中でもさらに控えめに */
.footer a.legal{font-size:12.5px;color:var(--faint);}
.footer a.legal:hover{color:var(--mut);}
.footer .sig{margin-left:auto;color:var(--faint);font-family:var(--serif);font-style:italic;}

/* legal docs */
h1.doc{font-family:var(--serif);font-weight:400;font-size:clamp(34px,6vw,50px);margin:36px 0 6px;letter-spacing:-.01em;}
.updated{color:var(--faint);font-size:13px;letter-spacing:.05em;margin-bottom:30px;}
.col h2:not(.big){font-family:var(--serif);font-weight:500;font-size:21px;margin:34px 0 8px;color:var(--txt);}
.col p,.col li{font-family:var(--sans);font-size:16px;color:#cfd6e6;line-height:1.9;}
.col ul{margin:8px 0 8px 20px;} .col li{margin:5px 0;}
a{color:var(--teal);}
.col a{text-decoration:underline;text-underline-offset:3px;}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(34px) scale(.985);filter:blur(8px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;filter:none;}
.steps .step:nth-child(2),.values .value:nth-child(2){transition-delay:.12s;}
.steps .step:nth-child(3),.values .value:nth-child(3){transition-delay:.24s;}

[data-lang]{display:none;}
body.lang-en [data-lang="en"]{display:revert;}
body.lang-ja [data-lang="ja"]{display:revert;}

@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none;filter:none;}
  .scrollhint{animation:none;}
  .hero .bg,.hero .aurora,.hero .orb{animation:none!important;}
  html{scroll-behavior:auto;}
}