/* =====================================================
   JinWise — dawn.css v1 (2026-06-11)
   コンセプト: 静かな夜明けの庭 × 生きている工房
   ページが「夜 → 夜明け → 朝」へ明けていく。
   トップページ専用（サブページは site.css のまま）
   ===================================================== */
:root{
  --night:   #0a1026;
  --night2:  #101a3a;
  --indigo:  #1b2750;
  --peach:   #f5b97e;
  --gold:    #d9a44a;
  --gold-deep:#b07f2a;
  --gold-soft:#f3d9a6;
  --cream:   #fdf9f1;
  --cream2:  #f6eee0;
  --cream3:  #f1e7d4;
  --ink:     #1c2030;
  --soft:    #4a5168;
  --mute:    #8b90a3;
  --line:    #e7dfcd;
  --orange:  #f97316;
  --orange-deep:#ea580c;
  --blue:    #2f6df0;
  --star:    #cfe0ff;
  --maxw: 1100px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ overflow-x:clip; }
body{
  font-family:'Noto Sans JP','Inter',-apple-system,'Hiragino Sans',sans-serif;
  color:var(--ink); background:var(--night);
  line-height:1.85; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.serif{ font-family:'Noto Serif JP',serif; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,.sec-title,.final h2{ text-wrap:balance; }
p,li,.sec-lead,.hero-sub{ text-wrap:pretty; }

/* ===== オープニング (夜空に灯がともる・短く) ===== */
#intro{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 90% 90% at 50% 60%, #16224a 0%, var(--night) 70%);
  animation:introOut .7s 1.9s ease forwards; }
#intro .intro-mark{ width:min(210px,48vw); height:auto; border-radius:22px;
  filter:drop-shadow(0 0 34px rgba(245,185,126,.5));
  opacity:0; transform:scale(.86);
  animation:introIn .9s .1s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes introIn{ to{ opacity:1; transform:scale(1); } }
@keyframes introOut{ to{ opacity:0; visibility:hidden; } }
body.intro-done #intro{ display:none; }
@media (prefers-reduced-motion: reduce){ #intro{ animation:introOut .3s .2s ease forwards; } }

/* ===== Header ===== */
header{ position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent; transition:background .35s, box-shadow .35s, backdrop-filter .35s; }
header.scrolled{ background:rgba(12,17,40,.78); backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(245,185,126,.18); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:18px; }
.brand{ display:flex; align-items:center; }
.brand-logo{ height:52px; width:auto; display:block; background:rgba(253,249,241,.92);
  border-radius:13px; padding:4px 10px; box-shadow:0 4px 18px rgba(5,8,24,.35); }
.nav-links{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav-links a{ font-size:14.5px; font-weight:700; color:#dfe6f8; transition:color .2s; }
.nav-links a:hover{ color:var(--gold-soft); }
.nav-cta{ padding:10px 20px; border-radius:999px; font-size:14px; font-weight:700;
  background:var(--orange); color:#fff; transition:transform .15s, box-shadow .2s;
  box-shadow:0 4px 16px rgba(249,115,22,.45); }
.nav-cta:hover{ transform:translateY(-1px); background:var(--orange-deep); }
.nav-line{ display:none; }
.nav-toggle{ display:none; width:42px; height:42px; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; background:rgba(253,249,241,.14); border:1px solid rgba(223,230,248,.35); border-radius:12px; cursor:pointer; padding:0; }
.nav-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:#eef2ff; transition:transform .25s, opacity .25s; }
header.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
header.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
header.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:760px){
  .nav-links{ display:none; position:absolute; top:62px; right:16px; left:16px; flex-direction:column; align-items:stretch;
    gap:0; margin:0; background:rgba(12,17,40,.96); backdrop-filter:blur(10px);
    border:1px solid rgba(245,185,126,.3); border-radius:16px; box-shadow:0 18px 44px rgba(4,7,20,.5); padding:10px 8px; }
  header.menu-open .nav-links{ display:flex; }
  .nav-links a{ padding:13px 16px; font-size:15px; border-radius:10px; }
  .nav-links a:active{ background:rgba(245,185,126,.14); }
  .nav-links .nav-line{ display:block; color:#fff; background:var(--orange); text-align:center; border-radius:12px; margin-top:8px; font-weight:800; }
  .nav-toggle{ display:flex; }
  .nav-cta{ display:none; }
}

/* ===== Hero — 夜明け前の空 ===== */
.hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  text-align:center; overflow:hidden; padding:120px 24px 90px;
  background:linear-gradient(180deg,
    #070c1e 0%, #0a1026 28%, #101a3a 52%, #243259 70%, #6f5a7a 84%, #c98a63 94%, #f5b97e 100%); }
#skyCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
/* 地平線の光 (夜明けの兆し) */
.hero-horizon{ position:absolute; left:0; right:0; bottom:-6%; height:42%; z-index:1; pointer-events:none;
  background:radial-gradient(58% 86% at 50% 100%, rgba(249,196,134,.85) 0%, rgba(236,158,98,.42) 38%, rgba(120,86,96,.12) 68%, transparent 100%); }
.hero-glass{ position:relative; z-index:3; max-width:880px; margin:0 auto; }
/* AIの作業ライン (タイピング) */
.hero-proc{ display:inline-flex; align-items:center; gap:9px; margin-bottom:30px;
  font-family:var(--mono); font-size:13px; letter-spacing:.05em; color:#a9c2f0;
  background:rgba(10,16,38,.55); border:1px solid rgba(120,150,220,.35);
  border-radius:999px; padding:8px 18px; backdrop-filter:blur(4px);
  box-shadow:0 0 26px rgba(47,109,240,.18) inset, 0 6px 22px rgba(4,8,22,.35); }
.hero-proc .proc-dot{ width:7px; height:7px; border-radius:50%; background:#7fe2a9; flex:none;
  box-shadow:0 0 0 0 rgba(127,226,169,.7); animation:livedot 1.9s ease-out infinite; }
.hero-proc .caret{ display:inline-block; width:8px; height:15px; background:#a9c2f0; margin-left:2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@keyframes livedot{ 0%{ box-shadow:0 0 0 0 rgba(127,226,169,.55);} 70%{ box-shadow:0 0 0 10px rgba(127,226,169,0);} 100%{ box-shadow:0 0 0 0 rgba(127,226,169,0);} }
.hero h1{ font-family:'Noto Serif JP',serif; font-weight:700;
  font-size:clamp(24px,5.2vw,52px); line-height:1.5; letter-spacing:.02em;
  color:#f7f2e6; margin-bottom:26px; white-space:nowrap;
  text-shadow:0 2px 24px rgba(5,9,26,.65), 0 0 60px rgba(245,185,126,.18); }
.hero h1 .accent{ color:#9eb4e8; }      /* できない = まだ夜の色 */
.hero h1 .accent-go{ color:var(--gold-soft); text-shadow:0 0 30px rgba(243,217,166,.55); } /* できる = 夜明けの金 */
.hero h1 .accent-ai{ color:var(--peach); }
.hero-sub{ font-size:clamp(15px,2.2vw,19px); color:#d9deee; line-height:2.05;
  max-width:680px; margin:0 auto 8px; font-weight:500;
  text-shadow:0 1px 14px rgba(5,9,26,.6); }
.hero-sub .sub-lead{ font-size:.92em; color:#eef1fb; font-weight:600; }
.hero-sub .sub-gap{ display:block; height:.55em; }
.hero-sub .sub-gap br{ display:none; }
.hero-sub b{ color:#fdf6e6; font-weight:700; }
.hero-bridge{ margin:30px 0 12px; font-size:clamp(14px,1.7vw,16.5px); color:#f3e8d2; font-weight:500;
  text-shadow:0 1px 12px rgba(5,9,26,.6); }
.hero-bridge b{ color:var(--gold-soft); font-weight:800; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:3; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:16px 34px; border-radius:999px;
  font-size:16px; font-weight:700; position:relative; overflow:hidden;
  transition:transform .15s, box-shadow .25s, background .2s, border-color .2s, color .2s; }
.btn-gold{ background:linear-gradient(135deg,#fb8c2e,#ef6a12); color:#fff;
  box-shadow:0 10px 34px rgba(249,115,22,.45); }
.btn-gold::after{ content:""; position:absolute; top:0; left:-70%; width:42%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); animation:sweep 3.6s 1.2s ease-in-out infinite; }
@keyframes sweep{ 0%{ left:-70%; } 38%{ left:130%; } 100%{ left:130%; } }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 44px rgba(249,115,22,.6); }
.btn-ghost{ border:1.5px solid rgba(243,217,166,.65); color:#f7ecd4; background:rgba(12,17,40,.35); backdrop-filter:blur(3px); }
.btn-ghost:hover{ border-color:var(--gold-soft); color:#fff; background:rgba(217,164,74,.18); transform:translateY(-2px); }
.scroll-hint{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:10.5px; letter-spacing:.34em; color:rgba(28,32,48,.66); text-transform:uppercase; font-weight:700;
  animation:bob 2.1s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(6px);} }
@media (max-width:560px){
  .hero{ min-height:92vh; padding:96px 22px 64px; }
  .hero h1{ white-space:normal; font-size:clamp(21px,6vw,26px); line-height:1.62; }
  .hero-proc{ font-size:11px; padding:7px 14px; margin-bottom:22px; max-width:92vw; overflow:hidden; }
  .hero-sub{ font-size:14px; line-height:1.9; }
  .hero-bridge{ margin:24px 0 10px; font-size:13.5px; }
  .hero-actions{ width:100%; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .scroll-hint{ display:none; }
}

/* ===== Section 共通 ===== */
section{ padding:100px 0; position:relative; }
.sec-kicker{ font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin-bottom:14px; text-align:center; }
.sec-kicker::after{ content:""; display:block; width:34px; height:2px; margin:10px auto 0; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--orange)); opacity:.75; }
.sec-title{ font-family:'Noto Serif JP',serif; font-weight:700;
  font-size:clamp(24px,4vw,38px); line-height:1.5; text-align:center; margin-bottom:18px; color:var(--ink); }
.sec-title .accent{ color:var(--gold-deep); }
.sec-lead{ text-align:center; color:var(--soft); font-size:17px; line-height:2.05; max-width:680px; margin:0 auto 54px; }
.morelink{ text-align:center; margin-top:42px; }
.morelink a{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--gold-deep);
  border:1.5px solid var(--gold); border-radius:999px; padding:12px 28px; transition:background .2s, transform .15s, color .2s; }
.morelink a:hover{ background:rgba(217,164,74,.12); transform:translateY(-2px); }

/* ===== ② JinWise とは — まだ夜の中 (星座の網) ===== */
.cane{ background:
    radial-gradient(1.6px 1.6px at 12% 24%, var(--star) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 31% 64%, rgba(207,224,255,.8) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 47% 18%, rgba(207,224,255,.9) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 63% 52%, rgba(207,224,255,.7) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 78% 30%, var(--star) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 88% 68%, rgba(207,224,255,.75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 84%, rgba(207,224,255,.6) 50%, transparent 51%),
    linear-gradient(180deg,#0a1026 0%, #101a3a 100%);
  color:#e8ecf8; text-align:center; padding:110px 0 120px; }
.cane .sec-kicker{ color:var(--gold-soft); }
.cane .sec-title{ color:#f7f2e6; }
.cane .sec-title .accent{ color:var(--gold-soft); }
.cane .sec-lead{ color:#c3cce4; margin-bottom:0; }
.cane .sec-lead b{ color:#fff; }
.cane .morelink a{ color:var(--gold-soft); border-color:rgba(243,217,166,.5); }
.cane .morelink a:hover{ background:rgba(243,217,166,.12); }

/* ===== 夜明けの帯 (ここで夜が明ける) ===== */
.daybreak{ height:220px; padding:0; overflow:hidden; position:relative;
  background:linear-gradient(180deg,
    #101a3a 0%, #2a3055 26%, #7a5e74 52%, #d99a6a 74%, #f7d9a8 90%, var(--cream) 100%); }
.daybreak .sun{ position:absolute; left:50%; top:58%; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,241,210,.95) 0%, rgba(249,196,134,.55) 42%, transparent 70%);
  animation:sunrise 7s ease-in-out infinite; }
@keyframes sunrise{ 0%,100%{ transform:translate(-50%,-46%) scale(1); opacity:.85; } 50%{ transform:translate(-50%,-56%) scale(1.12); opacity:1; } }
.daybreak .db-words{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif JP',serif; font-size:clamp(13px,1.8vw,15.5px); letter-spacing:.42em;
  color:rgba(58,46,38,.78); font-weight:600; text-indent:.42em; }

/* ===== ③ できること — 朝の最初の光 ===== */
.services{ background:linear-gradient(180deg, var(--cream) 0%, #faf3e6 100%); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc{ background:#fffdf8; border:1px solid var(--line); border-radius:18px; padding:30px 26px;
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.svc:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(150,110,40,.14); border-color:var(--gold-soft); }
.svc-ic{ width:54px; height:54px; border-radius:15px; background:linear-gradient(140deg,#fdf2dc,#f7e3bb);
  display:inline-flex; align-items:center; justify-content:center; font-size:27px; margin-bottom:16px;
  box-shadow:0 5px 14px rgba(217,164,74,.22); }
.svc-cat{ font-size:12px; font-weight:800; color:var(--gold-deep); letter-spacing:.06em; margin-bottom:4px; }
.svc h3{ font-size:17px; font-weight:900; color:var(--ink); margin-bottom:8px; letter-spacing:.02em; }
.svc p{ font-size:14px; color:var(--soft); line-height:1.85; }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }
.chips-label{ text-align:center; font-size:13.5px; font-weight:700; color:var(--mute); margin:36px 0 14px; letter-spacing:.04em; }
.cchips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cchip{ display:inline-flex; align-items:center; gap:8px; background:#fffdf8; border:1px solid var(--gold-soft);
  border-radius:999px; padding:11px 22px; font-size:14.5px; font-weight:800; color:var(--soft);
  transition:transform .2s, box-shadow .2s; }
.cchip:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(217,164,74,.18); }
.cchip::before{ content:"✓"; color:var(--gold); font-weight:900; }

/* ===== ③+ 道具たち — 光の星座 ===== */
.stack{ background:#fffdf8; overflow:hidden; }
.tch-wrap{ position:relative; max-width:880px; margin:0 auto; }
#linkCanvas{ position:absolute; inset:-30px; width:calc(100% + 60px); height:calc(100% + 60px); pointer-events:none; z-index:0; }
.tch-grid{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.tchip{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:12px 20px 10px;
  box-shadow:0 4px 16px rgba(150,110,40,.08); position:relative;
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.tchip::before{ content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px rgba(217,164,74,.85); }
.tchip:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:0 14px 30px rgba(150,110,40,.18); }
.tchip b{ font-family:'Inter','Noto Sans JP',sans-serif; font-size:15px; font-weight:800; color:var(--ink); letter-spacing:.01em; }
.tchip i{ font-style:normal; font-size:11px; font-weight:600; color:var(--mute); letter-spacing:.03em; }
.stack-stats{ display:flex; align-items:flex-start; justify-content:center; gap:54px; flex-wrap:wrap; margin-top:58px; }
.stack-stats .stat{ display:flex; flex-direction:column; align-items:center; }
.stack-stats .num{ font-family:'Inter',sans-serif; font-weight:900; font-size:clamp(38px,6vw,56px);
  color:var(--gold-deep); line-height:1;
  background:linear-gradient(160deg,#c8932f,#8a5f14); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stack-stats .lbl{ font-size:13px; color:var(--soft); margin-top:10px; letter-spacing:.03em; text-align:center; line-height:1.7; font-weight:600; }
.stack-note{ text-align:center; font-size:11.5px; color:var(--mute); margin-top:22px; }
.stack-proof{ text-align:center; font-family:'Noto Serif JP',serif; font-size:clamp(15px,2.2vw,18px); color:var(--ink); margin-top:30px; }
.stack-proof b{ color:var(--gold-deep); }
@media (max-width:560px){ .stack-stats{ gap:26px; } .tch-grid{ gap:10px; } .tchip{ padding:10px 16px 8px; } }

/* ===== ④ 伴走 — 朝のしたく ===== */
.whofor{ background:var(--cream2); }
.who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.who{ display:flex; align-items:flex-start; gap:14px; background:#fffdf8; border:1px solid var(--line);
  border-radius:14px; padding:22px; position:relative; transition:transform .2s, box-shadow .2s; }
.who:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(150,110,40,.12); }
.who-ic{ width:46px; height:46px; border-radius:13px; background:linear-gradient(140deg,#fdf2dc,#f7e3bb);
  display:inline-flex; align-items:center; justify-content:center; font-size:23px; flex:none; }
.who p{ font-size:14.5px; color:var(--soft); line-height:1.8; }
.who p b{ color:var(--ink); font-weight:700; }
@media (max-width:860px){ .who-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .who-grid{ grid-template-columns:1fr; } }

/* ===== ⑤ 約束 ===== */
.charter{ background:var(--cream3); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  text-align:center; padding:80px 0; }
.charter .sec-lead{ margin-bottom:30px; }

/* ===== ⑥ 実績 — 生きている工房 (コンソール) ===== */
.trust{ background:#fffdf8; }
.trust .wrap{ max-width:920px; }
.console{ max-width:760px; margin:10px auto 0; border-radius:18px; overflow:hidden;
  background:linear-gradient(170deg,#0d1430,#101a3a 70%,#15214a);
  border:1px solid rgba(120,150,220,.3);
  box-shadow:0 30px 70px rgba(16,26,58,.35), 0 0 0 6px rgba(217,164,74,.06); }
.console-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px;
  background:rgba(7,11,28,.72); border-bottom:1px solid rgba(120,150,220,.22); }
.console-bar i{ width:11px; height:11px; border-radius:50%; }
.console-bar i:nth-child(1){ background:#f26d63; }
.console-bar i:nth-child(2){ background:#f5bd4f; }
.console-bar i:nth-child(3){ background:#62c462; }
.console-bar span{ margin-left:10px; font-family:var(--mono); font-size:12px; color:#9fb1da; letter-spacing:.04em; }
.console-body{ padding:22px 24px 14px; min-height:248px; font-family:var(--mono);
  font-size:13.5px; line-height:2.05; color:#dce5f8; text-align:left; }
.console-body .cl{ display:block; white-space:pre-wrap; }
.console-body .cl .pr{ color:#7fa2e8; }
.console-body .cl .ok{ color:#7fe2a9; font-weight:700; }
.console-body .cl .em{ color:var(--gold-soft); }
.console-body .caret{ display:inline-block; width:8px; height:15px; background:#dce5f8; vertical-align:-2px; animation:blink 1s steps(1) infinite; }
.console-foot{ display:flex; align-items:center; gap:9px; padding:11px 18px;
  border-top:1px solid rgba(120,150,220,.18); font-size:11.5px; color:#8da0cc; }
.dot-live{ width:8px; height:8px; border-radius:50%; background:#7fe2a9; flex:none;
  box-shadow:0 0 0 0 rgba(127,226,169,.7); animation:livedot 1.8s ease-out infinite; }
.works-next{ text-align:center; font-size:13px; color:var(--mute); margin-top:24px; }
.trust-quote{ background:var(--cream2); border-left:4px solid var(--gold); border-radius:0 16px 16px 0;
  padding:30px; display:flex; flex-direction:column; justify-content:center; }
.trust-quote p{ font-family:'Noto Serif JP',serif; font-size:17px; font-weight:600; color:var(--ink); line-height:1.85; }
.trust-quote small{ display:block; margin-top:14px; font-size:13px; color:var(--mute); font-weight:600; }
.trust-quote small a{ color:var(--gold-deep); font-weight:700; }
@media (max-width:560px){ .console-body{ font-size:11.5px; padding:18px 14px 10px; min-height:300px; } }

/* ===== ⑦ Light Axis — 小さく・呼吸だけ ===== */
.la-intro{ background:linear-gradient(180deg,#fffdf8 0%, var(--cream2) 100%); text-align:center; }
.la-intro .wrap{ max-width:720px; }
.egg-wrap{ display:flex; justify-content:center; margin:6px 0 26px; }
.mini-egg{ position:relative; width:64px; height:80px;
  background:radial-gradient(circle at 38% 32%, #fffef8 0%, #f7ecd0 58%, #e7d3a4 100%);
  border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
  box-shadow:0 10px 26px rgba(150,110,40,.25), 0 0 38px rgba(243,217,166,.65);
  animation:eggBreath 3.6s ease-in-out infinite; }
.mini-egg .egg-shine{ position:absolute; top:14%; left:24%; width:14px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.85); filter:blur(2px); transform:rotate(-18deg); }
@keyframes eggBreath{ 0%,100%{ transform:scale(1); box-shadow:0 10px 26px rgba(150,110,40,.25), 0 0 30px rgba(243,217,166,.5); }
  50%{ transform:scale(1.05); box-shadow:0 12px 30px rgba(150,110,40,.3), 0 0 52px rgba(243,217,166,.9); } }
.la-intro .sec-lead{ margin-bottom:0; }
.hero-sublinks{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:22px; }
.hero-sublinks a{ display:inline-flex; align-items:center; padding:8px 18px; border-radius:999px;
  border:1.5px solid var(--gold); color:var(--gold-deep); font-weight:700; font-size:13.5px; background:#fffdf8;
  transition:transform .15s, background .2s; }
.hero-sublinks a:hover{ transform:translateY(-2px); background:rgba(217,164,74,.1); }

/* ===== ⑧ Final CTA — 朝 ===== */
.final{ background:
    radial-gradient(ellipse 70% 80% at 50% 110%, rgba(249,196,134,.6) 0%, rgba(247,217,168,.22) 48%, transparent 75%),
    linear-gradient(180deg, var(--cream2) 0%, #fbeed3 100%);
  color:var(--ink); text-align:center; position:relative; overflow:hidden; }
.final h2{ font-family:'Noto Serif JP',serif; font-size:clamp(26px,5vw,46px); font-weight:700; line-height:1.5; margin-bottom:16px; }
.final h2 .accent{ color:var(--gold-deep); }
.final p{ color:var(--soft); font-size:17px; margin-bottom:36px; }
.final p b{ color:var(--ink); }
.final .btn-ghost{ border-color:var(--gold); color:var(--gold-deep); background:rgba(255,253,248,.7); }
.final .btn-ghost:hover{ background:rgba(217,164,74,.12); color:var(--gold-deep); }

/* ===== Footer ===== */
footer{ background:#0c1228; color:#a9b2cc; padding:42px 0; font-size:13px; }
footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.fbrand-logo{ height:52px; width:auto; background:rgba(253,249,241,.92); border-radius:12px; padding:4px 10px; }
footer .fnav{ display:flex; gap:20px; flex-wrap:wrap; }
footer .fnav a{ color:#9fb0d2; transition:color .2s; }
footer .fnav a:hover{ color:var(--gold-soft); }
footer .fmeta{ line-height:1.8; }

/* ===== reveal ===== */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .btn-gold::after, .daybreak .sun, .mini-egg, .hero-proc .proc-dot, .dot-live, .scroll-hint{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}
@media (max-width:560px){
  section{ padding:72px 0; }
  .daybreak{ height:170px; }
}

/* ===== v2 (2026-06-11): 画像スロット構造 ===== */
/* --- 共通: img-slot (data-img のファイルを置くと自動差し替え) --- */
.img-slot img{ display:block; width:100%; height:100%; object-fit:cover; }

/* --- Hero 2カラム + メインビジュアル枠 --- */
.hero-visual{ position:relative; border-radius:24px; padding:10px; margin:46px auto 0; max-width:420px;
  background:rgba(12,17,40,.5); border:1px solid rgba(243,217,166,.34);
  backdrop-filter:blur(6px); box-shadow:0 24px 60px rgba(4,8,22,.45), 0 0 40px rgba(245,185,126,.12); }
.hero-visual img{ border-radius:16px; aspect-ratio:4/3; }
.hv-ph{ display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  aspect-ratio:4/3; border-radius:16px;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(245,185,126,.32) 0%, transparent 65%),
    linear-gradient(165deg,#101a3a 0%, #1b2750 60%, #3a3a63 100%); }
.hero-visual.loaded .hv-ph{ display:none; }
.hv-orb{ position:absolute; border-radius:50%; filter:blur(1px); }
.hv-orb.o1{ width:64px; height:64px; left:18%; top:24%;
  background:radial-gradient(circle at 35% 30%, rgba(249,210,150,.9), rgba(249,210,150,.06) 70%);
  animation:orbFloat 7s ease-in-out infinite; }
.hv-orb.o2{ width:30px; height:30px; right:22%; top:38%;
  background:radial-gradient(circle at 35% 30%, rgba(160,190,250,.9), rgba(160,190,250,.05) 70%);
  animation:orbFloat 9s 1.2s ease-in-out infinite; }
.hv-orb.o3{ width:18px; height:18px; left:38%; bottom:22%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), rgba(255,255,255,.05) 70%);
  animation:orbFloat 6s 2s ease-in-out infinite; }
@keyframes orbFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.hv-note{ position:relative; z-index:2; text-align:center; font-family:var(--mono); font-size:11px;
  line-height:1.9; color:#aebbdd; background:rgba(7,11,28,.55); border:1px dashed rgba(170,190,235,.4);
  border-radius:12px; padding:10px 16px; }
.hv-note code{ color:var(--gold-soft); font-size:10.5px; }
@media (max-width:979px){ .hero-visual:not(.loaded){ display:none; } } /* 画像が来るまでモバイルは非表示 */
@media (min-width:980px){
  .hero-glass{ display:grid; grid-template-columns:1.06fr .94fr; gap:54px; align-items:center;
    max-width:1180px; text-align:left; }
  .hero-visual{ margin:0; max-width:none; }
  .hero h1{ font-size:clamp(28px,3vw,40px); }
  .hero-sub{ margin:0 0 8px; }
  .hero-actions{ justify-content:flex-start; }
  .hero-glass .hero-proc{ margin-left:0; }
}

/* --- 実際に作っているもの (実物カード) --- */
.works-sub{ margin:64px 0 8px; text-align:center; font-family:'Noto Serif JP',serif;
  font-size:clamp(19px,2.6vw,24px); font-weight:700; color:var(--ink); }
.works-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:880px; margin:26px auto 0; }
.wcard{ margin:0; background:#fff; border:1px solid var(--line); border-radius:18px; padding:12px 12px 14px;
  box-shadow:0 12px 30px rgba(150,110,40,.1); transition:transform .25s, box-shadow .25s; }
.wcard:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(150,110,40,.16); }
.wimg{ position:relative; aspect-ratio:16/11; border-radius:13px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(170deg,#0d1430,#15214a); }
.wimg.portrait img{ width:auto; max-width:100%; object-fit:contain; }
.wimg .wph{ font-family:var(--mono); font-size:11px; line-height:1.9; color:#aebbdd; text-align:center;
  border:1px dashed rgba(170,190,235,.4); border-radius:10px; padding:9px 14px; }
.wimg .wph code{ color:var(--gold-soft); font-size:10.5px; }
.wimg.loaded .wph{ display:none; }
.wcard figcaption{ margin-top:11px; text-align:center; line-height:1.6; }
.wcard figcaption b{ display:block; font-size:14.5px; color:var(--ink); }
.wcard figcaption span{ font-size:12px; color:var(--mute); }
@media (max-width:680px){ .works-cards{ grid-template-columns:1fr; max-width:380px; } }

/* --- セクション小画像スロット --- */
.sec-art{ display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.sec-art.loaded{ width:96px; height:96px; border-radius:24px; overflow:hidden;
  box-shadow:0 10px 26px rgba(150,110,40,.18); }
.sec-art:not(.loaded)::after{ content:"画像枠 " attr(data-img);
  font-family:var(--mono); font-size:10px; color:#b9ad8f; letter-spacing:.04em;
  border:1px dashed #d6c69e; border-radius:999px; padding:5px 14px; }
@media (max-width:760px){ .sec-art:not(.loaded){ display:none; } }

/* スマホ専用改行 */
.sp-br{ display:none; }
@media (max-width:560px){ .sp-br{ display:inline; } }

/* ===== v4 (2026-06-11): フロー=UI主役 (端末モックの画面がスクロールで変化) ===== */
.flow{ padding:0; position:relative; background:linear-gradient(180deg,
  #f5b97e 0%, #b97f6e 4%, #6a4f68 9%, #2b2344 17%, #1a1f44 30%, #0a1026 52%, #0a1026 100%); }
.flow-track{ height:370vh; position:relative; }
.flow-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; padding:82px 22px 14px; }
.flow-head{ text-align:center; flex:none; }
.flow-head .sec-kicker{ color:var(--gold-soft); margin-bottom:8px; }
.flow-head .sec-kicker::after{ display:none; }
.flow-head .sec-title{ color:#f7f2e6; margin-bottom:0; font-size:clamp(21px,3vw,32px); }
.flow-head .sec-title .accent{ color:var(--gold-soft); }
/* ステップ毎に背景の光が変わる (フリーズ感対策①) */
.flow-stage::before{ content:""; position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  width:min(720px,120vw); height:min(720px,120vw); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--step-glow, rgba(127,226,169,.14)) 0%, transparent 62%);
  transition:background 1s ease; }
.flow[data-fstep="1"] .flow-stage::before{ --step-glow:rgba(127,226,169,.15); }
.flow[data-fstep="2"] .flow-stage::before{ --step-glow:rgba(158,180,232,.17); }
.flow[data-fstep="3"] .flow-stage::before{ --step-glow:rgba(243,217,166,.16); }
.flow[data-fstep="4"] .flow-stage::before{ --step-glow:rgba(245,185,126,.18); }
/* レイアウト: スマホ=縦積み / PC=左コピー右端末 */
.flow-grid{ position:relative; z-index:2; flex:1; min-height:0; width:100%; max-width:1080px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.fcopies{ position:relative; width:100%; max-width:520px; height:118px; flex:none; }
.fcopy{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-align:center; opacity:0; transform:translateY(26px);
  transition:opacity .55s ease, transform .55s ease; }
.fcopy.on{ opacity:1; transform:none; }
.fcopy.past{ opacity:0; transform:translateY(-22px); }
.fs-num{ font-family:'Inter',sans-serif; font-weight:900; font-size:11px; letter-spacing:.34em; color:rgba(243,217,166,.66); }
.fs-word{ font-size:clamp(30px,8vw,40px); font-weight:700; color:#f7f2e6; line-height:1.15;
  text-shadow:0 0 60px rgba(245,185,126,.3); }
.fs-line{ font-size:clamp(12px,3.3vw,14px); color:#c3cce4; }
/* 端末モック */
.flow-device{ flex:none; display:flex; justify-content:center; }
.device{ position:relative; width:min(272px,72vw); border-radius:34px; padding:9px;
  background:linear-gradient(170deg,#1b2342,#0d1227); border:1px solid rgba(170,190,235,.32);
  box-shadow:0 30px 70px rgba(4,8,22,.6), 0 0 50px rgba(245,185,126,.1); }
.dev-notch{ position:absolute; top:15px; left:50%; transform:translateX(-50%); width:74px; height:5px;
  border-radius:99px; background:rgba(223,230,248,.22); z-index:3; }
.screen{ position:relative; height:438px; border-radius:26px; overflow:hidden; background:#0d1227; }
.scr{ position:absolute; inset:0; display:flex; flex-direction:column; opacity:0; transform:translateX(34px);
  transition:opacity .55s ease, transform .55s ease; }
.scr.on{ opacity:1; transform:none; }
.scr.past{ opacity:0; transform:translateX(-30px); }
/* 画面の共通パーツ */
.scr-bar{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:16px 14px 9px; font-size:12px; }
.scr-bar.dark{ background:rgba(7,11,28,.9); color:#dfe6f8; }
.scr-bar.ivory{ background:#f3ecdc; color:#3a3322; }
.scr-bar b{ font-weight:800; letter-spacing:.02em; }
.scr-badge{ font-size:9.5px; font-weight:800; letter-spacing:.06em; color:#7fe2a9; }
.scr-badge.gold{ color:#a87e22; }
.scr-badge.live{ color:#1f9d55; animation:livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.scr-body{ flex:1; min-height:0; padding:14px 12px; display:flex; flex-direction:column; gap:9px; overflow:hidden; }
/* 01 チャット */
.scr-chat .scr-body{ background:linear-gradient(180deg,#b3c6dd,#a9bdd6); }
.scr-chat .bub{ max-width:86%; padding:9px 13px; border-radius:15px; font-size:12.5px; line-height:1.65; text-align:left;
  opacity:0; transform:translateY(14px); }
.scr-chat .bub.user{ margin-left:auto; background:#8de055; color:#10250b; font-weight:700; border-bottom-right-radius:5px; }
.scr-chat .bub.user.sub{ font-weight:500; }
.scr-chat .bub.jw{ margin-right:auto; background:#fff; color:#1c2030; border-bottom-left-radius:5px; min-width:64px; }
.scr.on .bub{ animation:rowIn2 .45s ease both; }
.scr.on .bub:nth-child(1){ animation-delay:.25s; }
.scr.on .bub:nth-child(2){ animation-delay:.7s; }
.scr.on .bub:nth-child(3){ animation-delay:1.2s; }
@keyframes rowIn2{ to{ opacity:1; transform:none; } }
.tdots i{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#9aa7bd; margin:0 2.5px;
  animation:tblink 1.2s ease-in-out infinite; }
.tdots i:nth-child(2){ animation-delay:.18s; } .tdots i:nth-child(3){ animation-delay:.36s; }
@keyframes tblink{ 0%,100%{ opacity:.25; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }
.scr-input{ flex:none; margin:0 10px 12px; background:#fff; border-radius:99px; padding:8px 14px;
  font-size:11px; color:#9aa7bd; }
.scr-chat{ background:#a9bdd6; }
/* 02 整理メモ */
.scr-tidy{ background:#fbf6ea; }
.scr-tidy .trow{ display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid #e8dfc8;
  border-radius:12px; padding:10px 12px; font-size:12px; line-height:1.55; color:#4a4332; text-align:left;
  opacity:0; transform:translateX(-16px); }
.scr-tidy .trow b{ color:#1c2030; font-size:12.5px; }
.scr-tidy .trow i{ font-style:normal; color:#fff; background:#1f9d55; width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; flex:none; margin-top:2px;
  transform:scale(0); }
.scr.on .trow{ animation:rowIn2 .5s ease both; }
.scr.on .trow:nth-child(1){ animation-delay:.25s; } .scr.on .trow:nth-child(1) i{ animation:popIn .35s .55s both; }
.scr.on .trow:nth-child(2){ animation-delay:.75s; } .scr.on .trow:nth-child(2) i{ animation:popIn .35s 1.05s both; }
.scr.on .trow:nth-child(3){ animation-delay:1.25s; } .scr.on .trow:nth-child(3) i{ animation:popIn .35s 1.55s both; }
@keyframes popIn{ to{ transform:scale(1); } }
.tprog{ margin-top:auto; display:flex; align-items:center; gap:10px; }
.tprog i{ flex:1; height:5px; border-radius:99px; background:#e8dfc8; position:relative; overflow:hidden; }
.tprog i::after{ content:""; position:absolute; inset:0; border-radius:99px; transform:translateX(-100%);
  background:linear-gradient(90deg,#d9a44a,#1f9d55); }
.scr.on .tprog i::after{ animation:fillUp 1.6s .5s ease both; }
@keyframes fillUp{ to{ transform:translateX(0); } }
.tprog span{ font-size:10.5px; font-weight:800; color:#7a6e52; flex:none; }
/* 03 ビルド画面 */
.scr-build{ background:linear-gradient(180deg,#10172f,#0d1227); }
.scr-build .scr-body{ align-items:center; gap:0; padding-top:10px; }
.bwin{ width:88%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(22,30,60,.92); border:1px solid rgba(170,190,235,.3); border-radius:11px; padding:8px 12px;
  opacity:0; transform:scale(.86); }
.bw-name{ font-size:11.5px; font-weight:800; color:#e8edfa; letter-spacing:.02em; }
.scr.on .bwin{ animation:nodeIn2 .4s cubic-bezier(.2,.9,.3,1.35) both; }
.scr.on .bwin:nth-of-type(1){ animation-delay:.2s; }
.scr.on .bwin:nth-of-type(2){ animation-delay:.6s; }
.scr.on .bwin:nth-of-type(3){ animation-delay:1s; }
.scr.on .bwin:nth-of-type(4){ animation-delay:1.4s; }
@keyframes nodeIn2{ to{ opacity:1; transform:scale(1); } }
.bw-link{ width:2px; height:16px; flex:none;
  background:linear-gradient(180deg,rgba(243,217,166,.15),rgba(243,217,166,.9),rgba(243,217,166,.15));
  background-size:100% 220%; opacity:0; }
.scr.on .bw-link{ opacity:1; transition:opacity .3s .5s; animation:linkFlow 1.5s linear infinite; }
@keyframes linkFlow{ to{ background-position:0 -220%; } }
.bw-glyph{ display:inline-flex; gap:3px; align-items:center; }
.bub-glyph{ width:22px; height:14px; border-radius:7px 7px 7px 2px; background:#8de055; }
.node-glyph u, .list-glyph u, .web-glyph u{ text-decoration:none; display:inline-block; }
.node-glyph u{ width:8px; height:8px; border-radius:50%; background:#9eb4e8; box-shadow:0 0 6px rgba(158,180,232,.8); }
.list-glyph u{ width:24px; height:4px; border-radius:2px; background:#cdb98a; }
.web-glyph u{ width:26px; height:14px; border-radius:4px; border:1.5px solid #b9a8e0; }
/* 04 稼働ログ */
.scr-live{ background:#fbf6ea; }
.lrow{ display:flex; gap:9px; align-items:center; background:#fff; border:1px solid #e8dfc8; border-radius:11px;
  padding:9px 11px; font-size:11.5px; color:#4a4332; text-align:left;
  opacity:0; transform:translateY(16px); }
.lrow time{ font-family:var(--mono); font-size:10px; color:#a89a74; flex:none; }
.scr.on .lrow{ animation:rowIn2 .45s ease both; }
.scr.on .lrow:nth-child(1){ animation-delay:.2s; }
.scr.on .lrow:nth-child(2){ animation-delay:.55s; }
.scr.on .lrow:nth-child(3){ animation-delay:.9s; }
.scr.on .lrow:nth-child(4){ animation-delay:1.25s; }
.lsum{ margin-top:auto; text-align:center; font-size:11.5px; font-weight:800; color:#7a6e52; }
.lsum b{ color:#1f9d55; font-size:15px; }
/* 進捗 (フリーズ感対策②: 連続で動くバー) */
.flow-foot{ flex:none; width:min(420px,86vw); padding:12px 0 8px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.flow-dots{ display:flex; gap:10px; }
.flow-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(223,230,248,.22); transition:background .3s, box-shadow .3s; }
.flow-dots i.on{ background:var(--gold-soft); box-shadow:0 0 10px rgba(243,217,166,.85); }
.flow-bar{ width:100%; height:2px; border-radius:99px; background:rgba(223,230,248,.14); overflow:hidden; }
.flow-bar i{ display:block; height:100%; width:100%; border-radius:99px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft)); }
/* PC: 左コピー + 右大型端末 */
@media (min-width:920px){
  .flow-stage{ padding:96px 40px 22px; }
  .flow-head .sec-title{ font-size:34px; }
  .flow-grid{ flex-direction:row; justify-content:center; gap:84px; }
  .fcopies{ max-width:430px; height:300px; flex:1; }
  .fcopy{ align-items:flex-start; text-align:left; gap:6px; }
  .fs-word{ font-size:72px; }
  .fs-line{ font-size:16.5px; }
  .device{ width:330px; }
  .screen{ height:560px; }
  .scr-bar{ padding:20px 16px 11px; font-size:13px; }
  .scr-chat .bub{ font-size:13.5px; }
  .scr-tidy .trow{ font-size:13px; }
  .lrow{ font-size:12.5px; }
}
/* reduced-motion: 静的に全画面を縦に展開 */
@media (prefers-reduced-motion: reduce){
  .flow-track{ height:auto; }
  .flow-stage{ position:static; height:auto; overflow:visible; padding-bottom:60px; }
  .flow-grid{ flex-direction:column; }
  .fcopies{ height:auto; display:flex; flex-direction:column; gap:34px; }
  .fcopy{ position:static; opacity:1; transform:none; }
  .device{ width:min(300px,80vw); }
  .screen{ height:auto; display:flex; flex-direction:column; gap:14px; background:none; }
  .scr{ position:relative; height:430px; border-radius:22px; overflow:hidden; opacity:1; transform:none; }
  .scr .bub, .scr .trow, .scr .trow i, .scr .bwin, .scr .bw-link, .scr .lrow{ opacity:1; transform:none; animation:none; }
  .tprog i::after{ transform:none; animation:none; }
  .flow-foot{ display:none; }
}
/* モバイル: ファーストビューの文字量を絞る (v3から継続) */
@media (max-width:560px){
  .hero-sub .sub-more{ display:none; }
  .hero-sub .sub-gap{ display:none; }
  .hero-bridge{ line-height:1.85; }
  .hero-bridge br{ display:none; }
  .flow-stage{ padding:76px 16px 10px; }
  .flow-head .sec-kicker{ font-size:10px; }
}

/* v4.1: 画面内の縦バランス (チャット=下寄せ/ビルド=中央寄せ) */
.scr-chat .scr-body{ justify-content:flex-end; }
.scr-build .scr-body{ justify-content:center; }

/* ===== v5 (2026-06-11): 演出の質感 — 幻想 → 技術の洗練 ===== */
/* --- Hero: 透明グリッド + 静かなスキャンライン (粒は dawn.js 側で減光) --- */
.hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(159,208,255,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(159,208,255,.035) 0 1px, transparent 1px 72px);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 36%, #000 18%, transparent 96%);
  mask-image:radial-gradient(72% 62% at 50% 36%, #000 18%, transparent 96%); }
.hero::after{ content:""; position:absolute; left:0; right:0; top:-150px; height:150px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(191,225,255,.06) 52%, rgba(191,225,255,.11) 60%, transparent);
  animation:scanDown 9s linear infinite; }
@keyframes scanDown{ to{ transform:translateY(calc(100vh + 320px)); } }

/* --- フロー: 起動したAIワークスペース (黒ベタ廃止) --- */
.flow{ background:linear-gradient(180deg, #221c2e 0%, #161c30 6%, #111827 13%, #0f1726 55%, #0b1220 100%); }
.flow[data-fstep="1"] .flow-stage::before{ --step-glow:rgba(127,226,169,.10); }
.flow[data-fstep="2"] .flow-stage::before{ --step-glow:rgba(159,180,232,.13); }
.flow[data-fstep="3"] .flow-stage::before{ --step-glow:rgba(243,217,166,.12); }
.flow[data-fstep="4"] .flow-stage::before{ --step-glow:rgba(245,185,126,.13); }
/* 起動ライン (境界を細い光が走る) */
.flow-boot{ position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(159,208,255,.16) 18%, rgba(159,208,255,.16) 82%, transparent); }
.flow-boot::before{ content:""; position:absolute; top:-1.5px; left:-20%; width:20%; height:5px; border-radius:99px;
  background:linear-gradient(90deg, transparent, #bfe1ff 42%, #ffffff 50%, #f3d9a6 58%, transparent);
  box-shadow:0 0 22px rgba(159,208,255,.85), 0 0 50px rgba(159,208,255,.4); opacity:0; }
.flow.boot .flow-boot::before{ animation:bootRun 1.5s cubic-bezier(.3,.7,.2,1) .15s both; }
@keyframes bootRun{ 0%{ left:-20%; opacity:1; } 92%{ opacity:1; } 100%{ left:102%; opacity:0; } }
/* 奥行き: 薄いグリッド + ガラスパネル */
.flow-deco{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.flow-deco::before{ content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(159,208,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(159,208,255,.04) 0 1px, transparent 1px 64px);
  -webkit-mask-image:radial-gradient(82% 72% at 50% 48%, #000 26%, transparent 100%);
  mask-image:radial-gradient(82% 72% at 50% 48%, #000 26%, transparent 100%); }
.gpanel{ position:absolute; left:50%; top:50%; border-radius:24px;
  border:1px solid rgba(159,208,255,.15);
  background:linear-gradient(160deg, rgba(159,208,255,.055), rgba(159,208,255,.012));
  opacity:0; transform:translateY(52px) rotate(var(--rot)); }
.gpanel.p1{ --rot:-4deg; width:300px; height:440px; margin-left:-356px; margin-top:-200px; }
.gpanel.p2{ --rot:3.5deg; width:256px; height:380px; margin-left:104px; margin-top:-150px; }
.flow.boot .gpanel{ opacity:1; transform:translateY(0) rotate(var(--rot));
  transition:opacity 1s .55s ease, transform 1s .55s ease; }
@media (max-width:919px){
  .gpanel.p1{ width:210px; height:320px; margin-left:-238px; margin-top:-130px; }
  .gpanel.p2{ width:180px; height:270px; margin-left:62px; margin-top:-90px; }
}
/* ステップ連動の背景モチーフ (10〜15%の薄さ・主役は端末) */
.bgm{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.flow[data-fstep="1"] .bgm-chat{ opacity:1; }
.flow[data-fstep="2"] .bgm-tidy{ opacity:1; }
.flow[data-fstep="3"] .bgm-build{ opacity:1; }
.flow[data-fstep="4"] .bgm-live{ opacity:1; }
/* 話す: 大きな吹き出しの輪郭 */
.bgm-chat i{ position:absolute; border:1.5px solid rgba(170,200,255,.13); }
.bgm-chat i:nth-child(1){ left:7%; top:30%; width:120px; height:64px; border-radius:22px 22px 22px 6px; }
.bgm-chat i:nth-child(2){ right:6%; top:56%; width:104px; height:56px; border-radius:22px 22px 6px 22px; border-color:rgba(141,224,85,.16); }
/* 整える: カード層の輪郭 */
.bgm-tidy i{ position:absolute; left:8%; width:130px; height:40px; border-radius:12px; border:1.5px solid rgba(170,200,255,.12); }
.bgm-tidy i:nth-child(1){ top:32%; }
.bgm-tidy i:nth-child(2){ top:44%; left:6%; width:118px; }
.bgm-tidy i:nth-child(3){ top:56%; left:9%; width:124px; }
.bgm-tidy i::after{ content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(127,226,169,.3); }
/* 作る: ノードと接続線 */
.bgm-build .nd{ position:absolute; width:11px; height:11px; border-radius:50%;
  background:rgba(159,208,255,.2); box-shadow:0 0 14px rgba(159,208,255,.3); }
.bgm-build .n1{ left:11%; top:34%; }
.bgm-build .n2{ left:7%; top:58%; }
.bgm-build .n3{ right:8%; top:42%; }
.bgm-build .ln{ position:absolute; height:1.5px;
  background:linear-gradient(90deg, transparent, rgba(159,208,255,.22), transparent); }
.bgm-build .l1{ left:8%; top:46%; width:130px; transform:rotate(32deg); }
.bgm-build .l2{ right:5%; top:48%; width:120px; transform:rotate(-18deg); }
/* 動く: ログラインの流れ */
.bgm-live .lg{ position:absolute; left:6%; height:7px; border-radius:99px;
  background:linear-gradient(90deg, rgba(127,226,169,.18), rgba(159,208,255,.05)); }
.bgm-live .lg1{ top:33%; width:130px; }
.bgm-live .lg2{ top:43%; width:96px; left:8%; animation:lgPulse 2.6s ease-in-out infinite; }
.bgm-live .lg3{ top:53%; width:142px; }
.bgm-live .lg4{ top:63%; width:84px; left:7%; animation:lgPulse 2.6s 1.1s ease-in-out infinite; }
@keyframes lgPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@media (max-width:560px){ .bgm i, .bgm .ln{ opacity:.7; } }
/* reduced-motion */
@media (prefers-reduced-motion: reduce){
  .hero::after{ animation:none; opacity:0; }
  .flow-boot::before{ animation:none; opacity:0; }
  .flow .gpanel{ opacity:1; transform:rotate(var(--rot)); transition:none; }
  .bgm-live .lg2, .bgm-live .lg4{ animation:none; }
}

/* ===== v6 (2026-06-11): 下層=頼める中身 (ガラスカード・細い光・余白) ===== */
/* --- できること: 8カード --- */
.svc2-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:16px; }
.svc2{ position:relative; background:rgba(255,253,248,.86); border:1px solid var(--line); border-radius:18px;
  padding:24px 22px 20px; backdrop-filter:blur(4px);
  transition:transform .22s, box-shadow .25s, border-color .25s; }
.svc2::before{ content:""; position:absolute; top:0; left:22px; right:22px; height:2px; border-radius:99px;
  background:linear-gradient(90deg, transparent, rgba(217,164,74,.55), transparent);
  opacity:0; transition:opacity .25s; }
.svc2:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(150,110,40,.14); border-color:var(--gold-soft); }
.svc2:hover::before{ opacity:1; }
.s2-ic{ width:46px; height:46px; border-radius:13px; background:linear-gradient(140deg,#fdf2dc,#f7e3bb);
  display:inline-flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:12px;
  box-shadow:0 4px 12px rgba(217,164,74,.2); }
.svc2 h3{ font-size:16.5px; font-weight:900; color:var(--ink); margin-bottom:6px; letter-spacing:.02em; }
.svc2 p{ font-size:13.5px; color:var(--soft); line-height:1.8; }
.s2-eg{ display:inline-block; margin-top:11px; font-size:11px; font-weight:700; color:var(--gold-deep);
  background:rgba(217,164,74,.1); border-radius:999px; padding:4px 12px; }
.svc2.ask{ background:linear-gradient(170deg,#fdf4e2,#fbecd2); border-color:var(--gold); }
.svc2.ask .golink{ background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(249,115,22,.3); }
.svc2.ask .golink:hover{ background:var(--orange-deep); }
@media (max-width:560px){ .svc2-grid{ grid-template-columns:1fr; } .svc2{ padding:20px 20px 18px; } }

/* --- 作り方: 7手順レール --- */
.howrail{ position:relative; display:flex; align-items:stretch; justify-content:center; gap:10px;
  max-width:980px; margin:0 auto; flex-wrap:wrap; }
.howrail::before{ content:""; position:absolute; left:4%; right:4%; top:50%; height:1.5px;
  background:linear-gradient(90deg, transparent, rgba(217,164,74,.45) 12%, rgba(217,164,74,.45) 88%, transparent); }
.hstep{ position:relative; z-index:1; flex:1; min-width:96px; max-width:128px;
  background:rgba(255,253,248,.92); border:1px solid var(--line); border-radius:15px;
  padding:15px 8px 13px; text-align:center; backdrop-filter:blur(3px);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:transform .22s, box-shadow .25s, border-color .25s; }
.hstep:hover{ transform:translateY(-4px); border-color:var(--gold-soft); box-shadow:0 14px 30px rgba(150,110,40,.13); }
.hstep i{ font-style:normal; font-family:'Inter',sans-serif; font-size:10px; font-weight:900;
  letter-spacing:.22em; color:var(--gold-deep); opacity:.75; }
.hstep b{ font-family:'Noto Serif JP',serif; font-size:17px; font-weight:700; color:var(--ink); letter-spacing:.06em; }
.hstep small{ font-size:10px; color:var(--mute); line-height:1.5; }
.hstep.grow{ background:linear-gradient(170deg,#fdf4e2,#fbecd2); border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(217,164,74,.1), 0 10px 26px rgba(150,110,40,.16);
  animation:growGlow 3.6s ease-in-out infinite; }
.hstep.grow b{ color:var(--gold-deep); }
@keyframes growGlow{ 0%,100%{ box-shadow:0 0 0 4px rgba(217,164,74,.08), 0 10px 26px rgba(150,110,40,.14); }
  50%{ box-shadow:0 0 0 7px rgba(217,164,74,.16), 0 14px 32px rgba(150,110,40,.2); } }
@media (max-width:760px){
  .howrail{ flex-direction:column; align-items:center; gap:0; }
  .howrail::before{ left:50%; right:auto; top:4%; bottom:4%; height:auto; width:1.5px;
    background:linear-gradient(180deg, transparent, rgba(217,164,74,.45) 10%, rgba(217,164,74,.45) 90%, transparent); }
  .hstep{ width:min(240px,72vw); max-width:none; flex:none; margin:5px 0; padding:13px 10px 11px; }
}

/* --- Garden: 無料で触れるもの 4タイル --- */
.garden-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; max-width:980px; margin:0 auto; }
.gtile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:rgba(255,253,248,.9); border:1px solid var(--line); border-radius:18px; padding:26px 20px 20px;
  transition:transform .22s, box-shadow .25s, border-color .25s; }
.gtile[href]:hover{ transform:translateY(-4px); border-color:var(--gold-soft); box-shadow:0 18px 38px rgba(150,110,40,.15); }
.gt-ic{ font-size:32px; line-height:1; margin-bottom:6px; }
.gt-egg{ height:44px; display:flex; align-items:center; }
.mini-egg.s{ width:32px; height:40px; display:block; position:relative;
  background:radial-gradient(circle at 38% 32%, #fffef8 0%, #f7ecd0 58%, #e7d3a4 100%);
  border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
  box-shadow:0 6px 14px rgba(150,110,40,.22), 0 0 22px rgba(243,217,166,.6);
  animation:eggBreath 3.6s ease-in-out infinite; }
.mini-egg.s .egg-shine{ position:absolute; top:15%; left:24%; width:7px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.85); filter:blur(1px); transform:rotate(-18deg); }
.gtile b{ font-size:16px; font-weight:900; color:var(--ink); }
.gtile p{ font-size:12.5px; color:var(--soft); line-height:1.75; }
.gt-tag{ margin-top:8px; font-size:10.5px; font-weight:800; letter-spacing:.06em; color:#fff;
  background:var(--orange); border-radius:999px; padding:3px 12px; }
.gt-tag.soon{ background:none; color:var(--mute); border:1px dashed #d6c69e; }
@media (max-width:560px){ .garden-grid{ grid-template-columns:1fr 1fr; gap:10px; } .gtile{ padding:18px 12px 14px; } .gtile p{ font-size:11px; } }

/* --- 相談例チップ --- */
.ex-label{ font-size:13px; font-weight:700; color:var(--soft); letter-spacing:.04em; margin-bottom:14px; }
.ex-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:640px; margin:0 auto 34px; }
.ex-chips a{ font-size:13px; font-weight:700; color:var(--ink); background:rgba(255,253,248,.85);
  border:1px solid var(--gold-soft); border-radius:999px; padding:10px 18px;
  transition:transform .18s, background .2s, border-color .2s; }
.ex-chips a::before{ content:"💬 "; }
.ex-chips a:hover{ transform:translateY(-2px); border-color:var(--gold); background:#fff; }
@media (max-width:560px){ .ex-chips{ gap:8px; } .ex-chips a{ font-size:12px; padding:9px 14px; } }