/* YoruTool 公式サイト — アプリと同一のデザイントークン (夜=ダーク固定) */
:root{
  --bg:#0b0e1e; --bg2:#0e1226; --elev:#131730; --card:#181d38; --line:#2a3152;
  --gold:#e0b45c; --gold2:#f0ce86; --goldink:#1a1405;
  --text:#f2f4f8; --sub:#aeb6c2; --dim:#8a93a1;
  --pink:#ff7eb6; --blue:#5cc8ff; --green:#6fdc8c; --purple:#8a7bff;
  --glass:rgba(24,29,56,.62);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",sans-serif;
  line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
a:hover{opacity:.85}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* 星空 (夜空が輝く) — z-index:-1 で常に全コンテンツの背面 */
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* オーロラ (ゆっくり漂う光のベール) */
.stars::before{content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(640px 420px at 18% 12%,rgba(224,180,92,.12),transparent 70%),
    radial-gradient(720px 520px at 82% 22%,rgba(255,126,182,.10),transparent 70%),
    radial-gradient(860px 640px at 55% 85%,rgba(92,200,255,.07),transparent 72%),
    radial-gradient(500px 380px at 40% 45%,rgba(138,123,255,.06),transparent 70%);
  animation:aur 26s ease-in-out infinite alternate}
.stars::after{content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(520px 360px at 70% 60%,rgba(224,180,92,.07),transparent 70%),
    radial-gradient(620px 460px at 25% 75%,rgba(255,126,182,.06),transparent 70%);
  animation:aur2 34s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate3d(4%,-3%,0) scale(1.1)}}
@keyframes aur2{to{transform:translate3d(-4%,3%,0) scale(1.14)}}
.stars i{position:absolute;border-radius:50%;background:#fff;
  opacity:.16;animation:tw 4s ease-in-out infinite}
.stars i.big{opacity:.3;box-shadow:0 0 7px 1.5px rgba(255,255,255,.45)}
.stars i.cross{box-shadow:0 0 8px 2px rgba(240,206,134,.5)}
@keyframes tw{50%{opacity:.85;transform:scale(1.6)}}
/* 流れ星 */
.shooting{position:absolute;width:130px;height:2px;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(240,206,134,.5) 30%,transparent);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.8));
  transform:rotate(146deg);opacity:0;animation:shoot 1.5s ease-out forwards}
@keyframes shoot{
  0%{opacity:0;translate:0 0}
  8%{opacity:.95}
  100%{opacity:0;translate:-260px 172px}}
/* ふわり浮遊 */
.floaty{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-9px)}}
/* カードがそっと光る */
.card,.price{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(224,180,92,.45);
  box-shadow:0 10px 34px rgba(0,0,0,.35),0 0 24px rgba(224,180,92,.10)}
.price:hover{transform:translateY(-4px);box-shadow:0 14px 44px rgba(0,0,0,.4),0 0 34px rgba(224,180,92,.14)}
.price.ai:hover{box-shadow:0 14px 44px rgba(0,0,0,.4),0 0 34px rgba(255,126,182,.16)}
@media(prefers-reduced-motion:reduce){
  .stars::before,.stars::after,.stars i,.floaty{animation:none}
  .shooting{display:none}
  .card,.price{transition:none}
  .card:hover,.price:hover{transform:none}
}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(11,14,30,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
header.site .in{display:flex;align-items:center;gap:10px;padding:13px 0}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--text)}
.logo .moon{font-size:20px;filter:drop-shadow(0 0 8px rgba(224,180,92,.6))}
nav.g{margin-left:auto;display:flex;gap:20px;font-size:14px}
nav.g a{color:var(--sub)}
nav.g a:hover{color:var(--gold);opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--goldink)!important;font-weight:800;
  border:none;border-radius:14px;padding:14px 26px;font-size:15px;cursor:pointer;
  box-shadow:0 4px 24px rgba(224,180,92,.35);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{opacity:1;transform:translateY(-1px);box-shadow:0 6px 30px rgba(224,180,92,.5)}
.btn.ghost{background:var(--glass);color:var(--text)!important;border:1px solid var(--line);box-shadow:none}
.btn.pink{background:linear-gradient(135deg,#ff9ecb,var(--pink));color:#3a0f24!important;
  box-shadow:0 4px 24px rgba(255,126,182,.35)}
.btn.small{padding:9px 16px;border-radius:10px;font-size:13px}
.btn.big{padding:17px 36px;font-size:17px;border-radius:16px}

/* hero */
.hero{padding:72px 0 60px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -20% auto;height:130%;
  background:radial-gradient(ellipse at 50% 0%,rgba(224,180,92,.14),transparent 60%),
             radial-gradient(ellipse at 85% 30%,rgba(255,126,182,.08),transparent 55%);pointer-events:none}
.hero h1{font-size:clamp(30px,6vw,54px);line-height:1.3;margin:18px 0 14px;font-weight:900;letter-spacing:.01em}
.hero h1 em{color:var(--gold);font-style:normal;text-shadow:0 0 30px rgba(224,180,92,.45)}
.hero p.lead{color:var(--sub);font-size:clamp(15px,2.4vw,18px);max-width:620px;margin:0 0 30px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--glass);
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:13px;color:var(--sub);
  backdrop-filter:blur(8px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(111,220,140,.6);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(111,220,140,0)}100%{box-shadow:0 0 0 0 rgba(111,220,140,0)}}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* sections */
section{padding:68px 0}
h2.sec{font-size:clamp(22px,3.6vw,32px);text-align:center;margin:0 0 8px;font-weight:800}
p.sec-sub{text-align:center;color:var(--dim);margin:0 0 40px;font-size:14px}
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:24px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-size:22px;margin-bottom:14px;background:rgba(224,180,92,.13)}
.card h3{margin:0 0 8px;font-size:16.5px}
.card p{margin:0;color:var(--sub);font-size:14px}
.card.glow{border-color:rgba(224,180,92,.45);box-shadow:0 0 40px rgba(224,180,92,.08) inset,0 8px 40px rgba(0,0,0,.3)}

/* スクロール連動 */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .stars i,.dot{animation:none}
  html{scroll-behavior:auto}
}

/* price */
.price{background:linear-gradient(160deg,var(--card),var(--elev));border:1px solid rgba(224,180,92,.4);
  border-radius:22px;padding:34px;text-align:center}
.price .amount{font-size:44px;font-weight:900;color:var(--gold)}
.price .amount small{font-size:16px;color:var(--sub);font-weight:600}
.price ul{list-style:none;padding:0;margin:20px 0 26px;color:var(--sub);font-size:14.5px;text-align:left}
.price li{padding:7px 0;border-bottom:1px dashed var(--line)}
.price li:last-child{border:none}
.price .ref{display:inline-block;background:rgba(255,126,182,.12);border:1px solid rgba(255,126,182,.4);
  color:var(--pink);border-radius:999px;padding:3px 14px;font-size:13px;font-weight:700;margin-top:6px}
.price.ai{border-color:rgba(255,126,182,.5);position:relative}
.price.ai .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#ff9ecb,var(--pink));color:#3a0f24;font-weight:800;
  font-size:12px;border-radius:999px;padding:4px 16px;white-space:nowrap}

/* legal / docs */
main.doc{padding:56px 0 90px}
main.doc h1{font-size:clamp(24px,4vw,32px);margin:0 0 6px}
main.doc .updated{color:var(--dim);font-size:13px;margin-bottom:36px}
main.doc h2{font-size:19px;margin:40px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
main.doc p,main.doc li{color:var(--sub);font-size:15px}
main.doc table{width:100%;border-collapse:collapse;font-size:14px}
main.doc th,main.doc td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
main.doc th{background:var(--elev);color:var(--text);white-space:nowrap;width:180px}
.note{background:rgba(224,180,92,.08);border:1px solid rgba(224,180,92,.3);
  border-radius:12px;padding:14px 18px;font-size:13.5px;color:var(--sub)}

/* forms */
.field{width:100%;background:var(--elev);border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:14px;font-size:15px;font-family:ui-monospace,monospace}
.field:focus{outline:none;border-color:var(--gold)}
label.lb{display:block;font-size:13px;color:var(--dim);margin:18px 0 6px}

/* sticky CTA (モバイル) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,14,30,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  display:none;gap:10px}
.sticky-cta .btn{flex:1;padding:13px 10px;font-size:14px}
@media(max-width:760px){.sticky-cta{display:flex}body{padding-bottom:76px}}

/* footer */
footer.site{border-top:1px solid var(--line);padding:44px 0 60px;color:var(--dim);font-size:13.5px}
footer.site .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
footer.site a{color:var(--dim);display:block;padding:3px 0}
footer.site a:hover{color:var(--gold)}
@media(max-width:640px){nav.g{display:none}}

/* TSUKI */
.tsuki-img{filter:drop-shadow(0 10px 40px rgba(224,180,92,.25))}
.tsuki-bubble{position:relative;background:var(--glass);border:1px solid rgba(224,180,92,.4);
  border-radius:16px;padding:12px 16px;font-size:13.5px;color:var(--text);backdrop-filter:blur(8px)}
.tsuki-bubble::after{content:"";position:absolute;bottom:-8px;left:26px;width:14px;height:14px;
  background:inherit;border-right:1px solid rgba(224,180,92,.4);border-bottom:1px solid rgba(224,180,92,.4);
  transform:rotate(45deg)}